/* 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 canonical .page-head DS (app-shell.css:286-349) carries the crumbs /
   h1.display / .sub. .page-head-meta is a right-aligned mono text block by
   default — here it holds the waiting pill + the Refresh button, so it
   becomes a flex row (gap mirrors .topbar-actions, app-shell.css:241). */
.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); }

/* ============ 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: 7px 12px; 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 */
  }
}
/* 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: 10px 14px 0; /* aligned to the block 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: 10px;
  padding: 12px 14px 16px;
}
.cc-row {
  position: relative; /* anchors the mobile expand caret */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  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; }
/* 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: 8px;
  flex-wrap: wrap;
}
.cc-row-actions { display: flex; gap: 6px; 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: 14px; } /* 3px accent absorbs into the 16px */
.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 reads as the same "needs you" amber */
.cc-row.cc-send-paused:hover {
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
}
/* 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: -10px;
  padding: 10px 16px 16px;
  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; }

/* 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; }
  .cc-row { flex-direction: column; align-items: stretch; }
  .cc-row-side { justify-content: space-between; }
  /* 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). */
  .cc-caret { position: absolute; top: 15px; right: 16px; }
  .cc-row-actions { width: 100%; flex-direction: column; }
  .cc-row-actions .btn { width: 100%; justify-content: center; }
  .cc-modal-actions { flex-direction: column-reverse; }
  .cc-modal-actions .btn { width: 100%; justify-content: center; }
}