/* ── JORDAN-PERCH-A21: styles for the persistent overlay layer ───────────────
 *
 * Loaded ONLY on pages that get a swap container (injected alongside
 * js/perch-layer.js by functions/_lib/perch-layer-inject.js). The Perch shell
 * `perch.html` is not such a page — A0.1 skips it because it hosts an orb of its
 * own — so the shell keeps rendering from its own inline <style> and nothing
 * here can reach it.
 *
 * ── EVERY RULE IS SCOPED UNDER #perch-persistent, ON PURPOSE ────────────────
 * These rules were authored inside perch.html, a document with a global
 * `*{margin:0;padding:0;box-sizing:border-box}` reset and no site stylesheet.
 * The 143 content pages have the opposite: Bootstrap, main.css, Animate.css and
 * their own resets. Dropping the orb's rules into that cascade unscoped would
 * both inherit Bootstrap's box model and leak `.opt`/`.card`/`.step` selectors
 * into page content that legitimately uses those class names.
 *
 * So the layer carries its own reset, scoped to its subtree, and every selector
 * is anchored to the layer root. Specificity (1,x,y) also puts these above any
 * single-class site rule without a single !important.
 *
 * Custom properties are namespaced `--perch-*` rather than the shell's bare
 * `--gold` / `--green` / `--ink`, so a page that later defines its own design
 * tokens cannot repaint the concierge by accident.
 */

#perch-persistent {
  /* Full-viewport overlay. `pointer-events:none` so the layer itself never
   * swallows a click meant for the page; children opt back in below. */
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;

  --perch-gold: #c1a221;
  --perch-gold-bright: #ffca18;
  --perch-green: #074c23;
  --perch-ink: #15140f;
  --perch-display: Georgia, serif;
  --perch-body: system-ui, sans-serif;
}

/* Only the concierge chrome is hit-testable. */
#perch-persistent > * { pointer-events: auto; }

/* The layer's own reset.
 *
 * Scoped to named subtrees rather than to `#perch-persistent *`, because the
 * layer also HOSTS chrome it did not author: js/donovan-widget.js appends
 * `#dvn-perch-launcher` here and, in its BARE form, styles it entirely with
 * inline properties sized against the browser default box model. A blanket
 * `box-sizing: border-box` under the layer root would silently reshape a
 * launcher this file never designed.
 *
 * JORDAN-PERCH-LAUNCHER-PARITY adds `.perch-concierge` to the list, and only
 * that class. When the widget dresses itself as the concierge it FIRST clears
 * those inline properties (see dressAsConcierge()), so the box it hands over is
 * this file's to size — the exclusion above is about the bare launcher, and the
 * dressed one is no longer that launcher. An undressed launcher never matches
 * the class, so the carve-out it relies on is untouched. */
#perch-persistent #concierge, #perch-persistent #concierge *,
#perch-persistent #dvn-perch-launcher.perch-concierge,
#perch-persistent #dvn-perch-launcher.perch-concierge *,
#perch-persistent #caption, #perch-persistent #caption *,
#perch-persistent #qual, #perch-persistent #qual *,
#perch-persistent #concierge *::before, #perch-persistent #concierge *::after,
#perch-persistent #qual *::before, #perch-persistent #qual *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#perch-persistent #concierge,
#perch-persistent #dvn-perch-launcher.perch-concierge,
#perch-persistent #caption,
#perch-persistent #qual { font-family: var(--perch-body); line-height: normal; }

/* ── The orb ──────────────────────────────────────────────────────────────────
 *
 * ── JORDAN-PERCH-LAUNCHER-PARITY: TWO SELECTORS, ONE SET OF VALUES ──────────
 * Every rule below is shared by the two concierges this codebase has:
 *
 *   #concierge                            the shell orb, built by
 *                                         js/perch/chrome.js and adopted from
 *                                         perch.html's own markup at `/perch`.
 *   #dvn-perch-launcher.perch-concierge   the widget launcher on the 139 content
 *                                         pages, dressed by js/donovan-widget.js
 *                                         once it mounts into this layer.
 *
 * They are grouped rather than duplicated because parity IS the ticket: two
 * blocks with the same values today are two blocks that disagree after the next
 * edit, and the reviewer would have to diff them by eye to notice. Grouping makes
 * "the content pages match /perch" a property of the file instead of a claim
 * about it. The class is required in the second selector — an undressed launcher
 * must keep its own inline 66px presentation and match nothing here.
 *
 * The shell's copy in perch.html is the third instance and stays separate on
 * purpose: it is a different document with a different reset and no layer root
 * to scope against. test/perch-launcher-parity.test.mjs pins the values that
 * matter across all three so the split cannot drift silently. */
