/* `/my` pages (S-207 §4.2 content template, §4.4 components, §5.3). Tokens only; tokens.css owns the values. */
.my-page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-10);
}

.my-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.my-head h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* back link above the title row: DOM order = visual = tab order (§5.3 page header) */
.my-page > .my-back {
  margin-bottom: var(--space-2);
}

.my-head .button .spinner,
.my-head .button svg {
  flex: none;
}

.my-head .button .spinner {
  width: 16px;
  height: 16px;
  margin: 0;
  border-width: 2px;
}

.my-stack {
  display: grid;
  gap: var(--space-4);
}

.my-stack > * {
  min-width: 0;
}

.my-page h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-lg);
}

.my-page h3 {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.my-page p {
  margin: 0;
}

.my-page .card p + .button,
.my-page .card p + p,
.my-page .card p + nav {
  margin-top: var(--space-3);
}

@media (prefers-color-scheme: dark) {
  .my-page .card {
    border: 1px solid var(--color-border);
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  .my-stack {
    gap: var(--space-6);
  }
}

/* signed-out /my: the centred card of /signin (§4.2): icon, h1, text, full-width primary button */
.my-signed-out {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}

.my-signed-out h1 {
  margin: 0;
}

.my-signed-out > div {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.my-signed-out .button {
  width: 100%;
}

.my-icon {
  display: inline-flex;
  color: var(--color-text-muted);
}

@media (prefers-color-scheme: dark) {
  .my-signed-out {
    border: 1px solid var(--color-border);
    box-shadow: none;
  }
}

/* empty and loading states */

.my-empty,
.my-note,
.my-loading {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.my-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  text-align: center;
}

.my-empty.card {
  padding: var(--space-6) var(--space-4);
}

.my-empty svg {
  flex: none;
  width: 32px;
  height: 32px;
}

/* skeleton: surface-sunken blocks with a 1.2 s shimmer (§4.4); static with reduced motion */
.my-skel {
  display: block;
  background: linear-gradient(
      90deg,
      var(--color-surface-sunken) 25%,
      var(--color-border) 50%,
      var(--color-surface-sunken) 75%
    )
    0 0 / 200% 100%;
  animation: my-shimmer 1.2s linear infinite;
}

.my-skel-row {
  height: 64px;
  border-radius: var(--radius-md);
}

.my-skel-tile {
  height: 72px;
  border-radius: var(--radius-md);
}

.my-rows:has(.my-skel) {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.my-rows:has(.my-skel) li + li {
  border-top: 0;
}

.my-loading + .tiles,
.my-loading + .my-rows {
  margin-top: var(--space-3);
}

@keyframes my-shimmer {
  to {
    background-position: -200% 0;
  }
}

.my-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.my-loading .spinner {
  width: 16px;
  height: 16px;
  margin: 0;
  border-width: 2px;
}

.my-page .alert .button {
  margin-top: var(--space-3);
}

.my-page .alert.alert-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.alert-warning svg {
  flex: none;
  margin-top: 1px;
}

/* links and buttons */
.my-back {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  min-height: var(--control-h);
  padding: 0 var(--space-3) 0 var(--space-1);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition:
    background-color var(--dur-instant),
    transform var(--dur-instant) var(--ease-out);
}

.my-back:hover {
  text-decoration: underline;
}

.my-back:active {
  background: var(--color-accent-soft);
  transform: scale(0.97);
}

.button.my-ghost {
  padding-left: 0;
  border-color: transparent;
  background: transparent;
  color: var(--color-accent);
}

.button.my-ghost:hover,
.button.my-ghost:active {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.my-page .my-day-link {
  margin-top: var(--space-3);
}

.button svg {
  flex: none;
}

.pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pill-links .button {
  min-height: 40px;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
}

.my-more {
  width: 100%;
}

/* inputs (§4.4) */
.my-page select,
.my-page input[type='date'] {
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
}

.source-filter,
.my-page .day-head label,
.diag-range label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.diag-range,
.my-page .day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* site list: one card of rows, each row is the link (§4.4 List row) */
.site-card {
  padding: 0;
  overflow: hidden;
}

.site-card .my-empty {
  padding: var(--space-6) var(--space-4);
}

.my-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.my-rows li + li {
  border-top: 1px solid var(--color-border);
}

.site-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background-color var(--dur-instant);
}

.site-row::after {
  content: '›' / '';
  margin-left: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.site-row:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.site-row:active {
  background: var(--color-accent-soft);
}

.site-row:focus-visible {
  outline-offset: -2px;
}

.site-row [data-field='gaps'] {
  margin-left: auto;
  color: var(--color-text-muted);
}

.site-row [data-field='last-seen'] {
  flex: 1 1 12rem;
}

.site-row [data-field='source'],
.alert-mark {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

[data-source='real'] > .site-row [data-field='source'] {
  background: var(--source-real);
  color: var(--color-surface);
}

[data-source='simulated'] > .site-row [data-field='source'] {
  border: 1px dashed var(--source-sim);
  color: var(--source-sim);
}

.alert-mark,
[data-testid='no-fresh-data'] > p:first-child {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

[data-testid='no-fresh-data'] > p:first-child {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

[data-testid='no-fresh-data'] {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

[data-testid='live-view'][data-state='live'] h2::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--status-success-fg);
}

/* metric tiles (§4.4) */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
}

.live-field {
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.live-field.wide {
  grid-column: 1 / -1;
}

.live-field dt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.live-field dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  font-size: var(--text-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-num);
}

.live-field.wide dd {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.live-field .unit {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
}

.tile-icon {
  display: inline-flex;
  flex: none;
}

.icon-pv .tile-icon {
  color: var(--energy-pv-graphic);
}

.tone-import .tile-icon {
  color: var(--energy-import-graphic);
}

.tone-export .tile-icon {
  color: var(--energy-export-graphic);
}

.tone-battery .tile-icon {
  color: var(--energy-battery-graphic);
}

.meter {
  display: block;
  height: 6px;
  margin-top: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.meter > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--energy-battery-graphic);
}

.tone-import dd {
  color: var(--energy-import-fg);
}

.tone-export dd {
  color: var(--energy-export-fg);
}

.tone-battery dd {
  color: var(--energy-battery-fg);
}

@media (min-width: 768px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  .live-field dd {
    font-size: var(--text-2xl);
    line-height: var(--leading-2xl);
  }

  .live-field.wide dd {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
  }
}

@media (min-width: 1024px) {
  .tiles {
    grid-template-columns: repeat(4, 1fr);
  }

  .tiles.today {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* diagnostics rows: stacked label: value on the phone, wider columns from 768 px */
.diag-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.diag-list > li {
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.diag-list > li + li {
  border-top: 1px solid var(--color-border);
}

.diag-list dl {
  display: grid;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.diag-list dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.diag-list dd {
  margin: 0;
}

@media (min-width: 768px) {
  .diag-list dl {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .my-back:active {
    transform: none;
  }

  .my-skel {
    animation: none;
    background: var(--color-surface-sunken);
  }
}

.site-card > .my-loading {
  padding: var(--space-3) var(--space-4) 0;
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
/*
 * Design tokens (docs/design/S-207.md §3). The only file in web/src with colour literals (npm run lint checks it).
 * Light tokens on :root; dark ones from the media query alone, so there is no light flash before src/theme/theme.ts
 * runs (it only mirrors prefers-color-scheme into data-theme). Plain hex, not light-dark() / color-mix(): canvas code
 * reads the colours with getComputedStyle.
 */
:root {
  color-scheme: light;

  /* neutrals and brand */
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-sunken: #eef2f6;
  --color-surface-raised: #ffffff;
  --color-scrim: #0e1a28;
  --color-text: #0e1a28;
  --color-text-muted: #4a5a6c;
  --color-border: #d5dde6;
  --color-border-strong: #7a8a9d;
  --color-accent: #0a5fc2;
  --color-accent-hover: #084e9f;
  --color-accent-soft: #e2eefc;
  --color-on-accent: #ffffff;
  --color-focus: #0a5fc2;
  --color-focus-halo: #ffffff;

  /* energy (values only): -fg for text, -graphic for strokes and fills */
  --energy-pv-fg: #875400;
  --energy-pv-graphic: #b87900;
  --energy-wind-fg: #0a6b74;
  --energy-wind-graphic: #0d8f9b;
  --energy-import-fg: #b02a1f;
  --energy-import-graphic: #d33a2c;
  --energy-export-fg: #0b7a3b;
  --energy-export-graphic: #1a9450;
  --energy-battery-fg: #6337b8;
  --energy-battery-graphic: #7b52d6;

  /* chart series (literals, not var() chains: a canvas read returns a colour) */
  --chart-import: #d33a2c;
  --chart-export: #1a9450;
  --chart-charge: #1b5fc1;
  --chart-discharge: #b35c00;
  --chart-soc: #7b52d6;
  --chart-pv: #b87900;
  --chart-grid: #d5dde6;
  --chart-axis: #4a5a6c;

  /* status and source */
  --status-warning-fg: #9a5200;
  --status-warning-bg: #fff4e0;
  --status-danger-fg: #b3261e;
  --status-danger-bg: #fdecea;
  --status-success-fg: #0b7a3b;
  --status-success-bg: #e7f6ec;
  --source-real: #0e1a28;
  --source-sim: #4a5a6c;

  /* map */
  --badge-field-tint: 12%;
  --badge-field-grey: 16%;
  --map-zone-fill: #0a5fc2;
  --map-zone-fill-opacity: 0.06;
  --map-zone-fill-opacity-hover: 0.12;
  --map-zone-fill-opacity-selected: 0.18;
  --map-zone-line: #0a5fc2;
  --map-zone-line-opacity: 0.9;
  --map-zone-line-w: 2px;
  --map-zone-line-w-selected: 3px;
  --map-unit-line-w: 1px;
  --map-zone-corner: 0.22;
  --map-zone-gap: 3px;
  --map-zone-nodata-fill: #5f6b7a;
  --map-zone-nodata-fill-opacity: 0.1;
  --map-zone-nodata-line: #5f6b7a;
  --map-zone-nodata-line-opacity: 0.45;
  --map-bg: #e9ece6;

  /* elevation */
  --shadow-1: 0 1px 2px rgb(14 26 40 / 0.08);
  --shadow-2: 0 2px 8px rgb(14 26 40 / 0.14);
  --shadow-3: 0 8px 28px rgb(14 26 40 / 0.2);
  --opacity-scrim: 0.32;
  --opacity-disabled: 0.45;

  /* typography (system stacks: CSP default-src 'self', no web font) */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --leading-xs: 1rem;
  --text-sm: 0.875rem;
  --leading-sm: 1.25rem;
  --text-md: 1rem;
  --leading-md: 1.5rem;
  --text-lg: 1.125rem;
  --leading-lg: 1.5rem;
  --text-xl: 1.375rem;
  --leading-xl: 1.75rem;
  --text-2xl: 1.75rem;
  --leading-2xl: 2.25rem;
  --text-num: 1.5rem;
  --leading-num: 2rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-title: 650;
  --tracking-caps: 0.06em;

  /* spacing (4 px grid), sizing, radii */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --gutter: 16px;
  --header-h: 56px;
  --control-h: 40px;
  --control-h-sm: 32px;
  --hit-min: 44px;
  --panel-w: 400px;
  --content-max: 1120px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* motion */
  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  /* level change (design S-216 §4): read once per level change by ZoneMap; not zeroed under reduced motion (no animation is made) */
  --dur-level: 450ms;
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --level-badge-scale-in: 0.6;
  --level-badge-scale-out: 0.6;

  /* z-order: above Leaflet's panes (<= 700) and controls (800 / 1000) */
  --z-map-controls: 1000;
  --z-panel: 1100;
  --z-header: 1200;
  --z-banner: 1210;
  /* the expanded phone list sheet is modal: its scrim covers the header and banner too (S-204 §3) */
  --z-sheet-scrim: 1220;
  --z-sheet-full: 1230;
  --z-skip: 1300;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --header-h: 64px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 32px;
  }
}

@media (min-width: 1600px) {
  :root {
    --panel-w: 760px;
  }
}

@media (min-width: 1920px) {
  :root {
    --panel-w: 920px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --badge-field-tint: 14%;
    --badge-field-grey: 18%;
    --color-bg: #0b1220;
    --color-surface: #121b2b;
    --color-surface-sunken: #0d1524;
    --color-surface-raised: #182335;
    --color-scrim: #000000;
    --color-text: #e7eef6;
    --color-text-muted: #9db0c4;
    --color-border: #25334a;
    --color-border-strong: #62758c;
    --color-accent: #5ba8ff;
    --color-accent-hover: #86c0ff;
    --color-accent-soft: #16294a;
    --color-on-accent: #04101f;
    --color-focus: #5ba8ff;
    --color-focus-halo: #0b1220;

    --energy-pv-fg: #ffc53d;
    --energy-pv-graphic: #ffc53d;
    --energy-wind-fg: #3ccfdc;
    --energy-wind-graphic: #3ccfdc;
    --energy-import-fg: #ff7a6b;
    --energy-import-graphic: #ff7a6b;
    --energy-export-fg: #4dd18a;
    --energy-export-graphic: #4dd18a;
    --energy-battery-fg: #b39bff;
    --energy-battery-graphic: #b39bff;

    --chart-import: #ff7a6b;
    --chart-export: #4dd18a;
    --chart-charge: #82b1ff;
    --chart-discharge: #ffb74d;
    --chart-soc: #b39bff;
    --chart-pv: #ffc53d;
    --chart-grid: #25334a;
    --chart-axis: #9db0c4;

    --status-warning-fg: #ffb454;
    --status-warning-bg: #2e2210;
    --status-danger-fg: #ff8a80;
    --status-danger-bg: #3a1614;
    --status-success-fg: #6fdc8c;
    --status-success-bg: #10291b;
    --source-real: #e7eef6;
    --source-sim: #9db0c4;

    --map-zone-fill: #5ba8ff;
    --map-zone-fill-opacity: 0.08;
    --map-zone-fill-opacity-hover: 0.14;
    --map-zone-fill-opacity-selected: 0.22;
    --map-zone-line: #5ba8ff;
    --map-zone-nodata-fill: #8a96a6;
    --map-zone-nodata-fill-opacity: 0.14;
    --map-zone-nodata-line: #8a96a6;
    --map-zone-nodata-line-opacity: 0.5;
    --map-bg: #1b2433;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-2: 0 2px 10px rgb(0 0 0 / 0.55);
    --shadow-3: 0 8px 32px rgb(0 0 0 / 0.6);
    --opacity-scrim: 0.5;
  }
}

/* Reduced motion: no durations except the opacity fades (--dur-fast). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}
/* Shell and base styles. Every value is a token of styles/tokens.css (docs/design/S-207.md). */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--weight-regular) var(--text-md) / var(--leading-md) var(--font-sans);
}

h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--weight-title);
  line-height: var(--leading-xl);
}

a {
  color: var(--color-accent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-accent-hover);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* top/left pin every sr-only element to its containing block's corner: without them it sits at its static position,
   which can be below a 100%-tall sibling (the map canvas) or a clipped row and add page scroll (S-202 design checks F2, R2-F1) */
.sr-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: -100px;
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.skip:focus {
  top: var(--space-2);
}

/* header: mark + wordmark, language control, session slot (§4.1, §4.1.1) */
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-h);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.app-home {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit-min);
  margin-right: auto;
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-instant) var(--ease-out);
}

.app-home:hover {
  color: var(--color-text);
  background: var(--color-surface-sunken);
}

.app-home:active,
.button:active,
.slot:active {
  transform: scale(0.97);
}

.app-home:active {
  background: var(--color-accent-soft);
}

.app-home svg,
.slot svg {
  flex: none;
}

.app-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-lg);
}

.lang-switch {
  display: inline-flex;
  flex: none;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}

.lang-switch button {
  min-width: var(--hit-min);
  min-height: var(--hit-min);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background-color var(--dur-instant),
    transform var(--dur-instant) var(--ease-out);
}

.lang-switch button:hover {
  color: var(--color-text);
}

.lang-switch button:active {
  background: var(--color-accent-soft);
  transform: scale(0.97);
}

.lang-switch button[aria-pressed='true'] {
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.header-nav {
  display: flex;
  flex: none;
}

.slot,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast),
    transform var(--dur-instant) var(--ease-out);
}

.slot {
  position: relative;
  flex: none;
  min-height: var(--hit-min);
}

.slot[data-testid='nav-my'] {
  padding-left: var(--space-2);
}

.slot:hover,
.button:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.slot:active,
.button:active {
  background: var(--color-accent-soft);
}

.slot[aria-current] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.slot[aria-current]:hover {
  border-color: var(--color-accent-hover);
  color: var(--color-accent-hover);
}

.slot-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.slot[aria-current] .slot-avatar {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.slot-placeholder {
  flex: none;
  width: var(--hit-min);
  height: var(--hit-min);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.button-primary {
  border-color: transparent;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.button-primary:hover,
.button-primary:active {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

@media (min-width: 480px) {
  .slot-placeholder {
    width: 128px;
  }
}

@media (min-width: 768px) {
  .slot {
    min-height: var(--control-h);
  }

  .slot-placeholder {
    height: var(--control-h);
  }

  .lang-switch button {
    min-width: 40px;
    min-height: var(--control-h-sm);
  }
}

/* narrow rule (T-650): below 480 px the session slot is a 44 px icon button, the label stays for screen readers */
@media (max-width: 479px) {
  .slot {
    width: var(--hit-min);
    padding: 0;
  }

  .slot-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

@media (max-width: 339px) {
  .app-home {
    min-width: var(--hit-min);
    justify-content: center;
  }

  .app-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* banner under the header, cards, alerts, spinner */
.banner {
  padding: var(--space-3) var(--gutter);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  border-bottom: 1px solid var(--color-border);
}

.card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}

.card-center {
  width: min(480px, 100% - 2 * var(--gutter));
  margin: 15vh auto var(--space-6);
}

.alert {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.alert p {
  margin: 0;
}

.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: var(--space-2);
  vertical-align: middle;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-pill);
  animation: spin 0.8s linear infinite;
}

/* loading placeholders (design S-202 §3.5-§3.6) */
.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  50% {
    opacity: 0.5;
  }
}

.fleet-skeleton {
  width: 60%;
  height: 16px;
}

.zp-skeleton {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zrow-skel {
  cursor: default;
}

.zrow-skel .zring {
  border-radius: var(--radius-pill);
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.zskel-l1 {
  width: 70%;
  height: 14px;
}

.zskel-l2 {
  width: 45%;
  height: 12px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .skeleton,
  .zrow-skel .zring {
    animation: none;
  }
}

@media (min-width: 768px) {
  .card {
    padding: var(--space-6);
  }
}

.region-loading,
.region-error {
  padding: 8px 16px;
}

.asset-page {
  padding: 8px 16px;
}

.asset-card {
  padding: 8px 0;
}

.asset-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px;
  margin: 0;
}

.asset-card dt {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.asset-card dd {
  margin: 0;
  font-size: 1.25rem;
}

.curve {
  margin: 16px 0 0;
}

.curve figcaption {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.curve-plot {
  width: 100%;
  min-height: 220px;
}

/* S-109 day view: the page never scrolls sideways, the plot inside `.day-scroll` may. */
.day-view {
  max-width: 100%;
}

.day-view[aria-busy='true'] {
  opacity: 0.6;
}

.day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.day-head label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.day-chart {
  margin: 16px 0 0;
  max-width: 100%;
}

.day-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.day-plot {
  min-height: 300px;
}

.day-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.day-legend i {
  display: inline-block;
  width: 24px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 3px solid var(--swatch);
}

.day-legend .k-import {
  --swatch: var(--chart-import);
}

.day-legend .k-export {
  --swatch: var(--chart-export);
}

.day-legend .k-charge {
  --swatch: var(--chart-charge);
}

.day-legend .k-discharge {
  --swatch: var(--chart-discharge);
}

.day-legend .k-soc {
  --swatch: var(--chart-soc);
}

.day-legend i.plan {
  border-top-style: dashed;
}

.day-cost dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px;
  margin: 0;
}

.day-cost dt {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.day-cost dd {
  margin: 0;
  font-size: 1.25rem;
}

/* hex map (S-202 §3.1, §3.7): the map fills the page under the header; the banner overlays its top edge */
.zone-map {
  position: relative;
  display: flex;
  height: calc(100dvh - var(--header-h));
  background: var(--map-bg);
}

/* the map area: the list is docked beside it from 1024 px, so the map container shrinks (design S-202 §3.6) */
.zone-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.zone-map-canvas {
  height: 100%;
  background: var(--map-bg);
}

/* focus lands here when the badge that had it leaves (design S-216 §3.7): drawn inside, the container fills the page.
   The container is the Leaflet container, so its own outline / shadow lie under the .leaflet-pane children (z-index 200-600):
   the ring is an overlay above the panes (650), below the Leaflet controls (800+) and the map panels (--z-map-controls). */
.zone-map-canvas:focus-visible {
  outline: none;
}

.zone-map-canvas:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 650;
  pointer-events: none;
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 4px var(--color-focus-halo);
}

.zone-map .leaflet-control-attribution {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  opacity: 0.92;
}

.zone-map .leaflet-control-attribution a {
  color: var(--color-accent);
}

body:has(.zone-map) .banner {
  position: fixed;
  top: var(--header-h);
  right: 0;
  left: 0;
  z-index: var(--z-banner);
}

.map-progress {
  position: absolute;
  top: var(--banner-h, 0);
  right: 0;
  left: 0;
  z-index: var(--z-map-controls);
  height: 3px;
  overflow: hidden;
  background: var(--color-accent-soft);
}

.map-progress::after {
  content: '';
  display: block;
  width: 30%;
  height: 100%;
  background: var(--color-accent);
  animation: map-progress 1.2s linear infinite;
}

@keyframes map-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(340%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-progress::after {
    width: 100%;
    opacity: 0.6;
    animation: none;
  }
}

/* map controls stack (design S-202 §3.1): fleet total bottom-left, actions bottom-right; on a phone the actions
   row sits directly above the full-width fleet total */
.map-stack {
  position: absolute;
  right: var(--space-3);
  bottom: calc(var(--space-2) + 24px);
  left: var(--space-3);
  z-index: var(--z-map-controls);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.map-stack > * {
  pointer-events: auto;
}

.map-stack .map-actions {
  position: relative;
  right: auto;
  bottom: auto;
  flex-direction: row;
  align-items: center;
  align-self: flex-end;
}

.map-stack .fleet {
  order: 2;
}

.map-zoom {
  display: inline-flex;
  gap: var(--space-1);
}

.map-btn-label {
  gap: var(--space-2);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* a disabled map button stays opaque; only its icon is dimmed (T-651) */
.map-btn[aria-disabled='true'] {
  cursor: default;
}

.map-btn[aria-disabled='true'] svg {
  opacity: var(--opacity-disabled);
}

@media (min-width: 768px) {
  .map-stack {
    right: var(--space-4);
    bottom: calc(var(--space-4) + 24px);
    left: var(--space-4);
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .map-stack .fleet {
    order: 0;
    width: 100%;
    max-width: 520px;
  }

  .map-stack .map-actions {
    flex-direction: column;
    align-items: flex-end;
    align-self: flex-end;
  }

  .map-zoom {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .map-stack .fleet {
    max-width: 680px;
  }
}

/* fleet total (design S-202 §3.5) and its strip in the list sheet */
.fleet {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-2);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.fleet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.fleet-cap {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.fleet-count {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.fleet-head .spinner {
  align-self: center;
  width: 16px;
  height: 16px;
}

.fleet-note {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.fleet-values,
.zvals {
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
}

/* phone: one value per line in three aligned columns (icon, label, value) */
.fleet-values {
  display: grid;
  grid-template-columns: 16px max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
}

.fleet-values .mv {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

@media (min-width: 768px) {
  .fleet-values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
  }

  .fleet-values .mv {
    display: flex;
    gap: var(--space-2);
  }
}

@media (min-width: 1024px) {
  .fleet-values .mv {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .fleet-values .mv > svg {
    display: none;
  }

  .fleet-values .mv-v {
    font-size: var(--text-lg);
  }
}

.mv {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.mv > svg,
.mv-arrow {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mv-l {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.mv-v {
  font-weight: var(--weight-semibold);
}

.mv-arrow {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.k-pv {
  color: var(--energy-pv-fg);
}

.k-wind {
  color: var(--energy-wind-fg);
}

.k-imp {
  color: var(--energy-import-fg);
}

.k-exp {
  color: var(--energy-export-fg);
}

.k-battery {
  color: var(--energy-battery-fg);
}

.k-zero {
  color: var(--color-text);
}

.mv .mv-l {
  color: var(--color-text-muted);
}

/* the list panel (design S-202 §3.6): a bottom sheet below 1024 px, docked right from 1024 px */
.zone-panel {
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
}

@media (max-width: 1023px) {
  .zone-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    height: 45dvh;
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-3);
    transition: height 0.2s ease;
  }

  /* tablet: one larger size, 60 %, non-modal (design S-202 §7, S-204 §3) */
  .zone-panel.zp-tall {
    height: 60dvh;
  }

  .zp-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet-scrim);
    background: var(--color-scrim);
    opacity: var(--opacity-scrim);
  }

  /* the whole header region drags the sheet (design S-204 §3); it never scrolls, so the browser keeps no pan of it,
     and a mouse drag over its text selects nothing */
  .zp-header {
    touch-action: none;
    user-select: none;
  }

  /* the bar is 4 px; the target around it is a full 44 px row (WCAG 2.5.8, phone target) */
  .zp-handle {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--hit-min);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
  }

  .zp-handle span {
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong, var(--color-border));
  }

  .zp-handle:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
  }

  .zone-map.list-open .map-stack {
    display: none;
  }
}

/* phone: 90 % and modal, above the header and banner together with its scrim */
@media (max-width: 767px) {
  .zone-panel.zp-tall {
    z-index: var(--z-sheet-full);
    height: 90dvh;
  }
}

@media (min-width: 1024px) {
  .zone-panel {
    flex: none;
    width: var(--panel-w);

    /* start under the fixed banner, like the zone panel (S-204 F3) */
    height: calc(100% - var(--banner-h, 0px));
    margin-top: var(--banner-h, 0px);
    border-left: 1px solid var(--color-border);
  }

  .fleet-strip {
    display: none;
  }

  .zp-handle,
  .zp-scrim {
    display: none;
  }
}

/* the expand / collapse button is the single-pointer alternative to dragging; a tablet sheet has the handle only */
@media (min-width: 768px) {
  .zp-expand {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zone-panel {
    transition: none;
  }
}

.zp-header {
  flex: none;
}

.zp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) 0;
}

.zp-btns {
  display: flex;
  flex: none;
  gap: var(--space-2);
}

.zp-head h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.zp-meta {
  margin: 0;
  padding: var(--space-1) var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.zp-order {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-2) var(--space-4);
}

.zp-order button {
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.zp-order button[aria-pressed='true'] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.fleet-strip {
  margin: 0 var(--space-4) var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  box-shadow: none;
}

.fleet-strip .fleet-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.fleet-strip .fleet-values .mv {
  display: inline-flex;
  flex-direction: row;
  gap: var(--space-1);
}

.fleet-strip .mv-l {
  display: none;
}

/* `position: relative` makes the body the containing block of the rows' absolutely positioned .sr-only spans; without it
   they sit in the page's scrollable overflow (below the clipped rows) and the window scrolls (S-202 design check F2) */
.zp-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.zp-scroll ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zp-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--color-text-muted);
}

.zp-empty p {
  margin: 0;
}

.zrow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  width: 100%;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.zrow:hover {
  background: var(--color-surface-sunken);
}

.zrow:active {
  background: var(--color-accent-soft);
}

.zrow:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.zring {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
}

.zbody {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.zl1 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.zname {
  flex: 1;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zwhere {
  overflow-wrap: anywhere;
  font-size: var(--text-xs);
  line-height: 16px;
  color: var(--color-text-muted);
}

.zcount {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.zcount svg,
.fleet-note svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zl1 > svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zvals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.zrow .k-battery .mv-v {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.zrow .mv-lv {
  color: var(--energy-battery-fg);
  font-weight: var(--weight-semibold);
}

.zstale {
  color: var(--status-warning-fg);
}

/* status cards (design S-205 §3.3, S-202 §3.8): centred in the free part of the map, never under the sheet; the
   area's padding is set from the measured switches, sheet and controls stack */
.map-status-area {
  position: absolute;
  inset: 0;
  z-index: var(--z-map-controls);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.map-status {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  width: min(360px, calc(100% - 2 * var(--space-4)));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .map-status {
    border: 1px solid var(--color-border);
  }
}

@media (min-width: 768px) {
  .map-status {
    padding: var(--space-6);
  }
}

.map-status strong {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--weight-semibold);
}

.map-status p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.map-status-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.map-status-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* real / simulated switches (design S-205 §3.1): top-right of the map area, left of a docked panel */
.source-switches {
  position: absolute;
  top: calc(var(--banner-h, 0px) + var(--space-3));
  right: var(--space-3);
  z-index: var(--z-map-controls);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit-min);
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-2);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.source-chip[aria-checked='true'] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.source-chip:active {
  transform: scale(0.97);
}

.source-chip:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-focus-halo),
    0 0 0 4px var(--color-focus),
    var(--shadow-2);
}

@media (hover: hover) {
  .source-chip[aria-checked='false']:hover {
    background: var(--color-surface-sunken);
  }

  .source-chip[aria-checked='true']:hover {
    border-color: var(--color-accent-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .source-chip:active {
    transform: none;
  }
}

@media (min-width: 768px) {
  .source-switches {
    top: calc(var(--banner-h, 0px) + var(--space-4));
    right: var(--space-4);
  }

  .source-chip {
    min-height: 36px;
  }
}

.chip-knob {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.chip-knob svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--color-on-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  visibility: hidden;
}

.source-chip[aria-checked='true'] .chip-knob {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.source-chip[aria-checked='true'] .chip-knob svg {
  visibility: visible;
}

.chip-swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--source-real);
  border-radius: 50%;
}

.chip-swatch.simulated {
  border: 2px dashed var(--source-sim);
}
/* Zone badge (design S-203 v3 §4) and legend (§6). Geometry per form is in map/badge.ts; here only theme and place. */
.zone-badge-icon:focus-within {
  z-index: 1000 !important;
}

.zb {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-instant) var(--ease-standard);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .zb {
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
  }
}

.zb-s {
  width: 68px;
  height: 68px;
}

.zb-m {
  width: 96px;
  height: 96px;
}

.zb-l {
  width: 136px;
  height: 136px;
}

/* The disc is the first child, under the text and icons. `:first-child` outranks leaflet.css
   `.leaflet-map-pane svg { z-index: 200 }`, which would paint the disc over the text spans. */
.zb > svg:first-child {
  z-index: 0;
}

.zb > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.zb .src {
  fill: none;
  stroke: var(--color-accent);
}

.zb .tick {
  stroke: var(--color-accent);
  stroke-linecap: round;
  fill: none;
}

.zb .f-pv {
  fill: color-mix(
    in srgb,
    var(--energy-pv-graphic) var(--badge-field-tint),
    var(--color-surface-raised)
  );
}

.zb .f-wind {
  fill: color-mix(
    in srgb,
    var(--energy-wind-graphic) var(--badge-field-tint),
    var(--color-surface-raised)
  );
}

.zb .f-batt {
  fill: color-mix(
    in srgb,
    var(--energy-battery-graphic) var(--badge-field-tint),
    var(--color-surface-raised)
  );
}

.zb .f-imp {
  fill: color-mix(
    in srgb,
    var(--energy-import-graphic) var(--badge-field-tint),
    var(--color-surface-raised)
  );
}

.zb .f-exp {
  fill: color-mix(
    in srgb,
    var(--energy-export-graphic) var(--badge-field-tint),
    var(--color-surface-raised)
  );
}

.zb .f-zero {
  fill: var(--color-surface-raised);
}

.zb .f-none {
  fill: color-mix(
    in srgb,
    var(--color-text-muted) var(--badge-field-grey),
    var(--color-surface-raised)
  );
}

.zb .arc {
  fill: none;
  stroke-linecap: round;
}

.zb .a-pv {
  stroke: var(--energy-pv-graphic);
}

.zb .a-wind {
  stroke: var(--energy-wind-graphic);
}

.zb .a-imp {
  stroke: var(--energy-import-graphic);
}

.zb .a-exp {
  stroke: var(--energy-export-graphic);
}

.zb .a-zero,
.zb .a-dots {
  stroke: var(--color-text-muted);
}

.zb .a-batt {
  stroke: var(--energy-battery-graphic);
}

.zb .a-gtrack {
  stroke: var(--color-border-strong);
}

.zb .hub {
  fill: var(--color-surface-raised);
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
}

.zb-n {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}

.zb-n.long,
.zb-s .zb-n,
.zb-m .zb-n {
  font-size: var(--text-xs);
}

/* L: value + caption per field; the value line starts `--va` further from the vertical axis (clear of the hub) */
.zb-f {
  position: absolute;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.zb-f.at-l {
  align-items: flex-end;
  text-align: right;
}

.zb-f.at-r {
  align-items: flex-start;
  text-align: left;
}

.zb-f.at-l .v,
.zb-f.at-l.hidden .u {
  margin-right: var(--va);
}

.zb-f.at-r .v,
.zb-f.at-r.hidden .u {
  margin-left: var(--va);
}

.zb-f .v {
  font-size: var(--text-sm);
  line-height: 17px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.zb-f .v.long {
  font-size: var(--text-xs);
  letter-spacing: -0.01em;
}

.zb-f .u {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  line-height: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.zb-f.at-l .u {
  flex-direction: row-reverse;
}

.zb-f svg,
.zb-i svg {
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zb-f .u svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

.zb-f.k-pv .u svg,
.zb-i.k-pv {
  color: var(--energy-pv-graphic);
}

.zb-f.k-wind .u svg,
.zb-i.k-wind {
  color: var(--energy-wind-graphic);
}

.zb-f.k-batt .u svg,
.zb-i.k-batt {
  color: var(--energy-battery-graphic);
}

.zb-f.k-imp .v {
  color: var(--energy-import-fg);
}

.zb-f.k-exp .v {
  color: var(--energy-export-fg);
}

.zb-f.k-imp .u svg,
.zb-i.k-imp {
  color: var(--energy-import-graphic);
}

.zb-f.k-exp .u svg,
.zb-i.k-exp {
  color: var(--energy-export-graphic);
}

.zb-f.k-zero .u svg {
  color: var(--color-text-muted);
}

.zb-f.nodata .v {
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

.zb-f.nodata .u svg,
.zb-f.hidden .u svg {
  color: var(--color-text-muted);
}

.zb-i {
  position: absolute;
  display: grid;
  place-items: center;
}

.zb-i svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

.zb-i.k-imp svg,
.zb-i.k-exp svg {
  stroke-width: 2.6;
}

.zb-s .zb-i svg {
  stroke-width: 3.2;
}

.zb-i.k-zero {
  color: var(--color-text);
}

.zb-i.nodata,
.zb-i.hidden {
  color: var(--color-text-muted);
}

.zb:hover {
  box-shadow: var(--shadow-3);
}

.zb:focus-visible {
  /* the ring is there at once: a shadow that eases in from one layer to three is a faint ring for a moment */
  transition: transform var(--dur-instant) var(--ease-standard);
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-focus-halo),
    0 0 0 4px var(--color-focus),
    var(--shadow-2);
}

.zb:active {
  transform: scale(0.97);
}

.zb[aria-expanded='true'] {
  box-shadow:
    0 0 0 3px var(--color-accent),
    var(--shadow-3);
}

.zb[aria-expanded='true']:focus-visible {
  box-shadow:
    0 0 0 2px var(--color-focus-halo),
    0 0 0 5px var(--color-focus),
    var(--shadow-3);
}

/* A badge of the level that is leaving (design S-216 §3.4, §3.6): no pointer, no hover; the level change animates it */
.leaflet-marker-icon.zone-badge-icon[data-leaving],
.leaflet-marker-icon.zone-badge-icon[data-leaving] .zb {
  pointer-events: none;
}

.zb.enter {
  animation: zb-in var(--dur-fast) var(--ease-out);
}

@keyframes zb-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zb {
    transition: none;
  }

  .zb:active {
    transform: none;
  }
}

/* map controls and legend (design S-203 §6; the other slots of S-207 §4.3 are later tickets) */
.map-actions {
  position: absolute;
  right: var(--space-3);
  bottom: calc(var(--space-2) + 24px);
  z-index: var(--z-map-controls);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-2);
  font: inherit;
  cursor: pointer;
}

@media (max-width: 767px) {
  .map-btn {
    height: var(--hit-min);
    min-width: var(--hit-min);
  }
}

.map-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-btn:hover {
  background: var(--color-surface-sunken);
}

.map-btn:active {
  background: var(--color-accent-soft);
  transform: scale(0.97);
}

/* the double focus ring of design S-207 D8: a halo that separates the ring from the basemap, then the ring */
.map-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-focus-halo),
    0 0 0 4px var(--color-focus),
    var(--shadow-2);
}

@media (prefers-reduced-motion: reduce) {
  .map-btn:active {
    transform: none;
  }
}

.map-btn[aria-expanded='true'] {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.legend-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  width: 340px;
  max-width: calc(100vw - 2 * var(--space-3));
  /* ZoneLegend.tsx caps the height to the room under the header; until it has measured, stay inside the viewport */
  max-height: calc(100dvh - var(--header-h) - var(--space-3) - 120px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.legend-card[hidden] {
  display: none;
}

/* the title row (.lh) stays; everything below it scrolls when the card is capped */
.legend-card .lb {
  display: grid;
  gap: var(--space-3);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.legend-card .lh {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.legend-card h2 {
  flex: 1;
  margin: 0;
  font-size: var(--text-lg);
}

.legend-card h3 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.legend-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.legend-card li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: var(--space-3);
}

.legend-card li > svg {
  width: 36px;
  height: 36px;
}

.legend-card p {
  margin: 0;
  color: var(--color-text-muted);
}

.legend-card .imp {
  color: var(--energy-import-fg);
  font-weight: var(--weight-semibold);
}

.legend-card .exp {
  color: var(--energy-export-fg);
  font-weight: var(--weight-semibold);
}

@media (max-width: 767px) {
  .legend-card {
    width: calc(100vw - 2 * var(--space-3));
  }
}

@media (min-width: 768px) {
  .legend-card {
    right: calc(100% + var(--space-3));
    bottom: 0;
  }
}

.legend-card .quad {
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.legend-card .quad > .zb {
  width: 84px;
  height: 84px;
  grid-row: 1 / span 2;
  grid-column: 2;
  box-shadow: var(--shadow-1);
  cursor: default;
}

.legend-card .quad > .zb > svg {
  overflow: hidden;
}

.legend-card .quad span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.legend-card .quad .tl {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-top: 10px;
  justify-content: flex-end;
  color: var(--energy-pv-fg);
}

.legend-card .quad .bl {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  padding-bottom: 10px;
  justify-content: flex-end;
  color: var(--color-text);
}

.legend-card .quad .tr {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  padding-top: 10px;
  color: var(--energy-battery-fg);
}

.legend-card .quad .br {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  padding-bottom: 10px;
  color: var(--energy-wind-fg);
}

.legend-card .quad > span:not(.zb) svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legend-close {
  width: var(--control-h-sm);
  min-width: var(--control-h-sm);
  height: var(--control-h-sm);
  box-shadow: none;
}

@media (max-width: 767px) {
  .legend-close {
    width: var(--hit-min);
    min-width: var(--hit-min);
    height: var(--hit-min);
  }
}
/* the zone panel: a bottom sheet below 1024 px, docked right from 1024 px (design S-204 §3-§5, tokens only) */
.zpanel {
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-surface);
  color: var(--color-text);
}

@keyframes zp-up {
  from {
    transform: translateY(100%);
  }
}

@keyframes zp-in {
  from {
    transform: translateX(100%);
  }
}

@media (max-width: 1023px) {
  .zpanel {
    --zp-page: calc(100dvh - var(--header-h));

    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--zp-page) * 0.6);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-3);
    animation: zp-up var(--dur-base) var(--ease-out);
    transition: height var(--dur-base) var(--ease-out);
  }

  .zone-map.panel-open .map-stack {
    display: none;
  }
}

@media (max-width: 767px) {
  .zpanel[data-sheet='peek'] {
    height: calc(var(--zp-page) * 0.5);
  }

  .zpanel[data-sheet='full'] {
    z-index: calc(var(--z-banner) + 50);
    height: calc(var(--zp-page) * 0.9);
  }
}

@media (min-width: 1024px) {
  .zpanel {
    flex: none;
    width: var(--panel-w);

    /* the fixed banner spans the full width: start under it so the header and × stay reachable (F3) */
    height: calc(100% - var(--banner-h, 0px));
    margin-top: var(--banner-h, 0px);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-3);
    animation: zp-in var(--dur-base) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zpanel {
    animation: none;
    transition: none;
  }
}

.zpanel-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-banner) + 40);
  background: var(--color-scrim);
  opacity: var(--opacity-scrim);
}

/* header: never scrolls; on a sheet it is the drag handle */
.zp-top {
  display: grid;
  flex: none;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .zp-top {
    padding-top: var(--space-4);
  }
}

@media (max-width: 1023px) {
  .zp-top {
    padding-top: 10px;
    touch-action: none;
  }

  .zp-grab {
    position: absolute;
    top: 3px;
    left: 50%;
    width: 40px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    transform: translateX(-50%);
  }
}

.zp-back {
  display: inline-flex;
  justify-self: start;
  gap: var(--space-1);
  align-items: center;
  min-height: var(--control-h);
  padding: 0 var(--space-2) 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.zp-back:hover {
  background: var(--color-surface-sunken);
}

.zp-back:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-focus-halo),
    0 0 0 4px var(--color-focus);
}

.zp-back svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  .zp-back {
    min-height: var(--hit-min);
  }
}

.zp-titlerow {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.zp-titleblock {
  flex: 1;
  min-width: 0;
}

.zp-titleblock h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.zp-titleblock h2:focus-visible {
  outline-offset: 0;
}

.zp-where {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-text-muted);
}

.zp-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 18px;
}

/* the separator belongs to the end of the part before it, so a wrapped line never starts with "·";
   the time part wraps its pill so the separator sits outside the pill */
.zp-sub > span:not(:last-child)::after {
  content: '·';
  margin-right: var(--space-1);
  margin-left: var(--space-1);
  color: var(--color-border-strong);
}

.zp-sub .stale {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  color: var(--status-warning-fg);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.zp-sub .stale svg,
.zp-sub .warn svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* a failed refresh: an 18 px warning pill (design §4, §6) */
.zp-sub .warn {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.zp-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.zp-btn:hover {
  background: var(--color-surface-sunken);
}

.zp-btn:active {
  background: var(--color-accent-soft);
  transform: scale(0.97);
}

.zp-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-focus-halo),
    0 0 0 4px var(--color-focus);
}

@media (prefers-reduced-motion: reduce) {
  .zp-btn:active {
    transform: none;
  }
}

.zp-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  .zp-btn {
    width: var(--hit-min);
    height: var(--hit-min);
  }
}

@media (min-width: 768px) {
  .zp-expand {
    display: none;
  }
}

.zp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.zp-pill {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding: 0 var(--space-2);
  border: 1.5px solid var(--source-real);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 20px;
}

.zp-pill.real {
  background: var(--source-real);
  color: var(--color-surface);
}

.zp-pill .sw {
  flex: none;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.zp-pill.real .sw {
  border: 2px solid var(--color-surface);
}

.zp-pill.sim .sw {
  border: 2px dashed var(--source-sim);
}

.zp-pill.sim {
  border-style: dashed;
  border-color: var(--source-sim);
  color: var(--color-text);
}

/* the four totals = the badge's four fields, larger: same tints, same grey without data */
.zt-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

@media (min-width: 768px) and (max-width: 1023px), (min-width: 1600px) {
  .zt-totals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.zf {
  min-width: 0;
  padding: var(--space-1) 10px 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.zf dt {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 16px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.zf dt svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zf dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  align-items: baseline;
  margin: 0;
}

.zf .zf-v {
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 24px;
  white-space: nowrap;
}

.zf-kwh {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zf-max {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the gauge bar of a field: a 1 px track in the middle, the fill on top; a field without a gauge keeps the empty 4 px */
.zf-bar {
  position: relative;
  display: block;
  flex: 0 0 100%;
  height: 4px;
  margin-top: 2px;
}

.zf-bar::before {
  position: absolute;
  top: 1.5px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--color-border-strong);
  content: '';
}

.zf-bar:empty::before {
  content: none;
}

.zf-bar > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--energy-battery-graphic);
}

.zf.k-pv .zf-bar > span {
  background: var(--energy-pv-graphic);
}

.zf.k-wind .zf-bar > span {
  background: var(--energy-wind-graphic);
}

.zf .zf-bar > .b-import {
  background: var(--energy-import-graphic);
}

.zf .zf-bar > .b-export {
  background: var(--energy-export-graphic);
}

.zf-sub {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 16px;
}

.zf.k-pv {
  background: color-mix(
    in srgb,
    var(--energy-pv-graphic) var(--badge-field-tint),
    var(--color-surface-raised)
  );
}

.zf.k-wind {
  background: color-mix(
    in srgb,
    var(--energy-wind-graphic) var(--badge-field-tint),
    var(--color-surface-raised)
  );
}

.zf.k-battery {
  background: color-mix(
    in srgb,
    var(--energy-battery-graphic) var(--badge-field-tint),
    var(--color-surface-raised)
  );
}

.zf.dir-import {
  background: color-mix(
    in srgb,
    var(--energy-import-graphic) var(--badge-field-tint),
    var(--color-surface-raised)
  );
}

.zf.dir-export {
  background: color-mix(
    in srgb,
    var(--energy-export-graphic) var(--badge-field-tint),
    var(--color-surface-raised)
  );
}

.zf.dir-import .zf-v {
  color: var(--energy-import-fg);
}

.zf.dir-export .zf-v {
  color: var(--energy-export-fg);
}

.zf.none {
  background: color-mix(
    in srgb,
    var(--color-text-muted) var(--badge-field-grey),
    var(--color-surface-raised)
  );
}

.zf.none .zf-v {
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

/* body: the only scroll box (both directions), so the sticky header row and first column share it */
.zp-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;

  /* a refresh replaces rows in place: the scroll offset stays where the visitor left it */
  overflow-anchor: none;
}

.zp-state,
.zp-alert {
  margin: var(--space-4);
}

.zp-alert {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.zp-note,
.zp-foot {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
}

.zp-note {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.zp-note span,
.zp-foot {
  color: var(--color-text-muted);
}

.zt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zt-table th,
.zt-table td {
  height: var(--hit-min);
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.zt-table th.zt-src,
.zt-table td:last-child {
  padding-right: var(--space-4);
}

.zt-table td:last-child {
  text-align: left;
}

.zt-table .num {
  text-align: right;
}

.zt-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: auto;
  padding: 0;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.zt-table thead th[aria-sort] {
  color: var(--color-accent);
}

.zt-table thead th button {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--hit-min);
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.zt-table thead th button:hover {
  background: var(--color-surface-sunken);
}

.zt-table thead th button:active {
  background: var(--color-accent-soft);
}

.zt-table thead th.num button {
  justify-content: flex-end;
}

.zt-table thead th.zt-src button {
  padding-left: var(--space-4);
}

.zt-h {
  display: grid;
  line-height: 14px;
}

.zt-hu {
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  text-transform: none;
}

.zt-sort {
  flex: none;
  width: 12px;
  height: 12px;
  fill: currentcolor;
}

.zt-table thead th:not([aria-sort]) .zt-sort {
  opacity: 0.6;
}

@media (min-width: 1024px) {
  .zt-table th,
  .zt-table td,
  .zt-table thead th button {
    height: var(--control-h);
    min-height: var(--control-h);
  }
}

/* the source cell stays in view while the table scrolls sideways */
.zt-table tbody th.zt-src {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 0 var(--space-2) 0 var(--space-4);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: var(--weight-regular);
}

.zt-table thead th.zt-src {
  left: 0;
  z-index: 3;
  border-right: 1px solid var(--color-border);
}

.zt-table tbody tr:hover > * {
  background: var(--color-surface-sunken);
}

.zt-table tbody tr[data-source='real']:hover > * {
  background: var(--color-surface);
}

.zt-table tbody tr[data-source='real']:hover > th.zt-src {
  background: var(--color-surface);
}

.zt-table tbody tr[data-link='my']:hover > *,
.zt-table tbody tr[data-link='my']:hover > th.zt-src {
  background: var(--color-surface-sunken);
}

.zt-table tbody tr[data-link='my']:hover .zt-l1 {
  text-decoration: underline;
}

.zt-link,
.zt-cell {
  display: grid;
  align-content: center;
  min-height: var(--hit-min);
}

.zt-link {
  color: var(--color-accent);
  text-decoration: none;
}

.zt-link:hover .zt-l1 {
  text-decoration: underline;
}

.zt-l1 {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  font-weight: var(--weight-medium);
  line-height: 18px;
}

.zt-table tbody th:not(:has(a)) .zt-l1 {
  color: var(--color-text);
}

.zt-l2 {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 16px;
}

.zt-l2.mono {
  font-family: var(--font-mono);
}

.zt-ring {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--source-real);
  stroke-width: 2;
}

.zt-ring.sim {
  stroke: var(--source-sim);
  stroke-dasharray: 3 2;
}

.zt-dash {
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

.zt-grid {
  font-weight: var(--weight-semibold);
}

.zt-grid.k-import {
  color: var(--energy-import-fg);
}

.zt-grid.k-export {
  color: var(--energy-export-fg);
}

.zt-table td[data-field='kind'] svg {
  width: 16px;
  height: 16px;
  margin-right: var(--space-1);
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zt-table td[data-field='last-seen'] {
  line-height: 18px;
}

.zt-stale {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  width: max-content;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 18px;
}

.zt-stale svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* S-206: a row the principal may open (design §4.1, §4.2) */
.zp-pill.who {
  border-style: solid;
  border-color: var(--color-accent-soft);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.zp-pill.who svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zt-link.my {
  grid-template-columns: 1fr 16px;
  column-gap: var(--space-1);
}

.zt-link.my > .zt-l1,
.zt-link.my > .zt-l2 {
  grid-column: 1;
}

.zt-link.my > svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zt-l2.own {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.zt-l2.own svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zt-table tbody tr[data-link='my'] {
  cursor: pointer;
}

.zt-table tbody tr[data-own] th.zt-src {
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.zt-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}