/* ═══════════════════════════════════════════════════════════════════
   MineCardinal — direction artistique « station de relevé »

   Principes tenus dans tout le fichier :
   · une seule famille, monospace, du micro-label au titre d’affiche ;
   · aucun rayon de bordure, aucune ombre portée — que des filets de 1 px ;
   · le contraste vient de l’échelle typographique, pas de la couleur ;
   · les statuts sont des hachures, lisibles même en niveaux de gris ;
   · les transitions sont en steps() : mécanique, jamais fluide.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ─────────────────────────────────────────────────── */

:root {
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "DejaVu Sans Mono",
          "Liberation Mono", Menlo, Consolas, monospace;

  --paper:      #e9e3d6;
  --paper-deep: #e0d9c9;
  --paper-hi:   #f3eee3;
  --ink:        #17150f;
  --ink-soft:   #17150f96;
  --ink-faint:  #17150f5c;
  --hair:       #17150f2e;
  --hair-soft:  #17150f1a;
  --contour:    #17150f0d;

  --oxide:   #b8401a;
  --mineral: #106456;
  --ochre:   #a8760f;
  --slate:   #4a5560;

  --rail-w: 4.25rem;
  --gut: clamp(1.1rem, 3.2vw, 3rem);
  --step: 120ms;
}

:root[data-theme="nuit"] {
  --paper:      #131209;
  --paper-deep: #1a1811;
  --paper-hi:   #23201a;
  --ink:        #ece5d5;
  --ink-soft:   #ece5d5a3;
  --ink-faint:  #ece5d566;
  --hair:       #ece5d533;
  --hair-soft:  #ece5d51c;
  --contour:    #ece5d510;

  --oxide:   #e2683c;
  --mineral: #46b49b;
  --ochre:   #d9a53c;
  --slate:   #8697a6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="jour"]) {
    --paper:      #131209;
    --paper-deep: #1a1811;
    --paper-hi:   #23201a;
    --ink:        #ece5d5;
    --ink-soft:   #ece5d5a3;
    --ink-faint:  #ece5d566;
    --hair:       #ece5d533;
    --hair-soft:  #ece5d51c;
    --contour:    #ece5d510;
    --oxide:   #e2683c;
    --mineral: #46b49b;
    --ochre:   #d9a53c;
    --slate:   #8697a6;
  }
}

/* ── 2. Assise ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  padding-left: var(--rail-w);
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--mono);
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

/* Courbes de niveau : trois familles de cercles concentriques décalés.
   Purement décoratif, non interactif, sous tout le reste. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 9% 18%,  transparent 0 27px, var(--contour) 27px 28px),
    repeating-radial-gradient(circle at 81% 6%,  transparent 0 35px, var(--contour) 35px 36px),
    repeating-radial-gradient(circle at 64% 92%, transparent 0 31px, var(--contour) 31px 32px);
}

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--oxide); outline-offset: 2px; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── 3. Micro-typographie ──────────────────────────────────────── */

.field__label, .readout dt, .plate__num, .plate__meta, .rail__tab span,
.chip, .core__tag, .journal__status, .stamp__line {
  font-size: .655rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── 4. Rail ───────────────────────────────────────────────────── */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  background: var(--paper);
  border-right: 1px solid var(--ink);
}

.rail__sigil {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .35rem .45rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.rail__nav { display: flex; flex-direction: column; gap: 1.75rem; }

.rail__tab {
  appearance: none;
  background: none;
  border: 0;
  padding: .5rem .2rem;
  color: var(--ink-faint);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  transition: color var(--step) steps(2);
}
.rail__tab b {
  font-size: .78rem;
  letter-spacing: .06em;
  border-bottom: 1px solid currentColor;
  padding-bottom: .15rem;
}
.rail__tab span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: inherit;
}
.rail__tab:hover { color: var(--ink-soft); }
.rail__tab.is-active { color: var(--oxide); }

.rail__foot { display: flex; flex-direction: column; align-items: center; gap: .9rem; }

.rail__icon {
  appearance: none;
  background: none;
  border: 1px solid var(--hair);
  color: var(--ink-soft);
  width: 2rem; height: 2rem;
  font: inherit;
  cursor: pointer;
  transition: background var(--step) steps(2), color var(--step) steps(2);
}
.rail__icon:hover { background: var(--ink); color: var(--paper); }

.rail__link a {
  writing-mode: vertical-rl;
  font-size: .6rem;
  letter-spacing: .22em;
  color: var(--ink-faint);
  text-decoration: none;
}
.rail__link a:hover { color: var(--oxide); }

