/* CoopMate design system — componenti (RD-1). Prefisso ui-, nessun colore letterale (solo var(--ui-*)), un <link> per file.
   Indice: icon · btn · card · field · check/switch · tag/chip · alert · badge · avatar · empty · pagination · tabs · dialog · toast
           · skeleton · stat · progress · table · header/nav/bottom-bar · brand · shell (notice, menu, theme switch, footer, flash).
   Movimento: solo transizioni brevi su colore/ombra/transform (mai sulle dimensioni); base.css le azzera con prefers-reduced-motion. */

/* ---------- icon: <svg class="ui-icon"><use href="sprite.svg#i-nome"/></svg> ---------- */
.ui-icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ui-icon--sm {
    width: 1em;
    height: 1em;
}

.ui-icon--lg {
    width: 1.75em;
    height: 1.75em;
}

/* ---------- btn ---------- */
.ui-btn {
    --_bg: var(--ui-primary);
    --_bg-hover: var(--ui-primary-hover);
    --_ink: var(--ui-primary-ink);
    --_bd: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: 48px;
    padding: var(--ui-space-2) var(--ui-space-5);
    border: 2px solid var(--_bd);
    border-radius: var(--ui-radius-pill);
    background: var(--_bg);
    color: var(--_ink);
    font-size: var(--ui-text-base);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ui-dur-fast) var(--ui-ease), border-color var(--ui-dur-fast) var(--ui-ease),
        box-shadow var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease);
}

.ui-btn:hover {
    background: var(--_bg-hover);
    color: var(--_ink);
    text-decoration: none;
}

.ui-btn:active {
    transform: translateY(1px);
}

.ui-btn--primary {
    box-shadow: var(--ui-shadow-1);
}

.ui-btn--primary:hover {
    box-shadow: var(--ui-shadow-2);
}

.ui-btn--secondary {
    --_bg: var(--ui-secondary);
    --_bg-hover: var(--ui-secondary-hover);
    --_ink: var(--ui-secondary-ink);
}

.ui-btn--quiet {
    --_bg: transparent;
    --_bg-hover: var(--ui-surface-sunken);
    --_ink: var(--ui-ink);
}

.ui-btn--ghost {
    --_bg: transparent;
    --_bg-hover: var(--ui-surface-sunken);
    --_ink: var(--ui-ink);
    --_bd: var(--ui-border-strong);
}

.ui-btn--danger {
    --_bg: transparent;
    --_bg-hover: var(--ui-danger-bg);
    --_ink: var(--ui-danger-ink);
    --_bd: var(--ui-danger-solid);
}

.ui-btn--sm {
    min-height: var(--ui-tap);
    padding-inline: var(--ui-space-4);
    font-size: var(--ui-text-sm);
}

.ui-btn--lg {
    min-height: 56px;
    padding-inline: var(--ui-space-6);
    font-size: var(--ui-text-lg);
}

.ui-btn--block {
    display: flex;
    width: 100%;
}

.ui-btn--icon {
    width: 48px;
    padding: 0;
}

.ui-btn--icon.ui-btn--sm {
    width: var(--ui-tap);
}

.ui-btn--icon.ui-btn--lg {
    width: 56px;
}

.ui-btn[aria-pressed="true"],
.ui-btn[aria-current="true"] {
    --_bg: var(--ui-surface-inverse);
    --_bg-hover: var(--ui-surface-inverse);
    --_ink: var(--ui-ink-inverse);
}

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
    --_bg: var(--ui-disabled-bg);
    --_bg-hover: var(--ui-disabled-bg);
    --_ink: var(--ui-disabled-ink);
    --_bd: transparent;
    box-shadow: none;
    transform: none;
}

/* In corso: il testo resta (la larghezza non cambia) ma si nasconde sotto lo spinner. Anche mentre Turbo invia il form (aria-busy sul <form>). */
.ui-btn[aria-busy="true"],
form[aria-busy="true"] .ui-btn[type="submit"] {
    color: transparent;
    pointer-events: none;
}

.ui-btn[aria-busy="true"]::after,
form[aria-busy="true"] .ui-btn[type="submit"]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: auto;
    border: 3px solid var(--_ink);
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin .7s linear infinite;
}

@keyframes ui-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- card ---------- */
.ui-card {
    position: relative;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-1);
}

.ui-card > :first-child {
    margin-top: 0;
}

.ui-card > :last-child {
    margin-bottom: 0;
}

.ui-card__media {
    margin: calc(var(--ui-space-4) * -1) calc(var(--ui-space-4) * -1) var(--ui-space-4);
    overflow: hidden;
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
    background: var(--ui-surface-sunken);
}

.ui-card__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ui-card__title {
    margin-bottom: var(--ui-space-2);
    font-size: var(--ui-text-lg);
    line-height: var(--ui-leading-snug);
}

.ui-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3);
    margin-top: var(--ui-space-4);
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
}

/* Interattiva: l'intera card è cliccabile tramite il link del titolo (.ui-card__link). */
.ui-card--interactive {
    transition: transform var(--ui-dur-base) var(--ui-ease), box-shadow var(--ui-dur-base) var(--ui-ease),
        border-color var(--ui-dur-base) var(--ui-ease);
}

.ui-card--interactive:hover,
.ui-card--interactive:focus-within {
    transform: translateY(-2px);
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-2);
}

.ui-card__link {
    color: inherit;
    text-decoration: none;
}

