/* ============================================================================
   XERS-DENSITÉ — l'axe DENSITÉ + le MODE texte (RS-1, 2026-08-12)
   ----------------------------------------------------------------------------
   Directive RS-7 : « le xer doit s'adapter à CHAQUE TYPE DE PERSONNE — ceux qui
   veulent que du code, ceux qui veulent ultra-simple, ceux qui veulent ultra-
   complexe/dense (style interfaces chinoises : tout visible d'un coup) ».
   La densité est un axe ORTHOGONAL aux mondes : combinable (Gameboy-dense,
   Springboard-minimal). C'est le MÊME curseur que les priorités XUI
   (jOSXui.render() décale pmax : minimal -1 · simple = · dense +1 · expert 5).

   Piloté par resources/views/partials/_xer_bion.blade.php :
     jOSXer.setDensite(d) -> html[data-densite=minimal|simple|normal|dense|expert]
     jOSXer.setMode(m)    -> html[data-mode=texte] (visuel = attribut retiré)
   Cette feuille est chargée par un <link> injecté par _xer_bion (pré-paint,
   le layout reste intact). SANS html[data-densite]/html[data-mode] : elle est
   INERTE — rétro-compat totale, rien ne change.

   Mécanique douce : --xr-scale est déjà consommé par xerboxion.css
   (html{font-size:calc(100% * var(--xr-scale,1))}) -> tout ce qui est en rem
   suit. En plus : gaps + colonnes des grilles CONNUES (launcher .plx-grid,
   home .hm-lgrid/.hm-bgrid, galerie #xrg) — sélecteurs prudents, keyés
   html[data-densite=…] (spécificité suffisante, zéro !important de layout),
   testés mentalement contre springboard (aéré) et terminal (déjà dense).

   MODE TEXTE = un MODIFICATEUR, pas un thème de couleurs : les tokens --xr-*
   du monde actif restent. Mono partout, coins 2px là où c'est sûr, zéro
   ombre/glow/anim (les seuls !important — propriétés décoratives uniquement,
   ça ne casse aucune disposition de monde). « Purement du code. »
   ============================================================================ */


/* ##########################################################################
   1) DENSITÉ — l'échelle typo globale (relayée par html{font-size} en rem)
   ########################################################################## */

html[data-densite="minimal"]{--xr-scale:1.15}
html[data-densite="simple"]{--xr-scale:1.06}
/* normal : AUCUNE règle — le défaut du monde, comme sans attribut */
html[data-densite="dense"]{--xr-scale:.92}
html[data-densite="expert"]{--xr-scale:.85}


/* ── MINIMAL : gros, généreux — moins d'items visibles par écran ── */

html[data-densite="minimal"] .plx-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px}
html[data-densite="minimal"] .plx-tile .plx-ic{font-size:38px}
html[data-densite="minimal"] .hm-lgrid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:20px}
html[data-densite="minimal"] .hm-bgrid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:14px}
html[data-densite="minimal"] #xrg .xrg-grid{grid-template-columns:1fr;gap:14px}
html[data-densite="minimal"] #xrg .xrg-mini{height:110px}

/* ── SIMPLE : un peu plus d'air, mêmes colonnes ── */

html[data-densite="simple"] .plx-grid{gap:16px;padding:16px}
html[data-densite="simple"] .hm-lgrid{gap:16px}
html[data-densite="simple"] .hm-bgrid{gap:11px}

/* ── DENSE : gaps réduits, +1 colonne quand la largeur le permet
      (minmax plus petit -> l'auto-fill ajoute une colonne tout seul) ── */

html[data-densite="dense"] .plx-grid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;padding:10px}
html[data-densite="dense"] .hm-lgrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
html[data-densite="dense"] .hm-bgrid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px}
html[data-densite="dense"] #xrg .xrg-grid{grid-template-columns:repeat(3,1fr);gap:8px}
html[data-densite="dense"] #xrg .xrg-mini{height:64px}

/* ── EXPERT : gaps mini, tout visible — le style dense ASSUMÉ
      (interfaces « tout d'un coup ») ── */

html[data-densite="expert"] .plx-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:5px;padding:8px}
html[data-densite="expert"] .plx-tile .plx-ic{font-size:24px}
html[data-densite="expert"] .plx-tile .plx-ds{display:none}   /* la description saute -> plus de tuiles par écran */
html[data-densite="expert"] .hm-lgrid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:5px}
html[data-densite="expert"] .hm-bgrid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:4px}
html[data-densite="expert"] #xrg .xrg-grid{grid-template-columns:repeat(4,1fr);gap:6px}
html[data-densite="expert"] #xrg .xrg-mini{height:48px}
html[data-densite="expert"] #xrg .xrg-lbl{padding:5px 7px;font-size:.7rem}


/* ##########################################################################
   2) MODE TEXTE — « purement du code » : mono, plat, sobre. PAS un thème de
      couleurs (les tokens du monde actif restent), un modificateur combinable
      avec chaque monde ET chaque densité.
   ########################################################################## */

/* la police-token d'abord : tout ce qui consomme --xr-font-ui suit */
html[data-mode="texte"]{--xr-font-ui:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace}

/* mono sur le corps + les contrôles (button/input n'héritent pas de body) */
html[data-mode="texte"] body,
html[data-mode="texte"] button,
html[data-mode="texte"] input,
html[data-mode="texte"] select,
html[data-mode="texte"] textarea{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace}

/* zéro déco : ombres/glow/anims éteints — propriétés décoratives UNIQUEMENT,
   la disposition et les couleurs des mondes ne bougent pas */
html[data-mode="texte"] *,
html[data-mode="texte"] *::before,
html[data-mode="texte"] *::after{
  text-shadow:none!important;
  box-shadow:none!important;
  animation:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important}

/* coins 2px là où c'est SÛR (contrôles + tuiles/cartes connues) — pas de
   sélecteur universel : les ronds voulus (avatars, dots, cadran) restent ronds */
html[data-mode="texte"] button,
html[data-mode="texte"] input,
html[data-mode="texte"] select,
html[data-mode="texte"] textarea,
html[data-mode="texte"] .plx-tile,
html[data-mode="texte"] .hm-lt,
html[data-mode="texte"] .xrg-card,
html[data-mode="texte"] .xrg-sp,
html[data-mode="texte"] .xrb-opt,
html[data-mode="texte"] .xrg-fine{border-radius:2px}