/* Atlas by esoteria. Paper and ink (2026-09-24).
   Three faces with fixed jobs: Share Tech (display), Exo 2 (reading), Share Tech Mono (wordmark, keycaps, tiny labels only).
   One ground (paper), one ink. Colour only means something:
   Grow = teal ink, Save = amber ink, Atlas working = plum ink, destructive = rose ink.
   No glow, no gradients, no neon. Hierarchy comes from size, case, spacing and ink density. */

:root{
  --paper:#F4F2EC; --paper-2:#FBFAF6; --paper-3:#ECE9E1; --well:#E6E2D8;
  --ink:#16150F; --ink-2:#4F4C44; --ink-3:#66635B; --ink-4:#827F76; --graphite:#86827A; /* the mark's inner line (E Graphite) keeps its approved value */ /* Akash 2026-09-25: faint text meets 4.5:1 on every paper (ink-3 4.64 to 5.74); ink-4 is for marks only, 3:1 on every paper */
  --hair:rgba(22,21,15,.14); --hair-2:rgba(22,21,15,.08);
  --grow:#0B6273; --grow-2:#094F5D; --grow-soft:rgba(11,98,115,.09); --grow-line:rgba(11,98,115,.28);
  --save:#915A0C; --save-2:#744809; --save-soft:rgba(145,90,12,.10); --save-line:rgba(145,90,12,.30);
  --work:#5B4B8B; --work-soft:rgba(91,75,139,.10);
  --deny:#9C2450; --deny-soft:rgba(156,36,80,.08);
  --lift:0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px var(--hair-2),0 12px 32px -18px rgba(22,21,15,.28);
  --pop:0 0 0 1px var(--hair),0 24px 60px -24px rgba(22,21,15,.38);
  --r:12px; --r2:16px; --ease:cubic-bezier(.2,.7,.2,1);
  --mono:"Share Tech Mono","Share Tech Mono Consolas","Share Tech Mono Local",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --read:"Exo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Share Tech","Exo 2",system-ui,sans-serif;
  color-scheme:light;
}
/* PLAT-09: until (or unless) the web face arrives, the mono fallback keeps Share Tech Mono's advance (0.54 em), so the lockup and keycaps
   hold their width: a local mono scaled to match (Menlo, DejaVu Sans Mono, Courier New and Liberation Mono are 0.60 em; Consolas 0.55) */
@font-face{font-family:"Share Tech Mono Consolas";src:local("Consolas");size-adjust:98.2%}
@font-face{font-family:"Share Tech Mono Local";src:local("Menlo"),local("Menlo-Regular"),local("DejaVu Sans Mono"),local("Liberation Mono"),local("Courier New");size-adjust:89.7%}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:.9375rem/1.55 var(--read);font-synthesis:style small-caps;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
input{text-overflow:ellipsis} /* a placeholder too long for its field ends in an ellipsis, never mid-word */
a{color:inherit}
b,strong{font-weight:600;color:var(--ink)}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;top:0;left:0} /* heard, not seen: the announcer (A11Y-01) and any words only a screen reader needs. Pinned to its box's corner: left at its place in a long list, it would stretch the document and let a phone scroll the top bar away */
::selection{background:var(--grow-line);color:var(--ink)} /* A11Y-20: selected text reads plainly (a 9% wash was about 1.1:1) */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px} /* whole pixels: a 1.5 px ring smears at 1x */

/* type */
.t-hero{font-family:var(--display);font-size:46px;line-height:1;letter-spacing:-.01em;font-weight:400}
.t-page{font-family:var(--display);font-size:30px;line-height:1.1;letter-spacing:-.005em;margin:0;font-weight:400}
.t-title{font-size:1.0625rem;line-height:1.3;margin:0;font-weight:600}
.t-body{font-size:.9375rem}
.t-meta{font-size:.8125rem;color:var(--ink-2)}
.t-faint{font-size:.75rem;color:var(--ink-3)}
.lbl{font-family:var(--mono);font-size:max(10px,.6875rem);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
:is(h2,h3).lbl{margin:0} /* A11Y-10: a section's label is its heading (h2 under the page's h1, h3 within a section), in the label's own face */
.num{font-variant-numeric:tabular-nums}
.fig,.t-hero,.big{font-family:var(--display);font-weight:400} /* W11: the display face has one weight; never a synthesized bold */
.grow{color:var(--grow)}.save{color:var(--save)}.work{color:var(--work)}
.i.bk{width:12px;height:12px;margin-right:4px;vertical-align:-1px;stroke-width:1.75} /* a book's mark before its figure (bookTag, A11Y-15) */
.ink2{color:var(--ink-2)}.ink3{color:var(--ink-3)}

/* icons */
.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i.s{width:16px;height:16px}.i.xs{width:13px;height:13px}.i.l{width:22px;height:22px}.i.xl{width:28px;height:28px}

/* ---------- buttons: Enamel, with one light sweep on the yes (Akash, 2026-09-25) ----------
   Every button is a solid key in paper and ink: a fine inset top highlight, a contact shadow and a soft ambient one. It lifts 1 px
   on hover and sinks on press; the focus ring is 2 px, 2 px out. Exo 2 at 500. Disabled is a quiet grey that still reads (never an
   opacity fade). Only the yes (Grow, Save) carries the sweep: one band of light, once, on hover or keyboard focus; no glow under it.
   Crisp at every zoom: whole-pixel geometry, shadows and lift; no transform or will-change at rest (either rasterises the label).
   Each kind sets the --btn-* slots below; one block applies them, so a context changes a kind by setting slots, never by
   out-specifying the states. */
:root{
  --btn-h:38px; --btn-h-sm:32px; --btn-r:10px; --btn-r-sm:9px;
  --btn-lift:translateY(-1px); --btn-dur:.18s; --btn-dur-press:.06s; --btn-sweep:.72s;
  /* the enamel's light, shared by every filled key */
  --btn-hi:inset 0 1px 0 rgba(255,255,255,.16); --btn-hi-h:inset 0 1px 0 rgba(255,255,255,.22); --btn-hi-x:inset 0 1px 0 rgba(255,255,255,.10);
  --btn-lo:inset 0 -1px 0 rgba(0,0,0,.14); --btn-lo-0:inset 0 -1px 0 rgba(0,0,0,0);
  --btn-contact:0 1px 2px rgba(22,21,15,.20); --btn-contact-h:0 2px 3px rgba(22,21,15,.16); --btn-contact-a:0 1px 1px rgba(22,21,15,.14);
  --btn-ambient:0 3px 8px -3px rgba(22,21,15,.22); --btn-ambient-h:0 8px 18px -8px rgba(22,21,15,.34); --btn-ambient-0:0 0 0 rgba(22,21,15,0);
  --btn-sink:inset 0 2px 2px rgba(0,0,0,.28);
  /* the fills and their 1 px edges (the fill mixed 72% with black) */
  --ink-edge:#000000; --ink-press:#0B0A07; --grow-edge:#084753; --save-edge:#684109;
  /* the paper key (quiet, the hotkey pill, a chosen segment); its 1 px contact edge is a token, so more contrast can raise it (A11Y5-07) */
  --btn-edge:rgba(22,21,15,.14); --btn-edge-h:rgba(22,21,15,.20); --btn-edge-a:rgba(22,21,15,.18);
  --btn-paper:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(22,21,15,.04),0 0 0 1px var(--btn-edge),0 1px 2px rgba(22,21,15,.07),0 3px 8px -4px rgba(22,21,15,.10);
  --btn-paper-h:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(22,21,15,.04),0 0 0 1px var(--btn-edge-h),0 2px 3px rgba(22,21,15,.08),0 8px 16px -8px rgba(22,21,15,.18);
  --btn-paper-a:inset 0 1px 2px rgba(22,21,15,.12),inset 0 -1px 0 rgba(22,21,15,0),0 0 0 1px var(--btn-edge-a),0 0 0 rgba(22,21,15,0),0 0 0 rgba(22,21,15,0);
  --btn-paper-press:#EFECE5;
  /* a flat key (ghost, icon, deny): no surface until you touch it */
  --btn-tint-h:rgba(22,21,15,.05); --btn-tint-a:rgba(22,21,15,.09); --btn-flat-a:inset 0 1px 2px rgba(22,21,15,.10);
  --deny-tint-h:rgba(156,36,80,.07); --deny-tint-a:rgba(156,36,80,.12); --deny-flat-a:inset 0 1px 2px rgba(156,36,80,.14);
  /* disabled: grey, flat, still 4.5:1 (ink-3 on well 4.64, on paper 5.36) */
  --btn-off-bg:var(--well); --btn-off-fg:var(--ink-3); --btn-off-sh:inset 0 0 0 1px rgba(22,21,15,.06);
}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 16px;border-radius:var(--btn-r);
  font-family:var(--read);font-size:.875rem;line-height:20px;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  transition:transform var(--btn-dur) var(--ease),box-shadow var(--btn-dur) var(--ease),background-color var(--btn-dur) var(--ease),color var(--btn-dur) var(--ease)}
