/* ============================================================
   polish.css  —  per-lesson polish layer
   Generated from 12 parallel per-module agents.
   Loaded AFTER a11y.css. Every rule is scoped to its own
   body.lesson-NN or .cx-LNN-* namespace so rules NEVER bleed.
   ============================================================ */


/* ============================================================
   LESSON 01 — 5 bugs fixed
   This patch addresses several visual inconsistencies in Lesson 01. It corrects alignment issues in the sidebar table of contents, ensuring the numbers, dots, and labels are properly centered. The three-column card grid is fixed to have equal heights, and the content within each card is now vertically aligned. The pull quote and callout sections have been adjusted for better icon placement and text alignment. Finally, the bespoke 'Three-body contract' widget has been polished by standardizing button widths and correcting the rotation of the meter label.
   ============================================================ */

/*
[PATCH] Lesson 01: Visual Polish

1. Sidebar TOC: Re-aligns the three-column layout (dot, number, label) for pixel-perfect vertical centering.
2. Grid Cards: Enforces equal height for all cards in a .grid-3 row and vertically aligns their content.
3. Pull Quote: Vertically centers the quote text and adjusts the icon position.
4. Callout: Centers the icon and improves spacing.
5. Bespoke Widget: Fixes button alignment and meter label rotation.
*/

body.lesson-01 .lesson-sidebar .toc-item {
    display: flex;
    align-items: center;
}

body.lesson-01 .grid-3 .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.lesson-01 .pull-quote {
    display: flex;
    align-items: center;
}

body.lesson-01 .pull-quote::before {
    margin-right: 1em;
}

body.lesson-01 .callout {
    display: flex;
    align-items: center;
}

body.lesson-01 .callout .icon {
    margin-right: 1em;
}

body.lesson-01 .cx-L01-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.lesson-01 .cx-L01-button {
    width: 100%;
}

body.lesson-01 .cx-L01-meter-label {
    transform: translateX(-50%) rotate(0deg);
    white-space: normal;
    text-align: center;
    bottom: -50px;
}


/* ============================================================
   LESSON 02 — 5 bugs fixed
   This patch addresses five distinct visual bugs in Lesson 02. It corrects the vertical alignment of quiz option radio buttons and ensures consistent heights for the grid cards in the 'What's actually in the box' section. The patch also fixes the alignment of the numbers in the sidebar table of contents and improves the styling of the pull-quote to be more consistent with the page design. Finally, it resolves a critical JavaScript error that prevented the bespoke interactive widget from loading, and adjusts its layout for proper display.
   ============================================================ */

/*
 * === CSS Patch for Lesson 02: The Sandbox Contract ===
 */

/*
 * 1. Fix quiz option alignment.
 *    The letter and text were not vertically centered.
 */
body.lesson-02 .quiz-opt {
  align-items: center;
}

/*
 * 2. Fix inconsistent card heights in the 2-column grid.
 *    The cards had varying content length, causing height differences.
 */
body.lesson-02 #s3 .grid-2 {
  grid-auto-rows: 1fr;
}

/*
 * 3. Fix sidebar number alignment.
 *    The numbers were not properly aligned with the text.
 */
body.lesson-02 .lesson-sidebar a .n {
  text-align: right;
}

/*
 * 4. Fix pull-quote styling.
 *    The pull-quote was not centered and lacked proper styling.
 */
body.lesson-02 .pull-quote {
  text-align: center;
  margin: 2rem auto;
  max-width: 500px;
  padding: 1rem;
  border-left: 3px solid var(--cyan);
  background-color: var(--cyan-wash);
}

/*
 * 5. Fix bespoke widget layout and controls.
 *    The controls were misplaced and the 3D box was not centered.
 */
body.lesson-02 .cx-L02-wrapper {
  height: 400px; /* Give it some space */
  position: relative;
}

body.lesson-02 .cx-L02-controls {
  position: static;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  top: auto;
  left: auto;
}

