/* fullstack theme.css — Full Stack instance overrides.
 *
 * Layered AFTER shared.css + course-template.css (CONTRACTS §2.2). Provides the
 * SAME renderer-element styling contract as the finance theme (prose, info-box
 * variants, widget frame, the visible .render-error box, header polish) so the
 * data-driven engine renders ported fullstack courses identically — only the
 * instance ACCENT differs (cyan, matching instance.json branding.accent).
 * It does not touch the engine files' internals.
 */

/* Instance accent override — fullstack runs a cyan accent (instance.json
   branding.accent = #22d3ee). The engine course vars live in
   course-template.css; we override only the accent so widgets/links pick it up
   without forking the engine CSS. */
:root {
    --course-accent: #22d3ee;
    --accent: #22d3ee;
}

/* ---------------------------------------------------------------------------
   Prose
   --------------------------------------------------------------------------- */
.prose {
    max-width: var(--content-max-width);
    color: var(--course-text-primary);
}

.prose p {
    margin-bottom: 1.25rem;
}

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

/* ---------------------------------------------------------------------------
   Info boxes — base + per-variant accents
   The renderer emits:
     <div class="info-box info-box--<variant>">
       <strong class="info-box__label">Label</strong>
       <div class="info-box__body">…html…</div>
     </div>
   --------------------------------------------------------------------------- */
.info-box__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

.info-box__body {
    color: var(--course-text-secondary);
    line-height: 1.6;
}

.info-box__body pre {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--course-bg-code);
    border: 1px solid var(--course-border);
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--course-text-primary);
    white-space: pre;
}

.info-box__body ul {
    margin: 0;
    padding-left: 1.2rem;
}

.info-box__body ul li {
    margin-bottom: 0.5rem;
}

/* Intuition — accent green (default house accent) */
.info-box--intuition {
    border-left-color: var(--course-accent-secondary);
    background: linear-gradient(135deg, rgba(0, 204, 51, 0.08), transparent);
}
.info-box--intuition .info-box__label { color: var(--course-accent-secondary); }

/* Formula — purple */
.info-box--formula {
    border-left-color: var(--course-accent-purple);
    background: linear-gradient(135deg, rgba(163, 113, 247, 0.08), transparent);
}
.info-box--formula .info-box__label { color: var(--course-accent-purple); }

/* Example — neutral / cyan-ish, leans on the secondary accent */
.info-box--example {
    border-left-color: #38bdf8;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.07), transparent);
}
.info-box--example .info-box__label { color: #38bdf8; }

/* Pitfall — warning orange/red */
.info-box--pitfall {
    border-left-color: var(--course-accent-orange);
    background: linear-gradient(135deg, rgba(210, 153, 34, 0.09), transparent);
}
.info-box--pitfall .info-box__label { color: var(--course-accent-orange); }

/* Note — muted */
.info-box--note {
    border-left-color: var(--course-text-muted);
    background: linear-gradient(135deg, rgba(160, 160, 184, 0.06), transparent);
}
.info-box--note .info-box__label { color: var(--course-text-secondary); }

/* ---------------------------------------------------------------------------
   Widgets — frame + per-mount surface
   --------------------------------------------------------------------------- */
.widget-mount {
    /* Widgets fill this; scoped entirely to themselves (CONTRACTS §3.2). */
    min-height: 1px;
}

.widget-mount input,
.widget-mount label {
    font-family: inherit;
}

.widget-mount .widget-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.widget-mount .widget-result {
    margin-top: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--course-accent);
    font-size: 1.1rem;
}

/* ---------------------------------------------------------------------------
   Quiz teaching note (drill blocks carry a section-level explanation)
   --------------------------------------------------------------------------- */
.quiz-teaching-note {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--course-text-muted);
    border-top: 1px dashed var(--course-border);
    padding-top: 0.6rem;
}

/* ---------------------------------------------------------------------------
   Visible error box — unknown block type / missing widget / widget throw /
   load failures. Never a silent skip (CONTRACTS §6).
   --------------------------------------------------------------------------- */
