/* Layout for the weekly tracker.
   ds/tracker.css is the design system — tokens and every reusable component.
   This file is only the page scaffolding that the prototype carried as inline
   style attributes: headers, page grids, one-off column widths. Values are the
   prototype's, moved from `style="..."` to a name so the markup stays readable
   and the responsive block in tracker.css (which already targets .hdr, .hwrap,
   .mwrap, .pgh, .gform, .ghead, .gprog, .trk) has something to hook onto. */

body { min-height: 100vh; background: var(--bg); color: var(--ink); }

/* Standing in for the Google mark rather than shipping their asset. */
.gate-g {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: conic-gradient(oklch(0.6 0.15 45), oklch(0.62 0.14 130), oklch(0.6 0.14 250), oklch(0.6 0.15 45));
}

/* ── app shell ───────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 30;
  background: oklch(0.975 0.006 85 / 0.93); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hwrap { max-width: 1420px; margin: 0 auto; padding: 13px 26px; display: flex; align-items: center; gap: 20px; }
.brand {
  display: flex; align-items: center; gap: 9px; flex: none;
  font: inherit; color: inherit; padding: 0; border: 0; background: none; cursor: pointer;
}
/* The wordmark is four squares — a life is a lot of small squares, and the mark
   should be the same idea at 25px as the Life tab is at full size. */
.brand-mark {
  width: 25px; height: 25px; border-radius: 7px; background: var(--accent); flex: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5px; padding: 6px;
}
.brand-mark > i { display: block; border-radius: 1.5px; background: oklch(0.99 0.005 85); }
/* The last square is the week you're in: filled on the header mark, hollow on
   the big one, where there's room for the detail to read. */
