/* ============================================================
   THE ANNOTATED NOTEBOOK - authentication surfaces.

   Scope is exactly two hooks, both of which already existed:
     .auth-page   - the dedicated login/signup pages, plus the two
                    registration/ reset templates that share .auth-card
     #auth-modal  - the navbar login/signup modal, on every anonymous page

   Nothing here reaches .ob-body (onboarding wizard), .pe-form (profile
   edit), .nb-password-page (password change), .pwd-page (password reset),
   .error-page, or .nb-account-form -- the twenty other templates that share
   the .auth-field / .auth-btn / .google-btn primitives. Restyling the bare
   class selectors would have hit all of them.

   Layer contract:
     - colour is tokens only (this file is in ZERO_RAW_COLOR_FILES)
     - NO font / font-size / font-weight / font-family / line-height. The
       canonical type roles stay owned by notebook-account-typography.css and
       notebook-typography.css, which load after this file. Only
       letter-spacing, text-transform and text-align are set here.
     - loads last in both the nb_navchrome_skin and nb_account_skin chains so
       equal-specificity rules in notebook-account-skin.css lose on order.

   The idea: a form printed on the page rather than a widget dropped on it.
   Every enclosure that is not carrying meaning becomes a rule or becomes
   space. Exactly one element stays saturated -- the submit button -- because
   --nb-blue is the site's single interaction ink.
   ============================================================ */

/* ── Field rule ink ──────────────────────────────────────────
   --nb-control-border collapses to --nb-border in the dark scope, which is
   ~1.3:1 against raised night paper. That is fine as one edge of a four-sided
   box and invisible as a lone underline, which is all a field has here. Dark
   therefore takes --nb-ink-3 (4.68:1); light keeps --nb-control-border
   (3.33:1 on --nb-paper-raised). Both clear the 3:1 non-text floor. The
   asymmetry is deliberate: parity by token name is not parity by eye. */
html.theme-light .auth-page,
html.theme-light #auth-modal {
  --nb-auth-rule: var(--nb-control-border);
}

html:not(.theme-light) .auth-page,
html:not(.theme-light) #auth-modal {
  --nb-auth-rule: var(--nb-ink-3);
}

/* ============================================================
   PANEL
   ============================================================ */

/* ── Modal ─────────────────────────────────────────────────── */
html #auth-modal {
  max-width: 420px;
  border-radius: var(--nb-r-lg);
  padding: var(--nb-s8) var(--nb-s7);
}

/* The signup panel carries four fields; it earns the extra column. */
html #auth-modal:has(#auth-modal-panel-signup:not(.auth-modal-panel--hidden)) {
  max-width: 460px;
}

/* Left-aligned, and clear of the close control in the top-right corner. */
html #auth-modal .auth-modal-title {
  margin: 0 0 var(--nb-s6);
  padding-right: var(--nb-s8);
  text-align: left;
  letter-spacing: -0.015em;
}

html #auth-modal .auth-modal-notice {
  margin: 0;
  color: var(--nb-ink-2);
}

/* 32x32 was the one control on these surfaces below the site's 44px rule. */
html #auth-modal .auth-modal-close {
  top: var(--nb-s3);
  right: var(--nb-s3);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nb-r-sm);
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: var(--nb-ink-2);
}

html #auth-modal .auth-modal-close:hover {
  background: var(--nb-blue-wash);
  border-color: var(--nb-blue);
  color: var(--nb-blue);
}

/* ── Dedicated card ────────────────────────────────────────── */
html .auth-page .auth-card {
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  padding: clamp(28px, 3.9vw, 48px);
  /* It sits on paper. It does not need to hover above it. */
  box-shadow: var(--nb-shadow-1);
}

/* ── One centred column, every auth surface ──────────────────
   The dedicated pages used to be a two-column shell: a marketing panel on the
   left, the form card on the right. That put the card 226px (login) and 193px
   (signup) right of the viewport centre, while the modal and the reset pages
   were already dead-centre -- so the family disagreed with itself about where
   an auth panel belongs. The panel is gone from both templates (owner call
   2026-08-21); the shell keeps its element because it is the width hook and a
   landmark the stage6 census records, but it is now a single centred track.
   styles.css still declares the two-column template at (0,1,0)/(0,2,0), so
   these overrides have to keep winning -- do not lower their specificity. */
