@layer reset, base, theme, components, utilities;

@layer reset {
  html { box-sizing: border-box; }
  body { margin: 0; }
  button, input, select { font: inherit; }
}

@layer theme {
  :root {
    color-scheme: dark;
    --canvas: #080c13;
    --surface: #101722;
    --surface-raised: #151f2c;
    --surface-inset: #0b111b;
    --ink: #f2f6f8;
    --muted: #aab9c2;
    --subtle: #7f929d;
    --line: #2b3b48;
    --line-strong: #48606d;
    --accent: #51c7d8;
    --accent-strong: #8ee9f3;
    --good: #6dde9a;
    --warn: #f5ca72;
    --danger: #ff7c79;
    --focus: #b1f4ff;
    --radius: .8rem;
    --shadow: 0 1rem 2rem rgb(0 0 0 / .20);
    --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  :root[data-map-theme="day"] {
    color-scheme: light;
    --canvas: #edf3f1;
    --surface: #ffffff;
    --surface-raised: #f2f7f5;
    --surface-inset: #e5efed;
    --ink: #10232a;
    --muted: #47616b;
    --subtle: #607983;
    --line: #c1d2d1;
    --line-strong: #8ba8aa;
    --accent: #087e8b;
    --accent-strong: #075c67;
    --good: #18794e;
    --warn: #9a6500;
    --danger: #b3261e;
    --focus: #075c67;
  }
  :root[data-map-theme="night"] {
    color-scheme: dark;
    --canvas: #02070d;
    --surface: #071018;
    --surface-raised: #0b1722;
    --surface-inset: #040b12;
    --ink: #dcecf0;
    --muted: #8caab3;
    --subtle: #65828c;
    --line: #1a303c;
    --line-strong: #2b5360;
    --accent: #3db7c8;
    --accent-strong: #83e7f0;
    --good: #5ed38e;
    --warn: #e9bd61;
    --danger: #fa6e6a;
    --focus: #83e7f0;
  }
}

@layer base {
  body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.45;
    min-block-size: 100dvh;
  }

  h1, h2, p, dl, ol { margin-block: 0; }
  h1, h2 { text-wrap: balance; }
  h1 { font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); letter-spacing: -.02em; }
  h2 { font-size: 1.05rem; letter-spacing: -.01em; }
  p { text-wrap: pretty; }
  button, select, input { min-block-size: 2.65rem; }
  button, select { cursor: pointer; }
  button:focus-visible, select:focus-visible, input:focus-visible, svg:focus-visible, a:focus-visible {
    outline: .15rem solid var(--focus);
    outline-offset: .18rem;
  }
  input, select {
    background: var(--surface-inset);
    border: 1px solid var(--line);
    border-radius: .45rem;
    color: var(--ink);
    padding-inline: .7rem;
  }
  input::placeholder { color: var(--subtle); }
  input:user-invalid { border-color: var(--danger); }
  dt { color: var(--muted); font-size: .78rem; }
  dd { font-family: var(--mono); font-size: .85rem; margin: 0; text-align: end; }
  code { font-family: var(--mono); }
}

