/* ═══════════════════════════════════════════════════════════════════════════
   PM EMBER — the sign-in pages (signed out, so always Ember)                       2026-10-03

   Loaded LAST in the <head> of: signin.html, admin-login.html, hiring-login.html, hiring-signup.html,
   hiring-reset.html, hiring-verify.html, family-invite-accept.html. These pages are seen before anyone signs in, so
   the look switch (js/pm-look.js) never runs on them: this sheet is unscoped and Ember is simply ON.
   Values from ~/Private Mentorship Website/EMBER-DESKTOP-SPEC.md (the app's ember.ts / ui.tsx), and its colour law:
   orange = the main action / needs you; white = fine; grey = done / off; red #FF5A5F = errors only; no green, pink, blue.

     §1 tokens, type, the ground          §2 signin.html: the stage (dot matrix kept) and the card
     §3 signin.html: fields, buttons      §4 signin.html: who / accounts / Face ID / signed in / errors
     §5 signin.html: 2-step dialog        §6 signin.html: the password-reset sheet
     §7 the auth-shell pages (admin-login, hiring-login, hiring-signup, hiring-reset, hiring-verify)
     §8 family-invite-accept: already drawn by css/pm-ember-family.css + css/ember/desk-family/family-invite-accept.css

   Every rule is lifted by `html ` (one element of weight) so it wins over the page's own <style> however the two are
   ordered; no display is ever forced (the pages show and hide their steps with classes, [hidden] and inline styles).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. tokens, type, the ground ──────────────────────────────────────────── */
