/* ==========================================================================
   Piston Tribe: sign in / join (email-first, 2 steps + confirm)
   Source of truth: sign-in-mockup.html (Plan/)

   RULES FOR THIS FILE
   - Copy it in as-is. Don't round, rename or "tidy" values.
   - Every selector is prefixed .pt-au-. Nothing here styles bare elements
     outside .pt-au-scope.
   - Load it only on pages that render the auth screens (the my-account login
     view, the password reset view, the confirm-email view), plus any page
     that shows the name prompt.
   - Tokens marked ASSUMED: if design-tokens.md differs, report it. Don't
     silently swap it.
   - Theme or WooCommerce CSS will fight this in places (inputs, buttons,
     .woocommerce form rules). Win with a more specific .pt-au- selector in the
     OVERRIDES block at the bottom of this file. Never edit the rules above it.
   ========================================================================== */

:root{
  --pt-au-ink:#1A1A1A;
  --pt-au-ink-hover:#000000;
  --pt-au-paper:#FAF9F6;
  --pt-au-white:#FFFFFF;
  --pt-au-graphite:#23211E;
  --pt-au-sunk:#F3F1EB;          /* ASSUMED */
  --pt-au-line:#E4E2DB;
  --pt-au-line-strong:#C9C7BF;
  --pt-au-accent:#185FA5;
  --pt-au-green:#1F6B45;         /* ASSUMED */
  --pt-au-red:#A12622;           /* ASSUMED: validation only */
  --pt-au-muted:#78746C;         /* ASSUMED */
  --pt-au-soft:#55524C;          /* ASSUMED */
  --pt-au-band-text:#F3F1EB;
  --pt-au-band-dim:#AFA89C;
  --pt-au-band-line:#3A3631;
  --pt-au-sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --pt-au-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

/* --------------------------------------------------------------------------
   0. Scope reset (inside the auth shell only)
   -------------------------------------------------------------------------- */
.pt-au-scope,.pt-au-scope *{box-sizing:border-box}
.pt-au-scope{font-family:var(--pt-au-sans);font-size:15px;line-height:1.5;color:var(--pt-au-ink);-webkit-font-smoothing:antialiased}
.pt-au-scope :focus-visible{outline:2px solid var(--pt-au-accent);outline-offset:2px}
.pt-au-scope [hidden]{display:none!important}
.pt-au-scope a{color:var(--pt-au-accent);text-decoration:none}
.pt-au-scope a:hover{text-decoration:underline;text-underline-offset:3px}
.pt-au-scope p{margin:0}
.pt-au-mono{font-family:var(--pt-au-mono)}

/* --------------------------------------------------------------------------
   1. Page shell: two columns on desktop (form | why panel)
   -------------------------------------------------------------------------- */
.pt-au-page{background:var(--pt-au-paper);padding:48px 0 72px}
.pt-au-shell{
  width:min(1016px,calc(100% - 64px));margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--pt-au-white);border:1px solid var(--pt-au-line);border-radius:0;
}
.pt-au-form{padding:48px 56px 44px;display:flex;flex-direction:column;min-height:600px}
.pt-au-step{display:flex;flex-direction:column;flex:1 1 auto}

/* --------------------------------------------------------------------------
   2. Context strip ("Your deal on …", "Your offer of £… is saved")
   -------------------------------------------------------------------------- */
.pt-au-ctx{
  display:flex;gap:12px;align-items:center;margin:0 0 28px;padding:10px 14px;
  background:var(--pt-au-sunk);border-left:2px solid var(--pt-au-ink);
  font-size:13.5px;line-height:1.45;color:var(--pt-au-soft);
}
.pt-au-ctx-thumb{width:36px;height:36px;flex:none;overflow:hidden;border:1px solid var(--pt-au-line);background:var(--pt-au-sunk)}
.pt-au-ctx-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pt-au-ctx b{color:var(--pt-au-ink);font-weight:600}
.pt-au-ctx .pt-au-money{font:600 13px var(--pt-au-mono);color:var(--pt-au-ink)}

