/* AURUM — aurum-ui.css : composants unifiés prêts à l'emploi (P1 du canvas DA).
   Charger APRÈS tokens.css. Ne rien redéfinir ailleurs : toute nouvelle carte réutilise .c/.c-h/.c-b. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--text);background:var(--bg);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--gold);text-decoration:none}a:hover{color:#DCBB63}
:focus-visible{outline:none;box-shadow:var(--focus)}
/* ── primitives ── */
.mono{font-family:var(--font-data);font-variant-numeric:tabular-nums}
.num{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:500;font-size:var(--fs-num);white-space:nowrap}
/* SPEC-ONE-TYPE-1 — les deux composants de rôle. `.num` ci-dessus n'est PAS créé : il
   EXISTAIT déjà et la spec le REDÉFINIT — on le retarge, on n'en crée pas un second
   (sinon l'app porterait deux enrouleurs de nombres qui divergeraient).
   ⚠ CE FICHIER EST PARTAGÉ AVEC /app (public/app/index.html:482). MESURÉ : `.h-card`
   habille les 6 libellés du formulaire de connexion legacy (« Identifiant », « Mot de
   passe »…) et `.btn` ses 4 boutons primaires, dont « Entrer » — /app n'en surcharge
   aucun. Les libellés RÉTRÉCISSENT sous le swap (10px mono capitales .18em → 11,5px
   Plex Sans) et `#authScreen .h-card{display:block}` leur donne la largeur : c'est sûr,
   mais ça devait être DIT, pas découvert.
   ⚠ `.eyebrow` est un nom LIBRE (zéro occurrence dans public/one). Le quasi-homonyme
   `.one-eyebrow` (one.css) est du SCAFFOLD MORT — ne pas les confondre. */
