/* ============================================================================
   "I need help now" -- the design layer shared by all four concepts.

   It LINKS appts-shell.css rather than restating it, so the tokens, the type
   scale, the card treatment, the buttons and the tab bar are the real ones and
   this page cannot drift from the rest of the client app. Everything here is
   prefixed hn-, and nothing here restyles a shared class.

   COLOUR, deliberately:
     magenta  the page accent and every primary action, as everywhere else
     teal     live and positive state only: a line that is open right now
     red      999 and nothing else. It is the one control on this page that
              must not be mistaken for any other, so it is the one place the
              app's error colour is allowed to be a doorway rather than a
              failure. Every other urgent thing is magenta.
   ============================================================================ */

:root {
  --hn-red: #D93A3A;
  --hn-red-deep: #B42318;
  --hn-red-wash: rgba(217, 58, 58, .16);
}
html[data-theme="light"] { --hn-red: #B42318; --hn-red-wash: rgba(180, 35, 24, .09); }

/* ---------------------------------------------------------------------------
   BUTTONS. The house .btn is used wherever it fits; these are the two shapes
   the house sheet does not carry, kept small and named so a concept never
   invents a third.
   --------------------------------------------------------------------------- */
.hn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 17px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .16s var(--ease) }
.hn-btn:hover { transform: translateY(-1px) }
.hn-btn svg { width: 16px; height: 16px; flex: none }
.hn-btn-sm { padding: 8px 13px; font-size: 12.5px }
.hn-btn-soft { background: var(--raise-2); border-color: var(--hair-2); color: var(--ink) }
.hn-btn-soft:hover { background: var(--raise); border-color: var(--secondary) }
.hn-btn-ghost { background: none; border-color: var(--hair-2); color: var(--ink-2) }
.hn-btn-ghost:hover { color: var(--ink); border-color: var(--hair-2) }
.hn-btn[disabled] { opacity: .6; pointer-events: none }
/* .hn-btn's own `display: inline-flex` is (0,1,0), the same specificity as
   the browser's built-in `[hidden] { display: none }`, and .hn-btn comes
   later in the cascade, so it won. "Start again" stayed on screen the whole
   time surf() was running, wired to rs.hidden = true and never actually
   hidden -- eating 143px of the acts row it had no business being in. */
.hn-btn[hidden] { display: none }

/* ---------------------------------------------------------------------------
   THE EMERGENCY RAIL.
   On the live page the four numbers sit inside the hero and then never appear
   again, so on a phone they are off screen by the second swipe. Here the rail
   is a component a concept can place wherever it needs it, including stuck to
   the viewport, and it is always the same four numbers in the same order.
   --------------------------------------------------------------------------- */
.hn-rail { display: flex; gap: 10px; flex-wrap: wrap; width: 100% }
.hn-rl { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 11px;
  padding: 12px 15px; border-radius: var(--r-md); text-decoration: none; color: var(--ink);
  background: var(--raise); border: 1px solid var(--hair);
  transition: background .16s var(--ease), transform .14s var(--ease), border-color .16s var(--ease) }
