/* ============================================================
 * Sprint B-5: Design System v2 — executive-only override layer
 * Loaded LAST so it wins specificity battles.
 *
 * Applies ONLY to screens that opt in via `.exec-screen` wrapper
 * (Home, Brief, Portfolio). Admin screens unaffected.
 *
 * Themes:
 *   - 8-pt spacing grid (8, 12, 16, 20, 24, 32, 48)
 *   - Stronger typography hierarchy
 *   - Modern card: subtle shadow, larger radius, more breathing room
 *   - Refined color: cooler accents, calmer warns, deeper inks
 *   - Tabular numerals + monospaced KPIs
 * ============================================================ */

/* ── Tokens (executive-only color refinement) ──────────────── */
.exec-screen {
  --exec-radius:        14px;
  --exec-radius-sm:     10px;
  --exec-radius-lg:     18px;
  --exec-shadow:        0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  --exec-shadow-hover:  0 2px 4px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.06);
  --exec-shadow-pop:    0 6px 16px rgba(0,0,0,.08), 0 20px 48px rgba(0,0,0,.08);

  /* Tinted backgrounds for stat tiles + risk callouts */
  --exec-ok-tint:       rgba(90, 122, 72, .07);
  --exec-warn-tint:     rgba(184, 119, 44, .08);
  --exec-danger-tint:   rgba(184, 88, 66, .08);
  --exec-info-tint:     rgba(74, 112, 128, .08);
  --exec-neutral-tint:  rgba(106, 100, 90, .06);

  /* Typography scale */
  --exec-num-xl:    44px;
  --exec-num-l:     32px;
  --exec-num-m:     22px;
  --exec-head-xl:   28px;
  --exec-head-l:    20px;
  --exec-head-m:    15px;
  --exec-body-l:    15px;
  --exec-body-m:    14px;
  --exec-body-s:    12.5px;
  --exec-meta:      11.5px;
}

[data-theme="dark"] .exec-screen {
  --exec-shadow:        0 1px 2px rgba(0,0,0,.3),  0 8px 24px rgba(0,0,0,.3);
  --exec-shadow-hover:  0 2px 4px rgba(0,0,0,.4),  0 12px 32px rgba(0,0,0,.4);
  --exec-ok-tint:       rgba(110, 145, 90, .15);
  --exec-warn-tint:     rgba(210, 145, 70, .15);
  --exec-danger-tint:   rgba(210, 110, 88, .15);
  --exec-info-tint:     rgba(100, 140, 160, .15);
  --exec-neutral-tint:  rgba(150, 142, 130, .12);
}

/* ── Page-level spacing ────────────────────────────────────── */
.exec-screen { padding-block: 24px; }
.exec-screen > * + * { margin-top: 0; }

/* ── Cards ─────────────────────────────────────────────────── */
.exec-screen .rail-card {
  border-radius: var(--exec-radius);
  box-shadow: var(--exec-shadow);
  border: 1px solid var(--line);
  transition: box-shadow .2s ease, transform .2s ease;
}
.exec-screen .rail-card:hover { box-shadow: var(--exec-shadow-hover); }

/* Clickable cards (Portfolio rows, Priority Cards) — subtle lift */
.exec-screen a > .rail-card:hover,
.exec-screen .exec-card-clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--exec-shadow-hover);
}

