/* Nova v3: tokens, base and the shell chrome (the words pill, the tab bar with the nested orb, the
   composer, the activity sheet frame, the install banner). The design contract is
   docs/designs/2026-10-01-nova-v3/README.md; class names follow its n- system (source/nova-v3.css).
   Screens live in components.css, the orb in orb.css (copied as it is), motion in motion.css.
   Static files are served with CSP style-src 'self': no inline style attributes anywhere. */

:root {
  /* grey and white (DESIGN.md 2026-09-25), faint per D13, the type scale per G5 */
  --n-paper: #f5f5f7; --n-card: #ffffff; --n-ink: #1d1d1f; --n-soft: #6e6e73; --n-faint: #8e8e93;
  --n-hair: rgba(0, 0, 0, .08); --n-hair2: rgba(0, 0, 0, .12); --n-fill: #e9e9eb; --n-dots: rgba(0, 0, 0, .085);
  --n-glass: rgba(255, 255, 255, .8); --n-dim: rgba(0, 0, 0, .18); --n-lift: rgba(0, 0, 0, .25);
  --n-brand: #e0703a; --n-brand-ink: #c9591f; --n-brand-tint: rgba(224, 112, 58, .10); --n-brand-tint2: rgba(224, 112, 58, .18);
  --n-work: #6b95e6; --n-personal: #5fb08a; --n-client: #4fb3b3; --n-ok: #2e7d3e;
  --n-tile-doc: #e8f0fe; --n-tile-doc-ink: #1a5fd0; --n-tile-pdf: #fdecec; --n-tile-pdf-ink: #b3261e;
  --n-tile-sheet: #e3f3ea; --n-tile-sheet-ink: #1f7a45; --n-tile-page: #eef1ff; --n-tile-page-ink: #3b4fd1;
  --n-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --n-ease: cubic-bezier(.16, 1, .3, 1);
  --n-fs-body: 17px; --n-fs-sec: 15px; --n-fs-meta: 13px; --n-fs-label: 12px;
  --n-r-pill: 999px; --n-r-card: 16px; --n-r-tile: 10px;
  --n-hit: 44px; --n-orb-nested: 56px; --n-orb-hero: 112px; --n-col: 480px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  /* the tab bar's offset from the bottom, and where a page with it ends (Phase 5: the nested orb sat
     over the last rows): above the bar (60 px), the orb rising 42 px over it, its halo (19 px at rest,
     26 px when it swells while she works) and 12 px of air (test/v3-shell.test.mjs) */
  --n-tabs-bottom: max(22px, calc(var(--sab) - 4px));
  --n-page-end: calc(var(--n-tabs-bottom) + 60px + 42px + 26px + 12px);
  /* the orb's own tokens, the values of public/styles.css :root; the orb never changes in dark (G2) */
  --brand: #e0703a;
  --brand-hi: color-mix(in srgb, var(--brand) 18%, #ffffff);
  --brand-mid: color-mix(in srgb, var(--brand) 58%, #ffffff);
  --brand-deep: color-mix(in srgb, var(--brand) 62%, #201409);
  --brand-ink: color-mix(in srgb, var(--brand) 78%, #201409);
  --orb-0: #e67438; --orb-42: #d66028; --orb-76: rgba(178, 70, 22, .62); --orb-92: rgba(255, 206, 160, .3);
  --orb-glow: rgba(240, 130, 55, .4); --orb-shade: rgba(112, 38, 8, .4); --orb-light: rgba(255, 222, 190, .42);
  --orb-core-a: rgba(255, 215, 154, .8); --orb-core-a2: rgba(247, 166, 102, .5); --orb-core-b: #ea6a2c; --orb-core-b2: rgba(192, 72, 20, .62);
  --orb-sheen: rgba(255, 236, 206, .5); --orb-sheen2: rgba(255, 186, 126, .3);
  --spring: cubic-bezier(.32, .72, 0, 1); --ease: cubic-bezier(.16, 1, .3, 1);
  --display: var(--n-font); --ink: var(--n-ink); --ink-soft: var(--n-soft); --ink-faint: var(--n-faint);
  color-scheme: light;
}
/* the dark pair (G2): a token swap on the same screens; the orb and the orange stay */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --n-paper: #161618; --n-card: #1f1f22; --n-ink: #f5f5f7; --n-soft: #aeaeb2; --n-faint: #8e8e93;
    --n-hair: rgba(255, 255, 255, .1); --n-hair2: rgba(255, 255, 255, .16); --n-fill: #2c2c2f; --n-dots: rgba(255, 255, 255, .09);
    --n-glass: rgba(31, 31, 34, .82); --n-dim: rgba(0, 0, 0, .5); --n-lift: rgba(0, 0, 0, .6); --n-ok: #6fd08c;
    --n-tile-doc: rgba(64, 120, 255, .18); --n-tile-doc-ink: #8ab4ff; --n-tile-pdf: rgba(255, 122, 104, .16); --n-tile-pdf-ink: #ff8a70;
    --n-tile-sheet: rgba(52, 168, 83, .18); --n-tile-sheet-ink: #6fd08c; --n-tile-page: rgba(110, 120, 255, .18); --n-tile-page-ink: #a5b0ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --n-paper: #161618; --n-card: #1f1f22; --n-ink: #f5f5f7; --n-soft: #aeaeb2; --n-faint: #8e8e93;
    --n-hair: rgba(255, 255, 255, .1); --n-hair2: rgba(255, 255, 255, .16); --n-fill: #2c2c2f; --n-dots: rgba(255, 255, 255, .09);
    --n-glass: rgba(31, 31, 34, .82); --n-dim: rgba(0, 0, 0, .5); --n-lift: rgba(0, 0, 0, .6); --n-ok: #6fd08c;
    --n-tile-doc: rgba(64, 120, 255, .18); --n-tile-doc-ink: #8ab4ff; --n-tile-pdf: rgba(255, 122, 104, .16); --n-tile-pdf-ink: #ff8a70;
    --n-tile-sheet: rgba(52, 168, 83, .18); --n-tile-sheet-ink: #6fd08c; --n-tile-page: rgba(110, 120, 255, .18); --n-tile-page-ink: #a5b0ff;
    color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--n-paper); }
body { margin: 0; min-height: 100dvh; color: var(--n-ink); font: 400 var(--n-fs-body)/1.4 var(--n-font); -webkit-font-smoothing: antialiased;
  background: radial-gradient(circle, var(--n-dots) 1px, transparent 1.25px) 0 0 / 22px 22px fixed, var(--n-paper); }
p, h1, h2, h3, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.n-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.n-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.n-tnum { font-variant-numeric: tabular-nums; }
/* visible focus on every control (D13, G7) */
:focus-visible { outline: 2px solid var(--n-brand-ink); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- the phone column: the same layout on every width, centred at 480 px (D8, G9) ---------- */
#page { position: relative; max-width: var(--n-col); margin: 0 auto; min-height: 100dvh; padding: calc(var(--sat) + 50px) 24px var(--n-page-end); }
#app[data-route="today"] #page { padding-top: var(--sat); padding-bottom: calc(var(--sab) + 190px); }
/* the thread ends 52 px above the composer's whole height (--n-composer-h, composer.mjs: the field, 58 px at
   rest and 112 px recording, plus the context line while it shows) and the keyboard's room (keyboard.mjs) */
#app[data-route="thread"] #page { padding-top: calc(var(--sat) + 100px); padding-bottom: calc(var(--sab) + 52px + var(--n-composer-h, 58px) + var(--n-kb-room, 0px));
  display: flex; flex-direction: column; justify-content: flex-end; }
#app:is([data-route="you"], [data-route="people"], [data-route="knows"]) #page { padding-top: calc(var(--sat) + 6px); }
#app[data-route="onboarding"] #page { padding: calc(var(--sat) + 12px) 24px calc(var(--sab) + 170px); }
@media (min-width: 481px) {
  #install-banner, #install-sheet { display: none !important; }
}

/* ---------- type (G5: body 17 ink, secondary 15, metadata 13 faint, labels 12 uppercase) ---------- */
.n-display { font: 600 32px/1.12 var(--n-font); letter-spacing: -.02em; text-wrap: balance; }
.n-title { font: 700 30px/1.15 var(--n-font); letter-spacing: -.015em; }
.n-lead { font-size: var(--n-fs-body); line-height: 1.45; color: var(--n-soft); }
.n-sec { font-size: var(--n-fs-sec); line-height: 1.4; color: var(--n-soft); }
.n-cap { font-size: var(--n-fs-meta); line-height: 1.35; color: var(--n-faint); }
.n-label { font: 600 var(--n-fs-label)/1 var(--n-font); letter-spacing: .07em; text-transform: uppercase; color: var(--n-faint); display: flex; align-items: center; gap: 8px; }
.n-label .n-count { font-weight: 500; }
.n-brand { color: var(--n-brand-ink); }
.n-link { color: var(--n-brand-ink); font-weight: 600; }

/* ---------- her words: the island at the top of pages and the thread, under the big orb on Today ----------
   (R4; findings 21 and 22: the island and the orb's home on the thread are in island.css) */
/* the page fades under the pill as it scrolls */
.n-fade { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--sat) + 60px); z-index: 14; pointer-events: none;
  background: linear-gradient(var(--n-paper) 55%, transparent); }
