/* =====================================================================
   CACHE — the all-in-one second brain planner
   Notion × Mac: white pages with a cover banner and a blue Finder
   folder for the page icon, a serif page title, soft colour callouts
   and tags, cards as Mac windows with traffic lights, gallery cards
   for photos, and iOS widgets (a tall clock, a calendar, a message
   thread) on Home.
   Lora for titles, Inter for reading, Inter Tight for the clock,
   Cormorant Garamond for quiet italics and Pinyon Script for flourishes.
   ===================================================================== */
:root, [data-theme="cache"] {
  --paper: #FFFFFF; --paper2: #F7F7F5; --paper3: #EFEFED; --card: #FFFFFF; --card2: #F7F7F5; --kraft: #F1EEE9;
  --ink: #37352F; --ink2: #6B6964; --ink3: #8E8B85; --muted: #73716C; --hair: #E9E9E7; --line: rgb(55 53 47 / .14);
  --accent: #2383E2; --accent-ink: #1A6BBF; --on-accent: #FFFFFF; --blue: #2383E2; --rule: rgb(55 53 47 / .08); --margin: rgb(55 53 47 / .1);
  --t1: #D3E5EF; --t2: #F5E0E9; --t3: #FDECC8; --t4: #DBEDDB; --t5: #E8DEEE; --t6: #FADEC9; --on: #37352F;
  --c1: #2383E2; --c2: #D15796; --c3: #CB912F; --c4: #4F9768; --c5: #E3E2E0; --c6: #9065B0;
  --good: #2F7A4D; --warn: #8E5B0E; --bad: #C4362F;
  --cg: #F1F1EF; --cb: #F4EEEE; --co: #FBECDD; --cy: #FBF3DB; --cgr: #EDF3EC; --cbl: #E7F3F8; --cp: #F6F3F9; --cpk: #FAF1F5; --cr: #FDEBEC;
  --tg: #E3E2E0; --tb: #EEE0DA; --to: #FADEC9; --ty: #FDECC8; --tgr: #DBEDDB; --tbl: #D3E5EF; --tp: #E8DEEE; --tpk: #F5E0E9; --tr: #FFE2DD;
  --stripe-a: #F1F1EF; --stripe-b: #EAEAE7; --tape: transparent; --tape-pink: transparent; --tape-butter: transparent;
  --seal: #8DC6F7; --seal-ink: #1A5A99; --env: #F1F1EF;
  --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 14px 30px -16px rgb(0 0 0 / .28); --shadow-lift: 0 12px 32px -12px rgb(15 15 15 / .25), 0 0 0 1px rgb(15 15 15 / .05);
}
[data-theme="oat"] {
  --paper: #FBFAF6; --paper2: #F3F1EA; --paper3: #EAE7DE; --card: #FFFFFD; --card2: #F3F1EA; --kraft: #ECE6D9;
  --ink: #3A322B; --ink2: #675C52; --ink3: #8C8176; --muted: #6E645A; --hair: #E6E1D6; --line: rgb(58 50 43 / .15);
  --accent: #B4552F; --accent-ink: #96421F; --blue: #B4552F; --rule: rgb(58 50 43 / .08); --margin: rgb(58 50 43 / .1);
  --t1: #F2DCCB; --t2: #F2DCE2; --t3: #F4E7C9; --t4: #DCE6D2; --t5: #E6DDEA; --t6: #F6D9C2; --on: #3A322B;
  --c1: #B4552F; --c2: #4F7FA0; --c3: #B5862A; --c4: #5E8A5E; --c5: #E6E1D6; --c6: #8A6B9C;
  --cg: #F1EEE6; --cy: #F8EED6; --cbl: #E8EEF1; --cgr: #ECF1E6; --cpk: #F8EEEE; --cp: #F2EEF4; --co: #F9E9DA;
  --tg: #E6E1D6; --ty: #F4E7C9; --tbl: #DCE6EC; --tgr: #DCE6D2; --tpk: #F2DCE2; --tp: #E6DDEA; --to: #F6D9C2;
  --seal: #E9B49C; --seal-ink: #7A3418;
}
[data-theme="night"] {
  --paper: #191919; --paper2: #202020; --paper3: #2C2C2C; --card: #202020; --card2: #262626; --kraft: #2A2724;
  --ink: #E6E6E4; --ink2: #A9A8A4; --ink3: #7F7E7A; --muted: #A3A29E; --hair: #2F2F2F; --line: rgb(255 255 255 / .13);
  --accent: #529CCA; --accent-ink: #7DB7DE; --on-accent: #111111; --blue: #529CCA; --rule: rgb(255 255 255 / .07); --margin: rgb(255 255 255 / .08);
  --t1: #1E3A4C; --t2: #4E2C3C; --t3: #564328; --t4: #243D30; --t5: #3C2D49; --t6: #5C3B23; --on: #E6E6E4;
  --c1: #529CCA; --c2: #E28DB0; --c3: #E5C47A; --c4: #6FBF8E; --c5: #3A3A3A; --c6: #B79BE0; --good: #7FD09C; --warn: #F0C46B; --bad: #FF8E86;
  --cg: #252525; --cb: #2E2420; --co: #33261C; --cy: #312A1C; --cgr: #1F2B24; --cbl: #1C2A33; --cp: #2A2331; --cpk: #33232B; --cr: #362220;
  --tg: #373737; --tb: #4A3228; --to: #5C3B23; --ty: #564328; --tgr: #243D30; --tbl: #143A4E; --tp: #3C2D49; --tpk: #4E2C3C; --tr: #522E2A;
  --stripe-a: #222; --stripe-b: #1D1D1D; --seal: #3E6E8C; --seal-ink: #D6ECFB; --env: #262626;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 30px -14px rgb(0 0 0 / .7); --shadow-lift: 0 12px 32px -12px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06);
}
:root { --serif: "Lora", Georgia, "Times New Roman", serif; --script: "Pinyon Script", "Snell Roundhand", cursive; --hand: "Cormorant Garamond", "Lora", Georgia, serif; --sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --r: 8px; --side: 248px; color-scheme: light; }
[data-theme="night"] { color-scheme: dark; }
html { font-size: 16px; background: var(--paper); } html[data-text="0"] { font-size: 14.5px; } html[data-text="2"] { font-size: 17.5px; } html[data-text="3"] { font-size: 19px; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 .95rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 400; }
h1, h2 { font-family: var(--serif); letter-spacing: .005em; color: var(--ink); }
h2 { font-size: 1.7rem; line-height: 1; }
h3 { font: 650 1rem/1.25 var(--sans); }
h4 { font: 700 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: .9rem 0 .4rem; }
h1 em, h2 em { font: italic 500 1.45em/.8 var(--hand); text-transform: none; letter-spacing: 0; color: var(--accent); margin-left: .05em; }
h2 small { font: 500 .8rem var(--sans); text-transform: none; letter-spacing: 0; }
p { margin: .5rem 0; } a { color: inherit; text-underline-offset: 3px; } img { max-width: 100%; display: block; } small { font-size: .8rem; }
.num { font-variant-numeric: tabular-nums; } .small { font-size: .85rem; } .muted { color: var(--ink2); } .grow { flex: 1; } .right { margin-left: auto; } .center { text-align: center; }
.good { color: var(--good); } .bad { color: var(--bad); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: var(--t3); color: #22323C; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: currentColor; }
.boot { min-height: 100vh; display: grid; place-items: center; font: 600 4.5rem var(--serif); color: var(--accent); }
.kick { display: block; font: 700 .68rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lede { color: var(--ink2); max-width: 62ch; }
.amt { white-space: nowrap; font-variant-numeric: tabular-nums; } .hide-bal .amt { filter: blur(6px); }
kbd { font: 650 .75rem var(--sans); padding: .15rem .45rem; border-radius: 4px; background: var(--card2); border: 1px solid var(--hair); border-bottom-width: 2px; }
.calm *, .calm *::before, .calm *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
.empty-note { padding: 1.2rem; border: 1.5px dashed var(--hair); border-radius: var(--r); text-align: center; color: var(--ink2); display: grid; gap: .5rem; justify-items: center; }
.empty-note p { margin: 0; font: italic 500 1.9rem/1.1 var(--hand); color: var(--accent); }
.evergreen { display: flex; gap: .45rem; align-items: baseline; margin: .2rem 0 1rem; } .evergreen .ic { color: var(--accent); }
.error-text { color: var(--bad); font-weight: 650; }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .62rem 1.15rem; border-radius: 2px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent-ink); font: 700 .78rem/1.1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, transform .15s; }
.btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--accent); color: var(--on-accent); }
.btn.solid:hover { background: var(--accent-ink); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { border-color: var(--line); background: transparent; }
.btn.sm { padding: .42rem .75rem; font-size: .7rem; } .btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.danger { color: var(--bad); }
.icon-btn { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--ink2); flex: none; }
.icon-btn:hover { background: var(--card2); color: var(--ink); } .icon-btn.sm { width: 30px; height: 30px; } .icon-btn[disabled] { opacity: .3; cursor: default; }
.icon-btn:focus-visible { outline: 2.5px solid var(--accent); }
.link-plain { all: unset; cursor: pointer; } .link-plain:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .link-plain:focus-visible { outline: 2.5px solid var(--accent); }
.link { all: unset; cursor: pointer; color: var(--accent-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink2); font: 600 .78rem var(--sans); }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"], .chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip:focus-visible { outline: 2.5px solid var(--accent); }
.segs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 4px; background: var(--card2); border: 1px solid var(--hair); }
.segs button { all: unset; cursor: pointer; padding: .38rem .8rem; border-radius: 3px; font: 600 .8rem var(--sans); color: var(--ink2); }
.segs button[aria-pressed="true"] { background: var(--card); color: var(--accent-ink); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.segs button:focus-visible { outline: 2px solid var(--accent); }
.pill-btn { all: unset; cursor: pointer; padding: .22rem .7rem; border-radius: 999px; border: 1px solid var(--line); font: 700 .7rem var(--sans); letter-spacing: .04em; color: var(--ink2); background: var(--card); white-space: nowrap; }
.pill-btn.on { background: var(--t4); color: var(--on); border-color: transparent; }
.pill-btn:focus-visible { outline: 2px solid var(--accent); }
.input { width: 100%; font: 400 .95rem var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: .62rem .75rem; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.input.sm { padding: .32rem .45rem; font-size: .85rem; width: 5.5rem; }
textarea.input { resize: vertical; line-height: 1.5; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.big-in { font: 600 2rem var(--serif); }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.field { display: grid; gap: .3rem; } .field > span { font: 700 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1rem; } .form-grid .wide, .form-grid .field.wide { grid-column: 1 / -1; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); } .form-grid.four { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
.switch { display: flex; align-items: center; gap: .55rem; font-size: .9rem; cursor: pointer; } .switch input { accent-color: var(--accent); width: 18px; height: 18px; }
.rating, .scale { display: flex; gap: .3rem; } .rate { cursor: pointer; } .rate input { position: absolute; opacity: 0; }
.rate span[aria-hidden] { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; font-weight: 700; }
.rate input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .rate input:focus-visible + span { outline: 2.5px solid var(--accent); }
.when { display: flex; gap: .4rem; }
.meter { display: block; height: 8px; border-radius: 999px; background: var(--card2); overflow: hidden; flex: 1; min-width: 40px; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--c1); transition: width .5s; }
.meter.t-c2 i { background: var(--c2); } .meter.t-c3 i { background: var(--c3); } .meter.t-c4 i { background: var(--c4); } .meter.t-c5 i { background: var(--c6); }
.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 3px; background: var(--t1); color: var(--on); font: 700 .68rem var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0 0; } .tags span, .tg { all: unset; cursor: default; font: 600 .74rem var(--sans); color: var(--accent-ink); }
.tg { cursor: pointer; padding: .1rem .45rem; border-radius: 3px; background: color-mix(in srgb, var(--t1) 55%, transparent); color: var(--on); } .tg:hover, .tg.on { background: var(--accent); color: var(--on-accent); } .tg small { opacity: .7; } .tg:focus-visible { outline: 2px solid var(--accent); }
.hilite { display: inline-block; padding: .2rem .6rem; font: 800 .74rem/1.2 var(--sans); letter-spacing: .02em; color: #1F2A30; background: var(--t3); white-space: nowrap; border: 0; }
button.hilite { cursor: pointer; } .hilite.hl-blue { background: #C9DDF7; } .hilite.hl-pink { background: #F9BFD8; } .hilite.hl-butter { background: #F7E58C; }
[data-theme="night"] .hilite { color: #1B1B1B; }

/* ---------- Paper furniture: pins, clips, tape, seals, postmarks, stamps ---------- */
.pin { position: absolute; top: -18px; left: 50%; width: 30px; height: 40px; margin-left: -15px; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 1px rgb(0 0 0 / .18)); }
.pin-shadow { fill: rgb(0 0 0 / .12); } .pin-needle { stroke: #8D959B; stroke-width: 1.6; stroke-linecap: round; } .pin-body { fill: #B9C2C8; } .pin-top { fill: #D7DDE1; } .pin-shine { stroke: #fff; stroke-width: 1.6; fill: none; stroke-linecap: round; opacity: .9; }
.binder { position: absolute; top: -26px; left: 22px; width: 40px; height: 44px; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .2)); }
.bd-wire { fill: none; stroke: #A3ABB1; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .bd-body { fill: #4A5258; } .bd-lip { fill: #6B747A; }
.tape { position: absolute; z-index: 3; width: 92px; height: 26px; top: -11px; left: -16px; transform: rotate(-32deg); background: var(--tape); pointer-events: none; box-shadow: 0 1px 1px rgb(0 0 0 / .05);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0), repeating-linear-gradient(transparent 0 3px, #000 3px 6px); mask: linear-gradient(#000 0 0); }
.tape.tp-pink { background: var(--tape-pink); } .tape.tp-butter { background: var(--tape-butter); }
.wax { position: relative; display: inline-grid; place-items: center; width: 74px; height: 74px; pointer-events: none; }
.wax svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .22)); }
.wax path { fill: var(--seal); } .wax circle { fill: none; stroke: color-mix(in srgb, var(--seal-ink) 35%, transparent); stroke-width: 2.5; }
.wax b { position: relative; font: italic 500 2.2rem/1 var(--hand); color: var(--seal-ink); }
.postmark { position: relative; display: inline-grid; place-items: center; width: 116px; height: 116px; color: color-mix(in srgb, var(--accent) 70%, transparent); pointer-events: none; }
.postmark svg { position: absolute; inset: 0; width: 100%; height: 100%; } .postmark circle { fill: none; stroke: currentColor; stroke-width: 2; }
.postmark text { font: 700 8.6px var(--sans); letter-spacing: 2.6px; fill: currentColor; } .postmark b { position: relative; font: 600 1.35rem var(--serif); color: currentColor; }
.postmark::after { content: ""; position: absolute; left: 76%; top: 34%; width: 110px; height: 34px; background: repeating-radial-gradient(circle at 0 50%, transparent 0 7px, currentColor 7px 8.5px, transparent 8.5px 14px); -webkit-mask: linear-gradient(90deg, #000, transparent); mask: linear-gradient(90deg, #000, transparent); opacity: .6; }
.perf { -webkit-mask: radial-gradient(circle 5px at 50% 50%, #000 97%, #0000) -5px -5px / 13px 13px round, linear-gradient(#000 0 0) 50% / calc(100% - 13px) calc(100% - 13px) no-repeat; mask: radial-gradient(circle 5px at 50% 50%, #000 97%, #0000) -5px -5px / 13px 13px round, linear-gradient(#000 0 0) 50% / calc(100% - 13px) calc(100% - 13px) no-repeat; }
.stamp-no { flex: none; display: grid; place-items: center; align-content: center; width: 84px; height: 98px; padding: 12px; background: var(--card); color: var(--accent-ink); transform: rotate(-4deg); filter: drop-shadow(0 6px 10px rgb(34 50 60 / .18));
  -webkit-mask: radial-gradient(circle 5px at 50% 50%, #000 97%, #0000) -5px -5px / 13px 13px round, linear-gradient(#000 0 0) 50% / calc(100% - 13px) calc(100% - 13px) no-repeat; mask: radial-gradient(circle 5px at 50% 50%, #000 97%, #0000) -5px -5px / 13px 13px round, linear-gradient(#000 0 0) 50% / calc(100% - 13px) calc(100% - 13px) no-repeat;
  background-image: linear-gradient(var(--card), var(--card)), linear-gradient(var(--t1), var(--t1)); background-clip: content-box, padding-box; }
.stamp-no b { font: 600 2.6rem/1 var(--serif); } .stamp-no small { font: 700 .55rem var(--sans); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- Cards and paper ---------- */
.card { position: relative; background: var(--card); border-radius: var(--r); padding: 1.25rem 1.3rem; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; flex-wrap: wrap; }
.card-head h2 .ic { color: var(--accent); }
.card.lined { background-color: var(--card); background-image: linear-gradient(90deg, transparent 2.1rem, var(--margin) 2.1rem, var(--margin) calc(2.1rem + 1px), transparent calc(2.1rem + 1px)), repeating-linear-gradient(transparent 0 27px, var(--rule) 27px 28px); background-position: 0 0, 0 3.6rem; padding-left: 2.8rem; }
.card.stamped { -webkit-mask: radial-gradient(circle 5px at 50% 50%, #000 97%, #0000) -5px -5px / 13px 13px round, linear-gradient(#000 0 0) 50% / calc(100% - 13px) calc(100% - 13px) no-repeat; mask: radial-gradient(circle 5px at 50% 50%, #000 97%, #0000) -5px -5px / 13px 13px round, linear-gradient(#000 0 0) 50% / calc(100% - 13px) calc(100% - 13px) no-repeat; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; }
.two-col > *, .three-col > * { min-width: 0; }
.tab-body > .card, .tab-body > section.card { margin-bottom: 1.4rem; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2.2rem 0 1rem; } .sec-head h2 { font-size: 2.3rem; }
.okr-bar, .wk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.1rem; }
.wk-bar b { font: 600 1.5rem var(--serif); color: var(--ink); }
.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rows li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px dashed var(--hair); flex-wrap: wrap; }
.rows li:last-child { border-bottom: 0; } .r-t { flex: 1; min-width: 0; display: grid; } .r-t small { color: var(--muted); }
.rows li.tot { font-weight: 700; border-top: 1.5px solid var(--line); border-bottom: 0; justify-content: space-between; }
.take { margin: .3rem 0; padding-left: 1.1rem; display: grid; gap: .35rem; } .take li::marker { color: var(--accent); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; } .checks.two { grid-template-columns: 1fr 1fr; }
.cb { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: flex-start; gap: .6rem; width: 100%; padding: .3rem .2rem; font-size: .9rem; border-radius: 3px; }
.cb > .ic { flex: none; width: 20px; height: 20px; padding: 3px; border: 1.5px solid var(--ink2); border-radius: 3px; color: transparent; margin-top: 1px; }
.cb.on > .ic { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .cb.on span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent); }
.cb:hover > .ic { border-color: var(--accent); } .cb:focus-visible { outline: 2px solid var(--accent); }
.reset-row { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; }

/* ---------- Tickets (stat cards with perforated ends) ---------- */
.tickets { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.ticket { position: relative; display: grid; gap: .25rem; padding: 1rem 1.1rem; background: var(--card); box-shadow: var(--shadow); border-left: 5px solid var(--c1);
  -webkit-mask: radial-gradient(circle 9px at 100% 50%, #0000 97%, #000); mask: radial-gradient(circle 9px at 100% 50%, #0000 97%, #000); }
.ticket b { font: 600 2rem/1 var(--serif); color: var(--ink); } .ticket small { color: var(--muted); }
.ticket.c2 { border-color: var(--c2); } .ticket.c3 { border-color: var(--c3); } .ticket.c4 { border-color: var(--c4); } .ticket.bad { border-color: var(--bad); }
.tickets.small-t { grid-template-columns: 1fr 1fr; margin-bottom: .8rem; } .tickets.small-t .ticket b { font-size: 1.6rem; }

/* ---------- App shell: sidebar notebook, top bar, drawer, tab bar ---------- */
.demo-band { position: relative; z-index: 60; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; padding: .45rem 1rem; background: var(--ink); color: var(--paper); font-size: .82rem; text-align: center; }
.demo-band .demo-cta { margin-left: .5rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; color: inherit; background: none; border: 0; padding: 0; text-transform: none; letter-spacing: 0; font-size: inherit; }
.side { display: none; }
@media (min-width: 1101px) {
  body.with-side .side { position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 40; display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem .8rem 1rem 1.1rem; overflow-y: auto; scrollbar-width: thin;
    background: var(--card); border-right: 1px solid var(--hair); }
  body.with-side.is-demo .side { top: 34px; }
  body.with-side .main-col { margin-left: var(--side); }
  body.with-side .tb-brand, body.with-side .menu-btn { display: none !important; }
}
.side-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); padding: .2rem 0 .4rem; }
.logo { display: grid; place-items: center; width: 44px; height: 52px; flex: none; background: var(--accent); color: var(--on-accent); font: italic 500 1.9rem/1 var(--hand);
  -webkit-mask: radial-gradient(circle 3.5px at 50% 50%, #000 97%, #0000) -3.5px -3.5px / 9px 9px round, linear-gradient(#000 0 0) 50% / calc(100% - 9px) calc(100% - 9px) no-repeat; mask: radial-gradient(circle 3.5px at 50% 50%, #000 97%, #0000) -3.5px -3.5px / 9px 9px round, linear-gradient(#000 0 0) 50% / calc(100% - 9px) calc(100% - 9px) no-repeat; }
.logo .spk { display: none; } .logo::after { content: "C"; }
.side-brand b { display: block; font: 600 1.75rem/1 var(--serif); letter-spacing: .04em; color: var(--ink); } .side-brand small { display: block; font: italic 500 1.15rem/1.1 var(--hand); color: var(--muted); }
.side-dump { display: flex; align-items: center; gap: .3rem; padding: .25rem .25rem .25rem .7rem; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }
.side-dump input { all: unset; flex: 1; min-width: 0; font-size: .86rem; color: var(--ink); } .side-dump input::placeholder { color: var(--muted); }
.sd-go { all: unset; cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 2px; background: var(--accent); color: var(--on-accent); } .sd-go .ic { width: 15px; height: 15px; } .sd-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-nav, .side-foot { display: grid; gap: 0; } .side-foot { margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--hair); }
.side-link { display: flex; align-items: center; gap: .65rem; padding: .44rem .55rem; border-radius: 3px; text-decoration: none; color: var(--ink2); font-size: .88rem; font-weight: 550; }
.side-link .ic { width: 17px; height: 17px; color: var(--muted); } .side-link span { flex: 1; min-width: 0; }
.sl-n { font: 600 .95rem var(--serif); color: var(--muted); }
.side-link:hover { background: var(--card2); color: var(--ink); }
.side-link[aria-current="page"] { background: color-mix(in srgb, var(--t1) 70%, var(--card)); color: var(--ink); font-weight: 700; } .side-link[aria-current="page"] .ic, .side-link[aria-current="page"] .sl-n { color: var(--accent-ink); }
[data-theme="night"] .side-link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 22%, var(--card)); }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .8rem; padding: .5rem clamp(.8rem, 2.5vw, 2.2rem); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair); }
.hubnav { display: none; }
.tb-brand { text-decoration: none; }
.wordmark { display: inline-flex; align-items: center; gap: .1em; font: 600 1.8rem/1 var(--serif); letter-spacing: .05em; color: var(--ink); }
.wm-ring { display: none; } .wordmark.big { font-size: clamp(3.4rem, 8vw, 6rem); }
.tb-tools { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.search { position: relative; display: flex; align-items: center; gap: .4rem; width: 240px; padding: .42rem .7rem; border-radius: 3px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.search input { all: unset; flex: 1; min-width: 0; font-size: .88rem; color: var(--ink); } .search input::placeholder { color: var(--muted); }
.search:focus-within { border-color: var(--accent); }
.search-res { position: absolute; top: calc(100% + 6px); right: 0; width: min(380px, 90vw); display: none; padding: .4rem; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-lift); z-index: 70; }
.search-res.on { display: grid; gap: 2px; } .search-res button { all: unset; cursor: pointer; display: flex; gap: .6rem; align-items: center; padding: .5rem .55rem; border-radius: 3px; font-size: .88rem; } .search-res button:hover, .search-res button:focus-visible { background: var(--card2); } .search-res p { margin: .4rem .5rem; }
.tb-btn { all: unset; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 3px; border: 1px solid var(--line); color: var(--ink2); background: var(--card); }
.tb-btn:hover { border-color: var(--accent); color: var(--accent-ink); } .tb-btn[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .tb-btn:focus-visible { outline: 2.5px solid var(--accent); }
.menu-btn { display: grid; }
.drawer { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); z-index: 90; background: var(--card); transform: translateX(-105%); transition: transform .25s; display: flex; flex-direction: column; padding: 1rem; overflow-y: auto; box-shadow: var(--shadow-lift); }
.nav-on .drawer { transform: none; } .scrim { position: fixed; inset: 0; z-index: 80; background: rgb(0 0 0 / .35); display: none; } .nav-on .scrim { display: block; }
.dr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.drawer nav { display: grid; } .dr-link { display: flex; align-items: center; gap: .7rem; padding: .62rem .55rem; text-decoration: none; color: var(--ink); border-bottom: 1px dashed var(--hair); font-weight: 550; } .dr-link .ic { color: var(--accent); } .dr-link[aria-current="page"] { color: var(--accent-ink); font-weight: 800; }
.dr-foot { display: flex; gap: 1rem; padding-top: 1rem; } .dr-foot a { display: flex; gap: .4rem; align-items: center; color: var(--ink2); text-decoration: none; }
.tabbar { display: none; }
main.hub { padding: clamp(1.2rem, 3vw, 2.4rem) clamp(1rem, 3vw, 2.6rem) 4rem; max-width: 1380px; margin: 0 auto; }

/* ---------- Hub header and index tabs ---------- */
.hub-head { display: flex; align-items: flex-start; gap: 1.6rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.hh-text { flex: 1; min-width: 260px; }
.hh-kick { display: inline-block; padding: .22rem .65rem; margin-bottom: .7rem; font: 800 .72rem/1.2 var(--sans); letter-spacing: .04em; color: #1F2A30; background: var(--t3); transform: rotate(-1.2deg); }
[data-theme="night"] .hh-kick { color: #1B1B1B; }
.hh-title { font: 600 clamp(2.6rem, 5.4vw, 4.6rem)/.95 var(--serif); color: var(--ink); }
.hh-title em { font-size: 1.3em; line-height: .6; }
.hh-lede { max-width: 64ch; color: var(--ink2); margin-top: 1.3rem; }
.hh-actions { display: flex; gap: .5rem; align-self: flex-end; }
.ftabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.6rem; border-bottom: 2px solid var(--accent); padding-left: .6rem; }
.ftab { position: relative; padding: .55rem 1.05rem .5rem; margin-bottom: -2px; text-decoration: none; color: var(--ink2); font: 700 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; background: var(--card2); border: 1px solid var(--hair); border-bottom: 0; border-radius: 8px 8px 0 0; }
.ftab:hover { color: var(--ink); background: var(--card); }
.ftab[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ftab:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* ---------- Photos: drop zone, polaroid, story frame, masonry ---------- */
.pdrop { display: grid; place-items: center; align-content: center; gap: .3rem; min-height: 150px; padding: 1rem; text-align: center; cursor: pointer; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--t1) 25%, var(--card)); color: var(--accent-ink); }
.pdrop:hover, .pdrop.drag { background: color-mix(in srgb, var(--t1) 55%, var(--card)); } .pdrop.busy { opacity: .6; } .pdrop:focus-within { outline: 2.5px solid var(--accent); }
.pdrop b { font: 700 .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase; } .pdrop small { color: var(--ink2); font-size: .78rem; } .pd-ic .ic { width: 26px; height: 26px; }
.polaroid { position: relative; margin: 0; padding: 10px 10px 0; background: #FDFCF9; box-shadow: var(--shadow); transform: rotate(var(--tilt, -2deg)); color: #2B2B2B; }
[data-theme="night"] .polaroid { background: #EFEBE3; }
.pol-img { aspect-ratio: 1 / 1.05; overflow: hidden; background: #E8E5DE; display: grid; }
.pol-img img { width: 100%; height: 100%; object-fit: cover; } .pol-img .pdrop { min-height: 0; height: 100%; border: 0; border-radius: 0; }
.pol-open { all: unset; cursor: zoom-in; display: block; width: 100%; height: 100%; } .pol-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.polaroid figcaption { padding: .55rem .2rem .7rem; text-align: center; font: italic 500 1.35rem/1.1 var(--hand); color: #3B4A52; min-height: 2.6rem; }
.polaroid figcaption small { display: block; font: 700 .6rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6E777C; margin-top: .15rem; }
.pol-edit, .pol-change { position: absolute; right: 6px; bottom: 6px; background: var(--card); } .pol-change { right: 12px; bottom: 54px; }
.cert-empty, .c-av.big { display: grid; place-items: center; width: 100%; height: 100%; color: #8C979D; } .cert-empty .ic { width: 42px; height: 42px; }
.story { position: relative; margin: 0; aspect-ratio: 9 / 15; border-radius: 26px; overflow: hidden; background: #8D959B; box-shadow: var(--shadow-lift); transform: rotate(-2deg); }
.story .st-img, .story .st-img > .pol-open, .story .st-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story .st-img .pdrop { position: absolute; inset: 0; border-radius: 0; }
.st-bars { position: absolute; z-index: 2; top: 14px; left: 16px; right: 16px; display: flex; gap: 6px; pointer-events: none; }
.st-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .45); } .st-bars i.on { background: #fff; }
.st-dot { position: absolute; z-index: 2; top: 28px; left: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); border: 2px solid rgb(255 255 255 / .7); pointer-events: none; }
.st-foot { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: .6rem; color: #fff; pointer-events: none; } .st-foot span { flex: 1; height: 30px; border: 1.5px solid rgb(255 255 255 / .85); border-radius: 999px; } .st-foot .ic { width: 22px; height: 22px; }
.story .tape.st-tape { top: 18px; left: -24px; z-index: 4; }
.masonry { columns: 4 200px; column-gap: 1rem; }
.masonry.small-m { columns: 3 140px; column-gap: .7rem; }
.m-tile { break-inside: avoid; margin: 0 0 1rem; padding: 8px 8px 0; background: #FDFCF9; box-shadow: var(--shadow); display: block; color: #2B2B2B; }
[data-theme="night"] .m-tile { background: #EFEBE3; }
.m-tile:nth-child(3n+1) { transform: rotate(-1deg); } .m-tile:nth-child(3n+2) { transform: rotate(.8deg); }
.m-tile img { width: 100%; height: auto; display: block; } .m-tile figcaption { padding: .45rem .2rem .55rem; font: italic 500 1.25rem/1.1 var(--hand); color: #3B4A52; text-align: center; } .m-tile figcaption small { display: block; font: 700 .6rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6E777C; }
.m-tile figcaption .link-plain { display: block; }
.small-m .m-tile { padding: 5px 5px 5px; margin-bottom: .7rem; }
.m-add { break-inside: avoid; margin-bottom: 1rem; min-height: 160px; }

/* ---------- Home ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin: .4rem 0 1.4rem; }
.desk { position: relative; height: clamp(330px, 34vw, 440px); }
.envelope { position: absolute; left: 0; top: 10%; width: 74%; height: 70%; background: var(--env); box-shadow: var(--shadow); transform: rotate(-3deg);
  background-image: radial-gradient(rgb(0 0 0 / .03) 1px, transparent 1px); background-size: 4px 4px; }
.env-flap { position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(0 0 0 / .08) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent calc(50% - 1px), rgb(0 0 0 / .08) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.postcard { position: absolute; right: 2%; top: 14%; width: 40%; height: 74%; background: #F6EFDC; box-shadow: var(--shadow); transform: rotate(2.5deg); padding: 14px; display: grid; align-content: start; gap: 16px;
  background-image: radial-gradient(rgb(120 100 60 / .05) 1px, transparent 1px); background-size: 3px 3px; }
[data-theme="night"] .postcard { background: #E8E0CC; }
.pc-stamp { justify-self: end; display: grid; place-items: center; width: 64px; height: 74px; border: 1.5px solid #2B3D63; font: 800 .55rem/1.35 "Courier New", monospace; text-transform: uppercase; text-align: center; color: #2B3D63; }
.pc-line { display: block; height: 1px; margin-top: 20px; border-top: 2px dotted #2B3D63; opacity: .55; width: 80%; justify-self: end; }
.vibe-pol { position: absolute !important; left: 16%; top: 4%; width: 52%; z-index: 2; }
.vibe-pol .pol-img { aspect-ratio: 1 / 1.08; } .vibe-pol .binder { left: 14%; }
.vibe-seal { position: absolute; left: 62%; bottom: 0; z-index: 3; width: 92px; height: 92px; } .vibe-seal b { font-size: 2.8rem; }
.vibe-change { position: absolute; left: 2%; bottom: 4%; z-index: 4; background: var(--card); }
.hero-text { position: relative; z-index: 1; }
.hello { font: 600 clamp(2.8rem, 5.6vw, 5rem)/.95 var(--serif); color: var(--ink); }
.hello em { display: inline-block; font: italic 500 1.5em/.7 var(--hand); color: var(--accent); text-transform: none; transform: translateY(.06em); }
.clock-line { margin: 1rem 0 .5rem; font-size: 1.05rem; } .clock-line b { font-weight: 650; }
.clock-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.year-bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3rem .8rem; max-width: 460px; margin-bottom: 1.2rem; } .year-bar small { grid-column: 1 / -1; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-pm { position: absolute; right: -1%; top: -46px; transform: rotate(12deg) scale(.85); opacity: .5; }
.nudges { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.6rem; }
.nudges a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; background: var(--card); box-shadow: var(--shadow); text-decoration: none; font-size: .86rem; font-weight: 600; border-left: 3px solid var(--accent); }
.nudges a .ic { color: var(--accent); } .nudges a:hover { box-shadow: var(--shadow-lift); }
.home-row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.focus-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.fc h3 { display: flex; align-items: center; gap: .4rem; font: 700 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .5rem; height: 28px; } .fc h3 small { margin-left: auto; letter-spacing: 0; }
.fc > .btn { margin-top: .5rem; }
.meets { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.meets li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .45rem .55rem; background: color-mix(in srgb, var(--t1) 40%, var(--card)); border-left: 3px solid var(--c1); font-size: .88rem; }
.meets li.tn-blush { background: color-mix(in srgb, var(--t2) 40%, var(--card)); border-color: var(--c2); } .meets li.tn-butter { background: color-mix(in srgb, var(--t3) 45%, var(--card)); border-color: var(--c3); } .meets li.tn-sage { background: color-mix(in srgb, var(--t4) 45%, var(--card)); border-color: var(--c4); } .meets li.tn-lilac { background: color-mix(in srgb, var(--t5) 45%, var(--card)); border-color: var(--c6); }
.mt-at { font: 700 .72rem var(--sans); color: var(--ink2); white-space: nowrap; }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.task { display: flex; align-items: flex-start; gap: .55rem; padding: .32rem 0; }
.tick { all: unset; cursor: pointer; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--ink2); border-radius: 50%; color: transparent; }
.tick .ic { width: 12px; height: 12px; } .tick:hover { border-color: var(--accent); color: var(--accent); } .tick:focus-visible { outline: 2.5px solid var(--accent); }
.task.done .tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .task.done .task-t > .link-plain { color: var(--muted); text-decoration: line-through; }
.task.pr-high .tick { border-color: var(--c2); }
.task-t { flex: 1; min-width: 0; display: grid; font-size: .9rem; } .task-t small { color: var(--muted); display: flex; gap: .3rem; align-items: center; font-size: .74rem; } .task-t small .ic { width: 12px; height: 12px; color: var(--c2); }
.prio { font: 800 .8rem var(--sans); color: var(--c2); }
.tasks.top { counter-reset: t; } .tasks.top .task::before { counter-increment: t; content: counter(t); font: italic 500 1.6rem/.8 var(--hand); color: var(--accent); width: 1rem; }
.habits { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.hab { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .5rem; width: 100%; padding: .34rem .5rem; border-radius: 3px; border: 1px solid var(--hair); font-size: .84rem; background: var(--card); }
.hab .ic { color: var(--muted); } .hab span { flex: 1; } .hab small { color: var(--muted); font-size: .72rem; }
.hab.on { background: color-mix(in srgb, var(--t4) 70%, var(--card)); border-color: transparent; } .hab.on .ic { color: var(--good); } .hab:focus-visible { outline: 2px solid var(--accent); }
.inbox-card { background: color-mix(in srgb, var(--t3) 28%, var(--card)); }
.cap-form { display: flex; gap: .4rem; margin-bottom: .8rem; } .cap-form .btn { padding: .5rem .7rem; }
.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.caps li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .55rem; align-items: start; padding: .5rem .55rem; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.cap-k { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--t1); color: var(--on); } .cap-k .ic { width: 14px; height: 14px; } .cap-k.k-task { background: var(--t4); } .cap-k.k-link { background: var(--t5); }
.cap-t { font-size: .88rem; overflow-wrap: anywhere; } .cap-t a { color: var(--accent-ink); }
.cap-sort { grid-column: 2; display: flex; gap: .1rem; }
.cap-hint { margin-top: .7rem; }
.metrics { margin-top: .6rem; }
.metric-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.6rem; align-items: start; }
.m-heat { grid-column: 1 / -1; }
.heat-wrap { overflow-x: auto; padding-bottom: .3rem; }
.heat-months { display: grid; grid-template-columns: repeat(54, minmax(11px, 1fr)); gap: 3px; font: 600 .66rem var(--sans); color: var(--muted); margin-bottom: 4px; min-width: 760px; }
.heat-g { display: grid; grid-template-rows: repeat(7, 14px); grid-template-columns: repeat(54, minmax(11px, 1fr)); grid-auto-flow: column; gap: 3px; min-width: 760px; }
.heat-g i { border-radius: 2px; background: var(--card2); } .heat-g i.pad { background: none; } .heat-g i.lf { background: transparent; outline: 1px dashed var(--hair); outline-offset: -2px; }
.heat-g i.l0, .heat-key i.l0 { background: color-mix(in srgb, var(--c1) 8%, var(--card2)); } .heat-g i.l1, .heat-key i.l1 { background: color-mix(in srgb, var(--c1) 30%, var(--card)); } .heat-g i.l2, .heat-key i.l2 { background: color-mix(in srgb, var(--c1) 55%, var(--card)); } .heat-g i.l3, .heat-key i.l3 { background: color-mix(in srgb, var(--c1) 78%, var(--card)); } .heat-g i.l4, .heat-key i.l4 { background: var(--c1); }
.heat-key { display: flex; align-items: center; gap: 3px; margin-top: .6rem; font-size: .74rem; color: var(--muted); } .heat-key i { width: 12px; height: 12px; border-radius: 2px; } .heat-key i:first-child { margin-left: .3rem; } .heat-key i:last-child { margin-right: .3rem; }
.mood-today { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
.faces { display: flex; gap: .35rem; flex-wrap: wrap; }
.face { all: unset; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink2); background: var(--card); }
.face .ic { width: 22px; height: 22px; } .face:hover { border-color: var(--accent); }
.face[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .face:focus-visible { outline: 2.5px solid var(--accent); }
.stamps-sec { margin-top: 1rem; padding: 2rem clamp(1rem, 3vw, 2rem) 2.4rem; background: repeating-linear-gradient(90deg, var(--stripe-a) 0 26px, var(--stripe-b) 26px 52px); border-radius: var(--r); }
.stamps-sec .sec-head { margin-top: 0; } .stamps-sec .sec-head p { color: var(--ink); }
.stamp-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.2rem; }
.stamp { position: relative; display: grid; align-content: start; gap: .3rem; min-height: 170px; padding: 22px 20px 20px; text-decoration: none; color: var(--ink); background: var(--card); filter: drop-shadow(0 4px 8px rgb(34 50 60 / .15)); transition: transform .2s;
  -webkit-mask: radial-gradient(circle 6px at 50% 50%, #000 97%, #0000) -6px -6px / 15px 15px round, linear-gradient(#000 0 0) 50% / calc(100% - 15px) calc(100% - 15px) no-repeat; mask: radial-gradient(circle 6px at 50% 50%, #000 97%, #0000) -6px -6px / 15px 15px round, linear-gradient(#000 0 0) 50% / calc(100% - 15px) calc(100% - 15px) no-repeat; }
.stamp:nth-child(odd) { transform: rotate(-1.2deg); } .stamp:nth-child(even) { transform: rotate(1deg); }
.stamp:hover { transform: translateY(-4px) rotate(0); } .stamp:focus-visible { outline: none; background: color-mix(in srgb, var(--t1) 40%, var(--card)); }
.stamp > .ic { width: 26px; height: 26px; color: var(--accent); }
.stamp b { font: 600 1.4rem/1 var(--serif); color: var(--ink); }
.stamp small { color: var(--ink2); font-size: .8rem; }
.sp-n { position: absolute; top: 18px; right: 18px; font: 600 1.5rem/1 var(--serif); color: var(--muted); }
.stamp::before { content: ""; position: absolute; inset: 11px; border: 1px solid var(--hair); pointer-events: none; }

/* ---------- Charts ---------- */
.chart { margin: 0; } .chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--hair); stroke-width: 1; } .chart .base { stroke: var(--line); } .chart .axis { font: 600 11px var(--sans); fill: var(--muted); } .chart .hit { fill: transparent; }
.bar-mark.c1, .donut-seg.c1, .key.c1 { fill: var(--c1); background: var(--c1); } .bar-mark.c2, .donut-seg.c2, .key.c2 { fill: var(--c2); background: var(--c2); } .bar-mark.c3, .donut-seg.c3, .key.c3 { fill: var(--c3); background: var(--c3); }
.bar-mark.c4, .donut-seg.c4, .key.c4 { fill: var(--c4); background: var(--c4); } .bar-mark.c5, .donut-seg.c5, .key.c5 { fill: var(--c5); background: var(--c5); } .bar-mark.c6, .donut-seg.c6, .key.c6 { fill: var(--c6); background: var(--c6); }
.line-mark { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .line-mark.c1 { stroke: var(--c1); } .line-mark.c2 { stroke: var(--c2); } .line-mark.c4 { stroke: var(--c4); }
.dot-mark { stroke: var(--card); stroke-width: 2; } .dot-mark.c1 { fill: var(--c1); } .dot-mark.c2 { fill: var(--c2); } .dot-mark.c4 { fill: var(--c4); }
.mark:focus { outline: none; } .mark:focus .bar-mark, .mark:hover .bar-mark { opacity: .8; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .4rem; font-size: .78rem; color: var(--ink2); } .legend span { display: inline-flex; align-items: center; gap: .35rem; } .key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.donut { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; } .donut-wrap { position: relative; width: 168px; flex: none; }
.donut-mid { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; } .donut-mid b { font: 600 1.8rem/1 var(--serif); } .donut-mid span { font-size: .72rem; color: var(--muted); }
.donut-key { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; flex: 1; min-width: 150px; font-size: .84rem; } .donut-key li { display: flex; align-items: center; gap: .45rem; } .donut-key span { flex: 1; } .donut-seg { stroke: var(--card); stroke-width: 1; }
.ring { position: relative; display: inline-grid; place-items: center; width: 82px; height: 82px; } .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.r-bg { fill: none; stroke: var(--card2); stroke-width: 7; } .r-fg { fill: none; stroke: var(--c1); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.ring.c2 .r-fg { stroke: var(--c2); } .ring.c3 .r-fg { stroke: var(--c3); } .ring.c4 .r-fg { stroke: var(--c4); } .ring b { position: relative; font: 600 1.25rem var(--serif); }
.tip { position: fixed; z-index: 200; transform: translate(-50%, -100%); padding: .35rem .6rem; border-radius: 3px; background: var(--ink); color: var(--paper); font: 600 .78rem var(--sans); pointer-events: none; white-space: nowrap; }

/* ---------- 1 · Vision & 2 · Planning ---------- */
.board-bar { margin-bottom: 1.2rem; }
.theme-card { position: relative; margin: .6rem 0 1.6rem; padding: 2rem 1.6rem 1.4rem; text-align: center; background: var(--card); box-shadow: var(--shadow); }
.theme-word { margin: .2rem 0; font: italic 500 clamp(3.2rem, 8vw, 6rem)/1 var(--hand); color: var(--accent); } .theme-word.muted { color: var(--hair); }
.theme-line { font: 600 1.35rem/1.25 var(--serif); color: var(--ink2); margin: 0 auto .6rem; max-width: 44ch; }
.theme-edit summary { cursor: pointer; color: var(--accent-ink); font-weight: 650; } .theme-edit form { justify-content: center; margin-top: .6rem; } .theme-edit .input { max-width: 260px; }
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .values li { display: flex; gap: .8rem; align-items: baseline; } .values small { display: block; color: var(--ink2); font-size: .85rem; }
.values b { font: 600 1.6rem var(--serif); color: var(--ink); }
.v-n { font: italic 500 1.6rem/1 var(--hand); color: var(--accent); min-width: 2rem; }
.antis { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .antis s { font: 600 1.3rem var(--serif); text-decoration-color: var(--c2); text-decoration-thickness: 2px; } .antis small { display: block; color: var(--ink2); }
.anti-card { background: color-mix(in srgb, var(--t2) 22%, var(--card)); }
.mans { list-style: none; margin: 0; padding: 0; display: grid; } .man { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px dashed var(--hair); flex-wrap: wrap; }
.man-d { font: italic 500 1.2rem var(--hand); color: var(--accent); min-width: 3.4rem; } .man-t { flex: 1; min-width: 180px; display: grid; } .man-t small { color: var(--ink2); }
.arrived-card { background: color-mix(in srgb, var(--t3) 22%, var(--card)); }
.wk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.6rem; }
.wk-day { position: relative; display: flex; flex-direction: column; gap: .3rem; min-height: 220px; padding: .7rem .6rem 2.4rem; background: var(--card); box-shadow: var(--shadow); }
.wk-day header { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1.5px solid var(--accent); padding-bottom: .3rem; margin-bottom: .2rem; }
.wk-day header b { font: 700 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .wk-day header span { font: 600 1.8rem/1 var(--serif); color: var(--ink); }
.wk-day.today { background: color-mix(in srgb, var(--t1) 35%, var(--card)); } .wk-day.today header b { color: var(--accent-ink); }
.wk-day.past { opacity: .78; } .wk-day .task-t { font-size: .82rem; }
.add-mini { all: unset; cursor: pointer; position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px dashed var(--accent); color: var(--accent); } .add-mini:hover { background: var(--accent); color: var(--on-accent); } .add-mini:focus-visible { outline: 2px solid var(--accent); }
.reset-card { max-width: 720px; }
.sprint-head { position: relative; padding: 1.4rem 1.5rem; margin-bottom: 1.4rem; background: var(--card); box-shadow: var(--shadow); display: grid; gap: .6rem; justify-items: start; }
.sprint-t { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.sprint-goals { display: flex; flex-wrap: wrap; gap: .5rem; } .goal-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem .3rem .35rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; } .goal-tag b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .72rem; }
.exec { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; } .exec b { font: 600 2.6rem/1 var(--serif); color: var(--ink); }
.tw-wrap, .tbl-wrap { overflow-x: auto; background: var(--card); box-shadow: var(--shadow); margin-bottom: 1.4rem; }
.tw { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 760px; }
.tw th, .tw td { padding: .5rem .35rem; border-bottom: 1px solid var(--hair); text-align: center; } .tw thead th { font: 700 .66rem var(--sans); letter-spacing: .12em; color: var(--muted); }
.tw tbody th { text-align: left; font-weight: 600; min-width: 200px; padding-left: 1rem; } .tw tbody th small { display: block; color: var(--muted); font-weight: 400; }
.tw .now { background: color-mix(in srgb, var(--t1) 35%, transparent); }
.cell { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--line); border-radius: 3px; color: transparent; } .cell .ic { width: 14px; height: 14px; }
.cell.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .cell.future { opacity: .45; } .cell:focus-visible { outline: 2px solid var(--accent); }
.score-row th, .score-row td { font-weight: 800; color: var(--accent-ink); border-bottom: 0; }
.okr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.6rem; }
.okr header { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; margin-bottom: .6rem; } .okr header .kick { grid-column: 1; } .okr h3 { font: 600 1.6rem/1.05 var(--serif); color: var(--ink); } .okr-p { grid-row: 1 / 3; grid-column: 2; font: 600 2.2rem/1 var(--serif); align-self: center; }
.krs { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; } .krs li { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; align-items: center; font-size: .9rem; } .krs .meter { grid-column: 1 / -1; }
.kr-in { display: flex; align-items: center; gap: .3rem; } .kr-in .input { width: 5rem; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.qrev header { display: flex; align-items: baseline; justify-content: space-between; } .qrev h3 { font: 600 2.2rem/1 var(--serif); color: var(--ink); } .qrev h3 small { font: 600 .8rem var(--sans); color: var(--muted); }
.qrev.now { outline: 2px solid var(--accent); outline-offset: 3px; } .qrev.future { opacity: .6; }
.q-score { font: 600 2rem var(--serif); color: var(--accent); } .q-score small { font-size: .9rem; color: var(--muted); }
.q-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; margin: .8rem 0; } .q-stats div { display: grid; } .q-stats dt { font: 700 .62rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .q-stats dd { margin: 0; font: 600 1.35rem var(--serif); }
.qrev ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; }

/* ---------- 3 · Finance & 4 · Career ---------- */
.ledger-day h3 { font: 700 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .3rem; }
.ledger { list-style: none; margin: 0; padding: 0; } .ledger li { display: grid; grid-template-columns: 120px 1fr auto; gap: .7rem; padding: .4rem 0; border-bottom: 1px dashed var(--hair); font-size: .9rem; }
.lg-c { font: 700 .66rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); align-self: center; }
.ledger li.in b { color: var(--good); }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; } .tbl th { text-align: left; font: 700 .66rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .5rem .6rem; border-bottom: 1.5px solid var(--line); }
.tbl td { padding: .55rem .6rem; border-bottom: 1px dashed var(--hair); } .tbl tr.off td { color: var(--muted); } .tbl small { color: var(--muted); }
.debts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .debts li { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; border-bottom: 1px dashed var(--hair); } .debts small { display: block; color: var(--ink2); }
.nw-hero { position: relative; display: grid; justify-items: center; gap: .2rem; padding: 2rem 1rem 1.6rem; margin-bottom: 1.4rem; background: var(--card); box-shadow: var(--shadow); text-align: center; }
.nw-hero > b { font: 600 clamp(3rem, 7vw, 5rem)/1 var(--serif); color: var(--ink); } .nw-clip { left: 50%; margin-left: -20px; }
.wish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.8rem 1.4rem; padding-top: .8rem; }
.wish { position: relative; display: grid; gap: .45rem; align-content: start; padding: 1rem; background: var(--card); box-shadow: var(--shadow); }
.wish h3 { font: 600 1.4rem/1.05 var(--serif); } .wish.bought { opacity: .6; }
.wish-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--card2); color: var(--muted); } .wish-ph img { width: 100%; height: 100%; object-fit: cover; } .wish-ph .ic { width: 40px; height: 40px; }
.wish.add { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; align-content: center; gap: .4rem; min-height: 260px; border: 1.5px dashed var(--accent); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; } .wish.add:focus-visible { outline: 2.5px solid var(--accent); }
.pj-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.pj-col { display: grid; gap: .8rem; padding: .8rem; min-height: 260px; background: color-mix(in srgb, var(--card2) 70%, transparent); border-top: 3px solid var(--c5); }
.pj-col.col-doing { border-color: var(--c1); } .pj-col.col-review { border-color: var(--c3); } .pj-col.col-done { border-color: var(--c4); } .pj-col.drop-over { background: color-mix(in srgb, var(--t1) 50%, var(--card)); }
.pj-col header { display: flex; align-items: center; justify-content: space-between; } .pj-col h3 { font: 600 1.4rem var(--serif); color: var(--ink); }
.count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 .4rem; border-radius: 999px; background: var(--card); font: 700 .74rem var(--sans); }
.pj-card { position: relative; display: grid; gap: .35rem; padding: .8rem; background: var(--card); box-shadow: var(--shadow); cursor: grab; } .pj-card.sel { outline: 2px solid var(--accent); }
.pj-card h4 { margin: 0; font: 650 .95rem/1.25 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.pj-ph { display: block; height: 96px; overflow: hidden; margin: -.3rem -.3rem .2rem; } .pj-ph img { width: 100%; height: 100%; object-fit: cover; }
.pj-acts { display: flex; justify-content: space-between; } .grip { position: absolute; top: 6px; right: 6px; color: var(--muted); } .grip .ic { width: 14px; height: 14px; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none; opacity: .92; box-shadow: var(--shadow-lift); } .dragging { opacity: .35; }
.proj-detail { margin-top: 1.6rem; } .sp-top { margin-top: 1rem; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.contact { display: flex; gap: .9rem; padding: 1.1rem; background: var(--card); box-shadow: var(--shadow); } .contact.late { border-left: 3px solid var(--c2); }
.c-av { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--t1); color: var(--on); font: 600 1.8rem/1 var(--serif); }
.c-b { flex: 1; min-width: 0; } .c-b h3 { font: 600 1.4rem var(--serif); color: var(--ink); }
.c-b dl, .mini-dl { display: grid; gap: .2rem; margin: .5rem 0; font-size: .84rem; } .c-b dl div, .mini-dl div { display: flex; gap: .5rem; } .c-b dt { color: var(--muted); min-width: 6.5rem; } .c-b dd, .mini-dl dd { margin: 0; } .mini-dl dt { color: var(--accent); }
.nudge-line { display: flex; gap: .5rem; align-items: center; padding: .6rem .8rem; background: color-mix(in srgb, var(--t3) 40%, var(--card)); margin: 0 0 1rem; }
.meet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem 1.4rem; padding-top: .8rem; }
.meet header { display: grid; gap: .3rem; justify-items: start; } .meet h3 { font: 600 1.6rem/1.05 var(--serif); color: var(--ink); }
.meet-notes { font-size: .92rem; white-space: pre-line; }
.acts { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .acts li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .9rem; }
.folio-top { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2.2rem; align-items: start; margin-bottom: 1.4rem; }
.headshot { margin-top: 1.4rem; }
.resume { padding: 2rem 2.2rem; } .rs-name { font-size: 2.8rem; } .rs-hl { font: italic 500 1.6rem/1 var(--hand); color: var(--accent); margin: .2rem 0; }
.resume h3 { font: 700 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); border-bottom: 1.5px solid var(--accent); padding-bottom: .25rem; margin: 1.2rem 0 .6rem; }
.rs-role { margin-bottom: .8rem; } .rs-role ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.rs-skills { display: flex; flex-wrap: wrap; gap: .4rem; } .rs-skills span { padding: .2rem .55rem; background: var(--t1); color: var(--on); font-size: .8rem; font-weight: 600; }
.resume-edit { margin-bottom: 1.4rem; } .resume-edit summary { cursor: pointer; } .resume-edit form { margin-top: 1rem; }
.folio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.folio { display: grid; gap: .4rem; align-content: start; } .folio h3 { font: 600 1.5rem var(--serif); color: var(--ink); }
.folio-ph { all: unset; cursor: zoom-in; display: block; aspect-ratio: 4 / 3; overflow: hidden; margin: -.4rem -.4rem .3rem; } .folio-ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 5 · Learning & 6 · Health ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem 1.4rem; padding-top: .8rem; }
.course h3 { font: 600 1.6rem/1.05 var(--serif); color: var(--ink); margin: .2rem 0 .6rem; }
.syllabus { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; }
.boxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-bottom: 1.4rem; }
.lbox { display: grid; justify-items: center; padding: .8rem; background: var(--card); box-shadow: var(--shadow); border-top: 4px solid var(--c5); } .lbox b { font: 600 2rem/1 var(--serif); } .lbox small { color: var(--muted); }
.lbox.b2 { border-color: var(--t1); } .lbox.b3 { border-color: var(--c1); } .lbox.b4 { border-color: var(--c4); } .lbox.b5 { border-color: var(--c3); }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.6rem; }
.deck { position: relative; padding: 10px 10px 0 0; }
.deck-stack i { position: absolute; inset: 0 0 10px 10px; background: var(--card); box-shadow: var(--shadow); } .deck-stack i:first-child { transform: rotate(3deg); } .deck-stack i:last-child { transform: rotate(-2deg); }
.deck-face { position: relative; display: grid; gap: .4rem; padding: 1.2rem; background: var(--card); box-shadow: var(--shadow); border-top: 4px solid var(--accent); } .deck-face h3 { font: 600 1.6rem var(--serif); color: var(--ink); }
.flash-stage { display: grid; justify-items: center; gap: 1.2rem; padding: 1rem 0 2rem; } .flash-stage.done { text-align: center; }
.flash { position: relative; width: min(560px, 100%); min-height: 260px; padding: 2.4rem 2rem 2rem; display: grid; align-content: center; text-align: center; background: var(--card); box-shadow: var(--shadow-lift);
  background-image: linear-gradient(transparent 3.2rem, var(--margin) 3.2rem, var(--margin) calc(3.2rem + 1px), transparent 0), repeating-linear-gradient(transparent 0 27px, var(--rule) 27px 28px); background-position: 0 0, 0 4rem; }
.fl-q { font: 600 1.9rem/1.15 var(--serif); margin: .4rem 0; } .fl-a { font: italic 500 1.9rem/1.2 var(--hand); color: var(--accent); margin: 0; } .flash hr { width: 40%; border: 0; border-top: 1px dashed var(--hair); }
.grades { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } .grades small { font-size: .6rem; opacity: .75; text-transform: none; letter-spacing: 0; }
.notes-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.6rem; align-items: start; margin-top: 1.4rem; }
.note-list ul { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .3rem; }
.nl { all: unset; box-sizing: border-box; cursor: pointer; display: grid; width: 100%; padding: .55rem .7rem; background: var(--card); border-left: 3px solid transparent; font-size: .88rem; } .nl small { color: var(--muted); font-size: .74rem; } .nl.on { border-color: var(--accent); background: color-mix(in srgb, var(--t1) 40%, var(--card)); } .nl:focus-visible { outline: 2px solid var(--accent); }
.cornell { position: relative; padding: 1.6rem; background: var(--card); box-shadow: var(--shadow); } .cornell header { display: grid; gap: .3rem; justify-items: start; margin-bottom: 1rem; } .cornell h2 { font-size: 2.2rem; }
.cn-grid { display: grid; grid-template-columns: 34% 1fr; border-top: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); min-height: 260px; }
.cn-cues { padding: .9rem 1rem .9rem 0; border-right: 1.5px solid var(--margin); } .cn-cues ul { margin: 0; padding-left: 1rem; display: grid; gap: .7rem; font: italic 500 1.35rem/1.15 var(--hand); color: var(--accent); }
.cn-notes { padding: .9rem 0 .9rem 1.2rem; background: repeating-linear-gradient(transparent 0 27px, var(--rule) 27px 28px); line-height: 28px; } .cn-notes p { margin: 0; white-space: pre-line; }
.cornell h3, .cn-sum h3 { font: 700 .66rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.cn-sum { padding-top: .9rem; } .cn-sum p { font-style: italic; margin: 0; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2rem 1.6rem; padding-top: .8rem; }
.cert { display: grid; gap: .6rem; } .cert .polaroid .pol-img { aspect-ratio: 11 / 8; } .cert-b h3 { font: 600 1.3rem var(--serif); color: var(--ink); } .cert-b { display: grid; gap: .15rem; }
.cert-pdf { all: unset; cursor: pointer; display: grid; place-items: center; aspect-ratio: 11 / 8; background: var(--card); box-shadow: var(--shadow); }
.pdf-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 3px; background: var(--t2); color: var(--on); font-size: .8rem; }
.next-set { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin: 1rem 0; } .next-set b { font: 600 2.2rem/1 var(--serif); color: var(--ink); }
.lift-form { display: grid; grid-template-columns: 1.6fr repeat(3, .7fr) auto; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.lift-hist li { font-size: .88rem; }
.macro-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.mring { display: grid; justify-items: center; gap: .3rem; padding: 1rem .5rem; background: var(--card); box-shadow: var(--shadow); text-align: center; } .mring > b { font: 700 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; } .mring small { color: var(--muted); font-size: .76rem; }
.steps-today { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: .8rem; } .steps-today .field { width: 170px; }
.measure-dl { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin: .8rem 0 .2rem; } .measure-dl div { display: grid; text-align: center; padding: .5rem .2rem; background: var(--card2); }
.measure-dl dt { font: 700 .6rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .measure-dl dd { margin: 0; font: 600 1.4rem var(--serif); } .measure-dl dd small { font: 500 .7rem var(--sans); color: var(--muted); margin-left: .1rem; } .measure-dl em { display: block; font: 700 .72rem var(--sans); font-style: normal; color: var(--ink2); } .measure-dl em.good { color: var(--good); }
.compare { margin-bottom: 2rem; } .cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; } .cmp-pair > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .5rem; }
.ph-date { margin-bottom: 2rem; } .ph-date h3 { margin-bottom: 1rem; } .ph-row { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 1.4rem; }
.ph-empty { all: unset; cursor: pointer; display: grid; place-items: center; align-content: center; gap: .3rem; aspect-ratio: 3 / 4; border: 1.5px dashed var(--hair); color: var(--muted); } .ph-empty:focus-visible { outline: 2px solid var(--accent); }

