/* =============================================================================
   Obole · Design System — Onde · tokens.css · v0.9
   -----------------------------------------------------------------------------
   FIGÉ / IMMUABLE. Toute évolution = nouvelle version (copier /DS/0.8 → /DS/0.9).
   Couche unique distribuée du DS : importée telle quelle par le showroom
   (/DS/0.9/index.html) ET par chaque écran haute-fi (/haute-fi/<v>/<route>/).

   Correctif v0.9 (finition grille 4px) — RENDU QUASI INCHANGÉ :
     · v0.8 s'était DÉCLARÉE « grille 4px COMPLÈTE » et listait dans ses snaps
       « gaps 10→12 » et « margins 2→4 ». En réalité DEUX valeurs avaient
       échappé à la passe — la règle était bonne, son application incomplète :
         .modal .row-btns        gap:10px        → 12px   (gaps 10→12)
         .listitem .li-main span  margin-top:2px  → 4px    (margins 2→4)
       v0.9 les snappe enfin, conformément à la règle déjà énoncée. Décalage
       2px chacun, imperceptible. Aucune autre valeur de composant n'est hors
       grille : l'audit a été repris EXHAUSTIVEMENT sur tout tokens.css avant
       de re-certifier la règle (cf. point de gouvernance). « COMPLÈTE » ne
       vaut donc qu'à partir de v0.9.
     · Aucune couleur, aucun composant, aucun autre espacement ne change.

   Refacto v0.8 (grille 4px — déclarée complète, en fait 2 résidus, cf. v0.9) — RENDU QUASI INCHANGÉ :
     · v0.7 avait calé les PADDINGS sur la grille. v0.8 termine le travail :
       TOUT espacement et TOUTE dimension de composant (padding, margin, gap,
       width, height) est désormais un multiple de 4. Échelle de référence =
       spacing Tailwind par défaut : 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48.
       Pas de valeur intermédiaire inventée.
     · Valeurs hors grille héritées de v0.7, snappées au pas le plus proche
       (équidistant → demi supérieur) :
         gaps   5→4 · 6→8 · 7→8 · 9→8 · 10→12 · 11→12
         margins 2→4 · 3→4 · 5→4 · 6→8 · 7→8 · 9→8 · 11→12 · 13→12
         box     34→36 · 38→40 · 42→44     colonne attr 122→120
         pills   2/3px vertical → 4px
       Décalage maximal 2px, imperceptible.
     · NON touchés (mécanique interne, pas de l'espacement de layout) :
       largeurs de bordure (1 / 1.5 / 2px), nudges optiques d'icône (±1px),
       géométrie interne du switch (knob 22px, inset 3px), spinner 16px,
       tailles de police. Cibles tactiles ≥ 44px préservées. Aucune couleur,
       aucun composant nouveau.

   Refacto v0.6 (couleur, structure 2 couches) — RENDU STRICTEMENT INCHANGÉ :
     · On finit le refacto 2 couches : accent était resté un RÔLE en couche 1
       (rampe mutée par [data-brand]) — même smell que danger/warning/success
       en v0.5. On s'aligne sur l'implémentation du code (@obole/ui, themes.css).
     · Les 3 hues de marque deviennent des PRIMITIFS nommés (couche 1, fixes),
       mêmes L/C, échelle 50→950 :
         --color-eggplant-*  (aubergine 330)
         --color-indigo-*    (indigo 285)
         --color-petrole-*   (pétrole 225)
     · accent passe en COUCHE 2 : --color-accent-* devient un alias sémantique
       pointant par défaut vers indigo (marque par défaut, conforme au produit).
       Plus aucune rampe accent brute en couche 1. [data-brand="…"] ne re-pointe
       que cet alias de couche 2, jamais un primitif.
     · Aplatissement du bloc .themed (alignement code) : les dérivés de panneau
       sortent du scope .themed et deviennent des tokens sémantiques globaux
       (couche 2, override .dark) :
         --panel-danger → --danger-surface   (valeur inchangée)
         --ring-danger  → --danger-ring      (valeur inchangée)
         + --warning-surface en parallèle de danger.
       Le wrapper .themed est supprimé ; les composants pointent les nouveaux noms.
     · v0.5 (rappel) : danger / warning / success ramps en couche 1 sous leur
       teinte neutre (red 28 / amber 70 / green 152), rôles en couche 2 seulement.
       Aucune couleur perçue ne bouge. Pas de token info (non attesté).

   Nouveautés v0.4 (section 7) — attestées par le lot Auth + Réglages :
     · Champ mot de passe (.pwfield = .input-affix + .pw-reveal)
       — bouton de révélation masquer/afficher, focusable, à l'intérieur du champ.
       L'email réutilise .input, l'erreur .field.has-error, le switch .toggle,
       le sélecteur de thème le .segmented (3 options) : aucun primitif ad-hoc.

   Nouveautés v0.3 (section 6) — attestées par le lot Véhicules + Plans :
     · Bannière de statut de formulaire (.fbanner info/warn/error/success)
       — succès d'import, avertissement « plan partagé », rappel d'erreurs en tête
     · Voile de dialogue (.scrim) + modale danger (.modal.danger, .m-ic)
       — confirmation destructive (suppression véhicule / plan / opération), abandon
   Inchangé depuis v0.2 : le file-picker d'import réutilise .dropzone, le retour
   d'opération réutilise .toast — aucun nouveau primitif pour ces deux cas.

   Nouveautés v0.2 (états génériques, section 5) :
     · Field en erreur (.field.has-error + .ferror)        — champ obligatoire / valeur refusée
     · Champ verrouillé / lecture seule (.lockfield)        — pré-rempli, non modifiable, non ouvrable
     · Option de toggle désactivée (.segmented button[disabled] + .seg-note)
     · Borne d'input (.fhint.bound) + message de borne (.ferror)

   Contenu
     1. COUCHE 1 — primitifs (oklch 50→950) + variantes de marque
     2. COUCHE 2 — tokens sémantiques (clair/sombre) + « À venir » + dérivés
     3. Reset minimal
     4. Composants génériques (consomment UNIQUEMENT la couche 2)
        + états repos / survol / actif / focus / désactivé / chargement,
          exposés en pseudo réels ET en classes forcées .s-* (documentation).
   ============================================================================= */

