/* ═══ Console chrome — the line-shopfloor design language, transposed to the
   console pages (Overview, Stats, Production, AGV, …). Namespaced .ch-* so it
   never collides with per-page CSS. Load AFTER theme.css. ═══ */

/* ── Compact page hero: kicker + gradient title + one-line sub ── */
.ch-hero{position:relative;flex-shrink:0;margin-bottom:14px;padding:16px 22px 15px;border-radius:14px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent,#4facfe) 22%,transparent);
  background:
    radial-gradient(520px 200px at 12% 40%,color-mix(in srgb,var(--accent,#4facfe) 9%,transparent),transparent 65%),
    linear-gradient(180deg,color-mix(in srgb,var(--card,#23272e) 92%,var(--accent,#4facfe)),var(--bg,#1a1d23));
  display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ch-hero-copy{min-width:0;flex:1}
.ch-kicker{font-size:10px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--accent,#4facfe)}
.ch-title{font-size:23px;font-weight:800;letter-spacing:-.8px;line-height:1.08;margin-top:3px;
  background:linear-gradient(92deg,var(--text,#e4e6eb),color-mix(in srgb,var(--accent,#4facfe) 75%,var(--text,#e4e6eb)));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ch-title span{font-weight:500}
.ch-sub{font-size:11.5px;color:var(--text-dim,#8b8f96);margin-top:5px;line-height:1.5;max-width:640px}
.ch-sub b{color:var(--text,#e4e6eb)}

/* ── KPI strip docked in the hero (or standalone) ── */
.ch-kstrip{display:grid;grid-auto-flow:column;gap:10px 26px;align-items:start;
  padding-left:24px;border-left:1px solid color-mix(in srgb,var(--accent,#4facfe) 18%,transparent)}
.ch-kstrip.ch-wrap{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.ch-kk{min-width:88px}
.ch-kk-v{font-size:20px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:var(--kc,var(--text,#e4e6eb))}
.ch-kk-v small{font-size:11px;font-weight:600;color:var(--text-dim,#8b8f96);margin-left:2px}
.ch-kk-l{font-size:9px;color:var(--text-dim,#8b8f96);text-transform:uppercase;letter-spacing:.6px;
  margin-top:2px;font-weight:600;white-space:nowrap}
@media(max-width:900px){.ch-hero{gap:12px}
  .ch-kstrip{border-left:none;padding-left:0;width:100%;grid-auto-flow:row;
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}}

/* ── Status pills (panel headers) ── */
.ch-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ch-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:16px;
  font-size:11px;font-weight:600;border:1px solid;letter-spacing:.2px;white-space:nowrap}
.ch-pill b{font-weight:800;font-variant-numeric:tabular-nums}
.ch-pill-a{color:var(--accent,#4facfe);border-color:color-mix(in srgb,var(--accent,#4facfe) 30%,transparent);
  background:color-mix(in srgb,var(--accent,#4facfe) 7%,transparent)}
.ch-pill-g{color:var(--green,#3fb950);border-color:rgba(63,185,80,.3);background:rgba(63,185,80,.06)}
.ch-pill-y{color:var(--yellow,#d29922);border-color:rgba(210,153,34,.32);background:rgba(210,153,34,.06)}
.ch-pill-r{color:var(--red,#f85149);border-color:rgba(248,81,73,.4);background:rgba(248,81,73,.07)}
.ch-pill-n{color:var(--text-dim,#8b8f96);border-color:var(--border,#333842);background:rgba(255,255,255,.02)}
.ch-pdot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:chDot 2s infinite}
@keyframes chDot{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Panel header (fc-hdr canon) — apply to existing cards without rebuilding ── */
.ch-panel-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--border,#333842);background:rgba(0,0,0,.18);
  border-radius:12px 12px 0 0}
.ch-panel-title{font-size:11px;font-weight:700;color:var(--text-dim,#8b8f96);text-transform:uppercase;
  letter-spacing:1.2px;display:flex;align-items:center;gap:9px}
.ch-panel-title .ch-gt{color:var(--accent,#4facfe);letter-spacing:.4px}
.ch-panel-title svg{display:block;flex-shrink:0}

/* ── Legend strip (under charts / maps) ── */
.ch-legend{display:flex;align-items:center;gap:13px;padding:8px 16px;border-top:1px solid var(--border,#333842);
  background:rgba(0,0,0,.18);flex-wrap:wrap;border-radius:0 0 12px 12px}
.ch-lg-t{font-size:10.5px;font-weight:800;letter-spacing:1.2px;color:var(--text-dim,#8b8f96);
  text-transform:uppercase;opacity:.7}
.ch-lg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim,#8b8f96);
  font-weight:600;white-space:nowrap}
.ch-lg i{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.ch-lg-sep{width:1px;height:14px;background:var(--border,#333842)}

/* ── Colored top bar on cards (machine-card language) ── */
.ch-topbar{height:3px;border-radius:3px 3px 0 0;background:var(--accent,#4facfe);opacity:.85}

/* light theme */
html.light .ch-hero{background:
  radial-gradient(520px 200px at 12% 40%,color-mix(in srgb,var(--accent,#0969da) 10%,transparent),transparent 65%),
  linear-gradient(180deg,#fff,#f2f5f8)}
html.light .ch-panel-hdr,html.light .ch-legend{background:rgba(0,0,0,.03)}