/* apps/website/html/css/pulse.css — pulse's own layout and components.
The design system it is built from lives in css/system.css, which this page links first. */
.p-tabs { display:flex; gap:10px } .p-tabs button { background:none; border:0; font-family:inherit;
font-size:11px; color:var(--ink-4); padding:1px 3px 3px; border-bottom:1px solid transparent; cursor:pointer }
.p-tabs button.on { color:var(--ink); border-bottom-color:var(--s1) }
.p-stale { color:var(--ink-5) !important } .p-stale .v, .p-stale .k, .p-stale .sub { color:var(--ink-5) }
/* System meters + L-frame charts (Task 6) */
.p-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.p-chart { display:flex; gap:15px }
.p-read { min-width:80px; padding-top:2px }
.p-read s { text-decoration:none; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-4) }
.p-read s i { width:9px; height:2px; display:inline-block }
.p-read b { display:block; font-size:17px; font-weight:600; color:var(--ink); margin:1px 0 10px; letter-spacing:-.01em }
.p-read b u { text-decoration:none; font-size:11px; color:var(--ink-4); font-weight:400; margin-left:2px }
.p-plotwrap { flex:1; display:flex }
.p-yaxis { width:36px; position:relative; font-size:11px; color:var(--ink-5); flex-shrink:0 }
.p-yaxis i { position:absolute; right:8px; font-style:normal; transform:translateY(-50%) }
.p-plot { display:block; width:100%; height:120px }
.p-plot.short { height:84px }
.p-xaxis { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-5); margin-top:5px; padding-left:36px }
.p-cores { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin-top:11px; padding-left:36px }
.p-cores u { text-decoration:none; display:block; height:2px; background:var(--line); position:relative; margin-bottom:4px }
.p-cores u s { position:absolute; left:0; top:0; height:100%; background:var(--s1); display:block; text-decoration:none }
.p-cores b { font-size:11px; color:var(--ink-2); font-weight:400 }
/* Now Playing — every session identical, separated by a hairline (Task 7) */
/* :first-of-type matches the first div of that TAG, and .p-label is the first div in the
section — so no .p-np was ever "first" and every session, including the first, drew a
hairline above it. Adjacent-sibling only puts a line BETWEEN sessions. */
/* Idle placeholder for Now Playing. Hidden by default — it exists for the two-column
breakpoint, where the section has height to spare and would otherwise collapse to its
label and leave the column stopping short of the torrents beside it. */
.p-ghost { display:none }
.p-np { display:flex; gap:15px; align-items:stretch; padding:0 0 12px }
.p-np + .p-np { border-top:1px solid var(--line-2); padding-top:12px }
/* Film and TV posters are 2:3; album art is square. The art still stretches to the row's
content height and derives its WIDTH from that height, so the progress bar stays flush with
the poster's lower edge whatever the title does — the property that took two attempts to
get right. Only the ratio differs between the two. */
.p-np .art { width:86px; aspect-ratio:2/3; flex-shrink:0; align-self:flex-start;
background-size:cover; background-position:center; background-color:var(--surface) }
.p-np.music .art { aspect-ratio:1/1 }
.p-np .col { flex:1; display:flex; flex-direction:column; justify-content:space-between; min-width:0 }
.p-np .top { display:flex; justify-content:space-between; align-items:baseline; gap:10px }
.p-np .t { font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1.25; color:var(--ink) }
.p-np .a { font-size:12px; color:var(--ink-4); margin-top:2px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-np .q { font-size:11px; color:var(--ink-5); text-align:right; flex-shrink:0; line-height:1.55 }
.p-np .q.warn { color:var(--warn) }
.p-np .prog { height:2px; background:var(--line); margin-bottom:5px }
.p-np .prog i { display:block; height:100%; background:var(--ok) }
.p-np .ft { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-5) }
/* Torrents dashboard tile — five columns, expand-in-place row (Task 7) */
.p-pbar { display:inline-block; width:52px; height:2px; background:var(--line); margin-right:7px; vertical-align:1px }
.p-pbar i { display:block; height:100%; background:var(--s1) }
.p-pbar i.warn { background:var(--warn) }
.p-texp td { padding:0; border-bottom:1px solid var(--line-2) }
.p-exp { padding:10px 0 12px }
.p-exp .kv { display:flex; gap:24px }
.p-exp .kv span { font-size:11px; color:var(--ink-4); display:flex; flex-direction:column; gap:3px }
.p-exp .kv b { font-size:13px; color:var(--ink); font-weight:500 }
/* Page shell — sticky header, two-region body (Task 5) */
/* The page itself does not scroll — the two columns own their own overflow, which keeps the
header fixed without position:sticky and keeps the scrollbar inside the layout. */
.p-body { display:grid; grid-template-columns:1fr 330px; height:calc(100vh - var(--hdr-h)); min-height:0 }
html, body { height:100%; overflow:hidden }
/* The rail is a status surface — Issues is worth nothing once you have scrolled past it to
read the torrents table. So it stays put while the main column scrolls.
align-self:start stops the grid stretching it to the main column's height; the max-height
and overflow mean that when the window is too short to hold it (measured: 1151px of
content, so anything under ~1200px of viewport) it scrolls inside itself rather than
clipping Requests off the bottom. No media query — it adapts continuously. */
/* The MAIN column scrolls, not the page. Previously the window scrollbar sat at the far right
edge, past the rail, so it read as the rail's own — and the rail was pressed against it.
With main as the scroll container the bar sits between the charts and the rail, next to the
content it actually scrolls, and the rail is simply static.
Sections keep their natural size; the rail scrolls as a whole only if it cannot fit. */
.p-main { overflow-y:auto; scrollbar-gutter:stable; padding-right:14px }
.p-rail { height:100%; overflow-y:auto; scrollbar-width:thin;
display:flex; flex-direction:column; gap:22px }
.p-rail > * { flex:0 0 auto }
/* .p-sec carries margin-bottom:22px and the rail also sets gap:22px, so sections were sitting
44px apart with a trailing margin under the last one — about 110px of the rail's height was
doubled spacing. The gap owns the rhythm here. */
.p-rail > .p-sec { margin-bottom:0 }
.p-main { padding:18px 20px } .p-rail { padding:18px 15px; border-left:1px solid var(--line-2) }
/* The rail — Issues, Containers, History (Task 8). Libraries/Requests·Reliability rows
(.p-lrow) are included here too since Task 8's CSS batch ships them, but nothing in
this file's JS renders a .p-lrow yet — that's Tasks 9/10, still on the legacy panels. */
.p-irow { display:flex; align-items:center; padding:6px 0; border-bottom:1px solid var(--line-2); font-size:13px }
.p-irow:last-child { border-bottom:0 }
/* NOTE (Task 8 verification): the brief's rationale for this doubled selector is that
ui.css ships html[data-ui] a (0,1,2) + html[data-ui] a:hover (0,2,2), and a bare
.p-irow .lbl (0,2,0) would win rest but lose hover to it. Verified against this repo:
no ui.css exists anywhere, and plex-admin.html's carries no data-ui attribute
— so the html[data-ui] branch below is inert on this page. Kept verbatim (harmless,
costs nothing) rather than "simplified", since the codebase is what disagrees with the
brief here, not the CSS itself; flagged in the Task 8 report per standing instructions. */
html[data-ui] .p-irow .lbl,
.p-irow .lbl { flex:1; color:var(--ink-2); text-decoration:none;
cursor:pointer }
html[data-ui] .p-irow .lbl:hover,
.p-irow .lbl:hover { color:var(--ink) }
/* stale has no fix to link to, so it renders as a span and must not look clickable */
html[data-ui] .p-irow .lbl.nolink,
.p-irow .lbl.nolink { border-bottom:0; cursor:default; color:var(--ink-4) }
.p-irow .val { font-size:11px; color:var(--ink-4) }
.p-hrow { display:flex; align-items:center; gap:9px; height:30px; box-sizing:border-box; padding:0; border-bottom:1px solid var(--line-2); font-size:12.5px }
.p-hrow:last-child { border-bottom:0 }
/* Single line, fixed height. Once the marker slot stopped stealing 115px the title column is
239px, which holds a track and its artist; the rare long one ellipses rather than wrapping.
Fixed rows matter beyond tidiness: they make the section's height deterministic, which is
what lets the whole rail fit a 1440p window without scrolling. */
/* :first-child, not `span` — the marker slot is also a span, so a bare `.p-hrow span` rule
gave IT flex:1 too and it grew to 124px of a 299px row. The title was wrapping against a
third of the width sitting empty next to it. */
.p-hrow > span:first-child { flex:1; min-width:0; color:var(--ink); overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; line-height:1.35 }
/* The time column was 26px holding "10h ago" / "yesterday", so it wrapped to two lines and
clipped mid-word. Compact form (10h · 1d · 2d) in a column wide enough for it, never
wrapping, with the long form on the title attribute. */
.p-hrow em { font-style:normal; font-size:11px; color:var(--ink-4); flex:0 0 34px;
text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.p-hrow .mk { flex:0 0 8px; display:flex; justify-content:center }
.p-lrow { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--line-2); font-size:12.5px }
.p-lrow:last-child { border-bottom:0 }
.p-lrow em { font-style:normal; font-size:11px; color:var(--ink-4); display:block }
.p-lrow b { font-size:12.5px; color:var(--ink); font-weight:500 }
.p-cgrid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px }
.p-cgrid s { text-decoration:none; display:block; font-size:12px; padding:4px 0; border-bottom:1px solid var(--line-2); color:var(--ink-2) }
.p-cgrid s.down { color:var(--err) }
/* Console overlay (Task 10). Five panes became three: Transfers, Imports
(queue + arr activity — both answer "what happened to this file after it
downloaded"), and Quality (movies below target + the rules defining target).
One freshness stamp in the header; no per-pane refresh buttons, because the
console polls. */
.p-con-h { display:flex; justify-content:space-between; align-items:baseline;
padding:14px 18px; border-bottom:1px solid var(--line) }
.p-con-h b { font-size:15px; font-weight:600; color:var(--ink) }
.p-con-h s { text-decoration:none; font-size:11px; color:var(--ink-4) }
.p-con-tabs { display:flex; gap:20px; padding:0 18px; border-bottom:1px solid var(--line) }
.p-con-tabs button { background:none; border:0; font-family:inherit; font-size:13px; color:var(--ink-4);
padding:10px 0; border-bottom:1px solid transparent; margin-bottom:-1px; cursor:pointer }
.p-con-tabs button.on { color:var(--ink); border-bottom-color:var(--s1) }
.p-con-tabs button i { font-style:normal; font-size:11px; margin-left:6px; color:var(--ink-5) }
.p-con-tabs button i.warn { color:var(--warn) }
.p-con-b { padding:15px 18px }
/* Rules that HIDE things, lost with the inline block Task 5 deleted. These are not
styling: without them the element is permanently on screen. A reviewer checking
"did anything become invisible?" will not find these — the failure is the inverse. */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none;
align-items:center; justify-content:center; z-index:100 }
.modal.open { display:flex }
.mbox { background:var(--bg); border:1px solid var(--edge); width:min(1100px,92vw);
max-height:86vh; overflow:auto }
.modal.wide .mbox { width:min(1280px,95vw) }
/* The spec rejects toasts outright — "the only overlapping element in a design that has
none, and they vanish before you might want them". Task 9's runAction is the replacement
for the actions it covers. This rule exists only so the remaining showOk() call sites do
not paint a permanently visible banner; retiring them is follow-up, not silent deletion. */
.q-toast { position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-8px);
z-index:10001; background:color-mix(in srgb, var(--ok) 18%, var(--surface));
border:1px solid var(--ok); color:var(--ok); font-size:12px; font-weight:600;
padding:7px 15px; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none }
.q-toast.show { opacity:1; transform:translateX(-50%) translateY(0) }
/* Page layout and the modal chrome. These class names predate the redesign and stay as
markup hooks; what changed is that they now carry layout only — no fills, no borders,
no corners — so the page reads flat and only metric cards lift. */
/* Main is a single column now — Now Playing, System, the three charts, then Torrents.
The two-column .dash was the ORIGINAL page's structure, carried through the migration
by accident; keeping it meant the layout was never actually redesigned. */
.p-main > * + * { margin-top:22px }
.p-stat { font-size:22px; font-weight:600; color:var(--ink); line-height:1.1 }
/* Modal chrome. .modal/.mbox hide-and-show rules are defined above with the other
hiding rules — these are the interior parts. */
.mhead { display:flex; justify-content:space-between; align-items:baseline;
padding:14px 18px; border-bottom:1px solid var(--line) }
.mt { font-size:15px; font-weight:600; color:var(--ink) }
.mclose { background:none; border:0; font-family:inherit; font-size:13px;
color:var(--ink-4); cursor:pointer; padding:0 }
.mclose:hover { color:var(--ink) }
.mbody { padding:0 }
/* Deferred surfaces, ported from the inline block Task 5 deleted.
The spec defers REDESIGNING these (console interiors, the cue-split flow, the history
and libraries lists) — but deferred is not the same as unstyled, and deleting their only
stylesheet left 354 rules with nothing behind them. Ported with the old palette
mapped onto the new tokens, corners flattened to 0 and the monospace stack dropped, so
these read as the same design language until each gets its own pass. Any selector
pulse.css already owns was skipped, so nothing here overrides the redesign. */
.wrap { max-width: 1480px; margin: 0 auto; height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .title { font-size: 22px; font-weight: 600; letter-spacing: 0.01em; }
.brand .title .dot { color: var(--ink); text-shadow: 0 0 12px color-mix(in srgb, var(--edge) 50%, transparent); }
.status-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.status-left, .status-right { display: flex; align-items: center; gap: 12px; }
.status-item { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.panel { background: var(--surface); border: 1px solid var(--edge); padding: 10px 15px; display: flex; flex-direction: column; min-height: 0; }
.panel.grow { flex: 1 1 0; }
.p-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; flex: 0 0 auto; min-height: 20px; }
.p-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink); font-weight: 600; text-shadow: 0 0 8px color-mix(in srgb, var(--edge) 30%, transparent); }
.p-note { font-size: 10px; color: var(--ink-5); font-variant-numeric: tabular-nums; }
.p-ctl { display: flex; align-items: center; gap: 7px; }
.iconbtn { font: inherit; font-size: 13px; line-height: 1; color: var(--ink-4); background: none; border: 1px solid var(--edge); width: 22px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .12s; }
.iconbtn:hover:not(:disabled) { color: var(--ink); border-color: color-mix(in srgb, var(--edge) 40%, transparent); }
.iconbtn:disabled { opacity: .3; cursor: default; }
.expand { font: inherit; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-4); background: none; border: 1px solid var(--edge); padding: 3px 9px; cursor: pointer; transition: .12s; display: inline-flex; align-items: center; gap: 5px; }
.expand:hover { color: var(--ink); border-color: color-mix(in srgb, var(--edge) 40%, transparent); }
.empty { font-size: 12px; color: var(--ink-4); padding: 4px 2px; }
.empty.bad { color: var(--err); }
/* Gauges */
.gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.gl { font-size: 11.5px; color: var(--ink-2); }
.gv { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gv small { font-size: 11px; color: var(--ink-4); font-weight: 400; }
.bar { height: 6px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--edge), var(--ink)); box-shadow: 0 0 8px color-mix(in srgb, var(--edge) 40%, transparent); }
.gs { font-size: 10px; color: var(--ink-5); margin-top: 5px; font-variant-numeric: tabular-nums; }
.disk { margin-bottom: 12px; }
.disk:last-child { margin-bottom: 0; }
/* Mini charts (disk io / network / temps) */
.mc { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.mc-reads { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.mc-metric { display: flex; flex-direction: column; }
.mc-klabel { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-4); }
.mc-dot { width: 9px; height: 2px; }
.mc-dot.b { background: var(--s2); }
.mc-v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1px; }
.mc-v small { font-size: 9.5px; color: var(--ink-4); font-weight: 400; }
.mc-chart { position: relative; min-height: 50px; }
.mc-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mc-chart polyline { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.mc-chart .l-a { stroke: var(--ink); filter: drop-shadow(0 0 2px color-mix(in srgb, var(--edge) 25%, transparent)); }
.mc-chart .l-b { stroke: var(--s2); opacity: 0.9; }
.mc-chart .grid { stroke: var(--line); stroke-dasharray: 2 3; }
.mc-chart .cap { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.65; }
.mc-cap { position: absolute; left: 0; font-size: 8px; letter-spacing: 0.02em; color: var(--ink-4); transform: translateY(-50%); padding: 0 5px 0 1px; background: rgba(20,19,16,0.85); white-space: nowrap; }
.mc-axis { position: absolute; right: 1px; top: -1px; font-size: 8.5px; color: var(--ink-5); }
.mc-axis.bot { top: auto; bottom: -1px; }
.mc-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--ink-5); }
.mc-range { display: flex; gap: 4px; }
.mc-range button { font: inherit; font-size: 9px; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--edge); background: none; color: var(--ink-4); cursor: pointer; }
.mc-marker { stroke: var(--err); stroke-width: 1; opacity: .85; }
.mc-marker-dot { fill: var(--err); }
.mc-cross { stroke: var(--ink-2); stroke-dasharray: 2 2; stroke-width: 1; opacity: .5; }
.mc-tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--line); padding: 4px 7px; font-size: 10.5px; color: var(--ink); white-space: nowrap; z-index: 5; }
.cores { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); flex: 0 0 auto; }
.cbars { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.cbar { flex: 1; background: linear-gradient(180deg, var(--ink), var(--edge)); opacity: .85; min-width: 4px; }
.ccap { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--ink-5); margin-top: 6px; font-variant-numeric: tabular-nums; }
/* Now Playing — fixed height so the card is identical whether or not a stream is
playing (2:3 poster). The idle state keeps the poster outline + a "nothing" line. */
.np-panel #npBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.np { display: flex; gap: 14px; min-height: 140px; flex: 1 1 auto; }
/* Poster grows with the card (align-self stretch → its height tracks the row);
aspect-ratio derives the width so it stays 2:3 for video, square for music. */
.np-poster { flex: 0 0 auto; align-self: stretch; aspect-ratio: 2 / 3; max-height: 320px; border: 1px solid var(--edge); background: linear-gradient(150deg, var(--line), #12100b); background-size: cover; background-position: center; position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.np-poster.idle { background: var(--bg); border-style: dashed; box-shadow: none; }
.np-poster.music { aspect-ratio: 1 / 1; }
/* square album art */
.np-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.np-idle { justify-content: center; }
.np-idle-msg { font-size: 12px; color: var(--ink-4); display: flex; align-items: center; gap: 9px; }
.np-idle-msg::before { content: ""; width: 22px; height: 1px; background: var(--ink-5); }
.np-title { font-size: 16px; font-weight: 600; line-height: 1.25; }
.np-sub { font-size: 11px; color: var(--ink-4); margin-top: 3px; }
.np-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 11px 0; }
.badge { font-size: 9.5px; text-transform: uppercase; padding: 3px 8px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-4); white-space: nowrap; }
.badge.hires { color: var(--ink); border-color: color-mix(in srgb, var(--edge) 30%, transparent); font-variant-numeric: tabular-nums; }
/* amber audio-quality chip, same box as the other badges */
.np-prog { margin-top: 14px; }
.np-times { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-4); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.np-user { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-2); margin-top: 10px; }
.np-user .who { color: var(--ink); }
.np-device { font-size: 10px; color: var(--ink-5); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Watch history */
.wh { display: flex; align-items: center; gap: 11px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.wh:last-child { border-bottom: none; }
.wh-th { flex: 0 0 28px; height: 40px; background: var(--bg) center/cover no-repeat; border: 1px solid var(--line); }
.wh-th.sq { flex-basis: 40px; }
/* square album art for music rows */
.wh-t { flex: 1; min-width: 0; }
.wh-name { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-sub { font-size: 10px; color: var(--ink-5); margin-top: 2px; }
.wh-when { font-size: 10px; color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Requests */
.req { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.req:last-child { border-bottom: none; }
.req-th { flex: 0 0 30px; height: 44px; background: linear-gradient(150deg, #241f2a, #111014) center/cover no-repeat; border: 1px solid var(--line); }
.req-info { flex: 1; min-width: 0; }
.req-title { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req-sub { font-size: 10px; color: var(--ink-5); margin-top: 2px; }
.req-type { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); border: 1px solid var(--line); padding: 1px 5px; margin-left: 6px; }
.req-q { color: var(--ink); border-color: color-mix(in srgb, var(--edge) 35%, transparent); }
.req-act { display: flex; gap: 6px; flex: 0 0 auto; }
.rbtn { width: 30px; height: 30px; border: 1px solid var(--edge); background: var(--bg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .12s; font: inherit; }
.rbtn.no { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.rbtn.no:hover { background: color-mix(in srgb, var(--err) 12%, transparent); }
.rbtn:disabled { opacity: .4; cursor: default; }
/* Pending Requests / Playback Reliability compact tiles */
.big-stat { font-size: 20px; font-weight: 600; padding: 1px 2px; font-variant-numeric: tabular-nums; }
.rel-headline { font-size: 20px; font-weight: 600; padding: 1px 2px 0; font-variant-numeric: tabular-nums; }
.rel-sub { font-size: 10.5px; color: var(--ink-4); padding: 1px 2px 0; }
/* Pending / Reliability row: slim tiles — tighter padding + header gap so the cards
hug their content instead of standing tall. */
.rel-row > .panel { padding: 7px 14px; }
.rel-row .p-head { margin-bottom: 4px; min-height: 0; }
/* Center the tile content vertically in the (row-height-matched) card. */
.rel-row .big-stat { flex: 1 1 auto; display: flex; align-items: center; }
.rel-row #rel-tile { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* Libraries */
.lib { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; cursor: pointer; border: 1px solid transparent; transition: .12s; }
.lib:hover { background: var(--line-2); }
.lib-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lib-l > div { min-width: 0; }
.lib-ic { width: 28px; height: 28px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lib-name { font-size: 13px; color: var(--ink); }
.lib-meta { font-size: 9.5px; color: var(--ink-5); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lib-size { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lib-chev { color: var(--ink-5); font-size: 14px; }
.lib:hover .lib-chev { color: var(--ink); }
/* Containers */
.cwrap { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 0.02em; padding: 3px 9px; border: 1px solid var(--edge); background: var(--bg); color: var(--ink-4); height: fit-content; }
.pill::before { content: ""; width: 5px; height: 5px; background: currentColor; flex: 0 0 auto; }
.pill.up { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pill.up::before { box-shadow: 0 0 6px currentColor; }
.mitem { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.mi-l { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.mi-yr { font-size: 10px; color: var(--ink-5); }
.mi-name { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-r { font-size: 10px; color: var(--ink-5); font-variant-numeric: tabular-nums; }
.mrow { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.mrow:last-child { border-bottom: none; }
.mrow-th { flex: 0 0 34px; height: 50px; background: var(--bg) center/cover no-repeat; border: 1px solid var(--line); }
.mrow-main { flex: 1; min-width: 0; }
.mrow-name { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow-sub { font-size: 10.5px; color: var(--ink-5); margin-top: 3px; }
.mrow-side { font-size: 10.5px; color: var(--ink-4); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; flex: 0 0 auto; line-height: 1.5; }
.mrow-prog { height: 4px; margin-top: 7px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.mrow-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--edge), var(--ink)); }
.mrow-badges { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.mgroup { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); font-weight: 600; margin: 16px 0 2px; padding-bottom: 5px; border-bottom: 1px solid var(--edge); }
.mgroup:first-child { margin-top: 0; }
/* Spotistats-style history feed (in the History expand modal) */
.hist-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 0 2px 10px; border-bottom: 1px solid var(--edge); margin-bottom: 4px; }
.hist-sum-n { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hist-sum-top { font-size: 11px; color: var(--ink-4); }
.hist-ct { color: var(--ink-5); }
.hist-day { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); font-weight: 600; margin: 13px 0 4px; }
.hrow { display: flex; align-items: center; gap: 11px; padding: 5px 2px; border-bottom: 1px solid var(--line); }
.hrow:last-child { border-bottom: none; }
.hist-time { flex: 0 0 40px; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.hrow-th { flex: 0 0 34px; height: 34px; background: var(--bg) center/cover no-repeat; border: 1px solid var(--line); }
.hrow-main { flex: 1; min-width: 0; }
.hrow-name { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-artist { color: var(--ink-2); }
.hrow-sub { font-size: 10px; color: var(--ink-5); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rstat { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border: 1px solid var(--line); color: var(--ink-4); white-space: nowrap; flex: 0 0 auto; }
.rstat.approved { color: var(--s2); border-color: color-mix(in srgb, var(--s2) 30%, transparent); }
.rstat.available { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.mrow-act { display: flex; gap: 6px; flex: 0 0 auto; }
/* Controls card */
.ctl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ctl-btn { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 11.5px; text-align: left; padding: 9px 11px; border: 1px solid var(--edge); background: var(--bg); color: var(--ink-2); cursor: pointer; transition: .12s; min-width: 0; }
.ctl-btn .cl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-btn .ci { display: flex; flex: 0 0 auto; color: var(--ink-4); }
.ctl-btn:hover:not(:disabled) { border-color: var(--ink-5); color: var(--ink); }
.ctl-btn:hover:not(:disabled) .ci { color: var(--ink); }
.ctl-btn:disabled { opacity: .4; cursor: default; }
/* Chart header (range + expand) */
.mc-head-r { display: flex; align-items: center; gap: 8px; }
.mc-exp { padding: 3px 7px; }
/* Expanded chart modal */
.cm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cm-nav { display: flex; align-items: center; gap: 8px; }
.cm-frame { font-size: 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-pg { font: inherit; font-size: 13px; line-height: 1; width: 24px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--ink-4); background: none; border: 1px solid var(--edge); cursor: pointer; transition: .12s; }
.cm-pg:hover:not(:disabled) { color: var(--ink); border-color: color-mix(in srgb, var(--edge) 40%, transparent); }
.cm-pg:disabled { opacity: .3; cursor: default; }
.cm-axis { display: flex; justify-content: space-between; font-size: 9px; color: var(--ink-5); padding: 5px 2px 0; font-variant-numeric: tabular-nums; }
.chartbox { position: relative; height: 300px; margin: 8px 0 0; border: 1px solid var(--line); background: var(--bg); }
.chart-stats { display: flex; flex-wrap: wrap; gap: 22px; padding: 2px 0 6px; }
.chart-stats .dot { display: inline-block; width: 9px; height: 2px; margin-right: 6px; vertical-align: middle; }
.cstat { display: flex; flex-direction: column; gap: 3px; }
.cstat .cs-l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-5); }
.cstat .cs-v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Library poster grid */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 13px; }
.ptile { cursor: pointer; border: 1px solid transparent; padding: 4px; transition: .12s; }
.ptile:hover { background: var(--bg); border-color: var(--line); }
.pt-img { aspect-ratio: 2/3; background: linear-gradient(150deg,var(--line),#12100b) center/cover no-repeat; border: 1px solid var(--line); position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.pt-badge { position: absolute; right: 3px; bottom: 3px; font-size: 8px; letter-spacing: 0.02em; padding: 1px 5px; background: rgba(0,0,0,0.72); color: var(--ink-2); border: 1px solid var(--line); }
.pt-name { font-size: 10.5px; color: var(--ink-2); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-yr { font-size: 9px; color: var(--ink-5); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-img.sq { aspect-ratio: 1 / 1; }
/* square artist/album art vs the 2:3 movie/show poster */
.pt-badge.qbadge { left: 3px; right: auto; font-size: 9px; font-weight: 600; padding: 1px 5px; background: rgba(0,0,0,0.82); border-color: color-mix(in srgb, var(--edge) 50%, transparent); color: var(--ink); font-variant-numeric: tabular-nums; }
/* opaque so it's legible over busy album art */
/* History Watch|Listen toggle */
.wh-toggle { display: inline-flex; margin-left: auto; margin-right: 8px; border: 1px solid var(--line); overflow: hidden; }
.wh-toggle button { font: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; background: none; border: none; color: var(--ink-4); cursor: pointer; }
.wh-toggle button + button { border-left: 1px solid var(--line); }
/* Album tracklist */
.qbadge { font-size: 9px; letter-spacing: .02em; padding: 1px 6px; background: color-mix(in srgb, var(--edge) 14%, transparent); border: 1px solid color-mix(in srgb, var(--edge) 32%, transparent); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tracklist { display: flex; flex-direction: column; }
.trk { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.trk:last-child { border-bottom: none; }
.trk-i { flex: 0 0 22px; text-align: right; font-size: 11px; color: var(--ink-5); font-variant-numeric: tabular-nums; }
.trk-t { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-q { flex: 0 0 auto; }
.trk-d { flex: 0 0 auto; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
/* Poster editor */
.pe-back { font: inherit; font-size: 11px; color: var(--ink-4); background: none; border: none; cursor: pointer; padding: 0 0 12px; display: inline-flex; align-items: center; gap: 5px; }
.pe-back:hover { color: var(--ink); }
.pe-note { font-size: 11px; color: var(--ink-4); line-height: 1.5; padding-bottom: 6px; }
.pe-note.bad { color: var(--err); }
.pe-note b { color: var(--ink); font-weight: 600; }
.pe-sect { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); font-weight: 600; margin: 12px 0 8px; }
.pe-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.pe-opt { cursor: pointer; border: 1px solid var(--line); aspect-ratio: 2/3; background: var(--bg) center/cover no-repeat; transition: .12s; }
.pe-opt:hover { border-color: color-mix(in srgb, var(--edge) 50%, transparent); }
.pe-url { display: flex; gap: 8px; margin-top: 16px; }
.pe-url input { flex: 1; min-width: 0; font: inherit; font-size: 11px; background: var(--bg); border: 1px solid var(--edge); color: var(--ink); padding: 7px 9px; }
.pe-url input:focus { outline: none; border-color: color-mix(in srgb, var(--edge) 40%, transparent); }
.pe-url button { font: inherit; font-size: 11px; padding: 0 13px; border: 1px solid var(--edge); background: none; color: var(--ink-4); cursor: pointer; white-space: nowrap; }
.pe-url button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--edge) 40%, transparent); }
/* toolbar/freebar fixed; the table below fills + owns the scroll */
.tor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.tor-tb-left, .tor-tb-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tor-strategy { display: flex; align-items: center; gap: 7px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); }
.tor-strategy select { font: inherit; font-size: 11px; text-transform: none; letter-spacing: normal; background: var(--bg); color: var(--ink); border: 1px solid var(--edge); padding: 5px 7px; cursor: pointer; }
.tor-strategy select:focus { outline: none; border-color: color-mix(in srgb, var(--edge) 40%, transparent); }
.tor-note { font-size: 10px; color: var(--ink-5); min-height: 12px; }
.tor-free { display: flex; align-items: center; gap: 10px; padding: 8px 2px 12px; }
.tor-free-bar { flex: 1; height: 6px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.tor-free-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--edge), var(--ink)); }
.tor-free.bad .tor-free-bar > span, .tor-free.crit .tor-free-bar > span { background: linear-gradient(90deg, #a8493d, var(--err)); box-shadow: 0 0 8px color-mix(in srgb, var(--err) 40%, transparent); }
.tor-free-label { font-size: 10px; color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tor-free.bad .tor-free-label, .tor-free.crit .tor-free-label { color: var(--err); }
.tor-settings { padding: 4px 2px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.tor-set-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tor-set-row label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
.tor-set-row input[type="number"] { width: 56px; font: inherit; font-size: 11px; background: var(--bg); border: 1px solid var(--edge); color: var(--ink); padding: 4px 6px; }
.tor-set-cats input[type="text"] { width: 260px; font: inherit; font-size: 11px; background: var(--bg); border: 1px solid var(--edge); color: var(--ink); padding: 4px 7px; }
.tor-set-row input:focus { outline: none; border-color: color-mix(in srgb, var(--edge) 40%, transparent); }
.tor-set-chk { cursor: pointer; }
.tor-table { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tor-row { display: grid; grid-template-columns: 2fr 88px 76px 130px 90px 54px 54px 96px 64px 190px; gap: 8px; align-items: center; min-width: 980px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.tor-row:last-child { border-bottom: none; }
.tor-row.tor-head { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-5); padding-bottom: 6px; border-bottom: 1px solid var(--edge); position: sticky; top: 0; z-index: 2; background: var(--surface); }
.tor-c { min-width: 0; font-size: 11.5px; color: var(--ink-2); }
.tor-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tor-name:hover { color: var(--ink); }
/* click copies the full name; full name shows on hover via title */
.tor-prog { display: flex; align-items: center; gap: 7px; }
.tor-prog .bar { flex: 1; }
.tor-pct { font-size: 10px; color: var(--ink-4); font-variant-numeric: tabular-nums; flex: 0 0 30px; text-align: right; }
.tor-ratio, .tor-seeds, .tor-eta { font-variant-numeric: tabular-nums; }
.tor-rate { font-size: 10px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.tor-act { display: flex; gap: 4px; flex-wrap: nowrap; }
.tor-ibtn { font: inherit; font-size: 11px; line-height: 1; color: var(--ink-4); background: none; border: 1px solid var(--edge); width: 22px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .12s; padding: 0; }
.tor-ibtn:hover:not(:disabled) { color: var(--ink); border-color: color-mix(in srgb, var(--edge) 40%, transparent); }
.tor-ibtn.tor-danger:hover { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.tor-ibtn:disabled { opacity: .4; cursor: default; }
.tor-confirm { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-2); background: color-mix(in srgb, var(--err) 8%, transparent); border: 1px solid color-mix(in srgb, var(--err) 30%, transparent); padding: 7px 10px; margin: 2px 0 6px; min-width: 980px; }
.tor-confirm b { color: var(--ink); font-weight: 600; }
.tor-confirm span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tor-cbtn { font: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 9px; border: 1px solid var(--edge); background: var(--bg); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.tor-cbtn:hover { border-color: var(--ink-5); color: var(--ink); }
.tor-cbtn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.tor-cbtn.danger:hover { background: color-mix(in srgb, var(--err) 12%, transparent); }
.tor-cbtn.ghost { background: none; }
/* Console tabs (Torrents | Activity | Queue) */
.tor-tabs { display: flex; gap: 6px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.tor-tab { font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 14px; border: 1px solid var(--edge); background: var(--bg); color: var(--ink-4); cursor: pointer; transition: .12s; }
.tor-tab:hover { color: var(--ink); border-color: var(--ink-5); }
.tor-pane { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Activity feed (reuses .hrow/.hist-* look from the History modal) */
/* Activity feed: one dense line per grab — app · title (grows) · quality+formats · time.
padding-right clears the scrollbar so the time isn't sitting under it. */
.act-row { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 2px; border-bottom: 1px solid var(--line); }
.act-row:last-child { border-bottom: none; }
.act-app { flex: 0 0 auto; }
.act-title { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-qual { flex: 0 0 auto; max-width: 45%; font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-time { flex: 0 0 56px; text-align: right; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.badge.act-radarr { color: var(--ink); border-color: color-mix(in srgb, var(--edge) 30%, transparent); }
.badge.act-sonarr { color: var(--s2); border-color: color-mix(in srgb, var(--s2) 30%, transparent); }
.badge.act-lidarr { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
/* Queue tab: two zones — Downloading zone + Needs-attention cards */
.queue-err { font-size: 10.5px; color: var(--err); padding: 0 2px 4px; margin-top: -4px; }
.q-zone { margin-bottom: 16px; }
.q-zone:last-child { margin-bottom: 0; }
.q-zone-head { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-5); padding: 2px 2px 6px; border-bottom: 1px solid var(--edge); margin-bottom: 6px; }
.q-dl-item { padding: 7px 2px; border-bottom: 1px solid var(--line); }
.q-dl-item:last-child { border-bottom: none; }
.q-dl-row { display: grid; grid-template-columns: 72px minmax(0, 2fr) 160px 90px 90px 76px; gap: 10px; align-items: center; }
.q-dl-item .queue-err { margin: 3px 0 0; padding: 0 2px; }
.q-c { min-width: 0; font-size: 11.5px; color: var(--ink-2); }
.q-title { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-prog { display: flex; align-items: center; gap: 7px; }
.q-act { display: flex; gap: 4px; justify-content: flex-end; }
.q-card { background: var(--bg); border: 1px solid var(--line); padding: 9px 11px; margin-bottom: 8px; }
.q-card:last-child { margin-bottom: 0; }
.q-card-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); margin-bottom: 5px; }
.q-card-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Inside a card the compare block is flush — the card already provides the frame. */
.q-card .qcmp { background: none; border: none; padding: 0; margin-top: 4px; }
.q-card .queue-err { margin: 0 0 4px; }
/* Import diagnostics card (queued vs library) */
.qcmp { background: var(--bg); border: 1px solid var(--line); padding: 8px 10px; margin-top: 2px; }
.qcmp-load { color: var(--ink-5); font-size: 10.5px; font-style: italic; }
.qcmp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qcmp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--ink-2); }
.qcmp-side b { color: var(--ink); font-weight: 600; }
.qcmp-arrow { color: var(--ink-5); }
.qcmp-acts { display: flex; align-items: center; gap: 6px; }
.qcmp-btn { font: inherit; font-size: 10.5px; color: var(--ink); background: none; border: 1px solid color-mix(in srgb, var(--edge) 40%, transparent); padding: 3px 9px; cursor: pointer; transition: .12s; white-space: nowrap; }
.qcmp-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--edge) 10%, transparent); }
.qcmp-btn:disabled { opacity: .4; cursor: default; }
.qcmp-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 50%, transparent); }
.qcmp-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 12%, transparent); }
.qcmp-warn { font-size: 10px; color: var(--err); }
.qcmp-exp { font: inherit; font-size: 10.5px; color: var(--ink-4); background: none; border: none; cursor: pointer; padding: 3px 4px; }
.qcmp-exp:hover { color: var(--ink); }
.qcmp-primary { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.qcmp-btn.qcmp-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--edge) 16%, transparent); }
a.qcmp-btn { text-decoration: none; display: inline-flex; align-items: center; }
/* Action row lives in the expanded area, under the tracks — wraps left-aligned, consistent at any width. */
.qcmp-actions { flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.qcmp-discard { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.qcmp-discard:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 12%, transparent); }
/* Whole stuck card is click-to-expand; buttons/links + expanded content keep the default cursor. */
.q-card { cursor: pointer; }
.q-card .qtk, .q-card .qcmp-actions { cursor: default; }
.qcmp-chev { color: var(--ink-4); font-size: 11px; padding-left: 8px; }
/* Cue-rip auto-scan badge + report — sits above the normal compare card. */
.qcue { margin-bottom: 6px; }
.qcue-badge { display: inline-block; font-size: 10px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--edge) 10%, transparent); border: 1px solid color-mix(in srgb, var(--edge) 40%, transparent); padding: 2px 7px; }
.qcue-report { font-size: 10.5px; color: var(--ink-4); margin-top: 3px; }
.qcue-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.qcue-rel { flex: 1 1 220px; max-width: 360px; font: inherit; font-size: 10.5px; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); padding: 4px 7px; cursor: pointer; }
.qcue-rel:focus { outline: none; border-color: var(--ink); }
.qcue-controls { margin: 4px 0 10px; }
.qcue-working { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--ink); }
.qcue-spin { flex: none; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--ink); animation: qspin 0.8s linear infinite; }
.qerr-more { font: inherit; font-size: 9.5px; color: var(--ink-4); background: none; border: none; cursor: pointer; padding: 0 3px; }
.qerr-more:hover { color: var(--ink); }
.qtk-empty { color: var(--ink-5); font-size: 10.5px; font-style: italic; padding: 4px 0; }
.vbadge { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 2px 6px; white-space: nowrap; }
.vb-up { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.vb-down { color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); }
.vb-mix { color: var(--ink); background: color-mix(in srgb, var(--edge) 13%, transparent); }
.vb-side { color: var(--ink-4); background: rgba(141,136,111,0.14); }
.vb-new { color: var(--s2); background: color-mix(in srgb, var(--s2) 14%, transparent); }
.qtk { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.qtk-r { display: grid; grid-template-columns: 26px 1fr 96px 96px; gap: 6px; align-items: center; font-size: 10.5px; color: var(--ink-2); padding: 2px 0; }
.qtk-2col .qtk-r { grid-template-columns: 1fr 60px; }
.qtk-h { font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-5); border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 2px; }
.qtk-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.qtk-diff { background: color-mix(in srgb, var(--err) 7%, transparent); }
.tk-on { color: var(--ok); font-variant-numeric: tabular-nums; }
.tk-off { color: var(--ink-5); }
/* Movies tab (Radarr requested-quality view) */
.mov-row { display: grid; grid-template-columns: 2fr 190px 150px 130px; gap: 8px; align-items: center; min-width: 640px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.mov-row:last-child { border-bottom: none; }
.mov-row.mov-head { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-5); padding-bottom: 6px; border-bottom: 1px solid var(--edge); position: sticky; top: 0; z-index: 2; background: var(--surface); }
.mov-c { min-width: 0; font-size: 11.5px; color: var(--ink-2); }
.mov-title { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-sel { font: inherit; font-size: 11px; width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--edge); padding: 4px 6px; cursor: pointer; }
.mov-sel:focus { outline: none; border-color: color-mix(in srgb, var(--edge) 40%, transparent); }
/* Rules tab (music vinyl/CD source preference) */
.rule-block { padding: 4px 2px; }
.rule-h { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); font-weight: 600; margin-bottom: 10px; }
.rule-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.rule-opt { font: inherit; display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 150px; flex: 1 1 150px; padding: 10px 12px; background: var(--bg); color: var(--ink-4); border: 1px solid var(--edge); cursor: pointer; transition: .12s; }
.rule-opt:hover { color: var(--ink); border-color: var(--ink-5); }
.rule-opt b { font-size: 11.5px; color: inherit; }
.rule-opt span { font-size: 10px; color: var(--ink-5); }
.rule-note { font-size: 10px; color: var(--ink-5); margin-top: 10px; }
.wrap { height: auto; }
/* Hovered readings are NOT the live value, so they must not read like one: dimmed, with the
x-axis right label swapped from "now" to the hovered instant. */
.p-read.past b { color:var(--ink-3) }
.p-read.past s { color:var(--ink-5) }
/* The right-hand time oscillates and its digits change width. Reserve the space and pin it
right so the label stops shifting under the cursor. */
.p-xaxis [data-xnow] { min-width:62px; text-align:right; font-variant-numeric:tabular-nums }
/* Same for the header clock: uptime ticks every second, and without a reserved box every
tick nudges everything after it. */
.p-hmeta #uptime { min-width:150px; text-align:right }
.p-hmeta #freshness { min-width:78px; text-align:right }
/* ── One hover language ──────────────────────────────────────────────────────
Three eras of CSS meet on this page and each hovered differently: the new
components fade colour over 120ms, while the ported legacy controls variously
shifted a border, tinted a background, or ran a blanket `transition:.12s` over
every property. Rows now share one treatment and controls share another, at the
same duration and easing, so hovering anything feels like the same gesture.
Section titles keep their own treatment deliberately — they are the one place a
distinct affordance carries meaning (they open things). */
/* Hover marks INTERACTIVE things only. History, issue, activity and movie rows are read,
not clicked — highlighting them promises a click that does not exist. The issue LABEL is
a link and keeps its own hover; the row around it does not. */
.p-table tbody tr:hover td, .lib:hover, .ptile:hover {
background:var(--line-2);
}
.lib, .ptile, .p-table tbody tr td {
transition:background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
/* Controls: colour to --ink, border to --edge. No background tint, no size change. */
.iconbtn:hover:not(:disabled), .expand:hover, .tor-tab:hover,
.tor-ibtn:hover:not(:disabled), .tor-cbtn:hover:not(:disabled),
.qcmp-btn:hover:not(:disabled), .ctl-btn:hover:not(:disabled),
.cm-pg:hover:not(:disabled), .pe-opt:hover, .pe-back:hover,
.pe-url button:hover, .mclose:hover, .rbtn:hover:not(:disabled), .qerr-more:hover {
color:var(--ink); border-color:var(--edge); background:none;
}
.iconbtn, .expand, .tor-tab, .tor-ibtn, .tor-cbtn, .qcmp-btn, .ctl-btn,
.cm-pg, .pe-opt, .pe-back, .pe-url button, .mclose, .rbtn, .qerr-more {
transition:color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
/* Destructive keeps its own colour but the same shape of gesture. */
.tor-ibtn.tor-danger:hover, .tor-cbtn.danger:hover:not(:disabled),
.qcmp-danger:hover:not(:disabled), .rbtn.no:hover, .p-btn-2.del:hover, .qcmp-discard:hover {
color:var(--err); border-color:color-mix(in srgb, var(--err) 45%, transparent); background:none;
}
/* Watch/Listen split for the rail history — small, quiet, and the active one is simply ink. */
.p-hmode { display:flex; gap:9px; margin-left:auto; margin-right:10px }
.p-hmode button { background:none; border:0; font-family:inherit; font-size:11px;
letter-spacing:.06em; color:var(--ink-5); cursor:pointer; padding:0;
transition:color 120ms ease }
.p-hmode button.on { color:var(--ink-2) }
.p-hmode button:hover { color:var(--ink) }
/* Reliability now sits inside the Issues section rather than in its own block at the far end
of the rail — same question, one place. Quiet, because it is context for the rows above,
not another row. */
.p-relnote { font-style:normal; color:var(--ink-5); margin-right:9px; font-size:11px }
/* Track rows carry their artist under the title; without it "Daydream" is unidentifiable. */
.p-hrow span b { font-weight:400; color:var(--ink-4) }
.p-hrow em.warn { color:var(--warn) } .p-hrow em.err { color:var(--err) }
/* Expanded chart: pick a window, then walk it backwards a window at a time. `later` is
disabled at the live edge, which is also where a range change returns you. */
.p-cm-top { display:flex; justify-content:space-between; align-items:center;
padding:0 0 12px; border-bottom:1px solid var(--line); margin-bottom:14px }
.p-cm-nav { display:flex; align-items:center; gap:10px }
.p-cm-nav .p-meta { min-width:120px; text-align:center; font-variant-numeric:tabular-nums }
.p-cm-nav button:disabled { color:var(--ink-5); cursor:default }
/* Elapsed / remaining. Tabular figures so the digits do not jiggle as the ticker advances
them twice a second — the whole point of the smoothing is that it reads as motion, not
as text being rewritten. */
.p-np .ft .el, .p-np .ft .rem { font-variant-numeric:tabular-nums }
/* Ultrawide: one very wide column wastes the width twice over — the charts stretch to a shape
nobody reads and the page still scrolls. Above 2000px the main area flows into two columns,
which on a 3440 screen puts everything on screen at once with no scroll at all.
Multi-column rather than a grid: a grid couples the row heights of the two sides, so a tall
torrents table would drag a gap under the chart beside it. break-inside keeps a chart or a
table from being split down the middle. */
@media (min-width: 2000px) {
/* Explicit placement rather than auto-flow: telemetry and what is playing stack down the
left, and Torrents takes a column of its own spanning their full height. */
/* Five content rows plus a spare 1fr: the left column keeps its natural heights at the top,
and the spare row absorbs the leftover viewport so torrents can span the full height
rather than stopping level with the telemetry and leaving the bottom empty. On a shorter
ultrawide the spare row collapses to nothing and the page scrolls as before. */
.p-main { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(5, auto) 1fr;
gap:22px 26px; align-content:start }
/* With nothing playing the spare row moves from the bottom of the column up to Now Playing,
so the placeholder absorbs the slack and the column ends level with torrents. While
something is playing the section keeps its natural height and the slack stays at the
bottom, as it is at every other width. */
/* minmax, not a bare 1fr: on a viewport too short to have slack the row must still not
shrink below the section's own content, or Now Playing disappears entirely. */
.p-main:has(#now-playing.idle) { grid-template-rows:minmax(min-content, 1fr) repeat(4, auto) }
#now-playing.idle, #now-playing.idle > .p-sec { display:flex; flex-direction:column }
#now-playing.idle > .p-sec { flex:1; margin-bottom:0 }
/* contain:size (implied by container-type) is what makes this safe: the placeholder is
sized as if empty, so it can never add to the section's min-content and never takes
height from anything else. It gets the slack that is there and nothing more. */
.p-ghost { display:block; flex:1; min-height:0; container-type:size }
/* Below a session card's own height there is no room to draw one, so nothing is drawn at
all — the tint lives on the card, not the container, so a viewport with only a sliver of
slack gets no stray band rather than an empty tinted strip. */
.np-ghost { display:none }
@container (min-height: 152px) {
/* align-items:flex-start, or stretch drags the poster outline down the whole stage. The
column takes the poster's height so the progress rule lands on its lower edge, exactly
where a real session's does. */
.np-ghost { display:flex; align-items:flex-start; gap:15px; height:100%;
padding:12px 14px 0; background:var(--surface) }
}
/* An outline of the card that will replace it: poster, title, subtitle, progress. It is a
hint that the section is idle, not a diagram of one, so it is held at half strength and
reads as absence rather than as a wireframe.
Half opacity on --line, rather than full strength on --line-2: on dark that fainter token
sits almost exactly on the surface colour and the outline vanished, while on light it
stayed plainly visible. Halving one shared token lands both themes at the same weight. */
.np-ghost > * { opacity:.5 }
.np-ghost .art { width:86px; aspect-ratio:2/3; border:1px solid var(--line) }
.np-ghost .col { flex:1; min-width:0; height:129px; display:flex; flex-direction:column; padding-top:4px }
.np-ghost i { height:1px; background:var(--line) }
.np-ghost .l1 { width:38% }
.np-ghost .l2 { width:22%; margin-top:13px }
.np-ghost b { height:2px; background:var(--line); margin-top:auto }
.p-main > * { margin-top:0 }
#now-playing, #system, #chart-diskio, #chart-network, #p-temps { grid-column:1 }
/* The left column sets the height; torrents scrolls its own table rather than the page, so
the whole list is reachable without a full-page scrollbar.
A spanning grid item still grows the rows it spans, so an in-flow torrents section would
stretch the page to fit thirty rows instead of scrolling. Taking the section out of flow
drops its contribution to row sizing to zero: the left column alone sets the height, and
inset:0 fills whatever that turns out to be. */
#torrents { grid-column:2; grid-row:1 / -1; position:relative; min-height:0 }
#torrents > .p-sec { position:absolute; inset:0; display:flex; flex-direction:column; margin-bottom:0 }
#torrents .p-tscroll { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-gutter:stable }
/* Sections are transparent on the page ground, so the sticky header borrows it. */
#torrents .p-tscroll thead th { position:sticky; top:0; z-index:1; background:var(--bg) }
/* Five stacked sections in one column made the plots taller than they need to be to read.
The viewBox is unchanged and every stroke is non-scaling, so this compresses the plot
without thinning the spines. */
.p-plot { height:112px }
.p-plot.short { height:82px }
}