/* /status/ — the MYB WhatsApp Status on the site (functions/status/index.js, /js/status2.js). Built on /css/myb2.css (its
   tokens, .lt, .box, .sec): the circles row, the archive grid, and the full-screen viewer (black, progress bars, tap zones).
   The viewer is the floating layer, so its controls are glass; the content layer stays solid. No all-caps, no emoji. */

/* ------------------------------------------------------------------ the big circle */
.st-hero{ display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; text-align:left; margin-top:4px; }
.st-hero:hover{ background:var(--card); }
.st-hero__av, .st-empty__ic{ position:relative; width:74px; height:74px; flex:none; display:grid; place-items:center; }
.st-hero__av img, .st-empty__ic img{ width:62px; height:62px; border-radius:50%; box-shadow:0 0 0 .5px var(--hair); }
.st-ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.st-ring circle{ fill:none; stroke:var(--red); stroke-width:3.6; stroke-linecap:round; }
.st-hero.seen .st-ring circle, .st-empty .st-ring circle{ stroke:var(--ink-3); }
.st-hero__txt{ flex:1; min-width:0; display:grid; gap:2px; }
.st-hero__t{ font:600 19px/24px var(--display); letter-spacing:-.015em; }
.st-hero__m{ font:400 15px/20px var(--sans); color:var(--ink-2); }
.st-hero__go{ flex:none; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 15px 0 12px; border-radius:999px; background:var(--red-fill); color:#fff;
  font:600 15px/1 var(--sans); }
.st-hero__go .i{ width:16px; height:16px; }

/* ------------------------------------------------------------------ the row of circles (the last 24 hours) */
.st-row{ margin:14px calc(var(--gutter) * -1) 0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding:0 var(--gutter); scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%); }
.st-row::-webkit-scrollbar{ display:none; }
.st-row__list{ display:flex; gap:14px; list-style:none; margin:0; padding:4px var(--gutter) 6px; width:max-content; }
.st-row__list li{ scroll-snap-align:start; }
.st-c{ display:grid; justify-items:center; gap:6px; width:76px; }
.st-c__ring{ width:76px; height:76px; border-radius:50%; padding:3px; background:conic-gradient(from 200deg,#FF6A3D,var(--red) 45%,#B40F16 75%,#FF6A3D);
  transition:transform 160ms var(--ease); }
.st-c:active .st-c__ring{ transform:scale(.95); }
.st-c.seen .st-c__ring{ background:var(--hair); }
.st-c__pic{ position:relative; display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; background:var(--sunk-2); box-shadow:0 0 0 2.5px var(--bg); }
.st-c__pic img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.st-c__play{ position:absolute; right:7px; bottom:7px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.55); color:#fff; }
.st-c__play .i{ width:11px; height:11px; margin-left:1px; }
.st-c__t{ font:500 13px/16px var(--sans); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.st-c.seen .st-c__t{ color:var(--ink-3); }

.st-empty{ display:grid; justify-items:center; gap:4px; padding:28px 20px 26px; text-align:center; margin-top:4px; }
.st-empty h2{ margin:10px 0 0; font:700 20px/25px var(--display); letter-spacing:-.015em; text-wrap:balance; }
.st-empty p{ margin:0; font:400 16px/22px var(--sans); color:var(--ink-2); max-width:38ch; }

/* ------------------------------------------------------------------ the archive (older updates) */
.st-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; list-style:none; margin:0; padding:0; }
@media (min-width:600px){ .st-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } }
@media (min-width:1100px){ .st-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; } }
.st-t{ position:relative; display:block; aspect-ratio:9/16; border-radius:12px; overflow:hidden; background:var(--sunk-2); }
.st-t img{ width:100%; height:100%; object-fit:cover; transition:transform 300ms var(--ease); }
@media (hover:hover){ .st-t:hover .st-t__img{ transform:scale(1.03); } }
.st-t--fit .st-t__bg{ position:absolute; inset:-12%; width:124%; height:124%; filter:blur(16px) brightness(.62) saturate(1.2); transform:none!important; }
.st-t--fit .st-t__img{ position:relative; object-fit:contain; }
.st-t::after{ content:""; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(transparent,rgba(0,0,0,.55)); pointer-events:none; }
.st-t__when{ position:absolute; z-index:1; left:8px; bottom:7px; font:600 12px/16px var(--sans); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.st-t__play{ position:absolute; z-index:1; right:7px; top:7px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.45); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.st-t__play .i{ width:13px; height:13px; margin-left:1px; }
.st-t__none{ position:absolute; inset:0; display:grid; place-items:center; padding:10px; font:500 13px/17px var(--sans); color:var(--ink-2); text-align:center; }

/* ------------------------------------------------------------------ the updates in words (search engines and screen readers read these too) */
.st-words summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; padding:0 16px; list-style:none; cursor:pointer;
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--card-shadow); font:500 16px/22px var(--sans); color:var(--ink); }
.st-words summary::-webkit-details-marker{ display:none; }
.st-words summary .i{ width:18px; height:18px; color:var(--ink-3); transform:rotate(90deg); transition:transform 200ms var(--ease); }
.st-words[open] summary{ border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:none; }
.st-words[open] summary .i{ transform:rotate(-90deg); }
.st-words ol{ list-style:none; margin:0; padding:0 0 4px; background:var(--card); border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--card-shadow); }
.st-words li{ position:relative; padding:11px 16px; font:400 15px/21px var(--sans); color:var(--ink); }
.st-words li::before{ content:""; position:absolute; top:0; left:16px; right:0; height:.5px; background:var(--hair-2); }
.st-words time{ display:block; font:500 13px/17px var(--sans); color:var(--ink-2); margin-bottom:1px; }
.st-words a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:3px; }
.st-words a:hover{ text-decoration-color:var(--red-text); }

