/* ═══════════════════════════════════════
   Your.Reviews — the shell: the sign-in / sign-up panel and the phone's menu sheet (8 Sep 2026, Vadim's calls)
   ───────────────────────────────────────
   Loaded after the kit sheet on every kit page, and by the home page (which carries the kit's tokens but not the kit sheet),
   so every rule here stands on tokens alone — no kit classes. Its script is your-reviews-shell.js.

   THE PANEL (.yr-login): Login or Signup opens it from the right at HALF the page on the desktop, and the page is PUSHED left
   (body's right margin; the page is a container, so it reflows to the narrower width rather than hiding under the panel). The
   grab pill on its left edge (VB2's seam) drags it to any width; a chevron at the top returns; so does a click on the pushed
   page (an invisible catcher, no scrim — the no-haze law) and Escape. On the phone (799 down) the panel is the whole screen
   and nothing is pushed. Two faces: sign in, and create an account (his ask, 8 Sep 2026: "the same thing with sign up").
   The fields are the kit's form pills (38px, the pill radius, the label inside, the band grey inside — the other grey of the
   panel's white, both themes: "why are we not using the darker gray text fields?").
   THE MENU SHEET: from 799 down the burger's menu is a sheet parked below the screen that slides up (Searcher's icon cards).
   ═══════════════════════════════════════ */

:root { --yr-ride-t:.36s; }   /* the ride's length alone (--yr-ride carries its easing too): for a delay that must match it */

/* ── the push ── */
body { transition:margin-right var(--yr-ride); }
html.yr-login-open body { margin-right:var(--yl-w, 50vw); }   /* the panel's width, the grab pill's to change */
html.yr-resizing body { transition:none; }   /* while the pill is held the page follows the pointer with no lag */
@media (max-width:799px) { html.yr-login-open body { margin-right:0; overflow:hidden; } }   /* the phone: the panel is the whole screen; the page waits behind it */

/* ── sizes that must hold in EVERY state (8 Sep 2026, the flash on the desktop: a mark rendered 1912px wide for an instant before the phone-only rule reached it; the home's moved menu has no home on the desktop at all) ── */
.yr-sheet-ic, .yr-mode-row svg { width:20px; height:20px; flex:none; }
.yl-btn svg, .yl-back svg { width:18px; height:18px; flex:none; }
@media (min-width:800px) { body > .yr-live-menu { display:none; } }   /* the home's menu, moved onto the body for the phone's sheet, does not exist on the desktop (the slab does) */

/* ── the catcher: a tap on the page closes what is open; it is invisible, never a scrim ── */
.yr-catch { position:fixed; inset:0; background:transparent; z-index:59; cursor:default; }

