/* Shared telemetry components for every upper-computer page.
   Uses existing dark/light design tokens; no protocol or device logic here. */
.ui-summary-block{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border:1px solid var(--border);background:var(--weak-bg);border-radius:12px}
.ui-summary-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ui-summary-title{margin:0!important;font-size:13px!important;font-weight:700;letter-spacing:.01em;line-height:1.45;color:var(--tx)}
.ui-summary-caption{color:var(--tx3);font-size:11px}
.ui-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;min-width:0}
.ui-metrics.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ui-metric{display:flex;flex-direction:column;gap:5px;position:relative;min-width:0;padding:12px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.ui-metric-label{font-size:12px;line-height:1.45;color:var(--tx2);font-weight:550}
.ui-metric-value{display:block;min-width:0;overflow-wrap:anywhere;font-size:clamp(18px,1.7vw,25px);line-height:1.3;font-weight:670;color:var(--tx);font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.ui-metric-unit{font-size:11px;color:var(--tx3)}
.ui-metric-detail{display:block!important;margin:0!important;padding:0!important;line-height:1.55!important;font-size:13px!important;color:var(--tx)!important;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ui-metric--wide{grid-column:1/-1}
.ui-metric[data-level="warn"]{border-color:color-mix(in srgb,#e69f46 52%,var(--border));background:color-mix(in srgb,#e69f46 8%,var(--surface))}
.ui-metric[data-level="warn"] .ui-metric-value{color:var(--tx)}
.ui-metric[data-level="good"] .ui-metric-value{color:var(--tx)}
.ui-metrics--meta .ui-metric-value{font-size:15px;font-weight:650;line-height:1.4}
.ui-metrics--meta .ui-metric{padding:11px 12px}
.view-capture .capture-side .ui-summary-block{padding:12px;gap:11px}
.view-capture .capture-side .ui-metrics.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.view-capture .capture-side .ui-metric{padding:10px 11px}
.view-capture .capture-side .ui-metric-value{font-size:21px}
.view-capture .capture-side .ui-metrics--meta .ui-metric-value{font-size:14px}
.view-capture .capture-stats{gap:8px}
.view-capture .capture-stats>div{background:var(--surface);padding:11px 10px}
.view-capture .capture-stats b{font-size:clamp(16px,1.5vw,22px)}
.view-capture .capture-side>section{width:100%}
.view-capture #captureEstimate{padding:10px 12px;border:1px dashed var(--border);border-radius:9px;background:var(--weak-bg)}
.view-capture .capture-side #captureRead{min-height:38px}
.ui-metrics--test{grid-template-columns:repeat(3,minmax(0,1fr))}
.ui-metrics--test .ui-metric{min-height:92px}
.ui-metrics--ins{grid-template-columns:repeat(2,minmax(0,1fr))}
.ui-metrics--firmware{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ui-metrics--firmware .ui-metric{min-height:78px}
.ui-metrics--firmware .ui-metric-value{font-size:19px}
.ui-calibration-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ui-calibration-steps>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:58px;background:var(--weak-bg);border:1px solid var(--border);border-radius:9px;font-size:12px;color:var(--tx2);font-weight:600}
.ui-calibration-steps b{font-size:11px;letter-spacing:.08em;color:var(--primary);font-variant-numeric:tabular-nums}
/* Status notes: a consistent inset card, not a bare inline sentence. */
.ui-notice{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--weak-bg);color:var(--tx);flex:1 1 auto}
.ui-notice::before{content:"i";display:grid;place-items:center;flex:0 0 19px;width:19px;height:19px;margin-top:1px;border:1px solid var(--primary);border-radius:50%;color:var(--primary);font-size:12px;font-style:normal;font-weight:750;line-height:1}
.ui-notice__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ui-notice__title{display:block;font-size:11px;letter-spacing:.03em;font-weight:700;line-height:1.5;color:var(--tx2)}
.ui-notice__text{display:block;min-width:0;max-width:100%;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;line-height:1.6!important;font-size:13px!important;font-weight:450;color:var(--tx)!important;overflow-wrap:anywhere;white-space:normal}
.ui-notice__text:empty{display:none!important}
.ui-notice:has(>.ui-notice__body>.ui-notice__text[hidden]){display:none!important}
.ui-notice:has(>.ui-notice__body>.ui-notice__text:empty){display:none!important}
.ui-notice[data-tone="warn"]{background:color-mix(in srgb,#e69f46 7%,var(--surface));border-color:color-mix(in srgb,#e69f46 28%,var(--border))}
.ui-notice[data-tone="warn"]::before{content:"!";color:#d49a44;border-color:#d49a44}
.ui-notice[data-tone="good"]{background:color-mix(in srgb,#50b895 7%,var(--surface));border-color:color-mix(in srgb,#50b895 28%,var(--border))}
.ui-notice[data-tone="good"]::before{content:"✓";color:#50b895;border-color:#50b895}
.ui-notice[data-tone="error"]{background:color-mix(in srgb,#e06e74 8%,var(--surface));border-color:color-mix(in srgb,#e06e74 38%,var(--border))}
.ui-notice[data-tone="error"]::before{content:"!";color:#e06e74;border-color:#e06e74}
.ui-notice--compact{padding:9px 11px;gap:8px}
.ui-notice--compact::before{flex-basis:16px;width:16px;height:16px;font-size:10px}
.ui-notice--compact .ui-notice__title{font-size:11px}
.ui-notice--compact .ui-notice__text{font-size:12px!important}
.ui-notice .ui-notice__text[role="status"]{min-height:0!important}
.view-test .ui-notice,.view-calib .ui-notice,.view-tuning .ui-notice,.view-capture .ui-notice{margin:0}
.view-test .drift-results>.ui-summary-block{margin:0}
.view-test .ins-card>.ui-summary-block{margin:0}
.view-calib .vqf-card .ui-notice{width:100%}
.view-output .kv .ui-notice{margin-top:6px}
.view-settings .inline-form .ui-notice{min-width:160px}
.view-settings .filter-card>.ui-notice,.view-settings #startupControls>.ui-notice{width:100%}
.view-upgrade #firmwareStatus{background:none!important;border:0!important;padding:0!important}
.view-upgrade .ui-summary-block #firmwareLink{margin:0!important;font-size:13px;color:var(--tx)}
/* Compact status summaries in section headers become intentional little cards. */
.view-settings #algorithmState,.view-settings #filterState,.view-settings #biasSummary,
.view-settings #zaruSummary,.view-settings #zaruSaved,.view-calib #bhMeta,
.view-calib #magCalSource,.view-calib #vqfSource{
  display:inline-flex;align-items:center;max-width:100%;min-height:28px;padding:5px 10px;
  border:1px solid var(--border);border-radius:8px;background:var(--weak-bg);
  font-size:11px;line-height:1.45;white-space:normal;overflow-wrap:anywhere;color:var(--tx2);
}
.view-settings #algorithmState,.view-settings #filterState{font-variant-numeric:tabular-nums}
.view-settings .card-h:has(#algorithmState),.view-settings .card-h:has(#filterState){flex-wrap:wrap}
.view-output .out-serial details .kv,.view-output .out-can details .kv{padding:10px;border:1px solid var(--border);background:var(--weak-bg);border-radius:10px}
.view-settings .adv-sec>p[id],.view-settings #zaruNote{max-width:100%}
.view-settings .stat-chips>span{border-radius:9px;border:1px solid var(--border);background:var(--weak-bg)}
.view-status .dev-card .dev-row:not(:last-child){border-bottom:1px solid var(--border)}
.view-status #qsMsg:not(:empty),.view-status #qsEmpty:not([hidden]){padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--weak-bg)}
.view-test .drift-results .ui-summary-block{overflow:hidden}
@media(max-width:1199px){
 .ui-metrics--test{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ui-metrics--test .ui-metric:last-child{grid-column:1/-1}
}
@media(max-width:768px){
 .ui-metrics.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ui-metrics--test{grid-template-columns:minmax(0,1fr)}
 .ui-metrics--test .ui-metric:last-child{grid-column:auto}
 .view-capture .capture-side .ui-metrics.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ui-notice{padding:11px 12px}
 .ui-calibration-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:390px){
 .ui-metric{padding:9px 10px}
 .ui-metric-value{font-size:18px}
 .ui-metrics--meta .ui-metric-value{font-size:13px}
 .ui-metrics--firmware .ui-metric-value{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.ui-notice,.ui-metric{transition:none}}