/* =============================================================================
   Auth & entry journey — 7p/1b (login), 12a→12u (sign-up, SSO completion,
   acquisition). One stylesheet for the whole family: they share a card, a field,
   two buttons and a hatch, and splitting them would be four copies to drift.

   Every value below was read off the mockup's COMPUTED styles, not its source.
   Numbers that look arbitrary (466px, 31px chips, 419px) are measured, not
   chosen — do not round them without re-diffing the screen.
   ============================================================================= */

/* --- Additions this family needs, in the repo's own PART-2 vocabulary --------
   The canonical token file rounds radii to families ("8-9px, 11px, 12-14px, 16px");
   these are the exact drawn values. Named here rather than inline so the next
   auth screen inherits them instead of re-measuring. */
:root {
  --r-auth-card:   16px;  /* 7p / 12a / 12k, desktop AND mobile */
  --r-auth-field:  10px;
  /* The filled primary's radius is NOT here any more — it is `--r-cta` in
     tokens.css. The quota modal reached for it from chat.css, where a stylesheet
     that never loads this file resolved it to nothing and rendered the button
     square. A token used by two families belongs to neither. */
  --r-auth-box:     5px;  /* the CGV checkbox */
  --r-pill:        99px;  /* acquisition chips */
}

/* --- Page ------------------------------------------------------------------ */
.auth {
  position: relative;
  min-height: 100dvh;
  display: grid;
  justify-items: center;
  /* `safe`, not plain `center`: a card taller than the viewport — a small phone,
     or the keyboard open on /welcome — would otherwise be centred by pushing its
     top ABOVE the scroll origin, where it cannot be reached. `safe` falls back to
     start exactly then. */
  align-content: safe center;
  background: var(--cap-bg);
  padding: 24px;
  /* clip, not hidden: the hatch bleeds off the RIGHT edge on purpose, but the
     page must still scroll vertically when the card is taller than the screen. */
  overflow-x: clip;
}

/* The 45° hatch. TWO tokens, and the axis is the VIEWPORT, not the kind of
   screen: neutral here, warm inside the mobile query below. Getting this backwards
   is invisible in a screenshot and wrong on every mobile frame, so the switch
   lives at the breakpoint and nowhere else. */
.auth__hatch {
  position: absolute;
  right: -29px; bottom: -29px;
  width: 380px; height: 320px;
  background-image: repeating-linear-gradient(45deg,
    var(--cap-hatch-neutral) 0 1px, transparent 1px 11px);
  pointer-events: none;
}

/* --- Mobile top bar (mobile only; desktop puts the wordmark in the card) ---- */
.auth__bar { display: none; }

/* --- Card ------------------------------------------------------------------ */
.auth__card {
  position: relative;          /* above the hatch */
  z-index: 1;
  width: 466px;                /* 400 content + 32×2 padding + 2 border */
  max-width: 100%;
  box-sizing: border-box;
  padding: 30px 32px;
  background: var(--cap-surface);
  border: 1px solid var(--cap-rule-window);
  border-radius: var(--r-auth-card);
  box-shadow: var(--cap-shadow-card);
}
/* /welcome is wider: thirteen chips do not fit a 400px column. */
.auth--welcome .auth__card { width: 590px; padding: 32px 34px; }

/* --- Wordmark inside the card ---------------------------------------------- */
.auth__brand { margin: 0; display: flex; align-items: baseline; gap: 9px; }
.auth__mark {
  font-family: var(--cap-font-display);
  font-size: 14px; font-weight: 800; font-stretch: 115%;
  letter-spacing: 2.1px; line-height: normal;
  color: var(--cap-ink); text-decoration: none;
}
.auth__sub {
  font-family: var(--cap-font-label);
  font-size: 8.5px; font-weight: 400; letter-spacing: 1.36px; line-height: normal;
  color: var(--cap-muted-2);
}

