/* ============================================
   Share cards on the open page: the card the app
   draws for a shared item, ported from the RN
   embed frames (frontend/OnePulse/src/shared/
   components/share/post/embeds and features/
   messaging/components/shareCards). The app is
   light-only; the dark rendering follows the
   site's theme.css dark tokens.
   ============================================ */

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/literata.ttf') format('truetype');
}

@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/literata-italic.ttf') format('truetype');
}

.handoff-copy.has-card { padding-top: 24px; }
.has-card .handoff-title { font-size: clamp(2.2rem, 9.5vw, 3rem); }

/* App tokens (shared/design-system/tokens/colors.ts) */
.e {
  --e-paper: #FAF8F3;      /* background.primary */
  --e-parchment: #F5F0E8;  /* background.secondary */
  --e-ground: #FFFFFF;     /* formationPalette.card, a stone's ground */
  --e-ink: #2C3135;        /* text.primary, also the reading identity */
  --e-slate: #727B81;      /* text.secondary */
  --e-stone: #8B8680;      /* text.tertiary */
  --e-pebble: #B5B0A8;     /* neutral.pebble */
  --e-pearl: #F5F2ED;      /* neutral.pearl, an avatar's ground */
  --e-linen: #E8E2D5;      /* border.light, trackEmpty */
  --e-rule: #F1EBDD;       /* border.rule */
  --e-keyline: #D9BE8C;    /* gold.keyline */
  --e-gold: #C4A572;       /* gold.accent */
  --e-gold-ink: #9A7B45;   /* gold.ink */
  --e-olive: #5C6B47;      /* primary.oliveBranch */
  --e-moss: #4A5D4F;       /* supporting.moss */
  --e-communion: #8B5A3C;  /* accent.communion */
  --e-blue: #4B5F6D;       /* primary.sanctuaryBlue */
  --e-frame: rgba(250, 248, 243, 0.55);
  --e-on-cloth: #F5F0E8;
  --e-cloth-place: var(--e-olive);
  --e-cloth-told: var(--e-gold-ink);
  --e-cloth-reading: var(--e-ink);
  --e-avatar: #5C6B47;
  --e-avatar-ink: #FFFFFF;
  --e-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  --e-serif: 'Literata', Georgia, serif;

  max-width: 342px;
  margin-top: 24px;
  font-family: var(--e-sans);
  font-size: 14px;
  line-height: normal;
  color: var(--e-ink);
  text-align: left;
  overflow-wrap: anywhere;
}

