/* Shared body figure (_body_figure.html, DECISIONS H-8 addendum 2026-10-01). Tokens come from app.css.
   A state is always a glyph and a word; the same size, colour and motion for every sign in a state, so nothing on the
   figure reads as severity. The final picture is the base style: every animation lives under
   prefers-reduced-motion: no-preference, so reduced motion shows the finished drawing at once. */
.bf { display: block; overflow: visible; }
.bf-full { width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.bf-compact, .bf-bust { width: 100%; height: auto; }
.bf-bust { -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }   /* cut at the hips; the cut fades out */
.bf-mini { width: 110px; height: 126px; -webkit-mask-image: linear-gradient(to bottom, #000 91%, transparent); mask-image: linear-gradient(to bottom, #000 91%, transparent); }   /* head to hips; the cut fades out */

/* drawing */
.bf-rim { fill: none; stroke: #edf1f5; stroke-width: 12; stroke-linejoin: round; }
.bf-glow { fill: none; stroke: transparent; stroke-width: 26; stroke-linejoin: round; }
.bf-glow.is-on { stroke: rgba(192, 38, 26, .11); }
.bf-mini .bf-sil { fill: #dde4ec; }   /* full and compact: the soft vertical gradient set in the macro */
.bf-contours path { fill: none; stroke: #c5ced8; stroke-width: 1; stroke-linecap: round; }
.bf-organs path { fill: #f3f6f9; fill-opacity: .93; stroke: #97a6b7; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.bf-organs path + path, .bf-organs [data-organ="oesophagus"] path { fill: none; }
.bf-organs [data-organ="oesophagus"] path { stroke-width: 3; stroke: #aab6c4; }
.bf-organs [data-organ="kidneys"] path { stroke-dasharray: none; fill-opacity: .8; }
.bf-bones path { fill: none; stroke: #b2bdc9; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.bf-ves { fill: none; stroke: #c49aab; stroke-width: 1.5; stroke-linecap: round; }
.bf-flow { fill: none; stroke: #fff; stroke-opacity: .85; stroke-width: .9; stroke-dasharray: .016 .084; }
/* organs take a neutral grey, never a state colour (the state is said by the marker placed on the organ): a grey outline
   when the SMS mentions a sign located there, a darker one when that landmark is the selected one */
.bf.hl-stomach [data-organ="stomach"] path:first-child,
.bf.hl-intestines [data-organ="intestines"] path:first-child { fill: #eceeec; stroke: var(--sel-ink); stroke-width: 2; }
.bf[data-sel-organ="stomach"] [data-organ="stomach"] path:first-child,
.bf[data-sel-organ="intestines"] [data-organ="intestines"] path:first-child { fill: #dfe2df; stroke: #3d4650; stroke-width: 2.4; }
.bf[data-sel-organ="whole_body"] .bf-rim { stroke: #d6d9d6; }

/* layers: cross-fade, then out of hit-testing */
.bf-l { opacity: 1; visibility: visible; }
.bf.hide-organs .bf-organs, .bf.hide-bones .bf-bones, .bf.hide-vessels .bf-vessels, .bf.hide-names .bf-names { opacity: 0; visibility: hidden; }

/* not-localised box */
.bf-nlbox rect { fill: #fbfbfa; stroke: #c3cad3; stroke-width: 1.2; stroke-dasharray: 4 4; }
.bf-nlbox.is-sel rect { stroke: var(--sel-ink); stroke-dasharray: none; stroke-width: 2; }
.bf-cap { font: 700 9.5px var(--font); letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-3); }

/* markers: data-state drives the look, so review.js can update a state in place */
.bf-dot { stroke-width: 2.2; fill: #fff; stroke: var(--grey); }
.bf-g { font: 800 13px var(--font); fill: var(--ink-2); pointer-events: none; }
.bf-compact .bf-g, .bf-bust .bf-g { font-size: 19px; }
.bf-compact .bf-dot, .bf-bust .bf-dot { stroke-width: 2.8; }
.bf-mini .bf-g { font-size: 33px; }
.bf-mini .bf-dot { stroke-width: 3.5; }
.bf-lm[data-state="present"] .bf-dot { fill: var(--red); stroke: #fff; }
.bf-lm[data-state="present"] .bf-g { fill: #fff; }
.bf-lm[data-state="absent_explicit"] .bf-dot { stroke: var(--teal); }
.bf-lm[data-state="absent_explicit"] .bf-g { fill: var(--teal); }
.bf-lm[data-state="not_mentioned"] .bf-dot { stroke-dasharray: 3 2.4; }
.bf-mini .bf-lm[data-state="not_mentioned"] .bf-dot { stroke-dasharray: 5 4; }
.bf-lm[data-state="uncertain"] .bf-dot { fill: var(--amber); stroke: #fff; }
.bf-lm[data-state="conflicting"] .bf-dot { fill: var(--purple); stroke: #fff; }
.bf-lm[data-state="uncertain"] .bf-g, .bf-lm[data-state="conflicting"] .bf-g { fill: #fff; }
.bf-lm[data-state="unevaluated"] .bf-dot { stroke: #a9b3be; stroke-width: 1.6; }
.bf-ring, .bf-pulse { fill: none; stroke: transparent; stroke-width: 2.5; pointer-events: none; }
.bf-q circle { fill: #fff; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 6 5; }
.bf-q text { font: 800 30px var(--font); fill: var(--blue); }

/* labels (Noms layer) */
.bf-n1 { font: 700 13px var(--font); fill: var(--ink); }
.bf-n2, .bf-n3 { font: 500 11px var(--font); fill: var(--ink-3); }
.bf-lab[data-state="present"] .bf-n2 { fill: var(--red); }
.bf-lab[data-state="absent_explicit"] .bf-n2 { fill: var(--teal); }
.bf-lab[data-state="uncertain"] .bf-n2 { fill: var(--amber); }
.bf-lab[data-state="conflicting"] .bf-n2 { fill: var(--purple); }
.bf-lab[data-state="not_mentioned"] .bf-n2 { fill: var(--ink-2); }
.bf-lead { fill: none; stroke: #b9c2cc; stroke-width: 1; }

/* selection, hover preview, keyboard focus */
.bf.is-interactive .bf-lm, .bf.is-interactive .bf-lab { cursor: pointer; }
.bf-lm:focus { outline: none; }
.bf-lm:focus-visible .bf-ring { stroke: var(--focus); stroke-width: 3; }
.bf-lm.is-sel .bf-ring { stroke: var(--sel-ink); }
.bf-lm.is-hot:not(.is-sel) .bf-ring { stroke: #b4b9bc; }
.bf-lm.is-sel:focus-visible .bf-ring { stroke: var(--focus); stroke-width: 3; }   /* keyboard focus stays blue, even on the selected landmark */
.bf-lab.is-sel .bf-n1 { fill: var(--sel-ink); }
.bf-lab.is-sel .bf-lead, .bf-lab.is-hot .bf-lead { stroke: var(--ink-2); stroke-width: 1.5; }
.bf-lab.is-hot .bf-n1 { text-decoration: underline; }
/* while one sign is selected the other graphics step back a little; text keeps its contrast */
.bf.has-sel .bf-lm:not(.is-sel):not(.is-hot) .bf-dot { opacity: .72; }
.bf.has-sel .bf-lab:not(.is-sel):not(.is-hot) .bf-lead { opacity: .55; }

/* legend + layer switches */
.bf-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
.bf-legend li { display: flex; gap: 6px; align-items: center; }
.bf-key { width: 18px; height: 18px; flex: none; overflow: visible; }
.bf-key .bf-g { font-size: 11px; }
.bf-layers { display: flex; gap: 6px; flex-wrap: wrap; }
.bf-tg { font: 700 13px var(--font); padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); cursor: pointer; }
.bf-tg:hover { background: var(--grey-soft); }
.bf-tg[aria-pressed="true"] { background: var(--brand-soft); border-color: #9fcdb0; color: var(--brand-2); }
.bf-tg[aria-pressed="true"]::before { content: "✓ "; }

@media (prefers-reduced-motion: no-preference) {
  .bf-l { transition: opacity .2s ease, visibility 0s linear 0s; }
  .bf.hide-organs .bf-organs, .bf.hide-bones .bf-bones, .bf.hide-vessels .bf-vessels, .bf.hide-names .bf-names { transition: opacity .2s ease, visibility 0s linear .2s; }
  .bf-dot, .bf-lead, .bf-rim { transition: opacity .2s ease, stroke .2s ease; }
  .bf.anim .bf-rim, .bf.anim .bf-sil, .bf.anim .bf-contours, .bf.anim .bf-glow { animation: bf-fade .55s ease-out both; }
  .bf.anim .bf-organs path, .bf.anim .bf-bones path { stroke-dasharray: 1; animation: bf-draw 1.1s cubic-bezier(.35, .6, .2, 1) .2s both; }
  .bf.anim .bf-organs path { animation-delay: .35s; }
  .bf.anim .bf-names { animation: bf-fade .4s ease-out .75s both; }
  .bf.anim .bf-lm { transform-box: fill-box; transform-origin: center; animation: bf-pop .42s cubic-bezier(.3, 1.45, .55, 1) both; animation-delay: calc(.7s + var(--i, 0) * 60ms); }
  .bf.anim .bf-lm.k-landmark { animation-name: bf-fade; }
  .bf:not(.hide-vessels) .bf-flow { animation: bf-flow 8s linear infinite; }
  .bf-lm.is-sel .bf-pulse { stroke: var(--sel-ink); transform-box: fill-box; transform-origin: center; animation: bf-pulse 2.8s ease-out 1.4s infinite; }
  .bf-lab.is-sel .bf-lead { stroke-dasharray: 1; animation: bf-line .45s ease-out both; }
}
.bf-d1 { --i: 1; } .bf-d2 { --i: 2; } .bf-d3 { --i: 3; } .bf-d4 { --i: 4; } .bf-d5 { --i: 5; } .bf-d6 { --i: 6; }
.bf-d7 { --i: 7; } .bf-d8 { --i: 8; } .bf-d9 { --i: 9; } .bf-d10 { --i: 10; } .bf-d11 { --i: 11; } .bf-d12 { --i: 12; }
.bf-d13 { --i: 13; } .bf-d14 { --i: 14; } .bf-d15 { --i: 15; } .bf-d16 { --i: 16; }
@keyframes bf-fade { from { opacity: 0; } }
@keyframes bf-draw { from { stroke-dashoffset: 1; fill-opacity: 0; } 55% { fill-opacity: 0; } to { stroke-dashoffset: 0; } }
@keyframes bf-pop { from { opacity: 0; transform: scale(.35); } }
@keyframes bf-pulse { 0% { opacity: .45; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes bf-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bf-flow { to { stroke-dashoffset: -1; } }

/* alert page and cards: arrows from a localised sign's marker to its organ; a brace from head to hips for the whole-body signs */
.bf-arrow-line { fill: none; stroke: #3d4650; stroke-width: 3.2; stroke-linecap: round; }
.bf-arrow-head { fill: #3d4650; }
.bf-brace { fill: none; stroke: #6b7178; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bf-compact .bf-arrow-line { stroke-width: 2.4; }
.bf-compact .bf-brace { stroke-width: 2.2; }
.bf-arrow.is-faint .bf-arrow-line { stroke: #9aa3ad; stroke-dasharray: 4 4; }
.bf-arrow.is-faint .bf-arrow-head { fill: #9aa3ad; }

/* Body map of the owner's design (_body_map.html, Hifi-Alert): a card per checklist sign around the compact figure, a
   line to each marker (body.js). Cards are white and rounded: a coloured dot + bold state, the SMS's exact words. */
.bm { container-type: inline-size; display: grid; gap: 12px; }
.bm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bm-head h3 { margin: 0; font-size: 19px; letter-spacing: -.005em; }
.bm-head a { font-weight: 700; font-size: 15px; color: var(--brand-2); }
.bm-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; color: var(--ink-2); }
.bm-key li { display: inline-flex; align-items: center; gap: 8px; }
.bm-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2.5px solid var(--grey); background: #fff; }
.bm-dot.st-present { background: var(--red); border-color: var(--red); }
.bm-dot.st-absent_explicit { border-color: var(--teal); }
.bm-dot.st-not_mentioned { border: 0; background: repeating-conic-gradient(#7e868e 0 26deg, transparent 26deg 45deg);
                            -webkit-mask: radial-gradient(circle, transparent 4.2px, #000 4.6px); mask: radial-gradient(circle, transparent 4.2px, #000 4.6px); }
.bm-dot.st-uncertain { background: var(--amber); border-color: var(--amber); }
.bm-dot.st-conflicting { background: var(--purple); border-color: var(--purple); }
.bm-dot.st-as_written { width: 11px; height: 11px; background: var(--blue); border-color: var(--blue); }

.bm-map { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 0.85fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.bm-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.bm-leaders path { fill: none; stroke: #a7aeb6; stroke-width: 1.4; }
.bm-leaders path.st-present { stroke: var(--red); stroke-width: 1.8; }
.bm-leaders path.st-uncertain, .bm-leaders path.st-conflicting { stroke: var(--amber); stroke-width: 1.6; }
.bm-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: space-between; position: relative; z-index: 1; }
.bm-co { width: 100%; display: grid; gap: 3px; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid #dfe2de;
         border-radius: 14px; padding: 12px 16px 13px; cursor: pointer; box-shadow: 0 1px 2px rgba(20, 24, 28, .04); transition: border-color .15s, box-shadow .15s; }
.bm-co:hover { border-color: #c5cbc4; }
.bm-co[aria-pressed="true"], .bm-co[aria-current="true"] { border: 2.5px solid var(--sel-edge); background: var(--sel-bg); padding: 11px 15px 12px; box-shadow: 0 4px 14px rgba(22, 30, 26, .12); }
.bm-co.is-static { cursor: default; }
.bm-co-name { font-weight: 800; font-size: 17px; line-height: 1.2; }
.bm-co-st { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; color: var(--ink-2); flex-wrap: wrap; }
.bm-co-st.st-present { color: #a3271b; }
.bm-co-st.st-absent_explicit { color: var(--teal); }
.bm-co-st.st-uncertain, .bm-co-st.st-conflicting { color: var(--amber); }
.bm-co-st.st-as_written { color: var(--blue); }
.bm-co-where { font-weight: 600; color: var(--ink-3); font-size: 14px; }
.bm-co-ev { font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
.bm-co.st-present .bm-co-ev { color: var(--ink); }
.bm-fig { margin: 0; display: grid; place-items: center; position: relative; z-index: 0; }
.bm-fig .bf-compact { width: 100%; max-width: 230px; }
.bm-note { margin: 0; font-size: 14px; color: var(--ink-3); max-width: 40ch; }
@container (max-width: 540px) {
  .bm-map { grid-template-columns: 1fr 1fr; }
  .bm-fig { grid-column: 1 / -1; grid-row: 1; }
  .bm-fig .bf-compact { max-width: 190px; }
  .bm-leaders { display: none; }
}
@container (max-width: 420px) { .bm-map { grid-template-columns: 1fr; } }

a.bm-co { text-decoration: none; }
.bm-co-name small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.bm-co-who { font-size: 12.5px; color: var(--teal); }
.bm-co.is-hot { border-color: var(--sel-edge); }


/* dashboard cards (owner design, 1 Oct): a soft figure; a reported sign is a red dot with a white ring and a halo */
.bf-mini .bf-organs { opacity: .62; }
.bf-mini .bf-lm[data-state="present"] .bf-dot { fill: var(--red); stroke: #fff; stroke-width: 7; filter: drop-shadow(0 0 7px rgba(192, 38, 26, .45)); }
.bf-mini .bf-lm[data-state="present"] .bf-g { display: none; }
.bf-mini .bf-glow.is-on { stroke: rgba(232, 120, 80, .22); stroke-width: 34; filter: blur(6px); }

/* alert page (owner request 1 Oct): the body map as the answer to "what did the SMS say", told closer to the body.
   The figure is cut at the hips and sits in a soft round spotlight; the cards are tighter and hug it; a card whose sign
   a stored rule named carries that rule (the rule that created this alert first). Same states, glyphs and words. */
.bm-bust .bm-map { grid-template-columns: minmax(0, 1fr) minmax(170px, 250px) minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 18px;
                   background: #f6f8f7; border: 1px solid var(--line); }
.bm-bust .bm-fig::before { content: ""; position: absolute; left: 50%; top: 50%; width: 112%; aspect-ratio: 1; transform: translate(-50%, -50%);
                           border-radius: 50%; background: radial-gradient(circle, #fff 0 52%, rgba(255, 255, 255, 0) 71%); z-index: -1; }
.bm-bust .bm-fig { isolation: isolate; }
.bm-bust .bm-leaders { z-index: 1; }   /* above the spotlight, so a line reaches its organ marker */
.bm-bust .bm-fig .bf-bust { max-width: 250px; }
.bm-bust .bm-col { gap: 10px; align-content: center; }
.bm-bust .bm-co { padding: 10px 13px 11px; border-radius: 12px; gap: 2px; border-color: #e3e6e2; }
.bm-bust .bm-co[aria-pressed="true"] { padding: 9px 12px 10px; }
.bm-bust .bm-co-name { font-size: 16px; }
.bm-bust .bm-co-st { font-size: 14.5px; gap: 6px; }
.bm-bust .bm-co-where { font-size: 13px; }
.bm-bust .bm-co-ev { font-size: 14px; }
.bm-co-rules { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bm-rule { font: 700 12px var(--font); padding: 2px 8px; border-radius: 999px; background: var(--grey-soft); color: var(--ink-2); border: 1px solid var(--line-2); }
.bm-rule.is-here { background: #fdecea; color: #a3271b; border-color: #f2c4bf; }
.bm-rule.is-here::before { content: "⚑ "; }
.bm-bust .bm-note { max-width: none; font-size: 13px; }
@container (min-width: 900px) {
  .bm-bust .bm-map { grid-template-columns: minmax(0, 1fr) minmax(220px, 340px) minmax(0, 1fr); padding: 18px 20px; }
  .bm-bust .bm-fig .bf-bust { max-width: 340px; }
}
@container (max-width: 540px) { .bm-bust .bm-map { grid-template-columns: 1fr 1fr; padding: 10px; } .bm-bust .bm-fig .bf-bust { max-width: 200px; } }
@container (max-width: 420px) { .bm-bust .bm-map { grid-template-columns: 1fr; } }