/* ============================================================
   1 · COUCHE 1 — PRIMITIFS · échelle 50→950, oklch, in-gamut
   ============================================================ */
:root{
  /* Neutre — quasi-achromatique, hue aubergine 325 */
  --color-neutral-50:  oklch(0.985 0.002 325);
  --color-neutral-100: oklch(0.967 0.003 325);
  --color-neutral-200: oklch(0.925 0.005 325);
  --color-neutral-300: oklch(0.872 0.007 325);
  --color-neutral-400: oklch(0.715 0.009 325);
  --color-neutral-500: oklch(0.556 0.011 325);
  --color-neutral-600: oklch(0.449 0.011 325);
  --color-neutral-700: oklch(0.37  0.010 325);
  --color-neutral-800: oklch(0.283 0.008 325);
  --color-neutral-900: oklch(0.205 0.007 325);
  --color-neutral-950: oklch(0.14  0.006 325);
  /* Marque — 3 teintes nommées, primitifs FIXES (couche 1).
     Mêmes L/C, hue décalé. accent n'est PLUS une rampe brute ici : c'est un
     alias de couche 2 (section 2) qui pointe l'une de ces 3 teintes. */
  /* Aubergine — hue 330 */
  --color-eggplant-50:  oklch(0.971 0.013 330);
  --color-eggplant-100: oklch(0.936 0.032 330);
  --color-eggplant-200: oklch(0.885 0.062 330);
  --color-eggplant-300: oklch(0.808 0.103 330);
  --color-eggplant-400: oklch(0.726 0.142 330);
  --color-eggplant-500: oklch(0.645 0.167 330);
  --color-eggplant-600: oklch(0.573 0.163 330);
  --color-eggplant-700: oklch(0.498 0.142 330);
  --color-eggplant-800: oklch(0.432 0.118 330);
  --color-eggplant-900: oklch(0.378 0.094 330);
  --color-eggplant-950: oklch(0.272 0.068 330);
  /* Indigo — hue 285 (marque par défaut) */
  --color-indigo-50:  oklch(0.971 0.013 285);
  --color-indigo-100: oklch(0.936 0.032 285);
  --color-indigo-200: oklch(0.885 0.062 285);
  --color-indigo-300: oklch(0.808 0.103 285);
  --color-indigo-400: oklch(0.726 0.142 285);
  --color-indigo-500: oklch(0.645 0.167 285);
  --color-indigo-600: oklch(0.573 0.163 285);
  --color-indigo-700: oklch(0.498 0.142 285);
  --color-indigo-800: oklch(0.432 0.118 285);
  --color-indigo-900: oklch(0.378 0.094 285);
  --color-indigo-950: oklch(0.272 0.068 285);
  /* Pétrole — hue 225 */
  --color-petrole-50:  oklch(0.971 0.013 225);
  --color-petrole-100: oklch(0.936 0.032 225);
  --color-petrole-200: oklch(0.885 0.062 225);
  --color-petrole-300: oklch(0.808 0.103 225);
  --color-petrole-400: oklch(0.726 0.142 225);
  --color-petrole-500: oklch(0.645 0.167 225);
  --color-petrole-600: oklch(0.573 0.163 225);
  --color-petrole-700: oklch(0.498 0.142 225);
  --color-petrole-800: oklch(0.432 0.118 225);
  --color-petrole-900: oklch(0.378 0.094 225);
  --color-petrole-950: oklch(0.272 0.068 225);
  /* Rouge — hue 28 (rôle sémantique : danger, couche 2) */
  --color-red-50:  oklch(0.971 0.013 28);
  --color-red-100: oklch(0.936 0.032 28);
  --color-red-200: oklch(0.885 0.062 28);
  --color-red-300: oklch(0.808 0.103 28);
  --color-red-400: oklch(0.726 0.142 28);
  --color-red-500: oklch(0.645 0.167 28);
  --color-red-600: oklch(0.573 0.163 28);
  --color-red-700: oklch(0.498 0.142 28);
  --color-red-800: oklch(0.432 0.118 28);
  --color-red-900: oklch(0.378 0.094 28);
  --color-red-950: oklch(0.272 0.068 28);
  /* Ambre — hue 70 (rôle sémantique : warning, couche 2 ; distinct de l'accent) */
  --color-amber-50:  oklch(0.971 0.013 70);
  --color-amber-100: oklch(0.936 0.034 70);
  --color-amber-200: oklch(0.901 0.058 70);
  --color-amber-300: oklch(0.852 0.090 70);
  --color-amber-400: oklch(0.802 0.116 70);
  --color-amber-500: oklch(0.755 0.132 70);
  --color-amber-600: oklch(0.685 0.128 70);
  --color-amber-700: oklch(0.560 0.108 70);
  --color-amber-800: oklch(0.470 0.090 70);
  --color-amber-900: oklch(0.405 0.074 70);
  --color-amber-950: oklch(0.285 0.052 70);
  /* Vert — hue 152 (rôle sémantique : success, couche 2) */
  --color-green-50:  oklch(0.971 0.010 152);
  --color-green-100: oklch(0.936 0.025 152);
  --color-green-200: oklch(0.885 0.048 152);
  --color-green-300: oklch(0.808 0.080 152);
  --color-green-400: oklch(0.726 0.111 152);
  --color-green-500: oklch(0.645 0.130 152);
  --color-green-600: oklch(0.573 0.127 152);
  --color-green-700: oklch(0.498 0.111 152);
  --color-green-800: oklch(0.432 0.092 152);
  --color-green-900: oklch(0.378 0.073 152);
  --color-green-950: oklch(0.272 0.053 152);

  /* Spacing base-4 · Rayons · Typo */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-full:999px;
  --dispf:"Bricolage Grotesque", system-ui, sans-serif;
  --bodyf:"Schibsted Grotesk", system-ui, sans-serif;
  --monof:"JetBrains Mono", ui-monospace, monospace;
}

