/* VOOST DS 2.10.0 · copia generada por scripts/voost-import.ps1 el 2026-10-26. NO SE EDITA A MANO: se vuelve a generar.
   Lo propio de Luca va en voost-luca-bridge.css y voost-luca.css (Documentacion/Plan-Interfaz-VOOST-2026-10-26.md, §5.1). */
/* ===== part 2 · hand CSS ===== */
/* VOOST DS · components/bundle.css · loaded after tokens.css by every preview and every consumer.
   Product axis (ADR-003): set data-product on the root, consume the generic accent tokens. */
:root,[data-product="core"]{--accent:var(--accent-core-fill);--on-accent:var(--accent-core-on-fill);--accent-hover:var(--accent-core-hover);--accent-pressed:var(--accent-core-pressed);--accent-soft:var(--accent-core-soft);--on-accent-soft:var(--accent-core-on-soft);--accent-text:var(--accent-core-text);--accent-icon:var(--accent-core-icon);--accent-selected:var(--accent-core-selected)}
[data-product="multichannel"]{--accent:var(--accent-multichannel-fill);--on-accent:var(--accent-multichannel-on-fill);--accent-hover:var(--accent-multichannel-hover);--accent-pressed:var(--accent-multichannel-pressed);--accent-soft:var(--accent-multichannel-soft);--on-accent-soft:var(--accent-multichannel-on-soft);--accent-text:var(--accent-multichannel-text);--accent-icon:var(--accent-multichannel-icon);--accent-selected:var(--accent-multichannel-selected);--accent-bar-start:var(--accent-multichannel-bar-start);--accent-bar-end:var(--accent-multichannel-bar-end)}
[data-product="catalogue"]{--accent:var(--accent-catalogue-fill);--on-accent:var(--accent-catalogue-on-fill);--accent-hover:var(--accent-catalogue-hover);--accent-pressed:var(--accent-catalogue-pressed);--accent-soft:var(--accent-catalogue-soft);--on-accent-soft:var(--accent-catalogue-on-soft);--accent-text:var(--accent-catalogue-text);--accent-icon:var(--accent-catalogue-icon);--accent-selected:var(--accent-catalogue-selected);--accent-bar-start:var(--accent-catalogue-bar-start);--accent-bar-end:var(--accent-catalogue-bar-end)}
[data-product="pos"]{--accent:var(--accent-pos-fill);--on-accent:var(--accent-pos-on-fill);--accent-hover:var(--accent-pos-hover);--accent-pressed:var(--accent-pos-pressed);--accent-soft:var(--accent-pos-soft);--on-accent-soft:var(--accent-pos-on-soft);--accent-text:var(--accent-pos-text);--accent-icon:var(--accent-pos-icon);--accent-selected:var(--accent-pos-selected);--accent-bar-start:var(--accent-pos-bar-start);--accent-bar-end:var(--accent-pos-bar-end)}
/* Brand focus ring as one value (ADR-010) */
:root{--focus-brand:linear-gradient(90deg,var(--focus-brand-start),var(--focus-brand-mid),var(--focus-brand-end))}
/* Input pattern (ADR-010): shared by the Input component and any form built without the bundle */
.voost-field{font:400 14px/20px var(--font-mono);color:var(--text);background:var(--surface);height:var(--input-height);padding:0 var(--pad-r,var(--input-padding-x)) 0 var(--pad-l,var(--input-padding-x));border:var(--border-width) solid var(--text);border-radius:var(--radius-pill);width:100%;box-sizing:border-box;appearance:none;outline:0}
.voost-field::placeholder{color:var(--text-muted)}
.voost-field--textarea{border-radius:var(--radius-lg);height:auto;min-height:88px;padding:12px var(--input-padding-x);resize:vertical}
:where(.voost-field):focus-visible,.voost-field.is-focus-brand{border:var(--border-width-focus-brand) solid transparent;padding-left:calc(var(--pad-l,var(--input-padding-x)) - 2px);padding-right:calc(var(--pad-r,var(--input-padding-x)) - 2px);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--focus-brand) border-box}
:where([data-product]:not([data-product="core"])) .voost-field:focus-visible,.voost-field.is-focus-accent{border:var(--border-width-focus-accent) solid var(--accent);padding-left:var(--pad-l,var(--input-padding-x));padding-right:var(--pad-r,var(--input-padding-x));background:var(--surface)}
.voost-field.focus-brand:focus-visible{border:var(--border-width-focus-brand) solid transparent;padding-left:calc(var(--pad-l,var(--input-padding-x)) - 2px);padding-right:calc(var(--pad-r,var(--input-padding-x)) - 2px);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--focus-brand) border-box}
.voost-field.focus-accent:focus-visible{border:var(--border-width-focus-accent) solid var(--accent);padding-left:var(--pad-l,var(--input-padding-x));padding-right:var(--pad-r,var(--input-padding-x));background:var(--surface)}
.voost-field.is-error{border:var(--border-width-error) solid var(--negative-icon);padding-left:calc(var(--pad-l,var(--input-padding-x)) - 1px);padding-right:calc(var(--pad-r,var(--input-padding-x)) - 1px)}
.voost-field:disabled{border-color:var(--line);background:var(--surface-sunken);color:var(--text-subtle)}
.voost-label{font:400 12px/16px var(--font-body);color:var(--text);display:block;margin-bottom:6px}
.voost-help{font:400 12px/16px var(--font-body);color:var(--text-muted);margin-top:var(--space-1)}
.voost-help--error{color:var(--negative-text)}
/* Button (1.1.0, ADR-014) · Sora 800 14/16 · md 40 / sm 32 · pill. Product: .voost-btn (+ --outline). Corporate: .voost-cta (+ --outline).
   Focus follows the surface: product surfaces 2px accent-text ring; corporate surfaces the 3px brand gradient ring (.voost-cta). Disabled: surface-sunken / line / text-subtle. Loading: .is-loading with a 16px spinner, label kept. */