.ui-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.ui-card__link:focus-visible {
    outline: none;
}

.ui-card__link:focus-visible::after {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}

.ui-card--flat {
    box-shadow: none;
}

/* Card dentro una card: più incassata, mai più ombra. */
.ui-card--nested {
    border-color: transparent;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-sunken);
    box-shadow: none;
}

@media (min-width: 640px) {
    .ui-card {
        padding: var(--ui-space-5);
    }

    .ui-card__media {
        margin: calc(var(--ui-space-5) * -1) calc(var(--ui-space-5) * -1) var(--ui-space-4);
    }
}

/* ---------- field: etichetta, aiuto, errore, controlli ---------- */
.ui-field {
    display: grid;
    gap: var(--ui-space-2);
    min-width: 0;
}

.ui-field__label,
.ui-fieldset > legend {
    padding: 0;
    font-weight: 700;
}

.ui-field__required {
    color: var(--ui-primary-text);
}

.ui-field__hint {
    margin: 0;
    color: var(--ui-ink-muted);
    font-size: var(--ui-text-sm);
}

.ui-check + .ui-field__hint,
.ui-check + .ui-field__error {
    padding-inline-start: 2.25rem;
}

.ui-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-2);
    margin: 0;
    color: var(--ui-danger-ink);
    font-size: var(--ui-text-sm);
    font-weight: 700;
}

.ui-field__error .ui-icon {
    margin-top: .1em;
}

.ui-fieldset {
    display: grid;
    gap: var(--ui-space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ui-input,
.ui-textarea,
.ui-select {
    display: block;
    width: 100%;
    min-height: var(--ui-tap);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 2px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    color: var(--ui-ink);
    font-size: var(--ui-text-base);
    line-height: 1.4;
    transition: border-color var(--ui-dur-fast) var(--ui-ease), box-shadow var(--ui-dur-fast) var(--ui-ease);
}

.ui-textarea {
    min-height: 7rem;
    resize: vertical;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
    color: var(--ui-ink-muted);
    opacity: 1;
}

.ui-input:hover,
.ui-textarea:hover,
.ui-select:hover {
    border-color: var(--ui-ink-muted);
}

.ui-input:focus,
.ui-textarea:focus,
.ui-select:focus {
    border-color: var(--ui-focus);
}

.ui-input[aria-invalid="true"],
.ui-textarea[aria-invalid="true"],
.ui-select[aria-invalid="true"] {
    border-color: var(--ui-danger-solid);
    background: var(--ui-danger-bg);
}

.ui-input:disabled,
.ui-textarea:disabled,
.ui-select:disabled {
    border-color: transparent;
    background: var(--ui-disabled-bg);
    color: var(--ui-disabled-ink);
}

.ui-select-wrap {
    position: relative;
}

.ui-select {
    padding-right: var(--ui-space-7);
    appearance: none;
    cursor: pointer;
}

.ui-select-wrap::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--ui-space-4);
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--ui-ink-muted);
    border-bottom: 2px solid var(--ui-ink-muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* ---------- check / radio / switch: l'intera etichetta è l'area di tocco (>= 44 px) ---------- */
.ui-check {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    min-height: var(--ui-tap);
    padding-block: var(--ui-space-2);
    cursor: pointer;
}

.ui-check__input,
.ui-switch__input {
    flex: none;
    margin: 0;
    appearance: none;
    border: 2px solid var(--ui-border-strong);
    background: var(--ui-surface-raised);
    transition: background-color var(--ui-dur-fast) var(--ui-ease), border-color var(--ui-dur-fast) var(--ui-ease);
    cursor: pointer;
}

.ui-check__input {
    display: grid;
    place-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .1rem;
    border-radius: var(--ui-radius-xs);
}

.ui-check__input[type="radio"] {
    border-radius: 50%;
}

.ui-check__input::before {
    content: "";
    width: .8rem;
    height: .8rem;
    background: var(--ui-primary-ink);
    clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 85% 7%, 40% 68%);
    transform: scale(0);
    transition: transform var(--ui-dur-fast) var(--ui-ease-spring);
}

.ui-check__input[type="radio"]::before {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    clip-path: none;
}

.ui-check__input:checked {
    border-color: var(--ui-ink);
    background: var(--ui-primary);
}

.ui-check__input:checked::before {
    transform: scale(1);
}

.ui-check__input:hover {
    border-color: var(--ui-ink-muted);
}

.ui-check__input[aria-invalid="true"] {
    border-color: var(--ui-danger-solid);
}

.ui-check__input:disabled,
.ui-switch__input:disabled {
    border-color: transparent;
    background: var(--ui-disabled-bg);
    cursor: not-allowed;
}

.ui-check__text {
    min-width: 0;
}

.ui-switch {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: var(--ui-tap);
    cursor: pointer;
}

.ui-switch__input {
    position: relative;
    width: 3rem;
    height: 1.75rem;
    border-radius: var(--ui-radius-pill);
}

.ui-switch__input::before {
    content: "";
    position: absolute;
    inset-block-start: .2rem;
    inset-inline-start: .2rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--ui-ink-muted);
    transition: transform var(--ui-dur-base) var(--ui-ease-spring), background-color var(--ui-dur-fast) var(--ui-ease);
}

.ui-switch__input:checked {
    border-color: var(--ui-ink);
    background: var(--ui-secondary);
}

.ui-switch__input:checked::before {
    background: var(--ui-secondary-ink);
    transform: translateX(1.25rem);
}

