/* ---- THE PRESS (24 Sep 2026, by era since 27 Sep 2026) ----------------
   app-disc.js: the press screen overlay and the classic page's one line.
   Prefix dc-, checked against every class in the site. Scrim and sheet
   mirror .fm-scrim / .fm-sheet by value, not by class (the .gs-row
   lesson), and sit one step above them so the designer can open over the
   room's own popup. */

.dc-wrap{position:fixed;inset:0;z-index:62}
.dc-scrim{position:absolute;inset:0;background:rgba(4,5,6,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* the sheet holds its rim and does not scroll; .dc-scroll inside it does,
   so the rim frames the sheet however far the press screen scrolls */
.dc-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100% - 32px));max-height:calc(100% - 48px);
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-panel);background:rgba(6,7,9,.96)}
.dc-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px 22px}
.dc-sheet::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--rim-grad-2);-webkit-mask:var(--rim-mask);mask:var(--rim-mask);-webkit-mask-composite:xor;mask-composite:exclude}
.dc-h{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
.dc-e{display:block;font:500 10px/1.3 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.dc-t{margin:4px 0 0;font-size:17px;font-weight:500;line-height:1.25;color:var(--t1)}
.dc-l{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--t2);max-width:60ch}
.dc-x{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--t2);
  background:rgba(255,255,255,.04);transition:color .2s var(--ease),background .2s var(--ease)}
.dc-x svg{width:12px;height:12px}
.dc-x:hover,.dc-x:focus-visible{color:var(--t1);background:rgba(255,255,255,.08);outline:none}
.dc-hb{display:flex;gap:8px;flex:none}
.dc-info{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--t2);
  background:rgba(255,255,255,.04);transition:color .2s var(--ease),background .2s var(--ease)}
.dc-info svg{width:14px;height:14px}
.dc-info:hover,.dc-info:focus-visible{color:var(--t1);background:rgba(255,255,255,.08);outline:none}
.dc-info[aria-expanded="true"]{color:var(--t1);background:rgba(255,255,255,.1)}
/* the i's paragraph runs the sheet's full width (Ramz: "it should go from
   side to side, i dont understand the negative space with no text") */
.dc-about{margin:calc(-1 * var(--s2)) 0 var(--s4);font-size:12.5px;line-height:1.55;color:var(--t2)}
.dc-about[hidden]{display:none}

.dc-body{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--s5);align-items:start}
.dc-prev{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.dc-cv{width:100%;max-width:300px;aspect-ratio:1;height:auto;display:block;cursor:grab;touch-action:none}
.dc-cv:active{cursor:grabbing}
.dc-hint{font-size:11px;color:var(--t3)}
.dc-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.035)}
.dc-seg button{font:inherit;font-size:12px;font-weight:500;color:var(--t2);padding:7px 13px;border:0;border-radius:var(--r-pill);background:transparent;cursor:pointer}
.dc-seg button[aria-pressed="true"]{color:var(--t1);background:rgba(255,255,255,.075)}
/* the part tabs over the preview (layout A, 29 Sep 2026): the width of the
   column, one press to change the part everything below belongs to */
.dc-parts{display:flex;width:100%;box-sizing:border-box}
.dc-parts button{flex:1;padding:8px 12px;font-size:13px}

.dc-side{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.dc-k{margin-top:var(--s2);font:500 10px/1.3 "SST Typewriter",ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.dc-k:first-child{margin-top:0}
.dc-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;border-radius:var(--r-card);cursor:pointer;text-align:center;
  border:1px dashed rgba(255,255,255,.2);transition:border-color .2s var(--ease),background .2s var(--ease)}
.dc-drop:hover,.dc-drop:focus-within{border-color:rgba(111,220,230,.5);background:rgba(53,201,214,.04)}
.dc-drop b{font-size:13px;font-weight:500;color:var(--t1)}
.dc-drop span{font-size:11.5px;color:var(--t3)}
.dc-tpl{align-self:flex-start;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:12px;color:var(--cyan-text)}
.dc-tpl:hover{text-decoration:underline}
.dc-warn{font-size:12px;line-height:1.45;color:var(--amber-text)}
.dc-styles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}
.dc-sw{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px 7px;border:0;border-radius:var(--r-ctrl);cursor:pointer;
  background:transparent;font:inherit;font-size:10.5px;color:var(--t3);transition:background .2s var(--ease),color .2s var(--ease)}
.dc-sw canvas{width:100%;max-width:60px;aspect-ratio:1;height:auto;display:block}
.dc-sw:hover{background:rgba(255,255,255,.035);color:var(--t2)}
.dc-sw[aria-pressed="true"]{background:rgba(255,255,255,.06);color:var(--t1);box-shadow:inset 0 0 0 1px rgba(111,220,230,.4)}
.dc-sw:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:1px}
.dc-err{min-height:18px;font-size:12px;line-height:1.45;color:var(--t2)}
.dc-acts{display:flex;justify-content:flex-end;align-items:center;gap:var(--s3)}
/* the footer sits outside the scroll, so Close and Press are always in view;
   what the press has to say sits over them, and takes no room when it is quiet */
.dc-foot{flex:none;padding:12px 22px 16px;border-top:1px solid rgba(255,255,255,.07)}
.dc-foot .dc-err{min-height:0}
.dc-foot .dc-err:not(:empty){margin-bottom:8px}
.dc-foot .dc-sub{margin-bottom:6px}
/* one part's art: a quiet dashed button and its template beside it */
.dc-up-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.dc-drop.dc-up{flex-direction:row;padding:9px 16px;border-radius:var(--r-ctrl)}
.dc-cancel{padding:9px 6px;border:0;background:none;cursor:pointer;font:inherit;font-size:13px;color:var(--t2)}
.dc-cancel:hover{color:var(--t1)}
.dc-go:disabled{opacity:.42;cursor:not-allowed}

