/*
 * Issue #353: terminal contracts for standard card hover and form controls.
 * Intentional showcase interactions (the Works archive bento reveal) remain outside this layer.
 *
 * Issue #382: the shared post-detail body contract is also finalized here so
 * blog, news, and works cannot drift through page-specific cascade rules.
 *
 * Issue #385: blog, news, and works share one uncropped post-detail hero.
 *
 * Issue #387: fixed pages keep their background-image overlay hero structure,
 * but share one visual tone across the common page hero and service hero.
 *
 * Issue #392: standard and story fixed pages share the immersive-wide outer
 * frame while their normal prose keeps the existing readable text measure.
 *
 * Issue #362: standard empty states share one structural and visual contract.
 */

:root {
	--tiptop-field-focus-width: 2px;
	--tiptop-card-image-hover-scale: 1.025;
}

/* Shared standard empty state. The 404 page intentionally keeps its own branded layout. */
.empty-state {
	display: grid;
	justify-items: start;
	gap: var(--tt-space-3);
	padding-block: var(--tt-space-section);
}

.empty-state__title,
.empty-state__description {
	margin: 0;
}

.empty-state__title {
	font-size: var(--tt-text-section);
	line-height: var(--tt-leading-tight);
}

.empty-state__description {
	max-width: var(--tt-width-narrow);
	color: var(--tt-color-muted);
}

.empty-state__actions {
	margin-top: var(--tt-space-2);
}

/* 検索結果の0件表示はモックの `.search-empty`（_mockup/tiptop-pages.css:478）へ揃える
 * （Issue #769）。モックは**上罫線1px・上下64px・中央寄せ・muted**で、
 * 共有の `.empty-state`（左寄せ・節の縦リズム）とは見た目の役割が違う。
 * 検索ページだけに閉じるのは、他の呼び出し元（アーカイブの「投稿がありません」）が
 * 左寄せの既存契約を保つため。 */
body.tiptop-standard-system.search .empty-state {
	justify-items: center;
	padding-block: var(--tt-space-8);
	border-top: 1px solid var(--tiptop-border);
	color: var(--tiptop-muted);
	text-align: center;
}

/* 文言のサイズもモックへ（モックの `.search-empty p` は body の 0.92rem を継承して
 * 14.72px。実サイトは16pxだった）。 */
body.tiptop-standard-system.search .empty-state__description {
	font-size: var(--tt-text-body);
	/* 行間もモックの2.0倍（実サイトは1.95倍で0.7px詰まっていた）。 */
	line-height: calc(2 * var(--tt-leading-scale));
}

/*
 * Fixed-page hero contract (Issue #387, option A): preserve the existing
 * background-image + overlay DOM and saved hero fields, while matching the
 * immersive content-page hero's height, gutters, veil, and heading scale.
 * contact/service used to share this "full hero" contract too, but they're
 * now unconditionally compact (.tiptop-compact-hero below) — .tiptop-page
 * is the only caller left that still toggles between full and compact
 * depending on whether an image resolves.
 */
html body .tiptop-page > .page-hero {
	position: relative;
	display: grid;
	isolation: isolate;
	align-items: end;
	min-height: clamp(520px, 72svh, 700px);
	padding: clamp(112px, 15vh, 174px) 0 clamp(64px, 9vh, 104px);
	border-bottom: 1px solid var(--tt-base-line);
	background-position: center;
	background-size: cover;
}

/*
 * page-hero__inner shares .archive-hero__inner (main.css), whose two-column
 * grid reserves a minmax(240px, 420px) track for an inline hero image. Current
 * page and archive hero renderers paint a full-bleed background without that
 * image element, so the reserved column is dead space that squeezes the text
 * column. Collapse the affected hero render paths to a single column.
 */
