/* Cobenian board room. Ten themes of our own (Midnight, Deep sea, Beacon, Signal, Slate & Coral,
   Field, Ledger, Onyx, Claret, Dusk), each with a light and a dark mode; <html data-theme
   data-mode> picks one (set by /assets/theme.js before paint). The first four token blocks are
   generated by docs/themes/build.py and the other six come from docs/themes/themes6, which both
   check text contrast; theme_colours_test.exs checks that colours that mean different things
   look different. Inter and JetBrains Mono are served from /fonts (open licences). */

@font-face { font-family:Inter; src:url("/fonts/inter-8e433c0592f77beb6dc527d7b90be120.woff2?vsn=d") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("/fonts/jetbrains-mono-33d0fc2ba586ae230da5d315682c2dbd.woff2?vsn=d") format("woff2"); font-weight:100 800; font-display:swap; }
@font-face { font-family:Orbitron; src:url("/fonts/orbitron-5597990592e91d891ba1c85743d7299d.woff2?vsn=d") format("woff2"); font-weight:400 900; font-display:swap; }
@font-face { font-family:"DM Sans"; src:url("/fonts/dm-sans-aef1c6b4d4a340241e022ca547e075ac.woff2?vsn=d") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face { font-family:Fraunces; src:url("/fonts/fraunces-5d283517432688cbc312a7a954516cce.woff2?vsn=d") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url("/fonts/ibm-plex-sans-d28498895ed7050c37c94ddd026a4670.woff2?vsn=d") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono-400-814fe1615d4dbc7bbd92d26a6bda0905.woff2?vsn=d") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono-600-e71a597e376ed91862e822b5a5de8c04.woff2?vsn=d") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:Newsreader; src:url("/fonts/newsreader-432594addc72a3c6f12da1d0f39abf12.woff2?vsn=d") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face { font-family:Newsreader; src:url("/fonts/newsreader-italic-c85f32bf122f8f52e0c1af9599e48961.woff2?vsn=d") format("woff2"); font-weight:400 700; font-style:italic; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("/fonts/space-grotesk-25ea4a783c12103f175f5b157b7d96aa.woff2?vsn=d") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face { font-family:"Playfair Display"; src:url("/fonts/playfair-display-6da252de0cbc8a69b5d5c2e0e3f67722.woff2?vsn=d") format("woff2"); font-weight:400 800; font-display:swap; }
@font-face { font-family:Outfit; src:url("/fonts/outfit-98ccc2b7f18991a5126a91ac56fbb1fc.woff2?vsn=d") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face { font-family:Sora; src:url("/fonts/sora-f544d77b0e9b284f5c9f06c0905d9f41.woff2?vsn=d") format("woff2"); font-weight:400 700; font-display:swap; }

/* THEMES:BEGIN generated by docs/themes/build.py; edit the palettes there, not here. */
[data-theme="midnight"][data-mode="light"] {
  color-scheme:light;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --head-weight:750;
  --h1-size:30px;
  --head-track:-.025em;
  --r:12px;
  --bg:#eef1ff;
  --backdrop:radial-gradient(1200px 700px at 85% -10%, rgba(99,102,241,0.3), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(56,189,248,0.28), transparent 60%), radial-gradient(900px 700px at 60% 120%, rgba(192,132,252,0.28), transparent 60%), #eef1ff;
  --blur:blur(18px);
  --surface:rgba(255,255,255,0.78);
  --surface-2:#ffffff;
  --sunk:#ffffff;
  --line:rgba(67,56,202,.10);
  --line-2:rgba(67,56,202,.22);
  --rail:rgba(238,241,255,0.6);
  --rail-ink:#14123a;
  --rail-muted:#57547f;
  --rail-line:rgba(67,56,202,.10);
  --rail-on:rgba(255,255,255,0.9);
  --rail-accent:#4f46e5;
  --rail-dot:#0b6b62;
  --wordmark:#14123a;
  --ink:#14123a;
  --ink-2:#34306a;
  --muted:#57547f;
  --pri:#4f46e5;
  --pri2:#7c3aed;
  --pri-fill:linear-gradient(135deg,#4f46e5,#7c3aed);
  --on-pri:#ffffff;
  --pri-text:#4338ca;
  --pri-soft:rgba(79,70,229,0.17);
  --pri-line:rgba(67,56,202,0.42);
  --acc:#0284c7;
  --acc-text:#0369a1;
  --acc-soft:rgba(2,132,199,0.13);
  --good:#0b6b62;
  --good-soft:rgba(11,107,98,0.13);
  --warn:#8a5206;
  --warn-soft:rgba(138,82,6,0.13);
  --gold:#8a5206;
  --gold-soft:rgba(138,82,6,0.17);
  --gold-line:rgba(138,82,6,0.45);
  --danger:#be123c;
  --danger-soft:rgba(190,18,60,0.13);
  --ok-bg:rgba(11,107,98,0.13);
  --ok-ink:#0b6b62;
  --wait-bg:rgba(138,82,6,0.13);
  --wait-ink:#8a5206;
  --run-bg:rgba(2,132,199,0.13);
  --run-ink:#0369a1;
  --meter-fill:linear-gradient(90deg,#0284c7,#4f46e5,#7c3aed);
  --meter-track:rgba(67,56,202,.10);
  --count-bg:#8a5206;
  --count-ink:#ffffff;
  --me:linear-gradient(135deg,#4f46e5,#7c3aed);
  --me-ink:#ffffff;
  --ceo:#ffffff;
  --ceo-edge:rgba(2,132,199,0.35);
  --filter-on-bg:#14123a;
  --filter-on-ink:#eef1ff;
  --shadow:0 18px 40px rgba(49,46,129,.12);
  --shadow-lg:0 24px 60px rgba(49,46,129,.20);
  --focus:#0369a1;
  --input-bg:#ffffff;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#14123a;
}
[data-theme="midnight"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --head-weight:750;
  --h1-size:30px;
  --head-track:-.025em;
  --r:12px;
  --bg:#060a1c;
  --backdrop:radial-gradient(1200px 700px at 85% -10%, rgba(99,102,241,0.45), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(14,165,233,0.3), transparent 60%), radial-gradient(900px 700px at 60% 120%, rgba(168,85,247,0.32), transparent 60%), #060a1c;
  --blur:blur(18px);
  --surface:rgba(255,255,255,0.055);
  --surface-2:rgba(255,255,255,0.09);
  --sunk:rgba(255,255,255,0.09);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --rail:rgba(6,10,28,0.55);
  --rail-ink:#eef1ff;
  --rail-muted:#9aa2c9;
  --rail-line:rgba(255,255,255,.10);
  --rail-on:rgba(255,255,255,0.09);
  --rail-accent:#a9b2ff;
  --rail-dot:#5eead4;
  --wordmark:#eef1ff;
  --ink:#eef1ff;
  --ink-2:#c9cff0;
  --muted:#9aa2c9;
  --pri:#5257f0;
  --pri2:#7c3aed;
  --pri-fill:linear-gradient(135deg,#5257f0,#7c3aed);
  --on-pri:#ffffff;
  --pri-text:#a9b2ff;
  --pri-soft:rgba(82,87,240,0.22);
  --pri-line:rgba(169,178,255,0.5);
  --acc:#22d3ee;
  --acc-text:#67e8f9;
  --acc-soft:rgba(34,211,238,0.18);
  --good:#5eead4;
  --good-soft:rgba(94,234,212,0.18);
  --warn:#fbbf24;
  --warn-soft:rgba(251,191,36,0.18);
  --gold:#fbbf24;
  --gold-soft:rgba(251,191,36,0.22);
  --gold-line:rgba(251,191,36,0.45);
  --danger:#fb7185;
  --danger-soft:rgba(251,113,133,0.18);
  --ok-bg:rgba(94,234,212,0.18);
  --ok-ink:#5eead4;
  --wait-bg:rgba(251,191,36,0.18);
  --wait-ink:#fbbf24;
  --run-bg:rgba(34,211,238,0.18);
  --run-ink:#67e8f9;
  --meter-fill:linear-gradient(90deg,#22d3ee,#5257f0,#7c3aed);
  --meter-track:rgba(255,255,255,.10);
  --count-bg:#fbbf24;
  --count-ink:#1a1200;
  --me:linear-gradient(135deg,#5257f0,#7c3aed);
  --me-ink:#ffffff;
  --ceo:rgba(255,255,255,.07);
  --ceo-edge:rgba(34,211,238,0.35);
  --filter-on-bg:#eef1ff;
  --filter-on-ink:#060a1c;
  --shadow:0 20px 50px rgba(0,0,0,.40);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#67e8f9;
  --input-bg:rgba(255,255,255,.06);
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#eef1ff;
}
[data-theme="deepsea"][data-mode="light"] {
  color-scheme:light;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --head-weight:750;
  --h1-size:30px;
  --head-track:-.025em;
  --r:12px;
  --bg:#ebf8fb;
  --backdrop:radial-gradient(1200px 700px at 85% -10%, rgba(6,182,212,0.28), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(37,99,235,0.2), transparent 60%), radial-gradient(900px 700px at 60% 120%, rgba(250,204,21,0.16), transparent 60%), #ebf8fb;
  --blur:blur(18px);
  --surface:rgba(255,255,255,0.8);
  --surface-2:#ffffff;
  --sunk:#ffffff;
  --line:rgba(67,56,202,.10);
  --line-2:rgba(67,56,202,.22);
  --rail:rgba(235,248,251,0.6);
  --rail-ink:#062430;
  --rail-muted:#43677a;
  --rail-line:rgba(67,56,202,.10);
  --rail-on:rgba(255,255,255,0.9);
  --rail-accent:#0e7490;
  --rail-dot:#0b6b62;
  --wordmark:#062430;
  --ink:#062430;
  --ink-2:#1d4250;
  --muted:#43677a;
  --pri:#0e7490;
  --pri2:#1d4ed8;
  --pri-fill:linear-gradient(135deg,#0e7490,#1d4ed8);
  --on-pri:#ffffff;
  --pri-text:#0b6680;
  --pri-soft:rgba(14,116,144,0.17);
  --pri-line:rgba(11,102,128,0.42);
  --acc:#0369a1;
  --acc-text:#0369a1;
  --acc-soft:rgba(3,105,161,0.13);
  --good:#0b6b62;
  --good-soft:rgba(11,107,98,0.13);
  --warn:#8a5206;
  --warn-soft:rgba(138,82,6,0.13);
  --gold:#8a5206;
  --gold-soft:rgba(138,82,6,0.17);
  --gold-line:rgba(138,82,6,0.45);
  --danger:#be123c;
  --danger-soft:rgba(190,18,60,0.13);
  --ok-bg:rgba(11,107,98,0.13);
  --ok-ink:#0b6b62;
  --wait-bg:rgba(138,82,6,0.13);
  --wait-ink:#8a5206;
  --run-bg:rgba(3,105,161,0.13);
  --run-ink:#0369a1;
  --meter-fill:linear-gradient(90deg,#0369a1,#0e7490,#1d4ed8);
  --meter-track:rgba(67,56,202,.10);
  --count-bg:#8a5206;
  --count-ink:#ffffff;
  --me:linear-gradient(135deg,#0e7490,#1d4ed8);
  --me-ink:#ffffff;
  --ceo:#ffffff;
  --ceo-edge:rgba(3,105,161,0.35);
  --filter-on-bg:#062430;
  --filter-on-ink:#ebf8fb;
  --shadow:0 18px 40px rgba(49,46,129,.12);
  --shadow-lg:0 24px 60px rgba(49,46,129,.20);
  --focus:#0369a1;
  --input-bg:#ffffff;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#062430;
}
[data-theme="deepsea"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --head-weight:750;
  --h1-size:30px;
  --head-track:-.025em;
  --r:12px;
  --bg:#03141c;
  --backdrop:radial-gradient(1200px 700px at 85% -10%, rgba(6,182,212,0.36), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(37,99,235,0.32), transparent 60%), radial-gradient(900px 700px at 60% 120%, rgba(250,204,21,0.12), transparent 60%), #03141c;
  --blur:blur(18px);
  --surface:rgba(255,255,255,0.05);
  --surface-2:rgba(255,255,255,0.085);
  --sunk:rgba(255,255,255,0.085);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --rail:rgba(3,20,28,0.55);
  --rail-ink:#e8fbff;
  --rail-muted:#86b1be;
  --rail-line:rgba(255,255,255,.10);
  --rail-on:rgba(255,255,255,0.09);
  --rail-accent:#67e8f9;
  --rail-dot:#99f6e4;
  --wordmark:#e8fbff;
  --ink:#e8fbff;
  --ink-2:#bfe3ee;
  --muted:#86b1be;
  --pri:#0e7490;
  --pri2:#1d4ed8;
  --pri-fill:linear-gradient(135deg,#0e7490,#1d4ed8);
  --on-pri:#ffffff;
  --pri-text:#67e8f9;
  --pri-soft:rgba(14,116,144,0.22);
  --pri-line:rgba(103,232,249,0.5);
  --acc:#67e8f9;
  --acc-text:#67e8f9;
  --acc-soft:rgba(103,232,249,0.18);
  --good:#99f6e4;
  --good-soft:rgba(153,246,228,0.18);
  --warn:#facc15;
  --warn-soft:rgba(250,204,21,0.18);
  --gold:#facc15;
  --gold-soft:rgba(250,204,21,0.22);
  --gold-line:rgba(250,204,21,0.45);
  --danger:#fda4af;
  --danger-soft:rgba(253,164,175,0.18);
  --ok-bg:rgba(153,246,228,0.18);
  --ok-ink:#99f6e4;
  --wait-bg:rgba(250,204,21,0.18);
  --wait-ink:#facc15;
  --run-bg:rgba(103,232,249,0.18);
  --run-ink:#67e8f9;
  --meter-fill:linear-gradient(90deg,#67e8f9,#0e7490,#1d4ed8);
  --meter-track:rgba(255,255,255,.10);
  --count-bg:#facc15;
  --count-ink:#1a1200;
  --me:linear-gradient(135deg,#0e7490,#1d4ed8);
  --me-ink:#ffffff;
  --ceo:rgba(255,255,255,.07);
  --ceo-edge:rgba(103,232,249,0.35);
  --filter-on-bg:#e8fbff;
  --filter-on-ink:#03141c;
  --shadow:0 20px 50px rgba(0,0,0,.40);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#67e8f9;
  --input-bg:rgba(255,255,255,.06);
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#e8fbff;
}
[data-theme="beacon"][data-mode="light"] {
  color-scheme:light;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --head-weight:750;
  --h1-size:30px;
  --head-track:-.025em;
  --r:12px;
  --bg:#f2f6ff;
  --backdrop:radial-gradient(1200px 700px at 85% -10%, rgba(37,99,235,0.24), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(56,189,248,0.2), transparent 60%), radial-gradient(900px 700px at 60% 120%, rgba(255,138,61,0.2), transparent 60%), #f2f6ff;
  --blur:blur(18px);
  --surface:rgba(255,255,255,0.8);
  --surface-2:#ffffff;
  --sunk:#ffffff;
  --line:rgba(67,56,202,.10);
  --line-2:rgba(67,56,202,.22);
  --rail:rgba(242,246,255,0.6);
  --rail-ink:#0d1a33;
  --rail-muted:#4f6283;
  --rail-line:rgba(67,56,202,.10);
  --rail-on:rgba(255,255,255,0.9);
  --rail-accent:#ff8a3d;
  --rail-dot:#0b6b62;
  --wordmark:#0d1a33;
  --ink:#0d1a33;
  --ink-2:#26385c;
  --muted:#4f6283;
  --pri:#ff8a3d;
  --pri2:#ffb347;
  --pri-fill:linear-gradient(135deg,#ff8a3d,#ffb347);
  --on-pri:#1a0b02;
  --pri-text:#a84b0c;
  --pri-soft:rgba(255,138,61,0.17);
  --pri-line:rgba(168,75,12,0.42);
  --acc:#1d4ed8;
  --acc-text:#1d4ed8;
  --acc-soft:rgba(29,78,216,0.13);
  --good:#0b6b62;
  --good-soft:rgba(11,107,98,0.13);
  --warn:#7a5a00;
  --warn-soft:rgba(122,90,0,0.13);
  --gold:#7a5a00;
  --gold-soft:rgba(122,90,0,0.17);
  --gold-line:rgba(122,90,0,0.45);
  --danger:#be123c;
  --danger-soft:rgba(190,18,60,0.13);
  --ok-bg:rgba(11,107,98,0.13);
  --ok-ink:#0b6b62;
  --wait-bg:rgba(122,90,0,0.13);
  --wait-ink:#7a5a00;
  --run-bg:rgba(29,78,216,0.13);
  --run-ink:#1d4ed8;
  --meter-fill:linear-gradient(90deg,#1d4ed8,#ff8a3d,#ffb347);
  --meter-track:rgba(67,56,202,.10);
  --count-bg:#7a5a00;
  --count-ink:#ffffff;
  --me:linear-gradient(135deg,#ff8a3d,#ffb347);
  --me-ink:#1a0b02;
  --ceo:#ffffff;
  --ceo-edge:rgba(29,78,216,0.35);
  --filter-on-bg:#0d1a33;
  --filter-on-ink:#f2f6ff;
  --shadow:0 18px 40px rgba(49,46,129,.12);
  --shadow-lg:0 24px 60px rgba(49,46,129,.20);
  --focus:#1d4ed8;
  --input-bg:#ffffff;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#0d1a33;
}
[data-theme="beacon"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --head-weight:750;
  --h1-size:30px;
  --head-track:-.025em;
  --r:12px;
  --bg:#071226;
  --backdrop:radial-gradient(1200px 700px at 85% -10%, rgba(37,99,235,0.4), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(56,189,248,0.24), transparent 60%), radial-gradient(900px 700px at 60% 120%, rgba(255,122,69,0.22), transparent 60%), #071226;
  --blur:blur(18px);
  --surface:rgba(255,255,255,0.055);
  --surface-2:rgba(255,255,255,0.09);
  --sunk:rgba(255,255,255,0.09);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --rail:rgba(7,18,38,0.55);
  --rail-ink:#eef4ff;
  --rail-muted:#93a6c6;
  --rail-line:rgba(255,255,255,.10);
  --rail-on:rgba(255,255,255,0.09);
  --rail-accent:#ffa86e;
  --rail-dot:#5eead4;
  --wordmark:#eef4ff;
  --ink:#eef4ff;
  --ink-2:#c8d6ef;
  --muted:#93a6c6;
  --pri:#ff8a4c;
  --pri2:#ffb347;
  --pri-fill:linear-gradient(135deg,#ff8a4c,#ffb347);
  --on-pri:#1a0b02;
  --pri-text:#ffa86e;
  --pri-soft:rgba(255,138,76,0.22);
  --pri-line:rgba(255,168,110,0.5);
  --acc:#66c6ff;
  --acc-text:#8fd6ff;
  --acc-soft:rgba(102,198,255,0.18);
  --good:#5eead4;
  --good-soft:rgba(94,234,212,0.18);
  --warn:#ffe066;
  --warn-soft:rgba(255,224,102,0.18);
  --gold:#ffe066;
  --gold-soft:rgba(255,224,102,0.22);
  --gold-line:rgba(255,224,102,0.45);
  --danger:#ff7a9a;
  --danger-soft:rgba(255,122,154,0.18);
  --ok-bg:rgba(94,234,212,0.18);
  --ok-ink:#5eead4;
  --wait-bg:rgba(255,224,102,0.18);
  --wait-ink:#ffe066;
  --run-bg:rgba(102,198,255,0.18);
  --run-ink:#8fd6ff;
  --meter-fill:linear-gradient(90deg,#66c6ff,#ff8a4c,#ffb347);
  --meter-track:rgba(255,255,255,.10);
  --count-bg:#ffe066;
  --count-ink:#1a1200;
  --me:linear-gradient(135deg,#ff8a4c,#ffb347);
  --me-ink:#1a0b02;
  --ceo:rgba(255,255,255,.07);
  --ceo-edge:rgba(102,198,255,0.35);
  --filter-on-bg:#eef4ff;
  --filter-on-ink:#071226;
  --shadow:0 20px 50px rgba(0,0,0,.40);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#8fd6ff;
  --input-bg:rgba(255,255,255,.06);
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#eef4ff;
}
[data-theme="signal"][data-mode="light"] {
  color-scheme:light;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --head-weight:750;
  --h1-size:30px;
  --head-track:-.025em;
  --r:12px;
  --bg:#f6f7f9;
  --backdrop:radial-gradient(1200px 700px at 85% -10%, rgba(61,123,255,0.1), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(61,123,255,0.05), transparent 60%), radial-gradient(900px 700px at 60% 120%, rgba(61,123,255,0), transparent 60%), #f6f7f9;
  --blur:none;
  --surface:#ffffff;
  --surface-2:#f1f3f6;
  --sunk:#f1f3f6;
  --line:#e3e6ec;
  --line-2:#cdd2db;
  --rail:#ffffff;
  --rail-ink:#0d0f14;
  --rail-muted:#5b6170;
  --rail-line:#e3e6ec;
  --rail-on:#f1f3f6;
  --rail-accent:#2557e6;
  --rail-dot:#0f766e;
  --wordmark:#0d0f14;
  --ink:#0d0f14;
  --ink-2:#2b2f38;
  --muted:#5b6170;
  --pri:#2557e6;
  --pri2:#2557e6;
  --pri-fill:linear-gradient(135deg,#2557e6,#2557e6);
  --on-pri:#ffffff;
  --pri-text:#1f4fd1;
  --pri-soft:rgba(37,87,230,0.17);
  --pri-line:rgba(31,79,209,0.42);
  --acc:#1f4fd1;
  --acc-text:#1f4fd1;
  --acc-soft:rgba(31,79,209,0.13);
  --good:#0f766e;
  --good-soft:rgba(15,118,110,0.13);
  --warn:#975606;
  --warn-soft:rgba(151,86,6,0.13);
  --gold:#975606;
  --gold-soft:rgba(151,86,6,0.17);
  --gold-line:rgba(151,86,6,0.45);
  --danger:#be123c;
  --danger-soft:rgba(190,18,60,0.13);
  --ok-bg:rgba(15,118,110,0.13);
  --ok-ink:#0f766e;
  --wait-bg:rgba(151,86,6,0.13);
  --wait-ink:#975606;
  --run-bg:rgba(31,79,209,0.13);
  --run-ink:#1f4fd1;
  --meter-fill:linear-gradient(90deg,#1f4fd1,#2557e6,#2557e6);
  --meter-track:rgba(67,56,202,.10);
  --count-bg:#975606;
  --count-ink:#ffffff;
  --me:linear-gradient(135deg,#2557e6,#2557e6);
  --me-ink:#ffffff;
  --ceo:#f1f3f6;
  --ceo-edge:rgba(31,79,209,0.35);
  --filter-on-bg:#0d0f14;
  --filter-on-ink:#f6f7f9;
  --shadow:0 18px 40px rgba(49,46,129,.12);
  --shadow-lg:0 24px 60px rgba(49,46,129,.20);
  --focus:#1f4fd1;
  --input-bg:#f1f3f6;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#0d0f14;
}
[data-theme="signal"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --head-weight:750;
  --h1-size:30px;
  --head-track:-.025em;
  --r:12px;
  --bg:#09090c;
  --backdrop:radial-gradient(1200px 700px at 85% -10%, rgba(61,123,255,0.3), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(61,123,255,0.12), transparent 60%), radial-gradient(900px 700px at 60% 120%, rgba(61,123,255,0), transparent 60%), #09090c;
  --blur:none;
  --surface:#121318;
  --surface-2:#181a21;
  --sunk:#181a21;
  --line:#23252e;
  --line-2:#343846;
  --rail:#0c0d11;
  --rail-ink:#f4f5f8;
  --rail-muted:#8f94a3;
  --rail-line:#23252e;
  --rail-on:#181a21;
  --rail-accent:#7aa7ff;
  --rail-dot:#7ce0d3;
  --wordmark:#f4f5f8;
  --ink:#f4f5f8;
  --ink-2:#cfd2db;
  --muted:#8f94a3;
  --pri:#2563eb;
  --pri2:#2563eb;
  --pri-fill:linear-gradient(135deg,#2563eb,#2563eb);
  --on-pri:#ffffff;
  --pri-text:#7aa7ff;
  --pri-soft:rgba(37,99,235,0.22);
  --pri-line:rgba(122,167,255,0.5);
  --acc:#7aa7ff;
  --acc-text:#7aa7ff;
  --acc-soft:rgba(122,167,255,0.18);
  --good:#7ce0d3;
  --good-soft:rgba(124,224,211,0.18);
  --warn:#ffc53d;
  --warn-soft:rgba(255,197,61,0.18);
  --gold:#ffc53d;
  --gold-soft:rgba(255,197,61,0.22);
  --gold-line:rgba(255,197,61,0.45);
  --danger:#ff8a8a;
  --danger-soft:rgba(255,138,138,0.18);
  --ok-bg:rgba(124,224,211,0.18);
  --ok-ink:#7ce0d3;
  --wait-bg:rgba(255,197,61,0.18);
  --wait-ink:#ffc53d;
  --run-bg:rgba(122,167,255,0.18);
  --run-ink:#7aa7ff;
  --meter-fill:linear-gradient(90deg,#7aa7ff,#2563eb,#2563eb);
  --meter-track:rgba(255,255,255,.10);
  --count-bg:#ffc53d;
  --count-ink:#1a1200;
  --me:linear-gradient(135deg,#2563eb,#2563eb);
  --me-ink:#ffffff;
  --ceo:#181a21;
  --ceo-edge:rgba(122,167,255,0.35);
  --filter-on-bg:#f4f5f8;
  --filter-on-ink:#09090c;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#7aa7ff;
  --input-bg:#181a21;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#f4f5f8;
}
[data-theme="cobenian"][data-mode="light"] {
  color-scheme:light;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --head-weight:750;
  --h1-size:30px;
  --head-track:-.025em;
  --r:12px;
  --bg:#e6f4f7;
  --backdrop:radial-gradient(1200px 700px at 85% -10%, rgba(6,182,212,0.34), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(34,211,238,0.28), transparent 60%), radial-gradient(900px 700px at 60% 120%, rgba(251,146,60,0.3), transparent 60%), #e6f4f7;
  --blur:blur(18px);
  --surface:rgba(255,255,255,0.78);
  --surface-2:#ffffff;
  --sunk:#ffffff;
  --line:rgba(67,56,202,.10);
  --line-2:rgba(67,56,202,.22);
  --rail:rgba(230,244,247,0.6);
  --rail-ink:#0a2730;
  --rail-muted:#3a5b68;
  --rail-line:rgba(67,56,202,.10);
  --rail-on:rgba(255,255,255,0.9);
  --rail-accent:#0a6fa8;
  --rail-dot:#14753a;
  --wordmark:#0a2730;
  --ink:#0a2730;
  --ink-2:#1e4552;
  --muted:#3a5b68;
  --pri:#0a6fa8;
  --pri2:#0c7f7a;
  --pri-fill:linear-gradient(135deg,#0a6fa8,#0c7f7a);
  --on-pri:#ffffff;
  --pri-text:#0a5f76;
  --pri-soft:rgba(10,111,168,0.17);
  --pri-line:rgba(10,95,118,0.42);
  --acc:#0369a1;
  --acc-text:#0369a1;
  --acc-soft:rgba(3,105,161,0.13);
  --good:#14753a;
  --good-soft:rgba(20,117,58,0.13);
  --warn:#8f5500;
  --warn-soft:rgba(143,85,0,0.13);
  --gold:#8f5500;
  --gold-soft:rgba(143,85,0,0.17);
  --gold-line:rgba(143,85,0,0.45);
  --danger:#b91c1c;
  --danger-soft:rgba(185,28,28,0.13);
  --ok-bg:rgba(20,117,58,0.13);
  --ok-ink:#14753a;
  --wait-bg:rgba(143,85,0,0.13);
  --wait-ink:#8f5500;
  --run-bg:rgba(3,105,161,0.13);
  --run-ink:#0369a1;
  --meter-fill:linear-gradient(90deg,#0369a1,#0a6fa8,#0c7f7a);
  --meter-track:rgba(67,56,202,.10);
  --count-bg:#8f5500;
  --count-ink:#ffffff;
  --me:linear-gradient(135deg,#0a6fa8,#0c7f7a);
  --me-ink:#ffffff;
  --ceo:#ffffff;
  --ceo-edge:rgba(3,105,161,0.35);
  --filter-on-bg:#0a2730;
  --filter-on-ink:#e6f4f7;
  --shadow:0 18px 40px rgba(49,46,129,.12);
  --shadow-lg:0 24px 60px rgba(49,46,129,.20);
  --focus:#0369a1;
  --input-bg:#ffffff;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#0a2730;
}
[data-theme="cobenian"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --head-weight:750;
  --h1-size:30px;
  --head-track:-.025em;
  --r:12px;
  --bg:#08303e;
  --backdrop:radial-gradient(1200px 700px at 85% -10%, rgba(6,182,212,0.33), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(14,165,233,0.26), transparent 60%), radial-gradient(900px 700px at 60% 120%, rgba(251,146,60,0.3), transparent 60%), #08303e;
  --blur:blur(18px);
  --surface:rgba(255,255,255,0.07);
  --surface-2:rgba(255,255,255,0.1);
  --sunk:rgba(255,255,255,0.1);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --rail:rgba(8,48,62,0.55);
  --rail-ink:#ecfbfe;
  --rail-muted:#a9dbe6;
  --rail-line:rgba(255,255,255,.10);
  --rail-on:rgba(255,255,255,0.09);
  --rail-accent:#bdf3fb;
  --rail-dot:#a7f3d0;
  --wordmark:#ecfbfe;
  --ink:#ecfbfe;
  --ink-2:#d3edf3;
  --muted:#a9dbe6;
  --pri:#22d3ee;
  --pri2:#67e8f9;
  --pri-fill:linear-gradient(135deg,#22d3ee,#67e8f9);
  --on-pri:#05303b;
  --pri-text:#bdf3fb;
  --pri-soft:rgba(34,211,238,0.22);
  --pri-line:rgba(189,243,251,0.5);
  --acc:#67e8f9;
  --acc-text:#bdf3fb;
  --acc-soft:rgba(103,232,249,0.18);
  --good:#a7f3d0;
  --good-soft:rgba(167,243,208,0.18);
  --warn:#ffe0a3;
  --warn-soft:rgba(255,224,163,0.18);
  --gold:#ffe0a3;
  --gold-soft:rgba(255,224,163,0.22);
  --gold-line:rgba(255,224,163,0.45);
  --danger:#ffc9cf;
  --danger-soft:rgba(255,201,207,0.18);
  --ok-bg:rgba(167,243,208,0.18);
  --ok-ink:#a7f3d0;
  --wait-bg:rgba(255,224,163,0.18);
  --wait-ink:#ffe0a3;
  --run-bg:rgba(103,232,249,0.18);
  --run-ink:#bdf3fb;
  --meter-fill:linear-gradient(90deg,#67e8f9,#22d3ee,#67e8f9);
  --meter-track:rgba(255,255,255,.10);
  --count-bg:#ffe0a3;
  --count-ink:#1a1200;
  --me:linear-gradient(135deg,#22d3ee,#67e8f9);
  --me-ink:#05303b;
  --ceo:rgba(255,255,255,.07);
  --ceo-edge:rgba(103,232,249,0.35);
  --filter-on-bg:#ecfbfe;
  --filter-on-ink:#08303e;
  --shadow:0 20px 50px rgba(0,0,0,.40);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#bdf3fb;
  --input-bg:rgba(255,255,255,.06);
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#ecfbfe;
}
/* THEMES:END */
/* The six themes added 2026-11-03 (Bryan's pick from docs/mockups/themes6.html): Slate &
   Coral, Field, Ledger, Onyx, Claret, Dusk. Hand-tuned there and contrast-checked by
   docs/themes/themes6/gen.py (same rules as build.py), so they live outside the generated
   blocks above. --font-mark is the wordmark's face. */
[data-theme="slate"][data-mode="light"] {
  color-scheme:light;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-mark:Orbitron,sans-serif;
  --head-weight:650;
  --h1-size:26px;
  --head-track:-.02em;
  --r:10px;
  --bg:#eef2f6;
  --backdrop:radial-gradient(900px 480px at 100% -10%, rgba(232,105,74,0.1), transparent 62%), radial-gradient(800px 480px at -5% 110%, rgba(8,145,178,0.08), transparent 62%), #eef2f6;
  --blur:none;
  --surface:#ffffff;
  --surface-2:#f4f7fa;
  --sunk:#f4f7fa;
  --line:#e2e8f0;
  --line-2:#cbd5e1;
  --rail:#ffffff;
  --rail-ink:#0f172a;
  --rail-muted:#56657a;
  --rail-line:#e2e8f0;
  --rail-on:#f1f5f9;
  --rail-accent:#e4613f;
  --rail-dot:#146c37;
  --wordmark:#0f172a;
  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#56657a;
  --pri:#e4613f;
  --pri2:#f2864f;
  --pri-fill:linear-gradient(135deg,#e4613f,#f2864f);
  --on-pri:#1a0a04;
  --pri-text:#b0410e;
  --pri-soft:rgba(228,97,63,0.17);
  --pri-line:rgba(176,65,14,0.42);
  --acc:#0891b2;
  --acc-text:#0b6a82;
  --acc-soft:rgba(8,145,178,0.13);
  --good:#146c37;
  --good-soft:rgba(20,108,55,0.13);
  --warn:#8a5000;
  --warn-soft:rgba(138,80,0,0.13);
  --gold:#8a5000;
  --gold-soft:rgba(138,80,0,0.17);
  --gold-line:rgba(138,80,0,0.45);
  --danger:#a8123f;
  --danger-soft:rgba(168,18,63,0.13);
  --ok-bg:rgba(20,108,55,0.13);
  --ok-ink:#146c37;
  --wait-bg:rgba(138,80,0,0.13);
  --wait-ink:#8a5000;
  --run-bg:rgba(8,145,178,0.13);
  --run-ink:#0b6a82;
  --meter-fill:linear-gradient(90deg,#0891b2,#e4613f);
  --meter-track:#e2e8f0;
  --count-bg:#8a5000;
  --count-ink:#ffffff;
  --me:#0f172a;
  --me-ink:#f1f5f9;
  --ceo:#f1f5f9;
  --ceo-edge:rgba(8,145,178,0.35);
  --filter-on-bg:#0f172a;
  --filter-on-ink:#eef2f6;
  --shadow:0 1px 2px rgba(15,23,42,0.05), 0 8px 22px rgba(15,23,42,0.06);
  --shadow-lg:0 24px 60px rgba(15,23,42,0.16);
  --focus:#0b6a82;
  --input-bg:#f4f7fa;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#0f172a;
}
[data-theme="slate"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:Inter,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-mark:Orbitron,sans-serif;
  --head-weight:650;
  --h1-size:26px;
  --head-track:-.02em;
  --r:10px;
  --bg:#050a14;
  --backdrop:radial-gradient(900px 480px at 100% -10%, rgba(232,105,74,0.16), transparent 62%), radial-gradient(800px 480px at -5% 110%, rgba(125,212,232,0.09), transparent 62%), #050a14;
  --blur:none;
  --surface:#0d1626;
  --surface-2:#132036;
  --sunk:#132036;
  --line:#1c2a40;
  --line-2:#2c3d58;
  --rail:#070e1b;
  --rail-ink:#eef3fa;
  --rail-muted:#91a2ba;
  --rail-line:#1c2a40;
  --rail-on:#132036;
  --rail-accent:#ff9b72;
  --rail-dot:#4ade80;
  --wordmark:#eef3fa;
  --ink:#eef3fa;
  --ink-2:#c3cfe0;
  --muted:#91a2ba;
  --pri:#e8694a;
  --pri2:#f59a6a;
  --pri-fill:linear-gradient(135deg,#e8694a,#f59a6a);
  --on-pri:#160803;
  --pri-text:#ff9b72;
  --pri-soft:rgba(232,105,74,0.22);
  --pri-line:rgba(255,155,114,0.45);
  --acc:#7dd4e8;
  --acc-text:#7dd4e8;
  --acc-soft:rgba(125,212,232,0.18);
  --good:#4ade80;
  --good-soft:rgba(74,222,128,0.18);
  --warn:#fbbf24;
  --warn-soft:rgba(251,191,36,0.18);
  --gold:#fbbf24;
  --gold-soft:rgba(251,191,36,0.22);
  --gold-line:rgba(251,191,36,0.45);
  --danger:#ff8fb3;
  --danger-soft:rgba(255,143,179,0.18);
  --ok-bg:rgba(74,222,128,0.18);
  --ok-ink:#4ade80;
  --wait-bg:rgba(251,191,36,0.18);
  --wait-ink:#fbbf24;
  --run-bg:rgba(125,212,232,0.18);
  --run-ink:#7dd4e8;
  --meter-fill:linear-gradient(90deg,#7dd4e8,#e8694a);
  --meter-track:#1c2a40;
  --count-bg:#fbbf24;
  --count-ink:#1a1200;
  --me:#123a4c;
  --me-ink:#e6f9fd;
  --ceo:#132036;
  --ceo-edge:rgba(125,212,232,0.35);
  --filter-on-bg:#eef3fa;
  --filter-on-ink:#050a14;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 28px rgba(0,0,0,.34);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#7dd4e8;
  --input-bg:#132036;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#eef3fa;
}
[data-theme="field"][data-mode="light"] {
  color-scheme:light;
  --font-ui:"DM Sans",system-ui,sans-serif;
  --font-head:Fraunces,Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-mark:Fraunces,Georgia,serif;
  --head-weight:600;
  --h1-size:26px;
  --head-track:-.01em;
  --r:12px;
  --bg:#ecefe4;
  --backdrop:radial-gradient(900px 480px at 100% -10%, rgba(176,80,44,0.1), transparent 62%), radial-gradient(800px 480px at -5% 110%, rgba(93,122,60,0.13), transparent 62%), #ecefe4;
  --blur:none;
  --surface:#fbfbf5;
  --surface-2:#f1f3e8;
  --sunk:#f1f3e8;
  --line:#dde1d0;
  --line-2:#c3c9b2;
  --rail:#dfe4d2;
  --rail-ink:#222b1c;
  --rail-muted:#4b5641;
  --rail-line:#cdd4bd;
  --rail-on:#d2d9c2;
  --rail-accent:#b0502c;
  --rail-dot:#2f6a3f;
  --wordmark:#222b1c;
  --ink:#1e2619;
  --ink-2:#3d4836;
  --muted:#56604d;
  --pri:#b0502c;
  --pri2:#b0502c;
  --pri-fill:#b0502c;
  --on-pri:#ffffff;
  --pri-text:#9a4322;
  --pri-soft:rgba(176,80,44,0.17);
  --pri-line:rgba(154,67,34,0.42);
  --acc:#4f6f3a;
  --acc-text:#44602f;
  --acc-soft:rgba(79,111,58,0.13);
  --good:#2f6a3f;
  --good-soft:rgba(47,106,63,0.13);
  --warn:#7f5100;
  --warn-soft:rgba(127,81,0,0.13);
  --gold:#7f5100;
  --gold-soft:rgba(127,81,0,0.17);
  --gold-line:rgba(127,81,0,0.45);
  --danger:#a3123a;
  --danger-soft:rgba(163,18,58,0.13);
  --ok-bg:rgba(47,106,63,0.13);
  --ok-ink:#2f6a3f;
  --wait-bg:rgba(127,81,0,0.13);
  --wait-ink:#7f5100;
  --run-bg:rgba(79,111,58,0.13);
  --run-ink:#44602f;
  --meter-fill:linear-gradient(90deg,#4f6f3a,#b0502c);
  --meter-track:#dde1d0;
  --count-bg:#7f5100;
  --count-ink:#ffffff;
  --me:#46553a;
  --me-ink:#f5f6ec;
  --ceo:#f1f3e8;
  --ceo-edge:rgba(79,111,58,0.35);
  --filter-on-bg:#1e2619;
  --filter-on-ink:#ecefe4;
  --shadow:0 1px 2px rgba(30,38,25,0.05), 0 8px 22px rgba(30,38,25,0.06);
  --shadow-lg:0 24px 60px rgba(30,38,25,0.16);
  --focus:#44602f;
  --input-bg:#f1f3e8;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#1e2619;
}
[data-theme="field"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:"DM Sans",system-ui,sans-serif;
  --font-head:Fraunces,Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-mark:Fraunces,Georgia,serif;
  --head-weight:600;
  --h1-size:26px;
  --head-track:-.01em;
  --r:12px;
  --bg:#1b1814;
  --backdrop:radial-gradient(900px 480px at 100% -10%, rgba(227,130,91,0.13), transparent 62%), radial-gradient(800px 480px at -5% 110%, rgba(150,180,100,0.09), transparent 62%), #1b1814;
  --blur:none;
  --surface:#24201a;
  --surface-2:#2c2720;
  --sunk:#2c2720;
  --line:#38312a;
  --line-2:#4f473c;
  --rail:#14120e;
  --rail-ink:#f1ede3;
  --rail-muted:#ada493;
  --rail-line:#2a251e;
  --rail-on:#25211a;
  --rail-accent:#f0a07f;
  --rail-dot:#8fd3a4;
  --wordmark:#f1ede3;
  --ink:#f1ede3;
  --ink-2:#d2cbbd;
  --muted:#ada493;
  --pri:#e3825b;
  --pri2:#e3825b;
  --pri-fill:#e3825b;
  --on-pri:#1d0c04;
  --pri-text:#f0a07f;
  --pri-soft:rgba(227,130,91,0.22);
  --pri-line:rgba(240,160,127,0.45);
  --acc:#a9c78a;
  --acc-text:#b9d39d;
  --acc-soft:rgba(169,199,138,0.18);
  --good:#8fd3a4;
  --good-soft:rgba(143,211,164,0.18);
  --warn:#e6c15a;
  --warn-soft:rgba(230,193,90,0.18);
  --gold:#e6c15a;
  --gold-soft:rgba(230,193,90,0.22);
  --gold-line:rgba(230,193,90,0.45);
  --danger:#ff9db8;
  --danger-soft:rgba(255,157,184,0.18);
  --ok-bg:rgba(143,211,164,0.18);
  --ok-ink:#8fd3a4;
  --wait-bg:rgba(230,193,90,0.18);
  --wait-ink:#e6c15a;
  --run-bg:rgba(169,199,138,0.18);
  --run-ink:#b9d39d;
  --meter-fill:linear-gradient(90deg,#a9c78a,#e3825b);
  --meter-track:#38312a;
  --count-bg:#e6c15a;
  --count-ink:#1a1200;
  --me:#3f4f30;
  --me-ink:#f1f4e6;
  --ceo:#2c2720;
  --ceo-edge:rgba(169,199,138,0.35);
  --filter-on-bg:#f1ede3;
  --filter-on-ink:#1b1814;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 28px rgba(0,0,0,.34);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#b9d39d;
  --input-bg:#2c2720;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#f1ede3;
}
[data-theme="ledger"][data-mode="light"] {
  color-scheme:light;
  --font-ui:"IBM Plex Sans",system-ui,sans-serif;
  --font-head:Newsreader,Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-mark:Newsreader,Georgia,serif;
  --head-weight:600;
  --h1-size:26px;
  --head-track:-.005em;
  --r:6px;
  --bg:#f3eee2;
  --backdrop:radial-gradient(900px 480px at 100% -10%, rgba(29,52,97,0.05), transparent 62%), radial-gradient(800px 480px at -5% 110%, rgba(47,107,79,0.05), transparent 62%), #f3eee2;
  --blur:none;
  --surface:#fffcf5;
  --surface-2:#f8f3e7;
  --sunk:#f8f3e7;
  --line:#e6dccb;
  --line-2:#d0c2a9;
  --rail:#13233d;
  --rail-ink:#f3ede0;
  --rail-muted:#a9b5c9;
  --rail-line:#22355a;
  --rail-on:#1d3152;
  --rail-accent:#e9c46a;
  --rail-dot:#2a6b3c;
  --wordmark:#f3ede0;
  --ink:#1a1f2e;
  --ink-2:#3a4050;
  --muted:#655e50;
  --pri:#1d3461;
  --pri2:#1d3461;
  --pri-fill:#1d3461;
  --on-pri:#fffcf5;
  --pri-text:#1d3461;
  --pri-soft:rgba(29,52,97,0.17);
  --pri-line:rgba(29,52,97,0.42);
  --acc:#2f6b4f;
  --acc-text:#2a5f46;
  --acc-soft:rgba(47,107,79,0.13);
  --good:#2a6b3c;
  --good-soft:rgba(42,107,60,0.13);
  --warn:#7f4f00;
  --warn-soft:rgba(127,79,0,0.13);
  --gold:#7f4f00;
  --gold-soft:rgba(127,79,0,0.17);
  --gold-line:rgba(127,79,0,0.45);
  --danger:#a3221b;
  --danger-soft:rgba(163,34,27,0.13);
  --ok-bg:rgba(42,107,60,0.13);
  --ok-ink:#2a6b3c;
  --wait-bg:rgba(127,79,0,0.13);
  --wait-ink:#7f4f00;
  --run-bg:rgba(47,107,79,0.13);
  --run-ink:#2a5f46;
  --meter-fill:linear-gradient(90deg,#2f6b4f,#1d3461);
  --meter-track:#e6dccb;
  --count-bg:#7f4f00;
  --count-ink:#ffffff;
  --me:#1d3461;
  --me-ink:#f7f1e3;
  --ceo:#f6efe0;
  --ceo-edge:rgba(47,107,79,0.35);
  --filter-on-bg:#1a1f2e;
  --filter-on-ink:#f3eee2;
  --shadow:0 1px 2px rgba(26,31,46,0.05), 0 8px 22px rgba(26,31,46,0.06);
  --shadow-lg:0 24px 60px rgba(26,31,46,0.16);
  --focus:#2a5f46;
  --input-bg:#f8f3e7;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#1a1f2e;
}
[data-theme="ledger"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:"IBM Plex Sans",system-ui,sans-serif;
  --font-head:Newsreader,Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-mark:Newsreader,Georgia,serif;
  --head-weight:600;
  --h1-size:26px;
  --head-track:-.005em;
  --r:6px;
  --bg:#0f141e;
  --backdrop:radial-gradient(900px 480px at 100% -10%, rgba(147,178,234,0.07), transparent 62%), radial-gradient(800px 480px at -5% 110%, rgba(124,195,160,0.05), transparent 62%), #0f141e;
  --blur:none;
  --surface:#161c28;
  --surface-2:#1c2331;
  --sunk:#1c2331;
  --line:#262f41;
  --line-2:#384359;
  --rail:#0a0e16;
  --rail-ink:#f1ead9;
  --rail-muted:#a39b88;
  --rail-line:#1e2635;
  --rail-on:#1c2331;
  --rail-accent:#a9c3f0;
  --rail-dot:#8fd3a4;
  --wordmark:#f1ead9;
  --ink:#f1ead9;
  --ink-2:#d4ccb8;
  --muted:#a39b88;
  --pri:#93b2ea;
  --pri2:#93b2ea;
  --pri-fill:#93b2ea;
  --on-pri:#0b1426;
  --pri-text:#a9c3f0;
  --pri-soft:rgba(147,178,234,0.22);
  --pri-line:rgba(169,195,240,0.45);
  --acc:#7cc3a0;
  --acc-text:#8fd0ae;
  --acc-soft:rgba(124,195,160,0.18);
  --good:#8fd3a4;
  --good-soft:rgba(143,211,164,0.18);
  --warn:#e9c46a;
  --warn-soft:rgba(233,196,106,0.18);
  --gold:#e9c46a;
  --gold-soft:rgba(233,196,106,0.22);
  --gold-line:rgba(233,196,106,0.45);
  --danger:#f28b82;
  --danger-soft:rgba(242,139,130,0.18);
  --ok-bg:rgba(143,211,164,0.18);
  --ok-ink:#8fd3a4;
  --wait-bg:rgba(233,196,106,0.18);
  --wait-ink:#e9c46a;
  --run-bg:rgba(124,195,160,0.18);
  --run-ink:#8fd0ae;
  --meter-fill:linear-gradient(90deg,#7cc3a0,#93b2ea);
  --meter-track:#262f41;
  --count-bg:#e9c46a;
  --count-ink:#1a1200;
  --me:#24385f;
  --me-ink:#eef2fb;
  --ceo:#1c2331;
  --ceo-edge:rgba(124,195,160,0.35);
  --filter-on-bg:#f1ead9;
  --filter-on-ink:#0f141e;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 28px rgba(0,0,0,.34);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#8fd0ae;
  --input-bg:#1c2331;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#f1ead9;
}
[data-theme="onyx"][data-mode="light"] {
  color-scheme:light;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:"Space Grotesk",Inter,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-mark:"Space Grotesk",Inter,sans-serif;
  --head-weight:700;
  --h1-size:26px;
  --head-track:-.03em;
  --r:4px;
  --bg:#ffffff;
  --backdrop:#ffffff;
  --blur:none;
  --surface:#ffffff;
  --surface-2:#f4f5f6;
  --sunk:#f4f5f6;
  --line:#e4e6e9;
  --line-2:#c4c8ce;
  --rail:#000000;
  --rail-ink:#ffffff;
  --rail-muted:#a8adb5;
  --rail-line:#26282c;
  --rail-on:#1a1b1e;
  --rail-accent:#2ee59d;
  --rail-dot:#3f6212;
  --wordmark:#ffffff;
  --ink:#000000;
  --ink-2:#24272c;
  --muted:#555a62;
  --pri:#037549;
  --pri2:#037549;
  --pri-fill:#037549;
  --on-pri:#ffffff;
  --pri-text:#036a43;
  --pri-soft:rgba(3,117,73,0.17);
  --pri-line:rgba(3,106,67,0.42);
  --acc:#5b3fd6;
  --acc-text:#5136c9;
  --acc-soft:rgba(91,63,214,0.13);
  --good:#3f6212;
  --good-soft:rgba(63,98,18,0.13);
  --warn:#875200;
  --warn-soft:rgba(135,82,0,0.13);
  --gold:#875200;
  --gold-soft:rgba(135,82,0,0.17);
  --gold-line:rgba(135,82,0,0.45);
  --danger:#c01c28;
  --danger-soft:rgba(192,28,40,0.13);
  --ok-bg:rgba(63,98,18,0.13);
  --ok-ink:#3f6212;
  --wait-bg:rgba(135,82,0,0.13);
  --wait-ink:#875200;
  --run-bg:rgba(91,63,214,0.13);
  --run-ink:#5136c9;
  --meter-fill:linear-gradient(90deg,#5b3fd6,#037549);
  --meter-track:#e4e6e9;
  --count-bg:#875200;
  --count-ink:#ffffff;
  --me:#000000;
  --me-ink:#ffffff;
  --ceo:#f4f5f6;
  --ceo-edge:rgba(91,63,214,0.35);
  --filter-on-bg:#000000;
  --filter-on-ink:#ffffff;
  --shadow:none;
  --shadow-lg:0 24px 60px rgba(0,0,0,0.16);
  --focus:#5136c9;
  --input-bg:#f4f5f6;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#000000;
}
[data-theme="onyx"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:"Space Grotesk",Inter,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-mark:"Space Grotesk",Inter,sans-serif;
  --head-weight:700;
  --h1-size:26px;
  --head-track:-.03em;
  --r:4px;
  --bg:#030304;
  --backdrop:#030304;
  --blur:none;
  --surface:#0d0e10;
  --surface-2:#151618;
  --sunk:#151618;
  --line:#222427;
  --line-2:#373a3f;
  --rail:#000000;
  --rail-ink:#ffffff;
  --rail-muted:#9a9ea6;
  --rail-line:#1c1d20;
  --rail-on:#151618;
  --rail-accent:#4cf0ad;
  --rail-dot:#a3e635;
  --wordmark:#ffffff;
  --ink:#ffffff;
  --ink-2:#dadce0;
  --muted:#9a9ea6;
  --pri:#2ee59d;
  --pri2:#2ee59d;
  --pri-fill:#2ee59d;
  --on-pri:#00160d;
  --pri-text:#4cf0ad;
  --pri-soft:rgba(46,229,157,0.22);
  --pri-line:rgba(76,240,173,0.45);
  --acc:#b9a6ff;
  --acc-text:#c4b5fd;
  --acc-soft:rgba(185,166,255,0.18);
  --good:#a3e635;
  --good-soft:rgba(163,230,53,0.18);
  --warn:#ffd23f;
  --warn-soft:rgba(255,210,63,0.18);
  --gold:#ffd23f;
  --gold-soft:rgba(255,210,63,0.22);
  --gold-line:rgba(255,210,63,0.45);
  --danger:#ff6b6b;
  --danger-soft:rgba(255,107,107,0.18);
  --ok-bg:rgba(163,230,53,0.18);
  --ok-ink:#a3e635;
  --wait-bg:rgba(255,210,63,0.18);
  --wait-ink:#ffd23f;
  --run-bg:rgba(185,166,255,0.18);
  --run-ink:#c4b5fd;
  --meter-fill:linear-gradient(90deg,#b9a6ff,#2ee59d);
  --meter-track:#222427;
  --count-bg:#ffd23f;
  --count-ink:#1a1200;
  --me:#2ee59d;
  --me-ink:#00160d;
  --ceo:#151618;
  --ceo-edge:rgba(185,166,255,0.35);
  --filter-on-bg:#ffffff;
  --filter-on-ink:#030304;
  --shadow:none;
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#c4b5fd;
  --input-bg:#151618;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#ffffff;
}
[data-theme="claret"][data-mode="light"] {
  color-scheme:light;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:"Playfair Display",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-mark:"Playfair Display",Georgia,serif;
  --head-weight:700;
  --h1-size:26px;
  --head-track:-.01em;
  --r:10px;
  --bg:#f5efea;
  --backdrop:radial-gradient(900px 480px at 100% -10%, rgba(140,29,52,0.08), transparent 62%), radial-gradient(800px 480px at -5% 110%, rgba(192,138,62,0.07), transparent 62%), #f5efea;
  --blur:none;
  --surface:#fffaf7;
  --surface-2:#f8efe9;
  --sunk:#f8efe9;
  --line:#ead9d0;
  --line-2:#d6bdb1;
  --rail:#4a1420;
  --rail-ink:#fbeee8;
  --rail-muted:#dcbab5;
  --rail-line:#5e1d2b;
  --rail-on:#5e1d2b;
  --rail-accent:#f2c9a0;
  --rail-dot:#2a6b3c;
  --wordmark:#fbeee8;
  --ink:#2a1418;
  --ink-2:#4c2e33;
  --muted:#6f5659;
  --pri:#8c1d34;
  --pri2:#a3283f;
  --pri-fill:linear-gradient(135deg,#8c1d34,#a3283f);
  --on-pri:#ffffff;
  --pri-text:#861a31;
  --pri-soft:rgba(140,29,52,0.17);
  --pri-line:rgba(134,26,49,0.42);
  --acc:#1f5f6b;
  --acc-text:#1d5965;
  --acc-soft:rgba(31,95,107,0.13);
  --good:#2a6b3c;
  --good-soft:rgba(42,107,60,0.13);
  --warn:#7c4e00;
  --warn-soft:rgba(124,78,0,0.13);
  --gold:#7c4e00;
  --gold-soft:rgba(124,78,0,0.17);
  --gold-line:rgba(124,78,0,0.45);
  --danger:#c01a1a;
  --danger-soft:rgba(192,26,26,0.13);
  --ok-bg:rgba(42,107,60,0.13);
  --ok-ink:#2a6b3c;
  --wait-bg:rgba(124,78,0,0.13);
  --wait-ink:#7c4e00;
  --run-bg:rgba(31,95,107,0.13);
  --run-ink:#1d5965;
  --meter-fill:linear-gradient(90deg,#1f5f6b,#8c1d34);
  --meter-track:#ead9d0;
  --count-bg:#7c4e00;
  --count-ink:#ffffff;
  --me:#8c1d34;
  --me-ink:#fff5f6;
  --ceo:#f6ebe5;
  --ceo-edge:rgba(31,95,107,0.35);
  --filter-on-bg:#2a1418;
  --filter-on-ink:#f5efea;
  --shadow:0 1px 2px rgba(42,20,24,0.05), 0 8px 22px rgba(42,20,24,0.06);
  --shadow-lg:0 24px 60px rgba(42,20,24,0.16);
  --focus:#1d5965;
  --input-bg:#f8efe9;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#2a1418;
}
[data-theme="claret"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:Inter,system-ui,sans-serif;
  --font-head:"Playfair Display",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-mark:"Playfair Display",Georgia,serif;
  --head-weight:700;
  --h1-size:26px;
  --head-track:-.01em;
  --r:10px;
  --bg:#150a0d;
  --backdrop:radial-gradient(900px 480px at 100% -10%, rgba(196,58,85,0.16), transparent 62%), radial-gradient(800px 480px at -5% 110%, rgba(232,192,106,0.06), transparent 62%), #150a0d;
  --blur:none;
  --surface:#1f1115;
  --surface-2:#29171c;
  --sunk:#29171c;
  --line:#3a232a;
  --line-2:#54353d;
  --rail:#0e0608;
  --rail-ink:#fbefe9;
  --rail-muted:#b59b9c;
  --rail-line:#2a161b;
  --rail-on:#29171c;
  --rail-accent:#ff8ea2;
  --rail-dot:#8fd3a4;
  --wordmark:#fbefe9;
  --ink:#fbefe9;
  --ink-2:#e3cbc5;
  --muted:#b59b9c;
  --pri:#c43a55;
  --pri2:#a92f49;
  --pri-fill:linear-gradient(135deg,#c43a55,#a92f49);
  --on-pri:#ffffff;
  --pri-text:#ff8ea2;
  --pri-soft:rgba(196,58,85,0.22);
  --pri-line:rgba(255,142,162,0.45);
  --acc:#7fc8cf;
  --acc-text:#8fd3d9;
  --acc-soft:rgba(127,200,207,0.18);
  --good:#8fd3a4;
  --good-soft:rgba(143,211,164,0.18);
  --warn:#e8c06a;
  --warn-soft:rgba(232,192,106,0.18);
  --gold:#e8c06a;
  --gold-soft:rgba(232,192,106,0.22);
  --gold-line:rgba(232,192,106,0.45);
  --danger:#ff9270;
  --danger-soft:rgba(255,146,112,0.18);
  --ok-bg:rgba(143,211,164,0.18);
  --ok-ink:#8fd3a4;
  --wait-bg:rgba(232,192,106,0.18);
  --wait-ink:#e8c06a;
  --run-bg:rgba(127,200,207,0.18);
  --run-ink:#8fd3d9;
  --meter-fill:linear-gradient(90deg,#7fc8cf,#c43a55);
  --meter-track:#3a232a;
  --count-bg:#e8c06a;
  --count-ink:#1a1200;
  --me:#6b1a2c;
  --me-ink:#fdecef;
  --ceo:#29171c;
  --ceo-edge:rgba(127,200,207,0.35);
  --filter-on-bg:#fbefe9;
  --filter-on-ink:#150a0d;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 28px rgba(0,0,0,.34);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#8fd3d9;
  --input-bg:#29171c;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#fbefe9;
}
[data-theme="dusk"][data-mode="light"] {
  color-scheme:light;
  --font-ui:Outfit,system-ui,sans-serif;
  --font-head:Sora,Outfit,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-mark:Sora,Outfit,sans-serif;
  --head-weight:600;
  --h1-size:26px;
  --head-track:-.02em;
  --r:16px;
  --bg:#eeebf1;
  --backdrop:radial-gradient(900px 480px at 100% -10%, rgba(155,127,208,0.14), transparent 62%), radial-gradient(800px 480px at -5% 110%, rgba(111,176,166,0.1), transparent 62%), #eeebf1;
  --blur:none;
  --surface:#f8f6f9;
  --surface-2:#f1eef4;
  --sunk:#f1eef4;
  --line:#e0dbe5;
  --line-2:#cac3d2;
  --rail:#e6e2eb;
  --rail-ink:#2e2838;
  --rail-muted:#5f576b;
  --rail-line:#d8d2df;
  --rail-on:#dad4e1;
  --rail-accent:#7556a3;
  --rail-dot:#3b6a44;
  --wordmark:#2e2838;
  --ink:#2e2838;
  --ink-2:#4b4458;
  --muted:#655d71;
  --pri:#7556a3;
  --pri2:#8f62a6;
  --pri-fill:linear-gradient(135deg,#7556a3,#8f62a6);
  --on-pri:#ffffff;
  --pri-text:#654a91;
  --pri-soft:rgba(117,86,163,0.17);
  --pri-line:rgba(101,74,145,0.42);
  --acc:#3f7a73;
  --acc-text:#356a63;
  --acc-soft:rgba(63,122,115,0.13);
  --good:#3b6a44;
  --good-soft:rgba(59,106,68,0.13);
  --warn:#7a4f10;
  --warn-soft:rgba(122,79,16,0.13);
  --gold:#7a4f10;
  --gold-soft:rgba(122,79,16,0.17);
  --gold-line:rgba(122,79,16,0.45);
  --danger:#a8344f;
  --danger-soft:rgba(168,52,79,0.13);
  --ok-bg:rgba(59,106,68,0.13);
  --ok-ink:#3b6a44;
  --wait-bg:rgba(122,79,16,0.13);
  --wait-ink:#7a4f10;
  --run-bg:rgba(63,122,115,0.13);
  --run-ink:#356a63;
  --meter-fill:linear-gradient(90deg,#3f7a73,#7556a3);
  --meter-track:#e0dbe5;
  --count-bg:#7a4f10;
  --count-ink:#ffffff;
  --me:#7556a3;
  --me-ink:#ffffff;
  --ceo:#efebf3;
  --ceo-edge:rgba(63,122,115,0.35);
  --filter-on-bg:#2e2838;
  --filter-on-ink:#eeebf1;
  --shadow:0 1px 2px rgba(46,40,56,0.05), 0 8px 22px rgba(46,40,56,0.06);
  --shadow-lg:0 24px 60px rgba(46,40,56,0.16);
  --focus:#356a63;
  --input-bg:#f1eef4;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#2e2838;
}
[data-theme="dusk"][data-mode="dark"] {
  color-scheme:dark;
  --font-ui:Outfit,system-ui,sans-serif;
  --font-head:Sora,Outfit,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-mark:Sora,Outfit,sans-serif;
  --head-weight:600;
  --h1-size:26px;
  --head-track:-.02em;
  --r:16px;
  --bg:#1d1b22;
  --backdrop:radial-gradient(900px 480px at 100% -10%, rgba(185,162,224,0.1), transparent 62%), radial-gradient(800px 480px at -5% 110%, rgba(143,196,187,0.06), transparent 62%), #1d1b22;
  --blur:none;
  --surface:#25222b;
  --surface-2:#2c2933;
  --sunk:#2c2933;
  --line:#36323e;
  --line-2:#4a4555;
  --rail:#19171d;
  --rail-ink:#e6e1ec;
  --rail-muted:#a39bae;
  --rail-line:#2c2933;
  --rail-on:#2c2933;
  --rail-accent:#c7b4ea;
  --rail-dot:#9fd3a8;
  --wordmark:#e6e1ec;
  --ink:#e6e1ec;
  --ink-2:#c8c1d2;
  --muted:#a39bae;
  --pri:#b9a2e0;
  --pri2:#cfa7d8;
  --pri-fill:linear-gradient(135deg,#b9a2e0,#cfa7d8);
  --on-pri:#1e1729;
  --pri-text:#c7b4ea;
  --pri-soft:rgba(185,162,224,0.22);
  --pri-line:rgba(199,180,234,0.45);
  --acc:#8fc4bb;
  --acc-text:#9dcdc5;
  --acc-soft:rgba(143,196,187,0.18);
  --good:#9fd3a8;
  --good-soft:rgba(159,211,168,0.18);
  --warn:#e6c27a;
  --warn-soft:rgba(230,194,122,0.18);
  --gold:#e6c27a;
  --gold-soft:rgba(230,194,122,0.22);
  --gold-line:rgba(230,194,122,0.45);
  --danger:#f09aab;
  --danger-soft:rgba(240,154,171,0.18);
  --ok-bg:rgba(159,211,168,0.18);
  --ok-ink:#9fd3a8;
  --wait-bg:rgba(230,194,122,0.18);
  --wait-ink:#e6c27a;
  --run-bg:rgba(143,196,187,0.18);
  --run-ink:#9dcdc5;
  --meter-fill:linear-gradient(90deg,#8fc4bb,#b9a2e0);
  --meter-track:#36323e;
  --count-bg:#e6c27a;
  --count-ink:#1a1200;
  --me:#4a3d63;
  --me-ink:#efe9f7;
  --ceo:#2c2933;
  --ceo-edge:rgba(143,196,187,0.35);
  --filter-on-bg:#e6e1ec;
  --filter-on-ink:#1d1b22;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 28px rgba(0,0,0,.34);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --focus:#9dcdc5;
  --input-bg:#2c2933;
  --highlight:rgba(255,255,255,.18);
  --card-edge:transparent;
  --title-fill:#e6e1ec;
}
:root {
  --r-card:calc(var(--r) + 4px);
  --panel:var(--surface); --accent:var(--pri-text); --soft:var(--surface-2);
  --goodsoft:var(--good-soft); --warnsoft:var(--warn-soft); --bad:var(--danger); --badsoft:var(--danger-soft);
  --c0:var(--pri); --c1:var(--acc); --c2:var(--good);
}

* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--backdrop); background-attachment:fixed; color:var(--ink); font:15px/1.55 var(--font-ui); -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01"; }
::selection { background:var(--pri-soft); }
a { color:var(--acc-text); }
p { margin:6px 0; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.muted { color:var(--muted); font-size:13px; }
.error { color:var(--danger); }

/* ---- shell: a slim icon rail on wide screens; a top bar and bottom tabs on phones ------ */
.shell { display:grid; grid-template-columns:76px minmax(0,1fr); min-height:100vh; }
.rail { position:sticky; top:0; height:100vh; z-index:20; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 0 14px; background:var(--rail); color:var(--rail-ink); border-right:1px solid var(--rail-line); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); }
.mark { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--wordmark); }
.rail .mark { margin-bottom:14px; }
.mark .logo { width:40px; height:40px; flex:none; display:block; filter:drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.mark .name { font:700 16px var(--font-mark, var(--font-ui)); letter-spacing:-.02em; line-height:1.1; }
.mark .sub { font:500 12px var(--font-ui); color:var(--rail-muted);  }
.rail .marktext { display:none; }
.navlist { display:flex; flex-direction:column; gap:6px; align-items:center; }
.navlist a { position:relative; width:46px; height:46px; display:grid; place-items:center; border-radius:14px; color:var(--rail-muted); text-decoration:none; transition:background .15s, color .15s; }
.navlist a svg { width:21px; height:21px; }
.navlist a:hover { color:var(--rail-ink); background:var(--rail-on); }
.navlist a.on { color:var(--rail-ink); background:var(--rail-on); box-shadow:inset 0 0 0 1px var(--line-2); }
.navlist a.on::before { content:""; position:absolute; left:-15px; top:12px; bottom:12px; width:3px; border-radius:3px; background:var(--pri-fill); }
/* On the rail, a screen's name appears beside it on hover. */
.rail .label { position:absolute; left:58px; top:50%; transform:translateY(-50%); white-space:nowrap; padding:6px 10px; border-radius:9px; font:600 13px var(--font-ui); color:var(--ink); background:var(--sunk); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .12s; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); }
.rail a:hover .label, .rail a:focus-visible .label { opacity:1; }
.count { font:700 12px var(--font-ui); background:var(--count-bg); color:var(--count-ink); border-radius:9px; min-width:17px; height:17px; padding:0 4px; display:inline-grid; place-items:center; }
.navlist .count { position:absolute; top:4px; right:3px; }
.rail .sp { flex:1; }
.spendring { position:relative; text-decoration:none; color:var(--rail-ink); margin-bottom:6px; }
/* The ring's centre is the page colour, so its figure is in page ink: themes with a dark
   rail in light mode (Claret, Ledger, Onyx) drew it light on light. */
.spendring .ring > span { color:var(--ink); }
.ring { --p:0; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(from -90deg, var(--acc), var(--pri) calc(var(--p) * 1%), var(--meter-track) 0); }
.ring > span { width:36px; height:36px; border-radius:50%; background:var(--bg); display:grid; place-items:center; font:700 12px var(--font-ui); font-variant-numeric:tabular-nums; }

.account summary { list-style:none; cursor:pointer; position:relative; display:block; }
.account summary::-webkit-details-marker { display:none; }
.avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font:700 15px var(--font-ui); color:var(--on-pri); background:var(--pri-fill); box-shadow:0 6px 18px var(--pri-soft); }
.statusdot { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; background:var(--good); border:2px solid var(--bg); }
.statusdot.paused { background:var(--danger); }
.account .panel { position:fixed; left:88px; bottom:14px; width:340px; max-height:calc(100vh - 28px); overflow-y:auto; overscroll-behavior:contain; z-index:40; padding:14px; border-radius:var(--r-card); background:var(--sunk); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:10px; color:var(--ink); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); }
[data-mode="dark"] .account .panel { background:color-mix(in srgb, var(--bg) 92%, white 8%); }
[data-mode="light"] .account .panel { background:#ffffff; }
.account .who { font-weight:600; font-size:13px; }
.account .k { font:500 12px var(--font-ui); color:var(--muted); }
.meter { padding:12px; border:1px solid var(--line); border-radius:var(--r); display:block; }
.meter .v { font:700 20px var(--font-ui); font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin:2px 0 8px; }
.meter .v small { font-size:12px; color:var(--muted); font-weight:500; }
.meter .bar { height:6px; border-radius:999px; background:var(--meter-track); overflow:hidden; }
.meter .bar i { display:block; height:100%; background:var(--meter-fill); }
.meter .sub { font-size:12px; color:var(--muted); margin-top:6px; line-height:1.3; }
.live { display:flex; align-items:center; gap:8px; font:600 13px var(--font-ui); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--good); animation:pulse 2.4s infinite; }
.live.paused .dot { background:var(--danger); animation:none; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 var(--good-soft); } 70% { box-shadow:0 0 0 8px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
.ghost { font:600 13px var(--font-ui); padding:8px 11px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer; text-align:left; text-decoration:none; display:block; }
.ghost:hover { background:var(--rail-on); }
.account .modes { display:flex; gap:4px; }
.account .modes button, .account .themes button { font:600 12px var(--font-ui); padding:7px 9px; border-radius:9px; border:1px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer; }
.account .modes button { flex:1; }
.account .themes { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.account .themes button { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.account button.on { border-color:var(--pri-text); box-shadow:inset 0 0 0 1px var(--pri-text); }
.sw { display:inline-flex; border-radius:5px; overflow:hidden; border:1px solid var(--line-2); flex:none; }
.sw i { width:14px; height:14px; display:block; }

.topbar, .tabbar, .scrim { display:none; }
.main { min-width:0; }
.content { padding:26px 32px 56px; max-width:1440px; margin:0 auto; }

@media (max-width:860px) {
  .shell { display:block; }
  .rail { display:none; position:fixed; inset:0 auto 0 0; width:min(300px,86vw); z-index:30; height:100%; align-items:stretch; padding:18px 14px; background:var(--bg); box-shadow:0 10px 40px rgba(0,0,0,.35); }
  .shell.menu-open .rail { display:flex; }
  /* The menu scrolls: with the account panel open (theme picker included) it's taller than
     a phone. */
  .rail { height:100dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .rail > * { flex:none; }
  .rail .marktext { display:inline; }
  .navlist { align-items:stretch; }
  .navlist a { width:auto; height:auto; display:flex; gap:12px; padding:10px 12px; justify-content:flex-start; }
  .navlist a.on::before { left:-14px; }
  .rail .label { position:static; transform:none; opacity:1; padding:0; border:0; background:none; box-shadow:none; font:500 15px var(--font-ui); color:inherit; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .navlist .count { position:static; margin-left:auto; }
  .spendring { display:flex; align-items:center; gap:12px; padding:0 6px; }
  .account .panel { position:static; width:auto; max-height:none; overflow:visible; margin-top:10px; box-shadow:none; }
  .account summary { padding:0 6px; }
  .scrim { display:none; }
  .shell.menu-open .scrim { display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:20; }
  .topbar { display:flex; align-items:center; gap:10px; padding:10px 16px; background:color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:var(--ink); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
  .topbar .mark .logo { width:32px; height:32px; }
  .topbar .sp { flex:1; }
  .topbar .spend { font:600 13px var(--font-ui); color:var(--muted); text-decoration:none; font-variant-numeric:tabular-nums; }
  .iconbtn { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; border:1px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer; position:relative; text-decoration:none; }
  .iconbtn svg { width:19px; height:19px; }
  .iconbtn .count { position:absolute; top:-6px; right:-6px; }
  .tabbar { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; background:color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line); z-index:10; padding-bottom:env(safe-area-inset-bottom); }
  .tabbar a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0 7px; font-size:12px; font-weight:600; color:var(--muted); text-decoration:none; position:relative; }
  .tabbar a svg { width:20px; height:20px; }
  .tabbar a.on { color:var(--pri-text); }
  .content { padding:16px 16px 92px; }
}

/* ---- page parts --------------------------------------------------------------------- */
.flash { margin:0 0 14px; padding:10px 14px; border-radius:var(--r); }
.flash.info { background:var(--good-soft); color:var(--good); }
.flash.error { background:var(--danger-soft); color:var(--danger); }
h1.page { color:var(--ink); font-family:var(--font-head); font-weight:var(--head-weight); letter-spacing:var(--head-track); font-size:var(--h1-size); line-height:1.15; margin:0 0 6px; }
.lead { color:var(--muted); margin:0 0 20px; max-width:72ch; font-size:15px; }
.eyebrow { font:500 12px var(--font-ui); color:var(--muted); margin-bottom:2px; }
.pagehead { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; margin-bottom:16px; }
.pagehead .sp { flex:1; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); }
.card h2 { margin:0 0 12px; font:var(--head-weight) 16px var(--font-head); letter-spacing:var(--head-track); color:var(--ink); display:flex; align-items:center; gap:8px; }
h2.section { font:var(--head-weight) 19px var(--font-head); letter-spacing:var(--head-track); margin:28px 0 8px; }
.grid2 { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:start; }
.grid-min { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; }
@media (max-width:1000px) { .grid2, .grid-min { grid-template-columns:minmax(0,1fr); } }

.pill { font:600 12px var(--font-ui); letter-spacing:.02em; padding:2px 9px; border-radius:999px; white-space:nowrap; box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent); }
.ok { background:var(--ok-bg); color:var(--ok-ink); } .risk { background:var(--wait-bg); color:var(--wait-ink); }
.off { background:var(--danger-soft); color:var(--danger); } .idle { background:var(--surface-2); color:var(--muted); }

.btn { font:600 13px var(--font-ui); padding:9px 16px; border-radius:12px; cursor:pointer; border:1px solid transparent; background:var(--pri-fill); color:var(--on-pri); text-decoration:none; display:inline-flex; align-items:center; gap:7px; box-shadow:inset 0 1px 0 var(--highlight), 0 6px 18px var(--pri-soft); transition:transform .08s, filter .15s; }
.btn:hover { filter:brightness(1.06); }
.btn:active { transform:scale(.98); }
.btn.alt { background:transparent; color:var(--pri-text); border-color:var(--pri-line); box-shadow:none; }
.btn.quiet { background:transparent; color:var(--ink); border-color:var(--line-2); box-shadow:none; }
.btn.quiet:hover { background:var(--rail-on); filter:none; }
.btn:disabled { opacity:.55; cursor:default; }
.btns { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.inline { display:inline-flex; gap:6px; align-items:center; }
.link { color:var(--acc-text); background:none; border:0; cursor:pointer; padding:2px 4px; font:inherit; font-size:13px; text-decoration:underline; text-underline-offset:2px; }
input, select, textarea { font:inherit; padding:8px 11px; border-radius:calc(var(--r) - 2px); border:1px solid var(--line-2); background:var(--input-bg); color:var(--ink); transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--pri-line); box-shadow:0 0 0 3px var(--pri-soft); }
input.num { width:96px; }
.pform { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; }
.pform label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px; max-width:100%; min-width:0; }
.pform select, .pform input { max-width:100%; }
.confirm dd { overflow-wrap:anywhere; }
.pform label.wide { flex-basis:100%; }
.pform textarea, .pform label.wide input { width:100%; }

table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
th { text-align:left; font:600 12px var(--font-ui);  color:var(--muted); padding:8px 8px; background:var(--sunk); border-bottom:1px solid var(--line); }
th:first-child { border-top-left-radius:8px; } th:last-child { border-top-right-radius:8px; }
td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:0; }
.tablewrap { overflow-x:auto; }
/* On phones, rows become small cards: each cell shows its column's name (data-label). */
@media (max-width:640px) {
  table.rows, table.rows tbody, table.rows tr, table.rows td { display:block; width:100%; }
  table.rows tr:first-child:has(th) { display:none; }
  table.rows tr { border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; margin-bottom:10px; background:var(--surface); }
  table.rows td { border:0; padding:3px 0; }
  table.rows td[data-label]::before { content:attr(data-label); display:block; font:500 12px var(--font-ui); color:var(--muted); }
}

/* board room */
h1.hello { font-size:30px; margin:2px 0 0; }
h1.hello span { color:var(--muted); font-weight:500; }

.ring.big { width:84px; height:84px; flex:none; } .ring.big > span { width:66px; height:66px; font-size:15px; }

.room { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr); gap:16px; align-items:start; }
.card h2 .more { margin-left:auto; font:600 13px var(--font-ui); color:var(--acc-text); text-decoration:none; }
.orb { width:38px; height:38px; border-radius:50%; flex:none; position:relative; background:conic-gradient(from 200deg, var(--acc), var(--pri), var(--pri2), var(--acc)); box-shadow:0 0 22px var(--pri-soft); }
.orb::after { content:"CEO"; position:absolute; inset:3px; border-radius:50%; background:var(--bg); display:grid; place-items:center; font:700 12px var(--font-ui); letter-spacing:.06em; color:var(--ink); }
.orb.sm { width:30px; height:30px; } .orb.sm::after { font-size:7.5px; }
.msgs { padding:18px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; max-height:62vh; }
.msg { display:flex; gap:10px; align-items:flex-end; }
.msg.me { justify-content:flex-end; }
.bubble { max-width:76%; padding:11px 15px; border-radius:18px; line-height:1.5; }
.me .bubble { background:var(--me); color:var(--me-ink); border-bottom-right-radius:6px; box-shadow:0 8px 22px var(--pri-soft); }
.ceo .bubble { background:var(--ceo); color:var(--ink); border:1px solid var(--ceo-edge); border-bottom-left-radius:6px; }
.bubble .from { font:600 12px var(--font-ui); margin-bottom:3px; }
.me .bubble .from { color:color-mix(in srgb, var(--me-ink) 75%, transparent); text-align:right; }
.ceo .bubble .from { color:var(--acc-text); }
.bubble .body p { margin:4px 0; }
.bubble .mode { font:500 12px var(--font-ui);  padding:1px 7px; border-radius:999px; border:1px solid currentColor; opacity:.8; margin-left:6px; }
.inner { margin:10px 0 4px; background:var(--sunk); border:1px solid var(--line-2); border-radius:var(--r-card); padding:14px; color:var(--ink); }
.inner .t { font-weight:600; font-size:13px; margin-bottom:6px; }
.confirm { border-color:var(--gold-line); }
.confirm .t { font:500 12px var(--font-ui);  color:var(--gold); }
.confirm dl { display:grid; grid-template-columns:90px minmax(0,1fr); gap:4px 10px; margin:0 0 10px; font-size:15px; }
.confirm dt { color:var(--muted); } .confirm dd { margin:0; }
.compose { display:flex; gap:10px; align-items:center; padding:10px; margin:0 12px 12px; border-radius:var(--r-card); background:var(--sunk); border:1px solid var(--line-2); }
.compose input { flex:1; min-width:0; border:0; background:transparent; font-size:15px; box-shadow:none; }
.compose input:focus { box-shadow:none; }
.btn.talk { background:transparent; color:var(--acc-text); border-color:var(--ceo-edge); box-shadow:none; }
.btn.talk.live { background:var(--danger); border-color:var(--danger); color:#fff; }

.needlist { display:flex; flex-direction:column; margin:-6px; }
.need { display:flex; gap:12px; align-items:center; padding:10px; border-radius:14px; text-decoration:none; color:var(--ink); }
a.need:hover { background:var(--rail-on); }
.need .ic { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; font:700 13px var(--font-ui); }
.need.o .ic { background:var(--gold-soft); color:var(--gold); } .need.b .ic { background:var(--acc-soft); color:var(--acc-text); }
.need.r .ic { background:var(--danger-soft); color:var(--danger); } .need.g .ic { background:var(--good-soft); color:var(--good); }
.need .t { font-weight:600; font-size:15px; } .need .d { color:var(--muted); font-size:13px; }
.need .go { margin-left:auto; color:var(--muted); font-size:20px; }
.initrow { display:flex; gap:12px; align-items:center; padding:8px 0; text-decoration:none; color:var(--ink); }
.initrow .ring { width:52px; height:52px; flex:none; } .initrow .ring > span { width:40px; height:40px; font-size:12px; }
.initrow .t { font-weight:600; }
.ev::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:linear-gradient(var(--acc),var(--pri)); }
@media (max-width:1100px) { .pulse { grid-template-columns:1fr 1fr; } .room { grid-template-columns:minmax(0,1fr); } }
@media (max-width:860px) {
  .msgs { max-height:none; }
  .convo .compose { position:sticky; bottom:calc(58px + env(safe-area-inset-bottom)); z-index:5; background:color-mix(in srgb, var(--bg) 90%, var(--pri) 10%); box-shadow:0 -8px 24px rgba(0,0,0,.25); }
}
@media (max-width:640px) {
  .pulse { gap:10px; }
  .tile { padding:12px 14px; border-radius:var(--r-card); }
  .tile.spend { flex-direction:column; align-items:flex-start; gap:8px; }
  .tile.spend .d { display:none; }
  .tile .v { font-size:24px; } .tile .d { font-size:12px; }
  .ring.big { width:44px; height:44px; } .ring.big > span { width:34px; height:34px; font-size:12px; }
  .bars { height:20px; }
  .bubble { max-width:88%; } h1.hello { font-size:23px; }
  .hero .btn, .livechip { padding:7px 11px; font-size:13px; }
  .msgs { padding:14px; }
}
.mini { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); font-size:15px; }
.mini:last-child { border-bottom:0; }
.alloc { display:flex; height:12px; border-radius:999px; overflow:hidden; margin:10px 0 8px; background:var(--surface-2); }
.legend { display:flex; gap:14px; flex-wrap:wrap; font:500 12px var(--font-mono); color:var(--muted); }
.legend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:0; }

/* initiatives, policies, library */
.initiative .head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.initiative .title { font:var(--head-weight) 19px var(--font-head); letter-spacing:var(--head-track); }
.track { height:7px; background:var(--surface-2); border-radius:999px; margin:8px 0 3px; overflow:hidden; }
.fill { height:100%; background:var(--meter-fill); border-radius:999px; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:12px 0; }
.facts .k, .k { font:500 12px var(--font-ui);  color:var(--muted); }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; align-items:center; }
.chips.small { margin:6px 0 4px; }
.chip { font:600 12px var(--font-ui); padding:4px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); text-decoration:none; background:transparent; }
.chip.for { color:var(--pri-text); background:var(--pri-soft); border-color:transparent; }
.chip.on { background:var(--filter-on-bg); color:var(--filter-on-ink); border-color:var(--filter-on-bg); }
.pgroup h3 { font:600 15px var(--font-head); margin:0 0 6px; }
.prow { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); }
.prow:last-child { border-bottom:0; }
.prow .text { flex:1; min-width:0; }
.prow .meta { font-size:12px; color:var(--muted); margin-top:3px; }
.prow .acts { display:flex; gap:6px; flex-wrap:wrap; }
@media (max-width:640px) { .prow { flex-direction:column; gap:6px; } }
.mlist a { display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--ink); }
.mlist a.on { background:var(--surface-2); }
.mlist .d { font-weight:600; font-size:15px; }
nav.tabs { display:flex; gap:4px; flex-wrap:wrap; margin:0 0 14px; }
nav.tabs a { padding:6px 12px; border-radius:999px; text-decoration:none; color:var(--ink-2); border:1px solid var(--line-2); background:var(--surface); font-size:13px; }
nav.tabs a.on { background:var(--filter-on-bg); color:var(--filter-on-ink); border-color:var(--filter-on-bg); }
table.orders { margin:8px 0; }
.report-text { white-space:pre-wrap; word-break:break-word; font-size:15px; line-height:1.6; }
pre.report-text { font:13px/1.55 var(--font-mono); background:var(--surface-2); padding:10px; border-radius:8px; max-height:420px; overflow:auto; }
details.step { border-top:1px solid var(--line); padding:8px 0; }
details.step summary { cursor:pointer; font-size:15px; }
details.step .kind { font:500 12px var(--font-ui);  padding:1px 7px; border-radius:999px; background:var(--surface-2); color:var(--muted); margin-right:6px; }
details.step .kind.error, details.step .kind.retry { background:var(--danger-soft); color:var(--danger); }
details.step .kind.review { background:var(--good-soft); color:var(--good); }
details.finished > summary { cursor:pointer; font:600 15px var(--font-head); margin:18px 0 10px; }
ul.plain { padding-left:18px; } ul.plain li { margin:4px 0; }
ol.q { margin:4px 0 8px; padding-left:18px; } ol.q li { margin:4px 0; }
.transcript { margin-top:12px; font-size:15px; }
.signin { min-height:90vh; display:grid; place-items:center; padding:16px; }
.signin .card { width:min(380px,100%); text-align:center; padding:36px 30px; box-shadow:var(--shadow-lg); }
.signin-logo { width:68px; height:68px; margin:0 auto 14px; display:block; filter:drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
.signin h1 { font:var(--head-weight) 26px var(--font-head); letter-spacing:var(--head-track); margin:0 0 6px; }
.google { display:inline-block; padding:10px 18px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); text-decoration:none; margin:16px 0 8px; }
@media (max-width:640px) {
  .pagehead { align-items:flex-start; }
  .pagehead .sp { display:none; }
  .needs { grid-template-columns:1fr; gap:8px; }
  .need { padding:10px 12px; }
}
@media (max-width:640px) { h1.page { font-size:min(var(--h1-size), 23px); } }
iframe.report-frame { width:100%; height:75vh; border:1px solid var(--line); border-radius:12px; background:#ffffff; box-shadow:0 10px 30px rgba(0,0,0,.25); }
@media (max-width:640px) { iframe.report-frame { height:70vh; } }
img.doc-image { max-width:100%; max-height:75vh; display:block; margin:0 auto; border-radius:var(--r); }
table.rows tr.on td { background:var(--pri-soft); }
.docs-list { margin:8px 0; } .docs-list .mini { gap:8px; }

/* ---- exhibits: what the CEO shows (CobenianCompanyWeb.Exhibit) ------------------------- */
.exhibit { margin:0; }
.exhibit.ex-inline { margin-top:10px; padding:12px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); color:var(--ink); }
.exhibit figcaption { font-size:13px; color:var(--muted); margin-bottom:8px; } .exhibit figcaption b { color:var(--ink); }
.ex-note { margin:10px 0 0; padding:10px 12px; border-left:3px solid var(--acc); border-radius:0 10px 10px 0; background:var(--acc-soft); font-size:13px; }
.ex-stage .ex-note { font-size:15px; padding:14px 16px; }
.ex-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:12px; }
.ex-metrics > div { padding:12px 14px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); }
.ex-inline .ex-metrics > div { background:var(--surface); }
.ex-metrics .k { font:500 12px var(--font-ui);  color:var(--muted); }
.ex-metrics .v { font:700 24px var(--font-ui); letter-spacing:-.02em; margin-top:2px; font-variant-numeric:tabular-nums; }
.ex-stage .ex-metrics .v { font-size:34px; }
.ex-metrics .d { color:var(--muted); font-size:13px; }
.ex-table { font-size:13.5px; } .ex-stage .ex-table { font-size:clamp(14.5px, 1.25vw, 18px); }
.ex-stage .ex-table th, .ex-stage .ex-table td { padding:12px 14px; }
.ex-stage .ex-table th { font:600 12px var(--font-ui); color:var(--muted); }
/* Category charts: a name, a bar and its value; the one that matters in full colour. */
.hbars { display:flex; flex-direction:column; gap:12px; }
.hrow .n { font:600 13px var(--font-ui); color:var(--ink-2); margin-bottom:3px; overflow-wrap:anywhere; }
.ex-stage .hrow .n { font-size:15px; }
.hbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.hbar .track { display:block; height:14px; border-radius:var(--r); background:var(--meter-track); overflow:hidden; }
.ex-stage .hbar .track { height:22px; }
.hbar i { display:block; height:100%; min-width:3px; background:color-mix(in srgb, var(--pri) 45%, var(--meter-track)); border-radius:inherit; }
.hbar.top i { background:var(--pri); }
.hbar.s1 i { background:var(--acc); } .hbar.s2 i { background:var(--good); }
.hbar b { font:700 15px var(--font-ui); font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }
.ex-stage .hbar b { font-size:20px; min-width:5em; }
.ex-money .big { font:700 52px/1.1 var(--font-ui); letter-spacing:-.03em; color:var(--good); font-variant-numeric:tabular-nums; }
.ex-money .ex-sub { color:var(--muted); font-size:15px; margin:4px 0 0; }
.ex-money .mbar { height:32px; }
.ex-inline .ex-money .big { font-size:34px; } .ex-inline .ex-money .mbar { height:18px; }
.ex-plan { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; counter-reset:step; }
.ex-plan li { counter-increment:step; padding:14px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.ex-plan li::before { content:counter(step); width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--pri-fill); color:var(--on-pri); font:700 12px var(--font-ui); margin-bottom:4px; }
.ex-plan .d { color:var(--muted); font-size:13px; } .ex-plan .c { margin-top:auto; font:700 13px var(--font-ui); color:var(--pri-text); }
.ex-chart { width:100%; height:auto; max-height:320px; display:block; }
.ex-chart text { fill:var(--muted); font:500 11px var(--font-ui); }
.ex-chart .grid { stroke:var(--line); }
.ex-chart .cap { stroke:var(--gold); stroke-dasharray:5 6; }
.ex-chart .spend { stroke:var(--pri-text); }
.ex-chart .s0 rect, .ex-chart .s0 circle { fill:var(--pri); } .ex-chart .s0 polyline { stroke:var(--pri-text); }
.ex-chart .s1 rect, .ex-chart .s1 circle { fill:var(--acc); } .ex-chart .s1 polyline { stroke:var(--acc); }
.ex-chart .s2 rect, .ex-chart .s2 circle { fill:var(--good); } .ex-chart .s2 polyline { stroke:var(--good); }
.ex-legend { display:flex; gap:14px; font-size:13px; color:var(--muted); margin-top:6px; }
.ex-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; }
.ex-legend i.s0 { background:var(--pri); } .ex-legend i.s1 { background:var(--acc); } .ex-legend i.s2 { background:var(--good); }
.ex-frame { height:60vh; }

/* ---- focus mode: just Bryan and the CEO ---------------------------------------------------- */
.focusroom { display:grid; grid-template-rows:auto auto auto 1fr; height:100vh; overflow:hidden; }
.fbar { display:flex; align-items:center; gap:14px; padding:12px 22px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.flogo { width:30px; height:30px; display:block; }
.ftitle { font:700 15px var(--font-ui); } .fmeta { color:var(--muted); font:600 12px var(--font-mono); }
.fbar .sp { flex:1; }
.fstatus { display:flex; align-items:center; gap:6px 18px; padding:7px 22px; border-bottom:1px solid var(--line); font:600 13px var(--font-ui); overflow-x:auto; scrollbar-width:none; white-space:nowrap; flex:none; }
.fstatus a, .fstatus button, .fstatus span { color:var(--ink-2); text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.fstatus .neg { color:var(--danger); }
.fmore { position:relative; } .fmore summary { list-style:none; cursor:pointer; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line-2); font-weight:700; }
.fmore summary::-webkit-details-marker { display:none; }
.fmore .menu { position:absolute; right:0; top:calc(100% + 6px); z-index:45; min-width:180px; display:flex; flex-direction:column; padding:6px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); }
.fmore .menu a, .fmore .menu button { display:block; width:100%; text-align:left; padding:10px 12px; border:0; background:none; color:var(--ink); font:600 13px var(--font-ui); text-decoration:none; cursor:pointer; border-radius:8px; }
.fmore .menu a:hover, .fmore .menu button:hover { background:var(--sunk); }
/* The board room in the app's frame: the room fills the page, under the phone's bars. */
.content.flush { padding:0; max-width:none; }
.content.flush .focusroom { height:100vh; }
.brief { border-top:1px solid var(--line); padding-top:10px; }
.brief summary { cursor:pointer; font:600 15px var(--font-head); color:var(--pri-text); min-height:32px; display:flex; align-items:center; }
.agenda { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.agenda span { font:600 13px var(--font-ui); padding:6px 11px; border-radius:999px; color:var(--muted); border:1px solid var(--line); }
.agenda span.done { color:var(--good); border-color:var(--good-soft); }
.agenda span.now { color:var(--on-pri); background:var(--pri-fill); border-color:transparent; box-shadow:0 6px 18px var(--pri-soft); }
.waiting { display:flex; align-items:center; gap:7px; font:600 13px var(--font-ui); color:var(--gold); padding:6px 10px; border-radius:999px; border:1px solid var(--gold-line); text-decoration:none; }
.waiting b { width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.exit { font:600 13px var(--font-ui); color:var(--ink); padding:7px 12px; border-radius:10px; border:1px solid var(--line-2); text-decoration:none; }
.exit kbd { font:600 12px var(--font-mono); color:var(--muted); margin-left:4px; }
.fflash { margin:10px 22px 0; }
.froom { display:grid; grid-template-columns:minmax(380px,460px) minmax(0,1fr); min-height:0; }
.ftalk { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); }
.ftalk .msgs { flex:1; min-height:0; max-height:none; padding:20px 18px; }
.ftalk .bubble { max-width:88%; }
.ftalk .compose { margin:12px; }
.exlinks { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.exlink { font:600 12px var(--font-ui); text-decoration:none; color:var(--acc-text); padding:5px 9px; border-radius:9px; background:var(--acc-soft); border:0; cursor:pointer; text-align:left; }
.exlink::before { content:"▦ "; }
.exlink.on { box-shadow:inset 0 0 0 1px var(--acc-text); }
.typing { display:flex; gap:4px; padding:12px 14px; }
.typing i { width:7px; height:7px; border-radius:50%; background:var(--acc-text); animation:blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay:.2s; } .typing i:nth-child(3) { animation-delay:.4s; }
@keyframes blink { 0%,80%,100% { opacity:.25; } 40% { opacity:1; } }
.fstage { display:flex; flex-direction:column; min-height:0; padding:20px 26px 0; }
.fclose { display:none; }
.fcap { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.fcap .k { font:500 12px var(--font-ui);  color:var(--acc-text); }
.fcap h2 { margin:0; font:700 24px var(--font-ui); letter-spacing:-.02em; }
.fcap .src { color:var(--muted); font-size:13px; margin-left:auto; }
.fscreen { flex:1; min-height:0; overflow:auto; border-radius:24px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:24px 28px; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); }
.fempty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; color:var(--muted); max-width:420px; margin:0 auto; }
.fempty .orb { width:64px; height:64px; } .fempty .orb::after { font-size:13px; }
.fstrip { display:flex; gap:10px; padding:0 0 14px; overflow-x:auto; flex:none; }
.fstrip .thumb { flex:none; width:160px; padding:10px; border-radius:14px; background:var(--surface); border:1px solid var(--line); cursor:pointer; color:var(--ink); text-align:left; display:flex; flex-direction:column; gap:3px; }
.fstrip .thumb.on { border-color:var(--pri-text); box-shadow:0 0 0 1px var(--pri-text); }
.fstrip .thumb .k { font:500 12px var(--font-ui); color:var(--muted);  }
.fstrip .thumb .t { font:600 13px var(--font-ui); line-height:1.25; }
.fstage > :last-child { margin-bottom:16px; }
/* On a phone: the conversation fills the screen, and an exhibit or the waiting list opens over
   it full-screen. The agenda is a strip; the waiting line and message box stay on screen. */
@media (max-width:980px) {
  .focusroom { display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
  .content.flush .focusroom { height:calc(100dvh - 64px - 58px - env(safe-area-inset-bottom)); }
  .content.flush { padding:0; }
  .fbar { flex-wrap:wrap; padding:10px 14px; gap:10px; }
  .fbar .fmeta { display:none; }
  .fstatus { padding:6px 14px; font-size:13px; gap:6px 14px; }
  .fmore summary { width:44px; height:44px; }
  .fmore .menu a, .fmore .menu button { min-height:44px; }
  .fbar .flogo { width:26px; height:26px; }
  .fbar .agenda { order:5; width:100%; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .fbar .agenda span { flex:none; font-size:12px; padding:5px 10px; }
  .exit kbd, .exit .lf { display:none; }
  .froom { display:flex; flex-direction:column; flex:1; min-height:0; }
  .fstage { padding:0; flex:none; }
  .froom:not(.staged) .fstage > * { display:none; }
  .froom.staged .fstage { position:fixed; inset:0; z-index:35; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); background:var(--bg); }
  .fclose { display:block; align-self:flex-start; margin-bottom:10px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:600 13px var(--font-ui); padding:7px 12px; border-radius:999px; cursor:pointer; }
  .fcap { margin-bottom:8px; } .fcap h2 { font-size:16px; } .fcap .src { display:none; }
  .fscreen { padding:12px; border-radius:18px; }
  .exlink { padding:8px 11px; font-size:13px; }
  .fstage .ex-stage .ex-metrics .v { font-size:24px; }
  .fstrip { padding:6px 0 2px; gap:6px; scrollbar-width:none; } .fstrip .thumb { width:auto; max-width:170px; padding:6px 10px; }
  .fstrip .thumb { justify-content:center; }
  .fstrip .thumb .k { display:none; } .fstrip .thumb .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
  .ftalk { flex:1; min-height:0; border-right:0; border-top:0; }
  .ftalk .msgs { padding:12px 14px; }
  .ftalk .compose { margin:8px 10px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--bg) 90%, var(--pri) 10%); }
}

/* ---- pages v2 (docs/mockups/pages-v2.html): headers, stat chips, sections, page parts ---- */
/* ---- shared, new: a page header with an icon, stat chips, section heads ---------------- */
.phead { display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.phead .pic { width:52px; height:52px; border-radius:var(--r-card); display:grid; place-items:center; background:var(--pri-fill); color:var(--on-pri); box-shadow:0 10px 28px var(--pri-soft); flex:none; }
.phead .pic svg { width:26px; height:26px; }
.phead h1 { margin:0; font:700 30px/1.15 var(--font-ui); letter-spacing:-.025em; }
.phead p { margin:4px 0 0; color:var(--muted); max-width:70ch; }
.phead .sp { flex:1; }
.stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.stat { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--line); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); }
.stat b { font:700 20px var(--font-ui); font-variant-numeric:tabular-nums; }
.stat span { color:var(--muted); font-size:13px; line-height:1.25; }
.stat.gold { border-color:var(--gold-line); } .stat.gold b { color:var(--gold); }
.stat.mint b { color:var(--good); }
.shead { display:flex; align-items:center; gap:12px; margin:26px 0 12px; }
.shead .si { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; font:700 15px var(--font-ui); }
.shead h2 { margin:0; font:700 20px var(--font-ui); letter-spacing:-.02em; }
.shead .n { font:600 12px var(--font-ui); color:var(--muted); padding:3px 9px; border-radius:999px; border:1px solid var(--line-2); }
.shead .what { color:var(--muted); font-size:13px; }
.shead .sp { flex:1; }
.c-vision { background:linear-gradient(135deg,#a855f7,#6366f1); color:#fff; }
.c-goal { background:linear-gradient(135deg,#06b6d4,#3b82f6); color:#fff; }
.c-rule { background:linear-gradient(135deg,#64748b,#334155); color:#fff; }
.c-limit { background:linear-gradient(135deg,#14b8a6,#0e7490); color:#fff; }
.c-style { background:linear-gradient(135deg,#f472b6,#a855f7); color:#fff; }
.c-rhythm { background:linear-gradient(135deg,#38bdf8,#6366f1); color:#fff; }

/* ---- policies --------------------------------------------------------------------------- */
.banner { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-card); margin-bottom:6px; background:linear-gradient(90deg,var(--gold-soft),transparent); border:1px solid var(--gold-line); }
.banner .bi { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold); font:700 16px var(--font-ui); }
.banner b { font-size:15px; } .banner .d { color:var(--muted); font-size:13px; }
.banner .sp { flex:1; }
.pol { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:12px; }
.pcard { position:relative; padding:16px 16px 14px 20px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); }
.pcard::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:4px; background:var(--gold); }
.pcard.active::before { background:var(--good); }
.pcard .text { font-size:16px; line-height:1.5; color:var(--ink); }
.pcard .meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; color:var(--muted); font-size:13px; }
.kv { font:600 12px var(--font-mono); padding:3px 8px; border-radius:8px; background:var(--acc-soft); color:var(--acc-text); }
.pcard .acts { display:flex; gap:6px; margin-top:auto; }
.btn.sm { padding:6px 12px; font-size:13px; border-radius:10px; }
.per { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:12px; }
.percard { padding:16px; border-radius:var(--r-card); border:1px dashed var(--line-2); }
.percard .t { font-weight:700; } .percard .d { color:var(--muted); font-size:13px; margin:4px 0 10px; }

/* ---- initiatives ------------------------------------------------------------------------ */
.alloc2 { padding:18px 20px; }
.alloc2 .bar { display:flex; height:16px; border-radius:999px; overflow:hidden; background:var(--meter-track); margin:12px 0 10px; gap:2px; }
.alloc2 .bar i { display:block; position:relative; }
.alloc2 .bar i b { position:absolute; inset:0 auto 0 0; background:rgba(0,0,0,.35); max-width:100%; }
.legend2 { display:flex; gap:10px; flex-wrap:wrap; }
.legend2 span { display:flex; align-items:center; gap:7px; font-size:13px; padding:5px 10px; border-radius:999px; border:1px solid var(--line); }
.legend2 i { width:10px; height:10px; border-radius:3px; }
.icard { padding:0; overflow:hidden; }
.icard .top { display:flex; gap:16px; align-items:center; padding:18px 20px; }
.icard .top .ring { width:72px; height:72px; flex:none; } .icard .top .ring > span { width:56px; height:56px; font-size:15px; }
.icard h3 { margin:0; font:var(--head-weight) 19px var(--font-head); letter-spacing:var(--head-track); }
.icard .obj { color:var(--muted); font-size:13px; margin-top:3px; }
.icard .chips { margin:8px 0 0; }
.icard .imain { flex:1; min-width:0; }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.kpis > div { padding:12px 20px; border-right:1px solid var(--line); }
.kpis > div:last-child { border-right:0; }
.kpis .k { font:500 12px var(--font-ui); color:var(--muted);  }
.kpis .v { font:700 16px var(--font-ui); margin-top:2px; font-variant-numeric:tabular-nums; }
.wo { padding:8px 12px; }
.worow { display:grid; grid-template-columns:22px 1fr 140px 90px 60px; gap:10px; align-items:center; padding:9px 8px; border-radius:12px; font-size:13px; }
.worow:hover { background:var(--rail-on); }
.sdot { width:10px; height:10px; border-radius:50%; background:var(--good); box-shadow:0 0 0 4px var(--good-soft); }
.sdot.f { background:var(--danger); box-shadow:0 0 0 4px var(--danger-soft); }
.sdot.r { background:var(--acc); box-shadow:0 0 0 4px var(--acc-soft); }
.worow .who { color:var(--muted); }
.worow .c { text-align:right; font-variant-numeric:tabular-nums; }
.ifoot { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:14px 20px; border-top:1px solid var(--line); }
.ifoot .sp { flex:1; }

/* ---- requests --------------------------------------------------------------------------- */
.ask { padding:20px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; }
.ask h2 { margin:0 0 4px; }
.ask .row { display:flex; gap:10px; }
.ask input { flex:1; padding:12px 14px; border-radius:14px; font-size:15px; }
.allow { display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--r-card); border:1px solid var(--line); background:var(--sunk); }
.allow .ring { width:64px; height:64px; } .allow .ring > span { width:50px; height:50px; font-size:12px; }
.reqs { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:12px; }
.rcard { padding:16px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.rcard .t { font-weight:700; font-size:15px; }
.rcard .d { color:var(--muted); font-size:13px; }
.rcard .f { display:flex; align-items:center; gap:8px; margin-top:auto; font-size:13px; color:var(--muted); }
.rcard .f .sp { flex:1; }
.empty { text-align:center; padding:40px 20px; }
.empty .big { width:72px; height:72px; margin:0 auto 12px; border-radius:22px; display:grid; place-items:center; background:var(--pri-soft); color:var(--pri-text); }
.empty .big svg { width:34px; height:34px; }

/* ---- library ------------------------------------------------------------------------------ */
.lib { display:grid; grid-template-columns:340px minmax(0,1fr); gap:16px; align-items:start; }
.search { display:flex; gap:8px; align-items:center; padding:10px 12px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); color:var(--muted); margin-bottom:10px; }
.seg { display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--sunk); border:1px solid var(--line); margin-bottom:12px; }
.seg a { flex:1; text-align:center; padding:6px; border-radius:9px; font:600 13px var(--font-ui); color:var(--muted); }
.seg a.on { background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.item { display:flex; gap:12px; align-items:center; padding:10px; border-radius:14px; }
.item.on { background:var(--pri-soft); box-shadow:inset 0 0 0 1px var(--pri-line); }
.ftype { width:38px; height:46px; border-radius:8px; display:grid; place-items:center; font:700 12px var(--font-ui); color:#fff; flex:none; position:relative; }
.ftype::after { content:""; position:absolute; top:0; right:0; width:10px; height:10px; background:rgba(255,255,255,.35); border-bottom-left-radius:4px; }
.f-rep { background:linear-gradient(135deg,#6366f1,#a855f7); } .f-pdf { background:linear-gradient(135deg,#ef4444,#b91c1c); }
.f-xls { background:linear-gradient(135deg,#10b981,#047857); } .f-doc { background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.f-img { background:linear-gradient(135deg,#f59e0b,#d97706); }
.item .t { font-weight:600; font-size:13px; line-height:1.3; } .item .d { color:var(--muted); font-size:12px; }
.viewer { padding:0; overflow:hidden; }
.viewer header { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.viewer header .sp { flex:1; }
.paper { margin:18px; padding:28px 32px; border-radius:12px; background:#fff; color:#1f2937; min-height:420px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.paper h3 { margin:0 0 6px; font:700 24px Charter, Georgia, serif; } .paper p { line-height:1.65; }
.paper table { font-size:13px; } .paper th { background:#f3f4f6; color:#6b7280; } .paper td, .paper th { border-color:#e5e7eb; }

/* ---- concerns --------------------------------------------------------------------------- */
.roles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.role { padding:18px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
.role .av { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font:700 13px var(--font-ui); color:#fff; margin-bottom:12px; }
.role h3 { margin:0; font:var(--head-weight) 17px var(--font-head); } .role .w { color:var(--muted); font-size:13px; margin:2px 0 12px; }
.role .state { display:flex; align-items:center; gap:8px; font-weight:600; }
.role ul { margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:13px; }
.hist .hrow { display:grid; grid-template-columns:120px 70px 1fr 90px; gap:12px; padding:10px 6px; border-bottom:1px solid var(--line); font-size:13px; align-items:center; }
.hist .hrow:last-child { border-bottom:0; }

/* ---- records ---------------------------------------------------------------------------- */
.rtabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.rtab { display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:14px; border:1px solid var(--line); background:var(--surface); font:600 13px var(--font-ui); color:var(--ink-2); text-decoration:none; }
.rtab:hover { border-color:var(--line-2); color:var(--ink); }
.rtab b { font:700 12px var(--font-ui); padding:1px 7px; border-radius:999px; background:var(--sunk); color:var(--muted); }
.rtab.on { background:var(--pri-fill); color:var(--on-pri); border-color:transparent; } .rtab.on b { background:rgba(0,0,0,.18); color:inherit; }
.toolbar { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.toolbar .search { margin:0; flex:1; max-width:360px; }
.toolbar .sp { flex:1; }

/* ---- work order ------------------------------------------------------------------------- */
.whead { display:flex; gap:16px; align-items:center; margin-bottom:18px; }
.wav { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; background:var(--pri-fill); color:var(--on-pri); font:700 15px var(--font-ui); }
.crumbs { color:var(--muted); font-size:13px; margin-bottom:6px; }
.wgrid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:16px; align-items:start; }
.brief { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.brief > div { padding:12px 14px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); }
.brief .k { font:500 12px var(--font-ui); color:var(--muted);  }
.steps { position:relative; padding-left:26px; }
.steps::before { content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--acc),var(--pri),var(--pri2)); opacity:.5; }
.step2 { position:relative; padding:10px 12px; margin-bottom:10px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); }
.step2::before { content:""; position:absolute; left:-22px; top:14px; width:12px; height:12px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 4px var(--acc-soft); }
.step2.model::before { background:var(--pri); box-shadow:0 0 0 4px var(--pri-soft); }
.step2.review::before { background:var(--good); box-shadow:0 0 0 4px var(--good-soft); }
.step2 .h { display:flex; gap:8px; align-items:center; font-size:13px; } .step2 .h .sp { flex:1; }
.step2 .kind { font:500 12px var(--font-ui);  padding:2px 7px; border-radius:6px; background:var(--rail-on); color:var(--muted); }
.costbox .v { font:700 30px var(--font-ui); font-variant-numeric:tabular-nums; }
.costbox .bar { height:8px; border-radius:999px; background:var(--meter-track); overflow:hidden; margin:10px 0 6px; }
.costbox .bar i { display:block; height:100%; background:var(--meter-fill); }

@media (max-width:900px) { .lib, .wgrid { grid-template-columns:1fr; } .roles { grid-template-columns:1fr; } .kpis { grid-template-columns:1fr 1fr; } .worow { grid-template-columns:22px 1fr 60px; } .worow .who, .worow .pill { display:none; } .ask { grid-template-columns:1fr; } }
.icard .ibody { padding:4px 20px 0; }
.icard .ibody .facts { margin:10px 0 14px; }
a.worow { text-decoration:none; color:var(--ink); }
.icard .top .pill { align-self:flex-start; }
.rcard a.t { color:var(--ink); text-decoration:none; }
.rcard .d { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.uploadcard summary { cursor:pointer; list-style:none; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.uploadcard summary::-webkit-details-marker { display:none; }
a.item { text-decoration:none; color:var(--ink); }
.item > span:last-child { min-width:0; }
.viewer .viewbody { padding:16px 18px 18px; }
.viewer .viewbody .report-frame { height:70vh; }
.viewer header .btn { white-space:nowrap; }
.role .concern { margin-top:12px; padding:12px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.hist .hrow { grid-template-columns:170px 70px 1fr 140px; }
@media (max-width:900px) { .hist .hrow { grid-template-columns:1fr; gap:4px; } }
details.step2 summary { list-style:none; cursor:pointer; } details.step2 summary::-webkit-details-marker { display:none; }
details.step2 pre { margin:10px 0 0; }
.crumbs a { color:var(--acc-text); text-decoration:none; }

/* ---- plans (docs/mockups/plans.html) -------------------------------------------------- */
/* ---- the answer first: what is this for, is it done, how much, will it finish ----------- */
.verdict { display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; padding:22px 24px; }
.bigring { --p:0; width:120px; height:120px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(from -90deg, var(--acc), var(--pri) calc(var(--p) * 1%), var(--meter-track) 0); }
.bigring > span { width:96px; height:96px; border-radius:50%; background:var(--bg); display:grid; place-items:center; text-align:center; }
.bigring b { font:700 30px/1 var(--font-ui); display:block; } .bigring small { color:var(--muted); font-size:12px; }
.verdict .for { font:500 12px var(--font-ui);  color:var(--muted); }
.verdict h2 { margin:4px 0 6px; font:700 24px/1.25 var(--font-ui); letter-spacing:-.02em; }
.verdict .done-means { color:var(--ink-2); font-size:15px; }
.verdict .done-means b { color:var(--ink); }
.status-big { text-align:right; }
.status-big .s { display:inline-flex; align-items:center; gap:8px; font:700 16px var(--font-ui); padding:8px 14px; border-radius:999px; background:var(--good-soft); color:var(--good); }
.status-big .s i { width:9px; height:9px; border-radius:50%; background:currentColor; }
.status-big .why { color:var(--muted); font-size:13px; margin-top:8px; max-width:260px; margin-left:auto; }
.numbers { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; }
.num { padding:14px 16px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); }
.num .k { font:500 12px var(--font-ui);  color:var(--muted); }
.num .v { font:700 24px var(--font-ui); letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; }
.num .v small { font-size:13px; color:var(--muted); font-weight:500; }
.num .bar { height:6px; border-radius:999px; background:var(--meter-track); overflow:hidden; margin-top:8px; }
.num .bar i { display:block; height:100%; background:var(--meter-fill); }
.num .d { color:var(--muted); font-size:13px; margin-top:6px; }

/* ---- checks: what software verified against the plan ------------------------------------ */
.checks { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.chk { display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); }
.chk .ic { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; font:700 12px var(--font-ui); }
.chk .t { font-weight:600; font-size:13px; } .chk .d { color:var(--muted); font-size:13px; }
.ok-i { background:var(--good-soft); color:var(--good); } .warn-i { background:var(--gold-soft); color:var(--gold); } .bad-i { background:var(--danger-soft); color:var(--danger); }

/* ---- the steps: a checklist with acceptance criteria, budget and evidence ---------------- */
.steps3 { display:flex; flex-direction:column; gap:10px; }
.st { display:grid; grid-template-columns:34px minmax(0,1fr) 150px 120px; gap:14px; align-items:start; padding:14px 16px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); cursor:pointer; }
.st:hover, .st.on { border-color:var(--pri-text); box-shadow:0 0 0 1px var(--pri-text); }
.st .n { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 13px var(--font-ui); }
.st.done .n { background:var(--good-soft); color:var(--good); }
.st.run .n { background:var(--acc-soft); color:var(--acc-text); box-shadow:0 0 0 4px var(--acc-soft); }
.st.wait .n { border:1.5px dashed var(--line-2); color:var(--muted); }
.st.you .n { background:var(--gold-soft); color:var(--gold); }
.st .t { font-weight:700; font-size:15px; }
.st .who { color:var(--muted); font-size:13px; margin-top:2px; }
.ac { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:4px; }
.ac li { display:flex; gap:8px; font-size:13px; color:var(--ink-2); }
.ac li::before { content:"○"; color:var(--muted); width:14px; flex:none; }
.ac li.met::before { content:"✓"; color:var(--good); font-weight:700; }
.ac li.miss::before { content:"✗"; color:var(--danger); font-weight:700; }
.evid { margin-top:8px; font-size:13px; } .evid a { color:var(--acc-text); text-decoration:none; }
.st .money { font-size:13px; } .st .money b { font:700 15px var(--font-ui); }
.st .money .bar { height:5px; border-radius:999px; background:var(--meter-track); overflow:hidden; margin-top:6px; }
.st .money .bar i { display:block; height:100%; background:var(--meter-fill); }
.st .when { font-size:13px; color:var(--muted); text-align:right; } .st .when b { color:var(--ink); display:block; font-size:13px; }
.st.nest { margin-left:calc(var(--depth, 1) * 20px); grid-template-columns:minmax(34px,auto) minmax(0,1fr) 150px 120px; }
.st.holds { background:var(--sunk); }
.st.nest .n { width:auto; min-width:30px; padding:0 8px; border-radius:999px; }
.task-picker { flex-wrap:wrap; margin:10px 0; }

/* ---- revisions ---------------------------------------------------------------------------- */
.revs { position:relative; padding-left:22px; }
.revs::before { content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:var(--line-2); }
.rev { position:relative; margin-bottom:14px; }
.rev::before { content:""; position:absolute; left:-20px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--line-2); }
.rev.cur::before { background:var(--pri); box-shadow:0 0 0 4px var(--pri-soft); }
.rev .h { display:flex; gap:8px; align-items:baseline; } .rev .h b { font-size:15px; } .rev .h .muted { font-size:12px; }
.rev .why { font-size:13px; color:var(--ink-2); margin:3px 0 6px; }
.diff { display:flex; flex-direction:column; gap:3px; font-size:13px; }
.diff .a { color:var(--good); } .diff .r { color:var(--danger); text-decoration:line-through; opacity:.8; } .diff .c { color:var(--gold); }

.agent .todo li, .agent .todo li > div { min-width:0; overflow-wrap:anywhere; }
.split { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
.agent { }
.todo { list-style:none; padding:0; margin:0; }
.todo li { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.todo li:last-child { border-bottom:0; }
.todo .ic { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none; font:700 12px var(--font-ui); margin-top:1px; }
.ic.go { background:var(--acc-soft); color:var(--acc-text); } .ic.no { border:1.5px dashed var(--line-2); }
.todo .c { margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; } .todo .d { color:var(--muted); font-size:12px; }
.mini-k { font:500 12px var(--font-ui); color:var(--muted); margin:14px 0 6px; }
.vsel { display:flex; gap:6px; align-items:center; }

@media (max-width:1100px) { .split { grid-template-columns:1fr; } .agent { position:static; } .checks { grid-template-columns:1fr 1fr; } .numbers { grid-template-columns:1fr 1fr; } .verdict { grid-template-columns:auto 1fr; } .status-big { grid-column:1 / -1; text-align:left; } .status-big .why { margin-left:0; } .st { grid-template-columns:34px 1fr; } .st .money, .st .when { grid-column:2; text-align:left; } .st.nest { grid-template-columns:minmax(34px,auto) minmax(0,1fr); } }
@media (max-width:600px) { .st.nest { margin-left:calc(var(--depth, 1) * 8px); padding:12px; } }

/* ---- past meetings (docs/mockups/meetings.html) ------------------------------------------ */
/* ---- minutes: past meetings as a record you can act on ----------------------------------- */
.mgrid { display:grid; grid-template-columns:320px minmax(0,1fr); gap:16px; align-items:start; }
.mtl { padding:10px; }
.mcard { display:block; padding:12px 14px; border-radius:14px; color:var(--ink); text-decoration:none; margin-bottom:6px; border:1px solid transparent; }
.mcard.on { background:var(--pri-soft); border-color:var(--pri-line); }
.mcard .d { font-weight:700; } .mcard .s { color:var(--muted); font-size:13px; margin-top:2px; }
.mcard .tags { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.tagc { font:600 12px var(--font-ui); padding:2px 8px; border-radius:999px; background:var(--sunk); color:var(--muted); border:1px solid var(--line); }
.tagc.g { color:var(--good); border-color:var(--good-soft); } .tagc.y { color:var(--gold); border-color:var(--gold-line); }
.record { padding:0; overflow:hidden; }
.record header { padding:20px 22px; border-bottom:1px solid var(--line); }
.record header .k { font:500 12px var(--font-ui);  color:var(--muted); }
.record header h2 { margin:4px 0 8px; font:700 24px var(--font-ui); letter-spacing:-.02em; }
.record header .sum { font-size:15px; color:var(--ink-2); line-height:1.6; }
.facts4 { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.facts4 > div { padding:12px 22px; border-right:1px solid var(--line); }
.facts4 > div:last-child { border-right:0; }
.facts4 .k { font:500 12px var(--font-ui);  color:var(--muted); }
.facts4 .v { font:700 16px var(--font-ui); margin-top:2px; }
.rsec { padding:18px 22px; border-bottom:1px solid var(--line); }
.rsec:last-child { border-bottom:0; }
.rsec h3 { margin:0 0 10px; font:var(--head-weight) 15px var(--font-head); display:flex; gap:8px; align-items:center; }
.rsec h3 .n { font:600 12px var(--font-ui); color:var(--muted); padding:2px 8px; border-radius:999px; border:1px solid var(--line-2); }
.dec { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); }
.dec:last-child { border-bottom:0; }
.dec .ic { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:none; font:700 12px var(--font-ui); }
.dec .t { font-weight:600; } .dec .d { color:var(--muted); font-size:13px; }
.dec .sp { flex:1; }
.follow { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.fcard { padding:12px 14px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); }
.fcard .k { font:500 12px var(--font-ui);  color:var(--muted); }
.fcard .t { font-weight:600; margin:4px 0; } .fcard .d { color:var(--muted); font-size:13px; }
.shelf { display:flex; gap:10px; overflow-x:auto; }
.shelf .thumb { flex:none; width:180px; padding:12px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); }
.shelf .thumb .k { font:500 12px var(--font-ui); color:var(--muted);  }
.shelf .thumb .t { font:600 13px var(--font-ui); margin-top:4px; }
.shelf .thumb .spark { height:34px; margin-top:8px; display:flex; gap:3px; align-items:flex-end; }
.shelf .thumb .spark i { flex:1; border-radius:3px; background:var(--pri-fill); opacity:.85; }
.agendadone { display:flex; gap:6px; flex-wrap:wrap; }

@media (max-width:1000px) { .mgrid { grid-template-columns:1fr; } .facts4, .follow { grid-template-columns:1fr 1fr; } }
.planline { display:flex; align-items:center; gap:10px; margin:0 20px 14px; padding:10px 14px; border-radius:14px; background:var(--pri-soft); border:1px solid var(--pri-line); color:var(--ink); text-decoration:none; font-size:13px; }
.planline .sp { flex:1; } .planline > span:last-child { color:var(--pri-text); font-weight:600; }

/* ---- the board of directors (docs/mockups/board-of-directors.html) -------------------- */
.seats { display:flex; gap:10px; align-items:center; padding:10px 22px; border-bottom:1px solid var(--line); overflow-x:auto; }
.seat { display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--surface); border:1px solid var(--line); flex:none; }
.seat .av, .dav { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; font:700 12px var(--font-ui); flex:none; }
.seat b { font-size:13px; display:block; line-height:1.1; } .seat small { color:var(--muted); font-size:12px; }
.seat.speaking { border-color:var(--pri-text); box-shadow:0 0 0 1px var(--pri-text); }
.seat.thinking { border-color:var(--acc-text); }
.seats .sep { width:1px; height:26px; background:var(--line-2); flex:none; }
.orbav { background:conic-gradient(from 200deg, var(--acc), var(--pri), var(--pri2), var(--acc)); font-size:12px !important; }
.d-you { background:var(--pri-fill); color:var(--on-pri); }
.d-skeptic { background:linear-gradient(135deg,#64748b,#334155); } .d-customer { background:linear-gradient(135deg,#14b8a6,#0e7490); }
.d-steward { background:linear-gradient(135deg,#f472b6,#be185d); } .d-visionary { background:conic-gradient(from 200deg,#a78bfa,#38bdf8,#f472b6,#a78bfa); }
.d-board { background:var(--line-2); color:var(--ink); }
.msg.dir .bubble { background:var(--sunk); border:1px solid var(--line); border-top-left-radius:5px; max-width:84%; }
.msg.dir .from { color:var(--ink-2); }
.kind { font:500 12px var(--font-ui);  padding:2px 7px; border-radius:6px; margin-left:4px; }
.k-question { background:var(--acc-soft); color:var(--acc-text); } .k-idea { background:var(--pri-soft); color:var(--pri-text); }
.k-objection { background:var(--gold-soft); color:var(--gold); }
.msg.dir .to { color:var(--muted); font-weight:500; font-size:12px; margin-left:4px; }
.tracker h2 { margin:0 0 8px; font:700 15px var(--font-ui); }
.tracker .item { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line); }
.tracker .item:last-child { border-bottom:0; }
.tracker .t { font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tracker .s { font-size:12px; margin-top:2px; }
.st-ok { color:var(--good); } .st-you { color:var(--gold); } .st-open { color:var(--acc-text); }
.fstage .tracker { margin-top:12px; padding:14px 16px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); max-height:28vh; overflow:auto; }
.focusroom { grid-template-rows:auto auto auto 1fr; }
@media (max-width:980px) { .seats { padding:6px 12px; } .seat small { display:none; } .seat { padding:3px 8px 3px 3px; } .seat .av { width:24px; height:24px; font-size:12px; } .seat > span:last-child { display:none; } .seat.speaking > span:last-child { display:block; } .seat.speaking small { display:block; } .fstage .tracker { display:none; } }

/* ---- an initiative's home (docs/mockups/initiative-dashboard.html) ---------------------- */
.dhead { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; padding:20px 22px; }
.dhead h1 { margin:0; font:700 30px/1.2 var(--font-ui); letter-spacing:-.025em; }
.dhead .goal { color:var(--ink-2); margin-top:6px; }
.dhead .sentence { margin-top:12px; font-size:15px; padding:10px 14px; border-radius:14px; background:var(--sunk); border:1px solid var(--line); }
.dhead .sentence b { color:var(--good); }
.dhead .right { text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.vchip { display:inline-flex; align-items:center; gap:8px; font:700 15px var(--font-ui); padding:8px 14px; border-radius:999px; background:var(--gold-soft); color:var(--gold); }
.vchip i { width:9px; height:9px; border-radius:50%; background:currentColor; }
.grid3 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; }
.kpi { padding:14px 16px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); }
.kpi .k { font:500 12px var(--font-ui);  color:var(--muted); }
.kpi .v { font:700 24px var(--font-ui); letter-spacing:-.02em; margin-top:4px; } .kpi .v small { font-size:13px; color:var(--muted); font-weight:500; }
.kpi .d { color:var(--muted); font-size:13px; margin-top:4px; }
.spark { width:100%; height:38px; margin-top:6px; }
.two { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; align-items:start; }
.chart { width:100%; height:200px; }
.chart text { fill:var(--muted); font:500 12px var(--font-ui); }
.planmini { display:flex; gap:6px; margin:10px 0 6px; }
.planmini i { flex:1; height:10px; border-radius:4px; background:var(--meter-track); }
.planmini i.d { background:var(--good); } .planmini i.r { background:var(--acc); } .planmini i.y { background:var(--gold); }
.act .row { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.act .row:last-child { border-bottom:0; } .act .w { color:var(--muted); font:600 12px var(--font-mono); width:92px; flex:none; }
.riskrow { display:flex; gap:10px; padding:10px; border-radius:12px; background:var(--sunk); border:1px solid var(--line); margin-bottom:8px; font-size:13px; }
.riskrow .ic { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; font:700 12px var(--font-ui); }
.mini2 { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.mini2:last-child { border-bottom:0; }
@media (max-width:1000px) { .grid3 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .two, .dhead { grid-template-columns:minmax(0,1fr); } .dhead .right { align-items:flex-start; text-align:left; } }
.dhead .sentence b.v-on_track, .dhead .sentence b.v-done { color:var(--good); }
.dhead .sentence b.v-at_risk { color:var(--gold); } .dhead .sentence b.v-off_track { color:var(--danger); }
.dhead .sentence b.v-no_plan, .dhead .sentence b.v-unchecked { color:var(--muted); }
.vchip.v-on_track, .vchip.v-done { background:var(--good-soft); color:var(--good); }
.vchip.v-off_track { background:var(--danger-soft); color:var(--danger); }
.vchip.v-no_plan, .vchip.v-unchecked { background:var(--sunk); color:var(--muted); }
.kpi .bar { height:6px; border-radius:999px; background:var(--meter-track); overflow:hidden; margin-top:8px; }
.kpi .bar i { display:block; height:100%; background:var(--meter-fill); }
.planmini i.x { background:var(--danger); }
.pchart { width:100%; height:auto; max-height:220px; display:block; }
.pchart text { fill:var(--muted); font:500 11px var(--font-ui); }
.pchart .axis { stroke:var(--line); } .pchart .top { stroke:var(--line); stroke-dasharray:4 6; }
.pchart .ideal { stroke:var(--line-2); stroke-dasharray:5 6; } .pchart .actual { stroke:var(--pri-text); stroke-width:3; }
.act .row a { color:var(--ink); text-decoration:none; } .act .row a:hover { color:var(--acc-text); }
a.ilink { color:inherit; text-decoration:none; } a.ilink:hover { color:var(--acc-text); }

/* ---- focus mode: the people row, the speaking turn, what's waiting on Bryan -------------- */
img.av, img.dav { object-fit:cover; background:var(--sunk); }
.seat { transition:box-shadow .3s, border-color .3s, opacity .3s; }
.seat.speaking { box-shadow:0 0 0 2px var(--pri-text), 0 0 22px var(--pri-soft); }
.seats:has(.seat.speaking) .seat:not(.speaking) { opacity:.6; }
/* One line for the voice session, in the same place in both layouts. */
.vbar { display:flex; align-items:center; gap:10px; margin:0 12px 8px; padding:6px 12px; min-height:44px; border-radius:var(--r-card); background:var(--sunk); border:1px solid var(--line); flex:none; }
.vbar .vtext { flex:1; min-width:0; display:flex; flex-direction:column; font-size:13px; line-height:1.3; }
.vbar .vtext .muted { font-size:12px; }
.vbar .heard { color:var(--ink-2); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vdot { width:10px; height:10px; border-radius:50%; flex:none; background:var(--muted); }
.vbar.listening .vdot { background:var(--good); animation:pulse 2.4s infinite; }
.vbar.thinking .vdot { background:var(--acc-text); animation:mull 1.4s ease-in-out infinite; }
.vbar.speaking { border-color:var(--pri-text); } .vbar.speaking .vdot { background:var(--pri-text); }
.btn.talk { display:inline-flex; align-items:center; gap:6px; } .btn.talk svg { width:17px; height:17px; flex:none; }
@media (prefers-reduced-motion:reduce) { .dot, .vdot, .seat .av, .typing i { animation:none !important; } }
.seat.thinking .av { animation:mull 1.4s ease-in-out infinite; }
@keyframes mull { 50% { box-shadow:0 0 0 3px var(--acc-text); } }
.msg.now .bubble { border-color:var(--pri-text); box-shadow:0 0 0 1px var(--pri-text), 0 0 26px var(--pri-soft); }
.msg .mode.done { color:var(--ok-text, var(--muted)); }
.msg .mode.live { color:var(--pri-text); }
.msg .answering { margin:2px 0 6px; padding-left:8px; border-left:2px solid var(--line-2); color:var(--muted); font-size:12px; font-style:italic; }
.yourturn { display:flex; flex-direction:column; gap:3px; margin:8px 12px 0; padding:8px 12px; border-radius:12px; background:var(--gold-soft, var(--sunk)); border:1px solid var(--gold-line, var(--line)); font-size:13px; max-height:20vh; overflow:auto; }
.yourturn i { font-style:normal; font-weight:600; }
.cutin { margin:0 14px; font-size:13px; color:var(--muted); }
@media (max-width:980px) {
  .froom.wide { display:flex; }
  .ftable .seat2 { width:70px; } .ftable .seat2 .face { width:44px; height:44px; } .ftable .seat2 .nm { font-size:12px; }
  .ftable .bubble2 { width:56%; font-size:12px; }
}

.wrapask { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:13px; }
.linkish { border:0; background:none; padding:0; color:var(--pri-text); font:inherit; text-decoration:underline; cursor:pointer; }
.boardctl { display:flex; align-items:center; gap:10px; margin:0 14px; font-size:13px; flex-wrap:wrap; }
.concern .acts { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
/* Desktop rail: each screen's name shows under its icon, not only on hover. */
@media (min-width:861px) {
  .navlist a { width:68px; height:auto; padding:8px 0 6px; display:flex; flex-direction:column; align-items:center; gap:3px; }
  .navlist .label { position:static; transform:none; opacity:1; padding:0; border:0; background:none; box-shadow:none; font:600 12px var(--font-ui); color:inherit; white-space:nowrap; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .navlist a.on::before { left:-4px; }
  .navlist .count { top:2px; right:10px; }
}

/* Initiatives: the budget card's heading. */
.allochead { display:flex; align-items:baseline; gap:6px 10px; flex-wrap:wrap; }
.allochead h2 { margin:0; } .allochead .sp { flex:1; }
.allochead b { font:700 24px var(--font-ui); }

/* ---- phones (from the 2026-11-03 responsive review) ------------------------------------ */
@media (max-width:860px) {
  /* Tap targets at least 44px tall, and 16px text in fields: iPhone Safari zooms below that. */
  .btn, .btn.sm, .chip, .iconbtn, .fbar .exit, .ftalk button.waiting, .exlink, .fstrip .thumb, .fclose { min-height:44px; }
  .iconbtn { min-width:44px; }
  .exlink, .fbar .exit, .decide { display:inline-flex; align-items:center; gap:5px; }
  .fbar .exit.fullroom, .fstatus .moneyline { display:none; }
  .decide { min-height:36px; }
  input, select, textarea { font-size:16px; }
  .compose input { font-size:16px; min-height:44px; padding:0 4px; }
  .compose { padding:6px 8px; gap:8px; }
  .compose .btn { padding-left:12px; padding-right:12px; }
  /* Small text links keep their look but get a finger's height. */
  .more, a.link, .ilink, .card p a, .muted a { display:inline-block; padding-top:12px; padding-bottom:12px; margin-top:-12px; margin-bottom:-12px; }
  .topbar .spend { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }
  details.breakdown summary, .rtab { min-height:44px; }
  .chip { display:inline-flex; align-items:center; }
  /* Labels no smaller than 11.5px. */
  .msg .mode, .msg .kind, .msg .to, .k, .fcap .k, .seat small { font-size:12px; }
  .seat .av { font-size:12px; }
  /* The account button's status dot sits on the avatar, not across the menu. */
  .account summary { display:inline-block; }
  /* Initiatives: a smaller ring, so the title gets the width. */
  .icard .top { gap:12px; padding:14px 16px; align-items:flex-start; }
  .icard .top .ring { width:52px; height:52px; } .icard .top .ring > span { width:40px; height:40px; font-size:12px; }
  .icard .ibody { padding:4px 16px 0; }
}
@media (max-width:640px) {
  /* A page's header: a small icon beside the title, and the description goes, so the first
     card reaches the first screen. */
  .phead { align-items:center; gap:10px; margin-bottom:14px; }
  .phead .pic { width:34px; height:34px; border-radius:var(--r); box-shadow:none; }
  .phead .pic svg { width:18px; height:18px; }
  .phead > div { flex:1 1 0; min-width:0; }
  .phead h1 { font-size:24px; }
  .phead p, .phead .sp { display:none; }
  /* A report's header: title on its own row, the buttons under it. */
  .viewer header { flex-wrap:wrap; }
  .viewer header > :first-child { flex:1 1 100%; min-width:0; }
  .viewer header .sp { display:none; }
  .viewer header .btn { flex:1; justify-content:center; white-space:normal; }
}
@media (max-width:480px) {
  .verdict { grid-template-columns:1fr; justify-items:start; }
}
@media (max-width:400px) {
  .confirm dl { grid-template-columns:1fr; } .confirm dt { margin-top:4px; }
}
/* Focus mode on a short phone: "Waiting on you" is one line (the points are in the chat too). */
@media (max-width:980px) and (max-height:760px) {
  .yourturn { flex-direction:row; max-height:none; padding:6px 12px; }
  .yourturn span { display:none; }
}

/* Focus mode: what's waiting for Bryan, on the stage instead of leaving the meeting. */
.fwaiting { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:12px; padding-bottom:16px; }
.ftalk button.waiting { justify-content:flex-start; margin:0 12px 8px; min-height:44px; padding:6px 14px; background:var(--gold-soft); border-radius:var(--r-card); cursor:pointer; font:600 13px var(--font-ui); flex:none; }
.ftalk button.waiting .go { margin-left:auto; font-size:16px; }
.fwaiting .yourturn { flex:none; flex-direction:column; max-height:none; margin:0; overflow:visible; }
.yq { display:flex; flex-direction:column; gap:8px; }
.yq + .yq, span + .yq { margin-top:8px; }
.yq p { margin:0; overflow-wrap:anywhere; }
.yq .acts { display:flex; gap:8px; flex-wrap:wrap; }
.dec-list { list-style:none; margin:8px 0 0; padding:0; }
.dec-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:10px 0; border-top:1px solid var(--line); font-size:14.5px; }
.dec-list .dec-what { min-width:0; overflow-wrap:anywhere; }
.dec-list .dec-who { font:600 12px var(--font-ui); color:var(--ink-2); padding:2px 8px; border-radius:999px; background:var(--sunk); align-self:start; }
.dec-list small { grid-column:1/-1; color:var(--muted); overflow-wrap:anywhere; }
.dec-all { display:inline-block; margin-top:8px; font-size:14px; }
.dec-q { padding:12px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.dec-q p { margin:0; overflow-wrap:anywhere; }
.dec-q .acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.msg-tab { display:flex; flex-direction:column; gap:14px; }
.msg-text { white-space:pre-wrap; overflow-wrap:anywhere; padding:10px 12px; border-radius:10px; background:var(--sunk); border:1px solid var(--line); color:var(--ink); font-size:14px; }
.dec-fix { margin-top:4px; font-size:13px; }
.dec-fix summary { cursor:pointer; color:var(--muted); }
.dec-fix .btn { margin-top:6px; }
@media (max-width: 640px) {
  .dec-list li { grid-template-columns:minmax(0,1fr); }
  .dec-list .dec-who { justify-self:start; }
  .dec-q .acts .btn, .dec-fix summary { min-height:44px; }
  .dec-all { min-height:44px; line-height:44px; }
}
.decide { display:inline-flex; align-items:center; margin-left:8px; padding:3px 10px; border-radius:999px; border:1px solid var(--gold-line); background:var(--gold-soft); color:var(--gold); font:600 13px var(--font-ui); cursor:pointer; }

/* A card drawn where it applies: under the policy or inside the initiative it would change. */
.incard { margin:10px 0 0; }
.icard .incard { margin:0 20px 10px; }
@media (max-width:860px) { .icard .incard { margin:0 16px 10px; } }

/* Board room: urgent concerns, above the tiles. */
.urgent { display:flex; flex-direction:column; gap:8px; margin:0 0 16px; }
.urow { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-card); background:var(--danger-soft); border:1px solid var(--danger); flex-wrap:wrap; }
.urow .who { font:700 12px var(--font-mono); letter-spacing:.1em; color:var(--danger); padding:3px 8px; border-radius:8px; border:1px solid var(--danger); }
.urow .what { flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.urow .what .d { color:var(--ink-2); font-size:13px; overflow-wrap:anywhere; }
.urow .acts { display:flex; gap:8px; flex-wrap:wrap; }
/* A paused allowance is the budget working, not an alarm: amber, in each theme's own warn. */
.urow.wait { background:var(--warn-soft); border-color:var(--warn); }
.urow.wait .who { color:var(--warn); border-color:var(--warn); }
.need .cline { display:block; }
.btn kbd.key { font:600 12px var(--font-mono); padding:1px 5px; border-radius:5px; border:1px solid currentColor; opacity:.7; }
@media (max-width:860px) { .btn kbd.key { display:none; } }

/* ---- Money (docs/mockups/budget.html): five parts in each theme's own colours ---------- */
/* Spent is the theme's primary, Committed a tint of it, Available its green. Committed is a
   plain colour per theme, not the accent, so the parts stay apart: theme_colours_test.exs
   measures them. Midnight keeps its cyan. */
[data-theme="midnight"][data-mode="light"] { --seg-committed:#0284c7; }
[data-theme="midnight"][data-mode="dark"] { --seg-committed:#22d3ee; }
[data-theme="deepsea"][data-mode="light"] { --seg-committed:#7cb6c6; }
[data-theme="deepsea"][data-mode="dark"] { --seg-committed:#7bb8c8; }
[data-theme="beacon"][data-mode="light"] { --seg-committed:#f8c09e; }
[data-theme="beacon"][data-mode="dark"] { --seg-committed:#834e39; }
[data-theme="signal"][data-mode="light"] { --seg-committed:#92abf2; }
[data-theme="signal"][data-mode="dark"] { --seg-committed:#8cacf2; }
[data-theme="slate"][data-mode="light"] { --seg-committed:#f2b09f; }
[data-theme="slate"][data-mode="dark"] { --seg-committed:#7a4038; }
[data-theme="field"][data-mode="light"] { --seg-committed:#d6a690; }
[data-theme="field"][data-mode="dark"] { --seg-committed:#84513a; }
[data-theme="ledger"][data-mode="light"] { --seg-committed:#8e98ab; }
[data-theme="ledger"][data-mode="dark"] { --seg-committed:#546789; }
[data-theme="onyx"][data-mode="light"] { --seg-committed:#81baa4; }
[data-theme="onyx"][data-mode="dark"] { --seg-committed:#1e7a56; }
[data-theme="claret"][data-mode="light"] { --seg-committed:#c68c96; }
[data-theme="claret"][data-mode="dark"] { --seg-committed:#e0949f; }
[data-theme="dusk"][data-mode="light"] { --seg-committed:#b6a6ce; }
[data-theme="dusk"][data-mode="dark"] { --seg-committed:#6f6286; }
[data-theme="cobenian"][data-mode="light"] { --seg-committed:#ea8a4c; }
[data-theme="cobenian"][data-mode="dark"] { --seg-committed:#b4663a; }
:root {
  --seg-spent:var(--pri); --seg-free:var(--good);
  --seg-alloc:color-mix(in srgb, var(--pri-text) 45%, transparent);
  --seg-reserve:color-mix(in srgb, var(--gold) 55%, transparent);
}
.moneybar .k, .moneygrid .k, .tier .k { font:500 12px var(--font-ui); color:var(--muted); }
.mb-head { display:flex; align-items:flex-end; gap:6px 14px; flex-wrap:wrap; }
.mb-head .big { font:700 38px/1.05 var(--font-ui); letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--good); }
.mb-head .sp { flex:1; }
.mb-head .capbox { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.capv { font:700 24px var(--font-ui); font-variant-numeric:tabular-nums; }
.neg { color:var(--danger) !important; }
.money .chip, .moneybar .chip { white-space:normal; }
.mbar { position:relative; display:flex; height:22px; margin:26px 0 8px; gap:2px; }
.mbar > i { display:block; height:100%; min-width:3px; }
.mbar > i:first-child { border-radius:8px 0 0 8px; } .mbar > i:last-of-type { border-radius:0 8px 8px 0; }
.mbar .seg-spent, .moneybar .sw.seg-spent, .minibar .seg-spent { background:var(--seg-spent); }
.mbar .seg-committed, .moneybar .sw.seg-committed, .minibar .seg-committed { background:var(--seg-committed); }
.mbar .seg-alloc, .moneybar .sw.seg-alloc, .minibar .seg-alloc { background:repeating-linear-gradient(135deg, var(--seg-alloc) 0 4px, transparent 4px 8px), var(--pri-soft); }
.mbar .seg-free, .moneybar .sw.seg-free, .minibar .seg-free { background:var(--seg-free); }
.mbar .seg-reserve, .moneybar .sw.seg-reserve, .minibar .seg-reserve { background:repeating-linear-gradient(45deg, var(--seg-reserve) 0 4px, transparent 4px 8px), var(--gold-soft); }
.mbar .tick { position:absolute; top:-7px; bottom:-7px; width:2px; background:var(--ink); border-radius:2px; }
.mbar .tick span { position:absolute; top:-18px; left:50%; transform:translateX(-50%); white-space:nowrap; font:600 12px var(--font-mono); color:var(--ink-2); }
/* Scoped: the theme picker has its own .sw (a strip of four colours). */
.moneybar .sw { width:12px; height:12px; border-radius:3px; flex:none; display:inline-block; border:0; }
.moneybar .mlegend { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-top:14px; }
.moneybar .mlegend .lab { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); font-weight:600; }
.moneybar .mlegend .amt { font:700 20px var(--font-ui); font-variant-numeric:tabular-nums; margin-top:2px; }
.moneybar .mlegend .amt.good { color:var(--good); }
.moneybar .mlegend .sub { font:12px/1.35 var(--font-ui); color:var(--muted); }
.est { font:600 12px var(--font-mono); letter-spacing:.08em; color:var(--warn); border:1px solid var(--gold-line); border-radius:4px; padding:0 4px; margin-left:4px; }
details.breakdown { margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
details.breakdown summary { cursor:pointer; font-weight:600; color:var(--pri-text); font-size:13px; min-height:32px; display:flex; align-items:center; }
.bd { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:10px; }
.bd .rows { margin:0; font-size:13px; }
.bd .rows > div { display:flex; gap:10px; padding:3px 0; }
.bd .rows dt { color:var(--ink-2); flex:1; min-width:0; overflow-wrap:anywhere; }
.bd .rows dd { margin:0; font-variant-numeric:tabular-nums; font-weight:600; }
.bd .rows .tot { border-top:1px solid var(--line); margin-top:4px; padding-top:6px; }
.bd .rows .tot dt, .bd .rows .tot dd { font-weight:700; color:var(--ink); }
.moneybar .foot { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--muted); margin-top:12px; }
.moneybar .foot b { color:var(--ink-2); }
.moneygrid { margin:16px 0; }
.countdown { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.countdown .unit { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:8px 12px; min-width:70px; text-align:center; }
.countdown .unit b { display:block; font:700 24px/1.1 var(--font-ui); font-variant-numeric:tabular-nums; }
.countdown .unit span { font:500 12px var(--font-ui); color:var(--muted);  }
.timebar { height:8px; border-radius:999px; background:var(--meter-track); margin:14px 0 6px; position:relative; overflow:hidden; }
.timebar i { position:absolute; inset:0 auto 0 0; background:var(--muted); opacity:.55; }
.mtrack { position:relative; height:8px; border-radius:999px; background:var(--meter-track); margin-top:4px; overflow:hidden; }
.mtrack.big { height:12px; margin:12px 0 8px; }
.mtrack > i { position:absolute; inset:0 auto 0 0; border-radius:999px; background:var(--seg-spent); }
.mtrack > i.held { background:var(--seg-committed); opacity:.55; }
.mtrack > i.hot { background:var(--warn); }
/* The forecast means something: green inside the cap, red over it. Never the theme's primary. */
.mtrack > i.within { background:var(--good); }
.mtrack > i.over { background:var(--danger); }
.irow { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) auto; gap:8px 16px; align-items:center; padding:12px 0; border-top:1px solid var(--line); }
.irow .t { font-weight:600; font-size:15px; overflow-wrap:anywhere; }
.irow .t small { display:block; font-weight:500; color:var(--muted); font-size:12px; }
.irow .n { font-size:13px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.irow .n small { display:block; color:var(--muted); }
.tier { display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,1fr); gap:6px 16px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.tier .name { font:700 13px var(--font-mono); }
.tier .name small { display:block; font:500 12px var(--font-ui); color:var(--muted); }
.gauge .gl { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); }
.gauge .gl b { color:var(--ink); font-variant-numeric:tabular-nums; }
.minibar { display:flex; height:7px; gap:2px; margin:8px 0 4px; border-radius:4px; overflow:hidden; }
.minibar i { display:block; height:100%; min-width:2px; }
@media (max-width:860px) {
  .moneybar .mlegend { grid-template-columns:minmax(0,1fr); gap:0; }
  .moneybar .mlegend > div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:2px 10px; padding:7px 0; border-top:1px solid var(--line); }
  .moneybar .mlegend > div:first-child { border-top:0; }
  .moneybar .mlegend .amt { font-size:16px; margin:0; }
  .moneybar .mlegend .sub { grid-column:1 / -1; }
  .mb-head .capbox { text-align:left; align-items:flex-start; }
  .bd { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px) {
  .irow { grid-template-columns:minmax(0,1fr) auto; } .irow .ibar { grid-column:1 / -1; grid-row:2; }
  .tier { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .tier .name { grid-column:1 / -1; }
}

/* "Verify it's you" on a card, and the note when Bryan is back. */
.confirm .verify { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 10px; }
.confirm .verify .muted { flex:1 1 220px; font-size:13px; }
.confirm .ok { color:var(--good); font-weight:600; margin:6px 0 10px; }
.verify-here { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 10px; }
.verify-here .muted { flex:1 1 220px; font-size:13px; }
/* Where the month's money goes (specs/operating.md 13.1): the money bar with no time marker above it. */
.moneybar.lines .mbar { margin:14px 0 8px; }
.moneybar.lines .irow .t { display:flex; align-items:center; gap:8px; font-size:14px; }
.moneybar.lines .irow { padding:8px 0; }
.earned .rows dd { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; }
.earned .bd { display:block; }
.earned .chip { min-height:0; padding:2px 9px; }
.went .bd { margin-top:4px; } .went .rows .k .more { margin-left:8px; text-transform:none; letter-spacing:0; }

/* From the 2026-11-03 walk-through. */
/* The wordmark takes the rail's colour; on a phone it sits in the light top bar instead. */
@media (max-width:860px) { .topbar .mark { color:var(--ink); } }
/* Charts draw their labels in a 640-wide box: on a phone keep them readable and let the
   chart scroll sideways rather than shrink the text to a few pixels. */
@media (max-width:640px) {
  /* Line charts fit the page, with larger labels (they are drawn in a 640-wide box). */
  .chartwrap > svg { overflow:visible; }
  .pchart text, .ex-chart text { font-size:22px; }
  .ex-money .mlegend { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
  .ex-money .mlegend > div { display:block; border-top:0; padding:0; }
  .ex-money .big { font-size:34px; }
  .kpi .v { font-size:24px; }
}
.meter .link { margin-left:-4px; }

/* Board pack: what the staff did (docs/mockups/staff-notes.html). */
.staffnotes { margin:12px 0; padding-top:12px; border-top:1px solid var(--line); font-size:13px; }
.staffnotes .shead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.staffnotes .tally { font-size:13px; margin:4px 0 6px; }
.staffnotes .sgroup { margin-top:10px; }
.staffnotes .sgroup .k { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.staffnotes summary.k { cursor:pointer; list-style:none; min-height:28px; } .staffnotes summary.k::-webkit-details-marker { display:none; }
.staffnotes summary.k::after { content:"›"; margin-left:4px; transition:transform .15s; } .staffnotes details[open] summary.k::after { transform:rotate(90deg); }
.staffnotes > .link { display:inline-block; margin-top:8px; }
.staffnotes .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.staffnotes .d-plan { background:var(--pri-text); } .staffnotes .d-done { background:var(--good); }
.staffnotes .d-fix { background:var(--danger); } .staffnotes .d-you { background:var(--gold); }
.staffnotes .sitem { display:block; padding:5px 0; border-top:1px solid var(--line); }
.staffnotes .sgroup .k + .sitem, .staffnotes summary + .sitem { border-top:0; }
.staffnotes .t { color:var(--ink); font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
.staffnotes a.t:hover { color:var(--acc-text); }
.staffnotes .pv { font:600 12px var(--font-mono); color:var(--pri-text); background:var(--pri-soft); padding:1px 6px; border-radius:6px; }
.staffnotes .why { color:var(--ink-2); font-size:13px; }
.staffnotes .why.gold { color:var(--gold); }

/* Money: raising one model limit for today (2026-11-04). */
.dayraise { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.dayraise h3 { margin:0 0 4px; font:var(--head-weight) 15px var(--font-head); }
.dayraise .inline, .recordearned .inline { flex-wrap:wrap; margin-top:6px; }
.dayraise input[name=reason], .recordearned input[name=what] { flex:1 1 200px; min-width:0; }
.tier .raised { margin:4px 0 0; font-size:12px; }

/* ---- type scale and calm surfaces (2026-11-04 design review) ------------------------------ */
/* Seven sizes: Display 38/34, Title 30/24, Heading 20/19, Card title 16, Body 15, Small 13,
   Label 12. Labels are sentence case in the UI font. Shadows are for things that float. */
:root { --t-display:38px; --t-title:30px; --t-heading:20px; --t-card:16px; --t-body:15px; --t-small:13px; --t-label:12px; }
@media (max-width:640px) { :root { --t-display:34px; --t-title:24px; --t-heading:19px; } }
[data-theme][data-mode] { --shadow:none; --blur:none; }
.phead .pic { background:var(--pri-soft); color:var(--pri-text); box-shadow:none; }
.inner .t, .confirm .t { font:600 var(--t-card) var(--font-ui); color:var(--ink); }
/* A card drawn inside a policy or an initiative loses its frame: a hairline is enough. */
.pcard .inner, .icard .inner { background:none; border:0; border-radius:0; border-top:1px solid var(--line); padding:12px 0 0; margin:10px 0 0; box-shadow:none; }
.urow { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--danger); }
.urow.wait { border-left-color:var(--warn); }
.diff .a, .diff .r, .diff .c { color:var(--ink-2); text-decoration:none; opacity:1; }
.diff .a::before { content:"+ "; } .diff .r::before { content:"\2212  "; }
.checks { grid-template-columns:minmax(0,1fr); }
.pol:has(> .pcard:only-child) { grid-template-columns:minmax(0,1fr); }
.legend2 span { background:none; border:0; padding:0; }
.ftype { background:var(--sunk) !important; color:var(--muted); }
[data-mode="dark"] iframe.report-frame { filter:brightness(.86); }
/* Concerns: one list, the most serious first. */
.clist { display:flex; flex-direction:column; gap:10px; }
.crow { padding:14px 16px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.crow .head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.crow .role-tag { font:600 12px var(--font-ui); color:var(--muted); }
.crow .acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.pbar { flex:none; width:96px; font:700 13px var(--font-ui); }
.pbar .mtrack { display:block; margin-top:4px; }
.ifoot details[open] { flex-basis:100%; }
.card.incard { padding:14px 16px; }
.card.incard .inner, .pcard .incard, .pcard .incard .inner { background:none; border:0; box-shadow:none; padding:0; margin:0; }
.pcard .incard { border-top:1px solid var(--line); padding-top:12px; margin-top:10px; }
details.actions { position:relative; }
details.actions summary { list-style:none; cursor:pointer; } details.actions summary::-webkit-details-marker { display:none; }
details.actions .menu { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:10px; }
@media (max-width:640px) {
  .rtabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .rtab { flex:none; }
  .stats { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px; margin-bottom:12px; }
  .stat { padding:8px 10px; }
  .countdown { flex-wrap:nowrap; } .countdown .unit { min-width:0; flex:1; padding:6px 8px; } .countdown .unit b { font-size:20px; }
  .lib:has(.viewer.chosen) .viewer { order:-1; }
}

/* Lists for the company and for requests (ListLive). */
.numbers.two-up { grid-template-columns:repeat(2,minmax(0,1fr)); }
.list-steps .st { cursor:default; }
.list-steps .st:hover { border-color:var(--line); box-shadow:none; }
.list-steps .st { grid-template-columns:34px minmax(0,1fr) 90px 120px; }
.list-steps .st.nest { grid-template-columns:minmax(34px,auto) minmax(0,1fr) 90px 120px; }
.list-steps .st .evid.muted { color:var(--muted); }
.lstrip { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; color:var(--muted); text-decoration:none; }
.lstrip .ls-done { color:var(--good); }
.lstrip .ls-failed { color:var(--danger); }
.lstrip .ls-needs_you { color:var(--gold); }
.lstrip .ls-running { color:var(--acc-text); }
.direction-form { margin-bottom:12px; }
@media (max-width:1100px) { .list-steps .st { grid-template-columns:34px minmax(0,1fr); } .list-steps .st.nest { grid-template-columns:minmax(34px,auto) minmax(0,1fr); } }
@media (max-width:640px) { .numbers.two-up { grid-template-columns:1fr; } }
/* The tap-area margins on links pull a wrapped link up over the line above it. */
.allow a.link { margin-top:4px; margin-bottom:0; padding-top:4px; padding-bottom:4px; }

/* Ways of working */
.ways-count { grid-template-columns:repeat(4, minmax(0,1fr)); }
.way { border-top:1px solid var(--line); padding:12px 0; }
.way > summary { cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-height:44px; }
.way > summary .way-meta { flex-basis:100%; }
.way p { margin:8px 0; }
.way-name { font:600 15px var(--font-ui); color:var(--ink); overflow-wrap:anywhere; }
.way-meta { font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.way-cap { font:600 18px var(--font-head); color:var(--ink); margin:4px 0 2px; }
.way-steps { margin:8px 0 12px; padding-left:22px; }
.way-steps li { padding:3px 0; overflow-wrap:anywhere; }
.way-steps li.nest { margin-left:14px; }
.way-old { display:flex; gap:10px; padding:4px 0; font-size:13px; }
.way-row { border-top:1px solid var(--line); padding:12px 0; }
.way-main { min-width:0; }
.way-main p { margin:6px 0; }
.ways-loading .way-bar { height:44px; margin-top:10px; border-radius:var(--r); background:var(--surface-2); }
@media (max-width:1100px) { .ways-count { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .ways-count { grid-template-columns:minmax(0,1fr); } }
/* The rail's labels are one word wide, and this one is three. */
@media (min-width:861px) { .navlist a[href="/ways-of-working"] .label { white-space:normal; text-align:center; line-height:1.15; width:68px; } }

/* Operations (docs/mockups/operations.html). State colours are good, warn and danger, and every
   state also has a symbol or word (specs/operating.md 12.14). */
.ops { --op-sunk:color-mix(in srgb, var(--ink) 7%, transparent); }
.ops .card { margin-bottom:14px; }
.op-note { font-size:13.5px; margin:-4px 0 14px; max-width:78ch; }
.op-search { position:relative; max-width:380px; margin-bottom:12px; }
.op-search input { width:100%; font:inherit; padding:9px 12px; min-height:42px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--surface); color:var(--ink); }
.op-found { position:absolute; z-index:6; top:calc(100% + 4px); left:0; right:0; display:grid; background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow-lg); overflow:hidden; }
.op-found p { margin:0; padding:10px 12px; }
.op-found a { display:block; padding:9px 12px; color:var(--ink); text-decoration:none; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.op-found a:first-child { border-top:0; }
.op-found a:hover, .op-found a:focus-visible { background:var(--op-sunk); }
.op-found b { display:block; font-weight:600; }
.op-found small { color:var(--muted); }
.op-scope { display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; font-size:14.5px; padding:9px 12px; margin-bottom:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow-wrap:anywhere; }
.op-scope a { color:var(--pri-text); }
.op-scope b { font-weight:600; color:var(--ink); }
.op-sep { color:var(--muted); }
.op-tabs { display:flex; width:fit-content; max-width:100%; gap:2px; background:var(--op-sunk); border-radius:var(--r); padding:3px; margin-bottom:14px; overflow-x:auto; }
.op-tabs a { flex:1 0 auto; min-width:96px; text-align:center; padding:8px 14px; font-size:14.5px; font-weight:500; border-radius:calc(var(--r) - 3px); color:var(--muted); text-decoration:none; white-space:nowrap; }
.op-tabs a[aria-selected="true"] { background:var(--surface-2); color:var(--ink); font-weight:600; }
.op-answer { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; padding:13px 15px; margin-bottom:14px; border-radius:var(--r); font-weight:600; overflow-wrap:anywhere; }
.op-answer > span { min-width:0; flex:1 1 240px; }
.op-go { flex:none; font:600 14px var(--font-ui); padding:8px 12px; min-height:40px; display:inline-flex; align-items:center; border-radius:var(--r); border:1px solid currentColor; color:inherit; text-decoration:none; }
.a-flow { background:var(--good-soft); color:var(--good); }
.a-hot { background:var(--danger-soft); color:var(--danger); }
.a-held, .a-busy { background:var(--warn-soft); color:var(--warn); }
.a-wait { background:var(--pri-soft); color:var(--pri-text); }
.a-quiet { background:var(--op-sunk); color:var(--muted); }
.op-res { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:10px; margin-bottom:12px; }
.op-resc { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; display:flex; flex-direction:column; gap:6px; min-width:0; overflow-wrap:anywhere; }
.op-resc b { font-weight:600; font-size:14.5px; color:var(--ink); }
.op-resc small { color:var(--muted); font-size:13px; }
.op-resc.hot { border:2px solid var(--danger); padding:9px 11px; }
.op-resc.wait small { color:var(--pri-text); font-weight:600; }
.op-meter { height:10px; border-radius:5px; background:var(--op-sunk); overflow:hidden; }
.op-meter i { display:block; height:100%; background:var(--good); }
.op-resc.warn .op-meter i { background:var(--warn); }
.op-resc.hot .op-meter i { background:var(--danger); }
.op-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.op-chip { font:500 13.5px var(--font-ui); padding:7px 12px; min-height:36px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer; }
.op-chip[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.op-scroll { overflow-x:auto; }
.op-table { width:100%; font-size:14.5px; border-collapse:collapse; }
.op-table th { font:600 12px var(--font-ui); color:var(--muted); padding:6px 8px; text-align:left; white-space:nowrap; }
.op-table td { padding:9px 8px; border-top:1px solid var(--line); vertical-align:middle; overflow-wrap:anywhere; }
.op-table td a { color:var(--ink); font-weight:500; text-decoration:none; }
.op-table td small { display:block; color:var(--muted); font-size:12.5px; }
.op-table tr.c { cursor:pointer; }
.op-table tr.c:hover td { background:var(--op-sunk); }
.op-table .op-n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.op-table button.link { all:unset; cursor:pointer; color:var(--pri-text); font-weight:500; text-decoration:underline; }
.op-state { font:600 12px var(--font-ui); padding:2px 8px; border-radius:999px; align-self:flex-start; white-space:nowrap; display:inline-block; }
.s-flow { background:var(--good-soft); color:var(--good); }
.s-busy, .s-held { background:var(--warn-soft); color:var(--warn); }
.s-hot { background:var(--danger-soft); color:var(--danger); }
.s-wait { background:var(--pri-soft); color:var(--pri-text); }
.s-idle { background:var(--op-sunk); color:var(--muted); }
.op-map { display:flex; align-items:stretch; min-width:0; }
.op-map.op-inner { flex-wrap:wrap; gap:10px; }
.op-map.op-inner .op-step { flex:1 1 170px; max-width:280px; }
.op-step { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface-2); color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
a.op-step:hover { border-color:var(--ink); }
.op-step h3 { margin:0; font:600 14.5px/1.25 var(--font-ui); color:var(--ink); }
.op-step.on-path-hot { border:2px solid var(--danger); padding:9px; }
.op-step.on-path-wait { border:2px solid var(--pri-text); padding:9px; }
.op-step.on-path-held { border:2px solid var(--warn); padding:9px; }
.op-tank { position:relative; height:84px; background:var(--op-sunk); border-radius:6px; overflow:hidden; }
.op-tank i { position:absolute; left:0; right:0; bottom:0; display:block; }
.op-tank b { position:absolute; inset:auto 0 6px 0; text-align:center; font:600 13.5px var(--font-ui); color:var(--ink); }
.f-flow { background:var(--good); opacity:.45; }
.f-busy, .f-held { background:var(--warn); opacity:.45; }
.f-hot { background:var(--danger); opacity:.5; }
.f-wait { background:var(--pri); opacity:.5; }
.f-idle { background:var(--muted); opacity:.4; }
.op-lim { font:500 12px var(--font-ui); color:var(--muted); }
.op-lim.over { color:var(--danger); font-weight:600; }
.op-loop { font-size:12.5px; color:var(--warn); font-weight:600; }
.op-press { font-size:12.5px; color:var(--warn); font-weight:600; overflow-wrap:anywhere; }
.op-table td small.op-press { color:var(--warn); }
.op-step dl { margin:0; display:grid; grid-template-columns:auto auto; justify-content:space-between; gap:1px 6px; font-size:12.5px; color:var(--muted); }
.op-step dd { margin:0; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.op-more { font-size:12.5px; color:var(--pri-text); margin-top:auto; }
.op-conn { flex:0 0 64px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11.5px; color:var(--muted); text-align:center; line-height:1.2; }
.op-conn.none { flex-basis:12px; }
.op-conn .ar { font-size:20px; line-height:1; }
.op-conn.push { color:var(--danger); font-weight:600; }
.op-map.many { flex-wrap:wrap; row-gap:8px; }
.op-map.many .op-step { flex:1 1 130px; padding:8px; }
.op-map.many .op-step[class*="on-path"] { padding:7px; }
.op-map.many .op-conn { flex-basis:26px; }
.op-map.many .op-conn.push { flex-basis:52px; }
.op-tasks { display:grid; }
.op-task { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:10px 0; min-height:44px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.op-task:first-child { border-top:0; }
.op-task small { display:block; color:var(--muted); font-size:13px; }
.op-open { font-size:13px; color:var(--pri-text); white-space:nowrap; }
.op-week p { margin:0 0 10px; }
.op-stale { color:var(--warn); font-weight:600; }
.op-heat { display:grid; gap:4px; }
.op-hr { display:grid; grid-template-columns:minmax(96px,190px) minmax(0,1fr); gap:6px; align-items:center; font-size:13.5px; }
.op-hr a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); text-decoration:none; }
.op-hr a:hover { text-decoration:underline; }
.op-cells { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.op-cells .dh { text-align:center; color:var(--muted); font-size:12px; }
.op-cells i, .op-key i { height:26px; border-radius:4px; display:grid; place-items:center; font:600 12px var(--font-ui); font-style:normal; }
.h-none { background:var(--op-sunk); }
.h-fine { background:var(--good-soft); color:var(--good); }
.h-busy { background:var(--warn-soft); color:var(--warn); }
.h-held { background:var(--warn); color:var(--bg); }
.h-wait { background:var(--pri-soft); color:var(--pri-text); }
.h-hot { background:var(--danger); color:var(--bg); }
.op-key { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:13px; color:var(--muted); }
.op-key span { display:inline-flex; align-items:center; gap:5px; }
.op-key i { width:18px; height:18px; font-size:11px; }
.op-more-rows { margin-top:8px !important; }
.op-loading .op-bar { height:44px; margin-top:10px; border-radius:var(--r); background:var(--op-sunk); }
.navgroup { display:flex; flex-direction:column; gap:6px; align-items:center; padding:8px 6px 6px; border-radius:16px; background:color-mix(in srgb, var(--rail-on) 40%, transparent); box-shadow:inset 0 0 0 1px var(--line); }
.navgroup + .navgroup { margin-top:8px; }
.navh { font:700 10.5px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--rail-ink); text-align:center; padding:0 0 2px; }
@media (min-width:861px) and (max-height:820px) { .navlist { flex:0 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none; } }
@media (max-width:860px) {
  .tabbar { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .tabbar a span { font-size:11.5px; white-space:nowrap; letter-spacing:-.01em; }
  .navh { text-align:left; padding:2px 12px 4px; font-size:11.5px; }
  .navgroup { align-items:stretch; padding:10px 6px 6px; }
  .op-map { flex-direction:column; }
  .op-step, .op-map.many .op-step, .op-map.op-inner .op-step { flex:none; max-width:none; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:10px; row-gap:3px; align-items:center; padding:10px; }
  .op-step .op-tank { grid-row:1 / span 5; height:100%; min-height:64px; }
  .op-step .op-tank b { display:none; }
  .op-step > :not(.op-tank) { grid-column:2; }
  .op-map.op-inner .op-step { grid-template-columns:minmax(0,1fr); }
  .op-map.op-inner .op-step > * { grid-column:1; }
  .op-step .op-state { justify-self:start; }
  .op-step dl { grid-template-rows:auto auto; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); grid-auto-flow:column; justify-content:stretch; gap:0 8px; }
  .op-step dd { text-align:left; white-space:nowrap; }
  .op-conn, .op-map.many .op-conn { flex:none; flex-direction:row; gap:6px; padding:3px 0; }
  .op-conn.none { padding:2px 0; }
  .op-conn .ar { transform:rotate(90deg); }
  .op-table .hp { display:none; }
}
/* Operations: Money, Measures and Schedule. Kinds of worker and money have their own colours, never the state ones (12.14). */
.ops { --u-code:var(--muted); --u-cheap:var(--acc); --u-strong:var(--pri2); --u-you:color-mix(in srgb,var(--pri) 55%,var(--ink)); }
.op-small { font-size:13px; margin:6px 0 0; }
.op-showmore { all:unset; display:block; margin-top:10px; cursor:pointer; color:var(--pri-text); font-weight:500; text-decoration:underline; font-size:14px; }
.op-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px; margin-bottom:14px; }
.op-tile, .op-measure { display:flex; flex-direction:column; gap:3px; min-width:0; overflow-wrap:anywhere; }
.op-tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px; }
.op-tile small, .op-measure small { color:var(--muted); font-size:13px; }
.op-tile b, .op-measure b { font:700 24px/1.2 var(--font-ui); color:var(--ink); font-variant-numeric:tabular-nums; }
.op-tile span, .op-measure > span { color:var(--muted); font-size:13px; }
.op-mrows { display:grid; margin-top:8px; }
.op-mrow { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 76px 14px; gap:6px 12px; align-items:center; padding:9px 0; min-height:44px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.op-mrow:first-child { border-top:0; }
a.op-mrow:hover { background:var(--op-sunk); }
.op-mrow b { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.op-mname { min-width:0; overflow-wrap:anywhere; font-weight:500; }
.op-mname small { display:block; color:var(--muted); font-size:12.5px; font-weight:400; }
.op-mtrack { display:block; height:10px; border-radius:5px; background:var(--op-sunk); overflow:hidden; }
.op-mtrack i { display:block; height:100%; border-radius:0 4px 4px 0; background:var(--pri); }
.op-split { display:flex; gap:2px; height:30px; margin:10px 0; }
.op-split i { display:block; flex-basis:0; min-width:3px; }
.op-split i:first-child { border-radius:6px 0 0 6px; } .op-split i:last-child { border-radius:0 6px 6px 0; }
.m-cheap { background:var(--acc); } .m-strong { background:var(--pri); } .m-voice { background:color-mix(in srgb,var(--acc) 50%,var(--ink)); }
.m-rework { background:repeating-linear-gradient(45deg,var(--ink-2) 0 3px,transparent 3px 6px),var(--op-sunk); }
.m-expenses { background:color-mix(in srgb,var(--muted) 45%,transparent); } .m-purchases { background:color-mix(in srgb,var(--ink) 70%,transparent); } .m-hosting { background:var(--muted); }
.op-key i.op-swatch { width:20px; height:0; border-radius:0; border-top:2px solid var(--pri); background:none; }
.op-key i.op-swatch.dash { border-top:2px dashed var(--muted); }
.op-pace { margin:6px 0 0; font-weight:600; color:var(--good); }
.op-pace.over { color:var(--warn); }
.op-plot { margin-top:10px; max-width:620px; }
.op-chart { display:block; width:100%; height:auto; }
.op-chart text { font:400 11px var(--font-ui); fill:var(--muted); font-variant-numeric:tabular-nums; }
.op-chart .op-grid { stroke:var(--line); stroke-width:1; }
.op-chart .op-base { stroke:var(--line-2); stroke-width:1; }
.op-chart .op-line { fill:none; stroke:var(--pri); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.op-chart .op-guide { fill:none; stroke:var(--muted); stroke-width:1.5; stroke-dasharray:5 4; }
.op-chart .op-end, .op-chart .op-mark rect:not(.op-hit), .op-chart .op-mark circle { fill:var(--pri); }
.op-chart .op-hit { fill:transparent; }
.op-chart .op-mark:hover .op-hit { fill:var(--op-sunk); }
.op-pairs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.op-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px; min-width:0; }
.op-measure + .op-measure { border-left:1px solid var(--line); padding-left:14px; }
.op-target { font-weight:600; }
.op-measure > .t-ok { color:var(--good); } .op-measure > .t-off { color:var(--warn); }
.op-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.op-chartcard { min-width:0; margin-bottom:0 !important; }
.op-chartcard .op-chart { margin-top:8px; }
.op-nohistory { margin:10px 0 0; padding:18px 14px; border-radius:var(--r); background:var(--op-sunk); color:var(--muted); font-size:14px; text-align:center; }
.op-daybar { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-start; justify-content:space-between; }
.op-daybar form { margin-bottom:12px; }
.op-daybar input { font:inherit; min-height:36px; padding:5px 10px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--surface); color:var(--ink); color-scheme:inherit; }
a.op-chip { display:inline-flex; align-items:center; text-decoration:none; }
.op-dayrow { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; align-items:center; margin-bottom:6px; }
.op-dayrow b { font-weight:600; font-size:14px; }
.op-day { position:relative; height:24px; border-radius:5px; background:var(--op-sunk); overflow:hidden; }
.op-day i { position:absolute; top:0; bottom:0; display:block; }
.op-day i.op-daynow { width:2px; background:var(--danger); }
.u-code { background:var(--u-code); } .u-cheap { background:var(--u-cheap); } .u-strong { background:var(--u-strong); } .u-you { background:var(--u-you); }
.u-text-code { color:var(--u-code); } .u-text-cheap { color:var(--u-cheap); } .u-text-strong { color:var(--u-strong); } .u-text-you { color:var(--u-you); }
.op-dayticks div { display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); }
.op-agenda { display:none; }
.op-ag { display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:14.5px; }
.op-ag time { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.op-ag small { display:block; color:var(--muted); font-size:13px; }
.op-ag b { font-weight:600; }
.op-ag.now { background:var(--pri-soft); margin-inline:-8px; padding-inline:8px; border-radius:6px; border-top:0; font-weight:600; margin-bottom:2px; }
.op-ag.now time { color:var(--ink); }
.op-clockcard { padding-top:10px; }
.op-clock { position:relative; min-width:820px; }
.op-hours { position:relative; height:22px; margin-left:150px; font-size:11.5px; color:var(--muted); }
.op-hours span { position:absolute; top:3px; transform:translateX(-50%); }
.op-hours span:first-child { transform:none; }
.op-lane { display:grid; grid-template-columns:150px minmax(0,1fr); border-top:1px solid var(--line); }
.op-lane > b { font-weight:600; font-size:13.5px; line-height:1.25; padding:9px 10px 9px 0; }
.op-lane > b small { display:block; font-weight:400; color:var(--muted); font-size:12px; }
.op-track { position:relative; min-height:58px; background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:25% 100%; }
.op-bar2 { position:absolute; top:7px; height:24px; display:flex; align-items:center; padding:0 8px; border-radius:4px; font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; border:1px solid currentColor; }
.op-bar2.maybe { border-style:dashed; }
.u-box-code { color:var(--u-code); background:color-mix(in srgb,var(--u-code) 14%,transparent); }
.u-box-cheap { color:var(--u-cheap); background:color-mix(in srgb,var(--u-cheap) 14%,transparent); }
.u-box-strong { color:var(--u-strong); background:color-mix(in srgb,var(--u-strong) 14%,transparent); }
.u-box-you { color:var(--u-you); background:color-mix(in srgb,var(--u-you) 14%,transparent); }
.op-pin { position:absolute; top:7px; height:24px; display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500; white-space:nowrap; }
.op-pin::before { content:""; flex:none; width:7px; height:24px; border-radius:3px; background:currentColor; }
.op-pin.left { flex-direction:row-reverse; }
.op-ran { position:absolute; left:0; right:0; bottom:6px; height:14px; }
.op-ran.only { top:50%; bottom:auto; height:24px; margin-top:-12px; }
.op-ran i { position:absolute; top:0; bottom:0; width:calc(100% / 24 - 2px); border-radius:2px; font:600 10px/14px var(--font-ui); text-align:center; font-style:normal; color:var(--bg); }
.op-ran i.failed { outline:2px solid var(--danger); }
.op-now { position:absolute; top:0; bottom:0; left:calc(150px + (100% - 150px) * var(--at) / 100); width:2px; background:var(--danger); pointer-events:none; }
.op-now span { position:absolute; top:0; left:5px; padding:1px 5px; border-radius:3px; background:var(--danger); color:var(--bg); font-size:11px; white-space:nowrap; }
.op-coming { display:grid; }
.op-cominga { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:10px 0; min-height:44px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.op-cominga:first-child { border-top:0; }
.op-cominga small { display:block; color:var(--muted); font-size:13px; }
.op-cominga time { color:var(--muted); font-size:13.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* On a phone each row is a small card, and its numbers name themselves (12.13). */
@media (max-width:640px) {
  .op-hr { grid-template-columns:minmax(84px,34%) minmax(0,1fr); }
  .op-table thead { display:none; }
  .op-table tbody, .op-table tr { display:block; }
  .op-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 14px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }
  .op-table tbody tr:first-child { border-top:0; }
  .op-table td { display:block; padding:0; border:0; }
  .op-table td:first-child { grid-column:1 / -1; }
  .op-table .hp { display:none; }
  .op-table tr.op-rest td:first-child { grid-column:1; }
  .op-table td[data-label]::before { content:attr(data-label) " "; color:var(--muted); font-size:12.5px; }
  .op-tabs { width:100%; }
  .op-tabs a { flex:1 1 0; min-width:0; padding:8px 4px; }
  .op-mrow { grid-template-columns:minmax(0,1fr) auto 12px; }
  .op-mtrack { grid-column:1 / -1; grid-row:2; }
  .op-pairs, .op-charts { grid-template-columns:minmax(0,1fr); }
  .op-compare tr { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .op-compare td.op-n { text-align:left; white-space:normal; }
  .op-compare td:nth-child(2) { grid-column:1 / -1; }
  .op-dayrow { grid-template-columns:minmax(0,1fr); gap:3px; }
  .op-dayticks b { display:none; }
  .op-clockcard { display:none; }
  .op-agenda { display:block; }
}
@media (max-width:360px) { .op-tabs a { font-size:13px; padding:8px 2px; } }
/* Six tabs can't share a phone's width, so they take two rows. */
@media (max-width:480px) { .op-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* An initiative's tabs: Overview, Steps and Operations (specs/operating.md 12.9). */
.in-tabs { display:flex; gap:4px; margin:0 0 14px; border-bottom:1px solid var(--line); overflow-x:auto; }
.in-tabs a { padding:9px 14px; font-size:14.5px; color:var(--muted); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; }
.in-tabs a[aria-selected="true"] { color:var(--ink); font-weight:600; border-color:var(--pri); }
.sl-level { margin:14px 0 0; padding-left:calc(var(--depth) * 18px); }
.sl-level small { display:block; color:var(--muted); font-size:13px; margin-bottom:6px; overflow-wrap:anywhere; }
.sl-list { display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.sl-list li { display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; }
.sl-next { color:var(--muted); }
.sl-step { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:7px 11px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); color:var(--ink); text-decoration:none; font-size:14.5px; overflow-wrap:anywhere; }
.sl-step:hover { border-color:var(--pri); }
.sl-step.on { background:var(--ink); border-color:var(--ink); color:var(--bg); font-weight:600; }
.sl-mark { color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.sl-step.on .sl-mark { color:inherit; }
.sl-more { font-weight:700; }
.sl-contract { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.sl-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.sl-head h3 { margin:0; font-size:16px; overflow-wrap:anywhere; }
.sl-contract dl { display:grid; grid-template-columns:130px minmax(0,1fr); gap:7px 12px; margin:12px 0; font-size:15px; }
.sl-contract dt { color:var(--muted); }
.sl-contract dd { margin:0; overflow-wrap:anywhere; }
.sl-contract ul { margin:0; padding-left:18px; }
.sl-ask { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
/* Where a task's time went (12.7). */
.time-row { padding:9px 0; border-top:1px solid var(--line); }
.time-head { display:flex; justify-content:space-between; gap:12px; overflow-wrap:anywhere; }
.time-head .muted { white-space:nowrap; font-size:13.5px; }
.time-bar { display:flex; height:8px; margin:6px 0 4px; border-radius:4px; background:var(--op-sunk); overflow:hidden; }
.time-bar .w { background:var(--muted); }
.time-bar .r { background:var(--pri); }
/* Company progress and what's stuck, in Today (12.10). */
.cprog { padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-card); }
.cprog p { margin:6px 0 0; }
.cprog-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; }
.cprog-head h3 { margin:0; font-size:15px; }
.cprog-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center; padding:9px 0; min-height:44px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.cprog-row:first-child { border-top:0; }
.cprog-row .t { font-weight:600; font-size:15px; overflow-wrap:anywhere; }
.cprog-row .d { grid-column:1 / -1; color:var(--muted); font-size:13.5px; overflow-wrap:anywhere; }
.cprog .op-answer { margin:8px 0 0; font-size:14.5px; }
.brief-parts { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; margin:10px 0; }
.brief-parts dt { font-weight:600; font-size:13.5px; margin-top:6px; }
.brief-parts dd { margin:0; overflow-wrap:anywhere; }
.home-link { margin:8px 0 0; font-size:14px; }
details.brief { display:block; }
.fwaiting .needlist { margin:-6px 0; }
/* Beside the meeting, Today is already on screen. On a phone this opens it when nothing waits. */
.ftalk button.waiting.calm { display:none; }
@media (max-width:980px) { .ftalk button.waiting.calm { display:flex; background:transparent; color:var(--muted); border-color:var(--line); } }
@media (max-width:640px) {
  .sl-level { padding-left:calc(var(--depth) * 10px); }
  .sl-contract dl { grid-template-columns:minmax(0,1fr); gap:2px; }
  .sl-contract dt { margin-top:8px; }
}

/* Watches and findings on Ways of working */
.way-quote { margin:8px 0; padding:8px 12px; border-left:3px solid var(--line-2); color:var(--muted); font-size:14px; overflow-wrap:anywhere; white-space:pre-line; }
.way-rate { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.way-rate .btn { background:transparent; color:var(--ink); border-color:var(--line-2); box-shadow:none; padding:6px 12px; }
.way-rate .btn.on { background:var(--rail-on); border-color:var(--pri-line); color:var(--pri-text); }

/* The results board (specs/operating.md 15.2), one result's page (12.18) and How far to trust this (12.10). */
.rb-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 14px; }
.rb-head h2 { margin-bottom:4px; }
.rb-links { display:inline-flex; gap:14px; font-size:13.5px; }
.rb-board { display:flex; gap:10px; overflow-x:auto; padding:8px 0 4px; scroll-snap-type:x proximity; }
.rb-col { flex:1 0 220px; max-width:320px; min-width:0; background:var(--op-sunk); border-radius:var(--r); padding:10px; scroll-snap-align:start; }
.rb-col h3 { margin:0 0 8px; display:flex; justify-content:space-between; gap:8px; font:600 13.5px var(--font-ui); color:var(--ink); overflow-wrap:anywhere; }
.rb-n { color:var(--muted); font-variant-numeric:tabular-nums; }
.rb-none { margin:0; font-size:13px; }
.rb-over, .rb-yours { margin:0 0 8px; font:600 13px var(--font-ui); }
.rb-over { color:var(--danger); }
.rb-yours { color:var(--pri-text); }
.rb-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px; margin-bottom:8px; min-width:0; overflow-wrap:anywhere; }
.rb-card:last-child { margin-bottom:0; }
.rb-title { display:block; font:600 14px var(--font-ui); color:var(--ink); text-decoration:none; }
.rb-title:hover { text-decoration:underline; }
.rb-sum { margin:4px 0 6px; font-size:13px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rb-meta { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:13px; }
.rb-new { color:var(--pri-text); font-weight:600; }
.rb-card .way-rate { margin-top:8px; }
.rb-card .way-rate .btn { padding:5px 10px; font-size:13px; }
@media (max-width:760px) {
  .rb-board { flex-direction:column; overflow-x:visible; }
  .rb-col { flex:none; max-width:none; }
  .rb-col.empty { display:none; }
}
.rp { max-width:760px; }
.rp h1 { margin:8px 0 8px; font:var(--head-weight) 22px var(--font-head); letter-spacing:var(--head-track); color:var(--ink); overflow-wrap:anywhere; }
.rp h2 { margin:18px 0 6px; }
.rp-head { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:13.5px; }
.rp-sum { margin:0; white-space:pre-line; overflow-wrap:anywhere; }
.rp-fields { margin:0; }
.rp-fields > div { padding:7px 0; border-top:1px solid var(--line); min-width:0; }
.rp-fields dt { font-size:13px; color:var(--muted); }
.rp-fields dd { margin:2px 0 0; color:var(--ink); overflow-wrap:anywhere; white-space:pre-line; }
.rp-links { display:flex; flex-wrap:wrap; gap:6px 16px; }
.trust { border-top:1px solid var(--line); margin-top:16px; padding-top:12px; }
.viewer .trust { margin:0; padding:12px 18px 16px; }
.trust h2 { margin:0 0 8px; font:var(--head-weight) 15px var(--font-head); letter-spacing:var(--head-track); color:var(--ink); }
.trust dl { margin:0; }
.trust-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 14px; padding:6px 0; font-size:13.5px; border-top:1px solid var(--line); }
.trust-row:first-child { border-top:0; }
.trust-row dt { color:var(--muted); }
.trust-row dd { margin:0; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.trust-row.t-good dd { color:var(--good); }
.trust-row.t-warn dd { color:var(--warn); }
/* The Improve tab (specs/operating.md 14.6). */
.imp-side { margin-bottom:6px; }
.imp-side > h2 { margin:18px 0 2px; font:var(--head-weight) 18px var(--font-head); letter-spacing:var(--head-track); color:var(--ink); }
.imp-side > p.muted { margin:0 0 10px; font-size:13.5px; }
.imp-card h3 { margin:0 0 6px; font:var(--head-weight) 15.5px var(--font-head); letter-spacing:var(--head-track); color:var(--ink); overflow-wrap:anywhere; }
.imp-card p { margin:6px 0; overflow-wrap:anywhere; }
.imp-card .imp-num { color:var(--ink); font-variant-numeric:tabular-nums; }
.imp-card .imp-does { color:var(--muted); font-size:13.5px; border-top:1px solid var(--line); padding-top:9px; margin-top:10px; }
.imp-card .btns { margin:10px 0 8px; }
.imp-card small { display:block; font-size:13px; }
.imp-clear { color:var(--muted); }
.imp-rest summary { cursor:pointer; font:600 14px var(--font-ui); color:var(--ink); }

/* Operations: the Workers tab. Cards stack by themselves on a phone. */
.wk-part { margin-bottom:14px; }
.wk-part > h2 { margin:18px 0 8px; font:var(--head-weight) 18px var(--font-head); letter-spacing:var(--head-track); color:var(--ink); }
.wk-part > p.muted { margin:-4px 0 10px; font-size:13.5px; }
.wk-part > .card { margin-bottom:0; }
.wk-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px; }
.wk-card { min-width:0; margin:0; overflow-wrap:anywhere; }
.wk-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; }
.wk-top b { color:var(--ink); }
.wk-live { display:inline-flex; align-items:center; gap:7px; font:600 12.5px var(--font-ui); color:var(--good); white-space:nowrap; }
.wk-what { display:block; margin-top:6px; color:var(--pri-text); font-weight:500; }
.wk-beat { margin:6px 0 0; font-size:13.5px; }
.wk-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr)); gap:8px 14px; margin:10px 0 0; }
.wk-facts dt { color:var(--muted); font-size:13px; }
.wk-facts dd { margin:0; color:var(--ink); font-variant-numeric:tabular-nums; }
.wk-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:8px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.wk-row:first-of-type { border-top:0; }
.wk-row small { display:block; color:var(--muted); font-size:13px; }
.wk-idle b { font-weight:600; }

/* Pulse (specs/operating.md 12a). Mobile first: one column, and wider screens add columns. */
.pp { max-width:1180px; margin:0 auto; }
.pp h1 { font:var(--head-weight) 26px/1.1 var(--font-head); letter-spacing:var(--head-track); margin:0; color:var(--ink); }
.pp .card { margin-bottom:0; min-width:0; }
.pp a { color:var(--pri-text); text-decoration:none; }
.pp a:hover { text-decoration:underline; }
.pp a.btn { color:var(--on-pri); }
.pp a.btn:hover { text-decoration:none; }
.pp-state { padding:12px 0; }
.pp-top { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.pp-read { font-size:13px; color:var(--muted); }
.pp-headline { font:700 19px/1.3 var(--font-head); letter-spacing:-.015em; margin:0 0 14px; color:var(--ink); }
.pp .w-good { color:var(--good); } .pp .w-warn { color:var(--warn); } .pp .w-bad { color:var(--danger); }
.pp-paused { display:flex; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; align-items:center; padding:12px 16px; border-radius:var(--r); background:var(--danger-soft); border:1px solid var(--danger); margin-bottom:14px; font-weight:650; color:var(--ink); }
.pp-news { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; padding:13px 16px; border-radius:var(--r); background:var(--good-soft); border:1px solid var(--good); margin-bottom:14px; }
.pp-news svg { width:30px; height:30px; color:var(--good); }
.pp-news small, .pp-limit small { font-size:13px; font-weight:650; color:var(--muted); display:block; }
.pp-news p, .pp-limit p { margin:1px 0 5px; font:750 19px/1.2 var(--font-head); letter-spacing:-.02em; color:var(--ink); }
.pp-news-m, .pp-lim-row { display:flex; gap:4px 20px; flex-wrap:wrap; font-size:14px; color:var(--muted); align-items:center; }
.pp-news-m b, .pp-lim-row b { color:var(--ink); font-weight:650; }
.pp-news-m a, .pp-lim-row a { font-weight:600; }
.pp-first, .pp-grid, .pp-col, .pp-stack { display:grid; gap:14px; min-width:0; }
.pp-first { grid-template-columns:minmax(0,1fr); margin-bottom:14px; }
.pp-grid { grid-template-columns:minmax(0,1fr); align-items:start; }
.pp-stack { align-content:start; }
.pp-head { display:flex; justify-content:space-between; align-items:center; gap:6px 12px; margin-bottom:6px; flex-wrap:wrap; }
.pp-head h2 { margin:0; font:700 16px var(--font-head); color:var(--ink); }
.pp-head a { font-size:13px; font-weight:600; padding:13px 0; margin:-13px 0; }
.pp-n { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--count-bg); color:var(--count-ink); font-size:12px; font-weight:700; margin-left:6px; }
.pp-needs:focus { outline:none; }
.pp-cnav { display:flex; align-items:center; gap:4px; font-size:13px; color:var(--muted); }
.pp-cbtn { width:44px; height:44px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--ink); font-size:18px; line-height:1; cursor:pointer; }
.pp-cbtn:disabled { opacity:.4; cursor:default; }
.pp-car { display:flex; gap:6px; margin:0 -4px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-radius:10px; }
.pp-car::-webkit-scrollbar { display:none; }
.pp-slide { flex:0 0 94%; scroll-snap-align:start; min-width:0; padding:4px; }
.pp-car.one .pp-slide { flex-basis:100%; }
.pp-car:not(.one) .pp-slide:not(.on) { filter:blur(3px); opacity:.45; transition:filter .2s, opacity .2s; }
.pp-car.more-after { -webkit-mask-image:linear-gradient(to right, #000 93%, transparent); mask-image:linear-gradient(to right, #000 93%, transparent); }
.pp-car.at-end { -webkit-mask-image:linear-gradient(to left, #000 93%, transparent); mask-image:linear-gradient(to left, #000 93%, transparent); }
@media (prefers-reduced-motion: reduce) { .pp-car .pp-slide { transition:none; } }
.pp-slide h3 { font:700 18px/1.3 var(--font-head); margin:6px 0 3px; color:var(--ink); }
.pp-slide p { font-size:14px; color:var(--muted); margin:0 0 10px; overflow-wrap:anywhere; }
.pp .pp-wait { font-weight:650; color:var(--warn); }
.pp-flag { display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--danger-soft); color:var(--danger); }
.pp-flag.q { background:var(--pri-soft); color:var(--pri-text); }
.pp-acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
.pp-acts .btn { min-height:44px; flex:1 1 40%; justify-content:center; }
.pp-acts2 { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.pp-acts2 .btn { min-height:44px; }
.pp-nn { font:600 13px var(--font-ui); background:none; border:0; color:var(--pri-text); cursor:pointer; padding:8px 4px; min-height:44px; }
.pp-note { font-size:12.5px; color:var(--muted); margin:4px 0 0; }
.pp .pp-final { color:var(--warn); font-weight:650; }
.pp-undo { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px; font-weight:600; background:var(--good-soft); color:var(--good); border-radius:9px; padding:0 12px; margin-top:8px; }
.pp-clear { font-size:14px; color:var(--ink); padding:6px 0 3px; }
.pp-clear small { display:block; color:var(--muted); font-size:12.5px; }
.pp-ceo { padding:12px 18px; font-size:14.5px; font-weight:550; color:var(--ink); }
.pp-lbl { font-size:12.5px; font-weight:650; color:var(--muted); display:block; margin-bottom:2px; }
.pp-limit { border-left:5px solid var(--danger); }
.pp-limit.quiet { border-left-color:var(--good); }
.pp-speed { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.pp-speed .card { padding:10px 11px; }
.pp-num { font:750 18px/1.2 var(--font-head); letter-spacing:-.02em; margin-top:2px; color:var(--ink); }
.pp-num span { font-size:12.5px; font-weight:650; letter-spacing:0; white-space:nowrap; color:var(--muted); }
.pp-num span.w-good { color:var(--good); } .pp-num span.w-bad { color:var(--danger); }
.pp-spark { display:flex; gap:3px; align-items:flex-end; height:28px; margin:7px 0 4px; }
.pp-spark i { flex:1; background:var(--pri); opacity:.45; border-radius:2px 2px 0 0; min-height:2px; }
.pp-spark i:last-child { opacity:1; }
.pp-hint { font-size:12.5px; color:var(--muted); display:block; }
.pp-ini { padding:11px 0; border-top:1px solid var(--line); display:grid; gap:6px; }
.pp-head + .pp-ini { border-top:0; padding-top:2px; }
.pp-ini-t { display:flex; justify-content:space-between; gap:4px 12px; flex-wrap:wrap; align-items:baseline; font-size:14px; }
.pp .pp-ini-t a { color:var(--ink); font-weight:650; }
.pp-ini-t span { font-size:12.5px; color:var(--muted); }
.pp-trk { position:relative; display:flex; gap:3px; height:16px; }
.pp-trk i { flex:1; border-radius:3px; display:grid; place-items:center; font:700 11px var(--font-ui); font-style:normal; color:var(--bg); }
.pp-trk i.k-done::after { content:"✓"; color:var(--bg); font:700 10px var(--font-ui); }
.pp-trk b { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); box-shadow:0 0 0 1px var(--bg); }
.k-done { background:var(--good); }
.k-running { background:var(--pri); }
.k-blocked { background:var(--danger); }
.k-waiting { background:repeating-linear-gradient(45deg,var(--warn),var(--warn) 3px,transparent 3px,transparent 6px); border:1px solid var(--warn); }
.k-not_started { background:var(--pri-soft); border:1px solid var(--line-2); }
.pp .pp-blk { font-size:13px; font-weight:600; color:var(--danger); text-decoration:none; }
.pp-key { font-size:12px; color:var(--muted); display:flex; gap:4px 12px; flex-wrap:wrap; margin:4px 0; }
.pp-key span { display:inline-flex; align-items:center; white-space:nowrap; }
.pp-key .sw { display:inline-block; flex:none; width:12px; height:12px; border-radius:3px; margin-right:5px; }
.pp-count { font-size:13px; color:var(--warn); font-weight:600; margin:0 0 8px; }
.pp-tt { display:flex; gap:2px; height:38px; margin:4px 0 7px; }
.pp-tt .seg { display:flex; align-items:center; justify-content:center; border:0; border-radius:4px; font:650 12.5px var(--font-ui); padding:0 4px; white-space:nowrap; overflow:hidden; color:var(--bg); min-width:4px; }
.pp-tt button.seg { cursor:pointer; }
.pp-tt .tt-w { background:var(--warn); }
.pp-lg { display:none; }
.pp-chev { width:15px; height:15px; color:var(--muted); flex:none; transition:transform .15s; }
.pp details[open] > summary .pp-chev { transform:rotate(90deg); }
.pp-sec { border-top:1px solid var(--line); }
.pp-sec > summary { display:flex; gap:7px; align-items:center; min-height:44px; cursor:pointer; font-size:14px; font-weight:650; list-style:none; color:var(--ink); }
.pp-sec > summary b { margin-left:auto; font-weight:650; color:var(--muted); font-size:13px; }
.pp-sec summary::-webkit-details-marker { display:none; }
.pp-sec[open] { padding-bottom:6px; }
.pp-w { border-top:1px solid var(--line); }
.pp-w > summary { display:grid; grid-template-columns:15px minmax(0,1fr) 34px; gap:6px 10px; align-items:center; padding:8px 0; cursor:pointer; font-size:14px; list-style:none; min-height:44px; color:var(--ink); }
.pp-w > summary b { font-weight:650; text-align:right; }
.pp-w > summary .pp-wb { grid-column:1/-1; grid-row:2; }
.pp-wb { height:10px; background:var(--pri-soft); border-radius:0 4px 4px 0; display:block; }
.pp-wb i { display:block; height:100%; background:var(--warn); border-radius:0 4px 4px 0; }
.pp-w.r .pp-wb i { background:var(--danger); }
.pp-wi { display:flex; justify-content:space-between; gap:2px 12px; flex-wrap:wrap; font-size:13.5px; padding:3px 0 3px 16px; }
.pp-wi a { font-weight:600; }
.pp-wi span { color:var(--muted); }
.pp-del { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:2px 0 6px; }
.pp-del b { font-size:20px; font-weight:750; display:block; color:var(--ink); }
.pp-del b.w-good { color:var(--good); } .pp-del b.w-bad { color:var(--danger); }
.pp-del b.pp-none { font-size:14px; color:var(--muted); }
.pp-del span { font-size:12.5px; color:var(--muted); }
.pp-need { display:grid; grid-template-columns:minmax(0,1fr); gap:4px 10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:14px; color:var(--ink); }
.pp-need small { display:block; color:var(--muted); font-size:12.5px; }
.pp-wm { width:100%; border-collapse:collapse; font-size:13px; color:var(--ink); }
.pp-wm th { background:none; font-size:11.5px; font-weight:600; color:var(--muted); text-align:left; padding:2px 4px 5px; }
.pp-wm th:first-child { padding-left:0; }
.pp-wm th.r, .pp-wm td.r { text-align:right; }
.pp-wm th.c, .pp-wm td.sp { text-align:center; }
.pp-wm td { padding:6px 4px; border-top:1px solid var(--line); white-space:nowrap; }
.pp-wm td:first-child { white-space:normal; padding-left:0; }
.pp-wm td.n1 { font-weight:700; text-align:right; }
.pp-wm svg { display:block; width:64px; height:20px; margin:0 auto; }
.pp-wm .lm { display:none; }
.pp-money { margin-top:14px; }
.pp-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-bottom:8px; }
.pp-legend span { display:inline-flex; align-items:center; gap:6px; }
.pp-legend i { width:16px; height:0; border-top:2.5px solid var(--muted); }
.pp-legend i.p { border-top:2px dotted var(--muted); }
.pp-money2 { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.pp-mh small { display:block; font-size:12.5px; color:var(--muted); font-weight:600; }
.pp-mh b { font:750 21px var(--font-head); letter-spacing:-.02em; color:var(--ink); }
.pp-mh span { font-size:13px; color:var(--muted); margin-left:5px; }
.pp-chart { position:relative; height:170px; margin-top:8px; padding-left:44px; padding-bottom:22px; --tone:var(--pri); }
.pp-chart.tone-rev { --tone:var(--good); }
.pp-y { position:absolute; left:0; width:38px; text-align:right; font-size:11.5px; color:var(--muted); transform:translateY(-50%); margin-top:0; }
.pp-plot { position:relative; height:100%; }
.pp-plot svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pp-plot line { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.pp-plot polyline { fill:none; stroke:var(--tone); vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.pp-plot .so-far { stroke-width:2.5; }
.pp-plot .plan { stroke-width:2; stroke-dasharray:2 5; }
.pp-dot { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--tone); border:2px solid var(--bg); transform:translate(-50%,-50%); box-sizing:border-box; }
.pp-today { position:absolute; font-size:11.5px; font-weight:650; color:var(--ink); transform:translate(8px,-20px); white-space:nowrap; }
.pp-x { position:absolute; left:44px; right:0; bottom:0; display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); }
.pp-more { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.pp-morelink { display:flex; gap:12px; align-items:center; margin-bottom:0; text-decoration:none; color:var(--ink); }
.pp-morelink svg { width:22px; height:22px; flex:none; color:var(--pri-text); }
.pp-morelink small { display:block; color:var(--muted); font-size:13px; }
.tabbar .count { position:absolute; top:2px; left:calc(50% + 6px); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (prefers-reduced-motion:reduce) { .pp-chev { transition:none; } }
@media (min-width:481px) {
  .pp-speed .card { padding:12px 14px; }
  .pp-num { font-size:21px; }
  .pp-lg { display:inline; }
  .pp-need { grid-template-columns:minmax(0,1fr) auto; }
  .pp-wm .lm { display:table-cell; }
  .pp-headline { font-size:21px; }
  .pp-news p, .pp-limit p { font-size:21px; }
  .pp-w > summary { grid-template-columns:15px minmax(0,1fr) minmax(70px,34%) 34px; }
  .pp-w > summary .pp-wb { grid-column:auto; grid-row:auto; }
  .pp-acts .btn { flex:0 1 auto; }
}
@media (min-width:640px) {
  .pp-money2, .pp-more { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:761px) {
  .pp-first { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:stretch; }
  .pp-stack { display:flex; flex-direction:column; }
  .pp-limit { flex:1; }
}
@media (min-width:861px) { .pp-cbtn { width:36px; height:36px; } }
@media (min-width:1041px) {
  .pp-speed { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pp-grid { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
}

/* An initiative on a phone. The meter and the state pill keep their columns on a wide screen,
   which here would squeeze the words into a strip down the middle. So the card's parts join
   one grid: the title beside the pill, then the words and the meter at full width. */
@media (max-width:640px) {
  .icard .top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:start; }
  .icard .imain { display:contents; }
  .icard .top h3 { grid-column:1; grid-row:1; font-size:18px; line-height:1.25; overflow-wrap:anywhere; }
  .icard .top .pill { grid-column:2; grid-row:1; }
  .icard .top .obj { grid-column:1 / -1; grid-row:2; margin:0; font-size:14px; line-height:1.45; }
  .icard .top .pbar { grid-column:1 / -1; grid-row:3; width:auto; display:flex; align-items:center; gap:10px; margin-top:2px; white-space:nowrap; }
  .icard .top .pbar .mtrack { flex:1; margin:0; }
  .icard .top .chips { grid-column:1 / -1; grid-row:4; margin:0; gap:8px; align-items:center; }
  .icard .top .chips .chip { position:relative; min-height:30px; padding:4px 10px; }
  .icard .top .chips .chip::after { content:""; position:absolute; inset:-7px 0; }
  .icard .top .chips .link { min-height:30px; padding:4px 2px; }
  .icard .top form { grid-column:1 / -1; grid-row:5; }
  .icard .planline { margin:0 16px 14px; flex-wrap:wrap; gap:2px 10px; }
  .icard .kpis > div { padding:10px 16px; }
  .icard .kpis > div:nth-child(2n) { border-right:0; }
  .icard .kpis > div:nth-child(n+3) { border-top:1px solid var(--line); }
  .icard .ifoot { padding:14px 16px; }
  .icard .ifoot > .btn { flex:1; justify-content:center; }
}

/* Operations: Day by hour (specs/operating.md 12.2a). Colors come from the theme's own. */
.hg-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.hg-stat b { display:block; font-size:24px; line-height:1.2; font-variant-numeric:tabular-nums; }
.hg-stat span { color:var(--muted); font-size:13px; }
.hg-grid { display:grid; grid-template-columns:66px repeat(24,minmax(0,1fr)); gap:2px; align-items:center; margin-top:14px; }
.hg-hr { color:var(--muted); font-size:11px; height:16px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hg-day { color:var(--muted); font-size:12.5px; white-space:nowrap; }
.hg-c { display:block; aspect-ratio:1; min-height:12px; border-radius:3px; background:color-mix(in oklab, var(--muted) 14%, transparent); }
a.hg-h { display:flex; flex-direction:column; gap:1px; border-radius:3px; }
a.hg-h:hover { outline:2px solid var(--line-strong, var(--muted)); outline-offset:0; }
a.hg-h:focus-visible, a.hg-h.on { outline:2px solid var(--ink); outline-offset:1px; }
.hg-f { display:block; height:7px; border-radius:2px; background:color-mix(in oklab, var(--muted) 14%, transparent); }
.hg-f.idle { background:color-mix(in oklab, var(--good) 14%, transparent); }
.hg-f.none { background:transparent; box-shadow:inset 0 0 0 1.5px var(--warn); }
.hg-f.unknown, .hg-f.future { background:transparent; box-shadow:inset 0 0 0 1px var(--line); }
.hg-f.f1 { background:color-mix(in oklab, var(--good) 34%, transparent); }
.hg-f.f2 { background:color-mix(in oklab, var(--good) 56%, transparent); }
.hg-f.f3 { background:color-mix(in oklab, var(--good) 78%, transparent); }
.hg-f.f4 { background:var(--good); }
.hg-week { margin-top:16px; }
.hb-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top:14px; }
.hb-head h3 { font-size:14px; margin:0; }
.hb-head span { color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.hb-plot { display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:2px; height:96px; margin-top:6px; border-bottom:1px solid var(--line); }
.hb-plot.paid { height:60px; }
.hb-col { display:flex; align-items:flex-end; border-radius:3px 3px 0 0; }
.hb-col:hover { background:color-mix(in oklab, var(--muted) 12%, transparent); }
.hb-col:focus-visible, .hb-col.on { outline:2px solid var(--ink); outline-offset:0; }
.hb-bar { display:block; width:100%; border-radius:3px 3px 0 0; }
.hb-col.free .hb-bar { background:var(--good); }
.hb-col.paid .hb-bar { background:var(--pri); }
.hb-col.idle { background:transparent; }
.hb-col.idle:hover { background:color-mix(in oklab, var(--muted) 12%, transparent); }
.hb-col.idle .hb-bar { height:3px !important; background:color-mix(in oklab, var(--good) 40%, transparent); }
.hb-col.none { box-shadow:inset 0 -3px 0 var(--warn); }
.hb-col.unknown { background:repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 5px); }
.hb-axis { display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:2px; margin-top:4px; color:var(--muted); font-size:11px; white-space:nowrap; }
.hb-k { width:13px; height:13px; border-radius:3px; }
.hb-k.free { background:var(--good); }
.hb-k.idle { background:color-mix(in oklab, var(--good) 40%, transparent); }
.hb-k.none { box-shadow:inset 0 -3px 0 var(--warn); background:color-mix(in oklab, var(--muted) 14%, transparent); }
.hb-k.unknown { background:repeating-linear-gradient(135deg, var(--muted) 0 1px, transparent 1px 4px); }
.hg-table h3 { margin:10px 0 0; font-size:13px; }
.if-rows { display:grid; gap:9px; margin-top:12px; }
.if-row { display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr) 48px; gap:10px; align-items:center; font-size:14px; }
.if-row b { text-align:right; font-variant-numeric:tabular-nums; }
.if-track { height:14px; border-radius:0 4px 4px 0; background:color-mix(in oklab, var(--muted) 14%, transparent); }
.if-track i { display:block; height:100%; border-radius:0 4px 4px 0; background:var(--good); }
.if-card { margin-top:16px; }
.if-idea { border-top:1px solid var(--line); padding:12px 0 2px; margin-top:12px; font-size:14px; }
.if-idea h3 { font-size:15px; margin:0 0 6px; }
.if-idea p { margin:4px 0; }
.hg-c.l1 { background:color-mix(in oklab, var(--pri) 28%, transparent); }
.hg-c.l2 { background:color-mix(in oklab, var(--pri) 52%, transparent); }
.hg-c.l3 { background:color-mix(in oklab, var(--pri) 78%, transparent); }
.hg-c.l4 { background:var(--pri); }
.hg-c.money { background:repeating-linear-gradient(135deg, var(--warn) 0 2px, var(--warn-soft) 2px 5px); }
.hg-c.you { background:transparent; box-shadow:inset 0 0 0 2px var(--pri); }
.hg-c.outside { background:repeating-linear-gradient(45deg, var(--muted) 0 1.5px, transparent 1.5px 5px); }
.hg-c.future { background:transparent; box-shadow:inset 0 0 0 1px var(--line); }
.hg-key { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; color:var(--muted); font-size:13px; }
.hg-key span { display:inline-flex; align-items:center; gap:6px; }
.hg-key i { display:inline-block; width:13px; height:13px; min-height:0; }
.hg-ramp i { margin-right:-4px; }
.hg-table { margin-top:12px; font-size:13.5px; color:var(--muted); }
.hg-scroll { overflow-x:auto; margin-top:8px; }
.hg-table table { border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; }
.hg-table td, .hg-table th { padding:3px 6px; text-align:right; border-bottom:1px solid var(--line); }
.hg-table td:first-child, .hg-table th:first-child { text-align:left; white-space:nowrap; }
.hg-detail { margin-top:16px; }
.hg-detail h3 { margin-top:14px; font-size:14px; }
.hg-list { list-style:none; padding:0; margin:8px 0 0; }
.hg-list li { display:flex; justify-content:space-between; gap:16px; padding:5px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.hg-list li span:last-child { color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:760px) { .hg-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .hg-stat b { font-size:20px; } .hg-grid { grid-template-columns:54px repeat(24,minmax(0,1fr)); gap:1px; } .hg-c { min-height:10px; border-radius:2px; } .hg-day { font-size:10.5px; } }
/* Seven tabs don't fit one row between a phone and a wide screen. */
@media (min-width:481px) and (max-width:640px) { .op-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Policies: the parts of policy (specs/model.md 6.1) */
.settings-parts { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-top:10px; }
.settings-part h3 { font-size:14px; margin:0 0 4px; }
.settings-part dl { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:4px 10px; margin:0; font-size:13.5px; }
.settings-part dd .link { margin-left:6px; font-size:12.5px; }
.settings-part dd.setting-form { grid-column:1 / -1; font-weight:400; padding:8px 0 4px; }
.settings-part dd.setting-form .pform { margin:0; }
.setting-off { color:var(--warn, #b7791f); font-weight:600; }
.money-limits { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:4px 10px; margin:8px 0 0; font-size:13.5px; }
.money-limits dd { margin:0; }
.settings-part dt { color:var(--muted); }
.settings-part dd { margin:0; font-weight:600; }
.settings-part dd.setting-not_set { color:var(--warn); }
.settings-part dd.setting-default { font-weight:500; }

/* Queues (specs/model.md 11, 13.4), from docs/mockups/company-screens.html. Scoped to the page. */
.queues-page .card .sub { font-size:13px; color:var(--muted); margin:2px 0 8px; }
.queues-page .q { display:grid; grid-template-columns:minmax(0,1.3fr) 70px 80px 78px; gap:12px; align-items:center; padding:10px 4px; border-top:1px solid var(--line); color:inherit; text-decoration:none; }
.queues-page .q.head { border-top:0; font-size:12px; font-weight:600; color:var(--muted); padding-bottom:2px; }
.queues-page a.q:hover { background:var(--pri-soft); border-radius:10px; }
.queues-page a.q:focus-visible { outline:2px solid var(--pri); outline-offset:2px; border-radius:10px; }
.queues-page .q .n b { display:block; font-size:14px; }
.queues-page .q .n small { display:block; font-size:12px; color:var(--muted); }
.queues-page .q em { font-style:normal; font-weight:700; font-size:15px; }
.queues-page .q .age { font-size:13px; color:var(--muted); }
.queues-page .q.hot { background:var(--warn-soft); border-radius:10px; border-top-color:transparent; }
.queues-page .q.hot .age { color:var(--warn); font-weight:600; }
.queues-page .q.hot .trend path { stroke:var(--warn); }
.queues-page .trend svg { display:block; width:72px; height:24px; }
.queues-page .trend path { fill:none; stroke:var(--pri); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.queues-page .feed { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:12px; }
.queues-page .fcol small { display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
.queues-page .fsrc, .queues-page .fdst { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-top:6px; font-size:13px; }
.queues-page .fsrc b, .queues-page .fdst b { display:block; font-size:13.5px; overflow-wrap:anywhere; }
.queues-page .fsrc span, .queues-page .fdst span { display:block; font-size:12px; color:var(--muted); }
.queues-page .fdst { border-color:var(--warn); background:var(--warn-soft); }
.queues-page .g2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.queues-page .io { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; align-items:end; height:110px; margin-top:12px; border-bottom:1px solid var(--line-2); }
.queues-page .io div { display:flex; gap:3px; align-items:flex-end; height:100%; justify-content:center; }
.queues-page .io i { width:14px; border-radius:3px 3px 0 0; display:block; }
.queues-page .iol { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; font-size:11.5px; color:var(--muted); text-align:center; margin-top:4px; }
.queues-page .legend { font-family:inherit; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--muted); margin-top:8px; }
.queues-page .legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.queues-page .qlist .li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:13.5px; align-items:center; }
.queues-page .qlist .li:first-child { border-top:0; }
.queues-page .qlist .li small { display:block; font-size:12px; color:var(--muted); }
.queues-page .qlist .age-pill { font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }
@media (max-width:760px) {
  .queues-page .q { grid-template-columns:minmax(0,1fr) 44px 64px; }
  .queues-page .q .trend { display:none; }
  .queues-page .q.head span:last-child { display:none; }
  .queues-page .feed, .queues-page .g2 { grid-template-columns:minmax(0,1fr); }
}

/* Pulse: the model's row (specs/model.md 13.2). */
.pp-model { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.pp-model h2 { font-size:15px; margin:0 0 8px; }
.pp-model .pp-gap { margin-top:14px; }
.pp-ag { padding:7px 0; border-top:1px solid var(--line); }
.pp-ag:first-of-type { border-top:0; }
.pp-ag b { display:block; font-size:13.5px; overflow-wrap:anywhere; }
.pp-ag small { display:block; font-size:12px; color:var(--muted); }
.pp-since { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; margin:0; font-size:13.5px; }
.pp-since dt { color:var(--muted); }
.pp-since dd { margin:0; font-weight:600; text-align:right; }
.pp-since dd small { font-weight:400; color:var(--muted); }
.pp-wk { display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:6px; align-items:end; height:90px; border-bottom:1px solid var(--line-2); margin-top:8px; }
.pp-wkb { display:flex; align-items:flex-end; height:100%; }
.pp-wkb i { display:block; width:100%; min-height:2px; border-radius:4px 4px 0 0; background:var(--pri); }
.pp-wkl { display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:6px; font-size:11px; color:var(--muted); text-align:center; margin-top:4px; }
@media (max-width:900px) { .pp-model { grid-template-columns:minmax(0,1fr); } }

/* Company (specs/model.md 13.3), from docs/mockups/company-screens.html. Scoped to the page. */
.company-page .card .sub { font-size:13px; color:var(--muted); margin:2px 0 8px; }
.company-page .problem { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; border-color:var(--warn); background:var(--warn-soft); }
.company-page .problem > i { font-style:normal; font-weight:800; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--warn); color:var(--surface); }
.company-page .problem p { margin:4px 0 0; font-size:13.5px; }
.company-page .problem .fix { font-weight:600; }
.company-page .tiles { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.company-page .tile { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:12px 14px; color:inherit; text-decoration:none; }
.company-page a.tile:hover { border-color:var(--pri-line); }
.company-page .tile small { display:block; font-size:12px; color:var(--muted); }
.company-page .tile b { display:block; font-size:20px; margin:2px 0; }
.company-page .tile span { display:block; font-size:12px; color:var(--muted); }
.company-page .tile.you { border-color:var(--pri-line); }
.company-page .obj { display:grid; grid-template-columns:52px minmax(0,1.4fr) minmax(0,1fr) 110px 100px; gap:12px; align-items:center; padding:10px 4px; border-top:1px solid var(--line); color:inherit; text-decoration:none; }
.company-page .obj:hover { background:var(--pri-soft); border-radius:10px; }
.company-page .obj:focus-visible { outline:2px solid var(--pri); outline-offset:2px; border-radius:10px; }
.company-page .rank { font-weight:700; font-size:13px; text-align:center; background:var(--pri-soft); border-radius:8px; padding:4px 0; }
.company-page .onm b { display:block; font-size:14px; overflow-wrap:anywhere; }
.company-page .onm small, .company-page .tgt small, .company-page .mon small { font-size:12px; color:var(--muted); }
.company-page .tgt small { display:block; margin-top:4px; }
.company-page .bar { position:relative; display:block; height:10px; border-radius:5px; background:var(--line); }
.company-page .bar i { position:absolute; left:0; top:0; bottom:0; border-radius:5px; background:var(--pri); }
.company-page .bar u { position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); border-radius:1px; }
.company-page .mon { font-weight:600; font-size:13.5px; }
.company-page .st { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; border-radius:999px; padding:2px 9px; white-space:nowrap; justify-self:start; }
.company-page .st::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.company-page .st.ok { color:var(--good); background:var(--good-soft); }
.company-page .st.wa { color:var(--warn); background:var(--warn-soft); }
.company-page .st.bd { color:var(--danger); background:var(--danger-soft); }
.company-page .st.nu { color:var(--muted); background:var(--line); }
.company-page .ag { padding:8px 0; border-top:1px solid var(--line); }
.company-page .ag:first-of-type { border-top:0; }
.company-page .ag b { display:block; font-size:13.5px; overflow-wrap:anywhere; }
.company-page .ag small { display:block; font-size:12px; color:var(--muted); }
@media (max-width:760px) {
  .company-page .tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .company-page .problem { grid-template-columns:auto minmax(0,1fr); }
  .company-page .problem .btn { grid-column:1 / -1; justify-self:start; }
  .company-page .obj { grid-template-columns:40px minmax(0,1fr) auto; }
  .company-page .obj .tgt { grid-column:2 / -1; grid-row:2; }
  .company-page .obj .mon { grid-column:2; grid-row:3; }
  .company-page .obj .st { grid-column:3; grid-row:1; }
}

/* Hours: each hour by wait reason (specs/model.md 11.4). */
.hr-strip { display:grid; grid-template-columns:repeat(24, minmax(0,1fr)); gap:2px; margin-top:10px; }
.hr-h { display:block; height:28px; border-radius:3px; }
.hr-working, .hr-legend i.hr-working { background:var(--pri); }
.hr-waiting, .hr-legend i.hr-waiting { background:var(--warn); }
.hr-idle, .hr-legend i.hr-idle { background:var(--line-2); }
.hr-not_recorded, .hr-legend i.hr-not_recorded { background:transparent; border:1px dashed var(--line-2); }
.hr-axis { display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:4px; }
.hr-legend { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--muted); margin:8px 0; }
.hr-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.hr-table { width:100%; font-size:13px; border-collapse:collapse; }
.hr-table td, .hr-table th { text-align:left; padding:3px 6px; border-top:1px solid var(--line); }

/* The account menu's admin links (simplification #2: no More page). */
.account .adminlinks { display:flex; flex-direction:column; gap:4px; margin:4px 0 10px; }
.account .adminlinks a { color:inherit; font-size:13.5px; }
.company-page .company-more .link { padding:0; margin-left:2px; }

/* Inside the company (/inside): memory and the ledger, read-only. */
.inside-page .inside-text { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:14px; line-height:1.55; color:var(--ink); margin:0; }
.inside-page pre.inside-text { font-size:13px; max-height:60vh; overflow:auto; background:var(--sunk); border-radius:var(--r); padding:12px; }
.inside-ledger { width:100%; border-collapse:collapse; font-size:13px; }
.inside-ledger th, .inside-ledger td { text-align:left; padding:6px 8px; border-top:1px solid var(--line); vertical-align:top; }
.inside-ledger .r { text-align:right; }
.inside-ledger .nowrap { white-space:nowrap; }
@media (max-width:700px) { .inside-ledger th:nth-child(4), .inside-ledger td:nth-child(4), .inside-ledger th:nth-child(5), .inside-ledger td:nth-child(5) { display:none; } }