/* ===================================================================
   CARD-DATAPOINT — a permutation-card riff: a header bar over a
   collapsible, per-source-relationship-grouped breakdown of every
   source's reported value for one data point. Portable: pulls only
   from tokens.css, no dependency on field-guide.css.

   Composes Tag-confidence (see tag-confidence.css) into its header via
   components.js — this file only lays out the mount point
   (.card-datapoint-header-tags), it does not restyle .tag-confidence
   itself. Composes Tag-source (see tag-source.css) the same way for
   each row's source label — see .card-datapoint-row below for the one
   layout override this file adds on top of Tag-source's own styling
   (a fixed column width, scoped to this context only).
   =================================================================== */

/* container-type: inline-size (Phase 5 batch 5) — makes this component's
   own real rendered width, not the page's viewport width, the thing its
   narrow-layout rule (bottom of this file) responds to. Root cause of a
   real, previously-logged bug this fixes: components.html's own grid
   gives this component a genuinely narrow column (as little as ~300px)
   at a wide desktop viewport — the old `@media (max-width: 600px)`
   query never fired there (the real viewport was 1400px+), so
   .card-datapoint-row never switched to its stacked layout, and
   .card-datapoint-field/.card-datapoint-value (both flex:1 1 0%) just
   kept shrinking on one line down to an unreadable, character-broken
   sliver — confirmed live, both columns measured 43px wide, wrapping
   individual words mid-letter. A container query asks the right
   question directly ("is *this component* narrow") instead of a proxy
   for it ("is the *page* narrow") that happens to coincide on
   results.html's own real narrow-viewport layout but not here. */
.card-datapoint {
  container-type: inline-size;
  border: var(--border-width-hairline) solid var(--color-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: var(--space-3);
}

/* Header bar — a recessed panel, not an inverted one: --color-surface-
   sunken tracks the same lightness direction as the page in both themes
   (unlike --color-ink, it doesn't flip), so content on it uses ordinary
   on-surface text colors — the same convention .root-fontsize-control
   uses for its own sunken panel in spacing.html. No inversion, no
   contrast-swap logic needed. */

/* flex-wrap: nowrap, not the original wrap (Phase 5 batch 5) — the real
   root cause of a long title pushing Tag-confidence down, confirmed
   live before fixing rather than assumed from reading the CSS alone.
   .card-datapoint-title can already shrink and wrap its OWN text within
   one row (flex:1 1 auto, min-width:0, no white-space:nowrap) — that
   part was never the problem. The bug is a classic flex-wrap gotcha:
   for a multi-line (wrap) flex container, the browser decides which
   items share a line using each item's HYPOTHETICAL size (title's own
   natural, unwrapped, one-line content width, since its flex-basis is
   "auto") — not its final, post-shrink width. A long title's unwrapped
   width is far wider than the header, so the browser judged it "doesn't
   fit next to the tag" using that hypothetical size and moved
   .card-datapoint-header-tags to a genuine second flex line below the
   title, even though the title happily shrinks to fit once actually
   laid out. align-items (below) only controls alignment WITHIN a line
   and can't fix a bug that's really about which line an item lands on
   — confirmed live, changing it alone had zero visible effect. nowrap
   removes the second-line escape hatch entirely: title and the tag
   always share exactly one flex row; the title's own text still wraps
   internally and grows the row taller as needed, with the tag pinned
   beside it (align-items: flex-start keeps it at the row's own top
   edge rather than centered against a now-taller title). Confirmed
   live this holds at genuinely narrow widths too (part of this same
   batch's own narrow-width stress test, Reference doc) — title keeps
   shrinking/wrapping ever more tightly rather than ever overflowing or
   forcing the tag off its own row. */
.card-datapoint-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-sunken);
  border-bottom: var(--border-width-hairline) solid var(--color-hairline);
}

.card-datapoint-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--ui-h4-size);
  font-weight: var(--w-medium);
  color: var(--color-ink);
}

/* Header's right-aligned slot: holds the Tag-confidence pill when one
   applies. For a single-source card (no pill — nothing to corroborate
   against), this stays empty rather than restating the source count —
   the disclosure's "Total: N" line just below already says it. */