html body .tiptop-page > .page-hero .page-hero__inner,
html body .tiptop-contact-page > .page-hero .page-hero__inner,
html body .tiptop-blog-page > .archive-hero .archive-hero__inner {
	display: block;
}/*
 * #419: the compact hero component. No forced large min-height, no
 * image-oriented divider, title stays the visual anchor but doesn't need
 * hero-scale type. A short accent bar draws in under the title after it
 * reveals. Background image and veil visibility are independent from this
 * compact shape and follow the shared has-hero-image/has-no-hero-image
 * contract in base-system.css.
 *
 * `.tiptop-compact-hero` is added to markup by three independent render
 * paths, always paired with the pre-existing `.archive-hero` class so this
 * selector's specificity reliably beats the older per-template rules it
 * replaces (immersive-content-pages.css's archive-hero padding, the base
 * veil ::before, etc. — see docs/design-system-minimization.md):
 *   - inc/page-hero-settings.php `tiptop_theme_render_page_hero()`:
 *     page.php only when no image resolves (`.has-no-hero-image`);
 *     page-contact.php unconditionally.
 *   - inc/archive-hero-settings.php `tiptop_theme_render_archive_hero()`:
 *     blog/news/works archives, unconditionally.
 *   - page-service.php: unconditionally.
 * The title element carries `.archive-hero__title` in all six cases (native
 * to page.php/contact/archives; added directly to service's bare h1) so one
 * selector covers the title/bar styling and motion everywhere too.
 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero {
	min-height: 0;
	padding: clamp(64px, 9vh, 96px) 0;
	border-bottom: none;
}

html body.tiptop-standard-system .tiptop-compact-hero.archive-hero .archive-hero__title {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
}

html body.tiptop-standard-system .tiptop-compact-hero.archive-hero .archive-hero__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 24px;
	background: var(--tiptop-accent);
}

/* 下層ヒーロー見出しのトークン（Issue #1237）。
 * 役割で持つ——`primary` が大きいほう、`secondary` が小さいほう。eyebrow / title という
 * 要素名で持たないのは、購入者が選ぶ「組み方」で**どちらの要素が大きいかが入れ替わる**ため。
 *
 * 既定値は下の規則が今持っている宣言を1つずつ写した。生値ではなく参照のまま写すのは、
 * 購入者が書体・配色・文字余白を切り替えたときに見出しだけ取り残されないようにするため
 * （160行のコメントに書いてある以前の判断をそのまま引き継ぐ）。
 *
 * ⚠ `:where()` で詳細度を 0-0-0 に落としてある。子テーマが
 * `body.tiptop-standard-system { --tt-hero-primary-size: 2rem }`（0-1-1）で
 * **同点ではなく勝てる**ようにするため。`body.tiptop-hero-order-latin`（0-1-1）で
 * 定義すると同点＋ソース順の勝負になり、「同点でしか勝てないなら !important」という
 * 子テーマ側の逃げ道を呼び戻してしまう。
 *
 * ⚠ `:root` には置けない。`--tiptop-font-*` は `body` で解決されるので、
 * `:root` から `var()` で参照しても解決に失敗する（docs/extension-points.md §5 の罠）。 */
:where(body.tiptop-hero-order-latin) {
	--tt-hero-primary-font: var(--tiptop-font-label);
	--tt-hero-primary-size: var(--tt-text-hero);
	--tt-hero-primary-weight: var(--tiptop-font-weight-display);
	--tt-hero-primary-tracking: var(--tiptop-letter-spacing-heading);
	--tt-hero-primary-leading: 1.6;
	--tt-hero-primary-color: var(--tiptop-contrast);
	--tt-hero-secondary-font: var(--tiptop-font-heading);
	--tt-hero-secondary-size: var(--tt-text-note);
	--tt-hero-secondary-weight: 500;
	--tt-hero-secondary-tracking: 0.08em;
	--tt-hero-secondary-leading: calc(2 * var(--tt-leading-scale));
	--tt-hero-secondary-color: var(--tiptop-muted);
}

/* 日本語を大きくする組み方。**入れ替わるのは「どちらが大きいか」だけ**と説明できる形に
 * したいので、小さいほう（secondary）は latin と同じ値の鏡にしてある。
 * 違うのは大きいほうの書体で、日本語が主役になるぶん見出し書体を当てる。 */
:where(body.tiptop-hero-order-jp) {
	--tt-hero-primary-font: var(--tiptop-font-heading);
	--tt-hero-primary-size: var(--tt-text-hero);
	--tt-hero-primary-weight: var(--tiptop-font-weight-display);
	--tt-hero-primary-tracking: var(--tiptop-letter-spacing-heading);
	--tt-hero-primary-leading: 1.6;
	--tt-hero-primary-color: var(--tiptop-contrast);
	--tt-hero-secondary-font: var(--tiptop-font-heading);
	--tt-hero-secondary-size: var(--tt-text-note);
	--tt-hero-secondary-weight: 500;
	--tt-hero-secondary-tracking: 0.08em;
	--tt-hero-secondary-leading: calc(2 * var(--tt-leading-scale));
	--tt-hero-secondary-color: var(--tiptop-muted);
}