/* ---------- tag e chip ---------- */
.ui-tag {
    --_bg: var(--ui-surface-sunken);
    --_ink: var(--ui-ink);
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    padding: .15rem .7rem;
    border-radius: var(--ui-radius-pill);
    background: var(--_bg);
    color: var(--_ink);
    font-size: var(--ui-text-sm);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.ui-tag--accent {
    --_bg: var(--ui-accent);
    --_ink: var(--ui-accent-ink);
}

.ui-tag--secondary {
    --_bg: var(--ui-secondary);
    --_ink: var(--ui-secondary-ink);
}

.ui-tag--info {
    --_bg: var(--ui-info-bg);
    --_ink: var(--ui-info-ink);
}

.ui-tag--success {
    --_bg: var(--ui-success-bg);
    --_ink: var(--ui-success-ink);
}

.ui-tag--warning {
    --_bg: var(--ui-warning-bg);
    --_ink: var(--ui-warning-ink);
}

.ui-tag--danger {
    --_bg: var(--ui-danger-bg);
    --_ink: var(--ui-danger-ink);
}

.ui-chip {
    display: inline-flex;
    align-items: stretch;
    min-height: 44px;
    border: 2px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-raised);
    color: var(--ui-ink);
    font-size: var(--ui-text-sm);
    font-weight: 700;
    transition: background-color var(--ui-dur-fast) var(--ui-ease), border-color var(--ui-dur-fast) var(--ui-ease);
}

.ui-chip__label,
.ui-chip__remove {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    color: inherit;
    text-decoration: none;
}

.ui-chip__label {
    padding: 0 var(--ui-space-4);
    border-radius: var(--ui-radius-pill);
}

.ui-chip__remove {
    justify-content: center;
    min-width: 44px;
    margin-inline-start: calc(var(--ui-space-2) * -1);
    border-radius: var(--ui-radius-pill);
}

.ui-chip:hover,
.ui-chip__label:hover,
.ui-chip__remove:hover {
    color: inherit;
}

.ui-chip:hover {
    background: var(--ui-surface-sunken);
}

.ui-chip--active,
.ui-chip[aria-pressed="true"] {
    border-color: var(--ui-surface-inverse);
    background: var(--ui-surface-inverse);
    color: var(--ui-ink-inverse);
}

.ui-chip--active:hover,
.ui-chip[aria-pressed="true"]:hover {
    background: var(--ui-surface-inverse);
}

/* ---------- alert ---------- */
.ui-alert {
    --_bg: var(--ui-info-bg);
    --_ink: var(--ui-info-ink);
    --_solid: var(--ui-info-solid);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4);
    border-radius: var(--ui-radius-md);
    border-inline-start: 6px solid var(--_solid);
    background: var(--_bg);
    color: var(--_ink);
}

.ui-alert--success {
    --_bg: var(--ui-success-bg);
    --_ink: var(--ui-success-ink);
    --_solid: var(--ui-success-solid);
}

.ui-alert--warning {
    --_bg: var(--ui-warning-bg);
    --_ink: var(--ui-warning-ink);
    --_solid: var(--ui-warning-solid);
}

.ui-alert--danger {
    --_bg: var(--ui-danger-bg);
    --_ink: var(--ui-danger-ink);
    --_solid: var(--ui-danger-solid);
}

.ui-alert > .ui-icon {
    margin-top: .15em;
    color: var(--_solid);
}

.ui-alert__title {
    margin: 0 0 var(--ui-space-1);
    font-size: var(--ui-text-base);
    font-weight: 800;
}

.ui-alert__body > :last-child {
    margin-bottom: 0;
}

.ui-alert a {
    color: inherit;
}

/* ---------- badge (contatori e stati piccoli) ---------- */
.ui-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: .45rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary);
    color: var(--ui-primary-ink);
    font-size: var(--ui-text-xs);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ui-badge--accent {
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
}

.ui-badge--secondary {
    background: var(--ui-secondary);
    color: var(--ui-secondary-ink);
}

.ui-badge--neutral {
    background: var(--ui-surface-inverse);
    color: var(--ui-ink-inverse);
}

/* ---------- avatar ---------- */
.ui-avatar {
    --_size: 2.5rem;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--_size);
    height: var(--_size);
    overflow: hidden;
    border-radius: 50%;
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
    font-size: calc(var(--_size) * .4);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.ui-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-avatar--sm {
    --_size: 2rem;
}

.ui-avatar--lg {
    --_size: 3.5rem;
}

.ui-avatar--xl {
    --_size: 5rem;
}

/* ---------- empty state ---------- */
.ui-empty {
    display: grid;
    justify-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-7) var(--ui-space-5);
    border: 2px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-xl);
    text-align: center;
}

.ui-empty__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
    font-size: 1.75rem;
}

.ui-empty__title {
    margin: 0;
    font-size: var(--ui-text-xl);
}

.ui-empty__text {
    max-width: 40ch;
    margin: 0;
    color: var(--ui-ink-muted);
}

