/* Lore HQ: the company (2026-11-01). Phones first: the top strip, then one view. Home is the room: the CEO and five departments in
   one top-down pixel office (room.js), and the bar under it that opens the To do sheet; on a desktop, the phone layout, centred.
   The Lore's look: near-black, white type and pill buttons, yellow only where something needs you, amber only where something is stuck. */
/* HQ's own font (2026-10-30; Montserrat only since 2026-10-31, the user's pick): served with the app, so the first paint never waits
   on Google. Latin only; any other character falls back to the system font. SIL Open Font License: fonts/OFL.txt */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/montserrat-latin-500-800.b6711dec.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #0b0b0c; --rail: #0f0f11; --panel: #141416; --raised: #1a1a1d; --sunk: #101012; --line: #26262a; --line-soft: #1e1e22;
  --fg: #f3f2ee; --muted: #a3a19b; --faint: #6e6d68; --label: #8f8e88;
  --accent: #ffe866; --accent-ink: #191600; --accent-soft: rgba(255, 232, 102, .11);
  --good: #4fbf7b; --good-soft: rgba(79, 191, 123, .14); --bad: #ef6b60; --bad-soft: rgba(239, 107, 96, .14); --warn: #e8b85c; --warn-soft: rgba(232, 184, 92, .13);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70;            /* Binance, Bybit (validated set) */
  --av-bg-l: 30%; --av-fg-l: 88%;
  --bot-s: 78%; --bot-l: 64%; --bot-sun: #ece8da; --bot-sun-rgb: 236, 232, 218;   /* the flat bots: bright on dark */
  --need: #ffe866; --need-ink: #191600; --need-text: #ffe866; --lit: #24220f;   /* the house: a room that needs you has its light on */
  --wall: #2e2e33; --floor: #141416; --base: #111113; --shaft: #0d0d0f; --fur: #26262b; --fur-top: #34343a; --scr: #0f0f11;
  --lamp: rgba(255, 222, 170, .11);   /* the house at night: a desk lamp's warm pool over a bot at work (warm white: never the yellow or amber of meaning) */
  --font-display: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f3ef; --rail: #efeee9; --panel: #ffffff; --raised: #f8f7f3; --sunk: #f1f0eb; --line: #e1dfd8; --line-soft: #ebe9e3;
    --fg: #151517; --muted: #5b5a55; --faint: #8a8983; --label: #6f6e68;
    --accent: #866c00; --accent-ink: #fffbe0; --accent-soft: rgba(196, 160, 0, .13);
    --good: #2c8a4d; --good-soft: rgba(44, 138, 77, .11); --bad: #c5463c; --bad-soft: rgba(197, 70, 60, .1); --warn: #9a6a10; --warn-soft: rgba(196, 140, 30, .13);
    --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a;
    --av-bg-l: 88%; --av-fg-l: 27%;
    --bot-s: 60%; --bot-l: 40%; --bot-sun: #8a8578; --bot-sun-rgb: 138, 133, 120;
    --need: #ffe866; --need-ink: #191600; --need-text: #6e5900; --lit: #fff6c2;
    --wall: #cdcbc3; --floor: #ffffff; --base: #f7f6f2; --shaft: #ebe9e3; --fur: #e2e0d9; --fur-top: #d2d0c8; --scr: #f4f3ef;
    --lamp: rgba(255, 214, 140, .2);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f4f3ef; --rail: #efeee9; --panel: #ffffff; --raised: #f8f7f3; --sunk: #f1f0eb; --line: #e1dfd8; --line-soft: #ebe9e3;
  --fg: #151517; --muted: #5b5a55; --faint: #8a8983; --label: #6f6e68;
  --accent: #866c00; --accent-ink: #fffbe0; --accent-soft: rgba(196, 160, 0, .13);
  --good: #2c8a4d; --good-soft: rgba(44, 138, 77, .11); --bad: #c5463c; --bad-soft: rgba(197, 70, 60, .1); --warn: #9a6a10; --warn-soft: rgba(196, 140, 30, .13);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a;
  --av-bg-l: 88%; --av-fg-l: 27%;
  --bot-s: 60%; --bot-l: 40%; --bot-sun: #8a8578; --bot-sun-rgb: 138, 133, 120;
  --need: #ffe866; --need-ink: #191600; --need-text: #6e5900; --lit: #fff6c2;
  --wall: #cdcbc3; --floor: #ffffff; --base: #f7f6f2; --shaft: #ebe9e3; --fur: #e2e0d9; --fur-top: #d2d0c8; --scr: #f4f3ef;
  --lamp: rgba(255, 214, 140, .2);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }   /* no gray flash on tap, no page bounce behind the app */
