/* ============================================================
   wish.css — THE canonical Wish component.

   Single source of the Wish's VISUAL IDENTITY. Every surface a
   Wish appears on (homepage aquarium, /wishwall, the OBS overlay,
   the SSR /wish/:id page, the creation ceremony) renders THIS
   component and only varies its presentation via a `--variant`
   modifier. The markup is produced by the shared builder
   `wish-anatomy.js` (one anatomy, both runtimes).

   ── The locked visual identity (owner, 2026-07-20) ──
   • Voice dominant — the wish text is the emotional centre.
   • Serial ≈ Coordinate — EQUAL peer stamps, one ledger hand;
     the "spine" (Principle 5): always paired, styled identically,
     neither dominates the other or the voice.
   • Signature subordinate.
   • Three hands (typeface = meaning):
       ledger  → IBM Plex Mono, gold   → serial + coordinate
       human   → Playfair italic, cream, quoted → the voice
       signing → Barlow                → the name
   • Badge is a SLOT; the occupant (Founding, future tiers) is NOT
     anatomy — the caller fills `.wish__badge`.

   Ratios are fixed, expressed in `em` of ONE scale knob
   (`--wish-s`, = the voice size). Absolute scale is the only
   per-surface size variable. Surface CHROME (eyebrows, share rows,
   CTAs, owner actions, hairlines, materials, motion) lives in the
   surface stylesheets, AROUND this component — never in here.

   SELF-CONTAINED PALETTE: the brand tokens are scoped to `.wish`
   so the component renders correctly even on surfaces that do NOT
   load styles.css (notably the OBS overlay, which loads only
   wish-card.css / wish-overlay.css). Values mirror styles.css
   :root — keep them in sync if the brand palette ever changes.
   ============================================================ */

.wish {
  /* component-scoped palette → portable to token-less surfaces */
  --gold: #D4A843;
  --gold-hi: #ECC057;
  --gold-lo: #7A5E20;
  --cream: #EEE7D8;
  --cream-60: rgba(238, 231, 216, .60);
  --cream-masked: rgba(238, 231, 216, .32);

  /* the one scale knob — the voice size; every part is em of this */
  --wish-s: 16px;

  /* the three hands */
  --wish-voice: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --wish-stamp: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wish-sign: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* NB: no `position` on the base component — the aquarium slip is positioned
     absolute by its consumers (aquarium.css / wish-overlay.css); only
     .wish--page opts into position:relative (for its ghost watermark). */
  display: flex;
  flex-direction: column;
  font-size: var(--wish-s);
}

/* ── Top: the serial stamp + the badge slot ─────────────── */
.wish__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6em;
}
.wish__serial {
  font-family: var(--wish-stamp);
  font-size: .56em;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The slot only sizes/positions the occupant; badges.js (client) or
   the SSR badge string (edge) provides the mark itself. */
.wish__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .35em;
}

/* ── The voice: the human hand, quoted, dominant ────────── */
.wish__voice {
  font-family: var(--wish-voice);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;               /* the reference — everything else is a ratio of this */
  line-height: 1.42;
  color: var(--cream);
  margin: .75em 0 .7em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.wish__voice::before { content: '\201C'; }
.wish__voice::after  { content: '\201D'; }
/* PRIVATE state: the words are sealed to the one masked label, dimmed. */
.wish--masked .wish__voice { color: var(--cream-masked); }

/* ── Foot: the signature (subordinate) + the coordinate stamp ── */
.wish__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .9em;
}
/* The foot's LEFT cell — the author slot (signature + optional minted
   date). Always present (even empty) so `space-between` keeps the
   coordinate right-anchored and the composition never shifts with the
   presence/absence of an author. `min-width: 0` lets a long signature
   wrap instead of forcing overflow / pushing the coordinate. */
.wish__foot-l { min-width: 0; }
.wish__sign {
  font-family: var(--wish-sign);
  font-weight: 500;
  font-size: .56em;
  color: var(--cream-60);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.wish__date {
  display: block;                /* its own line, beneath the signature */
  font-family: var(--wish-stamp);
  font-size: .40em;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lo);
  margin-top: .5em;
}

/* The coordinate — the spine's second stamp, PEER of the serial.
   Its value (ledger hand, gold) is the invariant; the label is a
   full-fidelity flourish the compact variants omit (builder decides
   via showCoordLabel). `.wish__coord` right-aligns in the foot row. */
.wish__coord { text-align: right; }
.wish__coord-lbl {
  font-family: var(--wish-stamp);
  font-size: .35em;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lo);
  line-height: 1.3;
}
.wish__coord-v {
  font-family: var(--wish-stamp);
  font-size: .60em;              /* ≈ the serial's .56em — peer stamps */
  font-weight: 600;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  margin-top: .2em;
}

/* Faint mascot presence — full-fidelity surfaces position it via chrome. */
.wish__ghost {
  position: absolute;
  pointer-events: none;
  opacity: .05;
}

/* ════════════════════════════════════════════════════════════
   VARIANTS — scale + arrangement only. Everything above is the
   invariant object; below is how each surface presents it. Surface
   CHROME (materials, motion, hairlines, eyebrows, actions) is added
   by the surface's own stylesheet around this component.
   ════════════════════════════════════════════════════════════ */

/* The record, browsable — the resting card. */
.wish--wall { --wish-s: 17px; }
/* WishWall is an EQUAL-HEIGHT card grid (the grid/flex cells stretch to the
   tallest card in the row). Make every wall card a flex column — reasserting
   the component's own layout against the anchor variant's `display:block`
   reset in styles.css (`.wish.wish--wall` (0,2,0) outranks `a.wish--wall`
   (0,1,1) regardless of load order) — and pin the foot to the bottom of the
   card. So the author + net worth sit on the card's bottom edge no matter how
   much wish text is above: short and long wishes align, and the footer never
   floats mid-card. Wall-only: the page/slip/keepsake are sized to their
   content, so they have no leftover height and need no pin. Mirrors the
   variant foot-arrangement pattern already used by `.wish--mine .wish__foot`
   below. (2026-07-20) */
.wish.wish--wall { display: flex; flex-direction: column; }
.wish--wall .wish__foot { margin-top: auto; }

/* The aquarium/OBS slip — small, in motion (material + drop live in
   wish-card.css). The voice clamp for motion legibility is applied by
   the slip surface, not here. */
.wish--slip { --wish-s: 15px; }

/* The permanent home — full-fidelity artifact (page chrome in wishes.css).
   position:relative so the page's .wp-ghost watermark sits BEHIND the anatomy
   (the anatomy is a positioned sibling, painting above the absolute ghost). */
.wish--page { --wish-s: 26px; position: relative; }

/* The keepsake — the owner's confirmation (owner affordances in styles.css).
   Canonical layout, surface SCALE only: the owner sees the EXACT artifact the
   wall and /wish page render — one wish, one visual identity everywhere. The
   former centred, stacked-foot treatment was retired 2026-07-20; the receipt's
   own centred chrome (eyebrow, Vault line) still lives around it in styles.css,
   while the wish itself now left-aligns with the two-column foot like every
   other surface. */
.wish--mine { --wish-s: 22px; }