/*
 * Shared palette-aware states for front-end actions and compact utility controls.
 * Text links and navigation links intentionally remain outside this contract.
 * back-to-top keeps its own dedicated design (tab/pill shape from back-to-top-settings.css)
 * and is excluded from this shared contract so its width/height/border-radius survive.
 */

/* Utility control contract: icon-only controls share one transparent surface. */
:root {
	--tiptop-utility-control-size: 52px;
	--tiptop-utility-control-radius: 8px;
	--tiptop-utility-control-padding: 0;
	--tiptop-utility-control-border: color-mix(in srgb, currentColor var(--tt-tint-strong), transparent);
	--tiptop-utility-control-hover-bg: color-mix(in srgb, currentColor var(--tt-tint-soft), transparent);
}

.tiptop-front-toolbar-toggle {
	display: inline-grid;
	place-items: center;
	width: var(--tiptop-utility-control-size);
	height: var(--tiptop-utility-control-size);
	min-width: var(--tiptop-utility-control-size);
	min-height: var(--tiptop-utility-control-size);
	padding: var(--tiptop-utility-control-padding);
	border: 1px solid var(--tiptop-utility-control-border);
	border-radius: var(--tiptop-utility-control-radius);
	background: transparent;
	box-shadow: none;
	color: currentColor;
	transform: none;
}

.tiptop-front-toolbar-toggle:hover,
.tiptop-front-toolbar-toggle[aria-expanded="true"],
.tiptop-front-toolbar-toggle:focus-visible {
	border-color: currentColor;
	background: var(--tiptop-utility-control-hover-bg);
	box-shadow: none;
	color: currentColor;
	transform: none;
}

.tiptop-front-toolbar-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}/* #454: search submit is a borderless square icon everywhere (blog toolbar's
 * original shape) — no more bordered/radius variant for 404/search-results/sidebar. */
html[data-tiptop-palette] body.tiptop-standard-system .site-header .search-form .search-submit,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-404-page .search-form .search-submit,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-search-hero__inner .search-form .search-submit,
html[data-tiptop-palette] body.tiptop-standard-system .site-header .wp-block-search .wp-block-search__button,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-404-page .wp-block-search .wp-block-search__button,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search .wp-block-search__button {
	display: inline-grid;
	place-items: center;
	width: var(--tiptop-utility-control-size);
	height: var(--tiptop-utility-control-size);
	min-width: var(--tiptop-utility-control-size);
	min-height: var(--tiptop-utility-control-size);
	padding: var(--tiptop-utility-control-padding);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: currentColor;
	transform: none;
}

html[data-tiptop-palette] body.tiptop-standard-system .site-header .search-form .search-submit:focus-visible,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-404-page .search-form .search-submit:focus-visible,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-search-hero__inner .search-form .search-submit:focus-visible,
html[data-tiptop-palette] body.tiptop-standard-system .site-header .wp-block-search .wp-block-search__button:focus-visible,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-404-page .wp-block-search .wp-block-search__button:focus-visible,
html[data-tiptop-palette] body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search .wp-block-search__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Admin toolbar toggle: no border (standalone control), slimmer width, sits flush at the header's top-right corner. */
.tiptop-front-toolbar-toggle {
	width: 26px;
	height: 42px;
	min-width: 26px;
	min-height: 42px;
	border: 0;
}

/* back-to-top の色（形は back-to-top-settings.css）。
 * 承認済みモック `_mockup/standard/blocks.html` の .pagetop--* が正本で、
 * 塗り3種(compact/label/side)＝.pagetop--circle/--label/--tab、
 * 枠のみ(minimal)＝.pagetop--outline、面も枠も無い2種(arrow/vertical)＝
 * .pagetop--chevron/--vertical に対応する。
 *
 * モックが使う `--tiptop-button-bg` / `--tiptop-border` / `--tiptop-muted` /
 * `--tiptop-contrast` はどれもパレット12色ぶん定義済みなので、そのまま使えば
 * パレット追従も保てる。汎用ゴーストボタンの `--tiptop-button-outline-*` は
 * hoverで面が塗り潰れる契約でモックと別物なので、ここでは使わない。 */
html[data-tiptop-palette] .back-to-top {
	border-color: var(--tiptop-button-border);
	background: var(--tiptop-button-bg);
	box-shadow: none;
	color: var(--tiptop-button-text);
}

html[data-tiptop-palette] .back-to-top:hover,
html[data-tiptop-palette] .back-to-top:focus-visible {
	border-color: var(--tiptop-button-hover-border);
	background: var(--tiptop-button-hover-bg);
	box-shadow: none;
	color: var(--tiptop-button-hover-text);
}

/* minimal は待機状態から薄い枠が見える（旧実装は hover まで枠が出なかった）。 */
html[data-tiptop-palette] .back-to-top--minimal {
	border-color: var(--tiptop-border);
	background: transparent;
	color: var(--tiptop-muted);
}

html[data-tiptop-palette] .back-to-top--arrow,
html[data-tiptop-palette] .back-to-top--vertical {
	border-color: transparent;
	background: transparent;
	color: var(--tiptop-muted);
}

