/* HMI summary strip (Wave 4E, SmartSMS_v2.pdf section 5). Design V2: every colour is a token from style.css :root,
   this file names none. Colours follow the plant guide (ETT_Architecture_Guide_v2.pdf 7.2):
     ON TRACK  green  = Normal      (--ok-*)
     AT RISK   orange = warning     (--noyield-*, the guide's orange)
     "—"       grey   = Hold / none (--hold-*)
     0 MW      grey if 0            (--power-zero)
     tundish   blue   = dynamic     (--ready-text) while the tundish countdown runs
   Breakpoints as style.css:
     TV      >= 1440   a 3 x 2 panel to the right of the tap order strip (floated), so the board keeps its height
                       and the 5 cards stay in one row on 1920 x 1080 and 1536 x 864
     laptop  1024-1439 one line above the tap order strip, short labels
     tablet  600-1023  3 x 2 tiles, 44 px rows
     phone   < 600     status on top, then 3 per row, 44 px rows */

/* ---------- laptop (base) ---------- */
.summary-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-bottom: 10px; padding: 6px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ss-item { display: flex; align-items: baseline; gap: 2px 8px; min-width: 0; white-space: nowrap; }
.ss-label { color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ss-value { font-size: 18px; font-weight: 700; color: var(--text); }
.ss-value.ss-zero { color: var(--power-zero); }
.ss-value.ss-none { color: var(--text-muted); }
.ss-in-tundish .ss-value { color: var(--ready-text); }
.ss-sub { font-size: 13px; color: var(--text-muted); }
.ss-status { margin-left: auto; flex: 0 1 auto; align-items: center; }
.ss-badge { padding: 1px 10px; border-radius: var(--radius); border: 1px solid; font-size: 15px; font-weight: 700;
  letter-spacing: .06em; white-space: nowrap; background: var(--hold-fill); border-color: var(--hold-line);
  color: var(--hold-text); }
.ss-ok .ss-badge { background: var(--ok-fill); border-color: var(--ok-line); color: var(--ok-text); }
.ss-risk .ss-badge { background: var(--noyield-fill); border-color: var(--noyield-line); color: var(--noyield-text); }
.ss-why { min-width: 0; max-width: 22vw; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600;
  color: var(--noyield-text); }

/* ---------- TV ---------- */
@media (min-width: 1440px) {
  .summary-strip { float: right; width: clamp(520px, 31vw, 600px); margin: 0 0 var(--gap) var(--gap);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px 18px;
    padding: 16px 22px; border-radius: var(--radius-card); }
  .summary-strip ~ .grid { clear: both; }
  .ss-item { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ss-total, .ss-avail { order: 0; }
  .ss-status { order: 1; margin-left: 0; }
  .ss-taps, .ss-seq, .ss-tundish { order: 2; }
  .ss-label { font-size: var(--fs-label); letter-spacing: .06em; }
  .ss-value { font-size: 26px; line-height: 1.15; }
  .ss-sub { font-size: var(--fs-label); }
  .ss-badge { font-size: 20px; padding: 2px 12px; }
  .ss-why { max-width: 100%; white-space: normal; font-size: var(--fs-label); display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
}
@media (min-width: 1440px) and (max-height: 960px) {   /* 1536 x 864, 1920 at 125 %: short screen */
  .summary-strip { padding: 10px 18px; gap: 6px 14px; margin-bottom: var(--gap); }
  .ss-value { font-size: 22px; }
  .ss-badge { font-size: 18px; padding: 0 10px; }
}

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; padding: 10px 14px; }
  .ss-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 44px;
    white-space: normal; }
  .ss-status { margin-left: 0; }
  .ss-why { max-width: none; white-space: normal; }
}

/* ---------- phone ---------- */
@media (max-width: 599px) {
  .summary-strip { gap: 6px 10px; padding: 10px 12px; }
  .ss-status { order: -1; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: flex-start; gap: 4px 10px; }
  .ss-value { font-size: 17px; }
  .ss-sub { font-size: 12px; }
}