/* ═══════════════════════════════════════════════════════════
   PNP Compute — reveal.js theme override
   Matches the main site: dark, glass, green accent.
   ═══════════════════════════════════════════════════════════ */

:root {
    --r-bg:        #0b0d12;
    --r-text-1:    #ffffff;
    --r-text-2:    #a0a0ab;
    --r-text-3:    #6b6b76;
    --r-accent:    #34d399;
    --r-accent-2:  #818cf8;
    --r-accent-3:  #c084fc;
    --r-border:    rgba(255,255,255,0.08);
    --r-surface:   rgba(255,255,255,0.03);
}

.reveal {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--r-text-1);
    font-weight: 300;
    background: var(--r-bg);
}

.reveal-viewport {
    background: var(--r-bg) !important;
}

.reveal .slides {
    text-align: left;
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--r-text-1);
    text-transform: none;
    line-height: 1.1;
    margin-bottom: 0.5em;
}
.reveal h1 { font-size: 2.4em; }
.reveal h2 { font-size: 1.6em; }
.reveal h3 { font-size: 1.2em; }
.reveal h4 { font-size: 0.95em; color: var(--r-accent); }

.reveal h1 .highlight,
.reveal h2 .highlight {
    background: linear-gradient(135deg, var(--r-accent), var(--r-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reveal p {
    color: var(--r-text-2);
    font-size: 0.78em;
    line-height: 1.55;
}
.reveal p strong { color: var(--r-text-1); font-weight: 600; }
.reveal em { color: var(--r-text-1); font-style: italic; }

.reveal ul, .reveal ol {
    margin-left: 1em;
    color: var(--r-text-2);
}
.reveal li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}
.reveal li strong { color: var(--r-text-1); }

.reveal a {
    color: var(--r-accent);
    text-decoration: none;
    border-bottom: 1px dashed rgba(52,211,153,0.4);
}

/* tag / label */
.reveal .tag {
    display: inline-block;
    color: var(--r-accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55em;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 4px 12px;
    border: 1px solid rgba(52,211,153,0.3);
    border-radius: 999px;
    background: rgba(52,211,153,0.05);
    margin-bottom: 1em;
}

/* code */
.reveal code {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--r-accent);
    font-size: 0.85em;
}
.reveal pre {
    box-shadow: none;
    background: #0a0a0f;
    border: 1px solid var(--r-border);
    border-radius: 8px;
    padding: 1em 1.2em;
    width: 100%;
    margin: 0.5em 0;
}
.reveal pre code {
    background: transparent;
    color: var(--r-text-2);
    font-size: 0.7em;
    line-height: 1.6;
    padding: 0;
    display: block;
    overflow-x: auto;
    max-height: none;
    white-space: pre;
}

/* tables */
.reveal table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5em 0;
    font-size: 0.7em;
}
.reveal th, .reveal td {
    text-align: left;
    padding: 0.5em 0.8em;
    border: none;
    border-bottom: 1px solid var(--r-border);
}
.reveal th {
    color: var(--r-accent);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75em;
}
.reveal td {
    color: var(--r-text-2);
}
.reveal td:first-child {
    color: var(--r-text-1);
    font-weight: 500;
}

/* glass card inside slide */
.reveal .gcard {
    padding: 0.7em 0.9em;
    background: var(--r-surface);
    border: 1px solid var(--r-border);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}
.reveal .gcard h4 { margin-bottom: 0.3em; }
.reveal .gcard p  { margin: 0; }

/* grid helpers */
.reveal .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8em;
    align-items: start;
}
.reveal .grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.7em;
    align-items: stretch;
}
.reveal .grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.6em;
}

/* big-stat */
.reveal .bigstat {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    color: var(--r-accent);
    line-height: 1;
}
.reveal .bigstat-lbl {
    font-size: 0.5em;
    color: var(--r-text-3);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.3em;
    font-family: 'Inter', sans-serif;
}