/* ============================================================
   2 · COUCHE 2 — TOKENS SÉMANTIQUES (consommés par les composants)
   La bascule sombre ne touche QUE cette couche.
   Rôles d'état (refacto v0.5) : --danger → red-…, --warning → amber-…,
   --success → green-… ; accent (refacto v0.6) : --color-accent-* est un
   ALIAS de marque, pointant par défaut indigo. [data-brand] le re-pointe
   vers une des 3 teintes nommées de couche 1 — jamais un primitif brut.
   ============================================================ */

/* Alias de marque (couche 2). Défaut = indigo (marque produit).
   Les composants & tokens sémantiques consomment --color-accent-* ;
   ils ne connaissent pas la teinte concrète choisie. */
:root,[data-brand="indigo"]{
  --color-accent-50:var(--color-indigo-50);   --color-accent-100:var(--color-indigo-100);
  --color-accent-200:var(--color-indigo-200); --color-accent-300:var(--color-indigo-300);
  --color-accent-400:var(--color-indigo-400); --color-accent-500:var(--color-indigo-500);
  --color-accent-600:var(--color-indigo-600); --color-accent-700:var(--color-indigo-700);
  --color-accent-800:var(--color-indigo-800); --color-accent-900:var(--color-indigo-900);
  --color-accent-950:var(--color-indigo-950);
}
[data-brand="eggplant"]{
  --color-accent-50:var(--color-eggplant-50);   --color-accent-100:var(--color-eggplant-100);
  --color-accent-200:var(--color-eggplant-200); --color-accent-300:var(--color-eggplant-300);
  --color-accent-400:var(--color-eggplant-400); --color-accent-500:var(--color-eggplant-500);
  --color-accent-600:var(--color-eggplant-600); --color-accent-700:var(--color-eggplant-700);
  --color-accent-800:var(--color-eggplant-800); --color-accent-900:var(--color-eggplant-900);
  --color-accent-950:var(--color-eggplant-950);
}
[data-brand="petrole"]{
  --color-accent-50:var(--color-petrole-50);   --color-accent-100:var(--color-petrole-100);
  --color-accent-200:var(--color-petrole-200); --color-accent-300:var(--color-petrole-300);
  --color-accent-400:var(--color-petrole-400); --color-accent-500:var(--color-petrole-500);
  --color-accent-600:var(--color-petrole-600); --color-accent-700:var(--color-petrole-700);
  --color-accent-800:var(--color-petrole-800); --color-accent-900:var(--color-petrole-900);
  --color-accent-950:var(--color-petrole-950);
}
[data-theme="light"]{
  --surface:var(--color-neutral-50); --surface-card:#ffffff; --surface-inset:var(--color-neutral-100);
  --border-subtle:var(--color-neutral-200); --border:var(--color-neutral-300);
  --text-strong:var(--color-neutral-900); --text:var(--color-neutral-800);
  --text-muted:var(--color-neutral-500); --text-faint:var(--color-neutral-400);
  --brand:var(--color-accent-600); --brand-hover:var(--color-accent-700); --on-brand:var(--color-neutral-50);
  --brand-soft:var(--color-accent-50); --brand-soft-text:var(--color-accent-800);
  --focus-ring:color-mix(in oklch, var(--brand) 40%, transparent);
  --danger:var(--color-red-600); --danger-text:var(--color-red-700); --danger-strong:var(--color-red-800);
  --danger-icon:var(--color-red-400); --danger-chip-bg:var(--color-red-100); --danger-chip-text:var(--color-red-700);
  --warning:var(--color-amber-600); --warning-text:var(--color-amber-800); --warning-strong:var(--color-amber-900);
  --warning-icon:var(--color-amber-500); --warning-chip-bg:var(--color-amber-100); --warning-chip-text:var(--color-amber-800);
  --success:var(--color-green-600); --success-text:var(--color-green-700);
  --success-chip-bg:var(--color-green-100); --success-chip-text:var(--color-green-800);
  /* Dérivés de panneaux teintés — aplatis v0.6 (ex-.themed), globaux couche 2 */
  --danger-surface: color-mix(in oklch, var(--danger) 15%, var(--surface));
  --danger-ring:    color-mix(in oklch, var(--danger) 30%, var(--surface-card));
  --warning-surface:color-mix(in oklch, var(--warning) 15%, var(--surface));
  --shadow-card: 0 1px 2px rgba(50,20,45,.05), 0 6px 18px -6px rgba(50,20,45,.10);
  --shadow-pop:  0 8px 24px -6px rgba(40,15,40,.22);
  --card-ring: transparent;
  color-scheme:light;
}
[data-theme="dark"]{
  --surface:var(--color-neutral-950); --surface-card:var(--color-neutral-900); --surface-inset:var(--color-neutral-800);
  --border-subtle:var(--color-neutral-800); --border:var(--color-neutral-700);
  --text-strong:var(--color-neutral-50); --text:var(--color-neutral-100);
  --text-muted:var(--color-neutral-400); --text-faint:var(--color-neutral-500);
  --brand:var(--color-accent-500); --brand-hover:var(--color-accent-400); --on-brand:var(--color-neutral-950);
  --brand-soft:color-mix(in oklch, var(--color-accent-500) 18%, var(--color-neutral-900)); --brand-soft-text:var(--color-accent-200);
  --focus-ring:color-mix(in oklch, var(--color-accent-500) 55%, transparent);
  --danger:var(--color-red-500); --danger-text:var(--color-red-300); --danger-strong:var(--color-red-200);
  --danger-icon:var(--color-red-400); --danger-chip-bg:color-mix(in oklch, var(--color-red-500) 22%, var(--color-neutral-900)); --danger-chip-text:var(--color-red-200);
  --warning:var(--color-amber-500); --warning-text:var(--color-amber-300); --warning-strong:var(--color-amber-200);
  --warning-icon:var(--color-amber-400); --warning-chip-bg:color-mix(in oklch, var(--color-amber-500) 22%, var(--color-neutral-900)); --warning-chip-text:var(--color-amber-200);
  --success:var(--color-green-500); --success-text:var(--color-green-300);
  --success-chip-bg:color-mix(in oklch, var(--color-green-500) 22%, var(--color-neutral-900)); --success-chip-text:var(--color-green-200);
  /* Dérivés de panneaux teintés — aplatis v0.6 (ex-.themed), globaux couche 2 */
  --danger-surface: color-mix(in oklch, var(--color-red-500) 24%, var(--color-neutral-900));
  --danger-ring:    color-mix(in oklch, var(--color-red-500) 40%, var(--color-neutral-900));
  --warning-surface:color-mix(in oklch, var(--color-amber-500) 24%, var(--color-neutral-900));
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px -10px rgba(0,0,0,.6);
  --shadow-pop:  0 10px 30px -8px rgba(0,0,0,.7);
  --card-ring: var(--color-neutral-800);
  color-scheme:dark;
}
/* « À venir » : axe orthogonal au thème (accent OU warning ambre) */
[data-avenir="accent"]{
  --up:var(--brand); --up-text:var(--brand-soft-text); --up-strong:var(--brand-soft-text);
  --up-icon:var(--color-accent-400); --up-panel:var(--brand-soft); --up-chip-bg:var(--brand-soft); --up-chip-text:var(--brand-soft-text);
}
[data-avenir="warning"]{
  --up:var(--warning); --up-text:var(--warning-text); --up-strong:var(--warning-strong);
  --up-icon:var(--warning-icon); --up-panel:var(--color-amber-50); --up-chip-bg:var(--warning-chip-bg); --up-chip-text:var(--warning-chip-text);
}
[data-theme="dark"][data-avenir="warning"]{ --up-panel: color-mix(in oklch, var(--color-amber-500) 9%, var(--color-neutral-900)); }

