/* Atlante OLDLIFE — vista staff.
   Stessi materiali di YMAP Fixer: i riquadri sono la pennellata d'inchiostro
   panel.png stirata a riempire, i pulsanti sono button.png. Nessun bordo CSS,
   nessun angolo arrotondato: le cornici sono dipinte, non disegnate.
   Il carattere è Remington ovunque; l'Arial Narrow compresso resta ai soli
   titoli da manifesto, dove la differenza è una scelta e non una svista. */

@font-face {
  font-family: 'Remington';
  src: url('/static/fonts/remington.ttf') format('truetype');
  font-display: swap;
}

:root {
  --red: #bd291d;
  --red-soft: #d9533f;
  --paper: #dfcaa5;
  --cream: #f1e4ce;
  --muted: #b6a38d;
  --dim: #8a7358;
  --display: 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;

  --ink: url('/static/images/panel.png') center / 100% 100% no-repeat;
  --ink-btn: url('/static/images/button.png') center / 100% 100% no-repeat;
  --ink-btn-hi: url('/static/images/button-hover.png') center / 100% 100% no-repeat;

  --wash: rgba(14, 8, 5, .72);
  --line: rgba(223, 202, 165, .13);

  --critico: #e0402c;
  --alto: #d8863a;
  --medio: #c9b458;
  --basso: #86a583;
}

* { box-sizing: border-box; }

/* Mai una barra di scorrimento orizzontale sulla pagina. Se un contenuto è più
   largo della finestra deve scorrere DENTRO il proprio riquadro (le tabelle lo
   fanno), non trascinarsi dietro l'intera pagina. */
