/* Lifebook — shares the Zen palette with Today, tuned for a working app.
   Large type throughout; light and dark defined once each. */

:root[data-theme='light'] {
  --paper:#ece2cf; --paper-2:#e4d9c0; --card:#f6efdd;
  --ink:#1b1820; --ink-2:rgba(27,24,32,.64); --ink-3:rgba(27,24,32,.42);
  --line:rgba(27,24,32,.12); --line-2:rgba(27,24,32,.22); --pat-ink:rgba(27,24,32,.05);
  --accent:#a8844a; --accent-ink:#fff; --gold:#a8844a; --done:#4a7a52;
  --tbl-pink:#cf5b8f;
  --lane-s:46%; --lane-l:42%;
  --shadow:0 1px 2px rgba(27,24,32,.05),0 5px 12px -4px rgba(27,24,32,.09),0 18px 34px -16px rgba(27,24,32,.16);
}
:root[data-theme='dark'] {
  --paper:#111327; --paper-2:#1a1c31; --card:#1a1c31;
  --ink:#ece7f2; --ink-2:rgba(236,231,242,.64); --ink-3:rgba(236,231,242,.40);
  --line:rgba(236,231,242,.12); --line-2:rgba(236,231,242,.22); --pat-ink:rgba(236,231,242,.06);
  --accent:#c2a05f; --accent-ink:#12100b; --gold:#b8945a; --done:#6fa877;
  --tbl-pink:#e888b4;
  --lane-s:48%; --lane-l:66%;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 16px -5px rgba(0,0,0,.5),0 22px 44px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.045);
}

/* Lifebook Pages read brighter: a near-white canvas and crisp pure-white panels
   instead of the warm-grey paper, which felt heavy on a whole-page dashboard. The
   warm paper stays everywhere else (it's the brand); this is light theme + the
   Page view only. (Robin: too much grey gets you down; white's better here.) */
:root[data-theme='light'] body[data-view='area'] {
  --paper:#efe6d2; --paper-2:#e7dcc2; --card:#f8f1e0;
}
/* The page is aged paper: a whisper of grain and a soft top light, so it reads
   like an almanac, not an office doc. Light theme only. (Robin.) */
:root[data-theme='light'] body {
  background:
    radial-gradient(140% 120% at 50% -12%, rgba(255,251,240,.55), transparent 56%),
    repeating-linear-gradient(0deg, rgba(120,92,45,.022) 0 2px, transparent 2px 4px),
    var(--paper);
}
/* Dark is a night sky: a soft indigo glow up top + a faint grain, the almanac
   after dark. Gold accents + Fell labels carry over from the tokens. (Robin.) */
:root[data-theme='dark'] body {
  background:
    radial-gradient(135% 120% at 50% -12%, rgba(132,142,214,.12), transparent 56%),
    radial-gradient(60% 50% at 82% 8%, rgba(184,148,90,.07), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    var(--paper);
}

/* Portfolio allocation swatches (metals + slate), theme-agnostic. */
:root { --ag:#7f8a93; --ag2:#a6b0b8; --vault:#6f7f8c; --brass:var(--gold); --slate:#8a8279; }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:18px; line-height:1.5; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom);
}
h1,h2 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; letter-spacing:-.01em; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── bar ─────────────────────────────────────────── */
.bar {
  display:flex; align-items:center; gap:18px;
  padding:16px max(18px,env(safe-area-inset-left));
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(12px);
}
.mark { font-family:'IM Fell English SC',Georgia,serif; font-size:31px; font-weight:400; letter-spacing:.02em; white-space:nowrap; }
.mark em { font-style:normal; color:var(--accent); }
.mark .dot { color:var(--gold); margin:0 4px; }
.bar-l { flex:none; }
.search { flex:1; display:flex; justify-content:center; }
.search input {
  width:100%; max-width:440px; padding:10px 16px; font-size:16.5px;
  background:var(--card); border:1px solid var(--line-2); border-radius:999px; color:var(--ink);
}
.search input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.bar-r { flex:none; display:flex; align-items:center; gap:8px; }
.ghost {
  padding:8px 14px; border-radius:999px; font-size:15px; color:var(--ink-2);
  border:1px solid var(--line); text-decoration:none; white-space:nowrap; transition:background .15s,color .15s;
}
/* Only on real-hover devices - on touch, :hover sticks to the last-tapped button. */
@media (hover:hover){ .ghost:hover { background:var(--paper-2); color:var(--ink); } }
.ghost.icon { width:40px; padding:8px 0; text-align:center; font-size:18px; }

/* ── layout ──────────────────────────────────────── */
.grid {
  max-width:1080px; margin:0 auto; padding:28px max(18px,env(safe-area-inset-left)) 80px;
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:34px; align-items:start;
}
.col-h { font-size:15px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); margin-bottom:14px; font-family:'Inter',sans-serif; font-weight:600; }
.col-areas { position:sticky; top:96px; }

/* ── areas ───────────────────────────────────────── */
.areas { display:flex; flex-direction:column; gap:2px; }
.area {
  --c:hsl(var(--h,220) var(--lane-s) var(--lane-l));
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:9px 12px; border-radius:10px; color:var(--ink-2); font-size:16.5px; transition:background .12s;
}
.area:hover { background:var(--paper-2); color:var(--ink); }
.area.on { background:var(--paper-2); color:var(--ink); font-weight:500; }
.area .swatch { width:11px; height:11px; border-radius:50%; background:var(--c); flex:none; }
.area .n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.area .count { font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.area .x { opacity:0; color:var(--ink-3); font-size:17px; padding:0 2px; transition:opacity .12s,color .12s; }
.area:hover .x { opacity:1; }
.area .x:hover { color:var(--accent); }
.add-area { display:flex; gap:8px; margin-top:12px; }
.add-area input { flex:1; min-width:0; padding:9px 12px; font-size:16px; background:var(--card); border:1px solid var(--line-2); border-radius:10px; color:var(--ink); }
/* Buttons have real depth: a soft top-to-bottom gradient, an inner highlight
   along the top edge, and a grounding drop shadow. They lift on hover and
   press down on click, so they feel like objects, not painted rectangles.
   Kept tall and legible - Robin's eyesight, and a Taurean likes things solid. */
.add-btn { flex:none; width:44px; min-height:44px; border:1px solid var(--line-2); border-radius:12px;
  color:var(--ink-2); font-size:21px; line-height:1; background:var(--card);
  box-shadow:0 1px 2px rgba(0,0,0,.05); transition:border-color .15s,color .15s,box-shadow .12s,transform .08s; }
.add-btn:hover { border-color:var(--accent); color:var(--accent); box-shadow:0 3px 8px -3px color-mix(in srgb,var(--accent) 40%,transparent); }
.add-btn:active { transform:translateY(1px); }
/* Add task / Add note on a life-area page: the standard accent buttons. */
.area-actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.area-actions .add-btn.wide { min-height:44px; padding:10px 20px; font-size:15.5px; }

/* The primary accent button, shared by every + Add / Send action. */
.add-btn.wide, .gate2-btn {
  width:auto; min-height:48px; padding:12px 24px; font-size:16.5px; font-weight:600; letter-spacing:.01em;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  color:var(--accent-ink); cursor:pointer; border-radius:13px;
  border:1px solid color-mix(in srgb,var(--accent) 60%,#000 18%);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 86%,#fff) 0%,
    var(--accent) 52%,
    color-mix(in srgb,var(--accent) 88%,#000) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 32%,transparent),
    0 2px 3px rgba(0,0,0,.10),
    0 10px 22px -12px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:filter .15s, transform .08s, box-shadow .15s; }
.add-btn.wide:hover, .gate2-btn:hover {
  filter:brightness(1.05); color:var(--accent-ink); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent),
    0 4px 6px rgba(0,0,0,.12),
    0 16px 30px -12px color-mix(in srgb,var(--accent) 74%,transparent); }
.add-btn.wide:active, .gate2-btn:active {
  transform:translateY(1px); filter:brightness(.99);
  box-shadow:
    inset 0 2px 5px color-mix(in srgb,#000 26%,transparent),
    0 1px 2px rgba(0,0,0,.10); }

/* ── add task ────────────────────────────────────── */
.add-task { display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
/* Every non-.sel text input in these forms - not just [type=text], since some
   omit the attribute, which would leave them browser-white (unreadable in dark). */
.add-task input:not(.sel):not([type=checkbox]) { flex:1; min-width:180px; padding:12px 16px; font-size:17px; background:var(--card); border:1px solid var(--line-2); border-radius:12px; color:var(--ink); }
.add-task input::placeholder { color:var(--ink-3); }
/* Expanded new-task form: title on its own row, fields in a responsive grid. */
/* display:grid, not flex-column: an auto-fit grid child of a flex column gets
   its height mis-computed as if stacked in one column (huge phantom gap). */
.add-task.expanded { display:grid; gap:14px; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.add-task.expanded input#task-title { flex:none; width:100%; }
.atf-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.atf { display:flex; flex-direction:column; gap:5px; min-width:0; }
.atf > span { font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; }
.atf .sel, .atf .date-field { max-width:none; width:100%; }
.atf-actions { display:flex; gap:8px; }
/* Full-width free-form notes on the add-task form. */
.atf-full { grid-column:1 / -1; }
/* "Hide until it surfaces" toggle on the add-task form. */
.atf-hide { display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--ink); cursor:pointer; padding:2px 0; }
.atf-hide input { margin-top:3px; flex:none; width:18px; height:18px; accent-color:var(--accent); }
.atf-hide span { display:flex; flex-direction:column; gap:2px; }
.atf-hide small { font-size:13px; color:var(--ink-3); line-height:1.4; }
.atf-full textarea.sel { width:100%; min-height:76px; resize:vertical; font-size:16px; line-height:1.5; padding:11px 14px; font-family:inherit; }
.tbadges { display:inline-flex; gap:6px; margin-left:8px; vertical-align:middle; }
.tbadge { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.tbadge.snz { color:var(--gold); background:color-mix(in srgb,var(--gold) 15%,transparent); }
.tbadge.rpt { color:var(--tbl-pink); background:color-mix(in srgb,var(--tbl-pink) 14%,transparent); }
.tbadge.doing { color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); }
.tbadge.priv { color:var(--priv,#8a6d3b); background:color-mix(in srgb,var(--priv,#8a6d3b) 15%,transparent); }
/* List / Board view switch */
.view-switch { display:inline-flex; flex:none; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:var(--card); }
.view-switch .vs-btn { font:inherit; font-size:13.5px; font-weight:600; padding:9px 13px; color:var(--ink-3); background:transparent; border:0; cursor:pointer; line-height:1; white-space:nowrap; }
.view-switch .vs-btn.on { background:var(--accent); color:var(--accent-ink); }
.view-switch .vs-btn:not(.on):hover { color:var(--ink); }
/* Kanban board */
.kanban { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:12px; align-items:start; }
.kcol { background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:10px; min-height:140px; display:flex; flex-direction:column; transition:border-color .12s, background .12s; }
.kcol.kcol-over { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--paper-2)); }
.kcol-h { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px 10px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.kcol-c { font-variant-numeric:tabular-nums; }
.kcol-body { display:flex; flex-direction:column; gap:10px; min-height:40px; flex:1; }
.kcol-empty { color:var(--ink-3); font-size:13px; text-align:center; padding:16px 6px; border:1px dashed var(--line-2); border-radius:10px; opacity:.6; }
.kcol-more { color:var(--ink-3); font-size:12.5px; text-align:center; padding:8px 6px 2px; font-style:italic; }
.ktask { --h:220; display:flex; align-items:flex-start; gap:9px; background:var(--card); border:1px solid var(--line); border-left:3px solid hsl(var(--h) var(--lane-s) var(--lane-l)); border-radius:13px; padding:19px 15px; box-shadow:var(--shadow-sm); cursor:grab; }
.ktask.dragging { opacity:.4; }
.ktask.done { opacity:.62; }
.ktask.done .kt-t { text-decoration:line-through; }
.kt-grip { color:var(--ink-3); opacity:.5; font-size:13px; line-height:1.4; flex:none; }
.kt-open { flex:1 1 auto; min-width:0; text-align:left; background:none; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; gap:6px; color:var(--ink); }
.kt-t { font-size:15px; font-weight:600; line-height:1.35; overflow-wrap:break-word; }
/* The card's meta line sits quietly under the title - always smaller than it.
   Priority is a tiny tag (filled for P1); the life area is a soft hue-dot + name. */
.kt-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:1px; }
.kt-meta .prio { font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--ink-3); background:color-mix(in srgb,var(--ink) 8%,transparent); border-radius:5px; padding:1px 5px; line-height:1.6; }
.kt-meta .prio.P1 { color:var(--accent-ink); background:var(--accent); }
.kt-meta .tag { display:inline-flex; align-items:center; gap:5px; max-width:100%; min-width:0; font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kt-meta .tag::before { content:''; width:7px; height:7px; border-radius:50%; background:hsl(var(--h) var(--lane-s) var(--lane-l)); flex:none; }
@media (max-width:640px){ .kanban { grid-template-columns:1fr; } }
.tf-clear { border:none; background:none; color:var(--accent); font-size:11.5px; text-transform:none; letter-spacing:0; cursor:pointer; padding:0 2px; font-weight:600; }
.tf-hint { display:block; margin-top:3px; font-size:11.5px; text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-3); }

/* Contacts */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:6px; }
.contact-card { position:relative; display:flex; align-items:center; gap:14px; text-align:left; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); cursor:pointer; min-width:0; }
.contact-card:hover { border-color:var(--accent); }
.contact-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent); }
/* Contact's life-area colour: a left edge, and the avatar tinted to match. */
.contact-card.has-area { border-left:3px solid hsl(var(--h,220) 60% 52%); }
.contact-card.has-area .contact-av { background:linear-gradient(140deg,hsl(var(--h,220) 62% 62%),hsl(var(--h,220) 58% 48%)); }
/* Select checkbox for merging - appears on hover, stays when ticked. */
.cc-check { position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line-2); background:var(--card); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; opacity:0; transition:opacity .12s; z-index:2; }
.contact-card:hover .cc-check, .cc-check.on { opacity:1; }
.cc-check.on { background:var(--accent); border-color:var(--accent); }
.cc-star { position:absolute; bottom:7px; right:10px; border:0; background:none; padding:0; font-size:18px; line-height:1; color:var(--line-2); opacity:0; transition:opacity .12s, color .12s, transform .1s; z-index:2; cursor:pointer; }
.contact-card:hover .cc-star, .cc-star.on { opacity:1; }
.cc-star.on { color:var(--gold); }
.cc-star:hover { color:var(--gold); transform:scale(1.15); }
/* Associated contacts on a life area: the card, with a remove-from-area × (top-left,
   clear of the select tick and star), plus an add-a-contact picker below. */
.area-contacts .contact-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:560px){ .area-contacts .contact-grid { grid-template-columns:1fr; } }
.area-contact-wrap { position:relative; }
.area-contact-wrap .contact-card { width:100%; }
.area-contact-rm { position:absolute; top:6px; left:6px; z-index:3; width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink-3); font-size:15px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; opacity:.75; box-shadow:var(--shadow); }
.area-contact-rm:hover { color:var(--accent); opacity:1; border-color:var(--accent); }
.area-contact-add { margin-top:16px; display:flex; flex-direction:column; gap:8px; max-width:420px; }
/* One area's Wheel of Life: a big score gauge, its timeline, a read, gamification. */
.awheel { display:flex; flex-direction:column; gap:18px; }
.awheel-hero { display:flex; align-items:center; gap:20px; }
.awheel-gauge { width:98px; height:98px; border-radius:50%; flex:none; position:relative; display:flex; align-items:center; justify-content:center; background:conic-gradient(from -90deg, hsl(var(--h,220) 58% 52%) calc(var(--sc,0) * 72deg), color-mix(in srgb,hsl(var(--h,220) 45% 50%) 16%, var(--paper-2)) 0); }
.awheel-gauge::after { content:''; position:absolute; inset:9px; border-radius:50%; background:var(--card); box-shadow:inset 0 1px 3px rgba(0,0,0,.05); }
.awg-line { position:relative; z-index:1; display:inline-flex; align-items:baseline; line-height:1; }
.awg-n { font-family:'Cormorant Garamond',serif; font-size:44px; font-weight:600; color:var(--ink); line-height:1; }
.awg-of { font-size:15px; color:var(--ink-3); margin-left:2px; }
.awheel-herometa { flex:1; min-width:0; }
.awg-sent { font-family:'Cormorant Garamond',serif; font-size:25px; font-weight:600; color:var(--ink); line-height:1.15; }
.awg-delta { font-size:14px; font-weight:800; margin-left:4px; }
.awg-delta.up { color:var(--done); } .awg-delta.down { color:var(--ink-3); }
.awg-sub { font-size:13.5px; color:var(--ink-3); margin-top:3px; }
.awg-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.awg-pill { font-size:12px; font-weight:600; color:var(--ink-2); background:var(--paper-2); border-radius:999px; padding:4px 11px; }
.awg-pill.pb { color:var(--gold); background:color-mix(in srgb,var(--gold) 16%,transparent); }
.awg-pill.full { color:hsl(var(--h,150) 52% 40%); background:color-mix(in srgb,hsl(var(--h,150) 55% 50%) 16%,transparent); }
.awheel-timeline .awt-h, .awheel-prev .awt-h { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); margin-bottom:9px; }
.awheel-prev { margin-top:18px; }
.awheel-prev-list { display:flex; flex-direction:column; gap:6px; }
.awheel-prev-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit; cursor:pointer; padding:9px 12px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); transition:border-color .12s, transform .08s; }
.awheel-prev-row:hover { border-color:var(--line-2); transform:translateY(-1px); }
.awp-date { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.awp-lbl { flex:none; font-size:12.5px; color:var(--ink-3); }
.awp-score { flex:none; font-weight:700; font-variant-numeric:tabular-nums; color:hsl(var(--h,220) 52% 46%); }
.awp-d { flex:none; font-size:12px; font-weight:700; }
.awp-d.up { color:#6f9f4a; } .awp-d.down { color:var(--danger,#c4412e); }
.awt-bars { display:flex; align-items:flex-end; gap:5px; height:66px; }
.awt-bar { flex:1 1 0; min-width:6px; max-width:24px; border-radius:4px 4px 2px 2px; background:color-mix(in srgb,hsl(var(--h,220) 55% 55%) 42%, var(--paper-2)); height:var(--bh,10%); transition:height .2s; }
.awt-bar.now { background:hsl(var(--h,220) 58% 50%); box-shadow:0 3px 10px -4px hsl(var(--h,220) 58% 50%); }
.awt-axis { display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-3); margin-top:7px; }
.awheel-comm { font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; } .awheel-comm b { color:var(--ink); }
.awheel-more { align-self:flex-start; background:none; border:0; color:var(--accent); font-weight:600; font-size:14px; cursor:pointer; padding:2px 0; }
.awheel-empty { align-items:center; text-align:center; }
.awheel-empty p { color:var(--ink-2); max-width:420px; margin:2px auto 4px; line-height:1.55; }
/* Quiet "stop tracking" link under the wheel - understated so it never competes
   with the rating, but always there when you want out. */
.awheel-offbtn { align-self:flex-start; background:none; border:0; color:var(--ink-3); font-size:13px; cursor:pointer; padding:2px 0; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
.awheel-offbtn:hover { color:var(--ink-2); }
/* Track / untrack this area on the Wheel of Life - a tick box. */
.wheel-track-tog { display:flex; align-items:center; gap:10px; margin-top:16px; font-size:14.5px; color:var(--ink-2); cursor:pointer; }
.wheel-track-tog input { width:18px; height:18px; accent-color:var(--accent); flex:none; cursor:pointer; }
.area-addgoal-btn { max-width:280px; margin-top:14px; }
/* Off-state panel: the area is out of the wheel, with a clear way back on. */
.awheel-off { align-items:center; text-align:center; gap:12px; padding:10px 0 4px; }
.awheel-off-ic { font-size:40px; color:var(--ink-3); opacity:.7; }
.awheel-off p { color:var(--ink-2); max-width:430px; margin:0 auto; line-height:1.55; }
.cts-sec-h { font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin:18px 0 2px; display:flex; align-items:center; gap:8px; }
.cts-sec-h .muted { font-weight:600; }
.cts-self { position:relative; margin:0 0 16px; }
.cts-self-card { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px 44px 14px 16px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--accent) 6%,var(--card)); color:var(--ink); cursor:pointer; box-shadow:var(--shadow); transition:border-color .12s, transform .12s; }
.cts-self-card:hover { border-color:var(--accent); transform:translateY(-1px); }
.cts-self-card .fr-av { flex:none; }
.cts-self-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cts-self-name { font-size:15.5px; font-weight:600; color:var(--ink); }
.cts-self-sub { font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:12.5px; color:var(--ink-3); }
.cts-self-tag { margin-left:auto; font-size:12px; color:var(--accent); font-weight:600; white-space:nowrap; }
.cts-self-x { position:absolute; top:10px; right:12px; width:26px; height:26px; border:0; background:none; color:var(--ink-3); font-size:18px; line-height:1; border-radius:8px; cursor:pointer; z-index:2; }
.cts-self-x:hover { background:var(--paper-2); color:var(--ink); }
.cts-self-hidden { margin:0 0 12px; }
.contact-selbar { display:flex; align-items:center; gap:12px; padding:10px 14px; margin:0 0 12px; border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--accent) 7%,var(--card)); }
.csb-n { font-weight:700; }
.csb-hint { color:var(--ink-3); font-size:13.5px; }
.csb-merge { flex:none; }
.contact-selbar .ghost { margin-left:auto; }
.ctx-merge { color:var(--accent); font-weight:700; }
.contact-av { flex:none; width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; color:var(--accent-ink); background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent)); }
.contact-av.big { width:60px; height:60px; font-size:24px; }
/* A contact photo fills the avatar; when there's one, drop the gradient. (Robin.) */
.contact-av.has-photo { background-size:cover; background-position:center; background-repeat:no-repeat; color:transparent; }
.cc-av-wrap { position:relative; flex:none; display:inline-flex; }
.cc-av-edit { position:relative; cursor:pointer; overflow:hidden; }
.cc-av-cam { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; background:rgba(0,0,0,.34); opacity:0; transition:opacity .12s; }
.cc-av-edit:hover .cc-av-cam, .cc-av-edit:focus-within .cc-av-cam { opacity:1; }
.cc-av-x { position:absolute; top:-4px; right:-4px; z-index:3; width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:14px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.cc-av-x:hover { color:var(--ink); border-color:var(--line-2); }
.contact-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.contact-name { font-size:17px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-sub { display:flex; flex-direction:column; gap:1px; }
.cc-row { font-size:13.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-addr-field { display:flex; flex-direction:column; gap:5px; margin-top:14px; max-width:520px; }
.contact-addr-in { max-width:none; width:100%; resize:vertical; font-family:inherit; line-height:1.5; }
.contact-actions { margin-top:22px; }
.contact-card.dragging { opacity:.5; }
.contact-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.contact-tag { font-size:11.5px; font-weight:600; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:999px; padding:1px 8px; white-space:nowrap; }
/* Group chip bar */
.cg-bar { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; align-items:center; }
.cts-area-sel { display:none; }   /* desktop: use the chip bar */
/* Contacts header: the search box and the group chips sit together, actions right. */
/* Auto "who's on Lifebook" banner at the top of Contacts */
.cts-dbbanner { margin:0 0 18px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:16px; background:color-mix(in srgb,var(--accent) 7%,var(--card)); }
.cts-dbbanner.cts-dbb-load, .cts-dbbanner.cts-dbb-none { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink-3); font-size:14px; }
.cts-dbb-h { display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600; color:var(--ink); margin-bottom:12px; }
.cts-dbb-list { display:flex; flex-wrap:wrap; gap:9px; }
.cts-dbb-person { display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:999px; background:var(--card); overflow:hidden; transition:border-color .12s, transform .08s; }
.cts-dbb-person:hover { border-color:var(--accent); transform:translateY(-1px); }
.cts-dbb-connect { display:inline-flex; align-items:center; gap:9px; padding:7px 6px 7px 8px; border:0; background:none; color:var(--ink); cursor:pointer; font:inherit; }
.cts-dbb-person .fr-av { flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--paper-2,var(--paper)); color:var(--ink-2); font-weight:600; font-size:12px; }
.cts-dbb-nm { font-weight:600; font-size:14px; }
.cts-dbb-go { font-size:12.5px; color:var(--accent); font-weight:600; }
.cts-dbb-x { flex:none; border:0; border-left:1px solid var(--line); background:none; color:var(--ink-3); cursor:pointer; font-size:16px; line-height:1; padding:0 11px; }
.cts-dbb-x:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
/* A connection request in the banner: name, then Accept (gold) + × ignore. */
.cts-dbb-who { display:inline-flex; align-items:center; gap:9px; padding:7px 10px 7px 8px; }
.cts-dbb-accept { border:0; border-left:1px solid var(--line); background:var(--accent); color:var(--accent-ink); font:inherit; font-weight:600; font-size:13px; padding:0 14px; cursor:pointer; }
.cts-dbb-accept:hover { background:color-mix(in srgb,var(--accent) 86%,#000); }
.cts-dbb-more { margin-top:10px; font-size:12.5px; color:var(--ink-3); }
.cts-head { display:flex; align-items:center; gap:12px 14px; flex-wrap:wrap; margin:0 0 16px; }
.cts-head .cts-search { flex:1 1 100%; width:auto; margin:0; }
.cts-head .cg-bar { flex:1 1 auto; margin:0; min-width:0; }
.cts-head .cts-acts { display:flex; gap:8px; flex:none; margin-left:auto; }
.contacts-mine { margin-bottom:6px; }
/* Lifebook friends: its own section, set apart from your contacts above. */
.ppl-sec { border-top:1px solid var(--line); padding-top:8px; margin-top:24px; }
@media (max-width:640px){ .cts-head .cts-search { flex:1 1 100%; } .cts-head .cts-acts { margin-left:0; }
  /* The life-area filter becomes a single dropdown on mobile, not a row of chips. */
  .cts-head .cg-bar { display:none; }
  .cts-area-sel { display:block; flex:1 1 100%; margin:0; }
}
.cg-chip { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink-2); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; }
.cg-chip:hover { border-color:var(--accent); }
.cg-chip.on { background:color-mix(in srgb,var(--accent) 14%,transparent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); color:var(--ink); }
.cg-chip .cg-dot { width:9px; height:9px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); flex:none; }
.cg-chip .cg-n { font-size:12px; color:var(--ink-3); font-weight:500; }
.cg-chip.on .cg-n { color:var(--accent); }
.cg-chip.cg-new { color:var(--accent); border-style:dashed; }
/* The drop-target state while dragging a contact over a group chip. */
.cg-chip.cg-over { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 24%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); transform:scale(1.05); }
.cg-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:8px 0 2px; }
.cg-head-t { font-size:16px; font-weight:600; color:var(--ink); }
.cg-head-act { display:flex; gap:6px; }
.cg-del { color:var(--danger,#c0392b); }
/* Groups on the contact card */
.cc-groups { margin-top:18px; }
.cc-group-list { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.cc-group-chip { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink); background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:999px; padding:6px 12px; }
.cc-group-x { border:0; background:none; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; padding:0 0 0 2px; }
.cc-group-x:hover { color:var(--danger,#c0392b); }
.cc-group-add { padding:8px 12px; font-size:14px; border-radius:999px; max-width:220px; }
/* Contact right-click menu */
.ctx-bg { position:fixed; inset:0; z-index:60; }
.ctx-menu { position:absolute; min-width:216px; max-height:70vh; overflow:auto; background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 16px 40px -16px rgba(0,0,0,.4); padding:6px; }
.ctx-h { font-size:14px; font-weight:600; color:var(--ink); padding:7px 10px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctx-lbl { font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; padding:6px 10px 3px; }
.ctx-item { display:block; width:100%; text-align:left; padding:9px 12px; border-radius:8px; color:var(--ink); font-size:15px; }
.ctx-item:hover { background:var(--paper-2); color:var(--accent); }
.ctx-item.ctx-new { color:var(--accent); }
/* Recent-contacts shortcuts at the top of the contact menu: a small tinted
   initial avatar and the name, a quick hop to whoever you were just viewing. */
.ctx-recent { display:flex; align-items:center; gap:9px; }
.ctx-recent-av { flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--ink); background:color-mix(in srgb, hsl(var(--h,220) 55% 55%) 24%, var(--paper-2)); }
.ctx-recent-n { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctx-item.ctx-danger { color:var(--danger,#c0392b); }
.ctx-item.ctx-danger:hover { background:color-mix(in srgb,var(--danger,#c0392b) 12%,transparent); color:var(--danger,#c0392b); }
.ctx-sep { height:1px; background:var(--line); margin:5px 8px; }
/* Life-area rows in the contact menu: a colour dot + name; the add rows carry a 🚫
   to hide that area from the list, current areas show a ✓, hidden ones a faint unhide. */
.ctx-area { display:flex; align-items:center; gap:9px; }
.ctx-adot { width:8px; height:8px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); flex:none; }
.ctx-area-n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Empty tick-box for areas not filed; filled with a tick for ones the contact is in. */
.ctx-cb { width:17px; height:17px; border-radius:5px; border:1.5px solid var(--line-2); flex:none; position:relative; box-sizing:border-box; }
.ctx-cb-on { background:hsl(var(--h,220) 55% 52%); border-color:hsl(var(--h,220) 55% 52%); }
.ctx-cb-on::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:800; }
.ctx-arearow { display:flex; align-items:center; }
.ctx-arearow .ctx-area { flex:1; min-width:0; }
.ctx-area-hide { flex:none; border:0; background:none; padding:8px 10px; font-size:14px; color:var(--ink-3); opacity:.3; cursor:pointer; border-radius:8px; }
.ctx-arearow:hover .ctx-area-hide { opacity:.7; }
.ctx-area-hide:hover { opacity:1; background:var(--paper-2); color:var(--accent); }
.ctx-area-dim { opacity:.6; }
.ctx-area-unhide { flex:none; font-size:11px; color:var(--accent); font-weight:600; }
.ctx-showhidden { font-size:12.5px; color:var(--ink-3); }
.ctx-empty { font-size:13px; color:var(--ink-3); padding:6px 12px; }
.contact-tag .ct-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); margin-right:4px; vertical-align:middle; }
.contact-tag { --h:220; color:var(--ink-2); background:color-mix(in srgb,hsl(var(--h) 55% 55%) 14%,transparent); }

/* Goals & bucket list */
.seg { display:inline-flex; flex-wrap:wrap; max-width:100%; gap:3px; background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:22px; }
.seg-b { border:none; background:none; color:var(--ink-2); font-size:15px; font-weight:600; padding:8px 18px; border-radius:9px; cursor:pointer; }
.seg-b.on { background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.seg-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px; border-radius:9px; background:var(--danger,#c4412e); color:#fff; font-size:11px; font-weight:700; line-height:1; vertical-align:middle; }
.goals-actions { margin-bottom:18px; }
/* Goals page: main column (per-area vision + goals) beside a bucket-list box. */
.goals-tabs { display:flex; gap:8px; margin:0 0 18px; }
.gtab { padding:7px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:14px; font-weight:600; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.gtab:hover { border-color:var(--line-2); }
.gtab.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.goals-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start; }
@media (max-width:900px){ .goals-layout { grid-template-columns:1fr; } }
.goals-main-full { max-width:820px; }
/* Goals tab: every goal, one per row, sortable + filterable. */
.glist-controls { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.glist-controls .sel { max-width:200px; }
.glist { display:flex; flex-direction:column; gap:8px; }
.glist-row { --h:220; display:grid; grid-template-columns:20px 1fr 90px 42px; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; border:1px solid var(--line); border-left:3px solid hsl(var(--h) var(--lane-s) var(--lane-l)); border-radius:12px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; transition:border-color .12s, transform .08s; }
.glist-row:hover { border-color:var(--accent); transform:translateY(-1px); }
.glist-star { color:var(--accent); font-size:14px; text-align:center; }
.glist-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.glist-t { font-size:15.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.glist-t.is-done { color:var(--ink-3); text-decoration:line-through; }
.glist-sub { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); }
.glist-area { display:inline-flex; align-items:center; gap:5px; }
.glist-area .cd { width:8px; height:8px; border-radius:50%; background:hsl(var(--h) 55% 56%); }
.glist-st { color:var(--ink-2); background:var(--paper-2,color-mix(in srgb,var(--ink) 6%,transparent)); padding:1px 8px; border-radius:999px; }
.glist-bar-wrap { position:relative; display:flex; align-items:center; }
.glist-bar-wrap .glist-bar { flex:1; }
.glist-bar { height:8px; border-radius:999px; background:var(--paper-2,color-mix(in srgb,var(--ink) 8%,transparent)); overflow:hidden; }
.glist-bar i { display:block; height:100%; border-radius:999px; background:hsl(var(--h) var(--lane-s) var(--lane-l)); }
.glist-pct { font-size:13px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:560px){ .glist-row { grid-template-columns:18px 1fr 44px; } .glist-bar-wrap { display:none; } }
/* An area's Vision → Goals as one connected flow: a tinted panel, the vision on
   top, a labelled connector, then the goals working towards it. */
.goal-area { margin:0 0 20px; padding:16px 18px 18px; border-radius:16px; background:color-mix(in srgb,hsl(var(--h,220) 55% 55%) 5%,var(--card)); border:1px solid var(--line); border-left:3px solid hsl(var(--h,220) 55% 55%); }
.goal-area-h { display:flex; align-items:center; gap:9px; margin:0 0 12px; cursor:pointer; -webkit-user-select:none; user-select:none; border-radius:9px; margin-left:-4px; padding:2px 4px; transition:background .12s; }
.goal-area-h:hover { background:color-mix(in srgb,hsl(var(--h,220) 55% 55%) 9%,transparent); }
.goal-area.collapsed { padding-bottom:16px; }
.goal-area.collapsed .goal-area-h { margin-bottom:0; }
.goal-area-h .acw-chev { color:var(--ink-3); flex:none; font-size:13px; }
.goal-area-h .cd { width:12px; height:12px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); flex:none; }
.goal-area-name { font-family:'Cormorant Garamond',serif; font-size:25px; font-weight:600; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.goal-area-n { flex:none; color:var(--ink-3); font-size:14px; font-variant-numeric:tabular-nums; }
.goal-area-add { flex:none; padding:5px 12px; font-size:13px; border-radius:999px; }
.ga-step-l { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.09em; font-weight:700; color:hsl(var(--h,220) 42% 46%); margin:0 0 7px 2px; }
.gv-card { margin:0; padding:14px 16px; background:var(--card); }
/* On the Goals & Vision page the vision shows in full, not clamped to a few lines. */
.gv-card { padding:16px 18px; }
.gv-card .vc-text { font-size:15px; display:block; overflow:visible; -webkit-line-clamp:unset; white-space:pre-wrap; }
/* The connector between vision and goals - a hairline with a small centred label. */
.ga-flow { display:flex; align-items:center; gap:12px; margin:14px 2px 12px; }
.ga-flow::before, .ga-flow::after { content:''; height:1px; flex:1; background:linear-gradient(to right,transparent,color-mix(in srgb,hsl(var(--h,220) 55% 55%) 40%,transparent),transparent); }
.ga-flow-l { flex:none; font-size:11.5px; font-style:italic; color:hsl(var(--h,220) 40% 48%); }
.goal-area-empty { color:var(--ink-3); font-size:14px; padding:2px 0; }
.goals-side { position:sticky; top:96px; }
.goals-side-box { border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:14px 16px; }
.goals-side-box.collapsed { padding:12px 16px; }
.goals-side-box.collapsed .gsb-h { margin-bottom:0; }
.gsb-h { display:flex; align-items:center; gap:8px; justify-content:flex-start; font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; color:var(--ink); margin-bottom:10px; cursor:pointer; }
.gsb-h .acw-chev { font-size:13px; color:var(--ink-3); flex:none; }
.gsb-h > span:not(.acw-chev) { flex:1; }
.gsb-add { flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); font-size:18px; line-height:1; }
.gsb-add:hover { border-color:var(--accent); color:var(--accent); }
.gsb-empty { color:var(--ink-3); font-size:14px; padding:6px 0; }
.bucket-side { grid-template-columns:1fr; }
@media (max-width:900px){ .goals-side { position:static; } }
.goal-group { margin-top:16px; }
.goal-group-h { font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:600; margin-bottom:10px; }
.goal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }

/* ── Financial ──────────────────────────────────────── */
.fin-load, .fin-err { padding:40px 4px; color:var(--ink-2); font-size:16px; }
.fin-err-d { color:var(--ink-3); font-size:14px; margin:6px 0 16px; overflow-wrap:anywhere; }
/* Money dashboard */
.mny-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:4px 0 20px; align-items:stretch; }
@media (max-width:640px){ .mny-metrics { grid-template-columns:1fr; } }
.mny-card { display:flex; flex-direction:column; gap:14px; padding:20px 22px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow); }
.mny-metric { display:flex; flex-direction:column; gap:3px; }
.mny-k { font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.mny-v { font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:clamp(34px,7vw,46px); line-height:1.02; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.mny-v.mny-dim { color:var(--ink-3); }
.mny-sub { font-size:13.5px; color:var(--ink-2); }
.mny-sub.mny-dim { color:var(--ink-3); }
.mny-sub.up { color:#6f9f4a; } .mny-sub.down { color:var(--danger,#c4412e); }
.mny-alloc { display:flex; flex-direction:column; gap:8px; }
.mny-bar { display:flex; height:9px; border-radius:999px; overflow:hidden; background:var(--paper-2); }
.mny-bar span { display:block; height:100%; }
.mny-legend { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--ink-3); }
.mny-legend span { display:inline-flex; align-items:center; gap:5px; }
.mny-legend i { width:9px; height:9px; border-radius:3px; flex:none; }
.mny-cats { display:flex; flex-direction:column; gap:7px; }
.mny-catrow { display:flex; align-items:center; gap:10px; font-size:13px; }
.mny-catn { flex:none; width:34%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
.mny-cattrack { flex:1; height:7px; border-radius:999px; background:var(--paper-2); overflow:hidden; }
.mny-cattrack i { display:block; height:100%; background:var(--accent); border-radius:999px; }
.mny-catv { flex:none; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.mny-advice { margin:0 0 20px; }
.mny-advice-t { font-size:16px; line-height:1.6; color:var(--ink-2); margin:4px 0 10px; }
.mny-advice-go { border:0; background:none; color:var(--accent); font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:0; }
.mny-advice-go:hover { text-decoration:underline; }
.mny-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
@media (max-width:640px){ .mny-links { grid-template-columns:1fr; } }
.mny-link { display:flex; align-items:center; gap:13px; text-align:left; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; color:var(--ink); transition:border-color .12s, transform .08s, box-shadow .12s; }
.mny-link:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(0,0,0,.45); }
.mny-link-ic { font-size:22px; color:var(--accent); flex:none; width:26px; text-align:center; }
.mny-link-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mny-link-t { font-weight:600; font-size:16px; }
.mny-link-s { font-size:12.5px; color:var(--ink-3); }
.mny-link-go { margin-left:auto; color:var(--ink-3); flex:none; }
.fin-port { display:flex; flex-direction:column; gap:22px; }
.fin-head { margin-top:2px; }
.fin-total-lab { font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.fin-total { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(46px,11vw,72px); line-height:1; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; }
.fin-gains { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px; }
.fin-gain { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.fh-gaincell { font-variant-numeric:tabular-nums; font-weight:600; }
.fin-asof { color:var(--ink-2); font-size:14.5px; margin-top:10px; } .fin-asof b { color:var(--ink); font-weight:600; }
.fin-link { background:none; border:0; color:var(--accent); cursor:pointer; font:inherit; }
.fin-bar { display:flex; height:20px; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.fin-bar span { display:block; height:100%; }
.fin-legend { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14.5px; color:var(--ink-2); margin-top:-10px; }
.fin-legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:7px; vertical-align:baseline; }
.fin-perf { display:flex; flex-wrap:wrap; gap:12px; }
.fin-chip { flex:1 1 150px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.fin-chip .lab { display:block; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.fin-cv { font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:600; letter-spacing:-.01em; display:block; font-variant-numeric:tabular-nums; }
.fin-abs { font-size:14px; color:var(--ink-2); margin-top:2px; display:block; font-variant-numeric:tabular-nums; }
.fin-na { font-size:16px; font-weight:600; color:var(--ink-3); }
.up { color:var(--done); } .down { color:var(--accent); } .flat { color:var(--ink-2); }
.fin-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.fin-card { background:var(--card); border:1px solid var(--line); border-left:5px solid var(--sw,var(--ag)); border-radius:14px; padding:15px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px; }
.fin-card-top { display:flex; align-items:flex-start; gap:8px; }
.fin-name { font-weight:600; font-size:16.5px; flex:1; min-width:0; text-wrap:balance; }
.fin-edit-btn { flex:none; border:0; background:none; color:var(--ink-3); cursor:pointer; font-size:15px; padding:2px; } .fin-edit-btn:hover { color:var(--accent); }
.fin-venue { color:var(--ink-3); font-size:13.5px; }
.fin-cv2 { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; letter-spacing:-.01em; margin-top:8px; font-variant-numeric:tabular-nums; }
.fin-qty { color:var(--ink-2); font-size:13.5px; }
.fin-rates { background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:4px 18px; }
.fin-rates dl { display:grid; grid-template-columns:1fr auto; margin:0; font-size:15px; }
.fin-rates dt, .fin-rates dd { margin:0; padding:11px 0; border-bottom:1px solid var(--line); }
.fin-rates dt { color:var(--ink-2); } .fin-rates dd { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.fin-rates dl>:nth-last-child(1), .fin-rates dl>:nth-last-child(2) { border-bottom:0; }
/* The valuation workings, tucked into a quiet collapsible at the foot of the page. */
.fin-rates-fold { margin-top:28px; border-top:1px solid var(--line); padding-top:14px; }
.fin-rates-fold > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-3); padding:4px 0; }
.fin-rates-fold > summary::-webkit-details-marker { display:none; }
.fin-rates-fold > summary::before { content:'▸'; font-size:.8em; transition:transform .15s; }
.fin-rates-fold[open] > summary::before { transform:rotate(90deg); }
.fin-rates-fold > summary:hover { color:var(--accent); }
.fin-rates-fold .fin-rates { margin-top:10px; }
.fin-sec-h { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:16px; font-weight:600; padding-top:6px; border-top:1px solid var(--line); }
.fin-editor { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; }
.fin-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.fin-f { display:flex; flex-direction:column; gap:5px; }
.fin-f span { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.fin-f input, .fin-f select { width:100%; padding:11px 13px; font-size:16px; border-radius:11px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); }
.fin-f input:focus-visible, .fin-f select:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.fin-edit-act { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fin-edit-act .fin-sell { color:var(--gold); border-color:color-mix(in srgb,var(--gold) 40%,var(--line)); }
.fin-edit-act .fin-del { color:var(--danger,#c0392b); margin-left:auto; }
/* Portfolio "what you hold" breakdown */
.fh-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); }
.fh-table { width:100%; border-collapse:collapse; font-size:15px; }
.fh-table th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600; padding:12px 16px; border-bottom:1px solid var(--line-2); white-space:nowrap; }
.fh-table td { padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.fh-table tbody tr:last-child td { border-bottom:0; }
.fh-r { text-align:right; }
.fh-name { font-weight:600; }
.fh-sw { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:9px; vertical-align:baseline; }
.fh-units { font-variant-numeric:tabular-nums; white-space:nowrap; }
.fh-where { color:var(--ink-2); }
.fh-val { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.fh-table tfoot td { padding:12px 16px; border-top:1px solid var(--line-2); font-weight:600; color:var(--ink); }
.fh-act { white-space:nowrap; text-align:right; }
.fh-rowbtn { font-size:13px; color:var(--ink-2); border:1px solid var(--line-2); background:var(--paper); border-radius:8px; padding:5px 10px; margin-left:6px; cursor:pointer; }
.fh-rowbtn:hover { border-color:var(--accent); color:var(--accent); }
.fh-rowbtn.fh-rowdel:hover { border-color:var(--danger,#c0392b); color:var(--danger,#c0392b); }
.fin-soon { text-align:center; max-width:460px; margin:40px auto; color:var(--ink-2); }
.fin-soon-ic { font-size:44px; margin-bottom:10px; }
.fin-soon h2 { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.fin-soon p { font-size:16px; line-height:1.55; }
.fin-soon-note { color:var(--ink-3); font-size:14px; margin-top:14px; }
/* Financial advice (YouTube tracker) */
.adv { display:flex; flex-direction:column; gap:18px; }
.adv-add { display:flex; gap:10px; }
.adv-add input { flex:1; min-width:0; padding:12px 15px; font-size:16px; border-radius:12px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); }
.adv-add input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.adv-chans { display:flex; flex-wrap:wrap; gap:8px; }
.adv-chan { display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 6px 5px 13px; font-size:14.5px; }
.adv-chan a { color:var(--ink); }
.adv-chan a:hover { color:var(--accent); }
.adv-chan-x { border:0; background:none; color:var(--ink-3); font-size:16px; cursor:pointer; line-height:1; padding:0 4px; }
.adv-chan-x:hover { color:var(--accent); }
.adv-bar { display:flex; align-items:center; gap:12px; }
.adv-count { color:var(--ink-3); font-size:14px; }
.adv-trends { background:color-mix(in srgb,var(--done) 8%,var(--card)); border:1px solid color-mix(in srgb,var(--done) 30%,var(--line)); border-radius:15px; padding:18px 20px; }
.adv-trends-h { display:flex; align-items:center; gap:10px; font-size:16.5px; font-weight:600; }
.adv-trends-ts { font-size:12.5px; font-weight:400; color:var(--ink-3); }
.adv-trends-r { margin-left:auto; padding:5px 10px; }
.adv-trends-t { margin-top:10px; font-size:16px; line-height:1.6; color:var(--ink); }
.adv-signals { margin:12px 0 0 4px; padding-left:18px; display:flex; flex-direction:column; gap:5px; font-size:15px; color:var(--ink-2); }
.adv-feed { display:flex; flex-direction:column; gap:16px; }
.adv-card { display:flex; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.adv-thumb { position:relative; flex:none; width:168px; aspect-ratio:16/9; border-radius:11px; overflow:hidden; background:var(--paper-2); display:block; }
.adv-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.adv-play { position:absolute; inset:0; margin:auto; width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; border-radius:50%; font-size:16px; padding-left:3px; }
.adv-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.adv-meta { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:13px; color:var(--ink-3); }
.adv-ch { font-weight:600; color:var(--accent); }
.adv-title { font-size:17px; font-weight:600; color:var(--ink); line-height:1.3; margin:1px 0 3px; }
.adv-title:hover { color:var(--accent); }
.adv-sum { font-size:15.5px; line-height:1.55; color:var(--ink-2); }
.adv-acts-h { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:10px; }
.adv-acts { margin:5px 0 0 4px; padding-left:18px; display:flex; flex-direction:column; gap:4px; font-size:15px; color:var(--ink); }
.adv-topics { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.adv-topic { font-size:12px; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:2px 10px; }
@media (max-width:600px){ .adv-card { flex-direction:column; } .adv-thumb { width:100%; } }
/* Spending */
.sp-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
/* Stays pinned under the tab bar as you scroll the month's transactions, so
   your categories are always in view. */
.sp-catmanage { position:sticky; top:44px; z-index:10; margin:-6px 0 18px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 22px -18px rgba(0,0,0,.5); }
.sp-cat-note { font-size:13px; color:var(--ink-3); margin:8px 0 12px; line-height:1.5; }
.sp-catmanage .trk-cat-chip:not(:has(.trk-cat-btn)) { padding-right:14px; }
.sp-cat-tag { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); background:var(--paper-2); border-radius:5px; padding:1px 5px; margin-left:6px; }
.sp-import-btn { cursor:pointer; }
.sp-monthnav { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:16px; }
.sp-monthnav .ghost { width:40px; height:40px; font-size:20px; padding:0; border-radius:10px; }
.sp-month { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; min-width:200px; text-align:center; }
.sp-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
.sp-sum { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.sp-sum .lab { display:block; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.sp-sum .v { font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:600; font-variant-numeric:tabular-nums; }
.sp-sum.in .v { color:var(--done); } .sp-sum.out .v { color:var(--accent); }
.sp-sec-h { font-size:16px; font-weight:600; margin:22px 0 12px; padding-top:8px; border-top:1px solid var(--line); }
.sp-cats { display:flex; flex-direction:column; gap:9px; }
.sp-catrow { display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:12px; font-size:15px; }
.sp-catname { color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-cattrack { height:12px; background:var(--paper-2); border-radius:99px; overflow:hidden; }
.sp-cattrack i { display:block; height:100%; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,var(--gold)),var(--accent)); border-radius:99px; }
.sp-catval { font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); white-space:nowrap; }
.sp-txns { display:flex; flex-direction:column; }
.sp-txn { display:grid; grid-template-columns:46px 1fr 160px auto; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid var(--line); font-size:15px; }
.sp-txn:last-child { border-bottom:0; }
.sp-date { color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:13.5px; }
.sp-desc { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-cat { padding:7px 10px; font-size:13.5px; border-radius:9px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); max-width:160px; }
.sp-amt { font-variant-numeric:tabular-nums; font-weight:600; text-align:right; white-space:nowrap; }
.sp-txn.out .sp-amt { color:var(--ink); } .sp-txn.in .sp-amt { color:var(--done); }
.sp-trend { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px 10px; box-shadow:var(--shadow); margin-bottom:6px; }
.sp-trend-h { font-size:13px; color:var(--ink-3); display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sp-tkey { margin-left:auto; display:flex; align-items:center; gap:6px; }
.sp-tkey i, .sp-tbars i { display:inline-block; }
.sp-tkey i { width:10px; height:10px; border-radius:2px; }
.sp-tkey i.in, .sp-tbars i.in { background:var(--done); } .sp-tkey i.out, .sp-tbars i.out { background:var(--accent); }
.sp-trendbars { display:flex; gap:6px; align-items:flex-end; height:96px; }
.sp-tcol { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; height:100%; }
.sp-tbars { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; width:100%; }
.sp-tbars i { width:8px; border-radius:3px 3px 0 0; min-height:2px; }
.sp-tlab { font-size:11px; color:var(--ink-3); }
.sp-tcol:hover .sp-tlab { color:var(--accent); }
.sp-import { display:flex; flex-direction:column; gap:14px; }
.sp-import-note { color:var(--ink-2); font-size:15px; }
.sp-map { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.sp-preview { width:100%; border-collapse:collapse; font-size:14px; }
.sp-preview th { text-align:left; color:var(--ink-3); font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:6px 10px; border-bottom:1px solid var(--line-2); }
.sp-preview td { padding:8px 10px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.sp-pv-desc { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:560px){ .sp-txn { grid-template-columns:40px 1fr auto; } .sp-txn .sp-cat { grid-column:2/4; max-width:none; justify-self:start; margin-top:2px; } }
/* Tracker (watchlist) */
.trk-add { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.trk-add input { flex:1; min-width:160px; padding:12px 15px; font-size:16px; border-radius:12px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); }
.trk-add input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.trk-add select { padding:12px 14px; font-size:15px; border-radius:12px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); }
.trk-bar { display:flex; align-items:center; gap:12px; min-height:20px; margin-bottom:8px; }
.trk-list { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
.trk-row { display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line); }
.trk-row:last-child { border-bottom:0; }
.trk-name { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.trk-sym { font-weight:600; font-size:16px; }
.trk-nm { font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trk-changes { display:flex; gap:16px; flex:none; }
.trk-cell { display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:52px; }
.trk-lab { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.trk-ch { font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; }
.trk-ch.up { color:var(--done); } .trk-ch.down { color:var(--accent); } .trk-ch.flat { color:var(--ink-3); }
.trk-px { flex:none; min-width:88px; text-align:right; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.trk-x { flex:none; border:0; background:none; color:var(--ink-3); font-size:18px; cursor:pointer; line-height:1; }
.trk-x:hover { color:var(--accent); }
.trk-rowcat { flex:none; max-width:130px; padding:6px 9px; font-size:13px; border-radius:8px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); }
.trk-group { margin-bottom:16px; }
.trk-group-h { font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px 2px; }
.trk-cats { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.trk-cats-empty { color:var(--ink-3); font-size:14.5px; }
.trk-cat-chip { display:inline-flex; align-items:center; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 8px 6px 14px; font-size:14.5px; color:var(--ink); box-shadow:var(--shadow); }
.trk-cat-btn { border:0; background:none; color:var(--ink-3); font-size:14px; cursor:pointer; padding:0 3px; line-height:1; }
.trk-cat-btn:hover { color:var(--accent); }
.trk-cat-btn.trk-cat-del:hover { color:var(--danger,#c0392b); }
/* The Categories toggle button, highlighted while its panel is open. */
.sp-actions .ghost.on { border:2px solid var(--accent); color:var(--accent); border-radius:10px; }
/* Two columns: expenses take two-thirds, income the last third. */
.sp-cat-cols { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-top:4px; }
.sp-cat-col { min-width:0; }
.sp-cat-col-inc { border-left:1px solid var(--line); padding-left:16px; }
.sp-cat-col-h { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; margin-bottom:10px; }
.sp-cat-empty { color:var(--ink-3); font-size:14px; font-style:italic; }
/* The cross-list toggle chip (＋inc / ＋exp), filled when active. */
.sp-cat-cross { border:1px solid var(--line-2); border-radius:999px; padding:1px 7px; font-size:11.5px; font-weight:600; margin-left:2px; color:var(--ink-3); }
.sp-cat-cross:hover { border-color:var(--accent); color:var(--accent); }
.sp-cat-cross.on { background:color-mix(in srgb,var(--accent) 14%,transparent); border-color:var(--accent); color:var(--accent); }
@media (max-width:640px){ .sp-cat-cols { grid-template-columns:1fr; } .sp-cat-col-inc { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px; } }
@media (max-width:560px){
  .trk-row { flex-wrap:wrap; gap:8px 12px; }
  .trk-name { flex:1 1 60%; }
  .trk-px { flex:0 0 auto; min-width:0; margin-left:auto; }
  .trk-changes { flex:1 1 100%; justify-content:space-between; gap:10px; }
  .trk-cell { align-items:flex-start; }
}
.goal-card { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:flex; flex-direction:column; gap:9px; text-align:left; padding:16px 18px; border:1px solid var(--line); border-left:4px solid var(--c); border-radius:13px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; }
.goal-card:hover { border-color:var(--accent); border-left-color:var(--c); }
.gc-top { display:flex; align-items:flex-start; gap:9px; }
.gc-focus { color:var(--gold); flex:none; }
.gc-top .gc-title { flex:1; min-width:0; font-size:16px; font-weight:600; line-height:1.3; font-family:inherit; }
.gc-status { flex:none; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--paper-2); color:var(--ink-3); white-space:nowrap; }
.gc-status.s-active { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.gc-status.s-done { color:var(--done); background:color-mix(in srgb,var(--done) 16%,transparent); }
.gc-status.s-onhold { color:var(--gold); background:color-mix(in srgb,var(--gold) 15%,transparent); }
.gc-status.s-dropped { color:var(--ink-3); background:var(--paper-2); text-decoration:line-through; }
.gc-meta { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:13px; color:var(--ink-3); }
.gc-area { color:var(--c); font-weight:600; }
.gc-bar { height:6px; border-radius:99px; background:var(--paper-2); overflow:hidden; }
.gc-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--done)); border-radius:99px; }
/* Progress row: the bar (with an optional grabbable slider over it) + a % label. */
.gc-progress { display:flex; align-items:center; gap:10px; }
.gc-barwrap { position:relative; flex:1; min-width:0; display:flex; align-items:center; }
.gc-barwrap .gc-bar { flex:1; }
.gc-pct { flex:none; font-size:12px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }
/* The slider overlays the bar: transparent track (the bar's fill shows through),
   only the thumb is visible and grabbable. */
/* Full-width track (left/right:0), so at 0% the thumb rests hard against the far
   left of the rail with no gap - the browser keeps the thumb inside the track, so
   it's flush at both ends, not inset. Height matches the thumb (16px) and it sits
   centred on the bar (top:50% + a -50% shift) so the thumb can't drift high or low. */
.gc-slider { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); width:auto; height:26px; margin:0; padding:0; background:transparent; -webkit-appearance:none; appearance:none; cursor:grab; z-index:2; touch-action:none; }
.gc-slider:active { cursor:grabbing; }
.gc-slider.ro { pointer-events:none; }   /* number/finished goals: a read-only marker, click falls through to open the goal */
.gc-slider:focus { outline:none; }
.gc-slider::-webkit-slider-runnable-track { background:transparent; border:0; height:100%; }
.gc-slider::-moz-range-track { background:transparent; border:0; }
.gc-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:hsl(var(--h,220) 60% 50%); border:3px solid var(--card); box-shadow:0 1px 6px -1px rgba(0,0,0,.55); cursor:grab; margin-top:0; }
.gc-slider::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.08); }
.gc-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:hsl(var(--h,220) 60% 50%); border:3px solid var(--card); box-shadow:0 1px 6px -1px rgba(0,0,0,.55); cursor:grab; }
.gc-slider:active::-moz-range-thumb { cursor:grabbing; }
.gc-slider:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent); }
.goal-done { margin-top:26px; }
.goal-done > summary { cursor:pointer; color:var(--ink-3); font-size:15px; padding:8px 0; list-style:none; }
.goal-done > summary::-webkit-details-marker { display:none; }
.goal-done[open] > summary { margin-bottom:12px; }
.gc-focus-btn { border:none; background:none; font-size:26px; line-height:1; color:var(--gold); cursor:pointer; flex:none; padding:2px; opacity:.5; }
.gc-focus-btn.on { opacity:1; }
.goal-why { display:flex; flex-direction:column; gap:6px; margin:14px 0 4px; }
.goal-why textarea { resize:vertical; font-family:inherit; line-height:1.5; min-height:52px; width:100%; max-width:none; }
.goal-measure-block { margin:16px 0 4px; }
.goal-actions-sec { margin:20px 0 4px; }
.goal-actions-sec .gt-loose-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.gt-hint { font-size:12.5px; font-weight:400; color:var(--ink-3); letter-spacing:0; text-transform:none; }
/* First choice on a new goal: how to track it. Two big, plain-language cards. */
.gtype-choose .tf-label { margin-bottom:10px; }
.gtype-opts { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gtype-opt { display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:16px 18px; border:1px solid var(--line-2); border-radius:16px; background:var(--card); color:var(--ink); cursor:pointer; box-shadow:var(--shadow); transition:border-color .12s, transform .06s; }
.gtype-opt:hover { border-color:var(--accent); }
.gtype-opt:active { transform:scale(.98); }
.gtype-opt .gto-ic { font-size:24px; line-height:1; margin-bottom:4px; }
.gtype-opt b { font-size:16.5px; font-weight:600; }
.gtype-opt small { color:var(--ink-3); font-size:13px; line-height:1.35; }
@media (max-width:600px){ .gtype-opts { grid-template-columns:1fr; } }
.gnum { display:flex; align-items:center; gap:10px; }
.gnum input { max-width:110px; } .gnum .gc-unit { max-width:120px; } .gnum span { color:var(--ink-3); }
/* Goal progress bar (number goals) + the simple "mark achieved" block. */
.goal-bar { height:8px; border-radius:999px; background:var(--paper-2,color-mix(in srgb,var(--ink) 8%,transparent)); overflow:hidden; margin:12px 0 4px; }
.goal-bar i { display:block; height:100%; border-radius:999px; background:hsl(var(--h,220) var(--lane-s) var(--lane-l)); }
.goal-bar-pct { font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.goal-doneblock { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 4px; }
.goal-donebtn { padding:11px 20px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); font-size:15px; font-weight:600; cursor:pointer; }
.goal-donebtn:hover { border-color:var(--done); color:var(--done); }
.goal-donebtn.on { background:color-mix(in srgb,var(--done) 14%,var(--card)); border-color:var(--done); color:var(--done); }
.goal-done-note { font-size:13px; color:var(--ink-3); }
/* Goal page as a dashboard: a hero with progress front and centre. */
.gc-hero { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); margin:-2px 0 22px; padding:20px 22px; border-radius:20px; background:linear-gradient(160deg,color-mix(in srgb,var(--c) 12%,var(--card)),var(--card)); border:1px solid color-mix(in srgb,var(--c) 26%,var(--line)); box-shadow:var(--shadow); }
.gc-hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.gc-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gc-areachip { display:inline-flex; align-items:center; gap:6px; border:0; background:color-mix(in srgb,var(--c) 16%,transparent); color:var(--ink); font:inherit; font-size:13px; font-weight:600; padding:4px 11px; border-radius:999px; cursor:pointer; }
.gc-areachip .cd { width:8px; height:8px; border-radius:50%; background:var(--c); }
.gc-status { font-size:12px; font-weight:700; letter-spacing:.03em; padding:3px 10px; border-radius:999px; background:var(--paper-2,color-mix(in srgb,var(--ink) 7%,transparent)); color:var(--ink-2); text-transform:uppercase; }
.gc-status.s-active { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.gc-status.s-done { color:var(--done); background:color-mix(in srgb,var(--done) 14%,transparent); }
.gc-status.s-onhold { color:var(--gold); background:color-mix(in srgb,var(--gold) 15%,transparent); }
.gc-status.s-dropped { color:var(--ink-3); background:var(--paper-2); }
.gc-due { font-size:13px; color:var(--ink-3); font-weight:600; }
.gc-due-soon { color:var(--accent); }
.gc-due-due { color:var(--accent); }
.gc-due-over { color:var(--danger,#c4412e); }
.gc-due-ok { color:var(--ink-3); font-weight:500; }
/* Life area deadline chip on the hero */
.area-deadline { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink-2); margin:2px 0 2px; }
.area-deadline.gc-due-over { color:var(--danger,#c4412e); }
.area-deadline.gc-due-soon, .area-deadline.gc-due-due { color:var(--accent); }
/* Home "today" lead: deadlines approaching */
.home-deadlines { display:flex; flex-direction:column; gap:6px; margin:0 0 12px; }
.home-dl-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1px; }
.home-dl-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit; cursor:pointer; padding:9px 12px; border:1px solid var(--line); border-left:3px solid hsl(var(--h,220) var(--lane-s) var(--lane-l)); border-radius:11px; background:var(--card); color:var(--ink); transition:border-color .12s, transform .08s; }
.home-dl-row:hover { transform:translateY(-1px); border-color:var(--line-2); }
.home-dl-ic { flex:none; font-size:14px; }
.home-dl-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.home-dl-when { flex:none; font-size:12.5px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.home-dl-row.soon .home-dl-when { color:var(--accent); }
.home-dl-row.due .home-dl-when { color:var(--accent); }
.home-dl-row.over { border-left-color:var(--danger,#c4412e); }
.home-dl-row.over .home-dl-when { color:var(--danger,#c4412e); }
.gc-title { width:100%; border:0; background:none; resize:none; font-family:'Cormorant Garamond',Georgia,serif; font-size:30px; font-weight:600; line-height:1.12; color:var(--ink); margin:10px 0 4px; padding:0; }
.gc-title:focus { outline:none; }
.gc-areas { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; margin:2px 0 4px; }
.gc-areas-l { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.gc-prog { margin:12px 0 6px; }
.gc-prog-nums { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.gc-prog-cur { font-size:16px; color:var(--ink-2); } .gc-prog-cur b { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:600; color:var(--ink); }
.gc-prog-pct { font-size:15px; font-weight:600; color:var(--c); font-variant-numeric:tabular-nums; }
.gc-bar { height:10px; margin:0; }
.gc-prog-edit { display:flex; align-items:center; gap:8px; margin-top:11px; flex-wrap:wrap; }
.gc-prog-l { font-size:13px; color:var(--ink-3); }
.gc-prog-edit input { max-width:92px; text-align:center; } .gc-prog-edit .gc-unit { max-width:110px; text-align:left; }
.gc-prog-done { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* A "mark it done" goal shows a draggable slider on its card - drag the big handle
   to set how far along it is. The % reads large, the slider sits in its own clear
   band, and the "mark achieved" action is set apart below a hairline so nothing
   clashes. (Robin.) */
/* This block also carries .gc-progress (so the drag handler can find it), but that
   class is display:flex - which laid the whole thing out in one row. Force block. */
.gc-prog-slide.gc-progress { display:block; margin:16px 0 2px; }
.gc-prog-slide .gc-prog-nums { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.gc-prog-slide .gc-prog-cur { font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.gc-prog-slide .gc-prog-pct { font-size:27px; font-weight:700; color:var(--c); letter-spacing:-.02em; line-height:1; }
.gc-prog .gc-slidebar { height:30px; margin:6px 0 20px; }
.gc-prog .glist-bar { height:10px; border-radius:99px; }
.gc-prog-done-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:16px; border-top:1px solid color-mix(in srgb,var(--c) 16%,var(--line)); }
.goal-done-note { font-size:13px; color:var(--ink-3); }
/* The four connected panels (Tasks / Connected notes / Contacts / Links) as a
   tidy 2x2 of cards, each lifting a touch on hover and headed in the goal's hue. */
.gc-conn-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:20px; align-items:stretch; }
/* Equal-sized to begin with (a shared min height), and each row's pair matches;
   they only grow apart once there's real content in them. */
.gc-conn-grid > * { margin-top:0; min-height:210px; box-sizing:border-box; }
.gc-conn-grid > .focus-notes, .gc-conn-grid > .xlinks { transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, border-color .16s; }
.gc-conn-grid > .focus-notes:hover, .gc-conn-grid > .xlinks:hover { transform:translateY(-2px); border-color:color-mix(in srgb,hsl(var(--h,220) 52% 55%) 34%,var(--line)); box-shadow:0 14px 30px -18px color-mix(in srgb,hsl(var(--h,220) 52% 55%) 55%,rgba(0,0,0,.45)); }
.gc-conn-grid .fn-h, .gc-conn-grid .xlinks-h { color:hsl(var(--h,220) 46% 56%); }
@media (max-width:760px){ .gc-conn-grid { grid-template-columns:1fr; } }
.gc-metric-row { display:flex; align-items:center; gap:9px; margin-top:11px; }
.gc-metric-l { font-size:13px; color:var(--ink-3); flex:none; }
.gc-metric-row .sel { max-width:220px; }
.gc-metric-auto { margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--ink-2); background:var(--paper-2,rgba(0,0,0,.03)); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.gc-metric-aim { display:block; margin-top:4px; color:var(--ink-3); }
.gc-mini-num { max-width:64px; text-align:center; display:inline-block; height:30px; padding:2px 6px; margin:0 2px; }
/* Switch how a goal is tracked (mark-it-done ↔ a number) right on the card face. */
.gc-trackby { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.gc-trackby-l { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.gc-trackby-sel { max-width:230px; font-size:14px; }
.gc-why { display:flex; flex-direction:column; gap:5px; margin-top:16px; }
.gc-why-l { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.gc-why textarea { resize:vertical; font-family:'Cormorant Garamond',Georgia,serif; font-size:18px; font-style:italic; line-height:1.5; color:var(--ink); min-height:48px; width:100%; max-width:none; border:0; background:none; padding:0; }
.gc-why textarea:focus { outline:none; }
.gc-hero-stats { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid color-mix(in srgb,var(--c) 18%,var(--line)); font-size:13px; color:var(--ink-2); }
.gc-tasks-sec { margin-top:18px; }
.gc-settings { margin-top:20px; }
.gc-settings > summary { cursor:pointer; font-size:14px; color:var(--ink-3); padding:8px 0; list-style:none; }
.gc-settings > summary::-webkit-details-marker { display:none; }
.gc-settings > summary:hover { color:var(--ink); }
.gc-settings[open] > summary { color:var(--ink-2); margin-bottom:10px; }
.ms-block { margin-top:4px; }
.ms-list { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.ms-row { display:flex; align-items:center; gap:10px; }
.ms-check { flex:none; width:22px; height:22px; border-radius:6px; border:2px solid var(--line-2); background:none; color:transparent; font-size:13px; cursor:pointer; display:grid; place-items:center; }
.ms-row.done .ms-check { background:var(--done); border-color:var(--done); color:#fff; }
.ms-text { flex:1; min-width:0; border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:15px; background:var(--card); color:var(--ink); }
.ms-text:focus-visible { outline:none; border-color:var(--accent); }
.ms-row.done .ms-text { color:var(--ink-3); text-decoration:line-through; }
.ms-x { flex:none; border:none; background:none; color:var(--ink-3); font-size:19px; cursor:pointer; padding:0 4px; }
.ms-x:hover { color:var(--accent); }
.ms-add { padding:8px 14px; font-size:14.5px; }
.ms-group { margin-bottom:4px; }
.ms-count { flex:none; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ms-tasks { padding-left:0; display:flex; flex-direction:column; align-items:stretch; gap:9px; margin:8px 0 12px; }
.ms-tasks .ga-row { width:100%; }
/* Goal task cards: tick on the left, tappable body (title + meta), remove on the right. */
.gt-card { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:var(--card); box-shadow:var(--shadow); border-left:3px solid hsl(var(--h,220) 55% 55%); transition:border-color .12s, transform .1s; }
.gt-card:hover { border-color:var(--accent); transform:translateY(-1px); }
.gt-check { width:22px; height:22px; border-radius:7px; border:2px solid var(--line-2); color:transparent; display:grid; place-items:center; font-size:13px; flex:none; background:none; cursor:pointer; padding:0; }
.gt-card.done .gt-check { background:var(--done); border-color:var(--done); color:#fff; }
.gt-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; text-align:left; background:none; border:0; padding:0; cursor:pointer; }
.gt-title { font-size:15.5px; color:var(--ink); line-height:1.35; }
.gt-card.done .gt-title { color:var(--ink-3); text-decoration:line-through; }
.gt-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.gt-body:hover .gt-title { color:var(--accent); }
.gt-area { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-3); }
.gt-area .cd { width:8px; height:8px; border-radius:50%; background:hsl(var(--h,220) 55% 56%); flex:none; }
.gt-x { flex:none; border:0; background:none; color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:6px; opacity:.5; }
.gt-x:hover { opacity:1; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.ga-row { display:flex; align-items:center; gap:10px; }
.ga-row .check { width:20px; height:20px; border-radius:6px; border:2px solid var(--line-2); color:transparent; display:grid; place-items:center; font-size:12px; flex:none; background:none; cursor:pointer; padding:0; }
.ga-row.done .check { background:var(--done); border-color:var(--done); color:#fff; }
.ga-t { font-size:15.5px; cursor:pointer; flex:1; min-width:0; }
.ga-row.done .ga-t { color:var(--ink-3); text-decoration:line-through; }
.ga-x { flex:none; border:0; background:none; color:var(--ink-3); font-size:17px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:6px; opacity:.55; }
.ga-x:hover { opacity:1; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.gt-add-btn { align-self:flex-start; padding:7px 14px; font-size:13.5px; margin-top:2px; }
.gt-loose { margin-top:16px; }
.gt-loose-h { margin-bottom:2px; }
.bucket-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.bucket-card { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:flex; align-items:stretch; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow); }
.bucket-card:hover { border-color:var(--accent); }
.bucket-card-open { flex:1; min-width:0; display:flex; align-items:flex-start; gap:12px; text-align:left; padding:14px 8px 14px 16px; color:inherit; cursor:pointer; }
.bk-togoal { flex:none; align-self:center; width:36px; height:36px; margin-right:8px; border-radius:9px; font-size:16px; line-height:1; opacity:.45; transition:opacity .12s, background .12s; }
.bucket-card:hover .bk-togoal { opacity:1; }
.bk-togoal:hover { background:color-mix(in srgb,var(--accent) 12%,transparent); }
@media (hover:none){ .bk-togoal { opacity:.7; } }
.bucket-card.done .bk-togoal { display:none; }
.bk-check { flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--c); display:grid; place-items:center; font-size:13px; color:transparent; margin-top:1px; }
.bucket-card.done .bk-check { background:var(--done); border-color:var(--done); color:#fff; }
.bk-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.bk-title { font-size:16.5px; font-weight:500; line-height:1.3; }
.bucket-card.done .bk-title { color:var(--ink-3); text-decoration:line-through; }
.bk-meta { font-size:13px; color:var(--ink-3); }
.bk-done-btn { border:none; background:none; font-size:24px; line-height:1; color:var(--done); cursor:pointer; flex:none; padding:2px; }

/* Reviews & Wheel of Life */
.rv-starts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:8px; }
.rv-start { display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; text-align:left; }
.rv-start:hover { border-color:var(--accent); }
.rv-depth { display:flex; gap:4px; align-items:flex-end; height:14px; margin-bottom:4px; }
.rv-depth i { width:7px; background:var(--line-2); border-radius:2px; }
.rv-depth i:nth-child(1){height:5px}.rv-depth i:nth-child(2){height:8px}.rv-depth i:nth-child(3){height:11px}.rv-depth i:nth-child(4){height:14px}
.rv-depth[data-d="1"] i:nth-child(-n+1),.rv-depth[data-d="2"] i:nth-child(-n+2),.rv-depth[data-d="3"] i:nth-child(-n+3),.rv-depth[data-d="4"] i:nth-child(-n+4){ background:var(--gold); }
.rv-start-l { font-size:17px; font-weight:600; color:var(--ink); }
.rv-start-s { font-size:13.5px; color:var(--ink-3); }
.rv-rems { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.rv-rem { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow); }
.rv-rem-t { flex:1; min-width:0; font-size:15px; color:var(--ink-2); } .rv-rem-t b { color:var(--ink); }
.rv-rem-x { flex:none; border:0; background:none; color:var(--ink-3); font-size:18px; cursor:pointer; padding:0 4px; } .rv-rem-x:hover { color:var(--accent); }
.rv-rem-add { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.rv-rem-add .sel { flex:0 1 auto; padding:10px 12px; font-size:15px; border-radius:11px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); }
.rv-rem-add input[type=date], .rv-rem-add input[type=time] { min-width:0; }
.rv-rem-add .add-btn.wide { flex:none; }
.rv-rem-note { margin-top:10px; font-size:14px; color:var(--ink-3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rv-remtogs { display:flex; flex-direction:column; gap:8px; }
.rv-remtog { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); cursor:pointer; }
.rv-remtog-b { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rv-remtog-b b { font-size:15.5px; color:var(--ink); font-weight:600; }
.rv-remtog-b small { font-size:13px; color:var(--ink-3); }
.rv-remtog input { flex:none; width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.rv-rem-note2 { margin-top:12px; font-size:13.5px; color:var(--ink-3); line-height:1.5; }
/* Reminder cards: click to open and pick the day it lands. */
/* Daily review entry card at the top of Reviews (the tool also lives in Well-being). */
/* Daily review section on the Reviews page: a Today row on top, then only the
   days you actually did a review - never empty days. */
.rv-daily-sec { margin:0 0 26px; }
/* Reviews overview: a quiet AI read of where things stand, a para or two. */
.rv-overview { margin:4px 0 26px; padding:18px 20px; border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line)); border-radius:16px; background:linear-gradient(165deg, color-mix(in srgb,var(--gold) 9%,var(--card)), var(--card) 75%); box-shadow:var(--shadow); }
.rvo-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rvo-t { font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; color:var(--ink); }
.rvo-btn { flex:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600; color:var(--gold); background:color-mix(in srgb,var(--gold) 12%,var(--card)); border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line)); border-radius:999px; padding:7px 15px; transition:background .12s, border-color .12s; }
.rvo-btn:hover:not([disabled]) { background:color-mix(in srgb,var(--gold) 20%,var(--card)); }
.rvo-btn[disabled] { opacity:.7; cursor:default; }
.rvo-body { margin-top:13px; font-size:16px; line-height:1.62; color:var(--ink-2); }
.rvo-body p { margin:0 0 10px; }
.rvo-body p:last-child { margin-bottom:0; }
.rvo-loading { font-style:italic; color:var(--ink-3); }
.rvo-err { color:var(--accent); font-size:14px; }
.rv-daily-list { display:flex; flex-direction:column; margin-top:6px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
.rv-daily-item { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:13px 16px; border:0; border-bottom:1px solid var(--line); background:none; cursor:pointer; transition:background .12s; }
.rv-daily-item:last-child { border-bottom:0; }
.rv-daily-item:hover { background:var(--paper-2); }
.rv-daily-new { background:color-mix(in srgb,var(--accent) 7%,transparent); }
.rv-daily-new:hover { background:color-mix(in srgb,var(--accent) 12%,transparent); }
.rv-di-date { flex:none; width:116px; font-size:14.5px; font-weight:600; color:var(--accent); }
.rv-di-snip { flex:1; min-width:0; font-size:14.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-di-go { flex:none; font-size:17px; color:var(--accent); }
.rv-remcards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:start; }
@media (max-width:560px) { .rv-remcards { grid-template-columns:1fr; } }
.rv-remcard { background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.rv-remcard.is-on { border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
.rv-remhead { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:none; border:0; cursor:pointer; text-align:left; }
.rv-remhead .rv-remtog-b b { font-size:15.5px; color:var(--ink); font-weight:600; }
.rv-remhead .rv-remtog-b small { font-size:13px; color:var(--ink-3); }
.rv-remchev { flex:none; color:var(--ink-3); font-size:13px; }
.rv-remedit { padding:2px 14px 14px; display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--line); }
.rv-remedit-on { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); cursor:pointer; padding-top:12px; }
.rv-remedit-on input { flex:none; width:19px; height:19px; accent-color:var(--accent); }
.rv-remedit-day { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
.rv-remedit-day.off { opacity:.5; pointer-events:none; }
.rv-remfield { display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink-2); }
.rv-remfield .sel { padding:8px 12px; font-size:14.5px; max-width:none; }
.rv-remedit-note { font-size:12.5px; color:var(--ink-3); line-height:1.5; }
/* A review due today, surfaced on the Today page with a link to start it. */
.t2-reviewdue { width:100%; display:flex; align-items:center; gap:12px; text-align:left; margin:0 0 14px; padding:13px 16px; border-radius:14px; cursor:pointer;
  background:color-mix(in srgb,var(--accent) 8%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); box-shadow:var(--shadow); }
.t2-reviewdue:hover { border-color:var(--accent); }
/* The reminder + its dismiss × sit on one row. */
.t2-reviewdue-wrap { display:flex; align-items:stretch; gap:8px; margin:0 0 14px; }
.t2-reviewdue-wrap .t2-reviewdue { flex:1; margin:0; }
.t2-rd-x { flex:none; width:44px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); border-radius:14px; background:var(--card); color:var(--ink-3); font-size:22px; line-height:1; cursor:pointer; }
.t2-rd-x:hover { color:var(--ink); border-color:var(--line-2); background:var(--paper-2); }
/* Submitted-today: a calm green confirmation instead of the nag. */
.t2-reviewdone { width:100%; display:flex; align-items:center; gap:12px; text-align:left; margin:0 0 14px; padding:13px 16px; border-radius:14px; cursor:pointer; background:color-mix(in srgb,var(--done) 9%,var(--card)); border:1px solid color-mix(in srgb,var(--done) 34%,var(--line)); box-shadow:var(--shadow); }
.t2-reviewdone:hover { border-color:var(--done); }
.t2-reviewdone .t2-rd-ic, .t2-reviewdone .t2-rd-go { color:var(--done); }
.t2-reviewdone .t2-rd-body b { color:var(--ink); }
.t2-rd-ic { flex:none; font-size:18px; color:var(--accent); }
.t2-rd-body { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.t2-rd-body b { font-size:15.5px; color:var(--ink); }
.t2-rd-body small { font-size:13px; color:var(--ink-3); }
.t2-rd-go { flex:none; font-size:14px; font-weight:600; color:var(--accent); }
.rv-list { display:flex; flex-direction:column; }
.rv-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); text-align:left; cursor:pointer; color:var(--ink); background:none; border-left:0; border-right:0; border-top:0; }
.rv-row:hover { background:var(--paper-2); }
.rv-row-l { font-size:16px; } .rv-row-l b { font-weight:600; }
.rv-row-m { font-size:13.5px; color:var(--ink-3); white-space:nowrap; }
.rv-period { margin:-6px 0 22px; padding:16px 18px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
/* The "where are we, relative to now" timeline. */
.rv-when-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:11px; }
.rv-when-rel { font-family:'Cormorant Garamond',Georgia,serif; font-size:23px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.rv-when.past .rv-when-rel { color:var(--ink-2); }
.rv-when-range { font-size:13.5px; color:var(--ink-3); }
.rv-when-track { position:relative; height:8px; border-radius:999px; background:var(--paper-2); overflow:hidden; }
.rv-when-fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:color-mix(in srgb,var(--accent) 55%,var(--line-2)); }
.rv-when.live .rv-when-fill { background:var(--accent); }
/* A block per day, lighting up as the week goes on. */
.rv-week-blocks { display:flex; gap:7px; }
.rv-wb { flex:1 1 0; min-width:0; height:46px; border-radius:10px; border:1px solid var(--line); background:var(--paper-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; transition:background .12s,border-color .12s; }
.rv-wb-l { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-3); }
.rv-wb-n { font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.rv-wb-done { background:color-mix(in srgb,var(--accent) 20%,var(--card)); border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); }
.rv-wb-done .rv-wb-l, .rv-wb-done .rv-wb-n { color:color-mix(in srgb,var(--accent) 70%,var(--ink-2)); }
.rv-wb-today { background:var(--accent); border-color:var(--accent); box-shadow:0 4px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent); }
.rv-wb-today .rv-wb-l, .rv-wb-today .rv-wb-n { color:var(--accent-ink); }
.rv-when-detail { margin-top:12px; font-size:13.5px; color:var(--ink-2); }
.rv-editdates { margin-top:10px; border:0; background:none; padding:0; font-size:12.5px; color:var(--ink-3); cursor:pointer; }
.rv-editdates:hover { color:var(--accent); }
.rv-period-dates { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.rv-dt { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.rv-dt input { font:inherit; font-size:14.5px; text-transform:none; letter-spacing:0; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); border-radius:9px; padding:6px 10px; }
.rv-dt input:focus { border-color:var(--accent); outline:none; }
.rv-dt-dash { color:var(--ink-3); }
/* Structured goal review (bigger reviews) */
.rv-goalreview { margin:22px 0 8px; }
.gr-group { margin-bottom:18px; }
.gr-area { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.gr-area-n { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:var(--ink); }
.gr-area-n .ac-dot { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); }
.gr-vision { font-size:14px; font-style:italic; color:var(--ink-3); line-height:1.4; }
/* Monthly (and up) goal review: goals laid out ~3 per row, not full width, since
   there can be many. (Robin, 2026-09-27.) */
.gr-goals-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:stretch; }
@media (max-width:560px) { .gr-goals-grid { grid-template-columns:1fr; } }
.gr-goal { display:flex; flex-direction:column; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow); }
.gr-goal:last-child { margin-bottom:0; }
.gr-goal-h { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:8px; }
.gr-goal-t { border:0; background:none; padding:0; font:inherit; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; }
.gr-goal-t:hover { color:var(--accent); }
.gr-goal-m { font-size:13px; color:var(--ink-3); white-space:nowrap; }
.gr-goal .rvg-bar { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); width:100%; height:6px; margin:2px 0 12px; }
/* Tasks that fed each goal - done ones and what's still open, each a tap away. */
.gr-tasks { display:flex; flex-direction:column; gap:8px; margin:2px 0 12px; }
.gr-taskline { display:flex; flex-direction:column; gap:5px; }
.gr-taskline-k { font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.gr-chips { display:flex; flex-wrap:wrap; gap:6px; }
.gr-task-chip { font-size:13px; color:var(--ink-2); background:var(--paper-2,color-mix(in srgb,var(--ink) 5%,transparent)); border:1px solid var(--line); border-radius:999px; padding:4px 11px; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gr-task-chip:hover { border-color:var(--accent); color:var(--accent); }
.gr-task-chip.done { color:var(--done); border-color:color-mix(in srgb,var(--done) 30%,var(--line)); }
.gr-goal-rate { display:flex; align-items:center; gap:10px; margin:2px 0 10px; }
.gr-rate-l { font-size:12.5px; color:var(--ink-3); font-weight:600; flex:none; }
.gr-goal-rate .gr-scoreval { margin-left:0; flex:none; min-width:16px; text-align:right; font-variant-numeric:tabular-nums; }
/* Score-against-vision slider (0-5): a proper drag, not five fiddly pips. */
.gr-scorewrap { position:relative; flex:1; min-width:70px; display:flex; align-items:center; height:16px; }
.gr-scoretrack { flex:1; height:6px; border-radius:999px; background:var(--paper-2); overflow:hidden; }
.gr-scoretrack > i { display:block; height:100%; background:hsl(var(--h,220) 55% 55%); border-radius:999px; }
/* .gr-goal prefix beats the late `.sel { max-width:180px }` rule, which would
   otherwise cap this comment box (equal specificity, defined later). */
.gr-goal .gr-note { width:100%; max-width:none; box-sizing:border-box; font-size:14.5px; padding:9px 12px; resize:vertical; min-height:52px; line-height:1.45; margin-top:auto; }
/* Life-area sentiment, carried from the last wheel score */
.area-sentiment { display:inline-flex; align-items:center; gap:10px; margin:2px 0 6px; padding:6px 13px; border-radius:999px; background:color-mix(in srgb,var(--as-c,var(--ink-3)) 12%,var(--card)); border:1px solid color-mix(in srgb,var(--as-c,var(--ink-3)) 30%,transparent); }
.area-sentiment .as-dots { letter-spacing:2px; color:var(--as-c,var(--ink-3)); font-size:12px; }
.area-sentiment .as-lbl { font-size:14px; font-weight:600; color:var(--ink); }
.area-sentiment .as-sub { font-size:12px; color:var(--ink-3); }
.area-sentiment.s1 { --as-c:#c4462e; } .area-sentiment.s2 { --as-c:#cc7a33; } .area-sentiment.s3 { --as-c:#c9a227; } .area-sentiment.s4 { --as-c:#6f9f4a; } .area-sentiment.s5 { --as-c:#3f9b6a; }
.area-sentiment .as-x { margin:-2px -6px -2px 0; width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:15px; line-height:1; color:var(--as-c,var(--ink-3)); opacity:.5; background:transparent; transition:opacity .12s, background .12s; }
.area-sentiment .as-x:hover { opacity:1; background:color-mix(in srgb,var(--as-c,var(--ink-3)) 18%,transparent); }
@media (hover:none){ .area-sentiment .as-x { opacity:.7; } }
.rv-cardhead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rv-cardnav { display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.rv-navbtn { flex:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:18px; line-height:1; cursor:pointer; transition:border-color .12s,color .12s,background .12s; }
.rv-navbtn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.rv-navbtn:disabled { opacity:.35; cursor:default; }
.rv-navpos { font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:52px; text-align:center; }
.rv-mirror, .wheel, .rv-snapshot, .rv-prompts, .rv-goals-glance, .rv-goalreview { margin-top:30px; }
.rvg-list { display:flex; flex-direction:column; gap:8px; }
.rvg-row { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--c); border-radius:12px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; transition:border-color .12s; }
.rvg-row:hover { border-color:var(--accent); }
.rvg-dot { flex:none; width:9px; height:9px; border-radius:50%; background:var(--c); }
.rvg-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rvg-t { font-size:15.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvg-m { font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvg-bar { flex:none; width:70px; height:6px; border-radius:999px; background:var(--paper-2); overflow:hidden; }
.rvg-bar i { display:block; height:100%; background:var(--c); border-radius:999px; }
/* Weekly focus goals: progress + a line on how each moved (interactive). */
.rvg-goals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
@media (max-width:560px) { .rvg-goals { grid-template-columns:1fr; } }
.rvg-goal { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:flex; flex-direction:column; gap:8px; padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--c); border-radius:12px; background:var(--card); box-shadow:var(--shadow); }
.rvg-goal-h { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.rvg-t2 { border:0; background:none; padding:0; font:inherit; font-size:15.5px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvg-t2:hover { color:var(--accent); }
.rvg-pct { flex:none; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.rvg-goal-m { font-size:12.5px; color:var(--ink-3); margin-top:-2px; }
.rvg-intro { font-size:13.5px; color:var(--ink-3); line-height:1.5; margin:2px 0 12px; }
.rvg-hcount { font-size:12px; font-weight:400; color:var(--ink-3); text-transform:none; letter-spacing:0; }
/* Editable focus controls: a number goal's current value, or a done tick. */
.rvg-num { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rvg-num-l { font-size:13px; color:var(--ink-3); }
.rvg-cur { max-width:100px; text-align:center; font-variant-numeric:tabular-nums; }
.rvg-of { font-size:13.5px; color:var(--ink-2); }
.rvg-donerow { display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink); cursor:pointer; }
.rvg-donerow input { width:18px; height:18px; accent-color:var(--done); flex:none; }
.rvg-goal .rvg-bar { width:100%; }
/* Slidable progress in the review's Your-focus goals. */
.rvg-barwrap { position:relative; display:flex; align-items:center; width:100%; height:16px; margin:2px 0 2px; }
.rvg-barwrap .rvg-bar { flex:1; margin:0; }
.rvg-barwrap .rvg-slider { --h:var(--h); }
.rvg-note { width:100%; border:1px solid var(--line); border-radius:8px; background:var(--paper-2,var(--card)); padding:8px 10px; font:inherit; font-size:14px; color:var(--ink); }
.rvg-note:focus { outline:none; border-color:var(--accent); }
.rvg-note::placeholder { color:var(--ink-3); }
/* Past-period timeline: a compact one-liner, no full-and-meaningless bar. */
.rv-when.past { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rv-when.past .rv-when-rel { font-family:inherit; font-size:15.5px; font-weight:600; color:var(--ink); }
.rv-when.past .rv-when-detail { margin-top:0; font-size:13px; color:var(--ink-3); }
/* P1s still open / Went quiet - clickable cards instead of a list. */
.rv-cardsec { margin-top:16px; }
.rv-cardsec-h { font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
/* Surfaced from snooze - a proper, respected section, not a buried details. */
.rv-surfaced { margin-top:18px; padding:14px 16px; border-radius:14px; background:color-mix(in srgb,var(--accent) 5%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); }
.rv-surfaced-h { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; color:var(--ink); }
.rv-surfaced-note { font-size:13px; color:var(--ink-3); line-height:1.5; margin:3px 0 11px; }
.rvm-sun { flex:none; color:var(--accent); font-size:14px; }
.rvm-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.rvm-card { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:flex; align-items:center; gap:9px; text-align:left; padding:11px 13px; border:1px solid var(--line); border-left:3px solid var(--c); border-radius:11px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; min-width:0; transition:border-color .12s; }
.rvm-card:hover { border-color:var(--accent); }
.rvm-static { cursor:default; }
.rvm-static:hover { border-color:var(--line); }
.rvm-task .p-tag { flex:none; }
.rvm-t { flex:1; min-width:0; font-size:14.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvm-task .rvm-area { flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-3); max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvm-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--c); }
.rvm-card.rvm-area .rvm-t { font-weight:600; }
.rvm-go { flex:none; color:var(--ink-3); font-size:14px; }
.rvm-card.rvm-area:hover .rvm-go { color:var(--accent); }
/* Ticked-off, expanded: grouped by area under the ✦ summary, each clickable. */
.rvd-list { margin-top:16px; padding-top:16px; border-top:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); }
.rvd-total { font-size:13.5px; color:var(--ink-2); margin-bottom:12px; }
.rvd-total b { color:var(--ink); }
.rvd-sort { display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.rvd-sort-l { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; margin-right:2px; }
.rvd-sort-b { font-size:13px; font-weight:600; padding:5px 13px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); cursor:pointer; }
.rvd-sort-b:hover { border-color:var(--line-2); color:var(--ink); }
.rvd-sort-b.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.rvd-group { margin-bottom:14px; }
.rvd-group-h { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:7px; }
.rvd-count { margin-left:2px; font-size:11.5px; font-weight:600; color:var(--ink-3); background:var(--paper-2); border-radius:999px; padding:1px 8px; }
.rv-stats { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 4px; }
/* The week's wins, up front: a big count + the list shown by default. */
.rv-didbig { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; color:var(--ink); margin:6px 0 10px; line-height:1.15; }
.rv-didbig b { color:var(--done); font-size:34px; font-variant-numeric:tabular-nums; }
.rv-didbig.rv-didnone { font-size:18px; color:var(--ink-3); }
.rv-didbig.rv-didnone b { display:none; }
.rv-didlist { margin-top:10px; }
/* ── Submitted review, read as a report ─────────────────────────────── */
/* The report reads like a short magazine article. */
.rr { --c:hsl(var(--h,40) 45% 50%); max-width:680px; }
.rr-eyebrow { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--c); }
.rr-headline { font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(28px,4.2vw,36px); font-weight:600; line-height:1.08; letter-spacing:-.01em; color:var(--ink); margin:8px 0 2px; text-wrap:balance; }
.rr-kicker { font-size:15px; font-weight:600; color:var(--ink-2); margin-top:2px; }
.rr-standfirst { font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; line-height:1.45; color:var(--ink-2); margin:12px 0 0; }
.rr-standfirst b { color:var(--ink); font-weight:600; }
.rr-byline { margin-top:12px; font-size:13.5px; color:var(--ink-3); } .rr-byline b { color:var(--ink-2); }
.rr-byline-emoji { font-size:16px; }
/* Figures strip: the numbers as an infographic band. */
.rr-figs { display:flex; flex-wrap:wrap; gap:10px 28px; margin:22px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rr-fig { display:flex; flex-direction:column; gap:2px; }
.rr-fig-n { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.rr-fig-l { font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.rr-fig-d { font-size:12px; font-weight:700; margin-left:6px; vertical-align:middle; font-variant-numeric:tabular-nums; }
.rr-fig-d.up { color:var(--done); } .rr-fig-d.down { color:var(--ink-3); }
/* Trends infographic: sparklines + move-on-last. */
.rr-trends { display:flex; flex-direction:column; gap:18px; }
.rr-trend-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.rr-trend-lbl { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.rr-trend-now { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:600; color:var(--ink); line-height:1; } .rr-trend-now small { font-size:13px; color:var(--ink-3); }
.rr-trend-delta { font-size:12.5px; font-weight:600; margin-left:auto; }
.rr-trend-delta.up { color:var(--done); } .rr-trend-delta.down { color:var(--accent); } .rr-trend-delta.flat { color:var(--ink-3); }
.rr-spark { display:flex; align-items:flex-end; gap:5px; height:56px; }
.rr-spark-bar { flex:1 1 0; min-width:5px; max-width:32px; border-radius:4px 4px 0 0; background:color-mix(in srgb,var(--c,var(--accent)) 30%,var(--line-2)); }
.rr-spark-bar.now { background:hsl(var(--h,40) 45% 50%); }
/* Pull-quote from your own words. */
.rr-quote { margin:22px 0; padding:4px 0 4px 22px; border-left:4px solid hsl(var(--h,40) 45% 50%); font-family:'Cormorant Garamond',Georgia,serif; font-size:26px; line-height:1.35; font-style:italic; color:var(--ink); }
.rr-quote cite { display:block; margin-top:8px; font-size:13px; font-style:normal; font-family:inherit; color:var(--ink-3); letter-spacing:.02em; }
/* Featured win: a pull-out. */
.rr-feature { display:block; width:100%; text-align:left; margin:6px 0 24px; padding:18px 20px; border:0; border-left:4px solid var(--c); border-radius:0 14px 14px 0; background:color-mix(in srgb,var(--c) 9%,var(--card)); cursor:pointer; }
.rr-feature:hover { background:color-mix(in srgb,var(--c) 14%,var(--card)); }
.rr-feature-tag { display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c); }
.rr-feature-t { display:block; font-family:'Cormorant Garamond',Georgia,serif; font-size:24px; font-weight:600; line-height:1.2; color:var(--ink); margin:4px 0 2px; }
.rr-feature-sub { font-size:13px; color:var(--ink-3); }
/* Key things - the fast scannable read, high in the report. */
.rr-keys { margin:20px 0; padding:16px 20px; border-radius:16px; background:color-mix(in srgb,hsl(var(--h,40) 45% 50%) 8%,var(--card)); border:1px solid color-mix(in srgb,hsl(var(--h,40) 45% 50%) 24%,var(--line)); }
.rr-keys-h { font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:hsl(var(--h,40) 45% 42%); margin-bottom:10px; }
.rr-keys-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.rr-keys-list li { display:flex; align-items:baseline; gap:11px; font-size:16.5px; line-height:1.4; color:var(--ink); }
.rr-key-ic { flex:none; font-size:16px; width:22px; text-align:center; }
.rr-key-t b { font-weight:600; }
.rr-key-d { font-size:12.5px; font-weight:700; white-space:nowrap; }
.rr-key-d.up { color:var(--done); } .rr-key-d.down { color:var(--ink-3); }
.rr-key-sub { font-size:13.5px; color:var(--ink-3); font-weight:400; }
.rr-article { margin:6px 0 4px; }
.rr-article .rr-read p { font-size:17px; line-height:1.66; }
.rr-article .rr-read p:first-child::first-letter { font-family:'Cormorant Garamond',serif; font-size:52px; font-weight:600; float:left; line-height:.8; padding:6px 10px 0 0; color:var(--c); }
.rr-read-list { margin:0; padding-left:20px; } .rr-read-list li { font-size:16px; line-height:1.55; padding:4px 0; color:var(--ink); }
.rr-sec { margin:26px 0; padding-top:22px; border-top:1px solid var(--line); }
.rr-sec:first-of-type { border-top:0; padding-top:0; }
.rr-h { font-family:'Cormorant Garamond',Georgia,serif; font-size:24px; font-weight:600; color:var(--ink); margin:0 0 14px; }
.rr-h.rr-collap { display:flex; align-items:center; gap:9px; width:100%; background:none; border:0; padding:0; cursor:pointer; text-align:left; }
.rr-h.rr-collap .acw-chev { font-size:14px; color:var(--ink-3); }
.rr-recsub { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:16px 0 8px; }
.rr-recsub:first-child { margin-top:2px; }
.rr-tabs { display:flex; gap:8px; margin:4px 0 18px; flex-wrap:wrap; }
.rr-tab { border:1px solid var(--line-2); background:var(--card); padding:9px 18px; font:inherit; font-size:15px; font-weight:600; color:var(--ink-2); cursor:pointer; border-radius:999px; transition:border-color .12s, background .12s, color .12s; }
.rr-tab:hover { border-color:var(--ink-3); color:var(--ink); }
.rr-tab.on { color:#fff; background:hsl(var(--h,40) 45% 48%); border-color:hsl(var(--h,40) 45% 48%); }
.rr-tabpanel { margin-top:2px; }
.rr-read p { font-size:16.5px; line-height:1.62; color:var(--ink); margin:0 0 12px; }
.rr-read p:last-child { margin-bottom:0; }
.rr-wheel { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:2px 0 16px; }
.rr-wheel-chart { flex:none; width:180px; max-width:60vw; }
.rr-wheel-comm { font-size:15px; line-height:1.55; color:var(--ink-2); margin:0 0 12px; } .rr-wheel-comm b { color:var(--ink); }
.rr-wheel-read { flex:1 1 260px; min-width:0; }
/* Dashed "last time" outline laid over the current wheel. */
.rr-wheel-prev { fill:none; stroke:var(--ink-2); stroke-width:1.6; stroke-dasharray:3 3; opacity:.7; stroke-linejoin:round; }
.rr-wheel-legend { display:flex; gap:14px; justify-content:center; margin-top:8px; font-size:11.5px; color:var(--ink-3); }
.rr-wheel-key { display:inline-flex; align-items:center; gap:5px; }
.rr-wheel-key::before { content:''; width:16px; height:0; border-top:3px solid hsl(var(--h,40) 58% 55%); }
.rr-wheel-key.now::before { border-top:5px solid color-mix(in srgb,var(--ink) 45%,transparent); }
.rr-wheel-key.was::before { border-top:1.6px dashed var(--ink-2); }
.rr-wheel-movers { display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 12px; font-size:13.5px; color:var(--ink-2); }
.rr-wheel-movers b { color:var(--ink); }
.rr-wheel-spokes { display:flex; flex-direction:column; gap:6px; }
.rr-spoke { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none; padding:6px 8px; border-radius:8px; cursor:pointer; color:var(--ink); font:inherit; border-left:3px solid hsl(var(--h,220) var(--lane-s) var(--lane-l)); transition:background .12s; }
.rr-spoke:hover { background:var(--paper-2,color-mix(in srgb,var(--ink) 5%,transparent)); }
.rr-spoke-n { flex:1; min-width:0; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rr-spoke-dots { display:flex; gap:3px; flex:none; }
.rr-spoke-dots .rr-dot { width:9px; height:9px; }
.rr-spoke-s { flex:none; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; min-width:34px; justify-content:flex-end; }
@media (max-width:560px){ .rr-spoke-dots { display:none; } }
.rr-areas { display:flex; flex-direction:column; gap:10px; }
.rr-area { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--c); border-radius:12px; background:var(--card); }
.rr-area-h { display:flex; align-items:center; gap:10px; }
.rr-area-n { border:0; background:none; padding:0; font:inherit; font-size:15.5px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rr-area-n:hover { color:var(--accent); }
.rr-dots { display:flex; gap:4px; flex:none; }
.rr-dot { width:11px; height:11px; border-radius:50%; background:var(--paper-2,color-mix(in srgb,var(--ink) 12%,transparent)); }
.rr-dot.on { background:hsl(var(--h,220) var(--lane-s) var(--lane-l)); }
.rr-sc { flex:none; font-size:13.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; min-width:30px; text-align:right; }
.rr-area-note { margin-top:7px; font-size:14.5px; color:var(--ink-2); line-height:1.5; font-style:italic; }
.rr-qa { margin-bottom:16px; }
.rr-q { font-size:13.5px; font-weight:600; color:var(--ink-3); margin-bottom:4px; }
.rr-a { font-size:16px; line-height:1.6; color:var(--ink); white-space:pre-wrap; }
.rr-free { font-size:16px; line-height:1.6; color:var(--ink); margin-top:6px; }
.rr-foot { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rr-foot-note { font-size:12.5px; color:var(--ink-3); }
.rr-edit-btn { font-size:13.5px; }
/* "What you did" showcase: metric chips, a by-area bar chart, standout wins. */
.rvw-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:12px 0 4px; }
.rvw-metric { --h:220; display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left; padding:13px 15px; border:1px solid var(--line); border-left:3px solid hsl(var(--h) var(--lane-s) var(--lane-l)); border-radius:14px; background:var(--card); box-shadow:var(--shadow); cursor:default; }
button.rvw-metric { cursor:pointer; transition:border-color .12s, transform .08s; }
button.rvw-metric:hover { border-color:hsl(var(--h) var(--lane-s) var(--lane-l)); transform:translateY(-1px); }
.rvw-metric-goal { border-left-color:var(--accent); }
.rvw-m-n { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.rvw-m-l { font-size:13px; color:var(--ink-3); line-height:1.35; }
.rvw-m-l b { color:var(--ink-2); font-weight:600; }
.rvw-bars { display:flex; flex-direction:column; gap:7px; margin:16px 0 4px; }
.rvw-bar-row { --h:220; display:grid; grid-template-columns:minmax(74px,120px) 1fr 26px; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0; padding:2px 0; cursor:pointer; }
.rvw-bar-l { font-size:14px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvw-bar-row:hover .rvw-bar-l { color:var(--ink); }
.rvw-bar-track { height:10px; border-radius:999px; background:var(--paper-2,color-mix(in srgb,var(--ink) 8%,transparent)); overflow:hidden; }
.rvw-bar-track i { display:block; height:100%; border-radius:999px; background:hsl(var(--h) var(--lane-s) var(--lane-l)); }
.rvw-bar-n { font-size:13.5px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
.rvw-wins-h { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:20px 0 9px; }
.rvw-wins { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.rvw-win { display:flex; flex-direction:column; gap:5px; text-align:left; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--accent) 5%,var(--card)); box-shadow:var(--shadow); cursor:pointer; transition:border-color .12s, transform .08s; }
.rvw-win:hover { border-color:var(--accent); transform:translateY(-1px); }
.rvw-win-tag { font-size:12px; font-weight:600; color:var(--accent); }
.rvw-win-t { font-size:15px; color:var(--ink); line-height:1.35; }
.rvw-all { margin-top:18px; }
.rvw-all > summary { cursor:pointer; font-size:13.5px; color:var(--ink-3); padding:6px 0; list-style:none; }
.rvw-all > summary::-webkit-details-marker { display:none; }
.rvw-all > summary:hover { color:var(--accent); }
.rvw-all[open] > summary { color:var(--ink-2); margin-bottom:8px; }
.rvw-all-body { margin-top:4px; }
.rv-read-note { font-size:13.5px; color:var(--ink-3); margin:6px 0 0; }
.rv-stat { font-size:14.5px; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:7px 14px; }
.rv-stat b { color:var(--ink); font-variant-numeric:tabular-nums; }
.rv-stat.good b { color:var(--done); } .rv-stat.warn b { color:var(--accent); }
.rv-stat-btn { cursor:pointer; font:inherit; font-size:14.5px; display:inline-flex; align-items:center; gap:6px; transition:border-color .15s, background .15s; }
.rv-stat-btn:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--paper-2)); }
.rv-stat-btn.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--card)); }
.rv-stat-spark { color:var(--accent); font-size:12px; }
.rv-summary { margin:14px 0 4px; padding:18px 20px; border-radius:16px; background:color-mix(in srgb,var(--accent) 5%,var(--card)); border:1px solid var(--line); border-left:3px solid var(--accent); }
.rv-summary-h { font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.rv-summary-body p { font-size:16.5px; line-height:1.62; color:var(--ink); margin:0 0 12px; }
.rv-summary-body p:last-child { margin-bottom:0; }
.rv-summary-load { font-size:16px; color:var(--ink-2); padding:6px 0; display:flex; align-items:center; gap:9px; }
.rv-summary-spin { color:var(--accent); display:inline-block; animation:rv-spin 1.4s linear infinite; }
@keyframes rv-spin { to { transform:rotate(360deg); } }
.rv-summary-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap; }
.rv-summary-note { font-size:12.5px; color:var(--ink-3); }
.rv-summary-regen { font-size:13.5px; }
.rv-line { font-size:15.5px; color:var(--ink-2); margin-top:12px; }
.rv-line-k { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; margin-right:8px; }
.rv-det { margin-top:12px; }
.rv-det > summary { cursor:pointer; color:var(--ink-3); font-size:14.5px; list-style:none; padding:6px 0; }
.rv-det > summary::-webkit-details-marker { display:none; }
.rv-det ul { margin:6px 0 6px 20px; color:var(--ink-2); font-size:15px; }
.rv-det li { padding:2px 0; }
.wheel-avg { font-size:13.5px; color:var(--ink-3); font-weight:500; text-transform:none; letter-spacing:0; margin-left:8px; }
.wheel-rows { display:flex; flex-direction:column; gap:4px; }
.wheel-row { display:grid; grid-template-columns:minmax(84px,140px) 1fr 26px 22px; align-items:center; gap:12px; padding:7px 0; }
.wheel-x { flex:none; width:22px; height:22px; border:0; background:none; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; border-radius:6px; opacity:.55; }
.wheel-x:hover { opacity:1; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.wheel-restore { margin-top:10px; border:0; background:none; color:var(--ink-3); font-size:13.5px; cursor:pointer; padding:4px 0; }
.wheel-restore:hover { color:var(--accent); }
.linkish { border:0; background:none; color:var(--accent); font:inherit; cursor:pointer; padding:0; text-decoration:underline; }
/* Fast, styled hover tips (native title tooltips lag ~1s). A short delay so a tip
   appears almost as soon as you land on a control. Desktop hover only. */
[data-tip] { position:relative; }
@media (hover:hover) {
  [data-tip]::after {
    content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%;
    transform:translateX(-50%) translateY(3px); white-space:nowrap;
    background:var(--ink); color:var(--paper); font-size:12px; font-weight:500; line-height:1.25; letter-spacing:.01em;
    padding:5px 9px; border-radius:7px; pointer-events:none; opacity:0; z-index:80;
    box-shadow:0 8px 20px -10px rgba(0,0,0,.55); transition:opacity .1s ease, transform .1s ease; transition-delay:.12s;
  }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity:1; transform:translateX(-50%) translateY(0); }
  /* In the top tab strip the tip must drop BELOW (above would clip off-screen),
     and anchor to the button's right edge so it never runs past the window. */
  .tabstrip [data-tip]::after { top:calc(100% + 7px); bottom:auto; left:auto; right:0; transform:translateY(-3px); }
  .tabstrip [data-tip]:hover::after, .tabstrip [data-tip]:focus-visible::after { transform:translateY(0); }
}
.wheel-a { font-size:15.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wheel-pips { display:flex; gap:4px; }
.wp { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); flex:1 1 0; min-width:0; height:22px; border:1px solid var(--line-2); border-radius:5px; background:var(--card); cursor:pointer; padding:0; }
.wp.on { background:var(--c); border-color:var(--c); }
.wheel-v { font-size:15px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
.rv-snap { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.rv-snap-t { font-size:15.5px; color:var(--ink); } .rv-snap-m { font-size:13.5px; color:var(--ink-3); white-space:nowrap; }
.rv-prompt-list { margin:6px 0 16px 20px; color:var(--ink-2); font-size:16px; font-style:italic; }
.rv-prompt-list li { padding:4px 0; }
/* The actionable insight block on a review. */
.rv-insight { margin:18px 0 8px; padding:16px 18px; border-radius:16px; background:color-mix(in srgb,var(--accent) 6%,var(--card)); border:1px solid var(--line); border-left:3px solid var(--accent); }
.rv-insight-h { font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.rv-insight-list { margin:0; padding-left:18px; }
.rv-insight-list li { font-size:16px; line-height:1.5; color:var(--ink); padding:3px 0; }
/* Tappable link inside The read (area name, "see practices", "open the board"). */
.rvi-link { border:0; background:none; color:var(--accent); font:inherit; font-weight:600; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.rvi-link:hover { color:var(--ink); }
/* By life area: a score row + a one-line "how it went". */
.rva-intro { font-size:13.5px; color:var(--ink-3); line-height:1.5; margin:2px 0 12px; }
/* "Your bit": tabbed input (Reflect | Wheel of Life) under The read. */
.rv-input { margin-top:30px; }
.rv-input-tabs { display:flex; gap:8px; margin:10px 0 16px; border-bottom:1px solid var(--line); }
.rv-input-tab { border:0; background:none; padding:9px 4px; margin-bottom:-1px; font:inherit; font-size:15px; font-weight:600; color:var(--ink-3); cursor:pointer; border-bottom:2px solid transparent; }
.rv-input-tab:hover { color:var(--ink-2); }
.rv-input-tab.on { color:var(--ink); border-bottom-color:var(--accent); }
/* "Your bit" beefed up: a lead line and two proper option cards, each with an
   icon, a sub-line and a progress badge - not thin text tabs. */
.rv-input-lead { font-size:14px; color:var(--ink-2); line-height:1.5; margin:2px 0 14px; }
.rv-optrow { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 18px; }
.rv-opt { display:flex; align-items:center; gap:12px; text-align:left; padding:14px 15px; border:1.5px solid var(--line); border-radius:14px; background:var(--card); cursor:pointer; font:inherit; color:var(--ink); position:relative; transition:border-color .12s, background .12s, box-shadow .12s, transform .08s; }
.rv-opt:hover { border-color:var(--line-2); transform:translateY(-1px); }
.rv-opt.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--card)); box-shadow:0 2px 12px color-mix(in srgb, var(--accent) 18%, transparent); }
.rv-opt-ic { flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px; background:var(--paper-2); }
.rv-opt.on .rv-opt-ic { background:color-mix(in srgb, var(--accent) 16%, var(--paper-2)); }
.rv-opt-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rv-opt-txt b { font-size:16px; font-weight:600; line-height:1.2; }
.rv-opt-txt small { font-size:12.5px; color:var(--ink-3); line-height:1.3; }
.rv-opt-badge { flex:none; margin-left:auto; align-self:flex-start; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
@media (max-width:560px){ .rv-optrow { grid-template-columns:1fr; } }
/* Live wheel preview at the top of the Wheel tab - the shape as you score. */
.rv-wprev { display:flex; align-items:center; gap:18px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg, var(--paper-2), var(--card)); margin:0 0 16px; }
.rv-wprev-chart { flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; }
.rv-wprev-chart .wol-svg { width:150px; height:150px; }
.rv-wprev-meta { min-width:0; }
.rv-wprev-avg { display:flex; align-items:baseline; gap:3px; font-family:'Cormorant Garamond',serif; }
.rv-wpa-n { font-size:46px; font-weight:600; color:var(--ink); line-height:1; }
.rv-wpa-of { font-size:17px; color:var(--ink-3); font-family:system-ui,sans-serif; }
.rv-wprev-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-top:4px; }
.rv-wprev-sub { font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.4; }
@media (max-width:560px){ .rv-wprev { flex-direction:column; text-align:center; gap:10px; } .rv-wprev-avg { justify-content:center; } }
/* Reflect tab: numbered prompt cards, ticking green once answered. */
.rv-reflect-intro { font-size:13.5px; color:var(--ink-3); line-height:1.5; margin:2px 0 14px; }
.rva-rows { display:flex; flex-direction:column; gap:12px; }
.rva-row { display:flex; flex-direction:column; gap:7px; padding:11px 12px; border:1px solid var(--line); border-left:3px solid hsl(var(--h,220) var(--lane-s) var(--lane-l)); border-radius:12px; background:var(--card); }
.rva-head { display:grid; grid-template-columns:1fr auto 26px 22px; align-items:center; gap:10px; }
.rva-dot { display:none; }
.rva-name { justify-self:start; border:0; background:none; padding:0; font:inherit; font-size:15.5px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rva-name:hover { color:var(--accent); }
.rva-pips { display:flex; gap:4px; width:150px; max-width:42vw; }
.rva-v { font-size:15px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
.rva-note { width:100%; border:1px solid var(--line); border-radius:8px; background:var(--paper-2,var(--card)); padding:8px 10px; font:inherit; font-size:14px; color:var(--ink); }
.rva-note:focus { outline:none; border-color:var(--accent); }
.rva-note::placeholder { color:var(--ink-3); }
/* Reviews dashboard page. */
.rv-hero { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; margin:6px 0 20px; }
.rv-weekcol { flex:1 1 380px; min-width:0; display:flex; flex-direction:column; gap:10px; }
.rv-weekcard { min-width:0; border:1px solid var(--line); border-radius:18px; padding:16px 18px; background:var(--card); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; }
.rv-weekcard .rv-start-weekly { flex:none; box-shadow:none; }
.rv-start-weekly.rv-hero-done { border-color:color-mix(in srgb,#6f9f4a 45%,var(--line)); background:color-mix(in srgb,#6f9f4a 8%,var(--card)); }
.rv-week-due { font-size:14.5px; color:var(--ink-2); }
.rv-week-due b { color:var(--ink); font-weight:600; }
.rv-snooze { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.rv-snooze-l { color:var(--ink-3); }
.rv-snooze-cur { color:var(--ink-2); }
.rv-snooze-btn { border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); font-size:12.5px; padding:5px 11px; border-radius:999px; cursor:pointer; }
.rv-snooze-btn:hover { border-color:var(--accent); color:var(--accent); }
.rv-start-weekly { flex:1 1 340px; display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--accent); border-radius:16px; background:color-mix(in srgb,var(--accent) 8%,var(--card)); box-shadow:var(--shadow); cursor:pointer; text-align:left; }
.rv-start-weekly:hover { background:color-mix(in srgb,var(--accent) 14%,var(--card)); }
.rvw-ic { font-size:26px; flex:none; }
.rvw-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rvw-body b { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--ink); }
.rvw-body small { font-size:13.5px; color:var(--ink-3); }
.rvw-go { flex:none; font-size:22px; color:var(--accent); }
.rv-other { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:10px; }
.rv-ptile { text-align:left; display:flex; flex-direction:column; gap:3px; padding:13px 15px; border:1px solid var(--line); border-left:3px solid var(--pt-c,var(--line)); border-radius:14px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; transition:border-color .12s, transform .08s, box-shadow .12s; }
.rv-ptile:hover { transform:translateY(-1px); border-color:var(--pt-c,var(--accent)); box-shadow:0 4px 14px color-mix(in srgb,var(--pt-c,var(--accent)) 16%,transparent); }
.rv-pt-monthly { --pt-c:#6f9f4a; } .rv-pt-quarterly { --pt-c:#4a86b0; } .rv-pt-yearly { --pt-c:#8a6fb0; }
.rv-pt-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rv-pt-label { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; line-height:1.1; }
.rv-pt-badge { font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.rv-pt-badge.is-done { color:#6f9f4a; background:color-mix(in srgb,#6f9f4a 12%,transparent); }
.rv-pt-badge.is-prog { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.rv-pt-period { font-size:15px; font-weight:600; color:var(--ink); }
.rv-pt-hook { font-size:13px; color:var(--ink-3); }
.rv-pt-cta { margin-top:4px; font-size:13px; font-weight:600; color:var(--pt-c,var(--accent)); display:flex; align-items:center; gap:5px; }
.rv-pt-arrow { transition:transform .12s; }
.rv-ptile:hover .rv-pt-arrow { transform:translateX(3px); }
.rv-pt-weekly { --pt-c:var(--accent); }
/* Current + Previous as two equal tiles per type: a two-column grid (Current on
   the left, Previous on the right), one row per review type, stacking on mobile.
   Grid rows stretch, so the previous tile is exactly the current's size. (Robin.) */
.rv-pairs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:6px 0 22px; align-items:stretch; }
@media (max-width:640px){ .rv-pairs { grid-template-columns:1fr; } }
.rv-pairs .rv-ptile { height:100%; min-height:118px; gap:5px; }
.rv-pt-rel { flex:none; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pt-c,var(--accent)); background:color-mix(in srgb,var(--pt-c,var(--accent)) 11%,transparent); border-radius:999px; padding:2px 9px; }
.rv-ptile.is-prev { background:var(--paper-2); }
.rv-ptile.is-prev .rv-pt-rel { color:var(--ink-3); background:var(--paper); }
.rv-pt-mid { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }
.rv-pt-mid .rv-pt-hook { margin:0; }
.rv-pt-badge.is-none { color:var(--ink-3); background:var(--paper); }
/* (legacy) Each type's current tile once carried a slim "previous" strip beneath. */
.rv-ptgroup { display:flex; flex-direction:column; gap:8px; }
.rv-prevstrip { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 13px; border:1px solid var(--line); border-left:3px solid var(--pt-c,var(--line)); border-radius:11px; background:var(--paper-2); cursor:pointer; transition:border-color .12s, background .12s, transform .08s; }
.rv-prevstrip:hover { border-color:var(--pt-c,var(--accent)); background:var(--card); transform:translateY(-1px); }
.rv-prev-lbl { flex:none; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.rv-prev-period { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600; color:var(--ink); }
.rv-prev-badge { flex:none; margin-left:auto; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.rv-prev-badge.is-done { color:#6f9f4a; background:color-mix(in srgb,#6f9f4a 12%,transparent); }
.rv-prev-badge.is-prog { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.rv-prev-badge.is-none { color:var(--ink-3); background:var(--paper); }
.rv-prev-go { flex:none; font-size:15px; color:var(--pt-c,var(--accent)); }
.rv-trend-sec .rv-spark { display:flex; align-items:flex-end; gap:5px; height:64px; padding:8px 2px 0; }
.rv-bar { flex:1 1 0; min-width:6px; max-width:34px; background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 55%,transparent)); border-radius:4px 4px 0 0; }
.rv-trend-now { flex:none; align-self:center; font-size:14px; font-weight:600; color:var(--ink-2); margin-left:8px; }
/* Wheel of Life on the Reviews landing page. */
.wol-avg { font-size:13.5px; font-weight:500; color:var(--ink-3); text-transform:none; letter-spacing:0; margin-left:8px; }
.wol-wrap { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.wol-chart { position:relative; flex:none; width:240px; max-width:72vw; }
.wol-svg { width:100%; height:auto; display:block; }
.wol-ring { fill:none; stroke:var(--line); stroke-width:1; opacity:.6; }
.wol-track { fill:color-mix(in srgb,var(--ink) 4%,transparent); stroke:var(--card); stroke-width:1; }
.wol-hub { fill:var(--ink-3); }
.wol-cap { text-align:center; margin-top:10px; font-size:14px; color:var(--ink-2); }
.wol-cap b { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--ink); }
.wol-side { flex:1 1 240px; min-width:0; }
.wol-legend { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:4px 12px; }
.wol-leg { --h:220; display:flex; align-items:center; gap:8px; background:none; border:0; padding:6px 4px; cursor:pointer; text-align:left; border-radius:8px; }
.wol-leg:hover { background:var(--paper-2,color-mix(in srgb,var(--ink) 5%,transparent)); }
.wol-leg-dot { flex:none; width:11px; height:11px; border-radius:50%; background:hsl(var(--h) 58% 55%); }
.wol-leg-n { flex:1; min-width:0; font-size:14px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wol-leg-s { flex:none; font-size:13.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.wol-trend { margin-top:18px; }
.wol-trend-h { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.wol-trend .rv-spark { display:flex; align-items:flex-end; gap:5px; height:56px; padding:8px 2px 0; }
/* Wheel of Life full page */
.wol-more { margin-top:16px; border:0; background:none; color:var(--accent); font-size:14px; font-weight:600; cursor:pointer; padding:0; }
.wol-more:hover { text-decoration:underline; }
.wol-svg-big { max-width:260px; }
.wheelpage-hero { display:flex; gap:32px; align-items:flex-start; flex-wrap:wrap; margin:6px 0 10px; }
.wheelpage-hero .wol-chart { flex:none; width:260px; max-width:100%; }
.wheelpage-side { flex:1; min-width:280px; display:flex; flex-direction:column; gap:20px; }
.wheel-keys { margin:0; }
.wheel-avgtrend { margin-top:0; }
.wheel-avgtrend .rv-spark { display:flex; align-items:flex-end; gap:5px; height:56px; padding:8px 2px 0; }
.wheelpage-trends { margin-top:26px; }
.wheeltrend-list { display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.wheeltrend-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line); padding:12px 4px; cursor:pointer; }
.wheeltrend-row:hover .wheeltrend-n { color:var(--accent); }
.wheeltrend-dot { flex:none; width:10px; height:10px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); }
.wheeltrend-n { flex:1; min-width:0; font-size:15px; color:var(--ink); display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wheeltrend-spark { flex:none; width:130px; }
.wheeltrend-spark .rv-spark { display:flex; align-items:flex-end; gap:3px; height:34px; }
.wheeltrend-flat { color:var(--ink-3); font-size:13px; }
.wheeltrend-now { flex:none; font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:6px; min-width:66px; justify-content:flex-end; }
/* Per-cadence review page: due banner + section header */
.rv-type-due { font-size:15.5px; color:var(--ink-2); padding:12px 16px; border:1px solid var(--line); border-left:3px solid var(--ink-3); border-radius:12px; background:var(--card); margin-bottom:16px; }
.rv-type-due b { color:var(--ink); }
.rv-type-due.is-done { border-left-color:#6f9f4a; }
.rv-type-due.is-due { border-left-color:var(--accent); }
.rv-type-due.is-over { border-left-color:var(--danger,#c4412e); color:var(--danger,#c4412e); }
.rv-type-due.is-over b { color:var(--danger,#c4412e); }
.rv-sec-h2 { font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); margin:24px 0 12px; }
/* Deadlines approaching, in a review */
.rv-deadlines { margin:8px 0 4px; }
.rv-dl-list { display:flex; flex-direction:column; gap:7px; }
.rv-dl-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left; font:inherit; cursor:pointer; padding:11px 14px; border:1px solid var(--line); border-left:3px solid hsl(var(--h,220) var(--lane-s) var(--lane-l)); border-radius:12px; background:var(--card); color:var(--ink); transition:border-color .12s, transform .08s; }
.rv-dl-row:hover { transform:translateY(-1px); border-color:var(--line-2); }
.rv-dl-dot { flex:none; width:8px; height:8px; border-radius:50%; background:hsl(var(--h,220) var(--lane-s) var(--lane-l)); }
.rv-dl-ic { flex:none; font-size:13px; opacity:.7; }
.rv-dl-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.rv-dl-when { flex:none; font-size:13px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.rv-dl-row.soon .rv-dl-when { color:var(--accent); }
.rv-dl-row.over { border-left-color:var(--danger,#c4412e); }
.rv-dl-row.over .rv-dl-when { color:var(--danger,#c4412e); }
.rv-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:640px) { .rv-cards { grid-template-columns:1fr; } }
.rv-card { text-align:left; padding:16px 18px; border:1px solid var(--line); border-left:4px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; display:flex; flex-direction:column; gap:9px; transition:border-color .12s, transform .08s; }
.rv-card:hover { border-color:var(--accent); transform:translateY(-1px); }
.rv-card-h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.rv-card-l { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; color:var(--ink); }
/* Archive reviews grouped by type, each card as substantial as a current-period
   card: period, how it felt (Wheel word + score), the stats, and a way in. */
.rv-typegroup { margin-top:18px; }
.rv-typegroup:first-of-type { margin-top:6px; }
.rv-typegroup-h { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; margin-bottom:10px; }
.rv-typegroup-h .muted { font-family:system-ui,sans-serif; font-size:13px; font-weight:400; }
.rv-card-tall { min-height:150px; padding:18px 20px; gap:7px; }
.rv-card-tall .rv-card-period { font-size:17px; }
.rv-card-rel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:999px; padding:2px 9px; }
.rv-card-rel.is-past { color:var(--ink-3); background:var(--paper-2); }
.rv-card-sentiment { display:flex; align-items:baseline; gap:10px; font-size:15px; font-weight:600; color:var(--ink-2); }
.rv-card-sentiment-none { color:var(--ink-3); font-weight:400; font-style:italic; }
.rv-card-score { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--ink); }
.rv-card-tall .rv-card-stats { margin-top:auto; }
.rv-card-tall .rv-card-open { margin-top:4px; }
.rv-card-tall .rv-card-h { justify-content:flex-start; flex-wrap:wrap; align-items:center; }
.rv-card-tall .rv-card-badge { margin-left:auto; }
.rv-card-d { font-size:12px; color:var(--ink-3); white-space:nowrap; }
.rv-l-weekly { color:var(--accent); } .rv-card:has(.rv-l-weekly) { border-left-color:var(--accent); }
.rv-l-monthly { color:#6f9f4a; } .rv-card:has(.rv-l-monthly) { border-left-color:#6f9f4a; }
.rv-l-quarterly { color:#4a86b0; } .rv-card:has(.rv-l-quarterly) { border-left-color:#4a86b0; }
.rv-l-yearly { color:#8a6fb0; } .rv-card:has(.rv-l-yearly) { border-left-color:#8a6fb0; }
/* Reviews carousels: one row per type, current period pinned left, scroll back. */
.rvcar { margin:2px 0 26px; }
.rvcar-row { margin:0 0 20px; }
.rvcar-rowh { display:flex; align-items:baseline; gap:10px; margin:0 0 9px; }
.rvcar-rowl { font-size:18px; font-weight:600; }
.rvcar-rowc { font-size:13px; color:var(--ink-3); }
.rvcar-track { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.rvcar-card { flex:0 0 auto; width:156px; min-height:138px; display:flex; flex-direction:column; gap:5px; text-align:left; padding:13px 14px; border-radius:14px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink); scroll-snap-align:start; transition:transform .12s, box-shadow .12s, border-color .12s; }
.rvcar-card:hover { transform:translateY(-2px); box-shadow:0 10px 22px -14px rgba(0,0,0,.4); }
.rvcar-card.is-current { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset, var(--shadow); }
.rvcar-miss { opacity:.85; }
.rvcar-cur { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); min-height:14px; }
.rvcar-period { font-size:16px; font-weight:600; line-height:1.15; }
.rvcar-sub { font-size:12px; color:var(--ink-3); min-height:15px; }
.rvcar-badge { align-self:flex-start; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; }
.rvcar-b-done { background:color-mix(in srgb,#3e9b6c 18%,transparent); color:#3e9b6c; }
.rvcar-b-prog { background:color-mix(in srgb,#e08a1e 22%,transparent); color:#c9791a; }
.rvcar-b-now  { background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }
.rvcar-b-miss { background:var(--paper-2); color:var(--ink-3); }
.rvcar-score { font-size:11.5px; color:var(--ink-2); min-height:15px; }
.rvcar-cta { margin-top:auto; font-size:13px; font-weight:600; color:var(--accent); }
/* Review status: an in-progress review is clearly held, never lost. */
.rv-status { font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.02em; }
.rv-status-inprogress { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); }
.rv-status-done { color:var(--ink-3); background:var(--bg-2,transparent); border:1px solid var(--line); }
.rv-finish { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.rv-finish-hint { font-size:13px; color:var(--ink-3); }
.rv-done-badge { font-size:14px; font-weight:700; color:#6f9f4a; }
.rv-reopen { font-size:13px; }
.rv-card-prog { border-left-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,var(--card)); }
.rv-card-prog-badge { font-size:11.5px; font-weight:700; color:var(--accent); }
.rv-inprog-sec .home-sec-h { color:var(--accent); }
/* The prominent review date + period on a review's own page. */
.rv-datehead { display:flex; flex-direction:column; gap:2px; margin:-4px 0 10px; }
.rv-dh-day { font-family:'Cormorant Garamond',serif; font-size:23px; font-weight:600; color:var(--ink); }
.rv-dh-range { font-size:13.5px; color:var(--ink-3); }
.rv-dh-week { align-self:flex-start; margin-top:4px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,transparent); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-radius:999px; padding:2px 10px; }
.rv-dh-sub { font-size:13px; font-weight:700; color:#6f9f4a; margin-top:2px; }
/* List-card period + status. */
.rv-card-period { font-size:15px; font-weight:600; color:var(--ink); }
.rv-card-range { font-size:12.5px; color:var(--ink-3); }
.rv-card-h { align-items:center; }
.rv-card-badge { font-size:11.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.rv-card-badge.is-prog { color:var(--accent); }
.rv-card-badge.is-done { color:#6f9f4a; }
/* Analysis section: the data read + the AI brief, promoted to the top. */
.rv-analysis { margin:14px 0 6px; padding:16px 17px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--accent) 5%,var(--card)); }
.rv-analyse-cta { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.rv-summary-open { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
/* A collapsible section header (Wheel of Life). */
.rv-collap-h { cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px; }
.rv-collap-h .acw-chev { color:var(--ink-3); font-size:13px; width:14px; text-align:center; }
/* Review section headers stand out in the highlight (accent) colour. (Robin.) */
.home-sec-h.rv-collap-h, .home-sec-h.rv-collap-h .acw-chev { color:var(--accent); }
.rvcar-rowl { color:var(--accent); }
/* Inside a review card, EVERY section title is in the highlight colour and a touch
   bigger, not grey. (Robin, 2026-09-27.) */
body[data-view="reviewcard"] .home-sec-h { color:var(--accent); font-size:15.5px; }
body[data-view="reviewcard"] .home-sec-h .acw-chev { color:var(--accent); }
body[data-view="reviewcard"] .rv-freewrite-h { color:var(--accent); }
/* Reflect: one box per question, with room to think. */
.rv-qa { display:flex; flex-direction:column; gap:16px; margin:6px 0 20px; }
.rv-qa { counter-reset:rvq; }
.rv-q { display:flex; gap:12px; align-items:flex-start; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.rv-q.answered { border-color:color-mix(in srgb, var(--done) 40%, var(--line)); background:color-mix(in srgb, var(--done) 5%, var(--card)); }
.rv-q-num { flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:var(--paper-2); color:var(--ink-3); margin-top:1px; }
.rv-q.answered .rv-q-num { background:var(--done); color:#fff; }
.rv-q-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.rv-q-label { font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.rv-ans { width:100%; box-sizing:border-box; font:inherit; font-size:16px; line-height:1.5; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 12px; resize:vertical; min-height:58px; }
.rv-ans:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.rv-ans::placeholder { color:var(--ink-3); }
.rv-freewrite { margin-top:8px; }
.rv-freewrite-h { font-size:16px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.rv-prompts .prose { min-height:120px; border:1px solid var(--line); border-radius:10px; padding:11px 12px; background:var(--card); }
.rv-pastfilter { display:flex; gap:6px; flex-wrap:wrap; margin:-2px 0 12px; }
.rv-fchip { padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:12.5px; font-weight:600; cursor:pointer; }
.rv-fchip:hover { border-color:var(--line-2); }
.rv-fchip.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.rv-remitem { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:12px; }
.rv-remdate { max-width:172px; padding:7px 10px; font-size:14px; }
.rv-remrep { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); cursor:pointer; }
.rv-remrep input { width:17px; height:17px; accent-color:var(--accent); flex:none; }
.rv-remitem-x { margin-left:auto; border:0; background:none; color:var(--ink-3); font-size:18px; cursor:pointer; padding:0 4px; line-height:1; }
.rv-remitem-x:hover { color:var(--accent); }
.rv-remadd { align-self:flex-start; font-size:13.5px; margin-top:4px; }
/* Review cadence: the "when" rule + the count/next-due meta line. */
.rv-rem-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 14px 12px; font-size:13px; color:var(--ink-2); }
.rv-rem-stat b { color:var(--ink); font-weight:700; }
.rv-rem-muted { color:var(--ink-3); }
.rv-rem-dot { color:var(--line-2); }
.rv-cad-toggle { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); cursor:pointer; padding-top:12px; }
.rv-cad-toggle input { flex:none; width:19px; height:19px; accent-color:var(--accent); }
.rv-cad-when { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; }
.rv-cad-l { font-size:13.5px; color:var(--ink-3); }
.rv-cad-whenl { display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px; }
.rv-remedit-sec { display:flex; flex-direction:column; gap:11px; }
.rv-remedit-sec + .rv-remedit-sec { border-top:1px solid var(--line); padding-top:14px; }
.rv-remedit-sec .rv-cad-toggle { padding-top:0; }
.rv-cad-date { font-size:13px; color:var(--ink-3); line-height:1.5; }
.rv-cad-date b { color:var(--ink); font-weight:700; }
.rv-cad-chips { display:flex; gap:7px; flex-wrap:wrap; }
.rv-cad-chip { padding:7px 13px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); font-size:13.5px; font-weight:600; cursor:pointer; }
.rv-cad-chip.sm { padding:5px 10px; font-size:12.5px; }
.rv-cad-chip:hover { border-color:var(--accent); color:var(--accent); }
.rv-cad-chip.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--card)); }
.rv-rep-i { color:var(--accent); font-size:11px; }
.rv-card-stats { display:flex; flex-wrap:wrap; gap:6px 12px; }
.rv-card-open { margin-top:9px; font-size:13px; font-weight:600; color:var(--accent); }
/* Review sentiment reader: a gentle mood line from what you wrote. */
.rv-sentiment { display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:12px 15px; border-radius:14px; background:color-mix(in srgb,var(--accent) 6%,var(--card)); border:1px solid var(--line); }
.rv-sent-emoji { font-size:24px; flex:none; }
.rv-sent-body { display:flex; flex-direction:column; gap:1px; min-width:0; }
.rv-sent-l { font-size:15px; font-weight:600; color:var(--ink); }
.rv-sent-note { font-size:13px; color:var(--ink-3); }
.rvc-stat { font-size:13px; color:var(--ink-3); }
.rvc-stat b { color:var(--ink); font-variant-numeric:tabular-nums; }
.wheel-hint { font-size:12.5px; color:var(--ink-3); font-weight:400; text-transform:none; letter-spacing:0; margin-left:6px; }

/* Vision board & the wall */
.vision-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.vision-card { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:flex; flex-direction:column; gap:10px; width:100%; box-sizing:border-box; text-align:left; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; }
.vision-card:hover { border-color:var(--accent); }
.vc-head { display:flex; align-items:center; gap:10px; }
.vc-dot { width:12px; height:12px; border-radius:50%; background:var(--c); flex:none; }
.vc-dot.big { width:22px; height:22px; margin-top:6px; }
.vc-title { font-family:'Cormorant Garamond',Palatino,Georgia,serif; font-size:22px; font-weight:600; }
.vc-text { font-size:15.5px; color:var(--ink-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.vc-empty { font-size:15px; color:var(--ink-3); font-style:italic; }
.vc-thumbs { display:flex; gap:6px; }
.vc-thumbs img { width:56px; height:56px; object-fit:cover; border-radius:8px; background:var(--paper-2); }
.vision-h1 { font-family:'Cormorant Garamond',Palatino,Georgia,serif; font-weight:600; }
.wall-grid { columns:3 220px; column-gap:12px; margin-top:8px; }
.wall-tile { break-inside:avoid; margin:0 0 12px; position:relative; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.wall-tile img { width:100%; display:block; background:var(--paper-2); }
.wall-tile figcaption { position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px; font-size:13.5px; font-weight:500; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.66)); }
.mail-savecontact { padding:5px 12px; font-size:13.5px; border-radius:999px; }
.mail-contact-have { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--done); font-weight:600; white-space:nowrap; cursor:pointer; padding:5px 12px; border-radius:999px; border:1px solid color-mix(in srgb,var(--done) 40%,var(--line)); background:color-mix(in srgb,var(--done) 8%,transparent); transition:background .12s,border-color .12s; }
.mail-contact-have:hover { background:color-mix(in srgb,var(--done) 16%,transparent); border-color:var(--done); }

/* Mail drafts */
.mail-folder-c { font-size:12px; font-weight:600; background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); border-radius:999px; padding:1px 7px; margin-left:3px; }
.draft-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); background:none; cursor:pointer; color:var(--ink); }
.draft-row:hover { background:var(--paper-2); }
.draft-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.draft-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.draft-subj { font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.draft-when { font-size:12.5px; color:var(--ink-3); white-space:nowrap; flex:none; }
.draft-sub { font-size:14px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.draft-x { flex:none; color:var(--ink-3); font-size:20px; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; }
.draft-x:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }

/* Document scanner */
#scanner { position:fixed; inset:0; z-index:80; background:#000; color:#fff; }
.scan-shell { position:absolute; inset:0; display:flex; flex-direction:column; }
.scan-x { position:absolute; top:14px; right:14px; width:40px; height:40px; border:none; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:20px; cursor:pointer; }
.scan-load { margin:auto; text-align:center; padding:30px; }
.scan-load p { margin-top:14px; font-size:16px; } .scan-load .scan-sub { color:rgba(255,255,255,.6); font-size:13.5px; }
.scan-spin { width:44px; height:44px; margin:0 auto; border:3px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:scan-spin 1s linear infinite; }
@keyframes scan-spin { to { transform:rotate(360deg); } }
.scan-view { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:0; }
#scan-video { width:100%; height:100%; object-fit:cover; }
.scan-frame { position:absolute; inset:8% 6%; border:2px solid rgba(255,255,255,.55); border-radius:10px; pointer-events:none; }
.scan-adjust { background:#111; }
#scan-canvas { display:block; max-width:100%; max-height:100%; }
#scan-handles { position:absolute; pointer-events:none; }
.scan-quad { position:absolute; left:0; top:0; pointer-events:none; }
.scan-quad polygon { fill:rgba(207,91,143,.14); stroke:var(--tbl-pink,#cf5b8f); stroke-width:2.5; }
.scan-h { position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:var(--tbl-pink,#cf5b8f); border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.5); pointer-events:auto; touch-action:none; cursor:grab; }
.scan-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px calc(16px + env(safe-area-inset-bottom)); background:#0a0a0a; }
.scan-shutter { width:66px; height:66px; border-radius:50%; border:4px solid #fff; background:#fff; cursor:pointer; flex:none; box-shadow:0 0 0 3px #0a0a0a inset; }
.scan-shutter:active { transform:scale(.94); }
.scan-btn { border:none; border-radius:999px; padding:11px 18px; font-size:15px; font-weight:600; cursor:pointer; }
.scan-btn.ghost { background:rgba(255,255,255,.14); color:#fff; }
.scan-btn.primary { background:var(--accent); color:var(--accent-ink); }
.scan-btn.tog { background:rgba(255,255,255,.14); color:#fff; }
.scan-btn.tog.on { background:#fff; color:#111; }
.scan-count { font-size:14px; color:#fff; background:rgba(255,255,255,.16); padding:6px 12px; border-radius:999px; }
.scan-hint { font-size:13px; color:rgba(255,255,255,.6); }
.ce-allday { display:inline-flex; align-items:center; gap:8px; font-size:15.5px; color:var(--ink-2); cursor:pointer; user-select:none; }
.ce-allday input { width:17px; height:17px; accent-color:var(--accent); cursor:pointer; }
.ce-timerow { display:inline-flex; gap:8px; align-items:center; }
.ce-timerow[hidden] { display:none; }
.add-task input:focus-visible,.sel:focus-visible,.add-area input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
.sel { padding:12px 12px; font-size:16px; background:var(--card); border:1px solid var(--line-2); border-radius:12px; color:var(--ink); max-width:180px; }
/* Custom Monday-first date picker (the native one follows the browser locale). */
.date-field { max-width:none; text-align:left; cursor:pointer; white-space:nowrap; }
.date-field:hover { border-color:var(--accent); }
.dp-bg { position:fixed; inset:0; z-index:70; background:rgba(20,16,24,.34); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:20px; }
.dp-cal { width:min(346px,94vw); background:var(--card); border:1px solid var(--line-2); border-radius:16px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); padding:16px; }
.dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dp-title { display:flex; align-items:center; gap:6px; font-size:17px; font-weight:600; color:var(--ink); }
/* Month and year as selects rather than a label: a birthday is sixty years back,
   and the arrows step one month at a time. */
/* NOT .dp-sel - that already means the selected day in the grid below. */
.dp-pick { font: inherit; font-size:16px; font-weight:600; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:9px; padding:6px 8px; max-width:none; cursor:pointer; }
.dp-pick:hover { border-color:var(--accent); }
.dp-year { min-width:96px; }
.dp-nav { width:40px; height:40px; border-radius:10px; font-size:24px; color:var(--ink-2); display:flex; align-items:center; justify-content:center; }
.dp-nav:hover { background:var(--paper-2); color:var(--accent); }
.dp-dows { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.dp-dows span { text-align:center; font-size:12px; font-weight:600; color:var(--ink-3); padding:4px 0; }
.dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-day { height:42px; border-radius:9px; font-size:15.5px; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.dp-day:hover { background:var(--paper-2); }
.dp-other { color:var(--ink-3); opacity:.5; }
/* Today = a clear outlined box (obvious even with poor eyesight); selected = filled. */
.dp-today { font-weight:700; color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); }
.dp-sel, .dp-sel:hover { background:var(--accent); color:var(--accent-ink); box-shadow:none; }
.dp-disabled { color:var(--ink-3); opacity:.28; cursor:default; }
.dp-disabled:hover { background:none; }
.dp-foot { display:flex; justify-content:flex-end; margin-top:12px; }
.dp-link { color:var(--accent); font-size:15px; padding:6px 10px; border-radius:8px; }
.dp-link:hover { background:var(--paper-2); }

.scope { font-size:15px; color:var(--ink-3); margin-bottom:12px; min-height:20px; }
.scope b { color:var(--ink-2); font-weight:500; }

/* ── task list ───────────────────────────────────── */
.list { display:flex; flex-direction:column; gap:2px; }
.task {
  --c:hsl(var(--h,220) var(--lane-s) var(--lane-l));
  display:flex; align-items:center; gap:13px; padding:13px 8px; border-bottom:1px solid var(--line);
}
.task:last-child { border-bottom:0; }
.task .check {
  width:21px; height:21px; flex:none; border-radius:6px; border:2px solid var(--line-2);
  display:grid; place-items:center; color:transparent; font-size:13px; transition:all .13s;
}
.task .check:hover { border-color:var(--accent); }
.task.done .check { background:var(--done); border-color:var(--done); color:#fff; }
.task .t { flex:1; min-width:0; font-size:17px; cursor:text; }
.task.done .t { text-decoration:line-through; color:var(--ink-3); }
.task .tag { font-size:13px; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 40%,transparent); padding:3px 10px; border-radius:999px; white-space:nowrap; }
.task .prio { font-size:12.5px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.task .prio.P1 { color:var(--accent); }
.task .x { opacity:0; color:var(--ink-3); font-size:18px; padding:0 4px; transition:opacity .12s,color .12s; }
.task:hover .x { opacity:1; }
.task .x:hover { color:var(--accent); }
@media (hover:none){ .task .x,.area .x { opacity:1; } }

.empty { text-align:center; color:var(--ink-3); padding:60px 20px; font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic; }

/* ── tabs (Tasks / Tables) ───────────────────────── */
.tabs { display:flex; gap:4px; margin-left:6px; }
.tab {
  padding:7px 15px; border-radius:999px; font-size:15.5px; color:var(--ink-3);
  text-decoration:none; border:1px solid transparent; transition:background .12s,color .12s;
}
.tab:hover { color:var(--ink); background:var(--paper-2); }
.tab.on { color:var(--ink); background:var(--card); border-color:var(--line); font-weight:500; }

/* ── tables ──────────────────────────────────────── */
.tbl-grid { max-width:1180px; margin:0 auto; padding:24px max(18px,env(safe-area-inset-left)) 90px; display:grid; grid-template-columns:230px minmax(0,1fr); gap:30px; align-items:start; }
.tbl-list { position:sticky; top:96px; display:flex; flex-direction:column; gap:2px; }
.tbl-item { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:10px; color:var(--ink-2); font-size:16.5px; text-align:left; width:100%; transition:background .12s; }
.tbl-item:hover { background:var(--paper-2); color:var(--ink); }
.tbl-item.on { background:var(--paper-2); color:var(--ink); font-weight:500; }
.tbl-item .n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl-item .x { opacity:0; color:var(--ink-3); font-size:16px; }
.tbl-item:hover .x { opacity:1; } .tbl-item .x:hover { color:var(--accent); }

.tbl-main { min-width:0; }
.tbl-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
/* Table toolbar: search + filter. */
/* One explicit height for every control so search, Sort, Filter and + Row sit
   on a single straight line regardless of their natural heights. */
.tbl-toolbar { display:flex; align-items:center; gap:10px; margin:0 0 16px; }
.tbl-search { flex:1; width:auto; margin:0; }
.tbl-add-row { flex:none; white-space:nowrap; }
.tbl-toolbar .tbl-search,
.tbl-toolbar .tbl-filter-btn,
.tbl-toolbar .tbl-add-row { height:50px; min-height:50px; margin:0; box-sizing:border-box; }
.tbl-toolbar .tbl-filter-btn,
.tbl-toolbar .tbl-add-row { display:inline-flex; align-items:center; justify-content:center; }
.tbl-filter-btn { flex:none; display:inline-flex; align-items:center; gap:7px; padding:11px 16px; border-radius:12px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); font-size:15px; transition:border-color .12s,color .12s,background .12s; }
.tbl-filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.tbl-filter-btn.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--card)); }
/* A sort or filter is actually applied - a clear accent border so you can see at
   a glance the table isn't showing everything in its natural order. */
.tbl-filter-btn.active { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--card)); box-shadow:inset 0 0 0 1px var(--accent); font-weight:600; }
.tbl-filters { margin:-4px 0 18px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--paper-2); }
.filt-rows { display:flex; flex-direction:column; gap:8px; }
.filt-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filt-row select.sel { flex:none; min-width:130px; max-width:210px; }
.filt-row input.fv { flex:1; min-width:130px; max-width:260px; }
.filt-row select.fv { flex:none; min-width:130px; }
.filt-x { flex:none; width:28px; height:28px; border-radius:7px; color:var(--ink-3); font-size:18px; line-height:1; }
.filt-x:hover { color:var(--accent); background:var(--card); }
.filt-empty { color:var(--ink-3); font-size:14px; padding:2px 0; }
.sortl-lbl { flex:none; min-width:52px; color:var(--ink-3); font-size:13px; }
.sarrow b { font-size:9.5px; vertical-align:super; margin-left:1px; font-weight:700; }
.filt-act { display:flex; gap:10px; margin-top:12px; }
.tbl-noresult td { text-align:center; color:var(--ink-3); padding:22px; font-style:italic; }
.tbl-head h1 { font-size:30px; }
.tbl-head input.rename { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:500; background:transparent; border:0; border-bottom:1px solid var(--line-2); color:var(--ink); padding:2px 0; min-width:200px; flex:1; }

.tbl-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); }
table.recs { border-collapse:collapse; width:100%; font-size:16px; }
/* Fixed layout so the colgroup widths are honoured (resizable columns). Size the
   table to the sum of its columns (max-content) rather than 100%, so resizing one
   column changes only that column and the total width - never the others. */
table.recs.fixed { table-layout:fixed; width:max-content; }
table.recs th { position:relative; }
table.recs th, table.recs td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:0; text-align:left; vertical-align:middle; overflow:hidden; }
/* Drag handle straddling each header's right border. */
.resizer { position:absolute; top:0; right:-4px; width:9px; height:100%; cursor:col-resize; z-index:3; touch-action:none; }
.resizer:hover { background:color-mix(in srgb,var(--accent) 45%,transparent); }
table.recs th:last-child, table.recs td:last-child { border-right:0; }
table.recs tr:last-child td { border-bottom:0; }
table.recs thead th { background:var(--paper-2); font-weight:600; white-space:nowrap; }
.thh { display:flex; align-items:center; gap:4px; padding:10px 12px; }
/* The column name IS the sort control: click to sort, click again to reverse. */
.th-name { flex:1; min-width:0; display:flex; align-items:center; gap:5px; text-align:left; font:inherit; font-weight:600; color:var(--ink); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.th-name:hover { color:var(--accent); }
.th-name .sarrow { flex:none; color:var(--accent); font-size:12px; }
.th-rename { flex:1; min-width:0; font:inherit; font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--accent); border-radius:6px; padding:2px 6px; }
.th-edit { flex:none; font-size:13px; color:var(--ink-3); opacity:0; padding:0 2px; transition:opacity .12s,color .12s; }
.thh:hover .th-edit { opacity:.6; } .th-edit:hover { opacity:1; color:var(--accent); }
.thh .x { opacity:.35; color:var(--ink-3); font-size:15px; } .thh .x:hover { opacity:1; color:var(--accent); }
/* The ▾ opens the full column menu (rename / type / options / sort / delete). */
.th-menu { flex:none; width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:13px; opacity:.55; transition:opacity .12s,color .12s,background .12s; }
.thh:hover .th-menu { opacity:1; } .th-menu:hover { color:var(--accent); background:var(--paper); }
.th-type { flex:none; font-family:var(--sans,inherit); font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line-2); border-radius:4px; padding:1px 4px; }
/* URL in a text cell: a small open-link button, cell stays editable. */
.cellwrap { position:relative; display:block; width:100%; }
.cellwrap.has-link .cell { padding-right:30px; }
.cell-link { position:absolute; right:8px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px; color:var(--accent); font-size:14px; text-decoration:none; opacity:.7; }
.cell-link:hover { opacity:1; background:color-mix(in srgb,var(--accent) 14%,transparent); }
/* A URL column cell in the grid: the whole URL is a clickable link (edit it from
   the row's card). Truncates with an ellipsis so a long link never stretches the
   table. */
table.recs td a.cell-urllink { display:inline-block; max-width:100%; box-sizing:border-box; color:var(--accent); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
table.recs td a.cell-urllink:hover { text-decoration:underline; }
/* Column header right-click menu. */
.colmenu { position:fixed; z-index:60; min-width:212px; max-width:240px; background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 14px 34px -10px rgba(0,0,0,.35); padding:6px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; overscroll-behavior:contain; }
.colmenu .cm-item { text-align:left; padding:8px 10px; border-radius:8px; font-size:15px; color:var(--ink); }
.colmenu .cm-item:hover { background:var(--paper-2); }
.colmenu .cm-item.on { color:var(--accent); font-weight:500; }
.colmenu .cm-item.cm-del { color:var(--accent); }
.cm-sep { height:1px; background:var(--line); margin:5px 4px; }
.cm-label { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); padding:4px 10px 2px; font-weight:600; }
.cm-opt { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 10px; font-size:14.5px; color:var(--ink-2); }
.cm-opt button { color:var(--ink-3); font-size:16px; } .cm-opt button:hover { color:var(--accent); }
.cm-empty { padding:4px 10px; font-size:13.5px; color:var(--ink-3); font-style:italic; }
.cm-addopt { display:flex; gap:6px; padding:5px 8px 3px; }
.cm-addopt input { flex:1; min-width:0; padding:6px 8px; font-size:14px; border:1px solid var(--line-2); border-radius:8px; background:var(--paper); color:var(--ink); }
.cm-addopt button { flex:none; padding:6px 11px; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-size:14px; }
.th-add, .row-del { width:52px; text-align:center; padding-left:0; padding-right:0; }
/* Only the bare "+" (a direct child) fills the cell; the Add button inside the
   add-column form keeps its own sizing, or it balloons and spills off the table. */
.th-add > button { display:inline-flex; align-items:center; justify-content:center; width:100%; color:var(--ink-3); font-size:20px; padding:8px 0; } .th-add > button:hover { color:var(--accent); }
.colnew .add-btn { flex:none; }
.row-add button { color:var(--ink-3); font-size:19px; padding:8px 10px; }

table.recs td .cell { width:100%; border:0; background:transparent; font:inherit; color:var(--ink); padding:11px 12px; }
/* Attachments column cells */
.tcell-atts { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:7px 8px; }
.tcell-att { display:inline-flex; align-items:center; gap:5px; max-width:190px; padding:3px 5px 3px 8px; border:1px solid var(--line-2); border-radius:8px; background:var(--paper-2); font-size:13px; color:var(--ink-2); cursor:pointer; transition:border-color .12s, color .12s; }
.tcell-att:hover { border-color:var(--accent); color:var(--accent); }
.tcell-att-ic { flex:none; }
.tcell-att-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tcell-att-x { flex:none; color:var(--ink-3); font-size:14px; line-height:1; }
.tcell-att-x:hover { color:var(--accent); }
.tcell-att-add { flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px dashed var(--line-2); border-radius:8px; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; transition:border-color .12s, color .12s; }
.tcell-att-add:hover { border-color:var(--accent); color:var(--accent); }
table.recs td .cell:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:4px; }
table.recs td.num .cell { font-variant-numeric:tabular-nums; text-align:right; }
/* Currency cell: an optional symbol sitting before a right-aligned number. */
.cell-cur { display:flex; align-items:center; gap:4px; width:100%; }
.cell-cur .cur-sym { flex:none; color:var(--ink-3); font-size:14.5px; padding-left:6px; }
.cell-cur .cur-in { flex:1; min-width:0; text-align:right; font-variant-numeric:tabular-nums; }
table.recs td.check { text-align:center; }
table.recs td.check input { width:19px; height:19px; accent-color:var(--accent); }
table.recs select.cell { appearance:none; cursor:pointer; }
.row-del button { display:inline-flex; align-items:center; justify-content:center; width:100%; opacity:0; color:var(--ink-3); font-size:18px; padding:6px 0; } tr:hover .row-del button { opacity:1; } .row-del button:hover { color:var(--accent); }
.row-add td { padding:0; } .row-add button { width:100%; text-align:left; padding:12px; color:var(--ink-3); font-size:15px; } .row-add button:hover { color:var(--accent); background:var(--paper-2); }

/* add-column popover */
.colnew { display:flex; gap:8px; align-items:center; padding:10px 12px; }
.colnew input, .colnew select { padding:8px 10px; font-size:15px; background:var(--paper); border:1px solid var(--line-2); border-radius:8px; color:var(--ink); }
.colnew input { width:130px; }

/* open-as-card handle, first cell of each row */
.th-open, td.row-open { width:52px; text-align:center; padding-left:0; padding-right:0; }
/* The whole left-most cell opens the row - a big, obvious click target, not a
   tiny button. It lights up on row hover so it reads as clickable. */
td.row-open { cursor:pointer; color:var(--ink-3); transition:background .12s,color .12s; }
td.row-open .ro-ic { display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:22px; opacity:.45; transition:opacity .12s; pointer-events:none; }
tr:hover td.row-open { background:var(--paper-2); color:var(--ink-2); }
tr:hover td.row-open .ro-ic { opacity:1; }
@media (hover:none){ td.row-open .ro-ic { opacity:.7; } }

/* the row, opened as a card */
.card { max-width:660px; }
.card [data-back] { margin-bottom:22px; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.card-head .card-title { flex:1; min-width:0; }
.card-head .note-del-ic { flex:none; margin-top:8px; }
.card-title { font-size:clamp(28px,4vw,38px); margin:4px 0 26px; text-wrap:balance; }
/* The editable title (an input styled as the heading): borderless until you hover
   or focus it, so it reads as the title but is clearly tap-to-edit. */
.card-title-ed { width:100%; box-sizing:border-box; border:0; background:none; font-family:inherit; font-weight:inherit; color:var(--ink); padding:2px 6px; margin:4px -6px 24px; border-radius:9px; transition:background .12s, box-shadow .12s; }
.card-title-ed::placeholder { color:var(--ink-3); }
.card-title-ed:hover { background:color-mix(in srgb,var(--ink) 5%,transparent); }
.card-title-ed:focus { outline:none; background:color-mix(in srgb,var(--accent) 7%,transparent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent); }
.card-fields { display:flex; flex-direction:column; }
.crow { display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.crow:last-child { border-bottom:0; }
.clabel { display:flex; flex-direction:column; gap:3px; color:var(--ink-2); font-size:16.5px; }
.clabel em { font-style:normal; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.cval input, .cval select { width:100%; padding:10px 13px; font-size:16.5px; background:var(--card); border:1px solid var(--line-2); border-radius:9px; color:var(--ink); }
.cval input:focus-visible, .cval select:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
.cval input[type=checkbox] { width:22px; height:22px; accent-color:var(--accent); }
@media (max-width:620px){ .crow { grid-template-columns:1fr; gap:6px; } }

.tbl-empty { text-align:center; color:var(--ink-3); padding:70px 20px; font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic; }

@media (max-width:760px){ .tbl-grid { grid-template-columns:1fr; } .tbl-list { position:static; flex-flow:row wrap; } }

/* ── notes: nested pages, prose bodies ───────────── */
.notes-grid { max-width:1080px; margin:0 auto; padding:24px max(18px,env(safe-area-inset-left)) 90px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:34px; align-items:start; }
.notes-side { position:sticky; top:96px; }
.notes-tops { display:flex; flex-direction:column; gap:2px; }
.note-top { display:block; width:100%; text-align:left; padding:9px 12px; border-radius:10px; color:var(--ink-2); font-size:16.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:background .12s; }
.note-top:hover { background:var(--paper-2); color:var(--ink); }
.note-top.on { background:var(--paper-2); color:var(--ink); font-weight:500; }

.notes-main { min-width:0; }
.note-blank, .note-empty { color:var(--ink-3); font-family:'Cormorant Garamond',serif; font-style:italic; font-size:21px; }
.note-blank { padding:70px 20px; text-align:center; }

.note-crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; font-size:15px; }
/* Standard breadcrumb bar (tables, rows, and shared with note/task/area). */
.crumbbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
/* Desktop: pin the breadcrumb just below the tab strip (44px) as you scroll, so
   you always know where you are. Negative side margins bleed the blurred bar to
   the pane edges (cancelling the pane's side padding); mobile has its own rule. */
@media (min-width:821px){
  .crumbbar, .note-crumbs {
    position:sticky; top:44px; z-index:22;
    /* -30px cancels the pane's 30px top padding, so the bar sits FLUSH under the
       tab strip at rest and never slides - an anchor that never moves. (Robin.) */
    margin:-30px calc(-1 * clamp(20px,4vw,52px)) 12px; padding:9px clamp(20px,4vw,52px) 11px;
    background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
}
.crumbbar .crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
/* Note header split into two rows, both inside the sticky bar: crumbs + "New"
   on top, then the note actions (star left, bin/ellipsis right). (Robin.) */
.note-crumbs-split { flex-direction:column; align-items:stretch; gap:10px; }
.note-crumbs-split .nc-top { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.note-crumbs-split .nc-top .addnew { margin-left:auto; }
.note-crumbs-split .nc-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.note-crumbs-split .nc-actions .nab-right { margin-left:auto; display:flex; align-items:center; gap:6px; }
/* The connected life-area chip sits left with the star, not auto-pushed right. */
.note-crumbs-split .nc-actions .crumb-area { margin-left:0; }
.note-areas-row { margin:2px 0 14px; }
.note-areas-row:empty { display:none; }
/* "Also findable as": alt search terms on a page, as removable chips. */
.note-aliases { margin:0 0 14px; }
.note-aliases .na-sum { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-3); list-style:none; }
.note-aliases .na-sum::-webkit-details-marker { display:none; }
.note-aliases[open] .na-sum { margin-bottom:9px; }
.na-body { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.alias-chips { display:flex; flex-wrap:wrap; gap:7px; }
.alias-chips:empty { display:none; }
.alias-chip { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--ink-2); background:color-mix(in srgb,var(--accent) 9%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:999px; padding:3px 5px 3px 11px; }
.alias-x { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:0; background:none; color:var(--ink-3); font-size:14px; line-height:1; cursor:pointer; }
.alias-x:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.alias-in { flex:1; min-width:180px; max-width:340px; margin:0; font-size:14px; }
.crumb-back { flex:none; width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-2); font-size:18px; border:1px solid var(--line); background:var(--card); transition:background .12s,color .12s,border-color .12s; }
.crumb-back:hover { border-color:var(--accent); color:var(--accent); background:var(--paper); }
.note-crumbs .crumb-back, .area-hero-top .crumb-back { margin-right:2px; }
/* "+ New" quick-capture menu, right-aligned in the breadcrumb row on every page. */
.addnew { margin-left:auto; position:relative; flex:none; }
.addnew-btn { display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; color:var(--ink-2); background:var(--card); border:1px solid var(--line); border-radius:9px; padding:7px 13px; cursor:pointer; transition:border-color .12s,color .12s; }
.addnew-btn:hover, .addnew-btn[aria-expanded="true"] { border-color:var(--accent); color:var(--accent); }
.an-plus { color:var(--accent); font-size:15px; line-height:1; }
.an-ch { font-size:11px; color:var(--ink-3); }
.addnew-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:194px; background:var(--card); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; gap:1px; }
.addnew-item { display:flex; align-items:center; gap:11px; width:100%; text-align:left; font-size:15px; color:var(--ink); background:none; border:0; border-radius:9px; padding:10px 12px; cursor:pointer; transition:background .12s,color .12s; }
.addnew-item:hover { background:var(--paper); color:var(--accent); }
.addnew-ic { width:20px; text-align:center; color:var(--ink-3); font-size:14px; flex:none; }
.addnew-item:hover .addnew-ic { color:var(--accent); }
/* The sidebar's own "+ New" button: full-width and prominent at the top of the rail. */
.nav-new { margin:0 6px 8px; }
.nav-new .addnew { margin-left:0; width:100%; }
.nav-new .addnew-btn { width:100%; justify-content:center; gap:8px; padding:11px 14px; font-size:15.5px; color:var(--accent); background:var(--card); border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line-2)); border-radius:11px; }
.nav-new .addnew-btn:hover, .nav-new .addnew-btn[aria-expanded="true"] { color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--card)); border-color:var(--accent); }
.nav-new .an-plus { color:var(--accent); font-size:17px; }
.nav-new .an-ch { display:none; }   /* no arrow on the sidebar New button */
.nav-new .addnew-menu { left:0; right:auto; width:100%; box-sizing:border-box; }
/* Back to where you were, above the Home greeting (only when there's history). */
.home-back { width:auto; gap:6px; padding:0 12px; font-size:14px; margin-bottom:14px; }
/* The per-tab help "i" on Settings, pushed to the right of the section header. */
.set-sec-h { align-items:center; }
.set-help-btn { margin-left:auto; width:28px; height:28px; font-size:15px; }
.crumb-area { margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:14px; transition:background .12s,color .12s,border-color .12s; }
.crumb-area:hover { border-color:var(--accent); color:var(--ink); }
.crumb-area .ca-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.crumb-tools .crumb-area { margin-left:0; }
.crumb { color:var(--ink-3); background:none; border:0; font:inherit; font-size:15px; padding:2px 4px; border-radius:6px; }
.crumb:hover { color:var(--accent); }
.crumb.cur { color:var(--ink-2); min-width:0; max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Keep the injected +New grouped with the crumb tools on the right, not floating
   in the middle when the title is long. */
.note-crumbs .addnew { margin-left:auto; }
.note-crumbs .addnew ~ .crumb-tools { margin-left:8px; }
.crumb-sep { color:var(--ink-3); opacity:.5; }
.note-del { margin-left:auto; font-size:14px; padding:6px 12px; }
/* Delete-as-bin: a compact icon button (matches the star/lock icons beside it)
   so it fits on the same line as the area chips instead of wrapping. */
.note-del-ic { display:inline-flex; align-items:center; justify-content:center; padding:6px 8px; color:var(--ink-3); }
.note-del-ic:hover { color:var(--danger,#d9534f); border-color:color-mix(in srgb,var(--danger,#d9534f) 45%,var(--line)); }
.note-del-ic svg { width:19px; height:19px; display:block; }
/* Share-as-icon (task card): a compact share glyph beside the bin, accent (not
   danger) on hover, with the share count tucked alongside when shared. */
.note-share-ic { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:6px 8px; color:var(--ink-3); }
.note-share-ic:hover { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.note-share-ic svg { width:19px; height:19px; display:block; }
.note-share-ic.on { color:var(--accent); }
.note-share-ic .ic-n { font-size:13px; font-weight:600; line-height:1; }

.note-title { display:block; width:100%; font-family:'Cormorant Garamond',serif; font-size:clamp(30px,5vw,44px); font-weight:500; line-height:1.08; letter-spacing:-.015em; color:var(--ink); background:transparent; border:0; padding:0; margin:0 0 18px; resize:none; overflow:hidden; white-space:pre-wrap; word-wrap:break-word; }
.note-title:focus-visible { outline:none; }

.note-body { min-height:140px; font-size:18.5px; line-height:1.75; color:var(--ink); cursor:text; }
.note-body h2 { font-size:26px; margin:22px 0 8px; }
.note-body h3 { font-size:22px; margin:20px 0 6px; }
.note-body h4 { font-size:19px; margin:16px 0 4px; color:var(--ink-2); }
.note-body p { margin:0 0 14px; }
.note-body a { color:var(--accent); }
/* Nothing in a note body should force horizontal scroll on a narrow screen. */
.note-body, .prose { overflow-wrap:break-word; }
.note-body img, .prose img { max-width:100%; height:auto; border-radius:10px; margin:8px 0; }
.note-body pre, .prose pre { max-width:100%; overflow-x:auto; }
.note-body table, .prose table { display:block; max-width:100%; overflow-x:auto; }
/* Collapsible sections (details/summary) in notes + prose. */
.note-body details, .prose details { margin:0 0 14px; }
.note-body summary, .prose summary { cursor:pointer; font-weight:600; list-style:none; display:flex; align-items:baseline; gap:9px; padding:2px 0; }
.note-body summary::-webkit-details-marker, .prose summary::-webkit-details-marker { display:none; }
.note-body summary::before, .prose summary::before { content:'▸'; color:var(--ink-3); font-size:.8em; transition:transform .15s; flex:none; align-self:center; }
.note-body details[open] > summary::before, .prose details[open] > summary::before { transform:rotate(90deg); }
.note-body details > :not(summary), .prose details > :not(summary) { margin-left:22px; }
.note-body code { font-family:ui-monospace,Menlo,monospace; font-size:.9em; background:var(--paper-2); padding:2px 6px; border-radius:5px; }
.note-body blockquote { border-left:3px solid var(--line-2); padding-left:16px; margin:0 0 14px; color:var(--ink-2); font-style:italic; }
.note-body hr { border:0; border-top:1px solid var(--line); margin:22px 0; }
.note-body textarea { width:100%; min-height:160px; font:inherit; font-size:18.5px; line-height:1.75; color:var(--ink); background:var(--card); border:1px solid var(--line-2); border-radius:12px; padding:16px 18px; resize:none; }
.note-body textarea:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }

/* Note page: main content left, "Notes inside" in a sticky right column.
   The two-column split is driven by the PANE's own width, not the viewport
   (`.note-cq` is a size container) - so a narrow pane (sidebar open on a small
   screen, a split view) stacks the connected sections below the writing area
   instead of crushing both into cramped columns. Robin, emphatically: never
   squeeze the content - move it to the bottom when space is tight. */
.note-cq { container:notecq / inline-size; min-width:0; }
.note-layout { display:grid; grid-template-columns:minmax(0,1fr) 272px; column-gap:36px; row-gap:0; align-items:start; grid-template-areas:"main side" "attach side"; }
.note-main { grid-area:main; min-width:0; }
.note-attach { grid-area:attach; min-width:0; }
.note-side { grid-area:side; position:sticky; top:16px; min-width:0; }
/* A quiet header over the note's right rail, in the same small-caps gold style as
   the sidebar section titles (.nav-grp), so the whole connected column reads as
   one labelled group. (Robin, 2026-10-15.) */
.note-side-h { font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--accent); font-weight:700; padding:0 2px 4px; margin:0; }
/* Legacy: there is no 'Starred' card in the rail any more, but make sure any old
   one never shows on desktop. (Robin: remove starred from the right column.) */
.note-side .note-starred { display:none; }
/* A quiet 'turn into a table' at the very bottom of the note sidebar - out of the
   way, not in the toolbar. */
.note-totable { display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:6px 10px; background:none; border:0; color:var(--ink-3); font-size:13px; cursor:pointer; border-radius:8px; }
.note-totable:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); }
/* The note "⋯ more" overflow: tucks away less-used actions (e.g. Turn into a
   table) so they don't crowd the note - especially on mobile. */
.note-more { position:relative; display:inline-block; }
.note-more > summary.note-more-sum { list-style:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border-radius:8px; color:var(--ink-3); font-size:21px; line-height:1; cursor:pointer; }
.note-more > summary.note-more-sum::-webkit-details-marker { display:none; }
.note-more[open] > summary.note-more-sum, .note-more > summary.note-more-sum:hover { color:var(--accent); background:var(--paper-2); }
.note-side .subpages { margin-top:0; border-top:0; padding:16px; background:var(--paper-2); border:1px solid var(--line); border-radius:14px; }
@container notecq (max-width:900px){
  /* Single column. `display:contents` on the side rail lets its sections (Notes
     inside, Tasks, Starred) reorder independently of each other: Notes inside
     above the attachments, Tasks below them, Starred hidden. */
  .note-layout { display:flex; flex-direction:column; gap:0; }
  .note-side { display:contents; }
  .note-main { order:1; }
  .note-side .subpages { order:2; background:transparent; border:0; border-radius:0; padding:0; margin-top:34px; border-top:1px solid var(--line); padding-top:20px; }
  .note-attach { order:3; }
  .note-tasks { order:4; margin-top:34px; border-top:1px solid var(--line); padding-top:20px; }
  .note-events { order:5; margin-top:34px; border-top:1px solid var(--line); padding-top:20px; }
  .note-contacts { order:6; margin-top:34px; border-top:1px solid var(--line); padding-top:20px; }
  .note-links { order:7; margin-top:34px; border-top:1px solid var(--line); padding-top:20px; }
  .note-starred, .note-related { display:none; }
  .note-side-h { display:none; }
}
/* Wide pane: each connected block is its own tasteful white card, and the note
   body and the sidebar scroll independently (the rail sticks and scrolls inside
   itself while the note scrolls with the page). Driven by the pane width. */
@container notecq (min-width:901px){
  .note-side { max-height:calc(100vh - 32px); overflow-y:auto; overflow-x:hidden; padding-right:4px; }
  .note-side .subpages,
  .note-side .note-tasks,
  .note-side .note-events,
  .note-side .note-contacts,
  .note-side .note-links,
  .note-side .note-related { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); margin-top:14px; border-top:1px solid var(--line); }
  /* Any card can float to the top now, so the first one - whichever it is - loses
     its top margin (not just .subpages, which used to always lead). */
  .note-side .nside-card:first-child { margin-top:0; }
  /* Chips and sub-note cards become soft insets so they read on the white card. */
  .note-side .ce-card { background:var(--paper-2); }
  .note-side .subpage { background:var(--paper-2); box-shadow:none; }
}
/* Desktop: the sticky side rails (Life areas, Goals, Notes list, Tables) get their
   own scroll, so a tall rail can be scrolled top-to-bottom independently of the
   main column - not clamped to how far the main column has scrolled. (Robin.) */
@media (min-width:901px){
  .col-areas, .goals-side, .notes-side, .tbl-list {
    max-height:calc(100vh - 112px); overflow-y:auto; overflow-x:hidden;
    overscroll-behavior:contain; padding-right:4px;
  }
}
.subpages { margin-top:36px; border-top:1px solid var(--line); padding-top:20px; }
.nconn { margin-top:6px; }
.nconn > summary { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:15px; color:var(--ink); font-weight:500; list-style:none; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--shadow); }
.nconn > summary::-webkit-details-marker { display:none; }
.nconn > summary:hover { border-color:var(--accent); color:var(--accent); }
.nconn[open] > summary { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); color:var(--accent); border-bottom-left-radius:0; border-bottom-right-radius:0; }
.nconn-q { width:100%; max-width:none; margin:6px 0; font-size:14px; }
.nconn-list { display:flex; flex-direction:column; gap:2px; max-height:220px; overflow:auto; }
.nconn-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:0; padding:7px 6px; border-radius:8px; cursor:pointer; color:var(--ink); font-size:14px; }
.nconn-item:hover { background:var(--paper); color:var(--accent); }
.nconn-item .sp-t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nconn-item .sp-sub { flex:none; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.nconn-area { flex:none; font-size:11px; color:hsl(var(--h,220) 42% 42%); background:hsl(var(--h,220) 60% 52% / .12); border-radius:999px; padding:1px 8px; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nconn-item.has-area { border-left:3px solid hsl(var(--h,220) 60% 52%); padding-left:8px; }
.nconn-item.has-area .sp-ico { color:hsl(var(--h,220) 55% 55%); }
.nconn-item.has-area .sp-ico .ico-note, .nconn-item.has-area .sp-ico .ico-tbl { color:inherit; }
/* Toolbox Practices: link to the full editor. */
.prc-manage { display:flex; justify-content:flex-end; margin-bottom:8px; }
.prc-edit-link { font-size:14px; }
.sub-h { font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin-bottom:10px; font-weight:600; }
/* Collapsible note sidebar cards: the sub-h becomes a clickable summary. */
.nside-card > summary.sub-h { list-style:none; cursor:pointer; display:flex; align-items:center; gap:7px; margin-bottom:0; user-select:none; }
.nside-card[open] > summary.sub-h { margin-bottom:10px; }
.nside-card > summary.sub-h::-webkit-details-marker { display:none; }
.nside-card > summary.sub-h::before { content:"▸"; font-size:11px; letter-spacing:0; color:var(--ink-3); transition:transform .12s; }
.nside-card[open] > summary.sub-h::before { transform:rotate(90deg); }
.nside-card > summary.sub-h:hover { color:var(--ink-2); }
/* Connected notes as little cards, each in its own life-area colour. */
.subpages { display:flex; flex-direction:column; gap:8px; }
.subpage { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 12px; border-radius:10px; color:var(--ink); font-size:16.5px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); transition:border-color .12s; }
.subpage:hover { border-color:var(--accent); }
.subpage .sp-ico { color:var(--ink-3); font-size:14px; flex:none; }
.subpage .sp-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subpage.has-area { border-left:3px solid hsl(var(--h,220) 60% 52%); padding-left:9px; }
.subpage.has-area .sp-ico { color:hsl(var(--h,220) 55% 55%); }
.subpage.has-area .sp-ico .ico-note, .subpage.has-area .sp-ico .ico-tbl { color:inherit; }
.subpage.add { background:transparent; border:1px dashed var(--line); box-shadow:none; color:var(--ink-3); }
.subpage.add:hover { color:var(--accent); border-color:var(--accent); }
.subpage { position:relative; }
.sp-grip { color:var(--ink-3); opacity:0; font-size:12px; line-height:1; flex:none; cursor:grab; transition:opacity .12s; margin-left:-4px; }
.subpage:hover .sp-grip { opacity:.55; }
/* A two-way connected note (not a nested sub): a link glyph, and an × to undo the
   connection on both sides. */
.sp-linkico { color:var(--accent); opacity:.85; }
.subpage .sp-t { flex:1; }
.sp-unlink { flex:none; margin-left:auto; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; color:var(--ink-3); font-size:16px; line-height:1; opacity:0; cursor:pointer; transition:opacity .12s, background .12s, color .12s; }
.subpage-linked:hover .sp-unlink { opacity:1; }
.sp-unlink:hover { background:color-mix(in srgb,var(--danger,#c4412e) 12%,transparent); color:var(--danger,#c4412e); }
.subpage.dragging { opacity:.4; }
/* The note this one lives inside - the upward half of the two-way connection. */
.subpage-parent { background:color-mix(in srgb,var(--accent) 5%,var(--card)); }
.sp-parentico { color:var(--accent); opacity:.85; font-size:15px; }
.sp-parent-tag { flex:none; margin-left:auto; font-size:11.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-3); background:color-mix(in srgb,var(--accent) 10%,transparent); padding:2px 8px; border-radius:999px; }

.results { display:flex; flex-direction:column; gap:2px; }
.result { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 8px; border-bottom:1px solid var(--line); color:var(--ink); font-size:16.5px; }
.result:hover:not([disabled]) { background:var(--paper-2); } .result[disabled] { opacity:.55; }
.r-kind { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); min-width:52px; }

@media (max-width:760px){ .notes-grid { grid-template-columns:1fr; } .notes-side { position:static; } }

/* ── unified app shell ───────────────────────────── */
.app-shell { display:grid; grid-template-columns:var(--sidebar-w,326px) minmax(0,1fr); min-height:100vh; }
/* Drag the sidebar's right edge to resize it; the width persists (life.sidebarW). */
.nav-resize { position:fixed; top:0; bottom:0; left:calc(var(--sidebar-w,326px) - 4px); width:9px; cursor:col-resize; z-index:45; }
.nav-resize::after { content:""; position:absolute; top:0; bottom:0; left:4px; width:2px; border-radius:2px; background:transparent; transition:background .12s; }
.nav-resize:hover::after, body.resizing-nav .nav-resize::after { background:var(--accent); }
body.resizing-nav { cursor:col-resize; user-select:none; }
@media (max-width:820px){ .nav-resize { display:none; } }
/* Collapse / reopen the sidebar to reclaim width on smaller screens. One quiet
   fixed control toggles it: when open it sits by the sidebar's right edge (the
   divider - where a collapse control conventionally lives), and when collapsed it
   drops to the main area's top-left to reopen. Desktop only - the phone already
   has the ☰ drawer. State persists (life.nav.collapsed). */
.nav-toggle { display:none; }
.nav-toggle .ntg-o { display:none; }
@media (min-width:821px){
  .nav-toggle { position:fixed; top:9px; left:calc(var(--sidebar-w,326px) - 42px); z-index:50; width:30px; height:30px;
    display:flex; align-items:center; justify-content:center; border-radius:50%;
    border:1.5px solid var(--line-2); background:var(--card); color:var(--ink-3);
    font-size:16px; line-height:1; cursor:pointer; box-shadow:var(--shadow);
    opacity:.6; transition:color .12s,border-color .12s,background .12s,opacity .12s,left .18s ease; }
  .nav-toggle:hover { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); opacity:1; }
  body.nav-collapsed .nav-toggle { left:11px; }
  body.nav-collapsed .nav-toggle .ntg-c { display:none; }
  body.nav-collapsed .nav-toggle .ntg-o { display:inline; }
  body.nav-collapsed .app-shell { grid-template-columns:minmax(0,1fr); }
  body.nav-collapsed .nav { display:none; }
  body.nav-collapsed .nav-resize { display:none; }
  body.nav-collapsed .tabstrip { padding-left:52px; }
}
.nav {
  border-right:1px solid var(--line); background:var(--paper-2);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:16px 12px 28px; display:flex; flex-direction:column; gap:4px;
}
/* The wordmark is a real <button> (not a div): a native button is the only thing
   iOS Safari reliably fires a bubbling click on, so tap-to-go-home works on the
   phone. Reset the button chrome back to the plain wordmark it was. */
.nav-brand { display:block; width:100%; text-align:center; background:none; border:0; -webkit-appearance:none; appearance:none; color:var(--ink);
  font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:600; padding:6px 10px 8px; cursor:pointer; border-radius:8px; transition:background .12s,opacity .12s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* Stop iOS turning a tap into a text selection, and kill the tap delay. */
  -webkit-user-select:none; user-select:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
/* The ⋯ tools toggle is a mobile-only affordance; desktop shows the full sidebar. */
.nav-util-toggle { display:none; }
/* The drawer wrapper is transparent on desktop, so its children lay out in the
   sidebar exactly as before; the ☰ button, drawer chrome and backdrop are all
   mobile-only. */
.nav-drawer { display:contents; }
.nav-menu-toggle, .nav-drawer-head, .nav-drawer-x, .nav-drawer-bg, .nav-mlist, .nav-topline-sp { display:none; }
.nav-brand:hover { background:var(--paper); opacity:.9; }
.nav-brand em { font-style:normal; color:var(--gold); }
/* "Lifebook" is one word; only "book" leans italic, at natural spacing after the
   roman "Life" (the old -.07em tuck closed Day's loose y-b gap; Life's e-b sits
   right on its own). The gold mark carries the colour. (Brand, 2026-10-15.) */
.wm-bk { font-style:italic; margin-left:0; }
.nav-tool { display:none; }   /* the "<Tool>" after the wordmark is mobile-only */
.brand-mark { width:1.08em; height:1.08em; color:var(--accent); vertical-align:-.16em; margin:0 .22em; }
/* A quiet Lifebook mark closing the Home main column, in the chosen accent. */
.home-mark { display:flex; justify-content:center; margin:36px auto 6px; padding:8px; background:none; border:0; border-radius:50%; cursor:pointer; transition:transform .16s cubic-bezier(.2,.8,.2,1), background .16s; }
.home-mark .brand-mark { width:46px; height:46px; margin:0; color:var(--accent); opacity:.9; }
.home-mark:hover { transform:translateY(-2px); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.home-mark:hover .brand-mark { opacity:1; }
.home-mark:active { transform:translateY(0); }
.nav-brand .brand-mark { width:1.4em; height:1.4em; margin:0 .14em 0 .18em; vertical-align:-.32em; color:var(--gold); }
/* Firm the sidebar monogram a touch - the fine Cormorant strokes read a little
   light at this size, so give the letters + dot a hairline of their own colour
   (the ring, a separate circle, is untouched). (Robin, 2026-10-15.) */
.nav-brand .brand-mark g path, .nav-brand .brand-mark g circle { stroke:currentColor; stroke-width:20; stroke-linejoin:round; }
.nav-msearch, .nav-msearch-row { display:none; }   /* mobile-only sticky search (see media query) */
/* Starred / Recent expander at the top of the sidebar: two buttons side by side,
   click one to open its list below (and close the other). (Robin, 2026-10-15.) */
.nav-topsecs { margin:2px 2px 6px; }
.nav-topsec-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.nav-topsec-t { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 8px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink-2); font-size:14.5px; font-weight:600; cursor:pointer; transition:border-color .12s, background .12s, color .12s; }
.nav-topsec-t .nts-ic { font-size:13px; color:var(--gold); }
.nav-topsec-t .nts-c { font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; background:var(--paper-2); border-radius:999px; padding:1px 6px; }
.nav-topsec-t.on { border-color:var(--accent); color:var(--ink); background:color-mix(in srgb,var(--accent) 12%,var(--card)); }
@media (hover:hover){ .nav-topsec-t:hover { border-color:var(--accent); } }
.nav-topsec-body { margin-top:8px; display:flex; flex-direction:column; gap:3px; max-height:46vh; overflow-y:auto; overflow-x:hidden; padding:1px; }
/* Starred and Recent rows read identically: one explicit text size for both (16px,
   easier on the eye), same icon size, label filling the row next to its icon. The
   .nav-topsecs scope + both-class selector makes this win over any other nav rule,
   so Starred can't render smaller than Recent. (Robin, 2026-10-15.) */
.nav-topsecs .nav-topsec-body .nav-sub .t { font-size:16px; flex:1; }
.nav-topsecs .nav-topsec-body .nav-sub .i { font-size:13px; }
/* THE actual Starred-vs-Recent difference: the body is a flex column with a
   max-height, so a long list (e.g. 52 starred) let its rows SHRINK to fit and
   squashed them tighter than a short Recent list. Pin the rows so they keep full
   height and the body scrolls instead - both lists now match. (Robin, 2026-10-15.) */
.nav-topsecs .nav-topsec-body .nav-sub { flex-shrink:0; }
.home-crumbbar { display:flex; }   /* carries the +New add menu, like every other page's breadcrumb */
.nav-k {
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:10px 12px; margin-bottom:8px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--card); color:var(--ink-3); font-size:15px; text-align:left;
}
.nav-k:hover { border-color:var(--accent); color:var(--ink-2); }
.nav-k kbd { font:inherit; font-size:12px; background:var(--paper-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--ink-3); }
/* Desktop: the brand wordmark and the search box stay pinned at the top of the
   scrolling sidebar (brand first, search right under it), while the nav list
   below scrolls. Both carry the sidebar's own background so items slide under. */
@media (min-width:821px){
  /* Move the sidebar's top padding into the (sticky) brand row, so when it pins
     there's no bare strip above it for the list to scroll through. */
  .nav { padding-top:0; }
  .nav-topline { position:sticky; top:0; z-index:3; background:var(--paper-2); padding-top:16px; }
  /* A few px of the sidebar's own background carried under the search box (via a
     hard, blur-less shadow), so items scroll under with a clean buffer, not flush
     against its edge. */
  .nav-k { position:sticky; top:var(--nav-headh,56px); z-index:3; margin-top:0; margin-bottom:12px; box-shadow:0 9px 0 var(--paper-2); }
}
/* Primary nav: two half-width tiles per row. */
/* One column, clustered into labelled bands (Day / Capture / People / Grow):
   fourteen tools read as four things. Each row is a light line with an icon that
   anchors the eye; the active one lifts to a bordered card. */
/* Home + Mail pin two-up at the top; each labelled group then sits in its own
   soft-bordered box, with its tools two per row inside. The box quietly frames
   the section so the rail reads as a few blocks, not one long list. */
.nav-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 3px; margin-bottom:4px; align-items:stretch; }
.nav-sec-box { grid-column:1 / -1; margin-top:9px; padding:3px 7px 8px; border:1px solid var(--line); border-radius:13px;
  background:color-mix(in srgb, var(--card) 45%, transparent); }
.nav-sec-box:first-of-type { margin-top:6px; }
/* The pinned Home / Mail pair: each its own single-column box, side by side. */
.nav-lead-box { grid-column:auto; margin-top:0; padding:4px; }
.nav-lead-box, .nav-lead-box:first-of-type { margin-top:6px; }
.nav-lead-box .nav-item { width:100%; }
.nav-sec-items { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3px 3px; }
/* The live Lifebook-people list sits in the same People box, under a collapsible
   header (a hairline divides it from the buttons). */
.nav-people-wrap { margin-top:6px; padding-top:5px; border-top:1px solid var(--line); }
.nav-people-h { display:flex; align-items:center; gap:6px; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:4px 5px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ink-3); }
.nav-people-h:hover { color:var(--ink-2); }
.nav-people-h .np-chev { flex:none; width:12px; font-size:10px; color:var(--ink-3); }
.nav-people-h .np-count { margin-left:auto; letter-spacing:0; font-size:11px; font-weight:700; color:var(--ink-3); background:var(--paper-2); border-radius:999px; padding:0 7px; }
.nav-box-people { display:flex; flex-direction:column; gap:1px; margin-top:2px; }
.nav-sec-items .nav-full { grid-column:1 / -1; }
.nav-grp { font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--accent);
  font-weight:700; padding:8px 5px 6px; }
/* A collapsible group header - same chevron style as the Starred/Recent/Folios
   section headers, so the whole sidebar reads as one family. (Robin, 2026-10-14.) */
.nav-grp-h { display:flex; align-items:center; gap:5px; cursor:pointer; padding:6px 6px 5px; border-radius:8px; }
.nav-grp-h:hover { background:var(--paper); }
.nav-grp-t { flex:1; min-width:0; }
.nav-div { grid-column:1 / -1; height:1px; background:var(--line); margin:12px 8px 8px; }
.nav-item {
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 10px; border:1px solid transparent; border-radius:9px; background:transparent;
  color:var(--ink-2); font-size:14.5px; transition:background .12s,border-color .12s,color .12s; overflow:hidden; white-space:nowrap;
}
/* A glyph in the app's own icon language leads; label next; the "+" at the right. */
/* Force text (monochrome) presentation so glyphs like ✉ ☯ ☀ render in the icon
   colour, not as full-colour emoji that ignore CSS colour - keeps every nav icon
   in one style, especially in dark mode. (Robin.) */
.nav-ic { flex:none; width:18px; text-align:center; font-size:14px; color:var(--ink-3); line-height:1; font-variant-emoji:text; }
.nav-lbl { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.nav-item:hover { background:var(--paper); color:var(--ink); }
.nav-item:hover .nav-ic { color:var(--ink-2); }
.nav-item.on { background:var(--card); border-color:var(--accent); color:var(--ink); font-weight:500; box-shadow:var(--shadow); }
.nav-item.on .nav-ic { color:var(--accent); }
/* Mail is pinned up top beside Home and reads a touch stronger even at rest:
   the icon carries the accent and the label sits heavier, so the eye lands on
   it first. Its unread badge already draws attention when there's post. */
.nav-lead .nav-lbl { font-weight:600; }
.nav-lead .nav-ic { color:var(--accent); }
.nav-secs { display:flex; flex-direction:column; }
/* Starred / Recent / Folios sit in the same rounded, hairline-bordered box as the
   groups above, so the whole sidebar reads as one set. (Robin, 2026-10-14.) */
.nav-sec { margin-top:9px; padding:3px 7px 8px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb, var(--card) 45%, transparent); }
.nav-sec.drop-target { box-shadow:inset 0 2px 0 var(--accent); }
.nav-sec-h { display:flex; align-items:center; gap:4px; padding:3px 4px 3px 6px; border-radius:8px; cursor:pointer; }
.nav-sec-h:hover { background:var(--paper); }
.nav-sec-h:hover .nav-chev, .nav-sec-h:hover .nav-sec-title { color:var(--ink); }
.nav-sec-h:hover .nav-grip { opacity:.55; }
.nav-chev { color:var(--ink-2); font-size:13px; width:14px; flex:none; text-align:center; }
.nav-sec-title { flex:1; min-width:0; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); font-weight:700; padding:2px 0; }
.nav-add { color:var(--ink-3); font-size:18px; line-height:1; padding:0 6px; flex:none; } .nav-add:hover { color:var(--accent); }
/* Quick-add "+" on Tasks/Calendar/Mail/Notes: right-aligned, appears on hover. */
.nav-badge { margin-left:auto; flex:none; min-width:0; height:18px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-size:11px; font-weight:600; line-height:1; }
.nav-badge + .nav-quick { margin-left:6px; }
/* A quiet "there's new mail" dot - no number to crowd the label. */
.nav-dot { margin-left:auto; flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.nav-dot + .nav-quick { margin-left:8px; }
/* Home quick-action "you've got some" dot (tasks) - shown on mobile too, unlike the
   numeric count. */
.home-qa-open .hqa-dot { flex:none; margin-left:3px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
/* Unread Lifebook messages: a red, gently pulsing badge so it's impossible to
   miss - on the Contacts item, and on the mobile ☰ button (always on screen). */
.nav-badge.has-msg { background:var(--danger,#c4412e); color:#fff; animation:msg-badge-pulse 1.5s ease-in-out infinite; }
.nav-menu-badge { position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:var(--danger,#c4412e); color:#fff; font-size:11.5px; font-weight:700; line-height:1; box-shadow:0 0 0 2px var(--paper); }
.nav-menu-toggle.has-msg .nav-menu-badge { animation:msg-badge-pulse 1.5s ease-in-out infinite; }
@keyframes msg-badge-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.16); } }
@media (prefers-reduced-motion:reduce) { .nav-badge.has-msg, .nav-menu-toggle.has-msg .nav-menu-badge, .nav-msgbtn-c { animation:none; } }
/* New-message icon in the top bar: shows only when a message is waiting (the
   button is only rendered then), with a pulsing count. Mobile top bar only. */
.nav-msgbtn { display:none; }
.nav-msgbtn-c { position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:var(--danger,#c4412e); color:#fff; font-size:11.5px; font-weight:700; line-height:1; box-shadow:0 0 0 2px var(--paper); animation:msg-badge-pulse 1.5s ease-in-out infinite; }
.nav-quick { margin-left:auto; flex:none; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; color:var(--ink-3); font-size:16px; line-height:1; opacity:0; transition:opacity .12s, background .12s, color .12s; }
.nav-item:hover .nav-quick, .nav-item.on .nav-quick { opacity:1; }
/* Capture actions (Journal, Dream): the whole row is the verb, so its "＋" stays
   visible - it reads as "do this", not "go here". */
.nav-item.nav-act .nav-quick { opacity:.6; }
.nav-item.nav-act:hover { background:var(--paper); color:var(--ink); }
.nav-item.nav-act:hover .nav-quick { opacity:1; color:var(--accent); }
.nav-quick:hover { background:var(--paper-2); color:var(--accent); }
@media (pointer:coarse){ .nav-quick { opacity:1; } }
.nav-grip { color:var(--ink-3); font-size:12px; cursor:grab; opacity:0; transition:opacity .12s; flex:none; padding:0 4px; letter-spacing:-2px; }
.nav-sec-h[draggable]:active { cursor:grabbing; }
/* Starred notes in the note sidebar - one or two columns to fill the space. */
.note-starred { margin-top:22px; }
.note-related { margin-top:22px; }
.note-related-h { cursor:pointer; display:flex; align-items:center; gap:6px; }
.note-related-h .hs-chev { font-size:11px; color:var(--ink-3); }
.note-related-h:hover { color:var(--ink-2); }
.rel-more { display:inline-block; margin-top:8px; font-size:13px; color:var(--accent); font-weight:500; }
.rel-more:hover { text-decoration:underline; }
.star-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:6px; margin-top:8px; }
.star-note { display:flex; align-items:center; gap:7px; min-width:0; padding:9px 11px; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:10px; color:var(--ink-2); font-size:14px; cursor:pointer; transition:border-color .12s,color .12s; }
.star-note:hover { border-color:var(--accent); color:var(--ink); }
.star-note .sn-ic { color:var(--accent); font-size:12px; flex:none; }
.star-note .sp-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-sec-body { display:flex; flex-direction:column; gap:1px; margin-top:2px; }
/* Starred: two columns, echoing the tab grid above it. */
.nav-sec-body.nav-2col { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.nav-2col .nav-sub { min-width:0; padding:8px 10px; background:var(--card); border:1px solid var(--line); border-radius:9px; }
.nav-2col .nav-sub:hover { border-color:var(--line-2); }
.nav-2col .nav-sub.muted { grid-column:1 / -1; background:none; border:0; padding:7px 12px; }
/* Life areas as full-width cards, each with its colour highlight (the has-area
   left edge + tinted marker). The active area's card takes its own hue border. */
.nav-cards { display:flex; flex-direction:column; gap:6px; }
.nav-cards .nav-sub { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; box-shadow:var(--shadow); }
.nav-cards .nav-sub:hover { border-color:var(--line-2); background:var(--card); }
.nav-cards .nav-sub.has-area:hover { border-color:hsl(var(--h,220) 60% 52%); }
.nav-cards .nav-sub.on { border-color:hsl(var(--h,220) 60% 52%); box-shadow:0 0 0 1px hsl(var(--h,220) 60% 52% / .35), var(--shadow); }
.nav-cards .nav-sub.muted { background:none; border:0; box-shadow:none; padding:7px 12px; }
.nav-2col .nav-sub-wide { grid-column:1 / -1; }
/* Sidebar People section: connected Lifebook folk, online first, offline greyed. */
.nav-people { gap:1px; }
.nav-person { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:6px 12px; border-radius:8px; color:var(--ink-2); font-size:15px; overflow:hidden; cursor:pointer; background:none; border:0; }
.nav-person:hover { background:color-mix(in srgb,var(--ink) 5%,transparent); color:var(--ink); }
.np-av { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--paper-2,var(--paper)); color:var(--ink-2); font-weight:600; font-size:12px; position:relative; }
.np-av.online::after { content:''; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:#3fae5a; border:2px solid var(--card); }
.np-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.np-badge { flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--accent); color:var(--accent-ink,#fff); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.nav-person.off { color:var(--ink-3); }
.nav-person.off .np-av { opacity:.5; }
/* Calendar event: start + end date side by side (multi-day events). */
.ce-dates { display:flex; gap:12px; flex-wrap:wrap; }
.ce-datewrap { display:flex; flex-direction:column; gap:4px; flex:1; min-width:130px; }
.ce-datelbl { font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
/* Start / End, each a row of date + time. The label sits to the left; the fields
   share the row and wrap gracefully when the width is tight. */
/* Compact: Start → End flow on one line (wraps if narrow), not a stacked form. */
.ce-when { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:9px 12px; }
.ce-wcell { display:inline-flex; align-items:center; gap:7px; }
.ce-wlbl { flex:none; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.ce-wcell .date-field { min-width:0; max-width:none; width:auto; }
.ce-warrow { color:var(--ink-3); font-size:15px; }
.ce-timefield { flex:none; width:auto; }
/* legacy stacked rows (kept for any other caller) */
.ce-when-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ce-when-lbl { flex:none; width:52px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.ce-when-fields { display:flex; align-items:center; gap:8px; flex:1; min-width:0; flex-wrap:wrap; }
.add-event.allday-on .ce-timefield { display:none; }
/* On a narrow screen, stack Start and End each to a full row (date flexes, time
   sits beside it) so the pair can never push the form off-screen. */
@media (max-width:480px){
  .add-event .ce-when { flex-direction:column; align-items:stretch; }
  .add-event .ce-wcell { display:flex; flex-wrap:wrap; width:100%; min-width:0; align-items:center; gap:7px 9px; }
  /* Start and End render identically: the label + the full date on line one, the
     time on its own full-width line below. The time's 100% basis forces the wrap
     for BOTH cells, so the end date never truncates to "Tue 15 Septemb". */
  .add-event .ce-wcell .date-field { flex:1 1 auto; min-width:0; }
  .add-event .ce-wcell .ce-timefield { flex:1 1 100%; min-width:0; max-width:100%; }
  .add-event .ce-warrow { display:none; }
  .add-event .ce-allday { align-self:flex-start; }
  /* Backstop: nothing in the form may force the page to scroll sideways. */
  .add-event { overflow-x:clip; }
}
/* The event form is a tidy card, not a wrapping flex row (which stretched the
   title box to the height of the Start/End block). Title on its own line, the
   when-block, an all-day toggle, then a footer row of location + repeat + save. */
.add-event { display:flex; flex-direction:column; align-items:stretch; gap:13px; padding:14px 18px 16px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); max-width:100%; min-width:0; box-sizing:border-box; }
/* Every field is bounded to the card - a long title or address must never stretch
   the form past the screen (grid items default to min-content width). (Robin.) */
.add-event input, .add-event select, .add-event textarea, .add-event .date-field { min-width:0; max-width:100%; box-sizing:border-box; }
.ce-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-2px 0 -2px; }
.ce-head-t { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; }
.ce-close { flex:none; width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--paper); color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer; }
.ce-close:hover { border-color:var(--accent); color:var(--accent); }
/* Read-only event card: directions first, then a clean set of detail rows. */
.ce-view { display:flex; flex-direction:column; gap:14px; }
.ce-view-title { margin:2px 0 0; font-family:'Cormorant Garamond',Georgia,serif; font-size:27px; font-weight:600; line-height:1.15; color:var(--ink); }
.ce-view-maprow { display:flex; gap:10px; flex-wrap:wrap; }
.ce-view-dir, .ce-view-map { display:inline-flex; align-items:center; gap:7px; padding:11px 16px; border-radius:12px; font-size:15.5px; font-weight:600; text-decoration:none; box-shadow:var(--shadow); }
.ce-view-dir { background:var(--accent); color:var(--accent-ink); }
.ce-view-dir:hover { filter:brightness(1.05); }
.ce-view-map { background:var(--card); border:1px solid var(--line-2); color:var(--ink); }
.ce-view-map:hover { border-color:var(--accent); color:var(--accent); }
.ce-view-rows { display:flex; flex-direction:column; gap:11px; }
.ce-view-row { display:flex; align-items:flex-start; gap:12px; font-size:16px; color:var(--ink); }
.ce-view-ic { flex:none; width:22px; text-align:center; color:var(--ink-3); font-size:15px; line-height:1.4; }
.ce-view-rt { min-width:0; word-break:break-word; }
.ce-view-rt a { color:var(--accent); }
.ce-view-area { display:inline-flex; align-items:center; gap:7px; }
.ce-view-dot { width:10px; height:10px; border-radius:50%; background:hsl(var(--h,4) 55% 55%); }
.ce-view-notes { font-size:15.5px; line-height:1.6; color:var(--ink-2); white-space:pre-wrap; padding:13px 15px; background:var(--paper-2); border-radius:12px; }
.add-event .ce-title { flex:none; width:100%; min-width:0; font-size:18px; font-weight:500; }
.add-event .ce-when { gap:9px 11px; background:var(--paper-2); border-radius:12px; padding:11px 13px; }
.add-event .ce-when-row { padding:2px 0; }
.ce-allday { align-self:flex-start; }
.ce-allday-hint { color:var(--ink-3); font-size:13.5px; font-weight:400; }
/* A labelled field (Location, Notes, Repeat) - label above a full-width control. */
.ce-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ce-flbl { display:inline-flex; align-items:center; gap:5px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
/* Directions button on the event's Location - quick "how do I get there". */
.ce-directions { margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:600; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line-2)); border-radius:999px; padding:3px 11px; cursor:pointer; }
.ce-directions:hover { background:color-mix(in srgb,var(--accent) 18%,var(--card)); border-color:var(--accent); }
.ce-fic { font-size:12px; letter-spacing:0; opacity:.85; }
.ce-field .sel { width:100%; max-width:none; margin:0; }
/* Short selects sit two-up, so the card isn't a tall stack of full-width bars;
   they drop to one column when the calendar panel is narrow. (Robin.) */
/* Location search suggestions (contacts' addresses + past places). */
.ce-loc-wrap { position:relative; }
.ce-loc-sugg { position:absolute; left:0; right:0; top:100%; z-index:30; margin-top:4px; background:var(--card); border:1px solid var(--line-2); border-radius:11px; box-shadow:0 8px 28px rgba(0,0,0,.14); overflow:hidden; max-height:280px; overflow-y:auto; }
.ce-loc-opt { display:flex; flex-direction:column; gap:1px; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line); padding:9px 13px; cursor:pointer; }
.ce-loc-opt:last-child { border-bottom:0; }
.ce-loc-opt:hover { background:var(--paper-2); }
.ce-loc-nm { font-size:14.5px; font-weight:600; color:var(--ink); }
.ce-loc-ad { font-size:12.5px; color:var(--ink-3); }
.ce-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:11px 12px; }
@media (max-width:460px){ .ce-grid { grid-template-columns:minmax(0,1fr); } }
/* "With": a quiet, optional person link - a small search box, not a labelled
   dropdown, since linking a person to an event is the exception, not the rule. */
.ce-with { display:flex; align-items:center; gap:8px; margin:-3px 0 1px; }
.ce-with-ic { flex:none; font-size:14px; opacity:.5; }
.ce-with-input { flex:1; min-width:0; font:inherit; font-size:13.5px; color:var(--ink); background:transparent; border:0; border-bottom:1px dashed var(--line-2); border-radius:0; padding:4px 2px; }
.ce-with-input::placeholder { color:var(--ink-3); }
.ce-with-input:focus { outline:none; border-bottom-color:var(--accent); border-bottom-style:solid; }
.ce-repeat-field { max-width:280px; }
/* Custom reminder: a number + unit that appears under the select on "Custom…". */
.ce-alarm-custom { display:flex; gap:8px; margin-top:7px; }
.ce-alarm-custom #ce-alarm-n { flex:none; width:84px; max-width:84px; }
.ce-alarm-custom #ce-alarm-u { flex:1; min-width:0; }
.ce-alarm-ch { margin-top:9px; display:flex; align-items:center; gap:9px; }
.ce-alarm-ch #ce-alarm-ch { flex:1; width:auto; max-width:none; }
.ce-rem-chlbl { font-size:13px; color:var(--ink-3); white-space:nowrap; }
/* Reminders: pick as many leads as you like (a week + a day + 5 min before…) as
   toggle chips, then one channel for them all. */
.ce-rem-sub { text-transform:none; letter-spacing:0; font-weight:400; font-size:12.5px; color:var(--ink-3); opacity:.85; margin-left:6px; }
.ce-rem-chips { display:flex; flex-wrap:wrap; gap:7px; }
.ce-rem-chip { display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2,var(--ink)); font:inherit; font-size:14px; line-height:1; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
.ce-rem-chip:hover { border-color:var(--accent); }
.ce-rem-chip.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink,#fff); font-weight:600; }
.ce-rem-chip.on::before { content:'✓'; font-size:12px; margin-right:1px; }
.ce-rem-add { border-style:dashed; color:var(--ink-3); }
.ce-rem-custom { display:flex; gap:8px; margin-top:9px; align-items:center; }
.ce-rem-custom #ce-rem-n { flex:none; width:84px; max-width:84px; }
.ce-rem-custom #ce-rem-u { flex:1; min-width:0; }
.ce-rem-custom .ce-rem-addbtn { flex:none; width:auto; }
/* The three ways to link an event out - a URL, a person, a note - grouped in one
   soft panel so they read as a set rather than scattered fields. (Robin.) */
.ce-links { display:flex; flex-direction:column; gap:12px; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:var(--paper-2); }
/* Collapsible: closed by default so adding an event/task isn't cluttered by the
   connected box - open it only when you need to attach a link, contact or note. */
details.ce-links:not([open]) { gap:0; }
summary.ce-links-h { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; -webkit-tap-highlight-color:transparent; }
summary.ce-links-h::-webkit-details-marker { display:none; }
summary.ce-links-h::before { content:'▸'; font-size:10px; color:var(--ink-3); transition:transform .12s; }
details.ce-links[open] > summary.ce-links-h::before { content:'▾'; }
summary.ce-links-h:hover { color:var(--ink-2); }
.ce-links-hint { text-transform:none; letter-spacing:0; font-weight:400; font-size:12.5px; color:var(--ink-3); opacity:.85; }
.ce-links-h { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
/* The three link entry points - URL, contact, note - a third of the row each. */
.ce-links3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px 12px; }
.ce-links3.cols2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ce-links3 .sel { width:100%; box-sizing:border-box; }
.ce-notelinks-body { display:flex; flex-direction:column; gap:8px; }
.ce-notelinks-body:empty { display:none; }
@media (max-width:480px){ .ce-links3, .ce-links3.cols2 { grid-template-columns:minmax(0,1fr); } }
/* Quick chips: the event's attributes at a glance, each a tap to jump to and edit
   that field. Tinted when set (the value shown), an accent tint by default and
   the area's own hue for the life-area chip. Delete is a danger chip. */
.ce-quick { display:flex; flex-wrap:wrap; gap:7px; margin:1px 0 2px; }
.ce-q { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-2); font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .12s, background .12s, color .12s, transform .08s; }
.ce-q:hover { border-color:var(--accent); color:var(--ink); transform:translateY(-1px); }
.ce-q-ic { font-size:14px; line-height:1; }
.ce-q-l { white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.ce-q.on { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--accent) 10%, var(--card)); color:var(--ink); }
.ce-q.on.ce-q-hue { border-color:color-mix(in srgb, hsl(var(--h) 60% 55%) 55%, var(--line)); background:color-mix(in srgb, hsl(var(--h) 60% 55%) 14%, var(--card)); }
.ce-q-del { margin-left:auto; color:var(--danger,#c0392b); border-color:color-mix(in srgb, var(--danger,#c0392b) 22%, var(--line)); }
.ce-q-del:hover { background:color-mix(in srgb, var(--danger,#c0392b) 12%, transparent); border-color:var(--danger,#c0392b); color:var(--danger,#c0392b); transform:none; }
/* Title takes two thirds of the top row, the life area a third beside it. */
.ce-titlerow { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; align-items:end; }
.ce-titlerow .ce-title { margin:0; align-self:end; }
@media (max-width:480px){ .ce-titlerow { grid-template-columns:minmax(0,1fr); } }
/* The footer is just the actions now - Save on the left, Delete pushed right. */
.ce-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:14px; margin-top:2px; border-top:1px solid var(--line); }
.ce-foot .ce-submit { flex:none; }
.ce-foot .cal-del { flex:none; margin-left:auto; }
.ce-recur-note { flex:1; min-width:150px; font-size:13.5px; color:var(--ink-3); }
/* Repeat panel shown when editing an event that's part of a series. */
.ce-repeat-info { display:flex; flex-direction:column; gap:6px; }
.ce-repeat-panel { display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--paper); }
.ce-recur-badge { font-size:15px; font-weight:600; color:var(--accent); }
.ce-recur-meta { display:flex; flex-wrap:wrap; gap:6px 14px; margin:2px 0 2px; }
.ce-recur-when { font-size:13px; color:var(--ink-2); }
.ce-repeat-hint { font-size:13.5px; color:var(--ink-3); line-height:1.4; }
.ce-recur-remove { align-self:flex-start; }
@media (max-width:560px){ .ce-foot .ce-submit { flex:1 1 100%; } .ce-foot .cal-del { margin-left:0; } }
/* Friends chat panel - slides in from the right. */
#chat .chat-bg { position:fixed; inset:0; z-index:230; background:color-mix(in srgb,var(--ink) 30%,transparent); }
/* Height in dvh, not top/bottom: with the keyboard up, a fixed bottom:0 anchors
   to the layout viewport, so the message box ends up behind the keyboard. dvh
   follows the visible area instead. (app.html also asks the keyboard to resize
   the content, which is what makes this behave on Brave.) */
.chat-panel { position:fixed; z-index:231; top:0; right:0; height:100dvh; width:min(420px,100%); display:flex; flex-direction:column; background:var(--paper); border-left:1px solid var(--line); box-shadow:-20px 0 60px -30px rgba(0,0,0,.5); }
.chat-head { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); }
.chat-title { flex:1; font-weight:600; font-size:17px; color:var(--ink); }
.chat-x { border:0; background:none; color:var(--ink-3); font-size:26px; line-height:1; cursor:pointer; }
.chat-x:hover { color:var(--ink); }
.chat-msgs { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.chat-empty { margin:auto; color:var(--ink-3); }
/* pre-wrap keeps the line breaks somebody typed; anywhere stops a long URL from
   pushing the bubble off the side of the panel. */
.chat-msg { max-width:80%; padding:9px 14px; border-radius:16px; font-size:15px; line-height:1.4; background:var(--card); border:1px solid var(--line); color:var(--ink); align-self:flex-start; border-bottom-left-radius:5px; white-space:pre-wrap; overflow-wrap:anywhere; }
/* Sent, not yet acknowledged by the server. */
.chat-msg.pending { opacity:.55; }
.chat-msg.mine { align-self:flex-end; background:var(--accent); color:var(--accent-ink,#fff); border-color:transparent; border-bottom-left-radius:16px; border-bottom-right-radius:5px; }
.chat-form { position:relative; display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--line); padding-bottom:max(14px, env(safe-area-inset-bottom)); }
/* 16px (not 15) so iOS WebKit doesn't auto-zoom the page when you focus to type,
   which was shoving the Send button and text off the right edge. (Robin, mobile.) */
.chat-input { flex:1; min-width:0; padding:11px 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--card); color:var(--ink); font-family:inherit; font-size:16px; outline:none; }
.chat-input:focus { border-color:var(--accent); }
.chat-send { flex:none; padding:0 18px; border:0; border-radius:12px; background:var(--accent); color:var(--accent-ink,#fff); font-family:inherit; font-weight:600; cursor:pointer; }
/* Emoji picker: a quiet button in the composer, and a picker that floats just
   above it (handy on desktop, where there's no emoji key). (Robin, 2026-10-16.) */
.chat-emoji { flex:none; width:44px; border:1px solid var(--line-2); border-radius:12px; background:var(--card); font-size:20px; line-height:1; cursor:pointer; color:var(--ink); transition:border-color .12s, background .12s; }
.chat-emoji:hover { border-color:var(--accent); }
.chat-emoji.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--card)); }
.chat-emojis { position:absolute; left:12px; right:12px; bottom:calc(100% + 6px); z-index:5; padding:12px 14px; max-height:min(300px,52vh); overflow-y:auto; background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 22px 50px -24px rgba(0,0,0,.5); -webkit-overflow-scrolling:touch; }
.chat-emojis[hidden] { display:none; }
.emo-grp { margin-bottom:12px; }
.emo-grp:last-child { margin-bottom:0; }
.emo-grp-h { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin:0 2px 7px; }
.emo-row { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; }
.emo { border:0; background:transparent; font-size:23px; line-height:1; padding:7px 0; border-radius:11px; cursor:pointer; transition:background .1s; }
.emo:hover { background:color-mix(in srgb,var(--accent) 14%,var(--card)); }
.emo:active { transform:scale(.9); }
/* Friends on Lifebook. */
.friend-row { display:flex; align-items:center; gap:13px; padding:11px 14px; border:1px solid var(--line); border-radius:13px; background:var(--card); margin-bottom:8px; }
.fr-av { flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--paper-2,var(--paper)); color:var(--ink-2); font-weight:600; font-size:16px; position:relative; }
.fr-av.online::after { content:''; position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; background:#3fae5a; border:2px solid var(--card); }
/* Home "People" section: a connect nudge + a compact online list. */
.people-nudge { display:block; width:100%; text-align:left; padding:10px 13px; margin-bottom:9px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:11px; background:color-mix(in srgb,var(--accent) 8%,transparent); color:var(--ink); font-size:14px; }
.people-nudge:hover { border-color:var(--accent); }
.people-list { display:flex; flex-direction:column; gap:3px; }
.people-row { display:flex; align-items:center; gap:11px; width:100%; padding:7px 9px; border-radius:10px; color:var(--ink); text-align:left; transition:background .12s; }
.people-row:hover { background:var(--paper-2); }
.people-row .fr-av { width:32px; height:32px; font-size:14px; }
.people-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.people-msg { flex:none; opacity:0; font-size:14px; }
.people-row:hover .people-msg { opacity:.7; }
@media (hover:none){ .people-msg { opacity:.55; } }
.people-link { color:var(--accent); font-size:inherit; }
.people-link:hover { text-decoration:underline; }
.fr-body { min-width:0; display:flex; flex-direction:column; gap:1px; }
.fr-name { font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; }
.fr-on { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#3fae5a; }
/* Unread messages from this person. flex:none so it survives the name's ellipsis. */
.fr-unread { flex:none; min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:600; color:var(--accent-ink); background:var(--accent);
  border-radius:10px; }
.fr-sub { font-size:13px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-acts { display:flex; gap:8px; flex:none; }
.fr-act { flex:none; padding:7px 15px; }
/* A connected contact carries four action buttons, and they can't shrink - they
   are touch targets. On a phone that left the name barely 50px and it ran out of
   its box underneath them. The row wraps and the body claims a 150px basis, so
   the buttons drop to their own line exactly when the name would be squeezed:
   no breakpoint to guess, it happens at whatever width the content needs. */
.friend-row { flex-wrap:wrap; }
.fr-body { flex:1 1 150px; }
.fr-nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-pending { flex:none; font-size:13px; color:var(--ink-3); font-style:italic; }
.home-sec-h:has(.fr-rescan) { display:flex; align-items:center; gap:9px; }
.fr-rescan { margin-left:auto; font-size:13px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; color:var(--ink-3); }
.fr-rescan:hover { color:var(--accent); border-color:var(--line-2); }
.fr-scan-note { font-size:13.5px; color:var(--ink-2); margin:2px 0 10px; }
.fr-results:not(:empty) { margin:-8px 0 20px; }
/* Invite button lives in the section header now, pushed to the right. */
/* The connect row: a wide "find someone on Lifebook" box, then Connect + Invite. */
.fr-connect-row { flex-wrap:wrap; }
/* The find box just flexes to fill its own row now. */
.list-head.fr-connect-row .fr-connect { flex:1 1 240px; width:auto; min-width:200px; max-width:none; }
.fr-connect-row .add-btn.wide { flex:none; }
/* Auto-surfaced: your contacts already on Lifebook, given a soft-tinted card so
   they stand out as the easy first connections. */
.fr-suggest { margin:2px 0 18px; padding:4px 14px 12px; border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--accent) 5%,transparent); }
.fr-suggest .ppl-sub { margin-top:12px; color:var(--accent); }
.fr-intro { margin:2px 0 14px; font-size:14.5px; line-height:1.55; color:var(--ink-2); max-width:640px; }
.fr-suggest .friend-row { background:var(--card); }
/* Sub-groups inside "Contacts on Lifebook" (Requests, Pending, Suggestions…). */
.ppl-sub { display:flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; margin:18px 0 9px; }
.ppl-sub-req { color:var(--accent); margin-top:4px; }
.ppl-sub .fr-rescan { margin-left:2px; padding:2px 7px; font-size:13px; }
/* The "find someone on Lifebook" box: full width, and visible on mobile (it isn't
   a per-page .list-search, so the mobile hide-rule leaves it alone). */
.list-head .fr-connect { flex:1; width:auto; min-width:0; margin:0; }
/* Webinars (Friends). */
/* Sharing a note/task with friends. */
.share-panel { z-index:231; }
.share-note { padding:14px 18px 4px; font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.share-list { padding:12px 16px 20px; overflow-y:auto; }
.share-empty { padding:8px 18px 8px; text-align:center; color:var(--ink-2); font-size:14.5px; line-height:1.55; }
.share-empty p { margin:0 0 8px; }
.share-empty .add-btn.wide { margin-top:6px; }
.share-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); margin-bottom:8px; }
.share-acts { display:flex; align-items:center; gap:6px; flex:none; }
.share-mode { padding:5px 8px; font-size:13px; }
.share-off { font-size:16px; line-height:1; padding:2px 8px; color:var(--ink-3); }
.share-off:hover { color:var(--accent); }
.note-share { flex:none; }
.note-share.on { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.shared-banner { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-2); background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:10px; padding:8px 13px; margin:0 0 12px; } .shared-banner b { color:var(--ink); }
.note-remote-pill { font-size:13px; color:#9a7b2e; background:color-mix(in srgb,#c99a2e 12%,transparent); border:1px solid color-mix(in srgb,#c99a2e 30%,transparent); border-radius:9px; padding:7px 12px; margin:0 0 12px; animation:pill-in .2s ease; }
@keyframes pill-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.prose.readonly { opacity:.96; cursor:default; }
.shared-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 14px; border:1px solid var(--line); border-radius:13px; background:var(--card); margin-bottom:8px; }
.shared-row:hover { border-color:var(--line-2); }
.sh-ic { flex:none; font-size:18px; color:var(--ink-3); }
.sh-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.sh-t { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-meta { font-size:12.5px; color:var(--ink-3); }
.assign-status { font-size:13px; font-weight:500; padding:3px 9px; border-radius:999px; }
.assign-status.pending { color:#9a7b2e; background:color-mix(in srgb,#c99a2e 15%,transparent); }
.assign-status.accepted { color:#3f9e5f; background:color-mix(in srgb,#3f9e5f 15%,transparent); }
/* Tasks page: "Assigned to you" strip. */
.assigned-sec { margin:0 0 18px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--accent) 5%,transparent); }
.assigned-sec .home-sec-h { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.assign-badge { display:inline-grid; place-items:center; padding:1px 9px; border-radius:999px; background:var(--accent); color:#fff; font-size:12px; font-weight:600; }
.assigned-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 11px; border-radius:10px; }
.assigned-row.pending { background:var(--card); border:1px solid var(--line); margin-bottom:8px; }
.assigned-row:not(.pending):hover { background:var(--card); }
.ar-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ar-t { font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-t.struck { text-decoration:line-through; color:var(--ink-3); }
.ar-meta { font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.ar-acts { display:flex; gap:8px; flex:none; }
.ar-acts .add-btn.wide { flex:none; padding:7px 15px; }
.ar-check-btn { flex:none; font-size:19px; line-height:1; color:var(--ink-3); background:none; border:0; cursor:pointer; }
.ar-check-btn:hover { color:var(--accent); }
.ar-open { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; text-align:left; background:none; border:0; cursor:pointer; }
/* Tasks page quick filters: P1-P4 toggles + a life-area dropdown. */
.tq-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.tq-bar .tq-area { flex:0 1 auto; min-width:170px; max-width:260px; margin:0; }
.tq-prios { display:flex; gap:6px; }
.tq-prio { padding:9px 16px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-3); font-size:13.5px; font-weight:700; letter-spacing:.02em; cursor:pointer; }
.tq-prio.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.tq-prio:hover:not(.on) { border-color:var(--accent); color:var(--accent); }
@media (max-width:560px){ .tq-bar .tq-area { flex:1 1 100%; max-width:none; } .tq-prios { flex:1 1 100%; } .tq-prio { flex:1; } }
.p-tag { font-size:11px; font-weight:600; padding:1px 6px; border-radius:5px; background:var(--paper-2,var(--paper)); color:var(--ink-2); }
.p-tag.p-P1 { color:#c4412e; } .p-tag.p-P2 { color:#c9822e; }
/* Admin dashboard. */
/* Admin business dashboard. */
.adm-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:0 0 14px; }
.adm-card { padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow-sm); }
.adm-card-v { font-size:26px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.adm-card-l { font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; display:flex; align-items:center; gap:6px; }
.adm-card-s { font-size:12.5px; color:var(--ink-3); margin-top:5px; }
/* A clickable overview card drills into that metric. */
.adm-card-click { cursor:pointer; transition:border-color .12s, transform .08s, box-shadow .12s; }
.adm-card-click:hover { border-color:var(--accent); box-shadow:0 10px 24px -16px color-mix(in srgb,var(--accent) 60%,transparent); }
.adm-card-click:active { transform:translateY(1px); }
.adm-card-go { margin-left:auto; color:var(--ink-3); opacity:0; transition:opacity .12s, color .12s; }
.adm-card-click:hover .adm-card-go { opacity:1; color:var(--accent); }
.adm-plans { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 20px; }
/* Admin overview › Usage: active-member snapshot above the AI usage detail. */
.adm-usage { display:flex; flex-wrap:wrap; gap:10px 28px; margin:12px 0 6px; }
.adm-usage-stat { font-size:14px; color:var(--ink-2); display:inline-flex; align-items:baseline; gap:7px; }
.adm-usage-stat b { font-family:'Cormorant Garamond',Georgia,serif; font-size:27px; font-weight:600; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; line-height:1; }
.linklike { background:none; border:0; color:var(--accent); font:inherit; font-weight:600; cursor:pointer; padding:0; text-decoration:underline; }
/* Admin › Costs: monthly running-cost rows. */
.adm-cost-list { display:flex; flex-direction:column; margin-top:12px; }
.adm-cost-row { display:flex; align-items:baseline; gap:12px; padding:12px 2px; border-top:1px solid var(--line); flex-wrap:wrap; }
.adm-cost-row:first-child { border-top:0; }
.adm-cost-m { font-weight:600; font-size:15px; color:var(--ink); }
.adm-cost-b { flex:1 1 auto; font-size:13px; color:var(--ink-3); }
.adm-cost-t { font-family:'Cormorant Garamond',Georgia,serif; font-size:23px; font-weight:600; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; margin-left:auto; line-height:1; }
.adm-plan-chip { font-size:13px; padding:4px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); text-transform:capitalize; }
.adm-signup .scope { font-size:12.5px; color:var(--ink-3); font-weight:400; }
/* Default life areas editor on the admin page. */
.adm-areas { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.adm-area-chip { display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line-2); border-radius:999px; padding:5px 8px 5px 12px; box-shadow:var(--shadow); }
.adm-area-dot { width:9px; height:9px; border-radius:50%; flex:none; background:hsl(var(--h,220) 55% 55%); }
.adm-area-in { border:0; background:none; color:var(--ink); font-size:15px; width:auto; min-width:70px; max-width:180px; padding:2px 0; }
.adm-area-in:focus { outline:none; border-bottom:1px solid var(--accent); }
.adm-area-x { border:0; background:none; color:var(--ink-3); font-size:17px; line-height:1; cursor:pointer; padding:0 2px; }
.adm-area-x:hover { color:var(--danger,#c0392b); }
.adm-area-add { display:flex; gap:8px; max-width:420px; }
.adm-area-add .sel { flex:1; }
.adm-users { display:flex; flex-direction:column; gap:8px; }
.adm-user { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:12px 15px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.adm-user.susp { opacity:.6; }
.adm-user-main { display:flex; align-items:baseline; gap:10px; min-width:0; }
.adm-user-meta { grid-column:1; font-size:12.5px; color:var(--ink-3); }
.adm-user-acts { grid-row:1 / span 2; grid-column:2; display:flex; align-items:center; gap:8px; }
.adm-user-acts .au-plan-sel, .adm-user-acts .au-free-sel { width:auto; margin:0; padding:6px 26px 6px 10px; font-size:13.5px; max-width:none; }
.adm-user-acts .ghost { padding:6px 12px; font-size:13px; }
.au-usage { color:var(--ink-2); }
.au-free-badge { color:#3a9d5d; font-weight:600; }
@media (max-width:640px){ .adm-user { grid-template-columns:1fr; } .adm-user-acts { grid-row:auto; grid-column:1; } }
.admin-list { display:flex; flex-direction:column; gap:6px; }
.admin-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--line); border-radius:11px; background:var(--card); font-size:14.5px; }
.au-sub { font-weight:600; color:var(--ink); min-width:90px; }
.au-email { flex:1; min-width:0; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.au-plan { color:var(--ink-3); text-transform:capitalize; }
/* Admin Invites tab: the "Activated accounts" usage table. */
/* One shared grid so Joined / Last seen / Plan line up as true columns across
   every row; each row is a subgrid item spanning all four tracks, keeping its
   own border + hover box. (Robin: three clean columns on the right.) */
.adm-acct-table { display:grid; grid-template-columns:minmax(0,2.4fr) auto auto auto; column-gap:20px; }
.adm-acct-row { display:grid; grid-template-columns:subgrid; grid-column:1 / -1; align-items:center; padding:11px 4px; border-top:1px solid var(--line); font-size:14px; }
.adm-acct-row:first-child { border-top:0; }
.adm-acct-row:not(.adm-acct-head):hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.adm-acct-head { padding-bottom:9px; margin-bottom:1px; border-bottom:1px solid var(--line-2); }
.adm-acct-head, .adm-acct-head span { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700; }
.adm-acct-head .aa-who { padding-left:16px; }
.aa-who { display:flex; align-items:center; gap:8px; min-width:0; }
.aa-dot { width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:none; }
.aa-dot.on { background:#3f9e5f; box-shadow:0 0 0 3px rgba(63,158,95,.15); }
.aa-id { display:flex; flex-direction:column; gap:2px; min-width:0; }
.aa-top { display:flex; align-items:center; gap:7px; min-width:0; }
.aa-name { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aa-email { display:block; color:var(--ink-3); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aa-subtag { flex:none; color:var(--ink-3); background:color-mix(in srgb, var(--ink) 8%, transparent); border-radius:20px; padding:1px 8px; font-size:11.5px; white-space:nowrap; }
.aa-joined, .aa-seen, .aa-plan { color:var(--ink-2); font-size:13px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.aa-plan { text-transform:capitalize; color:var(--ink); font-weight:600; }
.aa-seen.on { color:#3f9e5f; font-weight:600; }
@media (max-width:560px){ .adm-acct-table { grid-template-columns:minmax(0,1fr) auto; column-gap:12px; } .aa-joined, .aa-plan, .adm-acct-head .aa-joined, .adm-acct-head .aa-plan { display:none; } .aa-subtag { display:none; } }
/* Admin › Brand: the logo lockup, downloadable asset tiles and the palette. */
.adm-brand-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 20px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); margin-bottom:8px; }
.adm-brand-lockup { display:inline-flex; align-items:center; gap:.42em; font-size:38px; color:var(--ink); }
.adm-brand-lockup .brand-mark { width:1.05em; height:1.05em; color:var(--accent); }
.adm-brand-word { font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.adm-brand-sheet { font-size:14px; }
.adm-brand-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:11px; }
.adm-brand-dl { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line); border-radius:13px; background:var(--card); color:var(--ink); text-decoration:none; transition:border-color .12s, transform .1s, box-shadow .12s; }
.adm-brand-dl:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 10px 22px -14px rgba(0,0,0,.34); }
.adm-brand-prev { flex:none; width:42px; height:42px; border-radius:10px; display:grid; place-items:center; overflow:hidden; background:var(--paper-2); }
.adm-brand-dl.onblack .adm-brand-prev { background:#0d0d0f; }
.adm-brand-prev img { width:100%; height:100%; object-fit:contain; }
.adm-brand-meta { display:flex; flex-direction:column; min-width:0; flex:1; }
.adm-brand-nm { font-weight:600; font-size:14.5px; }
.adm-brand-note { font-size:12.5px; color:var(--ink-3); }
.adm-brand-go { flex:none; color:var(--ink-3); font-size:16px; }
.adm-brand-dl:hover .adm-brand-go { color:var(--accent); }
.adm-brand-sw { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.adm-sw { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:11px; padding:7px 10px; background:var(--card); }
.adm-sw-chip { width:26px; height:26px; border-radius:7px; flex:none; border:1px solid var(--line); }
.adm-sw-nm { font-size:13px; font-weight:600; flex:1; min-width:0; }
.adm-sw-hx { font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.au-status { font-size:12px; padding:2px 9px; border-radius:999px; background:var(--paper); color:var(--ink-3); }
.au-active { color:var(--pine,#2f5d57); background:color-mix(in srgb,var(--accent) 8%,transparent); }
.admin-quotes { display:flex; flex-direction:column; gap:4px; margin-top:12px; max-height:420px; overflow-y:auto; }
.aq-row { padding:9px 12px; }
.aq-text { flex:1; min-width:0; color:var(--ink); font-size:14px; }
.aq-author { color:var(--ink-3); font-size:13px; white-space:nowrap; }
.aq-del { flex:none; padding:2px 9px; font-size:16px; opacity:.6; }
.aq-row:hover .aq-del { opacity:1; }
/* Spirit Cards - a gentle oracle draw in Reflect. */
#spirit .spirit-bg { position:fixed; inset:0; z-index:220; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; background:color-mix(in srgb,var(--ink) 58%,transparent); backdrop-filter:blur(7px); }
.spirit-x { position:absolute; top:16px; right:20px; border:0; background:none; color:#fff; font-size:30px; line-height:1; cursor:pointer; opacity:.8; }
.spirit-x:hover { opacity:1; }
.spirit-card { width:min(300px,80vw); aspect-ratio:3 / 4.4; cursor:pointer; position:relative; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.spirit-card.drawn { transform:rotateY(180deg); }
/* A flat, native tap target over the 3D flip card - outside the preserve-3d
   context - so drawing a card works reliably on touch (iOS/WebKit mis-hit-tests
   taps on 3D-transformed elements). (Robin, 2026-10-15.) */
.spirit-card-wrap { position:relative; display:inline-flex; }
.spirit-card-hit { position:absolute; inset:0; z-index:4; background:transparent; border:0; padding:0; margin:0; border-radius:20px; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.sc-face { position:absolute; inset:0; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 34px 80px -34px rgba(0,0,0,.7); }
.sc-back { background:linear-gradient(160deg,#3a2f2a,#1d1813); color:#e8dcc8; border:1px solid rgba(255,255,255,.13); gap:16px; }
.sc-back .sc-mark { font-size:58px; color:#e0684f; }
.sc-hint { font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.68; }
.sc-front { background:linear-gradient(160deg,#faf6ee,#efe7d4); color:#211c17; transform:rotateY(180deg); gap:16px; border:1px solid rgba(0,0,0,.06); }
.sc-sym { font-size:56px; line-height:1; }
.sc-name { font-family:'Cormorant Garamond',Georgia,serif; font-size:33px; font-weight:600; margin:0; }
.sc-msg { font-size:17px; line-height:1.5; color:#574e44; margin:0; max-width:23ch; }
.spirit-again { padding:11px 24px; border-radius:12px; background:var(--accent); color:#fff; border:0; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 10px 26px -12px var(--accent); }
.spirit-again:hover { filter:brightness(1.06); }
.spirit-again[hidden] { display:none; }
/* Save this card / Go again, and the history of cards taken. */
.spirit-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
.spirit-save { padding:11px 24px; border-radius:12px; background:#fff; color:#211c17; border:0; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 10px 26px -12px rgba(0,0,0,.5); }
.spirit-save:hover { filter:brightness(0.97); }
.spirit-actions .spirit-again { background:transparent; color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.5); }
.spirit-saved { color:#fff; font-weight:700; font-size:15px; }
.spirit-hist { width:min(340px,86vw); color:#fff; }
.spirit-hist > summary { cursor:pointer; font-size:13.5px; letter-spacing:.04em; text-transform:uppercase; opacity:.85; list-style:none; text-align:center; padding:4px; }
.spirit-hist > summary::-webkit-details-marker { display:none; }
.spirit-hlist { margin-top:10px; max-height:38vh; overflow:auto; display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.08); border-radius:12px; padding:6px; }
.spirit-hrow { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; }
.spirit-hrow:hover { background:rgba(255,255,255,.08); }
.sh-sym { font-size:16px; flex:none; }
.sh-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.sh-name { font-size:14.5px; font-weight:600; }
.sh-msg { font-size:12.5px; opacity:.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-when { flex:none; font-size:11.5px; opacity:.7; font-variant-numeric:tabular-nums; }

/* ── I Ching & Horoscope (Well-being) ─────────────────────────────────── */
.ic-bg { position:fixed; inset:0; z-index:220; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 18px; background:color-mix(in srgb,var(--ink) 60%,transparent); backdrop-filter:blur(8px); animation:mv-fade .2s ease; }
.ic-x { position:fixed; top:16px; right:20px; border:0; background:none; color:#fff; font-size:32px; line-height:1; cursor:pointer; opacity:.8; z-index:2; }
.ic-x:hover { opacity:1; }
.ic-sheet { width:min(480px,100%); background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:0 40px 90px -34px rgba(0,0,0,.6); padding:34px 30px 26px; margin:auto; animation:mv-rise .35s cubic-bezier(.2,.8,.2,1); }
.ic-intro, .ho-form { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.ic-coin-row { font-size:52px; line-height:1; }
.ic-coin { display:inline-block; animation:ic-spin 6s linear infinite; }
@keyframes ic-spin { to { transform:rotate(360deg); } }
.ho-coin { font-size:46px; line-height:1; color:var(--accent); }
.ic-h { font-family:'Cormorant Garamond',Georgia,serif; font-size:30px; font-weight:600; color:var(--ink); margin:0; line-height:1.1; }
.ic-lede { font-size:15px; color:var(--ink-2); line-height:1.55; max-width:340px; margin:0; }
.ic-q { width:100%; text-align:center; font-size:16px; padding:12px 14px; }
.ic-cast { margin-top:4px; padding:13px 30px; border-radius:999px; border:0; background:var(--accent); color:var(--accent-ink); font-size:16px; font-weight:600; cursor:pointer; box-shadow:0 10px 26px -12px color-mix(in srgb,var(--accent) 70%,transparent); }
.ic-cast:hover { filter:brightness(1.05); transform:translateY(-1px); }
.ic-result { display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.ic-yourq { font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-style:italic; color:var(--ink-2); line-height:1.3; max-width:380px; }
.ic-hexes { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:4px; }
.ic-hexcol { display:flex; flex-direction:column; align-items:center; gap:8px; }
.ic-hexcap { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.ic-arrow { font-size:26px; color:var(--ink-3); align-self:center; margin-top:6px; }
.ic-hex { display:flex; flex-direction:column; gap:7px; width:126px; }
.ic-line { position:relative; height:15px; display:flex; align-items:center; justify-content:center; gap:14px; transform-origin:center; animation:ic-draw .5s ease both; }
.ic-hex .ic-line:nth-last-child(1) { animation-delay:0s; }
.ic-hex .ic-line:nth-last-child(2) { animation-delay:.13s; }
.ic-hex .ic-line:nth-last-child(3) { animation-delay:.26s; }
.ic-hex .ic-line:nth-last-child(4) { animation-delay:.39s; }
.ic-hex .ic-line:nth-last-child(5) { animation-delay:.52s; }
.ic-hex .ic-line:nth-last-child(6) { animation-delay:.65s; }
@keyframes ic-draw { from { opacity:0; transform:scaleX(.3) translateY(3px); } to { opacity:1; transform:none; } }
.ic-seg { height:13px; border-radius:3px; background:var(--ink); }
.ic-seg.full { width:100%; }
.ic-line .ic-seg:not(.full) { width:52px; }
.ic-line.chg .ic-seg { background:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent); }
.ic-mark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:12px; font-weight:700; color:var(--accent); background:var(--card); padding:0 2px; }
.ic-hexnum { font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ic-name { display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:2px; }
.ic-cn { font-size:40px; line-height:1; color:var(--ink); font-weight:500; }
.ic-en { font-family:'Cormorant Garamond',Georgia,serif; font-size:27px; font-weight:600; color:var(--ink); line-height:1.1; }
.ic-py { font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.ic-text { font-size:16.5px; color:var(--ink); line-height:1.6; max-width:400px; margin:0; }
.ic-text-2 { font-size:15.5px; color:var(--ink-2); }
.ic-change { width:100%; border-top:1px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:9px; }
.ic-change-h { font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--accent); }
.ic-static { font-size:13.5px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:14px; width:100%; }
.ic-reflect { width:100%; text-align:left; background:color-mix(in srgb,var(--accent) 7%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.ic-reflect-h { font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.ic-reflect p { margin:0; font-size:16px; line-height:1.6; color:var(--ink); }
.ic-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:6px; width:100%; }
.ic-btn { padding:11px 20px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); font-size:15px; font-weight:600; cursor:pointer; }
.ic-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.ic-btn:disabled { opacity:.6; cursor:default; }
/* A solid, unmistakable primary - the faint tint used to read as "already
   pressed", especially on mobile. */
.ic-btn-primary { border-color:transparent; color:var(--accent-ink,#fff); font-weight:700;
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 88%,#fff) 0%, var(--accent) 55%, color-mix(in srgb,var(--accent) 88%,#000) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent), 0 2px 3px rgba(0,0,0,.10), 0 10px 22px -12px color-mix(in srgb,var(--accent) 70%,transparent); }
.ic-btn-primary:hover:not(:disabled) { border-color:transparent; color:var(--accent-ink,#fff); filter:brightness(1.04); }
/* The bottom Close: an obvious way out, so nobody hunts for the small × up top. */
.ic-btn-close { font-weight:700; }
.ic-saved { align-self:center; font-size:14px; color:var(--accent); font-weight:600; padding:11px 4px; }
.ic-hist { width:100%; margin-top:20px; border-top:1px solid var(--line); padding-top:12px; }
.ic-hist > summary { cursor:pointer; font-size:13px; color:var(--ink-3); font-weight:600; list-style:none; }
.ic-hist > summary::-webkit-details-marker { display:none; }
.ic-hlist { display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.ic-hrow { display:flex; align-items:center; gap:12px; padding:8px 4px; border-bottom:1px solid var(--line); }
.ic-hcn { font-size:22px; flex:none; width:26px; text-align:center; color:var(--ink); }
.ic-hbody { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; text-align:left; }
.ic-hname { font-size:14px; color:var(--ink); font-weight:600; }
.ic-hq { font-size:12.5px; color:var(--ink-3); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ic-hwhen { flex:none; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
/* Past readings / cards you can reopen */
.ic-hrow-btn, .spirit-hrow-btn { width:100%; text-align:left; font:inherit; color:inherit; background:none; cursor:pointer; }
.ic-hrow-btn { border:0; border-bottom:1px solid var(--line); border-radius:0; }
.ic-hrow-btn:hover { background:color-mix(in srgb,var(--accent) 7%,transparent); }
.spirit-hrow-btn { border:0; }
.spirit-page .spirit-hrow-btn:hover { background:color-mix(in srgb,var(--ink) 6%,transparent); }
/* Spirit cards & I Ching, now as regular Well-being pages (not overlays). The
   action and history text was white for the old dark backdrop; on the page it
   reads against the normal ground, so recolour to the ink tokens. */
.spirit-page { display:flex; flex-direction:column; align-items:center; gap:22px; padding:10px 0 6px; }
.spirit-page .spirit-again { color:var(--ink); border-color:var(--line-2); }
.spirit-page .spirit-saved { color:var(--done); }
.spirit-page .spirit-hist { color:var(--ink-2); }
.spirit-page .spirit-hist > summary { opacity:1; color:var(--ink-3); }
.spirit-page .spirit-hrow:hover { background:color-mix(in srgb,var(--ink) 6%,transparent); }
.ic-page { margin:6px auto 0; }
/* Compass - the decision companion. Reuses the reflection sheet (.ic-sheet/.ic-page)
   and buttons (.ic-cast/.ic-btn); these add the A/B weigh-up, the signals and the
   bearing. NB .sel is globally capped at max-width:180px, so every field here lifts
   that cap or it would squash. (Robin, 2026-10-16.) */
/* Compass fills the pane (the shared .ic-sheet is a narrow 480px reading card;
   this view wants room), capped so it stays tasteful on a wide monitor, with a
   lighter shadow than the floating divination sheets. (Robin, 2026-10-16.) */
.ic-sheet.cmp-page { width:100%; max-width:1040px; padding:30px 38px 30px; box-shadow:var(--shadow); }
.cmp-form { width:100%; max-width:none; align-items:stretch; text-align:left; gap:18px; }
.cmp-form .ic-coin-row, .cmp-form .ic-h, .cmp-form .ic-lede { align-self:center; text-align:center; }
.cmp-form .ic-cast { align-self:center; }   /* a centred pill, never a full-width bar */
.cmp-form .sel, .cmp-why { max-width:none; width:100%; box-sizing:border-box; }
.cmp-l { display:flex; flex-direction:column; gap:7px; }
.cmp-l-t { font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); }
.cmp-l .sel { font-size:17px; padding:14px 16px; }
.cmp-ab { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cmp-col { display:flex; flex-direction:column; gap:9px; padding:16px; border-radius:15px; border:1px solid var(--line); }
.cmp-col-a { border-color:color-mix(in srgb,var(--accent) 32%,var(--line)); background:color-mix(in srgb,var(--accent) 6%,var(--card)); }
.cmp-col-b { border-color:color-mix(in srgb,var(--done,#4a7a52) 34%,var(--line)); background:color-mix(in srgb,var(--done,#4a7a52) 7%,var(--card)); }
.cmp-lbl { font-weight:600; }
.cmp-why { min-height:132px; resize:vertical; font-family:inherit; font-size:16px; line-height:1.55; }
.cmp-sigs { display:flex; flex-wrap:wrap; gap:14px; }
.cmp-sig { display:flex; flex-direction:column; gap:6px; flex:1 1 200px; }
.cmp-sig-l { font-size:13px; font-weight:600; color:var(--ink-2); }
.cmp-result { align-items:stretch; text-align:left; width:100%; max-width:none; gap:18px; }
.cmp-result .ic-yourq { align-self:center; text-align:center; font-size:25px; }
/* Wide screens: your two cases sit in a rail beside the bearing, so the width
   reads as composed rather than one long line. Stacks below 820px. */
.cmp-outcome { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:20px; align-items:start; width:100%; }
.cmp-ab-recap { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cmp-outcome .cmp-ab-recap { grid-template-columns:1fr; gap:12px; }
.cmp-recap { padding:14px 16px; border-radius:15px; border:1px solid var(--line); background:var(--paper-2); }
.cmp-recap-a { border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); }
.cmp-recap-b { border-color:color-mix(in srgb,var(--done,#4a7a52) 32%,var(--line)); }
.cmp-recap-h { display:block; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:5px; }
.cmp-recap p { margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.cmp-bearing { border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--card)); border-radius:18px; padding:24px 28px; box-shadow:var(--shadow); }
.cmp-bearing-h { font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:10px; }
.cmp-bearing-body { font-size:17px; line-height:1.72; color:var(--ink); }
.cmp-bearing-body p { margin:0 0 12px; }
.cmp-bearing-body p:last-child { margin-bottom:0; font-weight:600; }
.cmp-note { font-size:13px; color:var(--ink-3); text-align:center; margin:0; }
.cmp-ws { width:100%; display:flex; flex-direction:column; gap:10px; text-align:left; margin-top:2px; }
.cmp-ws-h { font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--ink-3); }
.cmp-ws-item { display:flex; flex-direction:column; gap:3px; padding:12px 15px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.cmp-ws-q { font-weight:700; font-size:14px; color:var(--ink); }
.cmp-ws-a { font-size:14px; color:var(--ink-2); line-height:1.5; }
.cmp-ws-foot { font-size:13px; color:var(--ink-3); margin:2px 0 0; }
@media (max-width:820px){ .cmp-outcome { grid-template-columns:1fr; } }
@media (max-width:620px){ .cmp-ab, .cmp-ab-recap, .cmp-outcome .cmp-ab-recap { grid-template-columns:1fr; } .ic-sheet.cmp-page { padding:20px 16px 22px; } }
/* Horoscope */
.ho-l { display:flex; flex-direction:column; gap:6px; width:100%; text-align:left; font-size:13px; font-weight:600; color:var(--ink-2); }
.ho-opt { font-weight:400; color:var(--ink-3); font-size:12px; }
.ho-l .sel { width:100%; font-size:16px; }
.ho-read { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.ho-sign { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ho-glyph { font-size:60px; line-height:1; color:var(--accent); }
.ho-signname { font-family:'Cormorant Garamond',Georgia,serif; font-size:34px; font-weight:600; color:var(--ink); line-height:1; }
.ho-el { font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.ho-arch { font-size:15px; color:var(--ink-2); line-height:1.5; max-width:360px; margin:0; font-style:italic; }
/* The natal "big three": Sun, Moon, Rising */
.ho-chart { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:2px 0 2px; }
.ho-chip { display:inline-flex; align-items:center; gap:9px; padding:9px 15px 9px 11px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--accent) 6%,var(--card)); }
.ho-chip-g { font-size:26px; line-height:1; color:var(--accent); }
.ho-chip-txt { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.ho-chip-l { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ho-chip-s { font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; color:var(--ink); }
.ho-charthint { margin:0; font-size:13px; }
.ho-charthint .linkish { color:var(--accent); }
.ho-date { font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); font-weight:600; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:9px 0; width:100%; }
.ho-body { text-align:left; width:100%; }
.ho-body p { font-size:16.5px; line-height:1.65; color:var(--ink); margin:0 0 12px; }
.ho-loading { font-size:15px; color:var(--ink-3); text-align:center; padding:14px 0; }
.ho-meta { font-size:12.5px; color:var(--ink-3); }

/* ── Your Lifebook card ────────────────────────────────────────────────── */
.set-cardlink { display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer; padding:16px 18px; margin-bottom:16px; }
.set-cardlink:hover { border-color:var(--accent); }
.set-cardlink-ic { font-size:26px; flex:none; }
.set-cardlink-body { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.set-cardlink-t { font-size:16px; font-weight:600; color:var(--ink); }
.set-cardlink-s { font-size:13px; color:var(--ink-3); }
.set-cardlink-go { font-size:22px; color:var(--ink-3); flex:none; }
.set-cardpreview { margin-bottom:16px; }
.set-cardpreview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.set-cardpreview-head .set-cardlink-t { font-size:16px; font-weight:600; }
.set-cardpreview-edit { flex:none; padding:8px 16px; font-size:14px; min-height:auto; }
/* Scale the whole card down uniformly (a true miniature, same proportions) with
   zoom - constraining width alone reflowed the internals and looked chopped. */
.set-cardpreview-card { width:360px; max-width:100%; zoom:.55; }
.dbc-lede { font-size:15px; color:var(--ink-2); line-height:1.55; margin:0 0 18px; max-width:560px; }
.dbc-wrap { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.dbc-preview { flex:none; width:340px; max-width:100%; position:sticky; top:12px; }
.dbc-edit { flex:1; min-width:260px; display:flex; flex-direction:column; gap:16px; }
/* The card */
.dbc-card { --dbc:#c4412e; position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 24px 60px -30px rgba(0,0,0,.5); }
.dbc-band { height:74px; background:linear-gradient(135deg, var(--dbc), color-mix(in srgb,var(--dbc) 62%,#000 30%)); }
.dbc-top { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:0 22px; margin-top:-38px; }
.dbc-photo { width:76px; height:76px; border-radius:50%; flex:none; background-size:cover; background-position:center; border:4px solid var(--card); box-shadow:0 6px 18px -8px rgba(0,0,0,.4); display:grid; place-items:center; }
.dbc-photo-mono { background:linear-gradient(135deg, var(--dbc,#c4412e), color-mix(in srgb,var(--dbc,#c4412e) 62%,#000 30%)); color:#fff; font-family:'Cormorant Garamond',Georgia,serif; font-size:34px; font-weight:600; }
.dbc-photo.sm { width:56px; height:56px; border-width:3px; font-size:24px; }
.dbc-id { display:flex; flex-direction:column; gap:2px; min-width:0; max-width:100%; }
.dbc-name { font-family:'Cormorant Garamond',Georgia,serif; font-size:27px; font-weight:600; color:var(--ink); line-height:1.05; }
.dbc-handle { font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:12.5px; color:var(--dbc); font-weight:600; }
.dbc-tag { margin:14px 22px 0; font-size:16px; line-height:1.5; color:var(--ink); }
.dbc-tag-ph { color:var(--ink-3); font-style:italic; }
.dbc-chips { display:flex; flex-wrap:wrap; gap:8px; margin:14px 22px 0; }
.dbc-chip { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink-2); text-decoration:none; }
a.dbc-chip:hover { border-color:var(--dbc); color:var(--dbc); }
.dbc-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:18px 22px 18px; padding-top:14px; border-top:1px solid var(--line); }
.dbc-mark { display:flex; align-items:center; gap:6px; color:var(--ink-3); font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.dbc-mark .brand-mark { width:18px; height:18px; color:var(--dbc); }
.dbc-qr-mini { display:flex; flex-direction:column; align-items:center; gap:3px; flex:none; }
.dbc-qr-mini .dbc-qr { width:64px; height:64px; border:1px solid var(--line); border-radius:8px; }
.dbc-qr-mini-cap { font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
/* The editor */
.dbc-field { display:flex; flex-direction:column; gap:7px; }
.dbc-l { font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.dbc-opt { font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-3); }
.dbc-field .sel { font-size:16px; }
.dbc-photo-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dbc-photo-btn { flex:none; }
.dbc-swatches { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.dbc-swatch { width:30px; height:30px; border-radius:50%; border:2px solid var(--line); cursor:pointer; padding:0; position:relative; }
.dbc-swatch.on { border-color:var(--ink); box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink); }
.dbc-swatch-custom { display:grid; place-items:center; background:var(--paper-2); color:var(--ink-2); font-size:17px; font-weight:600; overflow:hidden; }
.dbc-swatch-custom input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.dbc-tog { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); cursor:pointer; font-weight:400; text-transform:none; letter-spacing:0; }
.dbc-tog input { flex:none; width:19px; height:19px; accent-color:var(--accent); }
.dbc-tog input:disabled { opacity:.5; } .dbc-tog input:disabled + span { color:var(--ink-3); }
.dbc-note { font-size:13px; color:var(--ink-3); line-height:1.5; margin:2px 0 0; } .dbc-note b { color:var(--ink-2); }
.dbc-qrwrap { display:inline-flex; flex-direction:column; align-items:center; gap:8px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:16px; align-self:flex-start; box-shadow:var(--shadow); }
.dbc-qr { display:block; border-radius:8px; }
.dbc-qr-cap { font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:12px; color:#5b5560; }
@media (max-width:640px) { .dbc-preview { position:static; width:100%; } }
/* Band background patterns (a translucent overlay tinted by the light band). */
.dbc-band { position:relative; }
.dbc-pat-none { --pat:none; --patsize:auto; }
.dbc-pat-dots { --pat:radial-gradient(rgba(255,255,255,.30) 1.5px, transparent 1.7px); --patsize:14px 14px; }
.dbc-pat-grid { --pat:linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px); --patsize:16px 16px, 16px 16px; }
.dbc-pat-diagonal { --pat:repeating-linear-gradient(45deg, rgba(255,255,255,.20) 0 2px, transparent 2px 11px); --patsize:auto; }
.dbc-pat-waves { --pat:radial-gradient(circle at 50% 120%, transparent 8px, rgba(255,255,255,.20) 9px, transparent 10px); --patsize:22px 12px; }
.dbc-band::after { content:''; position:absolute; inset:0; background-image:var(--pat,none); background-size:var(--patsize,auto); pointer-events:none; }
/* Pattern picker */
.dbc-pats { display:flex; flex-wrap:wrap; gap:9px; }
.dbc-pat-btn { display:flex; flex-direction:column; align-items:center; gap:5px; border:0; background:none; cursor:pointer; padding:0; }
.dbc-pat-swatch { position:relative; width:52px; height:34px; border-radius:9px; overflow:hidden; border:2px solid var(--line); background:linear-gradient(135deg, var(--dbc,#c4412e), color-mix(in srgb,var(--dbc,#c4412e) 62%,#000 30%)); }
.dbc-pat-swatch::after { content:''; position:absolute; inset:0; background-image:var(--pat,none); background-size:var(--patsize,auto); }
.dbc-pat-btn.on .dbc-pat-swatch { border-color:var(--ink); box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink); }
.dbc-pat-l { font-size:11.5px; color:var(--ink-3); }
.dbc-pat-btn.on .dbc-pat-l { color:var(--ink); font-weight:600; }

/* ── Background patterns (Settings › Appearance) ───────────────────────────
   A faint, theme-aware texture over --paper, behind all content. Gradient
   patterns read --pat-ink (set per theme); the two figurative ones carry their
   faint colour baked per theme in the SVG. Plain = no [data-bg]. */
:root[data-theme='light'] {
  --pat-tiles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%231b1820' stroke-opacity='0.06' stroke-width='1.1'%3E%3Ccircle cx='23' cy='23' r='11'/%3E%3Ccircle cx='0' cy='0' r='11'/%3E%3Ccircle cx='46' cy='0' r='11'/%3E%3Ccircle cx='0' cy='46' r='11'/%3E%3Ccircle cx='46' cy='46' r='11'/%3E%3C/g%3E%3C/svg%3E");
  --pat-paisley:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%231b1820' stroke-opacity='0.07' stroke-width='1.3'%3E%3Cg transform='translate(8 10)'%3E%3Cpath d='M33 6 C47 7 55 20 50 33 C46 44 34 49 25 44 C18 40 17 30 24 27 C30 24 36 29 33 34 C31 37 27 36 27 33'/%3E%3Cpath d='M33 14 C42 16 46 24 43 32'/%3E%3C/g%3E%3Cg transform='translate(112 110) rotate(180)'%3E%3Cpath d='M33 6 C47 7 55 20 50 33 C46 44 34 49 25 44 C18 40 17 30 24 27 C30 24 36 29 33 34 C31 37 27 36 27 33'/%3E%3Cpath d='M33 14 C42 16 46 24 43 32'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme='dark'] {
  --pat-tiles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23ece7f2' stroke-opacity='0.07' stroke-width='1.1'%3E%3Ccircle cx='23' cy='23' r='11'/%3E%3Ccircle cx='0' cy='0' r='11'/%3E%3Ccircle cx='46' cy='0' r='11'/%3E%3Ccircle cx='0' cy='46' r='11'/%3E%3Ccircle cx='46' cy='46' r='11'/%3E%3C/g%3E%3C/svg%3E");
  --pat-paisley:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ece7f2' stroke-opacity='0.08' stroke-width='1.3'%3E%3Cg transform='translate(8 10)'%3E%3Cpath d='M33 6 C47 7 55 20 50 33 C46 44 34 49 25 44 C18 40 17 30 24 27 C30 24 36 29 33 34 C31 37 27 36 27 33'/%3E%3Cpath d='M33 14 C42 16 46 24 43 32'/%3E%3C/g%3E%3Cg transform='translate(112 110) rotate(180)'%3E%3Cpath d='M33 6 C47 7 55 20 50 33 C46 44 34 49 25 44 C18 40 17 30 24 27 C30 24 36 29 33 34 C31 37 27 36 27 33'/%3E%3Cpath d='M33 14 C42 16 46 24 43 32'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
body[data-bg="dots"], .bg-swatch[data-bg="dots"] { background-image:radial-gradient(var(--pat-ink) 1.3px, transparent 1.4px); background-size:20px 20px; }
body[data-bg="grid"], .bg-swatch[data-bg="grid"] { background-image:linear-gradient(var(--pat-ink) 1px, transparent 1px), linear-gradient(90deg, var(--pat-ink) 1px, transparent 1px); background-size:24px 24px; }
body[data-bg="diagonal"], .bg-swatch[data-bg="diagonal"] { background-image:repeating-linear-gradient(45deg, var(--pat-ink) 0 1.5px, transparent 1.5px 13px); }
body[data-bg="waves"], .bg-swatch[data-bg="waves"] { background-image:radial-gradient(circle at 50% 100%, transparent 8.5px, var(--pat-ink) 9px 10px, transparent 10.5px); background-size:28px 14px; }
body[data-bg="tiles"], .bg-swatch[data-bg="tiles"] { background-image:var(--pat-tiles); background-size:46px 46px; }
body[data-bg="paisley"], .bg-swatch[data-bg="paisley"] { background-image:var(--pat-paisley); background-size:120px 120px; }
.bg-swatches { display:flex; flex-wrap:wrap; gap:13px; margin-top:13px; }
.bg-swatch-btn { display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:none; cursor:pointer; padding:0; }
.bg-swatch { width:58px; height:40px; border-radius:10px; border:2px solid var(--line-2); background-color:var(--paper); background-repeat:repeat; background-position:center; }
.bg-swatch-btn:hover .bg-swatch { border-color:var(--accent); }
.bg-swatch-btn.on .bg-swatch { border-color:var(--accent); box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent); }
.bg-swatch-l { font-size:12.5px; color:var(--ink-3); }
.bg-swatch-btn.on .bg-swatch-l { color:var(--ink); font-weight:600; }
/* The picker previews read clearer with a touch more ink than the live page. */
.bg-swatch[data-bg="dots"], .bg-swatch[data-bg="grid"], .bg-swatch[data-bg="diagonal"], .bg-swatch[data-bg="waves"] { --pat-ink:rgba(27,24,32,.34); }
:root[data-theme='dark'] .bg-swatch[data-bg="dots"], :root[data-theme='dark'] .bg-swatch[data-bg="grid"], :root[data-theme='dark'] .bg-swatch[data-bg="diagonal"], :root[data-theme='dark'] .bg-swatch[data-bg="waves"] { --pat-ink:rgba(236,231,242,.38); }
/* Links editor */
.dbc-links { display:flex; flex-direction:column; gap:8px; }
.dbc-link-row { display:flex; gap:8px; align-items:center; }
.dbc-link-url { flex:2; min-width:0; } .dbc-link-label { flex:1; min-width:0; max-width:140px; }
.dbc-link-x { flex:none; font-size:18px; line-height:1; color:var(--ink-3); }
.dbc-link-x:hover { color:var(--accent); }
.dbc-link-add { align-self:flex-start; }
.dbc-lk-ic { font-weight:700; font-style:normal; }
/* Read-only card viewer */
.dbc-viewwrap { width:min(360px,100%); margin:auto; display:flex; flex-direction:column; gap:14px; }
.dbc-view-acts { display:flex; justify-content:center; }
.dbc-view-pending { font-size:14px; color:var(--done); font-weight:600; }
.dbc-viewmsg { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:30px; text-align:center; color:var(--ink-3); }
/* Clickable person avatar / row */
.fr-av-btn { border:0; background:none; padding:0; cursor:pointer; flex:none; border-radius:50%; }
.fr-body-btn { border:0; background:none; padding:0; cursor:pointer; text-align:left; min-width:0; }
/* Settings: account. */
.set-account { display:flex; flex-direction:column; gap:15px; }
.set-field { display:flex; flex-direction:column; gap:6px; }
.set-field > span { font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.set-field input:disabled { opacity:.6; }
/* Username field: input + fixed .daybook.fyi suffix, with a live URL note. */
.su-username-row { display:flex; align-items:stretch; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:var(--card); max-width:420px; }
.su-username-row:focus-within { border-color:var(--accent); }
.su-username-in.sel { border:0; border-radius:0; flex:1; min-width:0; max-width:none; }
.su-username-suffix { display:flex; align-items:center; padding:0 13px; background:var(--paper-2); color:var(--ink-3); font-size:15px; white-space:nowrap; border-left:1px solid var(--line); }
.su-username-note { font-size:13px; color:var(--ink-3); } .su-username-note b { color:var(--ink-2); font-weight:600; }
.alias-list { display:flex; flex-wrap:wrap; gap:6px; }
.alias-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 5px 5px 12px; background:var(--paper); border:1px solid var(--line); border-radius:999px; font-size:14px; }
.alias-x { border:0; background:none; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; padding:0 4px; border-radius:50%; }
.alias-x:hover { color:var(--accent); }
.alias-add { display:flex; gap:8px; margin-top:2px; }
.alias-add input { flex:1; min-width:0; }
.alias-badge { font-size:11px; line-height:1; }
.alias-chip.ok .alias-badge { color:#3f9e5f; }
.alias-chip.pending { border-style:dashed; color:var(--ink-2); }
.alias-chip.pending .alias-badge { filter:grayscale(.2); }
.alias-verify { margin-top:8px; padding:10px 12px; background:color-mix(in srgb,var(--accent) 6%,transparent); border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); border-radius:10px; }
.av-note { display:block; font-size:13px; color:var(--ink-2); margin-bottom:8px; } .av-note b { color:var(--ink); }
.alias-verify-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.alias-verify-row input { width:110px; flex:none; letter-spacing:.18em; text-align:center; font-variant-numeric:tabular-nums; }
.acct-plan { display:flex; align-items:center; gap:12px; } .acct-plan b { text-transform:capitalize; }
.acct-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }

/* ── Import tab ──────────────────────────────────────────────────────────── */
.imp-card { display:flex; flex-direction:column; gap:18px; }
.imp-lead { font-size:15px; line-height:1.55; color:var(--muted); margin:0; max-width:60ch; }
.imp-lead code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.92em; background:var(--chip,rgba(0,0,0,.05)); padding:1px 5px; border-radius:5px; }
.imp-field { display:flex; flex-direction:column; gap:7px; }
.imp-label { font-size:14px; font-weight:600; color:var(--ink); }
.imp-area { max-width:360px; }
.imp-pick { cursor:pointer; text-align:center; max-width:360px; }
.imp-hint { font-size:13px; color:var(--muted); margin:0; }
.imp-err { font-size:14px; color:var(--bad,#c0392b); margin:0; }
.imp-preview { border:1px solid var(--line); border-radius:14px; padding:16px; background:var(--card2,var(--card)); display:flex; flex-direction:column; gap:12px; }
.imp-preview-h { font-size:15px; font-weight:600; }
.imp-rows { display:flex; flex-direction:column; gap:2px; max-height:360px; overflow-y:auto; }
.imp-row { display:flex; flex-direction:column; gap:2px; padding:9px 11px; border-radius:9px; }
.imp-row:nth-child(odd) { background:var(--chip,rgba(0,0,0,.035)); }
.imp-row-t { font-size:15px; font-weight:600; color:var(--ink); }
.imp-row-s { font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.imp-row-more { font-size:13px; color:var(--muted); padding:6px 11px; }
.imp-act { display:flex; align-items:center; gap:14px; }
.imp-act .add-btn.wide { flex:0 1 auto; }
/* Import type switcher (Notes / Events) */
.imp-kinds { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.imp-kind { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:14px 16px; border:1px solid var(--line-2); border-radius:14px; background:var(--card); cursor:pointer; text-align:left; transition:border-color .12s, background .12s; }
.imp-kind:hover { border-color:var(--accent); }
.imp-kind.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); box-shadow:inset 0 0 0 1px var(--accent); }
.imp-kind-ic { font-size:22px; line-height:1; }
.imp-kind-t { font-size:16px; font-weight:600; color:var(--ink); }
.imp-kind-s { font-size:12.5px; color:var(--muted); }
@media (max-width:520px) { .imp-kinds { grid-template-columns:1fr; } }
.imp-evtext { width:100%; max-width:none; resize:vertical; font:inherit; font-size:15px; line-height:1.5; }
.imp-find { flex:0 1 auto; }
.imp-evrows { display:flex; flex-direction:column; gap:6px; max-height:420px; overflow-y:auto; }
.imp-evrow { display:flex; align-items:flex-start; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; background:var(--card2,var(--card)); cursor:pointer; transition:border-color .12s, background .12s; }
.imp-evrow.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,var(--card)); }
.imp-evrow input[type=checkbox] { margin-top:3px; flex:none; width:17px; height:17px; accent-color:var(--accent); }
.imp-evmain { display:flex; flex-direction:column; gap:2px; min-width:0; }
.imp-evt { font-size:15px; font-weight:600; color:var(--ink); }
.imp-evmeta { font-size:13px; color:var(--accent); font-variant-numeric:tabular-nums; }
.imp-evnotes { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.imp-flyer-teaser { text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; padding:14px 8px 6px; }
.imp-flyer-art { font-size:40px; letter-spacing:4px; }
.imp-flyer-teaser .imp-lead { max-width:46ch; }
.imp-flyer-teaser .add-btn.wide { max-width:320px; }
/* Account tab order: your details first, then the Lifebook card + Security side by
   side, then Your data. */
.set-account, .set-acct-cols { margin-bottom:16px; }
.set-acct-cols { display:flex; gap:16px; align-items:stretch; }
.set-acct-cols > .set-card { flex:1 1 0; min-width:0; }
.set-acct-cols .set-cardpreview { margin-bottom:0; }
@media (max-width:720px) { .set-acct-cols { flex-direction:column; } }
.set-yourdata { gap:14px; }
.yd-hosts { display:flex; gap:12px; flex-wrap:wrap; }
.yd-host { flex:1 1 220px; min-width:0; border:1px solid var(--line); border-radius:12px; padding:13px 15px; display:flex; flex-direction:column; gap:5px; background:color-mix(in srgb,var(--card) 55%,transparent); }
.yd-host.on { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); background:color-mix(in srgb,var(--accent) 6%,transparent); }
.yd-host-h { display:flex; align-items:center; gap:7px; font-size:14.5px; font-weight:650; color:var(--ink); }
.yd-host-dot { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--accent); color:var(--accent-ink,#fff); font-size:11px; flex:none; }
.yd-host-s { font-size:13px; color:var(--ink-3); line-height:1.5; }
.yd-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.yd-privacy-link { text-decoration:none; }
.yd-ai-links { display:flex; gap:10px; flex-wrap:wrap; }
.yd-ai-link { display:inline-flex; align-items:center; padding:9px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink-2); font-size:14px; box-shadow:var(--shadow-sm); text-decoration:none; }
.yd-ai-link b { color:var(--ink); font-weight:650; margin-right:2px; }
.yd-ai-link:hover { border-color:var(--accent); color:var(--accent); }
.acct-privacy { margin:14px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-3); max-width:560px; }
.acct-privacy a { color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2); white-space:nowrap; }
.acct-privacy a:hover { color:var(--accent); border-color:var(--accent); }
.acct-danger { color:var(--rust,#c4412e); } .acct-danger:hover { border-color:var(--rust,#c4412e); }
/* Settings: section on/off switches. */
.set-mods { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.set-mod { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; background:var(--paper); border:1px solid var(--line); border-radius:11px; font-size:15px; color:var(--ink); }
.set-mod input { width:20px; height:20px; accent-color:var(--accent); flex:none; }
.set-mod > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.set-mod small { font-size:12.5px; color:var(--ink-3); font-weight:400; line-height:1.35; }
.set-notifs { gap:22px; }
/* Settings → Mobile: drag-reorder + show/hide list for the mobile Home sections. */
.msec-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.msec-row { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.msec-row.msec-dragging { background:var(--card); border-color:var(--accent); box-shadow:0 10px 26px -12px rgba(0,0,0,.4); opacity:.97; }
.msec-grip { flex:none; cursor:grab; touch-action:none; color:var(--ink-3); font-size:18px; line-height:1; padding:4px 6px; border-radius:7px; }
.msec-grip:hover { color:var(--accent); background:var(--paper-2); }
.msec-grip:active { cursor:grabbing; }
.msec-name { flex:1; min-width:0; font-size:15.5px; color:var(--ink); }
/* Compact show/hide switch. */
.msec-switch { position:relative; flex:none; width:44px; height:26px; cursor:pointer; }
.msec-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch-sl { position:absolute; inset:0; border-radius:999px; background:var(--line-2); transition:background .16s; }
.switch-sl::before { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .16s; }
.msec-switch input:checked + .switch-sl { background:var(--accent); }
.msec-switch input:checked + .switch-sl::before { transform:translateX(18px); }
.msec-switch input:focus-visible + .switch-sl { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent); }
/* Wheel of Life: choose which areas are tracked. */
.wheeltrack { margin-top:28px; }
.wheeltrack-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px; }
.wheeltrack-row { display:flex; align-items:center; gap:11px; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow); }
.wheeltrack-row .wt-dot { flex:none; width:11px; height:11px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); }
.wheeltrack-n { flex:1; min-width:0; font-size:15.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wheeltrack-row .msec-switch { flex:none; }
.set-notif-group { display:flex; flex-direction:column; gap:10px; }
.set-notif-h { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; }
.set-notif-act { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:-2px 0 2px; }
.set-notif-act .ghost { flex:none; }
.set-notif-hint { font-size:12.5px; color:var(--ink-3); }
@media (max-width:560px){ .set-mods { grid-template-columns:1fr; } }
/* Calendar feeds: follow-a-team search + followed chips. */
.feed-teams-lead { font-size:13.5px; color:var(--ink-3); margin:-2px 0 2px; line-height:1.4; }
.feed-teams { display:flex; flex-wrap:wrap; gap:8px; }
.feed-teams-empty { font-size:14px; color:var(--ink-3); font-style:italic; }
.feed-team { display:inline-flex; align-items:center; gap:4px; padding:6px 6px 6px 12px; background:var(--card); border:1px solid var(--line); border-radius:999px; font-size:14.5px; color:var(--ink); }
.feed-team .ft-x { flex:none; width:22px; height:22px; border-radius:50%; border:0; background:none; color:var(--ink-3); font-size:17px; line-height:1; cursor:pointer; }
.feed-team .ft-x:hover { color:var(--accent); background:var(--paper); }
.feed-search { position:relative; }
.feed-team-q { width:100%; max-width:none; }
.feed-results { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.feed-res { display:flex; flex-direction:column; gap:1px; text-align:left; padding:10px 13px; background:var(--card); border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:border-color .12s; }
.feed-res:hover { border-color:var(--accent); }
.feed-res .fr-t { font-size:15px; font-weight:600; color:var(--ink); }
.feed-res .fr-sub { font-size:12.5px; color:var(--ink-3); }
.feed-res-note { font-size:14px; color:var(--ink-3); padding:8px 2px; }
/* Notes: linked tasks in the sidebar. */
.note-tasks { margin-top:22px; }
.nt-linked { display:flex; flex-direction:column; gap:1px; margin:8px 0; }
.nt-row { display:flex; align-items:center; gap:9px; padding:6px 7px; border-radius:9px; }
.nt-row:hover { background:var(--paper); }
.nt-dot { flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.nt-row .ga-t { flex:1; min-width:0; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14.5px; }
.nt-unlink { flex:none; padding:1px 8px; font-size:15px; opacity:0; }
.nt-row:hover .nt-unlink { opacity:.6; } .nt-unlink:hover { opacity:1 !important; }
/* Both of these run the full width of the rail, so their edges line up with
   the "Notes inside" panel above rather than floating at their own widths.
   .sel caps itself at 180px for the inline selects it was written for, so the
   cap has to be lifted here. The 12px side padding is .sel's, not .ghost's, so
   the button's "+" sits directly under the search placeholder. */
.nt-search { margin:4px 0 6px; width:100%; max-width:none; }
.nt-results { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.nt-result { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; text-align:left; background:var(--card); border:1px solid var(--line); }
.nt-result:hover { border-color:var(--accent); }
.nt-result .ga-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:var(--ink); }
.nt-link-ic { flex:none; font-size:12.5px; color:var(--accent); font-weight:600; }
.nt-new { font-size:13.5px; width:100%; text-align:left; padding-left:12px; padding-right:12px; }
/* Notes ↔ events: linked cards + a "you might mean" suggestion row. */
.note-events { margin-top:22px; }
.ce-linked { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.ce-card { display:flex; align-items:center; gap:4px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; background:var(--card); overflow:hidden; }
.ce-card:hover { border-color:var(--accent); }
.ce-open { flex:1; min-width:0; display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:8px 4px 8px 11px; cursor:pointer; color:var(--ink); font:inherit; font-size:14px; text-align:left; }
.ce-ic { flex:none; color:var(--accent); }
.ce-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ce-d { flex:none; margin-left:auto; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ce-x { flex:none; background:none; border:0; padding:6px 10px 6px 4px; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; }
.ce-x:hover { color:var(--accent); }
.ce-sugg { margin:2px 0 8px; }
.ce-sugg-h { font-size:11.5px; color:var(--ink-3); margin:2px 0 5px; text-transform:uppercase; letter-spacing:.03em; }
.ce-sugg .nt-result { border-style:dashed; margin-bottom:4px; }
.ce-notes-sec .ce-notes-body { margin-top:6px; }
.ce-notes-sec .nt-result, .note-events .nt-result { margin-bottom:4px; }
/* Tasks: priority filter chips. */
/* Tasks: build-your-own filter bar. */
.task-filters { margin:0 0 18px; }
.tf-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tf-toggle { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); font-size:14.5px; }
.tf-toggle:hover { color:var(--ink); border-color:var(--line-2); }
.tf-toggle .acw-chev { font-size:11px; color:var(--ink-3); }
/* Task "Surface & reminders" section: a tidy grouped card. */
.tf-surface { margin-top:18px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:6px 16px 16px; }
/* Surface + Who-can-see-this sit side by side on a wide card, stack when narrow. */
.tf-cardrow { display:flex; gap:16px; align-items:stretch; flex-wrap:wrap; }
.tf-cardrow > * { flex:1 1 300px; min-width:0; }
.tfs-h { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; color:var(--ink); padding:12px 0 6px; }
/* Foldable card headers (Surface / Who can see this / Notes): click to collapse. */
.tfs-fold { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:none; border:0; cursor:pointer; text-align:left; }
.tfs-chev { font-family:system-ui,sans-serif; font-size:13px; font-weight:400; color:var(--ink-3); flex:none; }
.tf-surface.folded, .focus-notes.folded { padding-bottom:6px; }
.tfs-row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:11px 0; border-top:1px solid var(--line); }
.tfs-l { display:flex; flex-direction:column; gap:2px; font-size:14.5px; font-weight:600; color:var(--ink); }
.tfs-l .tf-hint { font-weight:400; }
.tfs-ctrl { flex:none; display:inline-flex; align-items:center; gap:10px; }
.tfs-ctrl .sel, .tfs-ctrl .date-field { min-width:190px; }
.tfs-clear { flex:none; }
.tfs-block { display:flex; flex-direction:column; gap:12px; padding:14px; margin:4px 0; border-radius:12px; background:color-mix(in srgb,var(--accent) 5%,transparent); border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); }
.tfs-toggle { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); cursor:pointer; }
.tfs-toggle input { flex:none; width:19px; height:19px; accent-color:var(--accent); }
.tfs-chan { display:flex; gap:9px; flex-wrap:wrap; padding-left:29px; }
.tfs-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); font-size:14px; font-weight:600; cursor:pointer; }
.tfs-chip:hover { border-color:var(--accent); color:var(--accent); }
.tfs-chip.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--card)); }
.tfs-chip-ic { font-size:15px; }
.tfs-note { padding-left:29px; margin:0; font-size:12.5px; color:var(--ink-3); line-height:1.5; }
/* "Who can see this": a row of faces + a share/manage button. */
.tf-visible .tfs-note { padding-left:0; margin-top:2px; }
.tf-vis-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:4px 0 10px; }
.tf-face { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:color-mix(in srgb,var(--accent) 14%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); color:var(--ink); font-size:14px; font-weight:600; flex:none; }
.tf-face.me { background:var(--accent); border-color:var(--accent); color:#fff; }
.tf-face.me.is-priv { background:var(--card); border-color:var(--line-2); }
.tf-vis-share { margin-left:4px; padding:8px 15px; border-radius:999px; border:1px dashed var(--line-2); background:none; color:var(--ink-2); font-size:13.5px; font-weight:600; cursor:pointer; }
.tf-vis-share:hover { border-color:var(--accent); color:var(--accent); border-style:solid; }
.tf-vis-toggle { padding-top:4px; }
.tf-count { display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--accent); color:#fff; font-size:12px; font-weight:600; }
.tf-chips { display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0; }
.tf-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 6px 5px 12px; border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,transparent); border-radius:999px; font-size:13.5px; color:var(--ink); }
.tf-chip-x, .tf-del { border:0; background:none; color:var(--ink-3); font-size:15px; line-height:1; cursor:pointer; padding:0 4px; border-radius:50%; }
.tf-chip-x:hover, .tf-del:hover { color:var(--accent); }
.tf-panel { margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--card); display:flex; flex-direction:column; gap:9px; }
.tf-cond { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tf-cond .sel { width:auto; margin:0; padding:8px 26px 8px 11px; font-size:14.5px; }
.tf-cond .tf-field { min-width:120px; } .tf-cond .tf-op { min-width:90px; }
.tf-cond .tf-num { width:92px; padding-right:10px; }
.tf-empty { color:var(--ink-3); font-size:14px; font-style:italic; padding:2px; }
.tf-panel-acts { display:flex; gap:10px; align-items:center; margin-top:3px; }
.tf-panel-acts .add-btn.wide { flex:none; }
@media (max-width:600px){ .tf-cond .sel, .tf-cond .tf-val { flex:1; min-width:0; } }
.prio-chips { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px; }
.prio-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-2); font-size:13.5px; }
.prio-chip b { font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.prio-chip:hover { border-color:var(--line-2); color:var(--ink); }
.prio-chip.on { border-color:var(--accent); color:var(--ink); background:var(--paper); font-weight:600; }
.prio-chip.on b { color:var(--accent); }
/* Home: faved life areas + drag-to-reposition sections. */
/* Home Life-areas tile: a sort control above the areas (starred first). */
.favarea-sort { display:flex; justify-content:flex-end; margin:6px 0 2px; }
.favarea-sort-l { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); }
.favarea-sort-l .sel { max-width:170px; }
.favarea.is-fav { border-left:3px solid hsl(var(--h,4) 60% 52%); }
.favarea .fa-star { color:var(--accent); font-size:12px; margin-left:-2px; }
.favarea-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.favarea { display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font-size:15px; box-shadow:var(--shadow-sm); transition:border-color .12s, transform .12s; }
.favarea:hover { border-color:var(--line-2); transform:translateY(-1px); }
.fa-dot { width:9px; height:9px; border-radius:50%; background:hsl(var(--h,4) 55% 55%); flex:none; }
.home-grip { color:var(--ink-3); font-size:14px; opacity:.5; cursor:grab; margin-right:2px; padding:2px 3px; border-radius:5px; touch-action:none; -webkit-user-select:none; user-select:none; line-height:1; }
.home-drag-h:hover .home-grip { opacity:.75; }
.home-grip:hover { background:var(--paper-2); color:var(--ink-2); }
.home-grip:active { cursor:grabbing; color:var(--accent); }
/* Desktop pointer-drag visuals for home sections (mobile has its own in the media query). */
.home-sec.mdragging { position:relative; z-index:20; }
.home-sec.mdragging .home-sec-h { border-radius:10px; background:var(--card); box-shadow:0 14px 34px -12px rgba(0,0,0,.45); }
.home-sec.mdrop-top { box-shadow:0 -3px 0 -1px var(--accent); }
.home-sec.mdrop-bottom { box-shadow:0 3px 0 -1px var(--accent); }
.home-sec[data-hsec].dragging { opacity:.4; }
/* Main-area lead-block drag: a grip in the header (desktop), drop lines + lift. */
.lead-grip { color:var(--ink-3); font-size:14px; opacity:.32; cursor:grab; margin-right:2px; padding:2px 3px; border-radius:5px; touch-action:none; -webkit-user-select:none; user-select:none; line-height:1; }
.lead-h:hover .lead-grip { opacity:.75; }
.lead-grip:hover { background:var(--paper-2); color:var(--ink-2); }
.lead-grip:active { cursor:grabbing; color:var(--accent); }
/* Recently viewed isn't draggable, but reserves the grip's space so its icon and
   label line up with the other section headers. */
.lead-grip-ghost { visibility:hidden; cursor:default; pointer-events:none; }
.lead-block.mdragging { position:relative; z-index:20; }
.lead-block.mdragging .lead-h { border-radius:10px; background:var(--card); box-shadow:0 14px 34px -12px rgba(0,0,0,.45); }
.lead-block.mdrop-top { box-shadow:0 -3px 0 -1px var(--accent); }
.lead-block.mdrop-bottom { box-shadow:0 3px 0 -1px var(--accent); }
@media (max-width:820px){ .lead-grip { display:none; } }
.home-main [data-hsec] { position:relative; }
.home-main .drop-before::before, .home-main .drop-after::after { content:''; position:absolute; left:0; right:0; height:3px; border-radius:2px; background:var(--accent); z-index:4; }
.home-main .drop-before::before { top:-7px; } .home-main .drop-after::after { bottom:-7px; }
/* Home priority (P1) tasks list. */
/* Priority tasks wrap like the Starred cards: each is only as wide as it needs
   to be, so several sit on a line instead of one full-width row apiece. */
.p1-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.p1-all { display:inline-block; margin:12px 0 0 2px; font-size:14px; color:var(--accent); font-weight:500; }
.p1-all:hover { text-decoration:underline; }
/* Home inbox preview: the newest emails as tidy rows with a sender avatar. */
.hm-list { display:flex; flex-direction:column; gap:4px; }
.hm-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 12px; border:1px solid transparent; background:none; border-radius:12px; cursor:pointer; color:var(--ink); transition:background .12s, border-color .12s; }
.hm-row:hover { background:var(--card); border-color:var(--line); }
.hm-av { flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--ink-2); background:color-mix(in srgb,var(--accent) 14%,var(--card)); text-transform:uppercase; }
.hm-row.unread .hm-av { background:var(--accent); color:#fff; }
.hm-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hm-top { display:flex; align-items:baseline; gap:8px; }
.hm-from { flex:1; min-width:0; font-size:14.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm-row.unread .hm-from { font-weight:700; color:var(--ink); }
.hm-when { flex:none; font-size:12px; color:var(--ink-3); white-space:nowrap; }
.hm-subj { font-size:14px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm-row.unread .hm-subj { font-weight:600; color:var(--ink); }
/* Each priority task is its own little card - the same chrome the Starred cards
   carry, plus a left stripe in the task's life-area colour so a glance sorts them. */
.p1-row { display:inline-flex; align-items:center; gap:10px; max-width:100%; text-align:left; padding:11px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line); border-left:3px solid hsl(var(--h,4) 60% 52%); box-shadow:var(--shadow); color:var(--ink); font-size:15.5px; position:relative; transition:border-color .12s, transform .12s, box-shadow .12s; }
.p1-row:hover { border-color:var(--line-2); border-left-color:hsl(var(--h,4) 60% 52%); transform:translateY(-1px); box-shadow:0 8px 20px -12px rgba(0,0,0,.34); }
.p1-row.dragging { opacity:.4; }
.p1-grip { flex:none; color:var(--ink-3); font-size:12px; opacity:0; cursor:grab; margin-left:-3px; transition:opacity .12s; }
.p1-row:hover .p1-grip { opacity:.55; }
/* Wrapping layout, so the drop marker is a vertical bar to the left/right. */
.p1-list .drop-before::before, .p1-list .drop-after::after { content:''; position:absolute; top:4px; bottom:4px; width:3px; border-radius:2px; background:var(--accent); z-index:3; }
.p1-list .drop-before::before { left:-5px; } .p1-list .drop-after::after { right:-5px; }
/* Show the title in full; only ellipsis if a single task would run past one line
   (the row is capped at the column width, so a very long one truncates there). */
.p1-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The task's life area, named in its own colour (same chip the notes use). */
.p1-area { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); flex:none; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 40%,transparent); padding:2px 9px; border-radius:999px; }
.p1-area .cd { width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; }
/* Drag to reorder Starred cards on Home. */
.home-sec-favs .fav-card { position:relative; }
.home-sec-favs .fav-card[draggable] { cursor:grab; }
.home-sec-favs .fav-card.dragging { opacity:.4; }
.home-sec-favs .drop-before::before, .home-sec-favs .drop-after::after { content:''; position:absolute; top:4px; bottom:4px; width:3px; border-radius:2px; background:var(--accent); z-index:3; }
.home-sec-favs .drop-before::before { left:-4px; } .home-sec-favs .drop-after::after { right:-4px; }
/* Drag to reorder the focus cards. */
.home-sec-focus .goal-card { position:relative; cursor:grab; }
.home-sec-focus .goal-card.dragging { opacity:.4; }
.home-sec-focus .drop-before::before, .home-sec-focus .drop-after::after { content:''; position:absolute; top:6px; bottom:6px; width:3px; border-radius:2px; background:var(--accent); z-index:3; }
.home-sec-focus .drop-before::before { left:-5px; } .home-sec-focus .drop-after::after { right:-5px; }
/* Home notifications - gentle, dismissible, only what's live today. */
.home-alerts { display:flex; flex-direction:column; gap:8px; margin:0 0 20px; }
.home-alert { display:flex; align-items:center; gap:11px; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; font-size:15px; color:var(--ink); }
.home-alert.ha-click { cursor:pointer; transition:border-color .12s; }
.home-alert.ha-click:hover { border-color:var(--accent); }
.ha-ic { flex:none; font-size:17px; }
.ha-t { flex:1; min-width:0; } .ha-t b { font-weight:650; }
.ha-x { flex:none; border:0; background:none; color:var(--ink-3); font-size:20px; line-height:1; cursor:pointer; padding:2px 5px; border-radius:6px; }
.ha-x:hover { color:var(--ink); background:var(--paper); }
/* Home: the day's teaching, dismissible. */
.home-quote { position:relative; margin:0 0 22px; padding:20px 44px 20px 22px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:14px; }
.home-quote blockquote { margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:22px; line-height:1.45; color:var(--ink); }
.home-quote figcaption { margin-top:8px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.home-quote-x { position:absolute; top:10px; right:12px; border:0; background:none; color:var(--ink-3); font-size:22px; line-height:1; cursor:pointer; padding:4px; }
.home-quote-x:hover { color:var(--ink); }
/* The quick-add form slot. When empty it still counted as a flex item on mobile
   Home, adding a phantom 26px gap below whatever sat above it (the I Ching card got
   more space underneath than over it). Hidden while empty; it reappears with the
   add form, which carries its own margin. */
#qt-wrap:empty { display:none; }
/* The pinned spirit card, on Home and Reflect: your last draw, tap to draw again. */
.spirit-pin { display:flex; align-items:center; gap:16px; width:100%; text-align:left; margin:0 0 22px; padding:16px 46px 16px 20px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); position:relative; transition:border-color .12s, transform .12s, box-shadow .12s; }
.spirit-pin:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 8px 22px -12px rgba(0,0,0,.32); }
.spirit-pin .sp-sym { font-size:34px; line-height:1; flex:none; }
.spirit-pin .sp-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.spirit-pin .sp-name { font-family:'Cormorant Garamond',Georgia,serif; font-size:23px; font-style:italic; color:var(--ink); line-height:1.1; }
.spirit-pin .sp-msg { font-size:14.5px; color:var(--ink-2); line-height:1.4; }
.spirit-pin .sp-tag { position:absolute; top:13px; right:15px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
/* Dismiss (x) sits under the tag, inside the pin's right-hand padding. */
.spirit-pin-wrap { position:relative; margin:0 0 22px; }
.spirit-pin-wrap .spirit-pin { margin-bottom:0; }
.sp-x { position:absolute; bottom:10px; right:12px; width:26px; height:26px; border:none; background:none; color:var(--ink-3); font-size:18px; line-height:1; border-radius:8px; cursor:pointer; z-index:2; }
.sp-x:hover { background:var(--surface-2); color:var(--ink); }
/* Pinned reflective readings (I Ching, horoscope) - same shape as the spirit
   card pin, so Well-being and Home read as one shelf of things to reopen. */
.wb-pin-wrap { position:relative; margin:0 0 22px; }
.wb-pin { display:flex; align-items:center; gap:16px; width:100%; text-align:left; padding:16px 46px 16px 20px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); position:relative; cursor:pointer; transition:border-color .12s, transform .12s, box-shadow .12s; }
.wb-pin:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 8px 22px -12px rgba(0,0,0,.32); }
.wb-pin-sym { font-size:34px; line-height:1; flex:none; color:var(--accent); }
.wb-pin-cn { font-size:30px; color:var(--ink); font-weight:500; }
.wb-pin-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.wb-pin-name { font-family:'Cormorant Garamond',Georgia,serif; font-size:23px; font-style:italic; color:var(--ink); line-height:1.1; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.wb-pin-tagi { font-family:system-ui,sans-serif; font-style:normal; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:999px; padding:1px 7px; }
.wb-pin-msg { font-size:14.5px; color:var(--ink-2); line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.wb-pin-kind { position:absolute; top:13px; right:15px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
/* Mobile home spacing. The 26px flex gap between sections already separates them;
   these per-item bottom margins used to stack on top of it, so the quote and the
   well-being (spirit / I Ching / horoscope) cards floated in ~48px of space. Trim
   the margins so the gaps read ~34px - a little less air, card size/padding
   unchanged. Also pull the date row up under the greeting (kill the head's bottom
   margin and lift the action bar) so "Thursday 1st October" sits close to "Bom
   dia", with just the 14px action-bar gap before the four cards. */
@media (max-width:820px) {
  .spirit-pin-wrap, .wb-pin-wrap { margin-bottom:8px; }
  .home-quote { margin-bottom:8px; }
  /* .home-prefixed so these beat the base .home-head / .home-actionbar rules that
     sit lower in the file (equal specificity would otherwise lose on source order). */
  .home .home-head { margin-bottom:0; }
  /* row-gap sets the space under the date / temp / time before the four cards wrap
     to their own row - a touch more than the inherited 14px. */
  .home .home-actionbar { margin-top:-14px; margin-bottom:10px; row-gap:20px; }
}
.wb-pin-x { position:absolute; bottom:10px; right:12px; width:26px; height:26px; border:none; background:none; color:var(--ink-3); font-size:18px; line-height:1; border-radius:8px; cursor:pointer; z-index:2; }
.wb-pin-x:hover { background:var(--surface-2); color:var(--ink); }
/* Collapsible section header (chevron toggles hide/show). */
.home-sec-toggle { cursor:pointer; display:flex; align-items:center; gap:7px; user-select:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.home-sec-toggle .hs-chev { color:var(--ink-3); font-size:12px; }
.home-sec-toggle:hover .hs-chev { color:var(--accent); }
/* Pomodoro focus timer - quiet by default, comes alive when running. */
.pomo { display:flex; flex-direction:column; align-items:center; gap:12px; padding:6px 0 2px; }
.pomo-time { font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:44px; font-weight:600; letter-spacing:.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
.pomo.running .pomo-time { color:var(--accent); }
.pomo-modes { display:inline-flex; gap:4px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:3px; }
.pomo-mode { padding:5px 14px; border-radius:999px; font-size:13.5px; color:var(--ink-3); }
.pomo-mode.on { background:var(--card); color:var(--ink); font-weight:600; box-shadow:var(--shadow-sm); }
.pomo-ctrls { display:flex; gap:8px; width:100%; }
.pomo-ctrls .add-btn { flex:1; }
.pomo-reset { flex:none; padding:0 14px; font-size:17px; }
.pomo-mini { margin-left:auto; font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:14px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.pomo-focus { display:flex; flex-direction:column; gap:7px; width:100%; margin-top:2px; }
.pomo-focus-l { font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.pomo-cats { display:flex; gap:5px; }
.pomo-cat { flex:1; min-width:0; padding:7px 6px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:12.5px; }
.pomo-cat:hover { border-color:var(--line-2); color:var(--ink); }
.pomo-cat.on { border-color:var(--accent); color:var(--accent); background:var(--paper); font-weight:600; }
.pomo-on { font-size:13px; color:var(--ink-2); } .pomo-on b { color:var(--ink); }
.pomo-tot { color:var(--accent); font-weight:500; }
.pomo-today { width:100%; text-align:center; font-size:12.5px; color:var(--ink-3); margin-top:6px; padding-top:8px; border-top:1px solid var(--line); }
/* ── Toolbox: Focus, Timer and Daily Practices, all shown, each collapsible ── */
.tbx-tools { display:flex; flex-direction:column; gap:12px; }
/* On the Toolbox page, pack the tools into columns so at least two sit per row. */
.tbx-tools.tbx-page { display:block; column-width:330px; column-gap:16px; }
.tbx-page .tbx-tool { break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 16px; display:inline-block; width:100%; vertical-align:top; }
.tbx-tool { border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.tbx-tool-h { display:flex; align-items:center; gap:9px; padding:12px 15px; cursor:pointer; font-size:15px; color:var(--ink); font-weight:500; user-select:none; }
.tbx-tool-h:hover { background:var(--paper-2); }
.tbx-tool-h .hs-chev { color:var(--ink-3); font-size:11px; }
.tbx-ic { font-size:17px; line-height:1; }
.tbx-tt { flex:1; }
.tbx-run { font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:13px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.tbx-tool-body { padding:4px 16px 18px; }
.tbx-tool-body.tbx-focus, .tbx-tool-body.tbx-timer, .tbx-tool-body.tbx-med { max-width:none; }
/* Two-column tool layout: the tool itself on the left, its past-sessions
   history (and, for meditation, today's note) on the right. Stacks on mobile. */
.tbx-cols { display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start; }
.tbx-main { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; align-items:center; }
.tbx-side { flex:1 1 240px; min-width:0; max-width:320px; display:flex; flex-direction:column; gap:18px; }
@media (max-width:640px) { .tbx-cols { gap:20px; } .tbx-side { flex-basis:100%; max-width:none; } }
/* Past-sessions list. Quiet rows: when · duration · what it was for. */
.sess-hist { border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--card) 60%,transparent); padding:13px 15px 15px; }
.sess-hist-h { font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; margin-bottom:10px; }
.sess-rows { display:flex; flex-direction:column; }
.sess-row { display:flex; align-items:baseline; gap:9px; padding:7px 0; border-top:1px solid var(--line); font-size:13.5px; }
.sess-row:first-child { border-top:0; }
.sess-when { color:var(--ink-3); white-space:nowrap; }
.sess-dur { color:var(--ink-2); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.sess-tag { margin-left:auto; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); font-size:12.5px; padding:2px 8px; border-radius:999px; background:color-mix(in srgb,var(--ink) 5%,transparent); }
.sess-tag.has-area { background:hsl(var(--h,220) 60% 52% / .13); color:hsl(var(--h,220) 42% 38%); border-left:2px solid hsl(var(--h,220) 60% 52%); }
.sess-empty { color:var(--ink-3); font-size:13px; line-height:1.5; padding:4px 0 2px; }
/* Meditation: a plain place to jot a few words about today's sit. */
.med-notes-box { border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--card) 60%,transparent); padding:13px 15px 15px; }
.med-notes-ta { width:100%; max-width:none; min-height:88px; resize:vertical; margin-top:2px; font-size:14px; line-height:1.55; }
/* Timer life-area picker. */
.tmr-area-l { display:flex; flex-direction:column; gap:5px; margin:12px 0 2px; width:100%; max-width:280px; }
.tmr-area-l > span { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; }
/* Feature-box toolbox: equal cards in a row, tap one to open its tool below. */
.tbx-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; margin:2px 0 4px; }
.tbx-card { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; padding:22px 16px 20px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; transition:border-color .14s, transform .1s, box-shadow .14s; }
.tbx-card:hover { border-color:var(--line-2); transform:translateY(-2px); box-shadow:0 16px 34px -20px rgba(0,0,0,.5); }
.tbx-card.on { border-color:var(--accent); box-shadow:0 12px 30px -18px color-mix(in srgb,var(--accent) 60%,transparent); }
.tbx-card-ic { font-size:30px; line-height:1; }
.tbx-card.on .tbx-card-ic { filter:none; }
.tbx-card-t { font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.tbx-card-d { font-size:12.5px; color:var(--ink-3); line-height:1.4; max-width:20ch; }
.tbx-card.running { border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); }
.tbx-card .tbx-run { position:absolute; top:10px; right:12px; }
.tbx-panel { margin-top:18px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow); padding:18px; max-width:760px; }
.tbx-panel-h { display:flex; align-items:center; gap:9px; font-family:'Cormorant Garamond',Georgia,serif; font-size:20px; font-weight:600; color:var(--ink); margin-bottom:12px; }
.tbx-hint { margin:22px 2px; color:var(--ink-3); font-size:14.5px; }
/* Meditation timer - calm, with a slowly breathing orb behind the time. */
.med { display:flex; flex-direction:column; align-items:center; gap:16px; }
.med-stage { position:relative; width:180px; height:180px; display:grid; place-items:center; margin:4px 0 2px; }
.med-orb { position:absolute; inset:14px; border-radius:50%; background:radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--accent) 26%,transparent), color-mix(in srgb,var(--accent) 8%,transparent) 62%, transparent 72%); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); }
.med.running .med-orb { animation:med-breathe 10s ease-in-out infinite; }
@keyframes med-breathe { 0%,100% { transform:scale(.86); opacity:.7; } 50% { transform:scale(1.04); opacity:1; } }
.med-time { position:relative; font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:40px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
.med.running .med-time { color:var(--accent); }
.med-presets { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; align-items:center; }
.med-preset { padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:14px; font-weight:600; cursor:pointer; }
.med-preset:hover { border-color:var(--line-2); color:var(--ink); }
.med-preset.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.med-custom { display:inline-flex; align-items:center; gap:6px; }
.med-cnum { width:64px; max-width:64px; text-align:center; padding:7px 8px; font-size:14px; }
.med-cset { padding:6px 12px; font-size:13px; }
.med-interval { display:flex; flex-direction:column; align-items:center; gap:8px; }
.med-int-l { font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; }
.med-int-opts { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.med-int { padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:13px; cursor:pointer; }
.med-int:hover { border-color:var(--line-2); color:var(--ink); }
.med-int.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.med-ctrls { display:flex; align-items:center; gap:10px; width:100%; max-width:280px; }
.med-go { flex:1; }
.med-note { font-size:12.5px; color:var(--ink-3); text-align:center; line-height:1.5; max-width:320px; }
.med-opts { display:flex; flex-direction:column; gap:16px; width:100%; max-width:360px; }
.med-opt { display:flex; flex-direction:column; align-items:stretch; gap:9px; }
.med-opt-l { font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600; flex:none; }
.med-opt-vals { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-start; }
.med-shimmer { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.med-chip { padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:13px; cursor:pointer; }
.med-chip:hover { border-color:var(--line-2); color:var(--ink); }
.med-chip.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.med-num { width:56px; max-width:56px; text-align:center; padding:6px 6px; font-size:13.5px; }
.med-shimmer { cursor:pointer; }
.med-shimmer input { width:19px; height:19px; accent-color:var(--accent); flex:none; }
@media (prefers-reduced-motion:reduce) { .med.running .med-orb { animation:none; } }
/* plain Timer */
.tmr { display:flex; flex-direction:column; align-items:center; gap:12px; }
.tmr-time { font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:44px; font-weight:600; letter-spacing:.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
.tmr.running .tmr-time { color:var(--accent); }
.tmr-label { width:100%; text-align:center; }
.tmr-quick { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.tmr-q { padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:13.5px; }
.tmr-q:hover { border-color:var(--line-2); color:var(--ink); }
.tmr-q.on { border-color:var(--accent); color:var(--accent); background:var(--paper); font-weight:600; }
/* Custom exact length: minutes : seconds + Set. */
.tmr-custom { display:flex; align-items:center; gap:6px; }
.tmr-custom-l { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); margin-right:2px; }
.tmr-cnum { width:56px; text-align:center; -moz-appearance:textfield; appearance:textfield; }
.tmr-cnum::-webkit-outer-spin-button, .tmr-cnum::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.tmr-colon { color:var(--ink-3); font-weight:600; }
.tmr-set { padding:6px 14px; border:1px solid var(--line-2); border-radius:9px; font-size:14px; }
.tmr-set:hover { border-color:var(--accent); color:var(--accent); }
.tmr-ctrls { display:flex; gap:8px; width:100%; }
.tmr-ctrls .add-btn { flex:1; }
/* habit Tracker */
.trk { display:flex; flex-direction:column; gap:8px; }
.trk-hrow { display:flex; align-items:center; gap:12px; padding:8px 4px; border-bottom:1px solid var(--line); }
.trk-hrow:last-of-type { border-bottom:0; }
.trk-tick { flex:none; width:30px; height:30px; border-radius:9px; border:1.5px solid var(--line-2); color:transparent; font-size:16px; line-height:1; transition:all .12s; }
.trk-tick.on { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.trk-hname { flex:1; min-width:0; font-size:15.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trk-week { display:inline-flex; gap:2px; flex:none; }
/* Fixed-width day columns so every row lines up, and 'Today' can be labelled and
   highlighted as a whole column (header + each row's cell share the tint). */
.trk-daycell { display:inline-flex; align-items:center; justify-content:center; width:38px; padding:4px 0; border-radius:8px; }
.trk-daycell.today-col { background:color-mix(in srgb,var(--accent) 13%,transparent); }
.trk-daycell.yest-col { background:color-mix(in srgb,var(--accent) 6%,transparent); }
.trk-dayhdr { display:flex; justify-content:flex-end; margin:0 0 7px; padding-right:2px; }
.trk-dayhdr .trk-week { padding:0; }
.trk-dh { font-size:10px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:color-mix(in srgb,var(--accent) 78%,var(--ink-3)); line-height:1; }
.trk-dh.is-today { color:var(--accent); font-weight:800; }
.trk-dh.is-yest { color:var(--accent); font-weight:700; }
.trk-dot { width:19px; height:19px; border-radius:50%; border:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent); background:color-mix(in srgb,var(--ink) 6%,transparent); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.trk-dot i { font-size:9.5px; font-weight:600; font-style:normal; color:var(--accent); }
.trk-dot.on { background:color-mix(in srgb,var(--accent) 82%,#fff); border-color:var(--accent); } .trk-dot.on i { color:#fff; }
/* Avoid habits: a slip is a lapse, shown in red; the flame counts clean days. */
.trk-dot.slip { background:#c4412e; border-color:#c4412e; } .trk-dot.slip i { color:#fff; }
.t2-tick-slip.on { background:#c4412e; border-color:#c4412e; color:#fff; }
.t2-avoidtag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#c4412e; background:color-mix(in srgb,#c4412e 13%,transparent); padding:1px 7px; border-radius:999px; margin-left:6px; vertical-align:middle; }
/* Today is the right-most dot and the anchor: a solid accent ring, a hair larger,
   its label in bold accent. Yesterday (second from the right) gets a lighter ring
   so the run of days plainly reads right-to-left: today, yesterday, then earlier. */
/* Un-ticked today: a plain EMPTY circle, just outlined in the accent so it reads
   as today (the column band + Today header do the rest). It fills solid only when
   ticked. */
.trk-dot.today { border-color:var(--accent); background:none; }
.trk-dot.today i { color:var(--accent); font-weight:700; }
.trk-dot.today.on { background:var(--accent); border-color:var(--accent); }
.trk-dot.today.on i { color:#fff; }
.trk-dot.today.slip { background:#c4412e; box-shadow:0 0 0 2.5px #c4412e; }
.trk-dot.today.slip i { color:#fff; }
/* Streak flame now sits to the LEFT of the day dots; reserve a little space so the
   dot columns still line up whether or not a row has a streak. */
.trk-streak { min-width:30px; text-align:right; }
.trk-streak { flex:none; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.trk-del { flex:none; color:var(--ink-3); font-size:18px; padding:0 4px; } .trk-del:hover { color:var(--danger,#c0392b); }
.trk-add { display:flex; gap:8px; margin-top:10px; }
.trk-add .sel { flex:1; }
/* Daily Practices: grouped by lane (life-area category). */
.prc { display:flex; flex-direction:column; gap:14px; }
.prc-group { display:flex; flex-direction:column; }
.prc-lane { display:flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; margin-bottom:6px; }
.prc-lane-dot { width:9px; height:9px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); flex:none; }
.prc-row { display:flex; align-items:center; gap:12px; padding:7px 2px; border-bottom:1px solid var(--line); }
.prc-row:last-child { border-bottom:0; }
.prc-name { flex:1; min-width:0; font-size:15.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A whole practice row is clickable to open its guide card; the name reads in the
   highlight colour so it's clearly the thing to tap. (Robin, 2026-09-27.) */
.prc-row-click, .pm-row-click { cursor:pointer; border-radius:8px; transition:background .12s; }
.prc-row-click:hover, .pm-row-click:hover { background:var(--paper-2); }
.prc-name-link, .pm-name-link { color:var(--accent); }
.prc-add { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.prc-add .prc-lane-sel { flex:0 0 auto; max-width:150px; }
.prc-add input { flex:1; min-width:120px; }
/* Management rows: schedule summary, badges, edit button, and the New button. */
.prc-name .prc-sched { display:block; font-size:12.5px; color:var(--ink-3); font-weight:400; margin-top:2px; }
.prc-badge { display:inline-block; margin-left:7px; font-size:11px; vertical-align:middle; }
.prc-badge.dim { color:var(--ink-3); background:var(--paper-2); border-radius:5px; padding:1px 6px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.prc-edit { flex:none; width:30px; height:30px; border-radius:8px; color:var(--ink-3); font-size:15px; }
.prc-edit:hover { color:var(--accent); background:var(--paper-2); }
.prc-newbtn { margin-top:14px; }
/* ── practice editor modal ── */
.pe-bg { position:fixed; inset:0; z-index:240; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.pe-panel { position:fixed; z-index:241; left:50%; top:50%; transform:translate(-50%,-50%); width:min(480px,94vw); max-height:90vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line-2); border-radius:18px; box-shadow:0 30px 80px -24px rgba(0,0,0,.6); }
.pe-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 6px; }
.pe-head h2 { font-size:21px; margin:0; }
.pe-x { width:32px; height:32px; border-radius:50%; color:var(--ink-3); font-size:22px; line-height:1; }
.pe-x:hover { background:var(--paper-2); color:var(--accent); }
.pe-body { padding:8px 20px 12px; display:flex; flex-direction:column; gap:22px; }
/* The editor reads as clear sections: a highlight heading, then its fields. */
.pe-sec { display:flex; flex-direction:column; gap:12px; }
.pe-sec-h { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); padding-bottom:6px; border-bottom:1px solid var(--line); }
.pe-sec-note { font-size:13px; color:var(--ink-3); line-height:1.45; margin-top:-4px; }
.pe-f { display:flex; flex-direction:column; gap:6px; }
.pe-f > span { font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600; }
.pe-f .sel, .pe-note { width:100%; max-width:none; }
.pe-note { resize:vertical; min-height:64px; line-height:1.5; font-family:inherit; }
.pe-tog { display:flex; align-items:center; gap:11px; cursor:pointer; font-size:15px; color:var(--ink-2); }
.pe-tog input { width:20px; height:20px; accent-color:var(--accent); flex:none; cursor:pointer; }
.pe-tog b { color:var(--ink); font-weight:600; }
.pe-days { display:flex; gap:6px; flex-wrap:wrap; }
.pe-day { width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2); background:var(--bg-2,var(--paper-2)); color:var(--ink-2); font-weight:600; font-size:14px; cursor:pointer; }
.pe-day.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.pe-two { display:flex; gap:14px; flex-wrap:wrap; }
.pe-inline { flex:1; min-width:130px; }
.pe-inline > span { }
.pe-durwrap { display:flex; align-items:center; gap:7px; color:var(--ink-3); font-size:14px; }
.pe-num { width:84px; }
/* "Takes time" off hides the timing block. */
.pe-panel:not(.timed-on) .pe-timing { display:none; }
/* Cadence belongs to "Track it": show it only when tracking, as an inset sub-row. */
.pe-panel:not(.tracked-on) .pe-aim { display:none; }
.pe-aim, .pe-timing { background:color-mix(in srgb, var(--accent) 4%, transparent); }
.pe-aim .pe-mini-l, .pe-timing .pe-mini-l { padding-left:6px; }
/* Practice editor: connected notes / contacts / links, the usual attach set. */
.pe-attach { display:flex; flex-direction:column; gap:16px; }
.pe-attach-sec .sub-h { margin-bottom:7px; }
.pe-attach-sec .ce-linked { margin:6px 0; }
.pe-attach-sec .nt-new { margin-top:4px; }
/* Small round avatar inside a connected-contact chip (note sidebar + practices). */
.ce-av { width:22px; height:22px; font-size:10px; flex:none; }
.nt-result .ce-av { margin-right:7px; }
/* Compact "mini dashboard" for the rhythm settings (takes time / length / track /
   aim / video) - tight rows in one card, instead of a stack of clunky fields. */
.pe-mini { border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
.pe-mini-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 13px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-2); min-height:46px; box-sizing:border-box; }
.pe-mini-row:first-child { border-top:0; }
.pe-mini-tog { cursor:pointer; }
.pe-mini-t { display:flex; flex-direction:column; gap:1px; min-width:0; }
.pe-mini-t b { color:var(--ink); font-weight:600; font-size:14.5px; }
.pe-mini-t small { color:var(--ink-3); font-size:12px; }
.pe-mini-tog input { width:19px; height:19px; accent-color:var(--accent); flex:none; cursor:pointer; }
.pe-mini-l { color:var(--ink-3); font-size:13px; font-weight:600; letter-spacing:.02em; flex:none; }
.pe-mini-sel { max-width:180px; padding:6px 28px 6px 11px; font-size:13.5px; }
.pe-mini-in { flex:1; min-width:0; max-width:210px; padding:6px 11px; font-size:13.5px; }
.pe-mini .pe-num { width:60px; max-width:60px; padding:6px 8px; text-align:center; }
.pe-mini .pe-durwrap { font-size:13px; gap:6px; }
.pe-foot { display:flex; align-items:center; gap:10px; padding:6px 20px 20px; }
.pe-foot .add-btn.wide { margin-left:auto; }
.pe-del { color:var(--ink-3); } .pe-del:hover { color:var(--accent); }

/* ── native Today (day canvas + practices + tasks + habits) ── */
.t2-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.trk-newtop { margin-left:auto; align-self:center; }
.t2-dsmall { font-family:inherit; font-size:0.62em; font-weight:500; color:var(--ink-3); margin-left:6px; }
.t2-nav { margin-left:auto; display:flex; align-items:center; gap:8px; }
.t2-arw { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:19px; line-height:1; }
.t2-arw:hover { border-color:var(--accent); color:var(--accent); }
.t2-navbtn { padding:7px 13px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:14px; font-weight:600; }
.t2-navbtn:hover { border-color:var(--accent); color:var(--accent); }
.t2-grid { display:grid; grid-template-columns:250px minmax(0,1fr) 264px; gap:18px; align-items:stretch; margin-top:6px; }
.t2-col { min-width:0; display:flex; flex-direction:column; }
/* The scroll wrapper fills the (stretched) column so its sticky header stays put
   the whole way down - even after you've scrolled past all the tasks. */
.t2-col .t2-colscroll { flex:1 1 auto; }
.t2-daysub { margin-left:auto; font-size:12px; color:var(--ink-3); }
.t2-dayhead .t2-daysub { display:block; margin:3px 0 0; }
.t2-dayhead { margin-bottom:9px; }
.t2-colh { display:flex; align-items:center; gap:10px; margin:0; }
.t2-colh h2 { font-family:'Cormorant Garamond',serif; font-size:23px; font-weight:600; margin:0; line-height:1.1; }
.t2-colnew { margin-left:auto; width:30px; height:30px; border-radius:8px; color:var(--ink-3); font-size:14px; }
.t2-colnew:hover { color:var(--accent); background:var(--paper-2); }
/* Sticky one-row column header (Tasks / Rhythms), with the list scrolling under. */
/* The columns scroll with the PAGE (no inner scrollbox), so each column's header
   row can pin just under the sticky breadcrumb + Today/Tracker tabs. */
.t2-scroll.t2-colscroll { padding-top:0; max-height:none; overflow:visible; }
.t2-stickytop { position:sticky; top:calc(44px + var(--t2-crumbh,42px) + var(--t2-tabsh,52px)); z-index:6; background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(8px); padding:6px 2px 9px; margin:0 0 4px; border-bottom:1px solid var(--line); }
@media (max-width:820px){ .t2-stickytop { top:calc(var(--navh,56px) + var(--t2-crumbh,42px) + var(--t2-tabsh,52px)); } }
.t2-filterbtn { margin-left:auto; flex:none; position:relative; width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-3); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:color .12s,border-color .12s,background .12s; }
.t2-filterbtn:hover { color:var(--ink); border-color:var(--line-2); }
.t2-filterbtn.on { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.t2-filterbtn.open { background:color-mix(in srgb,var(--accent) 10%,var(--card)); color:var(--accent); border-color:var(--accent); }
.t2-fdot { position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:var(--accent); border:1.5px solid var(--paper); }
.t2-filterbar { display:flex; flex-direction:column; gap:8px; margin-top:9px; }
.t2-list { display:flex; flex-direction:column; gap:6px; }
.t2-emptycol { color:var(--ink-3); font-size:14px; padding:14px 4px; text-align:center; }
.t2 .cd, .t2-pglabel .cd, .t2-trow .cd { width:9px; height:9px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); flex:none; }
/* practices column */
.t2-pgroup { margin-bottom:14px; }
.t2-pglabel { display:flex; align-items:center; gap:7px; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; margin:0 2px 6px; }
.t2-pglabel .cd { width:9px; height:9px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); }
.t2-prow { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:10px; background:var(--card); border:1px solid var(--line); border-left:3px solid hsl(var(--h,220) 55% 55%); margin-bottom:6px; cursor:pointer; transition:border-color .12s; }
.t2-prow:hover { border-color:var(--accent); }
.t2-prow .p-tag { flex:none; }
.t2-pbody { flex:1; min-width:0; }
.t2-pname { display:block; font-size:14.5px; color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t2-psched { display:block; font-size:12px; color:var(--ink-3); margin-top:1px; }
.t2-streak { font-size:12.5px; color:var(--ink-3); flex:none; }
.t2-add { flex:none; width:28px; height:28px; border-radius:8px; border:1px solid var(--line-2); color:var(--ink-2); font-size:16px; line-height:1; }
.t2-add:hover { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.t2-vid-i { font-size:12px; }
/* day canvas */
.t2-allday { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:9px; padding:2px 2px 8px; border-bottom:1px solid var(--line); }
.t2-adchip { font-size:13px; padding:5px 11px; border-radius:8px; background:color-mix(in srgb,var(--accent) 12%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); color:var(--ink); }
.t2-tray { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:10px; padding:9px 11px; background:var(--paper-2); border-radius:10px; }
.t2-tray-h { font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600; }
.t2-canvas { position:relative; border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; }
.t2-hour { position:absolute; left:0; right:0; border-top:1px solid var(--line); }
.t2-hlab { position:absolute; left:8px; top:-9px; font-size:11.5px; color:var(--ink-4,var(--ink-3)); background:var(--card); padding:0 4px; font-variant-numeric:tabular-nums; }
.t2-now { position:absolute; left:52px; right:8px; height:0; border-top:2px solid var(--accent); z-index:4; }
.t2-now-dot { position:absolute; left:-6px; top:-5px; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.t2-block { position:absolute; left:52px; right:8px; border-radius:9px; padding:5px 9px; overflow:hidden; background:var(--paper-2); border:1px solid var(--line-2); border-left:3px solid hsl(var(--h,220) 60% 58%); box-shadow:0 3px 10px -6px rgba(0,0,0,.3); display:flex; flex-direction:column; justify-content:center; }
.t2-brow { display:flex; align-items:center; gap:8px; }
.t2-btime { font-size:11.5px; color:var(--ink-3); flex:none; font-variant-numeric:tabular-nums; }
.t2-btitle { font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.t2-event { background:color-mix(in srgb,var(--accent) 6%,var(--card)); border-left-color:var(--accent); }
/* Read-only feed events (holidays, fixtures): quiet, dashed, no controls. */
.t2-feed { background:color-mix(in srgb,var(--ink-3) 8%,var(--card)); border:1px dashed var(--line-2); border-left:3px dashed var(--ink-3); cursor:default; box-shadow:none; }
.t2-feed .t2-btitle { font-weight:500; color:var(--ink-2); }
.t2-slot.done .t2-btitle { color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--ink-4,var(--ink-3)); }
.t2-slot.done { opacity:.68; }
.t2-suggest { background:transparent; border-style:dashed; border-left-style:solid; cursor:pointer; opacity:.85; }
.t2-suggest:hover { opacity:1; background:color-mix(in srgb,hsl(var(--h,220) 60% 55%) 8%,transparent); }
.t2-float { position:static; display:inline-flex; }
/* Placed blocks: click to open; drag the top/bottom edge to resize. Handles are
   inset from the sides so they clear the tick and × buttons. */
.t2-slot { cursor:pointer; }
.t2-rz { position:absolute; left:28px; right:28px; height:9px; cursor:ns-resize; z-index:2; touch-action:none; }
.t2-rz-top { top:0; } .t2-rz-bot { bottom:0; }
.t2-rz::after { content:''; position:absolute; left:50%; transform:translateX(-50%); width:26px; height:3px; border-radius:2px; background:transparent; transition:background .12s; }
.t2-rz-top::after { top:2px; } .t2-rz-bot::after { bottom:2px; }
.t2-slot:hover .t2-rz::after { background:color-mix(in srgb,var(--ink-3) 55%,transparent); }
.t2-evedit:hover .t2-rz::after { background:color-mix(in srgb,var(--ink-3) 55%,transparent); }
.t2-evedit { cursor:pointer; }
.t2-evedit[data-t2-drag] { cursor:grab; }
.t2-evedit .t2-btitle { cursor:pointer; }
.t2-tick { flex:none; width:24px; height:24px; border-radius:7px; border:1.5px solid var(--line-2); background:transparent; color:transparent; font-size:13px; font-weight:700; line-height:1; display:grid; place-items:center; }
.t2-tick.on { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.t2-tick.ghost { border-style:dashed; color:var(--ink-3); }
.t2-x { flex:none; width:22px; height:22px; border-radius:6px; color:var(--ink-4,var(--ink-3)); font-size:16px; line-height:1; opacity:0; }
.t2-block:hover .t2-x { opacity:.7; }
.t2-x:hover { opacity:1; color:var(--accent); }
.t2-vid { flex:none; cursor:pointer; font-size:13px; }
.t2-bell { flex:none; width:22px; height:22px; border-radius:6px; font-size:13px; line-height:1; opacity:0; cursor:pointer; background:transparent; border:0; }
.t2-block:hover .t2-bell { opacity:.65; }
.t2-bell:hover { opacity:1; }
.t2-bell.on { opacity:1; }
.t2-join { flex:none; text-decoration:none; }
/* An event that names a practice: a one-tap chip to count it, no retyping. */
.t2-countbtn { flex:none; border:1px solid hsl(var(--h,220) 55% 55% / .5); background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent); border-radius:999px; font-size:11.5px; font-weight:600; padding:2px 9px; line-height:1.4; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.t2-countbtn:hover { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
/* Once counted, the event wears its practice's colour and gains a tick. */
.t2-evlink { background:color-mix(in srgb,hsl(var(--h,220) 60% 55%) 8%,var(--card)); border-left-color:hsl(var(--h,220) 60% 58%); }
.t2-evlink.done { opacity:.72; }
.t2-evlink.done .t2-btitle { color:var(--ink-3); }
.t2-evtag { font-size:10.5px; font-weight:600; letter-spacing:.02em; color:hsl(var(--h,220) 45% 52%); margin:1px 0 0 32px; text-transform:uppercase; }
/* tasks column */
.t2-tfilter { width:100%; margin-bottom:9px; font-size:13.5px; }
.t2-tlist { display:flex; flex-direction:column; gap:6px; }
.t2-trow { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:10px; background:var(--card); border:1px solid var(--line); border-left:3px solid hsl(var(--h,220) 55% 55%); }
.t2-ttitle { flex:1; min-width:0; font-size:14px; color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* habits strip */
.t2-habits { margin-top:20px; background:var(--card); border:1px solid var(--line); border-top:2px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:14px; padding:15px 18px 17px; }
.t2-habh { display:flex; align-items:baseline; gap:11px; margin-bottom:12px; }
.t2-habh h2 { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; margin:0; }
.t2-tocnt { font-size:11px; font-weight:700; color:#c4412e; color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); padding:2px 8px; border-radius:6px; }
.t2-alldone { font-size:12.5px; color:var(--done,#4a7a52); font-weight:600; }
.t2-habnote { margin-left:auto; color:var(--ink-3); font-size:12.5px; }
.t2-habgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.t2-habit { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:var(--paper-2); border:1px solid var(--line); }
.t2-hname { flex:1; min-width:0; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t2-habit.done .t2-hname { color:var(--ink-3); }
/* ── Tracker dashboard (keep your life alive, by area) ── */
.t2-sub { margin:-2px 0 14px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:var(--ink-3); }
.trk-intro { margin:2px 0 12px; }
/* A prominent jump to the Practices page, up near the top of the Tracker. */
.trk-tophead { display:flex; justify-content:flex-end; margin:0 0 14px; }
.trk-manage-top { display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:11px; border:1px solid var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--card)); color:var(--accent); font-size:14.5px; font-weight:600; cursor:pointer; transition:background .12s, border-color .12s; }
.trk-manage-top:hover { background:color-mix(in srgb,var(--accent) 16%,var(--card)); }
/* Week stepper for the Tracker dot rows - move back/forward through past weeks. */
.trk-nav { display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.trk-arw { width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:20px; line-height:1; touch-action:manipulation; }
.trk-arw:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.trk-arw:disabled { opacity:.32; cursor:default; }
.trk-range { font-size:15px; font-weight:600; color:var(--ink-2); min-width:132px; text-align:center; font-variant-numeric:tabular-nums; }
.trk-nav-now { margin-left:2px; padding:8px 14px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:14px; font-weight:600; touch-action:manipulation; }
.trk-nav-now:hover { border-color:var(--accent); color:var(--accent); }
.trk-newbtn { margin-top:16px; }
/* Practices page header: quick actions beside the title - a clear jump to the
   Tracker and a New-practice button right at the top, not just the page foot. */
.prac-head-act { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.prac-new-top { margin-top:0; width:auto; }
.prac-track-link { display:inline-flex; align-items:center; gap:6px; padding:10px 15px; border-radius:11px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); font-size:14.5px; font-weight:600; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.prac-track-link:hover { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
/* The tracker footer: add a practice, or jump to the full Practices settings. */
.trk-foot { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }
.trk-foot .trk-newbtn { margin-top:0; flex:1 1 200px; }
.trk-manage { flex:none; font-size:14px; }
/* A quiet "add a practice" row at the foot of each area card. */
.trk-addp { width:100%; margin-top:6px; padding:8px; border:1px dashed var(--line-2); border-radius:10px; background:transparent; color:var(--ink-3); font-size:13.5px; font-weight:600; cursor:pointer; }
.trk-addp:hover { border-color:var(--accent); color:var(--accent); }
/* Practices page: a clean editable row, opens the editor on tap. */
.pm-rows { display:flex; flex-direction:column; }
.pm-row { display:flex; align-items:center; gap:5px; width:100%; border-bottom:1px solid var(--line); }
.pm-row:last-child { border-bottom:0; }
.pm-grip { flex:none; cursor:grab; color:var(--ink-3); opacity:.62; font-size:15px; line-height:1; padding:6px 4px; touch-action:none; -webkit-user-select:none; user-select:none; }
.pm-grip:hover { opacity:1; color:var(--accent); }
.pm-row:hover .pm-grip { opacity:.85; }
.pm-grip:active { cursor:grabbing; }
.pm-open { flex:1; min-width:0; display:flex; align-items:center; gap:11px; padding:11px 2px; border:0; background:none; text-align:left; cursor:pointer; font:inherit; color:var(--ink); }
.pm-name { flex:1; min-width:0; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-len { flex:none; font-size:12.5px; color:var(--ink-3); }
.pm-edit { flex:none; font-size:15px; color:var(--ink-4,var(--ink-3)); }
.pm-open:hover .pm-name { color:var(--accent); }
.pm-open:hover .pm-edit { color:var(--accent); }
.pm-edit-btn { flex:none; background:none; border:0; cursor:pointer; font-size:15px; color:var(--ink-3); padding:8px 6px; border-radius:8px; }
.pm-edit-btn:hover { color:var(--accent); background:var(--paper-2); }
/* Tracker-grid practice name is a button that opens the practice's guide page. */
.prc-name-btn { background:none; border:0; font:inherit; text-align:left; cursor:pointer; padding:0; color:var(--ink); }
.prc-name-btn:hover { color:var(--accent); }
/* Practice guide page: embedded video, notes, aim, streak. */
.pc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pc-head-act { flex:none; }
.pc-meta { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 16px; }
.pc-chip { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-2); background:var(--paper-2); border-radius:999px; padding:4px 12px; }
.pc-chip.pc-area .cd { width:9px; height:9px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); display:inline-block; }
.pc-video { position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; margin:4px 0 18px; background:#000; box-shadow:var(--shadow); }
.pc-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.pc-dolink { max-width:340px; margin:4px 0 18px; }
.pc-tickrow { margin:0 0 20px; }
.pc-tick.on { background:var(--done); border-color:var(--done); }
.pc-sec { margin-top:20px; }
.pc-note { color:var(--ink); }
.pm-row.mdragging { position:relative; z-index:20; background:var(--card); border-radius:8px; box-shadow:0 12px 28px -14px rgba(0,0,0,.5); }
.pm-row.mdrop-top { box-shadow:0 -3px 0 -1px var(--accent); }
.pm-row.mdrop-bottom { box-shadow:0 3px 0 -1px var(--accent); }
/* Columns, not a stretch-grid, so each area card is only as tall as its own
   practices - a one-line area doesn't sit in a big empty square. */
.trk-dash { max-width:660px; }
/* A one-off legend so the dot run is self-explanatory: sample dots (yesterday +
   today marked) beside a plain-language key. */
.trk-runend { display:inline-flex; align-items:center; gap:8px; flex:none; }
/* The area's plain-English status: on track, and when to do something next. */
.trk-area-status { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:14.5px; }
.trk-area-status b { font-weight:600; }
.trk-s-ontrack b { color:#4f9673; }
.trk-s-due b, .trk-s-building b { color:#c2872f; }
.trk-s-slipping b { color:#bd7442; }
.trk-s-none b { color:var(--ink-3); }
.trk-prow .trk-week { flex:none; }
.trk-prow .trk-dot { width:17px; height:17px; }
.trk-area { background:var(--card); border:1px solid var(--line); border-left:3px solid hsl(var(--h,220) 55% 55%); border-radius:14px; padding:13px 15px 8px; box-shadow:var(--shadow); display:block; width:100%; margin:0 0 14px; }
.trk-area-h { display:flex; align-items:center; gap:9px; padding-bottom:9px; margin-bottom:6px; border-bottom:1px solid var(--line); flex-wrap:wrap; cursor:pointer; }
.trk-area-h .acw-chev { font-size:12px; color:var(--ink-3); flex:none; }
.trk-area-h .cd { width:11px; height:11px; border-radius:50%; background:hsl(var(--h,220) 55% 55%); flex:none; }
.trk-area-name { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; color:var(--ink); }
.trk-area-stat { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); }
.trk-cadsel { margin-left:auto; font-size:12.5px; padding:5px 28px 5px 10px; color:var(--ink-3); flex:none; max-width:180px; }
.trk-prow { display:flex; align-items:center; gap:11px; padding:9px 2px; border-bottom:1px solid var(--line); }
.trk-prow:last-child { border-bottom:0; }
/* Week dots + streak, grouped so mobile can drop the pair to a second line. */
.trk-hist { display:flex; align-items:center; gap:11px; flex:none; }
.trk-pname { flex:1; min-width:0; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trk-pname:has(.trk-rename:focus) { overflow:visible; white-space:normal; }
/* Merged Practices tool: drag grip, click-to-rename, and the ✎ details button. */
.trk-grip { flex:none; cursor:grab; color:var(--ink-3); opacity:.5; font-size:15px; line-height:1; padding:6px 2px; touch-action:none; -webkit-user-select:none; user-select:none; }
.trk-grip:hover { opacity:1; color:var(--accent); }
.trk-prow:hover .trk-grip { opacity:.8; }
.trk-grip:active { cursor:grabbing; }
.trk-rename { outline:none; border-radius:5px; padding:1px 4px; margin:0 -4px; cursor:text; }
.trk-rename:hover { background:color-mix(in srgb, var(--accent) 9%, transparent); }
.trk-rename:focus { background:var(--card); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent); }
.trk-editp { flex:none; background:none; border:0; cursor:pointer; color:var(--ink-3); font-size:14px; padding:4px 6px; border-radius:6px; opacity:.55; }
.trk-editp:hover { opacity:1; color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.trk-prow:hover .trk-editp { opacity:.85; }
.trk-prow.mdragging { background:var(--card); border-radius:9px; box-shadow:var(--shadow-1,0 6px 20px rgba(0,0,0,.12)); }
.trk-prow.mdrop-top { box-shadow:inset 0 2px 0 var(--accent); }
.trk-prow.mdrop-bottom { box-shadow:inset 0 -2px 0 var(--accent); }
.trk-cad { margin-left:8px; font-size:11.5px; color:var(--ink-3); font-weight:400; }
/* ▶ on a practice with a video/link: one tap to open it and get straight on. */
.trk-play { flex:none; width:30px; height:30px; border-radius:50%; border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); background:color-mix(in srgb,var(--accent) 10%,var(--card)); color:var(--accent); font-size:10.5px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; margin:0 6px 0 4px; padding-left:1px; touch-action:manipulation; }
.trk-play:hover { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.trk-status { display:inline-flex; align-items:center; gap:8px; flex:none; }
.trk-lab { font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.trk-dot2 { width:10px; height:10px; border-radius:50%; flex:none; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent); }
.trk-ontrack { background:#5aa17a; color:#5aa17a; }
.trk-due { background:#e0a54e; color:#e0a54e; }
.trk-building { background:#e0a54e; color:#e0a54e; }
.trk-slipping { background:#cf8a5a; color:#cf8a5a; }
.trk-none { background:var(--line-2); color:var(--line-2); }
@media (max-width:560px){ .trk-dash { column-width:auto; column-count:1; } .trk-cadsel { margin-left:0; flex-basis:100%; max-width:none; } }
/* Padded dropdowns everywhere: a custom chevron that never sits flush to the edge. */
select.sel { appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23948a7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; }
/* Today/Tracker tabs. */
.t2-tabs { display:flex; gap:6px; margin:-2px 0 14px; }
/* Quick add on the Today page: one tap to add an event or a task for the day. */
.t2-quickadd { display:flex; gap:8px; margin:0 0 14px; }
.t2-qa-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:15px; font-weight:600; box-shadow:var(--shadow); cursor:pointer; touch-action:manipulation; transition:border-color .12s, color .12s; }
.t2-qa-btn:hover { border-color:var(--accent); color:var(--accent); }
.t2-qa-ic { color:var(--accent); font-size:16px; font-weight:700; }
.t2-qa-btn:hover .t2-qa-ic { color:var(--accent); }
@media (max-width:560px){ .t2-quickadd .t2-qa-btn { flex:1 1 0; justify-content:center; } }
/* Keep the Today/Tracker switch pinned just under the breadcrumb as the day
   scrolls beneath it. --t2-crumbh is the breadcrumb's measured height (set in
   renderToday); the base offset matches where .crumbbar itself pins. */
@media (min-width:821px){
  .t2-tabs { position:sticky; top:calc(44px + var(--t2-crumbh,42px)); z-index:21;
    margin:0 calc(-1 * clamp(20px,4vw,52px)) 14px; padding:8px clamp(20px,4vw,52px);
    background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line); }
}
@media (max-width:820px){
  .t2-tabs { position:sticky; top:calc(var(--navh,56px) + var(--t2-crumbh,42px)); z-index:21;
    margin:0 -18px 14px; padding:8px 18px;
    background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line); }
}
.t2-tab { font-size:15px; font-weight:600; color:var(--ink-3); background:transparent; border:1px solid transparent; padding:8px 15px; border-radius:10px; display:inline-flex; align-items:center; gap:8px; }
.t2-tab.on { color:var(--ink); background:var(--card); border-color:var(--line); }
.t2-tab:hover:not(.on) { color:var(--ink-2); }
.t2-tabc { font-size:11px; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); padding:1px 7px; border-radius:6px; }
/* Columns scroll internally, capped to the day-canvas height, so a long list
   doesn't push the page down and a bottom task is a short scroll, not a trek. */
.t2-scroll { max-height:var(--t2h,760px); overflow-y:auto; padding-right:2px; }
.t2-scroll::-webkit-scrollbar { width:8px; } .t2-scroll::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:4px; }
.t2-colcount { margin-left:auto; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
/* Tasks controls: area filter + priority toggles. */
.t2-tctl { display:flex; flex-direction:column; gap:8px; margin-bottom:9px; }
.t2-prios { display:flex; gap:6px; }
.t2-prios-row { margin-top:9px; }
.t2-prio { flex:1; padding:6px 0; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink-3); font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.t2-prio.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.t2-prio:hover:not(.on) { border-color:var(--accent); color:var(--accent); }
/* drag: the whole row/block is the handle. Rows use pan-y so a vertical touch
   still scrolls the list; a drag toward the day arms on the first move. Slots use
   touch-action:none because their reschedule gesture is vertical. */
.t2-draggable { cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.t2-slot { cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
.t2-draggable:active, .t2-slot:active { cursor:grabbing; }
.t2-dragsrc { opacity:.4; }
.t2-dragghost { position:fixed; left:0; top:0; z-index:300; pointer-events:none; padding:7px 12px; border-radius:9px; background:var(--accent); color:var(--accent-ink); font-size:13.5px; font-weight:600; box-shadow:0 12px 30px -8px rgba(0,0,0,.5); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t2-dropind { position:absolute; left:52px; right:8px; height:0; border-top:2px dashed var(--accent); z-index:8; }
.t2-dropt { position:absolute; left:-46px; top:-9px; font-size:11px; font-weight:700; color:var(--accent); background:var(--card); padding:0 3px; font-variant-numeric:tabular-nums; }
/* quick-add rows in the columns */
button.t2-newrow { display:block; width:100%; margin-top:10px; padding:10px 12px; border-radius:10px; border:1px dashed var(--line-2); background:transparent; color:var(--ink-3); font-size:13.5px; text-align:center; }
button.t2-newrow:hover { border-color:var(--accent); color:var(--accent); }
.t2-pfoot { display:flex; align-items:center; gap:10px; margin-top:10px; }
.t2-pfoot .t2-newrow { margin-top:0; flex:1; }
.t2-plink { flex:none; border:0; background:none; color:var(--ink-3); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:6px 4px; white-space:nowrap; }
.t2-plink:hover { color:var(--accent); }
.t2-taskadd { display:block; margin-top:10px; }
.t2-taskadd input { width:100%; padding:10px 12px; border-radius:10px; border:1px dashed var(--line-2); background:transparent; color:var(--ink); font-size:14px; font-family:inherit; }
.t2-taskadd input:focus-visible { outline:none; border-style:solid; border-color:var(--accent); }
@media (max-width:1040px){
  .t2-grid { grid-template-columns:1fr; }
  .t2-day { order:-1; }
  .t2-scroll { max-height:none; }
}
/* Wide layout: each of the three columns scrolls on its own within a grid that
   is bounded to the window (height set in JS by sizeTodayGrid). The column
   headers pin to the top of their own scrollbox. */
@media (min-width:1041px){
  .t2-grid { align-items:stretch; }
  .t2-col { min-height:0; }
  .t2-col .t2-colscroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:6px; }
  .t2-col .t2-colscroll::-webkit-scrollbar { width:8px; }
  .t2-col .t2-colscroll::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:8px; }
  .t2-col .t2-stickytop { top:0; }
  .t2-dayscroll { padding-top:2px; }
}
@media (max-width:640px){ .trk-week { display:none; } .trk-prow .trk-week { display:inline-flex; } .tbx-tool-body.tbx-focus, .tbx-tool-body.tbx-timer { max-width:none; } }
.focus-stat { font-size:13.5px; color:var(--ink-2); background:color-mix(in srgb,var(--accent) 7%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:9px; padding:7px 12px; margin:2px 0 4px; display:inline-block; }
/* Link from a task back to the note it was created from. */
.task-source { margin:4px 0 6px; }
.task-source-link { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--line-2); border-radius:10px; background:var(--card); color:var(--ink-2); font-size:14.5px; }
.task-source-link:hover { border-color:var(--accent); color:var(--accent); }
.task-source-link .ico-note { color:var(--ink-3); }
.task-source-link:hover .ico-note { color:var(--accent); }
.nav-sub.muted { color:var(--ink-3); font-size:14px; font-style:italic; }
.nav-sub { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 12px 7px 14px; border-radius:8px; color:var(--ink-2); font-size:15.5px; overflow:hidden; }
.nav-sub:hover { background:var(--paper); color:var(--ink); }
.nav-sub.on { background:var(--card); color:var(--ink); font-weight:500; }
.nav-sub .i { color:var(--ink-3); font-size:12px; flex:none; }
.nav-sub .t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A quiet × on a Recent Notes row to drop it from the list (not delete the note).
   Hidden until you hover the row, so the list stays clean. */
.nav-sub-recent .t { flex:1; }
.nav-sub-x { flex:none; margin-left:auto; width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; color:var(--ink-3); font-size:15px; line-height:1; opacity:0; transition:opacity .12s, color .12s, background .12s; }
.nav-sub-recent:hover .nav-sub-x { opacity:.6; }
.nav-sub-x:hover { opacity:1 !important; color:var(--danger,#c0392b); background:color-mix(in srgb,var(--danger,#c0392b) 12%,transparent); }
@media (hover:none){ .nav-sub-x { opacity:.45; } }
/* Life-area colour on any sidebar row (areas, and starred items in their area):
   a left edge + a tinted marker in the area's hue. The note/table glyphs carry
   their own colour, so make them inherit the tint here too. */
.nav-sub.has-area { border-left:3px solid hsl(var(--h,4) 60% 52%); padding-left:11px; }
.nav-sub.has-area .i { color:hsl(var(--h,4) 55% 55%); }
.nav-sub.has-area .i .ico-note, .nav-sub.has-area .i .ico-tbl { color:inherit; }
.nav-spacer { flex:1; }
.nav-foot { display:flex; gap:6px; padding:0 6px; margin:2px 0 12px; }
.nav-foot a, .nav-foot button { font-size:13px; color:var(--ink-3); padding:6px 8px; border-radius:7px; text-decoration:none; }
.nav-foot a:hover, .nav-foot button:hover { background:var(--paper); color:var(--ink); }
/* Theme switch pinned to the bottom of the sidebar. */
.nav-bottom { margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:8px; }
/* Small legal footer at the very bottom of the sidebar. */
.nav-legal { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:8px 4px 2px; font-size:11.5px; color:var(--ink-3); }
.nav-legal a { color:var(--ink-3); } .nav-legal a:hover { color:var(--accent); }
.nav-legal-c { flex-basis:100%; color:var(--ink-3); opacity:.85; }
.nav-bottom-row { display:flex; gap:8px; }
.nav-bottom-row .nav-theme { flex:1; width:auto; min-width:0; }
.nav-adminlink { width:100%; }
.nav-signout { width:100%; }
.nav-signout:hover { color:var(--danger,#c0392b); border-color:color-mix(in srgb,var(--danger,#c0392b) 45%,var(--line)); }
.nav-theme { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 12px; border-radius:10px; color:var(--ink-2); font-size:14.5px; border:1px solid var(--line); background:var(--card); transition:background .12s,color .12s,border-color .12s; }
.nav-theme:hover { border-color:var(--accent); color:var(--accent); background:var(--paper); }
.nav-theme.on { border-color:var(--accent); color:var(--accent); }
/* The guide i. On desktop it lives at the right of the tab strip (top of the
   content), where its hover tip has room to open downward. On mobile the strip
   is hidden, so it rides the top bar with the theme/settings controls instead -
   the copy in the sidebar footer is hidden on desktop to avoid two of them. */
.help-btn { flex:none; width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:17px; color:var(--ink-3); border:1.5px solid var(--line-2); background:var(--card); transition:color .12s,border-color .12s,background .12s; }
.help-btn:hover { color:var(--accent); border-color:var(--accent); background:var(--paper); }
.tabstrip .help-btn { margin-left:auto; width:27px; height:27px; font-size:15px; }
.nav-bottom-row .help-btn { display:none; }   /* desktop: the tab-strip one is used instead */
/* Settings + Sign out in the tab strip, styled to match the round i. Sized up so
   the glyphs are legible (Robin's eyesight). */
.tabstrip .tab-util { flex:none; width:27px; height:27px; margin-left:5px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; color:var(--ink-3); border:1.5px solid var(--line-2); background:var(--card); transition:color .12s,border-color .12s,background .12s; }
.tabstrip .tab-util:hover { color:var(--accent); border-color:var(--accent); background:var(--paper); }
.tabstrip .tab-util.on { color:var(--accent); border-color:var(--accent); }
/* The top-right cluster (i, settings, sign out) reads in Lifebook's accent so it's
   clearly part of the app, filling on hover / when active. */
.tabstrip .help-btn, .tabstrip .tab-util { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 46%, var(--line-2)); }
.tabstrip .help-btn:hover, .tabstrip .tab-util:hover, .tabstrip .tab-util.on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
#help-pop.help-pop { position:fixed; z-index:60; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 36px -14px rgba(0,0,0,.42); padding:13px 15px; display:none; }
.help-pop-t { font-size:14px; font-weight:650; color:var(--ink); margin-bottom:5px; }
.help-pop-b { font-size:13.5px; line-height:1.5; color:var(--ink-2); }
.help-pop-hint { margin-top:10px; font-size:12px; color:var(--ink-3); }
/* The pinned guide page. Base 16px, generous line height - it's for reading. */
.help-doc { max-width:680px; font-size:16px; line-height:1.65; color:var(--ink); }
.help-doc p { margin:0 0 14px; }
.help-doc ul, .help-doc ol { margin:0 0 16px; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.help-doc li { line-height:1.55; }
.help-doc b { font-weight:650; }
.help-doc h4 { font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; font-weight:600; margin:24px 0 8px; color:var(--ink); }
.help-doc a { color:var(--accent); }
.help-pop-b h4 { font-size:14px; font-weight:700; margin:12px 0 5px; color:var(--ink); }
.help-pop-b ol, .help-pop-b ul { margin:6px 0; padding-left:20px; display:flex; flex-direction:column; gap:4px; }
.help-pop-b a { color:var(--accent); }
.help-lede { font-size:18px; color:var(--ink-2); margin-bottom:20px; }
.help-foot { margin-top:26px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-3); }
.help-back-link { color:var(--accent); font-size:14px; }
.help-back-link:hover { text-decoration:underline; }
/* Guide home page: the welcome-checklist card, then a grid of tool guides. */
/* The ethos band - the tagline earns a proper moment here, where we're explaining
   what Lifebook is FOR. Prominent in the Guide only; a quiet whisper elsewhere. */
.guide-ethos { text-align:center; margin:8px 0 24px; padding:34px 26px 36px; border-radius:20px; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); background:linear-gradient(170deg, color-mix(in srgb,var(--accent) 9%,var(--card)), var(--card) 72%); }
.guide-ethos-mark { line-height:0; margin-bottom:12px; }
.guide-ethos-mark .brand-mark { width:52px; height:52px; color:var(--accent); margin:0; }
.guide-ethos-tag { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:30px; font-weight:500; line-height:1.1; letter-spacing:.005em; color:var(--accent); }
/* Two classes so this beats `.help-doc p { margin:0 0 14px }` (0,0,1,1),
   which was silently winning the cascade and flattening the gap. */
.guide-ethos .guide-ethos-p { max-width:560px; margin:40px auto 0; font-size:16.5px; line-height:1.65; color:var(--ink-2); }
/* The people paragraph reads as its own movement: a short gold hairline above it
   and a little extra air, so relationships get their own quiet moment. */
.guide-ethos .guide-ethos-people { margin-top:36px; padding-top:32px; position:relative; }
.guide-ethos .guide-ethos-people::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:54px; height:2px; border-radius:2px; background:color-mix(in srgb,var(--accent) 55%,transparent); }
/* The discreet footer whisper on individual guides and the index bottom. */
.guide-tagline { text-align:center; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:17px; color:var(--ink-3); margin:26px 0 2px; letter-spacing:.01em; }
/* The sign-off: the tagline with the Lifebook mark beneath it, the mark a quiet
   button home to the top. */
.guide-signoff { display:flex; flex-direction:column; align-items:center; gap:12px; margin:30px 0 8px; }
.guide-signoff .guide-tagline { margin:0; font-size:19px; }
.guide-home-logo { display:inline-flex; padding:8px; border-radius:50%; background:none; border:0; cursor:pointer; line-height:0; transition:transform .16s cubic-bezier(.2,.8,.2,1), background .16s; }
.guide-home-logo .brand-mark { width:38px; height:38px; color:var(--accent); margin:0; }
.guide-home-logo:hover { transform:translateY(-2px); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.guide-home-logo:active { transform:translateY(0); }
.guide-start { margin:6px 0 24px; padding:18px 20px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:16px; background:color-mix(in srgb,var(--accent) 6%,transparent); }
.guide-start-h { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:500; margin-bottom:6px; }
.guide-start-p { margin:0 0 10px; color:var(--ink-2); }
.guide-checklist { margin:0 0 16px; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.guide-checklist li { line-height:1.5; }
.guide-start .add-btn.wide { display:inline-flex; }
.guide-sec-h { font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:600; margin:18px 0 12px; }
.guide-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.guide-card { display:flex; align-items:flex-start; gap:13px; padding:15px 16px; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); transition:border-color .12s,transform .06s; }
.guide-card:hover { border-color:var(--accent); }
.guide-card-ic { flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:17px; line-height:1; border-radius:10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.guide-card-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
/* Guide: privacy/terms links + copyright. */
.guide-legal { display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 20px; }
.guide-legal-link { display:inline-flex; align-items:center; padding:11px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font-size:15px; box-shadow:var(--shadow-sm); }
.guide-legal-link:hover { border-color:var(--accent); color:var(--accent); }
.guide-copyright { margin:18px 0 0; font-size:13px; color:var(--ink-3); }
.guide-card:active { transform:scale(.99); }
.guide-card-t { font-size:16px; font-weight:600; color:var(--ink); }
.guide-card-s { font-size:13.5px; line-height:1.5; color:var(--ink-3); }
.help-inline-i { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--line-2); font-family:Georgia,serif; font-style:italic; font-weight:700; font-size:12.5px; color:var(--ink-2); }
/* Settings hub */
.set-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:20px; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.set-row-t { font-size:16px; font-weight:600; color:var(--ink); }
.set-row-s { font-size:13.5px; color:var(--ink-3); margin-top:3px; }
/* A sub-section title inside a set-card (e.g. Security on the Account page). */
.set-sec-title { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; }
.set-account-sec { gap:0; }
/* The back link that replaces the tab bar on a settings sub-page (Lifebook card). */
.set-subback { display:inline-flex; align-items:center; gap:7px; width:auto; height:auto; padding:8px 15px; border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-2); border:1px solid var(--line); background:var(--card); cursor:pointer; }
.set-subback:hover { border-color:var(--accent); color:var(--accent); }
.set-block { border-top:1px solid var(--line); padding-top:18px; }
/* Two-factor (TOTP) enrolment in Settings. */
.tfa-block { margin-top:18px; }
.tfa-block .set-row-s { margin-top:8px; line-height:1.5; }
.tfa-block .set-row-s + .set-row-s { margin-top:12px; }
.tfa-block .add-btn.wide { margin-top:16px; padding:13px 30px; }
.tfa-pill { font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; vertical-align:middle; margin-left:6px; }
.tfa-pill.on { color:#6f9f4a; background:color-mix(in srgb,#6f9f4a 14%,transparent); }
.tfa-pill.off { color:var(--ink-3); background:var(--paper-2,color-mix(in srgb,var(--ink) 8%,transparent)); }
.tfa-secret { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:19px; letter-spacing:.12em; font-weight:600; color:var(--ink); background:var(--paper-2,color-mix(in srgb,var(--accent) 7%,var(--card))); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:10px 0; text-align:center; user-select:all; word-break:break-all; }
.tfa-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.tfa-row .sel { max-width:180px; text-align:center; letter-spacing:.14em; font-size:16px; }
.tfa-reccodes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; margin:12px 0; padding:14px; border:1px dashed var(--line-2); border-radius:12px; background:var(--card); }
.tfa-reccodes span { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; letter-spacing:.08em; color:var(--ink); user-select:all; text-align:center; }
.tfa-err { color:var(--danger,#c4412e); font-size:13px; margin-top:8px; }
.acc-swatches { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.acc-swatch { display:inline-flex; flex-direction:column; align-items:center; gap:6px; border:0; background:none; cursor:pointer; padding:2px; }
.acc-swatch .acc-dot { width:34px; height:34px; border-radius:50%; background:var(--sw); box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line); transition:box-shadow .12s, transform .07s; }
.acc-swatch:hover .acc-dot { transform:scale(1.07); }
.acc-swatch.on .acc-dot { box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--sw); }
.acc-swatch .acc-name { font-size:11.5px; color:var(--ink-3); }
.acc-swatch.on .acc-name { color:var(--ink); font-weight:600; }
.acc-custom { display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.acc-custom-l { display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-2); }
.acc-color { width:44px; height:30px; border:1px solid var(--line-2); border-radius:8px; background:var(--card); cursor:pointer; padding:2px; }
/* Dashboard tiles: solid cards, not link strips. */
.set-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.set-tile { display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:16px 16px 15px; min-height:112px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); cursor:pointer; transition:border-color .12s, transform .12s, box-shadow .12s; }
.set-tile:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 22px -12px rgba(0,0,0,.32); }
.set-tile-ic { font-size:22px; line-height:1; margin-bottom:auto; }
.set-tile-t { font-size:15.5px; font-weight:650; letter-spacing:-.01em; }
.set-tile-s { font-size:12.5px; color:var(--ink-3); line-height:1.35; }
/* Goal: existing tasks in the same life area, to link in */
.goal-arealist { margin-top:18px; }
.gal-box { position:relative; max-width:420px; }
.gal-box .gal-search { width:100%; max-width:none; margin:0; }
.gal-drop { display:none; position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:30;
  background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 16px 40px -18px rgba(0,0,0,.5); max-height:340px; overflow:auto; padding:6px; }
.gal-box:focus-within .gal-drop { display:block; }
.gal-list { display:flex; flex-direction:column; gap:2px; }
.gal-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; }
.gal-row:hover { background:var(--paper); }
.gal-row .ga-t { flex:1; min-width:0; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:7px; }
.gal-row .ga-t .p-tag { flex:none; }
.gal-link { flex:none; padding:4px 11px; font-size:13px; opacity:.7; }
/* Whole-row link: click anywhere on a picker row to link it, not just the cue. */
.gal-row-link { cursor:pointer; }
.gal-row-link .ga-t { cursor:pointer; }
.gal-link-cue { flex:none; padding:4px 11px; font-size:13px; color:var(--accent); opacity:.55; transition:opacity .12s; }
.gal-row-link:hover .gal-link-cue, .gal-row-link:focus-visible .gal-link-cue { opacity:1; }
.gal-row-link:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.gal-row:hover .gal-link { opacity:1; border-color:var(--accent); color:var(--accent); }
/* Connected notes on a goal - a matching pair to the connected tasks. */
.goal-notes-sec { margin:22px 0 4px; }
.goal-notes-sec .gt-loose-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.gc-notes-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.gc-note-card { --h:220; display:inline-flex; align-items:center; gap:6px; border:1px solid color-mix(in srgb,hsl(var(--h) 55% 56%) 30%,var(--line)); border-left:3px solid hsl(var(--h) 55% 56%); border-radius:11px; background:color-mix(in srgb,hsl(var(--h) 55% 56%) 6%,var(--card)); box-shadow:var(--shadow); overflow:hidden; }
.gc-note-card:hover { border-color:hsl(var(--h) 55% 56%); }
.gc-note-open { display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:9px 4px 9px 12px; cursor:pointer; color:var(--ink); font-size:14.5px; max-width:240px; }
.gc-note-ic { color:hsl(var(--h,220) 55% 50%); flex:none; }
.gc-note-av { width:24px; height:24px; font-size:11px; }
.bc-sec .bc-add-sel { width:100%; max-width:none; }
.gc-pick-av { width:22px; height:22px; font-size:10px; margin-right:7px; vertical-align:middle; }
.gc-notes-sec { margin-top:18px; }
.gc-notes-empty { font-size:13.5px; color:var(--ink-3); margin:2px 0 12px; }
.gc-notes-sec .goal-notelist { margin-top:4px; }
.gc-note-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gc-note-x { flex:none; background:none; border:0; padding:6px 10px 6px 4px; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; }
.gc-note-x:hover { color:var(--accent); }
.goal-notelist { display:flex; align-items:flex-start; gap:10px; }
/* Goals section on a task card - the other end of the goal↔task link. */
.tgoals-sec { margin-top:18px; }
.tgoals-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.tgoal-chip { --h:210; display:inline-flex; align-items:center; gap:6px; border:1px solid color-mix(in srgb,hsl(var(--h) 55% 56%) 30%,var(--line)); border-left:3px solid hsl(var(--h) 55% 56%); border-radius:11px; background:color-mix(in srgb,hsl(var(--h) 55% 56%) 6%,var(--card)); box-shadow:var(--shadow); overflow:hidden; }
.tgoal-chip:hover { border-color:hsl(var(--h) 55% 56%); }
.tgoal-open { display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:9px 4px 9px 12px; cursor:pointer; color:var(--ink); font-size:14.5px; max-width:300px; }
.tgoal-ic { flex:none; }
.tgoal-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.tgoal-m { flex:none; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.tgoal-x { flex:none; background:none; border:0; padding:6px 10px 6px 4px; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; }
.tgoal-x:hover { color:var(--accent); }
.tgoals-empty { font-size:13.5px; color:var(--ink-3); margin:2px 0 10px; }
.tgoal-add { max-width:280px; }
.goal-notelist .gal-box { flex:1; }
.gc-note-new { flex:none; white-space:nowrap; }
.gc-note-list { display:flex; flex-direction:column; gap:2px; }
.set-collapse-h { cursor:pointer; display:flex; align-items:center; gap:9px; user-select:none; }
.set-collapse-h .acw-chev { font-size:11px; color:var(--ink-3); width:11px; flex:none; }
.set-areas-grid { display:flex; flex-wrap:wrap; gap:9px; }
.set-area { display:inline-flex; align-items:center; gap:9px; padding:11px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font-size:15.5px; box-shadow:var(--shadow); cursor:pointer; transition:border-color .12s, transform .06s; }
.set-area:hover { border-color:var(--accent); }
.set-area:active { transform:scale(.98); }
.set-area-dot { width:11px; height:11px; border-radius:50%; flex:none; background:hsl(var(--h) 55% 55%); }
/* Invites (admin) */
.inv-new { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.inv-new .sel { flex:1; min-width:140px; }
.inv-free { display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-2); white-space:nowrap; }
.inv-gift { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.4; color:var(--ink-1);
  padding:12px 14px; margin:2px 0 4px; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius:12px;
  background:color-mix(in srgb, var(--accent) 8%, transparent); cursor:pointer; }
.inv-gift input { margin-top:2px; flex:none; }
.inv-gift b { font-weight:700; }
.inv-gift em { font-style:normal; color:var(--ink-3); font-size:13px; }
.inv-hint { font-size:13px; color:var(--ink-3); margin:10px 0 0; }
.ai-keys { gap:4px; }
.ai-hint { font-size:12.5px; color:var(--ink-3); line-height:1.5; margin:2px 0 8px; }
/* When AI is switched off, the keys are still editable but visibly stood down. */
.ai-keys.ai-disabled { opacity:.5; }
.ai-key-row { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.ai-key-l { font-size:13px; font-weight:500; color:var(--ink-2); }
.ai-set { color:#3f9e5f; font-weight:600; font-size:12px; }
.ai-key-in { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ai-key-in .sel { flex:1; min-width:180px; margin:0; }
.ai-key-in .add-btn.wide, .ai-key-in .ghost { flex:none; }
/* Where-AI-is-used list (settings + onboarding): feature, why, and which model. */
.ai-uses { list-style:none; margin:10px 0 12px; padding:0; display:flex; flex-direction:column; gap:7px; }
.ai-uses li { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:13.5px; line-height:1.4; }
.ai-use-f { font-weight:600; color:var(--ink); flex:none; }
.ai-use-why { color:var(--ink-2); flex:1; min-width:140px; }
.ai-use-prov { flex:none; font-size:11px; font-weight:600; letter-spacing:.03em; padding:2px 8px; border-radius:999px; }
.ai-use-claude { color:#a5502f; background:color-mix(in srgb,#c4712e 16%,transparent); }
.ai-use-gemini { color:#3367b8; background:color-mix(in srgb,#4285f4 15%,transparent); }
/* Each AI use as its own switch (Settings > Plan). */
.ai-uses-toggle { gap:4px; }
.ai-uses-toggle li { display:block; }
.ai-use-row { display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer; }
.ai-use-row:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.ai-use-main { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.ai-use-row .ai-use-why { flex:none; min-width:0; font-size:12.5px; color:var(--muted); }
.ai-use-row .ai-use-prov { align-self:center; }
.ai-use-sw { flex:none; width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }
.ai-uses-toggle.ai-disabled { opacity:.5; pointer-events:none; }
.ai-get { display:inline-block; font-size:12.5px; color:var(--accent); margin:-4px 0 14px; text-decoration:none; }
.ai-get:hover { text-decoration:underline; }
.ai-managed { margin-top:6px; padding:11px 13px; border:1px dashed var(--line-2); border-radius:11px; font-size:13px; color:var(--ink-2); line-height:1.5; }
/* Premium tab: the two plan cards (Bring your own keys / Full Fat). */
.plan-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; align-items:start; }
.plan-card { padding:18px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.plan-card.on { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent), var(--shadow); }
.plan-card.plan-full { background:color-mix(in srgb,var(--accent) 5%,var(--card)); }
.plan-h { display:flex; align-items:center; gap:9px; font-size:17px; }
.plan-badge { flex:none; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); padding:2px 9px; border-radius:999px; }
.plan-price { margin:3px 0 10px; font-size:13px; font-weight:600; color:var(--ink-3); letter-spacing:.02em; }
.plan-desc { font-size:14px; color:var(--ink-2); line-height:1.55; margin:0 0 14px; }
.plan-active { padding:11px 13px; border-radius:11px; font-size:14px; font-weight:500; color:#3f9e5f; background:color-mix(in srgb,#3f9e5f 10%,transparent); border:1px solid color-mix(in srgb,#3f9e5f 28%,transparent); }
.plan-full .add-btn.wide { width:100%; text-align:center; }
/* Gmail app-password step list, shared by the mail form note and onboarding. */
.gpw-steps { margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.5; color:var(--ink-2); }
.gpw-steps a { color:var(--accent); font-weight:500; }
.gpw-help { font-size:13.5px; line-height:1.55; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:10px 0 2px; }
.gpw-help a { color:var(--accent); font-weight:500; }
.gpw-expiry { margin:8px 0 0; font-size:12.5px; color:var(--ink-3); }
.gpw-details { margin:18px 0 4px; }
.gpw-details > summary { cursor:pointer; font-size:14.5px; font-weight:600; color:var(--accent); padding:6px 0; }
.gpw-admin { display:block; margin-top:8px; font-size:12px; color:var(--ink-3); }

/* ── First-run onboarding overlay ─────────────────────────────────────── */
#onb .onb-bg { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px;
  background:color-mix(in srgb,var(--ink) 40%,transparent); backdrop-filter:blur(6px); }
/* ── The setup hub: icon tiles + expand panel, done at your own pace ───────── */
.onb-sheet { position:relative; width:100%; max-width:600px; max-height:92vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line-2); border-radius:24px; padding:34px 30px 26px;
  box-shadow:0 40px 110px -40px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:22px; }
.onb-x { position:absolute; top:15px; right:16px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; border:0; color:var(--ink-3); font-size:17px; cursor:pointer; border-radius:50%; z-index:2; }
.onb-x:hover { color:var(--ink); background:var(--paper-2); }
.onb-head { text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px; }
.onb-mark { color:var(--accent); line-height:0; } .onb-mark .brand-mark { width:46px; height:46px; margin:0; }
.onb-title { font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:600; margin:4px 0 0; color:var(--ink); text-wrap:balance; }
.onb-lede { font-size:15.5px; line-height:1.55; color:var(--ink-2); max-width:44ch; margin:0; text-wrap:balance; }
.onb-prog { display:flex; align-items:center; gap:10px; width:min(320px,82%); margin-top:6px; }
.onb-prog-bar { flex:1; height:7px; border-radius:999px; background:var(--paper-2); overflow:hidden; }
.onb-prog-bar span { display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.onb-prog-n { font-size:12.5px; font-weight:600; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.onb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:12px; }
.onb-tile { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:15px 15px 16px; border:1px solid var(--line); border-radius:16px; background:var(--paper); cursor:pointer; transition:border-color .12s, background .12s, transform .08s, box-shadow .12s; }
.onb-tile:hover { border-color:var(--accent); background:var(--card); transform:translateY(-1px); box-shadow:0 12px 26px -16px rgba(0,0,0,.35); }
.onb-tile.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--card)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.onb-tile-top { display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:3px; }
.onb-tile-ic { font-size:23px; line-height:1; color:var(--accent); }
.onb-tile-pip { width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:12px; font-weight:800; color:var(--line-2); }
.onb-tile.done .onb-tile-pip { background:#6f9f4a; color:#fff; }
.onb-tile-l { font-size:15px; font-weight:600; color:var(--ink); }
.onb-tile-h { font-size:12.5px; color:var(--ink-3); line-height:1.4; }
.onb-tile.done .onb-tile-l { color:var(--ink-2); }
.onb-panel { border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:16px; background:color-mix(in srgb,var(--accent) 5%,var(--card)); padding:0 18px 18px; animation:onb-pop .2s ease; }
@keyframes onb-pop { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.onb-panel-h { display:flex; align-items:center; gap:9px; font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; color:var(--ink); padding:16px 0 8px; }
.onb-panel-ic { color:var(--accent); font-size:19px; }
.onb-panel-in { display:flex; flex-direction:column; }
.onb-panel-in .onb-h { display:none; }   /* the panel header replaces the step's own heading */
.onb-done { align-self:center; margin-top:2px; min-width:180px; min-height:48px; padding:0 24px; border-radius:999px; font-size:15.5px; font-weight:600; cursor:pointer; border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); transition:border-color .12s,color .12s,background .12s; }
.onb-done:hover { border-color:var(--accent); color:var(--ink); background:var(--card); }
@media (max-width:560px){ .onb-sheet { padding:26px 15px 18px; border-radius:18px; gap:18px; } .onb-title { font-size:27px; } .onb-grid { grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:10px; } }
/* The Home "Getting started" doorway into the hub. */
.home-setup { display:flex; align-items:stretch; gap:8px; margin-bottom:16px; }
.home-setup-main { flex:1; display:flex; align-items:center; gap:14px; text-align:left; padding:15px 18px; border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:16px; background:color-mix(in srgb,var(--accent) 7%,var(--card)); cursor:pointer; transition:border-color .12s, background .12s, transform .08s; min-width:0; }
.home-setup-main:hover { border-color:var(--accent); transform:translateY(-1px); }
.hsu-ic { color:var(--accent); flex:none; line-height:0; } .hsu-ic .brand-mark { width:30px; height:30px; margin:0; }
.hsu-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.hsu-t { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; color:var(--ink); }
.hsu-s { font-size:13.5px; color:var(--ink-2); line-height:1.4; }
.hsu-go { margin-left:auto; color:var(--accent); font-size:20px; flex:none; }
.home-setup-x { flex:none; width:34px; align-self:center; background:none; border:0; color:var(--ink-3); font-size:16px; cursor:pointer; border-radius:8px; }
.home-setup-x:hover { color:var(--ink); background:var(--paper-2); }
.onb-card { position:relative; width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line-2); border-radius:20px; padding:26px 26px 20px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:14px; }
.onb-skip { position:absolute; top:16px; right:18px; background:none; border:0; color:var(--ink-3); font-size:13px; cursor:pointer; padding:4px 6px; border-radius:7px; }
.onb-skip:hover { color:var(--ink); background:var(--paper-2); }
.onb-dots { display:flex; gap:7px; }
.onb-dot { width:26px; height:5px; border-radius:3px; background:var(--line-2); transition:background .2s; }
.onb-dot.on { background:var(--accent); }
.onb-dot.done { background:color-mix(in srgb,var(--accent) 45%,var(--line-2)); }
.onb-body { display:flex; flex-direction:column; }
.onb-h { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:500; margin:2px 0 10px; }
.onb-opt { font-family:inherit; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); vertical-align:middle; margin-left:8px; }
.onb-p { font-size:15px; line-height:1.6; color:var(--ink-2); margin:0 0 10px; }
.onb-muted { color:var(--ink-3); font-size:14px; }
.onb-provs { display:flex; flex-direction:column; gap:14px; margin:4px 0 4px; }
.onb-prov { border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--paper); }
.onb-prov-h { display:flex; align-items:center; gap:9px; font-size:15px; }
.onb-prov-why { font-size:13px; color:var(--ink-2); line-height:1.5; margin:6px 0 10px; }
.onb-prov-in { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.onb-prov-in .sel { flex:1; min-width:180px; margin:0; }
.onb-prov-in .add-btn.wide { flex:none; }
.onb-prov .ai-get { margin:8px 0 0; }
.onb-gpw { font-size:14px; line-height:1.55; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:4px 0 12px; }
.onb-mailform { display:flex; flex-direction:column; gap:9px; }
.onb-mailform .add-btn.wide { align-self:flex-start; }
.onb-ok { font-size:15px; color:#3f9e5f; background:color-mix(in srgb,#3f9e5f 10%,transparent); border:1px solid color-mix(in srgb,#3f9e5f 30%,transparent); border-radius:12px; padding:14px 16px; line-height:1.5; }
.onb-tips { margin:4px 0 10px; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:14.5px; line-height:1.5; color:var(--ink-2); }
/* Onboarding life-area chips: a dot in the area's own hue, its name, and a quiet × */
.onb-areas { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px; }
.onb-area { display:inline-flex; align-items:center; gap:8px; padding:8px 10px 8px 12px; border:1px solid var(--line-2); border-radius:999px; background:var(--paper); font-size:14.5px; color:var(--ink); }
.onb-area-dot { width:11px; height:11px; border-radius:50%; flex:none; background:hsl(var(--h,220) 55% 55%); }
.onb-area-x { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; line-height:1; color:var(--ink-3); }
.onb-area-x:hover { background:var(--paper-2); color:var(--accent); }
.onb-area-add { display:flex; gap:9px; margin-top:2px; }
.onb-area-add .sel { flex:1; min-width:0; }
.onb-area-add .add-btn.wide { flex:none; }
.onb-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; padding-top:14px; border-top:1px solid var(--line); }
.onb-foot .add-btn.wide { flex:none; min-width:150px; }
@media (max-width:560px){ .onb-card { padding:22px 18px 16px; border-radius:16px; } .onb-h { font-size:26px; } .onb-foot .add-btn.wide { min-width:130px; } }
/* Admin › Invites: incoming "requests to join" from the website. */
.adm-req-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.adm-req { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--accent) 5%,var(--card)); flex-wrap:wrap; }
.adm-req-main { flex:1 1 220px; min-width:0; }
.adm-req-top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.adm-req-nm { font-weight:600; font-size:16px; color:var(--ink); }
.adm-req-when { font-size:12.5px; color:var(--ink-3); }
.adm-req-email { display:block; font-size:13.5px; color:var(--accent); text-decoration:none; margin-top:1px; }
.adm-req-email:hover { text-decoration:underline; }
.adm-req-why { margin:8px 0 0; font-size:14.5px; color:var(--ink-2); line-height:1.5; border-left:2px solid color-mix(in srgb,var(--accent) 40%,var(--line)); padding-left:11px; }
.adm-req-acts { display:flex; align-items:center; gap:8px; flex:none; }
.inv-list { display:flex; flex-direction:column; gap:7px; margin-top:16px; }
.inv-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--line); border-radius:11px; background:var(--paper); flex-wrap:wrap; }
.inv-row.used { opacity:.55; }
.inv-code { font-family:'Spline Sans Mono',ui-monospace,monospace; font-size:15px; font-weight:600; letter-spacing:.06em; color:var(--ink); flex:none; }
/* An invitation is a person you're waiting on, so their address leads and the
   code drops to the meta line under it. */
.inv-who { flex:1; min-width:150px; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.inv-who b { font-size:14.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-meta { min-width:0; font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-acts { flex:none; display:flex; gap:7px; }
.inv-copy { flex:none; padding:5px 12px; }
.inv-cancel { flex:none; padding:5px 12px; } .inv-cancel:hover { color:var(--danger,#c0392b); }

/* Invite dialog: their email, a note in your words, send. */
.inv-dialog { width:min(460px,94vw); max-height:82vh; overflow:auto; }
.inv-f { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink-2); }
.inv-f em { font-style:normal; font-weight:400; color:var(--ink-3); }
.inv-f .ui-dialog-input { margin-bottom:14px; }
.inv-f .sel { margin:0 0 14px; }
.inv-two { display:flex; gap:12px; }
.inv-two .inv-f { flex:1 1 0; min-width:0; }
.inv-two .ui-dialog-input { width:100%; box-sizing:border-box; }
@media (max-width:460px){ .inv-two { flex-direction:column; gap:0; } }
.inv-d-msg { font-family:inherit; line-height:1.5; resize:vertical; min-height:76px; }
.inv-d-owner { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.inv-d-owner .inv-f { flex:1; min-width:170px; }
.inv-d-owner .inv-free { padding-bottom:14px; }
.inv-d-hint { font-size:12.5px; color:var(--ink-3); margin:0 0 14px; line-height:1.5; }
.inv-d-err { margin:0 0 12px; text-align:left; }
/* Drag-to-reorder feedback: the dragged item dims and the drop target shows an
   accent insertion line so it's obvious where it will land. */
.nav-sec, [data-fav-id] { position:relative; }
.nav-sec.dragging, [data-fav-id].dragging { opacity:.4; }
.nav-sec.drop-before::before, .nav-sec.drop-after::after { content:''; position:absolute; left:6px; right:6px; height:3px; border-radius:2px; background:var(--accent); z-index:4; pointer-events:none; }
.nav-sec.drop-before::before { top:-3px; } .nav-sec.drop-after::after { bottom:-3px; }
/* Favourites reorder is a vertical sidebar list, so the drop line is top/bottom. */
.nav-sub[data-fav-id] { cursor:grab; }
.nav-sub[data-fav-id].dragging { cursor:grabbing; }
[data-fav-id].drop-before { box-shadow:inset 0 3px 0 var(--accent); }
[data-fav-id].drop-after { box-shadow:inset 0 -3px 0 var(--accent); }
[data-sub-id].drop-before { box-shadow:inset 0 3px 0 var(--accent); }
[data-sub-id].drop-after { box-shadow:inset 0 -3px 0 var(--accent); }

.pane { min-width:0; padding:30px clamp(20px,4vw,52px) 90px; max-width:1100px; position:relative; z-index:1; }
/* The empty right margin on wide screens is filled with a Moroccan quatrefoil
   lattice in the brand gold (theme-aware). Anchored to the pane's right edge so
   it shows ONLY in the gap - never behind content - and collapses to nothing
   when the window is too narrow to have a gap. (Robin, 2026-10-15.) */
.main::after { content:''; position:fixed; top:0; bottom:0; right:0;
  left:calc(var(--sidebar-w,326px) + 1100px); z-index:0; pointer-events:none;
  background:url(/brand/moroccan-gold.svg) 0 0 / 96px 106px repeat;
  -webkit-mask:linear-gradient(to left,#000 0 60%, transparent);
          mask:linear-gradient(to left,#000 0 60%, transparent); opacity:.5; }
:root[data-theme='dark'] .main::after { background-image:url(/brand/moroccan-dark.svg); opacity:.4; }
/* Sidebar collapsed: no sidebar width, so the pane sits at the far left - re-anchor
   the pattern to the pane's right edge so it fills the now-wider gap, not a band
   of empty paper the sidebar's width across. */
body.nav-collapsed .main::after { left:1100px; }
/* Notes & tables with the sidebar collapsed: hand the freed width to the content
   so the middle grows (the fixed right column - related notes, tasks - stays put)
   instead of leaving a gap. Best on lower-res screens. The pattern re-anchors to
   the widened pane's edge so it still fills any leftover on very wide screens. */
body.nav-collapsed[data-view="note"] .pane,
body.nav-collapsed[data-view="table"] .pane { max-width:calc(1100px + var(--sidebar-w, 326px)); }
body.nav-collapsed[data-view="note"] .main::after,
body.nav-collapsed[data-view="table"] .main::after { left:calc(1100px + var(--sidebar-w, 326px)); }

/* ── home ────────────────────────────────────────── */
.home-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
/* The action bar - date + weather on the left, the three quick actions on the
   right - pins to the top on desktop so New note / task / event stay to hand as
   you scroll the home page. (Robin.) */
.home-actionbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.home-ab-left { display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }
.home-ab-left .home-date { margin-top:0; }
.home-ab-left .wx-chip { margin-top:0; }
@media (min-width:821px){
  .home-actionbar {
    position:sticky; top:44px; z-index:15;
    margin:0 calc(-1 * clamp(20px,4vw,52px)) 22px; padding:10px clamp(20px,4vw,52px) 11px;
    background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
}
.home-head h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(30px,4.5vw,42px); font-weight:500; }
.home-head h1 .hi-name { color:var(--accent); font-style:italic; }
.home-hi { min-width:0; }
.home-date { margin-top:4px; font-size:16px; color:var(--accent); font-weight:600; letter-spacing:.01em; }
/* The live time: a quiet serif note beside the date, set a touch larger so it
   reads as a gentle clock rather than a label. */
/* Match the date exactly - same font, size, weight and accent colour. */
.home-time { font-size:16px; color:var(--accent); font-weight:600; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.home-ab-left .home-time { margin-top:0; }
.wx-chip { display:inline-flex; align-items:center; gap:8px; margin-top:9px; padding:5px 12px; border-radius:999px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:14px; color:var(--ink-2); }
.wx-ic { font-size:16px; line-height:1; }
.wx-t { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.wx-hl { color:var(--ink-3); font-size:12.5px; font-variant-numeric:tabular-nums; }
.home-actions { display:flex; gap:10px; flex-wrap:wrap; }
/* Each quick action is a split control: tap the name to OPEN the tool, tap + to
   add a new one - so Home gives fast access to Notes/Calendar/Tasks and to
   creating, without opening the sidebar. */
.home-qa { display:inline-flex; align-items:stretch; border:1px solid var(--line-2); border-radius:12px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
.home-qa-open { display:inline-flex; align-items:center; gap:8px; padding:11px 15px; background:none; border:0; color:var(--ink); font-size:15.5px; font-weight:600; cursor:pointer; min-width:0; }
.home-qa-open .hqa-ic { color:var(--accent); font-size:17px; line-height:1; flex:none; }
.home-qa-open .hqa-l { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-qa-open .hqa-n { flex:none; margin-left:2px; font-size:12.5px; font-weight:700; line-height:1; color:#fff; background:var(--accent); border-radius:999px; padding:3px 7px; min-width:19px; text-align:center; }
.home-qa-open:hover { background:var(--paper-2); }
.home-qa-add { flex:none; width:44px; border:0; border-left:1px solid var(--line); background:none; color:var(--accent); font-size:23px; line-height:1; cursor:pointer; }
.home-qa-add:hover { background:color-mix(in srgb,var(--accent) 13%,transparent); }
/* Mobile: stack the three controls full-width so each is easy to see and read,
   rather than cramming them into thirds. */
@media (max-width:640px){
  /* Two per row: Mail · Notes over Calendar · Tasks (4 over 2 rows). */
  .home-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; flex:1 1 100%; width:100%; max-width:100%; box-sizing:border-box; }
  .home-qa { width:100%; min-width:0; }
  .home-qa-open { flex:1 1 auto; min-width:0; padding:14px 10px; font-size:15px; }
  .home-qa-open .hqa-ic { font-size:17px; }
  /* No count badge on the 2x2 mobile buttons - it crowds out the name. */
  .home-qa-open .hqa-n { display:none; }
  .home-qa-add { width:46px; font-size:22px; }
}
.home-sec { margin:26px 0; }
/* Home splits into main content + a sticky notepad column; stacks on mobile. */
/* Home is PAGE-scrolled: the full-width top bar (greeting, date, actions,
   alerts) scrolls up and away under the tab strip as you scroll, while the
   right rail pins just below the strip and scrolls on its own - so its top
   stays reachable however far the main column has scrolled. */
.home { display:grid; grid-template-columns:minmax(0,1fr) 340px; grid-template-areas:"top top" "main side"; column-gap:26px; row-gap:6px; align-items:start; }
.home-top { grid-area:top; min-width:0; }
.home-scroll { grid-area:main; min-width:0; }
.home-side::-webkit-scrollbar { width:8px; }
.home-side::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:8px; }
.home-main > .home-sec:first-child { margin-top:0; }
/* Home main sections as equal icon tiles + one expanding panel (like the Toolbox). */
.home-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(94px, 1fr)); gap:10px; margin-bottom:16px; }
.home-tile { display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 8px 12px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; position:relative; transition:border-color .12s, transform .08s; }
.home-tile:hover { border-color:var(--line-2); transform:translateY(-1px); }
.home-tile.on { border-color:var(--accent); box-shadow:0 10px 26px -16px color-mix(in srgb,var(--accent) 55%,transparent); }
.ht-ic { font-size:22px; line-height:1; }
.ht-l { font-size:12.5px; font-weight:600; color:var(--ink-2); text-align:center; }
.home-tile.on .ht-l { color:var(--ink); }
.ht-c { position:absolute; top:7px; right:9px; font-size:11px; font-weight:700; color:var(--ink-3); background:var(--paper-2); border-radius:999px; padding:1px 7px; min-width:18px; text-align:center; }
.home-tile.on .ht-c { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--card)); }
.home-tilepanel { border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:16px 18px; }
.htp-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.htp-t { font-family:'Cormorant Garamond',Georgia,serif; font-size:20px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.htp-ic { font-size:17px; }
/* The fused lead: your day + what to do next + today's practices, stacked as the
   hero above the demoted secondary tiles. The day block carries a faint accent
   edge so the eye lands on it first. */
.home-lead { display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.lead-block { border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:16px 18px; }
.lead-block.lead-day { border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 36px -22px color-mix(in srgb,var(--accent) 48%,transparent); }
.lead-h { display:flex; align-items:center; gap:9px; font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; color:var(--ink); margin-bottom:12px; cursor:pointer; }
/* No tiny collapse arrows on the Home cards - tap the header to open/close. */
.lead-chev, .home-sec-card > .home-sec-h .hs-chev { display:none; }
.lead-ic { font-size:17px; color:var(--accent); flex:none; }
.lead-name { color:var(--ink); }
.lead-c { font-size:13px; font-weight:700; color:var(--ink-3); background:var(--paper-2); border-radius:999px; padding:1px 8px; }
.lead-h-r { margin-left:auto; display:flex; align-items:center; gap:8px; }
.lead-h-r .lead-nav, .lead-h-r .lead-more { margin-left:0; }
.lead-nav { margin-left:auto; }
.lead-more { margin-left:auto; font-size:13px; color:var(--ink-3); background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:7px; }
.lead-more:hover { color:var(--accent); background:var(--paper-2); }
.lead-x { flex:none; width:22px; height:22px; border-radius:6px; border:0; background:none; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s, color .12s, background .12s; }
.lead-block:hover .lead-x { opacity:.55; }
.lead-x:hover { opacity:1 !important; color:var(--danger,#c0392b); background:var(--paper-2); }
/* A little + on the Today header: jump straight to the add-event form. (Robin, 2026-10-16.) */
.lead-add { flex:none; width:24px; height:24px; border-radius:7px; border:0; background:var(--paper-2); color:var(--ink-2); font-size:17px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color .12s, background .12s; }
.lead-add:hover { color:#fff; background:var(--accent); }
.lead-collapsed .lead-h { margin-bottom:0; }
/* Collapsed cards are a uniform single row: consistent header height, title on
   one line, so Today/Do-next/Practices (and the rail cards) all match. */
.lead-h, .home-sec-card > .home-sec-h { min-height:30px; flex-wrap:nowrap; }
.lead-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Rail sections (Recently viewed, People, Starred, Notepad) as the same elegant
   collapsible card as the lead blocks: card shell, serif title, collapses to just
   the title. */
.home-sec-card { border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:16px 18px; margin:0 0 16px; }
.home-sec-card > .home-sec-h { font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink); align-items:center; gap:9px; margin-bottom:12px; }
.home-sec-card.home-sec-shut > .home-sec-h { margin-bottom:0; }
.home-sec-card > .home-sec-h .hs-chev { color:var(--ink-3); font-size:12px; }
.home-sec-card > .home-sec-h .muted { font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink-3); background:var(--paper-2); border-radius:999px; padding:1px 8px; }
/* Invitations on Home: a "need to know" card, warmer than the plain sections so
   a waiting connection catches the eye near the bottom of the wall. (Robin, 2026-10-13.) */
.home-invites { border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); background:linear-gradient(158deg, color-mix(in srgb,var(--accent) 8%,var(--card)), var(--card) 62%); }
.home-invites > .home-sec-h { color:color-mix(in srgb,var(--accent) 70%,var(--ink)); }
.home-invites .fr-intro { margin-top:0; }
/* "Shared with you" - folios/pages someone invited me into, front and centre. */
.home-shared > .home-sec-h { color:color-mix(in srgb,var(--accent) 70%,var(--ink)); }
.home-shared-x { margin-left:auto; border:0; background:none; color:var(--ink-3); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:8px; }
.home-shared-x:hover { color:var(--ink); background:var(--paper-2); }
.home-shared .shared-row .sh-go { margin-left:auto; color:var(--ink-3); flex:none; }
.home-shared .shared-row:hover { border-color:var(--accent); }
.sha-all { display:inline-flex; margin-top:2px; border:0; background:none; color:var(--accent); font-weight:600; font-size:14px; cursor:pointer; padding:6px 2px; }
/* New-message alert pinned to the very top of Home - a message from a contact is
   usually time-sensitive, so it leads. Taps through to the chat. (Robin, 2026-10-14.) */
.home-msgalert { display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:14px 18px; margin:0 0 16px; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line)); border-radius:16px; background:linear-gradient(158deg, color-mix(in srgb,var(--accent) 13%,var(--card)), var(--card) 66%); box-shadow:var(--shadow); cursor:pointer; transition:transform .1s, box-shadow .12s, border-color .12s; }
.home-msgalert:hover { transform:translateY(-1px); border-color:var(--accent); box-shadow:0 13px 28px -16px rgba(0,0,0,.34); }
.hma-ic { flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); }
.hma-body { display:flex; flex-direction:column; min-width:0; flex:1; }
.hma-t { font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; line-height:1.1; color:var(--ink); }
.hma-sub { font-size:13px; color:var(--ink-2); margin-top:2px; }
.hma-go { flex:none; color:var(--accent); font-size:19px; font-weight:700; }
.home-reqalert .hma-ic { font-size:19px; line-height:1; }
.home-main-add { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:16px; }
.hma-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3); font-weight:700; }
.hma-chip { font-size:13.5px; font-weight:600; color:var(--ink-2); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:7px 13px; cursor:pointer; transition:border-color .12s, color .12s; }
.hma-chip:hover { border-color:var(--accent); color:var(--accent); }
/* Homepage sections: a collapsible panel of show/hide toggles, one per section. */
.home-features { margin:20px 0 8px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--card) 55%,transparent); overflow:hidden; }
.hf-h { display:flex; align-items:center; gap:8px; padding:12px 15px; cursor:pointer; list-style:none; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ink-3); }
.hf-h::-webkit-details-marker { display:none; }
.hf-chev { font-size:10px; transition:transform .15s; }
.home-features[open] .hf-chev { transform:rotate(90deg); }
.hf-hint { text-transform:none; letter-spacing:0; font-weight:400; font-size:12.5px; color:var(--ink-3); opacity:.85; margin-left:auto; }
.hf-chips { display:flex; flex-direction:column; gap:8px; padding:2px 15px 15px; }
.hf-chip { display:flex; width:100%; align-items:center; gap:9px; padding:11px 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--paper-2); color:var(--ink-3); font-size:15px; font-weight:500; cursor:grab; touch-action:none; opacity:.75; transition:background .12s,border-color .12s,color .12s,opacity .12s; text-align:left; }
.hf-chip::before { content:'⠿'; flex:none; color:var(--ink-3); opacity:.6; font-size:13px; }
.hf-chip .hf-state { margin-left:auto; }
.hf-chip.hf-dragging { cursor:grabbing; opacity:.97; box-shadow:0 10px 24px -10px rgba(0,0,0,.45); position:relative; z-index:5; }
.hf-chip.hf-drop { box-shadow:0 -3px 0 -1px var(--accent); }
.hf-chip .hf-ic { font-size:15px; line-height:1; }
.hf-chip.on { background:color-mix(in srgb,var(--accent) 12%,var(--card)); border-color:color-mix(in srgb,var(--accent) 45%,transparent); color:var(--accent); opacity:1; }
.hf-chip .hf-state { color:var(--accent); font-weight:700; margin-left:1px; }
.hf-chip:hover { border-color:var(--accent); color:var(--accent); opacity:1; }
.home-secondary { margin-top:4px; }


/* ── Connect: tending the people you keep in touch with ── */
.cn-intro { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:19px; color:var(--ink-3); margin:2px 0 20px; max-width:60ch; }
/* Add someone to keep in touch: search contacts, tap to start. */
.cn-add { margin:0 0 22px; }
.cn-add-q { margin-bottom:0; }
.cn-add-results { margin-top:8px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.cn-add-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--line); padding:10px 13px; cursor:pointer; }
.cn-add-row:first-child { border-top:0; }
.cn-add-row:hover { background:var(--paper); }
.cn-av-sm { width:28px; height:28px; font-size:12px; }
.cn-add-name { flex:1; min-width:0; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cn-add-row:hover .cn-add-name { color:var(--accent); }
.cn-add-plus { flex:none; font-size:13px; font-weight:600; color:var(--done); }
.cn-add-none { margin-top:8px; font-size:14px; color:var(--ink-3); }
.cn-list { display:flex; flex-direction:column; gap:18px; }
.cn-band { border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:6px 16px 12px; }
.cn-band.cn-lead { border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 36px -22px color-mix(in srgb,var(--accent) 48%,transparent); }
.cn-h { display:flex; align-items:center; gap:9px; font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; color:var(--ink); padding:12px 0 8px; }
.cn-c { margin-left:auto; font-size:13px; font-weight:700; color:var(--ink-3); background:var(--paper-2); border-radius:999px; padding:1px 9px; }
.cn-row { display:flex; align-items:center; gap:13px; padding:11px 2px; border-top:1px solid var(--line); cursor:pointer; text-align:left; }
.cn-row:first-of-type { border-top:0; }
.cn-row:hover .cn-name { color:var(--accent); }
.cn-av { width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--accent-ink); background:var(--accent); }
.cn-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.cn-name { font-size:16px; color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cn-sub { font-size:13px; color:var(--ink-3); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cn-pip { flex:none; font-size:12px; font-weight:700; letter-spacing:.02em; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.cn-pip.over { color:var(--accent-ink); background:var(--accent); }
.cn-pip.close { color:var(--done); background:color-mix(in srgb,var(--done) 15%,var(--card)); border:1px solid color-mix(in srgb,var(--done) 32%,transparent); }
.cn-spoke { flex:none; font-size:13.5px; font-weight:600; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:8px 13px; cursor:pointer; touch-action:manipulation; }
.cn-spoke:hover { border-color:var(--done); color:var(--done); background:color-mix(in srgb,var(--done) 8%,var(--card)); }
.cn-okmsg { padding:14px 2px; color:var(--done); font-weight:600; font-size:15.5px; }
@media (max-width:560px){ .cn-pip { display:none; } .cn-spoke { padding:8px 11px; } }
/* The right rail scrolls on its own: it sticks at the top and, when its sections
   (Recent, Starred, Notepad, People) run past the viewport, scrolls inside itself
   rather than dragging the main Today wall with it. */
/* Independent-scroll right rail, the bulletproof way: the OUTER cell stretches to
   fill the tall grid row (align-self:stretch), which is what gives a sticky child
   room to pin; the INNER box is a fixed-height sticky scroller pinned below the
   44px tab strip, so its content scrolls within it and clips cleanly at the top -
   never riding the page or sliding under the header. (Both attempts that put sticky
   on the item itself failed: definite-height-no-stretch wouldn't pin, and
   stretch+max-height rode the page.) (Robin, 2026-09-29.) */
/* Independent scroll: the rail pins under the tab strip and, when its sections run
   past the viewport, scrolls WITHIN itself (capped to the viewport height) rather
   than being stuck to how far the main column has scrolled. overscroll-behavior
   keeps that inner scroll from chaining out to the page. A short rail just pins.
   (Robin, 2026: the "rides the page" version left the rail's bottom unreachable.) */
.home-side { grid-area:side; position:sticky; top:44px; align-self:start; max-height:calc(100vh - 56px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; display:flex; flex-direction:column; gap:16px; padding:0 4px 8px 0; }
.home-side .home-sec { margin-top:0; }
.home-notepad { width:100%; min-height:360px; resize:vertical; padding:15px 17px; font-size:15.5px; line-height:1.65; font-family:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.home-notepad::placeholder { color:var(--ink-3); }
.home-notepad:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
/* Recently viewed: a compact tap-list of the last things you opened. */
/* Recently viewed reads as cards (matching the Starred section next to it), not
   a plain word list: bordered chips on the card ground, wrapping across the row,
   each carrying its life-area colour as a left edge. */
.recent-list { display:flex; flex-direction:column; gap:8px; }
.recent-item { display:flex; align-items:center; gap:11px; width:100%; min-width:0; max-width:100%; padding:12px 15px; border-radius:12px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink); font-size:15.5px; text-align:left; transition:border-color .12s,color .12s,transform .12s,box-shadow .12s; }
.recent-item:hover { transform:translateY(-1px); box-shadow:0 8px 20px -12px rgba(0,0,0,.34); }
.recent-item:hover { border-color:var(--accent); color:var(--accent); }
.recent-item.has-area { border-left:3px solid hsl(var(--h,4) 60% 52%); }
/* Icon tint: the item's life-area colour, or the accent (terracotta) with none. */
.recent-ic { flex:none; width:18px; text-align:center; color:var(--accent); font-size:14px; }
.recent-item.has-area .recent-ic { color:hsl(var(--h,4) 55% 55%); }
/* The note/table glyphs carry their own colour; in this list they follow the
   tint instead, so a note reads in its life-area colour like everything else. */
.recent-ic .ico-note, .recent-ic .ico-tbl { color:inherit; }
.recent-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Starred and Recently viewed now live in the sidebar's top expander, so Home no
   longer repeats them on desktop (Starred in the right rail, Recently viewed in the
   central column); mobile keeps both, where the sidebar isn't in reach. (Robin.) */
@media (min-width:821px){
  .home-side .home-sec-favs { display:none; }
  .home-main .lead-recent { display:none; }
}
@media (max-width:820px){
  /* One column on mobile, but interleave both desktop columns into a chosen
     order: Today, then the scratchpad, then Recently viewed, then the quarter's
     focus, then Favourites. display:contents dissolves the two column wrappers so
     every section is a direct flex child that `order` can arrange; the flex gap
     replaces the per-section margins. */
  /* On mobile there's one column and normal document scroll: undo the desktop
     viewport lock, and dissolve BOTH column wrappers so every section becomes a
     direct flex child of `.home` that `order` can arrange. */
  .pane:has(.home) { height:auto; display:block; padding-bottom:90px; }
  .home { display:flex; flex-direction:column; gap:26px; align-items:stretch; }
  .home-top, .home-scroll, .home-main, .home-side { display:contents; overflow:visible; }
  .home .home-sec { margin:0; }
  /* Everything spans full width on mobile - they're flex items via display:contents. */
  .home-crumbbar, .home-actionbar, .home-sec-card, .home-notepad { width:100%; box-sizing:border-box; }
  /* Tap the whole header to collapse - a generous target, and no drag grip, so
     every section title lines up flush left whichever column it came from. The
     bigger vertical padding (a ~44px touch target) is what makes the tap land
     every time instead of only sometimes on a thin header. */
  .home-sec-toggle { padding:13px 2px; margin-bottom:3px; min-height:22px; }
  .home-grip { display:none; }
  /* Drag a section up or down in place. The grip is a real touch target; while
     one section is lifted a coloured line marks where it will drop. */
  .home-mgrip { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin:-8px 3px -8px -6px; flex:none; color:var(--ink-3); font-size:17px; line-height:1; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
  .home-mgrip:active { cursor:grabbing; color:var(--accent); }
  .home-sec.mdragging { position:relative; z-index:50; opacity:.97; }
  .home-sec.mdragging .home-sec-h { border-radius:12px; background:var(--card); box-shadow:0 14px 34px -10px rgba(0,0,0,.5); }
  .home-sec.mdrop-top { box-shadow:0 -3px 0 -1px var(--accent); }
  .home-sec.mdrop-bottom { box-shadow:0 3px 0 -1px var(--accent); }
  /* Default order (Today + tool buttons pinned first). Settings → Mobile can
     override the sections below via inline `order`, and hide any with .mob-hide. */
  .home-sec-today { order:1; } .home-launch { order:2; } .home-sec-p1 { order:3; }
  .home-sec-focus { order:4; } .home-sec-notepad { order:5; } .home-sec-favs { order:6; }
  /* On mobile the .home-lead wrapper dissolves so its blocks (Today, My Lifebook,
     Do-next, Tracker…) become orderable flex children. Today and My Lifebook are
     pinned first and second; everything else orders after them. The notepad's
     !important beats the inline order the mobile-arrangement writes. */
  .home-lead { display:contents; }
  .home .lead-block { order:5; }
  .home .lead-day { order:0; }        /* Today - pinned first */
  .home .lead-lifebook { order:1; }   /* My Lifebook - pinned second, right under Today (Robin, 2026-10-16) */
  .home .home-sec-notepad { order:2 !important; }
  .home .lead-priority { order:3; }
  .home .lead-tracker { order:4; }
  .home .home-features { order:25; }   /* the show/hide panel sits below the sections */
  .home .home-sec-card { margin:0; }   /* flex gap handles spacing on mobile */
  /* Uniform cards: Today drops its accent-hero treatment so every card is the
     same plain style as Do next / Práticas, collapsing to one tidy row. */
  .lead-block.lead-day { border-color:var(--line); box-shadow:var(--shadow); }
  .lead-block, .home-sec-card { padding:14px 16px; }
  .lead-h, .home-sec-card > .home-sec-h { font-size:19px; align-items:center; }
  .lead-block:not(.lead-collapsed) .lead-h, .home-sec-card:not(.home-sec-shut) > .home-sec-h { margin-bottom:11px; }
  /* No drag dots on mobile - drag the whole card to reorder (chevrons are hidden
     everywhere by the base rule). */
  .home .home-mgrip { display:none; }
  .home .home-mdrag-h { cursor:grab; }
  /* Collapsed cards are a FIXED identical height, whatever the title or icons. */
  .lead-block.lead-collapsed, .home-sec-card.home-sec-shut { height:56px; min-height:56px; padding-top:0; padding-bottom:0; display:flex; align-items:center; }
  .lead-block.lead-collapsed .lead-h, .home-sec-card.home-sec-shut > .home-sec-h { width:100%; min-height:0; margin:0; }
  .home-sec-favareas { order:7; } .home-sec-recent { order:8; } .home-toolbox { order:20; }
  /* The discover strip, keyboard-shortcuts link and the mark button are chrome
     that belongs at the very bottom - they now live inside .home-scroll, so
     without an explicit order they'd float up among the sections. */
  .home-discover { order:90; } .home-foot { order:100; } .home-mark { order:101; }
  /* Sections switched off for mobile in Settings → Mobile. */
  .home .mob-hide { display:none; }
  /* Everything stacks on mobile - never a sideways scroll. Goal cards go one per
     row (no 280px min to spill into two columns), the home columns can't be
     pushed past the screen, and the home clips any stray horizontal overflow. */
  .goal-grid { grid-template-columns:minmax(0,1fr); }
  .home, .home-scroll, .home-main, .home-side { min-width:0; max-width:100%; }
  .home { overflow-x:clip; }
  .fav-cards, .fav-card, .fav-card-open { min-width:0; max-width:100%; }
}
.home-sec-h { font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:600; margin-bottom:12px; display:flex; align-items:baseline; gap:10px; }
.home-sec-h .muted { font-size:11px; letter-spacing:.04em; text-transform:none; font-weight:400; }
.home-empty { color:var(--ink-3); font-style:italic; font-family:'Cormorant Garamond',serif; font-size:19px; padding:8px 0; }

/* Favourites: compact cards, grouped by kind, wrapping so many fit. */
.fav-group { margin-bottom:16px; }
.fav-group:last-child { margin-bottom:0; }
.fav-group-h { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; margin-bottom:9px; }
.fav-cards { display:flex; flex-wrap:wrap; gap:8px; }
.fav-card { display:inline-flex; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); max-width:100%; transition:border-color .12s; }
.fav-card:hover { border-color:var(--line-2); }
/* Left edge in the card's life-area colour (matches the Priority Task stripe). */
.fav-card.has-area { border-left:3px solid hsl(var(--h,4) 60% 52%); }
.fav-card.has-area:hover { border-left-color:hsl(var(--h,4) 60% 52%); }
.fav-card-open { display:flex; align-items:center; gap:9px; min-width:0; padding:9px 4px 9px 13px; color:var(--ink); font-size:15.5px; }
.fav-card-open:hover { color:var(--accent); }
.fav-card .fav-ic { color:var(--ink-3); font-size:13px; flex:none; }
.fav-card .fav-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.fav-card .fav-x { flex:none; opacity:0; color:var(--ink-3); font-size:16px; padding:0 11px 0 4px; transition:opacity .12s,color .12s; }
.fav-card:hover .fav-x { opacity:.55; } .fav-card .fav-x:hover { opacity:1; color:var(--accent); }
@media (hover:none){ .fav-card .fav-x { opacity:.55; } }
/* Starred, one item per line (mirrors the Do-next .p1-row rhythm). */
.fav-lines { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.fav-line { position:relative; display:flex; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); transition:border-color .12s, transform .12s, box-shadow .12s; }
.fav-line:hover { border-color:var(--line-2); transform:translateY(-1px); box-shadow:0 8px 20px -12px rgba(0,0,0,.34); }
.fav-line.has-area { border-left:3px solid hsl(var(--h,4) 60% 52%); }
.fav-line[draggable="true"] { cursor:grab; }
.fav-line.dragging { opacity:.4; }
.fav-line-open { flex:1; min-width:0; display:flex; align-items:center; gap:11px; text-align:left; padding:12px 6px 12px 15px; color:var(--ink); font-size:15.5px; }
.fav-line-open:hover { color:var(--accent); }
.fav-line .fav-ic { color:var(--ink-3); font-size:14px; flex:none; }
.fav-line-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fav-line .fav-x { flex:none; opacity:0; color:var(--ink-3); font-size:17px; padding:0 13px 0 6px; transition:opacity .12s,color .12s; }
.fav-line:hover .fav-x { opacity:.55; } .fav-line .fav-x:hover { opacity:1; color:var(--accent); }
@media (hover:none){ .fav-line .fav-x { opacity:.55; } }
/* Card-header icon + count (one number beside the name where a card counts). */
.home-sec-h .hs-ic { flex:none; color:var(--accent); font-size:16px; line-height:1; }
.home-sec-card > .home-sec-h .hs-ic { font-size:17px; }
.home-sec-h .hs-name { min-width:0; }
.home-sec-h .sec-c { font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink-3); background:var(--paper-2); border-radius:999px; padding:1px 8px; margin-left:2px; }
.favs { display:flex; flex-direction:column; gap:4px; }
.fav { display:flex; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); }
.fav:hover { border-color:var(--line-2); }
.fav[draggable="true"] { cursor:grab; }
.fav-open { flex:1; min-width:0; display:flex; align-items:center; gap:12px; text-align:left; padding:13px 16px; color:var(--ink); font-size:16.5px; }
.fav-ic { color:var(--ink-3); font-size:13px; flex:none; }
.fav-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fav-x { flex:none; color:var(--ink-3); font-size:18px; padding:0 14px; } .fav-x:hover { color:var(--accent); }

/* Day-stepper in the Today header: arrows to look ahead, a pill to come home. */
.today-nav { margin-left:auto; align-self:center; display:inline-flex; align-items:center; gap:4px; }
.today-nav-arw, .today-nav-btn { flex:none; border:1px solid var(--line); background:var(--card); color:var(--ink-2); border-radius:8px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:border-color .12s, color .12s, background .12s; }
.today-nav-arw { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; }
.today-nav-btn { height:26px; padding:0 10px; font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.today-nav-arw:hover, .today-nav-btn:hover { border-color:var(--accent); color:var(--accent); }
.today-cal { display:flex; flex-direction:column; gap:1px; }
/* The Today feed's groups: Be ready / the agenda / A gentle nudge. Quiet Fell
   labels; the rows keep their existing render. (Robin: Today as a life-log.) */
.feed-grp { margin:0 0 14px; }
.feed-grp-h { font-family:'IM Fell English SC',Georgia,serif; font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin-bottom:6px; }
.feed-grp .ev-row { border-radius:10px; }
.area-today { margin:4px 0 22px; }
.area-today .feed-grp:last-child { margin-bottom:0; }
.feed-beready .ev-surfaced, .feed-gentle .ev-surfaced { color:color-mix(in srgb,var(--oxblood,#7a2b25) 55%,var(--ink-3)); }
/* Time in its own column; title and location stack in the second column so a
   long title or address never collides with the other. */
.ev-row { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:12px; row-gap:2px; align-items:baseline; padding:11px 2px; border-bottom:1px solid var(--line); }
.ev-row:last-child { border-bottom:0; }
/* A Today row is a shortcut into the calendar. */
/* A third column just for the birthday row's ×. Every other .ev-row has two, and
   its third child (a location) is meant to wrap onto the line below - which is
   exactly what the × must not do. */
.ev-bday { grid-template-columns:64px minmax(0,1fr) auto; }
.ev-bday-x { align-self:center; flex:none; width:28px; height:28px; border-radius:8px; font-size:17px;
  line-height:1; color:var(--ink-3); opacity:0; transition:opacity .12s, color .12s, background .12s; }
.ev-bday:hover .ev-bday-x { opacity:.6; }
.ev-bday-x:hover { opacity:1 !important; color:var(--accent); background:var(--paper-2); }
/* No hover on a touch screen, so the × has to be visible from the start. */
@media (hover:none){ .ev-bday-x { opacity:.5; } }
.ev-click { cursor:pointer; border-radius:9px; padding-left:10px; padding-right:10px; transition:background .12s; }
.ev-click:hover { background:var(--paper-2); }
.ev-click:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.ev-time { color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:15px; }
.ev-end { display:block; font-size:12.5px; color:var(--ink-3); opacity:.7; }
.ev-end::before { content:'-'; margin-right:1px; }
.ev-dur { margin-left:8px; font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.ev-t { min-width:0; font-size:16.5px; overflow-wrap:anywhere; }
.ev-loc { grid-column:2; min-width:0; color:var(--ink-3); font-size:14px; overflow-wrap:anywhere; }
.ev-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:9px; vertical-align:middle; background:hsl(var(--h,220) var(--lane-s) var(--lane-l)); flex:none; }
.ev-slot.done .ev-t { color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--line-2); }
/* A surfaced task in Today: a tick box in the time column, a quiet "back from
   snooze" tag where a location would sit. */
.ev-task { align-items:center; }
.ev-check { width:26px; height:26px; flex:none; border-radius:8px; border:1.5px solid var(--line-2); background:var(--card); color:transparent; font-size:14px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:border-color .12s,color .12s,background .12s; }
.ev-check:hover { border-color:var(--accent); color:var(--accent); }
.ev-check:active { background:var(--paper-2); }
.ev-surfaced { font-size:12px; color:var(--accent); opacity:.9; }
/* "Coming up" nudge for an event starting soon today - a quiet gold pill, or a
   live accent when it's now/imminent. */
.ev-soon { grid-column:2; justify-self:start; margin-top:2px; display:inline-flex; align-items:center; font-size:12px; font-weight:600; color:var(--priv,#8a6d3b); background:color-mix(in srgb,var(--priv,#8a6d3b) 13%,transparent); border-radius:999px; padding:1px 9px; width:fit-content; }
.ev-soon-now { color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent); }
/* Remove-from-Today ✕ on a surfaced task (doesn't complete it). Sits at the row
   end, out of the way of the tap-to-open target. */
.ev-task { position:relative; }
.ev-task .ev-t, .ev-task .ev-surfaced { padding-right:30px; }
.ev-x { position:absolute; top:50%; right:2px; transform:translateY(-50%); width:26px; height:26px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-size:18px; line-height:1; color:var(--ink-3); background:transparent; transition:color .12s, background .12s; }
.ev-x:hover { color:var(--danger,#c0392b); background:var(--paper-2); }
@media (hover:none){ .ev-x { color:var(--ink-2); } }

/* Quick-launch row above Favourites: go to each index, or + to create. */
/* Home launcher: hidden on desktop (the sidebar lists every section), shown as
   a tap-grid on mobile where the sidebar is gone. See the mobile rules below. */
.home-launch { display:none; }
/* Mobile-only search pill at the very top of Home. It sits in the normal page
   flow (not the sticky header), so it scrolls away with the greeting. Desktop
   uses the sidebar's search instead. */
.home-search { display:none; }
.home-link { padding:9px 16px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); font-size:15px; }
.home-link:hover { border-color:var(--accent); color:var(--accent); }
/* a link and its + share one pill outline, split by a hairline */
.home-link-pair { display:inline-flex; align-items:stretch; }
.home-link-pair .home-link { border-radius:999px 0 0 999px; border-right:0; }
.home-link-pair .home-link.plus { border-radius:0 999px 999px 0; padding:9px 13px; font-size:17px; line-height:1; font-weight:600; }

.tbl-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; padding:3px; }
/* Inside a half-width folio tool, cards fill the column (one per row) so they
   don't pack into a cramped, truncated sliver beside empty space. (Robin.) */
.area-flow .area-sec .tbl-cards, .area-flow .area-sec .contact-grid { grid-template-columns:1fr; }
/* "See all N →": caps a tool at a handful of items so a folio never becomes an
   endless scroll; expands in place. (Robin.) */
.area-seemore { margin-top:12px; display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:13.5px; font-weight:600; color:color-mix(in srgb,var(--c,var(--accent)) 60%,var(--ink-2)); background:none; border:0; padding:4px 2px; cursor:pointer; }
.area-seemore:hover { color:var(--c,var(--accent)); text-decoration:underline; }
.tbl-card { display:flex; align-items:center; gap:10px; text-align:left; padding:15px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font-size:16.5px; box-shadow:var(--shadow); overflow:hidden; min-width:0; }
.tbl-card:hover { border-color:var(--accent); }
/* Draggable note/table cards in a life area, with a drag handle + drop marks. */
.noteord-card { position:relative; cursor:pointer; }
.noteord-card[draggable] { cursor:grab; }
.noteord-card.dragging { opacity:.4; }
.tc-grip { flex:none; color:var(--ink-3); opacity:0; font-size:13px; cursor:grab; transition:opacity .12s; }
.noteord-card:hover .tc-grip { opacity:.6; }
.noteord-cards .noteord-card.drop-before::before, .noteord-cards .noteord-card.drop-after::after { content:''; position:absolute; top:5px; bottom:5px; width:3px; border-radius:2px; background:var(--accent); z-index:3; }
.noteord-cards .noteord-card.drop-before::before { left:-6px; } .noteord-cards .noteord-card.drop-after::after { right:-6px; }
/* The title, ellipsised. A bare text node can't be truncated inside a flex card,
   so it's wrapped in .tc-t: it takes the leftover width and clips with an … so
   every card keeps all four borders instead of a long title pushing past them. */
.tbl-card .tc-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc-ic { color:var(--ink-3); flex:none; }
/* Notes-page card: colour-coded, life area as a subtitle bar above the name. */
.nt-card { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); flex-direction:column; align-items:stretch; gap:7px; padding:13px 15px; }
.nt-card.has-area { border-left:3px solid var(--c); }
.nt-sub { display:inline-flex; align-items:center; gap:7px; min-width:0; }
.nt-sub-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--c); }
.nt-sub-t { font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--c); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nt-name { display:flex; align-items:center; gap:9px; min-width:0; }
.nt-name .tc-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc-lead-star { color:var(--gold,#c9a227); font-size:13px; flex:none; }
.tc-mail { color:var(--ink-3); font-size:12.5px; flex:none; margin-right:2px; }
.ico-tbl { color:var(--tbl-pink); }   /* table-note grid mark, everywhere it appears */
.ico-note { color:var(--ink-3); }     /* plain-note mark, matching the sidebar */
.tc-star { color:var(--gold); flex:none; margin-left:auto; font-size:13px; }
/* a life-area tag riding on a note card, pushed to the right */
.area-tag { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 40%,transparent); padding:2px 9px; border-radius:999px; flex:none; }
.area-tag .cd { width:8px; height:8px; border-radius:50%; background:var(--c); }
.area-tags { margin-left:auto; display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; flex:none; justify-content:flex-end; }
.area-tags .area-tag { margin-left:0; }

/* ── life areas ──────────────────────────────────── */
/* the area picker on a note / table, styled as a quiet pill */
.crumb-tools { display:flex; align-items:center; gap:8px; margin-left:auto; }
.area-sel { padding:7px 12px; font-size:14.5px; background:var(--card); border:1px solid var(--line-2); border-radius:999px; color:var(--ink-2); max-width:200px; }
.area-sel:hover { border-color:var(--accent); }
.tbl-head .area-sel { margin-left:auto; }
/* In the table header the whole life-areas group (chips + picker) sits right. */
.tbl-head .note-areas { margin-left:auto; }
.tbl-head .note-areas .area-sel { margin-left:0; }
/* A note's life-area chips: one per area, each linking to its area and removable. */
.note-areas { display:inline-flex; align-items:center; flex-wrap:wrap; gap:7px; }
.area-chip-pick { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:inline-flex; align-items:center; font-size:13.5px; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 42%,transparent); background:color-mix(in srgb,var(--c) 9%,transparent); border-radius:999px; overflow:hidden; }
.acp-link { display:inline-flex; align-items:center; gap:6px; padding:4px 5px 4px 11px; color:inherit; }
.acp-link .cd { width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; }
.acp-link:hover { text-decoration:underline; }
.acp-x { padding:4px 9px 4px 5px; color:inherit; opacity:.5; font-size:15px; line-height:1; }
.acp-x:hover { opacity:1; }

.area-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.area-card { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:flex; align-items:center; gap:11px; text-align:left; padding:16px 17px; border:1px solid var(--line); border-left:4px solid var(--c); border-radius:12px; background:var(--card); color:var(--ink); font-size:17px; box-shadow:var(--shadow); transition:border-color .12s,transform .08s; }
.area-card:hover { border-color:var(--c); transform:translateY(-1px); }
.area-card[draggable] { cursor:grab; position:relative; }
.area-card.dragging { opacity:.4; }
.ac-dot { width:11px; height:11px; border-radius:50%; background:var(--c); flex:none; }
.ac-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Life areas page: a colourful grid of area cards - a monogram in the area's
   colour, its vision, and live counts - clicking through to the area dashboard. */
.area-gcards { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.area-gcard { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); position:relative; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; transition:border-color .12s, transform .1s, box-shadow .12s; }
.area-gcard::before { content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--c); }
.area-gcard:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--c) 55%,var(--line)); box-shadow:0 14px 32px -18px color-mix(in srgb,var(--c) 65%,transparent); }
.area-gcard[draggable] { cursor:grab; }
.area-gcard.dragging { opacity:.4; }
.area-cards .area-gcard.drop-before::before, .area-cards .area-gcard.drop-after::after { content:''; position:absolute; top:6px; bottom:6px; width:3px; border-radius:2px; background:var(--accent); z-index:3; height:auto; }
.area-cards .area-gcard.drop-before::before { left:-7px; inset:6px auto 6px -7px; }
.area-cards .area-gcard.drop-after::after { right:-7px; }
.agc-open { display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; text-align:left; background:none; border:0; padding:20px 18px 18px; cursor:pointer; color:var(--ink); }
.agc-mono { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; background:var(--c); text-transform:uppercase; box-shadow:0 6px 16px -8px var(--c); }
.agc-name { font-size:18px; font-weight:700; line-height:1.25; }
.agc-vision { font-size:13.5px; line-height:1.45; color:var(--ink-2); font-style:italic; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.agc-vision-empty { color:var(--ink-3); font-style:normal; }
.agc-metrics { display:flex; flex-wrap:wrap; gap:7px; margin-top:2px; }
.agc-chip { font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.agc-chip-t { color:var(--ink-2); background:color-mix(in srgb,var(--c) 13%,transparent); }
.agc-chip-g { color:var(--ink-2); background:var(--bg-2,color-mix(in srgb,var(--ink) 6%,transparent)); }
.agc-star { position:absolute; top:12px; right:10px; }
/* Top row: monogram + an "how active" pill. */
.agc-toprow { display:flex; align-items:center; justify-content:space-between; width:100%; gap:8px; }
.agc-topright { display:inline-flex; align-items:center; gap:8px; flex:none; }
/* Wheel-of-Life marker: a mini donut filled to the area's last score, in its colour;
   a gold ring means it's a key area. Only tracked areas get one, so the wheel members
   read at a glance. */
.agc-wheel { width:20px; height:20px; border-radius:50%; flex:none; position:relative; background:conic-gradient(from -90deg, hsl(var(--wh,220) 58% 52%) calc(var(--sc,0) * 72deg), color-mix(in srgb,hsl(var(--wh,220) 45% 50%) 20%, var(--paper-2)) 0); }
.agc-wheel::after { content:''; position:absolute; inset:5px; border-radius:50%; background:var(--card); }
.agc-wheel.key { box-shadow:0 0 0 2px var(--gold); }
.agc-act { font-size:11px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.agc-act-hot { color:#fff; background:var(--c); }
.agc-act-warm { color:var(--ink-1); background:color-mix(in srgb,var(--c) 22%,transparent); }
.agc-act-mild { color:var(--ink-2); background:color-mix(in srgb,var(--c) 11%,transparent); }
.agc-act-quiet { color:var(--ink-3); background:var(--bg-2,color-mix(in srgb,var(--ink) 5%,transparent)); }
/* Sort + filter controls on the Life areas page. */
.areas-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; justify-content:space-between; }
.areas-sortwrap { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); }
.areas-sort { max-width:200px; }
/* Mine / Shared-with-me / All scope filter for the Folios board. */
.areas-scopeseg { display:inline-flex; gap:7px; flex-wrap:wrap; }
/* A folio shared with me: a quiet dashed frame + a "shared by" tag, so it reads
   at a glance as someone else's, set apart from my own solid cards. */
.area-gcard-shared { border-style:dashed; border-color:color-mix(in srgb,var(--c) 40%,var(--line)); }
.agc-shared-tag { font-size:11px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:999px; white-space:nowrap; color:var(--ink-2); background:color-mix(in srgb,var(--c) 13%,transparent); max-width:160px; overflow:hidden; text-overflow:ellipsis; }
.agc-chip-shared { color:var(--ink-3); background:color-mix(in srgb,var(--ink) 6%,transparent); }
/* Sidebar: a folio shared with me carries a small, muted people glyph at the end. */
.nav-sub-shared .t { flex:1; min-width:0; }
.nav-sub-shb { padding-left:6px; font-size:11px; opacity:.55; flex:none; }
/* Home "Discover" row: a nudge toward the features people miss. */
.home-discover { margin:26px 0 0; }
.disc-h { display:flex; align-items:center; gap:9px; cursor:pointer; }
.disc-hide { margin-left:auto; border:0; background:none; color:var(--ink-3); font-size:17px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px; opacity:.6; }
.disc-hide:hover { opacity:1; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.disc-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:12px; margin-top:6px; }
.disc-card { display:flex; align-items:center; gap:12px; text-align:left; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; color:var(--ink); transition:border-color .12s, transform .1s, box-shadow .12s; }
.disc-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 12px 28px -18px color-mix(in srgb,var(--accent) 60%,transparent); }
.disc-ic { flex:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; background:color-mix(in srgb,var(--accent) 12%,var(--card)); }
.disc-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.disc-t { font-size:15px; font-weight:700; }
.disc-s { font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.disc-go { flex:none; color:var(--ink-3); font-size:15px; opacity:0; transition:opacity .12s; }
.disc-card:hover .disc-go { opacity:1; }

/* Life-area landing dashboard: a card per part of the area, at a glance. */
.area-dash { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.area-dash-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.adc-head { display:flex; align-items:center; gap:9px; padding:11px 13px; background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer; text-align:left; color:var(--ink); width:100%; }
.adc-head:hover { background:color-mix(in srgb,var(--c) 7%,transparent); }
.adc-ic { font-size:16px; line-height:1; }
.adc-l { font-size:15px; font-weight:700; }
.adc-c { font-size:12.5px; font-weight:700; color:var(--ink-2); background:color-mix(in srgb,var(--c) 14%,transparent); padding:1px 8px; border-radius:999px; }
.adc-go { margin-left:auto; color:var(--ink-3); font-size:15px; }
.adc-body { display:flex; flex-direction:column; gap:2px; padding:8px 8px 10px; }
.adc-item { display:flex; align-items:center; gap:7px; background:none; border:0; padding:6px 8px; border-radius:8px; cursor:pointer; text-align:left; color:var(--ink); font-size:14.5px; width:100%; }
.adc-item:hover { background:color-mix(in srgb,var(--c) 8%,transparent); }
.adc-item-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adc-lead { color:var(--ink-3); flex:none; }
.adc-vision { padding:8px 8px 4px; font-size:14.5px; line-height:1.5; color:var(--ink-2); font-style:italic; }
.adc-vision-edit { width:100%; border:0; background:none; resize:vertical; margin:2px 4px 4px; padding:6px 6px; font:inherit; font-size:14.5px; line-height:1.5; color:var(--ink); min-height:92px; border-radius:8px; }
.adc-vision-edit:focus { outline:none; background:color-mix(in srgb,var(--c) 6%,transparent); }
.adc-vision-edit::placeholder { color:var(--ink-3); font-style:italic; }
.adc-addgoal { align-self:flex-start; margin:4px 4px 2px; padding:6px 12px; border:1px dashed var(--line-2); border-radius:999px; background:none; color:var(--ink-2); font-size:13.5px; font-weight:600; cursor:pointer; }
.adc-addgoal:hover { border-color:var(--accent); color:var(--accent); border-style:solid; }
.adc-empty { padding:8px; font-size:13.5px; color:var(--ink-3); }
.adc-chips { display:flex; flex-wrap:wrap; gap:6px; padding:6px 8px; }
.adc-chip { font-size:13px; color:var(--ink-2); background:color-mix(in srgb,var(--c) 9%,transparent); border:1px solid var(--line); padding:3px 10px; border-radius:999px; white-space:nowrap; }
/* Open, flowing area overview: each part is a heading + its real content laid
   straight on the page (note/table cards, goal cards, task table), no boxes. */
/* The folio's tools sit two-up (half width each); Tasks and the Wall stay full
   width, since they want the room. Stacks to one column on a narrow screen. (Robin.) */
.area-flow { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px; align-items:start; }
.area-flow .area-sec[data-aflow="Tasks"] { grid-column:1 / -1; }
@media (max-width:820px){ .area-flow { grid-template-columns:1fr; } }
.area-tasks-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.area-tasks-head .area-tq-prios { margin-left:auto; }
/* On a phone the List/Board toggle + four P1-P4 chips won't fit on one line, so
   the row wraps and the chips drop to their own full-width line (flex:1 each,
   from the .tq-prios mobile rule) instead of pushing off the screen. (Robin.) */
@media (max-width:560px){
  .area-tasks-head { flex-wrap:wrap; row-gap:10px; }
  .area-tasks-head .area-tq-prios { margin-left:0; }
}
.area-sec { display:flex; flex-direction:column; gap:13px; }
.area-sec.area-sec-collapsed { gap:0; }
.area-sec-h { display:flex; align-items:center; gap:8px; width:100%; border-bottom:1px solid var(--line); padding:0 0 6px; color:var(--ink-3); }
/* Drag handle: grab to reorder. touch-action:none so a drag on the phone moves
   the section instead of scrolling the page. */
.ash-grip { flex:none; cursor:grab; color:var(--ink-3); opacity:.5; font-size:14px; line-height:1; padding:2px; touch-action:none; -webkit-user-select:none; user-select:none; }
.ash-grip:hover { opacity:1; color:var(--ink-2); }
.area-sec-h:hover .ash-grip { opacity:.85; }
.ash-grip:active { cursor:grabbing; }
/* The header proper toggles the section open/closed. */
.ash-toggle { flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:none; border:0; padding:0; cursor:pointer; text-align:left; color:inherit; }
.ash-toggle:hover { color:var(--ink); }
.ash-ic { flex:none; font-size:15px; line-height:1; color:color-mix(in srgb,var(--c) 72%,var(--ink-3)); }
.ash-l { font-family:'IM Fell English SC',Georgia,serif; font-size:15px; font-weight:400; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ash-c { flex:none; font-size:12px; font-weight:700; color:var(--ink-2); background:color-mix(in srgb,var(--c) 15%,transparent); padding:1px 8px; border-radius:999px; }
/* The → opens this section on its own (its focused tile). */
.ash-open { flex:none; margin-left:auto; background:none; border:0; cursor:pointer; font-size:15px; color:var(--ink-3); padding:2px 4px; border-radius:7px; opacity:0; transition:opacity .14s, color .12s, background .12s; }
.area-sec-h:hover .ash-open { opacity:1; }
.ash-open:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.area-sec-body { min-width:0; }
/* Drag feedback, mirroring Home's section drag. */
.area-sec.mdragging { position:relative; z-index:20; }
.area-sec.mdragging .area-sec-h { border-radius:10px; background:var(--card); box-shadow:0 14px 34px -12px rgba(0,0,0,.45); }
.area-sec.mdrop-top { box-shadow:0 -3px 0 -1px var(--accent); }
.area-sec.mdrop-bottom { box-shadow:0 3px 0 -1px var(--accent); }
/* Week ahead: a folio's seven-day planner. Co-parent clear - both sides read
   the same week at a glance. Stacked day rows work the same on phone and
   desktop; today is marked in the folio's own hue. */
.area-weeksec { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); margin:26px 0; }
.area-weeksec .awk-add { margin-left:auto; flex:none; }
/* The "Week ahead" label wears the same antique small-caps as the folio's other
   section labels (Recently viewed, Be ready…), rather than the flow sections'
   bolder accent caps - so it sits in the same voice as its neighbours. (Robin.) */
.area-weeksec .ash-l { font-family:'IM Fell English SC',Georgia,serif; font-size:15px; font-weight:400; letter-spacing:.08em; color:var(--ink-3); }
/* A clean seven-day planner inside the Week-ahead card: a date gutter, then the
   day's events as plain clickable lines (no busy chip-on-row). Rows sit within
   the card's padding - no edge bleed - with a gentle divider between days. */
/* Calendar card: page the 7-day window with back/forward arrows. (Robin.) */
.aweek-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 0 2px; }
.aweek-nav-btn { flex:none; width:34px; height:34px; border:1px solid var(--line-2); border-radius:10px; background:var(--card); color:var(--ink-2); font-size:19px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:border-color .12s, color .12s, background .12s; }
.aweek-nav-btn:hover { border-color:var(--c,var(--accent)); color:var(--ink); }
.aweek-nav-l { display:inline-flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.aweek-today { font:inherit; font-size:12px; font-weight:600; padding:3px 11px; border:1px solid var(--line-2); border-radius:999px; background:var(--paper); color:var(--ink-2); cursor:pointer; }
.aweek-today:hover { border-color:var(--c,var(--accent)); color:var(--ink); }
.aweek { display:flex; flex-direction:column; margin:0; padding:10px 0 12px; }
.awk-day { display:grid; grid-template-columns:46px 1fr; align-items:center; gap:14px; padding:9px 6px; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); min-height:48px; border-radius:10px; }
.awk-day:first-child { border-top:0; }
.awk-today { background:color-mix(in srgb,var(--c) 10%,transparent); }
.awk-date { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.awk-dow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); }
.awk-today .awk-dow { color:color-mix(in srgb,var(--c) 62%,var(--ink-2)); }
.awk-num { font-family:'Cormorant Garamond',Georgia,serif; font-size:23px; font-weight:600; line-height:1; color:var(--ink-2); font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum' 1,'tnum' 1; }
.awk-today .awk-num { color:color-mix(in srgb,var(--c) 80%,var(--ink)); }
.awk-evs { display:flex; flex-direction:column; justify-content:center; gap:2px; min-width:0; }
.awk-ev { display:flex; align-items:baseline; gap:10px; width:100%; text-align:left; padding:5px 9px; border:0; border-radius:8px; background:none; color:var(--ink); cursor:pointer; min-width:0; transition:background .12s; }
.awk-ev:hover { background:color-mix(in srgb,var(--c) 12%,transparent); }
.awk-t2 { flex:none; font-size:13px; font-weight:700; color:color-mix(in srgb,var(--c) 62%,var(--ink-2)); font-variant-numeric:tabular-nums; }
.awk-ttl { flex:0 1 auto; min-width:0; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.awk-loc { flex:none; min-width:0; font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.awk-loc::before { content:'· '; }
.awk-allday .awk-ttl { font-weight:600; color:color-mix(in srgb,var(--c) 55%,var(--ink)); }
.awk-allday::before { content:''; flex:none; width:6px; height:6px; border-radius:50%; background:var(--c); align-self:center; }
.awk-feed { opacity:.75; }
.awk-feed .awk-ttl { font-style:italic; }
.awk-empty { color:var(--ink-3); opacity:.5; font-size:15px; padding-left:2px; }
.aweek-empty { padding:28px 20px; }
.awk-note { margin:0; font-size:14px; font-style:italic; color:var(--ink-3); text-align:center; }
/* Per-day + to drop an activity onto a day, quiet until you hover the day. */
.awk-dayadd { align-self:center; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--c,var(--ink-3)); font-size:15px; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s, background .12s, border-color .12s; }
.awk-day:hover .awk-dayadd { opacity:.6; }
.awk-dayadd:hover { opacity:1 !important; background:color-mix(in srgb,var(--c) 13%,transparent); border-color:color-mix(in srgb,var(--c) 32%,transparent); }
.awk-day-empty .awk-evs { min-height:0; }
@media (hover:none){ .awk-dayadd { opacity:.5; } }
.area-vision-edit { width:100%; box-sizing:border-box; border:1px solid var(--line); background:var(--card); resize:none; overflow:hidden; padding:12px 14px; font:inherit; font-size:15.5px; line-height:1.6; color:var(--ink); min-height:82px; border-radius:12px; box-shadow:var(--shadow); }
.area-vision-edit:focus { outline:none; border-color:color-mix(in srgb,var(--c) 55%,var(--line)); }
.area-vision-edit::placeholder { color:var(--ink-3); font-style:italic; }
.area-vision-ro { font-size:16px; line-height:1.6; color:var(--ink-2); font-style:italic; }
/* Vision highlights: the best bits pulled out as pull-quotes above the full text. */
.vision-hl { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.vision-hl-q { margin:0; padding:10px 6px 10px 18px; border-left:3px solid hsl(var(--h,220) 60% 52%); font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; line-height:1.35; color:var(--ink); font-style:italic; text-wrap:balance; }
.vision-hl-tog { display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-size:13.5px; color:var(--ink-3); cursor:pointer; user-select:none; }
.vision-hl-tog input { accent-color:hsl(var(--h,220) 60% 52%); }
.vision-hl-tog:hover { color:var(--ink-2); }
.area-sec-more { align-self:flex-start; margin-top:8px; background:none; border:0; color:var(--accent); font-size:14px; font-weight:600; cursor:pointer; padding:4px 2px; }
.area-sec-more:hover { text-decoration:underline; }
@media (max-width:640px) { .area-flow { gap:24px; } }
.area-dash-shared { margin-top:20px; }
.area-dash-wall { margin-top:20px; }

.area-hero { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); margin-bottom:8px; }
/* At-a-glance dashboard on the main area page: a stats strip + recently viewed. */
.area-dash { display:flex; flex-direction:column; gap:18px; margin:20px 0 24px; }
/* Stats on the left, "Add to this area" on the right - one shared row. */
.area-dash-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.area-dash-top .area-stats { flex:1 1 auto; }
.area-dash-top .area-addnew { flex:none; align-self:center; }
.area-dash-acts { display:flex; gap:10px; align-items:center; flex:none; align-self:center; flex-wrap:wrap; justify-content:flex-end; }
.area-conn-link { background:none; border:0; color:var(--ink-3); font-size:13.5px; font-weight:600; cursor:pointer; padding:6px 6px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.area-conn-link:hover { color:var(--accent); }
/* Metric cards: one per metric, all the same size, each clicking through to its
   section. A tidy uniform grid, not a content-sized strip. (Robin.) */
/* auto-FILL (not auto-fit): keep the empty trailing tracks so each metric stays
   one column wide - the size it has at a full row - instead of a lone metric
   ballooning to the whole width. Left-aligned, normal-sized. (Robin, 2026-10-14.) */
.area-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(max(100px, 13%),1fr)); gap:11px; }
.area-stat { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; padding:16px 12px; min-height:86px; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:var(--shadow); }
.area-stat .as-n { font-family:'Cormorant Garamond',Georgia,serif; font-size:28px; font-weight:600; color:var(--ink); line-height:1; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum' 1,'tnum' 1; }
.area-stat .as-l { font-size:12.5px; font-weight:600; color:var(--ink-2); letter-spacing:.01em; }
/* The metric is a button that jumps to its section: a faint hue wash + a corner
   chevron make it read as tappable, not a static figure, and the label names
   where it goes. (Robin.) */
.area-stat-btn { cursor:pointer; font:inherit; background:color-mix(in srgb,var(--c) 6%,var(--card)); border-color:color-mix(in srgb,var(--c) 22%,var(--line)); transition:border-color .12s, transform .08s, box-shadow .12s, background .12s; }
.area-stat-btn .as-n { color:color-mix(in srgb,var(--c) 70%,var(--ink)); }
.area-stat-btn .as-go { position:absolute; top:7px; right:10px; font-size:15px; font-weight:700; line-height:1; color:color-mix(in srgb,var(--c) 55%,var(--ink-3)); opacity:.6; transition:transform .12s, opacity .12s; }
.area-stat-btn:hover { border-color:color-mix(in srgb,var(--c) 55%,var(--line)); background:color-mix(in srgb,var(--c) 13%,var(--card)); transform:translateY(-1px); box-shadow:0 8px 20px -12px rgba(0,0,0,.34); }
.area-stat-btn:hover .as-go { opacity:1; transform:translateX(2px); }
.area-stat-btn:active { transform:none; }
.area-recent-h { font-family:'IM Fell English SC',Georgia,serif; font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:400; margin-bottom:11px; }
/* Almanac voice: the main section labels across the app wear the antique Fell
   small-caps too, so the whole book speaks the same hand. (Robin.) */
.home-sec-h, .sub-h, .col-h, .ov-h, .goal-group-h, .cts-sec-h, .trk-group-h,
.kcol-h, .rv-cardsec-h, .sp-cat-col-h, .home-dl-h, .awt-h, .adv-acts-h, .cal-search-h h2, .wb-recent-h { font-family:'IM Fell English SC',Georgia,serif; font-weight:400; }
.area-rv { display:flex; flex-direction:column; gap:9px; }
.area-rv-item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px 16px; border:1px solid var(--line); border-radius:13px; background:var(--card); box-shadow:var(--shadow); color:var(--ink); font-size:15.5px; transition:border-color .12s, transform .12s, box-shadow .12s; }
.area-rv-item:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); box-shadow:0 8px 20px -12px rgba(0,0,0,.34); }
.area-rv-ic { flex:none; color:var(--accent); font-size:15px; }
.area-rv-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* One "Add to this area" dropdown in place of the old row of + buttons. */
.area-addnew { position:relative; }
.area-addnew .addnew-btn { min-height:46px; padding:11px 22px; }
/* Area sections as equal icon tiles + one expanding panel (like Home/Toolbox). */
/* Tiles balance into two tidy rows: columns = half the tile count (min 3). */
.area-tiles { display:grid; grid-template-columns:repeat(var(--cols, 5), minmax(0, 1fr)); gap:12px; margin:8px 0 18px; }
/* The Vision & Goals tab strip shares its row with "Add to this area", pinned to
   the right. The tabs take the space; the pill sits centred beside them. */
.area-tabs-row { display:flex; align-items:center; gap:14px; }
.area-tabs-row .area-tabs { flex:1 1 auto; }
.area-tabs-add { flex:none; }
/* On a phone the tabs need the whole width, so the pill drops below them,
   right-aligned - never squeezed onto the tab row. */
@media (max-width:560px){
  .area-tabs-row { flex-direction:column; align-items:stretch; gap:10px; }
  .area-tabs-row .area-tabs { margin-bottom:0; }
  .area-tabs-add { display:flex; justify-content:flex-end; }
}
@media (max-width:560px){ .area-tiles { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.area-tile { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:flex; flex-direction:column; align-items:center; gap:7px; padding:18px 10px 15px; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; position:relative; transition:border-color .12s, transform .08s; }
.area-tile:hover { border-color:var(--line-2); transform:translateY(-1px); }
.area-tile.on { border-color:var(--c); box-shadow:0 10px 26px -16px color-mix(in srgb,var(--c) 60%,transparent); }
.at-ic { font-size:21px; line-height:1; }
.at-l { font-size:12.5px; font-weight:600; color:var(--ink-2); text-align:center; line-height:1.2; }
.area-tile.on .at-l { color:var(--ink); }
.at-c { position:absolute; top:7px; right:9px; font-size:11px; font-weight:700; color:var(--ink-3); background:var(--paper-2); border-radius:999px; padding:1px 7px; min-width:18px; text-align:center; }
.area-tile.on .at-c { color:var(--c); background:color-mix(in srgb,var(--c) 14%,var(--card)); }
/* The three primary tabs (Overview / Goals / Bucket list): a clean horizontal row,
   icon + label + count inline, rather than tall tiles. */
.area-tabs .area-tile { flex-direction:row; justify-content:center; gap:9px; padding:13px 12px; }
.area-tabs .at-ic { font-size:18px; }
.area-tabs .at-l { font-size:15px; }
.area-tabs .at-c { position:static; top:auto; right:auto; margin-left:1px; }
@media (max-width:560px){ .area-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* The tab-controlled top card sits a touch prouder than the cards below it. */
.area-top-card { border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
/* The tab panel is a centered flex row (inherited from .area-card), so the goals
   wrapper would otherwise shrink to a single grid track and stack the cards in one
   tall column. Let it fill the panel, and on desktop lay the goal cards out three
   to a row. */
.area-top-card > .area-vg { flex:1 1 auto; min-width:0; }
@media (min-width:821px) {
  .area-vg .goal-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.atp-back { margin-left:auto; font-size:13px; }
/* Each part of a life area is its own card now (not one big panel). The panel is a
   plain column; the cards inside carry the frame. */
.area-tilepanel { border:none; background:none; box-shadow:none; padding:0; display:flex; flex-direction:column; gap:16px; }
.area-card,
.area-flow .area-sec,
.area-dash-files, .area-dash-links, .area-dash-shared, .area-dash-wall {
  border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:18px 20px;
}
/* Files & photos and Links share a row, half each; one alone fills the width; both
   stack on a narrow screen. */
.area-dash-fl { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-top:20px; align-items:stretch; }
.area-dash-fl > .area-dash-files, .area-dash-fl > .area-dash-links, .area-dash-fl > .area-dash-shared { margin-top:0; }
/* Recently viewed | Do next - two half-width panels sharing a row (stack on a
   narrow screen via the auto-fit grid above). (Robin.) */
/* The quick rows (Who has access | Do next, then Recently viewed) are a fixed
   two-up grid so a lone panel stays HALF width (not stretched full by auto-fit),
   and every row carries a top gap - padding is always there. (Robin.) */
.area-quickrow { grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:24px; align-items:start; }
/* Week ahead rides in a quick row now (half, beside Recently viewed), so drop the
   standalone vertical margin it carries when it's a full-width section. (Robin.) */
.area-quickrow > .area-weeksec { margin:0; }
@media (max-width:640px){ .area-quickrow { grid-template-columns:1fr; } }
.area-half { margin:0; padding:15px 17px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); }
.area-half .area-recent-h, .area-half .feed-grp-h { margin-bottom:11px; }
.area-half .area-rv { gap:8px; }
.area-half .today-cal { display:flex; flex-direction:column; gap:5px; }
/* One consistent heading style across the area's Wall / Files / Links / Shared
   panels, in the area's feature colour. (Links was a serif odd-one-out.) */
.area-dash-wall > .home-sec-h,
.area-dash-shared > .home-sec-h,
.area-dash-files .att-h,
.area-dash-links .xlinks-h {
  font-family:inherit; font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; margin:0 0 12px; color:hsl(var(--h,220) 48% 58%);
}
.area-dash-files .att-h .att-hint { color:var(--ink-3); text-transform:none; letter-spacing:0; font-weight:400; }
.area-flow { gap:16px; }
.area-flow .area-sec.area-sec-collapsed { padding-bottom:14px; }
.area-sec-h { border-bottom:none; }
.area-tab-empty { display:flex; flex-direction:column; align-items:center; gap:14px; padding:34px 20px; text-align:center; color:var(--ink-3); }
.area-tab-empty .area-tab-add { max-width:280px; }
.atp-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.atp-t { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:9px; }
.atp-ic { font-size:17px; }
/* The vision card + textareas already have their own frames; drop the double border inside the panel. */
.area-tilepanel .vision-card { box-shadow:none; }
.area-tilepanel .area-wall-ta { min-height:200px; }
.area-hero h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(30px,4.5vw,44px); font-weight:500; display:flex; align-items:center; gap:12px; margin-top:4px; }
.area-hero h1 .ac-dot { width:15px; height:15px; background:hsl(var(--h,220) 60% 52%); }
/* The area title is editable in place — click to rename. */
.area-title-edit { flex:1; min-width:0; font:inherit; color:inherit; background:transparent; border:0; padding:2px 6px; margin:-2px -6px; border-radius:8px; transition:background .12s,box-shadow .12s; }
.area-title-edit:hover { background:var(--paper-2); }
.area-title-edit:focus-visible { outline:none; background:var(--card); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent); }
.area-meta { color:var(--ink-3); font-size:15px; margin-top:6px; }
.area-meta .am-done { color:var(--done,#4a7a52); }
.area-meta-link { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); text-underline-offset:2px; }
.area-meta-link:hover { color:var(--accent); text-decoration-color:var(--accent); }
/* Area overview: the ▾ toggle on the title row, and the collapsible dashboard. */
.area-ov-toggle { flex:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-3); font-size:15px; line-height:1; transition:transform .15s,border-color .12s,color .12s; }
.area-ov-toggle:hover { border-color:var(--accent); color:var(--accent); }
.area-ov-toggle.on { transform:rotate(180deg); border-color:var(--accent); color:var(--accent); }
.area-ov { margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px; }
.ov-lead { padding-bottom:14px; border-bottom:1px solid var(--line); }
.ov-lead-t { font-size:16px; line-height:1.5; color:var(--ink-2); }
.ov-lead-t b { color:var(--ink); font-weight:600; font-style:italic; }
.ov-lead-s { margin-top:5px; font-size:13px; color:var(--ink-3); text-transform:lowercase; letter-spacing:.01em; }
.ov-metrics { display:flex; flex-wrap:wrap; gap:8px; }
.ov-metric { display:inline-flex; align-items:baseline; gap:5px; padding:7px 13px; border-radius:999px; background:var(--paper-2); font-size:13.5px; color:var(--ink-3); }
.ov-metric b { font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums; }
.ov-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .ov-cols { grid-template-columns:1fr; } }
.ov-block { min-width:0; }
.ov-h { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
/* Colour block: a collapsible header showing the current colour; options hidden. */
.ov-colour-h { width:100%; font-family:inherit; background:none; border:0; cursor:pointer; transition:color .12s; }
.ov-colour-h[aria-expanded="false"] { margin-bottom:0; }
.ov-colour-h:hover { color:var(--ink-2); }
.ov-colour-right { display:inline-flex; align-items:center; gap:10px; }
.ov-colour-cur { width:16px; height:16px; border-radius:50%; background:hsl(var(--h,220) 60% 52%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
.ov-colour-chev { color:var(--ink-3); font-size:11px; }
.ov-invite { padding:5px 11px; font-size:12.5px; font-weight:600; text-transform:none; letter-spacing:0; border-radius:999px; }
.ov-people { display:flex; flex-direction:column; gap:6px; }
.ov-person { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:6px; border-radius:10px; background:none; border:0; cursor:pointer; }
.ov-person:hover { background:var(--paper-2); }
.ov-person .fr-av { flex:none; }
.ov-person-body { min-width:0; display:flex; flex-direction:column; gap:1px; }
.ov-person-name { font-size:14.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-person-sub { font-size:12px; color:var(--ink-3); }
.fr-av-photo { background-size:cover; background-position:center; color:transparent; }
.ov-you-tag { display:inline-block; margin-left:4px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:999px; padding:1px 7px; vertical-align:middle; }
.ov-acts { display:flex; flex-direction:column; gap:2px; }
.ov-act { display:flex; align-items:center; gap:9px; padding:6px 4px; border-bottom:1px solid var(--line); }
.ov-act:last-child { border-bottom:0; }
.ov-act-ic { flex:none; width:20px; text-align:center; color:var(--ink-3); font-size:14px; }
.ov-act-t { flex:1; min-width:0; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-act-time { flex:none; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ov-act-btn { width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer; }
.ov-act-btn:last-child { border-bottom:0; }
.ov-act-btn:hover .ov-act-t { color:var(--accent); }
.ov-muted { color:var(--ink-3); font-size:14px; padding:4px 0; }
.ov-sections { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.ov-secgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:6px 14px; }
.ov-sectog { display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink-2); cursor:pointer; padding:3px 0; }
.ov-sectog input { width:17px; height:17px; accent-color:var(--accent); flex:none; }
/* Per-function settings matrix: on/off + private/shared (+ who), one row each. */
.ov-sections { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); }
.ovs-list { display:flex; flex-direction:column; }
.ovs-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 0; border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.ovs-row:first-child { border-top:0; }
.ovs-vis { display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink); cursor:pointer; min-width:150px; flex:1; }
.ovs-vis input { width:17px; height:17px; accent-color:var(--accent); flex:none; }
.ovs-lock { flex:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; padding:4px 11px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-3); transition:border-color .12s, background .12s, color .12s; }
.ovs-lock.on { border-color:color-mix(in srgb,var(--c,var(--accent)) 45%,var(--line)); background:color-mix(in srgb,var(--c,var(--accent)) 13%,var(--card)); color:var(--ink); }
.ovs-sharenote { flex:none; font-size:12px; color:var(--ink-3); font-style:italic; }
.ovs-row-seg { gap:12px; }
.ovs-name { flex:1; min-width:120px; font-size:14.5px; color:var(--ink); }
.ovs-seg { flex:none; display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--paper); }
.ovs-segb { font:inherit; font-size:12.5px; font-weight:600; padding:5px 11px; border:0; border-left:1px solid var(--line); background:transparent; color:var(--ink-3); cursor:pointer; transition:background .12s, color .12s; }
.ovs-segb:first-child { border-left:0; }
.ovs-segb.on { background:color-mix(in srgb,var(--c,var(--accent)) 18%,var(--card)); color:var(--ink); }
.ovs-segb:not(.on):hover { background:color-mix(in srgb,var(--ink) 5%,transparent); color:var(--ink-2); }
.ovs-mems { display:flex; flex-wrap:wrap; gap:5px; }
.ovs-mem { min-width:27px; height:27px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-3); font-size:12px; font-weight:700; cursor:pointer; transition:border-color .12s, background .12s, color .12s; }
.ovs-mem.on { border-color:color-mix(in srgb,var(--c,var(--accent)) 50%,var(--line)); background:color-mix(in srgb,var(--c,var(--accent)) 16%,var(--card)); color:var(--ink); }
.ovs-switch { display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-3); }
.ovs-shareall { margin-top:12px; font-size:13px; }
/* Sections & sharing as an icon-tile grid: a tile per piece of the Folio; tapping
   one expands a panel with its on/only-you/shared control + connect/add actions.
   (The old Connections hub folded in here.) */
.ovt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; }
.ovt-tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:15px 8px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s, transform .08s; }
.ovt-tile:hover { border-color:var(--c,var(--accent)); background:var(--card); transform:translateY(-1px); }
.ovt-tile.on { border-color:var(--c,var(--accent)); background:color-mix(in srgb,var(--c,var(--accent)) 15%,var(--card)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--accent)) 42%,transparent); }
.ovt-tile.on .ovt-ic { color:var(--c,var(--accent)); }
.ovt-tile.ovt-off { opacity:.5; }
.ovt-ic { font-size:21px; line-height:1; }
.ovt-l { font-size:13px; font-weight:600; text-align:center; line-height:1.2; }
.ovt-c { position:absolute; top:7px; right:9px; font-size:12px; font-weight:700; color:var(--c,var(--accent)); line-height:1; }
.ovt-panel { margin-top:12px; padding:16px 16px 18px; border:1px solid color-mix(in srgb,var(--c,var(--accent)) 30%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--c,var(--accent)) 5%,var(--card)); display:flex; flex-direction:column; gap:13px; }
.ovt-panel-h { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--ink); }
.ovt-ph-ic { font-size:18px; }
.ovt-ctl { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.ovt-ctl-l { font-size:13px; font-weight:600; color:var(--ink-3); flex:none; }
.ovt-onoff { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-2); cursor:pointer; }
.ovt-onoff input { width:18px; height:18px; accent-color:var(--c,var(--accent)); flex:none; }
.ovt-acts { display:flex; flex-wrap:wrap; gap:8px; }
.ovt-act { font:inherit; font-size:13px; font-weight:500; padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink-2); cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.ovt-act:hover { border-color:var(--c,var(--accent)); color:var(--ink); background:var(--card); }
.ovt-members { margin-top:2px; }
/* The folio page's tools grid reuses the settings .ovt-* square cards. The
   wrapper carries the folio hue so the tiles + panel pick up --c. (Robin.) */
.area-tools { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); margin-top:24px; }
.area-tools .ovt-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.area-tools .ovt-tile { padding:18px 10px; gap:9px; }
.area-tools .ovt-ic { font-size:24px; }
.area-tool-panel { margin-top:14px; }
.area-tool-body { display:flex; flex-direction:column; gap:14px; }
.area-tool-body > .attachments, .area-tool-body > .xlinks { margin:0; }
/* Notepad shares the half-row with Folio Access; it is always open (static header,
   no collapse chevron). (Robin, 2026-10-11.) */
.area-notepad-h { cursor:default; }
.area-notepad-body { margin-top:10px; }
.area-notepad .area-wall-ta { width:100%; box-sizing:border-box; min-height:150px; }
/* Filed emails: full-width cards with the subject and the start of the message. */
.email-list { display:flex; flex-direction:column; gap:10px; }
.email-card { display:flex; flex-direction:column; gap:6px; width:100%; text-align:left; font:inherit; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); cursor:pointer; box-shadow:var(--shadow-sm); transition:border-color .12s, transform .08s; }
.email-card:hover { border-color:var(--c,var(--accent)); transform:translateY(-1px); }
.ec-top { display:flex; align-items:center; gap:8px; min-width:0; }
.ec-ic { flex:none; color:var(--ink-3); font-size:14px; }
.ec-subj { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ec-snip { color:var(--ink-3); font-size:13px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Latest Updates: a shared activity wall for the folio - who added or changed
   what, newest first. (Robin, 2026-10-11.) */
.area-updates { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); margin-top:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:18px 20px; }
.upd-wall { display:flex; flex-direction:column; margin-top:10px; }
/* "My Lifebook" feed: one reverse-chronological stream of birthdays, nudges,
   snooze-returns and shared-Life-Space activity, newest first, each row clearable
   with an ×. (Robin, 2026-10-15.) */
.lead-lifebook .lb-feed { display:flex; flex-direction:column; }
.lb-item { position:relative; display:flex; align-items:flex-start; gap:12px; padding:12px 10px; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); border-radius:10px; }
.lb-item:first-child { border-top:0; }
.lb-click { cursor:pointer; transition:background .12s; }
.lb-click:hover { background:var(--paper-2); }
.lb-click:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.lb-ic { flex:none; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:16px; background:var(--paper-2); color:var(--ink-2); font-variant-emoji:text; }
.lb-ic:has(> .lb-check) { background:none; }
.lb-b { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; padding-right:26px; }
.lb-t { font-size:16px; color:var(--ink); line-height:1.4; overflow-wrap:anywhere; }
.lb-t b { font-weight:600; }
.lb-m { font-size:13px; color:var(--ink-3); }
.lb-check { width:34px; height:34px; flex:none; border-radius:50%; border:1.5px solid var(--line-2); background:var(--card); color:transparent; font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .12s,color .12s,background .12s; }
.lb-check:hover { border-color:var(--accent); color:var(--accent); }
.lb-check:active { background:var(--paper-2); }
.lb-x { position:absolute; top:9px; right:4px; width:26px; height:26px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-size:18px; line-height:1; color:var(--ink-3); background:transparent; cursor:pointer; opacity:0; transition:opacity .12s,color .12s,background .12s; }
.lb-item:hover .lb-x, .lb-item:focus-within .lb-x { opacity:.65; }
.lb-x:hover { opacity:1; color:var(--danger,#c0392b); background:var(--paper-2); }
@media (hover:none){ .lb-x { opacity:.5; } }
.upd-row { display:flex; align-items:flex-start; gap:12px; padding:11px 4px; border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); }
.upd-row:first-child { border-top:0; }
/* A folio-feed item that's new since your last visit: a soft gold rail. */
.upd-new { border-left:2px solid var(--accent); padding-left:10px; margin-left:-12px; border-top-color:transparent; }
.home-foliofeed .home-sec-h .muted { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:999px; padding:1px 9px; font-size:12.5px; font-weight:700; }
.upd-click { cursor:pointer; border-radius:10px; transition:background .12s; }
.upd-click:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.upd-ic { flex:none; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:15px; background:color-mix(in srgb,var(--c) 13%,var(--card)); color:color-mix(in srgb,var(--c) 68%,var(--ink)); }
.upd-b { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.upd-t { font-size:14.5px; color:var(--ink-2); line-height:1.4; }
.upd-t b { color:var(--ink); font-weight:600; }
.upd-ttl { color:var(--ink); font-weight:500; }
.upd-when { font-size:12px; color:var(--ink-3); }
@media (max-width:560px){ .area-tools .ovt-grid { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; } }
.ov-reviews { margin-top:14px; }
.ov-revtog { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-2); cursor:pointer; padding:7px 0; line-height:1.45; }
.ov-revtog input { width:18px; height:18px; accent-color:var(--accent); flex:none; margin-top:1px; }
.ov-revtog b { color:var(--ink); font-weight:600; }
.wol-leg-star { color:var(--accent); margin-right:3px; }
.area-ov-att { margin:0; }
/* Collapsible section headers on a life area page. */
.area-sec-h { cursor:pointer; display:flex; align-items:center; gap:7px; user-select:none; }
.area-sec-h .acw-chev { font-size:12px; color:var(--ink-3); flex:none; }
.area-sec-h:hover { color:var(--ink); }
/* Members bar: horizontal cards, tap to message; "+N more" expands the list. */
.mem-row { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.note-members { margin-top:22px; }
/* Opt-in sharing: lock/unlock each tool, choose all members or a few. */
.area-share-ctl { margin-top:16px; padding-top:15px; border-top:1px solid var(--line); }
.as-note { margin:0 0 12px; font-size:13.5px; color:var(--ink-3); line-height:1.5; }
.as-choose { cursor:pointer; font:inherit; font-size:14px; font-weight:600; color:var(--priv,#8a6d3b); padding:9px 15px; border-radius:11px; border:1px solid color-mix(in srgb,var(--priv,#8a6d3b) 35%,var(--line)); background:color-mix(in srgb,var(--priv,#8a6d3b) 8%,var(--card)); }
.as-choose:hover { background:color-mix(in srgb,var(--priv,#8a6d3b) 15%,var(--card)); }
.as-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.as-row { display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.as-row.on { border-color:color-mix(in srgb,var(--c,var(--accent)) 30%,var(--line)); background:color-mix(in srgb,var(--c,var(--accent)) 5%,var(--card)); }
.as-lock { flex:none; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--line); background:var(--paper); font-size:15px; cursor:pointer; transition:border-color .12s, background .12s; }
.as-row.on .as-lock { border-color:color-mix(in srgb,var(--c,var(--accent)) 45%,var(--line)); background:color-mix(in srgb,var(--c,var(--accent)) 12%,var(--card)); }
.as-sec-ic { flex:none; font-size:14px; color:var(--ink-3); }
.as-sec-n { font-size:14.5px; font-weight:600; color:var(--ink); }
.as-mems { display:flex; flex-wrap:wrap; gap:5px; margin-left:auto; }
.as-mem { min-width:28px; height:28px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-3); font-size:12px; font-weight:700; cursor:pointer; transition:border-color .12s, background .12s, color .12s; }
.as-mem.on { border-color:color-mix(in srgb,var(--c,var(--accent)) 50%,var(--line)); background:color-mix(in srgb,var(--c,var(--accent)) 16%,var(--card)); color:var(--ink); }
.as-shareall { font-size:13px; }
.as-empty { font-size:13.5px; color:var(--ink-3); font-style:italic; padding:4px 2px; }
.note-wall { margin-top:20px; }
.note-wall-h { cursor:pointer; display:flex; align-items:center; gap:8px; }
.note-wall-ta { min-height:120px; }
.mem-card { display:inline-flex; align-items:center; gap:9px; padding:7px 13px 7px 8px; border:1px solid var(--line); border-radius:999px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; }
.mem-card:hover { border-color:var(--accent); }
.mem-card .fr-av { flex:none; width:28px; height:28px; font-size:12px; }
.mem-name { font-size:14.5px; color:var(--ink); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mem-msg { font-size:13px; opacity:.55; }
.mem-card:hover .mem-msg { opacity:1; }
.mem-card-me { border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); }
.mem-you { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); background:var(--paper-2); border-radius:999px; padding:2px 7px; }
/* The folio owner's tag on a folio shared with me - gold, to set it apart from "you". */
.mem-owner { color:var(--accent-ink); background:var(--accent); }
.mem-card-owner { cursor:default; }
.mem-more, .mem-invite { flex:none; padding:8px 14px; border-radius:999px; border:1px dashed var(--line-2); background:transparent; color:var(--ink-3); font-size:13.5px; font-weight:600; cursor:pointer; }
.mem-more:hover, .mem-invite:hover { border-color:var(--accent); color:var(--accent); }
.mem-empty { color:var(--ink-3); font-size:14.5px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* Area wall: a collapsible shared scratchpad. */
.area-wall-h { cursor:pointer; display:flex; align-items:center; gap:6px; }
.area-wall-h .acw-chev { font-size:12px; color:var(--ink-3); }
.area-wall-ta { min-height:160px; }

.area-tasks { display:flex; flex-direction:column; }
.area-task { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:flex; align-items:center; gap:13px; padding:12px 4px; border-bottom:1px solid var(--line); }
.area-task .check { width:21px; height:21px; flex:none; border-radius:6px; border:2px solid var(--c); background:none; color:transparent; display:grid; place-items:center; font-size:12px; cursor:pointer; }
.area-task .check:hover { background:color-mix(in srgb,var(--c) 16%,transparent); }
.area-task .t { flex:1; min-width:0; font-size:16.5px; cursor:text; }
.area-task .prio { font-size:13px; font-weight:600; color:var(--ink-3); } .area-task .prio.P1 { color:var(--accent); }

/* favourite star, shared across views */
.star { flex:none; color:var(--ink-3); font-size:17px; padding:0 4px; opacity:0; transition:opacity .12s,color .12s; }
.task:hover .star, .star.on, .note-crumbs .star, .tbl-head .star { opacity:1; }
/* A favourited star must read clearly - a vivid gold, not the muted brand gold. */
.star.on { color:#eea90b; }
.star:hover { color:#eea90b; }
@media (hover:none){ .star { opacity:1; } }

.pane-head { margin-bottom:20px; }
.pane-head h1 { font-size:clamp(28px,4vw,38px); }
.area-chips-wrap { margin:14px 0 20px; }
.area-chips-tog { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:4px 4px; border-radius:8px; margin-bottom:10px; }
.area-chips-tog:hover { color:var(--ink); }
.area-chips-tog .acw-chev { font-size:10px; width:9px; }
.area-chips-tog .acw-active { text-transform:none; letter-spacing:0; font-weight:500; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:999px; padding:1px 10px; margin-left:2px; }
.area-chips { display:flex; flex-wrap:wrap; gap:8px; }
.area-chips-wrap.collapsed .area-chips { display:none; }
.area-chips-wrap.collapsed { margin-bottom:12px; }
.area-filter { display:none; }  /* chips on desktop; this dropdown on mobile */
/* Completed tasks: hidden by default, revealed by 'Show completed'. */
.show-completed { margin-top:18px; font-size:15px; }
.completed-sec { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.completed-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.completed-head h2 { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:500; }
.completed-q { display:block; width:100%; max-width:360px; margin-bottom:14px; }
/* Per-page search box at the top of Tasks / Notes / Calendar. */
.list-search { display:block; width:100%; max-width:none; margin:0 0 18px; padding:12px 16px; font-size:16px; }
/* Search box + accent add-button sharing one row (Tasks, and mirrored in the
   table toolbar). The search flexes to fill; the button keeps its size. */
.list-head { display:flex; gap:12px; align-items:stretch; margin:0 0 18px; }
.list-head .list-search { flex:1; width:auto; min-width:0; margin:0; }
/* Tasks: the search / view-toggle / add row pins under the breadcrumb so it stays
   reachable down a long list; the sticky table head clears it too. (Robin.) */
body[data-view='tasks'] .list-head { position:sticky; top:calc(44px + var(--tasks-crumbh,46px)); z-index:9; background:var(--paper); margin:0 calc(-1 * clamp(20px,4vw,52px)) 18px; padding:11px clamp(20px,4vw,52px) 12px; border-bottom:1px solid var(--line); }
body[data-view='tasks'] .tasks-scroll table.ttable thead th { top:calc(44px + var(--tasks-crumbh,46px) + var(--tasks-headh,58px)); }
@media (max-width:820px){
  body[data-view='tasks'] .list-head { top:calc(var(--navh,56px) + var(--tasks-crumbh,46px)); }
  body[data-view='tasks'] .tasks-scroll table.ttable thead th { top:calc(var(--navh,56px) + var(--tasks-crumbh,46px) + var(--tasks-headh,58px)); }
}
.notes-toolbar { display:flex; gap:10px; align-items:stretch; margin:0 0 18px; flex-wrap:wrap; }
/* The controls pin just under the sticky breadcrumb and the list scrolls under them,
   so search + filters + sort are always in reach in a long list. Negative side
   margins let the blurred bar span the pane's full width (cancelling its padding). */
.notes-toolbar-sticky { position:sticky; top:calc(44px + var(--notes-crumbh,44px)); z-index:8; background:var(--paper); margin:0 calc(-1 * clamp(20px,4vw,52px)) 16px; padding:10px clamp(20px,4vw,52px) 12px; border-bottom:1px solid var(--line); }
/* Mobile: the toolbar (search, Todas/Notas/Tabelas chips, filters) scrolls with
   the page rather than staying pinned - nothing in it needs to stick. (Robin.) */
@media (max-width:820px){ .notes-toolbar-sticky { position:static; top:auto; z-index:auto; margin:0 0 14px; padding:0; background:none; border-bottom:0; backdrop-filter:none; } }
.notes-toolbar .list-search { flex:1; min-width:180px; margin:0; }
.notes-toolbar .notes-sort { flex:none; width:auto; max-width:none; font-size:15px; padding:12px 14px; }
.notes-toolbar .list-search { flex:1 1 180px; min-width:140px; max-width:360px; }
.notes-toolbar .notes-new { flex:none; padding:12px 18px; }
/* Desktop: the make buttons sit inline, right of the search bar. */
.notes-make-inline { display:inline-flex; gap:10px; margin-left:auto; align-items:stretch; }
.notes-makebar { display:none; }
.notes-filters-sticky { display:none; }
/* Mobile: search, chips and the make buttons scroll; only the area + sort
   dropdowns stay pinned, in their own sticky bar just under the breadcrumb.
   (Robin.) */
@media (max-width:820px){
  .notes-make-inline { display:none; }
  .notes-makebar { display:flex; gap:10px; margin:0 0 16px; }
  .notes-toolbar-sticky > .notes-area, .notes-toolbar-sticky > .notes-sort { display:none; }
  .notes-filters-sticky {
    display:flex; gap:10px; align-items:center;
    position:sticky; top:calc(var(--navh,56px) + var(--notes-crumbh,44px)); z-index:8;
    background:var(--paper); margin:0 -18px 14px; padding:10px 18px; border-bottom:1px solid var(--line);
  }
  .notes-filters-sticky .notes-area, .notes-filters-sticky .notes-sort { flex:1 1 0; min-width:0; max-width:none; }
}
.note-type-chips { display:inline-flex; flex:none; gap:2px; padding:3px; background:var(--paper-2); border:1px solid var(--line-2); border-radius:12px; }
.note-type-chips .ntype { padding:8px 14px; border-radius:9px; font-size:14.5px; color:var(--ink-2); white-space:nowrap; }
.note-type-chips .ntype:hover { color:var(--ink); }
.note-type-chips .ntype.on { background:var(--card); color:var(--accent); box-shadow:var(--shadow); font-weight:500; }
/* The Note · Table type switch in a note/table header. */
/* A quiet 'Turn into table/note' action, not a view slider. */
.ntt-conv { font-size:13px; color:var(--ink-3); }
.ntt-conv:hover { color:var(--accent); border-color:var(--accent); }
.list-head .add-btn.wide { flex:none; }
.cal-search-h { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.cal-search-h h2 { margin:0; }
.cal-search-note { color:var(--ink-3); font-size:13px; }
.completed-sec .tr-task .tc-title .t { color:var(--ink-3); text-decoration:line-through; }
.area-chip { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); font-size:15px; transition:border-color .12s,color .12s; }
.area-chip:hover { color:var(--ink); }
.area-chip.on { border-color:var(--c); color:var(--ink); background:color-mix(in srgb,var(--c) 8%,transparent); }
.area-chip .cd { width:9px; height:9px; border-radius:50%; background:var(--c); }
.area-chip b { font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* ── tasks table (sortable) ──────────────────────── */
table.ttable { border-collapse:collapse; width:100%; font-size:16.5px; }
table.ttable th { text-align:left; padding:8px 12px; border-bottom:1px solid var(--line-2); font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600; white-space:nowrap; }
table.ttable th.sortable { cursor:pointer; user-select:none; }
table.ttable th.sortable:hover { color:var(--ink); }
/* Tasks list: the column header row (Task / Priority / Area / Added) stays pinned
   just under the tabstrip while you scroll the tasks. The default .tbl-scroll sets
   overflow-x:auto, which would trap sticky against the card; on the tasks list we
   let the window be the scroller so the header pins to the page instead. */
.tasks-scroll { overflow:visible; }
.tasks-scroll table.ttable thead th { position:sticky; top:44px; z-index:6; background:var(--card); }
@media (max-width:820px){
  .tasks-scroll { overflow-x:auto; }
  .tasks-scroll table.ttable thead th { top:var(--navh,56px); }
}
.sarrow { color:var(--accent); margin-left:4px; }
table.ttable td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.ttable tr:last-child td { border-bottom:0; }
.tr-task { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); }
.tr-task:hover { background:var(--paper-2); }
.tr-task.done .tc-title .t { text-decoration:line-through; color:var(--ink-3); }
.tc-done { width:34px; text-align:center; }
.tc-title { width:auto; } .tc-title .t { cursor:text; }
.tc-title .t-url { color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:2px; }
.t-untitled { color:var(--ink-3); font-style:italic; }
.tc-date { color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; width:80px; }
.tc-act { width:70px; text-align:right; white-space:nowrap; }
.row-chev { display:none; }   /* mobile-only open affordance (see the tasks card block) */
.tr-task .star { opacity:0; } .tr-task:hover .star, .tr-task .star.on { opacity:1; }
.tr-task .x { opacity:0; margin-left:4px; } .tr-task:hover .x { opacity:1; }
.ttable .check { width:20px; height:20px; border-radius:6px; border:2px solid var(--c); color:transparent; display:grid; place-items:center; font-size:12px; margin:0 auto; }
.ttable .tr-task.done .check { background:var(--done); border-color:var(--done); color:#fff; }
.ttable .tag { font-size:13px; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 40%,transparent); padding:3px 10px; border-radius:999px; white-space:nowrap; }
.ttable .prio { font-size:13px; font-weight:600; color:var(--ink-3); } .ttable .prio.P1 { color:var(--accent); }

/* ── command palette (⌘K) ────────────────────────── */
.pal-bg { position:fixed; inset:0; z-index:60; background:rgba(20,16,24,.34); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; }
.pal { width:min(620px,92vw); background:var(--card); border:1px solid var(--line-2); border-radius:16px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); overflow:hidden; }
.recur-dialog { width:min(420px,92vw); background:var(--card); border:1px solid var(--line-2); border-radius:16px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); padding:22px; }

/* Move-note sheet: a calm, considered chooser (top level / a life area / another note). */
.mv-bg { position:fixed; inset:0; z-index:120; background:color-mix(in srgb,var(--ink) 34%,transparent); backdrop-filter:blur(4px); display:flex; align-items:flex-start; justify-content:center; padding:11vh 16px 16px; animation:mv-fade .16s ease; }
@keyframes mv-fade { from { opacity:0; } to { opacity:1; } }
.mv-panel { width:min(500px,96vw); max-height:78vh; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line-2); border-radius:20px; box-shadow:0 36px 90px -28px rgba(0,0,0,.6); overflow:hidden; animation:mv-rise .2s cubic-bezier(.2,.8,.2,1); }
@keyframes mv-rise { from { transform:translateY(10px) scale(.985); opacity:0; } to { transform:none; opacity:1; } }
.mv-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 12px; }
.mv-title { font-family:'Cormorant Garamond',Georgia,serif; font-size:24px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.mv-sub { font-size:13.5px; color:var(--ink-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:360px; }
.mv-x { flex:none; width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--paper); color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer; }
.mv-x:hover { border-color:var(--accent); color:var(--accent); }
.mv-searchwrap { position:relative; margin:0 20px 6px; }
.mv-search-ic { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:16px; pointer-events:none; }
.mv-search { width:100%; box-sizing:border-box; padding:11px 14px 11px 38px; font-size:15px; font-family:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); border-radius:12px; }
.mv-search:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.mv-scroll { overflow-y:auto; padding:6px 12px 14px; }
.mv-group { padding:6px 0 2px; }
.mv-glabel { font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding:8px 8px 6px; }
.mv-opt { display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; text-align:left; padding:10px 12px; border:1px solid transparent; border-radius:12px; background:none; cursor:pointer; transition:background .12s,border-color .12s; }
.mv-opt:hover { background:var(--paper-2); border-color:var(--line); }
.mv-ic { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--paper-2); color:var(--ink-3); font-size:15px; }
.mv-ic-top { color:var(--accent); }
.mv-dot { flex:none; width:14px; height:14px; border-radius:50%; margin:0 8px; box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 6%,transparent); }
.mv-opt-b { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.mv-opt-t { font-size:15.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mv-opt-s { font-size:12.5px; color:var(--ink-3); }
.mv-cur { flex:none; font-size:11.5px; font-weight:600; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); padding:3px 9px; border-radius:999px; }
.mv-empty { padding:20px 12px; text-align:center; color:var(--ink-3); font-size:14px; }

/* "Private to me" toggle + lock badges (per-item privacy inside a shared area). */
.pv-toggle { margin:10px 0 2px; align-items:flex-start; gap:10px; padding:11px 15px; }
.pv-toggle input { margin-top:2px; }
.pv-lbl { display:flex; flex-direction:column; }
.pv-toggle.on .pv-lbl { color:var(--ink); }
.tc-lock { flex:none; margin-left:6px; font-size:12px; opacity:.7; }
/* "Private" marker: a labelled chip (not a bare padlock) so it's obvious an item
   is yours alone inside a shared Folio, plus a card treatment (dashed edge +
   faint wash) that reads at a glance. --priv is a warm lock-gold, theme-aware. */
:root { --priv:#8a6d3b; }
:root[data-theme='dark'] { --priv:#cbb07a; }
.priv-chip { display:inline-flex; align-items:center; gap:3px; flex:none; margin-left:7px; font-size:11px; font-weight:700; letter-spacing:.02em; padding:2px 8px; border-radius:999px; color:var(--priv); background:color-mix(in srgb,var(--priv) 14%,transparent); border:1px solid color-mix(in srgb,var(--priv) 32%,transparent); white-space:nowrap; vertical-align:middle; }
.is-private { border-color:color-mix(in srgb,var(--priv) 40%,var(--line)) !important; border-left:3px solid var(--priv) !important; background:color-mix(in srgb,var(--priv) 6%,var(--card)) !important; }
.is-private:hover { border-color:color-mix(in srgb,var(--priv) 60%,var(--line)) !important; }
/* A private table row: tint the row and stripe its first cell (a tr can't carry a
   left border cleanly), without the card border treatment above. */
tr.tr-task.is-private { background:color-mix(in srgb,var(--priv) 7%,transparent) !important; border-left:0 !important; }
tr.tr-task.is-private td:first-child { box-shadow:inset 3px 0 0 var(--priv); }
/* "Preview as member": the eye toggle in the masthead, the banner, and the dimmed
   state for private items so you see the shared view with your private bits
   clearly set apart. */
.area-asmember-btn { flex:none; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:15px; cursor:pointer; transition:border-color .12s, background .12s, color .12s; }
.area-asmember-btn:hover { border-color:color-mix(in srgb,var(--priv) 45%,var(--line)); color:var(--priv); }
.area-asmember-btn.on { background:color-mix(in srgb,var(--priv) 16%,var(--card)); border-color:color-mix(in srgb,var(--priv) 45%,var(--line)); color:var(--priv); }
.area-preview-bar { display:flex; align-items:center; gap:11px; margin:2px 0 20px; padding:11px 15px; border:1px solid color-mix(in srgb,var(--priv) 35%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--priv) 9%,var(--card)); color:var(--ink-2); font-size:14px; }
.area-preview-bar .apb-ic { font-size:17px; flex:none; }
.area-preview-bar .apb-t { flex:1; min-width:0; line-height:1.45; }
.area-preview-bar .apb-exit { flex:none; cursor:pointer; font:inherit; font-weight:600; font-size:13px; padding:6px 14px; border-radius:999px; border:1px solid color-mix(in srgb,var(--priv) 40%,var(--line)); background:var(--card); color:var(--priv); }
.area-preview-bar .apb-exit:hover { background:color-mix(in srgb,var(--priv) 14%,var(--card)); }
body.area-as-member .is-private { opacity:.5; filter:grayscale(.2); }
body.area-as-member tr.tr-task.is-private { opacity:.5; }
.note-lock.on { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }

/* Keyboard shortcuts reference */
.sc-bg { position:fixed; inset:0; z-index:62; background:rgba(20,16,24,.34); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:10vh 16px 16px; overflow:auto; }
.sc-panel { width:min(560px,94vw); background:var(--card); border:1px solid var(--line-2); border-radius:16px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); overflow:hidden; }
.sc-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px 14px; border-bottom:1px solid var(--line); }
.sc-head h2 { font-size:20px; font-weight:600; }
.sc-x { border:none; background:none; color:var(--ink-3); font-size:26px; line-height:1; cursor:pointer; padding:0 4px; }
.sc-x:hover { color:var(--accent); }
.sc-body { padding:8px 22px 22px; max-height:70vh; overflow:auto; }
.sc-hint { margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-3); line-height:1.6; }
.sc-hint .kbd { min-width:auto; padding:1px 6px; font-size:12px; }
.sc-group { margin-top:18px; }
.sc-group-h { font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; margin-bottom:8px; }
.sc-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid var(--line); }
.sc-row:last-child { border-bottom:none; }
.sc-desc { font-size:15.5px; color:var(--ink); }
.sc-keys { display:flex; align-items:center; gap:6px; flex:none; }
.sc-or { color:var(--ink-3); font-size:13px; }
.kbd { display:inline-flex; align-items:center; justify-content:center; min-width:24px; padding:3px 8px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line-2); border-radius:7px; box-shadow:0 1px 0 var(--line-2); }
.home-foot { margin-top:28px; text-align:center; }
.home-sc-link { border:none; background:none; color:var(--ink-3); font-size:14.5px; cursor:pointer; padding:8px 12px; border-radius:8px; }
.home-sc-link:hover { color:var(--accent); background:var(--paper-2); }
.recur-h { font-size:19px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.recur-p { font-size:15px; color:var(--ink-2); margin:0 0 16px; line-height:1.45; }
.recur-opt { display:block; width:100%; text-align:left; padding:13px 16px; margin-bottom:9px; font-size:16px; border:1px solid var(--line-2); border-radius:11px; background:var(--paper-2); color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s; }
.recur-opt:hover { border-color:var(--accent); }
.recur-opt.cancel { margin-bottom:0; background:transparent; color:var(--ink-3); border-color:transparent; text-align:center; }
.ce-recur-note { display:inline-flex; align-items:center; font-size:14px; color:var(--ink-3); padding:6px 2px; }
.ui-dialog-input { width:100%; box-sizing:border-box; padding:12px 14px; font-size:16px; margin-bottom:16px; background:var(--paper); border:1px solid var(--line-2); border-radius:11px; color:var(--ink); }
.ui-dialog-input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.cgm-dialog { width:min(460px,92vw); }
.cgm-dialog .ui-dialog-input { margin-bottom:12px; }
.cgm-or { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:4px 0 10px; }
.cgm-areas { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; max-height:220px; overflow-y:auto; }
.cgm-area { --c:hsl(var(--h,220) 55% 55%); display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); font-size:14.5px; transition:border-color .12s,color .12s,background .12s; }
.cgm-area:hover:not(:disabled) { color:var(--ink); border-color:var(--c); background:color-mix(in srgb,var(--c) 8%,transparent); }
.cgm-area .cgm-dot { width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; }
.cgm-area.made { opacity:.5; cursor:default; }
.cgm-area .cgm-tick { color:#3f9e5f; font-weight:600; }
.ui-dialog-btns { display:flex; justify-content:flex-end; gap:9px; }
.ui-dialog-btns-col { flex-direction:column; align-items:stretch; }
.ui-dialog-btns-col .ui-btn { width:100%; }
.ui-btn { padding:10px 18px; font-size:15px; border-radius:10px; border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s, opacity .12s; }
.ui-btn.cancel { background:transparent; color:var(--ink-2); }
.ui-btn.cancel:hover { border-color:var(--ink-3); }
.ui-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.ui-btn.primary:hover { opacity:.9; }
.ui-btn.danger { background:var(--danger,#c4412e); border-color:var(--danger,#c4412e); color:#fff; }
.ui-btn.danger:hover { opacity:.9; }
/* Life-area colour: the gear in the hero, and the picker it opens. */
/* Change-colour affordances. The old ⚙ gear read as generic settings; a
   labelled swatch pill makes "change this area's colour" obvious, and the dot
   beside the title is clickable for the same. Both open the colour picker. */
.area-colorbtn { flex:none; display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 8px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-2); font-size:14px; cursor:pointer; transition:border-color .12s,color .12s; }
.area-colorbtn:hover { border-color:hsl(var(--h,220) 60% 52%); color:var(--ink); }
.area-colorbtn .acb-sw { width:15px; height:15px; border-radius:50%; background:hsl(var(--h,220) 60% 52%); flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.10); }
.ac-dot-btn { border:0; padding:0; cursor:pointer; transition:transform .1s, box-shadow .15s; }
.ac-dot-btn:hover { transform:scale(1.14); box-shadow:0 0 0 4px hsl(var(--h,220) 60% 52% / .22); }
.areacol-swatches { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:0 0 16px; }
.areacol-sw { height:30px; border-radius:8px; border:2px solid transparent; background:hsl(var(--h) 55% 55%); cursor:pointer; transition:transform .1s; }
.areacol-sw:hover { transform:translateY(-1px); }
.areacol-sw.on { box-shadow:0 0 0 2px var(--card), 0 0 0 4px hsl(var(--h) 55% 55%); }
.areacol-fine { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-2); margin:0 0 18px; }
.areacol-slider { flex:1; accent-color:hsl(var(--h,220) 55% 55%); }
.pal input { width:100%; padding:20px 22px; font-size:19px; background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--ink); }
.pal input:focus-visible { outline:none; }
.pal-list { max-height:52vh; overflow-y:auto; padding:8px; }
.pal-item { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; cursor:pointer; width:100%; box-sizing:border-box; }
/* max-width:none resets the global .sel rule (used for <select>s) that this
   item's "sel" class would otherwise inherit, shrinking + truncating it. */
.pal-item.sel { background:var(--paper-2); max-width:none; }
.pal-kind { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--accent-ink); background:var(--accent); border-radius:5px; padding:2px 7px; flex:none; }
.pal-kind.muted { background:var(--line-2); color:var(--ink-2); }
/* Each result kind gets its own colour chip, so the list scans at a glance.
   Tinted background + the hue as text, readable on warm paper and in dark. */
.pal-kind.kmark { --pk:var(--ink-2); background:color-mix(in srgb,var(--pk) 17%,var(--card)); color:color-mix(in srgb,var(--pk) 82%,var(--ink)); }
/* Each kind's hue. These need the .pal-kind prefix to match the .pal-kind.kmark
   specificity above - a bare .pal-k-* loses the --pk cascade and every chip falls
   back to grey. */
.pal-kind.pal-k-area { --pk:#3e9b6c; }
.pal-kind.pal-k-contact { --pk:#3a72c4; }
.pal-kind.pal-k-note { --pk:#c98a1e; }
.pal-kind.pal-k-table { --pk:#8a5cc4; }
.pal-kind.pal-k-task { --pk:#d9483b; }
.pal-kind.pal-k-goal { --pk:#2c9c9c; }
.pal-kind.pal-k-bucket { --pk:#c4568f; }
.pal-kind.pal-k-journal { --pk:#b5835a; }
.pal-kind.pal-k-bookmark { --pk:#2f9e7a; }
.pal-kind.pal-k-event { --pk:#c56a4d; }
.pal-kind.pal-k-dream { --pk:#7b6bc4; }
.pal-kind.pal-k-row { --pk:#7a8a94; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pal-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16.5px; }
.pal-hint { font-size:12.5px; color:var(--ink-3); flex:none; }
/* The link picker's hint is a full row under the input, not the inline "open"
   tag on a palette item, so give it room to breathe (aligned to the input's
   text) instead of sitting flush against the divider and the edge. */
#linkpick-overlay .pal-hint { display:block; padding:11px 22px 13px; }
.pal-title { padding:18px 22px 8px; font-size:15px; font-weight:600; color:var(--ink-2); }
.pal-empty { padding:26px; text-align:center; color:var(--ink-3); font-style:italic; }
/* A hit found by the smarter search carries the word it was found under, so a
   Portuguese-titled page turning up for an English query makes sense at a glance. */
.pal-via { flex:none; font-size:11.5px; color:var(--ink-3); background:color-mix(in srgb,var(--accent) 12%,var(--card)); border-radius:999px; padding:2px 9px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* "Try other words & languages": a quiet strip under the results. */
.pal-smart { display:flex; align-items:center; gap:9px; margin:6px 6px 2px; padding:11px 14px; border-radius:11px; font-size:14px; line-height:1.4; }
.pal-smart-ic { font-size:15px; flex:none; opacity:.9; }
button.pal-smart-btn { width:auto; background:color-mix(in srgb,var(--accent) 9%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); color:var(--ink); cursor:pointer; font-weight:600; transition:background .12s, border-color .12s; }
button.pal-smart-btn:hover { background:color-mix(in srgb,var(--accent) 16%,var(--card)); border-color:var(--accent); }
.pal-smart-busy { color:var(--ink-2); }
.pal-smart-busy .pal-smart-ic { animation:pal-spin 1.1s linear infinite; }
@keyframes pal-spin { to { transform:rotate(360deg); } }
.pal-smart-done { color:var(--ink-3); font-size:13px; }
.pal-smart-done b { color:var(--ink-2); font-weight:600; }
@media (prefers-reduced-motion:reduce){ .pal-smart-busy .pal-smart-ic { animation:none; } }

/* Tabs: a strip above the pane; each tab is a saved view. */
.main { min-width:0; display:flex; flex-direction:column; }
.tabstrip { position:sticky; top:0; z-index:25; display:flex; align-items:center; gap:4px; height:44px; box-sizing:border-box; padding:6px 14px; background:color-mix(in srgb,var(--paper) 90%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabstrip::-webkit-scrollbar { display:none; }
.tabstrip .tab { display:inline-flex; align-items:center; gap:7px; max-width:190px; padding:6px 11px 6px 12px; border-radius:10px; border:1px solid var(--line); background:color-mix(in srgb,var(--card) 45%,transparent); color:var(--ink-3); font-size:14px; white-space:nowrap; flex:none; transition:background .12s,color .12s,border-color .12s,box-shadow .12s; }
.tabstrip .tab:hover { border-color:var(--line-2); background:var(--card); color:var(--ink-2); }
.tabstrip .tab:hover { background:var(--paper-2); color:var(--ink-2); }
.tabstrip .tab.on { background:var(--card); color:var(--ink); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:var(--shadow); font-weight:500; }
.tabstrip .tab-ic { font-size:11px; color:var(--ink-3); flex:none; }
.tabstrip .tab.on .tab-ic { color:var(--accent); }
.tabstrip .tab-t { overflow:hidden; text-overflow:ellipsis; }
.tabstrip .tab-x { opacity:0; font-size:15px; line-height:1; padding:2px 4px; border-radius:5px; margin-left:2px; transition:opacity .12s,color .12s,background .12s; }
.tabstrip .tab:hover .tab-x, .tabstrip .tab.on .tab-x { opacity:.5; }
.tabstrip .tab-x:hover { opacity:1; color:var(--accent); background:var(--paper); }
.tabstrip .tab-pin { opacity:0; font-size:11px; line-height:1; flex:none; filter:grayscale(1) opacity(.7); transition:opacity .12s,filter .12s; }
.tabstrip .tab:hover .tab-pin { opacity:.55; }
.tabstrip .tab-pin.on { opacity:1; filter:none; }
.tabstrip .tab-pin:hover { opacity:1; filter:none; transform:scale(1.1); }
.tabstrip .tab.pinned { border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); background:color-mix(in srgb,var(--accent) 6%,transparent); }
.tabstrip .tab.pinned.on { background:var(--card); }
.tab-new { flex:none; width:30px; height:30px; border-radius:8px; color:var(--ink-3); font-size:20px; line-height:1; }
.tab-new:hover { background:var(--paper-2); color:var(--accent); }
@media (max-width:820px){ .tabstrip { display:none; } }
/* Admin on a phone. The member row stops squeezing a plan select and a suspend
   button into a side column and gives them a row of their own; the stat cards go
   two-up rather than one long column. */
@media (max-width:620px){
  .adm-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .adm-card { padding:13px 14px; }
  .adm-card-v { font-size:22px; }
  .adm-user { grid-template-columns:minmax(0,1fr); }
  .adm-user-main { flex-direction:column; gap:1px; }
  .adm-user-main .au-email { font-size:13px; overflow:hidden; text-overflow:ellipsis; }
  .adm-user-acts { grid-row:auto; grid-column:1; margin-top:8px; }
  .adm-user-acts .au-plan-sel { flex:1; }
  .adm-area-add { flex-direction:column; }
}

/* The real day planner, embedded edge-to-edge in the Life pane. */
.pane:has(.today-frame) { padding:0; max-width:none; display:flex; flex-direction:column; height:calc(100vh - 44px); }
.today-frame { display:block; width:100%; flex:1; min-height:0; border:0; background:var(--paper); }
/* A breadcrumb strip above the embedded Today planner, like every other page.
   Neutralise the sticky/full-bleed desktop crumbbar treatment inside it. */
.today-topbar { flex:none; padding:11px clamp(16px,4vw,28px); border-bottom:1px solid var(--line); background:var(--paper); }
.today-topbar .crumbbar { position:static; margin:0; padding:0; border:0; background:none; backdrop-filter:none; }
@media (max-width:820px){ .pane:has(.today-frame) { height:calc(100vh - 52px); } }

/* ── today (day planner, read view) ──────────────────── */
.tp-date { font-family:'Cormorant Garamond',serif; font-size:.6em; font-weight:400; font-style:italic; color:var(--ink-3); margin-left:8px; }
.tp-dot { width:9px; height:9px; border-radius:50%; flex:none; background:hsl(var(--h,220) 45% 52%); }
.tp-lanes { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 24px; }
.tp-lane { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:15px; color:var(--ink-2); }
.tp-lane.hit { border-color:color-mix(in srgb,hsl(var(--h,220) 45% 52%) 55%,transparent); color:var(--ink); }
.tp-lane .tp-sub { color:var(--ink-3); font-variant-numeric:tabular-nums; }
.tp-timeline { display:flex; flex-direction:column; }
.tp-row { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:14px; padding:13px 4px; border-bottom:1px solid var(--line); align-items:baseline; }
.tp-row:last-child { border-bottom:0; }
.tp-time { color:var(--ink-3); font-size:15px; font-variant-numeric:tabular-nums; }
.tp-body { min-width:0; }
.tp-title { display:flex; align-items:center; gap:8px; font-size:16.5px; color:var(--ink); overflow-wrap:anywhere; }
.tp-slot .tp-title { font-weight:500; }
.tp-dur { color:var(--ink-3); font-size:13.5px; font-variant-numeric:tabular-nums; }
.tp-loc { color:var(--ink-3); font-size:14px; margin-top:2px; overflow-wrap:anywhere; }
.tp-event .tp-title { color:var(--ink-2); }
.tp-task { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--ink-2); padding:4px 0 0 17px; }
.tp-task .tp-check { width:17px; height:17px; border:1.5px solid var(--line-2); border-radius:5px; display:grid; place-items:center; font-size:11px; color:var(--done); flex:none; }
.tp-task.done { color:var(--ink-3); text-decoration:line-through; }
.tp-task.done .tp-check { background:var(--done); border-color:var(--done); color:#fff; }
.tp-float { margin-top:22px; }
.tp-tally { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.tp-tally h2 { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:500; margin-bottom:12px; }
.tp-tally-list { display:flex; flex-wrap:wrap; gap:8px; }
.tp-tally-item { display:inline-flex; align-items:center; gap:7px; font-size:14.5px; color:var(--ink-2); background:var(--paper-2); padding:6px 12px; border-radius:999px; }
.tp-quote { margin-top:28px; font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic; color:var(--ink-2); border-left:3px solid var(--gold); padding-left:18px; text-wrap:balance; }
.tp-quote cite { display:block; font-size:15px; font-style:normal; color:var(--ink-3); margin-top:6px; }

/* ── mail ────────────────────────────────────────────── */
.mail-head-act { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; min-width:0; max-width:100%; }
.mail-head-act > * { flex:0 1 auto; min-width:0; }
/* On a phone the header actions take their own full-width row and wrap tidily
   instead of pushing the Write button off the edge. */
@media (max-width:560px){ .mail-head-act { width:100%; justify-content:flex-start; } }
.mail-acct-scope { margin:0 0 14px; }
.mail-acct-scope-sel { width:auto; max-width:100%; font-size:15px; padding:9px 34px 9px 14px; }
.mail-unread-b { display:inline-block; margin-left:7px; min-width:19px; padding:0 5px; border-radius:9px; background:var(--accent); color:var(--accent-ink); font-size:11.5px; font-weight:700; line-height:19px; text-align:center; vertical-align:middle; }
/* The bulk bar takes this row's place when you select messages (see renderMail),
   so the list beneath doesn't jump. Both carry the same min-height for the swap
   to be invisible. */
/* One height for both rows, so neither is content-driven and the swap can't
   drift apart if a button's label or the font changes. */
.mail-tools, .mail-bulkbar { --mail-row-h:50px; min-height:var(--mail-row-h); }
.mail-tools { display:flex; gap:8px; align-items:stretch; margin:0 0 14px; }
.mail-tools .mail-search, .mail-tools .tbl-filter-btn { height:var(--mail-row-h); }
.mail-tools .mail-search { flex:1; width:auto; margin:0; }
.mail-refresh { flex:none; font-size:18px; line-height:1; padding:0 15px; }
/* On a phone the tools wrap: search fills the first row, the action buttons drop
   to their own row below - so a wide button (Import starred) can't run off-screen. */
@media (max-width:820px){
  .mail-tools { flex-wrap:wrap; }
  .mail-tools .mail-search { flex:1 1 100%; }
}
/* Re-enable the important-senders grouping after you've turned it off. */
.mail-vip-reenable { display:inline-flex; align-items:center; gap:7px; margin:2px 2px 14px; padding:8px 15px; border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line)); border-radius:999px; background:color-mix(in srgb,var(--gold) 8%,var(--card)); color:color-mix(in srgb,var(--gold) 62%,var(--ink)); font-size:13.5px; font-weight:600; cursor:pointer; transition:background .12s; }
.mail-vip-reenable:hover { background:color-mix(in srgb,var(--gold) 16%,var(--card)); }
.mail-loadmore { display:block; width:100%; margin:10px 0 4px; padding:11px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink-2); font-size:14.5px; }
.mail-loadmore:hover { border-color:var(--accent); color:var(--accent); }
/* Folder switcher: Inbox / Starred / Archive / Spam / Trash. */
/* Eisenhower quadrant cards above the inbox: a 2x2 grid on mobile, a row on
   wider screens. Each carries a colour dot, its meaning and a live count. */
/* The pots: big, tactile, colour-tinted cards. Each carries its own hue (--q) as
   a whisper of tint, a haloed dot and a bold count, and lifts on hover / glows
   when selected. Five across on desktop; on a phone the Inbox is a full-width
   banner over a 2x2 of the buckets. (Robin - "as beautiful as possible".) */
.mail-quads { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.mail-quad { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:3px; text-align:left; min-height:110px; padding:16px; border-radius:18px; color:var(--ink); border:1px solid var(--line); background:linear-gradient(158deg, color-mix(in srgb,var(--q) 9%,var(--card)), var(--card) 60%); box-shadow:var(--shadow); transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, border-color .16s; min-width:0; -webkit-tap-highlight-color:transparent; }
/* Hover lift/ring only on real pointers - on touch it stuck after a tap, so a
   pot (usually Urgent) looked selected when Mail just opened. (Robin.) */
@media (hover: hover) { .mail-quad:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--q) 45%,var(--line)); box-shadow:0 16px 32px -18px color-mix(in srgb,var(--q) 60%,rgba(0,0,0,.45)); } }
.mail-quad:active { transform:translateY(-1px); }
.mail-quad.on { border-color:var(--q); background:linear-gradient(158deg, color-mix(in srgb,var(--q) 17%,var(--card)), var(--card) 68%); box-shadow:0 0 0 2px color-mix(in srgb,var(--q) 55%,transparent) inset, 0 14px 30px -20px color-mix(in srgb,var(--q) 70%,rgba(0,0,0,.45)); }
.mail-quad-dot { flex:none; width:11px; height:11px; border-radius:50%; background:var(--q); }
/* Only the pot CARD's dot is the haloed corner dot; the same class inside the
   File-into dropdown stays an ordinary inline dot (don't absolutely position it,
   or all three stack in the corner). */
.mail-quad > .mail-quad-dot { position:absolute; top:16px; left:16px; width:14px; height:14px; box-shadow:0 0 0 5px color-mix(in srgb,var(--q) 15%,transparent); }
.mail-quad-main { display:flex; flex-direction:column; min-width:0; gap:2px; width:100%; }
.mail-quad-l { font-size:18px; font-weight:700; line-height:1.12; letter-spacing:-.015em; }
.mail-quad-h { font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The count: a bold coloured numeral in the top-right corner. */
.mail-quad-c { position:absolute; top:13px; right:15px; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--q); line-height:1; }
.mail-quad-inbox .mail-quad-c { color:var(--ink-3); }
/* Quadrant hues (work in both themes). */
.mail-quad-urgent { --q:#d9483b; } .mail-quad-important { --q:#e08a1e; }
.mail-quad-chilled { --q:#3e9b6c; } .mail-quad-others { --q:#8b8177; }
.mail-quad-inbox { --q:var(--ink-3); }   /* untriaged - still in the queue */
.mail-quad-archive { --q:#5a7a9b; }      /* done - filed away in Archive */
/* Reader priority picker: file the open email into a quadrant. */
.mail-quadpick { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:6px 0 4px; }
.mail-quadpick-l { font-size:13px; color:var(--ink-3); margin-right:2px; }
.mail-quadpick-b { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:14px; color:var(--ink-2); border:1px solid var(--line); background:var(--card); transition:border-color .12s,color .12s,background .12s; }
.mail-quadpick-b .mail-quad-dot { width:9px; height:9px; }
.mail-quadpick-b:hover { border-color:var(--q); color:var(--ink); }
.mail-quadpick-b.on { border-color:var(--q); background:color-mix(in srgb,var(--q) 14%,transparent); color:var(--ink); font-weight:600; }
.mail-quadpick-sep { flex:0 0 auto; width:1px; align-self:stretch; margin:2px 4px; background:var(--line); }
.mail-quadpick-archive { --q:#5a7a9b; }
.mail-quadpick-archive .mail-quad-dot { background:#5a7a9b; }
.mail-quadpick-archive:hover { border-color:#5a7a9b; color:var(--ink); background:color-mix(in srgb,#5a7a9b 12%,transparent); }
/* Per-row priority button + its colour dot (a glance tells you where it's filed). */
.mail-quadbtn { flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; opacity:.5; transition:opacity .12s,background .12s; }
.mail-row:hover .mail-quadbtn { opacity:1; }
.mail-quadbtn:hover { background:var(--paper-2); }
.mail-quadbtn .mail-quad-dot { width:11px; height:11px; }
@media (hover:none){ .mail-quadbtn { opacity:.85; } }
/* Quick archive on a row: done with it, take it out of the box. */
.mail-rowact { flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; color:var(--ink-3); opacity:0; transition:opacity .12s, background .12s, color .12s; }
.mail-rowact svg { width:18px; height:18px; }
.mail-row:hover .mail-rowact { opacity:.7; }
.mail-rowarch:hover { opacity:1; background:var(--paper-2); color:var(--accent); }
.mail-rowtrash:hover { opacity:1; background:color-mix(in srgb,var(--bad,#c0392b) 12%,var(--paper-2)); color:var(--bad,#c0392b); }
@media (hover:none){ .mail-rowact { opacity:.6; } }
/* The row's 4-way priority menu. */
.mail-quadmenu { min-width:300px; padding:6px; }
.mail-quadmenu .mail-move-item { display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border-radius:9px; text-align:left; }
.mail-quadmenu .mail-move-item:hover { background:var(--paper-2); }
.mail-quadmenu .mail-move-item.on { background:color-mix(in srgb,var(--q) 16%,transparent); }
.mail-quadmenu .mail-quad-dot { width:11px; height:11px; flex:none; }
/* Keep each row on one line: fixed label column so the hints line up after it. */
.mail-quadmenu-l { font-weight:600; font-size:15px; white-space:nowrap; flex:none; min-width:104px; }
.mail-quadmenu-h { color:var(--ink-3); font-size:12.5px; white-space:nowrap; }
/* Drag a row onto a card to file it. */
.mail-row.mail-dragging { opacity:.4; }
.mail-drag-ghost { position:fixed; z-index:1000; transform:translate(-50%,-140%); pointer-events:none; max-width:220px; padding:8px 13px; border-radius:11px; background:var(--accent); color:var(--accent-ink); font-size:14px; font-weight:600; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-quads-armed .mail-quad { border-style:dashed; border-color:var(--q); }
.mail-quad.mail-quad-hot { border-style:solid; background:color-mix(in srgb,var(--q) 18%,var(--card)); transform:translateY(-2px); box-shadow:0 0 0 2px var(--q) inset, var(--shadow); }
@media (max-width:820px){
  /* minmax(0,1fr), never a bare 1fr: the pot hints are nowrap, so a bare 1fr would
     floor at the hint width and push the whole page wider than the phone (the
     CLAUDE.md mobile-grid gotcha - horizontal scroll). */
  .mail-quads { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-auto-rows:1fr; gap:10px; }
  .mail-quad { min-height:96px; }
  /* Inbox - your triage queue - leads as a full-width banner over the 2x2 buckets:
     dot, then Inbox / To sort, then the count pushed to the right. */
  .mail-quad-inbox { grid-column:1 / -1; min-height:0; flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; padding:15px 18px; }
  .mail-quad-inbox .mail-quad-dot { position:static; }
  .mail-quad-inbox .mail-quad-main { width:auto; flex:1; }
  .mail-quad-inbox .mail-quad-c { position:static; transform:none; margin-left:auto; font-size:20px; }
}
/* Inbox-zero: a quiet little reward for a clear queue. */
.mail-zero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:52px 24px 56px; }
.mail-zero-ic { width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:26px; color:var(--accent); background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--accent) 22%,transparent), color-mix(in srgb,var(--accent) 7%,transparent)); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent); animation:mailZeroPop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.mail-zero-t { font-family:'Cormorant Garamond',serif; font-size:29px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.mail-zero-s { font-size:15px; color:var(--ink-3); }
@keyframes mailZeroPop { 0%{ transform:scale(.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .mail-zero-ic { animation:none; } }
.mail-folders { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
/* Drafts / Sent / Spam / Trash: real little cards now (border + ground + an icon),
   a touch more obvious than the old flat pills - but kept smaller and quieter than
   the triage pots above. (Robin, 2026-10-12.) */
.mail-folder { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:13px; color:var(--ink-2); font-size:14.5px; font-weight:500; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); transition:background .12s,color .12s,border-color .12s,transform .1s,box-shadow .12s; }
.mail-folder:hover { color:var(--ink); border-color:var(--line-2); transform:translateY(-1px); box-shadow:0 10px 22px -14px rgba(0,0,0,.34); }
.mail-folder.on { color:var(--ink); border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent) inset, var(--shadow); }
.mail-folder-ic { flex:none; display:inline-flex; width:17px; height:17px; color:var(--ink-3); }
.mail-folder-ic svg { width:17px; height:17px; }
.mail-folder:hover .mail-folder-ic, .mail-folder.on .mail-folder-ic { color:var(--accent); }
.mail-folder-l { line-height:1; }
.mail-folder-spam.on { border-color:#d9483b; box-shadow:0 0 0 2px color-mix(in srgb,#d9483b 26%,transparent) inset, var(--shadow); }
.mail-folder-spam.on .mail-folder-ic, .mail-folder-trash.on .mail-folder-ic { color:var(--ink-2); }
/* Star (\Flagged) on a row and in the reading pane. */
.mail-star { flex:none; align-self:center; font-size:16px; color:var(--ink-3); opacity:0; padding:2px 5px; border-radius:6px; transition:opacity .12s,color .12s; }
.mail-row:hover .mail-star, .mail-star.on { opacity:1; }
.mail-star.on, .mail-star:hover, .mail-star-btn.on { color:var(--gold); }
@media (hover:none){ .mail-star { opacity:.6; } }
.mail-thread-arch { flex:none; align-self:center; font-size:15px; opacity:0; padding:2px 5px; border-radius:6px; transition:opacity .12s; }
.mail-thread:hover .mail-thread-arch { opacity:.65; }
.mail-thread-arch:hover { opacity:1; background:var(--paper-2); }
@media (hover:none){ .mail-thread-arch { opacity:.55; } }
/* Two-pane client: message list on the left, reading pane on the right. */
/* Single pane (Spark-style): the list is full-width; opening a message swaps it
   for a full-width reader. Same behaviour at every width now. */
.mail-layout { display:block; }
.mail-list-col { border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
/* No overflow:hidden here - it would trap the sticky toolbar and let it scroll
   away. Content is inset by .mail-msg padding, so nothing needs clipping. */
.mail-reader { min-width:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); }
.mail-layout:not(.reading) .mail-reader { display:none; }
.mail-layout.reading .mail-list-col { display:none; }
.mail-list { display:block; }
.mail-list .home-empty { padding-left:16px; padding-right:16px; }
/* Important senders box: the VIP threads, lifted to the top with a soft gold
   wash so the eye lands on them first. The rest of the inbox follows below. */
.mail-vip-box { background:color-mix(in srgb,var(--gold) 7%,var(--card)); border-bottom:1px solid color-mix(in srgb,var(--gold) 30%,var(--line)); box-shadow:inset 3px 0 0 var(--gold); }
.mail-vip-h { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 16px 5px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:color-mix(in srgb,var(--gold) 62%,var(--ink-2)); }
.mail-vip-off { background:none; border:0; cursor:pointer; font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-3); padding:2px 4px; border-radius:7px; }
.mail-vip-off:hover { color:var(--accent); }
.mail-act-ic.mail-vip-btn.on { color:var(--gold); }
/* Multi-select: a checkbox overlays the avatar on hover / in select mode. */
.mail-row { position:relative; }
.mail-check { position:absolute; left:20px; top:15px; width:38px; height:38px; box-sizing:border-box; border-radius:50%; border:2px solid var(--line-2); background:var(--card); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink); font-size:16px; opacity:0; pointer-events:none; z-index:2; transition:opacity .1s; }
.mail-row:hover .mail-check, .mail-layout.selecting .mail-check, .mail-check.on { opacity:1; pointer-events:auto; }
.mail-check.on { background:var(--accent); border-color:var(--accent); }
.mail-row.mail-child .mail-check { left:56px; }
.mail-row.picked { background:color-mix(in srgb,var(--accent) 8%,transparent); }
/* A message being moved/deleted: dimmed and inert, with a quiet "working" pulse,
   so it's clearly in progress rather than looking like nothing happened. */
.mail-row.mail-pending { opacity:.45; pointer-events:none; animation:mailPending 1.1s ease-in-out infinite; }
.mail-row.mail-pending .mail-star, .mail-row.mail-pending .mail-check { display:none; }
@keyframes mailPending { 0%,100%{ opacity:.4; } 50%{ opacity:.62; } }
@media (prefers-reduced-motion:reduce){ .mail-row.mail-pending { animation:none; } }
/* Swipe-to-triage (mobile): tint + icon as a row passes the action threshold. */
.mail-row[data-swipe="archive"] { background:color-mix(in srgb,#2e7d32 20%,transparent); }
.mail-row[data-swipe="delete"] { background:color-mix(in srgb,#c0392b 22%,transparent); }
.mail-row[data-swipe="archive"]::after { content:'📥 Archive'; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:14px; font-weight:600; color:#1b5e20; white-space:nowrap; }
.mail-row[data-swipe="delete"]::after { content:'🗑 Delete'; position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:14px; font-weight:600; color:#7b241c; white-space:nowrap; }
/* nowrap + scroll rather than wrap: seven buttons wrapping onto three lines on a
   phone is both ugly and a moving target, and the height has to match .mail-tools
   at every width for the swap to stay invisible. */
/* Sticky while you have a selection: it rides just under the breadcrumb as you
   scroll the list, so the actions stay in reach. top matches the breadcrumb's
   pinned bottom (mobile pins below the brand header, desktop below the tab strip). */
.mail-bulkbar { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 0 14px; padding:0 10px 0 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--card); box-shadow:var(--shadow); position:sticky; top:calc(var(--navh,56px) + 44px); z-index:21; }
.mail-bulkbar::-webkit-scrollbar { display:none; }
.mail-bulkbar > * { flex:none; }
.mail-bulk-n { font-weight:600; color:var(--ink); margin-right:6px; }
.mail-bulkbar .ghost { padding:7px 13px; }
.mail-bulk-x { margin-left:auto; }
@media (min-width:821px){ .mail-bulkbar { top:92px; } }
.mail-movebg { position:fixed; inset:0; z-index:60; }
.mail-move { position:absolute; min-width:210px; max-height:60vh; overflow:auto; background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 16px 40px -16px rgba(0,0,0,.4); padding:6px; }
.mail-move-h { font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; padding:6px 10px; }
.mail-move-item { display:block; width:100%; text-align:left; padding:9px 12px; border-radius:8px; color:var(--ink); font-size:15px; }
.mail-move-item:hover { background:var(--paper-2); color:var(--accent); }
.mail-move-item .mm-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:9px; vertical-align:middle; flex:none; }
/* Section divider + priority rows inside the Move menu. */
.mail-move-sect { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); padding:9px 12px 3px; }
.mail-move-sect:first-of-type { padding-top:4px; }
.mail-move [data-mail-move-quad] { display:flex; align-items:center; gap:10px; }
.mail-move [data-mail-move-quad] .mail-quad-dot { width:11px; height:11px; flex:none; }
.mail-move .mm-main { display:flex; flex-direction:column; gap:1px; min-width:0; }
.mail-move .mm-l { font-size:15px; line-height:1.2; }
.mail-move .mm-sub { font-size:12px; color:var(--ink-3); }
.mail-move [data-mail-move-quad]:hover .mm-sub { color:inherit; }
.mail-move-empty { padding:9px 12px; color:var(--ink-3); font-size:14px; }
/* The "new task from this email" popover: a small form of title + area + priority. */
.mail-task-pop { position:absolute; width:300px; max-width:calc(100vw - 24px); box-sizing:border-box; background:var(--card); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 18px 44px -16px rgba(0,0,0,.45); padding:14px; display:flex; flex-direction:column; gap:11px; }
.mail-task-pop .mail-move-h { padding:0; }
.mail-task-pop .mtask-title { width:100%; box-sizing:border-box; font-size:15px; margin:0; }
/* On a phone the anchor is near the bottom, so the tap-positioned popover ran
   off-screen. Centre it near the top (clear of the keyboard the title field
   raises) and let it scroll. !important overrides the inline top/left. (Robin.) */
@media (max-width:640px){
  .mail-task-pop { position:fixed !important; left:50% !important; right:auto !important; top:14% !important; bottom:auto !important; transform:translateX(-50%); width:calc(100vw - 28px); max-width:460px; max-height:74vh; overflow:auto; }
}
/* The quadrant picker and the move menu were anchored to the tapped button, so
   on a phone they floated near the bottom with an awkward gap. Pin them as a
   tidy sheet near the top across the whole mobile mail range. (Robin.) */
@media (max-width:820px){
  .mail-quadmenu, .mail-move { position:fixed !important; left:50% !important; right:auto !important; top:calc(var(--navh,56px) + 12px) !important; bottom:auto !important; transform:translateX(-50%); width:calc(100vw - 28px); max-width:420px; max-height:72vh; overflow:auto; }
}
.mtask-field { display:flex; flex-direction:column; gap:5px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:600; }
.mtask-field .sel { width:100%; box-sizing:border-box; text-transform:none; letter-spacing:normal; font-weight:400; }
.mtask-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:2px; }
.mtask-actions .add-btn { flex:none; }
.mail-row { display:flex; gap:13px; align-items:flex-start; width:100%; text-align:left; padding:15px 20px; border-bottom:1px solid var(--line); transition:background .12s; }
.mail-row:last-child { border-bottom:0; }
.mail-row:hover { background:var(--paper-2); }
.mail-row.csel { background:color-mix(in srgb,var(--accent) 8%,transparent); }
/* Keyboard-highlighted row (J/K), subtler than the open row and ringed. */
.mail-row.ksel { background:color-mix(in srgb,var(--accent) 5%,transparent); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent); border-radius:8px; }
/* Conversation threading */
/* A conversation's leading control: an avatar-sized accent disc with a clear
   disclosure arrow, so a thread reads as "click to expand", not a stray dot. */
.mail-thread .mail-chevron { flex:none; align-self:flex-start; width:54px; height:54px; margin:-6px 0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--accent) 16%,var(--paper-2)); color:var(--accent); font-size:24px; font-weight:700; transition:background .12s; }
.mail-thread:hover .mail-chevron { background:color-mix(in srgb,var(--accent) 26%,var(--paper-2)); }
.mail-thread.exp .mail-chevron { background:color-mix(in srgb,var(--accent) 22%,var(--paper-2)); }
.mail-thread-n { display:inline-block; margin-left:8px; min-width:18px; padding:0 5px; border-radius:9px; background:var(--paper-2); border:1px solid var(--line); color:var(--ink-2); font-size:11.5px; font-weight:600; line-height:17px; text-align:center; vertical-align:middle; }
/* An expanded conversation: tint the parent header and the whole nested group,
   indent children further, and draw a connecting line so the grouping is clear. */
.mail-thread.exp { background:color-mix(in srgb,var(--accent) 7%,transparent); }
.mail-thread.exp .mail-from { color:var(--accent); }
.mail-row.mail-child { padding-left:56px; background:color-mix(in srgb,var(--accent) 3.5%,transparent); position:relative; }
.mail-row.mail-child::before { content:''; position:absolute; left:32px; top:0; bottom:0; width:2px; background:color-mix(in srgb,var(--accent) 30%,transparent); }
.mail-row.mail-child .mail-avatar { transform:scale(.8); }
/* Keyboard shortcuts popover */
.mail-sc-bg { position:fixed; inset:0; z-index:60; background:color-mix(in srgb,#000 32%,transparent); display:flex; align-items:center; justify-content:center; padding:20px; }
.mail-sc { width:min(440px,100%); max-height:82vh; overflow:auto; background:var(--card); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--shadow-lg,0 20px 50px -20px rgba(0,0,0,.4)); padding:18px 20px; }
.mail-sc-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:18px; }
.mail-sc-grid { display:flex; flex-direction:column; gap:9px; }
.mail-sc-row { display:flex; align-items:center; gap:14px; }
.mail-sc-row kbd { flex:none; min-width:96px; text-align:center; font:inherit; font-size:13px; background:var(--paper-2); border:1px solid var(--line); border-radius:7px; padding:4px 8px; color:var(--ink-2); }
.mail-sc-row span { color:var(--ink); font-size:15px; }
.mail-sc-note { margin-top:16px; color:var(--ink-3); font-size:13px; }
.mail-avatar { flex:none; width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--accent) 16%,var(--paper-2)); color:var(--accent); font-size:16px; font-weight:600; }
.mail-avatar.big { width:44px; height:44px; font-size:18px; }
.mail-row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mail-row-top { display:flex; gap:10px; align-items:baseline; justify-content:space-between; }
.mail-from { color:var(--ink); font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-subject { color:var(--ink-2); font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-preview { display:block; color:var(--ink-3); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-date { color:var(--ink-3); font-size:13px; white-space:nowrap; flex:none; }
/* Unread stands out: an accent rail, a soft tinted row, a filled accent avatar,
   and bolder darker text - so a glance shows what's new. */
.mail-row.unread { box-shadow:inset 3px 0 0 var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); }
.mail-row.unread:hover { background:color-mix(in srgb,var(--accent) 12%,transparent); }
.mail-row.unread .mail-from { font-weight:700; color:var(--ink); }
.mail-row.unread .mail-subject { color:var(--ink); font-weight:600; }
.mail-row.unread .mail-avatar { background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent)); color:var(--accent-ink); }
.mail-empty { flex:1; display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:16px; }
.mail-msg { padding:20px 26px 28px; }
.mail-msg:focus { outline:none; }
.mail-reader-head { display:flex; align-items:center; gap:10px; }
.mail-reader-head .mail-msg-act { margin-left:auto; margin-top:0; }
.mail-reader-title { font-weight:500; color:var(--ink-2); }
.mail-back { display:inline-flex; flex:none; }
.mail-subj { font-size:clamp(21px,2.6vw,28px); margin:14px 0 14px; text-wrap:balance; }
.mail-meta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:var(--ink-3); font-size:14.5px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.mail-meta-lines { display:flex; flex-direction:column; gap:1px; min-width:0; }
.mail-meta b { color:var(--ink); font-weight:600; font-size:16px; }
.mail-meta .mail-addr { color:var(--ink-3); font-size:13.5px; }
.mail-meta .mail-when { margin-left:auto; white-space:nowrap; }
.mail-filed { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; }
.mail-filed-l { font-size:13px; color:var(--ink-3); font-weight:600; }
.mail-filed-chip { display:inline-flex; align-items:center; gap:4px; font-size:14px; padding:4px 7px 4px 12px; border:1px solid var(--line); border-radius:999px; background:var(--paper-2); color:var(--ink); transition:border-color .12s, background .12s; }
.mail-filed-chip:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--paper-2)); }
.mail-filed-open { display:inline-flex; align-items:center; gap:7px; font-size:14px; padding:0; border:0; background:none; color:inherit; cursor:pointer; }
.mail-filed-open:hover { color:var(--accent); }
.mail-filed-x { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none; padding:0; border:0; border-radius:50%; background:none; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; transition:color .12s, background .12s; }
.mail-filed-x:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.mail-filed-chip .mm-dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.mail-att { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.mail-att-chip { color:var(--ink-2); font-size:14px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--paper-2); }
.mail-att-chip .mail-att-x { margin-left:7px; color:var(--ink-3); font-size:15px; line-height:1; }
.mail-att-chip .mail-att-x:hover { color:var(--accent); }
.mail-att-dl { display:inline-flex; align-items:center; gap:7px; cursor:pointer; text-decoration:none; color:var(--ink-2); transition:border-color .12s, color .12s, background .12s; }
.mail-att-dl:hover { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--paper-2)); }
.mail-att-sz { color:var(--ink-3); font-size:12.5px; }
/* Rich-text compose: a small toolbar above a contenteditable body. */
.mail-rt-toolbar { display:flex; gap:4px; padding:6px; border:1px solid var(--line-2); border-bottom:0; border-radius:12px 12px 0 0; background:var(--paper-2); }
.mail-rt-toolbar button { min-width:34px; height:32px; padding:0 9px; border:0; border-radius:8px; background:transparent; color:var(--ink-2); font-size:15px; cursor:pointer; transition:background .12s, color .12s; }
.mail-rt-toolbar button:hover { background:var(--card); color:var(--accent); }
.mail-compose-body { min-height:260px; padding:14px 16px; font-size:16.5px; line-height:1.6; background:var(--paper); border:1px solid var(--line-2); border-radius:0 0 12px 12px; color:var(--ink); overflow-wrap:anywhere; }
.mail-compose-body:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.mail-compose-body:empty:before { content:attr(data-ph); color:var(--ink-3); }
/* Quiet conversation count in the list (Spark-style, no chevrons/badges). */
.mail-conv-n { display:inline-block; margin-left:8px; min-width:17px; padding:0 6px; border-radius:9px; background:var(--paper-2); border:1px solid var(--line); color:var(--ink-3); font-size:11.5px; font-weight:600; line-height:17px; text-align:center; vertical-align:middle; }
.unread .mail-conv-n { color:var(--ink-2); }
/* Reader: the other messages in this conversation, tap to jump. */
.mail-conv-strip { display:flex; flex-direction:column; margin:2px 0 16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper-2); }
.mail-conv-item { display:flex; align-items:center; gap:10px; padding:9px 14px; text-align:left; border-bottom:1px solid var(--line); color:var(--ink-2); font-size:14.5px; width:100%; }
.mail-conv-item:last-child { border-bottom:0; }
.mail-conv-item.on { background:var(--card); color:var(--ink); font-weight:600; }
.mail-conv-item .mc-from { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-conv-item .mc-date { color:var(--ink-3); font-size:13px; flex:none; }
.mail-conv-item .mc-star { color:var(--gold); flex:none; }
.mail-compose-body blockquote { margin:0; padding-left:12px; border-left:2px solid var(--line-2); color:var(--ink-3); }
.mail-draft-note { margin-left:auto; color:var(--ink-3); font-size:13px; font-style:italic; }
.mail-presets { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mail-presets-l { color:var(--ink-3); font-size:13px; }
.mail-preset { padding:6px 12px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); font-size:13.5px; background:var(--card); }
.mail-preset:hover { border-color:var(--accent); color:var(--accent); }
.mail-discard { margin-left:auto; color:var(--ink-3); }
/* Which account a message belongs to, shown in the All-accounts view. */
.mail-acct-chip { display:inline-block; vertical-align:middle; margin-right:7px; padding:1px 8px; border-radius:999px; background:var(--paper-2); border:1px solid var(--line); color:var(--ink-2); font-size:12px; font-weight:500; white-space:nowrap; }
.mail-meta .mail-acct-chip { margin-right:0; margin-left:auto; }
/* Which folder a cross-folder search hit lives in. */
.mail-folder-chip { display:inline-block; vertical-align:middle; margin-right:7px; padding:1px 8px; border-radius:999px; background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); color:var(--accent); font-size:11.5px; font-weight:600; white-space:nowrap; }
.mail-searching { font-style:italic; opacity:.75; }
.mail-acct-err { margin:8px 10px; padding:10px 13px; border-radius:12px; background:var(--paper-2); border:1px solid var(--line-2); color:var(--ink-2); font-size:14px; line-height:1.4; }
.mail-acct-err.needs-signin { color:var(--gold); background:color-mix(in srgb,var(--gold) 12%,transparent); border-color:color-mix(in srgb,var(--gold) 30%,var(--line)); }
/* Height is set by JS to the reported content height, so the whole reading pane
   scrolls as one rather than the body scrolling inside a fixed box. */
.mail-body-frame { width:100%; height:340px; min-height:120px; border:0; border-radius:10px; background:#fff; display:block; }
/* On mobile the action bar is a tight 7-across grid, so a menu anchored to a
   tiny cell (right:0) shoots off the screen edge. Instead, the reader dropdowns
   open as a proper bottom sheet: edge-to-edge and flush to the bottom of the
   screen (rounded top corners, safe-area padding), so there's no floating gap
   above the tab bar. (Robin, 2026-10-12.) */
@media (max-width:820px){
  .mail-msg-act .mail-dd[open] > .mail-dd-menu {
    position:fixed; left:0; right:0; top:auto; bottom:0; width:auto; min-width:0;
    max-height:60vh; overflow-y:auto;
    padding:10px 14px calc(14px + env(safe-area-inset-bottom));
    border-radius:20px 20px 0 0;
    box-shadow:0 -18px 54px -14px rgba(0,0,0,.5); z-index:60;
  }
  .mail-msg-act .mail-dd-menu .mail-dd-item { padding:15px 16px; font-size:16px; border-radius:12px; }
  .mail-msg-act .mail-dd-menu .mail-dd-item svg { width:21px; height:21px; }
  .mail-msg-act .mail-dd-menu .mail-quad-dot { width:13px; height:13px; }
}
.mail-text { font-size:16px; line-height:1.7; color:var(--ink); white-space:pre-wrap; word-wrap:break-word; font-family:inherit; margin:4px 0; }
/* Plain-text view: full width, comfortable measure - the point is readability, so
   long lines wrap naturally instead of a fixed email column squeezing them. */
.mail-text-plain { overflow-wrap:anywhere; }
.mail-text a { color:var(--accent); text-decoration:underline; }
.mail-imgbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 16px; padding:11px 15px; border:1px solid var(--line-2); border-radius:12px; background:var(--paper-2); color:var(--ink-2); font-size:14px; }
.mail-imgbar-t { min-width:0; }
.mail-imgbar-act { display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; }
.mail-imgbar-note { font-size:12.5px; color:var(--ink-3); font-style:italic; }
.mail-imgbar-act .ghost { border:1px solid var(--line-2); padding:6px 12px; border-radius:999px; font-size:13.5px; }
.mail-imgbar-act .ghost:hover { border-color:var(--accent); color:var(--accent); }
.mail-join-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 16px; }
.mail-join-url { color:var(--ink-3); font-size:13px; word-break:break-all; }
.mail-invite { margin:12px 0 16px; padding:16px 18px; border:1px solid var(--line-2); border-radius:14px; background:var(--paper-2); }
.mail-invite-h { color:var(--ink-3); font-size:13px; margin-bottom:6px; }
.mail-invite-title { font-size:18px; font-weight:600; color:var(--ink); }
.mail-invite-when { color:var(--ink); font-size:15px; margin-top:5px; }
.mail-invite-loc, .mail-invite-org { color:var(--ink-2); font-size:14px; margin-top:3px; }
.mail-invite-act { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.mail-invite-added { display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; color:var(--done,#3a8a4f); }
.mail-msg-act, .mail-compose-act { display:flex; gap:10px; align-items:center; margin-top:22px; }
/* Compose actions live in the sticky header now, so Send/Attach/Cancel are
   always in reach even mid-way down a very long email. */
.mail-compose-head-act { margin-left:auto; display:flex; gap:8px; align-items:center; flex:none; }
/* Compact the primary Send button for the header (the .wide base is tall). */
.mail-compose-head-act .mail-send-btn { width:auto; min-height:0; padding:9px 20px; font-size:15.5px; border-radius:11px; white-space:nowrap; }
/* Keep Send/Attach/Discard fully visible: the back button and actions never
   shrink; the title and the "Resumed draft" note give up space and truncate,
   so a large font size can't push Send off the card's rounded edge. */
.mail-compose-head { flex-wrap:nowrap; min-width:0; }
.mail-compose-head .mail-back { flex:none; }
.mail-compose-head .mail-reader-title { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-compose-head .mail-draft-note { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-stray { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding:11px 15px; background:var(--paper-2); border:1px solid var(--line); border-radius:12px; color:var(--ink-2); font-size:14.5px; }
.mail-stray span { flex:1; min-width:0; }
.mail-stray button { flex:none; }
.mail-stray .mail-stray-act { flex:none; display:flex; gap:6px; align-items:center; }
.mail-stray-x { width:32px; padding:0; font-size:18px; color:var(--ink-3); }
.mail-stray-x:hover { color:var(--ink); }
/* Spark-style: the action toolbar stays pinned while the email scrolls under
   it. It must sit BELOW the 44px tab strip (sticky, z:25) - top:0 would pin it
   behind the tabs, which read as "not pinned at all". */
.mail-reader-head { position:sticky; top:44px; z-index:8; background:var(--card); border-bottom:1px solid var(--line); padding-bottom:10px; }
/* Desktop: pin the reader toolbar just BELOW the sticky breadcrumb (which also sits
   at top:44px), so it isn't hidden behind it. --mail-crumbh is measured per render. */
@media (min-width:821px){ .mail-reader-head { top:calc(44px + var(--mail-crumbh, 46px)); } }
/* Compact, consistent icon buttons for the reader toolbar. */
.mail-act-ic { display:inline-flex; align-items:center; justify-content:center; padding:8px; min-width:38px; height:38px; color:var(--ink-2); }
.mail-act-ic svg { width:20px; height:20px; display:block; }
/* Hover highlight only where hover is real - on touch, :hover (and the .ghost
   hover background) stick to the last-tapped icon and make it look selected. */
@media (hover:hover){ .mail-act-ic:hover { color:var(--accent); } }
@media (hover:none){ .mail-act-ic:not(.on):hover, .ghost.mail-act-ic:not(.on):hover { color:var(--ink-2); background:transparent; } }
.mail-act-ic.mail-star-btn.on { color:var(--gold); }
/* Reply / Transform dropdowns in the reader action row (native <details>). */
.mail-dd { position:relative; display:inline-block; }
.mail-dd > summary { list-style:none; cursor:pointer; gap:1px; }
.mail-dd > summary::-webkit-details-marker { display:none; }
.mail-dd .mail-dd-car svg { width:13px; height:13px; }
.mail-dd[open] > summary { color:var(--accent); background:var(--paper-2); border-radius:9px; }
.mail-dd-sum.on { color:var(--accent); }   /* email is filed in a bucket */
.mail-dd-quad.on { color:var(--accent); font-weight:600; }
.mail-dd-menu { position:absolute; z-index:40; top:calc(100% + 4px); right:0; min-width:200px; background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 16px 40px -16px rgba(0,0,0,.4); padding:6px; }
.mail-dd-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border-radius:9px; color:var(--ink); font-size:15px; background:none; border:0; cursor:pointer; }
.mail-dd-item:hover { background:var(--paper-2); color:var(--accent); }
.mail-dd-item svg { width:18px; height:18px; flex:none; }
/* Claudius sits in the same round icon row - a tinted accent circle, not a pill. */
.mail-claudius.mail-act-ic { width:38px; min-width:38px; padding:8px; gap:0; font-size:0; border-radius:999px;
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.mail-claudius.mail-act-ic:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 20%,transparent); border-color:var(--accent); }
.mail-claudius.mail-act-ic.busy { opacity:.55; animation:claudius-pulse 1s ease-in-out infinite; }
/* The draft-reply button now sits in the toolbar styled like every other action
   (plain .ghost .mail-act-ic); keep its working pulse via the icon, not a colour. */
.mail-act-ic.busy { opacity:.55; animation:claudius-pulse 1s ease-in-out infinite; }
@keyframes claudius-pulse { 50% { opacity:.9; } }
.mail-claudius { display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:10px; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); font-size:14.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s, opacity .12s; }
.mail-claudius:hover { background:color-mix(in srgb,var(--accent) 20%,transparent); border-color:var(--accent); }
.mail-claudius:disabled { opacity:.6; cursor:default; }
.mail-compose { display:flex; flex-direction:column; gap:12px; padding:20px 24px; }
.mail-compose input, .mail-compose textarea { width:100%; padding:13px 16px; font-size:16.5px; background:var(--paper); border:1px solid var(--line-2); border-radius:12px; color:var(--ink); }
.mail-compose textarea { min-height:280px; resize:vertical; font-family:inherit; line-height:1.6; }
.mail-compose input:focus-visible, .mail-compose textarea:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
/* Which account this message sends from. */
.mc-from { display:flex; align-items:center; gap:10px; }
.mc-from-l { flex:none; width:40px; font-size:14px; color:var(--ink-3); }
.mc-from select { flex:1; min-width:0; padding:12px 14px; font-size:16px; background:var(--paper); border:1px solid var(--line-2); border-radius:12px; color:var(--ink); }
.mc-from select:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
@media (max-width:820px){
  .mail-layout { display:block; border:0; box-shadow:none; background:transparent; border-radius:0; min-height:0; }
  .mail-list-col { width:auto; border-right:0; max-height:none; border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden; }
  /* Full-bleed reader on mobile: no card, so the toolbar can pin cleanly. */
  .mail-reader { max-height:none; border:0; border-radius:0; box-shadow:none; background:transparent; }
  .mail-layout:not(.reading) .mail-reader { display:none; }
  .mail-layout.reading .mail-list-col { display:none; }
  .mail-msg, .mail-compose { padding:4px 2px; overflow-x:clip; }
  /* A wide email must never push the page wider than the screen - that makes the
     mobile browser zoom the whole layout out, which looked like "the UI changed". */
  .mail-msg { max-width:100%; }
  .mail-subj { overflow-wrap:anywhere; word-break:break-word; }
  .mail-back { display:inline-flex; flex:none; }
  /* Turning a note into a table is a desktop action - hide the ⋯ on mobile. */
  .note-more { display:none; }
  /* Keyboard shortcuts are a desktop thing - hide every shortcuts button on mobile. */
  [data-mail-shortcuts], [data-open-shortcuts], .home-foot { display:none; }
  /* Reader actions overflow 375px, so pin the bar to the top (stays above the
     message as you scroll) and let the action buttons scroll sideways within
     it — Back stays put on the left, every action stays reachable. */
  /* Sits ABOVE the top nav (z:30) so, once you scroll, the toolbar pins to the
     very top and the email scrolls under it (Spark-style). */
  /* Reading a mail on mobile: hide the top brand/nav bar so the reader is
     full-screen (Back + bottom tabs are enough) and the toolbar pins at top:0. */
  body.mail-reading .nav { display:none; }
  /* Reading a mail: the page header (Mail title + Guide/Accounts/Compose) and the
     breadcrumb are redundant - the toolbar's "← Inbox" is the way back - and left
     in they stack up and float over each other as you scroll. Hide them so the
     toolbar is the sole, clean sticky top. (Robin.) */
  body.mail-reading .pane-head { display:none; }
  /* Keep the breadcrumb bar (with its back) when reading on mobile - pinned at the
     top in place of the hidden nav - and let the reader toolbar scroll under it, so
     Back lives in the breadcrumbs as it does everywhere else. (Robin, 2026-10-06.) */
  body.mail-reading .note-crumbs { position:sticky; top:0; z-index:33; margin:0 -18px 12px; padding:9px 14px;
    background:color-mix(in srgb,var(--paper) 94%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  body.mail-reading .mail-reader-head .mail-back { display:none; }
  .mail-reader-head { gap:6px 4px; flex-wrap:wrap;
    margin:0 -18px; padding:9px 14px; background:var(--card); border-bottom:1px solid var(--line); }
  /* The action bar drops to its own full-width row and WRAPS, so every action
     (reply, delete, file-in-a-life-area, make-task…) is visible - it used to
     scroll sideways with a hidden scrollbar, so the later icons vanished. */
  .mail-reader-head .mail-msg-act { margin-left:0; margin-top:0; flex-basis:100%; min-width:0;
    display:grid; grid-template-columns:repeat(7, 1fr); gap:5px 2px; overflow:visible; }
  .mail-reader-head .mail-msg-act > button { width:100%; min-width:0; }
}
.mail-acct-list { display:flex; flex-direction:column; gap:8px; max-width:520px; }
.mail-acct { display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.ma-dot { width:10px; height:10px; border-radius:50%; flex:none; }
.ma-e { flex:1; color:var(--ink); font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-status { flex:none; max-width:170px; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.ma-status-ok { color:#2f7d46; background:color-mix(in srgb,#2f7d46 12%,transparent); }
.ma-status-err { color:#b02020; background:color-mix(in srgb,#b02020 12%,transparent); }
.ma-status-unknown { color:var(--ink-3); background:var(--paper-2); }
.ma-status-wait { color:var(--ink-2); background:var(--paper-2); }
.ma-status-auth { color:var(--gold); background:color-mix(in srgb,var(--gold) 15%,transparent); }
.mail-acct-card.has-issue .mail-acct { border-color:var(--line-2); }
/* Home: a mail-account connection problem, surfaced in the today lead */
.home-mailalert { display:flex; flex-direction:column; gap:6px; margin:0 0 12px; }
.home-mailalert-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit; cursor:pointer; padding:11px 13px; border:1px solid #f0c4c4; border-left:3px solid var(--danger,#c4412e); border-radius:12px; background:color-mix(in srgb,var(--danger,#c4412e) 7%,var(--card)); color:var(--ink); }
.home-mailalert-row:hover { background:color-mix(in srgb,var(--danger,#c4412e) 12%,var(--card)); }
.hma-ic { flex:none; }
.hma-t { flex:1; min-width:0; font-size:14px; }
.hma-go { flex:none; font-size:13px; font-weight:600; color:var(--danger,#c4412e); }
.mail-acct .x { color:var(--ink-3); font-size:18px; } .mail-acct .x:hover { color:var(--accent); }
.mail-acct-card { max-width:560px; }
/* Blocked senders live in one collapsible section at the very bottom of the
   Accounts page, collapsed by default (the chevron on the header opens it). */
.blocked-sec { margin-top:18px; }
.blocked-sec > summary.blocked-sum { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; }
.blocked-sec > summary.blocked-sum::-webkit-details-marker { display:none; }
.blocked-sec > summary.blocked-sum::before { content:'▸'; color:var(--ink-3); font-size:12px; transition:transform .15s; }
.blocked-sec[open] > summary.blocked-sum::before { transform:rotate(90deg); }
.mail-blocked { padding:12px 4px 4px; }
.mail-blocked-h { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:600; margin-bottom:8px; }
.mail-blocked-chips { display:flex; flex-wrap:wrap; gap:7px; }
.mail-blocked-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 6px 4px 12px; border-radius:999px; background:var(--paper-2); border:1px solid var(--line); font-size:13.5px; color:var(--ink-2); }
.mail-blocked-chip button { width:18px; height:18px; border-radius:50%; color:var(--ink-3); font-size:14px; line-height:1; flex:none; }
.mail-blocked-chip button:hover { background:var(--accent); color:#fff; }
.mail-acct .sig-btn { margin-left:auto; font-size:13.5px; padding:5px 12px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); }
.mail-acct .sig-btn:hover { border-color:var(--accent); color:var(--accent); }
.mail-acct-card .mail-acct .x { margin-left:8px; }
.mail-acct-edit { margin:2px 0 14px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--paper-2); }
.acct-edit-form { display:flex; flex-direction:column; gap:10px; }
.acct-edit-form .ae-lbl { display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--ink-3); }
.acct-edit-form .ae-lbl input { font-size:15px; font-weight:400; color:var(--ink); padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.acct-edit-form .ae-lbl input:focus { border-color:var(--accent); outline:none; }
.acct-edit-form .ae-row { display:flex; gap:8px; }
.acct-edit-form .ae-act { display:flex; gap:8px; margin-top:2px; }
.acct-edit-form .ae-act .add-btn { width:auto; white-space:nowrap; padding:10px 18px; }
.mail-sig { margin:2px 0 14px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--paper-2); }
.sig-color-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sig-color-lbl { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; }
.sig-color-sw { width:34px; height:28px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--card); cursor:pointer; }
.sig-color-sw::-webkit-color-swatch-wrapper { padding:3px; }
.sig-color-sw::-webkit-color-swatch { border:none; border-radius:5px; }
.sig-hex { width:96px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); text-transform:lowercase; }
.sig-hex:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
/* An email-preview box: signatures are authored dark-on-light for real inboxes,
   so keep this light in both themes or the text vanishes on the dark theme. */
.mail-sig-ed, .mail-sig-ed.prose { min-height:70px; background:#fff; color:#1b1820; border:1px solid var(--line); border-radius:9px; padding:12px 14px; font-size:15px; }
.mail-sig-ed a { color:inherit; }
.mail-sig-ed:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.mail-sig-act { display:flex; align-items:center; gap:12px; margin-top:11px; }
.mail-sig-act .add-btn { width:auto; white-space:nowrap; padding:9px 18px; }
.sig-hint { color:var(--ink-3); font-size:13px; }
.mail-sig-note { color:var(--ink-3); font-size:13.5px; padding:2px 2px; }
.mail-sig-note b { color:var(--ink-2); font-weight:600; }
/* Premium signature builder: a fields column beside a live preview. The account
   card is normally narrow; widen it while the builder is open so both fit. */
.mail-acct-card:has(.mail-sig:not([hidden])) { max-width:1120px; }
/* A compact fields column beside a big, full-height live preview that takes the
   rest of the (widened) card - so neither the screen nor the panel sits empty. */
.sig-build-grid { display:grid; grid-template-columns:340px minmax(0,1fr); gap:28px; align-items:stretch; }
@media (max-width:820px){ .sig-build-grid { grid-template-columns:minmax(0,1fr); } }
.sig-fields { display:flex; flex-direction:column; gap:11px; }
.sig-tpls { display:flex; gap:8px; }
.sig-tpl { flex:1; padding:8px 6px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink-2); font-size:13.5px; font-weight:600; cursor:pointer; }
.sig-tpl:hover { border-color:var(--accent); color:var(--accent); }
.sig-tpl.on { border-color:var(--accent); color:#fff; background:var(--accent); }
.sig-photo-row { display:flex; align-items:center; gap:14px; padding:4px 0 2px; }
.sig-photo-thumb { width:56px; height:56px; border-radius:50%; object-fit:cover; border:1px solid var(--line); flex:none; }
.sig-photo-thumb.sq { border-radius:10px; }
.sig-photo-ph { width:56px; height:56px; border-radius:50%; border:1px dashed var(--line-2); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ink-3); text-align:center; flex:none; }
.sig-photo-btns { display:flex; flex-wrap:wrap; gap:8px; }
.sig-photo-btns .ghost, .sig-photo-btn { display:inline-flex; align-items:center; font-size:13.5px; padding:7px 13px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); cursor:pointer; background:var(--card); }
.sig-photo-btns .ghost:hover, .sig-photo-btn:hover { border-color:var(--accent); color:var(--accent); }
.sig-f { display:flex; flex-direction:column; gap:5px; }
.sig-f > span { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:600; }
.sig-f .sel { width:100%; }
.sig-two { display:flex; gap:11px; }
.sig-two .sig-f { flex:1; min-width:0; }
.sig-accent-row { display:flex; align-items:center; gap:10px; }
.sig-preview-col { display:flex; flex-direction:column; gap:8px; }
.sig-preview-lbl { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600; }
/* The preview fills the column's full height (matching the fields) so there's no
   empty band, with the signature sitting comfortably near the top on a white
   sheet - a realistic look at how it lands in an inbox. */
.sig-preview-card { flex:1; display:flex; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:34px 32px; min-height:220px; overflow:auto;
  box-shadow:0 1px 2px rgba(28,24,18,.04), 0 18px 40px -28px rgba(28,24,18,.35); }
.sig-preview-card > div { width:100%; }
.sig-preview-card a { text-decoration:none; }
.mail-add-more { display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:10px 16px; border:1.5px dashed var(--line-2); border-radius:12px; color:var(--ink-2); font-size:15px; }
.mail-add-more:hover { border-color:var(--accent); color:var(--accent); background:var(--paper-2); }
.push-sec { margin-top:32px; padding-top:24px; border-top:1px solid var(--line); max-width:620px; }
.push-acts { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.push-status { color:var(--accent); font-size:14.5px; text-wrap:balance; }

/* Attachments: image thumbnails + file chips on notes, task and row cards. */
.attachments { margin-top:24px; }
.attachments.att-drag { outline:2px dashed var(--accent); outline-offset:6px; border-radius:14px; }
.att-h { font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px; }
.att-hint { display:block; margin-top:3px; font-size:12px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-3); }
.area-dash-files { margin-top:20px; }
/* Combined Vision + Goals tab. */
.area-vg .avg-h { font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }
.area-vg .avg-h-goals { margin-top:22px; }
/* Completed goals: a collapsible look-back section under the active ones. */
.area-done-goals { margin-top:20px; }
.avg-done-h { list-style:none; cursor:pointer; font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--done); padding:7px 2px; display:flex; align-items:center; gap:7px; }
.avg-done-h::-webkit-details-marker { display:none; }
.avg-done-h::before { content:"▸"; color:var(--ink-3); font-size:11px; }
.area-done-goals[open] .avg-done-h::before { content:"▾"; }
.area-done-grid { margin-top:12px; opacity:.82; }
.att-grid { display:flex; flex-wrap:wrap; gap:12px; }
.att { position:relative; display:flex; border:1px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer; overflow:hidden; transition:box-shadow .12s, border-color .12s; }
.att:hover { border-color:var(--line-2); box-shadow:var(--shadow); }
.att-img { width:132px; height:132px; }
.att-img img { width:100%; height:100%; object-fit:cover; display:block; background:var(--paper-2); }
.att-file { align-items:center; gap:11px; padding:12px 15px; width:264px; max-width:100%; }
.att-ic { font-size:24px; flex:none; }
.att-info { display:flex; flex-direction:column; min-width:0; }
.att-name { font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-size { font-size:13px; color:var(--ink-3); }
.att-x { position:absolute; top:6px; right:6px; width:23px; height:23px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--paper) 82%,transparent); color:var(--ink-2); font-size:16px; line-height:1; opacity:0; transition:opacity .12s, background .12s, color .12s; }
.att:hover .att-x { opacity:1; }
.att-x:hover { background:var(--accent); color:#fff; }
@media (hover:none){ .att-x { opacity:.85; } }
/* Same rectangular shape as the file attachment cards, for consistency. */
.att-add { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:11px; width:264px; max-width:100%; min-height:69px; padding:12px 15px; box-sizing:border-box; border:1.5px dashed var(--line-2); border-radius:12px; color:var(--ink-3); font-size:15px; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.att-add:hover { border-color:var(--accent); color:var(--accent); background:var(--paper-2); }
.att-add-ic { font-size:24px; line-height:1; flex:none; }
/* Embedded YouTube players (rendered under a note/card body). */
.embeds { display:flex; flex-direction:column; gap:14px; margin:18px 0; }
.embed-yt { position:relative; width:100%; max-width:680px; aspect-ratio:16/9; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); background:#000; }
.embed-yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.embed-yt .yt-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,.62); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; padding-left:3px; box-sizing:border-box; pointer-events:none; }
/* Fallback card for videos that block embedding: a horizontal link, not a 16:9 box. */
.embed-yt.is-card { aspect-ratio:auto; background:var(--card); box-shadow:none; border:1px solid var(--line); border-radius:14px; }
/* An inline player, sitting in the prose where the URL was pasted. */
.embed-yt.lc-inline { margin:16px 0; user-select:none; }
.embed-yt .embed-x { position:absolute; top:8px; right:8px; z-index:2; width:24px; height:24px; padding:0; border:none; border-radius:50%; background:rgba(20,18,24,.6); color:#fff; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s, background .12s; }
.embed-yt.lc-inline:hover .embed-x { opacity:1; }
.embed-yt .embed-x:hover { background:var(--danger,#a3382e); }
.prose.readonly .embed-x, .prose.readonly .lc-x { display:none; }
.yt-card { display:flex; align-items:stretch; text-decoration:none; color:inherit; }
.yt-card-thumb { position:relative; flex:none; width:168px; aspect-ratio:16/9; background:#000; overflow:hidden; }
.yt-card-thumb img { width:100%; height:100%; object-fit:cover; }
.yt-card-thumb .yt-play { width:38px; height:38px; font-size:15px; }
.yt-card-meta { display:flex; flex-direction:column; justify-content:center; gap:5px; padding:12px 16px; min-width:0; }
.yt-card-title { font-weight:600; font-size:15.5px; color:var(--ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.yt-card-src { font-size:13px; color:var(--ink-3); }
.yt-card:hover .yt-card-title { color:var(--accent); }
/* Notion-style link preview card for a pasted URL. */
.link-card { display:flex; align-items:stretch; max-width:680px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; text-decoration:none; color:inherit; transition:border-color .12s; }
.link-card:hover { border-color:var(--accent); }
.link-card.loading { opacity:.7; }
.link-card .lc-main { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:12px 15px; }
.link-card .lc-title { font-weight:600; font-size:15.5px; color:var(--ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.link-card:hover .lc-title { color:var(--accent); }
.link-card .lc-desc { font-size:13px; color:var(--ink-2); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.link-card .lc-site { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3); }
.link-card .lc-fav { width:15px; height:15px; border-radius:3px; flex:none; }
.link-card .lc-thumb { flex:none; width:150px; background:var(--paper-2); overflow:hidden; order:2; }
.link-card .lc-thumb img { width:100%; height:100%; object-fit:cover; }
@media (max-width:560px){ .link-card .lc-thumb { width:100px; } }
/* Inline link card: a non-editable preview block sitting in the prose flow. */
.link-card.lc-inline { position:relative; margin:14px 0; cursor:pointer; user-select:none; }
.link-card.lc-inline .lc-x { position:absolute; top:8px; right:8px; width:24px; height:24px; padding:0; border:none; border-radius:50%; background:rgba(20,18,24,.55); color:#fff; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s, background .12s; }
.link-card.lc-inline:hover .lc-x { opacity:1; }
.link-card.lc-inline .lc-x:hover { background:var(--danger, #a3382e); }
@media (max-width:560px){ .yt-card-thumb { width:124px; } }

.foot-search { display:none; }

/* On desktop the sidebar is the nav; the bottom tab bar is mobile-only. */
.tabbar { display:none; }

@media (max-width:820px){
  /* Block, not grid: a position:sticky grid item is clamped to its own grid cell
     in WebKit (iOS Safari / any iOS browser, Brave included), so once you scroll
     past the nav's row the header unsticks and scrolls away - leaving the
     breadcrumb (pinned at top:--navh) floating over the empty gap the header left.
     Chromium clamps to the whole grid and hides the bug. Plain block flow makes
     both sticky bars clamp to the tall shell, so they pin correctly everywhere. */
  .app-shell { display:block; grid-template-columns:1fr; }
  /* The sidebar collapses to a fixed top header: the Robski Lifebook wordmark plus
     a ⋯ toggle. It stays pinned to the top of the screen; primary navigation is
     the bottom tab bar, and the breadcrumb pins just below this header. */
  .nav {
    position:sticky; top:0; z-index:30; height:auto; flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:8px; padding:8px 14px; border-right:0;
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--paper) 94%,transparent); backdrop-filter:blur(12px);
  }
  /* ☰ menu · ← back · "Lifebook <Tool>" - all left-aligned on one row. */
  .nav-topline { flex:1 1 100%; display:flex; align-items:center; justify-content:flex-start; gap:8px; min-width:0; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
  .nav-brand { flex:0 1 auto; width:auto; min-width:0; padding:8px 6px; margin:0; font-size:23px; text-align:left; display:flex; align-items:center; gap:.28em; overflow:hidden; }
  .nav-brand em { flex:none; }
  /* The current tool's name, sitting after the wordmark: lighter, so "Lifebook"
     still reads as the brand and the tool as where you are. */
  .nav-brand .nav-tool { display:inline; font-style:normal; font-weight:600; color:var(--ink-2); font-size:1em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  /* Left-aligned now, so the centering spacer is gone. */
  .nav-topline-sp { display:none; }
  .mtop-back { flex:none; }
  .nav-topline .nav-brand .brand-mark { width:1.24em; height:1.24em; }
  .nav-drawer-brand { font-size:26px; }
  .nav-drawer-brand .brand-mark { width:1.3em; height:1.3em; }
  .nav-util-toggle { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border-radius:11px; font-size:22px; line-height:1; color:var(--ink-2); border:1px solid var(--line); background:var(--card); }
  .nav-util-toggle:active { background:var(--paper-2); }
  .nav-foot { display:none; }
  /* Note/table header tools mustn't push the page wider than the screen: let the
     area chip + select wrap instead of overflowing (they sized to long area names). */
  .crumb-tools, .tbl-head { flex-wrap:wrap; }
  .crumb-tools { margin-left:0; max-width:100%; min-width:0; gap:6px; }
  .crumb-tools .area-sel, .tbl-head .area-sel { max-width:100%; }
  /* Keep the add-area select compact so the star + bin sit on the same line. */
  .crumb-tools .note-areas .area-sel { max-width:150px; }
  /* Keep the note tools to one tidy row on mobile: Share, Life area and the
     private lock are desktop-only here (the area chip covers filing). */
  .note-hide-mobile { display:none !important; }
  /* Home "Do next": drop the life-area label - on a narrow row it crowds out the
     task title. The accent stripe down the row's left edge still carries the area. */
  .p1-area { display:none; }
  .p1-t { white-space:normal; }
  /* Home "Practices": the 7-day streak dots crowd out the practice name on a phone.
     Seeing what the practice IS matters more than last week's run, so drop the dots
     here (the today-tick and 🔥 streak stay). The full Tracker page keeps them. */
  body[data-view="home"] .trk-week { display:none; }
  body[data-view="home"] .trk-pname { white-space:normal; }
  /* Tracker/Practices page: keep the name legible by dropping the week + streak to
     a second line, rather than letting the 7 dots squeeze the name to an ellipsis. */
  body[data-view="tracker"] .trk-prow { flex-wrap:wrap; align-items:center; }
  body[data-view="tracker"] .trk-pname { white-space:normal; }
  body[data-view="tracker"] .trk-hist { flex:1 1 100%; margin-top:8px; justify-content:flex-start; }
  .nav-spacer, .foot-search, .nav-new { display:none; }
  /* ── Mobile nav drawer: the desktop grouped sidebar, slid in from the left ── */
  .nav-menu-toggle { position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border-radius:11px; font-size:20px; line-height:1; color:var(--ink-2); border:1px solid var(--line); background:var(--card); }
  .nav-menu-toggle:active { background:var(--paper-2); }
  .nav-msgbtn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; margin-left:auto; border-radius:11px; font-size:20px; line-height:1; color:var(--accent); border:1px solid var(--line); background:var(--card); -webkit-tap-highlight-color:transparent; }
  .nav-msgbtn:active { background:var(--paper-2); }
  .nav-topline { justify-content:flex-start; }
  body.nav-drawer-open { overflow:hidden; }
  /* backdrop-filter on .nav would make the fixed drawer position relative to the
     header, not the viewport; drop it while the drawer is open. */
  body.nav-drawer-open .nav { backdrop-filter:none; }
  .nav-drawer {
    position:fixed; top:0; left:0; z-index:120; height:100dvh; width:min(87vw,340px);
    display:flex; flex-direction:column; gap:2px;
    padding:12px 14px calc(22px + env(safe-area-inset-bottom));
    background:var(--paper-2); border-right:1px solid var(--line);
    box-shadow:22px 0 60px -22px rgba(0,0,0,.45);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(-101%); transition:transform .28s cubic-bezier(.4,0,.2,1); will-change:transform;
  }
  body.nav-drawer-open .nav-drawer { transform:translateX(0); }
  .nav-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
  .nav-drawer-brand { display:inline-flex; align-items:center; gap:2px; background:none; border:0; padding:4px 2px; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:23px; font-weight:600; color:var(--ink); }
  .nav-drawer-brand em { font-style:normal; color:var(--accent); }
  .nav-drawer-brand .brand-mark { width:1.06em; height:1.06em; }
  .nav-drawer-x { flex:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:16px; }
  .nav-drawer-bg { display:block; position:fixed; inset:0; z-index:119; background:rgba(20,16,10,.46); opacity:0; pointer-events:none; transition:opacity .28s ease; }
  body.nav-drawer-open .nav-drawer-bg { opacity:1; pointer-events:auto; }
  /* Mobile drawer: a plain, importance-ordered column of big clear buttons, not
     the desktop grouped grid. Hide the grid + favourites; show the flat list. */
  .nav-drawer .nav-grid, .nav-drawer .nav-secs { display:none; }
  .nav-mlist { display:flex; flex-direction:column; gap:6px; margin:2px 0 0; }
  .nav-mlist .mnav-row { display:flex; align-items:center; gap:2px; }
  .mnav-grip { flex:none; width:26px; text-align:center; color:var(--accent); font-size:16px; line-height:1; cursor:grab; touch-action:none; opacity:.75; padding:14px 2px; -webkit-user-select:none; user-select:none; }
  .mnav-grip:active { cursor:grabbing; opacity:1; }
  .mnav-row.mdragging { z-index:5; }
  .mnav-row.mdragging .nav-item { box-shadow:0 14px 30px -12px rgba(0,0,0,.5); border-color:var(--accent); }
  .mnav-row.mdrop-top .nav-item { box-shadow:0 -3px 0 -1px var(--accent); }
  .mnav-row.mdrop-bottom .nav-item { box-shadow:0 3px 0 -1px var(--accent); }
  .nav-mlist .nav-item { display:flex; align-items:center; gap:13px; flex:1 1 auto; min-width:0; width:auto; padding:14px 15px; border:1px solid var(--line); border-radius:13px; background:var(--card); font-size:17px; color:var(--ink); }
  .nav-mlist .nav-item.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--card)); color:var(--accent); }
  .nav-mlist .nav-item .nav-ic { font-size:20px; width:24px; text-align:center; color:var(--accent); flex:none; }
  .nav-mlist .nav-item.on .nav-ic { color:var(--accent); }
  .nav-mlist .nav-item .nav-lbl { flex:1 1 auto; min-width:0; font-weight:500; }
  .nav-mlist .nav-item .nav-quick { display:none; }   /* keep the drawer clean - add via the tool itself */
  .nav-mlist .nav-item .nav-badge { margin-left:auto; }
  .nav-drawer .nav-k { display:none; }
  .nav-drawer .nav-bottom { display:flex; flex-direction:column; gap:8px; order:0; flex-basis:auto; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--line); }
  /* The utility trio - info · theme · Settings - each full-width, stacked, flush
     with the nav buttons above (no side gaps). */
  .nav-drawer .nav-bottom-row { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
  .nav-drawer .nav-bottom-row .nav-theme:not(.nav-settings) { width:100%; justify-content:flex-start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-drawer .nav-bottom-row .help-btn { display:inline-flex; align-items:center; justify-content:flex-start; width:100%; height:auto; padding:11px 15px; font-size:16px; border-radius:11px; }
  .nav-drawer .nav-bottom-row .nav-settings { width:100%; }
  .nav-drawer .nav-theme, .nav-drawer .nav-settings, .nav-drawer .nav-adminlink, .nav-drawer .nav-signout { width:100%; justify-content:flex-start; padding:11px 15px; border-radius:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* The utility trio - info · theme · Settings - share an accent-tinted highlight
     so they read as one settings cluster. */
  .nav-drawer .nav-bottom-row .help-btn,
  .nav-drawer .nav-bottom-row .nav-theme,
  .nav-drawer .nav-settings { background:color-mix(in srgb,var(--accent) 11%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line-2)); color:var(--accent); }
  .nav-drawer .nav-bottom-row .help-btn:active,
  .nav-drawer .nav-bottom-row .nav-theme:active,
  .nav-drawer .nav-settings:active { background:color-mix(in srgb,var(--accent) 20%,var(--card)); }
  .nav-drawer .nav-settings .ns-ic { color:var(--accent); }
  /* Force the info · theme · Settings trio to true full width (the old util-bar
     rules set width:auto / inline-flex / max-width and were winning). */
  .nav-drawer .nav-bottom-row { display:flex !important; flex-direction:column !important; align-items:stretch !important; width:100% !important; flex-wrap:nowrap !important; }
  .nav-drawer .nav-bottom-row > .help-btn,
  .nav-drawer .nav-bottom-row > .nav-theme,
  .nav-drawer .nav-bottom-row > .nav-settings { display:flex !important; width:100% !important; max-width:none !important; align-self:stretch !important; justify-content:flex-start !important; box-sizing:border-box; }
  /* A persistent search bar under the wordmark, part of the sticky header, so it
     stays put on every page while the content scrolls. Opens the ⌘K palette. */
  /* The search row: an optional back arrow, then the full-width search pill. */
  .nav-msearch-row { display:flex; order:3; flex-basis:100%; align-items:center; gap:9px; width:100%; margin:2px 0 0; }
  .nav-mback { flex:none; }
  .nav-msearch {
    display:flex; flex:1 1 auto; align-items:center; gap:11px; min-width:0;
    padding:12px 15px; font-size:16px; color:var(--ink-3); text-align:left;
    background:var(--card); border:1px solid var(--line-2); border-radius:12px; cursor:pointer;
  }
  .nav-msearch .hs-ic { font-size:19px; line-height:1; color:var(--accent); }
  .nav-msearch:active { transform:scale(.99); }
  /* Mail has its own inbox search; the reader is full-screen (nav hidden). */
  body[data-view="mail"] .nav-msearch-row { display:none; }
  /* On mobile the back arrow rides inside the breadcrumb row, exactly like every
     other page (crumbNav): "← Início ... + New" on one line. So hide the
     standalone labelled button and keep the in-row arrow. */
  .home-back { display:none; }
  /* Home's breadcrumb + New row. width:calc(100% + 36px) restores the right-edge
     bleed the plain width:100% (above) kills: as a display:contents flex item the
     crumbbar honours the left negative margin but not the right, so +New floated
     ~36px short of the gutter instead of flush to it. */
  .home-crumbbar { display:flex; width:calc(100% + 36px); }
  /* The home launcher stands in for the hidden sidebar: a tap-grid to every
     section, Today included (the planner is now responsive). Big targets and
     big labels, comfortable for thumbs and eyes. */
  .home-launch {
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0;
  }
  /* Home's in-flow search pill is replaced by the sticky .nav-msearch header. */
  .home-search { display:none; }
  .hl-btn {
    position:relative; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:9px; min-height:96px; padding:20px 12px;
    font-size:16px; font-weight:500; color:var(--ink); background:var(--card);
    border:1px solid var(--line-2); border-radius:18px; box-shadow:var(--shadow);
  }
  .hl-btn:active { transform:scale(.97); }
  .hl-ic { font-size:27px; line-height:1; color:var(--accent); }
  /* The mark is wider than it is tall, so it can't just inherit the emoji
     font-size. The 27px box is the emoji line box: matching it keeps every
     tile's label on the same line across a row. */
  .hl-guide .hl-ic { display:flex; align-items:center; justify-content:center; height:27px; }
  .hl-guide .brand-mark { width:38px; height:auto; margin:0; vertical-align:0; }
  .hl-badge {
    position:absolute; top:13px; right:15px; min-width:20px; height:20px; padding:0 6px;
    display:inline-flex; align-items:center; justify-content:center; font-size:12px;
    font-weight:600; color:var(--accent-ink); background:var(--accent); border-radius:10px;
  }
  /* Most per-app search boxes are hidden on mobile - the ⌘K universal search
     covers them. Mail keeps its own (the universal search can't reach IMAP), and
     on the Mail view we hide the universal box instead (see below). */
  .list-search:not(.mail-search) { display:none; }
  body[data-view="mail"] .nav-k { display:none; }
  /* Contacts on mobile: searching your own contacts is the box that matters, so
     keep it; the "find someone else on Lifebook" box + Connect are dropped
     (the surfaced "already on Lifebook" suggestions cover connecting). Invite
     stays, full width. */
  body[data-view="contacts"] .list-head { flex-wrap:wrap; }
  body[data-view="contacts"] .list-search[data-contacts-q] { display:block; flex:1 1 100%; }
  .contact-import-btn { display:none; }   /* mobile: vCard import isn't practical here */
  .fr-connect, .fr-connect-btn { display:none; }
  .fr-connect-row .fr-invite-btn { flex:1 1 100%; }
  /* The tools bar: Information, Colour Scheme, Settings (+ Admin) and a search
     box. Hidden until the ⋯ toggle opens it, then it drops in as rows below the
     wordmark. */
  .nav-bottom { order:4; flex-basis:100%; margin:0; padding:0; display:none; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
  body.util-open .nav-bottom { display:flex; padding-top:9px; margin-top:7px; border-top:1px solid var(--line); }
  .nav-bottom-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .nav-theme { width:auto; border:1px solid var(--line); background:var(--card); border-radius:10px; padding:8px 12px; font-size:15px; }
  /* The information "i" keeps its circle in the tools bar. */
  .help-btn { display:none; }
  body.util-open .nav-bottom-row .help-btn { display:inline-flex; width:40px; height:40px; font-size:17px; border:1px solid var(--line-2); background:var(--card); }
  .nav-settings .ns-lbl, .nav-adminlink .ns-lbl, .nav-signout .ns-lbl { display:inline; }
  .nav-settings, .nav-adminlink, .nav-signout { width:auto; display:inline-flex; align-items:center; gap:6px; font-size:15px; padding:9px 18px; border:1px solid var(--line); background:var(--card); border-radius:10px; }
  /* A real, tappable search box (opens the universal palette), inside the tools bar. */
  /* The ⌘K box in the tools drawer is redundant now the sticky .nav-msearch is
     always on screen, so keep it hidden on mobile. */
  .nav-k { display:none; }
  body.util-open .nav-k { display:none; }
  .pane { padding:20px 18px 96px; }
  /* The breadcrumb pins just below the fixed brand header (--navh tracks the
     header's height, so it sits correctly whether the tools bar is open or shut).
     The negative margins bleed it to the screen edges, cancelling the pane's
     padding so it reads as one full-width strip. */
  .crumbbar, .note-crumbs {
    position:sticky; top:var(--navh,56px); z-index:22;
    margin:-20px -18px 14px; padding:11px 18px;
    background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  /* The mail reader hides the top bar, so its breadcrumb pins to the very top. */
  body.mail-reading .crumbbar { top:0; }
  /* Breadcrumbs stay visible on mobile - the trail, its back arrow and the "+ New"
     menu - sitting just under the header (or a page's search box). */
  /* Tasks: swap the row of category chips for a single dropdown. */
  .area-chips, .area-chips-tog { display:none; }
  .area-chips-wrap { margin:0; }
  .area-filter { display:block; width:100%; max-width:none; margin:14px 0 20px; }
  /* Tasks: a card list instead of a sideways-scrolling table (only .ttable;
     smart tables keep their scroll). */
  .tasks-scroll { overflow:visible; border:0; background:transparent; box-shadow:none; }
  .tasks-scroll .ttable, .tasks-scroll tbody, .tasks-scroll tr, .tasks-scroll td { display:block; }
  .tasks-scroll thead { display:none; }
  /* Card layout: checkbox down the left; the title sits over a tidy meta row
     (area · star · priority); a full-height chevron strip on the right is one
     big, obvious tap-to-open zone; and delete is a quiet × in the top corner. */
  .tasks-scroll .tr-task {
    position:relative;
    display:grid; align-items:center; column-gap:9px; row-gap:7px;
    grid-template-columns:auto auto auto auto minmax(0,1fr) 30px;
    grid-template-areas:
      "done title title title title chev"
      "done area  star  prio  .     chev";
    padding:14px 0 13px 15px; margin-bottom:10px;
    border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow);
  }
  .tasks-scroll .tr-task:active { background:var(--paper-2); }
  .tasks-scroll .tr-task td { border:0; padding:0; }
  .tasks-scroll .tc-done { grid-area:done; align-self:center; }
  .tasks-scroll .tc-title { grid-area:title; min-width:0; font-size:17px; line-height:1.3; padding-right:30px; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
  .tasks-scroll .tc-title .t { overflow-wrap:anywhere; word-break:break-word; }
  .tasks-scroll .tc-area { grid-area:area; min-width:0; justify-self:start; }
  .tasks-scroll .tc-date { display:none; }
  /* Promote each control out of its table cell so it takes a single grid slot. */
  .tasks-scroll .tc-act, .tasks-scroll .tc-prio { display:contents; }
  .tasks-scroll .row-open-btn { display:none; }   /* replaced by the chevron open-zone */
  .tasks-scroll .tr-task .star { grid-area:star; font-size:18px; }
  .tasks-scroll .tc-prio .ie { grid-area:prio; }
  .tasks-scroll .tr-task .star, .tasks-scroll .tc-prio .ie {
    display:flex; align-items:center; justify-content:center; height:30px; margin:0; padding:0; opacity:1;
  }
  /* On the card, star/priority are display-only (you edit them inside). Show the
     star only when it's set, and drop the inline "+" placeholders - an empty
     slot just opens the card, so a stray + would only be noise. */
  .tasks-scroll .tr-task .star:not(.on) { display:none; }
  .tasks-scroll .ie-add { display:none; }
  /* Delete: a quiet × pinned to the top-right corner (not in the flow). */
  .tasks-scroll .x { position:absolute; top:8px; right:9px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; margin:0; padding:0; font-size:18px; color:var(--ink-3); border-radius:50%; opacity:.7; }
  .tasks-scroll .x:active { background:var(--paper-2); color:var(--accent); opacity:1; }
  /* The whole card opens now, so the chevron is just a quiet "opens" hint. */
  .tasks-scroll .row-chev { display:flex; grid-area:chev; align-items:center; justify-content:center; align-self:stretch; height:100%; font-size:22px; line-height:1; color:var(--ink-4,var(--ink-3)); opacity:.6; border-radius:0 13px 13px 0; }
  .tasks-scroll .tr-task:active .row-chev { color:var(--accent); opacity:1; }
  .tasks-scroll .tr-task.done { opacity:.62; }
  .tabbar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:color-mix(in srgb,var(--paper-2) 96%,transparent); backdrop-filter:blur(14px);
    border-top:1px solid var(--line); padding:7px 6px max(7px, env(safe-area-inset-bottom));
  }
  .tab-b { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px; color:var(--ink-3); font-size:11px; letter-spacing:.01em; }
  .tab-b > span { font-size:21px; line-height:1; position:relative; font-variant-emoji:text; }
  /* A small floating corner badge, lifted off the icon by a ring the colour of
     the tab bar, so it reads as a tidy count rather than digits stuck to the glyph. */
  .tab-b .tab-badge { position:absolute; top:-7px; left:13px; min-width:16px; height:16px; padding:0 4.5px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:var(--accent); color:#fff; font-size:9.5px; font-weight:600; line-height:1; letter-spacing:.01em; box-shadow:0 0 0 2px var(--paper-2); }
  /* Quiet presence dot (new mail / open tasks) instead of a count. */
  .tab-b .tab-dot { position:absolute; top:-2px; right:-6px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--paper-2); }
  .tab-b.on { color:var(--accent); }
  /* Keyboard up (typing): hide the bottom bar so it doesn't float over the keyboard. */
  body.kb-open .tabbar { display:none; }
}

/* ── sign-in gate ────────────────────────────────── */
.gate2 { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px;
  background:radial-gradient(120% 90% at 50% -10%, var(--paper-2), var(--paper) 60%); }
.gate2-card { width:100%; max-width:400px; display:flex; flex-direction:column; gap:20px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:22px; padding:48px 40px 42px;
  box-shadow:var(--shadow); }
.gate2-mark { font-family:'Cormorant Garamond',serif; font-size:40px; font-weight:600; letter-spacing:-.01em; }
.gate2-mark em { font-style:italic; color:var(--accent); } .gate2-mark .dot { color:var(--gold); margin:0 5px; }
/* Keep the sunrise mark on the same line as "Lifebook" when the wordmark wraps. */
.mark-lockup { white-space:nowrap; }
/* The tagline lives inside .gate2-mark rather than beside it: the card is a
   flex column with a 16px gap, which would push it away from the wordmark. */
.gate2-tag { display:block; margin-top:7px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:18px; line-height:1.3; color:var(--ink-3); }
.gate2-sub { color:var(--ink-2); font-size:16.5px; line-height:1.5; text-wrap:balance; margin-bottom:2px; }
.gate2-input { width:100%; padding:14px 16px; font-size:17px; text-align:center; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:13px;
  transition:border-color .15s, box-shadow .15s; }
.gate2-input::placeholder { color:var(--ink-3); }
.gate2-input:focus-visible { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent); }
.gate2-code { letter-spacing:.32em; font-size:22px; font-family:ui-monospace,Menlo,monospace; }
/* The per-step "which code" heading above the code box. Plain for the emailed/
   texted code; a distinct, bordered call-out for the authenticator step, so the
   two 6-digit prompts are never confused. */
.gate2-codehead { display:flex; flex-direction:column; gap:5px; text-align:left; margin:2px 0 -4px; }
.gch-title { font-size:16px; font-weight:600; color:var(--ink); line-height:1.35; }
.gch-hint { font-size:14.5px; color:var(--ink-3); line-height:1.55; }
.gch-hint b { color:var(--ink-2); }
.gate2-codehead.is-totp { padding:20px 20px 22px; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius:16px; background:color-mix(in srgb, var(--accent) 7%, var(--card)); gap:12px; margin:6px 0 4px; }
.gate2-codehead.is-totp .gch-badge { align-self:flex-start; font-size:12px; font-weight:700; color:#6f9f4a; background:color-mix(in srgb,#6f9f4a 14%,transparent); padding:5px 13px; border-radius:999px; margin-bottom:2px; }
.gate2-codehead.is-totp .gch-title { font-size:18px; line-height:1.3; }
/* The button's depth comes from the shared .btn-accent treatment below; the
   gate one is simply full width and a touch taller. */
.gate2-btn { width:100%; min-height:52px; font-size:17px; margin-top:2px; }
/* The text route is a quiet, self-selecting link under the primary button - not a
   co-equal second button. Its own wording ("Use Lifebook for your email?") means a
   newcomer signing up with an outside address glides past it, while a returning
   user whose mailbox now lives inside Lifebook - and so can't open the emailed code
   - spots their way in. It texts the code to THEIR own saved phone. */
.gate2-smslink { display:block; width:100%; background:none; border:1px solid transparent; margin:6px 0 0;
  padding:11px 14px; border-radius:12px; font-size:14px; line-height:1.45; color:var(--ink-3); cursor:pointer; text-wrap:balance;
  transition:background .12s, border-color .12s; }
.gate2-smslink:hover { background:var(--paper-2); border-color:var(--line-2); }
.gate2-smslink b { color:var(--ink-2); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.gate2-smslink:hover b { color:var(--accent); }
.gate2-smslink:disabled { opacity:.5; cursor:default; }
/* On a phone give it a proper tap target - a soft bordered pill, easy to hit,
   but still quieter than the primary Email-me button above it. */
@media (max-width:820px){
  .gate2-smslink { margin-top:10px; padding:13px 14px; min-height:46px; border:1px solid var(--line-2); border-radius:12px; background:var(--card); font-size:15px; }
  .gate2-smslink:active { background:var(--paper-2); }
}
/* Secondary way in: a quiet text link under the main button, so the primary
   path stays obvious but the phone option is one tap away. */
.gate2-alt { background:none; border:0; color:var(--ink-2); font-size:15.5px; padding:4px; margin-top:-6px;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.gate2-alt:hover { color:var(--accent); }
.gate2-alt:disabled { opacity:.5; cursor:default; }
.gate2-err { color:var(--accent); font-size:14.5px; text-wrap:balance; }
/* Signup (claim account): labelled fields, left-aligned, with a subdomain suffix. */
.signup-card { max-width:400px; text-align:left; }
.signup-card .gate2-mark, .signup-card .gate2-sub { text-align:center; }
.signup-l { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink-2); letter-spacing:.01em; }
.su-opt { font-weight:400; color:var(--ink-3); }
.signup-l .gate2-input { text-align:left; font-size:16px; padding:12px 14px; }
.su-sub { display:flex; align-items:stretch; border:1px solid var(--line-2); border-radius:12px; overflow:hidden; background:var(--paper); }
.su-sub:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.su-sub-in { border:0 !important; box-shadow:none !important; flex:1; min-width:0; background:transparent; }
.su-sub-suffix { display:flex; align-items:center; padding:0 14px; background:var(--paper-2); color:var(--ink-3); font-size:15px; white-space:nowrap; }
.su-foot { text-align:center; }
.su-signout { background:none; border:0; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:inherit; padding:0; }

/* ── toast ───────────────────────────────────────── */
.toast {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); padding:12px 20px; border-radius:999px;
  font-size:15.5px; box-shadow:var(--shadow); z-index:40; max-width:90vw;
}
.toast:has(.toast-undo) { display:inline-flex; align-items:center; gap:14px; padding:10px 12px 10px 20px; }
.toast-undo { flex:none; border:0; background:color-mix(in srgb,var(--paper) 22%,transparent); color:var(--paper); font:inherit; font-weight:600; padding:6px 14px; border-radius:999px; cursor:pointer; }
.toast-undo:hover { background:color-mix(in srgb,var(--paper) 34%,transparent); }
/* The floating Undo button - an always-available counterpart to ⌘Z and the toast's
   Undo, so you can reverse your last change on touch too, after the toast has gone.
   Shows only when there's something to undo; bottom-right, clear of the centre
   toast, and lifted above the phone's tab bar. (Robin, 2026-10-14.) */
.undo-fab { display:none; }
body.has-undo .undo-fab {
  display:inline-flex; align-items:center; gap:8px;
  position:fixed; right:18px; bottom:20px; z-index:46;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink-2);
  font:inherit; font-weight:600; font-size:14px; padding:10px 16px 10px 14px;
  border-radius:999px; box-shadow:0 10px 30px -10px rgba(0,0,0,.4); cursor:pointer;
  opacity:.92; transition:color .12s,border-color .12s,background .12s,opacity .12s,transform .1s;
}
body.has-undo .undo-fab:hover { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); opacity:1; transform:translateY(-1px); }
.undo-fab:active { transform:none; }
.undo-fab .uf-ic { font-size:18px; line-height:1; }
@media (max-width:820px){ body.has-undo .undo-fab { right:12px; bottom:calc(66px + env(safe-area-inset-bottom)); } }

@media (max-width:760px){
  .grid { grid-template-columns:1fr; gap:24px; }
  .col-areas { position:static; }
  .areas { flex-flow:row wrap; }
  .area { width:auto; }
  .area .count { display:none; }
  .search { order:3; flex-basis:100%; }
  .bar { flex-wrap:wrap; }
}

/* ── inline rich-text editor ─────────────────────────── */
.prose { font-size:18.5px; line-height:1.75; color:var(--ink); outline:none; cursor:text; }
/* No left gutter: the fold chevron and grip are absolute and hang into the
   pane's own left padding, so the note text stays flush-left - a single stray
   heading no longer indents the whole note. (Robin.) */
.prose:empty::before, .prose[data-empty]::before { content:attr(data-ph); color:var(--ink-3); font-style:italic; pointer-events:none; }
.prose > *:first-child { margin-top:0; }
/* Every Enter press gets the SAME gap. contenteditable makes a new line as either
   a <p> or (Chromium's default) a <div>, so without this the spacing looked random
   - some lines tight, some with a gap, for no reason the writer could see. Both now
   carry the paragraph gap; Shift+Enter still makes a tight <br> line within one. */
.prose p, .prose > div { margin:0 0 14px; }
/* Collapsible headings: a subtle chevron before each heading folds its content.
   The chevron and drag grip are absolute and hang just left of the heading, into
   the pane's own left padding - so the note TEXT stays flush-left and a heading
   doesn't indent the note. The chevron sits within ~18px (the tightest pane
   padding, on mobile) so it never clips off the edge. (Robin.) */
.prose h1, .prose h2, .prose h3 { position:relative; }
/* A generous tap target - the glyph is small but the clickable box fills the
   height of the heading line, so the arrow is easy to hit. (Robin.) */
.fold-toggle { position:absolute; left:-18px; top:0; width:16px; height:1.5em; display:inline-flex; align-items:center; justify-content:center; margin:0; color:var(--ink-3); cursor:pointer; user-select:none; font-size:17px; line-height:1; border-radius:6px; transition:color .12s, background .12s; }
.fold-toggle:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent); }
/* Drag grip to reorder a heading's whole section. Faint until you hover the
   heading. It needs a second slot in the margin, so it only appears on pointer
   devices (which have the wider pane padding); on touch it's hidden - dragging a
   section by a tiny grip is a mouse gesture anyway. */
.head-grip { position:absolute; left:-36px; top:0; width:15px; height:1.5em; display:inline-flex; align-items:center; justify-content:center; margin:0; color:var(--ink-3); cursor:grab; user-select:none; font-size:13px; line-height:1; opacity:0; transition:opacity .12s, color .12s; }
.prose h1:hover .head-grip, .prose h2:hover .head-grip, .prose h3:hover .head-grip { opacity:.6; }
.head-grip:hover { opacity:1 !important; color:var(--accent); }
.head-grip:active { cursor:grabbing; }
@media (hover:none){ .head-grip { display:none; } }
.prose h1.head-dragging, .prose h2.head-dragging, .prose h3.head-dragging { opacity:.4; }
/* Drop indicator: a line above the heading the section will land in front of. */
.prose h1.head-drop, .prose h2.head-drop, .prose h3.head-drop { box-shadow:0 -2px 0 var(--accent); }
.prose > .folded { opacity:.85; }
.folded-hidden { display:none !important; }
.prose h1 { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; margin:20px 0 8px; }
.prose h2 { font-size:26px; margin:14px 0 6px; }
.prose h3 { font-size:22px; margin:12px 0 5px; }
/* A sub-heading sitting directly under a heading shouldn't leave a gap at all -
   the parent heading's bottom margin already separates them. */
.prose :is(h1,h2,h3) + :is(h1,h2,h3) { margin-top:2px; }
.prose h4, .prose h5, .prose h6 { font-size:18.5px; font-weight:600; margin:16px 0 4px; color:var(--ink-2); }
.prose a { color:var(--accent); }
/* Internal links (to another Lifebook page) read as a subtle dotted underline. */
.prose a.rl-link { text-decoration:none; border-bottom:1px dashed color-mix(in srgb,var(--accent) 55%,transparent); cursor:pointer; }
.prose a.rl-link:hover { border-bottom-style:solid; }

/* ── Well-being hub tiles (two rows of four) ─────────── */
.wb-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:4px 0 22px; }
.wb-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:18px 10px; min-height:96px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); cursor:pointer; box-shadow:var(--shadow); transition:border-color .12s, transform .12s, box-shadow .12s; }
.wb-tile:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 12px 26px -16px rgba(0,0,0,.45); }
.wb-tile-ic { font-size:27px; line-height:1; }
.wb-tile-t { font-size:14.5px; font-weight:600; letter-spacing:.01em; }
.wb-tile { position:relative; }
.wb-tile.on { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.wb-tile.on .wb-tile-t { color:var(--accent); }
/* A live reading waiting on this tool - a small pulsing dot, tap reopens it. */
.wb-tile-live { position:absolute; top:10px; right:10px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation:wbPulse 2s ease-out infinite; }
@keyframes wbPulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow:0 0 0 7px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce){ .wb-tile-live { animation:none; } }
/* Well-being hub */
/* Title and the stat strip share the top row; stats drop below on a narrow screen. */
.wb-hub-head { flex-direction:row; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; }
.wb-hub-headmain { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.wb-hub-sub { margin:0; color:var(--ink-3); font-size:15px; }
.wb-stats { display:flex; flex-wrap:wrap; gap:11px; margin:0; }
.wb-stat { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 18px; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:var(--shadow); min-width:88px; }
.wb-stat b { font-family:'Cormorant Garamond',Georgia,serif; font-size:25px; font-weight:600; color:var(--ink); line-height:1; }
.wb-stat span { font-size:12.5px; color:var(--ink-3); }
.wb-recent { margin-top:26px; }
.wb-recent-h { display:flex; align-items:center; justify-content:space-between; }
.wb-seeall { border:0; background:none; color:var(--accent); font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:4px 2px; }
.wb-seeall:hover { text-decoration:underline; }
.wb-recent-list { display:flex; flex-direction:column; gap:7px; }
.wb-recent-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit; color:var(--ink); cursor:pointer; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow); transition:border-color .12s, transform .08s; }
.wb-recent-row:hover { border-color:var(--accent); transform:translateY(-1px); }
.wb-rr-ic { flex:none; font-size:19px; width:24px; text-align:center; }
.wb-rr-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.wb-rr-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.wb-rr-k { font-size:12px; color:var(--ink-3); }
.wb-rr-when { flex:none; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.j-list-head { margin:2px 0 16px; }
@media (max-width:640px){ .wb-tiles { grid-template-columns:repeat(2,1fr); gap:10px; } .wb-tile { min-height:84px; padding:14px 8px; } }

/* ── Journal ─────────────────────────────────────────── */
.j-head-act { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.j-head-btn { padding:11px 16px; font-size:15px; white-space:nowrap; }
.j-head-primary { display:flex; gap:10px; }
/* Journal / Coaching / Dreams / Spirit Cards: icon + label inline on desktop. */
.j-mode-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.j-mode-btn .jm-ic { font-size:1.05em; line-height:1; }
@media (max-width:820px){
  .j-head-act { width:100%; }
  /* Four entry buttons wrap to a 2x2 grid. Each is one equal-height cell with the
     icon stacked above a centred label, so a longer name like "Spirit Cards"
     wraps tidily under its icon instead of cramming beside it and looking odd. */
  .j-head-primary { flex:1; flex-wrap:wrap; }
  .j-head-primary .add-btn.wide { flex:1 1 44%; }
  .j-mode-btn { flex-direction:column; gap:5px; min-height:74px; padding:12px 8px;
    white-space:normal; text-align:center; line-height:1.2; }
  .j-mode-btn .jm-ic { font-size:22px; }
}
/* Journal insights card (scan of recent entries) */
.j-insights { background:color-mix(in srgb,var(--accent) 6%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:16px; padding:18px 20px; margin-bottom:18px; }
.j-insights-h { display:flex; align-items:center; gap:10px; font-size:16.5px; font-weight:600; cursor:pointer; }
.j-insights-h .acw-chev { font-size:11px; color:var(--ink-3); width:11px; flex:none; }
.j-insights.collapsed .j-insights-body { display:none; }
.j-insights-ts { font-size:12.5px; font-weight:400; color:var(--ink-3); }
.j-insights-tools { margin-left:auto; display:flex; gap:4px; }
.j-insights-tools .ghost { padding:4px 9px; }
.j-insights-t { margin-top:10px; font-size:16px; line-height:1.6; color:var(--ink); }
.j-insights-pts { margin:12px 0 0 4px; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--ink-2); }
/* Insights: two actions, an optional reading pane, and the dated history list. */
.j-insights-body { margin-top:14px; }
.j-ins-actions { display:flex; gap:10px; }
.j-ins-actions .add-btn.wide { flex:1; }
.j-ins-read { margin-top:16px; padding:16px 18px; background:var(--card); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow); }
.j-ins-read-h { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink-3); font-weight:600; }
.j-ins-read .j-insights-t { margin-top:8px; }
.j-ins-close { padding:2px 8px; font-size:16px; line-height:1; }
.j-ins-list { margin-top:18px; display:flex; flex-direction:column; gap:7px; }
.j-ins-list-h { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; margin-bottom:3px; }
.j-ins-item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 14px; border:1px solid var(--line); border-radius:11px; background:var(--card); cursor:pointer; transition:border-color .12s; }
.j-ins-item:hover { border-color:var(--accent); }
.j-ins-item.on { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--card)); }
.j-ins-item-date { flex:none; font-weight:600; font-size:14px; color:var(--ink); min-width:104px; }
.j-ins-item-snip { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-3); font-size:14px; }
.j-ins-del { flex:none; color:var(--ink-3); font-size:17px; line-height:1; padding:0 4px; opacity:.5; transition:opacity .12s,color .12s; }
.j-ins-del:hover { opacity:1; color:var(--accent); }
@media (max-width:560px){ .j-ins-actions { flex-direction:column; } .j-ins-item-date { min-width:0; } }
/* Reflection history (I Ching, spirit cards) reuses the Insights stack so the
   cards stack and feel as robust. These accents give each row its reading's
   identity - the hexagram / card name in full ink, a leading symbol. (Robin.) */
.jrs-nm { color:var(--ink); font-weight:600; }
.jrs-sym { color:color-mix(in srgb,var(--accent) 80%,var(--ink-2)); font-weight:600; }
.jrs-static { cursor:default; }
.jrs-static:hover { border-color:var(--line); }
.j-list { display:flex; flex-direction:column; gap:10px; }
.j-card { display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:100%; text-align:left; padding:15px 18px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); cursor:pointer; transition:border-color .12s, transform .06s; }
.j-card:hover { border-color:var(--accent); }
.j-card:active { transform:scale(.997); }
.j-card-date { font-weight:600; font-size:16px; color:var(--ink); }
.j-card-snip { color:var(--ink-2); font-size:14.5px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.j-card-mode { font-size:12.5px; color:var(--ink-3); background:var(--paper-2); border-radius:999px; padding:3px 10px; }
/* New-entry prompt picker */
.j-picker { border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:20px 22px; margin-bottom:18px; }
.j-picker-h { font-size:17px; font-weight:600; color:var(--ink); margin-bottom:16px; }
.j-mode { margin-bottom:18px; }
.j-mode-h { display:flex; align-items:center; gap:8px; font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; margin-bottom:9px; }
.j-mode-ic { font-size:15px; }
.j-prompts { display:flex; flex-direction:column; gap:7px; }
.j-prompt-chip { text-align:left; width:100%; padding:11px 14px; border:1px solid var(--line-2); border-radius:11px; background:var(--paper); color:var(--ink); font-size:15.5px; line-height:1.45; cursor:pointer; transition:border-color .12s, background .12s; }
.j-prompt-chip:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--paper)); }
.j-picker-cancel { margin-top:4px; }
/* Entry view */
.j-entry { max-width:760px; }
.j-entry-head { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:8px; }
/* Voice dictation: a record toggle above the editor. Pulses red while listening. */
.j-voice { display:flex; align-items:center; gap:12px; margin:6px 0 16px; flex-wrap:wrap; }
.j-rec-btn { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.j-rec-dot { width:11px; height:11px; border-radius:50%; background:var(--ink-3); flex:none; transition:background .15s; }
.j-rec-btn.rec-on { border-color:color-mix(in srgb,var(--danger,#c0392b) 55%,var(--line)); color:var(--danger,#c0392b); }
.j-rec-btn.rec-on .j-rec-dot { background:var(--danger,#c0392b); animation:recpulse 1.3s ease-in-out infinite; }
.j-rec-btn.rec-proc { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.j-rec-btn.rec-proc .j-rec-dot { background:var(--accent); animation:recpulse 1.1s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 color-mix(in srgb,var(--danger,#c0392b) 55%,transparent); } 55% { opacity:.6; box-shadow:0 0 0 6px transparent; } }
.j-voice-hint { font-size:13.5px; color:var(--ink-3); line-height:1.4; max-width:440px; }
/* Daily review · reconcile-with-tasks panel. Always a soft, padded accent card. */
.rc-panel { margin-top:24px; padding:18px 20px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:16px; background:color-mix(in srgb,var(--accent) 5%,var(--card)); }
.rc-open { }
.rc-h { font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; color:var(--ink); margin-bottom:12px; }
.rc-group { margin-bottom:16px; }
.rc-group-h { font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:9px; }
.rc-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:11px 13px; margin-bottom:8px; border:1px solid var(--line); border-radius:11px; background:var(--card); font-size:15px; color:var(--ink); }
.rc-done-row { cursor:pointer; transition:border-color .12s, background .12s; }
.rc-done-row:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.rc-check { flex:none; width:23px; height:23px; border-radius:7px; border:1.5px solid var(--line-2); display:inline-flex; align-items:center; justify-content:center; color:transparent; font-size:13px; font-weight:700; }
.rc-done-row:hover .rc-check { border-color:var(--accent); color:var(--accent); }
.rc-row-t { flex:1; min-width:0; }
.rc-add-row { justify-content:space-between; }
.rc-add-btn { flex:none; white-space:nowrap; }
.rc-empty { font-size:14px; color:var(--ink-3); font-style:italic; padding:4px 0; }
.rc-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rc-open .rc-bar { margin-top:14px; padding-top:14px; border-top:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); }
.rc-btn { width:auto; white-space:nowrap; padding:12px 22px; font-size:15px; font-weight:600; border-radius:12px; background:var(--accent); color:#fff; border:1px solid var(--accent); box-shadow:var(--shadow-sm,0 6px 16px -8px rgba(0,0,0,.3)); }
.rc-btn:hover:not(:disabled) { background:color-mix(in srgb,var(--accent) 88%,#000); }
.rc-btn:disabled { opacity:.65; cursor:default; }
.rc-panel .j-deeper-hint { flex:1; min-width:200px; }
.j-entry-date { font-size:clamp(22px,2.6vw,30px); margin:0; }
.j-entry .prose blockquote { border-left:3px solid var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent); margin:14px 0; padding:10px 16px; border-radius:0 10px 10px 0; color:var(--ink); font-weight:500; font-style:normal; }
.j-deeper-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.j-deeper { width:auto; white-space:nowrap; padding:11px 20px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); }
.j-deeper:hover { background:color-mix(in srgb,var(--accent) 22%,transparent); }
.j-deeper:disabled { opacity:.6; cursor:default; }
.j-deeper-hint { color:var(--ink-3); font-size:13.5px; max-width:420px; line-height:1.4; }
/* Empathy button: a softer, warmer companion to Dig deeper. */
.j-empathy-btn { width:auto; white-space:nowrap; padding:11px 20px; background:color-mix(in srgb,var(--gold,#c99) 16%,transparent); color:color-mix(in srgb,var(--gold,#a87) 82%,var(--ink)); border:1px solid color-mix(in srgb,var(--gold,#c99) 42%,var(--line)); }
.j-empathy-btn:hover { background:color-mix(in srgb,var(--gold,#c99) 26%,transparent); }
.j-empathy-btn:disabled { opacity:.6; cursor:default; }
/* An empathy reflection inside the journal prose: a soft, warm callout, clearly
   not a question to answer. */
.prose blockquote.j-empathy { border-left:3px solid color-mix(in srgb,var(--gold,#c99) 60%,transparent); background:color-mix(in srgb,var(--gold,#c99) 9%,transparent); border-radius:0 10px 10px 0; padding:12px 16px; color:var(--ink-2); font-style:normal; }
/* Coach button: a calmer blue-teal companion to Dig deeper / Empathy. */
.j-coach-btn { width:auto; white-space:nowrap; padding:11px 20px; background:color-mix(in srgb,var(--done,#4a7a52) 15%,transparent); color:color-mix(in srgb,var(--done,#4a7a52) 88%,var(--ink)); border:1px solid color-mix(in srgb,var(--done,#4a7a52) 42%,var(--line)); }
.j-coach-btn:hover { background:color-mix(in srgb,var(--done,#4a7a52) 24%,transparent); }
.j-coach-btn:disabled { opacity:.6; cursor:default; }
/* A coach turn in the session: a calm callout, clearly a different voice. */
.prose blockquote.j-coach { border-left:3px solid color-mix(in srgb,var(--done,#4a7a52) 60%,transparent); background:color-mix(in srgb,var(--done,#4a7a52) 9%,transparent); border-radius:0 10px 10px 0; padding:12px 16px; color:var(--ink); font-style:normal; }

/* ── Read & Watch (bookmarks) ────────────────────────── */
.rw-add { display:flex; gap:9px; margin:4px 0 16px; }
.rw-add input { flex:1; min-width:0; padding:12px 15px; font-size:16px; background:var(--paper); border:1px solid var(--line-2); border-radius:12px; color:var(--ink); }
.rw-add input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.rw-add .add-btn { width:auto; white-space:nowrap; padding:0 20px; }
/* Book/Film picker for a typed title (ignored when a link is pasted). */
.rw-type { display:flex; gap:6px; margin:-8px 0 16px; }
.rw-type-btn { padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:13.5px; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.rw-type-btn:hover { border-color:var(--accent); }
.rw-type-btn.on { background:color-mix(in srgb,var(--accent) 16%,var(--card)); color:var(--ink); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.rw-tabs { display:flex; gap:6px; align-items:center; margin-bottom:14px; }
.rw-tabs-scroll { display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0; }
.rw-sort { flex:none; padding:7px 10px; font-size:13.5px; border-radius:9px; background:var(--card); border:1px solid var(--line); color:var(--ink-2); }
.rw-tab { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:14.5px; cursor:pointer; transition:border-color .12s, color .12s; }
.rw-tab:hover { border-color:var(--accent); }
.rw-tab.on { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.rw-tab-n { font-size:12px; opacity:.7; }
.rw-list { display:flex; flex-direction:column; gap:10px; }
/* One depth for every card, whatever shape its picture is. An article's OG image
   is landscape and a book cover is portrait, and because the image was in normal
   flow it set the thumbnail's height - so articles sat visibly shallower in the
   list than the books and films around them. */
.rw-card { display:flex; align-items:stretch; min-height:96px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; transition:border-color .12s; }
.rw-card:hover { border-color:var(--accent); }
.rw-thumb { cursor:pointer; }
.rw-title { background:none; border:0; padding:0; text-align:left; cursor:pointer; }
/* The saved-item detail card. */
.rwc { max-width:640px; display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.rwc.has-area { border-top:4px solid hsl(var(--h,4) 60% 52%); }
.rwc-cover { position:relative; height:180px; display:flex; align-items:center; justify-content:center; background:var(--paper-2); overflow:hidden; }
.rwc-cover img { width:100%; height:100%; object-fit:cover; }
.rwc-cover-ic { position:absolute; font-size:44px; opacity:.5; }
.rwc-cover img + .rwc-cover-ic { display:none; }
.rwc-main { display:flex; flex-direction:column; gap:14px; padding:20px 22px 22px; }
.rwc-title { font-family:'Cormorant Garamond',Georgia,serif; font-size:26px; font-weight:600; color:var(--ink); border:0; border-bottom:1px solid transparent; background:none; padding:2px 0; width:100%; }
.rwc-title:focus { outline:none; border-bottom-color:var(--accent); }
.rwc-media { font-size:14px; color:var(--ink-3); margin-top:-6px; }
.rwc-open { align-self:flex-start; color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; }
.rwc-open:hover { color:var(--accent); }
.rwc-rate { padding:4px 0; }
.rwc-rate .rw-star { font-size:26px; }
.rwc-row { display:flex; align-items:center; gap:12px; }
.rwc-lbl { flex:none; width:84px; font-size:13px; color:var(--ink-3); }
.rwc-row .sel { flex:1; min-width:0; }
.rwc-status { padding:8px 16px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); font-size:14px; }
.rwc-status.done { border-color:var(--done); color:var(--done); font-weight:600; }
/* Per-type status: a small segmented pill row (Want to read / Reading / Read). */
.rwc-status-seg { display:inline-flex; flex-wrap:wrap; gap:6px; }
.rwc-seg { padding:7px 13px; font-size:14px; font-weight:600; border:1px solid var(--line-2); border-radius:999px; background:var(--card); color:var(--ink-2); cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
.rwc-seg:hover { border-color:var(--accent); color:var(--ink); }
.rwc-seg.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.rwc-notes-l { display:flex; flex-direction:column; gap:6px; }
.rwc-notes { min-height:340px; resize:vertical; width:100%; max-width:none; box-sizing:border-box; }
.rwc-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:6px; border-top:1px solid var(--line); }
.rwc-added { font-size:12.5px; color:var(--ink-3); }
.rwc-del { color:var(--danger,#c4412e); }
.rw-thumb { position:relative; flex:none; width:132px; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; text-decoration:none; }
.rw-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rw-thumb-ic { position:absolute; color:rgba(255,255,255,.85); font-size:24px; }
.rw-thumb.vid .rw-thumb-ic { background:rgba(0,0,0,.5); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; padding-left:3px; }
/* A book has no cover to fetch: a warm plate with the book glyph. */
.rw-thumb.book { background:linear-gradient(150deg,color-mix(in srgb,var(--gold) 55%,var(--card)),color-mix(in srgb,var(--gold) 22%,var(--card))); }
.rw-thumb.book .rw-thumb-ic { position:static; color:var(--card); font-size:34px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
/* An article with no image: a warm plate in the accent colour. */
.rw-thumb.article { background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 62%,var(--card)),color-mix(in srgb,var(--accent) 26%,var(--card))); }
.rw-thumb.article .rw-thumb-ic { position:static; color:var(--card); font-size:32px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.22)); }
/* A film with no poster fetched: a cool plate with the clapperboard glyph. */
.rw-thumb.film { background:linear-gradient(150deg,color-mix(in srgb,var(--slate) 60%,var(--card)),color-mix(in srgb,var(--slate) 24%,var(--card))); }
.rw-thumb.film .rw-thumb-ic { position:static; font-size:32px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.rw-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:13px 15px; }
.rw-title { font-weight:600; font-size:16px; color:var(--ink); line-height:1.35; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rw-title:hover { color:var(--accent); }
.rw-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-3); }
.rw-media { color:var(--ink-2); }
/* Life area on a saved item: a coloured dot + name in the meta line, plus a left
   accent on the card so the area reads at a glance like notes and tasks do. */
.rw-card.has-area { border-left:3px solid hsl(var(--h,220) 60% 52%); }
.rw-area { display:inline-flex; align-items:center; gap:5px; color:hsl(var(--h,220) 42% 42%); }
.rw-area .cd { width:7px; height:7px; border-radius:50%; background:hsl(var(--h,220) 60% 52%); flex:none; }
.rw-edit-links { flex:1 1 100%; }
.rw-edit-links .xlinks { margin-top:2px; border:0; border-radius:0; background:none; box-shadow:none; padding:0; }
.rw-edit-links .xlinks-h { font-family:inherit; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); font-weight:600; margin-bottom:6px; }
/* Your own rating out of 5, on every saved item: five stars fill up, with a serif
   readout beside them. Warm gold so a rating reads as a reward, not admin. */
.rw-rating { display:flex; align-items:center; flex-wrap:wrap; gap:5px 10px; margin-top:3px; }
.rw-rate-lbl { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.rw-stars { display:inline-flex; gap:2px; }
.rw-star { background:none; border:0; padding:0 1px; font-size:18px; line-height:1; color:var(--line-2); cursor:pointer; transition:color .1s, transform .08s; }
.rw-star:hover { color:#d9a441; transform:scale(1.12); }
.rw-star.on { color:#d9a441; }
.rw-score { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:21px; color:var(--ink); line-height:1; }
.rw-score-of { font-size:12px; font-family:system-ui,sans-serif; color:var(--ink-3); margin-left:1px; }
/* Inline edit: type + date, revealed by the ✎ on the card. Quiet panel so it
   feels part of the card, not a modal. */
.rw-edit { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:8px; padding:10px 12px; border:1px dashed var(--line-2); border-radius:10px; background:var(--paper-2); }
.rw-edit-f { display:flex; flex-direction:column; gap:3px; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); }
.rw-edit-f .sel { min-width:150px; text-transform:none; letter-spacing:0; }
.rw-edit-name { flex:1 1 100%; }
.rw-edit-name .sel { width:100%; max-width:none; }
.rw-thumb.link { background:linear-gradient(150deg,color-mix(in srgb,var(--teal,#2a9d8f) 55%,var(--card)),color-mix(in srgb,var(--teal,#2a9d8f) 24%,var(--card))); }
.rw-thumb.link .rw-thumb-ic { position:static; color:var(--card); font-size:30px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.22)); }
/* The one control: a tick box on the left. Empty = unread (default); tick it and
   the item drops to the Read section. */
/* margin on BOTH sides: with none on the right the thumbnail butted straight up
   against the box, which on a video (a black plate, or a photo) read as a
   layout fault rather than a deliberate edge. */
.rw-tick { flex:none; align-self:center; margin:0 14px; width:28px; height:28px; border-radius:8px; border:2px solid var(--line-2); color:transparent; display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; transition:background .12s, border-color .12s; }
.rw-tick:hover { border-color:var(--accent); }
.rw-tick.on { background:var(--done); border-color:var(--done); color:#fff; }
/* The right-hand action column: edit (✎) on top, delete (×) below. Both stay
   quiet until you hover the card, so the resting card shows just the tick. */
.rw-card-act { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; margin-right:10px; }
.rw-edit-btn { background:none; border:0; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; padding:3px 5px; border-radius:7px; opacity:0; transition:opacity .12s, color .12s, background .12s; }
.rw-card:hover .rw-edit-btn { opacity:.6; } .rw-edit-btn:hover { opacity:1 !important; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.rw-edit-btn.on { opacity:1; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.rw-card.editing { border-color:var(--accent); }
.rw-del { flex:none; color:var(--ink-3); font-size:19px; line-height:1; cursor:pointer; padding:0 3px; opacity:0; transition:opacity .12s, color .12s; }
.rw-card:hover .rw-del { opacity:.55; } .rw-del:hover { opacity:1 !important; color:var(--danger,#c0392b); }
@media (hover:none){ .rw-del, .rw-edit-btn { opacity:.45; } }
/* Section headers + sort bar for the Unread / Read split. */
.rw-sec { margin-bottom:22px; }
.rw-sec-h { margin-bottom:12px; }
.rw-sortbar { display:flex; justify-content:flex-end; margin-bottom:14px; }
/* Type filter: All / Films / Books / Articles / Videos / Websites. */
.rw-typefilter { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px; }
.rw-fchip { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:13.5px; font-weight:600; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.rw-fchip:hover { border-color:var(--line-2); }
.rw-fchip.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.rw-setup-panel { border:1px solid var(--line); border-radius:14px; background:var(--paper-2); padding:18px 20px; margin-bottom:16px; font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.rw-setup-h { font-size:16px; font-weight:600; color:var(--ink); margin-bottom:12px; }
.rw-setup-sec { margin-bottom:14px; }
.rw-setup-sec ol { margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.rw-bm-row { margin-top:9px; }
.rw-bookmarklet { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-weight:600; text-decoration:none; cursor:grab; }
.rw-code { display:inline-block; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:2px 7px; word-break:break-all; color:var(--ink-2); }
.rw-setup-note { font-size:12.5px; color:var(--ink-3); margin-top:4px; }
@media (max-width:560px){ .rw-thumb { width:96px; } }
.prose code { font-family:ui-monospace,Menlo,monospace; font-size:.9em; background:var(--paper-2); padding:2px 6px; border-radius:5px; }
.prose blockquote { border-left:3px solid var(--line-2); padding-left:16px; margin:0 0 14px; color:var(--ink-2); font-style:italic; }
/* Pasted DATA tables in notes: kept as real tables, tidy borders, scroll sideways
   if wide. Scoped to exclude the mail editors, whose signatures/emails use tables
   only for layout and must not gain grid borders. */
.ptable-wrap { overflow-x:auto; margin:14px 0; -webkit-overflow-scrolling:touch; }
.prose:not(.mail-sig-ed):not(.mail-compose-body) table { border-collapse:collapse; font-size:15px; min-width:min(100%,360px); }
.prose:not(.mail-sig-ed):not(.mail-compose-body) th, .prose:not(.mail-sig-ed):not(.mail-compose-body) td { border:1px solid var(--line-2); padding:7px 12px; text-align:left; vertical-align:top; }
.prose:not(.mail-sig-ed):not(.mail-compose-body) th { background:var(--paper-2); font-weight:600; }
.prose:not(.mail-sig-ed):not(.mail-compose-body) caption { text-align:left; color:var(--ink-3); font-size:13.5px; padding-bottom:6px; }
.prose ul, .prose ol { margin:0 0 14px; padding-left:26px; }
/* Nested (indented) bullets: tighter spacing per level, and rotate the marker
   so the depth reads at a glance. Tab indents, Shift+Tab outdents. */
.prose li > ul, .prose li > ol { margin:3px 0; padding-left:24px; }
.prose ul ul { list-style:circle; } .prose ul ul ul { list-style:square; }
.prose ul ul ul ul { list-style:disc; } .prose ul ul ul ul ul { list-style:circle; }
.prose ul { list-style:disc; } .prose ol { list-style:decimal; }
.prose li { margin:3px 0; position:relative; }
/* A grab handle in the marker gutter: drag a list item up or down to reorder. */
.prose li::before { content:'⠿'; position:absolute; left:-24px; top:0; width:20px; text-align:center; color:var(--ink-3); opacity:0; cursor:grab; transition:opacity .12s; }
.prose li:hover::before { opacity:.45; }
.prose li.li-dragging { opacity:.45; }
.prose li.li-dragging::before { cursor:grabbing; }
.note-body { min-height:120px; }

/* selection formatting bubble */
/* Always a dark floating toolbar with white icons — reads on both themes.
   (Previously used var(--ink), which is near-white in dark mode: light-on-light.) */
.bubble { position:absolute; z-index:70; display:flex; align-items:center; gap:2px; padding:5px; background:#28222f; border:1px solid rgba(255,255,255,.12); border-radius:11px; box-shadow:0 8px 24px -6px rgba(0,0,0,.5); }
.bubble button { width:32px; height:32px; display:grid; place-items:center; color:#fff; font-size:15px; border-radius:7px; }
.bubble button:hover { background:rgba(255,255,255,.18); }
.bubble button.bub-h { width:auto; min-width:30px; padding:0 7px; font-size:12.5px; font-weight:600; letter-spacing:.01em; }
.bubble .bub-sep { width:1px; height:20px; background:rgba(255,255,255,.22); margin:0 3px; }

/* ── task focus (open) view ──────────────────────────── */
.task-focus { display:flex; align-items:flex-start; gap:14px; margin-bottom:6px; }
/* Contact header: name grows, the Email button sits right beside it. */
/* Contact header: avatar + name + a subline of life-area links + quick actions,
   on a soft wash of the contact's life-area colour so the card has a face. */
.cc-focus { display:flex; align-items:flex-start; gap:18px; flex-wrap:nowrap; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow); }
.cc-focus.has-area { background:linear-gradient(135deg,hsl(var(--h,220) 60% 52% / .12),hsl(var(--h,220) 60% 52% / .03) 60%,var(--card)); border-color:hsl(var(--h,220) 50% 55% / .3); }
.cc-focus .contact-av.big { flex:none; }
.contact-av.has-area { background:linear-gradient(140deg,hsl(var(--h,220) 62% 62%),hsl(var(--h,220) 58% 48%)); }
.cc-headmain { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.cc-name { margin:0; padding:0; }
.cc-sub { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.cc-area-chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:hsl(var(--h,220) 42% 42%); background:hsl(var(--h,220) 60% 52% / .12); border:1px solid hsl(var(--h,220) 55% 52% / .28); border-radius:999px; padding:4px 11px; cursor:pointer; transition:background .12s; }
.cc-area-chip:hover { background:hsl(var(--h,220) 60% 52% / .2); }
.cc-area-chip .cd { width:7px; height:7px; border-radius:50%; background:hsl(var(--h,220) 60% 52%); flex:none; }
.cc-kit-chip { font-size:12.5px; font-weight:600; color:var(--ink-3); }
/* Quick actions: a tidy row of pill buttons - Email, Call, Message, Map, Invite. */
.cc-quick { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.cc-qbtn { display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.cc-qbtn:hover { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.cc-qic { font-size:15px; line-height:1; }
.cc-qbtn-invite { color:var(--ink-3); }
.cc-qbtn-wa:hover { border-color:#25d366; color:#128c3e; background:color-mix(in srgb,#25d366 10%,var(--card)); }
@media (max-width:560px){ .cc-focus { padding:16px; gap:13px; } .cc-focus .contact-av.big { width:52px; height:52px; font-size:21px; } }
/* Tidy the card into labelled sections. */
.cc-sec { margin-top:22px; }
/* Native clear "X" on every search box (they're marked type=search in JS). */
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance:none; appearance:none; height:15px; width:15px; margin-left:8px; cursor:pointer;
  background-color:var(--ink-3); opacity:.6; transition:opacity .12s, background-color .12s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type=search]::-webkit-search-cancel-button:hover { opacity:1; background-color:var(--accent); }
.cc-sec-h { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; color:var(--ink); margin-bottom:10px; }
/* Details Edit / Done: a small rounded, minimal button (Done reads as the save). */
.cc-edit-btn { font-family:var(--sans,inherit); font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:4px 12px; cursor:pointer; margin-left:9px; vertical-align:2px; transition:border-color .12s, color .12s, background .12s; }
.cc-edit-btn:hover { border-color:var(--accent); color:var(--accent); }
.cc-edit-btn.cc-details-done { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.cc-edit-btn.cc-details-done:hover { filter:brightness(1.05); color:var(--accent-ink); }
.cc-sec .tf-meta { margin-top:0; }
.cc-connected { margin-top:22px; }
.cc-conn-empty { font-size:13.5px; color:var(--ink-3); margin:4px 0 10px; }
.cc-conn-add { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
/* Notes / Tasks / Links as three equal boxes in a row. Each is a self-contained
   card: a quiet header, its chips, and an add control pinned to the foot so the
   three line up however many items each holds. */
/* Small grouping sub-heading above the Connect boxes and the Notes section. */
.cc-group-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); margin:26px 0 2px; }
.cc-group-h + .cc-boxes { margin-top:10px; }
.cc-boxes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; align-items:stretch; }
.cc-group-h + .focus-notes { margin-top:8px; }
.cc-box { display:flex; flex-direction:column; gap:10px; padding:15px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); }
.cc-box-h { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; color:var(--ink); }
.cc-box-body { flex:1; display:flex; flex-direction:column; gap:6px; }
.cc-box-empty { margin:0; font-size:13px; color:var(--ink-3); }
.cc-box .ce-card { background:var(--paper-2); }
.cc-box-search { width:100%; max-width:none; margin:2px 0 0; font-size:13.5px; }
.cc-box .nt-results { margin-top:2px; }
.cc-box-add { align-self:flex-start; margin-top:2px; background:none; border:1px dashed var(--line-2); border-radius:9px; padding:7px 12px; color:var(--ink-2); font-size:13.5px; font-weight:600; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.cc-box-add:hover { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); }
@media (max-width:760px){ .cc-boxes { grid-template-columns:1fr; } }
/* Christmas list controls on the contact card. */
.cc-xmas { margin-top:22px; }
.cc-xmas-present { display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--ink); cursor:pointer; margin:4px 0 12px; }
.cc-xmas-ideas { margin-top:2px; }
.tf-check { flex:none; width:30px; height:30px; margin-top:6px; border:2px solid var(--line-2); border-radius:9px; color:transparent; display:grid; place-items:center; font-size:16px; transition:.15s; }
.tf-check:hover { border-color:var(--accent); }
.tf-check.done { background:var(--done); border-color:var(--done); color:#fff; }
.note-title.struck { text-decoration:line-through; color:var(--ink-3); }
.tf-meta { display:flex; flex-wrap:wrap; gap:26px; padding:18px 0 6px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.tf-field { display:flex; flex-direction:column; gap:6px; }
.tf-label { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:600; }
/* A read-only "By when" the horizon fills in for you (quarter/year goals). */
.gc-target-auto { display:inline-flex; align-items:center; gap:8px; padding:11px 13px; font-size:15px; color:var(--ink); background:color-mix(in srgb,var(--accent) 7%,var(--paper)); border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line-2)); border-radius:12px; }
.gc-target-hint { font-size:12px; color:var(--ink-3); margin-top:4px; }
.gc-deadline { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.gc-deadline-l { font-size:13px; font-weight:600; color:var(--ink-2); }
.gc-target-auto::before { content:'🗓'; font-size:14px; opacity:.8; }
/* Multi-value contact fields: several emails / phones, one row each, add & drop. */
.cc-multi { display:flex; flex-direction:column; gap:6px; }
.cc-multi-row { display:flex; align-items:center; gap:6px; }
.cc-multi-row .cc-email-in, .cc-multi-row .cc-phone-num { flex:1 1 auto; min-width:0; }
.cc-phone-cc { flex:0 0 104px; width:104px; text-align:center; }
/* Settings phone: same dial-code picker + number as a contact card. */
.acct-phone { display:flex; align-items:center; gap:6px; }
.acct-phone .acct-phone-cc { flex:0 0 104px; width:104px; text-align:center; }
.acct-phone .acct-phone-num { flex:1 1 auto; min-width:0; }
/* Add-contact phone: country code + number side by side. */
.ctf-phone { display:flex; align-items:center; gap:6px; }
.ctf-phone .ctf-phone-cc { flex:0 0 78px; width:78px; text-align:center; max-width:78px; }
.ctf-phone .ctf-phone-num { flex:1 1 auto; min-width:0; max-width:none; }
.cc-multi-x { flex:0 0 auto; width:30px; height:30px; border:none; background:none; color:var(--ink-3); font-size:20px; line-height:1; cursor:pointer; border-radius:8px; }
.cc-multi-x:hover { background:var(--surface-2); color:var(--danger,#c4412e); }
.cc-multi-add { align-self:flex-start; border:none; background:none; color:var(--accent); font-size:13.5px; font-weight:600; cursor:pointer; padding:2px 0; }
.cc-multi-add:hover { text-decoration:underline; }
/* All four address inputs on one line (Street widest); they reflow to a tidy
   grid only when the card is too narrow to hold them. */
.cc-addr { flex-basis:100%; }
.cc-addr-row { display:flex; flex-wrap:wrap; gap:8px; }
.cc-addr-row input { flex:1 1 130px; min-width:0; }
.cc-addr-row .cc-addr-street { flex:2 1 200px; }
/* Several addresses, each with an optional nickname (Work, Yorkshire, Combloux). */
.cc-adr-multi { gap:12px; }
.cc-adr-row { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; background:var(--card); }
.cc-adr-head { display:flex; align-items:center; gap:6px; }
.cc-adr-label { flex:1 1 auto; min-width:0; font-weight:600; }
.cc-adr-row .cc-addr-row .cc-adr-f { flex:1 1 130px; min-width:0; }
.cc-adr-row .cc-addr-row .cc-adr-street { flex:2 1 200px; }
.cc-adr-tag { font-weight:700; color:var(--ink-2); }
.cc-adr-more { color:var(--ink-3); font-size:12px; }
/* A saved address shown as a tidy block: nickname, then each line on its own. */
.cc-adr-views { display:flex; flex-direction:column; gap:10px; }
.cc-adr-view { padding:11px 14px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; background:var(--card); }
.cc-adr-view-label { font-weight:700; color:var(--ink); font-size:14px; margin-bottom:3px; }
.cc-adr-view-lines { display:flex; flex-direction:column; gap:1px; font-size:15px; color:var(--ink-2); line-height:1.45; }
.cc-adr-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cc-adr-link { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink-2); font-size:13.5px; font-weight:600; text-decoration:none; transition:border-color .12s, color .12s, background .12s; }
.cc-adr-link:hover { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.cc-adr-done { color:var(--accent); font-weight:600; }
.cc-details-foot { display:flex; margin-top:6px; }
.cc-details-foot .add-btn { flex:1 1 auto; }
/* Details shown as read-only facts: a clean list of icon + value rows; email and
   phone are tappable links, the address carries its own Maps buttons. */
.cc-facts { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.cc-fact { display:flex; align-items:flex-start; gap:11px; padding:9px 4px; border-bottom:1px solid var(--line); color:var(--ink); font-size:16px; text-decoration:none; }
.cc-fact:last-child { border-bottom:0; }
a.cc-fact:hover { color:var(--accent); }
a.cc-fact:hover .cc-fact-v { text-decoration:underline; text-underline-offset:2px; }
.cc-fact-ic { flex:none; width:20px; text-align:center; color:var(--ink-3); font-size:15px; line-height:1.5; }
.cc-fact-v { min-width:0; word-break:break-word; flex:0 1 auto; }
.cc-fact-link { color:inherit; text-decoration:none; }
.cc-fact-link:hover { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
/* Copy sits quietly to the right of each detail; tap to copy the raw value. */
.cc-copy { margin-left:6px; flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:1px solid var(--line); background:var(--paper-2); color:var(--ink-3); cursor:pointer; border-radius:7px; opacity:.9; transition:opacity .12s, color .12s, background .12s, border-color .12s; }
.cc-copy:hover { opacity:1; color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.cc-copy:active { transform:scale(.92); }
/* The address reads as a contained card, not a full-width band. (Robin.) */
.cc-fact-addr { align-items:flex-start; max-width:52%; }
.cc-fact-addr .cc-fact-v { flex:1; }
@media (max-width:620px){ .cc-fact-addr { max-width:none; } }
.cc-fact-addr .cc-adr-views { margin-top:-2px; }
.focus-notes { margin-top:18px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:6px 16px 16px; }
/* Task card: Goals, Contacts, Links and Notes tile two-up on two rows. Each
   is already a card, so drop its own top margin and let the grid gap space them. */
.task-boxes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; margin-top:18px; }
/* Boxes start the same size (a shared min-height) and then grow independently
   with their content - align-items:start lets each keep its own height. */
.task-boxes > .focus-notes, .task-boxes > .xlinks { margin-top:0; min-height:168px; box-sizing:border-box; }
@media (max-width:720px) { .task-boxes { grid-template-columns:minmax(0,1fr); gap:14px; } }
.fn-h { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; color:var(--ink); padding:12px 0 8px; margin:0; }
.focus-notes .prose { min-height:96px; }
/* A task made from an email shows the email in its own section. */
.tf-email-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); margin:2px 0 10px; }
.tfem-dot { color:var(--line-2); }
.tf-email-body { min-height:0; font-size:15px; color:var(--ink-2); line-height:1.55; border-left:3px solid color-mix(in srgb,var(--accent) 30%,var(--line)); padding:2px 0 2px 14px; }
.tf-email-body p { margin:0 0 10px; }
.tf-email-body p:last-child { margin-bottom:0; }

/* ── external links on a block (notes, tasks, contacts, areas, goals) ── */
.xlinks { margin-top:18px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); padding:14px 16px 16px; }
.note-side .xlinks { margin-top:16px; }
.xlinks-h { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; color:var(--ink); margin:0 0 10px; }
.xl-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.xl-chip { display:inline-flex; align-items:center; max-width:100%; border:1px solid var(--line-2); border-radius:999px; background:var(--paper-2); overflow:hidden; transition:border-color .12s; }
.xl-chip:hover { border-color:var(--accent); }
.xl-link { display:inline-flex; align-items:center; gap:6px; min-width:0; padding:7px 4px 7px 12px; text-decoration:none; color:var(--ink-2); font-size:14px; }
.xl-link:hover { color:var(--accent); }
.xl-ic { flex:none; font-size:12px; }
.xl-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.xl-x { flex:none; background:none; border:0; padding:6px 10px 6px 6px; color:var(--ink-3); font-size:15px; line-height:1; cursor:pointer; }
.xl-x:hover { color:var(--danger,#c0392b); }
.xl-add { background:none; border:1px dashed var(--line-2); border-radius:10px; padding:8px 14px; color:var(--ink-2); font-size:14px; font-weight:600; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.xl-add:hover { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); }

/* ── inline-editable task cells ──────────────────────── */
.tc-prio, .tc-area { cursor:pointer; }
.ie { display:inline-flex; align-items:center; min-height:26px; border-radius:6px; }
.ie-add { color:var(--ink-3); font-size:16px; opacity:0; padding:0 8px; transition:opacity .12s; }
.tr-task:hover .ie-add { opacity:.7; }
.ie-add:hover { color:var(--accent); }
/* Tasks with no life area get a proper, always-visible +Area button that opens
   the picker in one click. */
.ie-add.ie-add-area { opacity:1; display:inline-flex; align-items:center; padding:3px 10px; border:1px dashed var(--line-2); border-radius:8px; font-size:12.5px; color:var(--ink-3); cursor:pointer; }
.ie-add.ie-add-area:hover { border-color:var(--accent); color:var(--accent); }
.tasks-scroll .ie-add.ie-add-area { display:inline-flex; }
.ie-sel { font:inherit; font-size:15px; border:1px solid var(--accent); border-radius:6px; padding:3px 6px; background:var(--card); color:var(--ink); }
.row-open-btn { flex:none; color:var(--ink-3); font-size:16px; padding:0 5px; opacity:0; transition:opacity .12s,color .12s; }
.tr-task:hover .row-open-btn { opacity:1; } .row-open-btn:hover { color:var(--accent); }

/* ── area card with favourite star ───────────────────── */
.area-card { justify-content:space-between; padding-right:10px; }
.ac-open { display:flex; align-items:center; gap:11px; flex:1; min-width:0; text-align:left; color:inherit; font-size:17px; }
.area-card .star, .area-hero .star { position:static; opacity:0; }
.area-card:hover .star, .area-card .star.on, .area-hero .star, .area-hero .star.on { opacity:1; }
.area-hero-top { display:flex; align-items:center; gap:4px; }
/* The area's own controls live on the title row, not jammed into the breadcrumbs. */
.area-h1-tools { flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:8px; }

/* ── calendar ────────────────────────────────────────── */
.cal-head { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; margin-bottom:18px; flex-wrap:wrap; }
.cal-head h1 { font-size:clamp(26px,4vw,38px); }
.cal-head-l { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; min-width:0; }
/* Time + "next …" sit on one line now, the next-event text a touch bigger and in
   the accent so it reads at a glance. Wraps on a narrow screen. (Robin, 2026-10-13.) */
.cal-now { font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; color:var(--ink-3); font-variant-numeric:tabular-nums; display:inline-flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.cal-now b { font-weight:600; color:var(--ink-2); line-height:1.05; }
.cal-now-next { font-family:'IM Fell English SC',Georgia,serif; font-size:17px; letter-spacing:.04em; color:var(--accent); }
.cal-yr { color:var(--ink-3); font-weight:400; }
.cal-nav { display:flex; gap:8px; flex-wrap:wrap; }
/* Calendar follows the universal rule: the breadcrumb is the pinned anchor under
   the tabs (via the shared .crumbbar rule), never floating free; the cal-head
   (title + Day/Month) scrolls with the page, like every other page's header.
   (Robin: the breadcrumb must never move - it's the anchor.) */
@media (max-width:820px){
  /* The week title + mode/nav buttons scroll away with the page; only the day
     agenda header (the day + "+ Event") pins, just under the breadcrumb, so the
     current day and the add button stay to hand while everything else scrolls.
     (Robin.) */
  .cal-head { position:static; margin:0 0 12px; padding:0; background:none; backdrop-filter:none; border-bottom:0; }
  /* Today's date is the hero on mobile - the week/month range title is dropped so
     it doesn't upstage it. (Robin.) */
  .cal-head h1 { display:none; }
  .cal-nav { width:100%; }
  /* Mobile calendar keeps just the essentials: hide the settings gear, Discover and
     the "show earlier days" button to reduce clutter. (Robin, 2026-10-15.) */
  .cal-nav [data-open-feeds], .cal-nav .cal-discbtn, .cal-loadmore.cal-loadmore-up { display:none; }
  .cal-agenda-top { margin-top:2px; }
  /* On mobile this header scrolls with the day - no need to pin it (sticky is a
     desktop nicety). (Robin.) */
  /* Today's date stands alone (the + Event button now lives in the toolbar row). */
  .cal-ag-head { position:static; margin:0 0 12px; padding:0; background:none; backdrop-filter:none; border-bottom:0; }
  .cal-ag-head h2 { font-size:23px; white-space:normal; }
  .cal-ag-when { width:100%; }
}
/* Recurrence marker on a calendar event - tells a repeating event from a one-off. */
.cal-recur { color:var(--accent); font-size:.85em; margin-left:6px; opacity:.8; }
.cal-btn { padding:9px 15px; border-radius:11px; border:1px solid var(--line-2); color:var(--ink-2); font-size:15px; background:var(--card); box-shadow:var(--shadow); transition:border-color .15s,color .15s; }
.cal-nav-add { background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600; }
.cal-nav-add:hover { filter:brightness(1.05); border-color:transparent; }
/* Rolling agenda: today, then each day forward - one uniform style per day. */
.cal-roll { display:flex; flex-direction:column; }
.roll-day { padding:2px 0; border-top:1px solid var(--line); }
.roll-day:first-child { border-top:0; }
.roll-day-h { display:flex; align-items:baseline; gap:8px; padding:10px 2px; cursor:pointer; }
.roll-day-date { font-family:'Cormorant Garamond',Georgia,serif; font-size:20px; font-weight:600; color:var(--ink); }
.roll-day-yr { font-size:13px; color:var(--ink-3); }
.roll-add { margin-left:auto; align-self:center; color:var(--ink-3); font-size:19px; line-height:1; opacity:0; transition:opacity .12s, color .12s; }
/* The add-on-this-day + reveals when you hover anywhere on the day card, not just
   its header line, so every row offers it as you run down the list. (Robin.) */
.roll-day:hover .roll-add, .roll-day-h:hover .roll-add, .roll-day:focus-within .roll-add { opacity:.75; }
.roll-day-h:hover .roll-add { opacity:1; color:var(--accent); }
@media (hover:none){ .roll-add { opacity:.45; } }
/* Empty days stay slim so the scroll flows day to day without dead space. */
.roll-empty-day .roll-day-h { padding:6px 2px; }
.roll-empty-day .roll-day-date { font-weight:500; font-size:16px; color:var(--ink-3); }
.roll-evs { display:flex; flex-direction:column; gap:8px; padding:0 0 8px; }
.cal-loadmore { margin:18px auto 6px; display:block; padding:11px 20px; border-radius:11px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); font-size:15px; box-shadow:var(--shadow); }
.cal-loadmore:hover { border-color:var(--accent); color:var(--accent); }
.cal-loadmore-up { margin:2px auto 14px; }
/* Today stands out in the rolling day list; past days sit a touch quieter so the
   eye lands on now, while still being perfectly readable when you scroll back. */
.roll-day.roll-today { border-top:0; }
.roll-day.roll-today .roll-day-date { color:var(--accent); }
.roll-day.roll-today .roll-day-h { position:relative; }
.roll-day.roll-today .roll-day-h::before { content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:4px; height:20px; border-radius:2px; background:var(--accent); }
.roll-day.roll-past .roll-day-date { color:var(--ink-2); }
.roll-day.roll-past .roll-evs { opacity:.9; }
.cal-planbtn { border-color:color-mix(in srgb,var(--accent) 42%,var(--line-2)); color:var(--accent); font-weight:600; }
.cal-planbtn:hover { background:color-mix(in srgb,var(--accent) 8%,var(--card)); border-color:var(--accent); }
.cal-btn:hover { border-color:var(--accent); color:var(--accent); }
.cal-btn.ic { width:42px; padding:9px 0; font-size:20px; line-height:1; }
.cal-warn { margin-bottom:12px; color:var(--accent); font-size:14.5px; }
/* Member Google-calendar connect strip. */
.gcal-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding:12px 15px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow-sm); }
.gcal-bar .gcal-t { flex:1; min-width:180px; font-size:14.5px; color:var(--ink-2); }
.gcal-bar.connected { border-color:color-mix(in srgb,#3a9d5d 40%,var(--line)); }
.gcal-dot { width:9px; height:9px; border-radius:50%; background:#3a9d5d; flex:none; }
.gcal-x { font-size:13px; color:var(--ink-3); } .gcal-x:hover { color:var(--accent); }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.cal-dow { background:var(--paper-2); color:var(--ink-3); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; text-align:center; padding:9px 0; }
.cal-cell { background:var(--card); min-height:104px; padding:6px 6px 8px; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:background .12s; overflow:hidden; }
.cal-cell:hover { background:var(--paper-2); }
.cal-cell.dim { background:color-mix(in srgb,var(--card) 55%,var(--paper)); }
.cal-cell.dim .cal-daynum { color:var(--ink-3); }
.cal-cell.csel { box-shadow:inset 0 0 0 2px var(--accent); }
/* Round the grid's corner cells so the selected ring follows the rounded corner
   instead of the parent's overflow:hidden clipping its square corner. */
.cal-grid > .cal-cell:first-child { border-top-left-radius:13px; }
.cal-grid > .cal-cell:nth-child(7) { border-top-right-radius:13px; }
.cal-grid > .cal-cell:nth-last-child(7) { border-bottom-left-radius:13px; }
.cal-grid > .cal-cell:last-child { border-bottom-right-radius:13px; }
.cal-daynum { font-size:14px; font-variant-numeric:tabular-nums; color:var(--ink-2); text-align:right; padding:0 2px; }
/* Per-day quick add: a + in the cell that opens the event form for that day.
   Hidden until you hover the cell on desktop; always visible on touch. */
.cal-cell-top { display:flex; align-items:center; gap:4px; }
.cal-cell-top .cal-daynum { margin-left:auto; }
.cal-add-day { flex:none; width:20px; height:20px; border-radius:6px; border:0; background:none; color:var(--ink-3); font-size:15px; line-height:1; cursor:pointer; padding:0; opacity:0; transition:opacity .12s, background .12s, color .12s; }
.cal-cell:hover .cal-add-day, .cw-day:hover .cal-add-day { opacity:.55; }
.cal-add-day:hover { opacity:1; background:var(--accent); color:var(--accent-ink); }
.cw-head .cw-add { margin-left:auto; }
@media (hover:none){ .cal-add-day { opacity:.5; } }
.cal-cell.today .cal-daynum { color:var(--accent-ink); background:var(--accent); width:26px; height:26px; margin-left:auto; border-radius:50%; display:grid; place-items:center; font-weight:600; }
.cal-evs { display:flex; flex-direction:column; gap:3px; min-width:0; }
.cal-chip { font-size:12px; line-height:1.3; padding:2px 6px; border-radius:6px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-chip b { font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.cal-chip.allday { background:var(--accent); color:var(--accent-ink); }
.cal-chip.allday b { color:var(--accent-ink); }
/* Feed events (holidays, fixtures): dashed + muted, read-only. */
.cal-chip.feed, .cw-ev.feed { background:transparent; border:1px dashed var(--line-2); color:var(--ink-2); }
.cal-chip.feed.allday { background:color-mix(in srgb,var(--ink-3) 10%,transparent); color:var(--ink-2); }
.cal-more { font-size:11.5px; color:var(--ink-3); padding:0 4px; }
.cal-agenda { margin-top:26px; }
.cal-agenda-top { margin-top:6px; margin-bottom:22px; }
.cal-ag-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.cal-ag-head h2 { font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:500; }
.cal-ag-when { min-width:0; }
.cal-ag-when h2 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ag-lead { color:var(--accent); font-weight:600; }
.cal-ag-yr { color:var(--ink-3); font-weight:400; }
.cal-ag-add { flex:none; }
.cal-ag-eyebrow { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--accent); margin-bottom:1px; }
.cal-ag-list { display:flex; flex-direction:column; }
/* The day panel's empty state needs room, not a cramped line jammed under the
   date. (Robin: padding on the "nothing on this day" message.) */
.cal-ag-list .home-empty { padding:26px 16px; text-align:center; }
.cal-ag-row { display:flex; align-items:baseline; gap:16px; width:100%; text-align:left; padding:13px 8px; border-bottom:1px solid var(--line); transition:background .12s; cursor:pointer; }
.cal-ag-row:hover { background:var(--paper-2); }
/* A touch of colour in the Day list: the event's life-area as a left stripe, the
   time in the accent, and an all-day event tinted so it reads as a banner. */
.cal-ag-row.has-area { border-left:3px solid hsl(var(--h,4) 60% 52%); border-radius:0 9px 9px 0; padding-left:12px; }
.cal-ag-row.allday { background:color-mix(in srgb,var(--accent) 6%,transparent); }
.cal-ag-area { display:inline-flex; align-items:center; gap:5px; margin-left:9px; font-size:13.5px; color:var(--ink-3); }
.cal-ag-adot { width:8px; height:8px; border-radius:50%; background:hsl(var(--h,4) 55% 55%); }
.cal-ag-time { flex:none; width:112px; color:var(--accent); font-weight:500; font-size:15px; font-variant-numeric:tabular-nums; }
.cal-ag-t { flex:1; color:var(--ink); font-size:17px; }
.cal-ag-loc { color:var(--ink-3); font-size:14.5px; }
.cal-ag-join { margin-left:7px; font-size:13px; vertical-align:baseline; }
.cal-ag-row .ev-join-btn { align-self:center; margin-left:auto; }
/* "· with Ines" - the person an event is with. */
.ev-with { color:var(--ink-3); font-weight:400; margin-left:6px; }
/* A one-tap link on an event (the class, the call, the page) - a clear button,
   right where the event sits on Home and in the calendar. */
.ev-join-btn { flex:none; display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:999px; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line-2)); background:color-mix(in srgb,var(--accent) 10%,var(--card)); color:var(--accent); font-size:13.5px; font-weight:650; text-decoration:none; white-space:nowrap; }
.ev-join-btn:hover { background:color-mix(in srgb,var(--accent) 18%,var(--card)); border-color:var(--accent); }
.ev-row .ev-join-btn { grid-column:2; justify-self:start; margin-top:6px; }
/* Mobile agenda row: the fixed 112px time + the "Open" link squeezed the event
   title. Give the title priority on line one (next to a slimmer time) and drop
   the location and the link to their own full-width lines. */
@media (max-width:640px){
  .cal-ag-row { flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:12px 6px; }
  .cal-ag-time { width:auto; flex:0 0 auto; font-size:14px; }
  .cal-ag-t { flex:1 1 60px; min-width:0; font-size:16px; }
  .cal-ag-loc { flex:1 1 100%; font-size:14px; }
  .cal-ag-row .ev-join-btn { flex:0 0 100%; margin:7px 0 0; justify-content:center; padding:9px 12px; font-size:14px; }
}
/* Join-the-meeting link on an event's detail form. */
.ce-join { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:9px 15px; border-radius:11px; background:var(--accent); color:var(--accent-ink); font-size:15px; font-weight:600; text-decoration:none; box-shadow:var(--shadow); }
.ce-join:hover { filter:brightness(1.05); }
.cal-del { color:var(--ink-3); } .cal-del:hover { color:var(--accent); }
.ce-notes { width:100%; margin:0; resize:vertical; min-height:44px; line-height:1.5; font-family:inherit; }
.ce-notelinks { display:flex; flex-wrap:wrap; gap:8px; margin:-2px 0 2px; }
.ce-notelinks a { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:6px 11px; border-radius:10px; background:var(--card-2,var(--card)); border:1px solid var(--line); color:var(--accent); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ce-notelinks a:hover { border-color:var(--accent); }
#cal-form:not(:empty) { margin-bottom:14px; }
/* Month / Week toggle */
.cal-modes { display:inline-flex; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; }
.cal-mode { padding:8px 14px; font-size:14.5px; color:var(--ink-2); background:var(--card); }
.cal-mode.on { background:var(--accent); color:var(--accent-ink); }
/* Week view: seven day columns */
/* "Upcoming" eyebrow above the week strip, matching the "Today" label above the day. */
.cal-upcoming-h { margin:18px 0 10px; }
.cal-week { display:grid; grid-template-columns:repeat(var(--cwn,7),minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.cw-day { background:var(--card); min-height:230px; padding:8px 8px 12px; cursor:pointer; display:flex; flex-direction:column; gap:7px; transition:background .12s; }
.cw-day:hover { background:var(--paper-2); }
.cw-day.csel { box-shadow:inset 0 0 0 2px var(--accent); }
.cal-week > .cw-day:first-child { border-radius:13px 0 0 13px; }
.cal-week > .cw-day:last-child { border-radius:0 13px 13px 0; }
.cw-head { display:flex; align-items:center; gap:6px; }
.cw-dow { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; }
.cw-num { font-size:16px; color:var(--ink-2); font-variant-numeric:tabular-nums; margin-left:auto; }
.cw-day.today .cw-num { color:var(--accent-ink); background:var(--accent); min-width:26px; height:26px; padding:0 6px; border-radius:999px; display:inline-grid; place-items:center; font-weight:600; margin-left:auto; }
.cw-evs { display:flex; flex-direction:column; gap:4px; }
.cw-ev { text-align:left; font-size:13px; line-height:1.35; padding:5px 8px; border-radius:7px; background:color-mix(in srgb,var(--accent) 13%,transparent); color:var(--ink); overflow:hidden; }
.cw-ev b { color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
.cw-ev.allday { background:var(--accent); color:var(--accent-ink); } .cw-ev.allday b { color:var(--accent-ink); }
.cal-dots { display:none; }
@media (max-width:640px){
  .cal-cell { min-height:62px; }
  .cal-evs, .cal-more { display:none; }            /* month on mobile: dots, tap a day for its agenda */
  .cal-dots { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; padding-top:3px; }
  .cal-dot { width:6px; height:6px; border-radius:50%; background:hsl(268 40% 55%); }
  .cal-dot.allday { background:var(--accent); }
  .cal-week { grid-template-columns:1fr; }          /* week on mobile: stacked day rows */
  .cw-day { min-height:0; flex-direction:row; align-items:flex-start; gap:14px; padding:12px 14px; }
  .cw-head { flex:none; width:56px; flex-direction:column; align-items:flex-start; gap:0; }
  .cw-num { margin-left:0; } .cw-day.today .cw-num { margin-left:0; }
  .cw-evs { flex:1; min-width:0; }
}

/* Mobile: drop the Added column and tighten, so the tasks table fits the
   screen without sideways scrolling and titles stop wrapping to three lines. */
@media (max-width:620px){
  table.ttable td, table.ttable th { padding:11px 7px; }
  /* Drop Added + Area so titles get room; area stays reachable via the filter
     chips above (the tick box border already carries the area colour). */
  .tc-date, th.tc-date, .tc-area, th.tc-area { display:none; }
  .ttable .tag { font-size:12px; padding:2px 8px; }
  .tc-act { width:52px; }
  .cal-head h1 { font-size:30px; }
  /* Table header wraps so the star + Delete never spill off the right edge. */
  .tbl-head { flex-wrap:wrap; gap:10px; }
  .tbl-head input.rename { flex-basis:100%; min-width:0; font-size:26px; }
  .tbl-head .area-sel { margin-left:0; }
}
/* ── Keep in touch ────────────────────────────────────
   The cadence block on a contact card, and the "who you owe a call" list on
   Home. Both lean on existing tokens so they inherit the accent. */
.cc-kit { border-top:1px solid var(--line); padding-top:16px; margin-top:4px; }
.kit-tick { display:flex; align-items:center; gap:10px; cursor:pointer; }
.kit-tick input { width:19px; height:19px; accent-color:var(--accent); flex:none; cursor:pointer; }
.kit-tick-l { margin:0; cursor:pointer; }
.kit-hint { margin:7px 0 0 29px; font-size:14px; line-height:1.5; color:var(--ink-3); max-width:56ch; }
.kit-body { margin:14px 0 0 29px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
/* Each line groups controls that belong together (How often + custom cadence;
   Last-in-touch + next nudge + the "Got in touch" button) so they sit side by
   side on desktop and wrap to stacked rows on a narrow screen. */
.kit-line { display:flex; align-items:center; gap:12px 20px; flex-wrap:wrap; width:100%; }
.kit-row { display:flex; align-items:center; gap:12px; }
.kit-row .tf-label { margin:0; }
.kit-every { max-width:220px; }
.kit-custom { display:flex; align-items:center; gap:9px; font-size:15px; color:var(--ink-2); }
.kit-n { width:82px; max-width:82px; text-align:center; }
.kit-unit { max-width:130px; }
.kit-row .date-field { max-width:220px; }
.kit-ago { font-size:14px; color:var(--ink-3); white-space:nowrap; }
.kit-next { font-size:15.5px; color:var(--ink-2); }
.kit-next b { color:var(--ink); font-weight:600; }
.kit-due, .kit-next b.kit-due { color:var(--accent); }
.kit-touched { align-self:flex-start; }

/* Home: the people you're overdue with. */
.kit-hlist { display:flex; flex-direction:column; gap:2px; }
.kit-hrow { display:flex; align-items:center; gap:6px; border-radius:11px; }
.kit-hrow:hover { background:var(--paper-2); }
.kit-hopen { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:9px 10px; text-align:left; }
.kit-hav { flex:none; }
.kit-hnm { font-size:16.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kit-hsub { margin-left:auto; padding-left:12px; flex:none; font-size:13.5px; color:var(--ink-3); }
.kit-hdone { flex:none; width:38px; height:38px; margin-right:6px; border-radius:50%; font-size:16px;
  color:var(--ink-3); border:1px solid var(--line); background:var(--card); }
.kit-hdone:hover { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.kit-hsnooze { flex:none; width:30px; height:30px; margin-right:8px; border-radius:50%; font-size:17px; line-height:1; color:var(--ink-3); border:1px solid transparent; background:none; cursor:pointer; }
.kit-hsnooze:hover { color:var(--ink); background:var(--paper-2); border-color:var(--line); }
@media (max-width:560px){
  .kit-hsub { margin-left:0; padding-left:0; flex-basis:100%; }
  .kit-hopen { flex-wrap:wrap; }
  .kit-body, .kit-hint { margin-left:0; }
}

/* ── "Add from a flyer" overlay — a little moment of magic ──────────────── */
/* A quiet icon in the header - it's an occasional, edge tool (also in + New). */
.cal-flyerbtn { color:var(--accent); }
.cal-flyerbtn:hover { color:var(--accent); border-color:var(--accent); }
.fly-bg { position:fixed; inset:0; z-index:240; background:color-mix(in srgb,var(--ink) 46%,transparent); backdrop-filter:blur(6px); animation:fly-fade .18s ease; }
.fly-card { position:fixed; z-index:241; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px, calc(100vw - 32px)); max-height:min(92vh, 860px); overflow-y:auto; overflow-x:hidden; background:var(--paper); border:1px solid var(--line); border-radius:22px; box-shadow:0 40px 120px -30px rgba(0,0,0,.6); padding:26px 26px 30px; animation:fly-pop .24s cubic-bezier(.2,.9,.3,1.3); }
.fly-x { position:absolute; top:14px; right:16px; border:0; background:none; font-size:26px; line-height:1; color:var(--ink-3); cursor:pointer; padding:4px; border-radius:8px; }
.fly-x:hover { color:var(--ink); background:var(--paper-2); }
.fly-head { text-align:center; margin:2px 0 20px; }
.fly-spark { font-size:30px; display:inline-block; animation:fly-twinkle 2.4s ease-in-out infinite; }
.fly-head h2 { font-family:'Cormorant Garamond',Georgia,serif; font-size:30px; font-weight:600; margin:6px 0 4px; color:var(--ink); }
.fly-sub { font-size:14.5px; line-height:1.5; color:var(--muted); max-width:42ch; margin:0 auto; }
.fly-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; position:relative; min-height:168px; padding:22px; border:2px dashed color-mix(in srgb,var(--accent) 40%,var(--line-2)); border-radius:18px; background:color-mix(in srgb,var(--accent) 5%,var(--card)); cursor:pointer; text-align:center; transition:border-color .14s, background .14s, transform .14s; overflow:hidden; }
.fly-drop:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
.fly-drop.dragover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--card)); transform:scale(1.01); }
.fly-drop.has-img { padding:0; border-style:solid; border-color:var(--line); background:var(--ink); min-height:0; cursor:default; }
.fly-drop-ic { font-size:34px; }
.fly-drop-t { font-size:16px; font-weight:600; color:var(--ink); }
.fly-drop-s { font-size:13px; color:var(--muted); }
.fly-prev { display:block; width:100%; max-height:340px; object-fit:contain; background:var(--ink); }
.fly-img-x { position:absolute; top:9px; right:9px; width:30px; height:30px; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fly-img-x:hover { background:rgba(0,0,0,.85); }
/* The scan sweep while reading an image. */
.fly-scan { position:absolute; left:0; right:0; top:0; height:42%; background:linear-gradient(to bottom, color-mix(in srgb,var(--accent) 46%,transparent), transparent); box-shadow:0 0 22px 6px color-mix(in srgb,var(--accent) 30%,transparent); animation:fly-scan 1.25s ease-in-out infinite; pointer-events:none; }
.fly-or { text-align:center; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:16px 0; position:relative; }
.fly-or::before, .fly-or::after { content:""; position:absolute; top:50%; width:calc(50% - 44px); height:1px; background:var(--line); }
.fly-or::before { left:0; } .fly-or::after { right:0; }
.fly-text { width:100%; max-width:none; resize:vertical; font:inherit; font-size:15px; line-height:1.5; }
.fly-field { display:flex; align-items:center; gap:10px; margin-top:14px; font-size:14px; color:var(--ink-2); }
.fly-field span { flex:none; } .fly-field .sel { flex:1; max-width:none; margin:0; }
.fly-err { font-size:13.5px; color:var(--bad,#c0392b); margin:12px 0 0; text-align:center; }
.fly-find { display:block; width:100%; margin-top:18px; padding:15px; border:0; border-radius:14px; background:var(--accent); color:var(--accent-ink,#fff); font-size:16px; font-weight:600; cursor:pointer; transition:filter .12s, transform .12s; }
.fly-find:hover:not(:disabled) { filter:brightness(1.06); }
.fly-find:active:not(:disabled) { transform:scale(.99); }
.fly-find:disabled { opacity:.6; cursor:default; }
.fly-results { margin-top:20px; }
.fly-results-h { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:11px; }
.fly-evrows { display:flex; flex-direction:column; gap:8px; }
.fly-evrow { display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:var(--card); cursor:pointer; transition:border-color .12s, background .12s; position:relative; }
.fly-evrow.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,var(--card)); }
.fly-evrow input { position:absolute; opacity:0; pointer-events:none; }
.fly-evmain { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.fly-evt { font-size:15.5px; font-weight:600; color:var(--ink); }
.fly-evmeta { font-size:13px; color:var(--accent); font-variant-numeric:tabular-nums; }
.fly-evnotes { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.fly-evtick { flex:none; align-self:center; width:24px; height:24px; border-radius:50%; border:2px solid var(--line-2); color:transparent; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.fly-evrow.on .fly-evtick { background:var(--accent); border-color:var(--accent); color:var(--accent-ink,#fff); }
.fly-add { margin-top:16px; }
/* Done state */
.fly-done { text-align:center; padding:18px 6px 8px; }
.fly-done-emoji { font-size:52px; animation:fly-pop .4s cubic-bezier(.2,.9,.3,1.4); }
.fly-done h3 { font-family:'Cormorant Garamond',Georgia,serif; font-size:26px; font-weight:600; margin:10px 0 4px; color:var(--ink); }
.fly-done p { font-size:14.5px; color:var(--muted); margin:0 0 20px; }
.fly-done-acts { display:flex; flex-direction:column; gap:10px; align-items:center; }
.fly-done-acts .fly-find { margin-top:0; }
/* Confetti */
.fly-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:22px; }
.fly-confetti i { position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; opacity:0; animation:fly-confetti 1.7s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes fly-fade { from { opacity:0; } to { opacity:1; } }
@keyframes fly-pop { from { opacity:0; transform:translate(-50%,-50%) scale(.94); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes fly-twinkle { 0%,100% { transform:scale(1) rotate(0); opacity:1; } 50% { transform:scale(1.18) rotate(8deg); opacity:.82; } }
@keyframes fly-scan { 0% { top:-42%; } 100% { top:100%; } }
@keyframes fly-confetti { 0% { opacity:0; transform:translateY(0) translateX(0) rotate(0); } 10% { opacity:1; } 100% { opacity:0; transform:translateY(420px) translateX(var(--x,0)) rotate(var(--r,360deg)); } }
@media (max-width:560px){ .fly-card { width:calc(100vw - 20px); border-radius:18px; padding:22px 18px 26px; } .fly-done-emoji { font-size:44px; } }
@media (prefers-reduced-motion:reduce){ .fly-bg, .fly-card, .fly-spark, .fly-scan, .fly-done-emoji, .fly-confetti i { animation:none; } .fly-scan { display:none; } }

/* ── Discover: what's on near you ──────────────────────────────────────── */
.cal-discbtn { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,var(--line-2)); }
.cal-discbtn:hover { border-color:var(--accent); }
.dz-lead { font-size:15px; color:var(--muted); margin:0 0 16px; max-width:60ch; }
.dz-loc { display:flex; align-items:center; gap:10px; margin-bottom:14px; border:1px solid var(--line-2); border-radius:12px; padding:0 12px; background:var(--card); }
.dz-loc-pin { flex:none; font-size:15px; }
.dz-city { flex:1; max-width:none; border:0; background:none; margin:0; padding:12px 0; font-size:15px; }
.dz-city:focus { outline:none; }
.dz-useloc { flex:none; display:inline-flex; align-items:center; gap:6px; align-self:stretch; padding:0 10px 0 13px; border:0; border-left:1px solid var(--line); background:none; color:var(--accent); font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; transition:color .12s; }
.dz-useloc:hover { color:var(--ink); }
/* "Also browse" - links out to other listings (RA, Songkick…) for the city. */
.dz-elsewhere { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.dz-else-h { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:600; margin-bottom:11px; }
.dz-else-links { display:flex; flex-wrap:wrap; gap:9px; }
.dz-else { display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; transition:border-color .12s, color .12s; }
.dz-else:hover { border-color:var(--accent); color:var(--accent); }
.dz-filters { display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.dz-chips { display:flex; flex-wrap:wrap; gap:8px; }
.dz-chip { padding:7px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2,var(--ink)); font:inherit; font-size:14px; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
.dz-chip:hover { border-color:var(--accent); }
.dz-chip.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink,#fff); font-weight:600; }
.dz-chips-when .dz-chip { font-size:13px; }
.dz-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; }
.dz-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); transition:transform .14s, box-shadow .14s; }
.dz-card:hover { transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(0,0,0,.4); }
.dz-img { height:132px; background-size:cover; background-position:center; background-color:color-mix(in srgb,var(--accent) 12%,var(--card)); }
.dz-img-none { display:flex; align-items:center; justify-content:center; font-size:34px; opacity:.5; }
.dz-cbody { display:flex; flex-direction:column; gap:5px; padding:13px 15px 15px; flex:1; }
.dz-when { font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--accent); text-transform:uppercase; font-variant-numeric:tabular-nums; }
.dz-title { font-size:16px; font-weight:600; line-height:1.3; color:var(--ink); }
.dz-venue, .dz-price { font-size:13px; color:var(--muted); }
.dz-acts { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:10px; }
.dz-add { flex:1; padding:9px 12px; border:0; border-radius:10px; background:var(--accent); color:var(--accent-ink,#fff); font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:filter .12s; }
.dz-add:hover:not(:disabled) { filter:brightness(1.07); }
.dz-add.done { background:color-mix(in srgb,var(--good,#52c17a) 22%,var(--card)); color:var(--good,#3a9d63); cursor:default; }
.dz-link { flex:none; font-size:13px; color:var(--accent); text-decoration:none; white-space:nowrap; }
.dz-link:hover { text-decoration:underline; }
.dz-more { display:block; margin:22px auto 0; padding:11px 26px; border:1px solid var(--line-2); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.dz-more:hover { border-color:var(--accent); color:var(--accent); }
.dz-empty, .dz-loading { text-align:center; color:var(--muted); padding:48px 20px; display:flex; flex-direction:column; align-items:center; gap:14px; font-size:15px; }
.dz-empty-ic { font-size:40px; }
.dz-empty .add-btn { max-width:240px; }
.dz-spin { width:26px; height:26px; border:3px solid color-mix(in srgb,var(--accent) 30%,transparent); border-top-color:var(--accent); border-radius:50%; animation:dz-spin .7s linear infinite; }
@keyframes dz-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .dz-spin { animation:none; } .dz-card:hover { transform:none; } .src-seed:hover { transform:none; } }
/* Discover: day grouping, run line, source chips, add panel, Lisbon seeds */
.dz-daygroup { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2,var(--ink)); margin:26px 0 13px; padding-bottom:8px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.dz-daygroup:first-of-type { margin-top:6px; }
.dz-run { font-size:12.5px; color:var(--muted); }
.dz-metarow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:1px; }
.dz-metarow .dz-price { color:var(--ink-2,var(--ink)); font-weight:600; }
.dz-src { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3,var(--muted)); background:var(--paper-2); border-radius:999px; padding:2px 9px; margin-left:auto; }
.src-chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.src-chip { display:inline-flex; align-items:stretch; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; background:var(--card); transition:border-color .12s, box-shadow .12s; }
.src-chip:hover { border-color:var(--accent); }
.src-chip.on { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.src-chip-name { display:inline-flex; align-items:center; gap:8px; padding:9px 7px 9px 15px; border:0; background:none; color:var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.src-chip.on .src-chip-name { color:var(--accent); }
.src-chip-n { font-size:12px; font-weight:600; color:var(--muted); background:var(--paper-2); border-radius:999px; padding:1px 8px; font-variant-numeric:tabular-nums; }
.src-chip-x { border:0; background:none; color:var(--ink-3,var(--muted)); font-size:19px; line-height:1; padding:0 13px 0 9px; cursor:pointer; transition:color .12s; }
.src-chip-x:hover { color:var(--accent); }
.src-chip-name.src-chip-solo { padding-right:15px; }
.src-add { border:1px solid var(--line-2); border-radius:16px; background:var(--card); padding:17px; margin-bottom:24px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); }
.src-add .sel { max-width:none; width:100%; margin:0; font-size:15px; }
.src-add-acts { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.src-add-cancel { border:0; background:none; color:var(--muted); font:inherit; font-size:14px; cursor:pointer; text-decoration:underline; padding:0; }
.src-add-cancel:hover { color:var(--ink); }
.src-err { margin:0; }
.src-hint { font-size:13px; color:var(--muted); line-height:1.5; margin:0; max-width:64ch; }
.src-hint b { color:var(--ink-2,var(--ink)); font-weight:600; }
.src-seeds { display:flex; flex-direction:column; gap:10px; }
.src-seeds-h { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3,var(--muted)); }
.src-seeds-row { display:flex; flex-wrap:wrap; gap:10px; }
.src-seed { flex:1 1 180px; display:flex; flex-direction:column; gap:3px; text-align:left; padding:11px 15px; border:1px solid var(--line-2); border-radius:13px; background:var(--card); cursor:pointer; transition:border-color .12s, transform .12s; }
.src-seed:hover:not(:disabled) { border-color:var(--accent); transform:translateY(-1px); }
.src-seed:disabled { opacity:.55; cursor:default; }
.src-seed b { font-size:14px; font-weight:600; color:var(--ink); }
.src-seed span { font-size:12.5px; color:var(--muted); }
.dz-empty-lead { max-width:46ch; }
.dz-empty .src-seeds { width:100%; max-width:560px; text-align:left; }
/* Discover: the location search bar + manual paste inside the find panel */
.src-loc { display:flex; align-items:center; gap:8px; border:1px solid var(--line-2); border-radius:14px; background:var(--card); padding:5px 6px 5px 14px; }
.src-loc-pin { flex:none; font-size:16px; opacity:.7; }
.src-loc-input { flex:1; min-width:0; border:0; background:none; font:inherit; font-size:15px; color:var(--ink); padding:10px 2px; }
.src-loc-input:focus { outline:none; }
.src-loc-input::placeholder { color:var(--ink-3); }
.src-loc-btn { flex:none; border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; padding:8px 13px; border-radius:10px; cursor:pointer; transition:border-color .12s, color .12s, filter .12s; white-space:nowrap; }
.src-loc-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.src-loc-me { background:var(--accent); border-color:var(--accent); color:var(--accent-ink,#fff); }
.src-loc-me:hover:not(:disabled) { filter:brightness(1.07); color:var(--accent-ink,#fff); }
.src-loc-btn:disabled { opacity:.55; cursor:default; }
.src-loc-status { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; padding:6px 2px; }
.src-manual { display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--line); padding-top:14px; }
.src-or { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.src-manual-row { display:flex; gap:10px; align-items:center; }
.src-manual-row .src-url { flex:1; min-width:0; margin:0; max-width:none; }
.src-manual-row .add-btn.wide { flex:none; }

/* ── Life area: quiet, premium, in good taste ────────────────────────────── */
/* Restraint over wash: neutral soft depth, confident type and generous space do
   the work; the area's colour is a whisper (a dot, a faint fade, a hairline), not
   a tint on everything. --c resolves per element from --h. (Robin: good taste,
   crisper & premium.) */

/* Editorial header: a large serif title over a faint fade of the area's colour,
   closed by a hairline. No box, no glow. */
.area-hero {
  --c:hsl(var(--h,220) var(--lane-s) var(--lane-l));
  position:relative; margin:0 0 26px; padding:10px 0 24px;
  border-bottom:1px solid var(--line);
  background:radial-gradient(90% 120% at 6% -30%, color-mix(in srgb,var(--c) 14%,transparent), transparent 58%);
}
.area-hero h1 { font-size:clamp(34px,5vw,52px); font-weight:500; letter-spacing:-.015em; }
.area-hero h1 .ac-dot, .area-hero h1 .ac-dot-btn { width:13px; height:13px; box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 12%,transparent); }
.area-meta { font-size:15px; color:var(--ink-3); margin-top:9px; }

/* ── Folio masthead: a quiet magazine cover band + "Folio" kicker above the
   editorial title. A photo when one's set; otherwise a faint patterned wash of
   the folio's own colour - so every folio reads as designed. (Robin.) */
.area-hero.area-mast { position:static; margin:2px 0 22px; padding:0; border-bottom:0; background:none; }
.am-cover {
  position:relative; width:100%; height:clamp(130px,21vw,210px);
  border-radius:20px; overflow:hidden; isolation:isolate;
  background:var(--paper-2);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 26px 50px -34px rgba(0,0,0,.55);
}
/* The image sits on its own layer so it can be panned (background-position) and
   zoomed (transform:scale) independently of the scrim and buttons. (Robin.) */
.am-cover-bg { position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; background-position:center; transform-origin:center; }
.am-cover-tools { position:absolute; right:12px; bottom:12px; z-index:2; display:flex; gap:8px; }
.area-mast.no-cover .am-cover {
  height:clamp(118px,17vw,180px);
  background-image:
    radial-gradient(color-mix(in srgb,var(--c) 55%,transparent) 1px, transparent 1.9px),
    linear-gradient(125deg, color-mix(in srgb,var(--c) 82%,var(--card)) 0%, color-mix(in srgb,var(--c) 44%,var(--card)) 52%, color-mix(in srgb,var(--c) 20%,var(--card)) 100%);
  background-size:20px 20px, 100% 100%;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,var(--line)), 0 22px 46px -30px color-mix(in srgb,var(--c) 62%,transparent);
}
.am-cover-scrim { position:absolute; inset:0; pointer-events:none; }
.area-mast.has-cover .am-cover-scrim {
  background:linear-gradient(183deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.12) 78%, rgba(0,0,0,.32) 100%);
}
.am-cover-btn {
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-size:13px; font-weight:600; line-height:1;
  background:color-mix(in srgb,var(--card) 80%,transparent); color:var(--ink);
  -webkit-backdrop-filter:blur(9px) saturate(1.3); backdrop-filter:blur(9px) saturate(1.3);
  box-shadow:0 3px 12px -4px rgba(0,0,0,.5);
  opacity:0; transform:translateY(2px); transition:opacity .15s, transform .12s, border-color .12s;
}
.am-cover:hover .am-cover-btn, .am-cover-btn:focus-visible { opacity:1; transform:none; }
/* Cover adjust (reposition & zoom) dialog. */
.cover-adjust .cadj-frame { position:relative; width:100%; height:190px; border-radius:14px; overflow:hidden; background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line); margin:4px 0 2px; }
.cover-adjust .cadj-img { position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; background-position:center; transform-origin:center; cursor:grab; touch-action:none; }
.cover-adjust .cadj-img.dragging { cursor:grabbing; }
.cover-adjust .cadj-zoom-l { display:flex; align-items:center; gap:12px; margin:14px 2px 4px; }
.cover-adjust .cadj-zoom-t { font-size:13px; font-weight:600; color:var(--ink-2); flex:none; }
.cover-adjust .cadj-zoom { flex:1; accent-color:var(--c,var(--accent)); }
.am-cover-btn:hover { border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); }
.area-mast.no-cover .am-cover-btn {
  opacity:1; transform:none;
  background:color-mix(in srgb,var(--c) 12%,var(--card));
  border-color:color-mix(in srgb,var(--c) 28%,var(--line));
  color:color-mix(in srgb,var(--c) 62%,var(--ink));
}
.amc-ic { font-size:14px; }
.am-credit {
  position:absolute; left:14px; bottom:11px; z-index:2;
  font-size:11px; letter-spacing:.02em; color:rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(0,0,0,.65); text-decoration:none;
  opacity:0; transition:opacity .15s;
}
.am-cover:hover .am-credit { opacity:1; }
.am-credit:hover { text-decoration:underline; }
.am-plate { padding:15px 2px 0; }
/* No cover yet: a quiet pill in place of the band, opens the picker. (Robin.) */
.am-add-cover { display:inline-flex; align-items:center; gap:6px; margin:0 0 4px; padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-3); font-size:13px; font-weight:600; cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.am-add-cover:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); color:var(--accent); }
.am-kicker {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IM Fell English SC',Georgia,serif; font-size:14px; font-weight:400; text-transform:uppercase; letter-spacing:.22em;
  color:color-mix(in srgb,var(--c) 55%,var(--ink-3)); margin:0 0 4px 3px;
}
.am-kicker::before { content:""; width:20px; height:2px; border-radius:2px; background:currentColor; opacity:.55; }
/* A reusable "what this page is" kicker (Folio / Practice / Task...), keyed on the
   page's own hue - the same antique small-caps as the folio masthead. (Robin.) */
.page-kicker { display:inline-flex; align-items:center; gap:10px; font-family:'IM Fell English SC',Georgia,serif; font-size:13px; font-weight:400; text-transform:uppercase; letter-spacing:.22em; color:color-mix(in srgb, hsl(var(--h,220) var(--lane-s) var(--lane-l)) 55%, var(--ink-3)); margin:2px 0 2px 3px; }
.page-kicker::before { content:""; width:20px; height:2px; border-radius:2px; background:currentColor; opacity:.55; }
.area-mast .am-plate h1 { margin-top:0; }
.area-tabs-kick { padding-top:16px; }
.area-tab-kick { margin:0; }
@media (max-width:560px){
  .am-cover { border-radius:15px; }
  .am-kicker { letter-spacing:.24em; }
  .am-cover-btn, .am-credit { opacity:1; transform:none; }
}

/* Cover-image picker (opens from the masthead). */
.cover-dialog { width:min(580px,94vw); max-height:88vh; overflow:auto; text-align:left; }
.cover-dialog .recur-p { margin-bottom:12px; }
.cv-actions { display:flex; gap:8px; align-items:stretch; margin:2px 0 12px; flex-wrap:wrap; }
.cv-upload { flex:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.cv-up-ic { font-size:15px; }
.cv-search { display:flex; gap:8px; margin:2px 0 12px; }
.cv-actions .cv-search { flex:1 1 200px; margin:0; }
.cover-dialog input { font:inherit; font-size:15px; padding:10px 13px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); }
.cover-dialog input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent); }
.cv-q { flex:1 1 auto; min-width:0; }
.cv-results { min-height:72px; margin-bottom:14px; }
.cv-results:empty { display:none; }
.cv-hint { color:var(--ink-3); font-size:14px; padding:16px 2px; }
.cv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(102px,1fr)); gap:8px; }
.cv-thumb { aspect-ratio:4/3; border-radius:11px; border:1px solid var(--line); background:var(--paper-2) center/cover no-repeat; cursor:pointer; transition:transform .1s, box-shadow .13s, border-color .12s; }
.cv-thumb:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 12px 24px -12px rgba(0,0,0,.5); }
.cv-url-l { display:block; font-size:13px; color:var(--ink-3); }
.cv-url-row { display:flex; gap:8px; margin-top:7px; }
.cv-url { flex:1 1 auto; min-width:0; }
.cv-remove { color:var(--danger,#b4453a); margin-right:auto; }
/* The Remove cover / Close row wants room, not to sit cramped against the URL field
   and the dialog edge. (Robin.) */
.cover-dialog .ui-dialog-btns { margin-top:18px; gap:12px; }
.cover-dialog .ui-btn { padding:12px 22px; }

/* Stats as ONE quiet unit: no separate boxes - plain figures on the page, divided
   by hairlines, the number in serif. Reads as a summary line, not four cards. */
.area-stats { gap:0; align-items:stretch; }
.area-stat {
  --c:hsl(var(--h,220) var(--lane-s) var(--lane-l));
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:2px 15px; min-width:0;
  border-left:1px solid var(--line);
}
.area-stat:first-child { padding-left:2px; border-left:0; }
.area-stat b { font-size:34px; color:var(--ink); }
.area-stat span { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.area-stat-btn { transition:color .12s; border-radius:8px; }
.area-stat-btn:hover { background:none; }
.area-stat-btn:hover b { color:color-mix(in srgb,var(--c) 68%,var(--ink)); }
.area-stat-btn:hover span { color:color-mix(in srgb,var(--c) 55%,var(--ink-2)); }
@media (max-width:560px){
  .area-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; }
  .area-stat { padding:2px 0; border-left:0; }
  .area-stat b { font-size:28px; }
}

/* The parts of an area as soft, generously-padded panels laid two-up - like a
   considered dashboard, filling the width, never a single-column stack of empty
   full-width boxes. Neutral panels (raised off the paper), hue only as accents. */
.area-flow { display:flex; flex-direction:column; gap:20px; margin-top:24px; }
@media (min-width:980px){
  .area-flow { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; margin-top:24px; }
  /* Only Tasks takes the full row; every other tool pairs up half-width. (Robin.) */
  .area-flow .area-sec[data-aflow="Tasks"] { grid-column:1 / -1; }
}
.area-flow .area-sec,
.area-weeksec,
.area-today,
.area-connect,
.area-half,
.area-dash-wall, .area-dash-shared, .area-dash-files, .area-dash-links {
  --c:hsl(var(--h,220) var(--lane-s) var(--lane-l));
  background:linear-gradient(162deg, color-mix(in srgb,var(--c) 11%,var(--card)), color-mix(in srgb,var(--c) 3%,var(--card)) 72%);
  border:1px solid color-mix(in srgb,var(--c) 24%,var(--line));
  border-radius:20px;
  padding:22px 24px;
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 20px 42px -30px color-mix(in srgb,var(--c) 50%,rgba(0,0,0,.4));
}
.area-flow .area-sec.area-sec-collapsed, .area-connect.area-sec-collapsed { padding:18px 24px; }
/* ── Sexier folio: the folio's colour runs through it, warm not grey ────────
   The section cards above now carry a tinted gradient + hue-glow; here the labels
   and inner cards pick up the colour too, so nothing reads as a plain grey box. */
.area-body { --c:hsl(var(--h,220) var(--lane-s) var(--lane-l)); }
.area-body .ash-l, .area-body .area-recent-h, .area-body .feed-grp-h, .area-body .home-sec-h { color:color-mix(in srgb,var(--c) 52%,var(--ink-2)); }
.area-body .ash-ic { color:color-mix(in srgb,var(--c) 78%,var(--ink-2)); }
/* Content cards sit a touch lighter/cleaner than their tinted section, so they lift. */
.area-body .tbl-card, .area-body .area-rv-item { background:color-mix(in srgb,var(--c) 3%,var(--card)); border-color:color-mix(in srgb,var(--c) 17%,var(--line)); }
.area-body .tbl-card:hover, .area-body .area-rv-item:hover { border-color:color-mix(in srgb,var(--c) 42%,var(--line)); }
/* The at-a-glance strip + tab strip in the folio's colour. */
.area-body .area-tabs { background:color-mix(in srgb,var(--c) 7%,var(--card)); border:1px solid color-mix(in srgb,var(--c) 18%,var(--line)); border-radius:15px; padding:5px; }
.area-body .area-tile.on { background:color-mix(in srgb,var(--c) 16%,var(--card)); box-shadow:0 1px 2px rgba(0,0,0,.05); }

/* Connections: the Page's add/connect hub - a grid of connect-tiles, one per type.
   Sits at the very bottom; adding any type surfaces it as a section above. */
.area-connect { margin-top:20px; }
.conn-lead { color:var(--ink-3); font-size:14.5px; margin-bottom:14px; max-width:60ch; }
.conn-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:11px; }
.conn-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:18px 10px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s, transform .08s; }
.conn-tile:hover { border-color:var(--c); background:var(--card); transform:translateY(-1px); }
.conn-tile .conn-ic { font-size:23px; line-height:1; }
.conn-tile .conn-l { font-size:14px; font-weight:600; }
/* A type with content: highlighted in the Page's colour, a count badge, sorted to
   the front; clicking it jumps to that section. (Robin.) */
.conn-tile { position:relative; }
/* "In use" reads as clearly ON (Robin thinks of these as on/off toggles): a
   confident tint, a double keyline in the folio colour, and a corner tick. */
.conn-tile.has { border-color:var(--c); background:color-mix(in srgb,var(--c) 15%, var(--card)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%, transparent); }
.conn-tile.has .conn-ic { color:var(--c); }
.conn-tile.has .conn-l { color:color-mix(in srgb,var(--c) 45%,var(--ink)); font-weight:600; }
.conn-tile.has::after { content:'✓'; position:absolute; top:7px; left:9px; font-size:10px; font-weight:700; color:var(--c); opacity:.85; }
.conn-c { position:absolute; top:8px; right:10px; font-size:12.5px; font-weight:700; color:var(--c); line-height:1; }
.conn-foot { margin-top:14px; display:flex; }
.conn-hide { margin-left:auto; background:none; border:0; color:var(--ink-3); font-size:13px; cursor:pointer; padding:4px 2px; }
.conn-hide:hover { color:var(--accent); text-decoration:underline; }
/* Vision reads as a pull-quote, not a panel: a quiet hue keyline, generous air. */
.area-card.area-top-card {
  --c:hsl(var(--h,220) var(--lane-s) var(--lane-l));
  background:none; border:0; box-shadow:none; border-radius:0;
  border-left:2px solid color-mix(in srgb,var(--c) 42%,var(--line));
  padding:4px 0 4px 20px; margin:2px 0 2px;
}
/* Section heading: glyph in a soft hue chip; label quiet and tinted, not loud. */
.area-sec-h { margin-bottom:4px; }
.area-sec-h .ash-ic {
  width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; background:color-mix(in srgb,var(--c) 11%,transparent);
  color:color-mix(in srgb,var(--c) 66%,var(--ink)); font-size:14px;
}
.area-sec-h .ash-l { color:var(--ink-3); letter-spacing:.08em; }

/* Tabs become a light segmented control - one unit, not four pills. The track is
   a faint inset that works on either theme; the active pill lifts off it with a
   border + shadow (needed in dark, where --card and --paper-2 coincide). */
.area-tiles.area-tabs {
  gap:2px; background:color-mix(in srgb,var(--ink) 6%,transparent); border-radius:13px; padding:4px; margin:4px 0 20px;
}
.area-tabs .area-tile {
  background:none; border:0; box-shadow:none; border-radius:10px; padding:10px 12px; transition:background .12s, color .12s;
}
.area-tabs .area-tile:hover { transform:none; border:0; background:color-mix(in srgb,var(--ink) 6%,transparent); }
.area-tabs .area-tile.on { background:var(--card); border:1px solid var(--line); box-shadow:0 1px 3px rgba(0,0,0,.14); }
.area-tabs .area-tile.on .at-l { color:var(--ink); }
.area-tabs .at-c { background:color-mix(in srgb,var(--ink) 9%,transparent); }

/* The icon-tile grid (if present) stays as tiles, but flatter and lighter. */
.area-tiles:not(.area-tabs) .area-tile {
  background:var(--card); border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.03), 0 8px 20px -18px rgba(0,0,0,.12);
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
.area-tiles:not(.area-tabs) .area-tile:hover { transform:translateY(-1px); border-color:var(--line-2); }
.area-tiles:not(.area-tabs) .area-tile.on { border-color:color-mix(in srgb,var(--c) 45%,var(--line)); }
.area-tiles:not(.area-tabs) .area-tile .at-ic {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:color-mix(in srgb,var(--c) 10%,transparent);
  color:color-mix(in srgb,var(--c) 70%,var(--ink));
}

/* Recently-viewed: light pills on the page, not heavy full-width boxes. */
.area-recent-h { margin-bottom:9px; }
.area-rv { flex-direction:row; flex-wrap:wrap; gap:8px; }
.area-rv-item {
  width:auto; padding:11px 15px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); box-shadow:var(--shadow); font-size:15px; gap:10px;
}
.area-rv-item:hover { border-color:var(--accent); }
.area-rv-item .area-rv-ic { color:var(--ink-3); }
.area-rv-item .area-rv-t { max-width:220px; }
/* The dashboard stats + recents no longer need a divider from the hero. */
.area-dash { margin:18px 0 8px; }
/* "Add to this area" was a loud filled rectangle fighting the quiet page - make
   it a slim, quiet outline pill that sits with the stats, not over them. */
.area-addnew .addnew-btn {
  --c:hsl(var(--h,220) var(--lane-s) var(--lane-l));
  width:auto; min-height:0; padding:9px 16px; border-radius:999px;
  background:none; color:var(--ink-2); border:1px solid var(--line-2); box-shadow:none;
  font-weight:600; font-size:14px;
}
.area-addnew .addnew-btn:hover { background:color-mix(in srgb,var(--c) 7%,transparent); border-color:color-mix(in srgb,var(--c) 45%,var(--line-2)); color:color-mix(in srgb,var(--c) 70%,var(--ink)); }
.area-addnew .addnew-btn .an-plus { font-weight:400; }