/* ===== Base ===== */
:root {
  --bg: #fdf6e3;           /* carta pergamena */
  --paper: #ffffff;        /* fondo contenuti */
  --ink: #1a1a1a;          /* testo principale */
  --accent: #7a5c2e;       /* dettagli classici */
  --line: #333333;         /* bordi/stemma */
  --muted: #666666;        /* testo secondario */
  --focus: #b58900;        /* focus/accessibilità */
  --shadow: 0 2px 10px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Georgia", "Garamond", "Times New Roman", serif;
  line-height: 1.5;
}

/* ===== Navigazione ===== */
nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
}
nav h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--accent);
}
nav button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  box-shadow: var(--shadow);
}
nav button:hover { transform: translateY(-1px); }
nav button:active { transform: translateY(0); }
nav button:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ===== Layout principale ===== */
main#app {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* ===== Titoli ===== */
h1, h2, h3, h4 {
  margin: 0 0 12px;
}
h2 {
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

/* ===== Form e input ===== */
form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  margin-bottom: 16px;
}
input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
input::placeholder { color: var(--muted); }
button[type="submit"], .btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  box-shadow: var(--shadow);
}
button[type="submit"]:hover, .btn:hover { transform: translateY(-1px); }

/* ===== Lista testimoni ===== */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li {
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

/* ===== Collatio: segmenti e varianti ===== */
.segment {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.segment h4 { margin-bottom: 8px; }
.segment label {
  display: block;
  margin-bottom: 8px;
}
.segment .variant {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px;
  margin: 8px 0;
  border: 1px dashed #bbb;
  border-radius: 6px;
  background: #fffdf7;
}
.segment .variant strong {
  color: var(--accent);
}

/* ===== Diff highlighting ===== */
.diff-add { 
  background: #eaffea; 
  color: #0f5b0f; 
  border-radius: 3px; 
  padding: 0 2px; 
}
.diff-del { 
  background: #ffecec; 
  color: #8a1f1f; 
  border-radius: 3px; 
  padding: 0 2px; 
}

/* ===== Edizione (output) ===== */
pre {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  box-shadow: var(--shadow);
  overflow: auto;
}

/* ===== Stemma SVG ===== */
svg#stemmaSVG {
  width: 100%;
  height: auto;
  max-height: 60vh;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* Nodo interattivo: hover elegante */
svg#stemmaSVG circle {
  transition: fill 160ms ease, stroke 160ms ease, r 160ms ease;
}
svg#stemmaSVG circle:hover {
  fill: #e6d6a8;  /* caldo, manoscritto */
  stroke: #2b2b2b;
}

/* Testo nodo */
svg#stemmaSVG text {
  font-family: "Georgia", "Garamond", serif;
  font-weight: 600;
  fill: var(--ink);
}

/* Tooltip globale (posizionato via JS) */
#tooltip {
  position: absolute;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: none;           /* verrà impostato a block via JS */
  pointer-events: none;    /* evita conflitti con drag */
  max-width: 240px;
}
#tooltip h5 {
  margin: 0 0 6px;
  color: var(--accent);
}

/* ===== Pulsante “+ Segmento” ===== */
#addSeg {
  margin-top: 10px;
}

/* ===== Responsività ===== */
@media (max-width: 900px) {
  form {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  nav { flex-wrap: wrap; gap: 8px; }
  form {
    grid-template-columns: 1fr;
  }
  .segment .variant {
    grid-template-columns: 1fr;
  }
  svg#stemmaSVG {
    max-height: 50vh;
  }
}

/* ===== Piccoli tocchi classici ===== */
/* Iniziali dei titoli con leggero ornamento */
h2::first-letter {
  color: var(--accent);
  font-size: 1.2em;
}
.scheda {
  background: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@media print {
  nav, button, #printBtn {
    display: none; /* nasconde menu e pulsanti in stampa */
  }
  body {
    background: #fff;
  }
  .scheda {
    box-shadow: none;
    border: none;
  }
}
@media print {
  nav, button, #printBtn {
    display: none;
  }
  body {
    background: #fff;
  }
  .scheda {
    box-shadow: none;
    border: none;
  }
}