/* ============================================================
   3 · RESET MINIMAL
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;}

/* =============================================================================
   4 · COMPOSANTS GÉNÉRIQUES
   Convention d'états : pseudo réel (:hover/:focus-visible/:active/:disabled)
   doublé d'une classe forcée (.s-hover/.s-focus/.s-active/.s-disabled/.s-loading)
   pour documenter chaque état statiquement dans le showroom.
   ============================================================================= */

/* ---- App shell : status bar / app bar / page header / tabbar / filtres ---- */
.stat{display:flex;justify-content:space-between;align-items:center;padding:16px 24px 4px;font-family:var(--monof);font-size:12px;color:var(--text-faint);}
.stat .glyphs{letter-spacing:1px;}

.hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 12px;}
.hdr h1{font-family:var(--dispf);font-size:30px;font-weight:700;color:var(--text-strong);letter-spacing:-.01em;}

.appbar{display:flex;align-items:center;gap:8px;padding:8px 12px 12px;border-bottom:1px solid var(--border-subtle);transition:border-color .35s;position:relative;}
.appbar .ab-title{flex:1;min-width:0;}
.appbar .ab-title.center{text-align:center;font-family:var(--dispf);font-size:19px;font-weight:700;color:var(--text-strong);letter-spacing:-.01em;}
.appbar .ab-title b{display:block;font-family:var(--dispf);font-size:19px;font-weight:700;color:var(--text-strong);letter-spacing:-.01em;line-height:1.1;}
.appbar .ab-title span{display:block;font-size:12px;color:var(--text-muted);margin-top:4px;}

.tabbar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border-subtle);padding:12px 0 16px;background:var(--surface);}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--text-faint);font-family:var(--bodyf);text-decoration:none;cursor:pointer;}
.tab svg{color:var(--text-faint);}
.tab.active,.tab.s-active{color:var(--brand);font-weight:600;}
.tab.active svg,.tab.s-active svg{color:var(--brand);}

.filter{display:flex;gap:8px;padding:4px 20px 16px;overflow-x:auto;}
.filter::-webkit-scrollbar{display:none;}

/* ---- Filter chip ---- */
.fchip{display:inline-flex;align-items:center;gap:8px;padding:0 16px;height:40px;border-radius:var(--radius-full);border:1px solid var(--border);background:transparent;font-family:var(--bodyf);font-size:13px;color:var(--text-muted);white-space:nowrap;flex:0 0 auto;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.fchip svg{color:var(--text-faint);}
.fchip:hover,.fchip.s-hover{border-color:var(--text-muted);color:var(--text);}
.fchip:focus-visible,.fchip.s-focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-ring);}
.fchip.active,.fchip.s-active{background:var(--text-strong);color:var(--surface);border-color:var(--text-strong);font-weight:600;}
.fchip.active svg,.fchip.s-active svg{color:var(--surface);}

