/*
 * Cockpit OXQ Sales: solo l'impaginazione. Componenti, token e tipografia arrivano da oxq-ui
 * (design system OXQ Matrix, static/oxq/oxq.css, senza Tailwind): qui layout e poche classi ox-*, sempre con le
 * variabili --oxq-*. Ripreso dal cockpit v3, già provato in Chrome e Safari.
 */
@layer reset, theme, base, components, utilities;

@layer utilities {
  body.ox-body { margin: 0; min-height: 100vh; background: var(--oxq-neutral-surface-canvas); color: var(--oxq-neutral-text-ink); }
  .contents { display: contents; }
  /* hidden vince sulle classi di impaginazione */
  [hidden]:not([hidden="until-found"]) { display: none !important; }

  /* pagina: tutta la larghezza della finestra, con i margini dell'app header */
  .ox-page { box-sizing: border-box; width: 100%;
    padding: var(--oxq-space-gap-lg) var(--oxq-space-layout-margin) var(--oxq-space-gap-3xl);
    display: flex; flex-direction: column; gap: var(--oxq-space-gap-lg); }
  .ox-stack { display: flex; flex-direction: column; gap: var(--oxq-space-gap-md); }
  .ox-stack-lg { display: flex; flex-direction: column; gap: var(--oxq-space-gap-lg); }
  .ox-stack-tight { display: flex; flex-direction: column; gap: var(--oxq-space-gap-2xs); }
  .ox-section { display: flex; flex-direction: column; gap: var(--oxq-space-gap-sm); scroll-margin-top: 96px; }
  .ox-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--oxq-space-gap-sm); }
  .ox-h2 { font: var(--oxq-font-title-md); color: var(--oxq-neutral-text-ink); margin: 0; }
  .ox-h3 { font: var(--oxq-font-title-sm); color: var(--oxq-neutral-text-ink); margin: 0; }
  .ox-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oxq-space-gap-xs); }
  .ox-row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--oxq-space-gap-sm); }
  .ox-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--oxq-space-gap-xs); }
  /* le griglie seguono lo spazio del contenitore, non lo schermo */
  .ox-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--oxq-space-gap-md); }
  .ox-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--oxq-space-gap-md); }
  .ox-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr)); gap: var(--oxq-space-gap-xs); }
  /* pagina con colonna laterale: il lavoro a sinistra, il contesto a destra */
  .ox-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--oxq-space-gap-lg); align-items: start; }
  .ox-aside { display: flex; flex-direction: column; gap: var(--oxq-space-gap-md); }
  /* coda a sinistra, dettaglio a destra (da approvare, risposte) */
  .ox-queue { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 3fr); gap: var(--oxq-space-gap-lg); align-items: start; }
  .ox-caption { margin: 0; font: var(--oxq-font-body-xs); color: var(--oxq-neutral-text-secondary); }
  .ox-text { margin: 0; font: var(--oxq-font-body-sm); color: var(--oxq-neutral-text-ink); }
  .ox-small { font: var(--oxq-font-body-sm); }
  .ox-muted { color: var(--oxq-neutral-text-secondary); }
  .ox-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--oxq-font-body-sm); color: var(--oxq-neutral-text-ink); }
  .ox-prose { font: var(--oxq-font-body-md); color: var(--oxq-neutral-text-ink); overflow-wrap: anywhere; max-inline-size: var(--oxq-size-layout-prose-max); }
  .ox-prose p { margin: 0 0 var(--oxq-space-gap-sm); }
  .ox-prose p:last-child { margin-block-end: 0; }
  .ox-list-plain { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--oxq-space-gap-2xs); }
  .ox-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .ox-form { display: flex; flex-direction: column; gap: var(--oxq-space-gap-md); max-inline-size: var(--oxq-size-layout-prose-max); }
  .ox-ellipsis { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ox-nowrap { white-space: nowrap; }
  .ox-table-wide > table { min-inline-size: 680px; }
  /* L'area di tocco dei bottoni nelle righe sm sporge di qualche px e fa comparire la barra verticale nel contenitore
     della tabella (che scorre solo in orizzontale). Da portare nella libreria. */
  .oxq-table { overflow-y: hidden; }

  /* app header: lo stato di Claude e l'account */
  .ox-claude-status { display: inline-flex; align-items: center; gap: var(--oxq-space-gap-xs); padding: 0 var(--oxq-space-inset-control-x);
    block-size: var(--oxq-size-control-md); border-radius: var(--oxq-radius-pill); background: var(--oxq-neutral-surface-subtle);
    font: var(--oxq-font-label-sm); color: var(--oxq-neutral-text-ink); text-decoration: none; white-space: nowrap; }
  .ox-claude-status:hover { background: var(--oxq-neutral-surface-muted); }
  .ox-account { border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--oxq-radius-pill); }
  .ox-menu-wide { min-inline-size: 280px; }
  .ox-menu-form { display: contents; }

  /* impostazioni: menu locale a sinistra, contenuto a destra */
  .ox-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--oxq-space-gap-xl); align-items: start; }
  .ox-settings > .oxq-side-nav { position: sticky; top: var(--oxq-space-gap-lg); }

  /* accesso */
  .ox-login { min-height: 100vh; display: grid; place-items: center; padding: var(--oxq-space-gap-lg); box-sizing: border-box; }
  .ox-login-logo { block-size: 2rem; inline-size: auto; }
  .ox-login-box { inline-size: min(100%, var(--oxq-size-layout-narrow-max)); display: flex; flex-direction: column; gap: var(--oxq-space-gap-lg); }

  /* una mail come la riceve il destinatario */
  .ox-mail-head { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--oxq-space-gap-2xs) var(--oxq-space-gap-md); margin: 0; font: var(--oxq-font-body-sm); }
  .ox-mail-head dt { color: var(--oxq-neutral-text-secondary); }
  .ox-mail-head dd { margin: 0; color: var(--oxq-neutral-text-ink); overflow-wrap: anywhere; }
  .ox-mail-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--oxq-font-body-md); color: var(--oxq-neutral-text-ink); max-inline-size: var(--oxq-size-layout-prose-max); }
  .ox-mail-signature { margin: 0; white-space: pre-wrap; font: var(--oxq-font-body-xs); color: var(--oxq-neutral-text-secondary); }

  /* da approvare e risposte */
  .ox-quote { margin: 0; padding: var(--oxq-space-gap-sm) var(--oxq-space-gap-md); background: var(--oxq-neutral-surface-sunken);
    border-radius: var(--oxq-radius-control); white-space: pre-wrap; overflow-wrap: anywhere; font: var(--oxq-font-body-md); color: var(--oxq-neutral-text-ink); }
  .ox-queue > .oxq-list { position: sticky; top: var(--oxq-space-gap-lg); max-block-size: calc(100vh - 2 * var(--oxq-space-gap-lg)); overflow-y: auto; }

  /* campagne e aziende */
  .ox-row-link { color: inherit; font: inherit; font-weight: 500; text-decoration: none; }
  .ox-row-link:hover, .ox-row-link:focus-visible { text-decoration: underline; }

  /* impostazioni */
  .ox-grow { flex: 1 1 240px; min-inline-size: 0; }
  .ox-form-wide { max-inline-size: none; }
  .ox-search { flex: 0 1 320px; }
  .ox-token-row, .ox-token-form { align-items: end; flex-wrap: nowrap; }
  .ox-token-field { flex: 1 1 auto; min-inline-size: 0; }
  .ox-token-field input { font: var(--oxq-font-code-sm); }
  .ox-mail-preview { display: flex; flex-direction: column; gap: var(--oxq-space-gap-sm); padding: var(--oxq-space-gap-md);
    background: var(--oxq-neutral-surface-sunken); border-radius: var(--oxq-radius-control); }
  .ox-cmd { padding: var(--oxq-space-gap-sm) var(--oxq-space-gap-md); background: var(--oxq-neutral-surface-solid);
    color: var(--oxq-neutral-text-on-ink); border-radius: var(--oxq-radius-control); }
  .ox-cmd code { font: var(--oxq-font-code-sm); overflow-wrap: anywhere; }

  /* aziende: barra Cerca · Filtri e pannello delle condizioni, come nel PIM */
  .ox-toolbar { position: relative; display: flex; align-items: center; gap: var(--oxq-space-gap-sm); }
  .ox-toolbar-search { flex: 0 1 520px; }
  .ox-toolbar-search .oxq-search-field { inline-size: 100%; }
  .ox-filter-menu > summary { list-style: none; cursor: pointer; user-select: none; }
  .ox-filter-menu > summary::-webkit-details-marker { display: none; }
  .ox-filter-menu[open] > summary { background: var(--oxq-neutral-surface-muted); }
  .ox-count { display: inline-grid; place-items: center; min-inline-size: 18px; block-size: 18px; padding-inline: 5px; box-sizing: border-box;
    margin-inline-start: 2px; border-radius: var(--oxq-radius-pill); background: var(--oxq-neutral-surface-solid);
    color: var(--oxq-neutral-text-on-ink); font: var(--oxq-font-label-sm); font-size: 11px; }
  .ox-count[hidden] { display: none; }
  .ox-filter-panel { position: absolute; z-index: 20; inset-block-start: calc(100% + 8px); inset-inline-start: 0; inline-size: min(780px, 100%);
    box-sizing: border-box; display: flex; flex-direction: column; gap: var(--oxq-space-gap-sm); padding: var(--oxq-space-gap-lg);
    background: var(--oxq-neutral-surface-raised); border: 1px solid var(--oxq-neutral-line-popover); border-radius: var(--oxq-radius-overlay);
    box-shadow: var(--oxq-elevation-3); }
  .ox-filter-panel-head { display: flex; flex-direction: column; gap: 2px; margin-block-end: var(--oxq-space-gap-2xs); }
  .ox-conditions { display: flex; flex-direction: column; gap: var(--oxq-space-gap-xs); }
  .ox-condition { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.6fr) 32px; gap: var(--oxq-space-gap-xs); align-items: center; }
  .ox-condition > [hidden] { display: none; }
  /* senza valore («manca», «è presente») la × resta in fondo alla riga */
  .ox-condition:has(> [data-ruolo="valore"][hidden]):has(> [data-ruolo="valore-scelta"][hidden])::before { content: ""; grid-column: 3; grid-row: 1; }
  .ox-select { block-size: var(--oxq-size-control-md); min-inline-size: 0; box-sizing: border-box; padding: 0 10px;
    border: 1px solid var(--oxq-neutral-line-control); border-radius: var(--oxq-radius-control); background: var(--oxq-neutral-surface-control);
    font: var(--oxq-font-body-sm); color: var(--oxq-neutral-text-ink); }
  .ox-select:hover { border-color: var(--oxq-neutral-line-control-hover); }
  .ox-select:focus-visible { outline: 2px solid var(--oxq-neutral-line-border-strong); outline-offset: 1px; }
  .ox-select:disabled { color: var(--oxq-neutral-text-muted); background: var(--oxq-neutral-surface-control-disabled); }
  .ox-input { padding: 0 12px; }
  .ox-condition-remove { inline-size: 32px; block-size: 32px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
    border-radius: var(--oxq-radius-pill); color: var(--oxq-neutral-icon-secondary); }
  .ox-condition-remove:hover { background: var(--oxq-neutral-surface-muted); color: var(--oxq-neutral-icon-ink); }
  .ox-condition-remove svg { inline-size: 14px; block-size: 14px; }
  .ox-add-condition { display: flex; align-items: center; justify-content: center; gap: 6px; block-size: var(--oxq-size-control-md); cursor: pointer;
    border: 1.5px dashed var(--oxq-neutral-line-border-strong); border-radius: var(--oxq-radius-control); background: none;
    font: var(--oxq-font-label-sm); color: var(--oxq-neutral-text-secondary); }
  .ox-add-condition:hover { background: var(--oxq-neutral-surface-subtle); color: var(--oxq-neutral-text-ink); }
  .ox-add-condition svg { inline-size: 14px; block-size: 14px; }
  .ox-text-button { padding: 0; border: 0; background: none; cursor: pointer; font: var(--oxq-font-body-sm); color: var(--oxq-neutral-text-secondary);
    text-decoration: underline; text-underline-offset: 2px; }
  .ox-text-button:hover { color: var(--oxq-neutral-text-ink); }
  .ox-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--oxq-space-gap-xs); }
  .ox-menu-columns { max-block-size: min(70vh, 560px); overflow-y: auto; min-inline-size: 260px; }
  .ox-menu-check.ox-off { color: var(--oxq-neutral-text-secondary); }
  .ox-menu-check.ox-off .oxq-menu-item-text { padding-inline-start: 24px; }
  .ox-table-sticky th:first-child, .ox-table-sticky td:first-child { position: sticky; inset-inline-start: 0; z-index: 1;
    background: var(--oxq-neutral-surface-raised); box-shadow: inset -1px 0 0 var(--oxq-neutral-line-hairline); }
  .ox-table-sticky th:first-child { background: inherit; }
  .ox-table-sticky td:first-child { min-inline-size: 200px; }
  .ox-fact-cell { max-inline-size: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ox-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; min-inline-size: 260px; }

  /* il percorso di una campagna: sei tappe, fatte, adesso, dopo */
  .ox-path { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--oxq-space-gap-xs); }
  .ox-path-step { position: relative; display: flex; flex-direction: column; gap: var(--oxq-space-gap-2xs); min-inline-size: 0; }
  .ox-path-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 11px; inset-inline: 30px calc(-1 * var(--oxq-space-gap-xs) + 4px);
    block-size: 2px; background: var(--oxq-neutral-line-border); }
  .ox-path-step[data-state="done"]:not(:last-child)::after { background: var(--oxq-success-surface-solid); }
  .ox-path-dot { position: relative; z-index: 1; inline-size: 24px; block-size: 24px; border-radius: var(--oxq-radius-pill); display: grid; place-items: center;
    box-sizing: border-box; border: 2px solid var(--oxq-neutral-line-border-strong); background: var(--oxq-neutral-surface-raised);
    font: var(--oxq-font-label-sm); color: var(--oxq-neutral-text-secondary); }
  .ox-path-dot svg { inline-size: 14px; block-size: 14px; }
  .ox-path-step[data-state="done"] .ox-path-dot { border-color: var(--oxq-success-surface-solid); background: var(--oxq-success-surface-solid); color: var(--oxq-success-text-on-ink); }
  .ox-path-step[data-state="current"] .ox-path-dot { border-color: var(--oxq-neutral-surface-solid); background: var(--oxq-neutral-surface-solid); color: var(--oxq-neutral-text-on-ink);
    box-shadow: 0 0 0 4px var(--oxq-neutral-surface-muted); }
  .ox-path-label { font: var(--oxq-font-label-sm); color: var(--oxq-neutral-text-secondary); }
  .ox-path-step[data-state="current"] .ox-path-label { color: var(--oxq-neutral-text-ink); font-weight: 700; }
  .ox-path-step[data-state="done"] .ox-path-label { color: var(--oxq-neutral-text-ink); }
  .ox-path-who { font: var(--oxq-font-body-xs); color: var(--oxq-neutral-text-secondary); }
  /* ogni tappa apre la sua sezione della campagna; quella aperta ha il nome sottolineato (niente sfondo: coprirebbe la linea) */
  .ox-path-hit { display: flex; flex-direction: column; gap: var(--oxq-space-gap-2xs); color: inherit; text-decoration: none;
    border-radius: var(--oxq-radius-control); }
  .ox-path-hit:hover .ox-path-label { text-decoration: underline; text-underline-offset: 4px; }
  .ox-path-hit:focus-visible { outline: 2px solid var(--oxq-neutral-line-focus, currentColor); outline-offset: 4px; }
  .ox-path-step[data-selected] .ox-path-label { color: var(--oxq-neutral-text-ink); font-weight: 700;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .ox-path-step[data-state="todo"] .ox-path-who { color: var(--oxq-neutral-text-muted); }

  /* chi ha la palla adesso */
  .ox-move { display: flex; flex-direction: column; gap: var(--oxq-space-gap-xs); padding: var(--oxq-space-gap-sm) var(--oxq-space-gap-md);
    background: var(--oxq-neutral-surface-sunken); border-radius: var(--oxq-radius-control); }
  .ox-move-line { margin: 0; display: flex; align-items: baseline; gap: var(--oxq-space-gap-xs); font: var(--oxq-font-body-sm); color: var(--oxq-neutral-text-ink); }
  .ox-move-line .oxq-badge { flex: none; }
  .ox-move-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

  /* la prima cosa da fare */
  .ox-overline { margin: 0; font: var(--oxq-font-overline-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--oxq-discovery-text-vivid-small); }
  .ox-first-title { margin: 0; font: var(--oxq-font-title-md); color: var(--oxq-neutral-text-ink); }

  .ox-steps-list { margin: 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: var(--oxq-space-gap-xs); }
  .ox-code { font: var(--oxq-font-code-sm); padding: 1px 6px; border-radius: var(--oxq-radius-item); background: var(--oxq-neutral-surface-muted); }
  .ox-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* il registro: giorni, sessioni di lavoro, righe che si aprono (_log.html) */
  .ox-log { max-inline-size: 960px; }
  .ox-log-day { display: flex; flex-direction: column; gap: var(--oxq-space-gap-xs); }
  .ox-log-day + .ox-log-day { margin-block-start: var(--oxq-space-gap-md); }
  .ox-log-day > .ox-overline { color: var(--oxq-neutral-text-secondary); }
  .ox-log-session { display: flex; flex-direction: column; gap: var(--oxq-space-gap-2xs); }
  .ox-log-session + .ox-log-session { margin-block-start: var(--oxq-space-gap-xs); }
  .ox-log-session .oxq-list-item-title { white-space: normal; }
  /* le righe senza freccia allineano il testo a quelle che si aprono: freccia (16px) più lo spazio della riga (12px) */
  .ox-log-session .oxq-list-item:not([data-indent]):not(:has(> .oxq-disclosure)) > .oxq-list-item-texts { margin-inline-start: 28px; }
  .ox-select-campaign { inline-size: auto; min-inline-size: 220px; }

  @media (max-width: 1100px) {
    .ox-split, .ox-queue { grid-template-columns: 1fr; }
  }
}

