/* ---------------------------------------------------------------------------
   Caliophsera Ventures — shared report design tokens.

   Every product's reporting surface uses these unchanged. A board that sees two
   of our products should recognise them as one company; that only happens if
   the tokens are shared rather than re-chosen per project.

   These values are the ones already in production on aws-cost-report.html and
   aws-ops-report.html. Dark mode is SELECTED — its own steps from the same
   ramps, validated against the dark surface — not an automatic inversion of
   light mode, which is how dark themes end up illegible.

   Before changing any categorical colour, run the palette validator:
   CVD separation >= 8, normal-vision floor >= 15, contrast checked. Charter §12
   rule 2: the colour part is computable, so compute it.
   --------------------------------------------------------------------------- */

:root { color-scheme: light; }

body {
  --surface-1: #fcfcfb;
  --plane:     #f9f9f7;

  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --muted:          #898781;

  --grid:   #e1e0d9;
  --axis:   #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);

  /* Categorical. Assigned in FIXED ORDER, never cycled. A ninth series folds
     into "Other" or becomes small multiples — it is never a generated hue. */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;

  /* Status. RESERVED — never reused as "series 4", and always shipped with an
     icon or label so state is never communicated by colour alone. */
  --good:     #006300;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;

  --shadow: 0 1px 2px rgba(11,11,11,.04), 0 8px 24px rgba(11,11,11,.045);
}

@media (prefers-color-scheme: dark) {
  body:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --plane:     #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --muted:          #898781;
    --grid:   #2c2c2a;
    --axis:   #383835;
    --border: rgba(255, 255, 255, 0.10);
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --good: #0ca30c;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
  }
}

body[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --plane:     #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --muted:          #898781;
  --grid:   #2c2c2a;
  --axis:   #383835;
  --border: rgba(255, 255, 255, 0.10);
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --good: #0ca30c;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
}

/* The light-mode amber fails contrast on a dark surface, so it is re-stepped
   rather than inherited. */
body[data-theme="dark"] .chip.warning { color: var(--warning); }
@media (prefers-color-scheme: dark) {
  body:where(:not([data-theme="light"])) .chip.warning { color: var(--warning); }
}

/* ---------------------------------------------------------------------------
   Layout rules that are not taste — they are bugs already paid for once.
   --------------------------------------------------------------------------- */

/* A grid item defaults to min-width:auto and so refuses to shrink below its
   content, pushing the CARD out of its track instead. This single line is what
   stopped expanded tables spilling over card edges. */
.grid > *, .grid2 > *, .kpis > * { min-width: 0; }
.card { min-width: 0; overflow-wrap: anywhere; }

/* Detail tables adapt to their CONTAINER, not the viewport. A card can be 360px
   wide inside a 1200px window, where a viewport media query never fires. */
.svcwrap { container-type: inline-size; container-name: svc; }
@container svc (max-width: 430px) { .usage td.uq { display: none; } }
@container svc (max-width: 300px) { .usage td.up { display: none; } }
@supports not (container-type: inline-size) { .usage td.uq { display: none; } }

/* Tap targets are real <button>s. iOS Safari does not reliably fire click on
   non-interactive elements like <tr>, and a report nobody can open on a phone
   is not a mobile report. */
button.utog, button.rtog {
  font: inherit; background: none; border: 0; cursor: pointer; color: inherit;
  text-align: left; display: flex; align-items: center; gap: 7px; width: 100%;
  min-height: 32px; touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(42, 120, 214, .18);
}
button.utog:focus-visible, button.rtog:focus-visible {
  outline: 2px solid var(--s1); outline-offset: 2px; border-radius: 5px;
}