/* Weekly tracker — warm-neutral system.
   Repeated cells (365 day squares, 5200 life squares) live as classes for paint speed. */

:root {
  --bg: oklch(0.975 0.006 85);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.985 0.006 85);
  --ink: oklch(0.26 0.012 70);
  --ink-2: oklch(0.42 0.014 70);
  --muted: oklch(0.56 0.014 70);
  --faint: oklch(0.68 0.012 70);
  --line: oklch(0.91 0.008 85);
  --line-2: oklch(0.86 0.01 85);
  --accent: oklch(0.55 0.11 45);
  --accent-soft: oklch(0.94 0.045 45);
  --r: 10px;
  --shadow: 0 1px 2px oklch(0.5 0.02 70 / 0.06);
  --shadow-lg: -20px 0 60px oklch(0.4 0.02 70 / 0.14);
  --mo: oklch(0.38 0.014 70);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body {
  font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
  color: var(--ink); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.018em; line-height: 1.15; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: oklch(0.45 0.11 45); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.kick { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  padding: 9px 14px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); transition: background 120ms, border-color 120ms;
}
.btn:hover { border-color: oklch(0.74 0.012 85); color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: oklch(0.99 0.005 85); }
.btn-primary:hover { background: oklch(0.48 0.11 45); border-color: oklch(0.48 0.11 45); color: oklch(0.99 0.005 85); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: oklch(0.94 0.008 85); border-color: transparent; }
.btn-sm { padding: 6px 10px; font-size: 13px; border-radius: 7px; }
.btn-icon { padding: 0; width: 30px; height: 30px; }

/* tabs */
.tabs { display: flex; gap: 2px; background: oklch(0.93 0.008 85); padding: 3px; border-radius: 10px; }
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  padding: 6px 11px; border-radius: 7px; border: 0; background: transparent; color: var(--muted);
}
.tab:hover { color: var(--ink); }
.tab-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.tab-on:hover { color: var(--ink); }

/* surfaces */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.cell { padding: 15px 16px; }
.divx { border-left: 1px solid var(--line); }
.divy { border-top: 1px solid var(--line); }

/* inputs */
.in {
  font: inherit; font-size: 14px; color: var(--ink); width: 100%;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface); caret-color: var(--accent);
}
.in:hover { border-color: oklch(0.76 0.012 85); }
.in:focus { outline: none; border-color: var(--accent); }
textarea.in { resize: vertical; min-height: 62px; line-height: 1.5; }
.in-num { width: 62px; text-align: center; font-family: 'IBM Plex Mono', monospace; }
select.in { appearance: none; padding-right: 26px; cursor: pointer; }

/* tags */
.tag { display: inline-flex; align-items: center; font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.tag-mono { font-family: 'IBM Plex Mono', monospace; }
.pl-health { background: oklch(0.94 0.045 145); color: oklch(0.42 0.09 145); }
.pl-career { background: oklch(0.94 0.045 250); color: oklch(0.42 0.09 250); }
.pl-family { background: oklch(0.94 0.045 15); color: oklch(0.42 0.09 15); }
.pl-travel { background: oklch(0.94 0.045 200); color: oklch(0.42 0.09 200); }
.pl-growth { background: oklch(0.94 0.045 90); color: oklch(0.42 0.09 90); }
.pl-finance { background: oklch(0.94 0.045 310); color: oklch(0.42 0.09 310); }
.pl-social { background: oklch(0.94 0.045 45); color: oklch(0.42 0.09 45); }
.pl-neutral { background: oklch(0.94 0.008 85); color: var(--ink-2); }

/* chips (pillar picker) */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  padding: 7px 15px; border-radius: 20px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2);
}
.chip:hover { border-color: oklch(0.74 0.012 85); }
.chip-on { background: var(--ink); border-color: var(--ink); color: oklch(0.98 0.005 85); }
.chip-on:hover { background: var(--ink); }

