/* TimeLapse web, Liquid Glass: dashboard page sheet (unit U2).
   Loaded by dashboard.html after tl-tokens.css. Holds every class rule of the dashboard:
   spec 5.4.1-5.4.4, 5.4.6-5.4.8, the class rules of 5.4.9, 5.4.12-5.4.20, the blurred-surface
   fallbacks and forced-colors block of 5.2.3, the component half of the 5.3.6 reduced-motion block,
   and the behaviour rules of the 4.2 CSS contract. Selectors are the ones dashboard.js emits (names frozen).
   Real backdrop blur exists on exactly two surfaces: .sidebar as the floating header (>= 921 px) and
   .mobile-bar (<= 920 px). Light only. */

/* ---------- base + 4.2 CSS contract (behaviour that lives in CSS) ---------- */
*, *::before, *::after{ box-sizing:border-box; }
[hidden]{ display:none!important; }               /* #spotlight, #grid and the view-* sections are switched with .hidden */
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
.loading{ color:var(--tl-muted-on-tint); }        /* static first-paint line, visually hidden by .sr-only */
/* #sc-steps: no CSS display here on purpose, tsSteps() toggles box.style.display inline. */

/* ---------- 5.4.1 glass card + opaque panel ---------- */
/* regular glass: grid cards, spotlight stage + list panel, empty/error state */
.card, .stage, .panel, .empty-state{
  background-color: var(--tl-glass);
  background-image: linear-gradient(180deg, var(--tl-glass-hi2) 0%, rgba(255,255,255,0) 42%);
  border: 1px solid var(--tl-glass-border);
  box-shadow: var(--hi-inset), var(--sh-regular);
}
/* panel glass (.94): anything that can carry the JS-inlined #B4552F, plus long-reading surfaces */
.card-block, .modal, .sidebar{
  background-color: var(--tl-glass-fallback);
  background-image: linear-gradient(180deg, var(--tl-glass-hi2) 0%, rgba(255,255,255,0) 42%);
  border: 1px solid var(--tl-glass-border);
  box-shadow: var(--hi-inset), var(--sh-panel);
}

/* ---------- 5.4.2 header: drawer (<= 920) and floating glass bar (>= 921) ---------- */
#app{ min-height:100vh; min-height:100dvh; }
.sidebar{
  position:fixed; inset:0 auto 0 0; z-index:40;
  width:min(300px, 86vw); height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:8px;
  padding:20px 14px calc(16px + env(safe-area-inset-bottom));
  border-radius:0 30px 30px 0;
  transform:translateX(-100%); visibility:hidden;   /* hidden: out of the Tab order while closed */
  transition: transform var(--dur-spring) var(--ease-spring), visibility 0s linear var(--dur-spring);
}
.sidebar.open{ transform:none; visibility:visible; transition: transform var(--dur-spring) var(--ease-spring), visibility 0s; }
.brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 14px; }
.brand .mark{ flex:none; display:flex; }
.brand .mark svg{ width:28px; height:28px; }
.brand .word{ font:500 22px/1 var(--font-display); letter-spacing:-.02em; color:var(--tl-ink); }
.brand .word b{ font-weight:900; color:var(--tl-primary-text); }
.nav{ display:flex; flex-direction:column; gap:4px; }
.nav button{
  display:flex; align-items:center; gap:11px; width:100%; min-height:48px; padding:0 14px;
  border:0; border-radius:16px; background:transparent; color:var(--tl-ink);
  font:600 15px var(--font-ui); text-align:left; cursor:pointer;
  transition: background-color var(--dur-toggle), color var(--dur-toggle), transform var(--dur-press) var(--ease-spring);
}
.nav button svg{ flex:none; }
.nav button:hover{ background:var(--tl-chip-bg); }
.nav button.active{ background:var(--tl-primary); color:var(--tl-cream); box-shadow:var(--hi-primary); }
.nav button:active{ transform:scale(.97); }
.side-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--tl-line); }
.userchip{ display:flex; align-items:center; gap:10px; padding:8px; }
.avatar{ width:40px; height:40px; flex:none; border-radius:50%; background:var(--tl-secondary); color:var(--tl-cream);
  display:flex; align-items:center; justify-content:center; font:700 13px var(--font-display); }
