/* Fadeaway — shared tokens and components (Plan 2, Task 1).
   Ported from the locked mockups: docs/design/mockups/clip-page-FINAL-LOCKED.html (lines 4–274) and
   home-grid-FINAL-LOCKED.html (lines 4–187). Only rules shared by several screens live here; page rules go to
   clip.css / home.css, and each pop-out injects its own small block with FA.css(id, text). Dark only. */

/* the display voice (DESIGN.md Typography › Display): Big Shoulders Display, SIL OFL (static/fonts/…-OFL.txt),
   self-hosted so a Mac offline and the cloud's CSP both get it. Clip titles, the big verdict, big stat numbers only. */
@font-face{font-family:"Big Shoulders Display";src:url("../fonts/BigShouldersDisplay-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
:root{--bg:#0b0d11;--panel:#13161c;--panel2:#0f1217;--line:#262a31;--ink:#ece6dd;--mute:#8b857c;--soft:#cfc8bd;
  --amber:#f59e2c;--amber2:#ffbf5e;--green:#4fd39a;--blue:#7d9bff;--red:#ff7a66;--g:12px;color-scheme:dark;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  /* type roles (DESIGN.md Typography): use these, never a raw px size. System sizes 12 · 13 · 14 · 16 · 20 · 24;
     Big Shoulders 22 · 30 · 48 · 64. Nothing you read or press under 12px; the 11px overline is for 1–3 words. */
  --ui:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-display:900 30px/30px var(--display);   /* the clip's name: uppercase, +.4px */
  --f-total:900 48px/44px var(--display);     /* the one number a page answers (Spend total) */
  --f-stat:800 24px/28px var(--ui);           /* big tile numbers, tabular */
  --f-page:700 20px/26px var(--ui);           /* what screen or profile you're on */
  --f-panel:700 16px/22px var(--ui);          /* panel, card, tile, dialog heading */
  --f-item:700 14px/20px var(--ui);           /* a clip, file, song, treatment, team in a list */
  --f-body:400 13px/19px var(--ui);           /* default text */
  --f-control:600 13px/19px var(--ui);        /* buttons, tabs, segments, menu items */
  --f-prose:400 14px/21px var(--ui);          /* reading text: Help, dialog paragraphs */
  --f-meta:400 12px/16px var(--ui);           /* times, sizes, descriptions, hints */
  --f-field:600 12px/16px var(--ui);          /* sentence-case label above a control, colour --soft */
  --f-section:700 12px/16px var(--ui);        /* sentence-case group heading, colour --mute, +.3px */
  --f-over:700 11px/14px var(--ui);           /* UPPERCASE 1–3 word category, +.6px, colour --mute */
  --f-chip:600 12px/16px var(--ui);           /* status pills and add-on chips */
  --f-count:800 11px/16px var(--ui);          /* count bubbles */
  --f-code:400 12px/16px var(--mono);
  /* depth (DESIGN.md › Elevation): a top highlight, a contact shadow and a soft drop under everything you press */
  --press-ease:cubic-bezier(.2,.8,.2,1);
  --amber-face:linear-gradient(180deg,#ffbe62 0%,#f7a33a 46%,#ea8f1f 100%);
  --lift-amber:inset 0 1px 0 #ffffff80,inset 0 -1px 0 #00000030,0 1px 1px #0000008c,0 2px 4px -1px #00000080,0 10px 22px -8px #f59e2c99;
  --lift-amber-hi:inset 0 1px 0 #ffffff8c,inset 0 -1px 0 #00000030,0 2px 2px #00000080,0 6px 10px -3px #00000080,0 16px 30px -10px #f59e2cb3;
  --press-amber:inset 0 2px 4px #0000003d,inset 0 -1px 0 #ffffff26,0 1px 1px #00000080;
  --ghost-face:linear-gradient(180deg,#ffffff14,#ffffff06);
  --ghost-face-hi:linear-gradient(180deg,#ffffff1c,#ffffff0a);
  --lift-ghost:inset 0 1px 0 #ffffff1f,0 1px 1px #000000a6,0 4px 10px -4px #000000b3;
  --lift-ghost-hi:inset 0 1px 0 #ffffff26,0 2px 2px #00000099,0 8px 16px -6px #000000cc;
  --press-ghost:inset 0 2px 4px #00000066;
  --lift-chip:inset 0 1px 0 #ffffff14,0 1px 1px #00000099;
  --lift-flat:0 1px 1px #00000080;
  --lift-card:inset 0 1px 0 #ffffff0d,0 1px 2px #00000099,0 12px 28px -14px #000000e6;}
*{box-sizing:border-box}
/* drawn icons (FA.icon): the text colour, one stroke weight; size with font-size or width/height */
.ico{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:var(--f-body)}
a{color:var(--amber2)}
button{font:inherit;color:inherit}
.m{color:var(--mute);font-size:12px}
/* role helpers for markup that has no better class */
.t-over{font:var(--f-over);letter-spacing:.6px;text-transform:uppercase;color:var(--mute)}
.t-field{font:var(--f-field);color:var(--soft)}
.t-section{font:var(--f-section);letter-spacing:.3px;color:var(--mute)}
code,kbd,.code{font:var(--f-code)}
.sp{flex:1}
.hidden{display:none!important}
.netsb{background:#fff;border-radius:50%;padding:2px}

/* ---------- shell: header + one screen ---------- */
.shell{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--g);padding:var(--g) 16px}
#screen{min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column;position:relative}
#screen>*{min-height:0}
.hdr{display:flex;align-items:center;gap:10px;min-width:0}
/* the locked Clip page has no app header — its own bar (‹ All clips, title, team chip…) is the top row */
body[data-route=clip] .hdr{display:none}
body[data-route=clip] .shell{grid-template-rows:minmax(0,1fr)}
.hdrx{display:contents}
.who{display:flex;align-items:center;gap:8px;flex:none;font-size:12.5px;color:var(--mute)}
.who[hidden]{display:none}
.who-n{max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-out{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-weight:600}
.who-out:hover{border-color:var(--mute)}
.hdr .logo{height:30px;cursor:pointer;display:block}
.hdr .logo img{height:30px;display:block}
.tabs{display:flex;gap:4px;margin-left:10px}
.tab{padding:6px 13px;border-radius:999px;color:var(--mute);font-weight:600;cursor:pointer;border:1px solid transparent;white-space:nowrap;text-decoration:none;background:none}
.tab.on{color:var(--amber);border-color:#f59e2c66;background:linear-gradient(180deg,#f59e2c24,#f59e2c0c);box-shadow:var(--lift-chip)}
.tab .cnt{margin-left:5px;font:var(--f-count);background:var(--amber);color:#111;border-radius:999px;padding:0 6px;font-weight:800}
.tab .cnt:empty{display:none}
.team{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;flex:none}
.team span{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;color:var(--mute);cursor:pointer;transition:.25s;white-space:nowrap}
.team span.on{background:#ffffff14;color:var(--ink)}
.team img{height:17px;width:17px;object-fit:contain}
.tlogo{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#2a2e35;color:var(--ink);font-size:9.5px;font-weight:800;flex:none}
.tlogo img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.tlogo.has{background:#fff;padding:1px}
@media (max-width:860px){.tabs{margin-left:4px}.tab{padding:6px 9px}.team span{padding:4px 8px}}
@media (max-width:1100px){.who-n{display:none}}

/* ---------- buttons ---------- */
.btn{background:var(--amber-face);color:#111;border:0;border-radius:999px;padding:8px 15px;cursor:pointer;font:inherit;font-weight:800;box-shadow:var(--lift-amber);
  transition:transform .18s var(--press-ease),box-shadow .18s var(--press-ease),filter .18s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:var(--lift-amber-hi)}
.btn:active{transform:translateY(1px);filter:brightness(.97);box-shadow:var(--press-amber)}
.btn.sm{padding:6px 12px;font-size:12px}
.btn:disabled,.ghost:disabled,.btn.dis,.ghost.dis{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.btn:disabled,.btn.dis{box-shadow:var(--lift-flat)}
.ghost{background:var(--ghost-face);color:var(--ink);border:1px solid #ffffff1c;border-radius:999px;padding:6px 12px;cursor:pointer;font:inherit;font-weight:600;display:inline-flex;gap:6px;align-items:center;
  transition:transform .18s var(--press-ease),box-shadow .18s var(--press-ease),background .18s,border-color .18s;white-space:nowrap;font-size:13px;text-decoration:none;box-shadow:var(--lift-ghost)}
.ghost:hover{background:var(--ghost-face-hi);transform:translateY(-1px);box-shadow:var(--lift-ghost-hi)}
.ghost:active{transform:translateY(1px);box-shadow:var(--press-ghost)}
.ghost:disabled,.ghost.dis{box-shadow:none}
.ghost.on{border-color:#f59e2c99;color:var(--amber2);background:linear-gradient(180deg,#f59e2c24,#f59e2c0c)}
.ghost.warn{border-color:#ff7a6666;color:#ffb3a6}
.ghost.sm{padding:3px 9px;font-size:12px}
.lnk{font-size:12px;color:var(--amber2);font-weight:700;cursor:pointer;white-space:nowrap;background:none;border:0;padding:0}

/* ---------- chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;white-space:nowrap;box-shadow:var(--lift-chip)}
.chip.click{cursor:pointer}.chip.click:hover{border-color:#f59e2c88}
.chip img{height:17px}
.chip.ok,.fp{color:var(--green);font-weight:800;border-color:#2f7a5799;background:#0d2a1d}
.chip.warn{color:#ffb257;border-color:#7a4a14;background:#2a1a0d}
.chip.amber{border-color:#f59e2c88;color:var(--amber2);background:#f59e2c18}
.tag{font:var(--f-count);padding:0 6px;border-radius:999px;border:1px solid #ffffff22;color:var(--soft);margin-left:4px}

/* ---------- switches (.sw; .tg is the mockups' name, kept as an alias) ---------- */
.sw,.tg{width:30px;height:17px;border-radius:999px;background:#30343b;position:relative;cursor:pointer;transition:background .3s;flex:none;display:inline-block;border:0;padding:0}
.sw:after,.tg:after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left .3s cubic-bezier(.2,.8,.2,1)}
.sw.on,.tg.on{background:var(--amber)}
.sw.on:after,.tg.on:after{left:15px}
.sw.dis,.tg.dis{opacity:.4;cursor:not-allowed}

/* ---------- sliders, segmented choices, rows ---------- */
input[type=range]{accent-color:var(--amber)}
.sl{display:grid;grid-template-columns:88px 1fr 50px;align-items:center;gap:8px;font:var(--f-field);color:var(--soft);margin:7px 0}
.sl input{width:100%;accent-color:var(--amber)}
.sl output{text-align:right;color:var(--amber2);font-weight:700;font-variant-numeric:tabular-nums}
.seg{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}
.seg span{font:var(--f-chip);padding:4px 10px;border-radius:999px;border:1px solid var(--line);cursor:pointer;white-space:nowrap;box-shadow:var(--lift-chip);transition:box-shadow .18s,background .18s}
.seg span:active{box-shadow:var(--press-ghost)}
.seg span.on{border-color:var(--amber);color:var(--amber2);background:linear-gradient(180deg,#f59e2c24,#f59e2c0c)}
.vseg{display:flex;gap:2px;background:#ffffff10;border-radius:999px;padding:3px}
.vseg span{padding:5px 10px;font-size:12px;font-weight:700;color:var(--soft);cursor:pointer;border-radius:999px;transition:.25s;white-space:nowrap}
.vseg span.on{background:#fff;color:#111}
.wrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}
.sub{font:var(--f-over);letter-spacing:.6px;text-transform:uppercase;color:var(--mute);margin:10px 0 4px}
.sub.rh{cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}
.sub.rh:before{content:"▾";color:var(--mute)}.sub.rh.closed:before{content:"▸"}
.sub.rh:hover{color:var(--amber2)}
.rbody{display:flex;flex-direction:column}.rbody.hid{display:none}
.why{font:var(--f-meta);color:#ffc37a;background:#2a1a0d;border:1px solid #7a4a14;border-radius:9px;padding:7px 9px;margin-top:8px}
.note{font-size:12px;color:var(--soft);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
input.txt,select.txt,textarea.txt{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit;outline:none}
input.txt:focus,select.txt:focus,textarea.txt:focus{border-color:#f59e2c88}

/* ---------- panels, cards, tiles ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;min-height:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--lift-card)}
.card h3{margin:0 0 8px;font:var(--f-panel);display:flex;align-items:center;gap:6px}
.tile{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px 9px;display:flex;flex-direction:column;gap:2px;min-width:0;transition:border-color .2s,opacity .2s,transform .2s}
.tile.wide{grid-column:span 2}
.tile b{font:var(--f-item)}
.tile small{font:var(--f-meta);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .th{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:2px}
.tile .ti{font-size:15px}
.tile.off{opacity:.45}
.lock{cursor:pointer;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;font-size:12px;flex:none;border:0}
.lock:hover{background:#ffffff22}
.lock.open{background:#f59e2c22;outline:1px solid #f59e2c88}
.scroll{overflow-y:auto;min-height:0}
.scroll::-webkit-scrollbar,.wb::-webkit-scrollbar{width:6px}
.scroll::-webkit-scrollbar-thumb,.wb::-webkit-scrollbar-thumb{background:#2a2e35;border-radius:3px}
.empty{color:var(--mute);text-align:center;padding:30px 12px}

/* ---------- sortable (FA.sortable) ---------- */
.unlocked .tile,.unlocked .grp,.unlocked [data-sort]{cursor:grab!important;user-select:none;outline:1px dashed #f59e2c88}
.unlocked .grp{border-radius:6px;padding:3px 6px}
.unlocked .tile .th:before,.unlocked .grp:before,.unlocked [data-sort]:before{content:"⠿";color:var(--amber2);margin-right:4px;font-size:13px}
.sorting{opacity:.35}
.ghostdrag{position:fixed;z-index:200;pointer-events:none;opacity:.85;box-shadow:0 18px 40px #000c;transform:rotate(1.5deg)}
.landing{background:#f59e2c22!important;outline:2px solid var(--amber)!important;border-radius:10px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(80px);background:#1c2027;border:1px solid #f59e2c66;padding:9px 15px;border-radius:999px;box-shadow:0 10px 30px #000a;transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:300;max-width:min(680px,calc(100vw - 32px));text-align:center}
.toast.on{transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:#2f7a57}
.toast.err{border-color:#ff7a66;color:#ffd0c8}

/* ---------- pop-out windows (FA.Win) ---------- */
.win{position:fixed;z-index:50;width:380px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);resize:both;overflow:hidden;min-width:300px;min-height:120px;background:#161a21f2;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #ffffff22;border-radius:16px;box-shadow:0 26px 70px #000e,0 0 0 1px #00000080;display:none;flex-direction:column;animation:pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.win.on{display:flex}
.win.front{border-color:#f59e2c88}
.wh{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:grab;border-bottom:1px solid #ffffff14;user-select:none;flex:none}
.wh:active{cursor:grabbing}
.wh b{font:var(--f-item);white-space:nowrap}
.wh .wht{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wh .wht:empty{display:none}
.wh .grip{color:#5d5a55;letter-spacing:-2px}
.wh .ctl{margin-left:auto;display:flex;gap:4px}
.wh .ctl span{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--soft);background:#ffffff0d}
.wh .ctl span:hover{background:#ffffff22}
.wb{padding:12px;overflow:auto;min-height:0;flex:1}
.win:after{content:"";position:absolute;right:4px;bottom:4px;width:10px;height:10px;border-right:2px solid #ffffff44;border-bottom:2px solid #ffffff44;border-radius:0 0 3px 0;pointer-events:none}
.win.min{resize:none;height:auto!important;min-height:0!important}
.win.min .wb{display:none}
.win.min:after{display:none}
/* the wide dock window (Stems): .win.resz in the mockup */
.win.resz{min-width:420px;min-height:180px}
.win.resz .wb{padding:6px 8px}
.win.resz:after{border-right-color:#ffffff55;border-bottom-color:#ffffff55}
/* keepRatio windows: the body is a column, the ratio box takes the spare height */
.win.ratio .wb{display:flex;flex-direction:column}
.win.ratio .wb>*{flex:none}
.win.ratio .wb>.ratio-box{flex:1 1 0;min-height:110px;position:relative;border-radius:10px;overflow:hidden;background:#000}
.ratio-box video,.ratio-box img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- placeholder screens (Plan 3) ---------- */
.soon:has(>h2){margin:auto;text-align:center;max-width:460px;padding:30px}
.soon h2{margin:0 0 6px;font-size:20px}
.soon p{color:var(--soft);margin:0 0 14px}

/* admin-only (api/me admin: false): tiles that change things for everyone are read-only, Trash can't delete for good,
   and Spend is your own page (no way back to everyone's) */
body.notadmin .tile[data-admin] .tb, body.notadmin .tile[data-admin] .rst, body.notadmin .tile[data-admin] [data-r=wmshape]{pointer-events:none;opacity:.55}
body.notadmin .tile[data-admin] .th::after{content:'🔒 Admins only';font:var(--f-chip);color:var(--mute);margin-left:8px;white-space:nowrap}
body.notadmin #emptyt, body.notadmin #tlist [data-f], body.notadmin .spend .ph .back[href="#/spend"]{display:none}

/* ---------- The Beam (DESIGN.md › The One Beam Rule): a light that travels the edge of the one live card on a screen.
   The halo sits behind the card (z-index -1), so its container must isolate (see each screen's CSS). ---------- */
@property --beam-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.beam,.clip .verdict:not(:empty){position:relative}
.beam::before,.beam::after,.clip .verdict:not(:empty)::before,.clip .verdict:not(:empty)::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--beam-a),#f59e2c00 0deg 262deg,#f59e2c 300deg,#ffd08a 318deg,#f59e2c 334deg,#f59e2c00 360deg);
  animation:beam 6s linear infinite}
.beam::before,.clip .verdict:not(:empty)::before{inset:-1px;padding:1.5px;z-index:2;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.beam::after,.clip .verdict:not(:empty)::after{inset:-3px;z-index:-1;filter:blur(12px);opacity:.45}
@keyframes beam{to{--beam-a:360deg}}
@media (prefers-reduced-motion:reduce){.beam::before,.beam::after,.clip .verdict:not(:empty)::before,.clip .verdict:not(:empty)::after{animation:none;--beam-a:300deg}}
/* phones keep the travelling edge light but skip the blurred halo: re-blurring it every frame is the expensive part */
@media (max-width:720px){.beam::after,.clip .verdict:not(:empty)::after{display:none}}

/* ---------- card depth on the desktop: a quiet top edge and a deep, soft shadow under each top-level card.
   Phones keep their flat sections (mobile.css). ---------- */
@media (min-width:721px){
  :is(.panel,.files .panel,.files .disk,.set .panel,.set .banner,.set .tile,.home .st,.home .clips,.home .feedp,.home .hero,
    .scrubpg .panel,.clip .sbar,.clip .verdict,.clip .fcard,.clip .khcard,.spend .t,.spend .card,.spg .pane){box-shadow:var(--lift-card)}
}