/* ==========================================================================
   playbook-ui-fit.css — the joins.

   playbook-ui.css is lifted verbatim from the built Playbook and must not be
   hand-edited (re-run tools/extract_playbook_ui.py). This file is the small,
   hand-written layer that fits that interface to the master: a few elements
   the single-page build never needed (it navigated by script, so it had no
   links to style, no lesson pager and no per-Playbook tool list), plus the
   master's own components — the player, quiz, checklist, Mentor — sitting
   inside a .pbx panel.

   It uses the Playbook's own tokens, so it inherits both themes for free.
   Keep it short: anything that grows here probably belongs in the extractor.
   ========================================================================== */

/* The build kept every module in the DOM at once and revealed one by script,
   so .module-section.active was set inline and never needed a rule. The master
   serves one module per URL, so it needs the rule. */
.pbx .module-section.active { display: block; }

/* Nine modules read better as a grid than as a horizontal rail with a
   scrollbar — the rail is right for "continue watching", which is short. */
.pbx .mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.pbx .mod-grid .cw-card { width: auto; min-width: 0; }

/* The build's hero CTAs were <button>s driven by script. Ours are real links,
   because they navigate. */
.pbx .hero-actions a { text-decoration: none; }
.pbx .hero-btn-primary,
.pbx .hero-btn-ghost { cursor: pointer; text-decoration: none; }

/* module kicker + subtitle in the header */
.pbx .mod-kicker {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange-dark);
}
.pbx .mod-sub {
  margin: 6px 0 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
}

/* the Playbook's own tools, listed in the rail */
.pbx .nav-section-label {
  margin: 14px 12px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.pbx .nav-tool-btn .nav-group-icon { font-size: 14px; }

/* the overview film on the Playbook dashboard */
.pbx .hero-film {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background: #000;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 255, 255, .12);
}
.pbx .hero-film-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .68);
}

/* Rate This Module */
.pbx .mod-rate { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pbx .mod-rate button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 3px;
  font-size: 22px;
  line-height: 1;
  color: var(--border);
  transition: color var(--pbt) var(--ease-out), transform var(--pbt) var(--ease-out);
}
.pbx .mod-rate button:hover { transform: scale(1.14); }
.pbx .mod-rate button.on { color: #f59e0b; }
.pbx .mod-rate-note {
  margin-left: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* previous / next lesson. .hero-btn-ghost is white-on-transparent by design —
   it belongs on the dark hero, not on the light module body — so the pager
   gets its own surface treatment. */
.pbx .mod-pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light, var(--border));
}
.pbx .mod-pager .hero-btn-ghost {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}
.pbx .mod-pager .hero-btn-ghost:hover {
  background: var(--surface);
  border-color: var(--orange);
  color: var(--orange-dark);
}

/* full-width sections below the film read better with a little room */
.pbx .module-content .msec:last-child { margin-bottom: 0; }

/* the master's components inside a Playbook panel or section: let them keep
   their own look, but stop them inheriting the panel's small type */
.pbx .hero-panel-body .lesson-body,
.pbx .hero-panel-body .mentor,
.pbx .msec-inner .lesson-body,
.pbx .msec-inner .mentor,
.pbx .msec-inner #quizBox { font-size: .9375rem; }
.pbx .msec-inner .lesson-body { color: var(--text-2); line-height: 1.75; }
.pbx .msec-inner .lesson-body h2,
.pbx .msec-inner .lesson-body h3,
.pbx .msec-inner .lesson-body h4 { color: var(--text); }
.pbx .hero-panel-body > .paywall { margin: 0; }

/* the film column must be allowed to shrink inside the grid or a wide player
   pushes the whole layout sideways */
.pbx .mod-hero .mod-video { min-width: 0; }
.pbx .mod-hero .mod-video .player { width: 100%; }

