/* NPU and CPU monitor. Tokens come from ../ime.css; the two series colors are the validated
   categorical pair (dataviz palette slots 1 and 2), stepped separately for the dark surface. */
:root { --npu: #eb6834; --cpu: #2a78d6; --band: rgb(105 115 104 / 13%); --grid: #ecede6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --npu: #d95926; --cpu: #3987e5; --band: rgb(200 210 195 / 10%); --grid: #2b322c; }
}
:root[data-theme="dark"] { --npu: #d95926; --cpu: #3987e5; --band: rgb(200 210 195 / 10%); --grid: #2b322c; }

.monitor { grid-template-rows: auto minmax(0, 1fr); }
.monitor .top > .icon-btn { margin-left: -8px; }
.monitor main { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* The panel: alone on the monitor page, or under the voice IME's and the chat page's own content,
   which fills the screen (.page-fill) so the panel waits just below it. */
.hwmon { display: flex; flex-direction: column; gap: 10px; flex: none; }
.page-fill { display: flex; flex-direction: column; gap: 12px; flex: none; min-height: 100%; }
.page-fill + .hwmon { padding-top: 16px; scroll-margin-top: 8px; }
.hwmon-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; }
.hwmon-head h2 { margin: 0; font-family: "Noto Serif TC", "Songti TC", serif; font-weight: 500; font-size: 16px; letter-spacing: .1em; }
.hwmon-head small { font-size: 11px; color: var(--muted); text-align: right; }

.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.swatch.npu { background: var(--npu); }
.swatch.cpu { background: var(--cpu); }

.now { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: var(--paper); border-radius: 16px; padding: 12px 14px; display: grid; gap: 2px; }
.tile.wide { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
.tile .key { font-size: 12px; color: var(--muted); }
.tile b { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tile.wide b { font-size: 15px; text-align: right; }
.tile small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.chart-card, .user-card { background: var(--paper); border-radius: 16px; padding: 12px 14px 8px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chart-card h2, .user-card h2 { margin: 0; font-size: 14px; font-weight: 600; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.unit { font-size: 12px; color: var(--muted); }
/* ime.css strokes every svg (icons); charts draw their own strokes and plain text. */
.chart { display: block; width: 100%; height: 150px; margin-top: 4px; touch-action: pan-y; stroke: none; }
.chart.short { height: 100px; }
.chart text { font-size: 10.5px; fill: var(--muted); stroke: none; font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .band { fill: var(--band); }
.chart .band-label { font-size: 10px; fill: var(--muted); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.npu { stroke: var(--npu); }
.chart .line.cpu { stroke: var(--cpu); }
.chart .end { stroke: var(--paper); stroke-width: 2; }
.chart .end.npu { fill: var(--npu); }
.chart .end.cpu { fill: var(--cpu); }
.chart .end-label { font-size: 11px; fill: var(--ink); font-weight: 600; }
.chart .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }

.users { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .users { grid-template-columns: 1fr 1fr; } }
.user-card ul { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 8px; }
.user-card li { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 4px 10px; align-items: center; font-size: 13px; }
.user-card li .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card li .pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.user-card li .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--pale); overflow: hidden; }
.user-card li .bar i { display: block; height: 100%; border-radius: 2px; }
.user-card .empty { color: var(--muted); font-size: 13px; }

.note { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.note.error { color: var(--warn); }

.tip {
  position: fixed; z-index: 5; pointer-events: none; min-width: 150px;
  background: var(--paper); color: var(--ink); border-radius: 12px; padding: 8px 10px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 16%); font-size: 12px; line-height: 1.6; font-variant-numeric: tabular-nums;
}
.tip .row { display: flex; justify-content: space-between; gap: 12px; }
.tip .row span:first-child { color: var(--muted); }