/* ------------------------------------------------------------------ the viewer */
html.sv-open, html.sv-open body{ overflow:hidden; }
.sv{ position:fixed; inset:0; z-index:300; background:#000; color:#fff; display:flex; align-items:center; justify-content:center;
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; animation:sv-in 260ms var(--ease); }
@keyframes sv-in{ from{ opacity:0; transform:scale(.98); } }
.sv__frame{ position:relative; width:100%; height:100%; overflow:hidden; background:#000; transition:transform 220ms var(--ease), opacity 220ms; }
.sv.drag .sv__frame{ transition:none; }
@media (min-width:768px){
  .sv{ background:rgba(10,10,12,.96); }
  .sv__frame{ width:auto; height:min(92vh,920px); aspect-ratio:9/16; border-radius:16px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); }
}
/* the picture never takes the touch: a hold to pause on an iPhone would open its Save / Copy / Share menu on the image */
.sv__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; pointer-events:none; -webkit-user-drag:none; }
.sv__shade{ position:absolute; inset:0 0 auto 0; height:150px; background:linear-gradient(rgba(0,0,0,.5),transparent); pointer-events:none; z-index:1; }
.sv__bars{ position:absolute; z-index:3; top:calc(8px + env(safe-area-inset-top)); left:8px; right:8px; display:flex; gap:3px; }
@media (min-width:768px){ .sv__bars{ top:10px; } }
.sv__bar{ flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.35); overflow:hidden; }
.sv__bar i{ display:block; height:100%; width:0; background:#fff; border-radius:inherit; }
.sv__bar.done i{ width:100%; }
.sv__head{ position:absolute; z-index:3; top:calc(18px + env(safe-area-inset-top)); left:12px; right:4px; display:flex; align-items:center; gap:10px; transition:opacity 180ms; }
@media (min-width:768px){ .sv__head{ top:20px; } }
.sv__head img{ width:34px; height:34px; border-radius:50%; flex:none; }
.sv__who{ flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; font:600 15px/20px var(--sans); text-shadow:0 1px 2px rgba(0,0,0,.35); white-space:nowrap; overflow:hidden; }
.sv__when{ font:400 13px/18px var(--sans); color:rgba(255,255,255,.78); }
.sv__btn{ width:44px; height:44px; flex:none; display:grid; place-items:center; color:#fff; border-radius:50%; }
.sv__btn .i{ width:24px; height:24px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.sv__btn:active{ background:rgba(255,255,255,.15); }
.sv__foot{ position:absolute; z-index:3; left:0; right:0; bottom:0; padding:60px 16px calc(18px + env(safe-area-inset-bottom)); display:grid; gap:12px; justify-items:start;
  background:linear-gradient(transparent,rgba(0,0,0,.72) 46%); transition:opacity 180ms; pointer-events:none; }
.sv__foot:empty{ display:none; }
.sv__cap{ margin:0; max-height:32vh; overflow:auto; font:400 16px/22px var(--sans); white-space:pre-line; text-shadow:0 1px 2px rgba(0,0,0,.4); pointer-events:auto; overscroll-behavior:contain; }
.sv__link{ pointer-events:auto; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 16px; border-radius:999px; font:600 15px/1 var(--sans); color:#fff; }
.sv__link .i{ width:18px; height:18px; }
.sv.hold .sv__head, .sv.hold .sv__foot, .sv.hold .sv__bars{ opacity:0; }
.sv__spin{ position:absolute; z-index:2; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation:sv-spin 800ms linear infinite; }
@keyframes sv-spin{ to{ transform:rotate(360deg); } }
.sv__gone{ position:absolute; z-index:2; inset:0; display:grid; place-items:center; padding:24px; text-align:center; font:500 16px/22px var(--sans); color:rgba(255,255,255,.8); }
.sv__nav{ display:none; }
@media (min-width:768px) and (hover:hover){
  .sv__nav{ display:grid; position:absolute; z-index:4; top:50%; width:46px; height:46px; margin-top:-23px; border-radius:50%; place-items:center; }
  .sv__nav .i{ width:22px; height:22px; }
  .sv__nav--prev{ right:calc(50% + min(92vh,920px) * .28125 + 22px); }
  .sv__nav--next{ left:calc(50% + min(92vh,920px) * .28125 + 22px); }
  .sv__nav[disabled]{ opacity:.35; pointer-events:none; }
  .sv__x{ position:absolute; z-index:4; top:18px; right:18px; }
}
@media (prefers-reduced-motion: reduce){ .sv{ animation:none; } .sv__frame{ transition:none; } }