/* public/css/field.css
   ══════════════════════════════════════════════════════════════════════
   The Field chamber — private admin preview (7.5er).

   Design source: design_handoff_the_field/screens/02-the-field.jpg +
   colors_and_type.css. Reuses Sacred Acid tokens from
   public/css/sacred-acid-tokens.css so a future theme flip lands
   cleanly. All copy + assembly happens in oracle.js populateFieldChamber
   from services/theFieldContent.js — CSS here just carries structure
   and voice.

   Loaded in public/oracle/index.html after subscription.css so its
   cascade wins on shared classes; no !important needed.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Library card glyph → image variant ────────────────────────────── */
/* 7.5es — Field's library card uses the awake-sigil PNG instead of
   the Unicode glyph. Sized to match the 54x54 text-glyph slot in
   library-ornate so the row grid doesn't jump. Unlocked-glow filter
   from library-ornate is left alone; the sigil already carries its
   own chartreuse iris marker. */
.library-ornate .chamber-card__glyph--img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  /* Neutralize the .library-ornate .chamber-card__glyph font rules
     so they don't accidentally cascade to the img (browsers ignore
     font-* on img, but line-height was causing a tiny vertical
     nudge). */
  font-size: 0;
  line-height: 0;
}

/* ── Chamber container ─────────────────────────────────────────────── */
/* #step-field is a .step, so oracle.js's goToStep() handles show/hide
   via the .active class. We set container fundamentals here — full
   viewport, dark scrollable canvas. */
#step-field.field-chamber {
  position: relative;
  min-height: 100vh;
  color: var(--parchment);
  overflow-x: hidden;
  padding-bottom: 96px;
}

/* Botanical substrate + dark veil. The photo sits fixed at top;
   veil grades from a light dim near the top to a heavy near-black at
   the bottom so the roster area is legible over any part of the
   image. Content scrolls over both. */
.field-chamber__substrate {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62vh;   /* Enough to fill the sigil-hero region + fade */
  pointer-events: none;
  z-index: 0;
}
.field-chamber__botanical {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.field-chamber__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.50) 0%,
      rgba(10, 10, 10, 0.75) 55%,
      rgba(10, 10, 10, 0.95) 100%
    );
}

/* 7.9z9e — Desktop full-bleed substrate.
   #step-field is a .step, and .step is `max-width: 640px; margin: 0 auto`
   (oracle.css). The substrate is absolutely positioned inside it, so above
   640px the botanical was boxed into that centered column with black
   gutters either side. Two things were needed to break it out:
     1. the classic `left:50% / width:100vw / translateX(-50%)` break-out, and
     2. dropping the chamber's own `overflow-x: hidden`, which was CLIPPING
        the break-out back to 640px even though its layout box was 100vw.
   Dropping the clip is safe: `body` already sets `overflow-x: hidden`, so
   the overhang is contained there and no horizontal scrollbar appears.
   Content keeps the 640px column — only the image goes edge to edge.
   Below 641px the step already spans the viewport, so mobile is untouched.

   7.9za — extended to the Field SUB-pages (chart + bond), which are also
   .step children and had the identical gutter problem. Same two moves,
   same reasoning; kept as one rule so the pages can't drift apart. */
@media (min-width: 641px) {
  #step-field.field-chamber { overflow-x: visible; }
  .field-chamber__substrate {
    left: 50%;
    right: auto;
    width: 100vw;
    transform: translateX(-50%);
  }
}
/* The equivalent for the chart/bond sub-pages is NOT here — see the
   `7.9za — desktop full-bleed for the chart + bond sub-pages` block further
   down. Both `#step-field-chart.field-chart` and `.field-chart__substrate`
   are defined LATER in this file at the same specificity, and a media query
   adds none, so an override up here loses the source-order tiebreak: the
   step would re-clip and the substrate would keep `left: 0` (drifting the
   image 320px left of the viewport). The rules above are safe only because
   #step-field's own base rules sit above them. */

/* 7.9za — fade the botanical out into solid black at its bottom edge.
   The veil alone stopped at 0.95 alpha and the image simply STOPPED at
   62vh, leaving a hard horizontal seam with the roster sitting under it.
   Masking the whole substrate (image + veil together) means the photo
   dissolves into the page's black rather than being cut off. The chart
   sub-page already did this — this brings the main Field page in line. */
.field-chamber__substrate {
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    #000 52%,
    rgba(0,0,0,0.72) 72%,
    rgba(0,0,0,0.30) 88%,
    transparent 100%);
          mask-image: linear-gradient(180deg,
    #000 0%,
    #000 52%,
    rgba(0,0,0,0.72) 72%,
    rgba(0,0,0,0.30) 88%,
    transparent 100%);
}

/* Push all real content above the substrate.
   7.9za — `:not(.field-chamber__back)` is load-bearing, not cosmetic. This
   selector is (0,2,0); `.field-chamber__back` below is (0,1,0), so this rule
   was WINNING and silently forcing the chevron from `position: absolute` to
   `relative` — dropping it into normal flow instead of pinning it over the
   substrate. Excluding it here restores the intended positioning at the root
   rather than papering over it with an !important or an ID selector. */
.field-chamber > *:not(.field-chamber__substrate):not(.field-chamber__back) {
  position: relative;
  z-index: 1;
}

/* ── Back chevron (top-left, absolute over substrate) ──────────────── */
.field-chamber__back {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 20px));
  left: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(229, 210, 190, 0.28);
  background: rgba(10, 10, 10, 0.35);
  color: #E5D2BE;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* 7.9za — sit above the content layer (which is z-index: 1). The chevron
     overlaps the hero region, so without this the hero's stacking context
     could swallow the taps that land on the overlap. */
  z-index: 2;
  transition: border-color var(--dur-fast, 180ms) ease,
              background-color var(--dur-fast, 180ms) ease;
}

/* 7.9za — expand the TAP target to 48×48 without touching the 36px visual
   circle. 36px is well under the ~44px minimum comfortable touch target, so
   the chevron read as "hard to hit" on a phone — a near-miss landed on the
   substrate and did nothing. This pseudo-element enlarges only the hit area;
   the ring, glyph, and hover treatment are unchanged. */
.field-chamber__back::before {
  content: '';
  position: absolute;
  inset: -6px;              /* 36 + 6 + 6 = 48 */
  border-radius: 50%;
}
.field-chamber__back:hover,
.field-chamber__back:focus-visible {
  border-color: rgba(229, 210, 190, 0.55);
  background: rgba(10, 10, 10, 0.55);
  outline: none;
}

/* ── Hero: sigil + title + tagline ─────────────────────────────────── */
/* 7.5es — Padding tightened from 88px → 52px per revision (less air
   above the loader). Back chevron sits absolute so this padding
   doesn't have to accommodate it. */
.field-chamber__hero {
  padding: 52px 24px 28px;
  text-align: center;
}

