@layer reset, tokens, base, components, layouts, responsive, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }
  button, input, select { font: inherit; }
  button { border: 0; }
  svg { display: block; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --bg: #030504;
    --bg-elevated: #070a08;
    --panel: rgba(10, 13, 11, .92);
    --panel-strong: rgba(14, 18, 15, .96);
    --line: rgba(232, 235, 226, .23);
    --line-soft: rgba(232, 235, 226, .105);
    --line-faint: rgba(232, 235, 226, .055);
    --text: #eceee7;
    --muted: #a8ada4;
    --dim: #6c726b;
    --good: #8ec979;
    --warn: #d4a34c;
    --bad: #d76a5e;
    --accent: #d8d9ce;
    --info: #77b9d6;
    --shadow: rgba(0, 0, 0, .48);
    --font-ui: "Arial Narrow", "Aptos Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
    --font-display: "Bodoni 72", Didot, "Times New Roman", serif;
    --space-1: clamp(5px, .35vw, 8px);
    --space-2: clamp(8px, .55vw, 12px);
    --space-3: clamp(12px, .8vw, 18px);
    --space-4: clamp(16px, 1.1vw, 24px);
    --radius: 2px;
    --header-h: clamp(132px, 16vh, 176px);
    --dock-h: clamp(64px, 8vh, 84px);
    --motion-fast: 140ms;
    --motion: 260ms;
  }
  :root[data-condition="adverse"] { --good: #c9b25f; --warn: #d99a45; --accent: #d9cfb2; }
  :root[data-condition="critical"] { --good: #d98274; --warn: #e3a15d; --accent: #e1c2bd; }
  :root[data-density="compact"] { --space-2: 7px; --space-3: 10px; --space-4: 14px; }
}

@layer base {
  html { background: var(--bg); }
  body {
    min-height: 100dvh;
    overflow: hidden;
    background:
      radial-gradient(circle at 16% 12%, rgba(255,255,255,.028), transparent 24%),
      radial-gradient(circle at 83% 85%, rgba(255,255,255,.018), transparent 29%),
      linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.009) 1px, transparent 1px),
      var(--bg);
    background-size: auto, auto, 56px 56px, 56px 56px, auto;
    color: var(--text);
    font-family: var(--font-ui);
    letter-spacing: .075em;
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.22));
  }
  button { color: inherit; background: transparent; cursor: pointer; }
  button:focus-visible, input:focus-visible, select:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
  .icon-sprite { width: 0; height: 0; position: absolute; overflow: hidden; }
}

