/* The browser's own root size: the admin's density comes from data-sf-density="compact" on <html> and the
   working area's size 1/2, which keep every Framework step in rem (owner decisions 2026-10-12/13). */
:root {
    --larena-bg: var(--sf-surface-0);
    --larena-panel: var(--sf-surface-0);
    --larena-surface: var(--sf-surface-0);
    --larena-sidebar: var(--sf-surface-inverse-fixed);
    --larena-sidebar-soft: var(--sf-surface-transparent-hover);
    --larena-text: var(--sf-on-surface);
    --larena-muted: var(--sf-on-surface-variant);
    --larena-line: var(--sf-outline-variant);
    --larena-border: var(--sf-outline-variant);
    --larena-primary: var(--sf-primary);
    --larena-primary-hover: var(--sf-primary-hover);
    --larena-danger: var(--sf-error);
    --larena-radius: .75rem;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.theme-light { color-scheme: light; }
.theme-dark { color-scheme: dark; }

/* Package-neutral form primitives used by product-owned admin screens. */
.larena-form-card{max-width:45rem;background:var(--larena-surface);border:1px solid var(--larena-border);border-radius:.875rem;padding:1.25rem;display:grid;gap:1rem}.larena-form-card label{display:grid;gap:.4rem;font-weight:600}.larena-form-card input,.larena-form-card select,.larena-form-card textarea{width:100%;box-sizing:border-box;border:1px solid var(--sf-outline-variant);border-radius:.5rem;padding:.7rem;background:var(--sf-surface-0);color:var(--sf-on-surface)}.larena-button--danger{color:var(--sf-error);border-color:var(--sf-outline-error)}.larena-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.larena-eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--larena-muted);margin:0 0 .25rem}
@media (max-width:390px){.larena-page-header{display:block}.larena-page-header>.larena-button{display:inline-flex;margin-top:.75rem}.larena-form-card{padding:1rem}}
.larena-first-run{margin:0;background:var(--sf-surface-1);color:var(--larena-text)}
.larena-first-run-screen{min-height:100vh;display:grid;place-items:center;padding:2rem 1.25rem;outline:none}
.larena-first-run-card{width:min(57.5rem,100%);background:var(--larena-panel);border:1px solid var(--larena-line);border-radius:1rem;box-shadow:0 1.125rem 3.125rem rgb(15 23 42 / 12%);overflow:hidden}
.larena-first-run-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:1.75rem 1.75rem 1.125rem}
.larena-first-run-header h1{margin:0;font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.12}.larena-first-run-header p:last-child{max-width:40.625rem;color:var(--larena-muted);line-height:1.55}
.larena-first-run-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;padding:0;list-style:none;background:var(--larena-line);border-block:1px solid var(--larena-line)}
.larena-first-run-progress li{padding:.75rem 1.125rem;background:var(--sf-surface-container);font-size:.8125rem;font-weight:750}.larena-first-run-progress li[aria-current]{color:var(--larena-primary);background:var(--sf-primary-container)}
.larena-first-run-preflight{padding:1.5rem 1.75rem 0}.larena-first-run-preflight h2,.larena-first-run-state h2{margin:0 0 .75rem;font-size:1.125rem}.larena-first-run-preflight ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none}
.larena-first-run-preflight li{display:grid;grid-template-columns:1.5rem 1fr;gap:.125rem .5rem;padding:.625rem;border:1px solid var(--larena-line);border-radius:.5625rem}.larena-first-run-preflight li small{grid-column:2;color:var(--larena-muted)}.larena-first-run-preflight li[data-check-status=failed]{border-color:var(--larena-danger)}
.larena-first-run-form fieldset{margin:0;padding:0;border:0}.larena-first-run-form legend{margin-bottom:.875rem;font-size:1.125rem;font-weight:800}.larena-first-run-state{margin:1.25rem 1.75rem 0;padding:0}.larena-first-run .larena-alert{margin:1.5rem 1.75rem 0}.larena-first-run .larena-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.larena-first-run .larena-field small{color:var(--larena-muted)}
.larena-web-install-confirm{display:flex;align-items:flex-start;gap:.625rem;line-height:1.45}.larena-web-install-confirm input{inline-size:1.25rem;block-size:1.25rem;flex:0 0 auto;margin:1px 0 0}.larena-web-install-confirm input:focus-visible{outline:.1875rem solid var(--sf-focus);outline-offset:.125rem}
@media(max-width:620px){.larena-first-run-screen{padding:0}.larena-first-run-card{min-height:100vh;border:0;border-radius:0}.larena-first-run-header{display:grid;padding:1.5rem 1.125rem 1rem}.larena-first-run-progress li{padding:.625rem .5rem;text-align:center}.larena-first-run-preflight{padding:1.25rem 1.125rem 0}.larena-first-run-preflight ul,.larena-first-run .larena-form-grid{grid-template-columns:1fr}.larena-first-run .larena-form{padding:1.25rem 1.125rem}.larena-first-run .larena-first-run-state{margin:1.25rem 1.125rem 0}}

/* The admin reset sits in its own layer, declared before the Framework's, so a Framework rule (such as the page field's content box) always wins over it. */
@layer larena-reset { * { box-sizing: border-box; } }

body.larena-admin { margin: 0; background: var(--larena-bg); color: var(--larena-text); }

.larena-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }

a { color: var(--larena-primary); }

.larena-skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; transform: translateY(-150%); border-radius: .5rem; background: var(--larena-panel); padding: .625rem .875rem; }
.larena-skip-link:focus { transform: translateY(0); }

.larena-shell { display: grid; min-height: 100vh; grid-template-columns: 15.25rem minmax(0, 1fr); }
.larena-sidebar { position: sticky; top: 0; display: flex; height: 100dvh; flex-direction: column; background: var(--larena-sidebar); padding: 1.5rem 1rem; color: var(--larena-text); }

