/* design/tokens-b.css の確定値をそのまま使用。 */
:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --ink: #171412;
  --ink-sub: #5f5952;
  --line: #171412;
  --primary: #171412;
  --on-primary: #ffffff;
  --ok: #3f6a4b;
  --ok-bg: #e2ebe0;
  --caution: #a2472f;
  --caution-bg: #f3e1d8;
  --closed-bg: #e4e1db;
  --focus: #171412;
  --icon-bg: #eeebe5;
  --nav-bg: #ffffff;
  --font-number: 32px;
  --font-heading: 20px;
  --font-body: 16px;
  --font-sub: 14px;
  --font-min: 12px;
  --weight-body: 400;
  --weight-bold: 700;
  --weight-number: 800;
  --leading-body: 1.6;
  --leading-heading: 1.3;
  --tracking-label: .12em;
  --tracking-number: -.02em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-s: 8px;
  --radius-l: 16px;
  --tap: 44px;
  --button-height: 52px;
  --row-height: 56px;
  --bar-height: 64px;
  --tile-size: 64px;
  --icon-size: 28px;
  --mark-size: 48px;
  --mark-large: 120px;
  --stroke: 1.8;
  --border-width: 1px;
  --double-width: 4px;
  --card-border: 1px solid var(--line);
  --completion-duration: 640ms;
}

:root { color-scheme: light; --content-width: 480px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: var(--font-body); line-height: var(--leading-body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--space-1); }
.topbar { min-height: var(--bar-height); padding: var(--space-2) var(--space-4); padding-top: max(var(--space-2), env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border-bottom: 1px solid var(--line); }
.brand { text-decoration: none; display: flex; align-items: center; min-height: var(--tap); font-weight: var(--weight-number); letter-spacing: var(--tracking-label); }
.logout { min-height: var(--tap); padding: var(--space-2); border: 0; background: var(--bg); color: var(--ink); font-size: var(--font-sub); text-decoration: underline; text-underline-offset: var(--space-1); }
.app { max-width: var(--content-width); margin: auto; padding: var(--space-8) var(--space-4) max(var(--space-6), env(safe-area-inset-bottom)); min-height: calc(100svh - var(--bar-height)); display: flex; flex-direction: column; align-items: stretch; }
h1 { font-size: var(--font-heading); line-height: var(--leading-heading); margin: 0 0 var(--space-3); }
h2 { font-size: var(--font-heading); line-height: var(--leading-heading); margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-4); }
#page-message { color: var(--ink-sub); }
.welcome-mark { display: block; width: var(--mark-size); height: var(--mark-size); object-fit: contain; margin: 0 auto var(--space-6); }
/* ロゴ・見出し・説明文は中央に（2026-10-08 柴山さん） */
.app > #page-title, .app > #page-message, #first-visit { text-align: center; }
/* カードが出ていない画面（ログイン前・招待・登録完了前）は、ロゴから説明文までを上下の真ん中に。
   下のボタン（.actions）も margin-top:auto なので、空きが上下に半分ずつ配られる */
.app:not(:has(.card:not([hidden]))) > .welcome-mark:not([hidden]),
.app:not(:has(.card:not([hidden]))) > .welcome-mark[hidden] + #page-title { margin-top: auto; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-4); margin: var(--space-4) 0; }
.label { display: inline-block; padding: var(--space-1) var(--space-3); margin-bottom: var(--space-4); background: var(--ink); color: var(--on-primary); font-size: var(--font-min); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); }
.sub-text { font-size: var(--font-sub); color: var(--ink-sub); }
.empty-home p { margin-bottom: 0; }
.install-guide ol { list-style: none; margin: var(--space-6) 0; padding: 0; }
.install-guide li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); margin: var(--space-3) 0; }
.install-guide svg { flex-shrink: 0; width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.actions { position: sticky; bottom: 0; background: var(--bg); margin-top: auto; padding-top: var(--space-4); padding-bottom: max(var(--space-2), env(safe-area-inset-bottom)); }
.actions > * + * { margin-top: var(--space-3); }
.button { width: 100%; min-height: var(--button-height); padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); text-decoration: none; text-align: center; }
.primary { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); }
.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.text-button { min-height: var(--tap); color: var(--ink); border: 0; background: transparent; text-decoration: underline; text-underline-offset: var(--space-1); }
button:disabled { opacity: .65; cursor: wait; }
.status { font-size: var(--font-sub); color: var(--caution); margin-top: var(--space-4); }
.status:empty { display: none; }