/* The Closing Rooms — Wall Street Generic (docs/DESIGN.md + docs/SKINS.md).
   Playfair display voice, Albert Sans UI voice.
   Paper lobby outside; warm charcoal room inside. No hex below the token block. */

/* === tokens:begin === */
:root{
  /* v6 "Next Level" (docs/DESIGN.md, 2026-08-16) — paper building, ink rooms */
  --ground:#fafbfd;
  --raise:#ffffff;
  --text:#0e1330;
  --muted:#5a6180;
  --hairline:#e7e9f2;
  --accent:#1226d9;
  --accent-fill:#1226d9;
  --accent-ink:#ffffff; /* text on accent-fill — skins with light fills override */
  --accent-soft:#eceeff;
  --vermilion:var(--accent); /* legacy alias */
  --good:#177a52;
  --good-soft:#e3f3ec;
  --bad:#c25a5a;
  --bad-soft:#d98f8f;
  --attention:#c98a1b; /* the gold, inked for light grounds; full gold in the room */
  --attention-ink:#8a6320;
  --attention-soft:#fdf3dd;
  --chalk:#ffffff; /* ink on saturated fills (ticks, coloured avatars) */
  --graphite:#0d0f1c;
  --shadow:rgba(14,19,48,.18);
  --shadow-1:rgba(14,19,48,.07);
  --shadow-2:rgba(14,19,48,.18);
  --tab-mark:var(--accent);
  /* interior world — door peek on the hall uses these even on paper pages */
  --room-ground:#0b0d18;
  --room-raise:#131628;
  --room-text:#e9ecf7;
  --room-muted:#8d93b4;
  --room-hairline:rgba(233,236,247,.12);
  --room-accent:#aab6ea;
  --room-accent-fill:#dfe5ff;
  --room-accent-ink:#0b0d18;
  --room-shadow:rgba(2,4,14,.6);
  --door-behind:var(--room-ground);
  --door-leaf-top:#232c5f;
  --door-leaf-mid:#151c45;
  --door-leaf-base:#0d1231;
  --door-leaf-personal:#1b2350;
  --table-lit:#262e5c;
  --table-base:#0f142e;
  --preview-wall-top:#232c5f;
  --preview-wall-base:#0b0d18;
  --preview-wall-ink:#e9ecf7;
  --preview-ink-top:#222b66;
  --preview-ink-base:#0d1233;
  --preview-ink-ink:#e9ecf8;
  --preview-vineyard-top:#3a3220;
  --preview-vineyard-mid:#2a2418;
  --preview-vineyard-base:#1c1910;
  --preview-vineyard-ink:#f3efe4;
  --preview-vineyard-muted:#a39a84;
  --preview-matrix-top:#0d1610;
  --preview-matrix-mid:#0a120c;
  --preview-matrix-base:#030805;
  --preview-matrix-ink:#9ae6b0;
  --preview-matrix-muted:#5a8a68;
  --preview-bespoke-top:#2a2620;
  --preview-bespoke-base:#171512;
  --preview-bespoke-ink:#f0ebe3;
  --preview-ink-mid:#0e1436;
  --preview-ink-muted:#8d95bd;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Albert Sans',system-ui,sans-serif;
  --edge:clamp(24px,7vw,110px);
}
/* walk in from the paper lobby into the near-black ink room */
body.room-dark{
  --ground:var(--room-ground);
  --raise:var(--room-raise);
  --text:var(--room-text);
  --muted:var(--room-muted);
  --hairline:var(--room-hairline);
  --accent:var(--room-accent);
  --accent-fill:var(--room-accent-fill);
  --accent-ink:var(--room-accent-ink);
  --accent-soft:rgba(223,229,255,.09);
  /* live mark only — never the lobby indigo. Stage "now" + current tab. */
  --vermilion:var(--attention);
  --attention:#e8b04b; /* full gold back on dark ground */
  --attention-ink:#e8b04b;
  --attention-soft:rgba(232,176,75,.13);
  --good:#6fbe97;
  --good-soft:rgba(111,190,151,.13);
  --shadow:var(--room-shadow);
  --shadow-1:rgba(0,0,0,.3);
  --shadow-2:rgba(0,0,0,.55);
  --tab-mark:var(--attention);
}
/* The Ink — electric indigo boardroom (first alternate skin) */
body.room-dark[data-skin="ink"]{
  --ground:#0a0f2b;
  --raise:#121838;
  --text:#e9ecf8;
  --muted:#8d95bd;
  --hairline:rgba(233,236,248,.14);
  --accent:#8f9dff;
  --accent-fill:#4250e8;
  --accent-ink:#ffffff;
  --vermilion:var(--attention);
  --good:#63b98d;
  --shadow:rgba(2,4,18,.55);
  --room-ground:#0a0f2b;
  --room-raise:#121838;
  --room-text:#e9ecf8;
  --room-muted:#8d95bd;
  --room-accent:#8f9dff;
  --room-accent-fill:#4250e8;
  --room-accent-ink:#ffffff;
  --room-shadow:rgba(2,4,18,.55);
  --door-behind:#0a0f2b;
  --door-leaf-top:#131a44;
  --door-leaf-mid:#0e1436;
  --door-leaf-base:#0a0f2e;
  --door-leaf-personal:#141b45;
  --table-lit:#222b66;
  --table-base:#0d1233;
}
/* Vineyard — warm outdoors, late sun on stone and vine */
body.room-dark[data-skin="vineyard"]{
  --ground:#1c1910;
  --raise:#2a2418;
  --text:#f3efe4;
  --muted:#a39a84;
  --hairline:rgba(243,239,228,.14);
  --accent:#c9b896;
  --accent-fill:#e8dcc4;
  --accent-ink:#1c1910;
  --vermilion:var(--attention);
  --good:#7a9e6a;
  --shadow:rgba(12,10,4,.55);
  --room-ground:#1c1910;
  --room-raise:#2a2418;
  --room-text:#f3efe4;
  --room-muted:#a39a84;
  --room-accent:#c9b896;
  --room-accent-fill:#e8dcc4;
  --room-accent-ink:#1c1910;
  --room-shadow:rgba(12,10,4,.55);
  --door-behind:#1c1910;
  --door-leaf-top:#3a3220;
  --door-leaf-mid:#2a2418;
  --door-leaf-base:#1a1610;
  --door-leaf-personal:#403628;
  --table-lit:#4a3e28;
  --table-base:#241e14;
}
/* Matrix — green-on-black terminal register (our type, our art — not lifted assets) */
body.room-dark[data-skin="matrix"]{
  --ground:#030805;
  --raise:#0d1610;
  --text:#b6f5c8;
  --muted:#5a8a68;
  --hairline:rgba(182,245,200,.14);
  --accent:#5dff8a;
  --accent-fill:#145232;
  --accent-ink:#b6f5c8;
  --vermilion:var(--attention);
  --good:#5dff8a;
  --shadow:rgba(0,8,2,.65);
  --room-ground:#030805;
  --room-raise:#0d1610;
  --room-text:#b6f5c8;
  --room-muted:#5a8a68;
  --room-accent:#5dff8a;
  --room-accent-fill:#145232;
  --room-accent-ink:#b6f5c8;
  --room-shadow:rgba(0,8,2,.65);
  --door-behind:#030805;
  --door-leaf-top:#0d1610;
  --door-leaf-mid:#0a120c;
  --door-leaf-base:#050a07;
  --door-leaf-personal:#122018;
  --table-lit:#0f2418;
  --table-base:#06140c;
}
/* Viewer register — light chrome. Skin accents stay; ground/text flip for legibility.
   data-register="system" follows prefers-color-scheme via the paired media query. */
body.room-dark[data-register="light"],
body.room-dark[data-register-resolved="light"]{
  --ground:#f5f7fb;
  --raise:#ffffff;
  --text:#10143a;
  --muted:#5c6386;
  --hairline:#e2e5f0;
  --shadow:rgba(16,20,58,.14);
  --shadow-1:rgba(16,20,58,.07);
  --shadow-2:rgba(16,20,58,.18);
  --accent:#1226d9;
  --accent-fill:#0e1330;
  --accent-ink:#ffffff;
  --accent-soft:#eceeff;
  --good:#177a52;
  --good-soft:#e3f3ec;
  --attention:#c98a1b;
  --attention-ink:#8a6320;
  --attention-soft:#fdf3dd;
  --tab-mark:#c98a1b;
}
body.room-dark[data-skin="ink"][data-register="light"],
body.room-dark[data-skin="ink"][data-register-resolved="light"]{
  --accent:#1226d9;
  --accent-fill:#1226d9;
  --accent-ink:#ffffff;
  --door-leaf-top:#3a4580;
  --door-leaf-mid:#2a3360;
  --door-leaf-base:#1a2248;
  --table-lit:#d8dcf0;
  --table-base:#c4cae0;
}
body.room-dark[data-skin="vineyard"][data-register="light"],
body.room-dark[data-skin="vineyard"][data-register-resolved="light"]{
  --ground:#f6f1e6;
  --accent:#6b5a3e;
  --accent-fill:#3a3220;
  --accent-ink:#f3efe4;
  --good:#4a7a3a;
  --door-leaf-top:#8a7a54;
  --door-leaf-mid:#6b5a3e;
  --door-leaf-base:#4a3e28;
  --table-lit:#e8dcc4;
  --table-base:#d4c4a0;
}
body.room-dark[data-skin="matrix"][data-register="light"],
body.room-dark[data-skin="matrix"][data-register-resolved="light"]{
  --ground:#f2faf4;
  --text:#0a2e1a;
  --muted:#3d6b4e;
  --hairline:#c5e0ce;
  --accent:#0d3b22;
  --accent-fill:#145232;
  --accent-ink:#b6f5c8;
  --door-leaf-top:#2a7a4a;
  --door-leaf-mid:#1a5c38;
  --door-leaf-base:#0d3b22;
  --table-lit:#d4f0de;
  --table-base:#b6e0c4;
}
@media (prefers-color-scheme: light){
  body.room-dark[data-register="system"]:not([data-register-resolved="dark"]){
    --ground:#f5f7fb;
    --raise:#ffffff;
    --text:#10143a;
    --muted:#5c6386;
    --hairline:#e2e5f0;
    --shadow:rgba(16,20,58,.14);
    --shadow-1:rgba(16,20,58,.07);
    --shadow-2:rgba(16,20,58,.18);
    --accent:#1226d9;
    --accent-fill:#0e1330;
    --accent-ink:#ffffff;
    --accent-soft:#eceeff;
    --good:#177a52;
    --good-soft:#e3f3ec;
    --attention:#c98a1b;
    --attention-ink:#8a6320;
    --attention-soft:#fdf3dd;
    --tab-mark:#c98a1b;
  }
}
/* never-skinned surfaces wear the paper face in every world (v6, owner call
   2026-08-16): the record is a document, and documents are paper. */
body.sealed-record{
  --ground:#fafbfd;
  --raise:#ffffff;
  --text:#0e1330;
  --muted:#5a6180;
  --hairline:#e7e9f2;
  --accent:#1226d9;
  --accent-fill:#0e1330;
  --accent-ink:#ffffff;
  --accent-soft:#eceeff;
  --good:#177a52;
  --good-soft:#e3f3ec;
  --attention:#c98a1b;
  --attention-ink:#8a6320;
  --attention-soft:#fdf3dd;
  --chalk:#ffffff;
  --shadow:rgba(14,19,48,.18);
  --shadow-1:rgba(14,19,48,.07);
  --shadow-2:rgba(14,19,48,.18);
  --tab-mark:#1226d9;
}
/* The Desk (2026-08-24). A second raised plane for file icons and inset panels,
   and the bottom-bar / drawer-scrim geometry. Colour is mixed from existing
   tokens so every skin and both light/dark registers follow with no new entry
   in the eight re-token blocks — which is why these sit on `body` and not on
   `:root`: a custom property substitutes var() at the element it is declared
   on, so a :root declaration would freeze them to root's palette while every
   skin re-tokens on the body. They were written inside the paper block below
   by accident, where they reached only the sealed record: the Desk's bar
   collapsed to content height, the room lost the padding that keeps the last
   card clear of it, and the drawer scrim was transparent. */
body{
  --raise-2:color-mix(in srgb, var(--text) 5%, var(--raise));
  --scrim:color-mix(in srgb, var(--graphite) 62%, transparent);
  --nav-h:64px;
}
/* The Desk close drawer wears the paper face — the sealing act reads like the
   ceremony and the sealed record, not the ink room it opens from. A token
   remap (like body.sealed-record) so it follows in any skin. */
.drawer.paper{
  --ground:#fafbfd;
  --raise:#ffffff;
  --text:#0e1330;
  --muted:#5a6180;
  --hairline:#e7e9f2;
  --accent:#1226d9;
  --accent-fill:#0e1330;
  --accent-ink:#ffffff;
  --accent-soft:#eceeff;
  --good:#177a52;
  --good-soft:#e3f3ec;
  --attention:#c98a1b;
  --attention-ink:#8a6320;
  --attention-soft:#fdf3dd;
  --bad:#c25a5a;
  --shadow-1:rgba(14,19,48,.07);
  --shadow-2:rgba(14,19,48,.18);
  --raise-2:color-mix(in srgb, var(--text) 5%, var(--raise));
}

/* === tokens:end === */

/* Skin / register rail (docs/SKINS.md). wall_street IS the token block above.
   Future skins override via body[data-skin="ink"].room-dark { … }.
   data-never-skinned pages are forced to data-skin="wall_street" in the layout.
   Viewer register: Light / Auto / Dark in the masthead; data-register-resolved
   is set by Stimulus for "system". Motion already respects prefers-reduced-motion. */

*{margin:0;padding:0;box-sizing:border-box}
/* The hidden attribute is only display:none in the UA sheet, so any author
   rule that sets display beats it — .btn is display:inline-flex, which made
   every hidden button in the floor bar visible anyway. Say it once, loudly. */
[hidden]{display:none !important}
html{-webkit-font-smoothing:antialiased}
body{background:var(--ground);color:var(--text);font-family:var(--sans);line-height:1.6;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1100px 520px at 82% -12%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 70%)}
body.room-dark::before{background:
  radial-gradient(1300px 640px at 50% -14%,color-mix(in srgb,var(--attention) 10%,transparent),transparent 68%),
  radial-gradient(900px 500px at 8% 110%,color-mix(in srgb,var(--room-accent) 7%,transparent),transparent 70%)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
a,button{transition:color .16s ease,background .16s ease,border-color .16s ease,
  box-shadow .16s ease,transform .16s ease,opacity .16s ease}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:var(--text)}

/* v6: the old letterspaced-caps label voice retires to engraved objects
   (plaque-sub, btable-sub keep their own rules); labels read in sentence case */