.render-error {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    background: rgba(248, 81, 73, 0.08);
    border: 1px solid var(--course-accent-red);
    border-left-width: 3px;
    border-radius: 6px;
    color: var(--course-accent-red);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------------------------------------------------------------------------
   Course header
   --------------------------------------------------------------------------- */
/* The instance tagline (#instance-tagline carries class="tagline"); target the
   class so it survives the shell's instance-vs-course id split. */
.header-brand .tagline {
    color: var(--course-text-secondary);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

/* Per-course name line under the instance brand (empty/hidden for single-course
   instances like finance; app.js sets display:none when there is nothing to show). */
.header-brand .course-name {
    color: var(--course-text-muted);
    font-size: 0.8rem;
    margin: 0.2rem 0 0;
}

#version-number {
    color: var(--course-text-muted);
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
}

/* ---------------------------------------------------------------------------
   sec-expr-tree widget (Binary & Hex bit/expression-tree builder).
   Ported from the legacy security course styles (courses/security/css/styles.css)
   — the class names in widgets.js (.expr-tree-widget, .expr-bit, …) match the
   legacy markup verbatim, but the styling was never carried into the instance
   theme during the denominator cutover, so the widget rendered unstyled.
   --------------------------------------------------------------------------- */
.expr-widget,
.expr-tree-widget {
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    max-width: 100%;
}

.expr-tree-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.expr-tree-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.expr-node {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.expr-value-node,
.expr-op-node {
    border: 2px solid var(--course-accent);
    border-radius: 4px;
    padding: 10px;
    background: var(--course-bg-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.expr-op-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.expr-op-select {
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-accent);
    color: var(--course-accent);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
}

.expr-op-param {
    width: 40px;
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-accent);
    color: var(--course-accent);
    padding: 4px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
}

.expr-bits-row {
    display: flex;
    gap: 2px;
}

.expr-bit {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.1s;
    border: none;
}

.expr-bit:hover { transform: scale(1.1); }

.expr-bit.on {
    background: var(--course-accent);
    color: var(--course-bg-primary);
}

.expr-bit.off {
    background: var(--course-bg-secondary);
    color: var(--course-text-secondary);
    border: 1px solid var(--course-border);
}

.expr-bit.readonly {
    cursor: default;
    opacity: 0.6;
}

.expr-bit.readonly:hover { transform: none; }

.expr-bit.sign-bit { background: #b91c1c !important; }

.expr-bit.sign-bit.off {
    background: #7f1d1d !important;
    border-color: #991b1b;
}

.expr-powers-row {
    display: flex;
    gap: 2px;
}

.expr-power {
    width: 24px;
    text-align: center;
    font-size: 10px;
    color: var(--course-text-secondary);
}

.expr-value-display {
    font-size: 12px;
    color: var(--course-text-secondary);
}

.expr-value-display input {
    width: 50px;
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-border);
    color: var(--course-accent);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
}

.expr-operands {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.expr-btn {
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-accent);
    color: var(--course-accent);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.expr-btn:hover {
    background: var(--course-bg-card);
    box-shadow: 0 0 10px var(--course-accent);
}

.expr-result-section {
    border-top: 1px dashed var(--course-border);
    padding-top: 10px;
    margin-top: 5px;
}

.expr-result-section .expr-value-display { margin-top: 8px; }

.expr-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
   Remaining security widgets — sec-live-hash, sec-avalanche, sec-sha-internals,
   sec-gf-multiply. These were rewritten with new class names during the
   denominator cutover, so the legacy stylesheet no longer matched them. Authored
   fresh against the current widgets.js markup, reusing the legacy design values
   and the shared course tokens. Every rule is scoped under its widget root so
   shared inner class names (.hash-label, .bit-cell, .gf-hex …) can't collide.
   --------------------------------------------------------------------------- */

/* sec-live-hash */
.sec-hash-widget {
    background: var(--course-bg-code);
    border: 1px solid var(--course-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.sec-hash-widget .hash-label {
    display: block;
    font-size: 0.8rem;
    color: var(--course-text-secondary);
    margin-bottom: 1rem;
}

.sec-hash-widget .hash-input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-border);
    border-radius: 4px;
    color: var(--course-text-primary);
}

.sec-hash-widget .hash-input:focus {
    outline: none;
    border-color: var(--course-accent-secondary);
}

.sec-hash-widget .hash-info {
    font-size: 0.75rem;
    color: var(--course-text-secondary);
    margin-bottom: 1rem;
}

.sec-hash-widget .hash-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    align-items: flex-start;
}

.sec-hash-widget .hash-algo {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--course-accent-secondary);
    width: 60px;
    flex-shrink: 0;
}

.sec-hash-widget .hash-out {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--course-accent);
    word-break: break-all;
    flex: 1;
}