/* --------------------------------------------------------------------------
   3. Headings and copy
   -------------------------------------------------------------------------- */
.pt-au-stepno{font:12px var(--pt-au-mono);color:var(--pt-au-muted);margin:0 0 10px}
.pt-au-title{font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.025em;margin:0 0 8px;color:var(--pt-au-ink);text-transform:none}
.pt-au-lead{margin:0 0 28px;font-size:15px;line-height:1.5;color:var(--pt-au-soft)}

/* The email being used, with a "Change" link */
.pt-au-who{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:0 0 20px;padding:10px 14px;border:1px solid var(--pt-au-line);background:var(--pt-au-paper);font-size:14px;
}
.pt-au-who-email{font:13.5px var(--pt-au-mono);color:var(--pt-au-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* --------------------------------------------------------------------------
   4. Fields
   -------------------------------------------------------------------------- */
.pt-au-field{margin:0 0 18px}
.pt-au-label{display:block;margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--pt-au-ink);text-transform:none;letter-spacing:0}
.pt-au-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pt-au-inp{position:relative}
.pt-au-scope input.pt-au-input{
  width:100%;height:48px;margin:0;padding:0 14px;
  border:1px solid var(--pt-au-line-strong);border-radius:0;background:var(--pt-au-white);
  font:400 16px var(--pt-au-sans);color:var(--pt-au-ink);box-shadow:none;-webkit-appearance:none;appearance:none;
}
.pt-au-scope input.pt-au-input::placeholder{color:#8E8A83;opacity:1}
.pt-au-scope input.pt-au-input:focus{border-color:var(--pt-au-ink);box-shadow:0 0 0 1px var(--pt-au-ink);outline:none}
.pt-au-scope input.pt-au-input[aria-invalid="true"]{border-color:var(--pt-au-red);box-shadow:0 0 0 1px var(--pt-au-red)}
.pt-au-scope .pt-au-inp.has-eye input.pt-au-input{padding-right:72px}
.pt-au-eye{
  position:absolute;right:6px;top:6px;height:36px;padding:0 10px;
  background:none;border:0;border-radius:0;cursor:pointer;
  font:600 13px var(--pt-au-sans);color:var(--pt-au-soft);
}
.pt-au-hint{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--pt-au-muted)}
.pt-au-hint b{color:var(--pt-au-ink);font-weight:600}
.pt-au-err{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--pt-au-red)}
.pt-au-form-err{margin:0 0 18px;padding:10px 14px;border:1px solid var(--pt-au-red);border-left-width:3px;background:var(--pt-au-white);font-size:13.5px;color:var(--pt-au-red)}

/* Password strength: 4 segments, ink when earned */
.pt-au-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.pt-au-meter span{height:3px;background:var(--pt-au-line)}
.pt-au-meter span.is-on{background:var(--pt-au-ink)}

/* Checkboxes */
.pt-au-check{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;font-size:13.5px;line-height:1.45;color:var(--pt-au-soft);cursor:pointer}
.pt-au-scope .pt-au-check input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--pt-au-ink)}
.pt-au-check b{color:var(--pt-au-ink);font-weight:600}
.pt-au-check + .pt-au-err{margin:-6px 0 12px 28px}