.voost-btn,.voost-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--button-height);padding:0 var(--button-padding-x);border-radius:var(--radius-pill);border:var(--border-width) solid transparent;font:800 14px/16px var(--font-display);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;text-decoration:none;box-sizing:border-box}
.voost-btn--sm,.voost-cta--sm{height:32px;padding:0 16px}
.voost-btn--icon,.voost-cta--icon{width:var(--button-height);padding:0}
.voost-btn--sm.voost-btn--icon,.voost-cta--sm.voost-cta--icon{width:32px}
.voost-btn{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.voost-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.voost-btn:active,.voost-btn.is-pressed{background:var(--accent-pressed);border-color:var(--accent-pressed)}
.voost-btn--outline{background:transparent;color:var(--accent-text);border-color:var(--accent-icon)}
.voost-btn--outline:hover{background:var(--accent-soft);color:var(--on-accent-soft)}
.voost-btn--outline:active,.voost-btn--outline.is-pressed{background:var(--accent-soft);color:var(--on-accent-soft);border-color:var(--accent-text)}
.voost-btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.voost-cta{background:var(--cta-corporate-fill);color:var(--cta-corporate-text);border-color:var(--cta-corporate-border)}
.voost-cta:hover{background:var(--cta-corporate-hover);border-color:var(--cta-corporate-hover)}
.voost-cta:active,.voost-cta.is-pressed{background:var(--cta-corporate-pressed);border-color:var(--cta-corporate-pressed)}
.voost-cta--outline{background:transparent;color:var(--cta-corporate-border)}
.voost-cta--outline:hover{background:var(--cta-corporate-outline-hover)}
.voost-cta--outline:active,.voost-cta--outline.is-pressed{background:var(--cta-corporate-outline-pressed)}
.voost-cta:focus-visible{outline:0}
.voost-cta:focus-visible::after,.voost-cta.is-focus::after{content:"";position:absolute;inset:-5px;border-radius:inherit;padding:var(--border-width-focus-brand);background:var(--focus-brand);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.voost-btn:disabled,.voost-cta:disabled,.voost-btn.is-disabled,.voost-cta.is-disabled{background:var(--surface-sunken);color:var(--text-subtle);border-color:var(--line);cursor:not-allowed}
.voost-btn.is-loading,.voost-cta.is-loading{cursor:progress}
.voost-btn .spin,.voost-cta .spin{width:16px;height:16px;animation:voost-spin .8s linear infinite}
@keyframes voost-spin{to{transform:rotate(360deg)}}
/* Select (React) brand focus: the trigger's own border becomes the 3px brand gradient, exactly like the Input (ADR-010). */
.voost-select-brand:focus-visible,.voost-select-brand[data-state="open"],.voost-select-brand.is-focus{outline:0;border:var(--border-width-focus-brand) solid transparent;padding-left:calc(var(--pad-l,var(--input-padding-x)) - 2px);padding-right:calc(var(--pad-r,var(--input-padding-x)) - 2px);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--focus-brand) border-box}
/* Native select pattern (HTML): the chevron turns and takes accent-icon while the field is focused/open */
.voost-sel{position:relative}
.voost-sel>svg{position:absolute;right:18px;top:50%;width:18px;height:18px;transform:translateY(-50%);pointer-events:none;color:var(--text);transition:transform .15s}
.voost-sel:focus-within>svg{transform:translateY(-50%) rotate(180deg);color:var(--accent-icon)}
/* Switch (1.4.1): inner shadow on the track, drop shadow on the thumb, brand gradient on corporate surfaces or variant="corporate"; disabled thumb muted */
.voost-switch{box-shadow:inset 0 1px 2px rgba(15,10,30,.14)}
[data-theme="dark"] .voost-switch{box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.voost-switch-thumb{box-shadow:0 1px 2px rgba(15,10,30,.22)}
.voost-switch[data-state="checked"].voost-switch--corporate,[data-product="core"] .voost-switch[data-state="checked"]{background:var(--focus-brand)}
.voost-switch:disabled .voost-switch-thumb{background:var(--surface-sunken);box-shadow:none;border:1px solid var(--line)}
/* No preflight in this bundle: any <button> inside a component resets the UA styles explicitly. Row hover: the lightest grey of the canvas ramp. */
@layer voost-reset{.voost-unbutton{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;line-height:inherit;text-transform:inherit;letter-spacing:inherit;text-align:inherit}}
:root{--row-hover:var(--canvas-50)}
[data-theme="dark"]{--row-hover:var(--canvas-overlay)}
/* Site header (1.7.0, as voost.marketing): floating pill bar */
.voost-sitehd{display:flex;align-items:center;gap:32px;height:72px;padding:0 24px 0 32px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-md);color:var(--text)}
[data-theme="dark"] .voost-sitehd{background:var(--surface-raised);border:1px solid var(--line)}
.voost-sitehd nav{display:flex;gap:32px;margin:0 auto;font:400 13px/16px var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.voost-sitehd nav a{color:var(--text);text-decoration:none}.voost-sitehd nav a:hover{color:var(--text-muted)}
.voost-sitehd .lang{display:inline-flex;align-items:center;gap:10px;font:400 13px/16px var(--font-mono);letter-spacing:.06em;color:var(--text-muted);margin-right:8px}
.voost-sitehd .lang b{font-weight:400;color:var(--text)}.voost-sitehd .lang i{width:1px;height:16px;background:var(--line-strong);display:inline-block}
/* Banner (1.12.0): soft = tone tint in light, canvas-raised + 1px tone border in dark; outline = 1px tone border, no ground */
.voost-banner--soft{background:var(--banner-soft);color:var(--banner-fg)}
[data-theme="dark"] .voost-banner--soft{box-shadow:inset 0 0 0 1px var(--banner-icon)}
.voost-banner--outline{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--banner-icon)}
.voost-banner--outline .voost-banner-action{color:var(--banner-text)}
/* Sidebar (1.15.0): selected bar in the product colour, left of the item; toggle hover grey */
.voost-side-item.is-active::before{content:"";position:absolute;left:-9px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--accent)}
.voost-side-toggle:hover{background:var(--accent-soft);color:var(--on-accent-soft)}
/* Dialog (1.17.0): close button grey on hover; gentle entrance */
.voost-dialog-close:hover{background:var(--accent-soft);color:var(--on-accent-soft)}
@keyframes voost-fade{from{opacity:0}to{opacity:1}}
@keyframes voost-pop{from{opacity:0;scale:.98}to{opacity:1;scale:1}}
.voost-dialog-overlay[data-state="open"]{animation:voost-fade .16s ease-out}
.voost-dialog[data-state="open"]{animation:voost-pop .18s ease-out}
@media (prefers-reduced-motion:reduce){.voost-dialog-overlay[data-state="open"],.voost-dialog[data-state="open"]{animation:none}}
/* 1.18.0 · stronger hover grey for icon buttons (canvas-100 / canvas-overlay); Toast entrance, swipe and exit (translate property, never transform) */
:root{--hover-strong:var(--accent-soft)}
[data-theme="dark"]{--hover-strong:var(--accent-soft)}
@keyframes voost-toast-in{from{opacity:0;translate:24px 0}to{opacity:1;translate:0 0}}
@keyframes voost-fade-out{from{opacity:1}to{opacity:0}}
.voost-toast[data-state="open"]{animation:voost-toast-in .2s ease-out}
.voost-toast[data-state="closed"]{animation:voost-fade-out .15s ease-in forwards}
.voost-toast[data-swipe="move"]{translate:var(--radix-toast-swipe-move-x) 0}
.voost-toast[data-swipe="cancel"]{translate:0 0;transition:translate .2s ease-out}
.voost-toast[data-swipe="end"]{animation:voost-fade-out .15s ease-in forwards}
@media (prefers-reduced-motion:reduce){.voost-toast[data-state]{animation:none}}
/* 1.20.0 · Skeleton ground */
:root{--skeleton:var(--canvas-100)}
/* 1.39.4 · dark skeleton one step above the card (it was the card's own colour, invisible on raised surfaces) */
[data-theme="dark"]{--skeleton:var(--canvas-overlay)}