.btn.sm{height:var(--btn-h-sm);padding:0 12px;border-radius:var(--btn-r-sm);font-size:.8125rem;line-height:18px;gap:7px}
.btn .i.xs{width:14px;height:14px} /* 14 px in a 32 or 38 px key sits on whole pixels (13 px sat at 9.5) */
.btn .i,.ib .i,.kc .i{stroke-width:1.25px}.btn .i *,.ib .i *{vector-effect:non-scaling-stroke} /* one 1.25 px stem at every icon size, matched to the label's stroke */

/* the kinds fill the slots */
.btn.primary,.btn.yes{--f:var(--ink);--f-a:var(--ink-press);--edge:var(--ink-edge);--fg:var(--paper-2);--ring:var(--ink);
  --btn-bg:var(--f);--btn-fg:var(--fg);--btn-bg-h:var(--f);--btn-fg-h:var(--fg);--btn-bg-a:var(--f-a);--btn-fg-a:var(--fg);--btn-y-h:var(--btn-lift);
  --btn-sh:var(--btn-hi),var(--btn-lo),0 0 0 1px var(--edge),var(--btn-contact),var(--btn-ambient);
  --btn-sh-h:var(--btn-hi-h),var(--btn-lo),0 0 0 1px var(--edge),var(--btn-contact-h),var(--btn-ambient-h);
  --btn-sh-a:var(--btn-sink),var(--btn-lo-0),0 0 0 1px var(--edge),var(--btn-contact-a),var(--btn-ambient-0)}
.btn.yes{--f:var(--grow);--f-a:var(--grow-2);--edge:var(--grow-edge);--fg:#fff;--ring:var(--grow)}
.btn.yes.save{--f:var(--save);--f-a:var(--save-2);--edge:var(--save-edge);--ring:var(--save)}
.btn.yes.nil{--f:var(--ink);--f-a:var(--ink-press);--edge:var(--ink-edge);--fg:var(--paper-2);--ring:var(--ink)} /* AES-19: a yes whose choice counts nothing ("Let it lapse") wears ink, not a book */
.btn.quiet{--btn-bg:var(--paper-2);--btn-fg:var(--ink-2);--btn-sh:var(--btn-paper);--btn-bg-h:#fff;--btn-fg-h:var(--ink);--btn-sh-h:var(--btn-paper-h);
  --btn-bg-a:var(--btn-paper-press);--btn-fg-a:var(--ink);--btn-sh-a:var(--btn-paper-a);--btn-y-h:var(--btn-lift);--ring:var(--ink)}
.btn.quiet.strong{--btn-fg:var(--ink);--btn-sh:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(22,21,15,.04),0 0 0 1px var(--ink),0 1px 2px rgba(22,21,15,.07),0 3px 8px -4px rgba(22,21,15,.10);
  --btn-sh-h:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(22,21,15,.04),0 0 0 1px var(--ink),0 2px 3px rgba(22,21,15,.08),0 8px 16px -8px rgba(22,21,15,.18)} /* the one required connect on the first run: an ink edge */
.btn.ghost{height:32px;padding:0 10px;--btn-bg:transparent;--btn-fg:var(--ink-2);--btn-sh:none;--btn-bg-h:var(--btn-tint-h);--btn-fg-h:var(--ink);--btn-sh-h:none;
  --btn-bg-a:var(--btn-tint-a);--btn-fg-a:var(--ink);--btn-sh-a:var(--btn-flat-a);--btn-y-h:none;--ring:var(--ink)}
.btn.deny{--btn-bg:transparent;--btn-fg:var(--deny);--btn-sh:none;--btn-bg-h:var(--deny-tint-h);--btn-fg-h:var(--deny);--btn-sh-h:none;
  --btn-bg-a:var(--deny-tint-a);--btn-fg-a:var(--deny);--btn-sh-a:var(--deny-flat-a);--btn-y-h:none;--ring:var(--deny)} /* destructive stays rose on hover and press, whatever else it is */
.btn.ghost.sm{height:var(--btn-h-sm);padding:0 12px}

/* one block applies the slots, in every state */
.btn:is(.primary,.yes,.quiet,.ghost,.deny){background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-sh)}
@media (hover:hover){.btn:is(.primary,.yes,.quiet,.ghost,.deny):not(:disabled,[aria-disabled="true"]):hover{background:var(--btn-bg-h);color:var(--btn-fg-h);box-shadow:var(--btn-sh-h);transform:var(--btn-y-h)}}
.btn:is(.primary,.yes,.quiet,.ghost,.deny):not(:disabled,[aria-disabled="true"]):active{background:var(--btn-bg-a);color:var(--btn-fg-a);box-shadow:var(--btn-sh-a);transform:none;transition-duration:var(--btn-dur-press)}
.btn:is(.primary,.yes,.quiet,.ghost,.deny):is(:disabled,[aria-disabled="true"]){background:var(--btn-off-bg);color:var(--btn-off-fg);box-shadow:var(--btn-off-sh);cursor:not-allowed;transform:none}
.btn:is(.quiet,.ghost,.deny):is(:disabled,[aria-disabled="true"]){background:transparent;box-shadow:inset 0 0 0 1px var(--hair-2)}.btn:is(.ghost,.deny):is(:disabled,[aria-disabled="true"]){box-shadow:none}
.btn:focus-visible,.ib:focus-visible{outline:2px solid var(--ring,var(--ink));outline-offset:2px}
:is(.list,.its,.mon) :is(.btn,.ib,.sw,.ick):focus-visible{outline-offset:2px} /* A11Y-17: a filled control (a switch that is on, a checked box) takes its ring outside, never ink on ink */
/* a key with no kind (the toast's Undo) keeps its context's look and tints with its own ink: works on paper and on the ink toast alike */
@media (hover:hover){.btn:not(.primary,.yes,.quiet,.ghost,.deny):not(:disabled):hover{background:color-mix(in srgb,currentColor 10%,transparent)}}
.btn:not(.primary,.yes,.quiet,.ghost,.deny):not(:disabled):active{background:color-mix(in srgb,currentColor 16%,transparent);transition-duration:var(--btn-dur-press)}
.btn:not(.primary,.yes,.quiet,.ghost,.deny):focus-visible{outline-color:currentColor} /* a key in a clipped list keeps its ring outside: the row's padding holds it */

/* the sweep: the yes only. It paints between the fill and the label (the key is its own stacking context), crosses once in
   0.72 s on hover or keyboard focus, and is gone at rest (no pseudo-element, no transform until you touch it). */
.btn.yes{isolation:isolate;overflow:hidden}
.btn.yes::before{position:absolute;z-index:-1;top:-2px;bottom:-2px;left:0;width:42%;pointer-events:none; /* drawn only while content is set: at rest there is no pseudo-element */
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.24) 50%,rgba(255,255,255,0));opacity:0;
  animation:btn-sweep var(--btn-sweep) cubic-bezier(.3,.55,.2,1) .04s 1 backwards}
.btn.yes:not(:disabled,[aria-disabled="true"]):focus-visible::before{content:""}
@media (hover:hover){.btn.yes:not(:disabled,[aria-disabled="true"]):hover::before{content:""}} /* TCH-04: a tap never leaves the sweep (or any hover) stuck on a touch screen */
.btn.yes.swept::before{content:none!important} /* AES-07: a repainted copy of a key that already swept under the same touch (ui.js) */
@keyframes btn-sweep{from{opacity:1;transform:translateX(-120%) skewX(-20deg)}to{opacity:1;transform:translateX(270%) skewX(-20deg)}}