/* 枠なし3種は hover でも面を持たない。上の `.back-to-top:hover` と同詳細度
 * (0,2,1) なので、打ち消したい background / border-color を名指しで宣言し、
 * かつ必ずこの位置（後ろ）に置くこと。 */
html[data-tiptop-palette] .back-to-top--minimal:hover,
html[data-tiptop-palette] .back-to-top--minimal:focus-visible {
	border-color: var(--tiptop-contrast);
	background: transparent;
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] .back-to-top--arrow:hover,
html[data-tiptop-palette] .back-to-top--arrow:focus-visible,
html[data-tiptop-palette] .back-to-top--vertical:hover,
html[data-tiptop-palette] .back-to-top--vertical:focus-visible {
	border-color: transparent;
	background: transparent;
	color: var(--tiptop-contrast);
}

html[data-tiptop-palette] .posts-navigation a,
html[data-tiptop-palette] .post-navigation a {
	border-color: var(--tiptop-button-outline-border);
	background: transparent;
	box-shadow: none;
	color: var(--tiptop-button-outline-text);
}

/* SNSアイコンはフッター(.site-footer-social)のインク扱いを正とし、
   ヘッダー/モバイルパネルもパレット下で同じトークンに揃える。 */
html[data-tiptop-palette] .site-header .site-social-links__link,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link {
	border-color: color-mix(in srgb, var(--tt-base-ink) var(--tt-tint-strong), transparent);
	background: transparent;
	box-shadow: none;
	color: var(--tt-base-ink);
}

html[data-tiptop-palette] .posts-navigation a:hover,
html[data-tiptop-palette] .posts-navigation a:focus-visible,
html[data-tiptop-palette] .post-navigation a:hover,
html[data-tiptop-palette] .post-navigation a:focus-visible {
	border-color: var(--tiptop-button-outline-hover-bg);
	background: var(--tiptop-button-outline-hover-bg);
	box-shadow: none;
	color: var(--tiptop-button-outline-hover-text);
}

html[data-tiptop-palette] .site-header .site-social-links__link:hover,
html[data-tiptop-palette] .site-header .site-social-links__link:focus-visible,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link:hover,
html[data-tiptop-palette] .site-mobile-panel .site-social-links__link:focus-visible {
	border-color: var(--tiptop-contrast);
	background: transparent;
	box-shadow: none;
	color: var(--tiptop-contrast);
}

body.tiptop-standard-system .site-header .search-form,
body.tiptop-standard-system .tiptop-404-page .search-form,
body.tiptop-standard-system .tiptop-search-hero__inner .search-form,
body.tiptop-standard-system .site-header .wp-block-search__inside-wrapper,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__inside-wrapper,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__inside-wrapper {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 52px !important;
	align-items: stretch !important;
	overflow: visible !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tt-base-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}/* Shared transparent search field inside the underline form contract. */
