/* GENERATED by scripts/build_ds.js from marketing/design_system/components.css. Do not edit: change the source and run node scripts/build_ds.js (KAN-1744). */
/* Fonts are self-hosted: the @font-face rules live in /ds/tokens.css. */

/* Nabras components. Every value comes from tokens.css; nothing here is a literal colour. */
:root{--nb-ease:cubic-bezier(.2,.7,.2,1);--nb-fast:140ms;--nb-base:220ms}
html{direction:rtl}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:27px;-webkit-font-smoothing:antialiased;font-feature-settings:"kern"}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
.nb-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* Focus: one ring everywhere, solid, action colour, 2px offset. */
.nb-focus:focus-visible,.nb-btn:focus-visible,.nb-opt:focus-visible,.nb-seg button:focus-visible,.nb-field input:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* Button */
.nb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-h);padding-inline:var(--space-5);border-radius:var(--radius-md);border:1px solid transparent;font:inherit;font-size:15px;line-height:22px;font-weight:500;cursor:pointer;text-decoration:none;transition:background var(--nb-fast) var(--nb-ease),border-color var(--nb-fast) var(--nb-ease),transform var(--nb-fast) var(--nb-ease)}
.nb-btn:active{transform:scale(.98)}
.nb-btn-primary{background:var(--action);color:var(--on-action)}
.nb-btn-primary:hover{background:var(--action-pressed)}
.nb-btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.nb-btn-secondary:hover{background:var(--surface-sunken)}
.nb-btn-quiet{background:transparent;color:var(--action);padding-inline:var(--space-3)}
.nb-btn-quiet:hover{background:var(--brand-tint)}
.nb-btn-on-deep{background:var(--on-deep);color:var(--deep)}
.nb-btn-lg{min-height:56px;padding-inline:var(--space-6);font-size:16px}
.nb-btn-block{display:flex;width:100%}
.nb-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* Badge */
.nb-badge{display:inline-flex;align-items:center;gap:var(--space-1);min-height:26px;padding:2px 10px;border-radius:var(--radius-full);font-size:13px;line-height:20px;font-weight:500;background:var(--surface-sunken);color:var(--ink-secondary)}
.nb-badge-brand{background:var(--brand-tint);color:var(--action)}
.nb-badge-correct{background:var(--correct-tint);color:var(--correct)}
.nb-badge-wrong{background:var(--wrong-tint);color:var(--wrong)}
.nb-badge-caution{background:var(--caution-tint);color:var(--caution)}
.nb-badge-lammah{background:var(--lm-highlight);color:var(--lm-ink)}

/* Card */
.nb-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.nb-card-raised{border-color:transparent;box-shadow:var(--shadow-raised)}
.nb-card-deep{background:var(--deep);color:var(--on-deep);border-color:transparent;border-radius:var(--radius-xl);padding:var(--space-6)}
.nb-card-sunken{background:var(--surface-sunken);border-color:transparent}

/* Section header */
.nb-sh{display:flex;flex-direction:column;gap:var(--space-2);max-width:var(--reading-max)}
.nb-sh-center{margin-inline:auto;text-align:center;align-items:center}
.nb-sh-over{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.2px;color:var(--action)}
.nb-sh h2{margin:0;font-size:32px;line-height:44px;font-weight:600;text-wrap:balance}
.nb-sh p{margin:0;font-size:18px;line-height:30px;color:var(--ink-secondary)}
@media (max-width:600px){.nb-sh h2{font-size:28px;line-height:38px}}

/* Answer option */
.nb-opts{display:flex;flex-direction:column;gap:var(--space-3)}
.nb-opt{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;line-height:27px;text-align:start;cursor:pointer;transition:border-color var(--nb-fast) var(--nb-ease),background var(--nb-fast) var(--nb-ease)}
.nb-opt:hover{border-color:var(--border-strong)}
/* Button audit 2026-11-12 (W5): an option drawn to explain a mistake, not a live question: no pointer, no hover, no tab stop. */
.nb-opt.is-static{cursor:default;pointer-events:none}
.nb-opt-l{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-full);background:var(--surface-sunken);color:var(--ink-muted);font-size:15px;font-weight:600}
.nb-opt-t{flex:1;min-width:0}
.nb-opt-s{flex:none;font-size:13px;font-weight:600;display:inline-flex;gap:4px;align-items:center}
.nb-opt[data-state="selected"]{border:2px solid var(--brand);background:var(--brand-tint);padding:calc(var(--space-3) - 1px) calc(var(--space-4) - 1px)}
.nb-opt[data-state="selected"] .nb-opt-l{background:var(--brand);color:var(--on-action)}
.nb-opt[data-state="correct"]{border:2px solid var(--correct);background:var(--correct-tint);padding:calc(var(--space-3) - 1px) calc(var(--space-4) - 1px)}
.nb-opt[data-state="correct"] .nb-opt-l,.nb-opt[data-state="correct"] .nb-opt-s{color:var(--correct)}
.nb-opt[data-state="wrong"]{border:2px solid var(--wrong);background:var(--wrong-tint);padding:calc(var(--space-3) - 1px) calc(var(--space-4) - 1px)}
.nb-opt[data-state="wrong"] .nb-opt-l,.nb-opt[data-state="wrong"] .nb-opt-s{color:var(--wrong)}
.nb-opt[data-state="dimmed"]{opacity:.55}
.nb-opt[disabled]{cursor:default}

/* Progress */
.nb-prog{display:flex;flex-direction:column;gap:var(--space-2)}
.nb-prog-row{display:flex;justify-content:space-between;font-size:13px;line-height:20px;color:var(--ink-muted)}
.nb-prog-track{height:6px;border-radius:var(--radius-full);background:var(--surface-sunken);overflow:hidden}
.nb-prog-fill{height:100%;border-radius:inherit;background:var(--brand);transition:width var(--nb-base) var(--nb-ease)}

/* Lammah explanation */
.nb-lm{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.nb-lm-h{display:flex;align-items:center;gap:var(--space-2);font-size:15px;line-height:22px;font-weight:600}
.nb-lm-h svg{width:24px;height:24px;flex:none}
.nb-lm-b{margin:0;font-size:18px;line-height:30px;color:var(--ink)}
.nb-lm-hl{background:linear-gradient(transparent 14%,var(--lm-highlight) 14%,var(--lm-highlight) 88%,transparent 88%);color:var(--lm-ink);padding:0 .2em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nb-lm-c{font-size:13px;line-height:20px;color:var(--ink-muted);padding-top:var(--space-3);border-top:1px solid var(--hairline)}

/* Text field */
.nb-field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.nb-field label{font-size:15px;line-height:22px;font-weight:500}
.nb-field input{min-height:var(--control-h);padding-inline:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.nb-field input::placeholder{color:var(--ink-muted)}
.nb-field-hint{font-size:13px;line-height:20px;color:var(--ink-muted)}
.nb-field[data-invalid] input{border:2px solid var(--wrong)}
.nb-field[data-invalid] .nb-field-hint{color:var(--wrong)}

/* Metric */
.nb-metric{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.nb-metric-v{font-size:44px;line-height:48px;font-weight:600;font-variant-numeric:tabular-nums}
.nb-metric-l{font-size:15px;line-height:22px;font-weight:500}
.nb-metric-n{font-size:13px;line-height:20px;color:var(--ink-muted)}

/* Segmented control */
.nb-seg{display:inline-flex;padding:4px;gap:4px;border-radius:var(--radius-md);background:var(--surface-sunken)}
.nb-seg button{min-height:36px;padding-inline:var(--space-4);border:0;border-radius:calc(var(--radius-md) - 4px);background:transparent;color:var(--ink-muted);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.nb-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-raised)}


@media (prefers-reduced-motion:reduce){.nb-btn,.nb-opt,.nb-prog-fill{transition:none}.nb-btn:active{transform:none}}

/* ---- Added 2026-11-07 for the homepage redesign (system-first rule) ---- */

/* Page grid */
.nb-wrap{width:100%;max-width:var(--content-max);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.nb-wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.nb-section{padding-block:var(--space-8)}
@media (min-width:900px){.nb-section{padding-block:var(--space-9)}}
.nb-rule{border:0;border-top:1px solid var(--hairline);margin:0}

/* Nav bar */
.nb-nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--canvas) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--hairline)}
.nb-nav-in{display:flex;align-items:center;gap:var(--space-6);min-height:64px}
.nb-brand{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);color:var(--ink);text-decoration:none;font-size:19px;line-height:28px;font-weight:600}
.nb-brand img,.nb-brand svg{width:28px;height:28px}
.nb-nav-links{display:flex;gap:var(--space-5);flex:1;min-width:0}
.nb-nav-links a{color:var(--ink-secondary);text-decoration:none;font-size:15px;line-height:22px;font-weight:500;padding-block:var(--space-2)}
.nb-nav-links a:hover{color:var(--ink)}
.nb-nav-act{display:flex;gap:var(--space-2);margin-inline-start:auto}
.nb-nav-act .nb-btn{min-height:var(--tap-min);padding-inline:var(--space-4)}
@media (max-width:899px){.nb-nav-links{display:none}}
/* KAN-1745: «دخول» (quiet) stays in the bar down to 375px; English words are wider, so English pages drop it under 420px. */
@media (max-width:374.98px){.nb-nav-act .nb-btn-quiet{display:none}}
@media (max-width:419.98px){html[lang="en"] .nb-nav-act .nb-btn-quiet{display:none}}
/* Button audit 2026-11-12 (W1): the NavBar menu button sits after the actions and shows below 900px only, where the text
   links are hidden; it opens the Sheet (.nb-sheet-rows, then .nb-sheet-act with the same two actions, full width). */
