/* The site guide: the corner launcher and chat window (static/widget.js).
 *
 * Linked by templates/site/base.html only while GUIDE_ENABLED is on. Every
 * element the widget draws is under .hcg, so this file styles nothing else on
 * the page except the [[chat]] button's hidden state (last rule block).
 *
 * Colours are tokens.css semantics only (DECISIONS D22: no hex here). Each
 * var() carries a CSS system colour as its fallback, so the window stays
 * readable on a page without tokens.css (static/demo.html, an embed).
 *
 * Placement. The launcher owns the bottom-RIGHT corner, 20px in: the admin's
 * "Adjust photos" bar is bottom-LEFT and stops 112px short of the right edge
 * (edit-mode.css), so the round 56px launcher never meets it. The launcher
 * only grows a text label from 48rem, where the bar's 26rem cap leaves room,
 * and only where the label covers nothing on the page (.is-snug below).
 * widget.js lifts the round launcher above any link or field it would sit
 * on, and the footer reserves room for it (html.hcg-shown), so nothing on a
 * page is ever stuck under it.
 * While edit mode is on (html.hc-editing) the whole guide is hidden.
 *
 * Stacking. z-index 54, the same as the edit bar: above the page and the
 * sticky masthead (50), under the phone nav's backdrop (55) and the open
 * masthead (56), so opening the menu covers the guide as it covers the page.
 * The guide is appended to <body> after the edit bar, so where the two could
 * overlap (a phone with the window open) the window is on top.
 *
 * Mobile-first, like site.css: the base rules are the phone layout and
 * 40rem / 48rem only add.
 */

.hcg {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text, CanvasText);
}

.hcg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hcg-svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------- launcher */

.hcg-launcher {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 54;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--color-cta, CanvasText);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-cta, CanvasText);
  color: var(--color-cta-text, Canvas);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  /* The cream ring keeps the round shape visible over the ink footer and the
     dark bands, the same answer as the edit bar's toggle. */
  box-shadow:
    0 0 0 2px var(--hc-cream, Canvas),
    0 6px 18px color-mix(in srgb, var(--hc-ink, CanvasText) 28%, transparent);
  /* widget.js lifts the closed round launcher just above a link, button or
     field it would otherwise sit on (--hcg-lift, set once scrolling
     settles). */
  transform: translateY(calc(-1 * var(--hcg-lift, 0px)));
  transition: transform .2s ease-out, opacity .2s ease-out, visibility .2s;
}
.hcg.is-open .hcg-launcher { transform: none; }
/* Nowhere clear to sit (a phone's column of form fields): out of the way
   until the page moves again. visibility, not display, so it fades back. */
.hcg:not(.is-open).is-tucked .hcg-launcher {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.hcg-launcher:hover {
  background: color-mix(in srgb, var(--color-cta, CanvasText) 86%, var(--hc-cream, Canvas));
}
.hcg-launcher:focus-visible {
  outline: 3px solid var(--color-focus, Highlight);
  outline-offset: 4px;
}

.hcg-launcher__label { display: none; }
.hcg-svg--down { display: none; }
.hcg.is-open .hcg-svg--chat { display: none; }
.hcg.is-open .hcg-svg--down { display: block; }

/* A reply arrived while the window was minimised. */
.hcg-launcher__dot {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hc-olive-bright, Highlight);
  border: 2px solid var(--hc-cream, Canvas);
}
.hcg.has-unread .hcg-launcher__dot { display: block; }

/* ----------------------------------------------------------------- bubble */

/* The speech bubble a page may open by itself (widget.js showBubble): just
   above the launcher, and lifted with it (the same --hcg-lift), so wherever
   the launcher moves to stay off a link or a field, the bubble follows. It
   is always in the document (its live region must exist before its words
   arrive) and invisible until .has-bubble; tucked away, or with the window
   open, it stays invisible whatever the class says. */
