/* Il linguaggio visivo delle due pagine di amministrazione, in un posto solo.
 *
 * Stava duplicato in panel.html e server.html finche' era una manciata di regole.
 * Non lo e' piu': trecento righe in due copie sono la stessa "doppia verita'" che
 * questo progetto evita altrove, e la prima modifica al tema avrebbe scordato una
 * delle due pagine.
 *
 * Lo serve panel.py su /panel.css. Le due pagine tengono solo il proprio impianto:
 * la mappa e' due colonne a tutta altezza, il server e' una griglia di card.
 */

  :root {
    --bg: #080b10; --bg2: #0c1117; --bg3: #111925; --bg4: #18222f;
    --line: #1b2431; --line2: #2b3745;
    --ink: #e6edf5; --dim: #8ea0b5; --faint: #5b6b7e;

    --blue: #5596ff; --red: #f2645a; --amber: #e8ad3f; --green: #57c46f;
    --blue-soft: #5596ff1a; --red-soft: #f2645a1a; --amber-soft: #e8ad3f16;

    --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
    --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

    /* Spigoli quasi vivi. E' la scelta che cambia il carattere di tutto il resto: un
       pannello di controllo e' fatto di celle su una griglia, non di schede che
       galleggiano. Gli angoli tondi restano solo su cio' che si preme. */
    --r: 2px;

    /* Larghezza della barra laterale: solo icone. A 212 px era una colonna, e per due
       voci rubava spazio alla mappa senza dare niente in cambio. Le etichette restano
       nel markup - servono al lettore di schermo e riappaiono nel menu su telefono -
       ma su schermo largo si vedono al passaggio del puntatore. */
    --rail: 58px;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 13.5px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  }

  /* Il telaio: barra laterale fissa, e a destra tutto il resto.
     Le due pagine hanno impianti interni diversi ma la stessa cornice. */
  body.app {
    display: grid; grid-template-columns: var(--rail) 1fr;
    height: 100vh; overflow: hidden;
  }
  .schermo { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; }
  .corpo { display: grid; grid-template-columns: 1fr 392px; min-height: 0; }
  #sprite { display: none; }

  /* Ogni icona e' una <use> sullo sprite: eredita currentColor e la dimensione dal
     contenitore, cosi' un'icona non ha mai un colore proprio da tenere in sincrono. */
  .i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none;
       stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

  /* ------------------------------------------------------------------ testa --- */

  /* --- la barra laterale --------------------------------------------------
     Tiene il marchio, la navigazione e l'uscita. Le voci sono poche adesso, ma qui
     ci stanno anche quelle che verranno (piloti, storico, regole) senza che la
     cornice debba essere ridisegnata - che era il limite della barra in cima. */

  .rail {
    display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid var(--line); background: var(--bg2);
  }
  .rail .marchio-riga {
    display: flex; align-items: center; justify-content: center; height: 50px;
    border-bottom: 1px solid var(--line);
  }
  .rail .logo { width: 28px; height: 28px; display: block; flex: none; }
  /* Il nome per esteso non ci sta in 58 px: vive nel menu su telefono, dove la barra
     si allarga. Qui resta leggibile dai lettori di schermo. */
  .rail .nome { display: none; }
  .rail .sezione { display: none; }

  .rail nav { display: flex; flex-direction: column; padding: 8px 0; min-height: 0;
              overflow-y: auto; }
  .rail .voce {
    position: relative; display: flex; align-items: center; justify-content: center;
    gap: 11px; height: 42px; color: var(--dim); text-decoration: none;
    font: 600 12px var(--sans); letter-spacing: .03em; border: 0; background: none;
    cursor: pointer; padding: 0;
  }
  .rail .voce .etichetta { display: none; }
  .rail .voce:hover { color: var(--ink); background: #ffffff06; }
  .rail .voce.on { color: var(--ink); background: var(--bg3); }
  /* Il segno della voce attiva: un filo pieno sul bordo, non una pillola. */
  .rail .voce.on::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--blue);
  }
  /* Il nome al passaggio del puntatore. Una riga di CSS al posto di una libreria, e
     serve solo dove l'etichetta e' nascosta. */
  .rail .voce[data-nome]:hover::after {
    content: attr(data-nome); position: absolute; left: calc(100% + 8px);
    padding: 5px 9px; background: var(--bg4); border: 1px solid var(--line2);
    color: var(--ink); font: 600 11px var(--sans); letter-spacing: .04em;
    white-space: nowrap; border-radius: var(--r); z-index: 50;
    box-shadow: 0 6px 18px #0009; pointer-events: none;
  }

  .rail .fondo { margin-top: auto; border-top: 1px solid var(--line); padding: 6px 0;
                 position: relative; }

  /* --- il menu dell'account ------------------------------------------------
     L'uscita non sta piu' in vista. Era una voce come le altre, alla stessa distanza
     di un clic di "Mappa": basta un gesto distratto per ritrovarsi fuori e dover
     rifare password e codice a sei cifre. Adesso serve aprirlo apposta. */
  .conto {
    position: absolute; left: calc(100% + 8px); bottom: 8px; z-index: 60;
    min-width: 170px; padding: 5px; background: var(--bg3);
    border: 1px solid var(--line2); border-radius: var(--r);
    box-shadow: 0 10px 30px #000b;
  }
  .conto[hidden] { display: none; }
  .conto .chi {
    padding: 7px 9px 8px; border-bottom: 1px solid var(--line); margin-bottom: 5px;
    font: 10px var(--mono); color: var(--faint); letter-spacing: .06em;
  }
  .conto a {
    display: flex; align-items: center; gap: 9px; padding: 8px 9px;
    color: var(--dim); text-decoration: none; border-radius: var(--r);
    font: 600 12px var(--sans);
  }
  .conto a:hover { background: var(--red-soft); color: var(--red); }

  /* --- la barra in cima al contenuto -------------------------------------- */

  header {
    display: flex; align-items: center; gap: 14px;
    padding: 0 16px; height: 50px; border-bottom: 1px solid var(--line);
    background: var(--bg2);
  }
  /* Il titolo della pagina, con il quadratino d'accento che nel riferimento marca
     ogni inizio di blocco. */
  header .titolo {
    display: flex; align-items: center; gap: 9px;
    font: 650 11px var(--sans); letter-spacing: .18em; text-transform: uppercase;
  }
  header .titolo::before {
    content: ""; width: 7px; height: 7px; background: var(--blue); flex: none;
  }
  header .titolo span { color: var(--faint); font: 10px var(--mono); letter-spacing: .08em;
                        text-transform: none; }

  /* Il bottone del menu: si vede solo quando la barra laterale si ritira. */
  .menu {
    display: none; align-items: center; justify-content: center; width: 34px;
    height: 34px; border: 1px solid var(--line2); background: var(--bg3);
    color: var(--dim); border-radius: var(--r); cursor: pointer;
  }

  /* Il marchio grande, sulla pagina di accesso. Il filtro non e' decorazione: su un
     fondo scuro un distintivo metallico chiaro sembra ritagliato e appiccicato, e
     un'ombra diffusa lo posa sulla pagina invece di lasciarlo galleggiare. */
  .marchio {
    display: block; width: min(62%, 190px); height: auto; margin: 0 auto 18px;
    filter: drop-shadow(0 6px 18px #0009);
  }

  .spacer { margin-left: auto; }

  /* L'orologio in cabina: ora di partenza dal .miz piu' il tempo trascorso. E' il dato
     piu' consultato, quindi e' il piu' grande della pagina. */
  .clock { display: flex; align-items: baseline; gap: 8px; }
  .clock b { font: 650 26px/1 var(--mono); letter-spacing: -.01em;
             font-variant-numeric: tabular-nums; }
  .clock span { font: 10px/1 var(--mono); color: var(--faint); letter-spacing: .1em; }

  .chip {
    display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px var(--sans);
    padding: 6px 12px; border-radius: 20px; color: var(--dim);
    background: var(--bg); border: 1px solid var(--line);
  }
  .chip.ok { color: var(--green); border-color: #24462d; }
  .chip.warn { color: var(--amber); border-color: #4a3a1a; }
  .chip.bad { color: var(--red); border-color: #4d2523; }
  #stamp { font: 10px var(--mono); color: var(--faint); }

  /* ------------------------------------------------------------------ mappa --- */

  main { position: relative; overflow: hidden;
         background: radial-gradient(ellipse at 50% 38%, #0f1725 0%, var(--bg) 72%); }
  svg#map { width: 100%; height: 100%; display: block; cursor: grab; }
  svg#map.dragging { cursor: grabbing; }

  /* A finestra stretta le colonne diventano una, e alla mappa serve un'altezza
     esplicita: in una riga alta "auto" un SVG a height:100% collassa a zero, e la mappa
     spariva del tutto. */
  /* --- schermi stretti ----------------------------------------------------
     La barra laterale esce dal flusso e diventa un pannello che scorre dentro,
     richiamato dal bottone del menu. Il contenuto passa a colonna unica.

     Alla mappa serve un'altezza ESPLICITA: in una riga alta "auto" un SVG a
     height:100% collassa a zero, e la mappa spariva del tutto. */
  @media (max-width: 1000px) {
    body.app { grid-template-columns: 1fr; height: auto; min-height: 100vh;
               overflow: visible; }
    .schermo { overflow: visible; }
    .corpo { grid-template-columns: 1fr; }
    main { height: 58vh; }
    .pannello { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }

    .menu { display: flex; }
    .rail {
      position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 40;
      transform: translateX(-100%); transition: transform .18s ease;
      box-shadow: 18px 0 40px #000a;
    }
    /* Aperto il menu c'e' spazio: tornano il nome e le etichette, e i nomi al
       passaggio del puntatore non servono piu' - su un telefono non c'e' puntatore. */
    .rail .marchio-riga { justify-content: flex-start; gap: 10px; padding: 0 14px; }
    .rail .nome { display: block; }
    .rail .nome b { font: 650 12px/1.15 var(--sans); letter-spacing: .11em; display: block; }
    .rail .nome span { font: 9.5px/1.3 var(--mono); color: var(--faint); letter-spacing: .08em; }
    .rail .sezione {
      display: block; padding: 12px 15px 6px; font: 600 9px var(--mono);
      letter-spacing: .22em; text-transform: uppercase; color: #3f4c59;
    }
    .rail .voce { justify-content: flex-start; padding: 0 15px; }
    .rail .voce .etichetta { display: block; }
    .rail .voce[data-nome]:hover::after { display: none; }
    .conto { left: 8px; right: 8px; bottom: 52px; }
    body.menu-aperto .rail { transform: none; }
    /* Il velo che copre il contenuto: toccarlo chiude, ed e' il gesto che la gente
       prova per primo. */
    body.menu-aperto::after {
      content: ""; position: fixed; inset: 0; background: #000a; z-index: 39;
    }
    #stamp { display: none; }
    .clock b { font-size: 20px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .rail { transition: none; }
  }

  .grid { stroke: #ffffff09; stroke-width: 1; }
  .grid-label { fill: #ffffff1c; font: 9.5px var(--mono); }
  .scale { stroke: var(--faint); stroke-width: 1.5; }
  .scale-label { fill: var(--faint); font: 10px var(--mono); }

  .zone { stroke-width: 1.5; stroke-linejoin: round; }
  .zone.blue { fill: var(--blue-soft); stroke: #5596ffa0; }
  .zone.red { fill: var(--red-soft); stroke: #f2645aa0; }
  .zone.contested { fill: var(--amber-soft); stroke: #e8ad3fa0; stroke-dasharray: 9 6; }
  .zone-label { fill: #ffffff2b; font: 650 11px var(--sans); letter-spacing: .22em;
                text-transform: uppercase; text-anchor: middle; pointer-events: none; }

  .pt { cursor: pointer; }
  .pt .mk { stroke: var(--bg); stroke-width: 2.5; }
  .pt.blue .mk { fill: var(--blue); } .pt.red .mk { fill: var(--red); }
  .pt.onfront .mk { stroke: var(--amber); }
  .pt.sel .mk, .pt:hover .mk { stroke: var(--ink); stroke-width: 3; }
  /* La testa di ponte: un anello attorno al quadrato. Non e' un punto come gli altri -
     non si perde - e deve vedersi senza cliccarla. */
  .pt .home { fill: none; stroke-width: 1.3; opacity: .7; }
  .pt.blue .home { stroke: var(--blue); } .pt.red .home { stroke: var(--red); }
  /* Vicino a cadere, e oltre soglia. Il secondo non e' uno stato di passaggio: un punto
     ci resta finche' l'attaccante non possiede qualcosa di confinante. */
  .pt .risk { fill: none; stroke-width: 1.4; }
  .pt.critico .risk { stroke: var(--amber); stroke-dasharray: 3 3; }
  .pt.soglia .risk { stroke: var(--red); stroke-dasharray: 2 2.5; }
  .pt text { fill: var(--ink); font: 500 11px var(--sans); text-anchor: middle;
             pointer-events: none; paint-order: stroke; stroke: #080b10cc;
             stroke-width: 3.5px; stroke-linejoin: round; }
  /* Un segno per obiettivo, pieno se vivo: si contano, a differenza di un arco di danno
     che era una proporzione illeggibile. */
  .pip { stroke: var(--bg); stroke-width: 1; pointer-events: none; }
  .pip.alive { fill: var(--ink); } .pip.dead { fill: none; stroke: #ffffff3d; }
  /* I rinforzi comprati dall'IA, sopra il punto: rombi, per non confonderli con gli
     obiettivi. Dicono dove l'avversario ha investito. */
  .rnf { pointer-events: none; }
  .pt.blue .rnf { fill: var(--blue); } .pt.red .rnf { fill: var(--red); }

  /* La barra del meteo sopra la mappa: solo icona e valore, senza etichette. Le parole
     stanno nella card in colonna; qui serve il colpo d'occhio. */
  #strip {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: stretch; gap: 0; overflow: hidden;
    background: #0a0f16e6; border: 1px solid var(--line2); border-radius: 11px;
    box-shadow: 0 8px 26px #000a; backdrop-filter: blur(8px);
    max-width: calc(100% - 24px);
  }
  #strip .s { display: flex; align-items: center; gap: 7px; padding: 9px 13px;
              border-left: 1px solid var(--line); color: var(--dim);
              font: 12.5px var(--mono); white-space: nowrap; }
  #strip .s:first-child { border-left: 0; }
  #strip .s b { color: var(--ink); font-weight: 600; }
  #strip .s.hot { color: var(--amber); } #strip .s.hot b { color: var(--amber); }
  #strip .s.bad { color: var(--red); } #strip .s.bad b { color: var(--red); }
  #strip.vuoto { display: none; }

  #tip {
    position: absolute; pointer-events: none; opacity: 0; transition: opacity .09s;
    background: #0a0f16f7; border: 1px solid var(--line2); border-radius: 9px;
    box-shadow: 0 10px 28px #000b; padding: 9px 12px; font-size: 12.5px;
    max-width: 260px; line-height: 1.5;
  }
  #tip.on { opacity: 1; }
  #tip .h { display: flex; align-items: center; gap: 7px; font-weight: 650;
            margin-bottom: 3px; }
  #tip .m { font: 10.5px var(--mono); color: var(--faint); letter-spacing: .04em; }
  #hint { position: absolute; right: 14px; bottom: 12px; font: 10px var(--mono);
          color: #ffffff1f; pointer-events: none; }

  /* ---------------------------------------------------------------- colonna --- */

  /* La colonna delle card. Si chiama `.pannello` e non piu' `aside` da quando
     l'elemento `aside` e' la barra laterale: due cose diverse non possono avere lo
     stesso selettore. */
  .pannello { border-left: 1px solid var(--line); background: var(--bg2); padding: 11px;
              overflow-y: auto; display: flex; flex-direction: column; gap: 11px;
              min-height: 0; }
  .pannello::-webkit-scrollbar { width: 9px; }
  .pannello::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 5px; }

  .card { background: linear-gradient(180deg, var(--bg3), var(--bg2));
          border: 1px solid var(--line); border-radius: var(--r); padding: 13px; }
  .card > h2 {
    display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
    font: 650 10.5px var(--sans); text-transform: uppercase; letter-spacing: .14em;
    color: var(--dim);
  }
  /* Il quadratino prima del titolo: e' il segno che nel riferimento marca ogni
     inizio di blocco, e costa una pseudo-classe invece di un'icona in piu'. */
  .card > h2::before {
    content: ""; width: 5px; height: 5px; background: var(--line2); flex: none;
  }
  .card > h2 .i { color: var(--faint); }
  .card > h2 .n { margin-left: auto; font: 11px var(--mono); color: var(--faint);
                  letter-spacing: 0; text-transform: none; }

  /* --- riquadri: numero grande, unita' piccola, etichetta sotto. Sostituiscono le
         righe "etichetta ... valore", che erano una tabella travestita. --- */
  .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .tiles.due { grid-template-columns: repeat(2, 1fr); }
  .tile { background: #ffffff06; border: 1px solid var(--line); border-radius: 8px;
          padding: 9px 10px; }
  .tile .top { display: flex; align-items: center; gap: 6px; color: var(--faint);
               font: 650 9.5px var(--sans); letter-spacing: .1em;
               text-transform: uppercase; margin-bottom: 5px; }
  .tile .top .i { width: 13px; height: 13px; }
  .tile .val { font: 650 19px/1 var(--mono); font-variant-numeric: tabular-nums;
               letter-spacing: -.01em; }
  .tile .val u { font: 400 11px var(--mono); color: var(--dim); text-decoration: none;
                 margin-left: 3px; }
  .tile.hot { border-color: #4a3a1a; background: var(--amber-soft); }
  .tile.hot .val { color: var(--amber); }
  .tile.bad { border-color: #4d2523; background: var(--red-soft); }
  .tile.bad .val { color: var(--red); }

  /* --- la rosa dei venti: un quadrante con la lancetta. "16 kt ESE" e' un numero da
         decifrare, una lancetta si guarda. --- */
  .meteo-top { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
  .rosa { width: 96px; height: 96px; flex: none; }
  .rosa .ring { fill: #ffffff05; stroke: var(--line2); stroke-width: 1; }
  .rosa .tick { stroke: var(--line2); stroke-width: 1; }
  .rosa .tick.card { stroke: var(--faint); }
  .rosa .card-label { fill: var(--faint); font: 8px var(--mono); text-anchor: middle; }
  .rosa .needle { fill: var(--blue); }
  .rosa .needle.hot { fill: var(--amber); }
  .rosa .kt { fill: var(--ink); font: 650 17px var(--mono); text-anchor: middle; }
  .rosa .kt-u { fill: var(--faint); font: 8.5px var(--mono); text-anchor: middle; }
  .meteo-side { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
  .quota { display: flex; align-items: center; gap: 8px; font: 11.5px var(--mono);
           color: var(--dim); }
  .quota em { font-style: normal; color: var(--faint); min-width: 46px;
              font-size: 10px; letter-spacing: .06em; }
  .quota b { color: var(--ink); font-weight: 600; }
  .quota .g { flex: 1; height: 3px; background: #ffffff10; border-radius: 2px;
              overflow: hidden; }
  .quota .g div { height: 100%; background: var(--blue); border-radius: 2px; }
  .cielo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
  .cielo .i { color: var(--dim); }

  /* --- il controllo: barra piena con i conteggi dentro --- */
  .split { display: flex; height: 30px; border-radius: 8px; overflow: hidden;
           border: 1px solid var(--line); margin-bottom: 11px; }
  .split div { display: flex; align-items: center; justify-content: center; gap: 6px;
               font: 650 12px var(--mono); transition: flex-basis .45s ease; }
  .split .b { background: linear-gradient(180deg, #35659f, #274c78); color: #e6f0ff; }
  .split .r2 { background: linear-gradient(180deg, #a2463f, #7c322c); color: #ffe8e6; }
  .split .i { width: 13px; height: 13px; }

  .lato { display: flex; align-items: center; gap: 9px; padding: 7px 0;
          border-top: 1px solid var(--line); }
  .lato:first-of-type { border-top: 0; }
  .lato .nome { font: 600 12.5px var(--sans); min-width: 58px; }
  .lato.blue .nome { color: var(--blue); } .lato.red .nome { color: var(--red); }
  .lato .cifre { margin-left: auto; font: 11.5px var(--mono); color: var(--dim);
                 white-space: nowrap; }
  .lato .cifre b { color: var(--ink); font-weight: 600; }
  .cap { margin-top: 5px; }
  .cap .g { height: 4px; background: #ffffff10; border-radius: 2px; overflow: hidden; }
  .cap .g div { height: 100%; border-radius: 2px; }
  .cap.blue .g div { background: var(--blue); } .cap.red .g div { background: var(--red); }
  .cap.pieno .g div { background: var(--amber); }
  .cap .txt { display: flex; justify-content: space-between; font: 10px var(--mono);
              color: var(--faint); margin-top: 3px; }

  /* --- piloti --- */
  .pilot { display: flex; align-items: center; gap: 9px; padding: 7px 0;
           border-top: 1px solid var(--line); }
  .pilot:first-child { border-top: 0; }
  .pilot .av { width: 26px; height: 26px; border-radius: 7px; flex: none;
               display: grid; place-items: center; font: 650 11px var(--sans);
               background: var(--bg4); color: var(--dim); }
  .pilot.side2 .av { background: #24406b; color: #bcd6ff; }
  .pilot.side1 .av { background: #6b2a26; color: #ffcfcb; }
  .pilot .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; font-size: 12.5px; }
  .pilot .ping { font: 10.5px var(--mono); color: var(--faint); }

  /* --- dettaglio del punto --- */
  .tag { display: inline-flex; align-items: center; gap: 5px; font: 600 10px var(--mono);
         letter-spacing: .04em; padding: 3px 8px; border-radius: 5px; margin: 0 4px 4px 0;
         border: 1px solid var(--line2); color: var(--dim); }
  .tag .i { width: 11px; height: 11px; }
  .tag.b { color: #b6d3ff; border-color: #2f5288; background: var(--blue-soft); }
  .tag.r { color: #ffbdb8; border-color: #74352f; background: var(--red-soft); }
  .tag.w { color: var(--amber); border-color: #4a3a1a; background: var(--amber-soft); }
  .obj { display: flex; align-items: center; gap: 9px; padding: 5px 0;
         border-top: 1px solid var(--line); font-size: 12.5px; }
  .obj .i { color: var(--dim); }
  .obj .nome { flex: 1; min-width: 0; }
  .obj .st { font: 10px var(--mono); color: var(--green); letter-spacing: .06em; }
  .obj.dead { color: var(--faint); }
  .obj.dead .i { color: var(--faint); }
  .obj.dead .nome { text-decoration: line-through; }
  .obj.dead .st { color: var(--red); }

  /* --- attivita' --- */
  .tabs { display: flex; gap: 3px; margin-left: auto; }
  .tabs button { font: 650 9.5px var(--sans); letter-spacing: .12em;
                 text-transform: uppercase; color: var(--faint); background: none;
                 border: 1px solid transparent; border-radius: 6px; padding: 4px 9px;
                 cursor: pointer; }
  .tabs button.on { color: var(--ink); background: var(--bg4); border-color: var(--line2); }
  ul { list-style: none; margin: 0; padding: 0; }
  #feed li, #history li { display: flex; align-items: center; gap: 9px; padding: 6px 0;
                          border-top: 1px solid var(--line); font-size: 12.5px; }
  #feed li:first-child, #history li:first-child { border-top: 0; }
  #feed .i, #history .i { color: var(--faint); }
  #feed .t { font: 10.5px var(--mono); color: var(--faint); flex: none; min-width: 40px;
             text-align: right; }
  #feed .txt, #history .txt { flex: 1; min-width: 0; overflow: hidden;
                              text-overflow: ellipsis; white-space: nowrap; }
  .empty { color: var(--faint); font-style: italic; font-size: 12px; padding: 5px 0; }
  .dim { color: var(--dim); } .faint { color: var(--faint); }

  details { border-top: 1px solid var(--line); padding-top: 10px; }
  summary { cursor: pointer; font: 650 10.5px var(--sans); letter-spacing: .14em;
            text-transform: uppercase; color: var(--dim); }
  summary:hover { color: var(--ink); }
  .leg { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12px;
         color: var(--dim); }
  .leg svg.g { width: 20px; height: 20px; flex: none; fill: var(--ink); stroke: none; }

/* ==========================================================================
   La pagina del SERVER: una griglia di card invece di mappa piu' colonna.
   Sta qui e non in server.html perche' il linguaggio visivo deve avere un posto
   solo - la stessa ragione per cui questo file esiste.
   ========================================================================== */

/* `body.lista { display: block }` stava qui, ed e' stato un difetto vero: scritto
   quando questa pagina era un elenco sotto una barra in cima, arrivava DOPO `body.app`
   e ne annullava la griglia. Risultato, la barra laterale finiva in cima alla pagina
   come un blocco qualunque. La pagina adesso ha lo stesso telaio della mappa, quindi
   l'impianto lo decide `.app` e qui resta solo cio' che riguarda le card. */

main.griglia {
  position: static; background: none;
  /* Scorre QUI dentro e non nel body: `.schermo` e' alto quanto lo schermo e nasconde
     il traboccamento, quindi senza questa riga il fondo della pagina era irraggiungibile. */
  overflow-y: auto; min-height: 0;
  max-width: 1240px; margin: 0 auto; padding: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; align-items: start; align-content: start;
}
main.griglia .card.sp2 { grid-column: span 2; }
@media (max-width: 1080px) {
  main.griglia { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  main.griglia { grid-template-columns: 1fr; }
  main.griglia .card.sp2 { grid-column: auto; }
}

.nota { color: var(--faint); font-size: 11.5px; line-height: 1.45; margin-top: 11px; }
.nota b { color: var(--dim); font-weight: 600; }

/* --- controlli. Sono l'unica cosa in tutto il pannello che CAMBIA lo stato del
       server, e si vedono: bordo piu' chiaro, e il rosso solo dove serve. --- */

button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 12px var(--sans); color: var(--ink); border-radius: 7px;
  background: linear-gradient(180deg, var(--bg4), #131b26);
  border: 1px solid var(--line2); padding: 8px 14px; cursor: pointer;
}
button:hover { border-color: #3b4c60; }
button:active { transform: translateY(1px); }
button.larga { width: 100%; margin-top: 12px; }
button.small { font-size: 11px; padding: 5px 9px; }
button.danger { color: #ffbdb8; border-color: #5c2c28;
                background: linear-gradient(180deg, #2b1a18, #1d1211); }
button.danger:hover { border-color: #82403a; }
button .i { width: 13px; height: 13px; }

.campo { display: flex; gap: 8px; }
input[type=text] {
  flex: 1; min-width: 0; font: 12.5px var(--sans); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line2); border-radius: 7px;
  padding: 8px 11px;
}
input[type=text]:focus { outline: none; border-color: #3d6199; }
input[type=text]::placeholder { color: var(--faint); }

#esito { margin-top: 11px; font: 11.5px var(--mono); color: var(--dim);
         min-height: 1.4em; }
#esito.ko { color: var(--red); }
#esito.ok { color: var(--green); }