.nb-nav-act .nb-nav-menu{flex:none}
@media (min-width:900px){.nb-nav-act .nb-nav-menu{display:none}}
.nb-sheet .nb-sheet-close{margin-inline-start:auto}
.nb-sheet-act{display:grid;gap:var(--space-2);margin-top:var(--space-3)}
.nb-sheet-act .nb-btn{width:100%;min-height:52px;font-size:16px}
/* Signed-in chip (KAN-770/910, same script as the templated pages): «دخول» becomes the role chip in the same 44px box; a
   student chip hides the primary action below 900px, a teacher or principal chip hides it everywhere; under 375px the chip
   stays (only the anonymous «دخول» moves into the Sheet). */
.nb-nav-act .nb-chip{gap:var(--space-2);padding-inline:var(--space-2) var(--space-3);color:var(--ink);border-color:var(--hairline);border-radius:var(--radius-full)}
.nb-nav-act .nb-chip .nb-av{width:32px;height:32px;border-radius:var(--radius-full);background:var(--brand-tint);color:var(--action);display:grid;place-items:center;font-weight:600;font-size:14px}
html.nb-staff .nb-nav-act [data-cta="nav"],html.nb-staff .nb-sheet .nb-sheet-cta,html.nb-signed .nb-sheet .nb-sheet-login{display:none}
@media (max-width:899.98px){html.nb-signed .nb-nav-act [data-cta="nav"]{display:none}}
@media (max-width:374.98px){html.nb-signed .nb-nav-act .nb-btn-quiet.nb-chip{display:inline-flex}}
/* Design audit 2026-11-12 S4 (bulk 4): one NavBar. The homepage's NavBar has the same order, labels and rhythm as the
   templated header (templates/nav.html): logo, links, primary «ابدأ التشخيص» (+ « المجاني» from 900px, .nb-cta-x), «دخول»
   (quiet, 12px sides), menu. Below 900px the bar packs with a 12px gap and a compact primary, as on every other page. */
.nb-nav-act .nb-btn-quiet{padding-inline:var(--space-3)}
.nb-nav-links a[aria-current="page"]{color:var(--action);font-weight:600}
@media (max-width:899.98px){.nb-nav-in{gap:var(--space-3)}.nb-nav-act .nb-btn-primary{padding-inline:var(--space-3)}.nb-nav-act .nb-cta-x{display:none}}

/* Feature row: name + badges + one line */
.nb-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 var(--space-6)}
.nb-row{display:flex;flex-direction:column;gap:var(--space-1);padding-block:var(--space-4);border-top:1px solid var(--hairline);min-width:0}
.nb-row-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:16px;line-height:24px;font-weight:600}
.nb-row-d{font-size:15px;line-height:24px;color:var(--ink-muted)}

/* Bar list: label, bar, value */
.nb-bars{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) 44px;gap:var(--space-3) var(--space-4);align-items:center;font-size:15px;line-height:22px}
.nb-bars .nb-bar{height:8px;border-radius:var(--radius-full);background:var(--surface-sunken);overflow:hidden}
.nb-bars .nb-bar>i{display:block;height:100%;border-radius:inherit;background:var(--brand)}
.nb-bars .nb-bar>i.v{background:var(--border-strong)}
.nb-bars .nb-bar>i.hi{background:var(--caution)}
.nb-bars .nb-bar>i.lo{background:var(--correct)}
.nb-bars .nb-v{text-align:end;font-variant-numeric:tabular-nums;color:var(--ink-secondary)}

/* Disclosure (FAQ) */
.nb-disc{border-top:1px solid var(--hairline)}
.nb-disc:last-child{border-bottom:1px solid var(--hairline)}
.nb-disc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--tap-min);padding-block:var(--space-4);cursor:pointer;font-size:17px;line-height:26px;font-weight:500}
.nb-disc summary::-webkit-details-marker{display:none}
.nb-disc summary::after{content:"";flex:none;width:10px;height:10px;border-right:1.75px solid var(--ink-muted);border-bottom:1.75px solid var(--ink-muted);transform:rotate(45deg);transition:transform var(--nb-base) var(--nb-ease);margin-top:-4px}
.nb-disc[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.nb-disc summary:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:4px}
.nb-disc p{margin:0 0 var(--space-4);font-size:16px;line-height:27px;color:var(--ink-secondary);max-width:var(--reading-max)}

/* Tabs (same look as SegmentedControl, tab semantics) */
.nb-tabs{display:inline-flex;padding:4px;gap:4px;border-radius:var(--radius-md);background:var(--surface-sunken)}
.nb-tabs [role="tab"]{min-height:var(--tap-min);padding-inline:var(--space-4);border:0;border-radius:calc(var(--radius-md) - 4px);background:transparent;color:var(--ink-muted);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.nb-tabs [role="tab"][aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-raised)}
.nb-tabs [role="tab"]:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* Chip cloud */
.nb-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.nb-chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:36px;padding-inline:var(--space-4);border-radius:var(--radius-full);border:1px solid var(--hairline);background:var(--surface);font-size:15px;line-height:22px}
.nb-chip b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-muted)}

/* Footer */
.nb-foot{background:var(--deep);color:var(--on-deep)}
.nb-foot a:not(.nb-btn){display:inline-block;padding-block:8px;color:var(--on-deep);opacity:.78;text-decoration:none;font-size:14px;line-height:28px}
.nb-foot a:not(.nb-btn):hover{opacity:1;text-decoration:underline}
.nb-foot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-6) var(--space-5);padding-block:var(--space-8)}
.nb-foot-col{display:flex;flex-direction:column;min-width:0}
.nb-foot-col b{font-size:13px;line-height:20px;font-weight:600;letter-spacing:.2px;margin-bottom:var(--space-2);opacity:1}
.nb-foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-5);border-top:1px solid rgba(242,248,249,.16);font-size:13px}
.nb-foot a:focus-visible{outline:2px solid var(--on-deep);outline-offset:2px;opacity:1}

/* ---- Added 2026-11-07 (v3): sections, beacon panel, quiz ---- */

/* Section bands: alternate to separate content */
.sec{padding-block:var(--space-8)}
@media (min-width:900px){.sec{padding-block:var(--space-9)}}
.sec-white{background:var(--canvas)}
.sec-alt{background:var(--section-alt)}
.sec-tint{background:var(--brand-tint)}