/* ---- Button ---- */
.btn{appearance:none;border:none;cursor:pointer;font-family:var(--bodyf);font-weight:600;font-size:14px;height:44px;padding:0 20px;border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;position:relative;transition:background .15s,color .15s,box-shadow .15s,transform .05s;}
.btn.full{width:100%;}
.btn.sm{height:40px;padding:0 16px;font-size:13px;}
.btn.primary{background:var(--brand);color:var(--on-brand);}
.btn.primary:hover,.btn.primary.s-hover{background:var(--brand-hover);}
.btn.secondary{background:transparent;color:var(--text-strong);border:1px solid var(--border);}
.btn.secondary:hover,.btn.secondary.s-hover{border-color:var(--text-muted);background:var(--surface-inset);}
.btn.ghost{background:transparent;color:var(--brand);}
.btn.ghost:hover,.btn.ghost.s-hover{background:var(--brand-soft);}
.btn.danger{background:var(--danger);color:#fff;}
.btn.danger:hover,.btn.danger.s-hover{filter:brightness(1.06);}
.btn:active,.btn.s-active{transform:translateY(1px);}
.btn:focus-visible,.btn.s-focus{outline:none;box-shadow:0 0 0 3px var(--focus-ring);}
.btn:disabled,.btn.s-disabled{opacity:.4;cursor:default;pointer-events:none;}
.btn.is-loading,.btn.s-loading{color:transparent !important;pointer-events:none;}
.btn.is-loading::after,.btn.s-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;color:var(--on-brand);animation:obole-spin .6s linear infinite;}
.btn.secondary.is-loading::after,.btn.ghost.is-loading::after,.btn.secondary.s-loading::after,.btn.ghost.s-loading::after{color:var(--brand);}
@keyframes obole-spin{to{transform:rotate(360deg);}}

/* ---- IconButton ---- */
.iconbtn{width:44px;height:44px;border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text);flex:0 0 auto;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s;}
.iconbtn.solid{background:var(--brand);color:var(--on-brand);border:none;}
.iconbtn.solid:hover,.iconbtn.solid.s-hover{background:var(--brand-hover);}
.iconbtn.bare{border:none;background:transparent;color:var(--text-strong);}
.iconbtn:not(.solid):hover,.iconbtn:not(.solid).s-hover{background:var(--surface-inset);}
.iconbtn:active,.iconbtn.s-active{transform:translateY(1px);}
.iconbtn:focus-visible,.iconbtn.s-focus{outline:none;box-shadow:0 0 0 3px var(--focus-ring);}
.iconbtn:disabled,.iconbtn.s-disabled,.iconbtn[disabled]{opacity:.32;cursor:default;pointer-events:none;}
.addbtn{width:44px;height:44px;border-radius:var(--radius-full);border:none;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:background .15s,transform .05s,box-shadow .15s;text-decoration:none;}
.addbtn svg{stroke-width:2.4;}
.addbtn:hover,.addbtn.s-hover{background:var(--brand-hover);}
.addbtn:active,.addbtn.s-active{transform:translateY(1px);}
.addbtn:focus-visible,.addbtn.s-focus{outline:none;box-shadow:0 0 0 3px var(--focus-ring);}

/* ---- Saisir (bouton de ligne, plein contraste) ---- */
.saisir{display:inline-flex;align-items:center;gap:8px;padding:0 16px;height:40px;border:none;border-radius:var(--radius-full);background:var(--text-strong);color:var(--surface);font-family:var(--bodyf);font-size:13px;font-weight:600;flex:0 0 auto;cursor:pointer;transition:opacity .15s,transform .05s,box-shadow .15s;text-decoration:none;}
.saisir:hover,.saisir.s-hover{opacity:.88;}
.saisir:active,.saisir.s-active{transform:translateY(1px);}
.saisir:focus-visible,.saisir.s-focus{outline:none;box-shadow:0 0 0 3px var(--focus-ring);}
.saisir:disabled,.saisir.s-disabled{opacity:.4;cursor:default;pointer-events:none;}

/* ---- Form : field / input / select / affix / textarea ---- */
.field{display:flex;flex-direction:column;gap:8px;width:100%;}
.field > label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;font-weight:600;color:var(--text);}
.field > label .req{font-family:var(--monof);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;}
.field > label .req.on{color:var(--brand);}
.field > label .req.off{color:var(--text-faint);}
.fhint{font-family:var(--monof);font-size:11px;color:var(--text-muted);margin-top:-1px;}

.input,.select{height:44px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-card);color:var(--text-strong);font-family:var(--bodyf);font-size:14px;padding:0 16px;width:100%;transition:border-color .15s,box-shadow .15s;}
.input::placeholder{color:var(--text-faint);}
.input:hover,.input.s-hover,.select:hover,.select.s-hover{border-color:var(--text-muted);}
.input:focus,.input.s-focus,.select:focus,.select.s-focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-ring);}
.input:disabled,.input.s-disabled,.select:disabled,.select.s-disabled{opacity:.5;cursor:default;background:var(--surface-inset);}
.input[type="date"]{cursor:pointer;}
.input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55;}
.input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:.9;}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer;}

.input-affix{display:flex;align-items:center;gap:12px;height:44px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-card);padding:0 16px;transition:border-color .15s,box-shadow .15s;}
.input-affix:focus-within,.input-affix.s-focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-ring);}
.input-affix input{flex:1;min-width:0;border:none;background:transparent;color:var(--text-strong);font-family:var(--bodyf);font-size:14px;outline:none;}
.input-affix .lead,.input-affix .trail{display:flex;flex:0 0 auto;color:var(--text-faint);}
.input-affix .unit{font-family:var(--monof);font-size:12px;color:var(--text-muted);flex:0 0 auto;}

.textarea{min-height:88px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-card);color:var(--text-strong);font-family:var(--bodyf);font-size:14px;padding:12px 16px;width:100%;resize:vertical;line-height:1.5;transition:border-color .15s,box-shadow .15s;}
.textarea::placeholder{color:var(--text-faint);}
.textarea:hover,.textarea.s-hover{border-color:var(--text-muted);}
.textarea:focus,.textarea.s-focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-ring);}

