/* SIMUL8OR LAYOUT + RESPONSIVE v0.1 — load after s8-ui.css.
   Touch density is driven from the tokens, so components inherit it. */

/* ── TOUCH DENSITY: metrics lift on narrow screens and coarse pointers ── */
@media (max-width:900px),(pointer:coarse){:root{
--s8-h-xs:26px;--s8-h-sm:36px;--s8-h:44px;--s8-h-lg:48px;--s8-row:48px;--s8-toolbar:54px;--s8-rail:56px;
--s8-fs-xs:13px;--s8-fs-sm:14px;--s8-fs-md:15px;--s8-fs-base:16px;--s8-r:6px;--s8-r-lg:10px}
.s8-iconbtn svg{width:19px;height:19px}
.s8-btn svg{width:16px;height:16px}
.s8-tbtn{padding:0 12px}
.s8-check input{width:20px;height:20px}
.s8-check input:checked::after{width:5px;height:10px;margin:2px 0 0 6px}
.s8-switch i{width:42px;height:24px}
.s8-switch i::after{width:18px;height:18px}
.s8-switch input:checked + i::after{transform:translateX(18px)}
.s8-stepper input{flex:1}
.s8-table th{height:34px}
}
@media (pointer:coarse){.s8-btn,.s8-iconbtn,.s8-tbtn,.s8-chip,.s8-seg button,.s8-tabs button,.s8-menu button{-webkit-tap-highlight-color:transparent}
.s8-btn:hover,.s8-iconbtn:hover,.s8-tbtn:hover{background:inherit}}

/* ── CONTAINERS ───────────────────────────────────────────────── */
.s8-container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--s8-6)}
.s8-container--narrow{max-width:820px}
.s8-container--wide{max-width:1440px}
.s8-prose{max-width:68ch}
.s8-prose p,.s8-prose ul,.s8-prose ol{font-size:var(--s8-fs-base);line-height:1.65;color:var(--s8-fg);text-wrap:pretty}
.s8-prose h2{margin:var(--s8-7) 0 var(--s8-2)}
.s8-prose h3{margin:var(--s8-5) 0 var(--s8-1)}
.s8-stack{display:flex;flex-direction:column;gap:var(--s8-3)}
.s8-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8-2)}
.s8-grid{display:grid;gap:var(--s8-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.s8-spacer{flex:1}
@media (max-width:640px){.s8-container{padding-inline:var(--s8-4)}}

/* ── APP FRAME ────────────────────────────────────────────────── */
.s8-app{min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--s8-bg)}
.s8-workspace{display:grid;grid-template-columns:var(--s8-rail) minmax(0,1fr) 300px;min-height:0}
.s8-workspace__main{display:flex;flex-direction:column;min-width:0;min-height:0;border-inline:1px solid var(--s8-line)}
.s8-workspace__side{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--s8-panel);overflow:auto}
@media (max-width:1180px){.s8-workspace{grid-template-columns:var(--s8-rail) minmax(0,1fr) 268px}}
@media (max-width:1024px){.s8-workspace{grid-template-columns:var(--s8-rail) minmax(0,1fr)}.s8-workspace__side{display:none}}
@media (max-width:720px){.s8-workspace{grid-template-columns:minmax(0,1fr)}.s8-workspace__main{border-inline:0}}

/* ── MOBILE APP BAR ───────────────────────────────────────────── */
.s8-appbar{display:none;align-items:center;gap:var(--s8-2);height:var(--s8-toolbar);padding:0 var(--s8-2);padding-top:env(safe-area-inset-top);background:var(--s8-panel);border-bottom:1px solid var(--s8-line)}
.s8-appbar__title{flex:1;min-width:0;font-size:var(--s8-fs-base);font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s8-appbar__sub{display:block;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--s8-fg-3)}
@media (max-width:720px){.s8-appbar{display:flex}}

