/* control-centre.css — the Control Centre (agent-platform community slice,
 * Phase 2), rendered by src/public/js/control-centre.js into
 * #control-centre-root.
 *
 * Design system: the app shell (app-shell.css) — the same primitives the
 * Outreach dashboard is built from, so this page is indistinguishable from
 * the Outreach/Community area. The markup reuses the shell's global
 * components directly (.page-head + h1.display + .sub, .card / .card-head /
 * .card-title + .count, .badge / .badge-*, .btn / .btn-primary /
 * .btn-secondary); this file adds only the structure the shell doesn't
 * have: the .cc-* item rows, the in-card segment control (the Outreach
 * hero's .day-tabs idiom — also reused for the UX-round-2 type-filter
 * pills), the neutral channel chip, the expand-in-place panel (detail grid
 * + inline kind-aware preview), empty states, skeleton shimmer, the head
 * status pill (the .live-pill idiom) and the scoped confirm/reschedule
 * modal. Every value is an app-shell token (--surface/-2/-3, --text/-2/-3,
 * --border/-soft, --accent*, --good/-soft, --danger/-soft, --radius*) or
 * the shell's own literal where the shell uses literals (row padding /
 * font sizes mirror app-shell.css's .row + .card-head; tab pills mirror
 * outreach-dashboard.css's .day-tabs). Mobile-first: single column at
 * 375px, ≥48px touch targets on coarse pointers, no horizontal scroll.
 */

.cc-page { min-width: 0; }

/* Nav alert pill — the red "N waiting for approval" count appended to the
   Control Centre item on the desktop sidebar AND the mobile hamburger
   (rendered by sidebar-nav.js's _ccAlertPill). The span carries BOTH classes
   — `pill cc-nav-pill` — so on the desktop rail it IS the shell's
   .nav-item .pill (app-shell.css:147: margin-left:auto right-alignment, the
   collapsed-rail dot at :2607, and app-shell.js's wrapLabels keeps the label
   BEFORE any `.pill`); cc-nav-pill then recolours it urgent-red and styles
   the hamburger context where the bare .pill has no rules. */
.cc-nav-pill {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
  vertical-align: middle;
}
/* Red beats the rail's accent/accent-deep pill background (both states;
   loaded after app-shell.css so equal specificity resolves our way). */
.nav-item .pill.cc-nav-pill,
.nav-item.active .pill.cc-nav-pill { background: var(--danger); color: #fff; }
/* Mobile hamburger: .hamburger-item is a flex row (app-styles-v2.css:981) —
   auto margin sends the count to the right edge, trailing the name. */
.hamburger-item .cc-nav-pill { margin-left: auto; }

/* ============ PAGE HEAD ============ */
/* ══ THE COMPACT BAR (round 2) ══════════════════════════════════════════════
   ⚠️ THIS REPLACES .page-head ON THIS PAGE ONLY, and it is a deliberate step
   outside the design system rather than an oversight.

   Alex, 2026-08-26, on the round-1 screenshots: *"I don't like how I have to
   scroll down to see the full calendar. I've said it a hundred percent… you
   probably don't need to use up all that space at the top."*

   The canonical .page-head (app-shell.css:286-349) is crumbs + a 34px
   h1.display + a strapline — around 150px, and every pixel of it repeats what
   the sidebar already says. On a 900px laptop that is what pushed the last two
   calendar rows under the fold. Everywhere else in the app that cost buys
   orientation on a page you arrived at from somewhere else; here the page IS
   the calendar, so it buys nothing.

   52px, one row, and the only element on it that changes is the pill. */
.cc-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.cc-bar-id { display: flex; align-items: baseline; gap: 12px; flex: 1 1 auto; min-width: 0; }
.cc-bar-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  white-space: nowrap;
}
/* The strapline survives as a quiet clause rather than a paragraph — it still
   says what the page is for, and costs a line of nothing to say it. */