/* ---- Segmented (toggle binaire in-app) ---- */
.segmented{display:inline-flex;background:var(--surface-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-full);padding:4px;gap:4px;width:100%;}
.segmented button{flex:1;appearance:none;border:none;background:transparent;cursor:pointer;font-family:var(--bodyf);font-size:14px;font-weight:600;color:var(--text-muted);height:40px;border-radius:var(--radius-full);transition:.15s;}
.segmented button:hover:not([aria-pressed="true"]){color:var(--text);}
.segmented button[aria-pressed="true"]{background:var(--surface-card);color:var(--text-strong);box-shadow:var(--shadow-card);}
.segmented button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring);}

/* ---- Switch ---- */
.toggle{width:48px;height:28px;border-radius:999px;background:var(--border);position:relative;cursor:pointer;flex:0 0 auto;transition:background .2s;border:none;}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.toggle.on,.toggle.s-active{background:var(--brand);}
.toggle.on::after,.toggle.s-active::after{transform:translateX(20px);}
.toggle:focus-visible,.toggle.s-focus{outline:none;box-shadow:0 0 0 3px var(--focus-ring);}
.toggle:disabled,.toggle.s-disabled{opacity:.4;cursor:default;}

/* ---- Dropzone / file picker ---- */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:88px;border:1.5px dashed var(--border);border-radius:var(--radius-md);background:var(--surface-inset);color:var(--text-muted);cursor:pointer;padding:16px;text-align:center;transition:border-color .15s,background .35s;}
.dropzone:hover,.dropzone.s-hover{border-color:var(--brand);}
.dropzone:focus-within,.dropzone.s-focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-ring);}
.dropzone .dz-ic{width:36px;height:36px;border-radius:var(--radius-full);background:var(--surface-card);display:flex;align-items:center;justify-content:center;color:var(--text-muted);box-shadow:var(--shadow-card);}
.dropzone .dz-main{font-size:13px;font-weight:600;color:var(--text);}
.dropzone .dz-sub{font-family:var(--monof);font-size:10.5px;color:var(--text-faint);}

/* ---- Badge ---- */
.badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 12px;border-radius:var(--radius-full);font-family:var(--bodyf);font-size:12px;font-weight:600;}
.badge.danger{background:var(--danger-chip-bg);color:var(--danger-chip-text);}
.badge.warning{background:var(--warning-chip-bg);color:var(--warning-chip-text);}
.badge.accent{background:var(--brand-soft);color:var(--brand-soft-text);}
.badge.success{background:var(--success-chip-bg);color:var(--success-chip-text);}
.badge.neutral{background:var(--surface-inset);color:var(--text-muted);}

/* ---- Card ---- */
.ccard{background:var(--surface-card);border:1px solid var(--card-ring);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-card);width:100%;}
.ccard h5{font-family:var(--dispf);font-size:16px;color:var(--text-strong);}
.ccard p{font-size:13px;color:var(--text-muted);margin-top:4px;}

/* ---- List item ---- */
.listitem{display:flex;align-items:center;gap:12px;background:var(--surface-card);border:1px solid var(--card-ring);border-radius:var(--radius-lg);padding:12px 16px;box-shadow:var(--shadow-card);width:100%;}
.listitem .li-ic{width:40px;height:40px;border-radius:var(--radius-md);background:var(--surface-inset);color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.listitem .li-main{flex:1;min-width:0;}
.listitem .li-main b{font-size:14px;color:var(--text-strong);font-weight:600;}
.listitem .li-main span{display:block;font-size:12px;color:var(--text-muted);margin-top:4px;}

/* ---- Menu / dropdown ---- */
.menu{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);padding:8px;min-width:208px;}
.menu[hidden]{display:none;}
.menu .mi{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:var(--radius-sm);font-size:14px;color:var(--text-strong);cursor:pointer;transition:background .12s;}
.menu .mi:hover,.menu .mi.s-hover{background:var(--surface-inset);}
.menu .mi.danger{color:var(--danger-text);}
.menu .mi svg{color:var(--text-muted);}
.menu .mi.danger svg{color:var(--danger);}

/* ---- Modal ---- */
.modal{background:var(--surface-card);border:1px solid var(--card-ring);border-radius:var(--radius-xl);padding:20px;box-shadow:var(--shadow-pop);width:100%;}
.modal h5{font-family:var(--dispf);font-size:18px;color:var(--text-strong);}
.modal p{font-size:13px;color:var(--text-muted);margin:8px 0 16px;line-height:1.5;}
.modal .row-btns{display:flex;gap:12px;justify-content:flex-end;}

/* ---- Toast ---- */
.toast{display:flex;align-items:center;gap:12px;background:var(--text-strong);color:var(--surface);border-radius:var(--radius-md);padding:12px 16px;font-size:13px;width:100%;box-shadow:var(--shadow-pop);}
.toast .t-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto;}

/* ---- Attribute list ---- */
.attrs{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;}
.attr{display:grid;grid-template-columns:120px 1fr;font-size:13px;}
.attr+.attr{border-top:1px solid var(--border-subtle);}
.attr dt{padding:12px 12px;background:var(--surface-inset);color:var(--text-muted);font-family:var(--monof);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;border-right:1px solid var(--border-subtle);display:flex;align-items:center;}
.attr dd{padding:12px 12px;color:var(--text-strong);display:flex;align-items:center;}

