/* ============================================================================
 * ht-tiles.css — SHARED dense furnace tile, used by BOTH:
 *   • the shop-floor wallboard  (/display, wrapper .htt-board — big, 5x3, TV)
 *   • the admin dashboard strip (#ht-live-strip, wrapper .htt-grid — responsive)
 * Tile internals are sized in em; each wrapper sets the tile font-size, so the
 * SAME tile renders identically at two scales. Light palette only.
 * ES-safe / no Tailwind dependency.
 * ==========================================================================*/
.htt-wrap *{ box-sizing:border-box; }
:root{
  --htt-ink:#0f1b2d; --htt-soft:#5b6b7e; --htt-faint:#9aa6b2;
  --htt-panel:#ffffff; --htt-line:rgba(15,27,45,.12); --htt-line2:rgba(15,27,45,.07);
  --htt-soak:#5f961f; --htt-soak-bg:#e9f3da; --htt-soak-ink:#2f5806;
  --htt-ramp:#2f86db; --htt-ramp-bg:#e4f0fb; --htt-ramp-ink:#0a3a66;
  --htt-alarm:#e0403f; --htt-alarm-bg:#fce8e8; --htt-alarm-ink:#7a1413;
  --htt-idle:#9aa0a6; --htt-idle-bg:#eef0f2; --htt-idle-ink:#5b6b7e;
  --htt-stale:#d98324; --htt-stale-bg:#fdf0dd; --htt-stale-ink:#7a4a06;
}

/* ---- WALLBOARD shell (dark header + 5x3 grid filling the TV) -------------- */
.htt-board{ display:flex; flex-direction:column; gap:.9vmin; height:calc(100vh - 2.5rem); min-height:0; }
.htt-head{ background:#0f1b2d; color:#fff; border-radius:.8vmin; display:flex; align-items:center; gap:2.4vmin; padding:.9vmin 1.8vmin; flex:0 0 auto; }
.htt-brand b{ font-size:1.7vmin; font-weight:700; letter-spacing:.14vmin; }
.htt-brand span{ font-size:.85vmin; letter-spacing:.22vmin; color:rgba(255,255,255,.55); text-transform:uppercase; display:block; margin-top:.3vmin; }
.htt-clock{ font-variant-numeric:tabular-nums; line-height:1.12; }
.htt-clock .t{ font-size:3.0vmin; font-weight:700; display:block; }
.htt-clock small{ font-size:.85vmin; color:rgba(255,255,255,.6); letter-spacing:.13vmin; display:block; text-transform:uppercase; font-weight:500; margin-top:.15vmin; }
.htt-hb{ text-align:right; margin-left:2.4vmin; font-variant-numeric:tabular-nums; line-height:1.12; }
.htt-hb .t{ font-size:3.0vmin; font-weight:700; display:block; }
.htt-hb small{ font-size:.85vmin; color:rgba(255,255,255,.6); letter-spacing:.13vmin; display:block; text-transform:uppercase; font-weight:500; margin-top:.15vmin; }
.htt-sp{ flex:1; }
.htt-kpis{ display:flex; gap:1.9vmin; }
.htt-kpi{ text-align:right; }
.htt-kpi .l{ font-size:.8vmin; letter-spacing:.16vmin; color:rgba(255,255,255,.55); text-transform:uppercase; display:block; }
.htt-kpi .v{ font-size:2.0vmin; font-weight:700; font-variant-numeric:tabular-nums; }
.htt-kpi .v.bad{ color:var(--htt-stale); }
.htt-board .htt-grid{ flex:0 0 auto; min-height:0; align-content:start; grid-auto-rows:minmax(22vh,auto); }  /* compact: no stretch-to-fill — 5x3 preserved, tiles ~25% shorter */
.htt-board .htt-tile{ font-size:1.02vw; }            /* TV scale (≈19.5px @1920) — UNCHANGED */

/* ---- ADMIN grid (responsive, compact) ------------------------------------ */
.htt-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; }
.htt-grid .htt-tile{ font-size:12px; }               /* dashboard scale */
@media (max-width:1100px){ .htt-grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:820px){  .htt-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){  .htt-grid{ grid-template-columns:repeat(2,1fr);} }

