/* ==========================================================================
   Demo dashboard — newspaper data graphics, not an admin theme.
   Loaded only by pages under /demo/, so the porch stays as light as it was.

   The rules of the house, kept from the rest of the site: hairlines instead
   of shadows, square-ish corners, small-caps section marks, warm paper. What
   is new here is a numeric voice — figures are set in the mono outlier face,
   because the body serif renders old-style figures of varying height, which
   is wrong for a column of numbers that has to be scanned.
   ========================================================================== */

/* --------------------------------------------------------------- shell */

.dash {
  /* Named so the view CSS (views.css) can query THIS box's width rather
     than the viewport's — the phone view is the same dashboard constrained
     to a 390px container, not a second layout, and that only works if the
     breakpoints below react to the container, not the window. */
  container-type: inline-size;
  container-name: dash;
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-block: var(--space-xl) var(--space-3xl);
}

.dash > * + * {
  margin-top: var(--space-xl);
}

.dash .prose-intro {
  max-width: var(--measure);
}

.dash .prose-intro p {
  margin: 0 0 var(--space-md);
}

/* ------------------------------------------------- synthetic-data banner
   Required on every dashboard, and deliberately not subtle. A demo that
   looks like real reporting is a liability, not a portfolio piece. */

.demo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-accent);
  border-inline-start-width: var(--space-2xs);
  background: var(--color-paper-2);
}

.demo-banner strong {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.demo-banner span {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-neutral);
}

/* ------------------------------------------------------ signal encoding
   One place decides what good, steady and declining look like. Colour is
   the fast-scan layer; the WORD and the SHAPE carry the meaning, so nothing
   here depends on being able to tell red from green. */

.is-good { --sig-text: var(--text-good); --sig-mark: var(--mark-good); }
.is-flat { --sig-text: var(--color-neutral); --sig-mark: var(--mark-warn); }
.is-bad  { --sig-text: var(--text-bad);  --sig-mark: var(--mark-bad); }

.delta-mark {
  display: inline-block;
  flex: none;
  inline-size: 0.6em;
  block-size: 0.6em;
  border: 1.5px solid var(--sig-mark, var(--color-neutral));
  border-radius: 50%;
  translate: 0 -0.03em;
}

.delta-mark.is-filled { background: var(--sig-mark); }
.delta-mark.is-half {
  background: linear-gradient(to right,
              var(--sig-mark) 0 50%, transparent 50% 100%);
}
.delta-mark.is-open { background: transparent; }

.delta-num {
  font-family: var(--font-outlier);
  font-variant-numeric: tabular-nums;
  color: var(--sig-text, var(--color-neutral));
}

/* ------------------------------------------------------------ KPI tiles */

.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@container dash (min-width: 30rem) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@container dash (min-width: 60rem) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule);
  /* the status stripe — the one place a tile carries its signal as colour */
  border-block-start: var(--space-3xs) solid var(--sig-mark, var(--color-rule));
  border-radius: var(--radius-sm);
}

.kpi-label {
  margin: 0;
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.07em;
  color: var(--color-neutral);
}

.kpi-value {
  margin: 0;
  font-family: var(--font-outlier);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-kpi);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}

.kpi-delta {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: var(--space-3xs) 0 0;
  font-size: var(--text-sm);
}

.kpi-note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-neutral);
}

/* --------------------------------------------------------------- panels */

.panel {
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--color-ink-2);
}

.panel-sub {
  margin: var(--space-3xs) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-neutral);
}

/* ------------------------------------------------- segmented control */