.ui-empty--compact { padding: var(--ui-space-5) var(--ui-space-4); border-width: 1px; border-radius: var(--ui-radius-lg); }
.ui-empty--compact .ui-empty__icon { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
.ui-empty--compact .ui-empty__title { font-size: var(--ui-text-lg); }
/* Movimento (MOTION-1): l'icona entra con un rimbalzo e un'onda, una volta sola; il successo (toast, alert) con un segno che scatta. */
@media (prefers-reduced-motion: no-preference) {
    .ui-empty__icon { position: relative; animation: ui-empty-in .55s var(--ui-ease-spring) .1s both; }
    .ui-empty__icon::after { content: ""; position: absolute; inset: -.375rem; border: 2px solid var(--ui-accent); border-radius: 50%; opacity: 0; animation: ui-ring 1.1s var(--ui-ease-out) .45s; }
    .ui-toast--success > .ui-icon, .ui-alert--success > .ui-icon { animation: ui-check .5s var(--ui-ease-spring) .15s both; }
}
@keyframes ui-empty-in { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
@keyframes ui-ring { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.5); } }
@keyframes ui-check { from { opacity: 0; transform: scale(.2) rotate(-45deg); } }

/* ---------- pagination ---------- */
.ui-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-3);
}

.ui-pagination__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-width: var(--ui-tap);
    min-height: var(--ui-tap);
    padding-inline: var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    color: var(--ui-ink);
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--ui-dur-fast) var(--ui-ease);
}

.ui-pagination__link:hover {
    background: var(--ui-surface-sunken);
    color: var(--ui-ink);
}

.ui-pagination__link[aria-current="page"] {
    background: var(--ui-surface-inverse);
    color: var(--ui-ink-inverse);
}

.ui-pagination__link[aria-disabled="true"] {
    color: var(--ui-disabled-ink);
    pointer-events: none;
}

.ui-pagination__gap {
    display: inline-grid;
    place-items: center;
    min-width: var(--ui-tap);
    min-height: var(--ui-tap);
    color: var(--ui-ink-muted);
}

.ui-pagination__status {
    flex-basis: 100%;
    margin: 0;
    color: var(--ui-ink-muted);
    font-size: var(--ui-text-sm);
    text-align: center;
}

.ui-pagination__text,
.ui-pagination__skip {
    display: none;
}

@media (min-width: 640px) {
    .ui-pagination__text {
        display: inline;
    }

    .ui-pagination__skip {
        display: block;
    }
}

/* ---------- tabs (link con aria-current o aria-selected) ---------- */
.ui-tabs {
    display: flex;
    gap: var(--ui-space-1);
    overflow-x: auto;
    border-bottom: 2px solid var(--ui-border);
    scrollbar-width: none;
}

.ui-tabs::-webkit-scrollbar {
    display: none;
}

.ui-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-height: var(--ui-tap);
    margin-bottom: -2px;
    padding: var(--ui-space-2) var(--ui-space-4);
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--ui-ink-muted);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ui-dur-fast) var(--ui-ease), border-color var(--ui-dur-fast) var(--ui-ease);
}

.ui-tabs__tab:hover {
    color: var(--ui-ink);
}

.ui-tabs__tab[aria-selected="true"],
.ui-tabs__tab[aria-current="page"] {
    border-bottom-color: var(--ui-primary-text);
    color: var(--ui-ink);
}

/* ---------- dialog (<dialog> nativo; showModal(), conferma e chiusura sul fondo: controller dialog e confirm di js/ds/ui.js) ---------- */
.ui-dialog {
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface-raised);
    color: var(--ui-ink);
    box-shadow: var(--ui-shadow-3);
}

.ui-dialog[open] {
    animation: ui-pop var(--ui-dur-base) var(--ui-ease-out);
}

.ui-dialog::backdrop {
    background: var(--ui-overlay);
}

.ui-dialog__header,
.ui-dialog__body,
.ui-dialog__footer {
    padding: var(--ui-space-4) var(--ui-space-5);
}

.ui-dialog__header {
    padding-bottom: 0;
}

.ui-dialog__title {
    margin: 0;
    font-size: var(--ui-text-xl);
}

.ui-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--ui-space-3);
    padding-top: 0;
}

/* Anteprima statica nella pagina /_ds: nessun overlay, nessuna posizione assoluta. */
.ui-dialog--static {
    position: static;
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;
}

@keyframes ui-pop {
    from {
        opacity: 0;
        transform: translateY(.5rem) scale(.98);
    }
}

/* ---------- toast (inserimento e rimozione: controller toast di js/ds/ui.js) ---------- */
.ui-toast-region {
    position: fixed;
    inset-inline: var(--ui-space-4);
    inset-block-end: calc(var(--ui-bottom-bar-h) + env(safe-area-inset-bottom, 0px) + var(--ui-space-4));
    z-index: var(--ui-z-toast);
    display: grid;
    justify-items: center;
    gap: var(--ui-space-2);
    pointer-events: none;
}

.ui-toast {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    width: min(100%, 26rem);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-inverse);
    color: var(--ui-ink-inverse);
    box-shadow: var(--ui-shadow-3);
    font-weight: 700;
    pointer-events: auto;
    animation: ui-pop var(--ui-dur-base) var(--ui-ease-out);
}

.ui-toast__text {
    flex: 1;
    min-width: 0;
}

.ui-toast .ui-btn {
    --_ink: var(--ui-ink-inverse);
    --_bg-hover: transparent;
    min-height: var(--ui-tap);
    text-decoration: underline;
}

.ui-toast-region--static {
    position: static;
    justify-items: start;
}

@media (min-width: 900px) {
    .ui-toast-region {
        inset-inline: auto var(--ui-space-5);
        inset-block-end: var(--ui-space-5);
        justify-items: end;
    }
}

