/* Pico mapping: every Pico colour reads a --pampa token, in both schemes (0,2,0 beats every Pico theme block) */
:root:not([data-theme=dark]),
:root[data-theme=dark] {
  --pico-background-color: var(--pampa-bg);
  --pico-color: var(--pampa-text);
  --pico-h1-color: var(--pampa-text);
  --pico-h2-color: var(--pampa-text);
  --pico-h3-color: var(--pampa-text);
  --pico-h4-color: var(--pampa-text);
  --pico-h5-color: var(--pampa-text);
  --pico-h6-color: var(--pampa-text);
  --pico-muted-color: var(--pampa-muted);
  --pico-muted-border-color: var(--pampa-border);
  --pico-primary: var(--pampa-primary);
  --pico-primary-hover: var(--pampa-primary);
  --pico-primary-underline: var(--pampa-link-underline);
  --pico-primary-hover-underline: var(--pampa-primary);
  --pico-primary-background: var(--pampa-primary-fill);
  --pico-primary-border: var(--pampa-primary-fill);
  --pico-primary-hover-background: var(--pampa-primary-fill-hover);
  --pico-primary-hover-border: var(--pampa-primary-fill-hover);
  --pico-primary-focus: var(--pampa-focus-ring);
  --pico-primary-inverse: var(--pampa-on-primary);
  --pico-secondary: var(--pampa-muted);
  --pico-secondary-hover: var(--pampa-text);
  --pico-secondary-underline: var(--pampa-link-underline);
  --pico-secondary-hover-underline: var(--pampa-muted);
  --pico-secondary-background: var(--pampa-raised);
  --pico-secondary-border: var(--pampa-border-strong);
  --pico-secondary-hover-background: var(--pampa-secondary-hover);
  --pico-secondary-hover-border: var(--pampa-control-border);
  --pico-secondary-focus: var(--pampa-focus-ring);
  --pico-secondary-inverse: var(--pampa-text);
  --pico-card-background-color: var(--pampa-surface);
  --pico-card-sectioning-background-color: var(--pampa-raised);
  --pico-card-border-color: var(--pampa-border);
  --pico-card-box-shadow: none;
  --pico-box-shadow: var(--pampa-shadow-overlay);
  --pico-form-element-background-color: var(--pampa-input-bg);
  --pico-form-element-active-background-color: var(--pampa-input-bg);
  --pico-form-element-border-color: var(--pampa-control-border);
  --pico-form-element-active-border-color: var(--pampa-focus);
  --pico-form-element-focus-color: var(--pampa-focus-ring);
  --pico-form-element-color: var(--pampa-text);
  --pico-form-element-placeholder-color: var(--pampa-muted);
  --pico-form-element-invalid-border-color: var(--pampa-danger);
  --pico-form-element-invalid-active-border-color: var(--pampa-danger);
  --pico-form-element-invalid-focus-color: var(--pampa-focus-ring);
  --pico-form-element-valid-border-color: var(--pampa-control-border);
  --pico-form-element-valid-active-border-color: var(--pampa-focus);
  --pico-table-border-color: var(--pampa-border);
  --pico-code-background-color: var(--pampa-raised);
  --pico-code-color: var(--pampa-text);
  --pico-code-kbd-background-color: var(--pampa-text);
  --pico-code-kbd-color: var(--pampa-surface);
  --pico-mark-background-color: var(--pampa-warn-surface);
  --pico-mark-color: var(--pampa-warn);
  --pico-ins-color: var(--pampa-ok);
  --pico-del-color: var(--pampa-danger);
  --pico-switch-background-color: var(--pampa-border-strong);
  --pico-switch-checked-background-color: var(--pampa-primary-fill);
  --pico-switch-color: #FFFFFF;
  --pico-accordion-border-color: var(--pampa-border);
  --pico-accordion-close-summary-color: var(--pampa-text);
  --pico-accordion-open-summary-color: var(--pampa-text);
  --pico-accordion-active-summary-color: var(--pampa-primary);
  --pico-text-selection-color: var(--pampa-focus-ring);
  --pico-dropdown-background-color: var(--pampa-surface);
  --pico-dropdown-border-color: var(--pampa-border);
  --pico-dropdown-color: var(--pampa-text);
}

/* Colour tokens, light (the default scheme) */
:root:not([data-theme=dark]) {
  --pampa-bg: #F4F5F7;
  --pampa-surface: #FFFFFF;
  --pampa-raised: #EEF0F3;
  --pampa-row-hover: #F7F8FA;
  --pampa-secondary-hover: #E3E6EB;
  --pampa-input-bg: #FFFFFF;
  --pampa-border: #DCE0E6;
  --pampa-border-strong: #B4BCC8;
  --pampa-control-border: #7D8696;
  --pampa-text: #14181F;
  --pampa-muted: #566070;
  --pampa-primary: #1B5BCC;
  --pampa-link-underline: rgb(27 91 204 / .4);
  --pampa-primary-fill: #1B5BCC;
  --pampa-primary-fill-hover: #164BA8;
  --pampa-on-primary: #FFFFFF;
  --pampa-danger-fill: #B01E1E;
  --pampa-danger-fill-hover: #8F1818;
  --pampa-on-danger: #FFFFFF;
  --pampa-focus: #1B5BCC;
  --pampa-focus-ring: rgb(27 91 204 / .35);
  --pampa-screen: #000000;
  --pampa-on-screen: #C9CED6;
  --pampa-ok: #12663A;
  --pampa-ok-surface: #E3F3E9;
  --pampa-warn: #835000;
  --pampa-warn-surface: #FBEFD6;
  --pampa-danger: #B01E1E;
  --pampa-danger-surface: #FBE7E7;
  --pampa-info: #1B5BCC;
  --pampa-info-surface: #E4EDFB;
  --pampa-neutral: #4A5361;
  --pampa-neutral-surface: #ECEEF1;
  --pampa-shadow-overlay: 0 8px 24px rgb(20 24 31 / .12), 0 1px 2px rgb(20 24 31 / .08);
}