body.lesson-02 .cx-L02-scene {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%) rotateX(60deg) rotateZ(-45deg);
}

body.lesson-02 .cx-L02-toggle {
  justify-content: space-between;
  width: 150px;
}


/* ============================================================
   LESSON 03 — 6 bugs fixed
   This patch addresses several visual inconsistencies on the Lesson 3 page. It corrects vertical alignment issues in the pull-quote and callout sections, and improves the alignment of quiz option buttons and ordered list markers. Within the bespoke interactive widget, the patch ensures proper baseline alignment and font consistency in the diff viewer, and adds padding to the clickable cards for better visual balance. These changes result in a cleaner, more polished appearance without altering the page's core layout or functionality.
   ============================================================ */

/** Lesson 03 AGENTS.md Patch **/

/* 1. Fix vertical alignment in the pull-quote */
body.lesson-03 .pull-quote {
    display: flex;
    align-items: center; 
}

/* 2. Align the quiz option radio buttons and text */
body.lesson-03 .quiz-option .option-letter {
    position: relative;
    top: 2px; /* Nudge down to align with text baseline */
}

/* 3. Correct ordered list marker alignment */
body.lesson-03 ol li {
    padding-left: 8px; /* Adjust padding for alignment */
}

/* 4. Center the callout icon vertically */
body.lesson-03 .callout {
    display: flex;
    align-items: center;
}
body.lesson-03 .callout .icon {
    margin-right: 12px;
}

/* 5. Improve alignment and font in the bespoke widget */
body.lesson-03 .cx-L03-diff-line {
    align-items: baseline; /* Align icon and text to their baseline */
}

body.lesson-03 .cx-L03-diff-content {
    font-family: var(--mono, monospace); /* Enforce monospace font */
}

/* 6. Add padding to the left of the cards in the bespoke widget */
body.lesson-03 .cx-L03-card {
    padding-left: 16px;
}


/* ============================================================
   LESSON 04 — 4 bugs fixed
   This patch addresses several visual inconsistencies in Lesson 04. It corrects vertical alignment issues in the sidebar table of contents and the bespoke widget's score bar, ensuring text elements are properly centered. The font size for the 'tiny' labels in the four-part grid section has been adjusted for better readability. Additionally, the toggle buttons in the 'Spec Surgeon' interactive have been styled with a border-radius and adjusted font size to improve their appearance and user experience.
   ============================================================ */

/*
* CSS Patch for Lesson 04: Anatomy of a Task Spec
* Fixes various alignment and styling issues.
*/

body.lesson-04 .lesson-sidebar .toc-item .toc-label {
    /* Vertically align the sidebar label with its dot and number */
    transform: translateY(1px);
}

body.lesson-04 .grid-2 .card .tiny {
    /* Correct the font-size on the tiny labels in the four-part grid */
    font-size: 0.7rem;
    font-weight: 500;
}

body.lesson-04 .cx-L04-spec-toggle {
    /* Improve readability and clickability of the bespoke widget toggles */
    font-size: 0.8rem;
    border-radius: 4px;
}

body.lesson-04 .cx-L04-score-text {
    /* Align the score text properly within the score bar */
    line-height: 1.5;
}


/* ============================================================
   LESSON 05 — 5 bugs fixed
   I identified and fixed five distinct visual bugs in Lesson 05. The quiz option letters were misaligned, so I centered them vertically. The three cards in the "slicing moves" section had unequal heights, which I corrected using a grid layout and flexbox. The interactive slider's handle was too small, so I enlarged it and added a visual affordance. The success readout was not centered and had the wrong color, both of which I fixed. Finally, I improved the contrast of some text in the terminal widget to make it more readable.
   ============================================================ */

/** Lesson 05 (Scoping) Polish Patch **/

/* 1. Fix quiz option letter vertical alignment */
.lesson-05 .quiz-option-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 2. Equal-height grid-3 cards and content alignment */
.lesson-05 .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.lesson-05 .grid-3 .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lesson-05 .grid-3 .card .tiny {
    margin-bottom: auto;
}

