/* Pricep, antrenoarele: Penarul, cu meșteșugul paginii.
   The page's parchment, ink and teacher's red, with the pencil case opened on it. Every chapter owns a named coloured
   pencil; its level is pencil hatching along a centimetre ruler with a red notch at 85; the day's minutes fill a
   protractor; the days stand stamped on a calendar strip; a right answer gets the highlighter; rewards are tally marks
   (the series), erasers (shields), gold stars (perfect rounds) and enamel pins kept on the inside cover.
   From the page: square frames with a double hairline, small-caps kickers in the teacher's red, Alegreya serif
   numerals, primary buttons with an inner hairline. Alegreya is for what is read, Alegreya Sans for what is pressed.

   Sections: 1 fonts  2 tokens  3 pencils  4 base  5 shell  6 controls  7 home  8 a round  9 feedback  10 the end of
   a round  11 simulations  12 a saved paper  13 study  14 first visit and settings  15 progress  16 messages
   17 motion, forced colours, the servos corner */

/* ---------- 1. Fonts ---------- */
@font-face { font-family: Alegreya; src: url("../assets/alegreya.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: Alegreya; src: url("../assets/alegreya-italic.woff2") format("woff2"); font-style: italic; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* the signs Alegreya does not draw (ℕ ℝ ⇒ ∈ ∠ ∥ ∩ ∪ ⊥ …), from STIX Two Math (OFL), only for those code points */
@font-face { font-family: "Pricep Semne"; src: url("fonts/pricep-semne.woff2") format("woff2"); font-display: swap;
  unicode-range: U+2115, U+211A, U+211D, U+2124, U+21BA, U+21D2, U+21D4, U+2205, U+2208-2209, U+2220-2222, U+2225-2226, U+2229-222A, U+223C, U+2245, U+2261, U+2282-2283, U+2286, U+22A5, U+25B3; }

/* ---------- 2. Tokens: by daylight, then by lamplight ---------- */
:root {
  --paper: #f4efe5; --sheet: #fbf8f1; --sheet2: #f6f1e6;
  --ink: #24201b; --ink2: #574e42; --ink3: #6b6153;
  --rubric: #93301f;            /* the teacher's red, for text */
  --cerneala: #b13f2c;          /* the stamp's ink */
  --margine: #c4513b;           /* the red margin rule */
  --frame: #d6ccb8; --frame2: #c6b9a1; --tick: #ab9d84;
  --ruling: #6f8fb0; --grila: rgba(86, 124, 163, .17);
  --verde: #2f6a3c; --verde-wash: #e6eedd;
  --marker: #ffe04a; --marker-a: .6; --marker-blend: multiply; --marker-ink: var(--ink);
  /* where the highlighter sits: a wash behind the words (the answer's tile: top and bottom of the stroke; inline
     answers: from and to, as a share of the line) */
  --mk-sus: .1em; --mk-jos: .02em; --mk-de: 52%; --mk-la: 92%;
  --lemn: #e3c391; --lemn-umbra: #b88f5c;   /* the wood of a sharpened pencil */
  --panza: #5b2119; --panza2: #461911; --panza-ink: #f3e7d2; --panza-ink2: #dcc7aa; --aur: #d9b65e; --aur-t: #e8cd85;
  --umbra: 0 1px 0 rgba(60, 40, 20, .04);
  /* the learner's pencil: the subject's own (maths Prussian blue) until the pupil picks one */
  --al: #1f4f8f; --atl: #1e4f8f; --ad: #6f9de0; --atd: #93b6ec; --bl: #1e4f8f; --bd: #2b5c9f;
  --acc: var(--al); --acc-t: var(--atl); --btn-bg: var(--bl); --btn-fg: #fff;
  --rule: var(--ink3); --pen: var(--acc);   /* used by the maths bank's tables and bar charts */
  --serif: Alegreya, "Pricep Semne", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Pricep Semne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: 16px; --maxw: 1200px;
  --gx: max(var(--pad), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* the side gutter, clear of a notch */
  --servos-w: 64px; --servos-h: 170px;   /* the servos bar's corner on phones: nothing important under it */
  color-scheme: light;
}
:root[data-materie="romana"] { --al: #6c3fa5; --atl: #5f3593; --ad: #b392ec; --atd: #c6abf2; --bl: #5f3593; --bd: #643a9f; }
/* the pencils a pupil may choose (no reds: red means a mistake) */
:root[data-accent="prusia"]     { --al: #1f4f8f; --atl: #1e4f8f; --ad: #6f9de0; --atd: #93b6ec; --bl: #1e4f8f; --bd: #2b5c9f; }
:root[data-accent="ultramarin"] { --al: #3a49c0; --atl: #3442b0; --ad: #8794f2; --atd: #a9b3f7; --bl: #3442b0; --bd: #3c48b8; }
:root[data-accent="violet"]     { --al: #6c3fa5; --atl: #5f3593; --ad: #b392ec; --atd: #c6abf2; --bl: #5f3593; --bd: #643a9f; }
:root[data-accent="fucsia"]     { --al: #c0377a; --atl: #a32f68; --ad: #ee7fb5; --atd: #f39cc7; --bl: #a32f68; --bd: #9c2f66; }
:root[data-accent="turcoaz"]    { --al: #11869a; --atl: #0b6973; --ad: #4fc8d6; --atd: #79d7de; --bl: #0b6973; --bd: #0f6670; }
:root[data-accent="veronese"]   { --al: #1d8a63; --atl: #146b4d; --ad: #5ccd9c; --atd: #82dbb5; --bl: #146b4d; --bd: #176a4c; }
:root[data-accent="ocru"]       { --al: #b57a26; --atl: #8a5a14; --ad: #d9a65c; --atd: #e2b87a; --bl: #7c520f; --bd: #7d5413; }
:root[data-accent="grafit"]     { --al: #4a4c54; --atl: #4a4c54; --ad: #b8bcc6; --atd: #c9ccd4; --bl: #3c3e45; --bd: #4a4d56; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #191713; --sheet: #221f1a; --sheet2: #1e1b17;
  --ink: #ede4d3; --ink2: #bdb29f; --ink3: #a79c88;
  --rubric: #f0a088; --cerneala: #e08a70; --margine: #9c4a37; --frame: #3e382f; --frame2: #4f473b; --tick: #6e6354;
  --ruling: #7d9cc0; --grila: rgba(125, 158, 196, .12);
  --verde: #9bcfa4; --verde-wash: #1f2c21;
  --marker: #e3c77f; --marker-a: .72; --marker-blend: normal; --marker-ink: var(--ink);
  --mk-sus: calc(100% - .42em); --mk-jos: .08em; --mk-de: 80%; --mk-la: 100%;
  --lemn: #c9a676; --lemn-umbra: #8d6c45;
  --panza: #401812; --panza2: #30110c; --panza-ink: #f1e3cc; --panza-ink2: #d4bd9c; --aur: #c9a552; --aur-t: #e3c77f;
  --umbra: 0 1px 0 rgba(0, 0, 0, .2);
  --acc: var(--ad); --acc-t: var(--atd); --btn-bg: var(--bd); --btn-fg: #f8f1e4;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --paper: #191713; --sheet: #221f1a; --sheet2: #1e1b17;
  --ink: #ede4d3; --ink2: #bdb29f; --ink3: #a79c88;
  --rubric: #f0a088; --cerneala: #e08a70; --margine: #9c4a37; --frame: #3e382f; --frame2: #4f473b; --tick: #6e6354;
  --ruling: #7d9cc0; --grila: rgba(125, 158, 196, .12);
  --verde: #9bcfa4; --verde-wash: #1f2c21;
  --marker: #e3c77f; --marker-a: .72; --marker-blend: normal; --marker-ink: var(--ink);
  --mk-sus: calc(100% - .42em); --mk-jos: .08em; --mk-de: 80%; --mk-la: 100%;
  --lemn: #c9a676; --lemn-umbra: #8d6c45;
  --panza: #401812; --panza2: #30110c; --panza-ink: #f1e3cc; --panza-ink2: #d4bd9c; --aur: #c9a552; --aur-t: #e3c77f;
  --umbra: 0 1px 0 rgba(0, 0, 0, .2);
  --acc: var(--ad); --acc-t: var(--atd); --btn-bg: var(--bd); --btn-fg: #f8f1e4;
  color-scheme: dark;
}

/* ---------- 3. The pencils: one per chapter, with its name ----------
   --cl / --cd: the paint (fills, hatching, the pencil itself), by day / by lamplight;
   --ctl / --ctd: the same colour deep (or light) enough for text, AA on the sheet. */
.cr { --c: var(--cl); --ct: var(--ctl); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cr { --c: var(--cd); --ct: var(--ctd); } }
:root[data-theme="dark"] .cr { --c: var(--cd); --ct: var(--ctd); }
.cr-prusia     { --cl: #1f4f8f; --ctl: #1e4f8f; --cd: #6f9de0; --ctd: #93b6ec; }
.cr-ultramarin { --cl: #3a49c0; --ctl: #3442b0; --cd: #8794f2; --ctd: #a9b3f7; }
.cr-violet     { --cl: #6c3fa5; --ctl: #5f3593; --cd: #b392ec; --ctd: #c6abf2; }
.cr-fucsia     { --cl: #c0377a; --ctl: #a32f68; --cd: #ee7fb5; --ctd: #f39cc7; }
.cr-carmin     { --cl: #b4233c; --ctl: #a11d34; --cd: #ee7086; --ctd: #f394a4; }
.cr-cinabru    { --cl: #d24f29; --ctl: #b13f1d; --cd: #f2875f; --ctd: #f6a07f; }
.cr-crom       { --cl: #e0a512; --ctl: #7d5a04; --cd: #ecc24a; --ctd: #f0cf6e; }
.cr-ocru       { --cl: #b57a26; --ctl: #8a5a14; --cd: #d9a65c; --ctd: #e2b87a; }
.cr-oliv       { --cl: #6f7f24; --ctl: #56631a; --cd: #b2c25a; --ctd: #c3d27a; }
.cr-veronese   { --cl: #1d8a63; --ctl: #146b4d; --cd: #5ccd9c; --ctd: #82dbb5; }
.cr-turcoaz    { --cl: #11869a; --ctl: #0b6973; --cd: #4fc8d6; --ctd: #79d7de; }
.cr-sepia      { --cl: #7d4b28; --ctl: #6e4424; --cd: #cf9f78; --ctd: #dcb393; }
.cr-grafit     { --cl: #4a4c54; --ctl: #4a4c54; --cd: #b8bcc6; --ctd: #c9ccd4; }

/* ---------- 4. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 1.125rem; line-height: 1.5;
  font-variant-numeric: lining-nums proportional-nums; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--acc-t); outline-offset: 3px; border-radius: 2px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; }
.sari { position: absolute; left: var(--gx); top: -4rem; background: var(--ink); color: var(--paper); padding: .5rem .9rem; z-index: 40; text-decoration: none; font-family: var(--sans); }
.sari:focus { top: .75rem; }
/* small capitals drawn as capitals at a smaller size: true small caps (smcp) come out much smaller in WebKit than in
   Chromium and Firefox, so the labels would not match from one browser to the next */
.kicker { font-family: var(--serif); text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; font-weight: 500; color: var(--rubric); line-height: 1.25; font-variant-numeric: lining-nums; }
.sc { font-family: var(--serif); text-transform: uppercase; letter-spacing: .11em; font-size: .8125rem; font-weight: 500; color: var(--ink2); line-height: 1.25; }
.punct { color: var(--tick); margin: 0 .3em; letter-spacing: 0; }
.cifra-s { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }
i.m, .m { font-style: italic; }
.app { width: min(100% - 2 * var(--gx), var(--maxw)); margin-inline: auto; }
@media (min-width: 700px) { :root { --pad: 28px; } }
@media (min-width: 1100px) { :root { --pad: 40px; } }
@media (min-width: 1700px) { :root { --maxw: 1320px; } }
@media (min-width: 2200px) { html { zoom: 1.2; } }

/* the bank's own HTML: fractions, radicals, powers, systems, worked steps, the figures */
.fr { display: inline-grid; vertical-align: middle; text-align: center; font-size: .86em; line-height: 1.08; margin: 0 .12em; font-variant-numeric: lining-nums; }
.fr > span:first-child { border-bottom: 1px solid currentColor; padding: 0 .18em .04em; }
.fr > span:last-child { padding: .04em .18em 0; }
.rad { white-space: nowrap; }
/* the bar meets the hook: Alegreya's √ rises to .742 em; an inline-block with line-height .85 puts its top at .76 em
   (ascent 1.016, descent .345), so the bar sits on the hook. A power inside raises the box, and the bar with it. */
.rad > span { display: inline-block; line-height: .85; border-top: .07em solid currentColor; padding: 0 .08em 0 .04em; margin-left: -.02em; }
.rad > span sup { line-height: 1; }
sup { font-size: .68em; line-height: 0; vertical-align: .55em; }
.sys { display: inline-grid; vertical-align: middle; border-left: 1.5px solid currentColor; border-radius: 6px 0 0 6px; padding: 0 0 0 .45em; margin: .2em .2em; line-height: 1.35; }
.steps { list-style: decimal; padding-left: 1.6em; display: grid; gap: .2em; }
.enunt table, .why table { max-width: 100%; }
.why, .q, .vs-ops .x, .fi-text p, .lucrare-pasi li > span:first-child, .lista-runda .r b { overflow-wrap: break-word; }
.enunt u, .vers u, .why u { text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.proof { font-family: var(--sans); font-weight: 500; color: var(--ink); }
svg.fig { width: 100%; height: auto; overflow: visible; color: var(--ink); }
svg.fig polygon, svg.fig circle, svg.fig line, svg.fig polyline, svg.fig path, svg.fig rect:not([style]) { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg.fig .thin { stroke-width: 1.05; }
svg.fig .dash { stroke-dasharray: 5 4; stroke-width: 1.3; }
svg.fig .accent { stroke: var(--c, var(--acc)); stroke-width: 2.4; }
svg.fig .dash.accent { stroke-dasharray: 6 4; }
svg.fig circle.pt { fill: var(--ink); stroke: none; }
svg.fig text { font-family: var(--serif); font-style: italic; font-size: 17px; fill: var(--ink); stroke: var(--sheet); stroke-width: 4px; paint-order: stroke; stroke-linejoin: round; }
/* the solution, coloured: the shape washed in its chapter's pencil, the key line in the pupil's, the right angles green */
.plansa.rezolvat svg.fig polygon { fill: var(--c, var(--acc)); fill-opacity: .16; }
.plansa.rezolvat svg.fig .accent { stroke: var(--acc); stroke-width: 3; }
.plansa.rezolvat svg.fig polyline.thin { stroke: var(--verde); stroke-width: 1.8; }
svg.fig .pas1 { stroke: var(--c, var(--acc)) !important; stroke-width: 2.8 !important; }
svg.fig .pas2 { stroke: var(--acc) !important; stroke-width: 2.8 !important; }
svg.fig .pas3 { stroke: var(--verde) !important; stroke-width: 2.8 !important; }
svg.fig polygon.pas1, svg.fig polygon.pas2, svg.fig polygon.pas3 { fill: currentColor; fill-opacity: .12; }

/* ---------- 5. Shell: the bar, the subjects, the colophon ---------- */
.bara { display: flex; align-items: flex-end; gap: .5rem; padding-top: 6px; position: relative; }
.bara::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-top: 1px solid var(--frame); border-bottom: 1px solid var(--frame); pointer-events: none; }
.marca { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; min-width: 44px; padding-bottom: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1.25rem; line-height: 1; }
.marca .semn { width: 28px; height: 28px; flex: none; }
@media (max-width: 519px) { .marca .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.materii { display: flex; gap: 2px; margin-left: auto; }
.materie {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; padding: .5rem .8rem .55rem; text-decoration: none; position: relative; bottom: -1px; z-index: 1;
  font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; color: var(--ink2); border: 1px solid transparent; border-bottom: 0;
}
.materie::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--c); }
.materie[aria-current="page"] { background: var(--paper); color: var(--ink); border-color: var(--frame); box-shadow: inset 0 2px 0 var(--c); }
.materie[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 5px; background: var(--paper); }
.materie:hover { color: var(--ink); }
.bara-link { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; min-width: 44px; padding: 0 .4rem 4px; text-decoration: none; font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; color: var(--ink2); }
.bara-link:hover { color: var(--ink); }
.bara-link .ic { width: 22px; height: 22px; }
@media (max-width: 699px) { .bara-link .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (max-width: 380px) { .materie { padding-inline: .55rem; font-size: 1rem; } }
@media (max-width: 340px) { .bara { gap: .2rem; } .materie { padding-inline: .45rem; gap: .35rem; } }
.materie .ts { display: none; }
@media (max-width: 329px) { .bara { gap: 0; } .materie { padding-inline: .35rem; font-size: .9375rem; } .materie::before { display: none; } }
@media (max-width: 299px) { .materie .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .materie .ts { display: inline; } }
body.in-runda .bara-wrap { display: none; }

.subsol-pag { margin-top: 3rem; padding: 1rem 0 calc(var(--servos-h) - 24px); border-top: 4px double var(--frame); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.2rem; font-family: var(--sans); font-size: 1rem; color: var(--ink2); }
.subsol-pag nav { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.subsol-pag a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink2); text-decoration-color: var(--frame2); }
.subsol-pag a:hover { color: var(--ink); }
/* „Trimite o părere” (comun/parere.js): a button that reads as the footer's links; after an answer, a quiet line */
.leg-parere { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink2); text-decoration: underline; text-decoration-color: var(--frame2); text-underline-offset: .18em; cursor: pointer; }
.leg-parere:hover { color: var(--ink); }
/* the flag on a question („Semnalează o problemă”, comun/parere.js): 44 px to tap, but only a line tall in the layout,
   so the row it sits in keeps its height; filled once a report has gone */
.semnal { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -10px -12px -10px auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink2); cursor: pointer; }
.semnal svg { width: 20px; height: 20px; }
.semnal:hover { color: var(--ink); background: var(--paper); }
.semnal:focus-visible { outline: 2px solid var(--acc-t); outline-offset: -3px; }
.semnal.trimis { color: var(--acc-t); --steag: color-mix(in srgb, var(--acc) 40%, transparent); }
.eticheta .perfect ~ .semnal { margin-left: -8px; }
.lista-runda .semnal { align-self: start; margin: -8px -12px 0 0; }
.vs-item .si-cap > span { display: inline-flex; align-items: center; gap: .5rem; }
.vs-item .si-cap .semnal { margin: -10px -12px -10px 0; }
@media (min-width: 700px) { .subsol-pag { padding-bottom: 3rem; } }
/* the margin rule of the copybook, on wide screens: the same red line as the page */
@media (min-width: 1100px) {
  body::before { content: ""; position: fixed; top: 0; bottom: 0; left: max(10px, calc((100vw - var(--maxw)) / 2 - 30px)); width: 4px; border-left: 1px solid var(--margine); border-right: 1px solid color-mix(in srgb, var(--margine) 45%, transparent); opacity: .65; pointer-events: none; }
  body.in-runda::before { display: none; }
}

/* ---------- 6. Controls ---------- */
/* a leaf of paper with a double hairline, like the page's plates */
.foaie { background: var(--sheet); border: 1px solid var(--frame); box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px color-mix(in srgb, var(--frame) 62%, transparent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 52px; padding: .55rem 1.15rem;
  font-family: var(--sans); font-weight: 500; font-size: 1.125rem; line-height: 1.2; text-decoration: none; cursor: pointer; text-align: left;
  color: var(--ink); background: var(--sheet); border: 1px solid var(--frame2); border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3px color-mix(in srgb, var(--frame) 70%, transparent);
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:hover { border-color: var(--tick); }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 1.35rem; height: 1.35rem; color: var(--ink2); }
.btn .sageata { width: 1.45rem; height: .8rem; }
.btn.prim { color: var(--btn-fg); background: var(--btn-bg); border-color: var(--btn-bg); box-shadow: inset 0 0 0 2px var(--btn-bg), inset 0 0 0 3px color-mix(in srgb, var(--btn-fg) 34%, transparent); }
.btn.prim .ic { color: inherit; }
.btn.prim:hover { background: color-mix(in srgb, var(--btn-bg) 90%, #000); }
.btn.mare { min-height: 60px; font-size: 1.25rem; padding-inline: 1.2rem 1.1rem; justify-content: space-between; }
.btn .sub { font-weight: 400; font-size: 1rem; opacity: .9; margin-left: .35rem; }
.btn .btn-t { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .2rem; }
.btn.lat { width: 100%; }
.btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.btn-text { background: none; border: 0; padding: .4rem .2rem; min-height: 44px; cursor: pointer; font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; color: var(--ink2); text-decoration: underline; text-decoration-color: var(--frame2); text-underline-offset: .25em; display: inline-flex; align-items: center; gap: .45rem; }
.btn-text:hover { color: var(--ink); text-decoration-color: currentColor; }
.btn-pericol { color: var(--rubric); border-color: color-mix(in srgb, var(--rubric) 45%, var(--frame2)); }
.tasta { display: none; font: 500 .8125rem/1 var(--sans); color: var(--ink2); border: 1px solid var(--frame2); border-radius: 3px; padding: 3px 5px; }
@media (hover: hover) and (pointer: fine) { .tasta { display: inline-block; } }
.cap-sec { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem .75rem; margin: 2.5rem 0 .9rem; padding-bottom: .45rem; border-bottom: 1px solid var(--frame); }
.cap-sec h2 { font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
.cap-sec .kicker, .cap-sec .sc { white-space: nowrap; }

/* ---------- 7. Home ---------- */
.acasa { padding: 1rem 0 0; }
.salut { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; min-width: 0; }
.salut .emb { width: 46px; height: 46px; flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.salut .emb svg { width: 46px; height: 46px; filter: drop-shadow(0 1.5px 1px rgba(40, 20, 0, .28)); }
.salut h1 { font-weight: 500; font-size: 1.625rem; line-height: 1.1; letter-spacing: -.005em; }
.salut h1 em { font-style: italic; color: var(--acc-t); }
.salut .cand { font-family: var(--sans); color: var(--ink2); font-size: 1rem; margin-top: .15rem; }
.salut .setari-btn { margin-left: auto; align-self: center; }
.btn-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--ink2); cursor: pointer; flex: none; }
.btn-ic:hover { color: var(--ink); border-color: var(--frame); }
.btn-ic .ic { width: 22px; height: 22px; }
.coloane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.stanga, .dreapta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; min-width: 0; }
@media (min-width: 1000px) {
  .coloane { grid-template-columns: minmax(0, 390px) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .dreapta > .cap-sec:first-child, .dreapta > .banner:first-child { margin-top: 0; }
}

/* the day: a leaf with the protractor and the stamped week */
.ziua { position: relative; }
.ziua-cap { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .8rem .45rem 1rem; border-bottom: 1px solid var(--frame); }
.ziua-cap .link-mic { font-family: var(--sans); font-size: 1rem; color: var(--ink2); background: none; border: 0; min-height: 44px; padding: 0 .3rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.ziua-cap .link-mic:hover { color: var(--ink); }
.ziua-cap .link-mic .ic { width: 18px; height: 18px; }
.ziua-corp { padding: .6rem 1rem .7rem; display: grid; justify-items: center; }
.raportor { position: relative; width: min(100%, 250px); }
@media (max-width: 699px) { .raportor { width: min(100%, 224px); } }
.raportor svg { width: 100%; height: auto; overflow: visible; }
.raportor .r-corp { fill: color-mix(in srgb, var(--ruling) 6%, var(--sheet)); stroke: var(--ink3); stroke-width: 1; }
.raportor .r-gol { fill: var(--sheet); stroke: var(--ink3); stroke-width: 1; }
.raportor .r-t { stroke: var(--ink3); stroke-width: .7; }
.raportor .r-t2 { stroke: var(--ink2); stroke-width: 1.1; }
.raportor .r-et { font-family: var(--sans); font-size: 11px; font-weight: 500; fill: var(--ink2); font-variant-numeric: lining-nums tabular-nums; }
.raportor .r-plin { stroke: none; }
.raportor .r-plin-f { fill: var(--acc); fill-opacity: .1; }
.raportor .r-plin-m { fill: var(--acc); }
.raportor .r-ac { stroke: var(--acc); stroke-width: 2; stroke-linecap: round; }
.raportor .r-ax { fill: var(--sheet); stroke: var(--acc); stroke-width: 1.5; }
.raportor .r-tinta { stroke: var(--rubric); stroke-width: 1.6; }
.raportor .r-tinta-v { fill: var(--rubric); }
.raportor .r-dat { fill: none; stroke: var(--rubric); stroke-width: 1; stroke-dasharray: 2 2.4; }
.raportor-text { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; line-height: 1; }
.raportor-text .v { font-family: var(--serif); font-weight: 500; font-size: 2.5rem; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.raportor-text .d { display: block; font-family: var(--sans); font-size: .875rem; color: var(--ink2); margin-top: .05rem; }
.raportor .stampila-zi { position: absolute; right: -4px; top: -6px; width: 58px; height: 58px; color: var(--cerneala); transform: rotate(-12deg); opacity: .9; }
.ziua-nota { text-align: center; font-style: italic; color: var(--ink2); font-size: 1rem; margin-top: .45rem; text-wrap: balance; line-height: 1.4; }
.ziua-nota b { font-style: normal; font-family: var(--sans); font-weight: 700; color: var(--ink); }
.impartire { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.1rem; font-family: var(--sans); font-size: .9375rem; color: var(--ink2); margin-top: .35rem; }
.impartire span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.impartire i { width: 9px; height: 9px; background: var(--c); }

.sir { border-top: 1px solid var(--frame); padding: .7rem 1rem .9rem; }
@media (min-width: 640px) and (max-width: 999px) {
  .ziua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ziua-cap { grid-column: 1 / -1; }
  .ziua .sir { border-top: 0; border-left: 1px solid var(--frame); display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.2rem; }
  .ziua .sir-nota { display: block; }
}
.sir-cap { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.sir-cap .n { font-family: var(--serif); font-weight: 500; font-size: 1.75rem; line-height: 1; color: var(--ink); }
.sir-cap .n small { font-family: var(--sans); font-weight: 400; font-size: 1rem; color: var(--ink2); margin-left: .35rem; }
.sir-cap .rec { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); white-space: nowrap; }
.saptamana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.zi { display: grid; justify-items: center; gap: 2px; font-family: var(--sans); font-size: .875rem; color: var(--ink2); }
.zi .loc { width: min(40px, 100%); aspect-ratio: 1; display: grid; place-items: center; position: relative; border-radius: 50%; border: 1px dashed var(--frame2); }
.zi .loc svg { width: 100%; height: 100%; }   /* the day shrinks with its column on narrow phones, never overlaps the next */
.zi.done .loc, .zi.rec .loc { border-color: transparent; }
.zi.done .loc svg, .zi.rec .loc svg { color: var(--cerneala); transform: rotate(var(--r, -8deg)); }
.zi.rec .loc svg { opacity: .75; }
.zi.free .loc { border-style: solid; border-color: var(--frame); }
.zi.free .loc svg, .zi.miss .loc svg { width: 20px; height: 20px; color: var(--ink2); }
.zi.viitor .loc { opacity: .6; }
.zi.azi { color: var(--ink); font-weight: 700; }
.zi.azi .loc { border: 0; }
.zi.azi:not(.done) .loc::before { /* today: circled by hand in the pupil's pencil */
  content: ""; position: absolute; inset: -1px -2px; border: 2px solid var(--acc); border-radius: 52% 48% 50% 46% / 46% 52% 48% 54%; transform: rotate(-12deg);
  border-right-color: color-mix(in srgb, var(--acc) 35%, transparent);
}
.zi.azi .loc .pct { font-family: var(--sans); font-weight: 700; font-size: .8125rem; color: var(--acc-t); font-variant-numeric: tabular-nums; }
.sir-nota { font-size: .9375rem; color: var(--ink2); font-style: italic; margin-top: .55rem; line-height: 1.4; }
@media (max-width: 699px) { .ziua .sir-nota { display: none; } .sir { padding-bottom: .75rem; } }

.pornire { display: grid; gap: .4rem; }
.pornire .btn { width: 100%; }
.pornire .nota-mica { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); }
/* the other doors: rows, their words on the left (the right edge stays free for the servos bar on phones) */
.actiuni { border-top: 1px solid var(--frame); }
.actiuni li { border-bottom: 1px solid var(--frame); }
.actiune { display: flex; align-items: center; gap: .85rem; width: auto; max-width: 100%; min-height: 54px; padding: .4rem 1.2rem .4rem .2rem; border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none; color: var(--ink); }
.actiune:hover .t b { text-decoration: underline; text-decoration-color: var(--frame2); text-underline-offset: .2em; }
.actiune > .ic { width: 24px; height: 24px; color: var(--ink2); }
.actiune .t { display: grid; line-height: 1.25; }
.actiune .t b { font-family: var(--sans); font-weight: 500; font-size: 1.125rem; }
.actiune .t span { font-size: .9375rem; color: var(--ink2); font-style: italic; }
.actiune .nr { font-family: var(--sans); font-weight: 700; font-size: .875rem; min-width: 26px; height: 26px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 13px; color: var(--rubric); border: 1px solid color-mix(in srgb, var(--rubric) 40%, var(--frame)); margin-left: .1rem; align-self: center; }
.actiune[aria-disabled="true"] { cursor: default; }
.actiune[aria-disabled="true"] .t b { color: var(--ink2); }

/* the numbers that matter: today's mark, the days left, the passed chapters */
.cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cifra { padding: .7rem .75rem .75rem; display: grid; gap: .1rem; align-content: start; text-decoration: none; color: inherit; min-width: 0; }
.cifra + .cifra { border-left: 1px solid var(--frame); }
.cifra .sc { font-size: .75rem; letter-spacing: .08em; }
.cifra .v { font-family: var(--serif); font-weight: 500; font-size: 1.625rem; line-height: 1.1; color: var(--ink); }
.cifra .v small { font-family: var(--sans); font-weight: 400; font-size: .9375rem; color: var(--ink2); }
.cifra .d { font-size: .9375rem; color: var(--ink2); font-style: italic; line-height: 1.3; }
a.cifra:hover .v { color: var(--acc-t); }

/* the series: tally marks, erasers, stars */
.serie-card { padding: .9rem 1rem 1rem; }
.serie { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .9rem; align-items: center; }
.serie .v { font-family: var(--serif); font-weight: 500; font-size: 2.5rem; line-height: 1; color: var(--ink); grid-row: span 2; min-width: 2ch; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.bete { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--acc); min-height: 24px; }
.bete svg { height: 22px; width: auto; }
.bete .r5 { width: 24px; } .bete .r1 { width: 7px; }
.bete .mai { font-family: var(--sans); font-size: .875rem; color: var(--ink2); }
.serie .lbl { font-size: 1rem; color: var(--ink2); line-height: 1.35; }
.serie .lbl b { font-family: var(--sans); font-weight: 700; color: var(--ink); }
.repar { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem; margin-top: .7rem; font-family: var(--sans); font-size: .9375rem; color: var(--ink2); }
.puncte-rep { display: inline-flex; gap: 4px; }
.puncte-rep i { width: 9px; height: 9px; border-radius: 50%; border: 1.3px solid var(--rubric); }
.trusa { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--frame); }
.trusa > div { display: flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: 1rem; color: var(--ink2); }
.trusa b { color: var(--ink); font-weight: 700; }
.trusa .rad { width: 32px; height: 16px; }
.trusa .rad.gol { opacity: .2; filter: grayscale(1); }
.trusa .st { width: 20px; height: 20px; }

/* the next goal */
.banner { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .75rem; align-items: start; padding: .8rem 1rem; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 7%, var(--sheet)); }
.banner .capat { width: 28px; height: 28px; color: var(--c); margin-top: .1rem; }
.banner p { font-size: 1.0625rem; line-height: 1.45; }
.banner b { font-family: var(--sans); font-weight: 700; }
.banner .cn { color: var(--ct); font-weight: 500; }

/* ---------- the chapters: one pencil each, its level hatched along a ruler ---------- */
.capitole { display: grid; gap: .55rem; }
@media (min-width: 700px) { .capitole { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }
.capitol { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-content: start; column-gap: .75rem; row-gap: .05rem; padding: .7rem .9rem .65rem .8rem; }
.capitol:hover { border-color: var(--tick); }
.capitol .capat { width: 28px; height: 28px; color: var(--c); grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: .1rem; }
.capitol h3 { grid-column: 2; grid-row: 1; font-weight: 500; font-size: 1.125rem; line-height: 1.25; }
.capitol h3 button { all: unset; cursor: pointer; }
.capitol h3 button::after { content: ""; position: absolute; inset: 0; }
.capitol h3 button:focus-visible { outline: none; }
.capitol:has(button:focus-visible) { outline: 2px solid var(--acc-t); outline-offset: 2px; }
.capitol .proc { grid-column: 3; grid-row: 1; font-family: var(--serif); font-weight: 600; font-size: 1.1875rem; line-height: 1.25; color: var(--ink); text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.capitol .proc.nou { font-weight: 400; font-style: italic; color: var(--ink2); font-size: 1rem; }
.capitol .creion-nume { grid-column: 2 / -1; grid-row: 2; font-family: var(--sans); font-size: .9375rem; color: var(--ct); line-height: 1.3; }
.capitol .creion-nume .it { color: var(--ink2); }
.capitol .desc { grid-column: 2 / -1; font-size: 1rem; color: var(--ink2); font-style: italic; line-height: 1.35; margin-top: .3rem; text-wrap: pretty; }
@media (max-width: 699px) {
  .capitol .desc, .capitol .creion-nume { display: none; }
  .capitole { gap: 0; background: var(--sheet); border: 1px solid var(--frame); box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px color-mix(in srgb, var(--frame) 62%, transparent); padding: 4px 0; }
  .capitol.foaie { background: none; border: 0; box-shadow: none; padding: .6rem .9rem .55rem .75rem; }
  .capitol + .capitol::before { content: ""; position: absolute; left: .75rem; right: .75rem; top: 0; border-top: 1px solid var(--frame); }
  .capitol .capat { grid-row: 1; }
  .capitol .rigla { margin-top: .3rem; }
}
.capitol .rigla { grid-column: 2 / -1; margin-top: .5rem; }
.capitol .stare { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .35rem; font-family: var(--sans); font-size: .9375rem; color: var(--ink2); align-items: center; }
.capitol .stare:empty { display: none; }
.stare .reluat { color: var(--rubric); }
.stare .trecut { display: inline-flex; align-items: center; gap: .3rem; color: var(--verde); font-weight: 700; }
.stare .trecut svg { width: 16px; height: 16px; }
.stare .acum { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); }
.stare .acum::before { content: ""; width: 1.5em; height: .65em; background: var(--marker); opacity: calc(var(--marker-a) + .15); transform: skewX(-12deg); }

/* the ruler: centimetre ticks, the hatching, the pencil's tip where it stops, the red notch at 85 */
.rigla { position: relative; height: 22px; --n: 0; display: block; }
.rigla::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-top: 1px solid var(--frame2);
  background: linear-gradient(90deg, var(--tick) 1px, transparent 1px) 0 0 / 10% 7px repeat-x,
    linear-gradient(90deg, color-mix(in srgb, var(--tick) 70%, transparent) 1px, transparent 1px) 5% 0 / 10% 4px repeat-x;
}
.rigla .pista { position: absolute; left: 0; right: 0; top: 9px; height: 11px; background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frame) 80%, transparent); }
.rigla .hasura { position: absolute; left: 0; top: 9px; height: 11px; width: calc(var(--n) * 1%); background: repeating-linear-gradient(-60deg, var(--c) 0 1.5px, transparent 1.5px 3.6px), color-mix(in srgb, var(--c) 14%, transparent); }
.rigla.peste .hasura { background: repeating-linear-gradient(-60deg, var(--c) 0 1.5px, transparent 1.5px 3.6px), repeating-linear-gradient(60deg, var(--c) 0 1.1px, transparent 1.1px 3.6px), color-mix(in srgb, var(--c) 18%, transparent); }
.rigla .varf { position: absolute; top: 9px; left: calc(var(--n) * 1% - 2px); width: 24px; height: 11px; color: var(--c); }
.rigla.gol .varf { left: -2px; }
.rigla .prag { position: absolute; left: 85%; top: 2px; bottom: -1px; width: 0; border-left: 1.5px solid var(--rubric); }
.rigla .prag::before { content: ""; position: absolute; left: -4.5px; top: -3px; border: 4px solid transparent; border-top: 5px solid var(--rubric); }

/* the inside cover: book cloth, a gold rule, the pins and the stars kept on it */
.coperta {
  background-color: var(--panza); color: var(--panza-ink); padding: 1rem 1rem 1.1rem 1.35rem; position: relative; overflow: hidden;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 3px);
  box-shadow: inset 6px 0 0 var(--panza2), inset 7px 0 0 rgba(255, 255, 255, .05);
}
.coperta::before { content: ""; position: absolute; inset: 7px 7px 7px 14px; border: 1px solid color-mix(in srgb, var(--aur) 55%, transparent); pointer-events: none; }
.coperta-cap { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; position: relative; }
.coperta-cap h2 { font-weight: 500; font-size: 1.3125rem; color: var(--aur-t); letter-spacing: .02em; }
.coperta-cap .n { font-family: var(--sans); font-size: .9375rem; color: var(--panza-ink2); }
.insigne { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .7rem .4rem; position: relative; }
.insigna { display: grid; justify-items: center; align-content: start; gap: .25rem; text-align: center; font-family: var(--sans); font-size: .875rem; line-height: 1.2; color: var(--panza-ink2); position: relative; }
.insigna svg { width: 46px; height: 46px; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .45)); transform: rotate(var(--r, 0deg)); }
.insigna.lipsa svg { opacity: .28; filter: grayscale(1); }
.insigna.lipsa span { opacity: .8; }
.insigna .nou { position: absolute; top: -4px; right: calc(50% - 32px); font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: #2a160f; background: var(--aur-t); padding: 1px 5px 2px; border-radius: 2px; }
.stele-rand { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--aur) 35%, transparent); position: relative; font-family: var(--sans); font-size: .9375rem; color: var(--panza-ink2); }
.stele-rand svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.stele-rand svg:nth-child(odd) { transform: rotate(-9deg); } .stele-rand svg:nth-child(3n) { transform: rotate(7deg); }
.stele-rand .t { flex-basis: 100%; margin-top: .35rem; }
.stele-goale { display: inline-flex; gap: 3px; }
.stele-goale svg { width: 22px; height: 22px; fill: none; stroke: color-mix(in srgb, var(--aur) 45%, transparent); stroke-width: 1.1; stroke-linejoin: round; filter: none; }
.stele-goale svg:nth-child(odd) { transform: rotate(-9deg); } .stele-goale svg:nth-child(3n) { transform: rotate(7deg); }
.coperta-nota { color: var(--panza-ink2); position: relative; margin-top: .6rem; }

/* ---------- 8. A round ---------- */
.runda { max-width: 1060px; margin-inline: auto; }
.runda-cap { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: 14px 0 10px; border-bottom: 1px solid var(--frame); position: relative; }
.runda-cap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; border-bottom: 1px solid var(--frame); }
.iesi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink2); background: none; border: 0; cursor: pointer; text-decoration: none; }
.iesi:hover { color: var(--ink); background: var(--sheet); }
.iesi svg { width: 22px; height: 22px; }
/* the ten boxes of the round: each answered one takes its chapter's pencil */
.banda { display: grid; grid-template-columns: repeat(var(--total, 10), minmax(0, 24px)); gap: 3px; }
.banda li { aspect-ratio: 1; max-height: 24px; border: 1px solid var(--frame2); background: var(--sheet); position: relative; }
.banda li.ok { border-color: var(--c); background: repeating-linear-gradient(-60deg, var(--c) 0 1.5px, color-mix(in srgb, var(--c) 30%, var(--sheet)) 1.5px 3.4px); }
.banda li.no { border-color: var(--c); background: var(--sheet); }
.banda li.no::after { content: ""; position: absolute; inset: 4px; background: linear-gradient(45deg, transparent 44%, var(--rubric) 44% 58%, transparent 58%), linear-gradient(-45deg, transparent 44%, var(--rubric) 44% 58%, transparent 58%); }
.banda li.cur { border: 2px solid var(--ink); }
.banda li.gata { background: repeating-linear-gradient(-60deg, var(--ink3) 0 1px, transparent 1px 3px), var(--sheet); border-color: var(--ink3); }
/* the tally chip: the series, the erasers, the bubble after an answer, the repair dots */
.cip { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .2rem .65rem; border: 1px solid var(--frame); background: var(--sheet); position: relative; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.cip .bete { min-height: 18px; gap: 4px; } .cip .bete svg { height: 18px; } .cip .bete .r5 { width: 19px; } .cip .bete .r1 { width: 6px; }
.cip .rad { width: 24px; height: 12px; }
.cip .n-rad { font-family: var(--sans); font-weight: 400; font-size: .9375rem; color: var(--ink2); margin-left: -.2rem; }
.cip .puncte-rep { margin-left: .1rem; }
.cip .puncte-rep { align-items: center; }
.cip .puncte-rep i { width: 7px; height: 7px; }
.cip .puncte-rep .mai { font-family: var(--sans); font-weight: 500; font-size: .8125rem; color: var(--rubric); margin-left: 2px; }
.bula { position: absolute; top: -.7rem; right: -.3rem; font-family: var(--sans); font-weight: 700; font-size: .875rem; line-height: 1; padding: 3px 6px; border-radius: 9px; background: var(--verde); color: var(--sheet); }
.bula.minus { background: var(--rubric); }
.bula.zero { background: var(--ink2); }
@media (max-width: 599px) { .cip .bete { display: none; } .cip { padding-inline: .55rem; gap: .3rem; } }
.sim-cap { grid-template-columns: 44px minmax(0, 1fr) auto; }

.intrebare { padding: .9rem 0 0; }
.eticheta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; font-family: var(--sans); font-size: 1rem; color: var(--ink2); margin-bottom: .8rem; }
.eticheta .capat { width: 18px; height: 18px; color: var(--c); }
.eticheta .cap-n { color: var(--ct); font-weight: 500; }
.eticheta .nr-q { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1.0625rem; }
.eticheta .item { border: 1px solid var(--frame2); padding: 0 .35rem; font-size: .9375rem; color: var(--ink2); }
.eticheta .perfect { font-style: italic; font-family: var(--serif); color: var(--verde); margin-left: auto; }
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.enunt { font-size: 1.1875rem; line-height: 1.5; text-wrap: pretty; overflow-wrap: break-word; }
.enunt table { font-size: .95em; }
@media (min-width: 700px) { .enunt { font-size: 1.3125rem; } }
@media (min-width: 900px) {
  .intrebare { padding-top: 1.3rem; }
  .q-grid { max-width: 760px; }
  .q-grid.cu-fig, .q-grid.cu-text { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); column-gap: 2.25rem; align-items: start; }
  .q-grid.cu-fig > *, .q-grid.cu-text > * { grid-column: 1; }
  .q-grid.cu-fig > .plansa, .q-grid.cu-text > .text-lucrare { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 1rem; max-width: none; }
  .q-grid.cu-text > .text-lucrare ~ .text-lucrare { grid-row: auto; position: static; }
  .plansa svg.fig { max-height: 300px; }
  .q-grid.fig-jos > .plansa { max-width: 560px; justify-self: start; }
}
/* the figure: squared paper, the drawing in ink */
.plansa { background: var(--sheet); border: 1px solid var(--frame); padding: .45rem; justify-self: center; width: 100%; max-width: 380px; }
.plansa .grila-f { background-image: linear-gradient(var(--grila) 1px, transparent 1px), linear-gradient(90deg, var(--grila) 1px, transparent 1px); background-size: 14px 14px; background-position: -1px -1px; padding: .35rem .5rem; }
.plansa svg.fig { max-height: 210px; }
.plansa figcaption { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); padding: .35rem .2rem 0; display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.plansa figcaption .k { display: inline-flex; align-items: center; gap: .35rem; }
.plansa figcaption .k i { width: 16px; height: 10px; display: inline-block; }
.k-forma { background: color-mix(in srgb, var(--c, var(--acc)) 22%, transparent); box-shadow: inset 0 0 0 1px var(--ink3); }
.k-cheie { border-top: 3px solid var(--acc); height: 0 !important; }
.k-drept { border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); width: 10px !important; }
.k-p1, .k-p2, .k-p3 { border-top: 3px solid; height: 0 !important; width: 14px !important; }
.k-p1 { border-color: var(--c, var(--acc)); } .k-p2 { border-color: var(--acc); } .k-p3 { border-color: var(--verde); }
.sim-fig { width: 100%; height: auto; max-height: 260px; object-fit: contain; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sim-fig { filter: invert(.9) sepia(.12); mix-blend-mode: screen; } }
:root[data-theme="dark"] .sim-fig { filter: invert(.9) sepia(.12); mix-blend-mode: screen; }
/* a text to read, with line numbers as on the paper */
.text-lucrare { background: var(--sheet); border: 1px solid var(--frame); padding: .8rem 1rem .75rem; }
.text-lucrare .titlu { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); margin-bottom: .45rem; padding-bottom: .4rem; border-bottom: 1px solid var(--frame); }
.text-lucrare .titlu b { font-weight: 700; color: var(--ink); }
.text-lucrare .proza { font-size: 1.0625rem; line-height: 1.6; }
.text-lucrare .proza p + p { margin-top: .5rem; }
.vers { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: .5rem; font-size: 1.125rem; line-height: 1.7; font-style: italic; }
.vers .ln { font-family: var(--sans); font-style: normal; font-size: .75rem; color: var(--ink3); text-align: right; font-variant-numeric: tabular-nums; padding-top: .35rem; }
.vers .gol { grid-column: 1 / -1; height: .7em; }
.text-lucrare .sursa { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); margin-top: .4rem; text-align: right; }
.text-lucrare .sursa cite { font-family: var(--serif); font-style: italic; }
/* the options: a letter in the answer bubble, filled with your pencil when you choose */
.variante { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.variante.doua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .variante.doua-lat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.var {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: .7rem; width: 100%; min-height: 56px;
  padding: .45rem .75rem .45rem .55rem; text-align: left; cursor: pointer; background: var(--sheet); color: var(--ink);
  border: 1px solid var(--frame2); border-radius: 2px; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.3; position: relative;
  box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3px color-mix(in srgb, var(--frame) 55%, transparent);
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
button.var:not([disabled]):hover { border-color: var(--acc); }
button.var:not([disabled]):active { transform: translateY(1px); }
.var .lit { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ink3); font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--ink2); }
.var .t { min-width: 0; overflow-wrap: break-word; }
.var .t table { font-size: .9em; }
.var .sem { font-family: var(--sans); font-size: .75rem; font-weight: 500; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; text-transform: uppercase; letter-spacing: .07em; }
.var .sem svg { width: 18px; height: 18px; }
.variante.doua .var, .variante.af .var { grid-template-columns: 34px minmax(0, 1fr); }
.variante.doua .var .sem, .variante.af .var .sem { grid-column: 2; margin-top: -.3rem; }
/* true / false: two big letter tiles, A then F, as on the answer sheet */
.variante.af { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.variante.af .var { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 92px; padding: .7rem .5rem; gap: .2rem; }
.variante.af .var .lit { width: 46px; height: 46px; font-size: 1.375rem; font-family: var(--serif); font-weight: 600; }
.variante.af .var .sem { grid-column: 1; margin: 0; }
/* chosen (practice: for a moment; simulation: kept, without a verdict) */
.var.ales { border-color: var(--acc); box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3px var(--acc); }
.var.ales .lit { border-color: var(--acc); color: var(--btn-fg); background: repeating-linear-gradient(-55deg, var(--btn-bg) 0 2.2px, color-mix(in srgb, var(--btn-bg) 85%, var(--sheet)) 2.2px 3.4px); }
.var.ales .sem { color: var(--acc-t); }
/* after the answer: the highlighter on the right one; the wrong choice marked quietly */
.var.corect { border-color: color-mix(in srgb, var(--verde) 60%, var(--frame2)); background: color-mix(in srgb, var(--verde-wash) 55%, var(--sheet)); box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 3px color-mix(in srgb, var(--verde) 30%, transparent); }
.var.corect .lit { border-color: var(--verde); background: var(--verde); color: var(--sheet); }
.var.corect .t { position: relative; z-index: 0; justify-self: start; color: var(--marker-ink); }
.variante.af .var.corect .t { justify-self: center; }
.var.corect .t::before { content: ""; position: absolute; z-index: -1; left: -.3em; right: -.35em; top: var(--mk-sus); bottom: var(--mk-jos); background: var(--marker); opacity: var(--marker-a); mix-blend-mode: var(--marker-blend); border-radius: .25em .6em .3em .7em / .5em .4em .6em .45em; transform: rotate(-.8deg) skewX(-6deg); }
.var.corect .sem { color: var(--verde); }
.var.gresit { border-color: color-mix(in srgb, var(--rubric) 55%, var(--frame2)); box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3px color-mix(in srgb, var(--rubric) 22%, transparent); }
.var.gresit .lit { border-color: var(--rubric); color: var(--rubric); background: none; }
.var.gresit .sem { color: var(--rubric); }
.raspunsa .var:not(.corect):not(.gresit):not(.ales) { opacity: .62; }
.var[disabled] { cursor: default; }

/* the hint: an index card, a red line under its head, blue ruling */
.fisa {
  --lh: 1.7em; font-size: 1.0625rem; line-height: var(--lh); background: var(--sheet); border: 1px solid var(--frame); position: relative;
  box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px color-mix(in srgb, var(--frame) 55%, transparent);
}
.fisa .fi-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem .6rem; padding: .6rem 1rem .45rem; border-bottom: 1.5px solid var(--margine); line-height: 1.3; }
.fisa .fi-cap .sub { font-style: italic; color: var(--ink2); font-size: .9375rem; }
.fisa .fi-text { padding: 0 1rem; margin-top: .3em; background-image: linear-gradient(transparent calc(var(--lh) - 1px), color-mix(in srgb, var(--ruling) 34%, transparent) calc(var(--lh) - 1px)); background-size: 100% var(--lh); background-position: 0 .1em; }
.fisa h3 { font-weight: 600; font-size: 1em; line-height: var(--lh); }
.fisa p { line-height: var(--lh); }
.fisa .schita { margin: .4rem auto 0; max-width: 280px; padding: 0 1rem; }
.fisa .fi-nota { font-family: var(--sans); font-size: .9375rem; line-height: 1.4; color: var(--ink2); margin: .5rem 1rem 0; padding: .5rem 0 .85rem; border-top: 1px dashed var(--frame2); }
@media (min-width: 760px) { .fisa .fi-corp.cu-schita { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: start; } .fisa .schita { padding: .5rem 1rem 0 0; } }
@media (max-width: 699px) { .variante.ocol, .alege fieldset.ocol, .alege .camp.ocol, .acasa .pornire.ocol, .acasa .saptamana.ocol, .final-act.ocol, .prima .start.ocol, .intro p.ocol { margin-right: 52px; } .ziua-cap.ocol { padding-right: 52px; } }
@media (max-width: 359px) { .variante.doua.ocol { grid-template-columns: minmax(0, 1fr); } .variante.doua.ocol .var { grid-template-columns: 34px minmax(0, 1fr) auto; } .variante.doua.ocol .var .sem { grid-column: auto; margin-top: 0; } }

/* the foot of a round: the hint at the left, the next step at the right; never under the servos corner */
.jos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--paper); border-top: 1px solid var(--frame); padding: 0 0 max(10px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 24px -20px rgba(40, 25, 10, .45); }
.jos .app { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; max-width: 1060px; }
@media (max-width: 699px) { .jos .app { padding-right: max(var(--servos-w), env(safe-area-inset-right, 0px)); width: calc(100% - var(--gx)); margin-left: var(--gx); } }
.jos-rand { display: flex; gap: .55rem; align-items: center; padding-top: 10px; min-height: 72px; }
.jos-rand .btn.prim { flex: 1 1 auto; max-width: 420px; margin-left: auto; justify-content: space-between; }
.jos-rand .btn.prim.ascuns { visibility: hidden; }
.jos-rand .btn-ind { flex: none; }
@media (max-width: 459px) { .jos-rand .btn-ind.dupa { padding-inline: .8rem; } .jos-rand .btn-ind.dupa span:not(.tasta) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.jos-rand .btn-ind .ic { color: var(--rubric); }
.jos-rand .btn-ind[aria-expanded="true"] { border-color: var(--margine); }
body.cu-jos main { padding-bottom: calc(var(--jos-h, 92px) + 1.5rem); }

/* ---------- 9. Feedback: a compact sheet over the foot; the right answer first ---------- */
.fb { padding-top: .8rem; max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; }
.fb-cap { display: flex; align-items: center; gap: .55rem; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.3; }
.fb-cap .semn-v { width: 26px; height: 26px; flex: none; }
.fb.bine .semn-v { color: var(--verde); }
.fb.rau .semn-v { color: var(--rubric); width: 20px; height: 20px; margin: 0 3px; }
.fb-cap b { font-weight: 700; }
.fb-cap > span { min-width: 0; overflow-wrap: anywhere; }
.fb-cap .ras { font-family: var(--serif); font-size: 1.125rem; color: var(--marker-ink); padding: 0 .2em; background: linear-gradient(transparent var(--mk-de), color-mix(in srgb, var(--marker) calc(var(--marker-a) * 100%), transparent) var(--mk-de) var(--mk-la), transparent var(--mk-la)); }
.fb-cap .ras .fr { font-size: .8em; }
.fb-ales { margin-top: .25rem; font-family: var(--sans); font-size: 1rem; color: var(--ink2); line-height: 1.4; }
.fb-ales b { color: var(--ink); font-weight: 500; }
.fb .why { margin-top: .45rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; overflow-wrap: break-word; }
.fb .why .fr { font-size: .8em; }
.fb .cheer { display: inline-flex; align-items: center; gap: .45rem; margin-top: .45rem; font-family: var(--sans); font-weight: 500; font-size: 1rem; color: var(--ink); }
.fb .cheer svg { width: 30px; height: 15px; }
.lucrare-pasi { margin-top: .55rem; border-left: 2px solid var(--margine); padding: .2rem 0 .2rem .8rem; display: grid; gap: .3rem; font-size: 1.0625rem; }
.lucrare-pasi li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; }
.lucrare-pasi .p { font-family: var(--sans); font-size: .9375rem; color: var(--rubric); white-space: nowrap; }
.lucrare-pasi .titlu { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); }

/* ---------- 10. The end of a round ---------- */
.final { padding: 1.1rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
@media (min-width: 1000px) { .final { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; } .final > .scor { grid-column: 1; grid-row: 1 / span 2; } .final > .strans-sec { grid-column: 2; grid-row: 1; } .final > .final-act { grid-column: 2; grid-row: 2; } .final > .lista-sec { grid-column: 1 / -1; } }
.scor { position: relative; text-align: center; padding: 1.4rem 1rem 1.3rem; display: grid; justify-items: center; }
.scor .mare { font-family: var(--serif); font-weight: 500; font-size: 5rem; line-height: 1; margin: .4rem 0 .25rem; color: var(--ink); font-variant-numeric: lining-nums; }
.scor .mare small { font-size: .42em; color: var(--ink2); font-weight: 400; margin-left: .05em; }
.scor .msg { font-style: italic; font-size: 1.25rem; color: var(--ink2); text-wrap: balance; max-width: 26em; }
.scor .msg em { color: var(--rubric); }
.scor .det { margin-top: .6rem; font-family: var(--sans); font-size: 1rem; color: var(--ink2); }
.stampila { width: min(190px, 52vw); margin: .9rem auto .2rem; color: var(--cerneala); transform: rotate(-8deg); }
.stampila svg { width: 100%; height: auto; overflow: visible; }
.stampila .st-l { fill: none; stroke: currentColor; stroke-width: 2.2; }
.stampila .st-sub { stroke-width: 1; }
.stampila .st-t { font-family: var(--sans); font-weight: 700; font-size: 12.5px; fill: currentColor; letter-spacing: .6px; }
.stampila .st-stea { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.stampila .st-stea-pl { fill: currentColor; }
.stampila .st-nr { font-family: var(--sans); font-weight: 700; font-size: 15px; fill: currentColor; letter-spacing: 2px; }
.stampila .st-uzura { fill: var(--sheet); }
.strans { display: grid; }
.strans li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--frame); }
.strans li:first-child { border-top: 0; }
.strans .ob { width: 48px; height: 40px; display: grid; place-items: center; }
.strans .ob svg { max-width: 44px; max-height: 38px; width: 100%; height: 100%; }
.strans .t b { display: block; font-family: var(--sans); font-weight: 500; font-size: 1.125rem; line-height: 1.25; }
.strans .t span { font-size: 1rem; color: var(--ink2); line-height: 1.35; display: block; font-style: italic; }
.strans .plus { font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; color: var(--verde); white-space: nowrap; }
.strans-sec { padding: .9rem 1rem .6rem; }
.pini-noi {
  margin: .7rem 0 .5rem; padding: .8rem .8rem 1rem; position: relative; text-align: center; color: var(--panza-ink);
  background-color: var(--panza); background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 3px);
}
.pini-noi::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--aur) 55%, transparent); pointer-events: none; }
.pini-noi .pn-cap { position: relative; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--aur-t); margin-bottom: .6rem; }
.pini-noi ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1.6rem; position: relative; }
.pini-noi li { display: grid; justify-items: center; gap: .35rem; width: 8.5rem; position: relative; }
.pini-noi .pin-mare { display: inline-block; }
.pini-noi .pin-mare svg { width: 60px; height: 60px; filter: drop-shadow(0 2.5px 2px rgba(0, 0, 0, .5)); transform: rotate(var(--r, 0deg)); }
.pini-noi .nou { position: absolute; top: -6px; right: calc(50% - 42px); font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: #2a160f; background: var(--aur-t); padding: 1px 5px 2px; border-radius: 2px; }
.pini-noi .pn-t { font-family: var(--sans); font-size: .9375rem; line-height: 1.25; color: var(--panza-ink); text-wrap: balance; }
.lista-runda { display: grid; }
.lista-runda > li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: .3rem .7rem; padding: .75rem 0; border-top: 1px solid var(--frame); }
.lista-runda > li:first-child { border-top: 0; }
.lista-runda .capat { width: 20px; height: 20px; color: var(--c); margin-top: .2rem; }
.lista-runda .q { font-size: 1.0625rem; line-height: 1.45; }
.lista-runda .q svg.fig { max-width: 260px; margin: .4rem 0; }
.lista-runda .r { margin-top: .3rem; font-family: var(--sans); font-size: 1rem; color: var(--ink2); display: grid; gap: .1rem; }
.lista-runda .r b { font-weight: 500; color: var(--ink); }
.lista-runda .r .ok { color: var(--marker-ink); padding: 0 .15em; background: linear-gradient(transparent var(--mk-de), color-mix(in srgb, var(--marker) calc(var(--marker-a) * 100%), transparent) var(--mk-de) var(--mk-la), transparent var(--mk-la)); }
.lista-runda .why { margin-top: .35rem; font-size: 1rem; color: var(--ink); line-height: 1.5; }
.final-act { display: grid; gap: .6rem; }
@media (min-width: 560px) { .final-act { grid-template-columns: 1fr auto; } }

/* ---------- 11. Simulations: the clock in plain sight ---------- */
.sim-titlu { font-family: var(--sans); line-height: 1.2; min-width: 0; }
.sim-titlu b { display: block; font-weight: 500; font-size: 1.0625rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-titlu span { font-size: .9375rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cronometru { display: flex; align-items: center; gap: .45rem; padding: .2rem .6rem .2rem .25rem; border: 1px solid var(--frame); background: var(--sheet); }
.cronometru svg { width: 40px; height: 40px; overflow: visible; }
.cronometru .c-cadran { fill: var(--sheet); stroke: var(--ink2); stroke-width: 1.2; }
.cronometru .c-t { stroke: var(--ink3); stroke-width: .8; }
.cronometru .c-sector { fill: var(--acc); fill-opacity: .2; }
.cronometru .c-ac { stroke: var(--acc); stroke-width: 2; stroke-linecap: round; }
.cronometru .c-sec { stroke: var(--rubric); stroke-width: 1; stroke-linecap: round; }
.cronometru .c-buton { fill: var(--ink2); }
.cronometru .timp { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; line-height: 1; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.cronometru .timp small { display: block; font-family: var(--serif); font-weight: 500; font-size: .6875rem; color: var(--ink2); letter-spacing: .08em; text-transform: uppercase; margin-top: .15rem; }
.sim-banda { margin: .9rem 0 0; max-width: 520px; }
.sim-regula { margin-top: .9rem; display: flex; gap: .5rem; align-items: baseline; font-family: var(--sans); font-size: .9375rem; color: var(--ink2); }
.sim-lista { display: grid; gap: .7rem; }
@media (min-width: 900px) { .sim-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sim-card { padding: 1rem 1rem 1.05rem; display: grid; gap: .3rem; align-content: start; }
.sim-card h3 { font-weight: 500; font-size: 1.25rem; line-height: 1.25; }
.sim-card .src { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); }
.sim-card .det { font-size: 1rem; color: var(--ink2); font-style: italic; }
.sim-card .ult { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); margin-top: .2rem; }
.sim-card .btn { margin-top: .6rem; justify-self: start; }
.lucrari { display: grid; }
.lucrari li { border-top: 1px solid var(--frame); }
.lucrari li:first-child { border-top: 0; }
.lucrare-rand { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; align-items: center; width: 100%; padding: .65rem .2rem; min-height: 56px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); text-decoration: none; }
.lucrare-rand b { font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; }
.lucrare-rand .m { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); grid-column: 1; }
.lucrare-rand .pct { grid-row: 1 / span 2; grid-column: 2; font-family: var(--serif); font-weight: 600; font-size: 1.375rem; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.lucrare-rand .pct small { display: block; font-family: var(--sans); font-weight: 400; font-size: .875rem; color: var(--ink2); }
.lucrare-rand:hover b { text-decoration: underline; text-decoration-color: var(--frame2); text-underline-offset: .2em; }
.rezultat { padding: 1.1rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
@media (min-width: 1000px) { .rezultat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; } }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips span { font-family: var(--sans); font-size: .875rem; font-weight: 500; min-width: 54px; text-align: center; padding: .2rem .35rem; border: 1px solid var(--frame); background: var(--sheet); font-variant-numeric: tabular-nums; }
.chips b { display: block; font-weight: 700; font-size: .8125rem; color: var(--ink2); }
.chips .plin { border-color: color-mix(in srgb, var(--verde) 50%, var(--frame)); color: var(--verde); }
.chips .zero { color: var(--ink2); background: repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--ink) 5%, transparent) 4px 5px), var(--sheet); }
.chips .partial { color: var(--ink); }

/* ---------- 12. A saved paper, in full ---------- */
.vs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.vs-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--frame); }
.vs-cap h3 { font-weight: 500; font-size: 1.25rem; }
.vs-cap .m { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); }
.vs-item { padding: .85rem 0; border-bottom: 1px solid var(--frame); display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.vs-item:last-child { border-bottom: 0; }
.vs-item .si-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem; font-family: var(--sans); font-size: .9375rem; color: var(--ink2); }
.vs-item .si-cap b { color: var(--ink); font-weight: 500; }
.vs-item .q { font-size: 1.0625rem; line-height: 1.5; overflow-wrap: break-word; }
.vs-item .plansa { max-width: 300px; justify-self: start; }
.vs-ops { display: grid; gap: .25rem; font-size: 1.0625rem; }
.vs-ops > div { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .5rem; align-items: baseline; }
.vs-ops .l { font-family: var(--sans); font-weight: 700; color: var(--ink2); }
.vs-ops .tag { font-family: var(--sans); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.vs-ops .x { justify-self: start; }
.vs-ops .ok .x { color: var(--marker-ink); padding: 0 .15em; background: linear-gradient(transparent var(--mk-de), color-mix(in srgb, var(--marker) calc(var(--marker-a) * 100%), transparent) var(--mk-de) var(--mk-la), transparent var(--mk-la)); }
.vs-ops .ok .tag { color: var(--verde); }
.vs-ops .rau .tag { color: var(--rubric); }
.vs-ops .rau .l, .vs-ops .ok .l { color: var(--ink); }
.vs-item .why { font-size: 1rem; line-height: 1.5; color: var(--ink); border-left: 2px solid var(--frame2); padding-left: .75rem; }
.vs-item .neras { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); font-style: italic; }