/* Cloth bands keep their light-mode pigments. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .e {
    --e-paper: #272B30;
    --e-parchment: #2E3338;
    --e-ground: #272B30;
    --e-ink: #F1ECE1;
    --e-slate: #B5B0A8;
    --e-stone: #9C978F;
    --e-pebble: #7A766F;
    --e-pearl: #3A3F45;
    --e-linen: #3A3F45;
    --e-rule: #33383E;
    --e-keyline: #75633F;
    --e-gold: #C4A572;
    --e-gold-ink: #D2B47F;
    --e-olive: #A9B894;
    --e-moss: #93AC98;
    --e-communion: #C9906E;
    --e-blue: #93AABB;
    --e-cloth-place: #5C6B47;
    --e-cloth-told: #9A7B45;
    --e-cloth-reading: #434A51;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .e { animation: e-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
}

@keyframes e-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.e svg { display: block; flex-shrink: 0; }
.e-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.e-one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-caps { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }

.e-card { background-color: var(--e-paper); border: 1px solid var(--e-linen); }
.e-dashed { border-style: dashed; }

/* EmbedEyebrow */
.e-eyebrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.e-dot { width: 5px; height: 5px; border-radius: 2.5px; flex-shrink: 0; }
.e-crown {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  line-height: 14px; color: var(--e-slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex-shrink: 1;
}
.e-crown.e-cat { flex-shrink: 1000000; margin-left: -1px; }
.e-trailing { line-height: 14px; color: var(--e-stone); margin-left: auto; flex-shrink: 0; white-space: nowrap; }

/* EmbedMiddle */
.e-title {
  font-family: var(--e-serif); font-size: 18.5px; line-height: 28px;
  color: var(--e-ink); margin-top: 4px; -webkit-line-clamp: 2;
}
.e-byline { line-height: 14px; color: var(--e-stone); margin-top: 1px; }
.e-desc { font-size: 13px; line-height: 19px; color: var(--e-slate); margin-top: 4px; -webkit-line-clamp: 2; }
.e-note {
  font-family: var(--e-serif); font-style: italic; font-size: 14px; line-height: 22px;
  color: var(--e-ink); margin-top: 6px; -webkit-line-clamp: 3;
}
.e-shape { margin-top: 13px; }

/* EmbedFoot + GoLink */
.e-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 16px; }
.e-foot-left { flex: 1; min-width: 0; font-size: 11.5px; line-height: 15px; color: var(--e-stone); }
.e-go { display: flex; align-items: center; gap: 4px; }
.e-action-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.e-action-left { flex-shrink: 1; min-width: 0; font-size: 11.5px; line-height: 15px; color: var(--e-stone); }
.e-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 12px; flex-shrink: 0;
  background-color: var(--e-paper); border: 1px solid var(--e-linen); border-radius: 4px;
}
.e-quiet span { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--e-ink); }

/* LedgerFrame */
.e-ledger { display: flex; border-radius: 14px; padding: 14px 16px 14px 0; }
.e-ledger.e-compact { border-radius: 12px; padding: 12px 12px 12px 0; }
.e-col {
  width: 78px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 2px 4px 0; border-right: 1px solid var(--e-linen);
}
.e-compact .e-col { width: 70px; }
.e-num { font-family: var(--e-serif); font-size: 30px; line-height: 32px; font-variant-numeric: tabular-nums; color: var(--e-ink); }
.e-unit {
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
  line-height: 13px; color: var(--e-stone); margin-top: 4px; text-align: center;
  -webkit-line-clamp: 2; overflow-wrap: normal;
}
.e-bar { width: 16px; height: 2px; border-radius: 1px; margin-top: 8px; }
.e-ledger-mark { margin-top: 3px; }
.e-body { flex: 1; min-width: 0; padding-left: 14px; }
.e-compact .e-body { padding-left: 12px; }

/* PlateFrame */
.e-plate { border-radius: 14px; padding: 5px; }
.e-keyline { border: 1px solid var(--e-keyline); border-radius: 9px; padding: 11px 14px 0; }
.e-plate-mid {
  display: flex; flex-direction: column; align-items: center;
  border-top: 1px solid var(--e-rule); margin-top: 10px; padding: 16px 4px;
}
.e-plate .e-title { font-size: 20px; line-height: 30px; margin-top: 0; text-align: center; }
.e-plate .e-byline { align-self: stretch; margin-top: 0; text-align: center; }
.e-plate .e-desc { max-width: 250px; text-align: center; }
.e-plate .e-note { max-width: 250px; text-align: center; }
.e-plate .e-shape { align-self: center; width: 100%; max-width: 250px; margin-top: 14px; }
.e-plate .e-foot { margin-top: 0; border-top: 1px solid var(--e-rule); min-height: 40px; }

