/* ============================================================
   ZONE 37 — FEUILLE COMMUNE
   Palette, coquille (rail + barre + pied), emblème et
   composants réutilisés par toutes les pages du terminal.
   Le contenu propre à chaque page reste dans son fichier.
   ============================================================ */
:root{
  /* — couleurs — */
  --void:#1b1718;
  --petrol:#231f20;
  --petrol-2:#2a2627;
  --line:#767676;
  --line-dim:#35302f;
  --accent:#c12025;
  --accent-2:#9a1a1e;
  --ghost:#8f8b8a;          /* remonté : #8f8b8a passait sous le seuil de lisibilité */
  --shard:#c12025;
  --ink:#f1f4f9;
  --ok:#4ad07a;
  --warn:#d99a3c;

  /* — polices — */
  --ui:'Special Elite',monospace;      /* texte d'interface (variable 300..700) */
  --disp:'Bebas Neue',Impact,sans-serif;      /* affichage : titres, sigles, chiffres */

  /* — échelle typographique —
     Special Elite (machine à écrire) a une hauteur d'x moyenne et un
     rendu un peu appuyé : ces tailles lui vont ; ne pas les rabaisser
     « pour faire terminal ». */
  --t-tag:.62rem;      /* étiquettes, sigles, mentions */
  --t-fine:.68rem;     /* pied, méta, cartouches */
  --t-ui:.74rem;       /* navigation, boutons, tableaux */
  --t-body:.82rem;     /* corps de lecture */

  /* — interlettrage — Special Elite supporte l'espacement des labels */
  --ls-wide:.16em;
  --ls-mid:.12em;
  --ls-tight:.06em;

  /* signature MIXTE : hachures des en-têtes, dérivées de l'accent */
  --hatch:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--accent) 18%,transparent) 0 7px,transparent 7px 14px);

  --rail:266px;
}

/* ============================================================
   PALETTES — déclinaisons DANS la charte (noir · rouge · gris · blanc)
   Le défaut ci-dessus est « rouge ». Chaque variante ne redéfinit que
   des variables de couleur : elle s'applique donc à toutes les pages
   (et aux fenêtres du bureau). Pilotée par html[data-skin] — voir
   Z37.setSkin() ; le choix est mémorisé dans localStorage (pa-skin).
   ============================================================ */

/* ACIER — monochrome : les accents rouges passent en gris acier */
html[data-skin="acier"]{
  --accent:#aab0b6;
  --accent-2:#767676;
  --shard:#aab0b6;
}

/* ENCRE — noir profond, rouge plus vif, contraste relevé */
html[data-skin="encre"]{
  --void:#141112;
  --petrol:#1d1a1b;
  --petrol-2:#242021;
  --line-dim:#2c2827;
  --accent:#e0272d;
  --accent-2:#b21d22;
}

/* BRUME — base gris-pétrole relevée, plus douce, accent rouge conservé */
html[data-skin="brume"]{
  --void:#2b2728;
  --petrol:#332f30;
  --petrol-2:#3b3738;
  --line-dim:#48423f;
  --ghost:#bdb9b8;
}

/* CARBONE — surface = le noir exact de la charte (#231F20), accent rouge */
html[data-skin="carbone"]{
  --void:#231f20;
  --petrol:#2a2627;
  --petrol-2:#322d2e;
  --line-dim:#3a3433;
}

/* BRAISE — base noire à sous-teinte rouge, rouge vif (ambiance de braise) */
html[data-skin="braise"]{
  --void:#181113;
  --petrol:#221718;
  --petrol-2:#2a1c1d;
  --line-dim:#33211f;
  --accent:#e0272d;
  --accent-2:#b21d22;
}

/* CENDRE — monochrome pâle : accents proches du blanc de la charte */
html[data-skin="cendre"]{
  --accent:#cfd3d9;
  --accent-2:#9aa0a6;
  --shard:#cfd3d9;
}