html, body { max-width: 100%; overflow-x: hidden; }
html { background: #0a0705; }

/* Le barre che restano — quella verticale e quelle interne alle tabelle —
   vestite come il resto: quella chiara di serie stonava su tutto. */
* { scrollbar-width: thin; scrollbar-color: rgba(223,202,165,.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.35); }
::-webkit-scrollbar-thumb { background: rgba(223,202,165,.26); }
::-webkit-scrollbar-thumb:hover { background: rgba(223,202,165,.45); }
::-webkit-scrollbar-corner { background: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: 'Remington', 'Courier New', serif;
  font-size: 15px;
  line-height: 1.55;
  /* Sulle pagine dense il fondale resta un'atmosfera, non un'immagine: sopra
     ci va testo piccolo e tabelle, e il paesaggio se le mangia. */
  background:
    linear-gradient(180deg, rgba(9,5,3,.97) 0%, rgba(9,5,3,.93) 30%, rgba(9,5,3,.95) 100%),
    url('/static/images/background.png') center / cover fixed no-repeat;
}

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .1; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

a { color: var(--paper); }

/* ==========================================================================
   Accesso — una sola pennellata, come il riquadro del fixer
   ========================================================================== */
/* La soglia è una pagina da manifesto, non da lavoro: stesso velo del fixer,
   che lascia il paesaggio leggibile sulla destra. */
.gate-body {
  display: grid; place-items: center; min-height: 100vh; margin: 0;
  background:
    linear-gradient(90deg, rgba(9,5,3,.78) 0%, rgba(9,5,3,.3) 46%, rgba(9,5,3,.05) 74%),
    linear-gradient(0deg, rgba(8,4,3,.5), transparent 50%),
    url('/static/images/background.png') center / cover fixed no-repeat;
}

.gate {
  position: relative; z-index: 2; text-align: center;
  width: min(500px, calc(100% - 36px));
  padding: 66px 62px 58px;
  background: var(--ink);
  filter: drop-shadow(0 0 16px rgba(0,0,0,.85));
}
.gate-mark {
  font-size: 15px; letter-spacing: 5px; color: var(--paper);
  text-shadow: 1px 2px 6px #000;
}
.gate-mark b { color: var(--red); }
.gate h1 {
  font-size: 42px; font-weight: 400; letter-spacing: 3px;
  text-transform: uppercase; margin: 16px 0 14px;
  text-shadow: 2px 4px 14px #000;
}
.gate-err { color: var(--red-soft); }
.gate-sub { color: var(--muted); font-size: 14px; margin: 0 auto 30px; max-width: 330px; }

.gate-btn {
  display: inline-block; text-decoration: none; cursor: pointer; border: 0;
  padding: 20px 30px; margin: 5px; min-width: 220px;
  font: 400 16px 'Remington', 'Courier New', serif;
  letter-spacing: 1.5px; color: #fff;
  background: var(--ink-btn);
  filter: drop-shadow(0 0 2px rgba(255,255,255,.3)); transition: .2s;
}
.gate-btn:hover { transform: scale(.95); color: #000; background: var(--ink-btn-hi); }
.gate-btn.ghost { min-width: 150px; font-size: 14px; opacity: .8; }
/* Due pulsanti affiancati non devono mai attaccarsi ("RiprovaEsci"). */
.gate-azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.gate-azioni .gate-btn { margin: 0; min-width: 170px; }

/* ==========================================================================
   Impalcatura
   ========================================================================== */
.shell { position: relative; z-index: 2; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 0 clamp(16px, 3vw, 40px); height: 66px;
  background: rgba(9, 5, 3, .93);
  box-shadow: 0 1px 0 rgba(223,202,165,.14), 0 10px 30px rgba(0,0,0,.5);
}
.brand {
  font-size: 19px; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; color: var(--cream); white-space: nowrap;
  text-shadow: 1px 2px 6px #000;
}
.brand b { color: var(--red); }
.spacer { flex: 1; }
.topbar-note { color: var(--dim); font-size: 12px; }

/* La striscia delle schede scorre col dito o con la rotella, ma senza mostrare
   la barra: era lei a comparire in cima come una riga bianca. */
.tabs {
  display: flex; gap: 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font: 400 14px 'Remington', 'Courier New', serif;
  letter-spacing: 1px; padding: 12px 15px 10px; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: .15s;
}
.tabs button:hover { color: var(--cream); }
.tabs button.active { color: var(--cream); border-bottom-color: var(--red); }

main.staff { padding: 26px clamp(16px, 3vw, 40px) 90px; }
.view { display: none; }
.view.active { display: block; }

h2.section {
  font-size: 26px; letter-spacing: 2px; text-transform: uppercase;
  margin: 0 0 6px; font-weight: 400; text-shadow: 2px 3px 12px #000;
}
.section-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; max-width: 780px; }

/* ==========================================================================
   Riquadri d'inchiostro
   ========================================================================== */
.kpis {
  display: grid; gap: 10px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.kpi {
  background: var(--ink); padding: 22px 20px 20px; text-align: center;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.6));
}
.kpi .n {
  font-size: 36px; line-height: 1; display: block; margin-bottom: 6px;
  text-shadow: 2px 3px 10px #000;
}
.kpi .l { color: var(--muted); font-size: 11.5px; letter-spacing: 1.2px; }
.kpi.warn .n { color: var(--critico); }
.kpi.mid .n { color: var(--alto); }

.panel {
  background: var(--ink); padding: 30px 34px 26px; margin-bottom: 18px;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.6));
}
.panel h3 {
  font-size: 17px; letter-spacing: 1.5px; text-transform: uppercase;
  margin: 0 0 14px; font-weight: 400; color: var(--paper);
}

/* ==========================================================================
   Filtri
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.filters input[type=search], .filters select {
  font: 400 14px 'Remington', 'Courier New', serif; color: var(--cream);
  background: rgba(9,5,3,.75); border: 0;
  box-shadow: inset 0 -1px 0 rgba(223,202,165,.28);
  padding: 11px 13px; min-width: 190px;
}
.filters input[type=search]:focus, .filters select:focus {
  outline: 0; box-shadow: inset 0 -2px 0 var(--red);
}
.filters input[type=search] { flex: 1; min-width: 240px; }
.filters select option { background: #140c07; }

.chip {
  appearance: none; cursor: pointer; border: 0; color: var(--muted);
  font: 400 13px 'Remington', 'Courier New', serif; letter-spacing: .8px;
  padding: 11px 16px; background: var(--ink-btn); opacity: .75; transition: .18s;
}
.chip:hover { opacity: 1; color: var(--cream); }
.chip.on { opacity: 1; color: #000; background: var(--ink-btn-hi); }
.count-note { color: var(--dim); font-size: 12.5px; margin-left: auto; }

/* ==========================================================================
   Tabelle — niente cornice, solo righe: qui conta la leggibilità
   ========================================================================== */
