/* study.css — spațiul de studiu: foaia de curs ca în Model/lectia1.html (Libertinus pentru text,
   EB Garamond pentru titluri, Latin Modern la comutator), mediile, cuprinsul, bulina de stare și așezarea
   decorului de secțiune și a stării goale (componentele .has-glyph, .section-glyph, .empty* sunt în components.css). Se încarcă ultimul în index.php și consumă exclusiv tokenii din tokens.css
   și fonturile din fonts/lesson-fonts.css: fără hex, fără px la text, fără prefixul #main. */

/* ---------- Titlurile paginii de curs: h1 disciplina, h2 secțiunea numerotată cu filet (ca h2 din model) ---------- */
.study-title h1{font-family:var(--heading-serif);font-weight:700;letter-spacing:-.02em}
.study-section-title{padding-bottom:var(--space-2);border-bottom:1px solid var(--line);font-family:var(--heading-serif);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.study-section-number{margin-right:.5em;font-variant-numeric:lining-nums tabular-nums}

/* ---------- Foaia de curs ---------- */
/* font-size pe foaie: unitatea ch a măsurii se calculează în Libertinus la 17px, ca textul. */
/* Coloana de lectură are lățimea din Model/lectia1.html (~700 px), pentru foaie, navigare și finalul lecției. */
.study-content{--measure:43.5rem}
.lesson-sheet{position:relative;max-width:calc(var(--measure) + 2 * var(--space-10));min-height:0;margin:0 auto var(--space-4);padding:var(--space-6) var(--space-10);border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink);font-family:var(--reading-serif);font-size:var(--type-lesson)}
.lesson-sheet:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
/* Titlul lecției: centrat, EB Garamond 700; 2.5rem este mărimea h1 din model (40px). */
.lesson-title{max-width:var(--measure);margin:0 auto var(--space-2);font-family:var(--heading-serif);font-weight:700;font-size:clamp(var(--display-3), 2.8vw, 2.5rem);line-height:1.2;letter-spacing:-.02em;text-align:center;text-wrap:balance;hyphens:manual;color:var(--ink);overflow-wrap:anywhere}
/* Meta: rândul „autor” din model — small-caps centrat, în fontul textului. */
.lesson-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-2) var(--space-4);max-width:var(--measure);margin:0 auto var(--space-6);font-family:var(--reading-serif);font-size:var(--type-copy);font-variant-caps:small-caps;letter-spacing:.04em;line-height:1.5;text-transform:none;text-align:center;color:var(--muted)}
.lesson-meta .text-link{font-variant-caps:normal;letter-spacing:normal}
.lesson-body{max-width:var(--measure);margin:0 auto;font-family:var(--reading-serif);font-size:var(--type-lesson);line-height:var(--leading-lesson);text-align:justify;hyphens:auto;-webkit-hyphens:auto;letter-spacing:normal;white-space:normal;overflow-wrap:anywhere;font-kerning:normal;text-rendering:optimizeLegibility;color:var(--ink)}
.lesson-body.large{font-size:var(--type-reading)}
.lesson-body p{margin:0;color:inherit}
/* Ca în model: de la al doilea paragraf, 1em deasupra și indent de 1.377em (23.4px la 17px). */
.lesson-body > p:not(:first-child){margin-top:1em;text-indent:1.377em}
/* padding-block: linkul inline trece de ținta minimă de 24px (19px fără el), fără să schimbe rândul (interlinia e 30.6px). */
.lesson-body a{padding-block:.2em;color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;hyphens:none}
.lesson-body a:hover{text-decoration-thickness:2px}
/* inline, nu inline-block (components.css): Blink întinde spațiul din jurul unui element atomic la justificare. */
.lesson-body .arrow{display:inline;margin-left:.15em;font-size:.8em}
.lesson-sheet .resource-link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-size);margin-top:var(--space-4);color:var(--blue);font-family:var(--sans);font-size:var(--type-ui);text-decoration:underline;text-underline-offset:.2em}

