/* cybernet.fun — foglio di stile unico.
   Identità: un client IRC anni '90 ridisegnato con gli occhi di oggi.
   Regole: un solo accento (ambra), un solo verde di segnale, bordi 1px, nessun raggio,
   sans per la prosa, mono per la "cornice" (nav, orari, nick, metadati).
   Nessuna dipendenza esterna, nessun font scaricato, nessuna immagine. */

:root {
  --bg:         #06080a;
  --bg-1:       #0a0d11;
  --panel:      #0b0f13;
  --panel-2:    #0e1319;
  --line:       #1b222a;
  --line-2:     #121820;

  --ink:        #e3e8ee;
  --ink-dim:    #96a1ad;
  --ink-faint:  #5f6a76;
  --ink-ghost:  #414b56;

  --accent:     #f2a65a;
  --accent-dim: rgba(242,166,90,0.34);
  --accent-wash:rgba(242,166,90,0.07);
  --ok:         #62c98b;
  --bad:        #d16a5f;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 1080px;
  --prose: 68ch;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* alone caldo in alto: suggerisce un monitor acceso, non lo disegna */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 320px;
  background: radial-gradient(760px 300px at 22% -12%, rgba(242,166,90,0.09), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover { border-bottom-color: var(--accent); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.87em;
  color: #efe4d4;
}

p code, li code, dd code, td code {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* ---------- utilità ---------- */

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- testata ---------- */

.top {
  border-bottom: 1px solid var(--line);
  padding-top: 44px;
}

.top-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

.brand {
  display: inline-block;
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #f4f7fa;
  border-bottom: 0;
  margin-bottom: 12px;
}
.brand .hash { color: var(--accent); }
.brand .tld  { color: var(--ink-ghost); }
.brand:hover { color: #fff; }

.claim {
  margin: 0 0 26px;
  max-width: 62ch;
  color: var(--ink-dim);
  font-size: 15.5px;
}
.claim strong { color: var(--ink); font-weight: 500; }
.claim code { color: var(--ink-dim); }

.nav-outer { border-top: 1px solid var(--line-2); }

.nav {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav a {
  color: var(--ink-faint);
  border-bottom: 0;
  padding: 12px 12px 13px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: linear-gradient(180deg, transparent, var(--accent-wash));
}

/* ---------- corpo ---------- */

main { padding: 0 0 24px; }

.section { padding: 48px 0 12px; }
.section + .section { border-top: 1px solid var(--line-2); }

/* ---------- la finestra della livelog ---------- */

.live { padding: 40px 0 8px; }

.win {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 24px 60px -40px #000;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.win-title { color: var(--accent); }
.win-net { color: var(--ink-faint); }
.win-net::before { content: "› "; color: var(--ink-ghost); }

.win-btn {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: #0b1015;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 4px 9px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.win-btn:hover { color: var(--ink); border-color: var(--ink-ghost); }
.win-btn.is-off { color: var(--ink-ghost); }

.win-body { display: grid; grid-template-columns: minmax(0, 1fr) 212px; }

.log-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 10px;
  max-height: 58vh;
  min-height: 260px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.log-list::-webkit-scrollbar { width: 9px; }
.log-list::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 9px;
  border: 3px solid var(--panel);
}

.log-list .r {
  display: grid;
  grid-template-columns: 48px max-content minmax(0, 1fr);
  gap: 12px;
  padding: 2px 14px;
}
.log-list .r:hover { background: rgba(255,255,255,0.022); }

.log-list .t { color: var(--ink-ghost); font-size: 11.5px; padding-top: 2px; }
.log-list .n {
  color: var(--accent);
  white-space: nowrap;
  max-width: 17ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-list .n.op { color: var(--ok); }
.log-list .m { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

.log-list .r--act .m { font-style: italic; color: #d3cdc0; }
.log-list .r--act .n { color: var(--ink-faint); }

.log-list .r.ev { grid-template-columns: 48px minmax(0, 1fr); }
.log-list .r.ev .n { display: none; }
.log-list .r.ev .m { color: var(--ink-faint); font-size: 12px; }

.log-list .r--empty { display: block; padding: 16px 14px; color: var(--ink-faint); font-size: 12px; }

/* colonna dei presenti, come in un client IRC */
.nicks {
  border-left: 1px solid var(--line);
  background: var(--bg-1);
  padding: 11px 12px 14px;
  max-height: 58vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.nicks-head {
  margin: 0 0 9px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.nicks-head b { color: var(--ink-dim); font-weight: 500; }

.nicks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.85;
}
.nicks-list li {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-dim);
}
.nicks-list li.op { color: var(--ok); }
.nicks-list li.voice { color: #9fb6c9; }
.nicks-list li.me { color: var(--accent); }

.win-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.log-status { display: contents; }
.log-status .when { margin-left: auto; color: var(--ink-ghost); }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--ink-ghost);
}
.dot--on  { background: var(--ok); box-shadow: 0 0 7px rgba(98,201,139,0.65); }
.dot--off { background: var(--bad); }

.log-noscript { padding: 16px 14px; color: var(--ink-faint); font-size: 13px; margin: 0; }

/* ---------- prosa ---------- */

.prose { padding: 44px 0 8px; max-width: var(--prose); }

.prose > :first-child { margin-top: 0; }

.page-head { margin-bottom: 30px; }

.page-head .num {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.page-head h1 {
  margin: 0 0 10px;
  font-size: clamp(25px, 3.4vw, 33px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 600;
  color: #f5f8fb;
}

.page-head .sub {
  margin: 0;
  color: var(--ink-dim);
  font-size: 16px;
  max-width: 56ch;
}

.prose h2 {
  margin: 40px 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #cfd8e2;
}

.prose h3 {
  margin: 28px 0 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.prose p { margin: 0 0 17px; }
.prose p code { white-space: normal; }

.prose .lead {
  font-size: 18.5px;
  line-height: 1.66;
  color: #c8d1da;
}

.prose ul, .prose ol { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose li::marker { color: var(--ink-ghost); }

.note {
  margin: 22px 0;
  padding: 13px 16px;
  border-left: 2px solid var(--accent-dim);
  background: linear-gradient(90deg, var(--accent-wash), transparent 60%);
  color: var(--ink-dim);
  font-size: 14.5px;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); font-weight: 500; }

/* ---------- cronologia ---------- */

.timeline {
  list-style: none;
  margin: 26px 0 10px;
  padding: 0;
  border-left: 1px solid var(--line);
}

.timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0 16px 20px;
  border-bottom: 1px solid var(--line-2);
}
.timeline > li:last-child { border-bottom: 0; }

.timeline > li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 22px;
  width: 7px;
  height: 7px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.timeline > li.mark::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent-dim); }

.tl-year {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
  padding-top: 1px;
}
.tl-body { color: var(--ink-dim); font-size: 15.5px; }
.tl-body p { margin: 0 0 8px; }
.tl-body p:last-child { margin-bottom: 0; }
.tl-body strong { color: var(--ink); font-weight: 500; }
.tl-body em { color: #cfd8e2; font-style: italic; }

/* ---------- tabelle ---------- */

.table-wrap {
  margin: 22px 0 24px;
  border: 1px solid var(--line);
  overflow-x: auto;
  background: var(--panel);
  border-radius: 3px;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }

caption {
  caption-side: top;
  text-align: left;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--panel-2);
}

th, td {
  text-align: left;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}

thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255,255,255,0.02); }
td:first-child { color: var(--ink-dim); white-space: nowrap; }
td:last-child { color: var(--ink-dim); font-size: 13.5px; }

/* ---------- blocchi di codice ---------- */

pre {
  margin: 18px 0 22px;
  padding: 15px 17px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-dim);
  border-radius: 3px;
  overflow-x: auto;
  line-height: 1.75;
}
pre code { font-size: 13px; color: #dcd5c7; }

/* ---------- elenchi speciali ---------- */

.rules { list-style: none; margin: 22px 0 16px; padding: 0; }

.rules li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-dim);
  font-size: 15.5px;
}
.rules li:last-child { border-bottom: 0; }

.rules li::before {
  content: "▸";
  position: absolute;
  left: 2px;
  top: 14px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
}

.rules strong { color: var(--ink); font-weight: 600; }

.tech { margin: 22px 0 0; }

.tech dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.tech dd {
  margin: 0 0 22px;
  padding-bottom: 20px;
  color: var(--ink-dim);
  font-size: 15.5px;
  border-bottom: 1px solid var(--line-2);
}
.tech dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

.sources {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.85;
}
.sources li { color: var(--ink-faint); padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.sources li:last-child { border-bottom: 0; }
.sources a { border-bottom-color: var(--line); }
.sources .src-num { color: var(--accent); margin-right: 8px; }

/* ---------- indice in homepage ---------- */

.index { padding: 46px 0 10px; border-top: 1px solid var(--line-2); margin-top: 44px; }

.index h2 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #cfd8e2;
}

.index .index-intro { margin: 0 0 18px; color: var(--ink-faint); font-size: 14px; }

.index-list { list-style: none; margin: 0; padding: 0; }

.index-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 16px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line-2);
  transition: background 120ms ease, padding-left 120ms ease;
}
.index-list li:hover { background: rgba(255,255,255,0.02); }
.index-list li:last-child { border-bottom: 0; }

.index-list a {
  color: #eaf0f6;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 0;
}
.index-list a:hover { color: var(--accent); }

.idx-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-right: 12px;
}

.idx-desc { color: var(--ink-faint); font-size: 13.5px; }

/* ---------- pager e chiusura pagina ---------- */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 44px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* ---------- piede ---------- */

footer {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, var(--bg-1));
  padding: 30px 0 54px;
}