.tablewrap { overflow-x: auto; background: var(--wash); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
/* Nessuna intestazione appiccicata: dentro un contenitore che scorre in
   orizzontale il browser la ancora al contenitore invece che alla finestra, e
   finisce a metà tabella coprendo le righe. Scorre col contenuto. */
thead th {
  background: #1a0f08; text-align: left; padding: 13px 14px;
  font-size: 12.5px; letter-spacing: 1px; font-weight: 400;
  color: var(--paper); white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(223,202,165,.3);
  cursor: pointer; user-select: none;
}
thead th:hover { color: var(--cream); }
tbody td {
  padding: 11px 14px; vertical-align: top;
  box-shadow: inset 0 -1px 0 rgba(223,202,165,.06);
}
tbody tr:hover { background: rgba(223,202,165,.05); }
tbody tr.clickable { cursor: pointer; }
/* Le intestazioni vanno allineate insieme alle loro celle: con il solo td
   i numeri finivano a destra e i titoli restavano a sinistra. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono {
  font-family: 'Consolas', 'Courier New', monospace; font-size: 12px;
  color: var(--dim); word-break: break-all;
}

/* ==========================================================================
   Gravità
   ========================================================================== */
.sev {
  display: inline-block; font-size: 11.5px; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 3px 10px 2px; white-space: nowrap;
  box-shadow: inset 0 0 0 1px currentColor;
}
.sev.critico { color: var(--critico); }
.sev.alto { color: var(--alto); }
.sev.medio { color: var(--medio); }
.sev.basso { color: var(--basso); }

.tag {
  display: inline-block; font-size: 11.5px; padding: 3px 9px 2px;
  color: var(--muted); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(223,202,165,.2);
}

.finding {
  background: var(--wash); padding: 18px 22px 16px; margin-bottom: 12px;
  border-left: 3px solid rgba(223,202,165,.22);
}
.finding.critico { border-left-color: var(--critico); }
.finding.alto { border-left-color: var(--alto); }
.finding.medio { border-left-color: var(--medio); }
.finding.basso { border-left-color: var(--basso); }
.finding h4 { margin: 10px 0 8px; font-size: 16px; font-weight: 400; line-height: 1.45; }
.finding p { margin: 0 0 9px; color: var(--muted); font-size: 13.5px; }
.finding .proof {
  font-family: 'Consolas', monospace; font-size: 12px; color: var(--paper);
  background: rgba(0,0,0,.42); padding: 9px 12px; display: block;
  word-break: break-word;
}
/* Il rimedio proposto: si distingue col colore e con un filo sul fianco.
   Niente frecce. */
.finding .fix {
  color: var(--basso); font-size: 13.5px; margin-top: 11px; display: block;
  padding-left: 11px; box-shadow: inset 2px 0 0 rgba(134, 165, 131, .55);
}

/* ==========================================================================
   Verifiche in gioco
   ========================================================================== */
.finding.verifica { position: relative; padding-right: 20px; }
.finding.verifica.fatta { opacity: .62; }
.finding.verifica.fatta h4 { text-decoration: line-through; text-decoration-color: rgba(223,202,165,.4); }

.spunta {
  float: right; display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; user-select: none; font-size: 12.5px;
  letter-spacing: .8px; color: var(--muted); margin-left: 14px;
}
.spunta input { position: absolute; opacity: 0; width: 0; height: 0; }
/* La casella è disegnata a mano: quella di sistema è azzurra e stona con
   tutto il resto. */
.spunta span {
  width: 20px; height: 20px; display: inline-block; position: relative;
  box-shadow: inset 0 0 0 1px rgba(223,202,165,.45); background: rgba(0,0,0,.35);
  transition: .15s;
}
.spunta:hover span { box-shadow: inset 0 0 0 1px var(--paper); }
.spunta input:checked + span { background: var(--basso); box-shadow: none; }
.spunta input:checked + span::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 6px; height: 11px; border: solid #14100c;
  border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.spunta input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--red-soft); }
.spunta input:disabled + span { opacity: .5; }

.nota-riga { margin-top: 12px; }
.nota-campo {
  width: 100%; font: 400 13px 'Remington', 'Courier New', serif;
  color: var(--cream); background: rgba(9,5,3,.6); border: 0;
  box-shadow: inset 0 -1px 0 rgba(223,202,165,.22); padding: 8px 10px;
}
.nota-campo:focus { outline: 0; box-shadow: inset 0 -2px 0 var(--red); }
.nota-campo::placeholder { color: var(--dim); }

