/* Layout concept: a white brand strip over a cool-grey desk; panels are white sheets
   with Deep Blue ink and a single gold accent for "done" and the main action.
   Single light theme on purpose: brand book requires logos on pure white. */
:root {
  --u: 1;
  --ink: #14325A;        /* Deep Blue — text, outlines */
  --gold: #BEA05A;       /* Noble Gold — accent fills, lines, ticks (never text on white) */
  --gold-ink: #8A6D2B;   /* darkened gold, readable on white */
  --desk: #EDF1F6;       /* app background */
  --sheet: #FFFFFF;      /* panels, brand strip */
  --soft: #5B7093;       /* secondary text */
  --line: #C6D0DE;       /* borders, dividers */
  --warn: #A33A28;       /* reset and confirmations only */
  --hover: #F3F6FA;
  --f-ui: 'Rubik', 'Segoe UI', 'Noto Sans', 'Noto Sans Arabic', Tahoma, sans-serif;
  --f-code: 'JetBrains Mono', Consolas, 'Rubik', 'Noto Sans Arabic', 'Segoe UI', monospace; /* Arabic glyphs fall back to Rubik so letters stay joined */
  --split: 50;
  --code-size: 15;
  color-scheme: light;
}
html { font-size: calc(var(--u) * 10px); height: 100%; }
body { height: 100%; margin: 0; background: var(--desk); color: var(--ink); font-family: var(--f-ui); font-size: 1.5rem; line-height: 1.4; overflow: hidden; }
* { box-sizing: border-box; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 0.25rem solid var(--gold); outline-offset: 0.15rem; }
[hidden] { display: none !important; }

#app { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }

/* ---------- Brand strip ---------- */
.brand { height: 5.4rem; background: var(--sheet); border-bottom: 0.2rem solid var(--gold);
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; padding-inline: 1.6rem; gap: 1.6rem; }
.brand__pub { height: 4rem; width: auto; justify-self: start; }
.brand__title { font-weight: 600; font-size: 2rem; letter-spacing: 0.01em; white-space: nowrap; }
.brand__end { justify-self: end; display: flex; align-items: center; gap: 1.6rem; }
.brand__series { height: 4rem; width: auto; }

.lang { position: relative; }
.lang__btn { min-width: 4.4rem; height: 3.6rem; border: 0.15rem solid var(--line); background: var(--sheet); border-radius: 1.8rem; font-weight: 600; padding-inline: 1.2rem; }
.lang__btn:hover { border-color: var(--ink); }
.lang__list { position: absolute; inset-inline-end: 0; top: 4.2rem; margin: 0; padding: 0.4rem; list-style: none; background: var(--sheet);
  border: 0.15rem solid var(--line); border-radius: 0.8rem; box-shadow: 0 0.8rem 2.4rem rgba(20,50,90,.15); z-index: 20; min-width: 16rem; }
.lang__list li { padding: 0.8rem 1.2rem; border-radius: 0.6rem; cursor: pointer; display: flex; gap: 1rem; }
.lang__list li:hover, .lang__list li[aria-selected="true"] { background: var(--hover); }
.lang__list li b { width: 2.6rem; color: var(--soft); }

/* ---------- Buttons ---------- */
.btn { height: 3.4rem; padding-inline: 1.4rem; border-radius: 0.6rem; border: 0.15rem solid var(--line); background: var(--sheet);
  font-weight: 500; display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.btn:hover { border-color: var(--ink); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--hover); border-color: transparent; }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 600; }
