/* ============================================================================
   FORGE v2 — "Pace Clock"

   WHY THIS LOOKS NOTHING LIKE v1
   v1 was a cream desktop dashboard: white cards floating on beige, small type,
   three thin columns, acres of dead space. But Forge is used standing up,
   sweating, with the phone on the floor two metres away. The old layout was
   built for reading. This one is built for glancing.

   RULES
   1. Colour is state, never decoration.
        --work  hot orange = go
        --rest  mint       = recover
        --prep  amber      = get ready
      A screen that is orange means work. You know before you read the number.
   2. THE FLOOD (signature). While a workout runs, the stage colour takes the
      whole viewport — no card, no chrome, no page. The screen IS the timer,
      legible across a room, which a 240px card on beige never was.
   3. Numerals are the largest thing on any screen they appear on. Archivo at
      width 125 / weight 800, tabular, so digits never jitter as they count.
   4. Density over daintiness. v1 felt empty because a 3-column grid of small
      cards leaves acres of background. Sections here are full-bleed and packed.
   ============================================================================ */

/* ==========================================================================
   §1  TOKENS
   ========================================================================== */
:root{
  /* ground — a gym at night: rubber floor, powder-coated racks */
  --floor:      #14171B;
  --rack:       #1C2126;
  --rack-hi:    #242A31;
  --edge:       #2E353E;
  --edge-soft:  rgba(241,243,242,.09);

  /* ink */
  --chalk:      #F1F3F2;
  --chalk-dim:  rgba(241,243,242,.68);
  --chalk-mute: rgba(241,243,242,.58);   /* .46 was 4.1:1 on --rack, under AA */

  /* state — each has exactly one meaning */
  --work:       #FF4A1C;
  --work-soft:  rgba(255,74,28,.14);
  --rest:       #2FD39B;
  --rest-soft:  rgba(47,211,155,.14);
  --prep:       #FFC53D;
  --prep-soft:  rgba(255,197,61,.14);
  --strike:     #FF5A6E;

  --display:'Archivo', system-ui, sans-serif;
  --body:'Inter Tight', system-ui, -apple-system, sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --r:10px; --r-lg:16px; --r-pill:999px;
  --shell:1360px;
  --bar-h:60px;
}

/* ==========================================================================
   §2  BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--floor);color:var(--chalk);
  font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
h1,h2,h3,h4,p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
img{display:block;max-width:100%;}
iframe{border:0;display:block;}
::selection{background:var(--work);color:#fff;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:var(--edge);border-radius:99px;}
:focus-visible{outline:2px solid var(--prep);outline-offset:2px;border-radius:4px;}

.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--prep);color:#111;padding:12px 22px;font-weight:700;}
.skip:focus{left:0;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ==========================================================================
   §3  TYPE
   ========================================================================== */
.dsp{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 112;letter-spacing:-.02em;line-height:1;text-transform:uppercase;}
.dsp-wide{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 125;letter-spacing:-.01em;line-height:.9;font-variant-numeric:tabular-nums;}

.t-xl{font-size:clamp(1.9rem,4.5vw,2.9rem);}
.t-lg{font-size:1.25rem;}
.t-md{font-size:1rem;}
.t-sm{font-size:.875rem;}
.t-xs{font-size:.78rem;}

.tag{font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 78;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-mute);}
.num{font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 118;font-variant-numeric:tabular-nums;}
.dim{color:var(--chalk-dim);} .mute{color:var(--chalk-mute);}
.c-work{color:var(--work);} .c-rest{color:var(--rest);} .c-prep{color:var(--prep);}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ==========================================================================
   §4  CHROME — top bar (desktop) / tab bar (mobile)
   ========================================================================== */