/* ---------- 13. Study ---------- */
.studiu-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
@media (min-width: 900px) { .studiu-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.studiu-lista .fisa .fi-foot { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .3rem 1rem 1rem; }
.studiu-lista .fisa .fi-foot span { font-family: var(--sans); font-size: .9375rem; color: var(--ink2); }
.intro { max-width: 44rem; margin: 1.1rem 0 1rem; display: grid; gap: .5rem; }
.intro h1 { font-weight: 500; font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem); line-height: 1.1; }
.intro p { color: var(--ink2); font-size: 1.125rem; text-wrap: pretty; }
.inapoi { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-family: var(--sans); font-size: 1.0625rem; color: var(--ink2); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; margin-top: .6rem; }
.inapoi:hover { color: var(--ink); }
.inapoi .ic { width: 1.4rem; height: .8rem; }

/* ---------- 14. First visit and settings ---------- */
.prima { padding: 1.4rem 0 1rem; display: grid; gap: 1.5rem; }
@media (min-width: 1000px) { .prima { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; padding-top: 3rem; } .prima-text { position: sticky; top: 2rem; } }
.prima h1 { font-weight: 500; font-size: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem); line-height: 1.05; letter-spacing: -.01em; margin-top: .45rem; text-wrap: balance; }
.prima h1 em { color: var(--rubric); font-weight: 500; }
.prima .lead { margin-top: .8rem; font-size: 1.1875rem; color: var(--ink2); line-height: 1.5; max-width: 30em; text-wrap: pretty; }
.prima .start { margin-top: 1.2rem; display: grid; gap: .55rem; justify-items: start; }
.prima .start .btn { min-width: min(100%, 340px); }
.prima .start p { font-family: var(--sans); font-size: 1rem; color: var(--ink2); display: flex; align-items: center; gap: .45rem; }
.prima .start p .ic { width: 18px; height: 18px; }
.ce-primesti { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--frame); display: grid; gap: .7rem; max-width: 34rem; }
.ce-primesti li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .75rem; align-items: start; font-size: 1.0625rem; line-height: 1.45; color: var(--ink2); }
.ce-primesti b { font-family: var(--sans); font-weight: 500; color: var(--ink); }
.ce-primesti .ic { width: 24px; height: 24px; margin-top: .1rem; color: var(--ink2); }
.ce-primesti .ic.cr { color: var(--c); }
.alege { padding: 1rem 1rem 1.1rem; display: grid; gap: 1.3rem; }
.alege > .kicker { margin-bottom: -.4rem; }
.alege legend, .alege .eti { font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; padding: 0; margin-bottom: .5rem; display: flex; gap: .5rem; align-items: baseline; justify-content: space-between; width: 100%; color: var(--ink); }
.alege legend .opt, .alege .eti .opt { font-weight: 400; font-style: italic; font-family: var(--serif); color: var(--ink2); font-size: 1rem; }
.camp input { width: 100%; font-family: var(--serif); font-size: 1.1875rem; min-height: 48px; padding: .5rem .8rem; border-radius: 2px; border: 1px solid var(--frame2); background: var(--paper); color: var(--ink); }
.camp input::placeholder { color: var(--ink3); font-style: italic; opacity: 1; }
.camp input:focus-visible { outline: 2px solid var(--acc-t); outline-offset: 1px; }
.camp .ajutor { font-size: .9375rem; color: var(--ink2); font-style: italic; margin-top: .3rem; }
/* the tin: the pencils standing, the chosen one raised */
.cutie { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; align-items: end; padding: .8rem .5rem 0; height: 150px; position: relative; background: linear-gradient(color-mix(in srgb, var(--ink) 5%, var(--sheet2)), var(--sheet2)); border: 1px solid var(--frame2); border-bottom: 0; overflow: hidden; }
.cutie-fata { height: 44px; display: grid; place-items: center; background-color: var(--panza); color: var(--aur-t); font-style: italic; font-size: 1rem; letter-spacing: .04em; position: relative;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 4px var(--panza), inset 0 0 0 5px color-mix(in srgb, var(--aur) 50%, transparent); }
.cutie label { position: relative; display: grid; justify-items: center; cursor: pointer; height: 100%; align-items: end; min-height: 44px; }
.cutie label svg { width: 100%; max-width: 24px; height: 128px; color: var(--c); transform: translateY(24px); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); filter: drop-shadow(1px 2px 1px rgba(40, 20, 0, .2)); }
.cutie input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.cutie input:checked + svg { transform: translateY(-4px); }
.cutie input:focus-visible + svg { outline: 2px solid var(--ink); outline-offset: 3px; }
.cutie label:hover input:not(:checked) + svg { transform: translateY(14px); }
@media (max-width: 559px) {
  .cutie { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 92px; height: auto; column-gap: 4px; row-gap: 0; padding: .5rem .4rem 0; }
  .cutie label { height: 92px; min-height: 0; overflow: hidden; background: linear-gradient(transparent calc(100% - 5px), color-mix(in srgb, var(--ink) 9%, var(--sheet2)) calc(100% - 5px)); }
  .cutie label svg { transform: translateY(30px); }
  .cutie input:checked + svg { transform: translateY(2px); }
  .cutie label:hover input:not(:checked) + svg { transform: translateY(22px); }
  .cutie input:focus-visible + svg { outline: 0; }
  .cutie label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
}
.cutie-nume { margin-top: .5rem; font-family: var(--sans); font-size: 1rem; color: var(--ink2); display: flex; justify-content: space-between; gap: .5rem; }
.cutie-nume b { color: var(--acc-t); font-weight: 700; }
@media (max-width: 459px) { .cutie-nume { flex-direction: column; align-items: flex-start; gap: .1rem; } .cutie-nume span:empty { display: none; } }
.alege-insigne { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
@media (max-width: 559px) { .alege-insigne { max-width: 264px; margin-inline: auto; } }
@media (min-width: 560px) { .alege-insigne { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.alege-insigne label { display: grid; justify-items: center; gap: .15rem; padding: .45rem .1rem .35rem; border: 1px solid transparent; cursor: pointer; position: relative; font-family: var(--sans); font-size: .875rem; color: var(--ink2); min-height: 44px; text-align: center; line-height: 1.15; }
.alege-insigne svg { width: 42px; height: 42px; filter: drop-shadow(0 2px 1.5px rgba(40, 20, 0, .3)); }
.alege-insigne input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.alege-insigne label.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--sheet)); color: var(--ink); }
.alege-insigne label:focus-within { outline: 2px solid var(--acc-t); outline-offset: 1px; }
.tinte { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--frame2); }
.tinte label { position: relative; display: grid; place-items: center; min-height: 52px; cursor: pointer; font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1; color: var(--ink); text-align: center; }
.tinte label + label { border-left: 1px solid var(--frame2); }
.tinte label small { display: block; font-family: var(--sans); font-weight: 400; font-size: .8125rem; color: var(--ink2); margin-top: .15rem; }
.tinte input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.tinte label.on { background: var(--btn-bg); color: var(--btn-fg); box-shadow: inset 0 0 0 2px var(--btn-bg), inset 0 0 0 3px color-mix(in srgb, var(--btn-fg) 34%, transparent); }
.tinte label.on small { color: inherit; opacity: .9; }
.tinte label:focus-within { outline: 2px solid var(--acc-t); outline-offset: 2px; z-index: 1; }
.alege .ajutor-t { font-size: .9375rem; color: var(--ink2); font-style: italic; margin-top: .4rem; }
.alege-fin { display: grid; gap: .5rem; padding-top: .3rem; border-top: 1px solid var(--frame); }
.alege-fin .btn { width: 100%; margin-top: .6rem; }
/* the settings: a sheet over home */
dialog.setari { width: min(100% - 24px, 640px); max-height: min(92vh, 900px); padding: 0; border: 1px solid var(--frame2); background: var(--sheet); color: var(--ink); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .5); }
@media (max-width: 699px) { dialog.setari { width: calc(100% - var(--servos-w) - 12px); max-width: none; margin: auto auto auto 12px; } }
dialog.setari::backdrop { background: rgba(25, 20, 15, .45); }
.setari-cap { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .6rem .5rem 1rem; border-bottom: 1px solid var(--frame); position: sticky; top: 0; background: var(--sheet); z-index: 2; }
.setari-cap h2 { font-weight: 500; font-size: 1.375rem; }
dialog.setari .alege { border: 0; box-shadow: none; }

