/* =============================================================
   gauges.css — styles for gauges.js (arc gauges, Dalton stack,
   concentration bars) and box.js (particle box).

   Tokens only (design-system.css + eq-tokens.css): no hex, no easings,
   no durations (all motion is started from JS through Motion).
   Both components fill their host and size everything from the host
   with container queries, so they stay legible from 200x140 to 500x360
   and never produce a scrollbar (overflow is hidden, content is sized
   to fit).  Hosts therefore need a definite height.
   ============================================================= */

/* ---------------------------------------------------------------
   Gauges: root grid
   --------------------------------------------------------------- */
.gx {
  position: relative; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden;
  container: gx / size;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px 8px; padding: 6px 8px;
  color: var(--ink); font-family: var(--font-body);
}
.gx[data-mode="aq"], .gx[data-mode="none"] { grid-template-columns: minmax(0, 1fr); }
/* type scales with the host (container query units resolve against .gx, so on its children) */
.gx > * { font-size: clamp(var(--fs-micro), 3.3cqmin, var(--fs-small)); line-height: 1.2; }
.gx-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------------------------------------------------------------
   Arc gauges
   --------------------------------------------------------------- */
.gx-gauges {
  grid-column: 1; grid-row: 1; min-width: 0; min-height: 0;
  /* columns and --dw (dial width) are set by gauges.js so the dials are as large as the host allows */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
  align-content: stretch; gap: 2px 6px;
}
@container gx (max-width: 260px) { .gx-gauges { column-gap: 4px; } }

