/* styles/phone-login.css — THE PHONE SIGN-IN (6 Oct 2026, phone page group 5), built to Hugo's phone mockup 27: a dark
   forest-green field, one cream sign-in panel centred on it, the supplied type hierarchy (TRUENORTHS eyebrow, SIGN IN,
   "Production tracker"), cream fields with tracked labels, a show/hide eye on the password, the stay-logged-in row
   with "Forgot password?", a sage SIGN IN button and "Need an account? Request access". No app navigation.
   - Phone tier only (body[data-ui-tier="s"]); the desktop sign-in is unchanged.
   - The sign-in keeps ITS OWN look whatever skin the last project wore: the panel's colours are the base palette,
     captured once on :root (a skin redefines the palette tokens on <body>, never on :root), so a dark glass skin
     can no longer turn the panel dark on the phone. Tokens only (no hex / rgb / hsl).
   - 6 Oct 2026 (round 2, measured): every size is the mockup's own at 412 px wide (scratchpad phone-specs/27-login):
     the panel 315 x 382 centred (top 266), fields 275 x 38, the button 274 x 36; text sizes from the width of the
     mockup's own strings in Inter (10-12px, as drawn). Tap areas stay 40px+: a field's label row is part of its tap
     area, the eye / the checkbox row / the links / the button carry transparent 40px hit areas around their faces.
     Corners: the phone's tight scale (Hugo, 6 Oct: tighter than the mockups on purpose). */

:root {
  --shl-lg-field: var(--shade-48);
  --shl-lg-field-hi: var(--shade-18);
  --shl-lg-deep: var(--shade-6);
  --shl-lg-panel: var(--cream-4);
  --shl-lg-input: var(--cream-10);
  --shl-lg-input-line: var(--cream-28);
  --shl-lg-title: var(--shade-48);
  --shl-lg-text: var(--ink-muted);
  --shl-lg-label: var(--taupe-4);
  --shl-lg-ink: var(--ink);
  --shl-lg-sage: var(--leaf);
  --shl-lg-on-sage: var(--cream);
  --shl-lg-link: var(--olive-4);
  --shl-lg-shadow: var(--shade-6);
  --shl-lg-white: var(--white);
  --shl-lg-olive-grey: var(--grey-3-ink);
  --shl-lg-grey: var(--grey-5);
  --shl-lg-link-deep: var(--olive-3);
}

/* the field: dark forest green, lit softly behind the panel (about 46% down), near-black at the corners */
body[data-ui-tier="s"] .login-shell {
  padding: 24px 16px; place-items: safe center; align-content: safe center;
  background: var(--shl-lg-field); color: var(--shl-lg-ink);
}
body[data-ui-tier="s"] .login-shell .login-backdrop {
  background: radial-gradient(270px 560px at 50% 46%, var(--shl-lg-field-hi) 0%, var(--shl-lg-field-hi) 42%, var(--shl-lg-field) 78%, color-mix(in srgb, var(--shl-lg-field) 50%, var(--shl-lg-deep)) 100%);
}
body[data-ui-tier="s"] .login-shell::after { display: none; }

/* the cream panel: 315 x 382, a lit top edge, a heavy dark shadow */
body[data-ui-tier="s"] .login-shell .login-card {
  box-sizing: border-box; width: min(314.6px, calc(100% - 32px)); padding: 21.5px 18.8px 9.6px; border-radius: var(--pk-radius-card); color-scheme: light;
  background: var(--shl-lg-panel); color: var(--shl-lg-ink);
  border: 1px solid color-mix(in srgb, var(--shl-lg-deep) 60%, transparent); background-clip: padding-box;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--shl-lg-white) 55%, transparent),
    0 14px 44px color-mix(in srgb, var(--shl-lg-shadow) 80%, transparent), 0 4px 12px color-mix(in srgb, var(--shl-lg-shadow) 40%, transparent);
}
body[data-ui-tier="s"] .login-shell .login-brand { margin-bottom: 0; }
body[data-ui-tier="s"] .login-shell .login-eyebrow {
  font-size: 10px; line-height: 12px; font-weight: var(--fw-bold); letter-spacing: 0.18em; color: var(--shl-lg-label);
}
body[data-ui-tier="s"] .login-shell .login-title {
  margin: 12.1px 0 0; font-size: 33px; line-height: 33px; letter-spacing: -0.02em; color: color-mix(in srgb, var(--shl-lg-title) 94%, var(--shl-lg-panel));
}
body[data-ui-tier="s"] .login-shell .login-sub { margin-top: 6.8px; font-size: 11.2px; line-height: 14px; color: var(--shl-lg-text); letter-spacing: 0; }
body[data-ui-tier="s"] .login-shell .login-sub--left { font-size: 12px; line-height: 16px; }
body[data-ui-tier="s"] .login-shell .login-form { gap: 11.3px; margin-top: 16.6px; }
body[data-ui-tier="s"] .login-shell .login-field { gap: 5.5px; }
body[data-ui-tier="s"] .login-shell .login-label {
  margin-left: 1px; font-size: 9.5px; line-height: 12px; font-weight: var(--fw-bold); letter-spacing: 0.1em; color: var(--shl-lg-label);
}
/* the fields: 275 x 38, warm white, a tan hairline; the typed text at the mockup's size (16px on iOS, which zooms
   into a field under 16px); the password's dots at 16px (the mockup draws them large) */