/* 標準モードの下層ヒーロー（承認済みモックへの移行）。
 * 画像が無いとき（.has-no-hero-image）だけ、モックの
 * 「白 ＋ テキスト ＋ 下1本の罫線」にする。画像が設定されているときは上のcompact契約の
 * ままなので、以前に決めた「管理画面で設定した画像を標準モードでも尊重する」判断は壊さない。
 * ここで言う画像は「そのページ自身に設定した画像」だけ＝トップページのヒーロー画像を流用する
 * フォールバック（tiptop_subpage_hero_fallback）は廃止した。
 * イマーシブは対象外（未依頼）。
 * paddingに !important を付けているのは、すぐ上の compact 契約が !important 付きの
 * 所有者で、詳細度では勝てないため（所有者が同一ファイルの直上なので追跡はしやすい）。 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero.has-no-hero-image {
	padding: var(--tt-space-hero-standard) 0;
	border-bottom: 1px solid var(--tiptop-border);
}

/* ここは「大きいほうの見出し」の宣言一式なので primary のトークンで書く（#1237）。
 * 太さを生値の 400 でなくトークン参照にした理由と、字間を
 * `--tiptop-letter-spacing-heading` にした理由（Issue #1000）は、
 * トークンの既定値としてそのまま生きている——生値 0.06em は elegant プリセットの値で、
 * standard は 0.04em＝**別プリセットの値を写していた**という取り違えの是正だった。
 * モックの `.page-hero__title`（_mockup/standard/css/shared.css:197）も
 * `var(--tiptop-letter-spacing-heading)` で書かれていて、すぐ上のコメントが
 * 「ここで固定すると、購入者が書体を切り替えても見出しの印象だけ取り残される」と
 * 明示している。値ではなく参照そのものがモックの意図。
 *
 * ⚠ 書体だけは latin の primary（＝eyebrow の `--tiptop-font-label`）と食い違う。
 * eyebrow が空のページ（page-hero・service は任意項目）では title がそのまま
 * 大きいほうになるが、その title は今 `--tiptop-font-heading` で出ている。
 * ここへ latin の primary-font を当てると**そのページだけ書体が変わってしまう**ので、
 * latin では下の「latin の title は常に小さいほう側の書体」で上書きして現状を守る。
 * jp では title が大きいほうなので、この参照がそのまま当たる。 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title {
	color: var(--tt-hero-primary-color);
	font-family: var(--tt-hero-primary-font);
	font-size: var(--tt-hero-primary-size);
	font-weight: var(--tt-hero-primary-weight);
	letter-spacing: var(--tt-hero-primary-tracking);
	line-height: var(--tt-hero-primary-leading);
}

/* latin では大きいほうが eyebrow なので、title の書体は eyebrow の有無にかかわらず
 * 小さいほう側（＝これまでどおり `--tiptop-font-heading`）に固定する。
 * `:not()` を使わないのは、除外の中身が詳細度に加算されるうえ、外れるのが
 * 宣言ブロック全体になるため（実際に2件踏んだ）。 */
html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title {
	font-family: var(--tt-hero-secondary-font);
}

/* モックはタイトル下のアクセントバーを使わない（区切りはヒーロー下の罫線1本に集約する）。 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title::after {
	content: none;
}

/* モックの見出しは「Latin（大） ＋ 日本語（小・グレー）」の2段。
 * 実サイトは eyebrow 欄にLatin（例 Works）、タイトル欄に日本語（例 実績）が入っていて
 * 大小が逆なので、**管理画面の入力を入れ替えずに大小だけ交換**して同じ見え方にする。
 * DOM順（eyebrow → h1）は視覚順と一致したままで、h1のテキストは日本語のまま＝意味論も崩れない。
 * eyebrowが空のページ（page-hero・service は任意項目）では h1 を大きいままにしたいので、
 * :has() で「eyebrowに文字があるときだけ」に限定している。
 *
 * この交換は「英語を大きく」を選んだときの組み方なので、セレクタ先頭へ
 * `.tiptop-hero-order-latin` を足してある（#1237）。既定は latin なので今までと同じ勝敗。 */
