/* ==========================================================================
   DashView — Executive: Companies  (pairs with js/exec-company.js)
   Uses the shared tokens, so it follows the dark / light theme. Each company
   carries one colour (--c) from the chart palette, used identically on chips,
   bars, table dots and legends.
   ========================================================================== */
.xc { margin: 14px 0 10px; display: flex; flex-direction: column; gap: 14px; }
.xc[hidden] { display: none; }

/* ── Company bar ─────────────────────────────────────────────────────── */
.xc-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.xc-bar-l { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.xc-bar-t { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); }
.xc-bar-l b { font-size: .95rem; font-weight: 700; color: var(--ink); }
.xc-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.xc-chip { --c: var(--signal); display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 14px; font: 600 .8125rem var(--f-body); color: var(--ink-70); background: var(--paper-soft); border: 1px solid var(--line); border-radius: 99px; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.xc-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.xc-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-chip:hover { border-color: var(--c); color: var(--ink); transform: translateY(-1px); }
.xc-chip.is-on { color: var(--ink); border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--paper-soft)); }
.xc-chip:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.xc-all { --c: var(--signal); }
.xc-all.is-on { background: var(--signal-20); }

/* ── Comparison ──────────────────────────────────────────────────────── */
.xc-cmp { display: flex; flex-direction: column; gap: 14px; }
.xc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.xc-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.xc-head p { margin: 3px 0 0; font-size: .8125rem; color: var(--ink-50); }
.xc-note { padding: 10px 14px; font-size: .8125rem; line-height: 1.5; color: var(--ink-70); background: var(--signal-10); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.xc-note b { color: var(--ink); }
.xc-empty { padding: 30px 12px; text-align: center; font-size: .8125rem; color: var(--ink-50); }

/* Metric cards: every card is the same grid, so company names, bars, values and deltas line up */
.xc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.xc-card { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.xc-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.xc-card-h h4 { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--ink); }
.xc-card-h small { font-size: .75rem; color: var(--ink-50); }
.xc-tot { text-align: right; }
.xc-tot b { display: block; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.xc-tot small { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; }
.xc-rows { display: flex; flex-direction: column; gap: 9px; }
.xc-row { --c: var(--signal); display: grid; grid-template-columns: minmax(80px, 1.1fr) minmax(60px, 1.6fr) auto 68px; align-items: center; gap: 10px; font-size: .8125rem; }
.xc-co { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-70); font-weight: 500; }
.xc-co i, .xc-tn i, .xc-lg i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.xc-track { height: 9px; border-radius: 99px; background: var(--paper-soft); border: 1px solid var(--line); overflow: hidden; }
.xc-track u { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, transparent), var(--c)); text-decoration: none; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.xc-row b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.xc-row em { font-style: normal; text-align: right; white-space: nowrap; }
.xc-row.is-best .xc-co { color: var(--ink); font-weight: 700; }
.xc-row.is-best .xc-track { border-color: var(--c); }

.xc-explore { align-self: flex-start; margin-top: 2px; padding: 4px 2px; font: 600 .75rem var(--f-body); color: var(--signal); background: none; border: 0; cursor: pointer; }
.xc-explore:hover { text-decoration: underline; }
.xc-row.is-drillable-x { padding: 3px 6px; margin: -3px -6px; border: 1px solid transparent; border-radius: var(--r-sm, 8px); }
.xc-row.is-drillable-x:hover { background: var(--signal-10); }
.xc-table td.is-drillable-x:hover { background: var(--signal-10); }

/* Chart grids */
.xc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.xc-grid.xc-g3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.xc-grid.xc-g1 { grid-template-columns: minmax(0, 1fr); }
.xc-panel { min-width: 0; margin: 0; }
.xc-cv { position: relative; height: 300px; }
.xc-cv-s { height: 270px; }
.xc-cv canvas { max-width: 100%; }
.xc-leg { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.xc-lg { --c: var(--signal); display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; font-size: .8125rem; color: var(--ink-70); }
.xc-lg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-lg b { font-variant-numeric: tabular-nums; color: var(--ink); }

/* Side-by-side table */
.xc-scroll { overflow-x: auto; }
.xc-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.xc-table th { text-align: left; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); padding: 8px 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.xc-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; white-space: nowrap; }
.xc-table tbody tr:last-child td { border-bottom: 0; }
.xc-table tbody tr:hover td { background: var(--signal-10); }
.xc-table .xc-num { text-align: right; font-variant-numeric: tabular-nums; }
.xc-table td.is-best { font-weight: 700; box-shadow: inset 0 -2px 0 var(--signal); }
.xc-table td small { display: block; margin-top: 2px; font-size: .6875rem; }
.xc-tn { --c: var(--signal); display: flex; align-items: center; gap: 8px; font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.xc-foot { margin: 10px 2px 0; font-size: .75rem; line-height: 1.5; color: var(--ink-50); }

@media (max-width: 980px) {
  .xc-grid, .xc-grid.xc-g3 { grid-template-columns: minmax(0, 1fr); }
  .xc-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .xc-row { grid-template-columns: minmax(70px, 1fr) minmax(40px, 1fr) auto; }
  .xc-row em { display: none; }
  .xc-bar { padding: 10px 12px; }
}
@media print {
  .xc-chips, #xcExport { display: none; }
  .xc-panel, .xc-card { break-inside: avoid; }
}