/* ════════════════════════════════════════════════════════════════════
   theory-neg.css — Έκθεση & Λογοτεχνία (kind:'neg') — NEG-only bits.
   The engine reuses .tr-* / .syx-* from theory-syntax.css; here live
   only the new pieces: passage blocks, match columns, cite lines.
   ════════════════════════════════════════════════════════════════════ */

/* ── απόσπασμα κειμένου (stem των ασκήσεων passage/choice) ── */
.neg-passage {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--bone);
  border-left: 2px solid var(--line-hi);
  padding: 4px 0 4px 18px;
  margin: 10px 0 14px;
  max-width: 780px;
}
.neg-passage b { color: var(--gold); font-weight: 600; }
.neg-cite {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--stone);
  margin-top: 8px;
}

/* ── αντιστοίχιση (match) ── */
.neg-match {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 780px;
  margin-top: 10px;
}
.neg-mcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.neg-mhead {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--stone);
  margin-bottom: 2px;
}
.neg-mitem {
  font-family: var(--f-sans);
  font-size: 14.5px;
  line-height: 1.45;
  text-align: left;
  color: var(--bone);
  background: var(--inset);
  border: 1px solid var(--line-hi);
  border-radius: 8px;
  padding: 10px 13px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.neg-mitem:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.neg-mitem.sel { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.neg-mitem.locked {
  border-color: var(--sage);
  color: var(--sage);
  background: color-mix(in srgb, var(--sage) 8%, transparent);
  cursor: default;
  opacity: .85;
}

/* worked example: τα chunks της έκθεσης είναι φράσεις, όχι λέξεις */
.neg-worked .syx-chunk { font-size: 17.5px; line-height: 2.1; }

/* ── «Στην εξέταση»: εκφώνηση → πρότυπο απάντησης (πεδίο exam του block) ── */
.neg-exam {
  max-width: 820px;
  margin: 18px 0 6px;
  padding: 14px 18px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--terra);
  border-radius: 3px;
  background: var(--inset);
}
.neg-exam-k {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--terra);
}
.neg-exam-it { margin-top: 10px; }
.neg-exam-it + .neg-exam-it { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.neg-exam .lab {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--stone);
  margin-bottom: 4px;
}
.neg-exam-q { font-family: var(--f-serif); font-size: 17px; line-height: 1.5; color: var(--bone); }
.neg-exam-a {
  margin-top: 10px;
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--cream) 86%, transparent);
}
.neg-exam b { color: var(--bone); font-weight: 600; }
.neg-exam em { color: var(--terra); font-style: normal; }

/* ── καρτέλα «Εξέταση»: το κείμενο της εκφώνησης, η πηγή της, η φόρτωση ── */
.neg-exam-src {
  padding: 18px 22px 20px;
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--bone);
  overflow-wrap: break-word;
}
.neg-exam-src b { color: var(--gold); font-weight: 600; }
.neg-exam-from {
  margin: 10px 0 0 34px;
  font-family: var(--f-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--stone);
}
.neg-exam-wait {
  margin-top: 12px;
  font-family: var(--f-sans);
  font-size: 13.5px;
  color: var(--stone);
}

/* ── σύνδεσμοι μέσα στη θεωρία (Χάρτης εξέτασης, «δες και…») ──
   Ανοίγουν άλλο μάθημα/κεφάλαιο στο ίδιο παράθυρο (js/theory-neg.js). */
a.neg-go {
  color: var(--terra);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  cursor: pointer;
}
a.neg-go:hover,
a.neg-go:focus-visible { color: var(--gold); text-decoration-thickness: 2px; }
a.neg-go:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.syx-th-table td a.neg-go { white-space: normal; }

/* ── ευρετήριο σε στήλες (block με `stack`): στο κινητό, μία κάρτα ανά γραμμή,
   με την επικεφαλίδα της στήλης πάνω από κάθε κελί (data-label). ── */
