/* Riti UI v1 — components. Each one individually crafted; a native element sits underneath every one
   (button, radio, checkbox, input, dialog, popover), so keys, focus and screen readers work as usual.
   Server helpers that emit this markup: src/ui/*.ts. Living sheet: /ui (dev and test only).
   Hover/active/focus can be forced for the sheet with .is-hover / .is-active / .is-focus.
   Sharing levels use the product ids: everyone · anyone_with_code · connections · connections_with_code · only_me. */

/* ---------- buttons ---------- */
.btn { --h: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 16px; border-radius: 999px;
  font: 560 14px/1 var(--sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; border: 0;
  background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-1);
  transition: transform .16s var(--ease), background-color .16s, box-shadow .16s, width .4s var(--spring); }
.btn:hover, .btn.is-hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active, .btn.is-active { transform: translateY(0) scale(.97); box-shadow: var(--shadow-1); }
.btn.is-focus { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn.lg { --h: 52px; padding: 0 22px; font-size: 15.5px; }
.btn.sm { --h: 32px; padding: 0 12px; font-size: 13px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ghost:hover, .btn.ghost.is-hover { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.btn.quiet { background: transparent; color: var(--ink-2); box-shadow: none; }
.btn.quiet:hover, .btn.quiet.is-hover { background: var(--bg-2); color: var(--ink); }
.btn.danger { background: var(--bad); color: var(--on-ag); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .4; pointer-events: none; }
.btn.wide { width: 100%; }
.btn .lbl { display: inline-flex; align-items: center; gap: 8px; }
.btn .arr { transition: transform .25s var(--spring); }
.btn:hover .arr, .btn.is-hover .arr { transform: translateX(3px); }
.btn.loading { pointer-events: none; color: transparent; position: relative; overflow: hidden; }
.btn.loading > * { visibility: hidden; }
.btn.loading::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--on-primary) 35%, transparent) 50%, transparent 80%); animation: sweep 1.1s linear infinite; }
.btn.loading::after { content: attr(data-loading); position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-primary); }
.btn.ghost.loading::after, .btn.quiet.loading::after { color: var(--ink); }
.btn.ghost.loading::before, .btn.quiet.loading::before { background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--ink) 10%, transparent) 50%, transparent 80%); }
.btn.danger.loading::after { color: var(--on-ag); }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* the submit that morphs: label → spinner → a drawn tick in a green circle */
.go { position: relative; overflow: hidden; }
.go .lbl { transition: opacity .15s; }
.go .spin { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--on-primary) 30%, transparent); border-top-color: var(--on-primary); opacity: 0; animation: rot .7s linear infinite; }
.go .done-tick { position: absolute; width: 22px; height: 22px; opacity: 0; }
.go .done-tick path { stroke: var(--on-ag); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.go.busy { pointer-events: none; } .go.busy .lbl { opacity: 0; } .go.busy .spin { opacity: 1; }
.go.done { width: 52px; margin-left: calc(50% - 26px); padding: 0; background: var(--good); pointer-events: none; }
.go.done .lbl, .go.done .spin { opacity: 0; } .go.done .done-tick { opacity: 1; } .go.done .done-tick path { transition: stroke-dashoffset .45s .25s var(--ease); stroke-dashoffset: 0; }
@keyframes rot { to { transform: rotate(360deg); } }

.iconbtn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none; transition: background .15s, color .15s, transform .15s var(--ease); }
.iconbtn:hover, .iconbtn.is-hover { background: var(--bg-2); color: var(--ink); }
.iconbtn:active { transform: scale(.92); }
.iconbtn[disabled] { opacity: .4; pointer-events: none; }

.linkbtn { border: 0; background: none; padding: 0; font: 560 14px/1.4 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; cursor: pointer; }
.linkbtn:hover { text-decoration-color: currentColor; }