.userchip .who{ min-width:0; }
.userchip .who .em{ font-size:13px; color:var(--tl-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.userchip .who .unlink{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0; border:0; background:none;
  color:var(--tl-ink); font:500 13px var(--font-ui); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.userchip .who .unlink:hover{ color:var(--tl-danger-text); }
@media (max-width:920px) and (pointer:coarse){ .userchip .who .unlink{ min-height:44px; } }   /* drawer: 44 px tap target (G9) */
/* open drawer (<= 920): opaque surface, and a CSS-only scrim drawn by .main::before (follows #sidebar in the DOM, no JS).
   At .94 with no blur the page text ghosted through behind the nav labels. pointer-events:none keeps today's
   behaviour exactly: whatever was tappable beside the drawer still is (no new tap target, no JS). Above .mobile-bar (30), below the drawer (40). */
@media (max-width:920px){
  .sidebar.open{ background-color:var(--tl-surface); }
  .sidebar.open ~ .main::before{ content:""; position:fixed; inset:0; z-index:35; pointer-events:none;
    background:var(--tl-scrim); animation: tl-fade var(--dur-fade) linear both; }
}

/* floating bar with the menu button (<= 920) */
.mobile-bar{
  position:sticky; top:12px; z-index:30;
  display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 8px; margin:0 0 16px;
  border-radius:28px; background-color:var(--tl-header-fill);
  border:1px solid var(--tl-glass-border);
  /* lighter than --sh-bar (0 20px 50px .14): the sticky bar's shadow falls on #view-sub at rest and on any text
     scrolled just under the bar; --sh-bar took #58624F to 4.33-4.50 there (G7). Peak .056 keeps it >= 4.6. */
  box-shadow:var(--hi-inset), 0 12px 28px rgba(31,42,28,.07);
}
@media (max-width:920px){
  /* the blur only exists where the bar is rendered */
  .mobile-bar{ -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); }
}
.mobile-bar #menu-btn{ display:flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:22px;
  background:var(--tl-chip-bg); border:1px solid var(--tl-line); color:var(--tl-ink); font:700 15px var(--font-ui); }
.mobile-bar #menu-btn svg{ flex:none; }
.mobile-bar .mb-brand{ margin-left:auto; margin-right:8px; display:flex; align-items:center; gap:8px;
  font:500 21px/1 var(--font-display); letter-spacing:-.02em; color:var(--tl-ink); }
.mobile-bar .mb-brand svg{ flex:none; }
.mobile-bar .mb-brand b{ font-weight:900; color:var(--tl-primary-text); }

/* >= 921: the sidebar IS the floating header (D1) */
@media (min-width:921px){
  #app{ display:block; }
  .mobile-bar{ display:none; }
  .sidebar{
    position:sticky; inset:auto; top:16px; z-index:30;      /* top after inset: the shorthand would reset it */
    width:auto; height:64px; overflow:visible; margin:16px 32px 0;
    flex-direction:row; align-items:center; gap:16px; padding:8px 10px 8px 18px;
    border-radius:var(--r-bar); transform:none; visibility:visible; transition:none;
    background-color:var(--tl-header-fill);
    -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
    box-shadow:var(--hi-inset), var(--sh-bar);
  }
  .brand{ padding:0 6px 0 0; }
  .nav{ flex-direction:row; gap:4px; }
  .nav button{ width:auto; min-height:44px; padding:0 14px; border-radius:22px; font-size:14px; gap:8px; white-space:nowrap; }
  .side-foot{ margin:0 0 0 auto; padding:0; border:0; }
  .userchip{ padding:0; }
  .userchip .who .unlink{ min-height:28px; }
}
/* 921-1179: drop nav icons and the email text so the bar fits */
@media (min-width:921px) and (max-width:1179px){
  .nav button svg{ display:none; }
  .userchip .who .em{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* still read by AT */
}

/* ---------- 5.4.3 main column, page title row ---------- */
.main{ display:block; width:100%; max-width:1280px; margin:0 auto; padding:12px 16px 56px; }
@media (min-width:401px){ .main{ padding-inline:20px; } }
@media (min-width:921px){ .main{ padding:28px 32px 72px; } }
html{ scroll-padding-top:84px; }                       /* mobile bar 56 + 12 + 16 */
@media (min-width:921px){ html{ scroll-padding-top:100px; } }  /* header 64 + 16 + 20 */
.topbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin:4px 0 20px; }
.topbar h1{ display:inline; margin:0; font:900 clamp(26px,4.2vw,34px)/1.1 var(--font-display); letter-spacing:-.025em; }
.topbar .sub{ margin-left:10px; font-size:14.5px; color:var(--tl-muted-on-tint); }  /* on the page ground: #58624F */
.topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
@media (max-width:600px){
  .topbar-actions{ width:100%; } .topbar-actions .btn-accent{ margin-left:auto; }
  /* next to Grid/Spotlight the button fills the rest of the row; when it wraps (360) it takes the whole row,
     like the mobile app's full-width "New timelapse", instead of an orphan on the right */
  .topbar-actions .seg ~ .btn-accent{ flex:1 1 auto; }
}

/* ---------- 5.4.4 buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px; border-radius:var(--r-pill); border:1px solid transparent;
  font:700 15px/1.1 var(--font-ui); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition: transform var(--dur-press) var(--ease-spring), background-color var(--dur-fade), box-shadow var(--dur-press);
}
.btn svg{ flex:none; }
.btn:active{ transform:scale(.97); }
.btn:disabled, .btn[disabled]{ cursor:default; transform:none; }           /* JS also sets opacity .6 inline */
.btn-sm{ min-height:40px; padding:0 15px; font-size:14px; }
@media (pointer:coarse){ .btn-sm{ min-height:44px; } }

/* primary (PrimaryButton) */
.btn-accent{ background:var(--tl-primary); color:var(--tl-cream); box-shadow:var(--hi-primary), var(--sh-primary); }
.btn-accent:hover{ background:var(--tl-secondary); }

/* secondary (SecondaryButton: chipBg + line, ink) */
.btn-ghost{ background:var(--tl-chip-bg); border-color:var(--tl-line); color:var(--tl-ink); }
.btn-ghost:hover{ background:rgba(31,42,28,.10); }
/* JS-inlined danger variants (#del-acct, #del-confirm: style="color:#B4552F;border-color:#E5C6B4"):
   transparent fill so #B4552F sits on the .94 surface (4.67) instead of chipBg (4.14) */
.btn-ghost[style*="B4552F"]{ background:transparent; border-width:1.5px; }

/* quiet (text-weight action: Settings / Delete on cards, Cancel, Build reel, Project settings) */
.btn-quiet{ background:transparent; border-color:transparent; color:var(--tl-muted-on-tint); }
.btn-quiet:hover{ color:var(--tl-ink); background:var(--tl-chip-bg); }

/* danger outline (static markup only; no JS consumer in phase 1) */
.btn-danger{ background:transparent; border:1.5px solid var(--tl-danger-line); color:var(--tl-danger); } /* ONLY on >= .94 surfaces */
.btn-danger--on-glass{ color:var(--tl-danger-text); }                                                  /* on .72 glass or tints */

/* large CTA */
.btn-lg{ min-height:56px; padding:0 32px; font-size:17px; }

/* text links (TextLink; ".link" itself is in tl-tokens.css). ".banner .hint a" = "Ring help" in #sc-steps */
.banner p.how a, .banner .hint a, .si-fold a{ color:var(--tl-secondary); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ---------- 5.4.6 chips: over photo, accent ---------- */
.pill, .daychip, .chip{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill);
  font:700 12px/1 var(--font-ui); letter-spacing:.01em; padding:7px 12px; white-space:nowrap; }
.pill .dot, .daychip .d{ width:8px; height:8px; border-radius:50%; flex:none; position:relative; }

/* over-photo light chip (Chip overPhoto): day/duration chip on posters and the player */
.poster .daychip, .player .daychip{
  position:absolute; z-index:2; font-family:var(--font-mono); font-size:12px;
  background:var(--tl-over-photo); border:1px solid var(--tl-over-photo-border);
  color:var(--tl-on-photo-ink); box-shadow:var(--sh-photo);
}
.poster .daychip{ left:12px; bottom:12px; }
.player .daychip{ left:12px; top:12px; max-width:calc(100% - 24px); white-space:normal; line-height:1.35; border-radius:16px; align-items:flex-start; }
.poster .daychip .d, .player .daychip .d{ background:var(--tl-accent); width:6px; height:6px; }
.player .daychip .d{ margin-top:calc(.675em - 3px); }      /* dot on the first line's centre (line-height 1.35) when the chip wraps */
/* phones: the full line (duration · cut · date · snapshots · until …) stays, smaller and tighter, so it takes
   at most 2 lines in the top band of the player, clear of the centre and of the native controls (was 3 lines, ~38% at 360) */
@media (max-width:600px){
  .player .daychip{ left:8px; top:8px; max-width:calc(100% - 16px); padding:5px 10px; gap:5px;
    font-size:11px; letter-spacing:-.02em; line-height:1.3; border-radius:13px; }
  .player .daychip .d{ margin-top:calc(.65em - 3px); }
}

/* accent chip */
.chip--accent{ background:var(--tl-accent-bg); color:var(--tl-accent-text); }

/* ---------- 5.4.7 status chip variants (Capturing / Finished / Paused / Resumes HH:MM / Outside window / Issue / Camera silent) ---------- */
/* on light surfaces (spotlight list .rowitem, anywhere not over media) */
.pill.capturing{ background:var(--tl-accent-bg);   color:var(--tl-accent-text); }   .pill.capturing .dot{ background:var(--tl-accent); }
.pill.finished { background:var(--tl-primary-tint); color:var(--tl-secondary); }    .pill.finished  .dot{ background:var(--tl-primary); }
.pill.paused   { background:var(--tl-muted-tint);   color:var(--tl-muted-on-tint); } .pill.paused    .dot{ background:#6E7568; }
.pill.issue    { background:var(--tl-danger-tint);  color:var(--tl-danger-text); }  .pill.issue     .dot{ background:var(--tl-danger); }

/* over media (grid posters): dark glass + dot, or the opaque ready fill for Finished (wins by specificity and order) */
.poster .pill{ position:absolute; top:12px; right:12px; z-index:2;
  background:var(--tl-dark-chip); border:1px solid rgba(255,255,255,.2); color:var(--tl-cream); }
.poster .pill.capturing .dot{ background:var(--tl-accent); }
.poster .pill.paused   .dot{ background:var(--tl-cream-muted); }
.poster .pill.issue    .dot{ background:var(--tl-danger-on-dark); }
.poster .pill.finished { background:var(--tl-ready-chip); border-color:transparent; }   /* opaque #37765A, mobile fix */
.poster .pill.finished .dot{ display:none; }

/* capturing pulse (PulsingDot) */
.pill.capturing .dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:inherit;
  animation: tl-ring var(--dur-pulse) ease-out infinite; }

/* list LEDs (.rowitem .led) */
.led{ width:10px; height:10px; border-radius:50%; flex:none; }
.led.capturing{ background:var(--tl-accent); } .led.finished{ background:var(--tl-primary); }
.led.paused{ background:#6E7568; } .led.issue{ background:var(--tl-danger); }

/* ---------- 5.4.8 segmented control (.seg: Grid/Spotlight, Daily cut/Full story) ---------- */
.seg{ display:inline-flex; gap:2px; padding:4px; border-radius:16px; background:var(--tl-chip-bg); border:0; }
.seg button{ display:flex; align-items:center; gap:7px; min-height:40px; padding:0 14px; border:0; border-radius:12px;
  background:transparent; color:var(--tl-muted-on-tint); font:600 14px var(--font-ui); cursor:pointer;
  transition: background-color var(--dur-toggle), color var(--dur-toggle), transform var(--dur-press) var(--ease-spring); }
.seg button svg{ flex:none; }
.seg button.on{ background:var(--tl-primary); color:var(--tl-cream); box-shadow:var(--hi-primary); }
.seg button:not(.on):hover{ color:var(--tl-ink); }
.seg button:active{ transform:scale(.97); }
@media (pointer:coarse){ .seg button{ min-height:44px; } }
.stage .seg{ display:flex; width:max-content; max-width:100%; }   /* the cut bar keeps its inline margin-bottom:12px */

/* ---------- 5.4.9 fields, class rules (element rules are in tl-tokens.css) ---------- */
.field{ margin-bottom:18px; }                /* wrapper kept: el.closest('.field').style.opacity dims locked fields */
.field label{ display:block; margin:0 0 8px 4px; font:700 11.5px var(--font-ui); text-transform:uppercase; letter-spacing:.08em; color:var(--tl-muted); }
.field .desc{ color:var(--tl-muted); font-size:13px; margin:0 0 9px; }
.mbody .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hint{ margin:8px 0 0; padding:10px 12px; border-radius:14px; border:1px solid var(--tl-line);
  background:var(--tl-field); color:var(--tl-muted); font-size:12.5px; line-height:1.5; }   /* muted 5.12; JS #B4552F 4.84 */
.msg{ margin:10px 0 0; font-size:13px; color:var(--tl-muted); }
.msg.err{ color:var(--tl-danger-text); }                               /* #8F3F20: #B4552F measured 4.46 in the modal (G7) */

/* ---------- 5.4.12 notice / banner cards (NoticeCard) ---------- */
.banner{
  display:flex; gap:14px; align-items:flex-start; margin:0 0 20px; padding:16px 18px; border-radius:var(--r-notice);
  /* tint laid over an opaque .94 base: contrast independent of the glow underneath */
  background-color:var(--tl-glass-fallback);
  background-image:linear-gradient(var(--tl-primary-tint), var(--tl-primary-tint));
  border:1px solid rgba(55,118,90,.30);
}
.banner.alert{ background-image:linear-gradient(var(--tl-danger-tint), var(--tl-danger-tint)); border-color:var(--tl-danger-line); }
.banner .bi{ width:40px; height:40px; flex:none; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(55,118,90,.16); color:var(--tl-primary); }
.banner.alert .bi{ background:rgba(180,85,47,.16); color:var(--tl-danger); }       /* icon (non-text) on the real stack = 3.29 */
.banner .bt{ flex:1; min-width:0; }
.banner .bt h4{ margin:0 0 4px; font:700 15px/1.35 var(--font-ui); color:var(--tl-ink); }
.banner .bt p, .banner .bt li{ margin:0; font-size:13.5px; line-height:1.55; color:var(--tl-muted-on-tint); }  /* >= 4.90 on both tints */
.banner .bt p b, .banner .bt li b{ color:var(--tl-ink); font-weight:600; }
.banner .bt p.how{ margin-top:8px; }
.banner .bact{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.banner #sc-steps ol, .banner #sc-steps li{ color:var(--tl-ink); }                 /* JS toggles the inline display */
.banner .x{ flex:none; width:44px; height:44px; margin:-10px -10px 0 0; border:0; border-radius:22px; background:transparent;
  color:var(--tl-muted-on-tint); font-size:22px; line-height:1; cursor:pointer; }
.banner .x:hover{ background:var(--tl-chip-bg); color:var(--tl-ink); }
.mbody .banner{ margin:0 0 16px; }                                                   /* the lock banner has inline margin too */
@media (max-width:600px){ .banner{ padding:14px; gap:12px; } .banner .bi{ width:34px; height:34px; } }

/* ---------- 5.4.13 skeleton (D3 / M8): static in dashboard.html and skeletonHTML() ---------- */
.skel-card{ padding:8px; border-radius:var(--r-card); background-color:var(--tl-glass); border:1px solid var(--tl-glass-border); box-shadow:var(--hi-inset), var(--sh-regular); }
.skel{ position:relative; overflow:hidden; background:var(--tl-skel); border-radius:7px; }
.skel::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(31,42,28,0) 25%, rgba(31,42,28,.09) 50%, rgba(31,42,28,0) 75%); background-size:200% 100%;
  animation: tl-shimmer var(--dur-shimmer) linear 300ms infinite; }    /* starts after 300 ms; static under reduced motion */
.skel-media{ aspect-ratio:16/10; border-radius:var(--r-media); }
.skel-l1{ width:60%; height:18px; margin:14px 12px 8px; }
.skel-l2{ width:80%; height:12px; margin:0 12px 10px; border-radius:6px; }

/* ---------- 5.4.14 state cards: empty (D2) and the .empty-state base ---------- */
.empty-state{ max-width:560px; margin:24px auto; padding:44px 40px; border-radius:var(--r-card); text-align:center; }
.empty-state .ico{ width:112px; height:112px; margin:0 auto 20px; border-radius:34px; border:0;
  background:var(--tl-primary-tint); color:var(--tl-primary); display:flex; align-items:center; justify-content:center; }
.empty-state .ico svg{ width:44px; height:44px; }       /* the JS svg is 28; scaled by CSS */
.empty-state h3{ margin:0 0 8px; font:900 clamp(24px,3.4vw,34px)/1.15 var(--font-display); letter-spacing:-.02em; color:var(--tl-ink); }
.empty-state p{ max-width:400px; margin:0 auto 24px; font-size:16px; line-height:1.55; color:var(--tl-muted); }  /* glass .72: 4.62 */
.empty-state .btn{ min-height:56px; padding:0 32px; font-size:17px; }
@media (max-width:600px){ .empty-state{ padding:40px 24px; margin:8px 0; } .empty-state .ico{ width:96px; height:96px; border-radius:30px; } .empty-state .btn{ width:100%; } }

/* ---------- 5.4.15 load-error state (D4): the visual half of A1 (markup emitted by renderLoadError) ---------- */
.empty-state.err{ animation: tl-in var(--dur-spring) var(--ease-spring) both; }
.empty-state.err .ico{ width:112px; height:112px; border-radius:34px; background:var(--tl-danger-tint); border:1px solid var(--tl-danger-line); color:var(--tl-danger); }
.empty-state .es-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.empty-state .es-actions .btn{ min-height:56px; }
@media (max-width:600px){
  .empty-state.err .ico{ width:96px; height:96px; border-radius:30px; }   /* same 96 well as the empty state at phone width */
  .empty-state .es-actions{ flex-direction:column; } .empty-state .es-actions .btn{ width:100%; }
}

/* ---------- 5.4.16 modal / dialog ---------- */
.scrim{ position:fixed; inset:0; z-index:50; display:flex; align-items:flex-start; justify-content:center;
  padding:max(6vh, 20px) 16px calc(20px + env(safe-area-inset-bottom)); overflow:auto; overscroll-behavior:contain;
  background:var(--tl-scrim); }                                    /* no blur (full-screen blur is costly on Android) */
.modal{ width:100%; max-width:520px; border-radius:var(--r-modal); animation: tl-in var(--dur-sheet-in) var(--ease-spring) both;
  background-color:var(--tl-surface); }   /* opaque: .94 over the ink scrim measured 4.39-4.47 for muted labels and the
                                              JS-inline #B4552F ("This cannot be undone.", #del-confirm); surface = 4.97 / 4.7+ */
.mhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 20px 12px 24px; border:0; }
.mhead h2{ margin:0; font:900 22px/1.2 var(--font-display); letter-spacing:-.02em; }
.mhead .x{ width:44px; height:44px; flex:none; border:0; border-radius:50%; font-size:22px; line-height:1; cursor:pointer;
  background:var(--tl-glass); border:1px solid var(--tl-glass-border); box-shadow:var(--sh-icon); color:var(--tl-ink); }  /* IconButton glass */