/* Keep me signed in + Forgot password on one line */
.pt-au-between{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 20px;font-size:13.5px}
.pt-au-between .pt-au-check{margin:0}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */
.pt-au-scope .pt-au-btn{
  width:100%;height:50px;margin:0;padding:0 20px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--pt-au-ink);color:var(--pt-au-paper);border:0;border-radius:0;
  font:700 15.5px var(--pt-au-sans);letter-spacing:0;text-transform:none;cursor:pointer;box-shadow:none;
}
.pt-au-scope .pt-au-btn:hover{background:var(--pt-au-ink-hover);color:var(--pt-au-paper)}
.pt-au-scope .pt-au-btn[aria-busy="true"]{opacity:.7;cursor:progress}
.pt-au-scope .pt-au-btn2{
  width:100%;height:48px;margin:0;padding:0 20px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--pt-au-white);color:var(--pt-au-ink);border:1px solid var(--pt-au-line-strong);border-radius:0;
  font:600 15px var(--pt-au-sans);text-transform:none;cursor:pointer;
}
.pt-au-scope .pt-au-btn2:hover{border-color:var(--pt-au-ink)}
.pt-au-stack{display:grid;gap:10px}
.pt-au-or{display:flex;align-items:center;gap:12px;margin:22px 0;font-size:12.5px;color:var(--pt-au-muted)}
.pt-au-or::before,.pt-au-or::after{content:"";flex:1;height:1px;background:var(--pt-au-line)}
.pt-au-link{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;font-size:13.5px;color:var(--pt-au-accent);text-decoration:none}
.pt-au-link:hover{text-decoration:underline;text-underline-offset:3px}
.pt-au-fine{margin:22px 0 0;font-size:12.5px;line-height:1.55;color:var(--pt-au-muted)}
.pt-au-foot{margin-top:auto;padding-top:28px;font-size:13.5px;color:var(--pt-au-muted)}

/* --------------------------------------------------------------------------
   6. Confirm email: 6-digit code
   -------------------------------------------------------------------------- */
.pt-au-code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 14px}
.pt-au-scope .pt-au-code input{
  width:100%;height:56px;margin:0;padding:0;text-align:center;
  border:1px solid var(--pt-au-line-strong);border-radius:0;background:var(--pt-au-white);
  font:600 22px var(--pt-au-mono);color:var(--pt-au-ink);-webkit-appearance:none;appearance:none;
}
.pt-au-scope .pt-au-code input:focus{border-color:var(--pt-au-ink);box-shadow:0 0 0 1px var(--pt-au-ink);outline:none}
.pt-au-scope .pt-au-code[aria-invalid="true"] input{border-color:var(--pt-au-red)}
.pt-au-countdown{font:12.5px var(--pt-au-mono);color:var(--pt-au-muted)}

/* Success note (reset link sent, code resent) */
.pt-au-ok{
  display:flex;gap:10px;align-items:flex-start;margin:20px 0 0;padding:14px 16px;
  background:var(--pt-au-white);border:1px solid var(--pt-au-line);border-left:3px solid var(--pt-au-green);
  font-size:14px;line-height:1.45;
}
.pt-au-ok svg{flex:none;margin-top:1px}

/* --------------------------------------------------------------------------
   7. Why panel: desktop right column
   -------------------------------------------------------------------------- */
