/* ═══════════════════════════════════════════════════════════════════════════
   Fișa de lucru — stiluri pentru ecran și pentru tipar (A4)
   ───────────────────────────────────────────────────────────────────────────
   Foaia are caracterul ei: fiecare materie își dă culoarea de accent, clasele
   mici primesc personaj, mâzgăleli în colțuri și casetă de autoevaluare, iar
   gimnaziul rămâne sobru. Decorul e conturat, nu umplut, ca să nu mănânce
   cerneală la imprimantă.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Foaia ─────────────────────────────────────────────────────────────── */

/*
 * Culorile fișei sunt declarate pe .sheet, nu pe :root: foaia reprezintă hârtie
 * tipărită, deci rămâne albă indiferent de paleta aleasă pe site și nu
 * suprascrie culorile interfeței din jur.
 */
.sheet {
    --ink:        #14161c;
    --ink-soft:   #454b57;
    --ink-faint:  #868d99;
    --rule:       #c9ced6;
    --accent:     #5b4bd6;
    --accent-2:   #e08b1a;
    --accent-pale:#f1eefc;
    --answer:     #b3001b;
    --paper:      #ffffff;
    --sheet-font: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --sheet-display: "Baloo 2", "Nunito", "Segoe UI", Arial, sans-serif;

    position: relative;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sheet-font);
    font-size: 11.5pt;
    /* Greutate normală: fișa se citește ca un document, nu ca interfața */
    font-weight: 400;
    line-height: 1.5;
    counter-reset: exercise;
    max-width: 210mm;
    margin: 0 auto;
    padding: 15mm 15mm 14mm;
    box-sizing: border-box;
}

.sheet * { box-sizing: border-box; }