.label{font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.01em}

/* v6 primitives — sentence-case voice, engineered chips and cards */
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.01em}
.page-title{font-family:var(--sans);font-weight:600;font-size:clamp(24px,2.6vw,30px);
  letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.page-sub{color:var(--muted);font-size:14px;margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:99px;
  font:600 11px var(--sans);letter-spacing:.02em;white-space:nowrap}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip-neutral{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--muted)}
.chip-good{background:var(--good-soft);color:var(--good)}
.chip-amber{background:var(--attention-soft);color:var(--attention-ink)}
.chip-count{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--muted);
  font-variant-numeric:tabular-nums}
.card{background:var(--raise);border:1px solid var(--hairline);border-radius:14px;
  padding:16px 20px 14px;margin-top:16px;
  box-shadow:0 1px 2px var(--shadow-1),0 14px 34px -28px var(--shadow-2)}
.card-attention{box-shadow:inset 3px 0 0 var(--attention),
  0 1px 2px var(--shadow-1),0 14px 34px -28px var(--shadow-2)}
.card-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.card-title{font:600 13.5px var(--sans);color:var(--text)}

/* viewer register toggle — lives inside the seat-chip menu (mock N) */
.register-toggle{display:inline-flex;align-items:center;gap:2px;padding:2px;
  border:1px solid var(--hairline);border-radius:8px}
.register-opt-form{display:inline;margin:0}
.register-opt{appearance:none;border:0;background:transparent;cursor:pointer;
  font:600 10px var(--sans);letter-spacing:.02em;
  color:var(--muted);padding:3px 7px;border-radius:6px}
.register-opt.on{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.register-opt:hover{color:var(--text)}

/* masthead — mock N: place · act · self */
.masthead{display:flex;justify-content:space-between;align-items:center;gap:16px;height:56px;
  padding:0 var(--edge);border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ground) 85%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
.markname{font-family:'Playfair Display',serif;font-weight:600;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase}
.masthead nav{display:flex;gap:6px;align-items:center}
.masthead nav a,.navbtn{font-family:var(--sans);font-size:13px;
  color:var(--muted);text-decoration:none;font-weight:500;background:none;border:0;cursor:pointer;
  padding:8px 11px;border-radius:8px}
.masthead nav a.on{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.masthead nav a:hover,.navbtn:hover{color:var(--text);background:color-mix(in srgb,var(--text) 4%,transparent)}
.masthead nav a.btn,.masthead nav a.btn:hover{color:var(--accent-ink);background:var(--accent-fill);
  padding:0 13px}
.seat-chip{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;flex:none;margin-left:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 10.5px var(--sans);letter-spacing:.05em;background:var(--text);color:var(--ground);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 14%,transparent),0 1px 2px var(--shadow-1)}
.chip-menu-wrap{position:relative;display:inline-flex}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);width:230px;z-index:60;
  background:var(--raise);border:1px solid var(--hairline);border-radius:14px;padding:6px;
  box-shadow:0 18px 50px -18px var(--shadow-2)}
.menu-pop[hidden]{display:none}
.menu-head{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--hairline)}
.menu-name{font:600 13px var(--sans);color:var(--text)}
.menu-sub{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.menu-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:9px 12px;border-radius:9px;font:500 13px var(--sans);color:var(--text);cursor:pointer;
  text-decoration:none;background:none;border:0;text-align:left}
.menu-item:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.menu-item.quiet{color:var(--muted)}
.menu-label{padding:9px 12px 4px;font:500 11px var(--sans);color:var(--muted)}
.menu-pop form{margin:0}

/* flash — a quiet line, not a toast */
.flash{padding:14px var(--edge);border-bottom:1px solid var(--hairline);font-size:13.5px;color:var(--muted)}

/* page scaffold */
main.page{padding:clamp(48px,9vw,130px) var(--edge) 80px;max-width:1400px;margin-inline:auto}
main.page.split{display:grid;grid-template-columns:1.55fr .9fr;gap:clamp(40px,7vw,110px)}
@media(max-width:860px){main.page.split{grid-template-columns:1fr;gap:64px}}

h1{font-family:'Playfair Display',var(--serif);font-weight:500;font-size:clamp(30px,4.2vw,48px);line-height:1.12;letter-spacing:-.01em}
h2{font-family:'Playfair Display',var(--serif);font-weight:500;font-size:clamp(20px,2.6vw,27px);letter-spacing:-.005em}
/* deal names keep the serif — the one signature the room header wears */
h1.room-title{font-size:clamp(26px,3.4vw,40px);line-height:1.14;letter-spacing:-.01em;margin-top:8px}
.stage-label{margin-bottom:26px;display:block}
.lede{color:var(--muted);font-size:15px;max-width:52ch;margin-top:18px}

/* the to-close track (v6 — sentence caps, 2px line) */
.meta{margin-top:6px;color:var(--muted);font-size:14px}
.track{position:relative;margin-top:36px;display:flex;justify-content:space-between}
.track::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;border-radius:2px;
  background:color-mix(in srgb,var(--text) 9%,transparent)}
.track .fill{position:absolute;left:0;top:5px;height:2px;border-radius:2px;
  background:color-mix(in srgb,var(--text) 45%,transparent)}
.node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;width:0}
.node .dot{width:10px;height:10px;border-radius:50%;margin-top:1px;background:color-mix(in srgb,var(--text) 45%,transparent)}
.node.done .dot{background:color-mix(in srgb,var(--text) 45%,transparent)}
.node.future .dot{background:transparent;border:1.5px solid color-mix(in srgb,var(--muted) 60%,transparent);width:9px;height:9px}
.node.now .dot{width:12px;height:12px;margin-top:0;background:var(--attention);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--attention) 20%,transparent)}
.node .cap{font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap}
.node.now .cap{color:var(--text);font-weight:600}
.node:first-child{align-items:flex-start}
.node:last-child{align-items:flex-end}

/* aside groups — separated by space, not boxes */
aside.essentials{display:flex;flex-direction:column;gap:clamp(36px,4vw,52px);padding-top:8px}
.grp .label{display:block;margin-bottom:14px}
.party{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;
  font-size:15px;border-bottom:1px solid var(--hairline)}
.party:last-child{border-bottom:0}
.party .role{color:var(--muted);font-size:12px;letter-spacing:.04em}
.figure{font-family:'Playfair Display',var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,40px);
  letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.figure-sub{color:var(--muted);font-size:12.5px;margin-top:4px}

/* the hall — every deal is a door; hover and it swings ajar */
.hall{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));
  gap:clamp(22px,3vw,30px);margin-top:clamp(30px,4.5vw,44px);max-width:1180px}
.doorcard{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--text)}
.doorframe{position:relative;display:block;aspect-ratio:10/16.5;perspective:1000px;
  border:1px solid var(--hairline);border-radius:10px;
  background:var(--raise);padding:8%;transition:box-shadow .3s ease,border-color .3s ease;
  box-shadow:0 1px 2px var(--shadow-1),0 16px 36px -26px var(--shadow-2)}
.doorcard:hover .doorframe{border-color:color-mix(in srgb,var(--accent) 35%,var(--hairline));
  box-shadow:0 2px 4px var(--shadow-1),0 22px 44px -24px color-mix(in srgb,var(--accent) 25%,var(--shadow-2))}
.door-behind{position:absolute;inset:8%;background:var(--door-behind);overflow:hidden;border-radius:3px}
.door-glow{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(80% 55% at 50% 62%,color-mix(in srgb,var(--attention) 35%,transparent),color-mix(in srgb,var(--attention) 5%,transparent) 65%,transparent)}
.door-tablesil{position:absolute;left:20%;right:20%;bottom:16%;height:11%;border-radius:50%;
  background:var(--table-base);box-shadow:0 -3px 0 color-mix(in srgb,var(--attention) 25%,transparent);opacity:0;transition:opacity .45s ease}
.door-leaf{position:absolute;inset:8%;border-radius:3px;
  background:linear-gradient(165deg,var(--door-leaf-top) 0%,var(--door-leaf-mid) 55%,var(--door-leaf-base) 100%);
  transform-origin:left center;transform:rotateY(0deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--room-text) 10%,transparent),
    inset 0 1px 0 color-mix(in srgb,var(--room-text) 14%,transparent);
  display:flex;align-items:center;justify-content:center}
.door-panel{position:absolute;left:15%;right:15%;border:1px solid color-mix(in srgb,var(--room-text) 12%,transparent);border-radius:1px}
.door-panel.p1{top:7%;height:27%}
.door-panel.p2{bottom:7%;height:34%}
.plaque{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;align-items:center;
  text-align:center;max-width:82%;padding:8px 10px;
  border-top:1px solid color-mix(in srgb,var(--room-text) 25%,transparent);border-bottom:1px solid color-mix(in srgb,var(--room-text) 25%,transparent)}
.plaque-name{font-family:'Playfair Display',var(--serif);font-weight:500;font-size:13.5px;
  line-height:1.25;color:var(--room-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.plaque-sub{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--room-muted)}
.door-knob{position:absolute;right:9%;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--attention);box-shadow:0 0 0 2px color-mix(in srgb,var(--attention) 25%,transparent)}
.doorcard:hover .door-leaf{transform:rotateY(-32deg)}
.doorcard:hover .door-glow,.doorcard:hover .door-tablesil{opacity:1}
.mode-personal .door-leaf{background:linear-gradient(165deg,var(--door-leaf-personal),var(--door-leaf-base))}
.door-meta{display:flex;flex-direction:column;gap:3px;padding:0 2px}
.door-status{font-size:12px;color:var(--muted);letter-spacing:.01em;line-height:1.45}
.door-stage{font-weight:600;color:var(--text)}
.door-stage.st-in_progress{color:var(--accent)}
.door-stage.st-ready_to_close,.door-stage.st-closed{color:var(--good)}
.door-value{font-family:'Playfair Display',var(--serif);font-weight:500;font-size:16.5px;margin-top:1px;
  font-variant-numeric:tabular-nums}
.door-enter{font-size:11.5px;font-weight:600;color:var(--accent);opacity:0;transform:translateX(-4px);
  transition:opacity .3s ease,transform .3s ease;margin-top:4px}
.door-enter .arw{color:inherit}
.doorcard:hover .door-enter{opacity:1;transform:none}
.door-new .doorframe{border-style:dashed;background:transparent}
.door-new .door-leaf{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hairline)}
.door-new .plaque{border-color:var(--hairline)}
.door-new .plaque-name{color:var(--muted)}
.door-new:hover .door-leaf{transform:rotateY(-14deg);box-shadow:inset 0 0 0 1.5px var(--accent)}
@media (prefers-reduced-motion:reduce){
  .door-leaf,.door-new .door-leaf{transition:none}
  .doorcard:hover .door-leaf{transform:none}
  .door-enter{opacity:1;transform:none}
}

/* room list — a ledger, not cards */
.roomrow{display:block;text-decoration:none;padding:26px 0;border-bottom:1px solid var(--hairline)}
.roomrow .title{font-family:'Playfair Display',var(--serif);font-weight:500;font-size:clamp(20px,2.6vw,27px);letter-spacing:-.005em}
.roomrow .sub{margin-top:4px;color:var(--muted);font-size:13px}
.roomrow:hover .title{color:var(--accent)}

/* forms */
form.sheet{max-width:520px;display:flex;flex-direction:column;gap:28px;margin-top:clamp(36px,5vw,56px)}
/* A sheet nested inside a panel that already provides the page's margins. */
form.sheet.sheet-inpanel{max-width:none;gap:18px;margin-top:14px}
.field label{display:block;font-size:12px;
  color:var(--muted);font-weight:500;margin-bottom:8px}
.field input[type=text],.field input[type=email],.field input[type=password],.field select{
  width:100%;background:var(--raise);border:1px solid var(--hairline);
  color:var(--text);font-family:var(--sans);font-size:15px;font-weight:400;
  padding:11px 14px;outline:none;border-radius:9px;
  transition:border-color .16s ease,box-shadow .16s ease}
.field input:focus,.field select:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
/* A file input is not in the width:100% list above — it carries an intrinsic
   width (its own button plus room for a filename) that no rule constrained, so
   on a 320 phone the upload field pushed the whole document sideways. */
.field input[type=file]{max-width:100%}
.field select option{background:var(--raise);color:var(--text);font-family:var(--sans);font-size:14px}
.hint{color:var(--muted);font-size:12.5px;margin-top:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  background:var(--accent-fill);border:1px solid transparent;color:var(--accent-ink);
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.005em;
  text-decoration:none;padding:9px 18px;border-radius:10px;white-space:nowrap;
  box-shadow:0 1px 2px var(--shadow-1),0 8px 20px -12px color-mix(in srgb,var(--accent-fill) 60%,transparent);
  transition:filter .15s ease,transform .15s ease,background .15s ease,border-color .15s ease}
.btn .arw{color:color-mix(in srgb,var(--accent-ink) 75%,transparent);transition:transform .18s ease}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:hover .arw{transform:translateX(3px)}
.btn:active{transform:translateY(0);filter:brightness(.98)}
.btn-primary{background:var(--accent-fill);color:var(--accent-ink)} /* alias — .btn is primary */
.btn-soft,.btn.soft{background:var(--accent-soft);color:var(--accent);box-shadow:none}
.btn-soft:hover,.btn.soft:hover{filter:brightness(.98);transform:none}
.btn.quiet,.btn-ghost{background:transparent;border-color:var(--hairline);color:var(--text);
  font-weight:500;box-shadow:none;font-size:12.5px;padding:8px 15px}
.btn.quiet .arw,.btn-ghost .arw{color:var(--accent)}
.btn.quiet:hover,.btn-ghost:hover{border-color:color-mix(in srgb,var(--text) 30%,var(--hairline));
  color:var(--text);transform:none;filter:none;box-shadow:none}
.btn-sm,.btn.sm{padding:7px 13px;font-size:12.5px;border-radius:9px}
.textlink{font:600 13px var(--sans);color:var(--accent);text-decoration:none;white-space:nowrap}
.textlink:hover{filter:brightness(1.1)}
.textlink.quiet{color:var(--text)}
.textlink.quiet:hover{color:var(--accent);filter:none}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--bad) 45%,var(--hairline));
  color:var(--bad);box-shadow:none}
.btn-danger:hover{border-color:var(--bad);filter:none;transform:none}

/* designed confirm — replaces the native browser confirm platform-wide */
/* The dialog element itself carries no padding: hit-testing attributes both
   the ::backdrop and the dialog's own padding box to the dialog, so a padded
   dialog turns a 20px band around the visible panel into a silent cancel. The
   padding lives on the inner wrapper, leaving e.target === dialog to mean the
   backdrop and nothing else. */
