/* ═══════════════════════════════════════════════════════════════════════════
   THE WORK SCREEN — the answer screen as the product (task 537221e7).

   The next room of the same house as the immersive landing: the painted sky
   world behind everything, glass with readable ink in both themes, the answer
   set like a letter, next steps as actions, tools that SHOW what they read,
   and an evidence rail that says what the answer is made of.

   ⛔ ADDITIVE. Loaded after os-thread.css and os-dock.css, same selectors and
      specificity (body.os.inthread …), so the cascade — not !important — wins.
      Remove this file and work-screen.js and the screen is what it was.
   ⛔ --wh-top is declared in index.html's :root and only READ here.
   ⛔ No backticks anywhere in this file — it is copied verbatim into the
      measurement harness stylesheet by tools/harness-page-css.mjs.
   ⛔ No pointer parallax, no lean, no decoration motion: only motion that
      explains (a card waking when the answer names it; a step arriving).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens the screen adds to the shell's own ─────────────────────────── */
body.os.inthread{
  --ws-glass:rgba(19,22,38,.78);
  --ws-glass-2:rgba(24,28,48,.86);
  --ws-glass-line:rgba(255,255,255,.11);
  --ws-glass-shadow:0 26px 54px -34px #000, inset 0 1px rgba(255,255,255,.06);
  --ws-ink:#eef1f8; --ws-muted:#a9b3c9; --ws-faint:#7d879c;
  --ws-accent:linear-gradient(90deg,#22d3ee,#7c5cff 55%,#f472b6);
  --ws-cta:linear-gradient(135deg,#6159ee,#7c5cf0 48%,#a06bd0);
  --ws-measure:740px;
  --ws-rail:276px; --ws-dock:344px;
  --ws-radius:18px;
  --ws-ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="light"] body.os.inthread{
  --ws-glass:rgba(255,255,255,.82);
  --ws-glass-2:rgba(255,255,255,.92);
  --ws-glass-line:rgba(75,72,120,.14);
  --ws-glass-shadow:0 22px 48px -34px rgba(47,34,110,.5), inset 0 1px #fff;
  --ws-ink:#0c1220; --ws-muted:#5a6478; --ws-faint:#8b94a6;
}

/* ── the world behind the room ──────────────────────────────────────────
   The same painted sky as the door, so walking from the first sentence to the
   answer is walking into the next room, not into a different product. The
   reading column keeps its paper (the wash below); the atmosphere lives at
   the edges, under glass. */
body.os.inthread .thread::before{
  background:#f4efe6 url(/art/os/bg-clay.webp) center 40%/cover no-repeat;
  opacity:1;filter:none}
body.os.inthread .thread::after{
  background:radial-gradient(1100px 620px at 82% -10%,rgba(124,92,255,.22),transparent 62%),
             radial-gradient(900px 560px at 6% 108%,rgba(34,211,238,.12),transparent 62%),
             linear-gradient(180deg,rgba(15,13,38,.38),rgba(15,13,38,.66))}
:root[data-theme="light"] body.os.inthread .thread::before{
  background:#f4efe6 url(/art/os/bg-clay.webp) center 42%/cover no-repeat;
  opacity:1;filter:none}
:root[data-theme="light"] body.os.inthread .thread::after{
  background:radial-gradient(1100px 620px at 82% -10%,rgba(124,92,255,.10),transparent 62%),
             radial-gradient(900px 560px at 6% 108%,rgba(34,211,238,.08),transparent 62%),
             linear-gradient(180deg,rgba(246,247,251,.30),rgba(246,247,251,.62))}

/* ── glass, once ─────────────────────────────────────────────────────────
   One recipe for every panel on the screen: the rail, the dock, the cards.
   ⛔ Never a translucent card over the sky without the blur — ink on a cloud
      is the mobile-example-card bug the landing paid for. */
body.os.inthread .osAnon,
body.os.inthread .osDock{
  background:var(--ws-glass);border-color:var(--ws-glass-line);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25);
  box-shadow:none}
body.os.inthread .osAnon{width:var(--ws-rail);padding:14px 12px 16px;gap:4px}
body.os.inthread .osDock{width:var(--ws-dock);padding:14px 14px 96px;gap:6px}
/* ⚡ This layer makes both rails WIDER (276 / 344), so the app column's gutters
   move with them here, in the same file that widened them. Without this the
   pane would still stop at the narrower widths os-thread.css sets. */
@media (min-width:1180px){
  body.os.inthread.osAnonOn{--app-left:var(--ws-rail)}
  body.os.inthread{--app-right:var(--ws-dock)}
}
@media (min-width:1180px){
  body.os.inthread .msgs,body.os.inthread .composer,body.os.inthread .t-head{padding-left:calc(var(--ws-rail) + 26px)}
}
body.workHomeOpen .thread{padding-right:var(--ws-dock)}

/* ── the day, the person, the shelf: one quiet column ────────────────── */
body.os.inthread .osDay{
  background:var(--ws-glass-2);border:1px solid var(--ws-glass-line);border-radius:16px;
  box-shadow:none;padding:12px 13px;margin-bottom:10px}
body.os.inthread .osDay b{font:600 14.5px/1.15 var(--osDisp);letter-spacing:-.01em}
body.os.inthread .osDay i{background:var(--ws-cta);color:#fff;font-weight:600}
body.os.inthread .osWho{padding:6px 6px 4px}
body.os.inthread .osWho .av{background:var(--ws-glass-2);border-color:var(--ws-glass-line)}
body.os.inthread .osShelfTtl{color:var(--ws-faint);letter-spacing:.18em;font-size:10px}
body.os.inthread .osIdea{border-radius:12px;padding:8px 10px}
body.os.inthread .osIdea.on{background:var(--ws-glass-2);border-color:var(--ws-glass-line);box-shadow:var(--ws-glass-shadow)}
body.os.inthread .osNew{border-radius:12px}
body.os.inthread .osFree{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--ws-glass-line)}
body.os.inthread .osFree .bar i.used{background:#7c5cff}

/* ── the door: this becomes your company ─────────────────────────────────
   A DOOR, not a banner: a painted room behind glass, one sentence, and the
   whole card is the handle to the gate. The art is the platform's own sky
   world seen from inside — the room the conversation moves into. */
body.os.inthread .osGhost{
  position:relative;overflow:hidden;cursor:pointer;margin-top:12px;
  border:1px solid var(--ws-glass-line);border-radius:var(--ws-radius);
  padding:0;background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow);
  transition:transform .3s var(--ws-ease),box-shadow .3s var(--ws-ease),border-color .3s}
body.os.inthread .osGhost:hover{transform:translateY(-2px);border-color:hsl(258 60% 62% / .45);
  box-shadow:0 34px 64px -32px hsl(258 70% 45% / .55),inset 0 1px #fff}
body.os.inthread .osGhost::before{
  content:'';display:block;aspect-ratio:3/2;width:100%;
  background:#f4efe6 url(/art/os/bg-clay.webp) center/cover no-repeat}
:root:not([data-theme="light"]) body.os.inthread .osGhost::before{
  background:#f4efe6 url(/art/os/bg-clay.webp) center/cover no-repeat}
body.os.inthread .osGhost::after{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--ws-accent)}
body.os.inthread .osGhost b{
  display:block;font:600 13.5px/1.25 var(--osDisp);color:var(--ws-ink);padding:12px 13px 0;letter-spacing:-.01em}
body.os.inthread .osGhost span{
  display:block;font-size:11.5px;line-height:1.5;color:var(--ws-muted);padding:5px 13px 12px}
body.os.inthread .osGhost .wsGo{
  position:absolute;right:11px;bottom:11px;width:26px;height:26px;border-radius:99px;
  display:grid;place-items:center;background:var(--ws-cta);color:#fff;font:600 13px/1 var(--osMono);
  box-shadow:0 8px 18px -8px rgba(97,89,238,.8)}
body.os.inthread .osCta{
  margin-top:12px;border-radius:14px;padding:12px;background:var(--ws-cta);color:#fff;
  font:550 13.5px var(--f-body,Inter,sans-serif);box-shadow:0 12px 28px -14px rgba(97,89,238,.85);
  transition:transform .2s var(--ws-ease),filter .2s}
body.os.inthread .osCta:hover{opacity:1;filter:brightness(1.06);transform:translateY(-1px)}

/* ── the thread's own head: quieter, same glass ───────────────────────── */
body.os.inthread .t-head{
  background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:16px 34px 6px}
body.os.inthread .t-head #thead{font:500 13px/1.3 var(--osDisp);color:var(--ws-muted);letter-spacing:-.005em}
body.os.inthread .t-head #hbrain{opacity:.85}
body.os.inthread .t-head .shareBtn{background:var(--ws-glass);border-color:var(--ws-glass-line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* ── the answer, set like a letter ───────────────────────────────────────
   The thread IS the product. The person's sentence is the heading; the
   partner's answer gets the measure, the size and the rhythm a good letter
   gets — ink, not muted grey, on paper, not on a rule. */
body.os.inthread .msgs{padding:8px 34px 10px}
body.os.inthread .m-you{
  max-width:var(--ws-measure);margin:18px auto 0;
  font:600 clamp(19px,1.7vw,24px)/1.32 var(--osDisp);letter-spacing:-.022em;color:var(--ws-ink)}
body.os.inthread .m-you .pfx,body.os.inthread .m-you .who{
  font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--ws-faint)}
body.os.inthread .m-orc{
  max-width:var(--ws-measure);margin:18px auto 0;padding:0;border-left:0;
  font-size:16.5px;line-height:1.72;color:var(--ws-ink)}
body.os.inthread .m-orc p{margin:0 0 14px}
body.os.inthread .m-orc strong{color:var(--ws-ink);font-weight:650}
body.os.inthread .m-orc a{color:#7c5cff;text-decoration-color:rgba(124,92,255,.4)}
body.os.inthread .m-orc .who{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:#7c5cff}
:root:not([data-theme="light"]) body.os.inthread .m-orc .who{color:#b3a2ff}
body.os.inthread .m-orc .who svg.bcMark{width:20px;height:20px}
/* the reading paper: a soft glass sheet under the whole exchange so long
   paragraphs sit on a calm ground while the sky stays at the edges */
body.os.inthread .messageStage::before{
  content:'';position:absolute;inset:0 0 0 0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,transparent,var(--ws-glass) 120px,var(--ws-glass) calc(100% - 40px),transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);opacity:.9}
body.os.inthread .messageStage > *{position:relative;z-index:1}

/* ── next steps: actions, not chips ─────────────────────────────────────
   Two equal glass cards per row, a mark that says what KIND of step it is,
   an arrow that says it can be pressed. One filled card at most (the act). */
body.os.inthread .chip-lbl{
  max-width:var(--ws-measure);margin:22px auto 10px;
  font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.2em;color:var(--ws-faint)}
body.os.inthread .chips.steps{max-width:var(--ws-measure);gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
body.os.inthread .chips.steps .chip{
  position:relative;border-radius:14px;padding:13px 40px 13px 16px;
  background:var(--ws-glass-2);border:1px solid var(--ws-glass-line);
  box-shadow:var(--ws-glass-shadow);color:var(--ws-ink);
  font:500 14px/1.4 var(--f-body,Inter,sans-serif);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .25s var(--ws-ease),box-shadow .25s var(--ws-ease),border-color .25s}
body.os.inthread .chips.steps .chip::after{
  content:'→';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font:500 15px/1 var(--osMono);color:#7c5cff;transition:transform .25s var(--ws-ease)}
body.os.inthread .chips.steps .chip .mk{
  display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:7px;
  background:rgba(124,92,255,.14);color:#7c5cff;font:600 11px/1 var(--osMono);vertical-align:-4px}
body.os.inthread .chips.steps .chip:not(.k-act):hover{
  transform:translateY(-2px);border-color:hsl(258 60% 62% / .45);
  box-shadow:0 30px 56px -30px hsl(258 70% 45% / .55),inset 0 1px #fff}
body.os.inthread .chips.steps .chip:hover::after{transform:translate(3px,-50%)}
body.os.inthread .chips.steps .chip.k-calc{background:var(--ws-glass-2)}
body.os.inthread .chips.steps .chip.k-calc .mk{background:rgba(34,211,238,.16);color:#0891b2}
body.os.inthread .chips.steps .chip.k-act{
  background:var(--ws-cta);color:#fff;border-color:transparent;border-radius:14px;font-weight:550;
  box-shadow:0 18px 36px -16px rgba(97,89,238,.9)}
body.os.inthread .chips.steps .chip.k-act .mk{background:rgba(255,255,255,.2);color:#fff}
body.os.inthread .chips.steps .chip.k-act::after{color:#fff}
body.os.inthread .chips.steps.spent{opacity:.5}
/* the recommended modules keep their row form but wear the same glass */
body.os.inthread .chip.mod{background:var(--ws-glass-2);border:1px solid var(--ws-glass-line);
  color:var(--ws-ink);font:500 13px var(--f-body,Inter,sans-serif);border-radius:12px}

/* the meta line and the share row */
body.os.inthread .m-orc .meta{
  max-width:var(--ws-measure);margin:14px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:400 11px var(--osMono);color:var(--ws-faint)}
body.os.inthread .m-orc .meta .tools{display:inline-flex;gap:6px}
body.os.inthread .m-orc .meta .tools .tb,
body.os.inthread .m-orc .meta .tools button,
body.os.inthread .m-orc .meta .tools a{
  border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);border-radius:999px;
  padding:4px 10px;color:var(--ws-muted);font:400 11px var(--osMono);cursor:pointer}
body.os.inthread .m-orc .meta .tools .tb:hover{color:var(--ws-ink);border-color:hsl(258 60% 62% / .45)}
/* the read-aloud control sits in the label row, quiet until wanted */
body.os.inthread .m-orc .who .say,body.os.inthread .m-orc .who button{
  margin-left:auto;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);border-radius:999px;
  padding:4px 10px;color:var(--ws-muted);font:400 11px var(--osMono);letter-spacing:0;text-transform:none;cursor:pointer}

/* ── the sticky suggestions and the composer ────────────────────────────
   The composer is the one control the page exists for. Glass, generous,
   a soft accent ring when the caret is in it. */
body.os.inthread .sticky{background:none;border:0}
body.os.inthread .sticky .inner{gap:8px}
body.os.inthread .sticky .chip{
  background:var(--ws-glass-2);border:1px solid var(--ws-glass-line);border-radius:999px;
  color:var(--ws-ink);font:500 12.5px var(--f-body,Inter,sans-serif);padding:8px 14px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--ws-glass-shadow)}
body.os.inthread .sticky .chip:hover{border-color:hsl(258 60% 62% / .45);transform:translateY(-1px)}
body.os.inthread .composer{padding:12px 34px 22px}
body.os.inthread .composer .cwrap{
  max-width:var(--ws-measure);border-radius:18px;padding:12px 14px 12px 16px;
  background:var(--ws-glass-2);border:1px solid var(--ws-glass-line);box-shadow:var(--ws-glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  transition:border-color .2s,box-shadow .2s}
body.os.inthread .composer .cwrap:focus-within{
  border-color:hsl(258 60% 62% / .55);
  box-shadow:0 0 0 4px rgba(124,92,255,.14),var(--ws-glass-shadow)}
body.os.inthread .composer .pfx{color:#7c5cff;font:500 12px/1 var(--osMono);letter-spacing:0}
body.os.inthread .composer #in{font:400 15.5px/1.5 var(--f-body,Inter,sans-serif);color:var(--ws-ink)}
body.os.inthread .composer .sendPair{margin-left:10px}
body.os.inthread .composer .sendPair button,
body.os.inthread .composer #send,body.os.inthread .composer #doit{
  border-radius:12px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-ink);
  font:550 13px var(--f-body,Inter,sans-serif)}
body.os.inthread .composer #send:not([disabled]){background:var(--ws-cta);color:#fff;border-color:transparent;
  box-shadow:0 12px 26px -14px rgba(97,89,238,.9)}

/* ── the dock: sections as cards ─────────────────────────────────────── */
body.os.inthread .osSec{padding:4px 0}
body.os.inthread .osSec + .osSec{border-top:0;margin-top:4px}
body.os.inthread .osTog{color:var(--ws-faint);letter-spacing:.18em;padding:10px 6px 8px}
body.os.inthread .osTog .c{color:var(--ws-faint)}
body.os.inthread .osBody{gap:6px}
body.os.inthread .osRow{
  border-radius:14px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);
  padding:9px 10px;box-shadow:var(--ws-glass-shadow);
  transition:transform .25s var(--ws-ease),box-shadow .25s var(--ws-ease),border-color .25s}
body.os.inthread .osRow .ic{width:30px;height:30px}
body.os.inthread .osRow .nm{font:550 13px/1.2 var(--f-body,Inter,sans-serif);color:var(--ws-ink)}
body.os.inthread .osRow .d{color:var(--ws-muted);font-size:11.5px}
body.os.inthread button.osRow:hover{transform:translateY(-1px);border-color:hsl(258 60% 62% / .45);background:var(--ws-glass-2)}
body.os.inthread .osRow.s-used{border-color:rgba(94,224,160,.38);background:var(--ws-glass-2)}
body.os.inthread .osRow.s-locked{opacity:1;border-style:solid}
body.os.inthread .osRow.s-locked .st{background:#f0a83a}
body.os.inthread .osEmpty{border-radius:14px;color:var(--ws-faint);font-size:11.5px}
body.os.inthread .osAdd{border-radius:12px}

/* ── live tool cards: a tool SHOWS what it read for this question ────────
   Three states, three looks (never two): read for this question (accent bar,
   the facts), reachable but not asked (quiet), and gated (the sample, labelled
   as a sample, never a lock). A card WAKES when the evidence names it. */
body.os.inthread .wsTool{
  position:relative;overflow:hidden;display:block;width:100%;text-align:left;
  border-radius:16px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);
  box-shadow:var(--ws-glass-shadow);padding:11px 12px 12px;color:inherit;font:inherit;cursor:pointer;
  transition:transform .3s var(--ws-ease),box-shadow .3s var(--ws-ease),border-color .3s}
body.os.inthread .wsTool:hover{transform:translateY(-2px);border-color:hsl(258 60% 62% / .45);
  box-shadow:0 30px 56px -30px hsl(258 70% 45% / .55),inset 0 1px #fff}
body.os.inthread .wsTool.lit::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--ws-accent)}
body.os.inthread .wsTool.wake{animation:wsWake .9s var(--ws-ease)}
@keyframes wsWake{0%{box-shadow:0 0 0 0 rgba(124,92,255,.0)}40%{box-shadow:0 0 0 6px rgba(124,92,255,.22)}100%{box-shadow:var(--ws-glass-shadow)}}
body.os.inthread .wsToolHead{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center}
body.os.inthread .wsToolHead .ic{width:30px;height:30px}
body.os.inthread .wsToolHead .ic img{width:100%;height:100%;object-fit:contain;display:block}
body.os.inthread .wsToolHead .ic.noart{border-radius:9px;background:rgba(124,92,255,.14);display:grid;place-items:center;
  color:#7c5cff;font:600 12px/1 var(--osMono)}
body.os.inthread .wsToolHead .nm{font:550 13px/1.2 var(--f-body,Inter,sans-serif);color:var(--ws-ink)}
body.os.inthread .wsToolHead .d{display:block;margin-top:2px;font-size:11px;color:var(--ws-muted)}
body.os.inthread .wsToolHead .st{
  font:500 9.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ws-faint);border:1px solid var(--ws-glass-line);border-radius:999px;padding:5px 8px;white-space:nowrap}
body.os.inthread .wsTool.lit .wsToolHead .st{color:#0f9d63;border-color:rgba(15,157,99,.35);background:rgba(94,224,160,.08)}
body.os.inthread .wsTool.gated .wsToolHead .st{color:#b8791f;border-color:rgba(240,168,58,.4);background:rgba(240,168,58,.08)}
/* the facts a card carries: label + value rows in the app's own type rules
   (prose in the body face, numbers and ids in mono) */
body.os.inthread .wsFacts{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
body.os.inthread .wsFacts li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px;align-items:baseline;
  font-size:12px;line-height:1.35;color:var(--ws-ink)}
body.os.inthread .wsFacts li b{font:500 10px/1.35 var(--f-body,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--ws-faint);white-space:nowrap}
body.os.inthread .wsFacts li span{min-width:0;overflow:hidden;text-overflow:ellipsis}
body.os.inthread .wsFacts li span.mono{font:400 11.5px var(--osMono)}
body.os.inthread .wsFacts li.big span{font:600 20px/1.1 var(--osDisp);letter-spacing:-.02em}
body.os.inthread .wsQuote{margin:9px 0 0;font-size:12px;line-height:1.5;color:var(--ws-muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.os.inthread .wsSrc{margin-top:8px;font:400 10px var(--osMono);color:var(--ws-faint);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
body.os.inthread .wsSrc i{font-style:normal;width:5px;height:5px;border-radius:99px;background:#5ee0a0;display:inline-block}
body.os.inthread .wsSrc i.off{background:#f0a83a}
body.os.inthread .wsSample{margin-top:9px;border-radius:11px;padding:8px 10px;
  background:rgba(240,168,58,.07);border:1px dashed rgba(240,168,58,.38)}
body.os.inthread .wsSample .lbl{display:block;font:500 9.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#b8791f;margin-bottom:6px}
body.os.inthread .wsAbsent{margin-top:8px;font-size:11.5px;line-height:1.45;color:var(--ws-faint)}
body.os.inthread .wsToolMore{display:block;margin-top:9px;font:500 11.5px var(--f-body,Inter,sans-serif);color:#7c5cff}

/* ── the evidence rail: what this answer is made of ─────────────────────
   Tools run, facts read, refusals with reasons. The three kinds do not look
   alike; a refusal is a real state, and it is the honest one. */
body.os.inthread .wsEv{display:flex;flex-direction:column;gap:5px}
body.os.inthread .wsEvRow{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;
  padding:8px 10px;border-radius:12px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2)}
body.os.inthread .wsEvRow .k{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;
  font:600 10px/1 var(--osMono)}
body.os.inthread .wsEvRow.tool .k{background:rgba(124,92,255,.16);color:#7c5cff}
body.os.inthread .wsEvRow.fact .k{background:rgba(94,224,160,.16);color:#0f9d63}
body.os.inthread .wsEvRow.refused .k{background:rgba(240,168,58,.16);color:#b8791f}
body.os.inthread .wsEvRow.unmeasured .k{background:rgba(163,178,216,.16);color:var(--ws-faint)}
body.os.inthread .wsEvRow .t{font:500 12px/1.35 var(--f-body,Inter,sans-serif);color:var(--ws-ink)}
body.os.inthread .wsEvRow .w{display:block;margin-top:2px;font-size:11px;line-height:1.4;color:var(--ws-muted)}
body.os.inthread .wsEvRow .w .mono{font:400 10.5px var(--osMono)}
body.os.inthread .wsEvSum{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
body.os.inthread .wsEvSum span{font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ws-faint);border:1px solid var(--ws-glass-line);border-radius:999px;padding:5px 8px}
body.os.inthread .wsEvSum span b{color:var(--ws-ink);font-weight:600;margin-right:4px}

/* ── the room on the screen ─────────────────────────────────────────── */
body.os.inthread .wsRoom{display:flex;flex-direction:column;gap:6px}
body.os.inthread .wsChip{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  border-radius:999px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);padding:6px 11px 6px 8px;
  font:500 12px/1 var(--f-body,Inter,sans-serif);color:var(--ws-ink)}
body.os.inthread .wsChip i{width:8px;height:8px;border-radius:3px;background:var(--ws-accent);flex:none}
body.os.inthread .wsChip small{font:400 10px var(--osMono);color:var(--ws-faint)}
body.os.inthread .wsBoard{display:flex;flex-direction:column;gap:4px;margin-top:2px}
body.os.inthread .wsTask{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:8px;align-items:center;
  padding:7px 9px;border-radius:11px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);font-size:12px;color:var(--ws-ink)}
body.os.inthread .wsTask i{width:7px;height:7px;border-radius:99px;background:var(--ws-faint)}
body.os.inthread .wsTask.open i{background:#7c5cff}
body.os.inthread .wsTask.done i{background:#5ee0a0}
body.os.inthread .wsTask span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.os.inthread .wsTask small{font:400 10px var(--osMono);color:var(--ws-faint)}

/* ── the partner is present, not a sticker ───────────────────────────── */
body.os.inthread .bcb-wrap{opacity:1;pointer-events:none}

/* ── narrow: the rails fold into a sheet the person can open ────────────
   ⛔ Below 1100px a fixed 344px dock covers the composer. The dock becomes a
      sheet behind one button that names what is inside it. */
/* ⛔ HIDDEN BY DEFAULT, NOT ONLY IN A THREAD (owner, 2026-09-05, screenshot of
   the signed-out door: an unstyled "Rīki un pierādījumi" sat above the
   logotype). armDockBtn() appends the button to <body> on arm, and the only
   rules that ever touched it were scoped body.os.inthread — so anywhere else
   it fell through to a browser-default button in the top-left corner of the
   page. A control is invisible because a rule says so, never because no rule
   happened to match it. */
.wsDockBtn{display:none}
body.os.inthread .wsDockBtn{display:none}
@media (max-width:1100px){
  body.os.inthread .osDock{display:none}
  /* ⛔ The dock is gone here, so its gutter goes too — a reserved strip of
     nothing beside an app is the same defect as an app covering the dock. */
  body.os.inthread{--app-right:0px}
  /* ⚠ …but the button that reopens it is fixed at the top right, over the
     pane's own crumb row. The header makes room rather than the button moving:
     moving it would put it somewhere different from every other width. */
  body.os.inthread.osAppOpen .osApp .rhTop{padding-right:180px}
  body.workHomeOpen .thread{padding-right:0}
  /* under the header, top right: the cookie notice and the partner both
     live at the bottom, and a control nobody can see is a control nobody has */
  body.os.inthread .wsDockBtn{
    display:inline-flex;align-items:center;gap:8px;position:fixed;right:14px;top:calc(var(--wh-top,54px) + 10px);z-index:14;
    border-radius:999px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-ink);
    padding:10px 14px;font:550 12.5px var(--f-body,Inter,sans-serif);box-shadow:var(--ws-glass-shadow);cursor:pointer;
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  body.os.inthread .wsDockBtn b{font:600 10px/1 var(--osMono);color:#7c5cff}
  body.os.inthread.wsDockOpen .osDock{
    display:flex;left:0;right:0;top:auto;bottom:0;width:auto;max-height:72vh;
    border-left:0;border-top:1px solid var(--ws-glass-line);border-radius:20px 20px 0 0;z-index:13;
    padding-bottom:110px}
  body.os.inthread .msgs,body.os.inthread .composer,body.os.inthread .t-head{padding-left:22px;padding-right:22px}
}
@media (max-width:700px){
  body.os.inthread .t-head{padding-left:18px;overflow:visible}
  body.os.inthread .t-head #hbrain{margin-left:0}
  body.os.inthread .m-you{font-size:18px}
  body.os.inthread .m-orc{font-size:15.5px}
  body.os.inthread .msgs,body.os.inthread .composer,body.os.inthread .t-head{padding-left:14px;padding-right:14px}
  body.os.inthread .chips.steps{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  body.os.inthread .wsTool,body.os.inthread .chips.steps .chip,body.os.inthread .osGhost,body.os.inthread .osRow{transition:none}
  body.os.inthread .wsTool.wake{animation:none}
}

/* ── the way back, and the way back in ──────────────────────────────────
   The rail's first row is the door home; on the parked landing one pill
   resumes the conversation. */
body.os.inthread .wsHome{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;padding:7px 10px;border-radius:999px;
  border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-muted);text-decoration:none;
  font:500 12px var(--f-body,Inter,sans-serif);transition:color .2s,border-color .2s}
body.os.inthread .wsHome b{font:600 12px/1 var(--osMono);color:#7c5cff}
body.os.inthread .wsHome:hover{color:var(--ws-ink);border-color:hsl(258 60% 62% / .45)}
/* ⛔ .wsResume — the fixed bottom-centre pill — IS GONE (owner, 2026-09-05).
   It was position:fixed with bottom:26px, so it sat on top of the starter ladder:
   measured at 1400 it covered the fourth starter row outright, and it shared
   the bottom strip with the cookie bar. It also named nothing ("continue the
   conversation") while lying across the row that named the topic, the turn
   count and the last step. The parked conversation is now the promoted ROW
   below — one place, nothing floating, nothing covered. */

/* ── the flight from the door into the room ───────────────────────────
   The sky stays. The door recedes, the typed sentence flies from the box to
   its place as the heading of the thread, the rails slide in. */
.wsFly{position:fixed;z-index:60;pointer-events:none;box-sizing:border-box;white-space:pre-wrap;word-break:break-word;
  transition:left .58s cubic-bezier(.2,.8,.2,1),top .58s cubic-bezier(.2,.8,.2,1),width .58s cubic-bezier(.2,.8,.2,1),
    font-size .58s cubic-bezier(.2,.8,.2,1),color .4s,padding .58s cubic-bezier(.2,.8,.2,1),letter-spacing .58s}
html.wsEnter #void{transition:opacity .42s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1)}
html.wsEnter #void.gone{opacity:0;transform:scale(.985)}
html.wsEnter #q{color:transparent;caret-color:transparent}
html.wsEnter body.os.inthread .m-you.wsLanding{opacity:0}
body.os.inthread .m-you.wsLanded{animation:wsLanded .35s cubic-bezier(.2,.8,.2,1)}
@keyframes wsLanded{from{opacity:.6}to{opacity:1}}
body.os.inthread .osAnon,body.os.inthread .osDock{animation:wsSlideIn .6s cubic-bezier(.2,.8,.2,1) both}
body.os.inthread .osDock{animation-name:wsSlideInR;animation-delay:.08s}
body.os.inthread .thread.on .msgs,body.os.inthread .thread.on .composer{animation:wsRise .55s cubic-bezier(.2,.8,.2,1) both}
body.os.inthread .thread.on .composer{animation-delay:.1s}
@keyframes wsSlideIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes wsSlideInR{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes wsRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .wsFly{display:none}
  body.os.inthread .osAnon,body.os.inthread .osDock,body.os.inthread .thread.on .msgs,body.os.inthread .thread.on .composer{animation:none}
}

/* ═══ v2 · the owner's pass (2026-09-02): header, composer, chat type ═══════
   "header not cool, buttons not cool enough, send/do not there, fonts in
   chat, chat elements — way more cool visually". Everything below is later
   in the cascade than the block above and wins by order, never by !important. */

/* ── the columns own their edges: the reading column never runs under a rail
   or the dock, whoever is signed in ───────────────────────────────────── */
@media (min-width:1180px){
  body.os.inthread .msgs,body.os.inthread .composer,body.os.inthread .t-head,body.os.inthread .sticky{
    padding-left:calc(var(--ws-rail) + 28px)}
}
@media (min-width:1101px){
  body.os.inthread .msgs,body.os.inthread .composer,body.os.inthread .t-head,body.os.inthread .sticky{
    padding-right:calc(var(--ws-dock) + 22px)}
}
/* the head is a kicker line, not a second title bar */
body.os.inthread .t-head{padding-top:14px;padding-bottom:0;min-height:0;gap:10px}
body.os.inthread .t-head #thead{
  font:500 10.5px/1.2 var(--f-body,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--ws-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--ws-measure)}
body.os.inthread .t-head #hbrain{width:18px;height:18px;opacity:.7}
/* the person's sentence is the heading — no baked-in Latvian prefix on any page */
body.os.inthread .m-you::before{content:none}
body.os.inthread .m-you{
  position:relative;padding-left:18px;margin-top:22px;
  font:600 clamp(21px,1.8vw,27px)/1.28 var(--osDisp);letter-spacing:-.025em}
body.os.inthread .m-you::after{
  content:'';position:absolute;left:0;top:.3em;bottom:.25em;width:3px;border-radius:99px;background:var(--ws-accent)}

/* ── the header: one glass bar, the wordmark as the only ornament ─────── */
body.os.inthread .top{
  background:var(--ws-glass);border-bottom:1px solid var(--ws-glass-line);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 10px 30px -24px rgba(24,32,56,.35)}
body.os.inthread .top .topBrand{position:relative;padding:4px 6px;border-radius:12px}
body.os.inthread .top .topBrand::before{
  content:'';position:absolute;inset:-4px -8px;border-radius:14px;opacity:0;
  background:radial-gradient(60% 80% at 40% 50%,rgba(124,92,255,.18),transparent 70%);transition:opacity .3s}
body.os.inthread .top .topBrand:hover::before{opacity:1}
body.os.inthread .top .bcContourFull{height:26px}
body.os.inthread .top .hsearch,
body.os.inthread .top .auth .su,
body.os.inthread .top .sysbtn,
body.os.inthread .top .ctxBadge{
  height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--ws-glass-line);
  background:var(--ws-glass-2);color:var(--ws-ink);box-shadow:inset 0 1px rgba(255,255,255,.5);
  font:550 12.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:0;
  transition:border-color .2s,transform .2s var(--ws-ease),box-shadow .2s}
:root:not([data-theme="light"]) body.os.inthread .top .hsearch,
:root:not([data-theme="light"]) body.os.inthread .top .sysbtn,
:root:not([data-theme="light"]) body.os.inthread .top .ctxBadge{box-shadow:inset 0 1px rgba(255,255,255,.06)}
body.os.inthread .top .hsearch:hover,
body.os.inthread .top .sysbtn:hover,
body.os.inthread .top .ctxBadge:hover{border-color:hsl(258 60% 62% / .5);box-shadow:0 0 0 4px rgba(124,92,255,.12)}
body.os.inthread .top .auth .su{
  background:var(--ws-cta);color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px rgba(97,89,238,.9)}
body.os.inthread .top .auth .su:hover{filter:brightness(1.06);transform:translateY(-1px)}
body.os.inthread .top .hsearch{font-family:var(--osMono);font-weight:500;color:var(--ws-muted)}

/* ── the composer: the field and its two verbs are ONE instrument ──────── */
body.os.inthread .composer{
  display:grid;grid-template-columns:minmax(0,var(--ws-measure)) auto;justify-content:center;align-items:center;
  column-gap:10px;padding-top:12px;padding-bottom:24px}
body.os.inthread .composer .cwrap{width:100%;max-width:none;margin:0;min-height:48px;border-radius:20px;padding:10px 12px 10px 18px}
body.os.inthread .composer #in{font-size:16px}
body.os.inthread .composer .pfx{font:600 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#7c5cff;margin-right:2px}
body.os.inthread .composer .sendPair{
  margin:0;height:54px;border-radius:20px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);
  box-shadow:var(--ws-glass-shadow);overflow:hidden;align-items:stretch;
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
body.os.inthread .composer .sendPair>button{
  height:100%;padding:0 16px;font:550 13.5px var(--f-body,Inter,sans-serif);color:var(--ws-ink);border-radius:0;
  transition:background .2s,color .2s,filter .2s}
body.os.inthread .composer .sendPair>button svg{width:15px;height:15px}
body.os.inthread .composer .sendPair>#send:not(:disabled){background:var(--ws-cta);color:#fff}
body.os.inthread .composer .sendPair>#send:not(:disabled):hover{filter:brightness(1.06)}
body.os.inthread .composer .sendPair>#doit{border-left:1px solid var(--ws-glass-line);color:var(--ws-muted)}
body.os.inthread .composer .sendPair>#doit:hover:not(:disabled){color:#7c5cff;background:rgba(124,92,255,.08)}
body.os.inthread .composer .sendPair>button:disabled{opacity:.45}
body.os.inthread .composer #mic,body.os.inthread .composer #clip{
  border-radius:10px;border:1px solid var(--ws-glass-line);background:transparent;color:var(--ws-muted);transition:color .2s,border-color .2s}
body.os.inthread .composer #mic:hover,body.os.inthread .composer #clip:hover{color:#7c5cff;border-color:hsl(258 60% 62% / .45)}
@media (max-width:760px){
  body.os.inthread .composer{grid-template-columns:minmax(0,1fr);row-gap:8px}
  body.os.inthread .composer .sendPair{height:46px;justify-self:end}
}

/* ── the answer, typeset ──────────────────────────────────────────────── */
body.os.inthread .m-orc{font-size:17px;line-height:1.76;letter-spacing:-.003em}
body.os.inthread .m-orc p{margin:0 0 15px}
body.os.inthread .m-orc h1,body.os.inthread .m-orc h2,body.os.inthread .m-orc h3{
  font:650 19px/1.3 var(--osDisp);letter-spacing:-.02em;margin:22px 0 8px;color:var(--ws-ink)}
body.os.inthread .m-orc ul,body.os.inthread .m-orc ol{padding-left:22px;margin:0 0 14px}
body.os.inthread .m-orc li{margin:4px 0}
body.os.inthread .m-orc li::marker{color:#7c5cff}
body.os.inthread .m-orc code{font:500 .9em var(--osMono);background:rgba(124,92,255,.10);border-radius:6px;padding:1px 6px}
body.os.inthread .m-orc blockquote{margin:12px 0;padding:8px 14px;border-left:3px solid #7c5cff;background:rgba(124,92,255,.06);border-radius:0 12px 12px 0;color:var(--ws-muted)}
body.os.inthread .m-orc .who{
  padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--ws-glass-line);position:relative}
body.os.inthread .m-orc .who::after{
  content:'';position:absolute;left:0;bottom:-1px;width:64px;height:2px;border-radius:99px;background:var(--ws-accent)}
body.os.inthread .m-orc .who svg.bcMark{width:22px;height:22px}
body.os.inthread .m-orc .who .say,body.os.inthread .m-orc .who button{
  border-radius:999px;padding:5px 12px;font:500 11.5px var(--f-body,Inter,sans-serif);letter-spacing:0;color:var(--ws-muted);
  border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);transition:color .2s,border-color .2s}
body.os.inthread .m-orc .who .say:hover,body.os.inthread .m-orc .who button:hover{color:#7c5cff;border-color:hsl(258 60% 62% / .45)}
/* the meta line becomes a quiet footer of the letter */
body.os.inthread .m-orc .meta{
  margin-top:18px;padding-top:12px;border-top:1px solid var(--ws-glass-line);justify-content:space-between}
body.os.inthread .m-orc .meta .tools .tb,body.os.inthread .m-orc .meta .tools button,body.os.inthread .m-orc .meta .tools a{
  padding:5px 12px;font:500 11.5px var(--f-body,Inter,sans-serif);color:var(--ws-muted);transition:color .2s,border-color .2s}
/* next steps: the mark is a gem, the card lifts on hover */
body.os.inthread .chip-lbl{margin-top:26px}
body.os.inthread .chips.steps .chip{padding:14px 44px 14px 16px;font-size:14.5px;border-radius:16px}
body.os.inthread .chips.steps .chip .mk{
  width:24px;height:24px;border-radius:8px;margin-right:10px;vertical-align:-6px;
  background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(34,211,238,.18));color:#6b46e5;font-weight:650}
:root:not([data-theme="light"]) body.os.inthread .chips.steps .chip .mk{color:#c9bcff}
body.os.inthread .chips.steps .chip.k-calc .mk{background:linear-gradient(135deg,rgba(34,211,238,.24),rgba(94,224,160,.18));color:#0891b2}
body.os.inthread .chips.steps .chip::after{right:16px;font-size:16px}

/* ═══ v3 · uncrowd (owner, 2026-09-02) ═══════════════════════════════════ */
/* the rail carries the day, the shelf, the door, the account — nothing else */
body.os.inthread .osWho,body.os.inthread .osFree{display:none}
/* the way back sits beside the logotype */
body.os.inthread .top .wsHome{
  display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding:0 12px;height:32px;border-radius:999px;
  border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-muted);text-decoration:none;
  font:550 12.5px/1 var(--f-body,Inter,sans-serif);transition:color .2s,border-color .2s}
body.os.inthread .top .wsHome b{font:600 12px/1 var(--osMono);color:#7c5cff}
body.os.inthread .top .wsHome:hover{color:var(--ws-ink);border-color:hsl(258 60% 62% / .45)}
@media (max-width:700px){body.os.inthread .top .wsHome{padding:0 9px}body.os.inthread .top .wsHome span{display:none}}
/* the door lists the conversations that already exist */
#ladder .stop.wsHidden{display:none}
#ladder .wsConvLbl{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 6px;
  font:500 10px/1 Inter,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8b94a6}
#ladder .wsConvLbl small{font:500 10px ui-monospace,Menlo,monospace;letter-spacing:0}
#ladder .stop.wsConv{--dh:258}
#ladder .stop.wsConv .pathPick{color:#7c5cff;background:rgba(124,92,255,.14)}
#ladder .stop.wsConv + .stop:not(.wsConv){margin-top:8px}
/* the sticky suggestion strip clipped its own chips over the composer; the
   next steps already live in the answer, so the strip goes (owner, 2026-09-02) */
body.os.inthread .sticky{display:none}
/* the reading column is the stage's full width minus the rails, whatever the
   page's base rule says (max-width:880 + width:100% + margin:auto) */
body.os.inthread .msgs{width:100%;max-width:none;box-sizing:border-box;margin:0}
body.os.inthread .m-orc,body.os.inthread .m-you,body.os.inthread .chip-lbl,body.os.inthread .chips.steps{width:100%;box-sizing:border-box}
/* ═══ v4 (owner, 2026-09-02) ═══════════════════════════════════════════ */
/* no "My system" pill and no job rail (the bottom-right site badges) on the OS layer */
body.os .sysbtn,body.os .rail{display:none!important}
/* the way back exists only inside the conversation */
.top .wsHome{display:none}
/* the door's conversation rows read like chats: avatar, title, last step; the open one is lit */
#ladder .stop.wsConv .wsAv{font:650 12px/1 'Space Grotesk',Inter,sans-serif;color:#fff;
  background:linear-gradient(135deg,#6159ee,#a06bd0);box-shadow:0 6px 14px -6px rgba(97,89,238,.7)}
#ladder .stop.wsConv .pathNote{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#ladder .stop.wsConv.on{border-color:hsl(258 60% 62% / .55);
  background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(34,211,238,.08));box-shadow:0 0 0 3px rgba(124,92,255,.12)}
#ladder .stop.wsConv .wsOn{font:600 9.5px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-style:normal;
  color:#0f9d63;border:1px solid rgba(15,157,99,.35);border-radius:999px;padding:3px 7px;margin-left:8px;vertical-align:2px;
  background:rgba(94,224,160,.12)}
/* ── the conversation you parked, promoted where it already lives ────────
   Not a new element: the same row, told apart. ⚠ These are the DARK and
   untinted values only — the clay theme's copy of this rule lives in
   work-clay.css at that theme's own specificity, because clay is linked last
   and would otherwise win every one of these declarations. */
#ladder .stop.wsConv.wsParked{
  border-color:hsl(258 62% 62% / .7);
  background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(124,92,255,.06));
  box-shadow:0 0 0 3px rgba(124,92,255,.16),0 14px 28px -18px rgba(47,34,110,.5)}
#ladder .stop.wsConv.wsParked::before{
  content:'';position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:0 3px 3px 0;background:#7c5cff}
#ladder .stop.wsConv.wsParked .pathGo{opacity:1;transform:translateX(3px)}
#ladder .stop.wsConv.wsParked .wsOn{
  color:#5b45c8;border-color:rgba(124,92,255,.4);background:rgba(124,92,255,.14)}
:root[data-theme="dark"] #ladder .stop.wsConv.wsParked .wsOn{color:#cdc2ff}
body:not(.inthread) .top .wsHome{display:none!important}

/* ═══ v5 · the signed-in workspace (owner, 2026-09-02) ══════════════════ */
/* the reading paper exists for words; an empty room shows the world */
body.os.inthread.workConversationEmpty .messageStage::before{display:none}
/* the way back is a stranger's control */
body[data-bc-tier]:not([data-bc-tier="anon"]) .top .wsHome{display:none!important}
/* an empty room shows the world, whatever view the shell is in */
body.os.inthread .messageStage:has(.msgs:empty)::before{display:none}
body.workHomeOpen .top .wsHome{display:none!important}

/* ── the rail: the same glass, the same rows, the same lit state ─────────
   Specificity beats the shell's own runtime <style> (body.workHomeOpen .x),
   never !important. */
body.os.workHomeOpen .whAppNav{
  background:var(--ws-glass);border-right:1px solid var(--ws-glass-line);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25);
  padding:14px 12px 14px}
body.os.workHomeOpen .whAppNav .today{
  border-radius:16px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:none;padding:12px 13px;margin-bottom:12px}
body.os.workHomeOpen .whAppNav .today .d{font:600 14.5px/1.15 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.01em;color:var(--ws-ink)}
body.os.workHomeOpen .whAppNav .today .s{color:var(--ws-muted)}
body.os.workHomeOpen .whAppNav .today .n{background:var(--ws-cta);color:#fff;font-weight:600;border-radius:999px}
body.os.workHomeOpen .whAppNav h4{
  font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--ws-faint);margin:16px 6px 6px}
body.os.workHomeOpen .whAppNav h4 .c{font:500 10px var(--osMono,ui-monospace);letter-spacing:0;color:var(--ws-faint)}
body.os.workHomeOpen .whAppNav .sbj{border-radius:12px;padding:8px 9px;font:550 13.5px/1.2 var(--f-body,Inter,sans-serif);color:var(--ws-ink);transition:background .16s,border-color .16s}
body.os.workHomeOpen .whAppNav .sbjrow{border-radius:12px;border:1px solid transparent}
body.os.workHomeOpen .whAppNav .sbjrow:hover{background:var(--ws-glass-2);border-color:var(--ws-glass-line)}
body.os.workHomeOpen .whAppNav .sbjrow.here{background:var(--ws-glass-2);border-color:hsl(258 60% 62% / .35);box-shadow:var(--ws-glass-shadow)}
body.os.workHomeOpen .whAppNav .sbj .mk{
  width:26px;height:26px;border-radius:9px;display:inline-grid;place-items:center;
  font:650 10px/1 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:0;color:var(--ws-ink);
  background:var(--ws-glass-2);border:1px solid var(--ws-glass-line);box-shadow:inset 0 1px rgba(255,255,255,.5)}
:root:not([data-theme="light"]) body.os.workHomeOpen .whAppNav .sbj .mk{box-shadow:inset 0 1px rgba(255,255,255,.06)}
body.os.workHomeOpen .whAppNav .sbj .mk.person,
body.os.workHomeOpen .whAppNav .sbj .mk.own{background:var(--ws-cta);color:#fff;border-color:transparent;box-shadow:0 8px 16px -8px rgba(97,89,238,.8)}
body.os.workHomeOpen .whAppNav .sbj .mk.mklogo{background:#fff;padding:3px}
body.os.workHomeOpen .whAppNav .chv{color:var(--ws-faint);border-radius:8px}
body.os.workHomeOpen .whAppNav .room{
  border-radius:11px;padding:7px 9px 7px 10px;font:500 13px/1.2 var(--f-body,Inter,sans-serif);color:var(--ws-muted);
  border:1px solid transparent;transition:background .16s,color .16s,border-color .16s}
body.os.workHomeOpen .whAppNav .room:hover{background:var(--ws-glass-2);color:var(--ws-ink);border-color:var(--ws-glass-line)}
body.os.workHomeOpen .whAppNav .room.on{background:var(--ws-glass-2);color:var(--ws-ink);border-color:hsl(258 60% 62% / .35);box-shadow:var(--ws-glass-shadow)}
body.os.workHomeOpen .whAppNav .room .h{color:#7c5cff;font:500 12px var(--osMono,ui-monospace)}
body.os.workHomeOpen .whAppNav .room .g{border-radius:999px;background:rgba(124,92,255,.14);color:#6b46e5;font:600 10px var(--osMono,ui-monospace);padding:2px 7px}
body.os.workHomeOpen .whAppNav .room .g.live{background:rgba(94,224,160,.18);color:#0f9d63}
body.os.workHomeOpen .whAppNav .room .g.warn{background:rgba(240,168,58,.18);color:#b8791f}
body.os.workHomeOpen .whAppNav .add{
  border:1px dashed var(--ws-glass-line);border-radius:11px;padding:7px 10px;color:var(--ws-faint);
  font:500 12px var(--f-body,Inter,sans-serif);transition:color .16s,border-color .16s}
body.os.workHomeOpen .whAppNav .add:hover{color:#7c5cff;border-color:hsl(258 60% 62% / .45)}
body.os.workHomeOpen .whAppNav .whFoot{padding-top:10px;border-top:1px solid var(--ws-glass-line)}
body.os.workHomeOpen .railFoot #arvPill.ctx{
  border-radius:14px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow)}
/* The account menu that opens from this foot. The nav is overflow:auto AND
   carries a backdrop-filter, so it is the containing block of the fixed menu
   and clips it at its own right edge: measured 2026-09-03, a 386px menu was
   cut at 272px, and the older 320px one was cut the same way. The menu takes
   the nav's width instead of fighting the clip, and rises clear of the foot. */
body.os.workHomeOpen .railFoot .ctxPop{
  left:8px;right:auto;bottom:74px;width:calc(var(--wh-nav) - 16px);max-width:none;max-height:min(72vh,620px)}
body.os.workHomeOpen .railFoot .ctxPop .who .em2{max-width:none}

/* ── the room head: a kicker line and a title, not a toolbar ─────────── */
body.os.workHomeOpen .whRoomHead{
  background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:16px}
body.os.workHomeOpen .whRoomHead .rh1 .crumb{
  font:500 10.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--ws-faint);
  background:none;border:0;padding:0;cursor:pointer}
body.os.workHomeOpen .whRoomHead .rh1 .crumb:hover{color:#7c5cff}
body.os.workHomeOpen .whRoomHead .rh1 .sep{color:var(--ws-faint);margin:0}
body.os.workHomeOpen .whRoomHead .rh1 .rm{font:600 15px/1.2 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.01em;color:var(--ws-ink)}
/* ⛔ ONE CHIP FAMILY. The room's kind used to be its own chip — 9.5px, .14em
   tracking, its own padding — sitting 8px from four 11px count chips with none
   of it. Two vocabularies on one line read as a mistake, not a distinction.
   It keeps the uppercase (it is a TYPE, not a count) and gives up everything
   else: same box, same weight, same size as the chips beside it. */
body.os.workHomeOpen .whRoomHead .rh1 .kind{
  margin-left:0;font:500 11px/1 var(--f-body,Inter,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--ws-faint);
  border:1px solid var(--ws-glass-line);border-radius:999px;padding:5px 9px;background:var(--ws-glass-2)}
body.os.workHomeOpen .whRoomHead .rshare{
  height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-muted);
  font:550 12px var(--f-body,Inter,sans-serif);transition:color .2s,border-color .2s}
body.os.workHomeOpen .whRoomHead .rshare:hover{color:var(--ws-ink);border-color:hsl(258 60% 62% / .45)}
body.os.workHomeOpen .whRoomHead .rh2 .gt{font:400 13.5px/1.5 var(--f-body,Inter,sans-serif);color:var(--ws-muted)}
body.os.workHomeOpen .whRoomHead .rh3{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
body.os.workHomeOpen .whRoomHead .rh3>*{
  font:500 11px/1 var(--f-body,Inter,sans-serif);color:var(--ws-muted);border:1px solid var(--ws-glass-line);
  border-radius:999px;padding:5px 9px;background:var(--ws-glass-2)}
body.os.workHomeOpen .whRoomHead .rh3>*::before{content:none}
/* ⛔ AND IT CARRIED ITS OWN margin-left:.4rem from the base sheet, so the one
   chip that is a control sat 14.4px from its neighbour while every other gap
   was 8. A rhythm with one exception is not a rhythm. */
body.os.workHomeOpen .whRoomHead .rh-model{cursor:pointer;margin-left:0}
body.os.workHomeOpen .whRoomHead .rh-model .dot{background:#5ee0a0}

/* ── the empty room: a glass card, the room's mark, two ways in ──────── */
body.os.workHomeOpen .whRoomEmpty{
  position:relative;max-width:var(--ws-measure);margin:34px auto 0;padding:28px 28px 24px;
  border-radius:22px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);overflow:hidden}
body.os.workHomeOpen .whRoomEmpty::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--ws-accent)}
body.os.workHomeOpen .whRoomEmpty .mk{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:650 18px/1 var(--osDisp,'Space Grotesk',sans-serif);
  color:#fff;background:var(--ws-cta);box-shadow:0 12px 24px -10px rgba(97,89,238,.8);margin-bottom:14px}
body.os.workHomeOpen .whRoomEmpty .mk img{width:26px;height:26px}
body.os.workHomeOpen .whRoomEmpty h1{font:650 clamp(24px,2.2vw,32px)/1.15 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.03em;color:var(--ws-ink);margin:0 0 8px}
body.os.workHomeOpen .whRoomEmpty p{font:400 15.5px/1.6 var(--f-body,Inter,sans-serif);color:var(--ws-muted);margin:0 0 18px;max-width:52ch}
body.os.workHomeOpen .whRoomEmpty .asks{display:flex;flex-wrap:wrap;gap:8px}
body.os.workHomeOpen .whRoomEmpty .asks button{
  padding:10px 16px;border-radius:12px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-ink);
  font:550 13.5px var(--f-body,Inter,sans-serif);cursor:pointer;transition:transform .2s var(--ws-ease),border-color .2s,box-shadow .2s}
body.os.workHomeOpen .whRoomEmpty .asks button:first-child{background:var(--ws-cta);color:#fff;border-color:transparent;box-shadow:0 12px 26px -14px rgba(97,89,238,.9)}
body.os.workHomeOpen .whRoomEmpty .asks button:hover{transform:translateY(-1px);border-color:hsl(258 60% 62% / .45)}
body.os.workHomeOpen .whRoomEmpty .sets{margin-top:14px;background:none;border:0;padding:0;color:#7c5cff;font:500 13px var(--f-body,Inter,sans-serif);cursor:pointer}

/* ── the home screens and the catalogue: blocks are glass cards ──────── */
body.os.workHomeOpen .whHome .blk{
  border-radius:18px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow);padding:16px 16px 12px}
body.os.workHomeOpen .whHome .blk h3{font:600 13px/1.2 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.01em;color:var(--ws-ink)}
body.os.workHomeOpen .whHome .blk h3 .c,body.os.workHomeOpen .whHome .blk>span.c{font:500 10px var(--osMono,ui-monospace);color:var(--ws-faint)}
body.os.workHomeOpen .whHome .ln{border-radius:11px;padding:8px 10px;transition:background .16s}
body.os.workHomeOpen .whHome .ln:hover{background:rgba(124,92,255,.07)}
body.os.workHomeOpen .whHome .ln .t{font:550 13px var(--f-body,Inter,sans-serif);color:var(--ws-ink)}
body.os.workHomeOpen .whHome .ln .s{color:var(--ws-muted);font-size:11.5px}
body.os.workHomeOpen .whHome .rhead .rm{font:650 clamp(22px,2vw,28px)/1.15 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.03em;color:var(--ws-ink)}
body.os.workHomeOpen .whHome .rhead .kind{font:500 9.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ws-faint);border:1px solid var(--ws-glass-line);border-radius:999px;padding:4px 8px}
body.os.workHomeOpen .whHome .appc{
  border-radius:16px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow);
  transition:transform .25s var(--ws-ease),border-color .25s,box-shadow .25s}
body.os.workHomeOpen .whHome .appc:hover{transform:translateY(-2px);border-color:hsl(258 60% 62% / .45)}
body.os.workHomeOpen .whHome .appc .nm{font:550 13px var(--f-body,Inter,sans-serif);color:var(--ws-ink)}
body.os.workHomeOpen .whHome .appc .d{color:var(--ws-muted)}
body.os.workHomeOpen .whHome .appc.on::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--ws-accent)}
body.os.workHomeOpen .whHome .whStoreQ{border-radius:12px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-ink);padding:9px 12px}
/* the person band and the panel heads follow the same glass */
body.os.workHomeOpen .whPBand .whPBandIn{border-radius:18px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow)}
body.os.workHomeOpen .whPBAvatar{background:var(--ws-cta);color:#fff;border-radius:12px}
body.os.workHomeOpen .whPBTab{border-radius:999px;border:1px solid var(--ws-glass-line);background:transparent;color:var(--ws-muted);font:550 12px var(--f-body,Inter,sans-serif)}
body.os.workHomeOpen .whPBTab.on{background:var(--ws-glass-2);color:var(--ws-ink);border-color:hsl(258 60% 62% / .35)}
body.os.workHomeOpen .whPanelHead h1,body.os.workHomeOpen .whPanelHead h2{font-family:var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.02em}
/* the pulse in the header wears the same pill as the controls */
body.os.workHomeOpen .top .pulse{
  height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-muted);
  font:550 12.5px/1 var(--f-body,Inter,sans-serif)}
body.os.workHomeOpen .top .pulse b{color:var(--ws-ink);font-weight:650}
body.os.workHomeOpen .top .pulse i{background:#5ee0a0}
/* a signed-in person on the door: no legacy rail over the marketing page,
   one pill to the workspace beside the logotype */
body.wsSigned:not(.inthread) .ideas,body.wsSigned:not(.inthread) #ideas,body.wsSigned:not(.inthread) .ideasTog{display:none!important}
body.wsSigned:not(.inthread) .thread.hasIdeas{padding-left:0}
.top .wsWork{display:none}
body.wsSigned:not(.inthread) .top .wsWork{
  display:inline-flex;align-items:center;gap:8px;margin-left:8px;height:32px;padding:0 14px;border-radius:999px;border:1px solid transparent;
  background:linear-gradient(135deg,#6159ee,#7c5cf0 48%,#a06bd0);color:#fff;font:550 12.5px/1 Inter,system-ui,sans-serif;cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(97,89,238,.9);transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
body.wsSigned:not(.inthread) .top .wsWork:hover{filter:brightness(1.06);transform:translateY(-1px)}
.top .wsWork b{font:600 12px/1 ui-monospace,Menlo,monospace}
/* the company home's room rows: a tight grid, the mark small */
body.os.workHomeOpen .whHome .ln{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center}
body.os.workHomeOpen .whHome .ln .r{font:400 10.5px var(--osMono,ui-monospace);color:var(--ws-faint)}
/* the empty-room card is placed by the shell (absolute); centre it in the stage,
   below the head, never under the dock */
body.os.workHomeOpen .whRoomEmpty{
  position:absolute;left:50%;top:calc(50% + 24px);transform:translate(-50%,-50%);margin:0;
  width:min(var(--ws-measure),calc(100% - 48px));max-height:calc(100% - 120px);overflow:auto}
/* the sheet is the shell's; the card is ours */
body.os.workHomeOpen .whRoomEmpty{
  position:absolute;left:var(--wh-nav);right:var(--wh-dock);top:0;bottom:0;transform:none;width:auto;max-height:none;margin:0;
  padding:100px 34px 140px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;
  display:flex;flex-direction:column;justify-content:center;align-items:center}
@media(max-width:1180px){body.os.workHomeOpen .whRoomEmpty{right:0}}
body.os.workHomeOpen .whRoomEmpty::before{content:none}
body.os.workHomeOpen .whRoomEmpty .wsRoomCard{
  position:relative;width:min(var(--ws-measure),100%);padding:28px 28px 24px;box-sizing:border-box;
  border-radius:22px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);overflow:hidden}
body.os.workHomeOpen .whRoomEmpty .wsRoomCard::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--ws-accent)}
/* the paper appears with the first answer, never before */
body.os.inthread .messageStage:not(:has(.m-orc))::before{display:none}
/* the shell's reading light had 272/324 baked in — it follows the live rails
   now, and it appears with the first answer */
body.os.inthread .msgs::before{left:var(--ws-rail);right:var(--ws-dock)}
body.os.inthread.workHomeOpen .msgs::before{left:var(--wh-nav,272px);right:var(--wh-dock,324px)}
body.os.inthread .msgs:not(:has(.m-orc))::before{display:none}
@media(max-width:1179px){body.os.inthread .msgs::before{left:0}}
@media(max-width:1100px){body.os.inthread .msgs::before{right:0}}
/* the room head floats over scrolling words: it keeps its glass */
body.os.workHomeOpen .whRoomHead{
  background:var(--ws-glass);border-bottom:1px solid var(--ws-glass-line);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25)}
/* inside the workspace the column is centred between the rails, same measure */
body.os.inthread.workHomeOpen .msgs{max-width:none;width:100%;padding:16px 34px 10px;margin-left:0;margin-right:0}
body.os.inthread.workHomeOpen .m-orc,body.os.inthread.workHomeOpen .m-you,
body.os.inthread.workHomeOpen .chip-lbl,body.os.inthread.workHomeOpen .chips.steps{max-width:var(--ws-measure);margin-left:auto;margin-right:auto}
body.os.inthread.workHomeOpen .composer{padding-left:34px;padding-right:34px}
/* the jump-to-bottom button is an overlay, never a flex sibling of the words
   (the paper rule above made every stage child relative — measured: 195 px
   of the column went to it) */
body.os.inthread .messageStage > .jump{position:absolute}
body.os.inthread .wsReadNow{margin:10px 6px 4px;font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--ws-faint)}

/* ═══ v6 · the personal space (owner, 2026-09-02) ══════════════════════ */
/* the band is a hero: a real avatar, the name as a title, the tabs as pills */
body.os.workHomeOpen .whPBand{border-bottom:0;background:transparent}
body.os.workHomeOpen .whPBand .whPBandIn{max-width:none;padding:14px 34px 0;border:0;background:none;box-shadow:none}
body.os.workHomeOpen .whPBRow{gap:14px;flex-wrap:wrap;min-height:56px}
body.os.workHomeOpen .whPBAvatar{width:52px;height:52px;border-radius:16px;font:650 16px/1 var(--osDisp,'Space Grotesk',sans-serif);
  display:grid;place-items:center;box-shadow:0 14px 28px -12px rgba(97,89,238,.9)}
body.os.workHomeOpen .whPBIdentity .rm{font:650 22px/1.15 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.025em;color:var(--ws-ink);display:block}
body.os.workHomeOpen .whPBIdentity .kind{display:block;margin-top:4px;font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--ws-faint);border:0;padding:0;background:none}
body.os.workHomeOpen .whPBTab{height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);
  color:var(--ws-muted);font:550 12.5px/1 var(--f-body,Inter,sans-serif);box-shadow:inset 0 1px rgba(255,255,255,.5);transition:border-color .2s,color .2s}
body.os.workHomeOpen .whPBTab:hover{color:var(--ws-ink);border-color:hsl(258 60% 62% / .45)}
body.os.workHomeOpen .whPBTab.on{color:var(--ws-ink);border-color:hsl(258 60% 62% / .45);box-shadow:0 0 0 3px rgba(124,92,255,.12)}
body.os.workHomeOpen .whPBTab .n{margin-left:6px;font:600 10px var(--osMono,ui-monospace);color:#7c5cff}
body.os.workHomeOpen .whPBOpen{border-top:1px solid var(--ws-glass-line);margin-top:12px}
body.os.workHomeOpen .whPBApp{border-radius:12px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-ink);
  font:550 12.5px var(--f-body,Inter,sans-serif);box-shadow:var(--ws-glass-shadow);transition:transform .2s var(--ws-ease),border-color .2s}
body.os.workHomeOpen .whPBApp:hover{transform:translateY(-1px);border-color:hsl(258 60% 62% / .45)}

/* the Chief of Staff's brief is a letter on glass */
body.os.workHomeOpen .whArrival{left:var(--wh-nav);right:var(--wh-dock);top:118px;height:auto;padding:0 34px}
@media(max-width:1180px){body.os.workHomeOpen .whArrival{right:0}}
body.os.workHomeOpen .whArrivalTurn{
  width:min(var(--ws-measure),100%);padding:26px 28px 22px;box-sizing:border-box;position:relative;overflow:hidden;
  border-radius:22px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
body.os.workHomeOpen .whArrivalTurn::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--ws-accent)}
body.os.workHomeOpen .whArrivalWho{display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#7c5cff}
body.os.workHomeOpen .whArrivalWho img{width:20px;height:20px}
body.os.workHomeOpen .whArrivalWho b{font-weight:600}
body.os.workHomeOpen .whArrivalWho span{color:var(--ws-faint)}
body.os.workHomeOpen .whArrival h1{font:650 clamp(26px,2.4vw,34px)/1.12 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.03em;color:var(--ws-ink);margin:0 0 8px}
body.os.workHomeOpen .whArrivalLead{font:400 15.5px/1.6 var(--f-body,Inter,sans-serif);color:var(--ws-muted);margin:0 0 16px;max-width:54ch}
body.os.workHomeOpen .whSignals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
body.os.workHomeOpen .whSignals button{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:11px 13px;border-radius:14px;border:1px solid var(--ws-glass-line);
  background:var(--ws-glass-2);color:var(--ws-muted);font:500 11.5px/1.3 var(--f-body,Inter,sans-serif);text-align:left;cursor:pointer;
  transition:transform .2s var(--ws-ease),border-color .2s}
body.os.workHomeOpen .whSignals button:hover{transform:translateY(-1px);border-color:hsl(258 60% 62% / .45)}
body.os.workHomeOpen .whSignals button b{font:650 22px/1 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.02em;color:var(--ws-ink)}
body.os.workHomeOpen .whSignals button:first-child b{color:#6b46e5}
:root:not([data-theme="light"]) body.os.workHomeOpen .whSignals button:first-child b{color:#c9bcff}
body.os.workHomeOpen .whArrivalPrompt{
  display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:12px;border:0;cursor:pointer;
  background:var(--ws-cta);color:#fff;font:550 13.5px var(--f-body,Inter,sans-serif);box-shadow:0 12px 26px -14px rgba(97,89,238,.9);
  transition:transform .2s var(--ws-ease),filter .2s}
body.os.workHomeOpen .whArrivalPrompt:hover{transform:translateY(-1px);filter:brightness(1.06)}
body.os.workHomeOpen .whArrivalPrompt span{font:600 14px/1 var(--osMono,ui-monospace)}

/* the personal grid under the brief */
body.os.workHomeOpen .wsMe{
  position:absolute;left:var(--wh-nav);right:var(--wh-dock);top:calc(118px + 300px);bottom:96px;overflow:auto;pointer-events:auto;
  padding:0 34px 20px;display:flex;justify-content:center;align-items:flex-start}
@media(max-width:1180px){body.os.workHomeOpen .wsMe{right:0}}
body.os.workHomeOpen .wsMe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-content:start;justify-content:stretch}
body.os.workHomeOpen .wsMeCard{
  border-radius:18px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow);padding:14px 12px 10px;
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);min-width:0}
body.os.workHomeOpen .wsMeCard h3{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 10px;
  font:600 13px/1.2 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.01em;color:var(--ws-ink)}
body.os.workHomeOpen .wsMeCard h3 span{font:500 10px var(--osMono,ui-monospace);color:var(--ws-faint)}
body.os.workHomeOpen .wsMeList{display:flex;flex-direction:column;gap:4px}
body.os.workHomeOpen .wsMeTile{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;width:100%;text-align:left;
  padding:7px 8px;border-radius:12px;border:1px solid transparent;background:none;color:inherit;font:inherit;cursor:pointer;
  transition:background .16s,border-color .16s}
body.os.workHomeOpen .wsMeTile:hover{background:rgba(124,92,255,.07);border-color:var(--ws-glass-line)}
body.os.workHomeOpen .wsMeTile .mk{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;overflow:hidden;
  font:650 10.5px/1 var(--osDisp,'Space Grotesk',sans-serif);color:#fff;background:var(--ws-cta);box-shadow:0 8px 16px -8px rgba(97,89,238,.8)}
body.os.workHomeOpen .wsMeTile.app .mk{background:var(--ws-glass-2);border:1px solid var(--ws-glass-line);color:var(--ws-ink);box-shadow:none}
body.os.workHomeOpen .wsMeTile .mk img{width:22px;height:22px;object-fit:contain}
body.os.workHomeOpen .wsMeTile .tx{min-width:0}
body.os.workHomeOpen .wsMeTile b{display:block;font:550 13px/1.2 var(--f-body,Inter,sans-serif);color:var(--ws-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.os.workHomeOpen .wsMeTile small{display:block;margin-top:2px;font-size:11px;color:var(--ws-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1000px){body.os.workHomeOpen .wsMe{grid-template-columns:1fr 1fr}}
@media(max-width:700px){body.os.workHomeOpen .wsMe{grid-template-columns:1fr}}
/* the band lives between the rails, like everything else on the stage */
body.os.workHomeOpen .whPBand .whPBandIn{margin-left:var(--wh-nav);margin-right:var(--wh-dock)}
@media(max-width:1180px){body.os.workHomeOpen .whPBand .whPBandIn{margin-right:0}}
@media(max-width:860px){body.os.workHomeOpen .whPBand .whPBandIn{margin-left:0}}

/* ═══ v7 · the workspace world (owner, 2026-09-02) ═══════════════════════
   The plane under every signed-in surface — and under the boot loader, which
   sits on the same element — is its own painted world: calmer than the door's
   sky, open in the centre so words sit on it. ⛔ No filter tricks over a
   product photo: the light and the dusk are two paintings, not one image
   washed two ways. */
body.workHomeOpen .whPlane::before{
  background:#f4efe6 url(/art/os/bg-clay.webp) center 60%/cover no-repeat;opacity:1;filter:none}
body.workHomeOpen .whPlane::after{
  background:radial-gradient(1100px 620px at 82% -10%,rgba(124,92,255,.16),transparent 62%),
             linear-gradient(180deg,rgba(15,13,38,.22),rgba(15,13,38,.48))}
:root[data-theme="light"] body.workHomeOpen .whPlane::before{
  background:#f4efe6 url(/art/os/bg-clay.webp) center 60%/cover no-repeat;opacity:1;filter:none}
:root[data-theme="light"] body.workHomeOpen .whPlane::after{
  background:radial-gradient(1100px 620px at 82% -10%,rgba(124,92,255,.08),transparent 62%),
             linear-gradient(180deg,rgba(246,247,251,.14),rgba(246,247,251,.38))}
/* the signed-in thread's own plane follows the workspace, the stranger keeps the door's sky */
body.os.inthread.workHomeOpen .thread::before{background:#f4efe6 url(/art/os/bg-clay.webp) center 60%/cover no-repeat}
:root[data-theme="light"] body.os.inthread.workHomeOpen .thread::before{background:#f4efe6 url(/art/os/bg-clay.webp) center 60%/cover no-repeat}
/* the home and panel sheets are glass over the world, never an opaque page */
body.os.workHomeOpen .whHome,body.os.workHomeOpen .whPanel{background:transparent}
body.os.workHomeOpen .whHome .rhead{background:transparent;border-bottom:0}
/* at boot the theme attribute is not on the root yet — resolve the world
   from the system preference, so the loader is a morning or a dusk, never a
   dusk under a grey wash */
html.whBoot:not([data-theme="dark"]) body.workHomeOpen .whPlane::before{background:#f4efe6 url(/art/os/bg-clay.webp) center 60%/cover no-repeat}
html.whBoot:not([data-theme="dark"]) body.workHomeOpen .whPlane::after{background:linear-gradient(180deg,rgba(246,247,251,.10),rgba(246,247,251,.30))}
@media (prefers-color-scheme: dark){
  html.whBoot:not([data-theme="light"]) body.workHomeOpen .whPlane::before{background:#f4efe6 url(/art/os/bg-clay.webp) center 60%/cover no-repeat}
  html.whBoot:not([data-theme="light"]) body.workHomeOpen .whPlane::after{background:linear-gradient(180deg,rgba(15,13,38,.18),rgba(15,13,38,.42))}
}
html.whBoot .bcLoader .bcLoaderSay{color:#5a6478}

/* ═══ v8 · the proposals deck and the dock's one grid (owner, 2026-09-02) ═══ */
/* the deck: "work I would start in your place" — cards as letters, verbs as verbs */
body.os.inthread .darbi{max-width:var(--ws-measure);margin:22px auto 0;display:flex;flex-direction:column;gap:10px}
body.os.inthread .darbi .dl{font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--ws-faint);margin:0 0 2px}
body.os.inthread .dcard{
  position:relative;border-radius:18px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow);
  padding:16px 18px 14px;font-family:var(--f-body,Inter,sans-serif);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  transition:transform .25s var(--ws-ease),border-color .25s,box-shadow .25s}
body.os.inthread .dcard:hover{border-color:hsl(258 60% 62% / .35)}
body.os.inthread .dcard.done{opacity:.72}
body.os.inthread .dcard.no{opacity:.55}
body.os.inthread .dcard.locked{border-style:dashed;cursor:pointer}
body.os.inthread .dcard .dtop{display:flex;align-items:center;gap:8px;margin-bottom:8px}
body.os.inthread .dcard .fld{
  font:500 9.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#6b46e5;
  border:1px solid rgba(124,92,255,.3);background:rgba(124,92,255,.08);border-radius:999px;padding:5px 9px}
:root:not([data-theme="light"]) body.os.inthread .dcard .fld{color:#c9bcff}
body.os.inthread .dcard .imp{font:600 11px var(--osMono,ui-monospace);color:#0f9d63;letter-spacing:.06em}
body.os.inthread .dcard .dots{display:inline-flex;gap:3px;margin-left:auto}
body.os.inthread .dcard .dots i{width:6px;height:6px;border-radius:99px;background:var(--ws-glass-line)}
body.os.inthread .dcard .dots i.on{background:#7c5cff}
body.os.inthread .dcard .ti{font:650 17px/1.3 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.02em;color:var(--ws-ink);margin:0 0 5px}
body.os.inthread .dcard .why{font:400 14px/1.55 var(--f-body,Inter,sans-serif);color:var(--ws-muted);margin:0 0 10px}
body.os.inthread .dcard .basis{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
body.os.inthread .dcard .basis:empty{display:none}
body.os.inthread .dcard .basis b{font:500 11px/1 var(--f-body,Inter,sans-serif);color:var(--ws-muted);
  border:1px solid var(--ws-glass-line);border-radius:999px;padding:5px 9px;background:transparent}
body.os.inthread .dcard .act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.os.inthread .dcard .act button{
  height:34px;padding:0 14px;border-radius:11px;border:1px solid var(--ws-glass-line);background:transparent;color:var(--ws-muted);
  font:550 12.5px var(--f-body,Inter,sans-serif);cursor:pointer;transition:color .2s,border-color .2s,transform .2s var(--ws-ease),filter .2s}
body.os.inthread .dcard .act button:hover{color:var(--ws-ink);border-color:hsl(258 60% 62% / .45);transform:translateY(-1px)}
body.os.inthread .dcard .act button.yes{background:var(--ws-cta);color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px rgba(97,89,238,.9);font-weight:600}
body.os.inthread .dcard .act button.yes:hover{filter:brightness(1.06)}
body.os.inthread .dcard .act button:last-child{border-color:transparent;color:#7c5cff;padding:0 8px}
body.os.inthread .dcard .verdict{font:500 12px var(--f-body,Inter,sans-serif);color:#0f9d63;border-top:1px solid var(--ws-glass-line);padding-top:10px}
body.os.inthread .dcard.no .verdict{color:var(--ws-faint)}
body.os.inthread .dcard .lock{font:500 12px var(--f-body,Inter,sans-serif);color:#b8791f;margin-top:6px}

/* the dock: one grid — every row, card and label sits on the same 12px inset */
body.os.inthread .osDock{padding:12px 14px 96px}
body.os.inthread .osSec{padding:2px 0 6px}
body.os.inthread .osTog{padding:10px 4px 8px}
body.os.inthread .osSecAct{margin-right:4px}
body.os.inthread .osBody{gap:6px}
body.os.inthread .osRow,body.os.inthread .osGoal,body.os.inthread .osPerson,body.os.inthread .wsTool,
body.os.inthread .wsEvRow,body.os.inthread .osEmpty,body.os.inthread .osAdd,body.os.inthread .wsSample,body.os.inthread .osWait{
  width:100%;box-sizing:border-box;margin-left:0;margin-right:0}
body.os.inthread .osRow,body.os.inthread .osGoal,body.os.inthread .osPerson{padding:10px 12px;border-radius:14px}
body.os.inthread .osRow{grid-template-columns:28px minmax(0,1fr) auto}
body.os.inthread .osRow .ic{width:28px;height:28px}
body.os.inthread .osGoal{grid-template-columns:9px minmax(0,1fr) auto}
body.os.inthread .osPerson{grid-template-columns:36px minmax(0,1fr) auto}
body.os.inthread .osPersonAvatar{width:36px;height:36px;border-radius:11px}
body.os.inthread .wsTool{padding:11px 12px 12px}
body.os.inthread .wsEvRow{padding:9px 12px}
body.os.inthread .osEmpty{padding:10px 12px}
body.os.inthread .osAdd{margin:4px 0 0;padding:9px 12px}
body.os.inthread .wsEvSum,body.os.inthread .wsReadNow{margin-left:2px;margin-right:2px}
body.os.inthread .osDock .wsRoom{width:100%}

/* ═══ v9 · decisions leave the chat and live in the rail (owner, 2026-09-02) ═══ */
body.os.inthread .darbi{display:none}
body.os.inthread .osSecAll{font:550 11px var(--f-body,Inter,sans-serif);color:#7c5cff;background:none;border:0;cursor:pointer;padding:6px 4px}
body.os.inthread .wsDec{
  width:100%;box-sizing:border-box;padding:11px 12px 12px;border-radius:14px;border:1px solid var(--ws-glass-line);
  background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow)}
body.os.inthread .wsDecTop{display:flex;align-items:center;gap:8px;margin-bottom:6px}
body.os.inthread .wsDec .fld{font:500 9px/1 var(--f-body,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#6b46e5;
  border:1px solid rgba(124,92,255,.3);background:rgba(124,92,255,.08);border-radius:999px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
:root:not([data-theme="light"]) body.os.inthread .wsDec .fld{color:#c9bcff}
body.os.inthread .wsDec .imp{font:600 10.5px var(--osMono,ui-monospace);color:#0f9d63;margin-left:auto}
body.os.inthread .wsDec .ti{font:600 13px/1.3 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.01em;color:var(--ws-ink);margin:0 0 3px}
body.os.inthread .wsDec .why{font:400 11.5px/1.45 var(--f-body,Inter,sans-serif);color:var(--ws-muted);margin:0 0 9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.os.inthread .wsDec .act{display:flex;flex-wrap:wrap;gap:5px}
body.os.inthread .wsDec .act button{height:28px;padding:0 10px;border-radius:9px;border:1px solid var(--ws-glass-line);background:transparent;
  color:var(--ws-muted);font:550 11.5px var(--f-body,Inter,sans-serif);cursor:pointer;transition:color .2s,border-color .2s,filter .2s}
body.os.inthread .wsDec .act button:hover{color:var(--ws-ink);border-color:hsl(258 60% 62% / .45)}
body.os.inthread .wsDec .act button.yes{background:var(--ws-cta);color:#fff;border-color:transparent;font-weight:600}
body.os.inthread .wsDec .act button.yes:hover{filter:brightness(1.06)}
body.os.inthread .wsDec .act button:last-child{border-color:transparent;color:#7c5cff;padding:0 6px}
body.os.inthread .osSec h4{display:flex;align-items:center;gap:6px}
body.os.inthread .osSec h4 .osTog{flex:1 1 auto;min-width:0}
body.os.inthread .osSecAll{white-space:nowrap;flex:none}

/* ═══ v10 · the Decisions layer (the shell's Today view) ══════════════════ */
body.os.workHomeOpen .whDay .wrap.day{max-width:980px}
body.os.workHomeOpen .whDay h1{font:650 clamp(26px,2.4vw,34px)/1.1 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.03em;color:var(--ws-ink);margin:8px 0 18px}
body.os.workHomeOpen .whDay h1 small{display:block;margin-top:6px;font:400 14px/1.5 var(--f-body,Inter,sans-serif);color:var(--ws-muted);letter-spacing:0}
body.os.workHomeOpen .whDay .ask{
  position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow);
  padding:20px 22px 16px;margin:0 0 14px;border-left:1px solid var(--ws-glass-line)}
body.os.workHomeOpen .whDay .ask::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--ws-accent)}
body.os.workHomeOpen .whDay .ask .q{font:650 17px/1.3 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.02em;color:var(--ws-ink);margin-bottom:4px}
body.os.workHomeOpen .whDay .ask .w{font:400 13.5px/1.5 var(--f-body,Inter,sans-serif);color:var(--ws-muted);margin-bottom:12px}
body.os.workHomeOpen .whDay .ask .opts{display:flex;gap:8px;flex-wrap:wrap}
body.os.workHomeOpen .whDay .ask .opts button{height:34px;padding:0 14px;border-radius:11px;border:1px solid var(--ws-glass-line);background:transparent;color:var(--ws-muted);font:550 12.5px var(--f-body,Inter,sans-serif);cursor:pointer}
body.os.workHomeOpen .whDay .ask .opts button.pri{background:var(--ws-cta);color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px rgba(97,89,238,.9)}
body.os.workHomeOpen .whDay .ask .exp{margin-top:10px;font:400 10.5px var(--osMono,ui-monospace);color:var(--ws-faint)}
body.os.workHomeOpen .whDay .blk .ln{grid-template-columns:20px minmax(0,1fr) auto;padding:9px 10px}
body.os.workHomeOpen .whDay .blk .ln .t{color:#7c5cff;font:600 12px var(--osMono,ui-monospace)}
body.os.workHomeOpen .whDay .blk .ln .r{font:400 10.5px var(--osMono,ui-monospace);color:var(--ws-faint)}
body.os.workHomeOpen .whDay .blk .ln .s{font-size:11.5px}
body.os.workHomeOpen .wsDecGrid{margin:0 0 16px}
body.os.workHomeOpen .wsDecGrid h3{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 10px;
  font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--ws-faint)}
body.os.workHomeOpen .wsDecGrid h3 span{font:500 10px var(--osMono,ui-monospace);letter-spacing:0}
body.os.workHomeOpen .wsDecCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.os.workHomeOpen .wsDecCards .wsDec{padding:14px 16px 14px;border-radius:18px}
body.os.workHomeOpen .wsDecCards .wsDec .ti{font-size:15px}
body.os.workHomeOpen .wsDecCards .wsDec .why{-webkit-line-clamp:3;font-size:12.5px}
body.os.workHomeOpen .wsDecCards .basis{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
body.os.workHomeOpen .wsDecCards .basis b{font:500 10.5px/1 var(--f-body,Inter,sans-serif);color:var(--ws-muted);border:1px solid var(--ws-glass-line);border-radius:999px;padding:4px 8px}
body.os.workHomeOpen .wsDecCards .act button{height:32px;font-size:12px}
@media(max-width:900px){body.os.workHomeOpen .wsDecCards{grid-template-columns:1fr}}

/* ═══ v11 · an app opens between the rails, never over them (owner, 2026-09-02) ═══ */
/* ⚡ Says the same thing through the shared tokens, so the Work OS home and the
   conversation cannot drift into two different ideas of the app column. */
/* ⚠ 'inthread' wins: both classes can sit on the body at once (the home stays
   open behind a conversation), and in a thread the workspace nav is not the
   rail beside the pane — the conversation's own rails are. */
body.os.workHomeOpen:not(.inthread){--app-left:var(--wh-nav,272px);--app-right:var(--wh-dock,324px)}
body.os.workHomeOpen .osApp{background:transparent}
@media(max-width:1180px){body.os.workHomeOpen:not(.inthread){--app-right:0px}}
@media(max-width:860px){body.os.workHomeOpen:not(.inthread){--app-left:0px}}
body.os.inthread .osApp{-webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25);background:var(--ws-glass)}
/* ⛔ The 'whAppNav{display:flex!important}' that stood here is gone with the rule
   it fought: os-app.css used to HIDE the workspace rail whenever an app opened,
   and this put it back. Neither exists now — the rail stays because nothing
   removes it. */
/* the shell's dock variable matches the dock we draw — nothing else may cover it */
body.os.inthread{--wh-dock:262px}
body.os.inthread .osDock{z-index:16}

/* ═══ v12 · the Mail app in the same language (owner, 2026-09-02) ═══════ */
body.os.inthread .osApp .rhead{background:transparent;border-bottom:0;padding:14px 34px 6px}
body.os.inthread .osApp .rhIn{max-width:none}
body.os.inthread .osApp .rhTop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.os.inthread .osApp .rhTop .crumb{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);
  color:var(--ws-muted);font:550 12px var(--f-body,Inter,sans-serif);cursor:pointer}
body.os.inthread .osApp .rhTop .crumb:hover{color:var(--ws-ink);border-color:hsl(258 60% 62% / .45)}
body.os.inthread .osApp .rhTop .sep{display:none}
/* ⛔ the badge is hidden in os-app.css (owner, 2026-09-08) — this override
   styled it and would have un-hidden nothing, but leaving a live rule for a
   dead element is how it comes back by accident. */
body.os.inthread .osApp .rhTop .kind{display:none}
body.os.inthread .osApp .mlPickBtn{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);
  color:var(--ws-ink);font:550 12px var(--f-body,Inter,sans-serif)}
body.os.inthread .osApp .rhTop .as{margin-left:auto;font:400 10.5px var(--osMono,ui-monospace);color:var(--ws-faint)}
body.os.inthread .osApp .rhId{display:flex;align-items:center;gap:12px;margin-top:10px}
body.os.inthread .osApp .rhIcon{width:38px;height:38px;object-fit:contain}
body.os.inthread .osApp .rhName{font:650 22px/1.15 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.025em;color:var(--ws-ink);display:block}
body.os.inthread .osApp .rhSub{display:block;margin-top:3px;font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--ws-faint)}
/* ⛔ 'max-width:none' HERE IS WHY AN APP FILLED ITS WHOLE COLUMN. Owner,
   2026-09-02: "apps always have to be in the center, not in the full screen or
   something." The v12 pass widened the card to the column's edge; the column
   itself is now correct (it sits between the rails), so the content inside it
   goes back to a measured, centred width like every other reading surface. */
/* ⛔ A LITERAL 34px HERE OVERRODE THE GUTTER TOKEN FOR EVERY APP, AT EVERY WIDTH
   (measured 2026-09-08, Mail open on a 390px phone: the card was 282px wide —
   108px of a 390px screen was padding, while os-app.css thought the phone
   gutter was 16). body.os.inthread .osApp outranks .osApp, so the token's
   own phone override never reached the page. The gutter is the token. */
body.os.inthread .osApp .wrap.wide{max-width:1060px;margin:0 auto;padding:8px var(--app-gutter) 24px}
body.os.inthread .osApp .osAppCard{border-radius:20px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow);overflow:hidden}
body.os.inthread .osApp .osAppBar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--ws-glass-line);background:transparent}
body.os.inthread .osApp .osAppBar .tabs{display:flex;gap:6px;flex-wrap:wrap}
body.os.inthread .osApp .osAppBar .tabs button{height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--ws-glass-line);background:transparent;
  color:var(--ws-muted);font:550 12.5px var(--f-body,Inter,sans-serif);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
body.os.inthread .osApp .osAppBar .tabs button.on{background:var(--ws-cta);color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px rgba(97,89,238,.9)}
body.os.inthread .osApp .osAppBar .tabN{font:600 10px var(--osMono,ui-monospace);border-radius:999px;padding:2px 6px;background:rgba(124,92,255,.14);color:#6b46e5}
body.os.inthread .osApp .osAppBar button.on .tabN{background:rgba(255,255,255,.22);color:#fff}
body.os.inthread .osApp .mlQ{margin-left:auto;height:34px;min-width:240px;padding:0 14px;border-radius:999px;border:1px solid var(--ws-glass-line);
  background:var(--ws-glass-2);color:var(--ws-ink);font:400 13px var(--f-body,Inter,sans-serif)}
body.os.inthread .osApp .mlQ:focus{outline:none;border-color:hsl(258 60% 62% / .55);box-shadow:0 0 0 4px rgba(124,92,255,.14)}
/* the list: one line per letter */
body.os.inthread .osApp .mlHead{display:grid;grid-template-columns:200px minmax(0,1fr) 64px;gap:14px;padding:8px 16px;
  font:500 9.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--ws-faint)}
body.os.inthread .osApp .mlHead span:last-child{text-align:right}
body.os.inthread .osApp .mlRow{display:grid;grid-template-columns:200px minmax(0,1fr) 64px;gap:14px;align-items:center;width:100%;
  min-height:46px;padding:9px 16px;border:0;border-top:1px solid var(--ws-glass-line);background:transparent;text-align:left;cursor:pointer;
  font:400 13px var(--f-body,Inter,sans-serif);color:var(--ws-muted);transition:background .14s}
body.os.inthread .osApp .mlRow:hover{background:rgba(124,92,255,.06)}
body.os.inthread .osApp .mlRow.on{background:rgba(124,92,255,.10)}
body.os.inthread .osApp .mlFrom{font-weight:550;color:var(--ws-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;padding-left:14px}
body.os.inthread .osApp .mlFrom::before{content:'';position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:99px;background:transparent}
body.os.inthread .osApp .mlRow.unseen .mlFrom::before{background:#7c5cff}
body.os.inthread .osApp .mlRow.unseen .mlSub{font-weight:600;color:var(--ws-ink)}
body.os.inthread .osApp .mlMid{min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden}
body.os.inthread .osApp .mlRow{position:relative}
body.os.inthread .osApp .mlSub{font-size:13px;color:var(--ws-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
body.os.inthread .osApp .mlSubline{display:inline-flex;gap:6px;flex:none}
body.os.inthread .osApp .mlSlot{font:400 10px var(--osMono,ui-monospace);color:var(--ws-faint);border:1px solid var(--ws-glass-line);border-radius:999px;padding:2px 7px;white-space:nowrap}
body.os.inthread .osApp .mlWhen{font:400 11px var(--osMono,ui-monospace);color:var(--ws-faint);text-align:right;white-space:nowrap}
body.os.inthread .osApp .mlReadPane{border-left:1px solid var(--ws-glass-line)}
@media(max-width:1100px){body.os.inthread .osApp .mlHead,body.os.inthread .osApp .mlRow{grid-template-columns:22px 140px minmax(0,1fr) 56px}}

/* ═══ v13 · Mail: select, act, live, threads (owner, 2026-09-02) ══════════ */
body.os.inthread .osApp .mlHead{grid-template-columns:22px 200px minmax(0,1fr) 64px}
body.os.inthread .osApp .mlHead span:first-child{grid-column:2}
body.os.inthread .osApp .mlRow{grid-template-columns:22px 200px minmax(0,1fr) 64px}
body.os.inthread .osApp .mlRow.sub{padding-left:32px;background:rgba(124,92,255,.03)}
body.os.inthread .osApp .mlRow.sub .mlFrom::before{display:none}
body.os.inthread .osApp .mlRow.sel{background:rgba(124,92,255,.10)}
body.os.inthread .osApp .mlCk{width:16px;height:16px;padding:0;border-radius:5px;border:1.5px solid var(--ws-glass-line);background:transparent;display:inline-block;position:relative;cursor:pointer;transition:border-color .15s,background .15s}
body.os.inthread .osApp .mlRow:hover .mlCk{border-color:hsl(258 60% 62% / .6)}
body.os.inthread .osApp .mlCk.on{background:var(--ws-cta);border-color:transparent}
body.os.inthread .osApp .mlCk.on::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
body.os.inthread .osApp .mlFrom{padding-left:12px}
/* ⛔ A PAPERCLIP, NOT A CHIP (owner, 2026-09-06: "ugly, stupid green
   background, and duplicates in text"). A 16px cyan plate behind a 10px glyph
   is a badge competing with the subject for attention, and the row ALSO said
   "ar pielikumu" in words — the same fact twice, one of them shouting. The
   mark is the glyph alone, in the muted ink, with the word in the title. */
body.os.inthread .osApp .mlAttMark{margin-right:6px;font:400 12px/1 var(--f-body,Inter,sans-serif);
  color:var(--ws-faint);vertical-align:-1px}
body.os.inthread .osApp .mlThreadN{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:8px;padding:0 5px;border-radius:999px;background:rgba(124,92,255,.14);color:#6b46e5;font:600 10px/1 var(--osMono,ui-monospace);vertical-align:-3px;cursor:pointer}
:root:not([data-theme="light"]) body.os.inthread .osApp .mlThreadN{color:#c9bcff}
body.os.inthread .osApp .mlSlot{border-color:transparent;background:rgba(124,92,255,.08);color:#6b46e5}
:root:not([data-theme="light"]) body.os.inthread .osApp .mlSlot{color:#c9bcff}
body.os.inthread .osApp .mlBulk{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--ws-glass-line);
  background:linear-gradient(90deg,rgba(124,92,255,.10),rgba(34,211,238,.06))}
body.os.inthread .osApp .mlBulk .n{font:550 12px var(--f-body,Inter,sans-serif);color:var(--ws-ink);margin-right:6px}
body.os.inthread .osApp .mlBulk button{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-ink);font:550 12px var(--f-body,Inter,sans-serif);cursor:pointer}
body.os.inthread .osApp .mlBulk button:hover{border-color:hsl(258 60% 62% / .45)}
body.os.inthread .osApp .mlBulk button.danger{color:#c2410c;border-color:rgba(194,65,12,.3)}
body.os.inthread .osApp .mlBulk button.quiet{background:transparent;border-color:transparent;color:var(--ws-muted)}
body.os.inthread .osApp .mlBulk .note{margin-left:auto;font:400 11px var(--osMono,ui-monospace);color:var(--ws-faint)}
body.os.inthread .osApp .mlRefresh{width:30px;height:30px;border-radius:999px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);color:var(--ws-muted);font:500 15px/1 var(--osMono,ui-monospace);cursor:pointer;transition:color .2s,border-color .2s}
/* ⛔ the accent is a TOKEN. #7c5cff IS var(--violet); spelling it means the
   day the violet moves, this control keeps the old one and nobody sees why. */
body.os.inthread .osApp .mlRefresh:hover{color:var(--violet);border-color:var(--fill-2)}
body.os.inthread .osApp .mlRefresh.busy{animation:wsSpin .8s linear infinite;color:var(--violet)}
@keyframes wsSpin{to{transform:rotate(360deg)}}
/* ⛔ A PILL THAT IS ALWAYS GREEN CARRIES NO INFORMATION (owner, 2026-09-08:
   "this ugly color and live should be removed"). It read DZĪVS in green
   whenever the stream was up, which is nearly always — so it cost a permanent
   slot in the chrome to say nothing, and it said it in three hard-coded hexes
   (#5ee0a0 / rgba(94,224,160,.2) / #0f9d63) that are not design tokens.
   ⚡ Liveness is still observable, and now it is only VISIBLE WHEN IT MATTERS:
      healthy is silent, and a stream that has dropped says so in the one state
      token that means "a person should look" (--amber). ⛔ Never re-add a green
      steady state here — "working" is the default and does not need announcing. */
body.os.inthread .osApp .mlLive{display:none}
body.os.inthread .osApp .mlLive.off{
  display:inline-flex;align-items:center;gap:6px;
  font:500 10px/1 var(--f-body,Inter,sans-serif);letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber,#c2410c)}
body.os.inthread .osApp .mlLive.off i{
  width:7px;height:7px;border-radius:99px;background:var(--amber,#c2410c)}
/* the header line and the action bar share one height, so selecting never shifts a row */
body.os.inthread .osApp .mlHead{height:38px;box-sizing:border-box;align-items:center;padding-top:0;padding-bottom:0}
body.os.inthread .osApp .mlBulk{height:38px;box-sizing:border-box;padding-top:0;padding-bottom:0;flex-wrap:nowrap;overflow:hidden}
body.os.inthread .osApp .mlBulk button{height:26px;padding:0 10px;font-size:11.5px}
body.os.inthread .osApp .mlRow.sel{cursor:default}

/* ⛔ THE READING STRIP IS ONE LINE PER LETTER, AND THE SHELL MUST SAY SO TOO
   (owner, 2026-09-06: "opening the details just ruins layout of the emails
   list"). This sheet sets .mlRow's columns literally, so the token the base
   sheet redefines never reached it: with the checkbox hidden and .mlMid
   display:none, auto-placement dropped the sender into the 22px checkbox
   track and the date into the 200px sender track. Stated here as well, in
   the shell's own scope. */
body.os.inthread .osApp .osAppBody.mlBody2[data-reading="true"] .mlRow{
  grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:9px 12px;align-items:baseline}
body.os.inthread .osApp .osAppBody.mlBody2[data-reading="true"] .mlRow .mlFrom{
  grid-column:1;grid-row:1;padding-left:0}
body.os.inthread .osApp .osAppBody.mlBody2[data-reading="true"] .mlRow .mlFrom::before{display:none}
body.os.inthread .osApp .osAppBody.mlBody2[data-reading="true"] .mlRow .mlWhen{
  grid-column:2;grid-row:1;font-size:10.5px;opacity:.75}

/* ═══ v14 · the personal space, second pass (owner, 2026-09-02) ═══════════ */
/* the composer's two verbs are the landing's own pair: one pill, quiet until
   there is something to send, and only the half with consequences fills */
body.os.inthread .composer .sendPair{
  height:54px;border-radius:999px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);
  box-shadow:none;overflow:hidden;transition:border-color .2s,box-shadow .2s}
body.os.inthread .composer .sendPair>button{
  height:100%;padding:0 16px;border-radius:0;background:none;border:0;color:var(--ws-faint);
  font:600 12.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:.01em;transition:background .18s,color .18s}
body.os.inthread .composer .sendPair>button:hover:not(:disabled){color:var(--ws-ink);background:rgba(124,92,255,.07)}
body.os.inthread .composer .sendPair>#send:not(:disabled){background:none;color:var(--ws-ink);box-shadow:none}
body.os.inthread .composer .sendPair>#doit{border-left:1px solid var(--ws-glass-line);color:var(--ws-faint)}
body.os.inthread .composer .sendPair:has(#send:not(:disabled)){border-color:transparent;box-shadow:0 8px 24px -12px rgba(124,92,255,.6)}
body.os.inthread .composer .sendPair:has(#send:not(:disabled))>#doit,
body.os.inthread .composer .sendPair>#doit:hover:not(:disabled){color:#fff;background:var(--ws-accent);border-left-color:transparent}
/* the brief spans the same width as the three blocks under it */
body.os.workHomeOpen .whArrivalTurn{width:100%}
body.os.workHomeOpen .wsMe{padding-left:34px;padding-right:34px}
/* find more apps: a small + on the block's count */
body.os.workHomeOpen .wsMeAdd{margin-left:8px;width:20px;height:20px;border-radius:7px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);
  color:#7c5cff;font:600 13px/1 var(--osMono,ui-monospace);cursor:pointer;vertical-align:middle}
body.os.workHomeOpen .wsMeAdd:hover{border-color:hsl(258 60% 62% / .45)}
/* my person: the open section is a glass card, the form its own */
body.os.workHomeOpen .whPBOpen{margin-top:12px;padding:16px;border-radius:18px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow)}
body.os.workHomeOpen .whPBOpen.whPBHalf{max-width:none}
body.os.workHomeOpen .whPfForm{display:flex;flex-direction:column;gap:10px}
body.os.workHomeOpen .whPfField{padding:10px 12px;border-radius:12px;border:1px solid var(--ws-glass-line);background:transparent;color:var(--ws-ink);font:400 13.5px/1.5 var(--f-body,Inter,sans-serif);width:100%;box-sizing:border-box}
body.os.workHomeOpen .whPfField:focus{outline:none;border-color:hsl(258 60% 62% / .55);box-shadow:0 0 0 4px rgba(124,92,255,.12)}
body.os.workHomeOpen .whPfNote,body.os.workHomeOpen .whPfWhy{font:400 12px/1.5 var(--f-body,Inter,sans-serif);color:var(--ws-muted)}
body.os.workHomeOpen .whPfActs{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
body.os.workHomeOpen .whBtn{height:34px;padding:0 14px;border-radius:11px;border:1px solid var(--ws-glass-line);background:transparent;color:var(--ws-muted);font:550 12.5px var(--f-body,Inter,sans-serif);cursor:pointer}
body.os.workHomeOpen .whBtn.primary{background:var(--ws-cta);color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px rgba(97,89,238,.9)}
body.os.workHomeOpen .whPfOk{color:#0f9d63;font:500 12px var(--f-body,Inter,sans-serif)}
body.os.workHomeOpen .whPfBad{color:#c2410c;font:500 12px var(--f-body,Inter,sans-serif)}
/* ⛔ A SKELETON, NOT AN EMPTY FORM. The persona read is a round trip, and the
   editor rendered from an empty object while it was in flight — which is the
   blank onboarding card, over a profile the person had already written. This is
   what stands there instead until the read answers (task 8174cf5c).
   ⚠ No backtick anywhere in this file: test-work-screen asserts it, because the
     block is pasted into a template literal elsewhere. */
body.os.workHomeOpen .whPfWait{padding:22px 0;font:400 13px/1.6 var(--f-body,Inter,sans-serif);color:var(--ws-muted)}
body.os.workHomeOpen .whPersona .wrap{max-width:720px}
/* an open band section (apps / places / my person) pushes the brief and the grid down */
body.os.workHomeOpen:has(.whPBOpen) .whArrival{top:calc(var(--wh-band,118px) + 14px)}

/* ═══ v15 · the composer is ONE box, like the door (owner, 2026-09-02) ═══ */
body.os.inthread .composer{display:flex;justify-content:center;column-gap:0}
body.os.inthread .composer .wsComposerBox{
  display:flex;align-items:center;gap:8px;width:100%;max-width:calc(var(--ws-measure) + 200px);
  padding:8px 8px 8px 16px;border-radius:20px;box-sizing:border-box;
  background:var(--ws-glass-2);border:1px solid var(--ws-glass-line);box-shadow:var(--ws-glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  transition:border-color .2s,box-shadow .2s}
body.os.inthread .composer .wsComposerBox:focus-within{border-color:hsl(258 60% 62% / .55);box-shadow:0 0 0 4px rgba(124,92,255,.14),var(--ws-glass-shadow)}
body.os.inthread .composer .wsComposerBox .cwrap{
  flex:1 1 auto;min-width:0;max-width:none;margin:0;padding:6px 4px 6px 0;min-height:0;
  background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.os.inthread .composer .wsComposerBox .cwrap:focus-within{border-color:transparent;box-shadow:none}
body.os.inthread .composer .wsComposerBox .sendPair{
  flex:none;height:40px;margin:0;border-radius:999px;border:1px solid var(--ws-glass-line);
  background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.os.inthread .composer .wsComposerBox .sendPair>button{
  height:100%;padding:0 14px;font:600 12.5px/1 var(--f-body,Inter,sans-serif);color:var(--ws-faint);background:none}
body.os.inthread .composer .wsComposerBox .sendPair>button svg{width:14px;height:14px}
body.os.inthread .composer .wsComposerBox .sendPair>#send:not(:disabled){color:var(--ws-ink);background:none;box-shadow:none}
body.os.inthread .composer .wsComposerBox .sendPair>#doit{border-left:1px solid var(--ws-glass-line);color:var(--ws-faint)}
body.os.inthread .composer .wsComposerBox .sendPair>button:hover:not(:disabled){color:var(--ws-ink);background:rgba(124,92,255,.07)}
body.os.inthread .composer .wsComposerBox .sendPair:has(#send:not(:disabled)){border-color:transparent;box-shadow:0 8px 24px -12px rgba(124,92,255,.6)}
body.os.inthread .composer .wsComposerBox .sendPair:has(#send:not(:disabled))>#doit,
body.os.inthread .composer .wsComposerBox .sendPair>#doit:hover:not(:disabled){color:#fff;background:var(--ws-accent);border-left-color:transparent}
body.os.inthread .composer .wsComposerBox #mic,body.os.inthread .composer .wsComposerBox #clip{border-color:transparent}
@media (max-width:760px){
  body.os.inthread .composer .wsComposerBox{flex-wrap:wrap;padding:8px}
  body.os.inthread .composer .wsComposerBox .sendPair{margin-left:auto;height:36px}
  body.os.inthread .composer .wsComposerBox .sendPair>button em{display:none}
}

/* ═══ THE LETTERS, INSIDE THE ANSWER (task 14cd6b4c) ═════════════════════════
   The mail rows are the answer to "beidamie epasti", not a widget standing
   next to it. mail-ui.js paints them into a slot inside the bubble now; this
   is the work screen's own language for them — one glass card, ONE LINE per
   letter, an unread dot instead of a pill, and the inbox as a door.
   ⛔ Every colour is a --ws-* token or has a light-theme twin below; the
      screen must read in both themes without a second stylesheet.
   ⛔ No backtick in this file — it is pasted into a template literal. */
body.os.inthread .m-orc .ml{
  background:var(--ws-glass);border:1px solid var(--ws-glass-line);
  border-radius:14px;box-shadow:var(--ws-glass-shadow);
  margin:14px 0 6px;padding:4px 16px 12px;color:var(--ws-ink);
  font-size:14px;line-height:1.5;max-width:100%}
body.os.inthread .m-orc .ml .mlH{color:var(--ws-ink);font-size:13.5px;padding-top:10px}
body.os.inthread .m-orc .ml .mlWhy{color:var(--ws-faint);font-size:12px;margin:10px 0 0}

/* one line per letter: a dot, the sender, the subject, the door to the text */
body.os.inthread .m-orc .ml .mlRow{
  grid-template-columns:9px minmax(0,1fr) auto;gap:0 11px;align-items:center;
  padding:10px 0;border-top:1px solid var(--ws-glass-line)}
body.os.inthread .m-orc .ml .mlRow:first-of-type{border-top:0}
body.os.inthread .m-orc .ml .mlAv{display:none}
body.os.inthread .m-orc .ml .mlRow::before{
  content:"";grid-column:1;grid-row:1;width:7px;height:7px;border-radius:50%;
  background:transparent;border:1px solid var(--ws-glass-line)}
/* ⚡ unread is a DOT. The pills said "jauns"/"neatbildēts" twice per row and
   pushed the subject off the line the rows exist to show. */
body.os.inthread .m-orc .ml .mlRow:has(.mlPill.hot)::before{
  background:#7c5cff;border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.18)}
body.os.inthread .m-orc .ml .mlPill{display:none}
body.os.inthread .m-orc .ml .mlRow .nm{
  grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;min-width:0}
body.os.inthread .m-orc .ml .mlRow .who{
  flex:0 0 auto;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:var(--ws-ink)}
body.os.inthread .m-orc .ml .mlRow .who .sub{color:var(--ws-faint);font-weight:500}
body.os.inthread .m-orc .ml .mlRow .subj{
  flex:1 1 0;min-width:0;margin-top:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:13.5px;color:var(--ws-muted)}
body.os.inthread .m-orc .ml .mlRow .snip{display:none}
body.os.inthread .m-orc .ml .mlRow .letter{flex:0 0 100%;order:9}
body.os.inthread .m-orc .ml .mlBody{
  background:rgba(124,92,255,.07);border:1px solid var(--ws-glass-line);
  color:var(--ws-ink);font-size:13.5px}

/* the controls, in the screen's own pill language */
body.os.inthread .m-orc .ml .mlB{
  background:transparent;border:1px solid var(--ws-glass-line);color:var(--ws-muted);
  padding:5px 13px;font-size:12.5px}
body.os.inthread .m-orc .ml .mlB:hover{color:var(--ws-ink);border-color:hsl(258 60% 62% / .5)}
body.os.inthread .m-orc .ml .mlB.pri{background:var(--ws-cta);border-color:transparent;color:#fff}

/* the door: the inbox, said once */
body.os.inthread .m-orc .ml .mlApp{margin-top:13px}
body.os.inthread .m-orc .ml .mlApp a{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  border:1px solid hsl(258 60% 62% / .4);background:rgba(124,92,255,.12);
  color:#b3a2ff;font-weight:550;font-size:12.5px;text-decoration:none}
body.os.inthread .m-orc .ml .mlApp a:hover{
  background:rgba(124,92,255,.2);color:#cdc2ff;text-decoration:none}

:root[data-theme="light"] body.os.inthread .m-orc .ml .mlBody{background:rgba(97,89,238,.06)}
:root[data-theme="light"] body.os.inthread .m-orc .ml .mlApp a{
  border-color:hsl(250 62% 55% / .35);background:rgba(97,89,238,.09);color:#4b40c4}
:root[data-theme="light"] body.os.inthread .m-orc .ml .mlApp a:hover{
  background:rgba(97,89,238,.16);color:#3a30a8}
:root[data-theme="light"] body.os.inthread .m-orc .ml .mlRow:has(.mlPill.hot)::before{
  background:#6159ee;border-color:#6159ee;box-shadow:0 0 0 3px rgba(97,89,238,.16)}

/* ⛔ A ROW'S SENDER IS NOT THE ANSWER'S BYLINE. the .m-orc .who rule is the partner's
   own label — 10px, uppercase, .2em tracking, an accent rule under it — and
   every mail row wears the same class, so senders arrived as SHOUTED headings
   with a gradient underline each. Reset it here rather than renaming the class
   in mail-ui.js: the mail app uses the same row builder outside this screen. */
body.os.inthread .m-orc .ml .mlRow .who{
  display:flex;align-items:baseline;gap:5px;margin:0;padding:0;border-bottom:0;
  font:600 13.5px/1.45 var(--f-body,Inter,sans-serif);letter-spacing:0;
  text-transform:none;color:var(--ws-ink)}
body.os.inthread .m-orc .ml .mlRow .who::after{display:none;content:none}
/* ═══════════════════════════════════════════════════════════════════════════
   THE SCOPE CHIP — "this is not about this room" (S1.3, task 8b87430f)

   Sits under the person's own sentence, aligned to the .m-you indent so it
   reads as part of that turn rather than as a system banner.
   ⛔ Every colour is a token (--faint / --line / --line2 / --muted / --ink),
      so it is correct in BOTH themes without a second rule: the light theme
      redefines those tokens at :root and this block never sees a hex.
   ⛔ Quiet on purpose. A mark that shouts reads as an error, and it is not one
      — the answer is being written while it paints.
   ═══════════════════════════════════════════════════════════════════════════ */
.scope-chip{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  margin:4px 0 10px;padding:0 0 0 16px;
  font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--faint)}
.scope-mark{padding:1px 7px;border-radius:999px;border:1px solid var(--line2);
  color:var(--muted);white-space:nowrap}
.scope-chip[data-mark="other_company"] .scope-mark{
  border-color:color-mix(in srgb,var(--line2) 60%,var(--ink));color:var(--ink)}
.scope-ent{color:var(--ink)}
/* The why is the half a person actually reads twice — it may wrap and it must
   never push the offers off the row. */
.scope-why{flex:1 1 12ch;min-width:0;color:var(--faint)}
.scope-offer{padding:2px 10px;border-radius:999px;border:1px solid var(--line2);
  background:transparent;color:var(--muted);
  font-family:var(--mono);font-size:11px;line-height:1.7;cursor:pointer;
  transition:border-color .15s ease,color .15s ease}
.scope-offer:hover{border-color:color-mix(in srgb,var(--line2) 40%,var(--ink));color:var(--ink)}
.scope-offer:focus-visible{outline:2px solid var(--line2);outline-offset:2px}
/* One column on a phone: the offers become full-width rows rather than three
   pills squeezed to two characters each. */
@media (max-width:520px){
  .scope-chip{gap:5px}
  .scope-why{flex:1 1 100%}
  .scope-offer{flex:1 1 auto;text-align:center}
}

/* ═══ the goal widgets, inside the answer (goal triage, 2026-09-03) ════════
   The owner: goal work in the chat "should visualise super nicely". These are
   members of the work screen's family, not a second design: the same glass
   recipe, the same accent, the same ink. What separates them is STRUCTURE.

   ⛔ ONE BOLD THING PER TURN, and it is the proposal card. Lists are rows on
      hairlines rather than a card each: six outcomes drawn as six equal cards
      is six equal shouts, and the room's whole method is one change at a time.
   ⛔ Colour never carries a state on its own — every state chip has its word.
   ⛔ No backtick in this file (the harness copier pastes it into a template
      literal), and no fixed light-only colour: both themes, always. */
.gw{
  --gw-ink:var(--ws-ink,#0c1220); --gw-muted:var(--ws-muted,#5a6478); --gw-faint:var(--ws-faint,#8b94a6);
  --gw-line:var(--ws-glass-line,rgba(75,72,120,.14));
  --gw-surf:var(--ws-glass-2,rgba(255,255,255,.92));
  --gw-good:#0f9d63; --gw-warn:#b8791f; --gw-bad:#c8394f; --gw-accent:#6b46e5;
  --gw-hue:258;
  display:block;margin:16px 0 0;color:var(--gw-ink);
  font:400 14px/1.5 var(--f-body,Inter,system-ui,sans-serif);letter-spacing:0}
:root:not([data-theme="light"]) .gw{
  --gw-good:#5ee0a0; --gw-warn:#f0a83a; --gw-bad:#ff8098; --gw-accent:#b3a2ff}
.gw + .gw{margin-top:12px}
.gw button{font:inherit;color:inherit;cursor:pointer}
.gwTtl{margin:0 0 6px;font:500 10px/1 var(--f-body,Inter,sans-serif);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gw-faint)}
.gwSec{margin:14px 0 5px;font:500 10px/1 var(--f-body,Inter,sans-serif);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gw-faint)}
.gwName{display:block;font:600 14px/1.3 var(--osDisp,'Space Grotesk',Inter,sans-serif);
  letter-spacing:-.012em;color:var(--gw-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gwName.isBig{font-size:17px;white-space:normal}
.gwLede{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--gw-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gwWhy{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--gw-muted)}
.gwMeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gwN{font:400 11px var(--osMono,ui-monospace,Menlo,monospace);color:var(--gw-faint);white-space:nowrap}
.gwWait{font:500 11px var(--f-body,Inter,sans-serif);color:var(--gw-warn);white-space:nowrap}
.gwChip{font:500 11px/1 var(--f-body,Inter,sans-serif);color:var(--gw-muted);
  border:1px solid var(--gw-line);border-radius:999px;padding:4px 9px;white-space:nowrap;
  max-width:290px;overflow:hidden;text-overflow:ellipsis}
.gwKick{display:block;font:500 9.5px/1 var(--f-body,Inter,sans-serif);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gw-faint);margin-bottom:3px}

/* the state word — a dot for the eye, a word for the reader */
.gwState{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font:500 11px/1 var(--f-body,Inter,sans-serif);color:var(--gw-muted)}
.gwState::before{content:'';width:6px;height:6px;border-radius:99px;background:var(--gw-faint)}
.gwState[data-state="active"]::before,.gwState[data-state="on_track"]::before,
.gwState[data-state="reached"]::before{background:var(--gw-good)}
.gwState[data-state="at_risk"]::before,.gwState[data-state="waiting_for_you"]::before{background:var(--gw-warn)}
.gwState[data-state="off_track"]::before{background:var(--gw-bad)}
.gwState[data-state="reached"],.gwState[data-state="on_track"]{color:var(--gw-good)}
.gwState[data-state="at_risk"],.gwState[data-state="waiting_for_you"]{color:var(--gw-warn)}
.gwState[data-state="off_track"]{color:var(--gw-bad)}
.gwState[data-state="unmeasured"]{font-style:italic}

/* ── the rings and the tracks, borrowed from the goals app ──────────────
   Same drawing, same hue, so a goal looks like itself on the page and in the
   answer. goals.css is not loaded in the conversation, so its two ring class
   families are declared here once. */
.gw .gRing{flex:none;width:44px;height:44px;overflow:visible}
.gw .gRing.isSmall{width:26px;height:26px}
.gw .gRing .gTrack,.gw .gRing .gRingTrack{stroke:var(--gw-line)}
.gw .gRing .gArc,.gw .gRing .gRingArc{stroke:hsl(var(--gw-hue) 72% 62%);transition:stroke-dasharray .5s cubic-bezier(.2,.8,.2,1)}
.gw .gRing.isHollow .gArc{display:none}
.gw .gRing.isHollow .gTrack{stroke-dasharray:2 3;stroke-linecap:round}
.gw .gRing .gRingN{fill:var(--gw-ink);font:600 10.5px var(--f-body,Inter,sans-serif);letter-spacing:-.02em}
.gw .gRing .gRingDot{fill:var(--gw-warn);stroke:var(--gw-surf);stroke-width:2}
.gw .gMeter{padding:6px 0 2px}
.gw .gMeterTrack{position:relative;height:6px;border-radius:3px;background:var(--gw-line)}
.gw .gMeter.isUnread .gMeterTrack{height:2px;margin:5px 0 3px;background:none;
  border-top:2px dashed var(--gw-line);border-radius:0}
.gw .gMeterFill{position:absolute;inset:0 auto 0 0;display:block;border-radius:3px;
  background:hsl(var(--gw-hue) 72% 62%)}
.gw .gMeterTick{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;
  background:var(--gw-faint);opacity:.7}
.gwOut[data-state="reached"] .gMeterFill,.gwOut[data-state="on_track"] .gMeterFill{background:var(--gw-good)}
.gwOut[data-state="at_risk"] .gMeterFill{background:var(--gw-warn)}
.gwOut[data-state="off_track"] .gMeterFill{background:var(--gw-bad)}
.gw .gPeople{display:inline-flex;align-items:center}
.gw .gAv{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--gw-line);background:var(--gw-surf);color:var(--gw-muted);
  font:600 9px/1 var(--f-body,Inter,sans-serif);font-style:normal}
.gw .gPeople .gAv + .gAv{margin-left:-6px}
.gw .gAv:empty::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gw-faint)}

/* ── the list: rows on hairlines, the whole row is the door ───────────── */
.gwList{display:flex;flex-direction:column;
  border:1px solid var(--gw-line);border-radius:14px;background:var(--gw-surf);overflow:hidden}
.gwRow{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center;
  width:100%;text-align:left;padding:11px 14px;background:none;border:0;border-top:1px solid var(--gw-line);
  transition:background .16s}
.gwRow:first-child{border-top:0}
.gwRow:hover{background:color-mix(in srgb,var(--gw-accent) 8%,transparent)}
.gwRow .gwMeta{justify-content:flex-end}

/* ── the outcomes: quiet plates, two across, the measure doing the talking */
.gwOuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
/* ⛔ AN OUTCOME'S TITLE IS THE WHOLE SENTENCE. Truncated to an ellipsis it
   becomes "Uzņēmumi ar aktīvu telpu šo…", which is not a measure anybody can
   act on — so an outcome card wraps where a list row clips. */
.gwOut .gwName{white-space:normal;overflow:visible}
.gwOut{display:block;width:100%;text-align:left;padding:12px 13px 11px;
  border:1px solid var(--gw-line);border-radius:14px;background:var(--gw-surf);
  transition:border-color .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.gwOut:hover{border-color:hsl(258 60% 62% / .45);transform:translateY(-1px)}
.gwOut .gwMeta{margin-top:8px}
.gwOut .gwWhy{margin-top:6px;font-size:11.5px}
/* the outcome's head: a small ring for the work under it, the name beside it */
.gwOutHead{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;align-items:center}
/* a count we do not have, and an outcome nothing sits under: real states, said
   in words, drawn quieter than a number so they never read as one */
/* ⚡ v5 (task 03f6aed0): the field chip on a chat card, painted from the SAME
   served hue the goals pane and the dock use. ⛔ The hue is composed here
   against the theme, never a hex from the server; an undeclared field carries
   no --fh at all and takes .gwFieldNone — a dashed grey chip, never hue 0
   (which is red) and never a tenth colour. */
.gwFieldChip{display:inline-flex;align-items:center;gap:5px;
  color:hsl(var(--fh) 46% 33%);background:hsl(var(--fh) 70% 62% / .14);
  border-color:hsl(var(--fh) 52% 52% / .38)}
.gwFieldChip::before{content:'';width:6px;height:6px;border-radius:2px;
  background:hsl(var(--fh) 56% 46%);flex:none}
.gwFieldChip.gwFieldNone{color:var(--gw-faint);font-style:italic;background:none;
  border-color:var(--gw-line,var(--line2));border-style:dashed}
.gwFieldChip.gwFieldNone::before{background:none;border:1px solid var(--gw-line,var(--line2))}
/* a refused card says what was refused; it never renders as an empty one */
.gw.gwRefuse{border-color:var(--rose,#d6455f);display:flex;flex-direction:column;gap:2px}
.gw.gwRefuse .gwName{color:var(--rose,#d6455f)}
.gwN.isNone,.gwChip.isNone{color:var(--gw-faint);font-style:italic;
  font-family:var(--f-body,Inter,sans-serif);font-weight:400}
.gwChip.isNone{border-style:dashed}
/* the goal card's measure: the server's own sentence, set as one */
.gwMeasureLine{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--gw-muted)}
/* an absence the server named — never an empty list, which reads as "none" */
.gwAbsent{font-size:12.5px;line-height:1.5;color:var(--gw-faint);font-style:italic}
.gwMeasure{margin-top:6px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  font:500 13px/1.35 var(--osMono,ui-monospace,Menlo,monospace);color:var(--gw-ink)}
.gwMeasure .isUnread{color:var(--gw-faint);font-style:italic;
  font-family:var(--f-body,Inter,sans-serif);font-weight:400}
.gwMeasure .gwArrow{color:var(--gw-faint)}
.gwMeasure .gwTarget{color:var(--gw-muted)}

/* ── one goal, as a card ──────────────────────────────────────────────── */
.gwGoalCard{border:1px solid var(--gw-line);border-radius:16px;background:var(--gw-surf);padding:14px 15px 15px}
.gwGoalHead{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px;align-items:center}
.gwGoalHead .gwMeta{margin-top:7px}
.gwGoalCard .gwList{margin-top:0;background:none;border-radius:12px}
.gwDec{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.gwDec li{position:relative;padding-left:18px;font-size:13px;line-height:1.45;color:var(--gw-ink)}
.gwDec li::before{content:'';position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:99px;
  background:var(--gw-warn)}
.gwNow{margin-top:12px}

/* ── THE PROPOSAL: the one loud card ──────────────────────────────────────
   The accent hairline, the headline set as a sentence rather than a card
   title, and exactly one filled button. Everything the person needs to answer
   without opening anything is above the button row. */
.gwProp{position:relative;overflow:hidden;
  border:1px solid var(--gw-line);border-radius:18px;background:var(--gw-surf);
  box-shadow:var(--ws-glass-shadow,0 22px 48px -34px rgba(47,34,110,.5));
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.gwProp::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--ws-accent,linear-gradient(90deg,#22d3ee,#7c5cff 55%,#f472b6))}
.gwPropHead{display:block;width:100%;text-align:left;background:none;border:0;padding:16px 18px 0}
.gwPropTtl{display:block;font:650 18px/1.32 var(--osDisp,'Space Grotesk',Inter,sans-serif);
  letter-spacing:-.02em;color:var(--gw-ink)}
.gwPropBody{padding:0 18px 16px}
.gwProp .gwSec{margin-top:12px}
.gwFx{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.gwFx li{position:relative;padding-left:16px;font-size:13px;line-height:1.45;color:var(--gw-muted)}
.gwFx li::before{content:'';position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--gw-faint)}
.gwBtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.gwBtns button{border:1px solid var(--gw-line);border-radius:12px;padding:9px 15px;background:none;
  font:550 13px var(--f-body,Inter,sans-serif);color:var(--gw-muted);
  transition:color .18s,border-color .18s,transform .18s,filter .18s}
.gwBtns button:hover:not(:disabled){color:var(--gw-ink);border-color:hsl(258 60% 62% / .5)}
.gwBtns .gwYes{background:var(--ws-cta,linear-gradient(135deg,#6159ee,#7c5cf0 48%,#a06bd0));
  color:#fff;border-color:transparent;box-shadow:0 12px 26px -14px rgba(97,89,238,.9)}
.gwBtns .gwYes:hover:not(:disabled){color:#fff;filter:brightness(1.06);transform:translateY(-1px)}
.gwBtns.isSpent{opacity:.5}
.gwBtns button:disabled{cursor:default}
.gwOutcome:empty{display:none}
.gwOutcome{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;
  font-size:12.5px;line-height:1.5;color:var(--gw-muted)}
.gwOutcome b{color:var(--gw-ink)}
.gwOutcome[data-state="applied"] b{color:var(--gw-good)}
.gwOutcome[data-state="refused"] b{color:var(--gw-warn)}
.gwOutcome[data-state="sent"]{color:var(--gw-faint);font-style:italic}
/* the fold mark — a card that can open must say so, or a folded proposal reads
   as a headline somebody forgot to finish */
.gwPropHead{position:relative;padding-right:44px}
.gwPropHead::after{content:'';position:absolute;right:20px;top:20px;width:8px;height:8px;
  border-right:1.5px solid var(--gw-faint);border-bottom:1.5px solid var(--gw-faint);
  transform:rotate(-135deg);transition:transform .2s}
.gwProp.isFolded .gwPropHead::after{transform:rotate(45deg);top:17px}
/* folded: the headline alone, so a stack reads as a queue and not a wall */
.gwProp.isFolded .gwPropBody{display:none}
.gwProp.isFolded .gwPropHead{padding-bottom:15px}
.gwProp.isFolded .gwPropTtl{font-size:14.5px;font-weight:600;color:var(--gw-muted)}
.gwProp.isFolded::before{opacity:.35}
.gwPropCol{display:flex;flex-direction:column;gap:8px}

/* ── the room confirmation ────────────────────────────────────────────── */
.gwRoom{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--gw-line);border-radius:14px;background:var(--gw-surf);padding:12px 14px}
.gwRoom .gwLede{display:inline;margin-left:8px;font-size:11.5px}
.gwRoom .gwYes{flex:none;border:0;border-radius:12px;padding:9px 15px;
  background:var(--ws-cta,linear-gradient(135deg,#6159ee,#7c5cf0 48%,#a06bd0));color:#fff;
  font:550 13px var(--f-body,Inter,sans-serif);box-shadow:0 12px 26px -14px rgba(97,89,238,.9)}
.gwRoom .gwYes:hover{filter:brightness(1.06)}

@media (max-width:520px){
  .gwRow{grid-template-columns:26px minmax(0,1fr);row-gap:6px}
  .gwRow .gwMeta{grid-column:2;justify-content:flex-start}
  .gwOuts{grid-template-columns:minmax(0,1fr)}
  .gwPropTtl{font-size:16px}
  .gwBtns button{flex:1 1 auto;text-align:center}
  .gwRoom{flex-direction:column;align-items:stretch}
  .gwTaskBtns button{flex:1 1 auto;text-align:center}
}

/* ── the task card and the task list (owner, 2026-09-10) ─────────────────
   Same vocabulary as the goal rows above: one surface, one line weight, the
   state word carrying a dot for the eye. ⛔ A task row is NOT a link — its
   title opens nothing, because there is no task page to open; the two places
   worth going are the goal and the conversation, and both are their own
   control. That is why this is a "div" where ".gwRow" is a "button". */
.gwTasks .gwList,.gwTaskCard .gwList{margin-top:8px}
.gwTasksHead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gwTasksHead .gwTtl{margin-bottom:0}
/* the rule the list was picked by — quiet, and never optional */
.gwTasksHead .gwWhy{margin:0;font-size:11.5px;color:var(--gw-faint)}
.gwTask{display:flex;flex-direction:column;gap:7px;padding:11px 14px;
  border-top:1px solid var(--gw-line)}
.gwTask:first-child{border-top:0}
.gwTasks .gwList{border:1px solid var(--gw-line);border-radius:14px;
  background:var(--gw-surf);overflow:hidden}
/* two lines in the row; the whole thing once it is open */
.gwTask .gwName{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.gwTask.isOpen .gwName{-webkit-line-clamp:unset;overflow:visible}
/* the row is a control — say so, quietly */
.gwTask[role="button"]{cursor:pointer;position:relative;padding-right:26px}
.gwTask[role="button"]::after{content:'';position:absolute;right:12px;top:16px;
  width:7px;height:7px;border-right:1.5px solid var(--gw-faint);
  border-bottom:1.5px solid var(--gw-faint);transform:rotate(45deg);transition:transform .18s}
.gwTask.isOpen::after{transform:rotate(-135deg);top:19px}
.gwTask[role="button"]:hover{background:color-mix(in srgb,var(--gw-accent) 6%,transparent)}
.gwTask[role="button"]:focus-visible{outline:2px solid var(--gw-accent);outline-offset:-2px}
.gwTask.isFolded .gwTaskMore{display:none}
.gwTaskMore{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  margin-top:6px;padding-top:9px;border-top:1px dashed var(--gw-line)}
.gwTaskFull{margin:0;font-size:13.5px;line-height:1.5;color:var(--gw-ink)}
.gwTaskMeasure{margin:0;font-size:12px;line-height:1.5;color:var(--gw-muted)}
.gwTaskMore .gwSecBlock{margin:0}
/* the priority: a monospace number, because it is compared, not read */
.gwPri{font:400 11px var(--osMono,ui-monospace,Menlo,monospace);color:var(--gw-faint);
  border:1px solid var(--gw-line);border-radius:999px;padding:3px 7px}
/* ⛔ Late is a WORD as well as a colour — a grayscale screenshot and a
   colour-blind reader have only the word, and the renderer writes it. */
.gwChip.isLate{color:var(--gw-bad);border-color:color-mix(in srgb,var(--gw-bad) 40%,transparent)}
.gwChip.isBlocked{color:var(--gw-warn);border-color:color-mix(in srgb,var(--gw-warn) 40%,transparent)}
.gwChipLink{cursor:pointer;background:none}
.gwChipLink:hover{color:var(--gw-ink);border-color:hsl(258 60% 62% / .5)}
.gwState[data-state="doing"]::before{background:var(--gw-accent)}
.gwState[data-state="waiting"]::before{background:var(--gw-warn)}
.gwState[data-state="done"]::before{background:var(--gw-good)}
.gwState[data-state="done"]{color:var(--gw-good)}
.gwState[data-state="cancelled"]{color:var(--gw-faint);text-decoration:line-through}
/* the row's own actions: small, quiet, and spent once pressed */
.gwTaskBtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.gwMini{border:1px solid var(--gw-line);border-radius:10px;padding:5px 11px;background:none;
  font:500 12px var(--f-body,Inter,sans-serif);color:var(--gw-muted);
  transition:color .18s,border-color .18s}
.gwMini:hover:not(:disabled){color:var(--gw-ink);border-color:hsl(258 60% 62% / .5)}
.gwMiniYes{color:var(--gw-good);border-color:color-mix(in srgb,var(--gw-good) 35%,transparent)}
.gwTaskBtns.isSpent{opacity:.45}
.gwMini:disabled{cursor:default}
.gwFoot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:9px}
.gwFoot .gwLede{display:inline;font-size:11.5px}
.gwTaskCard{border:1px solid var(--gw-line);border-radius:16px;background:var(--gw-surf);
  padding:14px 16px}
.gwTaskCard .gwTask{padding:0;border-top:0}
.gwTaskCard .gwMeta{margin-top:10px}
.gwSecBlock{margin-top:4px}
.gwDeps{margin:0;padding:0;list-style:none;display:flex;gap:6px;flex-wrap:wrap}
/* ⛔ A dependency is an ID and is drawn as one — monospace says "identifier",
   which is the honest thing to say when there is no title to show instead. */
.gwDepId{font:400 11px var(--osMono,ui-monospace,Menlo,monospace);color:var(--gw-muted);
  border:1px solid var(--gw-line);border-radius:8px;padding:3px 7px}

@media (prefers-reduced-motion:reduce){
  .gw .gRing .gArc,.gwOut,.gwBtns button,.gwRow{transition:none}
}

/* ═══ v6 · the chat pass (owner, 2026-09-03) ══════════════════════════════
   "optimise the chat slightly — smaller text, better looking, easier to chat."
   Measured before and after at 1440 and 390 in both themes. Everything below
   is later in the cascade than v2 and wins by order, never by !important. */

/* ── reading size ────────────────────────────────────────────────────────
   16.5 (then 17 in v2) was a letter you lean back from; a conversation is read
   leaning in, and a shorter measure with a smaller face fits more of the
   exchange on one screen without shrinking the line's comfort. */
body.os.inthread{--ws-measure:720px}
body.os.inthread .m-orc{font-size:15px;line-height:1.68;margin-top:12px}
body.os.inthread .m-orc p{margin:0 0 12px}
body.os.inthread .m-orc h1,body.os.inthread .m-orc h2,body.os.inthread .m-orc h3{
  font-size:16.5px;margin:18px 0 7px}
body.os.inthread .m-orc ul,body.os.inthread .m-orc ol{margin:0 0 12px}
body.os.inthread .m-orc .who{margin-bottom:12px;padding-bottom:8px}
/* the person's sentence: one step down, still unmistakably the heading */
body.os.inthread .m-you{font-size:clamp(18px,1.45vw,22px);margin-top:16px;padding-left:15px}
/* ── the rhythm: turns, not a scroll of paragraphs ──────────────────────
   A hairline above each exchange after the first, and less air inside one turn
   than between two — so the eye groups a question with its answer. */
body.os.inthread .msgs .m-you ~ .m-you,
body.os.inthread .msgs .m-orc + .m-you,
body.os.inthread .msgs .darbi + .m-you,
body.os.inthread .msgs .chips + .m-you{
  border-top:1px solid var(--ws-glass-line);padding-top:20px;margin-top:22px}
body.os.inthread .msgs .m-orc + .m-you::after{top:calc(.3em + 20px)}
/* ── the footer line: a timestamp is for the moment you want it ─────────
   Quiet until the answer is under the pointer or holds the keyboard. ⛔ Never
   hidden on a touch screen, where there is no hover to reveal it with. */
body.os.inthread .m-orc .meta{
  margin-top:14px;padding-top:10px;font-size:10.5px;
  opacity:0;transition:opacity .18s}
body.os.inthread .m-orc:hover .meta,
body.os.inthread .m-orc:focus-within .meta{opacity:1}
@media (hover:none){body.os.inthread .m-orc .meta{opacity:1}}
/* ── next steps: tighter cards, the same vocabulary ──────────────────── */
body.os.inthread .chip-lbl{margin-top:18px;margin-bottom:8px}
body.os.inthread .chips.steps{gap:8px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
body.os.inthread .chips.steps .chip{padding:11px 38px 11px 13px;font-size:13.5px;border-radius:14px}
body.os.inthread .chips.steps .chip .mk{width:21px;height:21px;margin-right:8px;vertical-align:-5px;font-size:11px}
body.os.inthread .chips.steps .chip::after{right:13px;font-size:14px}

/* ── the room head, on one line ─────────────────────────────────────────
   Company / room, then the counts as chips beside it. ⛔ The dim second line
   that says the room has stated no scope is gone: it is a sentence about an
   absence, printed above every conversation, every day. The stated scope still
   shows — that one is a fact about this room. */
body.os.workHomeOpen .whRoomHead{padding-top:12px;padding-bottom:2px}
body.os.workHomeOpen .whRoomHead .rh2.nogoal{display:none}
/* ⛔ CENTRE, NOT BASELINE. Every item on this line except two words is a
   bordered pill; baseline alignment lines up the TEXT inside those pills and
   lets the boxes stagger around it, which is exactly what the row looked like
   — the counts hanging low under the room's name, the 16px room mark riding
   high on the text baseline. A row of pills centres on one axis. */
body.os.workHomeOpen .whRoomHead .rh1{align-items:center;flex-wrap:wrap;gap:8px;row-gap:4px}
body.os.workHomeOpen .whRoomHead .rh1 .rm{font-size:14px;align-items:center}
body.os.workHomeOpen .whRoomHead .rh1 .kind{padding:4px 8px;font-size:10.5px}
body.os.workHomeOpen .whRoomHead .rh2 .gt{font-size:12.5px;line-height:1.4}
body.os.workHomeOpen .whRoomHead .rh3{align-items:center;margin-top:5px;gap:8px}
body.os.workHomeOpen .whRoomHead .rh3>*{font-size:10.5px;padding:4px 8px}
/* ⛔ ONE LINE, and it took moving two things rather than shrinking three: the
   share button leaves the flow (it is a control, not part of the sentence) and
   the spacer that pushed it goes with it, so the counts sit straight after the
   room's name instead of a row below it. */
@media (min-width:900px){
  body.os.workHomeOpen .whRoomHead{
    position:relative;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;
    padding-right:104px}
  body.os.workHomeOpen .whRoomHead .rh1{flex:0 1 auto;min-width:0;margin:0}
  body.os.workHomeOpen .whRoomHead .rh1 .sp{display:none}
  /* ⛔ top:10px was a number picked against a baseline layout — it moves the
     moment the line's height changes. The share button is centred on the row
     it actually sits on. */
  /* ⛔ AND ITS OWN HEIGHT WAS THE OTHER HALF: a 30px pill lowered onto a 20.5px
     row can only be centred by a number somebody measured once. Given the same
     box as the chips it is centred BY CONSTRUCTION at the row's own top, and it
     stays on the first row when a room states its scope and adds a second. */
  body.os.workHomeOpen .whRoomHead .rh1 .rshare{position:absolute;right:0;top:12px;
    height:auto;padding:4px 10px;font:500 10.5px/1 var(--f-body,Inter,sans-serif)}
  body.os.workHomeOpen .whRoomHead .rh2{flex:1 1 100%;margin-top:2px}
  body.os.workHomeOpen .whRoomHead .rh3{flex:0 1 auto;margin-top:0}
}

/* ── the composer: easier to type into ─────────────────────────────────
   Taller the moment the caret arrives (a second line is the common case, and a
   box that grows only after the text overflows moves the words as you write),
   the two verbs pulled in against the field so the instrument reads as one,
   and the prefix demoted to a mark rather than a label competing with what you
   are writing. */
body.os.inthread .composer{column-gap:6px;padding-bottom:20px}
/* ⛔ ONE LINE BY DEFAULT (owner, 2026-09-04: "two lines by default in input
   are bad"). The field is rows=1 and grows with its content (field-sizing +
   growIn) to about six lines; the wrapper used to open to 74px the moment it
   was focused, which is a second line nobody typed. It no longer grows on
   focus — only the text can grow it. */
body.os.inthread .composer .cwrap{min-height:48px;transition:border-color .18s,box-shadow .18s}
body.os.inthread .composer .cwrap:focus-within{min-height:48px}
body.os.inthread .composer .sendPair{height:50px}
body.os.inthread .composer #in{font-size:15px;line-height:1.5}
body.os.inthread .composer #in::placeholder{color:var(--ws-faint);opacity:1;font-weight:400}
body.os.inthread .composer .pfx{
  font:600 9px/1 var(--f-body,Inter,sans-serif);letter-spacing:.16em;color:var(--ws-faint);
  opacity:.7;transition:opacity .18s,color .18s}
body.os.inthread .composer .cwrap:focus-within .pfx{opacity:1;color:#7c5cff}

/* ── the room's four sentences, above the box ──────────────────────────
   Not next steps and not an answer: a way in. They write into the field; the
   person still presses send. */
.gwCmds{display:flex;flex-wrap:wrap;gap:7px;
  width:100%;box-sizing:border-box;align-self:stretch;
  max-width:var(--ws-measure,720px);margin:0 auto;padding:0 0 8px}
/* ⛔ width:100% AND box-sizing. The thread column is a flex COLUMN, so a strip
   left to its own width shrank to its content and stacked the four chips one
   under another in the middle of the screen. */
/* ⛔ THE STRIP LIVES IN THE COMPOSER'S BOX, NOT THE READING COLUMN'S. Given the
   rail-width paddings the message column uses, an 824 px strip inside the work
   home had 154 px of content left and stacked its four chips into a column in
   the middle of the screen. It takes the composer's own padding — the same rule,
   the same shell — and centres like the composer does. */
body.os.inthread .gwCmds{padding-left:34px;padding-right:34px;max-width:none;
  width:100%;box-sizing:border-box;align-self:stretch;justify-content:center}
body.os.inthread.workHomeOpen .gwCmds{padding-left:34px;padding-right:34px}
/* ⛔ No rail/dock padding here: the strip already sits in the thread column between them, and adding both widths again left a 300px column at 1440 that stacked the four chips one under another (measured 2026-09-03). */
.gwCmds[hidden]{display:none}
.gwCmd{border:1px solid var(--ws-glass-line,rgba(75,72,120,.14));border-radius:999px;
  background:var(--ws-glass-2,rgba(255,255,255,.9));color:var(--ws-muted,#5a6478);
  font:500 12px/1 var(--f-body,Inter,sans-serif);padding:8px 13px;cursor:pointer;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:color .18s,border-color .18s,transform .18s}
.gwCmd:hover{color:var(--ws-ink,#0c1220);border-color:hsl(258 60% 62% / .45);transform:translateY(-1px)}
@media (max-width:760px){
  body.os.inthread .gwCmds{padding-left:14px;padding-right:14px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none}
  body.os.inthread .gwCmds::-webkit-scrollbar{display:none}
  .gwCmd{flex:none;white-space:nowrap}
}
@media (max-width:760px){
  body.os.inthread .m-orc{font-size:14.5px}
  body.os.inthread .m-you{font-size:17px}
}

/* ═══ the goal-triage VISUAL pass (owner, 2026-09-03) ═════════════════════
   "I barely see anything; the visuals have to improve hugely." Designed in a
   public scratch folder by Muse 1.3 against a fixture harness, read here and
   ported by hand. Later in the cascade than the v2 block above, so it wins by
   order and never by !important.

   ⛔ MUSE'S OWN :root TOKEN BLOCK WAS NOT TAKEN. It redefined --gw-ink and
      friends as literal hexes; in the product those are DERIVED from the work
      screen's --ws-* family (see the .gw rule above), and pasting generic
      values would have quietly unhooked the widgets from the screen they live
      on — a difference no screenshot of the harness could show.
   ⛔ AND .gwProp::before STAYS. Muse hid the aurora hairline across the top of
      the proposal card; that hairline IS the one bold mark per turn, and the
      card is the thing the room exists for. */

/* ── the goal card: head on ONE row, chips on ONE row ─────────────────────
   It was 44px of ring stacked over a name, an explanation, a meta row, a
   measure sentence, a section heading, a list and an absence block — measured
   at roughly twice the height of anything else in an answer. */
.gwGoalCard{padding:10px 12px}
.gwGoalCard .gRing{width:30px;height:30px}
.gwGoalHead{display:flex;align-items:center;gap:10px}
.gwGoalCard .gwRowT{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:2px 8px}
.gwGoalCard .gwName.isBig{flex:0 1 auto;min-width:0;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gwGoalCard .gwLede{flex:1 1 auto;min-width:0;margin:0;font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gwGoalHead .gwMeta{flex:1 1 100%;margin:2px 0 0;gap:6px}
.gwGoalCard .gwState{font-size:10.5px}
.gwGoalCard .gwChip{padding:2px 8px;font-size:10.5px;color:var(--gw-faint);max-width:220px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gwGoalCard .gwMeasureLine{margin:6px 0 0;font-size:12px;line-height:1.4;
  color:var(--gw-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gwGoalCard .gwSec{margin:8px 0 4px;font-size:9px}
/* the sub-goals stop being a card inside a card — one glass recipe, one plate */
.gwGoalCard .gwList{margin-top:4px;background:none;border:0;border-radius:0;box-shadow:none}
.gwGoalCard .gwRow{padding:6px 0;gap:8px;grid-template-columns:22px minmax(0,1fr) auto}
.gwGoalCard .gRing.isSmall{width:22px;height:22px}
.gwGoalCard .gwRow .gwName{font-size:12.5px;font-weight:500;color:var(--gw-muted)}
.gwGoalCard .gwRow .gwN{font-size:10px}
.gwGoalCard .gwNow{margin-top:6px}
.gwGoalCard .gAv{width:18px;height:18px}

/* ── absence is a LINE, never a section ──────────────────────────────────
   The heading is no longer emitted at all (goal-parts.js), so this only has to
   make the one surviving line quiet. It keeps the italic off: an italic
   sentence under a heading read as an error message. */
.gwAbsent{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--gw-faint);
  font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── the outcomes grid, denser ───────────────────────────────────────────
   minmax(300px) gave two columns at 824px of answer width; minmax(200px)
   gives three, which is what a board of four outcomes wants. */
.gwOuts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.gwOut{padding:10px 11px}
.gwOutHead{gap:8px;grid-template-columns:22px minmax(0,1fr)}
.gwOut .gRing.isSmall{width:22px;height:22px}
.gwOut .gwName{font-size:12.5px;line-height:1.35}
.gwOut .gwMeta{margin-top:6px;gap:4px 8px}
.gwOut .gwN{font-size:10.5px;line-height:1.3}
.gwOut .gwWhy{margin-top:4px;font-size:11px;line-height:1.4}

/* ── the proposal card: tighter, and the four answers INLINE on the right ─ */
.gwPropHead{padding:12px 40px 0 14px}
.gwPropHead::after{right:16px;top:16px}
.gwProp.isFolded .gwPropHead::after{top:13px}
.gwPropTtl{font-size:15px;line-height:1.3}
.gwPropBody{padding:0 14px 12px;display:flex;flex-wrap:wrap;align-items:flex-end}
.gwProp .gwSec{margin-top:8px;flex:1 1 100%}
.gwProp .gwWhy{margin:4px 0 0;font-size:12.5px;flex:1 1 100%}
.gwProp .gwFx{flex:1 1 180px;margin:4px 0 0;gap:3px}
.gwProp .gwFx li{font-size:12.5px;line-height:1.4}
.gwProp .gwOutcome:not(:empty){flex:1 1 100%;margin-top:8px}
.gwProp .gwBtns{flex:0 0 auto;margin:8px 0 0 auto;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gwProp .gwBtns button{padding:7px 11px;font-size:12.5px;border-radius:10px;
  white-space:nowrap;flex:0 0 auto}

@media (max-width:520px){
  .gwGoalCard .gwRowT{gap:1px 8px}
  .gwGoalCard .gwChip{max-width:160px}
  .gwProp .gwBtns{flex-wrap:wrap}
  .gwProp .gwBtns button{padding:7px 10px;font-size:12px;flex:0 0 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .gwPropHead::after{transition:none}
}

/* ═══ the chat itself — composer, steps, footer (owner, 2026-09-03) ═══════
   Designed by Muse 1.3 in a public scratch folder against fixture harnesses,
   read here and ported. ⛔ These rules live in THIS file rather than in
   index.html's inline style on purpose: index.html's CSS is pasted into a
   template literal by the harness copier, and every rule below would have had
   to survive that. Here they are later in the cascade than the inline block
   and win by order. */

/* ── 1 · THE COMPOSER ON ONE LINE ─────────────────────────────────────────
   It already sat on one row; what it did not do was stop spending height on
   it. Measured before at 1440: .cwrap 74px tall, .sendPair 50px, .composer
   106px in all. The conversation wants that back. ⛔ It still grows on a
   second line — growIn() owns the height and nothing here caps it. */
body.os.inthread .composer{padding:6px 20px 8px;gap:8px}
body.os.inthread .composer::before{left:20px;right:20px}
body.os.inthread .cwrap{position:relative;min-width:0;gap:6px;
  padding:5px 6px 5px 12px;min-height:40px;box-sizing:border-box;
  box-shadow:0 10px 26px -20px rgba(23,16,70,.45)}
body.os.inthread .cwrap:focus-within{
  box-shadow:0 0 0 3px color-mix(in srgb,hsl(var(--dh,258) 70% 62%) 18%,transparent),
             0 12px 28px -20px rgba(90,70,220,.55)}
body.os.inthread .cwrap .pfx{flex:none;line-height:1.4;padding:4px 0;white-space:nowrap}
body.os.inthread .composer textarea{min-width:0;line-height:1.4;padding:4px 0;
  max-height:calc(1.4em * 6 + 8px)}
/* ⛔ align-items:center, not flex-start. The old rule pinned the prefix and the
   two icon buttons to the TOP of the box, which is right for a grown textarea
   and wrong for the one-line resting state it is in almost all the time. */
body.os.inthread .cwrap:has(textarea){align-items:center}
body.os.inthread .cwrap:has(textarea) .pfx{line-height:1.4}
body.os.inthread .composer .mic,body.os.inthread .composer .clip{
  align-self:center;width:28px;height:28px;font-size:16px;line-height:1;padding:0}
body.os.inthread .composer .sendPair{align-self:center;align-items:center;padding:2px;gap:2px;
  box-sizing:border-box}
body.os.inthread .composer .sendPair>button{border-radius:999px;padding:0 12px;height:32px;
  line-height:1;white-space:nowrap;justify-content:center}
body.os.inthread .composer .sendPair .send{border-radius:999px 0 0 999px}
body.os.inthread .composer .sendPair .doit{border-radius:0 999px 999px 0;
  margin:-2px -2px -2px 0;padding-right:14px;padding-left:12px}
body.os.inthread .composer .sendPair:has(.send.hot){
  background:color-mix(in srgb,var(--surf) 40%,transparent)}

/* ── 3 · THE "/" MENU ─────────────────────────────────────────────────────
   The four room commands were a permanent strip of buttons above the box.
   They are a MENU now: it hangs off the input it belongs to, never wider, and
   the keyboard-highlighted row is a real state rather than a hover. */
.slashPop{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:24;
  width:auto;max-width:100%;box-sizing:border-box;
  background:var(--surf2,var(--surf));border:1px solid var(--line2);border-radius:16px;
  padding:6px;margin:0;overflow:hidden auto;max-height:288px;
  box-shadow:0 18px 44px -18px rgba(23,16,70,.5),0 3px 10px -4px rgba(23,16,70,.25)}
.slashPop[hidden]{display:none}
.slashRow{display:flex;flex-direction:column;justify-content:center;gap:1px;
  width:100%;box-sizing:border-box;text-align:left;background:none;
  border:1px solid transparent;border-radius:10px;color:var(--ink);
  padding:7px 10px 7px 12px;margin:0;cursor:pointer;font:500 13px var(--ui);line-height:1.35;
  transition:background-color .12s ease,border-color .12s ease}
.slashRow + .slashRow{margin-top:2px}
.slashRow b{display:block;font:650 13px var(--ui);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slashRow span{display:block;color:var(--muted);font-family:var(--mono);font-size:11.5px;
  line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slashRow:hover{background:color-mix(in srgb,hsl(var(--dh,258) 70% 62%) 8%,transparent);
  border-color:color-mix(in srgb,hsl(var(--dh,258) 70% 62%) 22%,transparent)}
.slashRow.is-on{background:color-mix(in srgb,hsl(var(--dh,258) 70% 62%) 13%,transparent);
  border-color:color-mix(in srgb,hsl(var(--dh,258) 70% 62%) 42%,transparent);
  box-shadow:inset 2px 0 0 hsl(var(--dh,258) 70% 62%)}

/* ── 4 · NEXT STEPS AS A MODULE ───────────────────────────────────────────
   Four flat cards under every answer became, over three answers, twelve
   controls shouting under three sentences. Collapsed it is ONE line. */
.ns{margin-top:12px;border:1px solid var(--line);border-radius:14px;background:var(--surf);
  box-shadow:0 10px 28px -18px rgba(48,36,120,.55);overflow:hidden;max-width:100%}
.ns-bar{display:flex;align-items:center;gap:8px;width:100%;min-width:0;box-sizing:border-box;
  border:0;background:transparent;color:var(--ink);padding:6px 6px 6px 12px;min-height:38px;
  cursor:pointer;font-family:var(--ui);text-align:left}
.ns-title{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ns-count{color:var(--faint);letter-spacing:.06em}
.ns-peek{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.ns-peek-pill{flex:0 1 auto;min-width:0;max-width:150px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-family:var(--mono);font-size:10.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;
  background:color-mix(in srgb,var(--surf2,var(--surf)) 60%,transparent)}
.ns-chev{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:999px;color:var(--muted);
  border:1px solid transparent;transition:transform .18s ease}
.ns-chev svg{display:block}
.ns.is-open .ns-chev{transform:rotate(180deg)}
.ns.is-open .ns-peek{display:none}
.ns-body{display:none;padding:2px 8px 8px}
.ns.is-open .ns-body{display:block}
.ns .chip-lbl{display:none}
.ns .chips.steps{margin-top:6px;flex-direction:column;align-items:stretch;gap:7px}
.ns .chips.steps .chip{width:100%;max-width:none;justify-content:flex-start;text-align:left;
  box-sizing:border-box}
/* ⛔ THE FIRST STEP IS THE RECOMMENDED ONE (owner: better hierarchy, the first
   visually primary, the rest quiet). Four chips of equal weight is four
   recommendations, which is none. ⚠ This does NOT retire the act rule: an act
   chip that is not first keeps a cue that is not colour — a dashed edge and a
   dotted underline — because "this one does something" must survive both a
   monochrome screen and being the second item. */
.ns .chips.steps .chip.step:first-child{background:var(--aurora);border-color:transparent;
  color:#fff;font-weight:600;box-shadow:0 8px 22px -10px hsl(var(--dh,258) 70% 55% / .9)}
.ns .chips.steps .chip.step:first-child .mk{color:#fff}
.ns .chips.steps .chip.step:not(:first-child){background:transparent;color:var(--ink);
  border:1px solid var(--line);box-shadow:none;font-weight:400}
.ns .chips.steps .chip.step:not(:first-child):hover{border-color:var(--line2);
  box-shadow:0 0 20px -12px hsl(var(--dh,258) 75% 58% / .7)}
.ns .chips.steps .chip.step:not(:first-child) .mk{color:var(--muted)}
.ns .chips.steps .chip.step.k-act:not(:first-child){border-style:dashed;font-weight:600;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.ns .chips.steps .chip.step.k-act:first-child{text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:3px}
.ns-more{display:inline-block;margin:8px 0 2px 4px;padding:2px;border:0;background:none;
  cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--faint);text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px;opacity:.85}
.ns-more:hover{color:var(--muted);opacity:1}
.ns-bar:focus-visible,.ns-more:focus-visible{
  outline:2px solid hsl(var(--dh,258) 70% 62%);outline-offset:2px;border-radius:10px}

/* ── 6 · THE FOOTER LINE LEAVES THE FLOW ──────────────────────────────────
   "39.3 s · copy · X · f · in" under every answer is metadata sitting where a
   reader's eye lands next. It contributes NO height now and appears only over
   the answer it belongs to. ⛔ Opacity, never display:none — the controls stay
   reachable by keyboard and by a screen reader, and :focus-within reveals
   them. ⛔ And on a touch screen, where there is no hover at all, it simply
   goes back to being an ordinary line. */
body.os.inthread #msgs .m-orc{position:relative}
@media (hover:hover){
  body.os.inthread #msgs .m-orc .meta{position:absolute;top:0;right:0;margin-top:0;
    background:var(--surf);border:1px solid var(--line);border-radius:999px;
    padding:4px 10px;box-shadow:0 4px 16px rgba(20,16,60,.12);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:3;
    white-space:nowrap;display:flex;align-items:center;gap:8px}
  body.os.inthread #msgs .m-orc:hover .meta,
  body.os.inthread #msgs .m-orc:focus-within .meta{opacity:1;pointer-events:auto}
}
@media (hover:hover) and (max-width:520px){
  body.os.inthread #msgs .m-orc .meta{font-size:10px;padding:3px 8px}
}
@media (prefers-reduced-motion:reduce){
  .ns-chev,body.os.inthread #msgs .m-orc .meta,body.os.inthread .cwrap,
  .slashRow{transition:none}
}
@media (max-width:520px){
  body.os.inthread .composer{padding:5px 12px 7px;gap:6px}
  body.os.inthread .composer::before{left:12px;right:12px}
  body.os.inthread .cwrap{padding:4px 4px 4px 10px;gap:4px;min-height:38px;border-radius:15px}
  body.os.inthread .composer .sendPair>button{padding:0 9px;height:30px}
  body.os.inthread .composer .sendPair .doit{padding-right:10px;padding-left:9px}
  .ns-bar{gap:6px;padding-left:10px}
  .ns-title{font-size:10px}
  .ns-peek-pill{max-width:84px;font-size:10px;padding:2px 8px}
  .ns .chips.steps .chip{font-size:11px;padding:8px 12px;white-space:normal}
  .slashRow{padding:7px 9px 7px 11px}
}


/* ═══ workspace v2 · the rail's icon system and the unmistakable active row ═══
   (owner, 2026-09-04). Every row wears a drawn family icon (icons-map.mjs);
   the selected room is a filled glass row in ITS hue, the icon lifted — legible
   from across the room, in both themes. One hue per row kind through --dh, the
   same variable the door uses, never a second palette. */
body.os.workHomeOpen .whAppNav .room{--dh:258}
body.os.workHomeOpen .whAppNav .room.k-private{--dh:262}
body.os.workHomeOpen .whAppNav .room.k-idea,body.os.workHomeOpen .whAppNav .room.k-lead{--dh:38}
body.os.workHomeOpen .whAppNav .room.k-project,body.os.workHomeOpen .whAppNav .room.k-experiment{--dh:190}
body.os.workHomeOpen .whAppNav .room.k-app{--dh:150}
body.os.workHomeOpen .whAppNav .room.k-room,body.os.workHomeOpen .whAppNav .room.k-shared,body.os.workHomeOpen .whAppNav .room.k-topic{--dh:258}
/* ⛔ THE ICON SIZE AND THE ACTIVE ROW MOVED TO work-clay.css (2026-09-04), and
   they were DELETED here rather than left to lose a cascade fight. This block
   drew the rail icon at 22px and the selected room as a hue-tinted glass row
   with an inset bar — the pass before the owner chose the clay world, whose
   answers are different in both places: contour clay reads at 26-32px and
   nowhere below about 24 (handover section 1), and the selected row is a
   filled lavender pillow with the icon lifted and a violet bar OUTSIDE its
   left edge.
   ⛔ Leaving both in place would have been two answers to one question decided
      by specificity — the exact defect this stylesheet's own header warns
      about. One answer, in the file that owns the design.
   ⛔ NO BACKTICKS ANYWHERE BELOW LINE 1310 IN THIS FILE. test-scope-chip slices
      from the SCOPE CHIP heading to the end of the file and forbids them; a
      comment written in the ordinary house style turns that suite red for a
      reason no reader of the comment can see.
   ⚡ The --dh hue above stays: it is the row's hue and other rules read it. */
/* the company's own mark, or the family's — the box no longer paints white
   behind a picture that has its own edges */
body.os.workHomeOpen .whAppNav .sbj .mk.mklogo{background:transparent;padding:0;border-color:transparent;box-shadow:none;overflow:hidden}
body.os.workHomeOpen .whAppNav .sbj .mk.mklogo img{width:26px;height:26px;object-fit:contain;border-radius:7px;display:block}
body.os.workHomeOpen .whAppNav .sbj .mk.mklogo img[data-mark="site"]{background:#fff;padding:2px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
body.os.workHomeOpen .whAppNav .sbj .mk.person{background:transparent;box-shadow:none;border-color:transparent}
body.os.workHomeOpen .whAppNav .sbjrow.here .sbj .mk img{filter:drop-shadow(0 6px 10px hsl(258 70% 45% / .5))}
body.os.workHomeOpen .whAppNav .sbjrow.here{
  background:linear-gradient(135deg,hsl(258 72% 60% / .26),hsl(258 72% 60% / .08)),var(--ws-glass-2);
  border-color:hsl(258 70% 62% / .6);box-shadow:inset 3px 0 0 hsl(258 72% 62%),var(--ws-glass-shadow)}

/* ─ the header's attention control (owner: "27 lēmumi gaida" was a count with
   no verb and no door). The family's decisions icon, the number, the verb;
   an amber dot when something is overdue; a single quiet icon when the queue
   is empty — presence is earned by the queue being non-empty. */
body.os .top .pulse.attn{gap:8px;padding:4px 12px 4px 6px;border-radius:999px;
  background:var(--ws-glass-2,var(--surf));border-color:var(--ws-glass-line,var(--line));color:var(--ws-muted,var(--muted))}
body.os .top .pulse.attn .mk{width:22px;height:22px;object-fit:contain;display:block;flex:none;
  filter:drop-shadow(0 2px 3px rgba(20,16,60,.25))}
body.os .top .pulse.attn b{color:var(--ws-ink,var(--ink));font-weight:650}
body.os .top .pulse.attn .urg{display:inline-flex;align-items:center;gap:5px;color:#b8791f;font-weight:600}
body.os .top .pulse.attn .urg::before{content:"";width:7px;height:7px;border-radius:50%;background:#f0a83a;
  box-shadow:0 0 0 3px rgba(240,168,58,.22)}
body.os .top .pulse.attn.empty{padding:4px 6px;gap:0;color:var(--ws-faint,var(--faint))}
body.os .top .pulse.attn.empty .mk{opacity:.7}
body.os .top .pulse.attn.empty span{display:none}
body.os .top .pulse.attn:hover{border-color:hsl(258 60% 62% / .55);color:var(--ws-ink,var(--ink))}
body.os .top .pulse.attn.live i{margin-left:2px}

/* ─ the live context rows in the right rail (rail plan step 2) ─ */
/* ⛔ .wsCtx and .wsCtxRow were REMOVED 2026-09-10 with the section they styled:
   the dock's context rows printed the visitor's browser language and IP
   market under a heading that said "in this conversation". The room summary
   that replaced them styles itself in os-dock.css, beside its own markup. */
  padding:8px 11px;border-radius:11px;border:1px solid var(--ws-glass-line);background:var(--ws-glass-2)}

/* ⚡ A PERSON'S PORTRAIT IS THE MARK, NOT A LOGO ON A PLATE (owner, 2026-09-05:
   "fix my profile picture, not in the round one — when not active it looks much
   better"). The place row gave the portrait the logo treatment — a white plate,
   3px padding, and when the row is the one being looked at, a drop shadow — so the
   photo shrank to a ringed disc the moment it was chosen. A portrait fills its
   tile edge to edge in every state; being looked at changes the ROW, never the face. */
body.os.workHomeOpen .whAppNav .sbj .mk.person.mklogo{padding:0;background:transparent;border-color:transparent;box-shadow:none;overflow:hidden}
body.os.workHomeOpen .whAppNav .sbj .mk.person img[data-mark="portrait"]{width:26px;height:26px;object-fit:cover;border-radius:9px;display:block}
body.os.workHomeOpen .whAppNav .sbjrow.here .sbj .mk.person img[data-mark="portrait"]{filter:none}

/* ═══ v11 · the build lane, in the room (task fe34e686) ═══════════════════
   The ask-to-build cards as rail rows: waiting for a yes, Smith working,
   or served — with a link straight to the preview lane. The state dot is
   the honest part: grey offered, blue working, green served, red failed. */
body.os.inthread .wsBask{
  display:grid;grid-template-columns:auto 1fr;grid-column-gap:9px;align-items:baseline;
  width:100%;box-sizing:border-box;padding:10px 12px 11px;margin:0 0 7px;border-radius:13px;
  border:1px solid var(--ws-glass-line);background:var(--ws-glass-2);box-shadow:var(--ws-glass-shadow)}
body.os.inthread .wsBask:last-child{margin-bottom:0}
body.os.inthread .wsBask .sdot{width:7px;height:7px;border-radius:50%;background:var(--ws-muted);opacity:.55;position:relative;top:-1px}
body.os.inthread .wsBask.s-accepted .sdot{background:#2f7cf6;opacity:1;animation:bcBaskPulse 1.7s infinite}
body.os.inthread .wsBask.s-served .sdot{background:#0f9d63;opacity:1;animation:none}
body.os.inthread .wsBask.s-failed .sdot{background:#e5484d;opacity:1;animation:none}
body.os.inthread .wsBask .ti{font:600 13px/1.3 var(--osDisp,'Space Grotesk',sans-serif);letter-spacing:-.01em;color:var(--ws-ink);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.os.inthread .wsBask .st{grid-column:2;font:500 10.5px var(--osMono,ui-monospace);color:var(--ws-muted)}
body.os.inthread .wsBask .st a{color:#7c5cff;text-decoration:none;font-weight:600}
body.os.inthread .wsBask .st a:hover{text-decoration:underline}
@keyframes bcBaskPulse{0%,100%{opacity:1}50%{opacity:.3}}