/* The front door, and the one page that wears the brand.
 *
 * Its own tokens, like every other page here — this repo has no shared
 * stylesheet on purpose. The planner inside is cool grey and lets only amber
 * and magenta speak; the door is where the pink baboon lives, so its paper is
 * a pale pink, its rule is the baboon's own hot pink, and its ink is the
 * baboon's aubergine outline (tools/make-mark.js, PALETTE). The file is
 * separate so the planner's payload stays exactly what it was: it is opened at
 * airports on bad connections and loads no webfonts for that reason. This page
 * loads none either, and the mark is the favicon, one request already made.
 *
 * The one structural quotation is the seam: a 3px rule with the name set large
 * beneath it, which is how each year opens in the planner itself.
 */

:root {
  --paper:   #fff4f9;
  --glow:    #ffd6ea;
  --ink:     #1a1024;
  --slate:   #6d5a68;
  --rule:    #f3c6dd;
  --pink:    #ff2d95;
  --pending: #9a6400;   /* needs a decision — the same meaning it has inside */

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #170d16;
    --glow:    #3a1a31;
    --ink:     #f7e9f1;
    --slate:   #b79cad;
    --rule:    #3d2437;
    --pink:    #ff5fb0;
    --pending: #d69a3c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* A soft glow rising from the corner the mark sits in, and nothing else:
     one gradient, no image, no request. */
  background: radial-gradient(60vmax 60vmax at 18% 8%, var(--glow), transparent 70%) var(--paper);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* The pointer is a pointer. Text cursors belong on text you can edit. */
  cursor: default;
}

/* Centred in the viewport, left-aligned within itself. Centred text is the
   default every login page reaches for; this product left-aligns everything,
   and the door should not be the one screen that does not. */
.door {
  min-height: 100dvh;
  display: grid;
  /* An explicit track, not `place-content: center`. With no track the column is
     sized to its content, so every child ends up a different width — the
     refusal panel came out 28px narrower than the button under it, which is
     exactly the kind of thing that looks like a rendering bug rather than a
     design. One track, one width, everything flush. */
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
  align-content: center;
  padding: 32px 24px;
}

/* The mark: the favicon at 144px, which on the web is the baboon's head alone.
   The tile the model drew around it is stripped for the page
   (tools/make-mark.js --strip) and kept only for the phone, where an icon
   wants a ground; here the head sits straight on the paper with a soft pink
   shadow, since it is the one object on the page. */
.door .mark {
  width: 144px;
  height: 144px;
  margin: 0 0 22px -8px;
  filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--pink) 45%, transparent));
}
.door .mark img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The seam. In the planner this rule means "a year begins here"; here it means
   the same thing one level up, and it is the baboon's pink. */
.door h1 {
  margin: 0;
  padding-top: 16px;
  border-top: 3px solid var(--pink);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

/* No max-width here. `.door p` also matches the refusal panel, so a reading
   measure set on the element selector silently clamped a *box* — the panel came
   out 80px shorter than the button beneath it. The column is already a good
   measure at 380px, so the track does that job and every edge lines up. */
.door p {
  margin: 14px 0 0;
  color: var(--slate);
}

.door form { margin: 28px 0 0; }

/* What went wrong, and what to do about it. Amber, because amber already means
   "this needs a decision from you" everywhere else in this product. */
/* `.door .refused`, not `.refused`: the panel is a <p>, so `.door p` above it
   scores (0,1,1) and a bare class scores (0,1,0) — the element selector won and
   silently replaced this margin with its own, leaving the panel sitting flush
   against the button. Measured at 0.0px before this. */
.door .refused {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--pending);
  background: color-mix(in srgb, var(--pending) 9%, transparent);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.door footer {
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: 13px;
  line-height: 1.6;
}

/* ── The legal pages ─────────────────────────────────────────────────────
 *
 * /privacy and /terms: a reading column on the door's paper, set in the same
 * type. Public and unlinked; Google's OAuth branding points at them. */
.legal {
  max-width: 68ch;
  margin: 0 auto;
  padding: 56px 24px 72px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}
.legal h1 {
  margin: 0;
  padding-top: 16px;
  border-top: 3px solid var(--pink);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.legal .when { margin: 10px 0 28px; color: var(--slate); font-size: 14px; }
.legal h2 { margin: 30px 0 6px; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.legal p, .legal li { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 22px; }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 14px; line-height: 1.5; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); }
.legal th { font-weight: 650; color: var(--slate); font-size: 13px; }

/* ── Google's button ──────────────────────────────────────────────────────
 *
 * Built to Google's Identity branding guidelines rather than styled to taste,
 * because this is their mark and their sign-in, not ours: the neutral variant
 * at 40px high, 4px radius, a #747775 hairline, #1f1f1f text at 14px medium,
 * the four-colour G at 18px, 12px of padding and 10px of clear space beside it.
 * The dark variant is their published one: #131314 on #8e918f with #e3e3e3 text.
 *
 * One deliberate deviation: Google specifies Roboto Medium, and this product
 * ships no webfonts at all. Loading one for a single button would cost more
 * than it is worth on the connection this page is opened on, so it takes the
 * system stack at the same weight.
 *
 * It is the only saturated colour on the page, which is the correct hierarchy
 * for a door: the one thing you act on belongs to the identity provider.
 */
.gsi {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 200px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #747775;
  border-radius: 4px;
  background: #fff;
  color: #1f1f1f;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* Google's state layers: their own opacities over the button's surface. */
.gsi:hover   { background: #f7f8f8; box-shadow: 0 1px 2px rgba(60,64,67,.30); }
.gsi:active  { background: #eceded; }
.gsi:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.gsi svg { width: 18px; height: 18px; flex: none; }

@media (prefers-color-scheme: dark) {
  .gsi {
    border-color: #8e918f;
    background: #131314;
    color: #e3e3e3;
  }
  .gsi:hover  { background: #1c1d1f; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
  .gsi:active { background: #232427; }
}

@media (prefers-reduced-motion: reduce) {
  .gsi { transition: none; }
}