/* Colour tokens, dark, following the OS preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --pampa-bg: #0B0D12;
    --pampa-surface: #12151C;
    --pampa-raised: #1A1E27;
    --pampa-row-hover: #161A22;
    --pampa-secondary-hover: #232833;
    --pampa-input-bg: #0B0D12;
    --pampa-border: #272C37;
    --pampa-border-strong: #3B4252;
    --pampa-control-border: #5E6678;
    --pampa-text: #E6E8EC;
    --pampa-muted: #9BA3B1;
    --pampa-primary: #7CB0FF;
    --pampa-link-underline: rgb(124 176 255 / .45);
    --pampa-primary-fill: #2B67DE;
    --pampa-primary-fill-hover: #245AC4;
    --pampa-on-primary: #FFFFFF;
    --pampa-danger-fill: #C53030;
    --pampa-danger-fill-hover: #A82828;
    --pampa-on-danger: #FFFFFF;
    --pampa-focus: #7CB0FF;
    --pampa-focus-ring: rgb(124 176 255 / .45);
    --pampa-screen: #000000;
    --pampa-on-screen: #C9CED6;
    --pampa-ok: #5BD08A;
    --pampa-ok-surface: #10261A;
    --pampa-warn: #F2B84B;
    --pampa-warn-surface: #2B2010;
    --pampa-danger: #FF8A8A;
    --pampa-danger-surface: #321718;
    --pampa-info: #7CB0FF;
    --pampa-info-surface: #122039;
    --pampa-neutral: #AEB5C2;
    --pampa-neutral-surface: #1E222B;
    --pampa-shadow-overlay: 0 8px 24px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .04);
  }
}

/* Colour tokens, dark, for an explicit data-theme="dark" (same values as the OS block) */
:root[data-theme=dark] {
  --pampa-bg: #0B0D12;
  --pampa-surface: #12151C;
  --pampa-raised: #1A1E27;
  --pampa-row-hover: #161A22;
  --pampa-secondary-hover: #232833;
  --pampa-input-bg: #0B0D12;
  --pampa-border: #272C37;
  --pampa-border-strong: #3B4252;
  --pampa-control-border: #5E6678;
  --pampa-text: #E6E8EC;
  --pampa-muted: #9BA3B1;
  --pampa-primary: #7CB0FF;
  --pampa-link-underline: rgb(124 176 255 / .45);
  --pampa-primary-fill: #2B67DE;
  --pampa-primary-fill-hover: #245AC4;
  --pampa-on-primary: #FFFFFF;
  --pampa-danger-fill: #C53030;
  --pampa-danger-fill-hover: #A82828;
  --pampa-on-danger: #FFFFFF;
  --pampa-focus: #7CB0FF;
  --pampa-focus-ring: rgb(124 176 255 / .45);
  --pampa-screen: #000000;
  --pampa-on-screen: #C9CED6;
  --pampa-ok: #5BD08A;
  --pampa-ok-surface: #10261A;
  --pampa-warn: #F2B84B;
  --pampa-warn-surface: #2B2010;
  --pampa-danger: #FF8A8A;
  --pampa-danger-surface: #321718;
  --pampa-info: #7CB0FF;
  --pampa-info-surface: #122039;
  --pampa-neutral: #AEB5C2;
  --pampa-neutral-surface: #1E222B;
  --pampa-shadow-overlay: 0 8px 24px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .04);
}

/* Scale tokens and non-colour Pico variables (touch sizes first, desktop density from 1024px) */
:root {
  --pampa-space-1: .25rem;
  --pampa-space-2: .5rem;
  --pampa-space-3: .75rem;
  --pampa-space-4: 1rem;
  --pampa-space-5: 1.5rem;
  --pampa-space-6: 2rem;
  --pampa-space-7: 3rem;
  --pampa-radius-sm: .25rem;
  --pampa-radius: .375rem;
  --pampa-topbar: 3.5rem;
  --pampa-sidebar: 15rem;
  --pampa-side: 20rem;
  --pampa-content-max: 96rem;
  --pampa-dur-fast: 150ms;
  --pampa-dur: 200ms;
  --pampa-dur-slow: 250ms;
  --pampa-ease-out: cubic-bezier(.2, 0, 0, 1);
  --pampa-font-mono: var(--pico-font-family-monospace);
  --pico-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --pico-font-size: 100%;
  --pico-line-height: 1.5;
  --pico-border-radius: var(--pampa-radius);
  --pico-outline-width: 2px;
  --pico-spacing: 1rem;
  --pico-typography-spacing-vertical: .75rem;
  --pico-block-spacing-vertical: 1rem;
  --pico-block-spacing-horizontal: 1rem;
  --pico-form-element-spacing-vertical: .5625rem;
  --pico-form-element-spacing-horizontal: .75rem;
  --pico-form-label-font-weight: 500;
  --pico-transition: var(--pampa-dur-fast) var(--pampa-ease-out);
}
@media (min-width: 1024px) {
  :root {
    --pico-font-size: 93.75%;
    --pico-form-element-spacing-vertical: .375rem;
  }
}
@media (min-width: 1280px) {
  :root { --pampa-sidebar: 16rem; }
}