/* 7.5es — Sigil-in-ring container now hosts the full ok-loader
   diagram (matches the app's calculating loader treatment). The ring
   SVG fills the whole 216px square; the eye sigil PNG is layered
   above at ~62% width so it sits inside the inner pulse-ring circles
   the same way it does in the mockup. */
.field-hero-sigil {
  position: relative;
  width: 216px;
  height: 216px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.field-hero-sigil__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.field-hero-sigil__eye {
  position: relative;
  width: 62%;
  height: auto;
  max-width: 128px;
  object-fit: contain;
  /* Soft chartreuse halo behind the eye, matching the accent in the
     PNG's iris marker. Non-critical polish; safe to remove. */
  filter: drop-shadow(0 0 18px rgba(224, 242, 81, 0.14));
}
/* The .ok-ring--spin, .ok-ring--spin-rev, .ok-pulse-ring[-2] classes
   already drive the animations app-wide via oracle-kit.css. Nothing
   to declare here — inheriting keeps The Field synchronized with the
   rest of the app if the shared kit ever tunes its ring motion. */

.field-chamber__title {
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--parchment);
  margin: 8px 0 12px;
}
/* 7.5es — italic "Field" now tinted to #E5D2BE per revision. */
.field-chamber__title i {
  font-style: italic;
  color: #E5D2BE;
}

.field-chamber__tagline {
  font-family: "Futura PT", "Futura", "Inter", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--parchment);
  opacity: 0.82;
  max-width: 320px;
  margin: 0 auto;
}

/* ── Roster: three stacked sections ────────────────────────────────── */
.field-roster {
  padding: 12px 20px 24px;
  max-width: 480px;
  margin: 0 auto;
}
.field-section + .field-section {
  margin-top: 26px;
}

/* Section eyebrow: uppercase gold label + trailing hairline rule.
   Rule fades to transparent so the eye lands on the label. */
.field-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.field-section__eyebrow-label {
  flex-shrink: 0;
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--sa-gold);
  text-transform: uppercase;
}
.field-section__eyebrow-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201, 169, 109, 0.35),
    rgba(201, 169, 109, 0)
  );
}

.field-section__lede {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--parchment);
  opacity: 0.72;
  margin: 0 0 12px;
}

/* ── Blueprint / people row ────────────────────────────────────────── */
/* Rendered by populateFieldChamber. Full-width tap target, gold hairline
   framed, avatar on the left, name + meta stacked, chevron on the right. */
.field-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(201, 169, 109, 0.22);
  border-radius: 11px;
  background: rgba(11, 10, 10, 0.7);
  color: var(--parchment);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast, 180ms) ease,
              background-color var(--dur-fast, 180ms) ease;
}
.field-row:hover,
.field-row:focus-visible {
  border-color: rgba(201, 169, 109, 0.44);
  background: rgba(20, 18, 16, 0.7);
  outline: none;
}

.field-row__avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--sa-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, #d9b982 0%, #a58351 45%, #715a37 100%);
  color: var(--void);
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 22px;
  line-height: 1;
}

.field-row__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.field-row__name {
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 26px;
  line-height: 1.05;
  color: var(--parchment);
}
.field-row__meta {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--parchment);
  opacity: 0.72;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.field-row__glyph {
  color: var(--sa-gold);
  font-size: 13px;
  line-height: 1;
  margin-right: 2px;
}
.field-row__dot {
  color: var(--sa-gold);
  opacity: 0.6;
}

.field-row__chevron {
  flex-shrink: 0;
  color: rgba(229, 210, 190, 0.6);
}

/* ── Rounded pill CTAs (Add / Create connection) ───────────────────── */
/* 7.5et — Fully rounded pill shape (999px). Default variant is the
   chartreuse "oracle" outline used for Create Connection. The gold
   variant (.field-pill--gold) is used for Add-or-Invite so the two
   actions read distinctly in the roster. */
.field-pill {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(224, 242, 81, 0.55);
  border-radius: 999px;
  background: transparent;
  color: var(--oracle);
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: box-shadow var(--dur-fast, 180ms) ease,
              border-color var(--dur-fast, 180ms) ease,
              background-color var(--dur-fast, 180ms) ease,
              color var(--dur-fast, 180ms) ease;
}
.field-pill:hover,
.field-pill:focus-visible {
  border-color: var(--oracle);
  background: rgba(224, 242, 81, 0.06);
  box-shadow: 0 0 24px -6px rgba(224, 242, 81, 0.35);
  outline: none;
}
.field-pill--outline {
  /* Alias so future variants can hang off .field-pill. */
}
/* 7.5et — Gold variant (Add or invite someone). Uses the sacred-acid
   gold token so the outline + label read as the same warm gold used
   in eyebrow labels + row hairlines, not chartreuse. */
.field-pill--gold {
  border-color: rgba(201, 169, 109, 0.7);
  color: var(--sa-gold);
}
.field-pill--gold:hover,
.field-pill--gold:focus-visible {
  border-color: var(--sa-gold);
  background: rgba(201, 169, 109, 0.08);
  box-shadow: 0 0 24px -6px rgba(201, 169, 109, 0.4);
}
.field-pill[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.field-pill[disabled]:hover,
.field-pill[disabled]:focus-visible {
  border-color: rgba(224, 242, 81, 0.55);
  background: transparent;
  box-shadow: none;
}
.field-pill--gold[disabled]:hover,
.field-pill--gold[disabled]:focus-visible {
  border-color: rgba(201, 169, 109, 0.7);
  background: transparent;
  box-shadow: none;
}

/* Section body spacing when a lede sits above the pill / row. */
.field-section__body {
  margin-top: 4px;
}

/* ── Small-screen tuning ───────────────────────────────────────────── */
@media (max-width: 380px) {
  .field-chamber__hero { padding: 76px 20px 22px; }
  .field-chamber__title { font-size: 48px; }
  .field-hero-sigil { width: 172px; height: 172px; }
  .field-hero-sigil__eye { width: 110px; height: 110px; }
  .field-roster { padding: 8px 16px 20px; }
  .field-row__name { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════
   FIELD CHART VIEW (Phase C, 7.5eu)
   Four-tab explorer reached by tapping a .field-row. Sticky header
   holds identity + tab bar; body is a scroll region with four panels
   (only .active is visible). Populated by populateFieldChart*() in
   oracle.js. No LLM calls — every string is a lookup against
   window.FIELD_CONTENT.
   ══════════════════════════════════════════════════════════════════════ */

#step-field-chart.field-chart {
  position: relative;
  min-height: 100vh;
  color: var(--parchment);
  background: var(--void);
  overflow-x: hidden;
  padding: 0;
  /* Match Personal Transits palette for pills + accents so the two
     admin chambers read as a shared visual family. */
  --tr-cream:        #F7D1AC;
  --tr-cream-2:      #E1E1DF;
  --tr-cream-soft:   rgba(247,209,172,0.55);
  --tr-gold-soft:    rgba(201,169,109,0.38);
}

/* 7.5fp — Field-chart body-class fix for the "large empty gap" bug.
   #share-card-template lives inside #app-shell as position:absolute
   height ~1920px. Because #app-shell has overflow:visible, that
   template extends document.scrollHeight past the last Field card,
   leaving hundreds of pixels of dead black below the content. Mirrors
   the .on-transits-chamber fix in transits.css. */
body.on-field-chart #share-card-template { display: none !important; }

/* Substrate: same yellow-flower-on-black petal used in the Personal
   Transits feed hero. Full-bleed one-viewport, absolute — sits at
   top:0 so the image bleeds behind the notch/status bar and the
   transparent absolute topbar floats over it, matching the .tr-substrate
   pattern in transits.css. */
.field-chart__substrate {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    #000 42%,
    rgba(0,0,0,0.7) 62%,
    rgba(0,0,0,0.28) 80%,
    transparent 95%);
          mask-image: linear-gradient(180deg,
    #000 0%,
    #000 42%,
    rgba(0,0,0,0.7) 62%,
    rgba(0,0,0,0.28) 80%,
    transparent 95%);
}
.field-chart__substrate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.78;
}
.field-chart__substrate::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.55) 50%,
      rgba(0,0,0,0.92) 92%,
      rgba(0,0,0,1)   100%);
}