/* ── BOTTOM TAB BAR ───────────────────────────────────────────── */
.s8-tabbar{display:none;background:var(--s8-panel);border-top:1px solid var(--s8-line);padding-bottom:env(safe-area-inset-bottom)}
.s8-tabbar__inner{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:56px}
.s8-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--s8-fg-2);font:inherit;font-size:11px;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:color var(--s8-t-fast) var(--s8-ease)}
.s8-tabbar button svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s8-tabbar button[aria-current="page"],.s8-tabbar button.is-on{color:var(--s8-accent-fg)}
@media (max-width:720px){.s8-tabbar{display:block}}

/* ── SHEET: mobile stand-in for side panels and menus ─────────── */
.s8-sheet{position:fixed;inset:auto 0 0 0;z-index:60;display:flex;flex-direction:column;max-height:86dvh;background:var(--s8-panel);border-top:1px solid var(--s8-line-2);border-radius:var(--s8-r-lg) var(--s8-r-lg) 0 0;box-shadow:var(--s8-pop-lg);transform:translateY(100%);transition:transform var(--s8-t-slow) var(--s8-ease);padding-bottom:env(safe-area-inset-bottom)}
.s8-sheet.is-open{transform:none}
.s8-sheet__grip{flex:none;width:36px;height:4px;margin:8px auto 4px;border-radius:var(--s8-r-pill);background:var(--s8-line-3)}
.s8-sheet__head{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-h-lg);padding:0 var(--s8-3);border-bottom:1px solid var(--s8-line)}
.s8-sheet__head .s8-h3{flex:1;min-width:0}
.s8-sheet__body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.s8-sheet__foot{flex:none;padding:var(--s8-3);border-top:1px solid var(--s8-line);background:var(--s8-panel-2)}
.s8-scrim{z-index:50;opacity:0;pointer-events:none;transition:opacity var(--s8-t-slow) var(--s8-ease)}
.s8-scrim.is-open{opacity:1;pointer-events:auto}
@media (min-width:721px){.s8-sheet{position:static;max-height:none;transform:none;border:0;border-radius:0;box-shadow:none;padding-bottom:0}.s8-sheet__grip{display:none}}

/* ── MODAL → SHEET on phones ──────────────────────────────────── */
@media (max-width:640px){
.s8-modal{max-width:none;border-radius:var(--s8-r-lg) var(--s8-r-lg) 0 0;border-width:1px 0 0}
.s8-modal__foot{flex-direction:column-reverse;gap:var(--s8-2);padding-bottom:calc(var(--s8-3) + env(safe-area-inset-bottom))}
.s8-modal__foot .s8-btn{width:100%;height:var(--s8-h-lg)}
.s8-menu{width:100%;min-width:0}
.s8-toast{max-width:none}
}

/* ── SCROLLING TOOLBAR: never clip controls ───────────────────── */
.s8-toolbar{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.s8-toolbar::-webkit-scrollbar{display:none}
.s8-toolbar > *{flex:none}
.s8-toolbar__spacer{flex:1 1 auto;min-width:var(--s8-2)}
.s8-tabs{overflow-x:auto;scrollbar-width:none}
.s8-tabs::-webkit-scrollbar{display:none}
.s8-tabs button{flex:none}
.s8-seg--fill{display:flex;width:100%}
.s8-seg--fill button{flex:1}

/* ── RESPONSIVE TABLES: drop low-priority columns, never squash ─ */
.s8-tablewrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:900px){.s8-col-opt{display:none}}
@media (max-width:560px){.s8-col-opt-sm{display:none}}

/* ── VISIBILITY UTILITIES ─────────────────────────────────────── */
@media (max-width:720px){.s8-hide-sm{display:none !important}}
@media (min-width:721px){.s8-only-sm{display:none !important}}
@media (max-width:1024px){.s8-hide-md{display:none !important}}

/* ── PLACEHOLDER: where real content mounts ───────────────────── */
.s8-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;background:var(--s8-inset);background-image:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.03) 7px 14px);color:var(--s8-fg-3);font-family:var(--s8-mono);font-size:var(--s8-fs-sm);letter-spacing:var(--s8-ls-caps);text-transform:uppercase;text-align:center;padding:var(--s8-4)}