/* ============================================================
   PDSO-style skin (locked light theme).
   Recreates the Practical DevSecOps lab UI layout on top of
   mkdocs-material:

     [ top bar: brand · (spacer) · Connected · timer · avatar  ]
     [ left sidebar | middle content card | right terminal pane ]
     [                                  ] right floating tools  ]
   ============================================================ */

/* Layout variables live at :root ONLY — never on body's color-scheme selectors —
   so JS overrides on documentElement actually win. Body-level declarations
   (e.g., on [data-md-color-scheme]) would shadow the html-level value for
   every descendant and break drag-to-resize entirely. */
:root {
  --pdso-bg: #f1f2f7;
  --pdso-sidebar-bg: #f7f8fb;
  --pdso-card: #ffffff;
  --pdso-card-soft: #fafbff;
  --pdso-border: #e3e4ee;
  --pdso-border-strong: #c9cbd9;

  --pdso-text: #1a1d33;
  --pdso-text-strong: #0d0f1f;
  --pdso-muted: #8b8fa3;
  --pdso-muted-2: #b0b3c4;

  --pdso-accent: #5b46f5;
  --pdso-accent-strong: #4731e8;
  --pdso-accent-soft: #efeefe;
  --pdso-accent-tint: #f6f5ff;

  --pdso-connected: #18a05f;
  --pdso-connected-bg: #e3f7ec;

  --pdso-terminal-bg: #1d1f3a;
  --pdso-terminal-header: #14152c;
  --pdso-terminal-text: #e8e8f2;
  --pdso-terminal-yellow: #ffd866;
  --pdso-terminal-green: #a9dc76;
  --pdso-terminal-comment: #7b7ea0;
  --pdso-terminal-border: #00000033;

  --pdso-sidebar-w: 280px;
  --pdso-term-w: 40vw;
  --pdso-term-min: 380px;
  --pdso-toolstrip-w: 44px;
  --pdso-topbar-h: 64px;
}

/* Force light EVERYTHING even if mkdocs / OS sets a dark scheme */
[data-md-color-scheme="slate"] {
  color-scheme: light;
}
html, body { background: var(--pdso-bg) !important; color: var(--pdso-text) !important; }

/* ============================================================
   Reserve right pane (terminal) + right tool strip space.
   ============================================================ */

.md-header,
.md-container,
.md-tabs,
.md-footer,
.md-content,
.md-main,
.md-main__inner {
  background: var(--pdso-bg) !important;
}

/* Top bar spans full width so the status row sits at the screen's far right. */
.md-header, .md-tabs {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0;
  right: 0;
}
/* The body container + footer leave room for the terminal pane on the right. */
.md-container, .md-footer {
  width: calc(100vw - var(--pdso-term-w)) !important;
  max-width: calc(100vw - var(--pdso-term-w)) !important;
  left: 0;
  right: auto;
}

@media (max-width: 1100px) {
  .md-header, .md-tabs { width: 100vw !important; max-width: 100vw !important; }
  .md-container, .md-footer { width: 100vw !important; max-width: 100vw !important; }
  .pdso-terminal, .pdso-toolstrip, .pdso-splitter { display: none !important; }
}

/* ============================================================
   Top bar
   ============================================================ */