/* BoundFrame (binding) */
.e-bound { border-radius: 16px; overflow: hidden; }
.e-bound.e-compact { border-radius: 14px; }
.e-band-wrap { position: relative; z-index: 1; }
.e-band { position: relative; height: 88px; overflow: hidden; }
.e-band.e-spine { height: 52px; }
.e-compact .e-band.e-spine { height: 40px; }
.e-band.e-art { height: 132px; background-color: var(--e-linen); }
.e-compact .e-band.e-art { height: 96px; }
.e-art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.e-frame { position: absolute; inset: 7px; border: 1px solid var(--e-frame); border-radius: 9px; }
.e-fig { position: absolute; right: 20px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-end; }
.e-fig-num { font-family: var(--e-serif); font-size: 40px; line-height: 40px; font-variant-numeric: tabular-nums; color: var(--e-on-cloth); text-align: right; }
.e-fig-unit {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
  line-height: 13px; margin-top: 4px; color: var(--e-on-cloth); opacity: 0.85; text-align: right;
}
.e-tab {
  position: absolute; right: 15px; bottom: 15px;
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 10px 5px; border-radius: 7px; background-color: #FAF8F3;
}
.e-tab-num { font-family: var(--e-serif); font-size: 21px; line-height: 24px; font-variant-numeric: tabular-nums; color: #2C3135; }
.e-tab-label { line-height: 14px; color: #8B8680; }
.e-ring {
  position: absolute; left: 15px; bottom: -23px;
  width: 46px; height: 46px; border-radius: 23px; padding: 1px;
  background-color: var(--e-linen);
}
.e-mark {
  width: 44px; height: 44px; border-radius: 22px; overflow: hidden;
  border: 3px solid var(--e-paper); background-color: var(--e-paper);
  display: flex; align-items: center; justify-content: center;
}
.e-bound-body { padding: 10px 16px 14px; }
.e-bound-body.e-plain { padding-top: 13px; }
.e-compact .e-bound-body { padding: 10px 12px 12px; }
.e-marked { padding-left: 56px; min-height: 14px; }
.e-bound .e-title { font-size: 19px; line-height: 29px; margin-top: 14px; }
.e-bound .e-plain .e-title { margin-top: 6px; }
.e-bound.e-compact .e-title { font-size: 17.5px; line-height: 26px; }
.e-kind-row { display: flex; align-items: center; gap: 5px; }
.e-kind-row > div { flex: 1; min-width: 0; }
.e-handle { font-size: 13px; line-height: 17px; color: var(--e-stone); margin-top: 1px; }
.e-handle-row { display: flex; align-items: center; gap: 4px; }
.e-handle-row .e-handle { margin-top: 0; min-width: 0; }

.e-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.e-tappable:active { transform: scale(0.985); }

/* OpenFrame */
.e-open { border-radius: 14px; padding: 14px 16px; }
.e-open.e-compact { border-radius: 12px; padding: 12px; }
.e-head { display: flex; align-items: center; gap: 10px; }
.e-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.e-head-text .e-byline { margin-top: 0; }
.e-open .e-head + .e-title { margin-top: 8px; }
.e-gone { font-family: var(--e-serif); font-style: italic; font-size: 14px; line-height: 22px; color: var(--e-stone); margin-top: 6px; }
.e-gone.e-alone { margin-top: 0; }

/* Avatar (picture, or initials when there is none) */
.e-av {
  flex-shrink: 0; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--e-avatar); color: var(--e-avatar-ink); font-weight: 600;
}
.e-av.e-pic { background-color: var(--e-pearl); }
.e-av img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ProfileShareCard */
.e-who { display: flex; align-items: center; gap: 12px; }
.e-who-words { flex: 1; min-width: 0; }
.e-name { font-family: var(--e-serif); font-size: 17.5px; line-height: 26px; color: var(--e-ink); }
.e-bio { margin-top: 10px; }

/* Formation shapes */
.e-track { position: relative; height: 1px; margin: 8px 1px 0; background-color: var(--e-linen); }
.e-track-fill { position: absolute; left: 0; top: -0.5px; height: 2px; border-radius: 1px; }
.e-track-pos { position: absolute; top: -3px; width: 7px; height: 7px; background-color: var(--e-gold); transform: translateX(-3.5px) rotate(45deg); }
.e-track-cap { position: absolute; right: 0; top: -4px; width: 8px; height: 8px; transform: rotate(45deg); }
.e-track-cap.e-ahead { border: 1.25px solid var(--e-gold); }
.e-track-cap.e-reached { background-color: var(--e-gold); }

.e-meter { display: flex; gap: 6px; }
.e-meter-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.e-meter-bar { width: 2.5px; height: 13px; border-radius: 1px; background-color: var(--e-linen); }
.e-meter-letter { color: var(--e-pebble); }

.e-stones { display: flex; align-items: center; padding: 0 1px; }
.e-stones.e-lone { justify-content: center; }
.e-stone { width: 9px; height: 9px; border-radius: 4.5px; border: 1.5px solid var(--e-olive); background-color: var(--e-ground); flex-shrink: 0; }
.e-seg { flex: 1; height: 1px; background-color: var(--e-linen); }

.e-beads { position: relative; display: flex; align-items: flex-start; }
.e-bead-string { position: absolute; top: 3px; left: 10%; right: 10%; height: 1px; background-color: var(--e-linen); }
.e-bead { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.e-bead-mark { position: relative; width: 7px; height: 7px; border-radius: 3.5px; border: 1px solid var(--e-blue); background-color: var(--e-paper); }
.e-bead-name { max-width: 100%; font-size: 11px; font-weight: 600; color: var(--e-pebble); }

.e-order { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; row-gap: 6px; }
.e-order-move { display: flex; align-items: center; gap: 3px; flex-shrink: 1; min-width: 0; }
.e-order-name { color: var(--e-stone); }
.e-order-span { font-size: 11px; font-weight: 600; color: var(--e-pebble); }
.e-order-arrow { font-size: 11px; color: var(--e-gold); }
.e-order-rest { color: var(--e-pebble); text-align: center; margin-top: 6px; }

.e-pages { display: flex; align-items: center; gap: 4px; }
.e-slot { flex: 1; height: 16px; border-radius: 3px; border: 1.5px solid transparent; display: flex; flex-direction: column; justify-content: center; }
.e-page { height: 7px; border-radius: 1px; margin: 0 1.5px; border: 1px solid var(--e-ink); }

/* EmbeddedPost (the quote-repost card) */
.e-quote { padding: 12px; border: 1px solid var(--e-linen); border-radius: 12px; background-color: var(--e-parchment); }
.e-quote-head { display: flex; align-items: center; margin-bottom: 8px; }
.e-quote-info { flex: 1; min-width: 0; margin-left: 8px; }
.e-quote-name { font-size: 14px; font-weight: 600; color: var(--e-ink); }
.e-quote-text { font-size: 14px; line-height: 22.75px; color: var(--e-ink); -webkit-line-clamp: 4; white-space: pre-line; }
.e-quote-media { position: relative; height: 120px; margin-top: 8px; border-radius: 8px; overflow: hidden; background-color: var(--e-linen); }
.e-quote-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.e-quote-gone {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; border: 1px dashed var(--e-linen); border-radius: 12px; background-color: var(--e-parchment);
}
.e-quote-gone p { font-size: 14px; font-style: italic; color: var(--e-stone); }

/* ScripturePassage */
.e-set { display: flex; flex-direction: column; gap: 16px; }
.e-passage { display: flex; align-items: flex-start; gap: 8px; border-left: 2px solid var(--e-gold); padding: 1px 0 1px 14px; }
.e-passage-body { flex: 1; min-width: 0; }
.e-words { font-family: var(--e-serif); font-style: italic; font-size: 16.5px; line-height: 26px; color: var(--e-ink); -webkit-line-clamp: 6; }
.e-figure { font-family: var(--e-serif); font-style: normal; font-size: 11px; color: var(--e-gold-ink); }
.e-passage .e-foot { margin-top: 9px; }
.e-passage .e-foot.e-alone { margin-top: 0; }
.e-ref { flex: 1; min-width: 0; line-height: 14px; color: var(--e-ink); }
.e-ref .e-tr { color: var(--e-stone); }