/* Clear Lab and Evidence Atlas are presentation layers for the existing cockpit.
   This file loads last and deliberately leaves the workbench tracks, Alpine state,
   illustration markup, and renderer-owned visual state alone. */

html:is([data-design="clear"], [data-design="field"]) {
  color-scheme: light;
  --bg: #edf2f1;
  --bg-2: #e4ebea;
  --surface: #ffffff;
  --surface-2: #f6f9f8;
  --surface-3: #eef5f4;
  --border: #d7dfdf;
  --border-strong: #b8c5c4;
  --ink: #182827;
  --ink-2: #3f504f;
  --muted: #667776;
  --accent: #117d78;
  --accent-700: #075d59;
  --accent-300: #70aaa7;
  --accent-100: #dcefed;
  --accent-050: #eef7f6;
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 9px;
  --shadow-sm: 0 1px 2px rgb(22 55 53 / 6%);
  --shadow-md: 0 3px 10px rgb(22 55 53 / 8%);
  --shadow-lg: 0 8px 22px rgb(22 55 53 / 10%);
  --t-fast: 150ms;
  --t-med: 170ms;
}

html[data-design="atlas"] {
  color-scheme: light;
  --bg: #eae7de;
  --bg-2: #e2ded3;
  --surface: #fbfaf5;
  --surface-2: #f6f3eb;
  --surface-3: #efece3;
  --border: #d8d4ca;
  --border-strong: #bcb6a8;
  --ink: #282a28;
  --ink-2: #50534f;
  --muted: #73766f;
  --accent: #d95d37;
  --accent-700: #a83f22;
  --accent-300: #dc947d;
  --accent-100: #f7ddd3;
  --accent-050: #fff4ef;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 5px;
  --shadow-sm: 0 1px 2px rgb(61 50 38 / 5%);
  --shadow-md: 0 2px 8px rgb(61 50 38 / 7%);
  --shadow-lg: 0 6px 18px rgb(61 50 38 / 8%);
  --t-fast: 150ms;
  --t-med: 170ms;
}

html:is([data-design="clear"], [data-design="field"]) body,
html[data-design="atlas"] body {
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
}

html:is([data-design="clear"], [data-design="field"]) .cockpit-shell,
html[data-design="atlas"] .cockpit-shell {
  gap: 9px;
  padding: 9px;
}

html:is([data-design="clear"], [data-design="field"]) :focus-visible,
html[data-design="atlas"] :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The shared, guarded mode control is deliberately compact enough for seven-station units. */
html:is([data-design="clear"], [data-design="field"]) .design-mode-toggle,
html[data-design="atlas"] .design-mode-toggle {
  width: 102px;
  height: 28px;
  flex: 0 0 102px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface-3);
}

