/* Twinton — Penmanshiel Wind Farm instrument console.
   Design DNA: mockups/saab-fleet-resilience/tokens.css — dark zinc surfaces,
   1px hairline rules, 3px radii, dense condensed type, uppercase section
   headers with letter-spacing, mono numerals, amber/red/green status,
   bevelled steel-blue action buttons. Dark-only (ops console). */

:root {
    color-scheme: dark;

    --bg-0: #09090b;
    --bg-1: #18181b;
    --bg-2: #1f1f23;
    --bg-3: #26262b;
    --border: #27272a;
    --border-lt: #3a3a40;
    --text-1: #f4f4f5;
    --text-2: #a1a1aa;
    --text-3: #71717a;

    --amber: #e2a33b;
    --amber-lt: #f0bc63;
    --red: #e0392e;
    --red-bright: #ff4838;
    --orange: #f08c1e;
    --green: #3fc23c;
    --blue-btn: #4d7fae;
    --blue-btn-hi: #5d92c4;
    --blue-btn-lo: #3e6a94;
    --blue-node: #57a7d8;
    --gray-node: #9ca3ab;
    --focus: #7fb4e0;

    /* Status tokens — the map module (static/map.js) colors glyphs with these. */
    --status-healthy: var(--green);
    --status-fault: var(--red);
    --status-watch: var(--amber);
    --status-unknown: var(--text-3);

    --font-ui: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow",
        -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --radius: 3px;
    --radius-lg: 5px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 140ms;
    --dur-med: 320ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: var(--font-ui);
    font-size: 13px;
    background: var(--bg-0);
    color: var(--text-1);
    line-height: 1.35;
    overflow: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

/* Condensed uppercase section header — the DNA's signature. */
.pane-head h2,
.ins-sec h3,
.spec-sheet h3,
.verdict-history h3,
.chart-head h4 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-3);
}

/* ================= topbar ================= */

.topbar {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-1);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wordmark { display: inline-flex; color: var(--text-1); line-height: 0; }
.wordmark svg { height: 20px; width: auto; display: block; }
.sep { width: 1px; height: 24px; background: var(--border-lt); }
.brand-title h1 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.brand-title p {
    margin: 1px 0 0;
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ctrl { display: flex; align-items: center; gap: 10px; }

.newton-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-2);
}
.newton-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--text-3); }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.newton-status.starting .newton-dot,
.newton-status.running .newton-dot { background: var(--blue-node); animation: blink 1.4s ease-in-out infinite; }
.newton-status.done .newton-dot { background: var(--green); }
.newton-status.error .newton-dot { background: var(--red-bright); }