/* BÉTON — monochrome intégral : base gris relevée + accents gris acier */
html[data-skin="beton"]{
  --void:#2b2728;
  --petrol:#332f30;
  --petrol-2:#3b3738;
  --line-dim:#48423f;
  --ghost:#bdb9b8;
  --accent:#aab0b6;
  --accent-2:#767676;
  --shard:#aab0b6;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}
body{
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(50,44,42,.4) 0%, transparent 60%),
    var(--void);
  color:var(--ghost);
  font-family:var(--ui);
  font-size:16px;
  /* Bebas Neue n'a qu'une graisse : sans ça le navigateur épaissirait
     lui-même les font-weight, et le rendu baverait */
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  display:flex;
}

/* — sélection et focus : deux oublis de la version précédente — */
::selection{background:var(--accent-2);color:#fff}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* les champs ont déjà leur propre halo de focus */
.input:focus-visible,.select:focus-visible{outline:none}

/* — barres de défilement : celles du système jurent sur ce fond — */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-dim);border:2px solid transparent;
  background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--line);background-clip:content-box}

/* ============================================================
   MODE FENÊTRE
   Quand la page est ouverte dans le bureau (&win=1), le bureau
   fournit déjà le chrome : rail, barre du haut, pied et voiles
   sont masqués, la page ne garde que son contenu.
   ============================================================ */
body.win{background:transparent;display:block}
body.win .rail,body.win .topbar,body.win .foot,body.win .grain{display:none}
body.win::before{display:none}
body.win .main{min-height:0;display:block}
body.win .content{padding:1.3rem;max-width:none}
/* la fenêtre gère son propre défilement */
body.win{height:auto;overflow-x:hidden}

/* léger balayage de terminal : présent mais discret, loin du grain
   lourd du style d'origine — « un chouille terminal » */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:89;
  background:repeating-linear-gradient(rgba(0,0,0,.10) 0 1px,transparent 1px 3px);
}
.grain{
  position:fixed;inset:-100px;pointer-events:none;z-index:90;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift .5s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}33%{transform:translate(-40px,25px)}
  66%{transform:translate(30px,-35px)}100%{transform:translate(0,0)}
}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:.25}}

/* ============================================================
   RAIL LATÉRAL
   ============================================================ */
.rail{
  width:var(--rail);flex-shrink:0;height:100vh;position:sticky;top:0;
  display:flex;flex-direction:column;
  border-right:1px solid var(--line-dim);
  background:linear-gradient(180deg,rgba(35,31,32,.5),rgba(27,23,24,.9));
  z-index:20;
}
.rail-logo{
  padding:1.8rem 1.5rem 1.4rem;display:flex;flex-direction:column;
  align-items:center;gap:.9rem;border-bottom:1px solid var(--line-dim);
}
.emblem{width:94px;aspect-ratio:1;--lg-ink:var(--ink)}
.emblem svg{width:100%;height:100%;overflow:visible;display:block}
.rail-wordmark{text-align:center}
.rail-wordmark b{
  display:block;font-family:var(--disp);font-weight:400;font-size:1.6rem;
  letter-spacing:.26em;text-indent:.26em;color:var(--ink);line-height:1;
}
.rail-wordmark span{
  display:block;margin-top:.45rem;font-size:.56rem;
  letter-spacing:var(--ls-wide);color:var(--ghost);
}

.rail-id{
  padding:1rem 1.4rem;border-bottom:1px solid var(--line-dim);
  display:flex;align-items:center;gap:.9rem;text-decoration:none;
  transition:background .2s;
}
.rail-id:hover{background:rgba(193,32,37,.1)}
.rail-id .acr{
  font-family:var(--disp);font-weight:400;font-size:2rem;line-height:.9;
  color:var(--accent);text-shadow:0 0 18px rgba(226,58,63,.4);
}
.rail-id .nm{font-size:.6rem;letter-spacing:var(--ls-mid);line-height:1.55;color:var(--ghost)}