/* Tone hook: status, callout, error, stale, toast, stat strip and danger zone read these */
[data-tone=ok] { --tone-text: var(--pampa-ok); --tone-surface: var(--pampa-ok-surface); }
[data-tone=warn] { --tone-text: var(--pampa-warn); --tone-surface: var(--pampa-warn-surface); }
[data-tone=danger] { --tone-text: var(--pampa-danger); --tone-surface: var(--pampa-danger-surface); }
[data-tone=info] { --tone-text: var(--pampa-info); --tone-surface: var(--pampa-info-surface); }
[data-tone=neutral] { --tone-text: var(--pampa-neutral); --tone-surface: var(--pampa-neutral-surface); }

/* Base: headings, helpers and the focus ring */
html { scroll-padding-top: 4.5rem; }
h1 { --pico-font-size: 1.5rem; --pico-line-height: 1.25; --pico-font-weight: 600; --pico-typography-spacing-top: 0; letter-spacing: -.01em; }
h2 { --pico-font-size: 1.0625rem; --pico-line-height: 1.35; --pico-font-weight: 600; --pico-typography-spacing-top: 1.5rem; }
h3 { --pico-font-size: 1rem; --pico-line-height: 1.4; --pico-font-weight: 600; --pico-typography-spacing-top: 1.25rem; }
small { --pico-font-size: .875rem; }
code, kbd { padding: .125rem .375rem; border-radius: var(--pampa-radius-sm); }
pre { border-radius: var(--pampa-radius); }
.icon { flex: none; vertical-align: -.125em; }
.mono, .ts { font-family: var(--pampa-font-mono); font-size: .9em; font-variant-numeric: tabular-nums; }
.ts { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.muted { color: var(--pampa-muted); }
.mono .muted { font-family: var(--pico-font-family-sans-serif); }
.sub { display: block; color: var(--pampa-muted); font-size: .875rem; font-weight: 400; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a:focus-visible, button:focus-visible, [role=button]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, details summary:focus-visible {
  outline: 2px solid var(--pampa-focus);
  outline-offset: 2px;
}
@media (min-width: 1024px) {
  html { scroll-padding-top: 1rem; }
}

/* Buttons: primary by default, then secondary (Pico), ghost, danger, danger-outline, small and icon-only */
:is(button, [role=button]), a[role=button] { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
:is(button, [role=button], [type=submit], [type=button]) { margin: 0; }
button[type=submit] { width: auto; }
.btn-sm { --pico-form-element-spacing-vertical: .25rem; --pico-form-element-spacing-horizontal: .625rem; font-size: .875rem; }
:is(button, [type=submit], [type=button], [role=button]).ghost { --pico-background-color: transparent; --pico-border-color: transparent; --pico-color: var(--pampa-muted); }
:is(button, [type=submit], [type=button], [role=button]).ghost:is(:hover, :active, :focus) { --pico-background-color: var(--pampa-raised); --pico-border-color: transparent; --pico-color: var(--pampa-text); }
:is(button, [type=submit], [type=button], [role=button]).danger { --pico-background-color: var(--pampa-danger-fill); --pico-border-color: var(--pampa-danger-fill); --pico-color: var(--pampa-on-danger); }
:is(button, [type=submit], [type=button], [role=button]).danger:is(:hover, :active, :focus) { --pico-background-color: var(--pampa-danger-fill-hover); --pico-border-color: var(--pampa-danger-fill-hover); --pico-color: var(--pampa-on-danger); }
:is(button, [type=submit], [type=button], [role=button]).danger-outline { --pico-background-color: transparent; --pico-border-color: var(--pampa-danger); --pico-color: var(--pampa-danger); }
:is(button, [type=submit], [type=button], [role=button]).danger-outline:is(:hover, :active, :focus) { --pico-background-color: var(--pampa-danger-surface); --pico-border-color: var(--pampa-danger); --pico-color: var(--pampa-danger); }
.icon-btn { width: 2rem; height: 2rem; padding: 0; flex: none; }
.icon-btn[aria-busy=true] .icon { display: none; }
:is(button, [role=button]):is(.secondary, .ghost, .danger-outline, .icon-btn)[aria-busy=true]:not(.outline)::before { filter: none; }
@media (max-width: 1023px) {
  .btn-sm { min-height: 2.75rem; }
  .icon-btn { width: 2.75rem; height: 2.75rem; }
}

/* Forms: labels, hints, field rows, button rows and inline forms */
.optional { color: var(--pampa-muted); font-size: .875rem; font-weight: 400; }
.field-hint { display: block; margin: -.75rem 0 1rem; color: var(--pampa-muted); font-size: .875rem; font-weight: 400; }
.help { margin: 0 0 1rem; color: var(--pampa-muted); font-size: .875rem; }
.form-narrow, .shell > main > .form-narrow { max-width: 44rem; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; }
.form-actions > * { margin: 0; }
.form-actions small { color: var(--pampa-muted); }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 1rem; }
.inline-form > label { flex: 1 1 14rem; margin-bottom: 0; }
.inline-form > button { margin-bottom: var(--pico-spacing); }
.inline-form > .form-error { flex: 1 1 100%; }
.model-field { flex: 1 1 14rem; }
.model-field:not(form > *) { margin: 0; }
.model-field:not(form > *) select { margin-bottom: 0; }
.switch { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; margin: 0; }
.switch input { margin: 0; }
.form-error { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1rem; padding: .5rem .75rem; background: var(--pampa-danger-surface); color: var(--pampa-danger); border-radius: var(--pampa-radius); font-size: .875rem; }
.form-error .icon { margin-top: .1875rem; }
@media (min-width: 768px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .switch { min-height: 2.75rem; }
}

/* Shell: skip link, top bar with menu, sidebar, nav, user block and main */
.skip-link { position: absolute; top: -4rem; left: 1rem; z-index: 60; padding: .5rem .75rem; background: var(--pampa-surface); border: 1px solid var(--pampa-border); border-radius: var(--pampa-radius); }
.skip-link:focus { top: 1rem; }
.shell { min-height: 100dvh; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: var(--pampa-topbar); padding: 0 1rem; background: var(--pampa-surface); border-bottom: 1px solid var(--pampa-border); }
.sidebar { display: none; }
.brand { --pico-color: var(--pampa-text); --pico-text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--pampa-text); font-weight: 600; text-decoration: none; }
.brand-mark { width: 1.125rem; height: 1.125rem; border-radius: var(--pampa-radius-sm); background: var(--pampa-primary-fill); }
.nav-menu { margin: 0; }
.nav-menu > summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--pampa-border-strong); border-radius: var(--pampa-radius); line-height: 1.5; }
.nav-menu > summary::after { display: none; }
.nav-menu[open] > summary { margin-bottom: 0; background: var(--pampa-raised); }
.nav-menu-panel { position: absolute; top: var(--pampa-topbar); right: 0; left: 0; z-index: 30; max-height: calc(100dvh - var(--pampa-topbar)); overflow-y: auto; padding: .5rem 1rem 1rem; background: var(--pampa-surface); border-bottom: 1px solid var(--pampa-border); box-shadow: var(--pampa-shadow-overlay); animation: pampa-drop var(--pampa-dur) var(--pampa-ease-out); }
.nav, .nav ul { display: block; }
.nav ul { margin: 0; padding: 0; }
.nav ul:is(:first-of-type, :last-of-type) { margin-inline: 0; }
.nav li { display: block; margin: 0; padding: 0; list-style: none; }
.nav li::before { content: none; }
.nav-group { margin: 1rem .5rem .25rem; color: var(--pampa-muted); font-size: .8rem; font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
.nav-section:first-child .nav-group { margin-top: .5rem; }
.nav a { --pico-color: var(--pampa-muted); --pico-background-color: transparent; --pico-text-decoration: none; display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; margin: 0; padding: .25rem .5rem; border-radius: var(--pampa-radius); font-weight: 500; transition: background-color var(--pampa-dur-fast) var(--pampa-ease-out), color var(--pampa-dur-fast) var(--pampa-ease-out); }
.nav a:is(:hover, [aria-current=page]) { --pico-color: var(--pampa-text); --pico-background-color: var(--pampa-raised); --pico-text-decoration: none; }
.nav a[aria-current=page] { box-shadow: inset 2px 0 0 var(--pampa-primary); }
.nav a[aria-current=page] .icon { color: var(--pampa-primary); }
.nav .nav-foot { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--pampa-border); }
.user-block { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; padding: .75rem .5rem 0; border-top: 1px solid var(--pampa-border); }
.user-text { flex: 1; min-width: 0; line-height: 1.3; }
.user-text strong, .user-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-text small { color: var(--pampa-muted); }
.shell > main { min-width: 0; padding: 1rem 1rem 4rem; }
.shell > main:focus-visible { outline-offset: -2px; }
.shell > main > * { max-width: var(--pampa-content-max); }
@keyframes pampa-drop { from { opacity: 0; transform: translateY(-.25rem); } }
@media (min-width: 768px) {
  .topbar { padding: 0 1.5rem; }
  .nav-menu-panel { padding: .5rem 1.5rem 1rem; }
  .nav-menu-panel .nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; }
  .nav-menu-panel .nav-foot { grid-column: 1 / -1; }
  .nav-menu-panel .nav-group { margin-top: .5rem; }
  .shell > main { padding: 1.5rem 1.5rem 4rem; }
}
@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: var(--pampa-sidebar) minmax(0, 1fr); }
  .topbar { display: none; }
  .sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100dvh; overflow-y: auto; padding: 1rem .75rem; background: var(--pampa-surface); border-right: 1px solid var(--pampa-border); }
  .sidebar > .brand { padding: .25rem .5rem .5rem; }
  .sidebar > .user-block { margin-top: auto; }
  .nav a { min-height: 2rem; }
  .shell > main { padding: 1.5rem 2rem 4rem; }
}
@media (min-width: 1280px) {
  .shell > main { padding: 2rem 2.5rem 4rem; }
}

