:root {
    --bg: #fafafa;
    --fg: #171717;
    --muted: #737373;
    --border: #e5e5e5;
    --panel: #ffffff;
    --soft: #f5f5f5;
    --fill: #171717;
    --fill-muted: #a3a3a3;
    --accent: #262626;
    --waiting: #525252;
    --serving: #171717;
    --idle: #d4d4d4;
    --parking: #a3a3a3;
    --doors: #737373;
    --alighted: #a3a3a3;
    --full: #c2410c;
    --font: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@font-face {
    font-family: "Geist Sans";
    src: url("./fonts/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("./fonts/GeistMono-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0a0a0a;
        --fg: #f5f5f5;
        --muted: #a3a3a3;
        --border: #262626;
        --panel: #0a0a0a;
        --soft: #171717;
        --fill: #f5f5f5;
        --fill-muted: #737373;
        --accent: #f5f5f5;
        --waiting: #d4d4d4;
        --serving: #f5f5f5;
        --idle: #404040;
        --parking: #737373;
        --doors: #a3a3a3;
        --alighted: #737373;
        --full: #fb923c;
    }

    html {
        color-scheme: dark;
    }
}

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

html, body {
    height: 100%;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.app {
    max-width: 1100px;
    margin: 0 auto;
    min-height: 100%;
    padding: 1.25rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.brand h1 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.lede {
    margin-top: 0.2rem;
    font-size: 0.875rem;
    color: var(--muted);
    max-width: 36rem;
}

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

.btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--fg);
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
}

.btn:hover:not(:disabled) {
    background: var(--soft);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn.primary {
    background: var(--fill);
    color: var(--bg);
    border-color: var(--fill);
}

.btn.primary:hover:not(:disabled) {
    opacity: 0.9;
    background: var(--fill);
}

.btn.ghost {
    display: none;
}

.batch-n-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
}

.batch-n-label input {
    width: 3.5rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--fg);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.35rem 0.4rem;
}

.batch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: flex-start;
    justify-content: flex-end;
    flex-shrink: 0;
}

.batch-panel {
    padding: 1rem 1.05rem 1.05rem;
}

.batch-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

.batch-kicker {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.2rem;
}

.rank-metric {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin: 0.35rem 0 0.55rem;
}

.rank-metric-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
}

.rank-metric-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--soft);
}

.rank-metric-btn {
    appearance: none;
    border: 0;
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
}

.rank-metric-btn:last-child {
    border-right: 0;
}

.rank-metric-btn:hover {
    color: var(--fg);
    background: var(--panel);
}

.rank-metric-btn.is-active {
    color: var(--bg);
    background: var(--fill);
}

#batch-table th.is-objective,
#batch-table td.is-objective {
    font-weight: 600;
}

.batch-panel h2 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 0.45rem;
}

.batch-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--muted);
    line-height: 1.3;
}

.batch-meta .chip {
    border: 1px solid var(--border);
    background: var(--soft);
    border-radius: 0.25rem;
    padding: 0.18rem 0.4rem;
    color: var(--fg);
}

.batch-progress-wrap {
    margin: 0 0 0.85rem;
}

.batch-progress-track {
    height: 3px;
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.batch-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--fill);
    transition: width 0.15s ease;
}

.batch-progress-label {
    margin-top: 0.4rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--muted);
}

.batch-table-wrap {
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    overflow: hidden;
}

#batch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

#batch-table th,
#batch-table td {
    text-align: left;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

#batch-table thead th {
    background: var(--soft);
    color: var(--muted);
    font-weight: 500;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#batch-table tbody tr:last-child td {
    border-bottom: 0;
}

#batch-table tbody tr:hover td {
    background: var(--soft);
}

#batch-table .num,
#batch-table .col-rank,
#batch-table .col-win {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

#batch-table .col-rank {
    width: 2.2rem;
    color: var(--muted);
    font-weight: 500;
}

#batch-table .col-win {
    min-width: 7.5rem;
}

#batch-table .strategy-name {
    font-weight: 550;
    letter-spacing: -0.01em;
}

#batch-table tr.rank-1 td {
    background: color-mix(in srgb, var(--fg) 4%, var(--panel));
}

#batch-table tr.rank-1 .col-rank {
    color: var(--fg);
    font-weight: 650;
}

#batch-table tr.rank-1 td:first-child {
    box-shadow: inset 2px 0 0 var(--fg);
}

#batch-table tr.incomplete td {
    color: var(--muted);
}

.win-cell {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.win-bar {
    flex: 1;
    height: 4px;
    min-width: 2.5rem;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.win-bar > span {
    display: block;
    height: 100%;
    background: var(--fill);
}

.win-pct {
    width: 2.4rem;
    text-align: right;
    font-size: 0.72rem;
}

@media (max-width: 820px) {
    .batch-top {
        flex-direction: column;
    }

    .batch-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.seed-row {
    display: flex;
    gap: 0.4rem;
}

.seed-row input[type="number"] {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.4rem 0.5rem;
}

.hint {
    font-size: 0.7rem;
    color: var(--muted);
    line-height: 1.4;
}

.compare-panel {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--panel);
    padding: 0.85rem;
}

.compare-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.compare-head .hint {
    margin-bottom: 0;
}

.compare-settings {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--muted);
    line-height: 1.45;
    word-break: break-word;
}

.compare-panel h2 {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.compare-panel .hint {
    margin-bottom: 0.65rem;
}

#compare-table tr.incomplete td {
    color: var(--muted);
}

.table-wrap {
    overflow-x: auto;
}

#compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

#compare-table th,
#compare-table td {
    text-align: left;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--border);
}

#compare-table th {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#compare-table .num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

#compare-table tr.best-wait td:nth-child(2),
#compare-table .best-empty {
    font-weight: 600;
}

#compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.metric {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.65rem 0.8rem;
    background: var(--panel);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.metric-idle {
    gap: 0.25rem;
}

.regime-chip {
    align-self: flex-start;
    margin-top: 0.15rem;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
    background: var(--soft);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.regime-chip[data-regime="parking-sensitive"] {
    color: var(--fg);
    border-color: var(--fill);
}

.regime-chip[data-regime="saturated"] {
    color: var(--fg);
    border-color: var(--full, #c45c26);
}

.batch-meta .chip.regime-chip {
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.regime-line {
    margin: 0.35rem 0 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.15rem 0.45rem;
    background: var(--soft);
}

.regime-line[data-regime="parking-sensitive"] {
    color: var(--fg);
    border-color: var(--fill);
}

.regime-line[data-regime="saturated"] {
    color: var(--fg);
    border-color: var(--full, #c45c26);
}

.metric-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.metric-value {
    font-family: var(--mono);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.progress {
    margin-top: 0.35rem;
    height: 2px;
    background: var(--soft);
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: var(--fill);
}

.layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--panel);
    height: fit-content;
}

.panel-section {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.panel-section + .panel-section {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.panel-section legend {
    padding: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.panel-hint {
    margin: -0.35rem 0 0;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.field label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.field label span {
    font-family: var(--mono);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

.field select,
.field input[type="range"] {
    width: 100%;
}

.field select {
    font-family: var(--font);
    font-size: 0.8125rem;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.4rem 0.5rem;
}

.field select:focus-visible,
.field input:focus-visible,
.btn:focus-visible {
    outline: 1px solid var(--fg);
    outline-offset: 1px;
}

input[type="range"] {
    accent-color: var(--fill);
    height: 1.25rem;
}

.stage {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
    min-height: 0;
}

.building-shell {
    flex: 1;
    min-height: 420px;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--panel);
    overflow: auto;
}

.building {
    display: grid;
    grid-template-columns: 72px 40px repeat(var(--shaft-count, 4), minmax(48px, 1fr)) minmax(88px, 1.3fr);
    width: 100%;
    min-height: 100%;
}

.alighted-header,
.corner-header,
.shaft-header,
.hall-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.25rem;
}

.alighted-header {
    left: 0;
    z-index: 4;
}

.corner-header {
    left: 72px;
    z-index: 4;
}

.floor-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    position: sticky;
    left: 72px;
    z-index: 2;
    font-variant-numeric: tabular-nums;
}

.floor-label.lobby {
    color: var(--fg);
}

.shaft-cell {
    position: relative;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    background: var(--soft);
    min-height: 30px;
}

.elevator-car {
    position: absolute;
    inset: 2px 10%;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    cursor: default;
    z-index: 2;
    overflow: hidden;
    padding: 1px 2px;
}

.elevator-car.idle {
    background: var(--idle);
    color: var(--fg);
    border-color: var(--border);
}

.elevator-car.serving {
    background: var(--serving);
    color: var(--bg);
}

.elevator-car.parking {
    background: transparent;
    color: var(--fg);
    border: 1px dashed var(--parking);
}

.elevator-car.doors {
    background: var(--doors);
    color: var(--bg);
}

.elevator-car.full {
    border: 2px solid var(--full);
    box-shadow: inset 0 0 0 1px var(--full);
}

.car-riders {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
}

.car-count,
.car-more,
.hall-more,
.alighted-more {
    font-size: 0.6rem;
    font-family: var(--mono);
    opacity: 0.85;
}

.alighted-cell,
.hall-cell {
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    padding: 2px 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    min-height: 30px;
}

.alighted-cell {
    background: var(--panel);
    position: sticky;
    left: 0;
    z-index: 1;
}

.pax {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    cursor: default;
}

.pax.waiting {
    background: var(--waiting);
}

.pax.alighted {
    background: var(--alighted);
    opacity: 0.85;
}

.pax.riding {
    background: var(--bg);
    box-shadow: 0 0 0 1px currentColor;
}

.elevator-car.idle .pax.riding,
.elevator-car.parking .pax.riding {
    background: var(--fg);
    box-shadow: none;
}

.hover-tip {
    position: fixed;
    z-index: 1000;
    max-width: min(280px, 80vw);
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--panel);
    color: var(--fg);
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: pre-wrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.legend li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.swatch.waiting {
    border-radius: 999px;
    background: var(--waiting);
}

.swatch.alighted {
    border-radius: 999px;
    background: var(--alighted);
}

.swatch.riding {
    border-radius: 999px;
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--fg);
}

.swatch.idle {
    background: var(--idle);
    border: 1px solid var(--border);
}

.swatch.serving {
    background: var(--serving);
}

.swatch.parking {
    background: transparent;
    border: 1px dashed var(--parking);
}

.swatch.doors {
    background: var(--doors);
}

.swatch.full {
    background: transparent;
    border: 2px solid var(--full);
}

/* Embed: tighter chrome when framed in portfolio */
html.embed .app {
    padding: 0.75rem;
    max-width: none;
}

html.embed .brand .lede {
    display: none;
}

html.embed .brand h1 {
    font-size: 1.05rem;
}

html.embed .building-shell {
    min-height: 360px;
}

html.embed .metrics {
    gap: 0.5rem;
}

html.embed .legend {
    gap: 0.5rem 0.85rem;
    font-size: 0.7rem;
}

@media (max-width: 1100px) {
    .metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .metric-wide {
        grid-column: span 1;
    }
}

@media (max-width: 820px) {
    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric-wide {
        grid-column: 1 / -1;
    }

    .layout {
        grid-template-columns: 1fr;
    }

    .controls {
        display: none;
    }

    .controls.open {
        display: flex;
    }

    .btn.ghost {
        display: inline-flex;
    }
}