/* NEEDLE AND SYRINGE PROGRAMME, the components the four concepts share.
 *
 * LOADED AFTER /appts-shell.css and /nx.css, and it adds nothing to the token
 * layer. Every colour, radius, shadow, easing and font here is a token, so
 * these components cannot drift from the client app when the palette moves.
 * If you find yourself typing a hex value into this file, you are building
 * beside the site again.
 *
 * COLOUR DISCIPLINE, and it is the whole argument of this page:
 *   magenta  the primary action, and a risk worth acting on
 *   gold     something to watch, or a thing that has lapsed
 *   teal     a protective behaviour that is already in place
 *   red      999, 111, and a site that needs seeing today. NOTHING else.
 * Andy's brief called for no skulls, no warning triangles everywhere and no
 * photographs of needles. There are none. The illustration is a line figure
 * and the strongest thing on the page is a single red bar.
 *
 * Every rule is scoped with an hx- prefix. The shell's own classes (.btn,
 * .panel, .sec-head, .opts, .opt-card, .sheet) are used AS THEY ARE and are
 * never restyled here, because they are shared with a dozen other pages.
 */

/* ==========================================================================
   1. THE SIX DOORS
   The six actions, as tiles. They are the page's index wherever they appear,
   so they carry the same markup on all four concepts.
   ========================================================================== */
.hx-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1040px){.hx-doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.hx-doors{grid-template-columns:minmax(0,1fr)}}
.hx-door{position:relative;display:flex;flex-direction:column;gap:11px;width:100%;text-align:left;
  padding:24px;border-radius:var(--r-lg);background:var(--raise);border:1px solid var(--hair);
  color:var(--ink);overflow:hidden;
  transition:transform .24s var(--spring),border-color .22s var(--ease),
    background .22s var(--ease),box-shadow .24s var(--ease)}
.hx-door::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0 3px 3px 0;
  background:var(--hair-2);transition:background .22s var(--ease)}
.hx-door:hover{transform:translateY(-3px);border-color:var(--hair-2);background:var(--raise-2);
  box-shadow:var(--shadow)}
.hx-door:active{transform:scale(.985)}
.hx-door-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;
  background:var(--raise-2);color:var(--ink-2);border:1px solid var(--hair)}
.hx-door b{display:block;font-family:var(--display);font-size:19px;font-weight:650;
  letter-spacing:-.02em;line-height:1.2}
.hx-door p{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.hx-door-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:4px;
  font-size:13.5px;font-weight:650;color:var(--ink-3);transition:color .2s var(--ease),gap .2s var(--ease)}