/* ---------- 15. Progress (for parents) ---------- */
.pagina-cap { padding: 1.4rem 0 .4rem; max-width: 46rem; display: grid; gap: .5rem; }
.pagina-cap h1 { font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.1; }
.pagina-cap .proza { font-size: 1.1875rem; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.pagina-cap .mic { font-size: 1rem; color: var(--ink2); }
.kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.4rem; }
@media (min-width: 900px) { .kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi > div { padding: .8rem .9rem .85rem; display: grid; gap: .15rem; align-content: start; border-right: 1px solid var(--frame); border-bottom: 1px solid var(--frame); }
@media (max-width: 899px) { .kpi > div:nth-child(2n) { border-right: 0; } .kpi > div:nth-child(n + 3) { border-bottom: 0; } }
@media (min-width: 900px) { .kpi > div { border-bottom: 0; } .kpi > div:last-child { border-right: 0; } }
.kpi .v { font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1.05; }
.kpi .v small { font-family: var(--sans); font-weight: 400; font-size: 1rem; color: var(--ink2); }
.kpi .d { font-size: .9375rem; color: var(--ink2); line-height: 1.35; font-style: italic; }
.doua-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 1000px) { .doua-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; } }
.nota-card { padding: 1rem 1rem 1.05rem; }
.nota-cap { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.nota-v { font-family: var(--serif); font-weight: 500; font-size: 2.75rem; line-height: 1; }
.nota-v small { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--ink2); margin-left: .3rem; }
.nota-card .expl { margin-top: .5rem; font-size: 1.0625rem; color: var(--ink); line-height: 1.5; max-width: 40em; }
.itemi-sub { margin-top: 1rem; }
.itemi-sub h3 { margin-bottom: .4rem; }
.itemi { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; }
.itemi li { border: 1px solid var(--frame); padding: .35rem .3rem .4rem; text-align: center; font-family: var(--sans); background: var(--sheet); min-height: 52px; display: grid; align-content: center; }
.itemi li b { font-weight: 700; font-size: .9375rem; color: var(--ink); }
.itemi li span { font-size: .8125rem; color: var(--ink2); }
.itemi li.sigur { border-color: color-mix(in srgb, var(--verde) 55%, var(--frame)); background: color-mix(in srgb, var(--verde-wash) 70%, var(--sheet)); }
.itemi li.aproape { border-color: color-mix(in srgb, var(--marker) 70%, var(--frame)); background: color-mix(in srgb, var(--marker) 14%, var(--sheet)); }
.itemi li.de-lucrat { border-color: color-mix(in srgb, var(--rubric) 35%, var(--frame)); }
.itemi li.hartie, .itemi li.partial { background: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--ink) 5%, transparent) 5px 6px), var(--sheet); }
.itemi li.hartie span, .itemi li.partial span, .itemi li.nu-inca span, .itemi li.nestiut span { font-style: italic; }
.itemi li.nu-inca { border-style: dashed; background: none; }
.legenda { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .8rem; font-family: var(--sans); font-size: .9375rem; color: var(--ink2); }
.legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda i { width: 16px; height: 12px; display: inline-block; border: 1px solid var(--frame); }
.legenda .sigur { background: color-mix(in srgb, var(--verde-wash) 70%, var(--sheet)); border-color: color-mix(in srgb, var(--verde) 55%, var(--frame)); }
.legenda .aproape { background: color-mix(in srgb, var(--marker) 14%, var(--sheet)); border-color: color-mix(in srgb, var(--marker) 70%, var(--frame)); }
.legenda .de-lucrat { border-color: color-mix(in srgb, var(--rubric) 35%, var(--frame)); }
.legenda .hartie { background: repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, var(--ink) 12%, transparent) 3px 4px); }
.legenda .nu-inca { border-style: dashed; }
/* the stamped days, week after week */
.calendar { padding: .9rem 1rem 1rem; }
.cal { display: grid; gap: 3px; max-width: 620px; }
.cal-r { display: grid; grid-template-columns: 4.2rem repeat(7, minmax(0, 1fr)); gap: 3px; align-items: center; }
.cal .zl { font-family: var(--sans); font-size: .875rem; color: var(--ink2); text-align: center; padding-bottom: .2rem; }
.cal .sl { font-family: var(--sans); font-size: .8125rem; color: var(--ink2); white-space: nowrap; }
.cal .c { aspect-ratio: 1; max-height: 58px; display: grid; place-items: center; position: relative; border: 1px dashed color-mix(in srgb, var(--frame2) 80%, transparent); font-family: var(--sans); font-size: .8125rem; color: var(--ink2); }
.cal .c.gol { border: 0; }
.cal .c svg { width: 82%; height: 82%; max-width: 44px; }
.cal .c.done, .cal .c.rec { border-color: transparent; }
.cal .c.done svg, .cal .c.rec svg { color: var(--cerneala); transform: rotate(var(--r, -8deg)); }
.cal .c.rec svg { opacity: .7; }
.cal .c.free svg { width: 50%; color: var(--ink2); }
.cal .c.azi { border: 2px solid var(--acc); }
.cal .c .min { position: absolute; bottom: 1px; right: 3px; font-size: .6875rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
.cal .c.done .min, .cal .c.rec .min { color: var(--ink); }
.cal .c .min-azi { font-family: var(--serif); font-weight: 600; font-size: 1rem; color: var(--acc-t); }
@media (max-width: 459px) { .cal-r { grid-template-columns: 2.6rem repeat(7, minmax(0, 1fr)); } .cal .c .min, .leg-min { display: none; } }
.legenda i.leg-gol { width: 13px; height: 13px; border: 1px dashed var(--frame2); }
.tabel-niv { display: grid; }
.tabel-niv li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: .7rem; padding: .6rem 0 .45rem; border-top: 1px solid var(--frame); align-items: center; }
.tabel-niv li:first-child { border-top: 0; }
.tabel-niv .capat { width: 20px; height: 20px; color: var(--c); }
.tabel-niv .n { font-size: 1.0625rem; line-height: 1.25; }
.tabel-niv .n small { font-family: var(--sans); color: var(--ink2); font-size: .875rem; margin-left: .35rem; }
.tabel-niv .p { font-family: var(--serif); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.tabel-niv .p.nou { font-weight: 400; font-style: italic; color: var(--ink2); font-size: .9375rem; }
.tabel-niv .rigla { grid-column: 2 / 4; height: 21px; margin-top: .2rem; }
.sim-det { border-top: 1px solid var(--frame); }
.sim-det:last-child { border-bottom: 1px solid var(--frame); }
.sim-det summary { list-style: none; cursor: pointer; }
.sim-det summary::-webkit-details-marker { display: none; }
.sim-det summary .lucrare-rand { pointer-events: none; }
.sim-det summary:focus-visible { outline: 2px solid var(--acc-t); outline-offset: 2px; }
.sim-det .desc-ic { width: 14px; height: 14px; transition: transform .15s ease; display: inline-block; vertical-align: -1px; margin-left: .35rem; color: var(--ink2); }
.sim-det[open] .desc-ic { transform: rotate(90deg); }
.sim-det .vs { padding: .2rem 0 1rem; }
.tabel-ind-loc { overflow-x: auto; }   /* a data table: at 200% zoom it scrolls in its own box, never the page */
.tabel-ind { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabel-ind th { text-align: left; font-family: var(--serif); font-weight: 500; text-transform: uppercase; letter-spacing: .09em; color: var(--ink2); font-size: .8125rem; padding: 0 .5rem .4rem 0; border-bottom: 1px solid var(--frame2); }
.tabel-ind td { padding: .55rem .5rem .55rem 0; border-bottom: 1px solid var(--frame); vertical-align: top; line-height: 1.35; }
.tabel-ind td.nr { text-align: right; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.tabel-ind tr.de-studiat td:last-child { color: var(--rubric); }
.tabel-ind td small { display: block; font-family: var(--sans); font-size: .875rem; color: var(--ink2); }
.reglaj { padding: 1rem; display: grid; gap: .8rem; max-width: 640px; }
.reglaj p { font-size: 1rem; color: var(--ink2); }
.reset { padding: 1rem; border: 1px dashed var(--frame2); display: grid; gap: .6rem; justify-items: start; max-width: 640px; }
.reset p { font-size: 1rem; color: var(--ink2); }
.gol-mesaj { font-style: italic; color: var(--ink2); font-size: 1.0625rem; padding: .4rem 0; }

/* no widows in running text (as on the page); balance where pretty is not drawn yet */
.enunt, .fb p, .fb .why, .prima li, .sir-nota, .lbl, .expl, .gol-mesaj, .stele-rand .t, .ajutor-t, .fi-text p, .fi-nota, .intro p, .banner p, .avert span { text-wrap: pretty; }
@supports not (text-wrap: pretty) { .enunt, .fb p, .fb .why, .prima li, .sir-nota, .lbl, .expl, .gol-mesaj, .stele-rand .t, .ajutor-t, .fi-text p, .fi-nota, .intro p, .banner p, .avert span { text-wrap: balance; } }

/* ---------- 16. Messages: the toast, the save warning, the boot error ---------- */
.toast { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(92vw, 460px); pointer-events: none; }
.toast > div { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem .55rem .6rem; background: var(--sheet); border: 1px solid var(--frame2); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .45), inset 0 0 0 3px var(--sheet), inset 0 0 0 4px color-mix(in srgb, var(--frame) 60%, transparent); font-family: var(--sans); font-size: 1rem; color: var(--ink); }
.toast svg { width: 34px; height: 34px; flex: none; color: var(--cerneala); }
.avert { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border: 1px solid color-mix(in srgb, var(--rubric) 45%, var(--frame)); border-left: 3px solid var(--rubric); background: var(--sheet); font-family: var(--sans); font-size: 1rem; color: var(--ink); margin: .8rem 0; }
.avert b { color: var(--rubric); font-weight: 700; }
.avert-stale { position: sticky; top: 0; z-index: 30; align-items: center; flex-wrap: wrap; justify-content: space-between; margin: .6rem auto; box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .5); }
.avert-stale .btn { min-height: 44px; }
.eroare-boot { max-width: 34rem; margin: 3rem auto; padding: 1.2rem 1.3rem; font-family: var(--sans); }
.eroare-boot h1 { font-family: var(--serif); font-weight: 500; font-size: 1.625rem; margin-bottom: .4rem; }
.eroare-boot p { color: var(--ink2); margin-bottom: .8rem; }
.eroare-boot code { font-size: .875rem; color: var(--ink2); word-break: break-word; }

/* ---------- 17. Motion, forced colours, the servos corner ---------- */
@media (prefers-reduced-motion: no-preference) {
  .scor .stampila { animation: stampila .5s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
  .bula { animation: bula .9s ease-out both; }
  .toast > div { animation: toast .35s ease-out both; }
  .fb { animation: urca .22s ease-out both; }
  .stea-noua { animation: lipeste .6s cubic-bezier(.3, 1.5, .5, 1) .2s both; }
}
@keyframes stampila { from { opacity: 0; transform: rotate(-8deg) scale(1.7); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes bula { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes toast { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes urca { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lipeste { from { opacity: 0; transform: rotate(40deg) scale(2); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  .foaie, .btn, .var, .cip, .fisa, .text-lucrare, .plansa, .cutie, .tinte, .itemi li, .banda li, .cronometru, .coperta { border: 1px solid CanvasText; forced-color-adjust: auto; }
  .btn.prim, .tinte label.on, .var.ales, .var.corect { border: 3px solid Highlight; }
  .var.gresit { border: 3px dashed CanvasText; }
  .rigla .hasura, .banda li.ok { background: CanvasText; forced-color-adjust: none; }
  .rigla .prag, .rigla .prag::before { border-color: Highlight; }
  .var.corect .t::before, .stare .acum::before { background: Highlight; }
  .coperta::before { border-color: CanvasText; }
  .materie[aria-current="page"] { border: 2px solid Highlight; }
  .zi.azi .loc::before { border-color: Highlight; }
}
/* a phone zoomed to 150% or 200% (260 or 195 CSS px): everything still fits, nothing under the servos corner.
   Last in the sheet, so it wins over the rules above. */
@media (max-width: 300px) {
  .salut .emb { display: none; }
  .ziua-cap { flex-wrap: wrap; }
  .kpi { grid-template-columns: minmax(0, 1fr); }
  .kpi > div { border-right: 0 !important; border-bottom: 1px solid var(--frame) !important; }
  .kpi > div:last-child { border-bottom: 0 !important; }
  .cap-sec .kicker, .cap-sec .sc { white-space: normal; }
  .jos-rand { flex-direction: column; align-items: stretch; gap: .4rem; padding-bottom: 2px; }
  .jos-rand .btn-ind { align-self: flex-start; }
  .jos-rand .btn.prim { margin-left: 0; min-width: 0; padding-inline: .8rem; }
  .jos-rand .btn.prim .sageata { display: none; }
  .jos-rand .btn-ind span:not(.tasta) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .jos-rand .btn-ind { padding-inline: .8rem; }
  .cifre { grid-template-columns: minmax(0, 1fr); }
  .cifra + .cifra { border-left: 0; border-top: 1px solid var(--frame); }
  .btn.mare { font-size: 1.0625rem; padding-inline: .8rem; }
  .btn.mare .sageata { display: none; }
  .sir-cap { flex-wrap: wrap; }
  .sir-cap .rec { white-space: normal; }
  .capitol h3, .capitol h3 button, .tabel-niv .n { overflow-wrap: anywhere; hyphens: auto; }
  .variante.doua, .variante.af { grid-template-columns: minmax(0, 1fr); }
  .variante.doua .var { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .variante.doua .var .sem { grid-column: auto; margin-top: 0; }
  .variante.af .var { min-height: 76px; }
  .enunt table, .why table, .vs-item .q table { display: block; overflow-x: auto; }
}
/* ?bar: the servos bar's three buttons drawn on top, to check that nothing important sits under them */
.bara-servos { position: fixed; right: 12px; bottom: 12px; display: grid; gap: 8px; z-index: 90; pointer-events: none; }
.bara-servos i { width: 40px; height: 40px; border-radius: 50%; background: rgba(120, 120, 120, .45); border: 1px solid rgba(0, 0, 0, .35); }
.bara-servos::before { content: ""; position: absolute; right: -12px; bottom: -12px; width: var(--servos-w); height: var(--servos-h); outline: 1px dashed rgba(200, 0, 0, .55); }
@media print { .bara-wrap, .jos, .toast, .subsol-pag, .actiuni, .pornire { display: none !important; } body { background: #fff; } }

/* ---------- 18. Text never moves the layout ---------- */
/* the page keeps the scrollbar's lane on every screen, so a screen that does not scroll does not shift */
html { overflow-y: scroll; }
/* the bar's third link: both labels in one cell, the other one invisible, so the slot is as wide as the longer */
.bara-link .t { display: inline-grid; }
.bara-link .t > span { grid-area: 1 / 1; }
.bara-link .t-alt { visibility: hidden; }
/* a round's head: the series chip gets a slot sized for its longest content, so the strip never changes size */
.runda-cap:not(.sim-cap) { --cip-w: 14.5rem; grid-template-columns: 44px minmax(0, 1fr) minmax(var(--cip-w), auto); }
#cip-loc { justify-self: end; }
@media (max-width: 599px) { .runda-cap:not(.sim-cap) { --cip-w: 6rem; } .cip { padding-inline: .45rem; gap: .25rem; } }
/* the number holds the chip's right end, under the bubble, right-aligned in figures of one width, so tally
   marks and erasers coming and going never move it (the frame grows to the left); the erasers come first; the dots to
   repay sit on the chip's lower edge, as the bubble sits on its upper one */
.cip .nr { order: 3; min-width: 2ch; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.cip .bete { order: 2; flex-wrap: nowrap; }
.cip .puncte-rep { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); margin: 0; padding: 0 3px; background: var(--sheet); height: 11px; line-height: 11px; white-space: nowrap; }
.cip .puncte-rep .mai { line-height: 11px; }
/* the hint button: „Indiciu” and „Ideea generală” in one cell (wider screens); phones keep the icon after the answer */
.btn-ind .et { display: inline-grid; }
.btn-ind .et > span { grid-area: 1 / 1; }
.btn-ind .et-b, .btn-ind.dupa .et-a { visibility: hidden; }
.btn-ind.dupa .et-b { visibility: visible; }
@media (max-width: 459px) { .btn-ind .et-b { display: none; } }
/* the item counter: tabular figures and room for „10 / 10” */
.eticheta .nr-q { font-variant-numeric: lining-nums tabular-nums; min-width: 2.55em; }
/* the pencil note in the sheet keeps its line once a pencil is chosen */
.cutie-nume .stins { visibility: hidden; }
/* the progress title on one line on the smallest phones, for both subjects */
@media (max-width: 359px) { .pagina-cap h1 { font-size: 1.75rem; } }
/* the label over a question stays one line: a long chapter name ends in an ellipsis; on phones „perfect până acum”
   is the gold star (the words stay for screen readers) */
.eticheta { flex-wrap: nowrap; }
.eticheta > * { flex: none; }
.eticheta > :not(.nr-q, .item, .perfect, .capat, .semnal) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eticheta .perfect { display: inline-flex; align-items: center; gap: .3rem; }
.eticheta .perfect .st { width: 18px; height: 18px; display: none; }
@media (max-width: 459px) { .eticheta .perfect .st { display: block; } .eticheta .perfect .pt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
/* an answered option: „corect” or „ales” is a tag on its upper edge, out of the flow, so the answer never reflows the
   option's text and the options below never move */
.variante .var .sem { position: absolute; grid-area: auto; top: 0; right: .7rem; transform: translateY(-50%); margin: 0; padding: 0 .4rem; line-height: 14px; background: var(--sheet); border: 1px solid color-mix(in srgb, currentColor 45%, transparent); }
.variante .var .sem:empty { display: none; }
.variante .var .sem svg { width: 14px; height: 14px; }
/* a figure's legend is written with the question and shows with the solution, so it never pushes the options down */
.plansa:not(.rezolvat) > figcaption { visibility: hidden; }
/* home, the series: the number has room for four figures (it only adds up, so a pupil who trains often can pass 1000
   before the exam), and the tally marks do not move as it grows; on phones the words take the whole width under the
   number and the marks */
.serie .v { min-width: 4ch; }
@media (max-width: 459px) { .serie .v { grid-row: auto; } .serie .lbl { grid-column: 1 / -1; } }
/* home, the three figures: each note has a fixed number of lines for the width, so a longer date or note in one subject
   does not move the series card below it */
.cifra .d { min-height: calc(2 * 1.3em); }
@media (max-width: 419px) { .cifra .d { min-height: calc(3 * 1.3em); } }
@media (max-width: 359px) { .cifra .v { min-height: 2.2em; } .cifra .v small { display: block; } }
/* the head of a result: the round's or the paper's name never wraps the line; below 700 px it has a line of its own */
.scor .kicker { max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699px) { .scor .kicker .punct { display: none; } .scor .kicker .kt { display: block; overflow: hidden; text-overflow: ellipsis; } }
/* home, under the greeting: one line in both subjects. The day always shows (cut short only on the narrowest
   screens); the subject, already on its tab, follows when it fits and otherwise wraps onto a hidden line */
.salut > div { min-width: 0; }
.salut .cand { display: flex; flex-wrap: wrap; column-gap: .3em; line-height: 1.4; height: 1.4em; overflow: hidden; }
.salut .cand .cz { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.salut .cand .cm { white-space: nowrap; }
/* a nickname of one long word (the field takes 24 letters) breaks inside the greeting, never past the settings button */
.salut h1 { overflow-wrap: anywhere; min-width: 0; }
/* home, the actions: the count badge fits inside its title's line, so an action with a count is as tall as one without
   and switching subjects (one with mistakes, one without) moves nothing below */
.actiune .nr { height: 22px; min-width: 22px; padding: 0 6px; border-radius: 11px; margin-block: -2px; }