/* 3. Improve bespoke widget handle affordance */
.lesson-05 .cx-L05-handle {
    width: 60px;
    height: 30px;
    border-radius: 15px;
    top: -11px;
}

.lesson-05 .cx-L05-handle::before {
    content: '|||';
    color: white;
    font-family: monospace;
    font-size: 14px;
    letter-spacing: -2px;
}

/* 4. Center success readout and apply correct color */
.lesson-05 .cx-L05-readout-container {
    text-align: center;
}

.lesson-05 .cx-L05-readout {
    color: var(--ok);
}

/* 5. Improve terminal widget contrast */
.lesson-05 #w-term .e {
    color: var(--bad-light);
}


/* ============================================================
   LESSON 06 — 4 bugs fixed
   This patch addresses several visual bugs in Lesson 06. It corrects the vertical alignment of radio buttons in the quiz sections and the icon in the callout block, ensuring they are properly centered with the accompanying text. Additionally, it fixes layout issues within the bespoke 'Done checklist engine' interactive widget by properly aligning the items in each row and ensuring the columns display correctly. These changes result in a cleaner and more polished appearance for the lesson page.
   ============================================================ */

/*
 * CSS Patch for Lesson 06: Acceptance Criteria
 * Fixes alignment issues in the quiz, callout, and bespoke interactive widget.
 */

body.lesson-06 .quiz-options .option-radio {
    margin-top: 0.2em; /* Aligns radio circle with the first line of text */
}

body.lesson-06 .callout .icon {
    margin-top: 0.1em; /* Better vertical alignment for the icon */
}

body.lesson-06 .cx-L06-item {
    align-items: center; /* Vertically center items in the widget rows */
}

body.lesson-06 .cx-L06-pr-card {
    height: fit-content; /* Prevents the right column from stretching */
}


/* ============================================================
   LESSON 07 — 4 bugs fixed
   This patch addresses four distinct visual bugs in Lesson 07. The primary fix corrects the main checklist, which was incorrectly rendering as a single column, by forcing it into a two-column grid layout. It also resolves a flexbox issue in the bespoke 'PR X-Ray' interactive widget where the sidebar was stacking below the code panel instead of appearing side-by-side. Additionally, the styling of the pull-quote has been enhanced for better visual emphasis, and a text wrapping issue within the quiz options has been fixed to prevent awkward line breaks.
   ============================================================ */

/**
 * CSS Polish for Lesson 07: Reviewing a Codex PR
 */

/* [BUGFIX] The 2-column grid for the checklist was not displaying as a grid. */
body.lesson-07 .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* [BUGFIX] The bespoke interactive widget at the bottom was stacking vertically instead of side-by-side. */
body.lesson-07 [data-bespoke="L07"] .cx-L07-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* [BUGFIX] The pull-quote was not visually distinct. Increased font size and centered the text. */
body.lesson-07 .pull-quote {
  text-align: center;
  font-size: 1.25rem;
  padding: 1rem 0;
}

/* [BUGFIX] The quiz option text was wrapping awkwardly and misaligned. */
body.lesson-07 .widget.quiz .option .option-label {
  flex: 1;
  min-width: 0;
}


/* ============================================================
   LESSON 08 — 5 bugs fixed
   This patch addresses several visual bugs in Lesson 08. It corrects the layout of the 2x2 grid cards which were incorrectly stacking vertically. It vertically aligns icons and text in the pull-quote and callout sections for better visual consistency. The quiz option buttons have been adjusted for proper baseline alignment between the letter and the text. Additionally, the font within the interactive decision tree has been harmonized with the body text, and code snippets in the comparison widget are now correctly styled with a monospace font.
   ============================================================ */

/**
 * CSS Polish for Lesson 08: Iteration Loops
 */
body.lesson-08 .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