.rail-nav{flex:1;overflow-y:auto;padding:.9rem .7rem}
.rail-nav a{
  position:relative;display:flex;align-items:center;gap:.8rem;
  padding:.66rem .8rem;text-decoration:none;color:var(--ghost);
  font-size:var(--t-tag);letter-spacing:var(--ls-mid);
  transition:color .18s,background .18s;
}
.rail-nav a svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6}
.rail-nav a::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:2px;height:70%;background:var(--accent);transition:transform .2s;
}
.rail-nav a:hover{color:var(--ink);background:rgba(193,32,37,.1)}
.rail-nav a:hover::before{transform:translateY(-50%) scaleY(1)}
.rail-nav a.on{color:var(--ink);background:rgba(193,32,37,.16)}
.rail-nav a.on::before{transform:translateY(-50%) scaleY(1)}
.rail-nav a .badge{
  margin-left:auto;font-size:.56rem;font-weight:700;letter-spacing:.02em;
  color:var(--void);background:var(--accent);
  min-width:1.25em;text-align:center;padding:.12rem .32rem;border-radius:2px;
}
.nav-sep{margin:1rem .8rem .5rem;font-size:.54rem;letter-spacing:var(--ls-wide);color:var(--line)}

/* Module sans source serveur : présent, mais visiblement hors service.
   Même gabarit que les liens du rail, pour que le rythme ne casse pas. */
.rail-nav .inert{
  position:relative;display:flex;align-items:center;gap:.8rem;
  padding:.66rem .8rem;color:var(--line-dim);
  font-size:var(--t-tag);letter-spacing:var(--ls-mid);cursor:not-allowed;
}
.rail-nav .inert svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6}
.rail-nav .inert .soon{
  margin-left:auto;font-size:.44rem;letter-spacing:.1em;color:var(--line);
  border:1px solid var(--line-dim);padding:.1rem .3rem;white-space:nowrap;
}