.cc-bar-sub {
  font-size: 12.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-bar-meta { display: flex; align-items: center; gap: 10px; flex: none; }

/* ⚠️ .cc-cal-full IS DEFINED IN schedule-calendar.css, NOT HERE. It looks like
   it belongs to this file — it wears the cc- prefix because the Control Centre
   supplies the slot — but the calendar owns its own spacing, and a second
   definition here would be exactly the .cc-row fault
   tests/css-namespace-collisions.test.js exists to catch. It caught this one. */

/* ══ THE TOP-RIGHT CORNER BELONGS TO THE HAMBURGER ═════════════════════════
   ⚠️ NOT OURS TO USE, AND WE WERE USING IT. `.hamburger-btn` is
   `position: fixed; top: 12px; right: 12px` (app-styles-v2.css) and appears at
   ≤1100px — it is the ONLY navigation at that width. The Control Centre put a
   Refresh button in the same corner, so on Alex's phone the two sat on top of
   each other.

   Alex, 2026-08-26: *"don't forget you've got the hamburger there as well. I
   know you put a refresh button there but I wouldn't have that. The hamburger
   has to go there."*

   So: reserve the corner from ≤1100px (where the hamburger appears — matching
   ITS breakpoint, not a rounder one, or there is a band where we are wrong
   again), and drop Refresh entirely on a phone. Refresh is a repair control,
   not a daily one: the page loads on arrival and reloads after every action.

   ⚠️ THE NAME STAYS AT EVERY WIDTH. Alex, same message: *"The control centre
   makes sense having that name there, especially for when they're new to using
   it."* A screen that assumes you know where you are only works for the person
   who built it. */
@media (max-width: 1100px) {
  .cc-bar { padding-right: 56px; }
}
/* One row, not two: name + the count that takes you to them. 95px → 46px. */
@media (max-width: 900px) {
  .cc-bar {
    flex-wrap: nowrap; gap: 10px; padding: 6px 0 8px;
    min-height: 0; margin-bottom: 8px;
    align-items: center;
  }
  .cc-bar-sub { display: none; }
  .cc-bar-name { font-size: 18px; }
  .cc-bar-meta { width: auto; flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
  /* ⚠️ THREE SELECTORS DEEP, AND EVERY LEVEL WAS EARNED. This is the third time
     in one hour that the button primitive has silently beaten a rule meant to
     hide a button on this page:
       `.cc-refresh`            0,1,0 — loses to `.cc-page .btn` on specificity
       `.cc-page .cc-refresh`   0,2,0 — TIES, and loses on ORDER, because this
                                        media block sits at the top of the file
                                        and `.cc-page .btn` is defined below it
       `.cc-page .btn.cc-refresh` 0,3,0 — wins
     The same fault hid the calendar's Today button (which is what squeezed the
     date to five lines). A `display` rule that silently loses looks exactly like
     one that works, and the only way to tell is to render and measure.
     (CODING-STANDARDS §"The Control Centre".) */
  .cc-page .btn.cc-refresh { display: none; }
  /* ⚠️ SCOPED, FOR THE FOURTH TIME IN THIS FILE. A bare `.cc-live-pill` here
     ties the base rule below and loses on order — this whole media block sits
     ABOVE the definitions it is trying to override. `.cc-bar` prefix wins it.
     The pill is a BUTTON now, so it needs a real hit area: 20px of paint with
     `::after` carrying the target out to 44. */
  .cc-bar .cc-live-pill { padding: 4px 10px; font-size: 10.5px; position: relative; }
  .cc-bar button.cc-live-pill::after { content: ""; position: absolute; inset: -12px -4px; }
}

.cc-head-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Head status pill — the .live-pill idiom (outreach-dashboard.css:1192)
   with the shell's .badge-dot (app-shell.css:497) as the non-colour signal:
   colour is never the only signal — the text carries the state too. */
.cc-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cc-live-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cc-live-pill.pending { background: var(--accent-soft); color: var(--accent-deep); }
.cc-live-pill.clear { background: var(--good-soft); color: var(--good); }

/* ⚠️ THE PENDING PILL IS A BUTTON NOW. Alex, 2026-08-26: *"Waiting for you, when
   you click on Waiting for you, actually takes you to the things that you're
   waiting on."* It is the first thing on the page and it names work; a thing
   that names work and does nothing when pressed is a thing you learn to stop
   pressing. It opens Approvals and scrolls to it — opening matters, because
   scrolling to a CLOSED section lands you on the row you pressed to get past. */
button.cc-live-pill {
  border: 0; font-family: inherit; cursor: pointer;
  transition: background .12s, color .12s;
}
button.cc-live-pill.pending:hover { background: #e2d9ff; }
button.cc-live-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-chev-sm { width: 10px; height: 10px; opacity: .8; }

/* ============ BUTTONS ============ */
/* The shell's canonical button primitives (app-shell.css:461-478),
   re-asserted scoped to this page + its body-appended modals: the bare
   .btn / .btn-primary globals are clobbered later in app.html's cascade
   (app-styles-v2.css:378, discover.css:126). Same defence
   outreach-dashboard.css uses for .focus-card .btn / .focus-actions .btn. */
.cc-page .btn,
.cc-modal-overlay .btn {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  transition: transform .1s, background .12s, color .12s;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}
.cc-page .btn-primary,
.cc-modal-overlay .btn-primary { background: var(--accent); color: #fff; }
.cc-page .btn-primary:hover,
.cc-modal-overlay .btn-primary:hover { background: var(--accent-deep); }
.cc-page .btn-secondary,
.cc-modal-overlay .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.cc-page .btn-secondary:hover,
.cc-modal-overlay .btn-secondary:hover { background: var(--surface-2); }

/* Row + head buttons take the compact size the shell uses inside rows
   (.row .row-actions .btn, app-shell.css:2028). */
.cc-row-actions .btn,
.cc-head-meta .btn { padding: 8px 14px; font-size: 12.5px; }

/* Minimum 48px touch target — CODING-STANDARDS "no exceptions". The shell
   gates its touch sizing behind pointer:coarse (app-shell.css:2712). */
@media (pointer: coarse) {
  .cc-btn-touch { min-height: 48px; }
  .cc-tabs button { min-height: 44px; }
}

/* ============ CARDS GRID ============ */
/* One stacked column on mobile; the dashboard 2-column grid on desktop
   (≥769px, the design-system breakpoint). align-items:start so the short
   card never stretches to the tall one. Gap mirrors the shell's .two-col /
   .ov-grid (18px, app-shell.css:678/1327). Future cards added to .cc-grid
   flow into the grid with no further CSS. */
.cc-grid { display: flex; flex-direction: column; gap: 18px; }
/* The shell's stacked-card spacing rule (.card + .card { margin-top:14px },
   app-shell.css:1483) leaks onto the SECOND grid child and sat "Your
   schedule" 14px below "Approvals" (Alex 2026-07-23). The grid gap owns
   all spacing here — kill the sibling margin in both layouts. */
.cc-grid > .card + .card { margin-top: 0; }
@media (min-width: 769px) {
  .cc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start; /* short card must not stretch to the tall one */
  }
}
/* ============ "NEEDS YOU" ============ */
/* Alex, 2026-08-15: this card answers "what should I do now", while the two
   below answer "what did I ask for" — so it leads and spans the full grid
   width rather than sharing a row with one of them. On mobile the grid is a
   single column and the span is a no-op. */
.cc-span { grid-column: 1 / -1; }

/* A row here is a BUTTON, not a div with a click handler: it is a navigation
   control, so it has to be reachable by keyboard and announced as one. The
   reset undoes the UA button styling the shell never had to think about. */
.cc-needs {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 60px;      /* thumb-sized, per the mockup */
  padding: 12px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-light, #e8e8e8);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.cc-needs:last-child { border-bottom: 0; }
.cc-needs:hover { background: var(--bg-hover, #fafafa); }
.cc-needs:focus-visible { outline: 2px solid var(--primary, #6c63ff); outline-offset: -2px; }
.cc-needs-ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--primary-subtle, rgba(108, 99, 255, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.cc-needs .cc-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cc-needs-t { font-size: 14.5px; font-weight: 645; color: var(--text-primary, #1e1b4b); }
.cc-needs-s { font-size: 13px; color: var(--text-secondary, #555570); }
.cc-needs-chev { flex: none; color: var(--text-muted, #9d9db5); font-size: 18px; line-height: 1; }

/* Deep-link anchors (#approvals / #schedule) land clear of the viewport
   top — the shell's .sec scroll-margin idiom (app-shell.css:1439). */
.cc-card { scroll-margin-top: 24px; }

/* ============ SEGMENT CONTROL (Upcoming / History) ============ */
/* The in-card pill tab group the Outreach hero uses — .day-tabs,
   outreach-dashboard.css:894-906 — namespaced so this page doesn't depend
   on outreach-dashboard.css being loaded. Sits on the right of .card-head,
   exactly where the hero's day-tabs sit in .oh-head. */
.cc-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: 9px;
  flex-shrink: 0;
}
.cc-tabs button {
  border: none; background: transparent;
  font-size: 12px; padding: 5px 11px; border-radius: 7px;
  color: var(--text-2); font-weight: 500;
  font-family: inherit; cursor: pointer;
}
.cc-tabs button.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

/* ============ TYPE FILTER PILLS (UX round 2) ============ */
/* The same .cc-tabs pill-group idiom, sitting in its own strip under the
   card head (rendered only when the card holds ≥ 2 categories). The muted
   count inside each pill mirrors the shell's .card-title .count tone. */
.cc-filter-row {
  padding: 12px 16px 0; /* aligned to the .cc-list inset below */
}
.cc-filter-tabs { display: inline-flex; flex-wrap: wrap; }
.cc-pill-n {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--text-3);
}
.cc-tabs button.active .cc-pill-n { color: var(--text-2); }

/* ============ CHANNEL CHIP (UX round 2) ============ */
/* Small NEUTRAL chip in the row meta line stating the medium ("Member
   email" / "Community post" / "Demo item") — quiet surface-2 tone so it
   never competes with the status .badge. */
.cc-chip {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: middle;
  margin-right: 4px;
}

/* ============ ITEM ROWS ============ */
/* Readability pass (Alex 2026-07-23, vs the Outreach dashboard reference):
   flush divider-rows read as one dense wall, so each item is now its OWN
   block — the Outreach dashboard's card-in-card idiom: a softly-tinted
   (surface-2), border-soft, rounded block with a small gap between blocks.
   Separation + tone difference is what breaks the page up. */
.cc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 18px;
}
.cc-row {
  position: relative; /* anchors the mobile expand caret */
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: 12px;
  column-gap: 16px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  transition: background .12s;
  flex-wrap: wrap;
}
.cc-row:hover { background: var(--surface-3); }
.cc-row-main { flex: 1 1 240px; min-width: 0; }
/* Subject lines never wrap (Alex): one line, ellipsised — the full text
   lives in the title tooltip and the expand panel. */
.cc-row-line {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-row-meta {
  color: var(--text-3);
  font-size: 12.5px;
  font-family: "JetBrains Mono", monospace;
  margin-top: 2px;
}
.cc-row-meta a,
.cc-preview-link { color: var(--accent); font-weight: 500; }
/* §APPROVAL-RECIPIENTS — how many people this actually reaches.
   Alex, 2026-08-07: *"it should always quote not only the time, not only what
   it is, but also the number of recipients."*
   Weighted up against the rest of the meta line because it is the number that
   decides whether he approves. Tabular figures so 1,000 and 9,999 line up in a
   stacked list, same reasoning as the countdown below. */
.cc-row-meta .cc-recipients {
  /* ⚠️ A LITERAL, NOT var(--text-2), AND THAT IS DELIBERATE.
     This file's header claims "every value is an app-shell token", but those
     tokens (--text-2/-3, --surface, --accent) are defined in exactly ONE place:
     #od-content-root[data-palette=…] in outreach-dashboard.css. On this page
     they resolve to NOTHING, and the meta line is grey by INHERITANCE rather
     than by token. So var(--text-2) here would have silently produced no colour
     change at all and the emphasis would have been lost.
     Same trap that turned the subscribers banner to mud earlier today; #4d5168
     is the value --text-2 holds where it IS defined. */
  color: #4d5168;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Live countdown to the fire time ("· in 12d 4h 03m 21s") — ticks every
   second (control-centre.js _tickCountdowns). Tabular figures so the clock
   doesn't judder as digits change; the meta line is already monospace, this
   pins it for any fallback font. */
.cc-countdown {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-2);
}
/* Failure detail — the shell's .row-error (app-shell.css:2038-2049). */
.cc-row-error {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--danger-soft);
  border-left: 3px solid var(--danger);
  color: var(--danger);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-wrap: anywhere;
}
.cc-row-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============ TIME-PROXIMITY + LIVE-SEND TREATMENTS (round 3) ============ */
/* urgencyOf (control-centre.js) tags schedule rows: firing TODAY → green,
   within the HOUR → amber, ACTIVELY SENDING → a gentle animated sweep.
   Shell tokens only (--good/-soft, --warn/-soft — app-shell.css:25-28);
   colour is never the only signal (the chip + meta line say it in words).
   The 3px accent border is absorbed into the 22px gutter so row text stays
   aligned. Doubled class beats the .cc-row:hover surface-2 rule. */
.cc-row.cc-urgency-today,
.cc-row.cc-urgency-imminent,
.cc-row.cc-urgency-sending,
.cc-row.cc-send-paused { padding-left: 15px; } /* 3px accent absorbs into the 18px */
.cc-row.cc-urgency-today,
.cc-row.cc-urgency-today:hover {
  border-left: 3px solid var(--good);
  background: var(--good-soft);
}
.cc-row.cc-urgency-imminent,
.cc-row.cc-urgency-imminent:hover,
.cc-row.cc-send-paused,        /* held mid-send is still "in flight", so still amber */
.cc-row.cc-send-paused:hover {
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
}

/* ══ ONE CONVENTION, NOT TWO ════════════════════════════════════════════════
   Alex, 2026-08-26, approving the calendar's state system: *"We have to use the
   same colour conventions that we're using on the control panel… as long as
   it's used for everything."*

   ⚠️ THIS SWAPS WHAT RED MEANS ON THIS PAGE, DELIBERATELY. Amber used to carry
   both "within the hour" and "waiting on you"; red carried failure. That left
   the screen with no single colour meaning ACT, so a coach scanning it had to
   read every row to find the four that were work.

   Now: RED = needs you, and nothing else on the page is red. Amber keeps only
   its time meaning (imminent, in flight, held). A failure is INK — see
   .cc-row-missed below — because a send that already missed its slot is a fact
   rather than a queue item, and colouring it red would dilute the one signal
   this whole treatment exists to protect.

   The 3px accent is absorbed into the gutter exactly as the rules above do it,
   so row text stays aligned. */
.cc-row.cc-needs-you { padding-left: 15px; }
.cc-row.cc-needs-you,
.cc-row.cc-needs-you:hover {
  border-left: 3px solid var(--danger);
  background: var(--danger-soft);
}

/* DIDN'T GO — ink, not red. Border-strong rather than a tint so it reads as a
   hole in the record: high contrast, no alarm colour. */
.cc-row.cc-row-missed { padding-left: 15px; }
.cc-row.cc-row-missed,
.cc-row.cc-row-missed:hover {
  border-left: 3px solid var(--text);
  background: var(--surface);
}
/* Actively sending — a slow, low-contrast sweep between the good tint and
   the surface (the cc-shimmer idiom, much gentler): visibly alive, nowhere
   near seizure territory (~0.3Hz, pastel-on-white). */
.cc-row.cc-urgency-sending,
.cc-row.cc-urgency-sending:hover {
  border-left: 3px solid var(--good);
  background: linear-gradient(90deg, var(--good-soft) 25%, var(--surface) 50%, var(--good-soft) 75%);
  background-size: 200% 100%;
  animation: cc-send-sweep 3.2s ease-in-out infinite;
}
@keyframes cc-send-sweep {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-row.cc-urgency-sending,
  .cc-row.cc-urgency-sending:hover { animation: none; background: var(--good-soft); }
}

/* The live-send counts line under the row title ("Sending — 1,240 of 18,000
   sent" / "Paused — 16,760 remaining") — the meta-line type, state-coloured. */
.cc-send-progress {
  margin-top: 2px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--good);
}
.cc-send-progress.held { color: var(--warn); }

/* ============ EXPAND-IN-PLACE (UX round 2) ============ */
/* Clicking a row body opens an inline panel under it (accordion — one open
   per card). The row gets a rotating caret affordance; the panel is a
   recessed surface-2 block padded to the card gutter, holding the detail
   grid, optional actions (Reschedule on pending rows) and the lazy
   kind-aware preview. Full-width on mobile, never horizontal-scrolls (the
   email iframe is scaled, the post body wraps). */
.cc-row.cc-expandable { cursor: pointer; }
.cc-caret {
  display: inline-flex;
  align-items: center;
  color: var(--text-4);
  flex: none;
  transition: transform .15s ease;
}
.cc-caret.open { transform: rotate(90deg); }
.cc-row.cc-open { background: var(--surface-2); border-bottom-color: transparent; }
/* The expand panel docks onto its (now free-standing) row block: the -10px
   margin swallows the list gap, the shared border continues down, and the
   open row hands its bottom corners over (.cc-open below). */
.cc-expand {
  margin-top: -12px; /* swallows the .cc-list gap exactly */
  padding: 12px 18px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-top: none;
  border-radius: 0 0 10px 10px;
}
.cc-row.cc-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cc-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 18px;
}
.cc-detail-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 2px;
}
.cc-detail-v {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.cc-detail-code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 2px 6px;
  overflow-wrap: anywhere;
}
.cc-expand-actions { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.cc-expand-preview { margin-top: 14px; }

/* Inline community-post preview (community_post_publish) — title + the
   server-sanitised body_html, boxed like the email pane. */
.cc-post-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  max-height: 420px;
  overflow: auto;
}
.cc-post-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
}
.cc-post-body { font-size: 14px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.cc-post-body img { max-width: 100%; height: auto; }
.cc-post-body p { margin: 0 0 10px; }
.cc-post-body p:last-child { margin-bottom: 0; }

/* ============ EMPTY STATES ============ */
/* The shell's in-card empty block (.empty-block, app-shell.css:948-970;
   icon tile from .empty .ico, app-shell.css:2072): 56px surface-3 tile,
   Bricolage title, muted body copy. */
.cc-empty {
  text-align: center;
  padding: 32px 24px 28px;
  color: var(--text-3);
}
.cc-empty-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
}
.cc-empty-t {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.cc-empty-d {
  font-size: 14px;
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto;
}
.cc-empty-inline { color: var(--text-3); font-size: 13.5px; padding: 14px 0; }

/* ============ SKELETON LOADING ============ */
/* Never a blank block (blueprint Contract B). The shell shimmer idiom
   (launch-studio.css:667 .ph / ls-shimmer) on shell tokens. */
.cc-skel {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--border) 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: cc-shimmer 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes cc-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.cc-skel-title { width: 40%; max-width: 200px; height: 17px; } /* stands in for the 17px .card-title */
.cc-skel-row { padding: 14px 22px; border-bottom: 1px solid var(--border-soft); }
.cc-skel-row:last-child { border-bottom: none; }
.cc-skel-line { height: 13px; width: 85%; }
.cc-skel-line.cc-skel-short { width: 45%; margin-top: 8px; }

/* ============ CONFIRM DIALOG + EMAIL PREVIEW MODAL ============ */
/* Appended to <body> (outside .cc-page), so the type baseline is set here.
   Overlay + surface/radius/shadow mirror the shell's body-appended dialog
   (.rel-editor-overlay / .rel-editor, outreach-dashboard.css:3826-3838);
   tokens resolve from app-shell.css's :root. z-index unchanged so stacking
   behaviour stays exactly as before. */
.cc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 8, 25, 0.5);
  backdrop-filter: blur(6px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.cc-modal {
  background: var(--surface);
  color: var(--text);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(13, 8, 25, 0.35);
  padding: 22px 24px;
  width: 420px;
  max-width: 100%;
}
.cc-modal h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 6px;
}
.cc-modal p { margin: 0 0 18px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.cc-modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* Reschedule dialog fields — the scoped cc-modal grows a labelled
   datetime-local input (UX round 2). Input chrome mirrors the shell's
   field tone (surface + border + radius). */
.cc-modal-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0 0 6px;
}
.cc-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  margin-bottom: 12px;
}
.cc-modal-input:focus { outline: none; border-color: var(--accent); }
.cc-modal-note { margin: 0 0 14px; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }

/* G4 — "Going to N people", and the list behind it.
   The count in the expand panel is a link; the list opens in the same scoped
   cc-modal, widened and given a scrolling body because it holds up to 100
   rows at a time. */
.cc-recipients-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cc-recipients-link:hover { color: var(--accent-deep); }
.cc-detail-note {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.45;
}
.cc-modal-list { width: 520px; }
.cc-modal-list h3 { margin-bottom: 2px; }
.cc-recip-sub { margin: 0 0 4px !important; color: var(--text-2); font-size: 13px; }
.cc-recip-note { margin: 0 0 12px !important; color: var(--text-3); font-size: 12.5px; }
.cc-recip-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cc-recip {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.cc-recip:last-child { border-bottom: none; }
.cc-recip-name { color: var(--text); overflow-wrap: anywhere; }
.cc-recip-email { color: var(--text-3); overflow-wrap: anywhere; text-align: right; }
.cc-recip-count { margin: 0 0 14px !important; color: var(--text-3); font-size: 12.5px; }
@media (max-width: 560px) {
  .cc-modal-list { width: 100%; }
  .cc-recip { flex-direction: column; gap: 2px; }
  .cc-recip-email { text-align: left; }
}

/* Email preview pane — INLINE inside the expand panel since UX round 2
   (the modal variant is retired; one coherent pattern). Same
   _cwShowEmailConfirm technique: true-width iframe scaled to fit, so the
   fixed-width email never overflows — including phones. */
.cc-preview-subject {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-preview-subject strong { color: var(--text); font-weight: 600; }
.cc-preview-pane {
  max-height: 480px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.cc-preview-holder { margin: 0 auto; }
.cc-preview-holder iframe { border: 0; display: block; transform-origin: top left; }

/* ============ MOBILE (≤640px) ============ */
@media (max-width: 640px) {
  .cc-page .page-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .cc-head-meta { justify-content: space-between; text-align: left; }
  .cc-head-meta .btn { flex: 1 1 auto; justify-content: center; }
  /* The Outreach hero head wraps the same way at small widths
     (outreach-dashboard.css:3013 .oh-head). */
  .cc-card .card-head { flex-wrap: wrap; }
  /* flex-wrap: nowrap is LOAD-BEARING, and it is a correctness fix rather
     than a tweak (measured 2026-08-07, §CC-CARD-PADDING). The base rule sets
     flex-wrap: wrap because the DESKTOP row is a horizontal line that should
     wrap its actions onto a second row when narrow. Once the direction turns
     to column, every child is already on its own line, so "wrap" only means
     "allow MULTIPLE COLUMNS" — and in a multi-line flex container
     align-items:stretch stretches each item to its FLEX LINE, whose cross
     size is the widest item's max-content: the nowrap title. That sized
     .cc-row-main to 480px inside a 346px row, so the ellipsis never engaged
     (line box == text width) and the title ran out through the card. */
  /* ⚠️ `:not(.cc-needs)` IS THE FIX FOR THE THREE-LINE ROW, and the cause was
     one shared class. A Needs-you row is `class="cc-row cc-needs"`, so this
     rule stacked it too: the 38px icon tile landed on its own line, the title
     and subtitle on the next, and the chevron alone on a third carrying nothing
     — about 140px for two lines of content, two rows to a phone screen. Alex,
     2026-08-26, sent three screenshots of that.

     `.cc-needs` does not need the stacking. The reason the general rule exists
     (see the note above: `.cc-row-main`'s 240px flex-basis, and the actions
     needing their own lines) does not apply — `.cc-needs .cc-row-main` already
     sets `flex: 1; min-width: 0`, and a Needs row has no action buttons at all.
     It is icon + text + chevron, which fits one 60px line at 390px. */
  .cc-row:not(.cc-needs) { flex-direction: column; align-items: stretch; gap: 10px; flex-wrap: nowrap; }
  /* Keep the one-line shape explicit rather than merely un-overridden, so the
     next person editing the rule above can see this row opted out on purpose. */
  .cc-needs { flex-direction: row; align-items: center; gap: 12px; }
  .cc-needs .cc-needs-chev { align-self: center; }
  /* §CONTROL-CENTRE-MOBILE.1 (Alex 2026-08-07): "text doesn't spill over the
     edges of the boxes… it's getting very close." Two causes on his
     screenshot: (a) the caret is pinned absolute top-right with NO reserved
     gutter, so the title's ellipsis boundary was the caret itself — text ran
     visually flush into it; (b) expandable rows had no breathing room on the
     right at all. Reserve the caret's column so the title always stops
     clear of it. */
  .cc-row.cc-expandable { padding-right: 40px; }
  /* Long unbroken meta values (emails, slugs) must wrap inside the box,
     never push past it. */
  .cc-row-meta { overflow-wrap: anywhere; }
  /* Desktop's flex-basis on .cc-row-main is a WIDTH (flex: 1 1 240px);
     once the row turns into a column that same basis became 240px of
     forced empty HEIGHT — the giant blank block in every mobile card
     (Alex's screenshots, 2026-07-23). Auto basis: content-sized rows. */
  .cc-row-main { flex: 1 1 auto; }
  /* Chip + actions stack tight; the chip hugs its text instead of
     stretching to a full-width bar. */
  .cc-row-side {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  /* ⚠️ THE APPROVAL ROW'S SIDE IS NO LONGER A STACK OF BUTTONS. Since the
     decision moved into the expand panel (see .cc-decide), all that is left
     here is a state badge and the word "Review" — which sit side by side in
     the space a single button used to need. */
  .cc-row-side:not(:has(.cc-row-actions)) {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .cc-row-side > .badge { align-self: flex-start; }
  /* Column-direction rows would drop the caret onto its own line — pin it
     to the row's top-right corner instead (.cc-row is position:relative).

     ⚠️ SCOPED TO ROWS, and it was not. `.cc-caret` also appears in a SECTION
     head and in the "Running automatically" head, neither of which is
     positioned — so at 390px those carets escaped their headers and stacked in
     the top-right corner of the PAGE, next to the title. Caught by rendering
     at a real 390px viewport; the first attempt at that render had no viewport
     meta and was quietly 980px wide, which hid it. */
  .cc-row > .cc-row-side > .cc-caret,
  .cc-row > .cc-caret { position: absolute; top: 17px; right: 18px; }
  /* Buttons pair up two per line (full-width only when odd one out) —
     four stacked full-width bars ate a whole screen per card. */
  .cc-row-actions { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .cc-row-actions .btn {
    flex: 1 1 calc(50% - 4px);
    width: auto;
    justify-content: center;
  }
  .cc-modal-actions { flex-direction: column-reverse; }
  .cc-modal-actions .btn { width: 100%; justify-content: center; }
}


/* ══ THE ITEM PANEL (round 2) ═══════════════════════════════════════════════
   Alex, 2026-08-26: *"You should be using modals here all the time… I shouldn't
   be taken out of the control centre."*

   It reuses .cc-modal-overlay / .cc-modal — the shell showConfirm and the
   recipients list already use — so this page has ONE dialog, in three sizes,
   rather than three dialogs. Only what a wider, content-carrying panel needs is
   added here. */
.cc-item-modal { max-width: 560px; width: 100%; text-align: left; padding: 0; overflow: hidden; }

/* The type stripe. Same --sch-c the calendar chip's rail uses, set by the
   sch-t-* class on this element, so the panel and the chip you clicked are
   visibly the same object. */
.cc-item-modal { border-left: 4px solid var(--sch-c, var(--accent)); }

.cc-im-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--border-soft); }
.cc-im-top { display: flex; align-items: center; gap: 10px; }
.cc-im-kind {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.cc-im-state {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px;
}
/* ⚠️ THE SAME SIX STATE COLOURS AS THE GRID — see schedule-calendar.css. A
   panel that recoloured them would teach a second vocabulary for one fact. */
.cc-im-s-needs_you { background: var(--danger-soft); color: var(--danger); }
.cc-im-s-ready     { background: var(--good-soft);   color: var(--good); }
.cc-im-s-sending   { background: var(--warn-soft);   color: var(--warn); }
.cc-im-s-sent      { background: var(--good-soft);   color: var(--good); }
.cc-im-s-missed    { background: var(--surface-3);   color: var(--text); }
.cc-im-s-rejected  { background: var(--surface-3);   color: var(--text-3); }
/* Amber, not red — he cannot clear this in one tap, it wants a file. */
.cc-im-s-needs_media { background: var(--warn-soft); color: var(--warn); }

.cc-im-x {
  margin-left: auto; border: none; background: transparent; cursor: pointer;
  color: var(--text-3); font-size: 15px; line-height: 1;
  width: 32px; height: 32px; border-radius: 8px;
}
.cc-im-x:hover { background: var(--surface-2); color: var(--text); }

.cc-im-when {
  margin-top: 9px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace; font-size: 16px; font-weight: 700;
}
.cc-im-tz { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; color: var(--text-3); }

.cc-im-body { padding: 16px 20px; display: flex; gap: 14px; align-items: flex-start; }

/* ══ THE MOCKUP SLOT ════════════════════════════════════════════════════════
   Alex, 2026-08-26: *"I need to be able to see a preview of it and it should be
   quite pretty. It should be like a mock-up… Immediately people can recognise
   what they were approving. It kind of subconsciously helps them recognise what
   they're doing."*

   ⚠️ THIS BOX STYLES NOTHING INSIDE ITSELF, ON PURPOSE. What it holds is either
   a Facebook facsimile (facebook-preview.css, which deliberately ignores our
   design system because it is a picture of somebody else's product), the REAL
   email in a sandboxed iframe, or our own community post. Adding padding, a
   border or a background here would put OUR frame around all three and undo the
   thing that makes each recognisable at a glance. It only gives them the width.

   ⚠️ Same for X and LinkedIn when they arrive: a new renderer beside
   social-preview.js, not a variant of this rule. */
.cc-im-mock { flex: 1 1 auto; min-width: 0; }
.cc-im-mock > * { max-width: 100%; }
.cc-im-thumb {
  width: 74px; height: 74px; flex: none; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-3);
  background-size: cover; background-position: center;
}
.cc-im-text {
  font-size: 13.5px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
  /* Long posts scroll inside the panel rather than pushing the actions off the
     bottom of a laptop screen — the buttons are the point of opening it. */
  max-height: 260px; overflow-y: auto;
}

.cc-im-facts {
  margin: 0 20px; padding: 12px 14px; background: var(--surface-2);
  border-radius: 10px; display: flex; gap: 22px; flex-wrap: wrap;
}
.cc-im-facts > div { display: flex; flex-direction: column; gap: 2px; }
.cc-im-flab {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.cc-im-fval { font-size: 13px; font-weight: 600; }

.cc-item-modal .cc-row-error { margin: 12px 20px 0; }

.cc-im-foot {
  margin-top: 16px; padding: 14px 20px 16px;
  border-top: 1px solid var(--border-soft); background: var(--surface-2);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.cc-im-spacer { flex: 1 1 auto; }
.cc-im-note { font-size: 12.5px; color: var(--text-3); }
.cc-im-out { color: var(--accent); }
.cc-im-out svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  /* The footer stacks so every action keeps a full-width tap target rather
     than three buttons fighting over 390px. */
  .cc-im-foot { flex-direction: column; align-items: stretch; }
  .cc-im-foot .btn { width: 100%; justify-content: center; }
  .cc-im-spacer { display: none; }
  .cc-im-body { flex-direction: column; }
  .cc-im-thumb { width: 100%; height: 150px; }
}

/* ══ THE DECISION SITS UNDER THE THING IT DECIDES ═══════════════════════════
   Alex, 2026-08-26, as the condition on the whole Control Centre rethink:
   *"Checking everything, reading the email. You don't approve anything
   blindly. You always need to double-check what you're sending out."*

   Approve / Send now / Reject used to sit on the COLLAPSED ROW, so the fastest
   path through this screen was to decide on something whose content was behind
   a tap you never had to make. They now live at the bottom of the expand panel,
   under the preview, and stay disabled until the preview has actually
   rendered. */
.cc-decide {
  border-top: 1px solid var(--border-soft);
  margin-top: 14px; padding-top: 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.cc-decide-why { font-size: 12.5px; color: var(--text-3); }
/* Locked: visibly inert rather than absent, so the buttons do not appear to
   pop into existence when the preview lands. */
.cc-await-preview .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Nothing to show → nothing to approve. The panel says which surface owns it
   rather than offering a button over an item this screen cannot draw. */
.cc-decide-blocked {
  background: var(--warn-soft); border-radius: 12px; padding: 13px 15px;
  border-top: 0; margin-top: 14px;
}
.cc-decide-blocked .cc-decide-why { color: #8a5a0c; }

/* Blocked on ONE known thing — so this one carries the control that clears it.
   Same amber ground as the blocked panel because it is the same kind of message
   ("not yet"), but it ends in a button rather than an explanation. */
.cc-decide-media {
  background: var(--warn-soft); border-radius: 12px; padding: 13px 15px;
  border-top: 0; margin-top: 14px;
}
.cc-decide-media .cc-decide-why { color: #8a5a0c; }

/* The cue that replaced the row's buttons. Quiet — the whole row is the
   control, and the caret already says which way it goes. */
.cc-review-cue {
  font-size: 12px; font-weight: 600; color: var(--accent);
  white-space: nowrap;
}

/* ══ NO "RUNNING AUTOMATICALLY" BLOCK ═══════════════════════════════════════
   🚨 The card these rules styled was DELETED on 2026-08-26 and the rules went
   with it. Alex: *"Nothing running automatically needs to be in here. I never
   asked you to put that in there."*

   Left as a note rather than a silent gap because the classes (.cc-card-quiet,
   .cc-auto-head, .cc-auto-group, .count-quiet) read like a deliberately quiet
   treatment somebody might reach for again. They are not available, and the
   reason is not that they looked wrong: a system-authored job does not belong on
   this page in ANY styling. The page shows what a human scheduled. */

/* ══ THE SECTION SHELL ══════════════════════════════════════════════════════
   Alex, 2026-08-26, on his phone: *"We're wasting a huge amount of really
   valuable real estate space, like the top half of the screen … When it first
   opens it shouldn't all be expanded out … it should have priority of things to
   look at without you having to scroll through the whole thing."*

   Measured at 390×844 against the shipped CSS before changing anything: 399px
   of an 844px screen gone before the first thing he could act on. The page is
   now an index — a header row per section, body behind a tap. */
.cc-sect {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.cc-sect-head {
  min-height: 56px;
  padding: 0 16px;
  display: flex; align-items: center; gap: 11px;
  cursor: pointer;
  background: none; border: 0; width: 100%;
  text-align: left;
}
.cc-sect-head:hover { background: var(--surface-2); }
.cc-sect-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cc-sect-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cc-sect-title {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 15.5px; letter-spacing: -0.01em;
}
/* ⚠️ A CLOSED ROW MUST NEVER BE UNINFORMATIVE, or he opens all six to find out
   where he stands — which is the scrolling this was meant to end. */
.cc-sect-sub { font-size: 11px; color: var(--text-3); }
.cc-sect-n {
  flex: none;
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600;
  color: var(--text-2); background: var(--surface-3);
  border-radius: 999px; padding: 3px 9px;
}
/* Red still means exactly one thing: you can do something about this. */
.cc-sect-n-urgent { color: #fff; background: var(--danger); }
.cc-sect-body { border-top: 1px solid var(--border-soft); }
.cc-sect-tabs { padding: 10px 14px 0; }

/* An owned-but-empty section stays, quieted, naming what will live there —
   Alex on 17 Aug, and NN/G's dashboard guidance, agreeing for once. */
.cc-sect-empty { background: var(--surface-2); }
.cc-sect-empty .cc-sect-title { color: var(--text-2); }

/* ⚠️ THE TRIGGER THAT STOPS STAGGERING BECOMING A HIDDEN FEATURE. A section
   that appears because a flag just turned on says so until it is opened once. */
.cc-sect-new {
  flex: none;
  font-family: "JetBrains Mono", monospace; font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.09em; color: var(--accent);
  background: var(--accent-softer); border-radius: 999px; padding: 3px 7px;
}

@media (max-width: 900px) {
  .cc-sect { margin-bottom: 10px; }
  .cc-sect-head { min-height: var(--rk-touch-target, 48px); }
}

/* An index reads top-to-bottom. `.cc-grid` is two columns above 769px, and
   leaving the sections in it put "Sending soon" beside "Approvals" as a second
   column — caught by rendering the page, not by a test. */
.cc-sections { display: flex; flex-direction: column; }

/* The section head owns its own caret rather than letting it escape (see the
   640px note). It is a flex row, so the caret simply sits at the end. */
.cc-sect-head > .cc-caret { position: static; flex: none; }