/* TASTEOME static page (privacy/disclosure/about) — Sprint 3 Day 12 */
/* design token は tokens.css canonical — :root 全体上書きは禁止 (Theme persistence bug 修正 2026-06-03)。 */

/* box-sizing は tokens.css に統一 */
html, body { padding: 0; background: var(--bg); color: var(--fg); }
body { line-height: 1.6; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--accent); }

.sp-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; max-width: 800px; width: 100%; margin: 0 auto; }
.sp-brand { font-weight: 700; letter-spacing: 0.18em; color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5em; }
.sp-brand::before {
  content: '';
  /* 1 : 2.02 の縦長。方式の理由は site-header.css の .site-brand::before を参照。 */
  width: 0.6em; height: 1.2em;
  background-color: var(--t-fg);
  -webkit-mask-image: url('/assets/logo-mark.svg');
  mask-image: url('/assets/logo-mark.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.sp-nav a { margin-left: 1rem; color: var(--fg); font-size: 0.9rem; text-decoration: none; }
.sp-nav a:hover { text-decoration: underline; }

/* overflow-wrap: 長い URL / メール / スラッシュ連結トークン (例 cog/weight/arousal/…) は
   改行機会がなくモバイルで横 overflow → viewport ズームアウトを起こす (2026-07-02 /disclosure/)。
   継承で配下の散文全体に効く。 */
.sp-main { flex: 1; max-width: var(--t-page-max, 960px); width: 100%; margin: 0 auto; padding: 1rem 1.5rem 4rem; overflow-wrap: break-word; }
.sp-main h1 { font-size: 2rem; margin: 1rem 0 0.5rem; }
.sp-main .updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; }
.sp-main h2 { font-size: 1.3rem; margin: 2rem 0 0.7rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--card-border); }
.sp-main h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.sp-main p { margin: 0.5rem 0; }
.sp-main ul, .sp-main ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.sp-main li { margin: 0.3rem 0; }
.sp-main table { width: 100%; border-collapse: collapse; margin: 0.8rem 0; }
.sp-main th, .sp-main td { padding: 0.5rem 0.7rem; text-align: left; border: 1px solid var(--card-border); }
.sp-main th { background: var(--card-bg); }
.sp-main blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1rem 0; color: var(--muted); font-style: italic; }
.sp-main code { background: var(--t-bg-elev); padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.88em; }

.sp-action-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 1.2rem 1.4rem; margin: 1.5rem 0;
}
.sp-action-card h3 { margin-top: 0; }
/* 🔴 batch 3 E-9 (2026-09-07 実測): `#btn-opt-out` が **42.19px** で 44px 床を割っていた。
     原因は「主ボタンだけ `border: none`」で、`.secondary` の 1px 上下 border ぶん (+2px) だけ
     **副次ボタンの方が高い**という逆転 (実測 = opt-out 42.19 / opt-in 44.19 / clear-all 44.19)。
     解析の停止・再開・全削除はいずれも**一次動作**なので常時床を当てる。
     ⚠ `@media` の中に入れない (幅で床が消える先例 = 旧 `back-link.css` の `.pp-back`・2026-09-27 削除)。
     ⚠ 高さだけで足りるのは 3 つとも intrinsic width が 44px を超えているため (実測 130〜249px)。
     ⚠ `.sp-action-card` の consumer は `/privacy/` の 2 箇所だけ (実測) — `/axes/` 等
       他の静的面には波及しない (`/axes/` は不触の裁定)。 */
.sp-action-card button {
  background: var(--accent); color: var(--t-on-accent); border: none;
  padding: 0.6rem 1.2rem; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 0.95rem;
  min-height: var(--t-tap-min, 44px);
}
.sp-action-card button.secondary {
  background: var(--card-bg); color: var(--fg); border: 1px solid var(--card-border);
}
.sp-status { display: inline-block; margin-left: 0.8rem; color: var(--muted); font-size: 0.9rem; }
/* /privacy/ の削除の直後に完了の印を帯 (同意) の上へ送る時の間合い (`PrivacyPage.tsx` の effect)。
   帯の高さの契約 (`--t-consent-h`) + ボトムナビ + safe-area + 帯との間 1rem。ナビが無い幅では 53px 余分に上がるだけ。 */
.sp-status {
  scroll-margin-bottom: calc(var(--t-consent-h, 120px) + var(--t-bnav-h, 53px) + env(safe-area-inset-bottom, 0px) + 1rem);
}
/* v=66: #2dd4bf on white は 1.86 contrast (WCAG critical fail)。 light は darker green に */
.sp-status.active { color: var(--t-emo); }
/* hardcode-ok: light は --t-emo (teal) が white 上で 1.86:1 contrast fail のため darker green 固定 (v=66) */
:where(html, body)[data-theme="light"] .sp-status.active { color: #0d8170; }

.sp-footer { padding: 1.5rem; text-align: center; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--card-border); }
.sp-footer a { color: var(--muted); margin: 0 0.5rem; }

/* ⑭C1 (owner 裁定 2026-09-30・hub 裁定): 読み物の本文の 1 行を 40〜45 字に。器の幅 (--t-page-max = 読み物 / 一覧の型・
   token 5 値の契約) は変えず、段落・箇条・見出し (h2 の罫線を含む) を同じ幅に揃え、表だけ器の幅のまま (表は広い方が読める)。
   ⚠ 幅は器の文字の大きさの 44em を**器で 1 回だけ px に確定**させて子へ継ぐ (`<length>` で登録した custom property)。
     素の 44em を各要素に書くと、見出しは自分の大きい文字で広くなり段落と揃わない。未対応のブラウザは各要素の em に落ちる (見出しが少し広いだけ)。 */
@property --prose-max { syntax: '<length>'; inherits: true; initial-value: 704px; }
.sp-main { --prose-max: 40em; }  /* 器 16px × 40 = 640px = 本文 (14.4px) で 1 行 ≈ 44 字 */
.sp-main p, .sp-main li, .sp-main h2, .sp-main h3 { max-width: var(--prose-max); }