/* Scomparsa solo CSS dopo 7 s (opacity 0 + visibility hidden). Con prefers-reduced-motion cambia la durata, non il ritardo.
   Puntatore o focus sul toast lo tengono visibile. */
.ui-toast--auto {
    animation: ui-pop var(--ui-dur-base) var(--ui-ease-out), ui-toast-out var(--ui-dur-base) var(--ui-ease) 7s forwards;
}

.ui-toast--auto:hover,
.ui-toast--auto:focus-within {
    animation-play-state: paused;
}

@keyframes ui-toast-out {
    to {
        opacity: 0;
        visibility: hidden;
        transform: translateY(.5rem);
    }
}

/* ---------- skeleton ---------- */
.ui-skeleton {
    display: block;
    min-height: 1em;
    border-radius: var(--ui-radius-sm);
    background: linear-gradient(90deg, var(--ui-surface-sunken) 30%, var(--ui-border) 50%, var(--ui-surface-sunken) 70%) 0 0 / 300% 100%;
    animation: ui-shimmer 1.6s ease-in-out infinite;
}

.ui-skeleton--title {
    width: 60%;
    height: 1.75rem;
}

.ui-skeleton--avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.ui-skeleton--block {
    aspect-ratio: 16 / 9;
}

@keyframes ui-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

/* ---------- stat ---------- */
.ui-stat {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
}

.ui-stat__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ui-radius-md);
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
    font-size: 1.25rem;
}

.ui-stat__body {
    min-width: 0;
}

.ui-stat__label {
    margin: 0;
    color: var(--ui-ink-muted);
    font-size: var(--ui-text-sm);
    font-weight: 700;
}

.ui-stat__value {
    margin: 0;
    font-size: var(--ui-text-2xl);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ui-stat__hint {
    margin: 0;
    color: var(--ui-ink-muted);
    font-size: var(--ui-text-xs);
}

/* ---------- progress (XP): <progress> nativo con il numero sempre visibile accanto ---------- */
.ui-progress {
    display: block;
    width: 100%;
    height: .875rem;
    overflow: hidden;
    appearance: none;
    border: 2px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-sunken);
    color: var(--ui-accent);
}

.ui-progress::-webkit-progress-bar {
    background: transparent;
}

.ui-progress::-webkit-progress-value {
    border-radius: var(--ui-radius-pill);
    background: var(--ui-accent);
    transition: width var(--ui-dur-slow) var(--ui-ease);
}

.ui-progress::-moz-progress-bar {
    border-radius: var(--ui-radius-pill);
    background: var(--ui-accent);
}

.ui-progress--secondary {
    color: var(--ui-secondary);
}

.ui-progress--secondary::-webkit-progress-value,
.ui-progress--secondary::-moz-progress-bar {
    background: var(--ui-secondary);
}

.ui-progress-row {
    display: grid;
    gap: var(--ui-space-2);
}

.ui-progress-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
    font-size: var(--ui-text-sm);
    font-weight: 700;
}

.ui-progress-row__value {
    font-variant-numeric: tabular-nums;
}

/* ---------- table: scorrimento contenuto nel wrapper (role="region", tabindex="0", aria-label) ---------- */
.ui-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
}

.ui-table {
    width: 100%;
    min-width: 32rem;
    font-size: var(--ui-text-sm);
}

.ui-table caption {
    padding: var(--ui-space-3) var(--ui-space-4);
    color: var(--ui-ink-muted);
    text-align: start;
}

.ui-table th,
.ui-table td {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
    text-align: start;
    vertical-align: middle;
}

.ui-table thead th {
    background: var(--ui-surface-sunken);
    white-space: nowrap;
}

.ui-table tbody tr:last-child > * {
    border-bottom: 0;
}

.ui-table tbody tr:hover > * {
    background: var(--ui-surface-sunken);
}

.ui-table .ui-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* ---------- figure (RD-4): numero + etichetta, per fasce di KPI ---------- */
.ui-figure { display: flex; flex-direction: column; justify-content: center; min-height: var(--ui-tap); padding: var(--ui-space-3) var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface-raised); color: var(--ui-ink); text-decoration: none; }
.ui-figure__value { font-size: var(--ui-text-2xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ui-figure__value small { margin-inline-start: .15em; color: var(--ui-ink-muted); font-size: var(--ui-text-sm); font-weight: 700; }
.ui-figure__label { color: var(--ui-ink-muted); font-size: var(--ui-text-sm); font-weight: 700; }
.ui-figure--strong .ui-figure__value { font-size: var(--ui-text-3xl); }
.ui-figure--accent { border-color: transparent; background: var(--ui-warning-bg); color: var(--ui-warning-ink); }
.ui-figure--accent .ui-figure__label, .ui-figure--accent .ui-figure__value small { color: inherit; }
.ui-figure--link { transition: transform var(--ui-dur-base) var(--ui-ease), box-shadow var(--ui-dur-base) var(--ui-ease); }
.ui-figure--link:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-2); color: inherit; }