/* Spectrum line: four flat segments, no blur (replaces the gradient) */
.nb-spec-line{height:4px;border-radius:var(--radius-full);background:linear-gradient(to left,var(--spectrum-teal) 0 46%,var(--spectrum-sky) 46% 64%,var(--spectrum-amber) 64% 82%,var(--spectrum-coral) 82% 100%)}

/* Quiz card: a short try, three questions then sign-up. One card, no frame around it. */
.nb-quiz{background:var(--surface);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-overlay);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
@media (max-width:600px){.nb-quiz{padding:var(--space-5) var(--space-4);border-radius:var(--radius-lg)}}
.nb-quiz-head{display:flex;flex-direction:column;gap:var(--space-3)}
.nb-quiz-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.nb-quiz-title{font-size:15px;line-height:22px;font-weight:600}
.nb-quiz-count{font-size:13px;line-height:20px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.nb-quiz-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.nb-quiz-bar i{height:4px;border-radius:var(--radius-full);background:var(--surface-sunken)}
.nb-quiz-bar i.on{background:var(--brand)}
.nb-quiz-body{display:flex;flex-direction:column;gap:var(--space-2)}
.nb-quiz-skill{font-size:13px;line-height:20px;color:var(--ink-muted)}
.nb-quiz-q{margin:0;font-size:19px;line-height:30px;font-weight:600;text-wrap:pretty}
.nb-quiz-opts{display:flex;flex-direction:column;gap:var(--space-2)}
.nb-quiz-opts .nb-opt{min-height:52px;padding-block:var(--space-2)}
.nb-quiz-opts .nb-opt-l{width:28px;height:28px;font-size:14px}
.nb-opt-s{margin-inline-start:auto;padding:2px 10px;border-radius:var(--radius-full);font-size:13px;line-height:20px;font-weight:600}
.nb-opt[data-state="correct"] .nb-opt-s{background:var(--surface);color:var(--correct)}
.nb-opt[data-state="wrong"] .nb-opt-s{background:var(--surface);color:var(--wrong)}
.nb-quiz-why{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface-sunken)}
.nb-quiz-why-h{display:flex;align-items:center;gap:var(--space-2);font-size:15px;line-height:22px;font-weight:600}
.nb-quiz-why-h svg{width:20px;height:20px;flex:none}
.nb-quiz-why p{margin:0;font-size:16px;line-height:28px}
.nb-quiz-why small{font-size:13px;line-height:20px;color:var(--ink-muted)}
.nb-quiz-res{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.nb-quiz-score{font-size:44px;line-height:48px;font-weight:600;font-variant-numeric:tabular-nums}
.nb-quiz-p{margin:0;color:var(--ink-secondary)}
.nb-quiz-acts{display:flex;flex-direction:column;gap:var(--space-2)}
@media (prefers-reduced-motion:no-preference){.nb-quiz-why,.nb-quiz-res{animation:nbQuizIn .28s var(--nb-ease) both}}
@keyframes nbQuizIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Audience key: student teal, teacher amber, school coral */
.nb-key{display:block;width:32px;height:6px;border-radius:var(--radius-full)}
.nb-key-student{background:var(--spectrum-teal)}.nb-key-teacher{background:var(--spectrum-amber)}.nb-key-school{background:var(--spectrum-coral)}
.sec-deep{background:var(--deep);color:var(--on-deep)}
.sec-deep .nb-sh h2{color:var(--on-deep)}
.sec-deep .nb-sh p,.sec-deep .nb-sh-over{color:var(--on-deep);opacity:.82}
.sec-deep .nb-card{color:var(--ink)}

/* ---- Added 2026-11-07 (education direction): announce bar, course list, guide cards, illustrations ---- */
/* Announcement bar */
.nb-announce{background:var(--deep);color:var(--on-deep);font-size:14px;line-height:20px}
.nb-announce-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 var(--space-4);padding-block:var(--space-1);text-align:center}
.nb-announce b{font-weight:600}
.nb-announce a{color:var(--on-deep);text-decoration:underline;text-underline-offset:3px}

/* KAN-1745 (2026-11-11): the bar's link is a 44px tap target; the row is 44px on one line, two rows on phones. */
.nb-announce a{display:inline-flex;align-items:center;min-height:var(--tap-min)}
.nb-announce-in{padding-block:0;row-gap:0;align-items:center}
.nb-announce-in>span{padding-block:var(--space-3) 0}
@media (min-width:600px){.nb-announce-in>span{padding-block:var(--space-3)}}
/* Design audit 2026-11-12 S9 (bulk 4: the homepage too): under 375px the window and days left fit one 13px line with
   12px sides, then the link, so the bar is two lines at most on every page (the templated bar has the same rule). */
@media (max-width:374.98px){.nb-announce{font-size:13px}.nb-announce-in{padding-left:var(--space-3);padding-right:var(--space-3)}}

/* Sheet (KAN-1745): the phone menu of the NavBar and any small bottom sheet. Scrim, surface, top corners radius-xl,
   rows 52px with hairlines, one close button 44px. Same in both themes through the tokens. */
.nb-scrim{position:fixed;inset:0;background:var(--scrim);z-index:1000}
.nb-sheet{position:fixed;inset-inline:0;bottom:0;z-index:1001;max-width:560px;margin-inline:auto;max-height:92vh;overflow:auto;background:var(--surface);color:var(--ink);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-overlay)}
.nb-sheet-handle{width:40px;height:4px;border-radius:var(--radius-full);background:var(--hairline);margin:0 auto var(--space-2)}
.nb-sheet-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:52px;border-bottom:1px solid var(--hairline);color:var(--ink);text-decoration:none;font-size:16px;line-height:24px;font-weight:500}
.nb-sheet-row:last-child{border-bottom:0}
.nb-sheet-row[aria-current="page"]{color:var(--action);font-weight:600}
.nb-icon-btn{display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);min-width:var(--tap-min);padding:0;border-radius:var(--radius-md);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);cursor:pointer}
.nb-icon-btn:focus-visible{outline:2px solid var(--action);outline-offset:2px}
/* Course catalogue */
.courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
@media (max-width:760px){.courses{grid-template-columns:minmax(0,1fr)}}
.course{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-5) var(--space-3);display:flex;flex-direction:column;min-width:0}
.course-h{display:flex;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3)}
.course-h .title-2{margin:0}
.course-k{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-md);font-size:15px;font-weight:600;flex:none}
.course-k-q{background:var(--brand);color:var(--on-action)}
.course-k-v{background:var(--deep);color:var(--on-deep)}
.course-list{list-style:none;margin:0;padding:0}
.course-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:52px;border-top:1px solid var(--hairline);color:var(--ink);text-decoration:none;font-size:16px;line-height:24px;font-weight:500}
.course-list a::after{content:"";width:8px;height:8px;border-left:1.75px solid var(--ink-muted);border-bottom:1.75px solid var(--ink-muted);transform:rotate(45deg);flex:none}
.course-list a span{flex:1}
.course-list small{font-size:13px;color:var(--ink-muted);font-weight:400;font-variant-numeric:tabular-nums}
.course-list a:hover span{color:var(--action)}
.course-list a:focus-visible,.course-all:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:6px}
.course-all{margin-top:auto;min-height:var(--tap-min);padding-top:var(--space-4);font-size:15px;font-weight:500;text-decoration:none}

/* Exam guide */
.guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:900px){.guide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.guide{grid-template-columns:minmax(0,1fr)}}
.guide-c{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-5);border:1px solid var(--hairline);border-radius:var(--radius-lg);color:var(--ink);text-decoration:none;transition:border-color var(--nb-fast) var(--nb-ease)}
.guide-c:hover{border-color:var(--border-strong)}
.guide-c .title-3{color:var(--ink)}
.guide-d{font-size:15px;line-height:24px;color:var(--ink-muted)}

