/* self-hosted fonts (local-first, no CDN). Display = Apfel Grotezk (Italian foundry, ownable,
   uncommon); UI = Plus Jakarta Sans. Cabinet / Bricolage / Inter installed as one-line swaps. */
@font-face{font-family:"Apfel Grotezk";src:url("fonts/ApfelGrotezk-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url("fonts/ApfelGrotezk-Mittel.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url("fonts/ApfelGrotezk-Satt.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Apfel Grotezk";src:url("fonts/ApfelGrotezk-Fett.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/PlusJakartaSans-Variable.ttf") format("truetype-variations");font-weight:200 800;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url("fonts/CabinetGrotesk-Variable.ttf") format("truetype-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/BricolageGrotesque-Variable.ttf") format("truetype-variations");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Variable.ttf") format("truetype-variations");font-weight:100 900;font-display:swap}

/* ============================================================
   SCOVO — glass shell. Fresh product UI, built to the approved
   Dark Studio system (design/scovo-home.html) and wired to the
   engine. Glass is the brand: you look through your footage.
   Not a reskin of the cockpit. Dark "Studio" default, light
   "Memory" via [data-mode="light"].
   ============================================================ */
:root{
  --ink:#F4EEE3; --ink-2:#CDC3B2; --ink-3:#8F8676; --ink-4:#5f574b;
  --panel:rgba(26,22,18,0.30); --panel-2:rgba(34,28,23,0.40); --rail:rgba(22,18,15,0.26);
  --hair:rgba(255,247,235,0.10); --hair-2:rgba(255,247,235,0.05);
  --gold:#E9BC63; --gold-glow:#F7CF78; --gold-soft:rgba(233,188,99,0.16); --gold-ink:#F3D08A;
  --sage:#A9C4A0; --sage-soft:rgba(169,196,160,0.16); --coral:#E8836B; --coral-soft:rgba(232,131,107,0.16);
  --r-control:10px; --r-action:12px; --r-card:16px; --r-panel:18px;
  /* swap either line to change the brand face (all self-hosted):
     --disp options: "Apfel Grotezk" · "Bricolage Grotesque" · "Cabinet Grotesk"
     --ui options: "Plus Jakarta Sans" · "Inter" */
  --disp:"Apfel Grotezk","Plus Jakarta Sans",system-ui,sans-serif;
  --ui:"Plus Jakarta Sans",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --tile-bg:#16120e;
  /* motion tokens (PRD §4) */
  --settle:cubic-bezier(.22,1,.36,1); --emphasis:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1); --reveal:cubic-bezier(.16,1,.3,1);
  --primary-bg:linear-gradient(180deg,rgba(24,20,16,.82),rgba(12,10,8,.72));
  --primary-bg-hover:linear-gradient(180deg,rgba(32,27,21,.88),rgba(15,12,10,.78));
  --primary-border:rgba(233,188,99,.42);
  --primary-border-hover:rgba(247,207,120,.62);
  --primary-ink:#F4D894;
  --primary-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.24),0 12px 30px rgba(0,0,0,.28);
  --primary-shadow-hover:inset 0 1px 0 rgba(255,255,255,.16),0 16px 36px rgba(0,0,0,.34),0 0 0 3px rgba(233,188,99,.08);
  --ghost-bg:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  --ghost-bg-hover:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  --ghost-border:var(--hair);
  --ghost-ink:var(--ink-2);
}
[data-buttons="antique"]{
  --primary-bg:linear-gradient(180deg,rgba(104,78,39,.74),rgba(54,43,28,.78));
  --primary-bg-hover:linear-gradient(180deg,rgba(124,93,48,.78),rgba(67,52,32,.82));
  --primary-border:rgba(196,152,75,.46);
  --primary-border-hover:rgba(218,174,96,.64);
  --primary-ink:#F8E8C5;
  --primary-shadow:inset 0 1px 0 rgba(255,244,214,.18),inset 0 -1px 0 rgba(0,0,0,.22),0 12px 28px rgba(0,0,0,.25);
  --primary-shadow-hover:inset 0 1px 0 rgba(255,244,214,.24),0 15px 34px rgba(0,0,0,.30),0 0 0 3px rgba(196,152,75,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ui);color:var(--ink);overflow:hidden;background:#0c0a08}
button,select,input{font-family:var(--ui)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(233,188,99,.18),0 0 0 1px rgba(233,188,99,.38)}
button:disabled{cursor:not-allowed;opacity:.58;transform:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important}
button.ai-warming,[data-ai-warming="true"]{filter:saturate(.65);opacity:.55}
button.ai-warming:hover,[data-ai-warming="true"]:hover{transform:none}

/* layer 1 — cinematic graded backdrop, always bleeding through */
.backdrop{position:fixed;inset:0;background:url('assets/backdrop.jpg') center/cover no-repeat;
  filter:blur(46px) saturate(.8) brightness(.42);transform:scale(1.25);z-index:0}
.grade{position:fixed;inset:0;z-index:0;background:
  radial-gradient(1300px 800px at 80% -10%, rgba(233,188,99,.12), transparent 55%),
  linear-gradient(180deg, rgba(14,11,9,.45), rgba(12,10,8,.72))}

/* the ambient glow behind the glass — gold at rest, pulls the hovered footage's color
   (the SKYLRK move). "flow" drifts very slowly (default), "gold" is static, "none" is off. */
.glow{position:fixed;inset:-30%;z-index:0;pointer-events:none;--glow-color:233,188,99;will-change:transform;
  background:
    radial-gradient(40% 36% at 30% 26%, rgba(var(--glow-color),.26), transparent 60%),
    radial-gradient(34% 32% at 76% 74%, rgba(var(--glow-color),.16), transparent 62%);
  filter:blur(40px)}
[data-bg="flow"] .glow{animation:glowdrift 34s ease-in-out infinite alternate}
[data-bg="gold"] .glow{transform:translate(2%,1%) scale(1.08)}
[data-bg="none"] .glow{display:none}
@keyframes glowdrift{0%{transform:translate(-9%,-7%) scale(1.05)}50%{transform:translate(10%,6%) scale(1.18)}100%{transform:translate(-5%,10%) scale(1.07)}}
[data-mode="light"] .glow{filter:blur(48px);opacity:.22}
@media(prefers-reduced-motion:reduce){[data-bg="flow"] .glow{animation:none}}

/* layer 2 — the single sheet of frosted glass */
.app{position:fixed;inset:26px;border-radius:20px;display:flex;flex-direction:column;overflow:hidden;z-index:1;
  background:var(--panel);backdrop-filter:blur(36px) saturate(1.3);-webkit-backdrop-filter:blur(36px) saturate(1.3);
  border:1px solid var(--hair);box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.runtime-banner{min-height:38px;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;
  border-bottom:1px solid rgba(233,188,99,.18);background:linear-gradient(180deg,rgba(233,188,99,.15),rgba(255,255,255,.045));
  color:var(--ink-2);font-size:12.5px;line-height:1.35;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.runtime-banner[hidden]{display:none}
.runtime-banner b{color:var(--gold-glow);font-weight:700}
.runtime-banner .rb-dot{width:8px;height:8px;border-radius:50%;background:var(--gold-glow);box-shadow:0 0 14px var(--gold-soft);flex-shrink:0;animation:pulse 1.4s ease-in-out infinite}
.runtime-banner.ready{border-bottom-color:rgba(169,196,160,.26);background:linear-gradient(180deg,rgba(169,196,160,.14),rgba(255,255,255,.035))}
.runtime-banner.ready b{color:var(--sage)}
.runtime-banner.ready .rb-dot{background:var(--sage);box-shadow:0 0 14px var(--sage-soft);animation:none}
.runtime-banner.warming{border-bottom-color:rgba(233,188,99,.18);background:linear-gradient(180deg,rgba(233,188,99,.15),rgba(255,255,255,.045))}
.runtime-banner.error{border-bottom-color:rgba(232,131,107,.22);background:linear-gradient(180deg,rgba(232,131,107,.13),rgba(255,255,255,.04))}
.runtime-banner.error b{color:var(--coral)}
.runtime-banner.error .rb-dot{background:var(--coral);box-shadow:0 0 14px var(--coral-soft)}
/* whole top bar drags the window (default arrow cursor like a native titlebar); only the buttons opt out.
   the wordmark + its svg carry data-tauri-drag-region too, and the svg ignores pointer events so the click
   always lands on a draggable surface. */
.titlebar{height:46px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--hair-2);flex-shrink:0;position:relative;-webkit-app-region:drag}
.titlebar .wordmark{-webkit-app-region:drag}
.titlebar .wordmark svg{pointer-events:none}
.titlebar button,.titlebar input,.titlebar select,.titleact{-webkit-app-region:no-drag}
.wordmark{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.01em;display:flex;align-items:center;gap:7px}
.wordmark .lens{width:15px;height:15px}
.wordmark{letter-spacing:-.005em}
.wordmark .lenso{width:.78em;height:.78em;vertical-align:-.045em;margin:0 -.055em}
.titleact{margin-left:auto;display:flex;align-items:center;gap:6px}
.modebtn{font-family:var(--ui);font-size:11px;color:var(--ink-3);background:rgba(255,255,255,.05);border:1px solid var(--hair-2);
  border-radius:999px;padding:5px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .16s var(--settle),border-color .16s var(--settle),color .16s var(--settle),transform .16s var(--settle)}
.modebtn:hover{color:var(--ink);border-color:var(--hair)}
.body{flex:1;display:flex;min-height:0}

/* layer 3 — left rail (denser glass) */
.rail{width:210px;flex-shrink:0;background:var(--rail);border-right:1px solid var(--hair-2);padding:18px 12px;display:flex;flex-direction:column}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);font-weight:600;padding:0 10px 12px}
.ritem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-control);font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;margin-bottom:2px;transition:background .14s,color .14s,border-color .14s}
.ritem svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.85;flex-shrink:0}
.ritem:hover{background:var(--hair-2);color:var(--ink)}
.ritem.active{background:var(--gold-soft);color:var(--gold-glow);box-shadow:inset 0 0 0 1px rgba(233,188,99,.22)}
.ritem .spark{margin-left:auto;color:var(--gold);opacity:.9}
.ritem .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.ritem.active .cnt{color:var(--gold)}
.railsec{margin-top:14px}
.newbtn{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;font-size:13px;color:var(--ink-3);cursor:pointer}
.newbtn:hover{color:var(--ink)}

/* center canvas */
.content{flex:1;min-width:0;padding:18px 26px 0;overflow-y:auto;position:relative}
.content::-webkit-scrollbar{width:0}
[data-density="pro"] .content{padding:14px 18px 0}
[data-density="pro"] .rail{width:198px;padding-top:14px}
[data-density="pro"] .ritem{padding:7px 10px;font-size:12.5px}
[data-density="pro"] .grid{gap:10px}
[data-density="pro"] .tile{border-radius:10px}
[data-density="pro"] .inspector{width:324px;padding:18px 18px}
[data-density="pro"] .surface h2{font-size:clamp(22px,2.2vw,29px)}
[data-density="pro"] .glassblock{padding:14px}
/* Pro/Default REMOVED — one experience, full power. Every rail view + all 3 grid modes + full
   clip detail are always visible. Density is spacing only, never a feature gate. */