body[data-ui-tier="s"] .login-shell .login-input {
  box-sizing: border-box; width: 100%; height: 38.2px; min-height: 0; padding: 0 12.7px; border-radius: var(--pk-radius-control);
  font-size: 11.6px; font-weight: var(--fw-reg, 400); color: var(--shl-lg-ink);
  background: color-mix(in srgb, var(--shl-lg-input) 70%, var(--shl-lg-on-sage)); border: 1px solid color-mix(in srgb, var(--shl-lg-input-line) 80%, var(--shl-lg-label)); box-shadow: none;
}
body[data-ui-tier="s"] .login-shell .login-pw .login-input { font-size: 16px; letter-spacing: 0; padding-left: 13.4px; }
body[data-ui-tier="s"] .login-shell .login-input::placeholder { font-size: 11.6px; letter-spacing: 0; color: color-mix(in srgb, var(--shl-lg-text) 92%, var(--shl-lg-ink)); opacity: 1; }
body[data-ui-tier="s"] .login-shell .login-input:focus {
  outline: none; border-color: var(--shl-lg-sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--shl-lg-sage) 22%, transparent);
}
@supports (-webkit-touch-callout: none) { body[data-ui-tier="s"] .login-shell .login-input { font-size: 16px; } }
/* the password field + its show / hide eye (src/LoginPage.jsx, phone only): an 18 x 12 line eye in a 40px hit area */
body[data-ui-tier="s"] .login-shell .login-pw { position: relative; display: block; }
body[data-ui-tier="s"] .login-shell .login-pw .login-input { padding-right: 44px; }
body[data-ui-tier="s"] .login-shell .login-eye {
  position: absolute; top: 50%; right: 1.2px; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--shl-lg-label); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .login-shell .login-eye svg { width: 20.4px; height: 20.4px; }
body[data-ui-tier="s"] .login-shell .login-eye:active { background: color-mix(in srgb, var(--shl-lg-label) 14%, transparent); }
body[data-ui-tier="s"] .login-shell .login-eye[aria-pressed="true"] { color: var(--shl-lg-link); }

/* stay logged in · forgot password: one row, each 40px to tap */
body[data-ui-tier="s"] .login-shell .login-row { gap: 0 6px; margin-top: -8.3px; flex-wrap: nowrap; }
body[data-ui-tier="s"] .login-shell .login-remember {
  min-height: 40px; gap: 8.8px; margin: 0 0 0 1px; font-size: 10px; letter-spacing: -0.02em; color: var(--shl-lg-text); white-space: nowrap;
}
body[data-ui-tier="s"] .login-shell .login-remember input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; box-sizing: border-box; width: 14.7px; height: 14.7px; margin: 0;
  border: 1.2px solid color-mix(in srgb, var(--shl-lg-text) 85%, var(--shl-lg-panel)); border-radius: var(--pk-radius-small);
  background: var(--shl-lg-white); display: grid; place-items: center; cursor: pointer;
}
body[data-ui-tier="s"] .login-shell .login-remember input[type="checkbox"]:checked { background: var(--shl-lg-link); border-color: var(--shl-lg-link); }
body[data-ui-tier="s"] .login-shell .login-remember input[type="checkbox"]:checked::after {
  content: ""; width: 4px; height: 7.5px; margin-top: -1.5px; border: solid var(--shl-lg-white); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
body[data-ui-tier="s"] .login-shell .login-request-link {
  min-height: 40px; font-size: 10.2px; color: var(--shl-lg-link); font-weight: var(--fw-bold); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
body[data-ui-tier="s"] .login-shell .login-forgot-link { margin-left: auto; font-size: 10px; letter-spacing: -0.02em; }

/* the sage SIGN IN button: 274 x 36 face, a 40px hit area (transparent top / bottom border) */
body[data-ui-tier="s"] .login-shell .login-submit {
  box-sizing: border-box; height: 40.2px; min-height: 0; margin: -7.4px 0 0; padding: 0 12px;
  border: 2px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 2px);
  font-size: 11.6px; font-weight: var(--fw-bold); letter-spacing: 0.04em;
  color: var(--shl-lg-white); background-color: color-mix(in srgb, var(--shl-lg-sage) 89%, var(--shl-lg-panel)); background-image: none;
  box-shadow: none; filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--shl-lg-shadow) 22%, transparent));
}
body[data-ui-tier="s"] .login-shell .login-submit:disabled { opacity: 1; cursor: default; }
body[data-ui-tier="s"] .login-shell .login-foot {
  display: flex; align-items: center; justify-content: center; gap: 0 3px; height: 40px; margin-top: 4.2px;
  font-size: 10.2px; color: var(--shl-lg-text);
}
body[data-ui-tier="s"] .login-shell .login-foot .login-request-link { display: inline-flex; align-items: center; }
body[data-ui-tier="s"] .login-shell .login-error { font-size: 12px; }
body[data-ui-tier="s"] .login-shell .login-hint-line { font-size: 12px; color: var(--shl-lg-text); }