.mbody{ padding:8px 24px 8px; }
.mfoot{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:16px 24px 24px; border-top:1px solid var(--tl-line); }
@media (max-width:600px){
  /* bottom sheet, M5 feel. Pinned to the bottom with margin-top:auto instead of align-items:flex-end: a sheet
     taller than the screen (the create form) would otherwise overflow ABOVE the scroll origin and its header
     (title + Close) could never be scrolled back into view. */
  .scrim{ align-items:flex-start; padding:12px 0 0; }
  .modal{ max-width:none; margin-top:auto; border-radius:28px 28px 0 0; padding-bottom:env(safe-area-inset-bottom); }
  .mfoot .btn{ flex:1; }
}

/* ---------- 5.4.17 toast (toast() toggles .show; the 2.8 s hold is in JS) ---------- */
#toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:80;
  max-width:min(560px, calc(100vw - 32px)); width:max-content;
  display:flex; align-items:flex-start; gap:9px; padding:12px 20px; border-radius:22px;
  background:var(--tl-ink); color:var(--tl-cream); font:600 14px/1.45 var(--font-ui); text-align:left;
  box-shadow:var(--sh-panel); opacity:0; pointer-events:none; transform:translate(-50%, 14px);
  transition: opacity 200ms linear, transform 300ms var(--ease-spring); }