.md-header {
  background: var(--pdso-card) !important;
  color: var(--pdso-text) !important;
  border-bottom: 1px solid var(--pdso-border-strong) !important;
  box-shadow: 0 1px 2px rgba(20, 22, 50, 0.04) !important;
  height: var(--pdso-topbar-h);
}
.md-header__inner {
  height: var(--pdso-topbar-h);
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.md-header__button { color: var(--pdso-text); }
.md-header__title {
  color: var(--pdso-text) !important;
  font-weight: 600;
  margin-left: 4px;
  max-width: none;
  flex: 0 1 auto;
}
.md-header__title .md-header__topic { color: var(--pdso-text-strong); }
.md-header__topic .md-ellipsis { font-size: 16px; }

/* Hide the search bar in the header — PDSO doesn't have one there */
.md-header__option,
.md-header [data-md-component="search"],
.md-search,
.md-search-overlay { display: none !important; }

/* Status row injected by JS at far right */
.pdso-status-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.pdso-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--pdso-connected-bg);
  color: var(--pdso-connected);
  border: 1px solid #b8ebcf;
}
.pdso-badge::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pdso-connected);
}
.pdso-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--pdso-border-strong);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--pdso-text);
  background: var(--pdso-card);
  font-weight: 500;
}
.pdso-timer::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8fa3' stroke-width='2'><circle cx='12' cy='13' r='8'/><path d='M12 9v4l2 2'/><path d='M9 2h6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.pdso-theme-toggle, .pdso-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  color: var(--pdso-muted);
}
.pdso-theme-toggle:hover { background: var(--pdso-accent-tint); color: var(--pdso-accent); }
.pdso-avatar {
  background: linear-gradient(135deg, #ff6b6b, #845cf0);
  color: white;
  font-weight: 700;
  font-size: 13px;
  border-radius: 50%;
}

/* ============================================================
   Left sidebar
   ============================================================ */

.md-sidebar--primary {
  background: var(--pdso-sidebar-bg) !important;
  border-right: 1px solid var(--pdso-border-strong);
  width: var(--pdso-sidebar-w) !important;
  top: var(--pdso-topbar-h) !important;
  padding: 0 !important;
}
.md-sidebar__scrollwrap { background: var(--pdso-sidebar-bg); }
.md-sidebar__inner { padding: 0 !important; }

/* Sidebar header chrome row (back arrow + Course + icons) — injected by JS */
/* Sticky sidebar header — stays visible while the chapter list scrolls */
.pdso-sidebar-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--pdso-sidebar-bg);
  border-bottom: 1px solid var(--pdso-border);
}

.pdso-sidebar-chrome {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  gap: 8px;
  background: transparent;
}
.pdso-sidebar-chrome__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pdso-accent);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.pdso-sidebar-chrome__back::before {
  content: "‹";
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}
.pdso-sidebar-chrome__icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.pdso-icon-btn {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--pdso-muted);
  border: 1px solid transparent;
  font-size: 13px;
  cursor: pointer;
}
.pdso-icon-btn:hover { background: var(--pdso-accent-tint); color: var(--pdso-accent); }
.pdso-icon-btn--search { border: 1px solid var(--pdso-border-strong); }
.pdso-icon-btn--search::after {
  content: "⌘/";
  font-size: 10px;
  color: var(--pdso-muted-2);
  margin-left: 4px;
}

/* Course title + progress block */
.pdso-course-title {
  padding: 16px 14px 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--pdso-text-strong);
  line-height: 1.3;
}
.pdso-progress {
  margin: 0 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pdso-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--pdso-accent-soft);
  overflow: hidden;
}
.pdso-progress-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6ce0c4 0%, #5b46f5 100%);
  border-radius: 999px;
}
.pdso-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--pdso-muted);
  min-width: 32px;
  text-align: right;
}

/* mkdocs nav — PDSO-style flat chapter list */
.md-nav { font-size: 14px; }
.md-nav__title { display: none !important; }
.md-nav > .md-nav__list { padding: 0; }

/* Simple top-level items (Home, Curriculum overview, Launch checklist, etc.)
   are hidden from the chapter list — PDSO only shows chapters. */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="simple"] {
  display: none !important;
}

/* Chapter rows: flat list items with bottom-border separators.
   At rest: no card border, no background — just a row.
   On hover: subtle accent-tinted background.
   When active (current page belongs to this chapter): elevated white card
   with indigo border. */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"] {
  margin: 0;
  padding: 0 6px;
  border-bottom: 1px solid var(--pdso-border);
  list-style: none;
  background: transparent;
}
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"]:last-of-type {
  border-bottom: none;
}
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"] > .md-nav__link,
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"] > label.md-nav__link {
  padding: 10px 12px 10px 46px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--pdso-text);
  font-size: 14px;
  font-weight: 600;
  position: relative;
  display: block;
  line-height: 1.3;
  cursor: pointer;
  margin: 4px 0;
  min-height: 0;
}
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"] > .md-nav__link:hover,
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"] > label.md-nav__link:hover {
  background: var(--pdso-accent-tint);
}