/* ==========================================================================
   Oggetti
   ========================================================================== */
.itemgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); }
.itemcell {
  background: var(--ink); padding: 14px 8px 12px; text-align: center;
  cursor: pointer; transition: .15s;
}
.itemcell:hover { transform: scale(.96); }
.itemcell img { width: 46px; height: 46px; object-fit: contain; }
.itemcell .noimg {
  width: 46px; height: 46px; margin: 0 auto; display: grid; place-items: center;
  color: var(--dim); font-size: 20px; box-shadow: inset 0 0 0 1px rgba(223,202,165,.15);
}
.itemcell .nm { font-size: 11.5px; margin-top: 7px; line-height: 1.3; word-break: break-word; }
.itemcell .rar { font-size: 10px; letter-spacing: .8px; color: var(--dim); }

/* ==========================================================================
   Scheda laterale
   ========================================================================== */
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; z-index: 40;
  width: min(720px, 100%); overflow-y: auto;
  background: #120a06; box-shadow: -30px 0 80px rgba(0,0,0,.75);
  transform: translateX(100%); transition: transform .22s ease;
  padding: 24px 30px 80px;
}
.drawer.open { transform: translateX(0); }
.drawer-close {
  position: sticky; top: 0; float: right; appearance: none; cursor: pointer;
  border: 0; color: var(--cream); background: var(--ink-btn);
  font: 400 13px 'Remington', 'Courier New', serif; padding: 10px 18px;
  transition: .18s;
}
.drawer-close:hover { transform: scale(.94); color: #000; background: var(--ink-btn-hi); }
.drawer h2 {
  font-size: 27px; letter-spacing: 1.5px; text-transform: uppercase;
  margin: 0 0 6px; font-weight: 400; text-shadow: 2px 3px 12px #000;
}
.drawer .sub { color: var(--dim); font-size: 13px; margin-bottom: 20px; }
.drawer h3 {
  font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--red-soft); margin: 26px 0 11px; font-weight: 400;
  box-shadow: inset 0 -1px 0 rgba(223,202,165,.18); padding-bottom: 6px;
}
.drawer ol, .drawer ul { margin: 0 0 10px; padding-left: 20px; }
.drawer li { margin-bottom: 6px; }
.kv { display: grid; grid-template-columns: 155px 1fr; gap: 5px 16px; font-size: 13.5px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; }

.copyable { cursor: pointer; box-shadow: inset 0 -1px 0 rgba(223,202,165,.35); }
.copyable:hover { color: var(--red-soft); }

.empty { color: var(--dim); font-style: italic; padding: 30px; text-align: center; }

/* ==========================================================================
   Barre comparative
   ========================================================================== */
/* LA GRIGLIA STA SUL CONTENITORE, NON SULLA RIGA. Con display:grid su ogni
   riga, ciascuna calcolava la propria colonna dei nomi e le barre partivano
   tutte da un punto diverso, sfalsate come una scala. Cosi' invece le colonne
   sono condivise da tutte le righe: la colonna dei nomi si dimensiona sul nome
   piu' lungo dell'intero elenco e ogni barra parte esattamente dallo stesso x.
   Le righe diventano display:contents proprio per lasciare che i loro tre
   figli entrino nella griglia del contenitore. */
