/* =====================================================================
   HUB — the all-in-one second brain planner
   The atelier look: cream paper with a faint grid, ink outlines with a
   hard offset shadow, pastel folder cards, pinstriped bands, pill buttons,
   sparkle labels and a big serif title with one word in italic colour.
   Fraunces for titles, Figtree for reading, Yellowtail for the odd
   handwritten caption. Ten palettes: five soft, five neutral (two dark).
   ===================================================================== */
:root, [data-theme="powder"] {
  --paper: #FCF8F3; --surface: #FFFDF9; --surface2: #F5EFE7; --ink: #1F1C2C; --ink2: #4A4558; --muted: #6E6780; --edge: #1F1C2C; --hair: #E8E0D4; --grid: rgb(31 28 44 / .045);
  --t1: #BFDCF5; --t2: #F9C9DF; --t3: #F6E3A1; --t4: #CBE6CF; --t5: #DCCEF3; --t6: #F8D2BC; --on: #1F1C2C;
  --accent: #2A65A6; --accent2: #B83D76; --good: #2E7D4F; --warn: #A3620A; --bad: #B4232F;
  --c1: #3B74B5; --c2: #D0558D; --c3: #B07E0A; --c4: #3E9468; --c5: #8661C6;
  --stripe-a: var(--t1); --stripe-b: #D7E9F8;
}
[data-theme="lilac"] {
  --paper: #FBF8FC; --surface: #FFFEFF; --surface2: #F3EEF6; --ink: #26213A; --ink2: #4D4762; --muted: #6E6784; --edge: #26213A; --hair: #E7E0EC; --grid: rgb(38 33 58 / .045);
  --t1: #D9CCF4; --t2: #F8E7A6; --t3: #C7EBDA; --t4: #F6CFE0; --t5: #CFE0F7; --t6: #F7D7C2; --on: #26213A;
  --accent: #6345B0; --accent2: #A83F72; --good: #2E7D4F; --warn: #9A5C08; --bad: #B4232F;
  --c1: #7A5BC8; --c2: #C9548A; --c3: #B98A10; --c4: #3A9071; --c5: #3F7FC0;
  --stripe-a: var(--t1); --stripe-b: #E8DFF8;
}
[data-theme="matcha"] {
  --paper: #F8F6EE; --surface: #FFFEF9; --surface2: #EFEDE2; --ink: #22301F; --ink2: #47533F; --muted: #646F5C; --edge: #22301F; --hair: #E2DFD0; --grid: rgb(34 48 31 / .045);
  --t1: #C9DDBF; --t2: #F6D2B8; --t3: #EFE4C7; --t4: #D3E3EC; --t5: #E7D9EE; --t6: #F1C9C1; --on: #22301F;
  --accent: #3C6838; --accent2: #A6542A; --good: #2E7D4F; --warn: #94600C; --bad: #A9302C;
  --c1: #4F8A45; --c2: #D07443; --c3: #9C7E14; --c4: #4C86A8; --c5: #9A69A6;
  --stripe-a: var(--t1); --stripe-b: #DCE8D4;
}
[data-theme="apricot"] {
  --paper: #FFF8F1; --surface: #FFFDFA; --surface2: #F8EDE2; --ink: #2C211B; --ink2: #554238; --muted: #7A675D; --edge: #2C211B; --hair: #F0E2D4; --grid: rgb(44 33 27 / .045);
  --t1: #FFD3B0; --t2: #F9B8B0; --t3: #C9E2F5; --t4: #F8E6A0; --t5: #D5EBCB; --t6: #E6D3F2; --on: #2C211B;
  --accent: #A9452A; --accent2: #2F6CB0; --good: #2E7D4F; --warn: #94560A; --bad: #B4232F;
  --c1: #CC6A2F; --c2: #3E7DB8; --c3: #C2483F; --c4: #3E9468; --c5: #8661C6;
  --stripe-a: var(--t1); --stripe-b: #FFE3CC;
}
[data-theme="velvet"] {
  --paper: #1D1824; --surface: #262030; --surface2: #2F2839; --ink: #F4EEF6; --ink2: #D8CEDF; --muted: #AFA3B9; --edge: #E9DDF0; --hair: #3B3346; --grid: rgb(255 255 255 / .035);
  --t1: #A9CDF2; --t2: #F3A9CC; --t3: #F1DC92; --t4: #A9DDBB; --t5: #CDB8F2; --t6: #F5BE9C; --on: #1D1824;
  --accent: #9CC9F5; --accent2: #F5B3D3; --good: #7FD39E; --warn: #F2C470; --bad: #FF8A93;
  --c1: #7FB4EC; --c2: #EE8DBC; --c3: #E8C55A; --c4: #6FCB97; --c5: #B79AF0;
  --stripe-a: #2C2440; --stripe-b: #251F33; --shadow: 3px 3px 0 #0E0B12; --tk: .38;
}
[data-theme="oxford"] {
  --paper: #F5F3EE; --surface: #FDFCF9; --surface2: #ECE9E2; --ink: #18233A; --ink2: #3F4A5E; --muted: #5A6373; --edge: #18233A; --hair: #E1DDD4; --grid: rgb(24 35 58 / .045);
  --t1: #D6DCE6; --t2: #E5DCCB; --t3: #DCCB9E; --t4: #CFD8CC; --t5: #DCD3DF; --t6: #E3CDBF; --on: #18233A;
  --accent: #22406E; --accent2: #7D5E1E; --good: #2E6E4A; --warn: #8A5A0E; --bad: #A12A2A;
  --c1: #2F558C; --c2: #A9842E; --c3: #6E8A6A; --c4: #9C5B48; --c5: #6A6E9C;
  --stripe-a: #DEE3EB; --stripe-b: #EBEEF2;
}
[data-theme="olive"] {
  --paper: #F3F1E8; --surface: #FCFBF6; --surface2: #E9E6D9; --ink: #262A1C; --ink2: #4A4E3C; --muted: #5E6152; --edge: #262A1C; --hair: #DFDBCB; --grid: rgb(38 42 28 / .045);
  --t1: #D5D9BC; --t2: #E6D7B8; --t3: #CFC6A8; --t4: #C6D4CB; --t5: #DCD2C4; --t6: #E2C9B0; --on: #262A1C;
  --accent: #4C5826; --accent2: #85562A; --good: #3C6E3A; --warn: #8A5A0E; --bad: #A12A2A;
  --c1: #5E6E2E; --c2: #B07A3A; --c3: #6A8778; --c4: #9C5B48; --c5: #8C7A5A;
  --stripe-a: #DEE1CB; --stripe-b: #E9EBDB;
}
[data-theme="slate"] {
  --paper: #F2F3F4; --surface: #FCFCFD; --surface2: #E8EAEC; --ink: #1D2328; --ink2: #434B53; --muted: #5C646C; --edge: #1D2328; --hair: #DDE0E3; --grid: rgb(29 35 40 / .045);
  --t1: #D3DAE1; --t2: #DDDBD6; --t3: #C3CDD5; --t4: #D3DDD6; --t5: #D9D5DE; --t6: #E2D6CC; --on: #1D2328;
  --accent: #34526E; --accent2: #6A5A48; --good: #2E6E4A; --warn: #8A5A0E; --bad: #A12A2A;
  --c1: #3E6489; --c2: #8C7660; --c3: #5E8A86; --c4: #A0584A; --c5: #6E6A94;
  --stripe-a: #DCE1E6; --stripe-b: #E9ECEF;
}
[data-theme="espresso"] {
  --paper: #F6F1EA; --surface: #FDFBF8; --surface2: #EDE5DA; --ink: #2A1F18; --ink2: #50423A; --muted: #6E6058; --edge: #2A1F18; --hair: #E4DACD; --grid: rgb(42 31 24 / .045);
  --t1: #E3D2BF; --t2: #D9CBB8; --t3: #D3B798; --t4: #D2D8C6; --t5: #DDD0D6; --t6: #E6C7B3; --on: #2A1F18;
  --accent: #6B3F22; --accent2: #3F5B6B; --good: #3C6E3A; --warn: #8A5A0E; --bad: #A12A2A;
  --c1: #7B4A2A; --c2: #4A6E80; --c3: #B08A4A; --c4: #6E8A5E; --c5: #9A6A7A;
  --stripe-a: #EADDCF; --stripe-b: #F2E9DE;
}
[data-theme="graphite"] {
  --paper: #18191B; --surface: #212326; --surface2: #2A2D31; --ink: #ECEAE6; --ink2: #D0CDC7; --muted: #A3A09A; --edge: #D8D5CF; --hair: #34373B; --grid: rgb(255 255 255 / .03);
  --t1: #B8C6D3; --t2: #D7C08E; --t3: #A9BFAE; --t4: #C9B6A6; --t5: #B9B4CC; --t6: #D0B7A0; --on: #18191B;
  --accent: #B8C9DA; --accent2: #DCC694; --good: #8FCB9F; --warn: #E2B866; --bad: #F08A8A;
  --c1: #8FB0CF; --c2: #D6B46A; --c3: #8FB89A; --c4: #CF9A82; --c5: #A9A2D6;
  --stripe-a: #23272C; --stripe-b: #1E2124; --shadow: 3px 3px 0 #000; --tk: .38;
}

