/* =====================================================================
   Turbine card (#selected-card) — reference style, 2 Oct 2026.
   User-approved mockups: ui-review/reference-style.html,
   wtg-card-states.html, campaign-button-options.html (option B).

     T4-006 (● Completed)                         [✕]
     T4 wind farm · Updated 07:45
     ( WTG ◐ Campaign )   ← slider; Campaign replaces the 4 cards
     [ By road  5.9 km      ] [ Sunny  26 °C        ]
     [ Gusts 4.1 ▬▬──| 4.1/12] [ Rain 13 % ▬──      ]
     [ ▲ Navigate          ] [ ☁ Weather           ]
     [ ⋯ More options                            ⌄ ]

   Warm-grey sheet with separate white cards. Neighbouring cards and
   buttons are always even (same size, aligned lines). One solid button
   per tab: Navigate on WTG, Check in / Check out on Campaign.
   Tokens only (dist/tokens.css): no hex, no px font sizes, no !important.
   A map card, not a popup: the map stays visible and usable.
   ===================================================================== */

#selected-card {
  position: absolute;
  z-index: 25;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(78%, calc(100% - 2 * var(--hx-gutter)));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--hx-space-2);
  padding: var(--hx-space-2) var(--hx-space-3) calc(var(--hx-space-3) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--hx-page);
  border-radius: var(--hx-radius-sheet) var(--hx-radius-sheet) 0 0;
  box-shadow: var(--hx-shadow-sheet);
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: var(--hx-text-body);
  font-weight: var(--hx-weight-body);
  line-height: var(--hx-leading-body);
}
#selected-card[hidden],
#selected-card [hidden] { display: none; }
#selected-card > * { flex-shrink: 0; }
#selected-card::before {
  content: "";
  flex: none;
  align-self: center;
  width: var(--hx-space-5);
  height: var(--hx-space-1);
  border-radius: var(--hx-radius-chip);
  background: var(--hx-hairline);
}
@media (min-width: 761px) {
  #selected-card {
    left: var(--hx-gutter);
    right: auto;
    bottom: var(--hx-gutter);
    width: var(--hx-card-width);
    border-radius: var(--hx-radius-sheet);
  }
}

/* ---------- Shared card surface --------------------------------------- */
#selected-card :is(.destination-distance, .destination-drive, .metric, #mobile-destination-details) {
  box-sizing: border-box;
  background: var(--hx-card);
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
}

/* ---------- Header: ID + status chip, farm · updated, Close ----------- */
#selected-card .destination-head {
  display: flex;
  align-items: center;
  gap: var(--hx-space-3);
  padding: 0 var(--hx-space-1);
}
#selected-card .destination-head > div { flex: 1; min-width: 0; }
/* Status always under the WTG name (HIG review, 5 Oct 2026): with 17 px text the pill no longer fits beside every name,
   so it sat beside short names and under long ones and the card height jumped. One stacked layout, same height for all. */
#selected-card .destination-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hx-space-1);
}
#selected-card #destination-site {
  margin: 0;
  color: var(--hx-ink);
  font-size: var(--hx-text-display);
  font-weight: var(--hx-weight-strong);
  line-height: var(--hx-leading-tight);
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}
#selected-card #destination-status {
  display: inline-flex;
  align-items: center;
  gap: var(--hx-space-1);
  padding: calc(var(--hx-space-1) + var(--hx-chip-nudge)) var(--hx-space-3) calc(var(--hx-space-1) - var(--hx-chip-nudge)) var(--hx-space-2);
  border-radius: var(--hx-radius-chip);
  background: var(--hx-neutral-tint);
  color: var(--hx-neutral);
  font-size: var(--hx-text-meta);
  font-weight: var(--hx-weight-strong);
  line-height: var(--hx-leading-tight);
  white-space: nowrap;
}
#selected-card #destination-status svg { flex: none; width: 14px; height: 14px; margin-top: calc(-2 * var(--hx-chip-nudge)); }
#selected-card #destination-status { border: 2px solid transparent; }
#selected-card #destination-status[data-status="completed"] { background: var(--hx-good-tint); color: var(--hx-good); }
#selected-card #destination-status[data-status="in_progress"] { background: var(--hx-info-solid); color: var(--hx-on-dark); }   /* solid blue: light text reads in both themes */
#selected-card #destination-status[data-status="not_started"] { border-color: var(--hx-muted); background: var(--hx-card); color: var(--hx-neutral); }
#selected-card #destination-status[data-status="incomplete"] { background: var(--hx-warn-tint); color: var(--hx-warn); }
#selected-card #destination-status[data-status="reopened"] { background: var(--hx-reopened-tint); color: var(--hx-reopened); }
#selected-card #destination-status[data-status="maintenance"] { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); }
#selected-card .destination-sub {
  margin: var(--hx-space-1) 0 0;
  overflow: hidden;
  color: var(--hx-muted);
  font-size: var(--hx-text-meta);
  font-weight: var(--hx-weight-action);
  white-space: normal;   /* wraps instead of "…" at 120% on 360 px (5 Oct 2026): the update time must stay readable */
}
#selected-card #destination-farm:not(:empty) + #destination-updated:not(:empty)::before { content: " · "; }
#selected-card #close-card {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--hx-target-action);
  height: var(--hx-target-action);
  min-height: var(--hx-target-action);
  margin: 0;
  padding: 0;
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  color: var(--hx-ink);
  cursor: pointer;
}
#selected-card #close-card svg { width: var(--hx-icon-size); height: var(--hx-icon-size); stroke-width: var(--hx-icon-stroke); }

