/* Kaya - the light. A painted wash behind every page that follows the real day
   (dawn, overcast by day, dusk, night), with frosted glass on what floats and on
   what you choose or glance at. Never glass on what you read closely.

   `html[data-light]` and `html[data-theme]` are set together by applyLight() in
   app.js (and the first-paint script in app.html), so text colours and the wash
   can never disagree: pale text on a light wash is unreadable.
   Every text colour here is at least 4.5:1 on the strongest paint of its wash;
   tools/wash/paint.py prints the figures when the washes are repainted. */

:root[data-light='dawn'] {
  --k-bg:#3B2B36; --k-panel:#46343F; --k-soft:#513D4A; --k-mine:#5A4552;
  --k-ink:#FFFFFF; --k-mute:#F3EAE6; --k-goldt:#FAE6B8; --k-gold:#E8BC6A; --k-line:#6A5261;
  --k-deep:#21161C; --k-ondeep:#FFFFFF;
  --glass:rgba(70,50,62,.28); --glass-edge:rgba(255,240,235,.3); --glass-card:rgba(70,50,62,.44); --glass-face:rgba(28,18,24,.52);
  --line:rgba(255,255,255,.2); --line-2:rgba(255,255,255,.34);
}
:root[data-light='overcast'] {
  --k-bg:#2A333F; --k-panel:#343E4C; --k-soft:#3F4A59; --k-mine:#485565;
  --k-ink:#FFFFFF; --k-mute:#EEF1F4; --k-goldt:#F6DFA8; --k-gold:#E3B765; --k-line:#5E6B7C;
  --k-deep:#1D242E; --k-ondeep:#FFFFFF;
  --glass:rgba(52,62,76,.3); --glass-edge:rgba(255,255,255,.28); --glass-card:rgba(52,62,76,.46); --glass-face:rgba(22,28,36,.52);
  --line:rgba(255,255,255,.2); --line-2:rgba(255,255,255,.34);
}
:root[data-light='dusk'] {
  --k-bg:#2E2230; --k-panel:#38293A; --k-soft:#433146; --k-mine:#4C3A50;
  --k-ink:#F6EADF; --k-mute:#EFE3DD; --k-goldt:#F5D593; --k-gold:#E3AE55; --k-line:#54405A;
  --k-deep:#1C141F; --k-ondeep:#F6EADF;
  --glass:rgba(70,50,75,.26); --glass-edge:rgba(255,240,230,.3); --glass-card:rgba(70,50,75,.42); --glass-face:rgba(20,14,24,.5);
  --line:rgba(246,234,223,.2); --line-2:rgba(246,234,223,.34);
}
:root[data-light='night'] {
  --k-bg:#0D1220; --k-panel:#171D30; --k-soft:#212842; --k-mine:#2A3150;
  --k-ink:#EEF0F5; --k-mute:#C6CAD8; --k-goldt:#E6C67C; --k-gold:#D9B45F; --k-line:#333B59;
  --k-deep:#090D18; --k-ondeep:#EEF0F5;
  --glass:rgba(34,40,70,.3); --glass-edge:rgba(220,228,255,.22); --glass-card:rgba(34,40,70,.42); --glass-face:rgba(8,11,22,.55);
  --line:rgba(238,240,245,.16); --line-2:rgba(238,240,245,.3);
}
/* The older token names still paint much of the app: point them at the same light. */
:root[data-light] {
  --paper:var(--k-bg); --paper-2:var(--k-soft); --card:var(--k-panel);
  --ink:var(--k-ink); --ink-2:var(--k-mute); --ink-3:var(--k-mute);
  --accent-ink:#12100b;
  --glass-blur:blur(14px) saturate(1.7);
}

/* ── The wash ─────────────────────────────────────────────────────────────── */
:root[data-light] { background:var(--k-bg); transition:background-color 1.2s cubic-bezier(.2,.7,.2,1); }
:root[data-light] body, :root[data-light] #pane { background:transparent; }
:root[data-light] body::before { display:none; }
#light-layer { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
/* The painted wash is held back so it reads as a quiet atmosphere, not a picture:
   it settles to about half strength over the calm ground, softened and a shade
   desaturated, so there is less going on behind the glass. (Robin, 2026-11-07.)
   scale(1.04) keeps the gentle blur from feathering the viewport edges. */
#light-layer img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transform:scale(1.04); filter:saturate(.9) blur(3px); transition:opacity 1.2s cubic-bezier(.2,.7,.2,1); }
#light-layer img.on { opacity:.5; }
@media (prefers-reduced-motion:reduce) { #light-layer img, :root[data-light] { transition:none; } }

/* ── Legibility ───────────────────────────────────────────────────────────── */
/* These used the fill gold, or a faded ink, as text: illegible on paint. */
:root[data-light] :is(.home-rd-kind,.home-rd-act,.home-rd-all,.home-sa-alltxt,.sec-new,.sx-num,.sx-idx-num,.cvx-ava,.cx-side-add,.home-sa-k2,.home-sa-new) { color:var(--k-goldt); opacity:1; }
:root[data-light] :is(.home-sa-when,.home-sa-item,.kmark-cap,.qod-author,.tx-pile-h,.kg-view-h,.rf-tool-h,.cvx-card-sub) { color:var(--k-mute); opacity:1; }
/* The smallest labels, up to something readable. */
:root[data-light] :is(.nx-eyebrow,.kg-eyebrow-t,.cx-eyebrow,.sx-eyebrow-t,.cx-side-eyebrow,.home-sub-eyebrow,.kg-order-l,.home-rd-kind,.home-sa-k2,.qod-author,.kmark-cap) { font-size:13px; }
:root[data-light] :is(.crumb,.tx-row-sp,.tx-row-due,.tx-pile-h,.rf-tool-h,.kg-view-h,.home-sa-when,.home-sa-alltxt,.home-rd-act,.home-rd-all,.sec-new) { font-size:14px; }

/* Tasks' piles: each keeps its own width, so their labels can't run together. */
.tx-piles-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px clamp(26px,3vw,44px); }
.tx-pile { flex:none; }

/* ── A calm start: the sky is there from the first frame, and the app fades in once,
   when it has something to show, instead of arriving in pieces. ───────────────── */
