/* master.css — the multi-stack shell: stack + mode switches, per-stack accent
 * theming, the generic Practice "lab" tables, and the Learn curriculum map.
 * Loaded after python.css so it can extend/override the two-workspace styles. */

/* ---- top-bar switches ------------------------------------------------------ */
.ws-switches { display: flex; align-items: center; gap: 8px; margin-left: 12px; flex-wrap: wrap; }
.ws-switches .ws-switch { margin-left: 0; }
.mode-switch { display: inline-flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.mode-btn { background: transparent; border: none; color: var(--muted); font-size: 12.5px; font-weight: 700; padding: 5px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.mode-btn:hover:not(:disabled) { color: var(--text); }
.mode-btn.active { background: var(--brand); color: #06111f; box-shadow: 0 0 12px var(--brand-glow); }
.mode-btn.soon, .mode-btn:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 860px) {
  .mode-btn { padding: 5px 9px; font-size: 11.5px; }
  .ws-switches { gap: 6px; }
}

/* ---- per-stack accent theming (the whole UI recolors to the active stack) --- */
body[data-stack="numpy"]  { --brand: #37b24d; --brand-2: #69db7c; --brand-glow: rgba(55,178,77,.35); }
body[data-stack="pandas"] { --brand: #845ef7; --brand-2: #b197fc; --brand-glow: rgba(132,94,247,.35); }
body[data-stack="spark"]  { --brand: #f76707; --brand-2: #ffa94d; --brand-glow: rgba(247,103,7,.35); }
body[data-stack="sql"]    { --brand: #0ca678; --brand-2: #38d9a9; --brand-glow: rgba(12,166,120,.35); }
/* python keeps the default blue from main.css */

/* the "All 150 / Blind 75" study-set toggle is DSA-only — hide it everywhere else */
body[data-ws="python"] #setToggle { display: none !important; }

/* readiness ring on Learn landings */
.py-ready-ring { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: var(--text);
  background: conic-gradient(var(--brand) calc(var(--pct) * 1%), var(--bg-3) 0); position: relative; }
.py-ready-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--bg-1); }
.py-ready-ring span { position: relative; z-index: 1; }
.py-readiness { display: flex; align-items: center; gap: 18px; }
.py-ready-txt { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

/* lab progress box (shared #pyProgress) */
.py-prog-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 12.5px; color: var(--text-2); margin-bottom: 7px; }
.py-prog-pct { color: var(--brand-2); font-size: 13px; }
.py-prog-foot { margin-top: 6px; font-size: 11.5px; }

/* In-view sub-bar — shown only while a filter/search narrows the list. Uses the
   per-stack brand accent (not the green "overall" fill) so the two never blur
   together: green = the whole mountain, brand = the trail you're on now. */
.py-inview, .in-view-box {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--border);
  animation: inview-in .28s var(--ease, ease);
}
@keyframes inview-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.py-inview-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 11.5px; color: var(--brand); letter-spacing: .01em; }
.py-inview-pct { color: var(--brand); font-size: 12.5px; }
.progress-track.inview-track { height: 5px; margin: 6px 0 4px; background: color-mix(in srgb, var(--brand) 14%, var(--bg-3)); }
.progress-fill.inview-fill {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand) 45%, transparent);
}
.py-inview-foot { font-size: 11px; color: var(--text-2); }