.guide-c:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* Illustration palette: tokens only */
.ill{display:block;width:100%;height:auto}
.ill .i-tint{fill:var(--brand-tint)}
.ill .i-white{fill:var(--surface)}
.ill .i-deep{fill:var(--deep)}
.ill .i-teal{fill:var(--brand)}
.ill .i-sky{fill:var(--spectrum-sky)}
.ill .i-amber{fill:var(--spectrum-amber)}
.ill .i-coral{fill:var(--spectrum-coral)}
.ill .i-light{fill:var(--spectrum-amber);opacity:.28}
.ill .i-page{fill:var(--surface);stroke:var(--hairline);stroke-width:2}
.ill .i-spine{fill:var(--hairline)}
.ill .i-line{fill:var(--surface-sunken)}
.ill .i-bub{fill:var(--surface);stroke:var(--border-strong);stroke-width:2}
.ill .i-wrong{fill:none;stroke:var(--wrong);stroke-width:3}
.ill .i-right{fill:var(--correct)}
.ill .i-hand{font-family:var(--font-sans);font-size:17px;font-weight:500;fill:var(--ink-secondary);direction:ltr;unicode-bidi:isolate}
.ill .i-arm{fill:none;stroke:var(--deep);stroke-width:14;stroke-linecap:round;stroke-linejoin:round}
.ill .i-ok{fill:var(--correct);font-weight:600}
.ill .i-wood{fill:var(--lm-highlight)}
.ill .i-hl{fill:var(--lm-highlight)}
.ill .i-lmink{fill:var(--lm-ink)}
.ill .i-chalk{fill:var(--on-deep);opacity:.7}

/* Exam planner: days left, three plan phases on a 12-week line */
.nb-plan{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-raised);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
@media (max-width:600px){.nb-plan{padding:var(--space-5) var(--space-4);border-radius:var(--radius-lg)}}
.nb-plan-top{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.nb-plan-date{display:flex;flex-direction:column;gap:var(--space-2);width:100%;max-width:280px}
.nb-plan-date input{min-height:var(--control-h);padding-inline:var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.nb-plan-date input:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.nb-plan-src{margin:0;color:var(--ink-muted)}
.nb-plan-num{display:flex;align-items:baseline;gap:var(--space-2)}
.nb-plan-days{font-size:64px;line-height:68px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.nb-plan-unit{font-size:19px;font-weight:500;color:var(--ink-secondary)}
.nb-plan-line{position:relative;padding-block:8px}
.nb-plan-zones{display:flex;gap:4px;height:10px}
.nb-plan-zones i{border-radius:var(--radius-full)}
.nb-plan-zones .z1{flex:2;background:var(--spectrum-teal)}
.nb-plan-zones .z2{flex:1;background:var(--spectrum-amber)}
.nb-plan-zones .z3{flex:1;background:var(--spectrum-coral)}
.nb-plan-dot{position:absolute;top:50%;width:22px;height:22px;margin-inline-start:-11px;border-radius:var(--radius-full);background:var(--surface);border:4px solid var(--ink);transform:translateY(-50%);transition:inset-inline-start var(--nb-base) var(--nb-ease)}
.nb-plan-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);color:var(--ink-muted)}
.nb-plan-legend span{display:inline-flex;align-items:center;gap:6px}
.nb-plan-legend i{width:10px;height:10px;border-radius:var(--radius-full)}
.nb-plan-legend .k1{background:var(--spectrum-teal)}.nb-plan-legend .k2{background:var(--spectrum-amber)}.nb-plan-legend .k3{background:var(--spectrum-coral)}
.nb-plan-out{display:flex;flex-direction:column;gap:var(--space-1)}
.nb-plan-phase{margin:0}
.nb-plan-text{margin:0;color:var(--ink-secondary)}
@media (prefers-reduced-motion:reduce){.nb-plan-dot{transition:none}}

.ill .i-wrong-ring{fill:none;stroke:var(--spectrum-coral);stroke-width:3}

/* Graph paper: the study-page texture behind a hero, faded at the edges */
.nb-paper{position:relative;overflow:hidden}
.nb-paper::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:32px 32px;opacity:.55;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 30% 45%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 30% 45%,#000 30%,transparent 75%);pointer-events:none}
/* Equation isolates never break inside: «4 ÷ 0.05 = 80» stays on one line (KAN-1747). */
.nb-quiz bdi[dir="ltr"]{white-space:nowrap}

/* Lane D2 additions (KAN-1750 /lammah, KAN-1752 utility pages, 2026-11-11), folded in by KAN-1743. Token-only.
   Usage notes in README.md / README.ar.md («Page additions»). */

/* LammahMark at hero size: the mark from assets/Lammah (symbol #lm-mark), never redrawn. 72px hero, 32px header. */
.nb-lm-mark{display:block;flex:none;width:72px;height:72px}
.nb-lm-mark-32{display:block;flex:none;width:32px;height:32px}

/* LammahExplain inside a Quiz: the Quiz well treatment (no card inside a card). */
.nb-quiz .nb-lm{border:0;background:var(--surface-sunken);border-radius:var(--radius-md);padding:var(--space-4)}

/* Solo: a one-task page (sign-in link, subscribe, unsubscribe). One card centred on the alt band. */
.nb-solo{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:var(--space-5) var(--space-4);background:var(--section-alt)}
.nb-solo-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);text-align:center}
.nb-solo-body{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.nb-solo-body h1{margin:0;font-size:24px;line-height:34px;font-weight:600;text-wrap:balance}
.nb-solo-body p{margin:0;font-size:16px;line-height:27px;color:var(--ink-secondary)}
.nb-solo-logo{display:block;width:52px;height:52px;border-radius:var(--radius-md);margin:0 auto var(--space-4)}

/* Spinner: waiting on one request. Pair it with role="status" and a label. Still under reduced motion. */
.nb-spin{width:28px;height:28px;flex:none;border-radius:var(--radius-full);border:3px solid var(--hairline);border-top-color:var(--action);animation:nbSpin .8s linear infinite}
@keyframes nbSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nb-spin{animation:none}}

/* Quiet text link (contact line, legal links): muted, underlined, 44px tap height. */
.nb-link-muted{display:inline-flex;align-items:center;min-height:var(--tap-min);color:var(--ink-muted);font-size:13px;line-height:20px;text-decoration:underline;text-underline-offset:3px}
.nb-link-muted:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:4px}

/* Select and checkbox rows for TextField (.nb-field already styles input). */
.nb-field select{min-height:var(--control-h);padding-inline:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;width:100%}
.nb-field select:focus-visible,.nb-field input:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.nb-checkrow{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--tap-min);cursor:pointer;font-size:16px;line-height:27px}
.nb-checkrow input{flex:none;width:22px;height:22px;margin-top:3px;accent-color:var(--action)}

/* Prose: running text of an article page (guide, SEO answer page). Reading width, links in action. */
.nb-prose{max-width:var(--reading-max)}
/* Bulk 4 (design audit S11): paragraphs and list items keep the Arabic measure (about 75 characters per line). */
.nb-prose p,.nb-prose li{max-width:var(--reading-measure)}
.nb-prose p,.nb-prose li{font-size:16px;line-height:28px;color:var(--ink-secondary)}
.nb-prose p{margin:0}
.nb-prose a:not(.nb-btn){color:var(--action);font-weight:500;text-underline-offset:3px}
.nb-prose ul,.nb-prose ol{margin:0;padding-inline-start:1.25em}
.nb-prose li{padding-block:2px}
.nb-prose li::marker{color:var(--brand)}

/* Table: data table that stacks on phones. Each td carries data-l (its column name) for the stacked view. */
.nb-table{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius-md)}
.nb-table table{border-collapse:collapse;width:100%}
.nb-table th{background:var(--surface-sunken);font-weight:600;text-align:start;padding:var(--space-2) var(--space-3);font-size:13px;line-height:20px;color:var(--ink)}
.nb-table td{border-top:1px solid var(--hairline);padding:var(--space-2) var(--space-3);vertical-align:top;font-size:15px;line-height:24px;color:var(--ink-secondary)}
.nb-table td:first-child{font-weight:600;color:var(--ink)}
@media (max-width:600px){.nb-table:not(.nb-table-scroll) thead{display:none}.nb-table:not(.nb-table-scroll) tr{display:block;border-top:1px solid var(--hairline);padding-block:var(--space-2)}.nb-table:not(.nb-table-scroll) tr:first-child{border-top:0}.nb-table:not(.nb-table-scroll) td{display:block;border:0;padding:2px var(--space-3)}.nb-table:not(.nb-table-scroll) td[data-l]::before{content:attr(data-l) ": ";font-weight:600;color:var(--ink-muted)}}
/* Table, scroll modifier: blank forms and wide tables keep their columns and scroll sideways inside the box on phones. */
.nb-table-scroll table{min-width:640px}