/* margin:auto is what centres a modal dialog — the UA stylesheet sets it and
   the `*{margin:0}` reset above wipes it, which pins every confirm to the top
   left corner. Restated here, not removed from the reset. */
dialog.confirm-dialog{width:min(400px,calc(100vw - 48px));background:var(--raise);color:var(--text);
  border:1px solid var(--hairline);border-radius:16px;padding:0;margin:auto;
  box-shadow:0 24px 70px -20px var(--shadow-2)}
.dialog-inner{padding:20px 22px 18px}
dialog.confirm-dialog::backdrop{background:color-mix(in srgb,var(--graphite) 45%,transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dialog-title{font:600 15px var(--sans)}
.dialog-body{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:8px}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

.errors{color:var(--bad);font-size:13.5px;line-height:1.7}

/* mode chooser (guided start) — v6 door-tiles */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(30px,5vw,44px);max-width:760px}
@media(max-width:700px){.modes{grid-template-columns:1fr;max-width:440px}}
.mode{display:block;text-decoration:none;padding:26px 26px 22px;border:1px solid var(--hairline);
  border-radius:16px;background:var(--raise);
  box-shadow:0 1px 2px var(--shadow-1),0 18px 40px -30px var(--shadow-2);
  transition:border-color .2s ease,transform .2s ease}
.mode:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--hairline));transform:translateY(-2px)}
.mode .name{font-family:var(--serif);font-weight:500;font-size:22px}
.mode .desc{color:var(--muted);font-size:13.5px;margin-top:8px;max-width:34ch;line-height:1.55}
.mode:hover .name{color:var(--accent)}

/* activity — a quiet ledger */
.event{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hairline);font-size:13.5px}
.event:last-child{border-bottom:0}
.event .when{color:var(--muted);font-size:11px;letter-spacing:.06em;white-space:nowrap;flex:none}
.event .who{font-weight:500}
.activity-ledger{list-style:none;margin:4px 0 0;padding:0;position:relative}
.activity-ledger::before{content:"";position:absolute;left:6.4rem;top:8px;bottom:8px;width:1px;
  background:var(--hairline)}
.activity-ledger .event{border-bottom:0;padding:11px 0 11px 1.4rem;position:relative}
.activity-ledger .event .when{width:5.4rem;text-align:right;font-variant-numeric:tabular-nums;
  font-size:11.5px;letter-spacing:0}
.activity-ledger .event::before{content:"";position:absolute;left:calc(6.4rem - 3px);top:1.05em;
  width:7px;height:7px;border-radius:50%;background:var(--raise);
  border:1.5px solid color-mix(in srgb,var(--muted) 70%,transparent)}
.activity-ledger .event-body{min-width:0;font-size:13.5px;line-height:1.5}
.activity-ledger .who{font-weight:600}

/* checklist — filled vs open, never badges */
.clrow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--hairline)}
.clrow:last-of-type{border-bottom:0}
.clmark{background:none;border:0;padding:0;cursor:pointer;line-height:1;margin-top:3px}
.cldot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid var(--muted);
  vertical-align:baseline;transition:background .2s ease-out}
.cldot.filled{background:var(--text);border-color:var(--text)}
.clmark:hover .cldot{border-color:var(--text)}
.clbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.cltitle{font-size:15px;line-height:1.35}
.clrow.done .cltitle{color:var(--muted)}
.clmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--muted);
  font-size:11.5px;letter-spacing:.04em}
.clcat{font-size:11.5px;text-transform:capitalize}

/* vault — a quiet ledger of documents */
.docrow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--hairline)}
.docrow:last-child{border-bottom:0}
.doc-main{min-width:0;display:flex;flex-direction:column;gap:6px}
.doc-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.doclink{font-weight:500;font-size:15px;color:var(--text);text-decoration:none}
.doclink:hover{color:var(--attention)}
.doc-meta{color:var(--muted);font-size:12px;letter-spacing:.03em;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;justify-content:flex-end;text-align:right}
.doc-sigs{display:flex;flex-wrap:wrap;gap:6px}
input[type=file]{font-size:13px;color:var(--muted)}
input[type=file]::file-selector-button{font:500 12px var(--sans);color:var(--text);background:none;
  border:1px solid var(--hairline);padding:7px 14px;margin-right:12px;cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--muted)}

/* discussion — message bubbles (theirs left with avatar, mine right/accent-fill) */
.msg{display:flex;align-items:flex-end;gap:9px;margin:10px 0;max-width:78%}
.msg .msg-av{width:26px;height:26px;font-size:9px;flex:none;margin-left:0;border-color:var(--ground)}
.msg-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.msg.mine{align-self:flex-end;margin-left:auto}
.msg.mine .msg-av{display:none}
.msg.mine .msg-body{align-items:flex-end}
#messages{display:flex;flex-direction:column}
.msg-meta{font-size:10.5px;color:var(--muted);margin:0 6px 3px}
.msg-meta .who{font-weight:600;color:var(--text)}
.msg.mine .msg-meta .who{color:var(--muted)}
.msg .role-tag{letter-spacing:.05em;margin:0 4px}
.msg .when{letter-spacing:.03em}
.bubble{background:var(--raise);border:1px solid var(--hairline);color:var(--text);
  padding:10px 14px;border-radius:16px;border-bottom-left-radius:5px;
  font-size:14px;line-height:1.5;overflow-wrap:anywhere;
  box-shadow:0 4px 14px -10px var(--shadow-2)}
.msg.mine .bubble{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink);
  border-radius:16px;border-bottom-right-radius:5px}

/* inline management rows */
.mrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--hairline);font-size:13.5px}
.mrow:last-child{border-bottom:0}
.muted{color:var(--muted)}
.mrow code{font-family:var(--sans);font-size:12px;color:var(--muted);word-break:break-all}

.inline-form{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:14px}
.inline-form.inline-form-tight{margin-top:12px}
.inline-form.inline-form-loose{margin-top:16px}
.inline-form .field{flex:1;min-width:160px}
@media(max-width:560px){.inline-form .field{flex:1 1 100%}}
.inline-form .field input,.inline-form .field select{font-size:15px}

.empty{margin-top:clamp(48px,7vw,84px)}
.empty p{color:var(--muted);font-size:15px;max-width:44ch;margin-top:14px}

/* brand */
.mark .tm{font-size:.45em;vertical-align:super;letter-spacing:0;color:var(--muted)}

/* guest save banner */
.guest-banner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 18px;margin-bottom:34px;border:1px solid var(--vermilion);border-radius:4px;font-size:14px}

/* room panels — v6 cards (class rename to .card lands in the sweep PR) */
.rpanel{background:var(--raise);border:1px solid var(--hairline);border-radius:14px;
  padding:16px 20px 16px;margin-top:16px;
  box-shadow:0 1px 2px var(--shadow-1),0 14px 34px -28px var(--shadow-2)}
body.room-dark .rpanel{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--chalk) 4.5%,transparent),
  0 1px 2px var(--shadow-1),0 14px 34px -28px var(--shadow-2)}
.rpanel-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--hairline)}
.rpanel-title{font-weight:600;font-size:13.5px}
.rbadge{font-size:11px;font-weight:600;letter-spacing:.02em;height:22px;display:inline-flex;
  align-items:center;padding:0 9px;border-radius:99px;
  background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.rbadge-done{background:var(--good-soft);color:var(--good)}
.rbadge-closes{background:var(--attention-soft);color:var(--attention-ink);margin-right:6px}
.rbadge-org{background:var(--accent-soft);color:var(--accent);margin-left:8px;vertical-align:middle}
/* Action links are quiet text — not a second accent colour competing with the live mark */
.rbar-link{font-size:12px;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--hairline)}
.rbar-link:hover{border-bottom-color:var(--attention);color:var(--attention)}

/* checklist ticks — green when done, like the landing conditions */
.cltick{display:inline-flex;width:18px;height:18px;border-radius:50%;flex:none;
  border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent);align-items:center;justify-content:center;transition:all .15s}
.cltick.on{background:var(--good);border-color:var(--good);position:relative}
.cltick.on::after{content:"";width:8px;height:4.5px;border-left:1.5px solid var(--chalk);border-bottom:1.5px solid var(--chalk);
  transform:rotate(-45deg) translate(0,-1px)}
.clmark:hover .cltick{border-color:var(--good)}
.clcond-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);white-space:nowrap;
  padding-bottom:9px}
.clcond-check input{accent-color:var(--vermilion)}

/* tucked-away template library */
.rdetails{margin-top:12px;border-top:1px solid var(--hairline);padding-top:10px}
.rdetails summary{font-size:12.5px;color:var(--muted);cursor:pointer}
.rdetails summary:hover{color:var(--text)}

/* party avatars (from the landing panels) */
.avatars{display:flex}
.av{width:26px;height:26px;border-radius:50%;border:2px solid var(--raise);display:inline-flex;
  align-items:center;justify-content:center;font-size:9.5px;font-weight:600;color:var(--chalk);margin-left:-7px}
.av:first-child{margin-left:0}
.role-form select{border:1px solid var(--hairline);border-radius:4px;background:var(--raise);color:var(--text);
  font:500 12px var(--sans);padding:4px 6px}

/* chat page */
.chatpage{max-width:820px;display:flex;flex-direction:column;min-height:calc(100vh - 90px);padding-bottom:32px}
.chat-here{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.chat-here .room-lead-title{margin:0;margin-right:auto}
.here-avs{display:flex}
.here-avs .av-wrap{margin-left:-6px}
.here-avs .av-wrap:first-child{margin-left:0}
.here-avs .av{width:24px;height:24px;font-size:8.5px;margin-left:0}
.here-label{font-size:12px;color:var(--muted)}
.typing{min-height:20px;font-size:12px;color:var(--muted);font-style:italic;
  padding:2px 4px;opacity:0;transition:opacity .25s ease}
.typing.on{opacity:1}
.chat-scroll{flex:1;overflow-y:auto;padding:10px 0}
.chat-empty{padding:28px 0 12px}
.chat-composer{position:sticky;bottom:0;background:var(--ground);padding:12px 0 4px;
  border-top:1px solid var(--hairline);gap:10px}
.chat-composer .field input,#composer .field input{background:var(--raise);border:1px solid var(--hairline);
  border-radius:99px;padding:12px 20px;font:400 14.5px var(--sans);width:100%;
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--graphite) 15%,transparent)}
.chat-composer .field input:focus,#composer .field input:focus{border-color:var(--accent);outline:none;
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--graphite) 15%,transparent),0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.chat-composer .btn{background:var(--accent-fill);color:var(--accent-ink);border-radius:99px;padding:10px 20px;font-weight:600}
.chat-composer .btn .arw{color:var(--accent-ink)}
.chat-composer .btn:hover{filter:brightness(1.06);color:var(--accent-ink)}

/* room page with tabs + dashboard */
main.page.roompage{max-width:1680px;padding-top:40px;padding-bottom:56px}
.masthead{max-width:none}
.room-head-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.room-head-value{text-align:right;flex:none}
.room-head-value .figure{font-size:clamp(34px,4.5vw,52px)}
.room-stage-word{color:var(--attention);font-weight:600}
.room-tabs{display:flex;gap:2px;margin-top:26px;border-bottom:1px solid var(--hairline);
  overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.room-tabs::-webkit-scrollbar{display:none}
.room-tab{font:600 13px var(--sans);color:var(--muted);
  text-decoration:none;padding:11px 12px;border-bottom:2px solid transparent;margin-bottom:-1px;
  border-radius:8px 8px 0 0;white-space:nowrap;flex:none}
.room-tab:hover{color:var(--text);background:color-mix(in srgb,var(--text) 4%,transparent)}
.room-tab.on{color:var(--text);border-bottom-color:var(--tab-mark)}
.room-tab-edit{margin-left:auto;color:var(--muted)}
/* Direction A — compact sticky strip on inner pages; full ceremony stays on The Room */
/* Full-bleed strip. 100vw counts the scrollbar gutter, so on a phone the
   strip lands 8-15px wider than the page and the whole document scrolls
   sideways; the percentage form measures the containing block instead and
   bleeds by exactly the page's own edge padding. */
.room-head-compact{width:auto;position:relative;
  margin-left:calc(var(--edge) * -1);margin-right:calc(var(--edge) * -1);padding:0}
.room-strip{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);padding:0 var(--edge)}
.strip-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 0 0;max-width:1100px;margin:0 auto}
.strip-id{display:flex;align-items:baseline;gap:12px;min-width:0;flex-wrap:wrap}
.strip-title{font-family:var(--serif);font-weight:500;font-size:16.5px;color:var(--text);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(42ch,55vw)}
.strip-title:hover{color:var(--accent)}
.strip-stage{font-size:12.5px;font-weight:600;color:var(--attention);white-space:nowrap}
.stage-dots{display:inline-flex;gap:5px;align-items:center}
.stage-dots i{width:5px;height:5px;border-radius:50%;display:block;
  background:color-mix(in srgb,var(--muted) 45%,transparent)}
.stage-dots i.done{background:color-mix(in srgb,var(--text) 55%,transparent)}
.stage-dots i.on{background:var(--attention);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--attention) 22%,transparent)}
.strip-value{display:flex;align-items:baseline;gap:10px;flex:none;white-space:nowrap}
.strip-figure{font-family:var(--serif);font-weight:500;font-size:16.5px;font-variant-numeric:tabular-nums}
.strip-note{font-size:11.5px;color:var(--muted)}
.room-tabs-compact{margin-top:8px;max-width:1100px;margin-left:auto;margin-right:auto;padding-top:0}
.room-head-compact .room-tabs-compact .room-tab{padding:9px 12px;font-size:11.5px}
/* inner pages — quieter than the boardroom; one lead, one job */
.roompage-inner{max-width:1100px}
main.page.roompage.roompage-inner{padding-top:28px}
.chatpage.roompage-inner{padding-top:28px}
.room-lead{margin:26px 0 6px;max-width:54ch}
.room-lead-compact{margin-top:22px;margin-bottom:0;padding-bottom:14px;border-bottom:1px solid var(--hairline);
  max-width:none}
.room-lead-title{font-family:var(--sans);font-weight:600;font-size:clamp(1.5rem,2.6vw,1.7rem);
  letter-spacing:-.02em;line-height:1.15;margin:0 0 .4rem}
.room-lead-copy{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.room-empty{margin:0;padding:8px 0 4px;color:var(--muted);font-size:14px;line-height:1.5;max-width:48ch}
.rpanel-quiet{background:transparent;border:0;border-radius:0;padding:8px 0 4px;margin-top:18px;
  box-shadow:none}
body.room-dark .rpanel-quiet{box-shadow:none;border-top:1px solid var(--hairline);padding-top:18px}
.rpanel-quiet .rpanel-bar{border-bottom-color:color-mix(in srgb,var(--hairline) 80%,transparent)}
.rpanel-attention{border-color:color-mix(in srgb,var(--attention) 35%,var(--hairline));
  background:color-mix(in srgb,var(--attention) 6%,var(--raise))}
.rcount{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);white-space:nowrap;
  height:22px;display:inline-flex;align-items:center;padding:0 9px;border-radius:99px;
  background:color-mix(in srgb,var(--text) 6%,transparent);font-variant-numeric:tabular-nums}
