/* ============================================
   TESTING GUIDE — multi-page layout
   For /testing-real-world-python-apis/* only.
   Self-contained; all rules scoped under .tg-layout.
   Inspired by ChatGPT's dark UI (soft dark-tech feel).
   ============================================ */

.tg-layout {
    /* Palette */
    --tg-bg: #212121;
    --tg-panel: #111111;
    --tg-panel-2: #181818;
    --tg-text: #e5e7eb;
    --tg-text-strong: #f3f4f6;
    --tg-muted: #9ca3af;
    --tg-border: #181818;
    --tg-border-soft: #181818;
    --tg-accent: #10a37f;
    --tg-accent-soft: #0d7a60;
    --tg-accent-glow: rgba(16, 163, 127, 0.12);
    --tg-code-bg: #181818;

    background: var(--tg-bg);
    color: var(--tg-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height: calc(100vh - 4rem);
    padding: 2rem 0 0 0;
}

/* ============================================
   GRID: sidebar + main
   ============================================ */
.tg-container {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    max-width: 1200px;
    margin: 0 auto;
    gap: 4rem;
    padding: 0 2rem 0 0;
}

/* ============================================
   SIDEBAR
   ============================================ */
.tg-sidebar {
    position: sticky;
    top: 5rem;
    align-self: start;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: 1rem 0 2rem 0;

    /* Firefox: thin + low-contrast thumb/track */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* Chromium/WebKit: replace the loud default with a slim, hover-reveal scrollbar */
.tg-sidebar::-webkit-scrollbar {
    width: 6px;
}

.tg-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.tg-sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.2s;
}

.tg-sidebar:hover::-webkit-scrollbar-thumb,
.tg-sidebar:focus-within::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}

.tg-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

.tg-sidebar::-webkit-scrollbar-button {
    display: none;
}

.tg-sidebar-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tg-muted);
    margin: 0 0 0.85rem 0.75rem;
}

.tg-sidebar-guide-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tg-text-strong);
    margin: 0 0 0.25rem 0.75rem;
    line-height: 1.3;
}

.tg-sidebar-guide-subtitle {
    font-size: 0.8rem;
    color: var(--tg-muted);
    margin: 0 0 1.5rem 0.75rem;
    line-height: 1.4;
}

.tg-sidebar-divider {
    border: none;
    border-top: 1px solid var(--tg-border);
    margin: 0 0 1rem 0;
}

.tg-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tg-sidebar-list li {
    margin: 0;
}

.tg-sidebar-link {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    margin: 0.1rem 0;
    color: var(--tg-muted);
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.4;
    border-radius: 4px;
    border-left: 2px solid transparent;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.tg-sidebar-link:hover {
    color: var(--tg-text);
    background: rgba(255, 255, 255, 0.025);
}

.tg-sidebar-link.is-active {
    color: var(--tg-accent);
    background: var(--tg-accent-glow);
    border-left-color: var(--tg-accent);
    font-weight: 500;
}

.tg-sidebar-num {
    color: var(--tg-muted);
    font-size: 0.82em;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    min-width: 1.1rem;
    flex-shrink: 0;
}

.tg-sidebar-link.is-active .tg-sidebar-num {
    color: var(--tg-accent);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.tg-main {
    max-width: 700px;
    padding: 1rem 0 6rem 0;
}

/* Force Inter to win against bare-selector rules in chapter-styles-v3.css
   (e.g. `p { font-family: 'Open Sans' }`). An explicit rule on an element
   beats ancestor inheritance, so the font declared on .tg-layout alone
   isn't enough — these descendants need to re-declare it. */
.tg-main h1,
.tg-main h2,
.tg-main h3,
.tg-main p,
.tg-main ul,
.tg-main ol,
.tg-main li {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* H1 (section heading) — v3 underline design, original testing-guide typography. */
.tg-main h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--tg-text-strong);
    padding: 0 0 16px 0;
    border-bottom: 1px solid #2a2a2a;
    margin: 0 0 1rem 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.tg-main h1 + p.tg-lead {
    color: var(--tg-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 2.75rem 0;
}

/* H2 (subsection heading) — v3 underline + 60px accent bar, original testing-guide typography. */
.tg-main h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tg-text-strong);
    padding: 0 0 14px 0;
    border-bottom: 1px solid #2a2a2a;
    margin: 3rem 0 1.25rem 0;
    line-height: 1.3;
    letter-spacing: -0.012em;
    position: relative;
}

.tg-main h2::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: #6366f1;
}