/* Completion circle on the left of every chapter card — compact 22px */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"] > .md-nav__link::before,
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"] > label.md-nav__link::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--pdso-border-strong);
  background: transparent;
  box-sizing: border-box;
}
/* Status: complete — green filled circle with white checkmark */
.md-nav__item[data-pdso-status="complete"] > .md-nav__link::before,
.md-nav__item[data-pdso-status="complete"] > label.md-nav__link::before {
  background: var(--pdso-connected);
  border-color: var(--pdso-connected);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,12 10,17 19,8'/></svg>");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
/* Status: in-progress — indigo half-circle spinner */
.md-nav__item[data-pdso-status="in-progress"] > .md-nav__link::before,
.md-nav__item[data-pdso-status="in-progress"] > label.md-nav__link::before {
  background: conic-gradient(var(--pdso-accent) 0% 50%, transparent 50% 100%);
  border-color: var(--pdso-accent);
}
/* Active chapter card — indigo bordered box around the row */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"].md-nav__item--active > .md-nav__link,
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"].md-nav__item--active > label.md-nav__link {
  background: var(--pdso-card) !important;
  border-color: var(--pdso-accent) !important;
  border-width: 1.5px !important;
  color: var(--pdso-text-strong) !important;
}
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"].md-nav__item--active > .md-nav__link::before,
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"].md-nav__item--active > label.md-nav__link::before {
  border-color: var(--pdso-accent) !important;
}

/* Two-line chapter card (eyebrow + title) — markup added by JS */
.pdso-chapter-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pdso-accent);
  margin-bottom: 1px;
  opacity: 0.85;
}
.pdso-chapter-title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pdso-text-strong);
  line-height: 1.25;
}

/* Expand chevron at the right of each chapter card */
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"] > .md-nav__link::after,
.md-sidebar--primary .md-nav > .md-nav__list > .md-nav__item[data-pdso-kind="chapter"] > label.md-nav__link::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(90deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8fa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9,6 15,12 9,18'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.15s ease;
}
.md-sidebar--primary .md-nav__item--nested .md-nav__toggle:checked + .md-nav__link::after,
.md-sidebar--primary .md-nav__item--nested .md-nav__toggle:checked + label.md-nav__link::after,
.md-sidebar--primary .md-nav__item--nested[data-pdso-expanded="true"] > .md-nav__link::after,
.md-sidebar--primary .md-nav__item--nested[data-pdso-expanded="true"] > label.md-nav__link::after {
  transform: translateY(-50%) rotate(-90deg);
}
/* Hide the default mkdocs expand icon since we render our own */
.md-sidebar--primary .md-nav__icon { display: none !important; }

/* Hide ONLY the per-page TOC — i.e., a .md-nav nested 3+ levels deep. */
.md-sidebar--primary .md-nav .md-nav .md-nav {
  display: none !important;
}
.md-sidebar--primary nav.md-nav[data-md-level="3"],
.md-sidebar--primary nav.md-nav[data-md-level="4"],
.md-sidebar--primary nav.md-nav[data-md-level="5"] {
  display: none !important;
}

/* The active lesson item gets rendered as BOTH a <label> (for toggling the
   now-hidden TOC) AND an <a> (the real link). Hide the redundant <label>
   so only the <a> shows — otherwise we get a duplicate row. */
.md-sidebar--primary .md-nav .md-nav .md-nav__item > label.md-nav__link {
  display: none !important;
}

/* Lessons inside a chapter (level-2 nav items) — minimal list rows */
.md-nav .md-nav .md-nav__list {
  padding: 4px 0 8px 0;
  margin: 0;
  background: transparent;
}
.md-nav .md-nav .md-nav__item {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  list-style: none;
}
.md-nav .md-nav .md-nav__link {
  padding: 10px 12px 10px 44px;
  border-radius: 0;
  font-size: 13px;
  color: var(--pdso-text);
  font-weight: 500;
  line-height: 1.35;
  position: relative;
  display: block;
  border: none;
  background: transparent;
}
.md-nav .md-nav .md-nav__link:hover {
  background: var(--pdso-accent-tint);
  color: var(--pdso-accent-strong);
}
.md-nav .md-nav .md-nav__link--active {
  color: var(--pdso-accent-strong) !important;
  background: var(--pdso-accent-tint) !important;
  font-weight: 600;
}

/* Lesson type icon — left edge of row, top-aligned with the tag pill */
.md-nav .md-nav .md-nav__link[data-pdso-type]::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 12px;
  width: 18px; height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.75;
}
.md-nav .md-nav .md-nav__link[data-pdso-type="theory"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b46f5'><polygon points='6,4 20,12 6,20'/></svg>");
}
.md-nav .md-nav .md-nav__link[data-pdso-type="lab"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b46f5' stroke-width='1.8' stroke-linecap='round'><path d='M9 3v6L5 19a2 2 0 002 2h10a2 2 0 002-2L15 9V3'/><line x1='8' y1='3' x2='16' y2='3'/></svg>");
}
.md-nav .md-nav .md-nav__link[data-pdso-type="quiz"]::before,
.md-nav .md-nav .md-nav__link[data-pdso-type="summary"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b46f5' stroke-width='2'><line x1='6' y1='7' x2='18' y2='7'/><line x1='6' y1='12' x2='18' y2='12'/><line x1='6' y1='17' x2='13' y2='17'/></svg>");
}

