/* Mobile-first: one centred column; rows stay on one line and truncate with an ellipsis. */
:root{--bg:#10171b;--panel:#152228;--panel-2:#1b2c33;--line:#2a3d46;--text:#e9eeef;--muted:#93a7b0;--good:#8cd4b2;--wait:#f0c674;--bad:#f2917b;--current:#1f4a43;--next:#1d3038;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);color-scheme:dark;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
a{color:#a8d8e6}
main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:16px 16px 24px}
footer{padding:16px;text-align:center;font-size:12px;color:var(--muted)}
h1,h2,h3{margin:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid #a8d8e6;outline-offset:2px}
.one-line,.show-name,#detail-name,.head-name,.cue-label,.cue-notes,.track,td.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* Browser connection: invisible while live, a slim banner otherwise. */
.connection{position:sticky;top:0;z-index:2;text-align:center;font-size:13px;padding:6px 12px;background:#3b3220;color:var(--wait)}
.connection.bad{background:#3d2420;color:var(--bad)}
.connection.good{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0)}

/* Status chips */
.badges{display:flex;gap:6px;align-items:center;min-width:0;overflow:hidden}
.badges.centered{justify-content:center;margin:6px 0 14px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1;padding:4px 8px;border-radius:999px;background:var(--panel-2);color:var(--muted);white-space:nowrap}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.badge.good{color:var(--good)}.badge.wait{color:var(--wait)}.badge.bad{color:var(--bad)}.badge.muted{color:var(--muted)}
.badge.muted .dot{background:transparent;border:1.5px solid currentColor}
.age{font-size:12px;color:var(--muted);white-space:nowrap}

/* Shared controls */
.bar{display:flex;gap:8px;align-items:center;margin:0 0 12px}
input[type=search],select{min-width:0;height:40px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:16px}
input[type=search]{flex:1}
select{flex:none;width:auto;padding-right:8px}
.toggle{flex:none;display:flex;align-items:center;gap:5px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;font-size:14px;cursor:pointer;white-space:nowrap}
.toggle input{width:16px;height:16px;margin:0;accent-color:var(--good)}
.notice,#notice:not(:empty){color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px;line-height:1.45;font-size:14px;text-align:center}
#notice:empty,#detail-notice:empty{display:none}
.count{margin:10px 0 0;text-align:center;font-size:12px;color:var(--muted)}

/* Directory */
.hero{display:flex;justify-content:center;padding:12px 0 20px;color:var(--text)}
.hero .plaque{width:min(200px,55vw);height:auto;display:block}
.show-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.show-row{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-decoration:none}
.show-row:active,.show-row:hover{background:var(--panel-2)}
.show-row.offline{opacity:.65}
.row-top{display:flex;align-items:baseline;gap:10px;min-width:0}
.show-name{flex:1;font-size:17px;font-weight:600}
.show-meta{flex:none;font-size:12px;color:var(--muted)}

/* Show page */
.detail-top{display:flex;align-items:center;margin-bottom:6px}
.back{font-size:15px;text-decoration:none;padding:6px 0}
#detail-name{font-size:22px;text-align:center;letter-spacing:-.01em}
.live-grid{display:grid;gap:10px;margin-bottom:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px;min-width:0}
.card.dim{opacity:.7}
.card.error{color:var(--bad);text-align:center}
.card-head{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.1em;color:var(--muted);min-width:0}
.card-head>span:first-child{flex:none}
.head-name{text-align:right}
.cue-line{display:grid;grid-template-columns:38px auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0}
.cue-line.empty{grid-template-columns:38px 1fr}
.slot{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cue-number{font-size:26px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.1}
.cue-line.next .cue-number{font-size:18px;color:var(--muted)}
.cue-text{display:grid;min-width:0}
.cue-label{font-size:16px}
.cue-line.next .cue-label{font-size:14px;color:var(--muted)}
.cue-notes{font-size:12px;color:var(--muted)}
.cue-fade{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cue-empty{font-size:14px;color:var(--muted)}
.cue-line.next{padding-top:8px;border-top:1px solid var(--line)}
.track{font-size:16px;font-weight:600}
.pills{display:flex;gap:6px;overflow:hidden}
.pills span{font-size:12px;padding:3px 8px;border-radius:6px;background:var(--panel-2);white-space:nowrap}
.card dl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:0}
dt{font-size:11px;color:var(--muted)}
dd{margin:2px 0 0;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .muted{font-size:12px;color:var(--muted);text-align:center}

/* Cue lists */
.catalogue{margin-bottom:20px}
.tabs{display:flex;gap:4px;padding:4px;margin-bottom:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.tabs[hidden]{display:none}
.tabs button{flex:1;min-width:0;display:flex;justify-content:center;gap:6px;padding:8px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.tabs button.active{background:var(--panel-2);color:var(--text)}
.tab-name{overflow:hidden;text-overflow:ellipsis}
.table-wrap{max-height:55vh;max-height:55dvh;overflow:auto;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed}
th{position:sticky;top:0;background:var(--panel-2);color:var(--muted);text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;font-weight:600}
td{padding:9px 10px;border-top:1px solid #213139}
th:first-child,td:first-child{width:64px;font-variant-numeric:tabular-nums}
th.time,td.time{width:84px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
tr.current{background:var(--current)}
tr.current td:first-child{box-shadow:inset 3px 0 0 var(--good);font-weight:650}
tr.next{background:var(--next)}
tr.next td:first-child{box-shadow:inset 3px 0 0 var(--muted)}

/* Delete */
.danger{display:grid;gap:8px;justify-items:center;text-align:center;padding:14px;border:1px solid #4a302a;border-radius:14px;background:#1a1717}
button#delete{font:inherit;font-size:15px;border-radius:10px;padding:10px 18px;border:1px solid #8a4a3c;background:#5a2a22;color:#fff;cursor:pointer}
button#delete:disabled{opacity:.5;cursor:default}
#delete-status{margin:0;font-size:13px;color:var(--muted)}
#delete-status:empty{display:none}
#delete-status.error{color:var(--bad)}
.fine{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}