:root {
  --bg: #0a0d13;
  --panel: #121826;
  --panel-2: #182030;
  --panel-3: #1f2838;
  --border: #263042;
  --border-2: #324056;
  --text: #e7ebf3;
  --muted: #8a94a8;
  --muted-2: #5c6678;
  --red: #f0616d;
  --green: #2fb27c;
  --amber: #e7a90c;
  --blue: #5b8cff;
  --violet: #a78bfa;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 700px at 70% -10%, #131c2e 0%, var(--bg) 55%) fixed;
  color: var(--text);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }

/* ---- token gate ---- */
.gate { display: grid; place-items: center; height: 100vh; }
.gate-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; width: min(380px, 90vw); box-shadow: var(--shadow); text-align: center;
}
.gate-logo { font-weight: 800; letter-spacing: .18em; color: var(--text); font-size: 20px; }
.gate-box p { color: var(--muted); }
.gate-box input {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 9px; padding: 11px 12px; margin: 6px 0 12px;
}
.gate-box button {
  width: 100%; background: var(--blue); color: #06101f; border: 0; border-radius: 9px;
  padding: 11px; font-weight: 700;
}
.gate-box button:disabled { opacity: .4; cursor: not-allowed; }

/* ---- header ---- */
.hdr {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px; background: rgba(10,13,19,.72); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 800; letter-spacing: .16em; }
/* inside a room the mark itself is the way back: it points left in the chevron blue (owner 22.09.2026) */
.brand-back { background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 800; letter-spacing: .16em; color: inherit; padding: 0; }
.brand-back .mark { color: var(--blue); }
.brand .sub { color: var(--muted-2); font-weight: 600; letter-spacing: .08em; font-size: 11px; margin-left: 8px; text-transform: uppercase; }
.seg { display: flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.seg button { background: transparent; border: 0; border-radius: 7px; padding: 6px 16px; color: var(--muted); font-weight: 600; }
.seg button.on { background: var(--panel-3); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.areas { display: flex; gap: 3px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.areas .area { background: transparent; border: 0; border-radius: 7px; padding: 6px 18px; color: var(--muted); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.areas .area.on { background: var(--blue); color: #07101f; }
.meta {
  margin-left: auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end;
  max-width: 100%; gap: 10px; flex-wrap: wrap;
}
.pill { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; }
.pill.needs { color: #2a0c0f; background: var(--red); border-color: var(--red); }
.dot-upd { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(47,178,124,.6); animation: ping 2.4s infinite; }
.ghost { background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); padding: 5px 9px; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(47,178,124,.5);} 70%{ box-shadow: 0 0 0 7px rgba(47,178,124,0);} 100%{box-shadow:0 0 0 0 rgba(47,178,124,0);} }

/* ---- layout ---- */
main { padding: 18px; max-width: 1500px; margin: 0 auto; }
@media (max-width: 799px) {
  /* The chat rail is fixed over the foot of the page. This room lets the last line scroll clear of it.
     The 600px rule below resets padding with a shorthand, so the bottom is set again after that rule. */
  main:not(.chat) { padding-bottom: 220px; }
  /* Olivia's square sits on the right. The proposal and the Land and Send back rows stay to its left. */
  .cd-fix .cd-research, .cd-fix .cd-fix-acts { padding-right: 88px; }
  .fin-card.fin-net { padding-right: 88px; }
}
.section-title { display: flex; align-items: center; gap: 10px; margin: 22px 4px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.section-title .count { color: var(--muted-2); }

/* ---- hero: needs you ---- */
.hero { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.hero-empty { color: var(--muted-2); padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius); }
.needs-card {
  background: linear-gradient(180deg, rgba(240,97,109,.10), var(--panel)); border: 1px solid rgba(240,97,109,.4);
  border-radius: var(--radius); padding: 14px; position: relative; overflow: hidden;
}
.needs-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--red); }
.needs-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.needs-card .ttl { font-weight: 700; }
.needs-card .path { color: var(--muted); font-size: 12px; margin-top: 2px; word-break: break-all; }

/* ---- domain board ---- */
/* masonry/stacked columns (D7): CSS multicol so unequal domain heights stop leaving screen-sized voids */
/* §4 iteration 3 (2026-07-20, Jonathan): every sub-folder is its OWN top-level section on the Board —
   no shared domain umbrella. Each card carries its domain as a qualifier (name + swatch + top accent);
   the masonry lays the project sections side by side so each client's board reads at a glance. */
.projcards { columns: 320px; column-gap: 14px; }
.proj {
  background: var(--panel); border: 1px solid var(--border); border-top: 2px solid var(--border-2);
  border-radius: var(--radius); overflow: hidden; padding: 10px 14px; margin-bottom: 14px;
  break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%;
}
.proj .ph { display: flex; align-items: center; gap: 8px; margin: -10px -14px 6px; padding: 7px 14px; background: var(--panel-2); border-bottom: 1px solid var(--border); cursor: pointer; }
.proj .ph:hover .pname { color: #fff; }
.proj .ph .swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.proj .pname { font-weight: 700; font-size: 13px; }
.proj .pdom { color: var(--muted-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.proj .pcount { color: var(--muted-2); font-size: 11px; }
/* §4 freshness (2026-07-20): 7d+ board-inactivity turns the section count amber */
.proj .pcount.aged, .list .lane-h .count.aged { color: var(--amber); }
.proj .add { margin-left: auto; background: transparent; border: 1px solid var(--border-2); color: var(--muted); border-radius: 7px; width: 22px; height: 22px; line-height: 1; padding: 0; }

/* ---- sessions ---- */
.sess { display: flex; gap: 9px; align-items: flex-start; margin: 9px 0 4px; padding: 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; }
.sess .badge { flex: none; }
.sess .body { min-width: 0; flex: 1; }
.sess .stitle { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess .meta-row { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 11px; margin-top: 2px; }
.prog { height: 4px; background: var(--panel-3); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.prog > i { display: block; height: 100%; background: var(--green); }

.badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; border-radius: 999px; }
.badge.needs-you { background: var(--red); color: #2a0c0f; }
.badge.working { background: rgba(47,178,124,.16); color: var(--green); border: 1px solid rgba(47,178,124,.4); }
.badge.working .live { display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--green); margin-right: 4px; animation: ping 1.6s infinite; }
.badge.idle { background: var(--panel-3); color: var(--muted); }
.badge.lull { background: var(--panel-3); color: var(--amber); }
.badge.free { background: rgba(91,140,255,.14); color: var(--blue); border: 1px solid rgba(91,140,255,.35); }

/* ---- tasks ---- */
.task { display: flex; gap: 9px; align-items: center; padding: 5px 2px; }
.task .chk { flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-2); background: transparent; padding: 0; display: grid; place-items: center; color: transparent; }
.task .chk.done { background: var(--green); border-color: var(--green); color: #06120c; }
.task .tt { flex: 1; min-width: 0; font-size: 13px; }
/* A project card is about as narrow as a phone at every screen width (columns: 320px), so its rows wrap there too:
   the chips drop under the title instead of squeezing it to one character per line (red team, board fix 28.09.2026). */
.projcards .task { flex-wrap: wrap; }
.projcards .task .tt { min-width: 60%; }
.task.s-done .tt { color: var(--muted-2); text-decoration: line-through; }
.task .stat { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 6px; }
.stat.next { background: rgba(91,140,255,.16); color: var(--blue); }
.stat.blocked { background: rgba(240,97,109,.16); color: var(--red); }
.stat.backlog { background: var(--panel-3); color: var(--muted); }
.stat.active { background: rgba(47,178,124,.16); color: var(--green); }
.stat.dispatch { background: rgba(20,184,166,.20); color: #2dd4bf; }
/* entity chips (Admin) — Privat (private) and Greenside (corporate) never blend, so give them distinct
   hues that don't collide with the status chips (blue=next, red=blocked, green=active) */
.stat.ent { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 6px; }
.stat.ent-privat { background: rgba(167,139,250,.16); color: #a78bfa; border: 1px solid rgba(167,139,250,.35); }
.stat.ent-greenside { background: rgba(56,189,248,.14); color: #38bdf8; border: 1px solid rgba(56,189,248,.35); }
.ent-filter { align-items: center; gap: 8px; margin: 2px 0 8px; }
.ent-filter .fa-age { text-transform: uppercase; letter-spacing: .05em; font-size: 10px; }
.act { opacity: 0; background: transparent; border: 0; color: var(--muted-2); padding: 0 4px; font-size: 14px; cursor: pointer; }
.task:hover .act { opacity: 1; }
.act:hover { color: var(--text); }
.task .del { opacity: 0; background: transparent; border: 0; color: var(--muted-2); padding: 0 4px; }
.task:hover .del { opacity: 1; }
.task .note { color: var(--muted-2); font-size: 11px; }
.task.attach-open { flex-wrap: wrap; }
.task .attachchip {
  flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--amber); background: rgba(231,169,12,.10); border: 1px solid rgba(231,169,12,.32);
  padding: 2px 6px; border-radius: 6px;
}
.task .attachchip.historical-identity-changed,
.task .attachchip.manual-retired-override { color: var(--red); background: rgba(240,97,109,.10); border-color: rgba(240,97,109,.35); }
.task .attachchip.historical-retired,
.task .attachchip.closed-legacy-snapshot { color: var(--muted); background: var(--panel-3); border-color: var(--border-2); }
.task .attachchip.system { color: var(--red); background: rgba(240,97,109,.12); border-color: rgba(240,97,109,.4); }
.task.system-warning { border-color: rgba(240,97,109,.5); background: rgba(240,97,109,.06); }
.task .attachment-actions {
  flex: 1 0 calc(100% - 25px); margin-left: 25px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel-2);
}
.task .attachment-actions select {
  flex: 1 1 150px; min-width: 0; background: var(--panel-3); border: 1px solid var(--border-2);
  color: var(--text); border-radius: 7px; padding: 5px 7px; font-size: 11px;
}
.task .attachment-actions button {
  background: transparent; border: 1px solid var(--border-2); color: var(--muted);
  border-radius: 7px; padding: 5px 8px; font-size: 11px; cursor: pointer;
}
.task .attachment-actions button:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.task .attachment-actions button:disabled { opacity: .45; cursor: default; }
.task .attachment-error { flex: 1 0 100%; color: var(--red); font-size: 11px; }
.addrow { display: flex; gap: 6px; margin-top: 6px; }
.addrow input { flex: 1; background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 6px 9px; font-size: 13px; }
.addrow button { background: var(--blue); color: #06101f; border: 0; border-radius: 8px; padding: 0 12px; font-weight: 700; }

/* ---- map ---- */
.mapwrap { height: calc(100vh - 64px); width: 100%; }
.mapwrap svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.mapwrap svg:active { cursor: grabbing; }
.node-label { font-size: 11px; fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.node-label.dim { fill: var(--muted); }
.link { stroke: var(--border-2); stroke-width: 1.2px; fill: none; }
.maphint { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); color: var(--muted-2); font-size: 12px; background: var(--panel); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; }
.pulse-r { animation: pr 1.6s ease-in-out infinite; }
@keyframes pr { 0%, 100% { opacity: .85; } 50% { opacity: .12; } }

/* ---- list view ---- */
.list { max-width: 900px; margin: 0 auto; }
/* §4 (2026-07-20): List project lanes + the flat/by-project toggle */
.section-title .grptoggle { margin-left: auto; display: flex; gap: 3px; }
.section-title .grptoggle ~ .grptoggle { margin-left: 8px; }
.section-title .grptoggle button { font-size: 11px; letter-spacing: 0; text-transform: none; padding: 2px 9px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--muted-2); cursor: pointer; }
.section-title .grptoggle button.on { color: var(--text); border-color: var(--border-2); background: var(--panel-2); }
.list .lane { margin-bottom: 16px; }
.list .lane-h { display: flex; align-items: center; gap: 8px; padding: 3px 2px 7px; font-size: 12px; font-weight: 700; letter-spacing: .03em; cursor: pointer; }
.list .lane-h:hover .lw { color: #fff; }
.list .lane-h .rdot { margin-top: 0; }
.list .lane-h .lw { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .lane-h .pdom { color: var(--muted-2); font-weight: 500; font-size: 12px; }
.list .lane-h .count { color: var(--muted-2); font-weight: 500; }
.list .task { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; align-items: flex-start; }
.rdot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 4px; }
.task .ttext { cursor: text; }
.task .ttext:hover { color: #fff; }
.task .where { color: var(--muted-2); font-size: 11px; margin-bottom: 1px; letter-spacing: .02em; }
.task .tedit { width: 100%; background: var(--panel-3); border: 1px solid var(--blue); color: var(--text); border-radius: 6px; padding: 4px 7px; font-size: 13px; }

.err { position: fixed; bottom: 14px; right: 14px; background: var(--red); color: #2a0c0f; padding: 8px 12px; border-radius: 9px; font-weight: 600; }

/* ---- header quick-add + inbox pill ---- */
.hdr .addbtn { font-size: 16px; line-height: 1; padding: 4px 10px; font-weight: 700; }
.pill.inbox { color: #0a0d13; background: #94a3b8; border-color: #94a3b8; }

/* ---- filter bar ----
   THE STICKY OFFSET IS MEASURED, NOT GUESSED (22.09.2026). The 49 px here and the 45 px in the phone
   block below were the header's height when they were written; the header has been taller than that for
   a long time, so on Board and Research the filter bar scrolled up UNDER the header and was painted over
   by it — 8 of 8 widths and views covered, proven on the clean tree at 718dc34 as well as on this one
   (receipts\scroll-baseline-718dc34 and receipts\scroll-candidate). It is an old defect, not one the
   header rows introduced; what the header rows change is that the height is now VARIABLE — it moves with
   the width, with the number of subviews and with whether the usage strip has figures — so no constant
   can be right. public/js/app.js measures the header and publishes it as --hdr-h, kept current by a
   ResizeObserver. The literal in the fallback is the old value, so a browser with no script still behaves
   exactly as it did before. */
.filterbar {
  position: sticky; top: var(--hdr-h, 49px); z-index: 15;
  display: flex; gap: 8px; align-items: center;
  padding: 8px 18px; background: rgba(10,13,19,.6); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.filterbar .search {
  flex: 1; max-width: 360px; background: var(--panel-2); border: 1px solid var(--border-2);
  color: var(--text); border-radius: 8px; padding: 6px 10px; font-size: 13px;
}
.filterbar select {
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 8px; padding: 6px 8px; font-size: 12px;
}
.filterbar .ghost { padding: 5px 10px; }

/* ---- live / needs-you / stale chips (task rows + §4 section headers and lane headers) ---- */
.livechip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--green); background: rgba(47,178,124,.14); border: 1px solid rgba(47,178,124,.4);
  padding: 2px 6px; border-radius: 6px;
}
.livechip .livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: ping 1.6s infinite; }
.livechip.needs { color: #f0616d; background: rgba(240,97,109,.12); border-color: rgba(240,97,109,.45); }
.livechip.needs .livedot { background: #f0616d; }
.task .stalechip {
  flex: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-2); background: var(--panel-3); border: 1px solid var(--border-2);
  padding: 2px 6px; border-radius: 6px;
}
.classchip {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 6px;
}
.classchip.inherited {
  color: var(--muted); background: transparent; border: 1px solid var(--border-2); font-weight: 600;
}
.classchip.override {
  color: var(--text); background: var(--panel-3); border: 1px solid var(--border-2); font-weight: 800;
}
.proj .pclass {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 2px;
}
.proj .pclass-l {
  color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.proj .pclass .chips { gap: 4px; }
.proj .pclass .chip { font-size: 10px; padding: 2px 7px; }
/* a blocked card waiting on the world (blocked + future due_day) renders QUIET and is sunk to the bottom
   of its section by sinkWaiting() — quiet != gone, so it stays visible and legible on hover */
.task.waiting { opacity: .5; }
.task.waiting:hover { opacity: .9; }
.list .task.waiting { border-style: dashed; background: transparent; }
@media (max-width: 600px) {
  /* F099: a card row wraps at phone width, so its chips drop under the title instead of squeezing it to one word per line */
  .task { flex-wrap: wrap; }
  .task .tt { min-width: 60%; }
}

/* ---- modal (quick add / help) ---- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; padding-top: 16vh; background: rgba(4,7,12,.55); backdrop-filter: blur(3px); }
.modal-box { background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow); width: min(520px, 92vw); padding: 18px; }
.modal-h { font-weight: 700; }
.modal-h .hint { color: var(--muted-2); font-weight: 500; font-size: 12px; margin-left: 8px; }
.qadd-input { width: 100%; margin-top: 10px; background: var(--panel-2); border: 1px solid var(--blue); color: var(--text); border-radius: 9px; padding: 10px 12px; font-size: 14px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.modal-actions .primary { background: var(--blue); color: #06101f; border: 0; border-radius: 8px; padding: 7px 14px; font-weight: 700; }
.modal-actions .ghost { padding: 7px 12px; }
.help { color: var(--muted); line-height: 2; margin-top: 8px; }
.help b { color: var(--text); background: var(--panel-3); border: 1px solid var(--border-2); border-radius: 5px; padding: 1px 6px; margin-right: 2px; }

/* ---- Calm (bundle 3): note clamps, jq detail, timeline collapse, legend, purpose headers ---- */
.note-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.note-clamp.open { display: block; -webkit-line-clamp: none; }
/* ONE sentence on the glass (2026-07-26 spec): a card row prints the newest dated status line, capped
   in the renderer, and never the note body. One line, ellipsised — the whole note is behind the tap. */
.note-one { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-one.from-desc { font-style: italic; }
.jq-detail { }                     /* desktop: always shown */
.tl-n { color: var(--muted-2); font-size: 11px; font-weight: 700; margin-left: 4px; }
.pulse-legend { max-width: 900px; margin: 4px auto 0; color: var(--muted-2); font-size: 11px; padding: 2px; }
.tab-purpose { max-width: 720px; margin: -6px auto 10px; color: var(--muted-2); font-size: 12px; padding: 0 2px; }
.self .tab-purpose, main > .tab-purpose { margin-left: 2px; }

/* ---- pulse (right-now + today digest + timeline) ---- */
.pulse-now { max-width: 900px; margin: 0 auto 4px; color: var(--text); font-size: 15px; padding: 4px 2px; }
.pulse-now b { color: var(--green); }
.narrative { max-width: 900px; margin: 0 auto 10px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--violet); border-radius: 10px; padding: 12px 14px; line-height: 1.5; }
.narrative .toppick { margin-top: 8px; color: var(--muted); font-size: 13px; }
.digest { max-width: 900px; margin: 0 auto; }
.drow { display: flex; align-items: center; gap: 10px; padding: 7px 11px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 7px; }
.drow .rdot { margin-top: 0; }
.drow .dname { width: 130px; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow .dbar { flex: 1; height: 8px; background: var(--panel-3); border-radius: 5px; overflow: hidden; }
.drow .dbar > i { display: block; height: 100%; border-radius: 5px; }
.drow .dstat { width: 180px; text-align: right; color: var(--muted); font-size: 12px; white-space: nowrap; }
.timeline { max-width: 900px; }
.tl-day { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin: 16px 2px 8px; }
.tl-row { display: flex; align-items: center; gap: 10px; padding: 6px 11px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; margin-bottom: 5px; }
.tl-row .rdot { margin-top: 0; }
.tl-time { color: var(--muted-2); font-size: 12px; width: 46px; flex: none; font-variant-numeric: tabular-nums; }
.tl-glyph { flex: none; width: 16px; text-align: center; color: var(--muted); }
.tl-row.k-task_done .tl-glyph, .tl-row.k-ship .tl-glyph, .tl-row.k-deploy .tl-glyph { color: var(--green); }
.tl-row.k-session_await .tl-glyph { color: var(--amber); }
.tl-title { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-title .tl-sub { color: var(--muted-2); }
.tl-dom { color: var(--muted-2); font-size: 11px; flex: none; }

@media (max-width: 600px) {
  main { padding: 12px; }
  main:not(.chat) { padding-bottom: 220px; }
  .hdr { gap: 4px; padding: 6px 6px; flex-wrap: wrap; }
  .brand { font-size: 10px; letter-spacing: .06em; flex: none; }
  .brand .sub { display: none; }
  .areas { flex-wrap: nowrap; max-width: none; min-width: 0; flex: 1 1 auto; padding: 2px; gap: 0; overflow-x: auto; }
  .areas .area { flex: 0 0 auto; min-width: auto; min-height: 28px; padding: 2px 4px; font-size: 10px; letter-spacing: 0; }
  .domains { columns: 1; }
  .filterbar { top: var(--hdr-h, 45px); flex-wrap: wrap; }
  .filterbar .search { max-width: none; }
  .drow .dname { width: 90px; }
  .drow .dstat { width: auto; }
  /* the queue row collapses to title + due + Done; the why/evidence sit behind a tap */
  .jq-row .jq-detail:not(.open) { display: none; }
}

/* ============================ Self / operator capture (touch layer) ============================ */
.self { max-width: 720px; margin: 0 auto; }
.self-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.self-top .step { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; width: 34px; height: 34px; color: var(--text); font-size: 18px; line-height: 1; }
.self-top .step:disabled { opacity: .3; }
.self-date { font-weight: 600; }
.proto-badge { background: var(--panel-3); border: 1px solid var(--border-2); border-radius: 6px; padding: 2px 8px; font-size: 11px; color: var(--muted); font-weight: 700; }
.self-top .spacer { flex: 1; }
.snus-pill { background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 7px 14px; color: var(--text); font-weight: 700; min-height: 38px; }
.snus-pill.over { border-color: var(--amber); color: var(--amber); }
.note-pill { background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; color: var(--muted); min-height: 38px; }
.queued-pill { background: rgba(231,169,12,.16); border: 1px solid var(--amber); color: var(--amber); border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 700; min-height: 34px; }

.tiles6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.bigtile { background: var(--panel); border: 1px solid var(--border-2); border-radius: 12px; padding: 16px 8px; color: var(--text); font-weight: 700; font-size: 15px; min-height: 56px; }
.bigtile:active { background: var(--panel-3); }

.self-log { display: flex; flex-direction: column; }
.op-row { display: flex; gap: 9px; align-items: flex-start; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.op-time { color: var(--muted-2); font-size: 11px; width: 42px; flex: none; padding-top: 2px; }
.op-glyph { color: var(--muted); width: 16px; text-align: center; flex: none; }
.op-mid { flex: 1; min-width: 0; }
.op-sum { font-size: 13px; color: var(--text); word-break: break-word; }
.op-chips { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; align-items: center; }
.vchip { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; font-weight: 800; text-transform: uppercase; flex: none; }
.vchip.v-verified { background: rgba(47,178,124,.18); color: var(--green); }
.vchip.v-estimated { background: rgba(231,169,12,.16); color: var(--amber); }
.vchip.v-unknown { background: rgba(240,97,109,.16); color: var(--red); }
.qchip { font-size: 10px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
.pchip { font-size: 10px; color: var(--muted-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }

.sheet-wrap { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet { background: var(--panel); border: 1px solid var(--border-2); border-radius: 16px 16px 0 0; width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.sheet-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 8px; font-weight: 700; font-size: 16px; }
.sheet-x { background: transparent; border: 0; color: var(--muted); font-size: 18px; }
.sheet-body { padding: 4px 18px 12px; overflow-y: auto; }
.sheet-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 14px 0 6px; }
.sheet-save { margin: 8px 14px 14px; padding: 14px; background: var(--blue); color: #07101f; border: 0; border-radius: 12px; font-weight: 800; font-size: 15px; }
.sheet-save:disabled { opacity: .6; }
.sheet-err { color: var(--red); font-size: 12px; padding: 0 18px 4px; }
.sheet-input, .sheet-area { width: 100%; background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 10px; margin-top: 8px; }
.sheet-area { min-height: 72px; resize: vertical; }
/* ---- share capture sheet (Builds/share-capture-sheet/mockup/SHARE-SHEET-mockup.html, owner GO 03.09.2026) ----
   Rides the shared Sheet primitive; .capture-sheet is the wrapper CaptureSheet renders around it, so the
   bigger title, bigger Capture button and rounder top belong to this sheet alone. Colours and fonts are
   the existing Atlas ones. */
.capture-sheet .sheet { border-radius: 20px 20px 0 0; }
.capture-sheet .sheet-h { font-size: 18px; padding: 18px 18px 6px; }
.capture-sheet .sheet-save { font-size: 17px; padding: 16px; margin: 12px 14px 16px; }
.capture-sheet .capture-url { font-size: 16px; padding: 12px; border-radius: 12px; }
/* the link as a card: host + kind on one line, the URL trimmed to one line under it */
.linkcard { margin-top: 6px; min-width: 0; background: var(--panel-3); border: 1px solid var(--border-2); border-radius: 12px; padding: 12px 14px; }
.lc-host { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.lc-kind { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
.lc-url { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.lc-edit { margin-top: 6px; background: transparent; border: 0; color: var(--blue); font-size: 12.5px; padding: 0; min-height: 28px; }
.capture-l { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 14px 0 6px; }
/* a real multi-line note: 16px text, four lines tall at rest, growing with the text (field-sizing where
   the browser has it; the rows attribute and resize handle carry the rest) */
.capture-note { min-height: 132px; margin-top: 0; font-family: inherit; font-size: 16px; line-height: 1.4; padding: 12px; border-radius: 12px; field-sizing: content; }
.capture-chips { gap: 8px; }
.capture-chips .chip { font-size: 14px; padding: 8px 14px; }
.capture-chips .chip:disabled { opacity: .35; cursor: default; }
.capture-sel { width: 100%; margin-top: 8px; font-size: 15px; padding: 11px 12px; background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text); border-radius: 12px; }
.capture-hint { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
/* Research intake line: the one sentence that replaced the domain and project question
   (owner ask 21.09.2026). It sits where "Belongs to" stood, in the same type as the hint. */
.capture-where { color: var(--text); font-size: 13.5px; line-height: 1.45; margin-top: 12px; padding: 10px 12px; background: var(--panel-3); border: 1px solid var(--border-2); border-radius: 12px; }
.mini-input { width: 56px; margin-left: 6px; text-align: center; background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 8px; }

.frow { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.frow > label { width: 92px; flex: none; color: var(--muted); font-size: 13px; }
.frow.togs { gap: 8px; }
.sl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 12px 0 5px; }
.more-btn { background: transparent; border: 1px dashed var(--border-2); color: var(--muted); border-radius: 8px; padding: 8px 12px; margin: 6px 0; font-size: 12px; }

.rdots { display: flex; gap: 3px; flex-wrap: wrap; }
.rdots.carried { opacity: .5; }
.rdot-btn { width: 28px; height: 32px; border-radius: 7px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted-2); font-size: 12px; font-weight: 700; }
.rdot-btn.on { background: var(--blue); border-color: var(--blue); color: #07101f; }

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text); font-size: 18px; line-height: 1; }
.stepper input { width: 60px; height: 36px; text-align: center; background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; }
.stepper .su { color: var(--muted); font-size: 12px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--panel-2); border: 1px solid var(--border-2); color: var(--muted); border-radius: 999px; padding: 7px 12px; font-size: 13px; min-height: 36px; }
.chip.on { background: var(--blue); border-color: var(--blue); color: #07101f; font-weight: 700; }
.chip.off { border-style: dashed; color: var(--amber); }

.toggle { display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2); border: 1px solid var(--border-2); color: var(--muted); border-radius: 999px; padding: 7px 12px; font-size: 12px; min-height: 36px; }
.toggle .tg-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--border-2); }
.toggle.on { color: var(--text); border-color: var(--green); }
.toggle.on .tg-dot { background: var(--green); }

.dose-grp { margin: 10px 0 4px; }
.dose-grp-h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.stackbtn { background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.tilegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.dtile { position: relative; text-align: left; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 11px; color: var(--text); display: flex; flex-direction: column; gap: 2px; min-height: 52px; }
.dtile:active { background: var(--panel-3); }
.dtile.taken { border-color: var(--green); }
.dtile.other { align-items: center; justify-content: center; color: var(--muted); border-style: dashed; }
.dt-l { font-weight: 600; font-size: 13px; }
.dt-d { font-size: 11px; color: var(--muted); }
.dt-chk { position: absolute; top: 7px; right: 9px; color: var(--green); }

.food-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.food-item { background: var(--panel-3); border: 1px solid var(--border-2); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.food-item.off { border-color: var(--amber); color: var(--amber); }
.food-item button { background: transparent; border: 0; color: var(--muted); }

.setrow { display: flex; align-items: center; gap: 6px; margin: 7px 0; flex-wrap: wrap; }
.set-ex { width: 80px; flex: none; font-size: 13px; }
.set-x { background: transparent; border: 0; color: var(--muted-2); }

@media (max-width: 600px) {
  .hdr { flex-wrap: wrap; }
  .meta { flex: none; flex-wrap: nowrap; gap: 3px; margin-left: 0; }
  .meta button { min-width: 26px; min-height: 26px; padding: 0; }
  .meta .pill { display: none; }
  .meta .dot-upd { display: none; }
  .psw { width: 26px; padding: 0; font-size: 0; gap: 0; justify-content: center; }
  .psw .psw-dot { margin: 0; }
  .seg { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; flex: 1 1 100%; order: 3; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }   /* keep scrollability, hide the permanent track (item 16) */
  .seg button { min-height: 44px; padding: 6px 11px; white-space: nowrap; }
  .tiles6 { grid-template-columns: repeat(2, 1fr); }
  .rdot-btn { width: 27px; }
}

/* edit/delete + confirmation toast */
.self-hint { color: var(--muted-2); font-size: 11px; margin: 0 4px 7px; }
.op-row { cursor: pointer; }
.op-row:active { background: var(--panel-2); }
/* 22px (29.09.2026, was 999px): a one-line toast is the same pill, as the radius clamps to half its height; an answer
   that wraps on a phone (the Pay receipts) becomes a rounded box instead of a circle that cuts its first and last words */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--green); color: #06120c; font-weight: 800; padding: 11px 18px; border-radius: 22px; box-shadow: var(--shadow); z-index: 60; font-size: 13px; max-width: 90vw; }
/* a refusal or error is never shown in the success green (Pay, 29.09.2026): the page's danger token, as .err */
.toast.toast-error { background: var(--red); color: #2a0c0f; }
.edit-sum { margin-bottom: 10px; color: var(--text); }
.edit-hint { color: var(--muted-2); font-size: 11px; margin: 8px 0 0; }
.del-btn { width: 100%; margin-top: 14px; padding: 12px; background: transparent; border: 1px solid var(--red); color: var(--red); border-radius: 10px; font-weight: 700; }
.set-ex-input { width: 84px; flex: none; background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text); border-radius: 6px; padding: 7px; font-size: 12px; }

/* trends charts */
.trend-sec { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.trend-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.trend-h span { color: var(--muted); font-size: 11px; font-weight: 500; text-align: right; }
.spark { width: 100%; height: 72px; display: block; }
.chart-target { stroke: var(--muted-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-empty { color: var(--muted-2); font-size: 12px; padding: 18px 0; text-align: center; }
.legend { display: flex; gap: 12px; margin-top: 7px; }
.legend .leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.legend .leg i { width: 11px; height: 3px; border-radius: 2px; display: inline-block; }
.trend-note { color: var(--muted-2); font-size: 11px; margin: 2px 4px 24px; line-height: 1.4; }

/* bloodwork */
.bw-new { width: 100%; margin-bottom: 12px; }
.bw-row { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.bw-analyte { flex: 1; min-width: 0; background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 9px; }
.bw-val { width: 72px; flex: none; background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 9px; text-align: center; }
.bw-unit { width: 66px; flex: none; background: var(--panel-3); border: 1px solid var(--border-2); color: var(--muted); border-radius: 8px; padding: 9px; }
.bw-analytes { padding: 4px 0 10px 26px; }
.bw-arow { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.bw-flag.high { color: var(--red); font-weight: 600; }
.bw-flag.low { color: var(--blue); font-weight: 600; }
.bw-flag.normal { color: var(--green); }

/* protocol */
.proto-cur { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.proto-curv b { font-size: 18px; }
.proto-curv span { color: var(--muted); font-size: 12px; }
.proto-hist { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.proto-hist .pchip.on { background: var(--blue); color: #07101f; border-color: var(--blue); }
.proto-grp { margin-bottom: 14px; }
.proto-grp-h { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px; }

/* review */
.rev-cov { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.rev-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.rev-row .rl { color: var(--text); font-size: 14px; }
.rev-row .rv { font-weight: 700; font-size: 15px; text-align: right; }
.rev-row .rs { color: var(--muted-2); font-size: 11px; margin-left: 6px; font-weight: 400; }

/* insights (observations) */
.obs { padding: 10px 2px; border-bottom: 1px solid var(--border); }
.obs.muted { opacity: .58; }
.obs-t { font-size: 13px; line-height: 1.45; }
.obs-i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--border-2); background: transparent; color: var(--muted); font-size: 10px; font-style: italic; vertical-align: middle; cursor: pointer; }
.obs-c { margin-top: 6px; font-size: 11px; color: var(--muted-2); line-height: 1.45; border-left: 2px solid var(--border-2); padding-left: 9px; }
.time-input { background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.when { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.when .sl { margin: 0; }
.snus-edit { background: var(--panel-2); border: 1px solid var(--border-2); color: var(--muted); border-radius: 999px; min-width: 34px; min-height: 38px; font-size: 16px; line-height: 1; }

/* ---- Money area (v2 Phase 1): two ledgers side by side, dark-over-wrong states ---- */
.fin-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.fin-card.sweep-due { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.fin-h { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.fin-state { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--muted); }
.fin-state.s-ok { color: var(--green, #2fb27c); border-color: rgba(47,178,124,.5); }
.fin-state.s-incomplete, .fin-state.s-stale, .fin-state.s-gap, .fin-state.s-est, .fin-state.s-crossing { color: #e7a90c; border-color: rgba(231,169,12,.5); }
/* Walk movements (replaces the runway sparkline, Jonathan 07-07): dated deltas + running balance */
.walk-moves { margin: 8px 0 10px; }
.wm-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px; border-bottom: 1px solid var(--border); font-size: 13px; font-variant-numeric: tabular-nums; }
.wm-row:last-child { border-bottom: 0; }
.wm-day { color: var(--muted); flex: none; width: 44px; }
.wm-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-delta { flex: none; color: var(--muted); }
.wm-bal { flex: none; font-weight: 700; }
.wm-row.under .wm-bal { color: #f0616d; }
.wm-row.exp { opacity: .62; }
@media (max-width: 700px) { .wm-what { white-space: normal; } }
/* Plan sub-sections: recurring / one-off dividers + month headers (D2 registry-dump fix) */
.plan-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 12px 2px 4px; }
.plan-sub .fa-age { text-transform: none; letter-spacing: 0; }
.plan-month { font-size: 11px; color: var(--muted-2); margin: 8px 2px 2px; font-variant-numeric: tabular-nums; }
/* Plan's folded line (29.09.2026): the bills he marked already paid or not his, still open in Fiken, behind one line
   that opens them. A plain full-width text button that wraps at any width. */
.plan-fold { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; line-height: 1.4; padding: 4px 2px; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.plan-fold:hover { color: var(--text); }
.plan-fold:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.plan-settled .fin-acct:first-of-type { margin-top: 6px; }
.fin-dark { border: 1px dashed var(--border-2); border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; }
.fin-dark-t { color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.fin-reason { color: #e7a90c; font-size: 13px; padding: 2px 0; }
.fin-big { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.fin-asof { color: var(--muted-2); font-size: 11px; margin: 2px 0 8px; }
.fin-asof.amber { color: #e7a90c; }
.fin-cross { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; margin-bottom: 8px; }
.fin-cross span { color: var(--muted); font-size: 11px; }
.fin-exp { color: #a78bfa !important; }
.fin-accts { margin-top: 8px; }
.fin-acct { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-top: 1px solid var(--border); font-size: 13px; }
.fin-acct .fa-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-acct .fa-amt { font-weight: 700; white-space: nowrap; }
.fin-acct .fa-amt.none { color: #e7a90c; font-weight: 500; font-size: 11px; }
.fin-acct .fa-age { color: var(--muted-2); font-size: 11px; white-space: nowrap; }
/* mobile pass (item 16): labels survive at all widths — wrap the row, give the label the whole
   first line, chips flow under. Fixes D3 (Plan labels vanishing) + reflows Cases/Money rows.
   It sits AFTER the base .fin-acct rules above on purpose (27.09.2026): inside the early 600px block
   the base .fa-label rule, same specificity and later, won at every width, so on a phone the label
   kept flex: 1 and nowrap and shrank to 2px (FINDINGS-PHONE row 6; Astra's rendered HOLD). */
@media (max-width: 600px) {
  .fin-acct { flex-wrap: wrap; }
  .fin-acct .fa-label { flex: 1 1 100%; white-space: normal; overflow: visible; }
  .fin-h { flex-wrap: wrap; }
}
/* Wider screens (B14, 27.09.2026): a crowded row (Pay, Open in Fiken, marks and chips) moves its controls to a
   second line before it squeezes the name away; the name keeps at least 14rem, so two bills from one supplier
   stay apart ("H…" at 1440 in the batch C rendered check). A row whose parts fit stays on one line. The name's own
   width decides the break (29.09.2026: "Bilma Regnskap og Rådgivning AS · 695-2026-09…" was cut at 1440 with 14rem as
   the basis), so a long name keeps its whole line and only a name wider than the row is cut. */
@media (min-width: 601px) {
  .fin-acct { flex-wrap: wrap; }
  .fin-acct .fa-label { flex: 1 1 auto; min-width: min(14rem, 100%); max-width: 100%; }
}

/* ---- Money Calendar (default Money sub-tab): liquidity as a month/year grid, all cells from the walk ---- */
.cal-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.money-press { cursor: pointer; }
.money-press:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.rk .money-press:focus-visible { outline-offset: -2px; }
.cal-ents { display: flex; gap: 6px; margin: 0 2px 10px; }
.cal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 2px 12px; }
.cal-tabs { display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.cal-tab { background: transparent; border: 0; border-radius: 7px; padding: 5px 12px; color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
.cal-tab.on { background: var(--panel-3); color: var(--text); }
.cal-tab.zoom { color: var(--muted-2); }
.cal-ctrls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cal-next { font-variant-numeric: tabular-nums; }
.cal-title { font-size: 15px; font-weight: 700; margin: 2px 2px 8px; text-transform: capitalize; }
.cal-projtag { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); border: 1px dashed rgba(231,169,12,.5); border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.cal-summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin: 0 2px 6px; }
.cal-summary .neg { color: var(--red); }
.cal-summary .cal-exp { color: #a78bfa; }
.cal-shortfall { font-size: 13px; font-weight: 700; color: var(--red); background: rgba(240,97,109,.08); border: 1px solid rgba(240,97,109,.3); border-radius: 8px; padding: 7px 10px; margin: 0 2px 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); text-align: left; padding: 0 4px 2px; }
.cal-wd.weekend { color: var(--muted); }
.cal-cell { min-height: 62px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 5px; font-size: 12px; overflow: hidden; cursor: pointer; }
.cal-cell.blank { background: transparent; border-color: transparent; cursor: default; }
.cal-cell.weekend { background: rgba(255,255,255,.015); }
.cal-cell.past { opacity: .42; cursor: pointer; }
.cal-cell.today { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.cal-cell.red { border-color: rgba(240,97,109,.55); background: rgba(240,97,109,.07); }
.cal-cell.cross { border-color: var(--red); box-shadow: inset 2px 0 0 var(--red); }
.cal-cell.hl { outline: 2px solid var(--amber); outline-offset: 1px; }
.cal-cell:hover { border-color: var(--border-2); }
.cal-date { font-weight: 700; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 3px; }
.cal-x { color: var(--red); font-size: 10px; }
.cal-anchor { font-size: 9px; margin-left: auto; }
.cal-anchor.verified { color: var(--green); }
.cal-anchor.estimated { color: var(--amber); }
.cal-move { color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cal-move-amt { color: var(--muted-2); }
.cal-bal { font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; margin-top: 1px; }
.cal-bal.red { color: var(--red); }
.cal-bal.dim { color: var(--muted-2); font-weight: 500; }
.cal-cell .cal-exp { color: #a78bfa; font-size: 10.5px; font-variant-numeric: tabular-nums; }
/* year layer */
.cal-year { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cal-mcell { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; cursor: pointer; font-variant-numeric: tabular-nums; }
.cal-mcell:hover { border-color: var(--border-2); }
.cal-mcell.proj { border-style: dashed; }
.cal-mcell.red { border-color: rgba(240,97,109,.5); background: rgba(240,97,109,.05); }
.cal-mcell-h { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.cal-mcell-h b { text-transform: capitalize; }
.cal-mrow { display: flex; gap: 10px; font-size: 12px; color: var(--muted); }
.cal-mrow .in { color: var(--green); }
.cal-mrow .out { color: var(--muted); }
.cal-mnet { font-size: 12.5px; font-weight: 600; margin: 2px 0; }
.cal-mnet.neg { color: var(--red); }
.cal-meom { font-size: 12px; font-weight: 700; }
.cal-meom.red { color: var(--red); }
.cal-meom .cal-exp, .cal-mlow .cal-exp { color: #a78bfa; font-weight: 500; }
.cal-mlow { font-size: 11px; color: var(--muted-2); margin-top: 1px; }
.cal-mlow.red { color: var(--red); }
.cal-mred { font-size: 11px; color: var(--red); font-weight: 600; margin-top: 2px; }
.cal-annual { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 8px; }
.cal-annual-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.cal-atag { font-size: 11px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.cal-atag.out { color: var(--muted); }
.cal-atag.in { color: var(--green); border-color: rgba(47,178,124,.3); }
.cal-annual-net { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
/* day sheet extras */
.cal-recur { color: var(--violet); font-size: 12px; }
.cal-ds-bal { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; padding: 4px 0 8px; }
.cal-ds-item { cursor: pointer; }
.cal-ds-add { margin-top: 10px; }
/* ---- Regneark (sheet) layout: the likviditetsbudsjett matrix under the kalender|regneark toggle ---- */
/* The Calendar view lifts main's 1500px cap so the sheet can use the full viewport width (higher
   specificity than .self's 720px). The kalender grid self-constrains via .cal-narrow; only the
   regneark table (.rk-wrap) spans full width, scrolling inside its own container — never the page. */
main.money-cal-wide { max-width: 100%; }
.cal-narrow { max-width: 1100px; margin: 0 auto; }
.cal-seg { display: inline-flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.cal-segbtn { background: transparent; border: 0; border-radius: 7px; padding: 4px 11px; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: capitalize; cursor: pointer; }
.cal-segbtn.on { background: var(--panel-3); color: var(--text); }
.rk-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; }
.rk { border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk th, .rk td { padding: 4px 7px; text-align: right; border-bottom: 1px solid var(--border); border-right: 1px solid rgba(255,255,255,.03); }
.rk thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 11px; vertical-align: bottom; }
.rk .rk-wd { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); font-weight: 500; }
/* sticky first column (post names) — ~220px, stays put on horizontal scroll */
.rk .rk-name { position: sticky; left: 0; z-index: 2; width: 220px; min-width: 220px; max-width: 220px; text-align: left; background: var(--panel); white-space: normal; overflow: hidden; text-overflow: ellipsis; }
.rk thead th.rk-name, .rk thead th.rk-corner { z-index: 3; background: var(--panel-2); }
.rk tbody .rk-name { cursor: pointer; }
.rk tbody .rk-row .rk-name:hover { color: var(--blue); }
.rk .rk-day, .rk .rk-mon { min-width: 40px; cursor: pointer; }
.rk .rk-mon { min-width: 62px; }
.rk .rk-day.weekend { background: rgba(255,255,255,.02); }
.rk .rk-day.today { box-shadow: inset 0 0 0 1px var(--blue); }
.rk td.rk-day.today, .rk th.rk-day.today { background: rgba(91,140,255,.08); }
.rk .rk-day.past { color: var(--muted-2); }
.rk .rk-mon.proj { color: var(--muted-2); }
.rk thead th.rk-mon.proj { border-style: dashed; color: var(--amber); }
.rk .rk-forfalt { min-width: 60px; color: #d98a92; background: rgba(240,97,109,.04); font-size: 11px; }
.rk .rk-sum { min-width: 90px; font-weight: 700; border-left: 1px solid var(--border); }
.rk td.has { color: var(--text); }
.rk .rk-sec td { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); font-weight: 700; background: var(--panel-2); padding: 5px 9px; }
.rk .rk-thin td { text-align: left; color: var(--muted-2); font-size: 11px; font-style: italic; padding: 6px 9px; }
.rk .rk-sub td { font-weight: 600; color: var(--muted); border-top: 1px solid var(--border); }
.rk .rk-sub .rk-name { color: var(--muted); }
.rk .rk-row.exp td { color: var(--muted-2); }
.rk .rk-row.exp .rk-name { color: var(--muted-2); font-style: italic; }
.rk .rk-recur { color: var(--violet); }
.rk .rk-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: #a78bfa; border: 1px solid rgba(167,139,250,.35); border-radius: 4px; padding: 0 4px; }
.rk .rk-netto td { border-top: 2px solid var(--border-2); font-weight: 600; color: var(--muted); }
.rk .rk-netto td.neg { color: var(--red); }
.rk .rk-saldo td { font-weight: 700; }
.rk .rk-saldo td.red { color: var(--red); }
.rk .rk-saldo td.cross { box-shadow: inset 2px 0 0 var(--red); }
.rk .rk-saldo.exp td { font-weight: 500; color: #a78bfa; }
.rk .rk-netto .rk-name, .rk .rk-saldo .rk-name { background: var(--panel); }
@media (max-width: 600px) {
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 46px; padding: 3px 4px; }
  .cal-cell .cal-move, .cal-cell .cal-exp { display: none; }   /* mobile = slim day-chips: date + balance color; movements via the day sheet */
  .cal-bal { font-size: 11px; }
  .cal-year { grid-template-columns: 1fr; }                    /* 12 stacked month rows */
  .cal-ctrls { margin-left: 0; }
  .rk .rk-name { width: 130px; min-width: 130px; max-width: 130px; }  /* sticky first column stays; day columns keep ≥34px tap targets */
  .rk .rk-day { min-width: 36px; }
  .rk th, .rk td { padding: 4px 5px; }
}

/* ---- Focus (bundle 2): collapsible groups, primary approve, filter chips, purpose header ---- */
.case-group, .jq-life-h { display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 9px 10px; margin: 8px 0 4px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 9px; font-size: 13px; user-select: none; }
.case-group:hover, .jq-life-h:hover { border-color: var(--border-2); }
.cg-caret { color: var(--muted-2); flex: none; width: 12px; }
.cg-label { font-weight: 700; }
.case-group .count, .jq-life-h .count { color: var(--muted-2); }
.cg-ents { margin-left: auto; color: var(--muted-2); font-size: 11px; }
.jq-lane-h { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 2px 2px 6px; }
.jq-life-h { color: var(--muted); }
/* approve is the most important human act — primary fill */
.chip.approve { background: var(--green); border-color: var(--green); color: #06120c; font-weight: 800; }
.chip.approve:disabled { opacity: .55; }
/* Approve letter bodies collapse to 2 lines until tapped */
.draft-body { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.draft-body.open { display: block; -webkit-line-clamp: none; max-height: 320px; overflow-y: auto; }
/* The letter Approve's "Les brevet" link brought him to (walk item 5a). A left edge, nothing more:
   he already knows which letter he asked for, so this only has to answer "is this the one". */
.fin-card.brev-landed { border-left: 3px solid var(--blue); }
/* Work filter chips (Privat / Atlas-only) sit inline in the filter bar */
.filterbar .chip.flt { min-height: 0; padding: 5px 12px; font-size: 12px; }
.filterbar .chip.flt:disabled { opacity: .4; }
/* one-line purpose header per tab (language pass) */
.section-title.purpose .count { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* ---- Kill (bundle 4): Value consolidation table + Trash footer link ---- */
.val-proj { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.val-proj:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.val-proj-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.val-proj-h b { flex: none; }
.val-proj-h .fin-asof { margin: 0; }
.val-proj-h .chip { margin-left: auto; }
.val-row .fa-label { white-space: normal; overflow: visible; }  /* un-truncate deal labels (D13) */
.list-footer { max-width: 900px; margin: 18px auto 8px; text-align: center; }
.list-footer .ghost { color: var(--muted-2); }

/* ---- Standing orders (Command Channel uplink, v2 Phase 2) ---- */
.orders { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.order-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.order-row .order-text { flex: 1; min-width: 0; font-weight: 600; }
.order-row .order-meta { color: var(--muted-2); font-size: 11px; white-space: nowrap; }
.order-add { display: flex; gap: 6px; padding-top: 8px; }
.order-add input { flex: 1; min-width: 0; }
.order-msg { color: #e7a90c; font-size: 11px; padding-top: 6px; }
.duechip { font-size: 10px; font-weight: 700; color: #e7a90c; border: 1px solid rgba(231,169,12,.45); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.duechip.overdue { color: var(--red); border-color: rgba(240,97,109,.45); background: rgba(240,97,109,.10); }
.valchip { font-size: 10px; font-weight: 700; color: #2fb27c; border: 1px solid rgba(47,178,124,.45); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }

/* ---- Conflict Strip (lane N, plan 6.3) ---- */
.conflict-strip { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.conflict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-left: 3px solid #e0a106; background: rgba(224,161,6,.06); border-radius: 4px; font-size: 13px; }
.conflict.k-stim-deadline { border-left-color: #e5484d; background: rgba(229,72,77,.06); }
.conflict.acked { opacity: .5; border-left-color: #64748b; background: transparent; }
.conflict.stub { border-left-color: #64748b; background: transparent; color: var(--muted, #64748b); }
.cf-verb { font-weight: 600; text-transform: none; }
.cf-work { font-weight: 500; }
.cf-self { color: var(--muted, #64748b); }
.cf-ack { margin-left: auto; padding: 2px 10px; border: 1px solid currentColor; border-radius: 4px; background: none; cursor: pointer; font-size: 12px; }
.cf-muted { margin-left: auto; font-size: 12px; opacity: .7; }
.cf-beat { font-size: 11px; color: var(--muted, #64748b); opacity: .8; padding-left: 2px; }

/* ---- Ghost-material strip (proactive layer; docs/GHOST-TRIGGER-DESIGN-2026-07-07.md) ---- */
.ghost-strip .conflict.k-t3 { border-left-color: #14b8a6; background: rgba(20,184,166,.06); }
.ghost-strip .conflict.k-t4 { border-left-color: #e0a106; background: rgba(224,161,6,.06); }
.ghost-strip.material .conflict:not(.stub):not(.acked) { box-shadow: inset 2px 0 0 currentColor; }
.gm-detail { flex-basis: 100%; margin: 4px 0 0; padding-left: 2px; font-size: 12px; color: var(--muted, #64748b); display: flex; flex-direction: column; gap: 2px; }
.cf-beat.gm-stale { color: #e0a106; opacity: 1; }

/* ---- The Debt Wall (Admin > Wall; migration 022) ---- */
.wall-bar { display: flex; width: 100%; height: 30px; border-radius: 7px; overflow: hidden; background: var(--panel-3); border: 1px solid var(--border); }
.wall-seg { height: 100%; min-width: 2px; transition: width .3s ease; }
.wall-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 12px; }
.wall-leg { display: flex; align-items: baseline; gap: 7px; font-size: 12px; }
.wall-leg i { flex: none; width: 10px; height: 10px; border-radius: 2px; transform: translateY(1px); }
.wall-leg-l { font-weight: 700; letter-spacing: .04em; color: var(--text); }
.wall-leg-v { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.wall-leg.empty { opacity: .45; }
.wall-leg.fog .wall-leg-l { color: var(--muted); }
.wall-kl { display: block; margin: 8px 0 6px; }
.wall-gated .fin-reason { color: var(--muted); }
.wall-mom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wall-tile { padding: 4px 2px; border-left: 2px solid var(--border-2); padding-left: 10px; }
.wall-tile-h { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); margin-bottom: 3px; }
.wall-tile-v { font-weight: 700; color: var(--text); font-size: 13px; line-height: 1.25; }
.wall-cat { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.wall-cat-l { flex: none; width: 92px; font-size: 12px; color: var(--text); text-align: right; }
.wall-cat-bar { flex: 1; height: 12px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.wall-cat-fill { height: 100%; background: #475569; border-radius: 3px; position: relative; min-width: 2px; }
.wall-cat-dead { height: 100%; background: #2f9e6e; border-radius: 3px 0 0 3px; }
.wall-cat-v { flex: none; width: 76px; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.wall-foot { margin: 14px 4px 4px; font-size: 11px; color: var(--muted-2); letter-spacing: .02em; }
@media (max-width: 560px) { .wall-legend { grid-template-columns: 1fr; } .wall-mom { grid-template-columns: 1fr; gap: 8px; } }

/* ================= Card detail overlay (owner-approved mockup, 2026-07-25) =================
   Closed cards keep today's narrow board size and look. Only the OPENED card is lifted into a
   centered near-full-view overlay over the dimmed board. Built only from the tokens above: the
   grey-on-black fix is that --muted is demoted to LABELS ONLY — every line a human reads is
   --text or #fff. */
.ovl { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 22px; }
.ovl-scrim { position: absolute; inset: 0; background: rgba(4,7,12,.66); backdrop-filter: blur(2.5px); }
.cd {
  position: relative; z-index: 1;
  width: min(1000px, 94%); max-height: 94%;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(91,140,255,.10);
  overflow: hidden;
}
.cd::before { content:""; position:absolute; left:0; top:0; right:0; height:3px; background: var(--accent, var(--blue)); }

/* header bar */
.cd-hd {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 16px 12px; background: var(--panel-2); border-bottom: 1px solid var(--border);
}
.cd-hd .swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
/* the board scopes its status chip to .task .stat; the overlay header needs the same base */
.cd-hd .stat { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 6px; }
.cd-crumb { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: .02em; }
.cd-crumb .dim { color: var(--muted); font-weight: 500; }
.cd-idchip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .01em;
  color: var(--text); background: var(--panel-3); border: 1px solid var(--border-2);
  border-radius: 6px; padding: 2px 7px; cursor: pointer;
}
.cd-idchip:hover { border-color: var(--blue); color: #fff; }
.cd-idchip.copied { border-color: var(--green); color: var(--green); }
.cd-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; }
.cd-nav button { background: transparent; border: 1px solid var(--border-2); color: var(--muted); border-radius: 7px; width: 24px; height: 24px; line-height: 1; padding: 0; }
.cd-nav button:hover { color: #fff; border-color: var(--muted); }
.cd-nav button:disabled { opacity: .35; cursor: default; }
/* nav + close travel together, so a wrapped phone header keeps them on one right-aligned line */
.cd-hdact { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cd-x { background: transparent; border: 1px solid var(--border-2); color: var(--muted); border-radius: 7px; width: 26px; height: 26px; line-height: 1; padding: 0; font-size: 13px; }
.cd-x:hover { color: #fff; border-color: var(--red); }

/* body */
.cd-body { overflow-y: auto; padding: 18px 20px 20px; }
.cd-title { margin: 0 0 4px; font-size: 21px; line-height: 1.25; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.cd-titleedit { display: flex; gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }
.cd-titleedit input { flex: 1 1 320px; min-width: 0; background: var(--panel-3); border: 1px solid var(--blue); color: var(--text); border-radius: 8px; padding: 9px 11px; font-size: 16px; }
.cd-sub { color: var(--muted); font-size: 12px; margin-bottom: 14px; }
.cd-desc {
  font-size: 15px; line-height: 1.55; color: var(--text); white-space: pre-wrap;
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid var(--violet); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px;
}
.cd-desc.none { color: var(--muted); border-left-color: var(--border-2); font-size: 13.5px; }
.cd-callout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 14px; color: var(--text);
  border-left: 3px solid var(--red); background: rgba(240,97,109,.07);
  border-radius: 4px; padding: 10px 12px; margin: 0 0 14px;
}
.cd-callout b { color: #fff; }
.cd-callout.k-dispatch { border-left-color: #2dd4bf; background: rgba(20,184,166,.07); }
.cd-callout.k-done { border-left-color: var(--green); background: rgba(47,178,124,.07); }
.cd-callout.k-active { border-left-color: var(--green); background: rgba(47,178,124,.07); }

.cd-sec-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.cd-sec-h .note { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--muted-2); }

/* facts grid */
.cd-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 18px; }
.cd-fact { min-width: 0; }
.cd-fact .fl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 3px; }
.cd-fact .fv { font-size: 13.5px; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.cd-fact .fv .accent-red { color: var(--red); font-weight: 600; }
.cd-fact .fv .accent-amber { color: var(--amber); font-weight: 600; }
.cd-fact .fv .accent-blue { color: var(--blue); font-weight: 600; }
.cd-fact .fv .accent-teal { color: #2dd4bf; font-weight: 600; }
.cd-fact .fv .accent-green { color: var(--green); font-weight: 600; }
.cd-fact .fv .fdim { color: var(--muted); }
.cd-fact .fv.mono { font-family: var(--mono); font-size: 12px; }

/* anchor / context file block */
.cd-anchor { background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 10px; padding: 12px 13px; }
.cd-pathrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-path {
  flex: 1 1 320px; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: var(--mono); font-size: 13.5px; color: #fff;
  background: var(--panel-3); border: 1px solid var(--border-2); border-radius: 8px; padding: 9px 11px;
}
.cd-copy {
  flex: none; background: var(--blue); color: #06101f; border: 0; border-radius: 8px;
  padding: 9px 13px; font-weight: 700; font-size: 12.5px; white-space: nowrap;
}
.cd-copy.second { background: transparent; color: var(--text); border: 1px solid var(--border-2); font-weight: 600; }
.cd-copy.second:hover { border-color: var(--muted); }
.cd-copy.ok { background: var(--green); color: #06120c; border-color: var(--green); }
.cd-why { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cd-why .ic { flex: none; color: var(--amber); font-weight: 800; }
.cd-why b { color: var(--text); font-weight: 600; }
.cd-anchor-none { font-size: 13px; color: var(--amber); }

/* Research on a card: read-only. The card belongs to Atlas; these are facts of its research
   record, never controls that could move it (owner ask 21.09.2026). */
.cd-research { font-size: 13px; line-height: 1.5; }
.cd-research-l { color: var(--text); overflow-wrap: anywhere; }
.cd-research-l b { font-weight: 700; }
.cd-research-l .mono { font-family: var(--mono); font-size: 12px; }
.cd-research-r { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cd-research-none { color: var(--muted); font-size: 12.5px; }
.cd-research-a { display: inline-block; margin-top: 6px; color: var(--accent); text-decoration: none; }
.cd-research-a:hover { text-decoration: underline; }

/* activity list */
.cd-act { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border-2); }
.cd-act li {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 0 9px 13px; border-bottom: 1px solid var(--border); position: relative;
}
.cd-act li:last-child { border-bottom: 0; }
.cd-act li::before {
  content: ""; position: absolute; left: -5px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); border: 2px solid var(--panel);
}
.cd-act li:first-child::before { background: var(--blue); }
.cd-act .ad { flex: none; width: 82px; font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cd-act .aw { flex: none; }
.cd-act .at { flex: 1 1 260px; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.cd-act-none { font-size: 13px; color: var(--muted); padding: 4px 0 2px; }
.cd-addrow { display: flex; gap: 7px; margin-top: 10px; }
.cd-addrow input {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--border-2);
  color: var(--text); border-radius: 8px; padding: 9px 11px; font-size: 13px;
}
.cd-addrow input::placeholder { color: var(--muted-2); }
.cd-addrow button { background: var(--blue); color: #06101f; border: 0; border-radius: 8px; padding: 0 15px; font-weight: 700; }
.cd-addrow button:disabled { opacity: .45; cursor: default; }
.cd-addhint { font-size: 11.5px; color: var(--muted-2); margin-top: 6px; }

/* the note exactly as stored */
.cd-legacy { margin-top: 18px; border: 1px dashed var(--border-2); border-radius: 10px; background: rgba(24,32,48,.5); }
.cd-legacy-h {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 13px; cursor: pointer; user-select: none;
}
.cd-legacy-h:hover .ll { color: #fff; }
.cd-legacy-h .caret { color: var(--muted-2); width: 12px; flex: none; }
.cd-legacy-h .ll { font-size: 13px; font-weight: 700; color: var(--text); }
.cd-legacy-h .lmeta { font-size: 11.5px; color: var(--muted); }
.cd-legacy-h .lbadge {
  margin-left: auto; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--amber); background: rgba(231,169,12,.10); border: 1px solid rgba(231,169,12,.32);
  padding: 2px 6px; border-radius: 6px;
}
.cd-legacy-b { display: none; padding: 0 13px 13px; }
.cd-legacy.open .cd-legacy-b { display: block; }
.cd-legacy pre {
  margin: 0; max-height: 210px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: 12px; line-height: 1.65; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px;
}
.cd-legacy-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px; font-size: 12px; color: var(--muted); }
.cd-legacy-foot button { background: transparent; border: 1px solid var(--border-2); color: var(--text); border-radius: 7px; padding: 5px 10px; font-size: 12px; }
.cd-legacy-foot button:hover { border-color: var(--muted); }

/* footer actions */
.cd-ft {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px; background: var(--panel-2); border-top: 1px solid var(--border);
}
.cd-btn { background: transparent; border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 7px 13px; font-size: 13px; font-weight: 600; }
.cd-btn:hover { border-color: var(--muted); }
.cd-btn:disabled { opacity: .45; cursor: default; }
.cd-btn.primary { background: var(--green); border-color: var(--green); color: #06120c; font-weight: 800; }
.cd-btn.danger { color: var(--muted); border-style: dashed; }
.cd-btn.danger:hover { color: var(--red); border-color: rgba(240,97,109,.5); }
.cd-ft .spacer { margin-left: auto; }
.cd-ft .ftmeta { font-size: 11.5px; color: var(--muted-2); font-family: var(--mono); }
.cd-msg { font-size: 12.5px; color: var(--amber); flex: 1 1 100%; }

/* ================================================================================================
   Leads CRM (Work -> Leads, public/js/leads.js). Owner ruling 04.08: staged kanban board, its
   detail overlay modeled directly on the .ovl/.cd pattern above — these rules extend that family
   rather than redefine it. .cd/.cd-hd/.cd-facts/.cd-fact/.cd-sec-h/.cd-anchor/.cd-act/.chip/
   .section-title are the shared ones reused as-is; everything below is new to this surface.
   ================================================================================================ */

/* wider overlay variant: a lead needs the shot, the facts, the reply and activity together, and
   there is no reason to cap it at Board's 1000px (owner ruling) */
.cd.cd-wide { width: min(1440px, 96%); }

/* header status phrase ("Awaiting approval to comment") — its own class, not .stat, since that one's
   modifiers are keyed to Board's status words (done/blocked/dispatch/active), not these sentences */
.lead-stat {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 6px; background: rgba(91,140,255,.14); color: var(--blue);
}

/* a fact that needs the full row (the full signal id) */
.cd-fact.wide { grid-column: span 2; }

/* screenshot + facts side by side; reply + activity side by side, underneath */
.cd-top-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.cd-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; margin-top: 8px; }
@media (max-width: 860px) { .cd-top-split, .cd-split { grid-template-columns: 1fr; } }

.cd-shot-big {
  background: repeating-linear-gradient(45deg, var(--panel-3), var(--panel-3) 10px, var(--panel-2) 10px, var(--panel-2) 20px);
  border: 1px dashed var(--border-2); border-radius: 12px;
  min-height: 220px; max-height: 460px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 8px; color: var(--muted-2); font-size: 12.5px; padding: 20px;
}
.lead-shot-note { font-size: 11px; color: var(--muted-2); max-width: 46ch; line-height: 1.5; }

/* excerpt / angle / staged-reply text block (also doubles as the read-only reply view) */
.cd-reply { background: var(--panel-3); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; font-size: 13.5px; color: var(--text); line-height: 1.6; }
.cd-reply.muted { color: var(--muted); background: transparent; border-style: dashed; }
.cd-anchor.muted { color: var(--muted); }

.cd-editarea {
  width: 100%; background: var(--panel-3); border: 1px solid var(--blue); color: var(--text);
  border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 13.5px; line-height: 1.6; resize: vertical;
}
.cd-noterow { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.cd-notein {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 12.5px;
}
.cd-notein::placeholder { color: var(--muted-2); }
.cd-noterow .chip { flex-shrink: 0; padding: 8px 14px; font-size: 12.5px; }
.cd-noterow .chip:disabled { opacity: .5; }

.cd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cd-actions button { font: inherit; font-size: 12.5px; padding: 8px 14px; border-radius: 8px; border: 0; }
.cd-actions .approve { background: var(--amber); color: #221900; font-weight: 700; }
.cd-actions .approve:disabled { opacity: .55; }
.cd-actions .edit { background: var(--panel-2); color: var(--text); border: 1px solid var(--border-2); }
.cd-actions .discard { background: transparent; color: var(--muted); border: 1px solid var(--border); }

.cd-promote { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.cd-promote select { flex: 1 1 220px; }

.cd-act-scroll { max-height: 240px; overflow-y: auto; }
.cd-act .gap { display: block; font-size: 9.5px; font-weight: 700; color: var(--muted-2); margin-top: 2px; }
.cd-act .who { color: var(--muted-2); font-size: 12px; }

/* ---- board (columns + cards) ---- */
/* Work → Pipeline (R009) reuses this .lead-board-wrap family as-is; Leads names still describe the layout.
   The columns wrap onto further rows instead of scrolling sideways (parity B10, D4 and D5, 28.09.2026): a
   sideways scroll with a hidden scrollbar cut the columns at the screen edge with nothing to say more stood
   beyond it. A window wide enough for every column keeps the single row it had; the phone stacks them. */
.lead-board-wrap { overflow-x: auto; padding-bottom: 8px; }
.lead-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: start; }
.lead-col { display: flex; flex-direction: column; gap: 7px; min-height: 50px; }
.lead-col-hd { display: flex; align-items: center; gap: 6px; padding: 2px 2px; }
.lead-col-hd .lead-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lead-col-hd .lead-name { font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.lead-col-hd .lead-cnt { color: var(--muted-2); font-size: 10.5px; font-family: var(--mono); margin-left: auto; }
.lead-col-hd .lead-attn { font-size: 9px; text-transform: uppercase; color: var(--amber); font-weight: 700; }
.lead-col-body { display: flex; flex-direction: column; gap: 6px; min-height: 30px; }
.lead-col-empty { color: var(--muted-2); font-size: 11px; padding: 10px 6px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }

.lead-row { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; position: relative; cursor: pointer; }
.lead-row:hover { border-color: var(--muted); }
.lead-row.needsyou { border-color: rgba(231,169,12,.5); box-shadow: inset 3px 0 0 var(--amber); }
.lead-corner {
  position: absolute; top: -8px; left: -8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--amber); color: #221900; font-weight: 800; font-size: 10px;
  display: grid; place-items: center; box-shadow: 0 2px 7px rgba(231,169,12,.5); line-height: 1;
}
.lead-top { display: flex; align-items: center; gap: 5px; }
/* Real source logos (fetched from finn.no/facebook.com's own icons, not redrawn) — the badge shows
   the actual mark rather than a letter. .other (an unrecognized source_kind) has no real logo to
   show, so it keeps a plain lettered fallback. */
.lead-plat { width: 18px; height: 18px; flex: none; display: block; background-size: contain; background-repeat: no-repeat; background-position: center; }
.lead-plat.meta { background-image: url(/logo-meta.png); }
.lead-plat.finn { background-image: url(/logo-finn.png); border-radius: 4px; overflow: hidden; }
.lead-plat.other { border-radius: 4px; background: var(--panel-3); color: var(--muted); display: grid; place-items: center; font-size: 9px; font-weight: 800; }
.lead-top .lead-co { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-badge { font-size: 9px; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; flex: none; margin-left: auto; font-weight: 700; }
.lead-badge.comment { background: rgba(47,178,124,.14); color: var(--green); }
.lead-badge.reach { background: rgba(91,140,255,.14); color: var(--blue); }
.lead-meta { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted-2); }
.lead-band { font-size: 9px; text-transform: uppercase; padding: 0 4px; border-radius: 4px; font-weight: 700; }
.lead-band.strong { background: rgba(47,178,124,.14); color: var(--green); }
.lead-band.possible { background: rgba(91,140,255,.14); color: var(--blue); }
.lead-band.weak { background: var(--panel-3); color: var(--muted); }
.lead-src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-age { font-family: var(--mono); margin-left: auto; flex: none; }

/* owner-only card -> chat handoff; nested over Card detail without touching its history entry */
.cd-dispatch-ovl {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 18px;
}
.cd-dispatch-scrim {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: rgba(3,6,11,.78); backdrop-filter: blur(4px); cursor: default;
}
.cd-dispatch {
  position: relative; z-index: 1; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 36px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px;
  box-shadow: 0 26px 80px rgba(0,0,0,.72), 0 0 0 1px rgba(91,140,255,.12);
}
.cd-dispatch-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 17px 18px 15px; border-bottom: 1px solid var(--border); background: var(--panel-2);
}
.cd-dispatch-kicker {
  margin: 0 0 4px; font-family: var(--mono); color: #2dd4bf; font-size: 10px;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.cd-dispatch-hd h3 { margin: 0; color: #fff; font-size: 21px; letter-spacing: -.02em; }
.cd-dispatch-body { padding: 17px 18px 18px; overflow-y: auto; }
.cd-dispatch-help { margin: 0 0 15px; color: var(--text); font-size: 13.5px; line-height: 1.5; }
.cd-dispatch-field { display: block; margin-top: 13px; }
.cd-dispatch-field > span {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; color: var(--text);
  font-size: 12px; font-weight: 750;
}
.cd-dispatch-field > span i { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 500; }
.cd-dispatch-field select, .cd-dispatch-field textarea {
  width: 100%; min-width: 0; border: 1px solid var(--border-2); border-radius: 9px;
  background: var(--panel-3); color: var(--text); font: inherit;
}
.cd-dispatch-field select { padding: 9px 11px; }
.cd-dispatch-field textarea { min-height: 124px; resize: vertical; padding: 10px 11px; line-height: 1.5; }
.cd-dispatch-field select:focus, .cd-dispatch-field textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
.cd-dispatch-field select:disabled, .cd-dispatch-field textarea:disabled { opacity: .55; }
.cd-dispatch-field textarea::placeholder { color: var(--muted-2); }
.cd-dispatch-voice, .cd-dispatch-wait, .cd-dispatch-err {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.45;
}
.cd-dispatch-voice, .cd-dispatch-wait { color: var(--muted); }
.cd-dispatch-voice b { color: var(--text); }
.cd-dispatch-err { color: var(--red); }
.cd-dispatch-ft {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--border); background: var(--panel-2);
}

/* the origin card keeps a visible anchor behind the scrim */
.task.origin { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; background: rgba(91,140,255,.10); }
.task .tt.openable { cursor: pointer; }
.task .tt.openable:hover .ttext { color: #fff; }
.task .tt.openable:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px;
}

/* ---- search: pulling one card out of the scatter ---- */
.filterbar .search.big { max-width: 460px; border-color: var(--blue); background: var(--panel-3); }
.srch-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.srch-hint code { font-family: var(--mono); color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; }
.tog {
  display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2);
  border: 1px solid var(--border-2); color: var(--muted); border-radius: 999px;
  padding: 5px 11px; font-size: 12px; font-weight: 600;
}
.tog .tg-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--border-2); }
.tog.on { color: var(--text); border-color: var(--green); }
.tog.on .tg-dot { background: var(--green); }
.list .task.hit.openable { cursor: pointer; }
.list .task.hit.openable:hover { border-color: var(--border-2); background: var(--panel-2); }
.list .task.hit.openable:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.list .task.closed-hit { opacity: .68; border-style: dashed; }
.list .task.closed-hit:hover { opacity: 1; }
/* only the title reads as struck-through; the project header, id and path stay legible */
.list .task.closed-hit .tt { text-decoration: none; color: var(--muted); }
.list .task.closed-hit .hit-title { text-decoration: line-through; color: var(--muted); }
/* the search count is a sentence, not a label — same escape .section-title.purpose uses */
.section-title.srch .count { text-transform: none; letter-spacing: 0; font-size: 12px; }
.hit-id { flex: none; font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
.hit-where { color: var(--muted); font-size: 11px; margin-bottom: 2px; letter-spacing: .02em; display: flex; align-items: center; gap: 6px; }
.hit-title { font-size: 13.5px; color: var(--text); }
.hit-title mark { background: rgba(91,140,255,.28); color: #fff; border-radius: 3px; padding: 0 2px; }
.hit-path { font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-empty { color: var(--muted); padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; }
.srch-empty b { color: var(--text); }
.srch-scope { max-width: 900px; margin: 10px auto 0; text-align: center; font-size: 11.5px; color: var(--muted-2); }
/* closed-card status chips (search only — the board never renders them) */
.stat.done { background: rgba(47,178,124,.10); color: var(--green); }
.stat.dropped { background: var(--panel-3); color: var(--muted-2); }

@media (max-width: 780px) {
  .cd-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .ovl { padding: 8px; }
  .cd { width: 100%; max-height: 96%; }
  .cd-body { padding: 14px 13px 16px; }
  .cd-facts { grid-template-columns: 1fr; }
  .cd-act .ad { width: 100%; }
  .cd-title { font-size: 19px; }
  .cd-copy { flex: 1 1 auto; }
  .cd-dispatch-ovl { padding: 8px; align-items: end; }
  .cd-dispatch { width: 100%; max-height: calc(100vh - 16px); border-radius: 14px 14px 10px 10px; }
  .cd-dispatch-hd, .cd-dispatch-body { padding-left: 14px; padding-right: 14px; }
  .cd-dispatch-ft { padding: 11px 14px; }
  .cd-dispatch-ft .cd-btn { flex: 1 1 0; min-height: 40px; }
}

/* ============================================================================================
   Tab redesign, owner-approved 2026-07-25 (mockup: tab-redesign-mockup.html).
   Today rebuilt as three questions, Pulse folded into its header, Map merged into tree + chain.
   One namespace (.rd-*) built only from the existing tokens, so nothing here can collide with the
   board, Money, Self or Admin styles. Fluid: the same markup is what the 390px screenshot shows.
   ============================================================================================ */

/* ---- the global Privat switch (header) ---- */
.psw {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: transparent; border: 1px solid var(--border-2); color: var(--muted-2);
  border-radius: 999px; padding: 4px 11px 4px 9px; font-size: 12px; font-weight: 700;
}
.psw .psw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); flex: none; }
.psw:hover { border-color: var(--muted); color: var(--muted); }
.psw.on { color: var(--text); border-color: var(--border-2); }
.psw.on .psw-dot { background: var(--green); }

@media (max-width: 600px) {
  .hdr { flex-wrap: wrap; gap: 4px; padding: 6px 6px; }
  .hdr .brand { font-size: 10px; letter-spacing: .06em; flex: none; }
  .hdr .areas {
    flex: 1 1 100%; flex-wrap: nowrap; order: 2; width: 100%; min-width: 100%; padding: 3px; gap: 2px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hdr .areas::-webkit-scrollbar { display: none; }
  .hdr .areas .area {
    flex: 1 0 auto; min-width: auto; min-height: 36px; padding: 8px 10px;
    font-size: 13px; letter-spacing: 0; white-space: nowrap; overflow: visible;
  }
  .hdr .meta { flex: none; flex-wrap: nowrap; gap: 3px; margin-left: 0; }
  .hdr .meta .pill, .hdr .meta .dot-upd { display: none; }
  .hdr .meta .ghost, .hdr .meta .psw {
    min-width: 26px; width: 26px; min-height: 26px; height: 26px; padding: 0;
  }
  .hdr .psw { font-size: 0; gap: 0; justify-content: center; }
  .hdr .rs-area-count { display: none; }
}

/* ============================== TODAY ============================== */
main.rd-today { max-width: 1100px; }

.rd-statusline {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 4px 2px 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.rd-statusline .rd-big { font-size: clamp(19px, 2.6vw, 26px); font-weight: 800; letter-spacing: -.025em; color: var(--text); }
.rd-statusline .rd-sub { color: var(--muted); font-size: 13px; }
.rd-statusline .rd-sub .ok { color: var(--green); font-weight: 700; }
.rd-statusline .rd-sub .bad { color: var(--red); font-weight: 700; }

/* One monitor truth, below the work-window pulse. The whole summary is a native button; its
   per-source rows do not exist on the glass until the owner presses it. */
.rd-monitor {
  --monitor-accent: var(--muted-2);
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--monitor-accent);
  border-radius: 11px; margin: 0 0 20px; overflow: hidden;
}
.rd-monitor.is-red { --monitor-accent: var(--red); }
.rd-monitor.is-amber, .rd-monitor.is-pending { --monitor-accent: var(--amber); }
.rd-monitor.is-green { --monitor-accent: var(--green); }
.rd-monitor-toggle {
  display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  width: 100%; padding: 11px 13px; border: 0; background: transparent; color: var(--text);
  text-align: left;
}
.rd-monitor-toggle:hover { background: var(--panel-2); }
.rd-monitor-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.rd-monitor-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--monitor-accent); }
.rd-monitor-copy { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.rd-monitor-title { font-size: 13.5px; font-weight: 750; color: var(--text); }
.rd-monitor-meta { font-family: var(--mono); font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.rd-monitor-open { font-size: 11.5px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.rd-monitor-detail { border-top: 1px solid var(--border); padding: 7px 12px 11px; }
.rd-monitor-source { padding: 9px 2px; border-bottom: 1px solid var(--border); }
.rd-monitor-source:last-child { border-bottom: 0; }
.rd-monitor-source-head { display: flex; gap: 9px; flex-wrap: wrap; align-items: baseline; }
.rd-monitor-source-head b { font-family: var(--mono); font-size: 11.5px; color: var(--text); }
.rd-monitor-source-head span { font-size: 12px; font-weight: 700; color: var(--muted); }
.rd-monitor-source-head.is-healthy span { color: var(--green); }
.rd-monitor-source-head.is-pending span { color: var(--amber); }
.rd-monitor-source-head.is-problem span, .rd-monitor-source-head.is-unknown span { color: var(--red); }
.rd-monitor-source-meta, .rd-monitor-finding, .rd-monitor-empty {
  margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--muted);
}
.rd-monitor-finding { color: var(--text); }

/* ---- the floor-crossing row (walk item 3, spec 26.07.2026) ----
   First class on purpose: it sits ABOVE question 1 on Today and above the tap stack on Approve, and
   it is the loudest thing on either screen because it is the most urgent TRUE fact in the system.
   One row, ever. Shared with .brf-floor below so the phone and the board read identically. */
.rd-floor, .brf-floor {
  display: block; width: 100%; text-align: left;
  background: linear-gradient(180deg, rgba(240,97,109,.13), rgba(240,97,109,.05));
  border: 1px solid rgba(240,97,109,.42); border-left: 3px solid var(--red);
  border-radius: var(--radius); padding: 13px 15px; margin: 0 0 20px;
}
.rd-floor.is-tap, .brf-floor.is-tap { cursor: pointer; }
.rd-floor.is-tap:hover, .brf-floor.is-tap:hover { border-color: var(--red); background: rgba(240,97,109,.18); }
.rd-floor.is-tap:focus-visible, .brf-floor.is-tap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rd-floor-line, .brf-floor-line {
  font-size: clamp(15px, 2vw, 18px); font-weight: 800; letter-spacing: -.015em;
  color: var(--text); overflow-wrap: anywhere;
}
.rd-floor-meta, .brf-floor-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-top: 7px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.rd-floor-ent, .brf-floor-ent {
  font-weight: 700; color: var(--text); border: 1px solid var(--border-2);
  border-radius: 5px; padding: 1px 6px;
}
.rd-floor-age, .brf-floor-age { color: var(--amber); font-weight: 700; }
.rd-floor-go, .brf-floor-go { color: var(--blue); font-weight: 700; }

.rd-q { margin-bottom: 30px; }
.rd-qhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.rd-qhead .rd-qq { font-size: clamp(16px, 2.1vw, 21px); font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.rd-qhead .rd-qc { font-family: var(--mono); font-size: 12px; color: var(--muted-2); font-weight: 700; }
.rd-qhead .rd-qn {
  font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--muted-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px;
}

/* ---- Q1: what needs me ---- */
.rd-needs { display: flex; flex-direction: column; gap: 9px; }
.rd-need {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px; position: relative; overflow: hidden;
}
.rd-need::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--border-2); }
.rd-need.sev-hi::before { background: var(--red); }
.rd-need.sev-mid::before { background: var(--amber); }
.rd-need.sev-lo::before { background: var(--blue); }
.rd-need .rd-rank { font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--muted-2); text-align: center; }
.rd-need .rd-nbody { min-width: 0; }
.rd-need .rd-ttl { font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
/* status-first deadline row: the card's own title, demoted under the status sentence that outranks it */
.rd-need .rd-ttl-sub { color: var(--muted-2); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.rd-need .rd-why { color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.45; }
.rd-need .rd-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.rd-tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2.5px 7px; border-radius: 5px; border: 1px solid var(--border-2); color: var(--muted);
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-tag .rd-ddot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.rd-tag.when-now { color: var(--red); border-color: rgba(240,97,109,.45); background: rgba(240,97,109,.10); }
.rd-tag.when-soon { color: var(--amber); border-color: rgba(231,169,12,.45); background: rgba(231,169,12,.10); }
.rd-tag.st-ok { color: var(--green); border-color: rgba(47,178,124,.45); background: rgba(47,178,124,.10); }
.rd-tag.st-wait { color: var(--amber); border-color: rgba(231,169,12,.45); background: rgba(231,169,12,.10); }
.rd-tag.st-bad { color: var(--red); border-color: rgba(240,97,109,.45); background: rgba(240,97,109,.10); }
.rd-need .rd-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rd-act {
  border: 1px solid var(--blue); background: rgba(91,140,255,.14); color: #cfe0ff;
  border-radius: 8px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.rd-act:hover { background: rgba(91,140,255,.24); }
.rd-act.ghost { border-color: var(--border-2); background: transparent; color: var(--muted); }
.rd-act.ghost:hover { color: var(--text); border-color: var(--muted); background: var(--panel-2); }
.rd-act:disabled { opacity: .45; cursor: default; }
.rd-actpair { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* The fold law's two sentences on Today (slice 2). `rd-dropall` is what the press is ABOUT to do —
   amber, because nothing has happened yet; `rd-actnote` is what a partial or failed act actually did
   — red, because a decision that is half-dropped is not dropped. Both take the full width of the
   action column so the sentence is never truncated into a half-truth. */
.rd-dropall, .rd-actnote { flex-basis: 100%; text-align: right; font-size: 12px; line-height: 1.4; }
.rd-dropall { color: var(--amber); }
.rd-actnote { color: var(--red); }
.rd-hidden { margin-top: 9px; font-size: 12px; color: var(--muted); font-style: italic; }

/* ---- Q2: money week (one block per entity — ledgers never blend) ---- */
.rd-ent { margin-bottom: 16px; }
.rd-verdict {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px; margin-bottom: 10px;
}
.rd-verdict.bad { background: linear-gradient(180deg, rgba(240,97,109,.11), var(--panel)); border-color: rgba(240,97,109,.34); }
.rd-verdict .rd-mv { font-size: clamp(15px, 2vw, 18px); font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.rd-verdict .rd-mvsub { color: var(--muted); font-size: 13px; }

.rd-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.rd-day { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 9px 9px 11px; min-width: 0; }
.rd-day.hit { border-color: rgba(240,97,109,.42); background: linear-gradient(180deg, rgba(240,97,109,.09), var(--panel)); }
.rd-day .rd-dn { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-weight: 800; }
.rd-day .rd-dd { font-size: 12px; color: var(--muted); margin-top: 1px; }
.rd-day .rd-amt { font-family: var(--mono); font-weight: 800; font-size: 13.5px; margin-top: 9px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rd-day .rd-amt.zero { color: var(--muted-2); font-weight: 700; }
.rd-day .rd-amt.out { color: var(--red); }
.rd-day .rd-amt.in { color: var(--green); }
.rd-day .rd-who { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; overflow-wrap: anywhere; }
.rd-day .rd-cov {
  margin-top: 8px; font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--red);
}

.rd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; }
.rd-mf { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; min-width: 0; }
.rd-mf .rd-k { font-size: 12px; color: var(--muted); }
.rd-mf .rd-v { font-family: var(--mono); font-size: 16px; font-weight: 800; margin-top: 3px; letter-spacing: -.02em; color: var(--text); overflow-wrap: anywhere; }
.rd-mf .rd-v.bad { color: var(--red); }
.rd-mf .rd-n { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.rd-mf .rd-n .cal-link { color: var(--blue); }
.rd-note { font-size: 11.5px; color: var(--muted); margin: 10px 2px 0; line-height: 1.45; }
.rd-line { font-size: 13px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; margin-bottom: 8px; }
.rd-line .dim { color: var(--muted); }

/* ---- Q3: what happened ---- */
.rd-hap { display: flex; flex-direction: column; gap: 7px; }
.rd-hrow {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; align-items: start;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.rd-hrow b { font-weight: 700; color: var(--text); }
.rd-hrow .rd-ic { font-size: 13px; text-align: center; line-height: 1.6; }
.rd-hrow .rd-ic.ok { color: var(--green); }
.rd-hrow .rd-ic.stuck { color: var(--amber); }
.rd-hrow .rd-sub2 { color: var(--muted-2); font-size: 12.5px; margin-top: 3px; }

/* ---- folds + the collapsed rest ---- */
.rd-fold { background: var(--panel); border: 1px solid var(--border); border-radius: 11px; margin-top: 8px; }
.rd-foldh { cursor: pointer; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; flex-wrap: wrap; }
.rd-foldh:hover .rd-lead { color: #fff; }
.rd-foldh .rd-chev { color: var(--muted-2); font-family: var(--mono); font-size: 11px; flex: none; }
.rd-fold.open .rd-foldh .rd-chev { color: var(--blue); }
.rd-foldh .rd-lead { font-weight: 650; color: var(--text); }
.rd-foldh .rd-tail { color: var(--muted); font-size: 12.5px; }
.rd-foldb { padding: 12px 14px 14px; border-top: 1px solid var(--border); }
.rd-foldb .list { max-width: 100%; }
.rd-rest { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 16px; }
.rd-resthead {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 800; margin-bottom: 10px;
}
.rd-lgroup { margin-bottom: 12px; }
.rd-lgroup .rd-lgh { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.rd-lgroup .rd-cd { font-family: var(--mono); font-size: 11px; color: var(--muted-2); font-weight: 700; }
.rd-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-chip {
  font-size: 12px; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 7px;
  padding: 5px 9px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; max-width: 100%;
}
.rd-chip b { color: var(--text); font-weight: 650; }
.rd-chip .rd-x { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; }

/* ============================== MAP ============================== */
main.rd-map { max-width: 1400px; }
.rd-maptop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 13px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.rd-search {
  flex: 1 1 240px; min-width: 0; background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 9px; padding: 9px 12px; color: var(--text); font-size: 13px;
}
.rd-search::placeholder { color: var(--muted-2); }
.rd-search:focus { outline: none; border-color: var(--blue); }
.rd-fleetstat { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.rd-fleetstat b { color: var(--text); }

.rd-mapgrid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
.rd-tree {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 8px;
  max-height: calc(100vh - 190px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}
.rd-tree::-webkit-scrollbar { width: 9px; }
.rd-tree::-webkit-scrollbar-track { background: transparent; }
.rd-tree::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }
.rd-node {
  display: grid; grid-template-columns: auto 10px minmax(0, 1fr) auto auto; gap: 9px; align-items: center;
  width: 100%; margin: 0; padding: 7px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: inherit; text-align: left;
}
.rd-node:not(.dom) { grid-template-columns: 10px minmax(0, 1fr) auto auto; }
.rd-node:hover { background: var(--panel-2); }
.rd-node:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; background: var(--panel-2); }
.rd-node.sel { background: var(--panel-3); border-color: var(--border-2); }
.rd-node .rd-caret { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.rd-node .rd-ddot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rd-node .rd-tname { font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-node .rd-tcount { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-weight: 700; }
.rd-livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-left: 4px; }
.rd-tstate { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rd-tstate.ok { background: var(--green); }
.rd-tstate.wait { background: var(--amber); }
.rd-tstate.bad { background: var(--red); }
.rd-node .rd-tnum, .rd-legend .rd-tnum { font-family: var(--mono); font-size: 11.5px; font-weight: 800; color: var(--red); }
.rd-kids { padding: 1px 0 5px 18px; margin-left: 5px; border-left: 1px solid var(--border); }
.rd-kids .rd-node { padding: 5px 9px; }
.rd-kids .rd-tname { font-weight: 500; font-size: 13px; color: var(--muted); }
.rd-kids .rd-node.sel .rd-tname, .rd-kids .rd-node:hover .rd-tname { color: var(--text); }
.rd-treemore { font-size: 12px; color: var(--muted-2); padding: 6px 9px; }
.rd-treemore.rd-quiet {
  display: block; width: 100%; margin: 0; border: 0; background: transparent;
  text-align: left; cursor: pointer; color: var(--muted); border-radius: 8px;
}
.rd-treemore.rd-quiet:hover { color: var(--text); background: var(--panel-2); }
.rd-treemore.rd-quiet:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; color: var(--text); }
.rd-legend {
  display: flex; gap: 14px; flex-wrap: wrap; padding: 11px 10px 4px; margin-top: 6px;
  border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted);
}
.rd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rd-legend .dim { color: var(--muted-2); }

.rd-chain { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 17px 17px; min-width: 0; }
.rd-chainhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.rd-chainhead .rd-cdot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.rd-chainhead .rd-cname { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.rd-chainpath { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); word-break: break-all; margin-bottom: 14px; }
.rd-chainsay { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.rd-steps { list-style: none; margin: 0 0 10px; padding: 0; }
.rd-steps li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start;
  padding: 9px 0; border-top: 1px solid var(--border);
}
.rd-steps li:first-child { border-top: 0; padding-top: 2px; }
.rd-steps .rd-sn {
  font-family: var(--mono); font-size: 10.5px; font-weight: 800; color: var(--muted-2);
  border: 1px solid var(--border-2); border-radius: 5px; text-align: center; padding: 2px 0; line-height: 1.3;
}
.rd-steps .rd-file { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--text); font-weight: 650; word-break: break-all; }
.rd-steps .rd-sdesc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.rd-derived { font-size: 11.5px; color: var(--muted); line-height: 1.45; border-left: 2px solid var(--border-2); padding-left: 10px; margin-bottom: 16px; }
.rd-chainsub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 800; margin: 4px 0 9px;
}
.rd-cards { display: flex; flex-direction: column; gap: 6px; }
.rd-crow {
  display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; align-items: baseline;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 13px;
}
.rd-crow .rd-ct { line-height: 1.45; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.rd-st {
  font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 2.5px 0; border-radius: 5px; text-align: center; border: 1px solid var(--border-2); color: var(--muted-2);
}
.rd-st.next { color: var(--blue); border-color: rgba(91,140,255,.4); background: rgba(91,140,255,.10); }
.rd-st.blocked { color: var(--red); border-color: rgba(240,97,109,.4); background: rgba(240,97,109,.10); }
.rd-st.active, .rd-st.dispatch { color: var(--green); border-color: rgba(47,178,124,.4); background: rgba(47,178,124,.10); }
.rd-seeall { font-size: 12.5px; color: var(--muted-2); padding: 8px 2px 0; }
.rd-health {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding-top: 12px; margin-top: 12px;
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted);
}
.rd-health .ok { color: var(--green); font-weight: 700; }
.rd-chainacts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .rd-mapgrid { grid-template-columns: minmax(0, 1fr); }
  .rd-tree { max-height: none; overflow-y: visible; }
  .rd-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  main.rd-today, main.rd-map { padding: 14px 12px 26px; }
  main.rd-today, main.rd-map { padding-bottom: 220px; }
  .rd-need { grid-template-columns: 22px minmax(0, 1fr); row-gap: 11px; align-items: start; padding: 12px 13px; }
  .rd-need .rd-rank { line-height: 1.2; font-size: 16px; }
  .rd-need .rd-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; }
  .rd-week { grid-template-columns: minmax(0, 1fr); }
  .rd-day.empty { display: none; }
  .rd-statusline { gap: 6px; }
  .rd-monitor-toggle { grid-template-columns: 9px minmax(0, 1fr); }
  .rd-monitor-open { grid-column: 2; }
  .rd-crow { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .rd-crow .rd-st { width: 68px; }
  .rd-maptop { gap: 9px; }
}

/* ============================================================================================
   Morning brief, owner-approved 2026-07-25 (mockup: morning-brief-mockup.html, variant A).
   One namespace (.brf-*) built only from the existing tokens. The 390px render is the same
   markup as the 1280px one - the brief was drawn on a phone and it stays a phone-first column.
   Contrast floor: nothing lighter than --muted on a panel. Numbers are mono.
   ============================================================================================ */

main.brf { max-width: 760px; }

/* ---- head ---- */
/* The gate's only standing label (#625/#628/#630): the redaction chip, standalone since the header
   block left on #589. Spacing only — the chip's own look is .brf-health.s-redacted below. */
.brf-redacted { margin: 0 0 12px; }
.brf-top { padding: 2px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.brf-datel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.brf-date {
  font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .13em;
  color: var(--muted); text-transform: uppercase;
}
.brf-health {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 3px 9px; border-radius: 6px;
  color: var(--muted); border: 1px solid var(--border-2); background: var(--panel-2);
}
.brf-health i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.brf-health.s-green { color: var(--green); border-color: rgba(47,178,124,.45); background: rgba(47,178,124,.10); }
.brf-health.s-green i { background: var(--green); }
.brf-health.s-amber { color: var(--amber); border-color: rgba(231,169,12,.45); background: rgba(231,169,12,.10); }
.brf-health.s-amber i { background: var(--amber); }
.brf-health.s-red { color: var(--red); border-color: rgba(240,97,109,.45); background: rgba(240,97,109,.10); }
.brf-health.s-red i { background: var(--red); }
.brf-health.s-unknown { color: var(--amber); border-color: rgba(231,169,12,.45); }
.brf-health.s-pending { color: var(--muted); border-color: var(--border-2); }
.brf-health.s-pending i { background: var(--muted); }
.brf-health.s-unknown i { background: var(--amber); }
.brf-health.s-redacted { color: var(--violet); border-color: rgba(167,139,250,.45); }
.brf-health.s-redacted i { background: var(--violet); }

.brf-hero {
  font-size: clamp(22px, 3.4vw, 30px); line-height: 1.15; font-weight: 800;
  letter-spacing: -.032em; margin: 0; overflow-wrap: anywhere;
}
.brf-herosub { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 9px 0 0; }
.brf-night {
  font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 13px 0 0;
  line-height: 1.5; overflow-wrap: anywhere;
}

/* ---- sections ---- */
.brf-sec { padding: 20px 0 4px; border-top: 1px solid var(--border); }
.brf-sec:first-of-type { border-top: 0; }
.brf-sh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.brf-sh h3 { font-size: clamp(16px, 2.1vw, 19px); font-weight: 800; letter-spacing: -.025em; margin: 0; }
.brf-shc { font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--muted); }
.brf-quiet {
  color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
/* The access-truth line that REPLACES the empty verdict on a redacted read (room #636). It wears the
   redaction violet, not the calm grey: it is a disclosure about what this device cannot see, and it
   must not read as "a quiet morning". */
.brf-limited { color: var(--violet); border-color: rgba(167,139,250,.45); }

/* ---- needs your tap ---- */
.brf-taps { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.brf-tap {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 13px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px 13px 16px;
}
.brf-tap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-2); }
.brf-tap.sev-hi::before { background: var(--red); }
.brf-tap.sev-mid::before { background: var(--amber); }
.brf-tap.sev-lo::before { background: var(--blue); }
.brf-rank { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--muted); line-height: 1.35; text-align: center; }
.brf-tbody { min-width: 0; }
.brf-tt { font-size: 16px; font-weight: 700; letter-spacing: -.012em; line-height: 1.32; margin: 0; overflow-wrap: anywhere; }
/* status-first row: the card's title, demoted under the status sentence that now leads it (spec law 2) */
.brf-tsub { color: var(--muted-2); font-size: 12.5px; line-height: 1.35; margin: 3px 0 0; overflow-wrap: anywhere; }
.brf-tw { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 5px 0 0; overflow-wrap: anywhere; }
.brf-chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 11px; }
.brf-dest {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border-2); background: var(--panel-2);
  padding: 3px 8px; border-radius: 6px;
}
.brf-dest i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--muted); }
.brf-dest.d-bankid i { background: var(--violet); }
.brf-dest.d-gmail i { background: var(--blue); }
.brf-dest.d-fiken i { background: var(--green); }
.brf-dest.d-board i { background: var(--muted); }
.brf-min { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .05em; }
.brf-dom { border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; }

/* Private vs company lanes on Approve (owner #274, 2026-07-26): one surface, two labeled blocks.
   Never a second page and never a dump to Today to re-find the row. */
.brf-lane-block { margin-bottom: 14px; }
.brf-lane-block:last-of-type { margin-bottom: 0; }
.brf-lane-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--fg);
  margin: 0 0 9px;
}
.brf-lane-h .brf-shc { margin-left: 0; }
.brf-lane {
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px;
  text-transform: uppercase; letter-spacing: .06em;
}
.brf-lane-private { color: var(--violet); border-color: rgba(167,139,250,.45); background: rgba(167,139,250,.08); }
.brf-lane-company { color: var(--blue); border-color: rgba(91,140,255,.45); background: rgba(91,140,255,.08); }
.brf-lane-fold { color: var(--amber); border-color: rgba(231,169,12,.45); background: rgba(231,169,12,.10); }
.brf-lane-block.is-private .brf-lane-h { color: var(--violet); }
.brf-lane-block.is-company .brf-lane-h { color: var(--blue); }

/* Every tap-stack row goes somewhere (fix 2026-07-26). The whole row body is the target - a thumb
   on a phone gets the full card, not a 11px chip - and the row states where it lands, so the
   affordance is readable in a still screenshot and not only under a hover nobody has on a phone.
   Exception after #274: in-place act rows (queue/drafts/triage) are NOT is-tap on the body —
   the buttons below are the act; body click never teleports to Today. */
.brf-tgo { display: block; cursor: pointer; -webkit-tap-highlight-color: rgba(91,140,255,.14); }
.brf-tap.is-tap { transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.brf-tap.is-tap:hover { border-color: var(--blue); background: var(--panel-2); }
.brf-tap.is-tap:active { transform: scale(.995); }
.brf-tgo:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.brf-goes {
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blue); margin: 11px 0 0;
}
.brf-foldt { min-width: 0; overflow-wrap: anywhere; }
.brf-foldrow.is-tap { cursor: pointer; }
/* the chevron is the folded row's affordance: hover does not exist on a phone, and a still
   screenshot has to show that these rows go somewhere too */
.brf-foldrow.is-tap .brf-foldt::after { content: " \203A"; color: var(--blue); font-weight: 800; }
.brf-foldrow.is-tap:hover .brf-foldt { color: var(--blue); }
.brf-foldrow.is-tap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

.brf-fold { margin-top: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 11px; }
.brf-fold summary {
  list-style: none; cursor: pointer; padding: 12px 15px; display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--muted);
}
.brf-fold summary::-webkit-details-marker { display: none; }
.brf-fold summary::before { content: "\25B8"; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.brf-fold[open] summary::before { content: "\25BE"; color: var(--blue); }
.brf-foldb { padding: 2px 15px 12px; border-top: 1px solid var(--border); }
.brf-foldrow {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--muted);
}
.brf-foldrow:last-child { border-bottom: 0; }

/* THE QUIET BUCKETS: working, watched, waiting. Deliberately the flattest things on the page - no
   panel fill and a dashed edge, so they read as asides and never compete with a real tap. All three
   share one look on purpose: none of them is his, so none of them earns visual weight over the
   others. This is where the difference between "85 taps" and the truth lives. */
.brf-wait, .brf-work, .brf-watch { background: transparent; border-style: dashed; }
.brf-wait summary, .brf-work summary, .brf-watch summary { font-size: 13px; }
.brf-wait .brf-cap, .brf-work .brf-cap, .brf-watch .brf-cap { margin: 10px 0 2px; font-size: 12px; }
/* ---- the act tier: rows that PERFORM (owner ruling 2026-07-26, "one click/tap -> action") ----
   The buttons live OUTSIDE .brf-tbody so a tap on one never also fires the row's navigation, and
   they span the whole card because a decision should not be squeezed into the text column. */
.brf-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.brf-tap > .brf-acts, .brf-tap > .brf-drafts, .brf-tap > .brf-receipt { grid-column: 1 / -1; margin-top: 11px; }
.brf-act-btn {
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: -.01em; cursor: pointer;
  padding: 8px 15px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel-2);
  color: var(--fg); transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.brf-act-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.brf-act-btn.go:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.brf-act-btn.no:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.brf-act-btn:disabled { opacity: .45; cursor: default; }
.brf-act-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.brf-tap.is-muted { opacity: .65; }
.brf-fiken-note { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 12rem; }
.brf-fiken-note .sheet-input { margin-top: 0; padding: 6px 8px; font: inherit; }
/* "Les brevet" (walk item 5a): the read-first link on a draft row. Quieter than Approve/Reject on
   purpose — it is not a decision, it is the thing you do BEFORE one. It carries no colour of its
   own until hover, so the eye still lands on the two buttons that change something. */
.brf-act-btn.read { font-weight: 600; background: transparent; color: var(--muted); }
.brf-act-btn.read:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
/* What one Drop is about to end (fold law slice 2 (i)). It sits WITH the buttons, not under the row,
   because it is the caption on the press — his word binds what he saw. Amber, not red: nothing has
   happened yet. It wraps onto its own line on a phone rather than shortening the sentence. */
.brf-dropall { font-size: 12.5px; line-height: 1.4; color: var(--amber); flex-basis: 100%; }
.brf-drafts { display: flex; flex-direction: column; gap: 8px; }
.brf-draft {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.brf-dsub { font-size: 13px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
/* The receipt is permanent on the row. A performed row must never render as untouched again. */
.brf-receipt { font-size: 13px; line-height: 1.45; margin: 11px 0 0; }
.brf-receipt.is-done { color: var(--green); }
.brf-receipt.is-doing { color: var(--muted); }
.brf-receipt.is-failed { color: var(--red); }
.brf-tap.is-performed { opacity: .72; }
/* ---- the proof on a ready row: what the tap does, and what says so ---- */
.brf-ev { margin-top: 9px; padding-left: 10px; border-left: 2px solid var(--border-2); }
.brf-act { font-size: 13px; font-weight: 600; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.brf-src { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 5px 0 0; font-size: 11px; color: var(--muted); }
.brf-tier {
  font-family: var(--mono); font-weight: 800; letter-spacing: .05em; padding: 1px 6px;
  border: 1px solid var(--border-2); border-radius: 5px;
}
.brf-tier.tartifact { color: var(--green); border-color: rgba(47,178,124,.45); }
.brf-tier.townerattested { color: var(--violet); border-color: rgba(167,139,250,.45); }
.brf-art { font-family: var(--mono); min-width: 0; overflow-wrap: anywhere; }
.brf-seat { font-family: var(--mono); opacity: .7; }
.brf-quietrow { border-bottom: 1px solid var(--border); }
.brf-quietrow:last-child { border-bottom: 0; }
.brf-quietrow .brf-foldrow { border-bottom: 0; padding-bottom: 2px; }
/* Why a row is not his, said on the screen he is already looking at rather than in a tooltip. */
.brf-why { margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
.brf-why.is-expired { color: var(--amber); }

/* ---- while you were away ---- */
.brf-hap { display: flex; flex-direction: column; gap: 8px; }
.brf-hrow {
  display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 12px; align-items: start;
  background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px;
}
.brf-hk { color: var(--green); font-family: var(--mono); font-size: 12px; font-weight: 800; line-height: 1.5; }
.brf-hb { min-width: 0; font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.brf-htag {
  display: block; width: max-content; max-width: 100%; margin-top: 9px;
  font-family: var(--mono); font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px;
}

/* ---- fires today ---- */
.brf-fires { display: flex; flex-direction: column; gap: 8px; }
.brf-fire {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
  padding: 12px 14px 12px 16px;
}
.brf-fire::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-2); }
.brf-fire.k-in::before { background: var(--green); }
.brf-fire.k-out::before { background: var(--red); }
.brf-fire.k-due::before { background: var(--amber); }
.brf-fire.k-soon::before { background: var(--blue); }
.brf-fl { font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.brf-fsub { color: var(--muted-2); font-size: 12.5px; line-height: 1.35; margin: 3px 0 0; overflow-wrap: anywhere; }
.brf-fw { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 5px 0 0; overflow-wrap: anywhere; }
.brf-fw .who {
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.brf-cap { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 11px 0 0; }

/* ---- Monday block ---- */
.brf-mon { padding: 20px 0 4px; border-top: 1px solid var(--border); }
.brf-monk {
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .17em;
  color: var(--violet); text-transform: uppercase; margin: 0 0 8px;
}
.brf-weeks {
  display: flex; flex-direction: column; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 11px; overflow: hidden;
}
.brf-wrow { background: var(--panel); padding: 12px 14px; }
.brf-wrow.total { background: var(--panel-2); }
.brf-wname { font-size: 14px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.brf-wstat {
  font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 5px 0 0;
  line-height: 1.55; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.brf-honest { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 11px 0 0; }

/* ---- foot ---- */
.brf-foot {
  margin-top: 22px; padding: 15px 0 20px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--muted); line-height: 1.55;
}
.brf-link { color: var(--blue); cursor: pointer; font-weight: 700; }

@media (max-width: 640px) {
  .brf-tap { grid-template-columns: 18px minmax(0, 1fr); gap: 11px; padding: 12px 13px 12px 14px; }
  .brf-hrow { gap: 10px; padding: 11px 12px; }
  .brf-foldrow { flex-wrap: wrap; gap: 4px; }
}

/* =========================================================================================
   FLEET CHAT (card 9cc95897, owner-approved mockup 2026-07-26 10:08)
   Every value below comes from the tokens already declared in :root at the top of this file.
   No new colour, no new font, no new radius scale, and nothing outside the .chat-* namespace
   except the one priced shell change: five areas need 12px of side padding instead of 18px.
   ========================================================================================= */

/* The priced shell change (mockup decision 2, accepted): a fifth area button only fits a 390px
   header at 12px. On a phone the area row also takes a line of its own so five labels never
   compete with the brand and the meta chips for the same row. */
.areas .area { padding: 6px 12px; }
/* Labels never wrap (04.09 glass: "Research" with its badge under it). Between a phone and a wide
   desktop the header is tight, so the six buttons give back the width the inline badge keeps. */
@media (min-width: 601px) and (max-width: 1100px) {
  .areas .area { padding: 6px 8px; }
}
@media (max-width: 600px) {
  .areas { flex: 1 1 100%; flex-wrap: nowrap; order: 2; width: 100%; min-width: 100%; overflow-x: auto; overflow-y: hidden; }
  .areas .area { flex: 1 0 auto; min-height: 36px; padding: 8px 10px; font-size: 13px; white-space: nowrap; overflow: visible; }
  .rs-area-count { display: none; }
  .hdr-back {
    flex: none; width: 22px; height: 28px; padding: 0; border: 0; background: transparent;
    color: var(--blue); font-size: 18px; line-height: 1;
  }
}

.chat .section-title .swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.chat-err {
  color: var(--red); background: rgba(240,97,109,.08); border: 1px solid rgba(240,97,109,.4);
  border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.5; margin: 0 0 12px;
}
.chat-catchup-retry {
  display: inline-block; margin-left: 4px; background: transparent; border: 1px solid rgba(240,97,109,.5);
  border-radius: 6px; padding: 2px 9px; min-height: 26px; font-family: var(--mono); font-size: 11px;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--red); cursor: pointer;
}
.chat-catchup-retry:hover { background: rgba(240,97,109,.12); }
.chat-catchup-retry:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.chat-quiet {
  color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
/* A room whose chain does not reconcile says so in the loudest hue this app has, and says what it
   means: unproven from that sequence number down, cite nothing out of it. */
.chat-tamper {
  color: var(--red); background: rgba(240,97,109,.10); border: 1px solid rgba(240,97,109,.45);
  border-radius: 12px; padding: 13px 15px; font-size: 14px; line-height: 1.55; margin: 0 0 12px;
  font-weight: 600;
}
.chat-foot {
  margin-top: 22px; padding: 15px 0 20px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted); line-height: 1.55;
}

/* ---- rooms list ---- */
.chat-room {
  display: flex; gap: 9px; align-items: flex-start; position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 11px; margin-bottom: 7px;
}
.chat-room::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-2); }
.chat-room.k-delib::before { background: var(--blue); }
.chat-room.k-verif::before { background: var(--amber); }
/* closed: the waiting-card idiom already used elsewhere — dimmed, dashed, and sorted last */
.chat-room.closed { opacity: .5; border-style: dashed; background: transparent; }
.chat-room-fold { margin: 8px 0 0; }
.chat-room-fold-sum {
  display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  margin: 14px 4px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); list-style: none;
}
.chat-room-fold-sum::-webkit-details-marker { display: none; }
.chat-room-fold-sum .count { color: var(--muted-2); }
.chat-room-fold-sum:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.chat-room.is-tap { cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .12s ease; -webkit-tap-highlight-color: rgba(91,140,255,.14); }
.chat-room.is-tap:hover { border-color: var(--blue); background: var(--panel-2); }
.chat-room.is-tap:active { transform: scale(.995); }
.chat-room.is-tap:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.chat-room.chat-room-child {
  margin-left: calc(var(--chat-nest, 1) * 14px);
  max-width: calc(100% - (var(--chat-nest, 1) * 14px));
}
.chat-rdot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px; }
.chat-rbody { flex: 1; min-width: 0; }
.chat-rtop { display: flex; gap: 8px; align-items: baseline; }
.chat-rt { font-size: 14px; font-weight: 700; letter-spacing: -.012em; line-height: 1.32; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.chat-rorigin { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.chat-age { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .05em; margin-left: auto; flex: none; }
.chat-rmeta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 9px; }

/* kind badge: the brief's mono rectangle, never the 999px session pill — DELIB must not read as
   a session state chip like WORKING or IDLE */
.chat-kbadge {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 6px; color: var(--muted); border: 1px solid var(--border-2); background: var(--panel-2);
}
.chat-kbadge.k-delib { color: var(--blue); border-color: rgba(91,140,255,.4); background: rgba(91,140,255,.12); }
.chat-kbadge.k-verif { color: var(--amber); border-color: rgba(231,169,12,.42); background: rgba(231,169,12,.10); }
.chat-kbadge.k-closed { color: var(--muted-2); border-color: var(--border-2); background: var(--panel-3); }
.chat-count { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .05em; }
.chat-chain { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--muted-2); letter-spacing: .04em; }
.chat-chain b { color: var(--green); font-weight: 800; }
.chat-chain.bad b { color: var(--red); }
.chat-livechip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--green);
  background: rgba(47,178,124,.14); border: 1px solid rgba(47,178,124,.4); padding: 2px 6px; border-radius: 6px;
}
.chat-livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.chat-seats { display: inline-flex; gap: 3px; align-items: center; }
.chat-seats i { width: 7px; height: 7px; border-radius: 50%; display: block; }

/* family colours, one source for the whole view. grok = VIOLET, not red: red is this app's alarm
   hue (needs-you, blocked, outgoing money) and a red seat would read as a problem. */
.chat .f-human, .chat-legend .f-human { background: var(--amber); }
.chat .f-claude, .chat-legend .f-claude { background: var(--blue); }
.chat .f-gpt, .chat-legend .f-gpt { background: var(--green); }
.chat .f-grok, .chat-legend .f-grok { background: var(--violet); }
.chat .f-other, .chat-legend .f-other { background: var(--muted); }

.chat-legend {
  margin-top: 16px; padding: 11px 12px; border: 1px dashed var(--border-2); border-radius: 11px;
  color: var(--muted); font-size: 12px; line-height: 1.9;
}
.chat-legend .lg { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; white-space: nowrap; }
.chat-legend i { width: 8px; height: 8px; border-radius: 50%; display: block; flex: none; }
.chat-legend .fam { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }

/* ---- room header (thread) ---- */
/* the room header is one line (owner 22.09.2026): the chip with the same clear space above and below it */
.chat-rmhead { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 4px; }
.chat-rmline { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; min-width: 0; }
.chat-rchip {
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 3px 9px; background: transparent;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: none; max-width: 100%;
}
.chat-rchip i { width: 8px; height: 8px; border-radius: 2px; display: block; flex: none; }
.chat-rchip[aria-expanded="true"] { color: var(--text); border-color: var(--border-2); }
.chat-rmname { font-weight: 800; font-size: 14px; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chat-room-tools-open { margin: 0 12px 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.chat-rmback { background: transparent; border: 0; color: var(--blue); font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; display: inline-flex; align-items: center; flex: none; }
.chat-rmback:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.chat-rmback .bk { color: var(--blue); font-size: 13px; }
/* the expand button at the right of the room line (owner 22.09.2026, "+ expand button on the right"): the header
   icons' own ghost frame and size (the gear's 39 x 32, 26 px on the phone like the header's icon row); open = the
   text colour, as the gear shows its own view. The chip beside it is a label now, not a hidden control. */
.chat-rmline .chat-rchip { cursor: default; }
.chat-rmexpand {
  margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 39px; height: 32px; padding: 0;
  font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
}
.chat-rmexpand[aria-expanded="true"] { color: var(--text); border-color: var(--border-2); }
.chat-rmexpand:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* the room's progress card: the bound board card at the top of every room that has one (owner 22.09.2026) */
.chat-pcards { display: grid; gap: 6px; margin: 2px 12px 8px; min-width: 0; }
.chat-pcard {
  display: grid; gap: 4px; width: 100%; min-width: 0; margin: 0; text-align: left; font: inherit; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border); border-left: 2px solid var(--blue); border-radius: 8px;
  padding: 8px 10px;
}
.chat-pcard.is-tap { cursor: pointer; }
.chat-pcard.is-tap:hover { border-color: var(--border-2); border-left-color: var(--blue); }
.chat-pcard.is-tap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.chat-pcard-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-pcard-status {
  flex: none; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border-2); border-radius: 5px; padding: 1px 6px;
}
.chat-pcard-status.s-active { color: var(--blue); border-color: rgba(91,140,255,.45); }
.chat-pcard-status.s-blocked { color: var(--red); border-color: rgba(240,97,109,.45); }
.chat-pcard-status.s-done { color: var(--green); border-color: rgba(47,178,124,.45); }
.chat-pcard-title { min-width: 0; font-size: 13px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-pcard-lead {
  color: var(--muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-pcard-age { color: var(--muted-2); font-size: 11px; }
@media (max-width: 600px) {
  .chat-rmexpand { width: 26px; height: 26px; }
  .chat-pcard-lead { -webkit-line-clamp: 4; }
}
/* the same card in the chat widget's room: the phone's four-line cap at every width, and the stack capped in height so
   a room with several bound cards keeps its feed in view (the rest scrolls inside the stack) */
.chat-pcards.is-compact { margin: 6px 10px 2px; max-height: 172px; overflow-y: auto; flex: none; }
.chat-pcards.is-compact .chat-pcard { padding: 7px 9px; }
.chat-pcards.is-compact .chat-pcard-lead { -webkit-line-clamp: 4; }
.chat-rmtitle { font-size: 17px; font-weight: 800; letter-spacing: -.022em; line-height: 1.22; margin: 0; overflow-wrap: anywhere; }
.chat-rmchips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.chat-dtag {
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px;
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow-wrap: anywhere;
}
.chat-dtag i { width: 7px; height: 7px; border-radius: 2px; display: block; flex: none; }

.chat-chainrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.chat-chainstate {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px;
  font-weight: 800; letter-spacing: .12em; padding: 3px 9px; border-radius: 6px;
  color: var(--muted); border: 1px solid var(--border-2); background: var(--panel-2);
}
.chat-chainstate i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.chat-chainstate.s-ok { color: var(--green); border-color: rgba(47,178,124,.45); background: rgba(47,178,124,.10); }
.chat-chainstate.s-ok i { background: var(--green); }
.chat-chainstate.s-bad { color: var(--red); border-color: rgba(240,97,109,.45); background: rgba(240,97,109,.10); }
.chat-chainstate.s-bad i { background: var(--red); }
.chat-chainstate.s-unknown { color: var(--muted); border-color: var(--border-2); }
.chat-chainmeta { font-family: var(--mono); font-size: 11px; color: var(--muted-2); letter-spacing: .04em; }
.chat-chainbtn {
  margin-left: auto; background: transparent; border: 1px solid var(--border-2); border-radius: 8px;
  color: var(--muted); padding: 4px 9px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.chat-chainbtn:disabled { opacity: .55; cursor: default; }

/* Room Join/Copy launch paste strip (fleet-launch plan 2026-07-29) */
.chat-launch { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.chat-launch-label {
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px;
}
.chat-launch-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chat-launch-btn {
  background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 8px;
  color: var(--text); padding: 7px 11px; font-size: 12px; font-weight: 700;
  min-height: 36px; /* phone glass tap target */
}
.chat-launch-btn.ok { color: var(--green); border-color: rgba(47,178,124,.45); background: rgba(47,178,124,.10); }
.chat-launch-btn.bad { color: var(--red); border-color: rgba(240,97,109,.45); background: rgba(240,97,109,.10); }
.chat-launch-cwd {
  margin-top: 7px; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; color: var(--muted-2); overflow-wrap: anywhere;
}

.chat-nest { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; }
.chat-nest-label {
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px;
}
.chat-nest-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: stretch; min-width: 0; }
.chat-nest-title {
  flex: 1 1 12rem; min-width: 0; min-height: 36px;
  background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px;
}
.chat-nest-title::placeholder { color: var(--muted-2); }
.chat-nest-submit {
  min-height: 36px; padding: 7px 14px;
  background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 8px;
  color: var(--text); font-size: 12px; font-weight: 700;
}
.chat-nest-submit:disabled { opacity: .55; cursor: default; }
.chat-nest-err { color: var(--red); font-size: 12px; line-height: 1.5; margin: 8px 0 0; overflow-wrap: anywhere; }
.chat-nest-notice { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 8px 0 0; overflow-wrap: anywhere; }

/* ---- room-local work ledger: claims make NOW; assigned seat is authority ---- */
.chat-work { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; }
.chat-work-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chat-work-head span, .chat-work-label, .chat-work-id, .chat-work-state, .chat-work-meta dt, .chat-work-orphaned span {
  font-family: var(--mono); font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.chat-work-head span { color: var(--muted); font-size: 10px; }
.chat-work-head small { color: var(--muted-2); font-size: 10px; line-height: 1.4; flex: 1 1 12rem; }
.chat-work-refresh {
  margin-left: auto; min-height: 36px; min-width: 72px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text);
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
}
.chat-work-refresh:disabled { opacity: .55; cursor: default; }
.chat-work-beat { min-width: 0; }
.chat-work-beat + .chat-work-beat { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.chat-work-label { display: flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 10px; }
.chat-work-label span { color: var(--muted); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 5px; }
.chat-work-beat.now .chat-work-label { color: var(--green); }
.chat-work-beat.now .chat-work-label span { color: var(--green); border-color: rgba(47,178,124,.4); }
.chat-work ol { display: grid; gap: 7px; margin: 7px 0 0; padding: 0; list-style: none; min-width: 0; }
.chat-work-row { min-width: 0; padding: 8px 9px; border-left: 2px solid var(--border-2); background: var(--panel-2); }
.chat-work-row.is-now { border-left-color: var(--green); background: rgba(47,178,124,.06); }
.chat-work-main { min-width: 0; display: grid; gap: 2px; }
.chat-work-main strong { min-width: 0; color: var(--text); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.chat-work-id { min-width: 0; color: var(--muted-2); font-size: 9px; overflow-wrap: anywhere; }
.chat-work-state { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; color: var(--muted); font-size: 9px; }
.chat-work-state span + span { padding-left: 6px; border-left: 1px solid var(--border-2); }
.chat-work-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; margin: 7px 0 0; min-width: 0; }
.chat-work-meta div { min-width: 0; }
.chat-work-meta dt { color: var(--muted-2); font-size: 8px; }
.chat-work-meta dd { margin: 2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.chat-work-ref { grid-column: 1 / -1; }
.chat-work-empty { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.chat-work-error { margin: 0 0 8px; color: var(--red); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-work-orphaned { margin-top: 9px; padding: 8px 9px; border-left: 2px solid var(--amber); background: rgba(231,169,12,.07); min-width: 0; }
.chat-work-orphaned span { color: var(--amber); font-size: 9px; }
.chat-work-orphaned p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-work-stack { min-width: 0; }
.chat-work-bind {
  margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0;
}
.chat-work-bind-head {
  color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.chat-work-bind-fields { display: grid; gap: 8px; margin-top: 8px; min-width: 0; }
.chat-work-bind-field { display: grid; gap: 4px; min-width: 0; color: var(--muted-2); font-size: 10px; }
.chat-work-bind-field select {
  min-width: 0; width: 100%; min-height: 36px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text);
  font-family: var(--mono); font-size: 11px;
}
.chat-work-bind-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px;
  margin: 8px 0 0; min-width: 0;
}
.chat-work-bind-meta dt { color: var(--muted-2); font-size: 8px; font-family: var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.chat-work-bind-meta dd { margin: 2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.chat-work-bind-path { grid-column: 1 / -1; min-width: 0; }
.chat-work-bind-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; min-width: 0; }
.chat-work-bind-submit, .chat-work-bind-refresh {
  min-height: 36px; min-width: 72px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text);
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
}
.chat-work-bind-submit:disabled, .chat-work-bind-refresh:disabled { opacity: .55; cursor: default; }
.chat-work-bind-error, .chat-work-bind-status {
  margin: 8px 0 0; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere;
}
.chat-work-bind-error { color: var(--red); }
.chat-work-bind-status { color: var(--muted); }

/* ---- participant-readable room presence and owner lifecycle controls ---- */
.chat-presence-shell { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; }
.chat-presence { min-width: 0; }
.chat-presence > summary {
  min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  list-style: none; cursor: pointer; border-radius: 8px; padding: 5px 7px;
  color: var(--text); -webkit-tap-highlight-color: rgba(91,140,255,.14);
}
.chat-presence > summary::-webkit-details-marker { display: none; }
.chat-presence > summary::after {
  content: "+"; margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--border-2); border-radius: 6px; color: var(--muted); font-family: var(--mono);
}
.chat-presence[open] > summary::after { content: "-"; }
.chat-presence > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.chat-presence-title {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.chat-presence-title i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; }
.chat-presence-summary { font-family: var(--mono); font-size: 10px; line-height: 1.45; color: var(--muted); }
.chat-presence-body { padding: 5px 7px 2px; min-width: 0; }
.chat-presence-law {
  margin: 0 0 10px; color: var(--muted-2); font-family: var(--mono); font-size: 10px; line-height: 1.55;
}
.chat-presence-error, .chat-presence-notice, .chat-presence-conflict {
  margin: 0 0 10px; padding: 9px 10px; border-radius: 8px; font-size: 12px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.chat-presence-error, .chat-presence-conflict {
  color: var(--red); background: rgba(240,97,109,.08); border: 1px solid rgba(240,97,109,.4);
}
.chat-presence-notice {
  color: var(--green); background: rgba(47,178,124,.08); border: 1px solid rgba(47,178,124,.35);
}
.chat-presence-empty { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.chat-presence-family { margin-top: 11px; min-width: 0; }
.chat-presence-family h3 {
  margin: 0 0 7px; display: flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.chat-presence-family h3 i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.chat-presence-family.s-human h3 i { background: var(--amber); }
.chat-presence-family.s-claude h3 i { background: var(--blue); }
.chat-presence-family.s-gpt h3 i { background: var(--green); }
.chat-presence-family.s-grok h3 i { background: var(--violet); }
.chat-presence-family h3 span { margin-left: auto; color: var(--muted-2); letter-spacing: .04em; text-transform: none; }
.chat-presence-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px; min-width: 0;
}
.chat-presence-instance {
  min-width: 0; background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--muted);
  border-radius: 9px; padding: 10px;
}
.chat-presence-instance.s-human { border-left-color: var(--amber); }
.chat-presence-instance.s-claude { border-left-color: var(--blue); }
.chat-presence-instance.s-gpt { border-left-color: var(--green); }
.chat-presence-instance.s-grok { border-left-color: var(--violet); }
.chat-presence-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.chat-presence-status {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-2); border-radius: 6px;
  padding: 3px 7px; font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); background: var(--panel-3);
}
.chat-presence-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chat-presence-status.is-active { color: var(--green); border-color: rgba(47,178,124,.4); }
.chat-presence-status.is-recent { color: var(--amber); border-color: rgba(231,169,12,.4); }
.chat-presence-status.is-disconnected { color: var(--muted); }
.chat-presence-age { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--muted-2); }
.chat-presence-identity { margin-top: 9px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.chat-presence-identity strong { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.chat-presence-identity span { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.chat-presence-id {
  display: block; margin-top: 4px; color: var(--muted-2); font-family: var(--mono); font-size: 9.5px;
  line-height: 1.45; overflow-wrap: anywhere; word-break: break-word;
}
.chat-presence-meta { margin: 9px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; min-width: 0; }
.chat-presence-meta div { min-width: 0; }
.chat-presence-meta dt {
  font-family: var(--mono); font-size: 8.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
.chat-presence-meta dd { margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.chat-presence-meta code { font-family: var(--mono); font-size: 10px; overflow-wrap: anywhere; word-break: break-word; }
.chat-presence-ref { grid-column: 1 / -1; }
.chat-presence-stopped, .chat-presence-disconnected, .chat-presence-lifecycle {
  margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px;
  line-height: 1.5; color: var(--muted);
}
.chat-presence-stopped { color: var(--red); }
.chat-presence-manage {
  width: 100%; min-width: 0; min-height: 44px; margin-top: 10px; border: 1px solid var(--border-2);
  border-radius: 8px; background: var(--panel-3); color: var(--text); font-size: 12px; font-weight: 800;
}
.chat-presence-manage:hover { border-color: var(--blue); }
/* Nested helper chips under the parent instance card. Not extra seats. Not ADD-8 compact post chrome. */
.chat-presence-helpers {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border-2); min-width: 0;
}
.chat-presence-helpers-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 7px;
}
.chat-presence-helpers-label {
  font-family: var(--mono); font-size: 8.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
.chat-presence-helpers-note {
  font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: .04em;
}
.chat-presence-helper-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chat-presence-helper {
  display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%;
  padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--panel-3);
}
.chat-presence-helper-name {
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text);
}
.chat-presence-helper-task {
  font-size: 11px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere;
}
.chat-presence-helper.is-empty { border-style: dashed; opacity: .7; }
.chat-presence-helper.is-empty .chat-presence-helper-task {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
}
.chat-presence-manage:focus-visible,
.chat-presence-actions button:focus-visible,
.chat-presence-field select:focus-visible,
.chat-presence-field input:focus-visible,
.chat-presence-field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.chat-presence-wrap { z-index: 55; }
.chat-presence-editor-id {
  margin: 0 0 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0;
}
.chat-presence-editor-id code {
  min-width: 0; flex: 1; font-family: var(--mono); font-size: 10px; color: var(--muted);
  overflow-wrap: anywhere; word-break: break-word;
}
.chat-presence-field {
  display: block; margin-top: 12px; color: var(--muted); font-family: var(--mono); font-size: 10px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.chat-presence-field select,
.chat-presence-field input,
.chat-presence-field textarea {
  width: 100%; min-width: 0; min-height: 44px; margin-top: 6px; padding: 10px;
  border: 1px solid var(--border-2); border-radius: 8px; background: var(--panel-3); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.chat-presence-field textarea { min-height: 86px; resize: vertical; }
.chat-presence-field select:disabled,
.chat-presence-field input:disabled,
.chat-presence-field textarea:disabled { opacity: .6; }
.chat-presence-editor .sheet-x { min-width: 44px; min-height: 44px; }
.chat-presence-actions {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px 14px 14px;
}
.chat-presence-actions button {
  width: 100%; min-width: 0; min-height: 44px; border-radius: 10px; font-size: 13px; font-weight: 800;
}
.chat-presence-actions button:disabled { opacity: .55; cursor: default; }
.chat-presence-save { border: 0; color: #06101f; background: var(--blue); }
.chat-presence-stop { color: var(--red); border: 1px solid rgba(240,97,109,.45); background: rgba(240,97,109,.10); }
.chat-presence-resume { color: var(--green); border: 1px solid rgba(47,178,124,.45); background: rgba(47,178,124,.10); }

@media (max-width: 600px) {
  .chat-work-meta { grid-template-columns: minmax(0, 1fr); }
  .chat-work-ref { grid-column: auto; }
  .chat-work-refresh { width: 100%; margin-left: 0; }
  .chat-work-bind, .chat-work-bind-fields, .chat-work-bind-meta { min-width: 0; }
  .chat-work-bind-meta { grid-template-columns: minmax(0, 1fr); }
  .chat-work-bind-path { grid-column: auto; }
  .chat-work-bind-actions { flex-direction: column; }
  .chat-work-bind-submit, .chat-work-bind-refresh { width: 100%; min-height: 36px; margin-left: 0; }
  .chat-presence > summary { align-items: flex-start; }
  .chat-presence-summary { flex: 1 1 calc(100% - 118px); }
  .chat-presence-list { grid-template-columns: minmax(0, 1fr); }
  .chat-presence-meta { grid-template-columns: minmax(0, 1fr); }
  .chat-presence-ref { grid-column: auto; }
  .chat-presence-age { margin-left: 0; }
  .chat-presence-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- feed ---- */
.chat-feed-shell { display: flex; flex-direction: column; }
.chat-pinned-rail {
  display: flex; flex-direction: column; gap: 9px; margin-bottom: 13px; padding-bottom: 13px;
  border-bottom: 1px solid var(--border-2);
}
.chat-pinned-label {
  margin: 0; color: var(--amber); font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.chat-pin-row {
  background: var(--panel); border: 1px solid rgba(231,169,12,.3); border-radius: 10px; overflow: hidden;
}
.chat-pin-summary {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 11px;
  background: transparent; border: 0; text-align: left; cursor: pointer; color: var(--text);
}
.chat-pin-summary:hover { background: rgba(231,169,12,.06); }
.chat-pin-summary:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.chat-pin-preview {
  flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-pin-caret {
  flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(231,169,12,.12); color: var(--amber); font-weight: 800; font-size: 13px;
}
/* the row's own PostCard, when expanded — the pin already names the question, so the card chrome
   (header, feed body, quote, refs) stays off at every width. The live body lives in the answer
   panel (OwnerBlockerActions showQuestion), the same place the phone dock puts it. Without this,
   a wide screen expanded the pin into an answer box with no question in the panel, and the feed
   copy of the body sat above it as a second post rather than as the thing being answered. */
.chat-pin-row .chat-post {
  border: 0; border-radius: 0; border-top: 1px solid rgba(231,169,12,.3);
  padding: 0; background: transparent; overflow: visible;
}
.chat-pin-row .chat-post::before { display: none; }
.chat-pin-row .chat-post .chat-phead,
.chat-pin-row .chat-post .chat-pbody,
.chat-pin-row .chat-post .chat-pmodel,
.chat-pin-row .chat-post .chat-quote-btn,
.chat-pin-row .chat-post .chat-refs { display: none; }
.chat-feed { display: flex; flex-direction: column; gap: 6px; }
.chat-feed-more {
  align-self: center; margin-top: 11px; min-height: 40px; padding: 0 16px; background: var(--panel-2);
  border: 1px solid var(--border-2); border-radius: 8px; font-family: var(--mono); font-size: 11px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer;
}
.chat-feed-more:hover { color: var(--text); border-color: var(--border); }
.chat-feed-more:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.chat-feed-loading {
  margin: 11px 0 0; text-align: center; color: var(--muted-2); font-size: 12px; font-style: italic;
}
.chat-post {
  position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px 8px 12px;
}
.chat-post::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-2); }
.chat-post.s-human::before { background: var(--amber); }
.chat-post.s-claude::before { background: var(--blue); }
.chat-post.s-gpt::before { background: var(--green); }
.chat-post.s-grok::before { background: var(--violet); }
.chat-post.is-target {
  border-color: var(--amber); box-shadow: 0 0 0 2px rgba(231,169,12,.22);
}
.chat-post.is-target:focus { outline: 2px solid var(--amber); outline-offset: 3px; }
.chat-phead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-seat {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px;
  font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
  color: var(--muted); border: 1px solid var(--border-2); background: var(--panel-2);
}
.chat-seat i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--muted); }
.chat-seat .fam { color: var(--muted-2); letter-spacing: .06em; font-weight: 700; }
/* A name he can press to write to that seat (owner, 2026-09-09). It is a real button, so the browser
   would otherwise impose its own font and chrome; every visible property is inherited from .chat-seat
   above so a pressable name looks exactly like the name beside it, with only the cursor and a focus
   ring to say it can be pressed. */
button.chat-seat.is-addressable {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  font: inherit; font-family: var(--mono); font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
}
button.chat-seat.is-addressable:hover { border-color: var(--border); }
button.chat-seat.is-addressable:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.chat-seat.s-human { color: var(--amber); border-color: rgba(231,169,12,.42); background: rgba(231,169,12,.10); }
.chat-seat.s-human i { background: var(--amber); }
.chat-seat.s-claude { color: var(--blue); border-color: rgba(91,140,255,.4); background: rgba(91,140,255,.12); }
.chat-seat.s-claude i { background: var(--blue); }
.chat-seat.s-gpt { color: var(--green); border-color: rgba(47,178,124,.4); background: rgba(47,178,124,.12); }
.chat-seat.s-gpt i { background: var(--green); }
.chat-seat.s-grok { color: var(--violet); border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.12); }
.chat-seat.s-grok i { background: var(--violet); }
/* tier is NOT drawn on a post (server-stamped, auditable) — header shows label, family, kind,
   live presence model/effort (chat-pmodel), seq and clock. Never parse body_md for the chip. */
.chat-pkind {
  font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}
.chat-pmodel {
  font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--muted-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
  overflow-wrap: anywhere; max-width: 100%;
}
.chat-pseq { font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--muted-2); letter-spacing: .04em; margin-left: auto; }
.chat-ptime { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.chat-pbody { font-size: 14px; line-height: 1.5; margin: 6px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-pimg {
  display: block; max-width: 100%; height: auto; margin: 9px 0 0;
  border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2);
}
.chat-pfile {
  display: inline-flex; align-items: center; max-width: 100%; margin: 9px 0 0;
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 999px; padding: 7px 12px; font-size: 13px; min-height: 36px;
  text-decoration: none; overflow-wrap: anywhere;
}

/* ---- richer posts: a small markdown subset (bold, inline code, fenced code, lists, tables, quotes) ---- */
.chat-md-pre {
  margin: 9px 0 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.chat-md-pre code { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--text); white-space: pre; }
.chat-md-code {
  font-family: var(--mono); font-size: 12.5px; background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 4px; padding: 1px 5px;
}
.chat-md-list { margin: 9px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.chat-md-list li { margin-top: 3px; }
.chat-md-quote {
  margin: 9px 0 0; padding: 1px 0 1px 11px; border-left: 3px solid var(--border-2); color: var(--muted);
  font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap;
}
/* the house law for wide content: a table scrolls inside its own container, the page never does */
.chat-md-tablewrap { margin: 9px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 8px; }
.chat-md-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: 100%; }
.chat-md-table th, .chat-md-table td { padding: 5px 9px; border-bottom: 1px solid var(--border-2); text-align: left; white-space: nowrap; }
.chat-md-table thead th { color: var(--muted-2); font-weight: 800; background: var(--panel-2); }
.chat-md-table tbody tr:last-child td { border-bottom: 0; }

.chat-quote-btn {
  display: inline-block; margin-top: 6px; background: transparent; border: 1px solid var(--border-2);
  border-radius: 6px; padding: 3px 8px; font-family: var(--mono); font-size: 9.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); cursor: pointer;
}
.chat-quote-btn:hover { color: var(--text); border-color: var(--border); }
.chat-quote-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- refs: inline links (ADD-8 mock .rlinks/.rlink) — not bordered POST/CARD/FILE rows ---- */
.chat-rlinks { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.chat-rlink {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere;
}
.chat-rlink.r-post { color: var(--violet); }
.chat-rlink.r-card { color: var(--blue); }
.chat-rlink.r-file { color: var(--muted); font-size: 10.5px; word-break: break-all; }
.chat-rlink.r-url { color: var(--blue); }
.chat-rlink.r-text { color: var(--muted); }
.chat-rlink.r-card.is-tap { cursor: pointer; }
.chat-rlink.r-card.is-tap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- exact owner action on one structured blocker question ---- */
.chat-owner-actions {
  margin-top: 11px; padding: 10px; border: 1px solid rgba(231,169,12,.38);
  border-radius: 10px; background: rgba(231,169,12,.07);
}
.chat-owner-label {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin: 0 0 8px; color: var(--amber); font-size: 12px; font-weight: 800;
}
/* The question, readable from the panel he answers in (owner, 2026-09-09). It was one ellipsized
   line; it is now the whole body in a bounded scroller, so the answer box and the three buttons
   below it never leave the screen however long the question is. Both heights scroll. */
.chat-owner-qwrap { margin: 0 0 8px; }
.chat-owner-q {
  max-height: 30vh; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px; border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--panel-3); color: var(--text); font-size: 13px; line-height: 1.45;
}
.chat-owner-qwrap.is-tall .chat-owner-q { max-height: 60vh; }
.chat-owner-q:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.chat-owner-qseq {
  margin: 0 0 4px; color: var(--muted-2); font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .05em;
}
.chat-owner-qp { margin: 0 0 7px; }
.chat-owner-qp:last-child { margin-bottom: 0; }
.chat-owner-qmore {
  margin-top: 6px; min-height: 32px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--border-2); background: var(--panel-3); color: var(--muted);
  font-size: 11px; font-weight: 700;
}
.chat-owner-label span {
  color: var(--muted); font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em;
}
.chat-owner-answer {
  width: 100%; min-height: 74px; resize: none; overflow-y: hidden; border: 1px solid var(--border-2);
  border-radius: 8px; background: var(--panel-3); color: var(--text); padding: 9px 10px;
  font: inherit; font-size: 13px;
}
.chat-owner-answer:disabled { opacity: .65; }
.chat-owner-buttons {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px;
}
.chat-owner-buttons button {
  min-width: 0; min-height: 44px; border-radius: 8px; font-size: 12px; font-weight: 800;
}
.chat-owner-buttons button:disabled { opacity: .45; cursor: not-allowed; }
.chat-owner-answer-btn { border: 0; background: var(--blue); color: #06101f; }
.chat-owner-wait {
  border: 1px solid rgba(231,169,12,.45); background: rgba(231,169,12,.10); color: var(--amber);
}
.chat-owner-cancel {
  border: 1px solid rgba(240,97,109,.45); background: rgba(240,97,109,.10); color: var(--red);
}
.chat-owner-error { color: var(--red); font-size: 12px; line-height: 1.45; margin: 8px 0 0; }
.chat-owner-law {
  color: var(--muted-2); font-family: var(--mono); font-size: 9.5px; line-height: 1.5;
  margin: 8px 0 0;
}
/* A question its own seat withdrew: a quiet closed note, never an answered state. */
.chat-withdrawn {
  color: var(--muted-2); font-size: 12px; line-height: 1.45; margin: 8px 0 0;
  overflow-wrap: anywhere;
}

/* ---- verdict: violet = "not yet fact". Never green, which would read as confirmed truth. ---- */
.chat-post.p-verdict { background: linear-gradient(180deg, rgba(167,139,250,.10), var(--panel)); border-color: rgba(167,139,250,.4); }
.chat-post.p-verdict::before { background: var(--violet); }
.chat-verdict {
  margin-top: 8px; border: 1px solid rgba(167,139,250,.4); border-radius: 10px;
  padding: 8px 10px; background: rgba(167,139,250,.06);
}
.chat-vtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-vbadge { font-family: var(--mono); font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--violet); }
.chat-vfams { display: inline-flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.chat-famchip {
  font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 5px; padding: 2px 6px; display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); border: 1px solid var(--border-2); background: var(--panel-2);
}
.chat-famchip i { width: 6px; height: 6px; border-radius: 50%; display: block; background: var(--muted); }
.chat-famchip.s-human { color: var(--amber); border-color: rgba(231,169,12,.42); background: rgba(231,169,12,.10); }
.chat-famchip.s-human i { background: var(--amber); }
.chat-famchip.s-claude { color: var(--blue); border-color: rgba(91,140,255,.4); background: rgba(91,140,255,.12); }
.chat-famchip.s-claude i { background: var(--blue); }
.chat-famchip.s-gpt { color: var(--green); border-color: rgba(47,178,124,.4); background: rgba(47,178,124,.12); }
.chat-famchip.s-gpt i { background: var(--green); }
.chat-famchip.s-grok { color: var(--violet); border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.12); }
.chat-famchip.s-grok i { background: var(--violet); }
.chat-vbody { font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; margin: 9px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
/* the hatch sentence, inside EVERY verdict block — a verdict read on its own carries its own limits */
.chat-vlaw {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--muted); margin: 9px 0 0;
  padding-top: 9px; border-top: 1px solid rgba(167,139,250,.28);
}

/* ---- composer (UI token only) ---- */
/* Sticky at the bottom, and bled past main's own padding (18px, 12px on a phone) so the frosted bar
   reaches both screen edges — the header's existing blur idiom, not a new one. Without the bleed the
   feed scrolls visibly through the gutters either side of the bar. */
.chat-composer {
  position: sticky; bottom: 0; z-index: 5;
  background: rgba(10,13,19,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  margin: 12px -18px 0; padding: 6px 18px;
}
.chat-cvoice { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.chat-who { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.chat-carea {
  width: 100%; background: var(--panel-3); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 8px; padding: 10px; min-height: 62px; resize: none; overflow-y: hidden;
  font: inherit; font-size: 14px;
}
.chat-carea::placeholder { color: var(--muted-2); }
.chat-carea:disabled { opacity: .6; }
.chat-crow { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.chat-cmic {
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--muted);
  border-radius: 999px; padding: 7px 12px; font-size: 13px; min-height: 36px;
}
.chat-cmic.on { background: var(--blue); border-color: var(--blue); color: #07101f; font-weight: 700; }
.chat-cmic:disabled { opacity: .45; cursor: not-allowed; }
.chat-cattach {
  position: relative; display: inline-flex; align-items: center;
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--muted);
  border-radius: 999px; padding: 7px 12px; font-size: 13px; min-height: 36px;
  overflow: hidden;
}
.chat-cattach.on { background: var(--blue); border-color: var(--blue); color: #07101f; font-weight: 700; }
.chat-cattach input[type="file"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.chat-cattach:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.chat-cattach:has(input:disabled) input[type="file"] { cursor: not-allowed; }
.comment-cattach {
  position: relative; display: inline-flex; align-items: center;
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--muted);
  border-radius: 999px; padding: 7px 12px; font-size: 13px; min-height: 36px;
  overflow: hidden;
}
.comment-cattach.on { background: var(--blue); border-color: var(--blue); color: #07101f; font-weight: 700; }
.comment-cattach input[type="file"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.comment-cattach:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.comment-cattach:has(input:disabled) input[type="file"] { cursor: not-allowed; }
.chat-cinterim { font-family: var(--mono); font-size: 12px; color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
/* Olivia (owner, fleet room 13128, 27.09.2026; Olivia rework DESIGN.md V22): one shared voice button, in the chat
   bubbles' rail on every page and in the composer in Chat, where the Dictate button was. Her window and the read-back
   strip share one dock at the bottom that takes its own space: while it shows, the page gains bottom padding of its
   height and the bubbles, the chat composer and the room panels sit above it, so it covers no row, bubble or chat
   button. Only the app's own tokens and its .chip class. */
.ol-vbtn { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  background: var(--panel-2); border: 2px solid var(--border-2); color: var(--muted); box-shadow: 0 6px 18px rgba(0,0,0,.45);
  cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ol-vbtn svg { width: 22px; height: 22px; display: block; }
.ol-vbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.ol-vbtn.listening { border-color: var(--green); color: var(--green); }
.ol-vbtn.talking { border-color: var(--blue); color: var(--blue); }
.ol-vbtn.working { border-color: var(--violet); color: var(--violet); }
.ol-vbtn.waiting { border-color: var(--amber); color: var(--amber); background: linear-gradient(rgba(231,169,12,.16), rgba(231,169,12,.16)), var(--panel-2); }
.ol-vbtn .ol-dots { font-size: 20px; line-height: 1; letter-spacing: 1px; }
.ol-vbtn .ol-q { font-size: 12px; font-weight: 800; line-height: 1; }
/* Computer use with voice (C:\Atlas\Builds\computer-use-voice\SPEC.md 4.4): while his words steer the computer, a small
   "Computer" mark sits on the button's lower edge. */
.ol-vbtn .ol-pc { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 1px 4px; border-radius: 6px;
  background: var(--blue); color: #fff; font-size: 8px; font-weight: 800; line-height: 1.2; letter-spacing: .2px; white-space: nowrap; pointer-events: none; }
.ol-vbtn.at-composer .ol-pc { bottom: -6px; font-size: 7px; }
@media (prefers-reduced-motion: no-preference) { .ol-vbtn.listening { animation: ol-listen 2.4s ease-in-out infinite; } }
@keyframes ol-listen { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,178,124,.35), 0 6px 18px rgba(0,0,0,.45); } 50% { box-shadow: 0 0 0 6px rgba(47,178,124,0), 0 6px 18px rgba(0,0,0,.45); } }
.cw-root.is-phone .ol-vbtn.at-rail { width: 44px; height: 44px; }
.ol-vbtn.at-composer { width: 36px; height: 36px; box-shadow: none; }
.ol-vbtn.at-composer svg { width: 18px; height: 18px; }
/* A docked room on a desktop sits beside the rail, which carries the button; on a phone an open room hides the rail and
   its own composer carries it. */
.cw-root:not(.is-phone) .cw-compose .ol-vbtn { display: none; }
/* The Chat view's dock (chat.js ChatVoiceDock): shown only while the phone rule of 9 September hides the idle composer
   for a pinned question, with exactly that rule's condition, so the button is never in two places and never missing. It
   sits where the rail sits on a phone, lifted above the docked answer panel and her dock; presses pass through all but
   the button. Round 10 (acceptance check 1 rerun): her dock lifts the docked panel itself by its own height
   (html.ol-docked .chat-owner-actions below), so the panel's top is at the SUM of the two heights and the button sits
   above that sum; --chat-owner-h is 0 while the panel is in the feed flow and --ol-dock-h is unset while she is closed. */
.chat-voice-dock { display: none; }
@media (max-width: 600px) {
  .chat:has(.chat-pinned-rail):has(.chat-composer:not(:focus-within):not(.has-draft)) .chat-voice-dock {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    position: fixed; right: 12px; bottom: 0; z-index: 33; pointer-events: none;
    padding-bottom: calc(var(--chat-owner-h, 0px) + var(--ol-dock-h, 0px) + 14px);
  }
  .chat-voice-dock .ol-vbtn { pointer-events: auto; width: 44px; height: 44px; }
}
.ol-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 33; pointer-events: none; display: flex; justify-content: flex-end; }
.ol-dock.on { padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.ol-dock:not(.on) .ol-dock-in { display: none; }
.ol-dock-in { pointer-events: auto; width: min(560px, 100%); display: flex; flex-direction: column; gap: 8px; }
html.ol-spaced #app { padding-bottom: var(--ol-bottom, 0px); }
/* Round 14: from 740 px the rail column sits beside the reading, so the page keeps a right inset and no
   full-width bottom reserve. Where that column is too wide to sit beside a 160 px reading slot, the stack
   is capped (--ol-stack-max) and the bottom reserve is that cap, so the header plus the stack leave the slot. */
html.ol-beside #app { padding-right: var(--ol-side, 0px); }
html.ol-beside:not(.ol-spaced) #app { padding-bottom: 0; }
html.ol-compact .ol-dock-in, html.ol-compact .ol-win { max-height: var(--ol-stack-max, 160px); overflow-y: auto; }
/* Round 12 (the red team at bd29e86, should-fix 1): on a phone, main's fixed 220 px reserve past the chat rail (the
   main:not(.chat) rules at 799 and 600 px and the Today and Map rule at 640 px) and the measured room above (--ol-bottom,
   the rail's reach with her dock beneath it, olivia.js watchRail) counted the rail twice on every view but Chat. While
   the rail carries her button, its room is measured, so each view keeps only its own padding and the reserve yields;
   without the button (no voice, or a phone with a room open, where the rail is not drawn) the reserve stands. Chat keeps
   round 11's rule. */
@media (max-width: 799px) {
  html.ol-spaced:has(.cw-rail .ol-vbtn) main:not(.chat) { padding-bottom: 18px; }
  /* Round 14: beside mode is not ol-spaced, and this block's 220 px reserve would otherwise return at 740. */
  html.ol-beside:not(.ol-spaced):has(.cw-rail .ol-vbtn) main:not(.chat) { padding-bottom: 18px; }
}
@media (max-width: 600px) {
  html.ol-spaced:has(.cw-rail .ol-vbtn) main:not(.chat) { padding-bottom: 12px; }
}
@media (max-width: 640px) {
  html.ol-spaced:has(.cw-rail .ol-vbtn) main.rd-today, html.ol-spaced:has(.cw-rail .ol-vbtn) main.rd-map { padding-bottom: 26px; }
}
html.ol-docked .cw-root { bottom: var(--ol-dock-h, 0px); }
/* Round 16 (placement check on the landing merge 6cfde4a, blocking finding 1): the composer lifts only while her dock
   lies under the reading column, the spaced layouts (a phone, or 740 px where the rail sits beside but the dock does
   not). Beside the reading (ol-beside without ol-spaced) the dock is in the right column and #app keeps no bottom
   reserve, so a lift there put the composer over the newest post and left a band below it; there the composer stays at
   its own sticky place at main's end, below the thread. */
html.ol-docked.ol-spaced .chat-composer { bottom: var(--ol-dock-h, 0px); }
html.ol-docked .err { bottom: calc(14px + var(--ol-dock-h, 0px)); }
html.ol-docked .toast { bottom: calc(22px + var(--ol-dock-h, 0px)); }
.ol-strip { display: flex; align-items: baseline; gap: 10px; background: var(--panel); border: 1px solid var(--amber); border-radius: 12px;
  box-shadow: var(--shadow); padding: 9px 12px; }
.ol-strip b { flex: none; color: var(--amber); font: 800 10px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ol-strip .ol-say { font-size: 14px; line-height: 1.4; max-height: 4.2em; overflow-y: auto; }
/* The result line (Olivia round 17, RULING-R17-SILENT-COMMAND-MODE.md points 1 and 3): voice mode is silent, so each
   result or failure shows here as short text, with the undo its act offers or the tap button an act outside Atlas stops
   at. Two lines at most; her window holds the whole line. */
.ol-strip.ol-result { align-items: center; border-color: var(--border-2); flex-wrap: nowrap; }
.ol-strip.ol-result.failure { border-color: var(--amber); }
.ol-strip.ol-result.tap { border-color: var(--blue); }
.ol-strip.ol-result .ol-say { flex: 1 1 auto; min-width: 0; max-height: 2.8em; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ol-strip.ol-result .chip { flex: none; min-height: 36px; }
.ol-strip.ol-result .ol-hide { padding: 7px 11px; }
.ol-win { background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; max-height: min(50vh, 400px); overflow-y: auto; }
.ol-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; }
.ol-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.ol-dot.listening { background: var(--green); box-shadow: 0 0 0 4px rgba(47,178,124,.18); }
.ol-dot.talking { background: var(--blue); box-shadow: 0 0 0 4px rgba(91,140,255,.18); }
.ol-dot.working { background: var(--violet); }
.ol-dot.waiting { background: var(--amber); box-shadow: 0 0 0 4px rgba(231,169,12,.18); }
.ol-name { font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; }
.ol-status { font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-end { margin-left: auto; flex: none; }
.ol-close { flex: none; }
.ol-talk, .ol-hear, .ol-link, .ol-trbtn { align-self: flex-start; }
.ol-target { outline: 2px solid var(--amber) !important; outline-offset: 2px; border-radius: 8px; }
.ol-link { text-decoration: none; display: inline-flex; align-items: center; }
.ol-line { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.ol-line.muted { color: var(--muted); }
.ol-trbtn { background: transparent; border: 0; padding: 2px 0; color: var(--blue); font-size: 12.5px; font-weight: 700; }
.ol-lines { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 6px; max-height: 160px; overflow-y: auto; min-height: 0; }
.ol-lines li { font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.ol-lines li b { color: var(--muted); font-weight: 700; margin-right: 6px; }
.ol-lines li.her b { color: var(--blue); }
.ol-say { font-size: 15px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.ol-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ol-err { margin: 0; font-size: 13px; line-height: 1.45; color: var(--amber); overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .ol-dock.on { padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .ol-dock-in { width: 100%; }
  html.ol-docked .chat-owner-actions { bottom: var(--ol-dock-h, 0px); }
}
/* Round 19 (his live test of 28.09.2026: "the box that transcribes my voice splits the screen in half"). While voice
   mode listens (olivia.js oliviaSlimDock), her dock is a slim strip across the bottom edge: the full width, so it never
   takes the column beside the reading that halved the page, and at most two lines, the result line and her state row,
   capped at min(12vh, 84px) plus the dock's 12px padding (olivia.js oliviaSlimHeight: 15 percent or less at 1440 by 900
   and at 390 by 844). Her whole window, with the transcript, comes back when he opens the transcript. */
.ol-dock.ol-slim.on { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
.ol-dock.ol-slim .ol-dock-in { width: 100%; gap: 4px; max-height: min(12vh, 84px); overflow: hidden; }
.ol-dock.ol-slim .ol-strip { padding: 4px 10px; border-radius: 10px; }
.ol-dock.ol-slim .ol-strip .ol-say, .ol-dock.ol-slim .ol-strip.ol-result .ol-say { font-size: 13.5px; line-height: 1.4; max-height: 1.4em;
  -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
/* Fix after the round-19 check (hold 4): the line he taps to approve an act, and any line that is not a result, keeps
   two lines (it states exactly what goes out); her state row steps aside while it shows, so the strip stays inside the cap. */
.ol-dock.ol-slim .ol-strip.tap .ol-say, .ol-dock.ol-slim .ol-strip:not(.ol-result) .ol-say { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; white-space: normal; max-height: 2.8em; }
.ol-dock.ol-slim:has(.ol-strip.tap, .ol-strip:not(.ol-result)) .ol-win { display: none; }
.ol-dock.ol-slim .ol-strip .chip, .ol-dock.ol-slim .ol-win .chip { min-height: 28px; padding: 3px 10px; font-size: 12px; }
.ol-dock.ol-slim .ol-win { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 4px 10px; max-height: 40px;
  overflow: hidden; border-radius: 10px; }
.ol-dock.ol-slim .ol-head { display: contents; }
.ol-dock.ol-slim .ol-dot, .ol-dock.ol-slim .ol-name, .ol-dock.ol-slim .ol-status { order: 0; }
.ol-dock.ol-slim .ol-line, .ol-dock.ol-slim .ol-err { order: 1; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.ol-dock.ol-slim .ol-win:has(.ol-err) .ol-line, .ol-dock.ol-slim .ol-note, .ol-dock.ol-slim .ol-lines, .ol-dock.ol-slim .ol-hear { display: none; }
.ol-dock.ol-slim .ol-talk, .ol-dock.ol-slim .ol-link, .ol-dock.ol-slim .ol-trbtn { order: 2; flex: none; align-self: center; }
.ol-dock.ol-slim .ol-end { order: 3; margin-left: 0; }
.ol-dock.ol-slim .ol-close { order: 4; }
@media (max-width: 600px) {
  .ol-dock.ol-slim .ol-name, .ol-dock.ol-slim .ol-status { display: none; }
}
.chat-csend { margin-left: auto; background: var(--blue); color: #06101f; border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 800; }
.chat-csend:disabled { opacity: .45; cursor: not-allowed; }
.chat-cerr { color: var(--red); font-size: 12px; line-height: 1.5; margin: 8px 0 0; }
.chat-chint { font-family: var(--mono); font-size: 10px; color: var(--muted-2); line-height: 1.6; margin: 9px 0 0; }
.chat-chint-help { display: none; }
.chat-nocompose { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 14px; font-size: 11px; }

.chat-room-tools {
  margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px;
}
.chat-room-tools-sum {
  display: flex; align-items: center; min-height: 44px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); list-style: none;
}
.chat-room-tools-sum::-webkit-details-marker { display: none; }
.chat-room-tools-sum::after {
  content: "+"; margin-left: auto; color: var(--muted-2); font-size: 16px; line-height: 1;
}
.chat-room-tools[open] > .chat-room-tools-sum::after { content: "-"; }
.chat-room-tools-sum:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (max-width: 600px) {
  .chat-composer {
    margin: 8px -12px 0; padding: 8px 12px calc(10px + var(--chat-kb, 0px));
    z-index: 30;
  }
  .chat-comment { display: none; }
  .chat-cvoice { display: none; }
  .chat-carea { min-height: 44px; padding: 8px; }
  .chat-crow { flex-wrap: nowrap; gap: 4px; margin-top: 6px; }
  .chat .chip, .chat-cmic, .chat-cattach {
    min-height: 32px; padding: 4px 8px; font-size: 12px;
  }
  .chat-csend {
    margin-left: auto; flex: none; min-height: 32px; padding: 4px 10px; font-size: 12px;
  }
  /* The docking decision stands for an IDLE composer only. A composer he is typing in, or one that
     still holds a draft, is never removed from under him when a question arrives (independent review
     2026-09-09, finding 4): the class is set by chat.js while the draft is non-empty. */
  .chat:has(.chat-pinned-rail) .chat-composer:not(:focus-within):not(.has-draft) { display: none; }
  .chat:has(.chat-owner-actions) { padding-bottom: 220px; }
  /* Round 11 (acceptance check 1 rerun at c5e968d): while the Chat view's voice dock shows its button, the room at the
     page's end (--ol-bottom, measured from the dock's border box by olivia.js watchRail) already holds the docked panel,
     her dock and the lifted button, so the fixed 220 px reserve for the panel yields to that measurement instead of
     counting the panel a second time. Without the button (no voice) the reserve stands. */
  html.ol-spaced .chat:has(.chat-pinned-rail):has(.chat-composer:not(:focus-within):not(.has-draft)):has(.chat-voice-dock .ol-vbtn) { padding-bottom: 0; }
  .chat-owner-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 32;
    margin: 0; padding: 10px 12px calc(10px + var(--chat-kb, 0px));
    background: rgba(10,13,19,.94); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border); border-radius: 0;
  }
  /* THE WHOLE PANEL IS BOUNDED AND SCROLLABLE, not just the question inside it (independent review
     2026-09-09, finding 3). A minimum question window plus an unbounded fixed panel pushed the panel's
     own top above the viewport on a 480px-tall phone with the keyboard up: the question sat entirely
     off screen and its internal scrollbar could not be reached, because the region holding it was
     itself off screen. The panel now never exceeds the space above the keyboard and scrolls as one, so
     the question, the answer box and the three buttons are all reachable at every height. */
  .chat-owner-actions {
    max-height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  }
  /* A floor is safe again now that the panel above scrolls as one: without it the window collapsed to
     about 18 pixels on a 480-tall phone with the keyboard up, which is bounded but unreadable. With
     the floor the question keeps a readable window and anything the screen cannot hold at once is
     reached by scrolling the panel, never lost above its top edge. */
  .chat-owner-q {
    max-height: max(96px, min(26vh, calc(100vh - var(--chat-kb, 0px) - 300px)));
  }
  .chat-owner-qwrap.is-tall .chat-owner-q {
    max-height: max(140px, min(46vh, calc(100vh - var(--chat-kb, 0px) - 240px)));
  }
  /* AN ARRIVING QUESTION DOES NOT TAKE THE BOTTOM OF THE SCREEN WHILE HE IS WRITING (parent
     reproduction 2026-09-09: the composer stayed focused and typable, but hit-testing at its centre
     returned the answer box, because the docked panel is fixed over it — the draft was behind the
     panel, which is the same interruption in a different form). While the composer is focused or
     holds a draft, the panel returns to the feed flow instead of docking over the keyboard. The
     pinned rail above the feed still shows the question is waiting, and answering it stays an
     explicit tap, so context changes only when he changes it. */
  .chat:has(.chat-composer:focus-within) .chat-owner-actions,
  .chat:has(.chat-composer.has-draft) .chat-owner-actions {
    position: static; z-index: auto; max-height: none; overflow: visible;
    margin: 11px 0 0; padding: 10px;
    border: 1px solid rgba(231,169,12,.38); border-radius: 10px;
    background: rgba(231,169,12,.07); backdrop-filter: none;
  }
  .chat:has(.chat-composer:focus-within),
  .chat:has(.chat-composer.has-draft) { padding-bottom: 0; }
  .chat-pinned-label { display: none; }
  .chat-pinned-rail {
    margin-bottom: 8px; padding-bottom: 8px;
  }
  .chat-pin-summary { min-height: 36px; padding: 6px 8px; }
}

/* ============================ EFFORT (public/js/effort.js) ============================
   The effort meter, owner-gated at the mockup 26.07.2026 (fleet chat #242, card 32aea429).
   Built only from the tokens already in :root — no new colour, no new font, nothing about the
   current UI redrawn. Phone-first at 390px.

   COLOUR IS NEVER LOAD-BEARING HERE (measured: Atlas teal and Greenside green separate by dE 5.6
   normal / 5.4 deutan — indistinguishable on a phone). Day bars and hour bars use ONE hue because
   they answer "how much", not "which domain"; every domain is named in text with its number beside
   it; no stacked domain bar exists. Delete every colour on these screens and nothing goes unread. */
.ef { max-width: 720px; }
.ef-quiet { color: var(--muted); font-size: 13px; padding: 10px 2px; }
.ef-err { color: var(--red); font-size: 13px; line-height: 1.5; margin: 0 2px 10px; }
.ef-foot { color: var(--muted-2); font-size: 12px; line-height: 1.6; margin: 18px 2px 0;
  border-top: 1px solid var(--border); padding-top: 12px; }
.ef-dash { color: var(--muted-2); }

.ef-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 13px 13px; margin-bottom: 10px; }
.ef-ch { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; }
.ef-ch h3 { font-size: 14px; font-weight: 800; letter-spacing: -.018em; margin: 0; }
.ef-chn { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted-2);
  letter-spacing: .05em; margin-left: auto; }

/* the headline: HOURS (owner answer 1) */
.ef-hero { background: linear-gradient(180deg, rgba(91,140,255,.09), var(--panel));
  border: 1px solid rgba(91,140,255,.32); border-radius: 12px; padding: 14px 14px 13px; margin-bottom: 10px; }
.ef-big { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ef-big small { font-size: 20px; font-weight: 700; color: var(--muted); letter-spacing: -.01em; margin-left: 4px; }
.ef-bigsub { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 7px 0 0; }
.ef-heroline { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(91,140,255,.22); }
.ef-hstat { flex: 1; min-width: 96px; }
.ef-hv { font-family: var(--mono); font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; display: block; }
.ef-hl { color: var(--muted); font-size: 11.5px; line-height: 1.35; display: block; margin-top: 2px; }

/* day bars — scaled to the week's own maximum, one hue */
.ef-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 6px; position: relative; }
.ef-ref { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-2); pointer-events: none; z-index: 2; }
.ef-refl { position: absolute; left: 13%; top: -14px; font-family: var(--mono); font-size: 9.5px;
  color: var(--muted); letter-spacing: .05em; background: var(--panel); padding: 0 4px; }
.ef-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  height: 100%; position: relative; min-width: 0; background: transparent; border: 0; padding: 0; }
.ef-bar { width: 100%; background: var(--blue); border-radius: 4px 4px 0 0; min-height: 3px; display: block; }
.ef-bar.is-zero { min-height: 0; }
.ef-col.today .ef-bar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px rgba(91,140,255,.55); }
.ef-bl { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 800;
  color: var(--text); white-space: nowrap; letter-spacing: -.01em; text-align: center; }
.ef-xax { display: flex; gap: 8px; margin-top: 7px; }
.ef-xt { flex: 1; text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--muted-2); letter-spacing: .04em; min-width: 0; }
.ef-xt.today { color: var(--blue); }
.ef-story { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.ef-story b { color: var(--text); font-weight: 700; }

/* per-domain rows — the NAME carries the identity, the swatch is decoration */
.ef-drow { display: block; width: 100%; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid var(--border); padding: 9px 0; font: inherit; color: inherit; }
.ef-drow:last-child { border-bottom: 0; padding-bottom: 2px; }
.ef-dtop { display: flex; align-items: baseline; gap: 8px; }
.ef-ddot { width: 9px; height: 9px; border-radius: 3px; flex: none; align-self: center; }
.ef-dname { font-size: 14px; font-weight: 700; letter-spacing: -.012em; }
.ef-dh { margin-left: auto; font-family: var(--mono); font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ef-dbarw { height: 7px; background: var(--panel-3); border-radius: 4px; margin: 7px 0 5px;
  overflow: hidden; display: block; }
.ef-dbar { height: 100%; border-radius: 4px; min-width: 5px; display: block; }
.ef-dmeta { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .03em; display: block; }
.ef-dmeta em { font-style: normal; color: var(--muted-2); }
.ef-drow.is-tiny .ef-dname, .ef-drow.is-tiny .ef-dh { color: var(--muted); }

/* hour-of-day strip, with the night band the night fleet lives in */
.ef-nightlbl { font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin: 0 0 3px; }
.ef-hours { display: flex; align-items: flex-end; gap: 2px; height: 92px; }
.ef-hc { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
  position: relative; border-radius: 3px 3px 0 0; min-width: 0; }
.ef-hc.night { background: rgba(255,255,255,.035); }
.ef-hb { width: 100%; background: var(--border-2); border-radius: 3px 3px 0 0; min-height: 2px; display: block; }
.ef-hb.on { background: var(--blue); }
.ef-hax { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono);
  font-size: 9.5px; font-weight: 700; color: var(--muted-2); letter-spacing: .06em; }
.ef-rank { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.ef-rk { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text);
  background: var(--panel-2); border: 1px solid rgba(91,140,255,.35); border-radius: 6px;
  padding: 3px 8px; white-space: nowrap; }
.ef-rk b { color: var(--blue); font-weight: 800; }

/* the domain drill */
.ef-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.ef-gc { flex: 1 1 calc(50% - 5px); background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 10px 10px; min-width: 0; }
.ef-gv { font-family: var(--mono); font-size: 18px; font-weight: 800; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; display: block; overflow-wrap: anywhere; }
.ef-gv.none { color: var(--muted-2); font-size: 16px; }
.ef-gl { color: var(--muted); font-size: 11.5px; line-height: 1.35; display: block; margin-top: 3px; }

/* the money lens — shown whether or not it is filled (owner answer 3) */
.ef-money { display: flex; gap: 9px; flex-wrap: wrap; }
.ef-mbox { flex: 1 1 calc(50% - 5px); border: 1px dashed var(--border-2); border-radius: 10px;
  padding: 10px; min-width: 0; background: transparent; }
.ef-mbox.is-filled { border-style: solid; border-color: var(--border); background: var(--panel-2); }
.ef-mv { font-family: var(--mono); font-size: 16px; font-weight: 800; color: var(--muted-2); display: block; }
.ef-mbox.is-filled .ef-mv { color: var(--text); }
.ef-ml { color: var(--muted); font-size: 11.5px; line-height: 1.4; display: block; margin-top: 4px; }
.ef-mratio { margin-top: 9px; border: 1px dashed var(--border-2); border-radius: 10px; padding: 10px;
  display: flex; align-items: baseline; gap: 9px; }
.ef-mratio.is-filled { border-style: solid; border-color: var(--border); background: var(--panel-2); }
.ef-mratio .rv { font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--muted-2); flex: none; }
.ef-mratio.is-filled .rv { color: var(--text); }
.ef-mratio .rl { color: var(--muted); font-size: 12px; line-height: 1.4; }
.ef-mratio .rl b { color: var(--text); font-weight: 700; }
.ef-gate { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.ef-gate b { color: var(--text); font-weight: 700; }

/* coverage — a surface, not a footnote */
.ef-covmini { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--amber);
  border-radius: 11px; padding: 10px 12px; margin-bottom: 10px; font: inherit; color: inherit; }
.ef-covwarn { font-size: 17px; flex: none; }
.ef-covtxt { flex: 1; min-width: 0; }
.ef-covmini .t { font-size: 13px; font-weight: 700; line-height: 1.35; display: block; }
.ef-covmini .s { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin-top: 2px; display: block; }
.ef-covmini .go { margin-left: auto; color: var(--blue); font-weight: 800; font-size: 16px; flex: none; }
.ef-cov { background: var(--panel); border: 1px solid var(--amber); border-left-width: 3px;
  border-radius: 12px; padding: 12px 13px 13px; margin-bottom: 10px; }
.ef-covh { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ef-covh h3 { font-size: 15px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.ef-covlead { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.ef-ci { display: flex; gap: 9px; padding: 9px 0; border-top: 1px solid var(--border); }
.ef-cimk { font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--amber); flex: none;
  width: 14px; text-align: center; padding-top: 1px; }
.ef-cit { font-size: 13px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.ef-cid { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 3px 0 0; }
.ef-covfoot { margin-top: 12px; background: rgba(231,169,12,.08); border: 1px solid rgba(231,169,12,.34);
  border-radius: 10px; padding: 11px 12px; font-size: 13.5px; line-height: 1.5; }
.ef-covfoot b { font-weight: 800; }

/* back row, day stepper, compare row, chips, tags */
.ef-back { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 0;
  color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 2px 11px; }
.ef-back .bk { color: var(--blue); font-size: 13px; }
.ef-step { display: flex; align-items: center; gap: 9px; margin: 0 2px 12px; }
.ef-step button { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  width: 32px; height: 32px; color: var(--text); font-size: 16px; line-height: 1; flex: none; }
.ef-step button:disabled { opacity: .3; cursor: not-allowed; }
.ef-stepd { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.ef-stepd span { color: var(--muted); font-weight: 600; font-size: 13px; margin-left: 6px; }
.ef-cmp { display: flex; align-items: baseline; gap: 10px; padding: 9px 0 0; border-top: 1px solid var(--border);
  margin-top: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ef-cmp b { color: var(--text); font-family: var(--mono); font-weight: 800; font-variant-numeric: tabular-nums; }
.ef-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 11px; }
.ef-chips .chip i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.ef-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.ef-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px;
  color: var(--muted); border: 1px solid var(--border-2); background: var(--panel-2); white-space: nowrap; }
.ef-tag.k-est { color: var(--amber); border-color: rgba(231,169,12,.45); background: rgba(231,169,12,.10); }
.ef-tag.k-none { color: var(--muted-2); border-color: var(--border-2); background: var(--panel-3); }
.ef-tag.k-ok { color: var(--green); border-color: rgba(47,178,124,.42); background: rgba(47,178,124,.10); }
.ef-gc .ef-tag, .ef-mbox .ef-tag { margin-top: 7px; }

@media (max-width: 600px) {
  .ef-bars { height: 132px; }
  .ef-big { font-size: 38px; }
  .ef-gc { flex: 1 1 calc(50% - 5px); }
}

/* ============================================================================================
   THE ROW DETAIL — tap opens the whole note in place, on Today and on Approve.
   Owner finding #377 (2026-07-27, graded 3/3), spec docs/TAP-OPENS-DETAIL-SPEC-27.07.2026.md.
   It reuses the board overlay's scrim (.ovl / .ovl-scrim) and the card detail's raw-note block
   (.cd-legacy) unchanged; only the panel around them is its own, because a row's detail is a short
   read and not the board's near-full-view card.
   ============================================================================================ */
.rdet-p {
  position: relative; z-index: 1;
  width: min(680px, 94%); max-height: 92%;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(91,140,255,.10);
  overflow: hidden;
}
.rdet-hd {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 12px 15px; background: var(--panel-2); border-bottom: 1px solid var(--border);
}
.rdet-where { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.rdet-hd .stat { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 6px; }
.rdet-x { margin-left: auto; }
.rdet-b { padding: 15px; overflow-y: auto; }
.rdet-title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.rdet-status { margin: 9px 0 0; font-size: 14px; font-weight: 700; color: var(--blue); line-height: 1.45; overflow-wrap: anywhere; }
.rdet-why { margin: 9px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.rdet-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.rdet-chip {
  font-size: 11px; font-weight: 700; color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border-2); border-radius: 6px; padding: 3px 8px;
}
.rdet-chip.when-now { color: var(--red); border-color: rgba(240,97,109,.45); background: rgba(240,97,109,.10); }
.rdet-chip.when-soon { color: var(--amber); border-color: rgba(231,169,12,.45); background: rgba(231,169,12,.10); }
.rdet-facts { margin-top: 14px; border-top: 1px solid var(--border); }
.rdet-fact { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); }
.rdet-fact:last-child { border-bottom: 0; }
.rdet-fact .fl { flex: none; width: 116px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
.rdet-fact .fv { min-width: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.rdet-fact .fv.mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.rdet-b .cd-legacy { margin-top: 15px; }
.rdet-ft {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 15px; background: var(--panel-2); border-top: 1px solid var(--border);
}
/* the original bill on a Money > Approve card (29.09.2026): the invoice's pages at the card's width, in the scrolling body */
.rdet-inv { margin-top: 14px; min-width: 0; }
.rdet-inv-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rdet-inv-h .fl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
.rdet-inv-h .rdet-inv-open { margin-left: auto; display: inline-block; text-decoration: none; }
.rdet-inv-say { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.rdet-inv-say.is-reason { color: var(--text); }
.rdet-inv-say:empty { margin: 0; }
.rdet-inv-img, .rdet-inv-pages canvas {
  display: block; width: 100%; height: auto; margin-top: 10px;
  background: #fff; border: 1px solid var(--border-2); border-radius: 6px;
}
/* The invoice is why he pressed the card. On a phone or a short window the title and the status line stay on top, then the
   invoice, then the reason, chips and facts; on a landscape phone (too short for anything above it) the invoice is first.
   The footer with the buttons is outside the scrolling body and never moves. Only a detail that carries an invoice is a
   column, so the detail Today opens is drawn exactly as before. Browsers that lack :has() drop these rules and keep the
   desktop order. */
@media (max-width: 600px), (max-height: 760px) {
  .rdet-b:has(> .rdet-inv) { display: flex; flex-direction: column; }
  .rdet-b:has(> .rdet-inv) > * { flex: none; }
  .rdet-b:has(> .rdet-inv) > .rdet-inv { order: 1; }
  .rdet-b:has(> .rdet-inv) > :not(.rdet-title):not(.rdet-status):not(.rdet-inv) { order: 2; }
}
@media (max-height: 520px) {
  .rdet-b:has(> .rdet-inv) > .rdet-inv { order: -1; }
}
/* the honest note states: being read, unreadable, not a card at all. Same dashed shell, no caret. */
.cd-legacy-h.static { cursor: default; }
.cd-legacy.is-loading { border-style: solid; }
.cd-legacy.is-failed .lmeta { color: var(--red); }

/* Today's row BODY is the tap; the action column sits outside it and keeps its own clicks. */
.rd-need .rd-nbody.rd-tap { cursor: pointer; -webkit-tap-highlight-color: rgba(91,140,255,.14); }
.rd-need .rd-nbody.rd-tap:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.rd-need .rd-nbody.rd-tap:hover .rd-ttl { color: #fff; }
.rd-need.is-open { border-color: var(--blue); }
.rd-tapsay, .brf-tapsay {
  font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blue); margin: 9px 0 0;
}
/* the pointer control: goes somewhere, never performs — hence its own class, not brf-act-btn */
.brf-point { margin-top: 9px; display: flex; }
.brf-goto {
  border: 1px solid var(--border-2); background: transparent; color: var(--muted);
  border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.brf-goto:hover { border-color: var(--blue); color: var(--blue); }
.brf-goto:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.brf-goto.sm { padding: 3px 8px; font-size: 11px; }
.brf-tap > .brf-point { grid-column: 1 / -1; }
.brf-tap.is-open { border-color: var(--blue); }
.brf-foldrow.is-open .brf-foldt { color: var(--blue); }

@media (max-width: 600px) {
  .rdet-p { width: 96%; max-height: 94%; }
  .rdet-b { padding: 13px; }
  .rdet-fact { flex-direction: column; gap: 2px; }
  .rdet-fact .fl { width: auto; }
}

/* ============================ CALLS ============================
   Producer receipt and call activity are intentionally two cards. Amber belongs only to a late
   server-stamped scan receipt; the newest call never drives watcher health. */
.calls { width: min(980px, 100%); margin: 0 auto; padding: 22px 18px 56px; }
.calls .tab-purpose { max-width: 760px; margin: 0 0 16px; color: var(--muted); }
.call-clocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.call-clock {
  position: relative; min-height: 132px; overflow: hidden; padding: 17px 18px 15px 21px;
  border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg, var(--panel), var(--panel-2));
}
.call-clock::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--muted-2); }
.call-clock.scan.fresh::before { background: var(--green); }
.call-clock.scan.late { border-color: rgba(231,169,12,.55); }
.call-clock.scan.late::before { background: var(--amber); }
.call-clock.scan.unknown { border-style: dashed; }
.call-clock-label {
  display: block; margin-bottom: 8px; color: var(--muted); font: 800 10px/1.2 var(--mono);
  letter-spacing: .11em; text-transform: uppercase;
}
.call-clock strong { display: block; font-size: 18px; line-height: 1.25; }
.call-clock p { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
/* The domain chips wrap onto a second row rather than running off the right edge behind a hidden
   scroll (parity B10, D6, 28.09.2026): every chip stays visible at every width, as in the header. */
.call-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; padding-bottom: 2px; }
.call-filters button, .call-links button {
  flex: none; padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel-2); color: var(--muted); font-weight: 700; font-size: 12px;
}
.call-filters button.on { border-color: var(--blue); color: var(--text); background: rgba(91,140,255,.14); }
.call-filters button:focus-visible, .call-links button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.call-list { display: grid; gap: 10px; }
.call-row { padding: 15px 16px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.call-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.call-row-head time { font-family: var(--mono); font-size: 11px; }
.call-dir { font: 800 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.call-dir.in { color: var(--green); }
.call-dir.out { color: var(--blue); }
.call-person { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.call-person-name { font-size: 17px; font-weight: 800; }
.call-person-sub { color: var(--muted); font-size: 12.5px; }
.call-meta { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 5px; color: var(--muted); font-size: 11.5px; }
.call-meta span { display: inline-flex; align-items: center; gap: 5px; }
.call-meta i { width: 7px; height: 7px; border-radius: 50%; }
.call-summary { margin: 12px 0 0; color: var(--text); white-space: pre-wrap; }
.call-summary.quiet { color: var(--muted-2); }
.call-links { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.call-pipeline { color: var(--violet); font-size: 12px; font-weight: 700; }
.call-links button { color: var(--blue); }
.call-empty { padding: 28px 18px; border: 1px dashed var(--border-2); border-radius: 12px; color: var(--muted); text-align: center; }
/* Call sentiment (28.09.2026): the word carries the meaning, the colour repeats it. Tokens per theme: the dark values
   sit on --panel (#121826), the light values on a white panel, each at 4.5:1 or better for the word. */
.calls {
  --sent-positive: #3cc48c; --sent-neutral: #aab4c6; --sent-mixed: #e7a90c; --sent-negative: #f47a84;
}
:root[data-theme="light"] .calls {
  --sent-positive: #0f7a4f; --sent-neutral: #4b5565; --sent-mixed: #8a5a00; --sent-negative: #b3261e;
}
.call-sentiment {
  --sent-c: var(--muted);
  display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; padding: 4px 11px 4px 9px;
  border: 1px solid color-mix(in srgb, var(--sent-c) 45%, transparent); border-radius: 999px; font-size: 12.5px;
  background: color-mix(in srgb, var(--sent-c) 10%, transparent);
}
.call-sentiment i { width: 8px; height: 8px; border-radius: 50%; background: var(--sent-c); flex: none; }
.call-sentiment-label { color: var(--muted); font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.call-sentiment strong { color: var(--sent-c); font-weight: 800; }
.call-sentiment.positive { --sent-c: var(--sent-positive); }
.call-sentiment.neutral { --sent-c: var(--sent-neutral); }
.call-sentiment.mixed { --sent-c: var(--sent-mixed); }
.call-sentiment.negative { --sent-c: var(--sent-negative); }
.call-sentiment.none, .call-sentiment.unknown { border-style: dashed; background: transparent; }
.call-sentiment.none i, .call-sentiment.unknown i { background: transparent; border: 1px dashed var(--muted); }
.call-sentiment.none strong, .call-sentiment.unknown strong { color: var(--muted); font-weight: 700; }
/* Full transcript, loaded on demand under the summary. */
.call-transcript { margin-top: 10px; }
.call-transcript-toggle {
  min-height: 32px; padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 8px;
  background: transparent; color: var(--blue); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.call-transcript-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.call-transcript-body { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.call-transcript-text {
  margin: 0; color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.call-transcript-note { margin: 0; color: var(--muted); }
@media (max-width: 600px), (pointer: coarse) {
  .call-transcript-toggle { min-height: 44px; }
}

@media (max-width: 600px) {
  .calls { padding: 16px 12px 42px; }
  .call-clocks { grid-template-columns: 1fr; }
  .call-clock { min-height: 0; }
  .call-row { padding: 14px 13px; }
  .call-links { align-items: flex-start; flex-direction: column; }
}

/* ============================ RESEARCH ============================
   Mock v2: one share line, one score, one next move and one primary action. */
.rs-shell { min-width: 0; }
.rs { max-width: 900px; margin: 0 auto; }
.rs .brf-tap { grid-template-columns: minmax(0, 1fr) 68px; }
.rs-score {
  align-self: start; justify-self: end;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 60px; padding: 7px 8px 6px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted);
}
.rs-score b { font-family: var(--mono); font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.rs-score small { font-family: var(--mono); font-size: 10px; opacity: .8; margin-top: 3px; }
.rs-mark { font-size: 22px; font-weight: 800; line-height: 1; padding: 9px 8px; }
.rs-mark.rs-dim { color: var(--muted); }
.rs-mark.rs-bad { color: var(--red); border-color: rgba(240,97,109,.5); background: rgba(240,97,109,.12); }
.rs-mark.rs-theme { color: var(--violet); border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.12); }
.rs-theme-row { border-color: rgba(167,139,250,.35); }
.rs-win { color: var(--amber); font-weight: 700; }
.rs .brf-act-btn.read { border-color: transparent; background: transparent; color: var(--muted); padding-left: 6px; padding-right: 6px; }
.rs-note { grid-column: 1 / -1; margin-top: 12px; }
.rs-note .brf-act { font-weight: 500; color: var(--text); margin-top: 8px; }
.rs-note .brf-act:first-child { margin-top: 0; }
.rs-note .brf-act b { font-weight: 800; }
.rs-where, .rs-members { margin: 4px 0 0 18px; padding: 0; color: var(--text); font-size: 13px; line-height: 1.5; }
.rs-where b { font-weight: 700; }
.rs-why { color: var(--muted); font-size: 12px; }
/* Probabilities live in the detail, never as eight chips on every row: the compact Research
   layout stays exactly as the owner accepted it (owner ask 21.09.2026). */
.rs-relevance { margin-top: 8px; }
.rs-relevance summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.rs-probs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; margin: 6px 0 0; padding: 0; font-size: 12px; }
.rs-probs li { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.rs-probs b { font-weight: 600; }
.rs-probs span { color: var(--muted); font-family: var(--mono); }
.rs-axes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin-top: 7px; }
.rs-axis { min-width: 0; }
.rs-axis b { display: block; font-size: 12px; }
.rs-axis span { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.rs-sum { margin: 8px 0 0; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.rs-comment { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.rs-comment .sheet-input { flex: 1; min-width: 0; margin: 0; }
.rs-sources { margin-top: 10px; color: var(--muted); font-size: 12px; }
.rs-sources summary { cursor: pointer; }
.rs-sources a { color: var(--blue); overflow-wrap: anywhere; }
.rs-bar .search { flex: 1; min-width: 120px; }
.rs-sort { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.rs-overflow { max-width: 900px; margin: 10px auto 0; padding: 0 18px; color: var(--muted); font-size: 12px; }
.rs-stale {
  align-self: start; justify-self: end; padding: 4px 8px; border: 1px solid var(--border-2);
  border-radius: 7px; background: var(--panel-3); color: var(--muted); font-size: 10px;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.rs-error { grid-column: 1 / -1; margin: 10px 0 0; color: var(--red); font-size: 13px; }
.rs-area-count {
  display: inline-flex; min-width: 16px; height: 16px; margin-left: 5px; padding: 0 4px;
  align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.18);
  font: 800 9px/1 var(--mono);
}

@media (max-width: 600px) {
  .rs .brf-tap { grid-template-columns: minmax(0, 1fr) 58px; padding-left: 12px; }
  .rs-score { min-width: 52px; padding: 6px 6px 5px; }
  .rs-score b { font-size: 20px; }
  .rs-sort { display: none; }
  .rs-overflow { padding: 0 12px; }
  .rs-axes { grid-template-columns: 1fr; }
  .rs-comment { flex-direction: column; align-items: stretch; }
  .rs-area-count { margin-left: 3px; padding: 0 3px; }
}

@media (max-width: 600px) {
  .hdr { flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; }
  .hdr-back { flex: none; order: 0; }
  .hdr .brand { font-size: 13px; letter-spacing: .1em; flex: none; order: 0; }
  .hdr .meta { flex: none; flex-wrap: wrap; order: 0; gap: 3px; margin-left: auto; justify-content: flex-end; }
  .hdr .areas {
    flex: 1 1 100%; flex-wrap: nowrap; order: 2; width: 100%; min-width: 100%; padding: 3px; gap: 2px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hdr .areas::-webkit-scrollbar { display: none; }
  .hdr .areas .area {
    flex: 1 0 auto; min-width: auto; min-height: 36px; padding: 8px 10px;
    font-size: 13px; letter-spacing: 0; white-space: nowrap; overflow: visible;
  }
  .hdr .seg {
    flex: 1 1 100%; order: 3; width: 100%; min-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .hdr .meta .pill, .hdr .meta .dot-upd { display: none; }
  .hdr .meta .ghost, .hdr .meta .psw {
    min-width: 26px; width: 26px; min-height: 26px; height: 26px; padding: 0;
  }
  .hdr .psw { font-size: 0; gap: 0; justify-content: center; }
  .hdr .rs-area-count { display: none; }
}

.bd-shell, .st-shell { padding: 12px 16px 28px; }
.bd-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.bd-search, .bd-select {
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 9px; padding: 7px 10px; min-height: 36px;
}
.bd-search { flex: 1 1 160px; }
.bd-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.bd-chip-gap { width: 8px; }
.bd-asof { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.bd-list {
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px; overflow: hidden;
}
.bd-proj {
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .07em;
  color: var(--muted-2); padding: 10px 12px 6px;
}
.bd-empty { color: var(--muted); padding: 10px 12px 14px; margin: 0; }
.bd-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start;
  width: 100%; text-align: left; padding: 10px 12px; background: transparent;
  border: 0; border-bottom: 1px solid var(--border-2); color: var(--text); font: inherit;
}
.bd-row.on { background: var(--panel-3); }
.bd-row.bd-you { box-shadow: inset 3px 0 0 var(--red); }
.bd-row-body { background: transparent; border: 0; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; }
.bd-stage { font-weight: 750; font-size: 12px; text-transform: lowercase; }
.bd-stage-wanted, .bd-stage-half { color: var(--amber); }
.bd-stage-open, .bd-stage-shipped { color: var(--green); }
.bd-stage-unlanded, .bd-stage-stopped { color: var(--muted); }
.bd-wait.you b { color: var(--red); }
.bd-wait.none, .bd-steps-missing { color: var(--muted); }
.bd-progress { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.bd-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.bd-bar > span { display: block; height: 100%; background: var(--green); }
.bd-progress-words { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bd-nudges { display: flex; flex-direction: column; gap: 4px; }
.bd-nudge {
  min-width: 44px; min-height: 44px; padding: 0 8px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 8px;
}
.bd-closed-label { margin: 0; padding: 10px 12px 4px; color: var(--muted); font-size: 12px; }
.bd-facts { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 6px 10px; margin: 0 0 12px; }
.bd-facts dt { color: var(--muted); }
.bd-facts dd { margin: 0; }
.bd-steps { margin: 0 0 12px; padding-left: 18px; }
.bd-steps .done { color: var(--muted); }
.bd-grip { color: var(--muted-2); font-size: 12px; line-height: 1.2; letter-spacing: -1px; padding-top: 2px; cursor: grab; }
.bd-id { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--muted); padding-top: 3px; }
.bd-row-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.bd-card-title { font-weight: 700; display: block; }
.bd-state, .bd-sub {
  display: block; color: var(--muted-2); font-family: var(--mono, ui-monospace, monospace); font-size: 11px;
}
.bd-meta {
  display: block; color: var(--muted); font-family: inherit; font-size: 12px; line-height: 1.42; overflow-wrap: anywhere;
}
.bd-pill {
  min-height: 0; padding: 3px 9px; font-size: 11px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--muted);
}
.bd-detail {
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px; padding: 14px 16px;
}
.bd-detail-title { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.bd-detail-title span { font-weight: 400; color: var(--muted); }
.bd-front {
  white-space: pre-wrap; background: var(--panel-3); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin: 0 0 12px; color: var(--text);
}
.bd-receipt { font-size: 13px; margin: 0 0 6px; }
.bd-back { margin: 0 0 10px; }
.bd-doc { margin-bottom: 22px; }
.bd-doc h2 { font-size: 15px; margin: 0 0 8px; }
.bd-frame { width: 100%; min-height: 420px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.section-title .toolbar { margin-left: auto; }
.md-doc h1, .md-doc h2, .md-doc h3, .md-doc h4 { margin: 0 0 8px; }
.md-doc p, .md-doc li { color: var(--text); }
.md-code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; overflow: auto; }
.st-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; }
.st-lg { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.st-lg::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.st-lg.st-ok::before { background: var(--green); }
.st-lg.st-red::before { background: var(--red); }
.st-lg.st-stale::before { background: var(--amber); }
.st-lg.st-unknown::before { background: var(--muted-2); }
.st-map { display: flex; flex-direction: column; gap: 10px; }
.st-cols-wrap { position: relative; overflow: visible; }
.st-narrow .st-cols-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.st-narrow .st-cols {
  min-width: 980px;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}
.st-edge-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 2;
}
.st-cols-wrap .st-cols { position: relative; z-index: 1; }
.st-line { fill: none; stroke: var(--muted-2); stroke-width: 1.1; box-shadow: none; }
.st-line.st-ok { stroke: var(--green); box-shadow: none; }
.st-line.st-red { stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 4 3; box-shadow: none; }
.st-line.st-stale { stroke: var(--amber); stroke-width: 1.3; stroke-dasharray: 4 3; box-shadow: none; }
.st-line.st-unknown, .st-line.st-stopped { stroke: var(--muted-2); box-shadow: none; }
.st-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.st-col { background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.st-colh, .st-flowlbl {
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .08em;
  color: var(--muted-2); padding: 2px 4px;
}
.st-phone-path { display: flex; flex-direction: column; gap: 6px; }
.st-conn {
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .06em;
  color: var(--amber); padding: 2px 8px; border-left: 2px solid var(--amber); margin-left: 8px;
}
.st-node {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%;
  text-align: left; padding: 8px 9px; border-radius: 8px; border: 1px solid var(--border-2);
  background: var(--panel-2); color: var(--text); box-shadow: inset 3px 0 0 var(--muted-2);
}
.st-node.on { background: var(--panel-3); }
.st-node.st-source { box-shadow: none; border-style: dashed; }
.st-ok { box-shadow: inset 3px 0 0 var(--green); }
.st-red { box-shadow: inset 3px 0 0 var(--red); }
.st-stale { box-shadow: inset 3px 0 0 var(--amber); }
.st-unknown { box-shadow: inset 3px 0 0 var(--muted-2); }
.st-stopped { box-shadow: inset 3px 0 0 var(--muted); }
.st-node.st-red { background: #1e1218; }
.st-label { font-weight: 600; font-size: 12.5px; overflow-wrap: anywhere; }
.st-state { font-size: 10.5px; font-weight: 700; color: var(--muted); font-family: var(--mono, ui-monospace, monospace); }
.st-ok .st-state { color: var(--green); }
.st-red .st-state { color: var(--red); }
.st-stale .st-state { color: var(--amber); }
.st-unknown .st-state { color: var(--muted-2); }
.st-stopped .st-state { color: var(--muted); }
.st-outs { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.st-tick { font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; color: var(--muted-2); }
.st-tick.st-red { color: var(--red); }
.st-tick.st-stale { color: var(--amber); }
.st-tick.st-ok { color: var(--green); }
.st-edges {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.st-edge {
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; padding: 3px 7px;
  border-radius: 6px; border: 1px solid var(--border-2); color: var(--muted);
}
.st-edge.st-red { color: var(--red); border-color: #57202c; }
.st-edge.st-stale { color: var(--amber); border-color: #4a3d17; }
.st-edge.st-ok { color: var(--green); }
.st-fail {
  background: var(--panel-2); border: 1px solid var(--border-2); border-left: 3px solid var(--muted-2);
  border-radius: 9px; padding: 11px 13px; margin-bottom: 12px;
}
.st-fail.st-red { border-color: #57202c; border-left-color: var(--red); }
.st-fail.st-stale { border-left-color: var(--amber); }
.st-fail-head { font-size: 14px; font-weight: 650; margin-bottom: 8px; }
.st-evidence { margin-top: 10px; }
.st-fail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.st-k { font-family: var(--mono, ui-monospace, monospace); font-size: 9px; letter-spacing: .08em; color: var(--muted-2); }
.st-v { font-size: 13px; margin-top: 1px; }
.st-v-red { color: var(--red); }
.st-state-line { font-weight: 600; margin: 4px 0 12px; }
.st-detail { background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px; padding: 14px 16px; }
.st-detail h2 { margin: 0; }
@media (min-width: 800px) {
  .st-shell { display: flex; flex-direction: column; }
  .st-fail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* A computer is anything wider than the phone cut (799px). The opened build sits beside the list
   there, including at 1280. The phone keeps the opened build full screen through .bd-narrow. */
@media (min-width: 800px) {
  .bd-shell { display: grid; grid-template-columns: minmax(300px, 38%) 1fr; gap: 12px; align-items: start; }
  .bd-shell .bd-toolbar, .bd-shell .bd-chips, .bd-shell .section-title, .bd-shell .bd-asof, .bd-shell .err { grid-column: 1 / -1; }
}
@media (max-width: 799px) {
  .bd-narrow .bd-detail, .st-narrow .st-detail { min-height: 60vh; }
  .bd-narrow.bd-open .bd-toolbar,
  .bd-narrow.bd-open .bd-chips:not(.bd-doc-tabs):not(.bd-actions),
  .bd-narrow.bd-open .section-title,
  .bd-narrow.bd-open .bd-asof { display: none; }
  .bd-narrow.bd-open { display: flex; flex-direction: column; }
  .bd-narrow.bd-open .bd-detail { order: -1; }
  .st-cols { grid-template-columns: 1fr; }
  .st-fail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Security alerts lane (13.09.2026): its own surface, opened by a tapped SECURITY ALERT. */
.security-view { padding: 12px 14px 80px; max-width: 760px; }
.security-view h2 { margin: 0 0 12px; }
.security-focus { background: #c8102e; color: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.security-focus-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.security-focus-detail { font-size: 1rem; margin-bottom: 6px; word-break: break-word; }
.security-focus-time, .security-focus-status, .security-focus-next { font-size: 0.92rem; margin-bottom: 6px; }
.security-focus button, .security-list-head button { background: #fff; color: #2a0c0f; border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 600; }
.security-list-head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; }
.security-list-head button { background: var(--panel-2); color: var(--text); border: 1px solid var(--border-2); }
.security-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.security-list li { border: 1px solid var(--border-2); border-left: 6px solid #c8102e; border-radius: 10px; padding: 10px 12px; }
.security-list li.acked { border-left-color: #8a8a8a; opacity: 0.85; }
.security-item-title { font-weight: 600; }
.security-item-detail { word-break: break-word; }
.security-item-meta { font-size: 0.85rem; opacity: 0.8; margin-top: 4px; }
.security-empty, .security-err { padding: 12px 0; opacity: 0.85; }

/* ---- chat widget (B12, namespace .cw-*) ---- */
.cw-root { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.cw-root > * { pointer-events: auto; }
.cw-rail { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 30; }
.cw-bubble { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--dc, #8a94a8); display: grid; place-items: center; font: 800 11px/1 var(--mono); letter-spacing: .06em; color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,.45); cursor: pointer; padding: 0; }
.cw-bubble.needs { box-shadow: 0 0 0 3px rgba(240,97,109,.28), 0 6px 18px rgba(0,0,0,.45); }
.cw-badge { position: absolute; top: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font: 800 10px/14px var(--mono); text-align: center; border: 2px solid var(--bg); box-sizing: border-box; }
.cw-badge.needs { right: -6px; top: -6px; background: var(--red); color: #2a0c0f; }
.cw-badge.new { left: auto; right: -6px; top: -6px; background: var(--blue); color: #07101f; }
.cw-bubble.needs .cw-badge.new { top: 16px; }
.cw-anchor .cw-badge.new { top: -4px; right: -4px; }
.cw-label { position: absolute; right: 58px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--panel-3); border: 1px solid var(--border-2); border-radius: 8px; padding: 7px 10px; font: 700 12px/1.2 ui-sans-serif, system-ui, "Segoe UI", sans-serif; letter-spacing: 0; color: var(--text); box-shadow: var(--shadow); }
.cw-label.needs { border-color: rgba(240,97,109,.5); }
.cw-label.needs b { color: var(--red); font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; margin-right: 7px; }
.cw-label.hover { display: none; border-style: dashed; color: var(--muted); }
.cw-bubble:hover .cw-label.hover { display: block; }
.cw-anchor { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #07101f; border: 0; display: grid; place-items: center; padding: 0; box-shadow: 0 8px 22px rgba(91,140,255,.35), 0 6px 18px rgba(0,0,0,.45); }
.cw-anchor svg { width: 24px; height: 24px; display: block; }
.cw-anchor.open { background: var(--panel-3); color: var(--text); border: 1px solid var(--border-2); }
.cw-anchor .cw-badge { top: -4px; right: -4px; }
.cw-panel { position: absolute; bottom: 16px; background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55); display: flex; flex-direction: column; overflow: hidden; z-index: 35; }
.cw-rooms { right: 74px; width: 360px; height: 520px; max-height: calc(100dvh - 32px); }
.cw-thread { width: 380px; height: 560px; max-height: calc(100dvh - 32px); }
/* A question waiting on the owner stands at the top of the box with room to be read (owner mark 06.10 02:33). */
.cw-asks { flex: 0 1 auto; max-height: 60%; overflow: auto; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.cw-asks .chat-owner-actions { border-top: 0; }
.cw-asks .chat-owner-q, .cw-asks .chat-owner-qwrap.is-tall .chat-owner-q { max-height: none; }
.cw-ph { display: flex; align-items: center; gap: 10px; padding: 11px 11px 10px 13px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.cw-ph .grow { flex: 1; min-width: 0; }
.cw-pt { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.cw-ps { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.cw-x, .cw-min { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel); color: var(--muted); font-size: 17px; line-height: 1; display: grid; place-items: center; padding: 0; }
.cw-min { font-size: 20px; padding-bottom: 6px; }
.cw-filters { display: flex; gap: 6px; padding: 8px 10px 2px; }
.cw-filters .seg { padding: 2px; }
.cw-filters .seg button { padding: 4px 10px; font-size: 12px; }
.cw-list { flex: 1; min-height: 0; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cw-room { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); position: relative; overflow: visible; cursor: pointer; flex: 0 0 auto; }
.cw-room::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-2); }
.cw-room.k-delib::before { background: var(--blue); }
.cw-room.k-verif::before { background: var(--amber); }
.cw-room.needs { border-color: rgba(240,97,109,.45); background: linear-gradient(180deg, rgba(240,97,109,.08), var(--panel)); }
.cw-room.needs::before { background: var(--red); }
.cw-rb { flex: 1; min-width: 0; }
.cw-rt { display: flex; align-items: baseline; gap: 8px; }
.cw-rt .t { font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cw-ro { color: var(--muted); font-size: 11px; font-weight: 600; margin-top: 1px; }
.cw-rl { color: var(--muted); font-size: 12px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-rl b { color: var(--text); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-right: 5px; }
.cw-rr { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; margin-top: 2px; }
.cw-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: #07101f; font: 800 10.5px/20px var(--mono); text-align: center; }
.cw-need { font: 800 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #2a0c0f; background: var(--red); padding: 5px 7px; border-radius: 6px; white-space: nowrap; }
.cw-pf { padding: 9px 13px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--blue); font-size: 12.5px; font-weight: 700; width: 100%; text-align: left; }
.cw-th { display: flex; align-items: center; gap: 9px; padding: 10px 10px 9px 12px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.cw-th .chat-rdot { margin-top: 0; }
.cw-tt { flex: 1; min-width: 0; }
.cw-tt .t { font-weight: 800; font-size: 14px; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-tt .s { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; margin-top: 3px; }
.cw-feed { flex: 1; min-height: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
.cw-feed .chat-feed-shell { min-height: 0; }
.cw-feed .chat-post { flex: none; }
.cw-feed .chat-pinned,
.cw-feed .chat-pinned-rail,
.cw-feed .chat-pinned-label { display: none; }
.cw-compose { flex: none; max-width: 100%; border-top: 1px solid var(--border); background: var(--panel-2); box-sizing: border-box; }
.cw-thread .cw-compose,
.cw-full .cw-compose { flex: 0 0 auto; max-height: none; overflow: visible; }
.cw-compose .chat-owner-actions { padding: 8px 10px 0; border-top: 0; background: transparent; }
.cw-compose .chat-owner-q { max-height: 48px; }
.cw-compose .chat-owner-qwrap.is-tall .chat-owner-q { max-height: 72px; }
/* On a phone the docked room IS the room (.cw-full is the full-screen layout), so the question box
   gets room to be read rather than the two lines that fit beside a small desktop thread: about six
   lines by default and half the screen on "More of the question", both scrollers, so the answer box
   and the three buttons never leave the screen even with two open questions stacked. */
.cw-full .cw-compose .chat-owner-q { max-height: 17vh; }
.cw-full .cw-compose .chat-owner-qwrap.is-tall .chat-owner-q { max-height: 45vh; }
.cw-compose .chat-owner-answer { min-height: 36px; }
.cw-compose .chat-owner-buttons button { min-height: 32px; }
.cw-compose .chat-cvoice { display: none; }
.cw-root .cw-compose .chat-composer {
  margin: 0;
  padding: 8px 10px 10px;
  width: 100%;
  max-width: 100%;
  position: static;
  box-sizing: border-box;
}
.cw-compose .chat-composer textarea { min-height: 24px; max-height: 33vh; }
.cw-compose .chat-chint-help { display: none; }
.cw-root .cw-compose .chat-owner-actions {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  max-height: none;
  overflow: visible;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.cw-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.42); z-index: 40; }
.cw-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; background: var(--panel); border: 1px solid var(--border-2); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: var(--shadow); display: flex; flex-direction: column; z-index: 45; overflow: hidden; }
.cw-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--border-2); margin: 8px auto 0; flex: none; }
.cw-sheet .cw-ph { background: transparent; padding-top: 8px; }
.cw-full { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; z-index: 45; }
.cw-fh { display: flex; align-items: center; gap: 8px; padding: 10px 10px 9px; border-bottom: 1px solid var(--border); background: rgba(10,13,19,.92); }
.cw-collapse { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 999px; color: var(--text); font-size: 12px; font-weight: 700; padding: 0 12px 0 9px; min-height: 36px; }
.cw-collapse svg { width: 14px; height: 14px; }
.cw-full .cw-feed { justify-content: flex-start; overflow: auto; }
.cw-full .chat-composer, .cw-thread .chat-composer { flex: none; }
.cw-root.is-phone .cw-rail { right: 12px; bottom: 14px; gap: 8px; }
.cw-root.is-phone .cw-bubble { width: 42px; height: 42px; font-size: 10px; }
.cw-root.is-phone .cw-label { right: 52px; font-size: 11.5px; }
.cw-root.is-phone .cw-anchor { width: 50px; height: 50px; }

/* ---- state mirror: last record block ---- */
.last-record-box { background: var(--panel-2); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 1.25rem; margin: 1.25rem 0; }
.last-record-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.last-record-title { font-size: 0.85rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.05em; }
.last-record-box .field { margin-bottom: 0.75rem; }
.last-record-box .field-label { font-size: 0.75rem; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; }
.last-record-box .field-value { font-size: 0.9rem; color: var(--text); }
.last-record-box .summary-text { font-size: 0.95rem; line-height: 1.5; color: var(--text); background: var(--panel-3); padding: 0.75rem; border-radius: 6px; border-left: 3px solid var(--blue); }
.last-record-box .chips-row { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.last-record-box .chip { font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 9999px; font-weight: 500; }
.last-record-box .chip-success { background: rgba(47, 178, 124, 0.15); color: var(--green); border: 1px solid var(--green); }
.last-record-box .chip-warning { background: rgba(231, 169, 12, 0.15); color: var(--amber); border: 1px solid var(--amber); }
.last-record-box .chip-danger { background: rgba(240, 97, 109, 0.15); color: var(--red); border: 1px solid var(--red); }
.last-record-box .chip-neutral { background: var(--panel-3); color: var(--muted); border: 1px solid var(--border); }
.last-record-box .badge { font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; }
.last-record-box .badge-success { background: var(--green); color: var(--bg); }
.last-record-box .badge-danger { background: var(--red); color: #fff; }
.last-record-box .badge-warning { background: var(--amber); color: var(--bg); }

/* ---- header at middle widths (601 to 1279 px): wrap into rows instead of overflowing ----
   Owner yes 21.09.2026 16:05 on the rendered mock (docs/ledgers/21.09.2026 ASSESSMENT - Atlas interface
   sittings and the car-browser scaling.md, sections 4a and 4b). Every earlier wrap rule for the header lives
   inside the 600 px phone rule, so between 601 px and the desktop the header was one non-wrapping row: the
   subview strip was cut off, the right-hand group pushed off the edge (the car browser at about 740 and
   1,050 px; the 13.09 and 15.09 audits at 768 and 805 px). Rows, in order: brand with the pills and controls
   at the right; the seven areas spread across the width; the whole subview strip spread across the width.
   Additive and reversible: delete this block to restore the previous behaviour.

   EXTENDED 21.09.2026 (version E of the mock, owner's "much better, thanks" at 20:57 on
   Builds/atlas-header-and-screen/MOCK-STANDALONE.html): the same rows now hold at EVERY width from
   601 px up, not only below 1280 px, because the usage strip below needs its own full-width row on
   the desktop too and the three-row header reads the same at every size. The upper bound is gone
   from the media query and `.hdr` carries the wrap unconditionally, which is what lets the strip
   take a row of its own at 600 px and under as well. */
.hdr { flex-wrap: wrap; row-gap: 8px; }
@media (min-width: 601px) {
  .hdr .brand { order: 0; }
  .hdr .meta { order: 1; margin-left: auto; flex-wrap: nowrap; }
  .hdr .areas { order: 2; flex: 1 1 100%; }
  .hdr .seg { order: 3; flex: 1 1 100%; }
  .hdr .areas .area, .hdr .seg button { flex: 1 1 auto; text-align: center; }
}

/* ---- the phone header (owner 21.09.2026 19:29 on the mock): both menus the same size, every item
   visible, no sideways scroll ----
   The 600 px block earlier in this file gives the areas row `overflow-x: auto` and 13 px labels, so
   the seventh area and the later subviews sat off-screen behind a scroll nobody finds on a phone.
   These rules come after it on purpose (later rules win, nothing above is edited): both strips wrap
   instead of scrolling, the areas make one row of seven and the subviews two even rows, at 11.5 px
   with a 32 px minimum tap height. Delete this block to restore the scrolling strips. */
@media (max-width: 600px) {
  .hdr { row-gap: 6px; }
  .hdr .areas, .hdr .seg { flex-wrap: wrap; overflow: visible; min-width: 100%; width: 100%; gap: 3px; padding: 3px; order: 2; }
  .hdr .seg { order: 3; }
  .hdr .areas .area, .hdr .seg button { flex: 1 1 auto; min-height: 32px; padding: 5px 3px; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-align: center; white-space: nowrap; }
  .hdr .areas .area { flex-basis: 12%; }
  .hdr .seg button { flex-basis: 18%; }
  .hdr .rs-area-count { display: none; }
  .hdr .meta { order: 1; margin-left: auto; }
}

/* ---- the usage strip, shape D (owner 21.09.2026 19:09 on the mock) ----
   The desktop usage widget's rows, in the header under the subview strip: one seat per column, the
   seat name above, one thin bar per figure with the percentage centred in it. ONE tone, the app's
   blue at .26 and .55 opacity — deliberately no traffic-light colours, because a header is glanced
   at, not read, and seven red bars would shout on every screen. A seat whose figure is stale or
   whose token expired is dimmed and carries the reason on its title attribute; a cell never carries
   words (his ruling of 18:48 on the widget screenshots).
   Widths: the 5h/wk/F labels inside the bars only from 1,280 px, one bar per seat below 761 px (the
   Fable figure where the seat has one, else the week; owner 22.09.2026 11:2x) carrying its label so the
   number is never mistaken for another window, the seat names above at every width. The strip renders nothing at all when the feed
   is missing or empty, and `:empty` keeps a childless strip from taking a row. */
.usage-strip {
  display: flex; order: 10; flex: 1 1 100%; gap: 10px; align-items: center; flex-wrap: nowrap; min-width: 0;
  padding: 2px 2px 0;
}
.usage-strip:empty { display: none; }
.usage-strip .seat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.usage-strip .seat b { font-size: 9px; line-height: 1; color: var(--muted); font-weight: 700; letter-spacing: .03em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage-strip .seat .bars { display: flex; gap: 4px; min-width: 0; }
.usage-strip .seat .bar { flex: 1 1 0; min-width: 16px; height: 13px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--border); position: relative; overflow: hidden; }
.usage-strip .seat .bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct, 0%); background: rgba(76,141,255,.26); }
.usage-strip .seat .bar.hot::before { background: rgba(76,141,255,.55); }
.usage-strip .seat .bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.usage-strip .seat .bar.hot span { color: var(--text); }
.usage-strip .seat .bar i { position: absolute; left: 4px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 8px; font-style: normal; color: var(--muted-2); }
.usage-strip .seat.dim { opacity: .5; }
.usage-strip .seat.n3 { flex-grow: 3; } .usage-strip .seat.n2 { flex-grow: 2; }
.usage-strip .seat .bar em { display: none; }
@media (max-width: 1279px) { .usage-strip .seat .bar i { display: none; } }
@media (max-width: 760px) { .usage-strip .seat:not(.n1) { flex-grow: 1; } .usage-strip .seat .bar:not(.keep) { display: none; } .usage-strip .seat .bar.keep i { display: flex; } .usage-strip { gap: 6px; } }
@media (max-width: 460px) { .usage-strip .seat .bar span { font-size: 9px; letter-spacing: 0; } .usage-strip { gap: 4px; } }
/* A seat never narrower than its own name (30.09.2026, the tenth seat): with Codex 3 beside Codex 2 the equal shares
   cut both names to "Code..." on a 390 px phone and at 768 px, so the two could not be told apart. The long names keep
   their width and the other seats give up the few pixels; from 1,050 px up nothing changes. Below 340 px the names clip
   as before rather than push the header sideways. */
@media (min-width: 340px) { .usage-strip .seat { min-width: min-content; } }

/* ---- the one-pill composer (owner 22.09.2026): the field, the clip inside it, the round button to its right ---- */
.chat-cvoice { display: none; }
.chat-pill { display: flex; align-items: flex-end; gap: 8px; }
.chat-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 5px 8px 5px 14px; }
.chat-field .chat-carea { flex: 1 1 auto; min-width: 0; width: auto; background: transparent; border: 0; border-radius: 0; padding: 6px 0; min-height: 24px; resize: none; overflow-y: hidden; font: inherit; font-size: 14px; color: var(--text); }
.chat-field .chat-carea:focus { outline: none; }
.chat-field .chat-cattach { position: relative; width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); margin: 0 0 6px; padding: 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; flex: none; }
.chat-field .chat-cattach input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.chat-field .chat-cattach.on { color: var(--blue); }
.chat-field .chat-cattach b { position: absolute; right: -6px; top: -6px; font: 800 9px/13px var(--mono); background: var(--blue); color: #fff; border-radius: 999px; padding: 0 4px; }
.chat-round { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; padding: 0; }
.chat-round svg { width: 18px; height: 18px; display: block; }
.chat-round .mark { font-size: 15px; font-weight: 800; line-height: 1; transform: translateY(-1px); }
.chat-round:disabled { opacity: .45; cursor: not-allowed; }
.chat-fileline { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 0 6px 6px; min-width: 0; }
.chat-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-fileclear { background: transparent; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer; }
.chat-filesend { margin-left: auto; background: var(--blue); color: #06101f; border: 0; border-radius: 999px; padding: 4px 12px; font-weight: 800; cursor: pointer; }
.chat-filesend:disabled { opacity: .45; cursor: not-allowed; }
/* the widget's header is one line too */
.cw-th { padding: 7px 10px 7px 12px; }
.cw-fh { padding: 9px 10px; }
.cw-th .chat-rchip, .cw-fh .chat-rchip { flex: none; }
.cw-name { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 13px; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-th .cw-min { margin-left: auto; }
.cw-fh .cw-x { margin-left: auto; }

/* ---- the settings page (card 9e7ebf62; owner 22.09.2026 15:42: the gear at the top right, every configurable
   thing in proper menus) ----
   Desktop: the menus on the left, the open menu as a panel on the right. Phone (720 px and under): the menus as a
   list, each opening on its own with a way back at the top. The header stays with no area lit and no segment row.
   Class names carry the set- prefix because the app has .act, .pic and .l rules of its own. */
.settingsbtn { display: inline-grid; place-items: center; width: 39px; height: 32px; padding: 0; line-height: 1; }
.settingsbtn.on { color: var(--text); border-color: var(--border-2); }
.settings-view { padding: 4px 16px 90px; max-width: 1132px; margin: 0 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-view > h2 { grid-column: 1 / -1; margin: 0; font-size: 20px; letter-spacing: -.01em; }
.settings-view > .set-lead { grid-column: 1 / -1; color: var(--muted); margin: -10px 0 2px; font-size: 13.5px; }
.set-nav { display: flex; flex-direction: column; gap: 4px; }
.set-nav button { text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; color: var(--muted); font-weight: 600; font-size: 14px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.set-nav button.on { background: var(--panel-2); border-color: var(--border); color: var(--text); }
.set-nav button small { margin-left: auto; color: var(--muted-2); font-weight: 500; font-size: 12px; white-space: nowrap; }
.set-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 4px 16px 8px; min-width: 0; }
.set-panel h3 { font-size: 15px; margin: 12px 0 2px; }
.set-panel .set-hint { color: var(--muted); font-size: 13px; margin: 0 0 6px; line-height: 1.4; }
.set-panel .set-err { color: var(--red); font-size: 13px; margin: 0 0 6px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); min-height: 46px; box-sizing: border-box; }
.set-row.first { border-top: 0; }
.set-row .set-pic { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--dc, var(--border-2)); background: var(--panel-2); display: grid; place-items: center; font: 800 11px/1 var(--mono); letter-spacing: .06em; color: var(--text); overflow: hidden; flex: none; box-sizing: border-box; }
.set-row .set-pic img { width: 22px; height: 22px; display: block; }
.set-row .set-swatch { width: 18px; height: 18px; border-radius: 4px; flex: none; }
.set-row .set-l { flex: 1 1 auto; min-width: 0; }
.set-row .set-l b { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.set-row .set-l span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.set-row .set-act { flex: none; display: flex; gap: 8px; align-items: center; }
.set-row .set-act .ghost { padding: 6px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.set-row .set-act .ghost:disabled { opacity: .45; cursor: default; }
.set-row .set-act .set-val { color: var(--muted); font-size: 12.5px; }
.set-tg { width: 40px; height: 22px; border-radius: 999px; background: var(--border-2); position: relative; flex: none; border: 0; padding: 0; cursor: pointer; }
.set-tg::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .12s; }
.set-tg.on { background: var(--blue); }
.set-tg.on::after { left: 21px; }
.set-tg:disabled { opacity: .5; cursor: default; }
.set-ch { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.set-ch button { background: transparent; border: 0; padding: 4px 10px; border-radius: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; cursor: pointer; }
.set-ch button.on { background: var(--panel-3); color: var(--text); }
.set-back { background: transparent; border: 0; color: var(--blue); font-weight: 700; font-size: 14px; padding: 6px 0; margin: 0 0 2px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.set-menu { display: flex; flex-direction: column; gap: 6px; }
.set-menu button { text-align: left; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; color: var(--text); font-weight: 600; font-size: 15px; display: flex; gap: 10px; align-items: center; }
.set-menu button small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.set-menu button i { color: var(--muted-2); font-style: normal; font-size: 18px; line-height: 1; margin-left: 8px; }
.set-menu button small + i { margin-left: 8px; }
.set-menu button i:only-of-type:not(small ~ i) { margin-left: auto; }
@media (max-width: 720px) {
  .settings-view { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 16px 100px; }
  .set-panel { padding: 2px 12px 6px; }
  .set-row .set-act .ghost { padding: 6px 9px; }
}
/* The page sits outside <main>, so it carries its own 16 px side margin (above: 4px 16px, and 0 16px at 720
   and under; the 1132 px cap keeps the desktop's 1100 px of content) (parity B10, D7, 28.09.2026). On a phone
   or any touch screen every Settings control is a 44 px target: the switches grow to 52 by 32 with a 44 px
   tall hit area, and the back link, the row buttons and the choosers take a 44 px minimum height (D8). */
@media (max-width: 720px), (pointer: coarse) {
  .set-tg { width: 52px; height: 32px; }
  .set-tg::before { content: ''; position: absolute; left: 50%; top: 50%; width: 52px; height: 44px; transform: translate(-50%, -50%); }
  .set-tg::after { top: 3px; left: 3px; width: 26px; height: 26px; }
  .set-tg.on::after { left: 23px; }
  .set-back, .set-row .set-act .ghost, .set-ch button { min-height: 44px; }
}

/* ---- mark mode, the fix queue (25.09.2026; Builds/atlas-fix-queue PLAN.md items 1 and 2) ----
   The icon sits in the header's icon row in the gear's own frame and grey (the phone rules above size every
   .hdr .meta .ghost to 26 px, this one included); on = the app's blue and nothing else (owner 22.09 15:49).
   The layer dims the page until he drags; then the rectangle is the one clear window, its own shadow the dim.
   A copy of the icon sits over the real one so a tap on it leaves mark mode. The sheet takes the composer's
   place at the bottom and holds the chat's own pill (the chat-pill rules below it apply unchanged). */
.markbtn { display: inline-grid; place-items: center; width: 39px; height: 32px; padding: 0; line-height: 1; }
.markbtn.on { color: var(--blue); border-color: var(--blue); }
.fixm-layer { position: fixed; inset: 0; z-index: 80; background: transparent; touch-action: none; }
.fixm-layer.dim { background: rgba(4, 7, 12, .5); }
.fixm-layer.drawing { cursor: crosshair; }
.fixm-rect { position: fixed; z-index: 81; border: 2px solid var(--blue); border-radius: 3px; box-shadow: 0 0 0 100vmax rgba(4, 7, 12, .5); pointer-events: none; }
.fixm-clone { position: fixed; z-index: 83; background: var(--bg); }
.fixm-sheet { position: fixed; z-index: 84; left: 0; right: 0; bottom: 0; background: #0b0f16; border-top: 1px solid var(--border); padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
.fixm-head, .fixm-sheet .chat-pill, .fixm-sheet .chat-fileline, .fixm-sheet .chat-cerr, .fixm-sheet .chat-cinterim { max-width: 900px; margin-left: auto; margin-right: auto; }
.fixm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fixm-label { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fixm-act { flex: none; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); padding: 4px 9px; font-size: 12px; font-weight: 600; }
.fixm-x { flex: none; background: transparent; border: 0; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 4px; }

/* ================================================================================================
   069 — Work > Pipeline: the prospect card and its board rows.
   The card itself is the Leads card (.ovl/.cd/.cd-hd/.cd-facts/.cd-noterow/.cd-act), so only the
   pieces that surface has no equivalent for are defined here: the folded scripts, a fact that is a
   link or carries a quiet second line, and the board row's number and expiry badge.
   ================================================================================================ */

/* a fact whose value is a tappable link (tel:, mailto:, the demo and Facebook pages) */
.cd-fact .fv-link { color: var(--blue); text-decoration: none; overflow-wrap: anywhere; }
.cd-fact .fv-link:hover { text-decoration: underline; }
.cd-fact .fv-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
/* the quiet second line under a fact: a role, an organisation number, the days left on a domain */
.cd-fact .fv-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }

/* hook / call script / text message: native <details>, the same fold affordance brief.js uses, so
   no state is needed and the keyboard reaches it */
.pl-fold { margin: 0; }
.pl-fold > summary { list-style: none; cursor: pointer; }
.pl-fold > summary::-webkit-details-marker { display: none; }
.pl-fold > summary::before { content: "\25B8"; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.pl-fold[open] > summary::before { content: "\25BE"; color: var(--blue); }
.pl-fold > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.pl-script { white-space: pre-wrap; }
.pl-fold .cd-actions { margin-top: 8px; }
/* the same fold inside the add-deal sheet, where it sits over form fields rather than card sections */
.pl-addfold { margin-top: 16px; }
.pl-addfold > summary { margin-bottom: 10px; }

/* Both Pipeline lines now carry eight columns (069 added two; the HubSpot mirror always had eight),
   and eight at the Leads board's own 190px minimum no longer fit a 1440 window. Narrower here only, so
   the eight still share one row at 1440; below that they wrap like the Leads board (parity B10, D5). */
.pl-board .lead-board { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* board row: the number reads as data, the expiry badge as a deadline */
.lead-row .pl-num { font-family: var(--mono); font-size: 10.5px; overflow: visible; }
.lead-badge.expiry { background: var(--panel-3); color: var(--muted); }
.lead-badge.expiry.soon { background: rgba(231,169,12,.16); color: var(--amber); }
.lead-badge.expiry.past { background: rgba(240,97,109,.16); color: var(--red); }
/* the add-deal sheet's prospect fields: two across where there is room, one on a phone, and the
   three long texts always full width */
.pl-addgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 14px; }
.pl-addgrid > .pl-addwide { grid-column: 1 / -1; }

/* Card document navigation and whole-description editor; existing card design retained. */
.cd-description-edit { width:100%; box-sizing:border-box; min-height:9rem; resize:vertical; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:12px; }
.cd-description-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.cd-document-file { margin-top:16px; overflow-wrap:anywhere; }
.cd-document-file .cd-pathrow { flex-wrap:wrap; }
.cd-document-file .cd-path { min-width:0; overflow-wrap:anywhere; }

.cd-anchor a { color:#8caeff; text-decoration:underline; overflow-wrap:anywhere; }

.intake-queue { width:calc(100% - 36px); max-width:1464px; margin:18px auto; padding:16px; border:1px solid var(--border); border-radius:8px; }
.intake-queue .section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.intake-row { padding:12px 0; border-top:1px solid var(--border); overflow-wrap:anywhere; }
.intake-id { overflow-wrap:anywhere; }

.intake-queue .note { color:var(--muted); font-size:12px; margin-top:4px; }

/* ---- phone and desktop parity (plan B10, 28.09.2026; C:\Atlas\Builds\atlas-ui-pass\parity-20260928) ----
   These rules come last on purpose: the phone header blocks above set the Privat switch to a bare dot and
   hide the header counts, and later rules of the same weight win. Nothing above is edited for them.
   D4, D5: on a phone the Leads and Pipeline stages stack, one full-width column per row, each with its
   heading and count. D4 to D6: the Leads, Pipeline and Calls pages keep a 16 px side margin on a phone
   (the rest of the app keeps main's 12 px until the Chat composer, which bleeds by exactly 12 px, can move
   with it). D6 and the board toolbars: 44 px touch targets on a phone or touch screen.
   D9: on a phone the Privat switch keeps its word beside the dot, as at every other width, with a 44 px
   tall touch area. D17: the "need you" count and Research's count badge stay visible on a phone; the
   placement count and the agent count stay wider-screen only (the Board shows its own placement list,
   and the agent count is being rebuilt by the fleet presence census). */
/* A card's title and its domain and project line break inside the card at every width: unbroken text in a Trash
   row pushed the phone page 33 px wider than the screen (423 in 390); with these two lines free to break it fits. */
.task .ttext, .task .where { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .lead-board, .pl-board .lead-board { grid-template-columns: minmax(0, 1fr); }
  main:has(.lead-board-wrap), main.calls { padding-left: 16px; padding-right: 16px; }
  .hdr .meta .psw { width: auto; padding: 0 9px 0 8px; }
  .hdr .psw { font-size: 11px; gap: 5px; }
  .hdr .meta .pill.needs { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; font-size: 11px; }
  .hdr .rs-area-count { display: inline-flex; }
}
@media (max-width: 600px), (pointer: coarse) {
  .call-filters button,
  main:has(.lead-board-wrap) .section-title .toolbar .chip,
  main:has(.lead-board-wrap) > .chips > .chip { min-height: 44px; min-width: 44px; }
  .hdr .meta .psw { position: relative; }
  .hdr .meta .psw::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  /* A call row's "Open task" link keeps its look (81 by 31 at 390) and gains the same 44 px tall touch area. */
  .call-links button { position: relative; min-width: 44px; }
  .call-links button::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}
/* D3 (parity B10, second build, 28.09.2026): a Board card row's restore, attachment, dispatch and drop controls
   were opacity 0 until a mouse hovered the row, so on a touch screen they were invisible yet pressable, and a
   drop or a dispatch acted at once with nothing on the glass. With no hover (a touch screen) or at a phone width
   they now show at their rest colour as 32 px targets; with a mouse the row keeps its calm hover reveal, and a
   keyboard focus inside the row shows them too. The Today standing-order revoke (.order-row .del) is outside
   .task and was never hidden. */
.task:focus-within .act, .task:focus-within .del { opacity: 1; }
@media (hover: none), (max-width: 600px) {
  .task .act, .task .del {
    opacity: 1; min-width: 32px; min-height: 32px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
}
/* D18 without the rail (parity B10, second build): the page runs under a phone's notch and home indicator
   (viewport-fit=cover, display standalone), so the sticky header takes the top inset and the Chat composer, the
   docked answer form and a bottom sheet take the bottom inset. The header's own padding shorthands (at 364,
   1279 and the 600 px header block) are restated here as longhands with the inset added, so they must stay
   last; the phone block opens with the Chat rule, not a .hdr rule, because the Chat tests find the header's own
   phone blocks as the ones that open with .hdr. At the bottom the keyboard's height (--chat-kb) and the home indicator are one space, never added
   together. While Olivia's dock holds the bottom edge (html.ol-docked) it carries the inset itself, so these
   rules stand aside. They reach only the Chat area's own page (main.chat): the chat rail's floating room panel,
   Olivia's square and the rail keep their own rules (held by the Olivia rework). The in-flow answer panel of a
   focused or drafted composer keeps its 10 px (its :has() rule is the stronger one). */
.hdr { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.sheet { padding-bottom: env(safe-area-inset-bottom, 0px); }
html:not(.ol-docked) main.chat .chat-composer { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  html:not(.ol-docked) main.chat .chat-composer,
  html:not(.ol-docked) main.chat .chat-owner-actions { padding-bottom: calc(10px + max(var(--chat-kb, 0px), env(safe-area-inset-bottom, 0px))); }
  .hdr { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
}
/* Parity follow-up (28.09.2026; the nine open differences of the parity glass, RESULT-B10-BUILD.md section 4).
   Admin Cases: the Inbox triage card's "no cycle recorded" sentence sat alone in a no-wrap age slot and pushed
   the phone page to 605 px in 390; alone in its row it now wraps. The short age stamps beside other facts keep
   their one line. */
.fin-acct > .fa-age:only-child { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
/* Today between the phone cut and 1000 px: a queue row's action column (its two buttons and the amber sentence
   under them, one wrapping row) asked for its whole one-line width, so at 768 the row's body shrank to zero and
   its title ran one letter per line. The column now takes at most half the row there and the sentence wraps.
   The desktop keeps its columns; the phone keeps its stacked row (640 px and under). */
@media (min-width: 641px) and (max-width: 1000px) {
  .rd-need { grid-template-columns: 30px minmax(0, 1fr) fit-content(50%); }
}
/* Touch targets on a phone or a touch screen: every control below is at least 44 by 44 px to a finger, by its
   own box or by a hit area around it, and keeps its look. With a mouse at a computer width nothing changes.
   Board: a card row is 44 px tall (the title's open area fills that height, the row's own padding gives way);
   the done box and the "add task" plus keep their size inside a 44 px hit area (the done box's hit area stops
   before the title); the board and list switch keeps its look inside a 44 px tall band, each at least 44 px
   wide. Today: the tension's "ack" is at least 44 px wide in a 44 px band. Self Review: the round "i" keeps its
   16 px inside a 44 px hit area. */
@media (max-width: 600px), (pointer: coarse) {
  .proj .task:has(> .tt.openable) { padding-top: 0; padding-bottom: 0; }
  .task .tt.openable { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .task .chk { position: relative; margin-right: 5px; }
  .proj .ph { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .proj .add, .obs-i { position: relative; }
  .task .chk::before, .proj .add::before, .obs-i::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .section-title .grptoggle button, .cf-ack { position: relative; min-width: 44px; }
  .section-title .grptoggle button::before, .cf-ack::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* ---- Status → Architecture: the architecture map and builder guide (public/js/architecture.js) ----
   Ported from the reviewed mock (C:\Atlas\Builds\atlas-architecture-map\arch-map.template.html). Every class carries
   the am- prefix so the app's own .card, .chip, .gate, .legend and .panel rules never reach into the map. The build
   bars reuse the Builds tab's .bd-progress, .bd-bar and .bd-progress-words. */
.arch-wrap { max-width: 1480px; margin: 0 auto; padding: 16px 24px 72px; }
.am-error, .am-loading { color: var(--muted); margin: 8px 0; }
.am-error { color: var(--amber); }
.arch {
  --sky: #6cc4ef; --orange: #f59a5b; --slate: #9aa7bd;
  --am-k-view: var(--violet); --am-k-module: var(--blue); --am-k-route: var(--green); --am-k-lib: var(--sky); --am-k-table: var(--amber);
  --am-k-binding: var(--slate); --am-k-host: var(--orange); --am-k-task: #c7cfdc; --am-k-tool: #c7cfdc; --am-k-worker: #d6a2f5;
  color: var(--text);
}
.arch button { font: inherit; color: inherit; cursor: pointer; }
.arch input { font: inherit; color: inherit; }
.arch :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.am-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.am-title { font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.01em; margin: 6px 0 8px; }
.am-lede { color: #c3cad8; max-width: 78ch; margin: 0 0 12px; }
.am-howbar { border-left: 3px solid var(--green); padding: 2px 0 2px 10px; }
.am-howbar b { color: var(--text); }
.am-fresh { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.am-f { border: 1px solid var(--border); background: var(--panel); border-radius: 10px; padding: 7px 11px; font-size: 12px; color: var(--muted); max-width: 100%; }
.am-f b { color: var(--text); font-weight: 600; }
.am-f code { font-family: var(--mono); font-size: 11px; color: #c3cad8; word-break: break-all; }
.am-f.am-live { border-color: #4b3d17; background: #1b1810; }
.am-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.am-seg { display: inline-flex; gap: 3px; border: 1px solid var(--border-2); border-radius: 999px; padding: 3px; background: var(--panel); }
.am-seg button { border: 0; background: transparent; border-radius: 999px; height: 34px; padding: 0 15px; font-weight: 600; font-size: 13px; color: #c3cad8; }
.am-seg button.am-on { background: var(--green); color: #06140d; }
.am-seg button:not(.am-on):hover { background: var(--panel-3); }
.am-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-2); border-radius: 999px; height: 40px; padding: 0 14px; background: var(--panel); font-size: 13px; color: #c3cad8; }
.am-toggle[aria-pressed="true"] { border-color: #6b5415; background: #211b0c; color: #f3d27a; }
.am-toggle:disabled { opacity: .55; cursor: default; }
.am-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.am-toggle[aria-pressed="true"] .am-dot { background: var(--amber); }
.am-search { position: relative; flex: 0 1 320px; min-width: 180px; margin-left: auto; }
.am-search input { width: 100%; height: 38px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--panel); padding: 0 14px; }
.am-search input::placeholder { color: var(--muted-2); }
.am-results { position: absolute; right: 0; left: 0; top: 44px; background: var(--panel); border: 1px solid var(--border-2); border-radius: 12px; max-height: 360px; overflow: auto; box-shadow: 0 8px 30px rgba(0,0,0,.45); display: none; z-index: 40; }
.am-results.am-on { display: block; }
.am-results button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.am-results button:hover, .am-results button:focus-visible { background: var(--panel-2); }
.am-rk { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.am-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1099px) { .am-layout { grid-template-columns: minmax(0, 1fr); } }
.am-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.am-cell > .am-card { flex: 1; }
.am-card { position: relative; display: block; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px 11px 15px; overflow: hidden; transition: border-color .15s, opacity .15s, background .15s; }
.am-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acc, var(--muted)); }
.am-card:hover { border-color: var(--border-2); background: var(--panel-2); }
.am-card.am-sel { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
.am-ek { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--acc, var(--muted)); overflow-wrap: anywhere; max-width: 100%; }
.am-nm { font-weight: 600; font-size: 15px; margin: 2px 0; word-break: break-word; }
.am-ln { font-size: 12px; color: var(--muted); word-break: break-word; }
.am-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.am-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-2); background: var(--panel-2); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: #c3cad8; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.am-chip.am-warn { border-color: #6b5415; color: #f3d27a; }
.am-chip.am-off { border-style: dashed; color: var(--muted); }
.am-card.am-outside { border-style: dashed; }
.am-k-view { --acc: var(--am-k-view); } .am-k-module { --acc: var(--am-k-module); } .am-k-route { --acc: var(--am-k-route); } .am-k-lib { --acc: var(--am-k-lib); }
.am-k-table { --acc: var(--am-k-table); } .am-k-binding { --acc: var(--am-k-binding); } .am-k-host { --acc: var(--am-k-host); } .am-k-task { --acc: var(--am-k-task); }
.am-k-tool { --acc: var(--am-k-tool); } .am-k-worker { --acc: var(--am-k-worker); } .am-k-area { --acc: var(--violet); } .am-k-api { --acc: var(--green); } .am-k-store { --acc: var(--amber); }
/* the build bar under a part or a box: the Builds tab's bar inside a button that lists the builds */
.am-bbar { display: block; width: 100%; max-width: 100%; text-align: left; border: 1px solid var(--border); background: var(--panel); border-radius: 9px; padding: 2px 9px; min-height: 30px; overflow: hidden; min-width: 0; }
.am-bbar:hover { border-color: var(--green); }
.am-bbar .bd-progress { margin: 3px 0; flex-wrap: wrap; gap: 2px 8px; min-width: 0; max-width: 100%; }
/* the bar keeps 90px beside its words; when the button cannot hold both, the words move below and the bar fills the line */
.am-bbar .bd-bar { flex: 1 1 90px; min-width: 0; max-width: 100%; }
.am-bbar .bd-progress-words { white-space: normal; }
.am-api + .am-bbar { margin-top: 6px; }
.am-legend-bar { display: inline-block; flex: none; width: 34px; height: 8px; }
.am-ov { position: relative; }
.am-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.am-ov-row { position: relative; z-index: 1; margin: 0 0 64px; }
.am-ov-row:last-of-type { margin-bottom: 10px; }
.am-rl { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.am-ov-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* the machines column keeps 180px so "Scheduled tasks" and "Cloudflare" never break mid-word at 150 percent zoom */
.am-callers { display: grid; grid-template-columns: minmax(0, 2fr) minmax(min(100%, 180px), 1fr); gap: 16px; align-items: stretch; }
.am-grp { border: 1px dashed var(--border-2); border-radius: 16px; padding: 12px 12px 14px; background: rgba(18,24,38,.35); }
/* at most three app areas and five stores a row; fewer when a box would be too narrow for its words (150 percent zoom) */
.am-ov-grid.am-app { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(140px, calc((100% - 20px) / 3))), 1fr)); }
.am-ov-grid.am-mach { grid-template-columns: minmax(0, 1fr); }
.am-ov-grid.am-stores { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(170px, calc((100% - 40px) / 5))), 1fr)); }
@media (max-width: 1300px) and (min-width: 1100px), (max-width: 900px) { .am-ov-grid.am-stores { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
@media (max-width: 900px) { .am-callers { grid-template-columns: minmax(0, 1fr); } .am-ov-grid.am-mach { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.am-ov .am-card .am-nm { font-size: 16px; }
.am-fam { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.am-fam button { border: 1px solid var(--border-2); background: var(--panel-2); border-radius: 999px; padding: 2px 9px; font-size: 12px; color: #c3cad8; }
.am-fam button:hover { border-color: var(--green); }
.am-fam b { color: var(--text); font-weight: 600; margin-left: 3px; }
.am-wire-label { font: 600 11px/1 ui-sans-serif, system-ui, "Segoe UI", sans-serif; }
.am-legend { display: flex; flex-wrap: wrap; gap: 14px 20px; justify-content: center; margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.am-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.am-legend i { display: inline-block; width: 3px; height: 14px; border-radius: 2px; }
.am-legend svg { width: 34px; height: 8px; }
.am-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.am-pick button { border: 1px solid var(--border-2); background: var(--panel); border-radius: 999px; height: 32px; padding: 0 13px; font-size: 13px; color: #c3cad8; }
.am-pick button.am-on { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.am-pick.am-sub button { height: 28px; font-size: 12px; padding: 0 11px; }
.am-pick.am-sub button.am-on { background: var(--violet); border-color: var(--violet); color: #120b24; }
.am-drill { position: relative; margin-top: 8px; }
.am-cols { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px; }
.am-col h3 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.am-col h3 span { color: var(--muted-2); font-weight: 600; }
.am-stack { display: flex; flex-direction: column; gap: 6px; }
.am-col .am-card { padding: 7px 9px 7px 12px; border-radius: 9px; }
.am-col .am-card .am-nm { font-size: 13px; margin: 0; }
.am-col .am-card .am-ln { font-size: 11px; }
.am-col .am-card .am-ek { font-size: 9px; }
.am-col .am-card.am-mini { padding: 4px 8px 4px 11px; border-radius: 7px; }
.am-col .am-card.am-mini .am-ek, .am-col .am-card.am-mini .am-ln { display: none; }
.am-col .am-card.am-mini .am-nm { font-size: 12px; font-weight: 500; }
.am-col .am-card.am-mini .am-chips { margin-top: 3px; }
.am-col .am-bbar { min-height: 24px; padding: 0 7px; }
.am-col .am-bbar .bd-progress-words { font-size: 11px; }
.am-card.am-more { border-style: dashed; margin-top: 8px; }
.am-card.am-more::before { background: var(--muted-2); }
.am-sep { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin: 10px 0 2px; }
.am-drill.am-focus .am-card:not(.am-hl) { opacity: .32; }
.am-drill.am-focus .am-card.am-sel { opacity: 1; }
.am-note { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
@media (max-width: 999px) {
  .am-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .am-drill .am-wires { display: none; }
  .am-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
  .am-drill.am-focus .am-card:not(.am-hl) { opacity: .45; }
}
.am-panel { position: sticky; top: var(--am-top, 110px); max-height: calc(100vh - var(--am-top, 110px) - 16px); overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 16px 18px; }
.am-panel h2 { font-size: 18px; margin: 4px 0 6px; word-break: break-word; }
.am-panel h4 { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
.am-panel p { margin: 0 0 8px; color: #c3cad8; }
.am-path { display: flex; gap: 6px; align-items: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-family: var(--mono); font-size: 12px; word-break: break-all; }
.am-path span { flex: 1; }
.am-path button { flex: none; border: 1px solid var(--border-2); background: var(--panel-2); border-radius: 6px; font: 600 11px ui-sans-serif, system-ui; padding: 2px 7px; }
.am-panel ul { list-style: none; margin: 0; padding: 0; }
.am-panel li { padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.am-panel li:last-child { border-bottom: 0; }
.am-ev { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); word-break: break-all; }
.am-lk { border: 0; background: none; padding: 0; color: var(--text); text-align: left; font-weight: 600; }
.am-lk:hover { text-decoration: underline; }
.am-f .am-lk { color: var(--green); margin-left: 4px; }
.am-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 4px; padding: 1px 5px; margin-right: 6px; background: var(--panel-3); color: var(--muted); }
.am-tag.am-w { background: #2a210a; color: #f3d27a; } .am-tag.am-r { background: #0e2419; color: #7fe0b2; }
.am-gate { border-left: 3px solid var(--amber); background: #1b1810; padding: 8px 10px; border-radius: 0 8px 8px 0; font-size: 13px; color: #e9dcb8; margin: 0 0 6px; }
.am-none { color: var(--muted-2); font-size: 13px; }
.am-health { border: 1px dashed #6b5415; border-radius: 8px; padding: 8px 10px; font-size: 13px; color: #e9dcb8; }
.am-x { display: none; float: right; border: 1px solid var(--border-2); background: var(--panel-2); border-radius: 999px; width: 32px; height: 32px; }
.am-builds li { display: grid; gap: 4px; padding: 9px 0; }
.am-bt { font-weight: 600; }
.am-bw { display: block; font-size: 12px; color: var(--muted); }
.am-open-build { justify-self: start; border: 1px solid var(--border-2); background: var(--panel-2); border-radius: 999px; padding: 3px 12px; font-size: 12px; }
.am-open-build:hover { border-color: var(--green); }
.am-guide ol { margin: 0; padding-left: 18px; color: #c3cad8; }
.am-guide li { border: 0; padding: 3px 0; }
@media (max-width: 1099px) {
  .am-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 72vh; border-radius: 16px 16px 0 0; z-index: 50; display: none; box-shadow: 0 -12px 40px rgba(0,0,0,.55); }
  .am-panel.am-open { display: block; }
  .am-x { display: block; }
  .am-guide-inline { display: block; margin-top: 18px; }
  /* Round 16 (planning ruling on finding 2): a question waiting on him is never hidden. While the fixed panel is open,
     her dock rises above it carrying only the "Waiting for your yes" strip; her window, and the rail with the voice
     button, sit under the panel until it closes. The panel's end clears the strip by the dock's measured height. */
  html:has(.am-panel.am-open) .ol-dock { z-index: 51; }
  html:has(.am-panel.am-open) .ol-dock .ol-win { display: none; }
  html.ol-docked .am-panel.am-open { padding-bottom: calc(18px + var(--ol-dock-h, 0px)); }
}
@media (min-width: 1100px) { .am-guide-inline { display: none; } }
.am-gaps { display: grid; gap: 14px; }
.am-gaps section { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.am-gaps h3 { margin: 0 0 4px; font-size: 15px; }
.am-gaps p { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.am-gaps ul { list-style: none; padding: 0; margin: 0; }
.am-gaps li { font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--border); word-break: break-word; }
.am-gaps li:last-child { border-bottom: 0; }
.am-gaps code { font-family: var(--mono); font-size: 12px; color: #c3cad8; }
.am-hidden { display: none !important; }
.am-rl.am-phone-only { display: none; }
.am-flow { display: none; font-size: 12px; color: var(--muted); margin-top: 6px; }
@media (max-width: 600px) {
  .arch-wrap { padding: 12px 16px 64px; }
  .am-search { flex: 1 1 100%; margin-left: 0; }
  .am-ov .am-wires { display: none; }
  .am-ov-row { margin-bottom: 22px; }
  .am-ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-ov-grid.am-stores, .am-ov-grid.am-mach { grid-template-columns: minmax(0, 1fr); }
  .am-ov-grid.am-app { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-grp { padding: 10px; }
  .am-seg button { padding: 0 12px; }
  .am-rl.am-phone-only, .am-flow { display: block; }
}
@media (prefers-reduced-motion: reduce) { .arch * { transition: none !important; } }