/* ---------- chips: a level carries a shape as well as a colour ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; font: 560 12.5px/1 var(--sans); white-space: nowrap; text-decoration: none;
  color: var(--c, var(--ink-2)); background: var(--w, var(--bg-2)); transition: color .35s, background-color .35s; view-transition-class: chip; }
.chip .pip { width: 8px; height: 8px; border-radius: 50%; background: currentColor; position: relative; flex: none; }
.chip[data-l='everyone'] { --c: var(--everyone); --w: var(--everyone-w); }
.chip[data-l='anyone_with_code'] { --c: var(--code); --w: var(--code-w); }
.chip[data-l='connections'] { --c: var(--conn); --w: var(--conn-w); }
.chip[data-l='connections_with_code'] { --c: var(--conncode); --w: var(--conncode-w); }
.chip[data-l='only_me'] { --c: var(--me); --w: var(--me-w); }
/* pip shape tells the level without colour: ring = public, diamond = code, filled = connections, square = only me */
.chip[data-l='everyone'] .pip { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.chip[data-l='anyone_with_code'] .pip, .chip[data-l='connections_with_code'] .pip { border-radius: 2px; transform: rotate(45deg); width: 7px; height: 7px; }
.chip[data-l='only_me'] .pip { border-radius: 2px; }
.chip[data-r='editor'] { --c: var(--editor); --w: var(--editor-w); }
.chip[data-r='commenter'] { --c: var(--commenter); --w: var(--commenter-w); }
.chip[data-r='viewer'] { --c: var(--viewer); --w: var(--viewer-w); }
.chip.xs { height: 20px; font-size: 11.5px; padding: 0 8px 0 6px; }
button.chip { border: 0; cursor: pointer; }
button.chip:hover, button.chip.is-hover { filter: brightness(.97); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.chip.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip .caret { width: 10px; height: 10px; opacity: .7; }
/* chips morph without stretching their words: the box animates, the label snapshots stay at size */
::view-transition-old(*.chip), ::view-transition-new(*.chip) { height: 100%; width: auto; object-fit: none; object-position: left center; }
::view-transition-group(*.chip) { border-radius: 999px; overflow: hidden; }

/* format tag: glyph drawn in CSS from the format's own shape */
.fmt { display: inline-flex; align-items: center; gap: 7px; font: 560 12px/1 var(--sans); color: var(--fc); letter-spacing: .01em; }
.fmt i { width: 16px; height: 12px; position: relative; display: inline-block; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--fc); }
[data-f='page'] { --fc: var(--f-page); } [data-f='deck'] { --fc: var(--f-deck); } [data-f='sheet'] { --fc: var(--f-sheet); }
[data-f='plan'] { --fc: var(--f-plan); } [data-f='tracker'] { --fc: var(--f-tracker); } [data-f='card'] { --fc: var(--f-card); } [data-f='gallery'] { --fc: var(--f-gallery); } [data-f='canvas'] { --fc: var(--f-canvas); }
.fmt[data-f='page'] i { width: 11px; height: 14px; background: linear-gradient(var(--fc) 0 0) 3px 4px / 5px 1.5px no-repeat, linear-gradient(var(--fc) 0 0) 3px 7px / 5px 1.5px no-repeat, linear-gradient(var(--fc) 0 0) 3px 10px / 3px 1.5px no-repeat; }
.fmt[data-f='deck'] i { background: linear-gradient(var(--fc) 0 0) 4px 4px / 8px 4px no-repeat; }
.fmt[data-f='sheet'] i { background: linear-gradient(90deg, transparent 5px, var(--fc) 5px 6.5px, transparent 6.5px 10px, var(--fc) 10px 11.5px, transparent 11.5px), linear-gradient(transparent 5px, var(--fc) 5px 6.5px, transparent 6.5px); }
.fmt[data-f='plan'] i { box-shadow: none; background: linear-gradient(var(--fc) 0 0) 0 5px / 16px 1.5px no-repeat, radial-gradient(circle, var(--fc) 2px, transparent 2.5px) -2px 0 / 7px 12px repeat-x; }
.fmt[data-f='tracker'] i { box-shadow: none; background: linear-gradient(var(--fc) 0 0) 0 100% / 3px 6px no-repeat, linear-gradient(var(--fc) 0 0) 6px 100% / 3px 9px no-repeat, linear-gradient(var(--fc) 0 0) 12px 100% / 3px 12px no-repeat; }
.fmt[data-f='card'] i { width: 9px; height: 14px; border-radius: 2px; background: linear-gradient(var(--fc) 0 0) 2px 9px / 5px 2px no-repeat; }
.fmt[data-f='gallery'] i { box-shadow: none; background: conic-gradient(from 90deg at 50% 50%, var(--fc) 0 25%, transparent 0 50%, var(--fc) 0 75%, transparent 0) 0 0 / 8px 6px; border-radius: 1px; }

/* ---------- agent marks ----------
   Real marks (Simple Icons, monochrome currentColor) on a neutral tile; never recoloured.
   Sizes: sm 18px tile (inline meta), md 24px (default), lg 44px (cards). States: is-writing · is-off · is-revoked. */
.agent { --t: 24px; --p: 4px; --rad: 7px; display: inline-flex; align-items: center; gap: 8px; font-weight: 560; color: var(--ink); min-width: 0; vertical-align: middle; text-decoration: none; }
.agent--sm { --t: 18px; --p: 3px; --rad: 5px; gap: 6px; }
.agent--lg { --t: 44px; --p: 10px; --rad: 13px; gap: 12px; font-size: 16px; font-weight: 620; }
.agent .mark { box-sizing: border-box; flex: none; width: var(--t); height: var(--t); padding: var(--p); border-radius: var(--rad); color: var(--ink); fill: currentColor;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent); overflow: visible; transition: box-shadow .15s, background-color .15s, transform .15s; }
.agent__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent__sub { display: block; font-size: 12.5px; font-weight: 450; color: var(--ink-3); }
.agent--lg .agent__name { line-height: 1.2; }
a.agent, button.agent { border: 0; background: none; padding: 4px 10px 4px 4px; margin: -4px -10px -4px -4px; cursor: pointer; border-radius: 10px; font: inherit; font-weight: 560; color: var(--ink); }
a.agent:hover .mark, button.agent:hover .mark, .agent.is-hover .mark { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 2px 6px color-mix(in srgb, var(--ink) 8%, transparent); transform: translateY(-1px); }
a.agent:focus-visible, button.agent:focus-visible, .agent.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
a.agent:active .mark, button.agent:active .mark { transform: translateY(0) scale(.96); }
.agent.is-revoked .mark, .agent.is-off .mark { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.agent.is-revoked .agent__name { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.agent.is-off .agent__name { color: var(--ink-3); }
/* presence: an agent writing draws a turning ring round its tile */
.agent.is-writing { position: relative; }
.agent.is-writing .mark { position: relative; box-shadow: inset 0 0 0 1px var(--line), 0 0 0 3px color-mix(in srgb, var(--live) 14%, transparent); }
.agent.is-writing::before { content: ''; position: absolute; left: -3px; top: 50%; width: calc(var(--t) + 6px); height: calc(var(--t) + 6px); translate: 0 -50%; border-radius: calc(var(--rad) + 3px);
  background: conic-gradient(from var(--a, 0deg), var(--live), transparent 55%, var(--live)); padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: turn 1.4s linear infinite; pointer-events: none; }
a.agent.is-writing::before, button.agent.is-writing::before { left: 1px; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes turn { to { --a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .agent.is-writing::before { animation: none; background: var(--live); } }
html.still .agent.is-writing::before { animation: none; background: var(--live); }
.marks-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.marks-row .more { font-size: 13.5px; color: var(--ink-3); }
/* on dark floating surfaces (toast, live update) the mark follows the surface */
.liveup .agent, .toast .agent { color: inherit; }
.liveup .agent .mark, .toast .agent .mark { color: var(--toast-ink); background: var(--toast-btn); box-shadow: none; }

/* ---------- avatars: initials on a tinted disc; the hue is picked from the @handle ---------- */
.av { --s: 32px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 600 max(11px, calc(var(--s) * .36))/1 var(--sans); letter-spacing: -0.02em;
  color: var(--ac); background: color-mix(in srgb, var(--ac) 13%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 22%, transparent); }
.av.sm { --s: 28px; } .av.lg { --s: 44px; } .av.xs { --s: 24px; }
.av.a1 { --ac: var(--av1); } .av.a2 { --ac: var(--av2); } .av.a3 { --ac: var(--av3); } .av.a4 { --ac: var(--av4); } .av.a5 { --ac: var(--av5); } .av.a6 { --ac: var(--av6); }
.av.ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ac); }
.av.away { --ac: var(--ink-2); outline: 1.5px dashed var(--line-2); outline-offset: 1px; } /* grey but readable (audit #47), no opacity */
.av.add { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); border: 0; cursor: pointer; }
.av.add:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.stack { display: inline-flex; } .stack .av { box-shadow: 0 0 0 2px var(--bg); } .stack .av + .av { margin-left: -4px; }
.stack .more { margin-left: 8px; align-self: center; font-size: 12.5px; color: var(--ink-3); }

/* ---------- toast: dark pill-card from the bottom; an Undo where the action can be taken back ---------- */
.toasts { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); }
.toasts:empty { display: none; }
.toasts[popover] { inset: auto auto 24px 50%; margin: 0; padding: 0; min-width: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; opacity: 1; transform: translateX(-50%); transition: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 14px; background: var(--toast-bg); color: var(--toast-ink); box-shadow: var(--shadow-3); font-size: 14px; line-height: 1.4;
  animation: toast-in .5s var(--spring) both; }