/* ---------- Comutatorul „Font Latin Modern” (lesson-font.js pune data-lesson-font="lm" pe .study-shell) ---------- */
[data-lesson-font="lm"] .lesson-body{font-family:var(--serif)}
.reader-controls .lesson-font-toggle{font-family:var(--serif)}

/* ---------- Mediile: filet în margine și fundal ușor, ca .definition din model; textul rămâne pe --ink ----------
   Definiție = verde (în model --thm-definition este verde), Teoremă = ardezie (--blue, ca --thm-theorem),
   Exercițiu = cerneală (--ink): modelul folosește ocru, dar --warn este rezervat avertismentelor (.chip-warn, .notice). */
.sheet-env{margin:1.2em 0;padding:.8em 1.1em;border-left:3px solid var(--env-color, var(--line));border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--panel)}
@supports (color: color-mix(in oklab, white, black)){.sheet-env{background:color-mix(in oklab, var(--env-color, var(--line)) 6%, var(--surface))}}
.lesson-body .sheet-env:first-child{margin-top:0}
.lesson-body .sheet-env:last-child{margin-bottom:0}
.sheet-env--definitie{--env-color:var(--green)}
.sheet-env--teorema{--env-color:var(--blue)}
.sheet-env--exercitiu{--env-color:var(--ink)}
.sheet-env > p{margin:0;text-indent:0;color:var(--ink)}
.sheet-env > p > strong:first-child{display:block;margin-bottom:.35em;font-weight:700;font-style:normal}
.sheet-env--teorema > p{font-style:italic}

/* ---------- Navigarea și acțiunea de la capătul foii ---------- */
.lesson-nav{display:flex;justify-content:space-between;gap:var(--space-4);max-width:calc(var(--measure) + 2 * var(--space-10));margin:0 auto var(--space-4)}
.lesson-end{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-3) var(--space-5);max-width:calc(var(--measure) + 2 * var(--space-10));margin:0 auto var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line)}
.lesson-end p{margin:0;font-size:var(--type-small);line-height:var(--leading-copy);color:var(--muted)}
/* Ținta de 44px este declarată aici explicit pentru butoanele text-link din foaie și cuprins (nu depinde de ordinea foilor). */
.lesson-nav .text-link,.lesson-meta .text-link,.empty .text-link,.toc-nav > .text-link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-size);background:none;border:0;padding:0 var(--space-2);font-family:var(--sans);font-size:var(--type-ui);color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.lesson-nav .text-link:disabled{color:var(--subtle);cursor:not-allowed;text-decoration:none}
/* Nota de subsol a materialelor stă pe coloana textului foii: lățimea --measure, centrată; padding-ul orizontal al foii (în afara lățimii,
   content-box) o strânge la fel ca textul foii când ecranul e mai îngust decât foaia. */
.lesson-sheet ~ .catalog-footnote{box-sizing:content-box;max-width:var(--measure);margin-inline:auto;padding-inline:var(--space-10)}

/* ---------- Sidebar: cuprinsul disciplinei ---------- */
.study-sidebar{gap:var(--space-4)}
.study-sidebar .back-link{align-self:flex-start}
/* Titlul rămâne <p> (spec §5.5, testul app-js-6); (0,2,1) îl ține vizibil la orice lățime, peste regulile de ascundere
   din media 900/580 ale styles.css (css-core-2); mărimea stă pe <strong>, deci `.sidebar-course p{font-size:…}` nu o atinge. */
