/* scolile.ro — o singura foaie de stil, servita local. Fara dependinte externe. */

/* Subset romanesc: latin de baza + exact caracterele cu diacritice, 3 KB per
   greutate. Latin-ext intreg ar fi de cincisprezece ori mai mare pentru exact
   acelasi rezultat vizual. `optional` inseamna ca textul nu asteapta niciodata
   fontul: daca nu vine in prima fractiune de secunda, ramane cel de sistem. */
@font-face {
  font-family: 'Inter ro'; src: url('/assets/inter-400-ro.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
  unicode-range: U+0000-00FF, U+0102-0103, U+0131, U+0218-021B, U+2010-2027, U+201E, U+201D;
}
@font-face {
  font-family: 'Inter ro'; src: url('/assets/inter-600-ro.woff2') format('woff2');
  font-weight: 500 700; font-style: normal; font-display: optional;
  unicode-range: U+0000-00FF, U+0102-0103, U+0131, U+0218-021B, U+2010-2027, U+201E, U+201D;
}

:root {
  --ink:        #14181f;
  --ink-soft:   #454e5c;
  --ink-faint:  #6b7686;
  --line:       #e3e7ed;
  --line-soft:  #eef1f5;
  --bg:         #ffffff;
  --bg-soft:    #f7f9fb;
  --bg-sunk:    #eff3f7;

  --accent:     #1f5fbf;
  --accent-ink: #16468e;
  --accent-bg:  #eaf1fc;

  --amber:      #b26a00;
  --amber-bg:   #fdf3e3;

  --n9:  #17794a;  --n9bg:  #e6f4ec;
  --n8:  #3f7d3a;  --n8bg:  #ecf4ea;
  --n7:  #8a6a12;  --n7bg:  #f8f2e0;
  --n6:  #a75a1c;  --n6bg:  #fbeee2;
  --n5:  #b03434;  --n5bg:  #fbeaea;
  --nna: #7b8494;  --nnabg: #f0f2f5;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(20,24,31,.05), 0 4px 14px rgba(20,24,31,.05);
  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ecf2; --ink-soft: #b0b9c6; --ink-faint: #8b95a4;
    --line: #2a313c; --line-soft: #222831;
    --bg: #12151a; --bg-soft: #171b21; --bg-sunk: #1c2129;
    --accent: #74a7f0; --accent-ink: #a3c4f6; --accent-bg: #1a2739;
    --amber: #dda149; --amber-bg: #2b2317;
    --n9: #59c98d; --n9bg: #163024; --n8: #8bc47f; --n8bg: #1b2c1c;
    --n7: #d4b45c; --n7bg: #2c2717; --n6: #e0955a; --n6bg: #2f2318;
    --n5: #e57676; --n5bg: #331b1b; --nna: #8b95a4; --nnabg: #21262e;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] {
  --ink: #e8ecf2; --ink-soft: #b0b9c6; --ink-faint: #8b95a4;
  --line: #2a313c; --line-soft: #222831;
  --bg: #12151a; --bg-soft: #171b21; --bg-sunk: #1c2129;
  --accent: #74a7f0; --accent-ink: #a3c4f6; --accent-bg: #1a2739;
  --amber: #dda149; --amber-bg: #2b2317;
  --n9: #59c98d; --n9bg: #163024; --n8: #8bc47f; --n8bg: #1b2c1c;
  --n7: #d4b45c; --n7bg: #2c2717; --n6: #e0955a; --n6bg: #2f2318;
  --n5: #e57676; --n5bg: #331b1b; --nna: #8b95a4; --nnabg: #21262e;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16.5px/1.6 'Inter ro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 640; letter-spacing: -.011em; }
h1 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.3rem); letter-spacing: -.021em; }
h2 { font-size: clamp(1.22rem, 1.05rem + .75vw, 1.5rem); margin-top: 2.2rem; }
h3 { font-size: 1.06rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
img, svg { max-width: 100%; height: auto; }
small { font-size: .82rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff;
  padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ antet */
.site-head {
  border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(1.6) blur(8px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.head-in { display: flex; align-items: center; gap: 1.4rem; height: 62px; }
.logo { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.16rem;
        color: var(--ink); text-decoration: none; letter-spacing: -.02em; flex: 0 0 auto; }
.logo:hover { color: var(--ink); }
.logo svg { display: block; }
.nav { display: flex; gap: 1.15rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: .935rem; font-weight: 500; padding: .35rem 0; }
.nav a:hover, .nav a[aria-current] { color: var(--accent); }
.nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }

/* ------------------------------------------------------------- cautare */
.search { position: relative; flex: 1 1 260px; max-width: 380px; }
.search input {
  width: 100%; padding: .5rem .8rem .5rem 2.6rem; font: inherit; font-size: .93rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--ink);
}
.search input:focus { background: var(--bg); border-color: var(--accent); outline: none;
                      box-shadow: 0 0 0 3px var(--accent-bg); }
.search svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); }

/* ------------------------------------------------------------ firimituri */
.crumbs { font-size: .85rem; color: var(--ink-faint); padding: 1rem 0 .2rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li::after { content: '›'; margin-left: .4rem; color: var(--line); }
.crumbs li:last-child::after { content: ''; }
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

main { padding-bottom: 4rem; min-height: 60vh; }
.lead { font-size: 1.08rem; color: var(--ink-soft); max-width: 68ch; }

/* ------------------------------------------------------------------ erou */
.hero { padding: 2.4rem 0 1.2rem; }
.hero h1 { max-width: 20ch; }
.hero .lead { margin-top: .9rem; }

.stat-row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 1.8rem 0; }
.stat {
  background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: .95rem 1.05rem;
}
.stat .k { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
           color: var(--ink-faint); font-weight: 600; }