/* Checklist: items to tick on paper (evidence lists, templates). An empty square, not a state icon. */
.nb-check{list-style:none;padding:0;margin:0}
.nb-check li{display:flex;gap:var(--space-3);align-items:flex-start;padding-block:var(--space-2)}
.nb-check li::before{content:"";flex:none;width:18px;height:18px;margin-top:5px;border:1.75px solid var(--border-strong);border-radius:4px}

/* Lane D1 additions (KAN-1748 teachers, KAN-1749 schools, KAN-1751 family and reports, 2026-11-11), folded in by
   KAN-1743. Token-only. Usage notes in README.md / README.ar.md («Page additions, lane D1»). The print token block
   (print is always light) is emitted into tokens.css by build_tokens_css.py. */

/* Metric group: Metrics side by side in one Card (usually .nb-card-sunken): 2 columns on phones, 4 from 900px; one
   .nb-metric-n inside the group names the source or period of all its numbers (spans the full row). */
.nb-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.nb-metrics>.nb-metric-n{grid-column:1/-1}
@media (min-width:900px){.nb-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* A value never breaks inside a group («3 من 4» stays one line). */
.nb-metrics .nb-metric-v{white-space:nowrap}
/* Columns follow the count: a group of 3 keeps 3 columns from 900px (no empty fourth column squeezing the values). */
@media (min-width:900px){.nb-metrics:not(:has(>.nb-metric:nth-of-type(4))){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Bulk 4 (design audit close-out): in a group of three each column sizes to its content and the free space goes between
   them, so a long label («نسبة الغلط في الكمي») keeps one line in a half-width card (1024 to 1180) instead of wrapping in an
   equal third. A column still shrinks to its longest word when there is no room, so nothing overflows. */
@media (min-width:900px){.nb-metrics:not(:has(>.nb-metric:nth-of-type(4))){grid-template-columns:repeat(3,auto);justify-content:space-between}}
/* Compact group: values set in title-1 (32px) when a value is long («3 من 4») and must fit a phone's two-column tile. */
.nb-metrics-sm .nb-metric-v{font-size:32px;line-height:44px}

/* BarList with a count value: same BarList, the value column sizes to its text («صح 1 من 4») instead of 44px. */
.nb-bars-count{grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto}

/* Brand link: the header mark + «نبراس» is a tap target. */
a.logo,a.brand{display:inline-flex;align-items:center;min-height:var(--tap-min)}

/* Focus: the one focus ring on every focusable element, not only on system components. */
:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* Design audit 2026-11-12 (T6). Headings wrap balanced: no single word alone on a heading's last line. */
h1,h2,h3,.title-1,.title-2,.title-3{text-wrap:balance}
/* Arabic has no true italic: <em>/<i> would be slanted by the browser (synthesized). Emphasis is weight 600 instead. */
:lang(ar) em,:lang(ar) i{font-style:normal}
:lang(ar) em{font-weight:600}
/* Tap-min by input, not by width: on a touch screen (tablets at 1024 and 1180 included) the nav text links and the
   footer links and group titles are 44px targets too; a mouse keeps the compact desktop rhythm. */
@media (pointer:coarse){
  .nb-nav-links a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-min);min-width:var(--tap-min)}
  .nb-foot a:not(.nb-btn){display:inline-flex;align-items:center;min-height:var(--tap-min);padding-block:0}
}

/* Paper is white: the page background under print is canvas, whatever band colour the screen uses. */
@media print{html body{background:var(--canvas)}}

/* App additions (KAN-1753, the student app's themed arm, 2026-11-11), folded in by KAN-1754. Token-only.
   Usage notes in README.md / README.ar.md («App additions»). The app reads the same values through /nb-app-ds.css. */

/* Muted text on the deep band (the «خطة اليوم» card, the identity card in «حسابي», the install card): on-deep at 78% over
   deep. Contrast 7.5:1 on deep, same in both themes because deep and on-deep do not change. */
.nb-on-deep-muted{color:color-mix(in srgb,var(--on-deep) 78%,var(--deep))}
/* Progress track on the deep band: on-deep at 18% over deep, fill in brand (the ExamPlanner days line inside the card). */
.nb-deep-track{background:color-mix(in srgb,var(--on-deep) 18%,var(--deep));border-radius:var(--radius-full)}
.nb-deep-track>i{display:block;height:100%;background:var(--brand);border-radius:var(--radius-full)}
/* An expression with an Arabic letter («3ن + 3 = 111», «س – ص = 3») = ONE .nb-math-keep: never breaks, keeps the native
   direction (an LTR isolate reverses it). The numeric twin (.nb-math, LTR isolate + nowrap) is in components.app.css until
   Design decides whether its nowrap applies site-wide (KAN-1754 notes). */
.nb-math-keep{white-space:nowrap}
/* Mark (KAN-1897, 12 Nov 2026): the ✓ / ✕ state marks drawn as the system's line icons (24px grid, round caps and joins,
   the same paths as the app's answer icons), never as a font glyph. IBM Plex Sans Arabic has no ✓ or ✕, so the glyph fell
   back to a face that draws a tick like a root sign (√), which reads as maths in a maths app. The mark takes the text colour
   (currentColor) and the text size (1em), sits on the baseline of its word, and keeps the original character for screen
   readers inside .nb-mark-t (clipped, not display:none). Markup: <span class="nb-mark nb-mark-ok" data-nb-nomath><span
   class="nb-mark-t">✓</span></span>; .nb-mark-no is the cross. Always beside its word (Iconography rule). */
.nb-mark{display:inline-block;position:relative;width:.9em;height:.9em;vertical-align:-.1em;background:currentColor;-webkit-mask:var(--nb-mark-i) center/contain no-repeat;mask:var(--nb-mark-i) center/contain no-repeat}
.nb-mark-ok{--nb-mark-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.nb-mark-no{--nb-mark-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.nb-mark-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ==== BEGIN KAN-1740 teacher, school and parent components (folded from components.teacher.css by scripts/kan1740_fold_teacher_ds.js; scoped to .nb-tp) ==== */
/* Source: marketing/design_system/components.teacher.css + notes_teacher.md (Design, KAN-1740 phase 3). Body of the three
   pages carries class="nb-tp"; nothing here applies elsewhere. Tokens only. */
/* ── App bar: the opaque bar on every app screen (same rule as the student arm, KAN-1753 c22299 B1) ── */
.nb-tp .nb-appbar{position:sticky;top:0;z-index:20;background:var(--section-alt);border-bottom:1px solid var(--hairline)}
.nb-tp .nb-appbar-in{display:flex;align-items:center;gap:var(--space-3);min-height:56px;width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:16px}
@media (min-width:900px){.nb-tp .nb-appbar-in{padding-inline:32px;min-height:64px}}
.nb-tp .nb-appbar .nb-brand{font-size:17px;line-height:24px;min-height:var(--tap-min)}
.nb-tp .nb-appbar-end{display:flex;align-items:center;gap:var(--space-2);margin-inline-start:auto}
.nb-tp .nb-iconbtn{flex:none;display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);padding:0;border-radius:var(--radius-md);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);cursor:pointer}
.nb-tp .nb-iconbtn svg{width:20px;height:20px}
.nb-tp .nb-iconbtn-quiet{border-color:transparent;background:transparent}
.nb-tp .nb-iconbtn:focus-visible{outline:2px solid var(--action);outline-offset:2px}
/* Who: the signed-in owner (avatar initial + name), a button that opens «حسابي» */
.nb-tp .nb-who{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);padding-inline:6px var(--space-3);border-radius:var(--radius-md);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;line-height:22px;font-weight:500;text-decoration:none;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.nb-tp .nb-who .nb-av{width:32px;height:32px;font-size:13px}

/* ── Page head: overline (class or school) + h1 + one source line; an optional switcher at the end ── */
.nb-tp .nb-ph{display:flex;flex-direction:column;gap:var(--space-1);padding-top:var(--space-5)}
.nb-tp .nb-ph-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.nb-tp .nb-ph h1{margin:0;font-size:24px;line-height:34px;font-weight:600;text-wrap:balance}
.nb-tp .nb-ph-over{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.2px;color:var(--ink-muted)}
.nb-tp .nb-ph-src{margin:0;font-size:13px;line-height:20px;color:var(--ink-muted)}
.nb-tp .nb-ph-back{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--tap-min);color:var(--action);text-decoration:none;font-size:15px;font-weight:500;align-self:flex-start}
.nb-tp .nb-ph-back svg{width:18px;height:18px;transform:scaleX(-1)}
@media (min-width:900px){.nb-tp .nb-ph h1{font-size:32px;line-height:44px}}
/* Switcher: a secondary control that names the current class and opens the class list («فصل 3/2 ▾») */
.nb-tp .nb-switch{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);padding-inline:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap}
.nb-tp .nb-switch svg{width:16px;height:16px;color:var(--ink-muted)}

