/* ============================================================================
   ScheduleTraction — global stylesheet (single source of truth).
   Design tokens + shared component primitives lifted VERBATIM from the mockups
   (teal design system, brief §3). Theme-aware: light/dark via prefers-color-scheme
   AND an explicit :root[data-theme] override. Screen-specific layout lives with
   each component; the reusable primitives live here so markup ports 1:1.
   ============================================================================ */

/* Rock kinds (RockClassification): Company-derived blue, Team-only gold, Individual purple; --rk-co-sel is
   the SELECTED Company branch, always carrying white text (light ≈10.8:1, dark ≈9.8:1). Rules: L10Room.razor.css. */
:root{
  --bg:#f4f6f8; --surface:#ffffff; --surface2:#eef1f5; --ink:#16202b; --muted:#5c6976; --line:#e0e5eb;
  --accent:#12667c; --accent-soft:#e2f0f4;
  --green:#177245; --green-bg:#e5f4ea; --red:#b42318; --red-bg:#fbeceb; --amber:#a8600a; --amber-bg:#fbf1df;
  --done-bg:rgba(34,160,90,.38); --done-line:rgba(23,114,69,.65);
  --done-card:#8fcfa8; --done-head:#6dbb8c; --done-card-line:#177245; --done-muted:#1f2d3a; --done-pos:#0b4a2b; --done-neg:#8a1111;
  --st-on:#177245; --st-on-ink:#ffffff; --st-risk:#e59400; --st-risk-ink:#1d1300; --st-off:#b42318; --st-off-ink:#ffffff; --st-done:#0f5132; --st-done-ink:#ffffff;
  --rk-co:#1f5fbf; --rk-co-soft:#e4eefc; --rk-co-ink:#16448f; --rk-co-sel:#0b3a82;
  --rk-team:#a96a00; --rk-team-soft:#fbf0d6; --rk-team-ink:#6a4300; --rk-ind:#7a3fc2; --rk-ind-soft:#efe6fb; --rk-ind-ink:#55278f;
  --shadow:0 10px 30px rgba(18,30,45,.07);
  --font:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e141b; --surface:#151d27; --surface2:#101822; --ink:#e7ecf2; --muted:#94a2b0; --line:#25303d;
  --accent:#4db6cd; --accent-soft:#122530;
  --green:#45c980; --green-bg:#13271c; --red:#f0736a; --red-bg:#2b1513; --amber:#e0a942; --amber-bg:#2a2213;
  --done-bg:rgba(69,201,128,.30); --done-line:rgba(69,201,128,.70);
  --done-card:#1e4d39; --done-head:#276349; --done-card-line:#45c980; --done-muted:#d3dde6; --done-pos:#a6f0c6; --done-neg:#ffb3ab;
  --st-on:#3fbf78; --st-on-ink:#06140c; --st-risk:#e0a942; --st-risk-ink:#1d1300; --st-off:#f0736a; --st-off-ink:#2b0b08; --st-done:#2f9e62; --st-done-ink:#04110a;
  --rk-co:#6ea3f2; --rk-co-soft:#15243b; --rk-co-ink:#c3d8fb; --rk-co-sel:#123f8c;
  --rk-team:#e0a942; --rk-team-soft:#2a2213; --rk-team-ink:#f2d08a; --rk-ind:#b48cf2; --rk-ind-soft:#221a33; --rk-ind-ink:#dcc9fb;
  --shadow:0 12px 34px rgba(0,0,0,.42);
}}
:root[data-theme="dark"]{
  --bg:#0e141b; --surface:#151d27; --surface2:#101822; --ink:#e7ecf2; --muted:#94a2b0; --line:#25303d;
  --accent:#4db6cd; --accent-soft:#122530;
  --green:#45c980; --green-bg:#13271c; --red:#f0736a; --red-bg:#2b1513; --amber:#e0a942; --amber-bg:#2a2213;
  --done-bg:rgba(69,201,128,.30); --done-line:rgba(69,201,128,.70);
  --done-card:#1e4d39; --done-head:#276349; --done-card-line:#45c980; --done-muted:#d3dde6; --done-pos:#a6f0c6; --done-neg:#ffb3ab;
  --st-on:#3fbf78; --st-on-ink:#06140c; --st-risk:#e0a942; --st-risk-ink:#1d1300; --st-off:#f0736a; --st-off-ink:#2b0b08; --st-done:#2f9e62; --st-done-ink:#04110a;
  --rk-co:#6ea3f2; --rk-co-soft:#15243b; --rk-co-ink:#c3d8fb; --rk-co-sel:#123f8c;
  --rk-team:#e0a942; --rk-team-soft:#2a2213; --rk-team-ink:#f2d08a; --rk-ind:#b48cf2; --rk-ind-soft:#221a33; --rk-ind-ink:#dcc9fb;
  --shadow:0 12px 34px rgba(0,0,0,.42);
}
:root[data-theme="light"]{
  --bg:#f4f6f8; --surface:#ffffff; --surface2:#eef1f5; --ink:#16202b; --muted:#5c6976; --line:#e0e5eb;
  --accent:#12667c; --accent-soft:#e2f0f4;
  --green:#177245; --green-bg:#e5f4ea; --red:#b42318; --red-bg:#fbeceb; --amber:#a8600a; --amber-bg:#fbf1df;
  --done-bg:rgba(34,160,90,.38); --done-line:rgba(23,114,69,.65);
  --done-card:#8fcfa8; --done-head:#6dbb8c; --done-card-line:#177245; --done-muted:#1f2d3a; --done-pos:#0b4a2b; --done-neg:#8a1111;
  --st-on:#177245; --st-on-ink:#ffffff; --st-risk:#e59400; --st-risk-ink:#1d1300; --st-off:#b42318; --st-off-ink:#ffffff; --st-done:#0f5132; --st-done-ink:#ffffff;
  --rk-co:#1f5fbf; --rk-co-soft:#e4eefc; --rk-co-ink:#16448f; --rk-co-sel:#0b3a82;
  --rk-team:#a96a00; --rk-team-soft:#fbf0d6; --rk-team-ink:#6a4300; --rk-ind:#7a3fc2; --rk-ind-soft:#efe6fb; --rk-ind-ink:#55278f;
  --shadow:0 10px 30px rgba(18,30,45,.07);
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a,button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* typography helpers */
.num,.tabular{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.eyebrow{font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.muted{color:var(--muted)}

/* card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:15px}
.card h3{margin:0 0 11px;font-size:16.5px;display:flex;justify-content:space-between;align-items:center}
.card h3 .cnt{font-family:var(--mono);font-size:13.5px;color:var(--muted);font-weight:700}

/* pill badges — semantic variants map to the token pairs */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:800;white-space:nowrap}
.pill.p-green,.pill.p-on{background:var(--green-bg);color:var(--green)}
.pill.p-amber,.pill.p-risk{background:var(--amber-bg);color:var(--amber)}
/* R44: "Execution lead not assigned" — amber on amber-bg (WCAG AA in light and dark), never colour alone: the words say it. */
.ns-nolead{color:var(--amber);background:var(--amber-bg);font-weight:700;border-radius:6px;padding:0 6px}
.pill.p-red,.pill.p-off{background:var(--red-bg);color:var(--red)}
.pill.p-accent{background:var(--accent-soft);color:var(--accent)}
.pill.p-muted{background:var(--surface2);color:var(--muted)}

/* Identifier codes — SEAT-11, ROCK-04, SEAT-OUTSIDE-SALES. AN ID IS ONE TOKEN AND NEVER BREAKS.
   Had no rule at all before 2026-08-07, so it inherited normal inline wrapping and browsers broke
   it at its hyphens: "SEAT-OUTSIDE-SALES" split into "SEAT-OUTSIDE-" / "SALES", and even "SEAT-14"
   split into "SEAT-" / "14" — a fragment that reads as a different, shorter id.
   nowrap alone is enough for the hyphen; the other three declarations stop a future
   overflow-wrap/word-break rule set on a container from reaching in and re-breaking it. Appearance
   is deliberately unchanged — this constrains wrapping only. */
.idcode{white-space:nowrap;hyphens:none;overflow-wrap:normal;word-break:normal}

/* confidence chip */
.conf{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;border:1px solid var(--line);color:var(--muted)}
.conf.lo{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.conf.md{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,var(--line))}
.conf.hi{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,var(--line))}

/* status dots */
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.dot.g{background:var(--green)} .dot.a{background:var(--amber)} .dot.r{background:var(--red)}

/* buttons */
.btn{border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:9px;padding:7px 12px;font-weight:700;font-size:14px;cursor:pointer}
.btn:hover{background:var(--accent-soft)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.btn.sm{padding:4px 9px;font-size:13px;border-radius:7px}
/* A disabled .btn rendered IDENTICALLY to an enabled one — same border, same hover, same cursor —
   so a button turned off to say "you cannot do this yet" just looked broken when clicked. Seats
   relies on it for Retire, and Admin/Teams' ↑↓ arrows have been disabled without showing it since
   they shipped. Matches the rule L10Room.razor.css already carries in its own scope.
   :hover is neutralised too, or a dead button still lights up under the pointer. */
/* A button that READS as a link. Used for the Meetings page's "Create a new meeting" reveal, which
   is a secondary, rare action and must not compete with the "Open room" buttons beside it — the
   whole point of that change is that finding a meeting leads and creating one recedes.
   It stays a <button>, not an <a>: it performs an action rather than navigating, so it must be in
   the tab order as a button and must not offer a context menu full of link options. */
.btn-link-inline{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--accent);
                 cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.btn-link-inline:hover{filter:brightness(1.15)}
.btn-link-inline:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.btn:disabled{opacity:.45;cursor:default}
/* A STATUS CONTROL THAT CANNOT BE CHANGED LOOKS IT (2026-10-02). In a concluded meeting every write is refused, so its
   status and confidence pickers are disabled — and must not keep the full colour of a live control. */
select:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.5)}
/* THE REST OF A READ-ONLY ROOM (readonly-room.js): disabled controls dim; editable text reads as text; pure actions vanish. */
[data-readonly="true"] button:disabled,[data-readonly="true"] input:disabled{opacity:.5;cursor:not-allowed}
.ro-field{background:transparent!important;border-color:transparent!important;box-shadow:none!important;cursor:default;resize:none}
.ro-hidden{display:none!important}
.btn:disabled:hover{background:transparent}
.btn.primary:disabled:hover{background:var(--accent);filter:none}

