/* polish.css: the site-wide design pass (November 2026), loaded last. One rhythm for headings and gaps, no list shown
   twice, the exercise bar on one line, Capitole lighter on phones, a clearer account page. */

/* ---------- chapter and Subiect pages: previous / next on top, the start button in the header ---------- */
.ch-nav{display:none;justify-content:space-between;gap:10px;margin:0 0 16px}
.ch-nb{display:inline-flex;align-items:center;gap:6px;max-width:48%;min-height:38px;padding:0 14px;border:1px solid var(--line2);border-radius:99px;background:var(--card);font:700 13.5px var(--font);color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s}
.ch-nb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-nb svg{width:16px;height:16px;flex:none}
.ch-nb:hover{border-color:var(--acc);color:var(--acc)}
.ch-nb.nx{margin-left:auto}
.chhead .ch-cta{align-self:center;white-space:nowrap}
/* the side list repeats what these pages already show: off with the sidebar and on phones (the exercise page keeps it) */
@media (min-width:1101px){
  body.sb .ch-nav{display:flex}
  body.sb .app.chp .pl{grid-template-columns:minmax(0,1fr)}
  body.sb .app.chp .side{display:none}
  body.sb .app.chp .chm{max-width:1040px}
}
@media (max-width:700px){
  .ch-nav{display:flex;margin-bottom:12px}
  .ch-nb{min-height:36px;padding:0 12px;font-size:13px}
  .app.chp .side{display:none!important}
  .chhead .ch-cta{width:100%;min-height:48px}
}

/* ---------- the exercise page's bottom bar (computer): each group on one line; groups wrap whole when narrow ---------- */
@media (min-width:701px){
  .app.prac .foot .dots{flex:none;flex-direction:column;align-items:flex-start;gap:5px}
  .app.prac .foot .dots .cbar{width:96px}
  .app.prac .foot .dots span{white-space:nowrap;font-size:12.5px}
  .app.prac .foot .fmid{flex-wrap:nowrap}
  .app.prac .foot .fmid>*,.app.prac .foot .acts>*{white-space:nowrap}
  .app.prac .foot .acts{margin-left:auto}   /* when the bar wraps, "Verifică" stays on the right */
}

/* ---------- section headings: one size on every main page ---------- */
body.edu .ts-h2,body.edu .sl-h h2{font-size:22px;line-height:28px;font-weight:900;letter-spacing:-.01em}
.sx .sl-h{margin-top:12px}
.sx>.sl-h:first-of-type h2{margin-top:8px}   /* Simulare: "Toate subiectele" right under the header, not 40px below */
@media (max-width:700px){
  body.edu .ts-h2,body.edu .sl-h h2{font-size:20px;line-height:26px;margin-top:26px}
}

/* ---------- the "Nou" card: a full outline with a blue top edge (a left border with round corners looked bent) ---------- */
.nwp{border:1px solid var(--acc-l);box-shadow:inset 0 3px 0 var(--acc)}
@media (max-width:700px){
  .nwp{padding:14px 14px 16px}
  .nwp h2{font-size:18px;line-height:24px}
  .nwp p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px}
  .nwp-ex{gap:6px;margin:12px 0}
  .nwp-c{flex:1 0 calc(20% - 6px);min-width:0;padding:7px 2px;font-size:13px}
  .nwp-bt{flex-wrap:nowrap;gap:8px}
  .nwp-bt .btn{flex:1 1 0;min-height:44px;padding:10px 8px;font-size:14px}
}

/* ---------- Capitole on phones: the chapters come sooner (the daily goal lives on Acasă, "Continuă" is one row) ---------- */
@media (max-width:700px){
  .app.hm .hm-l .goal{display:none}
  .app.hm .hm-l .cont.cont-rec{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:0 0 14px;padding:12px 12px 12px 14px;border-radius:18px}
  .app.hm .hm-l .cont-rec .cont-ic{display:block}
  .app.hm .hm-l .cont-rec .cont-ic .cic{width:40px;height:40px;border-radius:12px}
  .app.hm .hm-l .cont-rec .k{font-size:11.5px}
  .app.hm .hm-l .cont-rec .tt{font-size:16px;line-height:21px}
  .app.hm .hm-l .cont-rec .mt{display:none}
  .app.hm .hm-l .cont-rec .btn{width:auto;margin:0;padding:10px 14px;white-space:nowrap}
  .app.hm .exsw{margin:4px 0 14px}
}

/* ---------- account pages without an account: what an account gives, as a list ---------- */
.gate-card p{margin-bottom:12px}
.gate-l{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;text-align:left}
.gate-l li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink)}
.gate-l li span{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--good-w);color:var(--good)}
.gate-l li span svg{width:13px;height:13px}
@media (max-width:600px){.gate-l{display:inline-grid;margin-left:auto;margin-right:auto}}