#toast.show{ opacity:1; transform:translate(-50%, 0); transition: opacity 300ms var(--ease-spring), transform 300ms var(--ease-spring); }
#toast .ok{ color:#FFD37A; }      /* 10.56 on ink */

/* ---------- 5.4.18 sign-in overlay (M1/M2): overrides of the injected <style> via the body prefix, no !important ---------- */
/* full-screen sign-in screen (not a dialog over a broken shell): cream + glows */
body #si-overlay{ background:var(--tl-bg); font-family:var(--font-ui); padding:20px 16px; overflow-y:auto; align-items:center; }
body #si-overlay::before{ content:""; position:fixed; left:-125px; top:-300px; width:640px; height:640px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, var(--tl-glow), rgba(55,118,90,0) 66%); }
body #si-overlay .si-card{ position:relative; max-width:430px; padding:28px 28px 22px; border-radius:28px;
  background-color:var(--tl-surface);                      /* opaque: keeps the JS-inline #6E7568 link at 4.56 */
  background-image:linear-gradient(180deg, var(--tl-glass-hi2) 0%, rgba(255,255,255,0) 42%);
  border:1px solid var(--tl-glass-border); box-shadow:var(--hi-inset), var(--sh-panel); }
body #si-overlay .si-logo{ margin-bottom:18px; gap:10px; }
body #si-overlay .si-logo svg{ width:34px; height:34px; }
body #si-overlay .si-logo span{ font:500 28px/1 var(--font-display); letter-spacing:-.02em; }
body #si-overlay h2{ font:900 28px/1.15 var(--font-display); letter-spacing:-.025em; margin:0 0 8px; }
body #si-overlay .si-sub{ color:var(--tl-muted); font-size:14.5px; line-height:1.55; }
body #si-overlay label{ font:700 11.5px var(--font-ui); text-transform:uppercase; letter-spacing:.08em; color:var(--tl-muted); margin:0 0 8px 4px; line-height:18px; }
body #si-overlay input{ min-height:56px; padding:0 18px; border:1.5px solid var(--tl-line-control); border-radius:18px;
  background:var(--tl-field); font:500 16px var(--font-ui); margin-bottom:14px; }
