/* BuyerBridge AI customer theme: white and yellow (UI-THEME-1, LOGO-1; THEME T1, 11 Oct 2026).
   The one shared stylesheet for customer screens. Every colour and font lives in :root and nowhere else, so a later
   change is one block (UI-THEME-1b). No inline styles on customer pages; the CSP is style-src 'self'.
   Yellow on white is 1.93:1: yellow is a background with navy text, or text on navy (.on-navy), never text on white.
   Signed-in and operator pages link app.css after this file for their layout; public pages link home.css. So this file
   sets no page layout: no header/nav/main/footer/paragraph rules, no heading margins or sizes, and its form and button
   rules apply inside .auth-card only (THEME T3, Step 276).
   Step 297 (owner, 12 Oct 2026): --bb-font-size-body is the one base body size (was 16px), and every heading is
   --bb-font-head at 700, the homepage's stack. app.css and home.css take both from here.
   Step 298 (owner, 12 Oct 2026): h3 is --bb-font-h3 at 700, a real bold face served by fonts.css; every button is
   --bb-font-size-button (16px), weight unchanged.
   Step 300 (owner, 12 Oct 2026): the public heading scale is the home page's, --bb-font-size-h1/-h2/-h3 with phone
   values for 620px and below; home.css applies it. Signed-in and operator pages keep app.css's own sizes.
   Step 301 (owner, 12 Oct 2026): every h3 is identical on every page: --bb-font-h3 at --bb-font-weight-h3 (400, the
   Regular face), --bb-font-size-h3, --bb-line-height-h3 and --bb-margin-bottom-h3; home.css and app.css apply the
   size, line-height and margin. Footer column headings keep their own size.
   Step 302 (owner, 12 Oct 2026): on the auth-card pages the heading and its intro are centred, and the submit of the
   form a person fills in is the main button (Buttons and Forms, below).
   Step 304 (architect ruling, 12 Oct 2026): the rate-limit page is an auth card too, with the logo above its heading
   (Forms, below).
   Step 305 (owner, 12 Oct 2026): every h3 is Source Sans 3 Bold 18px: --bb-font-h3 is the body-text stack, weight 700
   (the real Bold face fonts.css serves), 18px at every width. fonts.css keeps its other faces, unused. */
:root{
  --bb-navy:#091C27;
  --bb-yellow:#E7B317;
  --bb-white:#FFFFFF;
  --bb-link:#1C6EEE;
  --bb-link-hover:var(--bb-navy);
  --bb-text:var(--bb-navy);
  --bb-text-muted:#5B6670;
  --bb-surface:var(--bb-white);
  --bb-surface-alt:#F7F8FA;
  --bb-line:#DCE2EA;
  --bb-line-on-navy:#27404C;
  --bb-shadow:rgba(9,28,39,.06);
  --bb-error:#9D1C1C;
  --bb-success:#225D37;
  --bb-focus-ring:var(--bb-navy);
  --bb-font-head:"Oswald","Arial Narrow",Impact,sans-serif;
  --bb-font-text:"Source Sans 3","Segoe UI",Arial,sans-serif;
  --bb-font-size-body:17px;
  --bb-font-h3:var(--bb-font-text);
  --bb-font-size-button:16px;
  --bb-font-size-h1:35.84px;
  --bb-font-size-h1-phone:30px;
  --bb-font-size-h2:30.72px;
  --bb-font-size-h2-phone:24px;
  --bb-font-size-h3:18px;
  --bb-font-weight-h3:700;
  --bb-line-height-h3:1.03;
  --bb-margin-bottom-h3:12px;
  --bb-radius:8px;
  --bb-max:1180px;
}

/* Base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bb-surface);color:var(--bb-text);font-family:var(--bb-font-text);font-size:var(--bb-font-size-body);font-weight:400;line-height:1.6}
h1,h2,h3{font-family:var(--bb-font-head);font-weight:700}
h3{font-family:var(--bb-font-h3);font-weight:var(--bb-font-weight-h3)}
img{max-width:100%;height:auto}

/* Links: brand blue on white (4.65:1), underlined in body text, the same colour once visited, navy on hover */
a{color:var(--bb-link);text-decoration:underline;text-underline-offset:2px}
a:visited{color:var(--bb-link)}
a:hover{color:var(--bb-link-hover)}

/* Focus: navy ring on light surfaces, yellow on navy (9.00:1) */
:focus-visible{outline:3px solid var(--bb-focus-ring);outline-offset:2px}

/* Navy surfaces */
.on-navy{background:var(--bb-navy);color:var(--bb-white)}
.on-navy a,.on-navy a:visited{color:var(--bb-white)}
.on-navy a:hover,.on-navy .accent{color:var(--bb-yellow)}
.on-navy :focus-visible{outline-color:var(--bb-yellow)}

/* Buttons (architect, 11 Oct 2026): yellow only on .btn-primary, a main action, with navy text (9.00:1). Owner, STEP
   282/284: main buttons have no visible border (transparent at the old 1px width, so the size is unchanged) and keep
   the navy focus ring the public main buttons have. Every other button, Logout included, is the secondary style:
   white, 1px navy border, navy text. */
