:root {
  --bg:#f6f6f4; --card:#fff; --head:#f0f0ec; --ink:#1b1b1a; --muted:#6b6b66;
  --line:#e2e2dd; --accent:#1a7f6b; --accent-ink:#fff; --sel:#c0392b; --shot-bg:#000;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#101214; --card:#16191c; --head:#191d21; --ink:#e7e9ea; --muted:#8b9298;
          --line:#2a2f34; --accent:#23a184; --accent-ink:#06120f; --sel:#e05a4a;
          color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color: inherit; }

header { position: sticky; top:0; z-index:5; background:var(--head);
         border-bottom:1px solid var(--line); }
.bar { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:.6rem 1rem; }
.nests { display:flex; gap:.4rem; }
.nest { padding:.35rem .8rem; border-radius:999px; text-decoration:none;
        border:1px solid var(--line); font-size:.85rem; }
.nest.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn { background:var(--card); color:var(--ink); border:1px solid var(--line);
       border-radius:8px; padding:.35rem .8rem; cursor:pointer; font-size:.85rem; }

.calpanel { padding:.6rem 1rem 1rem; border-top:1px solid var(--line); max-width:340px; }
.calhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.mbtn { background:var(--card); border:1px solid var(--line); color:var(--ink);
        border-radius:6px; padding:.1rem .55rem; cursor:pointer; }
table.grid { width:100%; border-collapse:collapse; }
table.grid th { font-size:.68rem; color:var(--muted); font-weight:500; padding-bottom:.2rem; }
table.grid td { text-align:center; padding:.15rem 0; font-size:.8rem; color:var(--muted); }
table.grid td { color:var(--muted); opacity:.45; }          /* no recordings */
table.grid td.has { opacity:1; }
table.grid td.has a { display:block; text-decoration:none; border-radius:5px;
                      padding:.2rem 0; background:var(--accent); color:var(--accent-ink);
                      font-weight:600; }
table.grid td.has a:hover { filter:brightness(1.15); }
table.grid td.sel a { background:var(--sel); color:#fff; }
.calnote { margin:.5rem 0 0; font-size:.7rem; color:var(--muted); }

main { padding:1rem; display:flex; flex-direction:column; gap:1rem; }

.day { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.dayhead { display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap;
           padding:.55rem .9rem; background:var(--head); border-bottom:1px solid var(--line); }
.dayname { font-weight:600; font-size:.95rem; }
.daymeta { color:var(--muted); font-size:.78rem; }

.strip { display:flex; gap:.6rem; overflow-x:auto; padding:.8rem .9rem; scroll-snap-type:x proximity; }
.strip.empty { color:var(--muted); font-size:.85rem; }
.slot { flex:0 0 auto; width:260px; scroll-snap-align:start; }
.slottime { font-size:.78rem; color:var(--muted); margin-bottom:.25rem;
            font-variant-numeric:tabular-nums; }

/* 16:9 — the source frames are 1280x720 / 1920x1080, so nothing is cropped */
.shot { position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
        background:var(--shot-bg); border:1px solid var(--line); margin-bottom:.35rem; }
.shot.clip { cursor:pointer; }
.shot img { width:100%; height:100%; object-fit:cover; display:block; }
.shot video { width:100%; height:100%; display:block; background:#000; }
.shot.gap { border-style:dashed; opacity:.4; background:transparent; }
.noposter { display:grid; place-items:center; height:100%; color:var(--muted); font-size:.75rem; }
.play { position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%;
        border:0; background:rgba(0,0,0,.5); color:#fff; font-size:16px; cursor:pointer; }
.shot.clip:hover .play { background:var(--accent); color:var(--accent-ink); }
.shot.playing .play, .shot.playing img { display:none; }
.msg { display:grid; place-items:center; height:100%; padding:.5rem; text-align:center;
       font-size:.75rem; color:#fff; background:var(--sel); }

.sentinel { text-align:center; color:var(--muted); font-size:.8rem; padding:.4rem; min-height:1.6rem; }
.sentinel.done { visibility:hidden; }
.shifted { margin:0; padding:.5rem .8rem; background:var(--head); border:1px solid var(--line);
           border-radius:8px; color:var(--muted); font-size:.8rem; }

/* --- narrow screens (iPhone; the iPad is fine at tablet width) ------------- */
.nests { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nests::-webkit-scrollbar { display: none; }
.nest, .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .bar { gap: .5rem; padding: .45rem .6rem; }
  .nest { padding: .3rem .65rem; font-size: .8rem; }
  .btn  { padding: .3rem .6rem; font-size: .8rem; }
  main  { padding: .6rem; gap: .7rem; }
  .strip { padding: .6rem; gap: .5rem; }
  .slot { width: min(260px, 74vw); }
  .dayhead { padding: .45rem .6rem; }
  .calpanel { max-width: none; }
}