.sidebar-course p.sidebar-course-title{display:block;margin:0 0 var(--space-2)}
.sidebar-course-title > strong{display:block;font-family:var(--heading-serif);font-weight:700;font-size:var(--type-reading);line-height:1.3;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
/* (0,2,0) bate `.sidebar-section-label{display:none}` din media 580 a styles.css. */
.toc-nav .sidebar-section-label{display:block;margin:0 0 var(--space-2);font-size:var(--type-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.toc-nav{display:flex;flex-direction:column;gap:var(--space-2)}
.toc-nav > .text-link{align-self:flex-start;margin-top:var(--space-1)}
/* Bibliografia și culegerea nu au cuprins de săptămâni: slotul gol nu lasă un spațiu în plus în sidebar. */
.week-toc:empty{display:none}
/* Cuprinsul în fontul textului, ca tableofcontents și cuprinsul din dreapta modelului. */
.toc{list-style:none;margin:0;padding:0;font-family:var(--reading-serif)}
.toc li{margin:0}
.toc-item{position:relative;display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:var(--control-size);margin:0;padding:var(--space-1) var(--space-2) var(--space-1) var(--space-3);border:0;border-left:3px solid transparent;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:transparent;color:var(--muted);font:inherit;font-size:var(--type-ui);line-height:1.4;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.toc-item:hover{background:var(--blue-soft);color:var(--ink)}
.toc-item:focus-visible{outline:var(--focus-ring);outline-offset:1px}
.toc-item[aria-current]{border-left-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:700}
.toc-number{flex:none;min-width:1.6em;font-variant-numeric:lining-nums tabular-nums;color:var(--subtle)}
/* Cel mult două rânduri, cu „…”: textul întreg rămâne în DOM, deci în numele accesibil al legăturii/butonului (nu doar în title).
   Punctele de conducere (.toc-leader) se strâng până la zero când titlul are nevoie de loc, ca titlul rupt să piardă cât mai puțin. */
.toc-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-width:0;overflow-wrap:anywhere}
.toc-leader{flex:1 1 0;min-width:0;align-self:center;transform:translateY(.32em);border-bottom:1px dotted var(--control-border);opacity:.7}
.toc-count{flex:none;min-width:1.4em;text-align:right;font-variant-numeric:lining-nums tabular-nums;font-size:var(--type-label);color:var(--subtle)}
/* Fără materiale, contorul nu ocupă loc: titlul săptămânii câștigă lățimea (rupe pe mai puține rânduri în sidebar-ul de 248px). */
.toc-count:empty{display:none}
.toc-item[aria-current] .toc-number,.toc-item[aria-current] .toc-count{color:var(--blue)}
.toc-item[aria-current] .toc-leader{border-color:var(--blue)}

/* ---------- Bulina de stare cu halou (metoda Quadrivium); ia culoarea părintelui; niciodată fără text ---------- */
.status-dot{--dot-ring:currentColor;display:inline-block;flex:none;width:8px;height:8px;border:1px solid transparent;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px var(--dot-ring);vertical-align:middle}
@supports (color: color-mix(in oklab, white, black)){.status-dot{--dot-ring:color-mix(in oklab, currentColor 40%, transparent)}}
.status-dot--current{color:var(--blue)}
.status-dot--done{color:var(--success)}
.status-dot--empty{color:var(--subtle);background:transparent;border-color:var(--control-border);box-shadow:none}
.toc-item .status-dot{margin-left:var(--space-1)}
@media (forced-colors:active){.status-dot{border-color:CanvasText;box-shadow:none}.status-dot--empty{background:transparent}}

/* ---------- Decor de secțiune (Home/Teaching): doar așezarea pe cele trei capete de secțiune ----------
   .has-glyph și .section-glyph (glifă serif supradimensionată, palidă, aria-hidden, fără pointer) sunt în components.css (css-core-4). */
.teaching-note.has-glyph{padding-bottom:var(--space-8)}
.home-quote.has-glyph{overflow:clip;padding-bottom:var(--space-8)}
.home-quote .section-glyph{right:var(--space-3);bottom:-.2em;font-size:clamp(84px,10vw,150px)}
/* ∑ are coloana lui la stânga benzii: desenul glifei are ~.68 din corp, deci textul începe după .7 din corp și nu stă peste glifă. */
.resource-ribbon.has-glyph{--ribbon-glyph:clamp(72px,9vw,130px);overflow:clip}
.resource-ribbon .section-glyph{left:var(--space-3);right:auto;bottom:-.28em;font-size:var(--ribbon-glyph)}
.resource-ribbon.has-glyph .ribbon-copy{padding-left:calc(.7 * var(--ribbon-glyph))}

/* ---------- Stare goală: .empty* vin din components.css (css-core-4); în foaie titlul ia fontul titlurilor foii ---------- */
.lesson-sheet .empty-title{font-family:var(--heading-serif);font-weight:700}

/* ---------- Responsive: 900 / 580 / 380 ---------- */
@media (max-width:900px){
  .study-sidebar{gap:var(--space-3)}
  .toc--sections{display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .toc--sections li{flex:none}
  .toc--sections .toc-item{width:auto;align-items:center;padding:0 var(--space-4);border:1px solid var(--control-border);border-radius:var(--radius-pill)}
  .toc--sections .toc-item[aria-current]{border-color:var(--blue)}
  .toc--sections .toc-leader,.toc--sections .toc-count{display:none}
  .toc--weeks{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);scroll-snap-type:x proximity}
  .toc--weeks li{flex:none;scroll-snap-align:center}
  .toc--weeks .toc-item{flex-direction:column;justify-content:center;align-items:center;gap:var(--space-1);width:var(--control-size);min-width:var(--control-size);padding:0;border:1px solid var(--control-border);border-radius:var(--radius-sm)}
  .toc--weeks .toc-item[aria-current]{border-color:var(--blue)}
  .toc--weeks .toc-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .toc--weeks .toc-leader,.toc--weeks .toc-count{display:none}
  .toc-item .status-dot{margin-left:0}
  /* Parcursul studentului rămâne vizibil pe telefon (role=progressbar), compact, imediat sub titlul disciplinei. Mutarea e doar vizuală:
     bara nu e focalizabilă, iar panoul de înscriere (cu buton) își păstrează locul, deci ordinea focusului nu se schimbă. */
  .study-sidebar > .back-link,.study-sidebar > .sidebar-course{order:-2}
  .study-sidebar > .student-study-panel:has(.sidebar-progress){order:-1;margin:0}
  .sidebar-progress{padding-top:0;border-top:0}
  .sidebar-progress .progress-track{margin-top:var(--space-1)}
  .lesson-sheet{padding:var(--space-4) var(--space-5) var(--space-6)}
  .lesson-sheet ~ .catalog-footnote{padding-inline:var(--space-5)}
}
@media (max-width:580px){
  .lesson-sheet{padding:var(--space-4) var(--space-4) var(--space-5);border-radius:var(--radius-sm)}
  .lesson-sheet ~ .catalog-footnote{padding-inline:var(--space-4)}
  /* Pe telefon butonul culegerii trece mereu pe rândul lui (lățime plină) și ∑ coboară în spatele marginii lui stângi, departe de text. */
  .resource-ribbon.has-glyph .ribbon-copy{flex-basis:100%;padding-left:0}
  .sheet-env{padding:.7em .9em}
  .lesson-nav{flex-wrap:wrap}
}
/* Sub 380px, fără dicționar de silabisire pentru română în Edge/Chrome, justificarea lasă goluri mari. */
@media (max-width:380px){
  .lesson-body{text-align:left}
}

/* ---------- Tipar: foaia plată, fără unelte ---------- */
@media print{
  .lesson-sheet{max-width:none;margin:0 0 12pt;padding:0;border:0;border-radius:0;box-shadow:none}
  .lesson-sheet ~ .catalog-footnote{max-width:none;padding-inline:0}
  .lesson-body,.lesson-body.large{font-size:12pt;line-height:1.5}
  .lesson-title{font-size:18pt}
  .sheet-env{background:none}
  .lesson-nav,.lesson-end,.week-toc,.toc-nav,.lesson-meta .text-link{display:none}
}