.hcg-bubble {
  position: fixed;
  z-index: 54;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + 56px + 12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-start;
  gap: 2px;
  box-sizing: border-box;
  max-width: min(20rem, calc(100vw - 40px));
  padding: 10px 6px 10px 14px;
  background: var(--color-surface, Canvas);
  color: var(--color-text, CanvasText);
  border: 1px solid var(--color-border, GrayText);
  border-radius: 14px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--hc-ink, CanvasText) 22%, transparent);
  transform: translateY(calc(-1 * var(--hcg-lift, 0px)));
  transition: transform .2s ease-out, opacity .2s ease-out, visibility .2s;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
/* The tail, pointing at the launcher. */
.hcg-bubble::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 1px solid var(--color-border, GrayText);
  border-bottom: 1px solid var(--color-border, GrayText);
  transform: rotate(45deg);
}
.hcg.has-bubble:not(.is-open):not(.is-tucked) .hcg-bubble {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: hcg-rise .18s ease-out;
}
.hcg-bubble__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 2px 4px 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.hcg-bubble__text:hover { text-decoration: underline; }
.hcg-bubble__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -2px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.hcg-bubble__close .hcg-svg { width: 18px; height: 18px; }
.hcg-bubble__close:hover {
  background: color-mix(in srgb, var(--color-text, CanvasText) 10%, transparent);
}
.hcg-bubble__text:focus-visible,
.hcg-bubble__close:focus-visible {
  outline: 3px solid var(--color-focus, Highlight);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- window */

/* Phone: a sheet across the bottom that leaves the top of the page showing.
   The launcher it covers is hidden while it is open; the window has its own
   minimise button. */
.hcg-panel {
  position: fixed;
  z-index: 54;
  left: calc(8px + env(safe-area-inset-left, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  height: min(36rem, calc(100vh - 88px));
  height: min(36rem, calc(100dvh - 88px));
  display: flex;
  flex-direction: column;
  background: var(--color-surface, Canvas);
  color: var(--color-text, CanvasText);
  border: 1px solid var(--color-border, GrayText);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--hc-ink, CanvasText) 26%, transparent);
  /* Nothing is ever drawn outside the window: on a short screen the parts
     that can scroll (the conversation, the tour form) give up height, and
     the head, the text box and the crisis line keep theirs. Before this, the
     open tour form pushed the text box and the crisis line below the window
     (and at 667x375 under the launcher). */
  overflow: hidden;
  /* ...and the window itself can never be scrolled. A box that is merely
     overflow:hidden still scrolls when a script or a focus() asks it to, and
     on a phone that pushed the head (title, minimise, close) out of the
     window. `clip` makes it no scroll container at all, so nothing can move
     it; the line above is the fallback for a browser without it. Wave 12
     round 4: a real tap on Refine My Search at 375px did exactly that,
     because the visually hidden .hcg-sr spans (position:absolute) took the
     fixed window as their containing block and inflated its scroll height.
     They now sit in .hcg-scroll, below. */
  overflow: clip;
  contain: layout;
  animation: hcg-rise .18s ease-out;
}
.hcg-panel[hidden] { display: none; }
.hcg.is-open .hcg-launcher { display: none; }

@keyframes hcg-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.hcg-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 6px 6px 16px;
  background: var(--color-surface-dark, CanvasText);
  color: var(--color-text-on-dark, Canvas);
}
.hcg-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display, serif);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
}
.hcg-head-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.hcg-head-btn:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.hcg-head-btn:focus-visible {
  outline: 3px solid var(--color-text-on-dark, Canvas);
  outline-offset: -3px;
}

/* A zero basis: the conversation takes whatever height is left and never
   pushes anything else out of the window. */
.hcg-scroll {
  /* The containing block of the visually hidden .hcg-sr spans inside the
     conversation (see .hcg-panel): without it they reach past this box and
     make the window itself scrollable. */
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  background: var(--color-bg, Canvas);
}
.hcg-scroll:focus { outline: none; }

