/* Daybook. Colours come from the theme token table in js/ui/theme.js (set as CSS variables on <html>);
   the defaults below are the Light theme so the first paint matches. Spacing scale: 4/8/12/16/24/32/48. */
@font-face { font-family: 'Bricolage'; src: url('../fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'JBMono'; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JBMono'; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }

:root {
  --bg: #FAF8F4; --card: #FFFFFF; --ink: #1A1D21; --muted: #5B616B; --line: #E6E2DA; --accent: #2F5BEA; --accent-ink: #FFFFFF; --soft: #EAF0FE;
  --ok: #1E7A4C; --warn: #9A5B00; --bad: #C2362B; --ok-soft: #E5F4EC; --warn-soft: #FBF0DC; --bad-soft: #FBE7E5; --rail: #F3F0EA;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 16px; --radius-s: 10px;
  --font: 'Bricolage', ui-rounded, 'Segoe UI', sans-serif; --mono: 'JBMono', ui-monospace, monospace;
  --side: 232px;
  color-scheme: light;
}
/* Legacy names used by the component rules below, all derived from the tokens. */
:root, [data-theme] {
  --bg2: var(--rail); --card2: color-mix(in srgb, var(--card) 94%, var(--ink)); --line2: color-mix(in srgb, var(--line) 70%, var(--ink) 18%);
  --ink2: color-mix(in srgb, var(--ink) 78%, var(--muted));
  --teal: var(--accent); --teal-s: var(--soft); --navy: var(--accent); --navy-s: var(--soft);
  --amber: var(--warn); --amber-s: var(--warn-soft); --red: var(--bad); --red-s: var(--bad-soft); --green: var(--ok); --green-s: var(--ok-soft);
  --l0: color-mix(in srgb, var(--line) 75%, var(--card)); --l1: color-mix(in srgb, var(--accent) 22%, var(--card)); --l2: color-mix(in srgb, var(--accent) 45%, var(--card));
  --l3: color-mix(in srgb, var(--accent) 72%, var(--card)); --l4: var(--accent);
  /* block kinds on the timeline: calm, accent-based; only exam uses a status colour */
  --k-class: var(--accent); --k-skills: color-mix(in srgb, var(--accent) 55%, var(--ok)); --k-study: color-mix(in srgb, var(--accent) 70%, var(--ink));
  --k-health: var(--ok); --k-food: color-mix(in srgb, var(--muted) 70%, var(--warn)); --k-care: color-mix(in srgb, var(--accent) 50%, var(--muted));
  --k-rest: var(--muted); --k-plan: var(--muted); --k-sleep: var(--muted); --k-travel: var(--muted); --k-exam: var(--bad);
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
}
[data-tone=dark] { color-scheme: dark; --shadow: none; }

/* smooth crossfade when switching theme (fallback for browsers without view transitions) */
html.theming, html.theming *, html.theming *::before, html.theming *::after {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, fill .35s ease, stroke .35s ease !important;
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: ease; }

/* theme switcher */
.themebtn { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink2);
  background: var(--card2); border: 1px solid var(--line); border-radius: 11px; padding: .42rem .65rem; cursor: pointer; transition: background .15s, color .15s; }
.themebtn:hover { color: var(--ink); border-color: var(--line2); }
.themebtn .ic { color: var(--amber); }
.daynav .themebtn { margin-left: auto; }
.themebtn.mob { display: none; }
.icon-btn.mob { display: none; }
.side-foot .themebtn { align-self: flex-start; margin-bottom: .3rem; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; margin: .2rem 0 .4rem; }
.themecard { font: inherit; cursor: pointer; padding: .45rem; border-radius: 14px; border: 2px solid var(--line); background: var(--card2); color: var(--ink); display: flex; flex-direction: column; gap: .4rem; text-align: left; transition: border-color .15s, transform .12s; }
.themecard:hover { transform: translateY(-2px); }
.themecard.on { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
.themecard b { font-size: .84rem; padding: 0 .2rem .1rem; }
.tprev { height: 58px; border-radius: 9px; border: 1px solid rgba(128,128,128,.25); background: var(--pb); padding: 8px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.tprev i { display: block; height: 9px; border-radius: 4px; background: var(--pc); }
.tprev i:first-child { width: 60%; background: var(--pi); }
.tprev i:last-child { width: 38%; background: var(--pa); }
.tprev.split { background: linear-gradient(135deg, #FAF8F4 0 50%, #121417 50% 100%); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 15.5px; line-height: 1.45;
  font-variation-settings: 'wdth' 100; -webkit-font-smoothing: antialiased; min-height: 100vh;

}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.015em; }
h1 { font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 750; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 680; }
h4 { font-size: .9rem; font-weight: 650; margin: .9rem 0 .35rem; }
p { margin: .35rem 0; }
a { color: var(--teal); }
code { font-family: var(--mono); font-size: .85em; background: var(--card2); padding: .05rem .3rem; border-radius: 5px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.center { text-align: center; }
.grow { flex: 1; }
.pad { padding: .25rem .1rem; }
.ic { flex: none; display: block; }
:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--bg); padding: .5rem .8rem; border-radius: 8px; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; width: var(--side); flex: none; padding: 1.3rem 1rem 1rem;
  display: flex; flex-direction: column; gap: 1.4rem; border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, var(--card));
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 780; font-size: 1.28rem; letter-spacing: -.03em; padding: 0 .4rem; }
.brand-bg { fill: var(--ink); }
.brand-tick { stroke: var(--amber); }
.nav { display: flex; flex-direction: column; gap: .2rem; }
.nav-i { display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: 12px; color: var(--ink2); text-decoration: none; font-weight: 560; transition: background .15s, color .15s; }
.nav-i:hover { background: var(--card2); color: var(--ink); }
.nav-i.on { background: var(--ink); color: var(--bg); }
.nav-i.on .ic { color: var(--amber); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: .55rem; padding: 0 .3rem; }
.hdrbar { display: grid; grid-template-columns: 1fr auto; gap: .3rem; font-size: .8rem; color: var(--muted); }
.hdrbar b { color: var(--ink); font-size: .95rem; }
.hdrbar i { grid-column: 1 / -1; height: 7px; border-radius: 9px; background: var(--l0); position: relative; overflow: hidden; }
.hdrbar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: linear-gradient(90deg, var(--teal), var(--amber)); border-radius: 9px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.sync { font-size: .76rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.sync::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.sync::after { content: 'saved'; }
.sync[data-state=busy]::before { background: var(--amber); animation: pulse 1s infinite; }
.sync[data-state=busy]::after { content: 'syncing'; }
.sync[data-state=err]::before { background: var(--red); }
.sync[data-state=err]::after { content: 'sync problem'; color: var(--red); }

main { flex: 1; min-width: 0; padding: 1.6rem clamp(1rem, 3vw, 2.6rem) 3rem; outline: none; }
.view { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.tabbar { display: none; }

/* staggered page entrance */
.enter > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.enter > *:nth-child(2) { animation-delay: .04s; } .enter > *:nth-child(3) { animation-delay: .08s; }
.enter > *:nth-child(4) { animation-delay: .12s; } .enter > *:nth-child(5) { animation-delay: .16s; }
.enter > *:nth-child(6) { animation-delay: .2s; } .enter > *:nth-child(n+7) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fillw { from { width: 0; } }

/* ---------- cards & layout ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem 1.15rem; box-shadow: var(--shadow); min-width: 0; }
.card > h3 { margin-bottom: .6rem; }
.card-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.card-head h3 { margin-right: auto; }
.card-head + .card-head, .chart + .card-head { margin-top: 1rem; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.viewhead { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.viewhead h1 { margin-right: auto; }
.archive .viewhead h1 { margin-right: 0; min-width: 9ch; text-align: center; }
.archive.journal .viewhead h1 { min-width: 0; text-align: left; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 1.4rem .5rem; border: 1.5px dashed var(--line2); border-radius: var(--radius-s); }

/* ---------- buttons & inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-weight: 620; font-size: .92rem;
  padding: .55rem .95rem; border-radius: 11px; border: 1px solid var(--line2); background: var(--card); color: var(--ink);
  cursor: pointer; text-decoration: none; transition: transform .08s, background .15s, border-color .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--ink2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { background: var(--teal); border-color: var(--teal); color: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink2); }
.btn.ghost:hover { background: var(--card2); border-color: var(--line); color: var(--ink); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger.ghost { background: transparent; color: var(--red); border-color: transparent; }
.btn.danger.ghost:hover { background: var(--red-s); }
.btn.sm { padding: .38rem .7rem; font-size: .84rem; border-radius: 9px; }
.btn.left { margin-right: auto; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--ink2); cursor: pointer; flex: none; transition: background .15s; }
.icon-btn:hover { background: var(--card2); color: var(--ink); }
.icon-btn.sm { width: 30px; height: 30px; border-radius: 8px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rowbtns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line2); border-radius: 10px; padding: .55rem .7rem; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
textarea { width: 100%; resize: vertical; line-height: 1.45; }
input[type=checkbox] { accent-color: var(--teal); width: 18px; height: 18px; }
input[type=range] { accent-color: var(--teal); padding: 0; border: 0; flex: 1; }
.search { width: 100%; padding: .7rem .9rem .7rem 2.4rem; border-radius: 13px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%237a8582' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E") no-repeat .8rem 50%; }
.sel { padding: .45rem .6rem; border-radius: 10px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem; border-radius: 99px; font-size: .76rem; font-weight: 600; background: var(--card2); color: var(--ink2); border: 1px solid var(--line); white-space: nowrap; flex: none; }
.chip.ok { background: var(--green-s); color: var(--green); border-color: transparent; }
.chip.bad { background: var(--red-s); color: var(--red); border-color: transparent; }
.chip.warn { background: var(--amber-s); color: var(--amber); border-color: transparent; }
.chip.flame { background: var(--amber-s); color: var(--amber); border-color: transparent; }
.chip.ghosty { background: transparent; }

/* ---------- day nav + hero ---------- */
.daynav, .weeknav { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.datepick { padding: .45rem .6rem; border-radius: 11px; font-size: .9rem; }
.hero { display: flex; align-items: center; gap: 1.4rem; padding: 1.3rem 1.4rem; position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--card) 40%, color-mix(in srgb, var(--teal) 9%, var(--card)) 100%); }
.hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid color-mix(in srgb, var(--amber) 14%, transparent); pointer-events: none; }
.hero-txt { display: flex; flex-direction: column; gap: .4rem; min-width: 0; z-index: 1; }
.hero .date { font-size: clamp(1.35rem, 3vw, 2.05rem); }
.ring { display: block; flex: none; }
.ring-bg { fill: none; stroke: var(--l0); }
.ring-val { fill: none; stroke: var(--teal); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1), stroke .3s; }
.ring.full .ring-val { stroke: var(--amber); }
.ring-num { font-family: var(--mono); font-weight: 600; font-size: 22px; fill: var(--ink); }
.ring-sub { font-family: var(--mono); font-size: 11px; fill: var(--muted); }