html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__eyebrow {
	margin-bottom: 0;
	color: var(--tt-hero-primary-color);
	/* 書体は front-typography-roles.css の eyebrow 契約（--tiptop-font-label）を
	 * トークン既定として引き取る。ここで参照に起こしておかないと、案件が
	 * 「大きいほうだけ書体を変える」を上書きで表現できない。 */
	font-family: var(--tt-hero-primary-font);
	font-size: var(--tt-hero-primary-size);
	font-weight: var(--tt-hero-primary-weight);
	letter-spacing: var(--tt-hero-primary-tracking);
	line-height: var(--tt-hero-primary-leading);
}

/* eyebrowの52×2pxの下線もモックには無い。 */
html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__eyebrow::after {
	content: none;
}

/* 字間はモックの `.page-hero__title-jp` が使う --tt-tracking-label と同値の 0.08em。
 * ⚠ 実サイトにも同名の `--tt-tracking-label` があるが **0.04em で別値**なので、
 * `--tt-hero-secondary-tracking` の既定は生値の 0.08em で持たせてある
 * （Issue #1000 で確認）。
 * 行間はモックの `.page-hero__title-jp` ＝ --tt-leading-body（2.0）。ここには 1.6 が
 * 入っていたが、それは **大きいほうの --tt-leading-hero の値** で、小さいほうへ
 * 写し間違えていた（同）。トークン `--tt-leading-base`（1.95）を 2.0 にするのは
 * 全サイトに波及するので採らず、design-system.css:695 の前例どおり固有値 ×
 * --tt-leading-scale で書いて文字余白プリセットへの追従を保つ。検索ヒーロー側も同じ。 */
html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__title {
	margin-top: var(--tt-space-2);
	color: var(--tt-hero-secondary-color);
	font-family: var(--tt-hero-secondary-font);
	font-size: var(--tt-hero-secondary-size);
	font-weight: var(--tt-hero-secondary-weight);
	letter-spacing: var(--tt-hero-secondary-tracking);
	line-height: var(--tt-hero-secondary-leading);
}

/* 「日本語を大きく」を選んだときは、鏡の関係で eyebrow が小さいほうになる（#1237）。
 * 上の latin の階段と**同じ詳細度**（クラス6個＋:has()）で書いて、勝敗が
 * ソース順ではなく body のクラスだけで決まるようにしてある。
 * 上下の余白は latin の title 側 `margin-top: var(--tt-space-2)` の鏡で、
 * eyebrow の下に同じ間隔を置く。下線を出さないのも latin と揃える。 */
html body.tiptop-standard-system.tiptop-hero-order-jp .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__eyebrow {
	margin-bottom: var(--tt-space-2);
	color: var(--tt-hero-secondary-color);
	font-family: var(--tt-hero-secondary-font);
	font-size: var(--tt-hero-secondary-size);
	font-weight: var(--tt-hero-secondary-weight);
	letter-spacing: var(--tt-hero-secondary-tracking);
	line-height: var(--tt-hero-secondary-leading);
}

html body.tiptop-standard-system.tiptop-hero-order-jp .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__eyebrow::after {
	content: none;
}

/* 分類・タグ・日付のアーカイブでは、小さいほうの見出し（＝分類名）を本文色にする
 * （Issue #996・意匠上の判断で案B）。
 *
 * index.php / archive.php / taxonomy-*.php は「どの分類を見ているのか分からない」という
 * 理由で分類名を h1 へ流している（index.php のコメント参照）。ところが上の大小交換で
 * その h1 は 13.44px の muted に落ち、大きく出るのは全分類で共通の eyebrow（例 Blog）に
 * なるため、せっかく渡した分類名が読み取りにくかった。
 *
 * 「Latin（大）＋日本語（小）」の原則は崩さず、色だけ muted → 本文色にして可読性を上げる。
 * 検索結果ヒーローも同じ原則で組んである（同ファイル下部）ので、そちらは対象外＝
 * 検索語は eyebrow「Search」の下という位置で意味が取れる。
 *
 * 一覧のトップ（body.blog / .post-type-archive-news / .post-type-archive-work）には
 * 当てない。あちらの h1 はサイト設定の固定文言（例「読みもの」）で、強調する必要がない。
 * body クラスで分岐できることは実測で確認済み（category / tag / date / tax-news_category /
 * tax-work_category は分類ページにだけ付き、一覧トップには付かない）。
 *
 * この画面は承認済みモック13ページに含まれていない＝モックに正解が無いケースなので、
 * mock-diff の対象外。
 *
 * 「英語を大きく」にだけ当てる（#1237）。「日本語を大きく」では分類名の h1 が
 * そのまま大きいほうなので、#996 の読み取りにくさは起きない。
 * 値はここだけの判断なのでトークンにせず生値で据え置く。 */
