/* ==========================================================================
   Contracts (CLM) — Portfolio Overview dashboards and chart shapes

   Loaded after clm.css. Everything here is scoped under .clm.

   WHERE COLOR GOES ON THESE PAGES
   Charts are the one place color is spent freely, because inside a chart
   the color is the information rather than decoration. Outside a chart the
   same four-place rule the rest of the module follows still applies: the
   icon chip, the active tab, a lead panel's edge and the header wash.

   A KPI tile adds one more: the figure itself takes a semantic color when
   the figure is bad news. That is meaning, not identity, and it is the
   single thing a person is meant to read first.

   CONTRAST
   No text is ever painted on a saturated fill. Treemap boxes, heat cells
   and bubbles carry a tint of at most 38 percent against the card, with the
   label in --foreground, so every one of them clears 4.5:1 in both themes
   without a per-hue exception. Bars and arcs carry no text at all; their
   values sit outside them.
   ========================================================================== */

/* ==================================================== page furniture ==== */

/* ----------------------------------------------------------- header ---- */

.clm .clm-dhead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px 16px;
  background: linear-gradient(180deg, var(--area-soft), var(--card) 46%);
  border-bottom: 1px solid var(--border);
  padding-block: 13px 12px;
}
.clm .clm-dhead-in { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1 1 340px; }
.clm .clm-dhead-t { min-width: 0; }
.clm .clm-dhead-d {
  margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted-foreground);
  max-width: 78ch;
}
/* The role line is what makes the permission model visible before it
   exists: a person reading this page can see who it was built for. */
.clm .clm-dhead-role {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--secondary); border: 1px solid var(--border);
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em; white-space: nowrap;
  color: var(--secondary-foreground);
}
.clm .clm-dhead-acts { display: flex; gap: 8px; flex: none; }
@media (max-width: 560px) {
  .clm .clm-dhead-acts { width: 100%; }
  .clm .clm-dhead-acts .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------ scope ---- */
/* Above the tabs on purpose. It governs all five dashboards, and a control
   that sits inside a tab panel looks as though it governs only that tab. */

.clm .clm-dscope {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding-block: 7px;
}
.clm .clm-dscope-in { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.clm .clm-dscope-lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .clm-dscope-sel {
  font: inherit; font-size: 12.5px; font-weight: 600;
  min-height: 34px; padding: 4px 30px 4px 10px;
  border: 1px solid var(--input); border-radius: var(--r-md);
  background: var(--card); color: var(--foreground);
  max-width: min(100%, 320px);
}
.clm .clm-dscope-sel:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.clm .clm-dscope-n { font-size: 12px; color: var(--muted-foreground); }

/* ------------------------------------------------------------- tabs ---- */
/* Five tabs. They scroll on a narrow screen rather than collapsing into a
   sheet, because five short labels fit across a phone at this size and a
   sheet for five items costs a tap for nothing. The icons carry the area
   color so the strip reads as five places rather than five words. */

.clm .clm-dtabs {
  background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: var(--topbar-h); z-index: 6;
}
.clm .clm-dtabs-in {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.clm .clm-dtabs-in::-webkit-scrollbar { display: none; }

.clm .clm-dtab {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 10px 13px 9px; min-height: 44px; scroll-snap-align: start;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--muted-foreground); white-space: nowrap;
}
.clm .clm-dtab:hover { color: var(--foreground); background: var(--secondary); }
.clm .clm-dtab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.clm .clm-dtab-ico { display: inline-flex; color: var(--muted-foreground); }
.clm .clm-dtab[aria-selected="true"] {
  color: var(--area); border-bottom-color: var(--area); font-weight: 700;
  background: var(--area-soft);
}
.clm .clm-dtab[aria-selected="true"] .clm-dtab-ico { color: var(--area); }

@media (max-width: 480px) {
  .clm .clm-dtab { padding-inline: 10px; font-size: 12px; }
}

.clm .clm-dbody { padding-top: 12px; }

/* ---------------------------------------------------------- filters ---- */

.clm .clm-dfilters {
  background: var(--surface); border-bottom: 1px solid var(--border); padding-block: 8px;
}
.clm .clm-dfilters-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clm .clm-dfilters-l {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.clm .clm-dchip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 4px 8px 4px 11px; border-radius: 999px;
  background: var(--area-soft); border: 1px solid var(--area-line); color: var(--area);
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; max-width: 100%;
}
.clm .clm-dchip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clm .clm-dchip:hover { background: var(--card); }
.clm .clm-dchip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .clm-dchip-x { display: inline-flex; opacity: .8; }

/* ======================================================= AI elements ==== */

/* The one full width AI element on the page. */
.clm .clm-dstrip {
  display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap;
  margin: 12px 0 14px; padding: 11px 13px;
  background: var(--a-ai-soft); border: 1px solid var(--a-ai-line);
  border-left: 3px solid var(--a-ai); border-radius: var(--r-lg);
}
.clm .clm-dstrip-ico {
  display: inline-flex; flex: none; width: 26px; height: 26px; border-radius: 8px;
  align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--a-ai-line); color: var(--a-ai-strong);
}
.clm .clm-dstrip-t {
  margin: 0; flex: 1 1 380px; min-width: 0;
  font-size: 13px; line-height: 1.5; color: var(--foreground);
}
.clm .clm-dstrip-acts { display: flex; gap: 7px; flex-wrap: wrap; flex: none; }
@media (max-width: 560px) {
  .clm .clm-dstrip-acts { width: 100%; }
  .clm .clm-dstrip-acts .btn { flex: 1 1 auto; justify-content: center; }
}

/* The AI line under a chart. Inside the card, never across the page: it is
   about that chart and nothing else. */
.clm .clm-dai {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 12px -13px -12px; padding: 11px 13px;
  border-top: 1px dashed var(--a-ai-line); background: var(--a-ai-soft);
  border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg);
}
.clm .clm-dai-ico { display: inline-flex; flex: none; margin-top: 1px; color: var(--a-ai-strong); }
.clm .clm-dai-b { min-width: 0; flex: 1; }
.clm .clm-dai-t { margin: 0; font-size: 12px; line-height: 1.55; color: var(--foreground); }
.clm .clm-dai-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
@media (max-width: 420px) {
  .clm .clm-dai-acts .btn { width: 100%; justify-content: center; }
}

