/* label-core.css — shared styles for the unified label renderer (label-core.js),
 * linked by index.html, examples.html, and label.html. Selectors are
 * un-scoped so the same card markup styles identically on every page; a page
 * may still add a more specific container rule (e.g. #addr-result) for layout.
 * Uses the design tokens from style.css. */

/* ── Card container ─────────────────────────────────────────────────────────*/
.label-card { background: var(--card); border: 2px solid var(--navy); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }
.label-card .label-head { display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--border); padding-bottom: 0.6rem; margin-bottom: 0.6rem; gap: 1rem; }
.label-card .composite-num { font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1; }
.label-card .grade-lg { width: 48px; height: 48px; line-height: 48px; text-align: center;
  border-radius: var(--radius); color: #fff; font-weight: 800; font-size: 1.5rem; }
.label-card .build-line { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }
.label-card .build-line strong { color: var(--navy); }
.label-card .na { color: var(--muted); font-style: italic; }
.natl-pct { font-size: 0.72em; font-weight: 600; color: var(--muted); opacity: 0.9;
  margin-left: 0.15em; white-space: nowrap; cursor: help; }
.label-card .meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.75rem; }

/* ── Confidence (data-quality) channel — neutral, separate from the grade ────*/
.conf-dot { color: var(--muted); font-size: 0.8em; margin-left: 0.15rem; cursor: help; }
.composite-conf { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.75rem; cursor: help; }
.composite-conf .conf-dot { margin-left: 0; }
.conf-legend { font-size: 0.72rem; color: var(--muted); margin-top: 0.75rem; font-style: italic; }

/* ── Climate scenario-band whisker over the score bar ───────────────────────*/
.score-bar { position: relative; }
.ci-whisker { position: absolute; top: 0; bottom: 0; }
.ci-whisker::before, .ci-whisker::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 1.5px; background: var(--text); }
.ci-whisker::before { left: 0; }
.ci-whisker::after { right: 0; }
.ci-whisker .ci-line {
  position: absolute; top: 50%; left: 0; right: 0; height: 1.5px; background: var(--text); transform: translateY(-50%); }

/* ── Expandable per-dimension rows (tap/click to reveal the numbers) ─────────*/
/* Each row is a native <details>; the summary is the score bar, the panel holds
   what the category measures + the real numbers behind the score. */
.dim-row { margin: 0.5rem 0; }
.dim-row > summary { cursor: pointer; list-style: none; padding: 3px 6px; margin: 0 -6px;
  border-radius: 6px; -webkit-tap-highlight-color: transparent; }
/* iOS Safari only toggles a <details> when the tap lands on the <summary> itself,
   not on a descendant. This summary is filled with nested divs/spans (the bar,
   score, dot), so without this a tap always hits a child and nothing opens on
   iPhone. Make the children transparent to pointer events so every tap registers
   on the summary. (Keyboard focus is unaffected.) Scoped to touch / coarse-pointer
   devices — desktop toggles fine on a descendant click, and there the rule would
   otherwise swallow the confidence dot's hover tooltip. */
@media (hover: none), (pointer: coarse) {
  .dim-row > summary * { pointer-events: none; }
}
.dim-row > summary::-webkit-details-marker { display: none; }   /* Safari */
.dim-row > summary::marker { content: ""; }
.dim-row > summary:hover { background: var(--bg); }
.dim-row > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dim-chevron { display: inline-block; font-size: 0.7em; color: var(--muted);
  margin-left: 0.35rem; transition: transform 0.15s ease; }
.dim-row[open] > summary .dim-chevron { transform: rotate(90deg); }
.dim-detail { background: var(--bg); border-radius: 6px; padding: 0.6rem 0.8rem;
  margin: 0.4rem 0 0.2rem; font-size: 0.85rem; }