/* --- Headings and copy ----------------------------------------------------- */
.auth__title {
  margin: 16px 0 0;
  font-family: var(--cap-font-display);
  font-size: 24px; font-weight: 800; font-stretch: 115%;
  letter-spacing: -0.01em; line-height: normal;
  color: var(--cap-ink);
}
.auth--welcome .auth__title { margin-top: 18px; font-size: 26px; }
.auth--welcome .auth__lead { margin-top: 7px; }
/* 16px like every other block. /welcome is the exception below: its sub-line sits
   tight to the heading at 7, which I had wrongly made the default. */
.auth__lead {
  margin: 16px 0 0;
  font-family: var(--cap-font-body);
  font-size: 13px; font-weight: 400; line-height: 1.55;
  color: var(--cap-body);
}

/* --- Form ------------------------------------------------------------------ */
.auth__form { margin: 0; }

.field { display: block; margin-top: 16px; }
/* Note the line-height, here and everywhere in this file: `normal`, never 1. The
   mockup sets none at all, so every row is the font's own line box — an E-MAIL
   label is 11px tall, not 9, and the row carrying « Oublié ? » is 12. Forcing 1
   shaves a pixel or two off each block and the whole column creeps upwards. */
.field__label {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--cap-font-label);
  font-size: 9px; font-weight: 400; letter-spacing: 1.26px; line-height: normal;
  color: var(--cap-muted-2);
}
/* « Oublié ? » — same row as the MOT DE PASSE label, right-aligned. */
.field__aside {
  font-family: var(--cap-font-body);
  font-size: 11px; font-weight: 600; letter-spacing: normal;
  color: var(--cap-teal-light); text-decoration: none;
}
.field__aside:hover { color: var(--cap-teal-accent); }

.field__input {
  display: block; width: 100%; box-sizing: border-box;
  margin-top: 6px; padding: 10px 12px;
  font-family: var(--cap-font-label);
  font-size: 13px; font-weight: 400; line-height: normal;
  color: var(--cap-ink);
  background: transparent;
  border: 1px solid var(--cap-rule);
  border-radius: var(--r-auth-field);
}
.field__input::placeholder { color: var(--cap-muted); opacity: 1; }
.field__input:focus-visible {
  outline: none;
  border-color: var(--cap-teal-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cap-teal-light) 18%, transparent);
}

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box;
  font-family: var(--cap-font-body);
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
/* `line-height: normal`, not 1, on both: the mockup's buttons are 37 and 36 tall
   for the same paddings, which only works with the font's own line box. Forcing 1
   loses a pixel on each and the whole column below drifts. */
.btn--primary {
  margin-top: 16px; padding: 11px;
  font-size: 14px; font-weight: 700; line-height: normal;
  color: var(--cap-surface);
  background: var(--cap-teal);
  border: 0;                       /* the mockup's filled button has no border */
  border-radius: var(--r-cta);
}
.btn--primary:hover { background: var(--cap-teal-light); }
.btn--ghost {
  padding: 10px;
  font-size: 13px; font-weight: 600; line-height: normal;
  color: var(--cap-body-strong);
  background: transparent;
  border-color: var(--cap-rule);
  border-radius: var(--r-auth-field);
}
.auth__or + .btn--ghost,
.auth__form > .btn--ghost { margin-top: 16px; }
.btn--ghost:hover { border-color: var(--cap-rule-strong-2); }
/* The mockup's typographic placeholder. Google's branding rules require their own
   mark on a sign-in button, so this is replaced at the SSO sub-step (D10) rather
   than approximated here. */
.btn__g {
  font-family: var(--cap-font-display);
  font-size: 13px; font-weight: 800; color: var(--cap-ink);
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: default; }

/* --- « OU » divider -------------------------------------------------------- */
.auth__or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 0;
  font-family: var(--cap-font-label);
  font-size: 9px; font-weight: 400; line-height: normal;
  color: var(--cap-muted-2);
}
.auth__or::before, .auth__or::after {
  content: ""; flex: 1; height: 1px; background: var(--cap-rule);
}