body #si-overlay #si-email{ border-color:var(--tl-primary); }                 /* M1: the email field is always primary */
/* the injected "#si-overlay .si-tok input" (1,1,1) beats "body #si-overlay input" (1,0,2) and would keep the
   App Reviewer token field at 13px (iOS zoom on focus). (1,1,2) wins: */
body #si-overlay .si-tok input{ font-size:16px; }
body #si-overlay input:focus{ border-color:var(--tl-primary); box-shadow:0 0 0 1.5px var(--tl-primary); }
body #si-overlay .si-btn{ min-height:56px; border-radius:28px; font:700 17px var(--font-ui); box-shadow:var(--hi-primary); }
/* no --sh-primary drop shadow here: it lay under "Use a different email" (JS-inline #6E7568, 3.81) and #si-msg */
body #si-overlay .si-tok .si-btn{ box-shadow:none; }                         /* keeps the injected ink fill */
body #si-overlay .si-msg{ font-size:13.5px; }
body #si-overlay .si-msg.err{ color:var(--tl-danger); }                      /* same values as the injected rules, on the opaque card */
body #si-overlay .si-msg.ok{ color:var(--tl-primary-text); }
body #si-overlay .si-hidden{ display:none; }
body #si-overlay .si-fold{ border-top-color:var(--tl-line); }
/* display:flex drops <summary> out of display:list-item, so Chromium stops drawing the native marker (the App Reviewer
   token fold read as a static caption). One drawn caret instead, identical on Blink and WebKit; under reduced motion the
   tl-tokens.css universal rule limits transition-property, so the rotation is instant: */