/* ---------- 2 × 2 cards: By road · Conditions · Gusts · Rain ---------- */
#selected-card .destination-identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--hx-space-2);
}
#selected-card #destination-name { display: none; }
#selected-card .card-weather:not([hidden]) { display: contents; }
#selected-card :is(.destination-distance, .destination-drive, .metric) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--hx-space-2) var(--hx-space-3);
}
#selected-card .metric-k {
  display: flex;
  align-items: center;
  gap: var(--hx-space-1);
  min-width: 0;
  color: var(--hx-muted);
  font-size: var(--hx-text-meta);
  font-weight: var(--hx-weight-action);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#selected-card .metric-k svg { flex: none; width: var(--hx-space-4); height: var(--hx-space-4); }
#selected-card :is(#destination-road-distance, #destination-drive-time, .metric-v) {
  margin: var(--hx-space-1) 0 var(--hx-space-2);
  color: var(--hx-ink);
  font-size: var(--hx-text-value-m);
  font-weight: var(--hx-weight-action);   /* the value style everywhere (5 Oct 2026, user: "55 %"): value size, weight 600, unit small and muted.
                                            Same weight on the Weather screen (.wt-v, .wt-pct) and the Campaigns counts (.ch-cell, .ch-num). */
  line-height: 1;
  white-space: nowrap;
}
#selected-card :is(#destination-road-distance, #destination-drive-time, .metric-v) small {
  color: var(--hx-muted);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-action);
}
/* Bottom line: pinned to the bottom so it aligns across each row. */
/* The short line under each big number (reference: label size, one line). */
#selected-card :is(#destination-distance-label, #destination-arrival, .metric-n) {
  display: flow-root;
  margin-top: auto;
  color: var(--hx-muted);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-action);
  line-height: 20px;
  white-space: nowrap;
}
#selected-card .metric-n b { color: var(--hx-ink); font-weight: var(--hx-weight-action); }
/* Bars: gusts against the 12 m/s limit (full width = limit), rain chance. */
/* Levels: amber near limit / rain likely, red over limit, grey when unknown. */
/* #hx-keep-specificity: the value rule above names IDs inside :is(), which outranked these colours (5 Oct 2026: "Heavy" showed grey) */
#selected-card .metric[data-level="warn"] :is(.metric-v, .metric-n, .metric-n b, #hx-keep-specificity) { color: var(--hx-warn); }
#selected-card .metric[data-level="danger"] { border-color: var(--hx-danger); }
#selected-card .metric[data-level="danger"] :is(.metric-v, .metric-n, .metric-n b, #hx-keep-specificity) { color: var(--hx-danger); }
#selected-card .metric[data-level="stale"] :is(.metric-v, #hx-keep-specificity) { color: var(--hx-muted); }
#selected-card .metric[data-level="stale"] :is(.metric-k, .metric-n, #hx-keep-specificity) { color: var(--hx-warn); }