.status-dot {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* Bevelled steel-blue action button. */
.btn-action {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    padding: 6px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--blue-btn-lo);
    background: linear-gradient(to bottom, var(--blue-btn-hi), var(--blue-btn-lo));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease-out);
}
.btn-action:hover { filter: brightness(1.1); }
.btn-action:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
.btn-action.playing {
    background: linear-gradient(to bottom, #8a4640, #6e332e);
    border-color: #5c2b27;
}
.btn-action.wide { width: 100%; margin-top: 10px; }
.btn-action:focus-visible,
.btn-ghost:focus-visible,
.rail-filter:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

.btn-ghost {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-2);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 10px;
    cursor: pointer;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.btn-ghost:hover { color: var(--text-1); border-color: var(--border-lt); }

/* ================= timeline ================= */

.timeline {
    height: 30px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-1);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.timeline .track {
    height: 3px;
    background: var(--bg-3);
    border-radius: 999px;
    overflow: hidden;
}
.timeline .cursor {
    height: 100%;
    width: 0%;
    background: var(--blue-node);
    transition: width 0.06s linear;
}
.timeline .t-now {
    color: var(--text-1);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px 7px;
}

/* ================= console grid ================= */

.console {
    display: grid;
    grid-template-columns: 300px 1fr 360px;
    height: calc(100vh - 82px);
    min-height: 480px;
}

/* Shared pane head */
.pane-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.pane-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.pane-note {
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.stage-msg {
    padding: 24px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    text-align: center;
}
.rail-msg {
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    list-style: none;
}

/* ================= left rail ================= */

.rail {
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.rail-filter {
    margin: 8px 10px;
    padding: 5px 9px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-1);
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.rail-filter::placeholder { color: var(--text-3); }

.turbine-list {
    list-style: none;
    margin: 0;
    padding: 0 6px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.rail-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: baseline;
    column-gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.rail-row:hover { background: var(--bg-2); }
.rail-row.sel {
    background: var(--bg-2);
    border-color: var(--border-lt);
}
.rail-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: 0.04em;
}
.rail-name {
    font-size: 11px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rail-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
}
.rail-row.live .rail-sub { color: var(--blue-node); }

/* Status dots — rail + legend. */
.dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 999px;
    align-self: center;
    background: var(--status-unknown);
}
.dot.healthy { background: var(--status-healthy); }
.dot.fault   { background: var(--status-fault); box-shadow: 0 0 6px rgba(224, 57, 46, 0.6); }
.dot.watch   { background: var(--status-watch); }
.dot.unknown { background: var(--status-unknown); }
@keyframes softPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.rail-row.pulse .dot { animation: softPulse 1.6s ease-in-out infinite; }

.rail-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    flex: 0 0 auto;
}
.rail-legend .dot { width: 7px; height: 7px; margin-right: 5px; vertical-align: middle; }

/* ================= stage ================= */

.stage {
    background: var(--bg-0);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.stage-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.stage-view[hidden] { display: none; }

.farm-map {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    /* Its own ground, one step off the page body, so the map reads as an
       instrument surface rather than glyphs floating in the void. */
    background: var(--bg-1);
}
.farm-map svg { width: 100%; height: 100%; display: block; }

/* ----- map module classes (contract with static/map.js) -----
   Glyph group g.wt carries modifiers wt--healthy | wt--fault | wt--watch |
   wt--unknown | wt--live | wt--sel. Status tint rides `color` on the group;
   blade/hub fills use currentColor. The container (#farm-map) gains
   .replay-running while the SSE stream is live so wt--live glyphs pulse. */
#farm-map g.wt { cursor: pointer; color: var(--status-unknown); }
#farm-map g.wt:focus-visible { outline: none; }
#farm-map g.wt:focus-visible .wt-ring { display: block; stroke: var(--focus); stroke-dasharray: 3 3; }
#farm-map .wt--healthy { color: var(--status-healthy); }
#farm-map .wt--fault   { color: var(--status-fault); }
#farm-map .wt--watch   { color: var(--status-watch); }
#farm-map .wt--unknown { color: var(--status-unknown); }

#farm-map .wt-blade { fill: currentColor; stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.3; }
#farm-map .wt-hub   { fill: currentColor; stroke: var(--bg-0); stroke-width: 0.5; }
#farm-map .wt--fault .wt-blade { filter: drop-shadow(0 0 4px rgba(224, 57, 46, 0.55)); }
#farm-map .wt-label {
    fill: var(--text-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    user-select: none;
}
#farm-map g.wt:hover .wt-label,
#farm-map .wt--sel .wt-label { fill: var(--text-1); }

#farm-map .wt-ring {
    display: none;
    fill: none;
    stroke: var(--focus);
    stroke-width: 1.2;
}
#farm-map .wt--sel .wt-ring { display: block; }

#farm-map.replay-running .wt--live .wt-rotor,
#farm-map.replay-running .wt--live .wt-ring { animation: softPulse 1.8s ease-in-out infinite; }

#farm-map .scalebar-line { stroke: var(--text-3); stroke-width: 1; }
#farm-map .scalebar-label,
#farm-map .north-label {
    fill: var(--text-3);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
}
#farm-map .north-arrow { fill: var(--text-3); }

/* ================= detail view ================= */

.detail-head { justify-content: flex-start; }
.detail-head h2 { color: var(--text-1); letter-spacing: 0.1em; }
.detail-head .pane-note { margin-left: auto; }

.detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    /* Rows share the stage's height so the view is not dense on top and dead
       below; each card's canvas takes whatever its row grants. */
    grid-auto-rows: minmax(190px, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    gap: 10px;
}
.chart-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chart-card canvas { flex: 1 1 auto; min-height: 0; }
.chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.chart-head .unit {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-3);
    text-transform: none;
    letter-spacing: 0;
}
.chart-card canvas { display: block; }

.spec-sheet {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    max-width: 520px;
}
.spec-sheet h3 { margin-bottom: 8px; }

.nostream {
    max-width: 520px;
    border: 1px dashed var(--border-lt);
    border-radius: var(--radius);
    padding: 14px 16px;
    color: var(--text-2);
    font-size: 12px;
}
.nostream-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--amber);
    margin-bottom: 6px;
}
.nostream p { margin: 0 0 6px; line-height: 1.5; }
.nostream-note { color: var(--text-3); font-style: italic; }

