/* RECORD YOUR RIP — the switch, the setup card, the bubble, the clip bar, the
   Post to X sheet, and the profile's Clips shelf and viewer. Desktop only by
   construction: the switch lives in the Turbo row, which the phone never lays
   out (style.css:900). docs/PLAN-RECORD-RIP-UX-9SEP.md. */

/* ---- the switch, beside TURBO MODE ---- */
.turborow .rec-pair{display:flex;align-items:center;gap:10px}
/* Luke, 9 Sep: the info dot goes; it put the pair off-centre. The Turbo
   explanation is the switch's own title attribute now (record.js). */
html[data-rec-ui="1"] .turborow__side{display:none}
.rec{display:inline-flex;align-items:center;gap:8px;width:176px;height:clamp(36px,4.2vh,42px);padding:0 6px 0 14px;border-radius:12px;border:2px solid rgba(255,255,255,.72);background:var(--fill-turbo,rgba(31,36,50,.9));color:#fff;font:900 15px var(--display);font-style:italic;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:border-color .22s ease-out,box-shadow .22s ease-out}
.rec:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.rec .rec__dot{color:#fff;opacity:.55;flex:0 0 auto}
/* the knob is the Turbo knob (style.css:464-479): 44x24, a 1.5px ring, an 18px disc at top 2 / right 2,
   the same slide on `right` with the same curve, so the two move as one (Luke, 10 Sep) */
.rec .rec__knob{margin-left:auto;width:44px;height:24px;border-radius:14px;background:var(--fill-knob,rgba(11,15,24,.6));border:1.5px solid rgba(255,255,255,.5);position:relative;flex:0 0 auto;transition:background .2s,border-color .2s}
/* the disc sits at the track's exact vertical centre (Luke, 10 Sep: it read low), whatever the scale the stage applies to the row */
.rec .rec__knob i{position:absolute;top:50%;transform:translateY(-50%);right:calc(100% - 20px);width:18px;height:18px;border-radius:50%;background:#D2D2D2;box-shadow:none;transition:right .2s cubic-bezier(.22,.8,.36,1),background .2s ease-out,box-shadow .2s ease-out}
.rec[aria-checked="true"]{border-color:#F0645C;box-shadow:0 0 14px -5px rgba(240,100,92,.6)}
.rec[aria-checked="true"] .rec__dot{color:#F0645C;opacity:1}
.rec[aria-checked="true"] .rec__knob{border-color:rgba(240,100,92,.7)}
.rec[aria-checked="true"] .rec__knob i{right:2px;background:linear-gradient(180deg,#FF8A80,#C8322B);box-shadow:0 0 9px rgba(240,100,92,.85)}
.rec[data-busy="1"]{opacity:.7;pointer-events:none}
html[data-state="rip"] .rec-pair{pointer-events:none}

/* ---- the setup card: above the switch, the arrow on it ---- */
.recsetup{position:fixed;z-index:40;width:344px;background:#fff;border:3px solid var(--key);border-radius:18px;box-shadow:0 5px 0 var(--key);padding:16px 18px 16px;font-family:var(--ui);color:var(--key)}
/* the arrow is a drawn triangle under the card (an inline SVG in record.js): a rotated square
   poked its inner corner through the card above the button (Luke, 10 Sep). It overlaps the
   card's bottom border by 3px and paints that segment white, so the outline runs unbroken. */
.recsetup__arrow{position:absolute;left:50%;bottom:-15px;width:30px;height:18px;margin-left:-15px;display:block;overflow:visible;pointer-events:none}
.recsetup h3{margin:0;font:900 26px/1 var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.02em;color:var(--key)}
.recsetup h3 b{color:var(--acc);font-weight:inherit}
.recsetup p{margin:8px 0 0;font:600 13.5px/1.4 var(--ui)}
.recsetup p.recsetup__err{color:#B23A3A;font-weight:700}
.recsetup p.recsetup__hint{margin-top:10px;padding:8px 10px;border:2px solid var(--key);border-radius:10px;background:var(--yellow,#FFFE9A);font-weight:700}
.recsetup__sw{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.recsw{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 12px;border:2px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);background:#fff;font:900 15px var(--display);font-style:italic;text-transform:uppercase;letter-spacing:.04em;color:var(--key);cursor:pointer}
.recsw:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}
.recsw i{width:40px;height:22px;border-radius:12px;border:2px solid var(--key);position:relative;background:var(--acc);flex:0 0 auto}
.recsw i::after{content:"";position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.recsw[aria-checked="false"] i{background:#fff}
.recsw[aria-checked="false"] i::after{right:auto;left:2px;background:var(--key)}
.recsetup__cta{display:flex;align-items:center;gap:14px;margin:14px 0 0}
.recsetup__cta .pf-btn{flex:0 0 auto;padding:11px 26px}
.recsetup__cta a{font:800 14px var(--ui);color:#3A4354;text-decoration:underline;cursor:pointer}

/* ---- the bubble: the camera, and nothing else until hovered ---- */
.recbubble{position:fixed;z-index:39;font-family:var(--ui);touch-action:none}
.recbubble__cam{position:relative;width:92px;height:92px;border-radius:50%;border:3px solid var(--key);box-shadow:0 4px 0 var(--key);background:#0B0F18;overflow:hidden;cursor:move}
.recbubble__cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.recbubble[data-cam="0"] .recbubble__cam{width:44px;height:44px}
.recbubble[data-cam="0"] .recbubble__cam video{display:none}
.recbubble__off{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.recbubble__off svg{width:22px;height:22px}
.recbubble[data-cam="1"] .recbubble__off{display:none}
/* the grip: a clear corner handle with the diagonal arrows, on hover only (Luke, 10 Sep) */
.recbubble__wrap{position:relative}
/* the grip sits ON the ring at its upper-right (the circle's 45° point: 85.4% across, 14.6% down), in front of it, at any size (Luke, 10 Sep) */
.recbubble__grip{position:absolute;left:85.4%;top:14.6%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#fff;border:2.5px solid var(--key);box-shadow:0 2px 0 var(--key);display:none;place-items:center;color:var(--key);cursor:nesw-resize;z-index:5}
.recbubble__grip svg{width:17px;height:17px}
.recbubble[data-cam="0"] .recbubble__grip{display:none!important}
/* the strip under the circle, on hover only: STOP while a clip is recording, CAM and MIC otherwise; never both */
/* the strip hangs under the circle out of the layout flow, centred on it, so the circle never moves when it appears (Luke, 10 Sep) */
.recbubble__row{display:none;gap:6px;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;z-index:4}
/* THE HALO (Luke, 10 Sep 01:50: "when you hover over the circle, you can't click the stop button").
   The strip hangs 8px under the circle, OUTSIDE the bubble's own box, so crossing that gap ended the
   hover and the strip vanished under the cursor. An invisible pseudo-element around the circle AND
   the strip is the hover target now: near the circle opens it, moving onto a button keeps it, and
   record.js holds it open half a second after the cursor leaves. Behind the circle (z-index:-1)
   so it never takes a click or a drag meant for the video or the grip. */
.recbubble::before{content:"";position:absolute;inset:-16px -22px -58px;border-radius:30px;z-index:-1}
.recbubble:hover .recbubble__row,.recbubble[data-hover="1"] .recbubble__row{display:flex}
.recbubble:hover .recbubble__grip,.recbubble[data-hover="1"] .recbubble__grip{display:grid}
.recbubble__row button{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:2px solid var(--key);border-radius:999px;background:#fff;font:900 11px var(--display);font-style:italic;letter-spacing:.06em;text-transform:uppercase;color:var(--key);cursor:pointer;box-shadow:0 2px 0 var(--key)}
.recbubble__row button:active{transform:translateY(1px);box-shadow:0 1px 0 var(--key)}
.recbubble__row button[aria-checked="false"]{background:#0B0F18;color:#fff;text-decoration:line-through}
.recbubble__row button svg{width:12px;height:12px}
.recbubble__stop{background:#F0645C!important;color:#fff!important;border-color:var(--key)}

/* ---- R6d: THE SHARE CONTROL, AND WHEN IT IS ALLOWED TO ARRIVE -------------
   SHARE used to be hidden whenever a clip toast was up, because the two overlapped by 38.6px at
   1147x655 (measured: #prShare y 551.6-636.6, #clipbar y 598-649). Luke asked for the control to
   move above the slab instead, so it has (rips-glue.css, the .postrip__share desktop rule) and
   that hide has gone with the collision. RECORD-R2-NOTES §8 carries the numbers at both windows.
   The second half of his ask: it "should only appear when the slab has already slid down".
   The slide is a 950ms CSS transform transition started on the rAF after data-postrip="1"
   (rips-glue.css:212-217, mirrored by the .sl-settle probe at stage.css:1076-1079), and its
   transitionend was measured at 1001ms from the flag. So the reveal waits 1000ms and then fades
   in — TIME, not an event, deliberately: the clip bar's gate is the real transitionend because
   record.js is already listening for it, but the share control belongs to a page that may have no
   recorder at all (CAN_RECORD false, and the whole MutationObserver with it). A CSS delay cannot
   be switched off by a browser that will not capture a tab.
   Under prefers-reduced-motion the slab transition is removed, so there is nothing to wait for.
   TWO THINGS THIS RULE HAD TO SURVIVE, both found by measuring the computed style rather than by
   reading the file: stage.css:100 gives every direct child of body `animation:slBoot` at
   specificity (0,3,2), so `[data-brand][data-postrip] .postrip__share` (0,3,1) LOST and the
   control kept fading in with the page (measured: opacity 0.09 at 32ms, 1 by 600ms) —
   `:not([hidden])` buys the fourth attribute and is true anyway. And the keyframes may not touch
   `visibility`: stage.css:2211 hides this control with it on the Pokedex page, and an animation
   beats a normal declaration, so a `visibility:visible` frame would have put it back. */
@keyframes prshare-in{0%{opacity:0;pointer-events:none}100%{opacity:1;pointer-events:auto}}
html[data-brand="rips"][data-postrip="1"] .postrip__share:not([hidden]){animation:prshare-in 240ms ease-out 1000ms both}
@media (prefers-reduced-motion:reduce){
  html[data-brand="rips"][data-postrip="1"] .postrip__share:not([hidden]){animation-delay:0ms;animation-duration:1ms}
}

/* ---- §36: THE SITE'S ONE TOAST NEVER REACHES THE POST-RIP BUTTONS ---------
   The lead found it in FE-C2's own screenshot: the repeat-catch toast (pokedex.js dupNote →
   NOTIFY.toast → #walletToast) clipped RIP AGAIN's left cap. Measured live in the real post-rip
   state at 1147x655: toast x 387.4-759.6, #prAgain x 695.7-901.8 — 63.9px of overlap, 34.7px deep.
   At 1512x982 the same toast measures x 569.9-942.1 against a row at x 1056.8 and does not touch
   it, so this is a narrow-window collision and the fix has to hold at every width in between.
   #walletToast is centred at left:50% and 176px * --sl-s off the foot, which is empty in the lobby
   (it sits over the packs' feet, by design) but is exactly where the panel puts its action row.
   Luke's R6d rule — the foot of the stage belongs to one thing at a time — applied to the toast,
   not the buttons: on the desktop panel the toast lives in the COLUMN BETWEEN THE TWO RAILS and is
   capped to it, so it can never reach a button at any width. Both rails are constants in their own
   CSS, so the column is arithmetic, not a guess:
     pool rail  poolrail-rips.js:49   left:0;  width:min(430px,34vw)
     pull rail  style.css:1538        right:clamp(16px,2.2vw,40px); width:min(440px,38vw)
     1147x655 → column x 390-685.9 (295.9 wide); toast centred 538, capped 271.9 → x 402-674
     1512x982 → column x 430-1038.7 (608.7 wide); cap 560, so the natural 372.3 is unchanged
   Desktop only: on the phone the pool rail is display:none and the pull rail is a bottom sheet
   (poolrail-rips.js:80, rips-glue.css:459), and this arithmetic would squeeze the toast to 69px.
   This covers every toast on the panel, not just the repeat catch — SELL NOW's "Sold." line sat in
   the same place. The rail paints no box of its own (style.css:2049 background:none;border:0), so
   the cap is measured against the buttons and the type, which is what it has to be. The toast's
   height and its 176px * --sl-s foot are untouched: what it stands over on the panel is the slab,
   the same relationship it has with the packs' feet in the lobby, and it is gone in 5.2s. */
/* SUPERSEDED 14 Sep 2026 (Luke, on the post-rip panel): "that notification should be
   central under the card ... but at the bottom of the page, unless there is something
   below it (like the share clip on x thing)". The collision above was between the toast
   and RIP AGAIN *at the toast's old height* — 176px * --sl-s off the foot, which is the
   row the panel's buttons stand on. The toast now stands at the foot of the window on
   the panel (stage.css §6.34a) and is lifted only by the clip bar (§6.34b), so nothing
   is left to dodge and the toast is centred on the window again — under the slab, which
   is centred too. The column arithmetic above is the record of what it solved. */

/* ---- the clip bar after the rip: bottom-centre, tucked under the rail ---- */
/* THE SAVED TOAST (Luke, 10 Sep 01:50: "when you finish recording the video, you should get some kind
   of toast at the bottom ... an X button on the left side so you can close it ... Download the video,
   View it in your profile, Share it to X"). The old bar's thumbnail and title stay; the dots menu
   (Copy link, Delete) is gone — both live in the viewer. It never covers a button: tuck() keeps it
   under the post-rip rail and above the controls row (record.js). */
/* width:max-content: a fixed box at left:50% shrink-to-fits to half the window, and with the
   WHO SEES IT control aboard it would fold the clip's line instead of staying one row (10 Sep) */
.clipbar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:37;width:max-content;max-width:calc(100vw - 32px);display:grid;grid-template-columns:auto 54px auto auto;gap:10px;align-items:center;padding:5px 10px 5px 6px;background:rgba(11,15,24,.8);border:2px solid rgba(255,255,255,.4);border-radius:14px;backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .24s ease-out}
.clipbar[data-on="1"]{opacity:1;pointer-events:auto}
.clipbar__acts{display:flex;align-items:center;gap:10px}
/* ONE LINE, CENTRED, EVERYWHERE (Luke, 14 Sep 2026: "this is like layered, should only ever
   be on one line and central, and should be centered on the x axis"). The lobby fold is GONE:
   it pinned the bar bottom-LEFT (left:20px, max-width 410) and wrapped the four buttons onto a
   second row — the two rows in his screenshot, sitting over the clan plate. Every state now
   wears the single row above, centred by the base rule, and record.js's tuck() decides only how
   high it sits. `data-at` stays on the element (panel | lobby | page) because tuck() and the QA
   harnesses read it. THE PHONE KEEPS A WRAP: one row is ~900px of content and the phone is
   390, so under 1024 the buttons drop to their own line rather than run off the screen. */
@media (max-width:1023px){
  /* over the phone's post-rip sheet (z 72) and its nav (z 70), never under them; the catch
     overlay (z 1000) still hides it, as above. THE BAR IS THE SCREEN'S WIDTH LESS A MARGIN and
     the text column is allowed to shrink (minmax(0,1fr) + min-width:0) so the line WRAPS
     instead of running off the right edge (Luke, 16 Sep: "its all going off the edge") —
     ui-ux-pro-max: prefer wrapping over truncation, nothing wider than the viewport. */
  .clipbar{width:calc(100vw - 24px);max-width:calc(100vw - 24px);grid-template-columns:auto 54px minmax(0,1fr);gap:6px 10px;padding:6px 8px 7px 6px;z-index:80}
  /* `.clipbar .clipbar__k`: this block sits ABOVE the base .clipbar__k rules in the file, so at
     equal specificity the base nowrap won and the line still ran off (measured 375: 351px bar,
     line 480px). One extra class settles it. */
  .clipbar .clipbar__k{min-width:0;white-space:normal}
  .clipbar .clipbar__k small{white-space:normal;line-height:1.25;overflow-wrap:anywhere}
  .clipbar .clipbar__acts{grid-column:1 / -1;flex-wrap:wrap;gap:8px}
  /* 34px is a mouse's target, not a thumb's. On the phone the row's buttons take the 44px
     minimum (Apple HIG / Material 48dp) and the 8px gap above keeps them from being mis-tapped
     — ui-ux-pro-max §2. Desktop keeps 34px: nothing there is aimed with a thumb. */
  .clipbar .clipbtn{height:44px;padding:0 15px}
}
/* WHO CAN SEE YOUR CLIPS — ONE SETTING, ON THE CLIPS PAGE (Luke, 10 Sep 05:40: "you don't have
   to ask here who sees it. That should just be a setting on your profile page"). The three pills
   have LEFT the saved toast and the viewer; the same segment paints once at the top of the clips
   and sessions page (clips-shelf.js clipsView), where it governs the whole account. */
.clipvis{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.clipvis__l{font:800 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.clipvis__seg{display:inline-flex;gap:2px;padding:2px;border:2px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(11,15,24,.55)}
.clipvis__seg button{height:24px;padding:0 11px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.82);font:900 13px var(--display);font-style:italic;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.clipvis__seg button:hover{color:#fff}
.clipvis__seg button[aria-checked="true"]{background:#fff;color:var(--key)}
.clipvis__seg button:disabled{opacity:.45;cursor:default}
.clipvis__seg button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
/* (the white-panel copy of the segment is .cl-acct's now, at the foot of this sheet) */
.pf-chip--fr{background:#DDEBFF}
html[data-catch-up="1"] .clipbar{opacity:0;pointer-events:none}
.clipposter{position:relative;aspect-ratio:var(--ar,16/9);border-radius:8px;overflow:hidden;background:#0B0F18;border:2px solid var(--key);box-shadow:0 2px 0 var(--key)}
.clipposter img,.clipposter video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.clipposter .play{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:var(--key);display:grid;place-items:center;border:2px solid var(--key)}
.clipposter .play svg{width:14px;height:14px}
.clipposter .dur{position:absolute;right:4px;bottom:4px;padding:1px 5px;border-radius:5px;background:rgba(11,15,24,.85);color:#fff;font:800 10px var(--ui);font-variant-numeric:tabular-nums}
.clipbar .clipposter{width:54px;border-width:1.5px;box-shadow:none;border-radius:5px;cursor:pointer}
.clipbar .clipposter .play{width:16px;height:16px;border-width:1.5px}
.clipbar .clipposter .play svg{width:11px;height:11px}
.clipbar .clipposter .dur{display:none}
.clipbar__k{margin:0 4px 0 0;font-family:var(--display);font-size:20px;font-weight:900;font-style:italic;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:#fff;white-space:nowrap}
.clipbar__k b{color:var(--acc);font-weight:inherit}
.clipbar__k small{display:block;margin:4px 0 0;font:800 11px var(--ui);color:rgba(255,255,255,.7);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.clipbtn{height:34px;padding:0 13px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font:900 13px var(--display);font-style:italic;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:2px solid var(--key);box-shadow:0 3px 0 var(--key);white-space:nowrap}
.clipbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}
/* `display:inline-flex` above beats the UA's `[hidden]{display:none}`, so SHARE TO CLAN showed
   in the saved toast even for someone with no clan (record.js paintClan sets .hidden). §3.10. */
.clipbtn[hidden]{display:none}
/* WAITING, NOT MISSING. The `making` row (a clip a server is still rendering) carries the same
   three buttons in the same order as the finished one, so nothing moves when it lands — SHARE TO
   X is simply not pressable yet, and SAVE CLIP / DON'T SAVE stop asking once they are answered. */
.clipbtn:disabled{opacity:.45;cursor:default}
.clipbtn:disabled:active{transform:none;box-shadow:0 3px 0 var(--key)}
/* nothing to play until it exists: the thumbnail is the card while the render runs */
.clipbar[data-mode="making"] .clipposter .play{display:none}
.clipbtn svg{width:16px;height:16px;flex:0 0 auto}
.clipbtn--x{background:linear-gradient(180deg,var(--acc-hi),var(--acc) 48%,var(--acc-lo));color:#fff;border-color:var(--key)}
.clipbtn--dl{background:#fff;color:var(--key)}
.cliptoast__x{width:34px;height:34px;padding:0;border-radius:10px;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);display:grid;place-items:center;cursor:pointer}
.cliptoast__x svg{width:16px;height:16px}
.cliptoast__x:hover{background:rgba(255,255,255,.14)}

/* ---- the sheets: the site's own (leaderboard.js header), gap closed ---- */
html[data-layout="stage"] .ov--xpost .ov__body,html[data-layout="stage"] .ov--clip .ov__body{-webkit-mask-image:none;mask-image:none;padding-top:6px;padding-bottom:26px}
html[data-layout="stage"] .ov--xpost .ov__head,html[data-layout="stage"] .ov--clip .ov__head{padding-bottom:0}
.ov--xpost .ov__sub,.ov--clip .ov__sub{margin-top:4px}
.ov--xpost .ov__panel{width:min(820px,100%)}
.xpost{display:grid;grid-template-columns:216px minmax(0,1fr);gap:26px;align-items:start}
.xpost--wide{grid-template-columns:1fr}
.xpost--wide .xpost__poster{max-width:560px}
.xpost__poster.clipposter{border-width:3px;box-shadow:0 4px 0 var(--key);border-radius:14px}
.xpost__who{display:flex;align-items:center;gap:8px;font:800 14px var(--ui);color:#3A4354;margin:0 0 12px}
.xpost__who b{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:2px solid var(--key);border-radius:999px;background:#fff;color:var(--key)}
.xpost__who b svg{width:14px;height:14px}
.xpost__text{display:block;width:100%;min-height:118px;padding:14px 16px;border:2px solid var(--key);border-radius:14px;background:#fff;font:600 17px/1.4 var(--ui);color:var(--key);box-shadow:0 3px 0 var(--key);resize:vertical;box-sizing:border-box}
.xpost__meta{display:flex;justify-content:space-between;gap:12px;margin:10px 0 0;font:700 13px var(--ui);color:#3A4354}
.xpost__cta{margin-top:18px}
.xpost__cta .pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:20px;border:2px solid var(--key)}
.xpost__cta .pf-btn svg{width:18px;height:18px}
.xpost__note{margin:12px 0 0;font:700 13px/1.4 var(--ui);color:#3A4354}

/* the viewer */
.ov--clip .ov__panel{width:min(860px,100%)}
.clipview{display:grid;grid-template-columns:270px minmax(0,1fr);gap:26px;align-items:start}
.clipview--wide{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.ov--clip .ov__panel:has(.clipview--wide){width:min(960px,100%)}
.clipview__btns .pf-btn--danger{background:#fff;color:#B23A3A;border-color:#B23A3A}
.clipview__btns .pf-btn--danger[data-armed="1"]{background:#B23A3A;color:#fff}
.clipview__v.clipposter{border-width:3px;box-shadow:0 5px 0 var(--key);border-radius:16px;cursor:pointer}
.clipview__v.clipposter .play{width:56px;height:56px;border-width:3px}
.clipview__v.clipposter .play svg{width:30px;height:30px}
/* THE CONTROLS (Luke, 10 Sep 01:50: "no way to pause it, no way to open it full size, no way to go
   back and forward"). A bar along the foot of the clip: play/pause, the time, a scrubber, the length,
   full screen. The big play glyph is the "tap for sound" invitation and goes once the sound is on;
   the clip itself still toggles on a tap. Full screen takes the whole box, so the bar comes along. */
.clipview__v.clipposter .dur{display:none}
.clipview__v[data-sound="1"] .play{display:none}
.clipctl{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 10px 8px;background:linear-gradient(180deg,rgba(11,15,24,0),rgba(11,15,24,.84) 55%);color:#fff;cursor:default}
.clipctl button{width:30px;height:30px;padding:0;border-radius:50%;background:#fff;color:var(--key);border:2px solid var(--key);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.clipctl button svg{width:16px;height:16px}
.clipctl [data-pp] svg+svg{display:none}
.clipview__v[data-playing="1"] .clipctl [data-pp] svg:first-child{display:none}
.clipview__v[data-playing="1"] .clipctl [data-pp] svg+svg{display:block}
.clipctl__t{font:800 12px var(--ui);font-variant-numeric:tabular-nums;min-width:34px;text-align:center}
.clipctl__bar{flex:1;min-width:0;height:6px;margin:0;accent-color:var(--acc);cursor:pointer}
.clipview__v:fullscreen,.clipview__v:-webkit-full-screen{border:0;border-radius:0;box-shadow:none;background:#000;aspect-ratio:auto;width:100%;height:100%}
.clipview__v:fullscreen video,.clipview__v:-webkit-full-screen video{object-fit:contain}
.clipview__card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;margin:0;padding:10px 14px 10px 10px;background:rgba(255,255,255,.9);border:2px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key)}
.clipview__card img{width:64px;aspect-ratio:.62;object-fit:contain;border-radius:6px;background:#EEF3FA}
.clipview__card .n{font:800 17px/1.15 var(--ui);color:var(--key)}
.clipview__card .n small{display:block;margin-top:5px;font:700 13px var(--ui);color:#3A4354}
.clipview__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.clipview__btns .pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--key)}
/* the same [hidden] trap as .clipbtn above: this display beats the UA rule, so the viewer's
   SHARE TO CLAN painted for people with no clan (clips-shelf.js:224 sets it hidden). §3.10. */
.clipview__btns .pf-btn[hidden]{display:none}
/* Delete is the last thing and the only red thing: its own full row under the four white and pink ones */
.clipview__btns .pf-btn--danger{grid-column:1 / -1}
.clipview__btns .pf-btn svg{width:16px;height:16px}
.clipview__msg{margin-top:10px;font:700 13px var(--ui);color:#3A4354;text-align:right;min-height:1.2em}

/* ---- the recordings band on the profile: YOUR CLIPS left, YOUR SESSIONS right, one row (Luke, 10 Sep 01:00).
   ITS GRID ROW IS profile.css's now (round 2 moved FRIENDS to the top and the vault down, so the
   band is desktop row 5 / EVERY RIP 6, phone 6 / 7; profile.css restates them at a higher
   specificity — FE-A2, docs/social/REQUESTS-R2.md). This sheet only shapes the band. ---- */
.pf-b .pf-shelf--rec{grid-column:1 / -1;margin:22px 0 0;display:grid;grid-template-columns:1fr;gap:0 22px}
.pf-b .pf-shelf--rec2{grid-template-columns:1fr 1fr;gap:0}
.pf-shelf--rec .pf-shelf{margin:0;min-width:0}
/* a thin line between the two halves (Luke, 10 Sep 01:07) */
.pf-shelf--rec2 > .pf-shelf:first-child{padding-right:22px}
.pf-shelf--rec2 > .pf-shelf + .pf-shelf{padding-left:22px;border-left:2px solid rgba(11,15,24,.3)}
.pf-clip{position:relative;background:rgba(255,255,255,.92);border:2px solid var(--key);border-radius:12px;box-shadow:0 3px 0 var(--key);padding:8px 8px 9px;min-width:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.pf-clip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key)}
.pf-clip .clipposter{border-width:0;box-shadow:none;border-radius:6px}
.pf-clip__nm{margin:7px 0 0;font:800 12px/1.25 var(--ui);color:var(--key);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.pf-clip__row{display:flex;align-items:center;gap:6px;margin-top:6px;min-height:20px}
.pf-clip__row .pf-card__v{margin-left:auto}
.pf-chip--pub{background:var(--yellow,#FFFE9A)}
.pf-grid--clips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pf-view--clips .pf-grid--clips{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}

/* ---- sessions (10 Sep): the countdown on the camera, STOP in the strip, and the profile's uploading state ---- */
.recbubble__count{position:absolute;inset:0;display:grid;place-items:center;font:900 44px var(--display);font-style:italic;color:#fff;background:rgba(11,15,24,.55);text-shadow:0 2px 0 #0B0F18;pointer-events:none;z-index:2}
.recbubble__count[hidden]{display:none}
html[data-countdown="1"] .rec .rec__l{font-size:20px;font-variant-numeric:tabular-nums}
.recbubble__stop{display:none!important}
html[data-session="1"] .recbubble__stop{display:inline-flex!important}
.clipposter .up{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,15,24,.62);color:#fff;font:900 13px var(--display);font-style:italic;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.2;padding:6px}
.clipposter .up b{display:block;font-size:18px;font-variant-numeric:tabular-nums;font-weight:inherit}
.clipposter .up i{display:block;width:70%;height:4px;margin:6px auto 0;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.clipposter .up i::after{content:"";display:block;height:100%;width:var(--p,0%);background:var(--acc)}
.pf-clip[data-uploading="1"] .play{display:none}
.pf-clip__rips{font:800 10px var(--ui);color:var(--key);border:2px solid var(--key);border-radius:7px;padding:1px 6px;background:#fff;white-space:nowrap}

/* ---- the phone (10 Sep, the social wave; HANDOFF-172 left the phone unverified) ----
   the viewer's two columns stack, the WHO SEES IT pills wrap under their label, and the
   clips / sessions band stacks its two shelves so the tiles keep their size */
@media (max-width:1023px){
  .clipview,.clipview--wide{grid-template-columns:1fr;gap:16px}
  .clipvis{flex-wrap:wrap}
  .clipview__btns{grid-template-columns:1fr 1fr}
  /* the band's phone rows are profile.css's too (see the desktop note above); this sheet only
     tightens the band's top margin and stacks its two shelves */
  .pf-b .pf-shelf--rec{margin:6px 0 0}
  .pf-b .pf-shelf--rec2{grid-template-columns:1fr;gap:16px 0}
  .pf-shelf--rec2 > .pf-shelf:first-child{padding-right:0}
  .pf-shelf--rec2 > .pf-shelf + .pf-shelf{padding-left:0;border-left:0}
}

/* THE PHONE (Luke, §3.22): nothing under 12px. The WHO SEES IT pill row has left the toast for
   the clips page, where its label is 12px and its pills 13px (above), so the only thing raised
   here is the saved toast's own duration line. The clips page's own phone block is below. */
@media (max-width:560px){
  .clipbar__k small{font-size:12px;letter-spacing:.02em}
}

/* ═══ THE CLIPS AND SESSIONS PAGE (R4, Luke 10 Sep 05:40: VIEW ALL "opens ONE clip instead of
   the page with all your clips and all your sessions"). A profile view like FRIENDS, not a second
   sheet: the account setting at the top, then SESSIONS and CLIPS as two groups, and a DELETE on
   every one of your own behind a confirm. ═══ */
.pf-view--clips .cl-acct{margin:0 0 18px;padding:12px 14px;border:2px solid var(--key);border-radius:14px;background:#fff;box-shadow:0 3px 0 var(--key)}
.pf-view--clips .cl-acct .clipvis{gap:10px}
.pf-view--clips .cl-acct .clipvis__l{color:#3A4354}
.pf-view--clips .cl-acct .clipvis__seg{border-color:var(--key);background:#fff;box-shadow:0 2px 0 var(--key)}
.pf-view--clips .cl-acct .clipvis__seg button{color:var(--key)}
.pf-view--clips .cl-acct .clipvis__seg button[aria-checked="true"]{background:var(--key);color:#fff}
.cl-acct__n{margin:8px 0 0;font:700 13px/1.35 var(--ui);color:#3A4354}
.cl-acct__n b{color:var(--key)}
.cl-group{margin:0 0 22px}
.cl-group:last-child{margin-bottom:0}
.cl-group .pf-shelf__h{margin-bottom:10px;padding-right:0}
.cl-group .pf-shelf__h h3{font-size:20px}
/* the group's count stays on the title's line: profile.css:350 throws .pf-view .pf-shelf__h span
   onto its own row on the phone, which is right for the page's header and orphaned here */
.cl-group .pf-shelf__h span{flex:0 0 auto}
/* a five-figure value was running out of the tile at 1147x655 (Charizard, $4,800) */
.pf-view--clips .pf-clip__row{flex-wrap:wrap;row-gap:4px}
.cl-tile{position:relative;min-width:0}
.cl-tile .pf-clip{width:100%}
.cl-del{display:block;width:100%;margin:6px 0 0;padding:5px 8px;border:2px solid #B23A3A;border-radius:10px;background:#fff;color:#B23A3A;font:900 12px var(--display);font-style:italic;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.cl-del:hover{background:#B23A3A;color:#fff}
.cl-ask{position:absolute;inset:0;z-index:3;display:grid;align-content:center;gap:9px;padding:10px;border:2px solid var(--key);border-radius:12px;background:#FFF;box-shadow:0 3px 0 var(--key)}
.cl-ask[hidden]{display:none}
.cl-ask p{margin:0;font:800 12.5px/1.3 var(--ui);color:var(--key)}
.cl-ask span{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cl-ask button{padding:6px 4px;border:2px solid var(--key);border-radius:10px;background:#fff;color:var(--key);font:900 12px var(--display);font-style:italic;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.cl-ask button[data-cyes]{background:#B23A3A;color:#fff;border-color:#B23A3A}
.cl-msg{margin:0 0 14px;font:700 13px var(--ui);color:#3A4354;min-height:1.2em}
@media (max-width:1023px){
  /* the phone (Luke's §3.22 floor): two columns, and nothing under 12px. The tile's own
     duration badge and rip count are 10px on the desktop band; on the phone they come up. */
  .pf-view--clips .pf-grid--clips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-view--clips .cl-acct .clipvis__l{flex:1 0 100%}
  .pf-view--clips .clipposter .dur,.pf-view--clips .pf-clip__rips{font-size:12px}
  .pf-view--clips .pf-clip__nm{font-size:12.5px}
  /* the sheet's own BACK and X sit over this corner on the phone: the same answer profile.css
     gives the friends and picture views (:392-393) */
  .pf-view--clips{padding-top:50px}
  .pf-view--clips > .pf-shelf__h .pf-back{display:none}
}

/* ---- REACTION CAM ON THE PHONE (16 Sep 2026, docs/PLAN-REACTION-CAM-16SEP.md) ----
   The recorder is no longer desktop-only: the browser records the camera and mic alone (no tab
   capture — a phone has none and a laptop froze doing it) and a server puts the face on the
   replay. So the phone gets the same switch the desktop has, in the dock row beside TURBO,
   drawn with TURBO's own rules (style.css .mturbo) so the two read as one pair.
   Luke, 21 Sep 2026: the switch is parked (record.js PHONE_REC = false) so the dock is
   MULTIBUY + WHAT'S INSIDE only. Keep these rules — flipping the flag puts .mrec back. */
@media (max-width:1023px){
  .mrec{flex:1 1 0;min-width:0;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:0 6px;font:900 14px var(--display);font-style:italic;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
    background:var(--fill-turbo);border:2px solid rgba(255,255,255,.72);color:#FFF;box-shadow:none;
    transition:border-color .22s ease-out,color .22s ease-out,box-shadow .22s ease-out}
  .mrec .rec__dot{width:12px;height:12px;color:#fff;opacity:.55;flex:0 0 auto}
  .mrec .mturbo__knob{border-color:rgba(255,255,255,.5)}
  .mrec .mturbo__knob i{right:calc(100% - 15.5px);background:#D2D2D2;box-shadow:none}
  .mrec[aria-checked="true"]{border-color:#F0645C;box-shadow:0 0 12px -5px rgba(240,100,92,.6)}
  .mrec[aria-checked="true"] .rec__dot{color:#F0645C;opacity:1}
  .mrec[aria-checked="true"] .mturbo__knob{border-color:rgba(240,100,92,.7)}
  .mrec[aria-checked="true"] .mturbo__knob i{right:1.5px;background:linear-gradient(180deg,#FF8A80,#C8322B);box-shadow:0 0 7px rgba(240,100,92,.85)}
  .mrec[data-busy="1"]{opacity:.7;pointer-events:none}
  html[data-state="rip"] .mrec{pointer-events:none}
  /* three in the row now: WHAT'S INSIDE? is the longest word and takes the bigger share, so its
     label sits inside its button at 360 wide and up (measured 16 Sep: 101px of text, 95px button
     at equal shares) */
  html[data-rec-ui="1"] .mdock__row .mwi{flex:1.22 1 0}
  .mrec .mturbo__knob{width:30px}
  .mrec .mturbo__knob i{width:14px}
  .mrec[aria-checked="false"] .mturbo__knob i{right:calc(100% - 15.5px)}
  /* the setup card fits the phone: full width less a margin, and it never sits under the dock */
  .recsetup{width:calc(100vw - 16px);max-width:360px}
  .recsetup p.recsetup__hint{display:none}
  /* THE BUBBLE ON A PHONE: no hover — a tap on the circle opens the CAM / STOP / MIC strip AND
     the resize grip (record.js toggles data-hover); a drag on the circle moves it, a drag on the
     grip sizes it (Luke, 16 Sep: "when I click it some symbol should show up that I can drag to
     increase the size"). The grip is a 36px target, not the desktop's 30, for a thumb. */
  .recbubble::before{display:none}
  .recbubble:hover .recbubble__row,.recbubble:hover .recbubble__grip{display:none}
  .recbubble[data-hover="1"] .recbubble__row{display:flex}
  .recbubble[data-hover="1"] .recbubble__grip{display:grid;width:36px;height:36px}
  .recbubble[data-hover="1"] .recbubble__grip svg{width:20px;height:20px}
  .recbubble__row button{padding:6px 12px;font-size:12px}
}