:root {
  --bw: 1.5px; --r: 18px; --r-sm: 12px; --side: 276px;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif; --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Yellowtail", "Brush Script MT", cursive; --hand: "Fraunces", "Iowan Old Style", Georgia, serif; --clock: "Fraunces", Georgia, serif;
  --soft: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px -12px rgb(0 0 0 / .18); --tk: 1;
  color-scheme: light;
}
:root, [data-theme] {
  --line: color-mix(in srgb, var(--ink) 15%, transparent); --rule: color-mix(in srgb, var(--ink) 8%, transparent); --margin: color-mix(in srgb, var(--ink) 10%, transparent);
  --paper2: var(--surface2); --paper3: color-mix(in srgb, var(--surface2) 55%, var(--hair)); --card: var(--surface); --card2: var(--surface2); --kraft: var(--surface2);
  --ink3: var(--muted); --accent-ink: var(--accent); --on-accent: var(--paper); --blue: var(--accent); --c6: var(--c5);
  --cg: var(--surface2); --cb: color-mix(in srgb, var(--t6) 40%, var(--surface)); --co: color-mix(in srgb, var(--t6) 45%, var(--surface)); --cy: color-mix(in srgb, var(--t3) 45%, var(--surface)); --cgr: color-mix(in srgb, var(--t4) 45%, var(--surface));
  --cbl: color-mix(in srgb, var(--t1) 45%, var(--surface)); --cp: color-mix(in srgb, var(--t5) 45%, var(--surface)); --cpk: color-mix(in srgb, var(--t2) 45%, var(--surface)); --cr: color-mix(in srgb, var(--t2) 55%, var(--surface));
  --tg: var(--surface2); --tb: var(--t6); --to: var(--t6); --ty: var(--t3); --tgr: var(--t4); --tbl: var(--t1); --tp: var(--t5); --tpk: var(--t2); --tr: var(--t2);
  --tape: color-mix(in srgb, var(--t3) 70%, transparent); --tape-pink: color-mix(in srgb, var(--t2) 70%, transparent); --tape-butter: color-mix(in srgb, var(--t3) 70%, transparent);
  --seal: var(--t2); --seal-ink: var(--on); --env: var(--surface2); --shadow-lift: var(--soft); --hard: 3px 3px 0 var(--edge);
}
[data-theme="velvet"], [data-theme="graphite"] { --hard: var(--shadow); 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; }
:is([data-theme="velvet"], [data-theme="graphite"]) .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); }
:is([data-theme="velvet"], [data-theme="graphite"]) .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); }
:is([data-theme="velvet"], [data-theme="graphite"]) .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; }
:is([data-theme="velvet"], [data-theme="graphite"]) .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; }
:is([data-theme="velvet"], [data-theme="graphite"]) .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; }
:is([data-theme="velvet"], [data-theme="graphite"]) .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); }
:is([data-theme="velvet"], [data-theme="graphite"]) .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); }
:is([data-theme="velvet"], [data-theme="graphite"]) .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; }
:is([data-theme="velvet"], [data-theme="graphite"]) .tg { background: color-mix(in srgb, var(--t1) 20%, var(--card)); color: var(--ink); }
:is([data-theme="velvet"], [data-theme="graphite"]) .tg:hover, :is([data-theme="velvet"], [data-theme="graphite"]) .tg.on { background: var(--accent); color: var(--on-accent); }
:is([data-theme="velvet"], [data-theme="graphite"]) .en:is(.e1,.e2,.e3) :is(b, small) { color: var(--ink); }
:is([data-theme="velvet"], [data-theme="graphite"]) .en.e4 { background: var(--c3); } :is([data-theme="velvet"], [data-theme="graphite"]) .en:is(.e4,.e5) :is(b, small) { color: #141414; }
:is([data-theme="velvet"], [data-theme="graphite"]) .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; } }

