/*
 * Alps demo kit — the shared look of every scripted demo in static/alpswebsite/demos.
 *
 * Tokens are the product's own, so a demo reads as Alps and not as an illustration of it:
 *   type and palette   alps-react-app/src/utils/mui-theme.js (Noto Sans, #1864F2, button radius 10)
 *   code               @uiw/codemirror-theme-xcode, light — the theme the product's editor loads
 *   Pathfinder         alps-react-app/src/components/Pathfinder/pathfinder.css
 *   terminal           alps-react-app/src/components/terminal (light theme)
 *
 * Every class is dk- prefixed so the kit can load beside a demo's existing styles
 * without colliding with names like .stage, .tab, .cursor or .hidden.
 *
 * Load Noto Sans with the same URL the marketing site uses, so the font is already cached:
 *   https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap
 */

:root {
  --dk-font: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --dk-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  --dk-primary: #1864F2;
  --dk-primary-dark: #0e4cc0;
  --dk-primary-light: #4d8af5;
  --dk-primary-bg: #E8F1FE;
  --dk-success: #408B4D;
  --dk-success-bg: #E4F2E6;
  --dk-danger: #DC3545;
  --dk-danger-bg: #FCEBEC;
  --dk-warn: #9A5B00;
  --dk-warn-bg: #FFF4DB;

  --dk-pf: #9C27B0;
  --dk-pf-light: #BA68C8;
  --dk-pf-bg: #F3E5F5;
  --dk-pf-action: #2563EB;
  --dk-pf-action-bg: #EFF6FF;

  --dk-ink: #1f2733;
  --dk-ink-2: #5b6675;
  --dk-ink-3: #8a94a3;
  --dk-line: #e6e9ef;
  --dk-line-2: #d5dae3;
  --dk-page: #fafafa;
  --dk-card: #ffffff;
  --dk-soft: #f4f6f9;
  --dk-navy: #052B45;

  --dk-radius: 10px;
  --dk-radius-sm: 6px;
  --dk-radius-lg: 14px;
  --dk-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --dk-shadow-lg: 0 16px 40px rgba(16, 24, 40, .18);

  /* xcodeLight */
  --dk-tok-kw: #aa0d91;
  --dk-tok-str: #D23423;
  --dk-tok-type: #522BB2;
  --dk-tok-name: #032f62;
  --dk-tok-var: #23575C;
  --dk-tok-def: #327A9E;
  --dk-tok-num: #1c00cf;
  --dk-tok-com: #3f4c63;
  --dk-gutter: #AFAFAF;
  --dk-line-hl: rgba(213, 230, 255, .41);
  --dk-inline-code: #d6336c;
}

/* ─── base ───────────────────────────────────────────────────────── */
.dk-root, .dk-root *, .dk-root *::before, .dk-root *::after { box-sizing: border-box; }
.dk-root {
  font-family: var(--dk-font);
  color: var(--dk-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}
.dk-mono { font-family: var(--dk-mono); }
/* Inline icons default to the surrounding text size. :where() keeps this at zero specificity,
   so any component rule that sizes its own icon still wins. */
:where(.dk-root) svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; vertical-align: -.2em; }
.dk-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;
}
.dk-is-hidden { display: none !important; }