/* the side column is a two-up row; with only one panel it should fill it */
.pbx .mod-hero-side.one { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Contrast.

   Brand orange (#ff6b35) is a fine surface for large display type, but white
   text on it measures 2.84:1 — below AA for anything under 24px. The Playbook
   used it that way for its small chips and buttons. Rather than restyle those
   components, the orange is deepened *only where it carries small white text*;
   it stays #ff6b35 everywhere it is decoration, a bar, or a large heading.
   -------------------------------------------------------------------------- */
.pbx { --orange-ink-bg: #c2410c; }   /* white on this measures 5.1:1 */

.pbx .nav-list li.active .nav-num,
.pbx .btn-sc,
.pbx .btn-primary { background: var(--orange-ink-bg); }
.pbx .btn-sc:hover,
.pbx .btn-primary:hover { background: #9a3412; }

/* the inactive chip and the breadcrumb separator were below AA on the rail */
.pbx .nav-list li .nav-num { color: rgba(255, 255, 255, .82); }
.pbx .bc-sep { color: var(--text-muted); }

/* an unrated star is still text; give it a readable neutral */
.pbx .mod-rate button { color: var(--text-muted); }

/* Process-flow step numbers: the platform already darkens .pf-dot for exactly
   this reason, but `.pbx .pf-dot` outranks it, so the same decision is made
   again at the specificity that wins inside the workspace. */
.pbx .pf-dot { background: color-mix(in srgb, var(--pf-accent) 50%, #000); }

/* --------------------------------------------------------------------------
   Brand orange as INK.

   The mirror of the rule above. On the dark rail #ff6b35 reads well, but on
   the Playbook's light surfaces it measures 2.7–3.3:1 as text. So there is a
   second orange — the ink one — that is dark in the light theme and light in
   the dark theme, and every place the Playbook used orange *as text* points at
   it. The backgrounds are untouched, so the interface still reads orange.
   -------------------------------------------------------------------------- */
.pbx {
  --orange-ink: #a34700;
  --green-ink: #15803d;
  --blue-ink: #0369a1;
}
[data-theme="dark"] .pbx {
  --orange-ink: #ff8b5e;
  --green-ink: #4ade80;
  --blue-ink: #7dd3fc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pbx {
    --orange-ink: #ff8b5e;
    --green-ink: #4ade80;
    --blue-ink: #7dd3fc;
  }
}

.pbx .mod-kicker,
.pbx .badge-time,
.pbx .mod-progress-pct,
.pbx .cw-num,
.pbx .pill-sc { color: var(--orange-ink); }
.pbx .pill-sc:hover { color: #fff; }          /* on the solid orange fill */
.pbx .pp-solution .pp-card-label { color: var(--green-ink); }
.pbx .pp-insight .pp-card-label { color: var(--blue-ink); }

/* the header search placeholder sat at 4.27:1 in the light theme */
.pbx .header-kbar span { color: var(--text-2); }

/* the Playbook film's narration picker, on the dashboard hero */
.pbx .hero-film-voice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.pbx .hero-film-voice select {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 8px;
  padding: 4px 8px;
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.pbx .hero-film-voice select option { background: #0b1729; color: #fff; }

/* --------------------------------------------------------------------------
   The module film card.

   The build opened its films in a theatre overlay, which is not part of this
   platform, so tapping the poster reveals the player in place instead. These
   are only the joins: the card itself is the build's own .mvid-poster.has-art.
   -------------------------------------------------------------------------- */
.pbx .mod-video[data-film] { position: relative; }
.pbx .mvid-poster[data-play-film] { width: 100%; display: block; }
.pbx .mvid-stage { border-radius: 18px; overflow: hidden; }
.pbx .mvid-stage .player { width: 100%; border-radius: 18px; }

/* "Tap to Start Learning" — has-art keeps it, so give it a resting place that
   does not collide with the play disc in the bottom-right corner */
.pbx .mvid-poster.has-art .mvid-tap {
  position: absolute;
  left: clamp(18px, 3cqw, 30px);
  right: auto;
  /* the build centres this with translateX(-50%); overriding `left` without
     clearing the transform leaves it half its own width off the card */
  transform: none;
  bottom: clamp(22px, 3.6cqw, 36px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(8, 15, 28, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--font-head);
  font-size: clamp(10px, 1.7cqw, 13px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

/* --------------------------------------------------------------------------
   The curriculum, listed on a light page.

   `.pbx-inline` scopes the Playbook's tokens and its `.msec` sections into a
   platform page without the workspace shell — no fixed rail, no dark ground.

   The lesson rows are new. The build's own lesson list is the sidebar rail,
   which is white-on-navy and would be invisible here, so borrowing it would
   look worse than building a row in the same language. This is that row.
   -------------------------------------------------------------------------- */
/* The build's `body` rule is scoped onto `.pbx`, which is correct when .pbx
   IS the page — the workspace shell is a full-height flex row. Inline on a
   marketing page it is wrong: `display:flex` shrank each section to its
   content width, and `height:100vh; overflow:hidden` clipped the list to one
   viewport. These four are reset, and nothing else. */
.pbx-inline {
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
}
.pbx-inline .msec { margin: 0 0 12px; }
.pbx-inline .msec:last-child { margin-bottom: 0; }
.pbx-inline .msec-head { gap: 12px; }
.pbx-inline .msec-meta {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.pbx .pb-lessons { display: grid; }
.pbx .pb-lesson {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 4px;
  border-top: 1px solid var(--border-light, var(--border));
  color: var(--text);
  text-decoration: none;
  transition: background var(--pbt) var(--ease-out);
}
.pbx .pb-lesson:first-child { border-top: 0; }
.pbx .pb-lesson:hover { background: var(--orange-light); }
.pbx .pb-lesson-num {
  flex: none;
  min-width: 42px;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--orange-ink);
}
.pbx .pb-lesson-title {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.pbx .pb-lesson-min {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.pbx .pb-lesson-tag {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
}
.pbx .pb-lesson-tag.free { background: #dcfce7; color: #166534; }
.pbx .pb-lesson-tag.done { background: #dcfce7; color: #166534; }
.pbx .pb-lesson-tag.lock { background: transparent; padding: 3px 4px; }
.pbx .pb-lesson.is-done .pb-lesson-title { color: var(--text-2); }
.pbx .pb-lesson.is-locked .pb-lesson-title { color: var(--text-2); }

[data-theme="dark"] .pbx .pb-lesson-tag.free,
[data-theme="dark"] .pbx .pb-lesson-tag.done { background: #14532d; color: #86efac; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pbx .pb-lesson-tag.free,
  :root:not([data-theme="light"]) .pbx .pb-lesson-tag.done {
    background: #14532d; color: #86efac;
  }
}

@media (max-width: 600px) {
  .pbx .pb-lesson { flex-wrap: wrap; gap: 8px 12px; }
  .pbx .pb-lesson-title { flex-basis: 100%; order: 3; }
  .pbx-inline .msec-meta { display: none; }
}

/* ===================================================================
   AI Playbook components
   Three additions the AI Playbook needs that the ecommerce Playbooks
   never did: a copy-paste prompt card, a before/after pair, and a
   labelled worked-example block. Same token set, same radii, same dark
   mode discipline as everything above — a lesson using these should be
   visually indistinguishable from an Amazon Playbook lesson.
   =================================================================== */

.pbx .prompt-card {
  margin: 22px 0; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; box-shadow: var(--sh-ring);
}
.pbx .prompt-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.pbx .prompt-tag {
  font-family: var(--font-head); font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--navy);
  padding: 3px 9px; border-radius: 99px; flex-shrink: 0;
}
.pbx .prompt-title {
  font-weight: 700; font-size: 13.5px; color: var(--text);
  flex: 1 1 200px; min-width: 0;
}
.pbx .prompt-copy {
  flex-shrink: 0; cursor: pointer; font: inherit; font-size: 12px;
  font-weight: 700; color: var(--orange-ink, var(--orange));
  background: transparent; border: 1px solid currentColor;
  padding: 4px 14px; border-radius: 99px; line-height: 1.5;
  transition: background var(--pbt) var(--ease-out),
              color var(--pbt) var(--ease-out);
}
.pbx .prompt-copy:hover { background: var(--orange); color: #fff;
  border-color: var(--orange); }
.pbx .prompt-copy.ok { background: var(--success); border-color: var(--success);
  color: #fff; }
.pbx .prompt-body {
  margin: 0; padding: 16px; overflow-x: auto;
  background: var(--surface);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.75; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.pbx .prompt-body code { font: inherit; background: none; padding: 0; }
/* the [placeholders] the learner replaces with their own information —
   substituting these is the whole point, so they are marked, not styled away */
.pbx .prompt-body mark {
  background: var(--orange-light); color: var(--orange-ink, var(--orange));
  padding: 1px 4px; border-radius: 4px; font-weight: 700;
}
.pbx .prompt-note {
  margin: 0; padding: 10px 16px; border-top: 1px solid var(--border-light);
  background: var(--bg); font-size: 12.5px; color: var(--text-muted);
  line-height: 1.65;
}

.pbx .ba-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0;
}
.pbx .ba-col {
  padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--surface);
}
.pbx .ba-col h5 {
  margin: 0 0 10px; font-family: var(--font-head); font-size: 11.5px;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.pbx .ba-col p:last-child, .pbx .ba-col ul:last-child { margin-bottom: 0; }
.pbx .ba-before { border-left: 4px solid var(--text-muted); }
.pbx .ba-before h5 { color: var(--text-muted); }
.pbx .ba-after  { border-left: 4px solid var(--success); }
/* --success is a FILL colour; used as ink on white it measures 3.30:1.
   --green-ink is the platform's text-safe green. */
.pbx .ba-after h5 { color: var(--green-ink, #15803d); }

.pbx .ai-sample {
  margin: 16px 0; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.pbx .ai-sample-label {
  display: block; padding: 9px 16px; background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-head); font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.pbx .ai-sample-in .ai-sample-label  { border-left: 4px solid var(--info); }
.pbx .ai-sample-out .ai-sample-label { border-left: 4px solid var(--orange); }
.pbx .ai-sample-body { padding: 14px 18px; font-size: 13.5px; line-height: 1.75; }
.pbx .ai-sample-body p:last-child, .pbx .ai-sample-body ul:last-child,
.pbx .ai-sample-body ol:last-child { margin-bottom: 0; }

[data-theme="dark"] .pbx .prompt-card,
[data-theme="dark"] .pbx .ai-sample,
[data-theme="dark"] .pbx .ba-col { background: var(--bg-2); border-color: var(--border); }
[data-theme="dark"] .pbx .prompt-head,
[data-theme="dark"] .pbx .prompt-note,
[data-theme="dark"] .pbx .ai-sample-label { background: var(--surface-2); }
[data-theme="dark"] .pbx .prompt-body { background: var(--bg-2); color: var(--text-2); }
[data-theme="dark"] .pbx .prompt-body mark {
  background: rgba(255,107,53,.18); color: #ffb088;
}
/* white on --orange is 2.84:1; --orange-ink-bg is the darker fill the
   platform already uses wherever white sits on orange */
[data-theme="dark"] .pbx .prompt-tag { background: var(--orange-ink-bg, #c2410c); color: #fff; }

@media (max-width: 720px) {
  .pbx .ba-pair { grid-template-columns: 1fr; gap: 12px; }
  .pbx .prompt-body { font-size: 12px; padding: 13px; }
  .pbx .prompt-head { padding: 10px 13px; }
  .pbx .prompt-title { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .pbx .prompt-copy { transition: none; }
}



/* ---------------------------------------------------------- module title
   The lesson title is the page's subject and is now an <h1>. playbook-ui.css
   is generated from the Amazon build, where that heading opened at <h2>, so
   its rules are matched here rather than edited there — the generated file is
   overwritten by tools/extract_playbook_ui.py and any change to it is lost. */
.pbx .module-header h1 {
  margin-bottom: 12px; font-size: 1.625rem; font-weight: 800;
  letter-spacing: -0.025em; border: none; padding: 0;
}
@media (max-width: 768px) {
  .pbx .module-header h1 { font-size: 1.3rem; }
}

/* === GENERATED: prefers-color-scheme mirror — do not edit by hand === */
/* Mirrors every [data-theme="dark"] rule above so it also applies when
   the OS is in dark mode and the user has made no explicit choice in the
   app. Without this the tokens flip and the component overrides do not,
   which is what put near-white text on a hard-coded white header.
   Regenerate with: python tools/fix_dark_media.py */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pbx { --orange-ink: #ff8b5e; --green-ink: #4ade80; --blue-ink: #7dd3fc; }
  :root:not([data-theme="light"]) .pbx .pb-lesson-tag.free, :root:not([data-theme="light"]) .pbx .pb-lesson-tag.done { background: #14532d; color: #86efac; }
  :root:not([data-theme="light"]) .pbx .prompt-card, :root:not([data-theme="light"]) .pbx .ai-sample, :root:not([data-theme="light"]) .pbx .ba-col { background: var(--bg-2); border-color: var(--border); }
  :root:not([data-theme="light"]) .pbx .prompt-head, :root:not([data-theme="light"]) .pbx .prompt-note, :root:not([data-theme="light"]) .pbx .ai-sample-label { background: var(--surface-2); }
  :root:not([data-theme="light"]) .pbx .prompt-body { background: var(--bg-2); color: var(--text-2); }
  :root:not([data-theme="light"]) .pbx .prompt-body mark { background: rgba(255,107,53,.18); color: #ffb088; }
  :root:not([data-theme="light"]) .pbx .prompt-tag { background: var(--orange-ink-bg, #c2410c); color: #fff; }
}
/* === END GENERATED === */