/* ---------- Navigate + Weather: equal pair ---------------------------- */
#selected-card .primary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hx-space-2);
}
#selected-card #go-button,
#selected-card #selected-weather,
#selected-card #clear-route,
#selected-card #follow,
#selected-card .campaign-panel button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hx-space-2);
  width: 100%;
  min-width: 0;
  min-height: var(--hx-target-action);
  margin: 0;
  padding: var(--hx-space-2) var(--hx-space-3);
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: var(--hx-button-label-size);
  font-weight: var(--hx-weight-action);
  line-height: var(--hx-leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
#selected-card :is(#go-button, #selected-weather) > span { color: inherit; }
#selected-card :is(#go-button, #selected-weather) svg {
  flex: none;
  width: var(--hx-icon-size);
  height: var(--hx-icon-size);
  stroke-width: var(--hx-icon-stroke);
}
#selected-card #selected-weather:active,
#selected-card #clear-route:active,
#selected-card #follow:active,
#selected-card .campaign-panel button:active { background: var(--hx-track); }
/* One solid button per tab: Navigate on WTG, Check in / out on Campaign. */
#selected-card #go-button,
#selected-card .campaign-panel .ui-action--primary {
  border-color: transparent;
  background: var(--hx-primary-bg);
  color: var(--hx-primary-ink);
  box-shadow: var(--hx-glow-main);   /* Dark: a soft lime glow; Field: none */
  transition: box-shadow .15s ease;
}
#selected-card #go-button:active,
#selected-card .campaign-panel .ui-action--primary:active { background: var(--hx-primary-press); box-shadow: var(--hx-glow-main-press); }
#selected-card[data-tab="campaign"] #go-button {
  border-color: var(--hx-hairline);
  background: var(--hx-card);
  color: var(--hx-ink);
  box-shadow: none;
}
#selected-card #go-button:disabled,
#selected-card .campaign-panel button:disabled {
  border-color: var(--hx-hairline);
  background: var(--hx-disabled-bg);
  color: var(--hx-disabled-ink);
}
/* ---------- Campaign tab · Nearby work: by ROAD from this WTG, collapsed
   (approved prototype, 2 Oct 2026). Chips and squares: campaign-home.css. */
#selected-card .campaign-panel .nearby-work {
  margin-top: 0;
  padding: 0 var(--hx-space-3);
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
}
#selected-card .campaign-panel .nearby-work :is(.nearby-head, .nearby-row) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--hx-space-3);
  width: 100%;
  min-height: var(--hx-target-action);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hx-ink);
  font-size: var(--hx-text-body);
  text-align: left;
}
#selected-card .campaign-panel .nearby-work .nearby-row { border-top: 1px solid var(--hx-hairline); }
#selected-card .campaign-panel .nearby-work :is(.nearby-head, .nearby-row):active { background: var(--hx-page); }
#selected-card .campaign-panel .nearby-work :is(.nearby-head, .nearby-row) strong { flex: none; font-weight: var(--hx-weight-strong); white-space: nowrap; }
#selected-card .nearby-work .nearby-dim { margin-left: var(--hx-space-2); color: var(--hx-muted); font-size: var(--hx-text-label); font-weight: var(--hx-weight-action); }
#selected-card .nearby-work .nearby-peek { margin-left: auto; color: var(--hx-muted); font-size: var(--hx-text-meta); font-weight: var(--hx-weight-action); white-space: nowrap; }
#selected-card .nearby-work .nearby-peek b { color: var(--hx-ink); }
#selected-card .nearby-work .nearby-head strong + .ch-square { margin-left: auto; }
#selected-card .nearby-work .nearby-km { margin-left: auto; font-weight: var(--hx-weight-action); white-space: nowrap; }
#selected-card .nearby-work :is(.nearby-note, .nearby-farm-done) {
  display: flex;
  align-items: center;
  gap: var(--hx-space-2);
  min-height: var(--hx-target-icon);
  margin: 0;
  border-top: 1px solid var(--hx-hairline);
  color: var(--hx-muted);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-action);
}
#selected-card .nearby-work .nearby-farm-done { color: var(--hx-good); font-weight: var(--hx-weight-strong); }
#selected-card .nearby-work .nearby-farm-done svg { box-sizing: content-box; width: 14px; height: 14px; padding: 5px; border-radius: 50%; background: var(--hx-good-tint); }
#selected-card .go-note { display: none; }
#selected-card .destination-actions:not(:has(> :not([hidden]))) { display: none; }