/* ─── app shell: left rail + main ────────────────────────────────── */
.dk-app { display: flex; width: 100%; height: 100%; background: var(--dk-page); overflow: hidden; }
.dk-rail {
  width: 92px; flex: none; background: var(--dk-page); border-right: 1px solid var(--dk-line);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 2px;
}
.dk-rail-logo { width: 52px; height: 28px; margin: 2px 0 8px; }
.dk-rail-item {
  width: 84px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 2px 5px; color: var(--dk-ink-2); font-size: 10.5px; font-weight: 500;
  line-height: 1.2; text-align: center;
}
.dk-rail-icon {
  width: 46px; height: 24px; border-radius: 99px; display: flex; align-items: center; justify-content: center;
  color: #4a5361;
}
.dk-rail-icon svg { width: 20px; height: 20px; fill: currentColor; }
.dk-rail-item.is-active { color: var(--dk-ink); font-weight: 500; }
.dk-rail-item.is-active .dk-rail-icon { background: var(--dk-primary-bg); color: var(--dk-primary); }
/* Create Coursework is a squared call-to-action pill in the product: light blue, solid blue when current */
.dk-rail-item[data-id="create"] .dk-rail-icon { background: #50bbff; color: #fff; border-radius: 6px; }
.dk-rail-item[data-id="create"].is-active .dk-rail-icon { background: var(--dk-primary); color: #fff; }
.dk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* textbook top bar: Contents button, breadcrumb, textbook picker */
.dk-topbar {
  display: flex; align-items: center; gap: 14px; padding: 12px 28px 10px; flex: none;
}
.dk-contents-btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--dk-primary); color: #fff;
  font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 5px; white-space: nowrap;
}
.dk-contents-btn svg { width: 15px; height: 15px; fill: currentColor; }
.dk-crumbs { display: flex; align-items: center; gap: 6px; color: var(--dk-ink-2); font-size: 12.5px; min-width: 0; white-space: nowrap; overflow: hidden; }
.dk-crumbs .sep { color: var(--dk-ink-3); }
.dk-crumbs .dk-crumb-last { color: var(--dk-ink); overflow: hidden; text-overflow: ellipsis; }
.dk-pill-select {
  margin-left: auto; border: 1px solid var(--dk-line-2); border-radius: 99px; padding: 5px 16px;
  color: var(--dk-primary); font-size: 13px; background: #fff; white-space: nowrap;
}
.dk-progress-track { height: 8px; margin: 0 28px; background: #e9ebee; border-radius: 99px; overflow: hidden; }
.dk-progress-fill { height: 100%; width: 0; background: var(--dk-primary); border-radius: 99px; }

/* page header for teacher screens */
.dk-page-head { padding: 22px 32px 6px; }
.dk-page-head h1 { margin: 0; font-size: 18px; font-weight: 500; color: var(--dk-ink); }
.dk-page-head p { margin: 2px 0 0; font-size: 15px; color: var(--dk-ink-2); }
.dk-section-title { font-size: 15px; font-weight: 500; margin: 0 0 2px; }
.dk-section-sub { font-size: 12.5px; color: var(--dk-ink-2); margin: 0 0 12px; }

/* textbook reading surface */
.dk-unit-title { text-align: center; color: var(--dk-primary); font-weight: 700; font-size: 30px; line-height: 1.2; margin: 18px 0 12px; }
.dk-prose { font-size: 15.5px; line-height: 1.6; color: var(--dk-ink); }
.dk-prose p { margin: 0 0 14px; }
.dk-prose code { font-family: var(--dk-mono); font-size: .92em; color: var(--dk-inline-code); }
.dk-prose strong { font-weight: 700; }
.dk-cyu { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin: 8px 0 10px; }

/* ─── activity card (ItemBox): full-width blue header ────────────── */
.dk-activity { background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 4px; overflow: hidden; position: relative; }
.dk-activity-head {
  display: flex; align-items: center; gap: 12px; background: var(--dk-primary); color: #fff;
  padding: 11px 16px; font-size: 15px; font-weight: 500;
}
.dk-activity-head .dk-activity-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-activity-head svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.dk-activity-actions { display: flex; align-items: center; gap: 8px; }
.dk-activity-actions .dk-icon-btn { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; opacity: .75; }
.dk-activity-body { padding: 14px 16px 16px; }
.dk-activity-prompt { font-size: 14px; line-height: 1.55; color: var(--dk-ink); margin: 0 0 12px; }
.dk-activity-prompt code { font-family: var(--dk-mono); font-size: .92em; color: var(--dk-inline-code); }
.dk-activity-num {
  position: absolute; left: -46px; top: 12px; font: 600 11px/1 var(--dk-mono); color: var(--dk-primary);
  background: var(--dk-primary-bg); border-radius: 5px; padding: 5px 7px;
}

/* the Pathfinder launcher in the activity header */
.dk-pf-launch { color: #fff; opacity: .55; transition: opacity .2s, background-color .2s; }
.dk-pf-launch.is-attention { opacity: 1; animation: dk-pf-pulse 1.6s ease-in-out infinite; }
.dk-pf-launch.is-open { opacity: 1; background: var(--dk-pf); }
@keyframes dk-pf-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

/* ─── buttons, chips, badges ─────────────────────────────────────── */
.dk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  font: 600 13px/1 var(--dk-font); border-radius: var(--dk-radius); padding: 9px 14px;
  border: 1px solid transparent; background: transparent; color: var(--dk-ink);
  transition: filter .15s, transform .15s, background-color .2s, color .2s;
}
.dk-btn svg { width: 16px; height: 16px; fill: currentColor; }
.dk-btn-primary { background: var(--dk-primary); color: #fff; }
.dk-btn-success { background: var(--dk-success); color: #fff; }
.dk-btn-outline { border-color: var(--dk-primary); color: var(--dk-primary); background: #fff; }
.dk-btn-quiet { border-color: var(--dk-line-2); color: var(--dk-ink-2); background: #fff; }
.dk-btn.is-pressed { filter: brightness(.9); transform: translateY(1px); }
.dk-btn[disabled], .dk-btn.is-disabled { opacity: .45; }

.dk-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  border-radius: 99px; padding: 2px 9px; background: var(--dk-primary); color: #fff; white-space: nowrap;
}
.dk-chip-soft { background: var(--dk-primary-bg); color: var(--dk-primary); }
.dk-chip-success { background: var(--dk-success-bg); color: var(--dk-success); }
.dk-chip-danger { background: var(--dk-danger-bg); color: var(--dk-danger); }
.dk-chip-warn { background: var(--dk-warn-bg); color: var(--dk-warn); }
.dk-chip-muted { background: var(--dk-soft); color: var(--dk-ink-2); }

/* ─── tabs ───────────────────────────────────────────────────────── */
.dk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--dk-line); }
.dk-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--dk-ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.dk-tab.is-active { color: var(--dk-primary); border-bottom-color: var(--dk-primary); }
.dk-count { font: 700 10.5px/1 var(--dk-mono); padding: 3px 6px; border-radius: 99px; background: var(--dk-soft); color: var(--dk-ink-2); }
.dk-count.is-pass { background: var(--dk-success-bg); color: var(--dk-success); }
.dk-count.is-fail { background: var(--dk-danger-bg); color: var(--dk-danger); }

/* ─── code editor (CodeMirror, xcodeLight) ───────────────────────── */
.dk-editor {
  font: 13.5px/1.62 var(--dk-mono); background: #fff; border: 1px solid var(--dk-line); border-radius: var(--dk-radius-sm);
  padding: 8px 0; overflow: hidden; color: #000; position: relative;
}
.dk-code-line { display: flex; min-height: 1.62em; white-space: pre; position: relative; }
.dk-code-line .dk-gutter { width: 40px; flex: none; text-align: right; padding-right: 14px; color: var(--dk-gutter); user-select: none; }
.dk-code-line .dk-code { flex: 1; min-width: 0; padding-right: 12px; }
.dk-code-line.is-active { background: var(--dk-line-hl); }
.dk-code-line.is-error { background: rgba(220, 53, 69, .08); }
.dk-code-line.is-error .dk-code { text-decoration: underline wavy var(--dk-danger); text-underline-offset: 4px; }
.dk-caret { display: inline-block; width: 2px; height: 1.15em; background: #000; vertical-align: text-bottom; margin-left: 1px; animation: dk-blink 1s steps(1) infinite; }
@keyframes dk-blink { 50% { opacity: 0; } }
.tk-kw { color: var(--dk-tok-kw); font-weight: 700; }
.tk-str { color: var(--dk-tok-str); }
.tk-type { color: var(--dk-tok-type); }
.tk-name { color: var(--dk-tok-name); }
.tk-var { color: var(--dk-tok-var); }
.tk-def { color: var(--dk-tok-def); }
.tk-num { color: var(--dk-tok-num); }
.tk-com { color: var(--dk-tok-com); font-style: italic; }

/* ─── terminal (product light theme) ─────────────────────────────── */
.dk-terminal {
  font: 12.5px/1.55 var(--dk-mono); background: #fff; color: #000; border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius-sm); padding: 10px 12px; white-space: pre; overflow: hidden; position: relative;
}
.dk-terminal .dk-prompt { color: var(--dk-success); font-weight: 600; }
.dk-terminal .dk-dim { color: var(--dk-ink-3); }
.dk-terminal .dk-err { color: var(--dk-danger); }
.dk-terminal .dk-ok { color: var(--dk-success); }
.dk-terminal .dk-hit { background: #FFF1B8; }
.dk-terminal .dk-input { color: var(--dk-primary); font-weight: 600; }

/* ─── results table ──────────────────────────────────────────────── */
.dk-table { border-collapse: collapse; font-size: 12.5px; background: #fff; }
.dk-table th { text-align: left; font-weight: 600; color: var(--dk-ink-2); background: var(--dk-soft); padding: 6px 12px; border-bottom: 1px solid var(--dk-line); }
.dk-table td { padding: 6px 12px; border-bottom: 1px solid var(--dk-line); font-family: var(--dk-mono); font-size: 12px; }

/* ─── unit test rows ─────────────────────────────────────────────── */
.dk-tests { display: flex; flex-direction: column; }
.dk-test { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--dk-line); font-size: 12.5px; }
.dk-test .dk-test-icon { width: 18px; height: 18px; border-radius: 99px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; }
.dk-test.is-pass .dk-test-icon { background: var(--dk-success); }
.dk-test.is-fail .dk-test-icon { background: var(--dk-danger); }
.dk-test .dk-test-name { flex: 1; min-width: 0; font-family: var(--dk-mono); font-size: 12px; color: var(--dk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-test .dk-test-state { font-weight: 600; font-size: 12px; }
.dk-test.is-pass .dk-test-state { color: var(--dk-success); }
.dk-test.is-fail .dk-test-state { color: var(--dk-danger); }
.dk-test-summary { padding: 8px 4px 0; font-size: 12.5px; font-weight: 600; }
.dk-test-summary.is-pass { color: var(--dk-success); }
.dk-test-summary.is-fail { color: var(--dk-danger); }

/* ─── code workbench: an activity card with a file tab, Run, editor and a side pane ─ */
.dk-work { position: absolute; left: 26px; right: 20px; top: 52px; bottom: 10px; }
.dk-work > .dk-activity { height: 100%; display: flex; flex-direction: column; }
.dk-work .dk-activity-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 14px 12px; }
.dk-codebar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex: none; }
.dk-spacer { flex: 1; }
.dk-file {
  display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--dk-mono); color: var(--dk-ink-2);
  border: 1px solid transparent; border-bottom-color: transparent; border-radius: 6px 6px 0 0; padding: 7px 10px; white-space: nowrap;
}
.dk-file.is-active { color: var(--dk-ink); background: var(--dk-soft); border-color: var(--dk-line); border-bottom-color: transparent; }
.dk-file svg { width: 14px; height: 14px; fill: var(--dk-ink-2); }
.dk-file-add { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: 1px dashed var(--dk-line-2); color: var(--dk-ink-2); }
.dk-file-add svg { width: 16px; height: 16px; }
.dk-split { flex: 1; min-height: 0; display: flex; gap: 12px; }
.dk-split > .dk-editor { flex: 1.25; min-width: 0; font-size: 12.5px; line-height: 1.55; overflow: hidden; }
.dk-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dk-side .dk-tabs { flex: none; }
.dk-side .dk-terminal { flex: 1; min-height: 0; font-size: 12px; line-height: 1.55; }
.dk-panel { flex: 1; min-height: 0; border: 1px solid var(--dk-line); border-radius: var(--dk-radius-sm); padding: 8px 12px; background: #fff; overflow: hidden; }
.dk-panel .dk-table { width: 100%; margin-bottom: 4px; }
.dk-meta { font-size: 11.5px; color: var(--dk-ink-2); margin: 8px 0 4px; display: flex; align-items: center; gap: 6px; }
.dk-term-caret { display: inline-block; width: 7px; height: 14px; background: var(--dk-primary); vertical-align: -2px; animation: dk-blink 1s steps(1) infinite; }
/* engine chip: which runtime the file runs on; SQLite and PostgreSQL wear their own colors */
.dk-engine {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 99px;
  padding: 5px 10px; background: var(--dk-soft); color: var(--dk-ink-2); position: relative; white-space: nowrap;
}
.dk-engine i { width: 8px; height: 8px; border-radius: 99px; background: currentColor; flex: none; }
.dk-engine svg { width: 16px; height: 16px; }
.dk-engine.is-sqlite { background: #E4F1FA; color: #0F80CC; }
.dk-engine.is-pg { background: #E7EEF5; color: #336791; }
.dk-engine.is-wasm { background: var(--dk-primary-bg); color: var(--dk-primary); }
.dk-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; background: #fff; border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius); box-shadow: var(--dk-shadow-lg); padding: 6px; z-index: 8; color: var(--dk-ink); font-weight: 500;
}
.dk-menu > div { padding: 7px 10px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.dk-menu > div.is-hover { background: var(--dk-soft); }
.dk-menu > div.is-selected { color: var(--dk-primary); font-weight: 600; }
.dk-spinner {
  display: inline-block; width: 13px; height: 13px; border-radius: 99px; flex: none; vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: dk-spin .8s linear infinite;
}
.dk-spinner.is-dark { border-color: var(--dk-line-2); border-top-color: var(--dk-primary); }
@keyframes dk-spin { to { transform: rotate(360deg); } }
.is-mobile .dk-work { left: 8px; right: 8px; top: 50px; bottom: 8px; }
.is-mobile .dk-work .dk-activity-head { padding: 8px 10px; font-size: 13px; }
.is-mobile .dk-work .dk-activity-body { padding: 8px 10px 10px; }
.is-mobile .dk-codebar { margin-bottom: 6px; gap: 6px; }
.is-mobile .dk-file { font-size: 10.5px; padding: 5px 8px; }
.is-mobile .dk-codebar .dk-btn { padding: 6px 10px; font-size: 12px; }
.is-mobile .dk-split { flex-direction: column; gap: 6px; }
.is-mobile .dk-split > .dk-editor { flex: none; }
.is-mobile .dk-split .dk-code-line .dk-gutter { width: 22px; padding-right: 7px; }
.is-mobile .dk-side .dk-terminal { padding: 6px 8px; }
.is-mobile .dk-side .dk-tabs .dk-tab { padding: 6px 9px; font-size: 11px; }
.is-mobile .dk-panel { padding: 5px 8px; }
.is-mobile .dk-panel .dk-table th, .is-mobile .dk-panel .dk-table td { padding: 3px 8px; font-size: 10.5px; }
.is-mobile .dk-meta { margin: 4px 0 2px; font-size: 10.5px; }
.dk-meta:first-child, .is-mobile .dk-meta:first-child { margin-top: 0; }
.is-mobile .dk-engine { font-size: 10.5px; padding: 4px 8px; }

/* ─── notebook (Jupyter in the textbook) ─────────────────────────── */
.dk-nb { position: relative; padding: 0 34px 30px; }
.dk-nb-bar { display: flex; align-items: center; gap: 8px; padding: 6px 0 10px; }
.dk-nb-bar .dk-btn { padding: 7px 12px; font-size: 12.5px; }
.dk-kernel {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dk-ink-2);
  border: 1px solid var(--dk-line-2); border-radius: 99px; padding: 5px 11px; background: #fff; white-space: nowrap;
}
.dk-kernel i { width: 9px; height: 9px; border-radius: 99px; background: var(--dk-success); }
.dk-kernel.is-busy i { background: #F59E0B; }
.dk-md { padding: 4px 0 10px 64px; }
.dk-md h2 { margin: 0 0 4px; font-size: 20px; }
.dk-md p { margin: 0; font-size: 14px; color: var(--dk-ink); }
.dk-cell { display: flex; gap: 10px; margin-bottom: 8px; }
.dk-cell-prompt { width: 54px; flex: none; text-align: right; font: 12px/1.6 var(--dk-mono); color: #2f6fb6; padding-top: 7px; }
.dk-cell-prompt.is-run { color: #b45309; }
.dk-cell-src {
  flex: 1; min-width: 0; background: #f7f7f7; border: 1px solid #e0e0e0; border-radius: 4px; font: 12.5px/1.6 var(--dk-mono);
  padding: 6px 10px; white-space: pre; overflow: hidden; transition: box-shadow .2s, border-color .2s;
}
.dk-cell.is-active .dk-cell-src { border-color: var(--dk-primary-light); box-shadow: inset 3px 0 0 var(--dk-primary); }
.dk-cell-out { flex: 1; min-width: 0; font: 12.5px/1.5 var(--dk-mono); white-space: pre-wrap; }
.dk-cell-out.is-error { color: var(--dk-danger); }
.dk-plot { background: #fff; border: 1px solid var(--dk-line); border-radius: 4px; display: block; max-width: 100%; }
.is-mobile .dk-nb { padding: 0 8px 20px; }
.is-mobile .dk-nb-bar { padding: 6px 0; }
.is-mobile .dk-nb-bar .dk-btn { padding: 5px 9px; font-size: 11px; }
.is-mobile .dk-kernel { font-size: 10px; padding: 3px 8px; }
.is-mobile .dk-md { padding: 0 0 6px 30px; }
.is-mobile .dk-md h2 { font-size: 14.5px; }
.is-mobile .dk-md p { font-size: 11px; }
.is-mobile .dk-cell { gap: 4px; margin-bottom: 5px; }
.is-mobile .dk-cell-prompt { width: 26px; font-size: 8.5px; }
.is-mobile .dk-cell-src { padding: 4px 6px; }

/* ─── Pathfinder panel ───────────────────────────────────────────── */
.dk-pf-panel {
  background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, .14); overflow: hidden;
  display: flex; flex-direction: column; border: 1px solid rgba(0, 0, 0, .04);
}
.dk-pf-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--dk-pf); color: #fff; font-size: 14px; font-weight: 600; }
.dk-pf-head svg { width: 19px; height: 19px; fill: currentColor; }
.dk-pf-sub { padding: 6px 14px; background: #F9FAFB; border-bottom: 1px solid #E5E7EB; font-size: 12px; font-weight: 700; color: var(--dk-pf-action); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-pf-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.dk-pf-note { display: flex; align-items: flex-start; gap: 8px; border-left: 3px solid var(--dk-pf-action); background: var(--dk-pf-action-bg); border-radius: 0 8px 8px 0; padding: 9px 11px; font-size: 13px; color: #374151; }
.dk-pf-note svg { width: 17px; height: 17px; fill: var(--dk-pf-action); margin-top: 1px; }
.dk-pf-text { font-size: 13px; line-height: 1.5; color: #374151; }
.dk-pf-step { border: 1px solid #E5E7EB; border-radius: 8px; padding: 9px 11px; }
.dk-pf-step-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.dk-pf-step-num { width: 20px; height: 20px; border-radius: 99px; background: var(--dk-pf-bg); color: var(--dk-pf); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dk-pf-step-name { font-family: var(--dk-mono); font-size: 12.5px; }
.dk-pf-step-state { margin-left: auto; font-size: 11.5px; font-weight: 600; }
.dk-pf-step-state.is-done { color: var(--dk-success); }
.dk-pf-step-state.is-focus { color: var(--dk-danger); }
.dk-pf-step-desc { font-size: 12px; color: var(--dk-ink-2); margin-top: 4px; }
.dk-pf-choice {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1px solid #DBEAFE;
  background: #fff; color: var(--dk-pf-action); border-radius: 8px; padding: 8px 11px; font-size: 13px; font-weight: 600;
}
.dk-pf-choice svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.dk-pf-choice.is-pressed { background: var(--dk-pf-action-bg); }
.dk-subgoal {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 2px 40px; padding: 3px 10px; border-radius: 6px;
  background: var(--dk-pf-bg); color: #6A1B7A; font: 600 11.5px/1.4 var(--dk-font); width: fit-content;
}
.dk-subgoal .dk-subgoal-state { font-weight: 600; }
.dk-subgoal .dk-subgoal-state.is-done { color: var(--dk-success); }
.dk-subgoal .dk-subgoal-state.is-focus { color: var(--dk-danger); }

/* ─── modal ──────────────────────────────────────────────────────── */
.dk-scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .38); display: flex; align-items: center; justify-content: center; }
.dk-modal { background: #fff; border-radius: 12px; box-shadow: var(--dk-shadow-lg); overflow: hidden; }
.dk-modal-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--dk-line); font-size: 15px; font-weight: 600; }
.dk-modal-head .dk-close { margin-left: auto; color: var(--dk-ink-3); font-size: 18px; }

/* ─── toast ──────────────────────────────────────────────────────── */
.dk-toast {
  display: inline-flex; align-items: center; gap: 8px; background: #1f2733; color: #fff; font-size: 13px;
  padding: 9px 14px; border-radius: 8px; box-shadow: var(--dk-shadow-lg);
}
.dk-toast svg { width: 16px; height: 16px; fill: #7ee2a8; }

/* ─── motion helpers ─────────────────────────────────────────────── */
.dk-enter { animation: dk-enter .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dk-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dk-pop { animation: dk-pop .38s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes dk-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.dk-flash { animation: dk-flash 1.1s ease-out both; }
@keyframes dk-flash { 0% { box-shadow: 0 0 0 0 rgba(24, 100, 242, .45); } 100% { box-shadow: 0 0 0 12px rgba(24, 100, 242, 0); } }

/* ─── simulated pointer ──────────────────────────────────────────── */
.dk-cursor {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 50; pointer-events: none;
  transform: translate(-60px, -60px); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); opacity: 0;
  transition: opacity .25s;
}
.dk-cursor.is-visible { opacity: 1; }
/* on a touch layout the pointer is a fingertip, centered on the point it touches */
.dk-cursor.is-touch svg { display: none; }
.dk-cursor.is-touch::before {
  content: ''; position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 99px;
  background: rgba(15, 23, 42, .26); border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
}
.dk-cursor svg { width: 22px; height: 22px; display: block; }
.dk-ripple {
  position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 99px; pointer-events: none;
  background: rgba(24, 100, 242, .28); z-index: 49;
}

/* ─── a full walkthrough page: the product on top, controls below ─ */
.dk-demo { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--dk-page); }
.dk-demo-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dk-demo-stage > .s-app { position: absolute; inset: 0; }
.dk-demo-controls { flex: none; height: 46px; padding: 0 14px; background: #fff; border-top: 1px solid var(--dk-line); }
.dk-demo-controls .dk-play { width: 32px; height: 32px; }
.dk-demo-controls .dk-chapter { cursor: default; padding: 8px 0 4px; }
.dk-demo-controls .dk-chapter-label { font-size: 11px; }
@media (max-width: 560px) { .dk-demo-controls .dk-chapter-label { display: none; } .dk-demo-controls .dk-chapter { padding: 12px 0; } }
.dk-mbar { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #fff; border-bottom: 1px solid var(--dk-line); font-size: 13.5px; font-weight: 600; }
.dk-mbar > svg { width: 19px; height: 19px; fill: var(--dk-ink-2); }
.dk-mbar .m-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-mbar .m-logo { width: 32px; height: 19px; }

/* ─── caption: the one narration style every full demo uses ─────── */
.dk-caption {
  position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 6px); z-index: 60; pointer-events: none;
  width: max-content; max-width: min(88%, 760px); text-align: center; background: rgba(15, 23, 42, .92); color: #fff;
  font: 500 14px/1.5 var(--dk-font); padding: 9px 18px; border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .28); opacity: 0; transition: opacity .3s, transform .3s;
}
.dk-caption.is-visible { opacity: 1; transform: translate(-50%, 0); }
.dk-caption b, .dk-caption strong { color: #9cc3ff; font-weight: 600; }
@media (max-width: 560px) { .dk-caption { font-size: 12px; padding: 7px 12px; bottom: 10px; max-width: 92%; border-radius: 10px; } }

/* ─── player controls: pause/play + chapters ────────────────────── */
.dk-controls { display: flex; align-items: center; gap: 12px; font-family: var(--dk-font); }
.dk-play {
  width: 36px; height: 36px; flex: none; border-radius: 99px; border: 1px solid var(--dk-line-2); background: #fff;
  color: var(--dk-ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dk-play svg { width: 18px; height: 18px; fill: currentColor; }
.dk-play:hover { border-color: var(--dk-primary); color: var(--dk-primary); }
.dk-chapters { display: flex; gap: 4px; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.dk-chapters li { flex: 1; min-width: 0; }
.dk-chapter {
  width: 100%; border: 0; background: transparent; padding: 8px 0 6px; cursor: pointer; text-align: left;
  font: 500 11.5px/1.25 var(--dk-font); color: var(--dk-ink-2);
}
.dk-chapter-track { display: block; height: 4px; border-radius: 99px; background: rgba(15, 23, 42, .12); overflow: hidden; margin-bottom: 6px; }
.dk-chapter-fill { display: block; height: 100%; width: 0; background: var(--dk-primary); border-radius: 99px; }
.dk-chapter.is-done .dk-chapter-fill { width: 100%; }
.dk-chapter-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-chapter[aria-current="step"] { color: var(--dk-ink); font-weight: 600; }
.dk-chapter:hover .dk-chapter-track { background: rgba(15, 23, 42, .2); }
.dk-play:focus-visible, .dk-chapter:focus-visible { outline: 3px solid var(--dk-primary-light); outline-offset: 2px; border-radius: 6px; }

/* Smart Search — alps-react-app src/components/SmartSearch (smart-search.css, textbook-toolbar.css) */
.dk-tb-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 28px 8px; flex: none; }
.dk-tb-trail { display: flex; align-items: center; gap: 2px; min-width: 0; white-space: nowrap; overflow: hidden; font-size: 12.5px; color: rgba(0, 0, 0, .6); font-weight: 500; }
.dk-tb-trail > span { overflow: hidden; text-overflow: ellipsis; }
.dk-tb-trail b { font-weight: 600; }
.dk-tb-trail svg { width: 17px; height: 17px; fill: rgba(0, 0, 0, .6); flex: none; }
.dk-tb-tools { display: flex; align-items: center; gap: 12px; }
.dk-tb-slot { margin-left: auto; flex: 1 1 220px; max-width: 380px; position: relative; }
.dk-ss-box {
  height: 40px; border-radius: 32px; background: #fff; border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
  display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; transition: border-color .15s, box-shadow .15s;
}
.dk-ss-glass { width: 20px; height: 20px; fill: rgba(0, 0, 0, .6); flex: none; }
.dk-ss-field { flex: 1; min-width: 0; display: flex; justify-content: flex-end; overflow: hidden; }   /* a long query shows its end, as an input does */
.dk-ss-text { flex: 1 0 auto; white-space: nowrap; font-size: 14px; line-height: 20px; color: rgba(0, 0, 0, .87); }
.dk-ss-text:empty::before { content: attr(data-placeholder); color: rgba(0, 0, 0, .42); }
.dk-ss-clear { display: none; width: 22px; height: 22px; align-items: center; justify-content: center; flex: none; }
.dk-ss-clear svg { width: 15px; height: 15px; fill: rgba(0, 0, 0, .54); }
.dk-ss-go { flex: none; min-width: 72px; text-align: center; border-radius: 18px; padding: 5px 12px; font-size: 13px; font-weight: 500; background: rgba(0, 0, 0, .12); color: rgba(0, 0, 0, .38); }
.dk-ss-box.is-focused { border-color: rgba(24, 100, 242, .35); box-shadow: 0 6px 20px rgba(0, 0, 0, .14); }
.dk-ss-box.is-focused .dk-ss-glass { fill: #1864F2; }
.dk-ss-box.has-text .dk-ss-clear { display: flex; }
.dk-ss-box.has-text .dk-ss-go { background: #1864F2; color: #fff; }
.dk-ss-box.is-searching .dk-ss-go { background: rgba(0, 0, 0, .12); color: rgba(0, 0, 0, .38); }

.dk-ss-drop {
  position: absolute; top: 48px; right: 0; width: 520px; z-index: 12; background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .04); padding: 12px 14px 10px; font-size: 13px; color: rgba(0, 0, 0, .87);
}
.dk-ss-drop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.dk-ss-eyebrow { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 0, 0, .6); }
.dk-ss-drop-head .dk-ss-eyebrow { flex: 1; }
.dk-ss-link { color: #1864F2; font-size: 12.5px; font-weight: 500; }
.dk-ss-types { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
.dk-ss-types span { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 13px; }
.dk-ss-types i { width: 14px; height: 14px; border: 2px solid rgba(0, 0, 0, .54); border-radius: 2px; flex: none; }
.dk-ss-drop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid rgba(0, 0, 0, .12); margin-top: 8px; padding-top: 8px; }
.dk-ss-drop-cols p { margin: 4px 0 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-ss-muted { color: rgba(0, 0, 0, .6); }
.dk-ss-try { color: #1864F2; }
.dk-ss-drop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid rgba(0, 0, 0, .06); margin-top: 10px; padding-top: 8px; font-size: 12px; color: rgba(0, 0, 0, .6); white-space: nowrap; }
.dk-ss-scope { background: #E8F1FE; color: #1864F2; border: 1px solid rgba(24, 100, 242, .35); border-radius: 6px; padding: 1px 6px; font-size: 11.5px; font-weight: 500; }
.dk-ss-books { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dk-ss-keys { margin-left: auto; }

.dk-ss-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; z-index: 10; background: #fff;
  border-left: 1px solid rgba(0, 0, 0, .12); box-shadow: -8px 0 24px rgba(0, 0, 0, .08); display: flex; flex-direction: column;
}
.dk-ss-bar { display: flex; align-items: center; min-height: 48px; padding: 4px 6px 4px 14px; border-bottom: 1px solid rgba(0, 0, 0, .12); flex: none; }
.dk-ss-bar b { font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, .87); flex: 1; }
.dk-ss-modes { display: flex; gap: 2px; }
.dk-ss-modes span { width: 30px; height: 30px; border-radius: 99px; display: flex; align-items: center; justify-content: center; }
.dk-ss-modes svg { width: 20px; height: 20px; fill: rgba(0, 0, 0, .54); }
.dk-ss-modes .is-on { background: #E8F1FE; }
.dk-ss-modes .is-on svg { fill: #1864F2; }
.dk-ss-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dk-ss-wait { display: flex; align-items: center; gap: 10px; padding: 14px 16px 4px; font-size: 12px; color: rgba(0, 0, 0, .6); }
.dk-ss-wait .dk-spinner { width: 18px; height: 18px; }
.dk-ss-skel { padding: 16px; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.dk-ss-skel i { display: block; height: 12px; width: 100%; border-radius: 4px; background: rgba(0, 0, 0, .08); margin-bottom: 8px; }
.dk-ss-meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px; font-size: 12px; line-height: 16px; color: rgba(0, 0, 0, .6); flex: none; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.dk-ss-list { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dk-ss-rows { padding: 0 16px 48px; }
.dk-ss-row { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.dk-ss-head { display: flex; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; }
.dk-ss-head.is-hover { background: #E8F1FE; }
.dk-ss-ring { --p: 33; position: relative; width: 40px; height: 40px; flex: none; border-radius: 99px; }
/* the ring is painted on its own layer so the mask that hollows it does not also hide the type glyph */
.dk-ss-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: conic-gradient(#1864F2 calc(var(--p) * 1%), rgba(0, 0, 0, .12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
.dk-ss-ring > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.dk-ss-ring > span svg { width: 18px; height: 18px; fill: inherit; }
.dk-ss-head { position: relative; }
.dk-ss-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dk-ss-crumb { font-size: 12px; line-height: 16px; color: rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-ss-title {
  margin-top: 2px; font-size: 15.5px; line-height: 22px; font-weight: 500; color: #1864F2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dk-ss-acts { display: flex; gap: 2px; margin-top: 4px; flex: none; }
.dk-ss-acts > span { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 99px; }
.dk-ss-acts svg { width: 20px; height: 20px; fill: rgba(0, 0, 0, .54); }
.dk-ss-acts .dk-ss-open svg { width: 16px; height: 18px; }
.dk-ss-open { position: relative; }
.dk-ss-snip { margin: 4px 0 0 52px; padding-right: 8px; font-size: 13.5px; line-height: 20px; color: rgba(0, 0, 0, .87); }
.dk-ss-strip { display: inline-flex; align-items: center; gap: 2px; margin: 8px 0 0 52px; padding: 3px 8px; background: #fafafa; border-radius: 6px; font-size: 12px; color: rgba(0, 0, 0, .6); }
.dk-ss-strip i { width: 14px; height: 5px; border-radius: 2px; background: rgba(0, 0, 0, .12); }
.dk-ss-strip i:last-of-type { margin-right: 6px; }
.dk-ss-card { margin: 6px 8px 0 52px; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 8px; background: #fff; font-size: 13.5px; line-height: 20px; color: rgba(0, 0, 0, .87); }
.dk-ss-end { margin: 14px 0 0; text-align: center; font-size: 12px; color: rgba(0, 0, 0, .6); }
.dk-ss-weak { margin: 6px 0 0; text-align: center; font-size: 13px; font-weight: 500; color: #1864F2; }
.dk-ss-tip { position: absolute; bottom: calc(100% + 14px); right: 50%; translate: 50% 0; background: rgba(97, 97, 97, .92); color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; z-index: 3; }
/* demo annotation, not product styling: points at what the student never typed */
.dk-ss-concept { background-image: linear-gradient(var(--dk-pf), var(--dk-pf)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: background-size .5s ease; }
.dk-ss-concept.is-noted { background-size: 100% 2px; }
.dk-ss-book { border-radius: 4px; transition: box-shadow .3s; }
.dk-ss-book.is-noted { box-shadow: 0 0 0 2px rgba(156, 39, 176, .35); background: rgba(156, 39, 176, .06); }
/* phone: the same parts at phone scale */
.is-mobile .dk-ss-box { height: 36px; padding: 0 4px 0 10px; gap: 6px; }
.is-mobile .dk-ss-glass { width: 18px; height: 18px; }
.is-mobile .dk-ss-text { font-size: 12.5px; }
.is-mobile .dk-ss-go { min-width: 60px; padding: 4px 8px; font-size: 12px; }
.is-mobile .dk-ss-panel { width: 100%; border-left: 0; box-shadow: none; border-top: 1px solid rgba(0, 0, 0, .12); }
.is-mobile .dk-ss-bar { min-height: 40px; }
.is-mobile .dk-ss-modes span { width: 26px; height: 26px; }
.is-mobile .dk-ss-modes svg { width: 17px; height: 17px; }
.is-mobile .dk-ss-meta { font-size: 10.5px; line-height: 14px; padding: 6px 12px; }
.is-mobile .dk-ss-rows { padding: 0 12px 40px; }
.is-mobile .dk-ss-row { padding: 6px 0; }
.is-mobile .dk-ss-head { gap: 8px; padding: 4px 6px; margin: 0 -6px; }
.is-mobile .dk-ss-ring { width: 32px; height: 32px; }
.is-mobile .dk-ss-ring > span svg { width: 15px; height: 15px; }
.is-mobile .dk-ss-crumb { font-size: 10.5px; line-height: 14px; }
.is-mobile .dk-ss-title { font-size: 13px; line-height: 18px; }
.is-mobile .dk-ss-acts > span { width: 22px; height: 22px; }
.is-mobile .dk-ss-tip { display: none; }   /* touch shows no hover tooltip */
.is-mobile .dk-ss-acts svg { width: 16px; height: 16px; }
.is-mobile .dk-ss-acts .dk-ss-open svg { width: 13px; height: 15px; }
.is-mobile .dk-ss-snip, .is-mobile .dk-ss-card { margin-left: 40px; font-size: 12px; line-height: 17px; }
.is-mobile .dk-ss-card { padding: 7px 9px; margin-right: 4px; }
.is-mobile .dk-ss-strip { margin-left: 40px; font-size: 10.5px; }

@media (prefers-reduced-motion: reduce) {
  .dk-enter, .dk-pop, .dk-flash, .dk-pf-launch.is-attention, .dk-caret, .dk-term-caret, .dk-spinner { animation: none !important; }
  .dk-caption, .dk-cursor, .dk-ss-box, .dk-ss-concept, .dk-ss-book { transition: none; }
}