/* page.css — οι σελίδες αναφοράς. Το kit δίνει επτά component classes και καμία
   τυπογραφία ενότητας, οπότε ό,τι χρειάζεται ένα κείμενο ζει εδώ.

   Δύο κανόνες που κρατούν τις πύλες πράσινες:
     - κάθε πλέγμα είναι minmax(0,1fr), ποτέ σκέτο 1fr: μία μεγάλη ελληνική λέξη
       ξεχειλίζει από 1fr (που είναι minmax(AUTO,1fr)) και το QA δεν το βλέπει·
     - κάθε στόχος αγκύρωσης παίρνει scroll-margin-top, αλλιώς το sticky header
       κόβει την επικεφαλίδα στην οποία μόλις πήδηξες.

   Token surface: --accent, --line, --ink, --ink-2, --muted, --bg-1, --bg-2, --mono. */

.art{--art-w:min(72ch,100%);padding-block:clamp(2rem,5vw,3.4rem)}
.art__head{max-width:var(--art-w)}
.art__head h1{margin:.5rem 0 .8rem}
.art__lead{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--ink-2);max-width:60ch;margin:0}
.art__meta{margin-top:1.1rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem 1.1rem}

/* Πίνακας περιεχομένων: κάθετη λίστα με τη γραμμή του accent στα αριστερά —
   ίδιο σήμα με το .limit των ενοτήτων, ώστε να διαβάζεται ως το ίδιο σύστημα. */
.toc{margin:2.2rem 0 0;padding:0 0 0 1rem;border-left:2px solid var(--accent);
  max-width:var(--art-w);list-style:none;display:grid;gap:.45rem}
.toc a{color:var(--ink-2);text-decoration:none;font-size:.95rem}
.toc a:hover{color:var(--accent)}

/* Δύο στήλες μόνο όταν υπάρχει πλάτος γι' αυτές. Κάτω από το κατώφλι το
   ευρετήριο μένει απλή λίστα πάνω από το κείμενο: το markup είναι ίδιο και
   στις δύο περιπτώσεις, οπότε δεν υπάρχει δεύτερο αντίγραφο να ξεσυγχρονιστεί. */
@media(min-width:1080px){
  .art__body{display:grid;grid-template-columns:15.5rem minmax(0,1fr);
    column-gap:clamp(2rem,4vw,3.6rem);align-items:start}
  .art__body > nav{position:sticky;top:5.6rem;grid-column:1;grid-row:1;
    max-height:calc(100svh - 8rem);overflow-y:auto;overscroll-behavior:contain}
  .art__main{grid-column:2;grid-row:1;min-width:0}
  .toc{margin-top:.4rem}
  .toc a{font-size:.88rem;line-height:1.35;display:block}
  /* Το μέτρο ανάγνωσης το κρατούν οι παράγραφοι (66ch, ήδη πιο πάνω). Η ίδια η
     ενότητα ανοίγει, ώστε πίνακες και στοιχεία-κλειδιά να πιάνουν όλη τη στήλη
     αντί να στριμώχνονται σε πλάτος φτιαγμένο για πρόταση. */
  .art__main .sec,.art__main .rule{max-width:100%}
  .art__main .tw,.art__main .figs{max-width:100%}
}

.sec{padding-block:clamp(1.8rem,4vw,2.8rem);max-width:var(--art-w);scroll-margin-top:5.5rem}
.sec--wide{max-width:100%}
.sec h2{font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.02em;margin:0 0 .9rem;scroll-margin-top:5.5rem}
.sec h3{font-size:clamp(1.08rem,2vw,1.24rem);margin:1.8rem 0 .5rem;scroll-margin-top:5.5rem}
.sec p{margin:0 0 1rem;max-width:66ch}
.sec ul,.sec ol{margin:0 0 1.2rem;padding-left:1.15rem;max-width:66ch}
.sec li{margin-bottom:.45rem}
.sec a{color:var(--accent);text-underline-offset:3px}

/* Η μία επαναλαμβανόμενη κίνηση του site: μάζα μέσα σε όριο. Το σήμα το κάνει με
   δύο τετράγωνα, οι ενότητες με μια γραμμή accent πάνω από τη σειρά. */
.rule{border:0;border-top:1px solid var(--line);margin:2.4rem 0 0;max-width:var(--art-w)}

.note{border-left:3px solid var(--accent);background:var(--bg-1);
  padding:.9rem 1.1rem;margin:0 0 1.4rem;max-width:66ch;border-radius:0 6px 6px 0}
.note p{margin:0 0 .6rem}
.note p:last-child{margin:0}
.note--warn{border-left-color:var(--warn)}
.note__t{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:.4rem}

/* Πίνακες συντελεστών. Κυλούν οριζόντια μέσα στο δικό τους κουτί — ποτέ η σελίδα. */
.tw{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--line);border-radius:8px}
.coef{border-collapse:collapse;width:100%;font-size:.9rem;min-width:38rem}
.coef th,.coef td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line-2);
  vertical-align:top}
.coef thead th{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--bg-1);border-bottom-color:var(--line);white-space:nowrap}
.coef tbody tr:last-child td{border-bottom:0}
.coef td.n{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;font-weight:600}
.coef td.src{color:var(--ink-2);font-size:.84rem}
.coef .prov{display:block;color:var(--muted);font-size:.78rem;margin-top:.2rem}
.tag{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  padding:.12rem .4rem;border-radius:4px;border:1px solid var(--line);color:var(--muted);
  white-space:nowrap}
.tag--t1{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent)}
.tag--tmp{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));color:var(--warn)}

/* Στοιχεία-κλειδιά: ο αριθμός μεγάλος, η πηγή από κάτω. Χωρίς κάρτες-κουτάκια. */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:clamp(1rem,2.5vw,1.8rem);margin:0 0 1.6rem;max-width:100%}
.fig{border-top:2px solid var(--accent);padding-top:.7rem;min-width:0}
.fig__n{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums;line-height:1.05;display:block}
.fig__u{font-size:.55em;font-weight:600;color:var(--muted);margin-left:.15em}
.fig__l{color:var(--ink-2);font-size:.92rem;margin:.35rem 0 0}
.fig__s{color:var(--muted);font-size:.76rem;font-family:var(--mono);margin:.3rem 0 0;
  overflow-wrap:anywhere}

.qa{border-top:1px solid var(--line);padding:1.1rem 0;max-width:66ch}
.qa h3{margin:0 0 .5rem;font-size:1.05rem}
.qa p{margin:0}

/* Πλοήγηση στο τέλος: πού πας μετά. Δύο στήλες που πέφτουν σε μία. */
.pnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:1rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.pnav a{display:block;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:8px;
  text-decoration:none;color:var(--ink);background:var(--bg-1);min-width:0;
  transition:border-color .25s ease,background-color .25s ease}
.pnav a:hover{border-color:var(--accent);background:var(--bg-2)}
.pnav .k{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.pnav .t{font-weight:600}

@media(max-width:640px){
  .coef{min-width:32rem}
}