@media (max-width: 720px) {
  .syx-th-tablewrap.neg-stack { overflow-x: visible; }
  .neg-stack .syx-th-table,
  .neg-stack .syx-th-table tbody,
  .neg-stack .syx-th-table tr,
  .neg-stack .syx-th-table th.rh,
  .neg-stack .syx-th-table td { display: block; width: auto; }
  .neg-stack .syx-th-table thead { display: none; }
  .neg-stack .syx-th-table tr {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px 14px 10px;
    margin: 0 0 12px;
    background: var(--inset);
  }
  .neg-stack .syx-th-table th.rh {
    white-space: normal;
    background: none;
    border: 0;
    padding: 0 0 4px;
    font-size: 17px;
  }
  .neg-stack .syx-th-table td { border: 0; padding: 8px 0 0; }
  .neg-stack .syx-th-table tr:hover td { background: none; }
  .neg-stack .syx-th-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--stone);
    margin-bottom: 3px;
  }
}

@media (max-width: 720px) {
  .neg-match { grid-template-columns: 1fr; }
  .neg-exam { padding: 12px 14px 14px; }
  .neg-exam-q { font-size: 16px; }
  .neg-exam-a { font-size: 15.5px; }
  .neg-passage { font-size: 16.5px; }
  .neg-exam-src { padding: 14px 16px 16px; font-size: 16px; }
  .neg-exam-from { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   theory-neg-toc.css — «Περιεχόμενα» στο πλάι για τις θεματικές
   ενότητες της Έκθεσης (kind:'neg', viewTheory με 4+ κεφάλαια).
   Αντικαθιστά το chip-wall (.neg-chapnav). Οικογένεια: το sidebar των
   study modules (games/gnwsto/study.css .unit-link), μεταφρασμένο στα
   tokens του .tr ώστε να δουλεύει με ΟΛΕΣ τις παλέτες + το ☀/☾/◐.
   Προσάρτησέ το στο τέλος του css/theory-neg.css (ή φόρτωσέ το μετά).
   F-019: τα κεφαλαία είναι γραμμένα στην πηγή, όχι text-transform.
   ════════════════════════════════════════════════════════════════════ */

.ntoc-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:0 44px;margin-top:30px;align-items:start}

/* ── το πλαϊνό ευρετήριο ── */
.ntoc-in{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 18px 0;scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent}
.ntoc-in::-webkit-scrollbar{width:4px}
.ntoc-in::-webkit-scrollbar-thumb{background:var(--line-hi);border-radius:2px}
.ntoc-head{display:flex;align-items:baseline;gap:10px;width:100%;padding:4px 0 0;background:none;border:0;text-align:left;cursor:default;color:inherit}
.ntoc-head .lab{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.28em;color:var(--gold)}
.ntoc-head .cur{flex:1;min-width:0;font-family:var(--f-serif);font-size:15px;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none}
.ntoc-head .pos{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--stone);white-space:nowrap}
.ntoc-head .chev{font-family:var(--f-mono);font-size:11px;color:var(--stone);transition:transform .2s;display:none}
.ntoc-meter{display:flex;align-items:center;gap:10px;margin-top:11px}
.ntoc-meter .track{flex:1;height:3px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.ntoc-meter .track i{display:block;height:100%;width:0;background:var(--gold);border-radius:2px;transition:width .3s}
.ntoc-meter .mc{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--stone);white-space:nowrap}
.ntoc-list{display:flex;flex-direction:column;margin-top:12px}
.ntoc-it{display:flex;gap:11px;align-items:baseline;width:100%;text-align:left;background:transparent;border:0;border-left:3px solid transparent;padding:9px 10px 9px 12px;color:var(--stone);font-family:var(--f-sans);font-size:13.5px;line-height:1.35;cursor:pointer;transition:all .16s}
.ntoc-it:hover{color:var(--cream);background:color-mix(in srgb,var(--gold) 5%,transparent)}
.ntoc-it .n{font-family:var(--f-mono);font-size:11px;min-width:20px;color:var(--gold);opacity:.8;white-space:nowrap}
.ntoc-it .tt{flex:1;min-width:0}
.ntoc-it.active{color:var(--bone);background:color-mix(in srgb,var(--gold) 9%,transparent);border-left-color:var(--gold);font-weight:600}
.ntoc-it.seen:not(.active) .n::after{content:' ✓';font-size:9px;color:var(--sage)}

