/* Body Region Map (Phase A, /dc/browse, 2026-09-16).
   Matches the owner-approved Codex mockup (body-region-map-mockup.html) with
   the site's own tokens in place of the mockup literals. Markup:
   src/helpers/body-region-map.js. Behavior: public/js/body-region-map.js.
   Mockup role -> token: page -> --color-page-bg, surface -> --color-surface,
   surface-2 -> --color-surface-hover, ink -> --color-text, muted ->
   --color-text-muted, navy -> --color-primary, gold -> --color-accent-light,
   line -> --color-border. No motion: the approved set has none for this
   component. */

.brm-eyebrow { margin: 0; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--surface-warning-text); }
.browse-page .browse-h1 { margin: .35rem 0 0; }
.brm-lede { max-width: 780px; margin: .7rem 0 1.5rem; color: var(--color-text-muted); }

/* The aside is only the grid column now; the card is the map. */
.browse-page .browse-sidebar { background: none; border: 0; padding: 0; position: static; }

/* Results column wears the mockup's card. */
.browse-page .browse-main { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-md); padding: 22px; min-width: 0; }
.browse-page .browse-header h2 { font-size: 25px; }
.browse-page #system-count { margin: .3rem 0 0; font-size: 13px; color: var(--color-text-muted); }
.browse-page #filter-input { width: 100%; min-height: 46px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-hover); color: var(--color-text); padding: 0 14px; font: inherit; }
.browse-page .code-card-name { min-width: 0; overflow-wrap: anywhere; }
.browse-page #browse-area p { margin: .45rem 0 0; font-size: 13px; }
.browse-page .browse-selected-area { font-weight: 700; color: var(--color-primary); }
.browse-page .browse-side-help { color: var(--color-text-muted); max-width: 60ch; }
.code-card-side { margin: .35rem 0 0; font-size: 12px; color: var(--color-text-muted); }

