/* ==========================================================================
   FiVa — styles built on the approved tokens
   (design/05-design-system/tokens.css, values copied verbatim).
   Reference width 390 CSS px, flat fills, 8px rhythm, 44px targets.
   ========================================================================== */

:root {
  /* Approved palette */
  --fiva-lavender: #8B6CC4;
  --fiva-primaryButton: #7252AA;
  --fiva-lilac: #C1A5F0;
  --fiva-lavenderTint: #F0EAF9;
  --fiva-mint: #DDF1E8;
  --fiva-teal: #2F6F60;
  --fiva-peach: #FBE3D4;
  --fiva-terracotta: #8C4F36;
  --fiva-background: #FAFAF7;
  --fiva-surface: #FFFFFF;
  --fiva-ink: #17212F;
  --fiva-muted: #596575;
  --fiva-border: #DDD7E6;
  --fiva-success: #2C8C69;
  --fiva-danger: #A33151;

  --font-heading: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  --radius-control: 12px;
  --radius-card: 18px;
  --radius-pill: 999px;
  --touch: 44px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  --gutter: 20px;
  --shell-max: 480px;
  --tabbar-h: 64px;

  --dur-fast: 100ms;
  --dur-base: 180ms;
  --dur-ring: 400ms;
  --dur-mascot: 650ms;
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-move: cubic-bezier(.22,1,.36,1);

  color-scheme: light;
}

/* Dark is derived, not yet visually approved — it is opt-in from Appearance,
   never applied from the OS setting alone (docs/09). */
:root[data-theme="dark"] {
  --fiva-lavender: #B49AE4;
  --fiva-primaryButton: #8E6FD0;
  --fiva-lilac: #C9B4F2;
  --fiva-lavenderTint: #241E33;
  --fiva-mint: #17322A;
  --fiva-teal: #8FD3BE;
  --fiva-peach: #33231B;
  --fiva-terracotta: #E2A184;
  --fiva-background: #11141A;
  --fiva-surface: #1A1F28;
  --fiva-ink: #ECF0F6;
  --fiva-muted: #9AA7B8;
  --fiva-border: #2E3644;
  --fiva-success: #54B894;
  --fiva-danger: #E4798F;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* A component that sets display:flex would otherwise outrank the [hidden]
   attribute's default display:none, leaving empty bars on screen. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fiva-background);
  color: var(--fiva-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-heading); margin: 0; text-wrap: balance; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 16px; font-weight: 600; }
p  { margin: 0; }

:focus-visible {
  outline: 3px solid var(--fiva-primaryButton);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Route changes move focus to the heading so the new screen is announced.
   That focus is programmatic, so it must not paint a keyboard focus ring. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 50;
  background: var(--fiva-surface); color: var(--fiva-ink);
  padding: var(--s3) var(--s4); border-radius: var(--radius-control);
  border: 2px solid var(--fiva-primaryButton); font-weight: 600;
}
.skip-link:focus { top: var(--s4); }

/* ---------- shell ---------- */

#app { min-height: 100%; }

.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fiva-background);
  position: relative;
}

.appbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--gutter) var(--s2);
  padding-top: calc(var(--s4) + env(safe-area-inset-top, 0px));
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.appbar__brand { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.appbar__brand img { width: 30px; height: 30px; display: block; }
.appbar__spacer { flex: 1; }

.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--fiva-lavenderTint); color: var(--fiva-primaryButton);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  border: 1px solid var(--fiva-border); text-decoration: none;
}

.page {
  flex: 1;
  padding: var(--s2) var(--gutter) var(--s7);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: var(--s4);
}
.page--tabs { padding-bottom: calc(var(--tabbar-h) + var(--s7) + env(safe-area-inset-bottom, 0px)); }

.page-head { display: flex; flex-direction: column; gap: var(--s1); }
.page-head .muted { color: var(--fiva-muted); font-size: 14px; }

/* page transition: opacity + small rise, reduced-motion aware */
.page-enter { animation: pageIn var(--dur-base) var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- bottom tabs ---------- */

.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--shell-max); z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--fiva-surface);
  border-top: 1px solid var(--fiva-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.tabbar a {
  min-height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--fiva-muted); text-decoration: none; font-size: 11px; font-weight: 500;
  padding: var(--s2) var(--s1);
}
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--fiva-primaryButton); font-weight: 600; }
.tabbar a[aria-current="page"] .tabbar__dot {
  background: var(--fiva-lavenderTint);
}
.tabbar__dot {
  width: 36px; height: 26px; border-radius: var(--radius-pill);
  display: grid; place-items: center; transition: background var(--dur-base) var(--ease-out);
}

/* ---------- cards ---------- */

.card {
  background: var(--fiva-surface);
  border: 1px solid var(--fiva-border);
  border-radius: var(--radius-card);
  padding: var(--s4);
}
.card--mint { background: var(--fiva-mint); border-color: transparent; }
.card--peach { background: var(--fiva-peach); border-color: transparent; }
.card--tint { background: var(--fiva-lavenderTint); border-color: transparent; }
.card--flat { background: none; border: 1px dashed var(--fiva-border); }