/* ── the panel ── */
.yr-login { position:fixed; top:0; right:0; bottom:0; width:var(--yl-w, 50vw); z-index:60; display:flex; flex-direction:column; overflow:visible; background:var(--yr-surface); color:var(--yr-ink); border-left:1px solid var(--yr-hairline); box-sizing:border-box; transform:translateX(100%); visibility:hidden; transition:transform var(--yr-ride), visibility 0s linear var(--yr-ride-t); font-family:'Nunito', system-ui, sans-serif; }
html.yr-login-open .yr-login { transform:none; visibility:visible; transition:transform var(--yr-ride), visibility 0s; }
.yr-login *, .yr-login *::before, .yr-login *::after { box-sizing:border-box; }
.yr-login.is-resizing { transition:none; }
.yl-scroll { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; }   /* the panel scrolls inside: the frame stays overflow:visible so the seam can straddle its edge */
/* the grab pill (VB2's seam): a 10px strip astride the panel's left edge, half on, half off; the purple pill rises in on hover and stays while dragging; drag to the width you want, double-click to go back to half */
.yl-seam { position:absolute; top:0; bottom:0; left:-5px; width:10px; z-index:3; cursor:col-resize; touch-action:none; }
.yl-seam::after { content:''; position:absolute; top:50%; left:50%; width:7px; height:48px; border-radius:999px; background:var(--yr-purple); transform:translate(-50%,-50%) scaleY(.35); opacity:0; transition:opacity .18s ease, transform .18s ease; pointer-events:none; }
.yl-seam:hover::after, .yr-login.is-resizing .yl-seam::after { opacity:1; transform:translate(-50%,-50%) scaleY(1); }
.yl-back { position:absolute; top:18px; left:18px; z-index:2; width:38px; height:38px; border-radius:999px; border:1px solid var(--yr-hairline); background:var(--yr-btn-white); color:var(--yr-btn-white-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background-color .2s ease, border-color .2s ease, color .2s ease; }   /* the chevron: back to the page */
.yl-back:hover { background:var(--yr-hover-bg); border-color:var(--yr-hover-bg); color:var(--yr-hover-ink); }
.yl-back svg { width:18px; height:18px; }
.yl-in { width:100%; max-width:420px; margin:auto; padding:88px 28px 40px; }
.yl-face[hidden] { display:none; }
.yl-eyebrow { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--yr-text-muted); margin:0 0 12px; }
.yl-title { margin:0 0 8px; font-size:clamp(26px, 2.4cqw, 34px); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.yl-lede { margin:0 0 24px; font-size:15px; color:var(--yr-text-muted); line-height:1.5; }
.yl-form { display:flex; flex-direction:column; gap:8px; }
/* the fields: a label above, a 46px field with the button radius, the band grey inside — the other grey of the panel's ground in both themes (Vadim, 8 Sep 2026: the darker grey inside; NOT pills) */
.yl-label { display:block; font-size:13px; font-weight:700; margin-top:6px; }
.yl-field { width:100%; min-height:46px; padding:0 16px; border:1px solid var(--yr-hairline); border-radius:var(--yr-radius-btn); background:var(--yr-band); color:var(--yr-ink); font:inherit; font-size:15px; outline:none; transition:border-color .2s ease; }
.yl-field::placeholder { color:var(--yr-text-placeholder); }
.yl-field:focus { border-color:var(--yr-hairline); }   /* focus adds nothing: no ring, no darker border (the hero search's lesson; Vadim, 8 Sep 2026: "I don't like how we've got a border around the text field") */
.yl-field:-webkit-autofill, .yl-field:-webkit-autofill:hover, .yl-field:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px var(--yr-band) inset; -webkit-text-fill-color:var(--yr-ink); caret-color:var(--yr-ink); transition:background-color 9999s ease-out 0s; }   /* Chrome paints a remembered value blue-grey; the field keeps its own grey (Vadim, 8 Sep 2026: "the wrong color text field") */
.yl-row { display:flex; justify-content:flex-end; margin-top:-2px; }
.yl-link { color:var(--yr-text-muted); font-weight:600; text-decoration:none; font-size:13px; transition:color .2s ease; }   /* a quiet link: the muted ink, the ink on hover (Vadim: "just pick a better colour") */
.yl-link:hover { color:var(--yr-ink); text-decoration:underline; }
.yl-terms { margin:2px 0 0; font-size:12.5px; line-height:1.5; color:var(--yr-text-muted); }
.yl-terms a { color:var(--yr-ink); font-weight:600; text-decoration:none; }
.yl-terms a:hover { text-decoration:underline; }
.yl-err { margin:2px 0 0; padding:10px 14px; border-radius:12px; background:var(--yr-band); font-size:13.5px; line-height:1.45; color:var(--yr-ink); }
.yl-err[hidden] { display:none; }
.yl-btn { width:100%; min-height:46px; padding:0 18px; border-radius:var(--yr-radius-btn); border:1px solid var(--yr-hairline); background:var(--yr-btn-white); color:var(--yr-btn-white-ink); font:inherit; font-size:15px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.yl-btn:hover { background:var(--yr-hover-bg); border-color:var(--yr-hover-bg); color:var(--yr-hover-ink); }
.yl-btn--primary { margin-top:8px; background:var(--yr-purple); border-color:var(--yr-purple); color:var(--yr-on-dark); }
.yl-btn--primary:hover { background:var(--yr-primary-hover-bg); border-color:var(--yr-primary-hover-bg); color:var(--yr-on-dark); }
.yl-btn[disabled] { cursor:default; opacity:.55; }
.yl-btn[disabled]:hover { background:var(--yr-btn-white); border-color:var(--yr-hairline); color:var(--yr-btn-white-ink); }
.yl-btn svg { width:18px; height:18px; flex:none; }
.yl-busy .yl-btn--primary { opacity:.7; pointer-events:none; }
.yl-or { display:flex; align-items:center; gap:12px; margin:22px 0 14px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--yr-text-muted); }
.yl-or::before, .yl-or::after { content:''; flex:1; height:1px; background:var(--yr-hairline); }
.yl-oauth { margin:0 0 10px; }
.yl-foot { margin:26px 0 0; padding-top:22px; border-top:1px solid var(--yr-hairline); }   /* the other door: a real button, not a coloured word */
.yl-done { display:flex; flex-direction:column; gap:12px; }
.yl-done p { margin:0; font-size:15px; line-height:1.55; color:var(--yr-text-muted); }
@media (max-width:799px) {
  .yr-login { width:100vw; border-left:0; }
  .yl-in { padding:80px 22px 32px; }
  .yl-seam { display:none; }
}