.bar{position:sticky;top:0;z-index:60;height:var(--bar-h);background:rgba(20,23,27,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--edge-soft);}
.bar-in{max-width:var(--shell);margin:0 auto;height:100%;padding:0 var(--s4);display:flex;align-items:center;gap:var(--s5);}
@media(min-width:900px){.bar-in{padding:0 var(--s6);}}
.logo{display:flex;align-items:center;gap:9px;flex:none;}
.logo-mark{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--work);color:#fff;font-family:var(--display);font-weight:800;font-size:.85rem;}
.logo-txt{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 112;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;}
.nav{display:none;gap:2px;}
@media(min-width:760px){.nav{display:flex;}}
.nav a{padding:8px 14px;border-radius:var(--r);font-size:.85rem;font-weight:600;color:var(--chalk-mute);transition:color .14s,background .14s;}
.nav a:hover{color:var(--chalk);background:var(--rack);}
.nav a[aria-current="page"]{color:var(--chalk);background:var(--rack-hi);}
.bar-end{margin-left:auto;display:flex;align-items:center;gap:var(--s3);}

.tabs{position:fixed;inset:auto 0 0 0;z-index:60;display:flex;background:rgba(20,23,27,.95);backdrop-filter:blur(14px);border-top:1px solid var(--edge-soft);padding-bottom:env(safe-area-inset-bottom);}
@media(min-width:760px){.tabs{display:none;}}
.tabs a{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.68rem;font-weight:600;color:var(--chalk-mute);}
.tabs a[aria-current="page"]{color:var(--work);}
.tabs svg{width:20px;height:20px;}

.wrap{max-width:var(--shell);margin:0 auto;padding:var(--s5) var(--s4) var(--s8);}
@media(min-width:900px){.wrap{padding:var(--s6) var(--s6) var(--s8);}}
@media(max-width:759px){.wrap{padding-bottom:96px;}}

/* ==========================================================================
   §5  SECTION HEADS
   ========================================================================== */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4);}
.head h1,.head h2{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 112;text-transform:uppercase;letter-spacing:-.015em;line-height:1;}
.rule{height:1px;background:var(--edge-soft);margin:var(--s6) 0;}

/* ==========================================================================
   §6  WEEK BOARD — the home hero.
   v1 buried this inside a modal behind a "View Week" button. It is the most
   useful screen in the app, so it is now the first thing you see.
   ========================================================================== */
.board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2);}
@media(max-width:900px){
  .board{grid-auto-flow:column;grid-auto-columns:74vw;grid-template-columns:none;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s2);}
  .day{scroll-snap-align:center;}
}
.day{background:var(--rack);border:1px solid var(--edge-soft);border-radius:var(--r-lg);min-height:200px;display:flex;flex-direction:column;overflow:hidden;transition:border-color .16s,background .16s;}
.day.today{border-color:var(--work);background:linear-gradient(180deg,var(--work-soft),transparent 55%),var(--rack);}
.day-head{padding:10px 12px;border-bottom:1px solid var(--edge-soft);display:flex;align-items:baseline;justify-content:space-between;gap:6px;}
.day-name{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;}
.day.today .day-name{color:var(--work);}
.day-num{font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--chalk-mute);font-variant-numeric:tabular-nums;}
.day-body{flex:1;padding:9px;display:flex;flex-direction:column;gap:6px;transition:background .14s;}
.day-body.drag-over{background:var(--work-soft);}
.day-empty{margin:auto;font-size:.7rem;color:var(--chalk-mute);text-align:center;}

.slot{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r);background:var(--rack-hi);border-left:3px solid var(--edge);transition:transform .12s,background .16s;cursor:grab;}
.slot:hover{background:var(--edge);transform:translateX(2px);}
.slot:active{cursor:grabbing;}
.slot.morning{border-left-color:var(--prep);}
.slot.noon{border-left-color:var(--work);}
.slot.evening{border-left-color:var(--rest);}
.slot-when{font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 78;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-mute);}
.slot-name{font-size:.82rem;font-weight:600;margin-top:1px;}