.card-datapoint-header-tags {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Disclosure — collapses the whole grouped-source list behind a
   distribution summary ("Sources - Agree: 2 | Align: 2 | …") plus a
   right-aligned running total, both written live by components.js from
   the actual per-source data. Native <details>/<summary> for built-in
   keyboard and screen-reader support; only the marker and spacing are
   restyled. The summary row stays visible in both states — only the
   groups underneath toggle — so the toggle affordance is always
   reachable. Caption-sized to match .card-datapoint-group-tag, the
   other small label in this component. */

.card-datapoint-disclosure-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.card-datapoint-disclosure-summary::-webkit-details-marker {
  display: none;
}

.card-datapoint-disclosure-summary::marker {
  content: '';
}

.card-datapoint-disclosure-summary:hover {
  color: var(--color-ink);
}

/* Real Lucide chevron-right glyph (icons/icons.js), injected directly
   by mountCardDatapoint() (components.js) rather than the ‘›’ text
   character this used to be — CSS-icon audit finding #3
   (Reference/css-icon-audit.md). Sized to roughly the same visual
   footprint the old bumped-up font-size gave it (still well past the
   12px caption size it'd otherwise inherit, same "real click target"
   reasoning as before), using the same width/height + inner svg
   pattern every other icon on this site already uses
   (.controls-map-icon, .results-command-icon). */
.card-datapoint-disclosure-chevron {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--ui-h4-size);
  height: var(--ui-h4-size);
  color: var(--color-ink);
  transition: transform 0.15s ease;
}

.card-datapoint-disclosure-chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}

.card-datapoint-disclosure-counts {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.card-datapoint-disclosure-label {
  flex-shrink: 0;
  color: var(--color-ink);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-datapoint-disclosure-breakdown {
  min-width: 0;
}

.card-datapoint-disclosure-total {
  flex-shrink: 0;
  color: var(--color-ink);
  font-weight: var(--w-semibold);
}

/* Numerals in the breakdown ("Align: 2") get the same emphasized weight
   as the Total value, for the same at-a-glance-readable reason — the
   group name stays muted body text, only the count itself is bolded. */
.card-datapoint-disclosure-count {
  color: var(--color-ink);
  font-weight: var(--w-semibold);
}

.card-datapoint-disclosure[open] > .card-datapoint-disclosure-summary .card-datapoint-disclosure-chevron {
  transform: rotate(90deg);
}

/* Confidence groups — each a hairline container in its own signal
   color, with a tag straddling the top border (roughly over the value
   column) the same way a fieldset legend notches its border. */

.card-datapoint-group {
  position: relative;
  margin: var(--space-5) var(--space-5) 0;
  border: var(--border-width-hairline) solid var(--group-color);
  border-radius: var(--radius-card);
}

.card-datapoint-group:last-of-type {
  margin-bottom: var(--space-5);
}

.card-datapoint-group.agree { --group-color: var(--color-signal-positive); }
.card-datapoint-group.align { --group-color: var(--color-signal-caution); }
.card-datapoint-group.diverge { --group-color: var(--color-signal-caution); }
.card-datapoint-group.conflict { --group-color: var(--color-signal-negative); }

/* A row with nothing to be grouped against — the single-source case —
   gets the same margin rhythm as a .card-datapoint-group but a neutral
   hairline border and no straddling tag, since "Agree/Align/Diverge/
   Conflict" are relationships between sources and a lone source has no
   relationship to characterize. */
.card-datapoint-groups > .card-datapoint-row {
  margin: var(--space-5);
  border: var(--border-width-hairline) solid var(--color-hairline);
  border-radius: var(--radius-card);
}

.card-datapoint-group-tag {
  position: absolute;
  top: 0;
  right: 20%; /* proportional position, not a token — "roughly over the value column" tolerates approximation */
  transform: translateY(-50%);
  background: var(--color-surface);
  padding: 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  font-weight: var(--w-semibold);
  color: var(--group-color);
  white-space: nowrap;
}

.card-datapoint-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-hairline) solid var(--color-hairline);
}

.card-datapoint-row:last-child {
  border-bottom: none;
}

/* Citable rows (Reference doc, source-document inspection modal, Phase
   2) — a row whose data carries `citation` (components.js's own
   buildRowEl()) gets a real click affordance: a cursor and a same-
   family hover tint reusing the exact color-mix formula
   .menu-profile-item's own hover state already uses on ink-filled
   surfaces (masthead.css), generalized to any surface here via
   --color-ink directly rather than the specific --color-surface value
   that formula assumes. This file itself still has zero knowledge of
   what clicking does — see components.js's own comment on buildRowEl()
   for why that stays entirely in results.js. */
.card-datapoint-row-citable {
  cursor: pointer;
}

.card-datapoint-row-citable:hover {
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
}

.card-datapoint-row-citable:focus-visible {
  outline: var(--border-width-active) solid var(--color-ink-secondary);
  outline-offset: -2px;
}

/* Active-citation state (Reference doc, modal-citation.js's own
   updateCitationFocus()) — which specific row the modal's current
   content maps back to, kept visually distinct from both the plain
   hover tint above (this uses double its opacity) and from the
   Agree/Align/Diverge/Conflict group border colors (--group-color,
   above in this file): those describe a data RELATIONSHIP between
   sources, this describes the user's own current FOCUS, so it
   deliberately stays in the neutral --color-ink family rather than
   borrowing a signal color — the same ink-not-signal choice this
   project already made for the map's own selection highlight and this
   modal's own backdrop dim (modal-citation.css). Left edge accent
   rather than a full border so it reads as "this one, specifically"
   against a row that's already inside its own bordered group. */