.rcount.is-done{background:var(--good-soft);color:var(--good)}
.mark-closes{font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:var(--attention-ink);background:var(--attention-soft);border-radius:99px;padding:2px 8px}
.mark-closes:not(.on){color:var(--muted);background:color-mix(in srgb,var(--text) 6%,transparent)}
.mark-closes:not(.on):hover{color:var(--attention-ink);background:var(--attention-soft)}
.mark-org{font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:var(--attention-ink);background:var(--attention-soft);border-radius:99px;padding:2px 8px;margin-left:8px}
.sig-mark{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-decoration:none;
  background:color-mix(in srgb,var(--text) 6%,transparent);border-radius:99px;padding:2px 9px;white-space:nowrap}
.sig-mark.done{background:var(--good-soft);color:var(--good)}
.sig-mark.needs{background:var(--attention-soft);color:var(--attention-ink)}
a.sig-mark:hover{filter:brightness(.96)}
.people-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(22px,3vw,40px);
  align-items:start;margin-top:8px}
.people-grid > .rpanel:last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:900px){.people-grid{grid-template-columns:1fr}}
.party-list{display:flex;flex-direction:column}
.party-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px 14px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--hairline)}
.party-row:last-child{border-bottom:0}
.party-row .av{margin-left:0;width:34px;height:34px;font-size:11px}
.party-id{min-width:0;display:flex;flex-direction:column;gap:2px}
.party-name{font-size:14.5px;font-weight:500}
.party-sub{font-size:11.5px;color:var(--muted)}
.party-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.invite-list{margin-top:14px}
.share-block{margin-top:22px}
.share-block .label{display:block;margin-bottom:10px}
.share-meta{display:flex;gap:12px;align-items:baseline;white-space:nowrap}
.svc-status{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--attention);
  white-space:nowrap}
/* the table read — one quiet sentence, not KPI widgets */
.table-read{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin:24px 0 16px;
  padding:12px 0;border-bottom:1px solid var(--hairline);font-size:13.5px;color:var(--muted)}
.table-read strong{font-weight:600;font-size:14.5px;
  color:var(--text);font-variant-numeric:tabular-nums}
.table-read .sep{color:color-mix(in srgb,var(--muted) 40%,transparent)}

/* the table scene — the main view: parties seated around the boardroom table */
.scene-hero{background:var(--raise);border:1px solid var(--hairline);border-radius:14px;
  padding:18px 22px 14px;margin:4px 0 22px;overflow:visible;position:relative;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--chalk) 5%,transparent),0 1px 2px var(--shadow),0 24px 60px -34px var(--shadow)}
.scene-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 50% 118%,color-mix(in srgb,var(--attention) 12%,transparent),transparent 70%)}
.scene-bar{display:flex;align-items:baseline;gap:8px 16px;padding-bottom:12px;
  border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.scene-live{white-space:nowrap}
@media(max-width:700px){
  .scene-ball-note{flex-basis:100%;order:3;font-size:11.5px}
  .scene-bar .rbar-link{margin-left:auto}
}
.scene-bar .rbar-link{margin-left:auto}
.scene-live{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent);animation:livepulse 2.4s ease-out infinite}
@keyframes livepulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){.livedot{animation:none}}
.av-wrap{position:relative;display:inline-flex}
.av-live{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;
  border:2px solid var(--raise);box-sizing:content-box}
.bseat.away{opacity:.5}
/* The Desk (2026-08-24): the table is a card. Seats sit in one row and scroll
   sideways on a phone; the note and the floor live beneath. The oval and the
   ellipse arithmetic are gone; the seat markup and every class the floor
   controller sets are not. */
.scene.presence{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;scrollbar-width:none;
  padding:14px 2px 6px;margin:0}
.scene.presence::-webkit-scrollbar{display:none}
.bseat{position:relative;flex:none;width:72px;display:flex;flex-direction:column;
  align-items:center;gap:4px;text-align:center;text-decoration:none;transition:transform .25s ease}
.bseat:hover{transform:translateY(-2px)}
.bseat .av{width:40px;height:40px;font-size:12px;margin-left:0;border-color:var(--ground);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--room-accent) 22%,transparent),0 6px 14px -6px color-mix(in srgb,var(--graphite) 80%,transparent)}
.bseat-name{font-size:11px;font-weight:500;color:var(--text);max-width:72px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bseat-role{font-size:10.5px;color:var(--muted)}
.av-open{background:transparent;border:1.5px dashed var(--muted);color:var(--muted)}
.bseat-open:hover .av-open{border-color:var(--accent);color:var(--accent)}
.bseat-open:hover .bseat-name{color:var(--accent)}
@media(max-width:640px){
  .seat-bubble{display:none}
}

/* the boardroom — walls left/right, the table at center */
.boardroom{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,2.4fr) minmax(240px,360px);
  gap:clamp(26px,3.5vw,64px);align-items:start}
.table{display:flex;flex-direction:column;gap:18px;min-width:0}
.table .rpanel{margin-top:0}
.wall{min-width:0}
.wall-bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--hairline)}
.seat{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hairline)}
.seat:last-of-type{border-bottom:0}
.seat-id{display:flex;flex-direction:column;min-width:0}
.seat-name{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat-role{font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.wall .event{font-size:12.5px;gap:10px}
@media(max-width:1100px){.boardroom{grid-template-columns:1fr;gap:22px}
  .table{order:-1}}
.ovgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.ovcol{display:flex;flex-direction:column;gap:18px;min-width:0}
.ovcol .rpanel{margin-top:0}
@media(max-width:900px){.ovgrid{grid-template-columns:1fr}}

/* command-center + inner-page responsiveness */
@media(max-width:760px){
  /* The composer is input + Send + a nowrap link; on a phone that trio is
     wider than the screen and takes the whole document sideways with it.
     Let it wrap and give the link its own line. */
  .table-composer{flex-wrap:wrap}
  .table-composer input{flex:1 1 100%;min-width:0}
  .table-composer-link{white-space:normal}
  /* Panel headers are title + badges + an action, side by side with no wrap.
     On a phone that row is wider than the screen — the Deal Drafts header
     ("Make private") took the whole document sideways. Let it wrap. */
  .rpanel-bar{flex-wrap:wrap}
  .roompage{padding-top:20px}
  .markname{font-size:11px;letter-spacing:.11em;white-space:nowrap}
  .masthead{height:52px;padding:0 16px}
  .masthead nav{gap:2px}
  .masthead nav a,.navbtn{font-size:12.5px;padding:7px 9px}
  .masthead nav a.btn{display:none} /* the act folds into the seat-chip menu on the phone */
  /* M5 — density from smaller doors, never door-as-card */
  .hall{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px}
  .plaque-name{font-size:11.5px}
  .door-value{font-size:15px}
  .room-head-top{flex-direction:column;gap:14px}
  .room-head-value{text-align:left}
  .room-head-value .figure{font-size:clamp(30px,9vw,40px)}
  .track{margin-top:22px !important}
  /* M3 — the dots carry the shape; only the live stage keeps its word */
  .track .node:not(.now) .cap{display:none}
  /* M4 — scrollable tabs fade at the cut edge. The mask is applied only while
     there is more strip to the right (tab-scroll controller), because a mask
     paints against the border box, not the content: left on unconditionally it
     half-erases the last tab at every scroll position, including the end. */
  .room-tabs.tabs-faded{-webkit-mask-image:linear-gradient(90deg,black calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,black calc(100% - 40px),transparent)}
  .room-tabs{margin-top:22px}
  .room-tab{padding:10px 10px}
  .room-tab-edit{margin-left:0}
  .room-strip{padding:0 16px}
  .strip-meta{flex-wrap:wrap;gap:6px 12px;padding-top:12px}
  .strip-id{gap:8px 10px}
  .strip-title{max-width:100%;font-size:1.05rem}
  .strip-figure{font-size:1.05rem}
  .strip-note{font-size:10px}
  .room-tabs-compact{margin-top:6px}
  .room-head-compact .room-tabs-compact .room-tab{padding:8px 10px;font-size:11px}
  .room-lead{margin-top:18px;max-width:none}
  .room-lead-title{font-size:clamp(1.45rem,7vw,1.9rem)}
  .room-lead-copy{font-size:14px}
  main.page.roompage.roompage-inner{padding-top:16px;padding-bottom:40px}
  .masthead{padding:16px 16px}
  .chatpage{min-height:calc(100vh - 64px);padding-bottom:24px}
  .chat-composer{gap:8px}
  .chat-composer .btn{padding:10px 14px}
  .docrow{flex-direction:column;gap:8px}
  .doc-meta{justify-content:flex-start;text-align:left}
  .svcrow{flex-direction:column;align-items:flex-start;gap:10px}
  .party-row{grid-template-columns:auto 1fr;gap:10px 12px}
  .party-actions{grid-column:1 / -1;justify-content:flex-start}
  .activity-ledger::before{left:.55rem}
  .activity-ledger .event{padding-left:1.5rem;flex-direction:column;gap:4px}
  .activity-ledger .event::before{left:calc(.55rem - 3px)}
  .activity-ledger .when{white-space:normal}
  .ws-head{gap:12px;margin-top:14px}
  .ws-name{font-size:1.25rem}
  .agenda-add.inline-form{flex-direction:column;align-items:stretch}
  .share-meta{white-space:normal;flex-wrap:wrap}
  .mrow{flex-wrap:wrap;gap:8px}
  .mrow code{font-size:11px}
}
/* The staff masthead carries one link more than a member's (Operations ·
   Your Rooms), and at 320 the wordmark plus that nav is 383px wide — the whole
   document goes sideways. The mark yields first: the brandmark keeps *place* in
   the ranking and the seat chip stays the control (DESIGN.md, mock N: "on the
   phone the chip is the control"). Held below 380 so the 390 phone target, and
   every width that already fits, is untouched. */
@media(max-width:380px){
  .masthead{gap:10px}
  .mark{min-width:0}
  .markname{display:none}
}
@media(max-width:420px){
  .strip-value{width:100%;justify-content:space-between}
  .stage-dots{display:none} /* title + stage word carry the signal; dots are desktop chrome */
  .room-tab-edit{margin-left:0}
}

/* ceremonies (v6) — the close, the signature, the records */
body.sealed-record::before{background:none}
.ceremony{max-width:640px}
.ceremony-title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.6vw,38px);
  line-height:1.14;letter-spacing:-.01em;margin-top:10px}
.ceremony-lede{color:var(--muted);font-size:15px;line-height:1.65;max-width:52ch;margin-top:14px}
.ceremony-lede strong{color:var(--text);font-weight:600}
.ceremony-actions{display:flex;gap:14px;align-items:center;margin-top:28px;flex-wrap:wrap}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.6;
  color:var(--text);cursor:pointer;text-transform:none;letter-spacing:0}
.consent input{margin-top:4px;accent-color:var(--accent);width:15px;height:15px;flex:none}
.wire-ref{font:600 13px var(--sans);letter-spacing:.08em;color:var(--text)}
.hash{font:400 11.5px var(--sans);letter-spacing:.02em;color:var(--muted);word-break:break-all;
  text-align:right}
.seal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:14px}
.seal-mark{flex:none;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:var(--attention-ink);
  border:1.5px solid color-mix(in srgb,var(--attention-ink) 55%,transparent);
  box-shadow:inset 0 0 0 3px var(--raise),inset 0 0 0 4px color-mix(in srgb,var(--attention-ink) 30%,transparent)}

/* brand lockup for auth pages and empty states */
.brandlock{display:flex;align-items:center;gap:11px;margin-bottom:clamp(28px,4vw,44px);color:var(--text)}
.brandlock span{font-family:'Playfair Display',serif;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase}

/* checklist evidence */
.evlink{color:var(--text);text-decoration:none;font-weight:600;border-bottom:1px solid var(--hairline)}
.evlink:hover{color:var(--attention);border-bottom-color:var(--attention)}
.evlink:hover{text-decoration:underline}
.evform{display:inline-block}
.evform select{border:0;background:none;color:var(--muted);font:500 11.5px var(--sans);padding:0;cursor:pointer}
.evform select:hover{color:var(--text)}

/* signature chips on vault rows */
.sigchip{margin-left:8px;text-decoration:none;vertical-align:middle}
a.sigchip:hover{filter:brightness(1.12)}

/* services — à la carte menu (own page) */
.svcrow{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--hairline)}
.svcrow:last-of-type{border-bottom:0}
.svc-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.svc-name{font-size:15px;font-weight:500}
.svc-blurb{font-size:13px;color:var(--muted);line-height:1.45;max-width:46ch}
.svc-order{border:0;border-radius:9px;padding:7px 13px;white-space:nowrap;cursor:pointer;
  font:600 12.5px var(--sans);background:var(--accent-soft);color:var(--accent)}
.svc-order:hover{filter:brightness(.98)}

/* my work */
.ws-head{display:flex;align-items:center;gap:14px;margin:18px 0 10px;padding-bottom:16px;
  border-bottom:1px solid var(--hairline)}
.ws-head .av{margin-left:0}
.ws-name{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.01em}
.ws-role{font-size:12.5px;color:var(--muted)}
.ws-role strong{color:var(--text);font-weight:600}

/* who has the ball — accountability at the table */
.scene-ball-note{font-size:11.5px;font-weight:600;color:var(--attention-ink);
  background:var(--attention-soft);border-radius:99px;padding:3px 10px;
  display:inline-flex;align-items:center;gap:6px}
.btable-wait{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--attention);margin-top:4px}
.table-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
  margin-top:6px;padding-top:10px;border-top:1px solid var(--hairline)}
.table-note{font-size:13px;color:var(--muted)}
.table-note b{color:var(--text);font-weight:600}
.table-card .scene-hero{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.table-card .floor-bar{background:var(--raise);border:1px solid var(--hairline);border-top:0;
  border-radius:0 0 14px 14px;padding:10px 22px 12px;margin-bottom:22px}
.table-card .facewall{margin-top:0}
.seat-ball{font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--attention-ink);
  background:var(--attention-soft);
  border-radius:99px;padding:2px 9px;margin-top:3px;white-space:nowrap}
.seat-open-count{font-size:9.5px;color:var(--muted);margin-top:3px}
/* The handed ball. Same amber as the waiting-on chip because it is the same
   object, but filled rather than tinted once the floor is actually taken —
   holding the ball is potential, taking the floor is happening. The shadows
   are mixed from --graphite rather than a literal navy so they follow the
   skin, which is what main's redesign made possible. */