/* ==========================================================================
   §7  STAT STRIP
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--edge-soft);border:1px solid var(--edge-soft);border-radius:var(--r-lg);overflow:hidden;}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,1fr);}}
.stat{background:var(--rack);padding:var(--s4);}
.stat-n{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 125;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums;}
.stat-l{margin-top:6px;font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 78;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--chalk-mute);}

/* ==========================================================================
   §8  CONTROLS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 var(--s4);border-radius:var(--r);font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 92;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;transition:background .14s,border-color .14s,color .14s,transform .08s;}
.btn:active{transform:translateY(1px);}
.btn-go{background:var(--work);color:#fff;}
.btn-go:hover{background:#FF6238;}
.btn-line{border:1px solid var(--edge);color:var(--chalk);}
.btn-line:hover{border-color:var(--chalk-mute);background:var(--rack);}
.btn-quiet{color:var(--chalk-dim);}
.btn-quiet:hover{color:var(--chalk);background:var(--rack);}
.btn-kill{border:1px solid var(--strike);color:var(--strike);}
.btn-kill:hover{background:var(--strike);color:#fff;}
.btn-sq{width:42px;padding:0;flex:none;}
.btn-lg{min-height:54px;padding:0 var(--s6);font-size:.95rem;}
.btn[disabled]{opacity:.3;pointer-events:none;}
.btn svg{width:17px;height:17px;flex:none;}

.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 78;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--edge);color:var(--chalk-mute);}
.pill-work{border-color:var(--work);color:var(--work);background:var(--work-soft);}
.pill-rest{border-color:var(--rest);color:var(--rest);background:var(--rest-soft);}
.pill-prep{border-color:var(--prep);color:var(--prep);background:var(--prep-soft);}

.chip{padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--edge);font-size:.78rem;font-weight:600;color:var(--chalk-mute);min-height:34px;transition:all .14s;}
.chip:hover{border-color:var(--chalk-mute);color:var(--chalk);}
.chip[aria-pressed="true"]{background:var(--chalk);border-color:var(--chalk);color:var(--floor);}

.field{display:block;margin-bottom:var(--s4);}
.field > .tag{display:block;margin-bottom:6px;}
.inp{width:100%;background:var(--floor);border:1px solid var(--edge);border-radius:var(--r);padding:11px 13px;font-size:.9rem;transition:border-color .14s,box-shadow .14s;}
.inp:focus{outline:none;border-color:var(--work);box-shadow:0 0 0 3px var(--work-soft);}
.inp::placeholder{color:var(--chalk-mute);}
textarea.inp{resize:vertical;min-height:72px;}
input[type=color].inp{padding:3px;height:38px;cursor:pointer;}

/* ==========================================================================
   §9  TEMPLATE TILES
   ========================================================================== */
.tiles{display:grid;grid-template-columns:1fr;gap:var(--s3);}
@media(min-width:820px){.tiles{grid-template-columns:repeat(2,1fr);}}
.tile{position:relative;background:var(--rack);border:1px solid var(--edge-soft);border-radius:var(--r-lg);padding:var(--s4);text-align:left;width:100%;display:flex;flex-direction:column;gap:var(--s3);transition:border-color .16s,background .16s,transform .12s;}
.tile:hover{border-color:var(--edge);background:var(--rack-hi);transform:translateY(-2px);}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);}
.tile-name{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 105;font-size:1.05rem;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;}
.tile-dur{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 125;font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums;}
.tile-dur small{font-size:.68rem;font-weight:700;color:var(--chalk-mute);margin-left:3px;}
.tile-acts{display:flex;gap:4px;}
.tile-strip{display:flex;gap:2px;height:6px;border-radius:99px;overflow:hidden;background:var(--floor);}
.tile-peek{display:flex;flex-direction:column;gap:3px;}
.tile-peek div{display:flex;align-items:center;gap:8px;font-size:.78rem;padding:4px 8px;border-radius:6px;background:var(--floor);}
.tile-peek b{width:5px;height:14px;border-radius:2px;flex:none;}
.tile-peek span:last-child{margin-left:auto;font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;color:var(--chalk-mute);}
.tile-strip i{display:block;height:100%;}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);font-size:.72rem;color:var(--chalk-mute);}

/* ==========================================================================
   §10  THE FLOOD — fullscreen run mode. The signature.
   ========================================================================== */