/* ── the map card ───────────────────────────────────────────────────────── */
.brm-card { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent-light); border-radius: 14px; box-shadow: var(--shadow-md); padding: 18px; }
.brm-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.brm-head h2 { margin: 0; padding: 0; border: 0; font-size: 25px; color: var(--color-primary); }
.brm-seg { display: inline-flex; padding: 3px; background: var(--color-surface-hover); border: 1px solid var(--color-border); border-radius: 9px; }
.brm-view { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 13px; border-radius: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--color-text-muted); text-decoration: none; }
.brm-view:hover { text-decoration: none; color: var(--color-text); }
.brm-view[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.brm-view:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.brm-grid { display: grid; grid-template-columns: minmax(230px, 1fr) 190px; gap: 16px; }

/* Only the current view's art, shapes and list are present. */
.brm-card[data-view="exterior"] [data-brm-for="interior"],
.brm-card[data-view="interior"] [data-brm-for="exterior"] { display: none; }

/* The figure column stacks the orientation cue, the art and the selection
   caption, so the caption has its own reserved space and never covers the
   figure or a hit area (corrections BR-04). */
.brm-figure { position: relative; min-height: 560px; border-radius: 12px; background: linear-gradient(180deg, var(--color-surface-hover), transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 18px; overflow: hidden; }
.brm-orient { position: relative; z-index: 2; margin: 0; max-width: 32ch; text-align: center; font-family: var(--font-sans); font-size: 12px; line-height: 1.4; color: var(--color-text-muted); }
.brm-figure::before { content: ''; position: absolute; inset: 14px; border: 1px solid var(--color-border); border-radius: 50% 50% 40% 40% / 24% 24% 12% 12%; opacity: .55; pointer-events: none; }
/* The stage keeps the artwork's own 1024:1536 ratio, so the SVG overlay and
   the image share one box and register exactly. */
.brm-stage { position: relative; flex: none; height: 528px; aspect-ratio: 1024 / 1536; max-width: 100%; z-index: 1; }
.brm-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.brm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.brm-zone path { fill: transparent; stroke: transparent; stroke-width: 2px; vector-effect: non-scaling-stroke; cursor: pointer; }
.brm-zone:hover path, .brm-zone.is-hint path, .brm-zone.is-region path { fill: color-mix(in srgb, var(--color-accent-light) 26%, transparent); stroke: var(--color-accent-light); }
.brm-zone.is-selected path { fill: color-mix(in srgb, var(--color-accent-light) 56%, transparent); stroke: var(--color-primary); stroke-width: 3px; }
.brm-zone:focus { outline: none; }
.brm-zone:focus-visible path { fill: color-mix(in srgb, var(--color-accent-light) 26%, transparent); stroke: var(--color-primary); stroke-width: 4px; }
/* Organs are painted in the art, so their overlay stays a faint gold wash. */
[data-brm-for="interior"] .brm-zone:hover path,
[data-brm-for="interior"] .brm-zone.is-hint path { fill: var(--color-accent-light); fill-opacity: .18; stroke: var(--color-accent-light); stroke-width: 4px; }
[data-brm-for="interior"] .brm-zone.is-selected path { fill: var(--color-accent-light); fill-opacity: .18; stroke: var(--color-accent-light); stroke-width: 5px; }
[data-brm-for="interior"] .brm-zone:focus-visible path { fill: var(--color-accent-light); fill-opacity: .18; stroke: var(--color-primary); stroke-width: 4px; }

.brm-caption { position: relative; z-index: 2; min-height: 36px; max-width: 100%; display: flex; align-items: center; justify-content: center; }
.brm-tag { margin: 0; max-width: 100%; text-align: center; overflow-wrap: anywhere; background: var(--color-primary); color: var(--color-on-primary); border-radius: 8px; padding: 9px 12px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; }
.brm-tag[hidden] { display: none; }

/* ── the text list (the accessible equivalent of every shape) ─────────── */
.brm-list { display: flex; flex-direction: column; gap: 6px; }
.brm-list-h { margin: 2px 0 5px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.brm-whole { margin-top: 7px; padding-top: 9px; border-top: 1px solid var(--color-border); }
.brm-row { width: 100%; min-height: 44px; border: 1px solid transparent; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--color-text); text-decoration: none; }
.brm-row-name { min-width: 0; overflow-wrap: anywhere; }
.brm-row-count { flex: none; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.brm-row:hover, .brm-row.is-hint { background: var(--color-surface-hover); border-color: var(--color-border); text-decoration: none; }
.brm-row.is-selected { background: var(--surface-warning); border-color: var(--color-accent-light); color: var(--color-primary); }
.brm-row:focus-visible, .brm-side:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Your left and Your right share a row; Both takes the full row beneath, so
   three readable 44px choices fit the narrow list column (BR-01). */
.brm-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 2px; }
.brm-side-both { grid-column: 1 / -1; }
.brm-sides[hidden] { display: none; }
.brm-side { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--color-border); border-radius: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--color-text-muted); text-decoration: none; }
.brm-side:hover { text-decoration: none; color: var(--color-text); background: var(--color-surface-hover); }
.brm-side[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* ── status and system fallback ───────────────────────────────────────── */
.brm-status { margin-top: 14px; border-top: 1px solid var(--color-border); padding: 13px 2px 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; font-family: var(--font-sans); font-size: 13px; }
.brm-status p { margin: 0; color: var(--color-text); }
.brm-status strong { color: var(--color-primary); }
.brm-clear { min-height: 44px; border: 0; background: transparent; color: var(--color-primary); text-decoration: underline; font: inherit; font-weight: 700; cursor: pointer; padding: 0 2px; }
.brm-clear[hidden] { display: none; }
.brm-clear:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.brm-systems { margin-top: 12px; display: grid; gap: 6px; font-family: var(--font-sans); font-size: 13px; color: var(--color-text-muted); }
.brm-systems select { width: 100%; min-height: 44px; padding: .5rem; font-size: 16px; border: 1px solid var(--color-control-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font-family: var(--font-sans); }

@media (max-width: 900px) {
  .brm-grid { grid-template-columns: minmax(260px, 1fr) 220px; }
  .browse-page .browse-main { box-shadow: none; }
}
@media (max-width: 560px) {
  .brm-card { padding: 14px; border-radius: 12px; }
  .brm-head { align-items: flex-start; flex-direction: column; }
  .brm-head h2 { font-size: 23px; }
  .brm-seg { width: 100%; }
  .brm-view { flex: 1; }
  .brm-grid { grid-template-columns: 1fr; }
  .brm-figure { min-height: 0; padding: 16px 12px; }
  .brm-stage { height: 408px; }
  .brm-list { display: grid; grid-template-columns: 1fr 1fr; }
  .brm-list-h, .brm-whole, .brm-sides { grid-column: 1 / -1; }
  .brm-row { min-height: 48px; }
  .brm-status { align-items: flex-start; flex-direction: column; }
  .browse-page .browse-main { padding: 17px; }
}

/* ── Help wizard host (2026-09-16: the shared map replaces the old torso) ── */
.help-body-map-page .torso-areas { width: 100%; }
.help-body-map-page .brm-card { text-align: left; }
.help-body-map-page .torso-code-card { flex-wrap: wrap; }
.help-body-map-page .torso-code-note { flex-basis: 100%; margin: 0; }
.help-body-map-page .torso-codes-area p { margin: 0 0 .5rem; font-size: 13px; }
.brm-sys-fallback { margin-top: 12px; font-family: var(--font-sans); font-size: 13px; }
.brm-sys-fallback summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--color-primary); font-weight: 700; }
.brm-sys-fallback summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.brm-sys-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.brm-sys-link { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); font-weight: 600; text-decoration: none; }
.brm-sys-link:hover { background: var(--color-surface-hover); text-decoration: none; }
.brm-sys-link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* ── Labeled callouts: Back and spine, Gynecological (owner-approved 2026-09-16) ──
   The label is the control; the pointer is decorative (aria-hidden, no pointer
   events). The layout follows the FIGURE PANEL's own width, not the viewport:
   narrow panels (phones, the /dc/browse sidebar) stack the label in its own
   row under the art, above the caption, with no pointer; wide panels put it
   beside the figure with the pointer. The stage keeps its approved size. */
.brm-figure { container-type: inline-size; container-name: brmfig; }
.brm-callout { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface); color: var(--color-primary); font-family: var(--font-sans); font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; white-space: nowrap; }
.brm-callout:hover, .brm-callout.is-hint { background: var(--color-surface-hover); border-color: var(--color-accent-light); text-decoration: none; }
.brm-callout.is-selected { background: var(--surface-warning); border-color: var(--color-accent-light); }
.brm-callout:focus { outline: none; }
.brm-callout:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Stacked: reserve the row under the art so the label never covers it. */
.brm-stage { margin-bottom: 56px; }
.brm-pointer { display: none; pointer-events: none; }
.brm-pointer path { fill: none; stroke: var(--color-accent-light); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.brm-pointer circle { fill: var(--color-accent-light); }
@container brmfig (min-width: 640px) {
  .brm-stage { margin-bottom: 0; }
  .brm-callout { left: auto; right: calc(100% + 12px); top: var(--brm-callout-top); transform: translateY(-50%); width: 112px; white-space: normal; }
  .brm-pointer { display: inline; }
}