/*
 * SISO Institute – Unified styles (light theme)
 * Copyright (c) 2025-2026 Jonathan Bailey
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-deep:    #ffffff;
  --bg-mid:     #f8f9fb;
  --bg-surface: #f1f3f6;
  --border:     #d8dde5;
  --border-strong: #c0c7d1;
  --accent:       #0f7b82;
  --accent-light: #e8f7f8;
  --violet:       #6d28d9;
  --violet-light: #f1ecfe;
  --orange:       #c2600a;
  --orange-light: #fef3e6;
  --green:        #0f7a4d;
  --green-light:  #e6f7ef;
  --gold:         #92680a;
  --gold-light:   #fef9e7;
  --red:          #dc2626;
  --red-light:    #fef2f2;
  --text:     #1e293b;
  --text-mid: #475569;
  --text-dim: #94a3b8;
  --font-code:    'JetBrains Mono', monospace;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
}

html, body { min-height: 100vh; background: var(--bg-deep); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.6; }

/* NAV */
.siso-nav { display: flex; align-items: center; gap: 2.5rem; padding: 1rem 2rem; background: var(--bg-deep); border-bottom: 2px solid var(--border); font-family: var(--font-heading); position: sticky; top: 0; z-index: 100; }
.siso-nav__logo { font-size: 1.3rem; font-weight: 700; color: var(--accent); text-decoration: none; letter-spacing: 0.06em; margin-right: 1.5rem; padding: 0.25rem 0; display: flex; align-items: center; gap: 0.75rem; }
.siso-nav__logo img { height: 32px; width: auto; }
.siso-nav__links { display: flex; gap: 0.5rem; list-style: none; }
.siso-nav__link { color: var(--text-mid); text-decoration: none; font-size: 0.95rem; font-weight: 600; padding: 0.4rem 0.75rem; border-radius: 6px; transition: color 0.2s, background 0.2s; }
.siso-nav__link:hover { color: var(--text); background: var(--bg-surface); }
.siso-nav__link--active { color: var(--accent); background: var(--accent-light); }