/* ---------- 7 · Mind, 8 · Kitchen, 9 · Home ---------- */
.feel-chips { margin: .3rem 0 1rem; } .fc h3, .card h3 { } .mood-note { display: grid; gap: .5rem; justify-items: start; }
.mood-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; } .mood-cal b { font: 700 .66rem var(--sans); color: var(--muted); padding-bottom: .2rem; }
.mood-cal i { display: grid; place-items: center; aspect-ratio: 1; font: 600 .76rem var(--sans); font-style: normal; border-radius: 3px; background: var(--card2); color: var(--muted); }
.mood-cal i.md.m1 { background: #8E9AA6; color: #fff; } .mood-cal i.md.m2 { background: #B9C6CE; color: #22323C; } .mood-cal i.md.m3 { background: var(--t1); color: #22323C; } .mood-cal i.md.m4 { background: #8FC0DA; color: #22323C; } .mood-cal i.md.m5 { background: var(--c1); color: #fff; } .mood-cal i.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.feel-top { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.pattern { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .pattern li { display: grid; grid-template-columns: 9rem 1fr; gap: .2rem .8rem; align-items: center; } .pattern small { grid-column: 2; color: var(--muted); }
.trig-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; }
.trig header { display: flex; justify-content: space-between; align-items: center; gap: .6rem; } .trig h3 { font: 600 1.4rem/1.1 var(--serif); color: var(--ink); margin: .4rem 0; }
.trig dl { display: grid; gap: .35rem; margin: 0; font-size: .88rem; } .trig dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .4rem; } .trig dt { color: var(--muted); font-weight: 600; } .trig dd { margin: 0; } .trig.resolved { opacity: .75; }
.intensity { display: flex; gap: 3px; } .intensity i { width: 10px; height: 10px; border-radius: 50%; background: var(--card2); } .intensity i.on { background: var(--c2); }
.prompt { font: 600 1.8rem/1.15 var(--serif); color: var(--ink); margin: 0 0 .8rem; } .card form .btn { margin-top: .5rem; }
.grat { display: grid; gap: .5rem; } .g-line { display: flex; align-items: center; gap: .6rem; } .g-line span { font: italic 500 1.6rem/1 var(--hand); color: var(--accent); width: 1.4rem; }
.grat-card { background: color-mix(in srgb, var(--t3) 25%, var(--card)); }
.journal-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .journal-l li { display: grid; gap: .1rem; padding-bottom: .7rem; border-bottom: 1px dashed var(--hair); } .journal-l p { margin: .2rem 0 0; white-space: pre-line; }
.pin-grid { columns: 4 220px; column-gap: 1.2rem; }
.rpin { break-inside: avoid; display: block; margin-bottom: 1.2rem; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.rp-ph { all: unset; cursor: zoom-in; display: block; width: 100%; } .rp-ph img { width: 100%; height: auto; display: block; } .rp-ph.none { display: grid; place-items: center; height: 140px; background: var(--card2); color: var(--muted); cursor: default; } .rp-ph.none .ic { width: 40px; height: 40px; }
.rp-b { padding: .8rem .9rem 1rem; } .rp-b h3 { font: 600 1.4rem/1.05 var(--serif); color: var(--ink); }
.rpin.add { all: unset; box-sizing: border-box; cursor: pointer; break-inside: avoid; display: grid; place-items: center; align-content: center; gap: .3rem; width: 100%; min-height: 180px; margin-bottom: 1.2rem; border: 1.5px dashed var(--accent); color: var(--accent-ink); text-align: center; } .rpin.add:focus-visible { outline: 2.5px solid var(--accent); }
.meal-grid { display: grid; grid-template-columns: 90px repeat(3, minmax(0, 1fr)); gap: .5rem; align-items: stretch; margin-bottom: 1rem; }
.mg-h { font: 700 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; align-self: end; }
.mg-d { display: grid; align-content: center; font: 600 1.25rem/1 var(--serif); color: var(--ink); } .mg-d small { font: 600 .74rem var(--sans); color: var(--muted); } .mg-d.today { color: var(--c2); }
.mg-cell { display: grid; grid-template-columns: auto 1fr; gap: .4rem; align-items: center; padding: .35rem; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .06); } .mg-cell.set { background: color-mix(in srgb, var(--t1) 25%, var(--card)); }
.mg-cell .input { grid-column: 2; padding: .4rem 1.8rem .4rem .5rem; font-size: .84rem; border-color: transparent; background-color: transparent; } .mg-cell:not(.set) .input { grid-column: 1 / -1; }
.mg-ph { width: 40px; height: 40px; overflow: hidden; } .mg-ph img { width: 100%; height: 100%; object-fit: cover; }
.receipt-card { max-width: 640px; margin-inline: auto; }
.groc { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; } .groc li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; padding: .2rem 0; border-bottom: 1px dashed var(--hair); } .groc li small { font-size: .72rem; text-align: right; }
.matrix { width: 100%; border-collapse: collapse; min-width: 760px; } .matrix th, .matrix td { padding: .55rem; border: 1px solid var(--hair); vertical-align: top; text-align: left; }
.matrix thead th { font: 700 .66rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--card2); } .matrix tbody th { font: 600 1.2rem var(--serif); color: var(--ink); white-space: nowrap; }
.mx { all: unset; cursor: pointer; display: grid; padding: .3rem .45rem; margin-bottom: .3rem; font-size: .82rem; background: color-mix(in srgb, var(--t4) 45%, var(--card)); border-left: 3px solid var(--c4); } .mx small { font-size: .7rem; color: var(--ink2); }
.mx.soon { background: color-mix(in srgb, var(--t3) 50%, var(--card)); border-color: var(--c3); } .mx.late { background: color-mix(in srgb, var(--t2) 55%, var(--card)); border-color: var(--c2); } .mx:focus-visible { outline: 2px solid var(--accent); }
.due { font: 700 .72rem var(--sans); color: var(--ink2); white-space: nowrap; } .due.late { color: var(--bad); } .due.today { color: var(--warn); }
.plant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2rem 1.4rem; padding-top: .6rem; }
.plant { display: grid; gap: .4rem; align-content: start; } .plant h3 { font: 600 1.4rem var(--serif); color: var(--ink); margin-top: .5rem; } .plant .polaroid .pol-img { aspect-ratio: 1; }
.water-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .plant.thirsty .polaroid { box-shadow: 0 0 0 3px var(--c2), var(--shadow); }
.inv { list-style: none; margin: 0; padding: 0; display: grid; } .inv li { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px dashed var(--hair); }
.inv-ph { all: unset; cursor: zoom-in; flex: none; width: 54px; height: 54px; overflow: hidden; background: var(--card2); } .inv-ph img { width: 100%; height: 100%; object-fit: cover; } .inv-ph.none { display: grid; place-items: center; color: var(--muted); cursor: default; }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.vault-card { position: relative; display: grid; gap: .4rem; padding: 1.2rem; background: var(--kraft); color: #2E2219; box-shadow: var(--shadow); border-top: 6px solid var(--c4); }
[data-theme="night"] .vault-card { background: #E1D3B9; }
.vault-card .muted { color: #54463B; } .vault-card a { color: #3A2A1E; } .vault-card.soon { border-color: var(--c3); } .vault-card.expired { border-color: #B23A3A; opacity: .85; }
.vault-card h3 { font: 600 1.5rem var(--serif); color: #2E2219; }
.vc-tag { justify-self: start; font: 800 .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .2rem .5rem; background: #FBF7F0; color: #2E2219; }
.vc-files { display: flex; flex-wrap: wrap; gap: .5rem; } .vc-file { all: unset; cursor: zoom-in; width: 64px; height: 82px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .15); display: grid; place-items: center; } .vc-file img { width: 100%; height: 100%; object-fit: cover; }
.vc-add { min-height: 82px; width: 82px; padding: .3rem; } .vc-add b { font-size: .6rem; } .vc-add .pd-ic .ic { width: 18px; height: 18px; } .vc-add small { display: none; }
.room-board .card-head { align-items: flex-start; } .palette-line { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }

/* ---------- 10 · Travel, 11 · Media, 12 · Social ---------- */
.map-card { padding: 1.2rem; margin-bottom: 1rem; }
.world { width: 100%; height: auto; display: block; } .sphere { fill: color-mix(in srgb, var(--t1) 35%, var(--card)); }
.ctry { fill: var(--card2); stroke: var(--card); stroke-width: .6; cursor: pointer; transition: fill .15s; } .ctry:hover { fill: color-mix(in srgb, var(--accent) 35%, var(--card2)); }
.ctry.v { fill: var(--accent); } .ctry.w { fill: var(--t2); } .ctry:focus-visible { outline: none; stroke: var(--ink); stroke-width: 1.5; }
.mpin circle { fill: var(--c2); stroke: #fff; stroke-width: 1.5; } .mpin .halo { fill: none; stroke: var(--c2); stroke-width: 1; opacity: .5; } .mpin.trip circle { fill: var(--c3); } .mpin.trip .halo { stroke: var(--c3); }
.map-key { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-top: .6rem; font-size: .82rem; } .map-key span { display: inline-flex; align-items: center; gap: .35rem; } .map-key i { width: 12px; height: 12px; border-radius: 2px; background: var(--accent); } .map-key i.w { background: var(--t2); } .map-key i.p { background: var(--c2); border-radius: 50%; }
.visited-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.boarding { position: relative; display: grid; grid-template-columns: 1fr 200px; margin-bottom: 1.6rem; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.bp-main { padding: 1.4rem 1.6rem; background: linear-gradient(90deg, var(--accent) 0 10px, transparent 10px); } .bp-main h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: .2rem 0; }
.bp-main dl { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: .8rem 0 0; } .bp-main dt { font: 700 .62rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .bp-main dd { margin: 0; font: 600 1.4rem var(--serif); }
.bp-stub { display: grid; place-items: center; align-content: center; gap: .3rem; padding: 1rem; border-left: 2px dashed var(--hair); text-align: center; } .bp-stub b { font: 600 3.4rem/1 var(--serif); color: var(--ink); }
.bp-pm { position: absolute; right: 200px; top: -14px; transform: rotate(-10deg); }
.itin { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.it-day { position: relative; padding: .6rem .7rem 2.4rem; background: color-mix(in srgb, var(--card2) 60%, var(--card)); } .it-day header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--accent); margin-bottom: .4rem; } .it-day header b { font: 600 1.3rem var(--serif); color: var(--ink); } .it-day header small { color: var(--muted); }
.it-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .it-day li { display: grid; grid-template-columns: auto 1fr; gap: 0 .4rem; font-size: .84rem; padding: .3rem .4rem; background: var(--card); border-left: 3px solid var(--c1); }
.it-day li.st-food { border-color: var(--c2); } .it-day li.st-stay { border-color: var(--c6); } .it-day li.st-move { border-color: var(--c3); } .it-day li.st-do { border-color: var(--c4); }
.it-t { font-weight: 700; font-size: .74rem; color: var(--ink2); } .it-k { font: 700 .6rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: center; } .it-day li .link-plain, .it-day li small { grid-column: 1 / -1; }
.bud { width: 100%; border-collapse: collapse; font-size: .88rem; } .bud th, .bud td { padding: .3rem .3rem; border-bottom: 1px dashed var(--hair); text-align: left; } .bud thead th { font: 700 .62rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .bud tfoot th, .bud tfoot td { font-weight: 800; border-bottom: 0; } .bud .input.sm { width: 100%; max-width: 7rem; }
.bucket { list-style: none; margin: 0; padding: 0; display: grid; } .bucket li { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px dashed var(--hair); flex-wrap: wrap; } .bucket li .link-plain { flex: 1; font: 600 1.35rem var(--serif); } .bucket li.done s { text-decoration-color: var(--accent); }
.bucket-card { max-width: 820px; }
.diary { display: grid; gap: 3rem; padding-top: 1rem; }
.diary-e { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 2.4rem; align-items: center; max-width: 900px; } .diary-e.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); } .diary-e.flip .story { order: 2; transform: rotate(2deg); }
.diary-note h3 { font: 600 2.4rem/1 var(--serif); color: var(--ink); margin: .3rem 0 .4rem; }
.reading-now { margin-bottom: 2rem; } .reading-now h2 { margin-bottom: 1rem; font-size: 2.2rem; }
.rn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; }
.rn { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; padding: 1rem; background: var(--card); box-shadow: var(--shadow); } .rn h3 { font: 600 1.4rem/1.05 var(--serif); color: var(--ink); } .rn > div { display: grid; gap: .45rem; align-content: start; }
.cv-ph { all: unset; cursor: zoom-in; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--card2); box-shadow: 2px 3px 8px rgb(0 0 0 / .18); } .cv-ph img { width: 100%; height: 100%; object-fit: cover; }
.cv-ph.none { display: grid; place-items: center; color: var(--muted); cursor: pointer; } .cv-ph.none .ic { width: 32px; height: 32px; } .cv-ph:focus-visible { outline: 2.5px solid var(--accent); }
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.6rem 1.2rem; margin: 1rem 0 2rem; }
.cv { display: grid; gap: .3rem; align-content: start; font-size: .86rem; } .cv b { font-weight: 650; line-height: 1.25; margin-top: .3rem; } .cv small { color: var(--muted); }
.cv.add { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; align-content: center; aspect-ratio: 2 / 3; border: 1.5px dashed var(--accent); color: var(--accent-ink); } .cv.add:focus-visible { outline: 2.5px solid var(--accent); }
.stars { display: inline-flex; gap: 1px; color: var(--c3); } .stars i { color: var(--hair); } .stars i.on { color: var(--c3); } .stars .ic { width: 14px; height: 14px; }
.shelf h2 { font-size: 2rem; margin-top: .6rem; }
.pod-list { display: grid; gap: 1.2rem; } .pod { display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; } .pod .cv-ph { aspect-ratio: 1; } .pod h3 { font: 600 1.5rem var(--serif); color: var(--ink); }
.countdowns { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.4rem 1rem; margin: .8rem 0 1.6rem; }
.cd { position: relative; display: grid; justify-items: center; gap: .1rem; padding: 1.2rem .6rem 1rem; background: var(--card); box-shadow: var(--shadow); text-align: center; } .cd > b { font: 600 3rem/1 var(--serif); color: var(--ink); } .cd span { font-weight: 650; font-size: .88rem; } .cd.soon { background: color-mix(in srgb, var(--t2) 30%, var(--card)); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 2rem 1.4rem; }
.person { display: grid; grid-template-columns: 130px 1fr; gap: 1.2rem; align-items: start; } .person h3 { font: 600 1.7rem var(--serif); color: var(--ink); } .person .polaroid .pol-img { aspect-ratio: 1; }
.gift-group { margin-bottom: 1.8rem; } .gift-group h2 { font-size: 1.9rem; margin-bottom: .8rem; }
.gift-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.gift { display: grid; grid-template-columns: 72px 1fr; gap: .8rem; padding: .8rem; background: var(--card); box-shadow: var(--shadow); } .gift.given { opacity: .6; } .gift h3 { font-size: .95rem; }
.gift-ph { all: unset; cursor: zoom-in; width: 72px; height: 72px; overflow: hidden; background: var(--card2); } .gift-ph img { width: 100%; height: 100%; object-fit: cover; } .gift-ph.none { display: grid; place-items: center; color: var(--muted); cursor: default; }
.event-list { display: grid; gap: 2.2rem; padding-top: 1rem; } .event header { display: flex; justify-content: space-between; gap: 1rem; } .event h3 { font: 600 2rem var(--serif); color: var(--ink); } .event.past { opacity: .7; }
.ev-count { display: grid; justify-items: center; } .ev-count b { font: 600 2.6rem/1 var(--serif); color: var(--accent); } .ev-count small { color: var(--muted); }
.guests { display: flex; flex-wrap: wrap; gap: .35rem; } .guests span { padding: .2rem .55rem; border-radius: 999px; background: var(--t1); color: var(--on); font-size: .8rem; }
.guide-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; } .guide-steps li::marker { color: var(--accent); font-weight: 800; }
.repair-guide { max-width: 760px; background: color-mix(in srgb, var(--t2) 18%, var(--card)); }