/* ── the menu sheet (the phone: 799 down, where the burger lives) ── */
/* Searcher's icon cards (Vadim, 8 Sep 2026: "take a leaf out of the design style of the searcher demo"): the sheet is the surface, the
   rows sit in ONE raised group of the other grey (the two-greys law), no hairlines between them, each with its mark; the mode row is
   a second group of its own. 26px top corners, the grab bar, 50px rows. */
@media (max-width:799px) {
  .yr-burger-menu, .yr-live-menu {
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; z-index:61;
    min-width:0; max-height:88dvh; overflow:auto; display:flex; flex-direction:column; gap:10px;
    padding:8px 14px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius:26px 26px 0 0; border:0;
    background:var(--yr-surface); box-shadow:var(--yr-shadow-search); opacity:1 !important; translate:none !important;
    transform:translateY(100%); visibility:hidden; pointer-events:none;
    transition:transform var(--yr-ride), visibility 0s linear var(--yr-ride-t);
  }
  .yr-burger-wrap.is-open .yr-burger-menu, .yr-live-menu.is-open { transform:none; visibility:visible; pointer-events:auto; transition:transform var(--yr-ride), visibility 0s; }
  .yr-burger-menu::before, .yr-live-menu::before { content:''; display:block; width:38px; height:4px; border-radius:3px; background:var(--yr-fill-soft); margin:6px auto 6px; flex:none; }   /* the grab bar (Searcher's) */
  .yr-sheet-group { display:flex; flex-direction:column; gap:2px; padding:6px; border-radius:16px; background:var(--yr-band); flex:none; }   /* the raised group: the other grey of the sheet's ground, both themes */
  .yr-burger-menu a, .yr-live-menu span > a, .yr-mode-row { display:flex; align-items:center; gap:14px; min-height:50px; padding:0 14px; border-radius:11px; font-family:'Nunito', system-ui, sans-serif; font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--yr-ink); text-decoration:none; background:none; border:0; width:100%; text-align:left; cursor:pointer; transition:background-color .12s ease, color .12s ease; }
  .yr-live-menu span { display:block; padding:0; border-radius:11px; }
  .yr-sheet-ic, .yr-mode-row svg { width:20px; height:20px; flex:none; color:var(--yr-text-muted); transition:color .12s ease; }
  .yr-sheet-group, .yr-sheet-group *, .yr-mode-row { box-sizing:border-box; }   /* the home page has no global border-box: a 100% row plus its padding ran past the group's right edge (Vadim, 8 Sep 2026: "it bleeds out on the right hand side") */
  /* hover is the PILL, as every menu in the kit: the dark slab in light mode, white in the dark — never a soft grey (Vadim, 8 Sep 2026: "why the fuck are you using this weird hover effect where it goes light?"); the row you are on carries the pill at rest and yields it while another row is under the pointer */
  .yr-burger-menu a.is-on, .yr-burger-menu a:hover, .yr-live-menu span > a:hover, .yr-mode-row:hover { background:var(--yr-slab-pill); color:var(--yr-slab-on); }
  .yr-burger-menu a.is-on .yr-sheet-ic, .yr-burger-menu a:hover .yr-sheet-ic, .yr-live-menu span > a:hover .yr-sheet-ic, .yr-mode-row:hover svg { color:var(--yr-slab-on-soft); }
  .yr-sheet-group:hover a.is-on:not(:hover) { background:none; color:var(--yr-ink); }
  .yr-sheet-group:hover a.is-on:not(:hover) .yr-sheet-ic { color:var(--yr-text-muted); }
  .yr-mode-row { margin:0; border-top:0; border-radius:11px; }
}
@media (min-width:800px) { .yr-mode-row, .yr-sheet-group--mode { display:none; } }   /* the desktop keeps the header's switch; the row is the phone's */