/* ---------- item (RD-4): corpo delle card di sessione, evento e gruppo (ui/session.twig, event.twig, group.twig) ---------- */
.ui-item { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.ui-item > :not(.ui-card__media) { margin: 0; }
.ui-item > .ui-card__media:first-child { margin-top: calc(var(--ui-space-4) * -1); }
.ui-item__kicker, .ui-item__foot, .ui-item__seats { color: var(--ui-ink-muted); font-size: var(--ui-text-sm); font-weight: 700; }
.ui-item__when { font-weight: 700; }
.ui-item__meta, .ui-item__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
.ui-item__seats { display: inline-flex; align-items: center; gap: var(--ui-space-1); }
.ui-item__foot { font-weight: 400; }
.ui-item__reasons { display: flex; gap: var(--ui-space-2); padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-sm); background: var(--ui-success-bg); color: var(--ui-success-ink); font-size: var(--ui-text-sm); font-weight: 700; }
.ui-item__reasons .ui-icon { margin-top: .2em; }

@media (min-width: 640px) {
    .ui-item > .ui-card__media:first-child { margin-top: calc(var(--ui-space-5) * -1); }
}

/* ---------- row (RD-4): riga di una lista compatta (persone, gruppi, da fare, notifiche) ---------- */
.ui-list { display: grid; align-content: start; gap: var(--ui-space-1); margin: 0; padding: 0; list-style: none; }
.ui-row { display: flex; align-items: center; gap: var(--ui-space-3); min-height: 3.25rem; padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-md); color: var(--ui-ink); text-decoration: none; transition: background-color var(--ui-dur-fast) var(--ui-ease); }
a.ui-row:hover { background: var(--ui-surface-sunken); color: var(--ui-ink); }
.ui-row__text { display: grid; flex: 1; min-width: 0; }
.ui-row__title { font-weight: 700; }
.ui-row__title--plain { font-weight: 400; }
.ui-row__sub { color: var(--ui-ink-muted); font-size: var(--ui-text-sm); }
.ui-row__end { flex: none; }
.ui-row__icon { display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-accent-ink); }
.ui-row__count { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- game card, stores, FAQ, breadcrumb, filter bar (RD-5) ---------- */
.ui-game { --_pad: var(--ui-space-3); gap: var(--ui-space-1); padding: var(--_pad); }
.ui-game > .ui-card__media:first-child { margin: calc(var(--_pad) * -1) calc(var(--_pad) * -1) var(--ui-space-2); }
.ui-game .ui-card__title { display: -webkit-box; overflow: hidden; font-size: var(--ui-text-base); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ui-game__genres { overflow: hidden; color: var(--ui-ink-muted); font-size: var(--ui-text-sm); text-overflow: ellipsis; white-space: nowrap; }
.ui-game .ui-item__meta { margin-top: auto; padding-top: var(--ui-space-2); }

.ui-stores__list { display: grid; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-3); padding: 0; list-style: none; }
.ui-stores__list li { display: grid; gap: var(--ui-space-1); justify-items: start; }
.ui-stores__list .ui-btn { justify-content: space-between; }
.ui-stores__tag { font-size: var(--ui-text-sm); }
.ui-stores__note, .ui-stores__credit { margin: 0; color: var(--ui-ink-muted); font-size: var(--ui-text-sm); }
.ui-stores__credit { margin-top: var(--ui-space-3); }

.ui-faq { display: grid; gap: var(--ui-space-2); }
.ui-faq__item { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface-raised); }
.ui-faq__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); min-height: var(--ui-tap); padding: var(--ui-space-3) var(--ui-space-4); border-radius: inherit; list-style: none; cursor: pointer; transition: background-color var(--ui-dur-fast) var(--ui-ease); }
.ui-faq__summary::-webkit-details-marker { display: none; }
.ui-faq__summary:hover { background: var(--ui-surface-sunken); }
.ui-faq__q { margin: 0; font-size: var(--ui-text-base); line-height: var(--ui-leading-snug); }
.ui-faq__chev { flex: none; transition: transform var(--ui-dur-base) var(--ui-ease); }
.ui-faq__item[open] .ui-faq__chev { transform: rotate(180deg); }
.ui-faq__a { max-width: var(--ui-measure); margin: 0; padding: 0 var(--ui-space-4) var(--ui-space-4); }

.ui-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--ui-text-sm); }
.ui-crumbs__item { display: flex; align-items: center; min-width: 0; }
.ui-crumbs__item + .ui-crumbs__item::before { content: "\203A"; content: "\203A" / ""; margin-inline: var(--ui-space-2); color: var(--ui-ink-muted); }
.ui-crumbs a, .ui-crumbs__current { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ui-tap); min-height: var(--ui-tap); }
.ui-crumbs__current { overflow: hidden; max-width: 22ch; color: var(--ui-ink-muted); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.ui-filterbar { display: grid; gap: var(--ui-space-3); padding: var(--ui-space-3); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface-raised); box-shadow: var(--ui-shadow-1); }
.ui-filterbar__toggle { display: flex; align-items: center; gap: var(--ui-space-2); min-height: var(--ui-tap); padding: 0 var(--ui-space-4); border: 2px solid var(--ui-border-strong); border-radius: var(--ui-radius-pill); font-weight: 700; list-style: none; cursor: pointer; }
.ui-filterbar__toggle::-webkit-details-marker { display: none; }
.ui-filterbar__chev { margin-inline-start: auto; transition: transform var(--ui-dur-base) var(--ui-ease); }
.ui-filterbar__more[open] .ui-filterbar__chev { transform: rotate(180deg); }
.ui-filterbar__fields { display: grid; gap: var(--ui-space-3); padding-top: var(--ui-space-3); }

@media (min-width: 640px) {
    .ui-game { --_pad: var(--ui-space-4); gap: var(--ui-space-2); }
    .ui-filterbar__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .ui-filterbar { grid-template-columns: minmax(11rem, 1fr) minmax(0, 3fr) auto; align-items: end; padding: var(--ui-space-4); }
}