.card-datapoint-row-active-citation {
  background: color-mix(in srgb, var(--color-ink) 12%, transparent);
  box-shadow: inset 3px 0 0 0 var(--color-ink-secondary);
}

.card-datapoint-row .tag-source {
  flex: 0 0 auto;
  width: 9.5rem; /* fixed column width, not a spacing token — same convention as the Layout & Spacing page's own table columns */
}

/* overflow-wrap: break-word on both this rule and .card-datapoint-value
   below — column-level shrinking (flex-basis/min-width, see that rule's
   own comment) only wraps text AT its own natural word boundaries;
   confirmed live that a single long word squeezed into a narrower
   column than the word itself ("Exceeded," this component's own
   longest real single-word case) still overflowed past its box with
   the default overflow-wrap: normal, since a browser never breaks
   mid-word unless told to. break-word is the one addition that closes
   that gap at any width, not just typical ones — real Field Guide
   content is prose-like citation text, not opaque tokens, so breaking
   only when a word is otherwise unbreakably too wide has no visible
   effect at normal column widths. */
.card-datapoint-field {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  color: var(--color-muted);
}

/* flex: 0 0 auto (this rule's own original value) sized this column to
   its own content's natural, unwrapped width and refused to shrink —
   harmless for the short values most rows carry, but a real overflow
   bug for a longer citation value ("Exceeded 900 egg masses 5 of 16
   years (1997-2012)"): with nothing to constrain or wrap it, the box
   simply rendered wider than the row and spilled past its own border
   into the adjacent column. flex: 1 1 0% (matching .card-datapoint-
   field's own basis, immediately above) plus min-width: 0 (overriding
   flex items' own default min-width:auto, which is what actually
   blocks shrinking below content's intrinsic width even when flex-
   shrink allows it) is what lets this column truly shrink to whatever
   space the row leaves it and wrap its own text within that width —
   confirmed live, both at typical desktop widths (single line, right-
   aligned, visually unchanged for short values) and forced-narrow
   widths (multi-line, wrapped, zero overflow once overflow-wrap is
   also set — see that property's own comment on .card-datapoint-field
   above for the one case column-shrinking alone didn't cover). */
.card-datapoint-value {
  flex: 1 1 0%;
  min-width: 0;
  overflow-wrap: break-word;
  text-align: right;
  font-family: var(--font-ui);
  font-size: var(--ui-body-size);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.card-datapoint-note {
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  color: var(--color-muted);
  margin: var(--space-2) var(--space-5) var(--space-5);
}

/* @container, not the original @media (max-width: 600px) — Phase 5
   batch 5, same reasoning as .card-datapoint's own container-type rule
   above. 560px chosen empirically, not guessed: measured this
   component's own field/value column widths at a real range of
   container widths (300-700px) before picking a number — 560px is
   comfortably past where both columns still get a legible ~140px+ each
   (short values/fields read on one line, longer ones wrap at real word
   boundaries, no character-level breaking), while close enough to the
   original 600px viewport threshold that real narrow-phone behavior on
   search.html/results.html (where this component's own container width
   tracks the viewport closely, no sidebar in stacked mode) stays
   materially the same as before this change. */
@container (max-width: 560px) {
  .card-datapoint-disclosure-summary {
    flex-wrap: wrap;
  }
  .card-datapoint-row {
    flex-wrap: wrap;
  }
  /* .card-datapoint-field gets the same flex-basis: 100% treatment as
     .card-datapoint-value below (Phase 5 batch 5) — a second, distinct
     real bug this same container query's own narrow mode had, only
     found by testing an actual narrow real viewport rather than
     estimating from the CSS. Without this, .card-datapoint-value gets
     its own full-width line (below) but .card-datapoint-field (no width
     override, still flex:1 1 0%) stays squeezed onto the FIRST line
     alongside .tag-source's own fixed 9.5rem — comfortable room at the
     original 600px viewport breakpoint this rule was built for, but at
     a genuinely narrow real card (as little as ~225px available on that
     first line once tag-source's own fixed width is subtracted), field
     confirmed live rendering one character per line ("2/0/1/2/st/at/e…"
     — its own overflow-wrap: break-word, card-datapoint.css above,
     breaking every single character since even the narrowest word no
     longer fit). Giving field the same 100%-basis treatment gives every
     row three clean stacked lines at this width — source, then field,
     then value — instead of source+field squeezed onto one. */
  .card-datapoint-field {
    flex-basis: 100%;
  }
  .card-datapoint-value {
    flex-basis: 100%;
    text-align: left;
  }
  .card-datapoint-group-tag {
    right: var(--space-4);
  }
}