/* NAFS unified theme — presentation only. Loaded last on every page; never touches questions, answers or scoring. */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
:root{--nf-navy:#17224d;--nf-indigo:#26357a;--nf-indigo2:#3b4fa8;--nf-teal:#178da9;--nf-green:#279977;--nf-gold:#efa24e;--nf-ink:#1c2540;--nf-mute:#5b667f;--nf-line:#e1e7f1;--nf-bg:#f4f6fb;--nf-r:20px;--nf-shadow:0 1px 2px rgba(31,42,68,.05),0 10px 28px rgba(40,50,100,.08);--nf-font:Tajawal,"Segoe UI",Tahoma,Arial,sans-serif;font-family:var(--nf-font)}
@media screen{
html{background:var(--nf-bg)!important}
html body{font-family:var(--nf-font);color:var(--nf-ink);line-height:1.8;min-height:100vh;background:#f5f7fa!important}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid #62b1d0;outline-offset:3px}

/* ===== Unified title bar (identical on all four pages) ===== */
.topstripe,.ribbon{display:block;height:4px;background:linear-gradient(to left,#26357a,#0e7c93,#1f8a63,#efa24e)!important}
header.header,header.head{background:rgba(255,255,255,.92)!important;border-bottom:1px solid var(--nf-line)!important;box-shadow:0 1px 0 #fff inset;position:relative}
header.header .headinner,header.head .headbar{max-width:1120px!important;width:100%;margin:0 auto!important;padding:12px 22px!important;min-height:92px!important;display:flex;align-items:center;justify-content:flex-start;gap:16px}
header .brand,header .branding{display:flex;align-items:center;gap:16px}
header .logos{display:flex;align-items:center;gap:12px;padding-inline-end:16px;margin:0;border-inline-end:1px solid var(--nf-line)}
header .logos img:first-child{width:96px;max-height:58px;object-fit:contain}
header .logos img:last-child{width:58px;max-height:58px;object-fit:contain}
header .brand-copy{display:flex;flex-direction:column;gap:0;align-items:flex-start}
header .brand-copy,header .brand-copy *{font-family:var(--nf-font)!important}
header .brand-copy .brandtitle{font-size:22px!important;font-weight:800!important;line-height:1.3!important;color:var(--nf-indigo)!important}
header .brand-copy .school{font-size:14px!important;font-weight:700!important;line-height:1.5!important;color:var(--nf-teal)!important}
header .brand-copy .brand-grade{display:inline-block;margin-top:3px;font-size:11.5px!important;font-weight:700!important;color:#16684f!important;background:#e6f6ef;border-radius:20px;padding:0 10px;line-height:1.7}

/* ===== Shared page rhythm ===== */
.portal-shell{max-width:1120px!important;padding:0 22px!important}
.btn{white-space:nowrap}
.container{max-width:1120px}
main.container,.container.stack{padding-top:26px}
.card{border:1px solid var(--nf-line);border-radius:var(--nf-r);box-shadow:var(--nf-shadow);background:#fff}
.intro{border-inline-start:6px solid var(--nf-indigo2)}
.intro h1,.intro h2{color:var(--nf-indigo)}
.eyebrow,.overline{color:var(--nf-teal);font-weight:800;font-size:13px}
h2,h3{color:var(--nf-indigo)}
.muted{color:var(--nf-mute)}


/* ===== Registered-student box (math design is the base for every section) ===== */
.pn-person{display:flex!important;align-items:center;gap:10px;padding:6px 16px 6px 10px!important;border:1px solid #cfe9dc!important;background:#f2fbf6!important;border-radius:14px!important}
.pn-person .pn-avatar{width:38px;height:38px;border-radius:11px;background:#dff4e8!important;color:#16684f!important;font-size:19px;font-weight:800;display:grid;place-items:center}
#pnIdentity{display:flex;flex-direction:column;line-height:1.35;text-align:start}
#pnIdentity .pn-label{font-size:11px;font-weight:700;color:#16684f}
#pnIdentity strong{font-size:14px;color:var(--nf-ink)}
#pnIdentity span{font-size:12px;color:var(--nf-mute)}
.pn-switch,#switchStudent{display:none!important}
/* Math: entry happens once on the home page, so the in-page student form/picker is not shown */
#profileCard .profileForm,#profileCard .profileSwitch>span,#profileCard #studentPicker,#profileCard>h3{display:none!important}
#profileCard #welcomeText,#profileCard #studentBadge{display:none!important}
#profileCard .profileSwitch{margin-top:0}


/* ===== Colored app-style icons in the main navigation (desktop bar and phone bottom bar) ===== */
.pn-link{--ic:linear-gradient(135deg,#26357a,#4d62c8);--ring:#26357a33}
.pn-link[data-portal-go="mathematics"]{--ic:linear-gradient(135deg,#4a3fb0,#8a78ea);--ring:#4a3fb033}
.pn-link[data-portal-go="science"]{--ic:linear-gradient(135deg,#1c8a62,#3cc593);--ring:#1c8a6233}
.pn-link[data-portal-go="reading"]{--ic:linear-gradient(135deg,#0d7a92,#35bdd8);--ring:#0d7a9233}
.pn-link[data-portal-go="portfolio"]{--ic:linear-gradient(135deg,#c57a22,#f3b95f);--ring:#c57a2233}
.portal-shell .pn-link svg,.pn-mobile .pn-link svg{box-sizing:border-box;width:32px!important;height:32px!important;padding:7px;border-radius:10px;background:var(--ic)!important;stroke:#fff!important;stroke-width:1.9!important;box-shadow:0 2px 6px rgba(23,34,77,.18),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s,box-shadow .15s}
.portal-shell .pn-link:hover svg{transform:translateY(-1px) scale(1.05)}
.portal-shell .pn-link.active svg,.pn-mobile .pn-link.active svg{box-shadow:0 0 0 3px var(--ring),0 3px 8px rgba(23,34,77,.22),inset 0 1px 0 rgba(255,255,255,.35)}
.portal-shell .pn-link{gap:10px;padding:6px 14px 6px 10px;min-height:46px}
.pn-mobile .pn-link svg{width:34px!important;height:34px!important}
.pn-mobile .pn-link{gap:2px;min-height:62px}


/* ===== Unified typography and colors (navy identity) ===== */
main :is(h1,h2,h3):not(.portal-entry-intro *):not(.portal-dash-head *){color:var(--nf-navy)!important}
.eyebrow,.overline,.card .kicker{color:#0e7c93!important}
.muted,.miniNote,.nafsNote,.nafsQuestionAside .muted,.qAside .muted{color:var(--nf-mute)!important}
.nafsNote,.miniNote{font-size:13px!important;line-height:1.7}

/* ===== Question tabs (numbered navigator): same look in every subject ===== */
.numbers,.nafsQuestionNumbers{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px!important;margin:10px 0 14px}
.numbers .num,.nafsQuestionNumbers .nafsNumber{position:relative;box-sizing:border-box;width:100%!important;min-width:0!important;height:42px!important;padding:0!important;display:grid;place-items:center;border:1.5px solid #d3dbea!important;border-radius:11px!important;background:#fff!important;color:#44506b!important;font-size:15px!important;font-weight:800!important;line-height:1;box-shadow:none!important;transition:border-color .15s,background .15s,transform .15s}
.numbers .num:hover,.nafsQuestionNumbers .nafsNumber:hover{border-color:var(--nf-indigo2)!important;transform:translateY(-1px)}
.numbers .num.answered,.nafsQuestionNumbers .nafsNumber.answered{background:#e8f7f0!important;border-color:#86cbad!important;color:#16684f!important}
.numbers .num.answered:after,.nafsQuestionNumbers .nafsNumber.answered:after{content:"";position:absolute;top:4px;inset-inline-end:4px;width:7px;height:7px;border-radius:50%;background:#2a9771}
.numbers .num.active,.nafsQuestionNumbers .nafsNumber.active{background:var(--nf-indigo)!important;border-color:var(--nf-indigo)!important;color:#fff!important;box-shadow:0 4px 12px #26357a40!important}
.numbers .num.active:after,.nafsQuestionNumbers .nafsNumber.active:after{background:#7fe3bf}
.qAside,.nafsQuestionAside{border-radius:var(--nf-r)}
.qAside h3,.nafsQuestionAside h3{font-size:18px}

/* ===== Answer choices: one state language (neutral, selected, correct, wrong) ===== */
.option,.choice{border:1.5px solid #d3dbea!important;background:#fff!important;color:#1d4ea8!important;font-weight:600;border-radius:14px!important;transition:border-color .15s,background .15s,box-shadow .15s}
.option:hover:not(:disabled),.choice:hover:not(:disabled){border-color:var(--nf-indigo2)!important;background:#f6f8fe!important}
.option.selected,.choice.selected{border-color:var(--nf-indigo)!important;background:#f1f4fd!important;box-shadow:0 0 0 3px #26357a1a}
.option.correct,.choice.correct{border-color:#2a9771!important;background:#e8f8f1!important;box-shadow:none}
.option.wrong,.option.selected.wrong,.choice.incorrect,.choice.selected.incorrect{border-color:#c9525c!important;background:#fdeef0!important;box-shadow:none}
.option .letter,.choice .letter{background:#eef1f9;color:var(--nf-indigo);font-weight:800;border-radius:9px}
.option.correct .letter,.choice.correct .letter{background:#cdeedd;color:#16684f}
.option.wrong .letter,.option.selected.wrong .letter,.choice.incorrect .letter,.choice.selected.incorrect .letter{background:#f8d6da;color:#a23a45}

/* ===== Feedback blocks ===== */
.feedback,.feed{border-radius:14px}
.feedback.right{background:#e8f8f1;border:1px solid #9ad7bd;color:#16684f}
.feedback.wrong{background:#fdeef0;border:1px solid #ecb3b9;color:#8f3a45}


/* ===== Quiz progress bar: same navy-blue fill in every subject ===== */
.track,.nafsQuizTrack{height:10px;border-radius:10px;background:#e3e9f3}
.track>b,.nafsQuizTrack>.fill{background:linear-gradient(90deg,#26357a,#2f7fb0)!important;border-radius:10px}

/* ===== Buttons and fields ===== */
.btn,.linkbtn{min-height:44px;border:1.5px solid #d3dbea;border-radius:13px;font-weight:700;color:var(--nf-indigo);transition:border-color .15s,box-shadow .15s,background .15s,transform .15s}
.btn:hover:not(:disabled),.linkbtn:hover{border-color:var(--nf-indigo2);box-shadow:0 6px 16px #26357a1f}
.btn.primary,.linkbtn.primary{background:var(--nf-navy);border-color:var(--nf-navy);color:#fff}
.btn.primary:hover:not(:disabled){background:#101a3d}
/* one primary-button look: navy (page CSS used a purple gradient) */
.btn.primary,.linkbtn.primary{background-color:var(--nf-navy)!important;background-image:linear-gradient(115deg,#17224d,#26357a)!important;border-color:var(--nf-navy)!important;color:#fff!important;box-shadow:0 4px 12px #17224d33}
.btn.primary:hover:not(:disabled){background-image:linear-gradient(115deg,#101a3d,#1d2b66)!important}
.btn:disabled{opacity:.5}
.btn.secondary{background:#e9f7f1;border-color:#b9e4d2;color:#16684f}
.btn.small{min-height:40px}
.field label,label{font-weight:700}
.field input,.field select,.profileForm input,.profileSwitch select,.card input[type=text]{min-height:48px;border:1.5px solid #ccd6e6;border-radius:14px;background:#fbfcfe;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.profileForm input:focus,.profileSwitch select:focus{outline:0;border-color:var(--nf-indigo2);box-shadow:0 0 0 4px #26357a22;background:#fff}

/* ===== Domains, standards and progress ===== */
/* Fix: domain fill used var(--mat) which is undefined outside home cards, so the bar was invisible */
.domain-btn{--mat:#238aa8}
.portal-card-track{height:10px;background:#e3e9f3}
.portal-card-track b{background:linear-gradient(90deg,var(--mat,#238aa8),#25ad94)!important;min-width:0}
.portal-card-track b,.nafs-ach-fill,.fill,.track>b{transform-origin:right center;animation:nfGrow .8s ease-out}
@keyframes nfGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.domain-btn,.domainCard,.criterium,.modeCard{border-radius:18px;border:1.5px solid var(--nf-line);transition:border-color .15s,box-shadow .15s,transform .15s}
.domain-btn:hover,.domainCard:hover,.criterium:hover,.modeCard:hover{border-color:var(--nf-indigo2);box-shadow:0 10px 24px #28326418;transform:translateY(-1px)}
.bar,.track,.domainAchievementTrack{border-radius:10px}
.fill{background:linear-gradient(90deg,var(--nf-teal),var(--nf-green))}
.stat,.metrico{border-radius:14px}
.pill,.chip{border-radius:20px}

/* ===== Questions ===== */
/* Answered state: disabled choices stay readable (browser default dimmed them to 30% text) */
button.choice:disabled,button.option:disabled,.choice:disabled,.option:disabled{opacity:1!important;color:#1d4ea8!important;cursor:default}
.option>*:not(.letter),.choice>*:not(.letter){color:#1d4ea8!important}
button.choice:disabled:not(.selected):not(.correct):not(.incorrect),button.option:disabled:not(.selected):not(.correct):not(.incorrect):not(.isRight):not(.isWrong){opacity:.78!important}
.choice.correct,.option.correct,.option.isRight{border-color:#2a9771!important;background:#e8f8f1}
.choice.incorrect,.option.isWrong{border-color:#c9666d!important;background:#fff1f2}


.question-card,.quizFrame,.question{border-radius:var(--nf-r)}
.choice,.option{border-radius:14px;transition:border-color .15s,background .15s}
.choice:hover:not(.correct):not(.incorrect),.option:hover{border-color:var(--nf-indigo2)}
.choice .letter{color:var(--nf-indigo)}
.feed,.feedback{border-radius:14px}

/* ===== Mobile ===== */
@media(max-width:700px){
 header.header .headinner,header.head .headbar{padding:10px 14px!important;min-height:78px!important;gap:10px}

 /* math report header: logos must not exceed the screen */
 .reportLogos{flex-wrap:wrap;max-width:100%}.reportLogos img,.reportHeader img{max-width:46%!important;height:auto!important;max-height:56px!important;object-fit:contain}
 .reportPaper{max-width:100%;overflow-x:auto}
 /* registered-student box spans the content width on phones */
 .portal-shell,.pn-wrap{width:100%}
 .portal-shell .pn-wrap,.pn-wrap{display:flex;flex-wrap:wrap}
 .pn-person{flex:1 1 100%;width:100%;margin:0!important}
 #profileCard{padding:6px 16px!important}
 #profileCard .manageProfiles{border-top:0;margin:0}
 header .logos{gap:8px;padding-inline-end:10px}
 header .logos img:first-child{width:70px}header .logos img:last-child{width:44px}
 header .brand-copy .brandtitle{font-size:17px!important}header .brand-copy .school{font-size:12.5px!important}
}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Print: math report logos were rendering at full image size (also in the original files) */
@media print{.reportLogos{display:flex!important;gap:12px;align-items:center}.reportLogos img{height:49px!important;width:auto!important;max-width:84px!important;max-height:49px!important;object-fit:contain}}

/* ===== Unified print header for every report (math, reading, science; standard, indicator and portfolio) ===== */
@media print{
 .reportHeader{display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;padding:0 0 12px!important;margin:0 0 14px!important;border-bottom:2px solid #565099!important}
 .reportHeader .head-identity,.reportHeader>.row{flex:0 0 285px!important;min-width:285px!important;max-width:285px;display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:10px!important;margin:0!important}
 .reportHeader .reportLogos{flex:0 0 auto!important;display:flex!important;gap:8px!important;align-items:center!important}
 .reportHeader .reportLogos img{height:49px!important;width:auto!important;max-width:84px!important;max-height:49px!important;object-fit:contain}
 .reportHeader .head-identity,.reportHeader>.row{flex-wrap:nowrap!important}
 .reportHeader .reportLogos+div{min-width:0!important;flex:1 1 0!important}
 .reportHeader p,.reportHeader strong{font-size:10.5px!important;line-height:1.6!important;margin:0!important;color:#58657a!important}
 .reportHeader p b,.reportHeader p strong,.reportHeader strong{font-weight:800!important;color:#343678!important}
 .reportHeader>div:not(.row):not(.head-identity){flex:1 1 0!important;min-width:0!important;text-align:right!important}
 .reportHeader h2{font-size:17px!important;line-height:1.55!important;color:#403886!important;margin:0 0 4px!important;overflow-wrap:anywhere}
 .nafs-print-sheet h2,.nafs-print-sheet h3{break-after:avoid;page-break-after:avoid}
 #reportView>.container{padding-left:0!important;padding-right:0!important}
}