body { margin: 0; background: var(--bg); color: var(--fg); font: 500 14px/1.45 var(--font-body); -webkit-text-size-adjust: 100%; overflow-wrap: break-word; }
pre, .kv p, .dec p, .blk pre, .ev .tx { white-space: pre-wrap; overflow-wrap: anywhere; }   /* long words, links and code wrap: never a sideways scroll */
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.empty { color: var(--muted); font-size: .86rem; margin: 0; padding: 4px 0; }
.empty.top { color: var(--fg); font-size: .95rem; font-weight: 600; padding: 12px 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── shell ── */
.hq { max-width: 1180px; margin: 0 auto; padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
body::before { content: ""; position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); }   /* nothing scrolls under the clock */
.top { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.back { width: 44px; height: 44px; flex: none; margin-left: -12px; display: grid; place-items: center; color: var(--fg); }
.gear { width: 44px; height: 44px; flex: none; margin-right: -10px; display: grid; place-items: center; color: var(--muted); }
.ttl { flex: 1; min-width: min(8rem, 45%); display: flex; flex-direction: column; }   /* an agent's name stays whole */
.ttl h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttl span { color: var(--label); font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }   /* one line */
.pill { flex: none; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }   /* a sub-page's stuck count, in Home's dashed amber pill: never a cut label */
.view { display: flex; flex-direction: column; gap: 12px; }
.sec { font: 500 .75rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin: 6px 0 0; }
.list { display: flex; flex-direction: column; gap: 8px; }

/* ── dots, badges, names, buttons ── */
.who { display: block; color: var(--label); font: 700 .75rem var(--font-body); letter-spacing: .02em; }
.who .wd { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 2px; vertical-align: .5px; background: hsl(var(--bh, 220) var(--bot-s) var(--bot-l)); }   /* the agent's colour, as on its bot */
.who .wd.sun { background: var(--bot-sun); }
a.ulink { color: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 2px; overflow-wrap: anywhere; }
.dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--faint); }
.dot.run, .dot.ok { background: var(--good); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
.dot.need { background: var(--accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: 700 .82rem var(--font-body); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.ghost { border-color: transparent; color: var(--muted); padding: 0 10px; }
.btn.round { width: 48px; min-height: 48px; padding: 0; flex: none; }
.btn:disabled { opacity: .45; cursor: default; }
.link { min-height: 44px; display: inline-flex; align-items: center; border: 0; background: none; padding: 0; color: var(--fg); font: 600 .8rem var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }


/* ── cards: a decision, a job, an answer (the sheet's card view) ── */
.item { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--panel); color: var(--fg); text-decoration: none; min-width: 0; }
.item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item .tx b { font-weight: 600; line-height: 1.3; }
.item .tx span { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .chev { color: var(--muted); font-size: 1.3rem; padding: 0 6px; }
.dec { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.dec .hd { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dec .hd b { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.dec p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.dec .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dec .opts.one { grid-template-columns: minmax(0, 1fr); }
.dec .opts .btn { white-space: normal; height: auto; min-height: 44px; padding: 8px 12px; line-height: 1.25; text-align: center; }
.dec p.queued { color: var(--fg); }
.dec ul.does { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.dec ul.does b { color: var(--fg); font-weight: 600; }
.dec .lines { display: flex; flex-direction: column; gap: 10px; }   /* Trading's scoreboard card: one pick per line */
.dec .ln { display: flex; flex-direction: column; gap: 4px; padding: 10px 0 0; border-top: 1px solid var(--line-soft); }
.dec .ln-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dec .ln-hd b { min-width: 0; font-size: .84rem; line-height: 1.3; }
.dec .ln p { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.dec .ln p.why { font-size: .75rem; color: var(--faint); }
.seg { flex: none; display: grid; grid-template-columns: repeat(3, 52px); gap: 2px; padding: 2px; border-radius: 11px; background: var(--sunk); }
.seg button { min-height: 40px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 700 .75rem var(--font-body); cursor: pointer; }
.seg button.rule { text-decoration: underline dotted; text-underline-offset: 3px; }   /* the rule's call */
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.dec .fail { color: var(--warn); font-weight: 700; }
.dec p.answer { color: var(--fg); white-space: pre-line; }
/* a job's contract and its evidence behind one tap, and the verifier's verdict on one line (the user's pick, 2026-10-31; compact since the
   review of #161, so each view keeps to one phone screen): words, never under 12 px; amber only for a blocked job */
.dec details[data-pf] { border-radius: 10px; background: var(--sunk); }
.dec details[data-pf] > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px; list-style: none; cursor: pointer; font-size: .78rem; color: var(--fg); }
.dec details[data-pf] > summary::-webkit-details-marker { display: none; }
.dec details[data-pf] > summary::before { content: "›"; flex: none; color: var(--label); font-weight: 700; transition: transform .15s ease-out; }
.dec details[data-pf][open] > summary::before { transform: rotate(90deg); }
.dec details[data-pf] > summary span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dec dl.pf { margin: 0; display: flex; flex-direction: column; gap: 4px; padding: 0 10px 10px; font-size: .78rem; line-height: 1.4; }
.dec dl.pf > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
.dec dl.pf dt { color: var(--label); font-weight: 700; }
.dec dl.pf dd { margin: 0; min-width: 0; color: var(--fg); overflow-wrap: anywhere; }
.dec dl.pf .one { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dec .vline { margin: 0; font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-pass, .v-pass { color: var(--good); }
.r-fail, .v-fail { color: var(--bad); }
.v-blocked, .dec .stuck { color: var(--warn); }
.dec .stuck { font-weight: 700; }
.dec p.answer.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dec p.askq { color: var(--fg); white-space: pre-line; }
/* the company (2026-11-01): the bar under the room opens the To do sheet. Yellow (--you) means only "needs you", amber (--stuck) only "stuck" */
:root { --you: #f5d76e; --stuck: #ff9a1f; }
.bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 4px 6px 4px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: 600 15px/1.2 var(--font-body); cursor: pointer; text-align: left; }   /* the house's last row: Home is one screen, so it's always in view */
.bar b { font-weight: 800; font-variant-numeric: tabular-nums; }
.bar b.you, .td-sum b.you { color: var(--you); }
.bar-go { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #fff; color: #0b0b0b; }
dialog.todo { position: fixed; inset: auto 0 0; top: var(--todo-top, 56px); margin: 0; width: 100%; max-width: 100%; height: auto; max-height: none; padding: 0;
  display: none; flex-direction: column; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; background: #0b0b0b; color: var(--fg); overflow: hidden; }
dialog.todo[open] { display: flex; }
dialog.todo::backdrop { background: rgba(0, 0, 0, .6); }   /* the top strip stays in view, dimmed */
@media (prefers-reduced-motion: no-preference) { dialog.todo[open] { animation: bs-up .22s cubic-bezier(.2, .8, .2, 1); } }
.td-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 6px; }
.td-tabs { display: flex; gap: 4px; }
.td-tabs button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: none; color: var(--muted); font: 700 14px var(--font-body); cursor: pointer; }
.td-tabs button[aria-selected="true"] { background: #fff; color: #0b0b0b; }   /* the active tab is a white pill */
.td-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 600 12px/1.2 var(--font-body); color: var(--muted); text-align: right; }
.td-sum b.you { font-size: 13px; font-weight: 800; }
.td-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 8px; }   /* the sheet scrolls inside itself */
.td-list .empty { font-size: 14px; }
.grp { padding: 6px 0 4px; }
.grp h3 { display: flex; align-items: center; gap: 8px; margin: 8px 4px 4px; font: 700 13px/1.3 var(--font-body); color: var(--fg); }
.grp h3 .gc { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.grp .dot, .td-list .row .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; display: inline-block; }
.td-list .row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 4px; border: 0; border-top: 1px solid var(--line-soft); background: none;
  color: var(--fg); font: 500 14px/1.3 var(--font-body); text-align: left; cursor: pointer; }
.td-list .row .dot { background: var(--faint); }
.td-list .row { flex-wrap: nowrap; justify-content: flex-start; text-decoration: none; }
.td-list .row .rt { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--fg); font-size: 14px; }
.td-list .row .rs { flex: none; color: var(--muted); font: 600 12px var(--font-body); font-variant-numeric: tabular-nums; }   /* other sides are grey */
.td-list .row.you .dot { background: var(--you); }
.td-list .row.you .rt, .td-list .row.you .rs { color: var(--you); }
.td-list .row.stuck .dot { background: var(--stuck); }
.td-list .row.stuck .rs { color: var(--stuck); }
.td-list .row.optional .rs { color: #fff; }
.td-card { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px; }
.td-card .dec { border: 0; background: none; padding: 0; }
.ceo { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: end; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--panel); }
.ceo textarea { display: block; height: 44px; max-height: 120px; resize: none; overflow-y: hidden; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--sunk); color: var(--fg); font: 500 16px/1.35 var(--font-body); }
.ceo .btn { min-height: 44px; font-size: 14px; }

/* ── event rows (Settings' last pushes) ── */
.day h3 { font: 500 .75rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }   /* Settings' Last pushes */
.ev { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 9px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.ev .tx .who { display: inline; margin-right: 6px; }
.day .ev:first-of-type { border-top: 0; }
.ev .t { font: 500 .75rem var(--font-body); font-variant-numeric: tabular-nums; color: var(--label); padding-top: 4px; }
.ev .tx { font-size: .84rem; line-height: 1.45; min-width: 0; }
.ev .tx em { font-style: normal; font: 700 .75rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin-right: 6px; }
.ev .tx em.alert { color: var(--bad); }
.ev .tx em.decision { color: var(--accent); }
.ev .tx em.check { color: var(--good); }
.ev .tx em.blocked { color: var(--warn); }
.ev .evv { display: block; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.ev .tx a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; padding: 12px 8px; }   /* inline: its 44 px to tap is padding, so it never splits the line it ends */

/* ── a page (Settings > Pages: X posts, Server, the scoreboard, Herd, Research, the market brief) ── */
.page { display: flex; flex-direction: column; gap: 12px; }
.now { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.now.warn { background: var(--warn-soft); }
.now.warn b { color: var(--warn); font-weight: 800; }
.now p { margin: 0; font-size: .84rem; line-height: 1.45; }
.qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; border-top: 1px solid var(--line-soft); padding-top: 4px; }
.qrow.top { border-top: 0; border-bottom: 1px solid var(--line-soft); padding: 0 0 4px; }
.qrow .qlink[aria-pressed="true"] { color: var(--fg); font-weight: 700; }

.qlink { min-height: 44px; border: 0; background: none; padding: 0; color: var(--muted); font: 600 .82rem var(--font-body); cursor: pointer; }
a.qlink { display: inline-flex; align-items: center; text-decoration: none; color: var(--fg); }   /* Open, in the Reply row: same height and baseline as the buttons */
.qlink.strong { margin-left: auto; color: var(--fg); font-weight: 700; }
.posts { display: flex; flex-direction: column; gap: 8px; }
.post { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.post .phd { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.post .phd b { flex: 1; min-width: 0; font-size: .84rem; }
.post .phd .st { color: var(--muted); font-size: .76rem; }
.pimg { width: 100%; height: 188px; object-fit: cover; object-position: top; border-radius: 10px; background: var(--sunk); display: block; }
.pimg-a { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 10px; cursor: zoom-in; }
dialog.viewer { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: #000; }
dialog.viewer::backdrop { background: #000; }
dialog.viewer img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-touch-callout: default; }
dialog.viewer .btn { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; background: rgba(0, 0, 0, .6); color: #fff; border-color: rgba(255, 255, 255, .4); }
dialog.viewer .vcap { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: fit-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 10px 16px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .6); color: #fff; font: 600 .82rem/1.35 var(--font-body); text-align: center; pointer-events: none; }   /* the save hint, on the image (a long-press reaches the image): a toast would sit behind the viewer */
.clamp { white-space: pre-line; font-size: .88rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.clamp.all { display: block; }
.blk { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line-soft); }
.blk pre { margin: 0; white-space: pre-wrap; font: 500 .86rem/1.5 var(--font-body); }
.blk .btn { align-self: flex-start; }
.pnote { margin: 0; color: var(--muted); font-size: .8rem; white-space: pre-line; }
.blab { color: var(--muted); font: 700 .75rem var(--font-body); }
.miss { margin: 0; color: var(--warn); font-size: .8rem; }
.prow { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--panel); }
.pline { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; padding: 0; text-align: left; display: flex; flex-direction: column; justify-content: center; cursor: pointer; }
.pline b { font-size: .84rem; }
.pline span { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.idea { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel); }
.idea .itx { display: flex; gap: 10px; align-items: flex-start; }
.idea .itx img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.idea .itx p { margin: 0; font-size: .86rem; line-height: 1.45; white-space: pre-wrap; }
.idea .ist { color: var(--muted); font-size: .76rem; }
.idea .ist.used { color: var(--good); }
.rq { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 12px; background: var(--panel); }
.rq .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rq .tx b { overflow-wrap: anywhere; font-weight: 600; font-size: .86rem; line-height: 1.3; }
.rq .tx span { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.rq .rv { flex: none; font-style: normal; font-size: .75rem; font-weight: 700; color: var(--label); }
.rq .rv.passed { color: var(--good); }
.ideaf input.grow { min-height: 48px; border-radius: 999px; padding: 0 16px; }
.photo-on { margin: 0; color: var(--muted); font-size: .78rem; }
.stiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stile { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: var(--panel); min-width: 0; }
.stile span { color: var(--muted); font: 700 .75rem var(--font-body); }
.stile b { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .86rem; overflow-wrap: break-word; }
.stile.warn b { color: var(--warn); }
.stile.bad b { color: var(--bad); }
.kv { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--panel); }
.kv span { display: block; font: 700 .75rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.kv p { margin: 2px 0 0; font-size: .86rem; line-height: 1.45; }

/* Herd's page: the 30-basket test */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.score { gap: 0; padding: 4px 16px; }   /* Trading's scoreboard: every strategy on paper */
.sc-r { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.sc-r:first-child { border-top: 0; }
.sc-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sc-hd b { font-size: .86rem; }
.sc-r p { margin: 0; }
.sc-n { font: 500 .78rem var(--font-body); font-variant-numeric: tabular-nums; }
.sc-w { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.call { flex: none; font: 700 .75rem var(--font-body); font-style: normal; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: var(--sunk); color: var(--muted); }
.call.scale { background: var(--good-soft); color: var(--good); }
.call.stop { background: var(--bad-soft); color: var(--bad); }
.sub-hd { font: 700 .75rem var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--label); display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.herd-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
@media (max-width: 560px) { .herd-top { grid-template-columns: minmax(0, 1fr); gap: 10px; } }   /* the rule text gets the full width */
.big { display: flex; align-items: baseline; gap: 6px; }
.big b { font: 700 2.6rem/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.big span { font: 600 1rem var(--font-body); font-variant-numeric: tabular-nums; color: var(--label); }
.herd-top .lbl { color: var(--muted); font-size: .78rem; margin-top: 4px; }
.verdict { display: flex; flex-direction: column; gap: 4px; }
.verdict b { font-weight: 700; font-size: .92rem; }
.verdict span { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.cells { display: flex; flex-direction: column; gap: 6px; }
.crow { display: grid; grid-template-columns: 104px minmax(0, 1fr); row-gap: 4px; column-gap: 10px; align-items: center; }
.crow .bk { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .78rem; }
.sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.crow .cl { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 3px; }
.cell { aspect-ratio: 1; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; }
.cell.pos, .cell.neg { box-shadow: none; }
.crow .sum { grid-column: 2; font: 500 .75rem var(--font-body); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.chart { position: relative; height: 230px; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .ax { fill: var(--label); font: 500 12px var(--font-body); font-variant-numeric: tabular-nums; }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .end { font: 600 12px var(--font-body); font-variant-numeric: tabular-nums; fill: var(--muted); }
.chart .cross { stroke: var(--muted); stroke-width: 1; }
.tip { position: absolute; pointer-events: none; background: var(--fg); color: var(--bg); border-radius: 8px; padding: 7px 9px; font: 500 .75rem/1.45 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; transform: translate(-50%, -100%); }
.tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.legend { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend b { font-weight: 700; }
.legend em { font: 500 .78rem var(--font-body); font-variant-numeric: tabular-nums; font-style: normal; color: var(--muted); }
.tbl-wrap summary { cursor: pointer; color: var(--muted); font-size: .78rem; font-weight: 600; width: fit-content; min-height: 44px; display: flex; align-items: center; }
.tbl { max-height: 260px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line-soft); border-radius: 10px; }
.tbl table { width: 100%; border-collapse: collapse; font: 500 .75rem var(--font-body); font-variant-numeric: tabular-nums; }
.tbl th { position: sticky; top: 0; background: var(--raised); font: 700 .75rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.tbl th, .tbl td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--line-soft); }   /* 8 a side: Montserrat's figures run wider, and Daily values still fits a 375 phone */
.tbl th:first-child, .tbl td:first-child { text-align: left; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 6px 8px 6px 16px; border-radius: 999px; font: 600 .82rem var(--font-body); z-index: 40; max-width: calc(100% - 32px); text-align: center;
  display: flex; align-items: center; gap: 10px; min-height: 40px; width: max-content; }
.toast[hidden] { display: none; }
.toast .tact { flex: none; border: 0; border-radius: 999px; background: var(--bg); color: var(--fg); font: 700 .82rem var(--font-body); min-height: 44px; padding: 0 16px; cursor: pointer; }
.toast > span { min-width: 0; overflow-wrap: anywhere; }
body[data-screen="home"] .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }   /* on Home the toast clears the bar */
.dec .hd b, .item .tx b { overflow-wrap: anywhere; }   /* a long link in a title wraps instead of widening the page */

@media (min-width: 900px) {
  .hq { padding: 12px 24px 40px; }
  .top { min-height: 64px; }
  .page { max-width: 720px; margin: 0 auto; width: 100%; }
  .toast { bottom: 24px; }
  .crow { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .crow .cl { grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; }
  .crow .sum { grid-column: auto; text-align: right; }
}

/* ── Settings, the log-in and setup pages, the server-op sheet ── */
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--fg); color: var(--bg); display: grid; place-items: center; font: 800 .8rem var(--font-display); letter-spacing: -.02em; }
.brand b { font: 800 1.02rem var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.brand span { display: block; color: var(--label); font-size: .75rem; }
.p-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.p-hd h2 { font-size: 1.02rem; font-weight: 700; }
.p-hd span { font: 600 .76rem var(--font-body); color: var(--label); white-space: nowrap; }
dialog.sheet { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--fg); padding: 18px; width: min(440px, calc(100% - 32px)); }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .6); }
dialog.sheet h3 { font: 700 1.02rem var(--font-body); margin: 0 0 6px; }
dialog.sheet p { color: var(--muted); font-size: .86rem; line-height: 1.5; margin: 0 0 12px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.field input, input.grow { font: 500 16px var(--font-body); color: var(--fg); background: var(--sunk); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
input.grow { flex: 1; min-width: 0; }
.err { color: var(--bad); font-size: .82rem; margin: 0 0 10px; }
.auth { min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 24px; }
.auth .panel { width: min(400px, 100%); }
.settings { max-width: 720px; margin: 0 auto; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 80px; display: flex; flex-direction: column; gap: 12px; }
.settings h1 { font-size: 1.6rem; font-weight: 800; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.row span { color: var(--muted); font-size: .84rem; }
.times { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.row input[type="time"] { font: 500 16px var(--font-body); color: var(--fg); background: var(--sunk); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.settings select { min-height: 44px; max-width: 190px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--sunk); color: var(--fg); font: 500 16px var(--font-body); }
.row.sub { padding-left: 14px; }
.fu { display: flex; flex-wrap: wrap; gap: 0 16px; }
.qlink.arm { color: var(--warn); }
.rf { display: flex; gap: 8px; }
.rf input { font: 500 16px var(--font-body); color: var(--fg); background: var(--sunk); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dec p.re { color: var(--label); font-size: .75rem; }
.about { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
/* Settings, HQ 3: a back arrow, switches, 44 px rows, the toast low (no tab bar here) */
.shead { display: flex; align-items: center; gap: 4px; margin-left: -10px; }
.settings .row { min-height: 44px; }
.settings input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; margin: 0; border-radius: 15px; background: var(--line); position: relative; cursor: pointer; transition: background .15s ease-out; }
.settings input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--fg); transition: transform .15s ease-out; }
.settings input[type="checkbox"]:checked { background: var(--good); }
.settings input[type="checkbox"]:checked::after { transform: translateX(20px); }
.settings ~ .toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
/* Phone feel, HQ 3: a press state on every control, hover only with a mouse, no text selection on controls */
button, a, summary, label, [role="button"] { touch-action: manipulation; }
button, .btn, .qlink, .link, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.btn, .item, .up, .qlink, .link { transition: transform 100ms ease-out, background .15s ease-out, opacity .15s ease-out; }
.btn:active, .item:active, .up:active { transform: scale(.97); }
.qlink:active, .link:active { opacity: .6; }
@media (hover: hover) and (pointer: fine) {
  .gear:hover { color: var(--fg); }
  .btn:hover { border-color: var(--fg); }
  .btn.primary:hover { opacity: .88; }
  .btn.ghost:hover { color: var(--fg); }
}
/* Markets: the market card and the briefing (the mockups the user approved, 2026-10-28) */
.hx-read { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--panel); }
.hx-read b { font-size: 1.02rem; line-height: 1.35; font-weight: 700; }
.hx-read p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.hx-tag { align-self: flex-start; font: 700 .75rem var(--font-body); color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }
.hx-at { color: var(--label); font-size: .75rem; font-weight: 600; }
.hx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hx-q { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: var(--panel); min-width: 0; }
.hx-q span { color: var(--label); font: 700 .75rem var(--font-body); }
.hx-q b { font-size: .98rem; font-weight: 800; }
.hx-q em { font-style: normal; font-size: .76rem; font-weight: 700; color: var(--muted); }
.hx-q em.hx-up { color: var(--good); }
.hx-q em.hx-dn { color: var(--bad); }
.hx-rows { padding: 4px 12px; border-radius: 12px; background: var(--panel); }
.hx-r { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.hx-r:first-child { border-top: 0; }
.hx-w { color: var(--label); font-size: .78rem; font-weight: 700; padding-top: 1px; }
.hx-w.hx-now { color: var(--accent); }
.hx-r b { font-weight: 700; font-size: .88rem; }
.hx-r p { margin: 2px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.hx-sec { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--panel); scroll-margin-top: calc(70px + env(safe-area-inset-top, 0px)); }
.hx-sec h3 { margin: 0; font-size: .98rem; font-weight: 800; }
.hx-sec ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.hx-sec li { position: relative; padding-left: 14px; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.hx-sec li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--label); }
.hx-sec li b { color: var(--fg); font-weight: 700; }
.hx-so { margin: 0; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: .86rem; font-weight: 600; }
.hx-src { color: var(--label); font-size: .75rem; line-height: 1.4; margin: 0; }


@keyframes bs-up { from { transform: translateY(24px); opacity: 0; } }

/* ── the walking office (2026-11-06, hq-f-approved): home is a page, not one screen. Top strip, health chips, then the Needs your tap rail
   and the floor (880 x 500, scaled down by room.js on a phone), the legend, the Give a job bar and the bar that opens the sheet.
   On a phone the rail comes first. Yellow (--you) means only "needs you", amber (--stuck) only failed. ── */
body[data-screen="home"] .hq { max-width: 1320px; }
body[data-screen="home"] .top { gap: 8px; }
body[data-screen="home"] .ttl { flex: 1; }
body[data-screen="home"] .clock { order: 2; padding: 0 14px; line-height: 32px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); }
body[data-screen="home"] .gear { order: 3; width: auto; height: 32px; margin: 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font: 600 12px/32px var(--font-body); display: inline-block; text-decoration: none; }
body[data-screen="home"] .gear svg { display: none; }
.gear .gt { display: none; }
body[data-screen="home"] .gear .gt { display: inline; }
body[data-screen="home"] .gear::after { content: ""; position: absolute; inset: -6px 0; }   /* a 44 px tap target round the 32 px pill */
body[data-screen="home"] .gear { position: relative; }
.clock { flex: none; color: var(--muted); font: 600 12px/1 var(--font-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.home { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; font: 600 12px/1.2 var(--font-body); padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.chip i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 6px; }
.chip.bad { color: var(--fg); border-color: var(--stuck); }
.chip.bad i { background: var(--stuck); }
.main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.main > * { min-width: 0; }
.taps { order: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.taps-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.taps-hd .btn { display: none; }
.taps h2, .det h2 { margin: 0; font: 600 12px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.taps h2 b { color: var(--muted); font-weight: 800; }
.taps h2 b.on { color: var(--you); }   /* yellow only while something needs you */
.taps-hd .btn[hidden] { display: none !important; }
#taps-l { display: flex; flex-direction: column; gap: 8px; }
.tap { border-left: 3px solid var(--you); background: var(--raised); border-radius: 8px; padding: 2px 0 2px 2px; min-width: 0; }
.tap .dec { background: none; border: 0; padding: 8px 10px; }
.tap .acts { margin-top: 2px; }
.tap .empty { padding: 8px 10px; }
/* the office (hq-v6-approved): the floor is drawn at 1100 x 780 by room.js and scaled to the column */
.room { order: 2; position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #0a0a0c; }
.det { order: 3; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.det h3 { margin: 8px 0 2px; font: 700 16px/1.3 var(--font-body); display: flex; align-items: center; gap: 8px; }
.det .st { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.det p { margin: 6px 0; color: #c9c9cf; overflow-wrap: anywhere; }
.det small { color: var(--muted); }
.det .acts { margin-top: 10px; }
.rows { order: 4; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 14px; }
.rw { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.rw.sel { border-color: #fff; }
.rw .d { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.rw b { flex: none; font-size: 13px; min-width: 60px; }
.rw .j { flex: 1; min-width: 0; color: #c9c9cf; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw .r { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.leg { order: 5; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 12px/1.4 var(--font-body); color: var(--muted); }
.leg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.leg .work { color: var(--good); }
.leg .wait { color: var(--you); }
.leg .fail { color: var(--stuck); }
.give { order: 6; display: flex; gap: 8px; }
.give input { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: 500 16px/1.2 var(--font-body); }
.give input::placeholder { color: var(--muted); }
.bar { order: 7; }
#room .stage .wall{position:absolute;left:0;top:0;width:1100px;height:130px;background:linear-gradient(#25324a,#1d2840);border-bottom:8px solid #3b2d22}
#room .stage .wall:after{content:'';position:absolute;left:0;right:0;bottom:0;height:26px;background:#222c3c}
#room .stage .floor{position:absolute;left:0;top:138px;width:1100px;height:642px;background:repeating-linear-gradient(90deg,transparent 0 178px,#0003 178px 180px),repeating-linear-gradient(0deg,#382a1d 0 46px,#352719 46px 92px),#352719}
#room .stage .rug{position:absolute;left:250px;top:330px;width:460px;height:200px;background:#15363a;border:4px solid #1f6a6a;box-shadow:inset 0 0 0 10px #112c30,inset 0 0 0 14px #1b5558;border-radius:4px}
#room .stage .rug:after{content:'';position:absolute;inset:34px;background:repeating-linear-gradient(45deg,#1b4a4e 0 8px,#15363a 8px 16px)}
#room .stage .win{position:absolute;top:16px;width:130px;height:84px;border:6px solid #2e2e36;background:linear-gradient(#18203a,#3a2a4a 80%,#5a3a4a);overflow:hidden}
#room .stage .win:after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;background:repeating-linear-gradient(90deg,#0b0c11 0 14px,#0e1017 14px 22px,#0a0b10 22px 36px)}
#room .stage .win u{animation:tw 3s steps(2) infinite;position:absolute;width:2px;height:2px;background:#cfd8ea;opacity:.7}
#room .stage .desk{position:absolute;width:132px;height:34px;background:#3a3a42;border-bottom:14px solid #2a2a30;top:176px}
#room .stage .mon{position:absolute;left:44px;top:-34px;width:46px;height:32px;background:#0b0b0d;border:3px solid #34343b}
#room .stage .on .mon{background:var(--c);box-shadow:0 0 22px 4px color-mix(in srgb,var(--c) 40%,transparent)}
#room .stage .on .mon:after{content:"";position:absolute;left:5px;top:6px;width:20px;height:2px;background:#0008;box-shadow:0 5px #0008,0 10px #0008;animation:cd 3s steps(6) infinite}
@keyframes tw{50%{opacity:.15}}
#room .stage .pool{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen}
#room .stage .str{position:absolute;top:104px;left:0;width:1100px;height:6px}
#room .stage .str i{position:absolute;top:0;width:6px;height:6px;border-radius:50%;animation:tw 2s infinite}
#room .stage .shelf{position:absolute;left:880px;top:318px;width:100px;height:96px;background:#3a2a1e;border:4px solid #4a3626}
#room .stage .shelf b{position:absolute;bottom:4px;width:8px;border-radius:1px}
#room .stage .shelf:before,#room .stage .shelf:after{content:'';position:absolute;left:0;right:0;height:4px;background:#4a3626;top:30px}
#room .stage .shelf:after{top:62px}
#room .stage .prt{position:absolute;left:810px;top:300px;width:46px;height:34px;background:#3a3a42;border-top:10px solid #4a4a54}
#room .stage .prt:after{content:'';position:absolute;left:12px;top:-20px;width:22px;height:12px;background:#f3f2ee;animation:pr 6s steps(6) infinite}
@keyframes pr{0%,70%{transform:translateY(12px);opacity:0}80%{opacity:1}100%{transform:translateY(0);opacity:1}}
#room .stage .mote{position:absolute;width:3px;height:3px;background:#fff;opacity:.25;animation:dr 14s linear infinite}
@keyframes dr{0%{transform:translate(0,0)}100%{transform:translate(40px,-120px);opacity:0}}
#room .stage .shake svg{animation:sh .12s steps(2) 5}
@keyframes sh{50%{transform:translateX(3px)}}
#room .stage .bounce svg{animation:bn .5s steps(2) 4}
@keyframes bn{50%{transform:translateY(-10px)}}
#room .stage .look .eyes{transform:translateX(3px)}
#room .stage .rack.bad i{background:var(--a)}
@keyframes cd{50%{width:26px}}
#room .stage .kb{position:absolute;left:42px;top:6px;width:46px;height:6px;background:#23232a}
#room .stage .mug{position:absolute;left:108px;top:-8px;width:8px;height:9px;background:#e8e6df}
#room .stage .plant{position:absolute;width:30px;height:46px}
#room .stage .rack{position:absolute;left:24px;top:360px;width:46px;height:78px;background:#1d1d23;border:3px solid #34343b}
#room .stage .rack i{position:absolute;left:6px;width:6px;height:4px;background:var(--g);animation:bl 1.4s steps(2) infinite}
#room .stage .rack.bad i{background:var(--a)}
@keyframes bl{50%{opacity:.2}}
#room .stage .cof{position:absolute;left:100px;top:380px;width:34px;height:58px;background:#2b2b32;border-top:10px solid #3d3d46}
#room .stage .cof:after{content:"";position:absolute;left:10px;top:20px;width:12px;height:14px;background:#0b0b0d}
#room .stage .couch{position:absolute;width:160px;height:34px;background:#2c2c34;border-bottom:12px solid #212128}
#room .stage .couch:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;background:#34343d}
#room .stage .yours{position:absolute;left:800px;top:470px;width:160px;height:50px;background:#3a3320;border:2px solid var(--y);border-bottom-width:12px;box-shadow:0 0 34px 2px #f5d76e22}
#room .stage .lamp{position:absolute;left:960px;top:440px;width:8px;height:26px;background:#5a4f2a}
#room .stage .lamp:before{content:"";position:absolute;left:-10px;top:-8px;width:28px;height:10px;background:var(--y)}
#room .stage .paper{position:absolute;width:26px;height:6px;background:#f3f2ee}
#room .stage .yl{position:absolute;left:800px;top:540px;width:160px;text-align:center;font-size:12px;font-weight:700;color:var(--y)}
#room .stage .wb{position:absolute;left:800px;top:18px;width:210px;height:78px;background:#e9e8e2;border:5px solid #44444c;color:#222;font-size:12px;font-weight:700;padding:8px 10px;line-height:1.5}
#room .stage .wb s{text-decoration:none;display:block}
#room .stage .wb em{font-style:normal;color:#b45309}
#room .stage .clk{position:absolute;left:1030px;top:28px;width:44px;height:44px;border:5px solid #44444c;border-radius:50%;background:#e9e8e2}
#room .stage .clk:before,#room .stage .clk:after{content:"";position:absolute;left:17px;background:#222}
#room .stage .clk:before{top:6px;width:3px;height:14px}
#room .stage .clk:after{top:16px;width:12px;height:3px}
#room .stage .ag{position:absolute;width:120px;height:95px;transform:translate(-50%,-88px);transition:left var(--t,2.5s) linear,top var(--t,2.5s) linear;z-index:5;cursor:pointer}
#room .stage .ag .ring{position:absolute;left:12px;top:82px;width:96px;height:16px;border-radius:50%;background:#0006}
#room .stage .ag.sel .ring{background:#ffffff30;box-shadow:0 0 0 2px #fff6}
#room .stage .ag svg{position:relative}
#room .stage .walk .l1{animation:lg .28s steps(2) infinite}
#room .stage .walk .l2{animation:lg .28s steps(2) infinite reverse}
#room .stage .walk svg{animation:hop .28s steps(2) infinite}
@keyframes lg{50%{transform:translateY(-2px)}}
@keyframes hop{50%{transform:translateY(-3px)}}
#room .stage .work svg{animation:tp .45s steps(2) infinite}
@keyframes tp{50%{transform:translateY(-2px)}}
#room .stage .eyes{transform-box:fill-box;transform-origin:center;animation:bk 4.5s infinite}
@keyframes bk{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.15)}}
#room .stage .tag{position:absolute;top:84px;left:50%;transform:translateX(-50%);min-width:132px;max-width:150px;text-align:center;font-size:12px;line-height:1.25;background:#0a0a0cee;border:1px solid var(--l);border-radius:9px;padding:4px 7px;white-space:nowrap}
#room .stage .tag i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:var(--c2)}
#room .stage .tag small{color:#a8a8b0;font-weight:500;margin-left:5px}
#room .stage .bub{position:absolute;left:50%;bottom:92px;transform:translateX(-30%);background:#fff;color:#000;font-size:12px;font-weight:700;padding:3px 8px;border-radius:9px 9px 9px 2px;white-space:nowrap;opacity:0;transition:opacity .3s;z-index:9}
#room .stage .bub.on{opacity:1}
#room .stage .zz{position:absolute;left:62px;top:-4px;font-size:12px;font-weight:700;color:#aaa;display:none;animation:zz 2s infinite}
#room .stage .sleep .zz{display:block}
@keyframes zz{0%{transform:translate(0,6px);opacity:0}50%{opacity:1}100%{transform:translate(8px,-10px);opacity:0}}
#room .stage .smoke{position:absolute;left:44px;top:6px;width:8px;height:8px;background:#888;display:none;animation:sm 2s infinite}
#room .stage .fail .smoke{display:block}
#room .stage .fail .smoke.b{animation-delay:1s;left:34px}
@keyframes sm{0%{transform:translate(0,0);opacity:.8}100%{transform:translate(10px,-30px);opacity:0}}
#room .stage .spark{position:absolute;width:4px;height:4px;background:var(--a);display:none;animation:sp .9s steps(4) infinite}
#room .stage .fail .spark{display:block}
@keyframes sp{0%{transform:translate(0,0);opacity:1}100%{transform:translate(14px,-14px);opacity:0}}
#room .stage .key{position:absolute;width:3px;height:3px;background:var(--c);display:none;animation:ky 1.1s infinite}
#room .stage .work .key{display:block}
@keyframes ky{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-22px);opacity:0}}
#room .stage .cup{position:absolute;left:70px;top:36px;width:8px;height:9px;background:#e8e6df;display:none}
#room .stage .cof_ .cup{display:block}
#room .stage .pap{position:absolute;right:-4px;top:30px;width:14px;height:18px;background:#f3f2ee;display:none}
#room .stage .carry .pap{display:block}
#room .stage .pop{position:absolute;left:50%;top:-30px;transform:translateX(-50%);font-size:12px;font-weight:700;color:var(--g);opacity:0}
#room .stage .pop.go{animation:pp 1.8s}
@keyframes pp{0%{opacity:0;transform:translate(-50%,10px)}20%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-14px)}}
#room .stage .zone{position:absolute;border-radius:6px}
#room .stage .zone.work{left:16px;top:146px;width:1068px;height:196px;background:repeating-conic-gradient(#1b2231 0 25%,#212a3b 0 50%) 0 0/40px 40px;border:3px solid #2e3a52}
#room .stage .zone.lounge{left:16px;top:392px;width:340px;height:372px;background:repeating-linear-gradient(90deg,#2d201e 0 30px,#332421 30px 60px);border:4px solid #6a4438;box-shadow:inset 0 0 0 10px #241716}
#room .stage .zone.game{left:376px;top:392px;width:380px;height:372px;background:repeating-conic-gradient(#2c1a48 0 25%,#241538 0 50%) 0 0/36px 36px;border:4px solid #7b46b8;box-shadow:0 0 40px #8b5cf62a,inset 0 0 0 8px #1b102c}
#room .stage .zone.mine{left:776px;top:392px;width:308px;height:372px;background:repeating-linear-gradient(0deg,#2e2618 0 30px,#352c1b 30px 60px);border:4px solid #7a6830;box-shadow:inset 0 0 0 10px #231d12}
#room .stage .neon{position:absolute;left:470px;top:398px;font-size:15px;font-weight:800;letter-spacing:.22em;color:#ff7aa8;text-shadow:0 0 10px #ff7aa8,0 0 22px #ff7aa8;animation:fl 4s infinite}
@keyframes fl{0%,90%,100%{opacity:1}92%{opacity:.3}94%{opacity:1}96%{opacity:.4}}
#room .stage .arc{position:absolute;width:58px;height:100px;background:#26263a;border:3px solid var(--c);box-shadow:0 0 16px var(--c)}
#room .stage .arc:before{content:"";position:absolute;left:6px;top:8px;width:40px;height:32px;background:var(--c);animation:scr .8s steps(3) infinite}
#room .stage .arc:after{content:"";position:absolute;left:6px;top:52px;width:40px;height:8px;background:#0c0c12;box-shadow:0 14px #0c0c12}
@keyframes scr{33%{background:#fff}66%{background:#222}}
#room .stage .tbl{position:absolute;left:480px;top:600px;width:180px;height:90px;background:#1d7a52;border:4px solid #0f4a32;box-shadow:0 8px 0 #0a2e20}
#room .stage .tbl:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;background:#fffb}
#room .stage .tbl:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#fff5}
#room .stage .ball{position:absolute;top:30px;left:8px;width:8px;height:8px;background:#fff;display:none;z-index:2}
#room .stage .tbl.play .ball{display:block;animation:pb 1s linear infinite alternate}
@keyframes pb{0%{left:8px;top:30px}50%{top:62px}100%{left:160px;top:30px}}
#room .stage .bean{position:absolute;width:56px;height:46px;border-radius:50% 50% 40% 40%;box-shadow:0 6px #0005}
#room .stage .tv{position:absolute;left:688px;top:430px;width:62px;height:44px;background:#0b0b0d;border:4px solid #3a3a44}
#room .stage .tv:after{content:"";position:absolute;inset:4px;background:linear-gradient(90deg,#4ade80,#6ea8ff,#c084fc);animation:scr 1.2s steps(3) infinite;opacity:.85}
#room .stage .ctab{position:absolute;left:110px;top:600px;width:130px;height:34px;background:#4a3626;border-bottom:8px solid #3a2a1e}
#room .stage .play svg{animation:bn .4s steps(2) var(--pd,0s) infinite}
#room .stage .lrug{position:absolute;left:70px;top:520px;width:250px;height:130px;background:#4a2430;border:4px solid #7a3a48;box-shadow:inset 0 0 0 8px #3a1c26}
#room .stage .lamp2{position:absolute;left:300px;top:560px;width:6px;height:70px;background:#6a5a3a}
#room .stage .lamp2:before{content:"";position:absolute;left:-12px;top:-14px;width:30px;height:16px;background:#f5d76e;box-shadow:0 0 30px 8px #f5d76e55}
#room .stage .mrug{position:absolute;left:800px;top:590px;width:240px;height:150px;background:#3a2f1c;border:4px solid #6a5a2a;opacity:.6;z-index:0}
#room .stage .yours{z-index:1}
#room .stage .paper{z-index:2}
#room .stage .grug{position:absolute;left:380px;top:520px;width:380px;height:240px;border-radius:50%;background:radial-gradient(#4b2a7a99,#2c1a4a66 60%,transparent 72%)}
#room .stage .cat{position:absolute;width:48px;height:32px;z-index:4;transition:left var(--t,3s) linear,top var(--t,3s) linear}
#room .stage .cat.mv svg{animation:hop .3s steps(2) infinite}
#room .stage .cat.flip svg{transform:scaleX(-1)}
#room .stage .lrug,#room .stage .mrug{border-radius:50%}
#room .stage .wall{background:#101013;border-bottom:6px solid #1c1c20}
#room .stage .wall:after{background:#141417}
#room .stage .floor{background:repeating-linear-gradient(90deg,transparent 0 178px,#0005 178px 180px),#131316}
#room .stage .pool,#room .stage .mote,#room .stage .grug,#room .stage .str{display:none}
#room .stage .rug,#room .stage .lrug,#room .stage .mrug{background:#17171b;border:3px solid #232329;box-shadow:none;opacity:1}
#room .stage .rug:after{display:none}
#room .stage .win{border-color:#1c1c20;background:#0c0d12}
#room .stage .win:after{background:#08080b}
#room .stage .desk{background:#1f1f24;border-bottom-color:#17171b}
#room .stage .shelf{background:#1a1a1e;border-color:#25252b}
#room .stage .shelf:before,#room .stage .shelf:after{background:#25252b}
#room .stage .prt{background:#1f1f24;border-top-color:#2a2a30}
#room .stage .on .mon{box-shadow:0 0 10px 1px color-mix(in srgb,var(--c) 25%,transparent)}
#room .stage .cof,#room .stage .couch,#room .stage .ctab,#room .stage .lamp2,#room .stage .bean,#room .stage .tv,#room .stage .prt,#room .stage .shelf,#room .stage .clk,#room .stage .arc,#room .stage .tbl,#room .stage .rack,#room .stage .cooler,#room .stage .yours,#room .stage .desk,#room .stage .wb{background:none!important;border:0!important;box-shadow:none;border-radius:0}
#room .stage .cof:before,#room .stage .cof:after,#room .stage .couch:before,#room .stage .couch:after,#room .stage .ctab:before,#room .stage .lamp2:before,#room .stage .tv:after,#room .stage .prt:after,#room .stage .shelf:before,#room .stage .shelf:after,#room .stage .clk:before,#room .stage .clk:after,#room .stage .arc:before,#room .stage .arc:after,#room .stage .tbl:before,#room .stage .tbl:after,#room .stage .mon:after,#room .stage .lamp:before{display:none!important}
#room .stage .cooler,#room .stage .cof,#room .stage .ctab,#room .stage .lamp2{position:absolute}
#room .stage .desk{width:132px;height:34px}
#room .stage .mon{position:absolute;left:44px;top:-32px;width:48px;height:24px;background:none!important;border:0!important}
#room .stage .on .mon{box-shadow:0 0 12px 2px color-mix(in srgb,var(--c) 22%,transparent)}
#room .stage .scr{transition:none}
#room .stage .on .scr{fill:var(--c)}
#room .stage .ln{animation:lnb 3s steps(3) infinite}
#room .stage .on .ln{fill:#0009}
@keyframes lnb{50%{opacity:.35}}
#room .stage .rack{width:56px;height:80px}
#room .stage .rack i{width:4px;height:4px;left:8px}
#room .stage .tbl{width:188px;height:100px}
#room .stage .ball{width:6px;height:6px;box-shadow:0 4px 0 #0005}
@keyframes pb{0%{left:10px;top:22px}50%{top:50px}100%{left:172px;top:22px}}
#room .stage .arc{width:64px;height:112px;box-shadow:0 0 20px 0 color-mix(in srgb,var(--c) 14%,transparent)}
#room .stage .ac{fill:var(--c)}
#room .stage .ac2{fill:var(--c);opacity:.4}
#room .stage .scn{fill:var(--c);animation:sf 1.2s steps(1) infinite}
@keyframes sf{0%{opacity:1}40%{opacity:.55}70%{opacity:.8}}
#room .stage .inv{animation:iv 1.6s steps(1) infinite}
@keyframes iv{0%{transform:translate(0,0)}25%{transform:translate(1px,0)}50%{transform:translate(2px,0)}75%{transform:translate(1px,0)}}
#room .stage .tvs{animation:tvc 4s steps(1) infinite}
@keyframes tvc{0%{fill:#2b4a63}33%{fill:#3d5a47}66%{fill:#5a3d63}}
#room .stage .tvm{animation:tm 1.4s steps(5) infinite alternate}
@keyframes tm{to{transform:translateX(8px)}}
#room .stage .steam{animation:stm 2.4s steps(4) infinite}
@keyframes stm{0%{transform:translateY(0);opacity:.8}100%{transform:translateY(-3px);opacity:0}}
#room .stage .out{animation:pr2 6s steps(6) infinite}
@keyframes pr2{0%,60%{transform:translateY(-3px);opacity:0}75%{opacity:1}100%{transform:translateY(0);opacity:1}}
#room .stage .lrug{left:70px;top:520px;width:250px;height:130px;border-radius:4px;border:4px solid #26262c;background:repeating-conic-gradient(#1b1b20 0 25%,#17171b 0 50%) 0 0/16px 16px;box-shadow:inset 0 0 0 4px #121215,inset 0 0 0 6px #2a2a31}
#room .stage .win:before{content:'';position:absolute;left:50%;margin-left:-2px;top:0;bottom:0;width:4px;background:#1c1c20;z-index:2}
#room .stage .win{box-shadow:0 5px 0 #17171a}
#room .stage .yours{width:200px;height:60px;box-shadow:0 0 34px 2px #f5d76e1c!important}
#room .stage .wb{color:#222}
#room .stage .glowl{position:absolute;border-radius:50%;box-shadow:0 0 36px 12px #f5d76e14}
#room .stage{--y:#f5d76e;--a:#ff9a1f;--g:#4ade80;--l:#262629;position:relative;width:1100px;height:780px;background:#0a0a0c;transform-origin:0 0;image-rendering:pixelated;font-family:var(--font-body)}
#room .stage svg{shape-rendering:crispEdges;display:block}
/* the bots: 96 x 76 (the mockup's 120 x 95 at its .8 zoom), the tag under the feet */
#room .stage .ag{width:96px;height:76px;transform:translate(-50%,-88px);padding:0;border:0;background:none;color:var(--fg);font:inherit;text-align:center}
#room .stage .ag .bot{position:absolute;left:0;top:0;display:block}
#room .stage .ag .ring{left:0;top:62px}
#room .stage .ag .zz{left:62px}
#room .stage .ag .pap{right:-4px;top:30px}
#room .stage .ag .key,#room .stage .ag .spark{pointer-events:none}
#room .stage .ag .tag{top:78px;width:142px;min-width:0;max-width:none;padding:3px 6px;font-size:12px;line-height:1.3;white-space:nowrap}
#room .stage .ag .tag b{display:inline;font-weight:700}
#room .stage .ag .tag b:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:var(--c2)}
#room .stage .ag .tag em{display:inline;font-style:normal;font-weight:500;font-size:12px;color:#a8a8b0;margin-left:5px}
#room .stage .ag .tag span{display:block;color:#c9c9cf;overflow:hidden;text-overflow:ellipsis}
#room .stage .ag.line{width:96px}
#room .stage .ag.line .tag{width:auto;display:inline-block;padding:2px 9px}
#room .stage .ag.line .tag em,#room .stage .ag.line .tag span{display:none}
#room .stage .ag.walk .tag em,#room .stage .ag.walk .tag span{display:none}
#room .stage .ag.sel .tag{border-color:#fff}
#room .stage .ag.walk .bot svg,#room .stage .ag.walk svg{animation:hop .28s steps(2) infinite}
#room .stage .ag.work svg{animation:tp .45s steps(2) infinite}
#room .stage .ag.sleep svg{animation:none}
#room .stage .ag.sleep .zz{display:block}
#room .stage .ag.cof_ .cup{display:block}
/* YOUR DESK is a button; yellow only while something waits */
#room .stage .yours{padding:0;border:0;background:none;cursor:pointer;box-shadow:none!important;font:inherit;color:inherit}
#room .stage .yours .y0,#room .stage .yours .y1{display:block;position:absolute;left:0;top:0}
#room .stage .yours .y1,#room .stage .yours.lit .y0{display:none}
#room .stage .yours.lit .y1{display:block}
#room .stage .yl{color:#8b8b92}
#room .stage .yl.lit{color:var(--y)}
#room .stage .rack i{background:var(--g)}
#room .stage .rack.bad i{background:var(--a)}
#room .stage .wb{font-size:12px}
#room .stage .wb em{color:#b45309}
@media (prefers-reduced-motion:reduce){#room .stage *{animation:none!important}#room .stage .ag,#room .stage .cat{transition:none!important}}

@media (min-width: 1000px) {
  .main { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; }
  .room { order: 0; grid-column: 1; grid-row: 1 / span 2; }
  .taps { order: 0; grid-column: 2; grid-row: 1; max-height: 560px; overflow-y: auto; }   /* the rail scrolls inside itself */
  .det { order: 0; grid-column: 2; grid-row: 2; align-self: start; }
  .rows { order: 0; grid-column: 1; grid-row: 3; grid-template-columns: 1fr 1fr; }
  .leg { order: 0; grid-column: 1; grid-row: 4; }
  .give { order: 0; grid-column: 1; grid-row: 5; }
  .bar { order: 0; grid-column: 1; grid-row: 6; }
}
@media (max-width: 380px) { body[data-screen="home"] .gear .gt { display: none; } }   /* the top strip stays one row on the narrowest phone: the gear alone */
@media (max-width: 700px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }   /* one row of chips, side-swipe inside it */
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; white-space: nowrap; }
  .taps { padding: 8px 10px; }
  .taps-hd { margin: 0 0 6px; }
  .taps-hd .btn { display: inline-flex; min-height: 44px; }
  #taps-l { gap: 6px; }
  .tap:nth-child(n+4) { display: none; }   /* a phone shows the first 3 cards; All N opens the sheet of what needs you */
  .tap { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
  .tap .dec { padding: 4px 10px; min-width: 0; width: 100%; }
  .tap .dec > :not(.hd) { display: none; }
  .tap .hd { margin: 0; min-width: 0; align-items: stretch; }
  .tap .hd b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .leg, .give { display: none; }   /* a phone shows the rail, the short floor, the list and the bar that opens Ask the CEO */
  .room { border-radius: 10px; }
  #room .stage .tag, #room .stage .bub { display: none; }   /* scaled to a strip the tags are unreadable: the list under it carries the same words */
}
  .room { border-radius: 10px; }
}
/* the sheet as a bot opens it: its bot on each heading, its crew in one compact strip, its Done under its rows; a row with no card or page: its detail card */
.grp h3 svg.face { flex: none; width: 30px; height: 21px; }
.crew { margin: 0 4px 6px; color: var(--muted); font: 500 12px/1.45 var(--font-body); }
.crew b { color: var(--fg); font-weight: 700; }
.grp h4.sub { margin: 10px 4px 2px; color: var(--muted); font: 700 12px/1.3 var(--font-body); }
.dcard { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.dcard .dc-who { margin: 0; color: var(--muted); font: 600 12px/1.3 var(--font-body); }
.dcard h3 { font: 700 16px/1.3 var(--font-body); }
.dcard p { margin: 0; overflow-wrap: anywhere; }
.dcard .btn { align-self: flex-start; }
/* Settings (PR 2): Server's tiles under its buttons; Team: each department's note and crew; Pages: every section of the old Details pages */
#tiles { margin-top: 8px; }
.t-about, .t-crew { margin: 0; padding: 0 0 8px; color: var(--muted); font: 500 12px/1.45 var(--font-body); overflow-wrap: anywhere; }
.t-about { color: var(--fg); }
.pg-d { padding: 4px 0; }
.pg-d > b { display: block; padding: 6px 0 2px; color: var(--muted); font: 700 12px/1.3 var(--font-body); }
.pg-d a.row { color: var(--fg); text-decoration: none; }