/* ---------- 13 · Knowledge, 14 · Focus, 15 · Archive ---------- */
.clipper { background: color-mix(in srgb, var(--t1) 25%, var(--card)); }
.clip-form { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: .5rem; }
.bookmarklet { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border: 1px dashed var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 700; cursor: grab; }
.clips { list-style: none; margin: 0; padding: 0; display: grid; }
.clip-row { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .8rem; align-items: start; padding: .8rem 0; border-bottom: 1px dashed var(--hair); }
.cl-k { font: 700 .62rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: .25rem; } .cl-b { display: grid; gap: .1rem; min-width: 0; } .cl-b > a { overflow-wrap: anywhere; } .cl-acts { display: flex; gap: .2rem; align-items: center; }
.clip-row.archived { opacity: .6; }
.tag-cloud { margin-bottom: 1.2rem; } #kq { max-width: 360px; }
.net { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto; } .net line { stroke: color-mix(in srgb, var(--accent) 40%, transparent); stroke-linecap: round; }
.net .node { cursor: pointer; } .net .node circle { fill: var(--card); stroke: var(--accent); stroke-width: 2; } .net .node:hover circle, .net .node:focus circle { fill: var(--t1); } .net .node:focus { outline: none; }
.net .node text { font: 700 11px var(--sans); fill: var(--ink); text-anchor: middle; }
.zettel { position: relative; } .z-body { font-size: 1rem; line-height: 28px; }
.zlink { all: unset; cursor: pointer; color: var(--accent-ink); font-weight: 700; border-bottom: 1.5px solid var(--accent); } .zlink:focus-visible { outline: 2px solid var(--accent); }
.pomo { display: grid; justify-items: center; gap: 1rem; padding: 2.2rem 1.4rem 1.6rem; text-align: center; } .pomo.break { background: color-mix(in srgb, var(--t4) 30%, var(--card)); }
.pomo-ring { --p: 0; display: grid; place-items: center; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(var(--card) 62%, transparent 63%), conic-gradient(var(--accent) calc(var(--p) * 360deg), var(--card2) 0); }
.pomo.break .pomo-ring { background: radial-gradient(color-mix(in srgb, var(--t4) 30%, var(--card)) 62%, transparent 63%), conic-gradient(var(--c4) calc(var(--p) * 360deg), var(--card2) 0); }
.pomo-ring b { font: 600 4rem/1 var(--serif); color: var(--ink); }
.pomo-btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.pomo-set { display: grid; grid-template-columns: 1.3fr 1fr 6rem; gap: .6rem; width: 100%; text-align: left; }
.tomatoes { display: flex; flex-wrap: wrap; gap: .3rem; } .tomato { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c2); color: #fff; } .tomato .ic { width: 18px; height: 18px; }
.timeline { padding: 1.2rem; } .tl { position: relative; display: grid; grid-template-rows: repeat(var(--rows), 52px); margin-left: 3.4rem; }
.tl-h { border-top: 1px solid var(--hair); position: relative; } .tl-h span { position: absolute; left: -3.4rem; top: -.55rem; font: 600 .72rem var(--sans); color: var(--muted); }
.tl-b { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; left: 6px; right: 6px; display: grid; align-content: start; padding: .35rem .6rem; overflow: hidden; font-size: .84rem; background: color-mix(in srgb, var(--t1) 70%, var(--card)); border-left: 4px solid var(--c1); color: var(--on); }
.tl-b small { font-size: .72rem; opacity: .8; } .tl-b.tn-blush { background: color-mix(in srgb, var(--t2) 70%, var(--card)); border-color: var(--c2); } .tl-b.tn-butter { background: color-mix(in srgb, var(--t3) 70%, var(--card)); border-color: var(--c3); } .tl-b.tn-sage { background: color-mix(in srgb, var(--t4) 70%, var(--card)); border-color: var(--c4); } .tl-b.tn-lilac { background: color-mix(in srgb, var(--t5) 70%, var(--card)); border-color: var(--c6); }
[data-theme="night"] .tl-b { color: var(--ink); background: color-mix(in srgb, var(--t1) 22%, var(--card)); }
.tl-b:focus-visible { outline: 2px solid var(--accent); } .tl-now { position: absolute; left: -.4rem; right: 0; height: 2px; background: var(--c2); } .tl-now::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--c2); }
.en-row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.en { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 2px; padding: .4rem 0; border-radius: 3px; background: var(--card2); } .en b { font: 600 1.3rem/1 var(--serif); min-height: 1.3rem; } .en small { font-size: .6rem; color: var(--muted); } .en:focus-visible { outline: 2px solid var(--accent); }
.en:is(.e1,.e2,.e3,.e4,.e5) small { color: var(--on); opacity: .8; } .en:is(.e1,.e2,.e3,.e4,.e5) b { color: var(--on); }
.en.e1, .en-grid i.e1 { background: color-mix(in srgb, var(--c3) 15%, var(--card)); } .en.e2, .en-grid i.e2 { background: color-mix(in srgb, var(--c3) 35%, var(--card)); } .en.e3, .en-grid i.e3 { background: color-mix(in srgb, var(--c3) 55%, var(--card)); } .en.e4, .en-grid i.e4 { background: color-mix(in srgb, var(--c3) 78%, var(--card)); } .en.e5, .en-grid i.e5 { background: var(--c3); }
.en-grid { display: grid; grid-template-columns: 2.4rem repeat(16, minmax(0, 1fr)); gap: 3px; font: 600 .62rem var(--sans); color: var(--muted); } .en-grid b { font-weight: 700; white-space: nowrap; overflow: hidden; } .en-grid i { height: 20px; border-radius: 2px; background: var(--card2); }
.en-avg { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; align-items: end; height: 90px; margin: 1rem 0 .5rem 2.6rem; } .en-avg span { display: grid; align-items: end; height: 100%; } .en-avg i { display: block; height: calc(var(--v) * 70px + 2px); background: var(--c3); border-radius: 2px 2px 0 0; } .en-avg small { font-size: .58rem; color: var(--muted); height: 14px; }
.callout { display: flex; gap: .5rem; align-items: baseline; padding: .8rem 1rem; background: color-mix(in srgb, var(--t3) 40%, var(--card)); margin: .8rem 0 0; }
.year-chips { margin-bottom: 1rem; }
.reel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2.2rem 1.4rem; padding-top: 1rem; }
.reel-slot { min-width: 0; } .reel-slot .polaroid .pol-img { aspect-ratio: 1; }
.reel-empty { display: grid; place-items: center; align-content: center; gap: .4rem; aspect-ratio: 1 / 1.2; padding: 1rem; text-align: center; cursor: pointer; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent-ink); background: color-mix(in srgb, var(--t1) 18%, transparent); }
.reel-empty .kick { color: var(--accent-ink); } .reel-empty .ic { width: 26px; height: 26px; } .reel-slot.future .reel-empty { cursor: default; border-color: var(--hair); color: var(--muted); background: none; } .reel-empty:focus-within { outline: 2.5px solid var(--accent); } .reel-empty.drag { background: color-mix(in srgb, var(--t1) 50%, transparent); }
.reflect { padding: 2rem 2rem 2rem 2.8rem; } .rf-word { font: italic 500 clamp(3rem, 7vw, 5rem)/1 var(--hand); text-transform: none; color: var(--accent); }
.rf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem 2rem; } .rf h3 { font: 700 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: .6rem 0 .3rem; } .rf ul { margin: 0; padding-left: 1.1rem; }
.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.8rem; }
.letter { display: grid; gap: 0; }
.env { position: relative; height: 180px; background: var(--env); box-shadow: var(--shadow); overflow: hidden; background-image: radial-gradient(rgb(0 0 0 / .035) 1px, transparent 1px); background-size: 4px 4px; }
.env .env-flap { position: absolute; inset: 0 0 auto 0; height: 60%; background: color-mix(in srgb, var(--env) 90%, #000); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.letter.opened .env .env-flap { clip-path: polygon(0 0, 100% 0, 50% 8%); }
.letter-seal { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); }
.env-to { position: absolute; left: 1rem; bottom: .8rem; font: italic 500 1.35rem var(--hand); color: var(--ink2); }
.env-stamp { position: absolute; right: 1rem; top: 1rem; display: grid; place-items: center; width: 42px; height: 50px; background: var(--t2); color: var(--c2); -webkit-mask: radial-gradient(circle 3px at 50% 50%, #000 97%, #0000) -3px -3px / 8px 8px round, linear-gradient(#000 0 0) 50% / calc(100% - 8px) calc(100% - 8px) no-repeat; mask: radial-gradient(circle 3px at 50% 50%, #000 97%, #0000) -3px -3px / 8px 8px round, linear-gradient(#000 0 0) 50% / calc(100% - 8px) calc(100% - 8px) no-repeat; }
.letter-b { padding: 1rem 1.2rem 1.3rem; background: var(--card); box-shadow: var(--shadow); display: grid; gap: .4rem; justify-items: start; } .letter-b h3 { font: 600 1.5rem var(--serif); color: var(--ink); }
.letter-text { font: italic 500 1.6rem/1.25 var(--hand); color: var(--ink); white-space: pre-line; } .letter.ready .letter-b { background: color-mix(in srgb, var(--t3) 30%, var(--card)); }
.rollup { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.4rem; }
.roll-stamp { display: grid; justify-items: center; gap: .2rem; padding: 1.4rem 1rem 1.2rem; background: var(--card); text-align: center; filter: drop-shadow(0 4px 8px rgb(34 50 60 / .15));
  -webkit-mask: radial-gradient(circle 6px at 50% 50%, #000 97%, #0000) -6px -6px / 15px 15px round, linear-gradient(#000 0 0) 50% / calc(100% - 15px) calc(100% - 15px) no-repeat; mask: radial-gradient(circle 6px at 50% 50%, #000 97%, #0000) -6px -6px / 15px 15px round, linear-gradient(#000 0 0) 50% / calc(100% - 15px) calc(100% - 15px) no-repeat; }
.roll-stamp > .ic { width: 26px; height: 26px; color: var(--accent); } .roll-stamp b { font: 600 2.6rem/1 var(--serif); color: var(--ink); } .roll-stamp small { color: var(--ink2); font-size: .8rem; }
.roll-stamp.t1 { background: color-mix(in srgb, var(--t1) 35%, var(--card)); } .roll-stamp.t2 { background: color-mix(in srgb, var(--t2) 30%, var(--card)); } .roll-stamp.t3 { background: color-mix(in srgb, var(--t3) 35%, var(--card)); } .roll-stamp.t4 { background: color-mix(in srgb, var(--t4) 40%, var(--card)); }

/* ---------- Guide, settings ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; margin-bottom: 1.6rem; }
.guide-card { display: grid; gap: .3rem; align-content: start; text-decoration: none; color: inherit; } .guide-card:hover { box-shadow: var(--shadow-lift); } .guide-card b { font: 600 1.5rem var(--serif); color: var(--ink); } .g-ic .ic { width: 26px; height: 26px; color: var(--accent); }
.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .keys li { display: flex; gap: .8rem; align-items: center; } .keys kbd { min-width: 3.4rem; text-align: center; }
.set-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: start; } .set-col { display: grid; gap: 1.4rem; }
.card.box h2, .box-head h2 { font-size: 1.7rem; margin-bottom: .6rem; } .box-head { display: flex; justify-content: space-between; align-items: center; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--hair); } .sr-t { display: grid; } .sr-t small { color: var(--muted); }
.set-in { max-width: 240px; } .set-save { padding-top: .8rem; } .section-sm { margin-top: .8rem; }
.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: .5rem 0 1rem; }
.pal { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .25rem; align-content: start; padding: .6rem; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.pal:hover { border-color: var(--accent); } .pal[aria-pressed="true"] { border: 2px solid var(--accent); background: color-mix(in srgb, var(--t1) 25%, var(--card)); } .pal:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.pal-sw { display: flex; height: 26px; overflow: hidden; border: 1px solid var(--line); margin-bottom: .25rem; } .pal-sw i { flex: 1; } .pal b { font: 600 1.15rem var(--serif); } .pal small { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.tsizes { display: flex; gap: .3rem; } .tsizes button { all: unset; cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); font-family: var(--serif); } .tsizes button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .tsizes button:focus-visible { outline: 2px solid var(--accent); }
.tog-wrap { flex: none; } .tog { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background .2s; }
.tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s; } .tog:checked { background: var(--accent); border-color: var(--accent); } .tog:checked::after { transform: translateX(18px); } .tog:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.sk-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--t1); color: var(--on); flex: none; }

/* ---------- Modal, quick capture, lightbox, toasts ---------- */
dialog#modal { border: 0; padding: 0; border-radius: 4px; background: var(--card); color: var(--ink); width: min(680px, 94vw); max-height: 92vh; box-shadow: var(--shadow-lift); }
dialog#modal.narrow { width: min(460px, 94vw); } dialog#modal.photo { width: min(1000px, 96vw); background: transparent; box-shadow: none; overflow: visible; }
dialog::backdrop { background: rgb(22 30 36 / .5); backdrop-filter: blur(2px); }
.modal-inner { display: flex; flex-direction: column; max-height: 92vh; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem .8rem; border-bottom: 1px solid var(--hair); } .modal-head h2 { font-size: 1.9rem; }
.modal-body { padding: 1.1rem 1.3rem; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .9rem 1.3rem; border-top: 1px solid var(--hair); } .modal-foot .right { display: flex; gap: .5rem; }
.ed-photos { display: flex; flex-wrap: wrap; gap: .6rem; } .ed-ph { position: relative; margin: 0; width: 90px; height: 90px; overflow: hidden; } .ed-ph img { width: 100%; height: 100%; object-fit: cover; } .ed-ph .icon-btn { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; background: var(--card); }
.ed-add { display: grid; place-items: center; align-content: center; gap: .2rem; width: 90px; height: 90px; padding: .3rem; text-align: center; border: 1.5px dashed var(--accent); color: var(--accent-ink); font-size: .7rem; cursor: pointer; } .ed-add.busy { opacity: .6; } .ed-add:focus-within { outline: 2.5px solid var(--accent); }
.quick-modal { position: relative; padding: 1.4rem; display: grid; gap: 1rem; } .lm-close { position: absolute; top: .7rem; right: .7rem; } .q-h { font-size: 2.2rem; }
.q-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; } .q-tab { all: unset; cursor: pointer; display: grid; justify-items: center; gap: .2rem; padding: .55rem .2rem; border: 1px solid var(--line); font: 700 .66rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.q-tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .q-tab:focus-visible { outline: 2px solid var(--accent); }
.q-form { display: grid; gap: .8rem; } .q-tones { display: flex; flex-wrap: wrap; gap: .3rem; } .q-tone { cursor: pointer; } .q-tone input { position: absolute; opacity: 0; } .q-tone span { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--line); font-size: .8rem; } .q-tone input:checked + span { background: var(--accent); color: var(--on-accent); } .q-tone input:focus-visible + span { outline: 2px solid var(--accent); }
.q-io { display: grid; grid-template-columns: 1fr 1fr; } .q-io label { cursor: pointer; } .q-io input { position: absolute; opacity: 0; } .q-io span { display: block; padding: .5rem; text-align: center; border: 1px solid var(--line); font-weight: 650; } .q-io input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .q-io input:focus-visible + span { outline: 2px solid var(--accent); }
.lightbox { position: relative; display: grid; gap: .8rem; justify-items: center; } .lightbox figure { margin: 0; padding: 12px 12px 0; background: #FDFCF9; box-shadow: var(--shadow-lift); max-width: 100%; }
.lightbox img { max-height: 76vh; width: auto; max-width: 100%; margin: 0 auto; } .lightbox figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .2rem .7rem; color: #3B4A52; } .lightbox .hand { font: italic 500 1.4rem var(--hand); }
.lb-close { position: absolute; top: -12px; right: -12px; z-index: 2; background: var(--card); } .lb-prev, .lb-next { position: absolute; top: 45%; background: var(--card); box-shadow: var(--shadow); } .lb-prev { left: -14px; } .lb-next { right: -14px; } .lb-tools { display: flex; gap: .5rem; }
#toasts { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 300; display: grid; gap: .5rem; justify-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lift); font-size: .9rem; pointer-events: auto; animation: toastIn .25s ease-out; border-left: 4px solid var(--accent); } .toast.err { border-color: var(--bad); }
.toast button { all: unset; cursor: pointer; font-weight: 800; text-decoration: underline; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.pop { position: fixed; z-index: 400; pointer-events: none; } .pop i { position: absolute; width: 8px; height: 10px; border-radius: 1px; animation: popOut .9s ease-out forwards; } @keyframes popOut { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 400; }

/* ---------- Sign-in ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; background: var(--paper); }
.auth-art { position: relative; overflow: hidden; display: grid; padding: clamp(1.6rem, 4vw, 3.4rem); background: repeating-linear-gradient(90deg, var(--stripe-a) 0 26px, var(--stripe-b) 26px 52px); }
.aa-desk { position: relative; height: 340px; }
.aa-env { position: absolute; left: 0; top: 30px; width: 62%; height: 72%; background: var(--env); box-shadow: var(--shadow); transform: rotate(-4deg); }
.aa-card { position: absolute; left: 41%; top: 0; width: 46%; height: 82%; padding: 1.2rem; background: #F6EFDC; box-shadow: var(--shadow); transform: rotate(3deg); display: grid; align-content: start; gap: .3rem; color: #2B3D63; }
.aa-card b { font: 600 2.4rem/1 var(--serif); } .aa-card small { font: italic 500 1.4rem/1 var(--hand); } .aa-card i { display: block; height: 0; border-top: 2px dotted #2B3D63; opacity: .5; margin-top: 18px; }
.aa-pol { position: absolute; left: 8%; top: 52px; width: 34%; padding: 9px 9px 0; background: #FDFCF9; box-shadow: var(--shadow-lift); transform: rotate(-6deg); display: grid; }
.aa-pol-img { aspect-ratio: 1; background: linear-gradient(160deg, #F7C6A0, #E99A8D 45%, #9CB8D0 46%, #6F99BD); } .aa-pol small { padding: .4rem 0 .5rem; text-align: center; font: italic 500 1.2rem var(--hand); color: #3B4A52; }
.aa-wax { position: absolute; left: 68%; top: 64%; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--seal); color: var(--seal-ink); font: italic 500 2.4rem var(--hand); box-shadow: 0 3px 4px rgb(0 0 0 / .25), inset 0 0 0 8px color-mix(in srgb, var(--seal-ink) 18%, transparent); }
.aa-over { align-self: end; color: var(--ink); } .aa-kick { display: block; font: italic 500 2.2rem/1 var(--hand); color: var(--accent-ink); } .aa-over .wordmark { color: var(--accent-ink); }
.aa-lede { max-width: 48ch; font-size: 1.02rem; margin: .8rem 0 1rem; color: var(--ink); }
.aa-stats { display: flex; flex-wrap: wrap; gap: .6rem; } .aa-stats > span { display: grid; padding: .55rem .9rem; background: var(--card); box-shadow: var(--shadow); font-size: .8rem; } .aa-stats b { font: 600 1.6rem/1 var(--serif); color: var(--ink); }
.auth-form { display: grid; place-items: center; padding: 2rem 1.2rem; }
.auth-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 1rem; background: var(--card); padding: 2rem; box-shadow: var(--shadow); } .auth-card h2 { font-size: 2.6rem; }
.stack { display: grid; gap: .8rem; } .key-input { font: 600 1.1rem var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Print: the résumé only ---------- */
@media print {
  body.print-resume * { visibility: hidden; } body.print-resume .resume, body.print-resume .resume * { visibility: visible; }
  body.print-resume .resume { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; } body.print-resume .no-print, body.print-resume .pin { display: none !important; }
  .side, .topbar, .tabbar, .demo-band, #toasts { display: none !important; } .main-col { margin: 0 !important; } body { background: #fff; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1240px) { .metric-grid { grid-template-columns: 1fr 1fr; } .m-mood { grid-column: 1 / -1; } .focus-cols { grid-template-columns: 1fr 1fr; } .focus-cols .fc:last-child { grid-column: 1 / -1; } .wk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .home-row { grid-template-columns: 1fr; } .pj-board { grid-template-columns: 1fr 1fr; } .macro-rings { grid-template-columns: 1fr 1fr; } .three-col { grid-template-columns: 1fr; }
  .search { width: 180px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; } .desk { height: 330px; max-width: 560px; } .hero-pm { display: none; }
  .two-col, .metric-grid, .set-cols, .notes-layout, .folio-top { grid-template-columns: 1fr; } .folio-top .headshot { max-width: 240px; }
  .diary-e, .diary-e.flip { grid-template-columns: 1fr; } .diary-e .story, .diary-e.flip .story { order: 0; max-width: 300px; }
  .boarding { grid-template-columns: 1fr; } .bp-stub { border-left: 0; border-top: 2px dashed var(--hair); } .bp-pm { display: none; }
  .auth { grid-template-columns: 1fr; } .auth-art { min-height: 52vh; }
}
@media (max-width: 720px) {
  main.hub { padding: 1.1rem 1rem 6rem; }
  .topbar .search { display: none; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--hair); }
  .tabbar a, .tabbar button { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 1px; font: 700 .6rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .tabbar .ic { width: 22px; height: 22px; }
  .tabbar [aria-current="page"] { color: var(--accent-ink); } .tabbar .fab { justify-self: center; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: var(--on-accent); margin-top: -18px; box-shadow: var(--shadow-lift); }
  .tabbar a:focus-visible, .tabbar button:focus-visible { outline: 2px solid var(--accent); }
  .hub-head { gap: 1rem; } .stamp-no { width: 64px; height: 76px; } .stamp-no b { font-size: 2rem; } .hh-title { font-size: 2.6rem; }
  .ftabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-left: 0; } .ftab { flex: none; padding: .5rem .8rem .45rem; font-size: .66rem; }
  .focus-cols { grid-template-columns: 1fr; } .wk-grid { grid-template-columns: 1fr 1fr; } .pj-board { grid-template-columns: 1fr; }
  .desk { height: 300px; } .hello { font-size: 2.8rem; }
  .ledger li { grid-template-columns: 1fr auto; } .lg-c { grid-column: 1 / -1; }
  .lift-form { grid-template-columns: 1fr 1fr 1fr; } .lift-form .field:first-child { grid-column: 1 / -1; } .lift-form .btn { grid-column: 1 / -1; }
  .meal-grid { grid-template-columns: 54px repeat(3, minmax(0, 1fr)); gap: .3rem; } .mg-ph { display: none; } .mg-cell { grid-template-columns: 1fr; } .mg-cell .input { grid-column: 1; padding: .3rem 1.2rem .3rem .3rem; font-size: .72rem; background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%; }
  .person { grid-template-columns: 100px 1fr; } .rn { grid-template-columns: 80px 1fr; } .pod { grid-template-columns: 80px 1fr; }
  .clip-form { grid-template-columns: 1fr; } .clip-row { grid-template-columns: 1fr auto; } .cl-k { grid-column: 1 / -1; }
  .pomo-set { grid-template-columns: 1fr; } .pomo-ring { width: 210px; height: 210px; }
  .en-row { grid-template-columns: repeat(8, 1fr); } .en-grid, .en-avg { display: none; }
  .measure-dl { grid-template-columns: repeat(3, 1fr); } .ph-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .boxes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; } .lbox { padding: .5rem .2rem; } .lbox b { font-size: 1.4rem; }
  .cn-grid { grid-template-columns: 1fr; } .cn-cues { border-right: 0; border-bottom: 1.5px solid var(--margin); padding-right: 0; } .cn-notes { padding-left: 0; }
  .checks.two { grid-template-columns: 1fr; } .form-grid, .form-grid.three, .form-grid.four { grid-template-columns: 1fr 1fr; }
  .card.lined { padding-left: 2.3rem; background-image: linear-gradient(90deg, transparent 1.6rem, var(--margin) 1.6rem, var(--margin) calc(1.6rem + 1px), transparent calc(1.6rem + 1px)), repeating-linear-gradient(transparent 0 27px, var(--rule) 27px 28px); }
  .stamp-sheet { grid-template-columns: 1fr 1fr; gap: .8rem; } .stamp { min-height: 150px; padding: 18px 16px 16px; } .stamp b { font-size: 1.15rem; }
  .reel { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; } .masonry { columns: 2 140px; column-gap: .7rem; } .pin-grid { columns: 2 140px; column-gap: .8rem; }
  .tw-wrap, .tbl-wrap { margin-inline: -1rem; }
}
@media (max-width: 420px) { .tickets { grid-template-columns: 1fr 1fr; } .ticket b { font-size: 1.5rem; } .people { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } }
/* contrast touch-ups */
.prio { color: var(--bad); } .mg-d.today { color: var(--bad); }
.vault-card .pdrop { color: #2E2219; background: #FBF7F0; border-color: #8A7356; } .vault-card .pdrop small { color: #54463B; }
[data-theme="night"] .tg { background: color-mix(in srgb, var(--t1) 20%, var(--card)); color: var(--ink); }
[data-theme="night"] .tg:hover, [data-theme="night"] .tg.on { background: var(--accent); color: var(--on-accent); }
[data-theme="night"] .en:is(.e1,.e2,.e3) :is(b, small) { color: var(--ink); }
[data-theme="night"] .en.e4 { background: var(--c3); } [data-theme="night"] .en:is(.e4,.e5) :is(b, small) { color: #141414; }
[data-theme="night"] .hab.on { background: color-mix(in srgb, var(--t4) 22%, var(--card)); }
.metric-grid > * { min-width: 0; }

/* ---------- Daily, quarterly and yearly planners ---------- */
.input.day-pick { width: 160px; }
.day-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.day-side { display: grid; gap: 1.6rem; }
.day-tl .tl { grid-template-rows: repeat(var(--rows), 46px); }
.tl-slot { all: unset; cursor: pointer; position: absolute; inset: 0; } .tl-slot:hover { background: color-mix(in srgb, var(--t1) 28%, transparent); } .tl-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tl-b { z-index: 2; } .tl-now { z-index: 3; }
.day-task { margin-top: .8rem; } .dt-p { width: 7.2rem; flex: none; }
.also { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .also a { display: flex; align-items: center; gap: .5rem; text-decoration: none; font-size: .9rem; } .also a .ic { color: var(--accent); } .also a:hover { text-decoration: underline; }
.day-note { min-height: 140px; background: transparent; line-height: 28px; border-color: transparent; padding-top: 0; } .day-note:focus { background: var(--card); }
.q-prog { min-width: 220px; margin: 0 0 0 auto; }
.q-plan { display: grid; gap: .6rem; } .qp-row { display: flex; align-items: center; gap: .5rem; } .qp-row .cb { width: auto; padding: 0; } .q-plan .btn { justify-self: start; }
.q-objs { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .q-objs li { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; align-items: center; } .q-objs a { text-decoration: none; } .q-objs .meter { grid-column: 1; }
.q-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-bottom: 1rem; }
.mcal-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; } .mcal-h b { font: 600 1.6rem/1 var(--serif); color: var(--ink); } .mcal-h small { color: var(--muted); }
.mcal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mc-dn { font: 700 .62rem var(--sans); color: var(--muted); padding-bottom: .2rem; }
.mc-d { all: unset; cursor: pointer; position: relative; display: grid; place-items: center; aspect-ratio: 1; font: 600 .78rem var(--sans); border-radius: 3px; color: var(--ink); }
.mc-d:hover { background: var(--card2); } .mc-d:focus-visible { outline: 2px solid var(--accent); }
.mc-d.past { color: var(--muted); } .mc-d.key { background: color-mix(in srgb, var(--t1) 40%, transparent); }
.mc-d.today { background: var(--accent); color: var(--on-accent); }
.mc-d i { position: absolute; bottom: 3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--c5); }
.mc-d i.c1 { background: var(--c1); } .mc-d i.c2 { background: var(--c2); } .mc-d i.c3 { background: var(--c3); } .mc-d i.c4 { background: var(--c4); } .mc-d i.c6 { background: var(--c6); } .mc-d.today i { background: var(--on-accent); }
.kd-list { list-style: none; margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px dashed var(--hair); display: grid; gap: .35rem; font-size: .84rem; }
.kd-list li { display: flex; gap: .5rem; align-items: baseline; } .kd-list a { text-decoration: none; display: inline-flex; align-items: baseline; gap: .35rem; } .kd-list a:hover { text-decoration: underline; }
.kd-d { font: 600 1.15rem/1 var(--serif); color: var(--ink); min-width: 1.4rem; }
.kd-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c1); flex: none; } .kd-dot.c2 { background: var(--c2); } .kd-dot.c3 { background: var(--c3); } .kd-dot.c4 { background: var(--c4); } .kd-dot.c5 { background: var(--c5); } .kd-dot.c6 { background: var(--c6); }
.kd-list.sm { font-size: .78rem; }
.goals-head { margin-top: .6rem; }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 2rem 1.4rem; padding-top: .8rem; }
.goal h3 { font: 600 1.5rem/1.05 var(--serif); color: var(--ink); margin: .2rem 0 .6rem; }
.year-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.ym { padding: 1rem; } .ym.now { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1240px) { .year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .day-grid { grid-template-columns: 1fr; } .q-months { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .q-months, .year-grid { grid-template-columns: 1fr 1fr; gap: .7rem; } .ym, .qm { padding: .7rem; } .mcal-h b { font-size: 1.2rem; } .mc-d { font-size: .68rem; } .kd-list { display: none; } .q-prog { min-width: 0; width: 100%; } .day-pick { margin-left: 0; } }
@media (max-width: 720px) { .mc-d i { bottom: 1px; width: 4px; height: 4px; margin-left: -2px; } .mc-d { aspect-ratio: auto; height: 26px; } }

/* =====================================================================
   CACHE layer: Notion pages, Mac windows, blue Finder folders, iOS widgets
   (kept last so it wins)
   ===================================================================== */
:root { --clock: "SF Pro Rounded", -apple-system, "Inter Tight", "Inter", sans-serif; --mac-blue: #0A84FF; --mac-sel: #0A64D8; --win-r: 12px; --win-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 14px 30px -16px rgb(0 0 0 / .28);
  --tl: radial-gradient(circle at 6px 6px, #FF5F57 5px, #E2463F 5.5px, transparent 6px), radial-gradient(circle at 23px 6px, #FEBC2E 5px, #DEA123 5.5px, transparent 6px), radial-gradient(circle at 40px 6px, #28C840 5px, #1AAB29 5.5px, transparent 6px); }
[data-theme="night"] { --win-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 30px -14px rgb(0 0 0 / .7); }
html, body { background: var(--paper); }
body { font: 400 15px/1.55 var(--sans); color: var(--ink); }
h1, h2 { font-family: var(--serif); font-weight: 700; text-transform: none; letter-spacing: -.01em; color: var(--ink); }
h2 { font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
h1 em, h2 em, h3 em { font: inherit; font-style: normal; color: inherit; margin: 0; letter-spacing: inherit; }
h4 { font: 600 .68rem/1.3 var(--sans); letter-spacing: .06em; color: var(--ink2); }
::selection { background: rgb(35 131 226 / .22); color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.kick { font: 600 .68rem/1.3 var(--sans); letter-spacing: .06em; color: var(--ink2); }
.boot { font: 700 3rem var(--serif); text-transform: none; color: var(--ink); }
.empty-note { border: 1px dashed var(--hair); border-radius: 8px; }
.empty-note p { font: italic 400 1.05rem/1.4 var(--serif); color: var(--ink2); }
/* Notion colours: callouts (soft) and tags (stronger) */
.c-gray { --c: var(--cg); --t: var(--tg); } .c-brown { --c: var(--cb); --t: var(--tb); } .c-orange { --c: var(--co); --t: var(--to); } .c-yellow { --c: var(--cy); --t: var(--ty); } .c-green { --c: var(--cgr); --t: var(--tgr); }
.c-blue { --c: var(--cbl); --t: var(--tbl); } .c-purple { --c: var(--cp); --t: var(--tp); } .c-pink { --c: var(--cpk); --t: var(--tpk); } .c-red { --c: var(--cr); --t: var(--tr); }
.callout { background: var(--c, var(--cy)); border-radius: 6px; }
.tag { display: inline-flex; align-items: center; gap: .3rem; border: 0; border-radius: 4px; padding: .1rem .45rem; font: 500 .76rem/1.5 var(--sans); background: var(--t, var(--tg)); color: var(--ink); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.tag.t-yellow { background: var(--ty); } .tag.t-blue { background: var(--tbl); } .tag.t-green { background: var(--tgr); } .tag.t-pink { background: var(--tpk); } .tag.t-red { background: var(--tr); } .tag.t-purple { background: var(--tp); }
/* Highlighter labels become Notion tags */
.hilite { display: inline-block; transform: none !important; padding: .1rem .5rem; border-radius: 4px; font: 500 .78rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--tg); box-shadow: none; }
.hl-blue { background: var(--tbl); } .hl-butter { background: var(--ty); } .hl-pink { background: var(--tpk); } .hl-green, .hl-sage { background: var(--tgr); }

/* ---------- Controls ---------- */
.btn { border-radius: 6px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); font: 500 .85rem/1.2 var(--sans); padding: .45rem .8rem; box-shadow: 0 1px 2px rgb(15 15 15 / .04); text-transform: none; letter-spacing: 0; }
.btn:hover { background: var(--paper2); transform: none; } .btn:active { transform: none; }
.btn.solid { background: var(--blue); border-color: var(--blue); color: #fff; } .btn.solid:hover { background: color-mix(in oklab, var(--blue) 86%, #000); }
[data-theme="night"] .btn.solid { color: #0E1A24; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink2); } .btn.ghost:hover { background: var(--paper3); color: var(--ink); }
.btn.sm { padding: .3rem .6rem; font-size: .8rem; }
.icon-btn { border-radius: 6px; }
.input, select.input, textarea.input { border-radius: 6px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); }
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(35 131 226 / .18); outline: none; }
.segs { gap: 2px; padding: 0; border: 0; background: none; border-radius: 0; }
.segs button { padding: .25rem .6rem; border-radius: 5px; font: 500 .84rem var(--sans); color: var(--ink2); text-transform: none; letter-spacing: 0; background: none; border: 0; }
.segs button:hover { background: var(--paper3); color: var(--ink); }
.segs button[aria-pressed="true"] { background: var(--paper3); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 5px 5px 0 0; }
.chip { border-radius: 4px; font: 500 .8rem var(--sans); text-transform: none; letter-spacing: 0; }
.meter { border-radius: 99px; }

/* ---------- Shell: a Notion sidebar of blue folders, a quiet top bar with a breadcrumb ---------- */
@media (min-width: 1101px) { body.with-side .side { background: var(--paper2); border-right: 1px solid var(--hair); padding: .9rem .6rem 1rem; gap: .7rem; } }
.side-brand { gap: .6rem; padding: .2rem .4rem .3rem; border-radius: 6px; } .side-brand:hover { background: var(--paper3); }
.logo { width: 30px; height: 30px; background: none; -webkit-mask: none; mask: none; } .logo::after { content: none; } .logo svg { width: 30px; height: 30px; display: block; }
.side-brand b { font: 600 .98rem/1.2 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); } .side-brand small { font: 400 .76rem/1.2 var(--sans); color: var(--ink2); }
.side-dump { border-radius: 6px; border: 1px solid var(--hair); background: var(--card); padding: .2rem .2rem .2rem .6rem; }
.sd-go { border-radius: 5px; background: var(--blue); color: #fff; width: 26px; height: 26px; }
.side-link { gap: .55rem; padding: .3rem .5rem; border-radius: 5px; color: var(--ink2); font: 500 .86rem/1.3 var(--sans); }
.side-link .ic { width: 16px; height: 16px; color: var(--ink2); } .side-link .macf.mini { width: 17px; }
.side-link:hover { background: var(--paper3); color: var(--ink); }
.side-link[aria-current="page"], [data-theme="night"] .side-link[aria-current="page"] { background: var(--paper3); color: var(--ink); font-weight: 600; }
.side-foot { border-top: 1px solid var(--hair); }
.topbar { height: 46px; padding: 0 clamp(.7rem, 2vw, 1.2rem); gap: .6rem; background: color-mix(in oklab, var(--paper) 92%, transparent); border-bottom: 1px solid transparent; }
.wordmark { gap: .45rem; font: 600 .92rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); } .wordmark svg { width: 22px; height: 22px; }
.crumbs { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: .86rem; color: var(--ink); }
.cr-home, .cr-here { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .4rem; border-radius: 5px; text-decoration: none; color: var(--ink2); white-space: nowrap; }
.cr-here { color: var(--ink); overflow: hidden; text-overflow: ellipsis; } .cr-home:hover { background: var(--paper3); color: var(--ink); }
.crumbs .ic { width: 15px; height: 15px; } .crumbs .macf.mini { width: 16px; } .cr-sep { color: var(--ink3); }
.search { height: 32px; border-radius: 6px; background: var(--paper2); border: 1px solid var(--hair); width: 210px; padding: 0 .6rem; color: var(--ink3); }
.search-res { border-radius: 8px; border: 1px solid var(--hair); box-shadow: var(--shadow-lift); background: var(--card); }
.tb-btn { width: 32px; height: 32px; border-radius: 6px; border: 0; background: transparent; color: var(--ink2); }
.tb-btn:hover, .tb-btn[aria-current="page"] { background: var(--paper3); color: var(--ink); border: 0; }
.demo-band { background: var(--paper2); color: var(--ink); border-bottom: 1px solid var(--hair); }
.demo-band .demo-cta { color: var(--blue); }
.drawer { background: var(--paper2); } .dr-link { border-bottom: 0; border-radius: 5px; padding: .45rem .55rem; font-weight: 500; } .dr-link .ic { color: var(--ink2); } .dr-link[aria-current="page"] { background: var(--paper3); color: var(--ink); }
.tabbar { background: color-mix(in oklab, var(--paper) 94%, transparent); border-top: 1px solid var(--hair); } .fab { background: var(--blue); color: #fff; }
main.hub { max-width: 1320px; padding: 2.2rem clamp(1rem, 4vw, 3.4rem) 4rem; }

/* ---------- The blue folder ---------- */
.macf { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 2px rgb(10 60 120 / .16)); }
.mf-back { fill: #5AA5EC; } .mf-front { fill: #8DC6F7; } .mf-hi { stroke: #C3E1FB; stroke-width: 1.4; fill: none; }
.macf.mini { width: 18px; flex: none; filter: none; }

/* ---------- The page: cover banner, folder icon, serif title, properties, callout ---------- */
.banner { position: relative; z-index: 1; height: clamp(150px, 19vw, 250px); margin: -2.2rem calc(-1 * clamp(1rem, 4vw, 3.4rem)) 0; overflow: hidden; background: #E9EEF3; }
.banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--bpos, 50%); }
.banner .bn-default { object-position: 50% 60%; }
[data-theme="night"] .banner .bn-default { filter: brightness(.62) saturate(.9); }
.bn-tools { position: absolute; right: clamp(1rem, 4vw, 3.4rem); bottom: .8rem; display: flex; gap: .35rem; opacity: 0; transition: opacity .15s; }
.banner:hover .bn-tools, .banner:focus-within .bn-tools, .banner.drag .bn-tools { opacity: 1; }
@media (hover: none) { .bn-tools { opacity: 1; } }
.bn-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; height: 30px; padding: 0 .7rem; border-radius: 6px; background: rgb(255 255 255 / .92); color: #37352F; font: 500 .8rem var(--sans); box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
.bn-btn:hover { background: #fff; } .bn-btn:focus-visible { outline: 2px solid var(--mac-blue); } .bn-btn .ic { width: 15px; height: 15px; }
.banner.drag { outline: 3px dashed var(--mac-blue); outline-offset: -6px; }
.hub-head { display: block; margin: 0 0 1.4rem; }
.pg-icon { position: relative; z-index: 2; display: block; width: 78px; margin: 0 0 .5rem; }
.banner + .hub-head .pg-icon { transform: translateY(-40px); margin-bottom: -32px; }
.hh-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hh-title { font: 700 clamp(2rem, 4vw, 2.6rem)/1.15 var(--serif); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.hh-title em { font: inherit; line-height: inherit; }
.hh-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-self: auto; }
.hh-props { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .55rem 0 0; font-size: .86rem; color: var(--ink2); }
.hh-kick { display: inline-flex; align-items: center; gap: .35rem; padding: 0; margin: 0; background: none; transform: none; font: italic 400 .98rem var(--hand); letter-spacing: 0; color: var(--ink2); }
.hh-kick .ic { width: 14px; height: 14px; color: var(--ink3); }
[data-theme="night"] .hh-kick { color: var(--ink2); }
.hh-lede { max-width: none; margin: .9rem 0 0; padding: .75rem 1rem; color: var(--ink); font: 400 .95rem/1.5 var(--serif); }
/* Section tabs: little blue folders on a hairline, like a Finder path bar */
.ftabs { display: flex; flex-wrap: wrap; gap: .2rem; margin: 0 0 1.5rem; padding: .45rem 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ftab { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem; margin: 0; border: 0; border-radius: 6px; background: none; color: var(--ink2); font: 500 .86rem var(--sans); letter-spacing: 0; text-transform: none; text-decoration: none; }
.ftab:hover { background: var(--paper3); color: var(--ink); }
.ftab[aria-current="page"] { background: var(--mac-sel); color: #fff; border: 0; }
.ftab[aria-current="page"] .mf-back { fill: #CFE6FB; } .ftab[aria-current="page"] .mf-front { fill: #fff; }
.ftab:focus-visible { outline: 2px solid var(--blue); }

/* ---------- Boxes: Mac windows with traffic lights ---------- */
.card, .block { position: relative; border-radius: var(--win-r); border: 1px solid color-mix(in oklab, var(--ink) 11%, transparent); box-shadow: var(--win-shadow); background: var(--card); padding: 1rem 1.1rem 1.1rem; }
.card > .card-head { position: relative; display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin: -1rem -1.1rem .9rem; padding: .55rem 1.1rem; background: color-mix(in oklab, var(--paper2) 70%, var(--card)); border-bottom: 1px solid color-mix(in oklab, var(--ink) 9%, transparent); border-radius: var(--win-r) var(--win-r) 0 0; }
.card > .card-head::before, .block > .blk-h::before { content: ""; display: block; flex: none; width: 46px; height: 12px; background: var(--tl); }
.card > .card-head h2 { margin-right: auto; font: 600 1.02rem/1.3 var(--serif); color: var(--ink); text-transform: none; }
.card > .card-head h2 .ic { color: var(--ink2); }
.card > .card-head > div { margin-right: auto; }
.card.lined, .card.stamped { background-image: none; padding-left: 1.1rem; -webkit-mask: none; mask: none; }
.pin, .binder, .tape, .stamp-no, .postmark::after { display: none !important; }
.block { padding: 0 0 1.1rem; overflow: hidden; }
.block > .blk-h { display: flex; align-items: center; gap: .65rem; margin: 0 0 .2rem; padding: .55rem 1.1rem; font: 600 1.02rem var(--serif); background: color-mix(in oklab, var(--paper2) 70%, var(--card)); border-bottom: 1px solid color-mix(in oklab, var(--ink) 9%, transparent); }
.block > .blk-h .ic { display: none; }
.block > :not(.blk-h) { margin-inline: 1.1rem; }
.blk-d { margin: .6rem 1.1rem .9rem; font: italic 400 .98rem var(--hand); color: var(--ink2); }
.block.callout { display: block; background: var(--card); padding: 0 0 1.1rem; margin: 0; }
.hh-lede.callout { display: block; }
.sec-head { margin: 2rem 0 .9rem; } .sec-head h2 { font: 700 1.45rem var(--serif); }
/* Stat tickets: plain gallery cards with a coloured top edge */
.ticket { -webkit-mask: none; mask: none; border: 1px solid var(--hair); border-top: 3px solid var(--c1); border-left-width: 1px; border-radius: 10px; box-shadow: none; background: var(--card); }
.ticket.c2 { border-top-color: var(--c2); } .ticket.c3 { border-top-color: var(--c3); } .ticket.c4 { border-top-color: var(--c4); } .ticket.bad { border-top-color: var(--bad); }
.ticket b { font: 600 1.7rem/1.1 var(--serif); }
.rows li { border-bottom: 1px solid var(--hair); }
.cb > .ic { border-radius: 4px; border-width: 1.5px; } .cb.on > .ic { background: var(--blue); border-color: var(--blue); }

/* ---------- Photos: gallery cards instead of polaroids ---------- */
.pdrop { border: 1px dashed var(--ink3); border-radius: 8px; background: var(--paper2); color: var(--ink2); }
.pdrop:hover, .pdrop.drag { background: var(--paper3); }
.pdrop b { font: 600 .84rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.polaroid { transform: none !important; padding: 0; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--card); box-shadow: var(--win-shadow); color: var(--ink); }
[data-theme="night"] .polaroid { background: var(--card); }
.pol-img { background: var(--paper2); }
.polaroid figcaption { font: 500 .88rem/1.3 var(--sans); text-align: left; padding: .55rem .75rem .65rem; min-height: 0; color: var(--ink); }
.polaroid figcaption small { font: 400 .76rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink2); }
.m-tile { transform: none !important; padding: 0; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--card); box-shadow: none; color: var(--ink); }
[data-theme="night"] .m-tile { background: var(--card); }
.m-tile figcaption { font: 500 .86rem/1.3 var(--sans); text-align: left; padding: .5rem .7rem; color: var(--ink); } .m-tile figcaption small { font: 400 .74rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink2); }
.story { transform: none; border-radius: 26px; }
.wax b { font: 700 1.6rem/1 var(--serif); }
.postmark { color: color-mix(in oklab, var(--blue) 60%, transparent); }

/* ---------- Home ---------- */
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: .5rem .4rem; margin: 0 0 1.8rem; }
.folder { display: grid; justify-items: center; align-content: start; gap: .3rem; padding: .6rem .3rem .55rem; border-radius: 10px; text-decoration: none; color: var(--ink); text-align: center; }
.fd-art { display: block; width: 74%; max-width: 86px; transition: transform .15s; }
.folder:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); } .folder:hover .fd-art { transform: translateY(-2px); }
.fd-name { display: inline-block; padding: .1rem .45rem; border-radius: 5px; font: 500 .8rem/1.3 var(--sans); color: var(--ink); }
.folder:hover .fd-name, .folder:focus-visible .fd-name { background: var(--mac-sel); color: #fff; }
.folder:focus-visible { outline: none; }
.fd-stat { font-size: .72rem; line-height: 1.3; color: var(--ink2); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.6rem; align-items: start; }
.hg-main { display: grid; gap: 1.4rem; min-width: 0; }
.hg-main > .metrics .sec-head { margin-top: .6rem; }
.hg-right { display: grid; gap: 1rem; }
.widgets { display: grid; gap: 1rem; }
.w-clock { display: grid; justify-items: center; gap: .3rem; text-align: center; padding: 1.1rem .8rem 1rem; border-radius: 22px; background: linear-gradient(180deg, #1C1C1E, #000); color: #fff; box-shadow: var(--win-shadow); }
.ck-d { font: 600 .82rem var(--sans); color: #FF9F0A; }
.ck-t { display: grid; line-height: .86; } .ck-t b { display: block; font: 700 6rem/.86 var(--clock); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .ck-m { opacity: .92; }
.ck-ap { font: 600 .74rem var(--sans); letter-spacing: .14em; color: #AEAEB2; }
.w-cal { display: block; padding: .85rem .95rem .9rem; border-radius: 22px; background: var(--card); color: var(--ink); text-decoration: none; border: 1px solid color-mix(in oklab, var(--ink) 9%, transparent); box-shadow: var(--win-shadow); }
.wc-m { display: block; font: 700 .74rem var(--sans); color: #D93025; letter-spacing: .04em; margin-bottom: .35rem; } [data-theme="night"] .wc-m { color: #FF6961; }
.wc-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; font: 500 .74rem/1.75 var(--sans); }
.wc-g i { font-style: normal; color: var(--ink2); font-weight: 600; font-size: .66rem; }
.wc-g span { justify-self: center; width: 1.75em; } .wc-g span.on { background: #D93025; color: #fff; border-radius: 50%; font-weight: 700; }
.imsg { display: grid; gap: .3rem; padding: .2rem 0; }
.bub { position: relative; margin: 0; max-width: 90%; padding: .5rem .8rem; border-radius: 18px; font: 400 .87rem/1.35 var(--sans); }
.bub.out { justify-self: end; background: #0A6CDB; color: #fff; font-weight: 600; border-bottom-right-radius: 5px; }
.bub.in { justify-self: start; background: #E9E9EB; color: #111; border-bottom-left-radius: 5px; } [data-theme="night"] .bub.in { background: #3A3A3C; color: #F2F2F7; }
.bub.in a { color: inherit; text-decoration: none; } .bub.in a:hover { text-decoration: underline; }
.imsg-s { justify-self: end; font-size: .68rem; color: var(--ink2); }
.vibe-card .side-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--paper2); }
.vibe-card .side-photo img, .vibe-card .side-photo .pol-open { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vibe-card .side-photo .pdrop { position: absolute; inset: 0; min-height: 0; }
.cover-btn { position: absolute; left: 8px; bottom: 8px; display: inline-flex; gap: .35rem; align-items: center; padding: .28rem .55rem; border-radius: 6px; background: rgb(255 255 255 / .92); color: #37352F; font: 500 .76rem var(--sans); cursor: pointer; opacity: 0; transition: opacity .15s; }
.side-photo:hover .cover-btn, .side-photo:focus-within .cover-btn { opacity: 1; } @media (hover: none) { .cover-btn { opacity: 1; } }
.cover-btn .ic { width: 14px; height: 14px; }
.vibe-cap { margin: .45rem 0 0; font: 400 1.6rem/1.2 var(--script); text-align: center; }
.insights .ins-card { padding: .8rem .9rem; border-radius: 8px; background: var(--cy); font-size: .84rem; }
.ins-date { display: block; font: 600 .95rem var(--serif); }
.ins-card .clock-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 .55rem; }
.ins-card .year-bar { display: grid; gap: .25rem; margin: 0 0 .3rem; } .ins-card .year-bar small { color: var(--ink2); font-size: .74rem; }
.ins-card h3 { font: 700 .66rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); margin: .65rem 0 .25rem; }
.ins-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; } .ins-card li { display: flex; gap: .45rem; align-items: center; } .ins-card li .ic { width: 14px; height: 14px; color: var(--ink2); flex: none; }
.pcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.pcard { display: grid; text-decoration: none; color: var(--ink); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--card); transition: box-shadow .15s; }
.pcard:hover { box-shadow: var(--shadow-lift); }
.pc-cover { display: grid; place-items: center; padding: 1rem 1rem .6rem; background: #EEF1F5; } [data-theme="night"] .pc-cover { background: #23262B; } [data-theme="oat"] .pc-cover { background: #F1ECE2; }
.pc-fold { position: relative; display: block; width: 86%; max-width: 170px; }
.pc-fold b { position: absolute; left: 11%; right: 8%; bottom: 14%; font: 600 clamp(.95rem, 1.5vw, 1.3rem)/1.05 var(--sans); color: #0B4C8C; letter-spacing: -.01em; }
.pc-b { display: grid; gap: .35rem; justify-items: start; padding: .6rem .7rem .7rem; } .pc-b b { font-weight: 600; font-size: .86rem; }
.focus-cols { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }
.home-row { display: grid; gap: 1.4rem; }

@media (max-width: 1240px) { .home-grid { grid-template-columns: 1fr; } .hg-right { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; } .widgets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .pcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  main.hub { padding: 1.3rem 1rem 6rem; }
  .banner { margin: -1.3rem -1rem 0; height: 140px; } .bn-tools { right: .7rem; bottom: .6rem; } .bn-btn span { display: none; } .bn-btn { padding: 0 .55rem; }
  .pg-icon { width: 60px; } .banner + .hub-head .pg-icon { transform: translateY(-30px); margin-bottom: -24px; }
  .hh-title { font-size: 1.9rem; }
  .ftabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .ftabs::-webkit-scrollbar { display: none; } .ftab { flex: none; white-space: nowrap; }
  .folders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .widgets { grid-template-columns: 1fr; } .ck-t b { font-size: 5rem; }
  .search { display: none; }
}
@media print { .banner { display: none; } }
.hg-main .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.hg-main .metric-grid .m-heat, .hg-main .metric-grid .m-money { grid-column: 1 / -1; }
.hg-main .metric-grid .m-mood { grid-column: auto; }
.caps li { grid-template-columns: auto 1fr auto; align-items: center; border: 1px solid var(--hair); border-radius: 8px; box-shadow: none; }
.caps .cap-sort { grid-column: 3; opacity: .55; transition: opacity .15s; } .caps li:hover .cap-sort, .caps li:focus-within .cap-sort { opacity: 1; }
.fc h3 { font: 600 .7rem var(--sans); letter-spacing: .06em; color: var(--ink2); }
@media (max-width: 720px) { .hg-main .metric-grid { grid-template-columns: 1fr; } .caps li { grid-template-columns: auto 1fr; } .caps .cap-sort { grid-column: 2; opacity: 1; } }
.ticket.c2, .ticket.c3, .ticket.c4, .ticket.bad { border-color: var(--hair); }
.ticket.c2 { border-top-color: var(--c2); } .ticket.c3 { border-top-color: var(--c3); } .ticket.c4 { border-top-color: var(--c4); } .ticket.bad { border-top-color: var(--bad); }
.ticket { border-top: 3px solid var(--c1); }
[data-theme="night"] .pdrop, [data-theme="night"] .vc-add { background: var(--paper2); color: var(--ink2); } [data-theme="night"] .pdrop b { color: var(--ink); }
.vault-card, [data-theme="night"] .vault-card { background: var(--card); color: var(--ink); border: 1px solid var(--hair); border-top: 3px solid var(--c4); border-radius: 10px; box-shadow: var(--win-shadow); }
.vault-card .muted { color: var(--ink2); } .vault-card a { color: var(--ink); }
.vault-card.soon { border-top-color: var(--c3); } .vault-card.expired { border-top-color: var(--bad); }
.vault-card .link-plain, .vault-card h3, .vault-card b { color: var(--ink); }
/* ---------- Sign in: a Mac window holding a Notion page ---------- */
.auth-art { display: grid; place-items: center; padding: clamp(1.4rem, 5vw, 4rem); background: var(--paper2) !important; border-right: 1px solid var(--hair); color: var(--ink); overflow: hidden; }
.auth-art > :not(.aa-win) { display: none !important; }
.aa-win { position: relative; display: block; width: min(560px, 100%); border-radius: var(--win-r); overflow: hidden; background: var(--card); border: 1px solid color-mix(in oklab, var(--ink) 11%, transparent); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .4); }
.aa-bar { display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem; background: color-mix(in oklab, var(--paper2) 70%, var(--card)); border-bottom: 1px solid var(--hair); font: 600 .8rem var(--sans); color: var(--ink2); }
.aa-bar i { width: 46px; height: 12px; background: var(--tl); } .aa-bar b { font-weight: 600; }
.aa-cover { display: block; height: 130px; overflow: hidden; } .aa-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
[data-theme="night"] .aa-cover img { filter: brightness(.62); }
.aa-icon { position: relative; display: block; width: 64px; margin: -34px 0 0 1.6rem; }
.aa-body { display: grid; gap: .5rem; padding: .4rem 1.6rem 1.6rem; }
.aa-title { font: 700 2.4rem/1.1 var(--serif); color: var(--ink); }
.aa-kick { font: italic 500 1.05rem var(--hand); color: var(--ink2); margin-top: -.3rem; }
.aa-lede { display: block; margin: .3rem 0 .4rem; padding: .7rem .9rem; font: 400 .92rem/1.5 var(--serif); color: var(--ink); }
.aa-folders { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem .5rem; margin: .3rem 0 .4rem; }
.aa-f { display: grid; justify-items: center; gap: .25rem; } .aa-f .macf { width: 62%; } .aa-f small { font: 500 .74rem var(--sans); color: var(--ink); }
.aa-stats { display: flex; flex-wrap: wrap; gap: .35rem; }
.auth-card { border-radius: 14px; border: 1px solid var(--hair); box-shadow: var(--win-shadow); background: var(--card); }
.auth-card h2 { font: 700 2.2rem var(--serif); }
@media (max-width: 720px) { .aa-folders { grid-template-columns: repeat(4, 1fr); } .aa-cover { height: 90px; } }
/* ---------- A collapsible sidebar (laptop and up) ---------- */
.side-top { display: flex; align-items: center; gap: .3rem; }
.side-top .side-brand { flex: 1; min-width: 0; }
.side-toggle { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--ink2); opacity: .7; transition: opacity .15s, background .15s; }
.side-toggle .ic { width: 17px; height: 17px; }
.side:hover .side-toggle, .side-toggle:focus-visible { opacity: 1; }
.side-toggle:hover { background: var(--paper3); color: var(--ink); }
.side-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.side-open { display: none !important; }
@media (min-width: 1101px) {
  body.with-side .side { transition: transform .22s ease, visibility .22s; }
  body.with-side .main-col { transition: margin-left .22s ease; }
  body.with-side.side-off .side { transform: translateX(-100%); visibility: hidden; }
  body.with-side.side-off .main-col { margin-left: 0; }
  body.with-side.side-off .side-open { display: grid !important; }
  body.with-side.side-off .tb-brand { display: inline-flex !important; }
}
@media (max-width: 1100px) { .side-toggle { display: none; } }