/* ═══════════════════════════════════════
   ELITE CS v4 — CARDS
   .glass, .stat, .highlight
   ═══════════════════════════════════════ */

/* ─── Glass Card (base) ─── */
.glass {
  background: linear-gradient(160deg, rgba(14,24,36,0.72), rgba(9,17,26,0.58));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-inset);
  transition: all 280ms var(--ease);
}

.glass:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--glass-inset), 0 8px 32px rgba(2,8,14,0.4);
}

/* No-hover variant (for containers that shouldn't lift) */
.glass.static:hover {
  transform: none;
  box-shadow: var(--glass-inset);
}

/* ─── Stats Row (Arc Final — sculpted chip + hybrid change) ─── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.stat {
  padding: var(--s5);
}

.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s3);
}

.stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Sculpted chip for stat icon */
.stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}
.stat-icon.teal   { background: rgba(64,200,240,0.2); color: var(--teal); }
.stat-icon.blue   { background: rgba(90,173,255,0.18); color: var(--status-published); }
.stat-icon.amber  { background: rgba(240,160,48,0.18); color: var(--amber); }
.stat-icon.purple { background: rgba(181,128,224,0.2); color: var(--ai); }

.stat-val {
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-bright);
  line-height: 1;
  margin-bottom: var(--s2);
}

/* Change indicator — dotted style (hybrid rule: informational, not critical) */
.stat-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
}
.stat-change::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.stat-change.up::before   { background: var(--status-live); }
.stat-change.down::before { background: var(--status-urgent); }

/* ─── Highlight Cards (status-colored) ─── */
.highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s8);
}

.highlight {
  padding: var(--s5);
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-inset);
}

.highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  opacity: 0.6;
  z-index: 0;
  transition: opacity 300ms;
}

.highlight:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-inset), 0 8px 32px rgba(2,8,14,0.4);
}

.highlight:hover::after { opacity: 0.8; }

/* Color variants */
.highlight.teal::after  { background: linear-gradient(135deg, rgba(45,212,168,0.12) 0%, rgba(34,184,224,0.06) 100%); }
.highlight.red::after   { background: linear-gradient(135deg, rgba(240,85,69,0.12) 0%, rgba(240,60,80,0.06) 100%); }
.highlight.amber::after { background: linear-gradient(135deg, rgba(240,160,48,0.10) 0%, rgba(224,120,40,0.05) 100%); }
.highlight.blue::after  { background: linear-gradient(135deg, rgba(90,173,255,0.10) 0%, rgba(60,130,220,0.05) 100%); }

.highlight > * { position: relative; z-index: 1; }

/* Highlight content */
.hl-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: var(--s3);
}

.hl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.hl-dot.pulse { animation: pulse 2s infinite; }

.hl-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-bright);
  line-height: 1.45;
  margin-bottom: var(--s3);
}

.hl-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 12px;
  color: var(--text-secondary);
}

.hl-score {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  font-size: 11px;
  font-weight: 600;
}
.hl-score::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ai);
  flex-shrink: 0;
}
.hl-score i { display: none; } /* old sparkle icon replaced by dot */

/* ═══════════════════════════════════════
   DASHBOARD — STORY LIST + RUNDOWN SNAPSHOT + AI INSIGHTS + TABLE
   Arc Final language applied during demo → canonical migration
   (2026-04-08)
   ═══════════════════════════════════════ */

/* ─── Story list (dashboard left column) ─── */
.story-card { padding: var(--s5); }

.story {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: 999px;
  cursor: pointer;
  transition: all 200ms cubic-bezier(.2,.7,.2,1);
  border: 1px solid transparent;
}
.story:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

