/* Celelalte pagini (Programa, Cátedra, Cuaderno, Expediente, Diploma, login, Setări): aceeași piatră în bandă
   îngustă și aceeași cerneală ca pe Acasă. Unitățile sunt cele din style.css (u = lățimea coloanei / 752). */

.stone-band { height: calc(132 * var(--u)); }
.stone-band .round-btn { top: calc(34 * var(--u)); }
.back-btn { left: calc(14 * var(--u)); right: auto; }
.band-title {
  position: absolute;
  left: calc(96 * var(--u));
  right: calc(96 * var(--u));
  top: calc(36 * var(--u));
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(40 * var(--u));
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--almagre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stone-band .wordmark { top: calc(46 * var(--u)); font-size: calc(30 * var(--u)); }
.stone-band:has(.wordmark) .band-title { left: calc(250 * var(--u)); right: calc(96 * var(--u)); top: calc(42 * var(--u)); font-size: calc(32 * var(--u)); text-align: right; }

.section { padding: calc(36 * var(--u)) calc(32 * var(--u)) 0; }
.section + .section { padding-top: calc(48 * var(--u)); }
.h2 {
  margin: 0 0 calc(18 * var(--u));
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(36 * var(--u));
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--almagre);
}
.muted { color: var(--ink-2); }
.lead { margin: 0; font-size: calc(30 * var(--u)); color: var(--ink-2); text-wrap: pretty; }
.empty { padding: calc(48 * var(--u)) calc(32 * var(--u)); text-align: center; color: var(--ink-2); }
.empty .h2 { margin-bottom: calc(12 * var(--u)); }
.empty .btn { margin-top: calc(28 * var(--u)); }

.btn svg { flex: none; width: 1.05em; height: 1.05em; }
.ex > .ex-actions:last-child { margin-top: calc(10 * var(--u)); }

/* Programa și Expediente: rânduri cu cifre romane, în ritm de orar. */
.course-block + .course-block { margin-top: calc(36 * var(--u)); }
.course-head { padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(10 * var(--u)); }
.course-head p { margin: calc(10 * var(--u)) 0 0; text-align: center; color: var(--ink-2); font-size: calc(26 * var(--u)); }
.course-head .btn { margin-top: calc(20 * var(--u)); }
.num {
  flex: none;
  width: calc(76 * var(--u));
  font-family: var(--serif);
  font-size: calc(34 * var(--u));
  line-height: 1;
  color: var(--almagre);
}
.course-block .row, #expediente .row, #cuaderno .row { padding-top: calc(18 * var(--u)); padding-bottom: calc(18 * var(--u)); }
.row-text { flex: 1; min-width: 0; }
.row-text .row-title { display: block; }
.row-sub { display: block; margin-top: calc(6 * var(--u)); font-size: calc(25 * var(--u)); line-height: 1.3; color: var(--ink-2); }
.row-meta { flex: none; font-size: calc(26 * var(--u)); color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.row.current { background: var(--ground-2); }
/* Sigiliul pe rânduri are mărimea din machetă (156 × 116 u); eticheta încape în ceară și pe telefon îngust. */
.row .seal span:not(.vh) { font-size: calc(20 * var(--u)); }
.row .seal span.long { font-size: calc(18 * var(--u)); transform: rotate(-5deg) scaleX(0.74); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: calc(2 * var(--u)) solid var(--hair); border-bottom: calc(2 * var(--u)) solid var(--hair); }
.stats div { padding: calc(22 * var(--u)) calc(12 * var(--u)); text-align: center; }
.stats div + div { border-left: calc(2 * var(--u)) solid var(--hair); }
.stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: calc(48 * var(--u)); line-height: 1.1; color: var(--almagre); font-variant-numeric: tabular-nums; }
.stats span { font-size: calc(24 * var(--u)); color: var(--ink-2); }

/* Rigla de progres: un segment pe exercițiu, colorat după cum ai răspuns. */
.ruler { display: flex; gap: calc(4 * var(--u)); margin-top: calc(20 * var(--u)); }
.ruler i { flex: 1; height: calc(16 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--track); }
.ruler i.ok { background: var(--almagre-2); }
.ruler i.accent, .ruler i.partial { background: linear-gradient(90deg, var(--almagre-2) 50%, var(--track) 50%); }
.ruler i.wrong { background: transparent; box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--almagre-2); }

