/* ============================================================
   diagnosis-ui base tokens v1.0（2026-07-18）
   正本: _reference/diagnosis-ui/tokens.base.css
   規格書: _reference/diagnosis-ui-standard.md

   使い方: このブロックを各診断アプリの style.css 冒頭へコピーする。
   アプリ側で直接編集禁止。変更は必ずこの正本を先に改訂し、
   バージョンコメントごと3アプリへ再コピーする（同期ルールは規格書§4）。

   テーマ色（--color-accent / --color-point 系）は含まない。
   各アプリの THEME ブロック（このブロックの直後）で定義する。
   ============================================================ */
:root {
  /* フォント（DESIGN.md §2-1） */
  --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', -apple-system, BlinkMacSystemFont, sans-serif;

  /* スペーシング（8pxグリッド・DESIGN.md §2-2） */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* フォントスケール（DESIGN.md §2-4） */
  --text-xs: clamp(11px, .75rem, 12px); --text-sm: clamp(12px, .8125rem, 13px);
  --text-base: clamp(15px, 1rem, 16.5px); --text-lg: clamp(17px, 1.125rem, 18px);
  --text-xl: clamp(20px, 1.375rem, 22px); --text-2xl: clamp(24px, 1.75rem, 28px);
  --text-3xl: clamp(28px, 2.25rem, 36px); --text-4xl: clamp(32px, 3rem, 48px);

  /* ニュートラルカラー（白ベース共通。テーマ側で色相の微調整可＝規格書§2） */
  --color-bg: #fafafa; --color-surface: #fff; --color-surface-soft: #f5f5f7;
  --color-text: #1a1a1a; --color-text-secondary: #6b6b6b; --color-text-muted: #9b9b9b;
  --color-border: #e8e8e8; --color-border-soft: #f0f0f0;

  /* 角丸（DESIGN.md §2-7） */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;

  /* シャドウ（診断アプリはボーダー優先・影は原則不使用。使う場合 xs まで） */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);

  /* トランジション（DESIGN.md §2-8） */
  --duration-fast: 150ms; --duration-normal: 250ms;
  --ease-default: cubic-bezier(.4, 0, .2, 1);
}

/* ==== THEME: os-error-diagnosis（シグナルレッド） ==== */
:root {
  --color-accent: #d13438;
  --color-accent-hover: #b32c30;
  --color-accent-soft: rgba(209, 52, 56, .06);
}

/* ---- Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-feature-settings: "palt";
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.35;
}

h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.45;
}

h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.5;
}

a {
  color: var(--color-accent);
}

[tabindex="-1"]:focus {
  outline: none;
}

.app-shell {
  width: min(calc(100% - var(--space-6)), 960px);
  margin: auto;
  padding: var(--space-6) 0 var(--space-8);
}

.stage {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

#stage-top,
#stage-question {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

#stage-result {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.stage[hidden] {
  display: none;
}

/* ---- サイトヘッダー（診断3アプリ共通仕様：左=ブランド／右=診断名） ---- */
.skip-link {
  position: fixed;
  top: -80px;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-3);
  background: var(--color-surface);
}

.skip-link:focus {
  top: var(--space-4);
}

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 960px;
  margin: auto;
  padding: var(--space-3) var(--space-4);
}

.brand,
.version {
  margin: 0;
  font-size: var(--text-sm);
}

.brand {
  color: var(--color-text);
  font-weight: 700;
}

.version {
  color: var(--color-text-secondary);
}

/* ---- アイブロウ（見出し上の診断名） ---- */
.eyebrow {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .06em;
}

.eyebrow-center {
  margin: 0 0 var(--space-4);
  text-align: center;
}

/* ---- 共通：ラベル・見出し・本文 ---- */
.label {
  display: inline-block;
  margin-bottom: var(--space-5);
  padding: var(--space-1) var(--space-4);
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .14em;
}

.headline {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.headline .headline-sub {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-secondary);
  font-size: .55em;
  font-weight: 500;
  letter-spacing: .12em;
}

.headline-hero {
  text-align: center;
  font-weight: 900;
  /* 2026-08-17 キャッチ差し替えで1行が13文字に伸びたため再計算。
     「あなたの天才性をブロックし」「成功を妨げる３つのエラーの」（各13文字）が
     320px級でも1行に収まるサイズ＝実測で1文字0.936em・13文字で12.17em必要。
     320px時の見出し幅238px → 上限19.6px に対し 5.8vw＝18.6px（約5%の余裕）。
     指定した3行が崩れて「し」「の」が孤立するのを防ぐための値なので、
     キャッチの文字数を変えたらここも計算し直すこと。 */
  font-size: clamp(18px, 5.8vw, 40px);
}

.headline-alert {
  color: var(--color-accent);
}

