:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--text);background:var(--page);color-scheme:light;--surface:#fff;--accent:#3157d5;--topbar:#111827;--on-brand:#fff;--focus:#3157d5;--text:#172033;--page:#f4f6f9;--brand:#3157d5;--border:#dce1ea;--muted:#667085;--danger:#bd2c2c;--link:#294fc2;--label:#344054;--input-border:#cbd2dd;--border-soft:#edf0f4;--neutral-bg:#f1f5f9;--success-bg:#dcfce7;--success-text:#166534;--error-bg:#fee2e2;--error-text:#991b1b;--neutral-text:#475569;--info-bg:#e5eaff;--info-text:#3247a8;--warning-bg:#fff4d6;--warning-text:#7c4a03;--hover:#eef2ff;--subtle:#f7f9fd;--selection:#eaf0ff;--selection-border:#8da4ef;--thumbnail:#edf2fa;--secondary:#596579}
[data-theme="dark"]{color-scheme:dark;--text:#e7ecf5;--page:#10151e;--surface:#1a2230;--accent:#a8bdff;--topbar:#090e17;--brand:#4569e0;--link:#a8bdff;--border:#3c485c;--border-soft:#313c4e;--input-border:#53617a;--muted:#b1bed2;--label:#d4dded;--danger:#c83e4b;--secondary:#505f78;--hover:#283650;--subtle:#202b3d;--selection:#283a60;--selection-border:#8da4ef;--thumbnail:#202b3d;--neutral-bg:#303b4c;--neutral-text:#cad5e6;--success-bg:#173e30;--success-text:#99ecc0;--error-bg:#50262b;--error-text:#ffb4bb;--warning-bg:#48371b;--warning-text:#ffdc91;--info-bg:#293957;--info-text:#bacbff;--focus:#a8bdff}
*{box-sizing:border-box}body{margin:0}a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}.topbar{min-height:var(--header-height);background:var(--topbar);color:#fff;display:flex;align-items:center;padding:0 24px;gap:18px;flex-wrap:wrap}.topbar a{color:#fff;font-weight:700}.topbar form{margin:0}.spacer{flex:1}.link{background:none;padding:0}.shell{min-height:calc(100vh - var(--navigation-height))}.primary-navigation{background:var(--surface);border-bottom:1px solid var(--border);padding:2px 24px;display:flex;flex-wrap:wrap;gap:4px}.primary-navigation a{padding:6px 14px;border-radius:7px;color:var(--label)}.primary-navigation a:hover{background:var(--hover);text-decoration:none}.content{padding:28px;width:100%;overflow:visible}h1{font-size:1.75rem;margin:0 0 22px}h2{font-size:1.08rem;margin:0 0 16px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;margin:0 0 20px;box-shadow:0 1px 2px #1018280a}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.cards article{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;display:grid;gap:6px}.cards strong{font-size:1.8rem}.cards span{color:var(--muted)}form{display:flex;gap:12px;align-items:end}.inline-form{flex-wrap:wrap}.inline-form label{min-width:210px}.grow{flex:1}.compact-form{align-items:center}.compact-form input{width:95px}.actions{display:flex;gap:8px;white-space:nowrap}.actions form{display:inline-flex}label{display:grid;gap:6px;font-weight:600;color:var(--label)}input,select,button{font:inherit;border-radius:7px}input,select{border:1px solid var(--input-border);background:var(--surface);padding:9px 11px;min-width:0}button{border:0;background:var(--brand);color:#fff;font-weight:650;padding:9px 14px;cursor:pointer}button:hover{filter:brightness(.94)}button.secondary{background:var(--secondary)}.danger{background:var(--danger)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:.92rem}th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--border-soft);vertical-align:top}th{color:var(--label);font-size:.79rem;text-transform:uppercase;letter-spacing:.04em}.path{max-width:360px;overflow-wrap:anywhere;color:var(--label)}.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:var(--neutral-bg);font-size:.8rem}.badge.recording,.badge.live,.badge.completed,.badge.enabled-yes{background:var(--success-bg);color:var(--success-text)}.badge.error,.badge.failed,.badge.storage_error,.badge.enabled-no{background:var(--error-bg);color:var(--error-text)}.badge.offline,.badge.disabled{background:var(--neutral-bg);color:var(--neutral-text)}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.alert{padding:11px 14px;border-radius:8px;margin-bottom:18px;background:var(--info-bg);color:var(--info-text)}.alert.error{background:var(--error-bg);color:var(--error-text)}.alert.success{background:var(--success-bg);color:var(--success-text)}.alert.warning{background:var(--warning-bg);color:var(--warning-text)}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings-grid h2{grid-column:1/-1}.details{display:grid;gap:0}.details>div{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:10px 0;border-bottom:1px solid var(--border-soft)}.details dt{font-weight:650;color:var(--label)}.details dd{margin:0;overflow-wrap:anywhere}.login-wrap{min-height:calc(100vh - var(--navigation-height));display:grid;place-items:center;padding:20px}.login-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px;box-shadow:0 10px 30px #10182814}.login-card form,.narrow{display:grid;align-items:stretch}.nav-toggle{display:none;background:none;font-size:1.25rem;padding:4px}@media(max-width:800px){.navigation-ready .primary-navigation{display:none}.navigation-ready .primary-navigation.open{display:flex}.navigation-ready .nav-toggle{display:block}.content{padding:18px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-grid{grid-template-columns:1fr}.details>div{grid-template-columns:1fr;gap:4px}.topbar{padding:0 14px}}@media(max-width:480px){.cards{grid-template-columns:1fr}.header-user{display:none}}
/* One header and one navigation list; measured height includes wrapping/zoom. */
:root{--header-height:60px;--navigation-height:109px;--sticky-offset:calc(var(--navigation-height) + 12px)}
.app-header{position:sticky;top:0;z-index:4;background:var(--topbar)}
html:not(.navigation-ready) .app-header{position:relative}
.app-header :focus-visible{outline-color:#fff}
.primary-navigation :focus-visible{outline-color:var(--focus);outline-offset:-3px}
.topbar>a{flex-shrink:0}.header-user{max-width:18vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navigation-user{display:none;color:var(--muted);padding:8px 14px;overflow-wrap:anywhere}
.narrow{max-width:46rem}
@media(max-width:800px){:root{--navigation-height:60px}.primary-navigation .navigation-user{display:block}.header-user{display:none}}
/* Persistent recording diagnostics wrap without widening history tables. */
.failure-panel { border-left: 4px solid var(--danger); }
.failure-panel p { white-space: pre-wrap; overflow-wrap: anywhere; }
.storage-cards strong { font-size: 1.2rem; overflow-wrap: anywhere; }

/* Library: shared cards for both list and grid, with page-local selection. */
.content.library-content{overflow:visible;min-width:0}
.muted,.recording-date{color:var(--muted);font-size:.86rem}
.library-heading,.library-controls,.selection-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.library-heading h1{margin:8px 0}.library-heading p{margin:0;color:var(--muted)}
.model-link{font-weight:650}.model-link span{margin-left:12px}
.location-tabs,.view-toggle{display:flex;flex-wrap:wrap;gap:4px;background:var(--subtle);border-radius:9px;padding:4px}
.location-tabs a,.view-toggle a{padding:8px 13px;border-radius:6px;color:var(--label);font-weight:600}
.location-tabs .current,.view-toggle .current{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px #10182815}
.library-filters{margin-bottom:24px}.library-filters label{min-width:120px;flex:1}.library-filters .grow{flex:2}
.selection-heading label{display:flex;align-items:center;font-size:.9rem}.recording-select input,.selection-heading input{width:18px;height:18px;accent-color:var(--accent);padding:0}
.bulk-toolbar{position:sticky;top:var(--sticky-offset);z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:var(--subtle);margin-bottom:18px;box-shadow:0 3px 12px #1720330b}
.bulk-toolbar.has-selection{border-color:var(--selection-border);background:var(--selection)}.bulk-toolbar strong{margin-right:auto;font-size:.9rem}
button:disabled{opacity:.45;cursor:not-allowed}.delete-confirm{font-size:.8rem;max-width:190px}.delete-confirm input{padding:6px 8px}
.recording-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;min-width:0;transition:border-color .15s}
.recording-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--brand)}
.recording-list{display:grid;gap:10px}.recording-list .recording-card{display:grid;grid-template-columns:24px 144px minmax(160px,1fr) minmax(90px,130px) minmax(110px,160px);gap:16px;align-items:center}
.thumbnail{aspect-ratio:16/9;width:100%;background:var(--thumbnail);position:relative;overflow:hidden;border-radius:7px;align-self:start}
.thumbnail img{display:block;width:100%;height:100%;object-fit:contain;background:var(--thumbnail)}.thumbnail img[hidden]{display:none}
.thumbnail .thumbnail-placeholder{position:absolute;inset:0}.thumbnail img[data-thumbnail]{position:relative}
.recording-title{display:block;font-size:1rem;font-weight:700;line-height:1.5;overflow-wrap:anywhere}.recording-filename{margin:4px 0 8px;font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}.recording-date{margin:8px 0 0}
h1.recording-title{font-size:1.75rem;margin:14px 0 22px}
.recording-info{min-width:0}.recording-meta{display:grid;gap:10px;font-size:.9rem}.recording-badges{display:flex;flex-wrap:wrap;gap:5px}
.badge.complete{background:var(--success-bg);color:var(--success-text)}.badge.partial{background:var(--warning-bg);color:var(--warning-text)}.badge.archive{background:var(--info-bg);color:var(--info-text)}.badge.trash{background:var(--error-bg);color:var(--error-text)}.badge.active{background:var(--warning-bg);color:var(--warning-text)}.badge.missing{background:var(--neutral-bg);color:var(--neutral-text)}
.recording-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.recording-actions form{margin:0}.recording-actions button,.button-link{padding:7px 10px;font-size:.82rem}.button-link{display:inline-block;border:1px solid var(--border);border-radius:7px;color:var(--accent);background:var(--surface);font-weight:650}
.recording-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.recording-grid .recording-card{display:flex;flex-direction:column;gap:12px}.recording-grid .recording-select{height:20px}.recording-grid .recording-actions{margin-top:auto}
.recording-detail{display:grid;grid-template-columns:minmax(220px,400px) minmax(0,1fr);gap:28px}.recording-detail .details>div{grid-template-columns:150px minmax(0,1fr)}
.pagination{display:flex;justify-content:center;gap:24px;align-items:center;margin-top:24px}.empty-library{padding:30px;text-align:center;grid-column:1/-1}.library-browser{overflow:visible}
@media(max-width:1150px){.recording-list .recording-card{grid-template-columns:24px 112px minmax(0,1fr) 120px}.recording-list .recording-actions{grid-column:3/-1}}
@media(max-width:700px){.recording-grid{grid-template-columns:1fr}.recording-list .recording-card{grid-template-columns:22px 100px minmax(0,1fr);gap:10px}.recording-list .recording-meta{grid-column:2/-1;display:flex;align-items:center;flex-wrap:wrap}.recording-list .recording-actions{grid-column:2/-1}.recording-detail{grid-template-columns:1fr}.bulk-toolbar{padding:10px}.bulk-toolbar strong{flex-basis:100%}.library-browser{padding:14px}.library-filters label{min-width:130px}.recording-detail .details>div{grid-template-columns:1fr}.recording-title{font-size:.92rem}}
@media(prefers-reduced-motion:reduce){.recording-card{transition:none}}
.badge.waiting{background:var(--warning-bg);color:var(--warning-text)}
.badge.idle,.badge.unknown{background:var(--neutral-bg);color:var(--neutral-text)}
.primary-navigation a.current,.primary-navigation a.current:hover{background:var(--selection);color:var(--accent);font-weight:700}
.button-link.primary{background:var(--brand);border-color:var(--accent);color:#fff}
.player-content{min-width:0}.player-heading{max-width:1200px;margin:0 auto 20px}.player-heading h1{margin:14px 0 6px}
.player-panel{max-width:1200px;margin:0 auto 20px;padding:16px}.video-stage{aspect-ratio:16/9;background:#000;display:grid;place-items:center;border-radius:7px;overflow:hidden}
.video-player{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#000}
.player-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px}.volume-control{display:flex;align-items:center;gap:12px;font-weight:600}.volume-control input{width:min(240px,42vw);padding:0}.volume-control output{min-width:3.5em}
.player-error{color:var(--error-text);overflow-wrap:anywhere}.player-error[hidden]{display:none}.player-content>.recording-actions{max-width:1200px;margin:0 auto}
.player-progress{display:flex;align-items:center;gap:12px;margin-top:14px;flex:none}.player-progress input{flex:1;min-width:0;width:100%;padding:0}.player-progress span{font-variant-numeric:tabular-nums;white-space:nowrap;min-width:3.5em}.player-progress span:last-child{text-align:right}.player-status[hidden]{display:none}
.player-panel:fullscreen{background:#000;border:0;border-radius:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff;overflow:hidden}.player-panel:fullscreen .video-stage{aspect-ratio:auto;flex:1;min-height:0}.player-panel:fullscreen .video-player{max-height:100%;min-height:0}.player-panel:fullscreen .player-controls,.player-panel:fullscreen .player-progress,.player-panel:fullscreen .player-status,.player-panel:fullscreen .player-error{flex:none}.player-panel:fullscreen .volume-control{color:#fff}.player-panel:fullscreen .player-error{color:#fca5a5}
@media(max-width:700px){.player-panel{padding:10px}.player-heading .recording-title{font-size:1.4rem}.player-controls{gap:12px}}
/* Chat stacks below the full-width player, including on small screens. */
.recorded-chat{min-width:0;margin-top:1rem}
.chat-events{list-style:none;padding:0;max-height:28rem;overflow:auto;overscroll-behavior:contain}
.chat-events li{display:grid;grid-template-columns:4.5rem minmax(5rem,10rem) minmax(0,1fr);gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--border)}
.chat-time{font-variant-numeric:tabular-nums;color:var(--muted)}
.chat-author{font-weight:600;overflow-wrap:anywhere}
.chat-text{white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}
.chat-controls{display:flex;flex-wrap:wrap;gap:.5rem}
@media(max-width:600px){.chat-events li{grid-template-columns:4.5rem minmax(0,1fr)}.chat-text{grid-column:1 / -1}}

/* Watch and browse: every collection rendered here is server bounded. */
.player-context{container-type:inline-size;container-name:watch}.player-heading{max-width:none}
.watch-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.watch-main,.watch-layout>*{min-width:0}.watch-main .player-panel{max-width:none;margin:0 0 16px}
[data-custom-controls][hidden]{display:none}
.player-controls{justify-content:flex-start;gap:8px;margin-top:8px}
.player-controls button{min-width:44px;min-height:44px;padding:8px 10px}
.player-controls .volume-control{margin-left:auto;gap:8px;font-size:.8rem}
.player-controls .volume-control input{width:90px;min-height:44px}
.player-controls .volume-control output{min-width:3em}
.player-progress{gap:8px}.player-progress input{min-height:44px;touch-action:pan-y}
.player-progress span{font-size:.8rem}.player-status{font-size:.85rem}
.recording-neighbors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}
.neighbor-card{display:grid;grid-template-columns:minmax(80px,36%) minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);min-width:0}
.neighbor-card:hover,.nearby-card:hover{border-color:var(--accent);text-decoration:none}
.neighbor-card>div{min-width:0}.neighbor-card span,.nearby-card span{display:block;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere;margin-top:5px}
.neighbor-card strong{font-size:.87rem}.neighbor-card .neighbor-direction{color:var(--accent);font-weight:650}
.neighbor-card.unavailable{display:flex;flex-direction:column;align-items:start;justify-content:center;background:var(--subtle)}
.nearby-recordings{padding:16px}.nearby-strip{display:flex;overflow-x:auto;gap:12px;padding:3px 3px 12px;scroll-snap-type:x proximity}
.nearby-card{flex:0 0 150px;min-width:0;border:1px solid var(--border);border-radius:8px;padding:8px;color:var(--text);scroll-snap-align:start}
.nearby-card[aria-current]{border-color:var(--accent);background:var(--selection)}.nearby-card strong{display:block;font-size:.78rem;margin-top:6px}
details>summary{cursor:pointer;font-weight:700;min-height:44px;line-height:1.5;padding:10px 0;overflow-wrap:anywhere}
.watch-layout .recorded-chat{margin:0}.watch-layout .chat-events{max-height:60vh}
.watch-layout .chat-events li{grid-template-columns:4.5rem minmax(0,1fr)}.watch-layout .chat-text{grid-column:1/-1}
.player-details .recording-actions{margin-top:16px}.player-details .details>div{grid-template-columns:120px minmax(0,1fr)}
.library-workspace{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}.library-workspace.model-workspace{grid-template-columns:minmax(0,1fr)}
.model-directory{position:sticky;top:var(--sticky-offset);max-height:calc(100dvh - var(--sticky-offset) - 12px);overflow:auto;padding:14px;min-width:0}
.model-search{display:grid;gap:8px;margin:8px 0 16px}.model-search label{min-width:0}.model-search input{width:100%}
.model-entries{max-height:55vh;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:5px;padding:3px}
.model-entry{display:grid;gap:5px;padding:10px;border:1px solid var(--border);border-radius:7px;color:var(--text);overflow-wrap:anywhere}
.model-entry:hover{background:var(--hover);text-decoration:none}.model-entry span{font-size:.78rem;color:var(--muted)}
.model-directory .pagination{gap:12px;flex-wrap:wrap;font-size:.85rem}.library-workspace .library-browser{min-width:0}
.library-storage,.model-storage{padding:8px 16px}.model-recording-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px}.model-recording-control p{margin:0}.model-recording-control .muted{flex-basis:100%;font-size:.78rem}
.library-workspace .recording-grid{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
@container watch (min-width:1200px){.watch-layout{grid-template-columns:minmax(0,1fr) clamp(340px,28cqi,420px)}.watch-layout .recorded-chat{position:sticky;top:var(--sticky-offset);max-height:calc(100dvh - var(--sticky-offset) - 12px);overflow:auto}.watch-layout .chat-events{max-height:clamp(140px,calc(100dvh - var(--sticky-offset) - 310px),60vh)}}
@media(max-width:1450px) and (min-width:801px){.library-workspace:not(.model-workspace) .recording-list .recording-card{grid-template-columns:24px 100px minmax(0,1fr)}.library-workspace:not(.model-workspace) .recording-list .recording-meta,.library-workspace:not(.model-workspace) .recording-list .recording-actions{grid-column:3/-1}}
@media(max-width:1000px){.library-workspace{grid-template-columns:minmax(0,1fr)}.model-directory{position:static}.model-directory .model-entries{max-height:180px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}.model-directory:not([open]){margin-bottom:0}}
@media(max-width:600px){.recording-neighbors{grid-template-columns:minmax(0,1fr);gap:10px}.neighbor-card{grid-template-columns:100px minmax(0,1fr);padding:10px}.player-controls .volume-control{margin-left:0}.player-controls{gap:6px}.player-controls .volume-control input{width:75px}.nearby-card{flex-basis:140px}.player-details .details>div{grid-template-columns:minmax(0,1fr)}.watch-layout .recorded-chat{padding:14px}}
@media(prefers-reduced-motion:reduce){.nearby-strip{scroll-behavior:auto;scroll-snap-type:none}}

:root{--restricted-bg:#ede6ff;--restricted-text:#6340a1}
[data-theme="dark"]{--restricted-bg:#382852;--restricted-text:#d6b9ff}
.badge.restricted{background:var(--restricted-bg);color:var(--restricted-text)}
.badge.interrupted{background:var(--warning-bg);color:var(--warning-text)}
input,select,textarea{color:var(--text);color-scheme:inherit}
textarea{font:inherit;border:1px solid var(--input-border);background:var(--surface);border-radius:7px;padding:9px 11px}
button{color:var(--on-brand)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button,.button-link{min-height:44px}
.theme-toggle{background:transparent;border:1px solid #ffffff55;min-width:44px;min-height:44px;display:grid;place-items:center;padding:4px;font-size:1.4rem;flex-shrink:0}
.nav-toggle{min-width:44px;min-height:44px;flex-shrink:0}
.topbar .link{min-height:44px;padding:4px}
.chat-event-tip .chat-author{color:var(--success-text)}
.chat-event-goal .chat-author{color:var(--info-text)}
.chat-event-system .chat-author{color:var(--muted)}
dialog{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:10px}
dialog::backdrop{background:#0008}
@media(max-width:480px){.topbar{padding:0 8px;gap:6px}.topbar>a{font-size:.86rem}.topbar .spacer{min-width:0}}
/* Diagnostics use text labels as well as visual grouping in both themes. */
.diagnostic-stats, .diagnostic-filters, .diagnostic-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.diagnostic-filters label { display: grid; gap: .3rem; min-width: 0; }
[data-diagnostic-bulk] { display: block; }
.diagnostic-table td, .diagnostic-timeline td { overflow-wrap: anywhere; max-width: 28rem; }
.diagnostic-native { border-inline-start: 3px solid var(--danger, #d65858); }
.diagnostic-provider { border-inline-start: 3px solid var(--accent, #598dda); }
.diagnostic-finalization { border-inline-start: 3px solid var(--muted, #8993a2); }
/* Shared mobile behavior for every management screen, including no-JS forms. */
html{scroll-padding-top:var(--sticky-offset)}
.content,.panel,form,label,.cards article,.library-heading>div{min-width:0}
h1,h2,h3,p,td,dd,.alert,.model-link{overflow-wrap:anywhere}
input,select,textarea{max-width:100%;min-height:44px}
input[type="checkbox"]{min-height:24px;min-width:24px;width:24px;height:24px;cursor:pointer}
.recording-select{min-width:24px;min-height:44px;display:flex;align-items:center}
.selection-heading label{min-height:44px}
.settings-form{display:block}.settings-form>.panel{width:100%}
.details dl{margin:0}.details dl>div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;padding:10px 0;border-bottom:1px solid var(--border-soft)}
.primary-navigation a,.location-tabs a,.view-toggle a,.pagination a{min-height:44px;display:flex;align-items:center}
.app-version{font-size:.8rem;color:var(--muted);margin-top:24px;padding-bottom:env(safe-area-inset-bottom)}
.skip-link{position:fixed;top:4px;left:4px;padding:12px;background:var(--surface);z-index:10;transform:translateY(-160%)}
.skip-link:focus{transform:none}
dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;padding:20px}
dialog form{flex-wrap:wrap}
.transition-sequence{padding-inline-start:24px}.transition-sequence li{padding:10px 8px;border-inline-start:3px solid var(--accent);margin-bottom:8px;overflow-wrap:anywhere}
.post-observations{margin:24px 0;border-top:1px solid var(--border);padding-top:12px}
@media(max-width:800px){
 .topbar{padding-inline-start:max(8px,env(safe-area-inset-left));padding-inline-end:max(8px,env(safe-area-inset-right))}
 .primary-navigation{padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));flex-direction:column;flex-wrap:nowrap;max-height:calc(100dvh - var(--topbar-height,var(--header-height)));overflow-y:auto}
 .content{padding:16px max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 .details dl>div{grid-template-columns:minmax(0,1fr);gap:4px}
 .filters>*{flex:1 1 160px;min-width:0}
 .actions{white-space:normal;flex-wrap:wrap}
 [data-mobile-table]{display:block}
 [data-mobile-table] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 [data-mobile-table] tbody{display:grid;gap:14px}
 [data-mobile-table] tr{display:block;border:1px solid var(--border);border-radius:8px;padding:8px;background:var(--surface)}
 [data-mobile-table] tr[hidden]{display:none}
 [data-mobile-table] td{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;border:0;padding:7px 6px;max-width:none;min-width:0;width:auto}
 [data-mobile-table] td::before{content:attr(data-label);font-size:.75rem;font-weight:700;color:var(--muted)}
 [data-mobile-table] td[colspan]::before{display:none}
 [data-mobile-table] td.actions{display:flex;gap:8px}
 [data-mobile-table] td.actions::before{flex-basis:100%}
 [data-mobile-table] td>a{justify-self:start;min-height:44px;display:inline-flex;align-items:center}
 .diagnostic-actions{gap:8px}.diagnostic-actions button{flex:1 1 180px;white-space:normal}
 .diagnostic-filters label{flex:1 1 180px}
 .bulk-toolbar{position:static}
}
@media(max-width:480px){
 .panel{padding:14px}.inline-form{align-items:stretch}.inline-form label{min-width:0;flex:1 1 100%}
 .inline-form>button{flex:1 1 100%}
 .recording-list .recording-card{grid-template-columns:24px minmax(0,1fr)}
 .recording-list .thumbnail{grid-column:2;width:min(100%,240px)}
 .recording-list .recording-info,.recording-list .recording-meta,.recording-list .recording-actions{grid-column:2;min-width:0}
 .recording-actions .button-link,.recording-actions button{display:inline-flex;align-items:center;white-space:normal}
 .location-tabs a,.view-toggle a{padding:8px 10px}
 .library-controls{gap:10px}.diagnostic-filters>*{width:100%}
 .pagination{gap:12px;flex-wrap:wrap}
}

/* Custom controls share the video surface; native fallback keeps its own bar. */
.watch-main .player-panel{padding:0;overflow:hidden}
.player-panel .video-stage{position:relative;display:block;border-radius:7px}
.player-panel .player-status,.player-panel .player-error{margin:12px}
.player-overlay{position:absolute;inset:auto 0 0;z-index:2;padding:26px 12px 8px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72) 30%,rgba(0,0,0,.92));opacity:1;transition:opacity .16s;pointer-events:none}
.player-overlay>div{pointer-events:auto}
.video-stage[data-controls-visible="false"] .player-overlay{opacity:0;pointer-events:none}
.video-stage[data-controls-visible="false"] .player-overlay>div{pointer-events:none}
.player-overlay .player-progress{margin:0;gap:8px}
.player-overlay .player-progress input{accent-color:#fff;background:transparent}
.player-overlay .player-controls{margin:0;gap:2px;justify-content:flex-start;flex-wrap:nowrap}
.player-overlay button,.player-overlay button.secondary{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#fff;border:0;border-radius:50%;min-width:44px;min-height:44px;padding:10px;box-shadow:none;transition:background .16s,transform .16s}
.player-overlay button:hover{background:#ffffff25;filter:none}
.player-overlay button:active{transform:scale(.94)}
.player-overlay [data-player-fullscreen]{margin-left:auto}
.player-overlay .volume-control{margin-left:2px;gap:0}
.player-overlay .volume-control input{width:80px;min-height:44px}
.player-icon{display:block;flex:none;filter:drop-shadow(0 1px 2px #0006)}
[data-player-toggle][data-paused="true"] .icon-pause,[data-player-toggle][data-paused="false"] .icon-play,[data-player-mute][data-muted="true"] .icon-volume,[data-player-mute][data-muted="false"] .icon-muted{display:none}
.player-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.player-timeline{position:relative;flex:1;min-width:0;padding-top:24px}
.player-overlay .player-progress>span{align-self:flex-end;line-height:24px;min-width:3.2em;font-size:.75rem}
.player-overlay .player-progress input{display:block;min-height:24px;height:24px;margin:0;cursor:pointer}
.player-overlay .player-progress input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,#fff var(--played,0%),#ffffff50 var(--played,0%))}
.player-overlay .player-progress input::-webkit-slider-thumb{margin-top:-5px}
.tip-markers{position:absolute;inset:0 0 auto;height:24px}
.player-overlay .tip-marker{position:absolute;top:0;width:24px;min-width:24px;height:28px;min-height:28px;padding:0;transform:translateX(-50%);border-radius:6px;z-index:1;touch-action:manipulation}
.tip-marker::before{content:"";width:5px;height:9px;border-radius:3px;background:#8de3b2;box-shadow:0 1px 3px #000}
.tip-marker[data-highest="true"]{z-index:2}
.tip-marker[data-highest="true"]::before{background:#ffcc52;width:9px;height:12px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.tip-marker[aria-pressed="true"]::before{background:#fff;box-shadow:0 0 8px #ffcc52}
.player-overlay .tip-marker:active{transform:translateX(-50%)}
.tip-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:min(260px,60vw);padding:7px 10px;border-radius:7px;background:#111f;color:#fff;font-size:.75rem;line-height:1.4;pointer-events:none;opacity:0;transition:opacity .16s;box-shadow:0 2px 12px #0006}
.tip-marker:hover .tip-tooltip,.tip-marker:focus .tip-tooltip,.tip-marker[aria-pressed="true"] .tip-tooltip{opacity:1}
.player-overlay .volume-control{color:#fff;font-size:.78rem}
.player-overlay input[type="range"]{accent-color:#fff;background:transparent;padding:0}
.player-overlay :focus-visible{outline-color:#fff;outline-offset:1px}
.player-loading-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.player-buffering{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
.player-buffering[hidden]{display:none}
.buffering-spinner{width:44px;height:44px;border:4px solid #ffffff55;border-top-color:#fff;border-radius:50%;filter:drop-shadow(0 1px 3px #000);animation:player-buffering-spin .8s linear infinite}
@keyframes player-buffering-spin{to{transform:rotate(360deg)}}
.thumbnail-metadata{display:grid;gap:4px;margin-top:6px;color:var(--muted);font-size:.78rem;overflow-wrap:anywhere}
.session-top-tip,.neighbor-card .session-top-tip,.nearby-card .session-top-tip,.chat-event-tip .chat-text{color:var(--success-text)}
.session-top-tip{display:block;margin-top:5px;font-size:.78rem;overflow-wrap:anywhere}
@media(max-width:600px){.player-overlay{padding:16px 8px 6px}.player-overlay .volume-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.player-overlay .volume-control input{width:65px}.player-overlay .player-controls{column-gap:5px;row-gap:0}.player-overlay .volume-control{margin-left:0}}
@media(max-width:400px){.player-overlay{padding-left:8px;padding-right:8px}.player-overlay .player-controls{gap:0}.player-overlay .volume-control input{width:48px}.player-overlay .player-controls button{padding:8px}.player-overlay .player-progress{gap:6px}}
@media(prefers-reduced-motion:reduce){.player-overlay,.player-overlay button,.tip-tooltip{transition:none}.buffering-spinner{animation:none}}
/* Model activity stays lazy/collapsible and owns its long-range horizontal scroll. */
:root{--activity-recorded:#6d28d9;--activity-offline:#54647d;--activity-unknown:#c3cad5}
[data-theme="dark"]{--activity-recorded:#bda2ff;--activity-offline:#a6bad7;--activity-unknown:#59677d}
.model-activity{position:relative}.model-activity>summary{padding:0;display:list-item;min-height:24px}.model-activity h2{margin:20px 0 16px}
.activity-controls{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}.activity-controls label{flex:1 1 160px}.activity-controls button{flex:0 0 auto}
.activity-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px}
.activity-summary>div{padding:12px;background:var(--subtle);border:1px solid var(--border);border-radius:8px;min-width:0}
.activity-summary span{display:block;font-size:.8rem;color:var(--muted)}.activity-summary strong{display:block;margin-top:6px;font-size:1.25rem;overflow-wrap:anywhere}
.activity-figure{margin:20px 0 0;min-width:0}.activity-figure figcaption{font-weight:650;overflow-wrap:anywhere}
.activity-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.8rem;margin:12px 0 24px}.activity-key{display:inline-flex;align-items:center;gap:6px}
.activity-key::before{content:"";width:12px;height:12px;display:inline-block;border:1px solid var(--border);border-radius:2px}
.activity-segment.activity-recorded,.activity-key.activity-recorded::before{background:var(--activity-recorded)}
.activity-segment.activity-public,.activity-key.activity-public::before{background:var(--success-text)}
.activity-segment.activity-restricted,.activity-key.activity-restricted::before{background:var(--warning-text)}
.activity-segment.activity-offline,.activity-key.activity-offline::before{background:var(--activity-offline)}
.activity-segment.activity-unknown,.activity-key.activity-unknown::before,.activity-key.activity-incomplete::before{background:repeating-linear-gradient(135deg,var(--activity-unknown),var(--activity-unknown) 3px,var(--surface) 3px,var(--surface) 6px)}
.activity-chart{display:grid;grid-template-columns:36px minmax(0,1fr);gap:6px;min-width:0}
.activity-axis{height:220px;position:relative;font-size:.72rem;color:var(--muted)}.activity-axis span{position:absolute;right:0;transform:translateY(50%)}
.activity-scroll{overflow-x:auto;min-width:0;padding:3px 3px 10px;scrollbar-gutter:stable}
.activity-series{display:grid;height:252px;gap:2px;background:repeating-linear-gradient(to top,transparent,transparent calc(55px - 1px),var(--border-soft) calc(55px - 1px),var(--border-soft) 55px)}
.activity-day{display:flex;flex-direction:column;align-items:stretch;min-width:0;border-radius:3px;padding:0;background:transparent;color:var(--text);font-weight:400;min-height:44px}
.activity-day:hover{background:var(--hover);filter:none}.activity-day[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--accent)}
.activity-day:focus-visible{outline-offset:-3px}.activity-bars{height:220px;position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-start;border-bottom:1px solid var(--muted);margin:0 2px}
.activity-segment{display:block;flex-shrink:0;min-width:0}.activity-date{height:32px;padding-top:9px;font-size:.65rem;white-space:nowrap;width:70px;position:relative;left:50%;transform:translateX(-50%)}
.activity-uncertain{position:absolute;bottom:2px;left:0;right:0;font-weight:750;color:var(--text);background:var(--surface);border:1px dashed var(--muted);font-size:.7rem}
.activity-inspection{min-height:44px;font-size:.85rem;padding:10px;background:var(--subtle);border:1px solid var(--border);border-radius:7px}
.activity-tooltip{position:fixed;z-index:6;max-width:min(300px,calc(100vw - 24px));background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px;box-shadow:0 4px 20px #0004;font-size:.85rem;pointer-events:none;overflow-wrap:anywhere}
.activity-table{max-height:420px;overflow:auto}.activity-table caption{text-align:left;padding:8px;font-weight:600}.activity-table th,.activity-table td{white-space:nowrap}
@media(max-width:480px){.activity-controls button{flex:1 1 100%}.activity-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-legend{column-gap:10px}.model-activity>summary{min-height:24px}}

.chat-top-tip{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border:1px solid var(--success-text);border-radius:.5rem;margin-block:.75rem}.chat-top-tip strong{color:var(--success-text)}.chat-top-tip[hidden]{display:none}.chat-scope{display:block;margin-block:.75rem}.chat-scope[hidden]{display:none}.chat-events{position:relative}.chat-events .chat-tip-selected{background:color-mix(in srgb,var(--success-text) 14%,transparent);outline:2px solid var(--success-text);outline-offset:-2px}.chat-time:is(button){color:var(--success-text);background:transparent;border:1px solid currentColor;border-radius:.25rem;min-height:44px;padding:.25rem;font:inherit;text-align:left;cursor:pointer}.chat-time:is(button):focus-visible{outline:3px solid var(--success-text);outline-offset:2px}

.chat-follow{display:block;margin:.5rem 0}.chat-events li.chat-playhead{outline:2px solid var(--accent);outline-offset:-2px}.chat-events:has(.chat-reached) li:not(.chat-reached){opacity:.65}