/* --- Footer line ----------------------------------------------------------- */
.auth__foot {
  margin: 16px 0 0;
  font-family: var(--cap-font-body);
  font-size: 12.5px; font-weight: 400; line-height: normal;
  color: var(--cap-muted);
}
.auth__foot--center { text-align: center; }
.auth__foot a { font-weight: 600; color: var(--cap-teal-light); text-decoration: none; }
.auth__foot a:hover { color: var(--cap-teal-accent); }

/* --- Errors ---------------------------------------------------------------- */
/* Terre cuite is the product's alert colour; here it carries a message that must
   also say what did NOT happen ("aucun compte n'a été créé"), because a blocked
   submission that stays silent about it sends people looking for an account. */
.auth__error {
  margin: 16px 0 0;
  font-family: var(--cap-font-body);
  font-size: 12.5px; font-weight: 600; line-height: 1.45;
  color: var(--cap-terra);
}
.auth__error a { color: inherit; text-decoration: underline; }
/* 24, not 10. Three state frames agree on ~25px between the consent row and its
   message — `12c` and `12h` on desktop, `12t` on mobile — and `12t` is 1:1, so the
   number is measured and not read off a detail frame. It was 10 because no frame
   showing this state had ever been diffed. */
.auth__error--consent { margin-top: 24px; }

/* A field-level error sits UNDER ITS FIELD, not at the top of the form: `12d`
   draws « Renseigne un mot de passe. » below the password input, and marks the
   label of the offending field terre cuite. A form-level message (12b, 12e) stays
   at the top. Two placements because they answer two different questions —
   "something about this form" and "this field". */
.field__error {
  margin: 6px 0 0;          /* the same 6 a label sits above its field (D30) */
  font-family: var(--cap-font-body);
  font-size: 12px; font-weight: 600; line-height: normal;
  color: var(--cap-terra);
}
/* The label of the field the message is about. `12b` marks E-MAIL and leaves MOT
   DE PASSE muted; `12d` does the reverse; `12t`, whose error is the CGV and not a
   field, marks neither. One rule, three frames. */
.field--bad .field__label { color: var(--cap-terra); }
.field--bad .field__input { border-color: var(--cap-terra); }

/* « Impossible de créer un compte avec cette adresse » (12b) and « Connexion
   Google abandonnée » (12e) are NOT errors and are not drawn as ones: body text
   with pétrole links, where `.auth__error` is terre cuite at 600. The distinction
   is the annotation on `12b` — the message offers two ways out and asserts
   nothing — and dressing it as an alarm is the closest this screen gets to
   saying what the spec forbids it to say. */
.auth__say {
  margin: 16px 0 0;
  font-family: var(--cap-font-body);
  font-size: 12.5px; font-weight: 400; line-height: 1.55;
  color: var(--cap-body-strong);
}
.auth__say a { font-weight: 600; color: var(--cap-teal-light); }
.auth__say a:hover { color: var(--cap-teal-accent); }

/* The consent row while the form is in flight (`12f` / `12i`): the checkbox is
   replaced by what it means, so a frozen form still says what was agreed to.
   Written by scripts/auth.js — with no JavaScript there is no in-flight state to
   dress, because the page simply navigates. */
.consent--done {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 16px; padding: 2px 0;
  font-family: var(--cap-font-body);
  font-size: 12px; font-weight: 400; line-height: normal;
  color: var(--cap-body);
}
.consent--done svg { color: var(--cap-teal); flex: none; }