#app[data-route="thread"] .n-fade { height: calc(var(--sat) + 132px); background: linear-gradient(var(--n-paper) 75%, transparent); }
/* pages without the pill keep only the status bar's band, so a row scrolled up never sits under the
   clock (founder report 2026-10-02); 6 px of fade, never over a page's first line at the top */
#app:is([data-route="today"], [data-route="onboarding"], [data-route="you"], [data-route="people"], [data-route="knows"]) .n-fade {
  height: calc(var(--sat) + 6px); background: linear-gradient(var(--n-paper) calc(100% - 6px), transparent); }

/* ---------- the floating tab bar with the orb nested in it (R14, G6) ---------- */
#tabs { position: fixed; bottom: var(--n-tabs-bottom); left: 0; right: 0; margin-inline: auto; width: fit-content; z-index: 18;
  display: flex; align-items: center; height: 60px; padding: 0 6px; border-radius: var(--n-r-pill); background: var(--n-glass);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--n-hair); box-shadow: 0 10px 28px -14px var(--n-lift); }
.n-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 68px; height: 50px;
  border-radius: var(--n-r-pill); color: var(--n-faint); font: 500 var(--n-fs-label)/1 var(--n-font); text-align: center; }
.n-tab svg { width: 22px; height: 22px; }
.n-tab[aria-current="page"] { color: var(--n-ink); }
.n-badge { position: absolute; top: 6px; left: calc(50% + 6px); width: 7px; height: 7px; border-radius: 50%; background: var(--n-brand); }
.n-orb-slot { position: relative; width: 64px; height: 50px; flex: none; }
.n-orb-slot > #orb { position: absolute; left: 4px; top: -47px; }
.n-orb-slot #orb .dots { display: none; }
#app[data-route="today"] #tabs { padding: 0 10px; }
#app[data-route="today"] .n-tab { width: 74px; }
#app[data-route="today"] .n-orb-slot { display: none; }
#app:is([data-route="thread"], [data-route="onboarding"]) #tabs { display: none; }

