/* Mission Control — component layer (class-based, EJS-friendly).
   Requires tokens.css. Prefix: mc- (safe alongside the legacy style.css
   during template-by-template migration). Modifiers: --variant / .is-state */

/* ---------- Base ---------- */
body.mc {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-body); line-height: 1.5;
}
.mc a { color: var(--color-text); text-underline-offset: 3px; }
.mc a:hover { color: var(--color-accent-strong); }
.mc ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.mc :focus { outline: none; }
.mc :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mc h1, .mc h2, .mc h3 { font-family: var(--font-heading); font-weight: 600; margin: 0; }
.mc h1 { font-size: var(--text-h1); line-height: 1.1; }
.mc h2 { font-size: var(--text-h2); }

/* ---------- Nav (layout.ejs shell) ---------- */
.mc-nav { display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border-bottom: var(--rule) solid var(--color-divider); }
.mc-nav-brand { font-family: var(--font-heading); font-weight: 700; margin-right: var(--space-4); }
.mc-nav a { text-decoration: none; font-size: var(--text-body); }
.mc-nav a[aria-current="page"] { border-bottom: 2px solid var(--color-accent); font-weight: 600; }
.mc-nav-user { margin-left: auto; display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-meta); }
.mc-nav-user .mc-email { opacity: 0.55; }

/* ---------- Page scaffold ---------- */
.mc-page { width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8); box-sizing: border-box; }
.mc-page--form { max-width: var(--page-form); }
.mc-page--detail { max-width: var(--page-detail); }
.mc-kicker { font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-kicker); margin-bottom: var(--space-1); }
.mc-kicker.is-warn { color: var(--color-warn); }
.mc-kicker.is-danger { color: var(--color-danger); }
.mc-rule { height: var(--rule); background: var(--color-divider); border: 0; margin: var(--space-4) 0; }
.mc-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body);
  text-decoration: none; opacity: 0.7; }
.mc-back:hover { opacity: 1; }
.mc-help { font-size: var(--text-meta); opacity: 0.5; margin: var(--space-1) 0 0; }
.mc-meta { font-size: var(--text-meta); opacity: 0.55; }
.mc-mono { font-family: var(--font-mono); font-size: var(--text-meta); }

/* ---------- Buttons (labels flush left, never centered in wide buttons) ---------- */
.mc-btn { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-start;
  font: 600 var(--text-body) var(--font-body); color: var(--color-text);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  padding: var(--space-2) 14px; cursor: pointer; text-decoration: none; }
.mc-btn svg { display: block; }
.mc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mc-btn--primary { background: var(--color-accent); color: #141318; }
.mc-btn--primary:hover { background: var(--color-accent-strong); color: #141318; }
.mc-btn--secondary { border-color: var(--color-divider); }
.mc-btn--secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.mc-btn--ghost { padding-inline: var(--space-1); }
.mc-btn--ghost:hover { background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.mc-btn.is-danger { color: var(--color-danger); }   /* combine with --secondary or --ghost */

/* ---------- Tags / badges ---------- */
.mc-tag { display: inline-flex; align-items: center; font-size: 12px; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: var(--radius); background: var(--color-tint-1);
  color: var(--color-neutral-text); white-space: nowrap; }
.mc-tag--ok { background: color-mix(in srgb, var(--color-ok) 16%, transparent); color: var(--color-ok-text); }
.mc-tag--warn { background: color-mix(in srgb, var(--color-warn) 16%, transparent); color: var(--color-warn-text); }
.mc-tag--danger { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: var(--color-danger-text); }
.mc-tag--info { background: color-mix(in srgb, var(--color-info) 16%, transparent); color: var(--color-info-text); }
.mc-tag--sm { font-size: 11px; padding: 2px 8px; }

/* ---------- Forms ---------- */
.mc-field { display: flex; flex-direction: column; gap: 6px; }
.mc-field > label { font-size: var(--text-meta); font-weight: 600; }
.mc-input { font: var(--text-body) var(--font-body); color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius); padding: var(--space-2) var(--space-3);
  caret-color: var(--color-accent); box-sizing: border-box; }
.mc-input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.mc-input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.mc-input { min-height: 90px; resize: vertical; }
.mc-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-body); cursor: pointer; }
.mc-check input { margin-top: 3px; accent-color: var(--color-accent-strong); }
.mc-check .mc-sub { display: block; opacity: 0.55; margin-top: 2px; font-size: var(--text-meta); }

/* Segmented control (native radios) */
.mc-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius); }
.mc-seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  font-size: var(--text-meta); cursor: pointer; white-space: nowrap; }
.mc-seg-opt input { position: absolute; opacity: 0; }
.mc-seg-opt + .mc-seg-opt { border-left: 1px solid var(--color-divider); }
.mc-seg-opt:has(input:checked) { background: var(--color-accent); color: #141318; }
.mc-seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.mc-seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ---------- Tabs (project detail; URL-hash driven) ---------- */
.mc-tabs { display: flex; gap: var(--space-1); border-bottom: var(--rule) solid var(--color-divider); flex-wrap: wrap; }
.mc-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -2px; color: var(--color-text); font: 600 var(--text-body) var(--font-body);
  padding: var(--space-2) var(--space-3); cursor: pointer; display: flex; align-items: center; gap: 6px;
  text-decoration: none; white-space: nowrap; }