/* ---- Practice lab: data tables (SQL schema/sample/expected, walkthrough) ---- */
.lab-table-scroll { overflow-x: auto; margin: 8px 0 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.lab-table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-family: var(--mono); }
.lab-table th { text-align: left; background: var(--bg-2); color: var(--text-2); font-weight: 700; padding: 7px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.lab-table td { padding: 6px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; color: var(--text); }
.lab-table tr:last-child td { border-bottom: none; }
.lab-table tbody tr:hover { background: var(--bg-2); }
.lab-null { color: var(--muted); font-style: italic; }
.lab-table-cap { font-size: 12px; font-weight: 700; color: var(--text-2); margin: 12px 0 2px; }
.lab-schema { margin-bottom: 12px; }
.lab-schema-name { font-size: 12.5px; font-weight: 800; color: var(--brand-2); margin-bottom: 3px; }
.lab-step { margin-bottom: 16px; }
.lab-step:last-child { margin-bottom: 0; }
.lab-step-h { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.lab-step-note { font-size: 12.5px; margin-bottom: 6px; }
.when-use.dialect { border-left-color: var(--amber); }

/* ---- Learn curriculum map (landing) ---------------------------------------- */
.learn-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding: 22px 34px 40px; }
.learn-sec { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.learn-sec-h { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; letter-spacing: .2px; }
.learn-topic-list { display: flex; flex-direction: column; gap: 2px; }
.learn-topic { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text-2); font-size: 13.5px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; }
button.learn-topic:hover { background: var(--bg-2); color: var(--text); }
.learn-topic .st { font-size: 13px; }
.learn-topic.soon { color: var(--muted); cursor: default; }
.soon-badge { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: 1px 7px; }

/* narrower brand mark for the DE wordmark */
.brand-mark { letter-spacing: -.5px; }

/* ---- NumPy Practice: runnable "Try it" box under the reference solution ---- */
.prob-try { margin-top: 14px; border-top: 1px dashed var(--border-soft); padding-top: 12px; }
.prob-try-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--brand-2); margin-bottom: 6px; }
.prob-try .pyplay { margin-top: 4px; }

/* ============================================================= */
/* Responsive / touch hardening — 14", 15.6" laptops & iPad 9th gen (Safari) */
/* ============================================================= */

/* Never let the page scroll sideways; wide content scrolls inside its own box. */
html, body { max-width: 100%; }
body { overflow-x: hidden; }

/* Momentum scrolling + contained overflow for every horizontally-scrollable pane
   (code blocks, data tables, modal bodies) so touch-dragging feels native and
   long lines never push the layout wider than the screen. */
.code-body, .code-pre, .lab-table-scroll, .modal-body, .py-rich pre, .why-pre {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  max-width: 100%;
}
.pyplay-code { max-width: 100%; box-sizing: border-box; }

/* Comfortable tap targets on touch devices (Apple HIG ~44px; keep chips >=34). */
@media (pointer: coarse) {
  .chip-btn, .ws-btn, .mode-btn, .status-btn, .app-tab, .ct-btn, .srs-grade, .nav-item {
    min-height: 34px;
  }
  .prob-chip { min-height: 32px; }
}

/* iPad-range: keep the two-workspace switch tidy and prevent header crowding. */
@media (min-width: 768px) and (max-width: 1100px) {
  .ws-switches { flex-wrap: wrap; row-gap: 6px; }
}

/* ============================================================= */
/* M5.1 — cross-stack readiness overview (dashboard modal)       */
/* ============================================================= */
.db-overview { margin-bottom: 8px; }
.db-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--border); }