/* 7.9za — desktop full-bleed for the chart + bond sub-pages, matching the
   main Field page. Both are .step children (max-width: 640px; margin: 0
   auto), so above 640px the petal was boxed into that centred column with
   black gutters.

   POSITION IS LOAD-BEARING: this block must come AFTER
   `#step-field-chart.field-chart` and `.field-chart__substrate` above.
   Both overrides tie those rules on specificity, and a media query adds
   none, so source order is the only tiebreak. Placed earlier in the file,
   the step keeps `overflow-x: hidden` (re-clipping the break-out) and the
   substrate keeps `left: 0` — which, with the transform still applying,
   drags the image 320px left of the viewport and leaves a black strip down
   the right-hand side rather than a centred full-bleed.

   Dropping the step's clip is safe: `body` already sets overflow-x: hidden,
   so the overhang is contained and no horizontal scrollbar appears. The
   existing mask above still fades the image to solid black at its bottom.
   Below 641px the step already spans the viewport — mobile is untouched. */
@media (min-width: 641px) {
  #step-field-chart.field-chart { overflow-x: visible; }
  .field-chart__substrate {
    left: 50%;
    right: auto;
    width: 100vw;
    transform: translateX(-50%);
  }
}

/* Absolute topbar over the substrate — mirrors .tr-topbar in
   transits.css so the petal image bleeds full to the top edge and the
   header content (YOUR CHART eyebrow, avatar row, tab pill row) sits
   transparently on top. Sticky positioning + a dark bg used to cut the
   image off; that's the exact regression this fix removes.
   The body reserves top space via padding-top so content clears the
   header even though the header is absolute. */
.field-chart__topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  background: transparent;
  padding: max(54px, calc(env(safe-area-inset-top, 20px) + 20px)) 20px 0;
}

/* Body sits above the substrate so cards render on solid black.
   The per-panel padding-top is applied on .field-chart__body below —
   this rule only establishes the stacking context. */
.field-chart__body {
  position: relative;
  z-index: 1;
}

.field-chart__back {
  position: static;
  margin-bottom: 14px;
}

.field-chart__eyebrow {
  text-align: center;
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #A3A39E;
  margin: -34px 0 20px;
  text-transform: uppercase;
}

/* Identity: avatar + name + birth line. Mirrors the Field roster row
   but bigger + centered. */
.field-chart__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0 18px;
}
.field-chart__avatar {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid var(--sa-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, #d9b982 0%, #a58351 45%, #715a37 100%);
  color: var(--void);
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 28px;
  line-height: 1;
}
.field-chart__ident-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.field-chart__name {
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 34px;
  line-height: 1.02;
  color: var(--parchment);
}
.field-chart__birthline {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 12.5px;
  color: var(--parchment);
  opacity: 0.68;
  letter-spacing: 0.02em;
}

/* Tab bar — pill format that ports .tr-chip exactly. Same background,
   border, color tokens, letter-spacing, padding, and active-state fill
   as the Personal Transits filter chips so the two admin surfaces read
   as a shared visual family. Scrolls horizontally if the four labels
   overflow the viewport (same behavior as tr-filters). */
.field-chart__tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px -20px 0;
  padding: 4px 20px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.field-chart__tabs::-webkit-scrollbar { display: none; }
.field-chart__tab {
  flex: 0 0 auto;
  background: rgba(247,209,172,0.06);
  color: var(--tr-cream-soft);
  border: 1px solid rgba(247,209,172,0.22);
  border-radius: 9999px;
  padding: 7px 14px;
  font-family: "Futura PT", "Futura", "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: all 180ms ease;
}
.field-chart__tab:hover,
.field-chart__tab:focus-visible {
  border-color: rgba(247,209,172,0.45);
  color: var(--tr-cream-2);
  outline: none;
}
.field-chart__tab.active {
  background: var(--tr-cream);
  color: #1a0e1c;
  border-color: var(--tr-cream);
}

/* Body: four panels, only .active shown. padding-top reserves altitude
   for the absolute topbar (back button + YOUR CHART eyebrow + identity
   + tab pills). Padding-bottom leaves room for the phone home indicator
   on iOS PWAs. */
.field-chart__body {
  padding: 250px 20px 140px;
  max-width: 520px;
  margin: 0 auto;
}
.field-chart__panel {
  display: none;
}
.field-chart__panel.active {
  display: block;
}

/* ── Shared section eyebrow ─────────────────────────────────────────── */
.fc-section {
  margin: 24px 0 0;
}
.fc-section:first-child {
  margin-top: 0;
}
.fc-section__eyebrow {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--sa-gold);
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* ── Overview: At A Glance rows ─────────────────────────────────────── */
.fc-glance {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(201, 169, 109, 0.22);
  border-radius: 14px;
  background: rgba(11, 10, 10, 0.7);
  overflow: hidden;
}
.fc-glance-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(93, 83, 73, 0.3);
}
.fc-glance-row:last-child { border-bottom: none; }
.fc-glance-glyph {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(224, 242, 81, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oracle);
  font-size: 16px;
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  margin-top: 2px;
}
.fc-glance-body {
  flex: 1;
  min-width: 0;
}
.fc-glance-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 6px;
}
.fc-glance-label {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--oracle);
}
.fc-glance-place {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 14px;
  color: var(--parchment);
  opacity: 0.78;
}
.fc-glance-copy {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--parchment);
  opacity: 0.9;
  margin: 0;
}