/* the one orb (orb.mjs moves it: hero on Today, the tab bar on pages, the island in the thread
   (island.css), the sheet's head) */
#orb { display: block; width: var(--n-orb-nested); height: var(--n-orb-nested); border-radius: 50%; z-index: 19; filter: drop-shadow(0 8px 12px rgba(120, 50, 10, .16)); }
#orb .orb { width: 100%; height: 100%; }
.n-hero-orb { width: var(--n-orb-hero); height: var(--n-orb-hero); margin: 0 auto; }
.n-hero-orb > #orb { width: 100%; height: 100%; filter: none; }
.n-sheet-orb { width: 72px; height: 72px; margin: 0 auto; }
.n-sheet-orb > #orb { width: 72px; height: 72px; filter: none; }

/* ---------- the initial at the top right of Today opens You ---------- */
#initial { position: absolute; top: calc(var(--sat) + 4px); right: max(14px, calc(50% - var(--n-col) / 2 + 14px)); z-index: 16;
  width: var(--n-hit); height: var(--n-hit); display: grid; place-items: center; border-radius: 50%; }
#initial span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--n-fill);
  border: 1px solid var(--n-hair); font: 600 var(--n-fs-sec)/1 var(--n-font); color: var(--n-soft); }
#app:not([data-route="today"]) #initial { display: none; }

