/* 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) {
  body.sv-has-rail #sv-bar {
    display: flex; 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;
  }
  #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: #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; }
  /* 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; }

  /* 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; }
}