/* Grammaire partagée (convergence atlas, cf. docs/claude-design.md) : tokens canoniques
   + classes .inst-*, générés par `pnpm --filter @eanexus/protocol gen:tokens`.
   Depuis 2026-07, les primitives ci-dessous (card/button/input/pill) sont posées
   sur la grammaire Instrument (paliers, coins nets --radius-inst, focus de marque). */
@import "tokens.generated.css";
@import "instrument.generated.css";
:root{--bg:#0c1018;--panel:#141a26;--line:#243044;--txt:#e7ecf5;--mut:#8ba0c0;--acc:#3DE08A;--acc2:#FFC83D;
  /* Marque agence exprimée dans le vocabulaire canonique : déclarée après l'import,
     elle re-skinne les tokens (même mécanisme que l'injection par app côté atlas).
     Les classes .inst-* rendent donc ici en vert agence, pas en bleu Ultra Derby. */
  --primary:var(--acc);--primary-foreground:#052014;--primary-2:var(--acc2);
  --background:var(--bg);--foreground:var(--txt);--muted-foreground:var(--mut);
  --border:var(--line);--border-strong:var(--line);--warning:var(--acc2);
  --destructive:#d32f2f;--destructive-foreground:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.5 'Inter',system-ui,sans-serif}
header{display:flex;gap:14px;align-items:center;padding:9px 20px;border-bottom:1px solid var(--inst-line);background:var(--inst-1);position:sticky;top:0;z-index:20}
header h1{font-size:16px;margin:0;font-weight:800;white-space:nowrap;padding-right:12px;border-right:1px solid var(--inst-line)}
header nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
header nav a{color:var(--mut);text-decoration:none;font-weight:600;font-size:13.5px;padding:6px 11px;border-radius:8px;transition:color .12s ease,background-color .12s ease}
header nav a:hover{color:var(--txt);background:color-mix(in oklch,var(--txt) 7%,transparent)}
header nav a.on{color:var(--primary);background:color-mix(in oklch,var(--primary) 13%,transparent)}
.wrap{max-width:920px;margin:24px auto;padding:0 22px;display:grid;gap:20px}
/* Carte = .inst-panel (palier 1 + filet + reflet 1px + coins nets) */
.card{background:var(--inst-1);border:1px solid var(--inst-line);border-radius:var(--radius-inst);box-shadow:inset 0 1px 0 var(--inst-top);padding:18px 20px}
.card h2{margin:0 0 12px;font-size:15px;font-weight:800;letter-spacing:.02em}
label,.lbl{display:block;font-size:12px;color:var(--mut);margin:10px 0 4px;font-weight:600}
/* Champs = .inst-input (fond palier 0, focus de marque) */
input,textarea,select{width:100%;background:var(--inst-0);border:1px solid var(--inst-line);border-radius:var(--radius-inst);color:var(--txt);padding:9px 11px;font:inherit;transition:border-color .15s ease,box-shadow .15s ease}
input:focus,textarea:focus,select:focus{outline:none;border-color:color-mix(in oklch,var(--primary) 70%,transparent);box-shadow:0 0 0 2px color-mix(in oklch,var(--primary) 22%,transparent)}
textarea{min-height:120px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
/* Boutons = .inst-btn (plats, coins nets, focus visible de marque) */
button{background:var(--primary);color:var(--primary-foreground);border:0;border-radius:var(--radius-inst);padding:9px 15px;font-weight:700;cursor:pointer;transition:background-color .15s ease,box-shadow .2s ease}
button:hover{background:color-mix(in oklch,var(--primary) 88%,white)}
button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--inst-0),0 0 0 4px color-mix(in oklch,var(--primary) 65%,transparent)}
button.sec{background:transparent;color:var(--txt);border:1px solid var(--inst-line-strong)}
button.sec:hover{background:color-mix(in oklch,var(--txt) 6%,transparent);border-color:color-mix(in oklch,var(--primary) 60%,transparent)}
button.warn{background:var(--destructive);color:var(--destructive-foreground)}
button.warn:hover{background:color-mix(in oklch,var(--destructive) 88%,white)}
button:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;gap:7px;align-items:center;padding:4px 11px;border-radius:999px;background:var(--inst-0);border:1px solid var(--inst-line);font-size:13px}
.pill.on{border-color:var(--primary);color:var(--primary)}
.pill.warn{border-color:var(--inst-warning);color:var(--inst-warning)}
.mut{color:var(--mut)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-size:12px;font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chip{padding:3px 9px;border-radius:var(--radius-inst);background:var(--inst-0);border:1px solid var(--inst-line);font-size:12px;margin:2px;display:inline-block}
.ok{color:var(--acc)}.no{color:#ff6b6b}
.hof-row{padding:6px 0;border-bottom:1px solid var(--line);color:var(--txt);display:flex;align-items:center;gap:8px}
.hof-row:last-child{border-bottom:0}
.hof-row .hof-rk{display:inline-block;min-width:2em;color:var(--acc2);font-weight:800}
.hof-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--line)}
.hof-av-ph{display:inline-flex;align-items:center;justify-content:center;color:var(--txt);font-weight:800;font-size:15px;text-transform:uppercase}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
/* Sélecteur de langue FR/EN (injecté dans le header par /i18n.js). margin-left:auto le pousse à
   droite ; si une pastille l'a déjà fait, il se cale après elle. */
.lang-sw{margin-left:auto;display:inline-flex;gap:4px;flex:none}
.lang-sw .lang-btn{background:transparent;border:1px solid var(--inst-line);color:var(--mut);
  border-radius:var(--radius-inst);padding:2px 8px;font-size:11px;font-weight:800}
.lang-sw .lang-btn.on{border-color:var(--primary);color:var(--primary)}