/* ---------- WTG | Campaign: slider ------------------------------------ */
#selected-card .campaign-tabs {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hx-space-1);
  padding: var(--hx-space-1);
  border-radius: var(--hx-radius-card);
  background: var(--hx-track);
}
/* The thumb slides between the two halves. */
#selected-card .campaign-tabs::before {
  content: "";
  position: absolute;
  top: var(--hx-space-1);
  bottom: var(--hx-space-1);
  left: var(--hx-space-1);
  width: calc((100% - 3 * var(--hx-space-1)) / 2);
  border-radius: calc(var(--hx-radius-card) - var(--hx-space-1));
  background: var(--hx-card);
  box-shadow: var(--hx-shadow-raised);
  transition: transform .22s ease;
}
#selected-card .campaign-tabs[data-active="campaign"]::before { transform: translateX(calc(100% + var(--hx-space-1))); }
@media (prefers-reduced-motion: reduce) {
  #selected-card .campaign-tabs::before { transition: none; }
}
#selected-card .campaign-tabs > button {
  position: relative;
  z-index: 1;
  min-height: var(--hx-target-icon);
  margin: 0;
  padding: 0 var(--hx-space-2);
  border: 0;
  border-radius: calc(var(--hx-radius-card) - var(--hx-space-1));
  background: none;
  color: var(--hx-muted);
  font-family: var(--hx-font);
  font-size: var(--hx-button-label-size);
  font-weight: var(--hx-weight-action);
  transition: color .22s ease;
  cursor: pointer;
}
#selected-card .campaign-tabs > button[aria-selected="true"] { color: var(--hx-ink); }

/* ---------- More options: white card with rows ------------------------ */
#selected-card #mobile-destination-details { padding: 0 var(--hx-space-3); }
#selected-card :is(.destination-actions > *, #mobile-destination-details > summary, .destination-links > *) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--hx-space-3);
  width: 100%;
  min-height: var(--hx-target-action);
  margin: 0;
  padding: var(--hx-space-2) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hx-ink);
  font-family: var(--hx-font);
  font-size: var(--hx-text-body);
  font-weight: var(--hx-weight-action);
  line-height: var(--hx-leading-tight);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
#selected-card :is(.destination-links > *, .destination-location-facts) { border-top: 1px solid var(--hx-hairline); }
#selected-card :is(.destination-actions > *, #mobile-destination-details > summary, .destination-links > *) > svg {
  flex: none;
  width: var(--hx-icon-size);
  height: var(--hx-icon-size);
  stroke-width: var(--hx-icon-stroke);
}
#selected-card :is(.destination-actions > *, #mobile-destination-details > summary, .destination-links > *) > span { flex: 1; min-width: 0; color: inherit; }
#selected-card :is(.destination-actions > *, .destination-links > *)::after {
  flex: none;
  margin-left: auto;
  color: var(--hx-muted);
  font-size: var(--hx-text-title);
  font-weight: var(--hx-weight-body);
  line-height: 1;
}
#selected-card .destination-actions > button::after { content: "\203A" / ""; }
#selected-card :is(.destination-actions > a, .destination-links > a)::after { content: "\2197" / ""; font-size: var(--hx-text-body); }
#selected-card #mobile-destination-details > summary::-webkit-details-marker { display: none; }
#selected-card :is(.destination-location-row, .destination-links) { display: flex; flex-direction: column; }
#selected-card .destination-location-facts:not(:has(:not([hidden]))) { display: none; }
#selected-card :is(#destination-meta, #target-bearing) {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--hx-muted);
  font-size: var(--hx-text-label);
}
#selected-card .fact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--hx-space-1) var(--hx-space-3);
  min-height: var(--hx-target-icon);
  font-size: var(--hx-text-label);
  line-height: var(--hx-leading-tight);
}
#selected-card .fact-row + .fact-row,
#selected-card #destination-meta:not(:empty) + #target-bearing:not([hidden]) .fact-row:first-child { border-top: 1px solid var(--hx-hairline); }
#selected-card .fact-row > span { color: var(--hx-muted); font-weight: var(--hx-weight-action); }
#selected-card .fact-row > b { margin-left: auto; color: var(--hx-ink); font-weight: var(--hx-weight-action); text-align: right; }
#selected-card .route-buttons { display: grid; gap: var(--hx-space-2); }

/* ---------- Route messages -------------------------------------------- */
#selected-card :is(#coverage-note, #route-summary, #guidance):empty { display: none; }
#selected-card :is(#coverage-note, #route-summary) {
  padding: var(--hx-space-3);
  background: var(--hx-warn-tint);
  border: 1px solid var(--hx-hairline);
  border-left: var(--hx-space-1) solid var(--hx-warn);
  border-radius: var(--hx-radius-card);
  font-size: var(--hx-text-label);
}

