/* VitalitySync — design tokens and layout. PRD §8, R0.3.
   Every colour in the app is defined in this block of tokens. No colour
   literal appears in JS, or anywhere below the token blocks.

   The tokens are Hometracker's (its "Redwood" palette and §8 two-palette
   model), so the two apps read as related: semantic colours are fixed and mean
   things; surface and accent colours are what a theme changes.

   Added for VitalitySync: --phase-* (PRD §8 principle 3 — work, rest,
   finisher and done each have a fixed colour, always paired with a word), and
   a larger tap target (R1.5: 64px, tapped from a step away). */

:root {
  /* ---- Semantic. Fixed in every theme. These mean things. ---- */
  --sem-good:    #3f8f5b;
  --sem-good-bg: #3f8f5b26;
  --sem-warn:    #b07d1a;
  --sem-warn-bg: #b07d1a26;
  --sem-warn-solid: #c96412;
  --sem-bad:     #b3402f;
  --sem-bad-bg:  #b3402f26;
  --sem-bad-solid: #9c2e21;
  --on-solid:    #ffffff;

  /* Session phases (Phase 1 uses these; defined now so the palette is whole). */
  --phase-work:     #1f6fb2;
  --phase-rest:     #3f8f5b;
  --phase-finisher: #c96412;
  --phase-done:     #6a5aa8;

  /* ---- Surface + accent. Themeable. Hometracker "Redwood". ---- */
  --bg:        #fdf8e8;
  --surface:   #ffffff;
  --surface-2: #fbf0a8;
  --line:      #e0cd82;
  --text:      #3a0c09;
  --text-dim:  #8a6a2f;
  --accent:    #113047;
  --accent-fg: #ffffff;
  --accent-bg: #11304718;

  --radius: 12px;
  --tap: 64px;
  --rail: 208px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1e2b; --surface: #173049; --surface-2: #1f4c6b;
    --line: #2c5a78; --text: #eaf1f7; --text-dim: #a9c2d6;
    --accent: #fbf0a8; --accent-fg: #3a0c09; --accent-bg: #fbf0a81f;
    --sem-good: #63b47e; --sem-warn: #d9a441; --sem-bad: #e0705c;
    --sem-good-bg: #63b47e22; --sem-warn-bg: #d9a44122; --sem-bad-bg: #e0705c22;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1e2b; --surface: #173049; --surface-2: #1f4c6b;
  --line: #2c5a78; --text: #eaf1f7; --text-dim: #a9c2d6;
  --accent: #fbf0a8; --accent-fg: #3a0c09; --accent-bg: #fbf0a81f;
  --sem-good: #63b47e; --sem-warn: #d9a441; --sem-bad: #e0705c;
  --sem-good-bg: #63b47e22; --sem-warn-bg: #d9a44122; --sem-bad-bg: #e0705c22;
}

/* ---------------------------------------------------------------- base ---- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overscroll-behavior-y: contain; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 18px; line-height: 1.45; -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -------------------------------------------------------------- header ---- */

header.top {
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  border-bottom: 1px solid var(--line); padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}
header.top h1 { font-size: 24px; margin: 0; flex: 1; min-width: 0; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 62%;
  padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-size: 15px; white-space: nowrap; overflow: hidden;
}
.pill > span:not(.dot) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); flex: none; }
.pill[data-tone="good"] { border-color: var(--sem-good); background: var(--sem-good-bg); color: var(--sem-good); }
.pill[data-tone="good"] .dot { background: var(--sem-good); }
.pill[data-tone="warn"] { border-color: var(--sem-warn); background: var(--sem-warn-bg); color: var(--sem-warn); }
.pill[data-tone="warn"] .dot { background: var(--sem-warn); }
.pill[data-tone="bad"]  { border-color: var(--sem-bad-solid); background: var(--sem-bad-solid); color: var(--on-solid); font-weight: 700; }
.pill[data-tone="bad"] .dot { background: var(--on-solid); }

/* ----------------------------------------------------------------- nav ---- */

/* Portrait / narrow: a bottom bar. */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  flex: 1; min-height: var(--tap); background: none; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-dim); font-size: 14px;
}
.tabs button .ic { font-size: 22px; line-height: 1; }
.tabs button[aria-selected="true"] { color: var(--accent); font-weight: 700; background: var(--accent-bg); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 16px 16px calc(var(--tap) + 32px + env(safe-area-inset-bottom)); }

/* Landscape tablet on its stand (S6 Lite, measured 1333 × 728): a left rail, so the
   whole height goes to content. */
@media (min-width: 900px) and (orientation: landscape) {
  .tabs {
    top: 65px; bottom: 0; right: auto; width: var(--rail);
    flex-direction: column; justify-content: flex-start; gap: 4px; padding: 12px 8px;
    border-top: 0; border-right: 1px solid var(--line);
  }
  .tabs button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 0 16px; border-radius: var(--radius); font-size: 18px; }
  .wrap { margin-left: var(--rail); max-width: none; padding: 20px 28px 32px; }
  main { max-width: 1100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  main > .hero, main > .notice, main > .build, main > .card.wide { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------- components ---- */

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin: 0 0 16px;
}
@media (min-width: 900px) and (orientation: landscape) { .card { margin: 0; } }
.card h2 { font-size: 19px; margin: 0 0 10px; }
.card[data-tone="bad"] { border-color: var(--sem-bad); }

.hero { padding: 8px 2px 16px; }
.hero-kicker { margin: 0; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.hero-big { margin: 6px 0 8px; font-size: 34px; line-height: 1.15; font-weight: 800; }

.note { color: var(--text-dim); margin: 8px 0; max-width: 70ch; }
.empty { color: var(--text-dim); margin: 0; }
.facts, .list { margin: 0; padding-left: 20px; }
.facts li, .list li { margin: 6px 0; }
.list { list-style: none; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }

.row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 22px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2); font-weight: 600; cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.small { min-height: 44px; padding: 0 14px; font-size: 16px; }
.btn:focus-visible, .tabs button:focus-visible, .seg button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { min-height: var(--tap); padding: 0 20px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 700; }

.status-line { font-weight: 700; margin: 0; }
.status-line[data-tone="good"] { color: var(--sem-good); }
.status-line[data-tone="warn"] { color: var(--sem-warn); }
.status-line[data-tone="bad"]  { color: var(--sem-bad); }

.notice { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin: 0 0 16px; border-radius: var(--radius); border: 1px solid var(--line); }
.notice[data-tone="good"] { background: var(--sem-good-bg); border-color: var(--sem-good); }
.notice[data-tone="warn"] { background: var(--sem-warn-bg); border-color: var(--sem-warn); }
.notice[data-tone="bad"]  { background: var(--sem-bad-bg);  border-color: var(--sem-bad); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.table th { color: var(--text-dim); font-weight: 600; font-size: 15px; }
.table td.num { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.build { color: var(--text-dim); font-size: 14px; text-align: center; margin: 8px 0 0; }