's page padding would inset the navy surface. Hide/strip both. */ body[data-view="dashboardSection"] .app-header, body[data-view="statsSection"] .app-header, body[data-view="printSection"] .app-header, body[data-view="printDetailSection"] .app-header, body[data-view="askAnythingSection"] .app-header, body[data-view="examCategoriesSection"] .app-header, body[data-view="examTypesSection"] .app-header, body[data-view="subjectsSection"] .app-header { display: none; } body[data-view="dashboardSection"] main, body[data-view="statsSection"] main, body[data-view="printSection"] main, body[data-view="printDetailSection"] main, body[data-view="askAnythingSection"] main, body[data-view="examCategoriesSection"] main, body[data-view="examTypesSection"] main, body[data-view="subjectsSection"] main { padding: 0; } /* The page ground itself goes navy on shell views — the legacy violet/indigo gradient must never leak around the shell surface (edges, overscroll). */ body[data-view="dashboardSection"], body[data-view="statsSection"], body[data-view="printSection"], body[data-view="printDetailSection"], body[data-view="askAnythingSection"], body[data-view="examCategoriesSection"], body[data-view="examTypesSection"], body[data-view="subjectsSection"] { background: var(--sh-nb); } /* Mobile: the tab bar is fixed at the bottom over EVERY logged-in section, so legacy sections (Practice/Explore/Ask) need bottom clearance or their last content hides behind it. Dashboard/stats already clear it via .sh-content's own 84px bottom, and keep