/* sec-avalanche */
.sec-avalanche-widget {
    background: var(--course-bg-code);
    border: 1px solid var(--course-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.sec-avalanche-widget .avalanche-inputs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.sec-avalanche-widget .avalanche-inputs label {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--course-text-secondary);
}

.sec-avalanche-widget .avalanche-inputs input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-border);
    border-radius: 4px;
    color: var(--course-text-primary);
}

.sec-avalanche-widget .avalanche-inputs input:focus {
    outline: none;
    border-color: var(--course-accent-secondary);
}

.sec-avalanche-widget .avalanche-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.sec-avalanche-widget .avalanche-controls button {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-border);
    border-radius: 4px;
    color: var(--course-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.sec-avalanche-widget .avalanche-controls button:hover {
    border-color: var(--course-accent-secondary);
    color: var(--course-text-primary);
}

.sec-avalanche-widget .avalanche-hashes {
    margin-bottom: 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.sec-avalanche-widget .avalanche-hashes > div {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    align-items: baseline;
}

.sec-avalanche-widget .av-tag {
    color: var(--course-text-secondary);
    width: 4rem;
    flex-shrink: 0;
}

.sec-avalanche-widget .av-ha,
.sec-avalanche-widget .av-hb {
    color: var(--course-text-primary);
    word-break: break-all;
}

.sec-avalanche-widget .avalanche-stats {
    text-align: center;
    font-size: 0.85rem;
    color: var(--course-text-secondary);
    margin-bottom: 1rem;
}

.sec-avalanche-widget .av-changed,
.sec-avalanche-widget .av-pct {
    color: var(--course-accent-secondary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.sec-avalanche-widget .avalanche-bits {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin-bottom: 1rem;
    justify-content: center;
}

.sec-avalanche-widget .bit-cell {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--course-bg-code);
}

.sec-avalanche-widget .bit-cell.changed { background: #ff6b6b; }
.sec-avalanche-widget .bit-cell.same { background: var(--course-accent); opacity: 0.3; }

.sec-avalanche-widget .avalanche-insight {
    font-size: 0.85rem;
    color: var(--course-text-secondary);
    text-align: center;
    font-style: italic;
    min-height: 1.2em;
}

.sec-avalanche-widget .avalanche-insight.perfect { color: var(--course-accent); }
.sec-avalanche-widget .avalanche-insight.warning { color: #ffaa00; }

/* sec-sha-internals */
.sec-sha-widget {
    background: var(--course-bg-code);
    border: 1px solid var(--course-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.sec-sha-widget .sha-label {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--course-text-secondary);
}

.sec-sha-widget .sha-input {
    flex: 1;
    padding: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-border);
    border-radius: 4px;
    color: var(--course-text-primary);
}

.sec-sha-widget .sha-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.sec-sha-widget .sha-controls button {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-accent);
    border-radius: 4px;
    color: var(--course-accent);
    cursor: pointer;
    transition: all 0.15s;
}

.sec-sha-widget .sha-controls button:hover {
    background: var(--course-accent);
    color: var(--course-bg-primary);
}

.sec-sha-widget .sha-round {
    font-size: 0.85rem;
    color: var(--course-accent-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.sec-sha-widget .sha-regs {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.sec-sha-widget .sha-reg {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    background: var(--course-bg-primary);
    border-radius: 4px;
    border: 1px solid var(--course-border);
    transition: all 0.2s;
}

.sec-sha-widget .sha-reg.changed {
    border-color: var(--course-accent);
    background: rgba(0, 255, 65, 0.1);
}

.sec-sha-widget .reg-label {
    font-size: 0.7rem;
    color: var(--course-accent-secondary);
    font-weight: 600;
}

.sec-sha-widget .reg-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: var(--course-text-primary);
    word-break: break-all;
    text-align: center;
}

.sec-sha-widget .sha-final {
    text-align: center;
    padding: 1rem;
    background: rgba(0, 255, 65, 0.1);
    border: 1px solid var(--course-accent);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--course-accent);
}

.sec-sha-widget .sha-final-hash {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--course-text-primary);
    word-break: break-all;
}

/* sec-gf-multiply */
.sec-gf-widget {
    background: var(--course-bg-code);
    border: 1px solid var(--course-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
}

.sec-gf-widget .gf-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.sec-gf-widget .gf-inputs label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--course-text-secondary);
}

.sec-gf-widget .gf-inputs input {
    width: 80px;
    padding: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    text-align: center;
    background: var(--course-bg-secondary);
    border: 1px solid var(--course-border);
    border-radius: 4px;
    color: var(--course-text-primary);
}

.sec-gf-widget .gf-inputs input:focus {
    outline: none;
    border-color: var(--course-accent-secondary);
}

.sec-gf-widget .gf-times {
    font-size: 1.5rem;
    color: var(--course-accent-secondary);
    font-weight: 600;
}

.sec-gf-widget .gf-poly {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--course-text-secondary);
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.sec-gf-widget .gf-poly-a,
.sec-gf-widget .gf-poly-b { color: var(--course-text-primary); }

.sec-gf-widget .gf-hex-a,
.sec-gf-widget .gf-hex-b { color: var(--course-accent); }

.sec-gf-widget .gf-steps {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    margin-bottom: 1.25rem;
}

.sec-gf-widget .gf-steps th {
    padding: 0.5rem 0.6rem;
    text-align: left;
    color: var(--course-text-secondary);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--course-border);
    white-space: nowrap;
}

.sec-gf-widget .gf-steps td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--course-text-primary);
    white-space: nowrap;
}