/* ── 5. Feuille & cartouche ────────────────────────────────────── */

.sheet {
  position: relative;
  z-index: 1;
  max-width: 84rem;
  padding: var(--gut) var(--gut) 6rem;
}

.masthead { margin-bottom: 3.25rem; }

.masthead__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .5rem;
}

.masthead__title {
  margin: 0;
  font-size: clamp(2.1rem, 7.6vw, 5.1rem);
  font-weight: 700;
  line-height: .84;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* La dernière lettre porte l’interlettrage : on le compense à droite. */
  margin-right: -.1em;
}

.masthead__stamp {
  flex: none;
  text-align: right;
  border: 1px solid var(--ink);
  padding: .35rem .6rem .2rem;
  line-height: 1.1;
}
.stamp__line { display: block; }
.stamp__big { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: .05em; }

.masthead__sub {
  margin: .55rem 0 0;
  font-size: .78rem;
  letter-spacing: .13em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.readout {
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border: 1px solid var(--hair);
  border-right: 0;
}
.readout__cell { padding: .55rem .75rem; border-right: 1px solid var(--hair); }
.readout dt { margin: 0 0 .25rem; }
.readout dd { margin: 0; font-size: .84rem; letter-spacing: .02em; }
.readout dd.is-pending { color: var(--ochre); }
.readout dd.is-live { color: var(--mineral); }
.readout dd.is-down { color: var(--oxide); }

/* ── 6. Planches ───────────────────────────────────────────────── */

.plate { display: none; }
.plate.is-active { display: block; animation: plate-in 200ms steps(4); }

@keyframes plate-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

.plate__head {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: 1.5rem;
}
.plate__num { flex: none; }
.plate__title {
  flex: none;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.plate__rule { flex: 1; height: 0; border-top: 1px solid var(--ink); }
.plate__meta { flex: none; }

/* ── 7. Carottes (lignes d’instance) ───────────────────────────── */

.cores { border-top: 1px solid var(--ink); }

.core {
  display: grid;
  grid-template-columns: 2.6rem .9rem minmax(0, 1fr) auto;
  gap: 0 1.1rem;
  align-items: center;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--hair);
  transition: background var(--step) steps(2);
}
.core:hover { background: var(--paper-deep); }

.core__idx {
  align-self: stretch;
  font-size: .7rem;
  color: var(--ink-faint);
  letter-spacing: .1em;
  padding-top: .15rem;
}

/* Carotte de sondage : strates déterministes dérivées de l’identifiant.
   Deux instances n’ont jamais la même signature. */
.core__sample {
  align-self: stretch;
  min-height: 3.4rem;
  border: 1px solid var(--ink);
  background: var(--paper-hi);
}

.core__body { min-width: 0; }

.core__name {
  margin: 0;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.core__facts {
  margin: .4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 .7rem;
  font-size: .72rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.core__facts span::after { content: " ·"; color: var(--ink-faint); }
.core__facts span:last-child::after { content: ""; }

.core__detail {
  margin: .35rem 0 0;
  font-size: .72rem;
  color: var(--ink-faint);
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}

.core__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55rem;
  min-width: 12.5rem;
}

.core__tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--ink);
  font-weight: 700;
}
.core__tag::before {
  content: "";
  width: 2.6rem;
  height: .7rem;
  border: 1px solid var(--ink);
}

/* Hachures de statut — chaque état a sa trame, pas seulement sa teinte. */
.st-running  .core__tag::before { background: repeating-linear-gradient(90deg, var(--mineral) 0 3px, transparent 3px 5px), var(--paper-hi); }
.st-starting .core__tag::before,
.st-creating .core__tag::before { background: repeating-linear-gradient(45deg, var(--ochre) 0 3px, transparent 3px 8px), var(--paper-hi); background-size: 11.3px 11.3px; animation: drift 900ms steps(6) infinite; }
.st-stopping .core__tag::before { background: repeating-linear-gradient(-45deg, var(--slate) 0 3px, transparent 3px 8px), var(--paper-hi); background-size: 11.3px 11.3px; animation: drift 900ms steps(6) infinite reverse; }
.st-stopped  .core__tag::before { background: repeating-linear-gradient(0deg, var(--slate) 0 1px, transparent 1px 5px), var(--paper-hi); }
.st-failed   .core__tag::before { background: repeating-linear-gradient(45deg, var(--oxide) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, var(--oxide) 0 1px, transparent 1px 6px), var(--paper-hi); }