/* 1.22.0 · Table header band: one continuous rounded shape behind the header row, drawn by the wrapper (per-cell backgrounds split into pills when a host wraps each cell) */
.voost-table-wrap:has(thead)::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--table-head-h,48px);border-radius:var(--radius-md);background:var(--surface-sunken);pointer-events:none}
/* 1.23.0 · Slider and Progress tracks; indeterminate sweep on the translate property */
.voost-slider-track{background:var(--canvas-200)}
.voost-progress-track{background:var(--canvas-100)}
[data-theme="dark"] .voost-slider-track,[data-theme="dark"] .voost-progress-track{background:var(--canvas-overlay)}
@keyframes voost-sweep{from{translate:-100% 0}to{translate:300% 0}}
.voost-progress-indeterminate{animation:voost-sweep 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.voost-progress-indeterminate{animation:none;width:100%;opacity:.4}}
/* 1.27.0 · chart neutrals: muted bars and segments, single-series line, area under it */
:root{--chart-muted:var(--canvas-200);--chart-line:var(--text);--chart-area:var(--canvas-100)}
[data-theme="dark"]{--chart-muted:var(--canvas-800);--chart-line:var(--text);--chart-area:var(--canvas-raised)}
/* 1.28.0 · Sheet entrance: a short slide on the translate property (never transform) */
@keyframes voost-sheet-in-r{from{opacity:0;translate:24px 0}to{opacity:1;translate:0 0}}
@keyframes voost-sheet-in-l{from{opacity:0;translate:-24px 0}to{opacity:1;translate:0 0}}
.voost-sheet[data-state="open"][data-side="right"]{animation:voost-sheet-in-r .2s ease-out}
.voost-sheet[data-state="open"][data-side="left"]{animation:voost-sheet-in-l .2s ease-out}
@media (prefers-reduced-motion:reduce){.voost-sheet[data-state="open"]{animation:none}}
/* 1.30.0 · Table rows: hover and selected as one rounded shape (radius-md, like the header band); the row's bottom line hides while it is hovered.
   Child combinators only, and one wrapper level allowed, so display:contents wrappers from a canvas never turn every cell into its own pill. */
.voost-tr td{transition:background-color .12s ease}
.voost-tr:hover td{background:linear-gradient(var(--row-hover),var(--row-hover)) 0 50%/8px calc(100% - 4px) repeat-x;border-bottom-color:transparent}
/* 1.39.3 · the highlight sits 2px in from the row's top and bottom (Cris), so consecutive selected rows read as separate pills, like the 4px under the header band */
.voost-tr[data-state="selected"] td{background:linear-gradient(var(--accent-selected),var(--accent-selected)) 0 50%/8px calc(100% - 4px) repeat-x;border-bottom-color:transparent}
.voost-tr:hover>td:first-child,.voost-tr:hover>:first-child>td,.voost-tr[data-state="selected"]>td:first-child,.voost-tr[data-state="selected"]>:first-child>td{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}
.voost-tr:hover>td:last-child,.voost-tr:hover>:last-child>td,.voost-tr[data-state="selected"]>td:last-child,.voost-tr[data-state="selected"]>:last-child>td{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}
/* 1.30.1 · 4px between the header band and the first row, so a hovered first row never touches the band: the header cells grow 4px at the
   bottom while the band (--table-head-h) keeps its height, and the labels stay centred in the band. */