html body.tiptop-standard-system.tiptop-hero-order-latin:is(.category, .tag, .date, .tax-news_category, .tax-work_category) .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content:has(.archive-hero__eyebrow:not(:empty)) .archive-hero__title {
	color: var(--tiptop-text);
}

/* front-gradient-system.css が全ヒーローの ::after に3層のグラデーション
 * （--tiptop-gradient-hero＝radial×2＋linear）を敷いている。標準デザインは
 * 「動きゼロ・装飾ゼロの素の土台」なので、白ヒーローではこれを出さない。
 * 画像が設定されているヒーローは対象外にして従来の見た目を保つ。 */
html body.tiptop-standard-system .archive-hero.has-no-hero-image::after {
	content: none;
}

/* リードの測度と字間。実サイトは720pxまで伸び、字間も共通の --tt-letter-add 分（2.24px）
 * 開いていたが、モックは34em（約544px）＋字間なし。ヒーロー見出しで字間トークンを
 * 意図的に外したのと同じ判断を、リードにも適用する。 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__lead {
	max-width: 34em;
	letter-spacing: normal;
}

/* 下層ヒーローの中央寄せ（Issue #1237）。購入者向けの2択なので
 * トークンではなく body class の規則で持つ。**「左寄せ」側は1行も書かない**——
 * 何も足さない状態が今の見え方で、既定で計算値が動かないことを最優先にする。
 *
 * ⚠ `text-align: center` だけでは中央にならない。`.archive-hero__content` は
 * 幅の決まった箱が左に置かれているので `margin-inline: auto` が要る。
 * eyebrow も `[class*="__eyebrow"] { width: fit-content }`（front-gradient-system.css:67）
 * で内容幅の箱になっているため個別に要る。リードは `max-width: 34em` で同じ事情。
 * 案件1件目の子テーマ（custom-design.css:796-805）が実測でこの3箇所を必要としていた。 */
html body.tiptop-standard-system.tiptop-hero-align-center .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__content {
	margin-inline: auto;
	text-align: center;
}

html body.tiptop-standard-system.tiptop-hero-align-center .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__eyebrow,
html body.tiptop-standard-system.tiptop-hero-align-center .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__lead {
	margin-inline: auto;
}

/* 検索結果ページ（search.php）は `.archive-hero__content` でなく
 * `.tiptop-search-hero__inner` ＋ `.section__eyebrow` の別の組み立てなので個別に要る
 * （実測で左のまま残っていた）。`.tiptop-search-hero__inner` は
 * `.content-area` で既に左右 margin が auto（実測 232.5px）なので margin-inline は足さない。 */
html body.tiptop-standard-system.tiptop-hero-align-center .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .tiptop-search-hero__inner {
	text-align: center;
}

html body.tiptop-standard-system.tiptop-hero-align-center .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow {
	margin-inline: auto;
}

/*
 * serviceページだけタイトル直下に罫線が見える。ヒーローが
 * 圧縮された今、直後に来る最初の.tiptop-service-blockのborder-top（他の
 * サービスブロック同士を区切るための線）が、ヒーローの一部のように見えて
 * しまっていた。ヒーローに隣接する最初のブロックだけ罫線を外す。
 * padding-topも同様の理由で縮小：.tiptop-service-blockは全ブロック共通で
 * 本文用フルサイズ(--tt-base-section-space、最大190px)を使っており、
 * ヒーロー自身の余白と合わさって最初のブロックだけ頭が過大だった
 * （news content wrapperで見つけたのと同型のバグ）。blog/works同様の
 * 縮小値に統一。ブロック同士の間隔（2つ目以降のpadding-top）は対象外。
 */
html body.tiptop-standard-system .tiptop-service-hero + .tiptop-service-block {
	border-top: none;
	padding-top: clamp(52px, 7vw, 92px);
}

/* Issue #401: one shared state contract for contact, comment, and blog search controls. */
.tiptop-contact-form,
.single-post .blog-comments,
.tiptop-blog-page .tiptop-blog-widget--search {
	--tt-form-focus-color: var(--tiptop-contrast);
	--tt-form-control-accent: var(--tiptop-contrast);
	--tt-form-disabled-foreground: var(--tiptop-muted, var(--tt-color-muted));
	--tt-form-disabled-background: var(--tiptop-surface, var(--tt-color-surface));
	--tt-form-disabled-border: var(--tiptop-border, var(--tt-color-border));
}