.flood{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;padding:var(--s5);text-align:center;color:#fff;background:var(--work);transition:background .35s ease;}
.flood.on{display:flex;}
.flood.is-rest{background:var(--rest);color:#0C1512;}
.flood.is-prep{background:var(--prep);color:#1A1200;}

.flood-bar{position:absolute;top:0;left:0;right:0;height:5px;background:rgba(0,0,0,.22);}
.flood-bar i{display:block;height:100%;background:rgba(255,255,255,.85);transition:width .3s linear;}
.flood.is-rest .flood-bar i,.flood.is-prep .flood-bar i{background:rgba(0,0,0,.55);}

.flood-x{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.18);display:grid;place-items:center;color:inherit;}
.flood-x svg{width:22px;height:22px;}
.flood-top{position:absolute;top:20px;left:20px;display:flex;gap:8px;align-items:center;}
.flood-badge{font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 78;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:99px;background:rgba(0,0,0,.2);}

.flood-name{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 100;text-transform:uppercase;letter-spacing:-.01em;line-height:1;font-size:clamp(1.5rem,6.5vw,3.2rem);margin-bottom:var(--s2);}
.flood-n{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 125;font-variant-numeric:tabular-nums;line-height:.82;letter-spacing:-.03em;font-size:clamp(6.5rem,32vw,18rem);}
.flood-next{margin-top:var(--s4);font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 78;font-size:clamp(.78rem,2.2vw,1rem);letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.22);padding:6px 14px;border-radius:99px;}
.flood-img{width:clamp(84px,20vw,140px);aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg);margin-bottom:var(--s3);border:3px solid rgba(255,255,255,.28);}

.flood-ctl{display:flex;gap:var(--s4);margin-top:var(--s5);align-items:center;}
.fbtn{width:58px;height:58px;border-radius:50%;background:rgba(0,0,0,.2);display:grid;place-items:center;color:inherit;transition:background .14s,transform .08s;}
.fbtn:hover{background:rgba(0,0,0,.32);}
.fbtn:active{transform:scale(.94);}
.fbtn svg{width:25px;height:25px;}
.fbtn-main{width:84px;height:84px;background:rgba(255,255,255,.94);color:var(--work);}
.flood.is-rest .fbtn-main{color:var(--rest);background:#0C1512;}
.flood.is-prep .fbtn-main{color:#7A5B00;}
.fbtn-main svg{width:34px;height:34px;}

.flood-rail{position:absolute;bottom:0;left:0;right:0;display:flex;gap:3px;padding:12px;overflow-x:auto;justify-content:center;}
.flood-rail i{flex:none;height:4px;width:20px;border-radius:99px;background:rgba(255,255,255,.32);}
.flood-rail i.done{background:rgba(255,255,255,.9);}
.flood-rail i.now{background:#fff;width:34px;}
.flood.is-rest .flood-rail i,.flood.is-prep .flood-rail i{background:rgba(0,0,0,.25);}
.flood.is-rest .flood-rail i.done,.flood.is-prep .flood-rail i.done{background:rgba(0,0,0,.55);}
.flood.is-rest .flood-rail i.now,.flood.is-prep .flood-rail i.now{background:#0C1512;}

@keyframes pulse{0%,100%{transform:scale(1);}45%{transform:scale(1.05);}}
.flood-n.tick{animation:pulse .45s ease;}

/* ==========================================================================
   §11  STAGE ROWS + BUILDER
   ========================================================================== */
.srow{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:var(--s3);padding:10px var(--s3);border-radius:var(--r);background:var(--rack);border-left:3px solid var(--edge);margin-bottom:5px;}
.srow.now{background:var(--rack-hi);border-left-color:var(--work);}
.srow.done{opacity:.4;}
.srow-i{font-family:var(--display);font-weight:700;font-size:.74rem;color:var(--chalk-mute);font-variant-numeric:tabular-nums;}
.srow-n{font-size:.87rem;font-weight:600;}
.srow-d{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 118;font-size:.92rem;font-variant-numeric:tabular-nums;}

.brow{display:grid;grid-template-columns:24px 1fr 70px 34px 34px;gap:var(--s2);align-items:center;padding:6px;border-radius:var(--r);background:var(--rack);margin-bottom:5px;}
.brow.in-group{background:var(--floor);}
.bgrip{cursor:grab;color:var(--chalk-mute);display:grid;place-items:center;height:34px;}
.bgrip:active{cursor:grabbing;}
.brow .inp{padding:8px 10px;font-size:.85rem;}
.brow-more{grid-column:1/-1;display:none;gap:var(--s2);padding:6px 2px 2px;align-items:center;}
.brow.open .brow-more{display:flex;}
.dragging{opacity:.35;}
.drop-target{outline:2px dashed var(--work);outline-offset:2px;}

.gbox{border:1px solid var(--edge);border-radius:var(--r-lg);padding:var(--s3);margin-bottom:var(--s3);background:rgba(255,255,255,.02);}
.gbox-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);}

.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--s2);margin-bottom:var(--s4);}
.preset{padding:10px 12px;border-radius:var(--r);border:1px solid var(--edge);text-align:left;transition:border-color .14s,background .14s;}
.preset:hover{border-color:var(--work);background:var(--work-soft);}
.preset b{display:block;font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 92;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;}
.preset span{display:block;font-size:.69rem;color:var(--chalk-mute);margin-top:1px;}

