/* ============================================================================
   ToMax Suite — Base Components v2
   Depends on tokens.css (must be loaded first).
   Replaces legacy app.css with brand-aligned design system.
   ============================================================================ */

/* ── Fonts self-hosted (privacy + offline PWA) ──────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/demo-restyle/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/demo-restyle/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/demo-restyle/fonts/JetBrainsMono.woff2') format('woff2-variations'),
       url('/demo-restyle/fonts/JetBrainsMono.woff2') format('woff2');
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--font-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  /* Subtle warm radial backdrop (firma brand) */
  background-image:
    radial-gradient(ellipse 1200px 600px at 88% -10%, rgba(255, 79, 26, 0.06), transparent 60%),
    radial-gradient(ellipse 800px 600px at 0% 110%, rgba(255, 165, 0, 0.04), transparent 50%);
  background-attachment: fixed;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand-amber-300); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
::selection { background: var(--primary-dim); color: var(--text); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
h1 { font-size: var(--font-3xl); letter-spacing: -0.025em; }
h2 { font-size: var(--font-2xl); }
h3 { font-size: var(--font-xl); }
h4 { font-size: var(--font-lg); }
p  { margin: 0; }

/* Tabular numerals everywhere numbers matter */
.num, .timer, .price, .stat, .table td:where(.num), [data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

/* ── Focus ring (A11y rule §1: focus-states) ────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.btn:focus-visible, .input:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--border-focus);
}

/* ── Brand logo (extended PNG · per header/sidebar) ─────────────────────── */
/* Default = 36px alta, width auto. Singolo asset: TOMAX + X marchio. */
.brand-logo {
  display: block;
  height: 36px;
  width: auto;
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 6px rgba(255, 79, 26, 0.10));
}
@media (max-width: 768px) {
  .brand-logo { height: 32px; }
}

/* ── Brand mark (logo SVG inline-friendly) ──────────────────────────────── */
.tx-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--text);
  user-select: none;
}
.tx-logo__mark {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  color: var(--primary);
  filter: drop-shadow(0 0 8px rgba(255, 79, 26, 0.45));
  transition: transform var(--dur-base) var(--ease-spring), filter var(--dur-base);
}
.tx-logo:hover .tx-logo__mark {
  transform: rotate(-6deg) scale(1.05);
  filter: drop-shadow(0 0 14px rgba(255, 79, 26, 0.7));
}
.tx-logo__wordmark { display: inline-flex; align-items: baseline; gap: 1px; }
.tx-logo__wordmark .toma { font-weight: var(--weight-black); }
.tx-logo__wordmark .x { color: var(--primary); font-weight: var(--weight-black); }
.tx-logo__sub {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid var(--border-strong);
}

/* Status dot animato (sostituisce il puntino verde legacy) */
.tx-livedot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 currentColor;
  color: var(--success);
  animation: tx-pulse 2s var(--ease-out) infinite;
}
@keyframes tx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(127, 176, 105, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(127, 176, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 176, 105, 0); }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 10px 16px; min-height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit; font-size: var(--font-sm); font-weight: var(--weight-medium);
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--border-brand); background: var(--bg-hover); }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(180deg, var(--brand-orange-400) 0%, var(--brand-orange-500) 100%);
  color: var(--text-on-brand);
  border-color: transparent;
  font-weight: var(--weight-semibold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.2),
    var(--shadow-glow-sm);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--brand-orange-300) 0%, var(--brand-orange-400) 100%);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 0 rgba(0, 0, 0, 0.2),
    var(--shadow-glow);
}
.btn-primary:active {
  background: var(--brand-orange-600);
  transform: scale(0.97);
}

.btn-secondary {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-elev-3); }

.btn-danger { color: var(--text-danger); border-color: rgba(229, 72, 77, 0.32); }
.btn-danger:hover { border-color: var(--danger); background: rgba(229, 72, 77, 0.08); }
.btn-danger:focus-visible { box-shadow: var(--shadow-focus-danger); }

.btn-ghost { border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); background: var(--bg-hover); border-color: transparent; }

.btn-link { border: 0; background: 0; padding: 0; min-height: 0; color: var(--text-link); }
.btn-link:hover { color: var(--brand-amber-300); background: transparent; }

.btn-sm  { padding: 6px 12px; min-height: 32px; font-size: var(--font-xs); border-radius: var(--radius-sm); }
.btn-lg  { padding: 14px 22px; min-height: 48px; font-size: var(--font-md); border-radius: var(--radius-md); }
.btn-xl  { padding: 18px 28px; min-height: 56px; font-size: var(--font-lg); border-radius: var(--radius-lg); }
.btn-icon { padding: 0; width: 40px; min-height: 40px; }
.btn-block { width: 100%; }

