/* =====================================================================
   Screen layer demo, lab draft (2026-09-28, second pass). Not deployed:
   deploy.cmd leaves site\lab\ out.

   Sits on top of ../../assets/site.css and takes the page's colours,
   fonts and radii from its tokens. The drawn ViceFree UI (the warning box,
   the outline, the chip and the window cover) takes its own colours from
   ViceFree/crates/sentry/src/curtain.rs, aliased to the site's tokens where
   the hex is the same. Those do not change with the page under them.

   Layout: three small scenes side by side (.sd-row) and a wide one under
   them (.sd-wide). Under 1000 px the three sit in a row you swipe, with
   the next one peeking in. Each window is its own size container (sd),
   and its insides are sized for a small window: bold pictures and page
   text larger than a real page would have it at that scale.

   No inline styles anywhere, since the site's CSP refuses them. demo.js
   only sets transform, opacity, visibility and positions via the CSSOM.
   ===================================================================== */

:root{
  /* ViceFree's product colours (curtain.rs, COLORREF 0x00BBGGRR) */
  --cc-bg:var(--curtain);        /* BG #2E2F33: the warning box and the window cover */
  --cc-fg:#E8EAED;               /* FG: normal text */
  --cc-frame:#8B939C;            /* DIM: button frames */
  --cc-red-text:#FF6259;         /* RED_TEXT: the title and the stopwatch */
  --cc-red:var(--red);           /* RED #E5484D: the "!" disc and the accent bar */
  --cc-button:#45474D;           /* BUTTON */
  --cc-black:var(--mark-bg);     /* LOGO_BLACK #0B0F17: the dim and the chip */
  --cc-gold:var(--mark-lock);    /* GOLD #C89B45: the outline */
  --cc-cream:#DDEFFC;            /* the chip's timer (OUTLINE-OPTIONS.html, option H) */
  --cc-font:"Segoe UI",system-ui,-apple-system,sans-serif;
  --cc-sym:"Segoe UI Symbol","Segoe UI",system-ui,-apple-system,sans-serif;

  /* the drawn pages */
  --pg-bar:var(--ill-a);         /* placeholder text lines */
  --pg-bar-lo:var(--ill-c);
  --pg-bar-hi:var(--ill-d);
  --pg-icon:var(--ill-soft);
}

/* ================================================================= page */
.sd-defs{position:absolute; width:0; height:0; overflow:hidden}
.sd-draft{margin-left:auto; font-size:14px; font-weight:800; padding:6px 14px; border-radius:999px; background:var(--gold-chip); color:var(--gold-ink); line-height:1.3}
.sd{padding-bottom:var(--sec)}

.sd-row{
  margin-top:clamp(32px, 4vw, 56px);
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(18px, 2vw, 28px);
}
.sd-scene{min-width:0; display:flex; flex-direction:column}
.sd-wide{margin-top:clamp(44px, 5vw, 72px)}
.sd-name{
  margin:0 0 12px; font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.0625rem, 1rem + .3vw, 1.3125rem); line-height:1.4; letter-spacing:0; color:var(--gold-ink);
}
.sd-card{
  container:sd / inline-size;
  background:var(--panel); border:1px solid var(--line); border-radius:clamp(18px, 2.4vw, 30px);
  padding:clamp(8px, 1vw, 12px);
}
.sd-wide .sd-card{padding:clamp(8px, 1.8vw, 22px)}
.sd-bar{flex:1; margin-top:12px; padding:0 4px; display:flex; flex-direction:column; justify-content:space-between; gap:12px}
.sd-wide .sd-bar{flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 24px}
.sd-cap{font-size:16px; line-height:1.5; color:var(--body)}
.sd-wide .sd-cap{flex:1 1 22em; font-size:17px}
.sd-dots{display:none}

/* Narrower than three across: a row you swipe, snapping to each scene, the next one peeking in.
   It scrolls inside itself; the page never scrolls sideways (the row's negative margins only reach
   the wrap's own padding). */