/* Safari (26.1): un popover ancorato con display grid (menu, listbox di combobox e autocomplete) stira le righe su tutta
   l'altezza disponibile e arriva in fondo alla finestra. Con le righe in cima prende l'altezza del contenuto, come in
   Chrome. Da portare nella libreria. */
@layer utilities {
  .oxq-menu:where([popover]), .oxq-listbox:where([popover]) { align-content: start; }
}

/* Il logo dell'app header segue il fondo, non il tema: sul canvas scuro va in reverse (Logo › color). */
@layer utilities {
  :root[data-theme="dark"] .oxq-app-header .oxq-logo { --_ink: var(--oxq-brand-text-reverse); --_back: var(--oxq-brand-shape-reverse-x-back); }
}

@layer utilities {
  /* avvio: cosa serve, con la spunta o il punto da sistemare */
  .ox-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--oxq-space-gap-sm); }
  .ox-check { display: grid; grid-template-columns: 24px 1fr auto; align-items: start; gap: var(--oxq-space-gap-sm); }
  .ox-check-icon { inline-size: 24px; block-size: 24px; border-radius: var(--oxq-radius-pill); display: grid; place-items: center;
    background: var(--oxq-neutral-surface-muted); color: var(--oxq-neutral-text-secondary); }
  .ox-check-icon svg { inline-size: 14px; block-size: 14px; }
  .ox-check[data-ok] .ox-check-icon { background: var(--oxq-success-surface-solid); color: var(--oxq-success-text-on-ink); }
  .ox-check-text { display: flex; flex-direction: column; gap: 2px; }
  .ox-check-label { font: var(--oxq-font-label-md); color: var(--oxq-neutral-text-ink); }
  .ox-check-fix { font: var(--oxq-font-body-sm); color: var(--oxq-neutral-text-secondary); }
}