:root {
  --ea-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ea-ground:
    radial-gradient(90% 42% at 88% -6%, rgba(255,255,255,.11), rgba(255,255,255,0) 70%),
    radial-gradient(70% 38% at -12% 58%, rgba(255,106,31,.07), rgba(255,106,31,0) 70%),
    radial-gradient(80% 40% at 110% 96%, rgba(150,160,185,.07), rgba(150,160,185,0) 70%),
    linear-gradient(180deg, #1F2023 0%, #1A1B1E 38%, #141517 100%);
  /* the sign-in stage: the same ground with a quiet warm light low in the middle */
  --ea-ground-warm:
    radial-gradient(62% 34% at 50% 108%, rgba(255,106,31,.15), rgba(255,106,31,0) 72%),
    var(--ea-ground);
  --ea-glass: linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.038) 46%, rgba(255,255,255,.026) 100%);
  --ea-lift: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.22), 0 22px 40px -24px rgba(0,0,0,.85);
  --ea-key: linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.035) 55%, rgba(255,255,255,.02) 100%);
  --ea-sheen: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  --ea-or: #FF6A1F; --ea-or-ink: #FF8A4C;
  --ea-or-fill: linear-gradient(180deg, #FF6E29, #F4560E);
  --ea-or-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -3px 9px rgba(150,38,0,.3), 0 18px 34px -14px rgba(255,106,31,.7), 0 2px 6px rgba(0,0,0,.3);
  --ea-or-shadow-off: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -3px 9px rgba(150,38,0,.3);
  --ea-bad: #FF5A5F;
  --ea-sheet: #1C1D20;
  --ea-ease: cubic-bezier(.33,1,.68,1);
  --ea-err-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5v.01'/%3E%3C/svg%3E");
  --ea-ok-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
}
/* js/auth-shell.css reads these: its blue accent, green success and light paper become Ember's (only where it draws) */
.auth-nav, .auth-shell {
  --bg: #17181B; --paper: #1F2023; --surface: #1F2023;
  --ink: #FFFFFF; --ink-2: #E6E7EA; --ink-mute: #A0A5B1; --ink-tert: #6B7080;
  --hair: rgba(255,255,255,.09); --hair-light: rgba(255,255,255,.06); --input-bg: rgba(0,0,0,.28);
  --accent: #FF6A1F; --accent-deep: #F2550D; --accent-fade: rgba(255,106,31,.12); --accent-border: rgba(255,138,76,.45);
  --danger: #FF5A5F; --danger-fade: rgba(255,90,95,.1);
  --success: #E6E7EA; --success-fade: rgba(255,255,255,.06); --success-ink: #E6E7EA;
  --sans: var(--ea-font); --display: var(--ea-font); --serif: var(--ea-font);
  --ease-out: cubic-bezier(.33,1,.68,1);
}
html { background-color: #17181B; color-scheme: dark; }
html body {
  min-height: 100vh;
  background-color: #17181B;
  background-image: var(--ea-ground-warm);
  background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100%;
  color: #E6E7EA;
  font-family: var(--ea-font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html ::selection { background: rgba(255,106,31,.45); color: #FFFFFF; }
html :is(input, textarea) { caret-color: #FF6A1F; }
/* every control the pages give their own face (they name "Inter" in a font shorthand) draws in the system face */
html :is(.si-title, .si-sub, .si-label, .si-input, .si-btn, .si-link, .si-or, .si-who, .si-row, .si-av, .si-role, .si-foot,
  .form-error, .mfa-card, .mfa-go, .mfa-alt button, .mfa-in, .pmr-modal, .pmr-input, .pmr-submit, .pmr-linkbtn,
  .auth-nav, .auth-card, .auth-input, .auth-btn, .auth-title, .auth-title em) { font-family: var(--ea-font); }

/* ── 2. signin.html: the stage and the card ─────────────────────────────────
   Kept: the Three.js dot matrix and the white signature. The black well behind the card becomes Ember's graphite:
   the stage carries the ground (with a quiet warm light low in the middle), and the two veils over the dots are the
   SAME ground, masked — so the centre and the top read as one clean graphite and the dots rise out of it at the edges. */
html .stage { background-color: #17181B; background-image: var(--ea-ground-warm); background-repeat: no-repeat; background-size: 100% 100%; }
html .canvas-bg { opacity: .58; }
html .stage::before {
  background: var(--ea-ground-warm); background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-mask-image: radial-gradient(115% 80% at 50% 48%, #000 0%, #000 34%, rgba(0,0,0,.86) 50%, rgba(0,0,0,.24) 80%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(115% 80% at 50% 48%, #000 0%, #000 34%, rgba(0,0,0,.86) 50%, rgba(0,0,0,.24) 80%, rgba(0,0,0,0) 100%);
}
html .stage::after {
  top: 0; bottom: 0; height: auto;
  background: var(--ea-ground-warm); background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 11%, rgba(0,0,0,0) 28%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 11%, rgba(0,0,0,0) 28%);
}

/* the card: Ember glass with the lit rim (top .14, bottom .045), a soft top-lit sheen, lifted */
html .form-card {
  position: relative;
  border-radius: 24px;
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(255,255,255,.055), rgba(255,255,255,0) 62%),
    var(--ea-glass),
    rgba(24,25,28,.62);
  border: 1px solid rgba(255,255,255,.09); border-top-color: rgba(255,255,255,.14); border-bottom-color: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: var(--ea-lift), 0 40px 80px -40px rgba(0,0,0,.9);
}
/* the light catching the top edge */
html .form-card::before {
  content: ""; position: absolute; top: -1px; left: 16%; right: 16%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
}

html .si-title { font-size: 26px; line-height: 29px; font-weight: 600; letter-spacing: -.65px; color: #FFFFFF; }
html .si-sub { margin: 7px 0 22px; font-size: 15.5px; line-height: 23px; font-weight: 400; color: #A0A5B1; }
@media (max-width: 380px) {
  html .form-card { border-radius: 22px; }
  html .si-title { font-size: 24px; line-height: 28px; }
}

/* ── 3. signin.html: fields and buttons ───────────────────────────────────── */
html .si-form { gap: 16px; }
html .si-label { margin: 0 0 8px 2px; font-size: 14px; line-height: 18px; font-weight: 600; color: #FFFFFF; letter-spacing: -.1px; }
html .si-input {
  height: 54px; padding: 0 16px; border-radius: 14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(0,0,0,.5);
  color: #FFFFFF; font-size: 17px; font-weight: 400; letter-spacing: -.2px;
  caret-color: #FF6A1F;
  transition: border-color .18s var(--ea-ease), box-shadow .18s var(--ea-ease), background-color .18s var(--ea-ease);
}
html .si-input::placeholder { color: #6B7080; opacity: 1; }
@media (hover: hover) { html .si-input:hover:not(:focus) { border-color: rgba(255,255,255,.14); border-top-color: rgba(0,0,0,.5); } }
html .si-input:focus { background: rgba(0,0,0,.34); border-color: rgba(255,138,76,.55); box-shadow: 0 0 0 4px rgba(255,106,31,.12); }
html .si-input--pw { padding-right: 54px; }
/* 2026-10-08 — the envelope inside an email field (Caleb's concept, photo 73), on every sign-in page */
html .si-inwrap { position: relative; display: block; }
html .si-inico { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none; z-index: 1; transition: color .18s var(--ea-ease); }
html .si-inwrap > .si-input--ico { display: block; padding-left: 47px; }
/* the browser's saved-password fill keeps the well (Chrome paints autofill pale blue / yellow otherwise) */
html .si-input:-webkit-autofill,
html .si-input:-webkit-autofill:hover { -webkit-text-fill-color: #FFFFFF; -webkit-box-shadow: inset 0 0 0 100px #1A1B1E; box-shadow: inset 0 0 0 100px #1A1B1E; transition: background-color 600000s 0s, color 600000s 0s; }
html .si-input:-webkit-autofill:focus { -webkit-text-fill-color: #FFFFFF; -webkit-box-shadow: inset 0 0 0 100px #17181A, 0 0 0 4px rgba(255,106,31,.12); box-shadow: inset 0 0 0 100px #17181A, 0 0 0 4px rgba(255,106,31,.12); }

html .si-eye { right: 7px; bottom: 7px; width: 40px; height: 40px; border-radius: 12px; color: #A0A5B1; transition: color .15s var(--ea-ease), background-color .15s var(--ea-ease); }
@media (hover: hover) { html .si-eye:hover { color: #FFFFFF; background: rgba(255,255,255,.06); } }
html .si-eye:focus-visible { outline: 2px solid rgba(255,138,76,.7); outline-offset: 0; }

/* the main action: Ember's orange pill (compact, 54 = the field's height) */
html .si-btn {
  height: 54px; padding: 0 22px; border-radius: 27px; gap: 10px;
  font-size: 17px; line-height: 1; font-weight: 600; letter-spacing: -.2px;
  transition: transform .18s var(--ea-ease), filter .18s var(--ea-ease), opacity .18s var(--ea-ease), box-shadow .18s var(--ea-ease), background-color .18s var(--ea-ease), border-color .18s var(--ea-ease);
}
html .si-btn--primary { background: var(--ea-or-fill); color: #FFFFFF; border: 0; box-shadow: var(--ea-or-shadow); }
@media (hover: hover) {
  html .si-btn--primary:not(:disabled):not(.is-disabled):hover { background: var(--ea-or-fill); filter: brightness(1.06); transform: translateY(-1px); }
}
html .si-btn--primary:not(:disabled):not(.is-disabled):active { transform: scale(.97); transition-duration: 70ms; }
html .si-btn--primary:disabled,
html .si-btn--primary.is-disabled { opacity: .45; box-shadow: var(--ea-or-shadow-off); filter: none; transform: none; }
html .si-btn--primary.is-busy { opacity: 1; box-shadow: var(--ea-or-shadow); }
/* the second choice: a quiet pill */
html .si-btn--ghost {
  height: 46px; border-radius: 23px; padding: 0 18px; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  color: #E6E7EA; font-size: 15px; font-weight: 500; letter-spacing: -.1px;
}
@media (hover: hover) {
  html .si-btn--ghost:not(:disabled):hover { background: var(--ea-sheen); border-color: rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.26); color: #FFFFFF; transform: translateY(-1px); }
}
html .si-btn--ghost:not(:disabled):active { transform: scale(.97); transition-duration: 70ms; }
html .si-btn--ghost svg { width: 20px; height: 20px; color: #E6E7EA; }
html :is(.si-btn, .si-row, .si-who, .si-link, .si-x):focus-visible { outline: 2px solid rgba(255,138,76,.7); outline-offset: 3px; }
/* the spinner inside the orange pill is white */
html .si-btn .form-spinner--dark,
html .pmr-submit .form-spinner--dark { border-color: rgba(255,255,255,.35); border-top-color: #FFFFFF; }

html .si-or { margin: 6px 0; gap: 14px; color: #6B7080; font-size: 13px; font-weight: 500; }
html .si-or::before, html .si-or::after { background: rgba(255,255,255,.08); }
html .si-stack { gap: 12px; }

html .si-linkrow { margin: -6px 2px 2px; }
html .si-link { color: #A0A5B1; font-size: 13.5px; line-height: 18px; font-weight: 500; letter-spacing: -.05px; border-radius: 6px; transition: color .15s var(--ea-ease); }
@media (hover: hover) { html .si-link:hover { color: #FFFFFF; } }
html .si-link--center { margin-top: 18px; }

/* below the card */
html .si-foot { color: #6B7080; font-size: 12px; line-height: 18px; }
html .si-foot a { color: #A0A5B1; text-decoration-color: rgba(160,165,177,.35); transition: color .15s var(--ea-ease); }
@media (hover: hover) { html .si-foot a:hover { color: #FFFFFF; text-decoration-color: rgba(255,255,255,.5); } }
/* 2026-10-08 — the stacked footer (Caleb's concept, photo 73): the consent line; the three documents as small chips of
   the card's glass, pressed in on a tap; a hairline; "New to Private Mentorship?" and Apply Now with a fine arrow. The
   email field's envelope sits in the placeholder's grey and brightens while the field is in use. */
html .si-foot { width: 100%; }
html .si-foot__lead, html .si-foot__new { color: #8A8F9C; font-size: 13px; line-height: 18px; letter-spacing: -.05px; }
html .si-foot .si-chip {
  color: #D3D6DD; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.14); border-bottom-color: rgba(255,255,255,.04);
  box-shadow: 0 8px 16px -10px rgba(0,0,0,.85);
  transition: color .15s var(--ea-ease), background-color .15s var(--ea-ease), transform .12s var(--ea-ease);
}
@media (hover: hover) { html .si-foot .si-chip:hover { color: #FFFFFF; background-color: rgba(255,255,255,.04); } }
html .si-foot .si-chip:active { transform: scale(.96); background: rgba(0,0,0,.28); border-color: rgba(0,0,0,.4); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
html .si-foot .si-chip:focus-visible { outline: none; box-shadow: 0 0 0 1px rgba(255,138,76,.55), 0 0 0 4px rgba(255,106,31,.16); }
html .si-foot__dot { background: rgba(255,255,255,.26); }
html .si-foot__rule { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.1) 16%, rgba(255,255,255,.1) 84%, rgba(255,255,255,0)); }
html .si-foot .si-foot__apply { color: #FFFFFF; }
html .si-inico { color: #6B7080; }
html .si-inwrap:focus-within .si-inico { color: #C3C7D0; }
/* the Apply Now chooser in Ember: the card's glass, raised option tiles that press in, an orange ring for the keyboard only */
html .si-join__scrim { background: rgba(8,9,11,.62); }
html .si-join__sheet { background: linear-gradient(180deg, #232428 0%, #1B1C1F 100%); color: #FFFFFF; border: 1px solid rgba(255,255,255,.09); border-top-color: rgba(255,255,255,.14); box-shadow: 0 30px 80px -24px rgba(0,0,0,.85); }
@media (max-width: 640px) { html .si-join__sheet { border-bottom: 0; } }
html .si-join__grab { background: rgba(255,255,255,.18); }
html .si-join__x { background: rgba(255,255,255,.07); color: #C3C7D0; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: background-color .15s var(--ea-ease), color .15s var(--ea-ease); }
@media (hover: hover) { html .si-join__x:hover { background: rgba(255,255,255,.11); color: #FFFFFF; } }
html .si-join__t { color: #FFFFFF; }
html .si-join__opt { background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.028)); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.13); border-bottom-color: rgba(255,255,255,.04); box-shadow: 0 10px 22px -14px rgba(0,0,0,.9); }
@media (hover: hover) { html .si-join__opt:hover { background-color: rgba(255,255,255,.05); } }
html .si-join__opt:active { transform: scale(.985); background: rgba(0,0,0,.26); border-color: rgba(0,0,0,.4); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
html :is(.si-join__opt, .si-join__x, .si-foot__apply):focus-visible { outline: none; box-shadow: 0 0 0 1px rgba(255,138,76,.55), 0 0 0 4px rgba(255,106,31,.16); }
html .si-join__ic { background: rgba(0,0,0,.3); color: #E6E8EC; box-shadow: inset 1px 1px 3px rgba(0,0,0,.55), inset -1px -1px 0 rgba(255,255,255,.04); }
html .si-join__h { color: #FFFFFF; }
html .si-join__d { color: #A0A5B1; }
html .si-join__chev { color: #6B7080; }

/* ── 4. signin.html: who you are signing in as, the accounts, Face ID, signed in, errors ── */
/* the avatar: a lit graphite key with white initials (the old per-person hues were blue, teal and pink: the colour
   law keeps those off; the name and email beside it tell the people apart) */
html .si-av {
  background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.06)), #2A2B2F;
  color: #FFFFFF; font-weight: 600; letter-spacing: -.2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.16), 0 6px 14px -8px rgba(0,0,0,.9);
}

/* the "who" chip on the password step: a glass row, a wash on hover */
html .si-who {
  margin: 0 0 22px; padding: 10px 12px 10px 10px; gap: 12px; border-radius: 16px;
  background: var(--ea-glass);
  border: 1px solid rgba(255,255,255,.09); border-top-color: rgba(255,255,255,.14); border-bottom-color: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  color: #FFFFFF;
  transition: background-color .15s var(--ea-ease), border-color .15s var(--ea-ease), transform .15s var(--ea-ease);
}
@media (hover: hover) { html .si-who:hover { background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)), var(--ea-glass); border-top-color: rgba(255,255,255,.2); } }
html .si-who:active { transform: scale(.985); transition-duration: 70ms; }
html .si-who__n { font-size: 15.5px; line-height: 20px; font-weight: 600; letter-spacing: -.2px; color: #FFFFFF; }
html .si-who__e { margin-top: 1px; font-size: 13.5px; line-height: 18px; color: #8E95A5; }
html .si-who__sw {
  padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  color: #E6E7EA; font-size: 13px; line-height: 1; font-weight: 500;
}

/* the accounts on this device: one glass group, rows divided by hairlines, a wash on hover */
html .si-accounts {
  margin: 0; padding: 4px;
  border-radius: 18px;
  background: var(--ea-glass);
  border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.13); border-bottom-color: rgba(255,255,255,.04);
}
/* on a phone the group reaches a little into the card's padding, so a name and its role fit beside each other */
@media (max-width: 440px) { html .si-accounts { margin: 0 -10px; } }
html .si-row { gap: 12px; padding: 11px 10px; border-radius: 14px; color: #FFFFFF; transition: background-color .15s var(--ea-ease), transform .15s var(--ea-ease); }
@media (hover: hover) { html .si-row:hover { background: rgba(255,255,255,.06); } }
html .si-row:active { background: rgba(255,255,255,.07); transform: scale(.985); transition-duration: 70ms; }
html .si-row + .si-row::before { left: 62px; right: 12px; background: rgba(255,255,255,.06); }
html .si-row:hover + .si-row::before, html .si-row:hover::before { opacity: 0; }
html .si-row__n { font-size: 15.5px; line-height: 20px; font-weight: 600; letter-spacing: -.2px; color: #FFFFFF; }
html .si-row__e { margin-top: 1px; font-size: 13.5px; line-height: 18px; color: #8E95A5; }
html .si-role { padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); color: #A0A5B1; font-size: 11px; font-weight: 600; letter-spacing: .2px; }
html .si-row__end { color: #6B7080; }
html .si-row__end.is-face { color: #E6E7EA; }
html .si-row--add .si-av { background: rgba(0,0,0,.22); color: #A0A5B1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
html .si-row--add .si-row__n { color: #E6E7EA; font-weight: 500; }
/* remove from this device: danger ink on a quiet round key */
html .si-x { background: rgba(255,90,95,.12); color: #FF5A5F; box-shadow: inset 0 0 0 1px rgba(255,90,95,.28); transition: background-color .15s var(--ea-ease), transform .15s var(--ea-ease); }
@media (hover: hover) { html .si-x:hover { background: rgba(255,90,95,.2); } }
html .si-x:active { transform: scale(.94); transition-duration: 70ms; }

/* Face ID offer: the icon on a lit glass key */
html .si-hero {
  width: 72px; height: 72px; border-radius: 22px; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)), #232427;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.17), 0 18px 34px -16px rgba(0,0,0,.9);
}
/* signed in: the avatar with a white tick (white = fine) */
html .si-done .si-av { font-size: 24px; }
html .si-done__ok { background: #FFFFFF; color: #17181B; box-shadow: 0 0 0 3px #232427, 0 4px 10px rgba(0,0,0,.4); }

/* errors: red, with its mark */
html .form-error {
  position: relative; margin: 0 0 16px; padding: 11px 14px 11px 40px; border-radius: 14px;
  background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.3);
  color: #FF5A5F; font-size: 14px; line-height: 20px; font-weight: 500;
}
html .form-error::before { content: ""; position: absolute; left: 13px; top: 11px; width: 19px; height: 19px; background: var(--ea-err-ico) center / 19px 19px no-repeat; }

/* the language key (js/pm-i18n.js floats it bottom-left on signin): the round glass key, and its menu the Ember sheet
   (its own sheet is white with emerald ticks; the colour law keeps green off). Its styles are injected after this
   sheet, hence `.pmlang` in each selector. */
/* z 100: above the card (10), under the 2-step and reset scrims (200 / 120) — pm-i18n gives it 11000, so it sat on top of
   the dimmed dialogs */
html body .pmlang--float { bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 100; }
html body .pmlang .pmlang__btn {
  background: var(--ea-key), #232427; border: 1px solid rgba(255,255,255,.11); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 8px 16px -8px rgba(0,0,0,.85);
}
@media (hover: hover) { html body .pmlang .pmlang__btn:hover { border-color: rgba(255,255,255,.16); border-top-color: rgba(255,255,255,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 10px 18px -8px rgba(0,0,0,.9); } }
html body .pmlang .pmlang__btn:focus-visible { outline: 2px solid rgba(255,138,76,.7); outline-offset: 2px; }
html body .pmlang.is-open .pmlang__btn { border-color: rgba(255,138,76,.5); box-shadow: 0 0 0 3px rgba(255,106,31,.22), inset 0 1px 0 rgba(255,255,255,.17); }
html body .pmlang .pmlang__btnflag { box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
html body .pmlang .pmlang__menu {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%), var(--ea-sheet);
  border: 0; border-radius: 22px; color: #E6E7EA;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -24px rgba(0,0,0,.85);
}
html body .pmlang .pmlang__head { color: #8E95A5; font: 500 11.5px/14px var(--ea-font); letter-spacing: 1.7px; }
html body .pmlang .pmlang__item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; box-shadow: none; color: #E6E7EA; font-family: var(--ea-font); }
@media (hover: hover) { html body .pmlang .pmlang__item:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); box-shadow: none; } }
html body .pmlang .pmlang__item.is-active { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 14px -8px rgba(0,0,0,.9); }
html body .pmlang .pmlang__native, html body .pmlang .pmlang__item.is-active .pmlang__native { color: #FFFFFF; font-family: var(--ea-font); font-weight: 600; }
html body .pmlang .pmlang__flag { box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 4px 10px -4px rgba(0,0,0,.8); }
html body .pmlang .pmlang__check { background: #FF6A1F; color: #FFFFFF; box-shadow: 0 0 0 2.5px #1C1D20, 0 0 10px rgba(255,106,31,.5); }

/* ── 5. signin.html: the 2-step dialog (a sheet: #1C1D20, radius 26, the lit top edge) ── */
html .mfa-scrim { background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
html .mfa-card {
  max-width: 400px; padding: 28px 26px 24px; border-radius: 26px; color: #E6E7EA;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%), var(--ea-sheet);
  border: 1px solid rgba(255,255,255,.09); border-top-color: rgba(255,255,255,.14); border-bottom-color: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.35);
}
html .mfa-card h2 { margin: 0 0 8px; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -.35px; color: #FFFFFF; }
html .mfa-card p { margin: 0 0 20px; font-size: 15px; line-height: 22px; color: #A0A5B1; }
html .mfa-otp-boxes { gap: 9px; }
html .mfa-otp-box {
  height: 58px; border-radius: 14px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(0,0,0,.5);
  color: #FFFFFF; font: 600 24px/1 var(--ea-font); font-variant-numeric: tabular-nums;
}
html .mfa-otp-box.is-filled { background: rgba(0,0,0,.34); border-color: rgba(255,255,255,.16); border-top-color: rgba(0,0,0,.5); }
html .mfa-otp input:focus ~ .mfa-otp-boxes .mfa-otp-box.is-next { border-color: rgba(255,138,76,.6); box-shadow: 0 0 0 4px rgba(255,106,31,.14); }
html .mfa-otp.is-error .mfa-otp-box { border-color: rgba(255,90,95,.55); }
html .mfa-in {
  height: 54px; padding: 0 14px; border-radius: 14px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(0,0,0,.5);
  color: #FFFFFF; font-family: var(--ea-font); font-weight: 600; caret-color: #FF6A1F;
}
html .mfa-in::placeholder { color: #6B7080; opacity: 1; }
html .mfa-in:focus { background: rgba(0,0,0,.34); border-color: rgba(255,138,76,.55); box-shadow: 0 0 0 4px rgba(255,106,31,.12); }
html .mfa-card p.mfa-err { margin: 10px 0 0; font-size: 13.5px; line-height: 18px; font-weight: 500; color: #FF5A5F; }
html .mfa-go {
  height: 54px; margin-top: 18px; padding: 0 22px; border: 0; border-radius: 27px;
  background: var(--ea-or-fill); color: #FFFFFF; box-shadow: var(--ea-or-shadow);
  font-size: 17px; line-height: 1; font-weight: 600; letter-spacing: -.2px;
  transition: transform .18s var(--ea-ease), filter .18s var(--ea-ease), opacity .18s var(--ea-ease);
}
@media (hover: hover) { html .mfa-go:not(:disabled):hover { background: var(--ea-or-fill); filter: brightness(1.06); transform: translateY(-1px); } }
html .mfa-go:not(:disabled):active { transform: scale(.97); transition-duration: 70ms; }
html .mfa-go:disabled { opacity: .45; box-shadow: var(--ea-or-shadow-off); }
html .mfa-go:focus-visible { outline: 2px solid rgba(255,138,76,.7); outline-offset: 3px; }
html .mfa-card p.mfa-alt { margin: 20px 0 0; font-size: 13.5px; line-height: 18px; color: #8E95A5; }
html .mfa-alt button { color: #E6E7EA; font-size: 13.5px; font-weight: 600; transition: color .15s var(--ea-ease); }
@media (hover: hover) { html .mfa-alt button:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; } }

/* ── 6. signin.html: the password-reset sheet ─────────────────────────────── */
html .pmr-overlay { background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
html .pmr-modal {
  max-width: 420px; padding: 32px 28px 28px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%), var(--ea-sheet);
  border: 1px solid rgba(255,255,255,.09); border-top-color: rgba(255,255,255,.14); border-bottom-color: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.35);
}
/* the round × : a glass key */
html .pmr-close {
  top: 16px; right: 16px; width: 32px; height: 32px;
  background: var(--ea-key); border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 8px 16px -8px rgba(0,0,0,.85);
  color: #E6E7EA; transition: background-color .15s var(--ea-ease), color .15s var(--ea-ease), transform .15s var(--ea-ease);
}
@media (hover: hover) { html .pmr-close:hover { background: var(--ea-sheen); border-top-color: rgba(255,255,255,.26); color: #FFFFFF; } }
html .pmr-close:active { transform: scale(.94); transition-duration: 70ms; }
html .pmr-close svg { width: 14px; height: 14px; }
html .pmr-eyebrow { margin: 0 0 10px; font-size: 11.5px; line-height: 14px; font-weight: 500; letter-spacing: 1.7px; text-transform: uppercase; color: #8E95A5; }
html .pmr-title { margin: 0 0 8px; font-size: 23px; line-height: 26px; font-weight: 600; letter-spacing: -.55px; color: #FFFFFF; }
html .pmr-sub { margin: 0 0 22px; font-size: 15px; line-height: 22px; color: #A0A5B1; }
html .pmr-hint { margin: 12px 0 22px; font-size: 13.5px; line-height: 18px; color: #8E95A5; }
html .pmr-input {
  height: 54px; margin-bottom: 12px; padding: 0 16px; border-radius: 14px; text-align: left;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(0,0,0,.5);
  color: #FFFFFF; font-size: 17px; letter-spacing: -.2px; caret-color: #FF6A1F;
  transition: border-color .18s var(--ea-ease), box-shadow .18s var(--ea-ease), background-color .18s var(--ea-ease);
}
html .pmr-input::placeholder { color: #6B7080; opacity: 1; }
html .pmr-input:focus { background: rgba(0,0,0,.34); border-color: rgba(255,138,76,.55); box-shadow: 0 0 0 4px rgba(255,106,31,.12); }
html .pmr-input:-webkit-autofill { -webkit-text-fill-color: #FFFFFF; -webkit-box-shadow: inset 0 0 0 100px #141518; box-shadow: inset 0 0 0 100px #141518; transition: background-color 600000s 0s, color 600000s 0s; }
html .pmr-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; margin-top: 6px; padding: 0 22px; border: 0; border-radius: 27px;
  background: var(--ea-or-fill); color: #FFFFFF; box-shadow: var(--ea-or-shadow);
  font-size: 17px; line-height: 1; font-weight: 600; letter-spacing: -.2px;
  transition: transform .18s var(--ea-ease), filter .18s var(--ea-ease), opacity .18s var(--ea-ease);
}
html .pmr-submit:hover:not(:disabled) { transform: none; box-shadow: var(--ea-or-shadow); }
@media (hover: hover) { html .pmr-submit:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); } }
html .pmr-submit:active:not(:disabled) { transform: scale(.97); transition-duration: 70ms; }
html .pmr-submit:focus-visible { box-shadow: var(--ea-or-shadow), 0 0 0 4px rgba(255,106,31,.28); }
html .pmr-error { margin: 2px 0 10px; font-size: 13.5px; line-height: 18px; font-weight: 500; color: #FF5A5F; }
html .pmr-foot { margin: 20px 0 0; font-size: 13.5px; line-height: 18px; color: #8E95A5; }
html .pmr-linkbtn { color: #E6E7EA; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: color .15s var(--ea-ease); }
@media (hover: hover) { html .pmr-linkbtn:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; } }
/* sent: a white tick (white = fine) */
html .pmr-tick { background: linear-gradient(180deg, #FFFFFF, #E6E7EA); box-shadow: 0 0 0 6px rgba(255,255,255,.06), 0 12px 26px -12px rgba(0,0,0,.9); }
html .pmr-tick svg { color: #17181B; }

/* ── 7. the auth-shell pages (js/auth-shell.css): admin-login, hiring-login, hiring-signup, hiring-reset, hiring-verify ── */
/* the bar: the ground under frosted glass, a hairline below; it clears the clock in the Home Screen app */
html .auth-nav {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 40px 18px;
  background: rgba(23,24,27,.72);
  -webkit-backdrop-filter: saturate(1.3) blur(20px); backdrop-filter: saturate(1.3) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
html .auth-nav__logo { color: #FFFFFF; font-size: 12.5px; font-weight: 600; letter-spacing: 2.4px; white-space: nowrap; }
html .auth-nav__links a { color: #A0A5B1; font-size: 13.5px; font-weight: 500; transition: color .15s var(--ea-ease); }
html .auth-nav__links a:hover { color: #FFFFFF; }
html .auth-nav__links > span { color: #A0A5B1; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
html .auth-nav__links a { white-space: nowrap; }

html .auth-shell { padding: calc(env(safe-area-inset-top, 0px) + 116px) 24px 60px; }
/* the card: lifted glass, the lit rim (the warm light lives low on the ground, as on signin) */
html .auth-card {
  position: relative;
  max-width: 460px; padding: 40px 38px 34px; border-radius: 24px; color: #E6E7EA;
  background: var(--ea-glass), rgba(255,255,255,.012);
  border: 1px solid rgba(255,255,255,.09); border-top-color: rgba(255,255,255,.14); border-bottom-color: rgba(255,255,255,.045);
  box-shadow: var(--ea-lift), 0 40px 80px -40px rgba(0,0,0,.9);
}
html .auth-card::after {
  content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.32), rgba(255,255,255,0));
}
html .auth-eyebrow { margin: 0 0 12px; font-size: 11.5px; line-height: 14px; font-weight: 500; letter-spacing: 1.7px; text-transform: uppercase; color: #8E95A5; }
html .auth-title { margin: 0 0 10px; font-size: 26px; line-height: 29px; font-weight: 600; letter-spacing: -.65px; color: #FFFFFF; }
/* the old italic serif accent: the same face, one step quieter (a two-tone title) */
html .auth-title em { font-style: normal; font-weight: 600; letter-spacing: -.65px; color: #8E95A5; }
html .auth-sub { margin: 0 0 28px; font-size: 15.5px; line-height: 23px; color: #A0A5B1; }
html .auth-sub strong { color: #FFFFFF; font-weight: 600; }

html .auth-label { margin: 18px 0 8px 2px; font-size: 14px; line-height: 18px; font-weight: 600; color: #FFFFFF; letter-spacing: -.1px; }
html .auth-label--top { margin-top: 0; }
html .auth-input {
  height: 54px; padding: 0 16px; border-radius: 14px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(0,0,0,.5);
  color: #FFFFFF; font-size: 17px; letter-spacing: -.2px; caret-color: #FF6A1F;
}
html .auth-input::placeholder { color: #6B7080; opacity: 1; }
@media (hover: hover) { html .auth-input:hover:not(:focus) { border-color: rgba(255,255,255,.14); border-top-color: rgba(0,0,0,.5); } }
html .auth-input:focus { background: rgba(0,0,0,.34); border-color: rgba(255,138,76,.55); box-shadow: 0 0 0 4px rgba(255,106,31,.12); }
html .auth-input.is-invalid { border-color: rgba(255,90,95,.55); box-shadow: 0 0 0 4px rgba(255,90,95,.12); }
html .auth-input:-webkit-autofill,
html .auth-input:-webkit-autofill:hover { -webkit-text-fill-color: #FFFFFF; -webkit-box-shadow: inset 0 0 0 100px #19191C; box-shadow: inset 0 0 0 100px #19191C; transition: background-color 600000s 0s, color 600000s 0s; }
html .auth-input:-webkit-autofill:focus { -webkit-text-fill-color: #FFFFFF; -webkit-box-shadow: inset 0 0 0 100px #161719, 0 0 0 4px rgba(255,106,31,.12); box-shadow: inset 0 0 0 100px #161719, 0 0 0 4px rgba(255,106,31,.12); }
html .auth-helper { margin: 8px 0 0 2px; font-size: 13.5px; line-height: 18px; color: #8E95A5; }

/* the main action: the orange pill */
html .auth-btn {
  height: 54px; margin-top: 24px; padding: 0 22px; border: 0; border-radius: 27px; gap: 10px;
  background: var(--ea-or-fill); color: #FFFFFF; box-shadow: var(--ea-or-shadow);
  font-size: 17px; line-height: 1; font-weight: 600; letter-spacing: -.2px;
  transition: transform .18s var(--ea-ease), filter .18s var(--ea-ease), opacity .18s var(--ea-ease), background-color .18s var(--ea-ease), border-color .18s var(--ea-ease);
}
html .auth-btn:hover { transform: none; box-shadow: var(--ea-or-shadow); }
@media (hover: hover) { html .auth-btn:not(:disabled):not(.auth-btn--ghost):hover { filter: brightness(1.06); transform: translateY(-1px); } }
html .auth-btn:not(:disabled):active { transform: scale(.97); transition-duration: 70ms; }
html .auth-btn:disabled { opacity: .45; box-shadow: var(--ea-or-shadow-off); filter: none; transform: none; }
html .auth-btn:focus-visible { outline: 2px solid rgba(255,138,76,.7); outline-offset: 3px; }
html .auth-btn svg { width: 18px; height: 18px; }
/* the second choice: a quiet pill */
html .auth-btn--ghost {
  height: 46px; border-radius: 23px; padding: 0 18px; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  color: #E6E7EA; font-size: 15px; font-weight: 500; letter-spacing: -.1px;
}
html .auth-btn--ghost:hover { background: rgba(255,255,255,.06); color: #E6E7EA; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
@media (hover: hover) { html .auth-btn--ghost:not(:disabled):hover { background: var(--ea-sheen); border-color: rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.26); color: #FFFFFF; transform: translateY(-1px); } }
html .auth-btn--ghost:disabled { box-shadow: none; }
/* spinners: white, on the orange pill and on the quiet pill alike (hiring-verify paints its own in blue inline) */
html .auth-spinner { border-color: rgba(255,255,255,.3) !important; border-top-color: #FFFFFF !important; vertical-align: -2px; }

html .auth-divider { margin: 26px 0; gap: 14px; color: #6B7080; font-size: 11.5px; font-weight: 500; letter-spacing: 1.7px; }
html .auth-divider::before, html .auth-divider::after { background: rgba(255,255,255,.08); }
html .auth-foot { margin-top: 18px; font-size: 13.5px; line-height: 20px; color: #8E95A5; }
html .auth-foot a { color: #E6E7EA; font-weight: 600; text-decoration: none; transition: color .15s var(--ea-ease); }
html .auth-foot a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }

/* messages: an error is red; a note is white (no green) */
html :is(.auth-error, .auth-success) { position: relative; margin: 0 0 18px; padding: 12px 14px 12px 42px; border-radius: 14px; font-size: 14px; line-height: 20px; font-weight: 500; }
html .auth-error { background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.3); color: #FF5A5F; }
html .auth-success { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #E6E7EA; }
html :is(.auth-error, .auth-success)::before { content: ""; position: absolute; left: 14px; top: 12px; width: 19px; height: 19px; background: center / 19px 19px no-repeat; }
html .auth-error::before { background-image: var(--ea-err-ico); }
html .auth-success::before { background-image: var(--ea-ok-ico); }

/* Back: a quiet link with its arrow, centred under the card's centred head */
html .auth-back { display: flex; width: max-content; margin: 26px auto 0; padding: 4px 6px; gap: 7px; border-radius: 8px; color: #A0A5B1; font-size: 13.5px; font-weight: 500; transition: color .15s var(--ea-ease); }
html .auth-back:hover { color: #FFFFFF; }
html .auth-back svg { width: 15px; height: 15px; }

/* the page's mark (admin shield, verify envelope): a tactile glass key, the icon white */
html .auth-icon {
  width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 18px;
  background: var(--ea-key), #232427; color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 14px 26px -14px rgba(0,0,0,.9);
}
html .auth-icon svg { width: 26px; height: 26px; }
/* admin-login's "Restricted": a grey capsule */
html .admin-badge {
  margin-bottom: 16px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: #A0A5B1; font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px;
}

@media (max-width: 520px) {
  html .auth-nav { padding: calc(env(safe-area-inset-top, 0px) + 15px) 18px 15px; gap: 12px; }
  html .auth-nav__logo { font-size: 11px; letter-spacing: 1.8px; }
  html .auth-nav__links { gap: 14px; }
  html .auth-nav__links a, html .auth-nav__links > span { font-size: 13px; }
  html .auth-shell { padding: calc(env(safe-area-inset-top, 0px) + 92px) 16px 40px; }
  html .auth-card { padding: 32px 22px 26px; border-radius: 24px; }
  html .auth-title { font-size: 25px; line-height: 28px; }
}

/* ── 8. family-invite-accept.html ──────────────────────────────────────────
   Already Ember through css/pm-ember-family.css and css/ember/desk-family/family-invite-accept.css (scoped, with
   !important); this sheet only adds the ground for the overscroll and the selection colour above. */