@import url('./scrollbars.css');

/* ═══════════════════════════════════════
   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: split while readable, covered at the last useful width in full view ── */
body { transition:margin-right var(--yr-ride); }
html.yr-login-open body { margin-right:var(--yl-page-push, 50vw); }
html.yr-login-open { overflow-anchor:none; }
html.yr-login-open.yr-login-full { overflow:hidden; }   /* the readable page waits behind the full-width account */
html.yr-resizing body { transition:none; }   /* while the pill is held the page follows the pointer with no lag */
html.yr-login-restoring body { margin-right:0; transition:none; }
html.yr-login-restoring { overflow-anchor:none; }
@media (width < 1000px) { html.yr-login-open body { margin-right:0; overflow:hidden; } }   /* below a comfortable half-page width, keep the website fully covered */

/* ── 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:width var(--yr-ride), 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:width var(--yr-ride), transform var(--yr-ride), visibility 0s; }
.yr-login *, .yr-login *::before, .yr-login *::after { box-sizing:border-box; }
.yr-login.is-resizing:not(.is-snapping) { transition:none; }
html.yr-login-open .yr-login.is-window-resizing { transition:none; }
html.yr-login-restoring .yr-login { transform:none; visibility:visible; transition:none; }
.yl-scroll { flex:1; min-height:0; overflow:auto; scrollbar-gutter:stable both-edges; display:flex; flex-direction:column; }   /* the panel scrolls inside: the frame stays overflow:visible so the seam can straddle its edge */
/* The same visible grip resizes and toggles. In full view the same pill stays inside
   the viewport, with its larger invisible target retained. */
.yl-seam { position:absolute; top:0; bottom:0; left:-14px; width:28px; z-index:3; cursor:grab; touch-action:none; outline:none; }   /* the open hand: a thing you drag (Vadim, 16 Sep 2026: the cursor says draggable; the pointer is for buttons; nothing else changes it) */
:root { --yr-grip-thickness:5px; --yr-grip-length:48px; }
.yl-grip { position:absolute; top:50%; left:50%; width:var(--yr-grip-thickness); height:var(--yr-grip-length); border-radius:999px; background:var(--yr-purple); color:var(--yr-on-dark); transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; opacity:.8; transition:opacity .18s ease, filter .18s ease; pointer-events:none; }
.yl-grip svg { display:none; width:18px; height:18px; flex:none; transform:rotate(180deg); }
.yl-seam:hover .yl-grip, .yl-seam:focus-visible .yl-grip, .yr-login.is-resizing .yl-grip { opacity:1; }
.yl-seam:focus-visible .yl-grip { filter:brightness(1.15); }
.yr-login.is-resizing .yl-seam { cursor:grabbing; }   /* closed while held */
.yr-login-full .yl-seam { left:0; top:50%; bottom:auto; width:44px; height:88px; transform:translateY(-50%); cursor:pointer; }   /* the edge tab: a click restores the split, so the pointer */
.yr-login-full .yl-grip { opacity:1; }

.yl-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex:none; padding:18px; z-index:2; background:var(--yr-surface); }
.yl-back { height:38px; width:auto; border-radius:var(--yr-radius-btn); border:1px solid var(--yr-hairline); background:var(--yr-btn-white); color:var(--yr-btn-white-ink); display:inline-flex; flex:none; align-items:center; justify-content:center; gap:7px; cursor:pointer; padding:0 11px; font:600 13px/1 'Nunito',system-ui,sans-serif; white-space:nowrap; transition:background-color .18s ease, color .18s ease; }
.yl-back:hover, .yl-back:focus-visible { background:var(--yr-hover-bg); color:var(--yr-hover-ink); outline:none; }
.yl-back:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.yl-back svg { width:18px; height:18px; flex:none; }
.yl-in { width:100%; max-width:420px; margin:auto; padding:24px 28px 40px; }
.yl-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html.yr-login-open.yr-login-compact .yr-live-art { display:none; }   /* decorative hero images yield first; copy stays readable */
.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-primary-hover-ink); }
.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 (width < 1000px) {
  .yr-login { width:100vw; border-left:0; }
  html.yr-login-open .yr-login { transition:transform var(--yr-ride), visibility 0s; }
  .yl-in { padding:24px 22px 32px; }
  .yl-seam { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  body, .yr-login, html.yr-login-open .yr-login, .yl-grip { transition: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. */
/* The sheet's grab bar as a part of its own (16 Sep 2026): the panel workspace's move handle carries it above each panel head. */
.yr-grab-bar { display:block; width:38px; height:4px; border-radius:3px; background:var(--yr-fill-soft); margin:6px auto; flex:none; }

@media (width < 800px) {
  /* Keep the sheet's parent stacking context above the outside-click catcher. */
  .yr-nav:has(.yr-burger-wrap.is-open) { z-index:61; }
  .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; scrollbar-gutter:stable both-edges; display:flex; flex-direction:column; gap:10px;
    padding:8px 0 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 stays neutral grey; the selected row keeps its separate selection fill. */
  .yr-burger-menu a:hover, .yr-live-menu span > a:hover, .yr-mode-row:hover { background:var(--yr-menu-hover-bg); color:var(--yr-ink); }
  .yr-burger-menu a.is-on { background:var(--yr-slab-pill); color:var(--yr-slab-on); }
  .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-text-muted); }
  .yr-burger-menu a.is-on .yr-sheet-ic { color:var(--yr-slab-on-soft); }
  .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 */