.hcg-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hcg-msg {
  max-width: 90%;
  padding: 10px 12px;
  overflow-wrap: anywhere;
}
.hcg-msg p,
.hcg-msg ul,
.hcg-msg ol { margin: 0 0 .5em; }
.hcg-msg ul,
.hcg-msg ol { padding-left: 1.25em; }
.hcg-msg > :last-child { margin-bottom: 0; }

/* A long scripted answer keeps its paragraphs (the blank lines in the row
   Mariah edits): a little more air between them than between lines. */
.hcg-msg--guide p + p,
.hcg-msg--guide p + ol,
.hcg-msg--guide p + ul,
.hcg-msg--guide ol + p,
.hcg-msg--guide ul + p { margin-top: .75em; }

/* Steps, each with its explanation under it (widget.js marks such a list
   .hcg-steps): one indent for every step and every explanation (they share the
   list item's own left edge, so the explanation hangs under the step's words,
   not under its number), with room for a two-digit number and a little air
   between one step and the next. */
.hcg-msg .hcg-steps { padding-left: 1.75em; }
.hcg-steps > li + li { margin-top: .6em; }
.hcg-step-detail {
  display: block;
  margin-top: .15em;
}

.hcg-msg--guide {
  align-self: flex-start;
  background: var(--color-surface, Canvas);
  border: 1px solid var(--color-border, GrayText);
}
.hcg-msg--user {
  align-self: flex-end;
  background: var(--color-surface-dark, CanvasText);
  color: var(--color-text-on-dark, Canvas);
  white-space: pre-wrap;
}

.hcg-link {
  color: var(--color-primary, LinkText);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Server-built links (a page, the tour booking link, a phone number) shown
   as buttons under the reply that offered them. */
.hcg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.hcg-action,
.hcg-btn,
.hcg-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--color-cta, CanvasText);
  background: var(--color-cta, CanvasText);
  color: var(--color-cta-text, Canvas);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.hcg-action:hover,
.hcg-btn--primary:hover,
.hcg-send:hover {
  background: color-mix(in srgb, var(--color-cta, CanvasText) 80%, var(--hc-cream, Canvas));
}
.hcg-btn:not(.hcg-btn--primary) {
  background: var(--color-surface, Canvas);
  color: var(--color-text, CanvasText);
}
.hcg-btn:not(.hcg-btn--primary):hover { background: var(--color-surface-alt, Canvas); }

.hcg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.hcg-chips[hidden] { display: none; }
.hcg-chip {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--color-text, CanvasText);
  background: var(--color-surface, Canvas);
  color: var(--color-text, CanvasText);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.hcg-chip:hover { background: var(--color-surface-alt, Canvas); }

/* Fingers, not a cursor: WCAG 2.5.5's 44px on touch screens. */
@media (hover: none) {
  .hcg-chip,
  .hcg-action,
  .hcg-btn,
  .hcg-send { min-height: 44px; }
}

.hcg-chip:focus-visible,
.hcg-action:focus-visible,
.hcg-btn:focus-visible,
.hcg-send:focus-visible,
.hcg-link:focus-visible,
.hcg-input:focus-visible {
  outline: 3px solid var(--color-focus, Highlight);
  outline-offset: 2px;
}

/* Kept in the layout even when empty: a live region that appears and
   disappears is not reliably announced. */
.hcg-status {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 16px;
  background: var(--color-bg, Canvas);
  color: var(--color-text-muted, GrayText);
  font-size: 13px;
}
.hcg-status:not(:empty) { padding-block: 4px 8px; }

.hcg-confirm {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border, GrayText);
  background: var(--color-surface-alt, Canvas);
}
.hcg-confirm[hidden] { display: none; }
.hcg-confirm__text { margin: 0 0 8px; }
.hcg-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The tour request form: between the conversation and the text box, and
   scrollable itself. The conversation gives up its height first (its basis
   is zero), so the form keeps its full height up to max-height; only when
   the window is too short for the form, the text box and the crisis line
   together does the form shrink and scroll inside itself. */