/* ascii art / diagram block */
.reveal .ascii {
    font-family: 'JetBrains Mono', monospace;
    color: var(--r-accent);
    font-size: 0.55em;
    line-height: 1.5;
    white-space: pre;
    background: rgba(52,211,153,0.04);
    border: 1px solid rgba(52,211,153,0.15);
    border-radius: 8px;
    padding: 1em;
}

/* progress bar */
.reveal .progress {
    color: var(--r-accent) !important;
    height: 3px;
}

/* controls */
.reveal .controls {
    color: var(--r-accent);
}

/* slide-number bottom-right */
.reveal .slide-number {
    background: rgba(5,5,7,0.6);
    color: var(--r-text-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65em;
    border-radius: 6px;
}

/* footer brand on each slide */
.reveal .slide-footer {
    position: absolute;
    bottom: 24px;
    left: 32px;
    color: var(--r-text-3);
    font-size: 0.5em;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}

/* hero slide */
.reveal .hero-slide h1 {
    font-size: 2.6em;
    line-height: 1.05;
}
.reveal .hero-slide .sub {
    color: var(--r-text-2);
    font-size: 0.78em;
    max-width: 640px;
    margin-top: 0.6em;
    font-weight: 300;
    line-height: 1.55;
}

/* quote */
.reveal .pull {
    border-left: 3px solid var(--r-accent);
    padding: 0.4em 0.9em;
    background: rgba(52,211,153,0.04);
    font-family: 'Outfit', sans-serif;
    font-style: italic;
    font-size: 0.82em;
    color: var(--r-text-1);
    line-height: 1.45;
    border-radius: 0 8px 8px 0;
    margin: 0.5em 0;
}

/* fragment fade */
.reveal .fragment.highlight-accent.visible { color: var(--r-accent); }

/* ── Responsive: small viewports (phones / narrow windows) ── */
@media (max-width: 700px) {
    .reveal h1 { font-size: 1.7em; }
    .reveal h2 { font-size: 1.3em; }
    .reveal h3 { font-size: 1.05em; }
    .reveal .hero-slide h1 { font-size: 1.9em; }
    .reveal .hero-slide .sub { font-size: 0.7em; margin-top: 0.4em; }
    .reveal .tag { font-size: 0.4em; letter-spacing: 1.5px; padding: 3px 9px; }
    .reveal .grid-2,
    .reveal .grid-3,
    .reveal .grid-4 { grid-template-columns: 1fr; gap: 0.5em; }
    .reveal .bigstat { font-size: 1.5em; }
    .reveal pre code { font-size: 0.5em; }
    .reveal p { font-size: 0.72em; }
    .reveal .pull { font-size: 0.72em; }
    .reveal .gcard { padding: 0.5em 0.7em; }
    .reveal .slide-footer { font-size: 0.4em; bottom: 12px; left: 16px; }
}

/* ── Responsive: medium viewports (tablets portrait) ── */
@media (min-width: 701px) and (max-width: 1024px) {
    .reveal h1 { font-size: 2em; }
    .reveal h2 { font-size: 1.45em; }
    .reveal .hero-slide h1 { font-size: 2.2em; }
    .reveal .grid-3 { grid-template-columns: 1fr 1fr; }
    .reveal .grid-4 { grid-template-columns: 1fr 1fr; gap: 0.5em; }
}

/* print-pdf helper — keep dark bg */
@media print {
    .reveal-viewport, .reveal { background: var(--r-bg) !important; }
}

/* ── Deck topbar (consistent brand header on slide decks) ── */
.deck-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    height: 44px; padding: 0 20px;
    background: rgba(5,5,7,0.85); backdrop-filter: blur(8px);
    font-family: 'Outfit', 'Inter', sans-serif;
}
.deck-topbar a { text-decoration: none; }
.deck-brand { font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -0.4px; }
.deck-back { font-size: 13px; color: var(--r-accent); }
.deck-topbar + .reveal { padding-top: 44px; }