/* =====================================================================
   HUB layer: the atelier. Ink outlines, hard shadows, pastel folders,
   pinstripes and sparkles over the shared pieces above (kept last so it wins)
   ===================================================================== */
html, body { background-color: var(--paper); }
body { font: 400 15px/1.6 var(--sans); color: var(--ink); font-optical-sizing: auto;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; background-attachment: fixed; }
.plain body { background-image: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-transform: none; letter-spacing: -.015em; color: var(--ink); font-variation-settings: "SOFT" 50, "WONK" 0; }
h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.12; }
h3 { font: 600 1.05rem/1.25 var(--serif); }
h1 em, h2 em, h3 em { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1em; line-height: inherit; letter-spacing: inherit; text-transform: none; margin: 0; color: var(--accent); }
h4 { font: 600 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
::selection { background: color-mix(in srgb, var(--t1) 70%, transparent); color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.label, .kick, .fc h3 { display: inline-block; font: 600 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.hand { font-family: var(--script); font-weight: 400; letter-spacing: 0; color: var(--accent2); }
.plain .hand { font-family: var(--serif); font-style: italic; color: inherit; }
.boot { font: 600 3rem var(--serif); letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.spk { width: 18px; height: 18px; fill: var(--t3); stroke: var(--edge); stroke-width: 2; stroke-linejoin: round; flex: none; vertical-align: -3px; }
.plain .spk { display: none; }
.empty-note { border: 2px dashed color-mix(in srgb, var(--edge) 30%, var(--hair)); border-radius: var(--r-sm); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.empty-note p { font: italic 400 1.05rem/1.4 var(--serif); color: var(--ink2); }
.t1 { --tc: var(--t1); } .t2 { --tc: var(--t2); } .t3 { --tc: var(--t3); } .t4 { --tc: var(--t4); } .t5 { --tc: var(--t5); } .t6 { --tc: var(--t6); }
/* Tags, callouts and highlighter labels in the palette's pastels */
.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: var(--r-sm); }
.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .55rem; border: 1px solid color-mix(in srgb, var(--edge) 22%, transparent); border-radius: 999px; font: 600 .72rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; background: var(--t, var(--surface2)); color: var(--on); white-space: nowrap; }
.tag.t-yellow { background: var(--t3); } .tag.t-blue { background: var(--t1); } .tag.t-green { background: var(--t4); } .tag.t-pink { background: var(--t2); } .tag.t-red { background: var(--t2); } .tag.t-purple { background: var(--t5); }
.hilite { display: inline-block; transform: none !important; padding: .14rem .6rem; border: 1px solid color-mix(in srgb, var(--edge) 22%, transparent); border-radius: 999px; font: 600 .74rem/1.4 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--on); background: var(--t3); box-shadow: none; }
.hl-blue { background: var(--t1); } .hl-butter { background: var(--t3); } .hl-pink { background: var(--t2); } .hl-green, .hl-sage { background: var(--t4); }
:is([data-theme="velvet"], [data-theme="graphite"]) :is(.tag, .hilite) { color: var(--on); }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.05rem; border: var(--bw) solid var(--edge); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .86rem/1.1 var(--sans); letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; }
.btn:hover { background: var(--surface2); transform: none; } .btn:active { transform: translateY(1px); }
.btn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.solid:hover { background: var(--ink); box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 60%, var(--t1)); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--surface2); border-color: var(--hair); }
.btn.sm { padding: .42rem .8rem; font-size: .8rem; } .btn.sm .ic { width: 15px; height: 15px; }
.icon-btn { border-radius: 999px; border: var(--bw) solid transparent; color: var(--ink); }
.icon-btn:hover { background: var(--surface2); border-color: var(--hair); }
.input, select.input, textarea.input { border: var(--bw) solid color-mix(in srgb, var(--edge) 35%, var(--hair)); border-radius: 12px; background: var(--surface); color: var(--ink); }
.input:focus { outline: 2.5px solid var(--accent); outline-offset: 0; border-color: var(--edge); box-shadow: none; }
.segs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: var(--bw) solid var(--edge); border-radius: 999px; background: var(--surface); }
.segs button { padding: .34rem .8rem; border: 0; border-radius: 999px; background: none; color: var(--ink2); font: 600 .8rem var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; }
.segs button:hover { background: var(--surface2); color: var(--ink); }
.segs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .36rem .8rem; border: var(--bw) solid var(--hair); border-radius: 999px; background: var(--surface); font: 600 .8rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink2); cursor: pointer; }
.chip:hover { border-color: var(--edge); }
.chip[aria-pressed="true"], .chip.on, .chip:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.meter { height: 9px; border-radius: 99px; border: var(--bw) solid var(--edge); background: var(--surface); overflow: hidden; }
.meter i { border-radius: 0; background: var(--ink); }
.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(--c5); }
.cb > .ic { border-radius: 50%; border: var(--bw) solid var(--edge); } .cb.on > .ic { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tick { border-radius: 50%; border: var(--bw) solid var(--edge); background: var(--surface); }
.task.done .tick, .tick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.switch input { accent-color: var(--ink); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--ink); }

