/* ===========================================================================
   PH-1 — the pending home page (public/pending-home.html)
   ===========================================================================
   A static page with no JavaScript. It loads only
   tokens.css, the three Burrow font sheets and this file, so every value below
   is a canonical token (docs/design-system.md) or a deliberate literal noted
   beside it. It does NOT link bb-public.css: that sheet belongs to the real home
   deck, and this page must neither depend on it nor change it.

   Layout: one white card centred on the page background, with Patch peeking
   over its top edge, and the copyright line at the foot of the viewport.
   Desktop is the reference; at phone width (≤900px, the public breakpoint) the
   card fills the width and the contact line and Login stack.
   =========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.ph {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-base-2);
  color: var(--color-base-17);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: var(--tracking-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* :where() keeps this reset at zero specificity, so a component's own margin
   (.ph-lede's auto centring) always wins over it. */
.ph :where(p, h1) { margin: 0; }

.ph-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-2) var(--space-2);
}

/* The stage holds Patch and the card as siblings, so the card (later in the
   DOM, positioned) paints OVER the bottom of his image: he reads as peeking
   from behind the card's top edge rather than sitting on it. */
.ph-stage {
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* mascot-peeking.png is 256×256 with his face cut flat at the bottom edge.
   The negative margin tucks the last few pixels of that edge behind the card. */
.ph-patch {
  display: block;
  width: 8rem;
  height: auto;
  margin-bottom: -0.5rem;
  user-select: none;
  -webkit-user-drag: none;
}

/* A raised surface: white on base-2, the 1px base-5 shadow ring (LAW 1). */
.ph-card {
  position: relative;
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--outline-default);
  padding: var(--space-3) var(--space-3) var(--space-2-5);
  text-align: center;
}

.ph-heading { margin: 0 0 var(--space-1-5); }

.ph-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.125rem, 1.25rem + 4.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-title);
  color: var(--color-base-20);
}

/* "Coming Soon" in the handwriting face, sized through the platform's one
   script lever (--script-size-scale) like every other script rule. Burrow
   Script ships 400 and 700 only, so 700 is written as the face it renders. */
.ph-sub {
  margin-top: var(--space-0-5);
  font-family: var(--font-writing);
  font-weight: 700;
  font-size: calc(2.2rem * var(--script-size-scale));
  line-height: 1.45;
  letter-spacing: var(--tracking-writing);
  color: var(--color-blue-16);
}

.ph-lede {
  max-width: 28rem;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-base-17);
  text-wrap: balance;
}

/* The card's foot: a hairline, then the contact line and Login side by side. */
.ph-actions {
  margin-top: var(--space-2-5);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-base-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  text-align: left;
}

.ph-contact {
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-base-13);
  overflow-wrap: anywhere;
}

.ph-mail {
  color: var(--color-base-14);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-base-5);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: var(--radius-sm);
  transition: color var(--motion-fast) var(--ease-out),
              text-decoration-color var(--motion-fast) var(--ease-out);
}
.ph-mail:hover {
  color: var(--color-base-16);
  text-decoration-color: var(--color-base-14);
}

/* Login — the public-world button standard (app/components/ds/README.md), re-expressed
   here because the page loads no bb-public.css: .bb-btn + .bb-btn-primary's fill,
   type and padding, and THE platform press — scale(0.9) over 300ms --ease-calm, the
   same literal values bb-public.css and ds-tokens.css carry. Keep them in step. */
.ph-login {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: var(--tracking-body);
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-white);
  background: var(--color-base-14);
  border-radius: var(--radius-pill);
  padding: 0.9rem 1.6rem;
  transition: background var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              transform 300ms var(--ease-calm);
}
.ph-login:hover { background: var(--color-base-16); }
.ph-login:active { transform: scale(0.9); }

.ph-mail:focus-visible,
.ph-login:focus-visible {
  outline: 2px solid var(--color-blue-16);
  outline-offset: 3px;
}

.ph-foot {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2) var(--space-2);
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-base-13);
}

/* Phone web (the public pages' breakpoint). */
@media (max-width: 900px) {
  .ph-main { padding: var(--space-3) var(--space-1) var(--space-1-5); }
  .ph-patch { width: 6.5rem; }
  .ph-card { padding: var(--space-2-5) var(--space-1-5) var(--space-1-5); }
  .ph-lede { font-size: 1.0625rem; }
  .ph-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1-25);
    padding-top: var(--space-1-5);
    margin-top: var(--space-2);
    text-align: center;
  }
  .ph-login { width: 100%; }
}

/* The page has no animation; the press and the colour fades are its only motion. */
@media (prefers-reduced-motion: reduce) {
  .ph-mail,
  .ph-login { transition: none; }
  .ph-login:active { transform: none; }
}