.bars { display: grid; grid-template-columns: max-content 1fr 92px; gap: 8px 14px; align-items: center; }
.bar-row { display: contents; }
.bar-row .lbl { font-size: 13px; line-height: 1.35; white-space: nowrap; }
.bar-track { background: rgba(0,0,0,.45); height: 21px; box-shadow: inset 0 0 0 1px rgba(223,202,165,.14); }
/* SENZA display:block questa barra non si vedeva affatto: e' uno <span>, e su
   un elemento inline larghezza e altezza non si applicano. Restava la cornice
   vuota, che e' esattamente quello che si vedeva a schermo: venti rettangoli
   neri in fila senza nessun riempimento. Il contenitore invece funzionava
   perche' e' una cella di griglia, e la griglia lo rende blocco da sola. */
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #8f1f16, var(--red)); }
.bar-fill.calm { background: linear-gradient(90deg, #4d6349, #7d9b7a); }
.bar-row .val { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.median-note { color: var(--dim); font-size: 12.5px; margin-top: 12px; }

@media (max-width: 780px) {
  /* Su schermo stretto la griglia condivisa non ci sta: si torna a una
     colonna sola, ed e' il CONTENITORE a cambiare, non la riga. */
  .bars { grid-template-columns: 1fr; gap: 3px; }
  .bar-row .lbl { white-space: normal; }
  .bar-row .val { text-align: left; }
  .kv { grid-template-columns: 1fr; }
  thead th { position: static; }
  .gate { padding: 48px 34px 42px; }
  .panel { padding: 24px 22px 20px; }
}

/* Rilievi gia' coperti da una correzione: restano leggibili ma arretrano, cosi'
   quello che manca davvero si vede subito. La spunta dice "codice corretto",
   non "provato in gioco": quella e' la scheda Verifiche. */
.finding.coperto { opacity: .55; }
.finding.coperto:hover { opacity: 1; }
.tag.ok {
  border-color: rgba(126, 168, 108, .55);
  color: #9fc487;
}

/* Il verde e' riservato a cio' che e' stato DIMOSTRATO su file: un conteggio
   rieseguito a ogni composizione. Quello che vale solo come parola di chi ha
   esaminato prende l'ambra, che si legge a colpo d'occhio come "attenzione,
   qui non c'e' un riscontro". Il rosso e' per le chiusure che avevano una prova
   e non ce l'hanno piu': quelle tornano aperte da sole ed e' giusto che
   diano fastidio. */
.tag.dubbio {
  border-color: rgba(214, 168, 90, .55);
  color: #e0bb7c;
}
.tag.ko {
  border-color: rgba(198, 96, 84, .7);
  color: #e08b7e;
}
/* Una chiusura solo dichiarata non deve sbiadire come le altre: e' proprio
   quella che va riletta. */
.finding.coperto:has(.tag.dubbio) { opacity: .78; }

/* Il racconto della chiusura: perche' un rilievo e' chiuso, con le parole di
   chi l'ha chiuso. Sta in fondo alla scheda e si distingue dal testo del
   rilievo, che invece descrive il difetto. */
.finding .chiusura {
  margin-top: 11px; padding-left: 11px; font-size: 13px; line-height: 1.55;
  color: var(--muted);
  box-shadow: inset 2px 0 0 rgba(126, 168, 108, .4);
}
.chip.on {
  border-color: rgba(214, 168, 90, .7);
  color: #e8c88a;
}

/* ---------------------------------------------------------------------------
   TABELLA DELLE COORDINATE
   Prima X, Y e Z stavano in tre colonne larghe e allineate a destra, con il
   contesto schiacciato in fondo che andava a capo dopo tre parole. Le larghezze
   erano lasciate al browser, che le decideva sul contenuto piu' lungo.
   Ora le colonne hanno una larghezza dichiarata, le tre cifre stanno insieme
   (si copiano come un comando solo) e il contesto ha lo spazio che gli serve.
--------------------------------------------------------------------------- */
.coordtab { table-layout: fixed; width: 100%; }
.coordtab th:nth-child(1), .coordtab td:nth-child(1) { width: 15%; }
.coordtab th:nth-child(2), .coordtab td:nth-child(2) { width: 9%; }
.coordtab th:nth-child(3), .coordtab td:nth-child(3) { width: 20%; }
.coordtab th:nth-child(4), .coordtab td:nth-child(4) { width: 34%; }
.coordtab th:nth-child(5), .coordtab td:nth-child(5) { width: 22%; }

.coordtab td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }

/* Le tre cifre: monospaziate e tenute su una riga sola, cosi' le colonne
   restano allineate anche con valori di lunghezza diversa. */
.coordtab td.coord {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.coordtab td.coord.copyable { cursor: copy; }
.coordtab td.coord.copyable:hover { color: #e8c88a; }

/* Contesto e posizione: piccoli, e vanno a capo invece di sfondare la tabella
   (la regola del progetto e' che non deve MAI comparire una barra orizzontale). */
.coordtab td.ctx, .coordtab td.pos {
  font-size: 12px;
  line-height: 1.5;
  opacity: .78;
  word-break: break-word;
  overflow-wrap: anywhere;
}