.hn-rl:hover { background: var(--raise-2); transform: translateY(-1px); border-color: var(--hair-2) }
.hn-rl .ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: rgba(181, 37, 85, .16); color: var(--secondary-soft) }
html[data-theme="light"] .hn-rl .ic { background: #FBE6EC; color: var(--secondary) }
.hn-rl .tx { display: flex; flex-direction: column; min-width: 0 }
.hn-rl .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--ink-3) }
.hn-rl .v { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: 1px }
.hn-rl svg { width: 18px; height: 18px }
.hn-rl.red { background: var(--hn-red-wash); border-color: rgba(217, 58, 58, .38) }
.hn-rl.red .ic { background: rgba(217, 58, 58, .26); color: #FFC9C4 }
html[data-theme="light"] .hn-rl.red .ic { background: rgba(180, 35, 24, .12); color: var(--hn-red) }
.hn-rl.red .k { color: #F0A9A2 }
html[data-theme="light"] .hn-rl.red .k { color: var(--hn-red) }

/* the rail ON a photograph: glass, and constant across themes because the
   photo is dark in both. Same reasoning as --hero-glass in the shell. */
.hn-rail.on-photo .hn-rl { background: rgba(255,255,255,.07); border-color: var(--hero-hair); color: #fff }
.hn-rail.on-photo .hn-rl:hover { background: rgba(255,255,255,.13) }
.hn-rail.on-photo .hn-rl .k { color: rgba(255,255,255,.66) }
.hn-rail.on-photo .hn-rl .ic { background: rgba(255,255,255,.13); color: #fff }
.hn-rail.on-photo .hn-rl.red { background: rgba(217,58,58,.3); border-color: rgba(255,170,165,.42) }
.hn-rail.on-photo .hn-rl.red .ic { background: rgba(255,255,255,.2) }
.hn-rail.on-photo .hn-rl.red .k { color: #FFD2CE }

/* THE RAIL INSIDE THE PHOTO HERO.
   .opener is isolate + flex-end with a .scrim and a .warm at z-index 1 and
   .opener-in at z-index 2, so a bare sibling div lands UNDER the scrim and
   renders as nothing at all. It did. This wrapper takes the same layer and
   the same 44px gutter as .opener-in so the rail lines up with the copy. */
.hn-hero-rail { position: relative; z-index: 2; width: 100%; padding: 0 44px 36px }
.hn-hero-rail > .in { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14) }
@media (max-width: 940px) { .hn-hero-rail { padding: 0 22px 24px } }

/* stuck to the bottom of the viewport. The offset is MEASURED at runtime by
   HN.stick() against the tab bar, Ask Rivo and the honesty banner, because a
   hand-picked one landed on top of the banner and hid two of the four numbers.
   The value here is only the pre-measurement resting place. */
.hn-rail.stuck { position: fixed; left: 50%; transform: translateX(-50%); bottom: 160px; z-index: 55;
  width: min(1180px, calc(100vw - 40px)); padding: 10px; 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);
  transition: transform .4s var(--spring), opacity .3s var(--ease) }
body.sheet-open .hn-rail.stuck, body.hn-comp-open .hn-rail.stuck,
body.tabbar-wide .hn-rail.stuck,
.hn-rail.stuck.held { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(130%) }
@media (max-width: 900px) { .hn-rail.stuck { width: calc(100vw - 20px); padding: 8px } }
/* ON A PHONE THE RAIL HAS TO BE A STRIP, NOT FOUR CARDS.
   At 390 the four cards wrapped to two rows about 130px tall, and with the tab
   bar and the honesty banner underneath it that is a third of the screen given
   over to furniture, covering the hero's own buttons. One row, no icons, name
   over number: about 52px, and all four still one tap away. */
@media (max-width: 700px) {
  .hn-rail.stuck, .hn-rail.compact { padding: 7px; gap: 6px; flex-wrap: nowrap }
  .hn-rail.stuck .hn-rl, .hn-rail.compact .hn-rl { flex: 1 1 0; min-width: 0; padding: 8px 5px; gap: 0;
    flex-direction: column; align-items: center; text-align: center; border-radius: var(--r-sm) }
  .hn-rail.stuck .hn-rl .ic, .hn-rail.compact .hn-rl .ic { display: none }
  .hn-rail.stuck .hn-rl .tx, .hn-rail.compact .hn-rl .tx { align-items: center; max-width: 100% }
  .hn-rail.stuck .hn-rl .k, .hn-rail.compact .hn-rl .k { font-size: 9px; letter-spacing: .02em;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .hn-rail.stuck .hn-rl .v, .hn-rail.compact .hn-rl .v { font-size: 14px }
  .hn-rail.compact { padding: 0; gap: 6px }
}

/* ---------------------------------------------------------------------------
   ONE LINE. The wide card on a page, the narrow one in the companion. Same
   markup, same data, one class apart.
   --------------------------------------------------------------------------- */
.hn-lines { display: flex; flex-direction: column; gap: 11px }
.hn-line { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 15px; align-items: center;
  padding: 17px 19px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  background: var(--raise); border: 1px solid var(--hair);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease) }
.hn-line:hover { transform: translateY(-2px); border-color: var(--secondary); background: var(--raise-2) }
.hn-line > .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(0, 119, 200, .16); color: var(--cyan-soft) }
html[data-theme="light"] .hn-line > .ic { background: #E4F0FB; color: var(--cyan) }
.hn-line > .ic svg { width: 21px; height: 21px }
.hn-line .bd { min-width: 0; display: flex; flex-direction: column; gap: 3px }
.hn-line .nm { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.02em }
.hn-line .av { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--teal-soft) }
html[data-theme="light"] .hn-line .av { color: #0B7A6F }
.hn-line .av.amber { color: var(--gold) }
.hn-line .av svg { width: 12px; height: 12px }
.hn-line .ds { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px }
.hn-line .nt { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--ink-2);
  margin-top: 7px; padding: 8px 10px; border-radius: 10px; background: var(--hn-red-wash);
  border: 1px solid rgba(217, 58, 58, .3) }
.hn-line .nt svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--hn-red) }
html[data-theme="light"] .hn-line .nt svg { color: var(--hn-red) }
.hn-line .go { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 11px 17px;
  border-radius: 999px; font-size: 14px; background: var(--secondary); color: #fff; font-weight: 600 }
.hn-line .go svg { width: 16px; height: 16px }
.hn-line.urgent { border-color: rgba(217, 58, 58, .42); background: var(--hn-red-wash) }
.hn-line.urgent > .ic { background: rgba(217, 58, 58, .26); color: #FFC9C4 }
html[data-theme="light"] .hn-line.urgent > .ic { background: rgba(180, 35, 24, .12); color: var(--hn-red) }
.hn-line.urgent .go { background: var(--hn-red) }
.hn-line.urgent:hover { border-color: var(--hn-red) }

/* the narrow shape. A 390px panel cannot carry a three-column grid: the live
   page proved that and had to grow a second component. One class instead. */
.hn-line.narrow { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 14px 15px;
  border-radius: var(--r-md) }
.hn-line.narrow > .ic { width: 38px; height: 38px; border-radius: 11px }
.hn-line.narrow > .ic svg { width: 18px; height: 18px }
.hn-line.narrow .nm { font-size: 15px }
.hn-line.narrow .ds { font-size: 12.5px }
.hn-line.narrow .go { grid-column: 1 / -1; justify-content: center; margin-top: 4px; padding: 10px }
@media (max-width: 640px) {
  .hn-line { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 15px }
  .hn-line > .ic { width: 40px; height: 40px }
  .hn-line .go { grid-column: 1 / -1; justify-content: center; margin-top: 4px }
}

/* ---------------------------------------------------------------------------
   THE BREATHING CIRCLE.
   The resting state is fully visible and the animation only MOVES it. Built
   the other way round -- opacity 0 plus a class -- the panel is blank if the
   animation never runs, which on this page means somebody staring at nothing
   while they panic. This has bitten the client app three times.
   --------------------------------------------------------------------------- */
/* Capped and centred, not left-aligned: at a wide single-column width (measured
   698px, the full width of its parent, with no visible inset at all) the orb
   is the focal point of the whole card, and hugging one edge while the other
   sits empty would read as a mistake rather than a deliberate gap. A narrower
   rail mount (measured 347px/402px, well under this cap) is untouched -- the
   max-width only ever shrinks a box that was wider than 560px to begin with. */
/* width:100% is load-bearing, not belt and braces. An AUTO CROSS-AXIS MARGIN
   SUPPRESSES FLEX STRETCH: inside the companion's .hn-tool (display:flex,
   column) `margin: 0 auto` alone stops this box filling the 390px panel and
   shrink-wraps it to its content instead. Giving the cross size an explicit
   100% takes stretch out of the question entirely -- it fills its host, and
   the auto margins then only have free space to share where max-width has
   actually capped it. */
/* position:relative is here, on the component, and NOT in vx-voice.css. The
   mute control's treatment B is position:absolute, and the rule that gives an
   absolute child a containing block belongs to the thing being positioned
   against: a `.parent > *` rule in another stylesheet reaching in to decide
   position for a component that already owns its own is precisely how this
   codebase has produced a stray panel floating mid-screen before.
   The control B actually anchors to is `.hn-br .orb` a few lines below, which
   has had position:relative of its own since it was written. This line is the
   pacer closing its own boundary so that nothing absolute inside it can ever
   escape to the viewport, whichever treatment is chosen. */
.hn-br { position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 6px 0 2px;
  width: 100%; max-width: 560px; margin: 0 auto }
.hn-br .orb { position: relative; width: 190px; height: 190px; display: grid; place-items: center;
  cursor: pointer; flex: none }
.hn-br.compact .orb { width: 148px; height: 148px }
.hn-br .orb .ring { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(181, 37, 85, .42), rgba(0, 119, 200, .2) 62%, transparent 74%);
  border: 1px solid var(--hair-2); transform: scale(.68); transition: transform 1s linear }
.hn-br .orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed var(--hair); opacity: .7 }
.hn-br .orb .core { position: relative; z-index: 1; text-align: center; pointer-events: none }
.hn-br .orb .core b { display: block; font-family: var(--display); font-size: 20px; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink) }
.hn-br .orb .core span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px;
  font-variant-numeric: tabular-nums }