/* form fields */
.field{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:15px;font-family:inherit}
.field:focus{outline:2px solid var(--accent);outline-offset:1px}
/* field-sizing:content grows the box to fit what's typed. Global (not scoped) so it reaches
   textareas outside the meeting room - e.g. the team-links box in Admin/Users. */
textarea.field{resize:vertical;min-height:64px;field-sizing:content}

/* inline click-to-edit span (dashed underline; placeholder via data-ph) */
.edit{border-bottom:1px dashed var(--muted);cursor:text;min-width:20px;display:inline-block}
.edit:empty:before{content:attr(data-ph);color:var(--muted)}

/* scoped capture buttons + block header */
.capmini{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--accent);font-weight:800;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.capmini:hover{background:var(--accent-soft);border-color:var(--accent)}
.blockhead{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* meeting timers (two stacked) */
.timer{font-family:var(--mono);font-weight:800;font-variant-numeric:tabular-nums}
.timer.danger{color:var(--red)}

/* right-side capture drawer + overlay + toast */
.overlay{position:fixed;inset:0;background:rgba(10,16,24,.42);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:41;padding:20px;overflow:auto}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14.5px;font-weight:600;z-index:50;box-shadow:var(--shadow)}

/* accountability tree */
.seatrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--line)}
.seat{font-weight:600;font-size:15px}
.seat.open{color:var(--red)}