/* ── Typography hierarchy ──────────────────────────────────── */
.exec-screen .page-title  { font-size: var(--exec-head-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.exec-screen .eyebrow     { font-size: var(--exec-meta); font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.exec-screen .sec-title   { font-size: var(--exec-head-l); font-weight: 600; }
.exec-screen .page-sub    { font-size: var(--exec-body-m); color: var(--muted); line-height: 1.55; }

/* Section header (used inside rail-card) */
.exec-screen .exec-section-head {
  font-size: var(--exec-meta);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
}

/* KPI numbers — tabular, hefty */
.exec-screen .exec-kpi {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.exec-screen .exec-kpi-xl { font-size: var(--exec-num-xl); }
.exec-screen .exec-kpi-l  { font-size: var(--exec-num-l); }
.exec-screen .exec-kpi-m  { font-size: var(--exec-num-m); }

/* ── Snapshot stat tiles ──────────────────────────────────── */
.exec-screen .exec-snapshot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px;
}
.exec-screen .exec-stat {
  padding: 18px 16px;
  border-radius: var(--exec-radius);
  background: var(--exec-neutral-tint);
  border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.exec-screen .exec-stat.alert-danger { background: var(--exec-danger-tint); border-color: rgba(184, 88, 66, .25); }
.exec-screen .exec-stat.alert-warn   { background: var(--exec-warn-tint);   border-color: rgba(184, 119, 44, .25); }
.exec-screen .exec-stat.alert-ok     { background: var(--exec-ok-tint);     border-color: rgba(90, 122, 72, .25); }
.exec-screen .exec-stat.alert-info   { background: var(--exec-info-tint);   border-color: rgba(74, 112, 128, .25); }

.exec-screen .exec-stat .v {
  font-size: var(--exec-num-l);
  font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.exec-screen .exec-stat.alert-danger .v { color: var(--danger); }
.exec-screen .exec-stat.alert-warn   .v { color: var(--warn); }
.exec-screen .exec-stat.alert-ok     .v { color: var(--ok); }
.exec-screen .exec-stat.alert-info   .v { color: var(--info); }
.exec-screen .exec-stat .l { font-size: var(--exec-body-s); color: var(--muted); }
.exec-screen .exec-stat .ctx { font-size: var(--exec-meta); color: var(--muted); }

/* ── Health Score badge ───────────────────────────────────── */
.exec-screen .health-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--exec-body-s);
  font-weight: 600;
}
.exec-screen .health-badge .num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  font-weight: 700; font-size: 15px;
}
.exec-screen .health-badge.tone-ok      { background: var(--exec-ok-tint);     color: var(--ok); }
.exec-screen .health-badge.tone-info    { background: var(--exec-info-tint);   color: var(--info); }
.exec-screen .health-badge.tone-warn    { background: var(--exec-warn-tint);   color: var(--warn); }
.exec-screen .health-badge.tone-danger  { background: var(--exec-danger-tint); color: var(--danger); }

/* Health score ring (large display on Brief) */
.exec-screen .health-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  font-size: 22px; font-weight: 700;
  background: conic-gradient(var(--ring-color, var(--accent)) calc(var(--ring-pct, 0) * 1%), var(--raised) 0);
  position: relative;
}
.exec-screen .health-ring::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; background: var(--surface);
}
.exec-screen .health-ring > * { position: relative; z-index: 1; }

/* ── Recommended Action rows ──────────────────────────────── */
.exec-screen .rec-action {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--exec-radius-sm);
  background: var(--raised);
  border-left: 3px solid var(--neutral);
}
.exec-screen .rec-action.tone-danger { background: var(--exec-danger-tint); border-left-color: var(--danger); }
.exec-screen .rec-action.tone-warn   { background: var(--exec-warn-tint);   border-left-color: var(--warn); }
.exec-screen .rec-action.tone-info   { background: var(--exec-info-tint);   border-left-color: var(--info); }
.exec-screen .rec-action .ic { font-size: 18px; line-height: 1.2; flex: none; }
.exec-screen .rec-action .body { flex: 1; min-width: 0; }
.exec-screen .rec-action .act { font-weight: 600; font-size: var(--exec-body-m); color: var(--ink); word-break: break-word; }
.exec-screen .rec-action .why { font-size: var(--exec-meta); color: var(--muted); margin-top: 3px; word-break: break-word; }

/* ── Priority cards (Home) ────────────────────────────────── */
.exec-screen .priority-card {
  padding: 16px;
  border-radius: var(--exec-radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.exec-screen .priority-card.starred { border-left-color: var(--warn); }
.exec-screen .priority-card:hover { transform: translateY(-1px); box-shadow: var(--exec-shadow-hover); }

/* ── Buttons (within exec context) ────────────────────────── */
.exec-screen .btn.pri {
  letter-spacing: -.005em;
  font-weight: 600;
}

/* ── Mobile refinements ───────────────────────────────────── */
@media (max-width: 640px) {
  .exec-screen { padding-block: 16px; }
  .exec-screen .page-title  { font-size: 24px; }
  .exec-screen .exec-kpi-xl { font-size: 36px; }
  .exec-screen .exec-kpi-l  { font-size: 26px; }
  .exec-screen .rail-card    { border-radius: 12px; }
  .exec-screen .exec-stat .v { font-size: 26px; }
}

/* Print: ensure scores + recs print cleanly */
@media print {
  .exec-screen .rail-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}