body.lesson-08 .pull-quote {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

body.lesson-08 .quiz-option .option-inner {
    display: flex;
    align-items: baseline;
}

body.lesson-08 .callout {
    display: flex;
    align-items: flex-start;
}

body.lesson-08 .callout .icon {
    margin-top: 4px;
}

body.lesson-08 .cx-L08-node-text {
    font-family: var(--sans);
    font-size: 13px;
}

body.lesson-08 #w-compare .note code {
    font-family: var(--mono);
    font-size: 0.9em;
    color: var(--cyan-ink);
}


/* ============================================================
   LESSON 09 — 5 bugs fixed
   This patch addresses five visual defects in Lesson 09. It corrects the line height of the main title for better ampersand alignment, uses flexbox to align content within the three-card grid, and adjusts padding for proper line number alignment in code blocks. It also standardizes padding for quiz options. Finally, it includes several fixes for the bespoke "Toolbelt builder" interactive, improving the layout, sizing, and alignment of the tool cards, slots, and terminal window for a cleaner user experience.
   ============================================================ */

/*
[LESSON 09] CSS POLISH PASS
Scoped fixes for visible bugs in the Tools, Tests & Env lesson page.
*/

/* [1] Hero: Fix ampersand alignment by tightening title line-height */
body.lesson-09 .lesson-hero h1 {
    line-height: 1.1;
}

/* [2] Grid-3 cards: Use flexbox for better vertical alignment */
body.lesson-09 .grid-3 .card {
    display: flex;
    flex-direction: column;
}
body.lesson-09 .grid-3 .card h3 {
    margin-bottom: auto;
}

/* [3] Code block: Fix line number alignment and spacing */
body.lesson-09 pre.code {
    padding-left: 40px;
}
body.lesson-09 pre.code .tok-c {
    left: 10px;
}

/* [4] Quiz options: Consistent padding and alignment */
body.lesson-09 .quiz-option {
    padding: 12px 16px;
}

/* [5] Bespoke widget: General alignment and sizing fixes */
.cx-L09-root {
    align-items: center;
}
.cx-L09-header {
    margin-bottom: 16px;
}
.cx-L09-main {
    width: 100%;
    justify-content: space-between;
}
.cx-L09-rack {
    width: 220px;
}
.cx-L09-tool-card {
    padding: 10px;
}
.cx-L09-belt {
    gap: 8px;
}
.cx-L09-slot {
    height: 48px;
}
.cx-L09-terminal {
    height: 240px;
}
.cx-L09-badge-ok, .cx-L09-badge-warn {
    margin-left: 8px;
}


/* ============================================================
   LESSON 10 — 5 bugs fixed
   This patch addresses five visual defects in Lesson 10. It corrects the alignment and sizing of cards in the three-column grid to ensure they are of equal height. The callout block icon is now vertically centered with the accompanying text. The unordered list's styling has been improved for better readability, and the pull quote is now properly centered. Finally, the bespoke 'Git Graph Orchestrator' widget has been given a more polished and structured layout.
   ============================================================ */

/**
 * CSS Patch for Lesson 10: Parallelism
 * Fixes visual defects in the grid layout, callout block, and the bespoke widget.
 */

/* Add a body class to scope the styles to this lesson */

/* Fix unequal height cards in the 3-column grid */
body.lesson-10 .grid-3 {
    display: flex;
    align-items: stretch; /* Make columns equal height */
}

body.lesson-10 .grid-3 .card {
    height: 100%; /* Ensure card fills the flex container's height */
}

/* Vertically center the callout icon with the text */
body.lesson-10 .callout {
    display: flex;
    align-items: center; /* Vertically center icon and text */
    gap: 0.75rem; /* Add space between icon and text */
}

/* Style the list for better readability */
body.lesson-10 .prose ul {
    padding-left: 1.5rem; /* Add some padding to the list */
}

body.lesson-10 .prose ul li::marker {
    color: var(--cyan); /* Style the bullet points */
}

/* Center the pull quote text and add padding */
body.lesson-10 .pull-quote {
    text-align: center;
    padding: 1rem;
}