.seat-floor{font-size:9.5px;font-weight:600;letter-spacing:.05em;color:var(--attention);
  background:color-mix(in srgb,var(--attention) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--attention) 45%,transparent);
  border-radius:99px;padding:2px 8px;margin-top:3px;white-space:nowrap}
.bseat.on-the-floor .seat-floor{background:var(--attention);color:var(--graphite);border-color:var(--attention)}
.bseat.holds-floor .av{box-shadow:0 0 0 2px color-mix(in srgb,var(--attention) 55%,transparent),
  0 4px 12px -4px color-mix(in srgb,var(--graphite) 80%,transparent)}
.bseat.holds-floor .seat-video{border-width:2px;
  border-color:color-mix(in srgb,var(--attention) 55%,transparent)}
.bseat.on-the-floor .av,.bseat.on-the-floor .seat-video{border-color:var(--attention);
  box-shadow:0 0 0 2px var(--attention),0 4px 12px -4px color-mix(in srgb,var(--graphite) 80%,transparent)}
.scene-floor-note{font-size:12px;font-weight:600;color:var(--attention);
  display:inline-flex;align-items:center;gap:6px}
.bseat.blocking .av{box-shadow:0 0 0 2px color-mix(in srgb,var(--attention) 55%,transparent),0 4px 12px -4px color-mix(in srgb,var(--graphite) 80%,transparent)}
.bseat.blocking{opacity:1}

/* the live floor — a party's camera fills the round they already sit in. The
   seating is the layout, and this is still the view you arrive in. It holds
   for one or two people on camera and stops holding beyond that, which is why
   .facewall above exists as a second view rather than as a replacement. The
   avatar stays in flow underneath (visibility, not display), which is what
   lets a muted camera fall back to initials at the same size, in the same
   seat. */
.floor-bar{display:flex;align-items:center;gap:12px;padding-bottom:10px;flex-wrap:wrap}
.floor-status{font-size:12px;color:var(--muted)}
/* The ball's own button. Amber rather than the room's indigo, because it is
   the ball — and filled while the floor is actually held, so the person
   holding a room quiet can see that they are. */
.ballbtn{border-color:color-mix(in srgb,var(--attention) 55%,transparent);color:var(--attention)}
.ballbtn:hover{border-color:var(--attention);color:var(--attention)}
.ballbtn.holding{background:var(--attention);border-color:var(--attention);color:var(--graphite);font-weight:600}
.ballbtn.holding:hover{background:var(--attention);color:var(--graphite);filter:brightness(1.06)}
/* Faces — the second view, and the one you reach for when there are more
   people on camera than a seat-sized round can carry. The table stays the home
   view and keeps the room's identity; this is where the faces get big enough
   to read. Two rules keep it from being a call:
     1. It is still the room — same skin, same surface, same amber.
     2. The floor still organises it. A grid of equals says nothing about who
        is speaking to whom; the moment someone takes the floor the grid
        reorganises around them, which a call would never do.
   Built by the controller from the scene, so it survives the presence
   heartbeat replacing the table underneath it. */
.facewall{background:var(--raise);border:1px solid var(--hairline);border-radius:14px;
  padding:18px 22px 20px;margin:4px 0 22px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px var(--shadow),0 24px 60px -34px var(--shadow)}
.facewall-bar{display:flex;align-items:baseline;gap:8px 16px;padding-bottom:14px;
  border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.facewall-note{font-size:12px;color:var(--muted);margin-left:auto}
.facewall-grid{display:grid;gap:14px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.facetile{display:flex;flex-direction:column;gap:8px;min-width:0}
.facetile-media{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:var(--ground);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,box-shadow .2s ease}
.facetile-media .seat-video{position:absolute;inset:0;width:100%;height:100%;
  border-radius:0;border:0;object-fit:cover}
/* The same fallback the seat makes: initials, never a black rectangle. */
.facetile-initials{display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;color:var(--chalk);
  font:600 20px var(--sans);letter-spacing:.02em}
.facetile.on-floor:not(.cam-off) .facetile-initials{visibility:hidden}
.facetile.cam-off .seat-video{visibility:hidden}
.facetile-name{font-size:13px;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facetile.speaking .facetile-media{border-color:color-mix(in srgb,var(--attention) 60%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--attention) 45%,transparent)}
.facetile.speaking .facetile-name{color:var(--attention)}
/* A microphone that is off is worth saying quietly, once, in the corner. */
.facetile.mic-off .facetile-media::after{content:"muted";position:absolute;left:8px;bottom:8px;
  font:600 9.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:color-mix(in srgb,var(--graphite) 72%,transparent);
  border-radius:99px;padding:3px 8px}

/* Someone has the floor. The grid stops being a grid of equals: they take the
   full width and everyone else lines up beneath them, small. This is the one
   moment the view is allowed to be dramatic, because it is the one moment the
   room has a single voice in it. */
.facewall-grid.has-featured{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
/* Order, not just span: whoever is speaking leads the wall. Without this they
   sit wherever their seat happened to fall and the others bracket them, which
   reads as an accident rather than as the room turning to look. */
.facewall-grid.has-featured .facetile.featured{grid-column:1/-1;order:-1}
.facewall-grid.has-featured .facetile.featured .facetile-media{aspect-ratio:16/9;
  /* Capped, or a full-width 16/9 runs past the fold on a desktop and the
     people listening fall off the screen entirely. */
  max-height:min(46vh,440px);
  border-color:var(--attention);box-shadow:0 0 0 2px var(--attention)}
.facewall-grid.has-featured .facetile.featured .facetile-name{color:var(--attention);
  font-size:15px;font-weight:600}
.facewall-grid.has-featured .facetile:not(.featured) .facetile-initials{width:40px;height:40px;font-size:14px}
@media(max-width:600px){
  .facewall{padding:16px 14px 18px}
  .facewall-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .facetile-media{transition:none}
}
/* The switch between the two views. Quiet until you are in the other one. */
.viewbtn[aria-pressed="true"]{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  color:var(--accent)}

/* The video wears the rim the avatar wore — a tinted hairline, not a statement.
   Colour at this table is spent once, on the name of whoever is talking. */
.seat-video{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  object-fit:cover;background:var(--ground);
  border:1.5px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.seat-video-self{transform:scaleX(-1)}
.bseat.on-floor{opacity:1}
/* A muted camera is not an empty seat. Turning a camera off mutes the track
   rather than unpublishing it, so the element stays and paints black frames —
   hide it and let the initials back through. */
.bseat.on-floor:not(.cam-off) .av{visibility:hidden}
.bseat.cam-off .seat-video{visibility:hidden}
/* Once a face is in the seat, the face IS the presence — the pip is redundant,
   and it was being painted over by the video anyway. The z-index covers the
   moment in between. */
.av-live{z-index:2}
.bseat.on-floor:not(.cam-off) .av-live{display:none}

/* A seat earns its size twice, and the two steps are not the same kind of
   thing. A camera comes on a handful of times a session — a face arrives, the
   seat grows, the layout gives way. Speaking happens every few seconds, so it
   is a smaller step and it scales the round rather than resizing it: the name
   below never moves. Attention leaning in, not a layout animating. */
.bseat .av{transition:width .3s ease-out,height .3s ease-out}
.bseat .av-wrap{transform-origin:50% 100%;transition:transform .28s ease-out}
.bseat.on-floor .av{width:clamp(44px,5vw,60px);height:clamp(44px,5vw,60px);
  font-size:clamp(13px,1.5vw,18px)}
.bseat.speaking .av-wrap{transform:scale(1.14)}
/* the one mark of colour: whose voice it is */
.bseat.speaking .bseat-name{color:var(--accent)}
/* Mic off: the name stops carrying weight. No badge and no icon — a seat that
   cannot be heard reads as one whose name has gone quiet, which is the same
   grammar the table already uses for away. A dedicated mark is a decision for
   the skins pass, where it would have to be re-dressed five times. */
.bseat.mic-off .bseat-name{color:var(--muted);font-weight:400}
/* A face is its own label. Dropping the role line once someone is on camera is
   also what keeps a full table of live seats from stacking into each other. */
.bseat.on-floor .bseat-role{display:none}

/* Holding the ball: the amber rim replaces the neutral one, on the avatar and
   on the video alike, at one strength. The ball is the appointed floor and it
   persists; speaking is the actual floor and it passes. Two facts, two
   channels — colour and size — so they never stack into a target. */
/* 2px, matching the ring the avatar wears at rest. The neutral rim is a
   hairline because it is only an edge; the ball is a signal, and at 1.5px over
   a moving face it read as half the mark it does on a flat seat. */
.bseat.blocking .seat-video{border-width:2px;
  border-color:color-mix(in srgb,var(--attention) 55%,transparent)}

/* Motion aids comprehension only. The size is the information, so it stays;
   only the tween goes. */
@media (prefers-reduced-motion:reduce){
  .bseat .av,.bseat .av-wrap{transition:none}
}

/* a message surfaces at the speaker's seat */
/* The chat bubble is the only thing on a seat that reaches outside it, and the
   scene clips — so it opens toward the table rather than toward whichever edge
   its seat is nearest. Which way is decided per seat in _table_scene.html.erb,
   from the angle it was placed at. The static centring rides on `translate` so
   that `transform` is left free for the rise; the two compose. */
.seat-bubble{position:absolute;bottom:calc(100% + 10px);left:50%;translate:-50% 0;transform:translateY(4px);
  max-width:min(320px,58vw);width:max-content;background:var(--raise);
  border:1px solid color-mix(in srgb,var(--room-accent) 30%,transparent);
  color:var(--text);font-size:15px;line-height:1.5;text-align:left;
  padding:12px 16px;border-radius:14px;border-bottom-left-radius:5px;
  box-shadow:0 12px 30px -12px color-mix(in srgb,var(--graphite) 90%,transparent),0 0 24px -10px color-mix(in srgb,var(--attention) 35%,transparent);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,font-size .2s ease,max-width .2s ease;z-index:5}
.seat-bubble.on{opacity:1;transform:translateY(0)}

/* Speaking, and saying something at the same time. Read across a table on a
   video call the old 12px/220px bubble was a caption on a photograph; at this
   size it is the person talking. The seat is already ×1.14 and lit, so the
   bubble has to keep up or it reads as belonging to somebody else. */
.bseat.speaking .seat-bubble{max-width:min(400px,64vw);font-size:17px;
  border-color:color-mix(in srgb,var(--attention) 45%,transparent);
  box-shadow:0 14px 36px -12px color-mix(in srgb,var(--graphite) 90%,transparent),
    0 0 30px -8px color-mix(in srgb,var(--attention) 45%,transparent)}
@media (prefers-reduced-motion:reduce){
  .seat-bubble{transition:opacity .25s ease}
}

/* Top arc: the bubble hangs below the seat, over the table. The small corner
   is the tail, so it moves to whichever side now faces the seat. */
.bseat.b-below .seat-bubble{bottom:auto;top:calc(100% + 8px);transform:translateY(-4px);
  border-radius:12px;border-top-left-radius:4px}
.bseat.b-below .seat-bubble.on{transform:translateY(0)}

/* Out at the sides: anchored just past the avatar instead of centred on it,
   so the bubble grows inward across the table and never off the scene. */
.bseat.b-left .seat-bubble{left:auto;right:calc(50% - 20px);translate:0 0;
  border-radius:12px;border-bottom-right-radius:4px}
.bseat.b-right .seat-bubble{left:calc(50% - 20px);translate:0 0}
.bseat.b-left.b-below .seat-bubble{border-radius:12px;border-top-right-radius:4px}
/* In the Desk the table is a card, not the room's full width, and the card is
   466px in the two-column Now. A 320px bubble centred on a seat one place in
   from the end still reaches past the card's edge, where it is read by nobody.
   The end seats open inward (the anchor is chosen in _table_scene.html.erb);
   the width comes down to what the narrowest card can hold, so no seat in
   between can throw one out either. */
.desk-table .seat-bubble{max-width:min(244px,58vw)}
.desk-table .bseat.speaking .seat-bubble{max-width:min(244px,64vw)}
/* The row's right edge fades while there is more table to the right, the way
   the tab strip does — a seat sliced off at the card's edge otherwise reads as
   a clipping bug rather than an invitation to scroll. Dropped while a bubble is
   up so the mask can never fade what someone just said. */
.desk-table .scene.presence.tabs-faded:not(.said){
  -webkit-mask-image:linear-gradient(90deg,black calc(100% - 44px),transparent);
  mask-image:linear-gradient(90deg,black calc(100% - 44px),transparent)}
/* ...and the row has to hold room for the bubble while it is up, or the
   scroller clips it away: overflow-x:auto forces overflow-y to auto too, so a
   bubble hanging below its seat is cut off at the seat's feet. The scene
   controller adds .said for exactly as long as it holds a bubble open. Above
   700px only — below that the bubble is hidden by design and the row must not
   grow for one that will never paint. */
@media(min-width:701px){
  .desk-table .scene.presence{transition:padding-bottom .22s ease}
  .desk-table .scene.presence.said{padding-bottom:112px}
}
@media (prefers-reduced-motion:reduce){.desk-table .scene.presence{transition:none}}

/* off-platform working drafts — a nudge back to the vault */
.worklink-form input{background:none;border:0;border-bottom:1px dashed var(--hairline);
  color:var(--muted);font:500 11px var(--sans);width:170px;padding:1px 2px;outline:none}
.worklink-form input:focus{border-bottom-color:var(--accent);color:var(--text)}


/* auth — a centered card instead of a left-hugging column.
   Keep the horizontal padding tight so the 480px column actually gets its
   width — the full-bleed --edge margin would starve the two-line h1 and wrap it. */
main.page.authpage{max-width:460px;margin-inline:auto;
  padding:clamp(48px,10vh,120px) clamp(22px,6vw,40px) 80px}
main.page.authpage form.sheet{max-width:none;gap:16px;margin-top:26px;
  background:var(--raise);border:1px solid var(--hairline);border-radius:16px;
  padding:26px 26px 24px;
  box-shadow:0 1px 2px var(--shadow-1),0 20px 44px -32px var(--shadow-2)}
main.page.authpage form.sheet .btn{width:100%}
main.page.authpage .brandlock{justify-content:center}
main.page.authpage h1{text-align:center;text-wrap:balance;font-family:var(--sans);font-weight:600;
  letter-spacing:-.02em;font-size:clamp(24px,6vw,27px);line-height:1.2}
main.page.authpage .stage-label{text-align:center}
.auth-links{display:flex;gap:22px;margin-top:22px;justify-content:center}


/* new room — you're standing at the door */
.newdoor{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
  gap:clamp(40px,6vw,100px);align-items:start}
.newdoor-visual{display:flex;flex-direction:column;align-items:center;gap:18px;
  position:sticky;top:110px;padding-top:20px}
.newdoor-visual .doorframe{width:min(300px,100%);perspective:1100px}
.newdoor-visual .door-leaf{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.newdoor-caption{font-size:12px;color:var(--muted);letter-spacing:.04em}
@media(max-width:900px){.newdoor{grid-template-columns:1fr}.newdoor-visual{display:none}}


/* the table composer — one quiet line under the scene */
.table-composer{display:flex;align-items:center;gap:12px;max-width:760px;margin:18px auto 0}
.table-composer input{flex:1;background:var(--raise);border:1px solid var(--hairline);
  border-radius:99px;padding:12px 20px;font:400 14.5px var(--sans);color:var(--text);outline:none}
.table-composer input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.table-composer-link{white-space:nowrap;font-size:11.5px}
.read-link{color:var(--text);text-decoration:none;border-bottom:1px solid var(--hairline)}
.read-link:hover{color:var(--accent);border-color:var(--accent)}
.table-read{justify-content:center}


/* money readout under the value field */
.money-readout{display:block;color:var(--accent);font-weight:600;min-height:1.2em}

/* the closes toggle — a gate you can open and close */
.rbadge-ghost{background:transparent;border:1px dashed var(--hairline);color:var(--muted);
  cursor:pointer;transition:all .15s ease}
.clmark:hover .rbadge-ghost{border-color:var(--accent);color:var(--accent)}
.clmark:hover .rbadge-closes{filter:brightness(1.15)}
.clmark .rbadge{cursor:pointer}

/* deal drafts — write the deal in the room */
.draft-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.7fr);gap:26px;
  align-items:start;margin-top:26px}
@media(max-width:900px){.draft-grid{grid-template-columns:1fr}}
/* A textarea's intrinsic width (its cols) is the grid item's automatic
   minimum, so the one-column phone track still refused to go below ~417px
   and took the document sideways with it. */
.draft-grid > *{min-width:0}
.draft-editor{min-width:0}
.draft-grid .rpanel{margin-top:0;margin-bottom:18px}
.draft-editor{width:100%;background:var(--ground);border:1px solid var(--hairline);border-radius:10px;
  color:var(--text);font-family:var(--serif);font-size:16px;line-height:1.8;padding:20px 22px;
  outline:none;resize:vertical}
.draft-editor:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.draft-actions{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
/* The note field takes the row and the save button cannot fit beside it on
   a 320 phone; wrapping costs nothing at any wider width. */
.draft-note{flex:1;background:transparent;border:0;border-bottom:1px dashed var(--hairline);
  color:var(--muted);font:400 12.5px var(--sans);padding:4px 2px;outline:none}
.draft-note:focus{border-bottom-color:var(--accent);color:var(--text)}
.draft-body{font-family:var(--serif);font-size:15.5px;line-height:1.8;padding:6px 2px}
.diff-ins{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good);
  text-decoration:none;border-radius:3px;padding:0 2px}
.diff-del{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad-soft);border-radius:3px;padding:0 2px}


/* the room's reason for being, engraved on the table */
.btable-closes{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.5;
  margin-top:8px;max-width:34ch;letter-spacing:.02em}
.btable-closes strong{color:var(--text);font-family:'Playfair Display',var(--serif);
  font-size:12.5px;font-weight:500;letter-spacing:0}
.legal-note{text-align:center;font-size:12.5px;color:var(--accent);
  padding:9px 16px;margin-bottom:14px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,transparent);
  max-width:560px;margin-inline:auto}


/* visibility pill — unmistakable shared/private state */
.vis-pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 12px;border-radius:99px;white-space:nowrap}
.vis-pill .vis-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.vis-shared{color:var(--good);background:color-mix(in srgb,var(--good) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--good) 35%,transparent)}
.vis-private{color:var(--attention);background:color-mix(in srgb,var(--attention) 10%,transparent);border:1px solid color-mix(in srgb,var(--attention) 35%,transparent)}