.st-running  .core__tag { color: var(--mineral); }
.st-starting .core__tag, .st-creating .core__tag { color: var(--ochre); }
.st-failed   .core__tag { color: var(--oxide); }
.st-stopped  .core__tag, .st-stopping .core__tag { color: var(--ink-soft); }

@keyframes drift { to { background-position: 11.3px 0, 0 0; } }

.core__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem .55rem; }

/* Jauge de mémoire, graduée comme une règle. */
.gauge { width: 100%; }
.gauge__bar {
  height: .55rem;
  border: 1px solid var(--ink-soft);
  position: relative;
  overflow: hidden;
}
.gauge__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: repeating-linear-gradient(90deg, var(--ink-soft) 0 1px, transparent 1px 4px);
  transition: width 240ms steps(8);
}
.gauge__scale {
  display: flex;
  justify-content: space-between;
  font-size: .62rem;
  color: var(--ink-faint);
  letter-spacing: .08em;
  margin-top: .2rem;
}

/* ── 8. Boutons ────────────────────────────────────────────────── */

.act {
  appearance: none;
  background: none;
  border: 0;
  padding: .3rem .15rem;
  margin: 0;
  color: var(--ink);
  font: inherit;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--step) steps(2), color var(--step) steps(2);
}
.act::before { content: "[ "; color: var(--ink-faint); }
.act::after  { content: " ]"; color: var(--ink-faint); }
.act:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.act:hover:not(:disabled)::before,
.act:hover:not(:disabled)::after { color: var(--paper); }
.act:disabled { color: var(--ink-faint); cursor: not-allowed; }

.act--sm { font-size: .66rem; }
.act--lg { font-size: .88rem; padding: .55rem .3rem; letter-spacing: .18em; }
.act--danger { color: var(--oxide); }
.act--danger:hover:not(:disabled) { background: var(--oxide); color: var(--paper); }

/* ── 9. Bon de forage ──────────────────────────────────────────── */

.bon { border-top: 1px solid var(--ink); }

.bon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
}

.field {
  display: block;
  padding: 1.15rem 1.15rem 1.35rem 0;
  border-bottom: 1px solid var(--hair);
  min-width: 0;
}
.field--wide { grid-column: 1 / -1; }

.field__label { display: block; margin-bottom: .6rem; }

.field__input {
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--ink-soft);
  padding: .3rem 0;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  letter-spacing: .04em;
}
.field__input::placeholder { color: var(--ink-faint); }
.field__input:focus { outline: 0; border-bottom: 1px solid var(--oxide); }
select.field__input { text-transform: none; cursor: pointer; }

.field__hint {
  display: block;
  margin-top: .45rem;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.consent input { margin-top: .3rem; accent-color: var(--oxide); flex: none; }
.consent b { color: var(--ink); }

.bon__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.25rem;
}
.bon__note { margin: 0; font-size: .7rem; letter-spacing: .06em; color: var(--ink-faint); max-width: 40ch; }
.bon__note.is-error { color: var(--oxide); }

/* Sélecteur de version */
.picker { border: 1px solid var(--hair); }

.picker__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--hair);
}

.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
  appearance: none;
  background: none;
  border: 1px solid var(--hair);
  padding: .25rem .5rem;
  color: var(--ink-faint);
  font: inherit;
  cursor: pointer;
  transition: all var(--step) steps(2);
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink-soft); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.picker__search {
  flex: 1;
  min-width: 8rem;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--ink-soft);
  padding: .2rem 0;
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
}
.picker__search:focus { outline: 0; border-bottom-color: var(--oxide); }

.picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 15rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.picker__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem .6rem;
  border-bottom: 1px solid var(--hair-soft);
  cursor: pointer;
  font-size: .8rem;
  letter-spacing: .03em;
  transition: background var(--step) steps(2);
}
.picker__row:hover { background: var(--paper-deep); }
.picker__row.is-picked { background: var(--ink); color: var(--paper); }
.picker__row.is-picked .picker__date { color: var(--paper); opacity: .7; }
.picker__row b { font-weight: 700; }
.picker__date { font-size: .68rem; color: var(--ink-faint); letter-spacing: .06em; }

.picker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem .6rem;
  border-top: 1px solid var(--hair);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Règle de mémoire */
