/* AUTO-GENERERAD av scripts/sync-floor-shell.mjs ur public/sdk/design-floor.css (avsnitten mellan SKALET-markörerna) — redigera INTE.
   Källa: functions/api/v1/project/_lib/floor/*.css. Skalets mekanik utan golvets elementåterställningar, så att en värd med
   egen stil kan använda skalet (docs/SKALET.md Del 1). Samma lagerordning som golvet: värdens oskiktade CSS vinner alltid. */
@layer eontra.reset, eontra.base, eontra.layout, eontra.components, eontra.state, eontra.utility;

@layer eontra.layout {
  /* ── App shell: hela kompositionen deklareras med tva custom properties ──
     <div class="app-shell" style="--areas:'h h h' 'l m r' 'f f f'; --cols:240px 1fr 280px">
       <header data-region="h">  <aside data-region="l">  <main data-region="m"> ...
     Regionnamnen ar fria: [data-region] mappas automatiskt till grid-area.        */
  .app-shell {
    display: grid;
    grid-template-areas: var(--areas, "header" "main" "footer");
    grid-template-columns: var(--cols, 1fr);
    grid-template-rows: var(--rows, auto 1fr auto);
    min-block-size: 100svh;
    gap: var(--shell-gap, 0);
  }
  .app-shell > [data-region] { grid-area: var(--region, auto); min-inline-size: 0; }
  /* IDENTITETSMAPPNING: grid-area-namnet ar EXAKT det attributet sager.
     Tidigare mappades korta namn till langa (h -> header), vilket gjorde att
     --areas:"h h h" deklarerade omraden som inget element nagonsin placerades i.
     Allt auto-placerades och layouten kollapsade. Nu maste namnet i --areas vara
     samma strang som i data-region — sjalvkonsistent och omojligt att kombinera fel. */
  [data-region="header"] { --region: header; } [data-region="h"] { --region: h; }
  [data-region="main"]   { --region: main; }   [data-region="m"] { --region: m; }
  [data-region="footer"] { --region: footer; } [data-region="f"] { --region: f; }
  [data-region="left"]   { --region: left; }   [data-region="l"] { --region: l; }
  [data-region="right"]  { --region: right; }  [data-region="r"] { --region: r; }
  [data-region="aside"]  { --region: aside; }  [data-region="nav"] { --region: nav; }
  [data-region="a"] { --region: a; } [data-region="b"] { --region: b; }
  [data-region="c"] { --region: c; } [data-region="d"] { --region: d; }

  /* LAYOUT-PRESETS: namngivna app-shell-kompositioner. data-layout satter --areas/--cols/--rows sa AI:n slipper hand-komponera rutnatet — mekaniskt, och byggets vanligaste fel (kolumner vs spar). Inline style="--areas:..." VINNER over presetten (hogre specificitet) sa ett bespoke skal kan alltid overrida. Mobil: golvets auto-stack (<40rem, en kolumn i DOM-ordning) galler som vanligt; lagg data-collapse/data-drawer for sidopanels-kollaps/drawer. Regionnamnen ar de KORTA (h/l/m/r/f) — matcha med data-region pa varje region. Valj presetten vars region-set matchar din design. --rail-l/--rail-r tunar sidopanels-bredderna utan att rora --areas. */
  .app-shell[data-layout="holy-grail"]  { --areas: "h h h" "l m r" "f f f"; --cols: var(--col-l, var(--rail-l, 15rem)) var(--col-m, 1fr) var(--col-r, var(--rail-r, 17rem)); --rows: auto 1fr auto; }
  .app-shell[data-layout="sidebar"]      { --areas: "h h" "l m" "f f"; --cols: var(--col-l, var(--rail-l, 15rem)) var(--col-m, 1fr); --rows: auto 1fr auto; }
  .app-shell[data-layout="sidebar-full"] { --areas: "l h" "l m" "l f"; --cols: var(--col-l, var(--rail-l, 15rem)) var(--col-m, 1fr); --rows: auto 1fr auto; }
  .app-shell[data-layout="content-rail"] { --areas: "h h" "m r" "f f"; --cols: var(--col-m, 1fr) var(--col-r, var(--rail-r, 17rem)); --rows: auto 1fr auto; }
  .app-shell[data-layout="topbar"]       { --areas: "h" "m" "f"; --cols: 1fr; --rows: auto 1fr auto; }
  /* QUAD (4-kol: ikon-rail a + lista l + main m + trad/detalj r) — Slack/Discord/IDE. Alla fyra ar scroll-regioner (a/l/m/r i data-fill-listan). --rail-a/-l/-r tunar. */
  .app-shell[data-layout="quad"] { --areas: "h h h h" "a l m r" "f f f f"; --cols: var(--col-a, var(--rail-a, 4.5rem)) var(--col-l, var(--rail-l, 15rem)) var(--col-m, 1fr) var(--col-r, var(--rail-r, 20rem)); --rows: auto 1fr auto; }
  /* IKONKOLUMN (docs/SKALET.md Del 1): data-rail="icons" pa app-shell fäller vänsterkolumnen (l, i quad a) till en smal ikonkolumn. Kolumnbredden byts via --cols (inte --col-l), sa en sparad data-resizable-bredd (inline --col-l) inte vinner over ikonlaget; data-collapsed nollar den som vanligt. Bara presetterna (sidebar, sidebar-full, holy-grail, quad) — ett eget inline --cols vinner alltid. Smal skarm (<40rem) staplar eller visar nedre raden, darfor galler den bara over 40rem. --rail-icons tunar bredden. */
  @media (min-width: 40.0625rem) {
    .app-shell[data-rail="icons"] { --rail-icons-col: var(--rail-icons, 3.75rem); }
    .app-shell[data-rail="icons"][data-collapsed~="l"]:not([data-layout="quad"]), .app-shell[data-rail="icons"][data-collapsed~="a"][data-layout="quad"] { --rail-icons-col: 0px; }
    .app-shell[data-rail="icons"]:is([data-layout="sidebar"], [data-layout="sidebar-full"]) { --cols: var(--rail-icons-col) var(--col-m, 1fr); }
    .app-shell[data-rail="icons"][data-layout="holy-grail"] { --cols: var(--rail-icons-col) var(--col-m, 1fr) var(--col-r, var(--rail-r, 17rem)); }
    .app-shell[data-rail="icons"][data-layout="quad"] { --cols: var(--rail-icons-col) var(--col-l, var(--rail-l, 15rem)) var(--col-m, 1fr) var(--col-r, var(--rail-r, 20rem)); }
  }
  /* KOLLAPSBAR PANEL (desktop): data-collapse-toggle-knappen (SDK) satter en token i data-collapsed pa skalet. Har nollas panelens KOLONNSPAR (--col-X:0) OCH panelen doljs → rutnatet reflowar (till skillnad fran display:none ensamt, som lamnar ett tomt spar). Generiskt: funkar for alla presets som anvander --col-*-varen. Mobil-drawern ar for sma skarmar; detta ar desktop-motsvarigheten (dolj detaljpanel nar inget valt, falt ral till main). */
  .app-shell[data-collapsed~="l"] { --col-l: 0; } .app-shell[data-collapsed~="r"] { --col-r: 0; } .app-shell[data-collapsed~="a"] { --col-a: 0; } .app-shell[data-collapsed~="m"] { --col-m: 0; }
  .app-shell[data-collapsed~="l"] > :where([data-region=l],[data-region=left]), .app-shell[data-collapsed~="r"] > :where([data-region=r],[data-region=right]), .app-shell[data-collapsed~="a"] > :where([data-region=a],[data-region=aside]), .app-shell[data-collapsed~="m"] > :where([data-region=m],[data-region=main]) { display: none; }

  /* APP-FRAME (data-fill): app-shell fyller viewporten; panelerna scrollar var for sig i stallet for sidan. Master-detail-foundation (mail/chatt/filhanterare). Opt-in — utan data-fill vaxer shellen med innehallet (dagens beteende). min-block-size:0 bryter grid-barnets implicita min-height:auto som annars laser scroll. Bara innehalls-regioner (m/l/r/a/nav) scrollar; header/footer (h/f) ar fasta band. Ociterade attributselektorer (JS-strang-sakert). */
  html:has(.app-shell[data-fill]), html:has(.app-shell[data-field]), body:has(.app-shell[data-fill]), body:has(.app-shell[data-field]) { block-size: 100%; min-block-size: 0; overflow: hidden; } /* HARDNING: nar en data-fill-shell finns pa sidan far html/body en bestamd hojd-kedja (100%% av iframens/viewportens bestamda hojd) + overflow:hidden, sa SIDAN aldrig kan scrolla aven om dvh missreporterar i en viss preview-/iframe-kontext. Belt-and-suspenders utover shellens egen 100dvh. */ .app-shell[data-fill], .app-shell[data-field] { block-size: 100dvh; min-block-size: 0; overflow: hidden; }
  .app-shell[data-fill] > [data-region], .app-shell[data-field] > [data-region] { min-block-size: 0; }
  .app-shell[data-fill] > :where([data-region=m], [data-region=main], [data-region=l], [data-region=left], [data-region=r], [data-region=right], [data-region=a], [data-region=aside], [data-region=b], [data-region=c], [data-region=d], [data-region=nav]), .app-shell[data-field] > :where([data-region=m], [data-region=main], [data-region=l], [data-region=left], [data-region=r], [data-region=right], [data-region=a], [data-region=aside], [data-region=b], [data-region=c], [data-region=d], [data-region=nav]) { overflow-y: auto; overscroll-behavior: contain; }
}

