/* Quiet paper surfaces and a shared hierarchy. Media and teaching scenes keep
   their own geometry; texture stays on the surrounding interface. */
:root {
  --hq-paper: #f6f5ee;
  --hq-white: #fffefa;
  --hq-rule: #dce1d5;
  --hq-muted: #536862;
  --hq-accent: #d5eaa1;
  --hq-shadow: 0 2px 3px #263d2910, 0 12px 30px #263d2906;
  --hq-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.045' filter='url(%23paper)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  --canvas: var(--hq-paper);
  --canvas-warm: #f8f6ed;
  --surface: var(--hq-white);
  --line: var(--hq-rule);
  --muted: #5f716c;
  --muted-2: #596c61;
}

body {
  background-color: var(--hq-paper);
  background-image: var(--hq-grain), radial-gradient(ellipse at 100% 0, #e9eee1, transparent 55rem);
  background-size: 160px 160px, auto;
  background-repeat: repeat, no-repeat;
}
body .page { animation-duration: .2s; }
body #main-content h1[tabindex="-1"]:focus { outline: none; }
body .page-kicker { color: #536d56; font-weight: 700; letter-spacing: .09em; }
body .page-kicker::before { background: #80915c; width: 18px; }
body .button { min-height: 44px; border-radius: 9px; font-size: 12px; font-weight: 650; }
body .button--primary { background: #154f4b; box-shadow: 0 2px 3px #08372d12; }
body .button--primary:hover { background: #0b403c; box-shadow: 0 3px 12px #08372d18; }
body .button--lime { color: #173d35; background: var(--hq-accent); box-shadow: 0 2px 4px #052f3520; }
body .button--lime:hover { background: #e1efb9; }
body .button--ghost { border-color: #d3dccf; background: #fffefa; }
body :is(.text-link, .library-downloads a) { text-underline-offset: 4px; }

/* Only the current destination gets a filled navigation item. */
body .sidebar { background: var(--hq-grain), #fafaf5; border-color: var(--hq-rule); }
body .nav-list { gap: 5px; }
body .nav-list__label { color: #5a6a5f; font-weight: 650; letter-spacing: .1em; }
body .nav-item { min-height: 46px; border: 1px solid transparent; border-radius: 9px; color: #465e55; font-weight: 550; }
body .nav-item:hover { transform: none; background: #eaf0e4; color: #194b40; }
body .nav-item.nav-item--lab:not(.is-active) { background: transparent; border-color: transparent; color: #465e55; }
body .nav-item.nav-item--lab:not(.is-active):hover { background: #eaf0e4; }
body .nav-item.is-active { background: #164b48; color: #fffefa; border-color: #164b48; box-shadow: 0 2px 5px #164b4815; }
body .nav-item.is-active::before { left: -1px; height: 18px; width: 3px; border-radius: 2px; background: var(--hq-accent); }
body .nav-item__lab-badge { background: #e8ecdf; color: #506348; font-size: 9px; font-weight: 650; }
body .nav-item.is-active .nav-item__lab-badge { background: #ffffff18; color: #e4efce; }
body .course-switcher { margin-top: 28px; }
body .course-switcher__button { border-color: #dce3d4; border-radius: 9px; background: #fffffb; }
body .course-switcher__icon { background: #edf0e3; color: #546d40; border-radius: 7px; }
body .support-card { background: #f0f3e8; border-color: #dce3d4; border-radius: 10px; box-shadow: none; }
body .profile-card { border-top-color: #dce3d4; }
body .topbar { background: #f6f5eef2; border-color: #dde2d4; backdrop-filter: blur(12px); }
body .breadcrumbs { font-size: 12px; }
body .global-search { border-color: #cdd8c8; border-radius: 9px; background: #fffefa; height: 44px; }
body .global-search input { font-size: 12px; }
body .global-search input::placeholder { color: #617169; }
body .global-search kbd { background: #f3f4ec; color: #677365; border-color: #d8dfd0; }
body .icon-button { border-radius: 9px; background: #fffefa; border-color: #d4dccf; }

/* A clear next step, followed by the course map. */
body .learning-home .learning-heading { margin-bottom: 28px; }
body .learning-heading h1 { color: #183e37; letter-spacing: -.035em; font-weight: 720; }
body .learning-heading p { color: #536862; }
body .learning-home .learning-resume {
  border: 1px solid #214f48;
  border-radius: 18px;
  padding: 32px;
  background-color: #174d46;
  background-image: var(--hq-grain), linear-gradient(110deg, #174d46, #123b3b);
  background-size: 160px 160px, auto;
  box-shadow: 0 12px 28px #203d3010;
  margin-bottom: 38px;
}
body .learning-resume .learning-eyebrow { color: #e0edb1; font-size: 10px; letter-spacing: .11em; }
body .learning-resume h2 { font-weight: 650; font-size: clamp(22px, 2.1vw, 28px); }
body .learning-resume p { color: #d6e3d7; }
body .learning-resume__progress { border-color: #ffffff26; }
body .learning-resume__progress>strong { font-weight: 500; letter-spacing: -.04em; }
body .learning-resume .progress-track { background: #ffffff24; }
body .learning-home .learning-map__heading h2 { color: #1a4138; font-size: 26px; font-weight: 650; letter-spacing: -.025em; }
body .learning-home .learning-map__heading p { color: #536862; }
body .learning-home .learning-search { background: #fffefa; border-color: #c8d4c4; border-radius: 9px; }
body .learning-home .learning-map__legend { margin: 16px 0 20px; color: #51685b; }
body .learning-map-actions { margin-left: auto; }
body .learning-map-actions button { min-height: 40px; padding: 6px 10px; border: 1px solid #d5decf; border-radius: 7px; background: #fffefa; color: #285646; text-decoration: none; }
body .learning-home .learning-module { border-color: #d6dfcf; border-radius: 14px; background: #fffefa; box-shadow: var(--hq-shadow); }
body .learning-home .learning-module.is-current { border-color: #93a886; box-shadow: 0 0 0 1px #bfcdb3, var(--hq-shadow); }
body .learning-module .learning-module__meta { padding: 20px; }
body .learning-module .learning-module__number { background: #eff2e7; color: #446b4c; border-radius: 8px; }
body .learning-module .learning-module__meta strong { font-weight: 650; color: #244b3d; }
body .learning-module .learning-module__meta small { color: #5e6f60; }
body .learning-module li a { border-color: #e8ebdf; border-radius: 7px; }
body .learning-module li a.is-current { background: #eaf1da; color: #234c34; box-shadow: inset 3px 0 #7d9958; }
body .learning-module li a:hover { background: #f0f3e6; }
body .lab-portal.lab-portal--featured { background: #194943; border-color: #315d50; box-shadow: var(--hq-shadow); }
body .lab-portal--featured .button { background: var(--hq-accent); border-color: var(--hq-accent); }

/* Lesson navigation has a consistent, quiet shape in both course areas. */
body .learning-lesson .learning-breadcrumb { color: #5d7266; }
body :is(.learning-section-nav, .ql-jumps) { gap: 6px; padding: 6px; background: #e9ede0; border: 1px solid #dce3d3; border-radius: 12px; }
body :is(.learning-section-nav, .ql-jumps) button { min-height: 42px; border: 1px solid transparent; border-radius: 8px; color: #315542; background: transparent; font-weight: 550; padding: 9px 14px; }
body :is(.learning-section-nav, .ql-jumps) button:hover { background: #fffefa; border-color: #d3ddc8; }
body .learning-lesson .learning-panel { background: #fffefa; border-color: #d8e0cf; border-radius: 12px; box-shadow: 0 2px 4px #263d2905; }
body .learning-lesson .learning-panel>summary { color: #254b3e; }
body .learning-lesson .learning-module-nav { background: #eff1e5; border-color: #d3ddc6; border-radius: 12px; }
body .learning-module-nav li a[aria-current=page] { background: #1b5147; }
body .learning-lesson .learning-continue { border-color: #d5dec9; }

/* The player keeps its tested bounds; polish changes surfaces, not sizing. */
body.learning-cinema .learning-player { border-color: #315c51; box-shadow: 0 5px 20px #173d3020; border-radius: 14px; }
body.learning-cinema .learning-player .learning-player__controls { background: linear-gradient(#12454a, #103b3f); }
body.learning-cinema .learning-player .learning-player__transport .learning-control { color: #e6eddf; }
body.learning-cinema .learning-player .learning-player__transport .learning-control[aria-pressed=true] { color: #e3f0b7; background: #ffffff0d; }
body.learning-cinema .learning-player .learning-play { background: #d5eaa1; color: #163d32; box-shadow: 0 2px 5px #0002; }
body.learning-cinema .learning-player .learning-play:hover { background: #e3f0b9; }
body.learning-cinema .learning-player .learning-speed--compact select { background: #ffffff0a; color: #f5f7ef; }
body.learning-cinema .learning-player .learning-player__cue select { background: #ffffff06; border-color: #ffffff22; color: #f3f5e9; }
body.learning-cinema .learning-player .learning-timeline-fill { background: #d5eaa1; }
body.learning-cinema .learning-player .qdc-progress input { accent-color: #d5eaa1; }
body.learning-cinema .learning-deck--inline>summary { background: #f5f5eb; color: #2b5546; border-color: #d8e0cc; }
body.learning-cinema .qdc-scene-reading { background: #f5f5eb; color: #2b5546; }
body .learning-live-dialog { border-color: #668576; box-shadow: 0 28px 90px #051d2380; }
body .learning-live-dialog::backdrop { background: #112c30d9; backdrop-filter: blur(5px); }
body .learning-live-header { background: #f7f7ed; color: #254c3f; }
body .learning-live-body>.learning-player { border: 0; border-radius: 0; box-shadow: none; }
body .learning-live-header button { font-size: 12px; box-shadow: none; }

/* Documents, resources and filters share the same paper-and-ink language. */
body .ql-page .ql-tabs { gap: 6px; border-bottom: 1px solid #d3ddcb; padding-bottom: 12px; }
body .ql-page .ql-tabs a { min-height: 44px; display: inline-flex; align-items: center; background: transparent; color: #4e6755; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 600; }
body .ql-page .ql-tabs a:hover { background: #edf1e2; }
body .ql-page .ql-tabs a[aria-current] { background: #1b5147; border-color: #1b5147; color: #fffefa; }
body .ql-page .ql-heading h1 { color: #1a4137; font-size: clamp(29px, 3.3vw, 44px); font-weight: 720; letter-spacing: -.035em; }
body .ql-page .ql-heading>p { color: #53675d; max-width: 74ch; }
body .ql-page .ql-meta { gap: 8px 16px; margin-top: 20px; }
body .ql-page .ql-meta>span { background: none; border: 0; padding: 0; color: #546a51; line-height: 1.7; }
body .ql-page .ql-meta>span+span::before { content: '·'; margin-right: 16px; color: #8a986f; }
body .ql-page .ql-study-overview { background: var(--hq-grain), #edf1e4; border-color: #d5dfc7; border-radius: 12px; }
body .ql-page .ql-catalog-controls { padding: 20px; border: 1px solid #d7dfcf; border-radius: 12px; background: #fafaf4; box-shadow: 0 2px 3px #203d3004; }
body .ql-page .ql-catalog-controls :is(input, select) { min-height: 46px; border-color: #c0ceba; border-radius: 8px; background: #fffefa; }
body .ql-page .ql-card { position: relative; border-color: #d6dfce; border-radius: 12px; padding: 22px; background: #fffefa; box-shadow: var(--hq-shadow); transition: border-color .16s, box-shadow .16s; }
body .ql-page .ql-card__top { margin-bottom: 16px; }
body .ql-page .ql-number { width: 34px; height: 34px; font-size: 13px; border-radius: 8px; background: #edf1e1; color: #526f3b; }
body .ql-page .ql-card h2 { font-size: 18px; line-height: 1.4; }
body .ql-page .ql-card h2 a { color: #245744; }
body .ql-page .ql-card h2 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
body .ql-page .ql-card p { color: #566957; margin-bottom: 20px; }
body .ql-page .ql-card__foot { border-color: #e0e7d8; padding-top: 14px; }
body .ql-page .ql-card__foot>a { position: relative; z-index: 1; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; color: #29593d; }
body .ql-page .ql-card:hover { border-color: #93ab7b; box-shadow: 0 4px 16px #244b3410; }
body .ql-page .ql-card:focus-within { outline: 3px solid #32735b; outline-offset: 3px; }
body .ql-page :is(.ql-panel, .ql-case) { background: #fffefa; border-color: #d7e0cf; border-radius: 12px; box-shadow: 0 2px 4px #263d2905; }
body .ql-page :is(.ql-example, .ql-document-meta) { background: #f0f3e6; }
body .ql-page .ql-example { border-left-color: #7a9961; }
body .ql-page .ql-question { border-color: #d8e1cf; border-radius: 9px; }
body .ql-page .ql-objective-test .ql-question label { border: 1px solid transparent; transition: background .12s; }
body .ql-page .ql-objective-test .ql-question label:hover { background: #f1f4e8; }
body .ql-page .ql-objective-test .ql-question label:has(input:checked) { background: #eaf1da; border-color: #a3bb83; }
body .ql-page .ql-full-example { border-top-color: #658653; }
body .ql-page .ql-objective-test { border-top-color: #658653; }
body .ql-portal { background: #eef1e4; border-color: #d3dfc7; }
body .ql-portal__links a { background: #fffefa; border-color: #d0dcc2; border-radius: 9px; }
body .ql-portal__links a:hover { border-color: #8ca673; box-shadow: 0 2px 5px #263d2908; }
body .study-library .library-filters { background: #fafaf4; border-color: #d5decb; border-radius: 12px; }
body .study-library .library-filters :is(input[type=search], select) { border-color: #c0ceba; border-radius: 8px; background: #fffefa; }
body .study-library .learning-course-library details { background: #fffefa; border-color: #d4deca; border-radius: 12px; box-shadow: var(--hq-shadow); }
body .study-library .library-resource { background: #f7f8ef; border-color: #d5dfca; border-radius: 9px; }
body .study-library .library-save:hover { background: #eaf0dd; }
body .study-library .library-save.is-active { background: #e1edc9; border-color: #a7be87; color: #365829; }

/* Keyboard focus stays obvious on both light and dark surfaces. */
body :is(.nav-item, .button, .icon-button, .ql-tabs a, .ql-jumps button, .learning-section-nav button):focus-visible { outline: 3px solid #367958; outline-offset: 3px; }
body.learning-cinema .learning-player :is(button, select, input, summary):focus-visible { outline: 2px solid #dcefa9; outline-offset: 2px; }
body.learning-cinema .learning-player :is(.learning-deck--inline, .qdc-scene-reading) :focus-visible { outline-color: #397452; }
body .learning-live-header :focus-visible { outline: 3px solid #397452; outline-offset: 2px; }

@media (max-width: 760px) {
  body .learning-home .learning-resume { padding: 25px; margin-bottom: 30px; }
  body .learning-map-actions { margin-left: 0; }
  body .learning-map__legend .learning-map-actions { width: 100%; gap: 8px; }
  body .learning-map-actions button { flex-basis: auto; margin: 0; }
  body :is(.learning-section-nav, .ql-jumps) { flex-wrap: wrap; gap: 4px; padding: 4px; }
  body :is(.learning-section-nav, .ql-jumps) button { padding: 9px 11px; font-size: 12px; }
  body .ql-page .ql-tabs { gap: 4px; }
  body .ql-page .ql-tabs a { padding: 8px 10px; font-size: 12px; }
  body .ql-page .ql-heading { padding: 18px 0 22px; }
  body .ql-page .ql-heading>p { font-size: 1rem; line-height: 1.65; }
  body .ql-page .ql-study-overview { padding: 18px; }
  body .ql-page .ql-study-summary { gap: 16px; }
  body .ql-page .ql-study-summary h2 { font-size: 1.13rem; }
  body .ql-page .ql-catalog-controls { padding: 16px; }
  body .ql-page .ql-card { padding: 20px; }
  body .ql-page .ql-meta { display: flex; gap: 4px 12px; }
  body .ql-page .ql-meta>span+span::before { content: none; }
}
@media (max-width: 440px) {
  body .learning-home .learning-resume { padding: 22px; }
  body .learning-resume__progress { border-left: 0; }
  body .learning-home .learning-map__heading h2 { font-size: 24px; }
  body .learning-module .learning-module__meta { padding: 17px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  body .page { animation: none; }
  body :is(.button, .nav-item, .ql-card, .ql-question label) { transition: none; transform: none; }
}
@media print {
  body { background: white; }
  body :is(.learning-resume, .ql-study-summary, .ql-panel, .learning-panel, .library-resource) { background-image: none; box-shadow: none; }
}