/* banners */
.banner { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: var(--radius-s); background: var(--navy-s); color: var(--navy); border: 1px solid color-mix(in srgb, var(--navy) 20%, transparent); }
.banner > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.banner span { color: var(--ink2); font-size: .88rem; }
.banner.exam { background: var(--amber-s); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.banner.hot { background: var(--red-s); color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.banner.sun { background: var(--teal-s); color: var(--teal); border-color: color-mix(in srgb, var(--teal) 25%, transparent); }

.evlist { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.evlist li { display: flex; align-items: center; gap: .5rem; color: var(--ink2); font-size: .88rem; }
.evlist .chip { min-width: 5.6rem; justify-content: center; }
/* now card */
.nowcard { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; border-left: 6px solid var(--k, var(--teal)); }
.now-main { flex: 2 1 260px; display: flex; flex-direction: column; gap: .3rem; }
.now-title { font-size: 1.45rem; }
.now-meta { color: var(--ink2); font-size: .88rem; }
.now-meta b { color: var(--k, var(--teal)); }
.now-next { flex: 1 1 170px; padding-left: 1rem; border-left: 1px dashed var(--line2); display: flex; flex-direction: column; gap: .2rem; justify-content: center; }
.next-title { font-weight: 650; }
.nowcard .pbar { margin-top: .4rem; }

/* kind colors */
.k-class { --k: var(--k-class); } .k-skills { --k: var(--k-skills); } .k-study { --k: var(--k-study); }
.k-health { --k: var(--k-health); } .k-food { --k: var(--k-food); } .k-care { --k: var(--k-care); }
.k-rest { --k: var(--k-rest); } .k-plan { --k: var(--k-plan); } .k-sleep { --k: var(--k-sleep); }
.k-travel { --k: var(--k-travel); } .k-exam { --k: var(--k-exam); }
.k-event { --k: var(--teal); } .k-deadline { --k: var(--red); } .k-reminder { --k: var(--amber); }

/* ---------- checklist ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.check { display: flex; align-items: center; gap: .75rem; padding: .55rem .2rem; border-bottom: 1px solid var(--line); min-height: 48px; }
.check:last-child { border-bottom: 0; }
.check-t { flex: 1; min-width: 0; cursor: pointer; user-select: none; display: flex; flex-direction: column; transition: color .2s; }
.check-t small { font-size: .78rem; }
.check.done .check-t, .check.done .check-t span { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.check.late .check-t { color: var(--red); }
.check.late .chip { background: var(--red-s); color: var(--red); border-color: transparent; }
.checks.compact .check { min-height: 38px; padding: .3rem .1rem; }
.cbx {
  flex: none; width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--line2); background: var(--card);
  display: grid; place-items: center; cursor: pointer; color: transparent; padding: 0; transition: background .18s, border-color .18s, color .18s;
}
.cbx:hover { border-color: var(--teal); }
.cbx svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .28s ease .05s; }
.cbx.on { background: var(--teal); border-color: var(--teal); color: var(--accent-ink); animation: pop .3s ease; }
.cbx.on svg path { stroke-dashoffset: 0; }
.checks.compact .cbx { width: 24px; height: 24px; border-radius: 7px; }

/* hours stepper */
.stepper { display: flex; align-items: center; justify-content: center; gap: 1.2rem; }
.step { width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--line2); background: var(--card2); font: 600 1.6rem var(--mono); color: var(--ink); cursor: pointer; }
.step:hover:not(:disabled) { background: var(--teal); color: var(--accent-ink); border-color: var(--teal); }
.step:disabled { opacity: .4; cursor: not-allowed; }
.step-v { display: flex; flex-direction: column; align-items: center; min-width: 5ch; }
.step-v b { font-size: 2.2rem; line-height: 1; }
.step-v span { font-size: .78rem; color: var(--muted); }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.tl { display: grid; grid-template-columns: 3.4rem 18px 1fr; gap: .55rem; align-items: start; padding: .35rem 0; position: relative; }
.tl::before { content: ''; position: absolute; left: calc(3.4rem + .55rem + 8px); top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl:first-child::before { top: 50%; } .tl:last-child::before { bottom: 50%; }
.tl-time { font-size: .82rem; color: var(--ink2); display: flex; flex-direction: column; line-height: 1.2; padding-top: .1rem; }
.tl-time small { color: var(--muted); font-size: .72rem; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 3px solid var(--k, var(--muted)); margin: .2rem 0 0 2px; z-index: 1; }
.tl-body { display: flex; align-items: center; gap: .15rem .5rem; min-height: 2.1rem; padding: .3rem .55rem; border-radius: 10px; min-width: 0;
  transition: background-color .18s ease, outline-color .18s ease, box-shadow .18s ease; }
.tl-title { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.tl-meta { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; white-space: nowrap; }
.tl-room { font-size: .74rem; color: var(--muted); }
.tl-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--k, var(--muted)); font-weight: 700; }
.tl.k-class .tl-body, .tl.k-exam .tl-body { background: color-mix(in srgb, var(--k) 10%, transparent); }
.tl-dot { transition: background-color .18s ease, box-shadow .18s ease; }
.tl.is-now .tl-dot { background: var(--k); box-shadow: 0 0 0 5px color-mix(in srgb, var(--k) 25%, transparent); animation: pulse 2s infinite; }
.tl.is-now .tl-body { background: color-mix(in srgb, var(--k) 16%, transparent); outline: 1.5px solid color-mix(in srgb, var(--k) 45%, transparent); }
@media (max-width: 420px) {
  .tl { grid-template-columns: 3rem 14px 1fr; gap: .4rem; }
  .tl::before { left: calc(3rem + .4rem + 6px); }
  .tl-meta { gap: .3rem; }
  .tl-room { display: none; }
}

/* progress bars */
.pbar { height: 9px; border-radius: 9px; background: var(--l0); overflow: hidden; }
.pbar.thin { height: 6px; }
.pbar-fill { height: 100%; width: var(--w); background: linear-gradient(90deg, var(--teal), color-mix(in srgb, var(--teal) 50%, var(--amber))); border-radius: 9px; animation: fillw .8s cubic-bezier(.2,.8,.2,1); }

/* ---------- week ---------- */
.wk-title { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.weekgrid { display: grid; grid-template-columns: 3rem repeat(7, minmax(0, 1fr)); gap: .45rem; }
.hours { position: relative; margin-top: 4.9rem; height: var(--hgt, 972px); }
.hr { position: absolute; top: var(--y); right: .2rem; font-size: .7rem; color: var(--muted); transform: translateY(-50%); }
.wday { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.wday.is-today { border-color: var(--teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 30%, transparent); }
.wday-head { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: .35rem; padding: .55rem .6rem .1rem; flex-wrap: wrap; }
.wday-head:focus-visible { outline: 2.5px solid var(--amber); }
.wday-head b { font-size: 1rem; }
.wday-head span { font-size: .75rem; color: var(--muted); }
.wday-head .mini { margin-left: auto; font-family: var(--mono); font-size: .72rem; padding: 0 .35rem; border-radius: 6px; background: var(--l0); color: var(--ink2); }
.wday-head .mini.good { background: var(--teal); color: var(--accent-ink); }
.wday-sub { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding: .2rem .5rem .5rem; border-bottom: 1px solid var(--line); min-height: 2.6rem; }
.wday-body { position: relative; height: var(--hgt); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(108px - 1px), var(--line) calc(108px - 1px) 108px); }
.wb { position: absolute; left: 4px; right: 4px; top: var(--top); height: var(--h); border-radius: 7px; padding: 2px 6px; overflow: hidden;
  background: color-mix(in srgb, var(--k) 16%, var(--card)); border-left: 3px solid var(--k); font-size: .72rem; line-height: 1.2; display: flex; flex-direction: column; }
.wb-t { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-m { font-size: .64rem; color: var(--ink2); }
.wb.k-class { background: var(--k-class); color: #fff; } .wb.k-class .wb-m { color: rgba(255,255,255,.8); }
[data-tone=dark] .wb.k-class { color: #0f1a1c; } [data-tone=dark] .wb.k-class .wb-m { color: rgba(15,26,28,.75); }
.wb.k-exam { background: var(--k-exam); color: #fff; }
.wday-list { display: none; }
.keyrow { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .8rem; color: var(--ink2); }
.key { display: inline-flex; align-items: center; gap: .35rem; text-transform: capitalize; }
.key::before { content: ''; width: 12px; height: 12px; border-radius: 4px; background: var(--k); }

/* ---------- stats ---------- */
.seg { display: inline-flex; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { font: inherit; font-size: .86rem; font-weight: 600; border: 0; background: transparent; color: var(--ink2); padding: .4rem .8rem; border-radius: 9px; cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--bg); }
.statshero, .overall { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.overall > div { flex: 1 1 260px; min-width: 0; }
.tiles { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.tiles.three { grid-template-columns: repeat(3, 1fr); margin-top: 1rem; }
.tile { background: var(--card2); border: 1px solid var(--line); border-radius: 14px; padding: .75rem .85rem; display: flex; flex-direction: column; gap: .1rem; }
.tile-ic { color: var(--amber); margin-bottom: .2rem; }
.tile-v { font-size: 1.55rem; line-height: 1.1; }
.tile-l { font-size: .8rem; color: var(--ink2); font-weight: 600; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .grid.faint { stroke-dasharray: 2 4; opacity: .6; }
.chart .axis { fill: var(--muted); font: 10.5px var(--mono); }
.chart .thresh { stroke: var(--amber); stroke-dasharray: 4 4; stroke-width: 1.3; }
.chart .thresh-l { fill: var(--amber); }
.chart .val { fill: var(--ink2); }
.chart .area { fill: color-mix(in srgb, var(--teal) 16%, transparent); }
.chart .line { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--card); stroke: var(--teal); stroke-width: 2; }
.chart .dot.good { fill: var(--teal); }
.chart .bar { fill: color-mix(in srgb, var(--teal) 55%, var(--l0)); transform-box: fill-box; transform-origin: bottom; animation: grow .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0ms); }
.chart .bar.good { fill: var(--teal); }
.chart.heat { max-width: var(--maxw, 100%); }
.chart .hm { stroke: color-mix(in srgb, var(--ink) 6%, transparent); }
.chart .hm.today { stroke: var(--amber); stroke-width: 2; }
.l-1 { fill: transparent; stroke-dasharray: 2 2; }
.hm.l-1 { fill: transparent; stroke: var(--line2); }
.hm.l0 { fill: var(--l0); } .hm.l1 { fill: var(--l1); } .hm.l2 { fill: var(--l2); } .hm.l3 { fill: var(--l3); } .hm.l4 { fill: var(--l4); }
.legend { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; color: var(--muted); }
.legend span { margin: 0 .3rem; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.l0 { background: var(--l0); } .sw.l1 { background: var(--l1); } .sw.l2 { background: var(--l2); } .sw.l3 { background: var(--l3); } .sw.l4 { background: var(--l4); }
.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.hb-top { display: flex; justify-content: space-between; gap: .6rem; font-size: .86rem; margin-bottom: .2rem; }
.hb-v { color: var(--muted); font-size: .78rem; }
.hb-track { height: 8px; border-radius: 9px; background: var(--l0); overflow: hidden; }
.hb-fill { height: 100%; width: var(--w); background: var(--l2); border-radius: 9px; animation: fillw .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
.hb-fill.good { background: var(--teal); }
.hb-fill.low { background: var(--amber); }

/* ---------- archive calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-h { text-align: center; font-size: .72rem; color: var(--muted); font-weight: 700; padding-bottom: .2rem; }
.cal-day { position: relative; aspect-ratio: 1; border-radius: 11px; border: 1px solid transparent; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: var(--l0); color: var(--ink); transition: transform .12s; padding: 0; min-height: 40px; }
.cal-day:hover { transform: translateY(-2px); }
.cal-n { font-weight: 650; font-size: .95rem; }
.cal-p { font-size: .64rem; opacity: .8; }
.cal-day.l1 { background: var(--l1); } .cal-day.l2 { background: var(--l2); }
.cal-day.l3 { background: var(--l3); color: #fff; } .cal-day.l4 { background: var(--l4); color: #fff; }
[data-tone=dark] .cal-day.l4 { color: #0c1716; }
.cal-day.off { background: transparent; border: 1px dashed var(--line2); color: var(--muted); }
.cal-day.today { outline: 2.5px solid var(--amber); outline-offset: 1px; }
.cal-day.sel { box-shadow: 0 0 0 3px var(--ink); }
.cal-flag { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.dd-top { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.note { white-space: pre-wrap; background: var(--card2); padding: .6rem .8rem; border-radius: 10px; }
.plain { margin: 0; padding-left: 1.1rem; }

/* ---------- plan ---------- */
.tabs { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: .55rem .85rem; color: var(--ink2); text-decoration: none; font-weight: 620; border-bottom: 2.5px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--amber); }
.stages { display: flex; flex-direction: column; gap: .7rem; }
.stage { padding: 0; overflow: hidden; }
.stage-head { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; cursor: pointer; }
.stage-head:focus-visible { outline: 2.5px solid var(--amber); outline-offset: -3px; }
.stage-dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--line2); flex: none; }
.stage.now .stage-dot { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 4px var(--teal-s); }
.stage.past .stage-dot { background: var(--line2); }
.stage-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.stage-pct { font-size: .85rem; color: var(--ink2); }
.chev { transition: transform .2s; color: var(--muted); }
.stage.open .chev { transform: rotate(180deg); }
.stage > .pbar { margin: 0 1.1rem; }
.stage.now { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); }
.stage.past { opacity: .82; }
.stage-body { padding: .8rem 1.1rem 1rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: 0 0 .7rem; font-size: .88rem; }
.facts dt { color: var(--muted); font-weight: 650; }
.facts dd { margin: 0; }
.skills { list-style: none; margin: 0; padding: 0; }
.skills li { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.skills li:last-child { border-bottom: 0; }
.sk-name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sk-name small { font-size: .76rem; }
.levels { display: flex; gap: .3rem; flex: none; }
.lv { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--line2); background: var(--card); font: 600 .8rem var(--mono); color: var(--muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.lv:hover { border-color: var(--teal); }
.lv.on { background: var(--teal); border-color: var(--teal); color: var(--accent-ink); animation: pop .3s ease; }
.lv.on + .lv.on { background: color-mix(in srgb, var(--teal) 70%, var(--navy)); border-color: transparent; }
.lv.on + .lv.on + .lv.on { background: var(--amber); }
.course-prog { display: flex; align-items: center; gap: .7rem; margin: .2rem 0 .3rem; }
.course-prog .pbar { flex: 1; }
.course.st-done { opacity: .75; } .course.st-dropped { opacity: .5; }
.course.st-active { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); }
.pipeline { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0; }
.pipe { display: flex; align-items: baseline; gap: .35rem; padding: .35rem .65rem; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.pipe b { font-size: 1rem; color: var(--ink2); }
.pipe.has { background: var(--teal-s); color: var(--teal); border-color: transparent; }
.pipe.has b { color: var(--teal); }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rows > li { border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .5rem; }
.rows > li:last-child { border-bottom: 0; }
.rowbtn { all: unset; box-sizing: border-box; flex: 1; display: flex; align-items: center; gap: .8rem; padding: .65rem .3rem; cursor: pointer; border-radius: 10px; min-width: 0; color: var(--ink); }
.rowbtn:hover { background: var(--card2); }
.rowbtn:focus-visible { outline: 2.5px solid var(--amber); }
.rowbtn.static { cursor: default; }
.rowbtn.static:hover { background: none; }
.rowbtn > .ic { color: var(--muted); }
.row-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.row-main small { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.status { font-size: .72rem; font-weight: 700; padding: .2rem .5rem; border-radius: 7px; background: var(--card2); color: var(--ink2); flex: none; min-width: 6.5rem; text-align: center; }
.s-applying, .s-researching { background: var(--amber-s); color: var(--amber); }
.s-applied, .s-interview { background: var(--navy-s); color: var(--navy); }
.s-offer { background: var(--green-s); color: var(--green); }
.s-rejected, .s-skipped { opacity: .6; }
.ev { gap: .6rem; padding-left: .2rem; }
.ev .rowbtn { border-left: 3px solid var(--k); padding-left: .6rem; border-radius: 0 10px 10px 0; }
.ev.done .row-main b { text-decoration: line-through; color: var(--muted); }
.ev-date { display: flex; flex-direction: column; align-items: center; min-width: 2.6rem; line-height: 1.05; }
.ev-date b { font-size: 1.2rem; }
.ev-date small { font-size: .66rem; color: var(--muted); text-transform: uppercase; }
details.card > summary { cursor: pointer; font-weight: 650; }
details.card[open] > summary { margin-bottom: .6rem; }

/* ---------- settings ---------- */
.formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .86rem; font-weight: 600; color: var(--ink2); min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field.inline { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: .6rem; }
.field input, .field select, .field textarea { font-weight: 450; color: var(--ink); width: 100%; }
.field.inline input { width: 20px; }
.hint { color: var(--muted); font-weight: 450; }
.err { color: var(--red); font-weight: 600; min-height: 0; }
.err:empty { display: none; }
.daypick { display: flex; flex-wrap: wrap; gap: .35rem; }
.daychip { position: relative; }
.daychip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.daychip span { display: inline-block; padding: .4rem .7rem; border-radius: 9px; border: 1.5px solid var(--line2); font-size: .84rem; font-weight: 600; color: var(--ink2); }
.daychip input:checked + span { background: var(--teal); border-color: var(--teal); color: var(--accent-ink); }
.daychip input:focus-visible + span { outline: 2.5px solid var(--amber); outline-offset: 2px; }
.rangewrap { display: flex; align-items: center; gap: .7rem; }
.rangewrap output { font-family: var(--mono); min-width: 3.5ch; }
.switch { display: flex; align-items: center; gap: .7rem; cursor: pointer; padding: .4rem 0; position: relative; }
.switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.sw-track { width: 44px; height: 26px; border-radius: 99px; background: var(--line2); position: relative; flex: none; transition: background .2s; }
.sw-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .sw-track { background: var(--teal); }
.switch input:checked + .sw-track::after { transform: translateX(18px); }
.switch input:focus-visible + .sw-track { outline: 2.5px solid var(--amber); outline-offset: 2px; }
.ttday { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.ttday:last-child { border-bottom: 0; }
.ttday h4 { margin: .2rem 0 .3rem; }
.danger-zone { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }

/* override editor */
.ovhead, .ovrow { display: grid; grid-template-columns: minmax(0, 2fr) 6.2rem 6.2rem minmax(0, 1fr) 38px; gap: .4rem; align-items: center; }
.ovhead { margin: .6rem 0 .3rem; font-weight: 650; }
.ovlist { display: flex; flex-direction: column; gap: .4rem; }
.ovrow input { width: 100%; }

/* ---------- modal & toasts ---------- */
.modal { border: 1px solid var(--line); border-radius: 20px; padding: 0; background: var(--card); color: var(--ink); width: min(520px, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); }
.modal.wide { width: min(720px, calc(100vw - 1.5rem)); }
.modal[open] { animation: rise .25s cubic-bezier(.2,.8,.2,1); }
.modal::backdrop { background: rgba(20, 26, 28, .45); backdrop-filter: blur(3px); }
.modal form { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.modal-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.2rem .6rem; }
.modal-head h2 { flex: 1; font-size: 1.15rem; }
.modal-body { padding: .3rem 1.2rem 1rem; overflow-y: auto; }
.modal-foot { display: flex; gap: .5rem; justify-content: flex-end; padding: .8rem 1.2rem; border-top: 1px solid var(--line); background: var(--card2); flex-wrap: wrap; }
.toasts { position: fixed; z-index: 100; right: 1.2rem; bottom: calc(1.4rem + 56px + .9rem); display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .6rem; background: var(--ink); color: var(--bg); padding: .65rem .7rem .65rem 1rem; border-radius: 13px; box-shadow: 0 14px 40px -12px rgba(0,0,0,.5); max-width: min(420px, calc(100vw - 2rem)); font-size: .9rem; animation: rise .25s cubic-bezier(.2,.8,.2,1); transition: opacity .25s, transform .25s; }
.toast.out { opacity: 0; transform: translateY(8px); }
.toast.alert { background: var(--teal); color: var(--accent-ink); }
.toast.warn { background: var(--amber); color: #1c1306; }
.toast-act { font: inherit; font-weight: 700; background: transparent; color: var(--amber); border: 0; cursor: pointer; padding: .2rem .4rem; }
.toast.alert .toast-act, .toast.warn .toast-act { color: inherit; text-decoration: underline; }
.toast-x { background: transparent; border: 0; color: inherit; opacity: .7; cursor: pointer; display: grid; place-items: center; padding: .25rem; }

/* ---------- responsive ---------- */

/* ---------- round 3: focus timer, quick add, search, lanes, projects, goals, review, journal ---------- */
.focus-body { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.focus-dial { --p: 0; width: 132px; height: 132px; border-radius: 50%; flex: none; display: grid; place-content: center; text-align: center; position: relative;
  background: conic-gradient(var(--teal) calc(var(--p) * 360deg), var(--l0) 0); }
.focus-dial::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--card); }
.focus-dial > * { position: relative; }
.focus-dial b { font-size: 1.7rem; letter-spacing: .02em; color: var(--ink); }
.focus-dial small { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.focuscard.break .focus-dial { background: conic-gradient(var(--amber) calc(var(--p) * 360deg), var(--l0) 0); }
.focuscard.on { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); }
.focus-ctl { flex: 1 1 200px; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.focus-ctl .field select { width: 100%; }
.focus-ctl .rowbtns { margin-top: 0; }
.seg.sm button { padding: .3rem .7rem; font-size: .8rem; }
.seg.wrap { display: flex; flex-wrap: wrap; align-self: flex-start; max-width: 100%; }
.seg.wrap small { color: inherit; opacity: .65; }
.focuspill { position: fixed; z-index: 45; right: 1.2rem; top: 1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 99px;
  background: var(--teal); color: var(--accent-ink); font: 600 .9rem var(--mono); text-decoration: none; box-shadow: var(--shadow); }
.focuspill.brk { background: var(--amber); }
.focuspill[hidden] { display: none; }

.fab { position: fixed; z-index: 44; right: 1.4rem; bottom: 1.4rem; width: 56px; height: 56px; border-radius: 18px; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--ink); color: var(--bg); box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); transition: transform .15s; }
.fab:hover { transform: translateY(-2px); }
.fab:active { transform: scale(.95); }
.fab .ic { color: var(--amber); }
.fab:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
[data-theme=black] .fab { background: #f2f2f0; color: #000; box-shadow: 0 0 0 1px #2c2c30; }
[data-theme=black] .fab .ic { color: #000; }

.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .2rem 0 .4rem; }
.qa-btn { display: flex; align-items: center; gap: .65rem; padding: .85rem .9rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card2);
  color: var(--ink); font: inherit; font-weight: 620; text-align: left; cursor: pointer; min-height: 52px; }
.qa-btn:hover { border-color: var(--teal); }
.qa-btn .ic { color: var(--teal); flex: none; }
.qa-btn:focus-visible { outline: 2.5px solid var(--amber); }

.searchbox { display: flex; flex-direction: column; gap: .6rem; }
.search.big { font-size: 1.05rem; padding-block: .85rem; }
.sresults { max-height: min(55vh, 460px); overflow-y: auto; }
.sresults .chip { min-width: 6.5rem; justify-content: center; }
.sresults .row-main { display: flex; flex-direction: column; min-width: 0; }
.sresults .row-main b, .sresults .row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: 12px; color: var(--ink2); font-weight: 560; cursor: pointer; }
.nav-btn:hover { background: var(--card2); color: var(--ink); }
.nav-btn:focus-visible { outline: 2.5px solid var(--amber); }
.nav-btn kbd, .keys kbd { margin-left: auto; font: 600 .72rem var(--mono); padding: .1rem .4rem; border-radius: 6px; border: 1px solid var(--line2); background: var(--card2); color: var(--ink2); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; margin: .4rem 0 .8rem; font-size: .88rem; align-items: center; }
.keys dt { text-align: right; }
.keys dd { margin: 0; color: var(--ink2); }

.yearrings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.yearring { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .3rem; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; }
.yearring:hover { border-color: var(--teal); }
.yearring small { font-size: .7rem; text-align: center; }
.lanes summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; flex-wrap: wrap; }
.lanes summary::-webkit-details-marker { display: none; }
.lanes summary b { margin-right: auto; }
.lanes[open] summary { margin-bottom: .6rem; }
.lanegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; margin: .6rem 0 1rem; }
.lanebtn { display: flex; flex-direction: column; gap: .2rem; text-align: left; padding: .7rem .8rem; border-radius: 13px; border: 1.5px solid var(--line); background: var(--card2); color: var(--ink); font: inherit; cursor: pointer; }
.lanebtn small { font-size: .76rem; color: var(--ink2); }
.lanebtn small.muted { color: var(--muted); }
.lanebtn:hover { border-color: var(--line2); }
.lanebtn.on { border-color: var(--teal); background: var(--teal-s); }
.lanebtn:focus-visible { outline: 2.5px solid var(--amber); }
.lanes h4 { margin: .2rem 0 .4rem; font-size: .9rem; }
.avoid { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--ink2); display: flex; flex-direction: column; gap: .2rem; }
.offlane { opacity: .55; }
.check.task.offlane .check-t span { text-decoration: none; }

.skills li.skill { flex-direction: column; align-items: stretch; gap: .35rem; }
.sk-row { display: flex; align-items: center; gap: .8rem; }
.sk-prog { display: flex; align-items: center; gap: .6rem; }
.sk-prog .pbar { flex: 1; min-width: 60px; }
.sk-prog .btn { padding: .2rem .55rem; }
.sk-body { padding: .3rem 0 .4rem .2rem; }
.skill.open { background: color-mix(in srgb, var(--card2) 70%, transparent); border-radius: 12px; padding-inline: .5rem; }
.steps { list-style: none; margin: .4rem 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.steps li { display: flex; align-items: center; gap: .6rem; min-height: 40px; font-size: .9rem; }
.steps li.done .step-t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line2); }
.steps .cbx { width: 24px; height: 24px; border-radius: 7px; }
.project .card-head h3 { font-size: 1rem; }
.project.st-done { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.project.st-doing { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.project.st-dropped { opacity: .5; }
.chip.lvl { min-width: 1.8rem; justify-content: center; font-family: var(--mono); }
.chip.lvl-B { background: var(--green-s); color: var(--green); border-color: transparent; }
.chip.lvl-I { background: var(--navy-s); color: var(--navy); border-color: transparent; }
.chip.lvl-A { background: var(--amber-s); color: var(--amber); border-color: transparent; }

.goal-top { display: flex; align-items: center; gap: .9rem; }
.goal-top h3 { font-size: 1rem; margin-bottom: .15rem; }
.goal-top p { margin: .1rem 0; }
.goal.reached { border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); }
.goal .rowbtns .btn { min-width: 40px; }
.grow { flex: 1; min-width: 0; }

.supp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.supp-pill { display: flex; align-items: center; gap: .6rem; text-align: left; padding: .65rem .75rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card2);
  color: var(--ink); font: inherit; cursor: pointer; min-height: 56px; min-width: 0; }
.supp-pill b { display: block; font-size: .88rem; }
.supp-pill small { display: block; font-size: .76rem; color: var(--muted); }
.supp-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--l0); color: var(--ink2); flex: none; }
.supp-pill.on { border-color: transparent; background: var(--green-s); }
.supp-pill.on .supp-ic { background: var(--green); color: var(--card); }
.supp-pill.on small { color: var(--green); }
.supp-pill.late { border-color: var(--red); }
.supp-pill.late small { color: var(--red); font-weight: 650; }
.supp-pill:disabled { opacity: .55; cursor: default; }
.supp-pill:focus-visible { outline: 2.5px solid var(--amber); }
.ico-inline { display: inline-flex; vertical-align: -2px; margin-right: .4rem; color: var(--amber); }

.cd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.cd-list li { display: flex; align-items: center; gap: .8rem; padding: .45rem .55rem; border-radius: 12px; background: var(--card2); }
.cd-list .row-main { display: flex; flex-direction: column; min-width: 0; }
.cd-n { display: flex; flex-direction: column; align-items: center; min-width: 3.2rem; line-height: 1; }
.cd-n b { font-size: 1.45rem; color: var(--navy); }
.cd-n small { font-size: .68rem; color: var(--muted); margin-top: .15rem; }
.cd-list li.warm .cd-n b { color: var(--amber); }
.cd-list li.hot { background: var(--red-s); }
.cd-list li.hot .cd-n b { color: var(--red); }

.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); flex: none; }
.rv-ring { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.rv-ring p { margin: .15rem 0; }
.mini { list-style: none; margin: .3rem 0 .6rem; padding: 0; font-size: .86rem; display: flex; flex-direction: column; gap: .2rem; }
.mini li { display: flex; gap: .4rem; align-items: center; }
.ok-t { color: var(--green); } .bad-t { color: var(--red); }
.rv-form textarea { width: 100%; }

.jlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.jitem { display: flex; gap: 1rem; text-decoration: none; color: var(--ink); align-items: flex-start; }
.jitem:hover { border-color: var(--teal); }
.j-date { display: flex; flex-direction: column; align-items: center; min-width: 3rem; line-height: 1.1; }
.j-date b { font-size: 1.5rem; color: var(--teal); }
.j-date small { font-size: .7rem; color: var(--muted); }
.j-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.j-text { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  .weekgrid { grid-template-columns: 2.6rem repeat(7, minmax(0, 1fr)); gap: .3rem; }
  .wb-m { display: none; }
}
@media (max-width: 900px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  body { font-size: 15px; }
  .side { display: none; }
  main { padding: 1rem .85rem calc(84px + env(safe-area-inset-bottom)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  .tab-i { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .35rem 0; color: var(--muted); text-decoration: none; font-size: .66rem; font-weight: 650; border-radius: 12px; }
  .tab-i.on { color: var(--ink); }
  .tab-i.on .ic { color: var(--teal); }
  .toasts { left: .8rem; right: .8rem; bottom: calc(140px + env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { max-width: none; }
  .hero { padding: 1rem; gap: 1rem; }
  .hero .ring { width: 104px; height: 104px; }
  .hero::after { display: none; }
  .now-next { padding-left: 0; border-left: 0; border-top: 1px dashed var(--line2); padding-top: .6rem; }
  /* week becomes a list of day cards */
  .weekgrid { grid-template-columns: minmax(0, 1fr); }
  .hours, .wday-body { display: none; }
  .wday-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: .4rem .6rem .6rem; gap: .25rem; }
  .wday-list li { display: grid; grid-template-columns: 6.6rem 1fr; gap: .5rem; font-size: .86rem; padding: .25rem .45rem; border-left: 3px solid var(--k, var(--line2)); border-radius: 0 7px 7px 0; background: color-mix(in srgb, var(--k, var(--line)) 8%, transparent); }
  .wday-list li:empty { display: none; }
  .wday-sub { border-bottom: 0; min-height: 0; }
  .weeknav .btn.ghost { padding-inline: .4rem; }
  .ovhead { display: none; }
  .ovrow { grid-template-columns: 1fr 1fr 38px; padding: .5rem; border: 1px solid var(--line); border-radius: 12px; }
  .ovrow .ov-title, .ovrow .ov-room { grid-column: 1 / 3; }
  .ovrow .ov-title { grid-row: 1; }
  .modal { max-height: calc(100vh - 1rem); }
  .tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .statshero { justify-content: center; }
  .statshero .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; }
  .tabs { flex-wrap: wrap; overflow: visible; gap: 0 .1rem; }
  .tabs a { padding: .5rem .65rem; }
  .banner { align-items: flex-start; flex-wrap: wrap; }
  .tiles.three .tile-v { font-size: 1.2rem; }
  .themebtn.mob { display: inline-flex; }
  .evlist li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); align-items: start; gap: .5rem; }
  .evlist .chip { min-width: 0; width: 100%; margin-top: 1px; }
  .banner > div { flex: 1 1 calc(100% - 2.6rem); }
  .banner > .btn { order: 3; margin-left: auto; }
}
@media (max-width: 420px) {
  .cal { gap: 3px; }
  .cal-day { border-radius: 8px; min-height: 36px; }
  .cal-p { display: none; }
  .status { min-width: 0; }
  .lv { width: 30px; height: 30px; }
  .skills li { flex-wrap: wrap; }
}

@media (max-width: 820px) {
  .fab { right: 1rem; bottom: calc(76px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 16px; }
  .focuspill { top: auto; right: auto; left: 1rem; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .icon-btn.mob { display: inline-grid; }
  .yearrings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus-dial { width: 116px; height: 116px; }
  .sresults .chip { min-width: 0; }
  main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .daynav .themebtn.mob span { display: none; }
  .daynav .themebtn.mob { padding: 0; width: 38px; height: 38px; justify-content: center; }
  .qa-grid { grid-template-columns: minmax(0, 1fr); }
  .supp-row { grid-template-columns: minmax(0, 1fr); }
  .focus-body { justify-content: center; }
  .sk-row { flex-wrap: wrap; }
  .sresults .rowbtn { flex-wrap: wrap; gap: .3rem .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media print {
  .side, .tabbar, .toasts, .fab, .focuspill { display: none; }
  body { background: #fff; }
}

/* =====================================================================
   Redesign layer (Oct 2026): calm surfaces, one accent, strict spacing.
   Spacing only from the 4/8/12/16/24/32/48 scale; card padding 24px (16px on phone);
   gaps >= 16px between blocks; line-height 1.5; sizes: body, small, heading.
   ===================================================================== */
body { font-size: 15px; line-height: 1.5; background: var(--bg); }
h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
h2 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; }
h4 { font-size: .87rem; font-weight: 700; margin: var(--s4) 0 var(--s2); color: var(--ink2); }
p { margin: var(--s1) 0; }
a { color: var(--accent); }
.small { font-size: .87rem; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
b, strong { font-weight: 700; }

/* shell + side panel */
.side { background: var(--rail); gap: var(--s5); padding: var(--s5) var(--s4) var(--s4); }
.brand-bg { fill: var(--accent); }
.brand-tick { stroke: var(--accent-ink); }
.nav { gap: var(--s1); }
.nav-i { min-height: 44px; padding: var(--s2) var(--s3); border-radius: var(--radius-s); color: var(--ink2); font-weight: 500; gap: var(--s3); }
.nav-i:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--ink); }
.nav-i.on, [data-theme=black] .nav-i.on { background: var(--soft); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.nav-i.on .ic { color: var(--accent); }
.nav-sep { display: block; height: 1px; background: var(--line); margin: var(--s2) var(--s3); }
.nav-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s2) var(--s3); border-radius: var(--radius-s); color: var(--muted); cursor: pointer; }
.nav-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.nav-btn:focus-visible { outline: 2.5px solid var(--accent); }
.hdrbar i::after { background: var(--accent); }
.sync::before { background: var(--ok); }
.sync[data-state=busy]::before { background: var(--warn); }
.sync[data-state=err]::before { background: var(--bad); }
.sync[data-state=err]::after { color: var(--bad); }
main { padding: var(--s6) var(--s6) var(--s7); }
.view { max-width: 1120px; gap: var(--s5); }

/* cards: flat, one border, generous padding, never nested */
.card { padding: var(--s5); border-radius: var(--radius); box-shadow: var(--shadow); border-color: var(--line); }
.card .card { box-shadow: none; }
.card-head { gap: var(--s3); margin-bottom: var(--s4); min-height: 32px; }
.card.accent { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.cards { gap: var(--s5); }
.col, .stack { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.viewhead { gap: var(--s3); min-height: 40px; }
.viewhead h1 { margin-right: auto; }
.eyebrow { letter-spacing: .08em; font-size: .75rem; }
.empty, .empty-t { color: var(--muted); }
.empty { border: 1px dashed var(--line2); padding: var(--s5); }
.empty-t { margin: var(--s2) 0 var(--s3); }
.notice { padding: var(--s4) var(--s5); border-radius: var(--radius); background: var(--soft); color: var(--ink); }
.ok-t { color: var(--ok); } .bad-t { color: var(--bad); }
.toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.toolbar .search { flex: 1 1 240px; max-width: 420px; }
.toolbar .wk-title { font-size: 1.15rem; min-width: 12ch; text-align: center; }
.tabbody { display: flex; flex-direction: column; gap: var(--s5); }

/* buttons + inputs */
.btn { min-height: 44px; padding: var(--s2) var(--s4); border-radius: var(--radius-s); font-weight: 600; font-size: .93rem; border-color: var(--line2); gap: var(--s2); }
.btn.sm { min-height: 36px; padding: var(--s1) var(--s3); font-size: .87rem; }
.btn:hover { border-color: var(--accent); }
.btn.primary, [data-theme=black] .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); color: var(--accent-ink); border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--soft); border-color: transparent; }
.btn.more { align-self: flex-start; margin-top: var(--s2); }
.icon-btn { min-width: 44px; min-height: 44px; }
.icon-btn.sm { min-width: 36px; min-height: 36px; }
input, select, textarea { min-height: 40px; border-color: var(--line2); border-radius: var(--radius-s); }
textarea { width: 100%; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
input[type=checkbox], input[type=range] { accent-color: var(--accent); }
.seg button.on, [data-theme=black] .seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line2); }
.seg button { min-height: 32px; }

/* chips: neutral by default; colour only for status */
.chip { padding: 2px var(--s2); font-size: .8rem; font-weight: 600; background: var(--rail); color: var(--ink2); border: 1px solid var(--line); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.soon, .chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.flame { background: var(--rail); color: var(--ink2); border-color: var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* tabs (year pages, calendar) */
.tabs { gap: var(--s1); border-bottom: 1px solid var(--line); }
.tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s4); font-weight: 600; color: var(--muted); border-bottom: 2.5px solid transparent; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }

/* lists */
.rows > li { min-height: 52px; }
.rowbtn { padding: var(--s3) var(--s2); gap: var(--s3); min-width: 0; }
.rowbtn:hover { background: var(--rail); }
.row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.row-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.row-main small { overflow: hidden; text-overflow: ellipsis; }
.rows.plainrows > li { min-height: 44px; padding: var(--s1) 0; }
.check { gap: var(--s3); padding: var(--s2) var(--s1); min-height: 52px; }
.cbx:hover { border-color: var(--accent); }
.cbx.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.check.done .check-t { color: var(--muted); }
.rowbtns { gap: var(--s2); margin-top: var(--s4); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: 0 0 var(--s4); }
.facts dt { color: var(--muted); font-weight: 600; } .facts dd { margin: 0; }

/* dashboard */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; }
.kpi { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s5); text-decoration: none; color: var(--ink); min-width: 0; border-left: 1px solid var(--line); }
.kpi:first-child { border-left: 0; }
.kpi:hover { background: var(--rail); }
.kpi-l { font-size: .87rem; color: var(--muted); font-weight: 600; }
.kpi-v { font-size: 1.6rem; font-weight: 700; font-family: var(--mono); line-height: 1.2; }
.kpi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yearlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.yearlist li + li { border-top: 1px solid var(--line); }
.yearrow { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s2); text-decoration: none; color: var(--ink); border-radius: var(--radius-s); min-height: 64px; }
.yearrow:hover { background: var(--rail); }
.yearrow .ring { flex: none; }
.yearrow .chev { color: var(--muted); }
.stats3, .stats4 { display: grid; gap: var(--s4); margin: 0 0 var(--s4); }
.stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats3 > div, .stats4 > div { min-width: 0; }
.stats3 dt, .stats4 dt { font-size: .87rem; color: var(--muted); font-weight: 600; }
.stats3 dd, .stats4 dd { margin: 0; font-size: 1.15rem; font-weight: 700; font-family: var(--mono); }
.chart { display: block; max-width: 100%; }
.legend { gap: var(--s2); }

