/* ===========================================================================
   BIM9D type layer — two faces, four roles.
   Self-hosted, subsetted, OFL 1.1. No external request is ever made.
   See README.md for licences, sources, subsetting command and byte costs.

     SAIRA      squarish industrial grotesque -> DISPLAY + LABEL (the character)
     B9D DATA   IBM Plex Sans, renamed        -> DATA + BODY     (the legibility)

   Adopt it with either the raw tokens (--font-display, --t-label-size, ...)
   or the ready-made classes (.t-display, .t-label, .t-data, .t-body).
   =========================================================================== */

/* --------------------------------------------------------------- @font-face */

/* Saira SemiBold, width 100 — the workhorse label cut.
   font-display:block, not swap: these are 6-14 character tracked uppercase
   strings in fixed-width chrome, and a mono->Saira reflow is far uglier than
   ~30ms of nothing on a same-origin 10 KB file. Preload it (see README). */
@font-face {
  font-family: 'Saira';
  src: url('./saira-label.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-stretch: 100%;
  font-display: block;
}

/* Saira ExtraBold, width 112.5 — the one display cut. */
@font-face {
  font-family: 'Saira';
  src: url('./saira-display.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-stretch: 112.5%;
  font-display: block;
}

/* B9D Data (from IBM Plex Sans) — digits are tabular by construction, so a
   table of quantities cannot silently lose its alignment.
   font-display:swap here: body copy must never be invisible. */
@font-face {
  font-family: 'B9D Data';
  src: url('./b9d-data-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'B9D Data';
  src: url('./b9d-data-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* --- families -------------------------------------------------------- */
  --font-display: 'Saira', 'Helvetica Neue', Arial, sans-serif;
  --font-label:   'Saira', 'Helvetica Neue', Arial, sans-serif;
  --font-data:    'B9D Data', ui-sans-serif, system-ui, 'Helvetica Neue', sans-serif;
  --font-body:    'B9D Data', ui-sans-serif, system-ui, 'Helvetica Neue', sans-serif;
  /* Geometric marks the app uses (● ▶ ◆ ✕ ✓ ⚑ ↗ Σ …) are NOT in either face
     and fall through to the platform symbol font. Prefer inline SVG for any
     mark that must sit on a precise baseline; use this only for throwaways. */
  --font-sym: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- size / tracking ramp -------------------------------------------
     Rule: the smaller and the more uppercase, the more tracking. 10px is the
     floor — nothing in this UI goes below it. */
  --t-hero-size:     26px;  --t-hero-track:     0.05em;  /* project / stage name  */
  --t-display-size:  18px;  --t-display-track:  0.07em;  /* panel title           */
  --t-display-sm:    14px;  --t-display-sm-track: 0.09em;/* sub-panel title       */

  --t-label-size:    11px;  --t-label-track:    0.16em;  /* buttons, tabs, status */
  --t-label-sm:      10px;  --t-label-sm-track: 0.20em;  /* micro caption (floor) */

  --t-readout-size:  22px;  /* the big number on a KPI tile */
  --t-data-size:     12px;  /* table cells, tags, quantities */
  --t-data-sm:       11px;  /* dense table cells             */
  --t-body-size:     13px;  --t-body-leading: 1.5;

  /* --- weights ---------------------------------------------------------
     Saira ships exactly two cuts. Ask for anything else and you get the
     nearest one, which is a fallback, not a design. */
  --t-w-display: 800;
  --t-w-label:   600;
  --t-w-data:    400;
  --t-w-data-em: 600;

  /* --- survival over a live 3D scene (hard rule 6) ----------------------
     The reference sets bright type on a hard dark shadow so it reads over a
     sunlit world. Apply --t-shade to ANY text that floats on the canvas
     without an opaque plate behind it. */
  --t-shade: 0 1px 2px rgba(0, 0, 0, 0.92), 0 0 7px rgba(0, 0, 0, 0.6);
  --t-shade-hard: 0 1px 0 rgba(0, 0, 0, 1), 0 2px 4px rgba(0, 0, 0, 0.85);
  /* Measured at 1280x720 over a blown-out plant scene: a shadow alone carries
     14px and up. At 12px it is marginal and at 10-11px it fails. So:
     ---------------------------------------------------------------------
     TYPE AT OR BELOW 12px NEVER FLOATS ON THE CANVAS. It sits on a plate.
     ---------------------------------------------------------------------
     Use --t-plate-bg (or .t-plate) for that backing. This is not a style
     preference, it is what makes hard rule 6 pass. */
  --t-plate-bg: rgba(7, 11, 15, 0.86);
  --t-plate-line: rgba(120, 160, 180, 0.22);
  /* Warm/cool status lighting. Glow is for state, never for body text. */
  --t-glow-acc:  0 0 9px rgba(108, 242, 255, 0.45);
  --t-glow-warn: 0 0 9px rgba(255, 176, 74, 0.45);
  --t-glow-ok:   0 0 9px rgba(122, 240, 140, 0.4);
}

/* ----------------------------------------------------------------- classes */

.t-hero,
.t-display,
.t-display-sm {
  font-family: var(--font-display);
  font-weight: var(--t-w-display);
  font-stretch: 112.5%;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;   /* Saira is proportional by default */
  line-height: 1.05;
}
.t-hero       { font-size: var(--t-hero-size);    letter-spacing: var(--t-hero-track); }
.t-display    { font-size: var(--t-display-size); letter-spacing: var(--t-display-track); }
.t-display-sm { font-size: var(--t-display-sm);   letter-spacing: var(--t-display-sm-track); }

.t-label,
.t-label-sm {
  font-family: var(--font-label);
  font-weight: var(--t-w-label);
  font-stretch: 100%;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.t-label    { font-size: var(--t-label-size); letter-spacing: var(--t-label-track); }
.t-label-sm { font-size: var(--t-label-sm);   letter-spacing: var(--t-label-sm-track); }

/* Tracking pushes the last glyph's sidebearing past the box. Pay it back so a
   tracked label optically centres inside a button or a plate. */
.t-label,
.t-label-sm,
.t-hero,
.t-display,
.t-display-sm { text-indent: 0; }
.t-label::after,
.t-label-sm::after { content: ''; }
.t-center-track { margin-right: calc(-1 * var(--t-label-track)); }

/* DATA — quantities, money, tags, IDs. Tabular by construction; the slashed
   zero is what keeps 1"-P-1001-A1A from reading as ...-1OO1-... at 11px. */
.t-data,
.t-data-sm,
.t-readout {
  font-family: var(--font-data);
  font-weight: var(--t-w-data);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.t-data    { font-size: var(--t-data-size); }
.t-data-sm { font-size: var(--t-data-sm); }
.t-readout {
  font-size: var(--t-readout-size);
  font-weight: var(--t-w-data-em);
  letter-spacing: 0;
  line-height: 1.05;
}
.t-num { font-variant-numeric: tabular-nums slashed-zero; }
.t-em  { font-weight: var(--t-w-data-em); }

.t-body {
  font-family: var(--font-body);
  font-weight: var(--t-w-data);
  font-size: var(--t-body-size);
  line-height: var(--t-body-leading);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Right-align a numeric column and it stays a column. */
.t-col-num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: right;
  font-feature-settings: 'calt' 0;
}

/* Long object names must lose their tail, not their row. */
.t-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Floating over the canvas. Good for >=14px only. */
.t-over-world      { text-shadow: var(--t-shade); }
.t-over-world-hard { text-shadow: var(--t-shade-hard); }

/* The plate: what small type stands on when it is over the world. Keep it
   tight to the glyphs — this is jewellery, not a dashboard panel. */
.t-plate {
  background: var(--t-plate-bg);
  box-shadow: inset 0 0 0 1px var(--t-plate-line);
  border-radius: 3px;
  padding: 0.28em 0.6em 0.32em;
}
.t-plate-block { background: var(--t-plate-bg); border-radius: 4px; padding: 8px 11px 9px; }