@layer components {
  .skip-link {
    background: var(--focus);
    color: var(--canvas);
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    padding: .5rem .75rem;
    position: fixed;
    transform: translateY(-200%);
    z-index: 10;
  }
  .skip-link:focus { transform: translateY(0); }

  .topbar {
    align-items: center;
    border-block-end: 1px solid var(--line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem clamp(1rem, 3vw, 2.5rem);
  }
  .brand-lockup, .topbar-status, .button-row, .map-toolbar, .section-heading { align-items: center; display: flex; gap: .65rem; }
  .brand-lockup { gap: .75rem; }
  .brand-mark {
    align-items: center;
    background: var(--accent);
    border-radius: .45rem;
    color: var(--canvas);
    display: inline-flex;
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 800;
    block-size: 2.25rem;
    inline-size: 2.25rem;
    justify-content: center;
  }
  .eyebrow { color: var(--accent-strong); font-family: var(--mono); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; }
  .topbar-status { color: var(--muted); flex-wrap: wrap; font-size: .82rem; justify-content: end; }
  .status-dot { border-radius: 50%; block-size: .55rem; inline-size: .55rem; }
  .status-dot--good { background: var(--good); }
  .status-dot--amber { background: var(--warn); }
  .status-dot--danger { background: var(--danger); }
  .sim-badge { border: 1px solid var(--warn); border-radius: 999px; color: var(--warn); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; padding: .25rem .5rem; white-space: nowrap; }

  .shell {
    container-type: inline-size;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
    margin-inline: auto;
    max-inline-size: 1700px;
    padding: 1rem clamp(1rem, 3vw, 2.5rem) 3rem;
  }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
  .map-card { grid-row: span 1; min-inline-size: 0; }
  .control-stack { display: grid; gap: 1rem; min-inline-size: 0; }
  .section-heading { justify-content: space-between; margin-block-end: .85rem; }
  .section-heading > div { display: grid; gap: .2rem; }
  .section-meta { color: var(--muted); font-size: .78rem; }
  .map-frame { background: var(--surface-inset); border: 1px solid var(--line); border-radius: .7rem; min-block-size: min(65vh, 42rem); overflow: hidden; position: relative; }
  #map { display: block; inline-size: 100%; min-block-size: min(65vh, 42rem); position: relative; z-index: 1; }
  .maplibre-map { inset: 0; min-block-size: min(65vh, 42rem); position: absolute; z-index: 2; }
  .maplibre-map[hidden] { display: none; }
  .maplibre-map .maplibregl-canvas { outline: none; }
  .maplibre-map .maplibregl-ctrl-group { background: var(--surface); border-color: var(--line); }
  .maplibre-map .maplibregl-ctrl button { filter: invert(1); }
  .map-frame:not(.maplibre-active) .maplibre-map { display: none; }
  .map-frame.maplibre-active #map { opacity: 0; pointer-events: none; visibility: hidden; }
  .map-water { fill: #0c2631; }
  .map-grid { fill: url(#chartGrid); }
  .map-overlay { display: flex; flex-wrap: wrap; gap: .45rem; inset-block-start: .7rem; inset-inline-end: .7rem; position: absolute; }
  .map-chip { background: rgb(8 12 19 / .82); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--mono); font-size: .65rem; padding: .3rem .5rem; }
  .legend-swatch { border-radius: 50%; display: inline-block; block-size: .55rem; inline-size: .55rem; margin-inline-end: .25rem; }
  .legend-swatch--vessel { background: var(--accent-strong); }
  .legend-swatch--route { background: var(--accent); }
  .legend-swatch--range { background: rgb(81 199 216 / .22); border: 1px solid var(--accent); }
  .legend-swatch--anchor-watch { background: #ffb347; }
  .map-label, .map-scale { fill: var(--muted); font-family: var(--mono); font-size: 14px; }
  .north-arrow { fill: none; stroke: var(--accent-strong); stroke-linecap: round; stroke-width: 2; }
  .map-toolbar { flex-wrap: wrap; margin-block-start: .75rem; }
  .map-help { color: var(--subtle); flex: 1 1 16rem; font-size: .75rem; }
  .map-control-panel { background: var(--surface-inset); border: 1px solid var(--line); border-radius: .7rem; margin-block-start: .85rem; padding: .8rem; }
  .map-control-panel h3 { font-size: .95rem; margin: 0; }
  .map-control-panel h4 { color: var(--muted); font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .05em; margin: 0 0 .5rem; text-transform: uppercase; }
  .map-control-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 1fr); }
  .layer-controls { display: flex; flex-wrap: wrap; gap: .35rem; }
  .layer-toggle { align-items: center; background: var(--surface-raised); border: 1px solid var(--line); border-radius: .4rem; color: var(--muted); display: inline-flex; font-family: var(--mono); font-size: .65rem; gap: .35rem; padding: .35rem .45rem; }
  .layer-toggle:has(input:checked) { border-color: var(--accent); color: var(--accent-strong); }
  .layer-toggle input { accent-color: var(--accent); min-block-size: auto; }
  .map-time-controls { border-inline-start: 1px solid var(--line); padding-inline-start: 1rem; }
  .map-action-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: .8rem; }
  .map-action-row .button { flex: 1 1 11rem; }
  .map-search-row, .map-track-row { align-items: center; border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .55rem; margin-block-start: .7rem; padding-block-start: .65rem; }
  .map-search-row .field { flex: 1 1 18rem; }
  .map-search-row input { flex: 1 1 12rem; min-inline-size: 8rem; }
  .map-search-results { color: var(--muted); flex: 1 1 100%; font-family: var(--mono); font-size: .67rem; min-block-size: 1.2rem; }
  .search-result { background: transparent; border: 0; color: var(--accent-strong); cursor: pointer; font-family: var(--mono); font-size: .67rem; padding: 0; text-decoration: underline; }
  .map-track-row strong { color: var(--accent-strong); font-family: var(--mono); font-weight: 500; }
  .map-analysis { background: var(--surface); border: 1px solid var(--line); border-radius: .45rem; color: var(--muted); font-family: var(--mono); font-size: .7rem; margin-block-start: .65rem; min-block-size: 2.2rem; padding: .55rem; }
  .map-analysis[data-level="danger"] { border-color: var(--danger); color: var(--danger); }
  .map-analysis[data-level="warning"] { border-color: var(--warn); color: var(--warn); }
  .catalogue-details { border-block-start: 1px solid var(--line); margin-block-start: .75rem; padding-block-start: .65rem; }
  .catalogue-details summary { color: var(--accent-strong); cursor: pointer; font-family: var(--mono); font-size: .7rem; }
  .catalogue-list { display: grid; gap: .4rem; margin-block-start: .65rem; }
  .catalogue-item { border: 1px solid var(--line); border-radius: .4rem; display: grid; gap: .15rem; padding: .45rem; }
  .catalogue-item strong { font-size: .75rem; }
  .catalogue-item span { color: var(--muted); font-family: var(--mono); font-size: .64rem; }
  .layer-toggle { align-items: stretch; flex-wrap: wrap; }
  .layer-toggle > span { align-self: center; }
  .layer-opacity { accent-color: var(--accent); block-size: 1rem; inline-size: 5.5rem; min-block-size: 1rem; }
  .layer-opacity-value { color: var(--subtle); font-size: .6rem; min-inline-size: 2.4rem; text-align: end; }

  .button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: .45rem;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 700;
    justify-content: center;
    min-block-size: 2.65rem;
    padding-inline: .8rem;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  .button:disabled { cursor: not-allowed; opacity: .48; }
  .button--primary { background: var(--accent); color: var(--canvas); }
  .button--primary:hover:not(:disabled) { background: var(--accent-strong); }
  .button--secondary { background: var(--surface-raised); border-color: var(--line-strong); color: var(--ink); }
  .button--secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); }
  .button--warning { background: transparent; border-color: var(--warn); color: var(--warn); }
  .button--danger { background: var(--danger); color: var(--canvas); }
  .button--danger:hover:not(:disabled) { background: #ffaaa0; }
  .button--danger-quiet { background: transparent; border-color: #714647; color: var(--danger); }
  .button--danger-quiet:hover:not(:disabled) { border-color: var(--danger); }
  .button-row { flex-wrap: wrap; }
  .button-row .button { flex: 1 1 auto; }

  .form-grid { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-adjust-grid { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: .75rem; }
  .sim-adjust-grid > .button { grid-column: 1 / -1; }
  .form-title { color: var(--ink); font-size: .8rem; font-weight: 700; grid-column: 1 / -1; }
  .field { display: grid; gap: .3rem; }
  .field--wide, .form-grid > .button { grid-column: 1 / -1; }
  .field--inline { align-items: center; display: flex; gap: .5rem; }
  .field label { color: var(--muted); font-size: .75rem; }
  .unit { color: var(--subtle); font-family: var(--mono); font-size: .65rem; }
  .rule { border-block-start: 1px solid var(--line); margin-block: .9rem; }
  .state-badge { border: 1px solid currentColor; border-radius: 999px; font-family: var(--mono); font-size: .61rem; letter-spacing: .06em; padding: .25rem .45rem; white-space: nowrap; }
  .state-badge--safe, .state-badge--good { color: var(--good); }
  .state-badge--warn { color: var(--warn); }
  .state-badge--danger { color: var(--danger); }
  .state-badge--info { color: var(--accent-strong); }
  .sensor-status { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .8rem .55rem; }
  .sensor-pill { border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; padding: .28rem .48rem; }
  .sensor-pill--active { border-color: var(--good); color: var(--good); }
  .sensor-pill--degraded { border-color: var(--danger); color: var(--danger); }
  .awareness-card dd { max-inline-size: 65%; overflow-wrap: anywhere; }
  .anchor-watch-card { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
  .anchor-watch-alert { background: var(--surface-inset); border: 1px solid var(--line-strong); border-radius: .45rem; font-family: var(--mono); font-size: .78rem; margin-block: .75rem; padding: .65rem .75rem; }
  .anchor-watch-alert[data-severity="warning"] { border-color: var(--warn); color: var(--warn); }
  .anchor-watch-alert[data-severity="critical"] { border-color: var(--danger); color: var(--danger); font-weight: 800; }
  .anchor-watch-actions .button { flex: 1 1 11rem; }
  .anchor-watch-zone-details { border-block-start: 1px solid var(--line); margin-block-start: .8rem; padding-block-start: .65rem; }
  .anchor-watch-zone-details summary { color: var(--accent-strong); cursor: pointer; font-family: var(--mono); font-size: .68rem; }
  .anchor-watch-zone-details form { margin-block-start: .6rem; }
  .target-card { grid-column: 1 / -1; }
  .target-card td[data-risk="danger"], .target-card td[data-risk="unknown_degraded"] { color: var(--danger); }
  .target-card td[data-risk="warning"], .target-card td[data-risk="monitor"] { color: var(--warn); }
  .metric-list { display: grid; gap: .42rem; }
  .metric-list > div { align-items: baseline; border-block-end: 1px solid rgb(72 96 109 / .4); display: flex; gap: .5rem; justify-content: space-between; padding-block: .22rem; }
  .metric-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .progress-track { background: var(--surface-inset); border: 1px solid var(--line); border-radius: 999px; block-size: .65rem; margin-block: .7rem 1rem; overflow: hidden; }
  .progress-track span { background: var(--good); block-size: 100%; display: block; transition: inline-size 200ms ease; }
  .energy-card { min-inline-size: 0; }
  .energy-card > .section-heading { align-items: start; }
  .energy-summary-grid { display: grid; gap: .55rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: .8rem .35rem; }
  .energy-summary-grid > div { background: var(--surface-inset); border: 1px solid var(--line); border-radius: .45rem; display: grid; gap: .15rem; min-inline-size: 0; padding: .55rem; }
  .energy-summary-grid span, .energy-flow-label { color: var(--muted); font-family: var(--mono); font-size: .63rem; letter-spacing: .06em; text-transform: uppercase; }
  .energy-summary-grid strong { font-family: var(--mono); font-size: .82rem; overflow-wrap: anywhere; }
  .energy-flow { align-items: center; background: var(--surface-inset); border: 1px solid var(--line); border-radius: .7rem; display: grid; gap: .6rem; grid-template-columns: minmax(7rem, 1fr) auto minmax(8rem, 1.2fr) minmax(13rem, 1.8fr); margin-block: .8rem; padding: .8rem; }
  .energy-flow-node { background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: .55rem; display: grid; gap: .18rem; min-inline-size: 0; padding: .65rem; }
  .energy-flow-node strong { font-family: var(--mono); font-size: .95rem; overflow-wrap: anywhere; }
  .energy-flow-node small { color: var(--subtle); font-family: var(--mono); font-size: .65rem; }
  .energy-flow-node--source { border-color: var(--accent); }
  .energy-flow-node--storage { border-color: var(--warn); }
  .energy-flow-arrow { color: var(--accent-strong); font-size: 1.25rem; text-align: center; }
  .energy-flow-branches { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .energy-detail-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: .85rem; }
  .energy-detail { background: var(--surface-inset); border: 1px solid var(--line); border-radius: .55rem; min-inline-size: 0; padding: .65rem; }
  .energy-detail--wide { grid-column: 1 / -1; }
  .energy-detail h3 { color: var(--accent-strong); font-size: .82rem; margin: 0 0 .5rem; }
  .energy-device-list, .energy-daily-list { display: grid; gap: .45rem; }
  .energy-solar-summary { display: grid; gap: .25rem .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-end: .55rem; }
  .energy-solar-summary > div { border-block-end: 1px solid var(--line); display: grid; gap: .1rem; padding-block: .2rem; }
  .energy-solar-summary span { color: var(--muted); font-size: .62rem; }
  .energy-solar-summary strong { font-family: var(--mono); font-size: .7rem; overflow-wrap: anywhere; }
  .energy-device-tile { background: var(--surface-raised); border: 1px solid var(--line); border-radius: .4rem; display: grid; gap: .25rem; padding: .5rem; }
  .energy-device-tile__heading { align-items: baseline; display: flex; gap: .4rem; justify-content: space-between; }
  .energy-device-tile__heading strong { font-size: .75rem; overflow-wrap: anywhere; }
  .energy-device-tile__health { color: var(--good); font-family: var(--mono); font-size: .6rem; white-space: nowrap; }
  .energy-device-tile[data-health="DEGRADED"] .energy-device-tile__health, .energy-device-tile[data-health="STALE"] .energy-device-tile__health, .energy-device-tile[data-health="UNKNOWN"] .energy-device-tile__health { color: var(--warn); }
  .energy-device-tile[data-health="OFFLINE"] .energy-device-tile__health, .energy-device-tile[data-health="FAULT"] .energy-device-tile__health { color: var(--danger); }
  .energy-device-tile dl { display: grid; gap: .15rem; margin: 0; }
  .energy-device-tile dl > div { align-items: baseline; display: flex; gap: .5rem; justify-content: space-between; }
  .energy-device-tile dt, .energy-device-tile dd { font-size: .64rem; }
  .energy-device-tile dd { overflow-wrap: anywhere; }
  .energy-daily-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .energy-daily-item { border-block-end: 1px solid var(--line); display: grid; gap: .12rem; padding-block: .25rem; }
  .energy-daily-item span { color: var(--muted); font-size: .65rem; }
  .energy-daily-item strong { font-family: var(--mono); font-size: .72rem; }
  .energy-history { content-visibility: auto; contain-intrinsic-size: 280px; margin-block-start: .85rem; }
  .energy-history-chart { background: var(--surface-inset); border: 1px solid var(--line); border-radius: .55rem; block-size: auto; display: block; inline-size: 100%; min-block-size: 13rem; overflow: visible; }
  .energy-history-grid-line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .energy-history-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .energy-history-label { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
  .energy-history-legend { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin-block-start: .45rem; }
  .energy-history-legend span { align-items: center; color: var(--muted); display: inline-flex; font-family: var(--mono); font-size: .62rem; gap: .25rem; }
  .energy-history-legend i { block-size: .45rem; border-radius: 50%; inline-size: .45rem; }
  .energy-sim-grid { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: .75rem; }
  .energy-sim-grid > .button { grid-column: span 1; }
  .waypoint-list { display: grid; gap: .45rem; list-style-position: inside; margin-block: .75rem; padding: 0; }
  .waypoint-item { align-items: center; background: var(--surface-inset); border: 1px solid var(--line); border-radius: .45rem; display: grid; gap: .35rem; grid-template-columns: 1fr auto; padding: .5rem; }
  .waypoint-item[data-selected="true"] { border-color: var(--accent); }
  .waypoint-main { cursor: pointer; min-inline-size: 0; }
  .waypoint-name { display: block; font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; }
  .waypoint-coordinates { color: var(--muted); display: block; font-family: var(--mono); font-size: .65rem; }
  .waypoint-actions { display: flex; gap: .25rem; }
  .waypoint-editor { border-block-start: 1px solid var(--line); grid-column: 1 / -1; margin-block-start: .2rem; padding-block-start: .55rem; }
  .waypoint-editor summary { color: var(--accent-strong); cursor: pointer; font-family: var(--mono); font-size: .65rem; }
  .waypoint-editor form { margin-block-start: .55rem; }
  .waypoint-editor .field--notes { grid-column: 1 / -1; }
  .route-settings { border-block-start: 1px solid var(--line); margin-block-start: .75rem; padding-block-start: .65rem; }
  .route-settings summary { color: var(--accent-strong); cursor: pointer; font-family: var(--mono); font-size: .68rem; }
  .icon-button { background: transparent; border: 1px solid var(--line); border-radius: .35rem; color: var(--muted); min-block-size: 2rem; min-inline-size: 2rem; padding: .2rem; }
  .icon-button:hover { border-color: var(--accent); color: var(--accent-strong); }
  .empty-state { color: var(--subtle); font-size: .78rem; list-style: none; padding-block: .4rem; }
  .telemetry-card { grid-column: 1 / -1; }
  .table-wrap { max-block-size: 18rem; overflow: auto; }
  table { border-collapse: collapse; inline-size: 100%; }
  th, td { border-block-end: 1px solid var(--line); padding: .55rem .45rem; text-align: start; vertical-align: top; }
  th { color: var(--muted); font-family: var(--mono); font-size: .67rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
  td { font-family: var(--mono); font-size: .7rem; }
  td:first-child { color: var(--subtle); white-space: nowrap; }
  td:nth-child(2) { color: var(--accent-strong); white-space: nowrap; }
  .live-message { background: var(--surface-raised); border: 1px solid var(--accent); border-radius: .45rem; inset-block-end: 1rem; inset-inline-end: 1rem; max-inline-size: min(24rem, calc(100vw - 2rem)); opacity: 0; padding: .65rem .8rem; pointer-events: none; position: fixed; transform: translateY(1rem); transition: opacity 160ms ease, transform 160ms ease; z-index: 5; }
  .live-message.is-visible { opacity: 1; transform: translateY(0); }
  .sr-only { block-size: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
}

@layer utilities {
  @container (max-width: 62rem) {
    .shell { grid-template-columns: 1fr; }
    .telemetry-card { grid-column: auto; }
  }
  @media (max-width: 48rem) {
    .topbar { align-items: flex-start; flex-direction: column; }
    .topbar-status { justify-content: start; }
    #map, .maplibre-map, .map-frame { min-block-size: 18rem; }
    .map-control-grid { grid-template-columns: 1fr; }
    .map-time-controls { border-inline-start: 0; border-block-start: 1px solid var(--line); padding-block-start: .75rem; padding-inline-start: 0; }
    .energy-flow { grid-template-columns: 1fr; }
    .energy-flow-arrow { transform: rotate(0deg); }
    .energy-flow-branches, .energy-detail-grid { grid-template-columns: 1fr; }
    .energy-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (pointer: coarse) {
    .button, button, select, input { min-block-size: 3rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .button, .live-message, .progress-track span { transition: none; }
  }
  @media (forced-colors: active) {
    .button, .card, input, select, .progress-track, .waypoint-item, .sensor-pill { border-color: ButtonText; }
    .status-dot { border: 1px solid ButtonText; }
  }
}