/* AlbertaOil's equipment atlas: original provincial colours, clear study routes.
   Every selector is scoped so these styles can also live inside the React site. */
.atlas-root {
  --ink: #142f47;
  --muted: #5b6c77;
  --paper: #f5f3ed;
  --line: #d8dedb;
  --gold: #dbaa43;
  --dark: #102638;
  --atlas-surface: #fffefa;
  --atlas-soft: #ebece5;
  --atlas-pine: #31574a;
  --atlas-amber-ink: #805714;
  --atlas-focus: #96700d;
  --atlas-shadow: 0 12px 34px -24px #15344860;
  --atlas-gutter: clamp(18px, 3.4vw, 48px);
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.7;
}
.atlas-root *, .atlas-root *::before, .atlas-root *::after { box-sizing: border-box; }
.atlas-root ::selection { color: #fff; background: #31574a; }
.atlas-root h1, .atlas-root h2, .atlas-root h3, .atlas-root h4,
.atlas-root .dashboard-content h1, .atlas-root .dashboard-content h2,
.atlas-root .dashboard-content h3 {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.atlas-root h1 { font-size: clamp(32px, 4.6vw, 60px); margin: 15px 0 22px; }
.atlas-root h2 { font-size: clamp(24px, 2.6vw, 36px); margin: 12px 0 18px; }
.atlas-root h3 { font-size: 21px; margin: 16px 0 10px; }
.atlas-root h4 { font-size: 16px; margin: 12px 0 8px; }
.atlas-root p { margin: 0 0 16px; }
.atlas-root li { line-height: 1.7; }
.atlas-root a { color: inherit; text-underline-offset: 4px; }
.atlas-root a:hover { color: var(--atlas-amber-ink); }
.atlas-root button, .atlas-root input, .atlas-root select, .atlas-root summary { font: inherit; }
.atlas-root button, .atlas-root .button, .atlas-root select, .atlas-root input:not([type='radio']):not([type='range']) { min-height: 44px; }
.atlas-root button { cursor: pointer; }
.atlas-root .button, .atlas-root button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 15px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  background: var(--atlas-surface);
  color: var(--ink);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.atlas-root .button { display: inline-flex; gap: 14px; align-items: center; justify-content: center; text-decoration: none; }
.atlas-root .button.outline { outline: none; background: transparent; border-color: #b1bdbf; }
.atlas-root .button.gold { background: var(--gold); color: #172d3d; border-color: #c89a39; }
.atlas-root button:hover, .atlas-root .button:hover { filter: none; background: var(--atlas-soft); border-color: #82979f; color: var(--ink); }
.atlas-root .button.gold:hover { background: #e7ba57; color: #172d3d; border-color: #b2872b; }
.atlas-root button:disabled, .atlas-root button[aria-disabled='true'] {
  opacity: 1;
  cursor: default;
  background: #e9edea;
  border-color: #cdd5d2;
  color: #52636b;
  box-shadow: none;
}
.atlas-root a:focus-visible, .atlas-root button:focus-visible,
.atlas-root .button.outline:focus-visible, .atlas-root input:focus-visible,
.atlas-root select:focus-visible, .atlas-root summary:focus-visible,
.atlas-root #viewport:focus-visible { outline: 3px solid var(--atlas-focus); outline-offset: 4px; }
.atlas-root .eyebrow { font-size: 10px; line-height: 1.55; font-weight: 750; letter-spacing: .14em; color: var(--atlas-pine); margin: 0 0 10px; }
.atlas-root .dot { background: var(--gold); margin-right: 7px; }
.atlas-root .small-note { font-size: 12px !important; line-height: 1.7; color: var(--muted); }
.atlas-root .intro { color: var(--muted); font-size: 17px; line-height: 1.75; max-width: 65ch; }
.atlas-root .quiet-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.atlas-root .dashboard-shell, .atlas-root .dashboard-content { background: var(--paper); }
.atlas-root .dashboard-content { container-type: inline-size; container-name: atlas-content; }
.atlas-root .dashboard-content #main { max-width: 1540px; margin: 0 auto; }
.atlas-root .dashboard-sidebar { background: #f9f8f3; border-color: var(--line); }
.atlas-root .dashboard-sidebar nav a { min-height: 38px; border-radius: 7px; color: var(--ink); }
.atlas-root .dashboard-sidebar nav a[aria-current], .atlas-root .dashboard-sidebar nav a:hover { background: #e7ece6; color: #254c3c; }
.atlas-root .dashboard-sidebar nav a[aria-current] svg, .atlas-root .dashboard-sidebar nav a:hover svg { color: #254c3c; }
.atlas-root .dashboard-content .topbar { background: var(--atlas-surface); border-color: var(--line); }
.atlas-root .atlas-sections {
  gap: 6px;
  padding: 10px var(--atlas-gutter);
  background: var(--atlas-surface);
  border-color: var(--line);
  font: 650 13px/1.4 Inter, system-ui, sans-serif;
}
.atlas-root .atlas-sections a { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 7px; color: var(--muted); }
.atlas-root .atlas-sections a:hover { background: var(--atlas-soft); color: var(--ink); }
.atlas-root .atlas-sections a[aria-current='page'] { background: var(--ink); color: var(--atlas-surface); box-shadow: inset 0 -3px var(--gold); }
.atlas-root .mobile-navigation summary { min-height: 44px; display: flex; align-items: center; border-color: var(--line); color: var(--ink); }
.atlas-root .mobile-navigation nav { background: var(--atlas-surface); border-color: var(--line); border-radius: 8px; }
.atlas-root .mobile-navigation nav a { min-height: 44px; display: flex; align-items: center; }

/* Warm prairie light around the original equipment illustrations. */
.atlas-root .dashboard-content .hero {
  min-height: 460px;
  margin: 28px var(--atlas-gutter) 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--atlas-surface);
  box-shadow: var(--atlas-shadow);
  grid-template-columns: 1.03fr 1fr;
}
.atlas-root .dashboard-content .hero-copy { padding: clamp(28px, 4vw, 56px); align-self: center; }
.atlas-root .dashboard-content .hero h1 { font-size: clamp(36px, 4.8vw, 62px); line-height: 1.08; margin: 18px 0 24px; }
.atlas-root h1 em { color: var(--atlas-amber-ink); font-style: normal; }
.atlas-root .hero-actions { gap: 12px 20px; flex-direction: row; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.atlas-root .hero-caption { font-size: 12px; color: var(--muted); margin: 22px 0 0; }
.atlas-root .dashboard-content .hero-model {
  background: radial-gradient(ellipse at 50% 30%, #f8f5e8 0%, #e4e9e5 65%, #ccd7d3 100%);
  border-left: 1px solid var(--line);
  border-top: 0;
  min-height: 400px;
}
.atlas-root .hero-model img { padding: 24px 8px 70px; object-fit: contain; filter: drop-shadow(0 16px 18px #29434825); }
.atlas-root .model-badge { top: 22px; left: 22px; border-radius: 20px; border: 1px solid #bac7bf; background: #fffefae8; color: #37544c; padding: 7px 11px; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.atlas-root .model-caption { bottom: 22px; left: 22px; right: 22px; border-color: #b0c0b7; font-size: 10px; color: #335249; gap: 12px; padding-top: 14px; }
.atlas-root .model-caption strong { font-family: inherit; font-size: 19px; line-height: 1.3; color: #153747; }
.atlas-root .promise-strip { margin: 0 var(--atlas-gutter); padding: 0; border-bottom: 1px solid var(--line); }
.atlas-root .promise-strip > div { padding: 24px 18px 24px 0; }
.atlas-root .promise-strip span { color: var(--atlas-amber-ink); font-weight: 750; }
.atlas-root .promise-strip strong { font-size: 13px; }
.atlas-root .promise-strip p { margin: 5px 0 0 27px; font-size: 12px; line-height: 1.6; }
.atlas-root .library { padding: 44px var(--atlas-gutter) 56px; }
.atlas-root .section-heading { align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.atlas-root .section-heading h2 { font-size: clamp(25px, 2.5vw, 34px); margin: 8px 0 0; }
.atlas-root .section-heading > p { font-size: 13px; line-height: 1.6; margin: 0; max-width: 35ch; }
.atlas-root .filters, .atlas-root .component-filters {
  padding: 18px;
  margin: 0 0 24px;
  background: var(--atlas-surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  gap: 14px;
}
.atlas-root .filters label span, .atlas-root .inspector label { font-size: 12px; font-weight: 650; margin: 0 0 8px; }
.atlas-root .filters input, .atlas-root .filters select,
.atlas-root .component-filters input, .atlas-root .component-filters select,
.atlas-root .inspector select, .atlas-root .component-share input {
  background: var(--atlas-surface);
  border: 1px solid #bbc8c8;
  color: var(--ink);
  padding: 11px 12px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.45;
  max-width: 100%;
}
.atlas-root .filters > span, .atlas-root #component-results, .atlas-root .atlas-library-status { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.atlas-root .model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.atlas-root .model-card { border: 1px solid var(--line); background: var(--atlas-surface); border-radius: 12px; box-shadow: var(--atlas-shadow); color: var(--ink); }
.atlas-root .model-card:hover { border-color: #7f9a8e; box-shadow: 0 12px 30px -20px #15344870; color: var(--ink); }
.atlas-root .card-image { background: radial-gradient(ellipse at 50% 25%, #f4f5ec 0%, #e1e8e2 75%); aspect-ratio: 1.5; border-bottom: 1px solid var(--line); }
.atlas-root .card-image img { padding: 12px; filter: drop-shadow(0 7px 9px #23473720); }
.atlas-root .card-number { top: 12px; left: 14px; border-radius: 5px; background: #fffefaeb; color: #3c584b; padding: 3px 7px; font-size: 10px; font-weight: 700; }
.atlas-root .card-copy { padding: 20px; }
.atlas-root .card-copy .eyebrow { font-size: 9px; color: var(--atlas-pine); margin: 0 0 9px; }
.atlas-root .card-copy h3 { font-size: 20px; line-height: 1.25; margin: 0 0 12px; gap: 8px; }
.atlas-root .card-copy h3 span { font-size: 17px; color: var(--atlas-amber-ink); }
.atlas-root .card-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.65; margin-bottom: 16px; min-height: 0; color: var(--muted); }
.atlas-root .card-copy small { font-size: 9px; color: var(--atlas-pine); letter-spacing: .08em; font-weight: 650; }
.atlas-root .atlas-start-paths { padding: 36px var(--atlas-gutter) 4px; }
.atlas-root .atlas-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.atlas-root .atlas-path-card { position: relative; display: flex; flex-direction: column; align-content: start; gap: 0; border: 1px solid var(--line); border-radius: 12px; padding: 0; overflow: hidden; background: var(--atlas-surface); color: var(--ink); }
.atlas-root .atlas-path-card:hover { border-color: #819c8e; background: #eef1e8; color: var(--ink); }
.atlas-root .atlas-path-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: #e5ebe2; color: var(--atlas-pine); grid-row: span 3; }
.atlas-root .atlas-path-icon svg { width: 20px; height: 20px; }
.atlas-root .atlas-path-number { position: absolute; left: 14px; top: 12px; padding: 3px 7px; border-radius: 5px; background: #fffefaeb; color: #3c584b; font-size: 10px; font-weight: 750; letter-spacing: .09em; }
.atlas-root .atlas-path-image { position: relative; aspect-ratio: 1.85; background: radial-gradient(ellipse at 50% 25%, #f4f5ec, #e1e8e2 75%); border-bottom: 1px solid var(--line); }
.atlas-root .atlas-path-image img { display: block; width: 100%; height: 100%; position: absolute; object-fit: contain; padding: 12px; }
.atlas-root .atlas-path-card > div:last-child { padding: 20px; }
.atlas-root .atlas-path-card .eyebrow { font-size: 9px; margin-bottom: 9px; }
.atlas-root .atlas-path-link { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; margin-top: 12px; color: var(--atlas-pine); font-size: 12px; font-weight: 650; }
.atlas-root .atlas-path-card h2, .atlas-root .atlas-path-card h3 { font-size: 17px; line-height: 1.3; margin: 0; }
.atlas-root .atlas-path-card p { font-size: 12px; line-height: 1.6; margin: 0; color: var(--muted); }
.atlas-root .editorial-block { background: linear-gradient(118deg, #153248, #1a423d); color: #f7f5ed; padding: 46px var(--atlas-gutter); gap: 24px 48px; }
.atlas-root .editorial-block h2 { color: #f7f5ed; font-size: clamp(26px, 2.7vw, 38px); max-width: 24ch; }
.atlas-root .editorial-block .eyebrow { color: #dfbd75; }
.atlas-root .editorial-block > p { color: #d4e0dc; font-size: 14px; line-height: 1.8; }
.atlas-root .editorial-block .button.outline { background: #ffffff0b; color: #f7f5ed; border-color: #8baba2; }
.atlas-root .editorial-block .quiet-link { color: #f7f5ed; }

/* The model is the focal point. Reading remains useful before WebGL loads. */
.atlas-root .detail-heading { padding: 30px var(--atlas-gutter) 22px; max-width: 1080px; }
.atlas-root .back { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); }
.atlas-root .detail-heading .eyebrow { margin: 14px 0 10px; }
.atlas-root .dashboard-content .detail-heading h1 { font-size: clamp(29px, 3.3vw, 43px); line-height: 1.15; margin: 0 0 17px; }
.atlas-root .detail-heading > p:last-child { color: var(--muted); font-size: 15px; max-width: 76ch; line-height: 1.8; }
.atlas-root .atlas-lesson-intro { margin: 28px var(--atlas-gutter) 0; padding: 20px 24px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; background: var(--atlas-surface); }
.atlas-root .atlas-lesson-intro p { max-width: 84ch; margin-bottom: 12px; font-size: 14px; }
.atlas-root .atlas-lesson-meta { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.atlas-root .atlas-lesson-meta > span { display: inline-flex; gap: 7px; align-items: center; }
.atlas-root .atlas-lesson-nav { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px var(--atlas-gutter) 24px; }
.atlas-root .atlas-lesson-nav a > span { color: var(--atlas-amber-ink); font-size: 10px; font-variant-numeric: tabular-nums; margin-right: 7px; }
.atlas-root .atlas-lesson-nav a { display: inline-flex; min-height: 44px; align-items: center; padding: 9px 12px; border-radius: 7px; border: 1px solid var(--line); font-size: 12px; font-weight: 650; text-decoration: none; background: var(--atlas-soft); }
.atlas-root .atlas-lesson-nav a:hover { background: #dee6dc; color: var(--ink); }
.atlas-root .explorer { margin: 0 var(--atlas-gutter) 40px; grid-template-columns: minmax(0, 2.8fr) minmax(265px, 1fr); border: 1px solid #aebfbe; border-radius: 14px; box-shadow: var(--atlas-shadow); overflow: hidden; }
.atlas-root .viewport-wrap { background: #102638; color: #eef1e7; }
.atlas-root .atlas-viewer-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding: 15px 20px; border-bottom: 1px solid #466167; background: #173343; color: #edf1e6; }
.atlas-root .atlas-viewer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
.atlas-root .atlas-viewer-meta span { color: #cbd8d5; font-size: 11px; }
.atlas-root .atlas-viewer-heading .atlas-focus-note { flex-basis: 100%; max-width: none; margin: 0; color: #becfc9; font-size: 11px; line-height: 1.6; }
.atlas-root .atlas-viewer-heading h2 { color: #edf1e6; font-size: 15px; line-height: 1.4; margin: 0; letter-spacing: -.015em; }
.atlas-root .atlas-viewer-heading p { color: #cbd8d5; font-size: 11px; margin: 0; }
.atlas-root .atlas-viewer-heading .eyebrow { color: #e2c383; font-size: 9px; margin: 0 0 4px; }
.atlas-root .atlas-viewer-heading > span { font-size: 11px; white-space: nowrap; color: #d6e0d6; }
.atlas-root #viewport { height: 470px; background: radial-gradient(ellipse at 50% 45%, #294951 0%, #102638 77%); }
.atlas-root .fallback-poster { padding: 18px; }
.atlas-root #load-state { top: 14px; left: 14px; padding: 6px 10px; border-radius: 6px; color: #e8eee8; background: #0c2438e6; font-size: 11px; line-height: 1.5; max-width: calc(100% - 28px); }
.atlas-root #load-scene { width: max-content; max-width: calc(100% - 36px); min-height: 48px; padding: 14px 20px; box-shadow: 0 5px 22px #0719298f; font-size: 13px; }
.atlas-root .viewer-toolbar, .atlas-root .process-toolbar { background: #102638; color: #e7efeb; padding: 14px 16px; gap: 8px; border-color: #405a65; }
.atlas-root .viewer-toolbar button, .atlas-root .process-toolbar button {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #607983;
  border-radius: 7px;
  background: #183747;
  color: #e8f0ea;
  font-size: 12px;
  font-weight: 600;
}
.atlas-root .viewer-toolbar button:hover, .atlas-root .process-toolbar button:hover { background: #254b59; color: #fff; border-color: #a1b5b3; }
.atlas-root .viewer-toolbar button[aria-pressed='true'], .atlas-root .process-toolbar button[aria-pressed='true'] { background: #dbaa43; border-color: #edcc86; color: #11283a; }
.atlas-root .viewer-toolbar button:disabled, .atlas-root .process-toolbar button:disabled { background: #263e4b; border-color: #4b6370; color: #beced0; opacity: 1; }
.atlas-root .viewer-toolbar label { min-height: 44px; gap: 12px; font-size: 11px; }
.atlas-root .viewer-toolbar input[type='range'] { min-height: 32px; accent-color: #e7bc63; width: 110px; }
.atlas-root .process-toolbar p { font-size: 11px; line-height: 1.6; color: #c0d1cf; margin: 5px 0 0; }
.atlas-root .viewer-hint { padding: 0 18px 15px; margin: 0; font-size: 11px; line-height: 1.7; color: #c5d3d1; }
.atlas-root .inspector { padding: 24px 22px; background: var(--atlas-surface); border-left: 1px solid var(--line); color: var(--ink); }
.atlas-root .inspector .eyebrow { font-size: 9px; margin-bottom: 12px; }
.atlas-root .inspector h2 { font-size: 21px; line-height: 1.3; margin: 0 0 13px; letter-spacing: -.025em; }
.atlas-root .inspector > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; font-size: 13px; margin-bottom: 20px; }
.atlas-root .inspector button { min-height: 44px; font-size: 12px; padding: 10px 12px; border-radius: 7px; }
.atlas-root .inspector select { margin: 0 0 10px; }
.atlas-root .inspector button[aria-pressed='true'] { background: var(--gold); color: #132d3f; border-color: #c3912f; }
.atlas-root .inspector-count { font-size: 11px; color: var(--muted); margin: 12px 0 0; line-height: 1.6; }
.atlas-root .component-share { margin-top: 20px; padding-top: 18px; border-color: var(--line); }
.atlas-root .component-share label { font-size: 11px; }
.atlas-root .component-share input { margin: 8px 0; width: 100%; font-size: 11px; }
.atlas-root .component-share p { font-size: 11px; line-height: 1.6; margin: 10px 0 0; color: var(--muted); }
.atlas-root .component-share small { display: block; font-size: 10px; line-height: 1.6; margin-top: 8px; color: var(--muted); }
.atlas-root .legend { margin-top: 20px; padding-top: 18px; font-size: 11px; line-height: 1.5; border-color: var(--line); gap: 10px; }
.atlas-root .legend i { width: 9px; height: 9px; border-radius: 2px; margin-right: 9px; }
.atlas-root .linked-component-note { margin: 0 var(--atlas-gutter) 20px; padding: 16px 20px; border-radius: 8px; background: #eef0e4; border-color: var(--gold); font-size: 13px; line-height: 1.7; }
.atlas-root .status-note { background: #eceee3; border-left-color: var(--gold); color: var(--ink); border-radius: 0 8px 8px 0; font-size: 13px; padding: 15px 18px; line-height: 1.75; }

/* Process and study cards: numbered, readable, one clear action per role. */
.atlas-root .lesson-grid { padding: 0 var(--atlas-gutter) 44px; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 36px; align-items: start; }
.atlas-root .lesson-grid h2 { font-size: 29px; margin: 6px 0 18px; }
.atlas-root .lesson-grid h3 { font-size: 19px; margin: 28px 0 12px; }
.atlas-root .lesson-grid article > p { font-size: 14px; line-height: 1.85; max-width: 78ch; }
.atlas-root .atlas-lesson-start { padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--atlas-surface); }
.atlas-root .atlas-lesson-start h3 { font-size: 20px; line-height: 1.4; margin: 9px 0 14px; }
.atlas-root .atlas-lesson-start ol { padding-left: 21px; margin: 0 0 18px; }
.atlas-root .atlas-lesson-start li { padding: 5px 0; font-size: 13px; color: var(--muted); }
.atlas-root .atlas-lesson-start li::marker { color: var(--atlas-amber-ink); font-weight: 700; }
.atlas-root .knowledge-check.atlas-knowledge-panel { margin: 0 var(--atlas-gutter) 44px; max-width: none; padding: 28px; }
.atlas-root .atlas-knowledge-panel > h3 { max-width: 68ch; font-size: 22px; }
.atlas-root .atlas-knowledge-panel fieldset { max-width: 820px; }
.atlas-root .source-link { font-size: 13px; line-height: 1.9; color: var(--muted); overflow-wrap: anywhere; }
.atlas-root .source-link a { color: var(--atlas-pine); }
.atlas-root .knowledge-check { padding: 24px; background: #e8eee4; border: 1px solid #ced9cc; border-radius: 12px; box-shadow: var(--atlas-shadow); }
.atlas-root .knowledge-check h3 { font-size: 19px; line-height: 1.4; margin: 10px 0 18px; }
.atlas-root .knowledge-check fieldset { margin: 18px 0; gap: 9px; }
.atlas-root .knowledge-check fieldset label { min-height: 50px; font-size: 13px; line-height: 1.5; padding: 12px; border: 1px solid #cad5c8; border-radius: 8px; background: var(--atlas-surface); gap: 12px; }
.atlas-root .knowledge-check fieldset label:has(input:checked) { background: #f6edd1; border-color: #a88228; }
.atlas-root .knowledge-check input { flex: none; width: 16px; height: 16px; accent-color: #31574a; }
.atlas-root .knowledge-check #answer-result { font-size: 13px; line-height: 1.7; margin: 14px 0 0; }
.atlas-root .study-guide, .atlas-root .process-lesson { padding: 36px var(--atlas-gutter) 44px; border-top: 1px solid var(--line); }
.atlas-root .study-guide h2, .atlas-root .process-lesson h2 { font-size: 29px; margin: 6px 0 15px; }
.atlas-root .study-guide > p, .atlas-root .process-lesson > p { font-size: 14px; line-height: 1.8; max-width: 84ch; }
.atlas-root .process-lesson > h3 { font-size: 21px; margin: 36px 0 10px; }
.atlas-root .study-guide ol, .atlas-root .process-nodes, .atlas-root .process-routes { gap: 16px; margin: 24px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atlas-root .study-guide li, .atlas-root .process-nodes article, .atlas-root .process-routes article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--atlas-surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--atlas-shadow);
}
.atlas-root .study-guide li::before { width: fit-content; color: var(--atlas-amber-ink); font-size: 10px; font-weight: 750; letter-spacing: .12em; margin-bottom: 14px; }
.atlas-root .study-guide li h3, .atlas-root .process-nodes h3 { font-size: 19px; line-height: 1.35; margin: 0 0 12px; }
.atlas-root .study-guide li p, .atlas-root .process-nodes p, .atlas-root .process-routes p { font-size: 13px; color: var(--muted); line-height: 1.8; margin: 0 0 20px; }
.atlas-root .study-guide li .button, .atlas-root .process-nodes .button { margin-top: auto; align-self: flex-start; font-size: 12px; max-width: 100%; text-align: left; background: var(--ink); border-color: var(--ink); color: #fffefa; padding: 11px 14px; }
.atlas-root .study-guide li .button:hover, .atlas-root .process-nodes .button:hover { color: #fffefa; background: #294e59; border-color: #294e59; }
.atlas-root .study-guide li .button:disabled, .atlas-root .process-nodes .button:disabled { background: #e9edea; border-color: #cdd5d2; color: #52636b; opacity: 1; }
.atlas-root .process-nodes .model-link { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; color: var(--atlas-pine); margin-top: 8px; line-height: 1.5; }
.atlas-root .atlas-node-thumbnail { display: block; aspect-ratio: 1.9; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 25%, #f4f5ec, #e1e8e2 75%); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 18px; }
.atlas-root .atlas-node-thumbnail img { display: block; position: absolute; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.atlas-root .atlas-node-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.atlas-root .atlas-node-actions .button { margin-top: 0; }
.atlas-root .atlas-node-actions .model-link { margin-top: 0; }
.atlas-root .atlas-node-boundary { border-top: 3px solid #d1b576 !important; }
.atlas-root .atlas-node-boundary .atlas-node-type { color: var(--atlas-amber-ink); background: #f3ecd9; }
.atlas-root .atlas-node-schematic { border-top: 3px solid #90a695 !important; }
.atlas-root .atlas-process-reading-note { background: var(--atlas-soft); border-radius: 8px; padding: 13px 16px; font-size: 12px !important; line-height: 1.8; }
.atlas-root .process-routes h4 { font-size: 16px; line-height: 1.5; margin: 12px 0; }
.atlas-root .process-routes .stream-label { color: var(--ink); font-size: 10px; letter-spacing: .09em; line-height: 1.6; padding-left: 10px; margin-bottom: 0; }
.atlas-root .atlas-node-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.atlas-root .atlas-node-number { display: inline-flex; width: 34px; height: 34px; flex: none; align-items: center; justify-content: center; border-radius: 8px; background: #edf0e4; color: var(--atlas-amber-ink); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.atlas-root .atlas-node-type { display: inline-flex; align-items: center; align-self: flex-start; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.5; color: var(--atlas-pine); background: #e9eee6; border-radius: 20px; padding: 5px 9px; }
.atlas-root .atlas-node-type[data-kind='boundary'] { background: #f3ecd9; color: var(--atlas-amber-ink); }
.atlas-root .parts-reference { padding: 36px var(--atlas-gutter) 44px; border-top: 1px solid var(--line); }
.atlas-root .parts-reference .section-heading > a { display: inline-flex; min-height: 44px; align-items: center; color: var(--atlas-pine); font-size: 12px; }
.atlas-root .part-table { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; max-height: 34rem; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 12px 0 0; align-content: start; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.atlas-root .part-table:focus-visible { outline: 3px solid var(--atlas-focus); outline-offset: 4px; }
.atlas-root .reference-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--atlas-surface); }
.atlas-root .reference-filters label { flex: 1 1 230px; font-size: 12px; font-weight: 650; display: grid; gap: 8px; min-width: 0; }
.atlas-root .reference-filters input { width: 100%; min-width: 0; background: var(--atlas-surface); border: 1px solid #bbc8c8; color: var(--ink); padding: 11px 12px; border-radius: 7px; font-size: 13px; }
.atlas-root .reference-filters > span { font-size: 12px; color: var(--muted); flex: 0 1 100%; }
.atlas-root #reference-empty { padding: 18px; background: var(--atlas-soft); border-radius: 8px; font-size: 13px; }
.atlas-root #model-explorer, .atlas-root #lesson-overview, .atlas-root #component-study, .atlas-root #process-study, .atlas-root #component-reference, .atlas-root #knowledge-check { scroll-margin-top: 100px; }
.atlas-root .part-table details { padding: 0; border-color: var(--line); }
.atlas-root .part-table summary { min-height: 52px; padding: 14px 8px; font-size: 13px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; cursor: pointer; }
.atlas-root .part-table details[open] { background: var(--atlas-surface); }
.atlas-root .part-table details p { padding: 0 12px 18px; margin: 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.atlas-root .related-models { padding: 12px var(--atlas-gutter) 36px; }
.atlas-root .related-models h2 { font-size: 23px; margin-bottom: 14px; }
.atlas-root .related-models > div { gap: 10px; margin: 0 0 16px; }
.atlas-root .related-models a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--atlas-surface); font-size: 12px; line-height: 1.6; }
.atlas-root .related-models p { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 95ch; }

/* Component search, briefings and the text-first learning catalogue. */
.atlas-root .text-page, .atlas-root .component-directory { max-width: 1280px; margin: 0 auto; padding: 38px var(--atlas-gutter) 56px; }
.atlas-root .text-page h1, .atlas-root .component-directory h1 { font-size: clamp(32px, 4.3vw, 54px); line-height: 1.14; margin: 14px 0 22px; }
.atlas-root .text-page h2 { font-size: 29px; line-height: 1.3; margin: 30px 0 16px; }
.atlas-root .text-page h3 { font-size: 21px; margin: 26px 0 12px; }
.atlas-root .text-page > p { max-width: 85ch; }
.atlas-root .text-page p, .atlas-root .text-page li { font-size: 14px; line-height: 1.85; }
.atlas-root .text-page a:not(.button) { color: var(--atlas-pine); }
.atlas-root .path-card { padding: 26px; margin-top: 22px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 12px; background: var(--atlas-surface); box-shadow: var(--atlas-shadow); }
.atlas-root .path-card h2 { font-size: 24px; margin: 0 0 16px; }
.atlas-root .path-card ol { margin: 0; padding-left: 22px; }
.atlas-root .path-card li { padding: 5px 0; }
.atlas-root .path-card li a { min-height: 44px; display: inline-flex; align-items: center; }
.atlas-root .path-card > div > p:last-child { margin-bottom: 0; }
.atlas-root .news-desk .path-card { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.atlas-root .news-desk .path-card > div:last-child { background: var(--atlas-soft); border-radius: 9px; padding: 20px; align-self: start; }
.atlas-root .news-desk .path-card > div:last-child img { display: block; padding: 12px 0; margin-bottom: 12px; }
.atlas-root .news-desk .path-card .button { justify-content: flex-start; margin: 0 0 14px; width: 100%; background: var(--atlas-surface); }
.atlas-root .news-desk .path-card .small-note { font-size: 12px !important; line-height: 1.75; }
.atlas-root .component-filters { margin-top: 24px; }
.atlas-root .component-filters label { font-size: 12px; font-weight: 650; gap: 8px; flex-basis: 220px; }
.atlas-root .component-directory-grid { gap: 16px; margin-top: 24px; }
.atlas-root .component-group { background: var(--atlas-surface); padding: 22px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--atlas-shadow); }
.atlas-root .component-group h2 { font-size: 19px; line-height: 1.4; margin: 10px 0; }
.atlas-root .component-group > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 14px 0 18px; }
.atlas-root .component-model { color: var(--atlas-pine); font-size: 12px; }
.atlas-root .component-group details { padding-top: 8px; margin-top: 16px; }
.atlas-root .component-group summary { padding: 8px 0; min-height: 44px; font-size: 12px; font-weight: 650; line-height: 1.6; }
.atlas-root .component-group ul { max-height: 310px; padding-left: 18px; }
.atlas-root .component-group li { font-size: 12px; margin: 0; }
.atlas-root .component-group li a { min-height: 44px; display: inline-flex; align-items: center; line-height: 1.5; }
.atlas-root .source-table { font-size: 13px; }
.atlas-root .source-table th, .atlas-root .source-table td { padding: 14px 10px; border-color: var(--line); line-height: 1.7; }

/* Structured courses preserve their clear process maps and independent assets. */
.atlas-root .plant-course { max-width: 1280px; padding: 38px var(--atlas-gutter) 64px; }
.atlas-root .course-intro h1 { font-size: clamp(32px, 4vw, 52px); margin: 16px 0 22px; }
.atlas-root .course-lede, .atlas-root .plant-course .course-lede { color: var(--muted); font-size: 18px; line-height: 1.8; }
.atlas-root .course-poster { margin: 28px 0; }
.atlas-root .course-poster img { border: 1px solid var(--line); border-radius: 12px; }
.atlas-root .course-poster figcaption, .atlas-root .plant-course .course-poster figcaption { color: var(--muted); font-size: 12px; line-height: 1.75; margin-top: 12px; }
.atlas-root .course-actions { gap: 10px; margin: 0 0 26px; }
.atlas-root .course-stop-nav { gap: 12px; margin: 24px 0; }
.atlas-root .course-stop-nav a { min-height: 68px; background: var(--atlas-surface); border-color: var(--line); color: var(--ink); border-radius: 10px; padding: 16px; font-size: 13px; }
.atlas-root .course-stop-nav a:hover { background: #e8eee4; border-color: #9db2a4; }
.atlas-root .course-stop-nav span { color: var(--atlas-amber-ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.atlas-root .course-stop, .atlas-root .course-reading { background: var(--atlas-surface); color: var(--ink); border-color: var(--line); border-radius: 12px; margin: 26px 0; padding: 28px; }
.atlas-root .course-stop .eyebrow { color: var(--atlas-pine); }
.atlas-root .plant-course .course-stop h2, .atlas-root .plant-course .course-reading h2,
.atlas-root .plant-course .course-self-check h3 { color: var(--ink); }
.atlas-root .course-stop h2, .atlas-root .course-reading h2 { font-size: 26px; margin: 10px 0 18px; }
.atlas-root .course-stop p, .atlas-root .course-reading p { font-size: 14px; line-height: 1.85; }
.atlas-root .course-aim { color: var(--atlas-amber-ink); font-size: 16px !important; }
.atlas-root .course-map { background: #142e42; color: #e8eee9; border: 1px solid #38596b; border-radius: 12px; padding: 28px; margin: 28px 0; }
.atlas-root .plant-course .course-map h2 { color: #f7f5ed; font-size: 27px; }
.atlas-root .course-map .eyebrow { color: #e4c380; }
.atlas-root .course-map p { color: #d5dfd9; font-size: 14px; line-height: 1.8; }
.atlas-root .course-map-scroll { border-color: #507082; background: #102638; }
.atlas-root .course-route-list summary { background: #244459; color: #edcf8c; min-height: 44px; padding: 13px 16px; font-size: 13px; }
.atlas-root .course-route-list a { color: #d1e3f0; }
.atlas-root .course-route-list small { color: #c1d2d6; }
.atlas-root .course-self-check { background: #eef1e8; color: var(--ink); border-left-color: var(--gold); border-radius: 0 8px 8px 0; padding: 22px; margin: 24px 0; }
.atlas-root .course-self-check h3 { font-size: 17px; margin: 0 0 15px; }
.atlas-root .course-self-check summary { background: var(--atlas-surface); border: 1px solid var(--line); color: var(--atlas-pine); min-height: 44px; padding: 12px; font-size: 13px; }
.atlas-root .course-self-check details p { padding: 14px 0 0; margin-bottom: 0; }
.atlas-root .course-part-links { gap: 9px; margin: 22px 0; }
.atlas-root .course-part-links a { min-height: 44px; display: inline-flex; align-items: center; border-color: #b5c5c0; color: var(--atlas-pine); font-size: 13px; background: var(--atlas-surface); border-radius: 7px; padding: 11px 14px; }
.atlas-root .course-step-nav a, .atlas-root .course-reading li a { color: var(--atlas-pine); display: inline-flex; align-items: center; min-height: 44px; }
.atlas-root .rotating-role-card { border-color: var(--line); background: var(--atlas-surface); border-radius: 10px; }
.atlas-root .rotating-role-card .eyebrow { color: var(--atlas-pine); }
.atlas-root .rotating-role-card h3 { color: var(--ink); font-size: 20px; }
.atlas-root .rotating-role-card img { background: #e1e8e2; }
.atlas-root .rotating-evidence-table { font-size: 13px; }
.atlas-root .rotating-evidence-table caption { color: var(--atlas-amber-ink); }
.atlas-root .rotating-evidence-table th, .atlas-root .rotating-evidence-table td { border-color: var(--line); color: var(--ink); line-height: 1.8; padding: 14px; }
.atlas-root .rotating-evidence-table thead { background: #e8eee4; }
.atlas-root .rotating-evidence-table th { color: var(--atlas-pine); }
.atlas-root .tailings-role-grid .rotating-role-card img { background: #e1e8e2; }
.atlas-root .venturi-experiment { background: linear-gradient(135deg, var(--atlas-surface), #edf1e8); color: var(--ink); border-color: var(--line); border-top-color: var(--gold); border-radius: 12px; box-shadow: var(--atlas-shadow); }
.atlas-root .venturi-experiment h2 { font-size: 27px; }
.atlas-root .venturi-ideal-tag { background: #f6edcf; color: #805714; border-color: #c19a47; }
.atlas-root .venturi-assumptions { background: #e6ede5; border-left-color: var(--atlas-pine); }
.atlas-root .venturi-inputs, .atlas-root .venturi-results > div, .atlas-root .venturi-equations { background: var(--atlas-surface); color: var(--ink); border-color: var(--line); }
.atlas-root .venturi-inputs output { color: var(--atlas-amber-ink); }
.atlas-root .venturi-inputs input { accent-color: var(--atlas-pine); }
.atlas-root .venturi-experiment table { background: var(--atlas-surface); color: var(--ink); }
.atlas-root .venturi-experiment tbody tr:nth-child(2) { background: #f5edcf; }
.atlas-root .venturi-experiment th, .atlas-root .venturi-experiment td { border-color: var(--line); }
.atlas-root .venturi-equations summary { min-height: 44px; display: flex; align-items: center; color: var(--atlas-pine); }
.atlas-root .dashboard-content .atlas-footer { margin-top: 12px; padding: 28px var(--atlas-gutter); background: var(--atlas-surface); border-top: 1px solid var(--line); gap: 12px 28px; }
.atlas-root .atlas-footer > p { font-size: 12px; color: var(--muted); margin: 0 auto 0 0; }
.atlas-root .atlas-footer > div { gap: 12px 22px; flex-wrap: wrap; }
.atlas-root .atlas-footer > div a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--atlas-pine); }
.atlas-root .atlas-footer > small { color: var(--muted); font-size: 11px; line-height: 1.8; }
.atlas-root #atlas-theme-toggle { margin-left: auto; white-space: nowrap; background: var(--atlas-surface); color: var(--ink); border-color: var(--line); font-size: 12px; }

/* Available content width matters when the existing dashboard sidebar is open. */
@container atlas-content (max-width: 1050px) {
  .atlas-root .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atlas-root .explorer { grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr); }
  .atlas-root .dashboard-content .hero { grid-template-columns: 1fr 1fr; }
  .atlas-root .dashboard-content .hero-copy { padding: 32px 26px; }
  .atlas-root .dashboard-content .hero h1 { font-size: 42px; }
  .atlas-root .model-caption strong { font-size: 16px; }
  .atlas-root .model-caption { flex-wrap: wrap; }
}
@container atlas-content (max-width: 850px) {
  .atlas-root .explorer { grid-template-columns: 1fr; }
  .atlas-root .inspector { border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
  .atlas-root .inspector > .eyebrow, .atlas-root .inspector > h2, .atlas-root .inspector > #part-description { grid-column: 1 / -1; }
  .atlas-root .inspector > label, .atlas-root .inspector > select, .atlas-root .inspector > button, .atlas-root .inspector > #equipment-detail, .atlas-root .inspector > .inspector-count { grid-column: 1; }
  .atlas-root .inspector > .component-share { grid-column: 2; grid-row: 4 / span 6; margin-top: 0; padding-top: 0; border-top: 0; }
  .atlas-root .inspector > .legend, .atlas-root .inspector > .small-note { grid-column: 1 / -1; }
  .atlas-root .inspector > p:not(.eyebrow) { margin-bottom: 18px; }
  .atlas-root .lesson-grid { grid-template-columns: 1fr; gap: 24px; }
  .atlas-root .knowledge-check { max-width: 680px; }
  .atlas-root .atlas-path-grid { grid-template-columns: 1fr; }
  .atlas-root .atlas-path-card { display: grid; grid-template-columns: minmax(150px, .6fr) minmax(0, 1fr); }
  .atlas-root .atlas-path-image { aspect-ratio: auto; min-height: 190px; border-bottom: 0; border-right: 1px solid var(--line); }
  .atlas-root .dashboard-content .hero { grid-template-columns: 1fr; }
  .atlas-root .dashboard-content .hero-model { min-height: 330px; border-left: 0; border-top: 1px solid var(--line); }
  .atlas-root .hero-model img { max-height: 390px; padding-top: 12px; }
  .atlas-root .dashboard-content .hero h1 { font-size: 46px; }
  .atlas-root .news-desk .path-card, .atlas-root .path-card { grid-template-columns: 1fr; gap: 20px; }
  .atlas-root .editorial-block { grid-template-columns: 1fr; gap: 20px; }
  .atlas-root .course-stop-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container atlas-content (max-width: 600px) {
  .atlas-root .model-grid, .atlas-root .component-directory-grid, .atlas-root .study-guide ol,
  .atlas-root .process-nodes, .atlas-root .process-routes, .atlas-root .part-table { grid-template-columns: 1fr; }
  .atlas-root .section-heading { display: block; }
  .atlas-root .section-heading > p { margin-top: 12px; }
  .atlas-root .filters { flex-wrap: wrap; }
  .atlas-root .filters .search-label { flex-basis: 100%; }
  .atlas-root .filters > label { flex: 1 1 100%; }
  .atlas-root .filters select { width: 100%; max-width: none; }
  .atlas-root .inspector { display: block; }
  .atlas-root .inspector > .component-share { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
  .atlas-root .promise-strip { grid-template-columns: 1fr; }
  .atlas-root .promise-strip > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .atlas-root .promise-strip > div:last-child { border-bottom: 0; }
  .atlas-root .course-stop-nav { grid-template-columns: 1fr; }
  .atlas-root .course-part-links a { width: 100%; }
  .atlas-root .atlas-path-card { display: flex; }
  .atlas-root .atlas-path-image { min-height: 0; aspect-ratio: 1.85; border-bottom: 1px solid var(--line); border-right: 0; }
}
@media (max-width: 650px) {
  .atlas-root { --atlas-gutter: 16px; font-size: 14px; }
  .atlas-root .dashboard-content .hero { margin-top: 18px; }
  .atlas-root .dashboard-content .hero-copy { padding: 28px 22px; }
  .atlas-root .dashboard-content .hero h1 { font-size: clamp(35px, 9.2vw, 46px); }
  .atlas-root .intro { font-size: 15px; }
  .atlas-root .hero-actions { gap: 8px 18px; }
  .atlas-root .hero-actions .button { width: 100%; }
  .atlas-root .hero-model img { max-height: 340px; }
  .atlas-root .model-caption { left: 18px; right: 18px; bottom: 18px; }
  .atlas-root .model-badge { top: 16px; left: 16px; }
  .atlas-root .detail-heading { padding-top: 20px; padding-bottom: 18px; }
  .atlas-root .dashboard-content .detail-heading h1 { font-size: 29px; }
  .atlas-root .detail-heading > p:last-child { font-size: 14px; }
  .atlas-root .atlas-lesson-intro { padding: 18px; }
  .atlas-root .atlas-lesson-meta { font-size: 11px; gap: 7px 14px; }
  .atlas-root .atlas-lesson-nav { gap: 7px; }
  .atlas-root .atlas-lesson-nav a { flex: 1 1 calc(50% - 7px); text-align: center; justify-content: center; }
  .atlas-root .explorer { margin-bottom: 28px; border-radius: 11px; }
  .atlas-root #viewport { height: 330px; }
  .atlas-root .atlas-viewer-heading { padding: 13px 14px; flex-wrap: wrap; gap: 6px 12px; }
  .atlas-root .atlas-viewer-heading h2 { font-size: 14px; }
  .atlas-root .atlas-viewer-heading > span { font-size: 10px; }
  .atlas-root .viewer-toolbar, .atlas-root .process-toolbar { padding: 12px; gap: 7px; }
  .atlas-root .viewer-toolbar button, .atlas-root .process-toolbar button { font-size: 11px; padding: 9px 10px; }
  .atlas-root .viewer-toolbar label { width: 100%; justify-content: space-between; }
  .atlas-root .viewer-toolbar input[type='range'] { width: 135px; }
  .atlas-root .inspector { padding: 22px 20px; }
  .atlas-root .lesson-grid { padding-bottom: 30px; gap: 22px; }
  .atlas-root .lesson-grid h2, .atlas-root .study-guide h2, .atlas-root .process-lesson h2 { font-size: 26px; }
  .atlas-root .study-guide, .atlas-root .process-lesson, .atlas-root .parts-reference { padding-top: 28px; padding-bottom: 32px; }
  .atlas-root .study-guide li, .atlas-root .process-nodes article, .atlas-root .process-routes article { padding: 20px; }
  .atlas-root .study-guide li h3, .atlas-root .process-nodes h3 { font-size: 18px; }
  .atlas-root .knowledge-check { padding: 21px; }
  .atlas-root .knowledge-check.atlas-knowledge-panel { padding: 23px 20px; }
  .atlas-root .atlas-knowledge-panel > h3 { font-size: 20px; }
  .atlas-root .part-table { max-height: 28rem; }
  .atlas-root .reference-filters { padding: 15px; }
  .atlas-root .parts-reference .section-heading > a { margin-top: 8px; margin-right: 18px; }
  .atlas-root .text-page, .atlas-root .component-directory, .atlas-root .plant-course { padding-top: 28px; padding-bottom: 42px; }
  .atlas-root .text-page h1, .atlas-root .component-directory h1, .atlas-root .course-intro h1 { font-size: 34px; }
  .atlas-root .text-page h2 { font-size: 26px; }
  .atlas-root .path-card { padding: 21px; }
  .atlas-root .path-card h2 { font-size: 23px; }
  .atlas-root .component-filters { padding: 16px; }
  .atlas-root .component-filters button { flex: 1 1 130px; }
  .atlas-root .component-filters label { flex-basis: 100%; }
  .atlas-root .component-group { padding: 21px; }
  .atlas-root .component-group h2 { font-size: 18px; }
  .atlas-root .course-lede, .atlas-root .plant-course .course-lede { font-size: 16px; }
  .atlas-root .course-map, .atlas-root .course-stop, .atlas-root .course-reading { padding: 21px 18px; }
  .atlas-root .course-self-check { padding: 19px 16px; }
  .atlas-root .course-actions .button { width: 100%; }
  .atlas-root .atlas-footer > div { gap: 2px 18px; }
  .atlas-root .atlas-footer > small { font-size: 10px; }
  .atlas-root #atlas-theme-toggle { margin-left: 0; padding: 10px; font-size: 11px; }
}

/* The same contrast and hierarchy follow the dashboard's dark preference. */
.dark .atlas-root, .atlas-root.dark {
  --ink: #e8efeb;
  --muted: #bacac6;
  --paper: #101f2b;
  --line: #354c56;
  --atlas-surface: #172c38;
  --atlas-soft: #203944;
  --atlas-pine: #b2d0bf;
  --atlas-amber-ink: #e3be73;
  --atlas-focus: #ecc66b;
  --atlas-shadow: 0 12px 34px -24px #000b;
}
.dark .atlas-root .dashboard-sidebar, .dark .atlas-root .dashboard-content .topbar,
.dark .atlas-root .atlas-sections, .dark .atlas-root .dashboard-content .atlas-footer { background: var(--atlas-surface); color: var(--ink); border-color: var(--line); }
.dark .atlas-root .dashboard-sidebar nav a { color: var(--ink); }
.dark .atlas-root .dashboard-sidebar nav a[aria-current], .dark .atlas-root .dashboard-sidebar nav a:hover { background: #29443e; color: #d1e5d5; }
.dark .atlas-root .atlas-sections a { color: var(--muted); }
.dark .atlas-root .atlas-sections a[aria-current='page'] { background: #304b51; color: #f8f5e8; }
.dark .atlas-root .dashboard-content .hero { background: var(--atlas-surface); }
.dark .atlas-root .dashboard-content .hero-model, .dark .atlas-root .card-image { background: radial-gradient(ellipse at 50% 25%, #45635c 0%, #273f48 70%); }
.dark .atlas-root .hero-model { border-color: var(--line); }
.dark .atlas-root .model-caption { border-color: #789187; color: #d2e1d6; }
.dark .atlas-root .model-caption strong { color: #f2f4e8; }
.dark .atlas-root .model-badge { color: #e7eee0; background: #19352bda; border-color: #748c7d; }
.dark .atlas-root .card-number { background: #17372ad9; color: #d5e4cc; }
.dark .atlas-root .card-copy .eyebrow { color: var(--atlas-pine); }
.dark .atlas-root .card-copy > p:not(.eyebrow), .dark .atlas-root .detail-heading > p:last-child { color: var(--muted); }
.dark .atlas-root .atlas-path-icon, .dark .atlas-root .atlas-node-type { background: #28463a; color: #c3dbca; }
.dark .atlas-root .atlas-path-image, .dark .atlas-root .atlas-node-thumbnail { background: radial-gradient(ellipse at 50% 25%, #45635c, #273f48 75%); }
.dark .atlas-root .atlas-path-number { background: #17372ad9; color: #d5e4cc; }
.dark .atlas-root .atlas-path-card:hover { background: #203b3a; }
.dark .atlas-root .atlas-node-number { background: #2d4441; }
.dark .atlas-root .atlas-node-type[data-kind='boundary'] { background: #443c29; color: #e3c47e; }
.dark .atlas-root .atlas-node-boundary .atlas-node-type { background: #443c29; color: #e3c47e; }
.dark .atlas-root .atlas-lesson-nav a:hover { background: #2e4841; }
.dark .atlas-root .filters input, .dark .atlas-root .filters select,
.dark .atlas-root .inspector select, .dark .atlas-root .component-filters input,
.dark .atlas-root .component-filters select, .dark .atlas-root .component-share input { background: #112633; color: var(--ink); border-color: #5c7378; }
.dark .atlas-root .reference-filters input { background: #112633; color: var(--ink); border-color: #5c7378; }
.dark .atlas-root .knowledge-check { background: #1d3931; border-color: #446152; }
.dark .atlas-root .knowledge-check fieldset label { background: #173029; border-color: #52705a; color: var(--ink); }
.dark .atlas-root .knowledge-check fieldset label:has(input:checked) { background: #4c4128; border-color: #c6a04e; }
.dark .atlas-root .knowledge-check input { accent-color: #e4bd69; }
.dark .atlas-root .status-note, .dark .atlas-root .linked-component-note { background: #26372d; color: var(--ink); }
.dark .atlas-root button:disabled { background: #2c424a; border-color: #526972; color: #c3d2d3; }
.dark .atlas-root .study-guide li .button, .dark .atlas-root .process-nodes .button { background: #dbaa43; border-color: #dbaa43; color: #132c3a; }
.dark .atlas-root .study-guide li .button:disabled, .dark .atlas-root .process-nodes .button:disabled { background: #2c424a; border-color: #526972; color: #c3d2d3; }
.dark .atlas-root .course-stop-nav a { background: var(--atlas-surface); color: var(--ink); }
.dark .atlas-root .course-stop-nav a:hover { background: #284239; }
.dark .atlas-root .course-self-check { background: #223b32; }
.dark .atlas-root .course-self-check summary { background: #192f29; }
.dark .atlas-root .rotating-evidence-table thead { background: #244137; }
.dark .atlas-root .rotating-role-card img, .dark .atlas-root .tailings-role-grid .rotating-role-card img { background: #2b4346; }
.dark .atlas-root .venturi-experiment { background: linear-gradient(135deg, #172c38, #223b32); }
.dark .atlas-root .venturi-assumptions { background: #244135; }
.dark .atlas-root .venturi-ideal-tag { color: #e4c580; background: #4a4028; border-color: #ab8e48; }
.dark .atlas-root .venturi-experiment tbody tr:nth-child(2) { background: #443d2c; }
.dark .atlas-root .venturi-results strong { color: #d5e4ed; }
.dark .atlas-root .venturi-results small { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .atlas-root *, .atlas-root *::before, .atlas-root *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .atlas-root .model-card:hover img, .atlas-root .hero-model:hover img { transform: none; }
}

/* Keep the provincial wordmark together when the mobile menu is present. */
@media (max-width: 650px) {
  .atlas-root .dashboard-content .topbar { height: 72px; min-height: 72px; gap: 8px; padding: 0 14px; flex-wrap: nowrap; }
  .atlas-root .header-brand { min-width: 0; gap: 8px; }
  .atlas-root .header-brand img { width: 34px; height: 34px; flex: none; }
  .atlas-root .header-brand strong { white-space: nowrap; font-size: 16px; }
  .atlas-root .header-brand small { display: none; }
  .atlas-root .mobile-navigation summary { padding: 10px; }
}