/* public/look-apple/login.css — the NEW look of the login pages (lib/web/auth.js loginPage / loginPageUsers / the
   logout confirm; panel-look.js places this file before the page's own <style>, so every rule here outweighs it by the
   html[data-look] prefix, never by order): area chat-login-listen, spec §6 Login.
   A 360 card on --s1 (radius 20, shadow-3) centred on --bg; the mark + the name (Title) and the subtitle (label-2);
   fields 44 high with 17 px text, the focus halo, the error as bad-text + the field's red halo; Log in = the one Lapis
   primary, full width, 50 high, radius 12; the note in label-3; "Back to the chat" plain accent-text. The 300 ms shake
   on a wrong password stays (the page's own keyframes, guarded for reduced motion there). No !important. */

html[data-look="apple"] body { background: var(--bg); color: var(--label); font-family: var(--font-text); }
html[data-look="apple"] .wrap { width: 360px; gap: 12px; }
html[data-look="apple"] .box {
  background: var(--s1); border-radius: var(--r-xl); padding: 28px 24px 24px;
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
html[data-look="apple"] .brand { gap: 10px; }
html[data-look="apple"] .mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
html[data-look="apple"] .mark::after { inset: 6px; border-radius: 2px; background: #0B0D12; }
html[data-look="apple"] h1 { font: 600 var(--fs-title)/var(--lh-title) var(--font-display); letter-spacing: normal; color: var(--label); }
html[data-look="apple"] .sub { color: var(--label-2); font: 400 14px/20px var(--font-text); margin: 6px 0 20px; }

/* the fields: s2, no border, radius 10, 44 high, 17 px (iOS never zooms), the 3 px focus halo */
html[data-look="apple"] .box input:not([type=checkbox]):not([type=hidden]) {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-m);
  background-color: var(--s2); color: var(--label); font: 400 17px/22px var(--font-text);
  transition: box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
html[data-look="apple"] .box .pwrow input:not([type=checkbox]) { padding-right: 52px; }
html[data-look="apple"] .box input:not([type=checkbox]):hover { background-color: #262B34; }
html[data-look="apple"] .box input:not([type=checkbox]):focus { background-color: var(--s2); box-shadow: 0 0 0 3px var(--ring); }
html[data-look="apple"] .box input::placeholder { color: var(--label-3); }
/* the error: the field's red halo (focused or not) + the line in bad-text */
html[data-look="apple"] .box input[aria-invalid="true"]:not([type=checkbox]), html[data-look="apple"] .box input[aria-invalid="true"]:not([type=checkbox]):hover {
  box-shadow: 0 0 0 2px var(--bad-text);
}
html[data-look="apple"] .box input[aria-invalid="true"]:not([type=checkbox]):focus { box-shadow: 0 0 0 2px var(--bad-text), 0 0 0 5px rgba(255, 123, 115, .22); }
html[data-look="apple"] .err { color: var(--bad-text); font: 400 13px/18px var(--font-text); min-height: 18px; margin: 8px 2px 0; }
/* (users mode: the Password label sits between the two fields, so the classic .field + .field never matched) */
html[data-look="apple"] .field ~ .field { margin-top: 12px; }

/* the eye: a quiet icon button inside the field (44 × 44 on a phone) */
html[data-look="apple"] .eye {
  right: 6px; width: 32px; height: 32px; border-radius: var(--r-s); color: var(--label-2);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
html[data-look="apple"] .eye:hover { background: var(--s3); color: var(--label); }
html[data-look="apple"] .eye svg { width: 18px; height: 18px; }

/* "Keep me signed in" (users mode): the whole line is the target */
html[data-look="apple"] label.keep { min-height: 44px; margin-top: 4px; gap: 10px; color: var(--label-2); font: 400 15px/20px var(--font-text); }
html[data-look="apple"] label.keep input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Log in: the one primary (Lapis fill, a white 600 label: 4.88:1) */
html[data-look="apple"] .go {
  min-height: 50px; margin-top: 12px; border-radius: 12px; background: var(--accent); color: #fff;
  font: 600 17px/22px var(--font-text); letter-spacing: normal;
  transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
html[data-look="apple"] .go:hover { opacity: 1; background: var(--accent-hover); }
html[data-look="apple"] .go:active { background: var(--accent-press); transform: scale(.98); }
html[data-look="apple"] .go:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
html[data-look="apple"] .note { color: var(--label-3); font: 400 13px/18px var(--font-text); margin-top: 14px; }
/* "Back to the chat" / "Stay signed in": a plain button (accent text), a 44 px target */
html[data-look="apple"] .back {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-s);
  color: var(--accent-text); font: 400 15px/20px var(--font-text);
}
html[data-look="apple"] .back:hover { text-decoration: none; background: rgba(255, 255, 255, .05); }
html[data-look="apple"] .back:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

@media (max-width: 860px) {
  html[data-look="apple"] .eye { right: 0; width: 44px; height: 44px; }
  html[data-look="apple"] .box { padding: 24px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-look="apple"] .go:active { transform: none; }
}
@media (prefers-contrast: more) {
  html[data-look="apple"] .box input:not([type=checkbox]):not([type=hidden]) { border: 1px solid var(--sep-strong); }
}