html .auth-page .auth-shell {
  max-width: 560px;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-items: center;
}

html .auth-page--signup .auth-shell {
  max-width: 600px;
  grid-template-columns: minmax(0, 1fr);
}

/* Vertical centring for the whole family, not just login/signup. The reset
   templates inherit .auth-page's flex-start from styles.css:719 and sat 120px
   from the top with ~530px of dead space under a 240px panel. */
html .auth-page {
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--nb-chrome-h));
  padding-block: var(--nb-section-sm);
}

html .auth-page .auth-title {
  margin: 0 0 var(--nb-s2);
  text-align: left;
  letter-spacing: -0.015em;
}

html .auth-page .auth-subtitle {
  margin: 0 0 var(--nb-s6);
  text-align: left;
  color: var(--nb-ink-2);
}

/* The .auth-context-* rules that used to live here came out with the left
   marketing panel -- no markup carries those classes any more. Their type-role
   declarations are still in notebook-account-typography.css and are now
   orphaned, exactly like the .acct-* entries that file already documents; they
   stay because eight verbatim selector assertions in
   pages/tests_typography_stage5_wave4.py read that file as source. */

/* ============================================================
   GOOGLE BUTTON - demoted from peer to alternative.
   The four-colour G mark is never recoloured (brand requirement, and two
   tests assert no .google-btn svg / path[fill] rule exists anywhere).
   ============================================================ */
html .auth-page .google-btn,
html #auth-modal .google-btn {
  min-height: 48px;
  padding: var(--nb-s3) var(--nb-s5);
  gap: var(--nb-s3);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-sm);
  background: transparent;
  color: var(--nb-ink);
  box-shadow: none;
  letter-spacing: 0.01em;
  transition:
    background-color var(--nb-dur-1) var(--nb-ease),
    border-color var(--nb-dur-1) var(--nb-ease);
}

html .auth-page .google-btn:hover,
html .auth-page .google-btn:focus-visible,
html #auth-modal .google-btn:hover,
html #auth-modal .google-btn:focus-visible {
  background: var(--nb-blue-wash);
  border-color: var(--nb-blue);
  color: var(--nb-ink);
  box-shadow: none;
  transform: none;
}

html .auth-page .google-btn:focus-visible,
html #auth-modal .google-btn:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
}

/* ============================================================
   OR DIVIDER - one hairline, one word, one rhythm. All three
   surfaces used three different margin values before this.
   ============================================================ */
html .auth-page .auth-divider,
html #auth-modal .auth-divider {
  margin: var(--nb-s6) 0;
  gap: var(--nb-s4);
}

/* The page steps its type up a rung, so its rhythm steps down one to pay for
   it. The modal keeps both. */
html .auth-page .auth-divider {
  margin: var(--nb-s5) 0;
}

html .auth-page .auth-divider::before,
html .auth-page .auth-divider::after,
html #auth-modal .auth-divider::before,
html #auth-modal .auth-divider::after {
  height: 1px;
  background: var(--nb-border);
}

html .auth-page .auth-divider span,
html #auth-modal .auth-divider span {
  color: var(--nb-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ============================================================
   FIELDS - a ruled line, not a box.
   ============================================================ */

html .auth-page .auth-field,
html #auth-modal .auth-field {
  display: flex;
  flex-direction: column;
  /* 4px, not 8: the input carries 8px of its own top padding so the entered
     value sits close to its rule rather than floating mid-field. The two
     together are the label-to-text gap. */
  gap: var(--nb-s1);
  margin-bottom: var(--nb-s6);
}

html .auth-page .auth-field {
  margin-bottom: var(--nb-s5);
}

/* Declared before .auth-field-action, which is a link carrying BOTH classes
   so it can take the canonical label role from the type layer. At equal
   specificity the later rule wins, so the order here is load-bearing. */
html .auth-page .auth-field-hint,
html #auth-modal .auth-field-hint {
  color: var(--nb-ink-2);
}

/* Four fields; the rhythm tightens one step so the card still fits a laptop. */
html .auth-page--signup .auth-field,
html #auth-modal #auth-modal-panel-signup .auth-field {
  margin-bottom: var(--nb-s5);
}

html .auth-page--signup .auth-field {
  margin-bottom: var(--nb-s4);
}