/* ---------- Cátedra: lecția ---------- */

.cat-head { padding: calc(30 * var(--u)) calc(32 * var(--u)) 0; }
.cat-head .catedra-title { margin-top: calc(16 * var(--u)); }
.cat-sub { margin: calc(10 * var(--u)) 0 0; text-align: center; color: var(--ink-2); font-size: calc(28 * var(--u)); }
.parts { display: flex; gap: calc(10 * var(--u)); margin: calc(26 * var(--u)) 0 0; padding: 0 calc(32 * var(--u)); overflow-x: auto; scrollbar-width: none; }
.parts::-webkit-scrollbar { display: none; }
.parts button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: calc(68 * var(--u));
  padding: 0 calc(22 * var(--u));
  border: calc(2 * var(--u)) solid var(--hair);
  border-radius: 999px;
  background: transparent;
  font-size: calc(26 * var(--u));
  color: var(--ink);
  cursor: pointer;
}
.parts button svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); color: var(--ok); }
.parts button[aria-current='true'] { border-color: var(--almagre); color: var(--almagre); font-weight: 700; }

.lesson { padding: calc(30 * var(--u)) calc(32 * var(--u)) 0; }
.lesson > * + * { margin-top: calc(24 * var(--u)); }
.lesson p { max-width: 68ch; text-wrap: pretty; }
.lesson em[lang='es'], .ex em[lang='es'], .explain em[lang='es'], .ai-box em[lang='es'] { font-style: italic; color: var(--almagre); }
.rule {
  margin: 0;
  padding: calc(22 * var(--u)) calc(6 * var(--u));
  border-top: calc(3 * var(--u)) solid var(--almagre-ink);
  border-bottom: calc(3 * var(--u)) solid var(--almagre-ink);
  font-family: var(--serif);
  font-size: calc(31 * var(--u));
  line-height: 1.45;
}
.tip { padding: calc(22 * var(--u)) calc(26 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--ground-2); }
.tip b { display: block; margin-bottom: calc(6 * var(--u)); font-family: var(--serif); font-weight: 400; font-size: calc(26 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--almagre); }
.tablewrap { overflow-x: auto; margin: 0 calc(-32 * var(--u)); padding: 0 calc(32 * var(--u)); }
table.grammar { width: 100%; border-collapse: collapse; font-size: calc(27 * var(--u)); font-variant-numeric: tabular-nums; }
table.grammar caption { caption-side: top; padding-bottom: calc(10 * var(--u)); text-align: left; font-family: var(--serif); font-size: calc(26 * var(--u)); letter-spacing: 0.05em; text-transform: uppercase; color: var(--almagre); }
table.grammar th { padding: calc(10 * var(--u)) calc(12 * var(--u)); border-bottom: calc(3 * var(--u)) solid var(--almagre-ink); text-align: left; font-weight: 700; white-space: nowrap; }
table.grammar td { padding: calc(12 * var(--u)); border-bottom: calc(2 * var(--u)) solid var(--hair); vertical-align: top; }
.examples { list-style: none; margin: 0; padding: 0; }
.examples li { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) 0; border-bottom: calc(2 * var(--u)) solid var(--hair); }
.examples .es { display: block; font-family: var(--serif); font-style: italic; color: var(--almagre); }
.examples .ro { display: block; font-size: calc(26 * var(--u)); color: var(--ink-2); }
.say {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(66 * var(--u));
  height: calc(66 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ground-2);
  color: var(--almagre);
  cursor: pointer;
}
.say svg { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.say:active { background: var(--track); }

/* ---------- Cátedra: exercițiile ---------- */

.exercises { padding-top: calc(48 * var(--u)); }
.exercises > .h2 { padding: 0 calc(32 * var(--u)); }
.ex { padding: calc(30 * var(--u)) calc(32 * var(--u)); border-top: calc(2 * var(--u)) solid var(--hair); }
.ex-n { font-family: var(--serif); font-size: calc(26 * var(--u)); letter-spacing: 0.06em; color: var(--almagre); }
.ex-prompt { margin: calc(6 * var(--u)) 0 0; font-weight: 600; text-wrap: pretty; }
.ex-sentence { margin: calc(18 * var(--u)) 0 0; font-family: var(--serif); font-size: calc(34 * var(--u)); line-height: 1.6; }
.ex-sentence .gap { display: inline-block; min-width: 3em; border-bottom: calc(3 * var(--u)) solid var(--ink); }
.ex-body { margin-top: calc(20 * var(--u)); }
.ex-actions { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); margin-top: calc(24 * var(--u)); }
.ex-actions .btn { width: auto; flex: 1 1 calc(260 * var(--u)); min-height: calc(80 * var(--u)); margin-top: 0; font-size: calc(32 * var(--u)); }