.story-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.story-dot.d-live      { background: var(--status-live); box-shadow: 0 0 8px rgba(45,212,168,0.4); }
.story-dot.d-urgent    { background: var(--status-urgent); box-shadow: 0 0 8px rgba(240,85,69,0.3); }
.story-dot.d-published { background: var(--status-published); }
.story-dot.d-scheduled { background: var(--status-scheduled); }
.story-dot.d-draft     { background: var(--text-tertiary); }
.story-dot.d-embargoed { background: var(--status-embargoed); }

.story-body { flex: 1; min-width: 0; }

.story-t {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-m {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.story-sc {
  font-size: 12px;
  font-weight: 600;
  color: var(--ai);
  flex-shrink: 0;
}

/* ─── Rundown snapshot (dashboard right column) ─── */
.rundown-card { padding: var(--s5); }

.rd-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 200ms cubic-bezier(.2,.7,.2,1);
  margin-bottom: 2px;
}
.rd-item:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}

.rd-item.current {
  background: linear-gradient(160deg, rgba(64,200,240,0.14), rgba(64,200,240,0.03));
  border-color: rgba(64,200,240,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 10px rgba(0,0,0,0.2);
}

.rd-item.done { opacity: 0.4; }

.rd-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rd-item.current .rd-time { color: var(--teal); }

.rd-bar {
  width: 3px;
  height: 22px;
  border-radius: 2px;
  flex-shrink: 0;
}

.rd-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.rd-item.current .rd-name { color: var(--text-bright); font-weight: 600; }

.rd-dur {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* rd-tag: dotted hybrid — "now" saturated, rest dotted */
.rd-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
}
.rd-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--text-tertiary);
}
.rd-tag.ok::before { background: var(--status-live); }
.rd-tag.now {
  background: var(--status-live);
  color: #fff;
  border-color: transparent;
  padding: 2px 8px;
}
.rd-tag.now::before { display: none; }
.rd-tag.wait {
  background: var(--status-urgent);
  color: #fff;
  border-color: transparent;
  padding: 2px 8px;
}
.rd-tag.wait::before { display: none; }

/* ─── AI Insights section ─── */
.ai-section { margin-bottom: var(--s8); }

.ai-header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.ai-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(181,128,224,0.2);
  color: var(--ai);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 0 20px rgba(181,128,224,0.25);
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.ai-card {
  padding: var(--s5);
  position: relative;
  overflow: hidden;
}

.ai-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(181,128,224,0.06) 0%, rgba(128,96,208,0.02) 100%);
  border-radius: var(--r-xl);
  z-index: 0;
}
.ai-card > * { position: relative; z-index: 1; }

.ai-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ai);
  letter-spacing: 0.02em;
  margin-bottom: var(--s3);
}
.ai-type::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ai);
  box-shadow: 0 0 6px rgba(181,128,224,0.5);
}

.ai-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: var(--s3);
}

.ai-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ai);
  cursor: pointer;
  transition: opacity 200ms;
}
.ai-action:hover { opacity: 0.75; }

/* ─── Table section ─── */
.table-section { padding: var(--s5); margin-bottom: var(--s8); }

.table-section table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s4);
}

.table-section th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--s3);
  border-bottom: 1px solid var(--glass-border);
}
.table-section th.r { text-align: right; }