/* Verdict history (live pair detail) */
.verdict-history {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.verdict-history h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.verdict-strip {
    display: flex;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--bg-3);
    margin-bottom: 8px;
}
.verdict-strip i { flex: 1 1 0; min-width: 2px; background: var(--status-unknown); }
.verdict-strip i.healthy { background: var(--status-healthy); }
.verdict-strip i.fault   { background: var(--status-fault); }
.verdict-strip i.watch   { background: var(--status-watch); }
.verdict-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 10px;
}
.verdict-list li {
    display: grid;
    grid-template-columns: 70px 60px 1fr;
    gap: 10px;
    padding: 3px 2px;
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.verdict-list li .v-class { text-transform: uppercase; letter-spacing: 0.05em; }
.verdict-list li.healthy .v-class { color: var(--green); }
.verdict-list li.fault   .v-class { color: var(--red-bright); }
.verdict-list li.unknown .v-class { color: var(--text-3); }

/* ================= right rail (inspector) ================= */

.inspect {
    background: var(--bg-1);
    border-left: 1px solid var(--border);
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.inspect-scroll {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.inspect-empty p { padding: 4px 12px 10px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 11px; }

.inspect-head h2 { color: var(--text-1); font-size: 13px; letter-spacing: 0.1em; }
.ins-title {
    padding: 6px 12px 0;
    font-size: 12px;
    color: var(--text-2);
}
.ins-sec { padding: 10px 12px 4px; }
.ins-sec h3 { display: block; margin-bottom: 6px; }

/* Quality chip next to the turbine id. */
.chip {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: var(--radius);
    border: 1px solid var(--border-lt);
    color: var(--text-2);
    background: var(--bg-2);
}
.chip-live { color: var(--blue-node); border-color: rgba(87, 167, 216, 0.4); }
.chip-scada { color: var(--amber); border-color: rgba(226, 163, 59, 0.4); }
.chip-cat { color: var(--text-3); }

/* kv rows — the DNA's kv-rows-not-tables. Every value mono + quality tag. */
.kv { display: flex; flex-direction: column; }
.kv-row {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: baseline;
    column-gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
}
.kv-row:last-child { border-bottom: none; }
.kv-key {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
}
.kv-val {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.kv-tag {
    font-family: var(--font-mono);
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 1px 4px;
    background: var(--bg-2);
}

/* Verdict box */
.verdict-box { min-height: 20px; }
.verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
}
.verdict .v-class {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-2);
}
.verdict.healthy { border-color: rgba(63, 194, 60, 0.45); }
.verdict.healthy .v-class { color: var(--green); }
.verdict.fault { border-color: rgba(224, 57, 46, 0.55); background: rgba(224, 57, 46, 0.08); }
.verdict.fault .v-class { color: var(--red-bright); }
.verdict.watch .v-class { color: var(--amber); }
.verdict .v-votes {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.verdict .v-tag {
    font-family: var(--font-mono);
    font-size: 8.5px;
    text-transform: uppercase;
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 1px 4px;
    margin-left: auto;
}
.verdict .v-note { font-size: 11px; color: var(--text-3); line-height: 1.45; }

/* ================= event feed ================= */

.feed-sec {
    border-top: 1px solid var(--border);
    margin-top: 10px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    padding-bottom: 10px;
}
.event-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* An empty feed states that it is empty — an answer, not blank space. */
.event-empty {
    color: var(--text-3);
    font-size: 11px;
    font-family: var(--font-mono);
    padding: 4px 2px;
}
@keyframes slideIn {
    from { transform: translateY(-4px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.feed-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    row-gap: 1px;
    align-items: baseline;
    background: var(--bg-2);
    border-left: 2px solid var(--text-3);
    border-radius: var(--radius);
    padding: 6px 9px;
    font-size: 11px;
    animation: slideIn 280ms var(--ease-out);
}
.feed-item.critical { border-left-color: var(--red); background: rgba(224, 57, 46, 0.08); }
.feed-item.warning  { border-left-color: var(--amber); }
.feed-item.info     { border-left-color: var(--blue-node); }
.feed-item.recovery { border-left-color: var(--green); background: rgba(63, 194, 60, 0.07); }
.feed-item .fi-wt {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.05em;
    color: var(--text-1);
    background: var(--bg-3);
    border-radius: 2px;
    padding: 1px 5px;
}
.feed-item .fi-msg { color: var(--text-2); }
.feed-item .fi-ctx {
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.feed-item .fi-ts {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* ================= narrow screens ================= */

@media (max-width: 1100px) {
    body { overflow: auto; }
    .console {
        grid-template-columns: 1fr;
        height: auto;
    }
    .rail { border-right: none; border-bottom: 1px solid var(--border); }
    .turbine-list { max-height: 240px; }
    .inspect { border-left: none; border-top: 1px solid var(--border); }
    .farm-map { min-height: 380px; }
}