/* Loading state */
.btn[data-loading="true"] {
  color: transparent !important;
  pointer-events: none;
}
.btn[data-loading="true"]::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--text-on-brand);
  animation: tx-spin 0.7s linear infinite;
}
@keyframes tx-spin { to { transform: rotate(360deg); } }

/* ── Form controls ──────────────────────────────────────────────────────── */
.field {
  display: block;
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 var(--space-2);
}
label.field { margin-top: var(--space-3); }

/* FIX_INPUT_PADDING_SPECIFICITY (2026-06-09): la catena di :not() gonfiava la
   specificita' a (0,4,1), sovrascrivendo il padding-left dei componenti con icona
   (.tm-search, .input-group .input-icon + input) -> testo sotto l'icona ("Cerca"
   tagliato). :where() porta la specificita' a (0,0,0): stessi stili di default,
   ma i componenti tornano a vincere come previsto. */
:where(.input, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select, textarea) {
  display: block;
  width: 100%;
  padding: 11px 14px;
  min-height: 44px;            /* WCAG touch target */
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: var(--font-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
  -webkit-appearance: none;
  appearance: none;
}
.input:hover, input:hover, select:hover, textarea:hover { border-color: var(--border-brand); }
.input::placeholder, input::placeholder, textarea::placeholder { color: var(--text-faint); }
.input:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* Inputs with icon prefix */
.input-group {
  position: relative; display: flex; align-items: center;
}
.input-group .input-icon {
  position: absolute; left: 12px; width: 18px; height: 18px;
  color: var(--text-soft); pointer-events: none;
}
.input-group .input-icon + .input,
.input-group .input-icon + input {
  padding-left: 40px;
}
.input-group .input-trailing {
  position: absolute; right: 10px;
}

/* Helper / error text */
.input-help { display: block; margin-top: var(--space-1); font-size: var(--font-xs); color: var(--text-soft); }
.input-error {
  display: block; margin-top: var(--space-1); font-size: var(--font-xs);
  color: var(--text-danger); font-weight: var(--weight-medium);
}
.input[aria-invalid="true"], input[aria-invalid="true"] {
  border-color: var(--danger);
}
.input[aria-invalid="true"]:focus-visible { box-shadow: var(--shadow-focus-danger); }

/* ── Card ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  position: relative;
}
.card-elev {
  background: var(--bg-elev-1);
}
.card-glow {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-card), var(--shadow-glow-sm);
}
/* Subtle elevation utility — depth + top highlight (G6) */
.card-lift {
  box-shadow: var(--shadow-card-lift);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.card-lift:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-lift-hover);
}
.card-lift:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card-lift);
}
/* AI affordance card (per AI rich action cards futuri) */
.card-ai {
  border-color: rgba(121, 184, 212, 0.32);
  box-shadow: var(--shadow-card), var(--shadow-ai-glow-sm);
}
.card h2, .section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-soft);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.card-header h3 { font-size: var(--font-md); font-weight: var(--weight-semibold); }

/* ── Pills / badges (operational) ───────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 6px;
}
.pill.in_coda    { background: rgba(245, 166, 35, 0.12); color: var(--state-coda);       border-color: rgba(245, 166, 35, 0.24); }
.pill.sbloccato  { background: rgba(127, 176, 105, 0.12); color: var(--state-sbloccato); border-color: rgba(127, 176, 105, 0.24); }
.pill.in_cottura { background: rgba(255, 113, 55, 0.14); color: var(--state-cottura);    border-color: rgba(255, 113, 55, 0.28); }
.pill.pronto     { background: rgba(77, 171, 247, 0.12); color: var(--state-pronto);     border-color: rgba(77, 171, 247, 0.24); }
.pill.consegnato { background: rgba(250, 243, 231, 0.06); color: var(--state-consegnato); }
.pill.bloccato   { background: rgba(229, 72, 77, 0.12); color: var(--state-bloccato);    border-color: rgba(229, 72, 77, 0.24); }
.pill.forzato    { background: rgba(199, 125, 255, 0.12); color: var(--state-forzato);   border-color: rgba(199, 125, 255, 0.24); }
.pill.aperto     { background: rgba(127, 176, 105, 0.12); color: var(--success); border-color: rgba(127, 176, 105, 0.24); }
.pill.chiuso     { background: rgba(250, 243, 231, 0.06); color: var(--text-soft); }
.pill-soft { border: 0; }

/* Badge (count, generic) */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--primary); color: var(--text-on-brand);
  font-size: 10px; font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.badge-dim { background: var(--bg-elev-3); color: var(--text-dim); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.table th, .table td {
  text-align: left; padding: 10px var(--space-3);
  border-bottom: 1px solid var(--border);
}
.table th {
  font-size: var(--font-xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-soft); background: var(--bg-elev-1);
}
.table tr:hover td { background: var(--bg-hover); }
.table td.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; background: var(--bg-scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: var(--z-modal); padding: var(--space-4);
  animation: tx-fade-in var(--dur-base) var(--ease-out);
}
.modal.show, .modal[aria-hidden="false"] { display: flex; }
.modal[hidden] { display: none !important; }
.modal-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: tx-zoom-in var(--dur-base) var(--ease-spring);
}
.modal-card h3 { margin: 0 0 var(--space-4); font-size: var(--font-lg); }
.modal-card .row {
  display: flex; gap: var(--space-2);
  margin-top: var(--space-5); justify-content: flex-end; flex-wrap: wrap;
}
@keyframes tx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tx-zoom-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ── Header (app shell) ─────────────────────────────────────────────────── */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6); gap: var(--space-3);
  height: var(--header-h);
  background: rgba(14, 8, 5, 0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.app-header .brand { display: flex; align-items: center; gap: var(--space-3); }
.app-header .actions { display: flex; align-items: center; gap: var(--space-2); }
.app-header .who { font-size: var(--font-xs); color: var(--text-dim); }
.app-header .role {
  font-size: 10px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-soft);
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--bg-elev-2); border: 1px solid var(--border);
}