/* Da 900 px i filtri stanno in linea con la ricerca: il <details> resta aperto per sempre (dove ::details-content esiste), altrimenti resta il pulsante "Filtri". */
@supports selector(::details-content) {
    @media (min-width: 900px) {
        .ui-filterbar__more::details-content { content-visibility: visible; }
        .ui-filterbar__toggle { display: none; }
        .ui-filterbar__fields { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; padding-top: 0; }
    }
}

/* ---------- header, nav, bottom bar ---------- */
.ui-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--ui-z-sticky);
    border-bottom: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 90%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.ui-header__inner {
    display: flex;
    align-items: center;
    gap: var(--ui-space-4);
    max-width: var(--ui-container);
    min-height: var(--ui-header-h);
    margin-inline: auto;
    padding-inline: var(--ui-gutter);
}

.ui-header__spacer {
    flex: 1;
}

.ui-nav {
    display: none;
    align-items: center;
    gap: var(--ui-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-height: var(--ui-tap);
    padding: var(--ui-space-2) var(--ui-space-4);
    border-radius: var(--ui-radius-pill);
    color: var(--ui-ink);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--ui-dur-fast) var(--ui-ease);
}

.ui-nav__link:hover {
    background: var(--ui-surface-sunken);
    color: var(--ui-ink);
}

.ui-nav__link[aria-current="page"] {
    background: var(--ui-surface-inverse);
    color: var(--ui-ink-inverse);
}

@media (min-width: 900px) {
    .ui-nav {
        display: flex;
    }
}

.ui-bottom-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--ui-z-bottom-bar);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-2);
}

.ui-bottom-bar__item {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--ui-space-1);
    min-width: 0;
    min-height: var(--ui-bottom-bar-h);
    padding-block: var(--ui-space-2);
    overflow: hidden;
    color: var(--ui-ink-muted);
    font-size: var(--ui-text-xs);
    font-weight: 700;
    text-decoration: none;
}

.ui-bottom-bar__item:hover {
    color: var(--ui-ink);
}

.ui-bottom-bar__icon {
    display: grid;
    place-items: center;
    width: min(3.5rem, 100%);
    height: 2rem;
    border-radius: var(--ui-radius-pill);
    font-size: 1.25rem;
    transition: background-color var(--ui-dur-base) var(--ui-ease);
}

.ui-bottom-bar__item[aria-current="page"] {
    color: var(--ui-ink);
}

.ui-bottom-bar__item[aria-current="page"] .ui-bottom-bar__icon {
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
}

@media (min-width: 900px) {
    .ui-bottom-bar {
        display: none;
    }
}

/* Anteprima statica nella pagina /_ds (dentro un riquadro, non fissa al viewport). */
.ui-bottom-bar--static {
    position: static;
    display: grid;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
}

/* ---------- brand: simbolo + wordmark testuale "Coop" (inchiostro) + "Mate" (corallo) ---------- */
.ui-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    color: var(--ui-ink);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    min-height: 44px;
    text-decoration: none;
}

.ui-brand:hover {
    color: var(--ui-ink);
}

.ui-brand__mark {
    width: auto;
    height: 2.25rem;
    padding: .2rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-brand-tile);
}

.ui-brand__mate {
    color: var(--ui-primary-text);
}

/* ---------- shell (RD-2): corpo, avviso, flash, azioni dell'header, menu account, selettore tema, footer ----------
   (regole brevi su una riga per restare nel budget di 50 KB) */
.ui-app { display: flex; flex-direction: column; }
.ui-app > main { flex: 1; }
.ui-notice { margin: 0; padding: var(--ui-space-2) var(--ui-gutter); background: var(--ui-info-bg); color: var(--ui-info-ink); font-size: var(--ui-text-sm); font-weight: 700; text-align: center; }
.ui-flash { display: grid; gap: var(--ui-space-3); padding-top: var(--ui-space-4); }
.ui-header__actions { display: flex; align-items: center; gap: var(--ui-space-2); }
.ui-header__badge { position: absolute; inset-block-start: 2px; inset-inline-end: 0; min-width: 1.25rem; height: 1.25rem; outline: 2px solid var(--ui-surface); }
.ui-header__create, .ui-header__login, .ui-header__create span { display: none; }
/* Da 900 px la nav sta nell'header: voci compatte; "Crea sessione" è icona + etichetta nascosta fino a 1200 px (il nome sta in aria-label). */
.ui-header .ui-nav > .ui-nav__link { padding-inline: var(--ui-space-3); font-size: var(--ui-text-sm); white-space: nowrap; }

