/* Uses only tokens from tokens.css (design/DESIGN.md §57) */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg-0); color: var(--color-text-0); font: 400 14px/1.45 var(--font-sans); }
a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }

/* §8 shell */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { background: var(--color-bg-1); border-right: 1px solid var(--color-border); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); }
.logo { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; color: inherit; text-decoration: none; }
.logo img { display: block; width: 100%; max-width: 180px; height: auto; }
.logo-mark { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--color-primary); }
.logo b { display: block; font-size: 16px; font-weight: 650; letter-spacing: .04em; }
.logo small { color: var(--color-text-2); font-size: 11px; }
.sidebar-foot { margin-top: auto; color: var(--color-text-2); font-size: 11px; }

/* §10 navigation */
.nav a { display: block; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-1); border-radius: var(--radius-sm); color: var(--color-text-1); }
.nav a:hover { background: var(--color-bg-4); }
.nav a.active { background: var(--color-primary); color: var(--color-text-0); font-weight: 600; }

/* §9 header */
.topbar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-8); background: var(--color-bg-0); border-bottom: 1px solid var(--color-border); }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 650; }
.topbar small { color: var(--color-text-2); font-size: 12px; }
.topbar-right { display: flex; align-items: center; gap: var(--space-6); }
.live { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--status-online); }
.live.lost { color: var(--status-critical); }
.bell { position: relative; }
.bell i { position: absolute; top: -6px; right: -10px; background: var(--status-critical); border-radius: var(--radius-pill); font-size: 10px; font-style: normal; padding: 1px 5px; }
.user { display: flex; align-items: center; gap: var(--space-2); }
.avatar { width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--color-primary-muted); display: grid; place-items: center; font-weight: 700; }
.content { padding: var(--space-6) var(--space-8); }

.panel { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); }
.placeholder { color: var(--color-text-2); }
.muted { color: var(--color-text-2); font-size: 12px; }

/* §31 inputs */
.search, input[type=password], input[type=text] { background: var(--color-bg-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-0); padding: var(--space-2) var(--space-3); font: inherit; }
input:focus { outline: none; border-color: var(--color-border-strong); box-shadow: 0 0 0 1px var(--color-primary); }

/* §16 badges */
.badge { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px var(--space-2); border-radius: var(--radius-pill); border: 1px solid var(--color-border); }
.badge.critical { color: var(--status-critical); border-color: var(--status-critical); }
.badge.warning { color: var(--status-warning); border-color: var(--status-warning); }
.badge.info { color: var(--status-info); border-color: var(--status-info); }
.badge.ok { color: var(--status-online); border-color: var(--status-online); }

/* §30 buttons */
.btn { background: var(--color-primary); color: var(--color-text-0); border: 0; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font: inherit; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.btn:hover { background: var(--color-primary-hover); }

/* §28 login */
.login { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--color-bg-1), var(--color-bg-0) 70%); }
.login-card { width: min(360px, 90vw); display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.login-logo { display: block; width: min(300px, 80vw); height: auto; }
.login-tag { color: var(--color-text-1); line-height: 1.5; }
.login-card form { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); text-align: left; }
.login-card input[type=password] { width: 100%; }
.login-remember { display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-1); font-size: 12px; }
.login-err { color: var(--status-critical); min-height: 18px; font-size: 13px; }
.login-status { color: var(--status-online); font-size: 12px; }
.login-status.lost { color: var(--status-critical); }

