/* Nova 50: spacious dialogs, native RGB scrollbars, certificate layout and exam preparation. */
@property --cf-scroll-thumb {
  syntax: '<color>';
  inherits: true;
  initial-value: #7587b8;
}
:root {
  --cf-scroll-thumb: #7587b8;
  --cf-scroll-track: #f0f2f8;
  --cf-scroll-size: 13px;
  animation: cf-scroll-spectrum 30s linear infinite;
}
html[data-theme='dark'] { --cf-scroll-track: #242b43; }
@keyframes cf-scroll-spectrum {
  0%,100% { --cf-scroll-thumb: #7189b6; }
  25% { --cf-scroll-thumb: #9a79aa; }
  50% { --cf-scroll-thumb: #b07883; }
  75% { --cf-scroll-thumb: #68988b; }
}
* { scrollbar-width: auto; scrollbar-color: var(--cf-scroll-thumb) var(--cf-scroll-track); }
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-color: auto; scrollbar-width: auto; }
  ::-webkit-scrollbar { width: var(--cf-scroll-size); height: var(--cf-scroll-size); }
  ::-webkit-scrollbar-track { background: var(--cf-scroll-track); border-radius: 12px; }
  ::-webkit-scrollbar-thumb {
    background: var(--cf-scroll-thumb);
    background: linear-gradient(140deg, color-mix(in srgb, var(--cf-scroll-thumb), white 14%), var(--cf-scroll-thumb));
    border: 3px solid var(--cf-scroll-track);
    border-radius: 12px;
    min-height: 42px;
    min-width: 42px;
  }
  ::-webkit-scrollbar-thumb:hover { border-width: 2px; }
  ::-webkit-scrollbar-corner { background: var(--cf-scroll-track); }
}
html[data-motion='off'] { animation: none; }
@media(prefers-reduced-motion: reduce) { :root { animation: none !important; } }
@media(forced-colors: active) {
  :root { animation: none !important; }
  * { scrollbar-color: auto !important; scrollbar-width: auto !important; }
  ::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; }
  ::-webkit-scrollbar-track { background: Canvas; }
}
/* Explicit widths override the old 540px and 720px caps across both apps. */
dialog.f-dialog, dialog:not(.modal):not(.f-dialog) {
  width: min(940px, calc(100vw - 48px));
  max-width: min(940px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
}
dialog.f-dialog[open] { display: flex; flex-direction: column; }
dialog.modal {
  width: min(1080px, calc(100vw - 48px));
  max-width: min(1080px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
}
dialog.modal.wide {
  width: min(1380px, calc(100vw - 48px));
  max-width: min(1380px, calc(100vw - 48px));
}
dialog .modal-card { display: flex; flex-direction: column; max-height: calc(100dvh - 50px); min-height: 0; }
dialog .modal-body, dialog .f-dialog-body {
  padding: clamp(24px, 3vw, 40px);
  max-height: min(74dvh, 900px);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  flex: 1 1 auto;
}
dialog .modal-card header, dialog .modal-card footer, .f-dialog-head, .f-dialog-foot {
  flex: 0 0 auto;
  padding: 24px clamp(24px, 3vw, 40px);
  gap: 18px;
}
dialog .f-dialog-head h2, dialog .modal-card header h2 { font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.3; }
dialog .f-dialog-body > p, dialog .modal-body > p { font-size: 1rem; line-height: 1.7; }
dialog.f-command { width: min(960px, calc(100vw - 48px)); }
dialog.n-helper-panel { width: min(760px, calc(100vw - 48px)); max-width: min(760px, calc(100vw - 48px)); margin: auto; inset: 0; }
dialog.n-tour, dialog.n-planner { width: min(1040px, calc(100vw - 48px)); max-width: min(1040px, calc(100vw - 48px)); }
dialog .dialog-content { padding: clamp(24px,3vw,40px); max-height: calc(100dvh - 50px); overflow: auto; }
/* One status badge in normal document flow; no diagonal ribbon can cross text. */
.certificate.sample::after { content: none !important; display: none !important; }
.certificate {
  background: #fffdf8;
  color: #26345b;
  border-color: #c9cfe1;
  border-radius: 18px;
  padding: clamp(24px, 5vw, 62px);
  max-width: 1120px;
}
.certificate::before { inset: 14px; border-color: #e0d7ba; border-radius: 10px; }
.certificate header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 32px; margin: 0 0 42px; }
.certificate header .brand { flex-shrink: 0; color: #26345b; }
.certificate .cert-status {
  position: static;
  display: grid;
  gap: 5px;
  text-align: left;
  padding: 12px 16px;
  border: 1px solid #d7dbea;
  background: #eef2ff;
  border-radius: 12px;
  max-width: 310px;
  overflow-wrap: anywhere;
}
.cert-status strong { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; line-height: 1.5; color: #344d82; }
.cert-status span { font-size: 12px; line-height: 1.6; color: #54627c; letter-spacing: normal; }
.certificate .cert-id { max-width: none; letter-spacing: normal; }
.certificate .cert-facts { flex-wrap: wrap; gap: 20px 40px; }
.certificate h2, .certificate .recipient, .certificate h4 { color: #26345b; overflow-wrap: anywhere; }
.certificate .cert-disclaimer { margin-bottom: 0; }
/* Fifty-path information architecture. */
.f-chips { flex-wrap: wrap; }
.cf-course-outcomes { margin-top: 30px; display: grid; gap: 14px; }
.cf-course-outcomes h3 { font-size: 1.1rem; }
.cf-course-outcomes ul { padding-left: 22px; display: grid; gap: 10px; }
.cf-simulation-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 24px; border: 1px solid var(--f-line); border-radius: 18px; background: var(--f-surface); margin-bottom: 24px; }
.cf-simulation-link strong { display: block; }
.cf-simulation-link p { font-size: .9rem; color: var(--f-muted); margin: 6px 0 0; }
.cf-module-glossary { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 14px; margin-top: 24px; }
.cf-module-glossary div { border: 1px solid var(--f-line); border-radius: 14px; padding: 18px; }
.cf-module-glossary dt { font-weight: 700; margin-bottom: 8px; }
.cf-module-glossary dd { margin: 0; color: var(--f-muted); line-height: 1.65; }
/* Exam preparation is explicitly separate from credential assessment. */
.prep-page { max-width: 1320px; margin: auto; }
.prep-intro { display: grid; grid-template-columns: 1.45fr .8fr; gap: 26px; margin-bottom: 26px; align-items: stretch; }
.prep-intro .panel { padding: clamp(24px,3vw,40px); }
.prep-eyebrow { color: var(--f-primary); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; margin-bottom: 10px; }
.prep-intro h1 { font-size: clamp(2rem,4vw,3.3rem); line-height: 1.13; margin: 0 0 20px; }
.prep-intro p { line-height: 1.7; color: var(--f-muted); }
.prep-stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.prep-stat-row span { display: grid; gap: 4px; padding: 14px 18px; background: var(--f-soft); border-radius: 14px; font-size: .8rem; color: var(--f-muted); }
.prep-stat-row strong { font-size: 1.3rem; color: var(--f-ink); }
.prep-form { display: grid; gap: 18px; }
.prep-form label { display: grid; gap: 8px; font-size: .9rem; font-weight: 650; }
.prep-form select { width: 100%; min-height: 48px; }
.prep-blueprint { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 12px; margin: 22px 0; }
.prep-blueprint > div { border: 1px solid var(--f-line); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.prep-blueprint span { color: var(--f-muted); white-space: nowrap; font-size: .8rem; }
.prep-resume { padding: 20px 24px; border: 1px solid var(--f-primary); border-radius: 16px; margin-bottom: 24px; background: var(--f-surface); }
.prep-resume .row { margin-top: 14px; }
.prep-session { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 26px; }
.prep-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.prep-timer { font-variant-numeric: tabular-nums; font-size: 1.05rem; padding: 12px 18px; background: var(--f-soft); border-radius: 12px; min-width: 120px; text-align: center; }
.prep-timer[data-low='true'] { color: var(--danger); }
.prep-question { padding: clamp(24px,3vw,40px); }
.prep-question h2 { font-size: clamp(1.2rem,2.4vw,1.65rem); line-height: 1.5; margin: 18px 0 26px; }
.prep-options { display: grid; gap: 14px; }
.prep-option { width: 100%; display: flex; align-items: flex-start; gap: 14px; text-align: left; border: 1.5px solid var(--f-line); border-radius: 15px; padding: 18px 20px; min-height: 62px; background: var(--f-surface); color: var(--f-ink); line-height: 1.65; font: inherit; cursor: pointer; }
.prep-option .prep-letter { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--f-line); border-radius: 9px; font-weight: 750; }
.prep-option:hover { border-color: var(--f-primary); background: var(--f-soft); }
.prep-option[aria-pressed='true'] { background: var(--f-soft); border-color: var(--f-primary); box-shadow: 0 0 0 2px color-mix(in srgb,var(--f-primary),transparent 82%); }
.prep-option[aria-pressed='true'] .prep-letter { background: var(--f-primary); color: var(--f-on-primary); border-color: var(--f-primary); }
.prep-option:focus-visible, .prep-dot:focus-visible { outline: 3px solid var(--f-primary); outline-offset: 4px; }
.prep-controls { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.prep-navigator { align-self: start; position: sticky; top: 95px; padding: 22px; }
.prep-navigator h2 { font-size: 1.05rem; margin: 0 0 10px; }
.prep-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; margin: 18px 0; }
.prep-dot { aspect-ratio: 1; min-height: 40px; padding: 0; border: 1px solid var(--f-line); border-radius: 10px; background: var(--f-surface); color: var(--f-ink); cursor: pointer; position: relative; font: inherit; }
.prep-dot.answered { background: var(--f-soft); border-color: var(--f-primary); }
.prep-dot[aria-current='step'] { outline: 2px solid var(--f-primary); outline-offset: 2px; font-weight: 800; }
.prep-dot.flagged::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #af6800; }
.prep-legend { font-size: .8rem; color: var(--f-muted); line-height: 1.7; }
.prep-footnote { margin-top: 24px; font-size: .85rem; line-height: 1.7; color: var(--f-muted); }
.prep-result { text-align: center; padding: clamp(30px,5vw,64px); margin-bottom: 24px; }
.prep-result-score { font-size: clamp(3rem,8vw,6rem); line-height: 1.1; font-weight: 800; color: var(--f-primary); font-variant-numeric: tabular-nums; }
.prep-result h1 { font-size: clamp(1.7rem,3vw,2.7rem); margin: 18px 0; }
.prep-result .row { justify-content: center; margin-top: 22px; }
.prep-analysis { display: grid; gap: 12px; margin: 20px 0; }
.prep-domain { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 24px; align-items: center; padding: 16px; background: var(--f-soft); border-radius: 14px; }
.prep-domain progress { grid-column: 1/-1; width: 100%; height: 9px; accent-color: var(--f-primary); }
.prep-review { margin-bottom: 12px; border: 1px solid var(--f-line); border-radius: 14px; padding: 18px 22px; }
.prep-review summary { cursor: pointer; display: flex; align-items: flex-start; gap: 12px; font-weight: 650; line-height: 1.6; }
.prep-review .prep-review-content { padding: 20px 0 0; line-height: 1.8; }
.prep-review .prep-review-content p { margin-bottom: 14px; }
.prep-review .prep-review-content a { text-decoration: underline; }
.prep-tag { display: inline-block; border-radius: 7px; padding: 4px 8px; background: var(--f-soft); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.prep-history { display: grid; gap: 12px; margin-top: 20px; }
.prep-history article { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--f-line); border-radius: 12px; }
.prep-storage-error { padding: 16px 20px; background: #fff0db; border: 1px solid #ba7b21; color: #5d411a; border-radius: 12px; margin: 16px 0; line-height: 1.65; }
.prep-saved { color: var(--f-muted); font-size: .8rem; }
@media(max-width:900px) {
  .prep-intro, .prep-session { grid-template-columns: minmax(0,1fr); }
  .prep-navigator { position: static; }
  .prep-grid { grid-template-columns: repeat(10,minmax(0,1fr)); }
  .certificate header { margin-bottom: 28px; }
}
@media(max-width:600px) {
  :root { --cf-scroll-size: 11px; }
  dialog.f-dialog, dialog.modal, dialog.modal.wide, dialog.n-helper-panel, dialog.n-tour, dialog.n-planner, dialog.f-command, dialog:not(.modal):not(.f-dialog) { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 18px; }
  dialog .modal-card { max-height: calc(100dvh - 26px); border-radius: 17px; }
  dialog .modal-body, dialog .f-dialog-body { padding: 22px 18px; max-height: 72dvh; }
  .f-dialog-head, .f-dialog-foot, dialog .modal-card header, dialog .modal-card footer { padding: 18px; gap: 12px; }
  .f-dialog-foot, dialog .modal-card footer { flex-wrap: wrap; }
  .certificate { padding: 32px 25px; }
  .certificate header { flex-direction: column; align-items: stretch; }
  .certificate .cert-status { max-width: 100%; }
  .certificate .cert-facts { display: grid; gap: 16px; }
  .certificate footer { gap: 20px; }
  .cf-simulation-link { flex-direction: column; align-items: stretch; }
  .prep-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .prep-controls .btn, .prep-controls .f-btn { flex: 1 1 auto; }
  .prep-option { padding: 16px 14px; gap: 10px; }
  .prep-question { padding: 22px 18px; }
  .prep-history article { flex-wrap: wrap; }
}
@media print {
  .certificate { background: white !important; border-radius: 0; padding: 30px; }
  .certificate .cert-status { border: 1px solid #8d96aa; }
  .prep-toolbar, .prep-controls, .prep-navigator, .prep-form { display: none !important; }
  .prep-review { break-inside: avoid; }
}

/* Final integration: shared motion preferences, contrast and nested scrolling. */
html, body, html * { scrollbar-width: auto !important; scrollbar-color: var(--cf-scroll-thumb) var(--cf-scroll-track) !important; }
@supports selector(::-webkit-scrollbar) {
  html, body, html * { scrollbar-color: auto !important; }
  *::-webkit-scrollbar { width: var(--cf-scroll-size); height: var(--cf-scroll-size); }
  *::-webkit-scrollbar-track { background: var(--cf-scroll-track); border-radius: 12px; }
  *::-webkit-scrollbar-thumb { background: var(--cf-scroll-thumb); border: 3px solid var(--cf-scroll-track); border-radius: 12px; min-height: 42px; min-width: 42px; }
  *::-webkit-scrollbar-thumb:hover { border-width: 2px; }
}
html[data-motion='off'], html[data-nova-motion='paused'], html[data-page-hidden='true'] { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { html { animation: none !important; } }
@media (forced-colors: active) {
 html, body, html * { scrollbar-color: auto !important; }
 *::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; }
 *::-webkit-scrollbar-track { background: Canvas; }
}
.prep-page { padding-top: 28px; }
.prep-navigator > .f-btn { display: flex; width: 100%; justify-content: center; }
.prep-eyebrow { color: var(--f-primary); }
.prep-option .prep-letter { line-height: 1; }
.prep-option[aria-pressed='true'] .prep-letter { color: var(--f-on-primary); }
.prep-course-heading { display: flex; gap: 16px; align-items: center; }
.prep-course-heading .n-pip { width: 86px; flex: 0 0 86px; }
.prep-page select { max-width: 100%; min-width: 0; }
.prep-intro > *, .prep-session > *, .prep-toolbar > * { min-width: 0; }
.prep-question p, .prep-question h2, .prep-review { overflow-wrap: anywhere; }
.prep-review[hidden] { display: none !important; }
.prep-review summary { list-style: none; }
.prep-review summary::after { content: '+'; margin-left: auto; flex: 0 0 auto; }
.prep-review[open] summary::after { content: '−'; }
.prep-blueprint { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.lesson-article section > p, .f-editor-preview p { white-space: pre-line; }
.n-pick-grid { max-height: 48dvh; overflow: auto; overscroll-behavior: contain; padding: 6px; }
.certificate .cert-facts strong, .certificate .cert-seal { color: #344d82; }
@media (max-width:600px) {
 .prep-page { padding-top: 12px; }
 .prep-blueprint > div { align-items: flex-start; flex-wrap: wrap; }
 .prep-stat-row span { flex: 1 1 110px; }
 .prep-toolbar label { width: 100%; }
 .prep-controls { gap: 10px; }
 .prep-review summary { flex-wrap: wrap; }
 .prep-review summary > span:last-of-type { flex-basis: 100%; }
 .certificate .cert-status { align-self: flex-start; }
}

/* Nova 50: intrinsic-size-safe course authoring. */
.f-authoring { grid-template-columns: minmax(0,1fr); width: 100%; }
.f-authoring > *, .f-editor-toolbar, .f-editor-toolbar .field { min-width: 0; max-width: 100%; }
.f-editor-tabs { flex-wrap: wrap; overflow: visible; gap: 8px; }
.f-editor-tabs .button { white-space: normal; }
.f-editor-block, .f-authoring .form-grid, .f-editor-options { min-width: 0; }

/* Clear preview status and readable certificate explanations on a phone. */
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; padding: 0; }
.certificate p, .certificate footer span { color: #54627c; }
.certificate .eyebrow { color: #425bb8; }
@media(max-width:700px) {
 .certificate + .three-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .certificate + .three-grid .panel { padding: 24px; }
}