:root.booting :is(#nav, .main, #cap-root) { opacity:0; }
:root.reveal :is(#nav, .main, #cap-root) { transition:opacity .22s ease-out; }
#light-layer.first img { transition:none; }

/* ── Glass: what floats ───────────────────────────────────────────────────── */
/* The menubar's parent is solid by default, which would hide the glass entirely. */
:root[data-light] #nav { background:transparent; }
:root[data-light] .knav-bar,
:root[data-light] .knav-bottom,
:root[data-light] .cap-bar,
:root[data-light] .home-alerts > * {
  background:var(--glass); background-image:none;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-color:var(--glass-edge); box-shadow:none;
}
:root[data-light] .knav-bar { border-bottom:1px solid var(--glass-edge); }
:root[data-light] .knav-bottom { border-top:1px solid var(--glass-edge); }
:root[data-light] .cap-bar { border:1px solid var(--glass-edge); color:var(--k-ink); }
:root[data-light] .cap-bar.cap-dim { opacity:1; }
:root[data-light] .cap-bar * { color:var(--k-ink); opacity:1; }
:root[data-light] .knav-g, :root[data-light] .knav-g-l, :root[data-light] .knav-p, :root[data-light] .knav-p-l,
:root[data-light] .knav-right > *, :root[data-light] .knav-crumb,
:root[data-light] .knav-b-contents, :root[data-light] .knav-b-find { color:var(--k-ink); opacity:1; }
:root[data-light] .knav-b-set, :root[data-light] .knav-b-set * { color:#12100b; }
:root[data-light] .gate2 { background:transparent; }

/* ── Glass: what you choose or glance at ──────────────────────────────────── */
:root[data-light] .rf-tool {
  background:var(--glass-card); border-color:var(--glass-edge); box-shadow:none;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
:root[data-light] .rf-tool-face { background:var(--glass-face); }
:root[data-light] .tr-table {
  background:var(--glass-card); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
:root[data-light] .tr-cap-pos { color:var(--k-goldt); }
:root[data-light] .tr-cap-state { color:var(--k-ink); }
:root[data-light] .tr-back { background-color:var(--glass-face); }
:root[data-light] .sc-back-v2 { background-color:var(--glass-face) !important; }
:root[data-light] .sc-front {
  background:var(--glass-card); border-color:var(--glass-edge); box-shadow:none;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
:root[data-light] .sc-front, :root[data-light] .sc-front * { color:var(--k-ink); }
:root[data-light] .sc-front .sc-sym, :root[data-light] .sc-front .sc-sym * { color:var(--k-gold); }
:root[data-light] .cap-rec-stop { background:var(--k-deep); color:var(--k-ondeep); }
:root[data-light] .rc-horo { background:var(--k-deep); }

/* ── Today's cards, top of Reflections: one glass pane, three matching cards ── */
:root[data-light] .rf-today {
  padding:28px 32px; background:var(--glass-card); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
}
.rf-today .rf-card-k { font-size:14px; margin-bottom:18px; }
.rf-today-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.rf-rdcard { flex-direction:column; gap:14px; min-width:0; }
.rf-rdcard .home-rd-card { zoom:1.7; width:62px; height:100px; }
.rf-rdcard .rc-tarot { padding:4px; background:none; }
.rf-rdcard .rc-tarot .rc-tarot-img { position:static; width:100%; height:100%; object-fit:contain; display:block; }
.rf-rdcard .rc-foot { font-size:5.5px; letter-spacing:.02em; }
.rf-rdcard-tx { display:block; flex:1; padding-top:0; }
.rf-rdcard-kind { display:block; font-size:13px; margin-bottom:6px; }
.rf-rdcard-t { display:block; font-size:24px; line-height:1.15; margin-bottom:8px; }
.rf-rdcard-l { display:block; font-size:18px; line-height:1.4; color:var(--k-ink); }
@media (min-width:1200px) { .rf-rdcard { flex-direction:row; gap:18px; } .rf-rdcard-t { font-size:26px; } }
@media (max-width:640px) {
  :root[data-light] .rf-today { padding:22px 20px; }
  .rf-today-row { grid-template-columns:minmax(0,1fr); }
  .rf-rdcard { flex-direction:row; }
}

/* Mail and Notepad had their own padding, which sat their words 2px above the rest. */
.knav-mail-btn, .knav-np-btn { display:inline-flex; align-items:center; padding:6px 0 5px; }   /* 5px + their 1px underline = the 6px their neighbours have */

/* ── Spaces carry no colours: their name is enough (Robin, 2026-11-04) ─────── */
.prc-lane-dot, .cd, .ca-dot, .wt-dot, .set-area-dot { display:none !important; }

/* ── Spaces: frosted cards, a Roman numeral, words instead of chips ───────── */
.pane-head.home-head { display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; gap:16px; }
.pane-head.home-head h1 { margin:0; }
.area-gcards { grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:18px; }
[class*="agc"], .area-gcard { --c:var(--k-gold) !important; --wh:40 !important; }   /* set inline per Space, hence !important */
:root[data-light] .area-gcard { background:var(--glass-card); border:1px solid var(--glass-edge); box-shadow:none; -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
:root[data-light] .area-gcard:hover { transform:none; border-color:var(--k-gold); box-shadow:none; }
.area-gcard::before, .agc-wheel { display:none !important; }
.agc-open { gap:10px; padding:22px 22px 18px; }
.agc-toprow { align-items:baseline; }
:root[data-light] .agc-mono { width:auto; height:auto; background:none; box-shadow:none; color:var(--k-goldt); font-family:var(--k-serif); font-style:italic; font-weight:300; font-size:26px; line-height:1; text-transform:none; }
:root[data-light] [class*="agc-act"] { background:none; border:0; padding:0; color:var(--k-mute); font-size:14px; font-weight:400; letter-spacing:0; text-transform:none; }
.agc-topright { margin-right:26px; }
.agc-name { font-family:var(--k-serif); font-weight:500; font-size:28px; line-height:1.1; }
.agc-vision { font-size:16px; line-height:1.4; font-style:normal; color:var(--k-mute); }
.agc-metrics { gap:6px 16px; margin-top:6px; }
:root[data-light] .agc-chip { background:none; padding:0; font-size:15px; font-weight:400; color:var(--k-ink); }
.agc-star { top:18px; right:16px; }
.agc-foot { padding:12px 22px; justify-content:flex-start; border-top-color:var(--glass-edge); }
.agc-today { font-size:14px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--k-mute); padding:0; min-height:28px; }
.agc-today.on { color:var(--k-goldt); }

/* ── The main button: white rim, frosted glass, words in the middle ────────── */
:root[data-light] :is(.add-btn.wide, .gate2-btn, .mail-tb-write, .home-wn-do, .home-v2 .home-wn-do, .spirit-save, .dz-add, .cx-new, .kg-newgoal, .rw-save-btn, .icx-castbtn, .ic-btn-primary) {
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:46px; padding:0 22px;
  background:rgba(255,255,255,.1); background-image:none;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.78); box-shadow:none;
  color:#fff; font-family:var(--k-sans); font-size:16px; font-weight:500; letter-spacing:.01em; text-transform:none; filter:none;
}
:root[data-light] :is(.add-btn.wide, .gate2-btn, .mail-tb-write, .home-wn-do, .home-v2 .home-wn-do, .spirit-save, .dz-add, .cx-new, .kg-newgoal, .rw-save-btn, .icx-castbtn, .ic-btn-primary):hover { background:rgba(255,255,255,.2); filter:none; }
:root[data-light] :is(.add-btn.wide, .gate2-btn, .mail-tb-write, .home-wn-do, .home-v2 .home-wn-do, .spirit-save, .dz-add, .cx-new, .kg-newgoal, .rw-save-btn, .icx-castbtn, .ic-btn-primary):active { transform:none; }

:root[data-light] .add-btn.wide, :root[data-light] .dz-add { width:auto !important; flex:0 0 auto !important; align-self:flex-start; max-width:100%; }
:root[data-light] .gate2-btn { width:auto; align-self:center; }
.dz-add.done { border-color:var(--glass-edge) !important; opacity:.8; }

/* ── Every other page: panels let the sky through. No blur on these: a list can hold
   hundreds of them, and blur on that many would make scrolling crawl. ─────────── */
:root[data-light] :is(.tbl-card, .trk-area, .g-row, .g-tile, .g-start, .g-input, .dz-card, .mny-link, .mny-card, .tbx-card, .mail-acct, .set-mod, .j-ins-item, .j-insights-page, .rr-keys, .wheeltrack-row, .am-row, .fin-chip, .fh-wrap, .fin-rates, .cn-band, .gcal-bar, .gcal-extra, .rw-filterbar, .rw-savebar, .src-chip, .list-search, .seg, .sel, .mp-row.sel) {
  background-color:var(--glass-card); background-image:none; border-color:var(--glass-edge); box-shadow:none;
}
:root[data-light] .mp-msg.mine { background-color:rgba(255,255,255,.14); }
/* The selected week day is a gold underline, nothing more. It shares the 'sel' class
   with dropdowns, which leaked a glass box, 12px/16px padding (the indent) and a
   180px cap onto it - strip all that back. (Robin, 2026-11-05.) */
:root[data-light] .cx-whead.sel { max-width:none; padding:0 0 10px; background:none; border:0; border-bottom:1px solid var(--k-gold); -webkit-backdrop-filter:none; backdrop-filter:none; }
/* Left-edge colour stripes and per-Space dots: gone. */
:root[data-light] .trk-area { border-left:1px solid var(--glass-edge) !important; }
.wheeltrend-dot, .nt-sub-dot, .rr-key-ic, .jrs-sym { display:none !important; }
:root[data-light] .rv-bar { background:var(--k-gold); background-image:none; }
:root[data-light] .ma-status { color:var(--k-mute); background:none; }
/* The smallest labels, up to something readable. */
:root[data-light] :is(.kg-prog-pct,.kg-group-l,.kg-side-l,.kg-side-c,.tx-group-l,.tx-side-hl,.tx-side-n,.jx-page-kind,.jx-month-lbl,.jx-month-count,.jx-side-title,.jx-eyebrow-lbl,.jx-starts-lbl,.rw-si-kind,.rw-cov-top,.rw-cov-fin,.rw-cov-by,.rw-eyebrow,.tr-past-kind,.tr-past-date,.tr-spreads-l,.tr-cap-pos,.trk-dh,.trk-cad,.icx-hmonth-l,.icx-hrow-when,.icx-side-h,.dz-src,.src-chip-n,.mp-who,.mp-day-l,.mp-grp-l,.mp-send,.nt-sub-t,.am-fcount,.j-ins-list-h,.rr-keys-h,.wol-trend-h,.mail-blocked-h,.sx-idx-h,.lab,.fh-r) { font-size:13px; }

/* ── No full-width buttons: this one is slim and sits where it belongs ─────── */
.prc-addtoggle, .gcal-addbtn { width:fit-content; align-self:flex-start; justify-self:start; }

/* Text that was below 4.5:1 on real data. */
:root[data-light] .t2-avoidtag { background:transparent; color:var(--k-goldt); }

/* ── Mail: the email itself stays on white paper; the box around it is glass ─ */
:root[data-light] :is(.mail-ar-card, .mail-maketop, .mail-ar-replytop) { background:var(--glass-card); border-color:var(--glass-edge); }
:root[data-light] .mail-ar-card { -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
:root[data-light] .mail-ar-triage { background:var(--glass); border-color:var(--glass-edge); -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7); }
:root[data-light] .mail-ar-card *:not(iframe) { color:var(--k-ink); border-color:var(--glass-edge); }
:root[data-light] .mail-ar-card :is(a, .mail-make:hover, .mail-noticed-l, .mail-noticed-act) { color:var(--k-goldt); }
:root[data-light] .mail-ar-card .mail-make { border-color:var(--glass-edge); background:transparent; font-size:14px; }
:root[data-light] .mail-ar-card :is(.mail-ar-triage-l, .mail-ar-row-l) { color:var(--k-goldt); font-size:13px; }
:root[data-light] .mail-ar-card .mail-text.mail-text-plain { background:#fff; padding:20px 24px; max-width:none; }
:root[data-light] .mail-ar-card .mail-text.mail-text-plain, :root[data-light] .mail-ar-card .mail-text.mail-text-plain * { color:#1b1820; }
:root[data-light] .mail-ar-card .mail-text.mail-text-plain a { color:#6E4C0C; }

/* Move to, Action and Tools sit in one row, wrapping when the window is narrow. */
.mail-ar-bar { position:sticky; top:var(--tabstrip-h,68px); z-index:6; display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; padding:12px 0; border-top:1px solid var(--glass-edge); border-bottom:1px solid var(--glass-edge); background:var(--glass); -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7); }
:root[data-light] .mail-ar-bar :is(.mail-ar-triage, .mail-ar-replytop, .mail-maketop) { position:static; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0; margin:0; border:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.mail-ar-bar .mail-replyacts, .mail-ar-bar .mail-makeacts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; }
:root[data-light] .mail-ar-bar :is(.mail-ar-triage-l, .mail-ar-row-l) { flex:none; width:auto; margin-right:4px; }
.mail-ar-bar .mail-make-hint { display:none; }
:root[data-light] .mail-ar-bar :is(.mail-trg, .mail-reply, .mail-make) { padding:6px 10px; }
:root[data-light] .mail-ar-bar :is(.mail-ar-triage, .mail-ar-replytop, .mail-maketop, .mail-replyacts, .mail-makeacts) { gap:6px; }

/* ── Today: one row of tabs, no sidebar, Your Spaces underneath ────────────── */
.home-today { margin-top:30px; }
.home-tabs-row { gap:6px clamp(16px,2.2vw,32px); }
.home-todaytabs .home-ltab-body { padding-top:20px; min-height:280px; }
.home-spaces-wide { margin-top:48px; }
.home-spaces-wide .home-sa-bodywrap { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:14px; margin-top:16px; }
:root[data-light] .home-spaces-wide .home-sa-row { background:var(--glass-card); border:1px solid var(--glass-edge); padding:16px 18px; }
.home-spaces-wide .home-sa-bodywrap > :not(.home-sa-row) { grid-column:1 / -1; justify-self:start; }
@media (max-width:767px) {
  /* Sideways only: overflow-x:auto alone lets the row wiggle up and down too. */
  .home-tabs-row { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:22px; }
  .home-tabs-row .home-ltab { margin-bottom:0; }
  .home-tabs-row::-webkit-scrollbar { display:none; }
  .home-tabs-row .home-ltab { flex:none; white-space:nowrap; }
}
/* Join a meeting: a small white-rimmed button at the right of the calendar row. */
.home-cal-b:has(> .ev-join-link) { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; align-items:center; }
.home-cal-b:has(> .ev-join-link) > :not(.ev-join-link) { grid-column:1; }
.home-cal-b > .ev-join-link { grid-column:2; grid-row:1 / span 3; justify-self:end; display:inline-flex; align-items:center; gap:7px; margin:0; padding:8px 14px; border:1px solid #fff; font-family:'Jost',system-ui,sans-serif; font-size:14px; font-weight:400; letter-spacing:0; text-transform:none; line-height:1; color:var(--k-ink); white-space:nowrap; text-decoration:none; }
.home-cal-b > .ev-join-link:hover { color:var(--k-goldt); border-color:var(--k-goldt); }

/* Phones: Set it down is frosted glass over the page, not a solid panel. */
@media (max-width:767px) {
  :root[data-light] .cap-drawer { background:var(--glass-card); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
  /* It fades in where it stands: a phone jumps the page if it focuses a box still sliding up. */
  .cap-drawer { animation:capfade .2s ease-out; }
}

/* Practices: names in the serif, in white; the count sits beside the name. */
.prc-group + .prc-group { margin-top:28px; }
.prc-lane { color:var(--k-mute); margin-bottom:4px; }
.prc-row { gap:16px; padding:11px 2px; border-bottom-color:var(--k-line); }
.prc-row .prc-name, .prc-row .prc-name-link { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:23px; line-height:1.2; color:var(--k-ink); }
.prc-row-click:hover { background:transparent; }
.prc-row-click:hover .prc-name-link { color:var(--k-goldt); }
.prc-row .prc-name .trk-streak { display:inline; margin-left:12px; font-family:'Jost',system-ui,sans-serif; font-weight:400; font-size:14px; color:var(--k-goldt); white-space:nowrap; min-width:0; }
.prc-row .prc-name :is(.prc-badge, .t2-avoidtag) { font-family:'Jost',system-ui,sans-serif; font-size:11px; }
.prc-row .prc-name .prc-badge:not(.dim) { color:var(--k-goldt); }
.prc-row .trk-week { gap:3px; }
.prc-row .trk-dot { width:23px; height:23px; }
.prc-row .trk-dot i { font-size:11px; }
.prc-row .trk-del:hover { color:var(--k-goldt); }
@media (max-width:767px) {
  .prc-row { flex-wrap:wrap; row-gap:8px; }
  .prc-row .prc-name { flex:1 1 calc(100% - 90px); white-space:normal; }
  .prc-row .trk-week { order:3; margin-left:46px; }
  .prc-row .trk-del { order:2; }
}

:root[data-light] .mail-ar.open :is(.mail-ar-from, .mail-ar-acct, .mail-ar-time) { color:var(--k-ink); opacity:1; visibility:visible; }
.mail-rowsel { display:none; }
/* Mail search: a glass box across the width, under the line about what's to sort. */
.mail-tb-main { flex:1; min-width:0; }
/* Mail search is now the shared Cormorant-underline box (.cvx-search), a full-
   width row below the title - matching Contacts, Notes, Tables and Spaces.
   (Robin, 2026-11-05: "I thought we were going to change the search box?") */
/* Phones, an open email: no box; sender, then the title across the width, then the
   receiving address and time on one line; Move to, Action and Tools are dropdowns. */
@media (max-width:767px) {
  :root[data-light] .mail-ar.open .mail-ar-card { background:transparent; border:0; padding:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .mail-ar.open .mail-ar-head.mailv2ar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; padding:14px 0; }
  .mail-ar.open .mail-ar-head.mailv2ar > :is(.mail-ar-main, .mail-ar-right), .mail-ar.open .mail-ar-head.mailv2ar .mail-ar-from { display:contents; }
  .mail-ar.open .mail-ar-head.mailv2ar :is(.mail-ar-dot, .mail-ar-tri, .mail-ar-prev) { display:none; }
  .mail-ar.open .mail-ar-head.mailv2ar .mail-ar-n { grid-row:1; grid-column:2; justify-self:end; }
  .mail-ar.open .mail-ar-head.mailv2ar .mail-ar-subj { grid-row:2; grid-column:1 / -1; margin:0; white-space:normal; }
  .mail-ar.open .mail-ar-head.mailv2ar .mail-ar-acct { grid-row:3; grid-column:1; margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
  .mail-ar.open .mail-ar-head.mailv2ar .mail-ar-time { grid-row:3; grid-column:2; justify-self:end; white-space:nowrap; font-size:14px; }
  .mail-tb-main .mail-search2-k { display:none; }
  .mail-tb-main { width:100%; }
  .mail-tb-act { box-sizing:border-box; width:100%; gap:14px; }
  .mail-tb-act .mail-tb-acctsel { flex:1 1 0; min-width:0; max-width:none; }
  .mail-tb-act .mail-tb-write { flex:none; }
  .mail-groups { overflow-x:clip; }
  .mailv2ar .mail-ar-main { min-width:0; }
  .mail-ar:not(.open) .mailv2ar .mail-ar-from { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  :root[data-light] .mail-ar-bar :is(.mail-ar-triage, .mail-ar-replytop, .mail-maketop) { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .mail-ar-bar { position:static; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:12px 0; }
  :root[data-light] .mail-ar-bar :is(.mail-ar-triage, .mail-replyacts, .mail-makeacts) { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:10px; width:100%; }
  :root[data-light] .mail-ar-bar :is(.mail-ar-replytop, .mail-maketop) { display:block; }
  :root[data-light] .mail-ar-bar :is(.mail-ar-triage, .mail-replyacts, .mail-makeacts) > :is(button, details) { display:none; }
  :root[data-light] .mail-ar-bar .mail-rowsel { display:block; width:100%; max-width:none; min-height:44px; padding-top:8px; padding-bottom:8px; padding-left:16px; padding-right:38px; background-color:var(--glass-face); border-color:var(--glass-edge); color:var(--k-ink); color-scheme:dark; font-family:'Jost',system-ui,sans-serif; font-size:16px; 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='%23ffffff' stroke-width='1.7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; }
}

/* Archive · Delete at the foot of a read email (Robin, 2026-11-05): the house glass
   button - white rim, frosted, words centred. Content-width on desktop; two-up, half
   the row each, on a phone (Robin asked for the half-row there). They sit on the dark
   page, in .mail-ar-below, never on the white email paper. */
.mail-ar-footacts { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 2px; }
:root[data-light] .mail-footact {
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:46px; padding:0 24px;
  background:rgba(255,255,255,.1); background-image:none;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.78); box-shadow:none;
  color:#fff; font-family:var(--k-sans); font-size:16px; font-weight:500; letter-spacing:.01em; text-transform:none; cursor:pointer;
}
:root[data-light] .mail-footact:hover { background:rgba(255,255,255,.2); }
@media (max-width:620px) {
  .mail-ar-footacts { gap:10px; }
  .mail-ar-footacts .mail-footact { flex:1 1 0; min-width:0; }
}

/* Opening an email scrolls it to the top of the viewport, clear of the sticky nav. */
.mail-ar.open { scroll-margin-top: calc(var(--navh, 56px) + 12px); }

/* Notepad is a desktop surface - its triggers and panel are hidden on a phone, where
   it was a fiddly experience. (Robin, 2026-11-05: "hide it on mobile".) */
@media (max-width:820px) {
  [data-notepad-open], .knav-np-btn, #notepad-panel { display:none !important; }
}

/* The Practices page: the same open rows as Today's Practices tab. No boxes. */
.trk-dash { max-width:none; column-count:1; column-width:auto; display:block; }
:root[data-light] .trk-area { background:transparent; border:0 !important; padding:0; margin:0 0 30px; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; break-inside:auto; }
.trk-area-h { border-bottom:1px solid var(--k-line); padding-bottom:8px; margin-bottom:0; }
.trk-area-name { font-family:'Jost',system-ui,sans-serif; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--k-mute); }
.trk-dayhdr { display:none; }
:root[data-light] .trk-cadsel { background-color:transparent; border-color:var(--glass-edge); color:var(--k-mute); font-size:14px; }
.trk-prow { gap:14px; padding:11px 2px; border-bottom:1px solid var(--k-line); }
.trk-prow:last-child { border-bottom:1px solid var(--k-line); }
.prc-row-click.trk-prow:hover { background:transparent; }
.trk-prow .trk-pname { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:23px; line-height:1.2; color:var(--k-ink); }
.trk-prow:hover .trk-pname { color:var(--k-goldt); }
.trk-pname .trk-streak { display:inline; margin-left:12px; min-width:0; font-family:'Jost',system-ui,sans-serif; font-weight:400; font-size:14px; color:var(--k-goldt); white-space:nowrap; }
.trk-pname :is(.t2-avoidtag, .trk-cad) { margin-left:10px; font-family:'Jost',system-ui,sans-serif; font-size:13px; font-weight:400; color:var(--k-mute); }
.trk-prow .t2-avoidtag { font-size:11px; font-weight:600; color:var(--k-goldt); }
.trk-prow .t2-tick { width:30px; height:30px; }
.trk-prow .trk-play { width:auto; height:auto; padding:4px 6px; border:0; background:none; color:var(--k-goldt); font-size:12px; }
.trk-prow .trk-week { gap:3px; }
.trk-prow .trk-daycell, .trk-prow .trk-daycell.today-col, .trk-prow .trk-daycell.yest-col { width:auto; padding:0; background:none; }
.trk-prow .trk-dot { width:23px; height:23px; }
.trk-prow .trk-dot i { font-size:11px; }
.trk-prow .trk-editp:hover { background:none; }
:root[data-light] :is(.trk-dot.slip, .trk-dot.today.slip, .t2-tick-slip.on) { background:var(--k-gold); border-color:var(--k-gold); box-shadow:none; color:var(--k-deep); }
@media (max-width:767px) {
  body[data-view="tracker"] .trk-prow { flex-wrap:wrap; row-gap:8px; }
  body[data-view="tracker"] .trk-pname { flex:1 1 calc(100% - 110px); white-space:normal; }
  body[data-view="tracker"] .trk-hist { width:100%; justify-content:flex-end; order:9; }
  body[data-view="tracker"] .trk-area-h { flex-wrap:nowrap; }
  body[data-view="tracker"] .trk-cadsel { margin-left:auto; flex:0 1 150px; max-width:150px; }
}

/* Flow: the day on glass; practices and tasks as open rows. No colours, no boxes. */
:root[data-light] .t2-canvas { background:var(--glass-card); border-color:var(--glass-edge); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.t2-hour { border-top-color:var(--k-line); }
:root[data-light] .t2-hlab { background:none; color:var(--k-mute); font-size:13px; }
:root[data-light] .t2-block { background:var(--glass-face); border:1px solid var(--glass-edge); }
.t2-btime { font-size:13px; color:var(--k-mute); }
.t2-btitle { font-size:15px; font-weight:500; color:var(--k-ink); }
:root[data-light] .t2-countbtn { background:transparent; border-color:var(--glass-edge); color:var(--k-goldt); font-size:13px; }
:root[data-light] .t2-stickytop { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.t2-colh h2 { font-weight:500; font-size:26px; }
.t2-colcount, .t2-daysub { font-size:14px; color:var(--k-mute); }
:root[data-light] .t2-filterbtn { background:transparent; border-color:var(--glass-edge); color:var(--k-ink); }
:root[data-light] :is(.t2-prow, .t2-trow) { background:transparent; border:0; border-bottom:1px solid var(--k-line); margin:0; padding:10px 2px; }
:root[data-light] :is(.t2-prow, .t2-trow):hover { background:transparent; border-color:var(--k-line); }
:root[data-light] :is(.t2-prow, .t2-trow) .cd { display:none; }
:is(.t2-prow, .t2-trow) .p-tag { display:none; }
.t2-pname { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:20px; line-height:1.2; color:var(--k-ink); }
.t2-prow:hover .t2-pname, .t2-trow:hover .t2-ttitle { color:var(--k-goldt); }
.t2-pname :is(.t2-avoidtag, .t2-vid-i) { font-family:'Jost',system-ui,sans-serif; font-size:11px; color:var(--k-goldt); }
.t2-psched { font-size:13px; color:var(--k-mute); }
.t2-streak { font-size:13px; color:var(--k-goldt); }
.t2-ttitle { font-size:15px; font-weight:400; color:var(--k-ink); }
.t2-pglabel { font-size:13px; color:var(--k-mute); margin:0 2px 2px; }
.t2-pgroup { margin-bottom:22px; }
:root[data-light] .t2-prio { background:transparent; border-color:var(--glass-edge); color:var(--k-ink); font-size:14px; font-weight:400; }
:root[data-light] .t2-prio.on { background:var(--glass-card); border-color:#fff; color:var(--k-ink); }
:root[data-light] button.t2-newrow { display:inline-block; width:auto; flex:none; padding:8px 14px; border:1px solid #fff; color:var(--k-ink); background:transparent; font-size:14px; }
:root[data-light] button.t2-newrow:hover { color:var(--k-goldt); border-color:var(--k-goldt); }
.t2-plink { font-size:14px; font-weight:400; color:var(--k-mute); }
.t2-col :is(.t2-scroll, .t2-colscroll) { scrollbar-width:thin; scrollbar-color:var(--glass-edge) transparent; }
/* Today's tabs: Reflections uses the Reflection page's cards; message text is serif in white. */
.home-todaytabs .rf-today { margin-top:0; }
.home-todaytabs .home-rd-all { margin-top:16px; }
.home-ltab-messages .gln-item-s { display:block; margin-top:3px; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:20px; line-height:1.3; color:var(--k-ink); white-space:normal; overflow:visible; }

/* Flow's add-a-task box, without the dashes. */
:root[data-light] .t2-taskadd input { border:1px solid var(--glass-edge); background:var(--glass-face); color:var(--k-ink); font-size:15px; }
:root[data-light] .t2-taskadd input::placeholder { color:var(--k-mute); opacity:1; }
/* Today's Practices tab: no add button; Edit practices covers it. */
:root[data-light] .home-wn-prc .prc-addtoggle { display:none !important; }

/* Flow doesn't work on a phone, so it isn't offered there. */
@media (max-width:767px) { [data-open-today] { display:none !important; } }

/* A Space's tab bar: frosted glass, with room around the tabs. */
:root[data-light] .av4-tabs { background:var(--glass-card); border:1px solid var(--glass-edge); padding:0 20px; -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7); }

/* Today's calendar: event names in the serif, larger now there's room. */
.home-cal-t { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:25px; line-height:1.2; }
.home-cal-note { font-size:15px; }
.home-cal-time { font-size:15px; }
/* Menu and Search: frosted glass over the page, at every width. */
:root[data-light] :is(.knav-contents, .knav-find) { background:var(--glass-card); -webkit-backdrop-filter:blur(28px) saturate(1.7); backdrop-filter:blur(28px) saturate(1.7); }
/* A long "coming up" line wraps on a phone, rather than widening the whole page. */
@media (max-width:767px) { .av3-strip-it, .av3-strip-t { white-space:normal; min-width:0; } }

/* Split: a tool's page fills the second pane; inside it the app drops its own nav. */
body.split #pane2:has(> .pane2-frame) { display:flex; flex-direction:column; overflow:hidden; height:calc(100dvh - var(--navh,68px)); position:sticky; top:var(--navh,68px); }
.pane2-frame { flex:1 1 auto; width:100%; min-height:0; border:0; background:transparent; }
.in-split-frame :is(#nav, .knav-bottom, #tabbar, #cap-root, #mail-arrival-wrap, #light-preview) { display:none !important; }

.home-cal-row[data-home-cal] { cursor:pointer; }
.home-cal-row[data-home-cal]:hover .home-cal-t { color:var(--k-goldt); }

/* The old glass token was a forest gradient at night; it follows the new glass now. */
:root[data-light] { --glass-bg:var(--glass-card); }
:root[data-light] .cc-adr-view { background:transparent; border:1px solid var(--glass-edge); }
:root[data-light] .cc-adr-link { background:transparent; border-color:var(--glass-edge); color:var(--k-ink); }

.cv-name-in { font-size:clamp(40px,4.4vw,56px); line-height:1.05; }

@keyframes capfade { from { opacity:0; } to { opacity:1; } }

/* Today's Mail tab: email titles in the serif, in white. */
.home-todaytabs .gln-mail-b { display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:2px 26px; min-width:0; }
.home-todaytabs :is(.gln-mail-subj, .gln-mail-from) { display:inline; margin:0; font-family:'Cormorant Garamond',serif; font-weight:500; font-size:26px; line-height:1.2; color:var(--k-ink); white-space:normal; overflow:visible; }
.home-todaytabs .gln-mail-from { color:var(--k-goldt); white-space:nowrap; flex:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; }

/* Capture on a phone: words, or a photo or scan that becomes a new note. */
.cap-l-phone, .cap-media { display:none; }
@media (max-width:767px) {
  .cap-l-wide { display:none; }
  .cap-l-phone { display:inline; }
  .cap-media { display:flex; gap:10px; margin:14px 0 2px; }
  .cap-media-btn { display:inline-flex; align-items:center; padding:9px 14px; border:1px solid #fff; background:transparent; font-family:'Jost',system-ui,sans-serif; font-size:15px; font-weight:400; line-height:1; color:var(--k-ink); cursor:pointer; }
}

/* Add and edit event: words only, no icons. */
.ce-q-ic, .ce-loc-ic, .ce-view-ic { display:none; }

/* Inside Today's tabs there is nothing to fold away. */
.home-todaytabs .gln-fold { display:none; }
.gln-mail-when { font-family:'Jost',system-ui,sans-serif; font-size:15px; color:var(--k-mute); white-space:nowrap; align-self:baseline; }
@media (max-width:767px) { .home-todaytabs .gln-mail-b { flex-direction:column; gap:3px; } .home-todaytabs .gln-mail-from { max-width:100%; } }

/* Phones: notifications sit right on top of the bottom bar, across the width. */
@media (max-width:767px) {
  :root[data-light] :is(.toast, .toast.toast-wide, .np-toast) { left:0; right:0; bottom:calc(62px + env(safe-area-inset-bottom)); width:100%; max-width:none; box-sizing:border-box; transform:none; background:var(--glass-face); border:0; border-top:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(28px) saturate(1.7); backdrop-filter:blur(28px) saturate(1.7); white-space:normal; animation:capfade .2s ease-out; }
  :root[data-light] .toast .toast-msg { color:var(--k-ink); }
}

.home-todaytabs .home-ltab-practices .gln-panel-foot { margin-top:28px; }
/* Phones: the Notepad sits between the two bars, so its Close and its actions show. */
@media (max-width:767px) { #notepad-panel { top:var(--navh,50px); bottom:calc(62px + env(safe-area-inset-bottom)); height:auto; } }

/* An open email: sender and title line up with the rule below; room inside the bar and under it. */
@media (min-width:768px) {
  .mail-ar.open .mail-ar-head.mailv2ar { grid-template-columns:minmax(0,1fr) auto; padding-left:0; padding-right:0; }
  .mail-ar.open .mail-ar-head.mailv2ar .mail-ar-dot { display:none; }
  .mail-ar.open .mail-ar-head.mailv2ar .mail-ar-main { grid-column:1; grid-row:1; min-width:0; }
  .mail-ar.open .mail-ar-head.mailv2ar .mail-ar-right { grid-column:2; grid-row:1; }
  .mail-ar.open .mail-ar-bar { padding-left:14px; padding-right:14px; }
}
.mail-ar.open .mail-ar-panel { padding-top:22px; }

/* The feed's Worth knowing: age, then boxed Open and Seen, all on one line. */
.feed-worth-acts { display:flex; align-items:center; gap:10px; white-space:nowrap; padding-top:2px; }
.feed-worth-when { font-family:'Jost',system-ui,sans-serif; font-size:14px; color:var(--k-mute); margin-right:4px; }
.feed-btn { display:inline-flex; align-items:center; padding:8px 14px; border:1px solid #fff; background:transparent; font-family:'Jost',system-ui,sans-serif; font-size:14px; font-weight:400; line-height:1; color:var(--k-ink); cursor:pointer; }
.feed-btn:hover { color:var(--k-goldt); border-color:var(--k-goldt); }
@media (max-width:767px) {
  .feed-worth-row { grid-template-columns:32px minmax(0,1fr) !important; }
  .feed-worth-acts { grid-column:2; flex-wrap:wrap; }
}

:root[data-light] .note-float-ins { background:var(--glass-face); border-color:var(--glass-edge); }
.nfi-btn { color:var(--k-ink); }

/* Dragging a note's heading: a gold line wherever it will land. */
.prose .head-drop { box-shadow:0 -2px 0 var(--k-gold); }
.prose .head-drop-end { box-shadow:0 2px 0 var(--k-gold); }
/* Publishing a note: the optional password. */
.sw-pass { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
.sw-pass-in { flex:1 1 200px; min-width:0; padding:9px 12px; background:var(--glass-face); border:1px solid var(--glass-edge); color:var(--k-ink); font-family:'Jost',system-ui,sans-serif; font-size:16px; }
.sw-pass-in::placeholder { color:var(--k-mute); opacity:1; }
.sw-pass-on { font-family:'Jost',system-ui,sans-serif; font-size:15px; color:var(--k-goldt); }

/* An email's action bar sticks over the white email: glass, but dark enough to read on white. */
:root[data-light] .mail-ar.open .mail-ar-bar { background:color-mix(in srgb, var(--k-bg) 72%, transparent); -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7); }

/* Mail list: the quick sort buttons always show, boxed, with the date on their left. */
.mail-ar:not(.open) .mailv2ar .mail-ar-right { display:flex; align-items:center; justify-content:flex-end; gap:14px; padding-top:0; align-self:center; }
.mail-ar:not(.open) .mail-ar-head.mailv2ar .mail-ar-time, .mail-ar:not(.open) .mail-ar-head.mailv2ar:hover .mail-ar-time { visibility:visible; font-size:14px; }
.mail-ar:not(.open) .mailv2ar .mail-ar-tri, .mail-ar:not(.open) .mail-ar-head.mailv2ar:hover .mail-ar-tri { display:flex; position:static; gap:8px; }
.mail-ar:not(.open) .mailv2ar .mrt { display:inline-flex; align-items:center; padding:8px 12px; border:1px solid #fff; font-size:14px; line-height:1; color:var(--k-ink); }
.mail-ar:not(.open) .mailv2ar .mrt:hover { color:var(--k-goldt); border-color:var(--k-goldt); }
@media (max-width:767px) {
  .mail-ar:not(.open) .mailv2ar .mail-ar-right { grid-column:2 / -1; grid-row:2; flex-wrap:wrap; justify-content:flex-start; margin-top:8px; }
}

.prc-row .prc-name .trk-clean, .trk-pname .trk-clean, .t2-streak.t2-clean { color:var(--k-ink); }

/* Messages sits straight under the email bar. */
#mail-arrival-wrap { flex-direction:column; align-items:center; }
.home-arr + .home-arr-msg { margin-top:-8px; }

/* ── Pop-ups: their backdrops were tinted with the text colour, which is now pale,
   and washed the page white. A dark frosted veil instead, over any time of day. ─ */
:root[data-light] :is(#chat .chat-bg, #capture .chat-bg, #spirit .spirit-bg, .ic-bg, .mv-bg, .fly-bg, .cvm-scrim, .dp-bg, .pal-bg, .sc-bg, .pe-bg, .cap-scrim, .rwp-scrim, .newpop-scrim, .mail-sc-bg) {
  background:rgba(6,9,18,.38); -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
}
:root[data-light] .ic-sheet { background:var(--glass-card); border-color:var(--glass-edge); -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7); }
:root[data-light] .ic-sheet .ic-btn { background:transparent; border-color:var(--glass-edge); color:var(--k-ink); }
:root[data-light] .ic-sheet .ho-chip { background:transparent; border-color:var(--glass-edge); }
.ho-chip-g, .ho-coin { font-family:'Noto Sans Symbols',serif; font-variant-emoji:text; color:var(--k-gold); }

/* ── Page titles: one size everywhere. Today's greeting is the only exception. ─ */
:is(.cx-h1, .cvx-title, .jx-title, .mp-title, .g-title, .sx-h1, .icx-h1, .mail-h1, .rw-title2, .nx-h1, .kg-h1, .tr-h1, .pane-head h1) { font-size:clamp(40px,4.4vw,56px) !important; font-weight:300 !important; line-height:1.05 !important; }

/* ── Notes: the writing sheet is glass over the sky, not a dark green tint ─── */
:root[data-light] { --note-surface:var(--glass-card); --note-edge:var(--glass-edge); }
:root[data-light] .note-body { -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }

/* ── Help lives in the menubar with everything else ───────────────────────── */
.knav-help-btn, .knav-help-m { background:none; border:0; cursor:pointer; font-family:'Jost',system-ui,sans-serif; font-size:14px; color:var(--ink-2); white-space:nowrap; display:inline-flex; align-items:center; padding:0; min-height:44px; }
.knav-help-btn:hover, .knav-help-m:hover { color:var(--k-goldt); }
.knav-c-toprow { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:4px; }
.knav-c-toprow .knav-c-notepad { width:auto; border-bottom:0; margin-top:0; }
.knav-c-help { display:none; background:none; border:0; padding:12px 0; cursor:pointer; font-family:var(--k-serif); font-weight:300; font-size:24px; color:var(--k-ink); }
.knav-c-help:hover { color:var(--k-goldt); }

/* ── Less empty space under every page: just enough to clear the capture bar ── */
.main { padding-bottom:72px; }
#pane > .kwrap { padding-bottom:0; }

/* ── iPad: the full top menu, not the phone bar. Only phones get the bottom bar. ── */
@media (min-width:768px) and (max-width:1100px) {
  .knav-bar { height:68px; }
  .knav-inner { padding:0 24px; gap:clamp(12px,2vw,24px); }
  .knav-brand .brand-word { font-size:28px; }
  .knav-prims { display:flex; gap:clamp(12px,1.8vw,22px); }
  .knav-groups { display:none; }
  .knav-right { display:flex; gap:clamp(12px,1.6vw,20px); margin-left:auto; }
  .knav-crumb, .knav-inner .mtop-back, .knav-bottom { display:none; }
  .knav-sheet { display:block; }
  .knav-find, .knav-contents { bottom:0; }
  .cap-bar { display:flex !important; bottom:22px; width:auto; }
  .main { padding-bottom:72px; }
}
@media (min-width:768px) and (max-width:900px) { .knav-groups, .knav-right { gap:12px; } }
/* Below 821px there's no room, and side by side is a desktop view anyway; Notepad stays in Menu. */
@media (min-width:768px) and (max-width:820px) { .knav-np-btn, .knav-split-btn { display:none; } }

/* ── Phones: a slimmer bottom bar and less empty space under the page ─────── */
@media (max-width:767px) {
  .knav-bottom { height:calc(62px + env(safe-area-inset-bottom)); padding:7px 24px env(safe-area-inset-bottom); align-items:start; }
  :root[data-light] .knav-b-set { width:auto; height:48px; margin-top:0; padding:0 10px; background:none; border:0; box-shadow:none; color:var(--k-ink); font-family:'Jost',system-ui,sans-serif; font-size:16px; font-weight:500; line-height:1; white-space:nowrap; }
  .knav-b-contents, .knav-b-find { padding:0; min-height:48px; align-self:start; }
  .knav-find, .knav-contents { bottom:calc(62px + env(safe-area-inset-bottom)); }
  .main { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .knav-crumb { margin-left:auto; }
  .knav-c-help { display:inline-block; }
  .knav-c-x, .knav-find-close { border:1px solid #fff; padding:7px 14px; color:var(--k-ink); line-height:1; flex:none; }
}

/* ── Staging and local only: see any time of day without waiting for it ───── */
#light-preview { position:fixed; right:16px; top:calc(var(--navh,68px) + 10px); z-index:90; display:flex; gap:2px; padding:4px; max-width:calc(100vw - 32px); flex-wrap:wrap; background:var(--glass); border:1px solid var(--glass-edge); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); font:500 16px 'Jost',sans-serif; }
#light-preview button { min-height:44px; padding:0 12px; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--k-ink); font:inherit; cursor:pointer; }
#light-preview button.on { border-bottom-color:var(--k-gold); }

/* ── §24 "Plain" mode: a calm, un-painted ivory page (the LisbonSintraTours look &
   feel) for anyone who finds the painted wash distracting. Opt-in and off by
   default - applyTheme sets html[data-plain] from life.plain. It overrides the
   whole token set to a warm light palette and hides the wash; every component
   reads the tokens, so the app follows it. (Robin, 2026-11-06: "a plainer option…
   they like the look and feel of LisbonSintraTours.com".) ── */
:root[data-plain] {
  --k-bg:#F6F2E9; --k-panel:#FFFFFF; --k-soft:#EFEADD; --k-mine:#E7E1D1;
  --k-ink:#2C2820; --k-mute:#6C6457; --k-goldt:#937528; --k-gold:#B98F3C; --k-line:#E3DDCE;
  --k-deep:#2E3B30; --k-ondeep:#F6F2E9;
  --glass:rgba(255,255,255,.6); --glass-edge:rgba(44,40,32,.15); --glass-card:rgba(255,255,255,.75); --glass-face:rgba(255,255,255,.88);
  --glass-blur:blur(10px) saturate(1.05);
  --line:rgba(44,40,32,.13); --line-2:rgba(44,40,32,.22);
  --paper:var(--k-bg); --paper-2:var(--k-soft); --card:var(--k-panel);
  --ink:var(--k-ink); --ink-2:var(--k-mute); --ink-3:#8C8475;
  --accent:#B98F3C; --accent-ink:#2C2820;
}
:root[data-plain] { background:#F6F2E9 !important; }
:root[data-plain] body, :root[data-plain] #pane { background:transparent; }
:root[data-plain] #light-layer { display:none !important; }
/* The brand mark (the Mandombe "ko" octagram) swaps to its ivory-stroke art under
   data-theme='dark' - which plain mode keeps while painting the page ivory, so the
   ivory mark vanished on the ivory ground. On the plain page use the ink art, the
   same one the daytime light uses. (Robin, 2026-11-07: "can't see the logo at the
   bottom.") */
:root[data-plain] .brand-mark { background-image:url(/brand/mandombe-ko-ink.svg); }
/* Same story for the big image marks (the one closing the Home column, the Space
   footer): the night art is ivory, so on the plain ivory page show the ink art. */
:root[data-plain] .kmark-night { display:none !important; }
:root[data-plain] .kmark-day { display:block !important; }
/* The glass "main button" hard-codes white text + a white rim for the dark themes;
   on the plain page give it dark ink and a warm rim so it reads. */
:root[data-plain] :is(.add-btn.wide, .gate2-btn, .mail-tb-write, .home-wn-do, .home-v2 .home-wn-do, .spirit-save, .dz-add, .cx-new, .kg-newgoal, .rw-save-btn, .icx-castbtn, .ic-btn-primary) { background:rgba(44,40,32,.045); border-color:rgba(44,40,32,.3); color:var(--k-ink); }
:root[data-plain] :is(.add-btn.wide, .gate2-btn, .mail-tb-write, .home-wn-do, .home-v2 .home-wn-do, .spirit-save, .dz-add, .cx-new, .kg-newgoal, .rw-save-btn, .icx-castbtn, .ic-btn-primary):hover { background:rgba(44,40,32,.09); border-color:var(--k-gold); color:var(--k-goldt); }
:root[data-plain] .mail-footact { background:rgba(44,40,32,.045); border-color:rgba(44,40,32,.3); color:var(--k-ink); }
:root[data-plain] .mail-footact:hover { background:rgba(44,40,32,.09); border-color:var(--k-gold); color:var(--k-goldt); }