/* ---------- Campaign tab content -------------------------------------- */
#selected-card .campaign-panel {
  display: flex;
  flex-direction: column;
  gap: var(--hx-space-2);
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ---------- Saved place: one full-width distance card ----------------- */
#selected-card.is-bookmark .destination-identity { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }

/* ---------- Campaign tab: shared campaign parts in this card's style --- */
/* Status is already the chip beside the WTG ID: do not repeat it here. */
#selected-card .campaign-panel > .campaign-status { display: none; }
#selected-card .campaign-panel .campaign-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: var(--hx-space-2) var(--hx-space-3);
  border: 1px solid var(--hx-hairline);
  border-radius: var(--hx-radius-card);
  background: var(--hx-card);
  color: var(--hx-muted);
  font-size: var(--hx-text-meta);
  font-weight: var(--hx-weight-action);
}
/* Picker row (5 Oct 2026, user: uneven space): the word "Campaign" repeats the tab above, so it is read by screen readers
   only; the campaign name is the row, at body size, with even space above and below; a long name wraps to two lines. */
#selected-card .campaign-panel .campaign-field { padding-block: var(--hx-space-1); }
#selected-card .campaign-panel .campaign-field > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#selected-card .campaign-panel .campaign-field > .campaign-choice {
  justify-content: space-between;
  gap: var(--hx-space-2);
  min-height: var(--hx-target-icon);
  padding: 0;
  border: 0;
  background: none;
  background-image: none;
  color: var(--hx-ink);
  font-size: var(--hx-text-body);
  font-weight: var(--hx-weight-action);
  line-height: var(--hx-leading-tight);
  text-align: left;
  white-space: normal;
}
#selected-card .campaign-panel .campaign-choice .ch-square { margin-left: auto; }
#selected-card .campaign-panel .campaign-notice { margin: 0; padding: 0; background: none; border: 0; }
#selected-card .campaign-panel .campaign-notice:empty { display: none; }
#selected-card .campaign-panel > p:not(.campaign-notice) { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-label); }

/* ---------- Reference mini cards (approved 2 Oct 2026) ------------------
   By road | Conditions / Rain | Gusts: icon badge + name (+ › on weather
   cards, which open the Weather screen), one big number, one short line;
   Rain and Gusts end with now → next 3 h bars. */
#selected-card button.metric { width: 100%; margin: 0; color: var(--hx-ink); font-family: var(--hx-font); text-align: left; cursor: pointer; }
#selected-card button.metric:active { background: var(--hx-page); }
#selected-card .metric-k { gap: var(--hx-space-2); }
#selected-card .metric-badge { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; }
#selected-card .metric-badge svg { width: 15px; height: 15px; }
#selected-card .metric-badge[data-tone="green"] { background: var(--hx-tone-green-bg); color: var(--hx-tone-green-ink); }
#selected-card .metric-badge[data-tone="blue"]  { background: var(--hx-tone-blue-bg);  color: var(--hx-tone-blue-ink); }
#selected-card .metric-badge[data-tone="amber"] { background: var(--hx-tone-amber-bg); color: var(--hx-tone-amber-ink); }
/* One neutral badge colour on the card (review item 10, 6 Oct 2026): colour is kept for status (the value and its line) */
#selected-card .metric-badge, #selected-card .metric-badge[data-tone] { background: var(--hx-tone-grey-bg); color: var(--hx-tone-grey-ink); }
#selected-card .metric-badge[data-tone="teal"]  { background: var(--hx-tone-teal-bg);  color: var(--hx-tone-teal-ink); }
#selected-card .metric-badge[data-tone="grey"]  { background: var(--hx-tone-grey-bg);  color: var(--hx-tone-grey-ink); }
#selected-card .metric-name { display: -webkit-box; min-width: 0; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1; padding-bottom: .2em; margin-bottom: -.2em; }   /* two lines fit the 26 px badge, so the numbers below stay level (the .2em keeps the tails of g / y / p visible); long weather words ("Light rain shower") use two lines, not "…" */
#selected-card .metric-go { display: grid; margin-left: auto; color: var(--hx-muted); }
#selected-card .metric-go svg { width: 16px; height: 16px; }
#selected-card .metric-n { display: flow-root; line-height: 20px; }
#selected-card .metric-n b { color: var(--hx-ink); font-weight: var(--hx-weight-strong); }
#selected-card .metric-bars { float: right; display: flex; align-items: flex-end; gap: 3px; height: 20px; padding-left: var(--hx-space-2); }
#selected-card .metric-bars i { width: 8px; border-radius: 2px; background: var(--hx-good); }
#selected-card .metric-bars i:first-child { width: 10px; }
#selected-card .metric-bars i[data-level="warn"]   { background: var(--hx-warn); }
#selected-card .metric-bars i[data-level="danger"] { background: var(--hx-danger); }
#selected-card .metric-bars i[data-level="low"]    { background: var(--hx-tone-blue-bg); box-shadow: inset 0 0 0 1px var(--hx-info); }
#selected-card .metric-bars i[data-level="high"]   { background: var(--hx-info); }
#selected-card .metric-bars i[data-level="none"]   { background: var(--hx-track); }

