/* KitchenTick redesign, lane F (sign-in and sign-up): the rules for these pages only, linked after roi.css by
   Html::setArea('auth'). Compose the shared components in roi.css ("KitchenTick components (lane K)").
   This file must never contain print rules or rules for the plain pages (body class "plain"): those stay last in
   roi.css, so prints, the inspector's copy and the plain pages always win. */

/* Batch 6 (owner's brief and the approved proposal of 4 Nov 2026): sign-in, the one-time setup link and sign-up
   in the app's look. Every rule needs the page's own <div class="auth"> (App::authPage(), SignupPages::shown()), so
   even if this file were linked anywhere else it would change nothing there; and it is linked for screens only.
   Colours are roi.css's variables, which a brand's ?p=theme sets: text is only ever --ink or --muted on white or
   the page, --ink on --pale, white on --green, --green on white; lime is never used here. No custom properties are
   set in this file, so a brand's theme always applies. Targets are at least 48px; focus is a black ring.
   Hover and ticked states never change a background behind --green text (a brand's dark accent makes --pale and
   --soft too dark for it: review of f5c507c, M1): they underline the words or thicken the border instead.
   Scope (review H1): every selector starts with body:has(.auth), main:has(> .auth) or .auth, so no rule can reach
   any other plain page, such as the inspector's copy. */