/* THE LEAD IN. The ring rests, large and still, for the fourteen seconds
   before the first breath. Not animated: the whole point of this phase is
   that nothing is being asked of you yet, and a circle already moving is an
   instruction. transition-duration is long so arriving at this state is
   itself unhurried rather than a snap. */
.hn-br .orb[data-phase="settle"] .ring { transform: scale(.92); transition-duration: 2.4s }
.hn-br .orb[data-phase="in"] .ring { transform: scale(1); transition-duration: var(--dur) }
.hn-br .orb[data-phase="hold"] .ring { transform: scale(1); transition-duration: .2s }
.hn-br .orb[data-phase="out"] .ring { transform: scale(.68); transition-duration: var(--dur) }
.hn-br-foot { display: flex; flex-direction: column; align-items: center; gap: 9px }
.hn-br-foot .cy { font-size: 12.5px; color: var(--ink-3); text-align: center }
@media (prefers-reduced-motion: reduce) {
  .hn-br .orb .ring { transition: none; transform: scale(.86) }
  .hn-br .orb[data-phase] .ring { transform: scale(.86) }
}

/* ---------------------------------------------------------------------------
   RIDE IT OUT. Three minutes, counting down, with something to do at every
   thirty seconds so the wait is occupied rather than endured.
   --------------------------------------------------------------------------- */