/* ---------- back links ---------- */
/* a 44 px hit area that takes the 20 px line of the mockups in the flow */
.n-back { display: inline-flex; align-items: center; gap: 2px; min-height: var(--n-hit); margin: -12px 0 -10px -6px; padding-right: 8px;
  color: var(--n-brand-ink); font: 500 var(--n-fs-body)/1 var(--n-font); }
.n-back svg { width: 20px; height: 20px; }
.n-back-fixed { position: fixed; top: max(0px, calc(var(--sat) - 4px)); left: max(20px, calc(50% - var(--n-col) / 2 + 20px)); z-index: 16; margin: 0; }

/* ---------- the ask field (Today) and the composer (the thread): one field shape ---------- */
.n-field { position: relative; display: flex; align-items: center; gap: 10px; border-radius: 28px; background: var(--n-card); border: 1px solid var(--n-hair);
  box-shadow: 0 8px 22px -14px var(--n-lift); }
.n-field textarea, .n-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; resize: none; font-size: var(--n-fs-body);
  line-height: 1.4; color: var(--n-ink); padding: 0; }
.n-field textarea::placeholder, .n-field input::placeholder { color: var(--n-faint); }
.n-field .round { width: var(--n-hit); height: var(--n-hit); display: grid; place-items: center; border-radius: 50%; color: var(--n-soft); flex: none; }
.n-field .round svg { width: 22px; height: 22px; }
.n-field .round.send { position: relative; width: 36px; height: 36px; margin: 4px; background: var(--n-ink); color: var(--n-card); }
.n-field .round.send::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.n-field .round.send svg { width: 18px; height: 18px; }
.n-field:not(.has-text) .n-send { display: none; }
.n-ask { position: fixed; z-index: 16; bottom: calc(max(22px, calc(var(--sab) - 4px)) + 72px); left: max(24px, calc(50% - var(--n-col) / 2 + 24px));
  right: max(24px, calc(50% - var(--n-col) / 2 + 24px)); min-height: 48px; padding: 0 6px 0 20px; isolation: isolate; }
#composer { position: fixed; z-index: 16; bottom: calc(max(26px, var(--sab)) + var(--n-kb, 0px)); left: max(24px, calc(50% - var(--n-col) / 2 + 24px));
  right: max(24px, calc(50% - var(--n-col) / 2 + 24px)); min-height: 58px; padding: 4px 6px 4px 20px; gap: 12px; }