.hcg-tour {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  gap: 4px;
  max-height: 60%;
  overflow-y: auto;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border, GrayText);
  background: var(--color-surface-alt, Canvas);
}
.hcg-tour[hidden] { display: none; }
.hcg-tour__title {
  margin: 0 0 4px;
  font-weight: 700;
}
.hcg-tour__label {
  margin-top: 4px;
  font-size: 14px;
}
.hcg-tour__input { width: 100%; }
textarea.hcg-tour__input {
  min-height: 4.5em;
  resize: vertical;
}
.hcg-tour__error {
  margin: 4px 0 0;
  color: var(--color-danger, CanvasText);
  font-size: 14px;
}
.hcg-tour__error:empty { display: none; }
.hcg-tour .hcg-confirm__actions { margin-top: 8px; }

.hcg-form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--color-border, GrayText);
  background: var(--color-surface, Canvas);
}
/* 16px, or iOS zooms the page in when the box is focused. */
.hcg-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--color-text-muted, GrayText);
  border-radius: 0;
  background: var(--color-surface, Canvas);
  color: var(--color-text, CanvasText);
  font: inherit;
  font-size: 16px;
}
.hcg-send[aria-disabled="true"] { opacity: .6; cursor: default; }

/* The permanent crisis line under the text box (widget.js CRISIS_LINE). It
   never shrinks and is never hidden, whatever else the window shows. */
.hcg-crisis {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 10px 8px;
  background: var(--color-surface, Canvas);
  color: var(--color-text-muted, GrayText);
  font-size: 13px;
  line-height: 1.4;
}
.hcg-crisis .hcg-link { font-weight: 700; }

/* ------------------------------------------------- practitioner cards */

/* A reply that carries cards (widget.js renderCards): its words in a bubble
   (.hcg-msg__text), then one column of cards the width of the window, then the
   follow-up buttons. The specificity of the card rules is (0,2,0) on purpose:
   `.hcg-msg p` and `.hcg-msg ul` (0,1,1) would otherwise put their margins and
   padding on every line of a card. */
.hcg-msg--cards {
  max-width: 100%;
  align-self: stretch;
  padding: 0;
  background: none;
  border: 0;
}
.hcg-msg__text {
  max-width: 90%;
  padding: 10px 12px;
  background: var(--color-surface, Canvas);
  border: 1px solid var(--color-border, GrayText);
}
.hcg-msg__text > :last-child { margin-bottom: 0; }

.hcg-msg .hcg-cards {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.hcg-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: var(--color-surface, Canvas);
  color: var(--color-text, CanvasText);
  border: 1px solid var(--color-border, GrayText);
  overflow-wrap: anywhere;
}

/* The portrait is framed as Book a Session frames it (book_session.html): a
   5:6 box, the picture cropped to fill it, and WHICH part of the picture
   survives the crop is the saved framing (framing.py), never the centre.
   Mariah has already had to fix a face cropped away once. The same aspect
   means the same framing gives the same crop, only smaller. */
.hcg-card .hcg-card__head {
  display: grid;
  /* The portrait is the point of the card (Mariah, 2026-09-24: "I definitely
     want their photos shown"): about 40% of the card's inner width, which is
     about 37% of the whole card, so a face is big enough to recognise and to
     feel drawn to. It was a fixed 88px, about a quarter. The floor keeps it
     no smaller than that on the narrowest phone, the cap stops it growing
     past a comfortable size in a wide embed. */
  grid-template-columns: clamp(96px, 40%, 176px) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}