.eyebrow{font-family:var(--font-ui);font-size:var(--fs-eyebrow);font-weight:600;line-height:1;letter-spacing:.15em;text-transform:uppercase;color:var(--c-label)}
.seal{font-family:var(--font-seal);font-weight:600}
.hero{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--fs-hero);letter-spacing:-.01em;white-space:nowrap}
.pos{color:var(--green)}.neg{color:var(--red)}.warn{color:var(--orange)}.dim{color:var(--text2)}.dim3{color:var(--text3)}
.h-card,.c-h .t{font-family:var(--font-ui);font-size:var(--fs-cardh);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--c-label)}
.sec{font-family:var(--font-seal);font-size:var(--fs-sec);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:600}
/* ── sigils moteurs ── */
.sig{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;flex:0 0 auto}
.sig svg{width:12px;height:12px}
.sig.lg{width:28px;height:28px;border-radius:7px}.sig.lg svg{width:16px;height:16px}
.sig.cockpit{color:var(--cockpit);background:rgba(201,168,76,.14)}
.sig.shield{color:var(--shield);background:rgba(47,163,127,.14)}
.sig.sword{color:var(--sword);background:rgba(78,156,208,.14)}
.sig.carry{color:var(--carry);background:rgba(52,211,153,.14)}
/* ── carte standard (grammaire unique) ── */
.c{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);position:relative;overflow:hidden}
.c>.acc{position:absolute;inset:0 0 auto 0;height:2px;background:var(--a,transparent)}
.c-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);min-height:42px}
.c-h .t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-h .r{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.c-b{padding:14px}
.c.flat>.c-h{border-bottom:none}
/* ── chips ── */
/* SPEC-ONE-TYPE-1 — LE REGISTRE SCANNÉ. Un chip n'est jamais de la prose : c'est un
   jeton qu'on BALAIE (« LONG », « PAPIER », « GELÉ · DÉSYNC », « ÉQUITÉS — »). Il partage
   donc la taille de l'eyebrow et de la méta d'en-tête, pas le plancher de LECTURE.
   Et c'est MESURÉ, pas esthétique : à 13px le chip `.degraded` rend 105px en `flex:0 0 auto`
   dans un en-tête de 278px à 320px, et il ne peut pas se replier. Le rétrécir par une
   ellipse tronquerait « ÉQUITÉS — », c'est-à-dire un marqueur d'ÉTAT DÉGRADÉ — la seule
   chose que ce dépôt interdit de masquer. C'est donc la TAILLE qui cède, pas l'aveu. */
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-ui);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.08em;padding:3px 7px;border-radius:var(--radius-chip);white-space:nowrap;background:var(--bg3);color:var(--text2);border:1px solid var(--border2);user-select:none}
.chip .d{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.chip.long,.chip.live{color:var(--green);background:var(--green-wash);border-color:transparent}
.chip.short{color:var(--red);background:var(--red-wash);border-color:transparent}
.chip.paper{color:var(--text2);background:var(--gray-wash);border-color:transparent}
.chip.protect,.chip.frozen,.chip.degraded{color:var(--orange);background:var(--orange-wash);border-color:transparent}
.chip.gold{color:var(--gold);background:var(--gold-wash);border-color:rgba(201,168,76,.28)}
.chip.wait{color:var(--gray);background:var(--gray-wash);border-color:transparent}
/* ── honnêteté ── */
.abs,.load{font-family:var(--font-data);font-variant-numeric:tabular-nums;color:var(--text3);font-weight:500}
/* `.info` EXISTE DEPUIS D1 et n'est PAS redéclaré par D3 (audit R1 : la version D3
   avait été écrite plus haut dans le fichier, donc ÉCRASÉE par celle-ci — glyphe mort,
   soulignement inattendu, et un test vert sur une règle que la cascade annulait).
   D3 ne fait que le POSER : `lexique.js` ajoute `.info` à tout [data-lex] porteur
   d'une DÉFINITION (3ᵉ entrée). Le ⓘ est un ::after — il n'entre pas dans
   textContent, donc la ré-application du lexique au franchissement des 900 px ne
   l'efface ni ne le duplique jamais. Toute évolution du marqueur se fait ICI, une
   seule fois. */
.info{border-bottom:1px dotted var(--text3);cursor:help}
/* SPEC-ONE-TYPE-1 — LISTE BLANCHE du plancher : un MARQUEUR, pas de la lecture.
   La taille d'un glyphe n'est pas une taille de lecture, et le monter à 13px décalerait
   la ligne de base de chaque libellé qui le porte (~30 hôtes [data-lex], posés
   dynamiquement). MAIS l'exception est CONDITIONNELLE À L'UNIFICATION : la MÊME
   affordance était servie à DEUX tailles et DEUX couleurs — 9px/--text3 (3,21:1 sur
   --bg2, illisible) ici, et 11px/--gold (8,22:1) dans ①. Une affordance d'honnêteté
   illisible est le DÉFAUT, pas l'exception : on l'aligne sur celle qui passe déjà. */
.info::after{content:'ⓘ';font-size:11px;color:var(--gold);margin-left:3px;vertical-align:1px}
/* Bulle de définition au tap (mobile : il n'y a pas de survol sous 900 px). Insérée
   par lexique.js APRÈS le bloc hôte du libellé — jamais dans un en-tête `.c-h`, qui
   est un flex à hauteur fixe 42 px où elle serait écrasée (mesuré : 19 px de haut
   pour 112 px de contenu). `grid-column:1/-1` la fait occuper toute la ligne quand
   l'hôte est une grille `.row` ; ignoré ailleurs. */
.lex-def{grid-column:1/-1;margin:6px 0 2px;padding:8px 10px;border:1px solid var(--border2);border-left:2px solid var(--gold-dim);border-radius:var(--radius-inner);background:var(--bg3);color:var(--text2);font-size:13px;line-height:1.5}
.fresh{font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--text3);white-space:nowrap}
.fresh.stale{color:var(--orange)}
/* ── ligne label/valeur : anti-chevauchement PAR CONSTRUCTION ── */
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid rgba(31,31,46,.7)}
.row:last-child{border-bottom:none}
.row>.k{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-label);color:var(--text2)}
.row>.v{flex:0 0 auto;font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--fs-num);font-weight:500;white-space:nowrap;text-align:right}
.row.two>.k{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ── ligne de trade + en-tête (mêmes grid-template-columns obligatoires) ── */
.th,.tl{display:grid;grid-template-columns:28px 88px 74px minmax(0,1fr) 96px 92px 80px;gap:12px;align-items:center;border-bottom:1px solid var(--border)}
.th{padding:9px 14px;font-family:var(--font-ui);font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--c-label);background:rgba(26,26,36,.5)}
.tl{padding:11px 14px;font-size:var(--fs-num)}
.tl:last-child{border-bottom:none}
.tl:hover{background:var(--bg3)}
.tl .sym{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:600}
.tl .meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);font-size:var(--fs-label)}
.th .n,.tl .n{text-align:right}
.tl .n{font-family:var(--font-data);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
/* ── jauge ── */
.gauge{display:grid;gap:6px}
.g-t{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:baseline}
.g-t .k{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text2)}
.g-t .v{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--fs-num);font-weight:600;white-space:nowrap}
.g-bar{height:6px;border-radius:3px;background:var(--bg4);overflow:hidden;position:relative}
.g-bar>i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--gold)}
.g-tick{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--text3)}
/* ── table KPI ── */
table.kpi{width:100%;border-collapse:collapse;font-size:var(--fs-num)}
table.kpi th{font-family:var(--font-ui);font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--c-label);text-align:right;padding:8px 10px;border-bottom:1px solid var(--border);font-weight:500}
table.kpi th:first-child{text-align:left}
table.kpi td{padding:9px 10px;border-bottom:1px solid rgba(31,31,46,.7);text-align:right;font-family:var(--font-data);font-variant-numeric:tabular-nums;white-space:nowrap}
table.kpi td:first-child{text-align:left;font-family:var(--font-ui);color:var(--text2);max-width:0;overflow:hidden;text-overflow:ellipsis}
table.kpi tr:last-child td{border-bottom:none}
/* ── fil d'événements ── */
.ev{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;padding:10px 0;border-bottom:1px solid rgba(31,31,46,.7);align-items:start}
.ev:last-child{border-bottom:none}
.ev .tx{min-width:0;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev .tx s{text-decoration:none;color:var(--text2)}
.ev .tm{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--fs-meta);color:var(--text3);white-space:nowrap;padding-top:2px}
/* ── boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;border-radius:var(--radius-inner);border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.1em;cursor:pointer;white-space:nowrap;user-select:none}
.btn:hover{background:var(--bg4)}.btn:active{background:var(--bg4)}
.btn.pri{background:var(--gold);color:#100D02;border-color:transparent}
.btn.danger{color:var(--red);border-color:rgba(239,68,68,.4);background:var(--red-wash)}
.btn.long{color:var(--green);border-color:rgba(34,197,94,.4);background:var(--green-wash)}
.btn.short{color:var(--red);border-color:rgba(239,68,68,.4);background:var(--red-wash)}
.btn.wide{width:100%}
/* ── modale · toast · chat ── */
.modal{width:min(400px,92vw);background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:var(--sh3);overflow:hidden}
.modal .mh{padding:16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center}
.modal .mb{padding:16px;font-size:var(--fs-num);color:var(--text2)}
.modal .mf{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;background:rgba(26,26,36,.4)}
.verbatim{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:13px;color:var(--text);background:var(--bg);border:1px solid var(--border);border-left:2px solid var(--orange);border-radius:6px;padding:10px;margin:10px 0}
.toast{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:start;width:min(340px,92vw);background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-inner);box-shadow:var(--sh2);padding:12px}
.toast.ok{border-left:2px solid var(--green)}.toast.warn{border-left:2px solid var(--orange)}.toast.err{border-left:2px solid var(--red)}
.bub{max-width:78%;padding:11px 13px;border-radius:12px;font-size:var(--fs-num);line-height:1.55}
.bub.gua{background:var(--bg3);border:1px solid var(--border);border-top-left-radius:4px}
.bub.me{background:var(--gold-wash);border:1px solid rgba(201,168,76,.28);border-top-right-radius:4px;margin-left:auto}
.bub .who{font-family:var(--font-ui);font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--c-label);margin-bottom:5px}
/* ── mobile ≤ 899px : registre court, une colonne, chrome iOS ── */
@media(max-width:899px){
.desktop-only{display:none!important}
.espace{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s3) 14px calc(var(--s4) + 120px)}
.bub{max-width:100%}
.c-b{padding:12px}.c-h{padding:11px 12px}
.exp{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-family:var(--font-ui);font-size:13px;letter-spacing:.14em;color:var(--text3);border-top:1px solid var(--border);cursor:pointer}
.topbar-m{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-t)) 14px 10px;border-bottom:1px solid var(--border);background:var(--bg2)}
.topbar-m .ttl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-seal);font-size:var(--fs-brand);letter-spacing:.22em;text-transform:uppercase}
.act-bar{position:fixed;left:0;right:0;bottom:calc(60px + var(--safe-b));z-index:21;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 14px;border-top:1px solid var(--border);background:rgba(10,10,15,.96)}
.tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:22;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border);background:rgba(17,17,24,.98);padding-bottom:var(--safe-b)}
.tab-bar a{min-height:52px;display:grid;place-items:center;gap:3px;font-family:var(--font-ui);font-size:13px;letter-spacing:.1em;color:var(--text3);padding-top:8px}
.tab-bar a.on{color:var(--gold)}.tab-bar a svg{width:17px;height:17px}
.scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
input,textarea,select{font-size:16px}
}
html,body{min-height:100dvh}