/* ============================================================================
   slate.css — the slate surface. All classes prefixed `tsl-` and scoped under
   #tsSlate so nothing collides with the app's own styles or the sm- system.

   The slate is intentionally DARK-LOCKED (its own fixed palette) regardless of
   the app's light/dark theme — the same way the featured Home tile stays dark
   in light mode. It reuses --sm-* tokens only inside the settings sheet so that
   chrome feels native.
   ============================================================================ */

#tsSlate{
  --tsl-bg:#08080a;              /* matches app background_color */
  --tsl-panel:#101012;
  --tsl-line:#24242a;
  --tsl-ink:#e9e7df;
  --tsl-ink-dim:#8b9096;         /* == --sm-muted */
  --tsl-ink-faint:#5a5e66;       /* == --sm-dim   */
  --tsl-accent:#ffd23f;          /* == --sm-accent (brand amber) */
  --tsl-led:#f4f1e6;             /* TC colour; overridden inline by JS */
  --tsl-ok:#4ade80;              /* == --sm-green */
  --tsl-warn:#f5a623;
  --tsl-bad:#ff5b52;             /* == --sm-err */
  --tsl-seg-off:rgba(255,255,255,.05);

  position:fixed; inset:0; z-index:120; display:none;
  flex-direction:column; padding:clamp(16px,3.2vmin,44px);
  background:radial-gradient(120% 90% at 50% -10%, #16161a 0%, #08080a 60%);
  color:var(--tsl-ink);
  font-family:var(--sm-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
  -webkit-font-smoothing:antialiased;
}
body.view-slate #tsSlate{ display:flex; }

#tsSlate .tsl-mono{ font-family:var(--sm-mono,ui-monospace,Menlo,monospace); }

/* top bar */
#tsSlate .tsl-top{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:clamp(10px,2vmin,22px); border-bottom:1px solid var(--tsl-line); }
#tsSlate .tsl-brand{ display:flex; align-items:center; gap:12px; }
#tsSlate .tsl-brand img{ height:20px; width:auto; display:block; }
#tsSlate .tsl-brand .tsl-eyebrow{ font-family:var(--sm-mono,monospace); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tsl-ink-faint); }
#tsSlate .tsl-status{ display:flex; align-items:center; gap:9px; font-family:var(--sm-mono,monospace);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tsl-ink-dim); }
#tsSlate .tsl-dot{ width:10px; height:10px; border-radius:50%; background:var(--tsl-ink-faint); }
#tsSlate .tsl-status.is-locked  .tsl-dot{ background:var(--tsl-ok);  box-shadow:0 0 12px var(--tsl-ok);  animation:tsl-pulse 2s infinite; }
#tsSlate .tsl-status.is-fallback .tsl-dot{ background:var(--tsl-warn); box-shadow:0 0 12px var(--tsl-warn); animation:tsl-pulse 1.2s infinite; }
#tsSlate .tsl-status.is-nosignal .tsl-dot{ background:var(--tsl-bad); box-shadow:0 0 12px var(--tsl-bad); }
#tsSlate .tsl-status.is-locked  .tsl-label{ color:var(--tsl-ok); }
#tsSlate .tsl-status.is-fallback .tsl-label{ color:var(--tsl-warn); }
#tsSlate .tsl-status.is-nosignal .tsl-label{ color:var(--tsl-bad); }
@keyframes tsl-pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }

/* clapper (optional) */
#tsSlate .tsl-clapper{ display:none; margin-top:clamp(10px,2vmin,20px); position:relative; }
#tsSlate .tsl-clapper.is-on{ display:block; }
#tsSlate .tsl-clapper.is-shake{ animation:tsl-shake .18s ease-out 1; }
@keyframes tsl-shake{ 0%{transform:translate(0,0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,1px)} 100%{transform:translate(0,0)} }
#tsSlate .tsl-stick,#tsSlate .tsl-base{ height:clamp(20px,3.4vmin,40px); border-radius:4px;
  background-image:repeating-linear-gradient(-52deg,#f4f1e6 0,#f4f1e6 26px,#101014 26px,#101014 52px);
  box-shadow:inset 0 0 0 2px #000; }
#tsSlate .tsl-base{ position:relative; z-index:1; }
#tsSlate .tsl-stick{ position:relative; z-index:2; margin-bottom:3px; transform-origin:2% 100%; transform:rotate(-20deg);
  box-shadow:inset 0 0 0 2px #000,0 6px 14px rgba(0,0,0,.5); }
#tsSlate .tsl-clapper.is-anim .tsl-stick{ transform:rotate(-20deg); }
#tsSlate .tsl-clapper.is-anim .tsl-stick.is-snap{ animation:tsl-snap .34s cubic-bezier(.3,1.4,.5,1) 1 forwards; }
#tsSlate .tsl-clapper:not(.is-anim) .tsl-stick{ transform:rotate(0deg); }
@keyframes tsl-snap{ 0%{transform:rotate(-20deg)} 55%{transform:rotate(1.5deg)} 70%{transform:rotate(-3deg)} 100%{transform:rotate(0)} }
#tsSlate .tsl-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; border-radius:6px; z-index:3; }
#tsSlate .tsl-flash.is-go{ animation:tsl-flash .3s ease-out 1; }
@keyframes tsl-flash{ 0%{opacity:0} 40%{opacity:.55} 100%{opacity:0} }

/* body: metadata + timecode */
#tsSlate .tsl-body{ flex:1; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(14px,3vmin,40px); padding:clamp(10px,2.5vmin,30px) clamp(4px,1vmin,14px); min-height:0; }
#tsSlate .tsl-titleblock{ display:flex; flex-direction:column; gap:6px; }
#tsSlate .tsl-production{ font-size:clamp(26px,6.4vmin,78px); font-weight:700; line-height:1.02; }
#tsSlate .tsl-client{ font-family:var(--sm-mono,monospace); font-size:clamp(12px,2.2vmin,22px);
  letter-spacing:.2em; text-transform:uppercase; color:var(--tsl-ink-dim); }