.voost-table-wrap thead th{height:calc(var(--table-head-h,48px) + 4px);padding-bottom:4px}
/* 1.32.0 · Field sizes L (48, default) · M (40) · S (32). Per field with data-size, or for a whole product with data-field-size on a container
   (HTML consumers; React uses FieldSizeProvider). */
.voost-field[data-size="m"],[data-field-size="m"] .voost-field:not([data-size]){--input-height:40px;--input-padding-x:16px}
.voost-field[data-size="s"],.voost-field[data-size="xs"],[data-field-size="s"] .voost-field:not([data-size]){--input-height:32px;--input-padding-x:14px;font-size:13px;line-height:16px}
/* 1.35.0 · Brand details in product (Cris): the VOOST gradient (violet-800 → blue-bridge → mint-300) in four small moments, never gradient on gradient.
   A · the floating Sidebar, while expanded, draws its outline in the gradient, horizontal (violet on the right), no shadow; collapsed it goes back to line.
   B · a soft brand glow rises from the base of the expanded Sidebar, behind the user.
   E · the signed-in user's avatar in the Sidebar wears a 3px gradient ring, no grey line.
   G · Progress (determinate and indeterminate, tone accent) fills with the gradient. */
:root{--brand-gradient:linear-gradient(90deg,var(--focus-brand-start),var(--focus-brand-mid),var(--focus-brand-end));--brand-gradient-rtl:linear-gradient(270deg,var(--focus-brand-start),var(--focus-brand-mid),var(--focus-brand-end))}
.voost-sidebar[data-variant="floating"][data-state="expanded"].border{border-color:transparent;background:linear-gradient(var(--surface-raised),var(--surface-raised)) padding-box,var(--brand-gradient-rtl) border-box}
.voost-sidebar{position:relative}
.voost-sidebar[data-state="expanded"]::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-80px;height:150px;background:var(--brand-gradient);filter:blur(36px);opacity:.16;pointer-events:none;z-index:0}
.voost-sidebar>*{position:relative;z-index:1}
.voost-side-user .voost-avatar{border:3px solid transparent;background:linear-gradient(var(--surface-sunken),var(--surface-sunken)) padding-box,var(--brand-gradient) border-box}
.voost-progress-brand{background:var(--brand-gradient)}
@media (prefers-reduced-motion:reduce){.voost-sidebar[data-state="expanded"]::after{display:none}}
/* 1.39.1 · Field label above, only when it is needed (Cris): at rest a field takes no extra room — rows sit 16px apart box to box.
   When the field is focused, open, or holds a value, 22px open above it (20 in S) and the label appears there: accent-text while focused
   or open, text-muted while it only holds a value. The room opens with a short transition; Combobox and DatePicker open on pointer down so
   the move never cancels a click. Aligned with the text inside (20 / 16 / 14px by size).
   HTML: <div class="voost-float"><input class="voost-field" placeholder="Nombre*"><label class="voost-float-label">Nombre</label></div> */
.voost-float{position:relative;display:flex;flex-direction:column;padding-top:0;transition:padding-top .15s ease}
.voost-float:focus-within,.voost-float:has([data-voost-trigger][data-state=open]),.voost-float:has(input:not([type=file]):not([type=hidden]):not(:placeholder-shown)),.voost-float:has(textarea:not(:placeholder-shown)),.voost-float:has([data-voost-trigger]:not([data-placeholder]):not([data-empty])){padding-top:22px}
.voost-float[data-size="s"]:is(:focus-within,:has([data-voost-trigger][data-state=open]),:has(input:not([type=file]):not([type=hidden]):not(:placeholder-shown)),:has(textarea:not(:placeholder-shown)),:has([data-voost-trigger]:not([data-placeholder]):not([data-empty]))){padding-top:20px}
.voost-float-label{position:absolute;left:20px;top:0;z-index:2;padding:0;font:400 12px/16px var(--font-body);color:var(--text-muted);opacity:0;translate:0 4px;transition:opacity .15s ease,translate .15s ease,color .15s ease;pointer-events:none;white-space:nowrap;max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis}
.voost-float[data-size="m"] .voost-float-label{left:16px}
.voost-float[data-size="s"] .voost-float-label{left:14px;font-size:11px}
.voost-float:focus-within .voost-float-label,.voost-float:has([data-voost-trigger][data-state=open]) .voost-float-label{opacity:1;translate:0 0;color:var(--accent-text)}
.voost-float:has(input:not([type=file]):not([type=hidden]):not(:placeholder-shown)) .voost-float-label,.voost-float:has(textarea:not(:placeholder-shown)) .voost-float-label,.voost-float:has([data-voost-trigger]:not([data-placeholder]):not([data-empty])) .voost-float-label{opacity:1;translate:0 0}
.voost-float .voost-float-label[data-error]{color:var(--negative-text)}
.voost-float:has(:disabled) .voost-float-label{color:var(--text-subtle)}
@media (prefers-reduced-motion:reduce){.voost-float,.voost-float-label{transition:none;translate:0 0}}
/* 1.39.2 · Required fields carry the asterisk in the label too: from Field required, a required/aria-required control, or a placeholder
   ending in "*" (the system's convention). */