.btn--gold:hover { border-color: var(--ink); }
.btn--warn { color: var(--warn); }
.btn--warn:hover { border-color: var(--warn); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.icon { width: 3rem; height: 3rem; border: 0; background: transparent; border-radius: 0.6rem; font-size: 1.8rem; color: var(--soft); }
.icon:hover { background: var(--hover); color: var(--ink); }
.seg { display: inline-flex; border: 0.15rem solid var(--line); border-radius: 0.6rem; overflow: hidden; background: var(--sheet); }
.seg button { border: 0; background: transparent; height: 3rem; min-width: 3.4rem; padding-inline: 0.8rem; color: var(--soft); }
.seg button + button { border-inline-start: 0.15rem solid var(--line); }
.seg button:hover { color: var(--ink); background: var(--hover); }
.seg button[aria-pressed="true"] { color: var(--ink); background: #F6EFDD; font-weight: 600; }

.field { display: grid; gap: 0.3rem; font-size: 1.3rem; color: var(--soft); }
.field input { height: 3.8rem; border: 0.15rem solid var(--line); border-radius: 0.6rem; padding-inline: 1.2rem; font-size: 1.6rem; color: var(--ink); background: var(--sheet); min-width: 0; }
.field input:focus { border-color: var(--ink); outline: none; }
.field input.invalid { border-color: var(--warn); }

/* ---------- Home ---------- */
.home { overflow: auto; padding: 2rem 2.4rem 1.2rem; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1.6rem; min-height: 0; }
.student { display: grid; grid-template-columns: auto minmax(0, 26rem) minmax(0, 26rem) minmax(0, 1fr); align-items: end; gap: 1.6rem; }
.student__label { font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--soft); padding-bottom: 1rem; font-weight: 600; }
.student__note { margin: 0; padding-bottom: 1rem; font-size: 1.3rem; color: var(--soft); }

.years { display: flex; gap: 0.8rem; border-bottom: 0.15rem solid var(--line); }
.year { border: 0; background: transparent; padding: 0.8rem 1.6rem 1rem; border-bottom: 0.35rem solid transparent; margin-bottom: -0.15rem;
  display: grid; text-align: start; gap: 0.1rem; }
.year b { font-size: 1.8rem; font-weight: 600; }
.year small { font-size: 1.2rem; color: var(--soft); font-family: var(--f-code); }
.year:hover b { color: var(--gold-ink); }
.year[aria-selected="true"] { border-bottom-color: var(--gold); }
.year--empty { opacity: .55; }

.blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; min-height: 0; align-content: start; }
.block { background: var(--sheet); border: 0.15rem solid var(--line); border-radius: 1rem; padding: 1.6rem; display: grid; gap: 1.2rem; align-content: start; }
.block__head { display: grid; gap: 0.2rem; }
.block__term { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--soft); font-weight: 600; }
.block__name { font-size: 1.8rem; font-weight: 600; line-height: 1.25; text-wrap: balance; min-height: 4.5rem; }
.bar { height: 0.6rem; background: var(--desk); border-radius: 0.3rem; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 0.3rem; }
.block__count { font-size: 1.3rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.lessons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.ltile { position: relative; height: 4.6rem; border: 0.15rem solid var(--line); border-radius: 0.8rem; background: var(--sheet);
  font-size: 1.8rem; font-weight: 600; font-variant-numeric: tabular-nums; display: grid; place-items: center; }
.ltile:hover:not([disabled]) { border-color: var(--ink); background: var(--hover); }
.ltile[disabled] { color: var(--line); cursor: default; border-style: dashed; }
.ltile--done { background: #F6EFDD; border-color: var(--gold); }
.ltile--done::after, .ltile--started::after { position: absolute; top: 0.3rem; inset-inline-end: 0.5rem; font-size: 1.2rem; }
.ltile--done::after { content: '✓'; color: var(--gold-ink); }
.ltile--started::after { content: '●'; color: var(--gold); font-size: 0.9rem; top: 0.6rem; }
.ltile .tip { position: absolute; bottom: calc(100% + 0.6rem); inset-inline-start: 50%; transform: translateX(-50%); background: var(--ink); color: #fff;
  font-size: 1.3rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: 0.5rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 5; }
[dir="rtl"] .ltile .tip { transform: translateX(50%); }
.ltile:hover .tip, .ltile:focus-visible .tip { opacity: 1; }
.block--soon { background: transparent; border-style: dashed; }
.block--soon .block__name { color: var(--soft); }
.soon { font-size: 1.4rem; color: var(--soft); }
.block__cert { justify-self: start; }

.imprint { display: flex; justify-content: space-between; gap: 1.6rem; font-size: 1.2rem; color: var(--soft); flex-wrap: wrap; padding-top: 0.8rem; border-top: 0.15rem solid var(--line); }

/* ---------- Workspace ---------- */
.ws { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; min-height: 0; min-width: 0; }
.ws__nav { display: flex; align-items: center; gap: 1.2rem; padding: 0.8rem 1.6rem; background: var(--sheet); border-bottom: 0.15rem solid var(--line); min-width: 0; }
.crumbs { font-size: 1.4rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.crumbs b { color: var(--ink); font-weight: 600; }
.arrow { display: inline-block; }
[dir="rtl"] .arrow { transform: scaleX(-1); }
.chips { display: flex; align-items: center; gap: 0.6rem; margin-inline-start: auto; }
.chip { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 0.15rem solid var(--line); background: var(--sheet); font-weight: 600; font-variant-numeric: tabular-nums; position: relative; }
.chip:hover { border-color: var(--ink); }
.chip--done { background: var(--gold); border-color: var(--gold); }
.chip--done::after { content: '✓'; position: absolute; top: -0.6rem; inset-inline-end: -0.6rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 1rem; display: grid; place-items: center; }
.chip[aria-current="true"] { outline: 0.25rem solid var(--ink); outline-offset: 0.15rem; }
.ws__dl { display: flex; gap: 0.8rem; }
.menu { position: relative; }
.menu__pop { position: absolute; top: calc(100% + 0.6rem); inset-inline-end: 0; width: 28rem; background: var(--sheet); border: 0.15rem solid var(--line); border-radius: 0.8rem;
  box-shadow: 0 0.8rem 2.4rem rgba(20,50,90,.15); padding: 0.6rem; z-index: 30; display: grid; gap: 0.2rem; }
.menu__pop button { text-align: start; border: 0; background: transparent; padding: 0.9rem 1rem; border-radius: 0.6rem; font-weight: 500; }
.menu__pop button:hover { background: var(--hover); }
.menu__pop p { margin: 0.4rem 1rem 0.6rem; font-size: 1.2rem; color: var(--soft); }

.task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; padding: 1rem 1.6rem; background: var(--sheet); border-bottom: 0.15rem solid var(--line); max-height: 14rem; overflow: auto; }
.task__toggle { width: 2.8rem; height: 2.8rem; border: 0; background: var(--hover); border-radius: 0.6rem; color: var(--soft); }
.task__toggle::before { content: '▾'; }
.task.collapsed .task__toggle::before { content: '▸'; }
[dir="rtl"] .task.collapsed .task__toggle::before { content: '◂'; }
.task__body { min-width: 0; display: grid; gap: 0.3rem; }
.task__title { margin: 0; font-size: 1.6rem; font-weight: 600; }
.task__text { margin: 0; font-size: 1.5rem; max-width: 90ch; overflow-wrap: anywhere; }
.task.collapsed .task__text, .task.collapsed .task__hints { display: none; }
.task__hints { display: grid; gap: 0.4rem; }
.hintline { font-size: 1.4rem; background: #F6EFDD; border-inline-start: 0.3rem solid var(--gold); padding: 0.5rem 1rem; border-radius: 0.4rem; overflow-wrap: anywhere; }
.task code, .hintline code { font-family: var(--f-code); font-size: .92em; background: var(--hover); padding: 0 0.3rem; border-radius: 0.3rem; color: var(--ink); direction: ltr; unicode-bidi: isolate; }
.task__hintBtn { color: var(--gold-ink); }

/* Work area: proportions set by layout only — content never moves the split */
.work { display: grid; grid-template-columns: minmax(0, 50fr) 0.8rem minmax(0, 50fr); min-height: 0; min-width: 0; padding: 1rem 1.6rem; gap: 0; direction: ltr; }
.pane { min-width: 0; min-height: 0; overflow: hidden; background: var(--sheet); border: 0.15rem solid var(--line); border-radius: 0.8rem; display: grid; grid-template-rows: auto minmax(0, 1fr); position: relative; }
.splitter { cursor: col-resize; position: relative; }
.splitter::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0.4rem; height: 4rem; margin: -2rem 0 0 -0.2rem; border-radius: 0.2rem; background: var(--line); }
.splitter:hover::after, .splitter.drag::after { background: var(--gold); }
.tabs { display: flex; align-items: stretch; border-bottom: 0.15rem solid var(--line); min-width: 0; overflow-x: auto; }
.tab { border: 0; background: transparent; padding: 0 1.4rem; height: 3.6rem; font-family: var(--f-code); font-size: 1.3rem; color: var(--soft); border-bottom: 0.3rem solid transparent; white-space: nowrap; }
.tab:hover { color: var(--ink); background: var(--hover); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tab--bank { margin-inline-start: auto; font-family: var(--f-ui); }
.tab--bank[aria-selected="true"] { border-bottom-color: var(--gold); }
.editor { min-height: 0; min-width: 0; overflow: hidden; }
.editor .CodeMirror { height: 100%; font-family: var(--f-code); font-size: calc(var(--u) * var(--code-size) * 1px); line-height: 1.55; color: #1F2933; }
.CodeMirror-gutters { background: var(--sheet); border-right: 0.1rem solid var(--line); }
.CodeMirror-linenumber { color: var(--soft); }
.CodeMirror-activeline-background { background: #F5F7FA; }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: rgba(190,160,90,.25) !important; }
.CodeMirror-matchingtag { background: rgba(190,160,90,.22); }
.cm-s-default .cm-tag { color: #14325A; font-weight: 600; }
.cm-s-default .cm-bracket { color: #5B7093; }
.cm-s-default .cm-attribute { color: #3F6E9F; }
.cm-s-default .cm-string { color: #8A6D2B; }
.cm-s-default .cm-comment { color: #5B7093; font-style: italic; }
.cm-s-default .cm-meta { color: #5B7093; }
.cm-s-default .cm-property { color: #3F6E9F; }
.cm-s-default .cm-number, .cm-s-default .cm-atom { color: #8A6D2B; }
.cm-s-default .cm-keyword { color: #14325A; font-weight: 600; }

.bank { position: absolute; inset: 3.75rem 0 0 0; background: var(--sheet); overflow: auto; padding: 1.2rem; display: grid; gap: 1rem; align-content: start; direction: var(--ui-dir, ltr); }
.bank__themes { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.bank__theme { border: 0.15rem solid var(--line); background: var(--sheet); border-radius: 1.6rem; padding: 0.4rem 1.2rem; font-size: 1.3rem; }
.bank__theme[aria-pressed="true"] { border-color: var(--ink); background: var(--hover); font-weight: 600; }
.bank__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.bimg { border: 0.15rem solid var(--line); border-radius: 0.8rem; background: var(--sheet); padding: 0.6rem; display: grid; gap: 0.4rem; text-align: center; }
.bimg:hover { border-color: var(--gold); }
.bimg img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0.4rem; background: var(--desk); }
.bimg span { font-size: 1.3rem; }
.bimg small { font-size: 1.05rem; color: var(--soft); font-family: var(--f-code); overflow-wrap: anywhere; direction: ltr; }
.bank__note { font-size: 1.3rem; color: var(--soft); margin: 0; }

.viewbar { display: flex; align-items: center; gap: 0.8rem; height: 3.75rem; padding-inline: 1rem; border-bottom: 0.15rem solid var(--line); min-width: 0; }
.viewbar__title { font-size: 1.3rem; font-weight: 600; color: var(--soft); text-transform: uppercase; letter-spacing: 0.06em; margin-inline-end: auto; white-space: nowrap; }
.viewbar .seg button { height: 2.6rem; min-width: 3rem; }
.zoom { font-size: 1.2rem; color: var(--soft); font-variant-numeric: tabular-nums; min-width: 4rem; text-align: center; }
.viewport { position: relative; overflow: hidden; background: #fff; min-height: 0; min-width: 0; }
.viewport iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }

.actions > :not(.checkres):not(.actions__spacer) { flex-shrink: 0; }
.actions { display: flex; align-items: center; gap: 1.2rem; padding: 0 1.6rem 1rem; min-width: 0; }
.actions__spacer { flex: 1; }
.toggle { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.4rem; color: var(--soft); cursor: pointer; white-space: nowrap; }
.toggle input { width: 1.6rem; height: 1.6rem; accent-color: var(--ink); }
.checkres { display: flex; align-items: center; gap: 0.8rem; font-size: 1.4rem; min-width: 0; overflow: hidden; }
.checkres__list { display: flex; gap: 0.6rem; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.cpill { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.3rem 0.9rem; border-radius: 1.4rem; border: 0.15rem solid var(--line); background: var(--sheet); white-space: nowrap; font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; max-width: 26rem; }
.cpill--ok { border-color: var(--gold); background: #F6EFDD; }
.cpill--ok::before { content: '✓'; color: var(--gold-ink); font-weight: 700; }
.cpill--no::before { content: '○'; color: var(--soft); }
.checkres__hint { color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.done-badge { font-weight: 600; color: var(--gold-ink); white-space: nowrap; }

.ai { background: var(--sheet); border-top: 0.15rem solid var(--line); }
.ai__bar { width: 100%; height: 3.6rem; border: 0; background: transparent; display: flex; align-items: center; gap: 1rem; padding-inline: 1.6rem; font-weight: 600; }
.ai__bar:hover { background: var(--hover); }
.ai__dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--line); }
.ai__soon { font-weight: 400; font-size: 1.2rem; color: var(--soft); border: 0.15rem solid var(--line); border-radius: 1rem; padding: 0 0.8rem; }
.ai__chev { margin-inline-start: auto; color: var(--soft); }
.ai[data-open="true"] .ai__chev { transform: rotate(180deg); }
.ai__body { padding: 0 1.6rem 1.2rem; display: grid; gap: 1rem; height: 16rem; grid-template-rows: auto minmax(0, 1fr); }
.ai__ask { display: flex; gap: 1rem; align-items: center; min-width: 0; }
.ai__ask input { flex: 1; min-width: 0; height: 3.4rem; border: 0.15rem solid var(--line); border-radius: 0.6rem; padding-inline: 1rem; background: var(--hover); }
.ai__quick { display: flex; gap: 0.6rem; }
.ai__quick span { font-size: 1.2rem; border: 0.15rem dashed var(--line); border-radius: 1.4rem; padding: 0.3rem 1rem; color: var(--soft); white-space: nowrap; }
.ai__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; min-height: 0; }
.ai__col { border: 0.15rem dashed var(--line); border-radius: 0.8rem; padding: 1rem 1.2rem; overflow: auto; overflow-wrap: anywhere; min-width: 0; }
.ai__col b { font-size: 1.3rem; }
.ai__col p { margin: 0.4rem 0 0; font-size: 1.3rem; color: var(--soft); }

/* ---------- Modals ---------- */
.modal { position: fixed; inset: 0; background: rgba(20,50,90,.35); display: grid; place-items: center; z-index: 100; padding: 2rem; }
.modal__card { background: var(--sheet); border-radius: 1.2rem; padding: 2.4rem; box-shadow: 0 2rem 6rem rgba(20,50,90,.3); max-width: 100%; max-height: 100%; overflow: auto; }
.modal__card--sm { width: 44rem; display: grid; gap: 2rem; }
.modal__card--sm p { margin: 0; font-size: 1.6rem; }
.modal__row { display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; }
.modal__card--cert { width: 104rem; display: grid; grid-template-columns: 30rem minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.cert__form { display: grid; gap: 1.2rem; }
.cert__form h3 { margin: 0; font-size: 2.2rem; }
.cert__need { margin: 0; font-size: 1.4rem; color: var(--soft); }
.cert__form .modal__row { justify-content: flex-start; margin-top: 0.8rem; }

/* Certificate sheet (A4 landscape proportions) */
.cert__paper { aspect-ratio: 297 / 210; width: 100%; background: #fff; border: 0.15rem solid var(--line); position: relative; overflow: hidden; container-type: inline-size; }
.cp { position: absolute; inset: 2.2cqw; border: 0.25cqw solid var(--gold); padding: 2.6cqw 3.4cqw; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1.4cqw; color: var(--ink); font-family: var(--f-ui); }
.cp__top { display: flex; justify-content: space-between; align-items: center; }
.cp__top img { height: 6cqw; }
.cp__top .cp__manara { height: 9cqw; }
.cp__mid { text-align: center; display: grid; gap: 0.6cqw; }
.cp__label { font-size: 1.6cqw; text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold-ink); font-weight: 600; }
.cp__title { font-size: 4.4cqw; font-weight: 700; line-height: 1.1; }
.cp__for { font-size: 1.5cqw; color: var(--soft); }
.cp__name { font-size: 3.6cqw; font-weight: 600; border-bottom: 0.2cqw solid var(--ink); padding-bottom: 0.4cqw; justify-self: center; min-width: 50%; min-height: 5cqw; }
.cp__block { font-size: 1.7cqw; }
.cp__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8cqw; align-content: center; }
.cp__l { border: 0.15cqw solid var(--line); border-radius: 0.6cqw; padding: 0.6cqw 0.8cqw; font-size: 1.1cqw; display: grid; gap: 0.2cqw; min-height: 5cqw; }
.cp__l b { font-size: 1.5cqw; }
.cp__l--done { border-color: var(--gold); background: #F6EFDD; }
.cp__l--none { color: #9AA8BC; border-style: dashed; }
.cp__bottom { display: flex; justify-content: space-between; align-items: end; font-size: 1.2cqw; color: var(--soft); }
.cp__bottom strong { color: var(--ink); font-size: 1.6cqw; display: block; }

/* ---------- Full-screen preview ---------- */
.full { position: fixed; inset: 0; background: #fff; z-index: 90; }
.full iframe { width: 100%; height: 100%; border: 0; }
.full__close { position: absolute; top: 1.2rem; inset-inline-end: 1.6rem; z-index: 2; box-shadow: 0 0.4rem 1.6rem rgba(20,50,90,.2); }

/* ---------- Narrow screens ---------- */
.narrow { display: none; }
@media (max-width: 560px) {
  #home, #ws { display: none !important; }
  .narrow { display: block; padding: 3rem 2rem; font-size: 1.8rem; text-align: center; color: var(--ink); }
  html { font-size: 10px; }
  .brand { grid-template-columns: auto minmax(0,1fr); }
  .brand__title, .brand__series { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Print: certificate only */
@media print {
  @page { size: A4 landscape; margin: 0; }
  body * { visibility: hidden !important; }
  #certPaper, #certPaper * { visibility: visible !important; }
  #certPaper { position: fixed; inset: 0; width: 100vw; border: 0; }
}