/* ── Overview: Type / Profile mini-cards ────────────────────────────── */
.fc-typeprof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}
.fc-typeprof__card {
  padding: 16px 16px 14px;
  border: 1px solid rgba(201, 169, 109, 0.22);
  border-radius: 14px;
  background: rgba(11, 10, 10, 0.7);
}
.fc-typeprof__label {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(229, 210, 190, 0.65);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fc-typeprof__value {
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 28px;
  line-height: 1.08;
  color: var(--parchment);
}
.fc-typeprof__caption {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 15px;
  color: var(--parchment);
  opacity: 0.72;
  margin-top: 6px;
}

/* ── Overview: "Three systems agree" + HD Highlights (shared card) ──── */
.fc-agree {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fc-agree-card {
  padding: 16px 18px;
  border: 1px solid rgba(201, 169, 109, 0.22);
  border-radius: 14px;
  background: rgba(11, 10, 10, 0.7);
}
.fc-agree-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.fc-agree-glyph {
  color: var(--sa-gold);
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 17px;
  line-height: 1;
  min-width: 20px;
  text-align: center;
}
.fc-agree-meta {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--sa-gold);
  text-transform: uppercase;
}
.fc-agree-body {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--parchment);
  opacity: 0.92;
  margin: 0;
}

/* Tri-color eyebrow variants for the "three systems agree" cards.
   Each system gets its own accent so the reader can visually code the
   discipline at a glance. Applied only inside the agree section — HD
   Highlights on the HD tab still uses the default gold. */
.fc-agree-card--astrology .fc-agree-glyph,
.fc-agree-card--astrology .fc-agree-meta {
  color: var(--oracle);            /* acid green — chartreuse accent */
}
.fc-agree-card--hd .fc-agree-glyph,
.fc-agree-card--hd .fc-agree-meta {
  color: var(--sa-gold);           /* ember gold #C9A96D */
}
.fc-agree-card--gk .fc-agree-glyph,
.fc-agree-card--gk .fc-agree-meta {
  /* Warm tan — the Personal Transits cream (#F7D1AC). Bright enough
     to hold against green + gold without going muddy on pure black. */
  color: #F7D1AC;
}

/* HD Highlights section — 3-color cycle (green → gold → cream) applied
   in index order by the JS renderer. Distinct namespace from the
   overview tri-color variants so the two lists can evolve independently. */
.fc-agree-card--hd-hl-green .fc-agree-meta,
.fc-agree-card--hd-hl-green .fc-agree-glyph {
  color: var(--oracle);            /* acid green */
}
.fc-agree-card--hd-hl-gold .fc-agree-meta,
.fc-agree-card--hd-hl-gold .fc-agree-glyph {
  color: var(--sa-gold);           /* ember gold */
}
.fc-agree-card--hd-hl-cream .fc-agree-meta,
.fc-agree-card--hd-hl-cream .fc-agree-glyph {
  color: #E1E1DF;                  /* cream */
}

/* ── Astrology: wheel + placements table + highlights ───────────────── */
.fc-wheel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 20px;
}
.fc-wheel__svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.fc-place {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(201, 169, 109, 0.22);
  border-radius: 14px;
  background: rgba(11, 10, 10, 0.7);
  overflow: hidden;
}
.fc-place-row {
  display: grid;
  grid-template-columns: 28px 1fr auto 44px;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(93, 83, 73, 0.3);
}
.fc-place-row:last-child { border-bottom: none; }
.fc-place-glyph {
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 18px;
  color: var(--sa-gold);
  text-align: center;
}
.fc-place-label {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--parchment);
}
.fc-place-value {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 14px;
  color: var(--parchment);
  opacity: 0.88;
  text-align: right;
}
.fc-place-house {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 12.5px;
  color: var(--parchment);
  opacity: 0.6;
  text-align: right;
  letter-spacing: 0.06em;
}
/* Rendered INSIDE .fc-place so the line sits in the same rounded card
   as the placement rows — separated by the same row-divider treatment
   (a hairline top border). */
.fc-place-acmc {
  padding: 13px 16px;
  border-top: 1px solid rgba(93, 83, 73, 0.3);
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 13px;
  color: var(--sa-gold);
  opacity: 0.88;
  letter-spacing: 0.06em;
  text-align: center;
}

.fc-hl {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fc-hl-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 0 26px;
  position: relative;
}
.fc-hl-row:first-child { padding-top: 4px; }
.fc-hl-row:last-child  { padding-bottom: 4px; }
/* Divider between highlights — shadow → gift → siddhi spectrum, the
   same gradient used under each Gene Keys gate. Reuses the Gene Keys
   token trio so the two tabs read as the same visual grammar. */
.fc-hl-row + .fc-hl-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5D5349 0%, #C9A96D 50%, #E0F251 100%);
  opacity: 0.85;
}
.fc-hl-glyph {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 109, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sa-gold);
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 15px;
  margin-top: 2px;
}
.fc-hl-body {
  flex: 1;
  min-width: 0;
}
.fc-hl-heading {
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 23px;
  line-height: 1.15;
  color: #E5D2BE;
  margin-bottom: 6px;
}
.fc-hl-copy {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--parchment);
  opacity: 0.86;
  margin: 0;
}

/* ── Human Design: bodygraph + legend + fields + pills + channels ───── */
.fc-bodygraph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 8px;
}
/* Dark radial scrim behind the SVG only — dims the yellow-flower
   petal substrate so the line-art bodygraph reads clearly. Feathers to
   transparent at the edges so the image atmosphere survives at the
   margins instead of turning into a hard black box. Sits above the
   substrate and below the SVG, so the graph lines themselves are
   NOT dimmed. */