/* §11 KPI cards, §33-§37 states, §41 overview */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.kpi { min-height: 104px; background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); }
.kpi-label { color: var(--color-text-2); font-size: 12px; }
.kpi-value { font-size: 28px; font-weight: 650; margin-top: var(--space-2); }
.kpi-unit { font-size: 14px; color: var(--color-text-1); margin-left: var(--space-2); font-weight: 400; }
.kpi.bad .kpi-value, .kpi.stale .kpi-value { color: var(--color-text-disabled); }
.kpi.empty .kpi-value { color: var(--color-text-disabled); }
.warn-icon { color: var(--status-warning); font-size: 16px; }
.skeleton { position: relative; overflow: hidden; }
.skeleton i { display: block; height: 14px; width: 60%; margin-bottom: var(--space-3); background: var(--color-bg-4); border-radius: var(--radius-sm); }
.chart-skeleton { height: 200px; background: var(--color-bg-3); }
.banner.lost { background: var(--color-bg-3); border: 1px solid var(--status-critical); color: var(--status-critical); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.error-state { border-color: var(--status-critical); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.error-state b, .empty-state b { letter-spacing: .06em; }
.empty-state { color: var(--color-text-1); }
.plant-status { margin-bottom: var(--space-4); color: var(--color-text-1); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill); margin-right: var(--space-2); background: var(--status-offline); }
.dot.ok { background: var(--status-online); }
.dot.warning { background: var(--status-warning); }
.dot.critical { background: var(--status-critical); }
.overview-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); }
.overview-row h2 { margin: 0 0 var(--space-3); font-size: 14px; font-weight: 600; color: var(--color-text-1); }
.trend { min-height: 180px; }
.dev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dev-list li { display: flex; align-items: center; gap: var(--space-2); }
.dev-list .badge { margin-left: auto; }
.report-access { margin-bottom: var(--space-4); }
#report-host { margin-bottom: var(--space-4); }
.report-bar { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.report-bar .btn { text-decoration: none; }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th, .report-table td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; }
.report-table td.num { text-align: right; }
.report-table tr.total td { font-weight: 700; }
.report-skeleton { height: 96px; border-radius: var(--radius-sm); }

/* SCR-002 devices */
.dev-card { display: flex; flex-direction: column; gap: var(--space-3); }
.dev-card.offline { color: var(--color-text-disabled); }
.dev-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dev-vals { display: flex; flex-direction: column; gap: var(--space-2); }
.dev-val { display: flex; justify-content: space-between; }
.dev-val.bad, .dev-val.stale, .dev-val.none { color: var(--color-text-disabled); }
.trend-bar { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.trend-bar label { display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-1); }
.trend-bar select { background: var(--color-bg-1); color: var(--color-text-0); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); font: inherit; }
.trend-presets { display: flex; gap: var(--space-2); }
.btn.ghost { background: transparent; color: var(--color-text-1); border: 1px solid var(--color-border); }
.btn.active { background: var(--color-primary); }
.trend-chart { width: 100%; min-height: 280px; }
.trend-loading { min-height: 280px; }

.alarm-table { width: 100%; border-collapse: collapse; }
.alarm-table th, .alarm-table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.alarm-table tbody tr { cursor: pointer; }
.alarm-table tbody tr.selected { background: var(--color-bg-1); }
.alarm-detail { margin-top: var(--space-4); }
.alarm-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); }

/* SCR-005 simulator console: distinct accent, tokens only */
.sim-console { border: 1px dashed var(--color-orange); border-radius: var(--radius-md); padding: var(--space-4); font-family: var(--font-mono); display: flex; flex-direction: column; gap: var(--space-4); }
.sim-banner { background: var(--color-orange); color: var(--color-bg-0); font-weight: 700; letter-spacing: .12em; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.sim-faults { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.sim-fault { border-color: var(--color-border-strong); }
.sim-fault.active { border-color: var(--color-red); box-shadow: var(--shadow-glow-critical); }
.sim-console .btn.danger { background: var(--color-red); color: var(--color-bg-0); }
.sim-console select { background: var(--color-bg-1); color: var(--color-text-0); border: 1px solid var(--color-orange); border-radius: var(--radius-sm); padding: var(--space-2); font: inherit; }
.sim-counters { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); }

/* Watch page: monitoring only, tokens only */
.watch-form { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: end; margin-bottom: var(--space-4); }
.watch-form label { display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-text-1); }
.watch-form select { background: var(--color-bg-1); color: var(--color-text-0); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); font: inherit; }
.watch-err { color: var(--status-critical); }
.watch-group { margin-bottom: var(--space-6); }
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.watch-card { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--space-3); }
.watch-card header { display: flex; justify-content: space-between; align-items: center; }
.watch-card.warning { border-color: var(--status-warning); }
.watch-card.critical { border-color: var(--status-critical); box-shadow: var(--shadow-glow-critical); }
.watch-card.bad { color: var(--color-text-disabled); }
.watch-val, .watch-counter, .watch-lamp { font-size: 24px; font-weight: 700; display: flex; align-items: baseline; gap: var(--space-2); }
.watch-counter { font-size: 32px; }
.watch-lamp { align-items: center; }
.watch-unit { color: var(--color-text-2); font-size: 12px; font-weight: 400; }
.lamp { width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--status-offline); }
.lamp.on { background: var(--status-online); }
.watch-trend { width: 100%; min-height: 90px; }
.gauge-svg { width: 100%; max-width: 160px; }
.gauge-track, .gauge-fill { fill: none; stroke-width: 8; stroke-linecap: round; }
.gauge-track { stroke: var(--color-border); }
.gauge-fill { stroke: var(--status-online); }
.watch-card.warning .gauge-fill { stroke: var(--status-warning); }
.watch-card.critical .gauge-fill { stroke: var(--status-critical); }
.watch-card.warning .watch-val, .watch-card.warning .watch-counter { color: var(--status-warning); }
.watch-card.critical .watch-val, .watch-card.critical .watch-counter { color: var(--status-critical); }