/* the yes, pressed (ui.js pressYes): a spinner while it goes, then its receipt word, riding a copy fixed over the key */
.btn.is-sending{cursor:progress}
.btn.is-sending .spin{animation:btn-spin .9s linear infinite;transform-origin:50% 50%}
.btn.is-sent{--btn-sh:var(--btn-hi-x),var(--btn-lo-0),0 0 0 1px var(--edge),var(--btn-contact-a),var(--btn-ambient-0)} /* settled: the key sits flat on the page */
.btn.is-sent .draw path{stroke-dasharray:1 2;stroke-dashoffset:1;animation:btn-draw .3s var(--ease) .04s both}
.btn.is-gone{opacity:0;transition:opacity .16s var(--ease)}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@keyframes btn-draw{to{stroke-dashoffset:0}}

/* icon keys: flat until touched, like ghost */
.ib{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--ink-2);transition:background-color var(--btn-dur) var(--ease),color var(--btn-dur) var(--ease),box-shadow var(--btn-dur) var(--ease)}
@media (hover:hover){.ib:not(:disabled):hover{background:var(--btn-tint-h);color:var(--ink)}}
.ib:not(:disabled):active{background:var(--btn-tint-a);color:var(--ink);box-shadow:var(--btn-flat-a);transition-duration:var(--btn-dur-press)}
.ib:disabled{color:var(--ink-3);cursor:not-allowed}

/* the keycap: a solid tile. Share Tech Mono, never under 10 px (it smears below; see DECISIONS). Whole-pixel boxes, so the glyph sits on a pixel. */
.kc{font-family:var(--mono);display:inline-grid;place-items:center;height:22px;min-width:22px;padding:0 6px;border-radius:6px;font-size:max(10px,.6875rem);line-height:12px;color:var(--ink-2);background:var(--paper-2);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px var(--hair),0 1px 0 var(--hair);white-space:nowrap;-webkit-font-smoothing:antialiased}
.kc .kf{position:relative;display:inline-flex;align-items:center;gap:.08em}.kc .km{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* T1-15: the modifier keys drawn at a letter's height (kcFace) */
.btn .kc{height:18px;min-width:18px;padding:2px 5px 0;margin-left:2px;border-radius:5px;font-size:max(10px,.6875rem);line-height:12px;color:inherit;background:color-mix(in srgb,currentColor 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 24%,transparent)} /* a tile of the key's own ink, so it reads on paper and on the ink toast alike */
.btn:is(.primary,.yes) .kc{color:var(--fg);background:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 rgba(0,0,0,.16)} /* white on the tile: 4.67:1 on Save, 5.53 on Grow */
.btn:is(:disabled,[aria-disabled="true"]) .kc{color:inherit;background:transparent;box-shadow:inset 0 0 0 1px var(--hair)}

@media (prefers-reduced-motion:reduce){
  .btn,.ib{transition:none}
  @media (hover:hover){.btn:is(.primary,.yes,.quiet,.ghost,.deny):not(:disabled,[aria-disabled="true"]):hover{transform:none}}
  .btn.yes::before{display:none!important;animation:none!important}
  .btn.is-sending .spin,.btn.is-sent .draw path{animation:none;stroke-dashoffset:0}
  .btn.is-gone{transition:none}
}

/* surfaces */
.card{background:var(--paper-2);border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.well{background:var(--paper-3);border-radius:var(--r)}
.rule{height:1px;background:var(--hair-2);border:0;margin:0}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;font-size:.75rem;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair)}
.chip.grow{color:var(--grow);box-shadow:inset 0 0 0 1px var(--grow-line)}
.chip.save{color:var(--save);box-shadow:inset 0 0 0 1px var(--save-line)}
.chip.ink{color:var(--ink);background:var(--paper-2);box-shadow:inset 0 0 0 1.5px var(--ink)} /* W16: solid ink is the primary button's; a status chip is an ink outline */
.chip.work{color:var(--work);box-shadow:inset 0 0 0 1px rgba(91,75,139,.3)}

/* the D9 diamond, the brand's one motif: section marks and the waiting state (never a glowing dot) */
.dia{display:inline-block;width:7px;height:7px;transform:rotate(45deg);box-shadow:inset 0 0 0 1.2px currentColor;flex:none}
.dia.on{background:currentColor}