/* ---- Section repliable + ligne (pattern liste d'opérations) ---- */
.sec{margin:12px 12px;border-radius:var(--radius-xl);padding:16px 12px 12px;transition:background .35s;}
.sec.danger{background:var(--danger-surface);}
.sec.up{background:var(--up-panel);}
.sec.past{background:transparent;padding:8px 4px 0;}
.sec-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:0 4px;cursor:pointer;}
.sec-chev{display:flex;transition:transform .25s;}
.sec.collapsed .sec-chev{transform:rotate(-90deg);}
.sec.danger .sec-chev{color:var(--danger-icon);}
.sec.up .sec-chev{color:var(--up-icon);}
.sec.past .sec-chev{color:var(--text-faint);}
.sec-lbl{white-space:nowrap;font-family:var(--dispf);font-size:15px;font-weight:700;}
.sec.danger .sec-lbl{color:var(--danger-strong);}
.sec.up .sec-lbl{color:var(--up-strong);}
.sec.past .sec-lbl{color:var(--text);}
.sec-cnt{font-family:var(--monof);font-size:11px;color:var(--text);background:color-mix(in oklch, var(--surface-card) 70%, transparent);padding:4px 8px;border-radius:999px;}
.sec.past .sec-cnt{background:var(--surface-inset);}
.sec.up .sec-cnt{background:var(--up-chip-bg);color:var(--up-chip-text);}
[data-theme="light"] .sec.danger .sec-cnt{background:#fff;color:var(--danger);}
[data-theme="light"] .sec.up .sec-cnt{background:#fff;color:var(--up);}
.rows{display:flex;flex-direction:column;gap:12px;overflow:hidden;}
.sec.collapsed .rows{display:none;}
.row{display:flex;align-items:center;gap:12px;background:var(--surface-card);border:1px solid var(--card-ring);border-radius:var(--radius-lg);padding:12px;box-shadow:var(--shadow-card);cursor:pointer;text-decoration:none;transition:box-shadow .15s,transform .05s;}
.row:hover,.row.s-hover{box-shadow:var(--shadow-pop);}
.row:active,.row.s-active{transform:translateY(1px);}
.sec.past .row{box-shadow:none;}
.row-vic{width:44px;height:44px;border-radius:var(--radius-md);background:var(--surface-inset);color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.sec.danger .row{border-color:var(--danger-ring);}
[data-theme="light"] .sec.danger .row{border-color:transparent;}
[data-theme="light"] .sec.past .row{box-shadow:var(--shadow-card);}
.sec.danger .row-vic{background:var(--danger-chip-bg);color:var(--danger-text);}
.sec.danger .sec-cnt{background:var(--danger-chip-bg);color:var(--danger-chip-text);}
.row-main{flex:1;min-width:0;}
.row-title{font-size:16px;font-weight:600;color:var(--text-strong);line-height:1.25;}
.row-veh{font-size:13px;color:var(--text-muted);margin-top:4px;}
.row-delta{font-family:var(--monof);font-size:12px;color:var(--text-muted);margin-top:4px;}
.sec.danger .row-delta{color:var(--danger-strong);font-weight:600;}
.sec.up .row-delta{color:var(--up-text);}
.passe-meta{text-align:right;flex:0 0 auto;}
.pm-date{font-family:var(--monof);font-size:12px;color:var(--text);display:flex;gap:4px;align-items:center;justify-content:flex-end;white-space:nowrap;}
.pm-date svg{color:var(--text-faint);}
.pm-km{font-family:var(--monof);font-size:11px;color:var(--text-faint);margin-top:4px;display:flex;gap:8px;align-items:center;justify-content:flex-end;white-space:nowrap;}
.pm-km .clip{color:var(--brand);}

/* =============================================================================
   5 · ÉTATS GÉNÉRIQUES — ajout v0.2
   Tous consomment UNIQUEMENT la couche 2. Doublés en classes forcées .s-* pour
   documentation statique dans le showroom.
   ============================================================================= */

/* ---- 5.1 · Field en erreur (champ obligatoire manquant / valeur refusée) ----
   .field.has-error teinte le label, le contrôle et son focus ring en danger.
   Message inline porté par .ferror (icône + texte). */
.field.has-error > label{color:var(--danger-text);}
.field.has-error > label .req.on{color:var(--danger);}
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea,
.field.has-error .input-affix{border-color:var(--danger);}
.field.has-error .input:focus,.field.has-error .input.s-focus,
.field.has-error .select:focus,.field.has-error .select.s-focus,
.field.has-error .textarea:focus,.field.has-error .textarea.s-focus,
.field.has-error .input-affix:focus-within,.field.has-error .input-affix.s-focus{
  border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in oklch, var(--danger) 32%, transparent);}
.ferror{display:flex;align-items:flex-start;gap:8px;font-family:var(--bodyf);font-size:12px;line-height:1.4;color:var(--danger-text);font-weight:500;}
.ferror svg{flex:0 0 auto;color:var(--danger);margin-top:1px;}
/* Variante avertissement non bloquant (confirmation, pas un refus) */
.fwarn{display:flex;align-items:flex-start;gap:8px;font-family:var(--bodyf);font-size:12.5px;line-height:1.45;color:var(--warning-text);font-weight:500;background:var(--warning-chip-bg);border-radius:var(--radius-sm);padding:8px 12px;}
.fwarn svg{flex:0 0 auto;color:var(--warning-icon);margin-top:1px;}
.fwarn .fw-actions{display:flex;gap:8px;margin-top:8px;}

/* ---- 5.2 · Champ verrouillé / lecture seule ----
   Pré-rempli, NON modifiable, NON ouvrable. Distinct de :disabled (qui signale
   « indisponible » à 40% d'opacité) : ici le contenu est lisible et affirmé,
   avec cadenas. Fond inset, curseur défaut, pas de focus ring. */
.lockfield{display:flex;align-items:center;gap:12px;height:44px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-inset);padding:0 16px;cursor:default;user-select:none;}
.lockfield .lk-val{flex:1;min-width:0;font-family:var(--bodyf);font-size:14px;font-weight:500;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lockfield .lk-val small{font-weight:400;color:var(--text-muted);}
.lockfield .lk-ic{flex:0 0 auto;color:var(--text-faint);display:flex;}
.lockfield .lk-pill{flex:0 0 auto;font-family:var(--monof);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-card);border:1px solid var(--border-subtle);padding:4px 8px;border-radius:var(--radius-full);}
/* Mention de verrouillage sous le champ */
.lockhint{display:flex;align-items:center;gap:8px;font-family:var(--monof);font-size:11px;color:var(--text-muted);}
.lockhint svg{flex:0 0 auto;color:var(--text-faint);}

/* ---- 5.3 · Option de toggle désactivée (segmented) ----
   Une option du toggle binaire devient indisponible (ex. « Depuis le plan »
   sans plan rattaché). Note explicative + raccourci portés par .seg-note. */
.segmented button:disabled,.segmented button.s-disabled{opacity:.4;cursor:default;pointer-events:none;}
.segmented button:disabled[aria-pressed="true"]{background:transparent;box-shadow:none;color:var(--text-faint);}
.seg-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--monof);font-size:11px;color:var(--text-muted);margin-top:8px;}
.seg-note svg{flex:0 0 auto;color:var(--text-faint);}
.seg-note a{font-family:var(--bodyf);font-weight:600;font-size:12px;color:var(--brand);text-decoration:none;letter-spacing:0;}
.seg-note a:hover{text-decoration:underline;}