/* SLD page (read-only single-line diagram) */
.sld-panel { padding: var(--space-4); }
.sld-svg { width: 100%; max-width: 900px; height: auto; display: block; margin: 0 auto; }
.sld-line { fill: none; stroke: var(--color-border-strong); stroke-width: 3; }
.sld-line.flow { stroke: var(--status-running); stroke-dasharray: 8 6; animation: sld-flow 0.8s linear infinite; }
@keyframes sld-flow { to { stroke-dashoffset: -14; } }
.sld-el { cursor: pointer; }
.sld-el:focus { outline: none; }
.sld-el:focus-visible rect, .sld-el:focus-visible circle { stroke: var(--color-primary-hover); }
.sld-gen circle, .sld-meter rect { fill: var(--color-bg-3); stroke: var(--status-offline); stroke-width: 2; }
.sld-gen.RUNNING circle { stroke: var(--status-running); }
.sld-gen.STOPPED circle { stroke: var(--status-offline); }
.sld-gen.TRIPPED circle { stroke: var(--status-critical); animation: sld-blink 1s step-end infinite; }
.sld-gen.unknown circle, .sld-meter.unknown rect, .sld-cb.unknown rect { stroke: var(--status-bad-quality); stroke-dasharray: 4 3; }
.sld-meter.online rect { stroke: var(--status-info); }
.sld-cb rect { stroke-width: 2; }
.sld-cb.closed rect { fill: var(--status-running); stroke: var(--status-running); }
.sld-cb.open rect { fill: var(--color-bg-0); stroke: var(--status-warning); }
.sld-cb.unknown rect { fill: var(--color-bg-3); }
@keyframes sld-blink { 50% { stroke: var(--color-bg-3); fill: var(--color-bg-0); } }
.sld-glyph { fill: var(--color-text-0); font: 700 20px var(--font-sans); }
.sld-label { fill: var(--color-text-1); font: 12px var(--font-mono); }
.sld-label.name { fill: var(--color-text-0); font-family: var(--font-sans); font-weight: 600; }
.sld-label.start { text-anchor: start; }
.sld-label.mid { text-anchor: middle; }
.sld-label.end { text-anchor: end; }
.sld-detail { margin-top: var(--space-4); }
@media (prefers-reduced-motion: reduce) {
  .sld-line.flow, .sld-gen.TRIPPED circle { animation: none; }
}
.settings { display: flex; flex-direction: column; gap: var(--space-4); max-width: 520px; }
.settings-banner { background: var(--color-bg-3); border: 1px solid var(--status-warning); border-radius: var(--radius-sm); color: var(--status-warning); padding: var(--space-3) var(--space-4); font-size: 13px; }
.settings-group { display: flex; flex-direction: column; gap: var(--space-2); }
.settings-opt { display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-1); }
.settings-actions { display: flex; gap: var(--space-4); align-items: center; }
.settings-msg.err { color: var(--status-critical); }

/* wind turbine scene: 3D turbine in the dusk sky, glass callouts tied to the model with leader lines */
.turbine-panel { margin-bottom: var(--space-4); padding: 0; overflow: hidden; }
.tw-scene { position: relative; height: 560px; border-radius: var(--radius-lg); overflow: hidden;
  /* the site photo; a light shade top and bottom keeps the glass cards readable */
  background:
    linear-gradient(180deg, var(--scene-shade-top) 0%, transparent 30%, transparent 70%, var(--scene-shade-bottom) 100%),
    url("/static/img/turbine_bg.jpg") center 46% / cover no-repeat, var(--sky-0); }
