/* ============================================================================
   Interactive Flow tutorials — runner, code editor, and program walkthrough
   ----------------------------------------------------------------------------
   Everything here reads the theme tokens defined in wiki.css. Selectors that
   render inside .markdown-body are deliberately two classes deep so the
   generic `.markdown-body pre` rules cannot capture the runner's panes.
   ========================================================================== */

:root {
    --flow-code-size: 0.82rem;
    --flow-code-line: 21px;
    --flow-code-pad-y: 0.85rem;
    --flow-code-pad-x: 1rem;
    --flow-code-gutter: 3rem;
}

/* ── Runner shell ────────────────────────────────────────────────────────── */

.flow-runner {
    container-type: inline-size;
    margin: 1.5rem 0 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    font-family: var(--mono);
    box-shadow: var(--shadow-sm);
}

.flow-runner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 0.9rem;
    background: var(--surface-3);
    border-bottom: 1px solid var(--border);
}

.flow-runner-title {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.flow-runner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.flow-runner-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.flow-runner-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-faint);
}

.flow-runner-dot.running { background: var(--accent); animation: flow-pulse 1s infinite; }
.flow-runner-dot.ok { background: var(--green); }
.flow-runner-dot.err { background: var(--danger); }

@keyframes flow-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.flow-runner-btn {
    padding: 0.32rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--surface);
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 550;
    cursor: pointer;
    transition: all var(--fast);
}

.flow-runner-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.flow-runner-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 650;
}

.flow-runner-btn-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--on-accent);
}

.flow-runner-btn:disabled,
.flow-runner-btn:disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-muted);
}

.flow-runner-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 220px;
}

/* Side-by-side only when the runner itself is wide enough for two readable
   columns — it is embedded in a narrow docs column as well as the wide app. */
@container (max-width: 760px) {
    .flow-runner-body { grid-template-columns: minmax(0, 1fr); }
    .flow-runner-editor { border-right: none; border-bottom: 1px solid var(--border); }
    .flow-runner-output { min-height: 0; }
    .flow-runner .flow-runner-pane { min-height: 90px; }
}

@media (max-width: 900px) {
    .flow-runner-body { grid-template-columns: minmax(0, 1fr); }
}

.flow-runner-editor {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--border);
}

@media (max-width: 900px) {
    .flow-runner-editor { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── Highlighted code editor ─────────────────────────────────────────────── */

.flow-code {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: var(--flow-code-gutter) minmax(0, 1fr);
    background: var(--surface-2);
    min-height: calc(var(--flow-code-rows, 10) * var(--flow-code-line) + 2 * var(--flow-code-pad-y));
    overflow: hidden;
}

.flow-code-gutter {
    overflow: hidden;
    padding: var(--flow-code-pad-y) 0;
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-3) 55%, transparent);
    user-select: none;
}

.flow-code-ln {
    display: block;
    height: var(--flow-code-line);
    line-height: var(--flow-code-line);
    padding-right: 0.7rem;
    text-align: right;
    font-family: var(--mono);
    font-size: var(--flow-code-size);
    color: var(--text-faint);
    opacity: 0.6;
    transition: color var(--fast), background var(--fast), opacity var(--fast);
}

.flow-code-ln.lit {
    color: var(--accent);
    background: var(--accent-soft);
    opacity: 1;
    font-weight: 600;
}

.flow-code-area {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

/* The view and the input must share identical text metrics or the caret drifts. */
.flow-code .flow-code-view,
.flow-code .flow-code-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: var(--flow-code-pad-y) var(--flow-code-pad-x);
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: var(--mono);
    font-size: var(--flow-code-size);
    line-height: var(--flow-code-line);
    letter-spacing: normal;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    tab-size: 4;
}

.flow-code .flow-code-view {
    overflow: hidden;
    pointer-events: none;
    color: var(--syn-var);
}

.flow-code .flow-code-view code {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

.flow-code .flow-code-input {
    overflow: auto;
    resize: none;
    color: transparent;
    caret-color: var(--accent);
    -webkit-text-fill-color: transparent;
}

.flow-code .flow-code-input:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--accent-line);
}

.flow-code .flow-code-input::selection {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.flow-code-marks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
}

.flow-code-mark {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--accent-soft);
    border-left: 2px solid var(--accent);
    animation: flow-mark-in 0.16s var(--ease);
}

@keyframes flow-mark-in { from { opacity: 0; } }

/* ── Output panes ────────────────────────────────────────────────────────── */

.flow-runner-output {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 200px;
    background: var(--surface-2);
}

.flow-runner-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-3) 55%, transparent);
}

.flow-runner-tab {
    position: relative;
    padding: 0.42rem 0.8rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 550;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--fast), border-color var(--fast);
}

.flow-runner-tab:hover { color: var(--text); }

.flow-runner-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.flow-runner .flow-runner-pane {
    flex: 1;
    margin: 0;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 0;
    overflow: auto;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
    color: var(--text);
    min-height: 150px;
}