/* per-item note thread */
.note-entry{padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.note-entry .who{font-weight:700}
.note-entry .when{color:var(--muted);font-size:12.5px;margin-left:6px}

/* rock chip — ⛰ QR-… */
.rockchip{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:2px 7px;border-radius:999px;cursor:pointer}

/* ============================================================================
   Mission Control (page-level, lifted verbatim from the mockup)
   ============================================================================ */
h1{text-wrap:balance}
.subhead{color:var(--muted);font-size:16px;margin:0}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
@media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 16px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.tile .cap{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.tile .big{font-size:27.5px;font-weight:800;letter-spacing:-.01em;margin-top:6px;line-height:1.1}
.tile .note{font-size:14px;color:var(--muted);margin-top:5px}
.tile.warn{border-color:color-mix(in srgb,var(--amber) 42%,var(--line))}
.tile.warn .big{color:var(--amber)}
.tile.bad{border-color:color-mix(in srgb,var(--red) 42%,var(--line))}
.tile.bad .big{color:var(--red)}
.tile .strip{position:absolute;left:0;top:0;bottom:0;width:4px}
.tile.warn .strip{background:var(--amber)} .tile.bad .strip{background:var(--red)} .tile.ok .strip{background:var(--green)} .tile.acc .strip{background:var(--accent)}

.lens{margin-top:34px}
.lens-h{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.lens-h h2{font-size:20.5px;font-weight:800;margin:0;letter-spacing:-.01em}
.lens-h .tag{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:999px}
.lens-h .desc{color:var(--muted);font-size:14.5px}

.chain{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px}
.rung{display:grid;grid-template-columns:186px 1fr 64px;gap:16px;align-items:center;padding:10px 0}
@media(max-width:680px){.rung{grid-template-columns:1fr;gap:6px}}
.rung .lvl{font-weight:800;font-size:16px}
.rung .lvl small{display:block;color:var(--muted);font-weight:500;font-size:13.5px;margin-top:2px}
.track{height:16px;border-radius:99px;background:var(--surface2);border:1px solid var(--line);overflow:hidden}
.fill{height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 78%,#fff 6%),var(--accent))}
.fill.am{background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 75%,#fff),var(--amber))}
.rung .pct{text-align:right;font-weight:800;font-size:17.5px}
.because{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 0 2px 4px}
.because::before{content:"↓";font-size:16.5px;color:var(--accent)}
.chain .foot{margin-top:8px;padding-top:12px;border-top:1px dashed var(--line);color:var(--muted);font-size:14px}

.exec{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
@media(max-width:860px){.exec{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row .lead{display:flex;flex-direction:column;gap:2px;min-width:0}
.row .lead .t{font-weight:600;font-size:15px}
.row .lead .m{color:var(--muted);font-size:13.5px}
.pills{display:flex;gap:6px;align-items:center;flex:none}
/* PHONE: a status row lets its pills drop below the title instead of widening the page (Mission Control's
   Rocks at risk, the Rocks page). */
@media(max-width:560px){.exec .row,.row:has(> .pill){flex-wrap:wrap}.row .lead .m{overflow-wrap:anywhere}}
.idrow{display:flex;gap:9px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.idrow:first-of-type{border-top:0}
.idrow .mono{font-size:12.5px;color:var(--muted)}
.mtg{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.mtg:first-of-type{border-top:0}
.mtg.hot{background:var(--accent-soft);margin:0 -16px;padding:11px 16px;border-radius:10px;border-top:0}
.mtg .when{font-family:var(--mono);font-size:13.5px;color:var(--accent);font-weight:700;flex:none;width:96px}
.teams{display:flex;flex-direction:column}
.team{display:flex;gap:9px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.team:first-child{border-top:0}
.team .why{color:var(--muted);font-size:13.5px;margin-left:auto}
.stark{margin-top:22px;display:flex;gap:13px;align-items:flex-start;background:linear-gradient(120deg,var(--red-bg),transparent);border:1px solid color-mix(in srgb,var(--red) 30%,var(--line));border-radius:14px;padding:16px 18px}
.stark .k{font-weight:800;color:var(--red);font-size:14.5px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.stark p{margin:0;font-size:15.5px}

/* ============================================================================
   READABILITY SCALE — 18px base, per the PAG house rule (PMApplianceHub
   wwwroot/css/app.css: body{font-size:19.5px;line-height:1.6}). The teal mockups
   run compact (~14px); this scales the whole type system up to the 18px baseline
   so every screen reads comfortably. Kept as an override so the lifted mockup CSS
   above stays verbatim.
   ============================================================================ */
html{font-size:19.5px}
body{font-size:19.5px;line-height:1.55}

.eyebrow{font-size:15.5px}
.subhead{font-size:19.5px}

.card{padding:17px}
.card h3{font-size:19.5px}
.card h3 .cnt{font-size:15.5px}
.pill{font-size:15px;padding:3px 11px}
.conf{font-size:14px}

.tile{padding:18px}
.tile .cap{font-size:15px}
.tile .big{font-size:34.5px}
.tile .note{font-size:16px}

.lens-h h2{font-size:25.5px}
.lens-h .tag{font-size:14.5px}
.lens-h .desc{font-size:17.5px}

.rung .lvl{font-size:19.5px}
.rung .lvl small{font-size:15.5px}
.rung .pct{font-size:22.5px}
.chain .foot{font-size:17px}
.because{font-size:15px}

.row .lead .t{font-size:18.5px}
.row .lead .m{font-size:15.5px}
.idrow{font-size:18.5px}
.idrow .mono{font-size:14.5px}
.mtg .when{font-size:16px}
.mtg b{font-size:18.5px}
.team{font-size:18.5px}
.team .why{font-size:15.5px}
.stark .k{font-size:16.5px}
.stark p{font-size:18.5px}
.btn{font-size:16px}
.btn.sm{font-size:14.5px}
.field{font-size:17.5px}

/* Meetings list */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:22px}
.mtile{display:flex;flex-direction:column}

/* Section count chip — used by the Rock Review and IDS headers and by the collapse toggles.
   Global rather than section-scoped because only one agenda section renders at a time, so a
   style emitted inside one section is absent from the other. */
.cntchip{display:inline-block;min-width:20px;padding:1px 7px;margin-left:7px;border-radius:10px;
         background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:800;
         vertical-align:middle;font-variant-numeric:tabular-nums;text-align:center}

/* IDS section headings and the standing toggle (Phase 2). Global for the same reason .cntchip is:
   only one agenda section renders at a time. */
.idsstd{background:none;border:1px solid var(--line);border-radius:6px;padding:2px 7px;cursor:pointer;
        font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.idsstd:hover{color:var(--accent);border-color:var(--accent)}


/* Rock Review row colour, from status AND confidence (see RockRowTone). Full-row background
   rather than a left edge, so the quarter reads as a block of colour the way LevelTen's does.
   Tints are alpha over the row's own background, so they hold up in either theme instead of
   painting a light wash under dark text. */
.row.rockrev.rk-green{background:rgba(34,160,90,.16)}
.row.rockrev.rk-yellow{background:rgba(230,175,20,.20)}
.row.rockrev.rk-pink{background:rgba(226,70,90,.18)}
.row.rockrev.rk-green,.row.rockrev.rk-yellow,.row.rockrev.rk-pink{
    padding:8px 12px;border-radius:8px;margin:4px 0}

/* DONE ROCKS (RockCardClasses.Done). The whole card — Rock Review rows, the Quarterly board, sub-rock
   cards, the Rocks page — goes a noticeably darker muted green with a darker green border, so a
   finished rock reads as finished without the word "Done". Status is the only trigger; the class
   comes and goes with it. Nothing is dimmed, struck through or disabled: the controls stay live so a
   Done rock can be reopened. Secondary text steps up to --ink because --muted on this ground falls
   under 4.5:1 (light: #5c6976 on #abdbc0 ≈ 3.6:1; --ink ≈ 10.8:1. dark: --ink #e7ecf2 on ≈#235142 ≈ 8:1).
   The selectors repeat with the tone classes so this wins on specificity without !important. */
.rock-card--done,.row.rockrev.rock-card--done,.row.rockrow.rock-card--done,.subkid.rock-card--done{
    background:var(--done-card);border:1px solid var(--done-card-line);border-radius:8px;--muted:var(--done-muted);--green:var(--done-pos);--red:var(--done-neg)}
.row.rockrow.rock-card--done{padding:8px 12px;margin:4px 0}
.row.rockrev.rock-card--done .grow .m,.row.rockrow.rock-card--done .rockmeta,.row.rock-card--done .grow .m,.row.rock-card--done .m,
.subkid.rock-card--done .skowner,.subkid.rock-card--done .skdue,.subkid.rock-card--done .skstatus,
.row.rock-card--done .idcode,.row.rock-card--done .rkro,.row.rock-card--done .muted,.row.rockrow.rock-card--done .rocknote{color:var(--ink)}
.rock-card--done .field,.rock-card--done select,.rock-card--done input,.rock-card--done .btn:not(.primary),.rock-card--done .mini{background:var(--surface)}

/* ROCK STATUS, ONE TREATMENT EVERYWHERE (2026-09-29) — the review cards' selectors, the cascade cards'
   status pills, Sub-Rock rows and the Financials status pickers. Every status is a solid fill with its own
   ink, never only a border: On Track green, At Risk amber, Off Track red, Done dark green. Contrast ≥ 4.5:1
   in both themes (light: white on #177245 ≈ 6.4:1, #1d1300 on #e59400 ≈ 9:1, white on #b42318 ≈ 6.5:1,
   white on #0f5132 ≈ 9:1; dark: each dark ink on its light fill ≥ 6:1). The dropdown's own list stays
   on the surface colours so its options remain readable. The status class is written twice in the select
   rules on purpose: it lifts them over ".rock-card--done .field" (the Done card's control reset) without !important. */
select.rv-status--ontrack.rv-status--ontrack,select.finstatus.fs-on,:is(b,span).rv-status-ro.rv-status--ontrack,span.rc-status.rc-status--ontrack{background-color:var(--st-on);border-color:var(--st-on);color:var(--st-on-ink)}
select.rv-status--atrisk.rv-status--atrisk,select.finstatus.fs-risk,:is(b,span).rv-status-ro.rv-status--atrisk,span.rc-status.rc-status--atrisk{background-color:var(--st-risk);border-color:var(--st-risk);color:var(--st-risk-ink)}
select.rv-status--offtrack.rv-status--offtrack,select.finstatus.fs-off,:is(b,span).rv-status-ro.rv-status--offtrack,span.rc-status.rc-status--offtrack{background-color:var(--st-off);border-color:var(--st-off);color:var(--st-off-ink)}
select.rv-status--done.rv-status--done,select.finstatus.fs-done,:is(b,span).rv-status-ro.rv-status--done,span.rc-status.rc-status--done{background-color:var(--st-done);border-color:var(--st-done);color:var(--st-done-ink)}
select[class*="rv-status--"] option,select.finstatus option{background:var(--surface);color:var(--ink)}

/* The drawer's "Edit this rock" block. Visually separated from Capture above it so a rename
   never reads as another capture type. */
.drawer .rockedit{margin-top:18px;border-top:1px solid rgba(128,128,128,.3);padding-top:14px}
.drawer .rockedithead{font-weight:800;font-size:15px;margin-bottom:2px}

/* ══ MEETINGS LIST ACTIONS — WRAP, NEVER CLIP ════════════════════════════════════════════════
   Open room / Recap / Reschedule on /meetings. Was an inline white-space:nowrap group, which could
   not shrink, so a narrow row pushed the buttons off the right edge. A wrapping flex group instead:
   the whole group drops below the meeting details when the row is short of room, and the buttons
   wrap one by one if even that line is too narrow. Each button keeps its own label on one line. */
.mtg-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%}
.mtg-actions > .btn{white-space:nowrap}
/* By-team table: the width that decides the layout is the table's own, not the viewport's (the
   sidebar and .content zoom both eat into it), so this is a container query. Below 600px each row
   stacks: team, next meeting, count, then the actions on their own line. */
.mtg-team-wrap{container-type:inline-size}
@container (max-width:600px){
  .mtg-team-table thead{display:none}
  .mtg-team-table,.mtg-team-table tbody,.mtg-team-table tr,.mtg-team-table td{display:block;width:100%}
  .mtg-team-table tr{padding:6px 0}
  .mtg-team-table td{padding-top:4px !important;padding-bottom:4px !important}
  .mtg-team-table td.muted::before{content:"Meetings: "}
}

/* SCORECARDS WORKSPACE — FULL WIDTH ON DESKTOP (2026-10-03, preview). Every Admin → Scorecards page renders the
   workspace header (.sw); on those pages the 1240px reading cap goes, so the spreadsheet mapper can use the space
   between the navigation and the right edge. Text size and the page zoom are unchanged; phones are unaffected. */
@media (min-width: 821px) {
    .app .content:has(.sw) { max-width: none; padding-left: 28px; padding-right: 28px; }
}

/* R22 — To-Do sub-actions: each one is a full To-Do row, indented under its parent with a guide line. */
.tdchild{margin-left:34px;padding-left:10px;border-left:2px solid var(--line)}
.tdchild .tdrow{min-height:0}
.tdsubbtn{margin:0 0 6px 34px;border:0;background:none;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;padding:2px 4px}
.tdsubbtn:hover{text-decoration:underline}
.tdsubadd{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 0 8px 10px}
.tdsubadd input.field{flex:1 1 240px;min-width:0}
@media (max-width:640px){.tdchild{margin-left:14px;padding-left:8px}.tdsubbtn{margin-left:14px}}
/* R22 — Q4 targets: accountable leaders strip and the "Use YTD GM %" button. */
.q4-acct select.field{min-width:150px;height:32px;padding:2px 24px 2px 8px;font-size:14px}
.q4t-useytd{margin-left:6px;font-size:12px;padding:1px 8px}
/* R22 — Leadership-approved Rocks awaiting the receiving team's acceptance. */
.acc-panel{margin:8px 0 12px;padding:10px 12px;border:1px solid #f59e0b;border-left:5px solid #f59e0b;border-radius:8px;background:rgba(245,158,11,.07)}
.acc-head{font-weight:800;font-size:15px;margin-bottom:4px}
.acc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:5px 0;border-top:1px solid rgba(128,128,128,.15)}
.acc-row:first-of-type{border-top:0}
.acc-name{flex:1 1 260px;min-width:0;font-weight:600;overflow-wrap:anywhere}
.acc-sub{color:var(--muted);font-weight:400;font-size:13px}

/* R23 — Leadership's read-only list of the Rocks it approved and sent to other teams (L10Room.LeadershipSentPanel). */
.sent-panel{margin:8px 0 12px;padding:10px 12px;border:1px solid rgba(99,102,241,.35);border-left:5px solid #6366f1;border-radius:8px;background:rgba(99,102,241,.05)}
.sent-row{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-top:1px solid rgba(128,128,128,.15)}
.sent-row:first-of-type{border-top:none}
.sent-name{font-weight:700;font-size:16px}
.sent-meta{font-size:14px;color:var(--muted)}
.sent-meta b{color:inherit}
.sent-prop{font-size:14px;color:#92400e}