.fc-bodygraph::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(10,10,10,0.88) 0%,
    rgba(10,10,10,0.78) 40%,
    rgba(10,10,10,0.5) 65%,
    transparent 85%);
  pointer-events: none;
  z-index: 0;
}
.fc-bodygraph__svg {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  height: auto;
}
.fc-bodygraph__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: center;
  margin: 0 0 24px;
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--parchment);
  opacity: 0.72;
}
.fc-bodygraph__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fc-bodygraph__key i.k {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.k--def { background: rgba(224,242,81,0.16); border: 1px solid #E0F251; }
.k--ch  { background: var(--oracle); border-radius: 3px; height: 2px; width: 14px; }
.k--hg  { background: var(--sa-gold); border-radius: 3px; height: 2px; width: 14px; }
.k--op  { background: transparent; border: 1px solid #5D5349; }

.fc-hd-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.fc-hd-field {
  padding: 12px 16px;
  border: 1px solid rgba(201, 169, 109, 0.22);
  border-radius: 12px;
  background: rgba(11, 10, 10, 0.7);
}
.fc-hd-field__label {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(229, 210, 190, 0.6);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.fc-hd-field__value {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 18px;
  color: var(--parchment);
  opacity: 0.94;
}

.fc-hd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fc-hd-pill {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 109, 0.35);
  background: transparent;
  color: rgba(229, 210, 190, 0.65);
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.fc-hd-pill--defined {
  background: rgba(224, 242, 81, 0.14);
  border-color: rgba(224, 242, 81, 0.7);
  color: var(--oracle);
}

/* ── Tap-to-explain triggers + expansion panels (centres + hanging gates) ──
   Buttons wear the same visual as the surrounding chips/pills, plus a
   subtle ▾ caret so it's discoverable that they open. One panel per
   section is visible at a time (the JS enforces this). Panel body uses
   cream (#E1E1DF); the eyebrow row uses the tab's existing gold. */
.fc-hd-explain-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.fc-hd-explain-trigger .fc-hd-explain-caret {
  font-size: 10px;
  opacity: 0.55;
  transition: transform 180ms ease, opacity 180ms ease;
  line-height: 1;
}
.fc-hd-explain-trigger[aria-expanded="true"] {
  border-color: var(--sa-gold);
  background: rgba(201, 169, 109, 0.14);
  color: var(--parchment);
}
.fc-hd-explain-trigger[aria-expanded="true"] .fc-hd-explain-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.fc-hd-pill--defined.fc-hd-explain-trigger[aria-expanded="true"] {
  border-color: var(--oracle);
  background: rgba(224, 242, 81, 0.22);
  color: var(--oracle);
}

.fc-hd-explain-panel {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(201, 169, 109, 0.28);
  border-radius: 12px;
  background: rgba(11, 10, 10, 0.85);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.fc-hd-explain-panel--open {
  opacity: 1;
  transform: none;
}
.fc-hd-explain__eyebrow {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--sa-gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.fc-hd-explain__body {
  margin: 0;
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #E1E1DF;
}

/* Incarnation Cross card — two supporting paragraphs beneath the value. */
.fc-hd-field__copy {
  margin: 10px 0 0;
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #E1E1DF;
  opacity: 0.9;
}
.fc-hd-field__copy + .fc-hd-field__copy {
  margin-top: 8px;
}

.fc-hd-channels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-hd-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(201, 169, 109, 0.22);
  border-radius: 12px;
  background: rgba(11, 10, 10, 0.7);
}
.fc-hd-channel__gates {
  flex-shrink: 0;
  width: 34px;
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--sa-gold);
  line-height: 1.15;
  text-align: right;
  white-space: pre-line;
}
.fc-hd-channel__body { flex: 1; min-width: 0; }
.fc-hd-channel__name {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--parchment);
  margin-bottom: 3px;
}
.fc-hd-channel__desc {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--parchment);
  opacity: 0.75;
}

.fc-hd-hanging {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.fc-hd-hchip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 109, 0.4);
  color: var(--sa-gold);
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.04em;
}
.fc-hd-hanging__lede {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 14px;
  color: var(--parchment);
  opacity: 0.6;
  margin: 0;
  line-height: 1.5;
}

/* ── Gene Keys: activation sequence + spheres + Venus/Pearl ─────────── */
.fc-gk-pathway {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 15px;
  color: var(--parchment);
  opacity: 0.78;
  margin: 0 0 4px;
  line-height: 1.5;
}
/* ── Gene Keys: collapsible sequence sections (7.5fr) ─────────────────── */
.fc-gk-section {
  margin-top: 20px;
}
.fc-gk-section:first-child { margin-top: 0; }
.fc-gk-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0 0 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.fc-gk-section__label {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--sa-gold);
  text-transform: uppercase;
}
.fc-gk-section__caret {
  color: var(--sa-gold);
  font-size: 12px;
  opacity: 0.75;
  transition: transform 220ms ease, opacity 220ms ease;
  line-height: 1;
}
.fc-gk-section--open .fc-gk-section__caret {
  transform: rotate(180deg);
  opacity: 1;
}
.fc-gk-section__intro {
  margin: 8px 0 12px;
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--parchment);
  opacity: 0.78;
}
/* Smooth collapse via grid-row size animation. Modern iOS Safari
   supports animating grid-template-rows between 0fr and 1fr as of
   16.4+ — falls back to instant show/hide on older WebKits. */
.fc-gk-section__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms ease;
  overflow: hidden;
}
.fc-gk-section--open .fc-gk-section__body {
  grid-template-rows: 1fr;
}
.fc-gk-section__body > * {
  min-height: 0;
}

.fc-gk-spheres {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 16px;
}
.fc-gk-sphere {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.fc-gk-medallion {
  flex-shrink: 0;
}
.fc-gk-medallion__svg {
  display: block;
  width: 86px;
  height: 86px;
}
.fc-gk-sphere__body {
  flex: 1;
  min-width: 0;
}
.fc-gk-sphere__eyebrow {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--sa-gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fc-gk-sphere__title {
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 30px;
  line-height: 1.05;
  color: var(--parchment);
  margin-bottom: 10px;
}
.fc-gk-spectrum { margin-bottom: 8px; }
.fc-gk-spectrum__bar {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5D5349 0%, #C9A96D 50%, #E0F251 100%);
  margin-bottom: 6px;
}
.fc-gk-spectrum__labels {
  display: flex;
  justify-content: space-between;
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.fc-gk-spectrum__shadow { color: #5D5349; }
.fc-gk-spectrum__gift   { color: var(--sa-gold); }
.fc-gk-spectrum__siddhi { color: var(--oracle); }
.fc-gk-sphere__prose {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--parchment);
  opacity: 0.86;
  margin: 0;
}
/* Sphere-position meaning line — sits under the triad "From X through
   Y toward Z" line and explains what this SPHERE means (distinct from
   the gate's triad). Cream to differentiate from the parchment prose. */
.fc-gk-sphere__meaning {
  margin: 10px 0 0;
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #E1E1DF;
  opacity: 0.88;
}

.fc-gk-vp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 26px;
}
.fc-gk-mini {
  padding: 14px 16px;
  border: 1px solid rgba(201, 169, 109, 0.22);
  border-radius: 12px;
  background: rgba(11, 10, 10, 0.7);
}
.fc-gk-mini__eyebrow {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(229, 210, 190, 0.65);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.fc-gk-mini__gift {
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 23px;
  color: var(--parchment);
  line-height: 1.1;
  margin-bottom: 2px;
}
.fc-gk-mini__gate {
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 13.5px;
  color: var(--parchment);
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* Narrow-viewport tuning for the chart view. */
@media (max-width: 380px) {
  .field-chart__body { padding: 250px 16px 140px; }
  .field-chart__name { font-size: 28px; }
  .field-chart__avatar { width: 50px; height: 50px; font-size: 24px; }
  .fc-typeprof__value { font-size: 22px; }
  .fc-place-row { grid-template-columns: 22px 1fr auto 36px; padding: 10px 14px; }
  .fc-gk-spheres { gap: 16px; }
  .fc-gk-medallion__svg { width: 76px; height: 76px; }
}

/* ════════════════════════════════════════════════════════════════════
   7.8a — The Field: "Add Someone" — My People list, add/invite sheet,
   add-person form, and the chart-view unknown-time banner.
   ════════════════════════════════════════════════════════════════════ */

/* ── My People list (rows reuse .field-row) ── */
#field-people-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
#field-people-list:empty { margin-bottom: 0; }
.field-row--person .field-row__avatar {
  /* subtly distinguish added people from the gold "my blueprint" ring */
  background: radial-gradient(circle at 30% 25%, rgba(201,169,109,0.28), rgba(20,20,24,0.9));
}
.field-people-note {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--copy-grey);
  letter-spacing: 0.02em;
  margin: 2px 2px 12px;
  opacity: 0.75;
}

/* ── Add / Invite bottom-sheet ── */
.field-sheet-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0.58);
  opacity: 0; transition: opacity 0.28s ease;
}
.field-sheet-overlay[hidden] { display: none; }
.field-sheet-overlay--open { opacity: 1; }
.field-sheet {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, #141416 0%, #0d0d10 100%);
  border: 1px solid rgba(201,169,109,0.24);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 10px 22px calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -18px 50px rgba(0,0,0,0.5);
}
.field-sheet-overlay--open .field-sheet { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .field-sheet-overlay, .field-sheet { transition: none; }
}
@media (min-width: 620px) {
  .field-sheet-overlay { align-items: center; }
  .field-sheet { border-radius: 18px; border-bottom: 1px solid rgba(201,169,109,0.24); }
}
.field-sheet__grabber {
  display: block; width: 42px; height: 4px; margin: 4px auto 14px;
  border-radius: 999px; background: rgba(201,169,109,0.35);
}
.field-sheet__close {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: none; color: var(--copy-grey);
  cursor: pointer; border-radius: 50%;
}
.field-sheet__close:hover { color: var(--parchment); }
.field-sheet__eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sa-gold); margin: 0 0 6px;
}
.field-sheet__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 27px; line-height: 1.15; color: var(--parchment);
  margin: 0 0 8px;
}
.field-sheet__title em { color: var(--sa-gold); font-style: italic; }
.field-sheet__lede {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  color: var(--copy-grey); margin: 0 0 20px;
}
.field-sheet__backlink {
  background: transparent; border: none; padding: 0; margin: 0 0 14px;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--copy-grey); cursor: pointer;
}
.field-sheet__backlink:hover { color: var(--parchment); }