#perch-persistent #concierge,
#perch-persistent #dvn-perch-launcher.perch-concierge {
  position: fixed; right: 26px; bottom: 26px; z-index: 80;
  width: 116px; height: 116px; cursor: grab;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; background: transparent;
}
/* The launcher is a <button>, which the shell orb is not: neutralise the UA and
 * Bootstrap defaults that a <div> never carried. `overflow: visible` is the
 * load-bearing one — the CTA pill sits ENTIRELY above the button's box
 * (`bottom: calc(100% - 2px)`) and the rings pulse out past it, so a clipping
 * button would render the concierge as a bare disc with no invitation on it. */
#perch-persistent #dvn-perch-launcher.perch-concierge {
  -webkit-appearance: none; appearance: none;
  border: 0; overflow: visible; text-align: center; color: inherit;
  font: inherit; text-transform: none; outline-offset: 3px;
}
#perch-persistent #concierge.dragging,
#perch-persistent #dvn-perch-launcher.perch-concierge.dragging { cursor: grabbing; }
#perch-persistent #concierge .ring,
#perch-persistent #dvn-perch-launcher.perch-concierge .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(193, 162, 33, .5);
  animation: perch-pulse 2.6s ease-out infinite; pointer-events: none;
}
#perch-persistent #concierge .ring.r2,
#perch-persistent #dvn-perch-launcher.perch-concierge .ring.r2 { animation-delay: 1.3s; }
@keyframes perch-pulse {
  0%   { transform: scale(.7);   opacity: .9; }
  100% { transform: scale(1.25); opacity: 0; }
}
/* IDLE = gold (tap me), LIVE = green (connected — green means go). */
#perch-persistent #concierge .disc,
#perch-persistent #dvn-perch-launcher.perch-concierge .disc {
  width: 92px; height: 92px; border-radius: 50%; overflow: hidden; position: relative;
  background: radial-gradient(circle at 32% 28%, #d9b62f, #b08e15 72%);
  border: 3px solid var(--perch-gold);
  box-shadow: 0 10px 28px rgba(193, 162, 33, .5);
  flex: 0 0 auto;
}
#perch-persistent #concierge.live .disc,
#perch-persistent #dvn-perch-launcher.perch-concierge.live .disc { border-color: #169b62; box-shadow: 0 10px 30px rgba(7, 76, 35, .55); }
#perch-persistent #concierge.live .ring,
#perch-persistent #dvn-perch-launcher.perch-concierge.live .ring { border-color: rgba(22, 155, 98, .55); }
#perch-persistent #concierge .disc .face,
#perch-persistent #dvn-perch-launcher.perch-concierge .disc .face {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  max-width: none; /* Bootstrap sets img{max-width:100%} — the face is cover-cropped */
}
/* Idle call-to-action pill; hidden once a call is live. */
#perch-persistent #concierge .cta,
#perch-persistent #dvn-perch-launcher.perch-concierge .cta {
  position: absolute; bottom: calc(100% - 2px); right: 22px;
  background: rgba(21, 20, 15, .92); border: 1px solid rgba(193, 162, 33, .45);
  color: #fff; font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: 24px;
  white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  pointer-events: none; transition: opacity .25s;
  font-family: var(--perch-body); line-height: normal; letter-spacing: normal;
}
#perch-persistent #concierge .cta .p,
#perch-persistent #dvn-perch-launcher.perch-concierge .cta .p {
  color: var(--perch-gold-bright); font-family: var(--perch-display);
  font-weight: 700; letter-spacing: .5px; margin-left: 5px;
}
#perch-persistent #concierge.live .cta,
#perch-persistent #dvn-perch-launcher.perch-concierge.live .cta { opacity: 0; }
/* `busy` is the launcher's own state, and it has no shell counterpart: the widget
 * reports "Connecting…" / "Call ended." in a status pill of its own, and that pill
 * occupies the same corner the CTA does. Hiding the invitation while the status is
 * up is the same rule `.live .cta` expresses, one beat earlier — the call is not
 * live yet during the mint, and two stacked pills is the visible defect. */
#perch-persistent #dvn-perch-launcher.perch-concierge.busy .cta { opacity: 0; }

/* ── The caption strip ────────────────────────────────────────────────────── */
#perch-persistent #caption {
  position: fixed; left: 50%; bottom: 36px;
  transform: translateX(-50%) translateY(20px); z-index: 90;
  background: rgba(21, 20, 15, .92); color: #fff; padding: 14px 22px; border-radius: 30px;
  font-size: 15px; max-width: 84vw; box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
  opacity: 0; transition: .35s; pointer-events: none;
  border: 1px solid rgba(193, 162, 33, .4);
}
#perch-persistent #caption.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#perch-persistent #caption .who {
  color: var(--perch-gold-bright); font-family: var(--perch-display);
  font-size: 12px; letter-spacing: 2px; margin-right: 8px;
}