.pt-au-why{background:var(--pt-au-graphite);color:var(--pt-au-band-text);padding:48px 48px 40px;display:flex;flex-direction:column}
.pt-au-why-eyebrow{margin:0 0 28px;padding-bottom:12px;border-bottom:1px solid var(--pt-au-band-line);font:12.5px var(--pt-au-mono);color:var(--pt-au-band-dim)}
.pt-au-why-title{margin:0 0 28px;max-width:18ch;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--pt-au-band-text)}
.pt-au-pts{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.pt-au-pts li{display:grid;grid-template-columns:36px 1fr;gap:14px;margin:0}
.pt-au-pt-ic{width:36px;height:36px;border:1px solid var(--pt-au-band-line);display:flex;align-items:center;justify-content:center}
.pt-au-pt-ic svg{width:18px;height:18px;display:block}
.pt-au-pt-title{display:block;margin:0 0 2px;font-size:15px;font-weight:700;color:var(--pt-au-band-text)}
.pt-au-pt-text{font-size:14px;line-height:1.5;color:var(--pt-au-band-dim)}
.pt-au-why-foot{margin-top:auto;padding-top:32px;border-top:1px solid var(--pt-au-band-line);display:flex;justify-content:space-between;gap:12px;font:12.5px var(--pt-au-mono);color:var(--pt-au-band-dim)}

/* Why list: phone version, under the form */
.pt-au-why-m{display:none}

/* --------------------------------------------------------------------------
   8. Tablet and phone
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .pt-au-page{padding:0}
  .pt-au-shell{width:100%;grid-template-columns:1fr;border:0;background:transparent}
  .pt-au-why{display:none}
  .pt-au-form{min-height:0;padding:28px 20px 32px;background:var(--pt-au-white);border-bottom:1px solid var(--pt-au-line)}
  .pt-au-why-m{display:block;padding:24px 20px 40px}
  .pt-au-why-m ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
  .pt-au-why-m li{display:grid;grid-template-columns:28px 1fr;gap:12px;margin:0;font-size:13.5px;line-height:1.45;color:var(--pt-au-soft)}
  .pt-au-why-m li b{display:block;font-size:14px;color:var(--pt-au-ink)}
  .pt-au-why-m .pt-au-pt-ic{width:28px;height:28px;border:1px solid var(--pt-au-line-strong);background:var(--pt-au-white)}
  .pt-au-why-m .pt-au-pt-ic svg{width:14px;height:14px}
}
@media (max-width:640px){
  .pt-au-title{font-size:26px}
  .pt-au-lead{margin-bottom:22px}
  .pt-au-ctx{margin-bottom:22px}
  .pt-au-row2{grid-template-columns:1fr;gap:0}
  .pt-au-code{gap:6px}
  .pt-au-scope .pt-au-code input{height:52px;font-size:20px}
}

/* ==========================================================================
   OVERRIDES: only more specific .pt-au- selectors, each with a comment
   saying what it beats and why. List every one in the report.
   ========================================================================== */

/* Everything below was added for the live site. The block above is Plan/pt-auth.css, byte for byte. */

/* 1. §5a — GeneratePress prints `button:hover, button:focus { background:#333; color:#fff }` (0,1,1) inline on
      every page, and the child theme adds `button { color:#fff; background:#000 }`. Every <button> here restates
      background AND color for :hover, :focus and :active — the mockup only wrote :hover, and only for some.
      Beats: those two rules. */
.pt-au-scope .pt-au-btn:hover,.pt-au-scope .pt-au-btn:focus,.pt-au-scope .pt-au-btn:active{background:var(--pt-au-ink-hover);color:var(--pt-au-paper)}
.pt-au-scope .pt-au-btn2:hover,.pt-au-scope .pt-au-btn2:focus,.pt-au-scope .pt-au-btn2:active{background:var(--pt-au-white);color:var(--pt-au-ink);border-color:var(--pt-au-ink)}
.pt-au-scope .pt-au-eye:hover,.pt-au-scope .pt-au-eye:focus,.pt-au-scope .pt-au-eye:active{background:none;color:var(--pt-au-ink)}
.pt-au-scope .pt-au-link:hover,.pt-au-scope .pt-au-link:focus,.pt-au-scope .pt-au-link:active{background:none;color:var(--pt-au-accent);text-decoration:underline;text-underline-offset:3px}
/*    …and the rest state of the two text buttons, which the theme paints as black blocks: the mockup's
      `.pt-au-link` / `.pt-au-eye` (0,1,0) do beat `button` (0,0,1) for background and border, but the child
      theme's `button { color:#fff }` also loses only where color is set — .pt-au-link sets it, .pt-au-eye sets
      it. Nothing more needed; stated so the next person does not add it. */

/* 2. CAPITALS. The theme uppercases page headings (`.site-content h1`, (0,1,1)) — "SIGN IN" is exactly what this
      work removes. The mockup's `.pt-au-title { text-transform:none }` is (0,1,0) and loses. Beats: that rule. */
.pt-au-scope .pt-au-title,.pt-au-scope .pt-au-why-title{text-transform:none}
.pt-au-scope .pt-au-label,.pt-au-scope .pt-au-btn,.pt-au-scope .pt-au-btn2{text-transform:none;letter-spacing:0}

/* 3. THEME RESETS the mockup never had to fight. GeneratePress gives every ul `margin:0 0 1.5em 3em` and the
      browser its bullets — the why panel's list restates its own values at (0,1,0)+, so only the phone list's
      nested selector needs the same weight. `a.pt-au-btn` on the expired-link screen: the theme's `a` colour and
      underline. Beats: theme ul / a. */
.pt-au-scope a.pt-au-btn,.pt-au-scope a.pt-au-btn:hover,.pt-au-scope a.pt-au-btn:focus{color:var(--pt-au-paper);text-decoration:none;background:var(--pt-au-ink)}
.pt-au-scope .pt-au-why-m ul,.pt-au-scope .pt-au-pts{list-style:none;margin:0;padding:0}

/* 4. WOOCOMMERCE NOTICES inside the reset form (wc_print_notices): the theme's `.woocommerce-error` is a red
      box with an icon; here it is the brief's form-level error, and it is the only red on the page. Beats:
      WooCommerce's notice styling. */
.pt-au-scope .woocommerce-error,.pt-au-scope .woocommerce-message,.pt-au-scope .woocommerce-info{margin:0 0 18px;padding:10px 14px;border:1px solid var(--pt-au-red);border-left-width:3px;background:var(--pt-au-white);color:var(--pt-au-red);font-size:13.5px;list-style:none;border-radius:0}
.pt-au-scope .woocommerce-error::before,.pt-au-scope .woocommerce-message::before,.pt-au-scope .woocommerce-info::before{display:none}
.pt-au-scope .woocommerce-message,.pt-au-scope .woocommerce-info{border-color:var(--pt-au-green);color:var(--pt-au-ink)}

/* 5. THE PLAN FILE'S OWN RESET OUTRANKS ITS OWN RULES: `.pt-au-scope p { margin:0 }` is (0,1,1), while `.pt-au-lead
      { margin:0 0 28px }`, `.pt-au-stepno`, `.pt-au-hint`, `.pt-au-err` and `.pt-au-fine` are (0,1,0) — so every
      paragraph lost its spacing on the live site (lead measured 0px, §12 says 28px). Restated at (0,2,0), the values
      unchanged. Beats: the file's own `.pt-au-scope p`. */
.pt-au-scope .pt-au-lead{margin:0 0 28px}
.pt-au-scope .pt-au-stepno{margin:0 0 10px}
.pt-au-scope .pt-au-hint,.pt-au-scope .pt-au-err{margin:6px 0 0}
.pt-au-scope .pt-au-check + .pt-au-err{margin:-6px 0 12px 28px}
.pt-au-scope .pt-au-fine{margin:22px 0 0}
@media (max-width:640px){.pt-au-scope .pt-au-lead{margin-bottom:22px}}

/* 6. FULL BLEED. The site renders the page inside GeneratePress's centred .container on a white body, so the paper
      background was a 1160px box with white either side. Same break-out as /about/ and /help/: negative margins
      to the viewport, an explicit 100vw flex basis, overflow-x clipped. The shell keeps its own width rule.
      Beats: .container / #content layout. */
.pt-au-page{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);flex:0 0 100vw;width:100vw;max-width:100vw;overflow-x:clip}
body.pt-auth-page{overflow-x:clip}
@media (max-width:900px){.pt-au-page{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}}

/* 7. THE INLINE GATE (brief §9) — a new element the mockup does not have: the confirm-email / add-your-name prompt
      that opens over a listing, an offer, Buy now, a review or a forum post. The panel reuses the form components
      above; only the overlay and the panel box are new. Beats: nothing (new). */
.pt-au-gate{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px}   /* above the offer / message modals (.pt-modal-overlay) it opens over */
.pt-au-gate__backdrop{position:absolute;inset:0;background:rgba(26,26,26,.55)}
.pt-au-gate__panel{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--pt-au-white);border:1px solid var(--pt-au-line);padding:32px 36px 28px}
.pt-au-gate .pt-au-title{font-size:24px}
.pt-au-gate .pt-au-lead{margin-bottom:22px}
@media (max-width:640px){.pt-au-gate__panel{padding:24px 20px 20px}.pt-au-gate .pt-au-title{font-size:22px}}