/* ---------- Shell: the sticky sidebar with every hub and its pages ---------- */
@media (min-width: 1101px) { body.with-side .side { width: var(--side); background: var(--surface); border-right: var(--bw) solid var(--hair); padding: 1.2rem .9rem 1rem; gap: .9rem; } body.with-side .main-col { margin-left: var(--side); } }
.side-brand { display: flex; align-items: center; gap: .7rem; padding: 0 .4rem; border-radius: 12px; text-decoration: none; color: var(--ink); }
.side-brand:hover { background: none; }
.side-brand b { display: block; font: 600 1.55rem/1 var(--serif); letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.side-brand small { display: block; margin-top: .2rem; font: 400 .74rem/1.2 var(--sans); color: var(--muted); }
.logo { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 12px; border: var(--bw) solid var(--edge); background: repeating-linear-gradient(90deg, var(--stripe-a) 0 6px, var(--stripe-b) 6px 12px); -webkit-mask: none; mask: none; }
.logo::after { content: none; }
.logo .spk { width: 22px; height: 22px; fill: var(--surface); display: block; }
.plain .logo .spk { display: block; }
.side-dump { display: flex; align-items: center; gap: .3rem; padding: .25rem .25rem .25rem .8rem; border: var(--bw) solid var(--edge); border-radius: 999px; background: var(--surface2); }
.side-dump:focus-within { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.side-dump input { font-size: .88rem; padding: .4rem 0; }
.sd-go { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.side-nav { display: grid; gap: .1rem; }
.side-link, .pillar > summary { display: flex; align-items: center; gap: .65rem; padding: .48rem .6rem; border-radius: 10px; text-decoration: none; font: 500 .92rem/1.3 var(--sans); color: var(--ink); cursor: pointer; list-style: none; }
.pillar > summary::-webkit-details-marker { display: none; }
.side-link .ic, .pillar > summary .ic { width: 19px; height: 19px; color: var(--ink); }
.side-link:hover, .pillar > summary:hover { background: var(--surface2); color: var(--ink); }
.side-link[aria-current="page"], .pillar > summary[aria-current="true"], :is([data-theme="velvet"], [data-theme="graphite"]) .side-link[aria-current="page"] { background: color-mix(in srgb, var(--t1) calc(70% * var(--tk)), var(--surface)); color: var(--ink); font-weight: 600; }
.pillar > summary span { flex: 1; min-width: 0; }
.pillar .chev { width: 14px !important; height: 14px !important; opacity: .55; transition: transform .2s; }
.pillar[open] .chev { transform: rotate(180deg); }
.subs { display: grid; gap: 1px; margin: .15rem 0 .45rem 1.55rem; padding-left: .7rem; border-left: var(--bw) solid var(--hair); }
.subs a { padding: .3rem .55rem; border-radius: 8px; text-decoration: none; font-size: .85rem; color: var(--ink2); }
.subs a:hover { background: var(--surface2); color: var(--ink); }
.subs a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--surface2); box-shadow: inset 3px 0 0 var(--accent); }
.side-foot { margin-top: auto; padding-top: .6rem; border-top: var(--bw) solid var(--hair); }
.topbar { height: 54px; padding: 0 clamp(.8rem, 2.6vw, 2.6rem); gap: .6rem; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); border-bottom: var(--bw) solid transparent; }
.wordmark { display: inline-flex; align-items: center; gap: .55rem; font: 600 1.3rem/1 var(--serif); letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.wordmark .logo { width: 32px; height: 32px; border-radius: 9px; } .wordmark .logo .spk { width: 18px; height: 18px; }
.crumbs { display: flex; align-items: center; gap: .3rem; min-width: 0; font: 600 .7rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink2); }
.cr-home, .cr-here { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border-radius: 999px; text-decoration: none; color: var(--ink2); white-space: nowrap; }
.cr-here { color: var(--ink); overflow: hidden; text-overflow: ellipsis; } .cr-home:hover { background: var(--surface2); color: var(--ink); }
.crumbs .ic { width: 14px; height: 14px; } .cr-sep { color: var(--muted); }
.search { height: 38px; width: 230px; padding: 0 .9rem; border: var(--bw) solid color-mix(in srgb, var(--edge) 35%, var(--hair)); border-radius: 999px; background: var(--surface); color: var(--muted); }
.search:focus-within { outline: 2.5px solid var(--accent); outline-offset: 1px; border-color: var(--edge); }
.search-res { border: var(--bw) solid var(--edge); border-radius: 14px; box-shadow: var(--hard); background: var(--surface); }
.tb-btn { width: 38px; height: 38px; border-radius: 50%; border: var(--bw) solid transparent; background: transparent; color: var(--ink); }
.tb-btn:hover, .tb-btn[aria-current="page"] { background: var(--surface2); border-color: var(--hair); color: var(--ink); }
.demo-band { background: var(--ink); color: var(--paper); border: 0; font-size: .8rem; }
.demo-band b { color: var(--paper); } .demo-band .demo-cta, .demo-band a { color: var(--paper); font-weight: 600; }
.drawer { background: var(--surface); } .dr-link { border-bottom: 0; border-radius: 10px; padding: .5rem .6rem; font-weight: 500; } .dr-link .ic { color: var(--ink); } .dr-link[aria-current="page"] { background: color-mix(in srgb, var(--t1) calc(70% * var(--tk)), var(--surface)); color: var(--ink); }
.tabbar { background: var(--surface); border-top: var(--bw) solid var(--hair); }
.tabbar .fab, .fab { background: var(--ink); color: var(--paper); border: 3px solid var(--surface); box-shadow: var(--soft); }
.tabbar [aria-current="page"] .ic { color: var(--accent); }
main.hub { max-width: 1280px; margin: 0 auto; padding: 1.2rem clamp(1rem, 3vw, 2.6rem) 4rem; display: flex; flex-direction: column; }
main.hub > * { min-width: 0; }
main.hub > .ftabs { order: -1; }