.larena-workspace { min-width: 0; }
.larena-topbar { display: flex; min-height: 4rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--larena-line); background: color-mix(in srgb, var(--larena-panel) 90%, transparent); padding: 0 2rem; color: var(--larena-muted); font-size: .8125rem; }
.larena-session-tools { display: flex; align-items: center; gap: .875rem; }
.larena-session-tools form { margin: 0; }
.larena-locale-switch { display: inline-flex; gap: .1875rem; border: 1px solid var(--larena-line); border-radius: .5rem; background: var(--larena-panel); padding: .1875rem; }
.larena-locale-switch a { min-width: 2rem; border-radius: .3125rem; padding: .3125rem .4375rem; color: var(--larena-muted); font-size: .6875rem; font-weight: 800; text-align: center; text-decoration: none; }
.larena-locale-switch a[aria-current="true"] { background: var(--sf-primary-container); color: var(--sf-on-primary-container); }
.larena-content { width: min(70rem, 100%); margin: 0 auto; padding: 2.5rem 2rem 4rem; outline: none; }
.larena-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.75rem; }
.larena-eyebrow { margin: 0 0 .4375rem; color: var(--larena-primary); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.larena-page-heading h1 { margin: 0; font-size: clamp(1.6875rem, 4vw, 2.375rem); line-height: 1.15; letter-spacing: -.025em; }
.larena-admin-feedback { margin: 0 0 1.25rem; }
.larena-page-description { max-width: 42.5rem; margin: .625rem 0 0; color: var(--larena-muted); line-height: 1.55; }
.larena-page-actions { display: flex; flex-wrap: wrap; gap: .625rem; }

.larena-button { display: inline-flex; min-height: 2.625rem; align-items: center; justify-content: center; border: 1px solid var(--larena-line); border-radius: .5625rem; background: var(--larena-panel); padding: 0 1rem; color: var(--larena-text); font: inherit; font-size: .875rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.larena-button:hover { border-color: var(--sf-outline); background: var(--sf-surface-container-hover); }
.larena-button-primary { border-color: var(--larena-primary); background: var(--larena-primary); color: var(--sf-on-primary); }
.larena-button-primary:hover { border-color: var(--larena-primary-hover); background: var(--larena-primary-hover); }
.larena-button-danger { border-color: var(--larena-danger); background: var(--larena-danger); color: var(--sf-on-error); }
.larena-button-danger:hover { border-color: var(--sf-error-hover); background: var(--sf-error-hover); }

.larena-panel { overflow: hidden; border: 1px solid var(--larena-line); border-radius: var(--larena-radius); background: var(--larena-panel); box-shadow: var(--sf-ui-shadow-1); }
.larena-table { width: 100%; border-collapse: collapse; }
.larena-table th, .larena-table td { border-bottom: 1px solid var(--larena-line); padding: .9375rem 1.125rem; text-align: left; vertical-align: middle; }
.larena-table th { background: var(--sf-surface-container); color: var(--larena-muted); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.larena-table tbody tr:last-child td { border-bottom: 0; }
.larena-table-title { color: var(--larena-text); font-weight: 750; text-decoration: none; }
.larena-table-title:hover { color: var(--larena-primary); }
.larena-status { display: inline-flex; border-radius: 62.4375rem; background: var(--sf-neutral-container); padding: .25rem .5625rem; color: var(--sf-on-neutral-container); font-size: .75rem; font-weight: 750; text-transform: capitalize; }
.larena-status-published { background: var(--sf-success-container); color: var(--sf-on-success-container); }
.larena-empty { padding: 3rem 1.5rem; text-align: center; }
.larena-empty h2 { margin: 0 0 .5rem; }
.larena-empty p { margin: 0 0 1.25rem; color: var(--larena-muted); }

.larena-form { display: grid; gap: 1.375rem; padding: 1.5rem; }
.larena-form-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 2fr) minmax(13.75rem, 1fr); }
.larena-field { display: grid; gap: .4375rem; }
.larena-field label { font-size: .8125rem; font-weight: 750; }
/* A checkbox or radio keeps its own size beside its words; only text-like controls fill the field. */
.larena-field input:not([type="checkbox"], [type="radio"], [type="hidden"]), .larena-field textarea, .larena-field select { width: 100%; border: 1px solid var(--sf-outline-variant); border-radius: .5625rem; background: var(--sf-surface-0); padding: .625rem .75rem; color: var(--larena-text); font: inherit; }
/* A checkbox or radio sits beside its words in a row tall enough to tap. */
.larena-field label:has(> :is(input[type="checkbox"], input[type="radio"])) { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; }
.larena-field :is(input[type="checkbox"], input[type="radio"]) { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--larena-primary); }
.larena-field textarea { min-height: 17.5rem; resize: vertical; line-height: 1.55; }
.larena-relation-picker { display: grid; gap: .4375rem; min-width: 0; }
.larena-relation-picker label { font-size: .8125rem; font-weight: 750; color: var(--larena-muted); }
.larena-relation-picker select { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--sf-outline-variant); border-radius: .5625rem; background: var(--sf-surface-0); padding: .625rem .75rem; color: var(--larena-text); font: inherit; }
.larena-relation-picker select:focus-visible, .larena-relation-picker button:focus-visible { outline: .1875rem solid var(--sf-focus); outline-offset: .125rem; }
.larena-relation-picker button { justify-self: start; border: 1px solid var(--sf-outline-variant); border-radius: .5625rem; background: var(--sf-surface-0); padding: .5rem .75rem; color: var(--larena-text); font: inherit; cursor: pointer; }
.larena-relation-picker button[hidden] { display: none; }
.larena-relation-picker [role="status"] { color: var(--larena-muted); font-size: .75rem; }
.larena-field input:focus-visible, .larena-field textarea:focus-visible, .larena-field select:focus-visible, .larena-button:focus-visible, .larena-nav a:focus-visible, .larena-theme-switch button:focus-visible, .larena-locale-switch a:focus-visible, .larena-module-link:focus-visible, .larena-content a:focus-visible, .larena-workbench label:not([class^="sf-"], [class*=" sf-"]) > :where(input, select, textarea):focus-visible { outline: .1875rem solid var(--sf-focus); outline-offset: .125rem; border-color: var(--larena-primary); }
[data-larena-dataview-scroll] { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
[data-larena-dataview-scroll]:focus-visible { outline: .1875rem solid var(--sf-focus); outline-offset: .125rem; }
.larena-field-error { color: var(--larena-danger); font-size: .75rem; }
.larena-form-actions { display: flex; flex-wrap: wrap; gap: .625rem; border-top: 1px solid var(--larena-line); padding-top: 1.25rem; }
.larena-secondary-action { margin-top: 1rem; }
.larena-notice { margin-bottom: 1.25rem; border: 1px solid; border-radius: .625rem; padding: .875rem 1rem; }
.larena-notice ul { margin-bottom: 0; }
.larena-notice-success { border-color: var(--sf-outline-success); background: var(--sf-success-container); color: var(--sf-on-success-container); }
.larena-notice-error { border-color: var(--sf-outline-error); background: var(--sf-error-container); color: var(--sf-on-error-container); }
.larena-notice-warning { border-color: var(--sf-outline-warning, var(--sf-outline)); background: var(--sf-warning-container, var(--sf-surface-container)); color: var(--sf-on-warning-container, var(--sf-on-surface)); }
.larena-preformatted-content { line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.larena-help { margin: -.5rem 0 0; color: var(--larena-muted); font-size: .8125rem; }
.larena-admin-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; margin-top: 1.125rem; }
.larena-admin-split h2 { margin: 0; font-size: 1.125rem; }
.larena-admin-split p { margin: 0; color: var(--larena-muted); line-height: 1.5; }
.larena-form-compact { display: grid; gap: .875rem; }
.larena-confirm { display: flex; align-items: flex-start; gap: .5625rem; color: var(--larena-muted); font-size: .8125rem; line-height: 1.4; }
.larena-confirm input { margin-top: .125rem; }
.larena-role-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--larena-line); }
.larena-role-summary article { background: var(--larena-panel); padding: 1.125rem; }
.larena-role-summary h2 { margin: 0; font-size: 1.0625rem; }
.larena-role-summary p { margin: .375rem 0 0; color: var(--larena-muted); }
.larena-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.larena-table-scroll:focus-visible { outline: .1875rem solid var(--sf-focus); outline-offset: .125rem; }
.larena-role-matrix code { font-size: .75rem; }
.larena-role-matrix small { color: var(--larena-muted); }
.larena-permission { display: inline-flex; border-radius: 62.4375rem; padding: .25rem .5625rem; font-size: .75rem; font-weight: 750; }
.larena-permission-yes { background: var(--sf-success-container); color: var(--sf-on-success-container); }
.larena-permission-no { background: var(--sf-neutral-container); color: var(--sf-on-neutral-container); }
.larena-status-active, .larena-status-rotation_required { background: var(--sf-success-container); color: var(--sf-on-success-container); }
.larena-status-disabled { background: var(--sf-error-container); color: var(--sf-on-error-container); }