.sec-gf-widget .gf-hex { color: var(--course-accent); }

.sec-gf-widget .gf-bin {
    color: var(--course-text-secondary);
    font-size: 0.7rem;
    margin-left: 0.35rem;
}

.sec-gf-widget .gf-row-active { background: rgba(0, 255, 65, 0.08); }
.sec-gf-widget .gf-row-reduced { background: rgba(255, 100, 100, 0.08); }

.sec-gf-widget .gf-row-active.gf-row-reduced {
    background: linear-gradient(90deg, rgba(0, 255, 65, 0.08), rgba(255, 100, 100, 0.08));
}

.sec-gf-widget .gf-yes { color: var(--course-accent); font-weight: 600; }
.sec-gf-widget .gf-no { color: var(--course-text-secondary); opacity: 0.5; }
.sec-gf-widget .gf-reduction { color: #ff7b9c; font-weight: 600; }

.sec-gf-widget .gf-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 255, 65, 0.08);
    border: 1px solid rgba(0, 255, 65, 0.2);
    border-radius: 6px;
    flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--course-text-secondary);
}

.sec-gf-widget .gf-result-dec {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--course-text-primary);
}

.sec-gf-widget .gf-result-hex { font-size: 1rem; color: var(--course-accent); }
.sec-gf-widget .gf-result-poly { color: var(--course-text-secondary); }

/* ============================================================================
   PORTED from the legacy security course (css/styles.css). The denominator
   migration carried the bespoke section HTML (language tabs, static code
   panels, SHA/AES diagram hotspots) but dropped the CSS that styled it and the
   JS that wired it — see widgets/security/code-decorations.js for the JS half.
   These classes are used by the cryptography + application-security courses.
   ============================================================================ */
:root {
    --syntax-keyword: #ff7b9c;
    --syntax-string: #98d8a0;
    --syntax-function: #7dd3fc;
    --syntax-comment: #6a6a7a;
    --syntax-number: #fbbf24;
}