body #si-overlay .si-fold summary{ color:var(--tl-muted); min-height:44px; display:flex; align-items:center; gap:8px; list-style:none; }
body #si-overlay .si-fold summary::-webkit-details-marker{ display:none; }
body #si-overlay .si-fold summary::before{ content:""; flex:none; width:0; height:0; border-left:5px solid currentColor;
  border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform var(--dur-press); }
body #si-overlay .si-fold[open] > summary::before{ transform:rotate(90deg); }

/* 6-cell code: ONE native input drawn as 6 cells (no JS, still feeds the single #si-code value).
   Geometry in em of the input's own font-size (stays aligned under Android WebView textZoom).
   Space Mono advance = 0.612 em. Pitch = cell + gap = 2 em in both sizes. The cell image holds the 6 cells (12 em wide). */
body #si-overlay #si-code{
  --cell:1.6923em; --gap:.3077em; --padl:calc((var(--cell) - .612em) / 2);
  display:block; box-sizing:border-box;
  font:700 26px/1 var(--font-mono); color:var(--tl-ink); caret-color:var(--tl-primary);
  letter-spacing:calc(2em - .612em);                     /* = 1.388em: one glyph per cell */
  text-align:left; text-indent:0;
  width:calc(var(--padl) + 12em + 2px); max-width:100%;
  height:2.1538em; min-height:0; line-height:2.1538em; padding:0 0 0 var(--padl);
  margin:0 0 14px calc(50% - (12em - var(--gap)) / 2);   /* centre the 6 visible cells */
  border:0; border-radius:0; box-shadow:none; background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 312 56'%3E%3Crect x='0.75' y='0.75' width='42.5' height='54.5' rx='15.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3Crect x='52.75' y='0.75' width='42.5' height='54.5' rx='15.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3Crect x='104.75' y='0.75' width='42.5' height='54.5' rx='15.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3Crect x='156.75' y='0.75' width='42.5' height='54.5' rx='15.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3Crect x='208.75' y='0.75' width='42.5' height='54.5' rx='15.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3Crect x='260.75' y='0.75' width='42.5' height='54.5' rx='15.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:12em 100%; background-repeat:no-repeat; background-position:0 0;   /* exactly 6 cells: a 2em repeat-x tile showed a 7th partial cell in the padl+2px tail */
}
body #si-overlay #si-code:focus{
  box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 312 56'%3E%3Crect x='1' y='1' width='42' height='54' rx='15' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3Crect x='53' y='1' width='42' height='54' rx='15' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3Crect x='105' y='1' width='42' height='54' rx='15' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3Crect x='157' y='1' width='42' height='54' rx='15' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3Crect x='209' y='1' width='42' height='54' rx='15' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3Crect x='261' y='1' width='42' height='54' rx='15' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3C/svg%3E");
}
body #si-overlay #si-code::placeholder{ color:var(--tl-muted); }
@media (max-width:440px){
  body #si-overlay .si-card{ padding:24px 18px 18px; }
  body #si-overlay #si-code{
    --cell:1.7273em; --gap:.2727em; font-size:22px; height:2.3636em; line-height:2.3636em;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 264 52'%3E%3Crect x='0.75' y='0.75' width='36.5' height='50.5' rx='13.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3Crect x='44.75' y='0.75' width='36.5' height='50.5' rx='13.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3Crect x='88.75' y='0.75' width='36.5' height='50.5' rx='13.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3Crect x='132.75' y='0.75' width='36.5' height='50.5' rx='13.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3Crect x='176.75' y='0.75' width='36.5' height='50.5' rx='13.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3Crect x='220.75' y='0.75' width='36.5' height='50.5' rx='13.25' fill='%23FFFFFF' fill-opacity='.7' stroke='%237D8576' stroke-width='1.5'/%3E%3C/svg%3E");
  }
  body #si-overlay #si-code:focus{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 264 52'%3E%3Crect x='1' y='1' width='36' height='50' rx='13' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3Crect x='45' y='1' width='36' height='50' rx='13' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3Crect x='89' y='1' width='36' height='50' rx='13' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3Crect x='133' y='1' width='36' height='50' rx='13' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3Crect x='177' y='1' width='36' height='50' rx='13' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3Crect x='221' y='1' width='36' height='50' rx='13' fill='%23FFFFFF' fill-opacity='.7' stroke='%2337765A' stroke-width='2'/%3E%3C/svg%3E");
  }
}