.auth-card button,.btn-primary,.btn-secondary{display:inline-block;padding:10px 20px;font:inherit;font-size:var(--bb-font-size-button);font-weight:600;line-height:1.3;border-radius:var(--bb-radius);text-decoration:none;cursor:pointer}
.auth-card button,.btn-secondary{background:var(--bb-white);color:var(--bb-navy);border:1px solid var(--bb-navy)}
.btn-secondary:visited{color:var(--bb-navy)}
.btn-primary,.auth-card .btn-primary{background:var(--bb-yellow);color:var(--bb-navy);border:1px solid transparent}
.btn-primary:visited{color:var(--bb-navy)}
.auth-card button:hover,.btn-secondary:hover,.btn-primary:hover,.auth-card .btn-primary:hover{background:var(--bb-navy);color:var(--bb-white)}
.btn-primary:focus-visible{outline:3px solid var(--bb-focus-ring);outline-offset:4px}
/* Step 302: the submit of the auth-card form a person fills in (it has a required field: sign in, create account,
   verify email, reset password, request reset, start free trial) is the main button above, hover and focus included.
   A form with nothing to fill in (Continue with Google, Send Another Verification Message, Log Out) stays secondary. */
.auth-card form:has(input[required]) button{background:var(--bb-yellow);color:var(--bb-navy);border:1px solid transparent}
.auth-card form:has(input[required]) button:hover{background:var(--bb-navy);color:var(--bb-white)}
.auth-card form:has(input[required]) button:focus-visible{outline:3px solid var(--bb-focus-ring);outline-offset:4px}

/* Forms */
.auth-card label{display:block;font-weight:600;margin:12px 0 4px}
.auth-card input,.auth-card select,.auth-card textarea{font:inherit;color:var(--bb-text);background:var(--bb-white);border:1px solid var(--bb-text-muted);border-radius:6px;padding:8px 10px;width:100%;max-width:100%}
.auth-card input[type="checkbox"],.auth-card input[type="radio"]{width:auto}
.form-row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:0 0 12px}
.form-row>*{flex:1 1 220px}
.field-s{max-width:12rem}
.field-m{max-width:24rem}
.field-l{max-width:40rem}
.auth-card{max-width:460px;margin:32px auto;padding:28px 24px;background:var(--bb-surface);border:1px solid var(--bb-line);border-radius:12px}
.auth-card input,.auth-card button{width:100%}
.auth-card .lead{color:var(--bb-text-muted)}
.auth-card .error{margin:0 0 12px}
.hint{font-weight:400;color:var(--bb-text-muted)}
.divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--bb-text-muted)}
.divider:before,.divider:after{content:"";flex:1;border-top:1px solid var(--bb-line)}
.auth-card button:disabled,.btn-google{opacity:.6;cursor:not-allowed}
.login-link{margin-top:16px;text-align:center;color:var(--bb-text-muted)}
/* Step 302: the heading and its intro are centred: the paragraph straight after the h1 and every paragraph before the
   form. Labels, fields, helper text and the links after the form keep the card's left alignment. */
.auth-card>h1,.auth-card>h1+p,.auth-card>p:has(~form){text-align:center}
/* Step 304: the rate-limit page's card (H28): the LOGO-1 logo centred above the heading, the Sign In action centred
   under the message, the reference small and muted. */
.auth-card .auth-logo{margin:0 0 20px;text-align:center}
.auth-card .auth-logo svg{display:inline-block;width:auto;height:40px;max-width:100%}
.auth-card .auth-action{margin:24px 0 0;text-align:center}
.auth-card .auth-reference{margin:16px 0 0;text-align:center;color:var(--bb-text-muted);font-size:calc(var(--bb-font-size-body)*.82)}
/* R525-3 (Step 532): the checkout billing form's declaration tick inline with its sentence, left-aligned. app.css's
   label{display:block} and input{width:100%} had stretched the checkbox across the card, centring it on its own line;
   these outrank them by specificity. Scoped to the checkout pages' .checkout block, as theme.css keeps no bare form rules. */
.checkout label.tick{display:flex;align-items:flex-start;gap:10px;text-align:left}
.checkout label.tick>input[type="checkbox"]{width:auto;flex:none;margin:.3em 0 0}

/* Content blocks */
.card{background:var(--bb-surface);color:var(--bb-text);border:1px solid var(--bb-line);border-radius:var(--bb-radius);padding:20px;margin:0 0 16px}
.columns-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.notice{background:var(--bb-surface);color:var(--bb-text);border:1px solid var(--bb-line);border-left:4px solid var(--bb-yellow);padding:12px 16px;margin:0 0 16px}
.error{color:var(--bb-error)}
.success{color:var(--bb-success)}
.muted{color:var(--bb-text-muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--bb-line);vertical-align:top}
.table th{background:var(--bb-surface-alt);color:var(--bb-text);font-weight:600}
.table-scroll{overflow-x:auto}
.progress{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 16px;padding:0}
.progress li{padding:6px 12px;border:1px solid var(--bb-line);border-radius:999px;background:var(--bb-surface);color:var(--bb-text-muted)}
.progress li.done{background:var(--bb-navy);color:var(--bb-white);border-color:var(--bb-navy)}
.progress li.current{background:var(--bb-yellow);color:var(--bb-navy);border-color:var(--bb-navy)}

/* Phones: one column */
@media(max-width:900px){.columns-3{grid-template-columns:1fr}}