/* ── Section head inside an app screen: title-3 + an optional quiet link at the end ── */
.nb-tp .nb-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin:var(--space-6) 0 var(--space-3)}
.nb-tp .nb-sec-h h2{margin:0;font-size:19px;line-height:28px;font-weight:600}
.nb-tp .nb-sec-h a,.nb-tp .nb-sec-h button{display:inline-flex;align-items:center;min-height:var(--tap-min);padding-inline:var(--space-2);margin-inline-end:calc(var(--space-2) * -1);margin-block:calc(var(--space-3) * -1);color:var(--action);font:inherit;font-size:15px;font-weight:500;text-decoration:none;background:none;border:0;cursor:pointer}

/* ── App stack: the column of blocks on a screen; desktop puts an aside beside the main column ── */
.nb-tp .nb-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.nb-tp .nb-stack>.nb-sec-h{margin-top:var(--space-4);margin-bottom:calc(var(--space-1) * -1)}
.nb-tp .nb-stack>.nb-sec-h:first-child{margin-top:0}
.nb-tp .nb-cols{display:flex;flex-direction:column;gap:var(--space-4)}
.nb-tp .nb-card>h3,.nb-tp .nb-card>.title-3,.nb-tp .nb-card-deep>p.title-3{text-wrap:balance}
@media (min-width:1024px){.nb-tp .nb-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-6);align-items:start}.nb-tp .nb-cols>aside{position:sticky;top:88px}}

/* ── Tab bar (phone) that becomes a side rail (desktop) inside .nb-shell ── */
.nb-tp .nb-tabbar{position:fixed;inset-inline:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--hairline);padding-bottom:env(safe-area-inset-bottom,0px)}
.nb-tp .nb-tabbar-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:560px;margin-inline:auto}
.nb-tp .nb-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;padding-inline:var(--space-1);color:var(--ink-muted);text-decoration:none;font-size:13px;line-height:18px;font-weight:500;text-align:center}
.nb-tp .nb-tab svg{width:24px;height:24px;flex:none}
.nb-tp .nb-tab[aria-current="page"]{color:var(--action)}
.nb-tp .nb-tab[aria-current="page"]::before{content:"";position:absolute;top:0;inset-inline:calc(50% - 16px);height:2px;border-radius:0 0 2px 2px;background:var(--action)}
.nb-tp .nb-tab:focus-visible{outline:2px solid var(--action);outline-offset:-4px;border-radius:var(--radius-md)}
.nb-tp .nb-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding-inline:6px;border-radius:var(--radius-full);background:var(--action);color:var(--on-action);font-size:13px;line-height:20px;font-weight:600;font-variant-numeric:tabular-nums}
.nb-tp .nb-tab .nb-count{position:absolute;top:6px;inset-inline-start:calc(50% + 4px)}
.nb-tp .nb-shell{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.nb-tp .nb-shell-main{width:100%;max-width:560px;margin-inline:auto;padding-inline:16px;min-width:0}
@media (min-width:1024px){
  .nb-tp .nb-shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:var(--space-7);max-width:var(--content-max);margin-inline:auto;padding:0 32px var(--space-8)}
  .nb-tp .nb-shell-main{max-width:none;padding-inline:0}
  .nb-tp .nb-shell>.nb-tabbar{position:sticky;top:88px;align-self:start;inset:auto;border:0;background:transparent;padding:var(--space-5) 0 0}
  .nb-tp .nb-shell>.nb-tabbar .nb-tabbar-in{display:flex;flex-direction:column;gap:var(--space-1);max-width:none}
  .nb-tp .nb-shell .nb-tab{flex-direction:row;justify-content:flex-start;gap:var(--space-3);min-height:48px;padding-inline:var(--space-4);border-radius:var(--radius-md);font-size:15px;line-height:22px;color:var(--ink-secondary)}
  .nb-tp .nb-shell .nb-tab:hover{background:var(--surface-sunken)}
  .nb-tp .nb-shell .nb-tab[aria-current="page"]{background:var(--brand-tint);color:var(--action)}
  .nb-tp .nb-shell .nb-tab[aria-current="page"]::before{display:none}
  .nb-tp .nb-shell .nb-tab .nb-count{position:static;margin-inline-start:auto}
}

/* ── Sheet: bottom sheet on phones, centred dialog from 900px; scrim from the system ── */
.nb-tp .nb-scrim{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim)}
.nb-tp .nb-sheet{width:100%;max-width:560px;max-height:88vh;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-2) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom,0px));background:var(--surface);color:var(--ink);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-overlay)}
.nb-tp .nb-sheet-grab{flex:none;width:36px;height:4px;margin:var(--space-1) auto 0;border-radius:var(--radius-full);background:var(--hairline)}
.nb-tp .nb-sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.nb-tp .nb-sheet-h h2{margin:0;padding-top:var(--space-2);font-size:19px;line-height:28px;font-weight:600;text-wrap:balance}
.nb-tp .nb-sheet-h p{margin:var(--space-1) 0 0;font-size:15px;line-height:24px;color:var(--ink-secondary)}
.nb-tp .nb-sheet-acts{display:flex;flex-direction:column;gap:var(--space-2)}
@media (min-width:900px){.nb-tp .nb-scrim{align-items:center}.nb-tp .nb-sheet{max-width:520px;border-radius:var(--radius-xl);padding-bottom:var(--space-6)}.nb-tp .nb-sheet-grab{display:none}}
@media (prefers-reduced-motion:no-preference){.nb-tp .nb-sheet{animation:nbSheetIn var(--nb-base) var(--nb-ease) both}}
@keyframes nbSheetIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

/* ── Button variant: tonal (brand-tint, action label) for row actions that sit under one screen primary ── */
.nb-tp .nb-btn-tonal{background:var(--brand-tint);color:var(--action)}
.nb-tp .nb-btn-tonal:hover{background:color-mix(in srgb,var(--brand) 18%,var(--brand-tint))}
.nb-tp .nb-btn-sm{min-height:var(--tap-min);padding-inline:var(--space-4)}
.nb-tp .nb-btn svg{width:20px;height:20px;flex:none}