/* Public layout: sign in, password reset, phone setup */
.public { display: flex; flex-direction: column; align-items: center; min-height: 100dvh; padding: 2rem 1rem; }
.public > .brand { font-size: 1.0625rem; }
.public-card { width: min(24rem, 100%); margin: 1rem 0 0; padding: 1.5rem; background: var(--pampa-surface); border: 1px solid var(--pampa-border); box-shadow: none; }
.public-card.wide { width: min(34rem, 100%); }
.public-card h1 { margin-bottom: .25rem; }
.public-card h1 + :is(form, .callout) { margin-top: 1rem; }
.public-card > .muted { margin-bottom: 1.25rem; }
.public button[type=submit] { width: 100%; }
.public-foot { margin: 1rem 0 0; color: var(--pampa-muted); font-size: .875rem; }
.public-card > :last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .public { padding-top: 12vh; }
}

/* Toast: the flash in its live region */
.toast-region { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 50; display: flex; justify-content: flex-end; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: .625rem; width: min(26rem, 100%); padding: .5rem .5rem .5rem .875rem; background: var(--pampa-surface); color: var(--pampa-text); border: 1px solid var(--pampa-border); border-left: 3px solid var(--tone-text); border-radius: var(--pampa-radius); box-shadow: var(--pampa-shadow-overlay); pointer-events: auto; animation: pampa-rise var(--pampa-dur) var(--pampa-ease-out); }
.toast > .icon { margin-top: .5rem; color: var(--tone-text); }
.toast p { flex: 1; margin: .3125rem 0; }
@keyframes pampa-rise { from { opacity: 0; transform: translateY(.5rem); } }