/* ── δεξιά στήλη ── */
.ntoc-main{min-width:0}
.ntoc-cite{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;color:var(--terra);margin-bottom:4px}
/* sticky μπάρα μέρους — μόνο σε κινητό */
.ntoc-bar{display:none;position:sticky;top:8px;z-index:5;align-items:center;gap:10px;margin:0 0 18px;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:0 4px 16px color-mix(in srgb,var(--ink,#000) 14%,transparent)}
.ntoc-bar .nb{width:34px;height:34px;flex-shrink:0;border:1px solid var(--line-soft);border-radius:2px;background:none;color:var(--cream);font-family:var(--f-mono);font-size:14px;cursor:pointer}
.ntoc-bar .nb:hover{border-color:var(--gold);color:var(--gold)}
.ntoc-bar .nb[disabled]{opacity:.35;pointer-events:none}
.ntoc-bar .mid{flex:1;min-width:0;display:flex;align-items:baseline;gap:9px;background:none;border:0;text-align:left;padding:0;cursor:pointer}
.ntoc-bar .mid .p{font-family:var(--f-mono);font-size:11px;color:var(--gold);white-space:nowrap}
.ntoc-bar .mid .t{font-family:var(--f-serif);font-size:14.5px;font-weight:600;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* πλοήγηση στο πόδι */
.ntoc-pager{display:flex;justify-content:space-between;gap:12px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line-soft)}
.ntoc-pg{background:none;border:1px solid var(--line-soft);color:var(--cream);padding:11px 16px;border-radius:3px;font-size:13.5px;max-width:48%;min-width:0;text-align:left;cursor:pointer;transition:all .16s;font-family:var(--f-sans)}
.ntoc-pg.nx{text-align:right}
.ntoc-pg:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 6%,transparent)}
.ntoc-pg[disabled]{opacity:.35;pointer-events:none}
.ntoc-pg .lbl{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--stone);margin-bottom:3px}
.ntoc-pg .pt{display:block;font-family:var(--f-serif);font-weight:600;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── κινητό (≤940, το breakpoint --bp-lg του tokens.css) ── */
@media (max-width:940px){
.ntoc-layout{display:block}
.ntoc{border:1px solid var(--line);border-radius:3px;background:var(--panel);overflow:hidden;margin-bottom:22px}
.ntoc-in{position:static;max-height:none;overflow:visible;padding:0 14px 4px}
.ntoc-head{cursor:pointer;padding:13px 0}
.ntoc-head .chev{display:block}
.ntoc:not(.open) .ntoc-head .cur{display:block}
.ntoc:not(.open) .ntoc-head .pos{display:none}
.ntoc:not(.open) .ntoc-meter,.ntoc:not(.open) .ntoc-list{display:none}
.ntoc.open .ntoc-head .chev{transform:rotate(180deg)}
.ntoc.open .ntoc-in{padding-bottom:14px}
.ntoc-it{min-height:44px;padding:11px 10px 11px 12px;font-size:14.5px}
.ntoc-bar{display:flex}
}

/* ΤΟ ΙΔΙΟ ΝΟΥΜΕΡΟ ΔΥΟ ΦΟΡΕΣ. Το πακέτο τύπωνε το «04 / 24» και στην
   κεφαλίδα (.ntoc-head .pos) και δίπλα στην μπάρα προόδου
   (.ntoc-meter .mc) — δύο σειρές τη μία κάτω από την άλλη, με 11px
   ανάμεσά τους. Μένει αυτό που εξηγεί την μπάρα· η κεφαλίδα κρατά
   μόνο τη λέξη «ΠΕΡΙΕΧΟΜΕΝΑ» (και, στο κινητό κλειστό, τον τρέχοντα
   τίτλο). Αν το διπλό ήταν σκόπιμο, σβήσε αυτόν τον κανόνα. */
.ntoc-head .pos { display: none; }

/* ΤΟ STICKY ΔΕΝ ΚΟΛΛΟΥΣΕ. Το .ntoc-layout έχει align-items:start, άρα το
   <aside> έπαιρνε ΑΚΡΙΒΩΣ το ύψος του περιεχομένου του — μετρημένο στον
   φυλλομετρητή: aside 932px, .ntoc-in 932px. Ένα sticky στοιχείο κολλάει
   μόνο όσο έχει χώρο να ταξιδέψει μέσα στο περιέχον μπλοκ του· με μηδέν
   περιθώριο, απλώς κυλούσε μαζί με τη σελίδα. Το aside τεντώνει τώρα σε
   όλο το ύψος της γραμμής (το ψηλό είναι η δεξιά στήλη), και το
   .ntoc-in μένει καπελωμένο στο 100vh — εκεί γεννιέται το ταξίδι. */
.ntoc { align-self: stretch; }