.toast.out { animation: toast-out .22s var(--ease) both; }
.toast.static { animation: none; max-width: 440px; }
.toast .t-body { flex: 1; min-width: 0; }
.toast .t-body small { display: block; color: var(--toast-sub); font-size: 12.5px; }
.toast form { display: contents; }
.toast button, .toast a.t-act { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--toast-btn); color: var(--toast-btn-ink); font: 600 13px/32px var(--sans); cursor: pointer; text-decoration: none; }
.toast button:hover, .toast a.t-act:hover { background: var(--toast-btn-h); }
.toast :focus-visible { outline-color: var(--toast-ink); }
.toast.bad .t-body::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--bad); vertical-align: 1px; }
@keyframes toast-in { from { transform: translateY(24px) scale(.96); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(12px); opacity: 0; } }

/* ---------- tooltip: waits, then rises (decoration only: the control keeps its aria-label) ---------- */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px) scale(.96); white-space: nowrap; padding: 7px 10px; border-radius: 9px;
  background: var(--toast-bg); color: var(--toast-ink); font: 500 12.5px/1.2 var(--sans); box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity .15s, transform .3s var(--spring); transition-delay: 0s; z-index: 20; }
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip].is-hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .35s; }
[data-tip].is-hover::after { transition-delay: 0s; }

/* ---------- popover (Popover API) and menu rows ---------- */
[popover]:not(.toasts) { margin: 0; border: 0; padding: 6px; border-radius: 14px; background: var(--lift); color: var(--ink); box-shadow: var(--shadow-3); min-width: 280px;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .16s, transform .3s var(--spring), display .3s allow-discrete, overlay .3s allow-discrete; }
[popover]:not(.toasts):popover-open { opacity: 1; transform: none; }
@starting-style { [popover]:not(.toasts):popover-open { opacity: 0; transform: translateY(-6px) scale(.98); } }
.levelpop { width: min(500px, calc(100vw - 24px)); padding: 18px !important; border-radius: 22px !important; }
.pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 12.5px; }
.opt { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; color: var(--ink); text-decoration: none; }
.opt:hover, .opt:focus-visible { background: var(--bg-2); outline: none; }
.opt b { display: block; font-weight: 580; font-size: 14px; }
.opt .d { display: block; font-size: 12.5px; color: var(--ink-3); }
.opt .ck { opacity: 0; color: var(--ink); } .opt[aria-checked='true'] .ck { opacity: 1; }
.opt.bad { color: var(--bad); }

/* ---------- segmented control ---------- */
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-2); }
.seg button, .seg a { white-space: nowrap; border: 0; background: transparent; height: 30px; padding: 0 12px; border-radius: 999px; font: 560 13px/1 var(--sans); color: var(--ink-3); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; transition: color .15s, background-color .2s; }
.seg button:hover, .seg a:hover { color: var(--ink); }
.seg [aria-pressed='true'], .seg [aria-current='page'] { background: var(--lift); color: var(--ink); box-shadow: var(--shadow-1); }

/* ---------- text field ---------- */
.field { display: grid; gap: 10px; }
.field > label, .field > .lbl { font: 560 13.5px/1.2 var(--sans); }
.field .hint { font-size: 13px; color: var(--ink-3); }
.field .box { position: relative; display: flex; align-items: center; gap: 8px; }
.field .box > .ic { position: absolute; left: 16px; color: var(--ink-3); pointer-events: none; }
.field input, .field textarea { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); color: var(--ink); font: 450 16px/1.2 var(--sans); outline: none; transition: border-color .2s, box-shadow .2s; }
.field .box > .ic ~ input { padding-left: 42px; }
.field textarea { height: auto; min-height: 96px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.field.lg input { height: 56px; padding: 0 18px; font-size: 17px; }
.field input:hover, .field textarea:hover, .field.is-hover input { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field.is-focus input { border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 16%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: .8; }
.field input:disabled, .field textarea:disabled { background: var(--bg-2); color: var(--ink-3); cursor: not-allowed; }
.field.bad input, .field.bad textarea { border-color: var(--bad); }
.field.bad input:focus, .field.bad textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 16%, transparent); }
.field.ok input { border-color: var(--good); }
.field .box .btn { position: absolute; right: 8px; }
.field .box:has(.btn) input { padding-right: 120px; }
.field.f-mono input { font: 500 16px/1 var(--mono); }
.msg { min-height: 22px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); display: flex; gap: 6px; align-items: flex-start; }
.msg .ic { margin-top: 2px; }
.msg.bad { color: var(--bad); } .msg.ok { color: var(--good); }
.msg:empty { min-height: 0; }

/* ---------- code input: one real <input> (paste, one-time-code autofill, password managers), drawn cells over it ----------
   No JS: the real input shows as a wide, spaced field. With ui.js (html.js): cells + a gliding caret. */
.otp { --cell-h: 68px; position: relative; }
.otp .otp-in { width: 100%; height: var(--cell-h); padding: 0 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); color: var(--ink);
  font: 560 28px/1 var(--sans); letter-spacing: .4em; font-variant-numeric: tabular-nums; outline: none; }
.otp .otp-in:focus { border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 16%, transparent); }
.otp.access .otp-in { font-family: var(--mono); text-transform: uppercase; }
.otp .cells { display: none; }
.js .otp .otp-in { position: absolute; inset: 0; z-index: 2; height: 100%; opacity: 0; cursor: text; caret-color: transparent; color: transparent; font-size: 16px; letter-spacing: 0; }
.js .otp .otp-in:disabled { cursor: not-allowed; }
.js .otp .cells { position: relative; display: grid; grid-template-columns: repeat(3, 1fr) 14px repeat(3, 1fr); gap: 8px; align-items: center; }
.js .otp.access .cells { grid-template-columns: repeat(4, 1fr) 18px repeat(4, 1fr); gap: 6px; }
.otp .dash { height: 2px; border-radius: 2px; background: var(--line-2); }
.otp .cell { height: var(--cell-h); min-width: 0; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); color: var(--ink);
  font: 560 30px/1 var(--sans); font-variant-numeric: tabular-nums; transition: border-color .2s, background-color .3s, color .3s; }
.otp.access .cell { font: 500 27px/1 var(--mono); text-transform: uppercase; border-radius: 12px; }
.otp:hover .cell { border-color: var(--ink-3); }
.otp .cell.filled { border-color: var(--ink-2); }
.otp .cell.pop { animation: land .42s var(--spring) both; }
@keyframes land { from { transform: translateY(-10px) scale(.7); opacity: 0; } }
.otp .glide { position: absolute; top: 0; left: 0; width: 0; height: var(--cell-h); border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 2px var(--focus), 0 0 0 6px color-mix(in srgb, var(--focus) 18%, transparent);
  transition: transform .38s var(--spring), width .38s var(--spring), opacity .2s; opacity: 0; }