footer > .wrap { display: grid; gap: 22px; }

.topic { margin: 0; }

.topic .label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  margin-bottom: 7px;
}

.topic q {
  quotes: "\201C" "\201D";
  font-size: 16px;
  color: var(--ink-dim);
  font-style: italic;
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-ghost);
  margin: 0;
}

.colophon a { color: var(--ink-faint); border-bottom-color: var(--line); }
.colophon a:hover { color: var(--accent); }

.colophon span + span::before {
  content: "/";
  margin-right: 16px;
  color: var(--line);
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .win-body { grid-template-columns: 1fr; }
  .nicks { border-left: 0; border-top: 1px solid var(--line); max-height: 170px; }
  .nicks-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .top { padding-top: 30px; }
  .top-inner, .nav, .wrap { padding-left: 18px; padding-right: 18px; }
  .brand { font-size: 22px; }
  .nav { gap: 0; font-size: 10.5px; letter-spacing: 0.07em; }
  .nav a { padding: 10px 8px 11px; }
  .live { padding-top: 26px; }
  .log-list { font-size: 12.5px; max-height: 56vh; }
  .log-list .r { grid-template-columns: 40px max-content minmax(0, 1fr); gap: 8px; padding: 2px 10px; }
  .log-list .r.ev { grid-template-columns: 40px minmax(0, 1fr); }
  .log-list .n { max-width: 11ch; }
  .nicks-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section, .prose { padding-top: 34px; }
  .timeline > li { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding-left: 16px; }
  footer { padding-bottom: 40px; }
  .colophon span + span::before { content: ""; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}