/* Culoarea de accent, după materie */
.sheet[data-subject="matematica"] { --accent: #3c63d8; --accent-pale: #ecf0fd; }
.sheet[data-subject="romana"]     { --accent: #d6455a; --accent-pale: #fdedef; }
.sheet[data-subject="stiinte"]    { --accent: #1c9c92; --accent-pale: #e6f7f5; }
.sheet[data-subject="biologie"]   { --accent: #2f9c4c; --accent-pale: #eaf7ed; }
.sheet[data-subject="fizica"]     { --accent: #7a45c4; --accent-pale: #f3edfc; }
.sheet[data-subject="chimie"]     { --accent: #d47d0c; --accent-pale: #fdf2e2; }
.sheet[data-subject="istorie"]    { --accent: #a06a35; --accent-pale: #f9f1e8; }
.sheet[data-subject="geografie"]  { --accent: #0d8ead; --accent-pale: #e5f5fa; }
.sheet[data-subject="engleza"]    { --accent: #c4479a; --accent-pale: #fceef7; }

/* Educație timpurie. Aceleași valori se află și în app/Render/Palette.php,
   folosit de exportul Word — dacă schimbi aici, schimbă și acolo. */
.sheet[data-subject="activitati-matematice"] { --accent: #e07a2f; --accent-pale: #fdf0e6; }
.sheet[data-subject="educarea-limbajului"]   { --accent: #c94f7c; --accent-pale: #fcecf2; }
.sheet[data-subject="cunoasterea-mediului"]  { --accent: #3e9a5f; --accent-pale: #ebf7ef; }
.sheet[data-subject="om-si-societate"]       { --accent: #2e8bc0; --accent-pale: #e8f4fb; }
.sheet[data-subject="psihomotric"]           { --accent: #8a6fd0; --accent-pale: #f1edfb; }
.sheet[data-subject="estetic-creativ"]       { --accent: #d0417f; --accent-pale: #fcebf3; }

/* Personajele nu clipesc pe foaie: la tipărire ar putea fi prinse cu ochii
   închiși, iar o fișă cu mascota adormită arată ca o eroare. */
.sheet .mascot .m-eyes { animation: none !important; }

/* ─── Mâzgălelile din colțuri ───────────────────────────────────────────── */

.sheet .corner {
    position: absolute;
    width: 14mm;
    height: 14mm;
    color: var(--accent);
    opacity: .3;
    pointer-events: none;
}
.sheet .corner-tl { top: 4mm; left: 4mm; }
.sheet .corner-br { bottom: 4mm; right: 4mm; transform: rotate(180deg); }
.sheet--gimnaziu .corner,
.sheet--liceu .corner { display: none; }

/* ─── Antet ─────────────────────────────────────────────────────────────── */

.sheet-head {
    margin-bottom: 8mm;
    padding: 4mm 5mm 5mm;
    border: 1.8px solid var(--rule);
    border-top: 4px solid var(--accent);
    border-radius: 0 0 4mm 4mm;
    background: var(--accent-pale);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.sheet--gimnaziu .sheet-head,
.sheet--liceu .sheet-head {
    background: none;
    border: 0;
    border-bottom: 2px solid var(--rule);
    border-radius: 0;
    padding: 0 0 4mm;
}

.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4mm;
    margin-bottom: 3mm;
    flex-wrap: wrap;
}

.sheet-head .brand {
    display: inline-flex;
    align-items: center;
    gap: 1.5mm;
    font-size: 8.5pt;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Adresa firmei, sub numele școlii: se tipărește, dar nu fură atenția */
.sheet-head .brand-site {
    font-style: normal;
    font-size: 7.5pt;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--accent);
    padding-left: 2mm;
    margin-left: 1mm;
    border-left: 1px solid var(--rule);
}
.sheet-head .brand .icon { width: 4mm; height: 4mm; color: var(--accent-2); }

.chips { display: inline-flex; gap: 2mm; flex-wrap: wrap; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 1.4mm;
    font-size: 8.5pt;
    font-weight: 800;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 20px;
    padding: .4mm 2.6mm;
    white-space: nowrap;
}
.chip .icon { width: 3.6mm; height: 3.6mm; }

/* ── Titlul, cu personajul materiei alături ── */

.title-row {
    display: flex;
    align-items: center;
    gap: 3.5mm;
    justify-content: center;
    text-align: center;
}
.title-txt { min-width: 0; }

.sheet .sheet-mascot {
    width: 13mm;
    height: 13mm;
    flex: none;
}
.sheet--gimnaziu .sheet-mascot,
.sheet--liceu .sheet-mascot { display: none; }

.sheet-head h1 {
    font-family: var(--sheet-display);
    font-size: 19pt;
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
    color: var(--accent);
}

/* Linie scurtă sub titlu, ca reper vizual */
.sheet-head h1::after {
    content: '';
    display: block;
    width: 26mm;
    height: 2.5px;
    background: var(--accent-2);
    margin: 2mm auto 0;
    border-radius: 3px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.sheet-head .subtitle {
    font-size: 10pt;
    color: var(--ink-soft);
    margin: 2mm 0 0;
}

/* ── Rândul de identificare ── */

.idbar {
    display: flex;
    gap: 4mm;
    font-size: 10pt;
    border: 1.6px solid var(--rule);
    border-radius: 3mm;
    padding: 2.6mm 4mm;
    background: #fff;
    margin-top: 5mm;
    flex-wrap: wrap;
}

.idf { display: flex; flex-direction: column; gap: .8mm; flex: 1 1 60mm; min-width: 45mm; }
.idf-sm { flex: 0 1 32mm; min-width: 28mm; }
.idf b {
    display: flex;
    align-items: center;
    gap: 1.2mm;
    font-size: 7.5pt;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.idf b .icon { width: 3.4mm; height: 3.4mm; color: var(--accent); flex: none; }

.idf .line,
.idbar .line {
    display: block;
    border-bottom: 1.4px dotted var(--ink-faint);
    height: 1.05em;
    width: 100%;
}

.idbar-live { align-items: center; }
.idbar-live label { display: flex; align-items: center; gap: 2mm; font-weight: 600; }
.idbar-live .icon { width: 4.4mm; height: 4.4mm; color: var(--accent); }
.idbar-live input {
    font: inherit;
    border: 0;
    border-bottom: 1.5px solid var(--rule);
    padding: 2px 6px;
    min-width: 60mm;
    background: transparent;
    color: inherit;
}
.idbar-live input:focus { outline: 0; border-bottom-color: var(--accent); }

/* ─── Cerințe ───────────────────────────────────────────────────────────── */

.exercises { list-style: none; margin: 0; padding: 0; }

.ex {
    counter-increment: exercise;
    margin: 0 0 5.5mm;
    padding-left: 10mm;
    position: relative;
    break-inside: avoid;
    page-break-inside: avoid;
}

/*
 * Numărul cerinței, într-o pastilă colorată ușor înclinată. Conturul gros îl
 * păstrează lizibil și când fișa e fotocopiată alb-negru.
 */
.ex::before {
    content: counter(exercise);
    position: absolute;
    left: 0;
    top: -0.8mm;
    width: 7.2mm;
    height: 7.2mm;
    background: var(--accent);
    border: 1.6px solid var(--accent);
    border-radius: 2.4mm;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sheet-display);
    font-size: 11pt;
    font-weight: 700;
    color: #fff;
    transform: rotate(-4deg);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.ex-head {
    display: flex;
    align-items: center;
    gap: 2.5mm;
    margin-bottom: 1.8mm;
}

/* Iconița tipului de cerință */
.ex-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.2mm;
    height: 6.2mm;
    border: 1.5px solid var(--accent-2);
    border-radius: 2mm;
    color: var(--accent-2);
    flex: none;
}
.ex-icon .icon { width: 4.2mm; height: 4.2mm; stroke-width: 2; }

.ex-instr { font-weight: 700; flex: 1; }

.ex-points {
    font-size: 8.5pt;
    font-weight: 800;
    color: var(--accent);
    border: 1.4px solid var(--accent);
    border-radius: 10px;
    padding: 0 2.2mm;
    white-space: nowrap;
    flex: none;
}

/* La gimnaziu, decorul se retrage: pastilă albă, iconiță discretă */
.sheet--gimnaziu .ex::before,
.sheet--liceu .ex::before {
    background: #fff;
    color: var(--accent);
    border-radius: 50%;
    transform: none;
}
.sheet--gimnaziu .ex-icon,
.sheet--liceu .ex-icon { border-color: var(--rule); color: var(--ink-faint); }
.sheet--gimnaziu .ex-points,
.sheet--liceu .ex-points { color: var(--ink-soft); border-color: var(--rule); }
.sheet--gimnaziu .sheet-head h1,
.sheet--liceu .sheet-head h1 { color: var(--ink); }
.sheet--gimnaziu .chip,
.sheet--liceu .chip { color: var(--ink-soft); border-color: var(--rule); }

/* Rând de încurajare, doar la clasele mici */
.cheer {
    display: flex;
    align-items: center;
    gap: 2mm;
    justify-content: center;
    margin: 4mm 0 0;
    font-size: 10.5pt;
    font-weight: 700;
    color: var(--accent);
}
.cheer .icon { width: 5mm; height: 5mm; }

/* ─── Autoevaluare ──────────────────────────────────────────────────────── */

.selfcheck {
    display: flex;
    gap: 5mm;
    margin-top: 5mm;
    break-inside: avoid;
    page-break-inside: avoid;
}

.sc-block {
    flex: 1;
    border: 1.6px dashed var(--rule);
    border-radius: 3mm;
    padding: 2.6mm 3.5mm 3mm;
}
.sc-narrow { flex: 0 0 52mm; }

.sc-q {
    margin: 0 0 2mm;
    font-size: 9pt;
    font-weight: 800;
    color: var(--ink-soft);
}
.sc-q small { font-weight: 600; color: var(--ink-faint); }

.sc-faces { display: flex; gap: 4mm; justify-content: space-around; }
.sc-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1mm;
    text-align: center;
    color: var(--ink-soft);
}
.sc-face .icon { width: 9mm; height: 9mm; stroke-width: 1.5; color: var(--accent); }
.sc-face i { font-style: normal; font-size: 7.5pt; line-height: 1.2; max-width: 24mm; }

.sc-stars { display: flex; gap: 2mm; justify-content: center; }
.sc-stars .icon { width: 8mm; height: 8mm; color: var(--accent-2); stroke-width: 1.5; }

/* ─── Subpuncte ─────────────────────────────────────────────────────────── */

.parts {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: part;
}

.part {
    counter-increment: part;
    position: relative;
    padding-left: 6.5mm;
    margin-bottom: 1.6mm;
    break-inside: avoid;
}

.part::before {
    content: counter(part, lower-alpha) ")";
    position: absolute;
    left: 0;
    color: var(--ink-soft);
    font-size: 10pt;
    font-weight: 700;
}

.layout-col2 { columns: 2; column-gap: 10mm; }
.layout-col3 { columns: 3; column-gap: 7mm; }
.layout-col4 { columns: 4; column-gap: 5mm; }
.layout-col2 .part, .layout-col3 .part, .layout-col4 .part {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
.layout-col3, .layout-col4 { font-size: 11pt; }

.layout-inline { display: flex; flex-wrap: wrap; gap: 3mm 8mm; }
.layout-inline .part { margin-bottom: 0; }

/* ─── Spații de completat ───────────────────────────────────────────────── */

.blank {
    display: inline-block;
    border-bottom: 1px solid var(--ink-soft);
    min-width: 3em;
    height: 1.05em;
    vertical-align: -.15em;
    margin: 0 1px;
}

.dots {
    display: inline-block;
    border-bottom: 1.5px dotted var(--ink-faint);
    min-width: 6em;
    height: 1.05em;
    vertical-align: -.15em;
    margin: 0 1px;
}

.box {
    display: inline-block;
    border: 1.2px solid var(--ink-soft);
    width: 1.5em;
    height: 1.35em;
    vertical-align: -.3em;
    margin: 0 2px;
    border-radius: 2px;
}
.sheet--primar .box { border-color: var(--accent); border-width: 1.4px; border-radius: 3px; }

/* ─── Fracții, puteri, radicali ─────────────────────────────────────────── */

.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: -.55em;
    margin: 0 .18em;
    line-height: 1.05;
    font-size: .92em;
}
.frac .fr-n, .frac .fr-d { padding: 0 .18em; }
.frac .fr-b {
    display: block;
    width: 100%;
    min-width: 1.1em;
    border-top: 1.2px solid currentColor;
    margin: .06em 0;
}

sup { font-size: .72em; vertical-align: super; line-height: 0; }
sub { font-size: .72em; vertical-align: sub; line-height: 0; }

.sqrt { white-space: nowrap; }
.sqrt .rad {
    border-top: 1.2px solid currentColor;
    padding: 0 .18em 0 .1em;
    margin-left: -.06em;
}

/* ─── Grile ─────────────────────────────────────────────────────────────── */

.options { display: inline-flex; flex-wrap: wrap; gap: 1mm 6mm; margin-left: 3mm; }
.opt { white-space: nowrap; }
label.opt { cursor: pointer; }
label.opt input { margin-right: 3px; }

/* ─── Asociere pe două coloane ──────────────────────────────────────────── */

.match {
    display: flex;
    gap: 16mm;
    margin: 2mm 0;
    justify-content: space-between;
}
.match-col { list-style: none; margin: 0; padding: 0; flex: 1; }
.match-col li { margin-bottom: 2mm; }
.match-right { text-align: right; }
.match .mk { color: var(--accent); font-weight: 700; margin-right: 2px; }

/* ─── Desene (creșă și grădiniță) ───────────────────────────────────────── */

/*
 * Copilul de 3 ani nu citește cerința: sarcina trebuie să se vadă din desen.
 * De aceea desenele sunt mari, cu contur gros, și rămân negre la tipărire —
 * conturul e cel pe care îl urmărește creionul, nu o decorație.
 */
.pic {
    display: inline-block;
    vertical-align: middle;
    color: var(--ink);
    stroke-width: 2;
}

.pic-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.5mm;
    vertical-align: middle;
    max-width: 100%;
}

/* Caseta de desenat: destul de mare cât să încapă o mână de copil */
.pic-box {
    display: inline-block;
    vertical-align: middle;
    border: 2px dashed var(--rule);
    border-radius: 3mm;
    background: #fff;
    min-width: 14mm;
    min-height: 14mm;
    max-width: 100%;
}

/* Grafismele: modelul punctat pe care îl repetă copilul, plus rândul liber */
.trace {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    color: var(--accent);
    margin: 1.5mm 0 4mm;
}
.trace + .trace { margin-top: 0; }

.maze, .dots-fig {
    display: block;
    max-width: 100%;
    height: auto;
    color: var(--ink);
    margin: 2mm auto 3mm;
}
.maze { stroke-width: 2.2; }
.dots-fig text { font-size: 11px; font-weight: 700; fill: var(--accent); stroke: none; }

/*
 * Fișa de creșă/grădiniță: literă mare, rânduri rare, mai mult alb. Cerința o
 * citește educatoarea cu voce tare, așa că textul e pentru adult, dar spațiul
 * dintre sarcini e pentru copil — are nevoie de loc ca să lucreze cu creionul.
 */
/* Selectorul dublează clasa înadins: „.sheet.sheet--timpuriu" bate regula de
   ecran îngust care micșorează litera pe toate fișele, oricât de jos ar sta */
.sheet.sheet--timpuriu { font-size: 13pt; line-height: 1.7; }
.sheet--timpuriu .ex { margin-bottom: 7mm; }
.sheet.sheet--timpuriu .ex-instr { font-size: 13.5pt; font-weight: 700; }
.sheet--timpuriu .part { margin-bottom: 4.5mm; }
.sheet--timpuriu .box {
    width: 11mm;
    height: 11mm;
    border-width: 2px;
    border-radius: 2.5mm;
    vertical-align: middle;
}
.sheet--timpuriu .pic-row { gap: 3.5mm; }
.sheet--timpuriu .dots { border-bottom-width: 2px; }

/* ─── Variantă de bacalaureat ───────────────────────────────────────────── */

/*
 * Foaia de examen nu are decor: nici personaje, nici mâzgăleli, nici culoare de
 * materie. Elevul care se pregătește de bac trebuie să lucreze pe o pagină care
 * arată ca cea din sală — text negru pe alb, subiecte numerotate, punctaj în
 * dreapta. Singura licență e linia de sus, care marchează că e un exercițiu, nu
 * un subiect oficial.
 */
.sheet--bac {
    --accent: #2b2b2b;
    --accent-pale: #f2f2f2;
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 11.5pt;
}
.sheet--bac .sheet-corner { display: none; }

.exam-head {
    text-align: center;
    border-bottom: 1.5pt solid var(--ink);
    padding-bottom: 4mm;
    margin-bottom: 5mm;
}
.exam-kind {
    font-family: var(--ui, inherit);
    font-size: 9pt;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 2mm;
}
.exam-head h1 {
    font-family: inherit;
    font-size: 17pt;
    font-weight: 700;
    margin: 0 0 1.5mm;
    letter-spacing: .01em;
}
.exam-meta { font-size: 10.5pt; margin: 0 0 3mm; color: var(--ink-2); }

.exam-rules {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    font-size: 10pt;
    color: var(--ink-2);
    max-width: 130mm;
}
.exam-rules li { margin: .6mm 0; }

/* ── Subiectele ── */
.exam-sec { margin-top: 6mm; break-inside: auto; }
.exam-sec-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6mm;
    font-family: inherit;
    font-size: 12pt;
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0 0 3mm;
    padding-bottom: 1.5mm;
    border-bottom: .8pt solid var(--rule);
    break-after: avoid;
}
.exam-sec-title em { font-style: normal; font-weight: 400; font-size: 10.5pt; }

.exam-items { counter-reset: exam-item; }
.exam-item { break-inside: avoid; margin-bottom: 4mm; }
.exam-item .ex-head { align-items: baseline; gap: 2mm; }
.exam-item .ex-icon { display: none; }
.exam-item .ex-instr { font-weight: 400; font-size: 11.5pt; }
.exam-item .ex-points {
    font-family: var(--ui, inherit);
    font-size: 9.5pt;
    font-weight: 700;
    color: var(--ink-2);
    background: none;
    border: 0;
    padding: 0;
    white-space: nowrap;
}
.exam-letter { font-weight: 700; margin-right: 1mm; }

/* Subpunctele a), b), c) — la bac sunt mereu pe rânduri, nu pe coloane */
.exam-item .parts { columns: 1 !important; margin-top: 1.5mm; }
.exam-item .part { margin-bottom: 1.8mm; }

/* Textul-suport de la română, istorie, geografie */
.exam-text {
    border-left: 2pt solid var(--rule);
    background: #fbfbfb;
    padding: 2.5mm 0 2.5mm 4mm;
    margin: 2.5mm 0 3mm;
}
.exam-text h3 {
    font-family: inherit;
    font-size: 11.5pt;
    font-style: italic;
    margin: 0 0 1.5mm;
}
.exam-text p { margin: 0 0 1.8mm; text-align: justify; }
.exam-note, .sheet--bac .exam-note {
    font-size: 9pt;
    color: var(--ink-3);
    font-style: italic;
    margin: 1mm 0 0;
}

/* Reperele de redactare („veți avea în vedere…") */
.exam-guide {
    font-size: 10pt;
    color: var(--ink-2);
    margin: 1.5mm 0 2mm;
    padding-left: 4mm;
    border-left: 1pt dotted var(--rule);
    text-align: justify;
}

.exam-foot {
    border-top: 1pt solid var(--rule);
    margin-top: 6mm;
    padding-top: 2.5mm;
    font-size: 10pt;
}

/* ─── Tabele ────────────────────────────────────────────────────────────── */

.ws-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2mm 0;
    font-size: 10.5pt;
}
.ws-table th, .ws-table td {
    border: 1px solid var(--rule);
    padding: 2mm 2.5mm;
    text-align: left;
    vertical-align: middle;
}
.ws-table th {
    background: var(--accent-pale);
    font-weight: 700;
    color: var(--ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.ws-table td { height: 9mm; }
.ws-table .row-label { font-weight: 600; white-space: nowrap; }

/* Tabel de grupare: un singur rând, înalt, cât să încapă cuvintele scrise */
.ws-table-group td { height: 26mm; vertical-align: top; }
.ws-table-group .answer { font-weight: 600; }

/* Tabel cu date de citit, nu de completat */
.ws-table-data td { height: auto; }
.ws-table-data { margin-bottom: 3mm; }

/* ─── Text de lectură ───────────────────────────────────────────────────── */

.reading {
    border-left: 3px solid var(--accent);
    padding: 1.5mm 0 1.5mm 4mm;
    margin: 2mm 0 3mm;
    font-size: 11pt;
    text-align: justify;
}
.reading h3 { font-size: 11.5pt; margin: 0 0 1.5mm; font-style: italic; color: var(--accent); }
.reading p { margin: 0 0 2mm; }

/* ─── Spații de lucru ───────────────────────────────────────────────────── */

.worklines { margin: 2mm 0 0; }
.wl {
    display: block;
    border-bottom: 1px dotted var(--rule);
    height: 7.5mm;
}

.calc-grid {
    height: 32mm;
    margin: 2mm 0;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background-image:
        linear-gradient(to right, #eef1f5 1px, transparent 1px),
        linear-gradient(to bottom, #eef1f5 1px, transparent 1px);
    background-size: 5mm 5mm;
}

.draw-space {
    border: 1.2px dashed var(--rule);
    border-radius: 3px;
    margin: 2mm 0;
}

.figure { margin: 2mm 0 3mm; text-align: center; color: var(--ink); }
.figure svg { max-width: 100%; height: auto; }

/* ─── Barem ─────────────────────────────────────────────────────────────── */

.answer {
    color: var(--answer);
    font-weight: 600;
    margin-left: 3mm;
}
.answer.hint { font-weight: 400; font-style: italic; }
.solution {
    display: block;
    color: var(--ink-soft);
    font-size: 9.5pt;
    font-style: italic;
    margin-left: 3mm;
}
.teacher-note {
    font-size: 9.5pt;
    color: var(--ink-soft);
    font-style: italic;
    margin: 1.5mm 0 0;
}

.mode-answers .ex { margin-bottom: 4mm; }

/* ─── Subsol ────────────────────────────────────────────────────────────── */

.sheet-foot {
    display: flex;
    justify-content: space-between;
    gap: 6mm;
    border-top: 1.6px dashed var(--rule);
    margin-top: 8mm;
    padding-top: 3mm;
    font-size: 9.5pt;
    font-weight: 700;
    color: var(--ink-soft);
    flex-wrap: wrap;
}
.sheet-foot > span { display: flex; align-items: center; gap: 1.6mm; }
.sheet-foot .icon { width: 4.2mm; height: 4.2mm; color: var(--accent-2); flex: none; }

.warnings {
    margin-top: 6mm;
    padding: 3mm 4mm;
    border-left: 3px solid #e0a800;
    background: #fffaf0;
    font-size: 10pt;
    border-radius: 0 3px 3px 0;
}
.warnings ul { margin: 1mm 0 0; padding-left: 5mm; }

/* ─── Mod interactiv ────────────────────────────────────────────────────── */

.inp {
    font: inherit;
    font-size: .95em;
    border: 0;
    border-bottom: 1.6px solid var(--accent);
    background: var(--accent-pale);
    padding: 1px 4px;
    min-width: 3.5em;
    border-radius: 3px 3px 0 0;
    color: inherit;
    transition: background .15s, border-color .15s;
}
.inp:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: #fff; }
.inp-wide { width: 100%; min-width: 0; }
.inp.ok    { border-bottom-color: #1a7f37; background: #eaf6ec; }
.inp.wrong { border-bottom-color: var(--answer); background: #fdecee; }

.corrected-answer {
    color: #1a7f37;
    font-weight: 700;
    margin-left: 2mm;
    font-size: .92em;
}

/* Bifa / crucea din dreptul cerinței corectate */
.ex-verdict {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6mm; height: 6mm;
    border-radius: 50%;
    flex: none;
    color: #fff;
    margin-left: 1mm;
}
.ex-verdict .icon { width: 4mm; height: 4mm; stroke-width: 2.4; }
.ex-verdict.all  { background: #1a7f37; }
.ex-verdict.some { background: #d99a05; }
.ex-verdict.none { background: var(--answer); }

/* ─── Ecrane înguste ────────────────────────────────────────────────────── */

/*
 * Fișa e gândită pentru A4, dar profesorii o deschid și pe telefon ca s-o
 * verifice. Strângem marginile și lățimile minime, ca nimic să nu iasă din
 * foaie — o linie punctată tăiată la margine arată ca o eroare de generare.
 * Doar pentru ecran: la tipar rămân valorile de A4.
 */
@media screen and (max-width: 720px) {
    .sheet { padding: 8mm 6mm 8mm; font-size: 11pt; }

    .sheet-head { padding: 3mm 3mm 4mm; }
    .sheet-head h1 { font-size: 16pt; }
    .title-row { gap: 2mm; }

    .dots  { min-width: 3.5em; }
    .blank { min-width: 2.2em; }

    .idbar { gap: 2.5mm; padding: 2.5mm 3mm; }
    .idf, .idf-sm { flex: 1 1 100%; min-width: 0; }

    /*
     * Numele elevului din fișa interactivă: pe telefon eticheta și câmpul nu
     * încap pe același rând, iar `min-width: 60mm` împingea câmpul în afara
     * ecranului. Le punem unul sub altul, pe toată lățimea.
     */
    .idbar-live { flex-direction: column; align-items: stretch; }
    .idbar-live label { flex-wrap: wrap; width: 100%; gap: 1.5mm; }
    .idbar-live input { min-width: 0; width: 100%; flex: 1 1 100%; }

    .match { gap: 5mm; }
    .layout-col3, .layout-col4 { columns: 2; }

    .selfcheck { flex-direction: column; gap: 3mm; }
    .sc-narrow { flex: 1 1 auto; }

    .ws-table { font-size: 10pt; }
    .ws-table th, .ws-table td { padding: 1.5mm; }
}

/*
 * Telefoane foarte înguste (iPhone SE și altele de 320 px): două coloane de
 * calcule nu mai încap, iar o adunare de patru cifre cu spațiu de răspuns
 * iese din foaie. Trecem totul pe o singură coloană.
 */
@media screen and (max-width: 400px) {
    .layout-col2, .layout-col3, .layout-col4 { columns: 1; }
    .layout-inline { gap: 2mm 4mm; }
    .part { padding-left: 5.5mm; overflow-wrap: break-word; }
    .inp { max-width: 100%; }
    .sheet { padding: 7mm 4mm; }
}

/* ─── Tipar ─────────────────────────────────────────────────────────────── */

@page {
    size: A4;
    margin: 13mm 12mm;
}

@media print {
    html, body {
        background: #fff !important;
        margin: 0;
        padding: 0;
    }
    .no-print, .no-print * { display: none !important; }

    .sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        font-size: 11pt;
        box-shadow: none !important;
    }

    /* Colțurile decorative ies din pagină dacă foaia nu mai are padding */
    .sheet .corner { display: none; }

    .sheet-head { border-radius: 0; }

    a[href]::after { content: ""; }

    .ex { page-break-inside: avoid; }
    .selfcheck { page-break-inside: avoid; }
    h1, h2, h3 { page-break-after: avoid; }
}