.mc-tab:hover { color: var(--color-accent-strong); }
.mc-tab.is-active { border-bottom-color: var(--color-accent); color: var(--color-accent-kicker); }

/* ---------- List rows & column headers ---------- */
.mc-thead { display: grid; gap: var(--space-4); font-size: var(--text-label);
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; margin-bottom: var(--space-2); }
.mc-list { border-top: var(--rule) solid var(--color-divider); }
.mc-row { display: grid; gap: var(--space-4); align-items: center;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider);
  color: var(--color-text); text-decoration: none; }
.mc-row--strong { border-bottom-width: var(--rule); padding: var(--space-4) var(--space-3); }
a.mc-row:hover { background: var(--color-tint-1); }
.mc-row.is-dim { opacity: 0.65; }
/* Status edge: 4px colored left border, the fastest-scanning signal on a list */
.mc-edge-ok { border-left: var(--edge) solid var(--color-ok); }
.mc-edge-warn { border-left: var(--edge) solid var(--color-warn); }
.mc-edge-danger { border-left: var(--edge) solid var(--color-danger); }
.mc-edge-info { border-left: var(--edge) solid var(--color-info); }
.mc-dot { width: 6px; height: 6px; flex: none; background: var(--color-tint-3); }
.mc-dot--ok { background: var(--color-ok); } .mc-dot--warn { background: var(--color-warn); }
.mc-dot--danger { background: var(--color-danger); } .mc-dot--info { background: var(--color-info); }

/* ---------- Progress / burn bars ---------- */
.mc-bar { height: 8px; background: var(--color-tint-2); position: relative; }
.mc-bar--lg { height: 10px; }
.mc-bar-fill { height: 100%; background: var(--color-ok); display: block; }
.mc-bar-fill--info { background: var(--color-info); } .mc-bar-fill--teal { background: var(--color-teal); }
.mc-bar-fill--warn { background: var(--color-warn); } .mc-bar-fill--neutral { background: var(--color-tint-3); }
.mc-bar-fill--muted { background: var(--color-accent-muted); }
/* Elapsed-time marker: vertical tick overhanging the track by 3px */
.mc-bar-marker { position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--color-text); opacity: 0.7; }
.mc-bar-marker--danger { background: var(--color-danger); opacity: 1; }

/* ---------- Collapsible section (native <details>) ---------- */
.mc-section { border-bottom: var(--rule) solid var(--color-divider); }
.mc-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: var(--space-2); padding: var(--space-4) 0; }
.mc-section > summary::-webkit-details-marker { display: none; }
.mc-section-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sub); }
.mc-chev { transition: transform 0.15s; opacity: 0.5; flex: none; }
.mc-section[open] > summary .mc-chev { transform: rotate(90deg); }
.mc-section-body { padding: 0 0 var(--space-4) 22px; }

/* ---------- Stat cells (dashboard top strip) ---------- */
.mc-stats { display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--rule) solid var(--color-divider); }
.mc-stat { padding: var(--space-4) var(--space-3); }
.mc-stat + .mc-stat { border-left: 1px solid var(--color-divider); }
.mc-stat-num { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-stat); line-height: 1; }

/* ---------- Timeline message (ticket detail) ---------- */
.mc-msg { padding: var(--space-4) 0 var(--space-4) var(--space-4);
  border-bottom: var(--rule) solid var(--color-divider); border-left: var(--edge) solid var(--color-tint-3); }
.mc-msg--client { border-left-color: var(--color-accent); }
.mc-msg-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.mc-msg-body { font-size: var(--text-body); line-height: 1.6; margin-top: var(--space-2); max-width: 70ch; }
.mc-msg-ai { font-size: var(--text-meta); opacity: 0.55; border-top: 1px dashed var(--color-divider);
  padding-top: var(--space-2); margin-top: var(--space-2); max-width: 70ch; }

/* ---------- Danger zone ---------- */
.mc-danger-zone { border: var(--rule) solid var(--color-danger); padding: var(--space-3) var(--space-4); }
.mc-danger-zone .mc-kicker { color: var(--color-danger); }

/* ---------- Callout (on-hold, draft-approval) ---------- */
.mc-callout { border-left: var(--edge) solid var(--color-accent); padding-left: var(--space-4); }
.mc-callout--warn { border-left-color: var(--color-warn); }

/* ---------- Responsive (mocks are desktop-first; collapse below 900px) ---------- */
@media (max-width: 900px) {
  .mc-stats { grid-template-columns: 1fr 1fr; }
  .mc-stat:nth-child(odd) { border-left: 0; }
  .mc-thead { display: none; }
  .mc-row { grid-template-columns: 1fr !important; gap: var(--space-2); }
}