/* "working" text: flat plum ink that breathes, only while Atlas works. No gradient. */
.working{color:var(--work);animation:breathe 2.4s var(--ease) infinite}
@keyframes breathe{50%{opacity:.9}} /* W23, V3-04: plum stays at 4.66:1 or better at the trough, even on the well (4.2 at .8) */
.al .tx span.working,.te .tx span.working{color:var(--work)} /* a faint line that breathes is plum, never ink-3 (3.84 at the trough) */
@media (prefers-reduced-motion:reduce){.working{animation:none}}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);height:100vh;height:100dvh}
.app.mini{grid-template-columns:64px minmax(0,1fr)}
.rail{display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-right:1px solid var(--hair-2);min-width:0;overflow:auto}
.rail>*{flex-shrink:0} /* L9: on a short window the rail scrolls; its search field and rows keep their height */
.brand{display:flex;align-items:center;gap:10px;height:40px;padding:0 8px;margin-bottom:10px}
.brandhit{display:flex;align-items:center;min-width:0}
.brand .ib{margin-left:auto;width:28px;height:28px}#menuX{display:none}
/* the lockup: one baseline for the mark's tip, the letters, the dot and the byline */
.lockup{display:inline-flex;align-items:baseline;gap:.34em;font-family:var(--mono);line-height:1;white-space:nowrap}
.lockup svg{height:.86em;width:auto;flex:none;display:block}
.lockup .lw{letter-spacing:.14em}.lockup .ls{letter-spacing:0}
.lockup .ld{display:inline-block;width:.17em;height:.17em;border-radius:50%;margin-left:.07em;font-style:normal}
.lockup .lb2{font-size:max(10px,.3em);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-left:.5em}
.nv{display:flex;align-items:center;gap:12px;height:36px;padding:0 10px;border-radius:9px;color:var(--ink-2);font-size:.875rem;white-space:nowrap;text-align:left;width:100%}
@media (hover:hover){.nv:hover{background:var(--paper-3);color:var(--ink)}}
.nv.on{color:var(--ink);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.nv .l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nv .n{font-size:max(10px,.6875rem);color:var(--ink-3)}
.nv .n.need{color:var(--paper-2);background:var(--ink);padding:0 6px;height:18px;line-height:18px;border-radius:5px}
.grp{padding:16px 10px 6px}
.sess{display:flex;flex-direction:column;gap:1px}
.ss{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:8px;font-size:.8125rem;color:var(--ink-2);width:100%;text-align:left}
@media (hover:hover){.ss:hover{background:var(--paper-3);color:var(--ink)}}.ss.on{background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2)}
.ss .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss.need .t{color:var(--ink)}
.ss .ssm{flex:none;margin-left:-4px;stroke-width:2.2}.ss.need .ssm{width:12px;height:12px;color:var(--ink)} /* its state as a mark (A11Y-16) */
.rail .foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:10px}
.me{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;text-align:left}
@media (hover:hover){.me:hover{background:var(--paper-3)}}
.av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper-3);font-size:max(10px,.6875rem);color:var(--ink-2);flex:none;box-shadow:inset 0 0 0 1px var(--hair-2)}
.av.lg{width:56px;height:56px;font-size:1.125rem}
.me .who{display:flex;flex-direction:column;line-height:1.2;min-width:0}.me .who b{font-size:.8125rem;font-weight:500}.me .who span{font-size:max(10px,.6875rem);color:var(--ink-3)}
.me{min-width:0}.me .who>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* QC-03: a long name ends in an ellipsis on one line (Settings, Account shows it whole) */
/* the collapsed rail is a desktop idea; on a phone the drawer always shows labels */
@media (min-width:761px){
.app.mini .rail .l,.app.mini .rail .grp,.app.mini .sess,.app.mini .brand .lw,.app.mini .brand .lb2,.app.mini .me .who{display:none}
.app.mini .rail .n.need{position:absolute;top:1px;left:calc(50% + 9px);margin:0;font-size:max(10px,.625rem);height:16px;line-height:16px;padding:0 4px;box-shadow:0 0 0 2px var(--paper)}.app.mini .nv{position:relative}
.app.mini .rail .n:not(.need){display:block;position:absolute;top:4px;left:calc(50% + 10px);width:6px;height:6px;padding:0;border-radius:50%;background:var(--ink-3);font-size:0;overflow:hidden;box-shadow:0 0 0 2px var(--paper)}
.app.mini .rail .n.kc{display:none}
.app.mini .nv,.app.mini .me{justify-content:center;padding:0}
.app.mini .brand{justify-content:center;flex-direction:column;height:auto;gap:8px}.app.mini .brand .ib{margin:0}
}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;container:main/inline-size} /* the page column: layouts that need room ask it, not the window (the docked tour, the collapsed rail) */
.bar{display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-bottom:1px solid var(--hair-2);flex:none}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;flex:0 999 auto;font-size:.8125rem;color:var(--ink-3)} /* the crumbs yield first when the bar is tight (the page title repeats them) */
.crumbs .bk{flex:none}
.crumbs button{color:var(--ink-3)}@media (hover:hover){.crumbs button:hover{color:var(--ink)}}
.crumbs .here{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs .sep{color:var(--ink-4)}
.menu{display:none}
.hk{margin-left:auto;display:flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 8px;border-radius:10px;font-size:.75rem;color:var(--ink-3);box-shadow:var(--btn-paper);background:var(--paper-2);max-width:380px;min-width:0;flex:0 1 auto;overflow:hidden;--ring:var(--ink);
  transition:transform var(--btn-dur) var(--ease),box-shadow var(--btn-dur) var(--ease),background-color var(--btn-dur) var(--ease)} /* the pill clips its own words inside its border; it is a paper key (Enamel) */
.hk .keys{display:inline-flex;gap:3px;flex:none;white-space:nowrap}
@media (hover:hover){.hk:hover{background:#fff;box-shadow:var(--btn-paper-h);color:var(--ink-2);transform:var(--btn-lift)}}
.hk:active{background:var(--btn-paper-press);box-shadow:var(--btn-paper-a);transform:none;transition-duration:var(--btn-dur-press)}
.hk .say{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}.hk .say.tight{display:none}
.hk.nudge{animation:nudge 1.1s var(--ease)}
@keyframes nudge{30%{transform:translateY(-2px)}} /* whole pixels; the key keeps its own edge */
.hk .say.swap{animation:swap .6s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hk.nudge,.hk .say.swap{animation:none}.hk{transition:none;transform:none}@media (hover:hover){.hk:hover{transition:none;transform:none}}}
.val{display:flex;align-items:center;gap:14px;height:34px;padding:0 12px;border-radius:10px;font-size:.75rem;color:var(--ink-3);white-space:nowrap}
@media (hover:hover){.val:hover{background:var(--paper-3)}}
.val b{font-size:.9375rem;margin-left:4px}
.view{flex:1;min-height:0;overflow:auto;scroll-behavior:smooth}
.pg{max-width:1080px;margin:0 auto;padding:28px 28px 96px;display:flex;flex-direction:column;gap:26px}
.pg.narrow{max-width:760px}
.pgh{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pgh .t{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.pgh p{margin:0;color:var(--ink-3);font-size:.8125rem}
.sec{display:flex;flex-direction:column;gap:12px}
.tpanel{display:flex;flex-direction:column;gap:inherit} /* A11Y6-08: a tab's whole view, wrapped as its panel, spaced as the page is */
.sech{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px} /* QC-02: what sits at its right (Home's card pips on a touch tablet) drops under the label before it runs off the page */
.sech .lbl{display:flex;align-items:center;gap:8px}
.sech .more{margin-left:auto}

/* the Atlas line: every page opens with what Atlas noticed there, one sentence, one move */
.al{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r2);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.al canvas{width:30px;height:30px;flex:none}
.al .tx{flex:1;min-width:0;font-size:.875rem;color:var(--ink)}
.al .tx span{color:var(--ink-3)}
.al .acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* rows and lists */
.list{display:flex;flex-direction:column;flex-shrink:0;background:var(--paper-2);border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--hair-2);overflow:hidden} /* QV6-01: a list is never squeezed below its rows (it clips them for its corners): the page around it scrolls instead */
.list>*+*{border-top:1px solid var(--hair-2)}
.list :focus-visible,.its :focus-visible,.mon :focus-visible{outline-offset:-2px} /* W06: inside a clipped list the ring is drawn inset, so it is never cut */
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;width:100%;text-align:left}
@media (hover:hover){button.row:hover,.row.hov:hover{background:var(--paper-3)}}
@media (hover:hover){:root[data-kbd] :is(button.row,.row.hov):hover:not(:focus-visible){background:transparent}} /* QC-02: keys drive the list; the resting mouse doesn't mark a second row */
.row .tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.row button.tt{text-align:left;align-items:stretch} /* MX-15: a row whose words are a link (a queued yes) reads left like every row */
.row .tt b{font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tt span{font-size:.75rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rt{display:flex;align-items:center;gap:12px;font-size:.8125rem;color:var(--ink-3);white-space:nowrap}
.fig{font-size:.9375rem;text-align:right}.fig.grow{color:var(--grow)}.fig.save{color:var(--save)}
.fig small{display:block;font-size:max(10px,.625rem);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--paper-3);color:var(--ink-2);flex:none}
.mark.grow{background:var(--grow-soft);color:var(--grow)}.mark.save{background:var(--save-soft);color:var(--save)}.mark.work{background:var(--work-soft);color:var(--work)}
.mark.lg{width:48px;height:48px;border-radius:14px}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;text-align:center;color:var(--ink-3)}
.empty .i{width:28px;height:28px;color:var(--ink-4)}
.empty .btn .i{width:16px;height:16px;color:inherit} /* W26: a button's icon in an empty state stays button size */
.empty b{color:var(--ink);font-size:.9375rem}
.empty>*{max-width:100%;overflow-wrap:anywhere} /* V6-12: an empty state that echoes what you typed (a long paste) breaks it inside the page, never wider */

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:11px;background:var(--paper-3);align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none} /* W03, V15: a strip that does not fit wraps to a second row; no tab is ever cut */
.tabs::-webkit-scrollbar{display:none}
.tabs button{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:8px;font-size:.8125rem;color:var(--ink-3);white-space:nowrap;transition:background-color var(--btn-dur) var(--ease),color var(--btn-dur) var(--ease),box-shadow var(--btn-dur) var(--ease)}
@media (hover:hover){.tabs button:hover{color:var(--ink)}}
.tabs button:not(.on):active,.seg2 button:not([aria-checked="true"]):active,.wtabs button:not(.on):active{background:var(--btn-tint-h);box-shadow:var(--btn-flat-a);transition-duration:var(--btn-dur-press)}
.tabs button.on{background:var(--paper-2);color:var(--ink);box-shadow:var(--seg-on)} /* the chosen segment: a raised paper key (Enamel) */
:root{--seg-on:inset 0 1px 0 #fff,0 0 0 1px var(--ink-4),0 1px 2px rgba(22,21,15,.10)} /* A11Y-18: the chosen segment's edge is a mark (ink-4, 3:1), so the choice never rests on a 10% hairline */
.tabs button .c{font-size:max(10px,.6875rem);color:var(--ink-3)}

/* the ask */
.ask{display:flex;align-items:center;gap:8px;min-height:58px;padding:8px 8px 8px 18px;border-radius:16px;background:var(--paper-2);box-shadow:var(--lift);width:100%}
.ask input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:1rem}
::placeholder{color:var(--ink-3);opacity:1} /* QC-A11Y6-14: every field, not only the ask: the browser grey is 4.41:1 on paper */
.ask.listen input::placeholder{color:var(--work)}
.ask .go{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--paper-3);color:var(--ink-3);transition:transform var(--btn-dur) var(--ease),box-shadow var(--btn-dur) var(--ease),background-color var(--btn-dur) var(--ease)}
.ask .go:active{box-shadow:var(--btn-flat-a);transition-duration:var(--btn-dur-press)}
.ask .go.on{background:var(--ink);color:var(--paper-2);box-shadow:var(--btn-hi),var(--btn-lo),0 0 0 1px var(--ink-edge),var(--btn-contact),var(--btn-ambient)} /* typed: the send key is the view's ink primary, in enamel */
@media (hover:hover){.ask .go.on:hover{box-shadow:var(--btn-hi-h),var(--btn-lo),0 0 0 1px var(--ink-edge),var(--btn-contact-h),var(--btn-ambient-h);transform:var(--btn-lift)}}
.ask .go.on:active{background:var(--ink-press);box-shadow:var(--btn-sink),var(--btn-lo-0),0 0 0 1px var(--ink-edge),var(--btn-contact-a),var(--btn-ambient-0);transform:none}
@media (prefers-reduced-motion:reduce){.ask .go{transition:none}@media (hover:hover){.ask .go.on:hover{transform:none}}}

/* grids */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

/* tiles */
.tile{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r2);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair-2);text-align:left;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
@media (hover:hover){button.tile:hover,.tile.hov:hover{box-shadow:inset 0 0 0 1px var(--ink-4);transform:translateY(-2px)}}
.tile .top{display:flex;align-items:center;gap:10px}
.tile p{margin:0;font-size:.8125rem;color:var(--ink-2)}
.tile .ft{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.75rem;color:var(--ink-3)} /* its keys wrap before the tile outgrows the page (V5-04) */