.stack { display: flex; flex-direction: column; gap: var(--s3); }
.stack--tight { gap: var(--s2); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

/* ---------- buttons ---------- */

.btn {
  min-height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s3) var(--s5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--fiva-primaryButton); color: #fff; }
.btn--secondary { background: var(--fiva-surface); color: var(--fiva-primaryButton); border-color: var(--fiva-border); }
.btn--quiet { background: none; color: var(--fiva-primaryButton); min-height: var(--touch); padding: var(--s2) var(--s3); }
.btn--danger { background: none; color: var(--fiva-danger); border-color: var(--fiva-border); }
.btn--block { width: 100%; }
.btn svg { width: 20px; height: 20px; }

.iconbtn {
  min-width: var(--touch); min-height: var(--touch);
  display: inline-grid; place-items: center;
  background: none; border: 0; border-radius: var(--radius-control);
  color: var(--fiva-muted); cursor: pointer;
}
.iconbtn svg { width: 22px; height: 22px; }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: var(--s2); }
.field > label, .legend { font-size: 14px; font-weight: 600; color: var(--fiva-ink); }
.field .hint { font-size: 13px; color: var(--fiva-muted); }
.field .err { font-size: 13px; color: var(--fiva-danger); font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"],
input[type="time"], input[type="date"], textarea, select {
  min-height: var(--touch);
  width: 100%;
  padding: var(--s3);
  font-family: var(--font-body); font-size: 16px;
  color: var(--fiva-ink);
  background: var(--fiva-surface);
  border: 1px solid var(--fiva-border);
  border-radius: var(--radius-control);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fiva-danger); }

fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }

/* day chips */
.days { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  min-height: var(--touch); min-width: var(--touch);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--fiva-border);
  background: var(--fiva-surface); color: var(--fiva-muted);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.chip[aria-pressed="true"] {
  background: var(--fiva-lavenderTint); border-color: var(--fiva-lavender); color: var(--fiva-primaryButton); font-weight: 600;
}

/* segmented choices (energy, week/month) */
.segment { display: flex; gap: var(--s2); }
.segment button {
  flex: 1; min-height: var(--touch);
  border-radius: var(--radius-pill); border: 1px solid var(--fiva-border);
  background: var(--fiva-surface); color: var(--fiva-muted);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--s2);
}
.segment button[aria-pressed="true"], .segment button[aria-selected="true"] {
  background: var(--fiva-mint); border-color: var(--fiva-teal); color: var(--fiva-teal); font-weight: 600;
}
.segment--lav button[aria-pressed="true"], .segment--lav button[aria-selected="true"] {
  background: var(--fiva-primaryButton); border-color: var(--fiva-primaryButton); color: #fff;
}
.segment svg { width: 18px; height: 18px; }

/* radio list for action status */
.choices { display: flex; flex-direction: column; gap: var(--s2); }
.choice {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--touch); padding: var(--s3);
  border: 1px solid var(--fiva-border); border-radius: var(--radius-control);
  background: var(--fiva-surface); cursor: pointer;
}
.choice input { width: 20px; height: 20px; accent-color: var(--fiva-primaryButton); flex: none; }
.choice:has(input:checked) { border-color: var(--fiva-lavender); background: var(--fiva-lavenderTint); }
.choice__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.choice__text b { font-weight: 600; font-size: 15px; }
.choice__text span { font-size: 13px; color: var(--fiva-muted); }

/* ---------- intention row ---------- */

.intention {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: 60px;
  padding: var(--s3);
  background: var(--fiva-surface);
  border: 1px solid var(--fiva-border);
  border-radius: var(--radius-control);
  text-align: left; cursor: pointer;
  font-family: var(--font-body); color: var(--fiva-ink);
}
.intention__tick {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--fiva-border); background: var(--fiva-surface);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.intention__tick svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.intention__tick[data-status="full"] { background: var(--fiva-success); border-color: var(--fiva-success); }
.intention__tick[data-status="full"] svg { opacity: 1; animation: tickIn 160ms var(--ease-out) both; }
.intention__tick[data-status="smaller"] { background: var(--fiva-peach); border-color: var(--fiva-terracotta); }
.intention__tick[data-status="smaller"]::after { content: ""; width: 12px; height: 3px; border-radius: 2px; background: var(--fiva-terracotta); position: absolute; }
.intention__tick[data-status="skipped"] { background: var(--fiva-lavenderTint); border-color: var(--fiva-lavender); border-style: dashed; }
.intention__tick { position: relative; }
@keyframes tickIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.intention__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.intention__name { font-size: 15px; font-weight: 600; }
.intention__meta { font-size: 13px; color: var(--fiva-muted); }
.intention__status { font-size: 12px; font-weight: 600; }
.intention__status--smaller { color: var(--fiva-terracotta); }
.intention__status--skipped { color: var(--fiva-muted); }
.intention__status--full { color: var(--fiva-success); }
.intention__go { flex: none; color: var(--fiva-muted); }
.intention__go svg { width: 18px; height: 18px; }