.rail-foot{border-top:1px solid var(--line-dim);padding:.9rem 1rem}
.rail-user{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.avatar{
  width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--accent);
  font-family:var(--disp);font-size:.85rem;letter-spacing:.04em;
}
.rail-user .who{min-width:0}
.rail-user .who b{
  display:block;font-size:.68rem;font-weight:600;color:var(--ink);
  letter-spacing:var(--ls-tight);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rail-user .who span{
  display:block;font-size:.54rem;color:var(--ghost);letter-spacing:.08em;margin-top:.2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.logout{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.58rem;border:1px solid var(--line-dim);color:var(--ghost);
  font-size:.6rem;letter-spacing:var(--ls-mid);text-decoration:none;
  transition:color .2s,border-color .2s,background .2s;
}
/* sans taille ni trait, un <svg> nu s'étale et se peint en noir :
   invisible sur ce fond, et le bouton enfle */
.logout svg{width:13px;height:13px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:1.6}
.logout:hover{color:var(--accent);border-color:var(--line);background:rgba(193,32,37,.1)}

/* ============================================================
   COLONNE PRINCIPALE
   ============================================================ */
.main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}

.topbar{
  position:sticky;top:0;z-index:15;
  display:flex;align-items:center;gap:1.5rem;
  padding:.9rem 1.8rem;border-bottom:1px solid var(--line-dim);
  background:rgba(27,23,24,.85);backdrop-filter:blur(8px);
  font-size:var(--t-fine);letter-spacing:var(--ls-mid);
}
.crumb{color:var(--ghost)}
.crumb b{color:var(--ink);font-weight:600}
.crumb i{color:var(--line);font-style:normal;margin:0 .5rem}
.topbar .spacer{flex:1}
.op{color:var(--ghost)}
.op b{color:var(--accent);font-weight:600}
.node{display:flex;align-items:center;gap:.55rem;color:var(--ghost);white-space:nowrap}
.node::before{content:'';width:6px;height:6px;background:var(--ok);
  box-shadow:0 0 8px var(--ok);animation:blink 2.4s steps(2) infinite}
.topbar .clock{color:var(--ink);letter-spacing:var(--ls-mid);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.content{flex:1;padding:2rem 1.8rem 3rem;max-width:1500px;width:100%}

.foot{
  margin-top:auto;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:.9rem 1.8rem;border-top:1px solid var(--line-dim);
  font-size:.6rem;letter-spacing:var(--ls-mid);color:var(--line);
}
.foot .spacer{flex:1}
.foot a{color:var(--line);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--accent)}

/* ============================================================
   EN-TÊTE DE PAGE
   ============================================================ */
.hero{
  display:flex;align-items:flex-end;gap:1.6rem;flex-wrap:wrap;
  padding-bottom:1.3rem;margin-bottom:1.7rem;border-bottom:1px solid var(--line-dim);
}
.hero h1{
  font-family:var(--disp);font-weight:400;color:var(--ink);
  font-size:clamp(2rem,4vw,3.1rem);letter-spacing:.04em;line-height:.95;
}
.hero h1 em{font-style:normal;color:var(--accent);text-shadow:0 0 30px rgba(193,32,37,.4)}
.hero .sub{font-size:var(--t-tag);letter-spacing:var(--ls-mid);color:var(--ghost);margin-top:.6rem}
.hero .right{margin-left:auto;text-align:right;font-size:var(--t-tag);
  letter-spacing:var(--ls-mid);color:var(--ghost);line-height:1.7}
.hero .right b{color:var(--ink);font-weight:600}

.sec-title{
  display:flex;align-items:center;gap:1rem;margin-bottom:1rem;
  font-size:.6rem;letter-spacing:var(--ls-wide);color:var(--ghost);
}
.sec-title::after{content:'';flex:1;height:1px;background:var(--line-dim)}

/* ============================================================
   COMPOSANTS COMMUNS
   ============================================================ */

/* — panneau — épuré : fond à peine marqué, on se repose sur le filet */
.panel{
  position:relative;border:1px solid var(--line-dim);
  background:rgba(38,34,35,.28);
}
/* en-tête de panneau : hachures béton (signature du thème) */
.panel-head{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--line-dim);
  background:var(--hatch);
  font-size:.6rem;letter-spacing:var(--ls-wide);color:var(--ghost);
}
.panel-head b{color:var(--ink);font-weight:600}
.panel-head .spacer{flex:1}
.panel-body{padding:1.1rem}