.input {
  width: 100%;
  min-height: calc(84 * var(--u));
  padding: 0 calc(22 * var(--u));
  border: calc(2 * var(--u)) solid var(--hair);
  border-radius: calc(12 * var(--u));
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: max(16px, calc(34 * var(--u)));
}
.input:focus { outline: none; border-color: var(--almagre); box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--almagre) 25%, transparent); }
.input-inline { display: inline-block; width: 6.5em; min-height: 0; padding: calc(2 * var(--u)) calc(10 * var(--u)); vertical-align: baseline; }
.keys { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.keys button {
  min-width: calc(68 * var(--u));
  min-height: calc(68 * var(--u));
  border: calc(2 * var(--u)) solid var(--hair);
  border-radius: calc(10 * var(--u));
  background: var(--ground-2);
  font-family: var(--serif);
  font-size: calc(32 * var(--u));
  color: var(--ink);
  cursor: pointer;
}
.keys button:active { background: var(--track); }

.options { display: grid; gap: calc(12 * var(--u)); }
.opt {
  display: flex;
  align-items: center;
  min-height: calc(84 * var(--u));
  padding: calc(12 * var(--u)) calc(24 * var(--u));
  border: calc(2 * var(--u)) solid var(--hair);
  border-radius: calc(12 * var(--u));
  background: transparent;
  font-family: var(--serif);
  font-size: calc(32 * var(--u));
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.opt:hover:not(:disabled) { border-color: var(--ink-2); }
.opt.right { border-color: var(--ok); color: var(--ok); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--ok); }
.opt.wrong-pick { border-color: var(--almagre); color: var(--almagre); text-decoration: line-through; }
.opt:disabled { cursor: default; }

.conj { width: 100%; border-collapse: collapse; }
.conj td { padding: calc(8 * var(--u)) 0; border-bottom: calc(2 * var(--u)) solid var(--hair); }
.conj td:first-child { width: 42%; padding-right: calc(12 * var(--u)); color: var(--ink-2); font-size: calc(26 * var(--u)); }
.conj .input { min-height: calc(70 * var(--u)); }
.conj .fix { display: block; font-size: calc(26 * var(--u)); }

.pairs { display: grid; gap: calc(12 * var(--u)); }
.pair { display: grid; grid-template-columns: 1fr 1.25fr; gap: calc(12 * var(--u)); align-items: center; }
.pair .es { font-family: var(--serif); font-style: italic; color: var(--almagre); font-size: calc(30 * var(--u)); }
select.input {
  appearance: none;
  padding-right: calc(56 * var(--u));
  font-family: var(--sans);
  font-size: max(16px, calc(28 * var(--u)));
  background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e1b0c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right calc(16 * var(--u)) center / calc(32 * var(--u)) no-repeat;
}

.sort-item { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) 0; border-bottom: calc(2 * var(--u)) solid var(--hair); }
.sort-item > span { flex: 1 1 100%; font-family: var(--serif); font-style: italic; font-size: calc(30 * var(--u)); }
.seg { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.seg button { min-height: calc(64 * var(--u)); padding: 0 calc(22 * var(--u)); border: calc(2 * var(--u)) solid var(--hair); border-radius: 999px; background: transparent; font-size: calc(26 * var(--u)); color: var(--ink); cursor: pointer; }
.seg button[aria-pressed='true'] { border-color: var(--almagre); background: var(--almagre-2); color: var(--on-almagre); }
.seg button.right { border-color: var(--ok); color: var(--ok); }

.chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); min-height: calc(76 * var(--u)); }
.chip { min-height: calc(66 * var(--u)); padding: 0 calc(20 * var(--u)); border: calc(2 * var(--u)) solid var(--hair); border-radius: calc(10 * var(--u)); background: var(--ground-2); font-family: var(--serif); font-size: calc(30 * var(--u)); color: var(--ink); cursor: pointer; }
.chip:disabled { opacity: 0.3; cursor: default; }
.answer-line { padding: calc(10 * var(--u)) 0 calc(14 * var(--u)); margin-bottom: calc(14 * var(--u)); border-bottom: calc(3 * var(--u)) solid var(--ink); }
.answer-line .chip { background: var(--ground); border-color: var(--almagre); }