#tsSlate .tsl-client .tsl-k{ color:var(--tsl-ink-faint); margin-right:8px; }

#tsSlate .tsl-fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:clamp(8px,1.6vmin,18px); }
#tsSlate .tsl-field{ border:1px solid var(--tsl-line); border-radius:14px;
  padding:clamp(8px,1.4vmin,16px) clamp(10px,1.6vmin,18px);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  display:flex; flex-direction:column; gap:4px; min-width:0; }
#tsSlate .tsl-field .tsl-fk{ font-family:var(--sm-mono,monospace); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tsl-ink-faint); }
#tsSlate .tsl-field .tsl-fv{ font-size:clamp(18px,3vmin,34px); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tsSlate .tsl-field.is-take .tsl-fv{ color:var(--tsl-accent); }

#tsSlate .tsl-tcwrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
#tsSlate .tsl-tc{ font-family:var(--sm-mono,monospace); font-size:clamp(46px,13vmin,168px); font-weight:700; line-height:1;
  letter-spacing:.04em; color:var(--tsl-led); font-variant-numeric:tabular-nums; position:relative;
  text-shadow:0 0 22px color-mix(in srgb,var(--tsl-led) 45%,transparent),0 0 4px color-mix(in srgb,var(--tsl-led) 60%,transparent); }
#tsSlate .tsl-tc .tsl-ghost{ position:absolute; inset:0; color:var(--tsl-seg-off); text-shadow:none; z-index:-1; }
#tsSlate .tsl-tc.is-stale{ color:var(--tsl-ink-faint); text-shadow:none; }
#tsSlate .tsl-tcmeta{ display:flex; gap:clamp(12px,2.4vmin,30px); align-items:center; font-family:var(--sm-mono,monospace);
  font-size:clamp(11px,1.6vmin,15px); letter-spacing:.14em; text-transform:uppercase; color:var(--tsl-ink-dim); }
#tsSlate .tsl-tcmeta b{ color:var(--tsl-ink); font-weight:600; }

/* bottom actions */
#tsSlate .tsl-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:clamp(10px,2vmin,22px); border-top:1px solid var(--tsl-line); }
#tsSlate .tsl-actions-left{ display:flex; align-items:center; gap:10px; }
#tsSlate .tsl-actions-right{ display:flex; align-items:center; gap:10px; }

/* settings sheet — reuse sm- component classes (see slate.js). This only sizes the shell. */
#tsSlateSheet{ position:fixed; inset:0; z-index:130; display:none; }
#tsSlateSheet.is-open{ display:block; }
#tsSlateSheet .tsl-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
#tsSlateSheet .tsl-panel{ position:absolute; top:0; right:0; height:100%; width:min(460px,94vw);
  background:var(--sm-panel,#141519); border-left:1px solid var(--sm-line,#26272e);
  display:flex; flex-direction:column; }
#tsSlateSheet .tsl-panel-head{ display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--sm-line,#26272e); }
#tsSlateSheet .tsl-panel-body{ overflow-y:auto; padding:8px 20px 28px; -webkit-overflow-scrolling:touch; }
#tsSlateSheet .tsl-sec{ margin-top:20px; }
#tsSlateSheet .tsl-sec-title{ font-family:var(--sm-mono,monospace); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sm-muted,#8b9096); margin-bottom:12px; }
#tsSlateSheet .tsl-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
#tsSlateSheet .tsl-row label.tsl-name{ flex:0 0 92px; font-size:13px; color:var(--sm-muted,#8b9096); }
#tsSlateSheet .tsl-row input[type=text], #tsSlateSheet .tsl-row select{
  flex:1; min-width:0; background:var(--sm-panel-2,#1b1c22); border:1px solid var(--sm-line,#26272e);
  color:var(--sm-ink,#fff); border-radius:10px; padding:11px 12px; font-size:15px; font-family:inherit; }
#tsSlateSheet .tsl-fieldrow{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; margin-bottom:10px; }
#tsSlateSheet .tsl-hint{ font-size:12px; color:var(--sm-dim,#5a5e66); line-height:1.5; margin-top:2px; }
#tsSlate .tsl-mocknote{ display:none; }