/* DOCKED BESIDE THE PRESS (28 Sep 2026, stage 2): in the new Studio the
   press opens as itself over the blurred room (room.css .rm-pv), so the
   screen sits on its right and brings no scrim of its own. Only the sheet
   takes the pointer, so the room's Back to Studio and the blurred room
   round the press still answer. One column: the part tabs, the preview,
   its art, the ring, and the footer under them; the sheet is as tall as
   what it holds, and scrolls only on a short window. */
.dc-wrap.dc-docked{pointer-events:none}
.dc-docked .dc-scrim{display:none}
.dc-docked .dc-sheet{pointer-events:auto;left:auto;right:24px;top:72px;bottom:auto;transform:none;width:min(420px,38vw);max-height:calc(100% - 144px);
  animation:dc-dock .3s var(--ease) both}
.dc-docked .dc-body{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.dc-docked .dc-prev{gap:var(--s3)}
.dc-docked .dc-cv{max-width:164px}
/* sized so the whole press screen fits a 900 px window with nothing to
   scroll: measured, the preview at 216 and the ring at 60 left the ring
   under the footer */
.dc-docked .dc-body{gap:var(--s3)}
.dc-docked .dc-scroll{padding-bottom:14px}
.dc-docked .dc-shelf{margin-bottom:var(--s3)}
.dc-docked .dc-sw canvas{max-width:50px}
.dc-docked .dc-foot{padding:10px 22px 14px}
@keyframes dc-dock{from{opacity:0}to{opacity:1}}
/* on a phone the screen docks UNDER the press (room.css: the press is 52 px
   down and --pv-h tall), and takes the rest of the screen down to its foot */
@media (max-width:719.98px){
  .dc-docked .dc-sheet{left:8px;right:8px;width:auto;top:calc(60px + var(--pv-h,min(30vh,240px)));bottom:8px;max-height:none}
}
@media (prefers-reduced-motion:reduce){.dc-docked .dc-sheet{animation:none}}

/* THE SHELF (27 Sep 2026): the Soneium case first, then each era the
   team ticked, in era order. Each case shows its cover the way a jewel
   case does, a square with a hairline rim; the one open below is lit the
   way a picked ring swatch is. It scrolls sideways once there are many. */
.dc-shelf{display:flex;gap:var(--s2);margin:0 0 var(--s4);padding-bottom:2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.dc-shelf::-webkit-scrollbar{display:none}
.dc-case{flex:none;width:78px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px 8px;border:0;border-radius:var(--r-ctrl);
  cursor:pointer;background:transparent;font:inherit;color:var(--t2);transition:background .2s var(--ease),color .2s var(--ease)}
.dc-case canvas{width:48px;height:48px;display:block;border-radius:2px;outline:1px solid rgba(255,255,255,.12);outline-offset:-1px}
.dc-case b{font-size:11.5px;font-weight:500;color:var(--t1);line-height:1.3}
.dc-case span{font-size:10px;line-height:1.3;min-height:1.3em;color:var(--t3);white-space:nowrap}
.dc-case:hover{background:rgba(255,255,255,.035)}
.dc-case[aria-pressed="true"]{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(111,220,230,.4)}
.dc-case:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:1px}
.dc-empty i{width:48px;height:48px;display:block;border-radius:2px;box-sizing:border-box;border:1px dashed rgba(255,255,255,.18)}
.dc-empty:hover i{border-color:rgba(255,255,255,.3)}
.dc-none{margin:calc(var(--s2) * -1) 0 var(--s4);font-size:12px;color:var(--t3)}

.dc-p,.dc-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--t2);max-width:46ch}
.dc-sub{margin:0;font-size:11.5px;line-height:1.45;color:var(--t3)}
.dc-sub.dc-r{text-align:right}
.dc-tpls{margin:0;font-size:12px;color:var(--t3)}
.dc-tpls button{padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:12px;color:var(--cyan-text)}
.dc-tpls button:hover{text-decoration:underline}
.dc-sw:disabled{opacity:.42;cursor:not-allowed}
.dc-sw:disabled:hover{background:transparent;color:var(--t3)}
.dc-gap{flex:1}
.dc-play{padding:9px 0;border:0;background:none;cursor:pointer;font:inherit;font-size:13px;color:var(--cyan-text)}
.dc-play:hover{text-decoration:underline}
.dc-now{font-size:12px;color:var(--t2)}

@media (max-width:640px){
  .dc-body{grid-template-columns:1fr}
  .dc-scroll{padding:16px}
  .dc-foot{padding:12px 16px 14px}
}

/* the classic page's line, under the hero, the referral hint's idiom */
.dc-line{margin:0 0 var(--s4);font-size:12.5px;color:var(--t2)}
.dc-open{padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;color:var(--cyan-text)}
.dc-open:hover{text-decoration:underline}

/* touch (28 Sep 2026): the press's part switch, the two template links
   and the classic page's "Open the press" take the invisible 40px hit
   area of theme.css's touch block. None of them draws with ::after. */
@media (pointer:coarse){
  .dc-seg button,.dc-tpls button,.dc-open{position:relative}
  .dc-seg button::after,.dc-tpls button::after,.dc-open::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,40px);height:max(100%,40px);transform:translate(-50%,-50%)}
}