/* apex.css — the few rules only the apex pages need: Zoe's "Coming soon" label, the floating
   bubble that stands in for her assistant, and room at the foot of the page for that bubble.

   It is its own file, not an edit to core.css or tokens.css, on purpose. build-holding.js copies
   those two byte for byte into holding/assets/ (and /start/ loads them), so changing either
   forces a change in a folder another session owns and restyles the intake form. This file reads
   the semantic tokens only, so it follows the apex skin and carries no colour of its own (the one
   exception is the print block at the end, which names the two primitives white and n900).

   Loaded after core.css and the two themes by index.html, getting-here.html and contact.html.
   Layout rules here use min-width only, like the rest of the system. */


/* --- room for the bubble ------------------------------------------------ */
/* The bubble is position: fixed, so it can sit over whatever scrolls beneath it. Two things keep
   that from hiding anything a visitor needs:
   - scroll-padding-bottom makes the browser leave this much room under a control it scrolls into
     view, so a focused link is never wholly behind the bubble (WCAG 2.2 SC 2.4.11, the same
     failure the lounge's sticky header had, mirrored to the bottom edge);
   - the footer carries extra bottom padding, so at the very end of the page its last line (the
     StratosDigital.ai credit) clears the bubble instead of sitting under it. */
html { scroll-padding-bottom: 6rem; }

.c-footer { padding-bottom: calc(var(--sp-7) + 5rem); }


/* --- footer links ---------------------------------------------------------- */
/* The footer's links are lines of a list, not words inside a sentence, so each one is a target and
   takes the repository's 44px floor (AGENTS.md). core.css gives `.c-footer a` only a colour; the
   credit link (.powered) already carries its own 44px. min-width as well as min-height, so a short
   word such as "Terms" is not a narrow strip. */
.c-footer a:not(.powered) {
  display: inline-flex;
  align-items: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
}


/* --- the hero's watermark ------------------------------------------------ */
/* The big pale "801" beside the heading is decoration. Beside the text it fills the right of a wide
   hero; on a phone it would drop under the text as a block of empty space, and this page is meant
   to be short. */
.c-hero__watermark { display: none; }
@media (min-width: 768px) {
  .c-hero__watermark { display: block; }
}


/* --- "Coming soon" ------------------------------------------------------- */
/* On the home page her card sits alone in its section. Left at the wrap's full width it
   stretches into a thin strip of text with empty space beside it, so it stops at a reading
   width. */
.c-assistant--soon { max-width: 46rem; }

/* The status under Zoe's name on her card. Light text on the inverse surface: white on n900 is
   16.59:1 in the apex skin (tokens.css). */
.c-assistant__status { margin-top: var(--sp-2); }

.c-assistant__soon {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--sp-5);
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}


/* --- the floating bubble ------------------------------------------------- */
/* A link, not a chat: nothing answers yet, so it goes to her card, and its label says so.
   Bottom right, clear of the iOS home bar and of a notch in landscape (the env() terms).
   The picture sits on the same oxblood disc as her card, with a surface-coloured ring so the
   disc reads on the light page and on the dark footer alike. The label is a dark pill with a
   surface-coloured edge for the same reason. */
.c-zoe-bubble {
  position: fixed;
  inset-inline-end: max(var(--sp-4), env(safe-area-inset-right));
  inset-block-end: max(var(--sp-4), env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: calc(100vw - var(--sp-5));
  text-decoration: none;
}

.c-zoe-bubble__pic {
  flex: none;
  width: 4rem;
  height: 4rem;
  border: var(--bw-thick) solid var(--surface);
  border-radius: 50%;
  background-color: var(--accent);
  object-fit: cover;
  box-shadow: 0 var(--sp-1) var(--sp-3) var(--border-control);
}

/* On a phone the label tucks under the circle like a ribbon, so the bubble is about as wide
   as the label and does not cover half a thumb-width of the page; from 480px up the label sits
   beside the circle. */
.c-zoe-bubble__tag {
  margin-top: calc(var(--sp-3) * -1);
  padding: var(--sp-1) var(--sp-3);
  border: var(--bw-thick) solid var(--surface);
  border-radius: var(--sp-5);
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  font-size: var(--fs--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  box-shadow: 0 var(--sp-1) var(--sp-3) var(--border-control);
}

@media (min-width: 480px) {
  .c-zoe-bubble { flex-direction: row-reverse; align-items: center; gap: var(--sp-3); }
  .c-zoe-bubble__tag { margin-top: 0; padding: var(--sp-2) var(--sp-4); }
}

.c-zoe-bubble:hover .c-zoe-bubble__tag {
  background-color: var(--accent);
  color: var(--on-accent);
}

/* Two rings, one inside the other: the surface-coloured one shows on the dark footer, the
   focus-coloured one on the light page, so the ring is visible wherever the bubble is. */
.c-zoe-bubble:focus-visible {
  outline: var(--bw-focus) solid var(--surface);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--bw-focus) + var(--focus-offset) + var(--bw-focus)) var(--focus-ring);
  border-radius: var(--sp-6);
}

/* --- print ----------------------------------------------------------------- */
/* Paper has no use for a floating link, so the bubble goes.

   A printer that drops backgrounds (the default) keeps the colour of every piece of text, so a dark
   surface keeps its light text and loses the fill it sat on: the footer printed white on white
   (1.00:1) and the lounge's themed blocks cream on white (1.16:1). So those dark surfaces go onto
   paper: the footer and every lounge-themed block get a white ground, dark ink, and the same ink in
   each token their children read, so links, captions and the credit line follow without a rule of
   their own. The primary button and the "Coming soon" label are the other two fills; each takes
   dark ink and a dark edge, which reads with background graphics on or off.

   The ink and the paper are the two primitives white and n900, not semantic tokens: in a dark
   block the semantic tokens are the light ones, and they are what is being undone. */
@media print {
  .c-zoe-bubble { display: none; }

  .c-footer,
  [data-theme="lounge"] {
    --surface: var(--c-white);
    --surface-raised: var(--c-white);
    --surface-sunken: var(--c-white);
    --surface-inverse: var(--c-white);
    --text: var(--c-n900);
    --text-muted: var(--c-n900);
    --text-on-inverse: var(--c-n900);
    --text-muted-on-inverse: var(--c-n900);
    --accent: var(--c-n900);
    --accent-hover: var(--c-n900);
    --accent-on-inverse: var(--c-n900);
    background-color: var(--c-white);
    color: var(--c-n900);
  }

  .c-btn.c-btn--primary,
  .c-assistant__soon {
    background-color: transparent;
    color: var(--c-n900);
    border: var(--bw-thick) solid var(--c-n900);
  }
}