/* ---------- 5.4.19 Settings / Privacy / Help: .sheet, .card-block, .linkrow ---------- */
.sheet{ max-width:680px; }
.card-block{ padding:22px 24px; border-radius:var(--r-section); }      /* panel glass .94 (5.4.1) */
.card-block h2{ margin:0 0 4px; font:700 19px/1.25 var(--font-display); }
.card-block p.lead{ margin:0 0 16px; color:var(--tl-muted); font-size:14px; }           /* 4.94 */
.linkrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:14px 0; border-top:1px solid var(--tl-line); }
.linkrow:first-of-type{ border-top:0; }
.card-block > .linkrow:first-child{ padding-top:0; }
.linkrow .lt{ min-width:0; }
.linkrow .lt strong{ display:block; font:600 14.5px/1.35 var(--font-ui); color:var(--tl-ink); }
.linkrow .lt span{ display:block; margin-top:2px; color:var(--tl-muted); font-size:13px; line-height:1.5; }
.linkrow .btn{ flex:none; }
@media (max-width:600px){ .card-block{ padding:18px; } .linkrow{ flex-wrap:wrap; } .linkrow .btn{ margin-left:auto; } }
#view-settings #set-save + .msg{ display:inline-block; }               /* inline margin-left:12px stays */

/* ---------- 5.4.20 grid card, spotlight stage, side list ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px; }
@media (max-width:400px){ .grid{ grid-template-columns:1fr; gap:14px; } }
.card{ display:flex; flex-direction:column; padding:8px; border-radius:var(--r-card); overflow:visible;
  transition: transform var(--dur-spring) var(--ease-spring), box-shadow var(--dur-spring); }
@media (hover:hover){ .card:hover{ transform:translateY(-2px); box-shadow:var(--hi-inset), var(--sh-panel); } }
.poster{ position:relative; aspect-ratio:16/10; border-radius:var(--r-media); overflow:hidden; background:var(--tl-primary-tint); cursor:pointer;
  transition: transform var(--dur-press) var(--ease-spring); }
.poster:active{ transform:scale(.985); }
.poster video, .poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.poster .empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background-color:var(--tl-surface); background-image:linear-gradient(var(--tl-primary-tint), var(--tl-primary-tint));
  color:var(--tl-muted-on-tint); text-align:center; padding:12px; }   /* opaque: 5.25 */
