:root{--bg:#12140f;--fg:#e8e6df;--dim:#9a9788;--card:#1c1f18;--line:#2a2e24;
      --accent:#8fb25b;--sel:#2d3a1c;}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--fg);
     font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;}
header{padding:16px 20px;border-bottom:1px solid var(--line);}
h1{margin:0;font-size:1.25rem;letter-spacing:.2px;}
.sub{color:var(--dim);font-size:.85rem;margin-top:2px;}
.panes{display:flex;align-items:stretch;gap:0;min-height:calc(100vh - 72px);}
/* Visibility is decided ONLY by .pane / .pane.on, both class selectors, so
   the cascade is a fair fight. An earlier version put display:none on the
   #hours and #clip ID selectors, which outrank .pane.on however it is
   written -- the panes could never appear and the page showed days alone.
   The ID rules below carry layout only, never display. */
.pane{border-right:1px solid var(--line);overflow-y:auto;
      max-height:calc(100vh - 72px);display:none;}
.pane.on{display:block;}
#days{flex:0 0 210px;}
#hours{flex:0 0 220px;}
#clip{flex:1 1 auto;padding:18px;border-right:none;min-width:0;}
.row{padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;
     display:block;width:100%;text-align:left;background:none;border-left:3px solid transparent;
     color:inherit;font:inherit;}
.row:hover{background:#181b14;}
.row[aria-selected="true"]{background:var(--sel);border-left-color:var(--accent);}
.row .t{font-weight:600;}
.row .m{color:var(--dim);font-size:.8rem;margin-top:2px;}
.ptitle{padding:10px 16px;color:var(--dim);font-size:.75rem;
        text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line);
        position:sticky;top:0;background:var(--bg);}
/* aspect-ratio reserves the box BEFORE any video data exists. With
   preload="none" the element has no intrinsic size, so browsers give it the
   300x150 default and it jumps to 16:9 the moment you press play. Reserving
   the shape keeps the layout still. max-width stops it filling a wide
   monitor; object-fit letterboxes if max-height clamps it below 16:9. */
video{display:block;width:100%;max-width:1100px;aspect-ratio:16/9;
      max-height:calc(100vh - 300px);object-fit:contain;
      background:#000;border-radius:8px;}
.tags span{display:inline-block;background:#252a1e;border-radius:20px;
           padding:2px 9px;margin:2px 4px 2px 0;font-size:.78rem;}
ul.sight{list-style:none;margin:14px 0 0;padding:0;
         display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px;}
ul.sight button{width:100%;text-align:left;background:none;border:0;color:var(--dim);
                font:inherit;font-size:.85rem;padding:5px 8px;border-radius:5px;cursor:pointer;}
ul.sight button:hover{background:#252a1e;color:var(--fg);}
ul.sight b{color:var(--fg);font-variant-numeric:tabular-nums;margin-right:7px;}
ul.sight i{color:#6f6c60;font-style:normal;font-size:.78rem;float:right;
           font-variant-numeric:tabular-nums;}
.empty{color:var(--dim);padding:24px 16px;font-style:italic;}
.hint{color:var(--dim);font-size:.8rem;margin-top:10px;}
@media(max-width:820px){
  .panes{flex-direction:column;min-height:0;}
  .pane{max-height:none;border-right:none;border-bottom:1px solid var(--line);}
  #days,#hours{flex:none;}
  #days{max-height:30vh;overflow-y:auto;}
}