/*
 * MetricAlly's own stylesheet — the ONLY one, and deliberately small.
 *
 * CHELABS Unified UI v2 (chelabs ADR-016) is the design system and is
 * vendored beside this file, byte-identical, never edited. This file
 * exists because the report grid needs one thing the system has no
 * component for: a heat scale on a table cell, whose colours a tenant
 * configures. The reasoning, the alternatives, and the request for the
 * component to be added to the platform system instead are in
 * docs/adr/0004-report-heatmap-and-the-design-system.md and
 * docs/DESIGN_SYSTEM.md.
 *
 * Three rules this file keeps, each enforced by
 * tests/test_design_system.py:
 *
 *   1. It defines NO `chelabs-*` class. ADR-016 gives the system that
 *      prefix precisely so it can be vendored next to a product's own
 *      CSS without collisions; every class here is `ma-`.
 *   2. It contains NO colour literal. Every colour is a `--cl-*` token,
 *      or a `color-mix()` of two of them — which is how a three-step
 *      green ramp exists without inventing three greens the system
 *      never approved.
 *   3. It loads nothing from another origin, and nothing here is an
 *      `@import`.
 *
 * Loaded LAST, after tokens/base/layout/components, so a rule here can
 * only ever add to the system and never silently reorder it.
 */

/* --------------------------------------------------------------- *
 * Tones — the colour vocabulary a band may name
 * (metrically/metrics/coloring.py TONES).
 *
 * Each is a wash of one semantic token over the card surface, at a
 * strength that keeps `--cl-td-text` legible on it: the number is the
 * information and the colour is the annotation, so the colour never
 * wins. The three-step ramps are one token at three strengths, which
 * is what makes "light green / green / dark green" a real ordering
 * rather than three unrelated greens.
 * --------------------------------------------------------------- */

.ma-tone-negative-strong { background: color-mix(in srgb, var(--cl-red) 34%, var(--cl-surface)); }
.ma-tone-negative        { background: color-mix(in srgb, var(--cl-red) 20%, var(--cl-surface)); }
.ma-tone-negative-soft   { background: color-mix(in srgb, var(--cl-red) 10%, var(--cl-surface)); }
.ma-tone-neutral         { background: var(--cl-gray-soft); }
.ma-tone-caution         { background: color-mix(in srgb, var(--cl-orange) 22%, var(--cl-surface)); }
.ma-tone-positive-soft   { background: color-mix(in srgb, var(--cl-green) 12%, var(--cl-surface)); }
.ma-tone-positive        { background: color-mix(in srgb, var(--cl-green) 24%, var(--cl-surface)); }
.ma-tone-positive-strong { background: color-mix(in srgb, var(--cl-green) 40%, var(--cl-surface)); }

/* --------------------------------------------------------------- *
 * The report grid
 * --------------------------------------------------------------- */

.ma-grid {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ma-grid th,
.ma-grid td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--cl-td-line);
  white-space: nowrap;
}

.ma-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cl-surface);
  color: var(--cl-th-text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-align: right;
  border-bottom: 1px solid var(--cl-th-line);
}

/* The row label stays visible while the year scrolls sideways. A
   twelve-month row is wider than a phone and wider than most laptops,
   and a number with no row name is not a number anybody can read. */
.ma-grid th.ma-row-head,
.ma-grid thead th.ma-row-head {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: left;
  background: var(--cl-surface);
  color: var(--cl-td-text);
  font-weight: 650;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--cl-text-body);
  min-width: 210px;
}

.ma-grid td {
  text-align: right;
  color: var(--cl-td-text);
}

.ma-grid td.ma-empty {
  color: var(--cl-muted-2);
}

/* The year column, and the total row: the two summary edges of the
   grid, marked by weight rather than by another colour, so they do not
   compete with the heat scale. */
.ma-grid .ma-year-col {
  font-weight: 700;
  border-left: 2px solid var(--cl-line-strong);
}

.ma-grid tr.ma-total-row td,
.ma-grid tr.ma-total-row th {
  font-weight: 700;
  border-top: 2px solid var(--cl-line-strong);
}

/* A truncated cell. The mark is a superscript asterisk rather than a
   colour or an opacity change: the cell's colour is already carrying
   the year-on-year change, and a second colour signal on the same cell
   would be two meanings in one channel. */
.ma-cut {
  color: var(--cl-muted);
  font-size: 11px;
  vertical-align: super;
  margin-left: 2px;
  cursor: help;
}

/* --------------------------------------------------------------- *
 * Year blocks — collapsible with no JavaScript (<details>/<summary>)
 * --------------------------------------------------------------- */

.ma-year {
  border: 1px solid var(--cl-card-line);
  border-radius: var(--cl-r-md);
  background: var(--cl-surface);
  overflow: hidden;
}

.ma-year + .ma-year {
  margin-top: 12px;
}

.ma-year > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 730;
  color: var(--cl-ink);
  list-style: none;
  user-select: none;
}

.ma-year > summary::-webkit-details-marker { display: none; }

.ma-year > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--cl-muted);
  border-bottom: 2px solid var(--cl-muted);
  transform: rotate(-45deg);
  transition: transform var(--cl-fast);
}

.ma-year[open] > summary::before {
  transform: rotate(45deg);
}

.ma-year > summary:hover {
  background: var(--cl-row-hover);
}

.ma-year-note {
  font-weight: 500;
  font-size: 13px;
  color: var(--cl-muted);
}

.ma-scroll {
  overflow-x: auto;
}

/* --------------------------------------------------------------- *
 * Legend and band editor
 * --------------------------------------------------------------- */

.ma-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  font-size: 13px;
  color: var(--cl-muted);
}

.ma-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--cl-line-strong);
  vertical-align: -4px;
  margin-right: 6px;
}

.ma-band-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 12px 0;
  border-bottom: 1px solid var(--cl-row-line);
}

.ma-band-row:last-child {
  border-bottom: none;
}

.ma-band-row > * {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .ma-grid th.ma-row-head,
  .ma-grid thead th.ma-row-head {
    min-width: 140px;
  }
  .ma-grid th,
  .ma-grid td {
    padding: 8px 7px;
    font-size: 13px;
  }
}