.table-section td {
  padding: var(--s3);
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.table-section td.r { text-align: right; font-variant-numeric: tabular-nums; }

.table-section tbody tr {
  transition: background 150ms cubic-bezier(.2,.7,.2,1);
}
.table-section tbody tr:hover { background: rgba(255,255,255,0.025); }
.table-section tbody tr:hover td { color: var(--text-primary); }

.table-section td.ttl {
  color: var(--text-primary);
  font-weight: 500;
  max-width: 340px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-section td .score { color: var(--ai); font-weight: 600; }

/* ─── Light Mode ─── */
[data-theme="light"] .glass {
  background: rgba(255,255,255, 0.65);
  box-shadow: var(--glass-inset), 0 2px 8px rgba(0,20,40,0.04);
}

[data-theme="light"] .glass:hover {
  background: rgba(255,255,255, 0.82);
  box-shadow: var(--glass-inset), 0 6px 20px rgba(0,20,40,0.07);
}

[data-theme="light"] .highlight::after { opacity: 0.35; }
[data-theme="light"] .highlight:hover::after { opacity: 0.5; }
[data-theme="light"] .highlight.teal::after  { background: linear-gradient(135deg, rgba(29,168,208,0.12) 0%, rgba(64,192,232,0.06) 100%); }
[data-theme="light"] .highlight.red::after   { background: linear-gradient(135deg, rgba(216,64,64,0.10) 0%, rgba(240,80,80,0.05) 100%); }
[data-theme="light"] .highlight.amber::after { background: linear-gradient(135deg, rgba(216,144,32,0.10) 0%, rgba(240,160,48,0.05) 100%); }

[data-theme="light"] .hl-score {
  background: rgba(0,20,40,0.04);
  border-color: rgba(0,40,80,0.08);
  color: rgba(0,20,40,0.85);
}

/* Dashboard components in light mode */
[data-theme="light"] .stat-change {
  background: rgba(0,20,40,0.04);
  border-color: rgba(0,40,80,0.08);
  color: rgba(0,20,40,0.85);
}

[data-theme="light"] .stat-icon {
  background: rgba(0,20,40,0.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,40,80,0.08);
}
[data-theme="light"] .stat-icon.teal   { background: rgba(29,168,208,0.18); color: #1890b0; }
[data-theme="light"] .stat-icon.blue   { background: rgba(90,150,210,0.16); color: #2878b0; }
[data-theme="light"] .stat-icon.amber  { background: rgba(216,144,32,0.16); color: #b07818; }
[data-theme="light"] .stat-icon.purple { background: rgba(136,88,192,0.18); color: #7048a8; }

[data-theme="light"] .story:hover {
  background: rgba(0,20,40,0.04);
  border-color: rgba(0,40,80,0.08);
}

[data-theme="light"] .rd-item:hover {
  background: rgba(0,20,40,0.04);
  border-color: rgba(0,40,80,0.08);
}
[data-theme="light"] .rd-item.current {
  background: linear-gradient(160deg, rgba(29,168,208,0.14), rgba(29,168,208,0.03));
  border-color: rgba(29,168,208,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 4px rgba(0,40,80,0.08);
}
[data-theme="light"] .rd-item.current .rd-time { color: #1890b0; }

[data-theme="light"] .rd-tag {
  background: rgba(0,20,40,0.04);
  border-color: rgba(0,40,80,0.08);
  color: rgba(0,20,40,0.85);
}
[data-theme="light"] .rd-tag.now,
[data-theme="light"] .rd-tag.wait { color: #fff; border-color: transparent; }

[data-theme="light"] .ai-icon {
  background: rgba(136,88,192,0.2);
  color: #7048a8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,40,80,0.1),
    0 0 18px rgba(136,88,192,0.22);
}
[data-theme="light"] .ai-type { color: #7048a8; }
[data-theme="light"] .ai-type::before { background: #7048a8; }
[data-theme="light"] .ai-action { color: #7048a8; }
[data-theme="light"] .ai-card::after {
  background: linear-gradient(135deg, rgba(136,88,192,0.05) 0%, rgba(96,96,208,0.02) 100%);
}

[data-theme="light"] .table-section th { border-bottom-color: rgba(0,40,80,0.08); }
[data-theme="light"] .table-section td { border-bottom-color: rgba(0,40,80,0.04); }
[data-theme="light"] .table-section tbody tr:hover { background: rgba(0,20,40,0.03); }

/* ─── Responsive ─── */
@media (max-width: 1279px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .highlights .glass:last-child { grid-column: span 2; }
  .ai-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .highlights { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
  .glass { border-radius: var(--r-lg); }
  .glass:hover { transform: none; } /* disable hover lift on touch */
  .stat-val { font-size: 28px; }
}