/* ==========================================================================
   §12  LIBRARY
   ========================================================================== */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:var(--s4);}
.shelf{margin-bottom:var(--s7);}
.shelf-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--edge-soft);}
.vid{text-align:left;width:100%;display:block;transition:transform .14s;}
.vid:hover{transform:translateY(-3px);}
.vthumb{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--rack);border:1px solid var(--edge-soft);position:relative;display:grid;place-items:center;}
.vthumb img{width:100%;height:100%;object-fit:cover;}
.vid:hover .vthumb{border-color:var(--edge);}
.vthumb-ph{color:var(--chalk-mute);}
.vplay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.38);opacity:0;transition:opacity .14s;}
.vid:hover .vplay{opacity:1;}
.vplay span{width:44px;height:44px;border-radius:50%;background:var(--work);display:grid;place-items:center;color:#fff;}
.vtitle{margin-top:9px;font-size:.85rem;font-weight:600;line-height:1.3;}
.vmeta{margin-top:3px;font-size:.72rem;color:var(--chalk-mute);display:flex;align-items:center;gap:6px;}
/* 54 of 56 videos have no link. They must not look like the 2 that do. */
.vid.unlinked .vthumb{border-style:dashed;background:repeating-linear-gradient(45deg,var(--rack),var(--rack) 9px,var(--floor) 9px,var(--floor) 18px);}
.vid.unlinked .vtitle{color:var(--chalk-mute);}
.vid.unlinked:hover .vplay{opacity:0;}

.watch{display:grid;grid-template-columns:1fr;gap:var(--s5);}
@media(min-width:1050px){.watch{grid-template-columns:minmax(0,1fr) 330px;}}
.screen{aspect-ratio:16/9;background:#000;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--edge);}
.screen iframe{width:100%;height:100%;}
.uprow{display:flex;gap:10px;padding:8px;border-radius:var(--r);width:100%;text-align:left;transition:background .14s;align-items:flex-start;}
.uprow:hover{background:var(--rack);}
.uprow.on{background:var(--rack-hi);}
.uprow .vthumb{width:128px;flex:none;}
.uprow .vtitle{margin-top:0;}

/* ==========================================================================
   §13  MODAL / TOAST / EMPTY
   ========================================================================== */
.veil{position:fixed;inset:0;z-index:200;background:rgba(8,10,12,.76);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:var(--s4);}
.veil.on{display:flex;}
.sheet{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;background:var(--rack);border:1px solid var(--edge);border-radius:var(--r-lg);padding:var(--s5);box-shadow:0 30px 70px -20px rgba(0,0,0,.9);}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--edge-soft);}
.sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s5);}

.toast{position:fixed;left:50%;bottom:var(--s5);z-index:400;transform:translate(-50%,14px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:9px;background:var(--chalk);color:var(--floor);padding:11px var(--s4);border-radius:var(--r);font-weight:700;font-size:.85rem;transition:opacity .2s,transform .2s;}
.toast.on{opacity:1;transform:translate(-50%,0);}
@media(max-width:759px){.toast{bottom:74px;}}

.empty{padding:var(--s7) var(--s4);text-align:center;border:1px dashed var(--edge);border-radius:var(--r-lg);color:var(--chalk-mute);}
.empty p{margin-top:var(--s3);font-size:.85rem;}

/* helpers */
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);}
.grow{flex:1;min-width:0;}
.stack>*+*{margin-top:var(--s4);}
.hide{display:none!important;}