/* ------------------------------------------------------------------ *
 * go_learn.css
 * Copy buttons, "Explain it" Feynman prompts, and complete-the-code
 * exercises for the Basic Go tutorial page. Layered on top of
 * basic-go.css (teal accents, #f0f9ff page).
 * ------------------------------------------------------------------ */

/* ---- Copy button on every code block ---------------------------- */
.go-code-wrap { position: relative; }

.go-copy {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    font: 600 0.72rem/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.02em;
    color: #ecfeff;
    background: #0e7490;
    border: 1px solid #22a3c3;
    border-radius: 6px;
    padding: 0.34rem 0.62rem;
    cursor: pointer;
    opacity: 0.82;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    z-index: 2;
}
.go-code-wrap:hover .go-copy,
.go-copy:focus-visible { opacity: 1; }
.go-copy:hover { background: #0891b2; color: #fff; }
.go-copy.done { background: #059669; border-color: #059669; color: #fff; opacity: 1; }

/* ---- "How to use this page" — Feynman method intro -------------- */
.go-method {
    margin: 1.5rem 0;
    border: 1px solid #a5f3fc;
    border-left: 5px solid #0891b2;
    border-radius: 10px;
    background: #ecfeff;
    padding: 1rem 1.25rem 1.1rem;
}
.go-method h2 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    color: #0e7490;
}
.go-method ol { margin: 0.4rem 0 0; padding-left: 1.3rem; }
.go-method li { margin: 0.3rem 0; }

/* ---- Complete-the-code exercise --------------------------------- */
.go-ex {
    margin: 1.25rem 0 0.5rem;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.85rem 1rem 1rem;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.06);
}
.go-ex-label,
.go-out-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font: 700 0.72rem/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0369a1;
    margin: 0 0 0.4rem;
}
.go-ex-label::before { content: "\270E"; font-size: 0.95em; }   /* ✎ pencil */
.go-ex-task { margin: 0 0 0.55rem; font-size: 0.95rem; }
.go-ex-task strong { color: #0e7490; }

.go-out-label { color: #047857; margin-top: 0.85rem; }
.go-out-label::before { content: "\2192"; }                     /* → */

pre.go-output {
    background: #0b1120;
    color: #d1fae5;
    border-left: 3px solid #10b981;
    white-space: pre-wrap;
    margin: 0;
}

/* ---- Reveal-the-solution disclosure ----------------------------- */
details.go-solution {
    margin-top: 0.85rem;
    border-top: 1px dashed #cbd5e1;
    padding-top: 0.7rem;
}
details.go-solution > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: 700 0.8rem/1 Inter, system-ui, sans-serif;
    color: #0e7490;
    list-style: none;
    user-select: none;
    padding: 0.3rem 0;
}
details.go-solution > summary::-webkit-details-marker { display: none; }
details.go-solution > summary::before {
    content: "\25B6";                                           /* ▶ */
    font-size: 0.7em;
    transition: transform 0.15s;
}
details.go-solution[open] > summary::before { transform: rotate(90deg); }
details.go-solution > summary:hover { color: #0891b2; }

/* ---- Feynman "explain it simply" prompt ------------------------- */
.go-feynman {
    margin: 1.1rem 0 0.5rem;
    border: 1px solid #ddd6fe;
    border-left: 5px solid #7c3aed;
    border-radius: 10px;
    background: #f5f3ff;
    padding: 0.85rem 1rem 0.9rem;
}
.go-fey-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font: 700 0.72rem/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6d28d9;
    margin: 0 0 0.4rem;
}
.go-fey-label::before { content: "\1F4A1"; }                    /* 💡 */
.go-feynman p { margin: 0.35rem 0; }
.go-fey-q { font-weight: 600; color: #4c1d95; }

details.go-feynman-a { margin-top: 0.5rem; }
details.go-feynman-a > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: 700 0.78rem/1 Inter, system-ui, sans-serif;
    color: #6d28d9;
    list-style: none;
    user-select: none;
    padding: 0.25rem 0;
}
details.go-feynman-a > summary::-webkit-details-marker { display: none; }
details.go-feynman-a > summary::before {
    content: "\25B6";
    font-size: 0.7em;
    transition: transform 0.15s;
}
details.go-feynman-a[open] > summary::before { transform: rotate(90deg); }
details.go-feynman-a > p {
    margin-top: 0.5rem;
    background: #ffffff;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    font-size: 0.93rem;
}

/* Keep basic-go's top margin off the exercise's own <pre> */
.go-ex .go-code-wrap pre,
.go-ex > pre { margin-top: 0.15rem; }