.flow-runner .flow-runner-pane.error { color: var(--danger); }
.flow-runner .flow-runner-pane.success { color: var(--green); }
.flow-runner .flow-runner-pane.idle { color: var(--text-muted); font-family: var(--sans); }
.flow-runner .flow-runner-pane[hidden] { display: none; }

.flow-runner-hint {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.9rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--surface-3);
    border-top: 1px solid var(--border);
}

.flow-runner-hint kbd {
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: var(--surface);
    /* System UI first: the webfonts have no glyph for ⌘ and render tofu. */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Symbol', var(--sans);
    font-size: 0.7rem;
    color: var(--text);
}

/* ── Program walkthrough ─────────────────────────────────────────────────── */

.tutorials-walkthrough {
    margin: 0 0 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.walk-head {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-3) 50%, transparent);
}

.walk-head h2 {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.walk-head p {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--text-faint);
}

.walk-steps {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
}

.walk-steps > .walk-step {
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: default;
    transition: background var(--fast), border-color var(--fast);
}

.walk-step.lit {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}

.walk-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.walk-index {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-3);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
}

.walk-steps > .walk-step.lit .walk-index {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.walk-body { min-width: 0; flex: 1; }

.walk-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.2rem;
}

.walk-title code {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text);
    background: none;
    border: none;
    padding: 0;
}

.walk-kind {
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-line);
}

.walk-kind-struct,
.walk-kind-enum,
.walk-kind-type {
    background: var(--purple-soft);
    color: var(--purple);
    border-color: color-mix(in srgb, var(--purple) 30%, transparent);
}

.walk-kind-extern,
.walk-kind-import {
    background: var(--warn-soft);
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}

.walk-kind-effect,
.walk-kind-capability,
.walk-kind-flow {
    background: var(--green-soft);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

.walk-detail {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.walk-lines {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-faint);
    white-space: nowrap;
}

.walk-sub {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0 0 0 0.9rem;
    border-left: 1px solid var(--border);
}

.walk-sub .walk-step {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr auto;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.28rem 0.45rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

.walk-sub code {
    font-family: var(--mono);
    font-size: 0.735rem;
    color: var(--text);
    background: none;
    border: none;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.walk-sub .walk-detail { font-size: 0.775rem; }

@media (max-width: 760px) {
    .walk-sub .walk-step { grid-template-columns: 1fr; gap: 0.15rem; }
    .walk-lines { display: none; }
}

/* ── Standalone tutorials app ────────────────────────────────────────────── */

.tutorials-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tutorials-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.tutorials-tracks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tutorials-track {
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.775rem;
    font-weight: 500;
    font-family: var(--sans);
    cursor: pointer;
    transition: all var(--fast);
}

.tutorials-track:hover { color: var(--text); border-color: var(--border-strong); }

.tutorials-track.active {
    color: var(--accent);
    border-color: var(--accent-line);
    background: var(--accent-soft);
    font-weight: 600;
}

.tutorials-progress {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 190px;
}

.tutorials-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.tutorials-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--green));
    border-radius: inherit;
    transition: width var(--med);
}

.tutorials-progress-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.tutorials-app {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
}

@media (max-width: 860px) {
    .tutorials-app { grid-template-columns: minmax(0, 1fr); }
    .tutorials-sidebar {
        max-height: 220px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

.tutorials-sidebar {
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    overflow-y: auto;
    padding: 0.85rem 0 1.5rem;
}

.tutorials-sidebar > h2 {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-faint);
    padding: 0 1.15rem;
    margin-bottom: 0.4rem;
}

.tutorials-section {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    padding: 0.9rem 1.15rem 0.3rem;
    margin: 0;
}

.tutorials-lesson {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    padding: 0.42rem 1.15rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: 0.855rem;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background var(--fast), color var(--fast);
}

/* Carries the done/not-done state, so it holds full text contrast. */
.tutorials-lesson-mark {
    width: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.tutorials-lesson.done .tutorials-lesson-mark { color: var(--green); }
.tutorials-lesson:hover { color: var(--text); background: var(--surface-2); }

.tutorials-lesson.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--accent-soft);
    font-weight: 600;
}

.tutorials-empty {
    padding: 1rem 1.15rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.tutorials-main {
    padding: 1.75rem 2rem 3rem;
    overflow-y: auto;
    max-width: 1100px;
}

.tutorials-main h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0.35rem 0 0.4rem;
}

.tutorials-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.tutorials-track-badge {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.tutorials-meta-sep { opacity: 0.4; }

.tutorials-done-pill {
    margin-left: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--green-soft);
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
    color: var(--green);
    font-size: 0.66rem;
    font-weight: 700;
}

.tutorials-lead {
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    max-width: 62ch;
}

.tutorials-check {
    margin: 1rem 0 1.25rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    font-size: 0.86rem;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
}

.tutorials-check.pass {
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
    background: var(--green-soft);
    color: var(--green);
}

.tutorials-check.fail {
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.tutorials-check.hint {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--text-muted);
}

.tutorials-check pre {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.78rem;
    white-space: pre-wrap;
}

.tutorials-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}

.tutorials-app .flow-runner { margin-top: 0; }