.rail{width:178px;padding-top:20px}
.ritem{padding:11px 12px;margin-bottom:5px}
.content{padding-top:20px}
.grid{gap:15px}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:2px;flex-wrap:wrap}
.setup-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);gap:16px;align-items:center;margin:0 0 14px;padding:16px;border-radius:var(--r-panel);border:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:0 18px 55px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.setup-card[hidden]{display:none}
.setup-card h3{font-family:var(--disp);font-size:22px;line-height:1.08;letter-spacing:-.015em;margin:8px 0 5px}
.setup-card p{font-size:13px;color:var(--ink-3);line-height:1.45;max-width:62ch}
.setup-pill{display:inline-flex;align-items:center;width:max-content;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:750;text-transform:capitalize;border:1px solid var(--hair)}
.setup-pill.ready{color:var(--sage);background:var(--sage-soft);border-color:rgba(169,196,160,.34)}
.setup-pill.warming{color:var(--gold-ink);background:var(--gold-soft);border-color:rgba(233,188,99,.28)}
.setup-pill.error{color:var(--coral);background:var(--coral-soft);border-color:rgba(232,131,107,.30)}
.setup-side{display:grid;gap:9px;min-width:0}
.setup-plan{font:650 12.5px/1.35 var(--ui);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setup-progress{height:8px;border-radius:999px;background:rgba(0,0,0,.20);overflow:hidden;border:1px solid var(--hair-2)}
.setup-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sage),var(--gold-glow));box-shadow:0 0 18px var(--gold-soft);transition:width .28s var(--settle)}
.setup-foot{display:flex;gap:10px;align-items:center;justify-content:space-between}
.setup-foot span{min-width:0;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg,.views{flex-shrink:0}
/* search — the hero object, recede the chrome around it */
.searchwrap{flex:1 1 180px;min-width:0;display:flex;align-items:center;gap:10px;max-width:420px;
  background:rgba(0,0,0,.24);border:1px solid var(--hair-2);border-radius:var(--r-action);padding:9px 13px;transition:border-color .16s,box-shadow .16s,background .16s}
.searchwrap:focus-within{border-color:rgba(233,188,99,.4);box-shadow:0 0 0 3px var(--gold-soft)}
.searchwrap svg{width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:1.7;flex-shrink:0}
.searchwrap input{flex:1;background:none;border:0;outline:0;color:var(--ink);font-family:var(--ui);font-size:13.5px;text-overflow:ellipsis}
.searchwrap input::placeholder{color:var(--ink-4)}
.mic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--gold);background:none;border:0;flex-shrink:0}
.mic:hover{background:var(--gold-soft)}
.mic.rec{color:var(--coral);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.seg{display:inline-flex;background:rgba(0,0,0,.22);border:1px solid var(--hair-2);border-radius:999px;padding:3px}
.seg button{font-family:var(--ui);font-size:12.5px;font-weight:500;color:var(--ink-3);background:none;border:none;height:26px;padding:0 15px;border-radius:999px;cursor:pointer;transition:color .14s}
.seg button.on{background:rgba(255,255,255,.10);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
/* one control language across the topbar: kill the native select chrome (the macOS default
   box + spinners read as a foreign control between the glass pills) and draw our own chevron */
.sortpick{-webkit-appearance:none;appearance:none;height:34px;border-radius:999px;border:1px solid var(--hair-2);background:rgba(0,0,0,.18) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238F8676' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat right 12px center;color:var(--ink-2);font:650 12px/1 var(--ui);padding:0 30px 0 14px;outline:none;cursor:pointer}
.sortpick:hover,.sortpick:focus{border-color:var(--hair);color:var(--ink)}
[data-mode="light"] .sortpick{background-color:rgba(255,255,255,.34);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%235c5344' stroke-width='1.6' stroke-linecap='round'/></svg>")}
.views{display:flex;gap:4px;margin-left:auto}
.views button{width:34px;height:34px;border-radius:var(--r-control);border:1px solid var(--hair-2);background:none;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;transition:background .16s var(--settle),border-color .16s var(--settle),color .16s var(--settle),transform .16s var(--settle)}
.views button:hover{transform:translateY(-1px);border-color:var(--hair);background:rgba(255,255,255,.05)}
.views button.on{color:var(--ink);border-color:var(--hair);background:rgba(255,255,255,.06)}
.views svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.tell-legend{position:relative;flex-shrink:0}
.tell-legend[hidden]{display:none}
.tellkey-btn .tell-mini{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold-soft)}
.tell-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:190px;display:none;gap:7px;padding:10px;border-radius:14px;border:1px solid var(--hair);background:var(--panel-2);backdrop-filter:blur(24px) saturate(1.25);-webkit-backdrop-filter:blur(24px) saturate(1.25);box-shadow:0 24px 70px rgba(0,0,0,.34)}
.tell-pop.open{display:grid}
.tell-pop span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.tell-pop i{width:8px;height:8px;border-radius:50%;background:var(--tell);box-shadow:0 0 12px color-mix(in srgb,var(--tell) 42%,transparent)}

.title{font-family:var(--disp);font-weight:700;font-size:clamp(32px,3.6vw,46px);letter-spacing:-.022em;line-height:1.04;margin:12px 0 2px;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.sub{font-size:13px;color:var(--ink-3);margin-bottom:20px}
.sub b{color:var(--ink-2);font-weight:600}

/* the footage grid + alive tiles */
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:13px;padding-bottom:26px}
.grid.rows{grid-template-columns:1fr}
.tile{position:relative;border-radius:var(--r-action);overflow:hidden;aspect-ratio:16/10;cursor:pointer;background:var(--tile-bg);contain:layout paint style;
  box-shadow:0 8px 22px rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.055);
  transition:transform .22s var(--settle),box-shadow .22s var(--settle),border-color .2s}
.tile img{width:100%;height:100%;object-fit:cover;display:block;background:transparent;opacity:0;transition:opacity .18s var(--settle),transform .4s var(--settle)}
.tile img.loaded,.tile img[src^="data:"]{opacity:1}
.tile:hover{transform:none;box-shadow:0 14px 34px rgba(0,0,0,.32);z-index:3;border-color:rgba(255,255,255,.08)}
.tile:hover img{transform:none}
/* offline / not-linked-right clips: a red glow behind the tile so broken links are obvious at a glance */
.tile.unlinked{overflow:visible}
.tile.unlinked>img,.tile.unlinked>.ph,.tile.unlinked>.scrubv,.tile.unlinked>.scrubstrip{border-radius:inherit}
.unlinked-glow{position:absolute;inset:5% 4% -7%;z-index:-1;border-radius:inherit;background:var(--danger,#e5484d);
  opacity:.24;filter:blur(20px);transform:translateY(6px);pointer-events:none;transition:opacity .2s var(--settle),filter .2s var(--settle)}
.tile.unlinked:hover .unlinked-glow{opacity:.38;filter:blur(26px)}
.offline-sect h4{color:var(--danger,#e5484d)}
.offline-sect .pathbox{font:11px/1.4 var(--mono,ui-monospace,monospace);color:var(--ink-2,#bbb);background:rgba(229,72,77,.08);
  border:1px solid rgba(229,72,77,.28);border-radius:8px;padding:7px 9px;margin:8px 0 10px;word-break:break-all;cursor:pointer;transition:background .15s}
.offline-sect .pathbox:hover{background:rgba(229,72,77,.14)}
.offline-sect .pathbox.copied{background:rgba(122,180,120,.16);border-color:rgba(122,180,120,.4)}
.offline-sect .pathbox.copied::after{content:" ✓ copied";color:var(--sage,#7ab478)}
/* multi-select */
.tile.selm{outline:2.5px solid var(--gold,#c8a96a);outline-offset:-2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--gold,#c8a96a) 26%,transparent)}
.tile.selm::after{content:"✓";position:absolute;top:7px;right:7px;z-index:7;width:20px;height:20px;border-radius:50%;
  background:var(--gold,#c8a96a);color:#1a1407;font:700 13px/20px var(--ui);text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.marquee{position:fixed;z-index:120;border:1px solid var(--gold,#c8a96a);background:color-mix(in srgb,var(--gold,#c8a96a) 12%,transparent);border-radius:3px;pointer-events:none}
.selbar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:130;display:flex;align-items:center;gap:10px;
  background:var(--panel,#1b1712);border:1px solid var(--panel-2,#2a241c);border-radius:14px;padding:9px 12px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(20px)}
.selbar .selcount{font:600 13px/1 var(--ui);color:var(--ink,#eee);padding:0 4px}
.selbar button{padding:7px 14px;font-size:12.5px}
.selbar .selname{background:rgba(255,255,255,.05);border:1px solid var(--panel-2,#2a241c);border-radius:9px;
  padding:7px 10px;color:var(--ink,#eee);font-size:13px;outline:none;min-width:230px}
.selbar .selname:focus{border-color:var(--gold,#c8a96a)}
.tile.has-tell-glow{overflow:visible;contain:layout style}
.tile.has-tell-glow>img,.tile.has-tell-glow>.ph,.tile.has-tell-glow>.scrubv,.tile.has-tell-glow>.scrubstrip{border-radius:inherit}
.tell-under{position:absolute;inset:8% 7% -8%;z-index:-1;border-radius:inherit;background:var(--tell-glow);opacity:.13;filter:blur(20px);transform:translateY(8px) scale(.96);transition:opacity .2s var(--settle),transform .2s var(--settle),filter .2s var(--settle);pointer-events:none}
.tile:hover .tell-under,.tile.touchmag .tell-under{opacity:.23;transform:translateY(9px) scale(1.02);filter:blur(24px)}
.tell-dots{position:absolute;left:9px;top:9px;z-index:6;display:flex;gap:5px;pointer-events:none}
.tell-dots i{width:7px;height:7px;border-radius:50%;background:var(--tell);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 12px color-mix(in srgb,var(--tell) 42%,transparent);opacity:.68;transition:opacity .16s var(--settle),transform .16s var(--settle)}
.tile:hover .tell-dots i,.tile.touchmag .tell-dots i{opacity:.92;transform:scale(1.12)}
.tile.hero{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.grid.rows .tile.hero{grid-column:span 1;grid-row:span 1;aspect-ratio:16/10}
.tile.sel{border:1.5px solid var(--gold);box-shadow:0 0 0 1px var(--gold),0 20px 50px rgba(0,0,0,.5),0 0 40px var(--gold-soft)}
.tile.offline{border-color:rgba(232,131,107,.45)}
.tile.offline img{filter:grayscale(.7) brightness(.5)}
/* placeholder when no poster exists yet — graded, never a gray box */
.tile .ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--tile-bg)}
.tile .ph span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.badge{position:absolute;top:9px;right:9px;font-size:10px;font-weight:600;font-family:var(--ui);padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);color:#fff;letter-spacing:.02em}
.badge.off{background:rgba(232,131,107,.85);color:#1a0d09}
.dur{position:absolute;bottom:9px;right:9px;font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.55);color:#fff}
/* play glyph stays out of the way — only on hover, and gone while scrubbing */
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.30);backdrop-filter:blur(8px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);opacity:0;transition:opacity .18s}
.play::after{content:"";border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.tile:hover .play{opacity:.92}
.tile.hero .play{width:54px;height:54px}
/* hover-scrub viewfinder — a YouTube-style scrubbable preview on sustained hover.
   The video stays invisible (the expanded thumbnail shows through) until it can actually
   play; it reveals the instant the proxy/original is ready, even mid-hover. No black box. */
/* the actual video plays on hover (motion) — proxy-served, seekable; shows once it can play */
.tile .scrubv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:transparent;opacity:0;transition:opacity .14s var(--settle)}
.tile.video-ready .scrubv,.tile.playing .scrubv{opacity:1}
/* instant frame-strip scrub: one wide image, cursor-x shifts background-position to the frame. It sits
   ABOVE the video and shows (a) before the video can play, and (b) the instant the cursor is moving
   (scrubbing-move) so seeking never looks laggy — then fades and lets the video play from that point. */
.tile .scrubstrip{position:absolute;inset:0;z-index:5;background-repeat:no-repeat;background-position:0 0;background-color:transparent;border-radius:inherit;opacity:0;transition:none}
.tile.scrubbing.live .scrubstrip{opacity:1}
/* The strip is the INSTANT underlay shown only until the real video has frames. Once the video can paint
   (video-ready), the VIDEO is the scrub surface — even while the cursor is moving — so you see the literal
   footage seek forward/back to your cursor, not a sliding storyboard. (Nelson's standard.) */
.tile.scrubbing.live.video-ready:not(.scrubbing-move) .scrubstrip{opacity:0;transition:opacity .14s var(--settle)}
/* Keep the thumbnail FRAME as the floor during scrub. The strip (z5) and video (z2) render ON TOP of it,
   so a clip that isn't proxied/stripped yet shows its frame — never a blank blue tile. (This was the blue.) */
.tile.scrubbing>img{opacity:1;transform:none}
.tile.scrubbing .play,.tile.scrubbing .dur{opacity:0}
/* YouTube-style scrub bar: a track at the bottom, a gold fill to the cursor position, a playhead dot,
   and a timecode chip. Appears the INSTANT you start scrubbing (not only once frames load). */
/* subtle, thin progress line — no playhead dot, no glow; just a quiet gold hairline */
.scrubline{position:absolute;left:0;right:0;bottom:0;height:16px;z-index:7;pointer-events:none;opacity:0;transition:opacity .15s}
.tile.scrubbing .scrubline{opacity:1}
.scrubline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.22)}
.scrubline i{position:absolute;left:0;bottom:0;height:4px;background:rgba(233,188,99,.95);z-index:2;transition:width .03s linear}
.scrubline .tc{position:absolute;right:6px;bottom:6px;font-family:var(--mono);font-size:9.5px;color:#fff;background:rgba(0,0,0,.5);padding:0 4px;border-radius:3px}
/* alive: indexing scan-line */
.tile.idx img,.tile.idx .ph{filter:saturate(.25) brightness(.5)}
.tile.idx::after{content:"";position:absolute;left:0;right:0;height:2px;top:0;background:var(--gold-glow);box-shadow:0 0 12px var(--gold-glow);animation:scan 1.9s var(--emphasis) infinite}
.tile.idx .ana{position:absolute;left:8px;bottom:8px;font-size:10px;color:var(--gold-glow);letter-spacing:.04em}
@keyframes scan{0%{transform:translateY(0);opacity:0}18%{opacity:1}100%{transform:translateY(220px);opacity:0}}

/* right inspector (denser glass) */
.inspector{width:288px;flex-shrink:0;background:var(--panel-2);border-left:1px solid var(--hair);padding:22px 20px;overflow-y:auto;transition:width .32s var(--settle),padding .32s var(--settle),opacity .24s}
[data-insp="off"] .inspector{width:0;padding-left:0;padding-right:0;border-left:0;opacity:0;overflow:hidden;pointer-events:none}
.inspector::-webkit-scrollbar{width:0}
.insp-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin-bottom:18px}
/* crown jewel — the quality ring, elevated + separated */
.crown{display:flex;flex-direction:column;align-items:center;padding-bottom:22px;margin-bottom:6px;border-bottom:1px solid var(--hair-2)}
.ring{width:128px;height:128px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:38px;color:var(--gold-glow)}
.ring-label{font-size:11.5px;color:var(--ink-3);margin-top:10px;text-align:center}
.ring-label b{color:var(--ink);font-weight:600;display:block;font-size:13px;margin-bottom:1px}
.sect{margin-top:20px}
.sect h4{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin-bottom:10px}
.dep svg{width:100%;height:62px}
.colorbar{height:9px;border-radius:5px;background:linear-gradient(90deg,#3a4a63,#9a8a5a,#E9BC63);position:relative;margin-top:4px}
.colorbar::after{content:"";position:absolute;right:16%;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.5)}
.colorlabels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:7px}
.cast{display:flex}
.cast .av{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1.5px solid var(--panel-2);margin-right:-8px;box-shadow:0 2px 8px rgba(0,0,0,.4);
  display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#3a3025,#1c1712);font-size:12px;font-weight:600;color:var(--gold)}
.cast .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cast .av i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal}
.cast.withcovers .av{cursor:pointer;position:relative;transition:transform .14s ease,box-shadow .14s ease}
.cast.withcovers .av:hover{transform:translateY(-2px) scale(1.07);box-shadow:0 4px 14px rgba(0,0,0,.5);z-index:3}
.cast.withcovers .av.unknown{border-style:dashed;border-color:var(--gold)}
.cast.withcovers .av.unknown i{color:var(--gold)}
.cast .more{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:11px;color:var(--ink-2);border:1.5px solid var(--panel-2)}
.castnote{font-size:11px;color:var(--ink-3);margin-top:10px}
/* inline "who is this?" name popup on an inspector avatar */
.namepop{width:230px;background:var(--panel,#1b1712);border:1px solid var(--panel-2,#2a241c);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);padding:14px;backdrop-filter:blur(20px)}
.namepop-h{font-size:13px;font-weight:600;color:var(--ink,#eee);margin-bottom:10px}
.namepop input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid var(--panel-2,#2a241c);
  border-radius:9px;padding:8px 10px;color:var(--ink,#eee);font-size:13px;margin-bottom:8px;outline:none}
.namepop input:focus{border-color:var(--gold,#c8a96a)}
.namepop-act{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
.namepop-act button{padding:6px 14px;font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:11.5px;font-weight:500;padding:5px 11px;border-radius:999px;border:1px solid var(--hair);color:var(--ink-2)}
.chip.protected{color:var(--sage);border-color:rgba(169,196,160,.4);background:var(--sage-soft)}
.chip.offline{color:var(--coral);border-color:rgba(232,131,107,.4);background:var(--coral-soft)}
.chip .d{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sage);margin-right:6px;vertical-align:middle}
.chip.offline .d{background:var(--coral)}
.repnote{margin-top:24px;font-size:10px;color:var(--ink-4);font-style:italic}
/* no-selection state = a calm library summary, never a phantom clip */
.summary{display:flex;flex-direction:column;gap:14px}
.summary .big{font-family:var(--disp);font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--ink);line-height:1}
.summary .row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--ink-3);padding:9px 0;border-bottom:1px solid var(--hair-2)}
.summary .row b{font-family:var(--mono);color:var(--ink);font-weight:500;font-size:13px}
.summary .lead{font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* entrance — fill:backwards (NOT both) so the animation doesn't lock transform after it plays,
   which would override the hover/magnify scale (the balloon "not working" bug). */
.title,.inspector>*{animation:rise .5s var(--reveal) backwards}
.title{animation-delay:.04s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* tiles appear solid (no opacity entrance that flashes the placeholder); the IMAGE fades in smoothly over
   a calm placeholder instead — kills the tan/white split-second flash on library open + view switches. */
.reveal{animation:goldreveal .42s var(--reveal) both}
@keyframes goldreveal{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* ============================================================
   LIGHT "Memory" mode — light GLASS, not a flat white page.
   The same translucent material, lit warm; Lumen more present.
   ============================================================ */
[data-mode="light"]{
  --ink:#241d14; --ink-2:#3f3829; --ink-3:#5c5344; --ink-4:#7c7160;
  --panel:rgba(245,240,231,0.40); --panel-2:rgba(238,231,219,0.52); --rail:rgba(242,236,226,0.34);
  --hair:rgba(60,48,30,0.16); --hair-2:rgba(60,48,30,0.09);
  --gold:#C8932E; --gold-glow:#E0A93C; --gold-soft:rgba(200,147,46,0.18); --gold-ink:#5a3c0a;
  --tile-bg:radial-gradient(120% 120% at 24% 18%,rgba(148,176,202,.24),transparent 58%),linear-gradient(160deg,#dfe7ee,#cfd9e2);
  /* PREMIUM light-mode buttons: crisp charcoal primary (no brown/gold mud) + frosted-glass ghost */
  --primary-bg:linear-gradient(180deg,#37373d,#1b1b1f);
  --primary-bg-hover:linear-gradient(180deg,#41414a,#212127);
  --primary-border:rgba(0,0,0,.16);
  --primary-border-hover:rgba(0,0,0,.22);
  --primary-ink:#fcfcfd;
  --primary-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(26,22,16,.16),0 1px 2px rgba(26,22,16,.12);
  --primary-shadow-hover:inset 0 1px 0 rgba(255,255,255,.16),0 12px 30px rgba(26,22,16,.22),0 2px 5px rgba(26,22,16,.14);
  --ghost-bg:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.56));
  --ghost-bg-hover:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.70));
  --ghost-border:rgba(40,33,22,.13);
  --ghost-ink:#26201a;
}
[data-mode="light"][data-buttons="antique"]{
  --primary-bg:linear-gradient(180deg,rgba(112,84,43,.82),rgba(78,60,35,.86));
  --primary-bg-hover:linear-gradient(180deg,rgba(132,99,52,.86),rgba(89,68,39,.90));
  --primary-border:rgba(126,88,31,.42);
  --primary-border-hover:rgba(150,103,35,.58);
  --primary-ink:#FFF1D5;
  --primary-shadow:inset 0 1px 0 rgba(255,244,214,.28),inset 0 -1px 0 rgba(0,0,0,.14),0 10px 22px rgba(80,55,20,.20);
  --primary-shadow-hover:inset 0 1px 0 rgba(255,244,214,.34),0 13px 28px rgba(80,55,20,.25),0 0 0 3px rgba(150,103,35,.10);
}
[data-mode="light"] body{background:#dfe8ef}
/* mostly warm, but let a whisper of the ocean's blue stay (super subtle) */
/* calmer light field — desaturate + no sepia + faded, so there's no strong diagonal colour bend behind the glass */
[data-mode="light"] .backdrop{filter:blur(54px) saturate(.28) brightness(1.12);opacity:.6}
[data-mode="light"] .grade{background:
  radial-gradient(1300px 820px at 78% -10%, rgba(224,169,60,.2), transparent 55%),
  radial-gradient(900px 600px at 12% 110%, rgba(150,178,205,.10), transparent 60%),
  linear-gradient(180deg, rgba(247,242,233,.4), rgba(233,224,209,.55))}
[data-mode="light"] .app{box-shadow:0 40px 120px rgba(40,30,15,.35),inset 0 1px 0 rgba(255,255,255,.5)}
[data-mode="light"] .title{color:#241d12;text-shadow:0 2px 30px rgba(255,255,255,.4)}
[data-mode="light"] .seg button.on{background:rgba(255,255,255,.55);color:#241d12}
[data-mode="light"] .searchwrap{background:rgba(255,255,255,.35)}
[data-mode="light"] .play{background:rgba(20,15,8,.28)}
[data-mode="light"] .ring .num{color:#9a6f1e}

/* utility + command buttons */
.hide{display:none!important}
.muted{color:var(--ink-3);font-size:12px;line-height:1.45}
.note{font-size:12px;color:var(--ink-3);line-height:1.5}
/* liquid glass buttons — translucent WITH depth (specular top-light, soft press), tactile,
   not flat and not arcade. Apple-glass per the reference reel. */
.goldbtn,.ghostbtn{font:650 12.5px/1 var(--ui);border:1px solid var(--ghost-border);border-radius:var(--r-action);padding:11px 15px;cursor:pointer;color:var(--ghost-ink);
  background:var(--ghost-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 1px rgba(0,0,0,.10),0 7px 18px rgba(0,0,0,.18);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  transition:transform .14s var(--settle),box-shadow .18s var(--settle),background .18s var(--settle),border-color .18s var(--settle),color .18s var(--settle)}
.goldbtn{background:var(--primary-bg);border-color:var(--primary-border);color:var(--primary-ink);font-weight:700;
  box-shadow:var(--primary-shadow)}
.goldbtn:hover{background:var(--primary-bg-hover);border-color:var(--primary-border-hover);transform:translateY(-1px);box-shadow:var(--primary-shadow-hover)}
.goldbtn:active{transform:translateY(0);box-shadow:inset 0 2px 8px rgba(0,0,0,.28)}
.ghostbtn:hover{background:var(--ghost-bg-hover);border-color:var(--hair);color:var(--ink);transform:translateY(-1px)}
.ghostbtn:active{transform:translateY(0);box-shadow:inset 0 2px 6px rgba(0,0,0,.16)}
.linkbtn{background:none;border:0;padding:0;margin-left:6px;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font:inherit}
.linkbtn:hover{color:var(--ink)}
/* light mode: active nav pill must read black on gold, not gold-on-gold */
[data-mode="light"] .ritem.active{background:rgba(200,147,46,.14);color:#241d0e;box-shadow:inset 0 0 0 1px rgba(200,147,46,.34)}
[data-mode="light"] .ritem.active .cnt{color:#5a3c0a}
[data-mode="light"] .ritem.active .spark{color:#8a5e16}
.wide{width:100%;margin-top:10px}.huge{min-height:54px;font-size:14px;border-radius:13px}
.tilecap{position:absolute;left:9px;bottom:9px;right:46px;font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* footage tiles read clean (poster + play + duration); labels live in the inspector */
.grid.mode-row .tilecap,.grid.mode-grid .tilecap{display:none}
.mono{font-family:var(--mono)}

/* hover-enlarge row: default desktop viewing mode */
.grid.mode-row{display:flex;flex-direction:column;gap:14px}
/* row mode: a calm horizontal band, the focused clip grows wider, neighbors give way */
/* Row mode = big cinematic filmstrip bands (3 up, tall) — deliberately dramatic vs the dense grid wall */
.herow{display:flex;gap:14px;align-items:stretch;height:clamp(230px,32vh,420px)}
.herow .ht{flex:1 1 0;min-width:0;height:100%;aspect-ratio:auto;transition:flex .34s var(--settle),opacity .22s}
.herow:hover .ht{flex:.7 1 0;opacity:.7}
.herow .ht:hover{flex:2.6 1 0;opacity:1}
/* grid mode "wall": the hovered tile BALLOONS (all sides, evenly) and lifts above the rest. The
   scale is pure CSS :hover so it ALWAYS fires (no JS/rAF dependency); JS only nudges neighbors aside. */
/* FLUID FISHEYE: the hovered tile's row + column TRACKS grow and the rest shrink to fit, so the grid
   makes room in every direction and never expands off the page (total size is fixed). Pure track resize
   transitioned = fluid, no scale, no overlap. */
/* LENS magnify: only the hovered tile scales (JS sets an inline transform); neighbors translate aside.
   A clean fixed 16:10 wall — JS no longer resizes tracks. Transition transform so it's fluid. */
/* smooth ease-in-out (morphs both directions evenly) — fluid tile-to-tile, not a snappy toggle */
.grid.mode-grid .tile{aspect-ratio:16/10;height:auto;width:auto;transition:transform .38s var(--settle),box-shadow .38s var(--settle),border-color .24s var(--settle);will-change:transform}
/* expanded tile: an ULTRA-THIN hairline ring (box-shadow ring doesn't thicken under scale) + a soft,
   restrained drop shadow — not heavy lining. */
.grid.mode-grid .tile:hover{box-shadow:0 0 0 .5px rgba(255,255,255,.1),0 7px 18px rgba(0,0,0,.22)}
.grid.mode-grid .tile.mag{box-shadow:0 0 0 .5px rgba(255,255,255,.11),0 9px 22px rgba(0,0,0,.26)}
#personGrid .tile{transition:transform .38s var(--settle),box-shadow .38s var(--settle),border-color .24s var(--settle)}
.grid.mode-grid .tile.deepmag,#personGrid .tile.deepmag,#propGrid .tile.deepmag,.people-clip-grid .tile.deepmag{box-shadow:0 0 0 1px rgba(233,188,99,.28),0 34px 90px rgba(0,0,0,.48),0 0 46px rgba(233,188,99,.18)}
#personGrid .tile.mag{box-shadow:0 0 0 .5px rgba(255,255,255,.18),0 10px 26px rgba(0,0,0,.30);z-index:20}
/* the hovered tile in the base rule also tries to translate/scale — let the JS inline transform win
   by neutralizing the base :hover transform inside magnify walls (JS inline overrides anyway). */
.grid.mode-grid .tile:hover,#personGrid .tile:hover{transform:none}
/* soft-land: content flows in and settles — never a loading screen, never a hard pulse */
@keyframes softland{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.people-grid .person-card,.folder-tree .folder-row2{animation:softland .36s var(--settle) backwards}
.mode-column{display:flex;flex-direction:column;gap:10px}
.column-card{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:center;padding:10px 14px;background:rgba(255,255,255,.045);border-radius:14px;border:1px solid var(--hair-2)}
.column-card .tile{width:230px;height:auto;aspect-ratio:16/10}
.column-copy{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
.column-copy h3{font-family:var(--disp);font-size:16px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.column-copy p{font-size:13px;color:var(--ink-3);line-height:1.45;max-width:58ch}

/* shared full-surface pages */
.surface{padding:4px 0 28px;min-height:100%}
.surface h2{font-family:var(--disp);font-weight:700;font-size:clamp(23px,2.6vw,32px);line-height:1.05;letter-spacing:-.02em;margin:6px 0 6px}
.surface p{color:var(--ink-3);line-height:1.5}
.prd-surface{display:flex;flex-direction:column;gap:14px}
.surface-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:2px 0 2px}
.surface-head h2{font-size:clamp(30px,3.3vw,46px);margin:0 0 4px}
.surface-head p{font-size:13.5px;max-width:60ch}
.surface-grid{display:grid;gap:14px;align-items:stretch}
.surface-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.surface-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.button-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:11px}
.button-row .goldbtn,.button-row .ghostbtn{margin-top:0}
.control-block{display:flex;flex-direction:column;gap:11px;min-width:0}
.control-block input{width:100%}
.control-block .pick{width:100%;flex:0 0 auto}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.look-triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.look-pane{min-height:clamp(180px,24vw,320px);border-radius:var(--r-card);border:1px solid var(--hair);background:rgba(255,255,255,.05);overflow:hidden;position:relative;box-shadow:0 18px 55px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);contain:layout paint style}
.look-pane>span{position:absolute;left:10px;top:10px;z-index:2;font:700 10.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);padding:6px 8px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid var(--hair-2);backdrop-filter:blur(10px)}
[data-mode="light"] .look-pane>span{background:rgba(255,255,255,.46);color:#5a3c0a}
.look-pane img{width:100%;height:100%;object-fit:cover;display:block;background:var(--tile-bg)}
.look-preview,.look-pane .emptyglass{height:100%;display:grid;place-items:center;text-align:center;color:var(--ink-3);font-size:13px;padding:18px;background:radial-gradient(120% 120% at 70% 18%,rgba(233,188,99,.10),transparent 58%),rgba(255,255,255,.035)}
.look-preview video{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
/* live graded preview: a canvas grades the selected frame instantly; the ffmpeg video overlays it on demand */
.look-graded{position:relative}
.look-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;background:var(--tile-bg)}
.look-preview-vid{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--ink-3);font-size:13px;border-radius:inherit}
.look-preview-vid video{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
/* before/after grading stage — orig underneath, graded canvas clipped to the right of a draggable handle */
.look-stage{display:flex;flex-direction:column;gap:8px}
.look-ba{position:relative;width:100%;aspect-ratio:16/9;max-height:46vh;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hair);background:var(--tile-bg);box-shadow:0 18px 55px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);user-select:none}
.look-ba-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.look-ba-graded{clip-path:inset(0 0 0 var(--split,50%))}
.look-ba-vid{position:absolute;inset:0}
.look-ba-vid video{width:100%;height:100%;object-fit:cover;display:block}
.look-ba-handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.25);transform:translateX(-1px);z-index:4;cursor:ew-resize}
.look-ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(0,0,0,.4);display:grid;place-items:center}
.look-ba-handle span::before,.look-ba-handle span::after{content:"";position:absolute;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}
.look-ba-handle span::before{left:7px;border-right:6px solid #1a1a1a}
.look-ba-handle span::after{right:7px;border-left:6px solid #1a1a1a}
.look-ba-tag{position:absolute;top:10px;z-index:3;font:700 10px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.45);padding:5px 8px;border-radius:999px;backdrop-filter:blur(8px);pointer-events:none}
.look-ba-l{left:10px}
.look-ba-r{right:10px}
/* Look Lab — color wheels + tone + dreamy + actions */
.look-lab{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;margin-top:14px}
.lab-h{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.lab-h h3,.lab-tone h3{margin:0;font:700 14px/1.2 var(--ui)}
.lab-sub{margin-top:14px!important;color:var(--ink-2)}
.lwheels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lwheel-wrap{display:flex;flex-direction:column;align-items:center;gap:7px}
.lwheel-wrap b{font:600 12px/1 var(--ui);color:var(--ink-2)}
.lwheel{position:relative;width:100%;aspect-ratio:1;border-radius:50%;cursor:crosshair;touch-action:none;
  background:conic-gradient(from 90deg,#e8736b,#e8c463,#c9e07a,#7ad6c0,#6aaef0,#b07ef0,#e8736b);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 31%);mask:radial-gradient(circle,transparent 30%,#000 31%);
  box-shadow:inset 0 0 0 1px var(--hair)}
.lwheel-ring{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 22px rgba(0,0,0,.45)}
.lwheel-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.55);transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none;transition:left .08s linear,top .08s linear}
.lluma{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}
.lluma input{width:100%}
.lluma span{font:600 9.5px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.lsliders{display:flex;flex-direction:column;gap:9px}
.lslider{display:grid;grid-template-columns:84px 1fr 42px;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.lslider input{width:100%}
.lslider .lval{font-style:normal;font:600 11.5px/1 var(--mono,var(--ui));color:var(--ink-3);text-align:right}
.look-actions{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.look-actions .button-row{flex-wrap:wrap}
.look-actions .lapply{max-width:340px}
@media (max-width:980px){.look-lab{grid-template-columns:minmax(0,1fr)}}
.people-tools{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(120px,.5fr);gap:10px;align-items:center}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:12px}
.person-card{min-height:168px;border:1px solid var(--hair);border-radius:var(--r-card);background:rgba(255,255,255,.055);color:var(--ink);padding:10px;display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:left;cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .16s var(--settle),border-color .16s var(--settle),background .16s var(--settle)}
.person-card:hover{transform:translateY(-2px);border-color:var(--hair);background:rgba(255,255,255,.075)}
.person-cover{position:relative;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:radial-gradient(120% 120% at 50% 25%,rgba(233,188,99,.16),var(--tile-bg) 70%)}
.person-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.person-cover .person-initial{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:38px;color:var(--gold-ink);font-style:normal}
.person-card b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-card i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.person-card.skel{pointer-events:none;opacity:.72}
.person-card.skel .person-cover,.person-card.skel b,.person-card.skel i{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:8px;color:transparent}
.person-card.skel b{display:block;width:68%;height:14px}
.person-card.skel i{display:block;width:42%;height:11px}
.person-card.skel .person-cover::after,.person-card.skel b::after,.person-card.skel i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);transform:translateX(-120%);animation:softshine 1.25s ease-in-out infinite}
@keyframes softshine{to{transform:translateX(120%)}}
.safe-pill{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:8px 11px;border-radius:999px;border:1px solid rgba(169,196,160,.32);background:var(--sage-soft);color:var(--sage);font:700 12px/1 var(--ui);white-space:nowrap}
[data-mode="light"] .safe-pill{color:#3f6844;border-color:rgba(74,108,66,.22)}
.reclaim-head h2{color:var(--ink)}
.reclaim-block{min-height:166px}
.reclaim-block b{display:block;margin-top:20px;font-family:var(--disp);font-size:42px;letter-spacing:-.03em;color:var(--gold-ink);line-height:1}
.reclaim-list{display:flex;flex-direction:column;gap:10px}
.reclaim-list>div:first-of-type{display:grid;gap:2px}
.reclaim-item{width:100%;border:0;background:none;cursor:pointer;text-align:left;color:var(--ink-3);border-radius:10px;padding:10px}
.reclaim-item:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.reclaim-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setting-row,.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2)}
.setting-row>span,.toggle-row span{font-weight:650}
.seg.mini button{padding:6px 11px}
.modelseg{width:100%;display:flex}
.modelseg button{flex:1}
.settings-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;font-size:12.5px;color:var(--ink-3);align-items:baseline}
.settings-kv b{font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:600;text-align:right;white-space:nowrap}
.license-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}
.license-row input{width:100%;text-transform:uppercase;font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.toggle-row input{appearance:none;width:42px;height:24px;border-radius:999px;border:1px solid var(--hair);background:rgba(0,0,0,.22);position:relative;cursor:pointer;flex-shrink:0}
.toggle-row input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--ink-3);transition:transform .16s var(--settle),background .16s var(--settle)}
.toggle-row input:checked{background:var(--gold-soft);border-color:rgba(233,188,99,.38)}
.toggle-row input:checked::after{transform:translateX(17px);background:var(--gold-glow)}
.tell-settings-list{display:grid;gap:8px}
.tell-setting{display:grid;grid-template-columns:auto minmax(0,1fr) 44px auto;gap:8px;align-items:center;padding:8px;border-radius:12px;border:1px solid var(--hair-2);background:rgba(255,255,255,.04)}
.tell-enable{display:flex;align-items:center;gap:6px}
.tell-enable input{appearance:none;width:28px;height:18px;border-radius:999px;border:1px solid var(--hair);background:rgba(0,0,0,.18);padding:0;position:relative;cursor:pointer}
.tell-enable input::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;left:2px;top:2px;background:var(--ink-4);transition:transform .16s var(--settle),background .16s var(--settle)}
.tell-enable input:checked{background:var(--gold-soft);border-color:rgba(233,188,99,.38)}
.tell-enable input:checked::after{transform:translateX(10px);background:var(--gold-glow)}
.tell-enable span{width:9px;height:9px;border-radius:50%;background:var(--tell);box-shadow:0 0 12px color-mix(in srgb,var(--tell) 38%,transparent)}
.tell-label{min-height:36px;padding:8px 10px}
.tell-color{width:42px;height:36px;padding:4px;border-radius:10px;cursor:pointer}
.tell-render{font:650 10px/1 var(--mono);text-transform:uppercase;color:var(--ink-4);border:1px solid var(--hair-2);border-radius:999px;padding:6px 7px}
.glassblock,.import-card,.ritual-card,.drive-card,.emptyglass,.fan-card{background:rgba(255,255,255,.055);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:0 18px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);contain:layout paint style}
.emptyglass{padding:22px;color:var(--ink-3);font-size:13px}
.state-card{grid-column:1/-1;align-self:start;padding:20px 22px;border-radius:16px;border:1px solid var(--hair);
  background:rgba(255,255,255,.055);box-shadow:0 18px 55px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--ink-3);max-width:680px}
.state-card .state-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:0 0 12px var(--sage-soft);margin-bottom:12px}
.state-card.loading .state-dot{background:var(--gold-glow);box-shadow:0 0 12px var(--gold-soft);animation:pulse 1.2s ease-in-out infinite}
.state-card.error .state-dot{background:var(--coral);box-shadow:0 0 12px var(--coral-soft)}
.state-card h3{font-family:var(--disp);font-size:22px;line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:0 0 6px}
.state-card p{font-size:13px;line-height:1.5;color:var(--ink-3);max-width:58ch;margin-bottom:12px}
.state-card.small{padding:12px;border-radius:12px;box-shadow:none}
.state-card.small .state-dot{margin-bottom:8px}
.state-card.small h3{font-size:15px}
.state-card.small p{font-size:11.5px;margin-bottom:0}
.state-inline{font-size:12px;color:var(--ink-3);border:1px solid var(--hair-2);border-radius:12px;padding:9px 11px;background:rgba(255,255,255,.045)}
.state-lite{display:flex;flex-direction:column;gap:5px;grid-column:1/-1}
.state-lite b{font-family:var(--disp);font-size:18px;color:var(--ink)}
.state-lite span{line-height:1.45}

/* Home */
.homebar .views{display:none}
.home-surface{display:flex;flex-direction:column;gap:14px}
.home-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start}
.home-copy{padding:22px;border-radius:var(--r-panel);background:rgba(255,255,255,.05);border:1px solid var(--hair);box-shadow:0 24px 70px rgba(0,0,0,.25)}
.home-copy h2{font-size:clamp(23px,2.5vw,33px);line-height:1.1;max-width:24ch}
.home-copy p{max-width:54ch;overflow-wrap:break-word}
.home-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.home-poster{position:relative;aspect-ratio:16/10;max-height:360px;border-radius:var(--r-panel);overflow:hidden}
.home-poster .tile{position:absolute!important;inset:0;height:100%;width:100%;aspect-ratio:auto;border-radius:inherit;overflow:hidden}
.home-poster .tile img{width:100%;height:100%;object-fit:cover}
.home-rows{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.home-row .rowhead{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 9px}
.home-row .rowhead h3{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em}
.home-row .rowhead span{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
/* Home rows: a natural horizontal scroll of aspect-ratio tiles (same 16:10 as the Library — no fixed
   height, no squeeze, never cut off by window size). Hover doesn't resize the tile (a scroller would
   clip it) — instead the VIDEO plays in place. Scroll sideways for more; "See all" opens the full set. */
.recent-row{display:flex;gap:12px;overflow-x:auto;overflow-y:visible;padding:26px 2px 28px;scroll-snap-type:x proximity;scroll-padding:2px}
.recent-row::-webkit-scrollbar{height:0}
/* aspect-ratio cards that gently lift+grow on hover (modest scale fits inside the row's vertical padding,
   so the horizontal scroller never clips them); the video plays in place on top. Smooth ease-in-out. */
.recent-row .tile{flex:0 0 auto;width:clamp(208px,23vw,300px);aspect-ratio:16/10;height:auto;cursor:pointer;scroll-snap-align:start;transform-origin:center;transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s cubic-bezier(.4,0,.2,1);will-change:transform}
.recent-row .tile:hover{transform:none;box-shadow:0 14px 34px rgba(0,0,0,.32);z-index:3}
/* Relink surface — focused single column */
.relink-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.relink-hero{padding:4px 2px 2px}
.relink-badge{display:inline-block;font:700 10px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold-soft);border:1px solid var(--hair);padding:5px 9px;border-radius:999px;margin-bottom:12px}
.relink-hero h2{font-family:var(--disp);font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;margin:0 0 8px}
.relink-hero p{margin:0;max-width:60ch;color:var(--ink-2)}
.relink-step,.relink-find-bar{padding:18px}
.relink-step-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.relink-step-h h3{margin:0 0 3px;font:700 15px/1.2 var(--ui)}
.relink-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-ink);font:700 13px/1 var(--ui);border:1px solid var(--hair)}
.relink-find-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);gap:10px 16px;align-items:center}
.relink-find-bar .rfb-label{display:flex;flex-direction:column;gap:2px}
.relink-find-bar .rfb-label b{font-size:13.5px}
.relink-find-bar .rfb-label span{font-size:12px;color:var(--ink-3)}
.relink-find-bar #relinkFindResults{grid-column:1/-1}
.relink-block{display:flex;flex-direction:column;gap:11px;min-width:0}
.relink-search input{width:100%}
.relink-results{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.relink-proj{border:1px solid var(--hair);border-radius:14px;padding:13px;background:rgba(255,255,255,.04);display:flex;flex-direction:column;gap:9px}
.relink-proj.done{opacity:.6}
.rp-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rp-head b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-head span{font-size:11.5px;color:var(--ink-3);flex:0 0 auto}
.rp-head span.rp-ok{color:var(--sage)}
.rp-list{display:flex;flex-direction:column;gap:4px;max-height:170px;overflow:auto}
.rp-clip{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.03)}
.rp-clip i{font-style:normal;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-clip.ok span{color:var(--sage);flex:0 0 auto}
.rp-clip.miss span{color:var(--ink-4);flex:0 0 auto}
.rp-clip .rp-path{color:var(--ink-4);font-family:var(--mono);font-size:10.5px;direction:rtl;text-align:left}
.rp-more{font-size:11px;color:var(--ink-4);padding:2px 8px}
.rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:2px 2px 9px}
.rowmore{background:none;border:0;padding:0;color:var(--ink-3);font:600 12.5px/1 var(--ui);cursor:pointer;transition:color .15s}
.rowmore:hover{color:var(--gold-ink)}
.home-poster .tile{height:100%;aspect-ratio:auto;border-radius:var(--r-panel)}
.home-poster .tile:hover{transform:none}
.protectblock{display:flex;align-items:center;gap:14px}
.protectblock .bigsage{font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:-.02em;color:var(--sage);line-height:1;flex-shrink:0}
.protectblock p{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.home-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.metric{padding:15px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid var(--hair-2)}
.metric b{display:block;font-family:var(--disp);font-size:28px;letter-spacing:-.02em;color:var(--ink)}
.metric span{display:block;margin-top:4px;font-size:12px;color:var(--ink-3)}
.home-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.drive-strip{display:flex;flex-direction:column;gap:8px}
.drive-strip span{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--hair-2);font-size:12.5px;color:var(--ink-2)}
.drive-strip i{width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:0 0 12px var(--sage-soft)}
.drive-strip .off i{background:var(--coral);box-shadow:0 0 12px var(--coral-soft)}
.drive-strip b{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:500}
.energy{width:100%;height:130px;margin-top:4px}
.energy text{fill:var(--ink-4);font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.mini-film{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.mini-film img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:1px solid var(--hair-2);background:var(--tile-bg)}

/* clip detail */
.clip-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:var(--ink-3);font-size:12px}
.clip-topline span{font-family:var(--mono);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip-hero{position:relative}
.hero-media{display:block;width:100%;height:clamp(340px,48vh,540px);object-fit:contain;border-radius:var(--r-panel);overflow:hidden;background:#0a0807;border:1px solid var(--hair);box-shadow:0 30px 90px rgba(0,0,0,.42);cursor:pointer}
.hero-media.morph-target{opacity:.08;transition:opacity .18s var(--settle)}
.morph-clone{position:fixed;z-index:100;object-fit:cover;pointer-events:none;box-shadow:0 30px 90px rgba(0,0,0,.46);border:1px solid var(--hair);transform-origin:top left;will-change:transform,border-radius}
/* custom clip player — clean glass control bar, no native chrome */
.clip-scrub{position:absolute;left:16px;right:16px;bottom:15px;height:36px;display:flex;align-items:center;gap:11px;padding:0 13px;border-radius:99px;background:rgba(10,8,6,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12)}
.playmini{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);position:relative;flex-shrink:0;cursor:pointer}
.playmini::after{content:"";position:absolute;left:9px;top:6px;border-left:8px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.playmini.playing::after{border:0;left:8px;top:6px;width:8px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff}
.track{height:5px;border-radius:99px;background:rgba(255,255,255,.22);flex:1;position:relative;cursor:pointer}
.track i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:99px;background:var(--gold-glow);box-shadow:0 0 12px var(--gold-soft)}
.clip-scrub .mono{font-size:11px;color:#fff;flex-shrink:0;letter-spacing:.02em}
.lutbtn{position:absolute;right:16px;top:16px}
.clip-facts{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.clip-facts span{padding:10px;border-radius:12px;border:1px solid var(--hair-2);background:rgba(255,255,255,.05);font-size:11.5px;color:var(--ink-3);min-width:0}
.clip-facts b{display:block;color:var(--ink);font-family:var(--disp);font-size:18px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip-facts .safe{display:grid;place-items:center;color:var(--sage);border-color:rgba(169,196,160,.34);background:var(--sage-soft);font-weight:700}
.clip-facts .ghostbtn{margin:0;min-height:40px}
.clip-facts .note{grid-column:span 2;display:flex;align-items:center}
.roles-row{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:2px}
.roles-chips,.roles-ranges{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
.role-chip{background:rgba(255,255,255,.04);cursor:pointer;transition:background .15s,border-color .15s,color .15s,opacity .15s}
.role-chip:hover{border-color:var(--gold-soft);background:var(--gold-soft)}
.role-chip.on{color:#1a1002;background:var(--gold);border-color:var(--gold);font-weight:700}
.role-chip.on:hover{background:var(--gold-glow);border-color:var(--gold-glow)}
.role-chip.confirming{background:var(--coral-soft);border-color:rgba(232,131,107,.4);color:var(--coral)}
.role-chip.range{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ghostbtn.small{padding:6px 11px;font-size:11px;min-height:0}
.tag-moment-picker{display:flex;flex-wrap:wrap;gap:6px;width:100%;padding-top:2px}
.tag-moment-picker .chip{cursor:pointer;background:rgba(255,255,255,.04)}
.tag-moment-picker .chip:hover{border-color:var(--gold-soft);background:var(--gold-soft)}
.clip-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.glassblock{padding:16px}
.glassblock h3{font-family:var(--disp);font-size:17px;letter-spacing:-.01em;margin-bottom:10px}
.minirow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair-2);font-size:12.5px;color:var(--ink-3)}
.minirow b{color:var(--ink);font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis}
.moment-list{display:grid;gap:8px;margin-top:12px}
.moment{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center;padding:9px;border-radius:11px;background:rgba(0,0,0,.14);border:1px solid var(--hair-2)}
.moment b{font-family:var(--mono);font-size:12px;color:var(--gold);font-weight:600}
.moment i{font-style:normal;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moment img{width:54px;height:34px;object-fit:cover;border-radius:8px;background:var(--tile-bg)}

/* sheet/modal */
.sheet{position:fixed;inset:0;z-index:8;background:rgba(5,4,3,.55);display:grid;place-items:center;padding:20px;backdrop-filter:blur(18px)}
.sheet-card{width:min(620px,100%);max-height:min(760px,88vh);overflow:auto;background:rgba(30,25,20,.82);border:1px solid var(--hair);border-radius:20px;padding:22px;box-shadow:0 40px 120px rgba(0,0,0,.55)}
.x{float:right;width:32px;height:32px;border-radius:50%;border:1px solid var(--hair);background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer}
select,input{font:500 13px var(--ui);color:var(--ink);background:rgba(0,0,0,.22);border:1px solid var(--hair-2);border-radius:10px;padding:10px 12px;outline:none;min-width:0}
select:focus,input:focus{border-color:rgba(233,188,99,.4);box-shadow:0 0 0 3px var(--gold-soft)}

/* Safety Ritual */
.safety-surface{display:grid;place-items:center;padding-top:8px}
.ritual-card{width:min(760px,100%);padding:24px;position:relative;overflow:hidden}
/* clean Move-safely surface (one flow: what -> where -> safe move) */
.safety-clean{max-width:700px}
/* two-column move: clip + folder picker on the left, a clean confirm panel on the right */
.safety-2col{max-width:none;width:min(940px,100%)}
.safety-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.safety-right{display:flex;flex-direction:column;gap:13px;padding:16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--hair-2)}
.safety-right .risk{margin:0}
.safety-right .goldbtn.huge{width:100%}
.safety-right .note{margin:0}
@media(max-width:900px){.safety-cols{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.library-project-shelf{grid-template-columns:minmax(0,1fr)}.lps-chips .viewchip{min-width:170px}}
.safety-head{margin-bottom:16px}
.safety-head h2{font-family:var(--disp);font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin:0 0 6px}
.safety-head .ritual-copy{margin:0;max-width:60ch}
.move-what{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:var(--r-card);background:rgba(255,255,255,.05);border:1px solid var(--hair);margin-bottom:16px}
.move-what .mw-thumb{width:88px;height:55px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--tile-bg);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-3)}
.move-what .mw-thumb img{width:100%;height:100%;object-fit:cover}
.move-what .mw-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.move-what .mw-meta b{font-weight:650;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.move-what .mw-meta span{font-size:12.5px;color:var(--ink-3)}
.move-dest{margin-bottom:14px}
.move-dest .md-label{font-size:11.5px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:8px}
.safety-clean .ritual-actions{margin-top:18px}
.ritual-card.sweep::after{content:"";position:absolute;inset:-30% -70%;background:linear-gradient(100deg,transparent,rgba(233,188,99,.18),transparent);animation:sweep .85s var(--reveal)}
@keyframes sweep{from{transform:translateX(-45%)}to{transform:translateX(45%)}}
.move-line{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--ink-2);padding:14px 0;border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);margin:18px 0}
.move-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.move-line b{color:var(--gold);font-family:var(--ui)}
.formrow{display:grid;grid-template-columns:1fr auto;gap:10px;margin:12px 0}
.risk{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;padding:7px 10px;border-radius:999px;border:1px solid var(--hair);font-size:12px;margin:4px 0 12px;white-space:normal;line-height:1.35}
.risk.sage{color:var(--sage);background:var(--sage-soft);border-color:rgba(169,196,160,.34)}
[data-mode="light"] .risk.sage{color:#3f6844;background:rgba(119,154,104,.17);border-color:rgba(74,108,66,.22)}
.ritual-body{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center;margin:12px 0 18px}
.bigdep svg{width:100%;height:110px}
.ritual-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ritual-copy{font-size:15px!important;color:var(--ink-2)!important;line-height:1.45;margin-bottom:18px}

/* Smart Views / Magic Folder wallet */
.wallet-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}
.objective-card{display:grid;gap:12px;margin:0 0 16px;padding:14px;border-radius:var(--r-card);border:1px solid var(--hair);background:rgba(255,255,255,.055);box-shadow:0 18px 55px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.objective-copy{display:flex;align-items:baseline;gap:10px;min-width:0}
.objective-copy b{font-family:var(--disp);font-size:18px;color:var(--ink)}
.objective-copy span{font-size:12.5px;color:var(--ink-3);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.objective-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}
.objective-form input{min-width:0;height:38px;border-radius:12px;border:1px solid var(--hair-2);background:rgba(0,0,0,.22);color:var(--ink);font:600 13px/1 var(--ui);padding:0 13px;outline:none}
.objective-form input:focus{border-color:rgba(233,188,99,.38);box-shadow:0 0 0 3px var(--gold-soft)}
.objective-result:empty{display:none}
.objective-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px}
.objective-head span{font:600 12.5px var(--ui);color:var(--ink-3)}
.objective-head b{color:var(--gold-glow)}
.objective-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px;padding-bottom:0}
.saved-views{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.viewchip{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:8px;text-align:left;min-width:min(240px,100%);padding:9px 10px;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.055);color:var(--ink);cursor:pointer}
.viewchip span{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewchip i{font-style:normal;font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewchip b{grid-row:1/3;grid-column:2;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--ink-4);font-size:16px;font-weight:500}
.viewchip b:hover{color:var(--coral);background:var(--coral-soft)}
.railsec .viewchip{display:flex;align-items:center;min-width:0;width:100%;margin-bottom:4px;padding:8px 9px}
.railsec .viewchip i,.railsec .viewchip b{display:none}
.library-project-shelf{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:12px;align-items:center;margin:0 0 14px;padding:10px 12px;border:1px solid var(--hair-2);border-radius:var(--r-card);background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.lps-copy{display:grid;gap:3px;min-width:0}
.lps-copy b{font:750 12.5px/1 var(--ui);color:var(--ink)}
.lps-copy span{font-size:11.5px;line-height:1.3;color:var(--ink-3)}
.lps-chips{display:flex;gap:8px;overflow-x:auto;padding:1px 0 2px}
.lps-chips::-webkit-scrollbar{height:0}
.lps-chips .viewchip{min-width:184px;margin:0;padding:8px 9px;background:rgba(255,255,255,.055)}
.fan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fan-card{padding:15px;min-height:230px;overflow:hidden}
.fan-card h3{font-family:var(--disp);font-size:18px;letter-spacing:-.015em;margin:12px 0 6px}
/* wallet fan — flips open to ONE side only (a hand of cards off one corner), never a
   symmetric both-sides spread (that reads convoluted). Cover stays, the rest fan right. */
.fan{height:118px;position:relative;margin:6px 0 14px}
/* calm card-deck: barely-fanned at rest (punchlist #20 "tone down"); the hover/peek spring
   still opens it. Big static rotations made every card read as spilled prints. */
.fan span{position:absolute;inset:6px 18px 6px 14px;border-radius:12px;background:var(--tile-bg);border:1px solid var(--hair);box-shadow:0 10px 26px rgba(0,0,0,.26);overflow:hidden;transform-origin:8% 92%;transition:transform .36s var(--spring)}
.fan span:nth-child(1){transform:none;z-index:6}
.fan span:nth-child(2){transform:rotate(.8deg) translateX(3px);z-index:5}
.fan span:nth-child(3){transform:rotate(1.6deg) translateX(6px);z-index:4}
.fan span:nth-child(4){transform:rotate(2.4deg) translateX(9px);z-index:3}
.fan span:nth-child(5){transform:rotate(3.2deg) translateX(12px);z-index:2}
/* subtler fan — a gentle hand of cards, not a dramatic spread */
.fan:hover span:nth-child(2){transform:rotate(3deg) translateX(10px)}
.fan:hover span:nth-child(3){transform:rotate(5deg) translateX(19px)}
.fan:hover span:nth-child(4){transform:rotate(7deg) translateX(28px)}
.fan:hover span:nth-child(5){transform:rotate(9deg) translateX(37px)}
.fan img{width:100%;height:100%;object-fit:cover}
.fan-card.clickable{cursor:pointer;transition:transform .2s var(--settle),box-shadow .2s var(--settle)}
.fan-card.clickable:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(0,0,0,.32)}
.prop-actions{display:flex;gap:8px;align-items:center}
.fan span b{display:none}
.makeview{width:auto;align-self:flex-start;margin-top:10px;padding:7px 12px;font-size:12px;border-radius:9px}
/* the Library wallet flow: corner ✦ on long hover -> floating fan -> make magic folder */
.tile .simbadge{position:absolute;top:7px;right:7px;z-index:7;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(20,15,8,.55);border:1px solid rgba(233,188,99,.55);color:var(--gold-glow);font-size:13px;backdrop-filter:blur(8px);
  opacity:0;transform:scale(.6);transition:opacity .2s,transform .22s var(--spring)}
.tile .simbadge:hover{background:rgba(233,188,99,.28)}
.tile.simready .simbadge{opacity:1;transform:scale(1)}
.wallet-pop{position:fixed;z-index:60;width:300px;padding:15px;border-radius:16px;
  background:var(--panel-2);backdrop-filter:blur(34px) saturate(1.3);-webkit-backdrop-filter:blur(34px) saturate(1.3);
  border:1px solid var(--hair);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);animation:goldreveal .3s var(--reveal) both}
.wallet-pop .wp-fan{height:92px;margin-bottom:12px}
.wallet-pop h4{font-family:var(--disp);font-weight:700;font-size:14px;margin-bottom:3px}
.wallet-pop p{font-size:11.5px;color:var(--ink-3);line-height:1.45;margin-bottom:12px}

/* Import, drives, folders */
/* available-only pickers (no free-text paths) */
.pick{display:flex;align-items:center;gap:9px;flex:1;min-width:0;background:rgba(0,0,0,.18);border:1px solid var(--hair);border-radius:var(--r-action);padding:9px 12px}
[data-mode="light"] .pick{background:rgba(255,255,255,.3)}
.pick>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-4);flex-shrink:0;font-weight:600}
.pick select{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font-family:var(--ui);font-size:13px;cursor:pointer;text-overflow:ellipsis}
.pick select option{background:#1a1512;color:var(--ink)}
[data-mode="light"] .pick select option{background:#efe9df;color:#241d14}
.volume-picker,.folder-picker{display:grid;gap:11px;margin:12px 0}
.vp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.vp-head h3{margin:0}
.vp-search{max-width:none;width:100%;padding:8px 10px;order:0}
.volume-list,.folder-list{display:grid;gap:7px;max-height:250px;overflow:auto;padding-right:2px;order:1}
.volume-picker>.note,.folder-picker>.note{order:2}
.volume-list::-webkit-scrollbar,.folder-list::-webkit-scrollbar{width:0}
.volume-row,.folder-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;border:1px solid var(--hair-2);background:rgba(255,255,255,.045);color:var(--ink);border-radius:12px;padding:10px 11px;cursor:pointer;transition:transform .16s var(--settle),border-color .16s var(--settle),background .16s var(--settle)}
.volume-row:hover,.folder-row:hover{transform:translateY(-1px);border-color:var(--hair);background:rgba(255,255,255,.075)}
.volume-row span,.folder-row span{min-width:0;display:grid;gap:2px}
.volume-row b,.folder-row b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.volume-row i,.folder-row i{font-style:normal;font:500 11px/1.35 var(--mono);color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.volume-row strong,.folder-row strong{font:650 11px/1 var(--mono);color:var(--sage);white-space:nowrap}
.folder-crumbs{display:flex;gap:6px;align-items:center;overflow-x:auto;padding-bottom:2px}
.folder-crumbs::-webkit-scrollbar{height:0}
.folder-crumbs button{border:1px solid var(--hair-2);background:rgba(255,255,255,.045);color:var(--ink-3);border-radius:999px;padding:6px 9px;font:650 11px/1 var(--ui);white-space:nowrap;cursor:pointer}
.folder-crumbs button:hover{color:var(--ink);border-color:var(--hair)}
.folder-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;order:2}
.folder-picker .state-card{max-width:none}
.drive-head{margin-bottom:10px}
.drive-surface .volume-picker,.drive-surface .folder-picker{margin-bottom:15px}
/* redesigned Import — one clean flow (source → destination → options → one action) */
.imp2{max-width:760px;margin:6px auto 30px;display:flex;flex-direction:column;gap:14px}
.imp2-block{background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:var(--r-card);
  box-shadow:0 18px 55px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(20px);padding:16px 18px}
.imp2-row{display:flex;align-items:center;gap:12px}
.imp2-lbl{font:600 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);min-width:38px}
.imp2-sel{flex:1;background:rgba(0,0,0,.18);border:1px solid var(--hair-2);border-radius:10px;padding:10px 12px;
  color:var(--ink);font:14px var(--ui);outline:none;cursor:pointer}
.imp2-sel:focus{border-color:var(--gold)}
.imp2-srcsum{font-size:13px;color:var(--ink-2);margin-top:12px}
.imp2-srcsum .muted{color:var(--ink-3)}
.imp2-eta{color:var(--sage)}
.imp2-reading{color:var(--ink-3)}
.imp2-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin-top:14px}
.imp2-preview:empty{display:none}
.imp2-tile{position:relative;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:var(--tile-bg);border:1px solid var(--hair)}
.imp2-tile img{width:100%;height:100%;object-fit:cover}
.imp2-tile.noimg img{display:none}
.imp2-tile.noimg::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(0,0,0,.15))}
.imp2-name{position:absolute;left:0;right:0;bottom:0;padding:8px 8px 6px;font-size:10.5px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp2-more{display:grid;place-items:center;font:600 15px var(--ui);color:var(--ink-2);background:rgba(255,255,255,.04)}
.imp2-browse:not([hidden]){margin-top:12px}
.imp2-opts{display:flex;gap:10px;flex-wrap:wrap;padding:0 2px}
.opt-toggle{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--hair);
  border-radius:999px;padding:8px 14px;font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none}
.opt-toggle input{accent-color:var(--gold);width:15px;height:15px;cursor:pointer}
.opt-toggle:has(input:checked){border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--ink)}
.imp2-go{display:flex;flex-direction:column;gap:12px;align-items:stretch;margin-top:2px}
.imp2-verify{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.imp2-verify .vg{font:600 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.imp2-verify .vbar{flex:1;min-width:60px;height:6px;border-radius:99px;background:rgba(0,0,0,.25);border:1px solid var(--hair-2);overflow:hidden}
.imp2-verify .vbar b{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--sage),var(--gold));transition:width .6s var(--settle)}
.imp2-verify #impCancel{flex:0 0 auto;padding:6px 12px;font-size:11px;min-height:0}
.imp2-progress-line{text-align:center;font-size:11px;color:var(--ink-3);min-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp2-status{text-align:center;min-height:18px}
.imp2-doneacts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.imp2-doneacts .ghostbtn{margin:0}
.import-card .volume-picker,.import-card .folder-picker{margin:10px 0 14px}
.import-card{padding:18px;margin-top:14px}
.import-head{display:grid;grid-template-columns:1fr minmax(160px,.35fr);gap:14px;align-items:end}
.import-head h2{font-size:clamp(28px,3.2vw,44px);margin:0}
.import-head p{font-size:14px;color:var(--ink-2);max-width:52ch}
.import-progress{height:10px;border-radius:99px;background:rgba(0,0,0,.22);border:1px solid var(--hair-2);overflow:hidden;margin:14px 0}
.import-progress i{display:block;width:68%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sage),var(--gold));box-shadow:0 0 20px rgba(169,196,160,.32)}
.verify-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0;flex-wrap:wrap}
.verify-row i{flex:1;min-width:48px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.08),var(--gold),rgba(255,255,255,.08))}
.verify-row b{color:var(--sage);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.cardglyph,.driveglyph{min-width:74px;height:44px;border-radius:12px;border:1px solid rgba(233,188,99,.42);background:rgba(233,188,99,.08);display:grid;place-items:center;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.incoming-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin:14px 0}
.incoming{position:relative;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:var(--tile-bg);border:1px solid var(--hair-2)}
.incoming img{width:100%;height:100%;object-fit:cover}
.incoming b{position:absolute;left:8px;bottom:8px;right:8px;font-size:10px;color:#fff;text-shadow:0 1px 8px #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.import-actions{display:flex;gap:10px;flex-wrap:wrap}
.drive-surface,.folder-surface{display:block}
.clearscope{color:var(--gold-ink);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* Drives — footage-forward glass cards with a footprint bar + a thumbnail strip */
.drive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.drivecard{padding:16px;border-radius:var(--r-card);background:rgba(255,255,255,.06);border:1px solid var(--hair);box-shadow:0 18px 50px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);contain:layout paint style;cursor:pointer;transition:transform .18s var(--settle),box-shadow .18s var(--settle),border-color .18s}
.drivecard:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(0,0,0,.30);border-color:var(--gold-soft)}
/* one Browse model: drive -> real folder tree */
.folder-browser{max-width:1120px}
.folder-enter{animation:folderIn .22s var(--settle) both}
@keyframes folderIn{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:none}}
.folder-crumbs2{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 16px;font-size:12.5px;min-height:40px}
.folder-crumbs2 .crumb{background:rgba(255,255,255,.04);border:1px solid var(--hair-2);color:var(--ink-2);cursor:pointer;font-weight:650;padding:7px 10px;border-radius:999px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-crumbs2 .crumb:last-child{color:var(--ink);border-color:var(--hair);background:rgba(255,255,255,.065)}
.folder-crumbs2 .crumb:hover{color:var(--ink);background:rgba(255,255,255,.09);border-color:var(--hair)}
.folder-crumbs2 .crumb-sep{color:var(--ink-4);opacity:.75}
.folder-crumbs2 .crumb-up{font-weight:750;color:var(--gold-ink);border-color:rgba(233,188,99,.20);background:var(--gold-soft)}
.folder-crumbs2 .crumb-open{margin-left:auto;padding:8px 13px;font-size:12.5px;min-height:34px}
/* editable person name + the photos/videos filter in a person's view */
.person-title{outline:none;border-radius:8px;padding:1px 7px;margin:-1px -7px;transition:background .15s;cursor:text}
.person-title:hover{background:rgba(255,255,255,.07)}
.person-title:focus{background:rgba(255,255,255,.10);box-shadow:0 0 0 2px var(--gold-soft)}
.pseg{display:inline-flex}
.folder-tree{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.folder-row2{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:10px;width:100%;min-height:60px;text-align:left;padding:10px 13px;border-radius:var(--r-action);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));border:1px solid var(--hair-2);color:var(--ink);cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055);transition:transform .16s var(--settle),background .16s,border-color .16s,box-shadow .16s}
.folder-row2:hover{transform:translateY(-2px);background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));border-color:rgba(233,188,99,.22);box-shadow:0 16px 36px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)}
.folder-row2 .fr-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--gold-soft);border:1px solid rgba(233,188,99,.20);color:var(--gold)}
.folder-row2 svg{color:currentColor;flex-shrink:0}
.folder-row2 .fr-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.folder-row2 .fr-name b{font-weight:700;font-size:13.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-row2 .fr-name i{font-style:normal;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-row2 .fr-go{color:var(--ink-4);font-size:18px;justify-self:end}
.drivecard.off{border-color:rgba(232,131,107,.34)}
.dc-head{display:flex;align-items:center;gap:11px}
.dc-dot{width:9px;height:9px;border-radius:50%;background:var(--sage);box-shadow:0 0 12px var(--sage-soft);flex-shrink:0}
.drivecard.off .dc-dot{background:var(--coral);box-shadow:0 0 12px var(--coral-soft)}
.dc-id{flex:1;min-width:0}
.dc-id b{font-family:var(--disp);font-weight:700;font-size:16px;display:block}
.dc-id span{font-size:11.5px;color:var(--ink-3)}
.drivecard.off .dc-id span{color:var(--coral)}
.dc-gb{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.dc-bar{height:6px;border-radius:99px;background:rgba(0,0,0,.18);overflow:hidden;margin:13px 0 12px}
.dc-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--gold-glow))}
.drivecard.off .dc-bar i{background:rgba(232,131,107,.6)}
.dc-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:12px}
.dc-thumb{aspect-ratio:16/10;border-radius:7px;overflow:hidden;background:var(--tile-bg)}
.dc-thumb img{width:100%;height:100%;object-fit:cover}
.drivecard.off .dc-thumb img{filter:grayscale(.7) brightness(.5)}
.dc-foot{margin-top:11px;font-size:11.5px;color:var(--ink-4)}
.dc-warn{color:var(--coral,#e8836b)}
/* new-drive auto-process prompt */
.pending-drives{margin:0 0 18px;background:color-mix(in srgb,var(--gold,#c8a96a) 8%,rgba(255,255,255,.04));
  border:1px solid color-mix(in srgb,var(--gold,#c8a96a) 32%,transparent);border-radius:var(--r-card);padding:14px 16px}
.pd-title{font:600 14px/1.2 var(--ui);color:var(--ink,#eee);margin:0 0 10px}
.pd-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--hair)}
.pd-row:first-of-type{border-top:0}
.pd-id{min-width:0}
.pd-id b{font-size:13.5px;color:var(--ink)}
.pd-id span{display:block;font:11px var(--mono,ui-monospace,monospace);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}
.pd-acts{display:flex;gap:7px;flex-shrink:0}
.pd-acts button{padding:6px 12px;font-size:12px}
/* dual-naming: smart/custom name big, real disk name small underneath */
.fr-real{display:block;font:11px var(--mono,ui-monospace,monospace);color:var(--ink-3);font-style:normal;text-decoration:none;margin-top:1px}
.dc-id{flex:1;min-width:0}
.dc-badges{display:flex;gap:6px;flex-shrink:0}
.dc-badge{font:600 10px/1 var(--ui);letter-spacing:.04em;padding:4px 8px;border-radius:999px;text-transform:uppercase}
.dc-badge.ok{color:var(--sage,#7ab478);background:color-mix(in srgb,var(--sage,#7ab478) 16%,transparent)}
.dc-badge.warn{color:var(--coral,#e8836b);background:color-mix(in srgb,var(--coral,#e8836b) 16%,transparent)}
.drivecard.swapped{border-color:rgba(232,131,107,.34)}
.dc-cap,.dc-scan{margin:12px 0 0}
.dc-caplabel,.dc-scanlabel{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-bottom:5px}
.dc-capbar,.dc-scanbar{height:6px;border-radius:99px;background:rgba(0,0,0,.2);overflow:hidden}
.dc-capbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ink-3),var(--ink-2))}
.dc-scanbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sage,#7ab478),var(--gold,#c8a96a));transition:width .5s var(--settle)}
/* Folders — a poster per folder, click to browse into it */
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.foldercard{border-radius:14px;overflow:hidden;border:1px solid var(--hair);background:rgba(255,255,255,.05);cursor:pointer;transition:transform .2s var(--settle),box-shadow .2s}
.foldercard:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.32);border-color:var(--hair2,rgba(255,247,235,.18))}
.fc-poster{aspect-ratio:16/10;background:radial-gradient(120% 120% at 70% 20%,rgba(233,188,99,.10),transparent 60%),var(--tile-bg)}
.fc-poster img{width:100%;height:100%;object-fit:cover;display:block}
.fc-meta{padding:10px 12px}
.fc-meta b{font-size:13.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-meta span{font-size:11.5px;color:var(--ink-3)}

/* Mobile + tablet: same glass shell, touch-first. */
@media (max-width: 980px){
  body{overflow:hidden}
  .app{inset:10px;border-radius:18px}
  .runtime-banner{min-height:40px;padding:8px 12px;font-size:12px;text-align:center}
  .body{flex-direction:column}
  .rail{width:100%;height:58px;order:2;flex-direction:row;align-items:center;gap:4px;padding:7px 8px;border-right:0;border-top:1px solid var(--hair);overflow-x:auto;overflow-y:hidden}
  .rail::-webkit-scrollbar{display:none}
  .rail .eyebrow,.railsec,.newbtn,.rail>div[style]{display:none!important}
  .ritem{height:42px;min-width:74px;justify-content:center;gap:6px;margin:0;padding:7px 10px;border-radius:12px;font-size:12px;white-space:nowrap}
  .ritem svg{width:15px;height:15px}
  .ritem .cnt,.ritem .spark{display:none}
  .content{order:1;padding:14px 14px 0}
  .inspector{display:none}
  .setup-card{grid-template-columns:minmax(0,1fr);gap:12px}
  .setup-foot{align-items:stretch;display:grid;grid-template-columns:1fr}
  .topbar{gap:8px;flex-wrap:wrap}
  .searchwrap{max-width:none;flex:1 1 100%;order:1;padding:8px 10px}
  .seg{order:2;max-width:100%;overflow-x:auto}
  .seg button{padding:6px 12px}
  .views{order:3;margin-left:0}
  .title{font-size:38px;margin-top:12px}
  .sub{margin-bottom:14px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid.mode-row{gap:10px}
  .herow{min-height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .herow .ht{height:auto;aspect-ratio:16/10;flex:auto;opacity:1}
  .herow:hover .ht,.herow .ht:hover{flex:auto;opacity:1}
  .tile:hover{transform:none}
  .tile.touchmag{box-shadow:0 22px 54px rgba(0,0,0,.42);border-color:var(--hair)}
  .column-card{grid-template-columns:minmax(0,1fr);gap:10px}
  .column-card .tile{aspect-ratio:16/10}
  .clip-lanes,.ritual-body{grid-template-columns:minmax(0,1fr)}
  .hero-media{height:300px}
  .clip-facts{display:grid}
  .import-head{grid-template-columns:minmax(0,1fr)}
  .home-hero,.home-panels{grid-template-columns:minmax(0,1fr)}
  .home-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-poster{min-height:240px}
  .fan-grid{grid-template-columns:minmax(0,1fr)}
  .wallet-head{align-items:start;flex-direction:column}
  .drive-surface,.folder-surface{grid-template-columns:minmax(0,1fr)}
  .surface-head{align-items:flex-start;flex-direction:column}
  .surface-grid.two,.surface-grid.three{grid-template-columns:minmax(0,1fr)}
  .look-triptych{grid-template-columns:minmax(0,1fr)}
  .look-pane{min-height:220px}
  .people-tools{grid-template-columns:minmax(0,1fr)}
  .people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .river-stage{grid-template-columns:minmax(0,1fr)}
  .shoot-read{position:relative;top:auto;order:-1}
  .year-rail{display:none!important}
}

@media (max-width: 560px){
  .app{inset:0;border-radius:0;border-left:0;border-right:0}
  .titlebar{height:42px;padding:0 10px}
  .wordmark{left:12px;transform:none}
  .modebtn span{display:none}
  .content{padding:12px 10px 0}
  .title{font-size:34px;letter-spacing:-.025em}
  .sub{font-size:12px}
  .grid,.herow,.incoming-grid{grid-template-columns:minmax(0,1fr)}
  .herow{gap:11px}
  .tile{border-radius:12px}
  .rail{height:62px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .ritem{min-width:68px;font-size:11.5px;flex-direction:column;height:48px;gap:3px}
  .hero-media{height:238px;border-radius:15px}
  .clip-topline{align-items:flex-start;flex-direction:column}
  .clip-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clip-lanes{gap:10px}
  .glassblock,.import-card,.ritual-card,.sheet-card{border-radius:15px;padding:15px}
  .setup-card{border-radius:15px;padding:14px}
  .setup-card h3{font-size:20px}
  .license-row{grid-template-columns:1fr}
  .formrow{grid-template-columns:1fr}
  .volume-row,.folder-row{grid-template-columns:1fr}
  .volume-row strong,.folder-row strong{justify-self:start}
  .tell-setting{grid-template-columns:auto minmax(0,1fr) 42px}
  .tell-render{display:none}
  .tell-pop{right:auto;left:0}
  .verify-row{display:grid;grid-template-columns:74px minmax(20px,1fr) 84px minmax(20px,1fr) 74px;gap:8px}
  .verify-row i{min-width:0}
  .verify-row b{font-size:10.5px;text-align:center}
  .ritual-actions,.import-actions{display:grid;grid-template-columns:1fr;width:100%}
  .move-line{align-items:flex-start;flex-direction:column}
  .surface h2{font-size:32px}
  .surface-head h2{font-size:34px}
  .people-grid{grid-template-columns:1fr}
  .person-card{min-height:148px}
  .button-row{display:grid;grid-template-columns:1fr;width:100%}
  .button-row .goldbtn,.button-row .ghostbtn{width:100%}
  .home-metrics{grid-template-columns:1fr}
  .metric b{font-size:25px}
  .home-copy{padding:16px}
  .sheet{padding:10px}
  .sheet-card{max-height:90vh}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .herow:hover .ht,.herow .ht:hover{flex:1 1 0;opacity:1}
}

/* ===== SHOOT RIVER — folders as shoots on a time spine (renderFolders) ===== */
.river-head{align-items:center}
.lens-switch{display:flex;gap:3px;background:rgba(0,0,0,.22);border:1px solid var(--hair-2);border-radius:999px;padding:3px;flex-shrink:0}
.lens-switch .lens{font:600 12px var(--ui);color:var(--ink-3);background:none;border:none;padding:6px 14px;border-radius:999px;cursor:pointer;transition:color .15s,background .15s}
.lens-switch .lens:hover{color:var(--ink)}
.lens-switch .lens.on{color:var(--gold-glow);background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(233,188,99,.22)}

.river-body{margin-top:16px;position:relative}
.river-year{position:relative;padding-left:22px;margin:0 0 26px}
.river-year::before{content:"";position:absolute;left:5px;top:7px;bottom:-18px;width:2px;
  background:linear-gradient(180deg,var(--gold-soft),var(--hair-2) 60%,transparent)}
.river-year:last-child::before{bottom:40%}
.river-spine{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;position:relative}
.river-spine::before{content:"";position:absolute;left:-23px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft),0 0 16px var(--gold-soft)}
.ry-label{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--ink)}
.ry-meta{font:500 12px var(--ui);color:var(--ink-4)}

.river-flow{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;align-items:stretch}
.shoot-card{position:relative;cursor:pointer;border-radius:var(--r-card);padding:15px;min-height:232px;overflow:hidden;
  background:rgba(255,255,255,.055);border:1px solid var(--hair);
  box-shadow:0 18px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:transform .20s var(--settle),box-shadow .20s var(--settle),border-color .2s;contain:layout paint style;min-width:0}
.shoot-card:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(0,0,0,.32);border-color:rgba(255,247,235,.16)}
.shoot-card.selected{border-color:rgba(233,188,99,.42);box-shadow:0 20px 58px rgba(0,0,0,.30),0 0 0 1px var(--gold-soft),inset 0 1px 0 rgba(255,255,255,.07)}
.shoot-card.selm{outline:2px solid var(--gold);outline-offset:-2px}
.shoot-card.tier-hero,.shoot-card.tier-lg,.shoot-card.tier-md,.shoot-card.tier-sm{grid-column:span 1}

.shoot-fan{height:118px;margin:6px 0 14px}
.shoot-card.tier-hero .shoot-fan,.shoot-card.tier-sm .shoot-fan{height:118px}
.shoot-fan .fan-blank{position:absolute;inset:6px 14px;display:grid;place-items:center;border-radius:12px;
  background:var(--tile-bg);border:1px dashed var(--hair);box-shadow:none;transform:none}
.shoot-fan .fan-blank svg{width:36px;height:36px;fill:none;stroke:var(--ink-4);stroke-width:1.4;opacity:.55}
.shoot-fan .unlinked-glow{opacity:0;inset:8% 6% -6%;background:var(--coral)}
.shoot-card.has-offline .unlinked-glow{opacity:.16;filter:blur(22px)}
.shoot-card.all-offline .unlinked-glow{opacity:.28}
.shoot-card.has-offline:hover .unlinked-glow{opacity:.34;filter:blur(28px)}

.shoot-body h3.smart{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.16;letter-spacing:0;margin:0 0 6px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shoot-card.tier-hero h3.smart{font-size:18px}
.diskname{display:flex;align-items:center;gap:6px;font:500 11.5px var(--mono);color:var(--ink-4);margin-bottom:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.diskname svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}
.shoot-stats{display:flex;align-items:center;gap:6px;font:500 12px var(--ui);color:var(--ink-3);flex-wrap:wrap}
.shoot-stats b{color:var(--ink);font-weight:700}
.ss-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ss-ppl{color:var(--gold-ink)}
.off-chip{margin-left:auto;font:600 10.5px var(--ui);color:var(--coral);background:var(--coral-soft);
  border:1px solid rgba(232,131,107,.3);border-radius:999px;padding:2px 8px}

/* ===== SHOOT RIVER v2 — drill-down, fan-peek, connections, calm offline, Tree toggle ===== */
.river-head{align-items:flex-start}
.river-headl{min-width:0}
.river-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.river-filter{font:500 12.5px var(--ui);color:var(--ink);background:rgba(0,0,0,.22);border:1px solid var(--hair-2);
  border-radius:999px;padding:7px 14px;width:150px;outline:none;transition:width .2s var(--settle),border-color .15s}
.river-filter:focus{width:200px;border-color:var(--hair)}
.river-filter::placeholder{color:var(--ink-4)}
.mode-switch{display:flex;gap:2px;background:rgba(0,0,0,.22);border:1px solid var(--hair-2);border-radius:999px;padding:3px}
.mode-switch button{font:600 12px var(--ui);color:var(--ink-3);background:none;border:none;padding:6px 13px;border-radius:999px;cursor:pointer;transition:color .15s,background .15s}
.mode-switch button:hover{color:var(--ink)}
.mode-switch button.on{color:var(--ink);background:var(--hair);box-shadow:inset 0 0 0 1px var(--hair-2)}
/* in Tree mode the river-only controls are irrelevant */
[data-fmode="tree"] .lens-switch,[data-fmode="tree"] .river-filter,[data-fmode="tree"] .year-rail{display:none!important}

.river-crumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;font:500 12.5px var(--ui)}
.river-crumb:empty{display:none}
.river-crumb button{background:none;border:none;color:var(--ink-3);cursor:pointer;font:inherit;padding:2px 4px;border-radius:6px;transition:color .14s,background .14s}
.river-crumb button:hover{color:var(--gold-glow);background:var(--gold-soft)}
.river-crumb .crumb-sep{color:var(--ink-4)}
.river-crumb .crumb-here{color:var(--ink);font-weight:600}

.river-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 285px auto;gap:14px;align-items:flex-start}
.river-stage .river-body{min-width:0}
.shoot-read{position:sticky;top:8px;display:grid;gap:10px;padding:14px;border-radius:var(--r-card);border:1px solid var(--hair);background:rgba(255,255,255,.055);box-shadow:0 18px 55px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.shoot-read-empty{display:grid;gap:7px;color:var(--ink-3);font-size:12.5px;line-height:1.45}
.shoot-read-empty b{font-size:14px;color:var(--ink)}
.sr-eyebrow{font:750 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.shoot-read h3{font-family:var(--disp);font-size:22px;line-height:1.08;letter-spacing:0;margin:0;color:var(--ink)}
.shoot-read h3 i{font-style:normal;color:var(--gold)}
.sr-path{font:600 11px/1.35 var(--mono);color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-stats{font-size:12.5px;color:var(--ink-2);line-height:1.35}.sr-stats b{color:var(--ink)}
.sr-tags{display:flex;flex-wrap:wrap;gap:6px}
.sr-tags span{font:650 11px/1 var(--ui);padding:6px 8px;border-radius:999px;border:1px solid var(--hair-2);background:rgba(255,255,255,.045);color:var(--ink-2)}
.sr-actions{display:grid;gap:8px;margin-top:2px}.sr-actions .goldbtn,.sr-actions .ghostbtn{width:100%;min-height:36px}
.sr-note{font-size:11.5px!important;color:var(--ink-4)!important;line-height:1.4!important}
.year-rail{position:sticky;top:8px;display:flex;flex-direction:column;gap:3px;padding:6px 4px;align-self:flex-start;flex-shrink:0}
.year-rail button{font:600 11px var(--mono);color:var(--ink-4);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:7px;transition:color .14s,background .14s}
.year-rail button:hover{color:var(--gold-glow);background:var(--gold-soft)}

/* CALM offline — no word "offline"; a soft red light blooms up from behind the card + the dot carries it.
   Guardian/relief: a quiet signal, never an alarm board. */
.shoot-fan .unlinked-glow{opacity:0;inset:auto -3% -10% -3%;height:55%;border-radius:50%;
  background:radial-gradient(120% 100% at 50% 100%, rgba(232,99,99,.85), rgba(232,99,99,0) 70%);filter:blur(20px)}
.shoot-card.has-offline .unlinked-glow{opacity:.14}
.shoot-card.all-offline .unlinked-glow{opacity:.26}
.shoot-card.has-offline:hover .unlinked-glow{opacity:.3}

/* FAN-PEEK (site-wide on every .fan) — hover/focus a frame and it RISES to the front; transient, never
   sticky (commitment is a click). Reuses the smoothness-as-power physics. */
/* PEEK WITHOUT GEOMETRY CHANGE — the hovered frame comes to the FRONT (z-index) and brightens; it does
   NOT move, so the cursor never falls off it (the old translateY caused a hover/leave flicker loop). */
.fan span{cursor:pointer}
.fan span:hover{z-index:12!important;filter:brightness(1.06);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.fan span:focus-visible{z-index:12!important;outline:none;box-shadow:0 0 0 2px var(--gold-glow),0 16px 38px rgba(0,0,0,.5)}

/* card chrome additions */
.shoot-card.drillable .smart::after{content:"";}
.shoot-body h3.smart .gem{color:var(--gold-glow);font-style:normal;margin-right:5px;font-size:.82em;vertical-align:1px}
.shoot-body h3.smart .bts-tag{font:700 9px var(--ui);letter-spacing:.08em;color:var(--ink-4);border:1px solid var(--hair);
  border-radius:5px;padding:1px 5px;margin-left:8px;vertical-align:2px}
.diskname .drill-hint{margin-left:auto;color:var(--ink-4);font:600 10.5px var(--ui);opacity:0;transition:opacity .16s}
.shoot-card.drillable:hover .drill-hint,.shoot-card.drillable:focus-visible .drill-hint{opacity:1;color:var(--gold-ink)}
.shoot-card:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 30px 66px rgba(0,0,0,.36),0 0 0 2px var(--gold-soft)}

/* CONNECTION RAIL — typed links the user confirms/rejects so the archive gets smarter */
.link-rail{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.link-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;font:600 11px var(--ui);color:var(--ink-2);
  background:rgba(255,255,255,.05);border:1px solid var(--hair-2);border-radius:999px;padding:3px 4px 3px 9px;cursor:pointer;
  transition:border-color .15s,background .15s}
.link-chip:hover{border-color:var(--gold-soft);background:var(--gold-soft)}
.link-chip.confirmed{border-color:rgba(169,196,160,.4);background:var(--sage-soft)}
.link-chip .lc-icon{font-style:normal;font-size:11px;opacity:.85}
.link-chip .lc-text{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.link-chip .lc-act{font-style:normal;width:17px;height:17px;display:none;place-items:center;border-radius:50%;font-size:10px;flex-shrink:0}
.link-chip:hover .lc-act{display:grid}
.link-chip .lc-yes{color:var(--sage)}.link-chip .lc-yes:hover{background:var(--sage-soft)}
.link-chip .lc-no{color:var(--coral)}.link-chip .lc-no:hover{background:var(--coral-soft)}
.link-chip.confirmed .lc-yes{display:grid;color:var(--sage);background:var(--sage-soft)}

/* clip "opening" hero — shows the frame (thumbnail) instantly instead of a black video while it loads */
.clip-hero-opening{position:relative;width:100%;aspect-ratio:16/9;max-height:62vh;border-radius:var(--r-card);
  border:1px solid var(--hair);box-shadow:0 18px 55px rgba(0,0,0,.3);overflow:hidden;display:flex;align-items:flex-end}
.clip-hero-opening .clip-open-note{margin:14px;font:600 12px var(--ui);color:var(--ink-2);background:rgba(12,10,8,.6);
  border:1px solid var(--hair-2);border-radius:999px;padding:6px 13px;backdrop-filter:blur(10px)}

@media (max-width:980px){
  .river-stage{grid-template-columns:minmax(0,1fr)}
  .shoot-read{position:relative;top:auto;order:-1}
  .year-rail{display:none!important}
}

/* ===== MAKE — brief → proposed cut → keep → handoff (existing tokens only) ===== */
.make-proposal h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.make-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:12px 0 14px}
.make-slot{position:relative;display:flex;flex-direction:column;gap:6px}
.make-slot .make-ord{position:absolute;top:6px;left:6px;z-index:3;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font:700 11px var(--ui);color:var(--gold-ink);background:var(--gold-soft);border:1px solid rgba(233,188,99,.30)}
.make-slot .make-beat{font:500 11.5px var(--ui);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.make-slot[data-stretch]{opacity:.82}
.make-slot[data-stretch] .make-beat{color:var(--coral)}
.make-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.make-actions .muted{font-size:12px}

/* [hidden] must always win — buttons set display and were defeating the attribute */
[hidden]{display:none!important}

/* MAKE style block (M3 FLAGSHIP — exemplar-based, honest) */
.make-style-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.make-style-row .muted{font-size:12px}
.make-exemplars{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.make-exemplars .make-exemplar{font-size:12px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.make-slot .make-sugg{position:absolute;top:6px;right:6px;z-index:3;font:650 10.5px var(--ui);color:var(--gold-ink);background:var(--gold-soft);border:1px solid rgba(233,188,99,.30);border-radius:999px;padding:2px 7px}

/* search acknowledgment: one-frame dim while the debounce+fetch resolves */
#grid.searching{opacity:.72;transition:opacity .12s var(--settle)}

/* clip lanes are live now — cursor + hover say so */
.moment-live{cursor:pointer;transition:background .14s var(--settle)}
.moment-live:hover{background:var(--gold-soft)}
.moment-live:focus-visible{outline:none;box-shadow:0 0 0 2px var(--gold-soft)}

/* MAKE ghosts + skeletons: honest gaps in cut order */
.make-slot.make-ghost{min-height:120px;border:1px dashed var(--hair);border-radius:var(--r-action);display:flex;align-items:flex-end;padding:10px;background:rgba(0,0,0,.06)}
.make-slot.make-skel{animation:softland .4s var(--settle) backwards}
.make-slot.make-ghost .make-beat{color:var(--ink-3);white-space:normal}
/* look preview stage */
.look-stage video{width:100%;border-radius:var(--r-card);margin-top:10px;border:1px solid var(--hair)}
/* player mute toggle matches the playmini language */
.mutemini{background:none;border:0;cursor:pointer;font-size:13px;opacity:.8}
.mutemini:hover{opacity:1}

/* armed delete reads coral, unmissable */
.viewchip b.arm{color:var(--coral);font-weight:700}

/* ===== MOBILE polish for everything added in the excellence cycle (phone demo path) ===== */
@media (max-width: 980px){
  .make-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .make-style-row{align-items:stretch}
  .make-style-row .sortpick{max-width:100%}
  .prop-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .pd-row{flex-direction:column;align-items:stretch}
  .pd-acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .pd-acts .goldbtn,.pd-acts .ghostbtn{width:100%}
  .folder-crumbs2 .crumb{max-width:140px}
  .drivecard{width:100%}
}
@media (max-width: 560px){
  .make-grid{grid-template-columns:minmax(0,1fr)}
  .make-actions{display:grid;grid-template-columns:1fr;width:100%}
  .make-actions .goldbtn,.make-actions .ghostbtn{width:100%}
  .make-exemplars .make-exemplar{max-width:100%}
  .objective-form{grid-template-columns:1fr}
  .objective-form .goldbtn{width:100%}
  .make-style-row{flex-direction:column}
  .look-stage video{max-height:52vh;object-fit:contain}
  .clip-scrub{flex-wrap:wrap}
  .folder-tree{grid-template-columns:minmax(0,1fr)}
  .pending-drives{padding:12px}
}

/* phone hardening: nothing may EVER widen the page past the viewport (inner rails keep
   their own overflow-x:auto); hero type scales with the screen instead of clipping */
@media (max-width: 980px){
  .content{overflow-x:clip}
  .home-copy h2{font-size:clamp(21px,5.8vw,33px);overflow-wrap:anywhere}
  .home-copy p{overflow-wrap:anywhere}
  .topbar .sortpick{order:2}
  .topbar .tagbtn,.topbar>span{order:2}
  .surface-head h2{overflow-wrap:anywhere}
}

/* ============================================================================
   MOBILE DENSITY SYSTEM — THE one place for phone density (2026-07-03).
   Desktop shrunk down is not a phone product. This block defines the phone
   language once and every surface reuses it. It sits LAST in the file so it
   wins the cascade over the older ad-hoc phone rules above.
   Tokens: --m-pad card padding (12-14) · --m-gap the ONE section gap ·
   --m-tap thumb target (>=44px). Type scale: page title 27 · surface h2 24 ·
   card h3 15-18 · body 12-12.5 · caps 10.
   ========================================================================= */
@media (max-width: 980px){
  :root{--m-pad:13px;--m-gap:12px;--m-tap:44px}
}

@media (max-width: 560px){
  /* ---- PHONE TYPE SCALE (title <=28, tighter rhythm) ---- */
  .title{font-size:27px;letter-spacing:-.02em;margin:6px 0 2px}
  .sub{font-size:12px;margin-bottom:10px;line-height:1.4}
  .surface h2{font-size:24px}
  .surface-head h2{font-size:27px}
  .surface-head p{font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .setup-card h3{font-size:18px}
  .home-row .rowhead h3,.rowhead h3{font-size:14px}
  .ry-label{font-size:18px}
  .shoot-read h3{font-size:18px}
  .metric b{font-size:22px}
  .eyebrow{font-size:10px;padding:0 0 6px}

  /* ---- RHYTHM: one section gap, no dead vertical air ---- */
  .content{padding:10px 12px 0}
  .home-rows{gap:var(--m-gap);margin-top:2px}
  .home-hero{gap:var(--m-gap)}
  .home-row .rowhead{margin:0 2px 6px}
  .recent-row{padding:8px 2px 10px;gap:9px}
  .topbar{gap:8px;margin-bottom:0}
  .river-body{margin-top:10px}
  .river-year{padding-left:16px;margin:0 0 16px}
  .river-spine{margin:0 0 10px}
  .river-spine::before{left:-17px;width:10px;height:10px}
  .clip-lanes{gap:var(--m-gap)}
  .imp2{gap:var(--m-gap)}
  .home-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}

  /* ---- CONDENSED CARD: the one card pattern every surface reuses ---- */
  .glassblock,.import-card,.ritual-card,.setup-card,.sheet-card,.imp2-block,
  .objective-card,.fan-card,.shoot-card,.shoot-read,.drivecard,.home-copy{padding:var(--m-pad);border-radius:14px}
  .foldercard .fc-meta{padding:8px 10px}
  .person-card{padding:8px;min-height:0;gap:6px}
  .volume-row,.folder-row{padding:9px 11px}

  /* ---- TOUCH TARGETS >=44px on every primary control ---- */
  .goldbtn,.ghostbtn{min-height:var(--m-tap)}
  .searchwrap{min-height:var(--m-tap);padding:6px 12px}
  .seg button{height:38px;padding:0 13px}
  .sortpick,.imp2-sel,.river-filter,.objective-form input{min-height:42px}
  .lens-switch .lens,.mode-switch button{padding:10px 13px}
  .rowmore{padding:8px 6px}

  /* ---- HOME: hero = one compact stat + actions; poster a short strip; rails tight ---- */
  .home-copy h2{font-size:clamp(19px,5.2vw,23px);max-width:none}
  .home-copy p{font-size:12.5px}
  .home-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .home-poster{aspect-ratio:auto;height:172px;max-height:172px;min-height:0}
  .recent-row .tile{width:152px}
  .recent-row .tile .tilecap{font-size:10px;left:7px;bottom:7px;right:34px}

  /* ---- LIBRARY: 2-up grid, smaller caps; seg+sort share one row ---- */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .grid.mode-row{grid-template-columns:minmax(0,1fr)}
  .tilecap{font-size:10px;left:7px;bottom:7px;right:34px}
  .tile .dur{font-size:9.5px}
  .seg{order:2;flex:1 1 auto;min-width:0;overflow-x:auto}
  .topbar .sortpick{order:2;flex:0 0 auto}
  .views{order:3}

  /* ---- DRIVES: full-width compact cards ---- */
  .dc-bar{margin:10px 0 9px}
  .dc-strip{margin-top:9px}
  .dc-foot{margin-top:8px}

  /* ---- FOLDERS: single-column river, shorter fans, half-height reading pane ---- */
  .river-flow{grid-template-columns:minmax(0,1fr);gap:10px}
  .shoot-card{min-height:0}
  .shoot-fan{height:84px;margin:4px 0 10px}
  .shoot-read{gap:8px}
  .sr-actions{grid-template-columns:1fr 1fr}
  .sr-actions .goldbtn,.sr-actions .ghostbtn{min-height:var(--m-tap)}
  .river-controls{justify-content:flex-start;gap:6px}
  .river-filter{flex:1 1 120px;width:auto}
  .river-filter:focus{width:auto}

  /* ---- MAKE: one clean vertical flow (label above hint, hint wraps) ---- */
  .objective-copy{flex-direction:column;align-items:flex-start;gap:2px}
  .objective-copy b{font-size:15px}
  .objective-copy span{white-space:normal;font-size:12px}
  .make-style h3{font-size:15px}

  /* ---- PEOPLE: 2-up ---- */
  .people-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .person-cover .person-initial{font-size:28px}
  .person-card b{font-size:12.5px}

  /* ---- CLIP: player-first, lanes below, compact facts ---- */
  .hero-media{height:auto;aspect-ratio:16/9;max-height:260px}
  .clip-facts{gap:8px}
  .clip-topline{flex-direction:row;align-items:center;gap:8px;overflow:hidden}
  .clip-topline .ghostbtn{min-height:38px;padding:8px 12px;flex-shrink:0}
  #clipTopMeta{min-width:0;flex:1;overflow-x:auto;white-space:nowrap;display:flex;align-items:center;gap:6px;scrollbar-width:none}
}

/* an empty enroll note must not paint as a bordered blank cell (any width) */
.clip-facts .note:empty{display:none}

/* home rail skeletons — same clamp dims as real tiles so nothing shifts when data lands */
.tile.skel{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid var(--hair-2);pointer-events:none}
.tile.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);transform:translateX(-120%);animation:softshine 1.25s ease-in-out infinite}

/* cold-drill ghost shoot cards — same card mass as the real river, so drilling never blanks */
.shoot-card.skel-card{position:relative;overflow:hidden;min-height:180px;pointer-events:none;cursor:default}
.shoot-card.skel-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);transform:translateX(-120%);animation:softshine 1.25s ease-in-out infinite}

/* honest score estimates read as estimates, never as confident analysis */
.est{font-style:normal;font:650 9px var(--ui);letter-spacing:.06em;color:var(--ink-4);vertical-align:6px;margin-left:2px}
.ring .num .est{display:block;margin:0;vertical-align:baseline;text-align:center}

/* the brief form fits input + mic + submit */
.objective-form{grid-template-columns:minmax(0,1fr) auto auto}
.objective-form .micbtn{min-width:40px}
.make-acts .make-like.on{border-color:rgba(169,196,160,.6);background:var(--sage-soft)}

/* MAKE swap strip — every slot is editable in place before Keep (state only, nothing persists) */
.make-slot .make-acts{position:absolute;top:34px;right:6px;z-index:3;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.make-slot:hover .make-acts,.make-slot:focus-within .make-acts{opacity:1}
.make-acts button{width:24px;height:24px;border-radius:999px;border:1px solid var(--hair-2);background:rgba(12,10,8,.62);color:#fff;font:700 12px var(--ui);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px)}
.make-acts .make-swap:hover{border-color:var(--gold);color:var(--gold-glow)}
.make-acts .make-drop:hover{border-color:rgba(232,131,107,.6);color:var(--coral)}
.make-alts{display:flex;gap:5px;margin-top:6px;overflow-x:auto;padding:2px}
.make-alts::-webkit-scrollbar{display:none}
.make-alt{flex:0 0 auto;width:64px;height:40px;padding:0;border-radius:8px;overflow:hidden;border:1px solid var(--hair-2);background:var(--tile-bg);cursor:pointer;transition:border-color .14s,transform .14s}
.make-alt:hover{border-color:var(--gold);transform:translateY(-1px)}
.make-alt img{width:100%;height:100%;object-fit:cover;display:block}
.make-alt .ph{display:block;width:100%;height:100%}
@media (max-width:980px){.make-slot .make-acts{opacity:1}}

/* generic shimmer block shell (reclaim + any three-up read) */
.glassblock.skel-block{position:relative;overflow:hidden;min-height:120px;pointer-events:none}
.glassblock.skel-block::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);transform:translateX(-120%);animation:softshine 1.25s ease-in-out infinite}

/* phone: the brief input gets the full row; mic + submit share the second row */
@media (max-width: 560px){
  .objective-form{grid-template-columns:44px minmax(0,1fr)}
  .objective-form input{grid-column:1/-1}
}

/* BEST-SHOT L3 — the owner's stars (local only, never leaves this Mac) */
.stars{display:flex;align-items:center;gap:1px;grid-column:1/-1}
.stars .star{background:none;border:0;font-size:19px;line-height:1;color:var(--ink-4);cursor:pointer;padding:3px 2px;transition:color .12s,transform .12s}
.stars .star:hover{transform:translateY(-1px);color:var(--gold-ink)}
.stars .star.on{color:var(--gold);text-shadow:0 0 10px var(--gold-soft)}
.stars .starnote{font-style:normal;font:600 10.5px var(--ui);color:var(--ink-4);margin-left:7px}
.tile .starchip{position:absolute;top:8px;left:8px;z-index:3;font:700 10px var(--ui);color:var(--gold);background:rgba(12,10,8,.6);border:1px solid rgba(233,188,99,.35);border-radius:999px;padding:2px 6px;backdrop-filter:blur(6px)}

/* touch scrub: press-and-hold owns the tile — no callout menu, no text selection */
.tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ============================================================================
   IA 4+MORE (SCOVO-IA-ASSETS-PLAN §A): the rail is four jobs — Home, Library,
   Folders, Make — plus More. Nothing deleted: the nine secondary tools live in
   the More group (inline expand on desktop, bottom sheet on phone). Routes and
   deep links unchanged; this is presentation, not routing.
   ========================================================================= */
.rail-more{display:none}
html.more-open .rail-more{display:contents}
.ritem-more svg{fill:currentColor;stroke:none}
html.more-open .ritem-more{color:var(--ink);background:var(--hair)}

@media (max-width: 980px){
  /* phone/tablet: More opens a glass sheet above the bottom rail */
  html.more-open .rail-more{display:grid;position:fixed;left:10px;right:10px;bottom:84px;z-index:60;
    grid-template-columns:repeat(3,1fr);gap:6px;padding:12px;border-radius:16px;
    background:var(--sheet-bg,rgba(24,20,16,.92));border:1px solid var(--hair);
    box-shadow:0 24px 70px rgba(0,0,0,.45);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  html.more-open .rail-more .ritem{width:100%;min-width:0;height:56px;flex-direction:column;gap:4px;font-size:11px;margin:0;color:rgba(245,240,232,.85)}
  html.more-open .rail-more .ritem svg{stroke:rgba(245,240,232,.85)}
  html.more-open .rail-more .ritem.active{color:var(--gold)}
}

/* named-person chips lead the tag row in gold: WHO before what/where */
.chip.person{color:var(--gold-ink);border-color:rgba(233,188,99,.4);background:var(--gold-soft);font-weight:700;cursor:pointer}
.chip.person:hover{border-color:var(--gold)}

/* ── SHOOT FLOW (dad's spec: brief → pull → keep/pass → stage) ──────────────── */
.shoot-surface .surface-head{align-items:flex-start}
.shoot-step[data-off]{opacity:.45;pointer-events:auto}
.shoot-step[data-off] input,.shoot-step[data-off] .goldbtn{pointer-events:none}
.shoot-sources{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.shoot-src{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;
  border:1px solid var(--hair);border-radius:var(--r-action);background:rgba(0,0,0,.06);cursor:pointer;
  transition:border-color .14s var(--settle),background .14s var(--settle)}
.shoot-src b{font:650 13px var(--ui);color:var(--ink)}
.shoot-src span{font:500 11.5px var(--ui);color:var(--ink-3)}
.shoot-src:hover{border-color:var(--gold)}
.shoot-src.on{border-color:var(--gold);background:var(--gold-soft)}
.shoot-src.on b{color:var(--gold-ink)}
.shoot-src[data-unread]{opacity:.6}
.shoot-src.drive b::before{content:"⏏ ";font-weight:400}
.shoot-beat{margin-top:14px}
.shoot-beat-h{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.shoot-beat-h b{font:650 13.5px var(--ui);color:var(--ink)}
.shoot-cands{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.shoot-cand{position:relative;flex:0 0 168px;display:flex;flex-direction:column;gap:6px}
.shoot-cand.rec .tile{box-shadow:0 0 0 1px rgba(233,188,99,.35)}
.shoot-cand .shoot-recmark{font:650 10px var(--ui);color:var(--gold-ink);background:var(--gold-soft);
  border:1px solid rgba(233,188,99,.30);border-radius:999px;padding:2px 7px;position:absolute;top:6px;left:6px;z-index:3}
.shoot-cand.keep .tile{box-shadow:0 0 0 2px var(--gold)}
.shoot-cand.pass{opacity:.38}
.shoot-callrow{display:flex;gap:6px}
.shoot-callrow button{flex:1;font:600 11.5px var(--ui);padding:5px 0;border-radius:999px;cursor:pointer;
  border:1px solid var(--hair);background:transparent;color:var(--ink-3);transition:all .14s var(--settle)}
.shoot-callrow button:hover{border-color:var(--gold);color:var(--ink)}
.shoot-cand.keep .shoot-keep{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink)}
.shoot-cand.pass .shoot-pass{border-color:var(--coral);color:var(--coral)}
.shoot-actions{margin-top:16px}
.shoot-receipt p{font:500 13px var(--ui);color:var(--ink-2,var(--ink));max-width:64ch}

@media (max-width: 980px){
  /* shoot flow condenses per the mobile density system: single-column steps, 2-up candidate strips */
  .shoot-surface .surface-head{flex-direction:column;gap:10px}
  .shoot-src{min-height:44px}
  .shoot-cand{flex-basis:44vw}
  .shoot-cands{gap:8px}
}

/* ── PACKS: staged sets + the deploy ritual ─────────────────────────────────── */
.pack-shelf h3{margin-bottom:8px}
.packchip .pack-deploy-btn{font:650 11px var(--ui);color:var(--gold-ink);background:var(--gold-soft);
  border:1px solid rgba(233,188,99,.30);border-radius:999px;padding:3px 9px;margin-left:8px;cursor:pointer}
.packchip .pack-deploy-btn:hover{border-color:var(--gold)}
.pack-deploy-panel{margin-top:10px}
.pack-plan-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 13px var(--ui);color:var(--ink)}
.pack-plan-row .warn,.pack-receipt .warn{color:var(--coral)}
.pack-receipt{font:500 13px var(--ui);color:var(--ink);margin-top:8px}

/* ── PEOPLE AS A LIBRARY LENS (IA §A): chips slice the wall in place ────────── */
.people-lens{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 0 8px}
.people-lens .pl-lbl{font:650 11px var(--ui);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.pl-chip{font:600 12px var(--ui);padding:5px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hair);background:transparent;color:var(--ink-3);transition:all .14s var(--settle)}
.pl-chip:hover{border-color:var(--gold);color:var(--ink)}
.pl-chip.on{color:var(--gold-ink);background:var(--gold-soft);border-color:var(--gold);font-weight:700}
.pl-chip.pl-all{border-style:dashed}
@media (max-width: 980px){
  .people-lens{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:10px}
  .pl-chip{white-space:nowrap;min-height:32px}
}

/* ── LOOKS SHEET readability: the card is dark glass in BOTH themes, so its text must
   carry its own light ink — in light Memory mode the theme ink is dark and the title,
   picker, and note were dark-on-dark (Nelson's "it all looked off", 2026-07-04) ── */
.sheet-card{color:rgba(245,240,232,.85)}
.sheet-card h2{color:rgba(245,240,232,.96)}
.sheet-card p,.sheet-card .note{color:rgba(245,240,232,.66)}
.sheet-card .eyebrow{color:rgba(233,188,99,.75)}
.sheet-card select{width:100%;appearance:none;-webkit-appearance:none;background:rgba(0,0,0,.35);
  color:rgba(245,240,232,.92);border:1px solid rgba(245,240,232,.18);border-radius:10px;
  padding:10px 12px;font:500 13px var(--ui);margin:4px 0 2px}
.sheet-card .x{color:rgba(245,240,232,.8)}

/* ── THE PRODUCER: one voice brief → an approved checklist that runs ────────── */
.producer-brief textarea{width:100%;min-height:96px;resize:vertical;background:rgba(0,0,0,.10);
  color:var(--ink);border:1px solid var(--hair);border-radius:12px;padding:12px 14px;
  font:500 14px/1.5 var(--ui)}
.producer-form-row{display:flex;gap:10px;margin-top:10px;align-items:center}
.producer-form-row .micbtn.big{width:46px;height:46px;border-radius:999px;display:grid;place-items:center}
.prod-list{display:flex;flex-direction:column;gap:10px}
.prod-task{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--hair);
  border-radius:var(--r-action);background:rgba(0,0,0,.05);flex-wrap:wrap}
.prod-task.asking{border-color:rgba(233,188,99,.45);background:var(--gold-soft)}
.prod-task.done{opacity:.78}
.prod-task.skip{opacity:.45}
.prod-chip{flex:0 0 auto;font:700 10.5px var(--ui);text-transform:uppercase;letter-spacing:.06em;
  border-radius:999px;padding:4px 10px;border:1px solid var(--hair);color:var(--ink-3);margin-top:2px}
.prod-chip.run{color:var(--gold-ink);border-color:var(--gold);background:var(--gold-soft)}
.prod-chip.done{color:var(--sage,#7fae8b);border-color:currentColor}
.prod-chip.fail{color:var(--coral);border-color:currentColor}
.prod-chip.ask{color:var(--gold-ink);border-color:rgba(233,188,99,.5)}
.prod-say{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.prod-say b{font:600 13.5px var(--ui);color:var(--ink)}
.prod-say i{font:500 11px var(--ui);color:var(--ink-3);font-style:normal}
.prod-receipt{margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.prod-err{color:var(--coral);font:500 12px var(--ui)}
.prod-acts{display:flex;gap:8px;align-items:center}
.prod-acts .small{padding:6px 14px;font-size:12px}
.prod-ask{flex-basis:100%;display:flex;flex-direction:column;gap:8px;padding-top:8px}
.prod-ask b{font:600 13px var(--ui);color:var(--gold-ink)}
.prod-ask-opts{display:flex;gap:8px;flex-wrap:wrap}
.prod-ask-row{display:flex;gap:8px;align-items:center}
.prod-ask-row .prod-answer{flex:1;background:rgba(0,0,0,.12);color:var(--ink);border:1px solid var(--hair);
  border-radius:999px;padding:9px 14px;font:500 13px var(--ui);min-width:0}
.prod-banner{font:600 12.5px var(--ui);color:var(--gold-ink);background:var(--gold-soft);
  border:1px solid rgba(233,188,99,.35);border-radius:12px;padding:10px 14px;margin-bottom:12px}
.prod-headacts{display:flex;gap:8px;align-items:center}
.prod-foot{margin-top:12px;font-size:12px}
@media (max-width: 980px){
  .producer-surface .surface-head{flex-direction:column;gap:10px}
  .prod-headacts{flex-wrap:wrap}
  .prod-task{padding:10px 12px}
  .prod-acts .small,.prod-ask-row button{min-height:38px}
}

/* similar-rail keep/pass (dad's ask): approve suggestions where they appear */
.sim-cand{position:relative}
.sim-cand .sim-calls{position:absolute;top:4px;right:4px;display:flex;gap:4px;opacity:0;transition:opacity .14s var(--settle)}
.sim-cand:hover .sim-calls,.sim-cand:focus-within .sim-calls{opacity:1}
@media (max-width: 980px){.sim-cand .sim-calls{opacity:1}}   /* no hover on touch — always visible */
.sim-calls button{font:600 11px var(--ui);border-radius:999px;padding:3px 8px;cursor:pointer;
  border:1px solid var(--hair);background:rgba(20,16,12,.72);color:rgba(245,240,232,.9)}
.sim-calls .sim-keep.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink)}
.sim-cand.passed{opacity:.35}

/* mic states for the recorder path (WKWebView/whisper): recording pulses, thinking spins, off dims */
.micbtn.rec{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink);animation:micpulse 1.2s ease-in-out infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(233,188,99,.45)}50%{box-shadow:0 0 0 7px rgba(233,188,99,0)}}
.micbtn.thinking{opacity:.6;animation:micpulse 0.7s ease-in-out infinite}
.micbtn.mic-off{opacity:.35;cursor:not-allowed}

/* ── ACT FEARLESSLY: share links, coverage, mirrors, NAS, conform, producer previews ── */
.warn{color:var(--coral,#e8836b)}
.goldbtn.small{padding:6px 11px;font-size:11px;min-height:0}
.sharedl-row{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--ui);color:var(--ink-2);white-space:nowrap}
.sharedl-row input{accent-color:var(--gold)}
.selbar-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.selbar-inline .selname{flex:1;min-width:220px}
.packchip .pack-share-btn,.packchip .pack-take-btn{font:700 10.5px var(--ui);color:var(--gold-ink);background:var(--gold-soft);border-radius:999px;padding:3px 9px;margin-left:5px;cursor:pointer}
.anyw .control-block{min-width:0}
.anyw-row{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line,rgba(128,128,128,.14))}
.anyw-row:last-of-type{border-bottom:0}
.anyw-row b{font-size:13px}
.anyw-row .muted{font-size:11.5px}
.anyw-acts{display:flex;gap:6px;margin-top:4px}
.anyw-meter{display:inline-block;width:86px;height:5px;border-radius:99px;background:rgba(128,128,128,.22);vertical-align:middle;margin:0 4px;overflow:hidden}
.anyw-meter i{display:block;height:100%;border-radius:99px;background:var(--gold)}
.anyw-verdict{margin-top:6px}
.anyw-newrule{display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap}
.anyw-steps{margin-top:8px}
.anyw-steps summary{cursor:pointer;font:600 12px var(--ui);color:var(--ink-2)}
.anyw-steps ol{margin:7px 0 4px 18px;font-size:12px;line-height:1.55;color:var(--ink-2)}
.prod-preview{margin-top:7px;padding:9px 11px;border-radius:10px;background:rgba(128,128,128,.09);font-size:12.5px;line-height:1.5}
.prod-pv-clips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.prod-pv-clips .pl-chip{cursor:default;font-size:11px;padding:3px 9px}

/* ── ACT FEARLESSLY: the unified share sheet (one modal, everywhere) ── */
.share-card{width:min(520px,100%)}
.share-title{font-size:21px;font-weight:650;margin:2px 0 6px}
.share-title .muted{font-weight:400;font-size:15px}
.share-lede{color:var(--ink-2);font-size:13px;line-height:1.5;margin-bottom:16px}
.share-field{display:block;margin:14px 0}
.share-field > span{display:block;font:600 12px var(--ui);color:var(--ink-2);margin-bottom:7px}
.share-field input, .share-field select{width:100%}
.share-perms{display:flex;flex-direction:column;gap:8px}
.share-perm{display:flex;flex-direction:column;gap:1px;padding:11px 13px;border-radius:12px;border:1px solid var(--hair-2);cursor:pointer;position:relative;transition:border-color .15s,background .15s}
.share-perm input{position:absolute;opacity:0;pointer-events:none}
.share-perm b{font-size:13.5px;font-weight:600}
.share-perm i{font-size:11.5px;color:var(--ink-3)}
.share-perm.on{border-color:var(--gold);background:var(--gold-soft)}
.share-expiry{display:flex;align-items:center;justify-content:space-between;gap:12px}
.share-expiry > span{margin-bottom:0}
.share-expiry select{width:auto;min-width:130px}
.share-foot{margin-top:18px}
.share-foot .goldbtn{width:100%;padding:12px;font-size:14px}
.share-done{font:600 13px var(--ui);color:var(--gold);margin:4px 0 12px}
.share-url{display:flex;gap:8px;margin-bottom:14px}
.share-url input{flex:1;font:500 12.5px var(--mono,ui-monospace);color:var(--ink)}
.share-reach{font-size:12.5px;line-height:1.55;color:var(--ink-2);padding:11px 13px;border-radius:12px;background:rgba(128,128,128,.10);border:1px solid var(--hair-2)}
.share-reach.on{background:var(--gold-soft);border-color:var(--gold)}
.share-reach b{color:var(--ink)}
.share-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.share-actions .ghostbtn{flex:1;text-align:center;text-decoration:none}
/* chip share affordance (smart views) + clip topline share */
.viewchip .chip-share{opacity:.55;padding:0 4px;font-size:13px}
.viewchip .chip-share:hover{opacity:1;color:var(--gold)}
.clip-topline #clipShare{margin-left:auto}

/* ── SHARES surface — the "your links" vessel (WeTransfer/Dropbox style) ── */
.shares-surface{max-width:940px;margin:0 auto}
.reach-banner{padding:14px 16px;border-radius:14px;border:1px solid var(--hair-2);background:rgba(128,128,128,.09);font-size:13px;line-height:1.5;margin-bottom:18px}
.reach-banner.on{background:var(--gold-soft);border-color:var(--gold)}
.reach-banner b{color:var(--ink)}
.reach-act{display:flex;align-items:center;gap:10px;margin-top:10px}
.reach-note{font-size:11.5px;margin-top:9px;padding-top:9px;border-top:1px solid var(--hair)}
.shares-group{margin-bottom:16px}
.shares-group h3{font-size:14px;margin-bottom:4px}
.shares-group h3 .muted{font-weight:400}
.shares-group.inactive{opacity:.72}
.share-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border-bottom:1px solid var(--hair)}
.share-item:last-child{border-bottom:0}
.share-item-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.share-item-main b{font-size:14px}
.share-item-main .muted{font-size:11.5px}
.share-item-side{display:flex;align-items:center;gap:12px;flex-shrink:0}
.share-item-acts{display:flex;gap:6px}
.share-state{font:600 11px var(--ui);padding:3px 9px;border-radius:999px;white-space:nowrap}
.share-state.open{color:var(--gold-ink);background:var(--gold-soft)}
.share-state.expired,.share-state.revoked{color:var(--ink-3);background:rgba(128,128,128,.14)}

/* share sheet: privacy choice */
.share-privacy .share-perm{padding:9px 12px}
#shPass{width:100%}

/* one-touch quick share: toast + options button */
.selopts{padding:6px 9px;min-width:0}
/* The toast is a FIXED-dark surface (identical in light + dark theme), so ALL of its
   colors are fixed-light LITERALS — never theme tokens like --ink / --gold-ink, which
   flip DARK in light mode and render invisible on this dark pill. (This was the bug.) */
.scovo-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:60;
  max-width:min(560px,92vw);padding:13px 16px;border-radius:14px;
  background:rgba(24,20,16,.96);border:1px solid rgba(255,255,255,.14);color:#F4EEE3;
  box-shadow:0 20px 60px rgba(0,0,0,.5);backdrop-filter:blur(24px) saturate(1.2);
  font:500 13px var(--ui);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.scovo-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.scovo-toast b{color:#FFFFFF}
.qs-toast{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#F4EEE3}
.qs-code{font:600 13px var(--mono,ui-monospace);letter-spacing:.06em;color:#151310;
  background:#F7CF78;padding:4px 11px;border-radius:8px}
.qs-code b{color:#151310}
.qs-toast .goldbtn.small{padding:7px 12px;font-size:11.5px;min-height:0;background:#F7CF78;color:#151310;border:0;font-weight:600}
.scovo-toast .ghostbtn.small{padding:7px 12px;font-size:11.5px;min-height:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);color:#F4EEE3}

/* SHARE SHEET readability: .sheet-card is a FIXED-dark surface, so its text must be
   fixed-light in BOTH themes. (Theme tokens like --ink go dark in light mode → invisible
   on the dark card. This is the systemic "unreadable new UI" bug — fixed here for the sheet.) */
.share-card{color:#F4EEE3}
.share-card .share-title{color:#F4EEE3}
.share-card .share-title .muted,
.share-card .share-lede,
.share-card .share-field > span,
.share-card .share-perm i,
.share-card .muted{color:#B8AE9E}
.share-card .share-perm b{color:#F4EEE3}
.share-card .share-perm{border-color:rgba(255,255,255,.16)}
.share-card .share-perm.on{border-color:var(--gold);background:rgba(233,188,99,.16)}
.share-card input,.share-card select{color:#F4EEE3;background:rgba(0,0,0,.32);border-color:rgba(255,255,255,.16)}
.share-card input::placeholder{color:#8F8676}
.share-card .share-done{color:#F7CF78}
.share-card .share-url input{color:#F4EEE3}
.share-card .share-reach{color:#CDC3B2;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.share-card .share-reach b{color:#F4EEE3}
.share-card .share-reach.on{background:rgba(233,188,99,.16);border-color:var(--gold)}
.share-card .x{color:#F4EEE3;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.share-card .eyebrow{color:#B8AE9E}
.share-card .ghostbtn{color:#F4EEE3;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}

/* take-with-me panel — compact + readable */
.twm-ready{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink)}
.twm-ready .goldbtn.small{padding:7px 12px;font-size:12px;min-height:0}
.twm-note{font-size:11.5px;margin-top:8px;line-height:1.5}