.tg-main h3 {
    color: var(--tg-text-strong);
    font-weight: 600;
    font-size: 1.2rem;
    margin: 2.25rem 0 0.75rem 0;
    line-height: 1.4;
}

.tg-main p {
    color: var(--tg-text);
    line-height: 1.75;
    margin: 0 0 1.1rem 0;
    font-size: 1rem;
}

.tg-main ul,
.tg-main ol {
    color: var(--tg-text);
    line-height: 1.75;
    padding-left: 1.5rem;
    margin: 0 0 1.1rem 0;
}

.tg-main ul { list-style: disc outside; }
.tg-main ol { list-style: decimal outside; }

.tg-main li::marker {
    color: #6b7280;
}

.tg-main ul li,
.tg-main ol li {
    margin: 0.5rem 0;
}

/* Match v3's .spaced-list rhythm — wider vertical gap between list items */
.tg-main ul.spaced-list li,
.tg-main ol.spaced-list li {
    margin-bottom: 0.75em;
}

/* Blue-accented <strong> to match v3 — used for term highlighting inside lists and prose */
.tg-main strong {
    color: #959de6;
    font-weight: 500;
}

.tg-main a {
    color: var(--tg-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.tg-main a:hover {
    color: #14b891;
}

/* Inline images/diagrams inside the main content.
   max-width is 2rem short of full width so there's whitespace on the right,
   letting the image sit visibly inside the text column rather than hitting the right edge. */
.tg-main img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 2rem 0;
    display: block;
}

/* Inline code (uses the .code-heading class from chapter-styles-v3.css) */
.tg-main .code-heading {
    background: #424242;
    color: var(--tg-text-strong);
    padding: 0.13rem 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--tg-border);
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: .9em;
    font-weight: 500;
}

/* Code blocks, program-title, code-header all inherit directly from
   chapter-styles-v3.css — no overrides needed here. */

/* ============================================
   PREV/NEXT NAV FOOTER
   ============================================ */
.tg-nav-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--tg-border);
}