/* ── Roster: a list of people (students, teachers, requests). Initial avatar is neutral, never a hue per person ── */
.nb-tp .nb-list{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding-inline:var(--space-4);min-width:0}
.nb-tp .nb-li{display:flex;align-items:center;gap:var(--space-3);min-height:64px;padding-block:var(--space-3);border-top:1px solid var(--hairline);color:inherit;text-decoration:none}
.nb-tp .nb-li:first-child{border-top:0}
.nb-tp a.nb-li:hover .nb-li-t{color:var(--action)}
.nb-tp a.nb-li::after{content:"";flex:none;width:8px;height:8px;border-left:1.75px solid var(--ink-muted);border-bottom:1.75px solid var(--ink-muted);transform:rotate(45deg)}
.nb-tp .nb-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);background:var(--surface-sunken);color:var(--ink-secondary);font-size:15px;line-height:1;font-weight:600}
.nb-tp .nb-li-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);background:var(--brand-tint);color:var(--action)}
.nb-tp .nb-li-ic svg{width:20px;height:20px}
.nb-tp .nb-li-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nb-tp .nb-li-t{font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
.nb-tp .nb-li-d{font-size:13px;line-height:20px;color:var(--ink-muted);text-wrap:pretty}
.nb-tp .nb-li-v{flex:none;font-size:19px;line-height:28px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.nb-tp .nb-li-v small{display:block;font-size:13px;line-height:18px;font-weight:400;color:var(--ink-muted);text-align:end}
.nb-tp .nb-li-acts{flex:none;display:flex;gap:var(--space-2)}
/* Marks: a done / not-done state that is not a right or wrong answer (brand dot vs hollow ring); the words carry the meaning */
.nb-tp .nb-marks{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin-top:2px}
.nb-tp .nb-mark{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:20px;color:var(--ink-muted)}
.nb-tp .nb-mark::before{content:"";flex:none;width:8px;height:8px;border-radius:var(--radius-full);border:1.5px solid var(--border-strong)}
.nb-tp .nb-mark[data-done]{color:var(--ink-secondary)}
.nb-tp .nb-mark[data-done]::before{background:var(--brand);border-color:var(--brand)}
@media (max-width:420px){.nb-tp .nb-li-acts .nb-btn{padding-inline:var(--space-3)}}

/* ── Filter chips: one row, scrolls sideways on a phone; selected = the selected-option style (brand tint + brand border) ── */
.nb-tp .nb-filters{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px}
.nb-tp .nb-filters::-webkit-scrollbar{display:none}
.nb-tp .nb-filter{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap-min);padding-inline:var(--space-4);border-radius:var(--radius-full);border:1px solid var(--hairline);background:var(--surface);color:var(--ink-secondary);font:inherit;font-size:15px;line-height:22px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap}
.nb-tp .nb-filter b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-muted)}
.nb-tp .nb-filter[aria-pressed="true"],.nb-tp .nb-filter[aria-current="page"]{background:var(--brand-tint);border-color:var(--brand);color:var(--ink)}
.nb-tp .nb-filter[aria-pressed="true"] b{color:var(--ink-secondary)}
.nb-tp .nb-filter:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* ── Mistake map: students × skills, % correct per cell. Three steps that never use red or green:
      below 50 = caution (needs a lesson), 50 to 74 = neutral, 75 and above = brand. The number is always printed. ── */
.nb-tp .nb-map-card{padding:0;overflow:hidden;gap:0}
.nb-tp .nb-map-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.nb-tp .nb-map-scroll:focus-visible{outline:2px solid var(--action);outline-offset:-2px}
.nb-tp .nb-map{border-collapse:separate;border-spacing:0;min-width:100%;font-size:15px;line-height:22px}
.nb-tp .nb-map th,.nb-tp .nb-map td{padding:var(--space-1);text-align:center;border-bottom:1px solid var(--hairline);background:var(--surface)}
.nb-tp .nb-map tbody tr:last-child>*{border-bottom:0}
.nb-tp .nb-map thead th{vertical-align:bottom;min-width:76px;padding:var(--space-3) var(--space-1);font-size:13px;line-height:18px;font-weight:500;color:var(--ink-secondary)}
.nb-tp .nb-map .nb-map-n{position:sticky;inset-inline-start:0;z-index:1;min-width:104px;max-width:132px;padding-inline:var(--space-4) var(--space-3);text-align:start;font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-inline-end:1px solid var(--hairline)}
.nb-tp .nb-map tr.nb-map-cls>*{background:var(--surface-sunken)}
.nb-tp .nb-map tr.nb-map-cls .nb-cell[data-band="mid"]{background:var(--surface)}
/* a percentage inside Arabic text is one LTR isolate («29%», never «%29»): <bdi dir="ltr" class="nb-math">29%</bdi> */
.nb-tp .nb-map-col{display:inline-block;min-height:var(--tap-min);padding:0 var(--space-1);border:0;background:none;color:var(--action);font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.nb-tp .nb-cell{display:grid;place-items:center;width:100%;min-width:64px;min-height:var(--tap-min);padding:0;border:0;border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--ink);font:inherit;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer}
.nb-tp .nb-cell[data-band="low"]{background:var(--caution-tint);color:var(--caution)}
.nb-tp .nb-cell[data-band="high"]{background:var(--brand-tint);color:var(--action)}
.nb-tp .nb-cell[data-band="none"]{background:transparent;color:var(--ink-muted);font-weight:400;cursor:default}
.nb-tp button.nb-cell:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.nb-tp .nb-cell:focus-visible{outline:2px solid var(--action);outline-offset:1px}
.nb-tp .nb-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:0;padding:var(--space-3) var(--space-4);border-top:1px solid var(--hairline);font-size:13px;line-height:20px;color:var(--ink-muted)}
.nb-tp .nb-legend span{display:inline-flex;align-items:center;gap:6px}
.nb-tp .nb-legend i{width:14px;height:14px;border-radius:4px;background:var(--surface-sunken)}
.nb-tp .nb-legend i.lo{background:var(--caution-tint);box-shadow:inset 0 0 0 1px var(--caution)}
.nb-tp .nb-legend i.hi{background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--action)}

/* ── Wrong-pick review inside a sheet: the bank question, the student's pick (wrong) and the right option (correct) ── */
.nb-tp .nb-review{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface-sunken)}
.nb-tp .nb-review-q{margin:0;font-size:16px;line-height:27px;font-weight:600}
.nb-tp .nb-review .nb-opt{min-height:52px;cursor:default}
.nb-tp .nb-review-why{margin:0;font-size:15px;line-height:24px;color:var(--ink-secondary)}

/* ── Pick list: one choice per row in a sheet (the skill to assign); trailing figure in caption ── */
.nb-tp .nb-picks{display:flex;flex-direction:column;gap:var(--space-2)}
.nb-tp .nb-pick{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;line-height:24px;font-weight:500;text-align:start;cursor:pointer}
.nb-tp .nb-pick:hover{border-color:var(--border-strong)}
.nb-tp .nb-pick span{flex:1;min-width:0}
.nb-tp .nb-pick small{flex:none;font-size:13px;line-height:20px;font-weight:400;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.nb-tp .nb-pick[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-tint)}
.nb-tp .nb-pick:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* ── Task: an assignment with its progress (skill, «حلّها 3 من 5», a 4px brand line) ── */
.nb-tp .nb-task-bar{height:4px;margin-top:var(--space-1);border-radius:var(--radius-full);background:var(--surface-sunken);overflow:hidden;max-width:220px}
.nb-tp .nb-task-bar>i{display:block;height:100%;border-radius:inherit;background:var(--brand)}

/* ── Class card: one owned class (name, its two counts, share and QR, rename) ── */
.nb-tp .nb-class{gap:var(--space-4)}
.nb-tp .nb-class-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.nb-tp .nb-class-h h3{margin:0;font-size:19px;line-height:28px;font-weight:600}
.nb-tp .nb-class-h p{margin:2px 0 0;font-size:13px;line-height:20px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.nb-tp .nb-class-acts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2)}
.nb-tp .nb-class-acts .nb-btn,.nb-tp .nb-share-acts .nb-btn{white-space:nowrap;padding-inline:var(--space-4)}
.nb-tp .nb-class[aria-current="true"]{border-color:var(--brand)}