.gx-g { margin: 0; min-width: 0; min-height: 0; align-self: center; display: grid; justify-items: center; row-gap: 1px; }
.gx-dialwrap { display: grid; justify-items: center; }
.gx-box { width: var(--dw, 80px); max-width: 100%; }
.gx-dial { width: 100%; aspect-ratio: 5 / 3; }
.gx-svg { display: block; width: 100%; height: 100%; }
.gx-track-edge { fill: none; stroke: var(--eq-edge); stroke-width: 10.8; stroke-linecap: round; }   /* >= 3:1 outline of the track */
.gx-track { fill: none; stroke: var(--line-strong); stroke-width: 8.2; stroke-linecap: round; }
.gx-val   { fill: none; stroke: var(--gc, var(--primary)); stroke-width: 8.2; stroke-linecap: round; }
.gx-ticks line { stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.gx-hand  { transform-box: view-box; transform-origin: 60px 64px; }
.gx-needle { fill: var(--ink); }
.gx-tip { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.gx-tip--ring { fill: none; stroke: var(--eq-inert); stroke-width: 3; }
.gx-hub { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; }

/* scale labels under the arc: 0 .. mid .. max (HTML, so they keep a readable size) */
.gx-scale { display: flex; justify-content: space-between; padding-inline: 2%; height: 1.5em; margin-top: -.15em;
            font: var(--w-medium) 1em/1.5 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.gx-scale > span { border-radius: var(--r-sm); padding-inline: 2px; }

.gx-cap { display: flex; align-items: center; justify-content: center; gap: .35em; max-width: 100%; min-width: 0;
          font-weight: var(--w-semi); color: var(--ink); white-space: nowrap; }
.gx-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gx-mk { width: .95em; height: .95em; flex: none; fill: var(--gc, var(--primary)); stroke: var(--ink); stroke-width: .6; stroke-linejoin: round; overflow: visible; }
.gx-mk--ring path, .gx-mk-ring { fill: none; stroke: var(--eq-inert); stroke-width: 1.9; }
.gx-read { font: var(--w-semi) 1em/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.gx-unit { color: var(--muted); font-weight: var(--w-normal); }
@container gx (max-width: 290px) { .gx-unit { display: none; } .gx-gauges .gx-read { text-align: center; } }

/* ---------------------------------------------------------------
   Dalton stack
   --------------------------------------------------------------- */
.gx-stack {
  grid-column: 2; grid-row: 1; min-height: 0; width: clamp(56px, 17cqw, 92px);
  display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: stretch;
}
.gx-stack-head { text-align: center; font: var(--w-semi) 1em/1.2 var(--font-mono); color: var(--muted); }
.gx-stack-body { position: relative; min-height: 0; display: flex; gap: 3px; padding-block: .6em; }
.gx-gutter { position: relative; flex: 0 0 2.5em; }
.gx-gtick { position: absolute; right: 0; width: 5px; height: 1px; margin-bottom: -.5px; background: var(--muted); }
.gx-glabel { position: absolute; right: 7px; transform: translateY(50%); line-height: 1; white-space: nowrap;
             font: var(--w-medium) 1em/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.gx-bar { position: relative; flex: 1 1 0; min-width: 14px; overflow: hidden;
          border: 1px solid var(--eq-edge); border-radius: var(--r-sm); background: var(--bg-tint); }
.gx-layer { position: absolute; inset: 0; }
.gx-fill { display: block; }
.gx-fill-bg { fill: var(--gc, var(--primary)); }
.gx-fill--ring .gx-fill-bg { fill: var(--line-strong); }
.gx .gx-pat { fill: var(--card); opacity: .92; }
.gx .gx-pat-ring { fill: none; stroke: var(--eq-inert); stroke-width: 1.6; }
.gx-sep { position: absolute; left: 0; right: 0; height: 2px; margin-bottom: -1px; background: var(--card); pointer-events: none; }
.gx-level { position: absolute; left: 0; right: 0; height: 2px; margin-bottom: -1px; background: var(--ink); pointer-events: none; }

/* ---------------------------------------------------------------
   Readout row
   --------------------------------------------------------------- */
.gx-foot { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0;
           font: var(--w-semi) 1em/1.25 var(--font-mono); font-variant-numeric: tabular-nums; }
.gx-total { color: var(--ink); white-space: nowrap; }
.gx-vol { color: var(--ink-2); font-weight: var(--w-medium); white-space: nowrap; }
.gx-tag { margin-left: auto; padding: 1px 9px; white-space: nowrap;
          font: var(--w-semi) max(var(--fs-micro), .86em)/1.35 var(--font-body); letter-spacing: .01em;
          color: var(--primary-soft-ink); background: var(--primary-soft); border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.gx-tag[data-c="P"] { border-style: dashed; }

/* ---------------------------------------------------------------
   Concentration bars (aqueous)
   --------------------------------------------------------------- */
.gx-bars { grid-column: 1 / -1; grid-row: 1; min-width: 0; min-height: 0;
           display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-content: safe center; align-items: center; column-gap: .7em; row-gap: clamp(.32em, 3.2cqh, 1.1em); }
.gx-row, .gx-bscale { display: contents; }
.gx-row .gx-cap { justify-content: flex-start; }
.gx-btrack { position: relative; height: clamp(1.1em, 6.5cqh, 2.2em); overflow: hidden; border: 1px solid var(--eq-edge); border-radius: var(--r-sm); background: var(--bg-tint); }
.gx-row .gx-read { text-align: right; }
.gx-vsep { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--card); pointer-events: none; }
.gx-vlevel { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.gx-row--total > * { margin-top: .2em; }
.gx[data-view="rows"][data-mode="gas"] .gx-total { display: none; }
.gx-row--total .gx-btrack { border-color: var(--ink-2); }
.gx-row--total .gx-cap { font-family: var(--font-mono); color: var(--ink-2); }
.gx-scale--bar { margin-top: 0; padding-inline: 0; height: 1.3em; }
.gx-bunit { font: var(--w-normal) 1em/1.3 var(--font-mono); color: var(--muted); text-align: right; white-space: nowrap; }
@container gx (max-width: 290px) { .gx-row .gx-unit { display: none; } }

@container gx (max-height: 170px) {
  .gx { padding: 4px 6px; gap: 2px 6px; }
  .gx-bars { row-gap: .16em; }
  .gx-tag { padding: 0 7px; line-height: 1.3; }
  .gx-scale--bar { height: 1.1em; line-height: 1.1; }
  .gx-bars .gx-cap, .gx-bars .gx-read, .gx-bunit { line-height: 1.1; }
  .gx-btrack { height: 1em; }
  .gx-row--total > * { margin-top: .1em; }
}
@container gx (min-width: 291px) { .gx-bunit { visibility: hidden; } }
@container gx (max-height: 200px) { .gx-smid, .gx-glabel--mid { display: none; } }
@container gx (min-width: 380px) { .gx { gap: 6px 12px; } .gx-gauges { gap: 4px 10px; } }

/* ---------------------------------------------------------------
   Particle box (box.js)
   --------------------------------------------------------------- */
.bx { position: relative; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden;
      container: bx / size; display: grid; grid-template-rows: minmax(0, 1fr) auto; font-family: var(--font-body); color: var(--ink); }
.bx-stage { position: relative; min-height: 0; min-width: 0; }
.bx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 12px; padding: var(--sp-1) var(--sp-2); min-width: 0;
             font: var(--w-semi) var(--fs-label)/1.25 var(--font-body); color: var(--ink); }
.bx-leg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bx-leg svg { width: var(--fs-label); height: var(--fs-label); flex: none; fill: var(--gc, var(--primary)); stroke: var(--ink); stroke-width: .6; stroke-linejoin: round; overflow: visible; }
.bx-leg svg.bx-ring path { fill: none; stroke: var(--eq-inert); stroke-width: 1.9; }
.bx-scale { margin-left: auto; font: var(--w-normal) var(--fs-micro)/1.25 var(--font-mono); color: var(--muted); white-space: nowrap; }
/* small hosts: the gauges next door carry the legend; keep only the picture */
@container bx (max-height: 190px) { .bx-legend { display: none; } }
@container bx (max-width: 250px) { .bx-scale { display: none; } }