.voost-float:is([data-required],:has(input[placeholder$="*"]),:has(textarea[placeholder$="*"]),:has([data-required]),:has([aria-required="true"]),:has(input[required])) .voost-float-label::after{content:"*"}
/* 1.41.3 · Product pill (Sidebar under the logo, header pill), per theme (Cris): light — the product colour, solid, as always;
   dark — a soft fill in the product tint with an outline. */
/* Set on the element itself: a custom property that points at --accent, declared on :root, would freeze :root's product. */
.voost-product-pill{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
[data-theme="dark"] .voost-product-pill,.voost-product-pill[data-theme="dark"]{background:var(--accent-soft);color:var(--on-accent-soft);border-color:var(--accent-icon)}
/* 2.2.1 · A text field narrower than its placeholder or value cuts it with an ellipsis instead of clipping it mid-letter (Cris). */
.voost-field{text-overflow:ellipsis}
.voost-field::placeholder{text-overflow:ellipsis}
/* 2.5.0 · App shell, "content floats" (ADR-018, Cris 2026-10-08). Under the global app header the ground is surface-sunken; the Sidebar
   (and an editor's side panels) sit flat on it; the page lives in one panel: surface, radius-xl, 8px from the ground's edges, flush with
   the rail. Light: shadow-md. Dark: no shadow (tokens resolve to none), 1px line. Floating and docked on their own are retired.
   Markup: .voost-shell > [global app header] + .voost-shell-body > VoostDS.Sidebar (variant="docked") + optional .voost-shell-side + .voost-shell-panel */
.voost-shell{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--surface-sunken);color:var(--text)}
.voost-shell > *{flex:none}
.voost-shell-toolbar{height:56px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px 0 20px;background:var(--surface);border-bottom:1px solid var(--line);color:var(--text)}
.voost-shell-body{position:relative;flex:1 1 auto!important;display:flex;min-height:0;overflow:hidden;background:var(--surface-sunken);
  --shell-rail-w:240px;--shell-side-w:0px;--row-hover:var(--surface)}
[data-theme="dark"] .voost-shell-body,.voost-shell-body[data-theme="dark"]{--row-hover:var(--canvas-overlay)}
.voost-shell-body:has(> .voost-sidebar[data-state="collapsed"]){--shell-rail-w:72px}
.voost-shell-body:has(> .voost-shell-side:not(.voost-shell-side--end)){--shell-side-w:260px}
.voost-shell-body > .voost-sidebar{position:relative;z-index:1;margin:0;height:100%;border-radius:0;background:transparent;border-color:transparent}
.voost-shell-body > .voost-sidebar::after{display:none}
.voost-shell-side{position:relative;z-index:1;flex:0 0 260px;width:260px;min-height:0;display:flex;flex-direction:column;margin:8px 8px 8px 0;background:transparent}
.voost-shell-side--end{flex-basis:340px;width:340px}
.voost-shell-panel{position:relative;z-index:1;flex:1;min-width:0;min-height:0;overflow:auto;margin:8px 8px 8px 0;background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);--row-hover:var(--canvas-50)}
[data-theme="dark"] .voost-shell-panel,.voost-shell-panel[data-theme="dark"]{border:1px solid var(--line);--row-hover:var(--canvas-overlay)}
/* The brand glow (1.35.0) moves from the Sidebar to the ground, under the menu's base, so the rail's box no longer cuts it: the brand gradient
   across the menu ±10% (rail, plus a side panel when one is open), then its mint end fades to transparent over 160px under the panel.
   Expanded and collapsed. Base at -140px (the Sidebar's own glow sat at -80px): on canvas-50 the footer's text-muted keeps 4.53:1 at the
   glow's violet end (4.13:1 at -80px). Registered exception to "no tinted page ground" (README, 50-accessibility.md). No mask: it would clip the blur. */
.voost-shell-body::before{content:"";position:absolute;z-index:0;pointer-events:none;bottom:-140px;height:150px;filter:blur(36px);opacity:.16;
  --shell-menu-w:calc(var(--shell-rail-w) + var(--shell-side-w));
  left:calc(var(--shell-menu-w) * -0.1);width:calc(var(--shell-menu-w) * 1.2 + 160px);
  background:linear-gradient(90deg,var(--focus-brand-start) 0,var(--focus-brand-mid) calc(var(--shell-menu-w) * 0.6),var(--focus-brand-end) calc(var(--shell-menu-w) * 1.2),transparent 100%)}
@media (prefers-reduced-motion:reduce){.voost-shell-body::before{display:none}}
/* Rows on the ground (side panels, lists outside the panel): hover on row-hover (white in light); selected like navigation — the same
   ground, semibold, a 3px product bar 7px left of the row, outside it, as in the Sidebar (2.6.1: an inset bar bent with the row's radius).
   The list needs at least 8px of left padding so the bar is not clipped. accent-selected is never used on the ground (violet-50 on canvas-50: 1.00:1). */
.voost-shell-side :is(.is-selected,[aria-selected="true"],[aria-current]):not(.voost-sidebar *){position:relative;background:var(--row-hover);font-weight:600}
.voost-shell-side :is(.is-selected,[aria-selected="true"],[aria-current]):not(.voost-sidebar *)::before{content:"";position:absolute;left:-7px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--accent)}
/* 2.6.0 · Global app header (ADR-017) as a component: VoostDS.AppHeader renders this markup; HTML consumers can write it by hand.
   <header class="voost-apphd"> wordmark · .voost-apphd-product (header pill + chevron, or .is-static) · .voost-apphd-search · IconButtons ·
   .voost-apphd-sep · .voost-apphd-logo (img or node; white pill in dark) or .voost-apphd-client (name in text) */