/* Mandatory / Optional pill above the lesson title */
.pdso-lesson-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 500;
  background: var(--pdso-card);
  margin-bottom: 4px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.pdso-lesson-tag::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  box-sizing: border-box;
}
.pdso-lesson-tag[data-tag="mandatory"] {
  color: #4c5fff;
  border-color: #c8cffd;
}
.pdso-lesson-tag[data-tag="optional"] {
  color: var(--pdso-muted);
  border-color: var(--pdso-border-strong);
}
.pdso-lesson-tag[data-tag="optional"]::before {
  border-style: dashed;
}

.md-nav .md-nav .md-nav__link .pdso-lesson-title {
  display: block;
  font-size: 13px;
  color: inherit;
}

/* ============================================================
   Middle content card
   ============================================================ */

.md-main__inner { margin: 0; padding: 0; }

/* Content card: a fixed-position pane like the terminal, with internal scroll.
   pdso-steps-row stays pinned at the top, pdso-pagination at the bottom; only
   the body content between them scrolls. */
.md-content {
  position: fixed !important;
  top: calc(var(--pdso-topbar-h) + 14px);
  left: calc(var(--pdso-sidebar-w) + 1px);
  right: calc(var(--pdso-term-w) + 14px);
  bottom: 14px;
  margin: 0 !important;
  background: var(--pdso-card) !important;
  border-radius: 14px;
  padding: 0 !important;
  border: 1px solid var(--pdso-border-strong);
  box-shadow: 0 2px 6px rgba(20, 22, 50, 0.05);
  max-width: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 3;
}
.md-content__inner {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 40px 32px !important;
  margin: 0 !important;
  scrollbar-width: thin;
}
.md-content__inner::before,
.md-content__inner::after { display: none; }
.md-content__inner::-webkit-scrollbar { width: 8px; }
.md-content__inner::-webkit-scrollbar-thumb { background: var(--pdso-border-strong); border-radius: 4px; }
.md-content__inner::-webkit-scrollbar-thumb:hover { background: var(--pdso-muted); }
.md-typeset { color: var(--pdso-text); font-size: 15px; line-height: 1.65; }
.md-typeset h1 {
  font-weight: 700;
  font-size: 2rem;
  color: var(--pdso-text-strong);
  letter-spacing: -0.02em;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}
.md-typeset h2 {
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--pdso-text-strong);
  margin-top: 2rem;
  letter-spacing: -0.01em;
}
.md-typeset h3 { font-weight: 600; font-size: 1.15rem; color: var(--pdso-text-strong); }
.md-typeset a { color: var(--pdso-accent); }
.md-typeset code {
  background: var(--pdso-accent-tint);
  color: var(--pdso-accent-strong);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
.md-typeset pre, .md-typeset .highlight {
  background: #14152c !important;
  color: var(--pdso-terminal-text);
  border-radius: 8px;
}
.md-typeset pre code, .md-typeset .highlight code { color: inherit; background: transparent; }

/* Steps row at the top of the content card. flex-shrink: 0 keeps it pinned
   while the inner scrolls below. */
.pdso-steps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--pdso-border);
  background: var(--pdso-card);
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.pdso-steps-row__left,
.pdso-steps-row__right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pdso-steps-icon-btn {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--pdso-muted);
  cursor: pointer;
}
.pdso-steps-icon-btn:hover { background: var(--pdso-accent-tint); color: var(--pdso-accent); }
.pdso-steps-counter {
  font-size: 13px;
  font-weight: 500;
  color: var(--pdso-muted);
}
.pdso-steps-progress {
  flex: 1;
  margin: 0 24px;
  height: 2px;
  background: var(--pdso-border);
  border-radius: 2px;
  overflow: hidden;
}
.pdso-steps-progress > span {
  display: block;
  height: 100%;
  background: var(--pdso-accent);
  border-radius: 2px;
}

/* Original mkdocs footer is hidden — we render our own pagination strip
   inside the content card via JS so it stays pinned at the card's bottom. */
.md-footer { display: none !important; }
.md-footer-meta { display: none !important; }