/* Same cap, same centring, same reason as .hn-br above: it is a bordered card
   in its own right here, and edge to edge inside a wider one reads as unstyled
   rather than intentional. Narrow rail mounts stay untouched for the same
   reason -- the cap only ever shrinks a box that was already wider than it. */
/* `color` alongside `background`, always: a rule that sets one and inherits
   the other looks right in whichever theme it was written in and breaks in the
   other one. width:100% for the same flex-stretch reason as .hn-br above. */
/* position:relative HERE, on the component, and not in vx-voice.css, for the
   same reason .hn-br above states it: the rule that gives an absolute child a
   containing block belongs with the thing being positioned against. */
.hn-surf { position: relative;
  display: flex; flex-direction: column; gap: 13px; padding: 17px 18px;
  border-radius: var(--r-lg); background: var(--raise); color: var(--ink); border: 1px solid var(--hair);
  width: 100%; max-width: 560px; margin: 0 auto }
/* THE ONE EXERCISE WHERE THE CONTROL IS AT THE BOTTOM. Every other host puts
   it in its top right corner; this card's top edge is the progress bar, and
   that bar is the mover. Covering the last stretch of the thing whose whole
   job is to be seen finishing is the one placement this treatment must not
   take, so it goes to the opposite corner: still on the card, still icon only,
   still out of the .acts flex row that wrapped to two lines at 1100px with
   three items in it. px rather than the default percentages, which mean
   nothing on a box that is not square. */
.hn-surf > .vx-orb { top: auto; bottom: 13px; right: 13px }
.hn-surf .bar { height: 7px; border-radius: 999px; background: var(--raise-2); overflow: hidden }
.hn-surf .bar span { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--secondary), var(--cyan)); transition: width 1s linear }
.hn-surf .row { display: flex; align-items: center; gap: 15px }
.hn-surf .row b { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; flex: none; min-width: 74px }
.hn-surf .row span { font-size: 13.5px; color: var(--ink-2); line-height: 1.5 }
.hn-surf .acts { display: flex; gap: 9px; flex-wrap: wrap }
.hn-surf.done { border-color: rgba(0, 164, 153, .45) }
.hn-surf.done .row b { color: var(--teal-soft) }
html[data-theme="light"] .hn-surf.done .row b { color: #0B7A6F }

/* ---------------------------------------------------------------------------
   THE DIRECTORY. One component, two widths. The wide one is a page; the
   narrow one is the same thing inside the companion, with the description
   dropped because 390px cannot carry it, never with different wording.
   --------------------------------------------------------------------------- */
.hn-dir { display: flex; flex-direction: column; gap: 14px }
.hn-dir-top { display: flex; flex-direction: column; gap: 12px }
.hn-search { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-radius: 999px;
  background: var(--raise); border: 1px solid var(--hair) }
.hn-search:focus-within { border-color: var(--secondary) }
.hn-search span { display: grid; place-items: center; color: var(--ink-3); flex: none }
.hn-search svg { width: 17px; height: 17px }
.hn-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--ink);
  font: inherit; font-size: 14.5px }