.otp .glide::after { content: ''; position: absolute; left: 50%; top: calc(50% - 14px); width: 2px; height: 28px; margin-left: -1px; border-radius: 2px; background: var(--focus); animation: blink 1.1s steps(1) infinite; }
.otp .glide.has::after { display: none; }
.otp:focus-within .glide, .otp.is-focus .glide { opacity: 1; }
@keyframes blink { 50% { opacity: 0; } }
.otp.bad { animation: shake .45s var(--ease); }
.otp.bad .cell, .otp.bad .otp-in { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, var(--bg)); color: var(--bad); }
.otp.bad .glide { box-shadow: 0 0 0 2px var(--bad), 0 0 0 6px color-mix(in srgb, var(--bad) 18%, transparent); }
.otp.ok .cell, .otp.ok .otp-in { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 7%, var(--bg)); }
.otp.ok .cell:nth-child(2) { transition-delay: 45ms; } .otp.ok .cell:nth-child(3) { transition-delay: 90ms; } .otp.ok .cell:nth-child(5) { transition-delay: 135ms; }
.otp.ok .cell:nth-child(6) { transition-delay: 180ms; } .otp.ok .cell:nth-child(7) { transition-delay: 225ms; } .otp.ok .cell:nth-child(n+8) { transition-delay: 270ms; }
.otp.ok .glide { opacity: 0; }
.otp.off .cell { opacity: .45; } .otp.off .otp-in { opacity: .45; }
.js .otp.off .otp-in { opacity: 0; }
.otp.off:hover .cell { border-color: var(--line-2); }
@keyframes shake { 15% { transform: translateX(-9px); } 35% { transform: translateX(8px); } 55% { transform: translateX(-5px); } 75% { transform: translateX(3px); } }
.otp + .msg { margin-top: 12px; }
@media (max-width: 480px) {
  .otp { --cell-h: 58px; }
  .js .otp .cells { gap: 6px; grid-template-columns: repeat(3, 1fr) 8px repeat(3, 1fr); }
  .js .otp.access .cells { gap: 4px; grid-template-columns: repeat(4, 1fr) 10px repeat(4, 1fr); }
  .otp .cell { font-size: 26px; border-radius: 12px; } .otp.access .cell { font-size: 21px; border-radius: 10px; } .otp .glide { border-radius: 12px; }
  .otp.access { --cell-h: 52px; }
}

/* ---------- reach: the sharing control drawn as a floor plan over five real radios ----------
   Rooms are not nested on purpose: "Anyone with code" lets in strangers with the code but not connections without it. */
.reach { border: 0; margin: 0; padding: 0; min-width: 0; --lit-c: var(--me); --lit-w: var(--me-w); }
.reach legend { padding: 0; font: 560 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.reach:has(input[value='only_me']:checked) { --i: 0; --lit-c: var(--me); --lit-w: var(--me-w); }
.reach:has(input[value='connections_with_code']:checked) { --i: 1; --lit-c: var(--conncode); --lit-w: var(--conncode-w); }
.reach:has(input[value='connections']:checked) { --i: 2; --lit-c: var(--conn); --lit-w: var(--conn-w); }
.reach:has(input[value='anyone_with_code']:checked) { --i: 3; --lit-c: var(--code); --lit-w: var(--code-w); }
.reach:has(input[value='everyone']:checked) { --i: 4; --lit-c: var(--everyone); --lit-w: var(--everyone-w); }
.plan { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-radius: 20px; background: var(--bg-2); }
.room { position: relative; min-height: 74px; padding: 10px 12px 12px; border-radius: 14px; border: 1.5px dashed var(--line-2); background: var(--bg);
  transition: border-color .35s, background-color .35s, box-shadow .35s; }
.room .rl { display: block; font: 560 11.5px/1.25 var(--sans); color: var(--ink-3); transition: color .35s; }
.room .ppl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.room .ppl > * { transition: opacity .35s, filter .35s, transform .45s var(--spring); opacity: .35; filter: grayscale(1); transform: scale(.86); }
.room .ppl > .av { opacity: 1; } /* outside: greyed by the filter, never faded, so initials still read (audit #47) */
.room .ppl .av { --s: 24px; }
.room .ppl .n { align-self: center; font-size: 12px; color: var(--ink-3); }
.room .key, .room .lnk { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg-3); color: var(--ink-2); }
.room .key .ic, .room .lnk .ic { width: 13px; height: 13px; }
.room.core { grid-column: 1 / -1; border-style: solid; border-color: var(--ink); }
.room.core .ppl > * { opacity: 1; filter: none; transform: none; }
.room.core .rl { color: var(--ink); }
.room.out { grid-column: 1 / -1; min-height: 0; padding: 8px 12px; border-color: transparent; background: transparent; display: flex; gap: 8px; align-items: center; }
.room.out .rl { display: inline; } .room.out .ic { color: var(--ink-3); }
.room::before { content: ''; position: absolute; left: 18px; top: -2px; width: 0; height: 3px; border-radius: 2px; background: var(--bg-2); transition: width .45s var(--spring); }
.room.lit, .reach:has(input[value='connections_with_code']:checked) .room.cc,
.reach:has(input[value='connections']:checked) :is(.room.cc, .room.cn),
.reach:has(input[value='anyone_with_code']:checked) :is(.room.cc, .room.oc),
.reach:has(input[value='everyone']:checked) :is(.room.cc, .room.cn, .room.oc, .room.ol) { border-style: solid; border-color: var(--lit-c); background: var(--lit-w); box-shadow: 0 6px 18px -10px var(--lit-c); }
.room.lit::before, .reach:has(input[value='connections_with_code']:checked) .room.cc::before,
.reach:has(input[value='connections']:checked) :is(.room.cc, .room.cn)::before,
.reach:has(input[value='anyone_with_code']:checked) :is(.room.cc, .room.oc)::before,
.reach:has(input[value='everyone']:checked) :is(.room.cc, .room.cn, .room.oc, .room.ol)::before { width: 30px; }
.room.lit .rl, .reach:has(input[value='connections_with_code']:checked) .room.cc .rl,
.reach:has(input[value='connections']:checked) :is(.room.cc, .room.cn) .rl,
.reach:has(input[value='anyone_with_code']:checked) :is(.room.cc, .room.oc) .rl,
.reach:has(input[value='everyone']:checked) :is(.room.cc, .room.cn, .room.oc, .room.ol) .rl { color: var(--lit-c); }
.room.lit .ppl > *, .reach:has(input[value='connections_with_code']:checked) .room.cc .ppl > *,
.reach:has(input[value='connections']:checked) :is(.room.cc, .room.cn) .ppl > *,
.reach:has(input[value='anyone_with_code']:checked) :is(.room.cc, .room.oc) .ppl > *,
.reach:has(input[value='everyone']:checked) :is(.room.cc, .room.cn, .room.oc, .room.ol) .ppl > * { opacity: 1; filter: none; transform: none; }
.room .ppl > *:nth-child(2) { transition-delay: 40ms; } .room .ppl > *:nth-child(3) { transition-delay: 80ms; } .room .ppl > *:nth-child(4) { transition-delay: 120ms; }
/* the stops: five real radios on a track; the thumb glides to the checked one */
.stops { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 16px; padding-top: 22px; }
.stops::before { content: ''; position: absolute; top: 8px; left: 10%; right: 10%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--me), var(--conncode), var(--conn), var(--code), var(--everyone)); opacity: .35; }
.stops .thumb { position: absolute; top: 0; left: calc(10% + var(--i, 0) * 20%); width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 4px var(--lit-c), var(--shadow-2); transition: left .5s var(--spring), box-shadow .35s; pointer-events: none; }
.stop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 2px 4px; border-radius: 10px; text-align: center; font: 560 12px/1.2 var(--sans); color: var(--ink-3); cursor: pointer; transition: color .2s, background .2s; }
.stop:hover { color: var(--ink); background: var(--bg-2); }
.stop input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.stop:has(input:checked) { color: var(--ink); }
.stop:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.stop .glyph { width: 15px; height: 15px; color: var(--c); }
.stop[data-l='everyone'] { --c: var(--everyone); } .stop[data-l='anyone_with_code'] { --c: var(--code); } .stop[data-l='connections'] { --c: var(--conn); }
.stop[data-l='connections_with_code'] { --c: var(--conncode); } .stop[data-l='only_me'] { --c: var(--me); }
.stop.locked { color: var(--ink-3); cursor: not-allowed; }
.stop.locked .glyph { color: var(--ink-3); }
.stop.locked .lk { position: absolute; top: -2px; right: 18%; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); box-shadow: var(--shadow-1); color: var(--ink-2); }
.stop.locked .lk .ic { width: 11px; height: 11px; }
.stop.locked:hover { background: transparent; }
.reach .says { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); min-height: 2.6em; }
.reach .says b { color: var(--ink); font-weight: 600; }
/* without JS the sentence for the checked level shows by CSS; ui.js also flips [hidden] so screen readers hear it */
.reach .says [data-for] { display: none; }
.reach:has(input[value='only_me']:checked) .says [data-for='only_me'],
.reach:has(input[value='connections_with_code']:checked) .says [data-for='connections_with_code'],
.reach:has(input[value='connections']:checked) .says [data-for='connections'],
.reach:has(input[value='anyone_with_code']:checked) .says [data-for='anyone_with_code'],
.reach:has(input[value='everyone']:checked) .says [data-for='everyone'] { display: inline; }
.reach.xl .plan { padding: 12px; gap: 10px; border-radius: 24px; }
.reach.xl .room { min-height: 92px; padding: 12px 14px 14px; }
.reach.xl .room .rl { font-size: 12.5px; }
.reach.xl .room.out { min-height: 0; padding: 6px 12px; }
.reach.xl .room .ppl .av { --s: 30px; }
.reach.xl .room .key, .reach.xl .room .lnk { width: 30px; height: 30px; }
.reach.xl .stops { margin-top: 20px; }
.reach.xl .stop { font-size: 13px; }
@media (max-width: 420px) { .stop { font-size: 11px; } .plan { gap: 6px; padding: 8px; } .room { padding: 8px 10px 10px; } }