.voost-apphd{position:relative;z-index:2;height:64px;box-sizing:border-box;display:flex;align-items:center;gap:16px;padding:0 24px;background:var(--surface-raised);border-bottom:1px solid var(--line);color:var(--text)}
.voost-apphd-product{display:inline-flex;align-items:center;gap:6px;flex:none;height:32px;box-sizing:border-box;padding:0 10px 0 12px;border-width:1px;border-style:solid;border-radius:var(--radius-pill);font:400 12px/16px var(--font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.voost-apphd-product.is-static{padding:0 12px;cursor:default}
.voost-apphd-product svg{width:16px;height:16px;flex:none}
.voost-apphd-product:not(.is-static):hover{background:var(--accent-hover);border-color:var(--accent-hover)}
[data-theme="dark"] .voost-apphd-product:not(.is-static):hover{background:var(--accent-soft);border-color:var(--accent-icon)}
.voost-apphd-search{display:flex;align-items:center;gap:10px;width:360px;max-width:40vw;height:40px;box-sizing:border-box;padding:0 8px 0 16px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--text-muted);font:400 14px/20px var(--font-mono);text-align:left;cursor:pointer}
.voost-apphd-search svg{width:18px;height:18px;flex:none}
.voost-apphd-search > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voost-apphd-product:focus-visible,.voost-apphd-search:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.voost-apphd-spacer{flex:1}
.voost-apphd-sep{width:1px;height:24px;background:var(--line);margin:0 8px;flex:none}
.voost-apphd-logo{display:inline-flex;align-items:center;flex:none;height:32px;max-width:160px}
.voost-apphd-logo img,.voost-apphd-logo svg{display:block;height:32px;width:auto;max-width:160px;object-fit:contain}
[data-theme="dark"] .voost-apphd-logo{height:40px;padding:0 12px;border-radius:var(--radius-pill);background:var(--white)}
.voost-apphd-client{flex:none;font:600 14px/20px var(--font-body);color:var(--text);white-space:nowrap}
.voost-apphd-item{display:flex;align-items:center;gap:10px;width:100%}
.voost-apphd-item-label{flex:1}
.voost-apphd-item-icon{display:inline-flex;color:var(--text-muted)}
.voost-apphd-item-check{display:inline-flex;color:var(--accent-icon)}

/* 2.7.0 · Eroski pilot components and variants (ADR-019), brand focus ring (ADR-010 amended), touch density (ADR-014 amended),
   AppHeader external (ADR-017 amended). Unlayered, so it wins over the bundle's utilities. To be ported to ui/src/voost.css. */

/* Focus ring in the product colour, every component (ADR-010, 2.7.0). Inputs keep their 1px border in --accent. */
.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--accent)}
.voost-btn:focus-visible,.voost-apphd-product:focus-visible,.voost-apphd-search:focus-visible{outline-color:var(--accent)}

/* Visually hidden text */
.voost-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.voost-spin{animation:voost-spin 1s linear infinite}
@keyframes voost-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.voost-spin{animation:none}}

/* Touch density (ADR-014, 2.7.0): a 44px hit area, never a third visible size. Set data-density="touch" on a container. */
[data-density="touch"] .voost-hit,[data-density="touch"] button[role="checkbox"],[data-density="touch"] button[role="radio"]{position:relative}
[data-density="touch"] .voost-hit::after,[data-density="touch"] button[role="checkbox"]::after,[data-density="touch"] button[role="radio"]::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%);border-radius:inherit}

/* Button · destructive: the outline shape in negative-* */
.voost-btn-destructive:not(:disabled){background:transparent;color:var(--negative-text);border-color:var(--negative-icon)}
.voost-btn-destructive:not(:disabled):hover{background:var(--negative-soft);color:var(--negative-on-soft);border-color:var(--negative-icon)}
.voost-btn-destructive:not(:disabled):active{background:var(--negative-soft);color:var(--negative-on-soft);border-color:var(--negative-text)}

/* IconButton · badge */
.voost-ib-badge-wrap{position:relative;display:inline-flex;flex:none}
.voost-ib-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:400 11px/16px var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 0 0 2px var(--badge-ring,var(--surface-raised));pointer-events:none}
.voost-ib-badge.is-wide{right:-12px}
.voost-ib-badge.is-neutral{background:var(--info-soft);color:var(--info-on-soft);border:1px solid var(--line)}