/* Page header */
.page-header { margin-bottom: 1.5rem; }
.back { --pico-color: var(--pampa-muted); --pico-text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; min-height: 2rem; margin-bottom: .25rem; font-size: .875rem; }
.back:hover { --pico-color: var(--pampa-text); }
.page-header-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; }
.page-header hgroup { flex: 1 1 20rem; min-width: 0; margin: 0; }
.page-header h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; margin: 0; overflow-wrap: anywhere; }
.page-header hgroup > p { margin: .25rem 0 0; font-size: .9375rem; max-width: 70ch; }
:not(td).actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.actions > *, .actions form { margin: 0; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: .5rem 0 0; color: var(--pampa-muted); font-size: .875rem; }
@media (max-width: 767px) {
  .back { min-height: 2.75rem; }
  .page-header .actions { width: 100%; }
  .page-header .actions > * { flex: 1 1 auto; }
}

/* Panel */
.panel { min-width: 0; margin: 0 0 1.5rem; background: var(--pampa-surface); border: 1px solid var(--pampa-border); border-radius: var(--pampa-radius); }
.panel[data-tone=danger] { border-color: var(--tone-text); }
.panel[data-tone=danger] .panel-header h2 { color: var(--tone-text); }
.panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .625rem 1rem; border-bottom: 1px solid var(--pampa-border); }
.panel-header > div { min-width: 0; }
.panel-header h2 { margin: 0; }
.panel-header p { margin: .125rem 0 0; color: var(--pampa-muted); font-size: .875rem; }
.panel-body { padding: 1rem; }
.panel-body > :last-child, .panel-pad > :last-child { margin-bottom: 0; }
.panel-body.flush { padding: 0; }
.panel-body.flush > .table-wrap { margin: 0; border: 0; border-radius: 0 0 var(--pampa-radius) var(--pampa-radius); }
.panel-body.flush > :is(.skeleton, .error-state, .stale) { margin: 1rem; }
.panel-body.flush > .skeleton[data-shape=table] { margin: 0; background: transparent; border: 0; border-radius: 0; }
.panel-body.flush > .empty { padding: 1rem; }
.panel-pad { padding: 1rem; }
.panel-body.flush > .panel-pad + .table-wrap { border-top: 1px solid var(--pampa-border); }
.panel h3 { margin: 1.25rem 0 .5rem; }
.panel-body > h3:first-child { margin-top: 0; }
.panel .empty { margin: 0; padding: 0; border: 0; }
.panel .empty:not(:last-child) { margin-bottom: 1rem; }
.panel-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; background: var(--pampa-raised); border-top: 1px solid var(--pampa-border); border-radius: 0 0 var(--pampa-radius) var(--pampa-radius); }
.panel-footer > * { margin: 0; }
.panel-footer small { color: var(--pampa-muted); }