.pdso-pagination {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--pdso-border);
  background: var(--pdso-card);
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}
/* Hide the lesson-name on Back / Next — we render our own labels via attrs */
.md-footer__title,
.md-footer__direction,
.md-footer__link .md-icon { display: none !important; }

/* ---------- Pagination links (inside .pdso-pagination) ----------
   PREV (Back): quiet text link with a chevron icon — anchored left.
   NEXT (Next): prominent indigo button with white text + chevron — anchored right.
   When only one of the two exists (first/last lesson), the lone button stays
   correctly aligned at its end via margin-left:auto on Next. */

.pdso-pagination .md-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  transition: background-color 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.05s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Back — secondary button (white card with indigo border + indigo text) */
.pdso-pagination .md-footer__link--prev {
  padding: 10px 20px 10px 18px;
  color: var(--pdso-accent);
  background: var(--pdso-card);
  border: 1px solid #b9b0f5;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(91, 70, 245, 0.06);
}
.pdso-pagination .md-footer__link--prev:hover {
  background: var(--pdso-accent-tint);
  border-color: var(--pdso-accent);
  color: var(--pdso-accent-strong);
  box-shadow: 0 3px 8px rgba(91, 70, 245, 0.15);
}
.pdso-pagination .md-footer__link--prev:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(91, 70, 245, 0.06);
}
.pdso-pagination .md-footer__link--prev::before {
  content: "";
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b46f5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='15,18 9,12 15,6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.15s ease;
}
.pdso-pagination .md-footer__link--prev:hover::before {
  transform: translateX(-2px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234731e8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='15,18 9,12 15,6'/></svg>");
}
.pdso-pagination .md-footer__link--prev::after {
  content: attr(data-pdso-label);
}

/* Next — soft purple at the top, fades to deep purple as the learner scrolls.
   Color is set inline by JS based on scroll progress (0..1) so the gradient
   between #c7bff7 (light) and var(--pdso-accent) (deep) is continuous. */
.pdso-pagination .md-footer__link--next {
  margin-left: auto;
  padding: 10px 18px 10px 20px;
  background: #c7bff7;   /* fallback before JS computes scroll progress */
  color: #ffffff;
  border: 1px solid #b9b0f5;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(91, 70, 245, 0.10);
  transition: box-shadow 0.18s ease, transform 0.05s ease;
}
.pdso-pagination .md-footer__link--next:hover {
  box-shadow: 0 4px 12px rgba(91, 70, 245, 0.25);
}
.pdso-pagination .md-footer__link--next:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(91, 70, 245, 0.18);
}
.pdso-pagination .md-footer__link--next::before {
  content: attr(data-pdso-label);
}
.pdso-pagination .md-footer__link--next::after {
  content: "";
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9,6 15,12 9,18'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.15s ease;
}
.pdso-pagination .md-footer__link--next:hover::after { transform: translateX(2px); }

/* Disabled state — when there's no prev or no next page (first/last lesson) */
.pdso-pagination .md-footer__link[aria-disabled="true"],
.pdso-pagination .md-footer__link:not([href]) {
  opacity: 0.45;
  pointer-events: none;
}

/* ============================================================
   Right pane (terminal placeholder)
   ============================================================ */

/* Terminal pane: floats with same 14px top/bottom/right margins as the
   content card, leaving a 14px white gap between them. Rounded corners +
   matching shape so the two panes look symmetrical. */
.pdso-terminal {
  position: fixed;
  top: calc(var(--pdso-topbar-h) + 14px);
  right: 14px;
  bottom: 14px;
  width: calc(var(--pdso-term-w) - 14px);
  background: var(--pdso-terminal-bg);
  color: var(--pdso-terminal-text);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 13px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--pdso-border-strong);
  box-shadow: 0 2px 6px rgba(20, 22, 50, 0.05);
  overflow: hidden;
}