.hcg-card .hcg-card__media,
.hcg-card .hcg-card__monogram {
  width: 100%;
  aspect-ratio: 5 / 6;
  margin: 0;
}
.hcg-card .hcg-card__media {
  overflow: hidden;
  background: var(--color-surface-alt, Canvas);
}
.hcg-card .hcg-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Each percentage is tens and units, set by the .hcg-fxt-N / .hcg-fxu-N
     classes below (widget.js focusClasses). Nothing is written to a style;
     with no class this is "center top", Book a Session's own default. */
  object-position:
    calc(var(--hcg-fxt, 5) * 10% + var(--hcg-fxu, 0) * 1%)
    calc(var(--hcg-fyt, 0) * 10% + var(--hcg-fyu, 0) * 1%);
}
/* The brand monogram: the initials Book a Session shows with no photo. */
.hcg-card .hcg-card__monogram {
  display: grid;
  place-items: center;
  background: var(--hc-olive, CanvasText);
  color: var(--hc-cream, Canvas);
  font-family: var(--font-display, serif);
  font-size: 2.2rem;
  letter-spacing: .06em;
}

.hcg-card .hcg-card__ident { min-width: 0; }
/* Title above the name, bold: Book a Session's order, at Mariah's request. */
.hcg-card .hcg-card__headline {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.hcg-card .hcg-card__name {
  margin: 0;
  font-family: var(--font-display, serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}
.hcg-card .hcg-card__where {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted, GrayText);
}
.hcg-card .hcg-card__mode {
  font-weight: 700;
  color: var(--color-text, CanvasText);
}
/* A middle dot between the two, with a space each side: the escapes are six
   digits each so the hex escape does not swallow the space after it. */
.hcg-card .hcg-card__mode + .hcg-card__loc::before { content: "\0000a0\0000b7\0000a0"; }

.hcg-card .hcg-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hcg-card .hcg-tag {
  padding: 2px 9px;
  background: var(--color-surface-alt, Canvas);
  border: 1px solid var(--color-border, GrayText);
  font-size: 13px;
  line-height: 1.4;
}

/* Credentials, each marked plainly. Verified is a filled label and
   Self-reported an outlined muted one, so the two differ in shape as well as
   in words and colour: they are never mistaken for each other. */
.hcg-card .hcg-card__creds {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
}
.hcg-card .hcg-cred__mark {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--color-border, GrayText);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.hcg-card .hcg-cred__mark--self { color: var(--color-text-muted, GrayText); }
.hcg-card .hcg-cred__mark--verified {
  background: var(--color-surface-dark, CanvasText);
  border-color: var(--color-surface-dark, CanvasText);
  color: var(--color-text-on-dark, Canvas);
}

.hcg-card .hcg-card__reason {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}
.hcg-card .hcg-card__label {
  display: block;
  margin-bottom: 2px;
  color: var(--color-text-muted, GrayText);
  font-size: 12px;
  font-weight: 700;
}

.hcg-card .hcg-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hcg-card .hcg-card__btn { flex: 1 1 7rem; }

/* A card with no View Profile and no https Book link (widget.js renderCard,
   the reply's card_fallback): a plain note, then the site's own ways in. The
   team's email is a long word, so it may break rather than push the card wide. */
.hcg-card .hcg-card__nolink {
  margin: 0;
  color: var(--color-text-muted, GrayText);
  font-size: 13px;
  line-height: 1.4;
}
.hcg-card .hcg-card__actions--reach .hcg-card__btn { overflow-wrap: anywhere; }

/* A set of cards that a crisis reply has come after (widget.js retireCards,
   planSets): still readable, but dimmed and not pressable. widget.js also sets
   the inert attribute and takes the links out of the tab order; this is the
   look, and the pointer lock for a browser that lacks inert. */
.hcg-msg .hcg-cards--retired {
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

.hcg-msg .hcg-cards__note {
  margin: 8px 0 0;
  color: var(--color-text-muted, GrayText);
  font-size: 12.5px;
  line-height: 1.4;
}
.hcg-msg .hcg-actions--follow { margin-top: 10px; }
.hcg-action--quiet {
  background: var(--color-surface, Canvas);
  color: var(--color-text, CanvasText);
}
.hcg-action--quiet:hover { background: var(--color-surface-alt, Canvas); }

/* The photo framing, as the tens and the units of each percentage (widget.js
   focusClasses), so every whole number from 0 to 100 is exact and the widget
   never writes a style. 92% is .hcg-fxt-9 with .hcg-fxu-2. */
.hcg-fxt-0 { --hcg-fxt: 0; }
.hcg-fxt-1 { --hcg-fxt: 1; }
.hcg-fxt-2 { --hcg-fxt: 2; }
.hcg-fxt-3 { --hcg-fxt: 3; }
.hcg-fxt-4 { --hcg-fxt: 4; }
.hcg-fxt-5 { --hcg-fxt: 5; }
.hcg-fxt-6 { --hcg-fxt: 6; }
.hcg-fxt-7 { --hcg-fxt: 7; }
.hcg-fxt-8 { --hcg-fxt: 8; }
.hcg-fxt-9 { --hcg-fxt: 9; }
.hcg-fxt-10 { --hcg-fxt: 10; }
.hcg-fxu-0 { --hcg-fxu: 0; }
.hcg-fxu-1 { --hcg-fxu: 1; }
.hcg-fxu-2 { --hcg-fxu: 2; }
.hcg-fxu-3 { --hcg-fxu: 3; }
.hcg-fxu-4 { --hcg-fxu: 4; }
.hcg-fxu-5 { --hcg-fxu: 5; }
.hcg-fxu-6 { --hcg-fxu: 6; }
.hcg-fxu-7 { --hcg-fxu: 7; }
.hcg-fxu-8 { --hcg-fxu: 8; }
.hcg-fxu-9 { --hcg-fxu: 9; }
.hcg-fyt-0 { --hcg-fyt: 0; }
.hcg-fyt-1 { --hcg-fyt: 1; }
.hcg-fyt-2 { --hcg-fyt: 2; }
.hcg-fyt-3 { --hcg-fyt: 3; }
.hcg-fyt-4 { --hcg-fyt: 4; }
.hcg-fyt-5 { --hcg-fyt: 5; }
.hcg-fyt-6 { --hcg-fyt: 6; }
.hcg-fyt-7 { --hcg-fyt: 7; }
.hcg-fyt-8 { --hcg-fyt: 8; }
.hcg-fyt-9 { --hcg-fyt: 9; }
.hcg-fyt-10 { --hcg-fyt: 10; }
.hcg-fyu-0 { --hcg-fyu: 0; }
.hcg-fyu-1 { --hcg-fyu: 1; }
.hcg-fyu-2 { --hcg-fyu: 2; }
.hcg-fyu-3 { --hcg-fyu: 3; }
.hcg-fyu-4 { --hcg-fyu: 4; }
.hcg-fyu-5 { --hcg-fyu: 5; }
.hcg-fyu-6 { --hcg-fyu: 6; }
.hcg-fyu-7 { --hcg-fyu: 7; }
.hcg-fyu-8 { --hcg-fyu: 8; }
.hcg-fyu-9 { --hcg-fyu: 9; }

/* ----------------------------------------------------- tablet and desktop */

@media (min-width: 40rem) {
  /* A window above the launcher instead of a sheet. The launcher stays
     visible under it, as a chevron that minimises. */
  .hcg-panel {
    left: auto;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: 24rem;
    height: min(38rem, calc(100vh - 120px));
    height: min(38rem, calc(100dvh - 120px));
  }
  .hcg.is-open .hcg-launcher { display: inline-flex; }
  /* A window that opened itself (widget.js .is-auto) is about 15% bigger
     than one the visitor opened, but never more than 45% of the viewport's
     width or 80% of its height, and never smaller than the ordinary window
     (at 700-850px 45vw would be, so the ordinary width wins there). */
  .hcg.is-auto .hcg-panel {
    width: min(27.6rem, max(24rem, 45vw));
    height: min(43.7rem, calc(100vh - 120px), 80vh);
    height: min(43.7rem, calc(100dvh - 120px), 80dvh);
  }
}

/* A short, wide screen (a phone on its side, 667x375): the window above the
   launcher would be about 250px tall, so it takes the full height instead
   and the launcher hides while it is open, as on a phone. The window's own
   minimise button stays in its head, and nothing can sit on Send. */
@media (min-width: 40rem) and (max-height: 34rem) {
  .hcg-panel {
    top: calc(8px + env(safe-area-inset-top, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    height: auto;
  }
  .hcg.is-open .hcg-launcher { display: none; }
}

/* A shorter phone (375x568): the open tour form takes at most half the
   window, so a line or two of the conversation stays above it. It scrolls
   inside itself to its Send button. */
@media (max-height: 40rem) {
  .hcg-tour { max-height: 50%; }
}

/* Short screens of any width: tighter padding, so the conversation keeps a
   few lines above the text box. */
@media (max-height: 34rem) {
  .hcg-head { padding-block: 2px; }
  .hcg-scroll { padding: 10px 12px; }
  .hcg-tour { padding: 8px 12px; }
  .hcg-form { padding: 6px 8px; }
  .hcg-crisis { padding-bottom: 6px; }
}

@media (min-width: 48rem) {
  /* The label, until the visitor has opened the guide once in this tab;
     after that the launcher stays a small round button. */
  .hcg:not(.is-compact):not(.is-open):not(.is-snug) .hcg-launcher {
    width: auto;
    padding: 0 22px 0 18px;
  }
  .hcg:not(.is-compact):not(.is-open):not(.is-snug) .hcg-launcher__label { display: inline; }
}

/* The label is only shown where it covers nothing on the page: widget.js
   adds .is-snug (the round button) wherever the wide label would sit on
   words, a picture, a link or a field. At 1024-1440 that is most pages. */

/* ---- the footer, while the launcher is on the page ----
   Scrolled to the very end, the launcher (20px in, 56px tall) sat on the
   footer's last lines: "2464 Washington Blvd / Ogden, UT 84401" at 1024 to
   1366. html.hcg-shown is added by widget.js when the launcher is drawn, and
   the footer's content keeps the launcher's height plus both 20px gaps free
   below its last line. It is set on .footer__inner, whose own bottom padding
   (43px at 80rem, pinned to the old site) it replaces only while the guide
   is on the page; :root outranks site.css's .footer__inner rules. The photo
   edit bar's reserve (edit-mode.css) is on .footer itself and adds to this. */
:root.hcg-shown .footer__inner {
  padding-bottom: calc(20px + 56px + 20px + env(safe-area-inset-bottom, 0px));
}

/* -------------------------------------------------------------- states */

/* "Adjust photos" edit mode (edit-mode.js adds the class): out of the way. */
html.hc-editing .hcg { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hcg-panel { animation: none; }
  .hcg-launcher { transition: none; }
  .hcg-bubble,
  .hcg.has-bubble:not(.is-open):not(.is-tucked) .hcg-bubble { animation: none; transition: none; }
}

@media print {
  .hcg { display: none; }
}

/* The [[chat]] shortcode's "Ask our guide" button (site.py) is rendered with
   `hidden` until widget.js mounts. Its .btn classes set display, which beats
   the browser's own [hidden] rule, so it is restated here. */
[data-guide-open][hidden] { display: none; }

/* A picture under a reply: today only the parking map (guide_media.py,
   widget.js renderMedia). Full width of the bubble; tapping it opens the
   picture in a new tab, where a phone can zoom in. */
.hcg-msg .hcg-media {
  margin: 8px 0 0;
}
.hcg-msg .hcg-media__link {
  display: block;
}
.hcg-msg .hcg-media__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border, GrayText);
  border-radius: 4px;
}
.hcg-msg .hcg-media__caption {
  margin: 4px 0 0;
  color: var(--color-text-muted, GrayText);
  font-size: 12.5px;
  line-height: 1.4;
}