/* ══════════════════════════════════════════════════════════════════════
   THE BUILDER FRAME (2026-09-28) — the builder's outer chrome in the same
   grammar as the dashboard / Upgrades / Help (css/app-console.css) and the
   Showcase (engine MOTION.md): glass, champagne as the only light, serif
   names over mono readouts, one pill button system. Loaded LAST in
   admin.html; it restyles the frame only (top bar, drawer, list cards,
   status pills, title, action row) — the editing panels inside the tabs are
   untouched. Fixes on the way: the Showcases drawer started at top:0 and
   slid OVER the studio bar and its logo; live status was green.
   ══════════════════════════════════════════════════════════════════════ */
:root{--bf-serif:'Bodoni 72',Didot,'Cormorant Garamond',Georgia,serif;--bf-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --bf-glass:rgba(12,16,20,.9);--bf-edge:rgba(255,255,255,.14);--bf-top:72px;--bf-ease:cubic-bezier(.16,1,.3,1)}

/* the studio bar: glass, readable, pill actions */
body .studio-top{background:rgba(9,12,17,.86);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--bf-edge);position:relative;z-index:95}
body .studio-top .studio-place{font:400 22px/1 var(--bf-serif);letter-spacing:-.01em;color:#fff}
body .studio-who{gap:10px}
body .studio-who span{font:500 10px var(--bf-mono);letter-spacing:.14em;color:rgba(255,255,255,.55)}
body .studio-who :is(a,button){display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--bf-edge);background:none;color:rgba(255,255,255,.8);
  font:600 9.5px var(--bf-mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
body .studio-who :is(a,button):hover{border-color:rgba(var(--accent-rgb),.6);color:var(--accent);background:rgba(var(--accent-rgb),.06)}

/* the Showcases drawer: below the studio bar, never over it */
body .admin-rail{top:var(--bf-top);background:var(--bf-glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-right:1px solid var(--bf-edge);
  transition:transform .42s var(--bf-ease),left .2s ease,visibility 0s .42s}
body .app.drawer-open .admin-rail{transition:transform .5s var(--bf-ease),left .2s ease}
body .drawer-scrim{top:var(--bf-top)}
body .admin-rail .rail-head{position:relative;padding-bottom:10px;margin-bottom:4px}
body .admin-rail .rail-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--accent),transparent 70%)}
body .admin-rail .eyebrow{font:600 10px var(--bf-mono)!important;letter-spacing:.22em!important;color:#fff!important}
body .drawer-tab{border-radius:0 14px 14px 0;background:var(--bf-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--bf-edge);color:rgba(255,255,255,.72)}
body .drawer-tab:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.55)}

/* list cards: glass, serif names, a lift on hover */
body .sc-item{border-radius:14px;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);transition:border-color .25s,transform .35s var(--bf-ease),background .25s}
body .sc-item:hover{border-color:rgba(var(--accent-rgb),.5);transform:translateY(-1px);background:rgba(var(--accent-rgb),.05)}
body .sc-item.active{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
body .sc-item .sc-body b{font:400 16px/1.15 var(--bf-serif);letter-spacing:-.01em;font-weight:400}
body .sc-item .sc-thumb{border-radius:8px}
body .sc-item small{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:500 9px var(--bf-mono);letter-spacing:.1em;color:rgba(255,255,255,.55)}

/* status: one vocabulary, champagne for live (was green) */
body .pill{font:600 8.5px var(--bf-mono);letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.75)}
body .pill.published{color:var(--accent);border-color:rgba(var(--accent-rgb),.55)}
body .pill.pending{color:#FFC43C;border-color:rgba(255,196,60,.5)}
body .pill.rejected{color:#ff8a7a;border-color:rgba(255,138,122,.5)}
body .ed-source{border-radius:999px;padding:4px 10px;font:600 9px var(--bf-mono)!important;letter-spacing:.16em!important}
body .ed-source.cloud{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}

/* the title: the Showcase's name in the serif, not capitals */
body #edTitle{font:400 clamp(30px,3.4vw,46px)/1.02 var(--bf-serif)!important;letter-spacing:-.02em!important;text-transform:none!important;color:#fff}

/* one button system: pills, mono caps; champagne only for the consequential action */
body .ed-actions{gap:8px}
body .ed-actions .btn{min-height:40px;padding:0 16px;border-radius:999px;font:600 9.5px var(--bf-mono);letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s,transform .12s var(--bf-ease)}
body .ed-actions .btn:active{transform:scale(.97)}
body .ed-actions .btn-ghost{border:1px solid var(--bf-edge);background:none;color:rgba(255,255,255,.82)}
body .ed-actions .btn-ghost:hover{border-color:rgba(var(--accent-rgb),.6);color:var(--accent);background:rgba(var(--accent-rgb),.06)}
body .ed-actions .btn-accent{background:var(--accent);border:1px solid var(--accent);color:#0a0a0a}
body .ed-actions #btnDelete{color:rgba(255,255,255,.6)!important;padding:0 12px}
body .ed-actions #btnDelete:hover{color:#ff8a7a!important;border-color:rgba(255,138,122,.6)}
body .ed-actions .btn svg{width:15px;height:15px}
body .admin-rail .btn{border-radius:999px}
body .admin-rail .btn-accent{font:600 9.5px var(--bf-mono)!important;letter-spacing:.16em;text-transform:uppercase}

@media (max-width:760px){:root{--bf-top:0px}}
@media (prefers-reduced-motion:reduce){body .admin-rail,body .sc-item{transition:none}}

/* the Summary card's name and the studio tabs, in the same grammar */
body .ov-title{font:400 clamp(24px,2.4vw,32px)/1.08 var(--bf-serif)!important;letter-spacing:-.015em!important;text-transform:none!important}
body .studio-tabs button,body .studio-tabs a{border-radius:999px;font:600 9.5px var(--bf-mono);letter-spacing:.16em;text-transform:uppercase}
/* the card's readout: tier · client, never run together */
body .sc-item small>span:not(.pill):empty{display:none}
body .sc-item small>span:not(.pill):not(:empty)~span:not(.pill):not(:empty)::before{content:"·";margin:0 7px;color:rgba(255,255,255,.35)}
body .sc-item small>.pill{margin-right:9px}

/* every list row's ✕ says what it does (Michael, 2026-09-28: "I see how to add but not delete") */
body .r-del{display:inline-flex;align-items:center;gap:6px;width:auto!important;min-width:0;padding:0 12px 0 10px!important;min-height:34px;border-radius:999px!important;
  border:1px solid rgba(255,255,255,.18)!important;background:none!important;color:rgba(255,255,255,.72)!important;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
body .r-del::after{content:"Remove";font:600 9px var(--bf-mono);letter-spacing:.16em;text-transform:uppercase}
body .r-del:hover{border-color:rgba(255,138,122,.65)!important;color:#ff8a7a!important;background:rgba(255,138,122,.08)!important}
body .r-del svg{width:14px;height:14px}

/* HIDDEN MEANS HIDDEN (client walk, 2026-09-29). admin.html patched [hidden] one
   element at a time (.rail > a, .ed-tab, .ed-preview …) because author display
   rules beat the UA's [hidden]; the ones it missed leaked — Unpublish and Live
   showed on a client's never-published draft. One rule for the whole builder. */
body [hidden] { display: none !important; }