@media (max-width:999px){
  .sd-row{
    display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 8px; scroll-padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .sd-row::-webkit-scrollbar{display:none}
  .sd-row > .sd-scene{flex:0 0 min(360px, 88%); scroll-snap-align:start}
  .sd-dots{display:flex; justify-content:center; gap:8px; margin-top:4px}
  .sd-dots i{display:block; width:8px; height:8px; border-radius:50%; background:var(--line-strong); opacity:.35; transition:opacity .2s ease}
  .sd-dots i.is-on{opacity:1; background:var(--gold-ink)}
}

.sd-notes{margin-top:clamp(56px, 7vw, 96px); max-width:880px; background:var(--panel); border:1px dashed var(--line-strong); border-radius:24px; padding:clamp(18px, 2.6vw, 30px)}
.sd-notes h2{font-size:clamp(1.3rem, 1.15rem + .55vw, 1.75rem); line-height:1.22}
.sd-notes ul{margin:14px 0 0; padding-left:1.2em; display:flex; flex-direction:column; gap:8px; font-size:16px; line-height:1.55; color:var(--body)}
.sd-notes code{font-size:.92em}

/* ================================================================= the browser window */
/* --pt is one of the product's points (curtain.rs sizes everything in points), scaled with the
   window so the 300 x 92 pt warning box takes about 80% of a small window's width: about .95 px
   in a desktop scene, .8 px on a phone. At a real 100% display a point is 1.33 px. */
.sd-stage{position:relative}
.sd-win{
  --pt:clamp(.66px, .26cqi, 1.05px);
  position:relative; display:grid; grid-template-rows:auto minmax(0, 1fr); grid-template-columns:minmax(0, 1fr);
  aspect-ratio:3 / 4; background:var(--surface); border:1px solid var(--ill-b); border-radius:10px;
  overflow:hidden; box-shadow:var(--shadow-sm); -webkit-user-select:none; user-select:none;
}
.sd-chrome{grid-row:1; grid-column:1; background:var(--ill-chrome); border-bottom:1px solid var(--foot)}
.sd-tabs{display:flex; align-items:flex-end; gap:4px; height:26px; padding-left:6px; background:var(--foot)}
.sd-tab{
  display:flex; align-items:center; gap:6px; height:21px; width:46%; max-width:200px; padding:0 8px;
  background:var(--ill-chrome); border-radius:7px 7px 0 0; min-width:0;
}
.sd-fav{flex:none; width:11px; height:11px; border-radius:3px}
.sd-fav-v{background:#3D4452}
.sd-fav-p{background:#C57A52}
.sd-fav-t{background:#12161D}
.sd-fav-s{background:#4F7F86}
.sd-tabt{flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; font-weight:700; line-height:1; color:var(--ink)}
.sd-tabx,.sd-plus{flex:none; width:10px; height:10px; color:var(--body)}
.sd-plus{align-self:center; margin-left:2px}
.sd-wc{margin-left:auto; align-self:stretch; display:flex}
.sd-wc svg{width:28px; height:100%; padding:0 9px; color:var(--body)}
.sd-tool{display:flex; align-items:center; gap:8px; height:28px; padding:0 8px}
.sd-tool > svg{flex:none; width:13px; height:13px; color:var(--body)}
.sd-tool > svg.is-off{color:var(--ill-soft)}
.sd-url{flex:1; display:flex; align-items:center; height:19px; margin-left:2px; padding:0 10px; border-radius:999px; background:var(--surface); border:1px solid var(--line)}
.sd-url i{display:block; width:40%; height:5px; border-radius:3px; background:var(--pg-bar)}

.sd-view{grid-row:2; grid-column:1; position:relative; overflow:hidden; background:var(--surface); transition:opacity .235s ease}
.sd-view.is-dark{background:#12161D}
.sd-page{position:absolute; left:0; right:0; top:0; will-change:transform}
.sd-under,.sd-over{pointer-events:none}
.sd-under{position:absolute; inset:0; overflow:hidden}
.sd-over{grid-row:2; grid-column:1; z-index:6; position:relative; overflow:hidden; transition:opacity .235s ease}
.sd-fol{position:absolute; left:0; top:0; width:100%; will-change:transform}
.sd-win.is-rewind .sd-view,.sd-win.is-rewind .sd-over{opacity:0}

/* ================================================================= shared bits of the drawn pages */
.sd-ph{position:relative; border-radius:10px; overflow:hidden; background:var(--ill-img)}
.sd-pic{display:block; width:100%; height:100%}
.sd-ln{display:block; height:7px; border-radius:4px; background:var(--pg-bar)}
.sd-ln.lo{background:var(--pg-bar-lo)}
.sd-ln.hi{background:var(--pg-bar-hi)}
.sd-ln.w40{width:40%}.sd-ln.w50{width:50%}.sd-ln.w60{width:60%}.sd-ln.w70{width:70%}
.sd-av{flex:none; display:block; width:24px; height:24px; border-radius:50%}
.sd-av.c1{background:#B5C4B1}.sd-av.c2{background:#D8B98C}.sd-av.c3{background:#9FB4C7}
.sd-av.c4{background:#C9A6A0}.sd-av.c5{background:#A9A3C4}.sd-av.c6{background:#C7C29A}

/* ================================================================= 1. a video site */
.vs{padding:8px 12px 40px; font-family:var(--sans); color:var(--ink)}
.vs-top{display:flex; align-items:center; gap:10px; height:32px}
.vs-logo{flex:none; width:26px; height:18px}
.vs-search{flex:1; display:flex; align-items:center; gap:7px; height:26px; padding:0 10px; border:1px solid var(--line); border-radius:999px}
.vs-search svg{flex:none; width:12px; height:12px; color:var(--pg-icon)}
.vs-search .sd-ln{width:40%; background:var(--pg-bar-lo)}
.vs-chips{display:flex; gap:6px; margin:8px 0 12px; overflow:hidden}
.vs-chips b{flex:none; padding:4px 10px; border-radius:8px; background:var(--sand); font-size:11.5px; font-weight:800; line-height:1.3}
.vs-chips b.is-on{background:var(--ink); color:#FFFFFF}
.vs-list{display:flex; flex-direction:column; gap:14px}
.vs-item .sd-ph{aspect-ratio:16 / 9}
.vs-dur{position:absolute; right:6px; bottom:6px; padding:3px 5px; border-radius:4px; background:rgba(11,15,23,.82); color:#FFFFFF; font-size:11px; font-weight:800; line-height:1}
.vs-meta{display:flex; gap:9px; margin-top:8px}
.vs-txt{flex:1; min-width:0}
.vs-title{display:block; font-size:14px; font-weight:800; line-height:1.25}
.vs-sub{display:block; margin-top:3px; font-size:11.5px; font-weight:600; line-height:1.3; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ================================================================= 2. a photo feed */
.pf{padding:4px 0 40px; font-family:var(--sans); color:var(--ink)}
.pf-top{display:flex; align-items:center; justify-content:space-between; height:34px; padding:0 13%}
.pf-logo{width:22px; height:22px}
.pf-icons{display:flex; gap:12px}
.pf-icons svg{width:17px; height:17px; color:var(--ink)}
.pf-stories{display:flex; justify-content:center; gap:9px; padding:6px 0 14px}
.pf-stories .sd-av{width:30px; height:30px; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px #D98B5F}
.pf-post{width:74%; margin:0 auto 20px}
.pf-head{display:flex; align-items:center; gap:7px; height:30px}
.pf-head b{font-size:13px; font-weight:800; line-height:1}
.pf-time{font-size:12px; font-weight:600; color:var(--body)}
.pf-dots{margin-left:auto; width:16px; height:16px; color:var(--ink)}
.pf-text{margin:2px 0 8px; font-size:14.5px; font-weight:700; line-height:1.3}
.pf-post .sd-ph{aspect-ratio:1 / 1; border-radius:6px}
.pf-acts{display:flex; gap:10px; margin:8px 0 4px}
.pf-acts svg{width:18px; height:18px; color:var(--ink)}
.pf-acts .pf-save{margin-left:auto}
.pf-likes{font-size:12.5px; font-weight:800; line-height:1.3}

/* ================================================================= 3. a text feed, dark */
.tf{padding-bottom:40px; background:#12161D; font-family:var(--sans); color:#E7EAF0}
.tf-tabs{display:flex; height:36px; border-bottom:1px solid #252C37}
.tf-tabs span{flex:1; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color:#8A94A6}
.tf-tabs span.is-on{color:#E7EAF0; box-shadow:inset 0 -3px 0 #6E86A6}
.tf-post{padding:11px 12px 10px; border-bottom:1px solid #252C37}
.tf-head{display:flex; align-items:center; gap:7px; min-width:0}
.tf-head .sd-av{width:28px; height:28px}
.tf-head b{font-size:13.5px; font-weight:800; line-height:1.2}
.tf-head span:last-child{min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; font-weight:600; color:#8A94A6}
.tf-text{margin:7px 0 8px; font-size:14px; font-weight:600; line-height:1.4}
.tf-pic{aspect-ratio:16 / 9; margin-bottom:8px}
.tf-quote{margin-bottom:8px; padding:8px; border:1px solid #2F3744; border-radius:12px}
.tf-qhead .sd-av{width:20px; height:20px}
.tf-qhead b{font-size:12.5px}
.tf-qhead{margin-bottom:7px}
.tf-quote .sd-ph{aspect-ratio:16 / 10}
.tf-acts{display:flex; justify-content:space-between; padding-right:10%}
.tf-acts span{display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#8A94A6}
.tf-acts svg{width:14px; height:14px}

/* ================================================================= 4. a social feed with a Reels row */
.sf{
  --tile:150px;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr); gap:0 24px;
  padding:16px 20px 60px; background:var(--ill-c); font-family:var(--sans); color:var(--ink);
}
.sf-col{grid-column:2}
.sd-view.is-feed{background:var(--ill-c)}
/* the side rails stay put while the feed scrolls, as they do on a real feed */
.sf-rail{position:absolute; top:22px; width:min(230px, calc((100% - 688px) / 2)); display:flex; flex-direction:column; gap:16px; pointer-events:none}
.sf-left{left:20px}
.sf-right{right:20px}
.sf-nav{display:flex; align-items:center; gap:10px}
.sf-nav b{flex:none; display:block; width:24px; height:24px; border-radius:8px; background:var(--ill-b)}
.sf-card{margin-bottom:14px; padding:12px 14px; background:var(--surface); border-radius:12px; box-shadow:0 1px 2px rgba(11,15,23,.06)}
.sf-head{display:flex; align-items:center; gap:9px}
.sf-head .sd-av{width:34px; height:34px}
.sf-who{display:flex; flex-direction:column}
.sf-who b{font-size:14.5px; font-weight:800; line-height:1.2}
.sf-who span{font-size:12px; font-weight:600; color:var(--body)}
.sf-dots{margin-left:auto; width:18px; height:18px; color:var(--body)}
.sf-text{margin:8px 0 10px; font-size:15px; font-weight:600; line-height:1.4}
.sf-post .sd-ph{aspect-ratio:16 / 9; border-radius:8px}
.sf-acts{display:flex; justify-content:space-around; margin-top:8px; padding-top:8px; border-top:1px solid var(--line)}
.sf-acts span{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--body)}
.sf-acts svg{width:16px; height:16px}
.sf-rh{display:flex; align-items:center; gap:8px}
.sf-rh > svg:first-child{width:22px; height:22px; color:var(--ink)}
.sf-rh b{font-size:16px; font-weight:800; line-height:1}
/* the row's viewport bleeds to the card's edges; the track slides inside it */
.sf-rv{position:relative; overflow:hidden; margin:10px -14px 0; padding:3px 14px}
.sf-track{position:relative; display:flex; gap:8px; will-change:transform}
.sf-tile{position:relative; flex:none; width:var(--tile)}
.sf-tile .sd-ph{aspect-ratio:9 / 16; border-radius:10px}
.sf-cap,.sf-views{position:absolute; left:8px; right:8px; color:#FFFFFF; font-weight:800; text-shadow:0 1px 3px rgba(11,15,23,.7)}
.sf-cap{bottom:28px; font-size:12.5px; line-height:1.25}
.sf-views{bottom:8px; display:flex; align-items:center; gap:3px; font-size:12px; line-height:1}
.sf-views svg{width:12px; height:12px}
/* each reel's own menu button, in its top right corner; the chip takes the top left */
.sf-more{
  position:absolute; right:5px; top:5px; display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; background:rgba(11,15,23,.45); color:#FFFFFF;
}
.sf-more svg{width:15px; height:15px}
.sf-more.is-hover{background:rgba(11,15,23,.62)}
.sf-more.is-down{background:rgba(11,15,23,.78); transform:scale(.86)}
/* Not interested: the clip gives way to the feed's plain note, centred, clear of where the
   pointer lets go of the menu */
.sf-gone{
  position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 12px; border-radius:10px; background:var(--sand); border:1px solid var(--line);
  color:var(--body); font-size:12.5px; font-weight:700; line-height:1.4; text-align:center; opacity:0; visibility:hidden;
}
/* the feed's menu, opened from a tile's three dots: under the button, right aligned with it */
.sf-pops{position:absolute; left:0; top:0; width:100%; height:100%; z-index:4; pointer-events:none; will-change:transform}
.sf-pop{position:absolute; left:0; top:0}
.sf-menu{
  position:absolute; right:5px; top:31px; display:flex; flex-direction:column; min-width:128px; padding:4px;
  border-radius:9px; background:var(--surface); box-shadow:0 8px 20px rgba(11,15,23,.26), 0 0 0 1px rgba(11,15,23,.07);
  transform-origin:100% 0; opacity:0; visibility:hidden;
}
.sf-mi{display:flex; align-items:center; gap:7px; height:26px; padding:0 8px; border-radius:6px; font-size:12.5px; font-weight:700; line-height:1; color:var(--ink); white-space:nowrap}
.sf-mi svg{flex:none; width:14px; height:14px; color:var(--body)}
.sf-mi.is-hover{background:var(--sand)}
.sf-mi.is-down{background:var(--line)}
.sf-next{
  position:absolute; right:10px; top:50%; z-index:2; display:grid; place-items:center; width:38px; height:38px;
  margin-top:-19px; border-radius:50%; background:var(--surface); color:var(--ink); box-shadow:0 2px 8px rgba(11,15,23,.25);
}
.sf-next svg{width:18px; height:18px}
.sf-flags{position:absolute; left:0; top:0; width:100%; height:100%; z-index:3; pointer-events:none; will-change:transform}
.sf-flag{position:absolute; left:0; top:0}
.sf-flag .sd-dim{width:100%; height:100%}
.sf-flag .sd-ring{left:-2px; top:-2px; width:calc(100% + 4px); height:calc(100% + 4px)}
.sf-flag .sd-chip{left:6px; top:6px; gap:4px; padding:2px 7px 2px 3px; font-size:10.5px}
.sf-flag .sd-chip svg{width:15px; height:15px}

/* the wide window: landscape, full chrome */
.sd-wide .sd-win{aspect-ratio:12 / 5; border-radius:12px}
.sd-wide .sd-tabs{height:32px; padding-left:10px; gap:6px}
.sd-wide .sd-tab{height:26px; width:210px; padding:0 10px; gap:8px; border-radius:9px 9px 0 0}
.sd-wide .sd-fav{width:13px; height:13px}
.sd-wide .sd-tabt{font-size:12px}
.sd-wide .sd-wc svg{width:40px; padding:0 14px}
.sd-wide .sd-tool{height:36px; gap:10px; padding:0 12px}
.sd-wide .sd-tool > svg{width:16px; height:16px}
.sd-wide .sd-url{height:23px}

/* ================================================================= ViceFree's own UI */
/* The dim over the flagged picture: the logo's near black at 55% (DIM_ALPHA 140, option H). */
.sd-dim{position:absolute; left:0; top:0; border-radius:10px; background:rgba(11,15,23,.55); opacity:0; visibility:hidden}
.pf .sd-dim{border-radius:6px}

/* The cover (wt-047, 2026-10-19): today's in page cover, as the companion draws it
   (extension-pc/src/cover_css.js: opaque ink, the gold rule, the title and its line) in the
   screen layer's words (curtain.rs WARN_TITLE, WARN_SUB). No countdown and no buttons. It sits
   where the dim was, so the scripts fade it in and out the same way. Small covers drop the line,
   as the companion's do. */
.sd-cover{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:8px;
  background:var(--cc-black); color:#EFE8DD; text-align:center; overflow:hidden;
  font-family:"Inter","Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  container-type:size; container-name:cv;
}
.cv-rule{display:block; flex:none; width:34px; height:2px; border-radius:1px; background:var(--cc-gold); opacity:.8}
.cv-title{display:block; font-size:14px; font-weight:600; line-height:1.3; letter-spacing:.01em}
.cv-sub{display:block; max-width:26ch; font-size:12px; font-weight:400; line-height:1.4; color:#D9D2C6}
@container cv (max-width:150px){
  .cv-title{font-size:12.5px}
  .cv-sub{font-size:11px}
}
@container cv (max-width:130px){
  .cv-title{font-size:11.5px; white-space:nowrap}
  .cv-sub{font-size:10.5px}
}
@container cv (max-height:105px){
  .cv-sub{display:none}
}
/* the tile's own three dots, drawn on the cover where the tile has them */
.sd-cover .sf-more{background:rgba(239,232,221,.16)}
.sd-cover .sf-more.is-hover{background:rgba(239,232,221,.26)}
.sd-cover .sf-more.is-down{background:rgba(239,232,221,.34)}

/* The gold outline, 2 px (OUTLINE_PX at 100%), drawn just outside the picture as ViceFree does.
   Option H rounds it and adds the chip. */
.sd-ring{position:absolute; left:0; top:0; border:2px solid var(--cc-gold); border-radius:12px; opacity:0; visibility:hidden}
.sd-chip{
  position:absolute; left:8px; top:8px; display:flex; align-items:center; gap:5px; padding:2px 8px 2px 3px;
  border-radius:99px; background:var(--cc-black); color:var(--cc-gold);
  font-family:var(--cc-font); font-size:11px; font-weight:600; line-height:1.5; white-space:nowrap;
}
.sd-chip svg{display:block; width:17px; height:17px}
.sd-chip i{font-style:normal; color:var(--cc-cream); font-variant-numeric:tabular-nums; margin-left:2px}

/* The warning box: WARN_PT 300 x 92 pt, laid out as curtain::warn_layout. Opaque, like the
   product's window. A 3 pt red bar on the left, the red disc, the two lines, the stopwatch on
   the right, and the two buttons along the bottom. The button labels keep 8.5 px at least. */
.sd-warn{
  position:absolute; left:0; top:0; width:calc(300 * var(--pt)); height:calc(92 * var(--pt));
  background:var(--cc-bg); color:var(--cc-fg); font-family:var(--cc-font); opacity:0; visibility:hidden;
}
.sd-warn > span{position:absolute; display:block}
.w-bar{left:0; top:0; bottom:0; width:calc(3 * var(--pt)); background:var(--cc-red)}
.w-ic{
  left:calc(11 * var(--pt)); top:calc(18 * var(--pt)); width:calc(24 * var(--pt)); height:calc(24 * var(--pt));
  border-radius:50%; background:var(--cc-red); color:#FFFFFF; text-align:center;
  font-size:calc(14.9 * var(--pt)); font-weight:800; line-height:calc(24 * var(--pt));
}
.w-title,.w-sub{
  left:calc(43 * var(--pt)); width:calc(163 * var(--pt)); height:calc(22 * var(--pt));
  font-size:calc(10.5 * var(--pt)); line-height:calc(22 * var(--pt)); white-space:nowrap; overflow:hidden;
}
.w-title{top:calc(8 * var(--pt)); font-weight:700; color:var(--cc-red-text)}
.w-sub{top:calc(30 * var(--pt)); font-weight:400}
.w-clock{
  right:calc(8 * var(--pt)); top:calc(8 * var(--pt)); width:calc(78 * var(--pt)); height:calc(44 * var(--pt));
  font-size:calc(24 * var(--pt)); font-weight:700; line-height:calc(44 * var(--pt)); text-align:center;
  color:var(--cc-red-text); font-variant-numeric:tabular-nums;
}
.w-btn{
  top:calc(60 * var(--pt)); width:calc(136.5 * var(--pt)); height:calc(24 * var(--pt));
  background:var(--cc-button); border:1px solid var(--cc-frame); color:var(--cc-fg); text-align:center;
  font-family:var(--cc-sym); font-size:max(8.5px, calc(10 * var(--pt))); font-weight:600; line-height:calc(24 * var(--pt) - 2px); white-space:nowrap;
}
.w-ok{left:calc(11 * var(--pt))}
.w-no{left:calc(155.5 * var(--pt))}

/* Strike one: the cover over the whole window (curtain::layout). Opaque charcoal, the red disc,
   the red title, the subtitle, Close it and Dismiss. */
.sd-curtain{
  grid-row:1 / -1; grid-column:1; z-index:5; display:flex; align-items:center; justify-content:center;
  background:var(--cc-bg); color:var(--cc-fg); font-family:var(--cc-font); opacity:0; visibility:hidden;
}
.c-in{display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 calc(12 * var(--pt))}
.c-ic{
  display:block; width:calc(34 * var(--pt)); height:calc(34 * var(--pt)); border-radius:50%; background:var(--cc-red); color:#FFFFFF;
  font-size:calc(21 * var(--pt)); font-weight:800; line-height:calc(34 * var(--pt));
}
.c-title{margin-top:calc(10 * var(--pt)); font-size:calc(20 * var(--pt)); font-weight:600; line-height:calc(34 * var(--pt)); color:var(--cc-red-text); white-space:nowrap}
.c-sub{font-size:calc(14 * var(--pt)); line-height:calc(23.8 * var(--pt))}
.c-btns{display:flex; gap:calc(12 * var(--pt)); margin-top:calc(20 * var(--pt))}
.c-btn{
  display:block; width:calc(96 * var(--pt)); height:calc(28 * var(--pt)); background:var(--cc-button); border:1px solid var(--cc-frame);
  font-size:max(9px, calc(11 * var(--pt))); font-weight:600; line-height:calc(28 * var(--pt) - 2px);
}
.c-btn.is-down{background:#3A3C41}
.sd-cursor{position:absolute; left:0; top:0; z-index:7; width:16px; height:24px; opacity:0; visibility:hidden; pointer-events:none}
/* the Reels row's pointer presses in place: its tip (1.5, 1.5 of 16 x 24) stays on the spot */
.sd-wide .sd-cursor{transform-origin:9.375% 6.25%}

/* ================================================================= the wide scene, narrower */
@container sd (max-width:899px){
  .sd-wide .sd-win{aspect-ratio:16 / 11}
  .sd-wide .sf{grid-template-columns:minmax(0, 1fr); padding:12px 12px 60px}
  .sd-wide .sf-rail{display:none}
  .sd-wide .sf-col{grid-column:1; width:100%; max-width:560px; margin:0 auto}
}
@container sd (max-width:599px){
  .sd-wide .sd-win{aspect-ratio:3 / 4; border-radius:10px}
  .sd-wide .sd-tabs{height:26px; padding-left:6px; gap:4px}
  .sd-wide .sd-tab{height:21px; width:46%; padding:0 8px; gap:6px; border-radius:7px 7px 0 0}
  .sd-wide .sd-fav{width:11px; height:11px}
  .sd-wide .sd-tabt{font-size:11px}
  .sd-wide .sd-wc svg{width:28px; padding:0 9px}
  .sd-wide .sd-tool{height:28px; gap:8px; padding:0 8px}
  .sd-wide .sd-tool > svg{width:13px; height:13px}
  .sd-wide .sd-url{height:19px}
  /* two tiles and a bit, wide enough for the chip and the three dots side by side; the two
     flagged ones (2nd and 3rd) fit in view together after the slide */
  .sd-wide .sf{--tile:min(120px, calc((100cqi - 40px) / 2)); padding:8px 8px 60px}
  .sd-wide .sf-card{padding:10px 10px; margin-bottom:10px}
  .sd-wide .sf-rv{margin:8px -10px 0; padding:3px 10px}
  .sd-wide .sf-head .sd-av{width:28px; height:28px}
  .sd-wide .sf-text{font-size:14px}
  .sd-wide .sf-cap{bottom:24px; left:6px; right:6px; font-size:11px}
  .sd-wide .sf-views{left:6px; bottom:6px; font-size:11px}
  /* no next arrow: the row slides by itself here, and the arrow would sit on the second clip's note */
  .sd-wide .sf-next{display:none}
  .sd-wide .sf-flag .sd-chip{left:4px; top:4px; gap:3px; padding:1px 6px 1px 2px; font-size:9.5px}
  .sd-wide .sf-flag .sd-chip svg{width:13px; height:13px}
  .sd-wide .sf-more{right:4px; top:4px; width:19px; height:19px}
  .sd-wide .sf-more svg{width:13px; height:13px}
  .sd-wide .sf-gone{padding:0 8px; font-size:11px}
  .sd-wide .sf-menu{right:4px; top:27px; min-width:0; padding:3px; border-radius:8px}
  .sd-wide .sf-mi{height:23px; gap:5px; padding:0 6px; font-size:11px}
  .sd-wide .sf-mi svg{width:12px; height:12px}
  .sd-wide .sd-cursor{width:14px; height:21px}
  .sd-wide .sf-acts span{font-size:12px}
}
@media (max-width:560px){
  .sd-bar{padding:0 2px}
}