/* Card · interactive */
.voost-card--interactive{position:relative;overflow:hidden;transition:border-color .15s}
.voost-card--interactive:hover{border-color:var(--accent)}
.voost-card--interactive:has(.voost-card-link:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.voost-card--interactive.is-selected{border-color:var(--accent-icon);background:var(--accent-selected)}
.voost-card--interactive.is-muted{background:var(--surface-sunken);box-shadow:none}
.voost-card--interactive.is-muted:hover{border-color:var(--line-strong)}
.voost-card-link{color:inherit;text-decoration:none;text-align:left;outline:none}
.voost-card-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.voost-card--interactive :is(button,a,input,select,textarea,label):not(.voost-card-link){position:relative;z-index:1}
.voost-card-end{margin-top:auto;align-self:flex-start}
.voost-card-media{margin:-24px -24px 0;height:var(--card-media-h,132px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;background:var(--surface-sunken);color:var(--text-subtle);border-bottom:1px solid var(--line)}
.voost-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.voost-card-media-ph{font:400 12px/16px var(--font-body);letter-spacing:.01em;color:var(--text-muted)}
.voost-card-tile{flex-direction:row;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:8px 16px;min-height:72px;padding:16px}
.voost-card-tile-ic{display:inline-flex;flex:none;width:40px;height:40px;box-sizing:border-box;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--text-muted)}
.voost-card-tile-ic svg{width:20px;height:20px}
.voost-card--interactive:hover .voost-card-tile-ic{border-color:var(--accent-icon)}
.voost-card-tile-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.voost-card-tile-t{font:600 20px/28px var(--font-display);letter-spacing:-.005em;color:var(--text)}
.voost-card-tile-m{font:400 12px/16px var(--font-body);letter-spacing:.01em;color:var(--text-muted)}
.voost-card-tile-go{display:inline-flex;flex:none;margin-top:4px;color:var(--accent-text)}
.voost-card-tile-tags{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;padding-left:56px}

/* RadioGroupItem · card */
.voost-radio-card{display:flex;align-items:flex-start;gap:12px;padding:16px;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--text);font-family:var(--font-body);cursor:pointer}
.voost-radio-card:hover{background:var(--row-hover)}
.voost-radio-card:has(button[data-state="checked"]){border-color:var(--accent-icon);background:var(--accent-selected)}
.voost-radio-card:has(button:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.voost-radio-card button[role="radio"]:focus-visible{box-shadow:none}
.voost-radio-card.is-disabled{background:var(--surface-sunken);cursor:not-allowed}
.voost-radio-card-dot{display:flex;flex:none;height:24px;align-items:center}
.voost-radio-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.voost-radio-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
.voost-radio-card-label{font:600 14px/20px var(--font-body);color:var(--text)}
.voost-radio-card.is-disabled .voost-radio-card-label{color:var(--text-muted)}
.voost-radio-card-desc{font:400 14px/20px var(--font-body);color:var(--text-muted)}
.voost-radio-card-reason{display:flex;align-items:center;gap:8px;font:400 14px/20px var(--font-body);color:var(--negative-text)}
.voost-radio-card-reason.is-warning{color:var(--warning-text)}
.voost-radio-card-reason svg{flex:none}

/* TableCell · secondary: 56px rows (48 in compact) for the whole table */
table:has(td.voost-cell--secondary) td{height:56px}
table.voost-table--compact:has(td.voost-cell--secondary) td{height:48px}
.voost-cell2{display:flex;flex-direction:column;gap:2px;min-width:0}
.voost-cell2 > span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voost-cell2-s{font:400 12px/16px var(--font-body);letter-spacing:.01em;color:var(--text-muted)}
.voost-cell2-s.is-mono{font-family:var(--font-mono);letter-spacing:0}

/* Checklist */
.voost-checklist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);font-family:var(--font-body)}
.voost-checklist > li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:8px 12px;font-size:14px;line-height:20px}
.voost-checklist > li + li{border-top:1px solid var(--line)}
.voost-checklist.is-bare{border:0;border-radius:0}
.voost-checklist.is-bare > li{padding:4px 0}
.voost-checklist.is-bare > li + li{border-top:0}
.voost-checklist.is-sm > li{grid-template-columns:16px minmax(0,1fr) auto;gap:8px;padding:2px 0;font-size:13px}
.voost-checklist-ic{display:inline-flex}
.voost-checklist-v{color:var(--text-muted);text-align:right}
.voost-checklist > li.is-ok .voost-checklist-ic{color:var(--positive-icon)}
.voost-checklist > li.is-warning .voost-checklist-ic{color:var(--warning-icon)}
.voost-checklist > li.is-warning .voost-checklist-v{color:var(--warning-text)}
.voost-checklist > li.is-error .voost-checklist-ic{color:var(--negative-icon)}
.voost-checklist > li.is-error .voost-checklist-v{color:var(--negative-text)}
.voost-checklist > li.is-pending,.voost-checklist > li.is-pending .voost-checklist-ic{color:var(--text-muted)}
.voost-checklist-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font:400 12px/16px var(--font-body);letter-spacing:.01em;color:var(--text-muted)}