.hn-search input::placeholder { color: var(--ink-3) }
.hn-chips { display: flex; gap: 8px; flex-wrap: wrap }
.hn-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--raise);
  border: 1px solid var(--hair); cursor: pointer; transition: all .16s var(--ease) }
.hn-chip:hover { color: var(--ink); border-color: var(--hair-2) }
.hn-chip svg { width: 13px; height: 13px; flex: none }
.hn-chip i { font-style: normal; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums }
.hn-chip.on { background: var(--secondary); border-color: var(--secondary); color: #fff }
.hn-chip.on i { color: rgba(255, 255, 255, .7) }
.hn-dir-loc { display: flex; align-items: center; gap: 13px; flex-wrap: wrap }
.hn-privacy { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3) }
.hn-privacy svg { width: 13px; height: 13px; flex: none }
.hn-dir-said { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-2);
  padding: 11px 14px; border-radius: var(--r-md); background: var(--raise); border: 1px solid var(--hair) }
.hn-dir-said svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--teal-soft) }
html[data-theme="light"] .hn-dir-said svg { color: #0B7A6F }
.hn-dir-said.warn { border-color: rgba(185, 138, 47, .48) }
.hn-dir-said.warn svg { color: var(--gold) }
.hn-dir-said b { color: var(--ink) }
.hn-dlab { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 14px 2px 4px }
.hn-dlab:first-child { margin-top: 0 }
.hn-dlab svg { width: 13px; height: 13px }
.hn-dir-list { display: flex; flex-direction: column; gap: 9px }
.hn-svc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-md); text-decoration: none; color: var(--ink);
  background: var(--raise); border: 1px solid var(--hair);
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .14s var(--ease) }
.hn-svc:hover { background: var(--raise-2); border-color: var(--hair-2); transform: translateY(-1px) }
.hn-svc .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--raise-2); color: var(--ink-2) }
.hn-svc .ic svg { width: 18px; height: 18px }
.hn-svc.ft .ic { background: rgba(181, 37, 85, .16); color: var(--secondary-soft) }
html[data-theme="light"] .hn-svc.ft .ic { background: #FBE6EC; color: var(--secondary) }
.hn-svc .bd { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.hn-svc .nm { font-size: 15px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap }
.hn-svc .ft-tag { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: rgba(181, 37, 85, .2); color: var(--secondary-soft) }
html[data-theme="light"] .hn-svc .ft-tag { background: #FBE6EC; color: var(--secondary) }
.hn-svc .mt { font-size: 12px; color: var(--ink-3) }
.hn-svc .ds { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 3px }
.hn-svc .hr { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-top: 4px }
.hn-svc .hr svg { width: 12px; height: 12px; flex: none }
.hn-svc .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none }
.hn-svc .rt .d { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums }
.hn-svc .rt .c { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--secondary-soft); white-space: nowrap }
html[data-theme="light"] .hn-svc .rt .c { color: var(--secondary) }
.hn-svc .rt .c svg { width: 13px; height: 13px }
.hn-empty { font-size: 13.5px; color: var(--ink-3); padding: 18px 2px }
.hn-dir.narrow .hn-svc { grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 12px 13px }
.hn-dir.narrow .hn-svc .ic { width: 34px; height: 34px; border-radius: 10px }
.hn-dir.narrow .hn-svc .rt { flex-direction: row; align-items: center; gap: 10px; grid-column: 1 / -1;
  justify-content: flex-start; margin-top: 2px }
.hn-dir.narrow .hn-chip { padding: 6px 10px; font-size: 11.5px }
@media (max-width: 640px) {
  .hn-svc { grid-template-columns: 36px minmax(0, 1fr) }
  .hn-svc .rt { flex-direction: row; align-items: center; gap: 10px; grid-column: 1 / -1; justify-content: flex-start }
}

/* ---------------------------------------------------------------------------
   THE COMPANION.

   Docked bottom right, and it GROWS OUT OF the button rather than sliding a
   modal up from somewhere else. That is the house behaviour on this app and
   nx-rivo.css argues it at length: the widget you tapped should become the
   thing you use, anchored to the same corner, with the page still behind it.

   ASK RIVO STANDS DOWN on any page that mounts this (NX.mount({rivo:false})).
   Two floating widgets in one corner is a fight neither wins, and on this page
   the one that matters is the one with 999 in its footer.

   Stacking, deliberately: the tab bar is bottom 20 / z 56, Rivo is bottom 20 /
   z 57, the honesty banner is bottom 103 / z 58. The companion takes z 57 and
   its panel z 59, and both retreat when a sheet opens or the tab bar grows.
   --------------------------------------------------------------------------- */
.hn-comp { position: fixed; right: 26px; bottom: 20px; z-index: 57 }
/* right hand corner on a phone too. The first version stretched the widget
   across the full width and its button then covered a situation card and a
   primary action behind it. */
@media (max-width: 900px) { .hn-comp { right: 14px; bottom: 84px } }

.hn-fab { display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px 11px 11px;
  border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur); border: 1px solid var(--hair-2); color: var(--ink);
  box-shadow: var(--shadow-lg); cursor: pointer;
  transition: transform .34s var(--spring), opacity .28s var(--ease), background .18s var(--ease) }