.hx-door:hover .hx-door-go{color:var(--secondary-soft);gap:11px}
html[data-theme="light"] .hx-door:hover .hx-door-go{color:var(--secondary)}
/* the state chip a door can carry, so the deck says where you stand */
.hx-door-st{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:var(--raise-2);color:var(--ink-3);border:1px solid var(--hair)}
.hx-door-st i{width:7px;height:7px;border-radius:50%;background:currentColor;font-style:normal}
.hx-door-st.st-good{color:var(--teal-soft)}
.hx-door-st.st-watch{color:#E7C476}
.hx-door-st.st-risk{color:var(--secondary-soft)}
html[data-theme="light"] .hx-door-st.st-good{color:#0B7A6F;background:#DFF3F0;border-color:#B7E2DB}
html[data-theme="light"] .hx-door-st.st-watch{color:var(--amber);background:#F8EED8;border-color:#EBD9AE}
html[data-theme="light"] .hx-door-st.st-risk{color:var(--secondary);background:#F8E4EC;border-color:#EFC5D5}

/* the primary door: find equipment. It is deliberately the loudest tile. */
.hx-door.lead{background:linear-gradient(140deg,rgba(181,37,85,.2),rgba(0,119,200,.12) 62%,rgba(0,164,153,.1));
  border-color:var(--hair-2)}
.hx-door.lead::before{background:var(--secondary)}
.hx-door.lead .hx-door-ic{background:var(--secondary);color:#fff;border-color:transparent}
.hx-door.lead .hx-door-go{color:var(--secondary-soft)}
html[data-theme="light"] .hx-door.lead .hx-door-go{color:var(--secondary)}
@media(min-width:1041px){.hx-doors .hx-door.lead{grid-column:span 1}}

/* per-door accent, so six tiles are not six identical grey boxes */
.hx-door.t-find::before{background:var(--secondary)}
.hx-door.t-kit::before{background:var(--cyan)}
.hx-door.t-site::before{background:var(--gold)}
.hx-door.t-check::before{background:var(--teal)}
.hx-door.t-naloxone::before{background:var(--secondary-soft)}
.hx-door.t-bbv::before{background:var(--cyan-soft)}
.hx-door.t-kit .hx-door-ic{color:var(--cyan-soft)}
.hx-door.t-site .hx-door-ic{color:var(--gold)}
.hx-door.t-check .hx-door-ic{color:var(--teal-soft)}
.hx-door.t-naloxone .hx-door-ic{color:var(--secondary-soft)}
.hx-door.t-bbv .hx-door-ic{color:var(--cyan-soft)}
html[data-theme="light"] .hx-door.t-kit .hx-door-ic{color:var(--cyan)}
html[data-theme="light"] .hx-door.t-check .hx-door-ic{color:var(--teal)}
html[data-theme="light"] .hx-door.t-naloxone .hx-door-ic{color:var(--secondary)}
html[data-theme="light"] .hx-door.t-bbv .hx-door-ic{color:var(--cyan)}

/* ==========================================================================
   2. RAG, used by the board, the plan and the verdicts
   Glyph plus word plus colour, never colour alone.
   ========================================================================== */
.hx-rag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:var(--raise-2);color:var(--ink-3);border:1px solid var(--hair);white-space:nowrap}
.hx-rag i{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;font-style:normal}
.hx-rag.good{background:rgba(0,164,153,.18);color:var(--teal-soft);border-color:rgba(0,164,153,.3)}
.hx-rag.watch{background:rgba(185,138,47,.2);color:#E7C476;border-color:rgba(185,138,47,.34)}
.hx-rag.risk{background:rgba(181,37,85,.18);color:var(--secondary-soft);border-color:rgba(181,37,85,.32)}
html[data-theme="light"] .hx-rag.good{background:#DFF3F0;color:#0B7A6F;border-color:#B7E2DB}
html[data-theme="light"] .hx-rag.watch{background:#F8EED8;color:var(--amber);border-color:#EBD9AE}
html[data-theme="light"] .hx-rag.risk{background:#F8E4EC;color:var(--secondary);border-color:#EFC5D5}

/* ==========================================================================
   3. MY INJECTING HEALTH, the board
   ========================================================================== */
.hx-board{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--r-lg);
  background:var(--raise);overflow:hidden}
.hx-brow{display:grid;grid-template-columns:12px minmax(0,1.1fr) minmax(0,1fr) auto;gap:16px;
  align-items:center;width:100%;text-align:left;padding:17px 22px;color:var(--ink);
  background:transparent;transition:background .2s var(--ease)}
.hx-brow+.hx-brow{border-top:1px solid var(--hair)}
.hx-brow:hover{background:var(--raise-2)}
@media(max-width:760px){
  .hx-brow{grid-template-columns:12px minmax(0,1fr);gap:6px 14px}
  .hx-brow-v{grid-column:2}
  .hx-brow-go{grid-column:2;justify-self:start;margin-top:4px}
}
.hx-bdot{width:11px;height:11px;border-radius:50%;background:var(--hair-2);flex-shrink:0;
  box-shadow:0 0 0 1px var(--hair)}
.hx-bdot.good{background:var(--teal);box-shadow:none}
.hx-bdot.watch{background:var(--gold);box-shadow:none}
.hx-bdot.risk{background:var(--secondary);box-shadow:none}
.hx-brow-l{font-size:14.5px;font-weight:600;line-height:1.35}
.hx-brow-v b{display:block;font-size:15px;font-weight:650;line-height:1.3}
.hx-brow-v span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.hx-brow-v.none b{color:var(--ink-3);font-weight:500}
.hx-brow-go{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:650;
  color:var(--ink-3);white-space:nowrap;transition:color .2s var(--ease),gap .2s var(--ease)}
.hx-brow:hover .hx-brow-go{color:var(--secondary-soft);gap:10px}
html[data-theme="light"] .hx-brow:hover .hx-brow-go{color:var(--secondary)}
.hx-board-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 22px;
  border-top:1px solid var(--hair);background:var(--raise-2)}
.hx-board-foot p{font-size:13px;color:var(--ink-3);flex:1;min-width:200px;line-height:1.5}

/* ==========================================================================
   4. THE EQUIPMENT CHECKLIST
   It is a checklist, not a tutorial. Ticking builds a pickup list.
   ========================================================================== */
.hx-kit{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.hx-kititem{position:relative;display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;
  padding:17px 18px;border-radius:var(--r-md);background:var(--raise);border:1px solid var(--hair);
  color:var(--ink);transition:transform .2s var(--bounce),border-color .2s var(--ease),
    background .2s var(--ease)}
.hx-kititem:hover{background:var(--raise-2);border-color:var(--hair-2)}
.hx-kititem:active{transform:scale(.985)}
.hx-kititem[aria-pressed="true"]{border-color:var(--teal);background:rgba(0,164,153,.14)}
html[data-theme="light"] .hx-kititem[aria-pressed="true"]{background:#E7F6F3}
.hx-kitbox{width:24px;height:24px;border-radius:8px;flex-shrink:0;margin-top:1px;display:grid;
  place-items:center;border:1.6px solid var(--hair-2);background:transparent;color:transparent;
  transition:all .2s var(--bounce)}
.hx-kititem[aria-pressed="true"] .hx-kitbox{background:var(--teal);border-color:var(--teal);color:#fff}
.hx-kittx{flex:1;min-width:0}
.hx-kittx b{display:block;font-size:14.5px;font-weight:650;margin-bottom:3px;line-height:1.3}
.hx-kittx span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.hx-kitwhy{margin-top:9px;font-size:12.5px;color:var(--ink-3);line-height:1.5;padding-top:9px;
  border-top:1px solid var(--hair)}
.hx-kit-ic{color:var(--cyan-soft);flex-shrink:0;margin-top:1px}
html[data-theme="light"] .hx-kit-ic{color:var(--cyan)}
.hx-kitmore{margin-top:10px;font-size:12.5px;font-weight:650;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:6px;background:transparent;padding:0}
.hx-kitmore:hover{color:var(--ink-2)}

/* the running summary under the checklist */
.hx-kitsum{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;padding:20px 24px;
  border-radius:var(--r-lg);border:1px solid var(--hair-2);
  background:linear-gradient(140deg,rgba(0,164,153,.16),rgba(0,119,200,.1))}
.hx-kitsum-tx{flex:1;min-width:240px}
.hx-kitsum-tx b{display:block;font-family:var(--display);font-size:18px;font-weight:650;
  letter-spacing:-.02em;margin-bottom:5px}
.hx-kitsum-tx p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.hx-kitsum .btn{flex-shrink:0}

/* ==========================================================================
   5. THE PLAN, from the safer injecting check
   ========================================================================== */
.hx-plan{display:flex;flex-direction:column;gap:12px}
.hx-planrow{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-lg);
  background:var(--raise);border:1px solid var(--hair);border-left:3px solid var(--hair-2)}
.hx-planrow.act{border-left-color:var(--secondary);background:rgba(181,37,85,.09)}
.hx-planrow.watch{border-left-color:var(--gold);background:rgba(185,138,47,.09)}
.hx-planrow.good{border-left-color:var(--teal);background:rgba(0,164,153,.08)}
html[data-theme="light"] .hx-planrow.act{background:#FCF0F4}
html[data-theme="light"] .hx-planrow.watch{background:#FDF6E7}
html[data-theme="light"] .hx-planrow.good{background:#EFF9F7}
.hx-plandot{width:26px;height:26px;border-radius:50%;flex-shrink:0;margin-top:1px;display:grid;
  place-items:center;color:#fff;background:var(--hair-2)}
.hx-planrow.act .hx-plandot{background:var(--secondary)}
.hx-planrow.watch .hx-plandot{background:var(--gold)}
.hx-planrow.good .hx-plandot{background:var(--teal)}
.hx-plantx{flex:1;min-width:0}
.hx-plantx b{display:block;font-family:var(--display);font-size:17px;font-weight:650;
  letter-spacing:-.02em;margin-bottom:6px;line-height:1.25}
.hx-plantx p{font-size:14px;line-height:1.55;color:var(--ink-2)}
.hx-planact{margin-top:13px;display:flex;gap:9px;flex-wrap:wrap}
.hx-planhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 24px;
  border-radius:var(--r-lg);border:1px solid var(--hair-2);margin-bottom:16px;
  background:linear-gradient(140deg,rgba(181,37,85,.14),rgba(0,119,200,.1) 60%,rgba(0,164,153,.09))}
.hx-planhead b{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.028em}
.hx-planhead p{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.hx-planhead .btn{margin-left:auto}

/* ==========================================================================
   6. THE BODY MAP
   A plain line figure. No photography, no wound imagery, nothing distressing.
   ========================================================================== */
.hx-bodywrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--gutter);
  align-items:start}
@media(max-width:860px){.hx-bodywrap{grid-template-columns:minmax(0,1fr)}}
/* THE FIGURE IS SIZED BY HEIGHT, NOT WIDTH. Sized by width it filled its
   column and then ran off the bottom of the sheet, because a 2:3 portrait in a
   440px column is 660px tall and the sheet has nothing like that to give once
   the toggle and the note have taken theirs. It now fits the room available and
   the column is whatever width that leaves. */
.hx-figure{position:relative;border-radius:var(--r-lg);border:1px solid var(--hair);
  background:var(--raise);padding:18px;overflow:hidden;
  display:flex;justify-content:center;align-items:flex-start}
/* The spots are percentages of the DRAWING, so their container must be exactly
   the SVG box. Positioned against .hx-figure they inherited its 22px of padding
   and every one sat inset from the limb it marks. Measured, not guessed. */
/* inline-block and line-height 0 so this box is EXACTLY the image box: the
   hotspots are percentages of it, and any slack would slide all ten. */
.hx-figure-in{position:relative;display:inline-block;line-height:0;max-width:100%}
/* The figure is the real artwork, keyed to alpha so it sits on the card rather
   than on a grey rectangle. It carries its own light, so the card behind it
   stays plain and nothing is blended over it: a blend mode on near-black art is
   how the Nexus brain ended up with a visible box round it. */
.hx-fig-img{display:block;width:auto;height:auto;max-width:100%;max-height:62vh;
  border-radius:var(--r-md)}
.hx-sexpick{justify-content:center;margin-bottom:16px}
.hx-sexpick button{min-width:96px;justify-content:center;text-align:center}

/* The markers are quieter than they were, because the body now carries the
   state. They are an affordance, not the interface. */
/* A MARKER SITS ON A PHOTOGRAPH, so it cannot borrow the card's colours: at
   62% of --raise-2 they were nearly invisible on light skin in the light theme.
   They use the app's own glass treatment instead, which is built for exactly
   this, and they read on any artwork in either theme. Measured. */
.hx-spot{position:absolute;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1.5px solid var(--hair-2);box-shadow:var(--shadow);
  color:var(--ink-2);font-size:10.5px;font-weight:700;padding:0;
  transition:transform .22s var(--bounce),background .2s var(--ease),
    border-color .2s var(--ease),box-shadow .2s var(--ease)}
/* THE RESTING DOT IS TAKEN OUT OF FLOW. As an in-flow pseudo-element it was a
   second grid item, so a selected marker had TWO rows, the invisible dot and
   the tick, and place-items:center centred the pair rather than the tick. The
   tick sat high and left. Hiding it with opacity did not help, because opacity
   does not remove a box. */
.hx-spot::before{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;
  border-radius:50%;background:currentColor;transform:translate(-50%,-50%);opacity:.7;
  transition:opacity .2s var(--ease),transform .2s var(--bounce)}
.hx-spot[aria-pressed="true"]::before,.hx-spot:hover::before{opacity:0;
  transform:translate(-50%,-50%) scale(.4)}
/* and the tick is now the only thing being centred */
.hx-spot > svg{display:block}
.hx-spot:hover{transform:translate(-50%,-50%) scale(1.14);color:var(--ink);
  border-color:var(--secondary)}
.hx-spot[aria-pressed="true"]{background:var(--secondary);border-color:var(--secondary);color:#fff;
  opacity:1;transform:translate(-50%,-50%) scale(1.16);
  box-shadow:0 0 0 5px rgba(181,37,85,.3),0 0 34px 15px rgba(181,37,85,.34)}
.hx-spot.hot{border-color:rgba(185,138,47,.65)}
.hx-spot-lab{position:absolute;left:50%;top:calc(100% + 11px);transform:translateX(-50%);
  font-size:10.5px;font-weight:650;color:var(--ink-3);white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .2s var(--ease)}
.hx-spot:hover .hx-spot-lab,.hx-spot[aria-pressed="true"] .hx-spot-lab{opacity:1;color:var(--ink-2)}
.hx-figure-note{margin-top:14px;font-size:12px;color:var(--ink-3);line-height:1.5;text-align:center}

.hx-signs{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.hx-sign{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:14px 16px;
  border-radius:var(--r-md);background:var(--raise);border:1px solid var(--hair);color:var(--ink);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .18s var(--bounce)}
.hx-sign:hover{background:var(--raise-2);border-color:var(--hair-2)}
.hx-sign:active{transform:scale(.985)}
.hx-sign[aria-pressed="true"]{border-color:var(--gold);background:rgba(185,138,47,.15)}
html[data-theme="light"] .hx-sign[aria-pressed="true"]{background:#FBF2DF}
.hx-sign.none[aria-pressed="true"]{border-color:var(--teal);background:rgba(0,164,153,.15)}
html[data-theme="light"] .hx-sign.none[aria-pressed="true"]{background:#E7F6F3}
.hx-signbox{width:21px;height:21px;border-radius:7px;flex-shrink:0;margin-top:1px;display:grid;
  place-items:center;border:1.6px solid var(--hair-2);background:transparent;color:transparent;
  transition:all .2s var(--bounce)}
.hx-sign[aria-pressed="true"] .hx-signbox{background:var(--gold);border-color:var(--gold);color:#fff}
.hx-sign.none[aria-pressed="true"] .hx-signbox{background:var(--teal);border-color:var(--teal)}
.hx-signtx b{display:block;font-size:14px;font-weight:650;margin-bottom:2px}
.hx-signtx span{display:block;font-size:12px;color:var(--ink-3);line-height:1.4}

/* the verdict. This is the only place besides 999 that may go red. */
.hx-verdict{padding:24px 26px;border-radius:var(--r-lg);border:1px solid var(--hair-2);
  background:var(--raise)}
.hx-verdict.ok{border-color:rgba(0,164,153,.4);background:rgba(0,164,153,.1)}
.hx-verdict.check{border-color:rgba(185,138,47,.44);background:rgba(185,138,47,.12)}
.hx-verdict.urgent{border-color:rgba(180,35,24,.44);background:rgba(180,35,24,.12)}
html[data-theme="light"] .hx-verdict.ok{background:#EDF8F6}
html[data-theme="light"] .hx-verdict.check{background:#FDF5E6}
html[data-theme="light"] .hx-verdict.urgent{background:#FDECEA}
.hx-verdict-k{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:14px;
  background:var(--raise-2);color:var(--ink-2)}
.hx-verdict.ok .hx-verdict-k{background:var(--teal);color:#fff}
.hx-verdict.check .hx-verdict-k{background:var(--gold);color:#fff}
.hx-verdict.urgent .hx-verdict-k{background:var(--system-error);color:#fff}
.hx-verdict h3{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.03em;
  line-height:1.15;margin-bottom:10px}
.hx-verdict p{font-size:15px;line-height:1.6;color:var(--ink-2);margin-bottom:14px}
.hx-verdict-why{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-3);
  line-height:1.5;padding:12px 14px;border-radius:var(--r-sm);background:var(--raise-2);
  border:1px solid var(--hair);margin-bottom:16px}
.hx-verdict-why b{color:var(--ink-2);font-weight:650}
.hx-verdict-acts{display:flex;gap:10px;flex-wrap:wrap}

/* ==========================================================================
   7. BLOOD BORNE VIRUSES
   ========================================================================== */
.hx-bbv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.hx-bbv{grid-template-columns:minmax(0,1fr)}}
.hx-bbvcard{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left;padding:24px;
  border-radius:var(--r-lg);background:var(--raise);border:1px solid var(--hair);color:var(--ink);
  transition:transform .22s var(--spring),border-color .2s var(--ease),background .2s var(--ease)}
.hx-bbvcard:hover{transform:translateY(-3px);border-color:var(--hair-2);background:var(--raise-2)}
.hx-bbvcard .k{display:inline-flex;align-self:flex-start;padding:5px 12px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(0,119,200,.2);color:var(--cyan-soft)}
html[data-theme="light"] .hx-bbvcard .k{background:#E6F2FA;color:var(--cyan)}
.hx-bbvcard h3{font-family:var(--display);font-size:21px;font-weight:650;letter-spacing:-.025em}
.hx-bbvcard p{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.hx-bbvcard .more{margin-top:auto;padding-top:10px;font-size:13px;font-weight:650;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:7px;transition:color .2s var(--ease),gap .2s var(--ease)}
.hx-bbvcard:hover .more{color:var(--cyan-soft);gap:11px}
html[data-theme="light"] .hx-bbvcard:hover .more{color:var(--cyan)}

/* the three questions, as a compact row of pill groups */
.hx-qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.hx-qcell{padding:18px 20px;border-radius:var(--r-md);background:var(--raise-2);
  border:1px solid var(--hair)}
.hx-qcell .lab{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}

/* ==========================================================================
   8. THE WORKER, AND THE CONSENT STEP
   ========================================================================== */
.hx-consent-lede{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-bottom:18px}
.hx-consent-note{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin-top:16px}
.hx-nexus{padding:20px 22px;border-radius:var(--r-md);background:var(--raise-2);
  border:1px solid var(--hair-2)}
/* One confirmation can carry more than one ask, and two cards with touching
   borders read as one card with a line through it. */
.hx-nexus + .hx-nexus{margin-top:12px}
.hx-nexus-k{display:inline-flex;padding:5px 12px;border-radius:999px;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;
  background:rgba(0,119,200,.2);color:var(--cyan-soft)}
html[data-theme="light"] .hx-nexus-k{background:#E6F2FA;color:var(--cyan)}
.hx-nexus-k.hx-nexus-alert{background:rgba(181,37,85,.2);color:var(--secondary-soft)}
html[data-theme="light"] .hx-nexus-k.hx-nexus-alert{background:#F8E4EC;color:var(--secondary)}
.hx-nexus-k.hx-nexus-engagement{background:rgba(0,164,153,.2);color:var(--teal-soft)}
html[data-theme="light"] .hx-nexus-k.hx-nexus-engagement{background:#DFF3F0;color:#0B7A6F}
.hx-nexus b{display:block;font-family:var(--display);font-size:16px;font-weight:650;margin-bottom:5px}
.hx-nexus p{font-size:14.5px;color:var(--ink);line-height:1.45;margin-bottom:4px}
.hx-nexus .hx-nexus-d{font-size:13px;color:var(--ink-2)}
.hx-nexus-p{display:block;margin-top:11px;font-size:12px;font-weight:650;color:var(--ink-3)}
.hx-sent{text-align:center;padding:14px 0 6px}
.hx-sent-tick{width:56px;height:56px;border-radius:50%;display:inline-grid;place-items:center;
  background:var(--teal);color:#fff;margin-bottom:16px}
.hx-sent b{display:block;font-family:var(--display);font-size:19px;font-weight:650;margin-bottom:8px}
.hx-sent p{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:400px;margin:0 auto}

/* ==========================================================================
   9. RIVO, IN CONTEXT
   Six things somebody would actually type, instead of an empty box.
   ========================================================================== */
.hx-ask{padding:26px 28px;border-radius:var(--r-lg);border:1px solid var(--hair-2);
  background:linear-gradient(140deg,rgba(181,37,85,.12),rgba(0,119,200,.1) 52%,rgba(0,164,153,.09))}
.hx-ask-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.hx-ask-orb{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,#B52555,#0077C8 52%,#00A499);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 18px rgba(0,119,200,.28)}
.hx-ask-top b{display:block;font-family:var(--display);font-size:18px;font-weight:650;
  letter-spacing:-.02em}
.hx-ask-top em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.hx-asks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:9px}
.hx-askq{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:13px 16px;
  border-radius:var(--r-md);background:var(--raise);border:1px solid var(--hair);color:var(--ink-2);
  font-size:13.5px;line-height:1.4;transition:background .2s var(--ease),transform .2s var(--ease),
    border-color .2s var(--ease),color .2s var(--ease)}
.hx-askq:hover{background:var(--raise-2);border-color:var(--hair-2);color:var(--ink);
  transform:translateX(3px)}
.hx-askq-q{flex:1;min-width:0}
.hx-ask-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.hx-ask-row .nx-input{flex:1;min-width:200px}
.hx-ask-note{margin-top:14px;font-size:12px;color:var(--ink-3);line-height:1.55}
/* the answer, which is a fixed pathway rather than generated text */
.hx-answer{margin-top:16px;padding:20px 22px;border-radius:var(--r-md);background:var(--raise);
  border:1px solid var(--hair-2)}
.hx-answer .k{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:11px;
  background:rgba(0,164,153,.2);color:var(--teal-soft)}
html[data-theme="light"] .hx-answer .k{background:#DFF3F0;color:#0B7A6F}
.hx-answer h4{font-family:var(--display);font-size:19px;font-weight:650;letter-spacing:-.025em;
  margin-bottom:8px;line-height:1.2}
.hx-answer p{font-size:14px;line-height:1.6;color:var(--ink-2);margin-bottom:14px}
.hx-answer-acts{display:flex;gap:9px;flex-wrap:wrap}

/* ==========================================================================
   10. WHAT YOU ARE ALREADY DOING
   Reinforcement, not gamification. No badges, no streaks, no points.
   ========================================================================== */
.hx-protect{padding:22px 24px;border-radius:var(--r-lg);border:1px solid rgba(0,164,153,.3);
  background:rgba(0,164,153,.1)}
html[data-theme="light"] .hx-protect{background:#EDF8F6;border-color:#B7E2DB}
.hx-protect b{display:block;font-family:var(--display);font-size:18px;font-weight:650;
  letter-spacing:-.02em;margin-bottom:13px}
.hx-protect ul{display:flex;flex-direction:column;gap:9px;list-style:none}
.hx-protect li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.45;
  color:var(--ink-2)}
.hx-protect li .t{width:20px;height:20px;border-radius:6px;flex-shrink:0;margin-top:1px;display:grid;
  place-items:center;background:var(--teal);color:#fff}
.hx-protect-empty{font-size:13.5px;color:var(--ink-3);line-height:1.55}

/* ==========================================================================
   11. DISCREET MODE
   ========================================================================== */
.hx-priv{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;
  border-radius:var(--r-lg);background:var(--raise);border:1px solid var(--hair)}
.hx-priv-ic{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  background:var(--raise-2);color:var(--ink-2);border:1px solid var(--hair)}
.hx-priv-tx{flex:1;min-width:220px}
.hx-priv-tx b{display:block;font-size:14.5px;font-weight:650;margin-bottom:3px}
.hx-priv-tx p{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.hx-switch{width:52px;height:30px;border-radius:999px;background:var(--raise-2);border:1px solid var(--hair-2);
  position:relative;flex-shrink:0;padding:0;transition:background .24s var(--ease),border-color .24s var(--ease)}
.hx-switch::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--ink-3);transition:transform .28s var(--spring),background .24s var(--ease)}
.hx-switch[aria-checked="true"]{background:var(--teal);border-color:var(--teal)}
.hx-switch[aria-checked="true"]::after{transform:translateX(22px);background:#fff}
body.hx-private .hx-priv-ic{background:rgba(0,164,153,.18);color:var(--teal-soft);
  border-color:rgba(0,164,153,.3)}
html[data-theme="light"] body.hx-private .hx-priv-ic{background:#DFF3F0;color:#0B7A6F}

/* ==========================================================================
   12. THE FINDER, list beside map
   ========================================================================== */
.hx-console{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:18px;
  align-items:stretch}
@media(max-width:940px){.hx-console{grid-template-columns:minmax(0,1fr)}}
.hx-panel{display:flex;flex-direction:column;min-height:0;border:1px solid var(--hair);
  border-radius:var(--r-lg);background:var(--raise);overflow:hidden}
.hx-panel-top{padding:18px;border-bottom:1px solid var(--hair);display:flex;flex-direction:column;
  gap:12px}
.hx-chips{display:flex;gap:7px;flex-wrap:wrap}
.hx-chip{padding:8px 14px;border-radius:999px;background:var(--raise-2);border:1px solid var(--hair);
  font-size:12.5px;font-weight:650;color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.hx-chip:hover{background:var(--hair);color:var(--ink)}
.hx-chip[aria-pressed="true"]{background:var(--secondary);border-color:var(--secondary);color:#fff}
.hx-count{padding:11px 18px;font-size:12.5px;color:var(--ink-3);border-bottom:1px solid var(--hair)}
.hx-list{flex:1;overflow-y:auto;max-height:520px;padding:12px;display:flex;flex-direction:column;
  gap:8px}
.hx-list .nx-svc[aria-current="true"]{border-color:var(--secondary);background:rgba(181,37,85,.12)}
html[data-theme="light"] .hx-list .nx-svc[aria-current="true"]{background:#FBEAF1}
.hx-mapwrap{position:relative;border-radius:var(--r-lg);border:1px solid var(--hair);overflow:hidden;
  background:var(--raise);min-height:520px}
.hx-mapwrap .gmap{position:absolute;inset:0}
.hx-detail{position:absolute;left:16px;right:16px;bottom:16px;z-index:5;padding:20px 22px;
  border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);border:1px solid var(--hair-2);box-shadow:var(--shadow-lg)}
.hx-detail h4{font-family:var(--display);font-size:17px;font-weight:650;letter-spacing:-.02em;
  margin-bottom:5px;padding-right:30px}
.hx-detail .a{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:9px}
.hx-detail .how{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-bottom:14px}
.hx-detail-x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--raise-2);color:var(--ink-2)}
.hx-detail-x:hover{background:var(--hair)}

/* ==========================================================================
   12b. THE XL SHEET
   The finder puts a map beside a list. In the 820px `wide` sheet that left the
   map about 370px across, which is not a map, it is a thumbnail of one. The two
   spatial modules (the finder and the site check) get their own size, and the
   list stops carrying its own height so the map decides how tall the row is and
   the two columns cannot disagree.
   ========================================================================== */
.hx-sheet-xl{width:min(1320px,100%);max-height:94vh}
/* THE ROW NEEDS A HEIGHT, NOT A MINIMUM. Taking the list's max-height off and
   giving the map a min-height did the opposite of what it looks like: a grid
   row sizes to its tallest content, so 69 service cards made the panel 7,349px
   and stretched the map to 7,686px beside it. Measured. The CONSOLE owns the
   height, both columns fill it, and the list scrolls inside. */
.hx-sheet-xl .hx-console{grid-template-columns:minmax(0,390px) minmax(0,1fr);
  height:min(68vh,780px)}
.hx-sheet-xl .hx-mapwrap{min-height:0;height:100%}
.hx-sheet-xl .hx-list{max-height:none;min-height:0}
/* The sheet is 94vh and the head, the toggle and the note take about 250px of
   it, so that is what the figure may not exceed. Measured, not guessed. */
.hx-sheet-xl .hx-bodywrap{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
.hx-sheet-xl .hx-fig-img{max-height:calc(94vh - 268px)}

/* The figure gets real room in the sheet, so the markers can too. Inline on a
   300px column the same size covered the body it is meant to point at. */
.hx-sheet-xl .hx-spot{width:34px;height:34px}
.hx-sheet-xl .hx-spot::before{width:9px;height:9px}

/* the same ten areas as words, for anybody who would rather not aim at a dot */
.hx-arealist{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.hx-areabtn{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:14px 16px;
  border-radius:var(--r-md);background:var(--raise);border:1px solid var(--hair);color:var(--ink);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .18s var(--bounce)}
.hx-areabtn:hover{background:var(--raise-2);border-color:var(--hair-2);transform:translateY(-2px)}
.hx-areabtn:active{transform:scale(.985)}
.hx-areabtn b{font-size:14.5px;font-weight:650}
.hx-areabtn span{font-size:11.5px;color:var(--ink-3)}
.hx-areabtn.hot{border-color:rgba(185,138,47,.45)}
.hx-areabtn.hot span{color:#E7C476}
html[data-theme="light"] .hx-areabtn.hot span{color:var(--amber)}
.hx-sheet-xl .hx-signs{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media(max-width:1040px){
  .hx-sheet-xl .hx-console,.hx-sheet-xl .hx-bodywrap{grid-template-columns:minmax(0,1fr);
    height:auto}
  .hx-sheet-xl .hx-mapwrap{min-height:430px;height:430px}
  .hx-sheet-xl .hx-list{max-height:340px}
}

/* ==========================================================================
   12c. THE HERO GLASS THAT TURNS OVER
   Two faces in one panel: the town search you need on a first visit, and where
   you stand once there is anything to stand on. They occupy the SAME grid cell
   so the panel keeps one height and nothing under it moves when it turns.

   THE HIDDEN STATE IS IN THE MARKUP, NOT IN THE ANIMATION. Face one carries
   .on in the HTML, so if the script never runs the panel still shows a
   complete, usable card rather than an empty box. This has bitten this project
   three times and it is not going to be a fourth.
   ========================================================================== */
/* EACH FACE IS ITS OWN HEIGHT, AND THE PANEL GROWS INTO IT. Stacked in one
   grid cell they both took the height of the taller, which left the search face
   with a third of a panel of dead space under it. The faces still share the
   cell, so they cross-fade in place, but the WRAPPER carries an explicit height
   that the script sets from whichever face is showing, and animates between the
   two. align-items:start is what stops the grid stretching each face to the row.

   No script, no height: the wrapper falls back to auto, which is the taller
   face, and face one is still visible because .on is in the markup. A complete
   card either way. */
.hx-glassx{display:flex;flex-direction:column}
.hx-faces{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;
  overflow:hidden;transition:height .55s var(--spring)}
.hx-face{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--spring),visibility .4s}
.hx-face.on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
@media(prefers-reduced-motion:reduce){
  .hx-face{transition:none;transform:none}
  .hx-faces{transition:none}
}
.hx-facedots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.hx-facedot{width:26px;height:5px;border-radius:3px;background:rgba(255,255,255,.26);padding:0;
  border:none;transition:background .25s var(--ease),width .25s var(--spring)}
.hx-facedot:hover{background:rgba(255,255,255,.44)}
.hx-facedot[aria-selected="true"]{background:#fff;width:34px}

/* ==========================================================================
   12c-ii. THE DISCREET TOGGLE, IN THE HERO
   It was a card down the page, which is the wrong place for a thing you want
   ON before anybody looks over your shoulder. It is a compact glass pill in the
   top corner of the hero instead, on the photograph, where it reads as a
   setting for the whole page rather than a feature of one section.
   ========================================================================== */
.hx-privpill{position:absolute;top:14px;right:16px;z-index:3;display:flex;align-items:center;
  gap:8px;padding:6px 8px 6px 12px;border-radius:999px;background:var(--hero-glass);
  border:1px solid var(--hero-hair);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 6px 18px rgba(0,0,0,.24);
  color:#fff;transition:background .2s var(--ease)}
.hx-privpill:hover{background:rgba(16,23,40,.74)}
.hx-privpill .hx-privpill-ic{display:grid;place-items:center;opacity:.8}
.hx-privpill .hx-privpill-ic svg{width:15px;height:15px}
.hx-privpill b{font-size:11.5px;font-weight:650;white-space:nowrap;letter-spacing:.01em}
.hx-privpill .hx-switch{width:34px;height:19px;background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.32)}
.hx-privpill .hx-switch::after{top:2px;left:2px;width:13px;height:13px;background:#fff}
.hx-privpill .hx-switch[aria-checked="true"]{background:var(--teal);border-color:var(--teal)}
.hx-privpill .hx-switch[aria-checked="true"]::after{transform:translateX(15px)}

/* THE PILL MUST NOT LAND ON THE CARD, and shrinking it only bought ten pixels
   that a taller card takes straight back: the opener is bottom-justified, so
   the glass panel rises as it grows and would meet the pill again. The hero
   RESERVES the pill's band instead, so the two can never occupy it at once
   however tall the card gets. */
.opener.hx-hasprivpill > .opener-in{padding-top:74px}
@media(max-width:720px){
  .hx-privpill{top:10px;right:10px}
  .opener.hx-hasprivpill > .opener-in{padding-top:54px}
}

/* ==========================================================================
   12d. THE CALM RAIL WIDGET
   The rescue rail pulses magenta and says "someone not waking up?". That is
   right for an overdose and wrong for a health record, so the board's widget
   reuses the rail but not the alarm: no pulse, and it carries the worst state
   it can see so it says something before it is opened.
   ========================================================================== */
.hx-hail-calm .pulse{background:var(--raise-2);color:var(--ink-2);border:1px solid var(--hair-2)}
.hx-hail-calm .pulse::after{display:none;animation:none}
.hx-hail-calm.st-good .pulse{background:rgba(0,164,153,.2);color:var(--teal-soft);
  border-color:rgba(0,164,153,.34)}
.hx-hail-calm.st-watch .pulse{background:rgba(185,138,47,.22);color:#E7C476;
  border-color:rgba(185,138,47,.4)}
.hx-hail-calm.st-risk .pulse{background:rgba(181,37,85,.2);color:var(--secondary-soft);
  border-color:rgba(181,37,85,.36)}
html[data-theme="light"] .hx-hail-calm.st-good .pulse{background:#DFF3F0;color:#0B7A6F;border-color:#B7E2DB}
html[data-theme="light"] .hx-hail-calm.st-watch .pulse{background:#F8EED8;color:var(--amber);border-color:#EBD9AE}
html[data-theme="light"] .hx-hail-calm.st-risk .pulse{background:#F8E4EC;color:var(--secondary);border-color:#EFC5D5}

/* the board inside the rail. It is a narrow column, so the four-column row
   collapses to the same stacked shape it uses on a phone. */
.hx-rail .hx-board{border-radius:var(--r-md)}
.hx-rail .hx-brow{grid-template-columns:12px minmax(0,1fr);gap:5px 13px;padding:14px 16px}
.hx-rail .hx-brow-v{grid-column:2}
.hx-rail .hx-brow-go{grid-column:2;justify-self:start;margin-top:5px}
.hx-rail .hx-board-foot{display:none}
.hx-rail .hx-protect{padding:18px 20px}

/* ==========================================================================
   13. THE STEPPER, used by the check and the log
   The shell already owns .opts and .opt-card. This is only the frame.
   ========================================================================== */
.hx-step{display:flex;flex-direction:column;min-height:340px;padding:26px 28px;
  border-radius:var(--r-lg);background:var(--raise);border:1px solid var(--hair)}
.hx-step-bar{display:flex;gap:5px;margin-bottom:20px}
.hx-step-bar i{flex:1;height:4px;border-radius:2px;background:var(--raise-2);
  transition:background .3s var(--ease)}
.hx-step-bar i.on{background:var(--secondary)}
.hx-step-bar i.was{background:var(--teal)}
.hx-step-n{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px}
.hx-step h3{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.032em;
  line-height:1.15;margin-bottom:8px}
.hx-step-sub{font-size:14px;color:var(--ink-2);line-height:1.5;margin-bottom:22px}
.hx-step-foot{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.hx-step-back{font-size:13.5px;font-weight:650;color:var(--ink-3);background:transparent;padding:0}
.hx-step-back:hover{color:var(--ink-2)}
.hx-step-skip{margin-left:auto;font-size:13px;color:var(--ink-3);background:transparent;padding:0}
.hx-step-skip:hover{color:var(--ink-2)}

/* ==========================================================================
   14. SMALL SHARED PIECES
   ========================================================================== */
.hx-src{margin-top:18px;font-size:12px;color:var(--ink-3);line-height:1.6}
.hx-src a{color:var(--secondary-soft);font-weight:600}
html[data-theme="light"] .hx-src a{color:var(--secondary)}
.hx-glass{background:var(--hero-glass);border:1px solid var(--hero-hair);border-radius:var(--r-lg);
  padding:24px 26px;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  min-width:340px;max-width:420px;
  box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 34px rgba(0,0,0,.3)}
@media(max-width:940px){.hx-glass{min-width:0;max-width:none}}
.hx-glass .lbl{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.7);margin-bottom:12px}
.hx-glass h3{font-family:var(--display);font-size:21px;font-weight:650;letter-spacing:-.025em;
  color:#fff;margin-bottom:14px;line-height:1.2}
.hx-glass .nx-input{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.hx-glass .nx-input::placeholder{color:rgba(255,255,255,.55)}
.hx-glass .nx-said{color:rgba(255,255,255,.6)}
.hx-glass-rows{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.hx-glass-row{display:flex;align-items:center;gap:11px;padding:10px 0;
  border-top:1px solid rgba(255,255,255,.14)}
.hx-glass-row:first-child{border-top:none}
.hx-glass-row .n{font-size:13.5px;color:rgba(255,255,255,.82);flex:1;min-width:0}
.hx-glass-row .v{font-size:13px;font-weight:650;color:#fff;white-space:nowrap}
.hx-glass-row i{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.3);
  font-style:normal}
.hx-glass-row i.good{background:var(--teal-soft)}
.hx-glass-row i.watch{background:#E7C476}
.hx-glass-row i.risk{background:var(--secondary-soft)}

/* the demo control, so a reviewer can see both the full board and the empty
   one. The honesty rule: it says which is on screen. */
.hx-demo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 20px;
  border-radius:var(--r-lg);border:1px dashed var(--hair-2);background:var(--raise);
  margin-top:var(--section-gap)}
.hx-demo p{flex:1;min-width:220px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.hx-demo b{color:var(--ink-2);font-weight:650}

/* a quiet, non-scolding empty state */
.hx-empty{border:1px dashed var(--hair);border-radius:var(--r-lg);padding:30px;text-align:center;
  color:var(--ink-3);font-size:14px;line-height:1.6}

/* content must never depend on an animation to be seen: the resting style is
   visible and the hidden state lives in the from keyframe */
@keyframes hxRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hx-rise{animation:hxRise .5s var(--spring) both}
@media(prefers-reduced-motion:reduce){.hx-rise{animation:none}}