/* List + ListItem */
.voost-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.voost-list > li{list-style:none}
.voost-li{display:flex;align-items:center;gap:16px;width:100%;box-sizing:border-box;padding:12px;border:0;border-radius:var(--radius-md);background:none;text-align:left;color:var(--text);font-family:var(--font-body);text-decoration:none}
a.voost-li,button.voost-li{cursor:pointer}
a.voost-li:hover,button.voost-li:not([aria-disabled="true"]):hover{background:var(--row-hover)}
.voost-li:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.voost-li[aria-disabled="true"]{cursor:default}
.voost-li.is-sm{gap:12px;padding:8px;align-items:flex-start}
.voost-li-ic{display:inline-flex;flex:none;width:40px;height:40px;box-sizing:border-box;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--text-muted)}
.voost-li-ic svg{width:20px;height:20px}
.voost-li.is-sm .voost-li-ic{width:32px;height:32px}
.voost-li.is-sm .voost-li-ic svg{width:16px;height:16px}
.voost-li-ic.is-warning{border-color:var(--warning-icon);color:var(--warning-icon)}
.voost-li-th{display:inline-flex;flex:none;width:64px;height:48px;box-sizing:border-box;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--text-subtle)}
.voost-li-th img{display:block;width:100%;height:100%;object-fit:cover}
.voost-li-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.voost-li-t{font:500 14px/20px var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voost-li.is-unread .voost-li-t{font-weight:600}
.voost-li[aria-disabled="true"] .voost-li-t{color:var(--text-muted)}
.voost-li-s{font:400 12px/16px var(--font-body);letter-spacing:.01em;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voost-li-d{font:400 11px/16px var(--font-mono);color:var(--text-muted)}
.voost-li-end{display:inline-flex;flex:none;align-items:center;gap:8px}
.voost-li-go{display:inline-flex;flex:none;color:var(--accent-text)}
.voost-li-dot{flex:none;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--accent-icon)}
.voost-li.is-sm .voost-li-dot{margin-top:6px}

/* SelectionBar */
.voost-selbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;box-sizing:border-box;padding:12px 16px 12px 24px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-lg);color:var(--text);font-family:var(--font-body)}
.voost-selbar.is-sticky{position:sticky;bottom:8px;z-index:5}
.voost-selbar-tx{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.voost-selbar-t{font:800 16px/24px var(--font-display);letter-spacing:-.005em}
.voost-selbar-s{font:400 12px/16px var(--font-body);letter-spacing:.01em;color:var(--text-muted)}
.voost-selbar-opt{display:inline-flex;align-items:center;gap:8px;font:400 12px/16px var(--font-body);color:var(--text-muted)}
.voost-selbar-opt label{cursor:pointer}
.voost-selbar-a{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px 12px}
.voost-selbar-clear{font:600 14px/20px var(--font-body);color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;border-radius:var(--radius-sm);cursor:pointer}
.voost-selbar-clear:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.voost-selbar.is-compact{flex-wrap:nowrap;padding-top:8px;padding-bottom:8px}
.voost-selbar.is-compact .voost-selbar-tx{flex:1}
.voost-selbar.is-compact .voost-selbar-a{flex-wrap:nowrap}
.voost-selbar.is-inline{gap:8px;padding:8px 8px 8px 16px;border:0;border-radius:var(--radius-lg);background:var(--surface-sunken);box-shadow:none}
.voost-selbar.is-inline .voost-selbar-tx{flex:1}
.voost-selbar.is-inline .voost-selbar-t{font:500 14px/20px var(--font-body);letter-spacing:0}

/* TagInput */
.voost-taginput{display:flex;flex-direction:column;gap:8px}

/* FileList (rewritten with the same anatomy) */
.voost-filelist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;font-family:var(--font-body)}
.voost-file{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.voost-file:last-child{border-bottom:0}
.voost-file.is-open{align-items:flex-start}
.voost-file-ic{display:inline-flex;flex:none;width:32px;height:32px;box-sizing:content-box;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--text-muted)}
.voost-file-ic.is-error{color:var(--negative-icon)}
.voost-file-ic.is-warning{color:var(--warning-icon)}
.voost-file-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.voost-file.is-open .voost-file-b{padding-top:6px}
.voost-file-h{display:flex;min-width:0;align-items:baseline;gap:8px}
.voost-file-n{font-size:14px;line-height:20px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voost-file-sz{flex:none;font:400 12px/16px var(--font-mono);color:var(--text-muted)}
.voost-file-err{font-size:13px;line-height:20px;color:var(--negative-text)}
.voost-file-st{flex:none;font:400 12px/16px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap}
.voost-file-st:empty{display:none}
.voost-file.is-open .voost-file-st{padding-top:8px}
.voost-file-st.is-warning{color:var(--warning-text)}
.voost-file-toggle{align-self:flex-start;font:600 13px/20px var(--font-body);color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;border-radius:var(--radius-sm);cursor:pointer}
.voost-file-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.voost-file-x{display:inline-flex;flex:none;width:32px;height:32px;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer}
.voost-file-x:hover{background:var(--hover-strong);color:var(--on-accent-soft)}
.voost-file-x:focus-visible{outline:2px solid var(--accent);outline-offset:0}

/* AppHeader · external */
.voost-apphd-user{display:flex;flex-direction:column;align-items:flex-end;flex:none;min-width:0}
.voost-apphd-user b{font:600 14px/20px var(--font-body);color:var(--text)}
.voost-apphd-user span{font:400 12px/16px var(--font-body);letter-spacing:.01em;color:var(--text-muted)}

/* 2.10.0 · AppFooter (Cris): the foot of a product page, last child of the app shell's panel, on the panel's own ground (surface).
   No top line. full: wordmark 36 with email, phone and LinkedIn under it on the left; the offices side by side on the right;
   legal links centred under a 1px line. minimal: "Powered by" (caption, text-muted) over the wordmark 24, centred.
   Text in `code` (JetBrains Mono 14/20); lines of a block 4px apart (a 24px rhythm). Gutters 32px, as the page inside the panel.
   Put it after the page's content in a column that fills the panel (min-height:100%) and it sits at the bottom: margin-top:auto. */
.voost-appfoot{box-sizing:border-box;margin-top:auto;padding:24px 32px 32px;background:var(--surface);color:var(--text);font:400 14px/20px var(--font-mono)}
.voost-appfoot--full{display:grid;gap:32px}
.voost-appfoot-cols{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.voost-appfoot-brand{display:grid;gap:16px;justify-items:start}
.voost-appfoot-contact,.voost-appfoot address{display:grid;gap:4px;justify-items:start;font-style:normal}
.voost-appfoot-social{margin-top:8px}
.voost-appfoot-social svg,.voost-appfoot-social img{display:block;width:22px;height:22px}
.voost-appfoot-offices{display:flex;gap:48px;align-items:flex-start}
.voost-appfoot a{color:var(--text);text-decoration:none;border-radius:4px}
.voost-appfoot a:hover{text-decoration:underline;text-underline-offset:3px}
.voost-appfoot a.voost-appfoot-social:hover{color:var(--accent-text)}
.voost-appfoot a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.voost-appfoot-legal{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;padding-top:24px;border-top:1px solid var(--line)}
.voost-appfoot--minimal{display:flex;flex-direction:column;align-items:center;gap:8px}
.voost-appfoot-powered{font:400 12px/16px var(--font-body);letter-spacing:.01em;color:var(--text-muted)}
@media (max-width:800px){.voost-appfoot-offices{gap:24px}}
@media (max-width:560px){.voost-appfoot{padding:24px 16px 32px}.voost-appfoot-offices{flex-direction:column;gap:16px}}