/* setup: first invites + legal hand-raise */
.setup-invite{display:flex;gap:10px;margin-bottom:10px}
.setup-invite input{flex:1.6}
.setup-invite select{flex:1;background:var(--raise);border:1px solid var(--hairline);
  border-radius:9px;color:var(--text);font:400 14px var(--sans);padding:0 10px}
.legal-opt{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--hairline);border-radius:10px;padding:14px 16px;
  transition:border-color .15s ease,background .15s ease}
.legal-opt:hover{border-color:var(--accent)}
.legal-opt:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent)}
.legal-opt input{margin-top:4px;accent-color:var(--accent)}
.legal-opt strong{font-size:13.5px}

/* the elevator — one arrival beat onto the hall of doors */
.elevator{position:fixed;inset:0;z-index:40;pointer-events:none;display:flex}
.elevator-leaf{flex:1;background:var(--graphite);animation:elevatorOpen .9s cubic-bezier(.2,.7,.2,1) forwards}
.elevator-leaf.left{border-right:1px solid color-mix(in srgb,var(--chalk) 10%,transparent);
  transform-origin:left center}
.elevator-leaf.right{border-left:1px solid color-mix(in srgb,var(--chalk) 10%,transparent);
  transform-origin:right center}
@keyframes elevatorOpen{
  0%{transform:scaleX(1);opacity:1}
  70%{opacity:1}
  100%{transform:scaleX(0);opacity:0}
}
main.elevator-arrive .stage-label{animation:elevatorLabel .6s ease .35s both}
@keyframes elevatorLabel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .elevator{display:none}
  main.elevator-arrive .stage-label{animation:none}
}

/* skin picker — host dresses the room at create / settings */
.skin-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:6px}
.skin-option{display:block;cursor:pointer}
.skin-option input{position:absolute;opacity:0;pointer-events:none}
.skin-option-card{display:flex;flex-direction:column;gap:4px;padding:14px 14px 12px;
  border:1px solid var(--hairline);border-radius:10px;background:var(--raise);
  transition:border-color .15s ease,box-shadow .15s ease}
.skin-option input:checked + .skin-option-card{border-color:var(--attention);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--attention) 18%,transparent)}
.skin-option-name{font-size:13.5px;font-weight:600;color:var(--text)}
.skin-option-meta{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.skin-preview-wall_street{background:linear-gradient(160deg,var(--preview-wall-top),var(--preview-wall-base))}
.skin-preview-wall_street .skin-option-name,.skin-preview-wall_street .skin-option-meta{color:var(--preview-wall-ink)}
.skin-preview-ink{background:linear-gradient(160deg,var(--preview-ink-top),var(--preview-ink-base))}
.skin-preview-ink .skin-option-name,.skin-preview-ink .skin-option-meta{color:var(--preview-ink-ink)}
.skin-preview-vineyard{background:linear-gradient(160deg,var(--preview-vineyard-top),var(--preview-vineyard-base))}
.skin-preview-vineyard .skin-option-name,.skin-preview-vineyard .skin-option-meta{color:var(--preview-vineyard-ink)}
.skin-preview-matrix{background:linear-gradient(160deg,var(--preview-matrix-top),var(--preview-matrix-base))}
.skin-preview-matrix .skin-option-name,.skin-preview-matrix .skin-option-meta{color:var(--preview-matrix-ink)}
.skin-preview-bespoke{background:linear-gradient(160deg,var(--preview-bespoke-top),var(--preview-bespoke-base))}
.skin-preview-bespoke .skin-option-name,.skin-preview-bespoke .skin-option-meta{color:var(--preview-bespoke-ink)}
body.room-dark[data-skin="ink"]::before,
body.room-dark[data-skin="vineyard"]::before,
body.room-dark[data-skin="matrix"]::before{background:
  radial-gradient(1300px 640px at 50% -14%,color-mix(in srgb,var(--accent-fill) 14%,transparent),transparent 68%),
  radial-gradient(900px 500px at 8% 110%,color-mix(in srgb,var(--accent-fill) 7%,transparent),transparent 70%)}
/* Matrix: faint terminal scan — presentation only, respects reduced motion */
body.room-dark[data-skin="matrix"] .scene-hero::after{background:
  repeating-linear-gradient(0deg,transparent,transparent 2px,color-mix(in srgb,var(--accent) 4%,transparent) 2px,color-mix(in srgb,var(--accent) 4%,transparent) 3px)}
@media (prefers-reduced-motion:reduce){
  body.room-dark[data-skin="matrix"] .scene-hero::after{background:radial-gradient(60% 90% at 50% 118%,color-mix(in srgb,var(--attention) 12%,transparent),transparent 70%)}
}

/* Vineyard illustration — late-sun linework in the room and through hall doors */
.vineyard-motif,.matrix-motif{position:absolute;pointer-events:none;z-index:0}
.vineyard-motif{color:var(--attention)}
.vineyard-motif.scene{right:4%;top:8%;width:min(280px,42%);opacity:.55}
.vineyard-motif.door{inset:8% 6% 18%;width:auto;height:auto;opacity:.65;color:var(--preview-vineyard-ink)}
.matrix-motif{color:var(--accent)}
.matrix-motif.scene{inset:10% 6% 12%;width:auto;height:auto;opacity:.45}
.matrix-motif.door{inset:10% 8% 20%;width:auto;height:auto;opacity:.55;color:var(--preview-matrix-ink)}
.scene-hero.skin-art-vineyard .scene-bar,.scene-hero.skin-art-vineyard .scene,
.scene-hero.skin-art-matrix .scene-bar,.scene-hero.skin-art-matrix .scene{position:relative;z-index:1}
body.room-dark[data-skin="vineyard"]::before{background:
  radial-gradient(900px 520px at 88% 8%,color-mix(in srgb,var(--attention) 22%,transparent),transparent 62%),
  radial-gradient(1100px 640px at 12% 110%,color-mix(in srgb,var(--accent-fill) 10%,transparent),transparent 70%)}
body.room-dark[data-skin="vineyard"] .scene-hero::after{background:
  radial-gradient(70% 90% at 78% 18%,color-mix(in srgb,var(--attention) 16%,transparent),transparent 65%)}

/* Hall doors peek the room's skin */
.doorcard[data-skin="vineyard"],.arrive-leaf[data-skin="vineyard"]{
  --door-behind:var(--preview-vineyard-base);
  --door-leaf-top:var(--preview-vineyard-top);
  --door-leaf-mid:var(--preview-vineyard-mid);
  --door-leaf-base:var(--preview-vineyard-base);
  --table-base:var(--preview-vineyard-base);
  --room-text:var(--preview-vineyard-ink);
  --room-muted:var(--preview-vineyard-muted);
}
.doorcard[data-skin="ink"],.arrive-leaf[data-skin="ink"]{
  --door-behind:var(--preview-ink-base);
  --door-leaf-top:var(--preview-ink-top);
  --door-leaf-mid:var(--preview-ink-mid);
  --door-leaf-base:var(--preview-ink-base);
  --table-base:var(--preview-ink-base);
  --room-text:var(--preview-ink-ink);
  --room-muted:var(--preview-ink-muted);
}
.doorcard[data-skin="matrix"],.arrive-leaf[data-skin="matrix"]{
  --door-behind:var(--preview-matrix-base);
  --door-leaf-top:var(--preview-matrix-top);
  --door-leaf-mid:var(--preview-matrix-mid);
  --door-leaf-base:var(--preview-matrix-base);
  --table-base:var(--preview-matrix-base);
  --room-text:var(--preview-matrix-ink);
  --room-muted:var(--preview-matrix-muted);
}

/* ===================================================================== *
 *  The Desk — the room shell (2026-08-24, docs/design/prototypes/desk)   *
 *  Scoped under body.desk so the old room chrome and the new coexist per *
 *  page across the build. Ink tokens come from body.room-dark; skins and *
 *  the light register re-token underneath with no change here.           *
 * ===================================================================== */
body.desk .masthead{display:none}
/* No side padding on the grid itself: the header and main carry their own, so
   the header can span edge to edge without a negative-margin trick (which
   overflowed when the base .page padding wasn't what it assumed). */
body.desk .page.roompage{max-width:1180px;margin:0 auto;padding:0 0 calc(var(--nav-h) + 28px)}
@media(min-width:900px){
  body.desk .page.roompage{display:grid;grid-template-columns:210px 1fr;grid-template-rows:auto 1fr;
    column-gap:34px;padding:0 32px 60px}
}

/* one-line header: back · room name → settings · Talk. Full width, own inset. */
.desk-top{position:sticky;top:0;z-index:40;background:var(--ground);border-bottom:1px solid var(--hairline);
  padding:0 clamp(16px,4vw,32px)}
@media(min-width:900px){.desk-top{grid-column:1/3;padding:0}}
.desk-top-row{display:flex;align-items:center;gap:10px;height:56px}
.desk-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:500;
  padding:6px 8px 6px 4px;border-radius:8px;white-space:nowrap;text-decoration:none}
.desk-back::before{content:"";width:7px;height:7px;border-left:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.desk-back:hover{color:var(--text)}
.desk-title{flex:1;min-width:0;text-align:center}
.desk-title .name{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}
@media(min-width:900px){.desk-title{text-align:left}}
.desk-talk{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:99px;
  border:1px solid var(--hairline);font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;position:relative;
  background:none;cursor:pointer;font-family:var(--sans)}
.desk-talk:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--hairline))}
.desk-talk .n{min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--accent-fill);
  color:var(--accent-ink);font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}

/* the four views */
.desk-main{padding:16px clamp(16px,4vw,32px) 8px}
@media(min-width:900px){.desk-main{grid-column:2;grid-row:2;padding:20px 0 40px}}
.desk-view{display:none;flex-direction:column;gap:14px}
.desk-view.on{display:flex}
.desk-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.desk-h h2{font-size:22px;font-weight:600;letter-spacing:-.015em;margin:0}
.desk-h .count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(min-width:900px){
  .desk-view.on.now{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
  .desk-view.now .desk-h,.desk-view.now .now-next,.desk-view.now .now-guest,.desk-view.now .legal-note{grid-column:1/3}
}

/* the card family */
.desk-card{background:var(--raise);border:1px solid var(--hairline);border-radius:16px;padding:16px 18px 15px;
  box-shadow:0 1px 2px var(--shadow-1),0 24px 60px -40px var(--shadow-2)}
.desk-card.gold{border-color:color-mix(in srgb,var(--attention) 42%,transparent);box-shadow:inset 3px 0 0 var(--attention),0 1px 2px var(--shadow-1)}
.desk-card.quiet{background:transparent;box-shadow:none}
.desk-k{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.01em}
.now-title{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.now-sub{font-size:13px;color:var(--muted);margin-top:4px;max-width:52ch}
.now-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.now-stand .line{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:8px}
.now-stand .line b{font-weight:600;color:var(--text)}
.now-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--text) 12%,transparent);overflow:hidden}
.now-bar i{display:block;height:100%;background:var(--good);width:0;transition:width .5s ease}
.now-wait{font-size:13px;color:var(--muted);margin-top:10px}
.now-wait b{color:var(--text);font-weight:600}
.now-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}