.hn-fab:hover { background: var(--raise-2); transform: translateY(-2px) }
.hn-fab .ring { position: relative; width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--secondary); color: #fff }
.hn-fab .ring svg { width: 19px; height: 19px; position: relative; z-index: 1 }
.hn-fab .ring::before { content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--secondary); opacity: .5; animation: hn-pulse 2.8s var(--ease) infinite }
.hn-fab .lb { display: flex; flex-direction: column; text-align: left; min-width: 0 }
.hn-fab .lb b { font-size: 14px; font-weight: 600; letter-spacing: -.01em }
.hn-fab .lb i { font-style: normal; font-size: 11.5px; color: var(--ink-3) }
@keyframes hn-pulse { 0% { transform: scale(.86); opacity: .6 } 70% { transform: scale(1.18); opacity: 0 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .hn-fab .ring::before { animation: none; opacity: .35 } }
@media (max-width: 560px) { .hn-fab .lb i { display: none } }
.hn-comp.on .hn-fab { opacity: 0; pointer-events: none; transform: scale(.9) }
body.sheet-open .hn-comp .hn-fab, body.tabbar-wide .hn-comp .hn-fab,
body.rail-open .hn-comp .hn-fab { opacity: 0; pointer-events: none; transform: translateY(24px) }

.hn-panel { position: fixed; right: 26px; bottom: 20px; z-index: 59;
  width: min(420px, calc(100vw - 36px)); max-height: min(720px, calc(100vh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); background: var(--panel-bg, rgba(17, 24, 40, .97));
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid var(--hair-2); box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  transform: translateY(14px) scale(.94); transform-origin: bottom right; opacity: 0;
  transition: transform .46s var(--spring), opacity .3s var(--ease) }
html[data-theme="light"] .hn-panel { background: rgba(255, 255, 255, .98) }
/* [hidden] SETS display:none AT (0,1,0) AND THIS RULE OVERRIDES IT AT (0,1,0)
   with a later source order, so the closed panel stayed display:flex: invisible,
   full size, and still the top hit target across the bottom right of every
   page. A hit test found it blocking a situation card and a primary button on
   pages where nothing was open. An overlay that is emptied rather than removed
   is the same defect this project has already been bitten by once. */
.hn-panel[hidden] { display: none }
.hn-panel { pointer-events: none }
.hn-comp.on .hn-panel { transform: none; opacity: 1; pointer-events: auto }
@media (max-width: 900px) {
  .hn-panel { right: 10px; left: 10px; width: auto; bottom: 76px;
    max-height: min(600px, calc(100vh - 150px)) }
}
@media (prefers-reduced-motion: reduce) { .hn-panel { transition: opacity .2s linear } }

.hn-panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px;
  border-bottom: 1px solid var(--hair); flex: none }
.hn-panel-head .av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid;
  place-items: center; color: #fff; background: var(--secondary) }
.hn-panel-head .av svg { width: 19px; height: 19px }
.hn-panel-head .ti { display: flex; flex-direction: column; min-width: 0; flex: 1 }
.hn-panel-head .ti b { font-family: var(--display); font-size: 15.5px; font-weight: 600; letter-spacing: -.02em }
.hn-panel-head .ti i { font-style: normal; font-size: 11.5px; color: var(--ink-3) }
.hn-panel-head .hn-hdacts { display: flex; gap: 4px; flex: none }
.hn-panel-head button { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  color: var(--ink-3); cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease) }
.hn-panel-head button:hover { background: var(--raise-2); color: var(--ink) }
.hn-panel-head button svg { width: 16px; height: 16px }