.seg {
  display: flex;
  gap: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  padding: var(--space-2xs) var(--space-sm);
  min-height: 2.25rem;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

.seg button + button {
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.seg button:hover { color: var(--color-accent); }
.seg button:active { color: var(--color-accent-2); }

.seg button.is-on {
  background: var(--color-accent);
  color: var(--color-paper);
}

.seg button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* ---------------------------------------------------------- trend chart */

.chart-host {
  width: 100%;
  min-width: 0;
}

.chart-host svg { display: block; width: 100%; height: auto; }

.grid   { stroke: var(--color-rule); stroke-width: 1; }
.axis   { fill: var(--color-neutral); font-family: var(--font-outlier); font-size: 10px; }
.bar-current { fill: var(--series-current); transform-box: fill-box; transform-origin: bottom; }
.line-prior  { stroke: var(--series-prior); stroke-width: 1.5; }
.dot-prior   { fill: var(--series-prior); }

.hit { fill: transparent; cursor: default; }
.hit.is-on { fill: var(--color-accent); fill-opacity: 0.07; }
.hit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

@keyframes bar-rise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* The readout replaces a floating tooltip: one line, above the chart, that
   behaves the same for a mouse, a finger and a keyboard. */
.readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  min-height: 1.75rem;
  margin: 0 0 var(--space-xs);
  padding-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  border-bottom: var(--rule-hair) dashed var(--color-rule);
}

.readout-hint { color: var(--color-neutral); font-size: var(--text-xs); }
.readout-month { color: var(--color-ink-2); font-weight: 600; }
.readout-val,
.readout-prior {
  font-family: var(--font-outlier);
  font-variant-numeric: tabular-nums;
}
.readout-val { color: var(--color-ink); }
.readout-prior { color: var(--color-neutral); font-size: var(--text-xs); }
.readout-delta { display: inline-flex; align-items: center; gap: var(--space-2xs);
                 font-family: var(--font-outlier); color: var(--sig-text); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

.legend li { display: flex; align-items: center; gap: var(--space-2xs); }
.swatch { inline-size: 0.85rem; block-size: 0.6rem; flex: none; }
.swatch.is-current { background: var(--series-current); }
.swatch.is-prior {
  background: transparent;
  border-block-start: 2px solid var(--series-prior);
  block-size: 0;
}

/* -------------------------------------------------------------- movers */

.movers { margin: 0; padding: 0; }

.mover {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name val" "track track";
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-xs) 0;
}

.mover + .mover { border-top: var(--rule-hair) solid var(--color-rule); }

@container dash (min-width: 40rem) {
  .mover {
    grid-template-columns: minmax(9rem, 15rem) 1fr auto;
    grid-template-areas: "name track val";
    align-items: center;
  }
}

.mover-name { grid-area: name; min-width: 0; }
.mover-sku { display: block; font-size: var(--text-sm); color: var(--color-ink); }
.mover-cat { display: block; font-size: var(--text-xs); color: var(--color-neutral); }

.mover-track {
  grid-area: track;
  position: relative;
  block-size: 0.75rem;
  min-width: 0;
}

.mover-zero {
  position: absolute;
  inset-block: -0.15rem;
  inset-inline-start: 50%;
  inline-size: var(--rule-hair);
  background: var(--color-rule-strong);
}

.mover-bar {
  position: absolute;
  inset-block: 0.1rem;
  background: var(--sig-mark);
  border-radius: var(--radius-sm);
}

.mover-val {
  grid-area: val;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-outlier);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--sig-text);
  white-space: nowrap;
}

/* --------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
}

.dtable {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.dtable caption {
  text-align: start;
  font-size: var(--text-xs);
  color: var(--color-neutral);
  padding-bottom: var(--space-xs);
}

.dtable th,
.dtable td {
  padding: var(--space-xs) var(--space-sm);
  text-align: start;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  white-space: nowrap;
}

.dtable thead th {
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-neutral);
  border-bottom: var(--rule-thick) solid var(--color-rule-strong);
}

.dtable tbody th { font-weight: 400; color: var(--color-ink); white-space: normal; }

.dtable .num {
  text-align: end;
  font-family: var(--font-outlier);
  font-variant-numeric: tabular-nums;
}

.dtable thead .num { text-align: end; }

.dtable .status { display: table-cell; }
.dtable .status .delta-mark { margin-inline-end: var(--space-2xs); }

/* Totals are a named row variant, not a zebra stripe — the shading means
   something. */
.dtable tr.is-total th,
.dtable tr.is-total td {
  border-top: var(--rule-hair) solid var(--color-rule-strong);
  border-bottom: 0;
  background: var(--color-paper-2);
  font-weight: 600;
  color: var(--color-ink-2);
}

/* -------------------------------------------------- disclosure data table */

.data-details {
  margin-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-top: var(--space-xs);
}

.data-details summary {
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  cursor: pointer;
  min-height: 1.75rem;
  display: flex;
  align-items: center;
}

.data-details summary:hover { color: var(--color-accent); }
.data-details summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.data-details .table-wrap { margin-top: var(--space-sm); }

/* ------------------------------------------------------------- footnote */

.dash-note {
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-neutral);
}

.dash-note h2 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-xs);
}

.dash-note p { margin: 0 0 var(--space-md); }
.dash-note ul { margin: 0 0 var(--space-md); padding-inline-start: var(--space-lg); }
.dash-note li { margin-bottom: var(--space-2xs); }

/* ------------------------------------------------------ drill + demo nav */

/* A distributor name in the coverage table is a real button that scopes the
   trend chart to that one company. It is styled as a link because that is
   what it does — it takes you somewhere in the data — and kept as a button
   because that is what it is. The reset ("All distributors") shares the
   class: one rule, two controls, same affordance. */
.drill {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.drill[aria-pressed="true"] { font-weight: 600; }

.drill:hover { color: var(--color-accent-2); }

.drill:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

[data-trend-reset] { margin-inline-end: var(--space-sm); }

/* The line under a demo's lede that names its siblings. The current page is
   plain text, not a link to itself. */
.demo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin: var(--space-sm) 0 0;
  font-size: var(--text-xs);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--color-neutral);
}

.demo-nav a { color: var(--color-muted); }
.demo-nav a:hover { color: var(--color-accent); }
.demo-nav [aria-current="page"] { color: var(--color-ink-2); font-weight: 600; }

/* ------------------------------------------------------------- printing */

@media print {
  .seg, .readout, .data-details { display: none; }
  .panel, .kpi { border: var(--rule-hair) solid var(--color-ink); break-inside: avoid; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}