/* ── TYPE TOKENS (LOCKED) — every page resolves --font/--disp/--mono from here ──*/
:root{
  --font:'SF Pro Text','SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;
  --disp:'SF Pro Display','SF Pro Text',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'SF Pro Text','SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ── CRITICAL THEME (PRE-PAINT) ───────────────────────────────────────────────
   These MUST live in this linked stylesheet (not JS-injected) so the correct theme
   paints on the first frame. support.js sets html.cb-dark before paint; these rules
   supply the matching dark ink tokens and body backgrounds. Moved verbatim out of
   studio-theme.js's injected `css` array — do NOT re-add them there (single source). */
html.cb-dark{color-scheme:dark;}
html.cb-dark:root{--ink:#ffffff;--ink2:#e2e9f5;--ink3:#b6c3d9;--ink4:#7e8ca6;
  --surface:#151922;--canvas:#0e1117;--field:rgba(140,160,200,.12);
  --hair:rgba(255,255,255,.1);--hair2:rgba(160,190,255,.09);--line:rgba(160,190,255,.13);
  --e-card:0 1px 2px rgba(0,0,0,.4),0 20px 44px -26px rgba(0,0,0,.7);
  --e-pop:0 1px 2px rgba(0,0,0,.4),0 24px 54px -24px rgba(0,0,0,.8);
  --glass:linear-gradient(177deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  --card:#1b2029;
  --glass-rail:linear-gradient(170deg,rgba(255,255,255,.14),rgba(255,255,255,.06));}
/* the studio grid — same lattice in both themes, only the ink changes */
html:not(.cb-dark) body{background-color:#fdfeff !important;background-image:
  radial-gradient(1100px 520px at 50% -80px,rgba(255,255,255,.98),rgba(255,255,255,0) 70%),
  linear-gradient(rgba(10,90,200,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(10,90,200,.07) 1px,transparent 1px),
  linear-gradient(rgba(10,90,200,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(10,90,200,.035) 1px,transparent 1px),
  radial-gradient(900px 600px at 85% 110%,rgba(10,113,227,.05),transparent 70%),
  radial-gradient(760px 520px at 8% 100%,rgba(217,138,0,.04),transparent 70%) !important;
  background-size:auto,110px 110px,110px 110px,22px 22px,22px 22px,auto,auto !important;background-attachment:fixed !important;}
html.cb-dark body{background-color:#0d1017 !important;background-image:
  radial-gradient(1100px 520px at 50% -80px,rgba(30,44,72,.5),rgba(13,16,23,0) 70%),
  linear-gradient(rgba(90,150,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(90,150,255,.07) 1px,transparent 1px),
  linear-gradient(rgba(90,150,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(90,150,255,.035) 1px,transparent 1px),
  radial-gradient(900px 600px at 85% 110%,rgba(10,113,227,.08),transparent 70%),
  radial-gradient(760px 520px at 8% 100%,rgba(217,138,0,.055),transparent 70%) !important;
  background-size:auto,110px 110px,110px 110px,22px 22px,22px 22px,auto,auto !important;background-attachment:fixed !important;}

body{font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased;}

/* Content Bug Studio — extracted DS classes.
   Every recipe the Studio Kit documents lives here, not in page style attributes.
   Pixel-identical to the inline values they replace. */
.pv-shell{max-width:var(--cb-page-max);padding:18px var(--cb-page-pad) 40px;display:flex;flex-direction:column;gap:12px;}
.pv-head{display:flex;align-items:center;gap:12px;padding:8px 10px 14px 10px;border-bottom:1px solid var(--hair2);flex-wrap:wrap;}
.pv-headtext{display:flex;flex-direction:column;gap:8px;flex:1;min-width:220px;}
.pv-eyebrow{font:600 10px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink4);}
.pv-title{font:600 clamp(24px,2.2vw,30px)/1.1 var(--disp);letter-spacing:-.025em;color:var(--ink);}
.pv-sub{font:400 12px/1.45 var(--font);color:var(--ink3);}
.pv-live{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.pv-live .dot{width:6px;height:6px;border-radius:50%;background:var(--green2);box-shadow:0 0 6px var(--green2);flex:0 0 auto;}
.pv-sectionlabel{font:600 10px/1 var(--font);letter-spacing:.06em;color:var(--ink4);}
.pv-sectiontitle{font:600 14px/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink);}
.pv-card{padding:16px 17px;border-radius:18px;display:flex;flex-direction:column;gap:10px;}
.pv-metric{padding:16px 17px;border-radius:18px;display:flex;flex-direction:column;gap:4px;}
.pv-metric b{font:600 22px/1 var(--disp);letter-spacing:-.02em;color:var(--ink);}
.pv-divider{height:1px;background:var(--hair2);}
.pv-rowlabel{font:500 12px/1.3 var(--disp);color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pv-mono{font:500 9px/1 var(--mono);color:var(--ink4);}
.code-input{letter-spacing:.42em;text-align:center;font:500 18px/1.2 var(--mono);padding:12px 10px;border:1px solid rgba(16,40,90,.12);background:rgba(255,255,255,.85);border-radius:12px;color:var(--ink);width:100%;box-sizing:border-box;}
.cb-dropbox{display:grid;place-items:center;gap:4px;padding:20px 14px;border-radius:16px;border:1.5px dashed rgba(10,132,255,.4);background:rgba(10,132,255,.05);text-align:center;font:500 12px/1.4 var(--disp);color:var(--ink2);}
.bar{height:6px;border-radius:16px;background:rgba(16,40,90,.1);overflow:hidden;min-width:140px;flex:1;}
.bar span{display:block;height:100%;border-radius:16px;background:linear-gradient(90deg,#3a9bff,#0a84ff);}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font:500 10px/1 var(--disp);background:linear-gradient(160deg,#3a9bff,#0a6fe0);flex:0 0 auto;}
html.cb-dark .code-input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff;}
html.cb-dark .bar{background:rgba(255,255,255,.12);}
html.cb-dark .meter{background:rgba(255,255,255,.12);}
html.cb-dark .cb-dropbox{background:rgba(10,132,255,.1);border-color:rgba(120,180,255,.45);color:#fff;}

/* extracted component recipes — verbatim from the pages that owned them */
.tgl{position:relative;width:40px;height:24px;border-radius:16px;background:rgba(16,40,90,.14);transition:background .18s;flex:0 0 auto;border:0;cursor:pointer;}
.tgl::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(16,40,90,.3);transition:transform .2s var(--spring);}
.tgl.on{background:linear-gradient(180deg,#37c26e,#2aa85c);}
.tgl.on::after{transform:translateX(16px);}
.knob{display:flex;align-items:center;gap:6px;cursor:ns-resize;user-select:none;touch-action:none;}
.kdial{position:relative;width:34px;height:34px;border-radius:50%;flex:0 0 auto;background:linear-gradient(180deg,#ffffff,#e6ecf5);border:1px solid rgba(16,40,90,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 12px -5px rgba(16,40,90,.45);}
.kdial .tick{position:absolute;left:50%;top:3px;width:2px;height:10px;border-radius:0;background:var(--blue2);transform:translateX(-50%);}
.knob .kt{display:flex;flex-direction:column;gap:2px;align-items:flex-start;}
.knob .kv{font:500 10px/1 var(--mono);color:var(--ink);}
.knob .kl{font:500 9px/1 var(--disp);letter-spacing:.11em;color:var(--ink4);}
.ktitle{font:600 14px/1.25 var(--disp);letter-spacing:-.015em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;display:block;}
.srow .sv,.sv{font:400 12px/1.4 var(--font);color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0;}
.fld label{font:600 10px/1 var(--font);letter-spacing:.05em;color:var(--ink4);}
.fld input,.fld select{border:1px solid rgba(16,40,90,.12);outline:none;background:rgba(255,255,255,.85);border-radius:12px;padding:0 13px;height:40px;font:400 12px/1.2 var(--font);color:var(--ink);width:100%;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;}
.fld input:focus,.fld select:focus{border-color:rgba(10,132,255,.55);box-shadow:0 0 0 3px rgba(10,132,255,.13);}
.btn-danger{color:#fff !important;background:linear-gradient(180deg,#ff6b6e,#e5484d) !important;border-color:transparent !important;}
html.cb-dark .kdial{background:linear-gradient(180deg,#2a3244,#161c29);border-color:rgba(255,255,255,.14);}
html.cb-dark .tgl{background:rgba(255,255,255,.18);}

/* container recipes — verbatim from the pages that owned them */
.kcard{position:relative;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;}
.srow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;}
.feed{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:12px;}
.inlineerr{display:flex;align-items:flex-start;gap:6px;padding:8px 10px;border-radius:12px;font:400 10px/1.4 var(--font);color:#b3363a;background:rgba(229,72,77,.09);border:1px solid rgba(229,72,77,.28);}
.warn{display:flex;gap:8px;padding:10px 12px;border-radius:12px;font:400 10px/1.5 var(--font);color:#8a5c00;background:rgba(217,138,0,.09);border:1px solid rgba(217,138,0,.3);}
.mitem{display:flex;align-items:center;gap:8px;width:100%;height:31px;padding:0 10px;border-radius:10px;font:500 12px/1 var(--disp);color:var(--ink2);text-align:left;background:transparent;border:0;cursor:pointer;transition:background .12s,color .12s;}
.mitem:hover{background:rgba(10,132,255,.09);color:var(--blue2);}
.mdiv{height:1px;background:var(--hair2);margin:4px 8px;}

.srow,.tglrow,.feed,.opt,.choice,.tok{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);}
html.cb-dark .srow,html.cb-dark .tglrow,html.cb-dark .feed,html.cb-dark .opt,html.cb-dark .choice,html.cb-dark .tok{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);}

.cc-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:10px 2px 12px;border-bottom:1px solid var(--hair2);}
.cc-toolbar > .btn:last-child{margin-left:auto;}


/* ── TABLES (locked) ──────────────────────────────────────────────────────────
   A table row is a GRID, never a flex row. Header and rows share one --tbl-cols
   template. RULE: exactly ONE flexible track (the name column, minmax(0,1fr));
   every other track is a FIXED px width — never auto/fr, because auto resolves
   independently in each row container and a row carrying a badge would size
   differently from one that doesn't. Every row emits every cell (empty span when
   a cell has no content) so track counts always match.
   Usage:  <div class="tbl head" style="--tbl-cols:14px minmax(0,1fr) auto 64px 72px 110px"> … </div>
           <button class="tbl row" style="--tbl-cols: (same)"> … one child per track … </button> */
.tbl{display:grid;grid-template-columns:var(--tbl-cols,minmax(0,1fr));align-items:center;gap:8px;width:100%;}
.tbl.head{padding:0 10px 6px;border-bottom:1px solid var(--hair2);margin-bottom:2px;}
.tbl.row{padding:8px 10px;border-radius:10px;cursor:pointer;text-align:left;background:none;border:0;color:var(--ink);}
.tbl.row:hover{background:rgba(10,132,255,.07);}
.tbl.row.sel{background:rgba(10,132,255,.12);}
.tbl.row.dropt{background:rgba(10,132,255,.16);box-shadow:inset 0 0 0 1px rgba(10,132,255,.45);}
.tbl .num{text-align:right;}
.tbl .badges{display:flex;align-items:center;gap:6px;}
.colh{background:none;border:0;cursor:pointer;font:600 10px/1 var(--font);letter-spacing:.05em;color:var(--ink4);padding:0;white-space:nowrap;text-align:left;}
.colh:hover{color:var(--blue2);}
.colh.num{text-align:right;}


/* ── VIEW PRIMITIVES (LOCKED) ─────────────────────────────────────────────────
   There is ONE way to render each view. Pages compose these; they never invent
   their own grid, row or tile recipe.

   .view-list   table  — grid rows sharing one --tbl-cols template (see .tbl)
   .view-grid   icons  — auto-fill cards, 200px min
   .view-media  media  — auto-fill 16:9 cards, 260px min
   .view-cols   column browser — horizontal chain of 208px panes             */
.view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.view-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.view-list{display:flex;flex-direction:column;gap:2px;}
.view-cols{display:flex;overflow-x:auto;}
/* the one card recipe every grid/media view uses */
.tile{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:16px;cursor:pointer;text-align:left;width:100%;
  background:var(--glass);border:1px solid var(--hair2);
  transition:transform .16s cubic-bezier(.22,1,.36,1),border-color .16s;}
.tile:hover{transform:translateY(-2px);border-color:rgba(10,132,255,.4);}
.tile.sel{border-color:var(--blue2);box-shadow:0 0 0 2px rgba(10,132,255,.25);}
.tile.dropt{border-color:var(--blue2);background:rgba(10,132,255,.1);}
/* the one preview recipe — 16:10 in grid view, 16:9 in media view */
.prev{position:relative;border-radius:12px;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;
  background:rgba(140,160,200,.12);color:var(--ink4);}
.view-media .prev{aspect-ratio:16/9;}
.prev .ext{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--ink4);}
.prev.folder{background:rgba(10,132,255,.07);}
.prev.folder .ext{color:var(--blue2);}
.prev .stamp{position:absolute;right:6px;bottom:6px;font:500 9px/1 var(--mono);color:#fff;padding:2px 6px;border-radius:999px;background:rgba(15,23,42,.6);}
.prev .flag{position:absolute;left:6px;top:6px;font-size:10px;color:#b57500;}
.tile .cap{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 2px 2px;}
.tile .cap b{font:600 12px/1.2 var(--disp);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tile .cap span{font:400 10px/1.3 var(--font);color:var(--ink4);}


/* ── THE HERO (LOCKED — there is exactly one) ─────────────────────────────────
   <div class="pv-hero">
     <div class="pv-hero-nav">  ‹ ›  breadcrumb / crumb / crumb            </div>
     <div class="pv-hero-main">
       <div class="pv-herotext"> title · sub </div>
       <div class="pv-heroctl">  search · views · filters · actions </div>
     </div>
   </div>                                                                     */
.pv-hero{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box;
  padding:8px 10px 14px 10px;border-bottom:1px solid var(--hair2);margin:0;}
.pv-hero-nav{display:flex;align-items:center;gap:6px;height:28px;}
.crumb,.pv-hero-nav .crumb{background:none;border:0;cursor:pointer;padding:0 4px;font:500 12px/1 var(--disp);color:var(--ink2);}
.crumb:hover,.pv-hero-nav .crumb:hover{color:var(--blue2);}
.crumb.on,.pv-hero-nav .crumb.on{color:var(--ink);}
.sep,.pv-hero-nav .sep{font-size:9px;color:var(--ink4);}
.pv-hero-main{display:flex;align-items:flex-end;gap:12px;flex-wrap:nowrap;}
.pv-herotext{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0;}
.pv-heroctl{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:nowrap;flex:0 0 auto;}
@media (max-width:900px){.pv-hero-main{flex-wrap:wrap;}.pv-heroctl{flex-wrap:wrap;margin-left:0;}}
.pv-title{font:600 clamp(24px,2.2vw,30px)/1.1 var(--disp);letter-spacing:-.025em;color:var(--ink);margin:0;}
.pv-sub{font:400 12px/1.45 var(--font);color:var(--ink3);margin:0;}
.tbtn{width:32px;height:32px;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;color:var(--ink2);cursor:pointer;background:var(--glass);border:1px solid var(--hair2);flex:0 0 auto;box-sizing:border-box;}
.tbtn sf-icon{display:block;line-height:1;}
.tbtn:hover{color:var(--blue2);border-color:rgba(10,132,255,.4);}
.tbtn:disabled{opacity:.4;cursor:default;}
.ginput{height:28px;border-radius:999px;border:1px solid var(--hair2);background:var(--field);padding:0 10px;
  font:400 9px/1 var(--font);letter-spacing:.04em;color:var(--ink);outline:none;width:160px;}
.ginput:focus{border-color:rgba(10,132,255,.5);}


/* ── RAIL ITEM (LOCKED) — used by the Studio Rail component ──────────────────*/
.cb-railit{display:flex;align-items:center;gap:9px;height:34px;min-height:34px;padding:0 11px;border-radius:11px;
  font:500 12px/1 var(--disp);color:var(--ink2);background:none;border:0;cursor:pointer;text-align:left;width:100%;}
.cb-railit sf-icon{font-size:12px;color:var(--ink3);flex:0 0 auto;}
.cb-railit:hover{background:rgba(10,132,255,.07);color:var(--blue2);}
.cb-railit.on{background:rgba(10,132,255,.12);color:var(--blue2);}
.cb-railit.on sf-icon{color:var(--blue2);}
.cb-railit.dropt{background:rgba(10,132,255,.18);box-shadow:inset 0 0 0 1px rgba(10,132,255,.45);}
.cb-railit .count{margin-left:auto;font:500 9px/1 var(--mono);color:var(--ink4);}


/* THE PILL — one size, one appearance, both themes. Geometry is locked in studio-theme.js;
   this is the recipe pages used to declare locally. Pages must not redeclare it. */
.kpill{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;
  height:18px;padding:0 8px;border-radius:999px;font:500 9px/1 var(--mono);letter-spacing:.06em;
  background:var(--glass);border:1px solid var(--hair2);color:var(--ink2);white-space:nowrap;}
.kpill.kp-blue.kp-blue{background:rgba(10,132,255,.1);border-color:rgba(10,132,255,.3);color:var(--blue2);}
.kpill.kp-green.kp-green{background:rgba(30,142,90,.1);border-color:rgba(30,142,90,.3);color:#1e8e5a;}
.kpill.kp-amber.kp-amber{background:rgba(181,117,0,.1);border-color:rgba(181,117,0,.3);color:#b57500;}
html.cb-dark .kpill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#e8eefb;}
html.cb-dark .kpill.kp-blue{background:rgba(10,132,255,.22);border-color:rgba(90,170,255,.45);color:#9ecbff;}
html.cb-dark .kpill.kp-green{background:rgba(30,190,120,.2);border-color:rgba(60,210,140,.42);color:#7ee2b0;}
html.cb-dark .kpill.kp-amber{background:rgba(240,180,40,.2);border-color:rgba(240,180,40,.42);color:#f2c66a;}

/* section header — the header of a block INSIDE a page. Never the page hero. */
.sec-head{display:flex;align-items:center;gap:8px;min-height:24px;}
.sec-head h2,.sec-head .sec-title{font:600 14px/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink);margin:0;}

input.pv-title{border:0;outline:none;background:var(--field);border-radius:10px;padding:4px 10px;}
input.pv-sub{border:0;outline:none;background:var(--field);border-radius:10px;padding:4px 8px;}

/* ── CONTROLS (LOCKED) — measured from the live Content Studio build ─────────*/
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 17px;border-radius:14px;
  white-space:nowrap;font:500 12px/1 var(--disp);color:var(--ink2);border:1px solid var(--hair2);background:var(--card);
  box-shadow:0 8px 16px -12px rgba(16,40,90,.4);cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),color .15s,filter .15s;}
.btn:hover{color:var(--blue2);} .btn:active{transform:scale(.96);}
.btn-sm{height:32px;padding:0 12px;border-radius:11px;font:500 12px/1 var(--disp);}
.btn-primary{color:#fff;background:linear-gradient(180deg,#3a9bff,#0a84ff);border-color:transparent;
  box-shadow:0 12px 26px -10px rgba(10,132,255,.55),inset 0 1.4px 0 rgba(255,255,255,.5);}
.btn-primary:hover{color:#fff;filter:brightness(1.05);}
.kpill,.chip,.mchip{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 12px;
  border-radius:999px;font:500 12px/1 var(--disp);color:var(--ink2);background:var(--card);border:1px solid var(--hair2);cursor:pointer;}
.kpill.on,.chip.on,.mchip.on{background:linear-gradient(180deg,#3a9bff,#0a84ff);border-color:transparent;color:#fff;}
.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:var(--field);border:1px solid var(--hair2);}
.seg button{height:30px;padding:0 13px;border-radius:9px;font:500 12px/1 var(--disp);color:var(--ink3);background:none;border:0;cursor:pointer;}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 4px 10px -6px rgba(16,40,90,.5);}

/* ── GLASS CONTAINER (LOCKED) — the project-view glass, used by every page ───*/
.pvglass{background:var(--glass);-webkit-backdrop-filter:saturate(200%) blur(22px);backdrop-filter:saturate(200%) blur(22px);
  border:1px solid var(--hair2);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 44px -24px rgba(16,40,90,.45);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .2s;}

/* ── ON-MEDIA CHROME (LOCKED) — toolboxes, docks, menus, islands ─────────────
   The sheer recipe that rides over video and imagery. Was copy-pasted into eight
   pages; it lives here now so every page moves together. */
.vglass{background:rgba(255,255,255,.26);-webkit-backdrop-filter:saturate(190%) blur(20px);backdrop-filter:saturate(190%) blur(20px);
  border:1px solid var(--hair2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 26px -12px rgba(0,0,0,.35);}

/* ── RIGHT SHELF (LOCKED) — the standard container for forms and details ─────
   Measured off FrameLab. Pages set their own top/right/width; the material,
   radius and shadow are fixed here. */
.rshelf{background:var(--glass-rail);-webkit-backdrop-filter:saturate(200%) blur(26px);backdrop-filter:saturate(200%) blur(26px);
  border:1px solid var(--hair2);border-radius:16px;bottom:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 70px -30px rgba(10,25,60,.55);
  display:flex;flex-direction:column;}

/* ══ APPLE LIQUID GLASS (LOCKED) ═══════════════════════════════════════════════
   Real iOS-style 3-D frosted glass for the studio-index-shell rail tiles (.dk),
   the active app (.dk.on) and the header buttons (.hbtn). These classes ship
   flat from the DS bundle (no backdrop-filter); this layer adds the blur, the
   layered translucent fill, the inset top highlight, the depth shadow and the
   spring micro-interactions — light = bright glass, dark = graphite glass.
   !important beats the bundle's flat class rules (element inline styles only set
   radius/font/padding, which we intentionally leave alone). */
.dk,.hbtn{
  -webkit-backdrop-filter:saturate(200%) blur(20px);backdrop-filter:saturate(200%) blur(20px);
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.40)) !important;
  border:1px solid rgba(255,255,255,.60) !important;color:var(--ink2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -10px 18px -14px rgba(16,40,90,.18),0 8px 20px -10px rgba(16,40,90,.30) !important;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s var(--ease),background .18s var(--ease),color .16s !important;}
.dk:hover,.hbtn:hover{
  transform:translateY(-2px) !important;color:var(--blue2) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.58)) !important;
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,1),inset 0 -10px 18px -14px rgba(16,40,90,.2),0 14px 30px -12px rgba(16,40,90,.42) !important;}
.dk:active,.hbtn:active{transform:scale(.94) !important;}
/* active app tile — premium blue liquid glass */
.dk.on{
  background:linear-gradient(180deg,#4aa3ff,#0a7aff) !important;border-color:rgba(255,255,255,.45) !important;color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 22px -8px rgba(10,120,255,.62) !important;}
.dk.on:hover{transform:translateY(-2px) !important;color:#fff !important;filter:brightness(1.05);
  background:linear-gradient(180deg,#57abff,#0f83ff) !important;}
.dk.on sf-icon,.dk.on img{filter:none;}
.dockdiv{background:linear-gradient(90deg,transparent,rgba(16,40,90,.14),transparent) !important;height:1px;width:60%;margin:2px auto;}

/* dark = translucent Apple graphite glass */
html.cb-dark .dk,html.cb-dark .hbtn{
  background:linear-gradient(180deg,rgba(70,78,92,.55),rgba(44,50,62,.38)) !important;
  border:1px solid rgba(255,255,255,.14) !important;color:var(--ink2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -10px 18px -14px rgba(0,0,0,.5),0 10px 24px -12px rgba(0,0,0,.65) !important;}
html.cb-dark .dk:hover,html.cb-dark .hbtn:hover{
  color:#fff !important;background:linear-gradient(180deg,rgba(86,96,114,.66),rgba(54,62,78,.48)) !important;
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.22),0 16px 32px -12px rgba(0,0,0,.72) !important;}
html.cb-dark .dk.on{background:linear-gradient(180deg,#3a9bff,#0a6fe0) !important;border-color:rgba(160,200,255,.4) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 26px -8px rgba(10,110,235,.6) !important;}
html.cb-dark .dockdiv{background:linear-gradient(90deg,transparent,rgba(160,190,255,.22),transparent) !important;}