.larena-home-panel { padding: 1.5rem; }
.larena-home-intro h2 { margin: 0; font-size: 1.1875rem; }
.larena-home-intro p { margin: .4375rem 0 0; color: var(--larena-muted); line-height: 1.5; }
.larena-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: .875rem; margin-top: 1.375rem; }
.larena-module-link { display: flex; min-height: 5.125rem; align-items: center; gap: .8125rem; border: 1px solid var(--larena-line); border-radius: .625rem; padding: .9375rem; color: var(--larena-text); text-decoration: none; }
.larena-module-link:hover { border-color: var(--sf-outline); background: var(--sf-surface-container-hover); }
.larena-module-link strong, .larena-module-link small { display: block; }
.larena-module-link small { margin-top: .25rem; color: var(--larena-muted); }
.larena-module-mark { display: grid; width: 2.375rem; height: 2.375rem; flex: 0 0 auto; place-items: center; border-radius: .5625rem; background: var(--sf-primary-container); color: var(--sf-on-primary-container); font-weight: 800; }

.larena-recipe-grid { display: grid; gap: 1.25rem; }
.larena-recipe-card { min-width: 0; padding: 1.5rem; }
.larena-recipe-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.larena-recipe-header h2 { margin: 0; font-size: 1.375rem; }
.larena-recipe-header p:not(.larena-eyebrow) { max-width: 45rem; margin: .5rem 0 0; color: var(--larena-muted); line-height: 1.5; }
.larena-recipe-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 1.25rem 0; border: 1px solid var(--larena-line); border-radius: .625rem; overflow: hidden; background: var(--larena-line); }
.larena-recipe-facts div { min-width: 0; padding: .75rem; background: var(--larena-panel); }
.larena-recipe-facts dt { color: var(--larena-muted); font-size: .75rem; }
.larena-recipe-facts dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
.larena-recipe-fact-wide { grid-column: 1 / -1; }
.larena-recipe-layout { display: grid; gap: .875rem; }
.larena-recipe-region { min-width: 0; border: 1px solid var(--larena-line); border-radius: .625rem; padding: .875rem; background: var(--sf-surface-1); }
.larena-recipe-region-header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .625rem; }
.larena-recipe-region-header h3 { margin: 0; font-size: .9375rem; }
.larena-recipe-region-header span { color: var(--larena-muted); font-size: .75rem; }
.larena-recipe-region-items { display: grid; gap: .75rem; min-width: 0; }
.larena-recipe-shell-heading h4 { margin: 0; font-size: 1.25rem; }
.larena-recipe-shell-heading p { margin: .375rem 0 0; color: var(--larena-muted); }
.larena-recipe-component { min-width: 0; border: 1px solid var(--larena-line); border-radius: .5625rem; padding: .75rem; background: var(--larena-panel); }
.larena-recipe-component > header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .625rem; }
.larena-recipe-component > header code { overflow-wrap: anywhere; color: var(--larena-muted); font-size: .75rem; }
.larena-recipe-artifact { min-width: 0; max-width: 100%; overflow-x: auto; padding: .75rem; border: 1px solid var(--larena-line); border-radius: .5rem; background: var(--sf-surface-0); }
.larena-recipe-artifact[tabindex]:focus-visible { outline: .1875rem solid var(--sf-focus); outline-offset: .125rem; }
.larena-recipe-component details { margin-top: .625rem; }
.larena-recipe-component summary, .larena-recipe-contract summary { cursor: pointer; font-weight: 700; }
.larena-recipe-component pre, .larena-recipe-contract pre { max-width: 100%; overflow: auto; padding: .75rem; border-radius: .5rem; background: var(--sf-surface-inverse); color: var(--sf-on-surface-inverse); font-size: .75rem; line-height: 1.5; }
.larena-recipe-contract { margin-top: 1rem; }