/* ── Tab nav ────────────────────────────────────────────────────────────── */
.tabnav {
  display: flex; gap: 0;
  padding: 0 var(--space-6);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabnav::-webkit-scrollbar { display: none; }
.tabnav a {
  position: relative;
  padding: 14px var(--space-4);
  color: var(--text-dim);
  font-size: var(--font-sm); font-weight: var(--weight-medium);
  white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.tabnav a:hover { color: var(--text); }
.tabnav a.active { color: var(--primary); }
.tabnav a.active::after {
  content: ''; position: absolute; left: var(--space-4); right: var(--space-4); bottom: -1px;
  height: 2px; background: var(--primary); border-radius: 2px 2px 0 0;
  box-shadow: 0 0 8px var(--primary-dim);
}
.tabnav a .badge { margin-left: 6px; vertical-align: 1px; }

/* ── Empty / loading / error states ─────────────────────────────────────── */
.empty {
  padding: var(--space-9) var(--space-5);
  text-align: center; color: var(--text-soft); font-size: var(--font-sm);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.empty-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-elev-3); color: var(--text-faint);
}
.empty-title { color: var(--text); font-size: var(--font-md); font-weight: var(--weight-semibold); }

.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--bg-elev-2) 0%, var(--bg-elev-3) 50%, var(--bg-elev-2) 100%);
  background-size: 200% 100%;
  animation: tx-shimmer 1.4s var(--ease-in-out) infinite;
  border-radius: var(--radius-sm);
}
@keyframes tx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.toast {
  position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-elev-3); color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  font-size: var(--font-sm); font-weight: var(--weight-medium);
  display: flex; align-items: center; gap: var(--space-2);
  animation: tx-toast-in var(--dur-base) var(--ease-spring);
}
.toast.toast-success { border-color: rgba(127, 176, 105, 0.4); }
.toast.toast-error   { border-color: rgba(229, 72, 77, 0.4); }
@keyframes tx-toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Utility ────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }
.row { display: flex; gap: var(--space-3); align-items: center; }
.row-end { justify-content: flex-end; }
.row-between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-soft); }
.text-sm { font-size: var(--font-sm); }
.text-xs { font-size: var(--font-xs); }
.text-md { font-size: var(--font-md); }
.text-lg { font-size: var(--font-lg); }
.font-mono { font-family: var(--font-mono); }
.tracking-caps { letter-spacing: var(--tracking-caps); text-transform: uppercase; font-size: var(--font-xs); }
.divider { height: 1px; background: var(--border); margin: var(--space-5) 0; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { font-size: var(--font-md); }     /* 16px on mobile to prevent iOS auto-zoom */
  .app-header { padding: 0 var(--space-4); height: var(--header-h-mobile); }
  .app-header .who { display: none; }
  .btn { min-height: 44px; padding: 11px 16px; }
  .tabnav { padding: 0 var(--space-4); }
  .tabnav a { padding: 14px var(--space-3); }
  .modal { padding: 0; align-items: flex-end; }
  .modal-card {
    max-width: 100%; max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-5);
    animation: tx-slide-up var(--dur-base) var(--ease-spring);
  }
  .table { font-size: var(--font-xs); }
  .table th, .table td { padding: 8px var(--space-2); }
}
@keyframes tx-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 480px) {
  .table-stack thead { display: none; }
  .table-stack tr {
    display: block; padding: var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev-2);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
  }
  .table-stack td {
    display: flex; padding: 2px 0; border: 0;
    justify-content: space-between; gap: var(--space-2);
  }
  .table-stack td::before {
    content: attr(data-label);
    color: var(--text-soft); font-size: var(--font-xs);
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
  }
}