/* overlays */
.scrim{position:fixed;inset:0;background:rgba(22,21,15,.18);z-index:60}
.scrim{animation:scrimin .18s var(--ease)} /* HK-10: the scrim fades in on the capsule's own curve, so the page never dims a frame before the capsule shows */
@keyframes scrimin{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.scrim{animation:none}}
.capsule{position:fixed;left:0;right:0;margin-inline:auto;top:calc(72px + var(--offh, 0px));width:min(560px,calc(100vw - 32px));z-index:70;animation:capin .18s var(--ease)} /* centred by layout, never translateX(-50%): a half-pixel offset softens every label in it */
/* W29: with the rail showing, layers centre over the main column, never across the rail */
@media (min-width:761px){
  body:has(.app:not(.bare):not(.mini)) .capsule{left:232px;width:min(560px,calc(100vw - 232px - 32px))}
  body:has(.app.mini:not(.bare)) .capsule{left:64px;width:min(560px,calc(100vw - 64px - 32px))}
}
@keyframes capin{from{opacity:0;transform:translateY(-8px)}}
.capsule .cb{display:flex;align-items:center;gap:12px;height:58px;padding:0 16px 0 12px;border-radius:16px;background:var(--paper-2);box-shadow:var(--pop)}
.capsule .cb canvas{width:34px;height:34px}
.capsule .cb input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:.9375rem}
.capsule .opts{margin-top:8px;padding:6px;border-radius:16px;background:var(--paper-2);box-shadow:var(--pop);display:flex;flex-direction:column;gap:2px}
/* RZ-05: a short window (or a high zoom) never pushes the capsule or ⌘K past the window's foot: the field stays, the list scrolls */
.capsule{display:flex;flex-direction:column;max-height:calc(100dvh - 72px - var(--offh, 0px) - 12px)}
.capsule .cb{flex:none}
.capsule .opts{min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding:6px}
.capsule .opts>*{flex:none}
.capsule .opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:10px;text-align:left;font-size:.875rem;transition:background-color var(--btn-dur) var(--ease),box-shadow var(--btn-dur) var(--ease)}
.capsule .opt.on,.capsule .opt:focus-visible{background:#fff;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(22,21,15,.10),0 1px 2px rgba(22,21,15,.08)}@media (hover:hover){.capsule .opt:hover{background:#fff;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(22,21,15,.10),0 1px 2px rgba(22,21,15,.08)}} /* the lit option is a raised paper key (Enamel) */
.capsule .opt[aria-disabled="true"]{color:var(--btn-off-fg);cursor:not-allowed;background:none;box-shadow:none}.capsule .opt[aria-disabled="true"] .kc{visibility:hidden} /* K1-14: offline, no number picks it */
.capsule .opt:active{background:var(--btn-paper-press);box-shadow:var(--btn-paper-a);transition-duration:var(--btn-dur-press)}
.capsule .opt:focus-visible{outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.capsule .opt{transition:none}}
.capsule .opt .l{flex:1}
.capsule .opt .y{font-size:max(10px,.6875rem);letter-spacing:.12em;text-transform:uppercase;color:var(--grow)}
.capsule .opt .y.save{color:var(--save)} /* a Save yes wears amber, like its button */
.capsule .cf{display:flex;justify-content:space-between;gap:10px;padding:8px 10px 4px;font-size:max(10px,.6875rem);color:var(--ink-3)}
/* V4-10: on a phone the foot's two hints stack, each phrase whole (never "in / every app" beside the sentence); on a touch screen the arrow-key hint goes */
@media (max-width:480px){ .capsule .cf{flex-direction:column;align-items:flex-start;gap:2px} .capsule .cf span{text-wrap:balance} .capsule .cf span+span{white-space:nowrap} }
@media (hover:none) and (pointer:coarse){ .capsule .cf span+span{display:none} }
.capsule .cab{padding:6px 10px 4px;font-size:.75rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* what the capsule is about, on its own line: the field's hint stays whole at every width */
.capsule .cab b{color:var(--ink-2);font-weight:600}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--paper-2);box-shadow:var(--pop);z-index:65;display:flex;flex-direction:column;animation:drin .2s var(--ease)}
@keyframes drin{from{transform:translateX(24px);opacity:0}}
.drawer .dh{display:flex;align-items:center;gap:10px;height:56px;padding:0 12px 0 20px;border-bottom:1px solid var(--hair-2)}
.drawer .db{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
/* Toasts (FE-SPEC 3): a lane of their own at the foot of .main, in the page's flow under the view (ui.js placeFrame), so the view
   ends above them and nothing on the page can lie under a toast, at any width. Side by side from the column's right edge (row-reverse over a DOM that
   is oldest first, wrapping upward), so a new note joins at the inner end and never moves a running Undo; a phone stacks them. ui.js sets the lane's side padding to the page's
   column (a session's work pane; full width on a phone) and shows it (.on) only while a toast is in sight. While a layer (the capsule,
   ⌘K, a drawer) or the phone's menu is open, the lane stays with the page under its scrim (.dim: it can't be pressed there, so the ⌘Z
   key is not shown and the seconds wait); a drawer that leaves the stack no room keeps it out of sight until it closes. On a takeover
   the lane never reflows the screen: a note floats over it (.float). The body-level rules are the first frame's fallback, before the shell exists. */
#toasts{position:fixed;right:16px;bottom:12px;z-index:80;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px;pointer-events:none;max-width:min(460px,calc(100vw - 32px))}
.main>#toasts{position:static;z-index:auto;flex:none;max-width:none;padding-top:10px;padding-bottom:12px;border-top:1px solid var(--hair-2); /* the hairline is where the page ends */
  flex-flow:row-reverse wrap-reverse;justify-content:flex-start;align-items:center} /* side by side from the column's right edge, oldest outermost, so the lane stays one row where it can */
.main>#toasts:not(.on){display:none}
.main>#toasts>.toast{position:relative;z-index:66}
.main>#toasts.dim>.toast{z-index:auto}
#toasts.dim .kc{display:none} /* ⌘Z does nothing while a layer is open */
.main>#toasts.float{position:fixed;z-index:80;border-top:0;padding:0;flex-flow:column-reverse nowrap;align-items:center;max-width:none;pointer-events:none}
.main>#toasts.float>.toast{max-width:min(420px,100%)}
.main>#toasts.float.dim{z-index:59}
.main>#toasts.float>.toast{z-index:auto}
/* one width for every toast on a wide window, so a toast never changes size or shoves its neighbours as others come and go (AES-08,
   AES-21); the opened fold stops at 40% of the column and scrolls (AES-09) */
