/* LC-1610 responsive layer. Pairs with js/fluid.js, which tags the shared structure.
   At the design width (1440 x 900) every rule here resolves to the designer's own values, so the
   pixel QA is unchanged; wider screens stretch, narrower ones collapse. */
:root { --sv-bar-h: 56px; --sv-navy: #1D2951; --sv-paper: #E5E4E2; --sv-line: #D3D1CD; }

#sv-bar, #sv-scrim { display: none; }

/* ---------- desktop: fill the viewport ---------- */
.sv-root {
  width: 100% !important;
  height: max(calc(100dvh - var(--sv-off, 0px)), var(--sv-h, 900px)) !important;
}
.sv-root[style*="min-height"] { height: auto !important; min-height: max(calc(100dvh - var(--sv-off, 0px)), var(--sv-h, 900px)) !important; }
.sv-root .sv-sb { height: 100% !important; min-height: 100%; }
.sv-root .sv-sbslot { align-self: stretch; }
.sv-root .sv-sbslot > .sv-sb { position: sticky; top: 0; height: 100dvh !important; max-height: 100%; }
/* component pages (dialog, lone sidebar) keep their size, centred */
#app.sv-component .sv-root { width: var(--sv-w) !important; max-width: 100%; margin: 0 auto; height: auto !important; min-height: var(--sv-h) !important; }

/* ---------- tablet + phone: rail becomes a drawer / bottom sheet ---------- */
@media (max-width: 1024px) {
  /* LC-1610: the bar's look is its own rule, so every page that shows it (a rail page here, a
     nav-only page such as Home or Brain at phone width) gets the same navy, centred bar; which
     pages show it is decided by the display rules alone. Never put `display` in this rule. */
  #sv-bar {
    position: sticky; top: 0; z-index: 40; height: var(--sv-bar-h); box-sizing: border-box;
    align-items: center; gap: 8px; padding: 6px 12px; background: var(--sv-navy); color: #fff;
    font: 600 15px 'Hanken Grotesk', system-ui, sans-serif;
  }
  body.sv-has-rail #sv-bar { display: flex; }
  #sv-bar button {
    min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: inherit;
    font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px;
  }
  #sv-bar button:focus-visible { outline: 3px solid #B56F5B; outline-offset: 2px; }
  #sv-nav-btn { display: none !important; }
  #sv-rail-btn { margin-left: auto; border: 1px solid rgba(255,255,255,.35) !important; }
  body:not(.sv-has-rail) #sv-rail-btn { display: none !important; }
  #sv-bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .sv-root { height: auto !important; min-height: calc(100dvh - var(--sv-bar-h)) !important; overflow-x: clip !important; overflow-y: visible !important; }
  .sv-root .sv-split, .sv-root .sv-stack { grid-template-columns: minmax(0, 1fr) !important; }
  .sv-root .sv-split > :not(.sv-rail) { min-height: calc(100dvh - var(--sv-bar-h)); }
  .sv-root .sv-rail {
    position: fixed !important; z-index: 60; top: 0; right: 0; bottom: 0; width: min(420px, 92vw) !important;
    max-height: none; overflow: auto !important; background: var(--card, #fff); box-shadow: -8px 0 32px rgba(29,41,81,.25);
    transform: translateX(105%); transition: transform .2s ease; visibility: hidden;
  }
  body.sv-rail-open .sv-root .sv-rail { transform: none; visibility: visible; }
  body.sv-rail-open #sv-scrim, body.sv-nav-open #sv-scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(29,41,81,.45); }
  /* shared overflow guards (tablet + phone) */
  .sv-root, .sv-root * { max-width: 100%; box-sizing: border-box; }
  .sv-root .sv-rail, .sv-root .sv-sbslot { max-width: none; }
  .sv-root [style*="display: flex"]:not([style*="column"]):not(.sv-sb *) { flex-wrap: wrap; }
  .sv-root[style*="grid-template-columns"]:not(.sv-split) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sv-root .sv-nowrap { flex-wrap: nowrap !important; }
  .sv-root .sv-nowrap > input, .sv-root .sv-nowrap > textarea { flex: 1 1 auto; min-width: 0 !important; }
  /* LC-2294: the Bryn chat panel keeps its own header and composer; only its thread scrolls */
  .sv-root .sv-chatpanel { height: calc(100dvh - 24px); margin: 12px !important; order: -1; } /* conversation first */
  /* composer stays reachable while the thread scrolls */
  .sv-root .sv-split > section > form:last-child { position: sticky; bottom: 0; z-index: 5; background: var(--sv-paper); }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  body.sv-has-nav #sv-bar { display: flex; }
  #sv-nav-btn { display: inline-flex !important; }
  body:not(.sv-has-nav) #sv-nav-btn { display: none !important; }
  .sv-root .sv-sbslot, .sv-root > .sv-sb {
    position: fixed !important; z-index: 60; top: 0; bottom: 0; left: 0; width: 280px !important; max-width: 86vw;
    transform: translateX(-105%); transition: transform .2s ease; visibility: hidden;
  }
  .sv-root .sv-sbslot > .sv-sb { position: static; width: 100% !important; height: 100% !important; overflow: auto; }
  .sv-root > .sv-sb { height: 100dvh !important; overflow: auto; }
  body.sv-nav-open .sv-root .sv-sbslot, body.sv-nav-open .sv-root > .sv-sb { transform: none; visibility: visible; }

  .sv-root .sv-rail { top: auto; left: 0; width: 100% !important; height: 78dvh; border-radius: 16px 16px 0 0; transform: translateY(105%); }
  body.sv-rail-open .sv-root .sv-rail { transform: none; }

  /* no horizontal scroll: fixed-width boxes shrink, rows wrap, grids stack */
  .sv-root, .sv-root * { max-width: 100%; box-sizing: border-box; }
  .sv-root .sv-rail, .sv-root .sv-sbslot { max-width: none; }
  .sv-root [style*="display: flex"]:not([style*="column"]):not(.sv-sb *) { flex-wrap: wrap; }
  .sv-root[style*="grid-template-columns"], .sv-root [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .sv-root [style*="position: absolute"] { max-width: calc(100vw - 24px); }
  .sv-root img, .sv-root svg:not([width]) { height: auto; }
  .sv-root .sv-hauto { height: auto !important; min-height: var(--sv-h0); flex-wrap: wrap; row-gap: 8px; padding-top: 6px; padding-bottom: 6px; }
  .sv-root .sv-stack { grid-template-columns: minmax(0, 1fr) !important; }
  .sv-root .sv-pad { padding-left: 16px !important; padding-right: 16px !important; }
  .sv-root [style*="font-size: 4"], .sv-root [style*="font-size: 3"] { font-size: 28px !important; line-height: 1.15 !important; }
  .sv-root [style*="white-space: nowrap"] { white-space: normal !important; }
  .sv-root textarea, .sv-root input { font-size: 16px !important; }
  .sv-root .sv-chatpanel { height: calc(100dvh - 16px); margin: 8px !important; border-radius: 12px !important; }
  .sv-root .sv-chatpanel { order: -1; } /* the conversation first; the steps list follows it */
  .sv-root .sv-chatpanel [data-bryn-header], .sv-root .sv-chatpanel [data-bryn-footer], .sv-root .sv-chatscroll { padding-left: 14px !important; padding-right: 14px !important; }

  /* tap targets >= 44px */
  .sv-root button, .sv-root [data-act], .sv-root select, .sv-root textarea,
  .sv-root input:not([type="checkbox"]):not([type="radio"]), .sv-root .sv-sb a,
  .sv-root a[style*="display: flex"], .sv-root a[style*="display: inline-flex"], .sv-root a[style*="padding"] {
    min-height: 44px !important; min-width: 44px !important;
  }
  .sv-root a:not(p a):not(li a) { display: inline-flex; align-items: center; min-height: 44px !important; min-width: 44px !important; }
  .sv-root a:not(p a):not(li a):not([style*="display"]) { justify-content: center; }
}

/* ---------- LC-2300 mobile (phone test 2026-10-06, the onboarding mobile report) ---------- */
/* The account chip is a button: a ring sets it apart from the people dots a header may also show
   (the topic header lists who is in the topic, which includes you: same initials, 30px, no ring). */
.sv-root header .lv-acct .lv-acct-dot { box-shadow: 0 0 0 2px var(--paper, var(--sv-paper)), 0 0 0 3.5px var(--navy, var(--sv-navy)); }
/* (11) the open side panel's own close button (js/fluid.js): only where the panel is a drawer */
#sv-rail-close { display: none; }
@media (max-width: 1024px) {
  /* (4) the Welcome headline was a fixed 84px: "Welcome," ran off a 360px screen */
  .sv-root .sv-display { font-size: clamp(40px, 11vw, 84px) !important; overflow-wrap: anywhere; }
  body.sv-rail-open #sv-rail-close {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; z-index: 65; top: 8px; right: 8px;
    width: 44px; height: 44px; padding: 0; border: 1px solid var(--sv-line); border-radius: 50%; background: var(--card, #fff);
    color: var(--navy); cursor: pointer; box-shadow: 0 1px 4px rgba(29,41,81,.25);
  }
  #sv-rail-close:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
}
/* (1) a phone on its side (wider than the phone layout, short): 16px text stops iOS zooming on focus */
@media (pointer: coarse) and (max-width: 1024px) and (max-height: 500px) {
  .sv-root textarea, .sv-root input, .sv-root select { font-size: 16px !important; }
}
@media (max-width: 767px) {
  .sv-root select { font-size: 16px !important; }
  /* (11) the panel is a bottom sheet 78dvh tall here: the button sits in its top-right corner */
  body.sv-rail-open #sv-rail-close { top: auto; bottom: calc(78dvh - 52px); }
  /* (7) room for the page to scroll the topic header clear of the tour sheet (js/live/tourPlace.js) */
  #app:has([data-tour-card]) { padding-bottom: var(--sv-tour-room, 0px); }
  /* (8) "open the Panel" is followable: the tour sheet steps aside while the panel is open */
  body.sv-rail-open [data-tour-card] { visibility: hidden !important; }

  /* (9) the account chip has ONE place on a phone, the screen's top-right corner: in the top bar
     where a page has it, else the top of the page's own header. It used to be the last item of a
     wrapping header row, so it landed somewhere different on each screen and over the tour's
     highlighted header. */
  .sv-root header:has(.lv-acct) { position: relative; }
  .sv-root header .lv-acct { position: absolute !important; top: 8px; right: 12px; z-index: 45; }
  body:not(.sv-has-nav):not(.sv-has-rail) .sv-root header { padding-right: 64px !important; }
  body.sv-has-nav .sv-root header .lv-acct, body.sv-has-rail .sv-root header .lv-acct { position: fixed !important; top: 6px; right: 6px; }
  body.sv-has-nav .sv-root header .lv-acct .lv-acct-dot, body.sv-has-rail .sv-root header .lv-acct .lv-acct-dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,.75); }
  body.sv-has-nav #sv-bar, body.sv-has-rail #sv-bar { padding-right: 56px; }

  /* (5) a step's text wraps beside its number, level with its first line */
  .sv-root .sv-wel-step { align-items: flex-start !important; }
  /* (10) Welcome: the Meet Bryn button is on the first screen. It follows the card's title; the
     longer description and the steps list come after it. Spacing drawn for 1440 is tightened. */
  .sv-root .sv-wel-head { padding-top: 12px !important; padding-bottom: 12px !important; gap: 4px 16px; }
  .sv-root .sv-wel-main { gap: 20px !important; padding-top: 0 !important; padding-bottom: 32px !important; }
  .sv-root .sv-wel-intro { gap: 14px !important; }
  .sv-root .sv-wel-banner { height: 56px !important; }
  .sv-root .sv-wel-body { padding-top: 20px !important; padding-bottom: 24px !important; gap: 16px !important; }
  .sv-root .sv-wel-cta { order: 1; }
  .sv-root .sv-wel-more { order: 2; }
}