/* the guest card */
.now-guest{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-color:color-mix(in srgb,var(--attention) 30%,transparent)}
.now-guest .now-sub{margin-top:0}

/* the bottom bar (phone) / left rail (desktop) */
.desk-nav{position:fixed;left:0;right:0;bottom:0;z-index:45;height:var(--nav-h);display:flex;
  background:color-mix(in srgb,var(--ground) 92%,transparent);border-top:1px solid var(--hairline);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-bottom:env(safe-area-inset-bottom)}
.desk-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font:600 11px var(--sans);color:var(--muted);position:relative;background:none;border:0;cursor:pointer}
.desk-nav button.on{color:var(--text)}
.desk-nav button.on::before{content:"";position:absolute;top:0;width:28px;height:2px;background:var(--attention);border-radius:2px}
.desk-nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.desk-nav .badge{position:absolute;top:9px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--attention);color:var(--graphite);font:600 10px var(--sans);
  display:flex;align-items:center;justify-content:center}
@media(min-width:900px){
  .desk-nav{position:sticky;top:72px;grid-column:1;grid-row:2;align-self:start;height:auto;flex-direction:column;
    background:transparent;border:0;backdrop-filter:none;gap:2px;padding:14px 0}
  .desk-nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:10px;height:40px;padding:0 12px;
    border-radius:10px;font-size:13.5px}
  .desk-nav button.on{background:var(--accent-soft)}
  .desk-nav button.on::before{display:none}
  .desk-nav .badge{position:static;margin-left:auto}
}
/* the settings/register cluster the one-line header no longer carries inline */
body.desk .desk-view .register-toggle{margin-top:4px}

/* ---- The Desk: conditions view + the condition drawer ------------------ */
.cond-list{padding:4px 16px}
.cond-row{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--hairline);
  width:100%;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;cursor:pointer;color:inherit}
.cond-row:first-child{border-top:0}
.cond-row:hover .cond-t{color:var(--accent)}
.cond-tick{width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;position:relative;
  border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent)}
.cond-tick.on{background:var(--good);border-color:var(--good)}
.cond-tick.on::after{content:"";position:absolute;left:6px;top:4px;width:8px;height:5px;
  border-left:2px solid var(--chalk);border-bottom:2px solid var(--chalk);transform:rotate(-45deg)}
.cond-body{flex:1;min-width:0}
.cond-t{font-size:15px;font-weight:500;color:var(--text)}
.cond-row.done .cond-t{color:var(--muted);text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--text) 25%,transparent)}
.cond-m{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--muted);margin-top:3px}
.cond-cat{color:var(--muted)}
.cond-owner{color:var(--muted)}
.cond-chev{flex:none;width:8px;height:8px;margin-top:6px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg)}

/* the drawer — a bottom sheet on the phone, a centred card on the desktop */
dialog.drawer{border:0;padding:0;background:transparent;max-width:none;max-height:none;color:var(--text)}
dialog.drawer::backdrop{background:var(--scrim);backdrop-filter:blur(2px)}
dialog.drawer{position:fixed;inset:auto 0 0 0;margin:0;width:100%;
  background:var(--raise);color:var(--text);border-radius:20px 20px 0 0;
  padding:12px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px -20px var(--shadow-2);max-height:88vh;overflow:auto}
@media(min-width:900px){
  dialog.drawer{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:540px;max-width:calc(100vw - 48px);
    border-radius:20px;max-height:82vh}
}
.drawer-grip{width:38px;height:4px;border-radius:2px;margin:0 auto 12px;
  background:color-mix(in srgb,var(--text) 22%,transparent)}
@media(min-width:900px){.drawer-grip{display:none}}
.drawer-x{position:absolute;top:12px;right:14px;width:30px;height:30px;border:0;background:none;color:var(--muted);
  font-size:22px;line-height:1;cursor:pointer;border-radius:8px}
.drawer-x:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.drawer-title{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:0 34px 0 0}
.drawer-sub{font-size:13.5px;color:var(--muted);margin:4px 0 0}
.drawer-meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.drawer-attached{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px 12px;border-radius:10px;
  background:var(--good-soft);color:var(--good);font-size:13px;font-weight:600}
.drawer-drop{margin:14px 0;border:1.5px dashed color-mix(in srgb,var(--text) 25%,transparent);border-radius:12px;
  padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.drawer-drop b{color:var(--text);font-weight:600}
.drawer-form{display:block;margin-top:6px}
.filepick{cursor:pointer}
/* The Desk's two upload controls are a styled <label> wrapping a real file
   input, and the input was marked .visually-hidden — a class this stylesheet
   never defined. So both drawers rendered the browser's own grey "Choose File /
   No file chosen" control beside our button, and in the condition drawer it was
   246px wide and made the sheet itself scroll sideways. Hidden to the eye,
   still reachable by the label click and by a screen reader. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.btn-block{width:100%;justify-content:center}
.chip.chip-amber{background:var(--attention-soft);color:var(--attention-ink)}

/* ---- The Desk: the agenda, folded into the conditions view ---------------
   Items that do not gate the close get a quieter second card; everything the
   old agenda page could do to an item (owner · gates the close · evidence ·
   the working link · remove) sits under one "Manage" line in the drawer. */
.cond-extras{margin-top:12px}
.cond-list-k{font-size:11.5px;font-weight:600;color:var(--muted);padding:12px 0 4px;letter-spacing:.01em}
.cond-list-k + .cond-row{border-top:1px solid var(--hairline)}
.cond-add{margin-top:12px}
.cond-draft{margin:12px 0 4px;justify-content:space-between}
.cond-draft .drawer-sub{margin:0;flex:1;min-width:16ch}
.drawer-more{margin-top:18px;border-top:1px solid var(--hairline);padding-top:10px}
.drawer-more summary{font-size:12.5px;color:var(--muted);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.drawer-more summary::-webkit-details-marker{display:none}
.drawer-more summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);margin-top:-3px}
.drawer-more[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.drawer-more summary:hover{color:var(--text)}
.manage-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--hairline);flex-wrap:wrap}
.drawer-more summary + .manage-row{border-top:0;margin-top:6px}
.manage-row .k{font-size:12.5px;color:var(--muted);flex:none}
.manage-v{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.manage-form{display:inline-flex;align-items:center;margin:0;max-width:100%}
.manage-form select,.manage-form input[type=url]{height:32px;border-radius:9px;border:1px solid var(--hairline);background:var(--raise);
  color:var(--text);font:inherit;font-size:12.5px;padding:0 10px;max-width:100%}
.manage-form select option{background:var(--raise);color:var(--text)}
.manage-form input[type=url]{width:210px}
.manage-form input[type=url]::placeholder{color:var(--muted)}
.manage-end{justify-content:flex-end;gap:8px}
.cond-add-form .field{margin-bottom:12px}
.cond-library{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cond-library select{height:34px;border-radius:10px;border:1px solid var(--hairline);background:var(--raise);color:var(--text);
  font:inherit;font-size:13px;padding:0 10px;flex:1;min-width:0}

/* ---- The Desk: Talk drawer ---- */
.talk-log{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow:auto;margin:12px 0 6px;padding-right:2px}
.talk-drawer .typing{min-height:0}
.talk-drawer .chat-composer{margin-top:8px}

/* ---- The Desk: Files view + file drawer ---- */
.file-list{padding:2px 16px}
.file-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--hairline);
  width:100%;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;cursor:pointer;color:inherit}
.file-row:first-child{border-top:0}
.file-row:hover .file-t{color:var(--accent)}
.file-ic{width:34px;height:40px;border-radius:6px;background:var(--raise-2);border:1px solid var(--hairline);flex:none;position:relative}
.file-ic::after{content:"";position:absolute;right:-1px;top:-1px;width:10px;height:10px;background:var(--ground);
  border-left:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.file-body{flex:1;min-width:0}
.file-t{display:block;font-size:14px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-m{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.file-add{display:flex;align-items:center;gap:12px;margin-top:4px}
.file-add-note{font-size:12.5px;color:var(--muted)}
.drawer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.drawer-sigreq select{height:34px;border-radius:10px;border:1px solid var(--hairline);background:var(--raise);
  color:var(--text);font:inherit;font-size:13px;padding:0 10px}
.btn.danger-text{border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad);background:none}
.btn.danger-text:hover{border-color:var(--bad)}

/* ---- The Desk: Settings drawer ---- */
.desk-title button.name{background:none;border:0;cursor:pointer;padding:0;color:inherit;font:inherit;
  font-family:var(--serif);font-size:17px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desk-title button.name:hover{color:var(--accent)}
/* Thumb targets in the one-line header. Every painted size here is the
   approved design and none of them moves: the two text controls take vertical
   padding they have no background to reveal, and the Talk pill keeps its
   34px border with an invisible overlay carrying the hit area to 44. All three
   fit inside the 56px row, so the header is unchanged to the eye. */
@media(max-width:899px){
  .desk-back{padding-top:12px;padding-bottom:12px}
  .desk-title button.name{padding:9px 0}
  /* -6, not -5: an absolutely positioned child is laid out against the
     PADDING box, so the pill's 1px border is already inside the offset. */
  .desk-talk::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
}
.drawer-endings{margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline)}

/* ---- The Desk: pages inside the shell (Services · the record · a draft) ---
   The one-line header and Talk, one view, and no bar: the way back is the
   room, in the header. One column at every width. */
body.desk-sub .page.roompage{padding-bottom:32px}
@media(min-width:900px){
  body.desk-sub .page.roompage{display:block;max-width:820px;padding:0 32px 60px}
  body.desk-sub .desk-main{padding:20px 0 40px}
}
/* services */
.svc-list{padding:2px 16px}
.svc-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--hairline)}
.svc-row:first-child{border-top:0}
.svc-ic{width:34px;height:34px;border-radius:9px;background:var(--raise-2);border:1px solid var(--hairline);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.svc-body{flex:1;min-width:0}
.svc-t{display:block;font-size:14.5px;font-weight:500;color:var(--text)}
.svc-m{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.svc-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.svc-price{font-family:var(--serif);font-size:15px;color:var(--text);font-variant-numeric:tabular-nums}
.svc-legal .svc-row{border:0;padding:4px 0 0}
/* On a phone the price and its action drop under the text, indented past the
   glyph, so the blurb keeps its width instead of wrapping at fourteen characters. */
@media(max-width:559px){
  .svc-row{flex-wrap:wrap}
  .svc-right{flex-basis:100%;justify-content:flex-start;margin-left:46px;margin-top:2px}
}
/* the record */
.led{list-style:none;margin:2px 0 0;padding:0 0 0 20px;position:relative}
.led::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--hairline)}
.ev{position:relative;padding:9px 0}
.ev::before{content:"";position:absolute;left:-18px;top:14px;width:9px;height:9px;border-radius:50%;
  background:var(--raise-2);border:1.5px solid var(--muted)}
.ev.gold::before{background:var(--attention);border-color:var(--attention)}
.ev-who{font-size:13.5px;font-weight:500;color:var(--text)}
.ev-what{color:var(--muted);font-weight:400}
.ev-when{font-size:11.5px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums}
/* a draft */
.chip-soft{background:var(--accent-soft);color:var(--accent)}
.draft-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.draft-chips a.chip{text-decoration:none}
.draft-doc{border:1px solid var(--hairline);border-radius:12px;background:var(--ground);padding:14px 16px;
  font-family:var(--serif);font-size:15px;line-height:1.85;color:var(--text)}
.draft-doc .diff-ins,.draft-doc .diff-del{border-radius:3px;padding:0 2px}
.draft-write .draft-editor{min-height:200px}
.draft-foot{margin-top:14px}
.draft-vrow{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--hairline);font-size:13px;flex-wrap:wrap}
.draft-vrow:first-of-type{border-top:0}
.draft-vm{color:var(--muted);font-size:12.5px}

/* ---- The Desk: the new room, one paper page of essentials --------------
   The mode is a segment, the kind-of-deal list follows it, and the rest of
   the setup (look, headline condition, first people, legal help) waits under
   one "More" line. The Desk header stands in for the masthead here. */