html .auth-page .auth-field:last-of-type,
html #auth-modal .auth-field:last-of-type {
  margin-bottom: var(--nb-s7);
}

html .auth-page .auth-field:last-of-type {
  margin-bottom: var(--nb-s6);
}

html .auth-page .auth-field label,
html #auth-modal .auth-field label {
  color: var(--nb-ink-2);
  letter-spacing: 0.02em;
  transition: color var(--nb-dur-1) var(--nb-ease);
}

html .auth-page .auth-field:focus-within label,
html #auth-modal .auth-field:focus-within label {
  color: var(--nb-ink);
}

/* ── The field row: label left, contextual action right, input beneath.
   The action sits AFTER the input in the DOM and is placed here, so the tab
   order reads Email -> Password -> Forgot password? -> Log In rather than
   interrupting the two credentials with a link. ── */
html .auth-page .auth-field--action,
html #auth-modal .auth-field--action {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--nb-s4);
  row-gap: var(--nb-s1);
}

html .auth-page .auth-field--action > label,
html #auth-modal .auth-field--action > label {
  grid-column: 1;
  grid-row: 1;
}

html .auth-page .auth-field--action > .auth-field-action,
html #auth-modal .auth-field--action > .auth-field-action {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

html .auth-page .auth-field--action > input,
html #auth-modal .auth-field--action > input {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Carries .auth-field-hint too, so it takes the canonical label role from the
   type layer without this file owning any font property. */
html .auth-page .auth-field-action,
html #auth-modal .auth-field-action {
  color: var(--nb-blue);
  text-decoration: none;
  letter-spacing: 0.02em;
}

html .auth-page .auth-field-action:hover,
html #auth-modal .auth-field-action:hover {
  color: var(--nb-blue-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

html .auth-page .auth-field-action:focus-visible,
html #auth-modal .auth-field-action:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
  border-radius: var(--nb-r-sm);
}

/* ── Resting.
   The specificity here deliberately mirrors
   notebook-account-skin.css :1065 (0,5,2) so it wins on load order rather
   than on an escalating selector; theme-light.css :4847 sits at (0,4,2)
   and loses outright. ── */
html.theme-light .auth-page .auth-card .auth-field input:not(:focus),
html:not(.theme-light) .auth-page .auth-card .auth-field input:not(:focus),
html #auth-modal .auth-field input:not(:focus) {
  box-sizing: border-box;
  width: 100%;
  /* A floor, not a height. The natural box is 8 + text + 12 + 1 = ~47px, so
     this never binds -- which matters, because a binding min-height would
     centre the value inside the box and leave it floating well above its own
     rule. The rule has to look like the line the text is written on. */
  min-height: 44px;
  padding: var(--nb-s2) 0 var(--nb-s3);
  border: 0;
  border-bottom: 1px solid var(--nb-auth-rule);
  border-radius: 0;
  background: transparent;
  color: var(--nb-ink);
  box-shadow: none;
  transition:
    border-color var(--nb-dur-1) var(--nb-ease),
    background-color var(--nb-dur-1) var(--nb-ease);
}

html.theme-light .auth-page .auth-card .auth-field input:hover:not(:focus),
html:not(.theme-light) .auth-page .auth-card .auth-field input:hover:not(:focus),
html #auth-modal .auth-field input:hover:not(:focus) {
  border-bottom-color: var(--nb-ink-2);
}

/* ── Focus: the rule thickens and the field takes a wash. Two signals, no
   glow ring. padding-bottom drops 1px to absorb the extra border width, so
   nothing moves. ── */
html.theme-light .auth-page .auth-card .auth-field input:focus,
html:not(.theme-light) .auth-page .auth-card .auth-field input:focus,
html #auth-modal .auth-field input:focus {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: var(--nb-s2) 0 calc(var(--nb-s3) - 1px);
  border: 0;
  border-bottom: 2px solid var(--nb-blue);
  border-radius: 0;
  background: var(--nb-blue-wash);
  color: var(--nb-ink);
  box-shadow: none;
  outline: none;
}

html .auth-page .auth-field input::placeholder,
html #auth-modal .auth-field input::placeholder {
  color: var(--nb-ink-3);
  opacity: 1;
}

