/* Adaptive layout layer — styling only, no page restructuring.

   Pages keep the layout they already have. The dev adds hook attributes to the
   shell elements that already exist (one attribute each, no new elements, no
   JS) and this file reflows them per device class:

     data-shell="app"     outer flex wrapper (sidebar + content)
     data-shell-nav       the <aside> sidebar
     data-shell-main      the content column next to the sidebar
     data-shell-topbar    the page header inside the content column
     data-nav-label       the text span inside each nav item (hidden in rail /
                          bottom-bar mode; the icon stays)
     data-scroll-x        any wrapper around a wide table or timeline
     data-cols            a row of side-by-side cards/stats that should wrap
     data-toolbar        a filter/action row that should wrap instead of overflow
     data-hide-below="md|sm" element drops out on smaller screens
     data-hide-above="sm|md"  element only exists on smaller screens

   Rules use !important where the shell sets the property inline — that is the
   only way to adapt an inline-styled layout without editing the page. */

/* Universal overflow guards — the single biggest cause of the sideways-scrolling
   phone view is a fixed-width child inside a flex row that cannot shrink. */
html,body{max-width:100%;overflow-x:hidden}
/* ...but `overflow-x:hidden` on html/body computes overflow-y to `auto`, which
   makes them a SCROLL CONTAINER and silently kills `position:sticky` for every
   descendant — measured 2026-08-19: the pinned sidebar sat at top:-669 with
   scrollY 669, i.e. not sticking at all, while its computed height was correct.
   `clip` clips exactly the same way but creates NO scroll container, so the
   phone guard above is preserved and sticky works. Layered behind @supports so
   a browser without `clip` keeps the guard and merely loses the pinning — the
   safe direction to degrade. */
@supports (overflow-x: clip) { html,body{overflow-x:clip} }
img,svg,video,canvas{max-width:100%}
[data-shell-main]{min-width:0}
[data-scroll-x]{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
[data-scroll-x] > table{min-width:max-content}
/* Wide tables scroll sideways inside their card instead of pushing the page —
   the default fallback below laptop width, no markup change needed. */
@media (max-width:1023px){table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}
[data-cols]{display:flex;flex-wrap:wrap;gap:var(--gutter)}
[data-cols] > *{flex:1 1 var(--grid-min);min-width:0}
[data-grid]{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--grid-min),1fr));gap:var(--gutter)}
/* Filter / action rows wrap rather than overflow; below sm the controls share the width. */
[data-toolbar]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0}
[data-toolbar] > *{min-width:0}
@media (max-width:767px){[data-toolbar] > *{flex:1 1 auto}[data-toolbar] > [data-toolbar-fill]{flex:1 1 100%}}

/* lg and up — sidebar pinned to the viewport (Darya, browser round 2026-08-19).
   `.shell` is a flex row with the default `align-items: stretch`, so the sidebar
   grew to the PAGE height: on any long page its foot scrolled away and the user
   card — the only route to sign-out and theme — became unreachable without
   scrolling back up. `align-self` is what defeats the stretch; without it
   `block-size` is ignored and sticky has nothing to travel against.
   `.usercard-slot` keeps its `margin-block-start:auto`, so the card still sits at
   the foot — that foot is now the viewport's rather than the document's.
   Pinning is deliberately preferred over giving the shell a fixed height and
   making the main column an internal scroller: that would change scroll
   semantics, in-page anchors and the sticky topbar on every screen at once.
   Scoped >=768px so the bottom-bar layout below is untouched. */
@media (min-width:768px){
[data-shell-nav]{position:sticky;inset-block-start:0;align-self:flex-start;block-size:100vh;overflow-y:auto}
}

/* md and below — sidebar becomes an icon rail. */
@media (max-width:1023px){
[data-shell-nav]{width:var(--nav-rail-w) !important;align-items:center;padding:var(--space-2) !important}
[data-shell-nav] [data-nav-label]{display:none !important}
[data-shell-nav] [data-nav-brand] > :not(:first-child){display:none}
[data-shell-nav] nav > *{justify-content:center;padding:0 !important}
[data-shell-nav] [data-nav-foot]{display:none !important}
/* The user card ([data-nav-user], NOT inside data-nav-foot) survives the rail:
   name/phone spans carry data-nav-label so the rule above hides them and the
   avatar alone remains — one concept, honest small form. */
[data-shell-nav] [data-nav-user]{padding:var(--space-2) 0 0 !important;display:flex;justify-content:center}
[data-shell-topbar]{padding-inline:var(--page-pad) !important;gap:var(--space-2) !important}
[data-hide-below="md"]{display:none !important}
}

/* sm and below — the rail moves to a bottom bar; content becomes one column. */
@media (max-width:767px){
[data-shell="app"]{flex-direction:column !important;height:auto !important;min-height:100dvh;overflow:visible !important}
[data-shell-nav]{position:fixed !important;inset:auto 0 0 0;width:100% !important;height:var(--bottombar-h);flex-direction:row !important;justify-content:space-around;gap:0 !important;padding:0 var(--space-2) !important;z-index:60;border-top:1px solid var(--border-inverse);padding-bottom:env(safe-area-inset-bottom) !important}
[data-shell-nav] [data-nav-brand]{display:none !important}
[data-shell-nav] nav{flex-direction:row !important;flex:1;justify-content:space-between;overflow-x:auto;gap:0 !important;scrollbar-width:none}
[data-shell-nav] nav::-webkit-scrollbar{display:none}
[data-shell-nav] nav > *{flex:0 0 auto;height:var(--bottombar-h) !important;min-width:var(--touch-min);box-shadow:none !important;border-radius:0 !important}
/* Bottom bar: the user card rides as the last item in the row — avatar only. */
[data-shell-nav] [data-nav-user]{padding:0 !important;border:0 !important;margin:0 !important;display:flex;align-items:center;justify-content:center;height:var(--bottombar-h)}
[data-shell-main]{padding-bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom)) !important;overflow:visible !important}
[data-shell-topbar]{height:auto !important;flex-wrap:wrap;padding:var(--space-2) var(--page-pad) !important;position:sticky;top:0;z-index:40}
[data-shell-topbar] > *{min-width:0}
[data-hide-below="sm"]{display:none !important}
/* side panels and split views stack */
[data-split]{flex-direction:column !important;grid-template-columns:1fr !important}
[data-split] > *{width:auto !important;flex:0 0 auto !important;min-width:0}
/* dense tables become card rows where the page opted in */
[data-stack-rows] thead{display:none}
[data-stack-rows] tr{display:grid;grid-template-columns:1fr;gap:2px;padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle)}
[data-stack-rows] td{border:0 !important;padding:0 !important}
[data-stack-rows] td[data-label]::before{content:attr(data-label) " ";font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-inline-end:var(--space-2)}
}
@media (min-width:768px){[data-hide-above="sm"]{display:none !important}}
@media (min-width:1024px){[data-hide-above="md"]{display:none !important}}

/* Component adaptations live in a separate file so they can be re-cut against a port's own
   class names: load components.zs.css (reference kit) OR components.stms.css (production port),
   never both. */

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}