/* V9: a single design system for subject journeys. Presentation only. */
:root{--journey-ink:#143d55;--journey-muted:#60788a;--journey-border:#d8e4e9;--journey-card:#fff;--journey-soft:#f5f9fa;--journey-primary:#087e82;--journey-radius:16px;--journey-shadow:0 4px 20px rgba(17,56,76,.055)}
/* Uniform page surfaces and readable typography */
#homeDomains,#domainListing{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;align-items:stretch}
#homeDomains>*,#domainListing>*{min-width:0;min-height:132px;border:1px solid var(--journey-border)!important;border-radius:var(--journey-radius)!important;background:var(--journey-card)!important;box-shadow:var(--journey-shadow)!important;transition:border-color .15s ease,transform .15s ease}
#homeDomains>*:hover,#domainListing>*:hover{border-color:#8ab9bb!important;transform:translateY(-1px)}
.criterionSelectionPage,.criterionPageHeader,.quizHead,.nafsQuizHead{border:1px solid var(--journey-border)!important;border-radius:var(--journey-radius)!important;background:var(--journey-card)!important;box-shadow:var(--journey-shadow)!important}
.criterionSelectionPage{padding:clamp(16px,2.6vw,28px)!important}
.criterionSelectionPage .row.between,.quizHead .row.between,.nafsQuizHead .between{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px 18px}
.criterionSelectionPage .title,.quizHead h1,.nafsQuizHead h2{color:var(--journey-ink)!important;font-weight:800!important;line-height:1.55!important;overflow-wrap:anywhere}
.criterionSelectionPage .overline,.nafsQuizHead .eyebrow,.quizHead .overline,.criterionSmallTitle{color:var(--journey-muted)!important;letter-spacing:0!important}
.criterionSelectionPage .minorTitle{font-weight:750!important;color:var(--journey-ink)!important;margin-block:20px 9px!important}
/* Both kinds of criterion selectors use identical controls */
#domainTabs,#criterionTabs,#criterionListing{display:flex!important;flex-wrap:wrap;gap:10px!important;align-items:stretch}
#domainTabs>*,#criterionTabs>*,#criterionListing>*{max-width:100%;overflow-wrap:anywhere;border-radius:12px!important;border:1px solid var(--journey-border)!important;box-shadow:none!important;min-height:42px}
#domainTabs button,#criterionTabs button,#criterionListing button{line-height:1.6!important;white-space:normal!important;text-align:right!important}
#domainTabs .active,#criterionTabs .active,#criterionListing .active,#domainTabs [aria-selected=true],#criterionTabs [aria-selected=true],#criterionListing [aria-selected=true]{border-color:var(--journey-primary)!important;background:#e6f4f3!important;color:#085e65!important}
/* Training/exam heading and progress share shapes, not score logic */
.quizHead,.nafsQuizHead{padding:clamp(14px,2vw,22px)!important;margin-block:12px!important}
.quizHead .track,.nafsQuizHead .bar,.nafsQuizTrack{height:9px!important;border-radius:999px!important;background:#e3edf0!important;overflow:hidden!important;box-shadow:none!important}
.quizHead .track>b,.nafsQuizTrack>.fill,.nafsQuizHead .bar>.fill{height:100%!important;border-radius:999px!important;background:var(--journey-primary)!important;transition:width .2s ease}
.quizHead .pill,.nafsQuizHead .pill{border-radius:999px!important;font-weight:750!important;padding:6px 12px!important}
.criterionPageHeader{padding:14px 18px!important;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* Keep navigation actions easy to tap */
.criterionSelectionPage .btn,.criterionPageHeader .btn,.quizHead .btn,.nafsQuizHead .btn{min-height:40px!important;border-radius:11px!important}
.criterionSelectionPage :is(button,a):focus-visible,.criterionPageHeader :is(button,a):focus-visible,.quizHead :is(button,a):focus-visible,.nafsQuizHead :is(button,a):focus-visible{outline:3px solid #2a9d9e!important;outline-offset:3px}
@media(max-width:700px){#homeDomains,#domainListing{grid-template-columns:1fr!important;gap:12px!important}#homeDomains>*,#domainListing>*{min-height:90px}.criterionSelectionPage,.quizHead,.nafsQuizHead{padding:15px!important}#domainTabs>*,#criterionTabs>*,#criterionListing>*{width:100%;flex:1 1 100%}.criterionSelectionPage .row.between>*,.nafsQuizHead .between>*,.quizHead .row.between>*{max-width:100%}}
@media(prefers-reduced-motion:reduce){#homeDomains>*,#domainListing>*,.quizHead .track>b,.nafsQuizTrack>.fill{transition:none!important}}
@media print{#homeDomains>*,#domainListing>*,.criterionSelectionPage,.criterionPageHeader,.quizHead,.nafsQuizHead{box-shadow:none!important;transform:none!important}}