/* ---------- door switch: the thumb is a door; on, it swings open onto light ---------- */
.doorswitch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14.5px; user-select: none; position: relative; }
.doorswitch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.doorswitch .frame { position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); perspective: 120px; transition: background-color .3s; flex: none; }
.doorswitch .frame::before { content: ''; position: absolute; right: 7px; top: 6px; width: 14px; height: 18px; border-radius: 4px 4px 1px 1px; background: radial-gradient(circle at 50% 70%, var(--light-1), var(--light-2) 60%, var(--light-3)); opacity: 0; transition: opacity .3s; }
.doorswitch .leaf { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); box-shadow: var(--shadow-1), 0 0 0 1px var(--line-2); transition: transform .5s var(--spring), border-radius .3s; transform-origin: center; }
.doorswitch input:checked + .frame { background: var(--ink); }
.doorswitch input:checked + .frame::before { opacity: 1; }
.doorswitch input:checked + .frame .leaf { transform: translateX(10px) rotateY(-62deg); border-radius: 5px 5px 2px 2px; }
.doorswitch:hover .frame, .doorswitch.is-hover .frame { box-shadow: inset 0 0 0 1px var(--ink-3); }
.doorswitch input:focus-visible + .frame, .doorswitch.is-focus .frame { outline: 2px solid var(--focus); outline-offset: 3px; }
.doorswitch input:disabled + .frame { opacity: .45; } .doorswitch:has(input:disabled) { cursor: not-allowed; color: var(--ink-3); }

/* ---------- tick: a checkbox whose mark is drawn ---------- */
.tick { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; position: relative; }
.tick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tick .box { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ink-3); display: grid; place-items: center; transition: background-color .2s, box-shadow .2s, transform .3s var(--spring); flex: none; }
.tick .box svg { width: 14px; height: 14px; }
.tick .box path { fill: none; stroke: var(--bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .3s .05s var(--ease); }
.tick input:checked + .box { background: var(--ink); box-shadow: none; transform: scale(1.06); }
.tick input:checked + .box path { stroke-dashoffset: 0; }
.tick:hover .box, .tick.is-hover .box { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tick input:focus-visible + .box, .tick.is-focus .box { outline: 2px solid var(--focus); outline-offset: 2px; }
.tick input:disabled + .box { opacity: .4; } .tick:has(input:disabled) { color: var(--ink-3); cursor: not-allowed; }
.tick.err .box { box-shadow: inset 0 0 0 1.5px var(--bad); }

/* ---------- notices ---------- */
.note { display: grid; grid-template-columns: 36px 1fr; gap: 4px 14px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--w, var(--bg-2)); animation: note-in .5s var(--spring) both; }
.note .ni { grid-row: span 3; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--c, var(--ink)); box-shadow: var(--shadow-1); }
.note b { font-weight: 620; }
.note p { font-size: 14px; color: var(--ink-2); }
.note p b { color: var(--ink); }
.note .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.note.warn { --c: var(--warn); --w: var(--code-w); }
.note.bad { --c: var(--bad); --w: var(--everyone-w); }
.note.good { --c: var(--good); --w: var(--conn-w); }
.note.info { --c: var(--editor); --w: var(--editor-w); }
@keyframes note-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }

/* ---------- copy field: the link that says it copied ---------- */
/* the value wraps instead of being cut, so a long address is readable on a phone (audit #19) */
.copy { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 4px 4px 14px; border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; max-width: 100%; }
.copy .u { font: 400 13.5px/1.35 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; flex: 1; }
.copy .u b { color: var(--ink); font-weight: 500; }
.copy button { flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--lift); color: var(--ink); box-shadow: var(--shadow-1); font: 560 13px/1 var(--sans); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; position: relative; overflow: hidden; transition: background .2s, color .2s; }
.copy button:hover { box-shadow: var(--shadow-2); }
.copy button .ok { display: none; }
.copy button.done { background: var(--good); color: var(--on-ag); }
.copy button.done .ok { display: inline-flex; gap: 6px; align-items: center; } .copy button.done .no { display: none; }
.copy button.done .ic { animation: land .4s var(--spring); }
.copy button .no { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- hold to confirm: a destructive button you press and hold (held Enter/Space works too) ---------- */
.hold { --p: 0; position: relative; overflow: hidden; height: 52px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; font: 600 15px/1 var(--sans);
  background: var(--everyone-w); color: var(--bad); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 45%, transparent); display: inline-flex; align-items: center; gap: 10px; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: none; }
.hold::before { content: ''; position: absolute; inset: 0; background: var(--bad); transform-origin: left; transform: scaleX(var(--p)); }
.hold > span, .hold > .ic { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
.hold .on { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--on-ag); clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); }
.hold:focus-visible { outline: 2px solid var(--bad); outline-offset: 3px; }
.hold.done { --p: 1; }
.hold.is-mid { --p: .55; }

/* ---------- dialogs (native <dialog>); a bottom sheet on phones ---------- */
dialog.dlg { border: 0; padding: 0; border-radius: 26px; background: var(--lift); color: var(--ink); box-shadow: var(--shadow-3); width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .2s, transform .45s var(--spring), display .45s allow-discrete, overlay .45s allow-discrete; }
dialog.dlg[open] { opacity: 1; transform: none; }
@starting-style { dialog.dlg[open] { opacity: 0; transform: translateY(14px) scale(.97); } }
dialog.dlg::backdrop { background: rgba(10,10,15,.36); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s, display .3s allow-discrete, overlay .3s allow-discrete; }
dialog.dlg[open]::backdrop { opacity: 1; }
@starting-style { dialog.dlg[open]::backdrop { opacity: 0; } }
.dlg .in { padding: 28px; display: grid; gap: 16px; }
.dlg h2 { font: 650 24px/1.12 var(--sans); letter-spacing: -0.035em; }
.dlg p, .dlg li { font-size: 14.5px; color: var(--ink-2); }
.dlg .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 6px; }
.dlg .acts .fine { order: 3; flex: 1 0 100%; text-align: right; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 520px) {
  dialog.dlg { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 26px 26px 0 0; transform: translateY(40px); }
  dialog.dlg[open] { transform: none; }
  .dlg .acts { flex-direction: column-reverse; align-items: stretch; } .dlg .acts .fine { margin: 0; text-align: center; } .dlg .acts > * { width: 100%; }
}

/* ---------- drawer: docked beside the page when wide, a floating card in the middle, a bottom sheet you drag on phones ----------
   Markup: .stage[.open] > (main content) + .scrim + aside.drawer > .grab + .dhead + .dbody + .dfoot */
