/* Dark theme overrides for the existing AI study-guide layouts. */
body.scaler-guide {
    --paper: #111315;
    --paper-2: #181c20;
    --card: #20252a;
    --ink: #f4eee8;
    --ink-soft: #c4bab0;
    --ink-faint: #918981;
    --orange: #ff7657;
    --orange-deep: #ff9b82;
    --orange-tint: #38231e;
    --teal: #68cbbb;
    --teal-tint: #19312e;
    --blue: #91afe4;
    --blue-tint: #1d293d;
    --gold: #e7b65a;
    --gold-tint: #342b1a;
    --purple: #c39ce2;
    --purple-tint: #2d2337;
    --pink: #e687af;
    --pink-tint: #38232d;
    --line: #3b3d3f;
    --code-bg: #090b0d;
    --code-ink: #eee7df;
    --shadow: 0 2px 0 rgba(0, 0, 0, .16), 0 18px 40px -22px rgba(0, 0, 0, .8);
    --shadow-lift: 0 4px 0 rgba(0, 0, 0, .2), 0 30px 60px -28px rgba(0, 0, 0, .9);
    background: radial-gradient(circle at 12% 6%, #28201c 0, transparent 38%),
        radial-gradient(circle at 88% 3%, #261b1d 0, transparent 30%), var(--paper);
    color-scheme: dark;
}

#topnav {
    background: rgba(17, 19, 21, .88);
}

body.scaler-guide .kicker,
body.scaler-guide .wow,
body.scaler-guide .react-msg.answer {
    border-color: #6b3a2e;
}

body.scaler-guide .analogy.teal,
body.scaler-guide .react-msg.obs,
body.scaler-guide .recap .r {
    border-color: #315f58;
}

body.scaler-guide .analogy.blue,
body.scaler-guide .react-msg.thought {
    border-color: #405578;
}

body.scaler-guide .analogy.gold,
body.scaler-guide .react-msg.action {
    border-color: #68552b;
}

body.scaler-guide .analogy.purple,
body.scaler-guide .note {
    border-color: #58426b;
}

body.scaler-guide .analogy.pink {
    border-color: #704056;
}

body.scaler-guide .note p,
body.scaler-guide .bub.toolchip,
body.scaler-guide .builder .blockpiece.prompt,
body.scaler-guide .cmsg.t,
body.scaler-guide .cmsg.src,
body.scaler-guide .nw.y .w,
body.scaler-guide .mcard.ma .mr,
body.scaler-guide .hcol.bm h5 .tag {
    color: var(--ink-soft);
}

body.scaler-guide .cmsg.b,
body.scaler-guide .li-card,
body.scaler-guide .keysim,
body.scaler-guide .pipe .chunk-pill {
    background: var(--card);
}

body.scaler-guide .strat-tab:hover,
body.scaler-guide .cchunk.split {
    background: var(--paper-2);
}

body.scaler-guide .cchunk[style] {
    background: var(--card) !important;
}

body.scaler-guide .slider::-webkit-slider-thumb {
    background: var(--ink);
    border-color: var(--paper);
}

body.scaler-guide .slider::-moz-range-thumb {
    background: var(--ink);
    border-color: var(--paper);
}

body.docker-guide {
    --ink: #edf4fa;
    --paper: #10161c;
    --card: #18212a;
    --cargo: #ff7b47;
    --teal: #55c7bf;
    --crane: #f4c94f;
    --sea: #71a5ff;
    --plum: #c18cdd;
    --line: #344352;
    --muted: #a9b8c5;
    --code-bg: #090f15;
    --code-ink: #dce7f2;
    color-scheme: dark;
}

body.docker-guide .hero,
body.docker-guide footer {
    background: #0b1117;
}

body.docker-guide .route {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

body.docker-guide>.pill {
    background: #0b1117;
}

body.docker-guide .port:hover,
body.docker-guide td code,
body.docker-guide .check li:hover {
    background: #22303c;
}

body.docker-guide .why {
    background: #2b1e19;
}

body.docker-guide .analogy {
    background: #162b2a;
}

body.docker-guide .wow {
    background: #2b2818;
}

body.docker-guide .trap {
    background: #2d1d20;
}

body.docker-guide .iq {
    background: #281e2e;
}

body.docker-guide .plain {
    background: #29251c;
}

body.docker-guide .decode {
    background: #141d25;
    border-color: #405263;
}

body.docker-guide .decode dt,
body.docker-guide .searchwrap input,
body.docker-guide .fc {
    background: var(--card);
}

body.docker-guide .decode dd,
body.docker-guide .fc .a {
    color: var(--muted);
}

body.docker-guide .howto {
    background: linear-gradient(135deg, #111c26, #1b2b39);
}

.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--accent, var(--orange, #ff5b35));
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 260;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

#topnav {
    background: rgba(17, 19, 21, .94);
}

#topnav .topic-menu-panel {
    display: contents;
}

#topnav .topic-menu-summary {
    display: none;
}

#topnav nav {
    counter-reset: topic-item;
}