html:is([data-design="clear"], [data-design="field"]) .design-mode-toggle button,
html[data-design="atlas"] .design-mode-toggle button {
  min-width: 0;
  min-height: 22px;
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

html:is([data-design="clear"], [data-design="field"]) .design-mode-toggle button:hover,
html[data-design="atlas"] .design-mode-toggle button:hover {
  color: var(--accent-700);
  background: var(--surface);
}

html:is([data-design="clear"], [data-design="field"]) .design-mode-toggle button[aria-pressed="true"],
html[data-design="atlas"] .design-mode-toggle button[aria-pressed="true"] {
  color: #ffffff;
  background: var(--accent-700);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}

/* Shared cockpit calibration: compact controls, readable instruction text, restrained paper. */
html:is([data-design="clear"], [data-design="field"]) .cockpit-command,
html[data-design="atlas"] .cockpit-command {
  padding: 7px 9px;
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

html:is([data-design="clear"], [data-design="field"]) .command-brand .command-home,
html[data-design="atlas"] .command-brand .command-home {
  color: var(--ink);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.08;
}

html:is([data-design="clear"], [data-design="field"]) .command-brand span:last-child,
html[data-design="atlas"] .command-brand span:last-child {
  color: var(--muted);
  font-size: 11px;
}

html:is([data-design="clear"], [data-design="field"]) .command-kicker,
html:is([data-design="clear"], [data-design="field"]) .eyebrow,
html[data-design="atlas"] .command-kicker,
html[data-design="atlas"] .eyebrow {
  font-size: 10.5px;
  line-height: 1.15;
}

html:is([data-design="clear"], [data-design="field"]) .command-actions,
html[data-design="atlas"] .command-actions {
  gap: 6px;
  flex-wrap: nowrap;
}

html:is([data-design="clear"], [data-design="field"]) .command-actions .switch,
html[data-design="atlas"] .command-actions .switch {
  gap: 4px;
}

html:is([data-design="clear"], [data-design="field"]) .command-actions .label-text,
html[data-design="atlas"] .command-actions .label-text {
  font-size: 10.5px;
}

html:is([data-design="clear"], [data-design="field"]) .command-reset,
html[data-design="atlas"] .command-reset {
  min-height: 30px;
  padding-inline: 9px;
  border-color: var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: none;
}

html:is([data-design="clear"], [data-design="field"]) .command-metrics,
html[data-design="atlas"] .command-metrics {
  gap: 4px;
}

html:is([data-design="clear"], [data-design="field"]) .metric-chip,
html:is([data-design="clear"], [data-design="field"]) .teks-badge,
html:is([data-design="clear"], [data-design="field"]) .sol-chip,
html[data-design="atlas"] .metric-chip,
html[data-design="atlas"] .teks-badge,
html[data-design="atlas"] .sol-chip {
  min-height: 28px;
  padding: 3px 7px;
  border-color: var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 10.5px;
}

html:is([data-design="clear"], [data-design="field"]) .teks-popover,
html[data-design="atlas"] .teks-popover {
  border-color: var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

html:is([data-design="clear"], [data-design="field"]) .workbench-grid,
html[data-design="atlas"] .workbench-grid {
  background: var(--bg);
}

html:is([data-design="clear"], [data-design="field"]) .wb-handle,
html[data-design="atlas"] .wb-handle {
  border-inline: 1px solid var(--border);
  background: var(--bg);
}

html:is([data-design="clear"], [data-design="field"]) .mission-screen,
html:is([data-design="clear"], [data-design="field"]) .chem-console > .panel,
html:is([data-design="clear"], [data-design="field"]) .life-support-board,
html[data-design="atlas"] .mission-screen,
html[data-design="atlas"] .chem-console > .panel,
html[data-design="atlas"] .life-support-board {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}

html:is([data-design="clear"], [data-design="field"]) .mission-screen,
html:is([data-design="clear"], [data-design="field"]) .chem-console > .panel,
html:is([data-design="clear"], [data-design="field"]) .life-support-board {
  border-radius: 7px;
}

html[data-design="atlas"] .mission-screen {
  border-radius: 4px 1px 1px 4px;
}

html[data-design="atlas"] .chem-console > .panel {
  border-radius: 1px;
}

html[data-design="atlas"] .life-support-board {
  border-radius: 1px 4px 4px 1px;
}

html:is([data-design="clear"], [data-design="field"]) .mission-screen,
html[data-design="atlas"] .mission-screen {
  padding: 9px;
  gap: 8px;
}

html:is([data-design="clear"], [data-design="field"]) .mission-frame,
html[data-design="atlas"] .mission-frame {
  border-color: var(--border-strong);
  border-radius: 5px;
  background: #18383a;
  box-shadow: none;
}

html[data-design="atlas"] .mission-frame {
  border-radius: 2px;
  background: #26302f;
}

html:is([data-design="clear"], [data-design="field"]) .screen-scanline,
html[data-design="atlas"] .screen-scanline {
  display: none;
}

html:is([data-design="clear"], [data-design="field"]) .screen-status,
html[data-design="atlas"] .screen-status {
  padding: 6px 8px;
  border-left-color: var(--accent);
  border-radius: 2px;
  background: var(--surface-3);
}

html:is([data-design="clear"], [data-design="field"]) .screen-system,
html:is([data-design="clear"], [data-design="field"]) .screen-state,
html[data-design="atlas"] .screen-system,
html[data-design="atlas"] .screen-state {
  color: var(--ink);
}

html:is([data-design="clear"], [data-design="field"]) .screen-system,
html[data-design="atlas"] .screen-system {
  font-size: 10.5px;
  color: var(--accent-700);
}

html:is([data-design="clear"], [data-design="field"]) .screen-state,
html[data-design="atlas"] .screen-state {
  font-size: 15px;
  line-height: 1.18;
}

html:is([data-design="clear"], [data-design="field"]) .screen-goal,
html[data-design="atlas"] .screen-goal {
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.35;
}

html:is([data-design="clear"], [data-design="field"]) .screen-outcome,
html[data-design="atlas"] .screen-outcome {
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
}

html:is([data-design="clear"], [data-design="field"]) .screen-reference,
html:is([data-design="clear"], [data-design="field"]) .mission-screen > .cockpit-instincts,
html[data-design="atlas"] .screen-reference,
html[data-design="atlas"] .mission-screen > .cockpit-instincts {
  border-color: var(--border);
  border-radius: 3px;
  background: var(--surface-2);
}

html:is([data-design="clear"], [data-design="field"]) .screen-reference .command-kicker,
html:is([data-design="clear"], [data-design="field"]) .mission-screen > .cockpit-instincts .command-kicker,
html[data-design="atlas"] .screen-reference .command-kicker,
html[data-design="atlas"] .mission-screen > .cockpit-instincts .command-kicker {
  color: var(--accent-700);
}

html:is([data-design="clear"], [data-design="field"]) .ref-k,
html:is([data-design="clear"], [data-design="field"]) .ref-v,
html:is([data-design="clear"], [data-design="field"]) .mission-screen > .cockpit-instincts p,
html:is([data-design="clear"], [data-design="field"]) .mission-screen > .cockpit-instincts strong,
html[data-design="atlas"] .ref-k,
html[data-design="atlas"] .ref-v,
html[data-design="atlas"] .mission-screen > .cockpit-instincts p,
html[data-design="atlas"] .mission-screen > .cockpit-instincts strong {
  color: var(--ink-2);
}

html:is([data-design="clear"], [data-design="field"]) .chem-console > .panel,
html[data-design="atlas"] .chem-console > .panel {
  padding: clamp(10px, 1.05vw, 14px);
}

html[data-design="atlas"] .chem-console > .panel {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgb(168 63 34 / 5%) 32px);
}

html:is([data-design="clear"], [data-design="field"]) .chem-console h2,
html:is([data-design="clear"], [data-design="field"]) .chem-console h3,
html:is([data-design="clear"], [data-design="field"]) .chem-console h4,
html:is([data-design="clear"], [data-design="field"]) .life-support-board h2,
html:is([data-design="clear"], [data-design="field"]) .life-support-board h3,
html:is([data-design="clear"], [data-design="field"]) .life-support-board h4 {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.2;
}

html[data-design="atlas"] .command-brand .command-home,
html[data-design="atlas"] .chem-console h2,
html[data-design="atlas"] .chem-console h3,
html[data-design="atlas"] .chem-console h4,
html[data-design="atlas"] .life-support-board h2,
html[data-design="atlas"] .life-support-board h3,
html[data-design="atlas"] .life-support-board h4 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.18;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .small,
html[data-design="atlas"] .chem-console .small,
html:is([data-design="clear"], [data-design="field"]) .chem-console p,
html[data-design="atlas"] .chem-console p {
  font-size: 13px;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .btn,
html[data-design="atlas"] .chem-console .btn,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid input,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid select,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid textarea,
html[data-design="atlas"] .workbench-grid input,
html[data-design="atlas"] .workbench-grid select,
html[data-design="atlas"] .workbench-grid textarea {
  min-height: 34px;
  border-radius: 4px;
}

html:is([data-design="clear"], [data-design="field"]) .workbench-grid input,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid select,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid textarea,
html[data-design="atlas"] .workbench-grid input,
html[data-design="atlas"] .workbench-grid select,
html[data-design="atlas"] .workbench-grid textarea {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--ink);
}

html:is([data-design="clear"], [data-design="field"]) .workbench-grid .btn,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .opt,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .pair,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .choice,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .tile,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .est-chip,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .miss-opt,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .fam-btn,
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .job-pill,
html[data-design="atlas"] .workbench-grid .btn,
html[data-design="atlas"] .workbench-grid .opt,
html[data-design="atlas"] .workbench-grid .pair,
html[data-design="atlas"] .workbench-grid .choice,
html[data-design="atlas"] .workbench-grid .tile,
html[data-design="atlas"] .workbench-grid .est-chip,
html[data-design="atlas"] .workbench-grid .miss-opt,
html[data-design="atlas"] .workbench-grid .fam-btn,
html[data-design="atlas"] .workbench-grid .job-pill {
  border-color: var(--border-strong);
  border-radius: 4px;
  background-color: var(--surface);
  background-image: none;
  color: var(--ink);
  box-shadow: 0 1px 1px rgb(40 51 49 / 7%);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

html:is([data-design="clear"], [data-design="field"]) .workbench-grid .btn:hover:not(:disabled),
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .opt:hover:not(:disabled),
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .pair:hover:not(:disabled),
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .choice:hover:not(:disabled),
html:is([data-design="clear"], [data-design="field"]) .workbench-grid .tile:hover:not(:disabled),
html[data-design="atlas"] .workbench-grid .btn:hover:not(:disabled),
html[data-design="atlas"] .workbench-grid .opt:hover:not(:disabled),
html[data-design="atlas"] .workbench-grid .pair:hover:not(:disabled),
html[data-design="atlas"] .workbench-grid .choice:hover:not(:disabled),
html[data-design="atlas"] .workbench-grid .tile:hover:not(:disabled) {
  border-color: var(--accent);
  background-color: var(--accent-050);
  box-shadow: 0 1px 3px rgb(40 51 49 / 10%);
}

html:is([data-design="clear"], [data-design="field"]) .workbench-grid .btn-accent,
html[data-design="atlas"] .workbench-grid .btn-accent {
  border-color: var(--accent-700);
  background: var(--accent-700);
  color: #ffffff;
  box-shadow: none;
}

html:is([data-design="clear"], [data-design="field"]) .life-support-board,
html[data-design="atlas"] .life-support-board {
  padding: clamp(9px, 1vw, 12px);
  gap: 8px;
}

html:is([data-design="clear"], [data-design="field"]) .life-header strong,
html:is([data-design="clear"], [data-design="field"]) .latest-consequence strong,
html[data-design="atlas"] .life-header strong,
html[data-design="atlas"] .latest-consequence strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.18;
}

html:is([data-design="clear"], [data-design="field"]) .cockpit-crew,
html:is([data-design="clear"], [data-design="field"]) .system-grid .ship-stock,
html:is([data-design="clear"], [data-design="field"]) .latest-consequence,
html:is([data-design="clear"], [data-design="field"]) .mission-log,
html[data-design="atlas"] .cockpit-crew,
html[data-design="atlas"] .system-grid .ship-stock,
html[data-design="atlas"] .latest-consequence,
html[data-design="atlas"] .mission-log {
  border-color: var(--border);
  border-radius: 3px;
  background: var(--surface-2);
}

html:is([data-design="clear"], [data-design="field"]) .latest-consequence p,
html:is([data-design="clear"], [data-design="field"]) .mission-log p,
html[data-design="atlas"] .latest-consequence p,
html[data-design="atlas"] .mission-log p {
  color: var(--ink-2);
  font-size: 12.5px;
}

html:is([data-design="clear"], [data-design="field"]) .mission-log .worldstate-list {
  gap: 4px;
}

html:is([data-design="clear"], [data-design="field"]) .mission-log .worldstate-entry {
  border-left: 2px solid var(--accent-300);
  border-radius: 2px;
  background: var(--surface);
}

/* Clear Lab: compact segmented stations and a visibly separate Case File destination. */
html:is([data-design="clear"], [data-design="field"]) .cockpit-command {
  min-height: 58px;
  border-radius: 7px;
}

html:is([data-design="clear"], [data-design="field"]) .station-nav {
  gap: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-3);
}

html:is([data-design="clear"], [data-design="field"]) .station-nav .tab {
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-2);
  font-size: 11.5px;
  box-shadow: none;
}