/* ---- 5.4 · Borne d'input numérique ----
   Hint de borne (valeur plancher/plafond) sur un champ numérique. Le
   dépassement bascule le field en .has-error et affiche un .ferror explicatif.
   La borne elle-même est appliquée côté écran (attr min + garde JS). */
.fhint.bound{display:flex;align-items:center;gap:8px;color:var(--text-muted);}
.fhint.bound svg{flex:0 0 auto;color:var(--text-faint);}
.fhint.bound b{color:var(--text);font-weight:600;}

/* =============================================================================
   6 · ÉTATS GÉNÉRIQUES — ajout v0.3 (lot Véhicules + Plans)
   Tous consomment UNIQUEMENT la couche 2.
   ============================================================================= */

/* ---- 6.1 · Bannière de statut de formulaire (.fbanner) ----
   Bandeau pleine largeur en tête de formulaire. Quatre rôles sémantiques.
   Titre seul par défaut ; .fb-main p ajoute une explication ; .fb-action un lien.
   Distinct de .fwarn (qui qualifie UN champ) : ici on qualifie tout le formulaire. */
.fbanner{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 16px;border-radius:var(--radius-md);font-family:var(--bodyf);font-size:13px;line-height:1.45;}
.fbanner .fb-ic{flex:0 0 auto;display:flex;margin-top:1px;}
.fbanner .fb-main{flex:1;min-width:0;}
.fbanner .fb-main b{display:block;font-weight:700;}
.fbanner .fb-main p{margin-top:4px;font-size:12px;opacity:.82;text-wrap:pretty;}
.fbanner .fb-action{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-weight:700;font-size:12px;color:inherit;text-decoration:none;cursor:pointer;}
.fbanner .fb-action:hover{text-decoration:underline;}
.fbanner.info{background:var(--brand-soft);color:var(--brand-soft-text);}
.fbanner.info .fb-ic{color:var(--brand);}
.fbanner.warn{background:var(--warning-chip-bg);color:var(--warning-text);}
.fbanner.warn .fb-ic{color:var(--warning-icon);}
.fbanner.error{background:var(--danger-chip-bg);color:var(--danger-text);}
.fbanner.error .fb-ic{color:var(--danger);}
.fbanner.success{background:var(--success-chip-bg);color:var(--success-chip-text);}
.fbanner.success .fb-ic{color:var(--success);}

/* ---- 6.2 · Voile de dialogue (.scrim) + modale danger ----
   Voile assombrissant qui centre une .modal. L'hôte (écran/device) doit être
   position:relative pour que le voile se limite à sa surface. .modal existe déjà
   (section 4) ; on lui ajoute l'icône d'en-tête optionnelle (.m-ic) et la teinte
   danger du titre. La pile de boutons passe en colonne sur mobile (.row-btns.stack). */
.scrim{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in oklch, var(--color-neutral-950) 52%, transparent);animation:obole-fade .18s ease;}
.scrim[hidden]{display:none;}
.scrim .modal{max-width:332px;}
@keyframes obole-fade{from{opacity:0;}to{opacity:1;}}
.modal .m-ic{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:12px;background:var(--surface-inset);color:var(--text-muted);}
.modal .m-ic.danger{background:var(--danger-chip-bg);color:var(--danger);}
.modal.danger h5{color:var(--danger-strong);}
.modal .row-btns.stack{flex-direction:column-reverse;gap:8px;}
.modal .row-btns.stack .btn{width:100%;}

/* =============================================================================
   7 · GÉNÉRIQUES — ajout v0.4 (lot Auth + Réglages)
   Tous consomment UNIQUEMENT la couche 2.
   ============================================================================= */

/* ---- 7.1 · Champ mot de passe (.pwfield) ----
   Variante de .input-affix : un input type=password suivi d'un bouton de
   révélation (.pw-reveal) qui bascule masquer/afficher. Le bouton est un vrai
   contrôle focusable, distinct des affixes décoratifs (.lead/.trail/.unit).
   En erreur, le field passe en .field.has-error (bordure + ring danger hérités
   de la section 5.1, qui cible déjà .input-affix). */
.pw-reveal{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:-8px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-faint);cursor:pointer;transition:background .15s,color .15s;}
.pw-reveal:hover,.pw-reveal.s-hover{background:var(--surface-inset);color:var(--text-muted);}
.pw-reveal:focus-visible,.pw-reveal.s-focus{outline:none;box-shadow:0 0 0 3px var(--focus-ring);color:var(--text-muted);}
.pw-reveal .pw-on{display:none;}
.pw-reveal[aria-pressed="true"] .pw-off{display:none;}
.pw-reveal[aria-pressed="true"] .pw-on{display:flex;}