/* --- CGV consent ----------------------------------------------------------- */
/* The 2px padding and the box's 1px nudge are the mockup's, not decoration: they
   make the row 24px instead of 19, and everything below it — button, OU, Google,
   footer — sits on that number. */
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 2px 0; }
.consent__box {
  flex: none; width: 19px; height: 19px; margin: 1px 0 0;
  appearance: none;
  background: #fff;
  border: 1px solid var(--cap-dim-line);
  border-radius: var(--r-auth-box);
  cursor: pointer;
}
/* The tick is the mockup's own SVG, copied from `12f` / `12i`: 11×11 on a 24-unit
   viewBox, stroke 3.4, round caps. My first attempt drew it with two 45° gradients
   in an 11×2 box, which cannot produce a diagonal stroke — it painted a smear.
   Sized at 58% (11/19) so the larger mobile box scales it instead of re-stating it.
   The one hard-coded hex in this file, and a deliberate exception: a data URI
   cannot read a custom property, and this is `--cap-surface` verbatim from the
   mockup's own `stroke` attribute — copied, not chosen. */
.consent__box:checked {
  background-color: var(--cap-teal);
  border-color: var(--cap-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdfcf7' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 58%;
  background-position: center;
  background-repeat: no-repeat;
}
.consent__box:focus-visible {
  outline: 2px solid var(--cap-teal-light); outline-offset: 2px;
}
.consent__text {
  font-family: var(--cap-font-body);
  font-size: 12px; font-weight: 400; line-height: 1.5;
  color: var(--cap-body);
}
.consent__text a { font-weight: 600; color: var(--cap-teal-light); text-decoration: none; }
.consent__text a:hover { color: var(--cap-teal-accent); }

/* --- Google identity block (12g) ------------------------------------------- */
/* The 11px padding is the mockup's: the block reads as a quiet inset row rather
   than a line of text, without carrying a background. */
.identity { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 11px 0; }
.identity__g {
  font-family: var(--cap-font-display);
  /* `normal`, or the page's 1.6 body line-height leaks in and makes this glyph a
     24px-tall box that centres 4px too high. */
  font-size: 15px; font-weight: 800; line-height: normal; color: var(--cap-ink);
}
.identity__body { display: flex; flex-direction: column; gap: 1px; }
.identity__label {
  font-family: var(--cap-font-label);
  font-size: 8.5px; font-weight: 400; letter-spacing: 1.19px; line-height: normal;
  color: var(--cap-muted-2);
}
.identity__mail {
  font-family: var(--cap-font-body);
  font-size: 12.5px; font-weight: 600; line-height: normal; color: var(--cap-ink);
}

/* --- Token screens — 7q1 7q2 7r1 7r2 7v1 7v2 7v3 --------------------------- */

/* The tinted disc. One rule for three tones: the SVG strokes in `currentColor`
   and the disc tints the same colour at 12%, so a tone is one custom property
   and never a second hex. */
.badge {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 16px 0 0;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.badge--teal  { color: var(--cap-teal); }
.badge--terra { color: var(--cap-terra); }
.badge--muted { color: var(--cap-muted-2); }

/* The rate-limit footnote under a resend (7q2). Written in capitals in the
   markup rather than transformed, exactly as the mockup does — a screen reader
   should hear the sentence, not the shouting. */
.auth__note {
  margin: 16px 0 0;
  font-family: var(--cap-font-label);
  font-size: 9px; font-weight: 400; letter-spacing: 0.9px; line-height: 13.5px;
  color: var(--cap-muted-2);
}

/* The weight belongs to the LINK, not to the paragraph. Archivo's `normal` line
   box at 12.5px is 14px at weight 400 and 16 at 600, so putting 600 on the block
   made its strut two pixels taller than the mockup's and pushed the card with it.
   The mockup does the same thing: a 400 container holding a 600 span. */
.auth__back {
  margin: 16px 0 0; text-align: center;
  font-family: var(--cap-font-body);
  font-size: 12.5px; font-weight: 400; line-height: normal;
}
.auth__back a { font-weight: 600; }
.auth__back .arrow { display: inline-block; line-height: 1; }
.auth__back a { color: var(--cap-teal-light); text-decoration: none; }
.auth__back a:hover { color: var(--cap-teal-accent); }

/* 7r1 — the consequence stated before the click, not discovered after it:
   saving a new password signs every other device out. Terre cuite on the left
   edge only, hence the radius on three corners. */
.notice {
  box-sizing: border-box;
  margin: 16px 0 0; padding: 10px 12px;
  border-left: 3px solid var(--cap-terra);
  border-radius: 0 var(--r-auth-field) var(--r-auth-field) 0;
  background: var(--cap-paper-50);
  font-family: var(--cap-font-body);
  font-size: 12px; font-weight: 400; line-height: 18px;
  color: var(--cap-body-strong);
}

/* --- Acquisition chips (12k) ----------------------------------------------- */
.chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 18px 0 0; padding: 0; border: 0;
}
.chip { position: relative; }
/* The radio itself is the accessible control — it keeps arrow-key navigation and
   works with no JavaScript. Only its box is hidden, never its focus. */
.chip__input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip__label {
  display: inline-block; padding: 7px 15px;
  font-family: var(--cap-font-label);
  font-size: 11.5px; font-weight: 400; line-height: 1.3;
  color: var(--cap-muted);
  background: transparent;
  border: 1px solid var(--cap-rule);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.chip__input:checked + .chip__label {
  color: var(--cap-ink);
  background: var(--cap-rule-strong);
  border-color: var(--cap-rule-strong-2);
}
.chip__input:focus-visible + .chip__label {
  outline: 2px solid var(--cap-teal-light); outline-offset: 2px;
}

.detail { margin-top: 16px; }
.detail .field { margin-top: 0; }

/* Continuer fills the row, Passer sits at its right end — and « Passer » is a
   visible control, never a hidden link (06-screens: skipping is first-class). */
.actions { display: flex; align-items: stretch; gap: 14px; margin-top: 21px; }
.actions .btn--primary { margin-top: 0; }
.btn--skip { width: auto; flex: none; padding: 11px 22px; font-size: 13.5px; border-radius: var(--r-cta); }

/* --- Utility --------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =============================================================================
   MOBILE — 1b, 12p, 12q, 12r, 12s, 12t
   Read off the mobile frames themselves, not scaled down from desktop: that
   shortcut is what put 38 typographic drifts on the landing's first pass.
   ============================================================================= */
@media (max-width: 760px) {
  /* In mobile, ALWAYS the warm hatch. No exception, whatever the screen does. */
  .auth__hatch {
    right: -29px; bottom: 61px;
    width: 220px; height: 200px;
    background-image: repeating-linear-gradient(45deg,
      var(--cap-hatch-warm) 0 1px, transparent 1px 11px);
  }

  .auth {
    padding: 51px 0 0;                       /* clear of the bar */
  }

  .auth__bar {
    display: flex; align-items: baseline; gap: 9px;
    position: absolute; top: 0; left: 0; right: 0;
    box-sizing: border-box; height: 51px; padding: 14px 18px;
    border-bottom: 1px solid var(--cap-rule);
    background: var(--cap-surface);
    z-index: 2;
  }
  /* 1b draws this bar transparent while 12p and 12r fill it — reported as a
     probable drift on the older frame; each is built as drawn until it is
     settled, because the mockup is what is built. */
  .auth--login .auth__bar { background: transparent; }

  .auth__mark--bar { font-size: 12px; letter-spacing: 1.8px; }
  .auth__sub--bar { font-size: 7.5px; letter-spacing: 1.2px; }

  .auth__lang {
    margin: 0 0 0 auto; display: flex; gap: 8px; align-items: center;
    padding: 2px 9px; border-radius: var(--r-pill);
    background: var(--cap-paper-200);
    font-family: var(--cap-font-label); font-size: 9.5px; line-height: 1;
  }
  .auth__langOn { color: var(--cap-ink); }
  /* Bilingual product, no i18n layer yet — inert rather than a lie. */
  .auth__langOff { color: var(--cap-muted); }

  /* Centred in the space under the bar, then lifted 17px.
     It used to carry a fixed `margin-top` per screen, read straight off the
     mockup's absolute card positions. That reproduced the 844px-tall frame and
     nothing else: on a real phone the card sat wherever that number landed. The
     mockup is in fact CENTRED — measured on 1b, 12p and 12r, the card sits 17px
     above the centre of the area below the bar, the same 17 on all three, which
     is an optical lift rather than three coincidences. Desktop needs none: there
     the card is exactly centred, which `place-items: center` already gives.
     The lift is a bottom margin of 2×17, so it survives any viewport height. */
  .auth__card {
    width: 350px; padding: 24px 20px;
    margin-bottom: 34px;
    box-shadow: var(--cap-shadow-card-sm);
  }
  .auth--welcome .auth__card { width: 350px; padding: 24px 20px; }

  /* On mobile the wordmark lives in the bar, and only 12p repeats it inside the
     card. 1b and 12r do not, so the card opens straight on its heading. */
  .auth__brand { display: none; }
  /* 12p and 12q repeat the wordmark inside the card; 1b and 12r do not. */
  .auth--signup .auth__brand,
  .auth--complete .auth__brand,
  .auth--token .auth__brand { display: flex; }
  .auth--login .auth__title,
  .auth--welcome .auth__title { margin-top: 0; }
  .auth--login .auth__title { font-size: 22px; }
  .auth--welcome .auth__title { font-size: 23px; }
  /* /welcome tightens further on mobile: 6px under the heading, 15px around the
     chip grid, and the lead drops to 1.5. */
  .auth--welcome .auth__lead { margin-top: 6px; font-size: 12.5px; line-height: 1.5; }
  .chips, .actions { margin-top: 15px; }

  /* The mobile frames run on a 14px rhythm, not desktop's 16 — every gap on 1b
     and 12p is the same 14, from the title down to the footer line. Label to its
     field stays 6. */
  .auth__title,
  .auth__lead,
  .field,
  .btn--primary,
  .auth__or,
  .auth__or + .btn--ghost,
  .auth__form > .btn--ghost,
  .auth__foot,
  .badge,
  .auth__note,
  .auth__back,
  .notice,
  .consent, .identity { margin-top: 14px; }
  .consent { padding: 1px 0; }
  .consent__box { width: 21px; height: 21px; }
  .identity { padding: 12px 0; }

  .field__input { padding: 11px 12px; }
  .btn--primary { padding: 13px; font-size: 14.5px; border-radius: 12px; }
  /* The token screens keep their DESKTOP control metrics on mobile — field
     padding 10, filled button 11/14/r11, ghost 10/r10 — where the entry journey
     grows to 11/13/14.5/r12. Measured across all seven of 1r1→1r7; only the card
     width and its padding change with the viewport. */
  .auth--token .field__input { padding: 10px 12px; }
  .auth--token .btn--primary { padding: 11px; font-size: 14px; border-radius: var(--r-cta); }
  .auth--token .btn--ghost { padding: 10px; border-radius: var(--r-auth-field); }
  .btn--ghost { padding: 12px; border-radius: var(--r-cta); }
  /* 1b draws its Google button a notch shorter than 12p does (38 against 40).
     Third divergence between that frame and the 12x family — all reported. */
  .auth--login .btn--ghost { padding: 11px; }
  /* And 12p puts 5px between a label and its field where 7p, 12a and 1b all put
     6. Measured, not rounded — the fifth small disagreement between the mobile
     sign-up frame and its neighbours. If 1b is ever redrawn against the 12x
     family, these three overrides go away together. */
  .auth--signup .field__input { margin-top: 5px; }

  .chips { gap: 7px; }
  .chip__label { padding: 8px 14px; }

  /* Stacked, Continuer first: on a phone the primary action must be the one the
     thumb reaches, and « Passer » still has to be visible without hunting. */
  .actions { flex-direction: column; gap: 9px; }
  .btn--skip { width: 100%; padding: 13px; border-radius: 12px; }
}