/* ─────────────────────────────────────────────────────────────
   foundation.css — the shared layer under every direction
   (Estefanía, 08-14: one floor so no prototype is less polished
   than another. FOUNDATIONS.md is the contract; this file is the
   pieces.)

   Load order in every direction:
     tokens.css → foundation.css → skin-<direction>.css
   tokens.css stays read-only (D10). Directions override foundation
   values in their skin, never by editing this file: a change here
   lands on every branch at its next foundation merge.

   What lives here, per the 08-14 call:
   · the card BOX — width/height/stretch logic; content is the
     direction's own
   · the suggestion chip, the "anything else" item, the composer
     field, the gradient CTA, the icon button, the wordmark
   · the visual-viewport variables (JS half in fenn-ui.js) and the
     reduced-motion kill switch
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

:root {
  /* ── visual viewport (fenn-ui.js keeps these live) ─────────
     iOS lays pages against the layout viewport and paints chrome
     and keyboard over the bottom; anything anchored bottom:0 can
     land under either. Anchor to these instead. */
  --vvh: 100svh;      /* visible height */
  --vv-top: 0px;      /* how far iOS has panned the viewport down */
  --vv-bottom: 0px;   /* height of the chrome covering the bottom */
  --stage-safe-b: env(safe-area-inset-bottom);

  /* Support ink: the library's --text-tertiary is 2.1:1 on #f2f2f2.
     Anything a visitor must read to proceed wears this instead. */
  --ink-support: rgba(0, 0, 0, 0.58);

  /* ── the card box (D18) ────────────────────────────────────
     One box for the plan card wherever it appears — sender, share
     screen, receiver — in any direction. Content differs; the
     object's size does not. The vh term keeps small phones solved;
     the ceiling keeps tall phones from parking the CTA high. */
  --card-w: 354px;
  --card-h: clamp(360px, 56vh, 560px);
  --card-gap: clamp(20px, 6.4vh, 58px);
  --gap-line-card: 16px;
  --gap-card-cta: 22px;
  --gap-cta-foot: 12px;
  --cta-h: 51px;
  --page-pad-x: 22px;

  /* The host over the card, where a direction shows one. */
  --host-char: 65px;
  --line-size: 18px;
  --line-lh: 22px;
}
:root.kb { --stage-safe-b: 0px; }

/* ── the suggestion chip ─────────────────────────────────────
   Sits in a wrapping flex row; the container's layout is the
   direction's. Text never wraps — narrow stages slim the chip
   (tier below) rather than folding its label. */
.chip-lg {
  flex: 1 0 auto;
  padding: 16px 20px;
  border-radius: var(--radius-button-md);
  background: linear-gradient(to bottom, var(--surface-raised), var(--surface-primary));
  border: 1px solid var(--surface-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: var(--body-md-size);
  line-height: 19px;
  font-weight: 510;
  color: var(--text-primary);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out);
}
.chip-lg:active { transform: scale(0.95); }
@media (max-width: 380px) {
  .chip-lg { padding: 13px 14px; font-size: var(--body-sm-size); line-height: 17px; }
}
@media (max-height: 740px) {
  .chip-lg { padding: 13px 16px; font-size: var(--body-sm-size); line-height: 17px; }
}

/* ── "anything else" — the open door under the chips (D1) ──── */
.anything {
  width: 100%;
  padding: 16px 24px;
  border-radius: var(--radius-button-md);
  font-size: var(--body-md-size);
  line-height: 19px;
  font-weight: 510;
  color: var(--text-primary);
  transition: transform var(--dur-fast) var(--ease-out);
}
.anything:active { transform: scale(0.97); }

/* ── the composer field ───────────────────────────────────── */
.fieldrow { padding: 0 16px; }
.field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: var(--radius-button-md);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 7px 8px rgba(0, 0, 0, 0.05);
}
.field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 8px 4px 8px 12px;
  font-size: var(--body-md-size);
  line-height: 19px;
  font-weight: 510;
  caret-color: var(--accent);
}
.field input:focus { outline: none; }
.field input::placeholder { color: var(--ink-support); }
.send {
  flex: 0 0 auto;
  display: grid; place-items: center;
  min-width: 44px; min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--radius-button-sm, 12px);
  background: var(--gradient-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 5px 10px rgba(80, 177, 249, 0.3);
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-base) linear, opacity var(--dur-base) linear;
  /* Dormant until there's something to send — a full-colour button
     that swallows the tap reads as broken. */
  filter: grayscale(1);
  opacity: 0.45;
}
.send.ready { filter: none; opacity: 1; }
.send:active { transform: scale(0.93); }
.send img { width: 17px; height: 18px; display: block; }

/* ── the gradient door (share / open / primary CTA) ────────── */
.share-cta {
  flex: 1 1 auto;
  max-width: 254px;
  padding: 16px 36px;
  border-radius: var(--radius-button-md);
  background: var(--gradient-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 5px 20px rgba(80, 177, 249, 0.3);
  color: var(--text-inverted);
  font-size: var(--body-md-size);
  line-height: 19px;
  font-weight: var(--body-weight-bold);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) linear;
}
.share-cta:active { transform: scale(0.97); filter: brightness(0.94); }

/* ── the icon button — 44px everywhere, no exceptions ──────── */
.icon-btn {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-button-sm, 12px);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) linear;
}
.icon-btn:active { transform: scale(0.9); background: #f2f2f2; }
.icon-btn img { width: 24px; height: 24px; display: block; }

/* ── the wordmark ────────────────────────────────────────────
   Mark + name, one treatment. Markup (the mark is the character
   body, inline so tokens can paint it):

     <span class="wordmark"><svg viewBox="21 9.5 61.5 66.5" ...
       (body-fill / body-line / pupil paths)</svg><span>fenn</span></span>
*/
.wordmark { display: inline-flex; align-items: center; gap: 7px; }
.wordmark svg { width: 21px; aspect-ratio: 61.5 / 66.5; height: auto; display: block; overflow: visible; }
.wordmark .body-fill { fill: var(--surface-raised); }
.wordmark .body-line { fill: none; stroke: var(--brand-black); }
.wordmark .pupil { fill: var(--brand-black); }
.wordmark > span { font-size: var(--h6-size); font-weight: var(--h6-weight); }