/* ---------- builder: the five kinds on one row when they fit (no lone "Personalizat" below) ---------- */
.tb-g .ts-kinds{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}

/* ---------- small things ---------- */
.pk-rand svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}

/* ---------- Capitole on phones, part 2: the chapters on the first screen ---------- */
@media (max-width:700px){
  /* the header's sentence says what the page already shows */
  .app.hm .hm-l .edu-hd p{display:none}
  /* "Nou": title and count on one row, the exercise chips as one sideways row, the two buttons side by side */
  .app.hm .nwp{padding:12px 14px 14px}
  .app.hm .nwp-hd{align-items:center;gap:10px;flex-wrap:nowrap}
  .app.hm .nwp-hd>div{min-width:0}
  .app.hm .nwp-tag{margin-top:0}
  .app.hm .nwp h2{font-size:17px;line-height:22px}
  .app.hm .nwp p{display:none}
  .app.hm .nwp-pr{margin-top:0;white-space:nowrap}
  .app.hm .nwp-ex{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:10px -14px;padding:0 14px 2px}
  .app.hm .nwp-ex::-webkit-scrollbar{display:none}
  .app.hm .nwp-c{flex:none;min-width:48px}
  .app.hm .nwp-bt .btn{min-height:42px;padding:8px 6px;font-size:13.5px}
}

/* ---------- Teorie with the sidebar: the outline becomes rows of chips on top, so the page has two columns, not three ---------- */
@media (min-width:1101px){
  body.sb .thk{grid-template-columns:minmax(0,1fr);gap:22px}
  body.sb .thk-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:10px 28px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
  body.sb .thk-nt{display:none}
  body.sb .thk-ng{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
  body.sb .thk-ng>span{margin:0 4px 0 0}
  body.sb .thk-ng a{padding:5px 10px 5px 5px;border-color:var(--line);font-size:13.5px}
}

/* ---------- Teste on phones: the quick tests as one sideways row (the next card peeks out), like Acasă's features ---------- */
@media (max-width:700px){
  body.edu .ts-q{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
  body.edu .ts-q::-webkit-scrollbar{display:none}
  body.edu .ts-qt{flex:0 0 44%;scroll-snap-align:start;padding:14px}
  body.edu .ts-qt b{font-size:15.5px}
  body.edu .ts-qt>span{font-size:12.5px;line-height:17px}
}

/* ---------- every pop-up on phones: a sheet from the bottom over the dimmed site, like the welcome carousel ---------- */
@media (max-width:600px){
  dialog.dlg{width:100vw!important;max-width:100vw!important;height:fit-content;max-height:calc(100dvh - 28px)!important;
    inset:auto 0 0 0;margin:0;border-radius:24px 24px 0 0!important;overflow-y:auto;overscroll-behavior:contain}
  dialog.dlg:not(.obc-dlg)::before{content:"";display:block;width:40px;height:5px;margin:8px auto -4px;border-radius:99px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
  dialog.dlg::backdrop{background:rgba(12,20,40,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  dialog.dlg>:last-child{padding-bottom:max(env(safe-area-inset-bottom,0px),0px)}
}
@media (max-width:600px) and (prefers-reduced-motion:no-preference){dialog.dlg[open]{animation:obcsheet .38s cubic-bezier(.2,.8,.2,1)}}

/* ---------- Progres with the sidebar (up to 1599px): the three Subiect cards one under the other, each with its ring and title
   on the left and its chapters in two columns, instead of three squeezed columns ---------- */
@media (min-width:1101px) and (max-width:1599px){
  body.sb .pgg{grid-template-columns:300px minmax(0,1fr);gap:28px}
  body.sb .pg-subj{grid-template-columns:minmax(0,1fr)}
  body.sb .pg-s{display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:22px;align-items:center;padding:16px 18px 12px}
  body.sb .pg-s .pg-h{gap:12px;margin:0}
  body.sb .pg-s .pg-ring{width:58px;height:58px}
  body.sb .pg-s .pg-ring span{width:46px;height:46px;padding-top:12px;font-size:16px}
  body.sb .pg-s .pg-h h2{font-size:16px;line-height:21px}
  body.sb .pg-cs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  body.sb .pg-c:nth-child(2){border-top-color:transparent}
}

/* ---------- chapter cards on Capitole: quieter before you start (the flame stays on every card, the owner's choice) ---------- */
/* a cold flame (0) is just a small grey-blue flame, no chip and no "0"; it gets its chip and number from the first right answer */
.ch .flame.sm.cold{padding:2px 2px;background:none;opacity:.55}
.ch .flame.sm.cold b{display:none}
/* the "not started" box is lighter than "started" / "done" */
.ch .m:not(.p):not(.d){border-color:var(--line2)}