/* ---------- The page: tabs on top, a sparkle pill, a big serif title ---------- */
.ftabs { display: flex; gap: .2rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 .4rem; padding: 0 .1rem; border: 0; border-bottom: var(--bw) solid var(--hair); }
.ftabs::-webkit-scrollbar { display: none; }
.ftab { flex: none; display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 -1.5px; padding: .7rem .85rem .75rem; border: 0; border-bottom: 2.5px solid transparent; border-radius: 0; background: none; color: var(--muted); font: 600 .88rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; }
.ftab:hover { color: var(--ink); background: none; }
.ftab[aria-current="page"] { color: var(--ink); background: none; border-bottom-color: var(--ink); }
.hub-head.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin: 0 0 1.6rem; padding: 1.3rem 0 0; }
.ph-text { max-width: 48rem; min-width: 0; }
.kicker { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .75rem; padding: .32rem .85rem .32rem .55rem; border: var(--bw) solid var(--edge); border-radius: 999px; background: var(--tc, var(--t2)); color: var(--on); font: 600 .7rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.kicker b { font-weight: 700; } .kicker i { font-style: normal; opacity: .6; }
.plain .kicker .spk { display: none; }
.hh-title { font: 600 clamp(2.3rem, 5vw, 3.5rem)/1.04 var(--serif); letter-spacing: -.025em; color: var(--ink); text-transform: none; }
.hh-title em { font-style: italic; font-weight: 500; }
.hh-lede { max-width: 62ch; margin: .8rem 0 0; padding: 0; background: none; font: 400 1.02rem/1.55 var(--sans); color: var(--ink2); }
.hh-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.hbadge { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: var(--bw) solid var(--edge); border-radius: 13px; background: repeating-linear-gradient(90deg, var(--tc, var(--t1)) 0 6px, color-mix(in srgb, var(--tc, var(--t1)) 55%, var(--surface)) 6px 12px); color: var(--on); }
.hbadge .ic { width: 22px; height: 22px; }

/* ---------- Cards: an ink outline, rounded corners and a hard shadow ---------- */
.card, .block { position: relative; padding: 1.3rem 1.4rem; border: var(--bw) solid var(--edge); border-radius: var(--r); background: var(--surface); box-shadow: var(--hard); min-width: 0; }
.card.tone { background: color-mix(in srgb, var(--tc) calc(46% * var(--tk)), var(--surface)); }
.card > .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0; background: none; border: 0; border-radius: 0; }
.card > .card-head::before, .block > .blk-h::before { content: none; }
.card > .card-head h2 { margin: 0; font: 600 clamp(1.25rem, 2vw, 1.5rem)/1.12 var(--serif); letter-spacing: -.015em; color: var(--ink); text-transform: none; }
.card > .card-head h2 .ic { color: var(--ink2); }
.card > .card-head .label { display: block; margin-bottom: .3rem; }
.card > .card-head > .ch-t { min-width: 0; margin-right: auto; }
.card > .card-head > div:not(.ch-t) { margin-right: 0; }
.card.lined, .card.stamped { background-image: none; padding-left: 1.4rem; -webkit-mask: none; mask: none; }
.pin, .binder, .stamp-no, .postmark::after { display: none !important; }
.tape { display: none !important; }
.block { padding: 1.3rem 1.4rem; overflow: visible; }
.block > .blk-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; padding: 0; font: 600 1.4rem/1.15 var(--serif); background: none; border: 0; }
.block > .blk-h .ic { width: 20px; height: 20px; }
.block > :not(.blk-h) { margin-inline: 0; }
.blk-d { margin: 0 0 1rem; font: 400 .92rem var(--sans); color: var(--ink2); }
.block.callout { display: block; background: var(--surface); padding: 1.3rem 1.4rem; margin: 0; }
.sec-head { display: grid; gap: .3rem; margin: 2.2rem 0 1.1rem; }
.sec-head h2 { font: 600 clamp(1.6rem, 3vw, 2.1rem)/1.08 var(--serif); letter-spacing: -.02em; }
.sec-head p { margin: 0; }
.ticket { -webkit-mask: none; mask: none; padding: 1rem 1.1rem; border: var(--bw) solid var(--edge); border-radius: 14px; box-shadow: none; background: var(--surface); }
.ticket.c2, .ticket.c3, .ticket.c4, .ticket.bad { border-color: var(--edge); }
.ticket { border-top: var(--bw) solid var(--edge); }
.ticket b { font: 600 1.75rem/1.1 var(--serif); letter-spacing: -.02em; }
.ticket.bad b { color: var(--bad); }
.rows li { border-bottom: 1px solid var(--hair); }
.two-col, .three-col { gap: 1.3rem; }

