/*
 * computePiStyles.css
 * TNT | Spock's Pi Gambit — Compute Pi App
 * Created: 2026-07-24
 * Palette: deep space blue-black, Federation gold (#C8A84B), science blue (#4EA2B2)
 * Mirrors the Star Trek aesthetic of spockPIclip.html.
 */

:root {
    --pi-gold:       #C8A84B;
    --pi-gold-faint: rgba(200,168,75,0.12);
    --pi-blue:       #4EA2B2;
    --pi-blue-faint: rgba(78,162,178,0.12);
    --pi-dark:       #060a1a;
    --pi-card:       #0a0f1e;
}

/* ══════════════════════════════════════════
   HERO
   Background image path: ../../images/ (from styles/ subfolder)
══════════════════════════════════════════ */
#hero {
    min-height: 32vh;
    background:
        linear-gradient(135deg, rgba(5,8,22,0.86) 0%, rgba(10,14,38,0.72) 100%),
        url('../../images/kirkSpockBridge.jpg') center 20% / cover no-repeat;
    padding: 3.5rem 1rem 2.5rem;
    background-color: var(--pi-dark);
}

/* ══════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════ */
body {
    background: var(--pi-dark);
    color: rgba(255,255,255,0.85);
}

#appSection {
    background: linear-gradient(180deg, var(--pi-dark) 0%, #000 100%);
    padding: 2.5rem 1rem 4rem;
}

/* ══════════════════════════════════════════
   ABOUT / DETAILS PANEL
══════════════════════════════════════════ */
details.about-panel {
    background: var(--pi-card);
    border: 1px solid rgba(200,168,75,0.22);
    border-radius: 8px;
    padding: 0.8rem 1.2rem;
    margin-bottom: 1.5rem;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

details.about-panel summary {
    cursor: pointer;
    font-style: italic;
    font-weight: 600;
    color: var(--pi-gold);
    font-size: 0.95rem;
    list-style: none;
}

details.about-panel summary::before {
    content: '▶ ';
    font-size: 0.7em;
    opacity: 0.7;
}

details.about-panel[open] summary::before {
    content: '▼ ';
}

details.about-panel .about-body {
    padding-top: 0.75rem;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.65;
}

details.about-panel .about-body a {
    color: var(--pi-gold);
    font-weight: 600;
}

/* ══════════════════════════════════════════
   APP CARD  (wraps canvas + controls)
══════════════════════════════════════════ */
.pi-app-card {
    background: var(--pi-card);
    border: 1px solid rgba(200,168,75,0.18);
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.55);
}

/* ══════════════════════════════════════════
   CANVAS CONTAINER
══════════════════════════════════════════ */
#piCanvas {
    width: 100%;
    border: 2px solid rgba(200,168,75,0.35);
    border-radius: 6px;
    overflow: hidden;
    background: #060a1a;
    box-shadow: 0 0 20px rgba(200,168,75,0.15);
    margin-bottom: 1.25rem;
}

#piCanvas canvas {
    display: block;
    width: 100% !important;
}

/* ══════════════════════════════════════════
   SLIDER
══════════════════════════════════════════ */
.slider-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.slider-label {
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
    color: var(--pi-gold);
    white-space: nowrap;
    min-width: 100px;
}

#termsSlider {
    flex: 1;
    min-width: 160px;
    accent-color: var(--pi-gold);
    height: 6px;
    cursor: pointer;
}

.slider-value {
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    color: var(--pi-gold);
    min-width: 60px;
    text-align: right;
}

/* ══════════════════════════════════════════
   MATH BEHIND THE PI  (results panel)
══════════════════════════════════════════ */
.math-panel-wrapper {
    background: var(--pi-gold-faint);
    border: 1px solid rgba(200,168,75,0.28);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin-top: 1rem;
}

.math-panel-wrapper summary {
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--pi-gold);
    list-style: none;
}

.math-panel-wrapper summary::before {
    content: '▶ ';
    font-size: 0.7em;
    opacity: 0.7;
}

.math-panel-wrapper[open] summary::before {
    content: '▼ ';
}

#mathResults {
    padding-top: 0.75rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.8;
}

#mathResults .label  { color: var(--pi-gold); display: inline-block; min-width: 160px; }
#mathResults .value  { color: var(--pi-blue); }
#mathResults .error  { color: #E74C3C; }
#mathResults .target { color: #00c840; }

/* ══════════════════════════════════════════
   LINK BAR
══════════════════════════════════════════ */
.link-bar {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.55);
}

.link-bar a {
    color: var(--pi-gold);
    font-weight: 600;
    text-decoration: none;
}

.link-bar a:hover {
    text-decoration: underline;
    color: #fff;
}

/* ══════════════════════════════════════════
   TUTORIAL PAGE (computePiSeries.html)
   — additional styles
══════════════════════════════════════════ */
.lesson-section {
    background: var(--pi-card);
    border: 1px solid rgba(200,168,75,0.15);
    border-radius: 10px;
    padding: 1.75rem 2rem;
    margin: 1.5rem auto;
    max-width: 860px;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
}

.lesson-section h2 {
    font-family: 'Boogaloo', cursive;
    font-size: 1.6rem;
    color: var(--pi-gold);
    margin-bottom: 1rem;
}

.lesson-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pi-blue);
    margin: 1.25rem 0 0.5rem;
}

.lesson-section p { font-size: 0.95rem; }

/* Formula box — for displaying the series */
.formula-box {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    text-align: center;
    padding: 1rem 2rem;
    background: var(--pi-gold-faint);
    border: 1px solid rgba(200,168,75,0.30);
    border-radius: 8px;
    margin: 1.25rem auto;
    max-width: 580px;
    color: rgba(255,255,255,0.9);
    line-height: 1.9;
}

.formula-box .pi-symbol { font-size: 1.3em; color: var(--pi-gold); }
.formula-box .sigma    { font-size: 1.5em; color: var(--pi-gold); vertical-align: middle; }
.formula-box .frac     { display: inline-block; vertical-align: middle; text-align: center; }
.formula-box .frac .num, .formula-box .frac .den { display: block; }
.formula-box .frac .num { border-bottom: 1px solid rgba(255,255,255,0.6); padding-bottom: 1px; }

/* Code block */
.code-block {
    background: #0a0f1e;
    border: 1px solid rgba(78,162,178,0.3);
    border-left: 4px solid var(--pi-blue);
    border-radius: 0 6px 6px 0;
    padding: 1rem 1.2rem;
    font-family: 'Courier New', monospace;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.85);
    overflow-x: auto;
    margin: 1rem 0;
    line-height: 1.7;
}

.code-block .kw   { color: #C792EA; }   /* keywords */
.code-block .num  { color: #F78C6C; }   /* numbers  */
.code-block .str  { color: #C3E88D; }   /* strings  */
.code-block .cmt  { color: rgba(255,255,255,0.4); font-style: italic; }
.code-block .fn   { color: #82AAFF; }   /* function names */
.code-block .ann  { color: var(--pi-gold); font-weight: bold; }  /* annotations */

/* Callout (tip/note boxes) */
.callout {
    background: var(--pi-blue-faint);
    border-left: 4px solid var(--pi-blue);
    border-radius: 0 6px 6px 0;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.80);
}

.callout strong { color: var(--pi-blue); }

/* Discussion questions */
.discussion-box {
    background: rgba(123,94,167,0.12);
    border: 1px solid rgba(123,94,167,0.35);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.78);
}

.discussion-box .discussion-label {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #9B7FCC;
    margin-bottom: 0.5rem;
}