body.newroom .page.newroom-page{max-width:none;margin:0;padding:0 0 48px}
body.newroom .desk-top{padding:0 clamp(16px,4vw,24px)}
body.newroom .desk-top-row{max-width:560px;margin:0 auto}
.desk-top-spacer{width:64px;flex:none}
.newroom-form{max-width:560px;margin:0 auto;padding:22px clamp(16px,4vw,24px) 0}
.newroom-sub,.newroom-note{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}
.newq{font-family:var(--serif);font-size:clamp(26px,5vw,30px);font-weight:500;letter-spacing:-.01em;line-height:1.15;margin:8px 0 18px}
.newroom-fields{display:flex;flex-direction:column;gap:18px}
.newroom-fields fieldset{border:0;padding:0;margin:0;min-width:0}
.newroom-fields legend{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-bottom:8px;padding:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* .field label is the generic form-label rule; the segment's labels are
   controls, so these outrank it. */
.field .seg-opt{position:relative;display:flex;align-items:center;justify-content:center;height:44px;margin:0;border-radius:12px;
  border:1px solid var(--hairline);background:var(--raise);font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.field .seg-opt input{position:absolute;opacity:0;pointer-events:none}
.field .seg-opt:has(input:checked){background:var(--accent-soft);color:var(--accent);border-color:transparent}
.field .seg-opt:has(input:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.newroom-more{border:1px solid var(--hairline);border-radius:12px;background:var(--raise);padding:0 14px}
.newroom-more summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:2px;padding:12px 0;
  font-size:14px;font-weight:600;color:var(--text);position:relative;padding-right:24px}
.newroom-more summary::-webkit-details-marker{display:none}
.newroom-more summary::after{content:"";position:absolute;right:4px;top:19px;width:7px;height:7px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
.newroom-more[open] summary::after{transform:rotate(-135deg);top:23px}
.newroom-more-sub{font-size:12.5px;font-weight:400;color:var(--muted)}
.newroom-more[open] summary{border-bottom:1px solid var(--hairline);margin-bottom:16px}
.newroom-more .field{margin-bottom:16px}
.newroom-go{height:46px;font-size:15px}

/* ---- The Desk: invite arrival, "take your seat" ---------------------------
   Paper. The room's door in its skin, who invited you, which seat, one button. */
body.arrive-page .page.arrive-main{max-width:none;margin:0;padding:0 0 48px}
body.arrive-page .desk-top{padding:0 clamp(16px,4vw,24px)}
.arrive-top{justify-content:center}
.arrive-mark{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;
  font-family:var(--serif);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.arrive{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  max-width:440px;margin:0 auto;padding:30px clamp(16px,4vw,24px) 40px}
.arrive-leaf{display:block}
/* a grid item in the hall; a block here, or the span collapses to nothing */
.arrive-leaf .hall-leaf{display:block;margin:0 auto;grid-column:auto;grid-row:auto;width:96px;height:142px;border-radius:6px}
.arrive-leaf .hall-no{font-size:11px;top:46%}
.arrive-peep{position:absolute;right:9%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--attention);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--attention) 25%,transparent)}
.arrive-sub{font-size:13.5px;color:var(--muted);margin:0 0 8px}
.arrive-h1{font-family:var(--serif);font-size:clamp(24px,5vw,28px);font-weight:500;line-height:1.2;letter-spacing:-.01em;margin:0}
.arrive-p{font-size:14.5px;color:var(--muted);max-width:36ch;margin:0;line-height:1.55}
.arrive-form{margin-top:6px}
.arrive-go{height:46px;padding:0 26px;font-size:15px}
.arrive-switch{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.arrive-inline{display:inline}
.arrive-link{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
@media(min-width:900px){.arrive-leaf .hall-leaf{width:110px;height:162px}.arrive{padding-top:48px}}

/* ---- The Desk: the way in (sign in · create account · passwords · account) --
   The brand centred on one line, then v6's column and words with no card
   around the form. The column's numbers (380 on desktop, 343 on a phone) are
   the ones auth_pages.mjs guards, and they do not change here. */
body.authdesk main.page.authpage{padding-top:26px;padding-bottom:64px}
body.authdesk main.page.authpage form.sheet{background:none;border:0;border-radius:0;padding:0;box-shadow:none;margin-top:18px;gap:14px}
body.authdesk main.page.authpage h1{text-align:left;font-family:var(--serif);font-weight:500;font-size:clamp(26px,5vw,30px);
  letter-spacing:-.01em;line-height:1.15;margin:6px 0 6px}
.auth-eb{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.auth-lede{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 2px}
body.authdesk .auth-links{justify-content:space-between;margin-top:18px;gap:14px}
.acct-card{margin-top:22px;padding:14px 16px 12px}
.acct-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--hairline);font-size:13.5px}
.acct-row:first-of-type{border-top:0}
.acct-row .q{color:var(--muted)}
.acct-card .hint{margin-top:10px}

/* ---- Operations ----------------------------------------------------------
   One dark bar (brand, the four places staff work, the way back to your own
   rooms), then the page at full width: sections divided by hairlines and
   space, not boxes. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ops-top{position:sticky;top:0;z-index:40;background:var(--graphite);color:var(--room-text)}
.ops-top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 clamp(16px,5vw,80px)}
.ops-mark{display:inline-flex;align-items:baseline;gap:12px;color:var(--room-text);text-decoration:none;min-width:0}
.ops-brand{font-family:var(--serif);font-weight:500;font-size:17px;white-space:nowrap}
.ops-word{font-size:13.5px;color:var(--room-muted);white-space:nowrap}
.ops-top-right{display:flex;align-items:center;gap:20px}
.ops-rooms{color:var(--room-muted);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.ops-rooms:hover{color:var(--room-text)}
.ops-who{width:32px;height:32px;border-radius:50%;background:var(--room-text);color:var(--graphite);font:600 11.5px var(--sans);display:inline-flex;align-items:center;justify-content:center;flex:none}
.ops-nav{display:flex;gap:4px;padding:0 clamp(8px,5vw,72px);overflow-x:auto;scrollbar-width:none;border-top:1px solid color-mix(in srgb,var(--room-text) 10%,transparent)}
.ops-nav::-webkit-scrollbar{display:none}
.ops-nav a{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 10px;font-size:14px;font-weight:500;color:var(--room-muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.ops-nav a:hover{color:var(--room-text)}
.ops-nav a.on{color:var(--room-text);border-bottom-color:var(--room-text)}
.ops-nav .n{font-variant-numeric:tabular-nums;color:var(--attention)}
body.ops .page.ops-main{max-width:none;margin:0;padding:32px clamp(16px,5vw,80px) 64px}
.ops-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-bottom:32px}
.ops-head h1{font-family:var(--sans);font-size:clamp(24px,2.4vw,30px);font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.15}
.ops-head .ops-title{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.ops-date{font-size:14px;color:var(--muted)}
.ops-crumb{font-size:13px;color:var(--muted);margin:0 0 6px}
.ops-crumb a{color:var(--muted)}
.ops-cols{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:1100px){.ops-cols{grid-template-columns:minmax(0,1fr) 380px;gap:64px}}
.ops-col{display:flex;flex-direction:column;gap:48px;min-width:0}
.ops-sec h2{font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px;display:flex;align-items:baseline;gap:10px}
.ops-sec h2 .n{font-size:15px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.ops-h2row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ops-h3{font-size:14px;font-weight:600;margin:20px 0 4px}
.ops-note{font-size:14px;color:var(--muted);margin:0 0 14px;max-width:70ch;line-height:1.5}
.ops-empty{font-size:14.5px;color:var(--muted);margin:0;padding:16px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.ops-table{display:flex;flex-direction:column}
.ops-tr{display:grid;gap:8px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hairline);font-size:14.5px}
.ops-th{padding:8px 0;font-size:12.5px;color:var(--muted);display:none}
.ops-tr.stuck{grid-template-columns:1fr}
.ops-tr.fee,.ops-tr.zero,.ops-tr.people{grid-template-columns:1fr}
@media(min-width:760px){
  .ops-th{display:grid}
  .ops-tr.stuck{grid-template-columns:minmax(0,2.2fr) minmax(0,.7fr) minmax(0,.9fr) minmax(0,1.8fr) 180px}
  .ops-tr.fee{grid-template-columns:minmax(0,2.2fr) minmax(0,.7fr) minmax(0,.9fr) minmax(0,2.4fr)}
  .ops-tr.zero{grid-template-columns:minmax(0,2fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr) 200px}
  .ops-tr.people{grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.9fr)}
}
.ops-room{display:flex;flex-direction:column;gap:2px;min-width:0}
.ops-room .t{font-family:var(--serif);font-size:17px;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.ops-room a.t:hover{color:var(--accent)}
.ops-room .t.plain{font-family:var(--sans);font-size:14.5px;font-weight:500}
.ops-room .m,.ops-list .m{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.ops-tr form,.ops-tr .button_to{margin:0}
.ops-tr .btn{width:100%;min-height:38px}
.ops-pair{display:flex;gap:8px}
.ops-pair form{flex:1}
.ops-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ops-inline input{flex:1;min-width:130px;height:38px;border-radius:9px;border:1px solid var(--hairline);background:var(--raise);padding:0 10px;font:400 13.5px ui-monospace,Menlo,monospace;color:var(--text)}
.ops-inline .btn{width:auto}
.ops-find{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ops-find label{font-size:13px;color:var(--muted)}
.ops-find-row{display:flex;gap:8px}
.ops-find input{flex:1;min-width:0;height:44px;border-radius:10px;border:1px solid var(--hairline);background:var(--raise);padding:0 14px;font:400 15px var(--sans);color:var(--text)}
.ops-find .btn{min-height:44px}
.ops-state{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.ops-state .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.ops-state.ok{color:var(--good)}
.ops-state.warn{color:var(--attention-ink)}
.ops-facts{margin:8px 0 12px}
.ops-facts>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--hairline);font-size:14px}
.ops-facts>div:last-child{border-bottom:1px solid var(--hairline)}
.ops-facts dt{color:var(--muted)}
.ops-facts dd{margin:0;text-align:right}
.ops-more{font-size:14px;font-weight:500;text-decoration:none;color:var(--accent);display:inline-block;padding:8px 0}
.ops-also{font-size:13px;color:var(--muted);margin:0}
.ops-also a{color:var(--muted)}
.ops-list{list-style:none;margin:0;padding:0}
.ops-list li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:14px;line-height:1.45}
.ops-list li:first-child{border-top:1px solid var(--hairline)}
.ops-list li>.m{flex:none;white-space:nowrap}
.ops-list.talk li>span:first-child{overflow-wrap:anywhere}
.oh{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;margin-bottom:4px;flex-wrap:wrap}
.oh h1,.ops-h1{font-family:var(--sans);font-size:22px;font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.2}
.ops-h1{margin-bottom:6px}
.oh .count{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ops-lede{font-size:13.5px;color:var(--muted);margin:0 0 16px;max-width:60ch}
.ops-cards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.ops-cards{grid-template-columns:1fr 1fr}}
/* a grid item may shrink below its content's minimum, or one long line widens every card */
.ops-cards>*{min-width:0}
.ops-main .desk-card{padding:12px 14px 12px}
.ops-main .desk-card+.desk-card{margin-top:14px}
.ops-cards .desk-card+.desk-card{margin-top:0}
.or{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-top:1px solid var(--hairline)}
.or .b{flex:1;min-width:0}
.or .t{font-size:14px;font-weight:500;color:var(--text)}
.or .t.room{font-family:var(--serif);font-size:15px}
.or .m{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.or .m .room-name{font-family:var(--serif);color:var(--text)}
.or .rt{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.ops-money{font-family:var(--serif);font-size:15px;font-variant-numeric:tabular-nums;color:var(--text)}
.num{font-variant-numeric:tabular-nums}
.stat{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0 2px}
.stat b{font-family:var(--serif);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}
.wire{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.wire input{height:34px;font-size:12.5px;flex:1;min-width:120px;border-radius:9px;border:1px solid var(--hairline);background:var(--raise);padding:0 10px;
  font-family:ui-monospace,Menlo,monospace;color:var(--text)}
.wire input::placeholder{font-family:var(--sans);color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.ops-main .hint{margin-top:8px}
.chip-bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.payload{flex-basis:100%}
.ops-search{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.ops-search input{flex:1;height:38px;border-radius:10px;border:1px solid var(--hairline);background:var(--raise);padding:0 12px;font:inherit;font-size:13.5px;color:var(--text)}
.ops-search input::placeholder{color:var(--muted)}
.payload summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent);list-style:none}
.payload summary::-webkit-details-marker{display:none}
.payload pre{margin:8px 0 0;padding:10px 12px;border-radius:9px;background:var(--ground);border:1px solid var(--hairline);font-size:11.5px;line-height:1.5;overflow-x:auto;white-space:pre}

/* ---- The Desk: People view ---- */
.person-list{padding:2px 16px}
.person-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;padding:13px 0;border-top:1px solid var(--hairline)}
.person-row:first-child{border-top:0}
.person-id{flex:1 1 150px;min-width:0}
.person-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:15px;font-weight:500;color:var(--text)}
.person-name .lbl{white-space:nowrap}
.person-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.person-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.person-actions .role-form select,.person-actions .role{height:32px;border-radius:9px;border:1px solid var(--hairline);
  background:var(--raise);color:var(--text);font:inherit;font-size:12.5px;padding:0 9px;display:inline-flex;align-items:center}
.person-btn{display:inline}
@media(min-width:760px){.person-actions{margin-left:auto;justify-content:flex-end}}
@media(max-width:759px){.person-actions{flex-basis:100%;padding-left:46px}}

/* ---- The Desk: the hall as a needs-you-first list of doors ---- */
.doorlist{display:flex;flex-direction:column;gap:10px;max-width:820px}
@media(min-width:900px){.doorlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:none}}
.doorlist .doorcard.hall-door{display:grid;grid-template-columns:54px 1fr auto;gap:0 14px;align-items:center;
  padding:12px 16px 12px 12px;border:1px solid var(--hairline);border-radius:16px;background:var(--raise);
  text-decoration:none;color:var(--text);box-shadow:0 1px 2px var(--shadow-1);transition:border-color .18s,box-shadow .18s}
.doorlist .doorcard.hall-door:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--hairline));box-shadow:0 1px 2px var(--shadow-1),0 18px 40px -30px var(--shadow-2)}
.doorlist .doorcard.hall-door.needs{border-color:color-mix(in srgb,var(--attention) 42%,transparent);box-shadow:inset 3px 0 0 var(--attention),0 1px 2px var(--shadow-1)}
.hall-leaf{grid-column:1;grid-row:1/3;position:relative;width:54px;height:80px;border-radius:4px;overflow:hidden;
  background:linear-gradient(165deg,var(--door-leaf-top),var(--door-leaf-mid) 55%,var(--door-leaf-base));
  box-shadow:inset 0 0 0 1px var(--room-hairline),0 10px 20px -14px var(--shadow-2)}
.hall-door.closed .hall-leaf{filter:grayscale(.4) brightness(.85)}
.hall-leaf-panel{position:absolute;left:16%;right:16%;border:1px solid var(--room-hairline);border-radius:1px}
.hall-leaf-panel.p1{top:9%;height:24%}
.hall-leaf-panel.p2{bottom:9%;height:30%}
.hall-no{position:absolute;left:0;right:0;top:44%;text-align:center;font-family:var(--serif);font-size:9px;
  color:var(--room-text);letter-spacing:.06em}
.hall-leaf svg.door{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.hall-door-body{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:3px}
.hall-name{font-family:var(--serif);font-size:16.5px;font-weight:500;line-height:1.25;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hall-status{font-size:12.5px;color:var(--muted)}
.hall-move{color:var(--attention);font-weight:600}
.hall-value{grid-column:3;grid-row:1/3;align-self:center;font-family:var(--serif);font-size:15px;
  font-variant-numeric:tabular-nums;text-align:right;color:var(--text);white-space:nowrap}
/* On a phone the three parts wrap into one run-on sentence and the amber reads
   as part of the grey. Give the call to action its own line and drop the
   separator that would otherwise dangle at the start of the next one. */
@media(max-width:560px){
  .hall-move{display:block}
  .hall-sep{display:none}
  /* The money took its own column, and an eight-figure figure left the body
     about 180px to say the room's name and where it stands in. On a phone the
     door reads top to bottom instead: plaque, then name, status and value. */
  .doorlist .doorcard.hall-door{grid-template-columns:54px 1fr}
  .hall-value{grid-column:2;grid-row:auto;text-align:left;margin-top:5px}
}
.hall-door.hall-new{border-style:dashed;background:transparent}
.hall-leaf-new{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hairline)}
.hall-door.hall-new .hall-name{color:var(--muted)}

/* ---- The Desk: close drawer ---- */
.close-fee{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin:16px 0}
.close-fee-amt{font-family:var(--serif);font-size:20px;color:var(--text)}
.consent-line{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;margin:6px 0 14px;cursor:pointer;color:var(--text)}
.consent-line input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--accent-fill)}