/* ---------- progress ring ---------- */

.progress { display: flex; align-items: center; gap: var(--s4); }
.progress__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.progress__count { font-family: var(--font-heading); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.progress__label { font-size: 13px; color: var(--fiva-muted); }
.ring { flex: none; position: relative; width: 92px; height: 92px; }
.ring svg { width: 92px; height: 92px; display: block; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring .ring__track { stroke: rgba(114,82,170,.18); }
.ring .ring__fill { stroke: var(--fiva-primaryButton); transition: stroke-dasharray var(--dur-ring) var(--ease-move); }
.ring__value {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 19px; letter-spacing: -0.02em;
}
.ring__value--none { font-size: 13px; font-weight: 600; color: var(--fiva-muted); }

/* ---------- mascot ---------- */

.mascot { display: block; height: auto; }
.mascot--ack { animation: mascotAck var(--dur-mascot) var(--ease-move) 1; }
@keyframes mascotAck {
  0% { transform: none; }
  35% { transform: translateY(-6px) rotate(-4deg); }
  70% { transform: translateY(0) rotate(2deg); }
  100% { transform: none; }
}

/* ---------- chart ---------- */

.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; }
.chart__bar-sched { fill: rgba(114,82,170,.20); }
.chart__bar-full { fill: var(--fiva-primaryButton); }
.chart__bar-small { fill: var(--fiva-terracotta); }
.chart__bar-future { fill: rgba(114,82,170,.20); opacity: .45; }
.chart__label { fill: var(--fiva-muted); font-size: 11px; font-family: var(--font-body); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.data th, table.data td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--fiva-border); }
table.data th { font-weight: 600; font-size: 13px; color: var(--fiva-muted); }

/* ---------- misc ---------- */

.status {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3); border-radius: var(--radius-control);
  font-size: 14px; font-weight: 500;
}
.status--ok { background: var(--fiva-mint); color: var(--fiva-teal); }
.status--err { background: #FBE9EE; color: var(--fiva-danger); }
:root[data-theme="dark"] .status--err { background: #3A1E27; }
.status svg { width: 18px; height: 18px; flex: none; }

.notice { font-size: 13px; color: var(--fiva-muted); }

.pilot-banner {
  display: flex; gap: var(--s2); align-items: flex-start;
  background: var(--fiva-peach); color: var(--fiva-terracotta);
  padding: var(--s3); border-radius: var(--radius-control);
  font-size: 13px; font-weight: 500; line-height: 1.45;
}
.pilot-banner svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s6) var(--s4); }
.empty .mascot { width: 118px; }
.empty h2 { font-size: 18px; }
.empty p { color: var(--fiva-muted); font-size: 14px; max-width: 30ch; }

.listrow {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: var(--touch); padding: var(--s3);
  background: none; border: 0; border-bottom: 1px solid var(--fiva-border);
  font-family: var(--font-body); font-size: 15px; color: var(--fiva-ink);
  text-align: left; cursor: pointer; text-decoration: none;
}
.listrow:last-child { border-bottom: 0; }
.listrow__icon { flex: none; color: var(--fiva-primaryButton); display: grid; place-items: center; }
.listrow__icon svg { width: 20px; height: 20px; }
.listrow__value { color: var(--fiva-muted); font-size: 14px; }
.listrow__go { color: var(--fiva-muted); }
.listrow__go svg { width: 18px; height: 18px; }

.card--list { padding: var(--s1) var(--s3); }

/* modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(23,33,47,.45);
  display: grid; place-items: end center;
  animation: fadeIn 160ms var(--ease-out) both;
}
.modal {
  width: 100%; max-width: var(--shell-max);
  background: var(--fiva-surface);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--s5) var(--gutter);
  padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--s4);
  animation: sheetIn 160ms var(--ease-out) both;
  max-height: 90vh; overflow-y: auto;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.onboard-steps { font-size: 13px; color: var(--fiva-muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.welcome { align-items: center; text-align: center; gap: var(--s4); padding-top: var(--s7); }
.welcome .mascot { width: 180px; }
.welcome h1 { font-size: 30px; }
.welcome p { color: var(--fiva-muted); }

.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.goal-grid .chip { width: 100%; }

/* Desktop is a responsive extension of the mobile language, not a separate
   approved design: the shell stays a centred column. */
@media (min-width: 900px) {
  body { background: var(--fiva-lavenderTint); }
  .shell { box-shadow: 0 0 0 1px var(--fiva-border); background: var(--fiva-background); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
/* App-level reduction can only reduce further, never re-enable motion. */
:root[data-motion="reduced"] *, 
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}