.hn-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; outline: none }
.hn-who { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px }
.hn-who .a { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--secondary); color: #fff }
.hn-who .a svg { width: 11px; height: 11px }
.hn-bub { max-width: 92%; padding: 13px 15px; border-radius: 16px 16px 16px 5px; font-size: 14.5px;
  line-height: 1.55; color: var(--ink); background: var(--raise); border: 1px solid var(--hair) }
.hn-bub b { font-weight: 600 }
.hn-bub.me { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: var(--secondary);
  border-color: var(--secondary); color: #fff }
.hn-typing { display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 16px 16px 16px 5px;
  background: var(--raise); border: 1px solid var(--hair); align-self: flex-start }
.hn-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  animation: hn-dot 1.2s var(--ease) infinite }
.hn-typing i:nth-child(2) { animation-delay: .16s }
.hn-typing i:nth-child(3) { animation-delay: .32s }
@keyframes hn-dot { 0%, 60%, 100% { opacity: .35 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .hn-typing i { animation: none; opacity: .6 } }

.hn-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 2px }
.hn-choice { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--raise); border: 1px solid var(--hair-2);
  color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; text-align: left;
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .14s var(--ease) }
.hn-choice:hover { background: var(--raise-2); border-color: var(--secondary); transform: translateX(2px) }
.hn-choice .ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--raise-2); color: var(--secondary-soft) }
html[data-theme="light"] .hn-choice .ic { color: var(--secondary) }
.hn-choice .ic svg { width: 15px; height: 15px }
.hn-choice > span:nth-child(2) { flex: 1; min-width: 0 }
.hn-choice .arw { flex: none; color: var(--ink-3) }
.hn-choice .arw svg { width: 15px; height: 15px }

.hn-tool { border-radius: var(--r-lg); border: 1px solid rgba(0, 164, 153, .34);
  background: rgba(0, 164, 153, .07); padding: 13px; display: flex; flex-direction: column; gap: 10px }
html[data-theme="light"] .hn-tool { background: #EAF7F5 }
.hn-tool .lb { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--teal-soft) }
html[data-theme="light"] .hn-tool .lb { color: #0B7A6F }
.hn-tool .lb svg { width: 13px; height: 13px }
.hn-dirwrap { padding-top: 4px }

.hn-panel-foot { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--hair); flex: none }
.hn-panel-foot a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--hair-2); color: var(--ink) }
.hn-panel-foot a svg { width: 15px; height: 15px; flex: none }
.hn-panel-foot a.r { background: var(--hn-red); border-color: var(--hn-red); color: #fff }
.hn-panel-foot a.s:hover { background: var(--raise-2) }

/* ---------------------------------------------------------------------------
   THE STATE CONTROL. Bottom left, mirroring the appointments "move the clock"
   control, and it gives way to the tab bar for the same reason that one does.
   --------------------------------------------------------------------------- */
.hn-demo { position: fixed; left: 18px; bottom: 20px; z-index: 60;
  transition: transform .34s var(--bounce), opacity .24s var(--ease) }
@media (max-width: 900px) { .hn-demo { bottom: 150px; left: 12px } }
body.tabbar-wide .hn-demo, body.hn-comp-open .hn-demo { transform: translateY(150%); opacity: 0; pointer-events: none }
.hn-demo-t { display: flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--hair-2); color: var(--ink); font-size: 12.5px; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow) }
.hn-demo-t:hover { background: var(--raise-2) }
.hn-demo-t i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); font-style: normal }
.hn-demo-p { position: absolute; left: 0; bottom: calc(100% + 10px); width: 268px; padding: 15px;
  border-radius: var(--r-lg); background: var(--panel-bg, rgba(17, 24, 40, .97));
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--hair-2);
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .3s var(--spring) }
html[data-theme="light"] .hn-demo-p { background: rgba(255, 255, 255, .98) }
.hn-demo.on .hn-demo-p { opacity: 1; pointer-events: auto; transform: none }
.hn-demo-p h4 { margin: 0 0 3px; font-size: 13px; font-weight: 650 }
.hn-demo-p p { margin: 0 0 11px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3) }
.hn-demo-m { display: block; width: 100%; text-align: left; border: 1px solid transparent;
  background: var(--raise); color: inherit; font-size: 12.5px; padding: 8px 11px; border-radius: 11px;
  cursor: pointer; margin-bottom: 4px }