/* ── Share panel: QR on a light frame in both themes (data-theme="light" on .nb-qr), then the actions ── */
.nb-tp .nb-qr{align-self:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--hairline);background:var(--surface);color:var(--ink)}
.nb-tp .nb-qr>svg,.nb-tp .nb-qr>img,.nb-tp .nb-qr>canvas{display:block;width:184px;height:184px}
.nb-tp .nb-share-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.nb-tp .nb-share-acts>.nb-btn-primary,.nb-tp .nb-share-acts>.nb-share-wide{grid-column:1/-1}
@media (max-width:419px){.nb-tp .nb-share-acts{grid-template-columns:minmax(0,1fr)}}
.nb-tp .nb-note{margin:0;font-size:13px;line-height:20px;color:var(--ink-muted);text-align:center}
.nb-tp .nb-link-field{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h);padding-inline:var(--space-4) var(--space-1);border-radius:var(--radius-md);background:var(--surface-sunken);font-size:15px;color:var(--ink-secondary);direction:ltr;unicode-bidi:isolate;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ── Empty state: icon tile, title-3, one sentence, one primary (+ one secondary) ── */
.nb-tp .nb-empty{align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-6) var(--space-5)}
.nb-tp .nb-empty-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--brand-tint);color:var(--action)}
.nb-tp .nb-empty-ic svg{width:24px;height:24px}
.nb-tp .nb-empty h2,.nb-tp .nb-empty h3{margin:0;font-size:19px;line-height:28px;font-weight:600;text-wrap:balance}
.nb-tp .nb-empty p{margin:0;max-width:38ch;color:var(--ink-secondary);text-wrap:pretty}
.nb-tp .nb-empty .nb-btn{align-self:stretch}

/* ── Locked note: a feature that opens later (activity threshold, school Plus). Never a blur over real data, never a price ── */
.nb-tp .nb-locked{display:flex;align-items:flex-start;gap:var(--space-3);margin:0;padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface-sunken);color:var(--ink-secondary);font-size:15px;line-height:24px}
.nb-tp .nb-locked svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--ink-muted)}
.nb-tp .nb-locked .nb-btn{margin-top:var(--space-3)}

/* ── Plus door for teachers and principals: «فعّل بلس» + «مجاني لك», never a price ── */
.nb-tp .nb-plus-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}

/* ── Owner note: one slim row (this page is the teacher's own, not the class link) ── */
.nb-tp .nb-notebar{display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--hairline);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--radius-md);background:var(--surface-sunken);font-size:13px;line-height:20px;color:var(--ink-secondary)}
.nb-tp .nb-notebar svg{flex:none;width:18px;height:18px;color:var(--ink-muted)}
.nb-tp .nb-notebar p{flex:1;margin:0;min-width:0}
.nb-tp .nb-notebar .nb-btn{flex:none;min-height:var(--tap-min);font-size:13px;padding-inline:var(--space-3)}

/* ── Status: a quiet on / off line (weekly send, Sunday summary) ── */
.nb-tp .nb-status{display:inline-flex;align-items:center;gap:var(--space-2);font-size:15px;line-height:22px;font-weight:500;color:var(--ink)}
.nb-tp .nb-status::before{content:"";width:8px;height:8px;border-radius:var(--radius-full);background:var(--brand)}
.nb-tp .nb-status[data-off]{color:var(--ink-muted)}
.nb-tp .nb-status[data-off]::before{background:transparent;border:1.5px solid var(--border-strong)}

/* ── Group: one block per mistake group in «قسّم فصلي حسب الأخطاء» ── */
.nb-tp .nb-groups{display:flex;flex-direction:column}
.nb-tp .nb-group{display:flex;flex-direction:column;gap:var(--space-2);padding-block:var(--space-4);border-top:1px solid var(--hairline)}
.nb-tp .nb-group:first-child{border-top:0;padding-top:0}
.nb-tp .nb-group-t{margin:0;font-size:16px;line-height:26px;font-weight:600}
.nb-tp .nb-group-m{margin:0;font-size:13px;line-height:20px;color:var(--ink-muted)}
.nb-tp .nb-group-n{margin:0;font-size:15px;line-height:24px;color:var(--ink-secondary)}
.nb-tp .nb-group .nb-btn{align-self:flex-start}

/* ── Steps: a numbered lesson outline (minutes + step), numbers in a neutral disc ── */
.nb-tp .nb-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);counter-reset:nbs}
.nb-tp .nb-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--space-3);align-items:start;font-size:16px;line-height:26px;counter-increment:nbs}
.nb-tp .nb-steps li::before{content:counter(nbs);display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-full);background:var(--surface-sunken);color:var(--ink-secondary);font-size:13px;font-weight:600}
.nb-tp .nb-card-deep .nb-steps li::before{background:color-mix(in srgb,var(--on-deep) 14%,var(--deep));color:var(--on-deep)}
.nb-tp .nb-steps small{display:block;font-size:13px;line-height:20px;color:var(--ink-muted)}
.nb-tp .nb-card-deep .nb-steps small{color:color-mix(in srgb,var(--on-deep) 78%,var(--deep))}

/* ── Week days: 7 squares (practised = brand, not = sunken), day initial under each ── */
.nb-tp .nb-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-2);max-width:360px}
.nb-tp .nb-day{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);font-size:13px;line-height:18px;color:var(--ink-muted)}
.nb-tp .nb-day i{display:grid;place-items:center;width:100%;max-width:40px;aspect-ratio:1;border-radius:var(--radius-sm);background:var(--surface-sunken)}
.nb-tp .nb-day[data-on] i{background:var(--brand)}
.nb-tp .nb-day[data-on] i::after{content:"";width:10px;height:5px;border-left:2px solid var(--on-action);border-bottom:2px solid var(--on-action);transform:rotate(-45deg) translate(1px,-1px)}
.nb-tp .nb-day[data-today]{color:var(--ink);font-weight:600}

/* ── Table: the teacher file and the principal's results file (numbers right-aligned in RTL = end) ── */
.nb-tp .nb-table-scroll{overflow-x:auto}
.nb-tp .nb-table{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.nb-tp .nb-table th{padding:var(--space-2) var(--space-3);text-align:start;font-size:13px;line-height:20px;font-weight:500;color:var(--ink-muted);border-bottom:1px solid var(--hairline);white-space:nowrap}
.nb-tp .nb-table td{padding:var(--space-3);border-bottom:1px solid var(--hairline);vertical-align:top}
.nb-tp .nb-table td.n,.nb-tp .nb-table th.n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.nb-tp .nb-table tr:last-child td{border-bottom:0}

/* ── Toast: one line on deep, with an optional undo ── */
.nb-tp .nb-toast{position:fixed;z-index:50;inset-inline:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));max-width:528px;margin-inline:auto;display:flex;align-items:center;gap:var(--space-3);min-height:48px;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--radius-md);background:var(--deep);color:var(--on-deep);box-shadow:var(--shadow-overlay);font-size:15px;line-height:22px}
.nb-tp .nb-toast button{flex:none;margin-inline-start:auto;min-height:var(--tap-min);padding-inline:var(--space-3);border:0;background:none;color:var(--on-deep);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (min-width:1024px){.nb-tp .nb-toast{bottom:var(--space-6)}}

/* ── Wide progress line with a label row (activity threshold, seats) ── */
.nb-tp .nb-meter{display:flex;flex-direction:column;gap:var(--space-2)}
.nb-tp .nb-meter-row{display:flex;justify-content:space-between;gap:var(--space-3);font-size:13px;line-height:20px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.nb-tp .nb-meter-track{height:8px;border-radius:var(--radius-full);background:var(--surface-sunken);overflow:hidden}
.nb-tp .nb-meter-track>i{display:block;height:100%;border-radius:inherit;background:var(--brand)}
.nb-tp .nb-card-deep .nb-meter-row{color:color-mix(in srgb,var(--on-deep) 78%,var(--deep))}

@media (prefers-reduced-motion:reduce){.nb-tp .nb-sheet{animation:none}}
/* collision resets: components.css .nb-sheet / .nb-table base values that the phase-3 versions do not set */
.nb-tp .nb-sheet{position:relative;inset:auto;z-index:auto;margin-inline:0}
.nb-tp .nb-table{overflow:visible;border:0;border-radius:0}
.nb-tp .nb-table th{background:none}
.nb-tp .nb-table td:first-child{font-weight:inherit;color:inherit}
@media (max-width:600px){.nb-tp .nb-table thead{display:table-header-group}.nb-tp .nb-table tr{display:table-row;padding:0;border-top:0}.nb-tp .nb-table td{display:table-cell;padding:var(--space-3);border-bottom:1px solid var(--hairline)}.nb-tp .nb-table td[data-l]::before{content:none}}
/* ==== END KAN-1740 teacher, school and parent components ==== */