/* ---------- Campaign tab (approved reference, 2 Oct 2026) -------------
   Four even facts cards, one-word buttons in even pairs, Nearby work. */
#selected-card .campaign-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--hx-space-2); }
#selected-card .campaign-fact.info .metric-v { color: var(--hx-info); }
#selected-card .campaign-fact .metric-v { font-size: var(--hx-text-value-m); }
#selected-card .campaign-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hx-space-2); }
#selected-card .campaign-panel .campaign-note { margin: 0; color: var(--hx-muted); font-size: var(--hx-text-label); }
#selected-card .metric-badge[data-tone="violet"] { background: var(--hx-tone-violet-bg); color: var(--hx-tone-violet-ink); }
#selected-card .nearby-work .nearby-tracker .ch-square { margin-left: auto; }

/* ---------- Short card first (phones) — approved reference ------------
   Short: title, By road + Drive, Navigate (+ red Gusts card when over the limit).
   Full: tabs, By road | Conditions / Rain | Gusts, More options. */
#selected-card .card-grab { display: none; }
#selected-card .card-size { display: none; }
#selected-card .destination-drive { display: none; }
#selected-card #destination-distance-label .when-peek { display: none; }
#selected-card :is(#destination-distance-label, #destination-arrival) b { color: var(--hx-ink); font-weight: var(--hx-weight-strong); }
@media (max-width: 760px) {
  #selected-card .card-grab {
    display: grid; place-items: center; align-self: stretch; height: calc(var(--hx-target-icon) - var(--hx-space-2));   /* 40 px to tap (was 16 px) */
    margin: calc(-1 * var(--hx-space-4) - 2px) 0 calc(-1 * var(--hx-space-4) - 2px); padding: 0; border: 0; background: none; cursor: pointer;   /* still 4 px of layout */
  }
  #selected-card::before { display: none; }
  #selected-card .card-grab::before { content: ""; width: var(--hx-space-5); height: var(--hx-space-1); border-radius: var(--hx-radius-chip); background: var(--hx-hairline); }
  #selected-card .card-size {
    display: grid; place-items: center; flex: none;
    width: var(--hx-target-action); min-width: var(--hx-target-action); height: var(--hx-target-action); min-height: var(--hx-target-action);
    margin: 0; padding: 0; border: 1px solid var(--hx-hairline); border-radius: var(--hx-radius-card); background: var(--hx-card); color: var(--hx-ink); cursor: pointer;
  }
  #selected-card .destination-head { gap: var(--hx-space-2); }
  #selected-card[data-size="peek"] :is(.campaign-tabs, .campaign-panel, #mobile-destination-details) { display: none; }
  #selected-card[data-size="peek"] .metric:not([data-level="danger"]) { display: none; }
  #selected-card[data-size="peek"] .metric[data-level="danger"] { grid-column: 1 / -1; }
  #selected-card[data-size="peek"] .destination-drive { display: flex; }
  #selected-card[data-size="peek"] #destination-distance-label .when-full { display: none; }
  #selected-card[data-size="peek"] #destination-distance-label .when-peek { display: inline; }
  #selected-card[data-size="peek"][data-tab="campaign"] .destination-identity { display: grid; }
}

/* More options: a real + / − square (card-size.js), like every expand row in the reference. */
#selected-card #mobile-destination-details > summary .card-pm {
  display: grid; place-items: center; flex: none; margin-left: auto;
  width: var(--hx-badge-size); height: var(--hx-badge-size); border-radius: var(--hx-radius-badge);
  background: var(--hx-page); color: var(--hx-ink);
}
#selected-card #mobile-destination-details > summary .card-pm svg { width: calc(var(--hx-icon-size) * .75); height: calc(var(--hx-icon-size) * .75); }