/* Info sheet, legend and site details. Loaded after style-sheets.css. */
/* Info sheet */
#info h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#info h3:first-child { margin-top: 0; }
#info p { margin: 0 0 var(--space-2); font-size: var(--fs-body); }
/* Column-wise: left all/some/none available, right unknown/out/groups; DOM order is the reading order. */
/* Column-wise: left all/some/none available, right unknown/out/groups; DOM order is the reading order.
   One row height (a pin without badge) and one text line centred on the pin head; the badge sample spans below. */
.legend { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(var(--legend-row, 47px), auto)) auto; grid-auto-flow: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.legend > div { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; font-size: var(--fs-sm); line-height: 1.4; }
.legend-marker { display: flex; justify-content: center; align-items: flex-start; width: 54px; height: var(--legend-row, 47px); flex-shrink: 0; }
.legend-label { padding-block-start: calc(var(--legend-head, 18px) - .7em); }
.legend > .legend-badge { grid-column: 1 / -1; grid-row: 4; align-items: center; }
.legend-badge .legend-marker { height: auto; align-items: center; }
.legend-badge .legend-label { padding-block-start: 0; }
.legend canvas { display: block; flex-shrink: 0; }
.sources { display: grid; gap: var(--space-3); }
.source { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); }
#info .source h4 { margin: 0 0 2px; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
#info .source p { margin: 0; font-size: var(--fs-sm); }
#info .source .source-note { margin-top: var(--space-1); color: var(--muted); }
#info .source .source-links { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); margin-top: var(--space-2); }