/* The page: the rounded type of the rest of the app, the logo centred, one comfortable column. */
body:has(.auth){font:17px/1.45 ui-rounded,"SF Pro Rounded","KitchenTick Rounded","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
body:has(.auth) > header{padding:2.2rem 1.2rem .4rem;text-align:center;background:none}
body:has(.auth) > header .brand{min-height:48px;font-size:1.6rem}
body:has(.auth) > main{max-width:30rem;margin:0 auto;padding:.8rem 1.2rem 3rem}
main:has(> .auth) > h1{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:.8rem 0 1.2rem}

/* Messages: a symbol and the words, never colour alone (the words are the page's own, unchanged). */
main:has(> .auth) > .flash,.auth .flash{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1.1rem;margin:0 0 1rem;border-radius:16px;font-weight:600}
main:has(> .auth) > .flash::before,.auth .flash::before{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;line-height:1}
main:has(> .auth) > .flash.ok::before,.auth .flash.ok::before{content:"\2713";content:"\2713" / ""}
main:has(> .auth) > .flash.error::before,.auth .flash.error::before{content:"!";content:"!" / ""}

/* The white card holding each form or message. */
.auth .card.pad{padding:1.4rem 1.3rem 1.5rem;margin:0 0 1rem;border-radius:var(--radius)}
.auth .card > :first-child{margin-top:0}
.auth .card > :last-child{margin-bottom:0}
.auth .card h2{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;margin:0 0 .5rem}
.auth .card p{margin:.4rem 0 .8rem}
.auth p.intro{margin:0 0 1.1rem;color:var(--ink);font-size:1.05rem}

/* "Step 1 of 4": a small label chip, as on the setup screen of the reference (1-shop-setup.png). */
.auth p.steps{display:inline-block;margin:0 0 .9rem;padding:.35rem .7rem;border-radius:8px;background:var(--pale);color:var(--ink);
  font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

/* Fields: large, with a border that shows against white (--muted, over 3:1). */
.auth label{display:block;margin:1.1rem 0 .4rem;font-weight:700}
.auth form > label:first-of-type{margin-top:0}
.auth label small{font-weight:400;color:var(--muted)}
.auth input:not([type=checkbox]):not([type=radio]):not([type=hidden]){min-height:52px;padding:.75rem 1rem;font-size:1.05rem;border:1.5px solid var(--muted);border-radius:12px;background:#fff;color:var(--ink)}
.auth input:focus-visible{outline:3px solid #000;outline-offset:2px;border-color:var(--ink)}

/* Buttons: 56px, the whole width on a phone; the main one deep green with white words, the other white. */
.auth button:not(.choice-row),.auth a.button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:56px;margin:1.3rem 0 0;
  padding:.7rem 1.2rem;border-radius:14px;font-size:1.05rem;font-weight:700;text-decoration:none}
.auth button.secondary{margin-top:.7rem;background:#fff;color:var(--green);border:1.5px solid var(--green)}
.auth button.secondary:hover{background:#fff;text-decoration:underline}
.auth .guide-buttons{display:grid;gap:0;margin:0}
.auth .card > form + form{margin-top:0}
.auth button:focus-visible,.auth a:focus-visible{outline:3px solid #000;outline-offset:2px}
.auth .card a:not(.button){color:var(--green);font-weight:700}
/* Links in running text: a 48px target without moving the words (padding, taken back by a negative margin). */
.auth .card a:not(.button),.auth label.choice a{display:inline-block;min-width:48px;min-height:48px;padding:12px 4px;margin:-12px -4px;text-align:center}

/* Show password (owner, 5 Nov 2026): a white button under the field, 48px, hidden until assets/auth.js runs (the
   button rule above sets display, so [hidden] is restated here, or it would show without the script). */
.auth button.reveal{display:inline-flex;width:auto;min-height:48px;margin:.5rem 0 0;padding:0 1rem;background:#fff;color:var(--green);
  border:1.5px solid var(--green);border-radius:12px;font-size:.95rem;font-weight:700}
.auth button.reveal:hover{background:#fff;text-decoration:underline}
.auth button.reveal[hidden]{display:none}
.auth p.lost-link{margin:0 0 1rem;padding:0 .2rem}

/* Notes under a form: the hint in a pale card, with its icon (sign-in: staff use the shop tablet). */
.auth .hint{color:var(--muted);font-size:.95rem}
.auth p.auth-note{display:flex;align-items:center;gap:.8rem;margin:0 0 1rem;padding:1rem 1.1rem;border-radius:var(--radius);
  background:var(--pale);border:1px solid var(--pale-line);color:var(--ink);font-size:.95rem}
.auth p.auth-note .icon{width:1.5rem;height:1.5rem;color:var(--ink);stroke-width:1.9}

/* Sign-up: the kinds of business as large choices, the Companies House matches, the terms. */
.auth fieldset{border:0;padding:0;margin:0 0 .4rem;background:none}
.auth legend{padding:0;margin:0 0 .3rem;font-weight:700}
.auth .choices{grid-template-columns:1fr;gap:.6rem;margin:.4rem 0 0}
.auth label.choice{display:flex;align-items:center;gap:.8rem;min-height:56px;margin:.6rem 0 0;padding:.6rem 1rem;border:1.5px solid var(--line);
  border-radius:14px;background:#fff;font-weight:600}
.auth .choices label.choice{margin:0;min-height:56px;font-weight:600}
.auth label.choice:has(input:checked){border-color:var(--green);background:#fff;box-shadow:inset 0 0 0 1.5px var(--green)}
.auth label.choice:has(input:focus-visible){outline:3px solid #000;outline-offset:2px}
.auth label.choice input{width:1.4rem;height:1.4rem;flex:none;accent-color:var(--green)}
.auth label.choice a{color:var(--green);font-weight:700;text-decoration:underline}
/* The terms box is one sentence with a link in it: kept as running text, the box beside it. */
.auth label.choice:has(> input[type=checkbox]){display:block;position:relative;padding:.9rem 1rem .9rem 3.4rem;line-height:1.45}
.auth label.choice:has(> input[type=checkbox]) input{position:absolute;left:1rem;top:50%;margin:-.7rem 0 0}
.auth .found{margin:.8rem 0 0;padding:.8rem 1rem;border:1px solid var(--pale-line);border-left:1px solid var(--pale-line);border-radius:16px;background:var(--pale);color:var(--ink)}
.auth .found p{margin:.2rem 0 .5rem}
.auth button.choice-row{min-height:48px;border-radius:12px;color:var(--ink)}
.auth ul.suggestions{border:1.5px solid var(--muted);border-radius:12px}

/* Wider screens: the same column, centred, with more room around it; nothing is hidden. */
@media (min-width:900px){
  body:has(.auth) > header{padding-top:3.2rem}
  body:has(.auth) > main{max-width:32rem;padding-top:1.2rem}
  main:has(> .auth) > h1{font-size:2.5rem}
  .auth .card.pad{padding:1.8rem 1.8rem 1.9rem}
}