html:is([data-design="clear"], [data-design="field"]) .station-nav .tab:last-child {
  margin-left: 6px;
  border: 1px solid var(--accent-300);
  background: var(--accent-100);
  color: var(--accent-700);
}

html:is([data-design="clear"], [data-design="field"]) .station-nav .tab[aria-selected="true"] {
  border-color: var(--accent-700);
  background: var(--accent);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}

/* Evidence Atlas: editorial title marker, numbered route, ruled bench, and ledger rail. */
html[data-design="atlas"] .cockpit-command {
  min-height: 68px;
  border-radius: 4px;
}

html[data-design="atlas"] .command-brand {
  position: relative;
  min-height: 38px;
  padding-left: 42px;
  align-content: center;
}

html[data-design="atlas"] .command-brand::before {
  content: attr(data-design-unit);
  position: absolute;
  left: 0;
  top: 1px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-2);
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
}

html[data-design="atlas"] .station-nav {
  counter-reset: atlas-station;
  gap: 2px;
  grid-auto-columns: minmax(40px, 1fr);
  background: linear-gradient(to right, transparent 0 8px, var(--border) 8px calc(100% - 8px), transparent calc(100% - 8px)) center 14px / 100% 1px no-repeat;
}

html[data-design="atlas"] .station-nav .tab {
  counter-increment: atlas-station;
  position: relative;
  height: 48px;
  padding: 0 3px;
  display: grid;
  grid-template-rows: 22px auto;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

html[data-design="atlas"] .station-nav .tab::before {
  content: counter(atlas-station, decimal-leading-zero);
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
}

html[data-design="atlas"] .station-nav .tab:last-child::before {
  content: "CF";
}

html[data-design="atlas"] .station-nav .tab:hover,
html[data-design="atlas"] .station-nav .tab[aria-selected="true"] {
  background: transparent;
  color: var(--accent-700);
  box-shadow: none;
}

html[data-design="atlas"] .station-nav .tab[aria-selected="true"]::before {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

html[data-design="atlas"] .station-nav .tab.is-locked::after {
  position: absolute;
  top: 3px;
  right: 4px;
  margin: 0;
  color: var(--muted);
}

/* Catalog-wide control and text refinement.
   The activity shell already establishes the three-column workbench. This pass
   keeps that efficient structure while making every interactive target read as
   a deliberate control: labels share a left edge, fields carry their label
   without crowding it, and selections remain comfortably tappable at laptop
   density. The rules intentionally target the shared vocabulary used by all
   eleven units rather than cloning fixes into individual missions. */
html:is([data-design="clear"], [data-design="field"]) .chem-console .btn,
html[data-design="atlas"] .chem-console .btn,
html:is([data-design="clear"], [data-design="field"]) .command-reset,
html[data-design="atlas"] .command-reset {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .choice,
html:is([data-design="clear"], [data-design="field"]) .chem-console .opt,
html:is([data-design="clear"], [data-design="field"]) .chem-console .pair,
html:is([data-design="clear"], [data-design="field"]) .chem-console .miss-opt,
html:is([data-design="clear"], [data-design="field"]) .chem-console .est-chip,
html:is([data-design="clear"], [data-design="field"]) .chem-console .fam-btn,
html:is([data-design="clear"], [data-design="field"]) .chem-console .job-pill,
html[data-design="atlas"] .chem-console .choice,
html[data-design="atlas"] .chem-console .opt,
html[data-design="atlas"] .chem-console .pair,
html[data-design="atlas"] .chem-console .miss-opt,
html[data-design="atlas"] .chem-console .est-chip,
html[data-design="atlas"] .chem-console .fam-btn,
html[data-design="atlas"] .chem-console .job-pill {
  min-height: 44px;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .field,
html[data-design="atlas"] .chem-console .field {
  gap: 5px;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .field > label,
html[data-design="atlas"] .chem-console .field > label {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1.25;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console input:not([type="range"]),
html:is([data-design="clear"], [data-design="field"]) .chem-console select,
html:is([data-design="clear"], [data-design="field"]) .chem-console textarea,
html[data-design="atlas"] .chem-console input:not([type="range"]),
html[data-design="atlas"] .chem-console select,
html[data-design="atlas"] .chem-console textarea {
  min-height: 40px;
  padding-block: 7px;
  line-height: 1.2;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .call-row,
html[data-design="atlas"] .chem-console .call-row {
  align-items: center;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .call-hint,
html[data-design="atlas"] .chem-console .call-hint {
  max-width: 38rem;
}

/* Unit 2's wavelength chips are answer controls, not decorative legend dots.
   Match their target size and baseline to the rest of the catalog while keeping
   the compact spectrum color cue. */
html:is([data-design="clear"], [data-design="field"]) .chem-console .line-chip,
html[data-design="atlas"] .chem-console .line-chip {
  min-height: 40px;
  padding: 6px 12px;
  line-height: 1.2;
}

/* Unit 2's five historical-model cards are a fixed teaching set. Giving the
   final (longest) card two tracks prevents the unbalanced, cramped 3 + 2 wrap
   without changing the grid for the rest of the catalog. */
html:is([data-design="clear"], [data-design="field"]) .chem-console .models,
html[data-design="atlas"] .chem-console .models {
  gap: 8px;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .model-card,
html[data-design="atlas"] .chem-console .model-card {
  padding: 10px;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .model-card .model-idea,
html[data-design="atlas"] .chem-console .model-card .model-idea {
  line-height: 1.4;
}

@media (min-width: 600px) {
  html:is([data-design="clear"], [data-design="field"]) .chem-console .models > .model-card:last-child,
  html[data-design="atlas"] .chem-console .models > .model-card:last-child {
    grid-column: span 2;
  }
}

/* Formula cards carry their chemical identity first, then the explanatory
   label. It lets the eye find the species immediately without making the
   surrounding scenario copy larger or heavier. */
html:is([data-design="clear"], [data-design="field"]) .chem-console .prompt-card,
html[data-design="atlas"] .chem-console .prompt-card {
  align-items: center;
  gap: 6px 12px;
  min-height: 64px;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .prompt-card .prompt-formula,
html[data-design="atlas"] .chem-console .prompt-card .prompt-formula {
  color: var(--accent-700);
  line-height: 1;
}

html:is([data-design="clear"], [data-design="field"]) .chem-console .prompt-card .prompt-name,
html[data-design="atlas"] .chem-console .prompt-card .prompt-name {
  font-weight: 700;
}

html[data-design="atlas"] .life-support-board {
  background: var(--surface);
}

html[data-design="atlas"] .cockpit-crew,
html[data-design="atlas"] .system-grid .ship-stock,
html[data-design="atlas"] .latest-consequence,
html[data-design="atlas"] .mission-log {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

html[data-design="atlas"] .mission-log {
  counter-reset: atlas-ledger;
  padding-inline: 0;
}

html[data-design="atlas"] .mission-log .worldstate-list {
  gap: 0;
  overflow-y: auto;
}

html[data-design="atlas"] .mission-log .worldstate-entry {
  counter-increment: atlas-ledger;
  position: relative;
  padding: 7px 6px 7px 29px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

html[data-design="atlas"] .mission-log .worldstate-entry::before {
  content: counter(atlas-ledger, decimal-leading-zero);
  position: absolute;
  left: 4px;
  top: 7px;
  color: var(--accent-700);
  font-family: var(--font-mono);
  font-size: 9.5px;
}

/* Shared Case File grid. Its two wrapper elements disappear only from layout; source order and JS stay intact. */
html:is([data-design="clear"], [data-design="field"]) .casefile,
html[data-design="atlas"] .casefile {
  --cf-good: #267a51;
  --cf-warn: #8d6415;
  --cf-bad: #a9422d;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 10px;
  display: grid;
  column-gap: 10px;
  row-gap: 8px;
  grid-template-columns: minmax(200px, .78fr) minmax(390px, 1.85fr) minmax(210px, .9fr);
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

html:is([data-design="clear"], [data-design="field"]) .cf-grid,
html:is([data-design="clear"], [data-design="field"]) .cf-grid > div,
html[data-design="atlas"] .cf-grid,
html[data-design="atlas"] .cf-grid > div {
  display: contents;
}

html:is([data-design="clear"], [data-design="field"]) .cf-top,
html[data-design="atlas"] .cf-top {
  min-width: 0;
  min-height: 0;
  display: block;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
}

html:is([data-design="clear"], [data-design="field"]) .cf-kicker,
html[data-design="atlas"] .cf-kicker {
  color: var(--accent-700);
  font-size: 10.5px;
  letter-spacing: .11em;
}

html:is([data-design="clear"], [data-design="field"]) .cf-dot,
html[data-design="atlas"] .cf-dot {
  display: none;
}

html:is([data-design="clear"], [data-design="field"]) .cf-title,
html[data-design="atlas"] .cf-title {
  margin: 5px 0 7px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.22;
  letter-spacing: 0;
}

html:is([data-design="clear"], [data-design="field"]) .cf-title {
  font-family: var(--font-body);
}

html[data-design="atlas"] .cf-title {
  font-family: var(--font-display);
  font-size: 18px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-hook,
html[data-design="atlas"] .cf-hook {
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

html:is([data-design="clear"], [data-design="field"]) .cf-hook {
  font-size: 12px;
  line-height: 1.35;
}

html:is([data-design="clear"], [data-design="field"]) .cf-stats,
html[data-design="atlas"] .cf-stats {
  margin-top: 12px;
  gap: 6px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html:is([data-design="clear"], [data-design="field"]) .cf-stat,
html[data-design="atlas"] .cf-stat {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
}

html:is([data-design="clear"], [data-design="field"]) .cf-stat .v,
html[data-design="atlas"] .cf-stat .v {
  color: var(--ink);
  font-size: 14px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-stat .k,
html[data-design="atlas"] .cf-stat .k {
  color: var(--muted);
  font-size: 9.5px;
  letter-spacing: .04em;
}

html:is([data-design="clear"], [data-design="field"]) .cf-stage,
html[data-design="atlas"] .cf-stage {
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #202829;
  overflow-y: auto;
}

html:is([data-design="clear"], [data-design="field"]) .cf-cap,
html[data-design="atlas"] .cf-cap {
  min-height: 32px;
  padding: 7px 9px;
  border-top-color: var(--border-strong);
  background: #202829;
  color: #d8e2df;
  font-size: 10.5px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-steps,
html[data-design="atlas"] .cf-steps {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
}

html:is([data-design="clear"], [data-design="field"]) .cf-step,
html[data-design="atlas"] .cf-step {
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--surface);
  background-image: none;
  color: var(--ink-2);
  font-size: 12px;
  box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

html:is([data-design="clear"], [data-design="field"]) .cf-step:hover,
html[data-design="atlas"] .cf-step:hover {
  border-color: var(--accent);
  background: var(--accent-050);
  box-shadow: none;
}

html:is([data-design="clear"], [data-design="field"]) .cf-step.on,
html[data-design="atlas"] .cf-step.on {
  border-color: var(--accent);
  background: var(--accent-100);
  color: var(--accent-700);
  box-shadow: inset 3px 0 0 var(--accent);
}

html:is([data-design="clear"], [data-design="field"]) .cf-step-n,
html[data-design="atlas"] .cf-step-n {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 9.5px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-step.on .cf-step-n,
html[data-design="atlas"] .cf-step.on .cf-step-n {
  background: var(--accent);
  color: #ffffff;
}

html:is([data-design="clear"], [data-design="field"]) .cf-narr,
html[data-design="atlas"] .cf-narr {
  min-width: 0;
  min-height: 88px;
  max-height: none;
  align-self: stretch;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  overflow-y: auto;
}

html:is([data-design="clear"], [data-design="field"]) .cf-narr p,
html[data-design="atlas"] .cf-narr p {
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

html:is([data-design="clear"], [data-design="field"]) .cf-chem,
html[data-design="atlas"] .cf-chem {
  margin-top: 8px !important;
  padding: 7px 9px;
  border-left-color: var(--accent);
  border-radius: 0 3px 3px 0;
  background: var(--accent-050);
}

html:is([data-design="clear"], [data-design="field"]) .cf-chem strong,
html[data-design="atlas"] .cf-chem strong {
  color: var(--accent-700);
  font-size: 9.5px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-controls,
html[data-design="atlas"] .cf-controls {
  min-width: 0;
  min-height: 36px;
  align-self: end;
  margin: 0;
  padding: 0;
  gap: 8px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-btn,
html:is([data-design="clear"], [data-design="field"]) .cf-cta,
html[data-design="atlas"] .cf-btn,
html[data-design="atlas"] .cf-cta {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background-color: var(--surface);
  background-image: none;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

html:is([data-design="clear"], [data-design="field"]) .cf-btn:hover:not(:disabled),
html:is([data-design="clear"], [data-design="field"]) .cf-cta:hover,
html[data-design="atlas"] .cf-btn:hover:not(:disabled),
html[data-design="atlas"] .cf-cta:hover {
  border-color: var(--accent);
  background: var(--accent-050);
  color: var(--accent-700);
  box-shadow: none;
}

html:is([data-design="clear"], [data-design="field"]) .cf-btn-accent,
html:is([data-design="clear"], [data-design="field"]) .cf-cta,
html[data-design="atlas"] .cf-btn-accent,
html[data-design="atlas"] .cf-cta {
  border-color: var(--accent-700);
  background: var(--accent-700);
  color: #ffffff;
}

html:is([data-design="clear"], [data-design="field"]) .cf-progress,
html[data-design="atlas"] .cf-progress {
  color: var(--muted);
  font-size: 10.5px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-quiz,
html[data-design="atlas"] .cf-quiz {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
}

html:is([data-design="clear"], [data-design="field"]) .cf-quiz-label,
html[data-design="atlas"] .cf-quiz-label {
  color: var(--accent-700);
  font-size: 10.5px;
  letter-spacing: .11em;
}

html[data-design="atlas"] .cf-quiz-label {
  font-size: 0;
}

html[data-design="atlas"] .cf-quiz-label::after {
  content: "Your inference";
  font-size: 10.5px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-quiz-q,
html[data-design="atlas"] .cf-quiz-q {
  margin: 6px 0 9px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

html:is([data-design="clear"], [data-design="field"]) .cf-choices,
html[data-design="atlas"] .cf-choices {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-choice,
html[data-design="atlas"] .cf-choice {
  min-height: 42px;
  padding: 8px 9px;
  place-items: center start;
  border-color: var(--border);
  border-radius: 4px;
  background-color: var(--surface);
  background-image: none;
  color: var(--ink-2);
  text-align: left;
  font-size: 12px;
  box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

html:is([data-design="clear"], [data-design="field"]) .cf-choice:hover,
html[data-design="atlas"] .cf-choice:hover,
html:is([data-design="clear"], [data-design="field"]) .cf-choice[data-state="on"],
html[data-design="atlas"] .cf-choice[data-state="on"] {
  border-color: var(--accent);
  background: var(--accent-050);
  color: var(--ink);
  box-shadow: none;
}

html:is([data-design="clear"], [data-design="field"]) .cf-quiz-actions,
html[data-design="atlas"] .cf-quiz-actions {
  gap: 7px;
  margin-top: 9px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-quiz-actions > .btn,
html[data-design="atlas"] .cf-quiz-actions > .btn {
  min-width: 112px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-explain,
html[data-design="atlas"] .cf-explain {
  margin-top: 9px;
  padding: 8px 9px;
  border-color: var(--border);
  border-radius: 2px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}

html:is([data-design="clear"], [data-design="field"]) .cf-punch,
html[data-design="atlas"] .cf-punch {
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  margin: 0;
  padding: 10px 12px;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  overflow-y: auto;
}

html:is([data-design="clear"], [data-design="field"]) .cf-punch-lead,
html[data-design="atlas"] .cf-punch-lead {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

html:is([data-design="clear"], [data-design="field"]) .cf-careers,
html[data-design="atlas"] .cf-careers {
  gap: 5px;
  margin-top: 7px;
}

html:is([data-design="clear"], [data-design="field"]) .cf-career,
html[data-design="atlas"] .cf-career {
  padding: 2px 6px;
  border-color: var(--border);
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 9.5px;
}

/* Clear Case File: summary and chapters left, story center, inference and conclusion right. */
html:is([data-design="clear"], [data-design="field"]) .casefile {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

html:is([data-design="clear"], [data-design="field"]) .cf-top {
  grid-column: 1;
  grid-row: 1;
}

html:is([data-design="clear"], [data-design="field"]) .cf-steps {
  grid-column: 1;
  grid-row: 2 / 5;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
}

html:is([data-design="clear"], [data-design="field"]) .cf-stage {
  grid-column: 2;
  grid-row: 1 / 3;
}

html:is([data-design="clear"], [data-design="field"]) .cf-narr {
  grid-column: 2;
  grid-row: 3;
}

html:is([data-design="clear"], [data-design="field"]) .cf-controls {
  grid-column: 2;
  grid-row: 4;
}

html:is([data-design="clear"], [data-design="field"]) .cf-quiz {
  grid-column: 3;
  grid-row: 1 / 3;
}

html:is([data-design="clear"], [data-design="field"]) .cf-punch {
  grid-column: 3;
  grid-row: 3 / 5;
}

/* Atlas Case File: vertical dossier left, four-part route beneath the evidence figure. */
html[data-design="atlas"] .casefile {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-radius: 4px;
}

html[data-design="atlas"] .cf-top {
  grid-column: 1;
  grid-row: 1 / 5;
  border-radius: 3px 0 0 3px;
}

html[data-design="atlas"] .cf-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}

html[data-design="atlas"] .cf-stat {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

html[data-design="atlas"] .cf-stage {
  grid-column: 2;
  grid-row: 1;
  border-radius: 2px;
}

html[data-design="atlas"] .cf-steps {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
}

html[data-design="atlas"] .cf-step {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 3px;
  border-right: 0;
  border-radius: 0;
  text-align: left;
}

html[data-design="atlas"] .cf-step.on {
  box-shadow: inset 0 3px 0 var(--accent);
}

html[data-design="atlas"] .cf-step-n {
  width: auto;
  height: auto;
  display: block;
  background: transparent;
  color: var(--accent-700);
}

html[data-design="atlas"] .cf-step.on .cf-step-n {
  background: transparent;
  color: var(--accent-700);
}

html[data-design="atlas"] .cf-narr {
  grid-column: 2;
  grid-row: 3;
}

html[data-design="atlas"] .cf-controls {
  grid-column: 2;
  grid-row: 4;
}

html[data-design="atlas"] .cf-quiz {
  grid-column: 3;
  grid-row: 1;
  border-radius: 0 3px 0 0;
}

html[data-design="atlas"] .cf-punch {
  grid-column: 3;
  grid-row: 2 / 5;
  border-radius: 0 0 3px 0;
}

/* Preserve the authored <=980 layout while giving eight-station Unit 8 enough route width
   in the narrow desktop band immediately above it. */
@media (min-width: 981px) and (max-width: 1120px) {
  html:is([data-design="clear"], [data-design="field"]) .cockpit-command,
  html[data-design="atlas"] .cockpit-command {
    grid-template-columns: minmax(150px, 160px) minmax(360px, 1fr) minmax(210px, auto) minmax(150px, 170px);
    gap: 6px;
  }

  html:is([data-design="clear"], [data-design="field"]) .station-nav,
  html[data-design="atlas"] .station-nav {
    grid-auto-columns: minmax(0, 1fr);
  }

  html:is([data-design="clear"], [data-design="field"]) .station-nav .tab {
    padding-inline: 2px;
    font-size: 10px;
  }

  html[data-design="atlas"] .station-nav .tab {
    padding-inline: 2px;
    font-size: 10px;
  }

  html:is([data-design="clear"], [data-design="field"]) .command-actions,
  html[data-design="atlas"] .command-actions {
    gap: 4px;
  }

  html:is([data-design="clear"], [data-design="field"]) .metric-chip,
  html[data-design="atlas"] .metric-chip {
    min-width: 48px;
    padding-inline: 5px;
  }
}

/* Below the cockpit's three-column breakpoint, retain the component's true source order. */
@media (max-width: 980px) {
  html:is([data-design="clear"], [data-design="field"]) .casefile,
  html[data-design="atlas"] .casefile {
    height: 100%;
    display: block;
    padding: 8px;
    overflow-y: auto;
  }

  html:is([data-design="clear"], [data-design="field"]) .cf-top,
  html:is([data-design="clear"], [data-design="field"]) .cf-stage,
  html:is([data-design="clear"], [data-design="field"]) .cf-steps,
  html:is([data-design="clear"], [data-design="field"]) .cf-narr,
  html:is([data-design="clear"], [data-design="field"]) .cf-controls,
  html:is([data-design="clear"], [data-design="field"]) .cf-quiz,
  html:is([data-design="clear"], [data-design="field"]) .cf-punch,
  html[data-design="atlas"] .cf-top,
  html[data-design="atlas"] .cf-stage,
  html[data-design="atlas"] .cf-steps,
  html[data-design="atlas"] .cf-narr,
  html[data-design="atlas"] .cf-controls,
  html[data-design="atlas"] .cf-quiz,
  html[data-design="atlas"] .cf-punch {
    width: 100%;
    max-height: none;
    margin: 0 0 8px;
    overflow: visible;
  }

  html:is([data-design="clear"], [data-design="field"]) .cf-steps,
  html[data-design="atlas"] .cf-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  html:is([data-design="clear"], [data-design="field"]) .cf-narr,
  html[data-design="atlas"] .cf-narr {
    min-height: 0;
  }

  html:is([data-design="clear"], [data-design="field"]) .cf-controls,
  html[data-design="atlas"] .cf-controls {
    display: flex;
    padding: 4px 0;
  }

  html:is([data-design="clear"], [data-design="field"]) .cf-punch,
  html[data-design="atlas"] .cf-punch {
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  html:is([data-design="clear"], [data-design="field"]) .cf-steps,
  html[data-design="atlas"] .cf-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:is([data-design="clear"], [data-design="field"]) .design-mode-toggle button,
  html:is([data-design="clear"], [data-design="field"]) .workbench-grid button,
  html:is([data-design="clear"], [data-design="field"]) .casefile button,
  html[data-design="atlas"] .design-mode-toggle button,
  html[data-design="atlas"] .workbench-grid button,
  html[data-design="atlas"] .casefile button {
    transition: none !important;
  }
}

/* Course hub -------------------------------------------------------------
   The landing page uses the same two visual systems as the unit workbenches,
   while keeping its course-map content readable at a Grade 10 reading pace. */

html:is([data-design="clear"], [data-design="field"]) .course-hub,
html[data-design="atlas"] .course-hub {
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub [x-cloak],
html[data-design="atlas"] .course-hub [x-cloak] {
  display: none !important;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .wrap,
html[data-design="atlas"] .course-hub .wrap {
  width: min(100% - 40px, 1360px);
  max-width: 1360px;
  margin-inline: auto;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-header,
html[data-design="atlas"] .course-hub .hub-header {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 72px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-header-inner,
html[data-design="atlas"] .course-hub .hub-header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 10px;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-brand,
html[data-design="atlas"] .course-hub .hub-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-mark,
html[data-design="atlas"] .course-hub .hub-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  background: var(--accent-050);
  color: var(--accent-700);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-mark {
  border-radius: var(--r-md);
}

html[data-design="atlas"] .course-hub .hub-mark {
  border-radius: 50%;
  background: transparent;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-brand-name,
html[data-design="atlas"] .course-hub .hub-brand-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-brand-sub,
html[data-design="atlas"] .course-hub .hub-brand-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-actions,
html[data-design="atlas"] .course-hub .hub-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-actions .design-mode-toggle,
html[data-design="atlas"] .course-hub .hub-actions .design-mode-toggle {
  width: 120px;
  height: 36px;
  padding: 2px;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-actions .design-mode-toggle button,
html[data-design="atlas"] .course-hub .hub-actions .design-mode-toggle button {
  min-height: 30px;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-course-code,
html[data-design="atlas"] .course-hub .hub-course-code {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-main,
html[data-design="atlas"] .course-hub .hub-main {
  padding-block: clamp(0.525rem, 1.2vw, 1.05rem) clamp(64px, 8vw, 104px);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-intro,
html[data-design="atlas"] .course-hub .hub-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
  padding: clamp(0.6rem, 1.5vw, 1.2rem) clamp(32px, 5vw, 64px);
  border: 1px solid var(--border);
  background: var(--surface);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-intro {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

html[data-design="atlas"] .course-hub .hub-intro {
  border-top: 3px solid var(--accent);
  border-radius: var(--r-sm);
  box-shadow: none;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-intro-copy,
html[data-design="atlas"] .course-hub .hub-intro-copy {
  align-self: center;
  max-width: 760px;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-kicker,
html[data-design="atlas"] .course-hub .hub-kicker {
  margin: 0 0 12px;
  color: var(--accent-700);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  font-variant-caps: all-small-caps;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub h1,
html[data-design="atlas"] .course-hub h1,
html:is([data-design="clear"], [data-design="field"]) .course-hub h2,
html[data-design="atlas"] .course-hub h2 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub h1,
html[data-design="atlas"] .course-hub h1 {
  max-width: 15ch;
  font-size: clamp(2.35rem, 4.8vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Keep the landing-page title subordinate to the investigation content. */
html:is([data-design="clear"], [data-design="field"]) .course-hub #hub-title,
html[data-design="atlas"] .course-hub #hub-title {
  max-width: none;
  font-size: clamp(1.41rem, 2.88vw, 2.52rem);
  text-wrap: wrap;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub h2,
html[data-design="atlas"] .course-hub h2 {
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub h1,
html:is([data-design="clear"], [data-design="field"]) .course-hub h2,
html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-brand-name,
html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-title {
  font-family: var(--font-body);
}

html[data-design="atlas"] .course-hub h1,
html[data-design="atlas"] .course-hub h2,
html[data-design="atlas"] .course-hub .hub-brand-name,
html[data-design="atlas"] .course-hub .hub-unit-title {
  font-family: var(--font-display);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-lead,
html[data-design="atlas"] .course-hub .hub-lead {
  max-width: 64ch;
  margin: 24px 0 0;
  color: var(--ink-2);
  font-size: 1.16rem;
  line-height: 1.6;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-support,
html[data-design="atlas"] .course-hub .hub-support {
  max-width: 66ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-support strong,
html[data-design="atlas"] .course-hub .hub-support strong {
  color: var(--ink);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-legend,
html[data-design="atlas"] .course-hub .hub-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.84rem;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-legend > span,
html[data-design="atlas"] .course-hub .hub-legend > span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-legend-key,
html[data-design="atlas"] .course-hub .hub-legend-key {
  color: var(--accent-700);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-caps: all-small-caps;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-scroll-cue,
html[data-design="atlas"] .course-hub .hub-scroll-cue {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 6px 4px;
  margin-left: -4px;
  color: var(--accent-700);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  font-variant-caps: all-small-caps;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-scroll-cue:hover,
html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-scroll-cue:focus-visible,
html[data-design="atlas"] .course-hub .hub-scroll-cue:hover,
html[data-design="atlas"] .course-hub .hub-scroll-cue:focus-visible {
  color: var(--accent);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-scroll-cue:focus-visible,
html[data-design="atlas"] .course-hub .hub-scroll-cue:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-scroll-cue-arrow,
html[data-design="atlas"] .course-hub .hub-scroll-cue-arrow {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--accent-300);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  animation: hub-scroll-cue-nudge 1.8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes hub-scroll-cue-nudge {
  0%, 20%, 55%, 100% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(3px);
  }
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path,
html[data-design="atlas"] .course-hub .hub-learning-path {
  align-self: stretch;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path {
  border-radius: var(--r-md);
}

html[data-design="atlas"] .course-hub .hub-learning-path {
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: var(--surface-3);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path h2,
html[data-design="atlas"] .course-hub .hub-learning-path h2 {
  font-size: 1.45rem;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path ol,
html[data-design="atlas"] .course-hub .hub-learning-path ol {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path li,
html[data-design="atlas"] .course-hub .hub-learning-path li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  padding: 15px 0;
  border-top: 1px solid var(--border);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path li:first-child,
html[data-design="atlas"] .course-hub .hub-learning-path li:first-child {
  border-top: 0;
  padding-top: 0;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path li > span,
html[data-design="atlas"] .course-hub .hub-learning-path li > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-300);
  border-radius: 50%;
  color: var(--accent-700);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path p,
html[data-design="atlas"] .course-hub .hub-learning-path p {
  margin: 0;
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.45;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path strong,
html[data-design="atlas"] .course-hub .hub-learning-path strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-course-map,
html[data-design="atlas"] .course-hub .hub-course-map {
  margin-top: clamp(1.2rem, 2.4vw, 1.95rem);
  scroll-margin-top: 112px;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices,
html[data-design="atlas"] .course-hub .hub-practices {
  margin-top: clamp(19px, 2.4vw, 31px);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-section-head,
html[data-design="atlas"] .course-hub .hub-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.7fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: end;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-strong);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-section-head > p,
html[data-design="atlas"] .course-hub .hub-section-head > p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-list,
html[data-design="atlas"] .course-hub .hub-unit-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-item,
html[data-design="atlas"] .course-hub .hub-unit-item {
  min-width: 0;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-link,
html[data-design="atlas"] .course-hub .hub-unit-link {
  min-height: 390px;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0 12px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-link {
  border-top: 3px solid var(--accent-300);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

html[data-design="atlas"] .course-hub .hub-unit-link {
  border-top: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface-2);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-link:hover,
html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-link:focus-visible,
html[data-design="atlas"] .course-hub .hub-unit-link:hover,
html[data-design="atlas"] .course-hub .hub-unit-link:focus-visible {
  border-color: var(--accent);
  background: var(--accent-050);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-link:active,
html[data-design="atlas"] .course-hub .hub-unit-link:active {
  background: var(--accent-100);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-index,
html[data-design="atlas"] .course-hub .hub-unit-index {
  width: 64px;
  min-height: 76px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--accent-700);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-index,
html[data-design="atlas"] .course-hub .hub-unit-index {
  grid-column: 1;
  grid-row: 1;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-index {
  border-radius: var(--r-md);
}

html[data-design="atlas"] .course-hub .hub-unit-index {
  width: 60px;
  min-height: 60px;
  border-color: var(--accent-300);
  border-radius: 50%;
  background: transparent;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-number,
html[data-design="atlas"] .course-hub .hub-unit-number {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-symbol,
html[data-design="atlas"] .course-hub .hub-unit-symbol {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-body,
html[data-design="atlas"] .course-hub .hub-unit-body {
  min-width: 0;
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 17px;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-overline,
html[data-design="atlas"] .course-hub .hub-unit-overline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  margin-bottom: 7px;
  color: var(--accent-700);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-caps: all-small-caps;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-title,
html[data-design="atlas"] .course-hub .hub-unit-title {
  display: block;
  font-size: 1.08rem;
  line-height: 1.25;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-question,
html[data-design="atlas"] .course-hub .hub-unit-question {
  display: block;
  margin-top: 9px;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.42;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-focus,
html[data-design="atlas"] .course-hub .hub-unit-focus {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.42;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-focus > span:first-child,
html[data-design="atlas"] .course-hub .hub-unit-focus > span:first-child,
html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-case > span:first-child,
html[data-design="atlas"] .course-hub .hub-unit-case > span:first-child {
  margin-right: 5px;
  color: var(--accent-700);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-caps: all-small-caps;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-case,
html[data-design="atlas"] .course-hub .hub-unit-case {
  display: block;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 0.78rem;
  line-height: 1.35;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-case strong,
html[data-design="atlas"] .course-hub .hub-unit-case strong {
  font-weight: 700;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-action,
html[data-design="atlas"] .course-hub .hub-unit-action {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  justify-self: start;
  min-width: max-content;
  margin-top: 16px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--accent);
  color: var(--accent-700);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-variant-caps: all-small-caps;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-link.is-planned,
html[data-design="atlas"] .course-hub .hub-unit-link.is-planned {
  cursor: default;
  background: var(--bg-2);
  color: var(--muted);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-alignment-note,
html[data-design="atlas"] .course-hub .hub-alignment-note {
  max-width: none;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices,
html[data-design="atlas"] .course-hub .hub-practices {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--border);
  background: var(--surface);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

html[data-design="atlas"] .course-hub .hub-practices {
  border-top: 3px solid var(--accent);
  border-radius: var(--r-sm);
  box-shadow: none;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-head,
html[data-design="atlas"] .course-hub .hub-practices-head {
  margin-bottom: 18px;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table-wrap,
html[data-design="atlas"] .course-hub .hub-practices-table-wrap {
  width: 100%;
  overflow-x: auto;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table,
html[data-design="atlas"] .course-hub .hub-practices-table {
  min-width: 640px;
  margin: 0;
  font-size: 0.95rem;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table th,
html[data-design="atlas"] .course-hub .hub-practices-table th {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.09em;
  font-variant-caps: all-small-caps;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table td,
html[data-design="atlas"] .course-hub .hub-practices-table td,
html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table th,
html[data-design="atlas"] .course-hub .hub-practices-table th {
  padding-block: 14px;
  border-color: var(--border);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table .badge,
html[data-design="atlas"] .course-hub .hub-practices-table .badge {
  border-color: var(--accent-300);
  background: var(--accent-050);
  color: var(--accent-700);
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .sr-only,
html[data-design="atlas"] .course-hub .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-footer,
html[data-design="atlas"] .course-hub .hub-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 24px max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 1250px) {
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-list,
  html[data-design="atlas"] .course-hub .hub-unit-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-intro,
  html[data-design="atlas"] .course-hub .hub-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path,
  html[data-design="atlas"] .course-hub .hub-learning-path {
    display: grid;
    grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1fr);
    gap: 28px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path ol,
  html[data-design="atlas"] .course-hub .hub-learning-path ol {
    margin-top: 0;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-list,
  html[data-design="atlas"] .course-hub .hub-unit-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  html:is([data-design="clear"], [data-design="field"]) .course-hub .wrap,
  html[data-design="atlas"] .course-hub .wrap {
    width: min(100% - 28px, 1360px);
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-header,
  html[data-design="atlas"] .course-hub .hub-header {
    position: static;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-header-inner,
  html[data-design="atlas"] .course-hub .hub-header-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding-block: 14px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-actions,
  html[data-design="atlas"] .course-hub .hub-actions {
    width: 100%;
    justify-content: space-between;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-intro,
  html[data-design="atlas"] .course-hub .hub-intro {
    padding: 0.45rem 24px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices,
  html[data-design="atlas"] .course-hub .hub-practices {
    padding: 24px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub h1,
  html[data-design="atlas"] .course-hub h1 {
    font-size: clamp(2.2rem, 11vw, 3.25rem);
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-learning-path,
  html[data-design="atlas"] .course-hub .hub-learning-path,
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-section-head,
  html[data-design="atlas"] .course-hub .hub-section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-link,
  html[data-design="atlas"] .course-hub .hub-unit-link {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 12px;
    padding: 20px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-list,
  html[data-design="atlas"] .course-hub .hub-unit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-index,
  html[data-design="atlas"] .course-hub .hub-unit-index {
    width: 56px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-action,
  html[data-design="atlas"] .course-hub .hub-unit-action {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 16px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table,
  html[data-design="atlas"] .course-hub .hub-practices-table,
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table tbody,
  html[data-design="atlas"] .course-hub .hub-practices-table tbody,
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table tr,
  html[data-design="atlas"] .course-hub .hub-practices-table tr,
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table td,
  html[data-design="atlas"] .course-hub .hub-practices-table td {
    width: 100%;
    min-width: 0;
    display: block;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table thead,
  html[data-design="atlas"] .course-hub .hub-practices-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table tr,
  html[data-design="atlas"] .course-hub .hub-practices-table tr {
    padding-block: 14px;
    border-top: 1px solid var(--border);
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table tr:first-child,
  html[data-design="atlas"] .course-hub .hub-practices-table tr:first-child {
    border-top: 0;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table td,
  html[data-design="atlas"] .course-hub .hub-practices-table td {
    padding: 0;
    border: 0;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices-table td:first-child,
  html[data-design="atlas"] .course-hub .hub-practices-table td:first-child {
    margin-bottom: 8px;
  }
}

@media (max-width: 460px) {
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-brand-sub,
  html[data-design="atlas"] .course-hub .hub-brand-sub {
    display: none;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-course-code,
  html[data-design="atlas"] .course-hub .hub-course-code {
    font-size: 0.65rem;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-intro,
  html[data-design="atlas"] .course-hub .hub-intro {
    padding: 0.375rem 20px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-practices,
  html[data-design="atlas"] .course-hub .hub-practices {
    padding: 20px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-link,
  html[data-design="atlas"] .course-hub .hub-unit-link {
    min-height: 360px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-list,
  html[data-design="atlas"] .course-hub .hub-unit-list {
    grid-template-columns: minmax(0, 1fr);
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-index,
  html[data-design="atlas"] .course-hub .hub-unit-index {
    width: 56px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-title,
  html[data-design="atlas"] .course-hub .hub-unit-title {
    font-size: 1.18rem;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-question,
  html[data-design="atlas"] .course-hub .hub-unit-question {
    font-size: 1rem;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-focus,
  html[data-design="atlas"] .course-hub .hub-unit-focus,
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-case,
  html[data-design="atlas"] .course-hub .hub-unit-case {
    font-size: 0.9rem;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-action,
  html[data-design="atlas"] .course-hub .hub-unit-action {
    grid-column: 1 / -1;
  }
}

@media (pointer: coarse) {
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-actions .design-mode-toggle,
  html[data-design="atlas"] .course-hub .hub-actions .design-mode-toggle {
    height: 50px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-actions .design-mode-toggle button,
  html[data-design="atlas"] .course-hub .hub-actions .design-mode-toggle button {
    min-height: 44px;
  }

  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-link,
  html[data-design="atlas"] .course-hub .hub-unit-link {
    min-height: 390px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-unit-link,
  html[data-design="atlas"] .course-hub .hub-unit-link,
  html:is([data-design="clear"], [data-design="field"]) .course-hub .hub-scroll-cue-arrow,
  html[data-design="atlas"] .course-hub .hub-scroll-cue-arrow {
    transition: none !important;
    animation: none;
  }
}