1@font-face { font-family: "Shoulders"; src: url(fonts/big-shoulders-display-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }2@font-face { font-family: "Shoulders"; src: url(fonts/big-shoulders-display-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }3@font-face { font-family: "Schibsted"; src: url(fonts/schibsted-grotesk-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }4@font-face { font-family: "Schibsted"; src: url(fonts/schibsted-grotesk-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }5@font-face { font-family: "Schibsted"; src: url(fonts/schibsted-grotesk-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }6@font-face { font-family: "Plex Mono"; src: url(fonts/ibm-plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }7@font-face { font-family: "Plex Mono"; src: url(fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }89/* Tokens borrowed from the desktop app (frontend/dist/style.css). */10:root {11 --ink: #07080a;12 --ink-2: #0d0f12;13 --ink-3: #15181d;14 --ink-4: #1d2128;15 --line: rgba(237, 230, 214, .08);16 --line-2: rgba(237, 230, 214, .16);17 --paper: #ede6d6;18 --muted: #908a7c;19 --faint: #5d5850;20 --amber: #ffb224;21 --amber-2: #c98714;22 --teal: #3fe0c5;23 --red: #ff5d4a;24 --f-display: "Shoulders", "Impact", sans-serif;25 --f-body: "Schibsted", "Helvetica Neue", sans-serif;26 --f-mono: "Plex Mono", "Menlo", monospace;27 --ease: cubic-bezier(.2, .8, .2, 1);28 --side-w: 300px;29 --aside-w: 300px;30 --pad: 28px;31}3233* { box-sizing: border-box; }34html, body { height: 100%; }35body {36 margin: 0;37 background: var(--ink);38 color: var(--paper);39 font: 400 14px/1.45 var(--f-body);40 -webkit-font-smoothing: antialiased;41}42button, input, select, textarea { font: inherit; color: inherit; }43button { cursor: pointer; }44button:disabled { cursor: default; }45kbd { font: 500 10px/1 var(--f-mono); padding: 3px 5px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--faint); }46code { font: 400 12px/1.5 var(--f-mono); }47[hidden] { display: none ; }48.visually-hidden { position: absolute ; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }49::selection { background: rgba(255, 178, 36, .35); }5051/* One visible focus treatment everywhere. */52:focus { outline: none; }53:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }5455.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 8px 12px; background: var(--amber); color: var(--ink); border-radius: 3px; font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }56.skip:focus { top: 12px; }5758.label { font: 500 10px/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }59.help { margin: 0; font-size: 12px; color: var(--muted); }60.mono { font-family: var(--f-mono); }6162.btn {63 border: 0; padding: 10px 16px; border-radius: 3px; background: var(--amber); color: var(--ink);64 font: 500 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;65 transition: filter .15s, opacity .15s;66}67.btn:hover:not(:disabled) { filter: brightness(1.1); }68.btn:disabled { background: var(--ink-4); color: var(--faint); box-shadow: none; }69.btn.ghost { background: none; color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }70.btn.ghost:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--paper); filter: none; }71.btn.danger { background: var(--red); color: var(--ink); }72.btn.ghost.danger { background: none; color: var(--red); box-shadow: inset 0 0 0 1px rgba(255, 93, 74, .4); }73.btn.ghost.danger:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--red); }74.btn.small { padding: 6px 10px; font-size: 10px; letter-spacing: .12em; }75.linkish { border: 0; background: none; padding: 0; color: var(--paper); border-bottom: 1px solid var(--amber-2); font: inherit; }76.linkish:hover { color: var(--amber); }7778/* ---------- Layout ---------- */79.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100vh; }80.side { display: flex; flex-direction: column; min-height: 0; background: var(--ink-2); border-right: 1px solid var(--line); }81.main {82 min-width: 0; min-height: 0; outline: none;83 background: radial-gradient(120% 80% at 70% 0%, #11141a 0%, var(--ink) 60%);84}8586.side-head { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px 14px; }87.mark { font: 800 24px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }88.side-sub { font: 500 10px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }89.side-msg { margin: 0; padding: 10px 12px; font-size: 13px; color: var(--muted); }90.side-msg.err { color: var(--red); }91.side-msg .btn { margin-top: 10px; }9293/* ---------- Account ---------- */94.acct { margin: 0 12px 12px; border-radius: 3px; }95.acct-line {96 display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;97 padding: 9px 10px 9px 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line);98}99.acct-line .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgba(63, 224, 197, .5); }100.acct-line .dot.wait { background: var(--amber); box-shadow: 0 0 10px rgba(255, 176, 32, .4); }101.acct-line .dot.bad { background: var(--red); box-shadow: 0 0 10px rgba(255, 93, 74, .5); }102.acct-line .who { min-width: 0; }103.acct-line .who b { display: block; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }104.acct-line .who span { display: block; font: 400 11px var(--f-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }105.acct-note { grid-column: 1 / -1; margin: 4px 0 0; font: 400 11px/1.4 var(--f-mono); color: var(--teal); }106.acct-box { padding: 14px 14px 16px; border-radius: 3px; background: var(--ink-3); box-shadow: inset 0 2px 0 var(--line-2); }107.acct-box.setup { box-shadow: inset 0 2px 0 var(--amber); }108.acct-box.fail { box-shadow: inset 0 2px 0 var(--red); }109.acct-box h2 { margin: 0 0 6px; font: 500 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }110.acct-box.fail h2 { color: var(--red); }111.acct-box .lead { margin: 0 0 12px; font-size: 13px; color: var(--muted); }112.acct-box .lead.err { color: var(--paper); }113.acct-box .lead.err b { display: block; margin-bottom: 4px; color: var(--red); font-weight: 500; overflow-wrap: anywhere; }114.acct-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }115.field { display: grid; gap: 5px; }116.field > span { font: 500 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }117.input {118 width: 100%; background: var(--ink); border: 1px solid var(--line-2); border-radius: 3px; padding: 8px 10px;119 font: 400 13px var(--f-mono); color: var(--paper); outline: none;120}121.input:focus { border-color: var(--amber); }122.input::placeholder { color: var(--faint); }123.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }124.qc { display: grid; gap: 10px; }125.qc-code { font: 800 52px/1 var(--f-display); letter-spacing: .14em; color: var(--amber); font-variant-numeric: tabular-nums; padding: 2px 0 0; outline: none; }126.qc-code:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }127.qc.stale .qc-code { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 2px; }128.qc-wait { margin: 0; display: flex; align-items: center; gap: 8px; font: 400 12px var(--f-mono); color: var(--teal); }129.qc-wait::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: breathe 1.2s ease-in-out infinite; }130.acct-msg { margin: 0; font: 400 12px/1.45 var(--f-mono); color: var(--muted); }131.acct-msg.err { color: var(--red); }132.acct-msg.ok { color: var(--teal); }133.acct-msg:empty { display: none; }134135/* ---------- Channel list ---------- */136.chlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 8px 18px; scrollbar-width: thin; border-top: 1px solid var(--line); }137.chlist-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 8px; }138.ch {139 position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 10px; align-items: start;140 padding: 10px 12px; border-radius: 3px; color: var(--muted); text-decoration: none;141 transition: background .15s, color .15s;142}143.ch:hover { background: var(--ink-3); color: var(--paper); }144.ch[aria-current="page"] { background: var(--ink-3); color: var(--paper); box-shadow: inset 3px 0 0 var(--amber); }145.ch:focus-visible { outline-offset: -2px; }146.ch-num { font: 600 26px/1 var(--f-display); letter-spacing: .01em; color: var(--paper); padding-top: 1px; }147.ch[aria-current="page"] .ch-num { color: var(--amber); }148.ch-body { min-width: 0; display: grid; gap: 3px; }149.ch-name { font-weight: 500; font-size: 14px; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }150.ch-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 400 11px var(--f-mono); color: var(--muted); }151.ch-meta .miss { color: var(--red); }152.ch-meta .wait { color: var(--faint); }153.kind { font: 500 9px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 3px 5px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); }154.kind.k-jellyfin { color: var(--teal); box-shadow: inset 0 0 0 1px rgba(63, 224, 197, .45); }155.kind.k-new { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-2); }156.kind.k-youtube { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(255, 93, 74, .55); }157.ch-now { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }158.ch-now em { font-style: italic; }159.ch-prog { height: 2px; background: var(--line-2); border-radius: 1px; overflow: hidden; margin-top: 2px; }160.ch-prog i { display: block; height: 100%; background: var(--amber-2); }161.ch[aria-current="page"] .ch-prog i { background: var(--amber); }162.ch-err { font: 400 11px/1.35 var(--f-mono); color: var(--red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }163.ch-cs { margin-right: 8px; font: 500 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--amber-2); vertical-align: 2px; }164.ch-meta .off { padding: 2px 4px; border-radius: 2px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); box-shadow: inset 0 0 0 1px rgba(255, 93, 74, .45); }165.ch-meta .ant { color: var(--amber-2); }166.ch.is-off .ch-num, .ch.is-off .ch-name { opacity: .55; }167.ch-dirty { position: absolute; top: 14px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); display: none; }168.ch.dirty .ch-dirty { display: block; }169.ch-add { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border-radius: 3px; color: var(--muted); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }170.ch-add:hover, .ch-add[aria-current="page"] { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-2); }171.ch-add b { font: 600 22px/1 var(--f-display); color: var(--amber); width: 52px; }172173/* ---------- Empty and detail views ---------- */174.empty { height: 100%; display: grid; place-content: center start; padding: 40px var(--pad) 40px 56px; gap: 18px; }175.empty-line { margin: 0; font: 600 30px/1.15 var(--f-display); letter-spacing: .01em; color: var(--muted); max-width: 26ch; }176.empty-line.err { color: var(--paper); }177.empty .help { max-width: 60ch; }178.empty .btn { justify-self: start; }179.empty .row { display: flex; gap: 10px; flex-wrap: wrap; }180181/* New channel: which kind */182.chooser { padding: 36px var(--pad) 40px; max-width: 900px; display: grid; gap: 14px; align-content: start; }183.chooser h1 { margin: 0; font: 800 46px/.95 var(--f-display); letter-spacing: .005em; }184.chooser > .help { font-size: 14px; }185.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 8px; }186.kindcard {187 display: grid; gap: 10px; align-content: start; padding: 18px 18px 20px; border-radius: 3px;188 background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); text-decoration: none;189 transition: background .15s, box-shadow .15s;190}191.kindcard:hover { background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--amber-2); }192.kindcard .kind { justify-self: start; }193.kindcard b { font: 800 28px/1 var(--f-display); letter-spacing: .01em; color: var(--paper); }194.kindcard:hover b { color: var(--amber); }195.kindcard p { margin: 0; font-size: 13px; }196.kindcard small { font: 400 11px/1.4 var(--f-mono); color: var(--faint); }197198.detail { padding: 36px var(--pad) 40px; max-width: 980px; display: grid; gap: 22px; align-content: start; }199.detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 26px; align-items: end; }200.detail-num { font: 800 92px/.8 var(--f-display); color: var(--amber); letter-spacing: -.01em; }201.detail-name { margin: 0; font: 800 44px/.95 var(--f-display); letter-spacing: .005em; }202.detail-kicker { grid-column: 2; display: flex; gap: 12px; align-items: center; font: 400 12px var(--f-mono); color: var(--muted); }203.detail p { margin: 0; max-width: 72ch; color: var(--muted); }204.detail p strong { color: var(--paper); font-weight: 500; }205.path {206 display: block; padding: 12px 14px; border-radius: 3px; background: var(--ink-2); box-shadow: inset 3px 0 0 var(--amber-2);207 font: 400 13px/1.5 var(--f-mono); color: var(--paper); overflow-x: auto; white-space: pre;208 -webkit-user-select: all; user-select: all;209}210.detail details { max-width: 72ch; }211.detail summary { cursor: pointer; font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }212.detail summary:hover { color: var(--paper); }213.detail details[open] summary { margin-bottom: 10px; }214.detail details .path { -webkit-user-select: text; user-select: text; }215216/* ---------- Editor ---------- */217.ed { height: 100%; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); min-height: 0; }218.ed-head {219 display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; align-items: end;220 padding: 20px var(--pad) 14px;221}222.f-num, .f-name { display: contents; }223.ed-head .label { grid-row: 1; margin-bottom: 6px; }224.in-num { grid-row: 2; grid-column: 1; }225.in-name { grid-row: 2; grid-column: 2; min-width: 0; }226#f-number-err { grid-row: 3; grid-column: 1; }227#f-name-err { grid-row: 3; grid-column: 2; }228.in-num, .in-name {229 display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px dashed var(--line-2); border-radius: 0;230 padding: 0 0 4px; outline: none; color: var(--paper);231 transition: border-color .15s;232}233.in-num { font: 800 72px/.85 var(--f-display); color: var(--amber); letter-spacing: -.01em; width: 3.2ch; }234.in-name { font: 800 46px/.95 var(--f-display); letter-spacing: .005em; text-overflow: ellipsis; }235.in-num:hover, .in-name:hover { border-bottom-color: var(--muted); }236.in-num:focus, .in-name:focus { border-bottom: 1px solid var(--amber); }237.in-num:focus-visible, .in-name:focus-visible { outline: none; }238.in-name::placeholder { color: var(--faint); }239.in-num[aria-invalid="true"], .in-name[aria-invalid="true"] { border-bottom: 1px solid var(--red); }240.f-err { min-height: 14px; margin: 5px 0 4px; font: 400 11px/1.3 var(--f-mono); color: var(--red); }241.ed-actions { grid-row: 2; grid-column: 3; display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding-bottom: 6px; }242.ed-status { font: 400 12px var(--f-mono); color: var(--muted); text-align: right; max-width: 34ch; }243.ed-status.dirty { color: var(--amber); }244.ed-status.dirty::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-right: 8px; vertical-align: 1px; }245.ed-status.err { color: var(--red); }246.ed-status.ok { color: var(--teal); }247.ed-kicker { grid-row: 4; grid-column: 2 / -1; display: flex; gap: 14px; align-items: center; min-width: 0; font: 400 12px var(--f-mono); color: var(--muted); }248.ed-kicker > * { flex: none; }249.ed-kicker .now { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 13px var(--f-body); color: var(--paper); }250.ed-kicker .now b { font: 500 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: var(--amber); padding: 2px 6px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }251.ed-kicker .now em { color: var(--muted); }252.ed-kicker .err { flex: 0 1 auto; min-width: 0; color: var(--red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }253254.ed-opts { display: flex; flex-wrap: wrap; gap: 14px 44px; padding: 14px var(--pad) 16px; border-top: 1px solid var(--line); }255.opt-group { display: grid; grid-template-columns: 64px auto; gap: 6px 12px; align-items: center; min-width: 0; }256.opt-label { font: 500 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }257.opt-group .help { grid-column: 2; max-width: 50ch; min-height: 1.45em; }258.seg { justify-self: start; }259.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); }260.seg label { position: relative; display: block; }261.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }262.seg span { display: block; padding: 6px 11px; border-radius: 2px; font: 500 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: background .15s, color .15s; }263.seg label:hover span { color: var(--paper); }264.seg input:checked + span { background: var(--ink-4); color: var(--amber); box-shadow: inset 0 -2px 0 var(--amber); }265.seg input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 1px; }266267.ed-tabs { height: 44px; padding: 0 var(--pad); display: flex; align-items: stretch; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }268.tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }269.tabs::-webkit-scrollbar { display: none; }270.tab {271 border: 0; background: none; padding: 0 14px; white-space: nowrap;272 font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);273 box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s;274}275.tab:first-child { padding-left: 0; }276.tab:hover { color: var(--paper); }277.tab[aria-selected="true"] { color: var(--amber); box-shadow: inset 0 -2px 0 var(--amber); }278.tab .n { margin-left: 7px; color: var(--faint); }279.tab .n.some { color: var(--paper); }280.tab[aria-selected="true"] .n.some { color: var(--amber); }281.tab:focus-visible { outline-offset: -4px; }282.lib-status { align-self: center; font: 400 12px var(--f-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }283284.ed-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w); min-height: 0; }285.lib { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; }286287.fbar { display: grid; gap: 10px; padding: 14px var(--pad) 14px; }288.fbar-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }289.search { position: relative; flex: 0 1 280px; min-width: 180px; }290.search input { width: 100%; padding: 8px 34px 8px 11px; }291.search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; }292.search input:focus + kbd, .search input:not(:placeholder-shown) + kbd { display: none; }293.gchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }294.gchip {295 border: 0; background: none; padding: 6px 8px; border-radius: 2px; white-space: nowrap;296 font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);297 box-shadow: inset 0 0 0 1px var(--line-2); transition: color .15s, box-shadow .15s, background .15s;298}299.gchip .n { margin-left: 6px; color: var(--faint); }300.gchip:hover { color: var(--paper); box-shadow: inset 0 0 0 1px var(--muted); }301.gchip[aria-pressed="true"] { color: var(--ink); background: var(--amber); box-shadow: none; }302.gchip[aria-pressed="true"] .n { color: rgba(7, 8, 10, .6); }303.gchip.sel-only { padding: 8px 10px; }304.gchip.sel-only[aria-pressed="true"] { background: var(--teal); }305.gchip.more, .gchip.clear { box-shadow: none; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; }306.gchip.more:hover, .gchip.clear:hover { color: var(--paper); box-shadow: none; }307.fcount { margin-left: auto; font: 400 11px var(--f-mono); color: var(--faint); white-space: nowrap; }308309.scroller { overflow-y: auto; min-height: 0; scrollbar-width: thin; overscroll-behavior: contain; }310.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px 6px; padding: 0 calc(var(--pad) - 5px) 8px; }311.sentinel { height: 1px; }312.gmsg { padding: 30px var(--pad) 40px; display: grid; gap: 12px; justify-items: start; max-width: 70ch; }313.gmsg:empty { display: none; }314.gmsg p { margin: 0; color: var(--muted); }315.gmsg .big { font: 600 26px/1.15 var(--f-display); color: var(--muted); }316.gmsg .big.err { color: var(--paper); }317.gmsg .row { display: flex; gap: 10px; flex-wrap: wrap; }318319.card {320 appearance: none; border: 0; background: none; padding: 0; margin: 0; text-align: left; color: inherit;321 display: flex; flex-direction: column; gap: 8px; min-width: 0; border-radius: 4px;322 /* The padding leaves room for the selected ring and focus outline, which323 content-visibility would otherwise clip. */324 padding: 5px 5px 0;325 content-visibility: auto; contain-intrinsic-size: auto 130px auto 270px;326}327.card:focus-visible { outline: none; }328.poster {329 position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden;330 background: linear-gradient(160deg, #2a2219, var(--ink-3) 70%);331 box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s, transform .15s var(--ease);332}333.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }334.ph { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px 12px; font: 800 19px/.95 var(--f-display); color: var(--amber-2); overflow-wrap: anywhere; }335.tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 2px; background: var(--amber); display: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }336.tick::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }337.ov {338 position: absolute; inset: 0; padding: 12px 11px; overflow: hidden;339 background: rgba(7, 8, 10, .9); color: var(--paper); font-size: 12px; line-height: 1.42;340 opacity: 0; transition: opacity .15s;341 -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);342 pointer-events: none;343}344.card:hover .ov { opacity: 1; transition-delay: .45s; }345.card:focus-visible .ov { opacity: 1; }346.card:hover .poster { box-shadow: 0 0 0 1px var(--muted); }347.card:focus-visible .poster { outline: 2px solid var(--paper); outline-offset: 2px; }348.card[aria-pressed="true"] .poster { box-shadow: 0 0 0 2px var(--amber), 0 10px 26px rgba(0, 0, 0, .55); }349.card[aria-pressed="true"] .tick { display: block; }350.card[aria-pressed="true"] .cname { color: var(--amber); }351.card:active .poster { transform: scale(.98); }352.cname { font-weight: 500; font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }353.cmeta { display: flex; gap: 10px; font: 400 11px var(--f-mono); color: var(--muted); margin-top: -4px; }354.skel { aspect-ratio: 2 / 3; border-radius: 3px; background: var(--ink-2); box-shadow: 0 0 0 1px var(--line); animation: breathe 1.6s ease-in-out infinite; }355@keyframes breathe { 50% { opacity: .45; } }356357/* ---------- Aside: picks and schedule ---------- */358.aside { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: rgba(13, 15, 18, .6); }359.aside h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; padding: 16px 18px 10px; font: 500 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }360.aside h2 .n { font: 500 12px/1 var(--f-mono); letter-spacing: .04em; color: var(--paper); }361.picks { flex: 1 1 0; min-height: 140px; overflow-y: auto; scrollbar-width: thin; padding-bottom: 14px; }362.sched { flex: 0 1 auto; max-height: 48%; min-height: 120px; overflow-y: auto; scrollbar-width: thin; border-top: 1px solid var(--line); padding-bottom: 18px; }363.picks-empty, .sched-msg { margin: 0; padding: 0 18px; font-size: 13px; color: var(--muted); }364.sched-msg.err { color: var(--red); font: 400 12px/1.45 var(--f-mono); }365.missing-note { margin: 0 12px 12px; padding: 10px 12px; border-radius: 3px; background: rgba(255, 93, 74, .08); box-shadow: inset 3px 0 0 var(--red); display: grid; gap: 8px; font-size: 13px; }366.missing-note .btn { justify-self: start; }367.pk-group { margin-bottom: 8px; }368.pk-group h3 { margin: 0; padding: 6px 18px 4px; display: flex; gap: 8px; font: 500 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }369.pk-group ul { margin: 0; padding: 0 8px; list-style: none; }370.pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 4px 5px 10px; border-radius: 3px; }371.pick:hover { background: var(--ink-3); }372.pk-name { min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }373.pk-name small { margin-left: 8px; font: 400 11px var(--f-mono); color: var(--faint); }374.pick.missing .pk-name { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 93, 74, .6); }375.pick.missing .pk-name small { text-decoration: none; display: inline-block; color: var(--red); }376.x { border: 0; background: none; width: 26px; height: 26px; border-radius: 3px; color: var(--faint); font-size: 16px; line-height: 1; display: grid; place-items: center; }377.x:hover { color: var(--red); background: var(--ink-4); }378.drop { border: 0; background: none; padding: 4px 8px; border-radius: 2px; font: 500 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); box-shadow: inset 0 0 0 1px rgba(255, 93, 74, .4); }379.drop:hover { box-shadow: inset 0 0 0 1px var(--red); }380381.upd { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); letter-spacing: .12em; }382.upd::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: breathe 1s ease-in-out infinite; }383.prog-list { margin: 0; padding: 0 8px; list-style: none; }384.prog { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 6px 10px; border-radius: 3px; }385.prog time { font: 400 12px/1.5 var(--f-mono); color: var(--muted); white-space: nowrap; }386.pr-body { min-width: 0; }387.prog .t { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }388.prog .s { font-size: 12px; color: var(--muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }389.prog.now { background: var(--ink-3); box-shadow: inset 2px 0 0 var(--amber); }390.prog.now time { color: var(--amber); }391.prog-day { padding: 10px 10px 4px; font: 600 15px var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); list-style: none; }392393/* ---------- Details: every channel's call sign, category, description, logo ---------- */394.ed-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 30px; align-items: start; padding: 2px var(--pad) 16px; }395.logo-box { display: grid; grid-template-columns: 76px minmax(0, 168px); gap: 14px; align-items: start; }396.logo-tile {397 position: relative; width: 76px; height: 76px; border-radius: 4px; overflow: hidden; display: grid; place-items: center;398 background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .15s;399}400.logo-tile.has { background: repeating-conic-gradient(#15181d 0 25%, #0f1115 0 50%) 0 0 / 12px 12px; }401.logo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7px; }402.logo-tile .ph-call { padding: 4px; font: 800 21px/.95 var(--f-display); letter-spacing: .02em; text-transform: uppercase; text-align: center; color: var(--amber-2); overflow-wrap: anywhere; }403.logo-tile.drop { box-shadow: inset 0 0 0 2px var(--amber); }404.logo-actions { display: grid; justify-items: start; gap: 7px; min-width: 0; }405.logo-actions .linkish { font-size: 12px; text-align: left; }406.logo-actions .linkish:disabled { color: var(--faint); border-bottom-color: var(--line-2); }407.logo-msg { margin: 0; font: 400 11px/1.4 var(--f-mono); color: var(--faint); }408.logo-msg:empty { display: none; }409.logo-msg.ok { color: var(--teal); }410.logo-msg.err { color: var(--red); }411.mfields { display: grid; grid-template-columns: 112px 168px auto minmax(220px, 1fr); gap: 6px 20px; align-items: start; min-width: 0; }412.mfield { display: grid; gap: 7px; align-content: start; min-width: 0; }413.mfield .input { padding: 7px 9px; }414.mfield .input.select { justify-self: stretch; width: 100%; padding: 7px 30px 7px 9px; font-size: 13px; }415.mfield textarea { display: block; resize: none; min-height: 34px; max-height: 84px; font: 400 13px/1.4 var(--f-body); }416.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 34px; cursor: pointer; }417.switch input { position: absolute; left: 0; top: 6px; width: 38px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }418.switch i { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: var(--ink-4); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .15s, box-shadow .15s; }419.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s var(--ease), background .15s; }420.switch input:checked + i { background: rgba(63, 224, 197, .16); box-shadow: inset 0 0 0 1px rgba(63, 224, 197, .55); }421.switch input:checked + i::after { transform: translateX(16px); background: var(--teal); }422.switch input:focus-visible + i { outline: 2px solid var(--amber); outline-offset: 2px; }423.sw-help { max-width: 20ch; font: 400 11px/1.35 var(--f-mono); color: var(--muted); }424.switch input:not(:checked) ~ .sw-help { color: var(--red); }425.meta-err { grid-column: 1 / -1; min-height: 0; margin: 0; }426.meta-err:empty, .meta-warn:empty { display: none; }427.meta-warn { grid-column: 1 / -1; margin: 0; padding-left: 10px; font: 400 12px/1.4 var(--f-mono); color: var(--amber); box-shadow: inset 2px 0 0 var(--amber-2); }428429/* Folder and weather channels: details, what plays, next airings. */430.ed.meta { grid-template-rows: auto auto minmax(0, 1fr); }431.ed.meta .ed-body { border-top: 1px solid var(--line); }432.ed.meta .sched { flex: 1 1 auto; max-height: none; border-top: 0; }433.meta-info { min-width: 0; max-width: 900px; padding: 22px var(--pad) 40px; display: grid; gap: 16px; align-content: start; overflow-y: auto; }434.meta-info p { margin: 0; max-width: 72ch; color: var(--muted); }435.meta-info details { max-width: 72ch; }436.meta-info summary { cursor: pointer; font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }437.meta-info summary:hover { color: var(--paper); }438.meta-info details[open] summary { margin-bottom: 10px; }439.meta-info details .path { -webkit-user-select: text; user-select: text; }440441/* When a channel that plays in order airs: around the clock, or on a schedule (a row of its own). */442.ed:has(> .ed-sched) { grid-template-rows: auto auto auto auto auto minmax(0, 1fr); }443.ed.meta:has(> .ed-sched) { grid-template-rows: auto auto auto minmax(0, 1fr); }444.ed.yt:has(> .ed-sched) { grid-template-rows: auto auto auto auto minmax(0, 1fr); }445.ed-sched { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 12px var(--pad) 14px; border-top: 1px solid var(--line); }446.ed-sched > .opt-label { padding-top: 10px; }447.sch-main { display: grid; gap: 10px; min-width: 0; }448.sch-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }449.sch-sum { margin: 0; min-width: 0; font-size: 12px; color: var(--muted); }450.sch-sum.on { font-size: 13px; color: var(--paper); }451.sch-sum:empty { display: none; }452.sch-ed { display: grid; gap: 8px; }453.sch-line, .sch-block { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }454.sch-l, .sch-noun { font: 400 12px var(--f-mono); color: var(--muted); }455.sch-blocks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }456.sch-days { display: flex; gap: 4px; margin-right: 4px; }457.sch-days .gchip { padding: 7px 7px; }458.ed-sched .input { width: auto; padding: 6px 8px; font-size: 12px; }459.ed-sched .input.select { padding-right: 30px; }460.ed-sched .input.n { width: 52px; }461.ed-sched .input:disabled { color: var(--muted); cursor: default; }462.sch-first { max-width: min(440px, 100%); text-overflow: ellipsis; }463.sch-block .x { margin-left: -4px; }464.sch-line .help { font: 400 11px/1.4 var(--f-mono); color: var(--faint); }465.sch-hint { margin: 0; padding-left: 10px; font: 400 12px/1.4 var(--f-mono); color: var(--amber); box-shadow: inset 2px 0 0 var(--amber-2); }466.sch-hint .linkish { font: inherit; }467.sch-err { margin: 0; min-height: 0; }468.sch-err:empty { display: none; }469.prog.off .t { font-weight: 400; color: var(--muted); }470.prog.off .s { font-style: normal; white-space: normal; }471472/* ---------- YouTube editor ---------- */473.ed.yt { grid-template-rows: auto auto auto minmax(0, 1fr); }474.ed.yt .ed-body { border-top: 1px solid var(--line); }475.yt-opts { gap: 12px 40px; }476.yt-opts .opt-group { align-items: center; }477.yt-opts .plays { flex-basis: 100%; }478.opt-line { display: flex; align-items: center; gap: 8px; font: 400 12px var(--f-mono); color: var(--muted); }479.input.n { width: 62px; padding: 6px 8px; text-align: right; }480.input.select { justify-self: start; width: auto; padding: 6px 30px 6px 10px; font-size: 12px; cursor: pointer; appearance: none;481 background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23908a7c' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; }482.opt-err { flex-basis: 100%; margin: 0; min-height: 0; }483.opt-err:empty { display: none; }484485.ytfind .fbar .help { font-size: 12px; }486.ytfind .gmsg { max-width: 64ch; }487.ytres { list-style: none; margin: 0; padding: 0 calc(var(--pad) - 10px) 18px; display: grid; gap: 2px; }488.ytrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border-radius: 3px; }489.ytrow:hover { background: var(--ink-3); }490.ytrow.added .yr-name { color: var(--amber); }491.ytrow.added .av { box-shadow: 0 0 0 2px var(--amber); }492.ytrow .btn { min-width: 74px; }493.ytrow .btn.ghost[aria-pressed="true"] { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-2); }494.av {495 position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;496 background: linear-gradient(160deg, #2a2219, var(--ink-3) 70%); box-shadow: 0 0 0 1px var(--line);497 font: 800 21px/1 var(--f-display); color: var(--amber-2); text-transform: uppercase;498}499.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }500.av.sm { width: 32px; height: 32px; font-size: 15px; }501.yr-body { min-width: 0; display: grid; gap: 3px; }502.yr-name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }503.yr-meta, .ys-meta { display: flex; flex-wrap: wrap; gap: 0 10px; font: 400 11px/1.45 var(--f-mono); color: var(--muted); min-width: 0; }504.yr-name, .yr-desc { text-align: left; }505.yr-desc { margin: 0; max-width: 80ch; font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }506.skel-row .av, .skel-row .skl { animation: breathe 1.6s ease-in-out infinite; }507.skl { height: 30px; max-width: 360px; border-radius: 3px; background: var(--ink-2); }508509.ysrc-list { margin: 0; padding: 0 8px; list-style: none; }510.ysrc { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px 6px 10px; border-radius: 3px; }511.ysrc:hover { background: var(--ink-3); }512.ys-body { min-width: 0; }513.ys-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }514.ys-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }515.ys-meta .bad { color: var(--red); white-space: normal; }516.ys-meta .wait { color: var(--faint); }517.ysrc.bad .av { box-shadow: 0 0 0 1px var(--red); }518/* A playlist: its link, what a lookup found, and its picture, its first video's thumbnail. */519.ytpl .pl-link { flex: 0 1 460px; }520.ytpl .gmsg { padding-top: 6px; }521.ytpl .pl-link input { padding-right: 11px; }522.plcard { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 12px; border-radius: 3px; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }523.plcard .yr-body { gap: 4px; }524.plcard a.linkish { justify-self: start; margin-top: 2px; font-size: 12px; text-decoration: none; }525.plcard.skel-row { background: none; box-shadow: none; }526.skel-row .plthumb { animation: breathe 1.6s ease-in-out infinite; }527.plthumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; background: linear-gradient(160deg, #2a2219, var(--ink-3) 70%); box-shadow: 0 0 0 1px var(--line); }528.plthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }529.ysrc.pl { grid-template-columns: 56px minmax(0, 1fr); padding-right: 10px; }530.ysrc.pl.bad .plthumb { box-shadow: 0 0 0 1px var(--red); }531.sched-msg + .prog-list { margin-top: 10px; }532.ed-kicker .upd { font: 400 12px var(--f-mono); letter-spacing: 0; }533534/* ---------- Backups ---------- */535.bk-side { margin: 0 12px 12px; }536.bk-line {537 display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;538 padding: 8px 12px; border-radius: 3px; color: var(--muted); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line);539 transition: background .15s, box-shadow .15s;540}541.bk-line:hover { background: var(--ink-3); }542.bk-line[aria-current="page"] { background: var(--ink-3); box-shadow: inset 3px 0 0 var(--amber), inset 0 0 0 1px var(--line); }543.bk-line:focus-visible { outline-offset: -2px; }544.bk-line-body { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }545.bk-line-body b { font: 500 10px/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }546.bk-line[aria-current="page"] .bk-line-body b { color: var(--amber); }547.bk-line-body span { font: 400 11px var(--f-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }548.bk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }549.bk-dot.ok { background: var(--teal); }550.bk-dot.wait { background: var(--amber); animation: breathe 1.2s ease-in-out infinite; }551.bk-dot.err { background: var(--red); }552.bk-go { width: 6px; height: 6px; border: solid var(--faint); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); margin-right: 2px; }553.bk-line:hover .bk-go, .bk-line[aria-current="page"] .bk-go { border-color: var(--amber); }554555/* ---------- Channel changes ---------- */556.tune-side { margin: 0 12px 12px; padding: 8px 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); }557.tune-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }558.tune-head b { font: 500 10px/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }559.tune-head span { font: 400 10px var(--f-mono); color: var(--faint); }560.tune-table { width: 100%; border-collapse: collapse; font: 400 11px/1.6 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }561.tune-table th { font-weight: 400; text-align: left; color: var(--faint); }562.tune-table thead th, .tune-table td { text-align: right; }563.tune-table tbody th { color: var(--muted); }564565.bk { padding: 36px var(--pad) 48px; max-width: 1060px; display: grid; gap: 20px; align-content: start; height: 100%; overflow-y: auto; scrollbar-width: thin; }566.bk-head h1 { margin: 0 0 10px; font: 800 46px/.95 var(--f-display); letter-spacing: .005em; }567.bk-lead { margin: 0; max-width: 74ch; font-size: 14px; color: var(--muted); }568.bk-actions { display: grid; gap: 7px; }569.bk-row-in { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }570.bk-row-in .input { flex: 0 1 340px; min-width: 200px; }571.bk-or { font: 400 12px var(--f-mono); color: var(--faint); }572.bk-msg { margin: -6px 0 0; font: 400 12px/1.45 var(--f-mono); color: var(--muted); }573.bk-msg:empty { display: none; }574.bk-msg.ok { color: var(--teal); }575.bk-msg.err { color: var(--red); }576.bk-empty { display: grid; gap: 10px; padding: 26px 0 10px; }577.bk-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }578.bk-item-row {579 display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 6px 24px; align-items: center;580 padding: 14px 12px; border-bottom: 1px solid var(--line); transition: background .15s;581}582.bk-item-row:hover { background: var(--ink-2); }583.bk-when b { display: block; font: 600 22px/1.05 var(--f-display); letter-spacing: .01em; color: var(--paper); }584.bk-when span { font: 400 11px var(--f-mono); color: var(--faint); }585.bk-item-row.latest .bk-when b { color: var(--amber); }586.bk-what { min-width: 0; display: grid; gap: 6px; }587.bk-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }588.bk-tag { font: 500 9px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 3px 5px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); white-space: nowrap; }589.bk-tag.r-manual, .bk-tag.r-uploaded { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-2); }590.bk-tag.r-restore { color: var(--teal); box-shadow: inset 0 0 0 1px rgba(63, 224, 197, .45); }591.bk-tag.latest { color: var(--ink); background: var(--amber); box-shadow: none; }592.bk-note { min-width: 0; font-weight: 500; font-size: 14px; color: var(--paper); overflow-wrap: anywhere; }593.bk-sum { margin: 0; font: 400 12px/1.45 var(--f-mono); color: var(--muted); }594.bk-sum.err, .bk-summary .err { color: var(--red); }595.bk-acts { display: flex; gap: 8px; align-items: center; }596.bk-acts a.btn { text-decoration: none; }597.bk-item-row.bad .bk-when b { color: var(--muted); }598.bk-foot { display: grid; gap: 10px; max-width: 84ch; padding-top: 6px; }599.bk-foot p { margin: 0; font-size: 12px; color: var(--muted); }600.bk-foot code:not(.path) { font-size: 11px; color: var(--paper); }601602.bk-acts .btn.ghost:not(.danger):hover:not(:disabled) { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-2); }603604dialog.bk-dlg { width: min(760px, calc(100vw - 32px)); max-width: min(760px, calc(100vw - 32px)); }605/* The list of channels takes what room is left, so the buttons always show. */606.bk-dlg form { display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 48px); }607.bk-from { font-size: 13px; }608.bk-from b { color: var(--paper); font-weight: 500; }609.bk-mode .seg { margin-top: 2px; }610.bk-items { flex: 0 1 auto; min-height: 96px; list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; scrollbar-width: thin; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }611.bk-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 1px 10px; align-items: baseline; padding: 6px 4px; border-radius: 3px; }612.bk-item input { margin: 0; width: 15px; height: 15px; accent-color: var(--amber); align-self: center; cursor: pointer; }613.bk-mark { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); justify-self: center; }614.bk-item.a-add .bk-mark, .bk-item.a-did .bk-mark { background: var(--teal); }615.bk-item.a-change .bk-mark { background: var(--amber); }616.bk-item.a-skip .bk-mark, .bk-item.a-bad .bk-mark { background: var(--red); }617.bk-item-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }618.bk-items.choosing .bk-item-name { cursor: pointer; }619.bk-item-name .num { font: 600 19px/1 var(--f-display); color: var(--paper); min-width: 3.4ch; }620.bk-item-name .nm { min-width: 0; font-weight: 500; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }621.bk-item-name .kind { flex: none; }622.bk-item .what { grid-column: 2; margin: 0; font: 400 12px/1.4 var(--f-mono); color: var(--muted); }623.bk-item.a-add .what, .bk-item.a-change .what, .bk-item.a-did .what { color: var(--paper); }624.bk-item.a-skip .what, .bk-item.a-bad .what { color: var(--red); }625.bk-item.a-same .bk-item-name .num, .bk-item.a-same .bk-item-name .nm,626.bk-item.a-off .bk-item-name .num, .bk-item.a-off .bk-item-name .nm { color: var(--muted); }627.bk-opts { display: grid; gap: 10px; }628.bk-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }629.bk-check input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--amber); cursor: pointer; }630.bk-check b { display: block; font-weight: 500; font-size: 13px; }631.bk-check small { display: block; font: 400 11px/1.4 var(--f-mono); color: var(--muted); }632.bk-check.off { cursor: default; opacity: .6; }633.bk-summary { flex: none; }634.bk-summary ul { margin: 0; padding: 10px 14px 10px 30px; border-radius: 3px; background: var(--ink-2); box-shadow: inset 3px 0 0 var(--amber-2); display: grid; gap: 4px; font-size: 13px; color: var(--paper); }635.bk-summary:empty { display: none; }636.bk-dlg .dlg-actions { flex: none; margin-top: 2px; }637638@media (max-width: 920px) {639 .bk { height: auto; overflow: visible; }640 .bk-head h1 { font-size: 36px; }641 .bk-item-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }642 .bk-acts { flex-wrap: wrap; }643}644645/* ---------- Dialog and toast ---------- */646dialog {647 border: 0; padding: 0; max-width: min(460px, calc(100vw - 32px)); border-radius: 3px;648 background: var(--ink-3); color: var(--paper); box-shadow: inset 0 2px 0 var(--amber), 0 30px 80px rgba(0, 0, 0, .7);649}650dialog.danger { box-shadow: inset 0 2px 0 var(--red), 0 30px 80px rgba(0, 0, 0, .7); }651dialog::backdrop { background: rgba(7, 8, 10, .7); }652dialog form { padding: 22px 24px 20px; display: grid; gap: 12px; }653dialog h2 { margin: 0; font: 800 30px/1 var(--f-display); letter-spacing: .01em; }654dialog p { margin: 0; color: var(--muted); }655.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }656657#toast {658 position: fixed; z-index: 80; bottom: 22px; left: 50%; transform: translate(-50%, 10px); opacity: 0; pointer-events: none;659 max-width: 70vw; padding: 10px 16px; border-radius: 3px; background: var(--ink-3); box-shadow: inset 3px 0 0 var(--amber), 0 12px 30px rgba(0, 0, 0, .5);660 font: 400 13px var(--f-mono); transition: opacity .3s, transform .3s var(--ease);661}662#toast.show { opacity: 1; transform: translate(-50%, 0); }663#toast.err { box-shadow: inset 3px 0 0 var(--red), 0 12px 30px rgba(0, 0, 0, .5); }664665/* ---------- Narrower windows ---------- */666@media (max-width: 1180px) {667 :root { --side-w: 270px; --aside-w: 260px; --pad: 22px; }668 .in-num { font-size: 60px; }669 .in-name { font-size: 38px; }670 .mfields { grid-template-columns: 112px 168px minmax(0, 1fr); }671 .mfield.desc { grid-column: 1 / -1; }672}673@media (max-width: 920px) {674 :root { --pad: 16px; }675 .app { display: block; height: auto; }676 .side { border-right: 0; border-bottom: 1px solid var(--line); }677 .chlist { max-height: 40vh; }678 .main { min-height: 70vh; }679 .ed { height: auto; display: block; }680 .ed-head { grid-template-columns: auto minmax(0, 1fr); }681 .ed-actions { grid-row: 5; grid-column: 1 / -1; justify-content: flex-start; padding: 12px 0 0; }682 .ed-kicker { grid-column: 1 / -1; flex-wrap: wrap; }683 .ed-body { display: block; }684 .lib { display: block; }685 .scroller { overflow: visible; }686 .aside { border-left: 0; border-top: 1px solid var(--line); }687 .picks, .sched { flex: none; max-height: none; overflow: visible; }688 .grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px 4px; }689 .ytrow { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }690 .ytrow .av { width: 40px; height: 40px; }691 .chooser h1 { font-size: 36px; }692 .ed-meta { grid-template-columns: minmax(0, 1fr); }693 .mfields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }694 .mfield.on, .mfield.desc { grid-column: 1 / -1; }695 .detail-num { font-size: 64px; }696 .detail-name { font-size: 34px; }697 .empty { padding-left: var(--pad); }698}699700@media (prefers-reduced-motion: reduce) {701 *, *::before, *::after { animation: none ; transition: none ; }702}