.stage { --drawer-w: 400px; position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 0px; transition: grid-template-columns .5s var(--spring-soft); overflow-x: clip; } /* the closed drawer's 1px border never scrolls sideways (audit #21) */
.stage.open { grid-template-columns: minmax(0, 1fr) var(--drawer-w); }
.stage > * { min-width: 0; }
.drawer { position: relative; min-width: 0; overflow: hidden; border-left: 1px solid var(--line); background: var(--bg); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.stage:not(.open) .drawer { border-left-color: transparent; visibility: hidden; transition: visibility 0s .5s; }
.dhead { display: flex; align-items: center; gap: 10px; padding: 14px 10px 12px 20px; border-bottom: 1px solid var(--line); width: var(--drawer-w); max-width: 100vw; }
.dhead h2 { font: 620 17px/1 var(--sans); letter-spacing: -0.02em; }
.dhead .seg { margin-left: auto; }
.dhead .seg + .iconbtn, .dhead h2 + .iconbtn { margin-left: auto; } .dhead .seg + .iconbtn { margin-left: 0; }
.dbody { overflow-y: auto; overscroll-behavior: contain; width: var(--drawer-w); max-width: 100vw; }
.dfoot { padding: 12px 14px 14px; border-top: 1px solid var(--line); width: var(--drawer-w); max-width: 100vw; background: var(--bg); }
.grab { display: none; }
.scrim { display: none; }
@media (max-width: 1099px) {
  /* the parked drawer sits outside the stage (translated); clip so it never adds scrollable height or width (audit #20) */
  .stage, .stage.open { grid-template-columns: minmax(0, 1fr); overflow: clip; }
  .drawer { position: absolute; z-index: 8; top: 12px; right: 12px; bottom: 12px; width: min(var(--drawer-w), calc(100% - 24px)); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-3);
    transform: translateX(calc(100% + 24px)); transition: transform .55s var(--spring), visibility 0s .55s; }
  .stage.open .drawer { transform: none; visibility: visible; transition: transform .55s var(--spring); }
  .dhead, .dbody, .dfoot { width: auto; }
}
@media (max-width: 640px) {
  .drawer { top: auto; left: 0; right: 0; bottom: -48px; width: 100%; height: calc(82% + 48px); padding-bottom: 48px; border-radius: 22px 22px 0 0; transform: translateY(105%); }
  .stage.open .drawer { transform: translateY(var(--drag, 0px)); }
  .drawer.dragging { transition: none; }
  .grab { display: block; width: 100%; height: 22px; border: 0; background: transparent; cursor: grab; touch-action: none; position: relative; }
  .grab::after { content: ''; position: absolute; left: 50%; top: 9px; width: 40px; height: 5px; margin-left: -20px; border-radius: 5px; background: var(--line-2); }
  .dhead { padding-top: 4px; }
  .scrim { display: block; position: absolute; inset: 0; z-index: 7; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .stage.open .scrim { opacity: calc(1 - var(--dragp, 0)); pointer-events: auto; }
}

/* ---------- comments: thread, quote, inbox row, resolved line, composer, selection pop ---------- */
.th { padding: 18px 20px; border-bottom: 1px solid var(--line); transition: background .2s; }
.th:hover { background: var(--bg-2); }
.th.active { background: color-mix(in srgb, var(--hl) 28%, var(--bg)); box-shadow: inset 3px 0 0 var(--hl-strong); }
.q { font: italic 400 16.5px/1.35 var(--voice); color: var(--ink); background: linear-gradient(transparent 55%, var(--hl) 55%); padding: 0 2px; }
.q.gone { background: none; text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-3); }
.m { display: grid; grid-template-columns: 28px 1fr; gap: 0 10px; margin-top: 14px; }
.m .av { --s: 28px; }
.m .h { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.m .h b { color: var(--ink); font-weight: 600; }
.m p { margin-top: 3px; font-size: 14.5px; line-height: 1.5; }
.th .acts { display: flex; gap: 2px; margin: 8px 0 0 30px; }
.th .acts button { border: 0; background: transparent; height: 30px; padding: 0 10px; border-radius: 999px; font: 560 12.5px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.th .acts button:hover { background: var(--bg-3); color: var(--ink); }
.grp { padding: 16px 20px 6px; font: 560 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.resolved { display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.resolved .ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--conn-w); color: var(--good); flex: none; }
.resolved b { color: var(--ink-2); font-weight: 600; }
.cbox { border: 1px solid var(--line-2); border-radius: 16px; padding: 10px 12px; transition: border-color .2s, box-shadow .2s; }
.cbox:focus-within { border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 14%, transparent); }
.cq { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; color: var(--ink-3); min-height: 0; }
.cq .q { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cq .iconbtn { width: 26px; height: 26px; margin-left: auto; }
.cbox textarea { width: 100%; min-height: 52px; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font: 400 14.5px/1.5 var(--sans); }
.crow { display: flex; align-items: center; gap: 8px; }
.crow .fine { font-size: 12px; color: var(--ink-3); }
.crow .btn { margin-left: auto; }
.cmt { display: grid; grid-template-columns: 32px 1fr auto; gap: 4px 14px; padding: 18px 20px; border-top: 1px solid var(--line); transition: background .15s; }
.cmt:first-of-type { border-top: 0; }
.cmt:hover { background: var(--bg-2); }
.cmt .who { font-size: 13.5px; color: var(--ink-3); }
.cmt .who b { color: var(--ink); font-weight: 600; }
.cmt p { grid-column: 2; font-size: 15px; }
.cmt .seen { grid-row: 1 / span 2; grid-column: 3; align-self: center; }
.cmt.done { animation: fold .45s var(--ease) forwards; }
@keyframes fold { to { opacity: 0; transform: translateX(24px); } }
.selpop { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--ink); color: var(--bg); font: 600 13px/1 var(--sans); box-shadow: var(--shadow-3); cursor: pointer; animation: land .4s var(--spring) both; }
.selpop.static { position: relative; animation: none; }
.selmark { position: absolute; z-index: 5; border-radius: 3px; background: color-mix(in srgb, var(--focus) 26%, transparent); pointer-events: none; }
.flyer { position: fixed; z-index: 90; font: italic 400 22px/1.2 var(--voice); color: var(--ink); background: var(--hl); padding: 2px 6px; border-radius: 4px; view-transition-name: quote; pointer-events: none; }

/* live update from an agent */
.liveup { position: absolute; z-index: 7; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--toast-bg); color: var(--toast-ink); box-shadow: var(--shadow-3); font-size: 13.5px; white-space: nowrap; animation: drop .55s var(--spring) both; }
.liveup button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--toast-ink); color: var(--toast-bg); font: 600 13px/1 var(--sans); cursor: pointer; }
.liveup.static { position: relative; left: auto; top: auto; transform: none; animation: none; display: inline-flex; }
@keyframes drop { from { transform: translate(-50%, -20px) scale(.95); opacity: 0; } }
/* "N agents writing" pill in the top bar */
.live { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--bg-2); font-size: 13px; color: var(--ink-2); }
.live .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--live); position: relative; }
.live .pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--live); animation: ping 1.6s var(--ease) infinite; }
@keyframes ping { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.live b { color: var(--ink); font-weight: 600; }

/* ---------- document cards and their format miniatures ---------- */
.docs { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.doc { position: relative; border-radius: var(--r-lg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .25s var(--spring); }
.doc:hover, .doc.is-hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); transform: translateY(-2px); }
.doc .thumb { display: block; height: 150px; margin: 6px 6px 0; border-radius: 12px; overflow: hidden; position: relative; background: color-mix(in srgb, var(--fc, var(--ink-3)) 6%, var(--bg)); }
.doc .body { padding: 14px 16px 16px; display: grid; gap: 10px; }
.doc h3 { font: 600 16.5px/1.25 var(--sans); letter-spacing: -0.015em; }
.doc h3 a { text-decoration: none; } .doc h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.doc h3 a:focus-visible { outline: none; } .doc:has(h3 a:focus-visible) { box-shadow: 0 0 0 2px var(--focus); }
.doc .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.doc .meta .chip, .doc .meta .agent, .doc .top .chip { position: relative; z-index: 2; }
.doc .top { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.doc .views { font-variant-numeric: tabular-nums; }
.docs.list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.docs.list .doc { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); padding: 12px 4px; }
.docs.list .doc:hover { transform: none; background: var(--bg-2); box-shadow: none; }
.docs.list .thumb { height: 44px; width: 44px; margin: 0; border-radius: 10px; }
/* the page's own screenshot covers the format art once it loads (decorative: the card title names the page) */
.doc .thumb > .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: none !important; display: block; }
.docs.list .thumb > * { transform: scale(.3); transform-origin: top left; width: 333%; height: 333%; }
.docs.list .body { padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.docs.list .body .top { order: 2; gap: 14px; } .docs.list h3 { order: 1; flex: 1 1 260px; }
.docs.list .meta { order: 3; }
@media (max-width: 720px) {
  .docs:not(.list) { grid-template-columns: 1fr; gap: 14px; }
  .docs:not(.list) .doc { display: grid; grid-template-columns: 112px minmax(0,1fr); }
  .docs:not(.list) .doc .thumb { margin: 6px 0 6px 6px; height: auto; min-height: 100px; }
  .docs:not(.list) .thumb > * { transform: scale(.55); transform-origin: top left; width: 182%; height: 182%; }
  .docs:not(.list) .body { padding: 10px 12px 12px; } .docs:not(.list) h3 { font-size: 14.5px; }
  .docs:not(.list) .meta .agent, .docs:not(.list) .meta .views { display: none; }
}
.mini { position: absolute; inset: 0; padding: 16px; --fc2: color-mix(in srgb, var(--fc) 45%, var(--bg)); }
.mini .ln { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); margin-top: 7px; }
.mini .ln.w40 { width: 40%; } .mini .ln.w45 { width: 45%; } .mini .ln.w55 { width: 55%; } .mini .ln.w80 { width: 80%; } .mini .ln.flush { margin: 0; }
.mini .ttl { height: 12px; width: 62%; border-radius: 4px; background: var(--fc); }
.mini .ttl.w40 { width: 40%; } .mini .ttl.w50 { width: 50%; }
.m-plan .tl { position: absolute; left: 16px; right: 16px; top: 64px; height: 2px; background: var(--fc2); }
.m-plan .tl i { position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--fc); }
.m-plan .tl i:nth-child(1) { left: 0; } .m-plan .tl i:nth-child(2) { left: 25%; background: var(--fc); } .m-plan .tl i:nth-child(3) { left: 50%; } .m-plan .tl i:nth-child(4) { left: 75%; } .m-plan .tl i:nth-child(5) { right: 0; }
.m-plan .days { position: absolute; left: 16px; right: 16px; top: 86px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.m-plan .days span { height: 40px; border-radius: 6px; background: color-mix(in srgb, var(--fc) 12%, var(--bg)); }
.m-sheet .tb { margin-top: 12px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1px; background: color-mix(in srgb, var(--fc) 25%, transparent); border-radius: 6px; overflow: hidden; }
.m-sheet .tb span { height: 15px; background: var(--bg); } .m-sheet .tb span:nth-child(-n+3) { background: color-mix(in srgb, var(--fc) 15%, var(--bg)); }
.m-sheet .tb span:nth-last-child(-n+3) { background: color-mix(in srgb, var(--fc) 30%, var(--bg)); }
.m-card { display: grid; place-items: center; }
.m-card .phone { width: 74px; height: 118px; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); padding: 10px 8px; display: grid; align-content: start; justify-items: center; gap: 6px; transform: rotate(-4deg); }
.m-card .phone b { font: 400 22px/1 var(--voice); font-style: italic; color: var(--fc); } .m-card .phone i { width: 44px; height: 10px; border-radius: 9px; background: var(--fc); }
.m-card .phone .ln { width: 40px; margin: 0; }
.fmt[data-f='canvas'] i { box-shadow: none; background: linear-gradient(var(--fc) 0 0) 0 0 / 6px 5px no-repeat, linear-gradient(var(--fc) 0 0) 10px 7px / 6px 5px no-repeat, linear-gradient(var(--fc) 0 0) 5px 2px / 6px 1.5px no-repeat; }
.m-canvas { background-image: radial-gradient(color-mix(in srgb, var(--fc) 25%, transparent) 1px, transparent 1.3px); background-size: 12px 12px; }
.m-canvas i { position: absolute; width: 22%; height: 52%; top: 22%; border-radius: 6px; background: var(--bg); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fc) 50%, var(--bg)); }
.m-canvas i:nth-child(1) { left: 8%; } .m-canvas i:nth-child(2) { left: 39%; } .m-canvas i:nth-child(3) { left: 70%; }
.m-canvas b { position: absolute; top: 47%; height: 2px; width: 9%; background: var(--fc); } .m-canvas b:nth-of-type(1) { left: 30%; } .m-canvas b:nth-of-type(2) { left: 61%; }
.m-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; padding: 10px; }
.m-gallery span { border-radius: 6px; }
.m-gallery span:nth-child(1) { grid-row: span 2; background: linear-gradient(160deg, #f0b46a, #c2552c 60%, #5c2a1c); }
.m-gallery span:nth-child(2) { background: linear-gradient(200deg, #9cc7c0, #3f7f78); } .m-gallery span:nth-child(3) { background: linear-gradient(200deg, #e6d3a8, #a8834a); }
.m-gallery span:nth-child(4) { background: linear-gradient(200deg, #c9b8d9, #6d5a8a); } .m-gallery span:nth-child(5) { background: linear-gradient(200deg, #f2d48a, #c08a22); }
.m-deck { perspective: 400px; }
.m-deck .sl { position: absolute; left: 24px; right: 24px; top: 22px; bottom: 22px; border-radius: 8px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); padding: 14px; }
.m-deck .sl.b { transform: translate(10px, -8px) rotate(3deg); opacity: .6; } .m-deck .sl.c { transform: translate(20px, -16px) rotate(6deg); opacity: .3; }
.m-deck .big { font: 650 24px/1 var(--sans); letter-spacing: -0.04em; color: var(--fc); margin-top: 8px; }
.m-tracker .bars { position: absolute; left: 16px; right: 16px; bottom: 16px; top: 46px; display: flex; align-items: end; gap: 8px; }
.m-tracker .bars i { flex: 1; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--fc) 30%, var(--bg)); } .m-tracker .bars i:nth-child(4) { background: var(--fc); }
.m-tracker .bars i:nth-child(1) { height: 40%; } .m-tracker .bars i:nth-child(2) { height: 62%; } .m-tracker .bars i:nth-child(3) { height: 55%; } .m-tracker .bars i:nth-child(4) { height: 84%; } .m-tracker .bars i:nth-child(5) { height: 30%; }
.m-page .col { max-width: 70%; }

/* ---------- empty state: an empty room, door ajar ---------- */
.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 36px 20px; border-radius: var(--r-xl); border: 1.5px dashed var(--line-2); }
.empty .scene { position: relative; width: 120px; height: 84px; perspective: 200px; margin-bottom: 14px; }
.empty .scene .wall { position: absolute; inset: 0 0 6px; border-radius: 10px 10px 2px 2px; background: var(--bg-2); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.empty .scene .floor { position: absolute; left: -10px; right: -10px; bottom: 0; height: 6px; border-radius: 3px; background: var(--line); }
.empty .scene .dr { position: absolute; left: 48px; bottom: 6px; width: 26px; height: 46px; border-radius: 4px 4px 0 0; background: radial-gradient(circle at 40% 80%, var(--light-1), var(--light-2) 55%, var(--light-3)); }
.empty .scene .leaf { position: absolute; left: 48px; bottom: 6px; width: 26px; height: 46px; border-radius: 4px 4px 0 0; background: var(--ink); transform-origin: left; transform: rotateY(-48deg); animation: ajar 3.2s var(--ease) infinite alternate; }
.empty .scene .light { position: absolute; left: 50px; bottom: -14px; width: 70px; height: 20px; background: radial-gradient(ellipse at 0 0, rgba(255,215,94,.55), transparent 70%); }
@keyframes ajar { to { transform: rotateY(-62deg); } }
.empty h3 { font: 620 17px/1.2 var(--sans); letter-spacing: -0.02em; }
.empty p { font-size: 14px; color: var(--ink-2); max-width: 32ch; }