/* ============================================================= KPIs ==== */

.clm .clm-kpis {
  display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}
@media (min-width: 900px) { .clm .clm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 380px)  { .clm .clm-kpis { grid-template-columns: 1fr; } }

.clm .clm-kpi {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 11px 12px 10px; min-height: 92px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel); font: inherit; cursor: pointer;
}
.clm .clm-kpi:hover { border-color: var(--area-line); box-shadow: var(--shadow-raised); }
.clm .clm-kpi:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .clm-kpi-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.clm .clm-kpi-l {
  font-size: 11px; font-weight: 650; letter-spacing: .01em; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clm .clm-kpi-f {
  font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) { .clm .clm-kpi-f { font-size: 29px; } }
.clm .clm-kpi-m { font-size: 11px; line-height: 1.35; color: var(--muted-foreground); }
.clm .clm-kpi-sp { display: block; margin-top: auto; padding-top: 7px; }

/* The figure takes a semantic color only. Area color would say where you
   are, which the header already says; this has to say how bad it is. */
.clm .clm-kpi[data-tone="danger"]  .clm-kpi-f { color: var(--destructive); }
.clm .clm-kpi[data-tone="warning"] .clm-kpi-f { color: var(--warning); }
.clm .clm-kpi[data-tone="success"] .clm-kpi-f { color: var(--success); }
.clm .clm-kpi[data-tone="danger"]  .clm-chip { background: var(--destructive-soft); color: var(--destructive); border-color: var(--destructive-soft); }
.clm .clm-kpi[data-tone="warning"] .clm-chip { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-soft); }
.clm .clm-kpi[data-tone="success"] .clm-chip { background: var(--success-soft); color: var(--success); border-color: var(--success-soft); }

/* ============================================================= grid ==== */