/* --- language tabs + code panels --- */
.lang-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--course-border); margin-top: 1rem; }
.lang-tab {
    padding: 0.6rem 1.2rem; background: transparent; border: none;
    color: var(--course-text-secondary); font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem; font-weight: 500; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s;
}
.lang-tab:hover { color: var(--course-text-primary); }
.lang-tab.active { color: var(--course-text-primary); border-bottom-color: var(--course-accent); }
.lang-tab[data-lang="javascript"].active { border-bottom-color: #f7df1e; }
.lang-tab[data-lang="python"].active { border-bottom-color: #3776ab; }
.lang-tab[data-lang="go"].active { border-bottom-color: #00add8; }
.lang-tab[data-lang="rust"].active { border-bottom-color: #dea584; }
.code-panel { display: none; }
.code-panel.active { display: block; }

/* --- code containers / headers / static code --- */
.code-container { background: var(--course-bg-code); border: 1px solid var(--course-border); border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; }
.code-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; border-bottom: 1px solid var(--course-border); font-size: 0.75rem; color: var(--course-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.static-label { background: rgba(255,255,255,0.08); padding: 0.2rem 0.5rem; border-radius: 3px; font-size: 0.65rem; }
.run-btn { background: var(--course-accent); color: var(--course-bg-primary); border: none; padding: 0.4rem 1rem; border-radius: 4px; font-weight: 600; font-size: 0.75rem; cursor: pointer; }
.run-btn:hover { filter: brightness(1.1); }
.code-wrapper { position: relative; }
.code-static { padding: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.6; white-space: pre; overflow: auto; max-height: 520px; margin: 0; }

/* --- syntax highlighting tokens --- */
.syntax-keyword { color: var(--syntax-keyword); }
.syntax-string  { color: var(--syntax-string); }
.syntax-function{ color: var(--syntax-function); }
.syntax-comment { color: var(--syntax-comment); font-style: italic; }
.syntax-number  { color: var(--syntax-number); }

/* --- code info tooltips (click-to-reveal) --- */
.code-info-tooltip { display: none; position: fixed; background: var(--course-bg-primary); border: 1px solid var(--course-accent-secondary); border-radius: 6px; padding: 0.75rem 1rem; width: 300px; max-width: 90vw; font-size: 0.8rem; color: var(--course-text-secondary); line-height: 1.5; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }
.code-info-tooltip.active { display: block; animation: tooltipFadeIn 0.15s ease; }
@keyframes tooltipFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.code-info-tooltip strong { color: var(--course-accent-secondary); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.code-info-tooltip p { margin: 0.4rem 0 0 0; }
.code-info-tooltip code { background: rgba(0,255,65,0.1); padding: 0.1rem 0.25rem; border-radius: 3px; }

/* --- run output --- */
.output-container { border-top: 1px solid var(--course-border); }
.output-header { padding: 0.5rem 1rem; font-size: 0.75rem; color: var(--course-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--course-border); }
.output { padding: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.6; color: var(--course-accent); min-height: 80px; white-space: pre-wrap; }
.output-line { padding: 1px 4px; margin: 0 -4px; border-radius: 3px; transition: background 0.15s; }
.output-line.highlighted { background: rgba(0,255,65,0.15); }

/* --- SHA / AES diagram + hotspots (transparent Wikipedia SVGs need a light bg) --- */
.sha-split-layout, .aes-split-layout { display: grid; grid-template-columns: 2fr 3fr; gap: 1.5rem; margin: 1.5rem 0; }
@media (max-width: 720px) { .sha-split-layout, .aes-split-layout { grid-template-columns: 1fr; } }
.sha-split-layout .sha-diagram-container, .aes-split-layout .aes-diagram-container { margin: 0; position: sticky; top: 1rem; align-self: start; }
.sha-split-layout .sha-code-side, .aes-split-layout .aes-code-side { min-width: 0; }

.sha-diagram-container { position: relative; margin: 1.5rem 0; background: #f5f5f5; border-radius: 8px; padding: 1rem; overflow: visible; }
.sha-diagram { width: 100%; max-width: 800px; display: block; margin: 0 auto; }
.sha-diagram-hotspots { position: absolute; top: 1rem; left: 1rem; right: 1rem; bottom: 3rem; overflow: visible; }
.sha-hotspot { position: absolute; width: 28px; height: 28px; background: rgba(0,204,51,0.5); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: rgba(10,10,15,0.8); transition: background 0.3s ease, color 0.3s ease; }
.sha-hotspot:hover { background: rgba(0,204,51,0); color: rgba(10,10,15,0); z-index: 100; }
.sha-hotspot .sha-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.92); color: var(--course-text-primary); padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.8rem; font-weight: 400; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 100; }
.sha-hotspot .sha-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(0,0,0,0.92); }
.sha-hotspot:hover .sha-tooltip { opacity: 1; }
.sha-tooltip strong, .aes-tooltip strong { color: var(--course-accent-secondary); }
.sha-diagram-caption { text-align: center; font-size: 0.8rem; color: #666; margin-top: 0.75rem; }
.sha-diagram-caption a { color: #555; }
.sha-diagram-caption a:hover { color: #222; }
.sha-hotspot.highlighted, .aes-hotspot.highlighted { background: rgba(251,191,36,0.9) !important; color: rgba(10,10,15,1) !important; animation: hotspot-pulse 0.5s ease; }
@keyframes hotspot-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }

.aes-diagram { width: 100%; height: auto; border-radius: 8px; background: #fff; padding: 1rem; }
.aes-diagram-container { position: relative; }
.aes-diagram-hotspots { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.aes-hotspot { position: absolute; width: 24px; height: 24px; background: var(--course-accent-secondary); color: var(--course-bg-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; cursor: pointer; pointer-events: auto; transition: transform 0.2s, background 0.2s; z-index: 10; }
.aes-hotspot:hover { transform: scale(1.2); background: var(--course-accent); }
.aes-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--course-bg-primary); color: var(--course-text-primary); border: 1px solid var(--course-accent-secondary); padding: 0.75rem; border-radius: 6px; font-size: 0.8rem; width: 220px; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 100; }
.aes-hotspot:hover .aes-tooltip { opacity: 1; }
.aes-diagram-caption { text-align: center; font-size: 0.8rem; color: var(--course-text-secondary); margin-top: 0.5rem; }

/* --- live JS code-runner widget (sec-code-runner): styled overlay editor ----
   A transparent textarea over a highlighted <pre>; both must be pixel-identical
   (font/size/line-height/padding/white-space) for the overlay to line up. */
.code-runner { background: var(--course-bg-code); border: 1px solid var(--course-border); border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; }
.code-runner-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--course-border); }
.code-runner-lang { font-size: 0.75rem; color: var(--course-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-right: auto; }
.code-runner-reset { background: transparent; color: var(--course-text-secondary); border: 1px solid var(--course-border); padding: 0.35rem 0.8rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.code-runner-reset:hover { color: var(--course-text-primary); border-color: var(--course-text-secondary); }
.code-runner-wrap { position: relative; height: 460px; }
.code-runner-highlight, .code-runner-editor {
    position: absolute; inset: 0; margin: 0; padding: 1rem; border: 0;
    font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.6;
    white-space: pre; overflow: auto; tab-size: 2; -moz-tab-size: 2;
}
.code-runner-highlight { pointer-events: none; z-index: 1; color: var(--course-text-primary); background: transparent; }
.code-runner-editor { z-index: 2; background: transparent; color: transparent; caret-color: var(--course-text-primary); resize: none; outline: none; }
.code-runner-editor::selection { background: rgba(125, 211, 252, 0.3); }
.code-runner-output-wrap { border-top: 1px solid var(--course-border); }
.code-runner-output-header { padding: 0.5rem 1rem; font-size: 0.75rem; color: var(--course-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--course-border); }
.code-runner-output { margin: 0; padding: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.6; color: var(--course-accent); min-height: 60px; max-height: 240px; overflow: auto; white-space: pre-wrap; }
.code-runner-error { color: var(--course-accent-red); display: block; margin-top: 0.3rem; }
.code-runner-muted { color: var(--course-text-secondary); }
/* When the runner has adopted a tab panel slot, it IS the panel — drop any
   widget-frame chrome so it reads as one container with the other tabs. */
.widget.code-panel { margin: 0; padding: 0; border: 0; background: none; }
.sha-split-layout .code-runner-wrap, .aes-split-layout .code-runner-wrap { height: 560px; }