/* Configurazione guidata delle regole di timbratura (/admin/timekeeping-policies/guidata).
   Foglio globale (non scoped) perché gli stili sono condivisi tra la pagina e i componenti
   PolicyLivePreview / PolicyChoiceChips: con il CSS isolato servirebbe ::deep su ogni regola.
   Tutti i colori passano dalla palette MudBlazor, così il tema scuro funziona senza duplicati. */

.pw-page {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* ── Intestazione ─────────────────────────────────────────────────────────── */

.pw-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pw-title {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.pw-subtitle {
    color: var(--mud-palette-text-secondary);
    margin-top: 0.25rem;
    max-width: 62ch;
}

.pw-progress {
    margin: 1rem 0 1.5rem;
    height: 6px;
}

/* ── Impaginazione a tre colonne ──────────────────────────────────────────── */

.pw-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1365px) {
    .pw-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

@media (max-width: 959px) {
    .pw-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Barra dei passi ──────────────────────────────────────────────────────── */

.pw-rail {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pw-rail-count {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.5rem;
}

.pw-rail-section {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 0.75rem 0 0.25rem;
}

.pw-rail-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pw-rail-step:hover {
    background: var(--mud-palette-action-default-hover);
}

.pw-rail-step .mud-icon-root {
    font-size: 1rem;
    flex-shrink: 0;
}

.pw-rail-step--done {
    color: var(--mud-palette-success);
}

/* Il passo corrente si distingue con lo sfondo e il peso, non colorando il testo di primary:
   sul tema scuro il viola su fondo viola tenue scende sotto il contrasto AA. */
.pw-rail-step--current {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.pw-rail-step--current .mud-icon-root {
    color: var(--mud-palette-primary);
}

.pw-rail-adv {
    margin-left: auto;
    opacity: 0.5;
}

.pw-rail-advanced {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-divider);
}

.pw-rail-advanced .mud-typography-caption {
    display: block;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

/* Sotto i 1366px l'elenco dei passi non ha una colonna dove stare, ma il contatore e
   l'interruttore delle regole fini servono comunque: la barra diventa una striscia sopra la
   domanda invece di sparire (nasconderla lascerebbe il telefono senza via d'accesso alle
   impostazioni avanzate). Regola dopo quelle base, altrimenti non vincerebbe. */
@media (max-width: 1365px) {
    .pw-rail {
        position: static;
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .pw-rail-section,
    .pw-rail-step {
        display: none;
    }

    .pw-rail-count {
        margin-bottom: 0;
    }

    .pw-rail-advanced {
        display: flex;
        align-items: center;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .pw-rail-advanced .mud-typography-caption {
        display: none;
    }
}

/* ── Scheda della domanda ─────────────────────────────────────────────────── */

.pw-card {
    padding: 1.75rem;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
}

@media (max-width: 599px) {
    .pw-card {
        padding: 1.25rem;
    }
}

.pw-badge-adv {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pw-badge-adv .mud-icon-root {
    font-size: 0.875rem;
}

.pw-question {
    font-weight: 600;
    line-height: 1.25;
}

.pw-help {
    color: var(--mud-palette-text-secondary);
    margin-top: 0.5rem;
    max-width: 68ch;
    line-height: 1.5;
}

.pw-control {
    margin-top: 1.5rem;
}

.pw-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.25rem;
}

.pw-times {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
}

.pw-time-field {
    min-width: 190px;
    flex: 1 1 190px;
}

.pw-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.pw-switch-row:last-child {
    border-bottom: none;
}

/* ── Scelte rapide ────────────────────────────────────────────────────────── */

.pw-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pw-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.pw-choice:hover {
    border-color: var(--mud-palette-primary);
    transform: translateY(-1px);
}

.pw-choice--active {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.pw-choice-label {
    font-weight: 500;
    line-height: 1.2;
}

.pw-choice-hint {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Schede grandi (modello, modalità, straordinari) ──────────────────────── */

.pw-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.pw-bigcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 1.25rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pw-bigcard:hover {
    border-color: var(--mud-palette-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(var(--mud-palette-primary-rgb), 0.18);
}

.pw-bigcard--active {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.pw-bigcard .mud-icon-root {
    color: var(--mud-palette-primary);
}

.pw-bigcard-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
}

.pw-bigcard-desc {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.pw-bigcard-summary {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px dashed var(--mud-palette-divider);
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

/* ── Navigazione ──────────────────────────────────────────────────────────── */

.pw-escape {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.pw-escape-link {
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.8125rem;
    text-decoration: underline;
    cursor: pointer;
}

.pw-escape-link:hover {
    color: var(--mud-palette-primary);
}

.pw-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mud-palette-divider);
}

.pw-escape + .pw-nav {
    margin-top: 0.75rem;
}

.pw-nav-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* ── Pannello di prova ────────────────────────────────────────────────────── */

.pw-side {
    position: sticky;
    top: 88px;
}

@media (max-width: 959px) {
    .pw-side {
        position: static;
    }
}

.pw-preview {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.pw-preview-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.pw-preview-head .mud-icon-root {
    color: var(--mud-palette-primary);
}

.pw-preview-body {
    padding: 1rem;
}

.pw-scenario-chips,
.pw-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.pw-chip {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pw-chip:hover {
    border-color: var(--mud-palette-primary);
}

.pw-chip--active {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.pw-chip--day {
    min-width: 2.25rem;
}

.pw-sample-note {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: -0.25rem 0 0.5rem;
    font-size: 0.6875rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.pw-punch {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pw-punch-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

/* ── Numeri dell'esito ────────────────────────────────────────────────────── */

.pw-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.pw-metric {
    flex: 1 1 90px;
    display: flex;
    flex-direction: column;
    padding: 0.625rem 0.75rem;
    border-radius: 12px;
    background: var(--mud-palette-background-grey);
    border-left: 3px solid var(--mud-palette-divider);
}

/* Il numero resta sul colore del testo: verde su verde tenue e arancio su arancio tenue, in tema
   chiaro, scendono a un contrasto di 2:1 — ed è il dato più importante della schermata. Il
   significato lo portano il bordo colorato, l'etichetta e la barra di composizione. */
.pw-metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.pw-metric-label {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
    margin-top: 0.125rem;
}

/* Su telefono il pannello di prova finisce sotto la piega: toccando un chip i numeri sarebbero
   fuori schermo, cioè esattamente ciò che questa pagina deve mostrare. La riga dei numeri viene
   quindi ancorata in basso, sopra la barra di navigazione dell'app (64px, z-index 1300), mentre il
   resto del pannello (confronto, passo-passo) resta più giù da leggere con calma. */
@media (max-width: 959.98px) {
    .pw-page {
        padding-bottom: 5rem;
    }

    .pw-metrics {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        z-index: 1290;
        margin: 0;
        padding: 0.5rem 0.75rem;
        gap: 0.375rem;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .pw-metric {
        padding: 0.375rem 0.5rem;
        border-radius: 8px;
    }

    .pw-metric-value {
        font-size: 1.0625rem;
    }

    .pw-metric-label {
        font-size: 0.625rem;
    }

    /* Bersagli da 44px: sul telefono si tocca col pollice, e chip da 27px si sbagliano. */
    .pw-chip {
        min-height: 44px;
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }

    .pw-chip--day {
        min-width: 44px;
    }

    .pw-nav .mud-button-root {
        min-height: 44px;
    }

    .pw-escape-link,
    .pw-steps-toggle {
        min-height: 44px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .pw-escape {
        margin-top: 0.5rem;
    }
}

.pw-metric--regular {
    background: rgba(var(--mud-palette-success-rgb), 0.12);
    border-left-color: var(--mud-palette-success);
}

.pw-metric--overtime {
    background: rgba(var(--mud-palette-warning-rgb), 0.14);
    border-left-color: var(--mud-palette-warning);
}

/* ── La giornata disegnata ────────────────────────────────────────────────── */

.pw-timeline-wrap {
    margin: 0.75rem 0;
}

.pw-timeline-label {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.25rem;
}

.pw-timeline {
    position: relative;
    height: 26px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    overflow: hidden;
}

.pw-timeline-window,
.pw-timeline-punch,
.pw-timeline-break {
    position: absolute;
    top: 0;
    bottom: 0;
}

.pw-timeline-window {
    background: rgba(var(--mud-palette-primary-rgb), 0.14);
    border-left: 2px solid var(--mud-palette-primary);
    border-right: 2px solid var(--mud-palette-primary);
}

.pw-timeline-punch {
    top: 6px;
    bottom: 6px;
    border-radius: 4px;
    background: var(--mud-palette-primary);
    opacity: 0.85;
}

.pw-timeline-break {
    top: 6px;
    bottom: 6px;
    border-radius: 3px;
    background: repeating-linear-gradient(45deg,
        var(--mud-palette-text-disabled) 0 3px,
        transparent 3px 6px);
}

.pw-timeline-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.625rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.125rem;
    font-variant-numeric: tabular-nums;
}

.pw-stack {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--mud-palette-background-grey);
}

.pw-stack-regular {
    background: var(--mud-palette-success);
}

.pw-stack-overtime {
    background: var(--mud-palette-warning);
}

.pw-stack-dropped {
    background: repeating-linear-gradient(45deg,
        var(--mud-palette-text-disabled) 0 4px,
        transparent 4px 8px);
}

/* ── Effetto della singola impostazione ───────────────────────────────────── */

.pw-effect {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px dashed var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.pw-effect--flat {
    border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
}

.pw-effect-head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.5rem;
}

.pw-effect-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    padding: 0.125rem 0;
}

.pw-effect-label {
    color: var(--mud-palette-text-secondary);
}

.pw-effect-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pw-effect-row--current .pw-effect-value {
    font-weight: 700;
}

.pw-effect-ot {
    color: var(--mud-palette-warning);
    margin-left: 0.25rem;
}

.pw-effect-delta {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: 0.8125rem;
    font-weight: 700;
    /* È la riga più importante del pannello: il testo resta sul colore primario del testo, non sul
       viola del brand, che sul fondo già tinto di viola non arriva al contrasto AA. */
    color: var(--mud-palette-text-primary);
}

.pw-effect-delta span {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    margin-left: 0.25rem;
}

.pw-effect--flat .pw-effect-delta {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

/* ── Dettaglio del calcolo ────────────────────────────────────────────────── */

.pw-steps {
    margin-top: 0.75rem;
}

.pw-steps-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    /* Il colore primary su questo fondo non arriva al contrasto AA in tema scuro: il carattere di
       comando lo dà la freccia, non la tinta del testo. */
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.pw-steps-toggle .mud-icon-root {
    color: var(--mud-palette-primary);
}

.pw-steps-toggle:hover {
    color: var(--mud-palette-text-primary);
}

.pw-steps-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
}

.pw-steps-list li {
    margin-bottom: 0.25rem;
}

/* ── Riepilogo ────────────────────────────────────────────────────────────── */

.pw-summary-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.pw-summary-list li {
    position: relative;
    padding: 0.375rem 0 0.375rem 1.5rem;
    line-height: 1.45;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.pw-summary-list li:last-child {
    border-bottom: none;
}

.pw-summary-list li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.pw-table-wrap {
    overflow-x: auto;
}

.pw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pw-table th {
    text-align: left;
    padding: 0.5rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider);
    white-space: nowrap;
}

.pw-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.pw-mono {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pw-invite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    border: 1px dashed var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}

/* ── Schermata finale ─────────────────────────────────────────────────────── */

.pw-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 1rem;
}

.pw-done-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Ingresso dalla lista delle regole ────────────────────────────────────── */

.pw-cta {
    background: linear-gradient(135deg,
        var(--mud-palette-primary) 0%,
        var(--mud-palette-secondary) 100%);
    color: var(--mud-palette-primary-text);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 10px 24px rgba(var(--mud-palette-primary-rgb), 0.28);
}

.pw-cta-text {
    max-width: 62ch;
}

.pw-cta-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.pw-cta-body {
    font-size: 0.875rem;
    opacity: 0.92;
    margin-top: 0.25rem;
    line-height: 1.45;
}

/* Il colore del testo su primary fa da SFONDO e il primary da testo: è l'unica coppia della
   palette garantita leggibile sopra la banda, in tema chiaro come in scuro. */
.pw-cta-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: 10px;
    background: var(--mud-palette-primary-text);
    color: var(--mud-palette-primary);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.pw-cta-action:hover {
    transform: translateY(-1px);
    filter: brightness(0.96);
}

.pw-cta-action:active {
    transform: translateY(0);
}

.pw-cta-action .mud-icon-root {
    font-size: 1.125rem;
}

.pw-row-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

.pw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
}

.pw-empty-body {
    max-width: 52ch;
    color: var(--mud-palette-text-secondary);
}