.tiptop-contact-form {
	--tt-form-focus-color: var(--tiptop-contact-ink);
	--tt-form-control-accent: var(--tiptop-contact-ink);
	--tt-form-disabled-foreground: var(--tiptop-contact-muted);
	--tt-form-disabled-background: var(--tiptop-contact-surface);
	--tt-form-disabled-border: var(--tiptop-contact-border);
}

.single-post .blog-comments {
	--tt-form-focus-color: var(--tiptop-comment-text);
	--tt-form-control-accent: var(--tiptop-comment-text);
	--tt-form-disabled-foreground: var(--tiptop-comment-muted);
	--tt-form-disabled-background: var(--tiptop-comment-surface);
	--tt-form-disabled-border: var(--tiptop-comment-border);
}

.tiptop-blog-page .tiptop-blog-widget--search {
	--tt-form-focus-color: var(--tiptop-blog-ink);
	--tt-form-control-accent: var(--tiptop-blog-ink);
	--tt-form-disabled-foreground: var(--tiptop-blog-muted);
	--tt-form-disabled-background: var(--tiptop-blog-surface);
	--tt-form-disabled-border: var(--tiptop-blog-border);
}

.tiptop-contact-form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):focus-visible,
.single-post .comment-form :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):focus-visible,
.tiptop-blog-page .tiptop-blog-widget--search .search-field:focus-visible {
	border-color: var(--tt-form-focus-color);
	outline: var(--tiptop-field-focus-width) solid var(--tt-form-focus-color);
	outline-offset: 3px;
}

.tiptop-contact-form :is(input[type="checkbox"], input[type="radio"]),
.single-post .comment-form :is(input[type="checkbox"], input[type="radio"]) {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--tt-form-control-accent);
	cursor: pointer;
}

.tiptop-contact-form :is(input[type="checkbox"], input[type="radio"]):hover:not(:disabled),
.single-post .comment-form :is(input[type="checkbox"], input[type="radio"]):hover:not(:disabled) {
	opacity: 0.82;
}

.tiptop-contact-form :is(input[type="checkbox"], input[type="radio"]):checked,
.single-post .comment-form :is(input[type="checkbox"], input[type="radio"]):checked {
	accent-color: var(--tt-form-control-accent);
}

.tiptop-contact-form :is(input[type="checkbox"], input[type="radio"]):focus-visible,
.single-post .comment-form :is(input[type="checkbox"], input[type="radio"]):focus-visible,
.tiptop-contact-form :is(input[type="submit"], .wpcf7-acceptance a):focus-visible,
.single-post :is(.comment-form .submit, .comment-reply-link, .blog-comment__permalink):focus-visible {
	outline: var(--tiptop-field-focus-width) solid var(--tt-form-focus-color);
	outline-offset: 3px;
}

.tiptop-contact-form :is(input:not([type="submit"]):not([type="hidden"]), textarea, select):disabled,
.single-post .comment-form :is(input:not([type="submit"]):not([type="hidden"]), textarea, select):disabled,
.tiptop-blog-page .tiptop-blog-widget--search .search-field:disabled {
	border-color: color-mix(in srgb, var(--tt-form-disabled-border) 58%, transparent);
	background: color-mix(in srgb, var(--tt-form-disabled-background) 58%, transparent);
	color: var(--tt-form-disabled-foreground);
	cursor: not-allowed;
	opacity: 0.58;
}

.tiptop-contact-form input[type="submit"]:disabled,
.single-post .comment-form .submit:disabled,
.tiptop-blog-page .tiptop-blog-widget--search .search-submit:disabled {
	border-color: color-mix(in srgb, var(--tt-form-focus-color) 20%, transparent);
	background: color-mix(in srgb, var(--tt-form-focus-color) 38%, transparent);
	color: var(--tt-form-disabled-foreground);
	cursor: not-allowed;
	opacity: 0.58;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
}