/* Raised paper, not sunken: against a borderless field the sunken tone read
   as a stray grey block wherever the browser had filled a value in. */
html .auth-page .auth-field input:-webkit-autofill,
html .auth-page .auth-field input:-webkit-autofill:hover,
html .auth-page .auth-field input:-webkit-autofill:focus,
html .auth-page .auth-field input:-webkit-autofill:active,
html #auth-modal .auth-field input:-webkit-autofill,
html #auth-modal .auth-field input:-webkit-autofill:hover,
html #auth-modal .auth-field input:-webkit-autofill:focus,
html #auth-modal .auth-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--nb-paper-raised) inset;
  -webkit-text-fill-color: var(--nb-ink);
  caret-color: var(--nb-ink);
}

/* ============================================================
   PRIMARY BUTTON - stays full-width and stays --nb-blue. What goes
   is the bulk: a 4px corner and a 48px bar reads as a stamp on paper;
   a 13px corner and a 56px slab reads as a 2019 CTA.
   ============================================================ */
html .auth-page .auth-btn,
html #auth-modal .auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: var(--nb-s3) var(--nb-s5);
  border: 1px solid var(--nb-blue);
  border-radius: var(--nb-r-sm);
  background: var(--nb-blue);
  color: var(--nb-on-blue);
  box-shadow: none;
  text-shadow: none;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition:
    background-color var(--nb-dur-1) var(--nb-ease),
    border-color var(--nb-dur-1) var(--nb-ease);
}

html .auth-page .auth-btn:hover,
html #auth-modal .auth-btn:hover {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  box-shadow: none;
  transform: none;
}

html .auth-page .auth-btn:focus-visible,
html #auth-modal .auth-btn:focus-visible {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
}

/* ============================================================
   ERROR STATES - the tinted banner becomes a slim rule, the same
   gesture the summary callouts use. The message points at the field
   instead of floating above the button.
   ============================================================ */
/* The inline per-field variant first: .auth-error--block carries BOTH classes,
   so at equal specificity a later general rule would take its margin back. */
html .auth-page .auth-error,
html #auth-modal .auth-error {
  margin: 0;
  color: var(--nb-error);
}

html .auth-page .auth-error--block,
html #auth-modal .auth-error--block {
  margin: 0 0 var(--nb-s6);
  padding: 0 0 0 var(--nb-s3);
  border: 0;
  border-left: 2px solid var(--nb-error);
  border-radius: 0;
  background: none;
  color: var(--nb-error);
}

html .auth-page .auth-field:has(.auth-error) input:not(:focus),
html #auth-modal .auth-field:has(.auth-error) input:not(:focus) {
  border-bottom-color: var(--nb-error);
}

/* ============================================================
   FOOTER ROWS
   ============================================================ */
html .auth-page .auth-links {
  margin-top: var(--nb-s6);
  padding-top: var(--nb-s5);
  border-top: 1px solid var(--nb-border);
  gap: var(--nb-s2);
  color: var(--nb-ink-2);
}

html #auth-modal .auth-modal-footer {
  margin-top: var(--nb-s6);
  padding-top: var(--nb-s5);
  border-top: 1px solid var(--nb-border);
  gap: var(--nb-s2);
  color: var(--nb-ink-2);
}

html .auth-page .auth-links a,
html #auth-modal .auth-modal-footer-link,
html #auth-modal .auth-modal-switch-btn {
  color: var(--nb-blue);
  text-decoration: none;
  text-shadow: none;
  letter-spacing: 0.01em;
}

html .auth-page .auth-links a:hover,
html #auth-modal .auth-modal-footer-link:hover,
html #auth-modal .auth-modal-switch-btn:hover {
  color: var(--nb-blue-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: none;
}

html .auth-page .auth-links a:focus-visible,
html #auth-modal .auth-modal-footer-link:focus-visible,
html #auth-modal .auth-modal-switch-btn:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
  border-radius: var(--nb-r-sm);
  box-shadow: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  html #auth-modal {
    padding: var(--nb-s7) var(--nb-s6);
    border-radius: var(--nb-r-md);
  }

  html #auth-modal .auth-modal-title {
    margin-bottom: var(--nb-s5);
  }

  html .auth-page .auth-card {
    padding: var(--nb-s6);
    border-radius: var(--nb-r-md);
  }
}