#composer textarea { padding: 8px 0; max-height: 140px; }
#composer.recording { min-height: 112px; }
/* ---------- the context line (Phase 5 finding, flow-a-context-light-390.png) ----------
   Answering / About: the one line above the composer field (R2, E18), dismissed in one tap. One line
   always: a long task title ends in an ellipsis inside the text (a flex item keeps min-width auto, so
   it gets 0), and the x keeps its 44 px hit area at the line's end, on screen on every width. The line
   (18 px, 8 px above the field) and the x's hit area count in --n-composer-h (composer.mjs, finding 15),
   so the thread ends above them and the line never lies over the last row. It has the composer's own
   surface (live QA of 163d784, D2: drawn bare, a message scrolled under it read through it). */
.n-context { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 0 0 14px; border-radius: 15px; background: var(--n-card); border: 1px solid var(--n-hair);
  box-shadow: 0 8px 22px -14px var(--n-lift); font-size: var(--n-fs-meta); color: var(--n-soft); }
#composer-context-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-context b { color: var(--n-ink); font-weight: 600; }
#composer-context-x { flex: 0 0 auto; width: var(--n-hit); height: var(--n-hit); margin-block: -14px; display: grid; place-items: center; color: var(--n-faint); }
/* ---------- end of the context line ---------- */

/* ---------- talking to Nova (founder reports 2026-10-02: finding 4, finding 13; keyboard.mjs) ----------
   body.n-typing: the composer has focus; body.n-kb: a keyboard is up. --n-kb is how far the visible
   part's bottom is above the layout viewport's bottom (window.visualViewport: the keyboard less any pan,
   0 without one); the fixed composer stands on it and nothing else moves or hides it: 8 px above a
   keyboard (it covers the home indicator). The thread keeps the composer's height and the whole
   keyboard's room (--n-kb-room, which no pan changes, so the page's end never moves under iOS's own
   scroll: the flicker of 2026-10-03) under its last row, so its end is read above the composer. Both are
   written on a resize and once when the keyboard has settled, never on a pan (keyboard.mjs). Her words
   and the tab bar step aside. --n-vvtop is where
   the visible top is: on other pages (You, onboarding: iOS pans to their fields) the band and the back
   link stay on top. (Only the island at the top of pages: Today's pill under the big orb is part of it.)
   On the thread the island holds the one orb (findings 21 and 22): the words step aside, the orb stays
   at the top, beside the back link inside the band. */
body.n-typing #tabs, body.n-kb #tabs { display: none; }
body:is(.n-typing, .n-kb) #app > #island #words { display: none; }
body:is(.n-typing, .n-kb) #app > #island:not(:has(#orb)) { display: none; }
body:is(.n-typing, .n-kb) #app[data-route="thread"] > #island { top: calc(var(--sat) + 4px); padding: 6px; }
body.n-kb #toast { bottom: calc(var(--n-kb, 0px) + 80px); }
body.n-typing #app[data-route="thread"] .n-fade { height: calc(var(--sat) + 64px); }
body.n-kb #composer { bottom: calc(8px + var(--n-kb, 0px)); }
body.n-kb #app[data-route="thread"] #page { padding-bottom: calc(34px + var(--n-composer-h, 58px) + var(--n-kb-room, 0px)); }
body.n-kb .n-new { bottom: calc(20px + var(--n-composer-h, 58px) + var(--n-kb, 0px)); }
body.n-kb #app:not([data-route="thread"]) .n-fade, body.n-kb #app:not([data-route="thread"]) .n-back-fixed { translate: 0 var(--n-vvtop, 0px); }

/* ---------- the activity sheet frame (R5); its rows and its Close are in components.css ---------- */
/* The backdrop covers everything (the tab bar too) and a strip of it stays visible under the status
   bar, so a tap outside always has somewhere to land (founder report 2026-10-02: the sheet started at
   the safe area, the only backdrop left was under the status bar). On the thread the strip clears the
   pill. --sheet-drag is the swipe down (sheet.mjs). */