/* Menu account: <details> nativo (funziona senza JavaScript). */
.ui-menu { position: relative; }
.ui-menu__summary { display: flex; align-items: center; gap: var(--ui-space-2); min-height: var(--ui-tap); padding: var(--ui-space-1); border-radius: var(--ui-radius-pill); font-weight: 700; list-style: none; cursor: pointer; }
.ui-menu__summary::-webkit-details-marker { display: none; }
.ui-menu__summary:hover, .ui-menu[open] > .ui-menu__summary { background: var(--ui-surface-sunken); }
.ui-menu__name, .ui-menu__chev { display: none; }
.ui-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--ui-space-2));
    inset-inline-end: 0;
    z-index: var(--ui-z-dropdown);
    display: grid;
    gap: var(--ui-space-1);
    width: min(20rem, calc(100vw - 2 * var(--ui-gutter)));
    max-height: calc(100dvh - var(--ui-header-h) - var(--ui-bottom-bar-h) - var(--ui-space-5));
    padding: var(--ui-space-2);
    overflow-y: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-3);
    animation: ui-pop var(--ui-dur-base) var(--ui-ease-out);
}
.ui-menu__panel hr { margin: var(--ui-space-1) 0; }
.ui-menu__who { margin: 0; padding: var(--ui-space-2) var(--ui-space-3) 0; font-weight: 800; }
/* Voci: class="ui-nav__link ui-menu__item" (aspetto della nav, a tutta larghezza). */
.ui-menu__item { width: 100%; border: 0; border-radius: var(--ui-radius-sm); background: none; text-align: start; }
.ui-menu__item .ui-badge { margin-inline-start: auto; }

@media (min-width: 640px) {
    .ui-header__login { display: inline-flex; }
}

@media (min-width: 900px) {
    .ui-header__create { display: inline-flex; }
    .ui-menu__panel { max-height: calc(100dvh - var(--ui-header-h) - var(--ui-space-5)); }
}

@media (min-width: 1200px) {
    .ui-header__create span { display: inline; }
    .ui-menu__name, .ui-menu__chev { display: block; }
    .ui-menu__name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Selettore tema senza JavaScript: form POST /theme, tre pulsanti (aria-pressed sul corrente). */
.ui-theme { margin: 0; }
.ui-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ui-space-1); padding: var(--ui-space-1); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface-sunken); }
.ui-seg__btn { display: grid; align-content: center; justify-items: center; min-height: var(--ui-tap); padding: var(--ui-space-1); border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-ink); font-size: var(--ui-text-xs); font-weight: 700; }
.ui-seg__btn:hover { background: var(--ui-surface-raised); }
.ui-seg__btn[aria-pressed="true"] { background: var(--ui-surface-inverse); color: var(--ui-ink-inverse); }

.ui-footer { margin-top: var(--ui-space-section); border-top: 1px solid var(--ui-border); background: var(--ui-surface-sunken); color: var(--ui-ink-muted); font-size: var(--ui-text-sm); }
.ui-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2) var(--ui-space-5); max-width: var(--ui-container); margin-inline: auto; padding: var(--ui-space-6) var(--ui-gutter); }
.ui-footer p { margin: 0; }
.ui-footer__link { display: inline-block; padding-block: 12px; }
.ui-footer .ui-cluster { gap: 0; margin-inline-start: calc(-1 * var(--ui-space-4)); }

/* ---------- dinamico (RD-3): Turbo + Stimulus, js/ds/ui.js ---------- */
turbo-frame { display: block; transition: opacity var(--ui-dur-fast) var(--ui-ease); }
/* Frame in aggiornamento: attenuato solo se la risposta tarda (il ritardo evita lo sfarfallio del polling); nessun cambio di dimensioni. */
turbo-frame[aria-busy="true"] { opacity: .6; transition-delay: .3s; }
/* Barra di caricamento: Turbo mette aria-busy su <html> durante una visita (la sua barra è spenta: inietta uno <style>, vietato dalla CSP). Compare dopo 250 ms. */
html[aria-busy="true"]::before { content: ""; position: fixed; inset: 0 auto auto 0; z-index: var(--ui-z-toast); width: 40%; height: 3px; background: linear-gradient(90deg, var(--ui-primary), var(--ui-accent), var(--ui-secondary)); pointer-events: none; animation: ui-load-in var(--ui-dur-base) .25s backwards, ui-load 1.2s var(--ui-ease) infinite; }
.turbo-progress-bar { display: none; }
@keyframes ui-load-in { from { opacity: 0; } }
@keyframes ui-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { html[aria-busy="true"]::before { width: 100%; } }
/* Solo con JavaScript: elementi ridondanti (es. il bottone "Filtra" quando i campi inviano da soli). Ripiego senza JS: restano visibili. */
html.ui-js .ui-js-hide { display: none; }
/* Transizione tra pagine (meta view-transition): dissolvenza breve. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Sotto-menu a schede (impostazioni, libreria) */
.ui-subnav { display: flex; gap: var(--ui-space-2); overflow-x: auto; padding-bottom: var(--ui-space-1); scrollbar-width: thin; }
.ui-subnav a { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--ui-space-3); border-radius: var(--ui-radius-lg); color: var(--ui-ink-muted); font-weight: 700; text-decoration: none; }
.ui-subnav a:hover { background: var(--ui-surface-sunken); color: var(--ui-ink); }
.ui-subnav a[aria-current="page"] { background: var(--ui-ink); color: var(--ui-surface); }

/* ---------- cookie notice (LEG-1; controller cookie-notice di js/ds/ui.js) ---------- */
.ui-cookie {
    position: fixed;
    inset-inline: var(--ui-space-3);
    inset-block-end: calc(var(--ui-bottom-bar-h) + env(safe-area-inset-bottom, 0px) + var(--ui-space-3));
    z-index: var(--ui-z-toast);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    max-width: 44rem;
    margin-inline: auto;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-raised, var(--ui-surface));
    color: var(--ui-ink);
    box-shadow: var(--ui-shadow-3);
}

.ui-cookie[hidden] { display: none; }
.ui-cookie__text { flex: 1 1 16rem; margin: 0; font-size: var(--ui-text-sm); }