.ruler {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  align-items: end;
  height: 3rem;
  border-bottom: 2px solid var(--ink);
  cursor: crosshair;
  user-select: none;
}
.ruler__tick { position: relative; height: 100%; }
.ruler__tick::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 1px;
  height: 32%;
  background: var(--ink-soft);
}
.ruler__tick[data-major]::after { height: 62%; background: var(--ink); }
.ruler__tick.is-filled { background: color-mix(in srgb, var(--oxide) 16%, transparent); }
.ruler__tick.is-edge { background: color-mix(in srgb, var(--oxide) 42%, transparent); }
.ruler__readout { margin-top: .5rem; font-size: .72rem; letter-spacing: .1em; color: var(--ink-soft); }
.ruler__readout b { font-size: 1.15rem; color: var(--ink); }

/* ── 10. Journal ───────────────────────────────────────────────── */

.journal { border: 1px solid var(--ink); }

.journal__bar {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--ink);
  background: var(--paper-deep);
}
.journal__select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--hair);
  padding: .25rem .45rem;
  color: var(--ink);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}
.journal__status { margin-left: auto; }

.journal__body {
  counter-reset: ln;
  height: min(58vh, 34rem);
  overflow-y: auto;
  padding: .6rem 0;
  font-size: .76rem;
  line-height: 1.65;
  scrollbar-width: thin;
}
.journal__body:focus { outline: 0; }

.jline {
  display: grid;
  grid-template-columns: 4.1rem minmax(0, 1fr);
  gap: .9rem;
  padding: 0 .7rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.jline:nth-child(even) { background: var(--hair-soft); }
.jline::before {
  counter-increment: ln;
  content: counter(ln);
  text-align: right;
  color: var(--ink-faint);
  font-size: .66rem;
  border-right: 1px solid var(--hair);
  padding-right: .55rem;
  user-select: none;
}
.jline--warn { color: var(--ochre); }
.jline--err  { color: var(--oxide); }
.jline--sys  { color: var(--mineral); font-style: italic; }
.jline--srv  { color: var(--ink-soft); }
.jline--echo { color: var(--ink); font-weight: 700; }

.prompt {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  border-top: 1px solid var(--ink);
}
.prompt__caret { color: var(--oxide); }
.prompt__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: .8rem;
}
.prompt__input:focus { outline: 0; }
.prompt__input::placeholder { color: var(--ink-faint); }
.prompt__input:disabled { color: var(--ink-faint); }

/* ── 10 bis. Fiche de sondage ──────────────────────────────────── */

.sonde { border-top: 1px solid var(--ink); }
.sonde[hidden] { display: none; }

.sonde__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hair);
}
.sonde__name {
  margin: 0 0 .4rem;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.05;
}
.sonde__state { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }

/* Onglets : des étiquettes réglées, pas des boutons. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 1.25rem;
}
.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: .6rem .9rem;
  color: var(--ink-faint);
  font: inherit;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--step) steps(2), border-color var(--step) steps(2);
}
.tab:hover { color: var(--ink-soft); }
.tab.is-on { color: var(--ink); border-bottom-color: var(--oxide); }
.tab__badge {
  display: inline-block;
  margin-left: .4rem;
  padding: 0 .3rem;
  background: var(--ink);
  color: var(--paper);
  font-size: .62rem;
}
.tab__badge[hidden] { display: none; }

.tabpane { display: none; }
.tabpane.is-on { display: block; animation: plate-in 160ms steps(3); }

/* Effectif */
.roster { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.75rem; }
.roster__count { font-size: 2.4rem; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.roster__count span { font-size: 1rem; color: var(--ink-faint); margin-left: .3rem; }
.roster__gauge .gauge__bar { margin-top: .7rem; }
.roster__hint { margin: .6rem 0 0; font-size: .7rem; letter-spacing: .06em; color: var(--ink-faint); }

.roster__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.roster__row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem .3rem;
  border-bottom: 1px solid var(--hair);
  font-size: .84rem;
  letter-spacing: .04em;
}
.roster__row::before {
  content: "";
  width: .55rem; height: .55rem;
  background: var(--mineral);
  flex: none;
}
.roster__row .act { margin-left: auto; }
.roster__empty { padding: 2rem .3rem; color: var(--ink-faint); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }

/* Fil de discussion */
.jline--chat b { color: var(--oxide); font-weight: 700; }
.jline--join   { color: var(--mineral); }
.jline--leave  { color: var(--ink-faint); }
.jline--death  { color: var(--oxide); }
.jline--advancement { color: var(--ochre); }
.jline--command { color: var(--slate); }