.brand-mark-lg { width: 44px; height: 44px; border-radius: 12px; gap: 4px; padding: 9px; }
.brand-mark-lg > i:last-child { background: oklch(0.99 0.005 85 / 0.45); }
.brand-word { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.spacer { flex: 1; }
.ystep { display: flex; align-items: center; gap: 2px; }
.ystep-y { font-size: 14px; padding: 0 6px; }
.umenu .ustep { align-items: center; justify-content: space-between; gap: 6px; padding: 2px 8px 8px; }
.umenu .ustep .ystep-y { font-size: 13.5px; padding: 0; }
.uname { font-size: 13.5px; font-weight: 600; }
.umail { font-size: 11.5px; }

.mwrap { max-width: 1420px; margin: 0 auto; padding: 26px 26px 90px; }

/* Page header: kicker + headline + subline on the left, one action on the right. */
.pgh { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.pgh h2 { font-size: 24px; margin: 7px 0 4px; }
.pgh p { font-size: 14px; }
.pgh > .btn { flex: none; }
/* Views without a kicker sit their title flush to the top. */
.pgh-plain h2 { font-size: 24px; margin: 0 0 4px; }
/* A view heading that isn't in a .pgh — Life, Life stages, Settings each pair a
   title with one line of explanation. */
.view-title { font-size: 24px; margin-bottom: 4px; }
.view-sub { font-size: 14px; max-width: 62ch; }

/* ── hero stats ──────────────────────────────────────────── */
.statgrid { margin-bottom: 24px; }
/* How many hero tiles there are is up to the account, so this row wraps at a
   readable tile width rather than assuming a column count.
   Flex rather than grid on purpose: nine tiles in a six-column grid leave three
   empty tracks, and the gap-line trick paints those as a grey slab. Flex lets
   the last row's tiles grow into the space instead. */
.statgrid-auto { display: flex; flex-wrap: wrap; }
.statgrid-auto > .cell { flex: 1 1 178px; }
.stat-head { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.stat-lab { font-size: 12px; font-weight: 500; }
.stat-val { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.stat-num { font-size: 27px; font-weight: 500; letter-spacing: -0.02em; }
.stat-unit { font-size: 12px; }
.stat-note { font-size: 11px; margin-top: 8px; }
.statgrid .bar { margin-top: 11px; }

/* ── year grid ───────────────────────────────────────────── */
.hrow .mo-head { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.hrow .wkcol { width: 34px; }
.hrow .dh { text-align: center; font-weight: 500; }
.hrow .sumcol { flex: 1; }
.hrow .edcol { width: 44px; }
.wrow .wknum { width: 34px; font-size: 13px; }
.wrow .wknum-off { color: var(--faint); }
.wrow .clip-off { color: var(--faint); }
.wrow .ed { width: 44px; font-size: 12px; text-align: right; }

/* ── pillars ─────────────────────────────────────────────── */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.chart-card { padding: 22px 24px; margin-bottom: 16px; }
.chart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.chart-head h3 { font-size: 17px; margin-top: 6px; }
.chart-figs { display: flex; gap: 36px; }
.chart-fig { font-size: 22px; font-weight: 500; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; border-bottom: 1px solid var(--line-2); }
.chart > i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; display: block; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; }
.tl-panel { overflow: hidden; }
.tl-head { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.tl-row { display: flex; gap: 22px; padding: 15px 20px; border-top: 1px solid oklch(0.955 0.008 85); }
.tl-when { width: 112px; flex: none; }
.tl-week { font-size: 13px; font-weight: 500; }
.tl-range { font-size: 11.5px; margin-top: 2px; }
.tl-items { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.tl-item { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.tl-item > i { width: 5px; height: 5px; border-radius: 50%; margin-top: 8px; flex: none; }

/* ── goals ───────────────────────────────────────────────── */
.gform { padding: 16px 18px; margin-bottom: 20px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.gform .kick { margin-bottom: 6px; }
.gform .gf-title { flex: 1; min-width: 220px; }
.gform .gf-pillar { width: 132px; }
.gform .gf-unit { width: 118px; }
.gform .gf-num { width: 92px; }
.gform .gf-due { width: 150px; }
.gform .in-num { width: 100%; }
.ghead { display: flex; gap: 16px; padding: 12px 18px; }
.ghead .h-goal { flex: 1; }
.ghead .h-prog { width: 296px; }
.ghead .h-date { width: 88px; }
.ghead .h-done { width: 96px; }
.ghead .h-acts { width: 64px; }
.grow .gname { flex: 1; min-width: 0; }
.grow .gname > div { display: flex; align-items: center; gap: 9px; }
.grow .tag { gap: 5px; }
.gprog { width: 296px; }
.gprog-row { display: flex; align-items: center; gap: 7px; }
.gprog .btn-icon { width: 24px; height: 24px; }
.gprog .greadout { font-size: 12.5px; width: 86px; text-align: center; }
.gprog .bar { flex: 1; min-width: 34px; }
.gprog .gunit { width: 62px; flex: none; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.grow .gdate { width: 88px; font-size: 12px; }
.grow .gdone { width: 96px; font-size: 12px; }
.grow .gacts { width: 64px; display: flex; gap: 4px; justify-content: flex-end; }
.gdate-over { color: oklch(0.5 0.13 30); }

/* ── life in weeks ───────────────────────────────────────── */
.life-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.life-head .btn { flex: none; }
.life-stats { margin-bottom: 22px; }
.lstat-lab { font-size: 12px; font-weight: 500; color: var(--muted); }
.lstat-val { font-size: 27px; font-weight: 500; margin-top: 8px; letter-spacing: -0.02em; }
.lstat-note { font-size: 11px; margin-top: 6px; }
.life-panel { padding: 22px 24px; }
.dec-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dec-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.dec-item .lw { width: 12px; height: 12px; }

/* ── long plan ───────────────────────────────────────────── */
.plan-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.plan-now { font-size: 12px; }
.bands { display: flex; height: 8px; border-radius: 5px; overflow: hidden; margin-bottom: 18px; background: oklch(0.93 0.008 85); }
.stagehead .era { flex: none; }
.stage-ages { display: flex; align-items: center; gap: 5px; flex: none; }
.stage-ages .in-num { width: 48px; padding: 5px 4px; }
.stage-ages .faint { font-size: 12px; }
.stagehead .ain { flex: 1; font-size: 16px; font-weight: 600; }
.stage-count { font-size: 12px; flex: none; }
.st-item { display: flex; align-items: center; gap: 10px; padding: 7px 18px; border-top: 1px solid oklch(0.955 0.008 85); }
.st-item .ain { flex: 1; }
.st-item .st, .st-item .btn { flex: none; }
.st-add { display: flex; gap: 10px; padding: 9px 18px; border-top: 1px solid oklch(0.955 0.008 85); }
.st-add .in { max-width: 460px; border-style: dashed; }
.nsform { padding: 14px 18px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.nsform .kick { margin-bottom: 6px; }
.nsform .ns-title { flex: 1; min-width: 220px; }
.nsform .ns-age { width: 92px; }
.nsform .in-num { width: 100%; }

/* ── week drawer ─────────────────────────────────────────── */
.dsticky { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dsticky h3 { font-size: 21px; margin-top: 6px; }
.dsticky .dacts { display: flex; gap: 7px; }
.dbody { padding: 22px 26px 80px; }
.dbody .kick { margin-bottom: 10px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sec-head .kick { margin-bottom: 0; }
.sec-count { font-size: 11.5px; }
.trkpanel { padding: 14px 16px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 11px; }
.trk { display: flex; align-items: center; gap: 12px; }
.trkname { display: flex; align-items: center; gap: 7px; width: 112px; flex: none; font-size: 13px; color: var(--ink-2); }
.trkcount { font-size: 11.5px; margin-left: auto; }
.mealpanel { padding: 13px 14px; margin-bottom: 22px; }
.countpanel { margin-bottom: 24px; }
.countrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; }
.countrow .clab { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.countrow .cctl { display: flex; align-items: center; gap: 5px; }
.countrow .btn-icon { width: 26px; height: 26px; }
.countrow .in-num { padding: 5px 6px; }
.dsum { margin-bottom: 24px; }
.rowlist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.rowline { display: flex; gap: 7px; align-items: center; }
.rowline select.in { width: 112px; flex: none; font-size: 12.5px; padding: 7px 8px; }
.refl { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 12px; background: oklch(0.965 0.014 75); }
.refl-q { font-size: 12.5px; color: oklch(0.5 0.03 60); margin-bottom: 5px; }

/* ── landing page ────────────────────────────────────────── */
/* Full-bleed, unlike every other view: it's the first thing anyone sees and the
   only page with nothing of theirs on it, so it gets the whole window. Sections
   alternate between the page background and the surface so the eye has
   somewhere to rest on the way down. */
.lp { --lp-pad: 30px; }
.lp-wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--lp-pad); }
.lp-sec { padding: 78px 0; }
.lp-sec-alt { background: var(--surface); border-block: 1px solid var(--line); }
.lp-h2 { font-size: 30px; margin: 10px 0 34px; max-width: 22ch; text-wrap: balance; }
.lp-body { font-size: 15.5px; line-height: 1.65; max-width: 54ch; text-wrap: pretty; }
.lp-btn { padding: 13px 20px; font-size: 15px; }

/* hero — copy on the left, a real life-in-weeks on the right */
.lp-hero {
  padding: 46px 0 84px;
  background:
    radial-gradient(70% 100% at 100% 0%, oklch(0.95 0.05 45 / 0.75), transparent 62%),
    radial-gradient(60% 90% at 0% 22%, oklch(0.95 0.035 200 / 0.5), transparent 60%);
}
/* Signed out there's no app header above this, so the hero carries the gap. */
.lp-solo .lp-hero { padding-top: 72px; }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
.lp-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 40px; }
.lp-brandword { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.lp-h1 { font-size: 52px; line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 20px; text-wrap: balance; }
.lp-em { color: var(--accent); }
.lp-lede { font-size: 17px; line-height: 1.62; color: var(--ink-2); max-width: 50ch; text-wrap: pretty; }
.lp-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.lp-cta-note { font-size: 12.5px; }
.lp-hero-art { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* The hero map has no year gutter, so it's 52 columns flat — and it's held
   narrow on purpose: eighty rows at full column width is a thousand pixels of
   hero, and the copy stops being the first thing you read. */
.lp-map { width: 100%; max-width: 408px; }
.lp-map .lgrid { --lcols: repeat(52, 1fr); --lgap: 1.5px; max-width: none; }
.lp-map .lw { border-radius: 1.5px; }

/* The drain. Each lived week starts in its decade's colour and empties to grey,
   left to right, in under two seconds — the headline says you get four thousand
   of these, and this is what a third of them going looks like.

   Both keyframes declare only `to`, so the animation starts from whatever the
   square already computes to (`.ld-N .lw-live`) and no colour is duplicated
   here. `animation-delay` is set per square in landing.js, which is the only
   thing JS does — after the first paint the browser runs it alone. */
@keyframes lw-drain { to { background: oklch(0.9 0.004 85); } }
@keyframes lw-now-in {
  to { background: var(--ink); box-shadow: 0 0 0 2px oklch(0.55 0.11 45 / 0.35); }
}
.lp-map .lw-drain { animation: lw-drain 320ms ease-out forwards; }
.lp-map .lw-now-in { animation: lw-now-in 460ms ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  /* Same picture, arrived at instantly. */
  .lp-map .lw-drain { animation: none; background: oklch(0.9 0.004 85); }
  .lp-map .lw-now-in {
    animation: none; background: var(--ink);
    box-shadow: 0 0 0 2px oklch(0.55 0.11 45 / 0.35);
  }
}
.lp-cap { font-size: 11.5px; line-height: 1.5; max-width: 46ch; }

/* what it is */
.lp-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 34px 30px; }
.lp-pico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 14px;
  background: var(--accent-soft); color: oklch(0.44 0.11 45);
}
.lp-pt { font-size: 16px; margin-bottom: 7px; }
.lp-pb { font-size: 14px; line-height: 1.6; text-wrap: pretty; }

/* the five screens — flex, not grid: five cards never divide evenly into a
   responsive column count, and a grid leaves the last row's orphan at one
   column's width. Flex lets whatever lands on the last row share it. */
.lp-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.lp-card {
  flex: 1 1 196px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
}
.lp-card-art {
  height: 132px; padding: 14px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.lp-card-foot { padding: 12px 14px 14px; }
.lp-card-name { font-size: 13.5px; font-weight: 600; }
.lp-card-q { font-size: 12px; margin-top: 2px; }

/* the miniatures inside those cards */
.lp-year { display: flex; flex-direction: column; gap: 2px; }
.lp-yrow { display: flex; align-items: center; gap: 2px; }
.lp-ywk { font-size: 8.5px; color: var(--faint); width: 14px; }
.lp-yd {
  width: 13px; height: 13px; border-radius: 2px; flex: none;
  border: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center; gap: 1px;
}
.lp-chart { display: flex; align-items: flex-end; gap: 3px; height: 92px; width: 100%; }
.lp-chart > i { flex: 1; border-radius: 2px 2px 0 0; display: block; }
.lp-goals { display: flex; flex-direction: column; gap: 13px; width: 100%; }
.lp-goal-n { font-size: 11.5px; color: var(--ink-2); display: block; margin-bottom: 5px; }
/* The rows are 52 fractional columns, so without a width to divide up they
   collapse to nothing. */
.lp-weeks { width: 100%; }
.lp-weeks .lgrid { --lcols: repeat(52, 1fr); --lgap: 1.5px; max-width: none; }
.lp-bands { width: 100%; }
.lp-band-labs { display: flex; justify-content: space-between; margin-top: 9px; font-size: 10.5px; }
.lp-band-now { color: var(--accent); }

/* it's yours */
.lp-yours { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.lp-yours .lp-h2 { margin-bottom: 18px; }
.lp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lp-li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.lp-tick {
  flex: none; width: 21px; height: 21px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.94 0.045 145); color: oklch(0.42 0.09 145);
}

/* how it goes */
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 32px; }
.lp-step { border-top: 2px solid var(--accent); padding-top: 16px; }
.lp-stepn { font-size: 12px; color: var(--accent); margin-bottom: 8px; }

/* close */
.lp-close { padding: 88px 0 104px; background: var(--surface); border-top: 1px solid var(--line); }
.lp-close-in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.lp-close-h { margin: 0 0 12px; max-width: 24ch; }
.lp-close-p { margin-bottom: 30px; }
.lp-foot { font-size: 12.5px; margin-top: 20px; max-width: 48ch; line-height: 1.55; }

@media (max-width: 940px) {
  .lp-hero-grid, .lp-yours { grid-template-columns: 1fr; gap: 40px; }
  .lp-h1 { font-size: 40px; }
  .lp-h2 { font-size: 26px; }
  .lp-sec { padding: 60px 0; }
}
@media (max-width: 560px) {
  .lp { --lp-pad: 18px; }
  .lp-h1 { font-size: 32px; }
  .lp-lede { font-size: 15.5px; }
  .lp-btn { width: 100%; }
  .lp-cta { gap: 12px; }
}

/* ── onboarding ──────────────────────────────────────────── */
/* One question, eight answers, no chrome — there are no tabs yet because there
   is nothing on them until this is answered. */
.ob {
  min-height: 100vh; padding: 64px 24px 80px;
  background:
    radial-gradient(60% 80% at 100% 0%, oklch(0.95 0.05 45 / 0.6), transparent 60%),
    radial-gradient(50% 70% at 0% 10%, oklch(0.95 0.035 200 / 0.45), transparent 58%);
}
.ob-wrap { max-width: 940px; margin: 0 auto; }
.ob-brand { margin-bottom: 36px; }
.ob-h1 { font-size: 40px; letter-spacing: -0.03em; margin-bottom: 14px; }
.ob-lede {
  font-size: 16px; line-height: 1.62; color: var(--ink-2);
  max-width: 60ch; margin-bottom: 34px; text-wrap: pretty;
}
.ob-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; }
.ob-card {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  font: inherit; text-align: left; cursor: pointer;
  padding: 18px 18px 16px; border-radius: 14px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.ob-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.ob-card[disabled] { cursor: default; opacity: 0.55; transform: none; }
.ob-card-busy { opacity: 1 !important; border-color: var(--accent); }
.ob-age { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.ob-blurb { font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.ob-what { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ob-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  padding: 3px 8px; border-radius: 6px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.ob-pillars { font-size: 11.5px; line-height: 1.5; }
.ob-note { font-size: 13px; margin-top: 28px; max-width: 62ch; line-height: 1.55; }
.ob-spin {
  position: absolute; top: 16px; right: 16px; width: 15px; height: 15px;
  border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent);
  animation: ob-spin 620ms linear infinite;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .ob { padding: 40px 18px 64px; }
  .ob-h1 { font-size: 30px; }
  .ob-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-card:hover { transform: none; }
  .ob-spin { animation-duration: 2s; }
}

/* ── settings ────────────────────────────────────────────── */
/* Every row is "a chip, a name, and the controls that shape it". They wrap on a
   phone rather than shrinking, because a colour swatch at half size stops being
   a colour swatch. */
.set-head { margin-bottom: 26px; }
.set-sec { margin-bottom: 34px; }
.set-sechead { margin-bottom: 12px; }
.set-sechead h3 { font-size: 17px; margin-bottom: 4px; }
.set-blurb { font-size: 13.5px; max-width: 74ch; }
.set-panel { overflow: hidden; }
.set-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.set-panel > .set-item:first-child { border-top: 0; }
.set-item > .in { flex: 1; min-width: 150px; }
.set-item .in-num { flex: none; width: 78px; }
/* The slug a week entry is stored under. Shown, never editable — renaming the
   label keeps the history precisely because this doesn't move. */
.set-key {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; gap: 5px;
  flex: none; width: 132px; overflow: hidden; text-overflow: ellipsis;
}
.set-num { width: 132px; flex: none; font-size: 12px; }
.set-select { width: auto; flex: none; min-width: 132px; max-width: 210px; }
.set-unit { flex: 0 1 150px; min-width: 110px; }
.set-extras { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-iconwrap { position: relative; display: flex; align-items: center; flex: none; }
.set-icon {
  position: absolute; left: 9px; display: flex; pointer-events: none; color: var(--ink-2);
}
.set-iconpick { min-width: 0; width: 104px; padding-left: 28px; }
/* Twelve swatches in two rows of six — one long row eats the width the selects
   need, and pushes the whole control set onto a second line. */
.set-hues { display: flex; gap: 4px; flex: none; flex-wrap: wrap; width: 140px; }
.set-hue {
  width: 18px; height: 18px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid; opacity: 0.75;
}
.set-hue:hover { opacity: 1; }
.set-hue-on { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.set-move { display: flex; gap: 2px; flex: none; margin-left: auto; }
.set-move .btn[disabled] { opacity: 0.3; cursor: default; }
.set-del { flex: none; }
.set-hint { flex: 1 0 100%; font-size: 11.5px; margin-top: -2px; }
.set-item-tall { padding-bottom: 9px; }
.set-add { display: flex; gap: 9px; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.set-add-in { flex: 1; max-width: 420px; border-style: dashed; }
.set-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 15px 16px; }
.set-row-pair .set-field { flex: none; }
.set-field .kick { margin-bottom: 6px; }
.set-field .in { width: 180px; }
.set-field .in-num { width: 96px; }
.set-derived { font-size: 12.5px; color: var(--muted); padding-bottom: 9px; }

/* ── empty / loading / error states ──────────────────────── */
.note { padding: 40px 20px; text-align: center; font-size: 14px; color: var(--faint); }
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  font-size: 13.5px; padding: 9px 14px; border-radius: 9px; background: var(--ink);
  color: oklch(0.98 0.005 85); box-shadow: 0 8px 24px oklch(0.4 0.02 70 / 0.2);
}
.toast-err { background: oklch(0.48 0.13 30); }

@media (max-width: 760px) {
  .toasts { bottom: 78px; }
  /* The life map is 52 columns wide whatever the screen, so it gets the panel's
     padding back to spend on squares. */
  .life-panel { padding: 14px 12px; }
  .dec-legend { gap: 10px; margin-bottom: 14px; }
  /* Settings rows stack: the name takes the line, the controls take the next. */
  .set-item { gap: 8px; padding: 12px 14px; }
  .set-item > .in { flex: 1 0 100%; }
  .set-key, .set-num { width: auto; }
  .set-select { min-width: 0; flex: 1 1 130px; }
  .set-move { margin-left: auto; }
  .set-field .in { width: 100%; }
  .set-row-pair .set-field { flex: 1 1 150px; }
}

/* ── print ("Year in review") ────────────────────────────── */
/* The printed page is whatever view is open, minus the chrome you can't click
   on paper. Backgrounds are forced through so the day-cell tints — the whole
   point of the grid — survive the browser's default of dropping them. */
@media print {
  .hdr, .tabs, .scrim, .drawer, .toasts, .ed, .umenu, .lp { display: none !important; }
  .mwrap { padding: 0; max-width: none; }
  body { background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wrow, .grow, .stage, .tl-row { break-inside: avoid; }
}