/* — boutons — */
.btn{
  position:relative;overflow:hidden;cursor:pointer;font:inherit;
  font-size:.66rem;font-weight:600;letter-spacing:var(--ls-mid);color:var(--ink);
  background:none;border:1px solid var(--line);padding:.65rem 1.15rem;
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  transition:color .25s,border-color .2s,box-shadow .25s;
}
.btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--accent);
  transform:translateX(-101%);transition:transform .3s cubic-bezier(.6,0,.2,1);z-index:-1;
}
.btn:hover{color:#1b1718;border-color:var(--accent);box-shadow:0 0 24px rgba(193,32,37,.3)}
.btn:hover::before{transform:translateX(0)}
.btn:active{transform:translateY(1px)}
.btn.ghost{border-color:var(--line-dim);color:var(--ghost)}
.btn.ghost:hover{color:var(--accent);border-color:var(--line);box-shadow:none}
.btn.ghost::before{display:none}

/* — champs — */
.input,.select{
  font:inherit;font-size:var(--t-ui);letter-spacing:var(--ls-tight);color:var(--ink);
  background:rgba(35,31,32,.5);border:1px solid var(--line-dim);
  padding:.62rem .8rem;transition:border-color .2s,box-shadow .2s,background .2s;
}
.input::placeholder{color:#6c6663}
.input:focus,.select:focus{
  outline:none;border-color:var(--accent-2);background:rgba(35,31,32,.8);
  box-shadow:0 0 0 1px rgba(193,32,37,.22);
}
.search{position:relative;display:flex;align-items:center;flex:1;min-width:200px}
.search svg{position:absolute;left:.75rem;width:13px;height:13px;stroke:var(--line);
  fill:none;stroke-width:1.8;pointer-events:none;transition:stroke .2s}
.search .input{width:100%;padding-left:2.2rem}
.search:focus-within svg{stroke:var(--accent)}

/* — tableau — */
.table{width:100%;border-collapse:collapse;font-size:var(--t-ui)}
.table th{
  text-align:left;font-weight:600;font-size:.56rem;letter-spacing:var(--ls-wide);
  color:var(--ghost);padding:.8rem 1.1rem;border-bottom:1px solid var(--line-dim);
  white-space:nowrap;
}
.table td{padding:.8rem 1.1rem;border-bottom:1px solid var(--line-dim);color:var(--ghost)}
.table tbody tr{transition:background .15s}
.table tbody tr:hover{background:rgba(193,32,37,.09)}
/* une ligne qui ouvre une fiche doit le dire */
.table tbody tr.clic{cursor:pointer}
.table tbody tr.clic:hover .num{color:var(--accent)}
.table tbody tr.clic:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.table td b{color:var(--ink);font-weight:600}
.table .num{font-family:var(--disp);font-size:.95rem;color:var(--line);letter-spacing:.04em}
.table a{color:var(--accent);text-decoration:none}
.table a:hover{text-decoration:underline}

/* — pastilles d'état — */
.pill{
  display:inline-flex;align-items:center;gap:.42rem;
  font-size:.54rem;font-weight:600;letter-spacing:var(--ls-mid);
  padding:.26rem .55rem;border:1px solid var(--line-dim);color:var(--ghost);
  white-space:nowrap;
}
.pill::before{content:'';width:5px;height:5px;background:currentColor;flex-shrink:0}
.pill.ok{color:var(--ok);border-color:rgba(74,208,122,.3)}
.pill.warn{color:var(--warn);border-color:rgba(217,154,60,.3)}
.pill.hot{color:var(--accent);border-color:rgba(226,58,63,.35)}
.pill.off{color:var(--line)}

/* — indicateurs — */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:1.7rem}
/* indicateurs — épuré : sans fond, réduits à un filet rouge en tête */
.kpi{
  position:relative;overflow:hidden;padding:1rem 1.1rem;
  border:1px solid var(--line-dim);border-top:2px solid var(--line);
  background:transparent;transition:border-color .2s;
}
.kpi:hover{border-color:var(--line)}
.kpi.hot{border-top-color:var(--accent)}
.kpi .lab{font-size:.58rem;letter-spacing:var(--ls-mid);color:var(--ghost)}
.kpi .val{
  margin-top:.45rem;font-family:var(--disp);font-weight:400;font-size:2.3rem;
  line-height:.9;color:var(--ink);letter-spacing:.02em;
}
.kpi .val small{font-family:var(--ui);font-size:.66rem;font-weight:400;
  color:var(--ghost);margin-left:.45rem;letter-spacing:var(--ls-tight)}
.kpi .spark{position:absolute;right:1rem;bottom:.8rem;display:flex;align-items:flex-end;gap:2px;height:24px}
.kpi .spark i{width:3px;background:var(--line);animation:sparkGrow 2.4s ease-in-out infinite}
.kpi.hot .val{color:var(--accent)}
.kpi.hot .spark i{background:var(--accent-2)}
@keyframes sparkGrow{0%,100%{opacity:.55}50%{opacity:1}}

/* — onglets — */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.tab{
  font:inherit;font-size:.6rem;font-weight:600;letter-spacing:var(--ls-mid);cursor:pointer;
  color:var(--ghost);background:none;border:1px solid var(--line-dim);
  padding:.52rem .95rem;transition:color .2s,border-color .2s,background .2s;
}
.tab:hover{color:var(--ink);border-color:var(--line)}
.tab.on{color:var(--ink);border-color:var(--accent-2);background:rgba(193,32,37,.16)}

/* — état vide — */
.empty{
  padding:3rem 1rem;text-align:center;font-size:.66rem;
  letter-spacing:var(--ls-mid);color:var(--line);
}
.empty b{display:block;margin-bottom:.6rem;color:var(--ghost);font-weight:600;
  font-family:var(--disp);font-size:1.1rem;letter-spacing:.08em}

/* — pied de liste — */
.list-foot{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.8rem 1.1rem;border-top:1px solid var(--line-dim);
  font-size:.56rem;letter-spacing:var(--ls-mid);color:var(--line);
}
.list-foot .spacer{flex:1}

/* ============================================================
   EMBLÈME — mode RÉSONANCE (état du terminal)
   ============================================================ */
.cor{fill:none;stroke:var(--lg-ink);stroke-width:36;stroke-linecap:round;stroke-linejoin:miter}
.zig{fill:none;stroke:var(--lg-ink);stroke-width:22;stroke-linecap:round;stroke-linejoin:miter}
.sha{fill:none;stroke:var(--lg-ink);stroke-width:28;stroke-linecap:round}
.hed{fill:var(--lg-ink)}
.cglow{opacity:0}
.gdia{fill:none;stroke:var(--lg-ink);stroke-width:8;opacity:0;
  transform-box:view-box;transform-origin:50% 50%}

@keyframes rippleGlow{0%,100%{opacity:0}10%{opacity:.85}35%{opacity:0}}
@keyframes rippleLayer{
  0%,38%,100%{filter:none}
  14%{filter:drop-shadow(0 0 12px rgba(226,58,63,.95)) brightness(1.6)}
}
@keyframes waveDia{
  0%{transform:scale(.26);opacity:.85}
  100%{transform:scale(1.04);opacity:0}
}
[data-mode="sonar"] .cglow{animation:rippleGlow 2.4s ease-out infinite}
[data-mode="sonar"] .hed{animation:rippleLayer 2.4s ease-out infinite}
[data-mode="sonar"] .zig{animation:rippleLayer 2.4s ease-out .25s infinite}
[data-mode="sonar"] .cor{animation:rippleLayer 2.4s ease-out .5s infinite}
[data-mode="sonar"] .gd1{animation:waveDia 2.4s cubic-bezier(0,.4,.4,1) infinite}
[data-mode="sonar"] .gd2{animation:waveDia 2.4s cubic-bezier(0,.4,.4,1) 1.2s infinite}

/* ============================================================
   RESPONSIVE + ACCESSIBILITÉ
   ============================================================ */
@media(max-width:1240px){
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  body{flex-direction:column}
  .rail{width:100%;height:auto;position:static;flex-direction:row;align-items:center;
    border-right:0;border-bottom:1px solid var(--line-dim);overflow-x:auto}
  .rail-logo{flex-direction:row;border-bottom:0;border-right:1px solid var(--line-dim);padding:.8rem 1rem}
  .emblem{width:38px}
  .rail-wordmark b{font-size:1.1rem;letter-spacing:.16em;text-indent:.16em}
  .rail-wordmark span{display:none}
  .rail-id{border-bottom:0;border-right:1px solid var(--line-dim);white-space:nowrap}
  .rail-nav{display:flex;padding:.4rem}
  .rail-nav a{white-space:nowrap}
  .nav-sep,.rail-foot{display:none}
  .topbar{overflow-x:auto}
}
@media(max-width:620px){
  .kpis{grid-template-columns:1fr}
  .content{padding:1.4rem 1rem 2rem}
  .table th:nth-child(n+4),.table td:nth-child(n+4){display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}
}