.poster .empty svg{ color:var(--tl-primary); }
.poster .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(251,250,246,.9); color:var(--tl-primary);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 8px 20px rgba(0,0,0,.25); transition:background-color var(--dur-fade), color var(--dur-fade); }
.card:hover .poster .play{ background:var(--tl-primary); color:var(--tl-cream); border-color:var(--tl-primary); }
.cbody{ display:flex; flex-direction:column; gap:8px; flex:1; padding:14px 12px 8px; }
.cbody h3{ margin:0; font:700 19px/1.25 var(--font-display); letter-spacing:-.01em; overflow-wrap:anywhere; }   /* N-30: wrap, no ellipsis */
.cmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px; color:var(--tl-muted-on-tint); font-size:13px; }   /* #58624F: muted measured 4.39 on the stacked glass at 390 */
.cmeta .sep{ opacity:.5; }
.cactions{ display:flex; flex-wrap:wrap; gap:8px 6px; margin-top:auto; padding-top:6px; }       /* wrap fixes WEB-9 at 360-400 */
/* one row where all four fit, otherwise an even 2 x 2 (Play | Share / Settings | Delete), never Delete alone:
   basis 0 above 345 px (equal shares of one row), 50% below it (two per row). Measured one-row need with 10 px
   padding: 312 px of buttons + 18 px of gaps = 330 (1440 card: 351 -> one row; 390: 316 -> 2 x 2).
   A larger text zoom falls back to plain wrapping (min-content). */
.cactions .btn{ flex:1 1 clamp(0px, calc((345px - 100%) * 999), calc(50% - 3px)); padding-inline:10px; }

.spotlight{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }   /* minmax(0,…): nowrap rows/buttons must not widen the column past 360 */
@media (min-width:921px){ .spotlight{ grid-template-columns:minmax(0,1fr) 340px; gap:20px; } }
@media (min-width:1180px){ .spotlight{ grid-template-columns:minmax(0,1fr) 400px; gap:24px; } }   /* D1 1fr 400 */
.stage{ padding:24px; border-radius:var(--r-card); min-width:0; }
@media (max-width:600px){ .stage{ padding:8px 8px 14px; } .stage .stitle, .stage .smeta, .stage .sact{ margin-inline:8px; } }
.player{ position:relative; aspect-ratio:16/9; border-radius:var(--r-media); overflow:hidden; background:var(--tl-hero-bg); }
.player video{ width:100%; height:100%; display:block; background:var(--tl-hero-bg); }   /* native controls; nothing glass over them */
.player .ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:24px; text-align:center; color:var(--tl-muted-on-tint);
  background-color:var(--tl-surface); background-image:linear-gradient(var(--tl-primary-tint), var(--tl-primary-tint)); }  /* opaque by itself: 5.25 */
.player .ph > svg{ color:var(--tl-primary); }
.stage .stitle{ margin:18px 2px 4px; font:900 clamp(24px,3vw,34px)/1.15 var(--font-display); letter-spacing:-.025em; overflow-wrap:anywhere; }
.stage .smeta{ margin:0 2px 16px; color:var(--tl-muted); font-size:14.5px; }
.stage .sact{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:600px){ .stage .sact .btn-accent, .stage .sact .btn-ghost{ flex:1 1 calc(50% - 5px); } }

.panel{ padding:8px; border-radius:var(--r-row); }
.panel .ph2{ padding:12px 12px 8px; font:700 11.5px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--tl-muted); }
.rowitem{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 12px; text-align:left; cursor:pointer;
  border:1.5px solid transparent; border-radius:18px; background:transparent; color:var(--tl-ink); font-family:var(--font-ui);
  transition: background-color var(--dur-fade), border-color var(--dur-fade), transform var(--dur-press) var(--ease-spring); }
.rowitem:hover{ background:var(--tl-chip-bg); }
.rowitem:active{ transform:scale(.97); }
.rowitem.sel{ background:var(--tl-field); border-color:var(--tl-primary); }        /* RadioRow selected */
.rowitem .tn{ flex:1; min-width:0; }
.rowitem .tn .nm{ display:block; font:600 14.5px/1.3 var(--font-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rowitem .tn .mt{ display:block; font-size:12.5px; line-height:1.4; color:var(--tl-muted-on-tint); overflow-wrap:anywhere; }
/* wraps (no nowrap/ellipsis): the retention date ("available until …") was cut at 360-430 and its text ran under the pill (G9) */
.rowitem .pill{ flex:none; }

/* ---------- 5.3.6 reduced motion, component half (the universal * rule is in tl-tokens.css) ---------- */
@media (prefers-reduced-motion: reduce){
  .btn:active, .seg button:active, .nav button:active, .rowitem:active, .poster:active, .card:hover{ transform:none !important; }
  .modal, .empty-state.err{ animation: tl-fade var(--dur-fade) linear both !important; }
  .pill.capturing .dot::after, .skel::after{ display:none; }
}

/* ---------- 5.2.3 fallbacks for the two blurred surfaces (last, so they win over the header rules) ---------- */
/* No backdrop-filter (old WebViews): blurred surfaces go to .94 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .sidebar, .mobile-bar{ background-color: var(--tl-glass-fallback); }
}
/* Less transparency / more contrast: the :root token swap is in tl-tokens.css; here the blur goes */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
  .sidebar, .mobile-bar{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}
/* Windows High Contrast / forced colors: let the system draw edges, drop decoration */
@media (forced-colors: active){
  .card, .stage, .panel, .card-block, .modal, .banner, .empty-state, .sidebar, .mobile-bar,
  input, select, .btn, .seg, .pill, .daychip{ border: 1px solid CanvasText; box-shadow:none; background-image:none; }
  body::before, body::after{ display:none; }
  .sidebar.open ~ .main::before{ display:none; }     /* the drawer's CanvasText border marks it */
}