/* ==========================================================================
   #view-kernel — Kernel Recovery station (owned by js/views/kernel.js)
   Layout in the 1888×988 content box: KPI row 92 (+14) · cards 616 · trend 252 (+14)
   ========================================================================== */
#view-kernel .kn-cards { display: grid; gap: 12px; height: 616px; }
#view-kernel .kn-trend { height: 252px; margin-top: 14px; }

/* ---------------------------------------------------------------- unit card */
#view-kernel .kn-card { display: flex; flex-direction: column; }
#view-kernel .kn-card .uc-h { flex-wrap: wrap; padding: 9px 12px 7px; gap: 0 6px; align-items: center; }
#view-kernel .kn-card .uc-id { font-size: 20px; letter-spacing: 0.4px; min-width: 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
#view-kernel .kn-sub { flex: 0 0 100%; min-width: 0; font-size: 14px; line-height: 1.25; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
#view-kernel .kn-bd { flex: none; display: inline-flex; }
#view-kernel .kn-render { flex: none; height: 280px; margin: 0 10px; }
#view-kernel .kn-card.off .kn-render { background: radial-gradient(70% 70% at 50% 45%, rgba(90, 105, 130, 0.22), rgba(4, 12, 28, 0) 70%), linear-gradient(180deg, #0b1626, #050b16); }
#view-kernel .kn-card.crit .kn-render { background: radial-gradient(70% 70% at 50% 45%, rgba(150, 40, 60, 0.22), rgba(4, 12, 28, 0) 70%), linear-gradient(180deg, #0d1424, #050a16); }
#view-kernel .kn-card.watch .kn-render { background: radial-gradient(70% 70% at 50% 45%, rgba(150, 100, 30, 0.20), rgba(4, 12, 28, 0) 70%), linear-gradient(180deg, #0d1626, #050b16); }

/* overlays inside the 3D slot */
#view-kernel .kn-render .chip b { font-weight: 700; }
#view-kernel .kn-render .ovl.tr { flex-direction: column; align-items: flex-end; gap: 3px; }
#view-kernel .kn-big-chip { font-size: 21px; padding: 3px 9px; letter-spacing: 0.3px; }
#view-kernel .kn-big-chip small { font-size: 14px; margin-left: 2px; font-weight: 600; }
#view-kernel .kn-big-chip.ok { color: #4ff0a2; }
#view-kernel .kn-cel { font-family: var(--num); font-size: 14px; font-weight: 600; letter-spacing: 0.8px; color: var(--text-dim); text-shadow: 0 1px 3px #000; background: rgba(4, 14, 32, 0.72); border-radius: 4px; padding: 1px 6px; }
#view-kernel .kn-render .uc-alarm { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; z-index: 6; pointer-events: none; white-space: normal; line-height: 1.2; padding: 6px 8px;
  box-shadow: 0 0 16px rgba(255, 178, 36, 0.5); animation: kn-blink 1.2s infinite; }
#view-kernel .kn-render .uc-alarm.crit { box-shadow: 0 0 16px rgba(255, 75, 92, 0.55); }
#view-kernel .kn-render .uc-alarm svg { flex: none; }
#view-kernel .kn-card.has-alarm .kn-render .ovl.bl, #view-kernel .kn-card.has-alarm .kn-render .ovl.br { bottom: 66px; }
@keyframes kn-blink { 50% { box-shadow: 0 0 4px rgba(255, 120, 60, 0.2); filter: brightness(0.84); } }

/* sections below the render */
#view-kernel .kn-below { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 12px 10px; }
#view-kernel .kn-sec { flex: none; padding-top: 6px; }
#view-kernel .kn-sec.kn-end { margin-top: auto; border-top: 1px solid var(--line); padding-top: 9px; }
#view-kernel .kn-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; white-space: nowrap; }
#view-kernel .kn-cap .cap { overflow: hidden; text-overflow: ellipsis; }
#view-kernel .kn-feed { font-size: 14px; color: var(--text-dim); letter-spacing: 0.4px; }
#view-kernel .kn-feed b { color: #fff; font-size: 15px; }
#view-kernel .kn-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; margin-top: 2px; }
#view-kernel .kn-g2 .gauge-wrap svg { max-width: 98px; }
#view-kernel .kn-g2 .gauge-wrap .g-l { font-size: 14px; letter-spacing: 0.6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-kernel .kn-g2 .gauge-wrap .g-v { font-size: 21px; margin-top: -4px; }
#view-kernel .kn-g2 .gauge-wrap .g-v.c-grey { color: #9aa8bd; }
#view-kernel .kn-g2 .gauge-wrap .g-v.c-amber { color: var(--amber); }
#view-kernel .kn-g2 .gauge-wrap .g-v.c-red { color: var(--red); }
#view-kernel .info-grid.stack { gap: 6px; }
#view-kernel .info-grid.stack .ib { padding: 6px 10px; }
#view-kernel .info-grid .ib .v { font-size: 16px; }