/* year page */
.yearhead { display: flex; align-items: center; gap: var(--s5); }
.yearhead .ring { flex: none; }
.yh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.yh-main .stats4 { margin: 0; }
.semchip { cursor: pointer; min-height: 32px; font: inherit; font-size: .8rem; font-weight: 600; }
.semchip.now { background: var(--soft); color: var(--accent); border-color: var(--accent); }
.semchip:hover { border-color: var(--accent); }
.stage { padding: 0; }
.stage-head { padding: var(--s4) var(--s5); gap: var(--s4); min-height: 64px; }
.stage-head .chev { transition: transform .2s; color: var(--muted); }
.stage-head[aria-expanded=true] .chev { transform: rotate(180deg); }
.stage > .pbar { margin: 0 var(--s5); }
.stage-body { padding: var(--s4) var(--s5) var(--s5); }
.stage.now { border-color: var(--accent); }
.stage.past { opacity: 1; }
.planner { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); align-items: start; }
.pcol.drop { border-color: var(--accent); background: var(--soft); }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.pitem { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card); cursor: grab; flex-wrap: wrap; }
.pitem .row-main { flex: 1 1 140px; }
.pitem .sel { flex: 1 1 100%; }
.pgrip { color: var(--muted); }
.cards.grid2 { display: grid; }