.clm .clm-dgrid { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 4px; }
@media (min-width: 1000px) { .clm .clm-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .clm .clm-dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A wide fifth card: a table needs the width more than a chart does. */
@media (min-width: 1000px) {
  .clm .clm-dgrid-wide-last > .clm-panel:last-child { grid-column: 1 / -1; }
}

/* ==================================================== chart wrapper ==== */

.clm .clm-cx { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.clm .clm-cx-plot { min-width: 0; }

/* Any mark that opens something. Keyboard users reach the same place from
   the axis buttons and the data table below, which is why these are divs
   rather than controls: they sit inside role="img". */
.clm .is-hot { cursor: pointer; }

/* ------------------------------------------------- keys, axes, table --- */

.clm .clm-cx-keys {
  display: flex; flex-wrap: wrap; gap: 3px 4px; margin: 0; padding: 0; list-style: none;
}
.clm .clm-cx-keys-col { flex-direction: column; flex-wrap: nowrap; gap: 1px; }
.clm .clm-cx-keys-col > li { width: 100%; }
.clm .clm-cx-keys-col .clm-cx-key { width: 100%; }

.clm .clm-cx-key {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px 8px; border-radius: var(--r-md);
  background: none; border: 1px solid transparent; font: inherit;
  font-size: 11.5px; color: var(--muted-foreground); cursor: pointer; text-align: left;
}
.clm .clm-cx-key.is-flat { cursor: default; }
button.clm-cx-key:hover { background: var(--secondary); color: var(--foreground); }
button.clm-cx-key:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.clm .clm-cx-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.clm .clm-cx-kl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clm .clm-cx-kv { margin-left: auto; font-weight: 650; color: var(--foreground); font-variant-numeric: tabular-nums; }

/* An axis under a chart. Equal columns so a label sits under its own bar. */
.clm .clm-cx-axis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.clm .clm-cx-axis .clm-cx-key {
  justify-content: center; text-align: center; padding-inline: 2px;
  font-size: 10.5px; line-height: 1.2;
}
.clm .clm-cx-axis .clm-cx-kl { white-space: normal; overflow-wrap: anywhere; }

/* A time axis can carry twelve or more ticks. Every other one is hidden
   below a tablet so the row stays readable; the hidden months are still in
   the data table, so nothing is lost. */
@media (max-width: 720px) {
  .clm .clm-cx-axis-time > li.is-thin { display: none; }
}

/* A tick is a control, so it may not be narrower than 24px. Below that the
   axis stops being a grid of equal columns and wraps instead: the labels
   no longer sit exactly under their bars, which is a smaller loss than a
   target nobody can hit. */
@media (max-width: 360px) {
  .clm .clm-cx-axis { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
}

.clm .clm-cx-data { margin-top: 2px; }
.clm .clm-cx-data > summary {
  list-style: none; cursor: pointer; display: inline-block;
  border-radius: var(--r-md);
}
.clm .clm-cx-data > summary::-webkit-details-marker { display: none; }
.clm .clm-cx-sum {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 9px;
  font-size: 11.5px; font-weight: 600; color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card);
}
.clm .clm-cx-data > summary:hover .clm-cx-sum { color: var(--foreground); background: var(--secondary); }
.clm .clm-cx-data > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.clm .clm-cx-data[open] > summary { margin-bottom: 7px; }
.clm .clm-cx-tbl { font-size: 11.5px; }
/* A row label in the data table is a control, so it has to be at least
   24px tall even though it reads as a link inside a cell. */
.clm .clm-cx-link {
  display: inline-flex; align-items: center; min-height: 24px;
  background: none; border: 0; padding: 2px 0; font: inherit; font-weight: 650;
  color: var(--area); text-align: left; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.clm .clm-cx-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ================================================ 1. vertical columns == */

.clm .clm-cxv { position: relative; padding-top: 4px; }
.clm .clm-cxv-cols {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
  height: 132px; align-items: end;
}
.clm .clm-cxv[data-tall="1"] .clm-cxv-cols { height: 168px; }

.clm .clm-cxv-col {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  height: 100%; gap: 3px; border-radius: var(--r-sm); padding: 2px;
}
.clm .clm-cxv-col.is-hot:hover { background: var(--secondary); }
.clm .clm-cxv-v {
  font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.2;
  color: var(--muted-foreground); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clm .clm-cxv-bar {
  display: block; width: 100%; background: var(--c1);
  border-radius: 3px 3px 1px 1px; min-height: 3px;
}
.clm .clm-cxv-col[data-tone="danger"]  .clm-cxv-v { color: var(--destructive); }
.clm .clm-cxv-col[data-tone="warning"] .clm-cxv-v { color: var(--warning); }
.clm .clm-cxv-col[data-tone="success"] .clm-cxv-v { color: var(--success); }

/* A stack is one bar cut into parts, so it keeps the bar's own radius. */
.clm .clm-cxv-stack {
  display: flex; flex-direction: column-reverse; width: 100%; min-height: 3px;
  border-radius: 3px 3px 1px 1px; overflow: hidden;
}
.clm .clm-cxv-seg { display: block; width: 100%; min-height: 2px; }

.clm .clm-cxv-target {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--muted-foreground); pointer-events: none;
}
.clm .clm-cxv-target-l {
  position: absolute; right: 0; top: -14px;
  font-size: 10px; font-weight: 650; color: var(--muted-foreground);
  background: var(--card); padding: 0 4px;
}

/* ============================================== 2. horizontal bars ===== */

.clm .clm-cxh { position: relative; display: flex; flex-direction: column; gap: 2px; }

.clm .clm-cxh-row {
  display: grid; align-items: center; gap: 4px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px 6px; border-radius: var(--r-md); min-height: 44px;
}
.clm .clm-cxh-row.is-hot:hover { background: var(--secondary); }
.clm .clm-cxh-lab {
  font-size: 12px; font-weight: 600; line-height: 1.3; min-width: 0;
  overflow-wrap: anywhere;
}
.clm .clm-cxh-val {
  font-size: 11.5px; font-weight: 700; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--muted-foreground);
}
.clm .clm-cxh-row[data-tone="danger"]  .clm-cxh-val { color: var(--destructive); }
.clm .clm-cxh-row[data-tone="warning"] .clm-cxh-val { color: var(--warning); }
.clm .clm-cxh-row[data-tone="success"] .clm-cxh-val { color: var(--success); }

.clm .clm-cxh-track {
  grid-column: 1 / -1; display: block; height: 9px; border-radius: 999px;
  background: var(--secondary); overflow: hidden;
}
.clm .clm-cxh-fill { display: block; height: 100%; border-radius: 999px; background: var(--c1); }

.clm .clm-cxh-note {
  margin: -2px 0 6px; padding-inline: 6px;
  font-size: 11px; line-height: 1.4; color: var(--muted-foreground);
}

/* The threshold marker runs the height of the plot rather than sitting on
   one bar, because it applies to all of them. */
.clm .clm-cxh-thr {
  position: absolute; top: 0; bottom: 18px; width: 0;
  border-left: 1px dashed var(--destructive); pointer-events: none; z-index: 1;
}
/* The label hangs to the left of the line. A threshold sits near the right
   of the scale by definition, so a label placed after it runs off the card
   and widens the whole plot. */
.clm .clm-cxh-thr-l {
  position: absolute; top: -2px; right: 4px; left: auto; white-space: nowrap;
  font-size: 10px; font-weight: 650; color: var(--destructive);
  background: var(--card); padding: 0 3px; border-radius: 3px;
}

/* ====================================================== 3. line/area === */

.clm .clm-cxl { position: relative; height: 136px; }
.clm .clm-cxl[data-tall="1"] { height: 172px; }
.clm .clm-cxl > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.clm .clm-cxl-hot {
  position: absolute; inset: 0; display: grid;
  grid-auto-flow: column; grid-auto-columns: 1fr;
}
.clm .clm-cxl-cell { display: block; border-radius: 3px; }
.clm .clm-cxl-cell.is-hot:hover { background: var(--secondary); mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .clm .clm-cxl-cell.is-hot:hover { mix-blend-mode: screen; }
}
:root[data-theme="dark"] .clm .clm-cxl-cell.is-hot:hover { mix-blend-mode: screen; }

/* ========================================================== 4. donut === */

.clm .clm-cxd { display: flex; justify-content: center; padding: 4px 0 2px; }
.clm .clm-cxd-ring { position: relative; width: 140px; max-width: 100%; }
.clm .clm-cxd-ring > svg { width: 100%; height: auto; display: block; }
.clm .clm-cxd-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; pointer-events: none;
}
.clm .clm-cxd-c1 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.clm .clm-cxd-c2 { font-size: 10.5px; color: var(--muted-foreground); }

/* ========================================================= 5. gauges === */

.clm .clm-cxgs {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.clm .clm-cxg {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 6px; border-radius: var(--r-md); text-align: center;
}
.clm .clm-cxg.is-hot:hover { background: var(--secondary); }
.clm .clm-cxg-arc { position: relative; width: 84px; max-width: 100%; }
.clm .clm-cxg-arc > svg { width: 100%; height: auto; display: block; }
.clm .clm-cxg-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.clm .clm-cxg-lab { font-size: 11px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.clm .clm-cxg-sub { font-size: 10px; color: var(--muted-foreground); }

/* ======================================================== 6. treemap === */
/* Fill at a low tint with the full color on the edge, so the label stays
   --foreground and clears contrast in both themes without a per-hue rule. */

.clm .clm-cxt {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 170px;
  border-radius: var(--r-md); overflow: hidden; background: var(--secondary);
}
.clm .clm-cxt-box { position: absolute; padding: 1px; }
.clm .clm-cxt-fill {
  position: absolute; inset: 1px; border-radius: 3px; opacity: .2;
}
.clm .clm-cxt-box::after {
  content: ''; position: absolute; inset: 1px; border-radius: 3px;
  border: 1px solid var(--border); pointer-events: none;
}
.clm .clm-cxt-box.is-hot:hover .clm-cxt-fill { opacity: .38; }
.clm .clm-cxt-text {
  position: absolute; inset: 1px; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 1px; padding: 6px 7px; overflow: hidden;
}
.clm .clm-cxt-l {
  font-size: 11px; font-weight: 650; line-height: 1.2; color: var(--foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clm .clm-cxt-v {
  font-size: 10.5px; font-weight: 700; color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

@media (max-width: 560px) { .clm .clm-cxt { aspect-ratio: 4 / 3; } }

/* ======================================================= 7. heat map === */
/* Depth of tint AND a printed count. Color alone is not a readable
   encoding, and a risk grid has to stay a risk grid for somebody who
   cannot separate red from green. */

.clm .clm-cxm {
  display: grid; gap: 4px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "y grid" ". x";
}
.clm .clm-cxm-grid {
  grid-area: grid; display: grid; gap: 3px;
  grid-template-columns: repeat(var(--cxm-cols, 3), minmax(0, 1fr));
}
/* oklab, not oklch. Mixing a hue with an achromatic ground in oklch
   interpolates the hue channel toward white, whose hue reads as zero, so a
   green at 30 percent came out orange. oklab has no hue channel: it mixes
   the two color axes directly and a tint of green stays green. */
.clm .clm-cxm-cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted-foreground) calc(var(--cxm-w, 0) * 30%), var(--card));
}
.clm .clm-cxm-cell[data-tone="danger"]  { background: color-mix(in oklab, var(--destructive) calc(var(--cxm-w, 0) * 34%), var(--card)); border-color: var(--destructive-soft); }
.clm .clm-cxm-cell[data-tone="warning"] { background: color-mix(in oklab, var(--warning) calc(var(--cxm-w, 0) * 34%), var(--card)); border-color: var(--warning-soft); }
.clm .clm-cxm-cell[data-tone="success"] { background: color-mix(in oklab, var(--success) calc(var(--cxm-w, 0) * 30%), var(--card)); border-color: var(--success-soft); }
.clm .clm-cxm-cell.is-hot:hover { outline: 2px solid var(--area); outline-offset: -2px; }
.clm .clm-cxm-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--foreground); }

.clm .clm-cxm-x {
  grid-area: x; display: grid; grid-template-columns: repeat(var(--cxm-cols, 3), minmax(0, 1fr));
  gap: 3px; text-align: center;
}
.clm .clm-cxm-y {
  grid-area: y; display: grid; gap: 3px; align-content: stretch;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.clm .clm-cxm-x > span, .clm .clm-cxm-y > span {
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 650; color: var(--muted-foreground);
}
.clm .clm-cxm-y > span { justify-content: flex-end; padding-right: 3px; text-align: right; }

/* ========================================================= 8. bubble === */

.clm .clm-cxb { display: flex; flex-direction: column; gap: 6px; }
.clm .clm-cxb-area {
  position: relative; height: 178px;
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  border-radius: 0 0 0 var(--r-sm);
}
.clm .clm-cxb-pt {
  position: absolute; transform: translate(-50%, 50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.clm .clm-cxb-dot {
  display: flex; align-items: center; justify-content: center;
  width: var(--cxb-s, 30px); height: var(--cxb-s, 30px); border-radius: 50%;
  background: color-mix(in oklab, var(--muted-foreground) 26%, var(--card));
  border: 1.5px solid var(--muted-foreground);
}
.clm .clm-cxb-pt[data-tone="danger"]  .clm-cxb-dot { background: color-mix(in oklab, var(--destructive) 26%, var(--card)); border-color: var(--destructive); }
.clm .clm-cxb-pt[data-tone="warning"] .clm-cxb-dot { background: color-mix(in oklab, var(--warning) 26%, var(--card)); border-color: var(--warning); }
.clm .clm-cxb-pt[data-tone="success"] .clm-cxb-dot { background: color-mix(in oklab, var(--success) 26%, var(--card)); border-color: var(--success); }
.clm .clm-cxb-pt.is-hot:hover .clm-cxb-dot { outline: 2px solid var(--area); outline-offset: 2px; }
.clm .clm-cxb-r { font-size: 11px; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; }
.clm .clm-cxb-l {
  font-size: 10px; font-weight: 600; color: var(--muted-foreground);
  max-width: 11ch; text-align: center; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clm .clm-cxb-ax {
  margin: 0; display: flex; justify-content: space-between; gap: 10px;
  font-size: 10.5px; font-weight: 650; color: var(--muted-foreground);
}

/* ========================================================== 9. rings === */

.clm .clm-cxr {
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.clm .clm-cxr-one {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 8px 5px; border-radius: var(--r-md);
}
.clm .clm-cxr-one.is-hot:hover { background: var(--secondary); }
.clm .clm-cxr-ring {
  display: flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: conic-gradient(var(--cxr-c, var(--c1)) var(--cxr-p, 0%), var(--secondary) 0);
}
.clm .clm-cxr-one[data-tone="danger"]  { --cxr-c: var(--destructive); }
.clm .clm-cxr-one[data-tone="warning"] { --cxr-c: var(--warning); }
.clm .clm-cxr-one[data-tone="success"] { --cxr-c: var(--success); }
.clm .clm-cxr-hole {
  display: flex; align-items: baseline; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%; background: var(--card);
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  align-items: center;
}
.clm .clm-cxr-pc { font-size: 9.5px; font-weight: 600; color: var(--muted-foreground); }
.clm .clm-cxr-lab { font-size: 11px; font-weight: 650; overflow-wrap: anywhere; }
.clm .clm-cxr-sub {
  font-size: 10px; line-height: 1.3; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ========================================================= 10. runway == */

.clm .clm-cxw { position: relative; display: flex; flex-direction: column; gap: 2px; }
.clm .clm-cxw-grid { position: absolute; inset: 0 0 20px 0; pointer-events: none; }
.clm .clm-cxw-mark {
  position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--border);
}

.clm .clm-cxw-row {
  display: grid; align-items: center; gap: 3px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px 4px; border-radius: var(--r-md); min-height: 44px;
}
.clm .clm-cxw-row.is-hot:hover { background: var(--secondary); }
.clm .clm-cxw-lab { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.clm .clm-cxw-t {
  font-size: 12px; font-weight: 620; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clm .clm-cxw-s { font-size: 10.5px; color: var(--muted-foreground); font-family: var(--mono, ui-monospace, monospace); }
.clm .clm-cxw-when {
  font-size: 11px; font-weight: 700; white-space: nowrap; text-align: right;
  color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.clm .clm-cxw-row[data-tone="danger"]  .clm-cxw-when { color: var(--destructive); }
.clm .clm-cxw-row[data-tone="warning"] .clm-cxw-when { color: var(--warning); }
.clm .clm-cxw-row[data-tone="success"] .clm-cxw-when { color: var(--success); }

.clm .clm-cxw-track {
  grid-column: 1 / -1; position: relative; height: 10px;
  background: var(--secondary); border-radius: 999px;
}
/* The lead time the decision needs, shown behind the date it is due. */
.clm .clm-cxw-lead {
  position: absolute; top: 2px; bottom: 2px; border-radius: 999px;
  background: repeating-linear-gradient(135deg,
    var(--border) 0 4px, transparent 4px 8px);
  border: 1px solid var(--border);
}
.clm .clm-cxw-pin {
  position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px;
  border-radius: 2px; background: var(--muted-foreground);
}
.clm .clm-cxw-row[data-tone="danger"]  .clm-cxw-pin { background: var(--destructive); }
.clm .clm-cxw-row[data-tone="warning"] .clm-cxw-pin { background: var(--warning); }
.clm .clm-cxw-row[data-tone="success"] .clm-cxw-pin { background: var(--success); }

.clm .clm-cxw-ax { position: relative; height: 16px; margin: 2px 0 0; }
.clm .clm-cxw-ax > span {
  position: absolute; transform: translateX(-50%);
  font-size: 10px; font-weight: 650; color: var(--muted-foreground); white-space: nowrap;
}
.clm .clm-cxw-ax > span:first-child { transform: none; }
.clm .clm-cxw-ax > span:last-child { transform: translateX(-100%); }

/* ====================================================== 11. sparkline == */

.clm .clm-cxs { display: block; width: 100%; height: 22px; }
.clm .clm-cxs > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.clm .clm-tbl .clm-cxs { width: 72px; min-width: 56px; }


/* ============================== marks that are real controls =========== */
/* Four shapes draw their marks as buttons rather than as divs inside an
   image: horizontal bars, gauges, rings and the runway. They already say
   what they are in words, so the mark itself can be the control and the
   duplicate row of axis labels underneath is gone. These rules undo the
   button defaults and give each one a visible focus ring. */

.clm button.clm-cxh-row,
.clm button.clm-cxg,
.clm button.clm-cxr-one,
.clm button.clm-cxw-row {
  width: 100%; background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.clm button.clm-cxg,
.clm button.clm-cxr-one { text-align: center; }

.clm button.clm-cxh-row:focus-visible,
.clm button.clm-cxg:focus-visible,
.clm button.clm-cxr-one:focus-visible,
.clm button.clm-cxw-row:focus-visible {
  outline: 2px solid var(--ring); outline-offset: -2px;
}
.clm button.clm-cxh-row:hover,
.clm button.clm-cxw-row:hover { background: var(--secondary); }

/* ====================================================== narrow screens == */

@media (max-width: 420px) {
  .clm .clm-cxv-cols { height: 116px; }
  .clm .clm-cxv[data-tall="1"] .clm-cxv-cols { height: 140px; }
  .clm .clm-cxl { height: 118px; }
  .clm .clm-cxb-area { height: 152px; }
  .clm .clm-cx-axis .clm-cx-key { font-size: 9.5px; }
  .clm .clm-dai { margin-inline: -11px; padding-inline: 11px; }
}

/* A stacked column with four series becomes unreadable below about 28px of
   width per column. Twelve months on a phone is 26px, so the chart keeps
   its shape and the axis drops every other label rather than the chart
   being replaced by something else on a small screen. Every feature stays
   available on every device; only the label density changes. */
@media (max-width: 380px) {
  .clm .clm-cxv-cols { gap: 2px; }
  .clm .clm-cxv-v { font-size: 9.5px; }
}

@media print {
  .clm .clm-cx-data { display: none; }
  .clm .clm-dtabs { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .clm .clm-kpi, .clm .clm-cxh-row, .clm .clm-cxw-row { transition: none; }
}