/* The dashboard's look: "Night studio" (Dor's pick, 20 Oct 2026), with the Storybook trial's drawn characters as the
   orchestrators' faces. Layered navy in the dark theme, cool paper in the light one, one electric-indigo accent, a
   floating tab bar. Every colour is a token on :root, set for both themes. Mobile first: Dor answers on his phone, so
   tap targets are at least 40px and nothing is wider than the screen.

   Colour means one thing only:
     red    only you, stuck, blocked (a room silent for 26 hours, a day where nothing ran, an error)
     amber  watch (urgent, needs action, a missed run, a C or D grade)
     green  good (ran, healthy, an A or B grade, done)
   Each orchestrator's own colour (--o-boo ... --o-otto) is identity only: its face and its room's top edge. It is never
   put on a number or a state. The accent is for controls (buttons, the tab you are on) and the big number.
   Motion is transform-only and its resting state is the drawn one, so a skipped animation never hides anything; none
   plays under "reduce motion". Decorative layers never take a tap (pointer-events: none). */

:root {
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bg: #f3f5fb;
  --card: #ffffff;
  --card-2: #eef1f9;
  --border: #dde2f0;
  --text: #111a33;
  --muted: #4d5776;
  --faint: #5f6987;
  --accent: #5943ec;
  --accent-ink: #ffffff;
  --accent-soft: #ebeafe;
  --amber: #8a5800;
  --amber-soft: #fcf0d8;
  --green: #17784a;
  --green-soft: #e0f4e9;
  --red: #b4322a;
  --red-soft: #fce6e3;
  --red-ink: #ffffff;          /* text on a solid red (the error toast) */
  --field: #ffffff;
  --shadow: 0 1px 2px rgba(17, 26, 51, 0.05), 0 10px 28px -16px rgba(17, 26, 51, 0.22);
  --radius: 18px;
  /* The orchestrators' own colours: pastel in both themes, so a face's dark ink reads on it either way. */
  --o-boo: #c9a3f5;
  --o-dean: #69c1fc;
  --o-chuppy: #f197c2;
  --o-raul: #3bcfcf;
  --o-otto: #a1b1ff;
  --o-gus: #8fd694;
  --face-ink: #111a33;
  --face-fill: #fffaf3;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020;
    --card: #131a2e;
    --card-2: #1b2440;
    --border: #29355a;
    --text: #eef1fb;
    --muted: #a6afca;
    --faint: #8c95b4;
    --accent: #9590ff;
    --accent-ink: #0b1020;
    --accent-soft: #252a63;
    --amber: #f4b552;
    --amber-soft: #33280f;
    --green: #56d495;
    --green-soft: #102c20;
    --red: #ff8178;
    --red-soft: #3a1618;
    --red-ink: #0b1020;
    --field: #0e1427;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px -20px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
/* A soft indigo glow at the top of the page: decoration, under everything, never in the way of a tap. */
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 360px; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
a { color: var(--accent); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shell {
  max-width: 720px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 110px max(16px, env(safe-area-inset-left));
}

/* ---------- header and nav ---------- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; position: relative; z-index: 6; }
.brand { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; }
.top-link { font-size: 0.9rem; padding: 10px 0; text-decoration: none; color: var(--muted); }
.top-link:hover { color: var(--text); }

.top-actions { display: flex; align-items: center; gap: 8px; }
.refresh-btn {
  cursor: pointer; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); padding: 0;
}
.refresh-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.refresh-btn[disabled] { cursor: progress; }
.refresh-btn[disabled] svg { animation: refresh-spin 0.8s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .refresh-btn[disabled] svg { animation: none; } .refresh-btn[disabled] { opacity: 0.6; } }

/* The menu: a details element; its panel drops below the header, over the page. */
.menu { position: relative; }
.menu-btn {
  list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 0.95rem;
}
.menu-btn::-webkit-details-marker { display: none; }
.menu[open] .menu-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); width: min(320px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.35); padding: 6px; display: flex; flex-direction: column;
}
.menu-item {
  display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 8px 12px; border-radius: 12px;
  text-decoration: none; color: var(--text); background: none; border: none; text-align: left; font-size: 1rem;
}
.menu-item small { color: var(--muted); font-size: 0.8rem; }
.menu-item:hover, .menu-item:focus-visible { background: var(--card-2); }
.menu-danger { color: var(--red); border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; margin-top: 4px; }