.listen { display: flex; gap: calc(12 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.listen .btn { width: auto; min-height: calc(76 * var(--u)); margin: 0; padding: 0 calc(26 * var(--u)); font-size: calc(30 * var(--u)); }
.listen .btn svg { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }

/* Corectura, ca în caiet: răspunsul greșit tăiat cu roșu, cel bun alături. */
.verdict { margin-top: calc(20 * var(--u)); padding-top: calc(18 * var(--u)); border-top: calc(2 * var(--u)) dashed var(--hair); }
.verdict-head { display: flex; align-items: center; gap: calc(12 * var(--u)); font-weight: 700; }
.verdict-head svg { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.verdict.ok .verdict-head { color: var(--ok); }
.verdict.bad .verdict-head, .verdict.near .verdict-head { color: var(--almagre); }
.struck { text-decoration: line-through; text-decoration-color: var(--almagre); text-decoration-thickness: calc(3 * var(--u)); color: var(--ink-2); }
.fix { font-family: var(--serif); font-style: italic; color: var(--almagre); }
.explain { margin: calc(12 * var(--u)) 0 0; color: var(--ink-2); text-wrap: pretty; }
.ai-box { margin-top: calc(16 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--ground-2); }
.ai-box p { margin: 0; white-space: pre-line; }
.ai-box small { display: block; margin-top: calc(10 * var(--u)); font-size: calc(22 * var(--u)); color: var(--ink-2); }
.ai-tag { display: inline-block; margin-left: calc(8 * var(--u)); padding: calc(2 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: var(--ground-2); font-size: calc(22 * var(--u)); color: var(--ink-2); vertical-align: middle; }
.link-btn { display: inline-flex; align-items: center; gap: 0.3em; min-height: calc(64 * var(--u)); margin-top: calc(10 * var(--u)); padding: 0; border: 0; background: none; color: var(--almagre); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.link-btn svg { width: 1.15em; height: 1.15em; }
.link-btn:disabled { opacity: 0.5; cursor: default; }

/* Rezultatul cátedrei: sigiliul mare, pus o dată, cu greutate. */
.result { padding: calc(44 * var(--u)) calc(32 * var(--u)); text-align: center; border-top: calc(2 * var(--u)) solid var(--hair); }
.result .seal { width: calc(300 * var(--u)); height: calc(224 * var(--u)); margin: 0 auto; }
.result .seal span { font-size: calc(32 * var(--u)); max-width: 72%; }
.result .seal span.long { font-size: calc(30 * var(--u)); transform: rotate(-5deg) scaleX(0.74); }
.result-note { margin: calc(16 * var(--u)) 0 0; font-family: var(--serif); font-size: calc(66 * var(--u)); line-height: 1; color: var(--almagre); font-variant-numeric: tabular-nums; }
.result p { margin: calc(12 * var(--u)) 0 0; text-wrap: balance; }
.result .ex-actions { justify-content: center; }
.seal-in { animation: seal-in 480ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes seal-in { from { transform: scale(1.7) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
.rana { margin-top: calc(18 * var(--u)); font-family: var(--serif); font-style: italic; color: var(--ok); }

/* Cuaderno: cutiile Leitner ca puncte. */
.box-dots { display: inline-flex; gap: calc(6 * var(--u)); vertical-align: middle; }
.box-dots i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid var(--almagre); }
.box-dots i.on { background: var(--almagre); }

/* Setări: foaia de jos. */
dialog.sheet {
  width: min(var(--col), 100vw);
  max-width: none;
  max-height: 90dvh;
  margin: auto auto 0;
  padding: calc(34 * var(--u)) calc(32 * var(--u)) calc(34 * var(--u) + env(safe-area-inset-bottom));
  border: 0;
  border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
  background: var(--ground);
  color: var(--ink);
  font-size: calc(30 * var(--u));
}
dialog.sheet::backdrop { background: rgb(30 10 5 / 0.45); }
dialog.sheet h2 { margin: 0 0 calc(16 * var(--u)); font-family: var(--serif); font-weight: 400; font-size: calc(36 * var(--u)); letter-spacing: 0.05em; text-transform: uppercase; color: var(--almagre); }
.sheet-row { display: flex; align-items: center; gap: calc(16 * var(--u)); width: 100%; min-height: calc(96 * var(--u)); padding: 0; border: 0; border-bottom: calc(2 * var(--u)) solid var(--hair); background: none; text-align: left; cursor: pointer; }
.sheet-danger { margin-top: calc(44 * var(--u)); padding-top: calc(24 * var(--u)); border-top: calc(2 * var(--u)) dashed var(--hair); font-size: calc(26 * var(--u)); color: var(--ink-2); }
.sheet-danger p { margin: 0 0 calc(14 * var(--u)); }
.sheet-danger .btn { margin-top: calc(14 * var(--u)); min-height: calc(76 * var(--u)); font-size: calc(30 * var(--u)); }
.field { display: grid; gap: calc(8 * var(--u)); }
.field > span { font-size: calc(26 * var(--u)); color: var(--ink-2); }
.field input { width: 100%; min-height: calc(84 * var(--u)); padding: 0 calc(22 * var(--u)); border: calc(2 * var(--u)) solid var(--hair); border-radius: calc(12 * var(--u)); background: var(--ground); color: var(--ink); font: inherit; font-size: max(16px, calc(32 * var(--u))); }
.field input:focus { outline: none; border-color: var(--almagre); }
.field input[aria-invalid='true'] { border-color: var(--almagre); }
dialog.sheet form .btn { margin-top: calc(28 * var(--u)); }

/* Login. */
.app-login { padding-bottom: calc(40 * var(--u)); }
.auth { padding: calc(40 * var(--u)) calc(32 * var(--u)); }
.auth-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: calc(46 * var(--u)); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--almagre); }
.auth-lead { margin: calc(12 * var(--u)) 0 calc(30 * var(--u)); text-align: center; color: var(--ink-2); text-wrap: balance; }
.auth-form { display: grid; gap: calc(22 * var(--u)); }
.auth-form .btn { margin-top: calc(8 * var(--u)); }
.help { margin: 0; font-size: calc(24 * var(--u)); color: var(--ink-2); }
.error { margin: 0; font-weight: 600; color: var(--almagre); }
.auth-switch { margin: calc(28 * var(--u)) 0 0; text-align: center; }

/* Diploma, de tipărit. */
.diploma-page { min-height: 100dvh; display: grid; place-items: center; padding: calc(30 * var(--u)); background: var(--stone) url('../img/stone-texture.png') 50% 0 / calc(760 * var(--u)) auto repeat; }
.diploma {
  width: min(100%, 900px);
  padding: calc(60 * var(--u)) calc(44 * var(--u));
  border: calc(7 * var(--u)) double var(--almagre-ink);
  background: var(--ground);
  text-align: center;
  color: var(--ink);
}
.diploma img { width: calc(330 * var(--u)); margin: 0 auto; }
.d-kicker { margin: calc(20 * var(--u)) 0 0; font-family: var(--serif); font-size: calc(26 * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.d-name { margin: calc(10 * var(--u)) 0 0; font-family: var(--serif); font-weight: 400; font-size: calc(68 * var(--u)); line-height: 1.1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--almagre); }
.d-text { margin: calc(18 * var(--u)) auto 0; max-width: 34ch; font-family: var(--serif); font-size: calc(32 * var(--u)); line-height: 1.5; }
.d-meta { margin-top: calc(30 * var(--u)); font-size: calc(26 * var(--u)); color: var(--ink-2); }
.diploma .ex-actions { justify-content: center; }
@media print {
  .diploma-page { padding: 0; background: none; }
  .diploma { width: 100%; border-width: 4px; }
  .no-print { display: none !important; }
}