@layer utilities {
  /* Card bianche sullo sfondo, senza contorni, con un'ombra che le fa emergere (Home e tutto il cockpit). */
  .oxq-card:where([data-variant="elevated"]) { --_shadow: var(--oxq-elevation-2); }

  /* «Inizia da qui» dentro la card «Tocca a te»: un blocco appena più scuro, senza bordo */
  .ox-first { display: flex; flex-direction: column; gap: var(--oxq-space-gap-md); padding: var(--oxq-space-gap-md);
    border-radius: var(--oxq-radius-control); background: var(--oxq-neutral-surface-sunken); }

  /* elenchi di cose da fare dentro una card: niente cornice, solo le righe */
  .oxq-task-list.ox-task-plain { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .oxq-task-list.ox-task-plain > .oxq-task-item { padding-inline: 0; }
}

@layer utilities {
  /* Il nome del prodotto accanto al logo, come negli altri prodotti OXQ: «OXEQUA  Sales», grigio e leggero */
  .ox-brand { display: inline-flex; align-items: center; gap: var(--oxq-space-gap-sm); margin-inline-end: var(--oxq-space-gap-md); }
  .ox-brand > .oxq-logo { flex: none; block-size: var(--oxq-size-logo-nav); min-block-size: 0; inline-size: auto; }
  .ox-brand-name { font: var(--oxq-font-body-md); font-weight: 400; line-height: 1; letter-spacing: .01em;
    color: var(--oxq-neutral-text-secondary); white-space: nowrap; }
}

@layer utilities {
  /* Parti secondarie di una pagina, chiuse di serie: una card bianca con il titolo che la apre */
  .ox-details { border-radius: var(--oxq-radius-surface); background: var(--oxq-neutral-surface-raised); box-shadow: var(--oxq-elevation-2);
    padding: var(--oxq-space-gap-md) var(--oxq-space-inset-container); }
  .ox-details > summary { cursor: pointer; font: var(--oxq-font-label-md); color: var(--oxq-neutral-text-ink); list-style-position: inside; }
  .ox-details[open] > summary { margin-block-end: var(--oxq-space-gap-md); }
  .ox-check-fix .ox-code { white-space: nowrap; }
}

@layer utilities {
  /* segnaposto nei modelli delle mail: [Azienda], [Nome Cognome]… li riempie Claude per ogni azienda */
  .ox-ph { padding: 0 3px; border-radius: 4px; background: var(--oxq-info-surface-muted); color: var(--oxq-info-text-vivid-small); font-weight: 600; }
}