/* Marvin: shared theme for /configure and /admin */

:root {
    color-scheme: light dark;
    --bg: #f5f6fa;
    --surface: #ffffff;
    --surface-2: #f0f2f8;
    --line: #e1e5ee;
    --line-strong: #c9d0de;
    --text: #111827;
    --muted: #5c6578;
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-soft: #eef0ff;
    --link: #4f46e5;
    --ok: #15803d;
    --ok-soft: #e7f6ec;
    --warn: #b45309;
    --warn-soft: #fff4e2;
    --danger: #dc2626;
    --danger-soft: #fdeaea;
    --movie: #0284c7;
    --series: #7c3aed;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 4px 16px rgb(15 23 42 / 0.04);
    --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0f1c;
        --surface: #131a2c;
        --surface-2: #1a2238;
        --line: #232d47;
        --line-strong: #33405f;
        --text: #e7ebf5;
        --muted: #97a1b8;
        /* White button text needs 4.5:1: #6366f1 gave 4.46, and a lighter hover even less. */
        --primary: #5b5ef0;
        --primary-hover: #4f46e5;
        --primary-soft: rgb(99 102 241 / 0.16);
        --link: #a5b4fc;
        --ok: #4ade80;
        --ok-soft: rgb(74 222 128 / 0.12);
        --warn: #fbbf24;
        --warn-soft: rgb(251 191 36 / 0.12);
        --danger: #f87171;
        --danger-soft: rgb(248 113 113 / 0.12);
        --movie: #38bdf8;
        --series: #a78bfa;
        --shadow: 0 1px 2px rgb(0 0 0 / 0.3);
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 14px/1.5 var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
svg { flex-shrink: 0; }

/* --- Header --- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-inner { max-width: 880px; margin: 0 auto; padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 12px; }
.top-wide .top-inner { max-width: 1120px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; color: var(--text); }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand small { display: block; font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.spacer { flex: 1; }

/* --- Page --- */
.page { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.25rem 7rem; }
.page-wide { max-width: 1120px; padding-bottom: 3rem; }
/* Kept out of sight, not out of the layout, until the script has drawn it: nothing jumps as the data arrives. */
main[aria-busy="true"] { visibility: hidden; }
.lead { color: var(--muted); margin-bottom: 1.25rem; max-width: 62ch; }

/* --- Numbered steps --- */
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 1rem; }
.step { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem 1.25rem; scroll-margin-top: 80px; }
.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 0.2rem; flex-wrap: wrap; }
.step-head h2 { font-size: 1.02rem; font-weight: 750; display: flex; align-items: center; gap: 10px; }
.step-head h2::before { content: counter(step); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.step.done .step-head h2::before { content: '✓'; background: var(--ok); color: #fff; }
.step-hint { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.9rem; max-width: 68ch; }
.step.attention { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 600 0.84rem var(--font); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.btn:hover:not(:disabled) { background: var(--surface-2); text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.danger:hover:not(:disabled) { background: var(--danger-soft); }
.btn.danger.solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 0.78rem; }
.btn.lg { height: 42px; padding: 0 20px; font-size: 0.9rem; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn[aria-expanded="true"] { background: var(--primary-soft); color: var(--link); }
.icon-btn .chev { transition: transform 0.15s; }
.icon-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.small-link { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }

/* --- Form fields --- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.label { font-size: 0.78rem; font-weight: 650; color: var(--muted); }
.input, .select { width: 100%; height: 38px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 0.88rem var(--font); }
.input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238891a5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.secret { position: relative; flex: 1; min-width: 200px; }
.secret .input { padding-right: 40px; font-family: var(--mono); font-size: 0.82rem; }
.secret .icon-btn { position: absolute; right: 3px; top: 3px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.spaced { margin-top: 12px; }
.select.compact { width: auto; height: 32px; padding-left: 10px; font-size: 0.8rem; font-weight: 650; }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.84rem; user-select: none; }
.switch.spaced { display: flex; }
.switch input { appearance: none; flex: none; width: 34px; height: 20px; border-radius: 20px; background: var(--line-strong); position: relative; cursor: pointer; transition: background 0.15s; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); transition: transform 0.15s; }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(14px); }

/* --- Status text --- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); min-width: 0; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.status.ok { color: var(--ok); }
.status.ok::before { background: var(--ok); }
.status.bad { color: var(--danger); }
.status.bad::before { background: var(--danger); }
.status.busy::before { background: var(--warn); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }

/* --- Reorderable lists --- */
.list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.15s; }
.item:hover { border-color: var(--line-strong); }
.item.linked { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.item-main { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 4px; min-height: 58px; }
.item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.item-title { display: flex; align-items: center; gap: 8px; font-weight: 650; min-width: 0; }
.item-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.item-extra { padding: 0 12px 12px 46px; display: flex; flex-direction: column; gap: 10px; }
.grip { width: 26px; height: 32px; display: grid; place-items: center; border: none; background: none; color: var(--line-strong); cursor: grab; border-radius: 6px; flex-shrink: 0; }
.grip:hover, .grip:focus-visible { color: var(--muted); background: var(--surface-2); }
.avatar { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; background: var(--surface-2); color: var(--muted); flex-shrink: 0; }
.item.linked .avatar { background: var(--ok); color: #fff; }
.item.movie .avatar { background: color-mix(in srgb, var(--movie) 14%, transparent); color: var(--movie); }
.item.series .avatar { background: color-mix(in srgb, var(--series) 14%, transparent); color: var(--series); }
.sortable-ghost { opacity: 0.35; }
.sortable-drag { box-shadow: 0 12px 30px rgb(0 0 0 / 0.2); }

.name-input { width: 100%; border: none; border-bottom: 1px dashed transparent; background: none; color: var(--text); font: 650 0.92rem var(--font); padding: 1px 0; text-overflow: ellipsis; }
.name-input:hover { border-bottom-color: var(--line-strong); }
.name-input:focus { outline: none; border-bottom-color: var(--primary); }
.name-input:placeholder-shown { border-bottom-color: var(--warn); }

.toggles { display: flex; gap: 4px; flex-wrap: wrap; }
.toggle { height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; color: var(--muted); font: 600 0.72rem var(--font); cursor: pointer; }
.toggle[aria-pressed="true"] { background: var(--primary-soft); border-color: transparent; color: var(--link); }

.toolbar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-items { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgb(0 0 0 / 0.15); padding: 5px; display: flex; flex-direction: column; }
.menu-items button { text-align: left; padding: 8px 10px; border: none; background: none; border-radius: 6px; color: var(--text); font: 0.84rem var(--font); cursor: pointer; }
.menu-items button:hover { background: var(--surface-2); }
.menu-items button.danger { color: var(--danger); }
.menu-items hr { border: none; border-top: 1px solid var(--line); margin: 4px 0; }

.empty { text-align: center; padding: 1.75rem; color: var(--muted); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); }

/* --- Bottom dock --- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgb(0 0 0 / 0.06); }
.dock-inner { max-width: 880px; margin: 0 auto; padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dock-status { flex: 1; min-width: 200px; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dock-status button { border: none; cursor: pointer; font-size: 0.76rem; }
.dock-status button:hover { filter: brightness(1.1); text-decoration: underline; }
.dock-status.ready { color: var(--ok); }

/* --- Dialogs --- */
dialog { margin: auto; border: none; border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.4rem; width: min(420px, calc(100vw - 2rem)); box-shadow: 0 25px 60px rgb(0 0 0 / 0.35); }
dialog::backdrop { background: rgb(8 12 24 / 0.55); }
dialog h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
dialog p { color: var(--muted); font-size: 0.86rem; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.2rem; }
.dialog-center { text-align: center; }
.dialog-center .dialog-actions { justify-content: center; }
.qr { width: 200px; height: 200px; margin: 1rem auto; background: #fff; border-radius: 12px; padding: 8px; }
.qr svg { width: 100%; height: 100%; display: block; }
.code { display: block; width: 100%; font: 800 1.6rem var(--mono); letter-spacing: 0.12em; color: inherit; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 0.5rem; margin-top: 0.5rem; user-select: all; cursor: copy; }
.code:hover { border-color: var(--primary); }
.countdown { font-size: 0.78rem; color: var(--muted); margin-top: 0.6rem; }

/* --- Toast --- */
.toast { position: fixed; left: 50%; bottom: 88px; z-index: 50; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: 0.2s; display: flex; align-items: center; gap: 12px; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; box-shadow: 0 12px 30px rgb(0 0 0 / 0.25); max-width: calc(100vw - 2rem); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.error { background: var(--danger); color: #fff; }
.toast button { border: none; background: none; color: inherit; font: 800 0.8rem var(--font); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; opacity: 0.85; }

/* --- Admin --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.wide-first { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; min-width: 0; }
.card h2 { font-size: 0.74rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 8px; }
.kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 7px 16px; font-size: 0.84rem; align-items: baseline; }
.kv dt { color: var(--muted); }
.kv dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv.details { grid-template-columns: 150px minmax(0, 1fr); }
.kv.details dd { text-align: left; font-weight: 500; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1rem; }
.note { font-size: 0.8rem; color: var(--muted); margin-top: 0.8rem; }
.note.first { margin-top: 0; }
.note.warn { color: var(--warn); }
.alert { border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); padding: 0.7rem 1rem; font-size: 0.84rem; overflow-wrap: anywhere; }
.log { margin-top: 0.9rem; background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; font: 0.74rem var(--mono); max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.log:empty { display: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.problem { font-size: 0.78rem; color: var(--danger); background: var(--danger-soft); border-radius: 6px; padding: 0.35rem 0.6rem; margin-top: 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The overview: a tile per part of the server, which opens it below. */
.overview { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.tile { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0.8rem 0.9rem 0.85rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; }
.tile:hover { border-color: var(--line-strong); text-decoration: none; }
.tile::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--line-strong); }
.tile.ok::before { background: var(--ok); }
.tile.warn::before { background: var(--warn); }
.tile.bad::before { background: var(--danger); }
.tile[aria-selected="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.tile-label { font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tile strong { font-size: 1.02rem; font-weight: 750; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tile small { font-size: 0.76rem; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 2.7em; }
.tile.warn small { color: var(--warn); }
.tile.bad small { color: var(--danger); }

/* What fails now, sources and hosters alike, above every part: each line opens its row. */
.incidents { margin-bottom: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 0.6rem 0.9rem; }
.incidents h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 0.25rem; font-size: 0.7rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--danger); }
.incidents ul { list-style: none; }
.incidents li { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); align-items: baseline; gap: 2px 14px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 0.82rem; }
.incidents li:first-child { border-top: none; }
.incidents a { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--text); }
.incidents a b { font-weight: 700; }
.incidents a span { font-size: 0.76rem; color: var(--danger); white-space: nowrap; }
.incidents small { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A row's last 30 days, a square each (green: up all day; amber: most of it; red: less; grey: not watched yet). */
.state-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.uptime { display: flex; gap: 1px; width: 100%; max-width: 110px; height: 9px; }
.uptime i { flex: 1; min-width: 0; border-radius: 1.5px; background: var(--line); }
.uptime i.ok { background: color-mix(in srgb, var(--ok) 80%, transparent); }
.uptime i.warn { background: var(--warn); }
.uptime i.bad { background: var(--danger); }
.uptime-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.details .uptime { max-width: 260px; height: 14px; gap: 2px; }
.details .lines { list-style: none; display: flex; flex-direction: column; gap: 2px; }

/* Each part. */
.panel { display: flex; flex-direction: column; gap: 1rem; }
.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.panel-head h2 { font-size: 1.05rem; font-weight: 750; }
.panel-head .note { margin-top: 0.15rem; }
.panel > .log { margin-top: 0; }
.help { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.82rem; color: var(--muted); }
.help summary { cursor: pointer; font-weight: 650; color: var(--text); }
.help ul { margin: 0.6rem 0 0.2rem 1.1rem; display: flex; flex-direction: column; gap: 6px; }
.help b { color: var(--text); }

/* The solvers: a line each, its name, how it does, and where it is. */
.solvers { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: center; gap: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.65rem 0.9rem; font-size: 0.8rem; }
.solver-name { font-weight: 650; }
.solvers .badge { justify-self: start; }
.solver-text { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Every link kept (Catálogo): its search with its button, its filters below, a page of its rows, and the way to the next page. */
.kept { display: flex; flex-direction: column; gap: 0.75rem; }
.kept-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kept-filters .input { flex: 1 1 260px; min-width: 0; }
.kept-selects { display: flex; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.links-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.links-found .table td { white-space: nowrap; text-overflow: ellipsis; }
.links-found .table td.actions { overflow: visible; text-align: right; }
.links-found .table td.actions .btn + .btn { margin-left: 6px; }
.links-found .w-source { width: 18%; }
.links-found .w-size { width: 90px; }
.links-found .w-kind { width: 170px; }
.links-found .w-buttons { width: 180px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0.6rem 1.1rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }

/* Tables: fixed columns, each cell one or two lines cut to fit (the whole text on hover). */
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.82rem; }
.table th { text-align: left; font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow: hidden; }
.table tbody:last-child tr:last-child td, .table tbody tr:last-child td { border-bottom: none; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-card .table th { padding-top: 12px; }
.table-card .table th:first-child, .table-card .table td:first-child { padding-left: 1.1rem; }
.table-card .table th:last-child, .table-card .table td:last-child { padding-right: 1.1rem; }
.cell { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cell b, .cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell b { font-weight: 650; }
.cell small { font-size: 0.74rem; color: var(--muted); }
.card .table td:first-child, .card .table th:first-child { padding-left: 0; }
.card .table td:last-child, .card .table th:last-child { padding-right: 0; }

/* The sources: torrents and direct links apart, a row each, with its error under it and its details when opened. */
.source-groups { display: flex; flex-direction: column; gap: 1.1rem; }
.source-group { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.group-head { display: flex; align-items: baseline; gap: 0.35rem 0.75rem; flex-wrap: wrap; padding: 0 0.15rem; }
.group-head h3 { font-size: 0.92rem; font-weight: 720; }
.group-head .note { min-width: 0; }
.sources .w-state { width: 130px; }
.sources .w-links { width: 128px; }
.sources .w-news { width: 160px; }
.sources .w-address { width: 160px; }
.sources .w-actions { width: 248px; }
.sources tbody.source { border-bottom: 1px solid var(--line); }
.sources tbody.source:last-child { border-bottom: none; }
.sources tbody.source td { border-bottom: none; }
.sources tbody.source.open { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.sources .state .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.row-actions .btn { min-width: 84px; }
/* Holds the place of a button a row does not have, so the others line up. */
.row-actions .slot { visibility: hidden; }
.sources .problem-row td, .sources .details-row td { padding-top: 0; }
.sources .problem-row .problem { margin-top: 0; }
.sources .details-row .kv { font-size: 0.8rem; padding: 0.2rem 0 0.4rem; }
/* The hosters the sites use that nothing here plays. */
.unsupported .w-sites { width: 24%; }
.unsupported .w-links { width: 120px; }
.unsupported .w-news { width: 120px; }
.unsupported .w-reason { width: 22%; }
.unsupported .w-button { width: 120px; }
.help .table-card { margin-top: 0.6rem; }

/* The log. */
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segmented button { border: none; background: var(--surface); color: var(--muted); font: 600 0.78rem var(--font); padding: 0 12px; height: 32px; cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--line-strong); }
.segmented button[aria-pressed="true"] { background: var(--primary-soft); color: var(--link); }
.logview { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.6rem 0; height: min(68vh, 640px); overflow: auto; font: 0.76rem/1.5 var(--mono); }
.logview .line { display: grid; grid-template-columns: 74px 52px minmax(0, 1fr); gap: 10px; padding: 1px 1rem; }
.logview .line:hover { background: var(--surface-2); }
.logview time { color: var(--muted); }
.logview .lvl { font-weight: 700; color: var(--muted); }
.logview .msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.logview .ok .lvl { color: var(--ok); }
.logview .warn .lvl, .logview .warn .msg { color: var(--warn); }
.logview .error .lvl, .logview .error .msg { color: var(--danger); }
.logview .debug .msg, .logview .trace .msg { color: var(--muted); }
.logview .note { padding: 0 1rem; }
.empty-note { padding: 1rem 1.1rem; margin: 0; }
.spin { width: 12px; height: 12px; border: 2px solid var(--line-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
    .cards.wide-first { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1180px) {
    .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .cards.two { grid-template-columns: minmax(0, 1fr); }
    /* A source becomes a card: its name and state on top, its facts in two columns, its buttons below. */
    .sources colgroup, .sources thead { display: none; }
    .sources, .sources tbody, .sources tr, .sources td { display: block; width: 100%; }
    .sources tbody.source > tr:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 0.9rem 1.1rem 0.5rem; }
    .sources tbody.source > tr:first-child > td { padding: 0; }
    .sources td.name { grid-column: 1 / 2; }
    .sources td.state { grid-column: 2 / 3; text-align: right; }
    .sources td.state .state-cell { align-items: flex-end; }
    .sources td.num { text-align: left; }
    .sources td[data-label]:not(.name):not(.state)::before { content: attr(data-label); display: block; font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
    .sources td.actions { grid-column: 1 / -1; }
    /* A hoster's notes (how its video comes, its last test) say what its label means: whole, with no hover to show them. */
    .hosters .cell small { white-space: normal; overflow-wrap: anywhere; }
    .row-actions { justify-content: flex-start; }
    .sources .problem-row td, .sources .details-row td { padding: 0 1.1rem 0.7rem; }
    .kv.details { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .kv.details dt { margin-top: 6px; }
}

@media (max-width: 760px) {
    .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .incidents li { grid-template-columns: minmax(0, 1fr); }
    .incidents a { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
    .incidents a span { white-space: normal; }
    .solvers { grid-template-columns: max-content minmax(0, 1fr); }
    .solver-text { grid-column: 1 / -1; white-space: normal; margin-bottom: 4px; }
    .logview .line { grid-template-columns: 64px minmax(0, 1fr); }
    .logview .lvl { display: none; }
}

@media (max-width: 620px) {
    /* A small table's row becomes a block on a phone: its name on top, each figure under its label, two to a line. */
    .table.stack thead { display: none; }
    .table.stack, .table.stack tbody { display: block; }
    .table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
    .table.stack tbody tr:last-child { border-bottom: none; }
    .table.stack td { padding: 0; border: none; text-align: left; }
    .table.stack td:first-child { grid-column: 1 / -1; }
    .table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
    .table-card .table.stack tr { padding: 10px 1.1rem; }
    .table-card .table.stack td:first-child, .table-card .table.stack td:last-child { padding: 0; }
    /* No hover on a phone to show what an ellipsis cuts: a figure and its note wrap instead. */
    .table.stack .cell b, .table.stack .cell small { white-space: normal; overflow-wrap: anywhere; }
    .brand small { display: none; }
    .top-wide .top-inner { flex-wrap: wrap; row-gap: 8px; }
    .top-wide .chips { order: 3; width: 100%; }
    .item-main { flex-wrap: wrap; }
    #providers .item-main { display: grid; grid-template-columns: 26px 34px minmax(0, 1fr); }
    #providers .item-actions { grid-column: 2 / -1; justify-self: end; }
    #providers .item-title { flex-wrap: wrap; gap: 4px 8px; }
    #providers .item-title > span:first-child { white-space: normal; overflow: visible; }
    #providers .badge { white-space: normal; }
    #providers .status { overflow-wrap: anywhere; }
    .item-extra { padding-left: 12px; }
    .toggles { order: 5; width: 100%; padding-left: 34px; }
    /* A catalog's name gets the whole first line, its switches and buttons the second, and its summary wraps. */
    #catalogs .item-main { display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) auto; }
    #catalogs .item-body { grid-column: 3 / -1; grid-row: 1; }
    #catalogs .toggles { grid-column: 1 / 4; grid-row: 2; width: auto; padding-left: 0; }
    #catalogs .item-actions { grid-column: 4; grid-row: 2; }
    #catalogs .item-sub { white-space: normal; }
    .dock-status { flex-basis: 100%; }
    .dock .btn { flex: 1; }
}