.tg-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--tg-border);
    border-radius: 6px;
    background: var(--tg-panel);
    color: var(--tg-text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.tg-nav-link:hover {
    border-color: var(--tg-accent);
    background: var(--tg-panel-2);
    color: var(--tg-text-strong);
}

.tg-nav-prev {
    grid-column: 1;
    text-align: left;
}

.tg-nav-next {
    grid-column: 2;
    text-align: right;
    align-items: flex-end;
}

.tg-nav-link-only {
    grid-column: 1 / -1;
}

.tg-nav-label {
    font-size: 0.8rem;
    color: var(--tg-muted);
    font-weight: 500;
}

.tg-nav-title {
    font-size: 0.98rem;
    color: var(--tg-text-strong);
    font-weight: 500;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .tg-container {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 1.25rem;
    }

    .tg-sidebar {
        position: static;
        max-height: none;
        padding: 1rem 0;
        border-bottom: 1px solid var(--tg-border);
        margin-bottom: 1.5rem;
        overflow-y: visible;
    }

    .tg-main {
        padding: 0 0 4rem 0;
        max-width: 100%;
    }

    .tg-main h1 {
        font-size: 2rem;
    }

    .tg-main h2 {
        font-size: 1.4rem;
    }

    .tg-nav-footer {
        grid-template-columns: 1fr;
    }

    .tg-nav-prev,
    .tg-nav-next {
        grid-column: 1;
        text-align: left;
        align-items: flex-start;
    }
}

/* ============================================
   .tg-lead-in — paragraph lead-in before a content block
   Replaces legacy .body-strong-heading.
   ============================================ */
.tg-main .tg-lead-in {
    font-weight: 600;
    color: #959de6;
    margin: 2.5rem 0 1rem 0;
    font-size: 1.05rem;
    line-height: 1.5;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================
   .tg-details — collapsible details with chevron
   Replaces legacy .troubleshooting-details.
   Use for error scenarios, "why this works" sidebars,
   and as the building block of .tg-quiz.
   ============================================ */
.tg-details {
    background: var(--tg-panel);
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    margin: 0.75rem 0;
    overflow: hidden;
}

.tg-details summary {
    padding: 0.9rem 1.25rem 0.9rem 2.75rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--tg-text);
    list-style: none;
    user-select: none;
    position: relative;
    transition: background 0.15s;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.tg-details summary::-webkit-details-marker {
    display: none;
}

.tg-details summary::before {
    content: '▶';
    position: absolute;
    left: 1.1rem;
    top: 1.05rem;
    color: var(--tg-muted);
    font-size: 0.7em;
    transition: transform 0.2s ease;
}

.tg-details[open] summary::before {
    transform: rotate(90deg);
}

.tg-details summary:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Allow inline code inside the summary to wrap naturally */
.tg-details summary code {
    white-space: pre-wrap;
}

.tg-details-body {
    padding: 0 1.25rem 1.25rem 2.75rem;
    color: var(--tg-text);
}

.tg-details-body p {
    margin: 0.5rem 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.65;
}

.tg-details-body p:last-child {
    margin-bottom: 0;
}

.tg-details-body ul,
.tg-details-body ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================
   .tg-quiz — end-of-chapter review wrapper
   A lightweight container for a group of .tg-details
   used as Q&A flashcards. Replaces legacy .checkpoint-quiz.
   ============================================ */
.tg-quiz {
    margin: 2.5rem 0;
}

.tg-quiz-heading {
    font-weight: 600;
    color: var(--tg-text-strong);
    margin: 0 0 1.25rem 0;
    font-size: 1rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================
   .tg-warning — critical-warning callout
   Replaces legacy .warning-box. Use sparingly,
   only for genuinely interruptive material
   ("don't commit this", "this deletes prod data").
   Best-practice advice belongs in prose, not a warning.
   ============================================ */
.tg-warning {
    border-left: 3px solid #dc2626;
    background: rgba(220, 38, 38, 0.08);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.tg-warning-heading {
    font-weight: 600;
    color: #ef4444;
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.tg-warning-heading::before {
    content: '⚠ ';
}

.tg-warning p {
    margin: 0 0 0.75rem 0;
    color: var(--tg-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.tg-warning p:last-child {
    margin-bottom: 0;
}

/* ============================================
   .tg-caution — tripwire callout
   "Heads up, this specific thing commonly trips
   people up." Sharper than prose, softer than
   .tg-warning. Use only for concrete, known
   failure modes with a specific diagnostic
   signature (e.g. "this causes redirect_uri_mismatch"
   or "this silently disables CSRF protection").
   Not for general best-practice advice — that's
   prose work. See TEACHING-STYLE-GUIDE.md for the
   binary test that keeps this component rare.
   ============================================ */
.tg-caution {
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.tg-caution-heading {
    font-weight: 600;
    color: #f59e0b;
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.tg-caution-heading::before {
    content: '⚠ ';
}

.tg-caution p {
    margin: 0 0 0.75rem 0;
    color: var(--tg-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.tg-caution p:last-child {
    margin-bottom: 0;
}

/* ============================================
   .tg-note — quiet informational callout
   A softer cousin of .tg-warning. Use for
   pull-out insights, forward references, or
   meta hints ("if you're skimming, skip X").
   Heading is optional — a single <p> is fine.
   Use sparingly — if every paragraph is a note,
   nothing is.
   ============================================ */
.tg-note {
    border-left: 3px solid var(--tg-accent);
    background: var(--tg-accent-glow);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.tg-note-heading {
    font-weight: 600;
    color: var(--tg-accent);
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.tg-note p {
    margin: 0 0 0.75rem 0;
    color: var(--tg-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.tg-note p:last-child {
    margin-bottom: 0;
}

/* ============================================
   .tg-table — tabular data
   Replaces legacy .styled-table. Use only for
   genuinely tabular content (comparison matrices,
   config reference, etc.) — not for layout.

   table-layout: fixed is required so that column
   widths declared on <col> (or the first row's <th>)
   are respected. Without it, monospace code pills
   in one cell can dictate the column width and push
   other columns into awkward wraps — see the
   DESIGN-SYSTEM-NEW-GUIDES.md note on table sizing.
   ============================================ */
.tg-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.tg-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #2a2a2a;
    color: var(--tg-text-strong);
    font-weight: 600;
    font-size: 0.9rem;
}

.tg-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #181818;
    color: var(--tg-text);
    vertical-align: top;
    line-height: 1.5;
}

.tg-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.tg-table tbody tr:last-child td {
    border-bottom: none;
}

.tg-table code {
    font-size: 0.9em;
}

/* .tg-table-wrap-code — modifier for character-comparison tables
   (URLs, command flags, regex patterns) where every character must
   stay visible but the column widths are declared fixed. Lets the
   code pills wrap inside their cells instead of overflowing silently.
   See DESIGN-SYSTEM-NEW-GUIDES.md for when to reach for this. */
.tg-table-wrap-code code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}

/* ============================================
   .tg-label — utility: body-text-size section label

   Bright white, weight 600, body text size. Used anywhere
   in .tg-main that needs a "section label" above a list or
   block, where a real <h3> would be too heavy and uppercase
   styling would be too loud. Semantically applied to a <div>
   (not a heading element), because these are typographic
   labels, not structural subheadings.

   Current uses: chapter-plan column labels.
   Future candidates: sidebar labels, terminal-output tags,
   section dividers in summary blocks.
   ============================================ */
.tg-main .tg-label {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tg-text-strong);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
}

/* ============================================
   .tg-chapter-plan — chapter orientation block

   Stacked "what you'll learn / what you'll build" summary for
   the chapter overview page. Single soft-tinted panel, two
   groups separated by a hairline divider. Orthogonal to the
   sub-page list (which the sidebar already shows), so this
   complements the sidebar rather than duplicating it.

   Paid-book overview pages only. Not allowed on public
   guide pages — see TEACHING-STYLE-GUIDE.md §3 for the
   paid-vs-public reader-contract carve-out.
   ============================================ */
.tg-main .tg-chapter-plan {
    margin: 1.75rem 0 2.5rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid #2a2a2a;
    border-bottom: 1px solid #2a2a2a;
}

.tg-main .tg-chapter-plan-group + .tg-chapter-plan-group {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tg-main .tg-chapter-plan-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-main .tg-chapter-plan-list li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.1rem;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--tg-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.tg-main .tg-chapter-plan-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tg-muted);
}

.tg-main .tg-chapter-plan-list li::marker {
    content: '';
}

/* Inline filenames should read as easily as the list text itself —
   they're the scannable "asset" the reader is promised. Match the
   parent font size (1em) rather than shrinking to 0.85em. */
.tg-main .tg-chapter-plan-list li code {
    font-size: 1em;
}

@media (max-width: 640px) {
    .tg-main .tg-chapter-plan {
        padding: 1.25rem 1.5rem;
    }
}