/* MateSim blog: static article pages (generated by scripts/build_blog.py). Same tokens as the app (css/base.css, css/edu.css). */
:root{--bg:#faf6ee; --card:#ffffff; --ink:#2a2622; --muted:#6d665d; --line:#e9e3d8; --line2:#d6cfc2;
  --acc:#2c56d6; --acc-w:#e7edfd; --acc-h:#2146b5; --on-acc:#fff; --hd-bg:#0c1f4d; --sun:#d98a1f; --tm:#d9771e; --good:#1f7a3d; --good-w:#e6f4ea}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1b1410; --card:#2a211a; --ink:#f3eae0; --muted:#b5a594;
  --line:#3b2f26; --line2:#55463a; --acc:#8aa6f6; --acc-w:#222a45; --acc-h:#a9bff9; --on-acc:#10182e; --hd-bg:#120d0a; --sun:#f2ad52; --good:#7fd19b; --good-w:#1c3324}}
:root[data-theme="dark"]{--bg:#1b1410; --card:#2a211a; --ink:#f3eae0; --muted:#b5a594; --line:#3b2f26; --line2:#55463a;
  --acc:#8aa6f6; --acc-w:#222a45; --acc-h:#a9bff9; --on-acc:#10182e; --hd-bg:#120d0a; --sun:#f2ad52; --good:#7fd19b; --good-w:#1c3324}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.7 "Plus Jakarta Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--acc)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--acc); outline-offset:2px; border-radius:6px}

.brand{font-weight:800; font-size:20px; letter-spacing:-.02em; color:inherit; text-decoration:none}
.brand b{color:var(--acc); font-weight:800}
.btn{display:inline-flex; align-items:center; gap:6px; background:var(--acc); color:var(--on-acc); text-decoration:none;
  font-weight:700; font-size:15px; padding:10px 18px; border-radius:12px; transition:background .15s}
.btn:hover{background:var(--acc-h)}

/* header */
.bh{background:var(--hd-bg); color:#fff}
.bh-in{max-width:1600px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.bh .brand b{color:#9fb6ff}
.bh nav{display:flex; align-items:center; gap:18px}
.bh nav a:not(.btn){color:#fff; text-decoration:none; font-weight:600; opacity:.85}
.bh nav a:not(.btn):hover,.bh nav a[aria-current]{opacity:1; text-decoration:underline; text-underline-offset:5px}
.bh .btn{background:#fff; color:#0c1f4d; padding:8px 14px}
.bh .btn:hover{background:#e7edfd}

/* blog home and category pages */
main{max-width:1240px; margin:0 auto; padding:24px 16px 56px}

/* article: a full-width hero, then outline | text | practice card */
main.post{max-width:none; padding:0 0 56px}
.hero{background:var(--card); border-bottom:1px solid var(--line)}
.hero-in{max-width:1600px; margin:0 auto; padding:28px 24px 30px}
.hero h1{font-size:clamp(30px,4.2vw,50px); max-width:22ch; margin:6px 0 12px}
.hero .lead{max-width:70ch; font-size:20px}
.meta .cat{display:inline-block; font-weight:700; color:var(--acc); background:var(--acc-w); padding:1px 10px; border-radius:99px; margin-right:10px}
.post-grid{max-width:1600px; margin:0 auto; padding:28px 24px 0; display:grid; gap:48px;
  grid-template-columns:250px minmax(0,1fr) 290px}
.side .toc{position:sticky; top:20px; background:transparent; border:0; padding:0; margin:0}
.side .toc p{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.side .toc ol{list-style:none; padding:0; font-size:14.5px; line-height:1.45}
.side .toc li{margin:0}
.side .toc a{display:block; padding:7px 10px; border-left:3px solid var(--line); color:var(--ink)}
.side .toc a:hover{border-left-color:var(--acc); color:var(--acc); text-decoration:none}
.rail-card{position:sticky; top:20px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px}
.rail-card .pat{width:86px; display:block; margin:-4px auto 6px}
.rail-h{font-weight:800; font-size:17px; margin:0 0 4px; text-align:center}
.rail-p{font-size:14px; color:var(--muted); line-height:1.5; margin:0 0 12px; text-align:center}
.rail-card a{display:flex; justify-content:space-between; gap:8px; padding:10px 12px; margin-top:8px; border:1px solid var(--line2);
  border-radius:12px; text-decoration:none; font-weight:700; font-size:14.5px; color:var(--ink)}
.rail-card a:hover{border-color:var(--acc); color:var(--acc)}
.rail-card a span{color:var(--acc)}
.post-end{max-width:1600px; margin:0 auto; padding:0 24px}
.body{min-width:0}
@media (min-width:1400px){.body{font-size:18px}}
@media (max-width:1500px){.post-grid{grid-template-columns:220px minmax(0,1fr)}.rail{display:none}}
@media (max-width:900px){.post-grid{grid-template-columns:1fr; gap:0}
  .side .toc{position:static; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin:0 0 8px}
  .hero-in,.post-grid,.post-end{padding-left:16px; padding-right:16px}}
.crumbs{font-size:14px; color:var(--muted); margin-bottom:8px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--acc)}
.ph{margin:8px 0 28px}
.kick{font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--muted); margin:0 0 6px}
h1{font-size:clamp(30px,5vw,42px); line-height:1.15; letter-spacing:-.025em; font-weight:800; margin:0 0 14px}
h1 em{font-style:normal; color:var(--acc)}
.lead{font-size:19px; color:var(--muted); margin:0 0 10px}
.meta{font-size:14px; color:var(--muted); margin:0}

.toc{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 20px; margin:0 0 32px}
.toc p{margin:0 0 6px; font-weight:800; font-size:15px}
.toc ol{margin:0; padding-left:22px; font-size:15px; line-height:1.9}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

.body h2{font-size:27px; line-height:1.25; letter-spacing:-.015em; margin:44px 0 12px; scroll-margin-top:16px}
.body h3{font-size:20px; line-height:1.35; margin:30px 0 8px; scroll-margin-top:16px}
.body p,.body li{overflow-wrap:break-word}
.body ul,.body ol{padding-left:24px}
.body li{margin:4px 0}
.body strong{font-weight:700}
.body blockquote{margin:20px 0; padding:14px 18px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--acc);
  border-radius:12px; color:var(--ink)}
.body blockquote p{margin:6px 0}
.body hr{border:0; border-top:1px solid var(--line2); margin:36px 0}
.body code{font-size:.9em; background:var(--acc-w); padding:1px 6px; border-radius:6px}

/* a requirement and its barem solution */
.body .ex{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:4px 20px; margin:18px 0}

.tw{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:14px; background:var(--card)}
.body table{border-collapse:collapse; width:100%; font-size:15.5px}
.body th,.body td{padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.body tr:last-child td{border-bottom:0}
.body th{font-weight:700; background:var(--acc-w)}
.body td:last-child,.body th:last-child{white-space:nowrap}

.katex{font-size:1.06em}
.katex-display{overflow-x:auto; overflow-y:hidden; padding:4px 0}

.cta{margin:32px 0; padding:20px 22px; background:var(--card); border:1px solid var(--line); border-radius:16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.cta p{margin:0; font-weight:600; flex:1 1 260px}

/* cards (blog index, "Mai citește") */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px;
  color:var(--ink); text-decoration:none; transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--acc); transform:translateY(-2px)}
.card h3{font-size:19px; line-height:1.3; margin:8px 0}
.card p{margin:0 0 14px; color:var(--muted); font-size:15px; line-height:1.55; flex:1}
.card .more{color:var(--acc); font-weight:700; font-size:15px}
.tags{display:flex; gap:6px; flex-wrap:wrap}
.tags span{font-size:12px; font-weight:700; color:var(--acc); background:var(--acc-w); padding:2px 9px; border-radius:99px}
.rel{margin-top:56px; padding-top:28px; border-top:1px solid var(--line2)}
.rel h2{font-size:22px; margin:0 0 14px}

/* footer */
.bf{border-top:1px solid var(--line2)}
.bf-in{max-width:1600px; margin:0 auto; padding:24px 16px 32px; font-size:14px; color:var(--muted)}
.bf-in p{margin:0 0 10px}
.bf nav{display:flex; flex-wrap:wrap; gap:6px 18px}
.bf nav a{color:var(--muted); text-decoration:none}
.bf nav a:hover{color:var(--acc)}

/* accessibility helpers */
.skip{position:absolute; left:-999px; top:8px; background:var(--card); color:var(--ink); padding:8px 12px; border-radius:8px; z-index:9}
.skip:focus{left:12px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.btn.sm{font-size:14px; padding:8px 14px; border-radius:10px}

/* Pătrățel (the app's mascot, from js/art.js) */
.pat{width:120px; height:auto; flex:none}

/* blog home: search, category chips, featured article */
.search{margin:0 0 14px}
.search input{width:100%; font:inherit; font-size:16px; padding:12px 16px; border-radius:14px; border:1px solid var(--line2);
  background:var(--card); color:var(--ink)}
.search input:focus{outline:3px solid var(--acc-w); border-color:var(--acc)}
.search p{color:var(--muted); margin:10px 2px 0}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.chips a{font-size:14px; font-weight:700; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line2);
  padding:6px 14px; border-radius:99px}
.chips a:hover{border-color:var(--acc); color:var(--acc)}
.chips a[aria-current]{background:var(--acc); border-color:var(--acc); color:var(--on-acc)}
.feat{display:flex; align-items:center; gap:24px; justify-content:space-between; background:var(--card); border:1px solid var(--line);
  border-left:5px solid var(--acc); border-radius:18px; padding:24px 28px; margin:0 0 18px; color:var(--ink); text-decoration:none}
.feat:hover{border-color:var(--acc)}
.feat h2{font-size:clamp(22px,3vw,28px); line-height:1.25; letter-spacing:-.015em; margin:10px 0 8px}
.feat p{color:var(--muted); margin:0 0 12px}
.feat .more{color:var(--acc); font-weight:700}
body.searching .feat,body.searching .chips{display:none}
.tags .rt{color:var(--muted); background:transparent; padding-left:0}

/* official exercise card ([[ex: uid]]) */
.body .official{border-left:4px solid var(--acc)}
.body .exk{font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--muted); margin:14px 0 4px}
.body details{margin:6px 0 14px}
.body summary{cursor:pointer; font-weight:700; color:var(--acc); padding:4px 0}
.body .official .btn{margin:0 0 16px}

/* end of article: next steps, sources */
.next{margin:48px 0 0; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px}
.next-hd{display:flex; align-items:center; gap:16px; margin-bottom:14px}
.next-hd .pat{width:84px}
.next h2{font-size:22px; margin:0 0 4px}
.next-hd p{margin:0; color:var(--muted); font-size:15px}
.steps{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.step{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--line2); border-radius:12px; text-decoration:none; color:var(--ink)}
.step:hover{border-color:var(--acc)}
.step b{color:var(--acc); font-size:15px}
.step span{font-size:13.5px; color:var(--muted); line-height:1.45}
.src{margin-top:36px; font-size:14px; color:var(--muted)}
.src h2{font-size:16px; margin:0 0 6px; color:var(--ink)}
.src ul{padding-left:20px; margin:0}

@media (max-width:760px){.hide-s{display:none}.feat .pat{display:none}.feat{padding:20px}}
@media (max-width:560px){
  body{font-size:16px}
  .bh nav{gap:12px}
  .bh nav a:not(.btn){font-size:15px}
  .bh .btn{font-size:14px; padding:7px 11px}
  .lead{font-size:17px}
  .body h2{font-size:23px}
  .body .ex{padding:2px 14px}
  .body th,.body td{padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){.card,.btn{transition:none}.card:hover{transform:none}}

/* ---------- visual components (scripts/build_blog.py) ---------- */
:root{--s1:#2c56d6; --s1-w:#e7edfd; --s2:#b5690d; --s2-w:#fcefdc; --s3:#b23a6c; --s3-w:#fbe8f0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s1:#8aa6f6; --s1-w:#222a45; --s2:#eaa560; --s2-w:#3d2b18; --s3:#eb90b5; --s3-w:#3d1f2b}}
:root[data-theme="dark"]{--s1:#8aa6f6; --s1-w:#222a45; --s2:#eaa560; --s2-w:#3d2b18; --s3:#eb90b5; --s3-w:#3d1f2b}

/* [[cifre: ...]] big numbers */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:22px 0}
.stat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 18px}
.stat b{display:block; font-size:clamp(28px,3vw,38px); font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--acc)}
.stat span{display:block; font-size:14.5px; color:var(--muted); line-height:1.4; margin-top:4px}

/* [[lucrare: m1]] the exam paper as a map */
.paper{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:12px; margin:24px 0}
.pp{border-radius:18px; padding:14px; background:var(--card); border:1px solid var(--line); border-top:5px solid var(--sc)}
.pp.s1{--sc:var(--s1); --sw:var(--s1-w)} .pp.s2{--sc:var(--s2); --sw:var(--s2-w)} .pp.s3{--sc:var(--s3); --sw:var(--s3-w)}
.pp-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:0 2px 10px}
.pp-h b{font-size:17px; color:var(--sc)}
.pp-h span{font-size:13px; color:var(--muted); font-weight:700}
.pp-g{display:grid; gap:8px}
.pp.s1 .pp-g{grid-template-columns:1fr 1fr}
.tile{display:flex; flex-direction:column; gap:2px; background:var(--sw); border-radius:12px; padding:10px 12px; text-decoration:none;
  color:var(--ink); border:1px solid transparent; transition:border-color .15s, transform .15s}
.tile:hover{border-color:var(--sc); transform:translateY(-1px)}
.tile small{font-size:12px; font-weight:800; color:var(--sc); letter-spacing:.02em}
.tile span{font-size:14px; font-weight:600; line-height:1.35}
.pp-f{grid-column:1/-1; text-align:center; font-size:14px; font-weight:700; color:var(--muted); border:1px dashed var(--line2); border-radius:12px; padding:8px}
@media (max-width:760px){.paper{grid-template-columns:1fr}}

/* [[nota]] where the points are */
.ladder{margin:24px 0 28px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px 20px 16px}
.lad-bar{display:flex; height:46px; border-radius:12px; overflow:hidden; font-size:13px; font-weight:800}
.lad-bar span{display:flex; align-items:center; justify-content:center; text-align:center; padding:0 4px; color:#fff; white-space:nowrap; overflow:hidden}
.lad-bar .of{background:#7d756b} .lad-bar .s1{background:#2c56d6} .lad-bar .pa{background:#2f7d4a} .lad-bar .pb{background:#a85f0b} .lad-bar .pc{background:#a8355f}
.lad-marks{position:relative; height:34px; margin-top:4px}
.lad-marks span{position:absolute; transform:translateX(-100%); font-size:13px; color:var(--muted); text-align:right; padding-right:2px;
  border-right:2px solid var(--ink); padding-top:4px}
.lad-marks b{font-size:18px; color:var(--ink)}
.lad-marks span::before{content:"nota "}
.lad-cap{font-size:14px; color:var(--muted); margin:6px 0 0}
@media (max-width:560px){.lad-bar{font-size:11px; height:52px}.lad-bar span{white-space:normal; line-height:1.15}.lad-marks span::before{content:""}}

/* :::retine / :::atentie / :::sfat / :::pasi */
.body .call{margin:24px 0; padding:16px 20px; border-radius:16px; background:var(--card); border:1px solid var(--line); border-left:5px solid var(--cc, var(--acc))}
.body .call.retine{--cc:var(--acc); background:var(--acc-w); border-color:transparent}
.body .call.atentie{--cc:var(--s2); background:var(--s2-w); border-color:transparent}
.body .call.sfat{--cc:var(--good)}
.body .call-h{margin:0 0 4px; font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--cc)}
.body .call > :last-child{margin-bottom:0}
.body .call.pasi{background:transparent; border:0; padding:0}
.body .call.pasi ol{list-style:none; counter-reset:st; padding:0; display:grid; gap:12px}
.body .call.pasi li{counter-increment:st; position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:14px 18px 14px 66px; margin:0}
.body .call.pasi li::before{content:counter(st); position:absolute; left:16px; top:14px; width:34px; height:34px; border-radius:50%;
  background:var(--acc); color:var(--on-acc); font-weight:800; display:flex; align-items:center; justify-content:center}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}}

/* ---------- SEO pages: /subiecte, /exercitii, /formule (scripts/build_seo.py) ---------- */
.seo-in{max-width:1100px; margin:0 auto; padding:28px 24px 0}
@media (max-width:900px){.seo-in{padding:20px 16px 0}}
.seo .hero h1{max-width:30ch}
.body .stem{font-weight:500}
.body .part{border-top:1px dashed var(--line2); padding-top:8px; margin-top:10px}
.body .pl{font-size:13px; font-weight:800; color:var(--acc); margin:4px 0}
.body .choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; padding:0; margin:10px 0 6px; list-style:none; counter-reset:ch}
.body .choices li{counter-increment:ch; background:var(--bg); border:1px solid var(--line2); border-radius:10px; padding:8px 12px; margin:0}
.body .choices li::before{content:counter(ch, lower-alpha) ") "; font-weight:800; color:var(--acc)}
.body .ans{margin:8px 0}
.body .exfig{margin:10px 0}
.body .exfig img{max-width:min(100%,420px); height:auto; display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .exfig img{filter:invert(.88)}}
:root[data-theme="dark"] .exfig img{filter:invert(.88)}
.body .exk a{color:inherit}
.body .exlink{display:inline-block; font-size:14.5px; font-weight:700; text-decoration:none; margin:2px 0 14px}
.body .exlink:hover{text-decoration:underline}
.body .links{padding-left:20px}
.body .links li{margin:6px 0}
.body .links.cols{columns:2 320px; column-gap:32px}
.body .links.cols li{break-inside:avoid}
.body .muted{color:var(--muted); font-size:15px}
.body .src{font-size:14px; color:var(--muted); margin-top:28px}
.fdefs{display:grid; gap:10px; margin:14px 0}
.fdef{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--acc); border-radius:12px; padding:10px 16px}
.fdef b{display:block; margin-bottom:2px}
.fdef p{margin:0}
.fcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin:14px 0}
.fcard{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 16px; min-width:0}
.fcard.star{border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc)}
.fcard.star b::after{content:" ★"; color:var(--sun)}
.fcard b{font-size:15px}
.fcard .ff{overflow-x:auto}
.fcard p{margin:4px 0 0; font-size:14px; color:var(--muted)}

/* [[lucrare: en]]: three equal blocks of six positions */
.paper.eq{grid-template-columns:1fr 1fr 1fr}
.paper.eq .pp-g{grid-template-columns:1fr 1fr}
@media (max-width:1100px){.paper.eq{grid-template-columns:1fr}}