/* Embedded Coder terminal iframe. Fills the panel below the tab strip. */
.pdso-terminal__iframe {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  display: block;
  background: var(--pdso-terminal-bg);
}
.pdso-terminal__rhs a {
  color: inherit;
  text-decoration: none;
}
.pdso-terminal__tabs {
  height: 48px;
  background: var(--pdso-terminal-header);
  border-bottom: 1px solid var(--pdso-terminal-border);
  display: flex;
  align-items: center;
  padding: 0 12px 0 16px;
  gap: 6px;
  position: relative;
}
.pdso-terminal__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 7px;
  background: var(--pdso-terminal-bg);
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  color: var(--pdso-terminal-text);
  border-bottom: 2px solid var(--pdso-accent);
  margin-top: 6px;
}
.pdso-terminal__tab::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a3c0' stroke-width='1.5'><rect x='3' y='4' width='18' height='16' rx='2'/><polyline points='7,9 10,12 7,15'/><line x1='13' y1='16' x2='17' y2='16'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.pdso-terminal__plus {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pdso-terminal-text);
  opacity: 0.6;
  cursor: not-allowed;
  font-size: 16px;
}
.pdso-terminal__rhs {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--pdso-terminal-text);
  opacity: 0.7;
}
.pdso-terminal__rhs > span {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
}
.pdso-terminal__rhs > span:hover { background: #ffffff14; }
.pdso-terminal__body {
  flex: 1;
  padding: 18px 22px;
  overflow-y: auto;
  line-height: 1.7;
}
.pdso-terminal__body .yellow { color: var(--pdso-terminal-yellow); }
.pdso-terminal__body .green  { color: var(--pdso-terminal-green); }
.pdso-terminal__body .muted  { color: var(--pdso-terminal-comment); }
.pdso-terminal__cursor::after {
  content: "▎";
  color: var(--pdso-terminal-text);
  animation: pdso-blink 1.1s steps(1, end) infinite;
  margin-left: 2px;
}
@keyframes pdso-blink { 50% { opacity: 0; } }

/* ============================================================
   Draggable vertical splitter between content and terminal
   ============================================================ */

/* Splitter sits centered in the 14px white gap between content and terminal.
   Near-invisible at rest (preserves the clean white gap look); the cursor
   change is the main affordance on hover, with the line + grip pill fading
   in only when the user is actually targeting it. */
.pdso-splitter {
  position: fixed;
  top: calc(var(--pdso-topbar-h) + 14px);
  height: calc(100vh - var(--pdso-topbar-h) - 28px);
  right: var(--pdso-term-w);
  width: 14px;
  cursor: col-resize;
  z-index: 9999;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  pointer-events: none;
}
.pdso-splitter * { pointer-events: none !important; }
.pdso-splitter::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: var(--pdso-accent);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.18s ease, width 0.18s ease;
}
.pdso-splitter.is-hover::before,
.pdso-splitter.is-dragging::before {
  opacity: 0.5;
  width: 2px;
}
.pdso-splitter.is-dragging::before {
  opacity: 0.9;
  width: 3px;
}
.pdso-splitter__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 6px;
  height: 44px;
  background: var(--pdso-accent);
  border: 2px solid var(--pdso-card);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(91, 70, 245, 0.25);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.pdso-splitter.is-hover .pdso-splitter__grip,
.pdso-splitter.is-dragging .pdso-splitter__grip {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
body.is-resizing,
body.is-resizing * {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: col-resize !important;
}
body.is-resizing iframe { pointer-events: none; }

/* ============================================================
   Right-edge floating tool strip (decorative, mimics PDSO)
   ============================================================ */

.pdso-toolstrip {
  position: fixed;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  padding: 8px 4px;
  background: var(--pdso-card);
  border: 1px solid var(--pdso-border-strong);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(20, 22, 50, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 7;
}
.pdso-toolstrip__btn {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--pdso-accent);
  cursor: pointer;
  background: transparent;
}
.pdso-toolstrip__btn:hover { background: var(--pdso-accent-tint); }
.pdso-toolstrip__chevron {
  font-size: 14px;
  color: var(--pdso-muted);
  margin-top: 4px;
  text-align: center;
}

/* Chat-help bubble bottom-right (PDSO has one) */
.pdso-chat-bubble {
  position: fixed;
  right: 64px;
  bottom: 28px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--pdso-accent);
  box-shadow: 0 4px 16px rgba(91, 70, 245, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  cursor: pointer;
}
.pdso-chat-bubble::after {
  content: "";
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ============================================================
   Misc cleanup
   ============================================================ */

.md-sidebar--secondary { display: none !important; } /* TOC right rail */
.md-nav__source { display: none !important; }
.md-search-result { display: none; }
.md-tabs { display: none !important; }

/* Hide breadcrumbs (mkdocs-material navigation.path renders these) and the
   inline action button — we use our own steps row at the top of the card. */
.md-content__button { display: none !important; }
.md-path,
.md-content__path,
nav.md-path { display: none !important; }