:root {
  --bg: #0b0e13; --panel: #10141b; --card: #161b24; --line: #232a36; --line-2: #2d3542;
  --text: #e7eaf0; --dim: #8b94a3; --muted: #5f6878;
  --ok: #3ecf8e; --bad: #ef5b5b; --warn: #e9b44c; --accent: #4f8ff7; --accent-2: #3a74d6;
  --side: 240px; --top: 56px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Inter, sans-serif; }
a { color: var(--accent); text-decoration: none; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin: 0; font-weight: 600; }
p { margin: 0 0 8px; }

/* layout */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--side); flex: none; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5; }
.content { flex: 1; padding: 22px; max-width: 1280px; width: 100%; display: grid; gap: 18px; align-content: start; }
.content > section { display: grid; gap: 18px; }
.foot { border-top: 1px solid var(--line); padding: 10px 22px; display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); font-size: 12px; }

/* sidebar */
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #8b5cf6); flex: none; }
.brand-name { font-weight: 700; }
.brand-sub { font-size: 11px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { display: grid; gap: 2px; padding: 10px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--dim); font-weight: 500; }
.nav a:hover { background: var(--card); color: var(--text); }
.nav a.active { background: var(--card); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.nav .ico { width: 18px; text-align: center; color: var(--muted); font-size: 13px; }
.nav a.active .ico { color: var(--accent); }
.badge { margin-left: auto; background: var(--line-2); color: var(--text); border-radius: 99px; padding: 0 7px; font-size: 11px; }
.badge:empty { display: none; }
.sidebar-foot { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.side-stat { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); }
.side-stat b { color: var(--text); font-weight: 600; }

/* topbar */
.menu-btn { display: none; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 4px 9px; font-size: 16px; cursor: pointer; }
.crumbs { flex: 1; font-weight: 600; font-size: 15px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.clock { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }

/* cards & tiles */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.tile span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.tile b { display: block; font-size: 22px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.tile small { color: var(--muted); font-size: 12px; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 16px; }
.kv div span { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.kv div b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.list { display: grid; gap: 6px; }
.list .item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.list .item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); } .dim { color: var(--dim); }
.small { font-size: 12px; }
.hint { color: var(--dim); font-size: 12px; margin-top: 10px; }
.error { color: var(--bad); min-height: 1em; font-size: 13px; }
.empty { color: var(--dim); padding: 14px 0 4px; }
.log { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0; max-height: 420px; overflow: auto; font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--dim); white-space: pre-wrap; }
.log.small { max-height: 180px; }
.steps { margin: 0; padding-left: 20px; font-size: 13px; display: grid; gap: 6px; }

/* player */
.player { position: relative; background: #000; border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; }
.player video { width: 100%; height: 100%; display: block; }
.player .offline { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); background: #000; }

/* forms & buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: 0; border-radius: 7px; padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--accent-2); }
.btn.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text); font-weight: 500; padding: 5px 11px; }
.btn.ghost:hover { background: var(--line); }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
form { display: block; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
label { display: grid; gap: 4px; font-size: 12px; color: var(--dim); }
label.wide { flex: 1; min-width: 240px; }
label.wide input { width: 100%; }
label.inline { display: inline-flex; align-items: center; gap: 8px; }
input, select { background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; padding: 7px 9px; font: inherit; width: 160px; }
input:focus, select:focus { outline: none; border-color: var(--accent); }
.w-s { width: 100px; } .w-m { width: 130px; }
.form-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.form-actions .error { flex: 1; }
[hidden] { display: none !important; }

/* table */
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .addr { font: 12px ui-monospace, Menlo, monospace; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.table .actions { white-space: nowrap; text-align: right; }
.table .actions .btn { margin-left: 4px; }
.table tr.detail td { background: var(--panel); padding: 12px 14px; }
.table .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }

/* responsive */
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; z-index: 20; }
  .sidebar.open { transform: none; box-shadow: 0 0 0 100vw rgba(0,0,0,.5); }
  .menu-btn { display: inline-block; }
  .content { padding: 14px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .clock { display: none; }
  #logout { padding: 3px 8px; font-size: 12px; }
  .crumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crumbs .dim { display: none; }
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar-right { gap: 8px; min-width: 0; }
  #top-inputs { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------------------------------------------------------------- DynaLink additions */
:root { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --w-l: 220px; }
.brand-mark { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
.nav-group { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 12px 4px; }
.w-l { width: var(--w-l); } .w-xl { width: 300px; }
label.check { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; padding-bottom: 7px; }
label.check input { width: auto; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
code { font: 12px ui-monospace, Menlo, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.detail-grid h3, .chart h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; }
.table.mini th, .table.mini td { padding: 4px 8px; font-size: 12px; }
.monitor { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: 18px; }
@media (max-width: 900px) { .monitor { grid-template-columns: 1fr; } }
.spark { display: block; }
.chart-sm { margin-top: 10px; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.chart { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-width: 0; }
.chart svg .grid { stroke: var(--line); stroke-width: 1; }
.chart svg .axis, .chart-sm svg .axis { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart svg .lbl, .chart-sm svg .lbl { fill: var(--dim); font-size: 11px; }
.chart-sm svg .grid { stroke: var(--line); }
svg .cross { stroke: var(--dim); stroke-dasharray: 3 3; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.legend i, .tip i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.tip { position: fixed; z-index: 50; background: #0b0e13; border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 9px; font-size: 12px; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.matrix th.xin { text-align: center; white-space: normal; min-width: 110px; }
.matrix th.xin div { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 12px; margin-bottom: 4px; }
.matrix td.xp { text-align: center; }
.xpt { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: transparent; cursor: pointer; padding: 0; }
.xpt:hover { border-color: var(--accent); }
.xpt.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,143,247,.25); cursor: default; }
.plat { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; color: #fff; font-size: 11px; margin-right: 6px; vertical-align: middle; }
.plat.yt { background: #d33; } .plat.fb { background: #1877f2; font-weight: 800; }
form.platform .form-actions { margin-top: 12px; }
.list .item .spark { flex: none; }
.list .item .pill { white-space: normal; border-radius: 12px; flex: none; max-width: 55%; } /* a long status wraps inside the card */
.cue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.cue-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.cue-card .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn.warnbtn { background: #b7791f; } .btn.okbtn { background: #2f855a; }
.cue-send { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.cue-card .sched { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.cue-card .sched label { font-size: 11px; }

label .sub { font-size: 10px; color: var(--muted); font-weight: 400; }
code.addr-preview { word-break: break-all; }
form.platform .row + .row { margin-top: 10px; }

h3.sub-h { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }

/* live platforms: platform picker and destination rows */
.plat-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.plat-tile { display: flex; align-items: center; gap: 2px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.plat-tile:hover { border-color: var(--muted); }
.plat-tile[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plat-tile .count { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; text-align: center; }
.ok-text { color: var(--ok); }
td.nowrap, .nowrap { white-space: nowrap; }
td .mono, .small.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.bad-text { color: var(--bad); }
.dest-table td { vertical-align: top; }
.dest-table td.dest-name { min-width: 220px; max-width: 340px; }
.dest-table td.dest-name .mono { word-break: break-all; }
.dest-table td.dest-status { min-width: 130px; max-width: 280px; }
.dest-table td.dest-status .small { margin-top: 4px; line-height: 1.35; }
/* SCTE-104 -> SCTE-35 flow */
.flow-104 { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.flow-104 .flow-box { flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); }
.flow-104 .flow-box.accent { border-color: var(--accent); }
.flow-104 .flow-box span, .flow-104 .flow-arrow span { color: var(--dim); font-size: 12px; }
.flow-104 .flow-arrow { flex: 1 1 140px; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 12px; color: var(--text); position: relative; padding: 0 6px; }
.flow-104 .flow-arrow::after { content: "→"; font-size: 18px; color: var(--accent); }

/* SCTE page: protocol badges, trigger results */
.proto { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.proto.sm { padding: 1px 6px; font-size: 11px; }
.proto.p35 { background: rgba(57, 135, 229, .16); color: #7fb3f5; border: 1px solid rgba(57, 135, 229, .45); }
.proto.p104 { background: rgba(217, 89, 38, .14); color: #f0a07e; border: 1px solid rgba(217, 89, 38, .45); }
.scte-protos .card { padding: 14px 16px; }
.proto-line { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.proto-line .proto { margin-top: 2px; }
.trg-dests h3.sub-h { display: flex; align-items: center; gap: 8px; }
.trg-result { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); display: grid; gap: 6px; font-size: 13px; }
.trg-row { line-height: 1.5; }
.pill.sm { padding: 1px 8px; font-size: 11px; }
.w-xs { width: 64px; }
#trg-log .b64 { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 11px; color: var(--dim); }
.enc-item label.small { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.enc-item .enc-stats { margin-top: 2px; }
.sched-table td { vertical-align: middle; }
.sched-table .sc-status { color: var(--dim); margin-top: 2px; white-space: normal; max-width: 260px; }
.sched-table select[name=type] { margin-left: 4px; }
.sched-table th, .sched-table td { padding: 6px 8px; }
.sched-table select[name=cmd] { width: 118px; }
.sched-table select[name=type] { width: 150px; }
.sched-table input.w-xs { width: 58px; }
.sched-table .sched-dest { min-width: 170px; max-width: 220px; }
/* SCTE manual triggers grouped by source */
.trg-sources { display: grid; gap: 10px; }
.src-group { border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
.src-group .src-head { font-size: 14px; }
.src-group .src-dests { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0 26px; }
.enc-item label.small select { max-width: 200px; }
/* SCTE groups: a named set of destinations that take one cue together */
.proto.pgrp { background: rgba(62, 207, 142, .12); color: #7fe0b4; border: 1px solid rgba(62, 207, 142, .4); }
.grp-list { display: grid; gap: 10px; }
.grp-row { border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; background: var(--panel); display: grid; gap: 8px; }
.grp-head { font-size: 14px; }
.grp-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.grp-chip { white-space: nowrap; font-size: 13px; }
.grp-actions { gap: 6px; }
.grp-editor { margin-top: 12px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 8px; }
.grp-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.dest-scte { margin-top: 6px; display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) { .grp-chip { white-space: normal; } .dest-scte { justify-content: flex-start; } }

/* This computer (browser edge agent) */
.edge-dev { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.edge-dev .tag { font-size: 11px; padding: 1px 6px; border-radius: 99px; background: var(--line-2); color: var(--text); margin-left: 4px; }
.edge-cap { display: grid; grid-template-columns: 200px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; align-items: start; }
.edge-cap video { width: 200px; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; object-fit: contain; }
.edge-cap-info { display: grid; gap: 6px; min-width: 0; }
.edge-cap-info .kv { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px 12px; }
.edge-cap-info .kv div b { font-size: 13px; }
@media (max-width: 640px) { .edge-cap { grid-template-columns: 1fr; } .edge-cap video { width: 100%; } }

/* received / transmitted clocks */
.tclock { font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }

/* capture devices: a checklist, several at once */
.devlist { display: grid; gap: 4px; max-height: 420px; overflow: auto; }
.devgroup { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.devgroup button { font-size: 11px; padding: 1px 8px; }
.devrow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; flex-wrap: wrap; }
.devrow.on { border-color: var(--accent); }
.devrow.off { opacity: .55; }
.devrow > label { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; cursor: pointer; font-size: 13px; color: var(--text); }
.devrow > label span { overflow: hidden; text-overflow: ellipsis; }
.devrow input[type=checkbox], .edge-dev input[type=checkbox] { width: auto; flex: none; margin: 0; padding: 0; }
.devrow select { width: auto; max-width: 240px; }
.edge-dev label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text); }
.edge-add { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin-top: 10px; }
.edge-dev.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.edge-dev select { margin-left: auto; width: auto; max-width: 220px; }
label[data-dest="fill"] select { width: 330px; max-width: 100%; }

.edge-pc { display: grid; gap: 0; margin-bottom: 10px; }
.crop-pick { margin-top: 12px; display: grid; gap: 8px; max-width: 760px; }
.crop-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; user-select: none; touch-action: pan-y; cursor: pointer; }
.crop-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.crop-off { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: #aaa; font-size: 13px; text-align: center; padding: 12px; z-index: 2; pointer-events: none; } /* over the frame, but the frame stays draggable */
.crop-off span:empty { display: none; }
.crop-off button { pointer-events: auto; }
.crop-shade { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.62); pointer-events: none; }
.crop-win { position: absolute; top: 0; bottom: 0; border: 2px solid #ffd400; box-shadow: 0 0 0 1px rgba(0,0,0,.6); cursor: grab; touch-action: none; display: flex; align-items: flex-start; justify-content: center; }
.crop-win:active { cursor: grabbing; } .crop-win:focus-visible { outline: 3px solid var(--accent); }
.crop-win span { margin-top: 6px; padding: 1px 6px; border-radius: 4px; background: #ffd400; color: #000; font-size: 11px; font-weight: 600; }
.crop-range { width: 100%; }
dialog.dialog.crop-dialog { width: min(1040px, calc(100vw - 32px)); }
dialog.dialog.av-dialog { width: min(560px, calc(100vw - 32px)); }
.av-rows { display: grid; gap: 10px; margin: 12px 0; }
.av-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.av-lab { min-width: 96px; font-weight: 600; }
.av-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
dialog.dialog .av-steps input { width: 76px; flex: none; }
@media (max-width: 480px) { .av-lab { flex-basis: 100%; } .av-steps { gap: 4px; } }
/* a logo on a shared encode: the preview beside the library and controls; stacked on a phone, the preview kept in view while sliding */
dialog.dialog.wm-dialog { width: min(900px, calc(100vw - 32px)); outline: none; } /* focused itself on opening, for the keyboard to start at its top */
.wm-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 640px) { .wm-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .wm-body.portrait { grid-template-columns: min(40%, calc(min(50vh, 480px) * 9 / 16)) minmax(0, 1fr); } } /* portrait: the column as wide as the picture */
.wm-view { display: grid; gap: 6px; justify-items: center; min-width: 0; position: sticky; top: 0; z-index: 2; background: var(--card); padding: 4px 0 8px; } /* the dialog scrolls: the preview stays in view */
.wm-view > div { justify-self: stretch; }
.wm-stage { position: relative; width: min(100%, calc(56vh * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #5b7fa6 0%, #8fb0cf 46%, #3f7a4a 46.5%, #2e5e37 100%); } /* a sample sky and pitch: mid-tones to judge the opacity on */
.wm-stage.portrait { aspect-ratio: 9 / 16; width: min(100%, calc(min(50vh, 480px) * 9 / 16)); }
@media (max-width: 639px) { .wm-stage { width: min(100%, calc(36vh * 16 / 9)); } .wm-stage.portrait { width: min(100%, calc(min(30vh, 360px) * 9 / 16)); } } /* above the controls: room left to slide */
@media (max-width: 639px) and (max-height: 520px) { .wm-view { position: static; } } /* a phone on its side: no room to keep it in view */
.wm-stage video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.wm-mark { position: absolute; height: auto; max-width: none; pointer-events: none; z-index: 1; image-orientation: none; } /* as ffmpeg draws it: a JPEG's EXIF rotation is not applied on air */
.wm-bg { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.wm-tools { display: grid; gap: 10px; min-width: 0; }
.wm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wm-lab { font-weight: 600; }
.wm-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); gap: 8px; max-height: 236px; overflow: auto; padding: 2px; }
.wm-lib .empty { grid-column: 1 / -1; padding: 6px 0; }
.wm-logo { position: relative; min-width: 0; }
.wm-pick { display: grid; gap: 3px; width: 100%; min-width: 0; padding: 6px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.wm-pick:hover { border-color: var(--dim); }
.wm-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wm-logo.on .wm-pick { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(79,143,247,.1); }
.wm-thumb { display: flex; align-items: center; justify-content: center; height: 56px; padding: 4px; border-radius: 5px; overflow: hidden;
  background: repeating-conic-gradient(#3a404c 0 25%, #272c35 0 50%) 0 0 / 12px 12px; } /* a checkerboard: a transparent background shows as one */
.wm-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; image-orientation: none; }
.wm-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-del { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(16,20,27,.88); color: var(--bad); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.wm-del:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.wm-pos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 320px; }
.wm-pos button { padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 7px; background: transparent; color: var(--dim); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.wm-pos button:nth-child(2n) { text-align: right; }
.wm-pos button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wm-slides { display: grid; gap: 6px; }
dialog.dialog label.wm-slide { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
dialog.dialog .wm-slide input[type=range] { width: 100%; min-width: 0; padding: 0; border: 0; background: none; accent-color: var(--accent); }
.wm-slide output { text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); }
/* the same dialog for upcoming matches: the destination names to tick above the library; the preview's shape when they differ */
.wm-for { display: grid; gap: 6px; }
.wm-for-all { display: inline-flex; gap: 6px; }
.wm-names { display: grid; gap: 2px; max-height: 188px; overflow: auto; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 8px; }
.wm-names .empty { padding: 6px 0; }
dialog.dialog label.wm-name-pick { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; cursor: pointer; }
dialog.dialog label.wm-name-pick input { margin-top: 2px; flex: none; }
.wm-name-pick > span { min-width: 0; overflow-wrap: anywhere; }
.wm-shape { margin: 0; align-items: center; }
.wm-shape button { padding: 3px 10px; font-size: 12px; }
/* the logo dragged into place: the picture takes the press (no page scroll from it), the line it snapped to; the margin is for corners */
.wm-stage.can-drag { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.wm-stage.can-drag.dragging { cursor: grabbing; }
.wm-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wm-guide { position: absolute; z-index: 2; pointer-events: none; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.wm-guide.v { top: 0; bottom: 0; width: 2px; } .wm-guide.h { left: 0; right: 0; height: 2px; }
dialog.dialog label.wm-slide.off { opacity: .5; }
/* read by a screen reader, not shown (the logo's place after an arrow key or a drag) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* an event's destination: its Logo button shows the choice (cut short on a narrow screen; the whole of it in its tip) */
.ev-dest .row > label.ev-logo-f { min-width: 0; max-width: min(240px, 100%); } /* (over .row > label's 100%) */
.ev-logo-f .ev-logo { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: left; padding: 6px 10px; font-size: 13px; border-radius: 6px; } /* as tall as the fields beside it */
.ev-logo-f .ev-logo.on { border-color: var(--accent); }
#crop-live { width: min(100%, calc((100dvh - 400px) * 16 / 9)); min-width: min(100%, 320px); margin-inline: auto; } /* the whole window fits the screen's height; the slider lines up under the picture */
.crop-stage.follow { touch-action: none; cursor: crosshair; } /* pressing on the picture moves the frame, not the page */
.crop-air { position: absolute; top: 0; bottom: 0; border: 2px dashed rgba(255,255,255,.9); pointer-events: none; }
.crop-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.crop-tools .bill-tabs { margin: 0; align-items: center; }
.ev-tools { gap: 6px; flex-wrap: wrap; }
.ev-filter { align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ev-when { white-space: nowrap; } .ev-when .small { white-space: normal; }
.ev-dests-cell > span { display: block; margin-bottom: 2px; }
dialog .form-actions { flex-wrap: wrap; }
dialog.dialog.ev-dialog { width: min(980px, calc(100vw - 32px)); }
.ev-dest { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; display: grid; gap: 6px; }
.ev-dest .row { gap: 8px; flex-wrap: wrap; }
.ev-dest .row label { min-width: 0; }
.ev-countdown { font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 10px 0; color: var(--warn, #d9a400); }
dialog.dialog.src-dialog { width: min(900px, calc(100vw - 32px)); }
.src-dialog > * + * { margin-top: 12px; }
.src-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.src-card { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; display: grid; align-content: start; }
.src-card video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; object-fit: contain; }
.src-card .src-body { padding: 8px 10px 10px; display: grid; gap: 4px; min-width: 0; }
.src-card .src-body b { overflow-wrap: anywhere; }
.src-card .btn { margin-top: 4px; justify-content: center; }
.ev-log { display: block; max-height: 160px; overflow: auto; font-size: 12px; margin-top: 6px; } /* its own lines under the status line */
#ev-now .item .grow { white-space: normal; overflow-wrap: anywhere; } /* the no-feed warning and the kept-on note are never cut off */
#ev-now .item > .row { gap: 6px; } /* wraps under the text when there is no room beside it */
#ev-stopnow-dialog .form-actions { margin-top: 16px; }
#ev-running-note { margin: 4px 0 2px; }
.ev-dialog input:disabled, .ev-dialog select:disabled { opacity: .5; cursor: not-allowed; } /* a running event's times and destinations: shown, not changed */
.deint-box { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; background: rgba(79,143,247,.08); }
.deint-box label.check { padding-bottom: 0; font-size: 14px; }
.deint-box .small { flex: 1 1 260px; min-width: 0; }
.deint-check { padding: 6px 10px !important; border: 1px solid var(--accent); border-radius: 8px; background: rgba(79,143,247,.08); flex-wrap: wrap; }
.deint-tog { margin-top: 4px; }
.deint-tog.off { border-color: var(--warn, #d9a400); color: var(--warn, #d9a400); }
.edge-others { margin-top: 4px; line-height: 2.2; }
.edge-others .nowrap { margin-right: 10px; white-space: normal; overflow-wrap: anywhere; }
.edge-pc-devs { margin: -2px 0 4px 0; padding: 10px 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; display: grid; gap: 4px; font-size: 13px; }
.small.warn { color: var(--warn); }

.edge-find { flex-basis: 100%; display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.edge-find img { width: 112px; height: 63px; object-fit: cover; border-radius: 4px; background: #000; }
.small.ok { color: var(--ok); }

/* the on-demand media server (two-server setup) */
.power { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; }
.power .power-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.power .error:empty { display: none; }
.power .error { flex-basis: 100%; }
body.media-off .content > section[data-view]:not([data-view="edge"]):not([data-view="help"]):not([data-view="billing"]):not([data-view="events"]):not([data-view="settings"]) { display: none !important; }
body.media-off .content > section[data-view="settings"] > :not(#lic-card) { display: none !important; } /* the media server off: only the licence (it is on the dashboard server) */

/* sign-in (two-server setup with a password): the first screen */
.login { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.login[hidden] { display: none; }
.login-card { width: min(360px, 100%); display: grid; gap: 14px; padding: 24px; }
.login-card .brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.login-card input { width: 100%; }
.login-card .btn { justify-content: center; }
.login-card .error:empty { display: none; }

/* power bar: the match and the size */
.power .power-line { flex-basis: 100%; }
.power .power-line:empty { display: none; }
.power .power-line .btn { margin-left: 8px; }
/* match name dialog */
dialog.dialog { color: var(--text); width: min(440px, calc(100vw - 32px)); padding: 22px; }
dialog.dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog.dialog form { display: grid; gap: 14px; }
dialog.dialog input { width: 100%; }
/* billing */
.bill-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bill-tabs button { background: transparent; color: var(--dim); border: 1px solid var(--line-2); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.bill-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bill-body { display: grid; gap: 18px; }
.bill-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bill-tiles .tile b { font-variant-numeric: tabular-nums; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-bar { height: 8px; border-radius: 4px; background: var(--accent); min-width: 2px; }
.bill-barcell { width: 30%; }
.bill-notes { margin: 0; padding-left: 18px; color: var(--dim); font-size: 12px; display: grid; gap: 4px; }
.bill-match { cursor: pointer; }
.bill-match:hover td { background: var(--line); }
.bill-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .bill-tiles { grid-template-columns: 1fr 1fr; } .bill-barcell { display: none; } }
/* label / value rows placed straight in an output's detail section: one per line, label left, value right */
.detail-grid > div > div:not([class]) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.detail-grid > div > div:not([class]) > span { color: var(--dim); }
.detail-grid > div > div:not([class]) > b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------------- responsive layout
   Nothing may widen the page: grid and flex children can shrink, fixed-width fields stop at their box, long names and
   addresses wrap. A data table that needs more room than its card has shows each row as a card instead (app.js sets
   .stacked below the width given in data-stack, and labels every cell with its column's name). */
.content { max-width: 1640px; }
.content > section, .content > section > *, .grid-2 > *, .monitor > *, .detail-grid > *, .charts > * { min-width: 0; }
.card-head { flex-wrap: wrap; }
.card-head > .row, .card-head > h2 { min-width: 0; }
.row > label, label.wide { max-width: 100%; }
.row > label select, .row > label input:not([type=checkbox]):not([type=radio]), .w-l, .w-xl, .w-m, .w-s { max-width: 100%; }
label.wide { min-width: min(240px, 100%); }
.charts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cue-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.detail-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grp-members { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.plat-picker { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.detail-grid .mono, .detail-grid code, .trg-result, .grp-row, .src-group { overflow-wrap: anywhere; }
.list, .grp-list, .trg-sources { grid-template-columns: minmax(0, 1fr); }
.list .item { min-width: 0; flex-wrap: wrap; }
.list .item .grow { flex: 1 1 220px; }
.enc-item .grow { white-space: normal; }
.enc-item label.small { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; margin: 4px 12px 0 0; }
.enc-item label.small select { max-width: min(240px, 100%); }
.dest-scte { flex-wrap: wrap; }

/* tables: room to wrap */
.table td { overflow-wrap: break-word; }
.table .addr { max-width: 240px; }
.table td.actions { white-space: normal; min-width: 150px; }
.table td.actions .btn { margin: 2px 0 2px 4px; }
.table .pill { white-space: normal; }
.table.mini td { overflow-wrap: anywhere; }
/* the routing matrix keeps its grid and scrolls sideways when it must, the output names staying in view */
.matrix th:first-child, .matrix td:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }
.matrix th.xin { min-width: 96px; max-width: 160px; overflow-wrap: anywhere; }

/* a table shown as cards: one card per row, the first cell as its title, every other cell under its column's name */
.table.stacked, .table.stacked > tbody { display: block; width: 100%; }
.table.stacked > thead { display: none; }
.table.stacked > tbody > tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px 18px; align-items: start;
  padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.table.stacked > tbody > tr:last-child { margin-bottom: 0; }
.table.stacked > tbody > tr > td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; width: auto; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.table.stacked > tbody > tr > td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.table.stacked > tbody > tr > td:first-child, .table.stacked > tbody > tr > td[colspan], .table.stacked > tbody > tr > td.actions, .table.stacked > tbody > tr > td[data-label=""] { grid-column: 1 / -1; }
.table.stacked > tbody > tr > td:first-child { font-size: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.table.stacked > tbody > tr > td:first-child::before { display: none; }
.table.stacked > tbody > tr > td.actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.table.stacked > tbody > tr > td.actions .btn { margin: 0; }
.table.stacked > tbody > tr > td.actions > div { flex-basis: 100%; justify-content: flex-start; }
.table.stacked .addr { max-width: 100%; white-space: normal; word-break: break-all; display: inline; }
.table.stacked .spark { max-width: 100%; }
.table.stacked > tbody > tr.detail { display: block; padding: 0; margin-top: -4px; border: 0; background: none; }
.table.stacked > tbody > tr.detail > td { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.table.stacked > tbody > tr > td .empty { margin: 0; }
.sched-table.stacked input.w-xs { width: 80px; }
label.inline { max-width: 100%; min-width: 0; display: inline-flex; align-items: center; gap: 8px; }
label.inline select { min-width: 0; flex: 1 1 auto; }
.card-head > .row { min-width: 0; max-width: 100%; }
.table.stacked > tbody > tr > td:first-child[data-label]::before { display: none; }
/* the small bitrate chart: scale and time labels, gridline */
.spark .ax { fill: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.spark .ax-line { stroke: var(--line-2); stroke-width: 1; }
.spark .gl { stroke: var(--line); stroke-width: 1; }
.table.stacked .spark { width: 100%; max-width: 340px; height: auto; }
.pill.paused { color: #8fb4ff; border-color: rgba(79, 143, 247, .45); }
/* SCTE page: platform notes wrap; names in "Ticked below" wrap between words; long status notes wrap */
#dest35 .item .grow { white-space: normal; }
.src-group { overflow-wrap: break-word; }
.src-dests label.check { flex-wrap: wrap; }
.src-group .pill, .grp-chip .pill { white-space: normal; }
/* routing matrix: a crosspoint the server would refuse is greyed out; its cell explains why on hover */
.xp.blocked { cursor: not-allowed; }
.xpt:disabled { opacity: .35; border-style: dashed; cursor: not-allowed; pointer-events: none; background: repeating-linear-gradient(45deg, transparent 0 3px, var(--line-2) 3px 4px); }
.matrix th .pill { text-transform: none; letter-spacing: 0; font-size: 11px; }
.table .pill { border-radius: 12px; } /* a status that wraps stays a tidy box */
/* review 2: readable chart scales, no clipped axis labels, tidy pills, small tables that scroll, card titles */
.chart svg, .chart-sm svg, svg.spark { overflow: visible; } /* the scale's labels may use the box's padding */
.spark .ax { fill: var(--dim); font-size: 10px; }
h2 .cap { text-transform: none; letter-spacing: 0; font-weight: 500; }
.pill::before { flex: none; }
.matrix th.xin .pill { overflow-wrap: normal; }
.table.mini td { overflow-wrap: break-word; }
#enc-list .item .grow, .edge-pc > .item .grow { white-space: normal; }
select[data-rtmp-format] { width: auto; justify-self: start; max-width: 100%; }
/* live platforms as cards: the destination's name is the card's title, the platform a field */
.table.stacked.dest-table > tbody > tr > td.dest-name { order: -1; grid-column: 1 / -1; font-size: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.table.stacked.dest-table > tbody > tr > td.dest-name::before { display: none; }
.table.stacked.dest-table > tbody > tr > td:first-child { grid-column: auto; font-size: inherit; padding-bottom: 0; border-bottom: 0; }
.table.stacked.dest-table > tbody > tr > td:first-child[data-label]:not([data-label=""])::before { display: block; }
/* This computer: computers and their inputs on the left, the chosen input playing on the right */
.edge-servers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.edge-watch { display: grid; gap: 6px; position: sticky; top: calc(var(--top) + 12px); }
.edge-in { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0 0 18px; padding: 7px 10px; max-width: calc(100% - 18px); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.edge-in:hover { border-color: var(--accent); }
.edge-in.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,143,247,.25); }
.edge-in .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .edge-servers { grid-template-columns: minmax(0, 1fr); } .edge-watch { position: static; } }
.edge-in { flex-wrap: wrap; }
.edge-in .grow { flex: 1 1 180px; }
/* Running now: readiness and ad breaks under each running event */
.ev-now-item + .ev-now-item { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.ev-ready { margin: 2px 0 6px; }
.ev-ads { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; margin: 2px 0 6px; }
.ev-ads .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ev-ads .w-xs { width: 70px; }
dialog.dialog label.check input { width: auto; } /* a tick box keeps its own size next to its words */
/* audio channels: a chip per source channel */
.mix-pick { margin-top: 10px; display: grid; gap: 6px; }
.mix-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mix-chip { min-width: 44px; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; display: grid; justify-items: center; line-height: 1.2; }
.mix-chip small { font-size: 11px; font-weight: 500; color: var(--dim); }
.mix-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mix-chip.on small { color: #fff; }
.mix-chip.warn { background: transparent; border-color: var(--warn, #c80); color: var(--warn, #c80); }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
/* SCTE: Ad break now */
.adnow-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.adnow-row .bill-tabs { margin: 0; align-items: center; }
.adnow-start { font-size: 15px; padding: 9px 18px; }
.adnow-stop { font-size: 15px; padding: 9px 18px; }
.adnow-state { margin: 10px 0 6px; }
.adnow-to { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.adnow-ovr { margin-top: 10px; }
.adnow-on, .adnow-off { font-size: 15px; padding: 9px 18px; font-weight: 700; }
.adnow-on { background: var(--bad); border-color: var(--bad); }

/* the licence: Activate screen, warning, Settings card */
.activate-card { width: min(560px, 100%); }
.activate-card textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; resize: vertical; }
.act-box { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow-wrap: anywhere; }
.act-box[hidden], .act-ok[hidden], .act-power[hidden] { display: none; }
.act-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.act-id code { font-size: 15px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.act-box.revoke { border-color: var(--bad); }
.act-ok { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ok); }
.act-buttons { display: flex; gap: 10px; }
.act-buttons .btn { flex: 1; justify-content: center; }
.act-power { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lic-warn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-color: var(--warn); }
.lic-warn[hidden] { display: none; }
#activate { display: flex; overflow-y: auto; } /* taller than a small window: it scrolls (centred when it fits) */
#activate[hidden] { display: none; }
#activate .login-card { margin: auto; }
#lic-kv code { white-space: nowrap; font-size: 12px; }
#login { z-index: 60; } /* the sign-in over the Activate screen: signing in reaches what is running */
#login-lic[hidden], .act-grace[hidden] { display: none; }
#login-lic { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.act-grace { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--warn); }
.lic-warn.bad { border-color: var(--bad); }