.n-dim { position: fixed; inset: 0; background: var(--n-dim); z-index: 25; touch-action: none; }
#sheet { position: fixed; z-index: 30; top: calc(var(--sat) + 56px); bottom: 0; left: max(0px, calc(50% - var(--n-col) / 2));
  right: max(0px, calc(50% - var(--n-col) / 2)); border-radius: 28px 28px 0 0; background: var(--n-card);
  box-shadow: 0 -12px 40px -24px var(--n-lift); padding: 0 24px calc(var(--sab) + 28px); overflow-y: auto; overscroll-behavior: contain;
  translate: 0 var(--sheet-drag, 0px); }
#app[data-route="thread"] > #sheet { top: calc(var(--sat) + 100px); }
.n-grab { display: block; position: relative; z-index: 1; width: 100%; height: var(--n-hit); margin-bottom: -14px; cursor: grab; }
.n-grab::before { content: ""; display: block; width: 36px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--n-fill); }

/* ---------- loading and failing states (G1: skeleton rows, never anything that spins) ---------- */
.n-skel { display: flex; align-items: center; gap: 14px; min-height: 50px; }
.n-skel + .n-skel { border-top: 1px solid var(--n-hair); }
.n-skel i { display: block; height: 12px; border-radius: 6px; background: var(--n-fill); position: relative; overflow: hidden; }
.n-skel i:first-child { width: 22px; } .n-skel i:last-child { flex: 1; max-width: 62%; }
.n-retry { display: block; width: 100%; min-height: var(--n-hit); padding: 12px 0; color: var(--n-soft); font-size: var(--n-fs-sec); }
.n-empty { padding: 14px 0; color: var(--n-soft); font-size: var(--n-fs-sec); }

/* ---------- the install banner (install.js, unchanged) on Today, phone widths only (G9) ---------- */
.n-install { display: flex; align-items: center; gap: 14px; min-height: 50px; border-top: 1px solid var(--n-hair); }
.n-install::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--n-faint);
  -webkit-mask: radial-gradient(circle at 50% 42%, #000 5px, transparent 5.5px); mask: radial-gradient(circle at 50% 42%, #000 5px, transparent 5.5px); }
.n-install .t { flex: 1; min-width: 0; }
.n-install b { display: block; font-size: var(--n-fs-body); font-weight: 400; }
.n-install .t span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.n-install .go { min-height: var(--n-hit); color: var(--n-brand-ink); font: 600 var(--n-fs-sec)/1 var(--n-font); }
.n-install .x { width: var(--n-hit); height: var(--n-hit); margin-inline: -14px; display: grid; place-items: center; color: var(--n-faint); }
.n-install .x svg { width: 16px; height: 16px; }
#install-sheet { position: fixed; inset: 0; z-index: 40; background: var(--n-dim); display: flex; align-items: flex-end; justify-content: center; }
#install-sheet .n-isheet { width: min(100%, var(--n-col)); padding: 0 24px calc(var(--sab) + 24px); border-radius: 28px 28px 0 0; background: var(--n-card); }
#install-sheet h3 { font: 600 var(--n-fs-body)/1.25 var(--n-font); }
#install-sheet ol { margin: 14px 0 18px; display: grid; gap: 10px; font-size: var(--n-fs-sec); color: var(--n-soft); }
#install-sheet ol svg { width: 16px; height: 16px; vertical-align: -3px; }
#install-sheet .ok { min-height: var(--n-hit); color: var(--n-brand-ink); font-weight: 600; }
#install-sheet .hint { font-size: var(--n-fs-meta); color: var(--n-faint); }
#install-sheet .hint svg { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }

/* ---------- a short line at the bottom for errors the shell itself shows ---------- */
#toast { position: fixed; z-index: 50; left: 0; right: 0; bottom: calc(var(--sab) + 96px); margin-inline: auto; width: fit-content;
  max-width: min(calc(100vw - 48px), calc(var(--n-col) - 48px)); padding: 10px 16px; border-radius: var(--n-r-pill);
  background: var(--n-ink); color: var(--n-card); font-size: var(--n-fs-sec); }