@layer components {
  .app-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    width: 100%;
    min-height: 100dvh;
    padding: var(--space-2);
  }
  .command-bar {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(360px, 1.6fr) minmax(230px, 1fr);
    grid-template-areas:
      "status brand clock"
      "nav nav controls";
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: var(--header-h);
    padding: var(--space-3) var(--space-4) var(--space-2);
    border: 1px solid var(--line-soft);
    background: rgba(0,0,0,.34);
    box-shadow: inset 0 0 48px rgba(0,0,0,.32);
  }
  .status-cluster { grid-area: status; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .eyebrow, .panel-code, .freshness, .header-date, .hero-period {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: clamp(9px, .67vw, 12px);
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .sanctuary-mark { position: relative; width: clamp(40px, 3.5vw, 58px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; flex: 0 0 auto; }
  .sanctuary-mark::before, .sanctuary-mark::after { content: ""; position: absolute; background: var(--line); }
  .sanctuary-mark::before { left: 50%; top: 12%; width: 1px; height: 76%; }
  .sanctuary-mark::after { left: 12%; top: 50%; width: 76%; height: 1px; }
  .sanctuary-mark span { position: absolute; inset: 23%; border: 1px solid var(--line); border-radius: 50%; }
  .global-state { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--good); font-family: var(--font-mono); font-size: clamp(11px, .82vw, 14px); text-transform: uppercase; white-space: nowrap; }
  .state-dot { width: 7px; aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
  .brand-block { grid-area: brand; text-align: center; min-width: 0; }
  .brand-title { font-family: var(--font-display); font-size: clamp(30px, 3.5vw, 58px); font-weight: 400; letter-spacing: .045em; line-height: .9; white-space: nowrap; }
  .brand-subtitle { margin-top: 10px; color: var(--muted); font-size: clamp(10px, .85vw, 15px); letter-spacing: .32em; text-transform: uppercase; }
  .clock-cluster { grid-area: clock; text-align: right; justify-self: end; }
  .header-time { display: block; font-family: var(--font-mono); font-size: clamp(24px, 2vw, 34px); letter-spacing: .08em; }
  .header-date { margin-top: 4px; }
  .primary-nav { grid-area: nav; display: flex; gap: 5px; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .primary-nav::-webkit-scrollbar { display: none; }
  .nav-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: max-content; min-height: 38px; padding: 8px 13px; border: 1px solid var(--line-soft); color: var(--muted); background: rgba(255,255,255,.01); font-size: clamp(9px, .69vw, 12px); letter-spacing: .12em; text-transform: uppercase; transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast); }
  .nav-button svg, .icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .nav-button:hover, .nav-button.active { color: var(--text); border-color: var(--line); background: rgba(255,255,255,.045); }
  .utility-controls { grid-area: controls; display: flex; gap: 5px; justify-content: flex-end; align-items: center; }
  .utility-button, .icon-button, .text-button, .range-selector button, .preset-button, .timer-button {
    border: 1px solid var(--line-soft);
    color: var(--muted);
    background: rgba(0,0,0,.32);
    transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
  }
  .utility-button { min-height: 34px; padding: 7px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
  .icon-button { display: grid; place-items: center; width: 34px; height: 34px; }
  .utility-button:hover, .icon-button:hover, .text-button:hover, .range-selector button:hover, .preset-button:hover, .timer-button:hover { color: var(--text); border-color: var(--line); }
  .workspace { min-height: 0; overflow: hidden; }
  .view { display: none; height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-soft) transparent; }
  .view.active { display: block; animation: view-in var(--motion) ease both; }
  @keyframes view-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
  .dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--space-2); min-height: 100%; }
  .panel { min-width: 0; min-height: 0; overflow: hidden auto; padding: var(--space-3); border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)), var(--panel); box-shadow: inset 0 0 36px rgba(0,0,0,.2); scrollbar-width: none; }
  .panel::-webkit-scrollbar { width: 0; height: 0; }
  .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line-soft); }
  .panel-header h2 { margin: 0; font-size: clamp(11px, .82vw, 15px); font-weight: 500; letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inline-state { color: var(--muted); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; white-space: nowrap; }
  .inline-state.good { color: var(--good); }
  .inline-state.warn { color: var(--warn); }
  .inline-state.bad { color: var(--bad); }
  .hero-clock { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; font-family: var(--font-mono); font-size: clamp(52px, 5vw, 88px); font-weight: 300; line-height: .88; letter-spacing: .03em; }
  .hero-clock small { margin-top: 8px; color: var(--muted); font-size: .34em; }
  .hero-period { margin: 7px 0 16px; }
  .date-stack { display: grid; gap: 5px; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-family: var(--font-mono); text-transform: uppercase; }
  .date-stack strong { font-size: clamp(12px, .85vw, 15px); font-weight: 500; }
  .date-stack span { color: var(--muted); font-size: 10px; }
  .solar-countdown { margin-top: 14px; }
  .countdown-meta, .solar-ends { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
  .countdown-meta { margin-bottom: 8px; color: var(--muted); }
  .countdown-meta strong { color: var(--text); font-weight: 500; }
  .solar-ends { margin-top: 7px; color: var(--dim); }
  .progress-track { height: 6px; overflow: hidden; border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); }
  .progress-track i { display: block; width: var(--progress, 0%); height: 100%; background: var(--accent); transition: width 600ms ease; }
  .weather-current { display: grid; grid-template-columns: 1.05fr 1fr 1.2fr; gap: var(--space-4); align-items: center; min-height: 48%; }
  .temperature { font-family: var(--font-mono); font-size: clamp(58px, 5.5vw, 96px); line-height: .9; letter-spacing: -.05em; }
  .feels, .weather-range { margin-top: 10px; font-family: var(--font-mono); font-size: clamp(10px, .75vw, 13px); text-transform: uppercase; }
  .weather-range { color: var(--muted); }
  .weather-symbol { display: grid; place-items: center; gap: 10px; text-align: center; color: var(--muted); }
  .weather-symbol svg { width: clamp(72px, 7vw, 120px); height: clamp(72px, 7vw, 120px); fill: none; stroke: var(--text); stroke-width: 1.15; }
  .weather-symbol strong { font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
  .weather-details { display: grid; align-self: stretch; }
  .detail-row, .metric-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 34px; border-bottom: 1px solid var(--line-faint); font-family: var(--font-mono); font-size: clamp(9px, .66vw, 12px); }
  .detail-row:last-child, .metric-row:last-child { border-bottom: 0; }
  .detail-row svg, .metric-row svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .detail-row span, .metric-label { color: var(--muted); text-transform: uppercase; }
  .metric-value { text-align: right; white-space: nowrap; }
  .status-good { color: var(--good); }
  .status-warn { color: var(--warn); }
  .status-bad { color: var(--bad); }
  .forecast-strip { display: grid; grid-template-columns: repeat(7, minmax(72px, 1fr)); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
  .forecast-strip::-webkit-scrollbar { display: none; }
  .forecast-day { display: grid; justify-items: center; gap: 7px; min-width: 72px; padding: 5px 8px; border-right: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
  .forecast-day:last-child { border-right: 0; }
  .forecast-day svg { width: 27px; height: 27px; fill: none; stroke: var(--text); stroke-width: 1.3; }
  .forecast-day .low { color: var(--muted); }
  .forecast-day .precip { color: var(--dim); font-size: 9px; }
  .agenda-list, .event-log, .timeline-list, .maintenance-list { display: grid; }
  .agenda-item, .event-item, .timeline-item, .maintenance-item { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 47px; padding: 8px 0; border-bottom: 1px solid var(--line-faint); font-family: var(--font-mono); }
  .agenda-item:last-child, .event-item:last-child, .timeline-item:last-child, .maintenance-item:last-child { border-bottom: 0; }
  .agenda-marker { align-self: stretch; border-radius: 2px; background: var(--info); }
  .agenda-item:nth-child(2) .agenda-marker { background: var(--good); }
  .agenda-item:nth-child(3) .agenda-marker { background: var(--warn); }
  .agenda-item:nth-child(4) .agenda-marker { background: #a982d2; }
  .agenda-item strong, .timeline-item strong, .maintenance-item strong { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 500; }
  .agenda-item small, .timeline-item small, .maintenance-item small { color: var(--muted); font-size: 9px; }
  .agenda-time { color: var(--muted); font-size: 10px; text-align: right; white-space: nowrap; }
  .metric-table { display: grid; }
  .chart-stack { display: grid; min-height: 0; }
  .chart-caption { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--muted); }
  .chart-caption strong { color: var(--text); font-size: 24px; font-weight: 400; }
  .line-chart { position: relative; min-height: 125px; width: 100%; }
  .line-chart svg { width: 100%; height: 100%; min-height: inherit; }
  .chart-large { min-height: 210px; }
  .chart-grid { stroke: var(--line-faint); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
  .chart-axis { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .chart-line { fill: none; stroke: var(--text); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
  .chart-line.good, .chart-line.generation { stroke: var(--good); }
  .chart-line.warn, .chart-line.load { stroke: var(--warn); }
  .chart-line.reserve { stroke: var(--info); }
  .chart-area { fill: rgba(255,255,255,.035); }
  .chart-text { fill: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; }
  .range-selector { display: flex; gap: 4px; }
  .range-selector button { padding: 4px 7px; font-family: var(--font-mono); font-size: 9px; }
  .range-selector button.active { color: var(--text); border-color: var(--line); }
  .micro-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-soft); }
  .micro-metric { padding: 9px 8px 0; border-right: 1px solid var(--line-soft); text-align: center; font-family: var(--font-mono); }
  .micro-metric:last-child { border-right: 0; }
  .micro-metric span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
  .micro-metric strong { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; }
  .protocol-summary { display: grid; gap: 12px; }
  .protocol-name { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; }
  .protocol-progress { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--font-mono); font-size: 10px; }
  .protocol-steps { display: grid; gap: 7px; }
  .protocol-step { display: flex; gap: 8px; align-items: center; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
  .protocol-step.done { color: var(--good); }
  .protocol-step i { display: grid; place-items: center; width: 15px; aspect-ratio: 1; border: 1px solid currentColor; }
  .text-button { padding: 5px 8px; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
  .status-dock { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: var(--dock-h); border: 1px solid var(--line-soft); background: rgba(0,0,0,.34); }
  .dock-item { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px var(--space-3); border-right: 1px solid var(--line-soft); font-family: var(--font-mono); min-width: 0; }
  .dock-item:last-child { border-right: 0; }
  .dock-item svg { width: 25px; height: 25px; fill: none; stroke: var(--text); stroke-width: 1.4; }
  .dock-item span, .dock-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dock-item span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
  .dock-item strong { margin-top: 3px; color: var(--good); font-size: 10px; font-weight: 500; text-transform: uppercase; }
  .gauge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: calc(100% - 4px); }
  .gauge-card { display: grid; place-items: center; align-content: center; min-width: 0; padding: 8px; border-right: 1px solid var(--line-soft); text-align: center; }
  .gauge-card:last-child { border-right: 0; }
  .gauge-ring { width: min(100%, 108px); aspect-ratio: 1; }
  .gauge-ring circle { fill: none; stroke-width: 7; }
  .gauge-ring .track { stroke: var(--line-soft); }
  .gauge-ring .value { stroke: var(--good); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dasharray 600ms ease; }
  .gauge-card strong { margin-top: -12px; font-family: var(--font-mono); font-size: 19px; font-weight: 400; }
  .gauge-card span { margin-top: 5px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
  .forecast-detailed { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .forecast-card { padding: 8px 10px; border-right: 1px solid var(--line-soft); text-align: center; font-family: var(--font-mono); }
  .forecast-card:last-child { border-right: 0; }
  .forecast-card strong, .forecast-card span { display: block; }
  .forecast-card strong { font-size: 11px; font-weight: 500; }
  .forecast-card svg { width: 30px; height: 30px; margin: 8px auto; fill: none; stroke: var(--text); }
  .forecast-card span { color: var(--muted); font-size: 9px; line-height: 1.7; }
  .sun-arc { min-height: 150px; }
  .sun-arc svg { width: 100%; height: 100%; min-height: 150px; }
  .sun-path { fill: none; stroke: var(--line); stroke-width: 1.5; }
  .sun-progress { fill: none; stroke: var(--warn); stroke-width: 2; }
  .sun-marker { fill: var(--warn); filter: drop-shadow(0 0 5px var(--warn)); }
  .guidance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .guidance-item { display: grid; grid-template-columns: 20px 1fr; gap: 9px; padding: 10px; border: 1px solid var(--line-faint); color: var(--good); font-family: var(--font-mono); font-size: 10px; line-height: 1.5; text-transform: uppercase; }
  .guidance-item.warn { color: var(--warn); }
  .guidance-item.bad { color: var(--bad); }
  .radial-feature { display: grid; place-items: center; align-content: center; height: calc(100% - 10px); text-align: center; }
  .radial-feature svg { width: min(72%, 210px); }
  .radial-feature .track { fill: none; stroke: var(--line-soft); stroke-width: 9; }
  .radial-feature .arc { fill: none; stroke: var(--good); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
  .radial-feature strong { margin-top: -8px; font-family: var(--font-mono); font-size: clamp(28px, 2.6vw, 44px); font-weight: 400; }
  .radial-feature span { margin-top: 5px; color: var(--muted); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
  .posture-card { display: grid; align-content: center; gap: 14px; height: calc(100% - 6px); }
  .posture-title { font-family: var(--font-mono); font-size: clamp(18px, 1.8vw, 30px); text-transform: uppercase; }
  .posture-title.good { color: var(--good); }
  .posture-title.warn { color: var(--warn); }
  .posture-title.bad { color: var(--bad); }
  .posture-copy { color: var(--muted); font-family: var(--font-mono); font-size: 10px; line-height: 1.7; text-transform: uppercase; }
  .posture-scale { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
  .posture-scale i { height: 10px; background: var(--line-soft); }
  .posture-scale i.on { background: var(--good); }
  .bar-list { display: grid; gap: 12px; }
  .bar-item { display: grid; grid-template-columns: minmax(95px, 1fr) minmax(90px, 1.8fr) auto; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 10px; }
  .bar-item span:first-child { color: var(--muted); text-transform: uppercase; }
  .bar-track { height: 8px; background: repeating-linear-gradient(90deg, var(--line-soft) 0 8px, transparent 8px 12px); overflow: hidden; }
  .bar-fill { width: var(--progress); height: 100%; background: var(--accent); }
  .bar-fill.good { background: var(--good); }
  .bar-fill.warn { background: var(--warn); }
  .bar-fill.bad { background: var(--bad); }
  .bar-item strong { font-weight: 400; white-space: nowrap; }
  .legend-row { display: flex; gap: 18px; justify-content: flex-end; color: var(--muted); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
  .legend-row span { display: flex; align-items: center; gap: 6px; }
  .legend { width: 14px; height: 2px; background: var(--text); }
  .legend.generation { background: var(--good); }
  .legend.load { background: var(--warn); }
  .legend.reserve { background: var(--info); }
  .flow-diagram { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 8px; min-height: 160px; }
  .flow-node { position: relative; display: grid; place-items: center; align-content: center; gap: 8px; min-height: 112px; padding: 12px; border: 1px solid var(--line-soft); text-align: center; font-family: var(--font-mono); }
  .flow-node:not(:last-child)::after { content: ""; position: absolute; left: calc(100% + 1px); top: 50%; width: 8px; height: 1px; background: var(--line); }
  .flow-node svg { width: 28px; height: 28px; fill: none; stroke: var(--text); stroke-width: 1.4; }
  .flow-node strong { font-size: 10px; font-weight: 500; text-transform: uppercase; }
  .flow-node span { color: var(--good); font-size: 10px; }
  .sanctuary-map { min-height: 330px; height: calc(100% - 4px); }
  .sanctuary-map svg { width: 100%; height: 100%; min-height: 330px; }
  .map-shell, .map-ring, .map-room { fill: none; stroke: var(--line); stroke-width: 1.2; }
  .map-room { stroke: var(--line-soft); }
  .map-zone { fill: rgba(255,255,255,.025); stroke: var(--line-soft); }
  .map-zone.active { fill: color-mix(in srgb, var(--good) 10%, transparent); stroke: var(--good); }
  .map-label { fill: var(--muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
  .map-sensor { fill: var(--good); filter: drop-shadow(0 0 4px var(--good)); }
  .control-list { display: grid; gap: 8px; }
  .control-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 46px; padding: 8px 0; border-bottom: 1px solid var(--line-faint); font-family: var(--font-mono); }
  .control-row:last-child { border-bottom: 0; }
  .control-row strong { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 500; text-transform: uppercase; }
  .control-row small { color: var(--muted); font-size: 9px; }
  .switch { position: relative; width: 42px; height: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
  .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--muted); transition: transform var(--motion-fast), background var(--motion-fast); }
  .switch.on::after { transform: translateX(20px); background: var(--good); }
  .event-item { grid-template-columns: 66px minmax(0,1fr) auto; min-height: 42px; }
  .event-time { color: var(--muted); font-size: 9px; }
  .event-message { font-size: 10px; }
  .event-level { font-size: 9px; text-transform: uppercase; }
  .protocol-workspace { display: grid; gap: 8px; }
  .protocol-item { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line-faint); font-family: var(--font-mono); font-size: 10px; line-height: 1.4; }
  .protocol-item:last-child { border-bottom: 0; }
  .protocol-check { display: grid; place-items: center; width: 20px; aspect-ratio: 1; border: 1px solid var(--line); color: transparent; }
  .protocol-item.done { color: var(--good); }
  .protocol-item.done .protocol-check { color: var(--good); border-color: var(--good); }
  .protocol-check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
  .interval-tool { display: grid; align-content: center; gap: 14px; height: calc(100% - 4px); }
  .timer-readout { font-family: var(--font-mono); font-size: clamp(40px, 4vw, 68px); line-height: 1; text-align: center; }
  .timer-state { color: var(--muted); font-family: var(--font-mono); font-size: 9px; text-align: center; text-transform: uppercase; }
  .timer-presets, .timer-actions { display: grid; gap: 5px; }
  .timer-presets { grid-template-columns: repeat(4, 1fr); }
  .timer-actions { grid-template-columns: repeat(2, 1fr); }
  .preset-button, .timer-button { min-height: 34px; padding: 6px; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
  .timer-button.primary { color: var(--good); border-color: color-mix(in srgb, var(--good) 60%, var(--line-soft)); }
  .maintenance-item { grid-template-columns: minmax(0,1fr) auto; }
  .maintenance-due { font-size: 9px; color: var(--warn); text-align: right; text-transform: uppercase; }
  .tally-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tally-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; min-height: 76px; padding: 10px; border: 1px solid var(--line-faint); font-family: var(--font-mono); }
  .tally-card span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
  .tally-card strong { display: block; margin-top: 5px; font-size: 22px; font-weight: 400; }
  .tally-actions { display: grid; gap: 3px; }
  .tally-actions button { width: 28px; height: 25px; border: 1px solid var(--line-soft); color: var(--muted); }
  .settings-group { display: grid; gap: 8px; }
  .setting-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(130px, 1fr); gap: 12px; align-items: center; min-height: 42px; padding: 7px 0; border-bottom: 1px solid var(--line-faint); font-family: var(--font-mono); font-size: 10px; }
  .setting-row:last-child { border-bottom: 0; }
  .setting-row label { color: var(--muted); text-transform: uppercase; }
  .setting-row select, .setting-row input[type="text"], .setting-row input[type="number"] { width: 100%; min-height: 32px; border: 1px solid var(--line-soft); border-radius: 0; padding: 5px 8px; color: var(--text); background: #070907; }
  .setting-row input[type="checkbox"] { justify-self: end; width: 18px; height: 18px; accent-color: var(--good); }
  .settings-action { min-height: 34px; padding: 7px 10px; border: 1px solid var(--line-soft); color: var(--muted); background: rgba(255,255,255,.02); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
  .module-settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .module-toggle { display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: center; min-height: 48px; padding: 9px; border: 1px solid var(--line-faint); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
  .module-toggle input { width: 17px; height: 17px; accent-color: var(--good); }
  .about-block { display: grid; gap: 9px; color: var(--muted); font-family: var(--font-mono); font-size: 10px; line-height: 1.6; }
  .about-block strong { color: var(--text); font-weight: 500; }
  .toast { position: fixed; right: 18px; bottom: 18px; z-index: 10; max-width: 360px; padding: 10px 14px; border: 1px solid var(--line); background: rgba(2,4,3,.96); color: var(--text); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--motion), transform var(--motion); }
  .toast.show { opacity: 1; transform: none; }
}

@layer layouts {
  .overview-grid { grid-template-rows: minmax(290px, 1.25fr) minmax(220px, .9fr); }
  .system-grid { grid-auto-rows: minmax(220px, auto); }
  .settings-grid { align-content: start; }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
  .span-12 { grid-column: span 12; }
}

@layer responsive {
  @media (min-width: 1500px) and (min-height: 820px) {
    .app-shell { height: 100dvh; }
    .view { overflow: hidden; }
    .overview-grid, .system-grid { height: 100%; }
    .system-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
    .settings-grid { height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 1260px) {
    body { overflow: auto; }
    .app-shell { min-height: 100dvh; }
    .command-bar { grid-template-columns: 1fr auto; grid-template-areas: "brand clock" "status controls" "nav nav"; }
    .status-cluster { justify-self: start; }
    .brand-block { text-align: left; }
    .brand-title { font-size: clamp(30px, 4vw, 48px); }
    .dashboard-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .span-3 { grid-column: span 4; }
    .span-4 { grid-column: span 4; }
    .span-5, .span-7, .span-8 { grid-column: span 8; }
    .span-12 { grid-column: span 8; }
    .overview-grid { grid-template-rows: auto; }
    .weather-panel { grid-column: span 8; }
    .agenda-panel, .systems-panel { grid-column: span 4; }
    .chart-panel { grid-column: span 5; }
    .protocol-panel { grid-column: span 3; }
    .status-dock { grid-template-columns: repeat(3, 1fr); }
    .dock-item:nth-child(3) { border-right: 0; }
    .dock-item:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
    .view { overflow: visible; }
    .workspace { overflow: visible; }
  }
  @media (max-width: 760px) {
    :root { --header-h: auto; }
    body { overflow-x: hidden; }
    .app-shell { padding: 6px; gap: 6px; }
    .command-bar { grid-template-columns: 1fr auto; grid-template-areas: "brand clock" "status status" "nav nav" "controls controls"; padding: 12px; }
    .brand-title { font-family: var(--font-ui); font-size: 22px; letter-spacing: .06em; text-transform: uppercase; white-space: normal; }
    .brand-subtitle { font-size: 8px; letter-spacing: .2em; text-align: left; }
    .header-time { font-size: 21px; }
    .header-date { display: none; }
    .status-cluster { width: 100%; }
    .sanctuary-mark { width: 34px; }
    .global-state { font-size: 10px; }
    .primary-nav { margin-inline: -12px; padding-inline: 12px; }
    .nav-button { min-height: 44px; padding: 8px 12px; }
    .nav-button span { display: none; }
    .nav-button svg { width: 20px; height: 20px; }
    .utility-controls { justify-content: stretch; }
    .utility-button { flex: 1; padding-inline: 6px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .span-3, .span-4, .span-5, .span-7, .span-8, .span-12, .weather-panel, .agenda-panel, .systems-panel, .chart-panel, .protocol-panel { grid-column: 1; }
    .panel { padding: 12px; min-height: 220px; }
    .time-panel { min-height: 330px; }
    .weather-panel { min-height: 520px; }
    .weather-current { grid-template-columns: 1fr 1fr; align-items: start; }
    .weather-details { grid-column: 1 / -1; }
    .forecast-strip { grid-template-columns: repeat(7, 88px); }
    .gauge-grid { grid-template-columns: repeat(3, minmax(90px, 1fr)); overflow-x: auto; }
    .guidance-grid { grid-template-columns: 1fr; }
    .flow-diagram { grid-template-columns: 1fr; }
    .flow-node:not(:last-child)::after { left: 50%; top: calc(100% + 1px); width: 1px; height: 8px; }
    .module-settings { grid-template-columns: 1fr; }
    .setting-row { grid-template-columns: 1fr; }
    .status-dock { grid-template-columns: repeat(2, 1fr); }
    .dock-item:nth-child(odd) { border-right: 1px solid var(--line-soft); }
    .dock-item:nth-child(even) { border-right: 0; }
    .dock-item:nth-child(-n+4) { border-bottom: 1px solid var(--line-soft); }
    .dock-item { padding: 9px; grid-template-columns: 24px 1fr; }
    .dock-item svg { width: 21px; height: 21px; }
    .tally-grid { grid-template-columns: 1fr; }
    .bar-item { grid-template-columns: 1fr auto; }
    .bar-track { grid-column: 1 / -1; grid-row: 2; }
  }
  @media (max-width: 420px) {
    .utility-controls { flex-wrap: wrap; }
    .icon-button { width: 40px; }
    .weather-current { grid-template-columns: 1fr; }
    .weather-details { grid-column: auto; }
    .weather-symbol { order: -1; }
    .micro-metrics { grid-template-columns: 1fr; }
    .micro-metric { border-right: 0; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; }
    .forecast-detailed { grid-template-columns: repeat(7, 104px); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}

@layer utilities {
  .compact .metric-row { min-height: 29px; }
  .hidden { display: none !important; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

/* Status-aware SVG strokes and fills */
.gauge-ring .value.status-warn,
.radial-feature .arc.status-warn { stroke: var(--warn); }
.gauge-ring .value.status-bad,
.radial-feature .arc.status-bad { stroke: var(--bad); }
.map-sensor.warn { fill: var(--warn); filter: drop-shadow(0 0 4px var(--warn)); }
.map-sensor.bad { fill: var(--bad); filter: drop-shadow(0 0 4px var(--bad)); }
.maintenance-item.done { opacity: .62; }

/* Wall-display refinements for dense system views */
.radial-feature { position: relative; min-height: 150px; }
.radial-feature svg { width: min(64%, 178px); }
.radial-feature strong {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -22%);
  white-space: nowrap;
}
.radial-feature span {
  position: absolute;
  top: calc(50% + 31px);
  left: 50%;
  width: 88%;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (min-width: 1500px) and (min-height: 820px) {
  .view[data-view-panel="environment"] .system-grid {
    grid-template-rows: minmax(205px, .95fr) minmax(265px, 1.2fr) minmax(135px, .62fr);
  }
  .view[data-view-panel="environment"] #temperatureTrend { min-height: 92px; height: 92px; }
  .view[data-view-panel="environment"] .forecast-detailed { min-height: 106px; }
  .view[data-view-panel="environment"] .forecast-card { padding-block: 4px; }
  .view[data-view-panel="environment"] .forecast-card svg { width: 25px; height: 25px; margin-block: 4px; }
  .view[data-view-panel="environment"] .sun-arc,
  .view[data-view-panel="environment"] .sun-arc svg { min-height: 98px; height: 98px; }
  .view[data-view-panel="environment"] .solarMetrics .metric-row,
  .view[data-view-panel="environment"] #solarMetrics .metric-row { min-height: 27px; }
  .view[data-view-panel="environment"] .guidance-item { padding-block: 7px; }
}