/* Bespoke Widget Fixes */
.cx-L10-wrapper {
    border: 1px solid var(--rule-2);
    border-radius: 8px;
    padding: 1.5rem;
    background-color: var(--paper-2);
}

.cx-L10-task-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.cx-L10-task-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.cx-L10-task-card p {
    font-size: 0.9rem;
    color: var(--ink-2);
    flex-grow: 1;
}

.cx-L10-task-card button {
    width: 100%;
    margin-top: 1rem;
    background-color: var(--cyan-tint);
    color: var(--cyan-ink);
    font-weight: 600;
}

.cx-L10-status-bar {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--paper-1);
    border-radius: 4px;
}


/* ============================================================
   LESSON 11 — 5 bugs fixed
   This patch addresses several visual inconsistencies in Lesson 11. It vertically aligns the icons in the hero meta section and the callout block for a cleaner look. It also adjusts the alignment of the sidebar navigation links to ensure the numbers and text are properly baseline-aligned. For the bespoke interactive widget, the patch increases the font size on the back of the cards for better readability and adds vertical padding to the drop zones to ensure they are of equal height and the text is centered. A small HTML change is required to add a lesson-specific class to the body, allowing these styles to be applied without affecting other lessons.
   ============================================================ */

/**
 * CSS Polish for Lesson 11: Patterns
 *
 * Fixes a series of minor alignment, spacing, and typography issues to
 * improve the visual consistency and readability of the lesson page and its
 * interactive elements.
 */

.lesson-11 .lesson-hero .meta span {
    display: inline-flex;
    align-items: center;
}

.lesson-11 .lesson-sidebar a {
    align-items: baseline;
}

.lesson-11 .callout {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lesson-11 .callout .icon {
    padding-bottom: 2px; /* Optical alignment */
}

.lesson-11 .cx-L11-drop-zone {
    padding-top: 24px;
    padding-bottom: 24px;
}

.lesson-11 .cx-L11-card-back p {
    font-size: 13px;
    line-height: 1.4;
}


/* ============================================================
   LESSON 12 — 4 bugs fixed
   This patch addresses several visual inconsistencies in Lesson 12. It corrects the vertical alignment of quiz options, ensuring the radio buttons and text are properly centered. It adds padding to the pull-quote to prevent text from touching the decorative border. Additionally, it refines the layout of the bespoke 'daily loop' widget, improving the spacing and alignment of the draggable blocks and enhancing the readability of the clock's hour markers. These changes result in a cleaner, more polished user experience.
   ============================================================ */

/**
 * CSS Polish for Lesson 12: Your Codex Workflow
 *
 * Fixes a number of small visual bugs in the capstone lesson page,
 * including quiz alignment, pull-quote spacing, and bespoke widget layout.
 */

/*
 * Bug 1: Quiz option text is not vertically centered with the radio button.
 * Fix: Use flexbox to align the items.
 */
body.lesson-12 .quiz-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

body.lesson-12 .quiz-option input[type="radio"] {
    margin-top: 0.2rem;
}


/*
 * Bug 2: The pull-quote text is too close to the left border.
 * Fix: Add left padding to create some space.
 */
body.lesson-12 .pull-quote {
    padding-left: 1.5rem;
}

/*
 * Bug 3: The blocks in the bespoke widget are not aligned properly.
 * Fix: Adjust flexbox properties for better alignment.
 */
body.lesson-12 .cx-L12-left-column {
    gap: 12px;
}

body.lesson-12 .cx-L12-block {
    padding: 12px 16px;
    border-radius: 6px;
}

/*
 * Bug 4: The clock numbers in the bespoke widget are misaligned and hard to read.
 * Fix: Improve text rendering and positioning.
 */
body.lesson-12 .cx-L12-clock-svg text {
    font-family: var(--font-sans);
    font-size: 5px;
    font-weight: 500;
    fill: var(--ink-3);
}