/* ---------- Photos: framed photos and polaroids ---------- */
.pdrop { border: 2px dashed color-mix(in srgb, var(--edge) 40%, var(--hair)); border-radius: var(--r); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--stripe-a) 45%, var(--surface)) 0 14px, var(--surface) 14px 28px); color: var(--ink2); }
.pdrop:hover, .pdrop.drag { border-color: var(--edge); background: var(--surface2); }
.pd-ic { background: var(--t3); border: var(--bw) solid var(--edge); color: var(--on); }
.pdrop b { font: 600 .9rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.polaroid { transform: rotate(var(--tilt, -1deg)); padding: 8px 8px 0; border: 0; border-radius: 6px; overflow: visible; background: #FFFEFB; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 14px 28px -16px rgb(0 0 0 / .45); color: #2A2530; }
.plain .polaroid { transform: none; }
.pol-img { border-radius: 3px; overflow: hidden; background: var(--surface2); }
.polaroid figcaption { padding: .55rem .4rem .7rem; min-height: 0; text-align: center; font: 400 1.2rem/1.2 var(--script); color: #9B3768; }
.plain .polaroid figcaption { font: 600 .85rem var(--sans); color: #2A2530; }
.polaroid figcaption small { display: block; font: 600 .66rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6E6780; }
:is([data-theme="velvet"], [data-theme="graphite"]) .polaroid { background: #F6F1EA; }
.m-tile { transform: none !important; padding: 7px; border: 0; border-radius: 6px; overflow: hidden; background: #FFFEFB; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 12px 24px -16px rgb(0 0 0 / .45); color: #2A2530; }
.m-tile img { border-radius: 3px; }
.m-tile figcaption { padding: .45rem .25rem .2rem; text-align: left; font: 500 .86rem/1.3 var(--sans); color: #2A2530; }
.m-tile figcaption small { font: 600 .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #6E6780; }
:is([data-theme="velvet"], [data-theme="graphite"]) .m-tile { background: #F6F1EA; }
.m-tile .link-plain { color: #2A2530; }
.story { transform: none; border-radius: 26px; border: var(--bw) solid var(--edge); box-shadow: var(--hard); }
.wax b { font: 600 1.6rem/1 var(--serif); }
.postmark { color: color-mix(in srgb, var(--accent) 60%, transparent); }

/* ---------- Home: the grand vision board ---------- */
.vision-hero { position: relative; margin: .4rem 0 2.4rem; padding: 1.1rem; border: var(--bw) solid var(--edge); border-radius: 26px; background: repeating-linear-gradient(90deg, var(--stripe-a) 0 18px, var(--stripe-b) 18px 36px); box-shadow: var(--hard); }
.plain .vision-hero { background: var(--surface); box-shadow: var(--soft); border-color: var(--hair); }
.vh-bar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 .2rem 1rem; }
.vh-bar .kicker { margin: 0; }
.vh-tools { display: flex; gap: .4rem; flex-wrap: wrap; }
.vh-tools .btn:not(.ghost) { background: var(--surface); }
.vh-tools .btn.ghost { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.collage { display: grid; gap: .9rem; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 118px; }
.collage .cl { all: unset; cursor: zoom-in; position: relative; display: block; overflow: hidden; border-radius: 6px; background: #FFFEFB; padding: 7px; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 14px 28px -16px rgb(0 0 0 / .45); transition: transform .2s; }
.collage .cl img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }
.collage .cl:hover { transform: translateY(-3px) rotate(0deg) !important; z-index: 2; }
.collage .cl:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.collage .cap { position: absolute; left: 14px; bottom: 12px; padding: .2rem .7rem; border-radius: 999px; background: rgb(255 254 251 / .93); font-size: 1.05rem; line-height: 1.2; color: #9B3768; max-width: calc(100% - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plain .collage .cap { font-family: var(--sans); font-size: .78rem; font-weight: 600; color: #2A2530; }
.collage .c0 { grid-column: span 3; grid-row: span 3; transform: rotate(-1deg); }
.collage .c1 { grid-column: span 2; grid-row: span 2; transform: rotate(1.4deg); }
.collage .c2 { grid-column: span 1; grid-row: span 2; transform: rotate(-1.2deg); }
.collage .c3 { grid-column: span 1; grid-row: span 1; transform: rotate(1deg); }
.collage .c4 { grid-column: span 2; grid-row: span 1; transform: rotate(-.6deg); }
.collage .c5, .collage .c6, .collage .c7, .collage .c8 { grid-column: span 1; grid-row: span 1; transform: rotate(.8deg); }
.collage .c6 { transform: rotate(-1deg); } .collage .c8 { transform: rotate(-.5deg); }
.plain .collage .cl { transform: none; padding: 0; background: none; border-radius: var(--r-sm); }
.collage.n1 .c0 { grid-column: 1 / -1; }
.collage.n2 .c0, .collage.n2 .c1 { grid-column: span 3; grid-row: span 3; }
.collage.n3 .c1, .collage.n3 .c2 { grid-column: span 3; } .collage.n3 .c1 { grid-row: span 2; } .collage.n3 .c2 { grid-row: span 1; }
.aff-card { position: absolute; right: 2rem; bottom: -1.3rem; z-index: 3; display: grid; gap: .1rem; max-width: 360px; margin: 0; padding: .85rem 1.2rem .95rem; border: var(--bw) solid var(--edge); border-radius: 14px; background: var(--surface); box-shadow: var(--hard); font: italic 500 1.35rem/1.2 var(--serif); color: var(--ink); text-decoration: none; transform: rotate(1.2deg); }
.aff-card .label { font-style: normal; }
.aff-card small { font: 400 .86rem/1.35 var(--sans); font-style: normal; color: var(--ink2); }
.aff-card:hover { transform: rotate(0); }
.plain .aff-card { transform: none; box-shadow: var(--soft); }
.vision-hero.empty-hero { display: block; padding: 1.4rem; }
.vision-hero .vdrop { min-height: 190px; margin: 0 0 1rem; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.vision-hero.empty-hero .aff-card { position: relative; right: auto; bottom: auto; transform: none; }

/* Home: the greeting, now and next */
.greet { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin: 0 0 1rem; }
.greet .label { margin-bottom: .4rem; display: block; }
.greet-h { font: 600 clamp(2.3rem, 5vw, 3.6rem)/1.04 var(--serif); letter-spacing: -.025em; }
.greet-h em { color: var(--accent2); }
.nownext { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 2rem; padding: .85rem 1.3rem; border: var(--bw) solid var(--edge); border-radius: 999px; background: var(--surface); box-shadow: var(--hard); }
.nownext div { display: grid; gap: .15rem; min-width: 0; } .nownext b { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15rem; } .nownext small { font-size: .78rem; color: var(--muted); }
.home-acts { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.home-grid.low { margin-top: .4rem; }
.hg-main, .hg-right { display: grid; gap: 1.4rem; min-width: 0; }
.hg-main > .metrics .sec-head { margin-top: .4rem; }
.focus-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 1rem; }
.focus-card .fc { padding: .9rem 1rem; border: var(--bw) solid color-mix(in srgb, var(--edge) 35%, var(--hair)); border-radius: 14px; background: var(--surface); }
.focus-card .fc h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; }
.focus-card .fc h3 .ic { width: 15px; height: 15px; }
.task { border-radius: 12px; }
.tasks.top .task { background: var(--surface); }
.hab { border-radius: 999px; border: var(--bw) solid color-mix(in srgb, var(--edge) 30%, var(--hair)); background: var(--surface); }
.hab.on { background: color-mix(in srgb, var(--t4) calc(80% * var(--tk)), var(--surface)); border-color: var(--edge); color: var(--ink); }
.meets li { border-radius: 10px; }
/* the planners as file folders */
.planners-blk .sec-head { margin-top: .4rem; }
.pcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem 1rem; padding-top: 1.3rem; }
.pcard.folder { position: relative; display: flex; text-decoration: none; color: var(--on); padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
.pcard .folder-body { position: relative; z-index: 1; flex: 1; display: grid; gap: .35rem; align-content: start; justify-items: start; padding: 1rem 1rem .9rem; border: var(--bw) solid var(--edge); border-radius: 0 var(--r) var(--r) var(--r); background: var(--tc, var(--t1)); color: var(--on); box-shadow: var(--hard); transition: transform .15s; }
.pcard .folder-body::before { content: ""; position: absolute; left: -1.5px; top: -1.2rem; width: 46%; height: 1.3rem; background: var(--tc, var(--t1)); border: var(--bw) solid var(--edge); border-bottom: 0; border-radius: 12px 16px 0 0; }
.pcard .folder-body::after { content: ""; position: absolute; left: 0; right: 54%; top: -1px; height: 3px; background: var(--tc, var(--t1)); }
.pcard:hover .folder-body { transform: translateY(-2px); }
.pcard .label { color: var(--on); opacity: .8; }
.pc-t { font: 600 1.5rem/1.05 var(--serif); letter-spacing: -.02em; }
.pcard .tag { background: var(--surface); color: var(--ink); }
/* the hubs as coloured tiles */
.hubs-sec .sec-head { margin-top: 2.6rem; }
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: .9rem; margin: 0 0 1rem; }
.folder.pillar-tile { display: flex; align-items: center; gap: .8rem; padding: .95rem 1rem; border: var(--bw) solid var(--edge); border-radius: var(--r); background: color-mix(in srgb, var(--tc) calc(40% * var(--tk)), var(--surface)); color: var(--ink); text-decoration: none; text-align: left; justify-items: start; transition: transform .15s, box-shadow .15s; }
.folder.pillar-tile:hover { background: color-mix(in srgb, var(--tc) calc(55% * var(--tk)), var(--surface)); transform: translateY(-2px); box-shadow: var(--hard); }
.folder.pillar-tile:focus-visible { outline: 2.5px solid var(--accent); }
.fd-txt { display: grid; gap: .1rem; min-width: 0; }
.fd-no { font: 600 .64rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.fd-name { display: block; padding: 0; background: none !important; font: 600 1.06rem/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink) !important; }
.fd-stat { font-size: .78rem; line-height: 1.3; color: var(--ink2); }
/* down the side */
.money-card .mm-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 .9rem; }
.money-card .mm-figs > div { display: grid; gap: .1rem; }
.mm-n { font: 600 1.7rem/1.1 var(--serif); letter-spacing: -.02em; }
.mm-last { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.mm-last li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; font-size: .9rem; }
.mm-last .ic { width: 16px; height: 16px; color: var(--ink2); }
.nudge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.nudge-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; padding: .65rem .8rem; border: var(--bw) solid color-mix(in srgb, var(--edge) 30%, var(--hair)); border-radius: 12px; background: var(--surface); font-size: .92rem; }
.nudge-list a { color: var(--ink); text-decoration: none; } .nudge-list a:hover { text-decoration: underline; }
.nudge-list .spk { margin-top: 2px; width: 16px; height: 16px; }
.w-cal { display: block; padding: 1.2rem 1.3rem 1.25rem; color: var(--ink); text-decoration: none; }
.w-cal .label { display: block; margin-bottom: .3rem; }
.wc-m { display: block; margin: 0 0 .7rem; font: 600 1.4rem/1.1 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.wc-m em { font-style: italic; font-weight: 500; color: var(--accent); }
.wc-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 0; text-align: center; font: 500 .82rem/2 var(--sans); }
.wc-g i { font-style: normal; color: var(--muted); font-weight: 600; font-size: .68rem; letter-spacing: .08em; }
.wc-g span { justify-self: center; width: 2em; } .wc-g span.on { background: var(--ink); color: var(--paper); border-radius: 50%; font-weight: 700; }
.vibe-card .side-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #FFFEFB; padding: 7px; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 14px 28px -16px rgb(0 0 0 / .45); transform: rotate(-1deg); }
.plain .vibe-card .side-photo { transform: none; }
.vibe-card .side-photo img, .vibe-card .side-photo .pol-open { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: cover; border-radius: 3px; }
.vibe-card .side-photo.empty { padding: 0; background: none; box-shadow: none; transform: none; }
.vibe-card .side-photo .pdrop { position: absolute; inset: 0; min-height: 0; }
.cover-btn { position: absolute; left: 14px; bottom: 14px; display: inline-flex; gap: .35rem; align-items: center; padding: .3rem .7rem; border: var(--bw) solid #1F1C2C; border-radius: 999px; background: #FFFEFB; color: #1F1C2C; font: 600 .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: .8rem 0 0; font: 400 1.6rem/1.2 var(--script); text-align: center; color: var(--accent2); }
.plain .vibe-cap { font: italic 500 1.1rem var(--serif); }
.insights .ins-card { padding: 0; background: none; font-size: .9rem; }
.ins-date { display: block; font: 600 1.1rem var(--serif); }
.ins-card .clock-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 .7rem; }
.ins-card .year-bar { display: grid; gap: .3rem; margin: 0 0 .3rem; } .ins-card .year-bar small { color: var(--ink2); font-size: .78rem; }
.ins-card h3 { font: 600 .68rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin: .9rem 0 .35rem; }
.ins-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .ins-card li { display: flex; gap: .5rem; align-items: center; } .ins-card li .ic { width: 15px; height: 15px; color: var(--ink2); flex: none; }
.hg-main .metric-grid { display: 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; }
.caps li { grid-template-columns: auto 1fr auto; align-items: center; border: var(--bw) solid color-mix(in srgb, var(--edge) 25%, var(--hair)); border-radius: 12px; box-shadow: none; background: var(--surface); }
.caps .cap-sort { grid-column: 3; opacity: .6; transition: opacity .15s; } .caps li:hover .cap-sort, .caps li:focus-within .cap-sort { opacity: 1; }
.cap-form .btn.solid { border-radius: 50%; width: 42px; height: 42px; padding: 0; }
.cap-k { border-radius: 50%; border: var(--bw) solid var(--edge); background: var(--t3); color: var(--on); }
.cap-k.k-link { background: var(--t1); } .cap-k.k-task { background: var(--t4); }
.vault-card, :is([data-theme="velvet"], [data-theme="graphite"]) .vault-card { background: var(--surface); color: var(--ink); border: var(--bw) solid var(--edge); border-radius: var(--r); box-shadow: var(--hard); }
.vault-card .muted { color: var(--ink2); } .vault-card a, .vault-card .link-plain, .vault-card h3, .vault-card b { color: var(--ink); }
.vault-card.soon { background: color-mix(in srgb, var(--t3) calc(45% * var(--tk)), var(--surface)); } .vault-card.expired { background: color-mix(in srgb, var(--t2) calc(55% * var(--tk)), var(--surface)); }
:is([data-theme="velvet"], [data-theme="graphite"]) .pdrop { color: var(--ink2); } :is([data-theme="velvet"], [data-theme="graphite"]) .pdrop b { color: var(--ink); }

/* ---------- Sign in: a pinstriped board beside the form ---------- */
.auth-art { display: grid; align-content: center; gap: 1.4rem; padding: clamp(2rem, 5vw, 4rem); border-right: var(--bw) solid var(--edge); background: repeating-linear-gradient(90deg, var(--stripe-a) 0 22px, var(--stripe-b) 22px 44px) !important; color: var(--ink); overflow: hidden; }
.auth-art > :not(.aa-win) { display: none !important; }
.aa-win { position: relative; display: block; width: min(540px, 100%); justify-self: center; border: var(--bw) solid var(--edge); border-radius: 24px; overflow: visible; background: var(--surface); box-shadow: var(--hard); }
.aa-bar { display: none !important; }
.aa-body { display: grid; gap: .6rem; padding: 1.8rem 1.8rem 1.9rem; }
.aa-title { font: 600 clamp(2.6rem, 6vw, 3.6rem)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.aa-title em { font-style: italic; font-weight: 500; color: var(--accent); }
.aa-kick { justify-self: start; }
.aa-lede { margin: .2rem 0 .3rem; font: 400 1rem/1.55 var(--sans); color: var(--ink2); background: none; padding: 0; }
.aa-folders { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: .3rem 0 .4rem; }
.aa-f { display: grid; justify-items: center; gap: .35rem; text-align: center; } .aa-f small { font: 600 .66rem/1.2 var(--sans); letter-spacing: .04em; color: var(--ink2); }
.aa-f .hbadge { width: 46px; height: 46px; }
.aa-stats { display: flex; flex-wrap: wrap; gap: .35rem; }
.aa-stats .tag { background: var(--surface2); color: var(--ink); }
.aa-polas { position: relative; height: 140px; margin: .3rem 0 0; }
.auth-card { border: var(--bw) solid var(--edge); border-radius: 22px; box-shadow: var(--hard); background: var(--surface); }
.auth-card h2 { font: 600 2.2rem/1.05 var(--serif); letter-spacing: -.02em; }
.auth-card h2 em { font-style: italic; font-weight: 500; color: var(--accent); }

/* ---------- 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: 32px; height: 32px; border-radius: 50%; color: var(--ink2); opacity: .7; transition: opacity .15s, background .15s; }
.side-toggle .ic { width: 18px; height: 18px; }
.side:hover .side-toggle, .side-toggle:focus-visible { opacity: 1; }
.side-toggle:hover { background: var(--surface2); color: var(--ink); }
.side-toggle:focus-visible { outline: 2.5px solid var(--accent); 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; } }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) { .home-grid { grid-template-columns: 1fr; } .hg-right { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; } }
@media (max-width: 900px) { .pcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; } .collage .cl { grid-column: span 1 !important; grid-row: span 1 !important; } .collage .c0 { grid-column: 1 / -1 !important; grid-row: span 2 !important; } .collage .c5, .collage .c6, .collage .c7, .collage .c8 { display: none; }
  .aff-card { position: relative; right: auto; bottom: auto; margin-top: .9rem; transform: none; max-width: none; }
  .vision-hero { margin-bottom: 1.6rem; }
}
@media (max-width: 720px) {
  main.hub { padding: 1rem 1rem 6rem; }
  .hh-title, .greet-h { font-size: 2.2rem; }
  .nownext { border-radius: 18px; gap: 1rem; width: 100%; } .nownext b { max-width: none; white-space: normal; }
  .search { display: none; }
  .hg-main .metric-grid { grid-template-columns: 1fr; } .caps li { grid-template-columns: auto 1fr; } .caps .cap-sort { grid-column: 2; opacity: 1; }
  .aa-folders { grid-template-columns: repeat(5, minmax(0, 1fr)); } .aa-f small { display: none; }
  .card, .block { padding: 1.1rem 1.1rem; }
}
@media print { .vision-hero, .greet { display: none; } }

/* ---------- Settings ---------- */
.pal-g { margin: 1rem 0 .5rem; }
.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.pal { display: grid; gap: .3rem; justify-items: start; padding: .7rem .75rem .75rem; border: var(--bw) solid var(--hair); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.pal:hover { border-color: var(--edge); }
.pal[aria-pressed="true"] { border-color: var(--edge); box-shadow: var(--hard); }
.pal-sw { display: flex; gap: 0; border: var(--bw) solid var(--edge); border-radius: 999px; overflow: hidden; width: 100%; height: 22px; }
.pal-sw i { flex: 1; }
.pal b { font: 600 .95rem/1.2 var(--serif); } .pal small { font-size: .74rem; color: var(--ink2); line-height: 1.3; }
.card.box > h2, .box-head h2 { font: 600 1.4rem/1.15 var(--serif); margin: 0 0 .8rem; }
.tsizes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Tiles in the hubs: outlined, rounded, quietly lifted on hover ---------- */
.rpin, .countdowns .cd, .plant, .wish, .inv { border: var(--bw) solid var(--edge) !important; border-radius: 16px !important; overflow: hidden; box-shadow: none; background: var(--surface); transform: none; }
.rpin:hover, .plant:hover, .wish:hover, .inv:hover { box-shadow: var(--hard); }
.countdowns .cd { background: var(--surface) !important; } .countdowns .cd.soon { background: color-mix(in srgb, var(--t2) calc(55% * var(--tk)), var(--surface)) !important; }
.plant { padding: 0 0 .8rem; } .plant > :not(.polaroid) { margin-inline: .8rem; } .plant .polaroid { transform: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 .7rem; }
.vc-add { background: var(--surface2) !important; color: var(--ink2) !important; } .vc-add b { color: var(--ink) !important; }
/* The energy map in the palette's pastels, so the numbers stay readable in every palette */
.en.e1, .en-grid i.e1 { background: color-mix(in srgb, var(--t3) 30%, var(--surface)); } .en.e2, .en-grid i.e2 { background: color-mix(in srgb, var(--t3) 60%, var(--surface)); }
.en.e3, .en-grid i.e3 { background: var(--t3); } .en.e4, .en-grid i.e4, :is([data-theme="velvet"], [data-theme="graphite"]) .en.e4 { background: var(--t6); } .en.e5, .en-grid i.e5 { background: color-mix(in srgb, var(--t6) 55%, var(--t2)); }
.en:is(.e1,.e2,.e3,.e4,.e5) :is(b, small), :is([data-theme="velvet"], [data-theme="graphite"]) .en:is(.e1,.e2,.e3,.e4,.e5) :is(b, small) { color: var(--on); }
:is([data-theme="velvet"], [data-theme="graphite"]) .en:is(.e1,.e2) :is(b, small) { color: var(--ink); }