@layer eontra.components {
  /* ── Chrome: header / sidebar / footer ──────────────────────────────── */
  .bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); padding-block: var(--space-sm); padding-inline: calc(var(--content-gutter-x, clamp(1rem, 3.5vw, 2.5rem)) * var(--w-space, 1));
    background-color: var(--glass-bg, var(--surface));
    background-image: var(--chrome-accent, none);
    backdrop-filter: blur(var(--glass-blur, 0px)); border-block-end: 1px solid var(--border);

    box-shadow: var(--chrome-shadow, 0 2px 4px rgba(0,0,0,0.07));
    border-radius: var(--chrome-radius, 0);
    /* CHROME-MARGINAL: floating chrome (radie) MASTE ha luft runtom annars ser det lossnat ut (rundat kant-i-kant = bakgrunds-ficka i hornet). --chrome-margin ar 0 for bar (kant-till-kant) och en inset for floating — deriveras men applicerades aldrig forr. */
    margin: var(--chrome-margin, 0);
  }
  .bar[data-sticky] { position: sticky; inset-block-start: 0; z-index: 50; } /* BAR PAD-TO-CAP: en page-level .bar (ej i app-shell) ska halla sitt innehall i linje med det --content-max-capade mainen pa breda skarmar. Baren forblir full-bredd (bakgrund/kant spanner viewporten) men paddingen vaxer sa brand/nav landar pa samma kant som main/footer. Bars I en app-shell (dashboard-header/botten-nav) lamnas pa gutter — appen ar full-bredd. Verifierat 1280/1920/2560: brand linjerar med main/footer (40->680px). */ .bar:not(.app-shell *) { padding-inline: calc(max(var(--content-gutter-x, clamp(1rem, 3.5vw, 2.5rem)), (100% - var(--content-max, 80rem)) / 2 + var(--content-gutter-x, clamp(1rem, 3.5vw, 2.5rem))) * var(--w-space, 1)); }
  /* SCROLL-ELEVATION: en sticky topp-bar fordjupar sin skugga nar sidan scrollas (polish som AI:n annars hand-rullar med en scroll-lyssnare). Ren CSS via scroll-timeline, INGET JS. @supports-gated → browsers utan scroll-timeline behaller barens statiska skugga (graceful). @media reduced-motion hoppar over. Botten-bar (data-bottom) berors ej. */
  @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .bar[data-sticky]:not([data-bottom]) { animation: eontra-bar-elevate linear both; animation-timeline: scroll(root block); animation-range: 0 6rem; } @keyframes eontra-bar-elevate { from { box-shadow: var(--chrome-shadow, 0 2px 4px rgba(0,0,0,0.07)); } to { box-shadow: var(--shadow-raised, 0 4px 16px rgb(0 0 0 / .12)); } } } }
  .bar[data-bottom] { border-block-start: 1px solid var(--border); border-block-end: 0; } /* BOTTEN-NAV: en data-bottom-bar med data-sticky ska fastna i BOTTEN, inte toppen. .bar[data-sticky] satter inset-block-start:0; overrida for botten-varianten. */ .bar[data-bottom][data-sticky] { inset-block-start: auto; inset-block-end: 0; } /* STICKY RAIL (opt-in, best practice for sidopanels-nav): data-sticky pa en .rail haller sidomenyn synlig medan main scrollar (root-scroll-modell). align-self:start = railen far sin egen hojd (ej strackt till main:s) och fastnar i toppen; egen scroll nar nav ar langre an skarmen. Speglar .bar[data-sticky]. Finns en TOPP-sticky .bar i shellen (holy-grail) satts --chrome-top till barens hojd sa railen fastnar UNDER baren, inte under den. --chrome-top / --bar-block-size tunar. */ .app-shell:has(> .bar[data-sticky]:not([data-bottom])) { --chrome-top: var(--bar-block-size, 3.5rem); } .rail[data-sticky] { position: sticky; inset-block-start: var(--chrome-top, 0); align-self: start; max-block-size: calc(100dvh - var(--chrome-top, 0px)); overflow-y: auto; }
  .rail {
    display: flex; flex-direction: column; gap: var(--space-2xs, .25rem);
    padding: var(--space-lg) var(--space-md); background-color: var(--glass-bg, var(--sidebar-bg, var(--surface))); color: var(--sidebar-text, var(--text));
    background-image: var(--chrome-accent, none);
    backdrop-filter: blur(var(--glass-blur, 0px));
    border-inline-end: 1px solid var(--border);
    box-shadow: var(--chrome-shadow, 2px 0 4px rgba(0,0,0,0.05));
    border-radius: var(--chrome-radius, 0);
    margin: var(--chrome-margin, 0);
    overflow-y: auto; min-block-size: 0; }
  .rail[data-edge="start"] { border-inline-end: var(--chrome-border, 1px solid var(--border)); }
  .rail[data-edge="end"]   { border-inline-start: var(--chrome-border, 1px solid var(--border)); } /* RAIL-WIDGET-SPACING: rail-gapet (space-2xs) ar kalibrerat for TATA nav-items. Bar railen WIDGETS (card/panel/section/stack) blir det for trangt — de far luft mellan sig sa de laser som separata widgets, inte hopklibbade. Nav-items rors ej. */ .rail > :where(.card, .panel, section, .stack):not(:first-child) { margin-block-start: var(--space-md); }
}