.headline-deco {
  width: 56px;
  height: 3px;
  margin: var(--space-1) auto var(--space-5);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.lead {
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.8;
}

.lead-center {
  text-align: center;
  /* 1行目19文字が320px級でも指定改行どおり2行で収まるサイズ */
  font-size: clamp(13.5px, 4.4vw, 18px);
}

.body-text {
  margin: 0 0 var(--space-5);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.95;
  white-space: pre-line;
}

/* ---- メタ情報 ---- */
.meta-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.meta-info .meta-item {
  text-align: center;
}

.meta-info .meta-num {
  color: var(--color-accent);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.meta-info .meta-text {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: 11.5px;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ---- 教育セクション ---- */
.error-intro {
  margin: var(--space-6) 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.error-intro-close {
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.95;
}

.error-intro-sub {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
}

.error-intro-close {
  margin: 0;
  line-height: 1.9;
}

.error-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

.error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.error-card-name {
  color: var(--color-accent);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: .01em;
}

.error-card-def {
  margin-top: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.6;
}

.error-card-desc {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.75;
}

/* ---- トップ：説明カード（姉妹アプリの layer-note / funnel-note 相当） ---- */
.intro-note {
  margin-top: var(--space-7);
  padding: var(--space-5);
  color: var(--color-text-secondary);
  background: var(--color-surface-soft);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.9;
}

.intro-note-title {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 700;
}

.intro-note p {
  margin: 0 0 var(--space-3);
}

.intro-note p:last-child {
  margin-bottom: 0;
}

.intro-note-definition {
  padding: var(--space-3);
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  font-weight: 500;
}

/* ---- トップ：8タイプギャラリー ---- */
.type-gallery {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.type-gallery-bridge {
  margin-bottom: var(--space-5);
}

.bridge-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
}

.bridge-chip {
  padding: var(--space-1) var(--space-3);
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.bridge-x {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.bridge-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.bridge-arrow-line {
  position: relative;
  display: block;
  width: 2px;
  height: 22px;
  background: var(--color-accent);
}

.bridge-arrow-line::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 6px solid var(--color-accent);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.bridge-arrow-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: .06em;
}

.type-gallery-heading {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
}

.type-gallery-lead {
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.9;
  text-align: center;
}

.type-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.type-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.type-preview-img {
  width: 100%;
  max-width: 150px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--radius-md);
  /* PNGの薄い背景を白カードに溶かす */
  mix-blend-mode: multiply;
}

.type-preview-label {
  margin-top: var(--space-2);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
}

.type-preview-name {
  margin: var(--space-1) 0 0;
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 700;
}

.type-preview-desc {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.8;
}

/* ---- ボタン ---- */
.button-primary,
.button-secondary {
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default),
    transform 50ms var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.button-primary {
  color: var(--color-surface);
  background: var(--color-accent);
  border: 0;
}

.button-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.button-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.button-primary:disabled,
.button-secondary:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.button-secondary {
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.button-secondary:hover:not(:disabled) {
  color: var(--color-text);
  background: var(--color-surface-soft);
  border-color: var(--color-text-secondary);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.button-row-center {
  justify-content: center;
}

.button-row .button-primary {
  min-width: 180px;
}

/* 12星座ビジネス診断・OSファネル診断の .btn-hero と同一寸法に揃える（2026-08-17 いとうさん指示）。
   旧実装は width:100% / max-width:380px で横に伸びていたが、姉妹2アプリは文字幅ぴったりのため撤去した */
.button-start {
  min-height: 56px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-7);
  font-size: var(--text-lg);
  font-weight: 700;
}

/* ---- 進捗バー ---- */
.progress-wrap {
  margin-bottom: var(--space-6);
}

.progress-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  letter-spacing: .08em;
}

.progress-text .progress-current {
  color: var(--color-accent);
  font-size: var(--text-base);
  font-weight: 700;
}

.progress-bar {
  width: 100%;
  height: var(--space-1);
  overflow: hidden;
  background: var(--color-surface-soft);
  border-radius: var(--radius-pill);
}

.progress-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width var(--duration-normal) var(--ease-default);
}

.progress-0 { width: 0%; }
.progress-1 { width: 5.6%; }
.progress-2 { width: 11.1%; }
.progress-3 { width: 16.7%; }
.progress-4 { width: 22.2%; }
.progress-5 { width: 27.8%; }
.progress-6 { width: 33.3%; }
.progress-7 { width: 38.9%; }
.progress-8 { width: 44.4%; }
.progress-9 { width: 50.0%; }
.progress-10 { width: 55.6%; }
.progress-11 { width: 61.1%; }
.progress-12 { width: 66.7%; }
.progress-13 { width: 72.2%; }
.progress-14 { width: 77.8%; }
.progress-15 { width: 83.3%; }
.progress-16 { width: 88.9%; }
.progress-17 { width: 94.4%; }
.progress-18 { width: 100.0%; }

/* ---- 質問ページ ---- */
.question-number {
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .2em;
}

.question-text {
  margin: 0 0 var(--space-5);
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.7;
}

.choices {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.choice {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1.6;
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-default),
    background var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.choice:hover,
.choice.is-selected,
.choice[aria-pressed="true"] {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

.choice:focus-visible,
.button-primary:focus-visible,
.button-secondary:focus-visible,
.type-page-link:focus-visible,
.result-permalink-url:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- 結果ページ ---- */
.result-character {
  display: block;
  width: min(100%, 420px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto var(--space-2);
  object-fit: contain;
}

.result-icon {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--space-2);
}

.result-icon svg {
  width: 48px;
  height: 48px;
}

.result-status {
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .24em;
  text-align: center;
}

.result-level {
  display: table;
  margin: 0 auto var(--space-2);
  padding: var(--space-1) var(--space-4);
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .08em;
}

.result-type-title {
  margin: 0 0 var(--space-3);
  color: var(--color-accent);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  text-align: center;
}

.result-short {
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: 1.9;
  text-align: center;
}

.os-index-card {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-5);
  text-align: center;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.os-index-card .os-index-label {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: .18em;
}

.os-index-card .os-index-value {
  color: var(--color-accent);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: .04em;
}

.os-index-card .os-index-max {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-weight: 500;
}

.section-heading {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: .01em;
}

.type-body p {
  margin: 0 0 var(--space-3);
  line-height: 1.95;
}

.score-bars {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-3) 0 var(--space-2);
}

.score-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.score-row .score-label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.score-row .score-bar {
  height: var(--space-2);
  overflow: hidden;
  background: var(--color-surface-soft);
  border-radius: var(--radius-pill);
}

.score-row .score-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.score-row .score-num {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prescription-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rx;
}

.prescription-list li {
  position: relative;
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-3) 52px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  counter-increment: rx;
  line-height: 1.7;
}

.prescription-list li::before {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  display: grid;
  width: 28px;
  height: 28px;
  color: var(--color-surface);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  content: counter(rx);
  font-size: var(--text-sm);
  font-weight: 700;
  place-items: center;
  transform: translateY(-50%);
}

.type-page-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  color: var(--color-accent);
  border-bottom: 1px solid transparent;
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.type-page-link:hover,
.type-page-link:focus-visible {
  border-bottom-color: var(--color-accent);
}

.type-page-link::after {
  content: "→";
  font-weight: 700;
}

.cta-block {
  margin: var(--space-6) 0 var(--space-4);
  padding: var(--space-5);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
}

.cta-block .cta-heading {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 700;
}

.cta-block .cta-body {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  line-height: 1.85;
}

.cta-block .cta-supplement {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.button-lab-submit {
  width: 100%;
  min-height: 48px;
}

/* CTA は OSアップデートパーソナル先行案内ページへのリンク（2026-09-24〜・旧メール登録フォームを置換） */
.cta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-5) 0 var(--space-2);
  text-decoration: none;
}

.lab-form-note {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.7;
}

.result-permalink {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  word-break: break-all;
}

.result-permalink-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.result-permalink-url {
  color: var(--color-accent);
  text-decoration: none;
}

.result-permalink-url:hover {
  text-decoration: underline;
}

.save-block {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.save-block > p:not(.eyebrow) {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.save-actions .button-secondary {
  flex: 1 1 0;
  min-width: 180px;
}

.shared-banner {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  text-align: center;
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
}

.shared-banner__title {
  margin-top: 0;
  font-size: var(--text-xl);
  font-weight: 700;
}

.shared-banner p:last-of-type {
  color: var(--color-text-secondary);
}

.secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.secondary-actions .button-secondary {
  flex: 1 1 0;
  min-width: 140px;
}

.copy-feedback {
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--color-accent);
  font-size: var(--text-sm);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.copy-feedback[data-visible="true"] {
  opacity: 1;
}

.disclaimer {
  width: min(calc(100% - var(--space-6)), 960px);
  margin: var(--space-5) auto var(--space-7);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.disclaimer p {
  margin: 0;
}

@media (min-width: 480px) {
  .app-shell {
    padding-top: var(--space-7);
  }

  .body-text,
  .error-intro-close {
    font-size: var(--text-base);
  }

  .meta-info {
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .meta-info .meta-num {
    font-size: var(--text-2xl);
  }

  .meta-info .meta-text {
    font-size: var(--text-sm);
    letter-spacing: .04em;
  }

  .score-row {
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: var(--space-3);
  }

  .type-page-link {
    gap: var(--space-2);
    font-size: var(--text-sm);
  }
}

@media (min-width: 768px) {
  .app-shell {
    padding-bottom: var(--space-9);
  }

  .stage {
    padding: var(--space-7);
  }

  .error-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .type-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-block {
    padding: var(--space-6) var(--space-5);
  }
}

@media print {
  .site-header,
  .skip-link,
  .disclaimer,
  #stage-top,
  #stage-question,
  .cta-block,
  .save-block,
  .shared-banner,
  .secondary-actions,
  .type-page-link {
    display: none !important;
  }

  body {
    background: var(--color-surface);
  }

  .app-shell {
    width: 100%;
    padding: 0;
  }

  .stage,
  .os-index-card,
  .prescription-list li,
  .score-bars,
  .type-body {
    break-inside: avoid;
  }

  :root {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}