.xstack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.xstack-card { text-align: left; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 14px 16px; cursor: pointer; color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.xstack-card:hover { border-color: var(--brand); transform: translateY(-2px); background: var(--bg-3); }
.xstack-card[data-stack="python"] { --brand: #4c8dff; }
.xstack-card[data-stack="numpy"]  { --brand: #37b24d; }
.xstack-card[data-stack="pandas"] { --brand: #845ef7; }
.xstack-card[data-stack="spark"]  { --brand: #f76707; }
.xstack-card[data-stack="sql"]    { --brand: #0ca678; }

.xs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.xs-name { font-weight: 800; font-size: 15px; }
.xs-due { font-size: 10.5px; font-weight: 700; color: var(--brand); background: var(--bg-1);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.xs-rings { display: flex; gap: 16px; flex-wrap: wrap; }
.xs-metric { display: flex; align-items: center; gap: 9px; }
.xs-ring { width: 46px; height: 46px; font-size: 12px; }
.xs-ring::after { inset: 5px; }
.xs-metric-k { font-size: 12px; font-weight: 700; }
.xs-metric-sub { font-size: 10.5px; }
.xs-overall { margin-top: 14px; font-size: 12.5px; }
.xs-overall b { color: var(--text); }

@media (pointer: coarse) { .xstack-card { min-height: 96px; } }

/* ============================================================= */
/* M5.2 — ⌘K command palette + guided paths                       */
/* ============================================================= */
body.cmdk-lock { overflow: hidden; }
.cmdk { position: fixed; inset: 0; z-index: 200; background: rgba(4,7,13,.6);
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px;
  opacity: 0; backdrop-filter: blur(0); transition: opacity .16s ease, backdrop-filter .16s ease; }
.cmdk.open { opacity: 1; backdrop-filter: blur(3px); }
.cmdk.hidden { display: none; }
.cmdk-box { width: 100%; max-width: 640px; background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
  transform: translateY(-8px) scale(.99); transition: transform .16s ease; max-height: 70vh; }
.cmdk.open .cmdk-box { transform: none; }
.cmdk-input { border: none; outline: none; background: transparent; color: var(--text);
  font-size: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); font-family: inherit; }
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-results { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
.cmdk-section { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); padding: 10px 12px 6px; }
.cmdk-back { cursor: pointer; color: var(--brand-2); }
.cmdk-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text); }
.cmdk-row.sel { background: var(--bg-3); }
.cmdk-row.done .cmdk-title { color: var(--muted); }
.cmdk-title { font-size: 14px; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; white-space: normal; }
.cmdk-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cmdk-chip { font-size: 10px; font-weight: 800; color: #06111f; background: var(--c); border-radius: 5px; padding: 2px 6px; }
.cmdk-mode { font-size: 10.5px; font-weight: 700; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.cmdk-cat { font-size: 11px; color: var(--muted); }
.cmdk-path-i { flex: 1 1 auto; min-width: 0; }
.cmdk-prog { font-size: 11.5px; font-weight: 800; color: var(--brand-2); flex: 0 0 auto; }
.cmdk-step-n { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--border); font-size: 11px; font-weight: 800; color: var(--text-2); }
.cmdk-row.done .cmdk-step-n { background: var(--brand); color: #06111f; border-color: transparent; }
.cmdk-done-tick { color: var(--brand-2); font-weight: 800; }
.cmdk-none { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 13.5px; }
.cmdk-foot { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted); }
@media (pointer: coarse) { .cmdk-row { min-height: 40px; } }
@media (max-width: 560px) { .cmdk { padding-top: 8vh; } .cmdk-meta .cmdk-cat { display: none; } }

/* ============================================================= */
/* M5.3 — Rosetta cross-stack panel + per-stack quick-reference   */
/* ============================================================= */
.ros { position: fixed; inset: 0; z-index: 200; background: rgba(4,7,13,.6);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 20px 20px;
  opacity: 0; backdrop-filter: blur(0); transition: opacity .16s ease, backdrop-filter .16s ease; }
.ros.open { opacity: 1; backdrop-filter: blur(3px); }
.ros.hidden { display: none; }
.ros-box { width: 100%; max-width: 1240px; max-height: 88vh; background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(-8px) scale(.99); transition: transform .16s ease; }
.ros.open .ros-box { transform: none; }
.ros-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ros-title { font-size: 16px; font-weight: 800; }
.ros-sub { font-weight: 400; color: var(--muted); font-size: 13px; }
.ros-close { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
.ros-close:hover { color: var(--text); background: var(--bg-2); }
.ros-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.ros-hint { color: var(--muted); font-size: 11.5px; font-style: italic; margin-left: auto; }
@media (max-width: 620px) { .ros-hint { display: none; } }
.ros-chip { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; font-weight: 700;
  padding: 5px 13px; border-radius: 999px; cursor: pointer; }
.ros-chip:hover { color: var(--text); }
.ros-chip.active { color: #06111f; background: var(--c, var(--brand)); border-color: transparent; }
.ros-chip-all.active { background: var(--text); }
.ros-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 18px 22px; }
.ros-group { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  margin: 18px 0 8px; }
.ros-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; background: var(--bg-1); }
.ros-card-h { margin-bottom: 10px; }
.ros-task { font-size: 14.5px; font-weight: 700; }
.ros-note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ros-cols { display: grid; gap: 12px; }
.ros-cols-multi { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ros-cols-one { grid-template-columns: 1fr; }
.ros-col { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; background: var(--code-bg); }
.ros-col-h { padding: 7px 12px; border-bottom: 1px solid var(--border-soft); background: var(--bg-2); }
.ros-col-name { font-size: 11px; font-weight: 800; color: var(--c); }
.ros-pre { margin: 0; padding: 14px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 13px; line-height: 1.7; background: var(--code-bg); }
@media (pointer: coarse) { .ros-chip { min-height: 34px; } }
@media (max-width: 620px) { .ros-cols-multi { grid-template-columns: 1fr; } }

/* ---- universal copy button on code blocks (copybtn.js) ---- */
.pre-copy-wrap { position: relative; }
.pre-copy {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  padding: 3px 9px; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 700; line-height: 1.4;
  color: var(--text-2); background: var(--bg-2);
  border: 1px solid var(--border);
  opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.pre-copy-wrap:hover .pre-copy, .pre-copy:focus-visible { opacity: .95; }
.pre-copy:hover { color: var(--text); background: var(--bg-3, var(--bg-2)); }
.pre-copy.ok { opacity: 1; color: #06111f; background: var(--ok, #37b24d); border-color: transparent; }
/* touch devices have no hover — keep it discoverable but faint */
@media (pointer: coarse) { .pre-copy { opacity: .6; min-height: 28px; } }

/* ============================================================= */
/* Toolbar responsiveness — keep every control reachable on iPad  */
/* ============================================================= */
/* iPad landscape & small laptops: icon-only toolbar buttons (labels hide). */
@media (max-width: 1100px) {
  .topbar-right .btx { display: none; }
  .topbar-right { gap: 6px; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topbar-right .ghost-btn { padding: 7px 9px; font-size: 13px; flex: 0 0 auto; }
}
/* iPad portrait / phones: let the bar wrap so the switch row drops below. */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); padding-top: 6px; padding-bottom: 6px; row-gap: 6px; }
  .ws-switches { margin-left: 0; }
  .topbar-right { margin-left: auto; width: 100%; justify-content: flex-start; }
}

/* ============================================================= */
/* M6.2 — accessibility focus ring + first-run onboarding overlay  */
/* ============================================================= */
/* Visible keyboard focus everywhere (mouse users unaffected). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.ws-btn:focus-visible, .mode-btn:focus-visible, .nav-item:focus-visible, .cmdk-row:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 6px;
}

.onb { position: fixed; inset: 0; z-index: 300; background: rgba(4,7,13,.72);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; backdrop-filter: blur(0); transition: opacity .18s ease, backdrop-filter .18s ease; }
.onb.open { opacity: 1; backdrop-filter: blur(4px); }
.onb.hidden { display: none; }
.onb-card { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 26px 22px; transform: translateY(10px) scale(.98); transition: transform .18s ease; }
.onb.open .onb-card { transform: none; }
.onb-mark { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #06111f; font-weight: 800; letter-spacing: -.5px; margin-bottom: 12px; }
.onb-card h2 { font-size: 21px; margin: 0 0 6px; }
.onb-lead { color: var(--text-2); margin: 0 0 14px; }
.onb-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.onb-list li { font-size: 13.5px; color: var(--text-2); line-height: 1.55; padding-left: 2px; }
.onb-list b { color: var(--text); }
.onb-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.onb-btn { padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2);
  color: var(--text); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.onb-btn:hover { border-color: var(--brand); }
.onb-primary { background: var(--brand); color: #06111f; border-color: transparent; }
@media (pointer: coarse) { .onb-btn { min-height: 40px; } }

/* ============================================================= */
/* Tier-1 UX polish — settings menu, resume card, prev/next, sidebar progress */
/* ============================================================= */
/* Settings (⋯) popover */
.menu-wrap { position: relative; display: inline-flex; }
.menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 120; min-width: 214px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.menu-pop.hidden { display: none; }
.menu-item { display: block; width: 100%; text-align: left; background: transparent; border: none;
  color: var(--text); font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.menu-item:hover { background: var(--bg-2); text-decoration: none; }
.menu-item.danger { color: #ff6b6b; }
.menu-sep { height: 1px; background: var(--border); margin: 5px 2px; }
@media (pointer: coarse) { .menu-item { min-height: 40px; } }

/* "Continue where you left off" resume card on Learn landings */
.resume-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-1); border: 1px solid var(--brand); border-radius: var(--radius); padding: 14px 18px;
  margin: 0 34px 6px; box-sizing: border-box; width: calc(100% - 68px);
  box-shadow: 0 0 0 3px var(--brand-glow); transition: transform var(--dur-fast) var(--ease); }
.resume-card:hover { transform: translateY(-2px); }
.resume-ic { font-size: 22px; flex: 0 0 auto; }
.resume-tx { flex: 1 1 auto; min-width: 0; }
.resume-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--brand-2); }
.resume-v { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 2px; }
.resume-go { flex: 0 0 auto; color: var(--brand-2); font-weight: 700; font-size: 13px; }
@media (max-width: 900px) { .resume-card { margin: 0 14px 6px; width: calc(100% - 28px); } }

/* Practice prev / next stepper */
.prob-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; }
.prob-nav-btn { flex: 1 1 0; background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 14px; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.prob-nav-btn:hover:not(:disabled) { border-color: var(--brand); }
.prob-nav-btn:disabled { opacity: .4; cursor: default; }
.prob-nav-btn.next { text-align: right; }
.prob-nav-k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.prob-nav-t { display: block; font-weight: 700; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Slim per-category progress bar in the sidebar */
.cat-prog { height: 3px; border-radius: 2px; background: var(--bg-3); margin: 0 12px 6px; overflow: hidden; }
.cat-prog > i { display: block; height: 100%; background: var(--brand); border-radius: 2px; transition: width var(--dur) var(--ease); }

/* ============================================================= */
/* Buttery animations — hamburger morph + expand/collapse caret   */
/* ============================================================= */
/* 3-bar hamburger that morphs to an X when the mobile drawer is open */
.ham { display: inline-block; position: relative; width: 18px; height: 14px; vertical-align: middle; }
.ham i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur) var(--ease-cat), opacity var(--dur-fast) var(--ease), top var(--dur) var(--ease-cat); }
.ham i:nth-child(1) { top: 0; }
.ham i:nth-child(2) { top: 6px; }
.ham i:nth-child(3) { top: 12px; }
body.sidebar-open .ham i:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.sidebar-open .ham i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
body.sidebar-open .ham i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
#menuBtn:active .ham { transform: scale(.9); transition: transform var(--dur-fast) var(--ease); }

/* Expand/collapse-all: rotate a single caret instead of swapping the glyph */
#toggleAll { transition: transform var(--dur) var(--ease-cat), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
#toggleAll.collapsed { transform: rotate(-90deg); }

/* GPU hint so category height animations stay smooth on long sidebars */
.cat-list-outer { will-change: height; }

/* ============================================================= */
/* Motion & transitions + polish details                          */
/* ============================================================= */
/* Top navigation progress bar (flashes on route change) */
.nav-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 400;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: 0 0 8px var(--brand-glow);
  opacity: 0; transition: width .18s var(--ease), opacity .24s var(--ease); pointer-events: none; }
.nav-progress.run { opacity: 1; }
.nav-progress.done { opacity: 0; }

/* Reading-progress bar for long Learn topics (sits just under the top bar) */
.read-progress { position: fixed; top: var(--topbar-h); left: 0; height: 2px; width: 0; z-index: 45;
  background: var(--brand-2); opacity: .9; transition: width .08s linear; pointer-events: none; }

/* Route-change content fade/rise on the main pane */
@keyframes mainEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.main.main-enter { animation: mainEnter 170ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .main.main-enter { animation: none; } .nav-progress { transition: opacity .1s; } }

/* Active sidebar item — colored left accent bar */
.nav-item { position: relative; }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand); box-shadow: 0 0 8px var(--brand-glow); }