.hn-demo-m:hover { background: var(--raise-2) }
.hn-demo-m[aria-pressed="true"] { border-color: var(--teal); background: rgba(0, 164, 153, .15) }
.hn-demo-s { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--hair-2); background: none;
  color: var(--ink-2); font-size: 12px; padding: 9px; border-radius: 11px; cursor: pointer }
.hn-demo-s:hover { background: var(--raise) }

/* ---------------------------------------------------------------------------
   SHARED PAGE FURNITURE the concepts all use.
   --------------------------------------------------------------------------- */
.hn-note { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--raise); border: 1px solid var(--hair); font-size: 13.5px; color: var(--ink-2);
  line-height: 1.55 }
.hn-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--teal-soft) }
html[data-theme="light"] .hn-note svg { color: #0B7A6F }
.hn-note b { color: var(--ink) }
.hn-note a { color: var(--secondary-soft); font-weight: 600; text-decoration: none }
html[data-theme="light"] .hn-note a { color: var(--secondary) }
.hn-note a:hover { text-decoration: none }

/* a caveat that has to be read as a caveat, used for the clinical sign-off
   note at the foot of every concept */
.hn-caveat { border-color: rgba(185, 138, 47, .45); background: rgba(185, 138, 47, .07) }
.hn-caveat svg { color: var(--gold) }

.hn-pills { display: flex; gap: 9px; flex-wrap: wrap }
.hn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--raise);
  border: 1px solid var(--hair); cursor: pointer; text-decoration: none; transition: all .16s var(--ease) }
.hn-pill:hover { color: var(--ink); border-color: var(--secondary); background: var(--raise-2) }
.hn-pill svg { width: 14px; height: 14px; flex: none }

/* the concept banner every mockup carries, so nobody mistakes one for the app */
.hn-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, .12); border: 1px solid var(--hero-hair); color: #fff }
.hn-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-soft); font-style: normal }

/* A SENTENCE ON THE RIGHT OF A SECTION HEAD.
   The shared .show-all is `white-space: nowrap`, correct for the short link it
   was built for ("All appointments") and wrong for a sentence: at 390px it
   pushed the document 2px wider than the viewport. Restyling .show-all would
   re-skin a dozen other pages, so this study brings its own. */
.hn-secnote { font-size: 14px; font-weight: 600; color: var(--secondary-soft); min-width: 0;
  max-width: 100%; text-align: right }
html[data-theme="light"] .hn-secnote { color: var(--secondary) }
@media (max-width: 700px) { .hn-secnote { text-align: left } }

/* ---------------------------------------------------------------------------
   THE HONESTY BANNER MUST NOT SWALLOW A CLICK.

   `.live-banner` is shared furniture: fixed, bottom 103px (150px below 860px),
   z-index 58, and on these pages it carries a notice with nothing to click. A
   real click on the "Someone is hurting or controlling me" button landed on it
   and did nothing, which is the same defect this app has already shipped once
   with a pinned action bar. Restyling .live-banner would change it on a dozen
   other pages, so this is scoped to body[data-hn], which only this study sets,
   and any link a future banner variant carries keeps its own clicks.
   --------------------------------------------------------------------------- */
body[data-hn] .live-banner { pointer-events: none }
body[data-hn] .live-banner a, body[data-hn] .live-banner button { pointer-events: auto }



/* ---------------------------------------------------------------------------
   ASK RIVO STANDS DOWN WHILE THE COMPANION IS OPEN.

   nx-rivo.css already retreats the widget for a sheet, the call frame, the
   rail and its own panel (`body.sheet-open .rv-real` and friends). It cannot
   know about this companion, which is not a sheet and does not set any of
   those classes, so Rivo sat there behind the panel with an "Ask Rivo anything"
   field in it while somebody was mid conversation with the other one.

   This is NOT a re-skin of a shared class. It only bites while `hn-comp-open`
   is on the body, which only happens on a page that mounted this companion and
   only while it is open, and it lands on the same end state and the same
   transition nx-rivo.css already defines, so the widget leaves and comes back
   exactly as it does for everything else.
   --------------------------------------------------------------------------- */
body.hn-comp-open .rv-real { opacity: 0; pointer-events: none; transform: translateY(24px) }

/* the companion mounted without its own launcher, for a page where something
   else opens it (see HN.companion({noFab:true})) */
.hn-comp.no-fab .hn-fab { display: none }