/*
 * 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）へ揃える
 * （2026-08-11・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 !important;
	background-size: cover !important;
}

/*
 * 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 !important;
	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);
}

/* 標準モードの下層ヒーロー（2026-08-08・承認済みモックへの移行／あやちゃん承認）。
 * 画像が解決しないとき（.has-no-hero-image）だけ、モックの
 * 「白 ＋ テキスト ＋ 下1本の罫線」にする。画像が設定されているときは上のcompact契約の
 * ままなので、管理画面（Design Studio「下層ページの背景画像」＝tiptop_subpage_hero_fallback）の
 * 設定は生き続ける＝2026-08-01の「管理画面で設定した画像を標準モードでも尊重する」判断を壊さない。
 * イマーシブは対象外（未依頼）。
 * 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 !important;
	border-bottom: 1px solid var(--tiptop-border);
}

html body.tiptop-standard-system .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title {
	font-size: var(--tt-text-hero);
	/* ここは「大きいほうの見出し」なので display の太さ。standard は 400 なので
	 * 見た目は変わらないが、生値の 400 だと明朝やポップを選んでも細いままになる
	 * （2026-08-11にトークン参照へ）。 */
	font-weight: var(--tiptop-font-weight-display);
	letter-spacing: 0.06em;
	line-height: 1.6;
}

/* モックはタイトル下のアクセントバーを使わない（区切りはヒーロー下の罫線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に文字があるときだけ」に限定している。 */
html body.tiptop-standard-system .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(--tiptop-contrast);
	font-size: var(--tt-text-hero);
	/* 入れ替え後はこの eyebrow が「大きいほうの見出し」＝ display の太さ（上と同じ理由）。 */
	font-weight: var(--tiptop-font-weight-display);
	letter-spacing: 0.06em;
	line-height: 1.6;
}

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

html body.tiptop-standard-system .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(--tiptop-muted);
	font-size: var(--tt-text-note);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.6;
}

/* 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）＋字間なし。ヒーロー見出しで字間トークンを
 * 意図的に外したのと同じ判断（2026-08-07）を、リードにも適用する。 */
html body.tiptop-standard-system .tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__lead {
	max-width: 34em;
	letter-spacing: normal;
}/*
 * あやちゃん指摘：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段（大きいラテン＋小さい日本語）に揃える
 * （2026-08-09）。上の大小交換ルールは `.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-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .section__eyebrow {
	margin-bottom: 0;
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-hero);
	/* 検索ヒーローも同じ入れ替え＝大きいほうの見出しなので display の太さ。 */
	font-weight: var(--tiptop-font-weight-display);
	letter-spacing: 0.06em;
	line-height: 1.6;
}

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

html body.tiptop-standard-system .tiptop-search-hero.tiptop-compact-hero.archive-hero.has-no-hero-image .archive-hero__title {
	margin-top: var(--tt-space-2);
	color: var(--tiptop-muted);
	font-size: var(--tt-text-note);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.6;
}

/* 一覧ヒーローの説明文の太さを承認済みモックへ（2026-08-10・オーナー指摘
 * 「トップ以外のヒーロー部分の説明文のカラーとサイズが違う」）。
 * モックは 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 の是正）が
 * 持っているのでここでは触らない。 */
html body.tiptop-standard-system .archive-hero__lead {
	font-weight: 400;
}