/* Site details: compact head, connector cards, collapsible extras. */
.site-notice { color: var(--muted); margin: var(--space-4) 0; }
.site-head { margin: calc(-1 * var(--space-1)) 0 var(--space-3); overflow: hidden; }
.site-head p { margin: 0; }
.site-labels { display: block; margin: var(--space-1) 0 0; font-size: var(--fs-sm); }
.site-label-line + .site-label-line { margin-top: var(--space-1); }
.site-labels dt, .site-labels dd { display: inline; }
.site-labels dd { min-width: 0; margin: 0; overflow-wrap: break-word; hyphens: auto; }
.site-label { color: var(--muted); }
.site-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.site-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.site-chip-icon svg { display: block; width: 13px; height: 13px; }
.site-chip.is-out { color: var(--busy-text); }
.site-chip.is-out .fresh-dot { background: var(--busy); }
.site-chip.is-warn { background: var(--warn-bg); color: var(--warn-text); }
.fresh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--unknown); flex-shrink: 0; }
.site-fresh.is-live { color: var(--free-text); } .site-fresh.is-live .fresh-dot { background: var(--free); animation: live-pulse 4s ease-in-out infinite; }
.site-fresh.is-stale { color: var(--muted); } .site-fresh.is-stale .fresh-dot { background: var(--muted); }
.site-fresh.is-recent { color: var(--warn-text); } .site-fresh.is-recent .fresh-dot { background: #dba62e; }
.site-fresh.is-static { background: var(--warn-bg); color: var(--warn-text); } .site-fresh.is-static .fresh-dot { background: #dba62e; }
.site-fresh.is-none .fresh-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.site-section { margin-bottom: var(--space-3); }
.plug-list { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(42%) max-content; row-gap: var(--space-2); column-gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
/* Compact card (v13): one-line head glyph | connector · kW · AC/DC + status | small chevron; the price lines below.
   The disclosure button is an overlay over the whole head, so the hit area is large while the chevron stays small. */
.plug-card { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; position: relative; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--surface); }
.plug-head { grid-column: 1 / -1; position: relative; display: grid; --plug-chevron-width: 16px; --plug-chevron-gap: var(--space-3); --plug-end-inset: calc(var(--plug-chevron-width) + var(--plug-chevron-gap)); grid-template-columns: minmax(0, 1fr) var(--plug-chevron-width); align-items: center; column-gap: var(--plug-chevron-gap); min-height: var(--glyph); }
/* Centre the glyph on the title block, independently of the price rows below. */
.plug-glyph { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 1px; width: var(--glyph); height: var(--glyph); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.plug-glyph svg.mdi { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.plug-glyph.is-multi svg.mdi { width: 17px; height: 17px; }
.plug-badge { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .02em; }
.plug-main { display: contents; }
.plug-main p { margin: 0; }
.plug-top { grid-column: 1; grid-row: 1; display: flex; justify-content: space-between; gap: var(--space-2); min-height: var(--glyph); align-items: center; padding-top: 0; }
.plug-title { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; font-size: var(--fs-body); overflow-wrap: normal; hyphens: none; }
.plug-name { font-weight: var(--fw-semibold); }
.plug-meta { font-weight: var(--fw-semibold); }
.plug-sep { color: var(--muted); }
.plug-status { flex-shrink: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
/* Price table (v14): fee name left, amount right-aligned, no rules or '+' signs. The fee's own conditions
   (from minute X, hours, cap) sit small and muted under its name, including explicit charging-start timing. */
.plug-price { grid-column: 1 / -1; grid-row: 2; min-width: 0; margin-inline-end: var(--plug-end-inset); margin-block: var(--space-1); font-size: var(--fs-sm); line-height: 1.4; color: var(--text); }
.plug-price-caption { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 4px !important; }
.price-rows { display: grid; row-gap: 5px; }
.price-row { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(min-content, max-content); column-gap: var(--space-4); align-items: baseline; }
.price-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.price-label { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
.price-amount { white-space: normal; font-weight: var(--fw-semibold); text-align: right; font-variant-numeric: tabular-nums; }
.price-value { white-space: nowrap; }
.price-row.is-sub { grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content); padding-left: var(--space-3); }
.price-row.is-sub .price-label { color: var(--muted); font-size: var(--fs-xs); }
.price-cond { min-width: 0; overflow-wrap: break-word; hyphens: auto; grid-column: 1 / 2; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.plug-price.is-missing { color: var(--muted); }
.plug-toggle { position: absolute; z-index: 1; inset: calc(-1 * var(--space-2)) calc(-1 * var(--space-3));
  min-height: var(--touch); padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; }
.plug-card.is-open .plug-toggle { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
/* Opened is not selected: no tint for the open state; touch screens keep :hover after a tap, so hover only for mice. */
@media (hover: hover) { .plug-toggle:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } }
.plug-toggle:active { background: color-mix(in srgb, var(--text) 6%, transparent); }
.plug-toggle:focus-visible { outline-offset: -3px; }
.plug-chevron { grid-column: 2; grid-row: 1; display: grid; place-items: center; height: var(--glyph); color: var(--muted); }
.plug-chevron svg { display: block; width: var(--plug-chevron-width); height: var(--plug-chevron-width); transition: transform 160ms ease-in; }
.plug-card.is-open .plug-chevron svg { transform: rotate(180deg); transition-duration: 200ms; transition-timing-function: ease-out; }
/* All opened groups share the list grid through nested subgrids: id | status | since. */
.plug-points { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) fit-content(42%) max-content; grid-template-columns: subgrid; column-gap: var(--space-3); margin: 4px 0 0; padding: 0; border-top: 1px solid var(--border); list-style: none; }
.plug-point { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) fit-content(42%) max-content; grid-template-columns: subgrid; align-items: center; min-height: 46px; padding: 1px 0; font-size: var(--fs-sm); line-height: 20px; }
.plug-point + .plug-point { border-top: 1px dashed var(--border); }
.plug-point-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: inherit; font-size: var(--fs-sm); }
.plug-point-id.is-generic { font-family: inherit; font-size: var(--fs-sm); color: var(--muted); }
.plug-point .dist { font-weight: var(--fw-medium); justify-self: start; }
.plug-point-since { color: var(--muted); font-weight: 400; text-align: right; white-space: nowrap; }
.dist { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dist i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.dist-free { color: var(--free-text); } .dist-free i { background: var(--free); }
.dist-busy { color: var(--busy-text); } .dist-busy i { background: var(--busy); }
.dist-out { color: var(--text); } .dist-out i { background: var(--out); }
.dist-unknown { color: var(--muted); font-weight: var(--fw-regular, 400); } .dist-unknown i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
/* Details: always open (v12), a plain titled block. */
.site-more { border-radius: var(--radius-md); background: var(--surface); padding: var(--space-3) var(--space-4) var(--space-4); }
.site-more-title { margin: 0 0 var(--space-2) !important; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.site-facts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-1) var(--space-4); margin: 0; padding: 0; font-size: var(--fs-sm); }
.site-facts dt { min-width: 0; color: var(--muted); overflow-wrap: normal; word-break: normal; hyphens: none; }
.site-facts dd { min-width: 0; margin: 0; overflow-wrap: break-word; hyphens: auto; }