/* ── year grid ───────────────────────────────────────────── */
.gridpanel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.hrow { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.wrow {
  display: flex; align-items: center; gap: 14px; padding: 0 16px; cursor: pointer;
  box-shadow: inset 0 -1px 0 oklch(0.955 0.008 85);
}
.wrow:hover { background: oklch(0.975 0.01 60); }
.mo { width: 40px; flex: none; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.wrow-empty { background: var(--surface-2); }
.wrow-empty:hover { background: oklch(0.965 0.01 60); }
.wrow .ed { opacity: 0; }
.wrow:hover .ed { opacity: 1; }

.days { display: flex; flex: none; border-left: 1px solid var(--line); }
.days-h { border-left-color: transparent; }
.dh { width: 34px; flex: none; }
/* every day carries a 2px transparent frame; month edges colour their side,
   so the outline steps around each month without shifting the grid */
.dw { display: flex; flex: none; border: 2px solid transparent; margin: -2px; }
.mb-t { border-top-color: var(--mo); }
.mb-b { border-bottom-color: var(--mo); }
.mb-l { border-left-color: var(--mo); }
.mb-r { border-right-color: var(--mo); }
.d {
  width: 34px; height: 34px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
}
.dn { line-height: 1; }
.dm { display: flex; align-items: center; gap: 2px; height: 6px; }
.mk { width: 4px; height: 4px; flex: none; display: block; }
.dm > .mk { display: none; }
.has-g .mk-gym, .has-o .mk-off, .has-m .mk-out1, .has-m2 .mk-out2, .has-m3 .mk-out3 { display: block; }
.mk-gym { border-radius: 50%; background: oklch(0.58 0.115 145); }
.mk-off { border-radius: 1px; background: oklch(0.54 0.11 250); }
.mk-out { width: 5px; height: 5px; background: oklch(0.62 0.14 45); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mk-lg { width: 8px; height: 8px; margin: 0 6px; }
.mk-out.mk-lg { width: 9px; height: 9px; }

/* per-day meal steppers (drawer) */
.ms-row { display: flex; gap: 4px; }
.ms { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.mslab { text-align: center; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.msb {
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  height: 22px; border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--muted); padding: 0;
}
.msb:hover { border-color: oklch(0.72 0.012 85); color: var(--ink); }
.msn {
  height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: 13px; color: var(--faint);
}
.msn-on { background: var(--ink); border-color: var(--ink); color: oklch(0.98 0.005 85); }
.ms-we .msn { background: oklch(0.955 0.008 85); }
.ms-we .msn-on { background: var(--ink); }
.sw { display: inline-block; width: 20px; height: 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }

/* legend */
.legend { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.lg {
  display: flex; align-items: center; gap: 7px; font-size: 12px;
  padding: 4px 8px; border-radius: 8px; border: 1px solid transparent;
}
.lg-hi { border-color: var(--line-2); background: var(--surface); }
.lgc { font-size: 11.5px; color: var(--ink); font-weight: 500; }
.lgw { margin-left: auto; font-size: 11.5px; }

/* icons */
.ic { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 13px; height: 13px; }
.ic-lg { width: 17px; height: 17px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* day pickers */
.dp-row { display: flex; gap: 4px; }
.dp {
  font: inherit; font-size: 11.5px; font-family: 'IBM Plex Mono', monospace; cursor: pointer;
  width: 36px; height: 28px; border-radius: 7px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--muted);
}
.dp:hover { border-color: oklch(0.72 0.012 85); color: var(--ink); }
.dp-on { background: var(--ink); border-color: var(--ink); color: oklch(0.98 0.005 85); }
.dp-on:hover { background: var(--ink); color: oklch(0.98 0.005 85); }
.dp-we { background: oklch(0.955 0.008 85); }

/* inline-editable text */
.ain {
  font: inherit; font-size: 14.5px; color: var(--ink); width: 100%;
  padding: 4px 7px; border: 1px solid transparent; border-radius: 7px; background: transparent;
}
.ain:hover { border-color: var(--line); background: var(--surface); }
.ain:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.ain-done { text-decoration: line-through; color: var(--faint); }
.era { font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
.era-past { background: oklch(0.94 0.008 85); color: var(--muted); }
.era-now { background: var(--accent-soft); color: oklch(0.44 0.11 45); }
.era-next { background: oklch(0.95 0.03 250); color: oklch(0.44 0.09 250); }
.d-we { background: oklch(0.955 0.008 85); color: var(--muted); }
.d-hol { background: oklch(0.93 0.055 45); border-color: oklch(0.88 0.055 45); color: oklch(0.42 0.09 45); }
.d-lv { background: oklch(0.95 0.05 90); border-color: oklch(0.9 0.05 90); color: oklch(0.42 0.07 90); }
.d-tr { background: oklch(0.94 0.045 200); border-color: oklch(0.89 0.045 200); color: oklch(0.4 0.08 200); }
.d-off { color: var(--faint); background: oklch(0.985 0.006 85); }
.wrow-hi { background: oklch(0.972 0.012 60) !important; }
.clip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }

/* ── life grid ───────────────────────────────────────────── */
.lgrid { display: flex; flex-direction: column; gap: 2px; }
.lrow { display: flex; align-items: center; gap: 2px; }
.lw { width: 10px; height: 10px; border-radius: 2px; flex: none; background: var(--line-2); }
.lw-past { background: oklch(0.9 0.004 85); }
.lw-now { background: var(--ink); box-shadow: 0 0 0 2px oklch(0.55 0.11 45 / 0.35); }
.ld-0 .lw-live { background: oklch(0.62 0.13 30); }
.ld-1 .lw-live { background: oklch(0.64 0.125 55); }
.ld-2 .lw-live { background: oklch(0.66 0.12 85); }
.ld-3 .lw-live { background: oklch(0.66 0.11 120); }
.ld-4 .lw-live { background: oklch(0.67 0.10 155); }
.ld-5 .lw-live { background: oklch(0.68 0.085 190); }
.ld-6 .lw-live { background: oklch(0.70 0.07 225); }
.ld-7 .lw-live { background: oklch(0.73 0.055 260); }
.ld-8 .lw-live { background: oklch(0.78 0.04 295); }
.ld-9 .lw-live { background: oklch(0.83 0.025 330); }
.lylab { width: 26px; flex: none; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--faint); }
.ldec { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }

/* ── goals / retirement ──────────────────────────────────── */
.grow { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line); }
.bar { height: 5px; border-radius: 3px; background: oklch(0.93 0.008 85); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.st { font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); border-radius: 6px; padding: 3px 9px; color: var(--ink-2); }
.st:hover { border-color: oklch(0.74 0.012 85); }
.st-done { background: oklch(0.94 0.045 145); border-color: oklch(0.9 0.045 145); color: oklch(0.4 0.09 145); }
.st-prog { background: oklch(0.94 0.045 90); border-color: oklch(0.9 0.045 90); color: oklch(0.4 0.08 90); }
.done-text { text-decoration: line-through; color: var(--faint); }
.stage { border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); overflow: hidden; margin-bottom: 14px; }
.stagehead { display: flex; align-items: baseline; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }

/* ── drawer ──────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: oklch(0.3 0.01 70 / 0.28); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 94vw; z-index: 41;
  background: var(--surface-2); border-left: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg); overflow-y: auto;
}
.dsticky {
  position: sticky; top: 0; z-index: 2; padding: 20px 26px 14px;
  background: oklch(0.985 0.006 85 / 0.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.scroll { max-height: 620px; overflow-y: auto; }

/* ── stat grids (gap-line, wraps cleanly at any column count) ── */
.statgrid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.statgrid > .cell { background: var(--surface); }
.statgrid-6 { grid-template-columns: repeat(6, 1fr); }
.statgrid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── user menu ───────────────────────────────────────────── */
.uwrap { position: relative; flex: none; }
.ubtn {
  width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: oklch(0.62 0.09 140); color: oklch(0.99 0.005 85);
  font: inherit; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.ubtn:hover { background: oklch(0.56 0.09 140); }
.umenu {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 50; width: 244px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 14px 34px oklch(0.4 0.02 70 / 0.16);
}
.uhead { padding: 9px 11px 8px; }
.uitem {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px; cursor: pointer;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2);
}
.uitem:hover { background: oklch(0.955 0.008 85); color: var(--ink); }
.udiv { height: 1px; background: var(--line); margin: 5px 0; }
.only-sm { display: none !important; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .statgrid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .tlab { display: none; }
  .tab { padding: 6px 9px; }
}
@media (max-width: 760px) {
  .hide-sm { display: none !important; }
  .only-sm { display: flex !important; }
  /* backdrop-filter would make the header a containing block for the fixed tab bar */
  .hdr { backdrop-filter: none !important; background: oklch(0.975 0.006 85) !important; }
  .drawer { width: 100%; }
  .statgrid-6, .statgrid-4 { grid-template-columns: repeat(2, 1fr); }
  .cell { padding: 13px 14px; }
  .hwrap { padding: 10px 14px !important; gap: 12px !important; }
  .mwrap { padding: 18px 14px 108px !important; }
  .pgh { flex-wrap: wrap; align-items: flex-start !important; gap: 14px !important; }

  /* tabs become a phone tab bar */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 36;
    gap: 0; padding: 5px 6px 9px; border-radius: 0;
    background: oklch(0.975 0.006 85 / 0.95); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .tab { flex: 1; flex-direction: column; gap: 3px; font-size: 10px; padding: 7px 2px; }
  .tab .ic { width: 18px; height: 18px; }
  .tlab { display: block; }

  /* week rows: summary drops to its own line */
  .hrow, .wrow { gap: 9px; padding-left: 12px; padding-right: 12px; }
  .hrow .mo, .hrow .sumcol, .wrow .mo, .wrow .ed { display: none; }
  .wrow { flex-wrap: wrap; padding-top: 7px; padding-bottom: 7px; box-shadow: inset 0 -1px 0 var(--line); }
  .wrow .clip {
    flex: 1 0 100%; order: 5; white-space: normal; overflow: visible;
    text-overflow: clip; font-size: 12.5px; line-height: 1.4;
  }

  /* goals + plan rows stack */
  .ghead { display: none !important; }
  .grow { flex-wrap: wrap; gap: 11px; padding: 13px 14px; }
  .grow > * { width: auto !important; }
  .grow > .gprog { flex: 1 0 100% !important; }
  .gform > div { width: auto !important; flex: 1 1 132px; }
  .stagehead { flex-wrap: wrap; gap: 9px; padding: 11px 14px; }
  .stagehead .ain { flex: 1 0 100% !important; }

  /* drawer day pickers stretch full width */
  .trk { flex-wrap: wrap; gap: 8px !important; }
  .trk > .trkname { width: auto !important; flex: 1 0 auto; }
  .trk > .dp-row { flex: 1 0 100%; }
  .dp { width: auto; flex: 1; }
}
@media (max-width: 430px) {
  .d { width: 30px; height: 32px; font-size: 10px; }
  .dh { width: 30px; }
  .dm { gap: 1.5px; }
  .mk-out { width: 4px; height: 4px; }
  .days { margin-left: -2px; }
  .statgrid-6, .statgrid-4 { grid-template-columns: repeat(2, 1fr); }
  .lg { padding: 3px 6px; gap: 6px; }
}