/* Refined empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 60vh; color: var(--muted); gap: 6px; padding: 24px; }
.empty-ic { font-size: 40px; opacity: .85; margin-bottom: 4px; }
.empty-h { font-size: 17px; font-weight: 700; color: var(--text-2); }
.empty-sub { font-size: 13.5px; max-width: 340px; line-height: 1.6; }
.empty-sub kbd { font: inherit; font-size: 12px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px; }
.nav-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 22px 14px; }
.nav-empty::before { content: "🔍"; display: block; font-size: 22px; margin-bottom: 6px; opacity: .8; }

/* ============================================================= */
/* Chip-based sidebar filters (LABFILTERS) — single or multiple  */
/* ============================================================= */
.filters { max-height: 480px; }                 /* room for the chip groups */
.filters:not(.collapsed) { overflow-y: auto; overscroll-behavior: contain; }

.flt-mode { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.flt-mode-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 800; }
.flt-mode-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.flt-mode-btn { background: transparent; border: none; color: var(--muted); font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.flt-mode-btn:hover { color: var(--text); }
.flt-mode-btn.active { background: var(--brand); color: #06111f; }
.flt-clear { margin-left: auto; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 8px; cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.flt-clear:hover { color: var(--red); border-color: var(--red); }

.flt-group { flex: 1 1 100%; }
.flt-group-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 800; margin: 8px 0 5px; }
.flt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.flt-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.flt-chip:hover { color: var(--text); border-color: var(--brand); transform: translateY(-1px); }
.flt-chip.on { background: var(--brand-glow); border-color: var(--brand); color: var(--text); }
.flt-chip-n { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.flt-chip.on .flt-chip-n { color: var(--brand-2); }
/* difficulty chips keep their semantic tint on the label */
.flt-chip.d-easy .flt-chip-t { color: var(--easy); }
.flt-chip.d-medium .flt-chip-t { color: var(--medium); }
.flt-chip.d-hard .flt-chip-t { color: var(--hard); }
@media (pointer: coarse) { .flt-chip, .flt-mode-btn, .flt-clear { min-height: 32px; } }

/* ============================================================= */
/* PySpark cheatsheet panel (.cht-*) — reuses the .ros modal shell */
/* ============================================================= */
.cht-search-row { padding: 12px 18px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cht-search { flex: 1 1 240px; min-width: 200px; box-sizing: border-box; padding: 10px 14px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-family: inherit; }
.cht-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.cht-search::placeholder { color: var(--muted); }

/* sort toggle: Most used ↔ By category */
.cht-sort { display: inline-flex; gap: 3px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.cht-sort-btn { background: transparent; border: none; color: var(--muted); font-size: 12px; font-weight: 700; font-family: inherit;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.cht-sort-btn:hover { color: var(--text); }
.cht-sort-btn.active { color: #06111f; background: var(--brand); }
@media (pointer: coarse) { .cht-sort-btn { min-height: 32px; } }

/* essential (top-tier) badge + category pill in the flat "most used" view */
.cht-head-l { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.cht-head-r { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; }
.cht-star { color: var(--brand-2); font-size: 13px; line-height: 1; flex: none; align-self: center; }
.cht-card.cht-essential { box-shadow: inset 3px 0 0 var(--brand-2); }
.cht-group-pill { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

.cht-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 12px;
  background: var(--bg-1); box-shadow: inset 3px 0 0 var(--stripe-code); }
.cht-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cht-sig { font-family: var(--mono); font-size: 13.5px; font-weight: 700; color: var(--brand-2);
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; word-break: break-word; }
.cht-ret { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.cht-sum { font-size: 13.5px; color: var(--text-2); margin-bottom: 10px; line-height: 1.55; }
.cht-sum code { font-size: .9em; }

.cht-params-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 10px; }
.cht-params { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.cht-params th { text-align: left; background: var(--bg-2); color: var(--text-2); font-weight: 700; padding: 7px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.cht-params td { padding: 7px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; }
.cht-params tr:last-child td { border-bottom: none; }
.cht-p-name { font-family: var(--mono); font-weight: 700; color: var(--brand-2); white-space: nowrap; }
.cht-p-type { font-family: var(--mono); color: var(--muted); white-space: nowrap; }
.cht-p-desc { color: var(--text-2); line-height: 1.5; min-width: 220px; }
.cht-p-desc code { font-size: .88em; }

.cht-ex-wrap { margin-top: 4px; }
.cht-example { margin: 0; }
.cht-out { font-family: var(--mono); font-size: 12px; color: var(--green); margin-top: 4px; padding-left: 2px; }
.cht-notes { margin-top: 10px; font-size: 12.5px; color: var(--text-2); background: var(--bg-2);
  border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; padding: 8px 12px; line-height: 1.55; }
.cht-notes code { font-size: .88em; }