.turbine-3d { position: absolute; inset: 0; min-width: 0; }
.turbine-3d canvas { display: block; width: 100%; height: 100%; }
.turbine-fallback { padding: var(--space-4); }
.tw-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tw-lines polyline { fill: none; stroke: var(--glass-line); stroke-width: 1.2; }
.tw-lines circle { fill: var(--color-cyan); filter: drop-shadow(0 0 4px var(--color-cyan)); }
.tw-glass { position: absolute; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-card); color: var(--color-text-0); }
.tw-label { font-size: 12px; color: var(--color-text-1); }
.tw-picker { left: var(--space-5); top: var(--space-5); display: flex; gap: var(--space-1); padding: var(--space-1); z-index: 2; }
.tw-pick { background: transparent; border: 0; border-radius: var(--radius-md); color: var(--color-text-1); font: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: .03em; padding: var(--space-2) var(--space-3); cursor: pointer; }
.tw-pick:hover { color: var(--color-text-0); background: var(--glass-border); }
.tw-pick[aria-pressed="true"] { background: var(--color-primary); color: var(--color-text-0); }
.tw-info { left: var(--space-5); top: calc(var(--space-5) + 52px); width: min(300px, 40%); padding: var(--space-5); }
.tw-info h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.tw-status { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--glass-border); font-weight: 600; color: var(--status-online); }
.tw-status i { width: 10px; height: 10px; border-radius: var(--radius-pill); background: currentColor; }
.tw-status.critical { color: var(--status-critical); }
.tw-status.off { color: var(--status-offline); }
.tw-info dl { margin: 0; display: grid; gap: var(--space-3); }
.tw-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.tw-row dt { color: var(--color-text-1); font-size: 14px; }
.tw-row dd { margin: 0; white-space: nowrap; }
.tw-row b { font-size: 19px; font-weight: 700; }
.tw-row small, .tw-value small { color: var(--color-text-1); font-size: 12px; margin-left: 3px; }
.tw-compass { right: var(--space-5); top: var(--space-5); width: 240px; padding: var(--space-4); }
.tw-compass-body { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.tw-compass-body b { display: block; font-size: 24px; font-weight: 700; }
.tw-compass-body span { display: block; color: var(--color-text-1); font-size: 16px; margin-bottom: var(--space-2); }
.tw-dial { width: 104px; height: 104px; flex: none; }
.tw-dial circle { fill: none; stroke: var(--glass-border); stroke-width: 1; }
.tw-dial line { stroke: var(--color-text-2); stroke-width: .8; }
.tw-dial text { fill: var(--color-text-1); font-size: 9px; text-anchor: middle; dominant-baseline: middle; }
.tw-dial path { fill: var(--color-cyan); }
.tw-dial g { transition: transform .8s ease; }
.tw-callout { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); min-width: 150px; }
.tw-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--color-text-1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tw-value { display: flex; align-items: baseline; gap: 2px; }
.tw-value b { font-size: 19px; font-weight: 700; }
.tw-spark { width: 54px; height: 16px; margin-left: var(--space-2); }
.tw-spark polyline { fill: none; stroke: var(--status-online); stroke-width: 1.5; }
.tw-bar { display: block; height: 3px; margin-top: var(--space-2); background: var(--glass-border); border-radius: var(--radius-pill); overflow: hidden; }
.tw-bar i { display: block; height: 100%; width: 0; background: var(--status-online); transition: width .6s ease; }
.tw-compass .tw-bar i { background: var(--color-primary); }
.tw-c-hub { left: 32%; top: 10%; }
.tw-c-nacelle { left: 64%; top: 28%; }
.tw-c-wind { left: 30%; top: 40%; }
.tw-c-tower { left: 60%; top: 52%; }
.tw-c-cabin { left: 64%; top: 76%; }
@media (max-width: 900px) {
  /* narrow: the 3D view on top, the readings below it (no callouts covering the turbine) */
  .tw-scene { height: auto; display: flex; flex-direction: column; }
  .turbine-3d { position: relative; inset: auto; height: 360px; }
  .tw-callout, .tw-lines { display: none; }
  .tw-info { position: relative; top: auto; left: auto; width: auto; margin: 0 var(--space-3) var(--space-3); padding: var(--space-4); }
  .tw-info dl { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
  .tw-row { flex-direction: column; align-items: flex-start; gap: 0; }
  .tw-compass { top: calc(var(--space-3) + 50px); right: var(--space-3); width: auto; padding: var(--space-3); }
  .tw-dial { width: 64px; height: 64px; }
  .tw-picker { left: var(--space-3); right: var(--space-3); top: var(--space-3); overflow-x: auto; justify-content: space-between; }
}