.stat .v { display: block; font-size: 1.62rem; font-weight: 680; letter-spacing: -.02em; margin-top: .15rem; }
.stat .s { display: block; font-size: .82rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------- carduri */
.grid { display: grid; gap: 1rem; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem 1.15rem;
  background: var(--bg); display: block; text-decoration: none; color: inherit;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
a.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
               box-shadow: var(--shadow); transform: translateY(-1px); }
.card h3 { margin: 0 0 .3rem; font-size: 1rem; }
.card p  { margin: 0; font-size: .88rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------- tabele */
.tw { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: .62rem .8rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
th { background: var(--bg-soft); font-weight: 620; font-size: .8rem; text-transform: uppercase;
     letter-spacing: .04em; color: var(--ink-faint); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-soft); }
td.num, th.num { text-align: right; }
td.name { white-space: normal; min-width: 210px; }
.rank { color: var(--ink-faint); font-size: .84rem; width: 1%; }

/* -------------------------------------------------------------- pastile */
.n { display: inline-block; padding: .12rem .5rem; border-radius: 6px; font-weight: 640; font-size: .88rem; }
.n-9 { background: var(--n9bg); color: var(--n9); }
.n-8 { background: var(--n8bg); color: var(--n8); }
.n-7 { background: var(--n7bg); color: var(--n7); }
.n-6 { background: var(--n6bg); color: var(--n6); }
.n-5 { background: var(--n5bg); color: var(--n5); }
.n-na{ background: var(--nnabg); color: var(--nna); }

.tag { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .76rem;
       background: var(--bg-sunk); color: var(--ink-faint); font-weight: 600; }
.tag.acc { background: var(--accent-bg); color: var(--accent-ink); }
.tag.amber { background: var(--amber-bg); color: var(--amber); }

/* --------------------------------------------------------- bare si grafic */
.bar { background: var(--bg-sunk); border-radius: 4px; height: 8px; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.bar.g > i { background: var(--n9); }

.dist { display: flex; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); }
.dist > span { display: block; font-size: .7rem; color: #fff; text-align: center; line-height: 26px; }
.dist .d9 { background: #17794a; } .dist .d8 { background: #4b8f42; }
.dist .d7 { background: #b08a18; } .dist .d6 { background: #c4703a; }
.dist .d5 { background: #bf4444; } .dist .d0 { background: #97a0ae; }

/* Evolutie: grafic SVG inline, fara biblioteci. */
.chart { width: 100%; height: auto; display: block; }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .ln { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .ar { fill: var(--accent); opacity: .09; }
.chart .pt { fill: var(--bg); stroke: var(--accent); stroke-width: 2.2; }
.chart text { font-size: 11px; fill: var(--ink-faint); }

/* ----------------------------------------------------------------- note */
.note {
  background: var(--bg-soft); border: 1px solid var(--line-soft); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; padding: .85rem 1.05rem; font-size: .92rem;
  color: var(--ink-soft); margin: 1.4rem 0;
}
.note.warn { border-left-color: var(--amber); background: var(--amber-bg); color: var(--ink-soft); }
.note p:last-child { margin: 0; }

.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------- butoane */
.btn {
  display: inline-block; padding: .58rem 1.15rem; border-radius: 8px; font-weight: 600; font-size: .95rem;
  background: var(--accent); color: #fff; text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.btn:hover { background: var(--accent-ink); color: #fff; }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); background: var(--accent-bg); }

/* ------------------------------------------------------------- formulare */
label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
  width: 100%; padding: .6rem .75rem; font: inherit; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.field { margin-bottom: 1rem; }

/* ---------------------------------------------------------------- subsol */
.site-foot {
  border-top: 1px solid var(--line); background: var(--bg-soft); padding: 2.2rem 0 2.6rem;
  font-size: .88rem; color: var(--ink-faint); margin-top: 3rem;
}
.foot-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.site-foot h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: .55rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .3rem; }
.site-foot a { color: var(--ink-faint); text-decoration: none; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }
.legal { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .82rem; line-height: 1.65; }

/* ------------------------------------------------------------ consimtamant */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; max-width: 640px; margin: 0 auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 34px rgba(20,24,31,.18); padding: 1rem 1.1rem; font-size: .89rem;
}
.cookie p { margin: 0 0 .7rem; color: var(--ink-soft); }
.cookie .row { display: flex; gap: .55rem; flex-wrap: wrap; }
.cookie .btn { padding: .45rem .95rem; font-size: .88rem; }

/* --------------------------------------------------------------- utilitare */
.muted { color: var(--ink-faint); }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.split { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.chips a { display: inline-block; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line);
           font-size: .86rem; text-decoration: none; color: var(--ink-soft); background: var(--bg); }
.chips a:hover, .chips a[aria-current] { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* Etichetele de context stau intr-un rand care se rupe, nu intr-un paragraf:
   la 390 px, trei etichete pe un rand ies din ecran si ultima e taiata. */
.taguri { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }

@media (max-width: 760px) {
  .head-in { height: auto; padding: .7rem 0; flex-wrap: wrap; gap: .6rem; }
  /* Meniul primeste o linie proprie si voie sa se rupa. Fara `width: 100%` nu
     se rupe deloc: ramane pe un rand si iese din ecran, iar `overflow-x: hidden`
     de pe body il ascunde in loc sa il repare. */
  .nav { order: 2; width: 100%; margin-left: 0; gap: 1rem; justify-content: flex-start; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .logo { order: 1; }
  body { font-size: 16px; }
  th, td { padding: .55rem .6rem; }
  .stat .v { font-size: 1.42rem; }
  .hero { padding: 1.6rem 0 1rem; }
}

@media (max-width: 420px) {
  .nav { gap: .8rem; font-size: .9rem; }
  .nav a { font-size: .88rem; }
}