/* BUTTONS */
.btn { font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; padding: 0.55rem 1.25rem; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s, transform 0.1s, box-shadow 0.2s; text-decoration: none; display: inline-block; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: #0d6a70; box-shadow: 0 2px 8px rgba(15, 123, 130, 0.25); }
.btn--emit { background: var(--accent); color: #fff; }
.btn--emit:hover { background: #0d6a70; }
.btn--emit:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--outline { background: transparent; color: var(--text-mid); border: 1px solid var(--border); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.btn--ghost:hover { border-color: var(--accent); color: var(--text); }
.btn--small { font-size: 0.75rem; padding: 0.3rem 0.65rem; }
.btn--test { background: var(--violet); color: #fff; }
.btn--test:hover { background: #5b21b6; }
.btn--violet { background: var(--violet); color: #fff; }
.btn--violet:hover { background: #5b21b6; }
.btn--green { background: var(--green); color: #fff; }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #7a570a; }

/* STREAM VIZ (shared) */
.stream-viz { position: relative; min-height: 100px; padding: 1rem; overflow: hidden; }
.stream-viz__line { position: absolute; top: 50%; left: 1rem; right: 1rem; height: 2px; background: linear-gradient(90deg, var(--accent), var(--violet)); opacity: 0.3; transform: translateY(-50%); }
.stream-viz__stations { position: relative; display: flex; justify-content: space-around; align-items: center; height: 100%; z-index: 2; }
.gate-station { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.gate-station__icon { width: 42px; height: 42px; border-radius: 8px; border: 2px solid var(--border); background: var(--bg-surface); display: flex; align-items: center; justify-content: center; font-family: var(--font-code); font-size: 0.9rem; color: var(--accent); transition: border-color 0.3s, box-shadow 0.3s; }
.gate-station__icon--matched { border-color: var(--green); box-shadow: 0 0 10px rgba(15, 122, 77, 0.2); }
.gate-station__icon--rejected { border-color: var(--orange); box-shadow: 0 0 10px rgba(194, 96, 10, 0.15); }
.gate-station__icon--loop-error { border-color: var(--red); box-shadow: 0 0 12px rgba(220, 38, 38, 0.25); animation: loop-pulse 0.6s ease-in-out 3; }
.gate-station__label { font-family: var(--font-code); font-size: 0.65rem; color: var(--text-dim); max-width: 70px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream-packet { position: absolute; top: 50%; transform: translate(-50%, -50%); background: var(--accent); color: #fff; font-family: var(--font-code); font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 10px; white-space: nowrap; z-index: 10; box-shadow: 0 2px 10px rgba(15, 123, 130, 0.35); transition: left 0.5s ease-in-out; }
.stream-packet--error { background: var(--orange); box-shadow: 0 2px 10px rgba(194, 96, 10, 0.35); }
@keyframes loop-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(220, 38, 38, 0.2); } 50% { box-shadow: 0 0 16px rgba(220, 38, 38, 0.45); } }

/* Sub-stream viz */
.stream-viz__sub { position: absolute; bottom: 4px; left: 1rem; right: 1rem; background: rgba(255,255,255,0.95); border: 1px solid var(--violet); border-radius: 6px; padding: 0.5rem 0.75rem; z-index: 8; animation: sub-appear 0.3s ease-out; }
.stream-viz__sub-label { font-family: var(--font-code); font-size: 0.68rem; color: var(--violet); margin-bottom: 0.3rem; }
.stream-viz__sub-line { height: 1px; background: linear-gradient(90deg, var(--violet), var(--accent)); opacity: 0.3; margin-bottom: 0.3rem; }
.stream-viz__sub-stations { display: flex; justify-content: space-around; gap: 0.5rem; }
.stream-viz__batch { position: absolute; top: 8px; right: 12px; font-family: var(--font-code); font-size: 0.72rem; color: var(--violet); background: var(--bg-surface); padding: 0.15rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); z-index: 5; }
.gate-station--child { transform: scale(0.85); }
.gate-station__icon--child { border-color: var(--violet); font-size: 0.85rem; width: 36px; height: 36px; }
.stream-viz__sub-return { font-family: var(--font-code); font-size: 0.68rem; color: var(--green); margin-top: 0.3rem; text-align: right; }
@keyframes sub-appear { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* INLINE CODE */
code { background: var(--bg-surface); border: 1px solid var(--border); padding: 0.1rem 0.35rem; border-radius: 3px; font-family: var(--font-code); font-size: 0.85rem; color: var(--accent); }

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-mid); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a8b0bb; }


/* ═══════════════════════════════════════
   GUIDE / OVERVIEW PAGE
   ═══════════════════════════════════════ */

.guide { max-width: 820px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.hero { text-align: center; padding: 3rem 0 2.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); }
.hero h1 { font-family: var(--font-heading); font-size: 3rem; font-weight: 700; color: var(--text); letter-spacing: 0.08em; margin-bottom: 0.2rem; }
.hero__tagline { font-size: 1.1rem; color: var(--accent); font-weight: 600; margin-bottom: 0.75rem; }
.hero__desc { color: var(--text-mid); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1rem; }
.hero__intro { color: var(--text-mid); font-size: 1rem; line-height: 1.7; max-width: 560px; margin: 0 auto 1.75rem; }
.hero__links { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.btn--large { font-size: 1.05rem; padding: 0.7rem 2rem; }
.hero__skip { margin-top: 1.5rem; }
.btn--skip { font-size: 1rem; padding: 0.75rem 2rem; background: var(--gold); color: #fff; letter-spacing: 0.04em; border-radius: 8px; box-shadow: 0 2px 12px rgba(146, 104, 10, 0.25); }
.btn--skip:hover { background: #7a570a; box-shadow: 0 3px 16px rgba(146, 104, 10, 0.35); }

.guide-section { margin-bottom: 3rem; }
.guide-section h2 { font-family: var(--font-heading); font-size: 1.25rem; color: var(--violet); padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.guide-section h3 { font-family: var(--font-heading); font-size: 1rem; color: var(--accent); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.guide-section p { margin-bottom: 0.8rem; }
.guide-section a { color: var(--accent); }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.25rem 0 1.5rem; }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; }
.card--link { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.card--link:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(15, 123, 130, 0.1); }
.card__icon { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--accent); }
.card__title { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--text); margin-bottom: 0.4rem; }
.card__body { font-size: 0.85rem; color: var(--text-mid); line-height: 1.6; }

.feature-list { margin: 1rem 0 1.5rem; }
.feature { display: flex; gap: 1rem; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.feature:last-child { border-bottom: none; }
.feature__label { font-family: var(--font-heading); font-weight: 700; font-size: 0.88rem; color: var(--accent); white-space: nowrap; min-width: 110px; }
.feature__desc { font-size: 0.88rem; color: var(--text-mid); line-height: 1.6; }

.file-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.88rem; }
.file-table th { text-align: left; padding: 0.6rem 0.8rem; background: var(--bg-surface); border: 1px solid var(--border); color: var(--accent); font-family: var(--font-heading); font-weight: 600; }
.file-table td { padding: 0.6rem 0.8rem; border: 1px solid var(--border); }
.file-table td:first-child { font-family: var(--font-code); font-size: 0.82rem; color: var(--gold); white-space: nowrap; }
.file-table td:first-child a { color: var(--gold); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.file-table td:first-child a:hover { color: var(--accent); }
.file-table tr:nth-child(even) { background: var(--bg-surface); }
.file-table .warn { color: var(--orange); }

.callout { background: var(--accent-light); border: 1px solid var(--accent); border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0 1.5rem; font-size: 0.9rem; }
.callout strong { color: var(--accent); }

.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 1.5rem; }
@media (max-width: 640px) { .comparison { grid-template-columns: 1fr; } }
.comparison__panel { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.comparison__header { padding: 0.5rem 0.8rem; font-family: var(--font-heading); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); }
.comparison__header--bad { background: var(--red-light); color: var(--red); }
.comparison__header--good { background: var(--green-light); color: var(--green); }
.comparison__code { padding: 0.8rem 1rem; font-family: var(--font-code); font-size: 0.8rem; white-space: pre-wrap; line-height: 1.5; color: var(--text); }
.comparison__annotation { padding: 0.5rem 1rem; font-size: 0.82rem; color: var(--text-dim); border-top: 1px solid var(--border); font-style: italic; }

.code-block { position: relative; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 1rem 0 1.5rem; }
.code-block__header { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.8rem; background: var(--bg-mid); border-bottom: 1px solid var(--border); font-family: var(--font-heading); font-size: 0.75rem; color: var(--text-dim); }
.code-block__body { padding: 0.8rem 1rem; font-family: var(--font-code); font-size: 0.8rem; white-space: pre-wrap; line-height: 1.55; color: var(--text); overflow-x: auto; }

.convo { margin: 1rem 0 1.5rem; }
.convo__msg { padding: 0.6rem 1rem; margin-bottom: 0.4rem; border-radius: 8px; font-size: 0.85rem; line-height: 1.5; }
.convo__msg--user { background: var(--accent-light); border: 1px solid rgba(15, 123, 130, 0.25); margin-left: 2rem; }
.convo__msg--ai { background: var(--bg-surface); border: 1px solid var(--border); margin-right: 2rem; }
.convo__label { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.convo__label--user { color: var(--accent); }
.convo__label--ai { color: var(--violet); }
.convo__annotation { padding: 0.3rem 0.8rem; font-size: 0.78rem; color: var(--green); font-style: italic; margin-bottom: 0.5rem; }
.convo__annotation--bad { color: var(--orange); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.steps li { counter-increment: step; position: relative; padding: 0.5rem 0 0.5rem 2.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0.4rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent-light); border: 1px solid var(--accent); color: var(--accent); text-align: center; line-height: 1.6rem; font-family: var(--font-code); font-size: 0.78rem; font-weight: 600; }

/* Try It Out banner */
.try-it-out { text-align: center; padding: 2.5rem 1.5rem; margin: 1rem 0 2rem; background: var(--accent-light); border: 2px solid var(--accent); border-radius: 12px; }
.try-it-out h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; letter-spacing: 0.02em; }
.try-it-out p { color: var(--text-mid); font-size: 1rem; }

.guide-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.8rem; color: var(--text-dim); }
.guide-footer code { font-size: 0.75rem; border: none; background: transparent; color: var(--text-dim); }


/* ═══════════════════════════════════════
   LEARN PAGE (index.html)
   ═══════════════════════════════════════ */

.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: calc(100vh - 57px); overflow: hidden; }
.split-layout__left { padding: 2rem; overflow-y: auto; border-right: 1px solid var(--border); background: var(--bg-deep); }
.split-layout__right { display: flex; flex-direction: column; background: var(--bg-mid); overflow: hidden; }

.instructions h1 { font-family: var(--font-heading); font-size: 1.5rem; color: var(--accent); margin-bottom: 0.25rem; }
.instructions h2 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--violet); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.instructions p { margin-bottom: 1rem; color: var(--text); }
.instructions code { font-family: var(--font-code); background: var(--bg-surface); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; color: var(--gold); }
.instructions .concept-box { background: var(--accent-light); border-left: 3px solid var(--accent); padding: 1rem 1.25rem; border-radius: 0 6px 6px 0; margin-bottom: 1.25rem; }
.instructions .takeaway-box { background: var(--green-light); border-left: 3px solid var(--green); padding: 1rem 1.25rem; border-radius: 0 6px 6px 0; margin-top: 1.5rem; display: none; }
.instructions .takeaway-box.visible { display: block; }

.sandbox { display: flex; flex-direction: column; height: 100%; }
.sandbox__gate-code { padding: 1rem 1.5rem; background: var(--bg-surface); border-bottom: 1px solid var(--border); overflow-y: auto; max-height: 30%; }
.sandbox__gate-code h3 { font-family: var(--font-heading); font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.sandbox__gate-code pre { font-family: var(--font-code); font-size: 0.82rem; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.sandbox__gate-code--extra { max-height: 20%; border-bottom: 1px solid var(--border); }
.sandbox__gate-code--extra h3 { color: var(--violet); }
.split-layout .stream-viz { flex: 1; padding: 1.5rem; min-height: 160px; }

.sandbox__input-area { padding: 1rem 1.5rem; display: flex; gap: 0.75rem; align-items: center; border-top: 1px solid var(--border); background: var(--bg-surface); }
.sandbox__input { flex: 1; background: var(--bg-deep); border: 1px solid var(--border); color: var(--text); font-family: var(--font-code); font-size: 0.9rem; padding: 0.6rem 0.9rem; border-radius: 6px; outline: none; transition: border-color 0.2s; }
.sandbox__input:focus { border-color: var(--accent); }
.sandbox__input::placeholder { color: var(--text-dim); opacity: 0.6; }

.sandbox__output { padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--bg-deep); overflow-y: auto; max-height: 35%; }
.sandbox__output h3 { font-family: var(--font-heading); font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.output-entry { margin-bottom: 0.75rem; padding: 0.6rem 0.8rem; background: var(--bg-surface); border-radius: 6px; font-family: var(--font-code); font-size: 0.82rem; }
.output-entry__input { color: var(--text-dim); }
.output-entry__result { color: var(--green); font-weight: 600; }
.output-entry__result--error { color: var(--orange); }
.output-entry__trace { margin-top: 0.3rem; font-size: 0.75rem; color: var(--text-dim); line-height: 1.4; }
.output-entry__trace span { display: block; }
.output-entry--loop-error { border-left: 3px solid var(--red); }
.output-entry__multi { margin-top: 0.3rem; }
.output-entry__multi .output-entry__result { padding-left: 0.5rem; font-size: 0.82rem; }
.trace-matched { color: var(--green); }
.trace-rejected { color: var(--text-dim); opacity: 0.6; }

.challenge-bar { padding: 0.75rem 1.5rem; background: var(--bg-surface); border-top: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; min-height: 48px; }
.challenge-bar__text { flex: 1; font-size: 0.85rem; color: var(--text-dim); }
.challenge-bar__counter { font-family: var(--font-code); font-size: 0.8rem; color: var(--violet); }
.challenge-bar__badge { font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem; padding: 0.25rem 0.75rem; border-radius: 12px; display: none; }
.challenge-bar__badge--pass { display: inline-block; background: var(--green-light); color: var(--green); border: 1px solid var(--green); }

.lesson-nav { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; background: var(--bg-surface); border-top: 1px solid var(--border); }
.lesson-nav .btn { font-size: 0.8rem; padding: 0.4rem 1rem; background: var(--bg-mid); color: var(--text-dim); border: 1px solid var(--border); }
.lesson-nav .btn:hover { border-color: var(--accent); color: var(--text); }
.lesson-nav .btn:disabled { opacity: 0.3; cursor: not-allowed; }
.lesson-nav__indicator { font-family: var(--font-code); font-size: 0.8rem; color: var(--text-dim); }

.gate-drag-list { padding: 1rem 1.5rem; background: var(--bg-surface); border-bottom: 1px solid var(--border); max-height: 35%; overflow-y: auto; }
.gate-drag-list h3 { font-family: var(--font-heading); font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.gate-drag-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; margin-bottom: 0.35rem; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 6px; cursor: grab; transition: border-color 0.2s, background 0.2s, transform 0.15s; user-select: none; }
.gate-drag-item:active { cursor: grabbing; }
.gate-drag-item:hover { border-color: var(--accent); }
.gate-drag-item--dragging { opacity: 0.5; border-color: var(--violet); background: var(--bg-mid); transform: scale(0.97); }
.gate-drag-item--over { border-color: var(--accent); background: var(--accent-light); }
.gate-drag-item--fixed { cursor: default; opacity: 0.5; border-style: dashed; }
.gate-drag-item__handle { color: var(--text-dim); font-size: 1rem; flex-shrink: 0; }
.gate-drag-item__name { font-family: var(--font-code); font-size: 0.85rem; color: var(--text); }
.gate-drag-item--fixed .gate-drag-item__name { color: var(--text-dim); }

.code-editor { display: flex; flex-direction: column; background: var(--bg-surface); border-bottom: 1px solid var(--border); max-height: 40%; overflow: hidden; }
.code-editor__header { font-family: var(--font-heading); font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.75rem 1rem 0.4rem; }
.code-editor__textarea { flex: 1; background: var(--bg-deep); color: var(--text); font-family: var(--font-code); font-size: 0.82rem; line-height: 1.55; padding: 0.75rem 1rem; border: none; border-top: 1px solid var(--border); resize: none; outline: none; min-height: 140px; tab-size: 4; }
.code-editor__textarea:focus { background: #f5f6f8; }
.code-editor__textarea--error { border-top-color: var(--orange); }
.code-editor__error { font-family: var(--font-code); font-size: 0.78rem; color: var(--orange); padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s, padding 0.2s; }
.code-editor__error--visible { padding: 0.5rem 1rem; max-height: 80px; overflow-y: auto; }

.test-results { padding: 0.5rem 1.5rem 0.75rem; background: var(--bg-surface); border-top: 1px solid var(--border); }
.test-results h3 { font-family: var(--font-heading); font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.test-case { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-family: var(--font-code); font-size: 0.8rem; }
.test-case__icon { flex-shrink: 0; width: 18px; text-align: center; }
.test-case__icon--pass { color: var(--green); }
.test-case__icon--fail { color: var(--orange); }
.test-case__icon--pending { color: var(--text-dim); }
.test-case__label { color: var(--text); }
.test-case__expected { color: var(--text-dim); margin-left: auto; font-size: 0.75rem; }
.test-case__got { color: var(--orange); font-size: 0.75rem; }

.spec-panel .spec-content { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 1.25rem; margin-bottom: 1.5rem; }
.spec-content h2 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--accent); margin-bottom: 0.75rem; margin-top: 0; }
.spec-content h3 { font-family: var(--font-heading); font-size: 0.95rem; color: var(--violet); margin-top: 1rem; margin-bottom: 0.4rem; }
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; font-family: var(--font-code); font-size: 0.82rem; }
.spec-table th { text-align: left; color: var(--text-dim); font-weight: 600; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.spec-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); color: var(--text); }
.spec-rule { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 0.3rem; }

.completion-box { background: var(--accent-light); border: 1px solid var(--accent); border-radius: 8px; padding: 1.25rem; margin-top: 1.5rem; display: none; text-align: center; }
.completion-box.visible { display: block; animation: sub-appear 0.4s ease-out; }
.completion-box h2 { color: var(--gold); margin-bottom: 0.5rem; }
.completion-box p { color: var(--text); margin-bottom: 1rem; }
.completion-link { display: inline-block; text-decoration: none; margin-top: 0.5rem; }

@media (max-width: 900px) {
  .split-layout { grid-template-columns: 1fr; height: auto; }
  .split-layout__left { border-right: none; border-bottom: 1px solid var(--border); max-height: 40vh; }
  .split-layout__right { min-height: 60vh; }
}


/* ═══════════════════════════════════════
   GALLERY PAGE
   ═══════════════════════════════════════ */

.gallery-header { text-align: center; padding: 2.5rem 1.5rem 1.5rem; }
.gallery-header h1 { font-family: var(--font-heading); font-size: 1.8rem; color: var(--accent); margin-bottom: 0.4rem; }
.gallery-header p { color: var(--text-dim); font-size: 0.95rem; max-width: 520px; margin: 0 auto; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 1.5rem; padding: 0 1.5rem 3rem; max-width: 1200px; margin: 0 auto; }

.gal-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color 0.3s; }
.gal-card:hover { border-color: rgba(15, 123, 130, 0.3); }
.gal-card__head { padding: 1.25rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border); }
.gal-card__title { font-family: var(--font-heading); font-size: 1.15rem; color: var(--accent); margin-bottom: 0.25rem; }
.gal-card__desc { font-size: 0.85rem; color: var(--text-dim); }
.gal-card__tags { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.gal-tag { font-family: var(--font-code); font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 8px; background: var(--violet-light); color: var(--violet); }

.gal-demo { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.gal-demo__viz { position: relative; height: 90px; margin-bottom: 0.5rem; overflow: hidden; }
.gal-demo__row { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.gal-demo__input { flex: 1; background: var(--bg-deep); border: 1px solid var(--border); color: var(--text); font-family: var(--font-code); font-size: 0.8rem; padding: 0.4rem 0.6rem; border-radius: 4px; outline: none; }
.gal-demo__input:focus { border-color: var(--accent); }
.gal-demo__output { font-family: var(--font-code); font-size: 0.8rem; min-height: 1.8rem; padding: 0.3rem 0; color: var(--green); }
.gal-demo__output--error { color: var(--orange); }

.gal-panel { border-bottom: 1px solid var(--border); }
.gal-panel:last-child { border-bottom: none; }
.gal-panel__toggle { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.6rem 1.25rem; background: none; border: none; cursor: pointer; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 600; color: var(--text-dim); text-align: left; transition: color 0.2s; }
.gal-panel__toggle:hover { color: var(--text); }
.gal-panel__arrow { transition: transform 0.2s; display: inline-block; }
.gal-panel__toggle.open .gal-panel__arrow { transform: rotate(90deg); }
.gal-panel__body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.gal-panel__body.open { max-height: 600px; overflow-y: auto; }
.gal-panel__inner { padding: 0 1.25rem 1rem; }
.gal-source { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1rem; font-family: var(--font-code); font-size: 0.78rem; color: var(--text); white-space: pre-wrap; line-height: 1.5; overflow-x: auto; }
.gal-spec { font-size: 0.85rem; color: var(--text); }
.gal-spec h2 { font-family: var(--font-heading); font-size: 1rem; color: var(--accent); margin-bottom: 0.4rem; }
.gal-spec h3 { font-family: var(--font-heading); font-size: 0.88rem; color: var(--violet); margin-top: 0.75rem; margin-bottom: 0.3rem; }
.gal-spec p { margin-bottom: 0.3rem; }
.gal-spec ul { padding-left: 1.2rem; margin-bottom: 0.4rem; }
.gal-spec li { margin-bottom: 0.2rem; }
.gal-spec code { background: var(--accent-light); padding: 0.1rem 0.35rem; border-radius: 3px; font-family: var(--font-code); font-size: 0.82rem; }
.gal-actions { display: flex; gap: 0.5rem; padding: 0.75rem 1.25rem; flex-wrap: wrap; }

@media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════
   WORKBENCH PAGE
   ═══════════════════════════════════════ */

body.wb-body { overflow: hidden; }

.wb-layout { display: grid; grid-template-columns: 220px 1fr 1fr; grid-template-rows: 1fr auto auto; height: calc(100vh - 57px); overflow: hidden; }

.wb-gates { grid-row: 1 / 4; background: var(--bg-mid); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.wb-gates__header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); font-family: var(--font-heading); font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.wb-gates__list { flex: 1; overflow-y: auto; padding: 0.5rem; }
.wb-gate-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; margin-bottom: 0.3rem; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; user-select: none; transition: border-color 0.2s; font-family: var(--font-code); font-size: 0.82rem; color: var(--text); }
.wb-gate-item:hover { border-color: var(--accent); }
.wb-gate-item--active { border-color: var(--accent); background: var(--accent-light); }
.wb-gate-item--fixed { cursor: default; opacity: 0.5; border-style: dashed; }
.wb-gate-item--dragging { opacity: 0.4; }
.wb-gate-item--over { border-color: var(--violet); background: var(--violet-light); }
.wb-gate-item__handle { color: var(--text-dim); font-size: 0.9rem; flex-shrink: 0; cursor: grab; }
.wb-gate-item__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-gate-item__delete { color: var(--text-dim); cursor: pointer; font-size: 0.85rem; padding: 0 0.2rem; transition: color 0.2s; }
.wb-gate-item__delete:hover { color: var(--red); }
.wb-gates__add { padding: 0.75rem 1rem; border-top: 1px solid var(--border); }

.wb-center { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border); }
.wb-viz { flex: 0 0 140px; position: relative; border-bottom: 1px solid var(--border); overflow: hidden; }
.wb-io { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.wb-input-row { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.wb-input { flex: 1; background: var(--bg-deep); border: 1px solid var(--border); color: var(--text); font-family: var(--font-code); font-size: 0.85rem; padding: 0.5rem 0.75rem; border-radius: 5px; outline: none; }
.wb-input:focus { border-color: var(--accent); }
.wb-output { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; background: var(--bg-deep); }
.wb-output__entry { margin-bottom: 0.6rem; padding: 0.5rem 0.7rem; background: var(--bg-surface); border-radius: 5px; font-family: var(--font-code); font-size: 0.8rem; }
.wb-output__in { color: var(--text-dim); }
.wb-output__out { color: var(--green); font-weight: 600; }
.wb-output__out--error { color: var(--orange); }
.wb-output__trace { margin-top: 0.25rem; font-size: 0.72rem; color: var(--text-dim); }
.wb-output__trace span { display: block; }
.wb-output__trace .matched { color: var(--green); }
.wb-log { max-height: 120px; overflow-y: auto; padding: 0.5rem 1rem; background: var(--bg-mid); border-top: 1px solid var(--border); font-family: var(--font-code); font-size: 0.72rem; color: var(--text-dim); white-space: pre-wrap; display: none; }
.wb-log.visible { display: block; }

.wb-editor { display: flex; flex-direction: column; overflow: hidden; }
.wb-editor__header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; background: var(--bg-surface); border-bottom: 1px solid var(--border); font-family: var(--font-heading); font-size: 0.85rem; color: var(--text-dim); }
.wb-editor__name { color: var(--accent); font-family: var(--font-code); }
.wb-editor__body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.wb-editor__textarea { flex: 1; background: var(--bg-deep); color: var(--text); font-family: var(--font-code); font-size: 0.82rem; line-height: 1.55; padding: 0.75rem 1rem; border: none; resize: none; outline: none; tab-size: 4; }
.wb-editor__textarea:focus { background: #f5f6f8; }
.wb-editor__textarea--error { border-top: 2px solid var(--orange); }
.wb-editor__error { font-family: var(--font-code); font-size: 0.75rem; color: var(--orange); padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s, padding 0.2s; background: var(--bg-surface); }
.wb-editor__error.visible { padding: 0.4rem 1rem; max-height: 60px; }

.wb-vars { border-top: 1px solid var(--border); padding: 0.5rem 1rem; background: var(--bg-surface); max-height: 140px; overflow-y: auto; }
.wb-vars__header { font-family: var(--font-heading); font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; display: flex; align-items: center; justify-content: space-between; }
.wb-var-row { display: flex; gap: 0.4rem; margin-bottom: 0.25rem; align-items: center; }
.wb-var-input { background: var(--bg-deep); border: 1px solid var(--border); color: var(--text); font-family: var(--font-code); font-size: 0.78rem; padding: 0.25rem 0.5rem; border-radius: 4px; outline: none; width: 45%; }
.wb-var-input:focus { border-color: var(--accent); }
.wb-var-remove { color: var(--text-dim); cursor: pointer; font-size: 0.8rem; }
.wb-var-remove:hover { color: var(--red); }

.wb-bottom { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: var(--bg-surface); border-top: 1px solid var(--border); }
.wb-tests { flex: 1; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-family: var(--font-code); font-size: 0.78rem; }
.wb-test-badge { padding: 0.15rem 0.5rem; border-radius: 10px; font-size: 0.72rem; }
.wb-test-badge--pass { background: var(--green-light); color: var(--green); }
.wb-test-badge--fail { background: var(--red-light); color: var(--red); }
.wb-test-summary { color: var(--text-dim); font-size: 0.78rem; }

select.wb-select { background: var(--bg-deep); border: 1px solid var(--border); color: var(--text); font-family: var(--font-code); font-size: 0.78rem; padding: 0.35rem 0.5rem; border-radius: 4px; outline: none; cursor: pointer; }
select.wb-select:focus { border-color: var(--accent); }

.wb-test-editor { border-top: 1px solid var(--border); padding: 0.6rem 1rem; background: var(--bg-mid); max-height: 180px; overflow-y: auto; display: none; grid-column: 2 / 4; }
.wb-test-editor.visible { display: block; }
.wb-test-row { display: flex; gap: 0.4rem; margin-bottom: 0.3rem; align-items: center; font-family: var(--font-code); font-size: 0.78rem; }
.wb-test-input { background: var(--bg-deep); border: 1px solid var(--border); color: var(--text); font-family: var(--font-code); font-size: 0.78rem; padding: 0.25rem 0.5rem; border-radius: 4px; outline: none; flex: 1; }
.wb-test-input:focus { border-color: var(--accent); }
.wb-test-label { color: var(--text-dim); font-size: 0.72rem; width: 20px; text-align: center; }

.wb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 200; display: flex; align-items: center; justify-content: center; }
.wb-modal { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; width: 400px; max-width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.wb-modal h2 { font-family: var(--font-heading); color: var(--accent); margin-bottom: 1rem; font-size: 1.1rem; }
.wb-modal label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.3rem; }
.wb-modal input { width: 100%; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-code); font-size: 0.9rem; padding: 0.6rem 0.8rem; border-radius: 5px; margin-bottom: 1rem; outline: none; }
.wb-modal input:focus { border-color: var(--accent); }
.wb-modal__actions { display: flex; gap: 0.75rem; justify-content: flex-end; }

@media (max-width: 900px) {
  .wb-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .wb-gates { grid-row: auto; max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
  .wb-center { border-right: none; }
  .wb-bottom { grid-column: 1; }
  .wb-test-editor { grid-column: 1; }
}