padding at 0 — re-assert that so they don't double up. */ @media (max-width: 1023px) { body.shell-on main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } body[data-view="dashboardSection"] main, body[data-view="statsSection"] main, body[data-view="printSection"] main, body[data-view="printDetailSection"] main, body[data-view="askAnythingSection"] main, body[data-view="examCategoriesSection"] main, body[data-view="examTypesSection"] main, body[data-view="subjectsSection"] main { padding-bottom: 0; } } /* desktop sidebar */ .sh-sidebar { display: none; } @media (min-width: 1024px) { .sh-tabbar { display: none !important; } .sh-sidebar { display: flex; flex-direction: column; background: #071829; border-right: 1px solid var(--sh-hairD); padding: 18px 14px; position: fixed; left: 0; top: 0; bottom: 0; width: 208px; z-index: 40; } :root[data-theme="light"] .sh-sidebar { background: #EDE6D6; } .sh-sidenav { margin-top: 22px; display: grid; gap: 2px; } .sh-sidenav button { font-size: 13px; font-weight: 600; color: var(--sh-tm); padding: 9px 11px; border-radius: 7px; text-align: left; background: transparent; border: 0; cursor: pointer; } .sh-sidenav button[aria-current="page"] { background: var(--sh-np2); color: var(--sh-gold); } /* The sidebar is fixed and shows on EVERY logged-in section. Reserve its width on so the fixed sidebar never overlaps content — on the dashboard AND on legacy sections (Practice/Explore/Ask). Body padding leaves fixed elements (the sidebar itself, at left:0) untouched, so the sidebar sits exactly in the reserved gutter. Keyed to shell-on so logged-out pages are unaffected. */ body.shell-on { padding-left: 208px; } /* Centered in the post-sidebar viewport (review triage A22): margin:0 pinned everything left and stranded a large dead zone on wide monitors. */ .sh-root .sh-content { padding: 0 22px 26px; max-width: 1080px; margin: 0 auto; } } /* More sheet (phone) */ .sh-sheet { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--sh-np); border-top: 1px solid var(--sh-hairD); border-radius: 14px 14px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 4px; } .sh-sheet button, .sh-sheet a { font-size: 14px; font-weight: 600; color: var(--sh-t); padding: 12px 11px; border-radius: 7px; background: transparent; border: 0; text-align: left; cursor: pointer; text-decoration: none; display: block; } .sh-sheet button:hover, .sh-sheet a:hover { background: var(--sh-np2); } .sh-sheet.hidden { display: none; } /* skeletons (loading — never fake zeros) */ .sh-skel { border-radius: 4px; background: var(--sh-np2); animation: sh-pulse 1.2s ease-in-out infinite alternate; } @keyframes sh-pulse { from { opacity: .45; } to { opacity: .9; } } /* motion: stagger + bar fill, all reduced-motion safe */ @media (prefers-reduced-motion: no-preference) { .sh-stagger > * { animation: sh-rise .4s ease-out both; } .sh-stagger > *:nth-child(2) { animation-delay: 60ms; } .sh-stagger > *:nth-child(3) { animation-delay: 120ms; } .sh-stagger > *:nth-child(4) { animation-delay: 180ms; } .sh-stagger > *:nth-child(5) { animation-delay: 240ms; } .sh-stagger > *:nth-child(6) { animation-delay: 300ms; } .sh-bar i { transform-origin: left; animation: sh-fill .8s ease-out both; } .sh-cta:active, .sh-q:active, .sh-chip:active { transform: scale(.98); } @keyframes sh-rise { from { opacity: 0; transform: translateY(6px); } } @keyframes sh-fill { from { transform: scaleX(0); } } } @media (prefers-reduced-motion: reduce) { .sh-skel { animation: none; } } .sh-root a:focus-visible, .sh-root button:focus-visible, .sh-root select:focus-visible, .sh-tabbar button:focus-visible, .sh-sidebar button:focus-visible, .sh-sheet button:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; } /* ===== Stats page (tier-map Rev 4) ========================================= */ /* Page title — Stats gets its own heading hierarchy (larger than the dashboard wordmark), matching the Rev 4 mockup. */ .sh-pagetitle { font-size: 30px; font-weight: 600; margin: 0; line-height: 1.1; } /* Practice Overview hero (FREE, Rev 4 mockup). Two columns split by a divider: progress (answered / pool) | accuracy (big % + ring with a target glyph), the accuracy side CENTRED on desktop; a centered "N practice sessions" footer under a rule. The ring is an amber→orange arc (owner-approved 2026-08-23): a CONSTANT accent, not a value judgment — the same orange shows at any score, so it stays honest (supersedes the earlier gold-only note). */ .sh-ov-main { display: flex; flex-direction: column; gap: 18px; } .sh-overview-prog { min-width: 0; } .sh-overview-acc { display: flex; flex-direction: column; min-width: 0; } /* All hero supporting text reads in the solid hero-blue (the big number + title stay --sh-ink and lead by weight). */ .sh-stats-hero .sh-mut { color: var(--sh-heroblue); } .sh-ovdiv { border-top: 1px solid var(--sh-hairC); } .sh-ovfoot { border-top: 1px solid var(--sh-hairC); margin-top: 14px; padding-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--sh-heroblue); } .sh-bignum { font-family: Georgia, "Times New Roman", serif; font-size: 46px; font-weight: 700; color: var(--sh-ink); line-height: 1; letter-spacing: -.015em; } @media (max-width: 600px) { .sh-bignum { font-size: 36px; } } .sh-ring { position: relative; width: 104px; height: 104px; border-radius: 999px; flex: none; background: conic-gradient(#E9A24A, #DA7A22 calc(var(--p, 0) * 1%), var(--sh-hairC) 0); } .sh-ring > span { position: absolute; inset: 10px; border-radius: 999px; background: var(--sh-ivory); display: grid; place-items: center; } /* Thicker progress bar with a knob at the fill head (hero only — the dashboard coverage bars stay slim). */ .sh-stats-hero .sh-bar { height: 9px; border-radius: 99px; overflow: visible; background: rgba(11, 41, 72, .10); } .sh-stats-hero .sh-bar i { border-radius: 99px; background: var(--sh-gold); position: relative; } .sh-stats-hero .sh-bar i::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 50%; background: var(--sh-gold); border: 3px solid var(--sh-ivory); box-shadow: 0 1px 3px rgba(11, 41, 72, .25); } @media (min-width: 720px) { .sh-ov-main { flex-direction: row; align-items: stretch; gap: 24px; } .sh-overview-prog { flex: 1 1 0; } .sh-overview-acc { flex: 1 1 0; justify-content: center; align-items: center; text-align: center; } .sh-ovdiv { border-top: 0; border-left: 1px solid var(--sh-hairC); } } /* Subject Performance is a NAVY premium card (Rev 4 mockup): a gold-bordered dark panel (#shStatsTable carries .sh-panelD .sh-panelP). Its inner parts are styled for the dark ground BY DEFAULT and flipped for the light toggle in the :root[data-theme="light"] block below. */ .sh-panelP { border: 1.5px solid var(--sh-gold); box-shadow: 0 0 0 3px rgba(217, 164, 65, .07); } /* Premium badge (crown + label) — orange (owner, 2026-08-23), beside the title. */ .sh-prem { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-orange); border: 1px solid color-mix(in srgb, var(--sh-orange) 48%, transparent); border-radius: 999px; padding: 3px 8px; white-space: nowrap; } /* Readiness bands — the ONLY semantic red/orange/yellow/green in the shell, permitted here as a gated composite (Rev 4). Never color-alone: every pill carries a dot AND its band NAME. Default tones sit on the navy card; the light-theme block restores darker tones for the ivory ground. */ .sh-band { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; } .sh-band .dot { width: 7px; height: 7px; border-radius: 999px; flex: none; } .sh-band--not_ready { background: rgba(234, 91, 96, .16); color: #F4A9AD; border: 1px solid rgba(234, 91, 96, .45); } .sh-band--not_ready .dot { background: #EA5B60; } .sh-band--needs_review { background: rgba(224, 138, 43, .16); color: #F0BC7E; border: 1px solid rgba(224, 138, 43, .45); } .sh-band--needs_review .dot { background: #E08A2B; } .sh-band--approaching { background: rgba(217, 164, 65, .16); color: #E9CB74; border: 1px solid rgba(217, 164, 65, .45); } .sh-band--approaching .dot { background: #D9A441; } .sh-band--exam_ready { background: rgba(46, 169, 104, .16); color: #82D9A6; border: 1px solid rgba(46, 169, 104, .45); } .sh-band--exam_ready .dot { background: #2FA968; } .sh-band--locked { background: rgba(247, 240, 227, .06); color: var(--sh-tm); border: 1px solid var(--sh-hairD); } .sh-band--locked .dot { background: var(--sh-tm); } /* Practice → action button (opens the setup modal pre-scoped to the subject). */ .sh-spbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--sh-gold); background: transparent; cursor: pointer; border: 1px solid color-mix(in srgb, var(--sh-gold) 50%, transparent); border-radius: 999px; padding: 6px 13px; white-space: nowrap; transition: background .15s ease, color .15s ease; } .sh-spbtn:hover { background: var(--sh-gold); color: var(--sh-nb); } .sh-spbtn--block { width: 100%; justify-content: center; padding: 9px; min-height: 44px; } /* Subject Performance: desktop TABLE vs mobile stacked CARDS (Rev 4). Text reads from the theme-flipping tokens, so it works on the navy card by default and on the ivory card under the light toggle. */ .sh-sp-mob { display: grid; gap: 10px; } .sh-sp-desk { display: none; } .sh-sptable { width: 100%; border-collapse: collapse; font-size: 12.5px; } .sh-sptable th { text-align: right; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-tm); font-weight: 700; padding: 0 10px 9px 10px; vertical-align: bottom; border-bottom: 1px solid var(--sh-hairD); } .sh-sptable th:first-child { text-align: left; padding-left: 12px; } .sh-sptable th:last-child { padding-right: 12px; } .sh-sptable td { padding: 10px; text-align: right; vertical-align: middle; color: var(--sh-t); } .sh-sptable td:first-child { text-align: left; padding-left: 12px; font-weight: 700; } .sh-sptable td:last-child { padding-right: 12px; } /* Zebra striping (owner mockup 2026-08-23): every other row a lighter navy — token-driven, so it flips to a darker cream on the light theme's ivory card. */ .sh-sptable tr.sh-sprow--alt td { background: var(--sh-np2); } .sh-sptable tr.sh-sprow--alt td:first-child { border-radius: 7px 0 0 7px; } .sh-sptable tr.sh-sprow--alt td:last-child { border-radius: 0 7px 7px 0; } .sh-sptable .sub { font-size: 10px; font-weight: 600; color: var(--sh-tm); } .sh-spinfo { background: none; border: 0; padding: 0; margin-left: 3px; line-height: 1; cursor: help; color: var(--sh-gold); font-weight: 700; font-size: 12px; } .sh-spcard { background: var(--sh-np2); border: 1px solid var(--sh-hairD); border-radius: 9px; padding: 11px 12px; } .sh-spcard-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; } .sh-spcard-h b { font-size: 13.5px; color: var(--sh-t); } .sh-spgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin-bottom: 11px; } .sh-spstat .l { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sh-tm); } .sh-spstat .v { font-size: 15px; font-weight: 700; color: var(--sh-t); margin-top: 1px; } .sh-spstat .v small { font-size: 10px; font-weight: 600; color: var(--sh-tm); } /* Readiness legend (footer of the premium panel). */ .sh-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; } .sh-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--sh-tm); } .sh-legend i { width: 8px; height: 8px; border-radius: 999px; flex: none; } /* Light-theme toggle: the navy premium card flips to ivory, so restore the darker gold + darker band text that read on the light ground. */ :root[data-theme="light"] .sh-panelP { border-color: var(--sh-goldC); box-shadow: 0 0 0 3px rgba(138, 97, 24, .06); } :root[data-theme="light"] .sh-prem { color: var(--sh-orangeC); border-color: color-mix(in srgb, var(--sh-orangeC) 45%, transparent); } :root[data-theme="light"] .sh-spinfo { color: var(--sh-goldC); } :root[data-theme="light"] .sh-spbtn { color: var(--sh-goldC); border-color: color-mix(in srgb, var(--sh-goldC) 45%, transparent); } :root[data-theme="light"] .sh-spbtn:hover { background: var(--sh-goldC); color: var(--sh-ivory); } :root[data-theme="light"] .sh-band--not_ready { background: rgba(198, 36, 43, .11); color: #9A1B21; border-color: rgba(198, 36, 43, .38); } :root[data-theme="light"] .sh-band--not_ready .dot { background: #C6242B; } :root[data-theme="light"] .sh-band--needs_review { background: rgba(180, 83, 9, .12); color: #8A4708; border-color: rgba(180, 83, 9, .40); } :root[data-theme="light"] .sh-band--needs_review .dot { background: #C2610E; } :root[data-theme="light"] .sh-band--approaching { background: rgba(161, 122, 6, .15); color: #6F5205; border-color: rgba(161, 122, 6, .42); } :root[data-theme="light"] .sh-band--approaching .dot { background: #C79A16; } :root[data-theme="light"] .sh-band--exam_ready { background: rgba(21, 128, 61, .12); color: #146436; border-color: rgba(21, 128, 61, .40); } :root[data-theme="light"] .sh-band--exam_ready .dot { background: #1E7A46; } /* ===== Print Practice Tests page (owner mockup 2026-08-23) ================== */ .sh-print-top { display: grid; gap: 12px; } @media (min-width: 1024px) { .sh-print-top { display: flex; align-items: stretch; } .sh-print-create { flex: 1 1 0; min-width: 0; } .sh-print-k2c { flex: 0 0 clamp(320px, 40%, 440px); } } /* Create panel (ivory). */ .sh-print-head { display: flex; align-items: center; gap: 10px; } .sh-print-head .sh-serif { font-size: 20px; font-weight: 700; color: var(--sh-ink); } .sh-print-sub { font-size: 12.5px; margin-top: 4px; } .sh-print-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 16px; } .sh-print-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .sh-print-full { grid-column: 1 / -1; } .sh-print-lbl { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sh-panel-ink-mut); } .sh-print-select { width: 100%; font: inherit; font-size: 13.5px; color: var(--sh-ink); background: #fff; border: 1px solid var(--sh-hairC); border-radius: 8px; padding: 10px 12px; cursor: pointer; } :root[data-theme="light"] .sh-print-select { background: #fff; } .sh-print-select:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 1px; } .sh-print-reassure { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--sh-panel-ink-mut); } .sh-print-remaining { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--sh-ink); } /* K2C explainer (navy). */ .sh-print-k2chead { display: flex; align-items: center; gap: 12px; } .sh-print-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-gold); } .sh-print-k2ctitle { font-size: 20px; font-weight: 700; color: var(--sh-t); margin-top: 2px; } .sh-print-k2csub { font-size: 12.5px; margin-top: 10px; } .sh-print-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; } .sh-print-steps li { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; color: var(--sh-t); } .sh-print-stepnum { flex: none; width: 24px; height: 24px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sh-gold) 55%, transparent); color: var(--sh-gold); font-size: 12px; font-weight: 800; display: grid; place-items: center; } .sh-print-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 13px; border: 1px solid var(--sh-hairD); border-radius: 9px; background: var(--sh-np2); font-size: 12px; color: var(--sh-tm); line-height: 1.45; } @media (max-width: 600px) { .sh-print-fields { grid-template-columns: 1fr; } } /* Your Printed Tests panel. */ .sh-print-histhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .sh-print-search { display: flex; gap: 8px; } .sh-print-searchinput { font: inherit; font-size: 13px; color: var(--sh-t); background: var(--sh-np2); border: 1px solid var(--sh-hairD); border-radius: 8px; padding: 9px 12px; min-width: 220px; } .sh-print-searchinput::placeholder { color: var(--sh-tm); } .sh-print-searchinput:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 1px; } .sh-print-findbtn { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--sh-gold); background: transparent; border: 1px solid color-mix(in srgb, var(--sh-gold) 50%, transparent); border-radius: 8px; padding: 9px 16px; cursor: pointer; transition: background .15s ease, color .15s ease; } .sh-print-findbtn:hover { background: var(--sh-gold); color: var(--sh-nb); } .sh-print-keyready { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--sh-tm); margin-top: 3px; } .sh-print-keyready i { width: 7px; height: 7px; border-radius: 999px; background: #2FA968; flex: none; } .sh-print-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--sh-t); } .sh-print-viewkey { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--sh-gold); background: transparent; cursor: pointer; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--sh-gold) 50%, transparent); border-radius: 999px; padding: 6px 13px; transition: background .15s ease, color .15s ease; } .sh-print-viewkey:hover { background: var(--sh-gold); color: var(--sh-nb); } /* Loading / empty / error states (kept visually distinct; body text high-contrast, not the disabled-looking muted tone). */ .sh-print-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 30px 16px; } .sh-print-state svg { margin-bottom: 8px; } .sh-print-state b { color: var(--sh-t); font-size: 15px; font-weight: 700; } .sh-print-state-body { color: var(--sh-t); opacity: .82; font-size: 12.5px; max-width: 420px; line-height: 1.5; } .sh-print-emptycta { margin-top: 12px; font: inherit; font-size: 13px; font-weight: 700; color: var(--sh-gold); background: transparent; border: 1px solid color-mix(in srgb, var(--sh-gold) 50%, transparent); border-radius: 8px; padding: 10px 18px; cursor: pointer; min-height: 44px; transition: background .15s ease, color .15s ease; } .sh-print-emptycta:hover { background: var(--sh-gold); color: var(--sh-nb); } @media (max-width: 600px) { .sh-print-emptycta { width: 100%; } } .sh-print-histfoot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sh-hairD); font-size: 11.5px; color: var(--sh-tm); } /* The printed-tests table is left-aligned (unlike the numeric stats table); only the Answer Key action right-aligns. */ .sh-print-htable th, .sh-print-htable td { text-align: left; } .sh-print-htable th:last-child, .sh-print-htable td:last-child { text-align: right; } @media (max-width: 640px) { .sh-print-search { flex: 1 1 100%; } .sh-print-searchinput { flex: 1; min-width: 0; } } /* ---- "Open Test" detail page: back link, header, actions, reveal, key sheet ---- */ .sh-backlink { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 700; color: var(--sh-gold); background: transparent; border: 0; cursor: pointer; padding: 6px 2px; } .sh-backlink:hover { color: var(--sh-t); } .sh-backlink:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; border-radius: 6px; } /* Header + key panels are ivory .sh-panel, so their text is dark --sh-ink (never --sh-t / --sh-tm, which are tuned for the navy panels). */ .sh-td-head { padding: 18px 20px; } .sh-td-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-orangeC); } .sh-td-code { font-size: clamp(24px, 6vw, 30px); font-weight: 800; letter-spacing: .04em; color: var(--sh-ink); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin-top: 4px; } .sh-td-meta { font-size: 12.5px; color: color-mix(in srgb, var(--sh-ink) 62%, transparent); margin-top: 4px; } .sh-td-actions { display: flex; flex-wrap: wrap; gap: 10px; } .sh-td-reprint { flex: 0 0 auto; min-width: 210px; } .sh-td-revealbtn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 700; color: var(--sh-gold); background: transparent; border: 1px solid color-mix(in srgb, var(--sh-gold) 50%, transparent); border-radius: 10px; padding: 0 18px; min-height: 46px; cursor: pointer; transition: background .15s ease, color .15s ease; } .sh-td-revealbtn:hover { background: var(--sh-gold); color: var(--sh-nb); } .sh-td-revealbtn:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; } .sh-td-actions button:disabled { opacity: .5; cursor: not-allowed; } .sh-td-actions button:disabled:hover { background: transparent; color: var(--sh-gold); } .sh-td-reprintnote { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--sh-tm); line-height: 1.5; } .sh-td-reprintnote svg { flex: none; margin-top: 2px; } .sh-td-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; background: var(--sh-np2); border: 1px solid var(--sh-hairD); border-radius: 12px; padding: 14px 16px; } .sh-td-confirm-text { font-size: 13px; font-weight: 600; color: var(--sh-t); } .sh-td-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; } .sh-td-confirm-yes { font: inherit; font-size: 13px; font-weight: 700; color: var(--sh-nb); background: var(--sh-gold); border: 0; border-radius: 8px; padding: 10px 16px; min-height: 44px; cursor: pointer; } .sh-td-confirm-yes:hover { filter: brightness(1.06); } .sh-td-confirm-no { font: inherit; font-size: 13px; font-weight: 700; color: var(--sh-t); background: transparent; border: 1px solid var(--sh-hairD); border-radius: 8px; padding: 10px 16px; min-height: 44px; cursor: pointer; } .sh-td-confirm-no:hover { border-color: var(--sh-gold); color: var(--sh-gold); } .sh-td-confirm-yes:focus-visible, .sh-td-confirm-no:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; } .sh-td-key { padding: 18px 20px; position: relative; overflow: hidden; } .sh-td-keyhead { margin-bottom: 8px; } .sh-td-keytitle { font-size: 18px; font-weight: 700; color: var(--sh-ink); } .sh-td-keysub { font-size: 12px; color: color-mix(in srgb, var(--sh-ink) 62%, transparent); margin-top: 3px; } /* Faint tiled identity watermark behind the answers: a screenshot can't be blocked, but a leaked one is traceable to the account. It sits below the text (z-index 0); the head + body ride above it (z-index 1) so answers stay crisp. */ .sh-td-keyhead, #tdKeyBody { position: relative; z-index: 1; } .k2c-wm { position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none; overflow: hidden; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 26px 44px; transform: rotate(-24deg); opacity: .09; user-select: none; -webkit-user-select: none; } .k2c-wm span { font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-ink); white-space: nowrap; } /* These two are revealed by user action, NOT the page-entrance stagger, so they must appear the instant they un-hide — otherwise sh-rise (opacity:0 + a stagger delay) leaves them briefly invisible / looking like a dim slate panel. */ #tdRevealConfirm, #tdKeyPanel { animation: none; } @media (max-width: 600px) { .sh-td-reprint, .sh-td-revealbtn { flex: 1 1 100%; justify-content: center; min-width: 0; } .sh-td-confirm-actions { width: 100%; } .sh-td-confirm-yes, .sh-td-confirm-no { flex: 1; } } @media (min-width: 640px) { .sh-sp-desk { display: block; } .sh-sp-mob { display: none; } } /* Top region: at >=1024px the hero and Exam Areas sit side-by-side (hero wide-left, Areas narrow-right) — this fills the hero's empty right side AND frees Subject Performance to run FULL WIDTH below, so its "Readiness & Action" cell never wraps. The hero is flex:1, so when Exam Areas is .hidden (flat exam / day-zero) the hero simply spans the full width. Stacked (hero, then Areas) on small screens. */ .sh-stats-top { display: grid; gap: 12px; } @media (min-width: 1024px) { .sh-stats-top { display: flex; align-items: stretch; } .sh-stats-top > .sh-stats-hero { flex: 1 1 0; min-width: 0; } .sh-stats-top > .sh-stats-aside { flex: 0 0 clamp(280px, 32%, 380px); } /* The Stats view earns a wider canvas than the dashboard (1080) — the wide hero row + the full-width 6-column Subject Performance table need room to breathe like the Rev 4 mockup. Scoped to Stats so the dashboard is unaffected. */ body[data-view="statsSection"] .sh-content, body[data-view="printSection"] .sh-content, body[data-view="printDetailSection"] .sh-content { max-width: 1240px; } } /* ============================================================= * * ExamPede Tutor (askAnythingSection) — mockup 2026-08-24. * Header sits on the ground (theme-aware --sh-t/--sh-tm); the * "Tutor session" card is always ivory (.sh-panel) so its inner * text uses --sh-ink / --sh-goldC / --sh-panel-ink-mut. * ============================================================= */ /* Wider canvas like Stats/Print so the card + right rail (slice 2) breathe. */ @media (min-width: 1024px) { body[data-view="askAnythingSection"] .sh-content, body[data-view="examCategoriesSection"] .sh-content, body[data-view="examTypesSection"] .sh-content, body[data-view="subjectsSection"] .sh-content { max-width: 1240px; } } /* --- Header --- */ .tutor-head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; justify-content: space-between; padding-top: 4px; } .tutor-title { font-size: clamp(24px, 4vw, 32px); font-weight: 700; color: var(--sh-t); line-height: 1.08; letter-spacing: -.01em; margin: 0; } .tutor-sub { font-size: 14px; color: var(--sh-tm); margin-top: 5px; max-width: 46ch; } .tutor-head-r { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .tutor-exam-pill, .tutor-newconv { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sh-t); background: transparent; border: 1px solid color-mix(in srgb, var(--sh-gold) 38%, transparent); border-radius: 999px; padding: 8px 14px; line-height: 1; } .tutor-exam-pill svg, .tutor-newconv svg { color: var(--sh-gold); flex: none; } .tutor-newconv { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; transition: background .15s ease, border-color .15s ease; } .tutor-newconv:hover { background: color-mix(in srgb, var(--sh-gold) 14%, transparent); border-color: color-mix(in srgb, var(--sh-gold) 55%, transparent); } .tutor-newconv:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; } /* --- Layout (single column in slice 1; right rail added in slice 2) --- */ .tutor-layout { display: grid; gap: 16px; } /* --- Main "Tutor session" card --- */ .tutor-main { padding: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--sh-goldC) 24%, transparent); } .tutor-card-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--sh-hairC); } .tutor-card-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sh-panel-ink-mut); } .tutor-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sh-panel-ink-mut); } .tutor-status-dot { width: 8px; height: 8px; border-radius: 999px; background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46, 158, 91, .18); } .tutor-body { padding: 18px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 340px; } /* --- Empty-state welcome --- */ .tutor-welcome { text-align: center; } .tutor-welcome-ic { color: var(--sh-goldC); display: flex; justify-content: center; margin-bottom: 6px; } .tutor-welcome-h { font-size: clamp(20px, 3.4vw, 27px); font-weight: 700; color: var(--sh-ink); margin: 6px 0 6px; } .tutor-welcome-s { font-size: 14px; color: var(--sh-panel-ink-mut); max-width: 52ch; margin: 0 auto 20px; line-height: 1.5; } .tutor-tiles { display: grid; gap: 12px; grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; } @media (min-width: 640px) { .tutor-tiles { grid-template-columns: 1fr 1fr; } } .tutor-tile { display: flex; align-items: flex-start; gap: 13px; text-align: left; background: color-mix(in srgb, var(--sh-goldC) 4%, transparent); border: 1px solid var(--sh-hairC); border-radius: 10px; padding: 15px 16px; cursor: pointer; font: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; } .tutor-tile:hover { border-color: color-mix(in srgb, var(--sh-goldC) 48%, transparent); box-shadow: 0 6px 18px rgba(11, 41, 72, .10); } .tutor-tile:active { transform: scale(.995); } .tutor-tile:focus-visible { outline: 2px solid var(--sh-goldC); outline-offset: 2px; } .tutor-tile-ic { flex: none; color: var(--sh-goldC); margin-top: 1px; } .tutor-tile-txt { display: flex; flex-direction: column; gap: 3px; } .tutor-tile-t { font-size: 15px; font-weight: 700; color: var(--sh-ink); } .tutor-tile-d { font-size: 12.5px; color: var(--sh-panel-ink-mut); line-height: 1.4; } /* --- Conversation log --- */ .tutor-log { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: 56vh; padding-right: 2px; } .tutor-msg { display: flex; } .tutor-msg--user { justify-content: flex-end; } .tutor-msg--ai { justify-content: flex-start; } .tutor-msg-inner { max-width: min(80%, 640px); } .tutor-msg-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--sh-panel-ink-mut); margin-bottom: 4px; } .tutor-msg--user .tutor-msg-meta { justify-content: flex-end; } .tutor-bubble { border-radius: 12px; padding: 11px 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } .tutor-bubble--user { background: var(--sh-ink); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; } .tutor-bubble--ai { background: #fff; color: var(--sh-ink); border: 1px solid var(--sh-hairC); border-bottom-left-radius: 4px; } .tutor-typing { display: inline-flex; gap: 5px; align-items: center; } .tutor-typing i { width: 7px; height: 7px; border-radius: 999px; background: var(--sh-panel-ink-mut); animation: sh-pulse 1s ease-in-out infinite alternate; } .tutor-typing i:nth-child(2) { animation-delay: .15s; } .tutor-typing i:nth-child(3) { animation-delay: .3s; } /* --- Input dock --- */ .tutor-dock { margin: 0 18px; border: 1px solid var(--sh-hairC); border-radius: 12px; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--sh-ink) 2%, #fff); transition: border-color .15s ease, box-shadow .15s ease; } .tutor-dock:focus-within { border-color: color-mix(in srgb, var(--sh-goldC) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-goldC) 12%, transparent); } .tutor-input { width: 100%; border: 0; background: transparent; resize: none; outline: none; font: inherit; font-size: 14px; color: var(--sh-ink); line-height: 1.5; } .tutor-input::placeholder { color: var(--sh-panel-ink-mut); } .tutor-dock-bar { display: flex; justify-content: flex-end; } .tutor-ask { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; background: var(--sh-ink); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s ease, transform .1s ease; } .tutor-ask:hover { background: var(--sh-heroblue); } .tutor-ask:active { transform: scale(.98); } .tutor-ask:focus-visible { outline: 2px solid var(--sh-goldC); outline-offset: 2px; } .tutor-ask:disabled { opacity: .6; cursor: not-allowed; } .tutor-ask svg { flex: none; } .tutor-hint { font-size: 12px; color: var(--sh-panel-ink-mut); padding: 8px 18px 16px; margin: 0; } /* --- Footer disclaimer --- */ .tutor-foot { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: var(--sh-tm); text-align: center; margin: 4px 0 0; } .tutor-foot svg { flex: none; color: var(--sh-tm); } /* --- Tutor right rail (slice 2) --- */ @media (min-width: 1024px) { .tutor-layout { grid-template-columns: minmax(0, 1fr) clamp(300px, 27%, 360px); align-items: start; } } .tutor-rail { display: grid; gap: 16px; } .tutor-panel { border-radius: 12px; padding: 16px; } .tutor-panel--dark { background: var(--sh-np); border: 1px solid color-mix(in srgb, var(--sh-gold) 30%, transparent); color: var(--sh-t); } .tutor-panel--light { padding: 16px; border: 1px solid color-mix(in srgb, var(--sh-goldC) 22%, transparent); } .tutor-panel-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; } .tutor-panel-ic { flex: none; color: var(--sh-gold); display: inline-flex; } .tutor-panel--light .tutor-panel-ic { color: var(--sh-goldC); } .tutor-panel-t { font-size: 15.5px; font-weight: 700; margin: 0; color: inherit; } .tutor-panel--light .tutor-panel-t { color: var(--sh-ink); } /* Starter questions (navy panel) */ .tutor-starters { display: grid; gap: 10px; } .tutor-starter { display: flex; align-items: center; gap: 10px; justify-content: space-between; width: 100%; text-align: left; font: inherit; font-size: 13.5px; line-height: 1.35; color: var(--sh-t); background: color-mix(in srgb, var(--sh-nb) 55%, transparent); border: 1px solid var(--sh-hairD); border-radius: 9px; padding: 12px 13px; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease; } .tutor-starter:hover { border-color: color-mix(in srgb, var(--sh-gold) 55%, transparent); background: color-mix(in srgb, var(--sh-gold) 8%, transparent); } .tutor-starter:active { transform: scale(.99); } .tutor-starter:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; } .tutor-starter-chev { flex: none; color: var(--sh-gold); opacity: .8; } /* Tips (ivory panel) */ .tutor-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .tutor-tip { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--sh-ink); background: color-mix(in srgb, var(--sh-goldC) 4%, #fff); border: 1px solid var(--sh-hairC); border-radius: 9px; padding: 12px 13px; } .tutor-tip-ic { flex: none; color: var(--sh-goldC); display: inline-flex; } /* ============================================================= * * Explore — exam-category chooser (examCategoriesSection). * Navy shell ground; ivory clickable category cards. * ============================================================= */ .expl-head { padding-top: 4px; } .expl-title { font-size: clamp(28px, 5vw, 44px); font-weight: 700; color: var(--sh-t); line-height: 1.05; letter-spacing: -.01em; margin: 0; } .expl-sub { font-size: 14.5px; color: var(--sh-tm); margin: 8px 0 0; max-width: 60ch; } .expl-catshead { margin-top: 10px; } .expl-h2 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 700; color: var(--sh-t); margin: 0; } .expl-sub2 { font-size: 13.5px; color: var(--sh-tm); margin: 5px 0 0; } .expl-cats { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 6px; } @media (min-width: 760px) { .expl-cats { grid-template-columns: 1fr 1fr; } } .expl-cat { display: flex; align-items: flex-start; gap: 18px; text-align: left; width: 100%; background: var(--sh-ivory); color: var(--sh-ink); border: 1px solid color-mix(in srgb, var(--sh-goldC) 26%, transparent); border-radius: 14px; padding: 22px 24px; cursor: pointer; font: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; } .expl-cat:hover { border-color: color-mix(in srgb, var(--sh-goldC) 55%, transparent); box-shadow: 0 10px 26px rgba(11, 41, 72, .16); } .expl-cat:active { transform: scale(.996); } .expl-cat:focus-visible { outline: 2px solid var(--sh-goldC); outline-offset: 2px; } .expl-cat-ic { flex: none; color: var(--sh-goldC); margin-top: 2px; } .expl-cat-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .expl-cat-t { font-size: clamp(19px, 2.3vw, 23px); font-weight: 700; color: var(--sh-ink); line-height: 1.15; } .expl-cat-d { font-size: 13.5px; line-height: 1.5; color: var(--sh-panel-ink-mut); margin-top: 6px; } .expl-cat-hair { border: 0; border-top: 1px solid var(--sh-hairC); margin: 13px 0; width: 100%; } .expl-cat-inc { font-size: 12.5px; line-height: 1.5; color: var(--sh-panel-ink-mut); } .expl-cat-inc b { font-weight: 700; color: color-mix(in srgb, var(--sh-ink) 82%, transparent); } .expl-cat-cta { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--sh-goldC); } .expl-cat:hover .expl-cat-cta { gap: 10px; } .expl-cat-cta svg { transition: transform .15s ease; } .expl-cat:hover .expl-cat-cta svg { transform: translateX(2px); } /* ============================================================= * * Explore — exam list (examTypesSection), navy shell (step 2). * ============================================================= */ .expl-back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--sh-gold); padding: 2px 2px; align-self: flex-start; } .expl-back:hover { color: color-mix(in srgb, var(--sh-gold) 80%, #fff); } .expl-back:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; border-radius: 4px; } .expl-back--bottom { margin-top: 4px; } .exam-list-subhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .exam-list-count { font-size: 13px; font-weight: 600; color: var(--sh-tm); white-space: nowrap; } .exam-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 4px; } @media (min-width: 760px) { .exam-cards { grid-template-columns: 1fr 1fr; } } .exam-card { display: flex; align-items: flex-start; gap: 18px; text-align: left; width: 100%; background: var(--sh-ivory); color: var(--sh-ink); border: 1px solid color-mix(in srgb, var(--sh-goldC) 22%, transparent); border-radius: 14px; padding: 20px 22px; cursor: pointer; font: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; } .exam-card:hover { border-color: color-mix(in srgb, var(--sh-goldC) 52%, transparent); box-shadow: 0 10px 26px rgba(11, 41, 72, .15); } .exam-card:active { transform: scale(.996); } .exam-card:focus-visible { outline: 2px solid var(--sh-goldC); outline-offset: 2px; } .exam-card.is-soon { cursor: default; opacity: .72; } .exam-card.is-soon:hover { border-color: color-mix(in srgb, var(--sh-goldC) 22%, transparent); box-shadow: none; } .exam-card-ic { flex: none; color: var(--sh-goldC); align-self: center; } .exam-card-ic svg { display: block; width: 104px; height: 104px; } @media (max-width: 560px) { .exam-card-ic svg { width: 84px; height: 84px; } } .exam-card-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .exam-card-badge { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--sh-goldC); background: color-mix(in srgb, var(--sh-goldC) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sh-goldC) 42%, transparent); border-radius: 999px; padding: 3px 10px; margin-bottom: 9px; } .exam-card-title { font-size: clamp(17px, 2vw, 20px); font-weight: 700; color: var(--sh-ink); line-height: 1.2; } .exam-card-sub { font-size: 13px; color: var(--sh-panel-ink-mut); margin-top: 3px; } .exam-card-who { font-size: 13.5px; color: var(--sh-panel-ink-mut); margin-top: 8px; line-height: 1.45; } .exam-card-hair { border: 0; border-top: 1px solid var(--sh-hairC); margin: 13px 0; width: 100%; } .exam-card-inc { font-size: 12.5px; line-height: 1.5; color: var(--sh-panel-ink-mut); } .exam-card-inc b { font-weight: 700; color: color-mix(in srgb, var(--sh-ink) 82%, transparent); } .exam-card-foot { margin-top: 14px; } .exam-card-cta { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--sh-goldC); } .exam-card-cta svg { width: 16px; height: 16px; transition: transform .15s ease; } .exam-card:hover .exam-card-cta svg { transform: translateX(2px); } .exam-card-soon { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sh-panel-ink-mut); } .exam-card-soon svg { width: 15px; height: 15px; } /* ============================================================= * * Coverage page (#subjectsSection) — navy shell re-theme, * owner mockup 2026-08-24 (step 3). Header sits on the navy * ground (theme-aware --sh-t/--sh-tm + gold accent); the coverage * accordion and end CTA are always-ivory .sh-cov-panel/.sh-cov-endcta * (fixed --sh-ink/--sh-goldC/--sh-panel-ink-mut on ivory). * ============================================================= */ /* --- header --- */ .sh-cov-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sh-gold); margin: 14px 0 14px; } .sh-cov-headrow { display: flex; gap: 34px; align-items: flex-start; } .sh-cov-ic { flex: none; color: var(--sh-gold); margin-top: 2px; } .sh-cov-ic svg { display: block; width: 150px; height: 150px; } .sh-cov-headtext { min-width: 0; } .sh-cov-title { font-weight: 600; font-size: clamp(30px, 5vw, 52px); line-height: 1.05; color: var(--sh-t); letter-spacing: -.01em; margin: 0; text-wrap: balance; } .sh-cov-sub2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(18px, 2.4vw, 24px); color: var(--sh-tm); margin: 12px 0 0; } .sh-cov-desc { font-size: 16px; color: var(--sh-tm); margin: 16px 0 0; max-width: 62ch; } .sh-cov-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; } .sh-cov-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--sh-gold); border: 1px solid color-mix(in srgb, var(--sh-gold) 42%, transparent); border-radius: 999px; padding: 9px 16px; } .sh-cov-chip svg { flex: none; } .sh-cov-admin { font-size: 13.5px; color: color-mix(in srgb, var(--sh-t) 46%, transparent); margin: 16px 0 0; max-width: 84ch; line-height: 1.5; } /* --- coverage panel (always ivory) --- */ .sh-cov-panel { background: var(--sh-ivory); color: var(--sh-ink); border-radius: 12px; padding: 26px 30px; margin: 34px 0 0; } .sh-cov-panelhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px 24px; flex-wrap: wrap; padding-bottom: 18px; } .sh-cov-paneltitle { font-weight: 600; font-size: clamp(20px, 3vw, 25px); margin: 0; color: var(--sh-ink); } .sh-cov-panelsub { font-size: 14.5px; color: var(--sh-panel-ink-mut); margin: 6px 0 0; } .sh-cov-tools { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .sh-cov-expandall { background: none; border: 0; color: var(--sh-goldC); font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; padding: 0; } .sh-cov-expandall:hover { text-decoration: underline; } .sh-cov-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--sh-panel-ink-mut); } .sh-cov-dot { width: 13px; height: 13px; border-radius: 999px; flex: none; } .sh-cov-dot--on { background: var(--sh-goldC); } .sh-cov-dot--off { border: 1.6px solid rgba(11, 41, 72, .32); } /* --- area accordion --- */ .sh-cov-areas { display: block; } .sh-cov-area { border-top: 1px solid var(--sh-hairC); } .sh-cov-areahead { display: flex; align-items: center; gap: 18px; padding: 18px 2px; cursor: pointer; list-style: none; } .sh-cov-areahead::-webkit-details-marker { display: none; } .sh-cov-areahead:focus-visible { outline: 2px solid var(--sh-goldC); outline-offset: 2px; border-radius: 6px; } .sh-cov-areano { font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 700; color: var(--sh-goldC); flex: none; width: 26px; } .sh-cov-areaname { font-weight: 600; font-size: 19px; flex: 1; min-width: 0; color: var(--sh-ink); } .sh-cov-areacnt { font-size: 14px; color: var(--sh-panel-ink-mut); flex: none; } .sh-cov-chev { flex: none; color: var(--sh-panel-ink-mut); display: grid; place-items: center; transition: transform .18s ease; } .sh-cov-area[open] .sh-cov-chev { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .sh-cov-chev { transition: none; } } .sh-cov-areabody { padding: 2px 2px 24px; } .sh-cov-leafgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 46px; } .sh-cov-leaf { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-top: 1px solid rgba(11, 41, 72, .08); } .sh-cov-leafgrid > .sh-cov-leaf:nth-child(1), .sh-cov-leafgrid > .sh-cov-leaf:nth-child(2) { border-top: 0; } .sh-cov-leaf--hidden { display: none; } .sh-cov-ring { width: 16px; height: 16px; border-radius: 999px; flex: none; margin-top: 2px; border: 1.7px solid rgba(11, 41, 72, .28); } .sh-cov-ring--on { border-color: var(--sh-goldC); background: radial-gradient(var(--sh-goldC) 0 42%, transparent 46%); } .sh-cov-leaf-txt { flex: 1; min-width: 0; } .sh-cov-leaf-name { font-weight: 700; font-size: 15.5px; margin: 0; color: var(--sh-ink); } .sh-cov-leaf-sub { font-size: 13px; color: var(--sh-panel-ink-mut); margin: 3px 0 0; line-height: 1.4; } .sh-cov-pill { flex: none; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 12px; white-space: nowrap; align-self: center; } .sh-cov-pill--off { border: 1px solid rgba(11, 41, 72, .2); color: var(--sh-panel-ink-mut); } .sh-cov-pill--on { color: var(--sh-goldC); background: color-mix(in srgb, var(--sh-goldC) 12%, var(--sh-ivory)); border: 1px solid color-mix(in srgb, var(--sh-goldC) 40%, transparent); } .sh-cov-showall { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--sh-goldC); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; } .sh-cov-showall:hover { text-decoration: underline; } .sh-cov-showall:focus-visible, .sh-cov-expandall:focus-visible { outline: 2px solid var(--sh-goldC); outline-offset: 2px; border-radius: 4px; } .sh-cov-foot { font-size: 13.5px; color: color-mix(in srgb, var(--sh-t) 46%, transparent); margin: 20px 2px 0; } /* --- end CTA (always ivory) --- */ .sh-cov-endcta { background: var(--sh-ivory); color: var(--sh-ink); border-radius: 12px; padding: 26px 30px; margin: 26px 0 0; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .sh-cov-endcta-ic { flex: none; color: var(--sh-goldC); } .sh-cov-endcta-ic svg { display: block; width: 60px; height: 60px; } .sh-cov-endcta-txt { flex: 1; min-width: 220px; } .sh-cov-endcta-q { font-weight: 600; font-size: clamp(20px, 3vw, 24px); margin: 0; color: var(--sh-ink); font-family: Georgia, "Times New Roman", serif; } .sh-cov-endcta-s { font-size: 14.5px; color: var(--sh-panel-ink-mut); margin: 6px 0 0; } .sh-cov-endcta-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .sh-cov-endbtn { background: var(--sh-red); color: #fff; border: 0; border-radius: 10px; padding: 15px 26px; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: filter .15s ease; } .sh-cov-endbtn:hover { filter: brightness(1.07); } .sh-cov-endbtn:focus-visible { outline: 2px solid var(--sh-ink); outline-offset: 2px; } .sh-cov-endalt { background: none; border: 0; color: var(--sh-goldC); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; } .sh-cov-endalt:hover { text-decoration: underline; } .sh-cov-endalt:focus-visible { outline: 2px solid var(--sh-goldC); outline-offset: 2px; border-radius: 4px; } /* gold ground-text flips to antique gold on the light theme (AA on paper) */ :root[data-theme="light"] .sh-cov-eyebrow, :root[data-theme="light"] .sh-cov-ic, :root[data-theme="light"] .sh-cov-chip { color: var(--sh-goldC); } :root[data-theme="light"] .sh-cov-chip { border-color: color-mix(in srgb, var(--sh-goldC) 42%, transparent); } /* --- mobile --- */ @media (max-width: 767px) { .sh-cov-headrow { flex-direction: column; gap: 16px; } .sh-cov-ic svg { width: 96px; height: 96px; } .sh-cov-panel { padding: 20px 18px; } .sh-cov-panelhead { flex-direction: column; gap: 12px; } .sh-cov-areahead { gap: 12px; } .sh-cov-areaname { font-size: 17px; } .sh-cov-leafgrid { grid-template-columns: 1fr; gap: 0; } .sh-cov-leafgrid > .sh-cov-leaf:nth-child(2) { border-top: 1px solid rgba(11, 41, 72, .08); } .sh-cov-endcta { flex-direction: column; align-items: flex-start; gap: 18px; } .sh-cov-endcta-actions { width: 100%; } }