/* Status badge: text plus colour, never colour alone */
.status { display: inline-flex; align-items: center; gap: .375rem; padding: 0 .5rem; border-radius: var(--pampa-radius-sm); background: var(--tone-surface); color: var(--tone-text); font-size: .8125rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
.status::before { content: ""; flex: none; width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; }

/* Empty state */
.empty { display: grid; justify-items: start; gap: .5rem; margin: 0 0 1.5rem; padding: 1.25rem 1rem; border: 1px dashed var(--pampa-border-strong); border-radius: var(--pampa-radius); color: var(--pampa-muted); }
.empty-title { margin: 0; color: var(--pampa-text); font-weight: 600; }
.empty p { margin: 0; }

/* Callout, error state and stale notice */
.callout, .error-state, .stale { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 0 0 1rem; padding: .625rem .875rem; background: var(--tone-surface); color: var(--pampa-text); border-left: 3px solid var(--tone-text); border-radius: var(--pampa-radius); }
.callout { align-items: flex-start; }
.error-state, .stale { align-items: center; }
.callout > .icon { margin-top: .25rem; color: var(--tone-text); }
.error-state > .icon, .stale > .icon { color: var(--tone-text); }
.callout-body { flex: 1 1 12rem; min-width: 0; }
.callout-body > * { margin: 0; }
.callout-body > * + * { margin-top: .5rem; }
.callout-title { font-weight: 600; }
.error-state p, .stale p { flex: 1 1 12rem; margin: 0; }
@media (max-width: 767px) {
  .callout > .actions { width: 100%; }
  .callout > .actions > * { flex: 1 1 auto; }
  .callout > .actions :is(button, [role=button]) { width: 100%; }
}

/* Skeleton: static placeholders, no spinner */
.skeleton { display: grid; gap: .625rem; margin: 0 0 1.5rem; }
.skeleton-bar { display: block; height: 1rem; border-radius: var(--pampa-radius-sm); background: var(--pampa-border); }
.skeleton-bar:nth-child(3n) { width: 64%; }
.skeleton-bar:nth-child(3n+1) { width: 82%; }
.skeleton[data-shape=line] .skeleton-bar { width: 12rem; height: 2.25rem; }
.skeleton[data-shape=cards] { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }
.skeleton[data-shape=cards] .skeleton-bar { width: auto; height: auto; aspect-ratio: 3 / 4; border-radius: var(--pampa-radius); }
.skeleton[data-shape=table] { gap: 0; overflow: hidden; background: var(--pampa-surface); border: 1px solid var(--pampa-border); border-radius: var(--pampa-radius); }
.skeleton[data-shape=table] .skeleton-bar { position: relative; width: auto; height: 2.75rem; border-radius: 0; background: transparent; border-bottom: 1px solid var(--pampa-border); }
.skeleton[data-shape=table] .skeleton-bar:nth-child(2) { background: var(--pampa-raised); }
.skeleton[data-shape=table] .skeleton-bar:last-child { border-bottom: 0; }
.skeleton[data-shape=table] .skeleton-bar::after { content: ""; position: absolute; top: 1rem; left: 1rem; right: 40%; height: .75rem; border-radius: var(--pampa-radius-sm); background: var(--pampa-border); }

/* Key-value list: two columns, one column on phones and in the side column */
.kv { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: .375rem 1.5rem; margin: 0 0 1rem; }
.kv > div { display: contents; }
.kv dt { color: var(--pampa-muted); font-size: .875rem; font-weight: 400; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv dd.pre { white-space: pre-wrap; }
@media (max-width: 479px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dd { margin-bottom: .5rem; }
}

/* Detail layout: work on the left, facts in a 20rem side column from 1200px */
.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.5rem; align-items: start; }
.detail-main, .detail-side { min-width: 0; }
@media (min-width: 1200px) {
  .detail { grid-template-columns: minmax(0, 1fr) var(--pampa-side); }
  .detail-side .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .detail-side .kv dd { margin-bottom: .5rem; }
  .detail-side .field-row { grid-template-columns: minmax(0, 1fr); }
}

/* Tables: scroll inside the wrapper; .stack tables become labelled rows below 768px */
.table-wrap { position: relative; overflow-x: auto; margin: 0 0 1.5rem; background: linear-gradient(90deg, var(--pampa-surface) 30%, transparent) 0 0, linear-gradient(90deg, transparent, var(--pampa-surface) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .2), transparent) 0 0, radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .2), transparent) 100% 0 var(--pampa-surface); background-repeat: no-repeat; background-size: 2.5rem 100%, 2.5rem 100%, .875rem 100%, .875rem 100%; background-attachment: local, local, scroll, scroll; border: 1px solid var(--pampa-border); border-radius: var(--pampa-radius); }
.table-wrap table { margin: 0; font-size: .9375rem; }
.table-wrap table:not(.stack) { min-width: 40rem; }
.table-wrap :is(th, td) { --pico-border-width: 1px; padding: .5rem .75rem; background: transparent; border-bottom: 1px solid var(--pampa-border); vertical-align: middle; transition: background-color var(--pampa-dur-fast) var(--pampa-ease-out); }
.table-wrap thead th { background: var(--pampa-raised); color: var(--pampa-muted); font-size: .8rem; font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.table-wrap tbody th[scope=row] { font-weight: 500; }
.table-wrap tbody tr:last-child > * { border-bottom: 0; }
.table-wrap tbody tr:hover > * { background: var(--pampa-row-hover); }
.table-wrap tr:has(+ .error-row) > * { border-bottom: 0; }
.table-wrap code { font-size: .8125rem; }
.error-row td { padding-top: 0; color: var(--pampa-danger); font-size: .875rem; }
.error-row .icon { margin-right: .375rem; }
td.actions { text-align: right; }
.row-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .375rem; }
.row-actions > * { margin: 0; white-space: nowrap; }
@media (max-width: 767px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.stack, table.stack tbody, table.stack tr, table.stack tbody :is(th, td) { display: block; width: 100%; }
  table.stack tbody tr { padding: .75rem 1rem; border-bottom: 1px solid var(--pampa-border); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack tbody tr:has(+ .error-row) { border-bottom: 0; padding-bottom: 0; }
  table.stack tbody :is(th, td) { padding: .25rem 0; border: 0; text-align: left; white-space: normal; }
  table.stack tbody tr:hover > * { background: transparent; }
  table.stack tbody th[scope=row] { padding-bottom: .375rem; font-size: 1rem; font-weight: 600; }
  table.stack tbody td[data-label] { position: relative; min-height: 1.75rem; padding-left: 8.25rem; }
  table.stack tbody td[data-label]::before { content: attr(data-label); position: absolute; top: .25rem; left: 0; width: 7.5rem; color: var(--pampa-muted); font-family: var(--pico-font-family-sans-serif); font-size: .875rem; line-height: 1.5; }
  table.stack tbody td .ts { white-space: normal; }
  table.stack td.actions { padding-top: .5rem; }
  table.stack .row-actions { justify-content: flex-start; }
}

/* Stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1px; margin: 0 0 1.5rem; overflow: hidden; background: var(--pampa-surface); border: 1px solid var(--pampa-border); border-radius: var(--pampa-radius); }
.stat-strip > div { padding: .625rem .875rem; box-shadow: 1px 0 0 var(--pampa-border), 0 1px 0 var(--pampa-border), 1px 1px 0 var(--pampa-border); }
.stat-strip dt { color: var(--pampa-muted); font-size: .8rem; font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
.stat-strip dd { margin: .125rem 0 0; font-size: 1.5rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-strip [data-tone] dd { color: var(--tone-text); }
.stat-strip dd :is(.status, .ts) { font-size: .875rem; }
.stat-strip dd .ts { display: inline-block; white-space: normal; }
.panel-pad > .stat-strip { margin-bottom: 0; }
@media (max-width: 479px) {
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.card { margin: 0; padding: 0; overflow: hidden; background: var(--pampa-surface); border: 1px solid var(--pampa-border); border-radius: var(--pampa-radius); box-shadow: none; }
.card-body { display: grid; gap: .25rem; padding: .75rem; }
.card-body > * { margin: 0; }
@media (max-width: 767px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
}

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.tags li { margin: 0; padding: 0 .5rem; background: var(--pampa-raised); border-radius: var(--pampa-radius-sm); font-size: .875rem; line-height: 1.6; list-style: none; }

/* Disclosure */
.disclosure { margin: 0 0 1.5rem; background: var(--pampa-surface); border: 1px solid var(--pampa-border); border-radius: var(--pampa-radius); }
.disclosure > summary { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .5rem 1rem; font-weight: 600; line-height: 1.5; }
.disclosure > summary::after { margin-inline-start: auto; }
.disclosure[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--pampa-border); }
.disclosure-body { padding: 1rem; }
.disclosure-body > :last-child { margin-bottom: 0; }
.panel-body > .disclosure { margin-bottom: 1rem; }
@media (max-width: 1023px) {
  .disclosure > summary { min-height: 2.75rem; }
}