/* ── ROUND 2 (6 Oct 2026): the judges' findings, measured at the glyph (bench2/table2.py 27) ──
   - the greys are the mockup's olive-grey (L* 49, a* -2, b* +7), not a brown: TRUENORTHS, the labels, the subtitle,
     the options row, the footer, the eye; the password's dots its mid grey (#404944); the checkbox a neutral grey rim
   - the small type a notch larger with a tighter track: the mockup's face draws taller at the same width
   - corners: the fields on the phone's tight scale (4, the mockup draws 7), the checkbox square (the mockup's 3; the
     scale's smallest step, 4, would be rounder than the mockup)
   - the sage button: the mockup's softer, greyer sage; a lighter shadow under it */
body[data-ui-tier="s"] .login-shell {
  --shl-lg-grey-ink: color-mix(in srgb, color-mix(in srgb, var(--shl-lg-olive-grey) 50%, var(--shl-lg-text)) 92%, var(--shl-lg-panel));
}
body[data-ui-tier="s"] .login-shell .login-eyebrow,
body[data-ui-tier="s"] .login-shell .login-label { color: var(--shl-lg-grey-ink); }
body[data-ui-tier="s"] .login-shell .login-sub,
body[data-ui-tier="s"] .login-shell .login-remember,
body[data-ui-tier="s"] .login-shell .login-foot { color: var(--shl-lg-grey-ink); }
body[data-ui-tier="s"] .login-shell .login-eye { color: var(--shl-lg-grey-ink); }
body[data-ui-tier="s"] .login-shell .login-eye svg { transform: scale(1, 0.945); }
body[data-ui-tier="s"] .login-shell .login-input { border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .login-shell .login-input::placeholder { font-size: 12.5px; letter-spacing: -0.3px; color: var(--shl-lg-olive-grey); }
body[data-ui-tier="s"] .login-shell .login-pw .login-input { color: color-mix(in srgb, var(--shl-lg-olive-grey) 62%, var(--shl-lg-field)); padding-left: 12px; }
body[data-ui-tier="s"] .login-shell .login-remember input[type="checkbox"] {
  border-radius: 0; border-color: color-mix(in srgb, var(--shl-lg-grey) 90%, var(--shl-lg-white));
}
body[data-ui-tier="s"] .login-shell .login-request-link { color: color-mix(in srgb, var(--shl-lg-link-deep) 90%, var(--shl-lg-olive-grey)); }
body[data-ui-tier="s"] .login-shell .login-forgot-link { letter-spacing: 0; }
body[data-ui-tier="s"] .login-shell .login-foot { font-size: 11px; letter-spacing: -0.4px; }
body[data-ui-tier="s"] .login-shell .login-foot .login-request-link { letter-spacing: 0.036em; }
body[data-ui-tier="s"] .login-shell .login-submit {
  font-size: 12.3px; letter-spacing: 0.19px;
  background-color: color-mix(in srgb, var(--shl-lg-sage) 70%, color-mix(in srgb, var(--shl-lg-panel) 60%, var(--shl-lg-grey)));
  filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--shl-lg-shadow) 14%, transparent));
}
/* the field's glow around the panel a notch wider (the mockup's is brightest just above and below it) */
body[data-ui-tier="s"] .login-shell .login-backdrop {
  background: radial-gradient(290px 610px at 50% 46%, var(--shl-lg-field-hi) 0%, var(--shl-lg-field-hi) 52%, var(--shl-lg-field) 86%, color-mix(in srgb, var(--shl-lg-field) 50%, var(--shl-lg-deep)) 100%);
}