.larena-workbench { display: grid; gap: 1.25rem; }
.larena-workbench label:not([class^="sf-"], [class*=" sf-"]) > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) { box-sizing: border-box; width: 100%; border: 1px solid var(--sf-outline-variant); border-radius: .5rem; padding: .625rem .75rem; background: var(--sf-surface-0); color: var(--sf-on-surface); }
.larena-workbench label:not([class^="sf-"], [class*=" sf-"]) > textarea { min-height: 6.875rem; resize: vertical; font: inherit; }
.larena-workbench label:not([class^="sf-"], [class*=" sf-"]) { display: grid; gap: .375rem; color: var(--larena-muted); font-size: .8125rem; font-weight: 700; }
.larena-workbench label:has(input[type="checkbox"]):not([class^="sf-"], [class*=" sf-"]) { display: flex; align-items: center; gap: .5rem; }
.larena-workbench label:not([class^="sf-"], [class*=" sf-"]) > input[type="checkbox"] { width: auto; }
.larena-workbench summary { cursor: pointer; font-weight: 800; }
.larena-workbench form[aria-busy="true"] { opacity: .7; pointer-events: none; }
.larena-workbench-scope { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; padding: 1.25rem; }
.larena-workbench-scope h2 { margin: .25rem 0 0; overflow-wrap: anywhere; font-size: 1.125rem; }
.larena-workbench-inline { display: flex; align-items: center; gap: .5rem; }
.larena-workbench-grid { display: grid; grid-template-columns: minmax(14.375rem, 18.125rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.larena-workbench-structures { position: sticky; top: 5.875rem; padding: 1.125rem; }
.larena-workbench-structures h2 { margin: 0 0 .875rem; font-size: 1.125rem; }
.larena-workbench-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.larena-workbench-list a { display: grid; gap: .25rem; border: 1px solid var(--larena-line); border-radius: .5625rem; padding: .625rem .75rem; color: inherit; text-decoration: none; }
.larena-workbench-list a[aria-current="page"] { border-color: var(--sf-primary); background: var(--sf-primary-container); }
.larena-workbench-list small { color: var(--larena-muted); overflow-wrap: anywhere; }
.larena-workbench-create { margin-top: 1.125rem; border-top: 1px solid var(--larena-line); padding-top: .875rem; }
.larena-workbench-create form, .larena-workbench-records details form { margin-top: .875rem; }
.larena-workbench-fieldset { display: grid; gap: .625rem; margin: 0; border: 1px solid var(--larena-line); border-radius: .5625rem; padding: .75rem; }
.larena-workbench-fieldset legend { padding: 0 .375rem; font-weight: 800; }
.larena-workbench-main { display: grid; gap: 1.25rem; min-width: 0; }
.larena-workbench-state, .larena-workbench-empty, .larena-workbench-schema, .larena-workbench-records, .larena-workbench-integrations { padding: 1.375rem; }
.larena-workbench-state h2, .larena-workbench-empty h2 { margin: 0 0 .5rem; }
.larena-workbench-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.125rem; }
.larena-workbench-section-header h2 { margin: 0; font-size: 1.25rem; }
.larena-workbench-section-header p:not(.larena-eyebrow), .larena-workbench-section-header > span { color: var(--larena-muted); }
.larena-workbench-filter { display: grid; grid-template-columns: minmax(11.25rem, 1fr) minmax(8.75rem, .6fr) 5.625rem auto auto; gap: .625rem; align-items: end; margin-bottom: 1.125rem; }
.larena-workbench-check { align-self: center; white-space: nowrap; }
.larena-workbench-empty-row { border: 1px dashed var(--larena-line); border-radius: .5625rem; padding: 1.125rem; color: var(--larena-muted); }
.larena-workbench-records td form { display: grid; gap: .5rem; min-width: 8.125rem; }
.larena-workbench-records td code { display: block; max-width: 10rem; overflow-wrap: anywhere; }
.larena-workbench-records td small { display: block; margin-top: .1875rem; color: var(--larena-muted); }
.larena-workbench-integrations { min-width: 0; }
.larena-workbench-integration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }
.larena-workbench-integration-grid article { min-width: 0; border: 1px solid var(--larena-line); border-radius: .625rem; padding: .875rem; }
.larena-workbench-integration-grid h3 { margin: 0 0 .75rem; font-size: 1rem; }
.larena-workbench-integration-grid ul { padding-left: 1.25rem; }
.larena-workbench-integration-grid form + form { margin-top: 1rem; border-top: 1px solid var(--larena-line); padding-top: 1rem; }
/* A panel the page reads again in place (a live region: SitePack, jobs, a run) is a storage panel all the same. */
:is(.larena-storage, .larena-storage > .larena-live-region) > .larena-panel { display: grid; gap: .875rem; padding: 1.375rem; }
:is(.larena-storage, .larena-storage > .larena-live-region) > .larena-panel > h2 { margin: 0; font-size: 1.25rem; }
:is(.larena-storage, .larena-storage > .larena-live-region) > .larena-panel > h3 { margin: 0; font-size: 1rem; }
/* A storage's background jobs and SitePack runs: one block per job, its lines close together, a rule between jobs. */
.larena-storage-jobs__list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.larena-storage-jobs__item { display: grid; gap: .25rem; padding-top: .75rem; border-top: 1px solid var(--larena-line); }
.larena-storage-jobs__item:first-child { padding-top: 0; border-top: 0; }
.larena-storage-jobs__item > * { margin: 0; }
.larena-storage-jobs__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
:is(.larena-storage, .larena-storage > .larena-live-region) > .larena-panel > p, :is(.larena-storage, .larena-storage > .larena-live-region) > .larena-panel form > p { margin: 0; }
:is(.larena-storage, .larena-storage > .larena-live-region) > .larena-panel > .larena-workbench-section-header { margin-bottom: 0; }
:is(.larena-storage, .larena-storage > .larena-live-region) > .larena-panel > form { display: grid; gap: .875rem; }
.larena-storage > .larena-live-region + :is(.larena-panel, .larena-live-region), .larena-storage > .larena-panel + .larena-live-region { margin-top: 1.25rem; }
.larena-panel.larena-form > h2 { margin: 0; font-size: 1.25rem; }
.larena-panel.larena-form > p { margin: 0; }
.larena-panel.larena-form form:not(.larena-form) { display: grid; gap: .875rem; }
.larena-panel + .larena-panel, .larena-panel + .larena-admin-split, .larena-alert + .larena-panel { margin-top: 1.25rem; }
.larena-auth-panel, .larena-panel-padded { display: grid; gap: .875rem; padding: 1.5rem; }
.larena-auth-panel > :is(h2, p), .larena-panel-padded > :is(h2, p) { margin: 0; }
.larena-auth-panel > h2, .larena-panel-padded > h2 { font-size: 1.25rem; }
.larena-auth-list { display: grid; gap: .75rem; margin-top: 1.5rem; }
.larena-auth-list > :is(h2, p) { margin: 0; }
.larena-auth-list > h2 { font-size: 1.25rem; }
/* A facts grid keeps its own columns and gaps inside a padded panel (its phone rules below must still apply). */
.larena-auth-panel dl:not(.larena-recipe-facts), .larena-panel-padded dl:not(.larena-recipe-facts) { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: .5rem 1.25rem; margin: 0; }
.larena-auth-panel dl:not(.larena-recipe-facts) dd, .larena-panel-padded dl:not(.larena-recipe-facts) dd { margin: 0; overflow-wrap: anywhere; }
.larena-plane-grants-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; align-items: end; }
.larena-structure { display: grid; gap: 1rem; }
.larena-structure > .larena-panel { padding: 1rem; }
.larena-structure-tree, .larena-structure-tree ul { list-style: none; margin: 0; padding: 0; }
.larena-structure-tree ul { margin-inline-start: .5rem; border-inline-start: 1px solid var(--larena-line); padding-inline-start: 1.25rem; }
.larena-structure-node { border-bottom: 1px solid var(--larena-line); padding: .625rem 0; }
.larena-structure-node-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.larena-structure-node-title { font-weight: 600; overflow-wrap: anywhere; }
.larena-structure-node-meta { color: var(--larena-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.larena-structure-controls { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.larena-structure-controls form, .larena-publication-locale form { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin: 0; }
.larena-structure-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); align-items: end; gap: .75rem; }
.larena-publication { display: grid; gap: .5rem; margin-top: .5rem; }
.larena-publication-locale { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (max-width: 480px) {
    .larena-structure-controls form, .larena-publication-locale, .larena-publication-locale form { width: 100%; }
    .larena-structure-tree ul { padding-inline-start: .75rem; }
}
/* The navigation sits on surface-1 beside the surface-0 work area; its head draws no
   line of its own, so nothing has to line up with the top bar's border. */
.larena-sidebar--smart {
    --sf-admin-menu-panel--background-color: var(--sf-surface-1);
    --sf-admin-menu-head--border-bottom-width: 0;
    /* A denser navigation: 40px items instead of 48px, through the menu's own spacing. */
    --sf-admin-menu-item--padding-top: var(--sf-space-1\/2);
    --sf-admin-menu-item--padding-bottom: var(--sf-space-1\/2);
}
/* The logo is the wordmark, so the menu's brand text stays only for assistive technology
   (it names the logo link and image) until the Framework menu offers a logo-only head. Only the
   logo head: a submenu's and the search panel's heads show their title. */
.larena-sidebar--smart .sf-admin-menu-panel:not(.sf-admin-menu-panel-sub, .sf-admin-menu-panel-search) .sf-admin-menu-head-container > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The menu shows the Larena mark alone, 2rem tall, centred over the column of menu item icons:
   1.75rem in from the head, less half the mark's width (23/35 of its height). The collapsed menu
   centres the mark itself, which already puts it over the same column. */
.larena-sidebar--smart .sf-admin-menu-logo { block-size: 2rem; inline-size: auto; margin-inline-start: calc(1.75rem - 2rem * 30 / 34 / 2); }
.larena-sidebar--smart .sf-admin-menu-panel.small .sf-admin-menu-logo { margin-inline-start: 0; }
.larena-muted { color: var(--larena-muted); }
/* Site settings: a titled group of fields inside the panel, without the browser's own fieldset frame. */
.larena-site-settings { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; min-inline-size: 0; }
.larena-site-settings > legend { margin-block-end: .5rem; padding: 0; font-weight: 600; }
.larena-site-settings > .larena-muted { margin: 0; font-size: .875rem; }
/* A data table's density is the Framework's own (sf-view-table size="1/2", owner decision 2026-10-13); the
   admin sets no cell padding of its own. */
/* One scroll on a list page (owner decision 2026-10-15): the page scrolls, the Framework holds the table's
   toolbar and head at the top and its sideways rail at the bottom of the window. No box of our own. */
/* The table toolbar's icon buttons are neutral outline buttons like its Create button; the Framework
   template still gives them the primary scheme. */
.larena-shell .sf-table-toolbar-end .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary { --sf-icon--color: var(--sf-on-surface); }
.larena-shell .sf-table-toolbar-end .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary:not(:disabled):not(.disabled):hover { --sf-icon-button--background-color: var(--sf-surface-container-hover); }
.larena-shell .sf-table-toolbar-end .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary:not(:disabled):not(.disabled):is(:active, .active) { --sf-icon-button--background-color: var(--sf-surface-container-active); }
/* The column settings list scrolls inside a padded frame, so its scrollbar stood a padding step
   in from the menu edge. The end padding moves inside the scrolling list: same content inset,
   scrollbar at the edge, until the Framework places it there. */
.sf-table-context-menu .sf-context-menu-columns { --sf-context-menu-columns--padding-inline-end: 0; }
.sf-table-context-menu .sf-context-menu-columns > * { padding-inline-end: var(--sf-space-2); }

@media (max-width: 800px) {
    .larena-shell { grid-template-columns: 1fr; }
    .larena-sidebar { position: static; height: auto; padding: 1rem; }
    .larena-topbar { min-height: 4.5rem; align-items: flex-start; flex-wrap: wrap; gap: .75rem; padding: .625rem 1.25rem; }
    .larena-session-tools { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
    .larena-content { padding: 1.75rem 1.125rem 3rem; }
    .larena-page-heading { display: grid; }
    .larena-form-grid { grid-template-columns: 1fr; }
    .larena-admin-split, .larena-role-summary { grid-template-columns: 1fr; }
    .larena-table-stack, .larena-table-stack tbody, .larena-table-stack tr, .larena-table-stack td { display: block; width: 100%; }
    .larena-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .larena-table-stack tr { border-bottom: 1px solid var(--larena-line); padding: .75rem 1rem; }
    .larena-table-stack tbody tr:last-child { border-bottom: 0; }
    .larena-table-stack td { display: grid; grid-template-columns: minmax(5.75rem, .55fr) minmax(0, 1fr); gap: .75rem; border: 0; padding: .375rem 0; overflow-wrap: anywhere; }
    .larena-table-stack td::before { content: attr(data-label); color: var(--larena-muted); font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .larena-recipe-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .larena-workbench-scope { display: grid; }
    .larena-workbench-grid { grid-template-columns: 1fr; }
    .larena-workbench-structures { position: static; }
    .larena-workbench-filter { grid-template-columns: 1fr 1fr; }
    .larena-workbench-integration-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .larena-recipe-card { padding: 1rem; }
    .larena-recipe-header, .larena-recipe-region-header, .larena-recipe-component > header { align-items: flex-start; flex-direction: column; }
    .larena-recipe-facts { grid-template-columns: 1fr; }
    .larena-recipe-fact-wide { grid-column: auto; }
    .larena-recipe-region, .larena-recipe-component, .larena-recipe-artifact { padding: .625rem; }
    .larena-workbench-inline, .larena-workbench-section-header { align-items: stretch; flex-direction: column; }
    .larena-workbench-filter { grid-template-columns: 1fr; }
    .larena-workbench-state, .larena-workbench-empty, .larena-workbench-schema, .larena-workbench-records, .larena-workbench-integrations { padding: 1rem; }
}

/* Product shell: Admin owns composition geometry; Larena UI/Simai Framework owns every
   rendered Smart Component and its internal presentation. */
.larena-shell[data-larena-shell-preset="product"] {
    /* The column is exactly as wide as the Framework menu panel, open and compact. */
    --larena-admin-navigation-inline-size: var(--sf-admin-menu-panel--inline-size, var(--sf-g0));
    /* The work area is surface-0, the navigation beside it surface-1. */
    --larena-bg: var(--sf-surface-0);
    --larena-panel: var(--sf-surface-0);
    --larena-surface: var(--sf-surface-0);
    --larena-sidebar: var(--sf-surface-1);
    --larena-sidebar-soft: var(--sf-surface-container-hover);
    --larena-text: var(--sf-on-surface);
    --larena-muted: var(--sf-on-surface-variant);
    --larena-line: var(--sf-outline-variant);
    --larena-border: var(--sf-outline-variant);
    --larena-primary: var(--sf-primary);
    --larena-primary-hover: var(--sf-primary-hover);
    grid-template-columns: var(--larena-admin-navigation-inline-size) minmax(0, 1fr);
    /* The page itself scrolls; the menu column holds the window's height at the top. */
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: clip;
    background: var(--larena-bg);
}

.larena-shell[data-larena-shell-preset="product"][data-larena-navigation-compact="true"] {
    --larena-admin-navigation-inline-size: var(--sf-admin-menu-panel-compact--inline-size, var(--sf-e1));
}

[data-larena-shell-preset="product"] .larena-sidebar--smart {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    /* The Framework menu panel draws the edge line; the column only carries its surface. */
    background: var(--larena-sidebar);
    padding: 0;
    color: var(--larena-text);
}

[data-larena-shell-preset="product"] .larena-sidebar--smart > * {
    display: block;
    width: 100%;
    height: 100%;
}

[data-larena-shell-preset="product"] .larena-workspace {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    /* Clip sideways without making a scroll box, so the table's sticky head and rail follow the page. */
    overflow-x: clip;
}

[data-larena-shell-preset="product"] .larena-topbar--smart {
    display: grid;
    min-height: 3.75rem;
    flex: 0 0 3.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--larena-line);
    background: var(--larena-panel);
    padding: .4375rem 1.75rem;
}

[data-larena-shell-preset="product"] .larena-location-tools,
[data-larena-shell-preset="product"] .larena-smart-breadcrumbs,
[data-larena-shell-preset="product"] .larena-session-tools--smart,
[data-larena-shell-preset="product"] .larena-smart-tools {
    min-width: 0;
}

[data-larena-shell-preset="product"] .larena-location-tools,
[data-larena-shell-preset="product"] .larena-session-tools--smart,
[data-larena-shell-preset="product"] .larena-smart-tools {
    display: flex;
    align-items: center;
}

[data-larena-shell-preset="product"] .larena-location-tools { gap: .625rem; }
[data-larena-shell-preset="product"] .larena-session-tools--smart { width: auto; gap: .5rem; }
[data-larena-shell-preset="product"] .larena-smart-tools { gap: .25rem; }
[data-larena-shell-preset="product"] .larena-smart-tools > * { display: block; }
[data-larena-shell-preset="product"] .larena-navigation-toggle { display: none; flex: 0 0 auto; }

[data-larena-shell-preset="product"] .larena-content {
    width: 100%;
    max-width: none;
    min-width: 0;
    background: var(--larena-bg);
    padding: 1.25rem clamp(1.25rem, 2.4vw, 2.25rem) 3rem;
}

/* More room above the title than below it: the title belongs to the list under it. Its actions sit on the
   title's base line, so they do not pad the title. */
[data-larena-shell-preset="product"] .larena-page-heading {
    min-width: 0;
    align-items: end;
    margin-bottom: .5rem;
}

[data-larena-shell-preset="product"] .larena-page-heading > div:first-child,
[data-larena-shell-preset="product"] .larena-heading-line {
    min-width: 0;
}

[data-larena-shell-preset="product"] .larena-heading-line {
    display: flex;
    /* The favourite star (an icon button, 2.5rem) is drawn only once its script runs: the line keeps its height. */
    min-block-size: 2.5rem;
    align-items: center;
    gap: .625rem;
    /* On a narrow screen the heading keeps its whole name and its marks go to the next line. */
    flex-wrap: wrap;
}

[data-larena-shell-preset="product"] .larena-heading-line h1 {
    max-inline-size: 100%;
    overflow: hidden;
    font-size: clamp(1.4375rem, 2vw, 1.75rem);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 800px) {
    .larena-shell[data-larena-shell-preset="product"] {
        display: block;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    [data-larena-shell-preset="product"] .larena-sidebar--smart {
        position: relative;
        height: 0;
        max-height: 0;
        border: 0;
        transition: height 160ms ease, max-height 160ms ease;
    }

    [data-larena-shell-preset="product"][data-larena-navigation-state="expanded"] .larena-sidebar--smart {
        height: min(70vh, 35rem);
        max-height: min(70vh, 35rem);
        overflow: auto;
        border-bottom: 1px solid var(--larena-line);
        overscroll-behavior: contain;
    }

    [data-larena-shell-preset="product"] .larena-workspace {
        overflow: visible;
    }

    [data-larena-shell-preset="product"] .larena-topbar--smart {
        position: sticky;
        z-index: 20;
        top: 0;
        min-height: 3.5rem;
        flex-basis: 3.5rem;
        gap: .625rem;
        padding: .375rem .75rem;
    }

    [data-larena-shell-preset="product"] .larena-navigation-toggle {
        display: block;
    }

    [data-larena-shell-preset="product"] .larena-session-tools--smart {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    [data-larena-shell-preset="product"] .larena-content {
        overflow: visible;
        padding: 1.125rem .875rem 2.5rem;
    }

    [data-larena-shell-preset="product"] .larena-page-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .625rem;
    }
}

@media (max-width: 480px) {
    [data-larena-shell-preset="product"] .larena-smart-breadcrumbs {
        display: none;
    }

    [data-larena-shell-preset="product"] [data-larena-smart-theme] {
        display: none;
    }

    [data-larena-shell-preset="product"] .larena-session-tools--smart {
        gap: .3125rem;
    }

    [data-larena-shell-preset="product"] .larena-locale-switch a {
        min-width: 1.6875rem;
        padding-inline: .3125rem;
    }

    [data-larena-shell-preset="product"] .larena-page-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }
}
/*
 * Larena disables the remote SF icon-subset service: the immutable bundle supplies the whole Material Symbols font.
 * Until the core marks every drawn icon loaded (an icon drawn by a component's second copy stays unmarked and the
 * guard hides it for good: the favourite star, the table's «more» button, 2026-10-28), icons stay visible.
 */
@layer sf.base {
    html[data-sf-icon-runtime="bundled-fallback"] body .sf-icon:not(.sf-icon-loaded) {
        font-size: var(--sf-icon--font-size, var(--sf-icon-size-3)) !important;
    }
}

/* A form's submit keeps its own width; a group of choices lays out in columns. */
.larena-form-submit { justify-self: start; }
.larena-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .5rem 1rem; }
.larena-choice-grid > legend { grid-column: 1 / -1; }
/* The options of a choice field are a list typed line by line: they take the whole row. */
.larena-choice-grid > [data-larena-storage-field-options] { grid-column: 1 / -1; }

/* Sign-in (the Auth login page also loads this stylesheet). Split sign-in: the form column at the start of the line, the brand picture filling the rest.
   Logical properties only, so a right-to-left page mirrors without its own rules. */
.larena-auth--split {
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--sf-surface-0, #ffffff);
}

.larena-auth--split .larena-auth__side {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-4, 2rem);
    min-width: 0;
    padding-block: var(--sf-space-4, 2rem);
    padding-inline: clamp(1.5rem, 5vw, 3.5rem);
}

.larena-auth--split .larena-auth__logo { display: block; block-size: 2rem; inline-size: auto; }

.larena-auth--split .larena-auth__screen {
    display: flex;
    flex: 1;
    align-items: center;
    min-height: 0;
    padding: 0;
}

.larena-auth--split .larena-layout__section { inline-size: 100%; }

.larena-auth--split .larena-auth__panel {
    inline-size: min(100%, 25rem);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The mark above already names Larena. */
.larena-auth--split .larena-auth__eyebrow { display: none; }

.larena-auth--split .larena-auth__title { margin-block-end: var(--sf-space-1, .75rem); font-size: var(--sf-text-6, 1.75rem); }

.larena-auth--split .larena-auth__note { margin-block: var(--sf-space-1\/2, .5rem) var(--sf-space-2, 1rem); }

.larena-auth--split .larena-auth__languages {
    display: flex;
    gap: var(--sf-space-1, .75rem);
    margin-block-end: var(--sf-space-3, 1.5rem);
    font-size: var(--sf-text-1, .875rem);
}

.larena-auth--split .larena-auth__languages a { color: var(--sf-on-surface-variant, #6b7280); text-decoration: none; }
.larena-auth--split .larena-auth__languages a[aria-current="page"] { color: var(--sf-on-surface, #1f2937); font-weight: 600; }

.larena-auth--split .larena-auth__form { gap: var(--sf-space-2, 1rem); }
.larena-auth--split .larena-auth__form > [data-larena-smart-part] { display: grid; gap: var(--sf-space-2, 1rem); }
.larena-auth--split .larena-auth__form > [data-larena-smart-part]:empty { display: none; }

.larena-auth--split .larena-auth__notice { margin-block-end: var(--sf-space-2, 1rem); }

.larena-auth--split .larena-auth__actions .sf-button { inline-size: 100%; justify-content: center; }

.larena-auth--split .larena-auth__hint { margin: 0; }

.larena-auth--split .larena-auth__link { margin-block: var(--sf-space-2, 1rem) 0; font-size: var(--sf-text-1, .875rem); }
.larena-auth--split .larena-auth__link a { color: var(--sf-primary, #2563eb); }

/* The brand picture: a night sky, dark in either theme, drawn by the page's script on this canvas. */
.larena-auth__art { position: relative; overflow: hidden; background: #03040a; }
.larena-auth__art-canvas { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
.larena-auth__art-picture { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.larena-auth__art-dim { position: absolute; inset: 0; pointer-events: none; }

/* On a narrow screen the form takes the page and the picture is left out. */
@media (max-width: 56rem) {
    .larena-auth--split { grid-template-columns: minmax(0, 1fr); }
    .larena-auth--split .larena-auth__art { display: none; }
    .larena-auth--split .larena-auth__screen { align-items: flex-start; }
    .larena-auth--split .larena-auth__panel { inline-size: 100%; }
}

/* The admin menu with its host port (mockup v5): two columns of the menu's own width beside the work
   area, no top bar; the page's path sits over its title. A phone keeps one slim row with the menu button,
   and the menu opens over the page at full height. */
.larena-shell[data-larena-menu-port] { grid-template-columns: max-content minmax(0, 1fr); }
/* Until the menu has drawn from its port answer, its column keeps the width it had on the last page in this browser
   (--larena-admin-menu-reserve, set in the head before the first paint), so the work area does not move while the
   menu builds. */
@media (min-width: 801px) {
    .larena-shell[data-larena-menu-port]:not([data-larena-menu-ready]) .larena-sidebar--smart { min-inline-size: var(--larena-admin-menu-reserve, 0px); }
    /* A stored width is also the most the column takes before then: a skeleton wider than the menu it ends as (an open
       menu's skeleton over a compact menu) stays inside the column instead of pushing the work area. */
    .larena-shell[data-larena-menu-port]:not([data-larena-menu-ready]) .larena-sidebar--smart { max-inline-size: var(--larena-admin-menu-reserve, none); }
    /* A first visit has no stored width: an open menu is drawn in two columns (32.125rem on the stand's labels). */
    .larena-shell[data-larena-menu-port][data-larena-navigation-compact="false"]:not([data-larena-menu-ready]) .larena-sidebar--smart { min-inline-size: var(--larena-admin-menu-reserve, 32.125rem); }
}
/* The menu stands under the drawer layer, so a record panel's scrim dims it too; the menu's own popups
   (palette, profile menu) open in the browser's top layer. */
.larena-shell[data-larena-menu-port] .larena-sidebar--smart { padding: 0; z-index: var(--sf-z-index-8, 80); }
/* The admin's own link colour stops at the menu: its rows take the menu's colours. */
.larena-shell[data-larena-menu-port] .larena-sidebar--smart a { color: inherit; }
.larena-shell[data-larena-menu-port] .larena-topbar--phone { display: none; }
/* The path is drawn by the breadcrumbs component once its script runs; its line is held from the first paint. */
.larena-page-path { min-block-size: 1.25rem; margin: 0 0 1.25rem; }
@media (max-width: 800px) {
    .larena-shell[data-larena-menu-port] .larena-topbar--phone { display: flex; }
    .larena-shell[data-larena-menu-port][data-larena-navigation-state="expanded"] .larena-sidebar--smart {
        height: calc(100dvh - 3.5rem);
        max-height: calc(100dvh - 3.5rem);
    }
}

/* The alert bar stands at the top of the window (owner 2026-11-06): the menu column takes the window's height less the
   bar's, so its foot (the person, the notifications) stays in view; the bar's height is measured by form-state.js. */
.larena-alert-bar { position: sticky; top: 0; z-index: var(--sf-z-index-9, 90); }
[data-larena-shell-preset="product"] .larena-sidebar--smart {
    top: var(--larena-alert-bar-block-size, 0px);
    height: calc(100dvh - var(--larena-alert-bar-block-size, 0px));
}
@media (max-width: 800px) {
    .larena-shell[data-larena-menu-port][data-larena-navigation-state="expanded"] .larena-sidebar--smart {
        height: calc(100dvh - 3.5rem - var(--larena-alert-bar-block-size, 0px));
        max-height: calc(100dvh - 3.5rem - var(--larena-alert-bar-block-size, 0px));
    }
    /* On a phone the menu stands in the page's flow under the bar: no offset, or it moves down by the bar twice. */
    [data-larena-shell-preset="product"] .larena-sidebar--smart { top: 0; }
}