/* Sub-navigation tabs (persona sections) */
.subnav { margin: -.5rem 0 1.5rem; overflow-x: auto; border-bottom: 1px solid var(--pampa-border); }
.subnav ul { display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.subnav ul:is(:first-of-type, :last-of-type) { margin-inline: 0; }
.subnav li { margin: 0; padding: 0; list-style: none; }
.subnav li::before { content: none; }
.subnav a { --pico-color: var(--pampa-muted); --pico-text-decoration: none; display: flex; align-items: center; min-height: 2.5rem; margin: 0; padding: 0; border-radius: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover { --pico-color: var(--pampa-text); }
.subnav a[aria-current=page] { --pico-color: var(--pampa-text); border-bottom-color: var(--pampa-primary); font-weight: 600; }
@media (max-width: 1023px) {
  .subnav a { min-height: 2.75rem; }
}

/* Copy field */
.copy-field [role=group] { margin-bottom: 1rem; }
.copy-field input { margin: 0; font-family: var(--pampa-font-mono); font-size: .875rem; text-overflow: ellipsis; }

/* Account block (device and persona pages) */
.account + .account { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pampa-border); }
.account-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.account-head h3 { margin: 0; }
.account > p { margin: 0 0 .5rem; }
.account > .actions { margin-top: .75rem; }

/* Phone screen box (dashboard tiles, chat) */
.screen { display: flex; align-items: center; justify-content: center; aspect-ratio: 9 / 16; overflow: hidden; background: var(--pampa-screen); color: var(--pampa-on-screen); text-align: center; }
.screen img { width: 100%; height: 100%; object-fit: contain; }
.screen-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; font-size: .875rem; }

/* Media preview */
.preview { display: block; width: 100%; max-height: 32rem; object-fit: contain; background: var(--pampa-screen); }
.preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; aspect-ratio: 1; color: var(--pampa-on-screen); font-size: .875rem; }

/* Phone setup page: numbered steps and labelled download buttons */
.setup-steps { margin: 1.25rem 0 0; padding-left: 1.25rem; }
.setup-steps > li { margin-bottom: .75rem; }
.setup-steps > li > p { margin: 0 0 .5rem; }
.download-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.download-list li { margin: 0; list-style: none; }
.download-list a { width: 100%; min-height: 3rem; justify-content: flex-start; gap: .75rem; text-align: left; }
.download-list strong { display: block; font-weight: 600; }
.download-list small { display: block; color: inherit; font-size: .8125rem; }

/* ---- pages: fleet ---- */
.tile-body { grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: start; gap: .5rem; }
.tile-body a { font-weight: 600; overflow-wrap: anywhere; white-space: normal; }
.stepper { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: step; font-size: .875rem; }
.stepper li { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--pampa-muted); list-style: none; counter-increment: step; }
.stepper li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid var(--pampa-border-strong); border-radius: 50%; font-size: .8125rem; font-weight: 600; }
.stepper li[aria-current=step] { color: var(--pampa-text); font-weight: 600; }
.stepper li[aria-current=step]::before { background: var(--pampa-primary-fill); border-color: var(--pampa-primary-fill); color: var(--pampa-on-primary); }
.setup-grid { display: grid; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.qr { justify-self: center; width: 12rem; padding: .75rem; background: #FFFFFF; border-radius: var(--pampa-radius); }
.qr svg { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
  .setup-grid { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .qr { justify-self: start; }
}
table.vpn th[scope=row] .sub { display: block; white-space: nowrap; }
table.vpn td.actions { min-width: 17rem; }

/* ---- pages: device ---- */
.desktop { display: block; width: 100%; height: min(75vh, 56rem); min-height: 24rem; border: 0; background: var(--pampa-surface); }
.desktop-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 16rem; padding: 1.5rem; background: var(--pampa-screen); color: var(--pampa-on-screen); text-align: center; }
.desktop-empty p { max-width: 40ch; margin: 0; color: inherit; }
.desktop-note { margin: 0; padding: .5rem 1rem; border-top: 1px solid var(--pampa-border); color: var(--pampa-muted); font-size: .875rem; }
.chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.chat-screen { order: -1; justify-self: center; width: min(100%, calc(50vh * 9 / 16)); }
.chat-panel { margin: 0; }
.transcript { display: flex; flex-direction: column; gap: .75rem; min-height: 16rem; max-height: 60dvh; overflow-y: auto; padding: 1rem; }
.msg { max-width: 85%; padding: .5rem .75rem; border-radius: var(--pampa-radius); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--pampa-info-surface); }
.msg.assistant { align-self: flex-start; background: var(--pampa-raised); }
.msg.failed { background: var(--pampa-danger-surface); color: var(--pampa-danger); }
.msg.failed > .icon { margin-right: .375rem; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .375rem; color: var(--pampa-muted); font-size: .8125rem; white-space: normal; }
.pending { margin: 0; color: var(--pampa-muted); white-space: normal; }
.steps { margin: 0; padding-left: 1.25rem; font-size: .8125rem; }
.steps li { margin: .125rem 0; }
.composer { margin: 0; padding: .75rem 1rem 1rem; border-top: 1px solid var(--pampa-border); }
.composer fieldset { margin: 0; }
.composer-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; }
@media (min-width: 1024px) {
  .chat.with-screen { grid-template-columns: minmax(0, 1fr) 20rem; }
  .chat-screen { position: sticky; top: 1.5rem; order: 0; justify-self: stretch; width: auto; }
  .transcript { height: calc(100dvh - 22rem); min-height: 18rem; max-height: none; }
}