/* 検索結果ヒーローも他の一覧ヒーローと同じ2段（大きいラテン＋小さい日本語）に揃える。
 * 上の大小交換ルールは `.archive-hero__content` ＋ `.archive-hero__eyebrow`
 * に限定していて、検索だけ `.tiptop-search-hero__inner` ＋ `.section__eyebrow` という
 * 別のクラス構成なので届いておらず、**「Search」が12.5pxの太字＋52×2pxの下線バー、
 * 検索語のh1が49.6pxの太字**という、サイト内で唯一違う組み方のまま残っていた。
 * モックは「Search」を大きいラテン、検索語は結果セクション側の小さい行に置く扱いなので、
 * ここも eyebrow を主役にして h1（検索語）を小さいサブ行にする。
 *
 * セレクタに compact/archive/has-no-hero-image を足しているのは、同ファイル上方の
 * `.tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title`（クラス5個）が
 * font-size だけを持っていて、クラス3個では**色とウェイトだけ効いてサイズだけ負ける**
 * という状態になったため。「一部の宣言だけ効く」のは詳細度負けのサインなので、
 * 所有者と同じクラス数まで上げて揃えた。 */
html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow {
	margin-bottom: 0;
	color: var(--tt-hero-primary-color);
	font-family: var(--tt-hero-primary-font);
	font-size: var(--tt-hero-primary-size);
	font-weight: var(--tt-hero-primary-weight);
	letter-spacing: var(--tt-hero-primary-tracking);
	line-height: var(--tt-hero-primary-leading);
}

html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow::after {
	content: none;
}

html body.tiptop-standard-system.tiptop-hero-order-latin .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title {
	margin-top: var(--tt-space-2);
	color: var(--tt-hero-secondary-color);
	font-family: var(--tt-hero-secondary-font);
	font-size: var(--tt-hero-secondary-size);
	font-weight: var(--tt-hero-secondary-weight);
	letter-spacing: var(--tt-hero-secondary-tracking);
	line-height: var(--tt-hero-secondary-leading);
}

/* 「日本語を大きく」の検索ヒーロー（#1237）。ここも eyebrow が小さいほうになる。
 * 検索語の h1 は上の `.archive-hero__title` の primary 規則がそのまま当たるので、
 * 足すのは eyebrow の1本だけ（余白と下線の扱いは一覧側の jp と同じ）。 */
html body.tiptop-standard-system.tiptop-hero-order-jp .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow {
	margin-bottom: var(--tt-space-2);
	color: var(--tt-hero-secondary-color);
	font-family: var(--tt-hero-secondary-font);
	font-size: var(--tt-hero-secondary-size);
	font-weight: var(--tt-hero-secondary-weight);
	letter-spacing: var(--tt-hero-secondary-tracking);
	line-height: var(--tt-hero-secondary-leading);
}

html body.tiptop-standard-system.tiptop-hero-order-jp .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow::after {
	content: none;
}

/* 一覧ヒーローの説明文の太さを承認済みモックへ（トップ以外の
 * ヒーローの説明文が、色とサイズまで違って見えていた）。
 * モックは 14.72px / w400 / muted。サイズと色は既に一致していて、太さだけ500だった。
 *
 * ⚠ 実効値を持っているのは responsive-fixes.css:412-419 の
 * `.archive-hero__lead, .tiptop-news-page …, .tiptop-works-page …`（w500）。
 * news-page.css / works-page.css 側にも同じ (0,2,0) の指定があるが
 * responsive-fixes.css が後読みなので同点で後勝ちしている。**あちらを直接書き換えると
 * モード非限定でイマーシブにも波及する**ため、このファイル（responsive-fixes より
 * 後に読まれる共通コンポーネント契約の所有ファイル）で標準スコープだけ上書きする。
 * 色は各ページ側（news-page.css の muted / blog-page.css の是正）が
 * 持っている。
 *
 * 追記：その各ページ側の是正が blog / news / works の3系統にしか
 * 入っておらず、同じ `.archive-hero__lead` を使う page-hero 系（service・説明文を
 * 入れた固定ページ）だけ main.css の `--tiptop-text`（#222222）のまま残っていた。
 * 12ページを iframe で横断計測して確認（service だけ #222222、他は全部 #707070）。
 * 太さと同じ理由でここに色も持たせ、系統に関係なく muted へ揃える。
 * 詳細度 (0,2,2) で所有者の main.css `.archive-hero__lead` (0,1,0) に勝つので
 * !important は不要。各ページ側の既存指定は同値なので競合しない。 */
html body.tiptop-standard-system .archive-hero__lead {
	color: var(--tiptop-muted);
	font-weight: 400;
}