@layer eontra.components {
  /* HAMBURGER: .nav-toggle ar knappen som oppnar mobil-drawern. Dold pa desktop, syns nar sidomenyn kollapsar (<40rem). Lagg den i .bar; SDK:n Eontra.nav.toggleDrawer wirar den. */
  .nav-toggle { display: none; }
  .nav-toggle { padding: var(--space-xs); background: none; border: 0; cursor: pointer; color: inherit; border-radius: calc((var(--radius-sm, .3rem)) * var(--radius-scale, 1)); }
  .nav-toggle svg { inline-size: 1.5rem; block-size: 1.5rem; }
}

@layer eontra.components {
  /* ── Navigation ─────────────────────────────────────────────────────── */
  .nav { display: flex; gap: var(--space-2xs, .25rem); flex-wrap: wrap; }
  .nav[data-vertical] { flex-direction: column; flex-wrap: nowrap; }
}

@layer eontra.components {
  .nav-item, .rail a, .nav a {
    transition: background calc(var(--transition-base, .2s) * var(--motion-scale, 1)) ease, color calc(var(--transition-base, .2s) * var(--motion-scale, 1)) ease;
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: calc((var(--radius-md, var(--radius, .5rem))) * var(--radius-scale, 1));
    color: inherit; text-decoration: none; font-weight: 500;
    font-size: var(--font-size-body, 1rem); line-height: 1.2;
    background: none; border: 0; cursor: pointer; text-align: start;
    transition: background calc(var(--transition-fast, .15s) * var(--motion-scale, 1)), color calc(var(--transition-fast, .15s) * var(--motion-scale, 1));
  }
  .nav-item:hover, .rail a:hover, .nav a:hover {
    background: var(--accent-surface, color-mix(in oklab, var(--primary) 8%, transparent));
    color: var(--on-accent-surface, var(--primary-readable, var(--primary)));
  }
  .nav-item[aria-current], .rail a[aria-current], .nav a[aria-current],
  .nav-item.is-active, .rail a.is-active, .nav a.is-active,
  .nav-item.active, .rail a.active, .nav a.active {
    background: var(--primary); color: var(--on-primary, #fff);
  }
  .nav-item svg, .rail a svg { inline-size: 1.15em; block-size: 1.15em; flex: none; opacity: .75; }
  .nav-item[aria-current] svg { opacity: 1; } /* TRAILING i nav-item: ett count/badge/tag (eller [data-trailing]) som SISTA barn puttas till hoger kant (Inbox 3-monstret) i stallet for att klistra efter etiketten. */ :where(.nav-item, .rail a, .nav a) > :where(.badge, .tag, [data-trailing]):last-child { margin-inline-start: auto; }
  /* IKONKOLUMN — kolumnens innehall i ikonlaget (docs/SKALET.md Del 1). Etiketten doljs visuellt men star kvar for skarmlasare (textnoder via font-size:0, barnelement klipps); SDK:n (Eontra.layout) visar den som verktygstips vid hover OCH fokus. Raknare (.badge/[data-count]) blir en prick. Bara forsta ikonen ([data-icon] eller forsta svg) syns; ett objekt utan ikon visar sin initial (data-shell-initial, satts av SDK:n). Rubriker, stycken och falt i kolumnen doljs (data-rail-hide for ovrigt). */
  @media (min-width: 40.0625rem) {
    :is(.app-shell[data-rail="icons"]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-rail="icons"][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) { overflow-x: hidden; padding-inline: var(--space-2xs, .25rem); }
    :is(.app-shell[data-rail="icons"]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-rail="icons"][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :where(.nav-item, .nav a, .rail a) { position: relative; justify-content: center; gap: 0; inline-size: 100%; min-inline-size: 0; min-block-size: var(--rail-icon-target, 2.75rem); padding-inline: 0; font-size: 0; line-height: 0; }
    :is(.app-shell[data-rail="icons"]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-rail="icons"][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :where(.nav-item, .nav a, .rail a) > :not(svg, [data-icon], :has(svg), .badge, [data-count], [data-badge]) { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    :is(.app-shell[data-rail="icons"]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-rail="icons"][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :where(.nav-item, .nav a, .rail a) :where(svg, [data-icon]) { inline-size: var(--rail-icon-size, 1.25rem); block-size: var(--rail-icon-size, 1.25rem); font-size: var(--rail-icon-size, 1.25rem); line-height: 1; opacity: 1; flex: none; }
    :is(.app-shell[data-rail="icons"]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-rail="icons"][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :where(.nav-item, .nav a, .rail a) > :is(svg, [data-icon], :has(svg)) ~ :is(svg, :has(svg)):not([data-icon]) { display: none; }
    :is(.app-shell[data-rail="icons"]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-rail="icons"][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :where(.nav-item, .nav a, .rail a) > :is(.badge, [data-count], [data-badge]) { position: absolute; inset-block-start: var(--space-2xs, .25rem); inset-inline-end: var(--space-xs, .5rem); inline-size: .5rem; block-size: .5rem; min-inline-size: 0; min-block-size: 0; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full, 999px); overflow: hidden; font-size: 0; line-height: 0; color: transparent; background: var(--danger, var(--primary)); box-shadow: 0 0 0 2px var(--sidebar-bg, var(--surface)); }
    :is(.app-shell[data-rail="icons"]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-rail="icons"][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :where(.nav-item, .nav a, .rail a):not(:has(svg, [data-icon]))::before { content: attr(data-shell-initial); font-size: var(--font-size-body, 1rem); line-height: 1; font-weight: 600; }
    :is(.app-shell[data-rail="icons"]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-rail="icons"][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :where(h1, h2, h3, h4, h5, h6, p, .eyebrow, input, select, textarea, [data-rail-hide]) { display: none; }
    :is(.app-shell[data-rail="icons"]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-rail="icons"][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :where(.brand) { justify-content: center; font-size: 0; }
    :is(.app-shell[data-rail="icons"]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-rail="icons"][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :where([data-rail-toggle]) { align-self: center; }
  }
  /* Knappen data-rail-toggle (SDK:n satter aria-pressed och aria-label "Fall ihop/ut kolumnen"; en tom knapp far en pil). Pilen vands i ikonlaget. */
  [data-rail-toggle]:not([data-variant]) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs, .5rem); padding: var(--space-xs, .5rem); border: 0; border-radius: var(--radius-md, .5rem); background: none; color: inherit; box-shadow: none; cursor: pointer; }
  [data-rail-toggle]:not([data-variant]):hover { background: var(--surface-hover, color-mix(in oklab, var(--text) 6%, transparent)); }
  [data-rail-toggle] svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; transition: transform calc(var(--transition-fast, .15s) * var(--motion-scale, 1)) var(--ease-standard, ease); }
  .app-shell[data-rail="icons"] [data-rail-toggle] svg { transform: scaleX(-1); }
  /* Verktygstipset i ikonkolumnen: ett element som SDK:n placerar bredvid objektet (aria-hidden — etiketten finns redan i objektet). */
  [data-shell-tip] { position: fixed; z-index: var(--z-popover, 300); pointer-events: none; max-inline-size: 16rem; padding: var(--space-3xs, .125rem) var(--space-xs, .5rem); border-radius: var(--radius-sm, .25rem); background: var(--text); color: var(--background); font-size: var(--font-size-small, .8125rem); font-weight: 500; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-popover, 0 4px 12px rgb(0 0 0 / .18)); }
  [data-shell-tip][hidden] { display: none; }
  /* Mer-knappen i mobilens nedre rad (data-tabbar) ritas av SDK:n och syns bara dar. */
  [data-shell-more] { display: none; }
}

@media (max-width: 60rem) {
  @layer eontra.layout {
    .app-shell[data-collapse] { grid-template-areas: var(--areas-md, var(--areas)); grid-template-columns: var(--cols-md, var(--cols, 1fr)); }
  }
}
@media (max-width: 40rem) {
  @layer eontra.layout {
    .app-shell[data-collapse] { grid-template-areas: var(--areas-sm, none); grid-template-columns: var(--cols-sm, 1fr); grid-template-rows: var(--rows-sm, none); } .app-shell[data-collapse] > [data-region] { grid-area: var(--region-sm, auto); align-self: start; } /* Sticky rail neutraliseras nar shellen staplar (annars fastnar full-bredds-railen over innehallet). */ .rail[data-sticky] { position: static; max-block-size: none; } /* KROSS-SKYDD: en app-shell utan data-collapse (byggd med t.ex. --areas:"l m" men ingen responsiv variant) lat forr en fast sidopanel krossa main till en olasbar sliver pa smal skarm (uppmatt: 220px rail @360px vy -> main 140px -> text bryts ord for ord). Nu staplar aven en icke-collapse app-shell till en kolumn <40rem sa main alltid far last bredd. Opt-out med data-no-stack. Respekterar appens egna --cols-sm/--areas-sm om satta. */ .app-shell:not([data-collapse]):not([data-no-stack]) { grid-template-areas: var(--areas-sm, none); grid-template-columns: var(--cols-sm, 1fr); grid-template-rows: var(--rows-sm, none); } .app-shell:not([data-collapse]):not([data-no-stack]) > [data-region] { grid-area: var(--region-sm, auto); align-self: start; }
    /* REGIONSTINT: atmosfaren som ytfarg. Bakgrundslagret ligger bakom allt och syns bara i rannorna — uppmatt tacker skalet 71 %% av viewporten med opaka ytor, och standardkompositionernas moln ligger EXAKT dar chromet ligger. Harledningen samplar molnfaltet per region och ger en solid ton; har omdefinieras --surface inom regionen, sa bar/rail/card arver sin zons ton UTAN att andras. Faller alltid tillbaka pa --surface-base, som emitteras aven utan atmosfar. */ .app-shell > [data-region="h"], .app-shell > [data-region="header"] { --surface: var(--surface-h, var(--surface-base)); } .app-shell > [data-region="l"], .app-shell > [data-region="left"] { --surface: var(--surface-l, var(--surface-base)); } .app-shell > [data-region="m"], .app-shell > [data-region="main"] { --surface: var(--surface-m, var(--surface-base)); } .app-shell > [data-region="r"], .app-shell > [data-region="right"] { --surface: var(--surface-r, var(--surface-base)); } .app-shell > [data-region="f"], .app-shell > [data-region="footer"] { --surface: var(--surface-f, var(--surface-base)); } .app-shell[data-collapse] > [data-region="left"], .app-shell[data-collapse] > [data-region="right"],
    .app-shell[data-collapse] > [data-region="l"], .app-shell[data-collapse] > [data-region="r"] { display: none; } .app-shell[data-collapse] > :where([data-region="a"],[data-region="b"],[data-region="c"],[data-region="d"]) { display: none; }
  }
  @layer eontra.components { /* .bar mobil-override borttagen: bas-regelns content-gutter-clamp (floor 1rem) haller alignmentet mot main/footer aven pa mobil; en space-md-override gjorde baren tightare an innehallet. */  /* ÖVERSTA RADEN PÅ MOBIL: en nav i .bar bröts ord för ord (headern blev 22–28 % av skärmen) och verktygsraden (sök + knapp, nowrap) tvingade fram sidledsscroll. Nu: navigeringen får en egen rad under, som rullar i sidled; verktygsraden krymper och sökfältet ger efter. */ .bar.bar.bar:has(> :is(nav, .nav):not([data-vertical])), .bar.bar.bar:has(> :is(.toolbar, .cluster) :is(input, select)) { flex-wrap: wrap; row-gap: var(--space-xs, .25rem); } /* Specificiteten (tre .bar) slår golvets allmänna nav-regel (nav:not(...):not(...)…, flex-wrap: wrap). */ .bar.bar.bar > :is(nav, .nav):not([data-vertical]) { order: 99; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; min-inline-size: 0; } .bar.bar.bar > :is(nav, .nav):not([data-vertical]) > * { flex: none; white-space: nowrap; } /* Sök + knappar får en egen hel rad under titeln, i stället för att trängas bredvid den och bryta. */ .bar.bar.bar > :is(.toolbar, .cluster):has(:is(input, select)) { order: 98; flex: 1 0 100%; flex-wrap: nowrap; min-inline-size: 0; } :where(.bar :is(input[type=search], input[type=text], input:not([type]))) { min-inline-size: 0; inline-size: auto; flex: 1 1 5rem; } }
  @layer eontra.components { .app-shell[data-collapse][data-drawer]:not([data-tabbar]) .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } }
  /* KOLLAPS-FIX: hide-regeln ovan ligger i @layer eontra.layout, men .rail sätter display:flex i
     eontra.components (senare lager → vinner), så en rail-baserad sidomeny kollapsade ALDRIG. En OSKIKTAD
     regel slår alla lager oavsett ordning (kaskad-spec: unlayered > layered). Nu döljs sidomenyn
     faktiskt vid <40rem när app-shell bär data-collapse. */
  .app-shell[data-collapse]:not([data-tabbar]) > [data-region="left"], .app-shell[data-collapse] > [data-region="right"],
  .app-shell[data-collapse]:not([data-tabbar]) > [data-region="l"], .app-shell[data-collapse] > [data-region="r"] { display: none; }
  /* MOBIL DRAWER: en kollapsad sidomeny forsvinner pa mobil — utan vag tillbaka ar navet oatkomligt. Opt-in med data-drawer pa app-shell: sidomenyn blir en off-canvas panel som glider in nar data-drawer-open satts (Eontra.nav.toggleDrawer sköter attributet). .nav-toggle ar hamburger-knappen. Utan data-drawer galler vanliga display:none-kollapsen ovan. */
  .app-shell[data-collapse][data-drawer]:not([data-tabbar]) > [data-region="left"],
  .app-shell[data-collapse][data-drawer]:not([data-tabbar]) > [data-region="l"],
  .app-shell[data-collapse][data-drawer]:not([data-tabbar]) > [data-region="right"],
  .app-shell[data-collapse][data-drawer]:not([data-tabbar]) > [data-region="r"] {
    display: flex; position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 200; align-self: stretch; /* hela höjden: kollapsens align-self:start gjorde drawern bara innehållshög */
    inline-size: min(80vw, var(--drawer-width, 17rem)); max-inline-size: 85vw;
    transform: translateX(-102%); transition: transform var(--transition-base, .25s) var(--ease-standard, ease);
    overflow-y: auto; box-shadow: var(--drawer-shadow, var(--shadow-modal, 0 0 40px rgb(0 0 0 / .3))); /* En egen, täckande yta: en aside utan bakgrund var genomskinlig över innehållet. */ background: var(--sidebar-bg, var(--surface-base, var(--surface, #fff))); color: var(--sidebar-text, var(--text)); padding: var(--space-md, 1rem); flex-direction: column;
  }
  .app-shell[data-collapse][data-drawer][data-drawer-open]:not([data-tabbar]) > [data-region="left"],
  .app-shell[data-collapse][data-drawer][data-drawer-open]:not([data-tabbar]) > [data-region="l"],
  .app-shell[data-collapse][data-drawer][data-drawer-open]:not([data-tabbar]) > [data-region="right"],
  .app-shell[data-collapse][data-drawer][data-drawer-open]:not([data-tabbar]) > [data-region="r"] { transform: none; }
  .app-shell[data-drawer]:not([data-tabbar])[data-drawer-open]::after { content: ""; position: fixed; inset: 0; z-index: 199; background: rgb(0 0 0 / .45); }
  /* NEDRE RADEN (docs/SKALET.md Del 1): data-tabbar pa app-shell → under 40rem blir kolumnens nav (l, i quad a) en fast rad langst ner med de forsta N objekten (data-tabbar-count, standard 4; data-pin forst) plus Mer, som oppnar ett ark med resten. SDK:n (Eontra.layout) markerar objekten (data-shell-*) och satter data-shell-tabbar pa skalet — forst da galler raden, sa utan SDK staplas kolumnen som vanligt (navigeringen nas alltid). Utesluter data-drawer (drawer-reglerna ovan bar :not([data-tabbar])). Sakerhetsmarginal for hemknappen (env(safe-area-inset-bottom)) och mal pa minst 48 px. --tabbar-size tunar hojden som innehallet lamnar fri. */
  @layer eontra.components {
    .app-shell[data-tabbar][data-shell-tabbar] { padding-block-end: calc(var(--tabbar-size, 3.5rem) + env(safe-area-inset-bottom, 0px)); }
    :is(.app-shell[data-tabbar][data-shell-tabbar]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-tabbar][data-shell-tabbar][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) { display: flex; position: fixed; inset-inline: 0; inset-block-start: auto; inset-block-end: 0; z-index: var(--z-tabbar, 60); flex-direction: row; align-items: stretch; gap: 0; inline-size: auto; block-size: auto; min-block-size: 0; max-block-size: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); overflow: visible; transform: none; border: 0; border-block-start: 1px solid var(--border); border-radius: 0; box-shadow: var(--tabbar-shadow, 0 -1px 3px rgb(0 0 0 / .06)); background: var(--sidebar-bg, var(--surface-base, var(--surface))); color: var(--sidebar-text, var(--text)); }
    :is(.app-shell[data-tabbar][data-shell-tabbar]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-tabbar][data-shell-tabbar][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :not([data-shell-nav], [data-shell-nav] *, :has([data-shell-nav])) { display: none; }
    :is(.app-shell[data-tabbar][data-shell-tabbar]:not([data-layout="quad"]) > :is([data-region="l"], [data-region="left"]), .app-shell[data-tabbar][data-shell-tabbar][data-layout="quad"] > :is([data-region="a"], [data-region="aside"])) :has([data-shell-nav]) { display: contents; }
    :is(.app-shell[data-tabbar][data-shell-tabbar] > [data-shell-nav], .app-shell[data-tabbar][data-shell-tabbar] > [data-region] [data-shell-nav]) { display: flex; flex: 1 1 auto; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0; inline-size: 100%; min-inline-size: 0; margin: 0; padding: 0; }
    :is(.app-shell[data-tabbar][data-shell-tabbar] > [data-shell-nav], .app-shell[data-tabbar][data-shell-tabbar] > [data-region] [data-shell-nav]) :not([data-shell-slot], [data-shell-slot] *, [data-shell-more], [data-shell-more] *, :has([data-shell-slot], [data-shell-more])) { display: none; }
    :is(.app-shell[data-tabbar][data-shell-tabbar] > [data-shell-nav], .app-shell[data-tabbar][data-shell-tabbar] > [data-region] [data-shell-nav]) :has([data-shell-slot], [data-shell-more]) { display: contents; }
    .app-shell[data-tabbar][data-shell-tabbar] :is([data-shell-slot], [data-shell-more]) { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3xs, .125rem); position: relative; inline-size: auto; min-inline-size: 0; min-block-size: max(3rem, var(--tap-min, 2rem)); margin: 0; padding: var(--space-2xs, .25rem) var(--space-3xs, .125rem); border: 0; border-radius: 0; overflow: hidden; background: none; color: inherit; font-size: var(--font-size-small, .75rem); font-weight: 500; line-height: 1.2; text-align: center; white-space: nowrap; }
    .app-shell[data-tabbar][data-shell-tabbar] :is([data-shell-slot], [data-shell-more]) > :not(svg, [data-icon], .badge, [data-count], [data-badge]) { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; }
    .app-shell[data-tabbar][data-shell-tabbar] :is([data-shell-slot], [data-shell-more]) :where(svg, [data-icon]) { inline-size: 1.375rem; block-size: 1.375rem; font-size: 1.375rem; line-height: 1; opacity: 1; flex: none; }
    .app-shell[data-tabbar][data-shell-tabbar] [data-shell-slot]:is([aria-current], .active, .is-active), .app-shell[data-tabbar][data-shell-tabbar] [data-shell-more][data-shell-active] { background: var(--nav-active-bg, var(--primary)); color: var(--nav-active-color, var(--on-primary, #fff)); box-shadow: var(--nav-active-edge, none); font-weight: 600; }
    .app-shell[data-tabbar][data-shell-tabbar] :is([data-shell-slot], [data-shell-more]) > :is(.badge, [data-count], [data-badge]) { position: absolute; inset-block-start: var(--space-3xs, .125rem); inset-inline-start: calc(50% + .375rem); min-inline-size: 1.125rem; margin: 0; padding: 0 var(--space-3xs, .125rem); border-radius: var(--radius-full, 999px); font-size: var(--font-size-xs, .6875rem); line-height: 1.125rem; text-align: center; }
    .app-shell[data-tabbar][data-shell-tabbar] [data-shell-more][data-shell-dot]::after { content: ""; position: absolute; inset-block-start: var(--space-xs, .5rem); inset-inline-start: calc(50% + .5rem); inline-size: .5rem; block-size: .5rem; border-radius: var(--radius-full, 999px); background: var(--danger, var(--primary)); }
    .app-shell[data-tabbar][data-shell-tabbar] [data-shell-slot] { order: var(--shell-order, 0); }
    .app-shell[data-tabbar][data-shell-tabbar] [data-shell-more] { order: 999; }
    .app-shell[data-tabbar][data-shell-tabbar] [data-shell-over] { display: none; }
  }
  /* Malet pa minst 48 px: traffyte-golvet i eontra.state (min-block-size: var(--tap-min)) kommer efter komponentlagret, sa radens hojd satts i samma lager. */
  @layer eontra.state { .app-shell[data-tabbar][data-shell-tabbar] :is([data-shell-slot], [data-shell-more]) { min-block-size: max(3rem, var(--tap-min, 2rem)); } }
}