/* calendar */
.cal { gap: var(--s1); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day.sel { box-shadow: inset 0 0 0 2px var(--ink); }
.cal-flag { background: var(--warn); }
.cal + .stats3 { margin-top: var(--s5); margin-bottom: 0; }
.wday.is-today .wday-head { color: var(--accent); }
.dd-top { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s4); }
.jitem { padding: var(--s3) var(--s2); border-radius: var(--radius-s); }
.jitem:hover { background: var(--rail); }
.jlist { gap: var(--s1); }
.j-date b { color: var(--accent); }
.j-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.report h4 { margin-top: var(--s5); }

/* today */
.hero { gap: var(--s5); padding: var(--s5); background: var(--card); }
.hero::after { display: none; }
.hero-txt { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; min-width: 0; }
.hero-txt .btn { margin-top: var(--s2); }
.banner { gap: var(--s3); padding: var(--s3) var(--s4); background: var(--rail); color: var(--ink); border: 1px solid var(--line); }
.banner .ic { color: var(--accent); }
.banner.sun { background: var(--soft); color: var(--ink); border-color: transparent; }
.banner.hot { background: var(--bad-soft); color: var(--ink); border-color: transparent; }
.banner.hot .ic { color: var(--bad); }
.nowcard { gap: var(--s5); }
.supp-pill { min-height: 56px; padding: var(--s3); gap: var(--s3); }
.supp-pill.on { background: var(--ok-soft); }
.supp-pill.on .supp-ic { background: var(--ok); }
.supp-pill.late { border-color: var(--bad); }
.ico-inline { color: var(--accent); }
.cd-list { gap: var(--s2); }
.cd-list li { padding: var(--s2) var(--s3); background: var(--rail); gap: var(--s3); }
.cd-n b { color: var(--ink); }
.cd-list li.warm .cd-n b { color: var(--warn); }
.cd-list li.hot { background: var(--bad-soft); }
.exprep { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.exprep h4 { margin: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.steps li { display: flex; align-items: center; gap: var(--s3); min-height: 44px; }
.steps li.done .step-t { color: var(--muted); text-decoration: line-through; }
.suggest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); min-width: min(520px, 80vw); }
.suggest li { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-s); }
.suggest li.first { border-color: var(--accent); background: var(--soft); }
.suggest .row-main b { white-space: normal; }
.yearsheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.yearsheet .btn { min-height: 56px; }
.themecard.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.themebtn .ic { color: var(--accent); }
.fab { background: var(--accent); color: var(--accent-ink); }
.fab .ic { color: var(--accent-ink); }
.focuspill { background: var(--accent); color: var(--accent-ink); }
.lanebtn.on { border-color: var(--accent); background: var(--soft); }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:nth-child(4) { border-left: 0; }
  .kpi:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .grid2, .cards.grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  main { padding: var(--s4) var(--s4) calc(150px + env(safe-area-inset-bottom)); }
  .view { gap: var(--s4); }
  .grid2, .col, .stack, .tabbody, .cards { gap: var(--s4); }
  .card { padding: var(--s4); }
  .stage-head { padding: var(--s3) var(--s4); }
  .stage > .pbar { margin: 0 var(--s4); }
  .stage-body { padding: var(--s3) var(--s4) var(--s4); }
  .tabbar { grid-template-columns: repeat(5, 1fr); }
  .tab-i { min-height: 52px; justify-content: center; font: inherit; font-size: .75rem; font-weight: 600; background: none; border: 0; cursor: pointer; }
  .tab-i.on .ic { color: var(--accent); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: var(--s4); border-left: 0; border-top: 1px solid var(--line); }
  .kpi:nth-child(-n+2) { border-top: 0; }
  .kpi:nth-child(even) { border-left: 1px solid var(--line); }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-v { font-size: 1.3rem; }
  .yearhead { flex-direction: column; align-items: stretch; text-align: left; }
  .yearhead .ring { align-self: center; }
  .stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .tabs a { padding: 0 var(--s3); }
  .toolbar .search { max-width: none; flex-basis: 100%; }
  .hero { flex-direction: column; align-items: stretch; }
  .hero-ring { align-self: center; }
  .suggest li { flex-wrap: wrap; }
  .suggest { min-width: 0; }
}
@media print {
  .side, .tabbar, .toasts, .fab, .focuspill, .noprint, .tabs, .toolbar, .viewhead { display: none !important; }
  body { background: #fff; color: #000; font-size: 12px; }
  main { padding: 0; }
  .card { box-shadow: none; border: 0; padding: 0; break-inside: avoid; }
  .view { max-width: none; }
}
.chart .hm.today { stroke: var(--accent); }
.card.kpis { padding: 0; }
.grid2 > .card, .grid2 > section { min-width: 0; }

/* goals + courses rows (redesign) */
ul.goals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3, 16px); }
ul.goals > li.goal { display: flex; align-items: center; gap: 16px; padding: 12px 0; border: 0; min-width: 0; }
.goal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.goal-main b { overflow-wrap: anywhere; }
.goal-btns { display: flex; align-items: center; gap: 4px; flex: none; }
.goal-btns .btn.sq, .goal-btns .icon-btn { min-width: 44px; min-height: 44px; }
ul.courses > li.course { display: block; padding: 12px 0; }
.course-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.course-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.course-name b { overflow-wrap: anywhere; }
.course .barrow { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.course .barrow .pbar { flex: 1; }
.course .barrow .btn { min-height: 36px; flex: none; }
@media (max-width: 640px) { ul.goals { grid-template-columns: 1fr; } }

/* live sync status */
.sync::after { content: none !important; }
.sync[data-state=live]::before { background: var(--ok); }
.sync[data-state=off]::before { background: var(--muted); }
.sync[data-state=off] { color: var(--warn); }
.mobsync { display: none; }
@media (max-width: 820px) {
  .mobsync:not([hidden]) { display: flex; position: fixed; left: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 30;
    background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
  .mobsync[data-state=live] { opacity: .85; }
}
@media print { .mobsync { display: none !important; } }

/* Sign-in gate: shown instead of the planner until the owner signs in. */
body.locked .shell, body.locked .tabbar, body.locked .fab, body.locked .toasts { display: none !important; }
.gate { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 1.25rem; overflow: hidden;
  background:
    radial-gradient(60% 55% at 12% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(50% 50% at 92% 96%, color-mix(in srgb, var(--ok) 12%, transparent), transparent 70%),
    var(--bg); }
.gate::before { content: ""; position: absolute; inset: -20%; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.gate.leaving { animation: gate-out .55s cubic-bezier(.4,0,.2,1) forwards; }
.gate-card { position: relative; width: min(392px, 100%); display: grid; gap: var(--s3); padding: var(--s6) var(--s5) var(--s5);
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 24px 60px -28px color-mix(in srgb, var(--ink) 35%, transparent);
  animation: gate-in .7s cubic-bezier(.2,.7,.2,1) both; }
.gate-brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.gate-brand svg { flex: none; }
.gate-kicker { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.gate-title { font-size: 1.85rem; line-height: 1.1; letter-spacing: -.03em; margin: 0; font-weight: 760; color: var(--ink); }
.gate-sub { margin: 0 0 var(--s2); color: var(--muted); font-size: .92rem; }
.gate-field { display: grid; gap: 6px; }
.gate-field span { font-size: .78rem; font-weight: 600; color: var(--ink2); }
.gate-card input { font: inherit; padding: .75rem .85rem; border: 1px solid var(--line2); border-radius: 12px; background: var(--card); color: var(--ink); min-width: 0; width: 100%; transition: border-color .15s, box-shadow .15s; }
.gate-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.gate-card .btn { justify-self: stretch; padding: .8rem 1rem; font-weight: 650; border-radius: 12px; margin-top: var(--s1); }
.gate-card .btn.primary:not(:disabled):hover { transform: translateY(-1px); }
.gate-card .btn.primary { transition: transform .12s, filter .15s; }
.gate-card .btn.primary:disabled { opacity: .6; cursor: progress; }
.gate-foot { margin: var(--s1) 0 0; font-size: .74rem; color: var(--muted); text-align: center; }
.gate-err { color: var(--bad); min-height: 1em; margin: 0; font-size: .85rem; }
.gate-card.shake { animation: gate-shake .42s; }
.gate-check { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto; }
@keyframes gate-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes gate-out { to { opacity: 0; transform: scale(1.02); filter: blur(4px); } }
@keyframes gate-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes gate-tick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.gate-check path { stroke-dasharray: 40; animation: gate-tick .5s .15s cubic-bezier(.4,0,.2,1) both; }


/* ---------- Google Calendar tab (calendar page) ---------- */
.gweek { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3); align-items: start; }
.gday { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.gday.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.gday-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: 0; font-size: .98rem; }
.gday-head .mono { color: var(--ink2); font-size: .8rem; }
.glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.gev { position: relative; display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px 10px 8px 12px; border-radius: 10px; background: var(--card2); border-left: 4px solid var(--gc, var(--muted)); min-width: 0; }
.gev-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.gev-time { font-size: .76rem; color: var(--ink2); white-space: nowrap; }
.gev-title { font-weight: 650; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; word-break: normal; }
.gev-cal { font-size: .72rem; color: var(--ink2); }
.gev-actions { display: flex; gap: 4px; justify-content: flex-end; margin-top: 2px; }
.gev-actions .icon-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
.gform { display: grid; gap: var(--s3); }
.gform label { display: grid; gap: 4px; font-size: .9rem; }
.gform input, .gform select, .gform textarea { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); width: 100%; box-sizing: border-box; }
.gform input[type=checkbox] { width: auto; }
.gadd-day { width: 100%; justify-content: center; }
/* Google colours per calendar: the stripe colour comes from data-cal, not from the timetable k-* classes. */
.gev[data-cal=Routine] { --gc: #7986cb; }
.gev[data-cal=Classes] { --gc: #7986cb; }
.gev[data-cal=Tests] { --gc: #e67c73; }
.gev[data-cal=Deadlines] { --gc: #f6bf26; }
.gev[data-cal=Courses] { --gc: #33b679; }
.gev[data-cal=Fitness] { --gc: #0b8043; }
.gev[data-cal=MEET] { --gc: #8e24aa; }
.gev[data-cal=Social] { --gc: #d50000; }
.gev[data-cal=Family] { --gc: #f4511e; }
.gev[data-cal=Finance] { --gc: #616161; }
@media (max-width: 600px) { .gweek { grid-template-columns: 1fr; } }

/* Google events in the Week grid (read-only here; edit them in the Google tab). */
.gmini { list-style: none; margin: 0; padding: .3rem .5rem .5rem; display: flex; flex-direction: column; gap: 3px; }
.gmini li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .4rem; font-size: .76rem; line-height: 1.25; padding: 3px 6px; border-left: 3px solid var(--gc, var(--muted)); border-radius: 0 6px 6px 0; background: var(--card2); min-width: 0; }
.gmini li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmini li .mono { color: var(--ink2); }
.gmini li[data-cal=Routine], .gmini li[data-cal=Classes] { --gc: #7986cb; }
.gmini li[data-cal=Tests] { --gc: #e67c73; }
.gmini li[data-cal=Deadlines] { --gc: #f6bf26; }
.gmini li[data-cal=Courses] { --gc: #33b679; }
.gmini li[data-cal=Fitness] { --gc: #0b8043; }
.gmini li[data-cal=MEET] { --gc: #8e24aa; }
.gmini li[data-cal=Social] { --gc: #d50000; }
.gmini li[data-cal=Family] { --gc: #f4511e; }
.gmini li[data-cal=Finance] { --gc: #616161; }