/* Mods */
.mods__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--hair);
}
.mods__stat { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.mods__upload { cursor: pointer; }
.mods__note { margin: .8rem 0 0; font-size: .72rem; letter-spacing: .04em; color: var(--ink-faint); line-height: 1.6; }
.mods__note.is-error { color: var(--oxide); }

.mods__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.mods__row {
  display: grid;
  grid-template-columns: .8rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .9rem;
  padding: .5rem .2rem;
  border-bottom: 1px solid var(--hair);
  font-size: .8rem;
}
.mods__row::before { content: ""; width: .5rem; height: 1.1rem; background: var(--mineral); }
.mods__row.is-off::before { background: repeating-linear-gradient(0deg, var(--slate) 0 1px, transparent 1px 4px); }
.mods__row.is-off .mods__name { color: var(--ink-faint); text-decoration: line-through; }
.mods__name { overflow-wrap: anywhere; letter-spacing: .02em; }
.mods__size { font-size: .68rem; color: var(--ink-faint); letter-spacing: .06em; white-space: nowrap; }

/* Propriétés */
.props { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 1.75rem; margin-top: 1rem; }
.props__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 9rem);
  align-items: center;
  gap: .8rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--hair-soft);
}
.props__key { font-size: .72rem; letter-spacing: .04em; color: var(--ink-soft); overflow-wrap: anywhere; }
.props__val {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--ink-faint);
  padding: .15rem 0;
  color: var(--ink);
  font: inherit;
  font-size: .76rem;
  text-align: right;
}
.props__val:focus { outline: 0; border-bottom: 1px solid var(--oxide); }
.props__row.is-dirty .props__val { color: var(--oxide); border-bottom-color: var(--oxide); }

/* Chargeur, dans le bon de forage */
.loaderpick { margin-top: 1rem; }
.loaderpick[hidden] { display: none; }

/* ── 11. Vide, annotations, volet ──────────────────────────────── */

.empty { padding: 4rem 0; text-align: center; color: var(--ink-faint); }
.empty__mark { font-size: 3rem; margin: 0 0 .5rem; }
.empty p { margin: 0 0 1rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }

.notes {
  position: fixed;
  right: var(--gut);
  bottom: 1.25rem;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(26rem, calc(100vw - var(--rail-w) - 2rem));
}
.note {
  border: 1px solid var(--ink);
  border-left-width: 4px;
  background: var(--paper);
  padding: .5rem .7rem;
  font-size: .73rem;
  letter-spacing: .04em;
  line-height: 1.5;
  animation: note-in 180ms steps(3);
}
.note b { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .2rem; }
.note--ok   { border-left-color: var(--mineral); }
.note--warn { border-left-color: var(--ochre); }
.note--err  { border-left-color: var(--oxide); }

@keyframes note-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; } }

.gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--paper);
}
.gate[hidden] { display: none; }
.gate__box { width: min(25rem, 88vw); border: 1px solid var(--ink); padding: 1.75rem; }
.gate__mark {
  display: inline-block;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  padding: .35rem .45rem; margin-bottom: 1.1rem;
  background: var(--ink); color: var(--paper);
}
.gate__box h2 { margin: 0 0 .5rem; font-size: 1.2rem; letter-spacing: .18em; text-transform: uppercase; }
.gate__box > p { margin: 0 0 1.4rem; font-size: .73rem; color: var(--ink-soft); line-height: 1.6; }
.gate__field { padding: 0 0 1.1rem; border-bottom: 0; }
.gate__error {
  margin: 0 0 1rem; padding: .5rem .65rem;
  border-left: 3px solid var(--oxide);
  background: var(--paper-deep);
  font-size: .73rem; color: var(--oxide); line-height: 1.5;
}
.gate__error[hidden] { display: none; }
.gate__note { margin: 1rem 0 0; font-size: .66rem; letter-spacing: .06em; color: var(--ink-faint); line-height: 1.6; }

/* ── 12. Adaptations ───────────────────────────────────────────── */

@media (max-width: 62rem) {
  .core { grid-template-columns: 2rem .8rem minmax(0, 1fr); row-gap: .9rem; }
  .core__side { grid-column: 3; align-items: flex-start; min-width: 0; }
  .core__acts { justify-content: flex-start; }
}

@media (max-width: 40rem) {
  :root { --rail-w: 3.1rem; }
  body { font-size: 14px; }
  .rail__tab span { display: none; }
  .masthead__stamp { display: none; }
  .field { padding-right: 0; }
  .jline { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .rail, .notes, .prompt, .core__acts { display: none; }
  body { padding-left: 0; background: #fff; color: #000; }
  body::before { display: none; }
  .plate { display: block !important; }
}