/* choice cards */
.field-sheet__choices { display: flex; flex-direction: column; gap: 12px; }
.field-choice {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; width: 100%;
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(201,169,109,0.22);
  border-radius: 13px; cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.field-choice:hover, .field-choice:focus-visible {
  border-color: rgba(201,169,109,0.5);
  background: rgba(201,169,109,0.06);
}
.field-choice__title {
  font-family: var(--font-display); font-size: 20px; color: var(--parchment);
}
.field-choice__sub {
  font-family: var(--font-body); font-size: 13px; color: var(--copy-grey);
}

/* ── Add-person form ── */
#field-add-form .form-group { margin-bottom: 18px; }
.fa-triple { display: flex; align-items: center; gap: 8px; }
.fa-triple__cell { text-align: center; letter-spacing: 0.06em; }
#fa-dob-year { max-width: 96px; }
.fa-triple__sep { color: var(--copy-grey); font-size: 20px; opacity: 0.6; }
.fa-check {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-family: var(--font-body); font-size: 13.5px; color: var(--copy-grey);
  cursor: pointer;
}
.fa-check input { width: 16px; height: 16px; accent-color: var(--sa-gold); }
.fa-hint {
  margin: 8px 0 0; font-family: var(--font-body); font-size: 12.5px;
  line-height: 1.5; color: var(--sa-gold); opacity: 0.85;
}
.fa-error {
  margin: 4px 0 12px; font-family: var(--font-body); font-size: 13px;
  color: var(--rose, #d98a8a); line-height: 1.45;
}
#fa-submit[disabled] { opacity: 0.5; pointer-events: none; }
#fa-time-inputs.is-disabled { opacity: 0.4; pointer-events: none; }

/* ── Chart view: unknown-birth-time banner ── */
.field-chart__timenote {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: rgba(201,169,109,0.08);
  border: 1px solid rgba(201,169,109,0.28);
  border-radius: 11px;
}
.field-chart__timenote-glyph { color: var(--sa-gold); font-size: 15px; line-height: 1.4; flex: 0 0 auto; }
.field-chart__timenote-text {
  font-family: var(--font-body); font-size: 12.8px; line-height: 1.5;
  color: var(--parchment); opacity: 0.9;
}
.field-chart__timenote-text strong { color: var(--sa-gold); font-weight: 600; }

/* ── 7.8b — Chart-view manage bar (remove an added person) ── */
.field-chart__manage {
  padding: 18px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center;
  border-top: 1px solid rgba(201,169,109,0.14);
}
.field-chart__remove {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--copy-grey); padding: 8px 12px;
  transition: color 0.18s ease;
}
.field-chart__remove:hover { color: var(--rose, #d98a8a); }
.field-chart__remove-confirm {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 420px;
}
.field-chart__remove-q {
  font-family: var(--font-body); font-size: 14px; color: var(--parchment);
  text-align: center; line-height: 1.45;
}
.field-chart__remove-actions { display: flex; gap: 12px; }
.field-chart__remove-cancel, .field-chart__remove-yes {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.field-chart__remove-cancel {
  background: transparent; border: 1px solid rgba(201,169,109,0.3); color: var(--copy-grey);
}
.field-chart__remove-cancel:hover { border-color: rgba(201,169,109,0.55); color: var(--parchment); }
.field-chart__remove-yes {
  background: rgba(217,138,138,0.14); border: 1px solid rgba(217,138,138,0.5); color: #e6a3a3;
}
.field-chart__remove-yes:hover { background: rgba(217,138,138,0.24); }
.field-chart__remove-yes[disabled] { opacity: 0.6; pointer-events: none; }

/* ── 7.8c — Manage-bar actions row (Edit + Remove) ── */
.field-chart__manage-actions {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.field-chart__edit {
  background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sa-gold);
  border: 1px solid rgba(201,169,109,0.4);
  border-radius: 999px; padding: 9px 20px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.field-chart__edit:hover { background: rgba(201,169,109,0.1); border-color: rgba(201,169,109,0.65); }

/* ══════════════════════════════════════════════════════════════════
   7.9b — THE FIELD: Connections (Bonds)
   Saved-bond rows, the two-person picker, and the Bond result screen.
   Reuses the Sacred Acid vocabulary: Silver Editorial serif display,
   Futura PT labels, --sa-gold warm gold, --parchment text, --oracle
   chartreuse accent.
   ══════════════════════════════════════════════════════════════════ */

/* ── Saved-bond row (Connections list) ─────────────────────────────── */
.field-row--bond { margin-bottom: 10px; }
.field-row__avatar--pair {
  position: relative;
  background: none;
  border: none;
  width: 52px;
}
.field-row__avatar--pair .pair-dot {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--sa-gold);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, #d9b982 0%, #a58351 45%, #715a37 100%);
  color: var(--void);
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 16px; line-height: 1;
}
.field-row__avatar--pair .pair-dot--a { top: 0; left: 0; z-index: 2; }
.field-row__avatar--pair .pair-dot--b { bottom: 0; right: 0; z-index: 1; box-shadow: -6px 0 10px -6px rgba(0,0,0,0.7); }
.field-row__amp { color: var(--sa-gold); opacity: 0.7; font-style: italic; padding: 0 2px; }

/* ── Two-person picker (bottom sheet body) ─────────────────────────── */
.field-bond-picker { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
.field-bond-picker__empty {
  font-family: "Futura PT", "Futura", sans-serif; font-size: 14px;
  color: var(--parchment); opacity: 0.72; line-height: 1.5; text-align: center; padding: 18px 8px;
}
.bond-chip {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 12px 14px; border: 1px solid rgba(201,169,109,0.24);
  border-radius: 12px; background: rgba(11,10,10,0.7);
  color: var(--parchment); text-align: left; cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.bond-chip:hover, .bond-chip:focus-visible { border-color: rgba(201,169,109,0.5); outline: none; }
.bond-chip.is-selected { border-color: var(--sa-gold); background: rgba(201,169,109,0.1); }
.bond-chip__avatar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--sa-gold);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, #d9b982 0%, #a58351 45%, #715a37 100%);
  color: var(--void); font-family: "The Silver Editorial","Instrument Serif",Georgia,serif; font-size: 19px; line-height: 1;
}
.bond-chip__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bond-chip__name { font-family: "The Silver Editorial","Instrument Serif",Georgia,serif; font-size: 21px; line-height: 1.05; color: var(--parchment); }
.bond-chip__sub { font-family: "Futura PT","Futura",sans-serif; font-size: 11.5px; letter-spacing: 0.04em; color: var(--parchment); opacity: 0.62; text-transform: uppercase; }
.bond-chip__check {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid rgba(201,169,109,0.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--void); background: transparent; opacity: 0;
  transition: opacity 160ms ease, background-color 160ms ease;
}
.bond-chip.is-selected .bond-chip__check { opacity: 1; background: var(--sa-gold); border-color: var(--sa-gold); }

/* ── Bond result screen ────────────────────────────────────────────── */
/* 7.9za — Bond now shows the shared botanical substrate like every other
   Field surface (reverses 7.9z's "clean dark ground", per Krysta). The
   `display: none` that used to live here is gone; the substrate markup is
   in #step-field-bond and inherits .field-chart__substrate's mask, so the
   hero still resolves to true black before the bond cards begin. */

/* 7.9z — two gold monogram circles split by a serif "&", centered above
   the names. 7.9z3 — large + close together: this is the hero image
   (profile photos will live here later), so it should feel generous. */
.field-bond__monos {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 2px 0 14px;
}
.field-bond__mono {
  flex-shrink: 0; width: 84px; height: 84px; border-radius: 50%;
  border: 1.5px solid var(--sa-gold);
  background: radial-gradient(circle at 30% 25%, #d9b982 0%, #a58351 45%, #715a37 100%);
  color: var(--void);
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-size: 38px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.field-bond__mono-amp {
  font-family: "The Silver Editorial", "Instrument Serif", Georgia, serif;
  font-style: italic; font-size: 24px; color: var(--sa-gold); opacity: 0.9;
  margin: 0 -1px;
}

/* 7.9z2 — the monograms carry the visual identity, so the names read as a
   quiet caption: Futura, small, with a small sparkle between them and a
   full-width hairline underneath. */
.field-bond__names {
  text-align: center;
  font-family: "Futura PT", "Futura", sans-serif;
  font-size: 14px; letter-spacing: 0.08em; line-height: 1.3; color: var(--parchment);
  padding: 4px 0 12px; margin: 0 0 2px;
  border-bottom: 1px solid rgba(201,169,109,0.28);
}
.field-bond__amp {
  color: var(--sa-gold); font-style: normal; font-size: 10px;
  opacity: 0.9; margin: 0 5px; vertical-align: 1px;
}
/* Bond topbar carries a large monogram row + caption names. Later + equal
   specificity → wins. */
.field-bond__body { padding: 232px 20px 150px; }

/* 7.9x — the poetic "Signature" hero section was removed; the reading opens
   on the plain-voiced Defining Dynamic. (.bond-signature* deleted.) */

.bond-section { margin: 0 0 34px; }
/* 7.9z2 — section headers are plain light-grey labels, full-width-underlined
   with the shadow→gift→siddhi gold line from the Gene Keys screen. (The
   7.9z gradient pills were pulled back.) */
.bond-eyebrow {
  display: block; position: relative;
  padding: 0 0 9px; margin-bottom: 16px;
}
.bond-eyebrow .field-section__eyebrow-label {
  color: #A3A39E; font-size: 12px; letter-spacing: 0.16em;
}
.bond-eyebrow .field-section__eyebrow-rule {
  display: block; position: absolute; left: 0; right: 0; bottom: 0;
  flex: none; height: 2px;
  background: linear-gradient(90deg, #5D5349 0%, #C9A96D 50%, #E0F251 100%);
}

/* 7.9z2 — the Defining Dynamic opener: plain dark-gold copy (no underline),
   centered with its headline + essence. The best/worst cards keep their
   left-aligned body. */
.bond-dynamic { text-align: center; }
.bond-dynamic .bond-octave { text-align: left; }
.bond-dynamic .bond-eyebrow { padding-bottom: 0; }
.bond-dynamic .bond-eyebrow .field-section__eyebrow-label { color: var(--sa-gold); }
.bond-dynamic .bond-eyebrow .field-section__eyebrow-rule { display: none; }

.bond-card {
  border: 1px solid rgba(201,169,109,0.2);
  border-radius: 12px; background: rgba(14,12,11,0.72);
  /* 7.9z — tighter left/right padding so the copy runs wider. */
  padding: 16px 13px; margin-bottom: 12px;
}
/* 7.9z2/7.9z3 — grow/hold card titles match the synastry card titles:
   italic, warm peach (#FFCFA7). */
.bond-card__title {
  font-family: "The Silver Editorial","Instrument Serif",Georgia,serif; font-style: italic;
  font-size: 20px; line-height: 1.2; color: #FFCFA7; margin: 0 0 7px; font-weight: 400;
}
.bond-card__body {
  font-family: "Futura PT","Futura",sans-serif; font-size: 18px; line-height: 1.6;
  color: var(--parchment); opacity: 0.86; margin: 0;
}
.bond-card--wide { background: rgba(224,242,81,0.05); border-color: rgba(224,242,81,0.28); }
.bond-card--auth { background: rgba(201,169,109,0.08); border-style: dashed; }

/* ── 7.9d — the relating-voice card: lived HEADLINE · mechanic SUBTITLE ·
   plain BODY · optional inset "Sounds like." ─────────────────────────── */
/* 7.9z/7.9z3 — the lived card title reads italic + warm peach (#FFCFA7). */
.bond-card__headline {
  font-family: "The Silver Editorial","Instrument Serif",Georgia,serif; font-style: italic;
  font-size: 22px; line-height: 1.16; color: #FFCFA7; margin: 0 0 12px; font-weight: 400;
}
/* 7.9z — the placement line sits well below the title, then a thin rule
   separates it from the body. */
.bond-card__mech {
  font-family: "Futura PT","Futura",sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sa-gold);
  opacity: 0.92; margin: 0 0 12px; padding: 0 0 9px;
  border-bottom: 1px solid rgba(201,169,109,0.22);
}
/* One concrete, filmable moment — inset, dimmer, visually its own beat.
   7.9z: set in the regular (non-italic) face, no longer italic serif. */
.bond-card__sounds {
  font-family: "Futura PT","Futura",sans-serif; font-style: normal;
  font-size: 15px; line-height: 1.55; color: var(--parchment); opacity: 0.7;
  margin: 12px 0 0; padding: 10px 0 0 13px;
  border-top: 1px solid rgba(201,169,109,0.14); border-left: 2px solid rgba(201,169,109,0.28);
}
.bond-card__sounds-label {
  display: block; font-family: "Futura PT","Futura",sans-serif; font-style: normal;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sa-gold); opacity: 0.8; margin-bottom: 4px;
}
/* Generic fallback cards read lighter (no authored voice yet) — same shape. */
.bond-card--generic { border-color: rgba(201,169,109,0.13); }
.bond-card--generic .bond-card__headline { opacity: 0.9; }

/* 7.9y — the tender card + its "How to hold this" payoff line. Warmer, gold
   inset (the kindness), distinct from the dimmer "Sounds like" beat. */
.bond-tender { border-color: rgba(201,169,109,0.3); background: rgba(201,169,109,0.045); }
.bond-card__hold {
  font-family: "Futura PT","Futura",sans-serif; font-size: 16px; line-height: 1.55;
  color: var(--parchment); opacity: 0.92; margin: 13px 0 0; padding: 12px 0 0 14px;
  border-top: 1px solid rgba(201,169,109,0.18); border-left: 2px solid var(--sa-gold);
}
.bond-card__hold-label {
  display: block; font-family: "Futura PT","Futura",sans-serif;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sa-gold); opacity: 0.95; margin-bottom: 5px;
}

/* Defining dynamic — the plain-voiced opener. Its headline is a full
   sentence (not a poetic noun), so it sits a touch smaller than the old
   title while staying the largest text on the screen (opener > card
   headline 22 > body 18 > sounds-like). */
.bond-dynamic__title {
  font-family: "The Silver Editorial","Instrument Serif",Georgia,serif;
  font-size: 26px; line-height: 1.18; color: var(--parchment); margin: 0 0 10px; font-weight: 400;
  text-transform: capitalize; /* 7.9z3 — Title Case the opener headline */
}
.bond-dynamic__essence {
  font-family: "The Silver Editorial","Instrument Serif",Georgia,serif; font-style: italic;
  font-size: 17px; line-height: 1.5; color: var(--parchment); opacity: 0.8; margin: 0 0 16px;
}
.bond-octave { border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.bond-octave__tag {
  display: block; font-family: "Futura PT","Futura",sans-serif; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px;
}
.bond-octave p { font-family: "Futura PT","Futura",sans-serif; font-size: 18px; line-height: 1.55; margin: 0; color: var(--parchment); opacity: 0.9; }
.bond-octave--high { background: rgba(224,242,81,0.07); border: 1px solid rgba(224,242,81,0.22); }
.bond-octave--high .bond-octave__tag { color: var(--oracle); }
.bond-octave--low { background: rgba(217,138,138,0.07); border: 1px solid rgba(217,138,138,0.22); }
.bond-octave--low .bond-octave__tag { color: #d98a8a; }

/* HD connection tags. */
.bond-conn__tag {
  display: inline-block; font-family: "Futura PT","Futura",sans-serif; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  vertical-align: middle; margin-right: 6px; border: 1px solid currentColor;
}
.bond-conn__tag--electromagnetic { color: var(--oracle); }
.bond-conn__tag--companionship  { color: #8fc98f; }
.bond-conn__tag--dominance      { color: #d9b982; }
.bond-conn__tag--compromise     { color: #d9a58a; }
/* 7.9x — the "More between you" expander was removed; sections hard-cap at
   3 cards and don't render the overflow. (.bond-more-* deleted.) */

/* 7.9x/7.9z — Gene Keys attribution: a quiet factual credit at the BOTTOM
   of the Gene Keys tab (moved from the top in 7.9z). Fine print, muted
   gold, secondary-label treatment — sits below the sequence content
   without competing with it. */
.fc-gk-attribution {
  font-family: "Futura PT","Futura",sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--sa-gold); opacity: 0.62;
  margin: 24px 0 4px; font-style: italic;
}

/* 7.9z8 — peak-emotion invite prompt at the bottom of a Bond (one-tap
   native share). Warm, centered, gold pill in the medallion gradient. */
.bond-invite {
  text-align: center; margin-top: 22px; padding-top: 24px;
  border-top: 1px solid rgba(201,169,109,0.16);
}
.bond-invite__q {
  font-family: "The Silver Editorial","Instrument Serif",Georgia,serif; font-style: italic;
  font-size: 18px; line-height: 1.4; color: var(--parchment); opacity: 0.85; margin: 0 0 15px;
}
.bond-invite__btn {
  font-family: "Futura PT","Futura",sans-serif; font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.05em; color: var(--void); cursor: pointer;
  background: radial-gradient(circle at 30% 25%, #d9b982 0%, #a58351 45%, #715a37 100%);
  border: 1.5px solid var(--sa-gold); border-radius: 999px; padding: 12px 22px;
}
.bond-invite__btn span { margin-left: 4px; }

/* Privacy footer. */
.bond-privacy {
  font-family: "Futura PT","Futura",sans-serif; font-size: 13px; line-height: 1.6;
  color: var(--parchment); opacity: 0.55; text-align: center; margin: 26px auto 0; max-width: 40ch;
  padding-top: 22px; border-top: 1px solid rgba(201,169,109,0.16);
}

/* ── 7.9c — "Understand this person" block (added-person Overview) ──── */
.person-insight { margin-top: 30px; padding-top: 4px; }
.person-insight .bond-eyebrow { margin-bottom: 14px; }
.person-insight__card {
  border: 1px solid rgba(201,169,109,0.2);
  border-radius: 12px; background: rgba(14,12,11,0.72);
  padding: 15px 16px; margin-bottom: 11px;
}
.person-insight__heading {
  font-family: "The Silver Editorial","Instrument Serif",Georgia,serif;
  font-size: 19px; line-height: 1.2; color: var(--parchment); margin: 0 0 6px; font-weight: 400;
}
.person-insight__body {
  font-family: "Futura PT","Futura",sans-serif; font-size: 14.5px; line-height: 1.6;
  color: var(--parchment); opacity: 0.85; margin: 0;
}