/* ---- pages: personas ---- */
.memory { max-height: 20rem; margin: 0 0 .5rem; padding: .75rem; overflow: auto; font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.current-device { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ---- pages: publishing ---- */
.plan-items { margin: 0 0 1rem; padding: 0; list-style: none; }
.plan-item { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .25rem .75rem; margin: 0; padding: .75rem 0; border-bottom: 1px solid var(--pampa-border); list-style: none; }
.plan-item:first-child { padding-top: 0; }
.plan-item.editing { display: block; }
.plan-pos { padding-top: .125rem; color: var(--pampa-muted); }
.plan-main { min-width: 0; }
.plan-main > * { margin: 0; }
.plan-intent { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-weight: 600; }
.plan-caption { margin-top: .25rem; color: var(--pampa-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--pampa-border); }
.pager p { margin: 0; color: var(--pampa-muted); font-size: .875rem; }
@media (max-width: 767px) {
  .plan-item { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
}

/* ---- pages: scout ---- */
.focus-cell { display: -webkit-box; max-width: 40ch; overflow: hidden; color: var(--pampa-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.run-id { display: inline-block; max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---- pages: media ---- */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 1rem; }
.toolbar > label { flex: 1 1 14rem; }
.count { margin: 0 0 .75rem; color: var(--pampa-muted); font-size: .875rem; }
.cards.media { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.media-card .preview { aspect-ratio: 1; max-height: none; }
.card-title { font-weight: 600; overflow-wrap: anywhere; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; font-size: .875rem; }
.clamp { display: -webkit-box; overflow: hidden; color: var(--pampa-muted); font-size: .875rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.detail-main .preview { max-height: 70vh; }

/* ---- pages: admin ---- */
.secret { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; }
.secret code { white-space: nowrap; }
table.accounts :is(th, td) { padding-inline: .5rem; }
table.accounts .row-actions { flex-wrap: nowrap; }
.role-form { width: auto; min-width: 0; margin: 0; }
.role-form select { width: auto; min-width: 8rem; flex: 1 1 8rem; margin: 0; }
.role-form button { flex: none; padding-inline: .75rem; }
.integration { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem 1.5rem; padding: 1rem; border-bottom: 1px solid var(--pampa-border); }
.integration:last-child { border-bottom: 0; }
.integration-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.integration-head h3 { margin: 0; }
.integration form { margin: 0; }
.integration [role=group] { margin-bottom: .75rem; }
.settings { max-width: 60rem; }
.settings > section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; margin: 0; padding: 1.5rem 0; border-top: 1px solid var(--pampa-border); }
.settings > section > header h2 { margin: 0 0 .25rem; }
.settings > section > header p { margin: 0 0 .5rem; color: var(--pampa-muted); font-size: .875rem; }
.settings form, .settings .panel { margin: 0; }
.sessions { margin: 0; padding: 0; list-style: none; }
.sessions li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .75rem 0; border-bottom: 1px solid var(--pampa-border); list-style: none; }
.sessions li:first-child { padding-top: 0; }
.sessions li:last-child { padding-bottom: 0; border-bottom: 0; }
.sessions li > div { min-width: 0; overflow-wrap: anywhere; }
.sessions li > button { flex: none; white-space: nowrap; }
.sessions small { display: block; color: var(--pampa-muted); }
@media (max-width: 767px) {
  .role-form select { min-width: 0; }
}
@media (min-width: 768px) {
  .integration { grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr); }
}
@media (min-width: 1024px) {
  .settings > section { grid-template-columns: 15rem minmax(0, 1fr); }
}

/* Forced colours: keep state visible where tints and inset shadows disappear */
@media (forced-colors: active) {
  .status, .callout, .error-state, .stale, .toast, .form-error, .tags li { border: 1px solid CanvasText; }
  .nav a[aria-current=page], .subnav a[aria-current=page] { outline: 2px solid Highlight; outline-offset: -2px; }
  .skeleton-bar, .skeleton[data-shape=table] .skeleton-bar::after { forced-color-adjust: none; background: GrayText; }
  .status::before { forced-color-adjust: none; background: CanvasText; }
}

/* Reduced motion: drop entrance animations and hover transitions */
@media (prefers-reduced-motion: reduce) {
  .toast, .nav-menu-panel { animation: none; }
  .nav a, .table-wrap :is(th, td) { transition: none; }
}