#topnav nav a::before {
    counter-increment: topic-item;
    content: counter(topic-item) ". ";
    color: var(--ink-soft, var(--muted, #a9b8c5));
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
    margin-right: 2px;
    opacity: 0.85;
}

#topnav nav a.is-active::before {
    color: var(--accent, var(--orange, var(--cargo, #ff7657)));
}

#topnav nav a.is-active {
    color: var(--accent, var(--orange, var(--cargo, #ff7657)));
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 960px) {
    #topnav .wrap {
        height: auto;
        min-height: auto;
        padding: 0 16px;
        display: block;
    }

    #topnav .brand {
        display: none;
    }

    #topnav .topic-menu-panel {
        display: block;
        width: 100%;
    }

    #topnav .topic-menu-panel[open] {
        padding-bottom: 8px;
    }

    #topnav .topic-menu-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 13px 0;
        margin: 0;
        cursor: pointer;
        list-style: none;
        user-select: none;
        color: var(--accent, var(--orange, var(--cargo, #ff7657)));
        font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    #topnav .topic-menu-summary::-webkit-details-marker {
        display: none;
    }

    #topnav .topic-menu-summary::after {
        content: "\25BE";
        color: var(--accent, var(--orange, var(--cargo, #ff7657)));
        font-size: 14px;
        margin-left: 8px;
        transition: transform 0.2s ease;
    }

    #topnav .topic-menu-panel[open] > .topic-menu-summary::after {
        transform: rotate(180deg);
    }

    #topnav nav {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 3px;
        max-height: min(60vh, 420px);
        overflow-y: auto;
        padding: 6px 0 10px;
        border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    }

    #topnav nav::-webkit-scrollbar {
        width: 4px;
    }

    #topnav nav::-webkit-scrollbar-thumb {
        background: var(--line, #3b3d3f);
        border-radius: 4px;
    }

    #topnav nav a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
        padding: 8px 12px;
        border-radius: 6px;
        border-left: 2px solid transparent;
        color: var(--ink-soft, var(--muted, #a9b8c5));
        white-space: normal;
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    #topnav nav a:hover,
    #topnav nav a.is-active {
        color: var(--ink, var(--text, #fff));
        background: rgba(255, 255, 255, 0.06);
        border-left-color: var(--accent, var(--orange, var(--cargo, #ff7657)));
    }
}

@media (max-width: 760px) {
    body.docker-guide table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    body.docker-guide .flip {
        grid-template-columns: minmax(0, 1fr);
    }

    body.docker-guide .fc {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    body.docker-guide .decode dt {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media print {

    body.scaler-guide,
    body.docker-guide {
        color-scheme: light;
    }
}

/* Override container width to match techtoday index.html layout */
.wrap,
body.docker-guide main,
body.docker-guide .hero-wrap,
body.docker-guide .route-inner {
    width: 90% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
}

body.docker-guide .content, body.scaler-guide .content {
    width: 100% !important;
    max-width: 100% !important;
}

/* Prevent horizontal scroll issues across all AI guides */
html, body {
    overflow-x: clip;
}

main, .wrap, .wrap > *, .content > *, .code, pre, .runbox, svg {
    min-width: 0;
    max-width: 100vw;
}