/* big single value next to a gauge (one-unit LTDS / hydrocyclone) */
#view-kernel .kn-big { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
#view-kernel .kn-bv { font-size: 30px; font-weight: 700; color: #4ff0a2; line-height: 1.05; white-space: nowrap; }
#view-kernel .kn-bv small { font-size: 15px; color: var(--text-dim); margin-left: 2px; font-weight: 600; }
#view-kernel .kn-big.watch .kn-bv { color: var(--amber); }
#view-kernel .kn-big[data-b="sg"] .kn-bv { color: #7fe3ff; }
#view-kernel .kn-bs { font-size: 14px; color: var(--text-mute); white-space: nowrap; }

/* nut silo level tubes */
#view-kernel .kn-ns { display: flex; justify-content: space-around; gap: 6px; margin-top: 6px; }
#view-kernel .kn-ns .level-bar { gap: 8px; }
#view-kernel .kn-ns .level-bar .lv-tube { width: 28px; min-height: 0; height: 92px; }
#view-kernel .kn-ns .level-bar .lv-txt .muted { font-family: var(--num); font-size: 15px; font-weight: 700; color: var(--text-dim); }
#view-kernel .kn-ns .level-bar .lv-txt b { font-size: 21px; }
#view-kernel .kn-ns .level-bar .lv-txt small { font-size: 14px; }

/* separation-efficiency rows (two-unit LTDS) */
#view-kernel .kn-br { display: grid; grid-template-columns: 52px 1fr 58px; align-items: center; gap: 8px; min-height: 24px; font-size: 14px; }
#view-kernel .kn-br .l { font-family: var(--num); font-weight: 600; color: var(--text-dim); }
#view-kernel .kn-br .v { font-size: 15.5px; font-weight: 700; text-align: right; }
#view-kernel .kn-sec.kn-end .kn-br + .info-grid { margin-top: 6px; }

/* kernel silo table + quality rows */
#view-kernel .kn-ksh, #view-kernel .kn-ksr, #view-kernel .kn-q { display: grid; grid-template-columns: 42px minmax(0, 1fr) 46px 58px 46px; align-items: center; gap: 8px; }
#view-kernel .kn-ksh { min-height: 20px; }
#view-kernel .kn-ksh .cap { white-space: nowrap; overflow: hidden; }
#view-kernel .kn-ksh .cap.r { text-align: right; }
#view-kernel .kn-ksh.q { grid-template-columns: minmax(0, 1fr) 0 46px 58px; }
#view-kernel .kn-ksr { min-height: 25px; }
#view-kernel .kn-ks4 .kn-ksr { min-height: 21px; }
#view-kernel .kn-ks4 .kn-ksi { margin-top: 6px; }
#view-kernel .kn-ks4 .kn-sec.kn-end { padding-top: 7px; }
#view-kernel .kn-ksi { margin-top: 8px; gap: 6px; }
#view-kernel .kn-ksi .ib { padding: 5px 8px; gap: 6px; }
#view-kernel .kn-ksr b { font-size: 15.5px; font-weight: 700; color: var(--text-dim); }
#view-kernel .kn-ksr .num, #view-kernel .kn-q .num { font-size: 15px; font-weight: 600; text-align: right; white-space: nowrap; }
#view-kernel .kn-ksr .lv { color: #7fe3ff; }
#view-kernel .kn-ksr .tp { color: var(--text-dim); }
#view-kernel .kn-q { grid-template-columns: 104px minmax(0, 1fr) 54px 50px; min-height: 26px; }
#view-kernel .kn-q .l { font-size: 14.5px; color: #d4e2f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-kernel .kn-q .bar { overflow: visible; }
#view-kernel .kn-q .bar em { position: absolute; left: 80%; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: rgba(255, 120, 130, 0.85); box-shadow: 0 0 4px rgba(255, 75, 92, 0.6); }
#view-kernel .kn-q .v.c-amber { color: var(--amber); } #view-kernel .kn-q .v.c-red { color: var(--red); }
#view-kernel .kn-q .lm { color: var(--text-mute); font-weight: 500; font-size: 14px; }

/* four ripple mills (90 t/h mills): tighter cards */
#view-kernel .kn-cards.tight .kn-card .uc-h { padding-left: 10px; padding-right: 10px; }
#view-kernel .kn-cards.tight .kn-card .uc-id { font-size: 19px; }
#view-kernel .kn-cards.tight .kn-below { padding-left: 10px; padding-right: 10px; }
#view-kernel .kn-cards.tight .kn-big-chip { font-size: 19px; }
#view-kernel .kn-cards.tight .kn-q { grid-template-columns: 92px minmax(0, 1fr) 50px 46px; gap: 6px; }
#view-kernel .kn-cards.tight .kn-ksr, #view-kernel .kn-cards.tight .kn-ksh:not(.q) { grid-template-columns: 38px minmax(0, 1fr) 42px 54px 42px; gap: 6px; }