@media (min-width:761px){ .main>#toasts:not(.float)>.toast{width:320px;max-width:100%} }
.main>#toasts.all{max-height:40%;overflow-y:auto;overscroll-behavior:contain}
#toasts .toast>span{text-wrap:pretty;min-width:0}
#toasts .toast.mute button{display:none} /* on its session's own page the receipt bar carries the Undo */
#toasts .toast.aside,#toasts .toast.wait{display:none}
#toasts .toast{pointer-events:auto;max-width:min(460px,100%)}
#toasts .toast .btn{margin-left:auto;flex:none}
.toast{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:12px;background:var(--ink);color:var(--paper-2);font-size:.8125rem;max-width:min(460px,calc(100vw - 32px));box-shadow:0 12px 30px -12px rgba(0,0,0,.4);animation:tin .18s var(--ease)}
@keyframes tin{from{opacity:0;transform:translateY(6px)}} /* rises out of the lane */
.toast b{color:inherit}
.toast .btn{height:30px;color:var(--paper-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* responsive */
/* V1-07: the bar's breakpoints are in rem (915, 639 and 560 px at 16 px text), so larger root text tightens the bar as a narrower one
   would: the pill never runs over the crumbs at 125% or 150% text. */
/* The top bar tightens by its own width, not the window's, so a collapsed rail, the docked tour or a wide monitor all read the same
   (L2, Q1, TR2-12). Order of giving way: the pill's label goes first, then the pill's phrase shortens (never below about 8
   characters), then the parent crumb steps aside (Back stays, the page title repeats it). The page's own name never shrinks below
   its floor, and nothing in the crumbs ever wraps or runs under the pill (L3). */
.bar{container:bar/inline-size}
.hk .lb{white-space:nowrap;flex:none}
.crumbs>button:not(.bk){flex:none;min-width:4ch;max-width:22ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* AES-18: a parent crumb keeps its word; only the page's own name gives way */
.crumbs .sep{flex:none}
@media (min-width:761px){
  @container bar (max-width:57.1875rem){ /* the bar's content box: through a 1279 px window with the full rail */
    .hk .lb{display:none}
    .hk .say{min-width:0} /* QV6-02: the phrase shrinks with the pill and ends in its ellipsis inside it (a floor here ran it past the pill's clip at large text) */
    /* the crumbs keep their content and the pill's phrase gives way first. The name may take whatever the bar has left after
       Back, a parent (up to 16ch), the pill at its floor and the value line (about 480 px), and never less than 14ch */
    .crumbs{flex:0 0 auto;min-width:0}
    .crumbs>button:not(.bk){max-width:16ch;flex:none}
    .crumbs .here{max-width:max(14ch,calc(100cqw - 30rem))}
  }
  @container bar (max-width:39.9375rem){ /* too tight for the parent: Back stays, and the page title repeats where you are */
    .crumbs:has(.bk)>button:not(.bk),.crumbs:has(.bk) .sep{display:none}
    .crumbs .here{max-width:max(14ch,calc(100cqw - 21.25rem))}
  }
}
/* a tight bar never shows a bare number: both books stack, each with its word (Grow over Save). F02: by the bar's own width (a 1279 px
   window with the full rail, or the docked tour), so the crumb keeps its room */
@container bar (max-width:57.1875rem){
  .val{display:grid;grid-template-columns:auto auto;align-items:baseline;align-content:center;column-gap:6px;row-gap:1px;padding:0 8px;line-height:1.1;flex:none}
  .val .vw{font-family:var(--mono);font-size:max(10px,.625rem);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
  .val b{font-size:.8125rem;margin-left:0;text-align:right}
  .val.many{grid-template-columns:repeat(4,auto)}
}
/* T1-05: a phone's bar has no room for two figures a row: four stack tight (each keeps its words), and five or more fold to the mark,
   as the narrowest phones do, with every figure in its name */
@container bar (max-width:35rem){
  .val.many{grid-template-columns:auto auto;row-gap:0;line-height:1.05;height:52px}
  .val.many b{font-size:.75rem}
  .val.many5{display:inline-grid;place-items:center;width:36px;height:36px;padding:0}
  .val.many5 .vw,.val.many5 b{display:none}
  .val.many5 .vi{display:inline-grid;color:var(--ink-2)}
}
.railscrim{display:none}
@media (max-width:1000px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* QC-02 (round 4): on the narrowest phones the value line folds to its mark (a 36 px key that still opens Proof, its figures in its
   name), so the page's name keeps room in the bar */
.val .vi{display:none}
@media (max-width:380px){ .val{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;flex:none} .val .vw,.val b{display:none} .val .vi{display:inline-grid;color:var(--ink-2)} }
/* V3: on a narrow phone the pill keeps its keycaps and drops the value line (it collapsed to a stray quote mark) */
@media (max-width:420px){ .hk .say{display:none} .hk{padding:0 8px} }
@media (max-width:760px){
  .app,.app.mini{grid-template-columns:1fr}
  .rail{position:fixed;inset:0 20% 0 0;z-index:75;background:var(--paper);transform:translateX(-102%);transition:transform .22s var(--ease)}
  .app.open .rail{transform:none;box-shadow:var(--pop)}
  .menu{display:inline-grid}
  #menuB,#crumbBack{flex:none;width:36px;height:36px} /* V4: never squeezed below a thumb's target */
  .bar{padding:0 12px;gap:8px}
  .hk{padding:0 8px 0 6px;flex:0 1 auto;max-width:46vw}.hk .lb{display:none}.hk .say{font-size:.75rem}
  .crumbs>button:not(.bk),.crumbs .sep{display:none}
  .crumbs{flex:1 999 auto;min-width:5ch}.crumbs:has(.bk){min-width:32px}.crumbs:has(.bk) .here{min-width:0}.hk{max-width:46vw} /* the crumbs give way first: on a sub-page Back always stays, and the page title repeats the name */
  /* A torn name ("App...", "1...") is worse than none: the crumbs take only the room the bar has left (size containment, so they never
     push the pill), and the name shows only when at least about 8 characters fit; otherwise the page title carries it. */
  .crumbs{container-type:inline-size;min-width:0}.crumbs:has(.bk){min-width:32px}
  @container (max-width:3.9375rem){ .crumbs:not(:has(.bk)) .here{display:none} }
  /* V4-08: beside Back the name shows only when about 12 characters fit ("Priya w..." read as torn); the page title carries it */
  @container (max-width:8.6875rem){ .crumbs:has(.bk) .here{display:none} }
  #toasts{left:16px;right:16px;max-width:none;align-items:stretch}
  .main>#toasts{flex-flow:column-reverse nowrap;align-items:stretch} /* a phone stacks them full width, newest on top */
  #miniB{display:none}.app.open #menuX{display:inline-grid} /* A11Y5-15: the open menu closes from inside it */
  .hk .say{min-width:0}
  .hk{flex:0 1 auto}
  .al .acts{flex-basis:100%}
  .railscrim{display:block;position:fixed;inset:0;z-index:74;background:rgba(22,21,15,.18)}
  .app:not(.open) .railscrim{display:none}
  .val{padding:0 6px}
  .pg{padding:18px 16px 96px;gap:20px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .t-page{font-size:22px}
  .al{flex-wrap:wrap}
}

/* ---------- layout pass (2026-09-25 visual hunt) ---------- */
/* V13, TCH-01, TCH-07: touch sizing is one rule. On a phone, and on any touch screen at any width (an iPad), every small control keeps
   its look but gets a target of at least 32 px, 36 to 44 where the layout has room (an invisible ::after, or a taller box). The
   desktop with a mouse keeps its exact geometry; every :hover style lives in @media (hover:hover), so a tap never leaves one stuck. */
@media (max-width:760px), (pointer:coarse){
  .ick,.sw,.rvia,.rp .tt b .nm,.seg2 button,.lnk,.plnk,.brand .ib{position:relative}
  .brand .ib::after{content:"";position:absolute;inset:-4px} /* the rail's collapse key: 36 px */
  .brandhit{min-height:36px} /* V4-09 */
  #crumbBack,.pager .pip{width:36px;height:36px} /* over screens.css, which loads later */
  .hk{min-width:40px;justify-content:center} /* on touch the pill can be its mic alone (a phone) */
  .crumbs>button:not(.bk){min-height:32px}
  .steer input{min-height:32px} /* a find or steer field: the field itself, not only its frame */
  .toast .btn{height:36px} /* the Undo the 30 s promise hangs on */
  #nm{min-height:32px;padding-block:5px} /* Your name, edited in place (Settings, Account) */
  .lnk::after{content:"";position:absolute;inset:-8px -4px} /* L14: "Include anyway" and "Why?" are 35 px targets */
  .plnk::after{content:"";position:absolute;inset:-7px -4px} /* PLAT1-12: a plain link ("Correct a number", a play's "Why?") is 33 px */
  .ick::after{content:"";position:absolute;inset:-10px}
  .sw::after{content:"";position:absolute;inset:-7px -4px}
  .seg2 button::after{content:"";position:absolute;inset:-4px 0}
  .rvia::after,.rp .tt b .nm::after{content:"";position:absolute;inset:-9px -4px}
  .rp .tt b{padding-block:5px;margin-block:-5px} /* TCH5-02: the line clips (its ellipsis), so it gives the name's hit area room: 33 px */
  .ask input,.steer input,.capsule .cb input{align-self:stretch}
  .plnk{position:relative}.plnk::after{content:"";position:absolute;inset:-7px -4px} /* V1-10: "Correct a number" and every small text action: 33 px */
  .cd .cbar{min-height:32px} /* PLAT6-09: a month chip on a touch iPad; the week row (116 px) holds two. "+N more" is text: a tap opens the day */
}
/* L10: on the narrowest phones an ask field gives its words the room: the decorative mark steps aside (the placeholder and the
   buttons still say what the field is for), so a prompt fits whole instead of breaking mid-phrase */
@media (max-width:360px){ .ask{gap:6px} .ask>.mark{display:none} }

/* older Undos fold into one line (ui.js foldToasts) */
#toasts .toast.fold{display:none}

/* V3-08: less motion, asked for, is honoured everywhere the page moves on its own (the orb keeps its own rules). Layers arrive in
   place, the listening wave holds a still shape, the phone's menu opens without sliding, the page never glides to a target, and an
   arrival flash holds its tint, then clears, with no fade. */
@media (prefers-reduced-motion:reduce){
  /* :root lifts each rule over the later sheets (screens.css, fix-records.css) that set these animations */
  :root .view{scroll-behavior:auto}
  :root :is(.capsule,.drawer,.toast,.apill){animation:none}
  html:root .app .rail{transition:none} /* V4-05: outranks screens.css's .app:not(.open) .rail (0,3,0), so the phone's menu opens in place */
  :root :is(.dk,.dk .fc){transition:none} /* the Home deck steps and turns its cards in place */
  :root .wave i{animation:none}:root .wave i:nth-child(3n+1){height:10px}:root .wave i:nth-child(3n+2){height:15px}
  :root .flash,:root :is(.kdoc,.ks) .flash{animation-timing-function:steps(1,end)}
}

/* ---------- round 4 visual (2026-09-25) ---------- */
/* AES-12, INP-05, EXT-05: text you typed or a name that came in from outside (a pasted link, a long file name, a one-word surname)
   wraps inside its box, and never runs off the page or scrolls it sideways: the ask bubble, titles, toasts, Memory lines, a play's
   "You said", a person's story, Rolodex names */
.you,.t-page,.t-title,[contenteditable],#toasts .toast>span,.kl li>span,.np .npq,.tl li>span,.pcard b{overflow-wrap:anywhere;min-width:0} /* V6-03: a title and anything you edit in place (your name) too */
.nobr{white-space:nowrap} /* ui.js escT: a clipped title's last letter and its ellipsis */
/* V5-04, QC-01: a key alone wider than its action row or tile footer (a long label at a large text size, a narrow tile) wraps its
   words and grows taller, never past its card or the page; a row with room is unchanged (the row wraps its keys first) */
:is(.iacts,.tile .ft)>.btn{max-width:100%;white-space:normal;text-wrap:balance;height:auto;min-height:var(--btn-h);padding-block:4px}
:is(.iacts,.tile .ft)>.btn.sm{min-height:var(--btn-h-sm);padding-block:3px}
bdi{overflow-wrap:anywhere} /* INP5-04: your words quoted in a sentence keep their own direction and never push the page wide */
/* INP-08: and it reads in its own direction: an Arabic or Hebrew ask, title, name or line lays out right to left (plaintext is
   dir="auto" for each paragraph), while the sentences around it stay left to right */
.you,.t-page,.sv .shd h1,.crumbs .here,.kl li>span,.np .npq,.tl li>span,.pcard b,.row .tt b{unicode-bidi:plaintext}
.t-page,.sv .shd h1,.row .tt b{text-align:match-parent} /* a title or a row's name keeps its place in the layout (beside its icon) */
/* RZ-09, AES-22: on a short window (or above the tour's bar) the rail's footer stays pinned to its foot, Connectors, Settings and
   You always in reach; the pages and sessions above it scroll under it, with a hairline while anything is scrolled under */
.app .rail .foot{position:sticky;bottom:-14px;margin-bottom:-14px;padding-bottom:28px;background:var(--paper);z-index:1}
@supports (animation-timeline: scroll()){
  .rail .foot{animation:rail-foot linear both;animation-timeline:scroll(nearest block)}
  @keyframes rail-foot{from,98%{box-shadow:0 -1px 0 var(--hair-2)}to{box-shadow:none}}
}
/* QC-01: a drawer's last row of keys (its answer) is pinned to the drawer's foot while the body scrolls under it (a short window, a
   high zoom), with a hairline only while something is scrolled under it; on a tall window it sits where it always did */
.drawer .db>.iacts:last-child{position:sticky;bottom:-18px;margin:-10px -20px -18px;padding:10px 20px 18px;background:var(--paper-2);z-index:1}
@supports (animation-timeline: scroll()){
  .drawer .db>.iacts:last-child{animation:rail-foot linear both;animation-timeline:scroll(nearest block)}
}

/* AES-21: on a phone a tab strip that has to wrap fills each row edge to edge (the tabs share the row), so the rows read as one even
   block instead of a ragged run; a strip that fits keeps its size (W03/V15: no tab is ever cut into a scrolling strip) */
@media (max-width:760px){ .tabs button{flex:1 0 auto;justify-content:center} }
.tabs .tbr{flex-basis:100%;height:0;margin-top:-4px} /* V6-11: where a wrapped tab row breaks, so its rows hold an even count (ui.js balanceTabs) */

/* ---------- round 5 touch (2026-09-26) ---------- */
/* TCH-06: on a touch screen the capsule's field ends in its mic (hold to talk), not the esc keycap; with a mouse, the key chord is the way */
.capsule #capMic{display:none;flex:none}
@media (hover:none) and (pointer:coarse){ .capsule .cb>.kc{display:none} .capsule #capMic{display:inline-grid} .capsule #capMic,.holdmic{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} }
/* TCH5-01: a keycap is a hint for a keyboard, and a touch screen has none: the Y on a yes, ⌘K, ⌘Z, the ask key on a page's stats and the
   Calendar line's key hint go (print does the same, below). What is itself about keys keeps them: the keys Settings sets (.kc.lg) and
   the Mac drawn in the in-other-apps demo (.desk, .kcs) */
@media (hover:none) and (pointer:coarse){ :is(.kc,kbd):not(.lg,.desk *,.kcs *),.st:has(.kc),.hkhint{display:none!important} }
/* HK-15: the capsule's two sheets read as one: on a phone the 8 px seam between them takes the capsule's own paper, never the page */
@media (max-width:760px){ .capsule{background:var(--paper-2);border-radius:16px;box-shadow:var(--pop)} .capsule .cb,.capsule .opts{box-shadow:none} .capsule .opts{margin-top:0;border-radius:0 0 16px 16px;border-top:1px solid var(--hair-2)} .capsule .cb{border-radius:16px 16px 0 0} .capsule .cb:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)} }

/* ---------- forced colours (Windows High Contrast and the like), A11Y-14 ----------
   The system repaints every colour and drops every box-shadow, and the Enamel keys, fields, switches and chosen segments are drawn
   with shadows. So here, and only here, each control gets a real edge in the system's colours, and every chosen state (the tab, the
   page, a switch that is on, a checked box or option, today, the lit option) is filled with Highlight. The Proof bars keep their
   books: Grow solid, Save ruled. Focus rings are outlines, which survive as they are; a ring drawn as a box-shadow keeps a transparent outline
   (never outline:none), which forced colours paint (FC-01, check-app holds it). */
@media (forced-colors: active){
  .btn:not(.ghost),.ask,.steer,.capsule .cb,.capsule .opts,.drawer,.toast,.chip,.kc,.hk,.card,.tile,.pcard,.al,.seg3 button,.opts3 button,.cd .cbar,.pip{border:1px solid ButtonText}
  .dk .fc{border:1px solid CanvasText} /* Home's cards: the deck's edges were shadows (V5-06) */
  /* FC-01: every floating surface drawn with --pop (its only edge a shadow, which forced colours drop) gets a real one: Anywhere's menubar menu,
     the window, Slack, the sheet, the capsule and its lines, the Mac notification, the hint; the first-run sheet; the Review panel. check-app holds it */
  .pill2,.trm,.win,.slk,.asheet,.acap,.aflash,.akept,.anote,.hint3,.frsheet,.rvp{border:1px solid CanvasText}
  .trm hr{forced-color-adjust:none;background:CanvasText} /* the menu's group rules are a fill, which forced colours turn to Canvas */
  .rail .ss .ssm{color:CanvasText} /* the rail's needs-your-yes dot and working arc: an svg keeps its own ink here, so it is set (V5-06) */
  .btn.yes,.btn.primary,.ask .go.on{border-width:2px}
  .btn:disabled,.btn[aria-disabled="true"]{color:GrayText;border-color:GrayText}
  .tabs,.seg2{border:1px solid ButtonText}
  :is(.tabs,.wtabs) button.on,[role=tab][aria-selected=true],.seg2 button[aria-checked="true"],.seg3 button[aria-checked="true"],.opts3 button[aria-checked="true"],
  .rail .nv.on,.rail .ss.on,.rail .me.on,:is(button,a)[aria-current="page"],:is(button,a)[aria-current="true"],.ladder [aria-current="step"],.capsule .opt.on,[role=option][aria-selected=true]{forced-color-adjust:none;background:Highlight!important;color:HighlightText!important}
  :is(:is(.tabs,.wtabs) button.on,[role=tab][aria-selected=true],[aria-checked="true"]:is(.seg2 *,.seg3 *,.opts3 *),.rail :is(.nv,.ss,.me).on,:is(button,a):is([aria-current="page"],[aria-current="true"]),.capsule .opt.on,[role=option][aria-selected=true]) :not(.ick,.ick *){color:HighlightText!important;border-color:HighlightText!important}
  .rail :is(.nv,.ss,.me).on .n.need{background:HighlightText!important;color:Highlight!important;border-color:Highlight!important} /* A11Y5-02: the chosen row's count is a chip turned over, never its normal ink on Highlight */
  :is(.ask,.steer,.capsule .cb):focus-within{outline:2px solid Highlight;outline-offset:2px} /* A11Y5-06: a field's ring is a box-shadow, which forced colours drop */
  .rail .n.need,.cd.today .n{border:1px solid CanvasText}
  .cd.sel::after{box-shadow:none;outline:2px solid CanvasText;outline-offset:-2px}
  .sw{forced-color-adjust:none;border:1px solid ButtonText;background:Canvas!important}.sw i{background:ButtonText!important;box-shadow:none}
  .sw.on{background:Highlight!important;border-color:Highlight}.sw.on i{background:HighlightText!important}
  .ick{forced-color-adjust:none;border:1px solid ButtonText;background:Canvas!important;color:Canvas}
  .ick.on{background:Highlight!important;border-color:Highlight;color:HighlightText}
  .opts3 .ick.on{background:Canvas!important;border-color:ButtonText}.opts3 .ick.on::before{background:ButtonText}
  .track{border:1px solid CanvasText}.track i,.blg i{forced-color-adjust:none}
  /* A11Y6-01: a control drawn in its own system colours (forced-color-adjust:none: the chosen states, a switch, a box) keeps the page's ink ring,
     which is black on black; its ring is CanvasText, outside the Highlight fill */
  :is(.sw,.ick,:is(.tabs,.wtabs) button.on,[role=tab][aria-selected=true],[aria-checked="true"]:is(.seg2 *,.seg3 *,.opts3 *),.rail :is(.nv,.ss,.me).on,:is(button,a):is([aria-current="page"],[aria-current="true"]),.ladder [aria-current="step"],.capsule .opt.on,[role=option][aria-selected=true]):focus-visible{outline:2px solid CanvasText!important;outline-offset:2px!important}
  /* A11Y6-06: an svg keeps an ink the page gave it (the UA's preserve-parent-color), so every mark takes its parent's forced colour, and the
     knot's drawn inks (the lockup, the brand sheet) follow it */
  svg{color:inherit!important} :is(svg,svg *)[stroke]:not([stroke=none]){stroke:currentColor} :is(svg,svg *)[fill]:not([fill=none]){fill:currentColor}
  .track .g,.blg .g{background:CanvasText!important}.track .s,.blg .s{background:repeating-linear-gradient(135deg,CanvasText 0 3px,Canvas 3px 4.5px)!important}
}

/* A11Y-18: asked for more contrast, every hairline edge becomes a mark and faint text takes the second ink */
@media (prefers-contrast: more){
  :root{--hair:rgba(22,21,15,.45);--hair-2:rgba(22,21,15,.32);--ink-3:var(--ink-2);--btn-edge:var(--ink-4);--btn-edge-h:var(--ink-4);--btn-edge-a:var(--ink-4)} /* A11Y5-07: Enamel's paper keys (quiet, the hotkey pill) take a mark for an edge */
}

/* PLAT-07: Atlas did not mount (a file did not arrive): index.html says so here, with Reload */
.bootfail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:100vh;padding:24px 16px;text-align:center;color:var(--ink-3)}
.bootfail b{font-family:var(--display);font-size:26px;font-weight:400;color:var(--ink)}
.bootfail button{margin-top:6px;height:36px;padding:0 16px;border-radius:9px;background:var(--ink);color:var(--paper-2);font-weight:500}

/* PLAT-17: print (or Save as PDF) prints the page, whole: no rail, top bar, Review, layers, toasts, banners, fields or orbs; nothing that
   scrolls cuts at the first screen; a paper in the Trail prints alone; a session's receipt prints without its keys (Undo, Next yes) */
@media print{
  .rail,.railscrim,.bar,.skip,.rv,.rvp,#layer,#toasts,.offl,.updb,.tourui,.al .acts,form.steer,.yb button,.ib,.reader .iacts,canvas[data-orb]{display:none!important}
  form.ask,.hkline,.hkhint,:is(.kc,kbd):not(.lg),.st:has(.kc){display:none!important} /* PRN5-01: paper takes no typing and has no keys */
  .dk[aria-hidden],.dk:not(.flip) .bk,.dk.flip .fr{display:none!important} .dk .fc{transform:none!important} /* PLAT5-03: the card's showing face, flat (a PDF drops the 3D turn) */
  html,body,.app,.main,.view,.sv,.swbody,.msgs,.spane{display:block!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
  .spine,.reader,.kn,.cday,.sv .yb{position:static!important}
  body{background:#fff}
  .pg:has(.trail.open)>:not(.trail),.trail.open>.tl2{display:none!important}
  .card,.row,li{break-inside:avoid}
  /* PLAT1-13: paper has the room, so a line that ends in an ellipsis on screen prints whole (a receipt chip, a row's title and its line,
     a meeting chip): no word on paper is cut, since the accessible name that carries it is gone there */
  .lc>.scr{display:none!important} .lc>.pw{display:inline!important} /* lineage.js: a chip clipped to fit prints its whole words */
  .view :is(.row .tt b,.row .tt span,.lc>span,.cbar,.cbar .ct,.ss .t,.dh .src .lbl,.dh .src span:last-child,.imain b,.imain span,.er .nm,.said,.pfile .tt b,.tile .top .lbl,.me .who>*,.nv .l){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important;height:auto!important}
}
/* V1-09: a button inside a row that is only its words (a queued yes's title, an invoice's company) has no inline padding, so the inset ring
   of W06 cut its first and last letters. Its ring sits just outside it instead: it is well inside the row's own padding, so it is never clipped */
.list .row :is(button.tt,.imain):focus-visible,.its .imain:focus-visible{outline-offset:3px;border-radius:4px}