.dim-about { color: var(--text); margin: 0 0 0.5rem; line-height: 1.5; }
.dim-nums { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; margin: 0.4rem 0 0; }
.dim-num { display: contents; }
.dim-num dt { color: var(--muted); }
.dim-num dd { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dim-prov { margin: 0.55rem 0 0; font-size: 0.75rem; color: var(--muted); }
.dim-prov .conf-dot { cursor: default; margin-left: 0; }

/* ── Lifetime "cost over a mortgage" strip ──────────────────────────────────*/
.cost-strip { border-top: 2px solid var(--border); border-bottom: 2px solid var(--border);
  padding: 0.7rem 0; margin: 0.75rem 0; }
.cost-cap { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cost-delta { font-size: 1.3rem; font-weight: 800; color: var(--navy); line-height: 1.15; }
.cost-delta .cheaper { color: #16a34a; }
.cost-delta .pricier { color: #dc2626; }
.cost-band, .cost-vs { font-size: 0.78rem; color: var(--muted); }
.cost-vs { margin-top: 0.15rem; }

/* ── Mode toggle + compare (A/B) + profile picker (Label page) ──────────────*/
.mode-toggle { display: flex; justify-content: center; gap: 0; margin: 0 auto 1rem; }
.mode-toggle button { font: inherit; font-weight: 600; padding: 0.4rem 1rem; border: 1px solid var(--border);
  background: var(--card); color: var(--text); cursor: pointer; }
.mode-toggle button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.mode-toggle button:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.mode-toggle button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.compare-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; align-items: flex-start; }
.compare-grid .label-card { flex: 1 1 340px; max-width: 460px; margin: 0; }
.compare-pickers { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1rem; }
.picker { text-align: center; margin: 0 auto 1rem; }
.picker label { font-weight: 600; color: var(--navy); margin-right: 0.5rem; }
.picker select { font: inherit; padding: 0.5rem 0.75rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card); color: var(--text); min-width: 220px; }

/* ── "Refine building details" auto-fill panel (index.html + label.html) ─────*/
/* Shared so the address-derived building form + provenance tags look identical
   on the home hero and the Label page. Page-specific chrome (the dark-hero
   colour overrides on index) stays inline on that page. */
.addr-details { margin: 0 0 0.5rem; }
.addr-details summary { cursor: pointer; color: var(--navy); font-weight: 600; font-size: 0.9rem; padding: 0.3rem 0; }
.addr-fields { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.6rem 0; }
.addr-fields label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem;
  color: var(--muted); flex: 1 1 140px; }
.addr-fields input, .addr-fields select { font: inherit; padding: 0.45rem 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); }
.field-tag { font-size: 0.68rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 999px;
  vertical-align: middle; white-space: nowrap; }
.field-tag.confirmed { background: #dcfce7; color: #166534; }
.field-tag.estimated { background: #e0e7ff; color: #3730a3; }
.field-tag.assumed   { background: #f1f5f9; color: #475569; }
.refine-count { font-weight: 500; font-size: 0.82rem; color: var(--muted); }
.addr-upgrades { border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; margin: 0.4rem 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.35rem; }
.addr-upgrades legend { font-size: 0.85rem; font-weight: 600; color: var(--navy); padding: 0 0.3rem; }
.addr-upgrades label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.addr-upgrades input { width: auto; }

/* ── Per-dimension A→B delta table (compare mode) ───────────────────────────*/
.delta-table { max-width: 640px; margin: 1.25rem auto 0; border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.delta-table th, .delta-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); text-align: right; }
.delta-table th:first-child, .delta-table td:first-child { text-align: left; }
.delta-table thead th { color: var(--navy); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.delta-table .up { color: #16a34a; font-weight: 700; }
.delta-table .down { color: #dc2626; font-weight: 700; }
.delta-table .flat { color: var(--muted); }

/* ── Address autocomplete (shared: addr-suggest.js) ─────────────────────────*/
.addr-ac { position: relative; flex: 1 1 320px; }
.addr-ac input[type=text] { width: 100%; box-sizing: border-box; }
.addr-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--card); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  max-height: 16rem; overflow-y: auto; list-style: none; margin: 0; padding: 0; text-align: left; }
.addr-suggest li { padding: 0.5rem 0.8rem; cursor: pointer; font-size: 0.9rem; color: var(--text); }
.addr-suggest li.active, .addr-suggest li:hover { background: #f1f5f9; }
.addr-suggest[hidden] { display: none; }

/* ── Grade legend + page states ─────────────────────────────────────────────*/
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: center; margin-top: 1.5rem; font-size: 0.8rem; color: var(--muted); }
.legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 0.35rem; vertical-align: middle; }
.loading, .error { text-align: center; color: var(--muted); padding: 2rem; }
.error { color: var(--red); }

@media (prefers-color-scheme: dark) {
  .label-card { border-color: #475569; }
  .label-card .composite-num, .label-card .build-line strong,
  .cost-delta, .delta-table thead th, .picker label { color: #e2e8f0; }
  .cost-delta .cheaper, .delta-table .up { color: #4ade80; }
  .cost-delta .pricier, .delta-table .down { color: #f87171; }
  .addr-suggest li.active, .addr-suggest li:hover { background: #334155; }
  .field-tag.confirmed { background: #14532d; color: #bbf7d0; }
  .field-tag.estimated { background: #312e81; color: #c7d2fe; }
  .field-tag.assumed   { background: #334155; color: #cbd5e1; }
  .addr-details summary, .addr-upgrades legend { color: #cbd5e1; }
}