/* The three bottom tabs: a rounded, frosted bar floating over the page, an icon over each word. */
.bottom {
  position: fixed; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 8;
  display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px;
  border: 1px solid var(--border); border-radius: 22px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5);
}
@media (min-width: 760px) {
  .bottom { left: 0; right: 0; margin: 0 auto; width: 420px; }
}
.bnav {
  min-height: 54px; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; border-radius: 16px;
  text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.01em;
}
.bnav::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.bnav.is-active { color: var(--accent); background: var(--accent-soft); }
#nav-today { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E"); }
#nav-rooms { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4.5A1.5 1.5 0 0 1 7.5 3h9A1.5 1.5 0 0 1 18 4.5V21'/%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M14.5 12v1'/%3E%3C/svg%3E"); }
#nav-team { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.8'/%3E%3Cpath d='M16.6 14.6c2.6 0 4.4 1.6 4.9 4.4'/%3E%3C/svg%3E"); }

/* A room's "needs you" count: a count, not an alarm, so the accent and never red. */
.tab .count { font-size: 0.75rem; font-weight: 700; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-align: center; }
.tab.is-active .count { background: var(--text); color: var(--bg); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 0.92rem; text-decoration: none; color: var(--text);
}
.tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tab.is-soon { color: var(--faint); background: transparent; cursor: default; }
.tab em { font-style: normal; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }

.page-title { font-size: 2.1rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.page-title > span:not(.av) { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* ---------- status line ---------- */
.status { margin: 0 0 14px; color: var(--muted); font-size: 0.98rem; }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 12px;
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error { color: var(--red); margin: 8px 0 0; }
.empty { color: var(--muted); margin: 4px 0 12px; }
.warn { background: var(--amber-soft); color: var(--amber); border-color: transparent; font-size: 0.92rem; }
.load-error { background: var(--red-soft); color: var(--red); border-color: transparent; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Ask BOO ---------- */
.ask-title { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
textarea, input[type="text"], input[type="date"], input[type="password"] {
  width: 100%;
  min-height: 44px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 1rem;           /* 16px: iOS does not zoom into the field */
  resize: vertical;
}
.row-end { display: flex; justify-content: flex-end; margin-top: 8px; }
#ask-text { min-height: 84px; }   /* its placeholder runs to three lines at phone width */
.note { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.reply { margin: 6px 0; padding: 8px 10px; border-radius: 12px; background: var(--card-2); }
.reply-you { background: var(--accent-soft); }

/* ---------- groups ---------- */
.group { margin-top: 26px; }
.group h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
.group-sub { margin: 0 0 10px; color: var(--muted); font-size: 0.92rem; }
.group-only-you h2, .group-stalled h2 { color: var(--red); }

.fold { margin-top: 22px; }
.fold summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: "\25B8"; color: var(--muted); transition: transform 0.15s; }
.fold[open] summary::before { transform: rotate(90deg); }

/* ---------- a question ---------- */
.q-card.is-red { border-left: 4px solid var(--red); }
.q-card.is-urgent:not(.is-red) { border-left: 4px solid var(--amber); }
.q-meta { margin: 0 0 6px; color: var(--muted); font-size: 0.86rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.q-meta .who { color: var(--text); font-weight: 600; }
.badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.badge {
  font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--card-2); color: var(--muted); white-space: nowrap;
}
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-green { background: var(--green-soft); color: var(--green); }
.q-text { margin: 0 0 8px; font-size: 1.06rem; line-height: 1.4; white-space: pre-wrap; }
.q-text.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.q-line { margin: 0 0 8px; font-size: 0.92rem; }
.q-rec { margin: 0 0 8px; font-size: 0.92rem; padding: 8px 10px; border-radius: 12px; background: var(--accent-soft); }
.q-prev { color: var(--muted); }
.q-warn { color: var(--amber); }
.q-answer { margin: 0 0 6px; }
.done-row { padding: 10px 14px; }
.done-row .q-text { font-size: 0.95rem; margin-bottom: 4px; }

/* ---------- controls ---------- */
.answer { margin-top: 6px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.row.two > .btn { flex: 1 1 0; }
.row.field { flex-wrap: nowrap; align-items: flex-start; }
.row.field > input, .row.field > textarea { flex: 1 1 auto; min-width: 0; }
.row.field > .btn { flex: none; }

.btn {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-answer { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 600; min-height: 48px; }
.btn-answer:active { background: var(--accent); color: var(--accent-ink); }
.btn-quiet { background: transparent; }
.btn-wide { width: 100%; }
.chips .chip { flex: 0 1 auto; }

.link {
  background: none; border: none; padding: 10px 0; min-height: 44px;
  color: var(--accent); font-size: 0.92rem; text-align: left;
}
.link-danger { color: var(--red); }
.note-box { margin-top: 2px; }
.later { margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); }
.change { margin-top: 6px; }

/* ---------- sign in ---------- */
.signin h2 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; }
.si-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.si-form label { font-size: 0.9rem; color: var(--muted); }
.link-btn { display: flex; align-items: center; justify-content: center; margin-top: 12px; text-decoration: none; color: var(--accent); }
/* A link drawn as the primary button keeps the button's ink: .link-btn's accent colour on the accent fill made
   Today's "Answer in <name>'s room" buttons blank blue boxes (found on the Otto build's render check, 19 Oct). */
.link-btn.btn-primary { color: var(--accent-ink); }
.signin .small { text-align: center; margin: 6px 0 0; }

/* ---------- toast (fixed, rendered at the body, never inside a transformed parent) ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom));   /* above the floating tab bar (10px + 66px tall) */
  width: max-content; max-width: min(92vw, 520px);   /* its own width: from left: 50% it would wrap at half the screen */
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--text); color: var(--bg);
  font-size: 0.95rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  z-index: 10;
}
.toast-bad { background: var(--red); color: var(--red-ink); }

@media (min-width: 900px) {
  .page-title { font-size: 2.3rem; }
}

/* ---------- Today ---------- */
.health { display: flex; align-items: center; gap: 10px; font-weight: 600; border-radius: 999px; padding: 10px 16px; font-size: 0.95rem; }
.health .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: currentColor; }
.health-green { background: var(--green-soft); color: var(--green); border-color: transparent; }
.health-amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.health-red { background: var(--red-soft); color: var(--red); border-color: transparent; }
.q-room { margin: 0 0 4px; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.q-room a { text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; min-height: 40px; }
.q-details summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--muted); font-size: 0.9rem; }
.q-card.is-readonly .link-btn { margin-top: 4px; }
.rows { padding-top: 4px; padding-bottom: 4px; }
.orow { padding: 10px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.orow:last-child { border-bottom: none; }
.orow p { margin: 0; }
.orow-name a { display: inline-flex; align-items: center; min-height: 40px; }
.orow-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.orow-meta { color: var(--muted); font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.orow.is-stale .orow-name b { color: var(--red); }
/* An orchestrator's row: its face on the left, name and state beside it. */
.orow-orch { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.orow-orch > .av { grid-row: 1 / span 2; }
.bad { color: var(--red); font-weight: 600; }

/* ---------- a room (#boo, #dean, #chuppy, #raul, #otto) ---------- */
.room-head { color: var(--text); font-size: 0.95rem; display: block; }
.room-head .badge { margin-left: 6px; }
.room-head.is-stale { border-left: 4px solid var(--red); }
.member { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.member:first-of-type { border-top: none; margin-top: 4px; padding-top: 0; }
.rrow { border-bottom: 1px solid var(--border); }
.rrow:last-child { border-bottom: none; }
.rrow summary { cursor: pointer; list-style: none; min-height: 44px; padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.rrow summary::-webkit-details-marker { display: none; }
.rrow-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.grade { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 10px; background: var(--card-2); font-weight: 700; font-size: 0.95rem; }
.grade small { font-weight: 400; color: var(--muted); font-size: 0.72rem; }
.grade.is-none { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
.grade .dial { width: 26px; height: 26px; }
.rrow-body { padding: 0 0 10px; }
@media (max-width: 420px) { .grades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.q-meta a { display: inline-flex; align-items: center; min-height: 40px; }
.q-card.is-done, .member.is-done { opacity: 0.6; }
/* "Sent", "Approved", "You answered this": a tick that pops in beside the words. */
.done-note, .q-sent { color: var(--green); font-weight: 600; }
.done-note::before, .q-sent::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 6px; vertical-align: -0.16em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm-1.7 15.6 7.1-7.1-1.6-1.6-5.5 5.5-2.7-2.7-1.6 1.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm-1.7 15.6 7.1-7.1-1.6-1.6-5.5 5.5-2.7-2.7-1.6 1.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* Otto's room: Dor's messages and Otto's replies under the box (private store). */
.msg { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.msg p { margin: 2px 0; }
.msg-text, .msg-reply { white-space: pre-wrap; }
.q-meta-flow { display: block; }   /* a room card's meta line flows as one sentence instead of breaking after the name */
.q-meta-flow .badges { vertical-align: middle; }
.q-meta-flow > .who.has-av { margin: -2px 0; vertical-align: middle; }

/* ---------- Otto's private notes (#otto): text from his store, drawn as plain blocks ---------- */
.md p { margin: 0 0 8px; overflow-wrap: anywhere; }
.md .md-h { font-weight: 700; margin-top: 12px; }
.md .md-lead { font-weight: 700; }
.md-list { margin: 0 0 8px; padding-left: 20px; }
.md-list li { margin: 0 0 4px; overflow-wrap: anywhere; }
.fold-card summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.fold-card[open] summary { margin-bottom: 8px; }

/* ---------- Team (#team) ---------- */
.lead { margin: 0 0 8px; font-size: 0.98rem; }
.hero ~ .lead { color: var(--muted); font-size: 0.92rem; }
.attn-line { margin: 0 0 6px; font-size: 0.92rem; }
.attn-line a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 0 0 12px; }
.seg-btn { min-height: 44px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text); background: var(--card); font-weight: 600; font-size: 0.95rem; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.is-active { background: var(--accent); color: var(--accent-ink); }
.tree-room { padding-top: 6px; padding-bottom: 6px; }
.pb { margin: 12px 0 2px; font-size: 0.85rem; text-transform: none; }
.pb.is-planned, .trow.is-planned { color: var(--faint); }
.trow {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 0 10px 10px; min-height: 44px;
  border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); border-left: 3px solid transparent;
}
.trow:last-child { border-bottom: none; }
.trow.is-act { border-left-color: var(--amber); }
.trow.is-watch { border-left-color: var(--border); }
/* An orchestrator's row on Team: its face on the left, everything else beside it. */
.trow.trow-orch { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.trow.trow-orch > .av { grid-column: 1; grid-row: 1 / span 6; align-self: start; margin-top: 2px; }
.trow.trow-orch > :not(.av) { grid-column: 2; }
.trow-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.trow-job { font-size: 0.88rem; }
.trow-meta { font-size: 0.85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.trow.is-planned .trow-job { color: var(--faint); }
/* A grade: a ring around its letter, filled to its score. A and B green, C and D amber, no data a dashed grey ring
   with its words. */
.gbadge { display: inline-flex; align-items: center; gap: 5px; padding: 0; background: none; color: var(--text); font-size: 0.8rem; font-weight: 700; }
.gbadge small { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.gbadge-none small { font-weight: 500; }
.dial { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial .trk { fill: none; stroke: var(--border); stroke-width: 3.2; }
.dial .arc { fill: none; stroke: var(--ring); stroke-width: 3.2; stroke-linecap: round; }
.dial .dash { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.dial b { position: relative; font-size: 0.8rem; line-height: 1; color: var(--ring-ink); font-weight: 800; }
.g-A, .g-B { --ring: var(--green); --ring-ink: var(--green); }
.g-C, .g-D { --ring: var(--amber); --ring-ink: var(--amber); }
.g-none { --ring: var(--faint); --ring-ink: var(--muted); }
.g-none .dial .trk { stroke: var(--faint); stroke-dasharray: 2.6 3.2; }
.q-line > a, p > a.tap { display: inline-flex; align-items: center; min-height: 40px; }
/* The last 7 days as a tiny strip of bars: green ran, amber missed (a missed run is to watch; red stays for blocked). */
.dots-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dots { display: inline-flex; gap: 3px; align-items: center; padding: 3px 4px; border-radius: 6px; background: var(--card-2); }
.dot { width: 8px; height: 16px; border-radius: 2px; background: var(--border); flex: none; }
.dot-ran { background: var(--green); }
.dot-missed { background: var(--amber); }
.dot-outage { background: repeating-linear-gradient(135deg, var(--faint) 0 2px, transparent 2px 4px); }
.dot-later { background: transparent; outline: 1.5px dashed var(--faint); outline-offset: -1.5px; }
.bottom-line { font-size: 0.95rem; }
.bottom-line a { display: inline-flex; align-items: center; min-height: 40px; }
.element .el-head { margin: 0 0 4px; font-size: 1.02rem; }
.reading { font-weight: 600; }

/* ---------- an agent's page ---------- */
.back { margin: 0 0 4px; }
.back a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; }
.room-head a { display: inline-flex; align-items: center; min-height: 40px; }
.orow-pair { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.orow-pair > b { white-space: nowrap; }
.orow a { display: inline-flex; align-items: center; min-height: 40px; overflow-wrap: anywhere; }

/* ---------- Library ---------- */
.lib-search input { width: 100%; min-height: 44px; background: var(--field); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 1rem; }
.lib-room { padding-top: 4px; padding-bottom: 4px; }
.lib-room > summary, .lib-month > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.lib-room > summary::-webkit-details-marker, .lib-month > summary::-webkit-details-marker { display: none; }
.lib-room > summary::before, .lib-month > summary::before { content: "\25B8"; color: var(--muted); margin-right: 6px; transition: transform 0.15s; }
.lib-room[open] > summary::before, .lib-month[open] > summary::before { transform: rotate(90deg); }
.lib-month { margin-left: 8px; }
.lib-month > summary { font-weight: 600; font-size: 0.92rem; }
.lrow { display: block; min-height: 44px; padding: 11px 0 11px 18px; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 0.94rem; line-height: 1.4; }
.doc { overflow-wrap: anywhere; }
.doc-md p { margin: 0 0 10px; }
.doc-md .md-h { font-size: 1.02rem; margin: 18px 0 6px; }
.doc-md .md-h1 { font-size: 1.15rem; }
.md-quote { border-left: 3px solid var(--border); padding-left: 10px; color: var(--muted); }
.code { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--card-2); border-radius: 10px; padding: 10px; font-size: 0.82rem; margin: 0 0 10px; }
.table-wrap { max-width: 100%; overflow-x: auto; margin: 0 0 10px; }
.table-wrap table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.84rem; }
.table-wrap th, .table-wrap td { border: 1px solid var(--border); padding: 5px 6px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.table-wrap th { background: var(--card-2); }

/* ---------- Running & cost ---------- */
.outage-note { background: var(--card-2); }
.strip-head { margin: 0 0 8px; }
.strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px; padding: 2px; background: var(--card-2); text-align: center; }
.cell-day { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.cell-val { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.cell-ok { background: var(--green-soft); }
.cell-ok .cell-val { color: var(--green); }
.cell-some { background: var(--amber-soft); }
.cell-some .cell-val { color: var(--amber); }
.cell-none { background: var(--red-soft); }
.cell-none .cell-val { color: var(--red); }
.cell-off .cell-val, .cell-later .cell-val { color: var(--faint); font-weight: 400; font-size: 0.78rem; }
.cell-outage { background: repeating-linear-gradient(135deg, var(--card-2), var(--card-2) 4px, var(--border) 4px, var(--border) 6px); }
.cell-outage .cell-val { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.cell.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.strip-missed { margin-top: 8px; }
table.cost td:first-child, table.cost th:first-child { width: 42%; }
.faint { color: var(--faint); }
/* Five rooms on one row at 375px: equal columns, each face over its name, the count as a small badge on the corner. */
.switcher { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 6px 0 14px; }
.switcher .tab { position: relative; flex-direction: column; justify-content: center; gap: 3px; min-height: 64px; padding: 6px 2px 5px; font-size: 0.8rem; font-weight: 600; border-radius: 18px; }
.switcher .tab .count { position: absolute; top: -7px; right: -4px; min-width: 18px; padding: 1px 5px; font-size: 0.7rem; box-shadow: 0 0 0 2px var(--bg); }

/* ======================================================================= the faces, the big number, the tick */

/* An orchestrator's face: its drawn character in a glowing circle of its own colour. Always aria-hidden: its name is
   always written beside it. */
.av { --s: 28px; --o: var(--accent); width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; vertical-align: middle; border-radius: 50%; overflow: hidden;
  background: var(--o);
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--o) 40%, #ffffff) 0%, var(--o) 52%, color-mix(in srgb, var(--o) 72%, #000000) 100%);
  box-shadow: 0 0 0 2px var(--card), 0 4px 14px -4px color-mix(in srgb, var(--o) 70%, transparent); }
.av svg { width: 100%; height: 100%; display: block; }
.av .f { fill: var(--face-fill); stroke: var(--face-ink); stroke-width: 1.4; stroke-linejoin: round; }
.av .k { fill: var(--face-ink); }
.av .w { fill: #ffffff; stroke: var(--face-ink); stroke-width: 1.2; }
.av .l { fill: none; stroke: var(--face-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.av-xs { --s: 20px; }
.av-sm { --s: 28px; }
.av-md { --s: 40px; }
.av-lg { --s: 52px; }
.o-boo { --o: var(--o-boo); }
.o-dean { --o: var(--o-dean); }
.o-chuppy { --o: var(--o-chuppy); }
.o-raul { --o: var(--o-raul); }
.o-otto { --o: var(--o-otto); }
.o-gus { --o: var(--o-gus); }
/* A room's card edge in its orchestrator's colour (identity, never a state). */
.o-edge { border-top: 3px solid var(--o); }
.has-av { display: inline-flex; align-items: center; gap: 6px; }
.q-meta .who.has-av { gap: 6px; vertical-align: middle; }
.av-stack { display: inline-flex; align-items: center; }
.av-stack .av { box-shadow: 0 0 0 2px var(--bg); }
.av-stack .av + .av { margin-left: -5px; }
.switcher .tab .av { box-shadow: 0 0 0 2px var(--card); }
.switcher .tab.is-active .av { box-shadow: 0 0 0 2px var(--accent-ink); }

/* One big number per screen: how many things wait on Dor. Nothing waiting: the orchestrator says so in its own voice. */
.hero { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.hero-main { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; }
.hero-num { flex: none; font-size: 4.25rem; line-height: 0.95; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; }
.hero-label { font-size: 1.35rem; font-weight: 700; line-height: 1.15; color: var(--text); }
.hero-sub { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 0.9rem; }
.hero-zero { flex-direction: row; align-items: center; gap: 14px; }
.hero-text { margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero-chip { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--red-soft); color: var(--red); }
/* The big number already says how many: the section's own "Needs you · N" heading stays for screen readers, and so does
   the empty line under it, which the orchestrator's own words above would only repeat. */
.hero ~ .group-needs > h2, .hero ~ .group-room-needs > h2,
.hero ~ .group-needs > .empty, .hero ~ .group-room-needs > .empty,
.hero-zero ~ #sections .group-waiting.is-empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero ~ .group-needs, .hero ~ .group-room-needs { margin-top: 14px; }

/* The "done" moment: a tick that draws itself in the confirmation. */
.tick { width: 22px; height: 22px; flex: none; }
.tick.tick-lg { width: 52px; height: 52px; }
.tick circle { fill: var(--green); }
.tick path { fill: none; stroke: var(--card); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: draw 0.5s cubic-bezier(0.3, 0.7, 0.3, 1); }
.tick-lg path { stroke-width: 2.2; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0.5); } to { transform: none; } }

/* The entrance, the first time a page is drawn: each card rises into place a beat after the one above it. Transform
   only: a card whose animation never runs is simply where it belongs. It moves in whole pixels, fast then slowing (each
   stretch steps 1px at a time): a fractional offset makes everything in the card measure a hair short while it moves
   (a 40px link read 39.9999px and failed the tap-target check), and whole pixels keep every box exact. */
@keyframes rise {
  0% { transform: translateY(12px); animation-timing-function: steps(6, end); }
  30% { transform: translateY(6px); animation-timing-function: steps(4, end); }
  60% { transform: translateY(2px); animation-timing-function: steps(2, end); }
  100% { transform: none; }
}
.rise .card, .rise .hero { animation: rise 0.42s backwards; animation-delay: calc(var(--i, 0) * 45ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Gus's room (docs/SPEC-GROWTH-ORCHESTRATOR-DRAFT.md): a sub-room per client, the growth plan as a table and actions. */
.gus-clients { margin: 0 0 12px; }
.table-scroll { overflow-x: auto; margin: 8px 0 12px; }
.gus-table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.gus-table th, .gus-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.gus-table th[scope="row"] { text-align: left; font-weight: 500; }
.gus-table tr.is-plan th, .gus-table tr.is-plan td { font-weight: 600; }
.gus-action summary { cursor: pointer; line-height: 1.5; min-height: 44px; padding: 10px 0; }
.gus-action .gus-n { font-variant-numeric: tabular-nums; color: var(--faint); }
.gus-action[open] summary { margin-bottom: 6px; }