body.tiptop-standard-system .site-header .search-field,
body.tiptop-standard-system .tiptop-404-page .search-field,
body.tiptop-standard-system .tiptop-search-hero__inner .search-field,
body.tiptop-standard-system .site-header .wp-block-search__input,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__input,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__input {
	height: 52px !important;
	min-height: 52px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* 検索フォームのフォーカス可視化（2026-08-09・#732 のフォーム調査）。
 * 実測では、この検索欄の下線を描いているのは input ではなく親 <form> の
 * border-bottom（input 側は上の共有ルールで border:0）。そのため input に
 * border-bottom-color を当てても空振りする。サイドバー検索は
 * blog-page.css の .tiptop-blog-widget--search 配下にある検索フォームの
 * :focus-within ルールが下線を濃くしており、
 * その型をヘッダー・404・検索結果へ横展開する。
 * **!important を付けているのは、上の共有ルールが border-bottom を !important で
 * 敷いており、詳細度を上げても勝てないため**（このファイルは既に106箇所で
 * !important を使う契約になっている）。 */
body.tiptop-standard-system .site-header .search-form:focus-within,
body.tiptop-standard-system .tiptop-404-page .search-form:focus-within,
body.tiptop-standard-system .tiptop-search-hero__inner .search-form:focus-within,
body.tiptop-standard-system .site-header .wp-block-search__inside-wrapper:focus-within,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__inside-wrapper:focus-within,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__inside-wrapper:focus-within {
	border-bottom-color: var(--tiptop-contrast) !important;
}

/* 上で下線がフォーカスを示すので、input 側の UA 既定リング（入力ボックス全周の
 * 黒い矩形・実測548px幅）は消す。design-system.css:1036 のサイドバー検索と同じ扱い。
 * **下線での可視化が効いていることが前提**なので、上のルールと必ずセットで維持する。 */
body.tiptop-standard-system .site-header .search-field:focus-visible,
body.tiptop-standard-system .tiptop-404-page .search-field:focus-visible,
body.tiptop-standard-system .tiptop-search-hero__inner .search-field:focus-visible,
body.tiptop-standard-system .site-header .wp-block-search__input:focus-visible,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__input:focus-visible,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__input:focus-visible {
	outline: none;
}

/* 入力文字がサイト書体を継承していなかった（実測 Arial 13.333px #000 ＝UA既定）。
 * モックは 0.88rem・本文色・サイト書体。イマーシブは既存のままにしたいので
 * 標準スコープだけに当てる。 */
body.tiptop-standard-system .site-header .search-field,
body.tiptop-standard-system .tiptop-404-page .search-field,
body.tiptop-standard-system .tiptop-search-hero__inner .search-field,
body.tiptop-standard-system .site-header .wp-block-search__input,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__input,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__input {
	color: var(--tiptop-text);
	font-family: inherit;
	font-size: var(--tt-text-body);
}

body.tiptop-standard-system .site-header .search-submit,
body.tiptop-standard-system .tiptop-404-page .search-submit,
body.tiptop-standard-system .tiptop-search-hero__inner .search-submit,
body.tiptop-standard-system .site-header .wp-block-search__button,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__button,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__button {
	color: var(--tt-base-ink);
}

body.tiptop-standard-system .site-header .search-submit svg,
body.tiptop-standard-system .tiptop-404-page .search-submit svg,
body.tiptop-standard-system .tiptop-search-hero__inner .search-submit svg,
body.tiptop-standard-system .site-header .wp-block-search__button svg,
body.tiptop-standard-system .tiptop-404-page .wp-block-search__button svg,
body.tiptop-standard-system .tiptop-search-hero__inner .wp-block-search__button svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	margin: auto !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

/* #644の下線型はイマーシブだけに残す。ページ別スコープは
 * ink/muted/margin-top の接続だけを担当し、構造と状態はここで共有する。 */
.tiptop-blog-page,
.category,
.tag,
.date {
	--tiptop-pagination-ink: var(--tiptop-blog-ink);
	--tiptop-pagination-muted: var(--tiptop-blog-muted);
}

.tiptop-works-page {
	--tiptop-pagination-ink: var(--tiptop-works-ink);
	--tiptop-pagination-muted: var(--tiptop-works-muted);
}

.tiptop-news-page,
.tax-news_category {
	--tiptop-pagination-ink: var(--tiptop-news-ink);
	--tiptop-pagination-muted: var(--tiptop-news-muted);
}

/* 投稿内の改ページ（<!--nextpage-->）も一覧と同じページ送り部品を使う。
 * 上の種別ごとのトークンは祖先（.tiptop-blog-page 等）に付くので、ページ種別で
 * 色が変わってしまう。nav自身に置いて4テンプレートを同じ見た目にする。 */
.pagination--post {
	--tiptop-pagination-ink: var(--tiptop-contrast);
	--tiptop-pagination-muted: var(--tiptop-muted);
	--tiptop-pagination-margin-top: var(--tt-space-7);
}

@media (max-width: 700px) {
}

/* ============================================================
   標準モードのページ送り（2026-08-09・承認済みモックへ／あやちゃん指示）
   このファイルの上にある一覧ページのページ送り契約は、`.pagination .page-numbers`
   から枠線・角丸・パディング・最小サイズを **すべて !important で剥がして**
   「素のテキスト＋現在地は下線」にしていた（詳細度ではなく !important が原因で、
   後ろから上書きしようとしても勝てない）。
   モックは「枠線1pxのピル・40px・グレー文字、現在地だけ黒塗り」なので、
   上の契約群のスコープをイマーシブ側だけに絞り、標準モードはここで組み直す。
   剥がしルールが標準に当たらなくなるため !important は不要。
   （このコメントにモードのクラス名を書くと check-mode-drift が誤検知するため、
   クラス名ではなく「イマーシブ側」と書いている）
   色・罫線・角丸はモックと同じ役割の既存トークンへ直接接続する。
   ============================================================ */

body.tiptop-standard-system .navigation.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: var(--tiptop-pagination-margin-top, var(--tt-space-8)) 0 0;
}

body.tiptop-standard-system .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--tt-space-2);
	width: 100%;
	margin: 0;
}

body.tiptop-standard-system .pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.6em;
	border: 1px solid var(--tiptop-border);
	border-radius: var(--tt-radius-pill);
	background: transparent;
	color: var(--tiptop-muted);
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-label);
	line-height: 2;
	text-decoration: none;
	transition: border-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		background var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
		color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}

body.tiptop-standard-system .pagination .page-numbers.current {
	border-color: var(--tiptop-contrast);
	background: var(--tiptop-contrast);
	color: var(--tiptop-base);
}

/* 省略記号は枠を持たない（モックの .is-dots と同じ扱い）。 */
body.tiptop-standard-system .pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

body.tiptop-standard-system .pagination .page-numbers:not(.dots):not(.current):hover,
body.tiptop-standard-system .pagination .page-numbers:not(.dots):not(.current):focus-visible {
	border-color: var(--tiptop-contrast);
	color: var(--tiptop-contrast);
}