/* ── Qualifier modal ──────────────────────────────────────────────────────── */
#perch-persistent #qual {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: center; justify-content: center;
  background: rgba(7, 20, 12, .72); backdrop-filter: blur(3px); padding: 18px;
}
#perch-persistent #qual.show { display: flex; }
#perch-persistent #qual .card {
  background: #fffdf7; width: 100%; max-width: 440px; border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5); overflow: hidden;
  border-top: 5px solid var(--perch-green);
}
#perch-persistent #qual.done-state .card,
#perch-persistent #qual.handoff-state .card { border-top-color: var(--perch-gold); }
#perch-persistent #qual .hd { display: flex; align-items: center; gap: 10px; padding: 16px 20px 0; }
#perch-persistent #qual .hd .mk {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #1a6b36, #074c23 70%);
  flex: 0 0 auto; position: relative; overflow: hidden;
}
#perch-persistent #qual .hd .mk .mkemb {
  position: absolute; width: 67px; height: auto; left: -14px; top: 2px;
  pointer-events: none; max-width: none;
}
#perch-persistent #qual .hd .nm {
  font-family: var(--perch-display); font-size: 12px; letter-spacing: 2px;
  color: var(--perch-green); text-transform: uppercase;
}
#perch-persistent #qual .bd { padding: 14px 20px 22px; }
#perch-persistent #qual .step {
  font-size: 11px; letter-spacing: 1px; color: #9a8f6f;
  text-transform: uppercase; margin-bottom: 6px;
}
#perch-persistent #qual h2 {
  font-family: var(--perch-display); font-size: 21px; color: var(--perch-ink);
  line-height: 1.25; margin-bottom: 4px;
}
#perch-persistent #qual .sub { font-size: 13px; color: #6b6552; margin-bottom: 14px; }
#perch-persistent #qual .opts { display: flex; flex-direction: column; gap: 9px; }
#perch-persistent #qual .opt {
  display: flex; align-items: center; justify-content: space-between; text-align: left;
  font-size: 15px; font-weight: 600; color: var(--perch-ink); background: #fff;
  border: 1.5px solid #e3dcc6; border-radius: 11px; padding: 15px 16px;
  cursor: pointer; transition: .14s; min-height: 52px; width: 100%;
}
#perch-persistent #qual .opt:hover,
#perch-persistent #qual .opt:focus {
  border-color: var(--perch-gold); background: #fffbe9;
  transform: translateY(-1px); outline: none;
}
#perch-persistent #qual .opt.declined { font-weight: 500; color: #8a8368; font-size: 13.5px; min-height: 44px; }
#perch-persistent #qual .opt .arrow { color: var(--perch-gold); font-size: 17px; opacity: .55; }
#perch-persistent #qual .foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 15px; min-height: 22px;
}
#perch-persistent #qual .back {
  background: none; border: 0; color: #9a8f6f; font-size: 13px; cursor: pointer; padding: 4px 2px;
}
#perch-persistent #qual .back:hover { color: var(--perch-green); }
#perch-persistent #qual .back[hidden] { visibility: hidden; display: block; }
#perch-persistent #qual .dots { display: flex; gap: 6px; }
#perch-persistent #qual .dots i { width: 7px; height: 7px; border-radius: 50%; background: #e0d9c2; transition: .2s; }
#perch-persistent #qual .dots i.on { background: var(--perch-gold); }
#perch-persistent #qual .info { position: relative; }
#perch-persistent #qual .info .ibtn {
  width: 19px; height: 19px; border-radius: 50%; border: 1.4px solid #c9c0a3;
  color: #9a8f6f; background: #fff; font-size: 12px; font-style: italic;
  font-family: Georgia, serif; cursor: pointer; line-height: 1;
}
#perch-persistent #qual .info .blurb {
  display: none; position: absolute; right: 0; bottom: 26px; width: 240px;
  background: var(--perch-ink); color: #f6f3e9; font-size: 12px; font-weight: 400;
  line-height: 1.5; padding: 10px 12px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
#perch-persistent #qual .info.open .blurb { display: block; }
#perch-persistent #qual .msg { font-size: 14.5px; color: #4a4636; line-height: 1.55; }
#perch-persistent #qual .msg strong { color: var(--perch-green); }

/* Respect a reduced-motion preference for the orb's attention pulse. The site's
 * own stylesheets do not, but new chrome should not add to that. */
@media (prefers-reduced-motion: reduce) {
  #perch-persistent #concierge .ring,
  #perch-persistent #dvn-perch-launcher.perch-concierge .ring { animation: none; opacity: .35; }
  #perch-persistent #caption { transition: none; }
  #perch-persistent #qual .opt { transition: none; }
}