/* ---- TILE (internals all in em) ------------------------------------------ */
.htt-tile{ background:var(--htt-panel); color:var(--htt-ink); border-radius:.7em; overflow:hidden;
  border:.06em solid var(--htt-line); border-left:.34em solid var(--htt-idle);
  padding:.55em .8em; display:flex; flex-direction:column; gap:.28em; min-height:0;
  text-decoration:none; transition:border-color .3s; }
a.htt-tile:hover{ background:#f6f9fd; }
.htt-tile.s-soaking{ border-left-color:var(--htt-soak); } .htt-tile.s-ramping{ border-left-color:var(--htt-ramp); }
.htt-tile.s-active{ border-left-color:var(--htt-ramp); }  .htt-tile.s-complete{ border-left-color:var(--htt-soak); }
.htt-tile.s-idle{ border-left-color:var(--htt-idle); }
.htt-tile.s-modbus_down{ border-left-color:var(--htt-alarm); }
.htt-tile.s-offline{ border-left-color:#888780; opacity:.6; }
.htt-tile.s-unprov{ border-left-color:#d1d5db; opacity:.5; }
.htt-tile.alarm{ border-left-color:var(--htt-alarm); }
.htt-tile.spare{ border-left-color:var(--htt-line); background:transparent; border-style:dashed; align-items:center; justify-content:center; }
.htt-tile.spare span{ color:var(--htt-faint); font-size:1.1em; letter-spacing:.1em; text-transform:uppercase; }

.htt-top{ display:flex; align-items:center; justify-content:space-between; }
.htt-id{ font-size:1.65em; font-weight:700; }
.htt-pill{ font-size:.82em; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.25em .6em; border-radius:.4em; white-space:nowrap; }
.htt-pill.p-soaking{ color:var(--htt-soak-ink); background:var(--htt-soak-bg); }
.htt-pill.p-ramping,.htt-pill.p-active{ color:var(--htt-ramp-ink); background:var(--htt-ramp-bg); }
.htt-pill.p-complete{ color:var(--htt-soak-ink); background:var(--htt-soak-bg); }
.htt-pill.p-idle{ color:var(--htt-idle-ink); background:var(--htt-idle-bg); }
.htt-pill.p-modbus_down,.htt-pill.alarm{ color:var(--htt-alarm-ink); background:var(--htt-alarm-bg); }
.htt-pill.p-offline,.htt-pill.p-unprov{ color:var(--htt-idle-ink); background:var(--htt-idle-bg); }

.htt-hero{ display:flex; align-items:baseline; gap:.4em; line-height:.9; }
.htt-pv{ font-size:3.1em; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.htt-u{ font-size:1.0em; color:var(--htt-soft); font-weight:600; }
.htt-arrow{ font-size:1.4em; font-weight:700; }
.htt-arrow.up,.htt-arrow.dn{ color:var(--htt-ramp); } .htt-arrow.flat{ color:var(--htt-faint); }
.htt-frac{ margin-left:auto; font-size:1.15em; font-weight:700; font-variant-numeric:tabular-nums; color:var(--htt-soft); text-align:right; }
.htt-frac small{ font-size:.62em; color:var(--htt-faint); text-transform:uppercase; letter-spacing:.08em; display:block; line-height:1; }

.htt-set{ display:flex; align-items:baseline; gap:.6em; font-size:1.05em; font-variant-numeric:tabular-nums; }
.htt-set .to{ color:var(--htt-soft); font-weight:600; }
.htt-set .delta{ font-weight:700; }
.htt-set .delta.d-good{ color:var(--htt-soak); } .htt-set .delta.d-warn{ color:var(--htt-stale); } .htt-set .delta.d-fault{ color:var(--htt-alarm); }
.htt-set .band{ font-size:.78em; font-weight:700; color:var(--htt-soak); letter-spacing:.04em; }
.htt-set .muted{ color:var(--htt-faint); }

/* deviation gauge (±40°C window) */
.htt-devg{ position:relative; height:.7em; border-radius:1em; overflow:hidden;
  background:linear-gradient(to right,
    var(--htt-alarm-bg) 0%,var(--htt-alarm-bg) 25%, var(--htt-stale-bg) 25%,var(--htt-stale-bg) 44%,
    var(--htt-soak-bg) 44%,var(--htt-soak-bg) 56%, var(--htt-stale-bg) 56%,var(--htt-stale-bg) 75%,
    var(--htt-alarm-bg) 75%,var(--htt-alarm-bg) 100%); }
.htt-devg .mid{ position:absolute; left:50%; top:0; bottom:0; width:.1em; background:var(--htt-faint); opacity:.5; }
.htt-devg .mk{ position:absolute; top:-.18em; width:.38em; height:1.06em; border-radius:.2em; transform:translateX(-50%); }

/* o—o—o stepper (numbered for ≤7, compact dots for 8–12, bar for >12) */
.htt-stepper{ display:flex; align-items:center; }
.htt-stepper.compact{ gap:0; }
.htt-step-cell{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.22em; position:relative; }
.htt-step-dot{ width:1.35em; height:1.35em; border-radius:50%; background:#fff; border:.11em solid var(--htt-idle);
  display:flex; align-items:center; justify-content:center; font-size:.66em; font-weight:700; color:var(--htt-faint); z-index:1; font-variant-numeric:tabular-nums; }
.htt-step-dot.compact{ width:.9em; height:.9em; font-size:0; border-width:.08em; }
.htt-step-dot.done{ background:var(--htt-soak); border-color:var(--htt-soak); color:#fff; }
.htt-step-dot.act-soaking{ background:var(--htt-soak); border-color:var(--htt-soak); color:#fff; box-shadow:0 0 0 .22em var(--htt-soak-bg); }
.htt-step-dot.act-ramping{ background:var(--htt-ramp); border-color:var(--htt-ramp); color:#fff; box-shadow:0 0 0 .22em var(--htt-ramp-bg); }
.htt-step-line{ position:absolute; top:.6em; left:50%; right:-50%; height:.14em; background:#d1d5db; z-index:0; }
.htt-step-line.compact{ top:.42em; height:.08em; }
.htt-step-line.done{ background:var(--htt-soak); }
.htt-step-cell:last-child .htt-step-line{ display:none; }
.htt-step-label{ font-size:.85em; color:var(--htt-soft); font-weight:600; }
.htt-step-bar{ height:.4em; background:#f3f4f6; border-radius:.3em; margin-top:.25em; }
.htt-step-bar > div{ height:100%; border-radius:.3em; }

.htt-mid{ display:flex; align-items:center; justify-content:space-between; font-size:1.0em; font-weight:600; color:var(--htt-soft); }
.htt-mid .time{ font-size:1.25em; font-weight:700; color:var(--htt-ink); font-variant-numeric:tabular-nums; }
.htt-mid .climb{ color:var(--htt-ramp); font-weight:700; }
.htt-mid .climb.bad{ color:var(--htt-alarm); }
.htt-mid .fault{ color:var(--htt-alarm); font-weight:700; }
.htt-mid .muted{ color:var(--htt-faint); }

.htt-pbar{ height:.5em; background:var(--htt-line); border-radius:1em; overflow:hidden; }
.htt-pbar .pf{ height:100%; border-radius:1em; }

.htt-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.4em;
  padding-top:.32em; border-top:.08em solid var(--htt-line2); font-size:.85em; color:var(--htt-soft); font-variant-numeric:tabular-nums; }
.htt-foot b{ color:var(--htt-ink); font-weight:700; }
.htt-flame{ color:var(--htt-alarm); font-weight:700; }
.htt-flame.off{ color:var(--htt-faint); }
/* secondary meta row: last heartbeat (left) + last refresh (right) */
.htt-meta{ display:flex; align-items:center; justify-content:space-between; gap:.4em;
  margin-top:.34em; padding-top:.32em; border-top:.08em solid var(--htt-line2);
  font-size:.72em; color:var(--htt-faint); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.htt-meta .htt-mi{ display:inline-flex; align-items:center; gap:.34em; white-space:nowrap; line-height:1; }
.htt-meta .htt-mi svg{ width:1.05em; height:1.05em; opacity:.7; flex:0 0 auto; }
.htt-meta .htt-mi b{ font-weight:600; color:var(--htt-soft); }
.htt-meta .htt-mi:last-child svg{ opacity:.55; }
.htt-dot{ display:inline-block; height:.72em; width:.72em; border-radius:50%; background:var(--htt-soak); vertical-align:middle; }
.htt-dot.warn{ background:var(--htt-stale); } .htt-dot.bad{ background:var(--htt-alarm); }
.htt-muted{ color:var(--htt-faint); }
.htt-empty{ text-align:center; color:var(--htt-faint); padding:2em; font-size:1em; }

/* ============================================================================
 * 50-inch WALLBOARD legibility (scoped to .htt-board only — admin untouched).
 * Tile box size unchanged; small + light-grey text enlarged & darkened so it
 * reads from across the shop floor. Tiles are sparse (single-step recipes), so
 * the spare vertical room absorbs the larger text; overflow:hidden stays as net.
 * ==========================================================================*/
.htt-board{ --htt-soft:#3d4b5c; --htt-faint:#6e7a89; }   /* darker muted greys for TV contrast */
.htt-board .htt-tile.spare span{ color:#c2cad3; }        /* keep EMPTY slots subtle despite darker faint */

/* small / secondary text — the real offenders, bumped most */
.htt-board .htt-meta{ font-size:.92em; letter-spacing:.015em; }   /* heart/refresh seconds: .72 -> .92 */
.htt-board .htt-meta .htt-mi svg{ opacity:.9; }
.htt-board .htt-foot{ font-size:1.0em; }                 /* set/elapsed row:  .85 -> 1.0  */
.htt-board .htt-frac small{ font-size:.74em; }           /* STEP label:       .62 -> .74  */
.htt-board .htt-set .band{ font-size:.88em; }            /* in-band tag:      .78 -> .88  */
.htt-board .htt-step-label{ font-size:.96em; }           /*                   .85 -> .96  */

/* medium text — modest bumps for distance */
.htt-board .htt-pill{ font-size:.9em; padding:.26em .62em; }   /* state pill:  .82 -> .9   */
.htt-board .htt-u{ font-size:1.12em; }                   /* deg C unit:       1.0 -> 1.12 */
.htt-board .htt-set{ font-size:1.16em; }                 /* setpoint/delta:   1.05 -> 1.16 */
.htt-board .htt-mid{ font-size:1.12em; }                 /* phase + countdown: 1.0 -> 1.12 */

/* ===== HMIDOWN_CRIT_2026: sustained (>=10 min) HMI-down critical alarm ===== */
/* Solid red fill keeps text contrast constant; a pulsing OUTER GLOW provides
   the peripheral-vision catch from across the bay without dimming the fill.
   All inner text/dots forced high-contrast white. Auto-applied/removed by JS. */
@keyframes httCritGlow {
  0%   { box-shadow: 0 0 0 0 rgba(220,38,38,.85), 0 0 0.6em 0.1em rgba(220,38,38,.55); }
  50%  { box-shadow: 0 0 0 0.9em rgba(220,38,38,0), 0 0 1.6em 0.5em rgba(255,80,80,.95); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,.85), 0 0 0.6em 0.1em rgba(220,38,38,.55); }
}
.htt-tile.htt-critical{
  background:#c81e1e !important;            /* solid deep red, constant contrast */
  border-left-color:#fff !important;
  color:#fff !important;
  animation:httCritGlow 2.4s ease-in-out infinite;
  position:relative; z-index:2;
}
/* force every inner element to high-contrast white */
.htt-tile.htt-critical .htt-id,
.htt-tile.htt-critical .htt-pv,
.htt-tile.htt-critical .htt-u,
.htt-tile.htt-critical .htt-frac,
.htt-tile.htt-critical .htt-frac small,
.htt-tile.htt-critical .htt-mid .fault,
.htt-tile.htt-critical .htt-mid .time,
.htt-tile.htt-critical .htt-foot,
.htt-tile.htt-critical .htt-foot .muted,
.htt-tile.htt-critical .htt-meta,
.htt-tile.htt-critical .htt-meta *{
  color:#fff !important; opacity:1 !important;
}
/* the alarm pill: white chip on red so it still reads as a label */
.htt-tile.htt-critical .htt-pill{
  background:#fff !important; color:#c81e1e !important; font-weight:800 !important;
}
/* link dot -> white so it's visible on red */
.htt-tile.htt-critical .htt-dot{ background:#fff !important; box-shadow:none !important; }
/* keep the big PV dominant */
.htt-tile.htt-critical .htt-pv{ font-weight:800 !important; }
/* respect reduced-motion: drop the pulse, keep solid red (still obvious) */
@media (prefers-reduced-motion: reduce){
  .htt-tile.htt-critical{ animation:none; box-shadow:0 0 1.2em .4em rgba(255,80,80,.9); }
}
/* ===== end HMIDOWN_CRIT_2026 ===== */