/* app/styles/portal-signin.css — the live sign-in screens in front of the portal (step B, 2026-10-17).
   The portal screens are the merged prototype (styles/portal.css); the sign-in, forgot-code, activation and loading
   screens are live's, unchanged. These are their rules, taken from the old styles/portal.css (git 2026-10-17, before
   the prototype replaced it), comments dropped. The few tokens they read that tokens.css does not define are set on
   the sign-in screens only, so they never change the portal's own tokens. */
#loginScreen,
#forgotScreen,
#activationScreen,
#portalLoading,
.skip-link {
  --border: rgba(20,20,20,.08); /* chapter-08 onyx (#141414) at the same 8%: the retired onyx (30,11,14) was the census's one painting reference in this file (palette case 13, step B 2026-10-22) */
  --onyx-dk: var(--onyx, #141414); /* chapter-08 onyx as the fallback: the retired #1E0B0E here was a literal the rebind can never reach (rebind-reach case 4, step B 2026-10-22) */
  --sans: "Inter", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --z-login: 600;
  --z-modal: 700;
  --z-top: 9999;
  --z-veil: 500;
  --d6-ground: var(--ch8-linen); --d6-hot: var(--ch8-crimson); --d6-ink: var(--ch8-onyx); --d6-ink-2: var(--ch8-onyx-78); --d6-ink-3: var(--ch8-onyx-62);
  --d6-lh: 1.45; --d6-lh-title: 1.1; --d6-line: var(--ch8-onyx-20); --d6-line-2: var(--ch8-onyx-12); --d6-mark: var(--ch8-bordeaux); --d6-paper: #FFFDF9;
  --d6-r-ctl: 2px; --d6-r-panel: 0; --d6-sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --d6-serif: 'Crimson Pro', 'Times New Roman', serif;
  --d6-t-base: 13px; --d6-t-page: 25px; --d6-t-sec: 12.5px;
  --serif: "Crimson Pro", Georgia, "Times New Roman", serif; --v10-display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
}
.skip-link {position:absolute;top:-100px;left:16px;z-index:var(--z-top,9999);
  background:var(--bloodstone);color:var(--ch8-linen,#F8F1E7);
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:10px 18px;text-decoration:none;border-radius:0; 
  transition:top .2s var(--ease);}
.skip-link:focus {top:16px;}
@media (prefers-reduced-motion:reduce){.skip-link {transition:none}}
.login-screen {position:fixed;inset:0;background:var(--onyx-dk);z-index:var(--z-login,600);
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  padding:40px 24px;text-align:center;
  
  overflow-y:auto;overscroll-behavior:contain;}
.login-screen.hidden {display:none}
.login-logo {font-family:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:var(--text-sm);font-weight:500;letter-spacing:.34em;

  text-transform:uppercase;color:color-mix(in srgb, var(--ch8-linen) 60%, transparent);margin-bottom:44px;display:block;margin-right:-0.34em;}
.login-box {background:color-mix(in srgb, var(--ch8-linen) 4%, transparent);border:1px solid color-mix(in srgb, var(--ch8-linen) 8%, transparent);
  padding:44px 52px;width:100%;max-width:420px;text-align:left;}
.login-title {font-family:var(--serif);font-size:1.8rem;font-weight:400;
  color:var(--ch8-linen);margin-bottom:8px;line-height:1.2}
.login-title em {font-style:italic;color:var(--bloodstone)}
.login-sub {font-family:var(--sans);font-size:var(--text-xs);color:color-mix(in srgb, var(--ch8-linen) 72%, transparent);margin-bottom:30px;line-height:1.75;font-weight:300}
.login-fld {margin-bottom:16px}
.login-fld label {font-family:var(--sans);font-size:var(--text-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--sage);
  display:block;margin-bottom:8px;font-weight:600}
.login-fld input {width:100%;padding:12px 14px;border:1px solid color-mix(in srgb, var(--ch8-onyx) 20%, transparent);
  background:color-mix(in srgb, var(--ch8-linen) 5%, transparent);font-family:var(--sans);font-size:var(--text-body);
  color:var(--ch8-linen);outline:none;transition:border-color .3s var(--ease);font-weight:300;}
.login-fld input:focus {border-color:var(--bloodstone)}
.login-btn {width:100%;font-family:var(--sans);font-size:var(--text-xs);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ch8-linen);background:var(--bloodstone);border:none;
  padding:16px;cursor:pointer;transition:background .3s var(--ease);margin-top:8px;font-weight:600;}
.login-btn:hover {background:var(--bloodstone-dk)}
.login-err {font-family:var(--sans);font-size:var(--text-ui);color:var(--brick);margin-top:10px;display:none;line-height:1.5;font-weight:400}
.login-err.show {display:block}
.login-hint {font-family:var(--sans);font-size:var(--text-sm);color:var(--sage);margin-top:14px;letter-spacing:.04em;text-align:center;font-weight:300}
.login-legal {font-size:var(--text-xs);margin-top:8px}
.login-text-btn {background:none;border:none;padding:0;cursor:pointer;color:inherit;font:inherit;text-decoration:underline}
.login-pass-wrap {position:relative}
.login-pass-wrap input {width:100%;padding-right:40px;box-sizing:border-box}
.login-eye {position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--sage);padding:4px;line-height:0;opacity:.65;transition:opacity .2s var(--ease)}
.login-eye:hover {opacity:1}
.login-hint {font-size:max(var(--text-ui),12px)}
.login-fld input {font-size:max(.8rem,13px)}
@media(max-width:680px){.login-box {padding:32px 24px}}
.login-screen {background:var(--ch8-linen)!important;
  
  justify-content:safe center;gap:0;}
.login-logo {font-size:var(--text-sm);letter-spacing:.34em;
  color:var(--onyx);
  margin-bottom:6px!important;
  padding-bottom:0;
  border-bottom:none;
  width:100%;max-width:440px;
  text-align:center;
  position:relative;margin-right:-0.34em;}
.login-logo::after {content:"";display:block;width:36px;height:1px;background:var(--gold);
  margin:16px auto 36px;}
#forgotMsg {color:var(--ch8-onyx-78);font-size:var(--text-ui);}
.login-recover {margin-top:24px;padding-top:22px;border-top:1px solid var(--border);text-align:center;}
.login-recover-lead {font-family:var(--sans);font-size:var(--text-xs);line-height:1.7;color:var(--ch8-onyx-78);margin:0 0 14px;font-weight:300;}
a.login-recover-btn {display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;font-family:var(--sans);font-size:var(--text-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--ch8-onyx)!important;text-decoration:none!important;border:1px solid var(--ch8-onyx-34);padding:12px 24px;font-weight:500;background:transparent;transition:border-color .2s var(--ease);}
a.login-recover-btn:hover {border-color:var(--ch8-onyx);}
a.login-recover-btn:focus-visible {outline:2px solid var(--ch8-crimson);outline-offset:3px;}
@media(max-width:540px){.login-box,
#forgotPanel {padding-left:0!important;padding-right:0!important;}}
@media(max-width:640px), (max-height:500px) and (orientation:landscape){.skip-link {min-height:44px;display:inline-flex;align-items:center}
.login-eye {min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:4px}}
@media (hover:none) and (pointer:coarse){.skip-link {min-height:44px;display:inline-flex;align-items:center}}
@media (hover:none) and (pointer:coarse),
       (max-width:640px),
       (max-height:500px) and (orientation:landscape){.login-text-btn {min-height:44px;padding:0 6px;
    display:inline-flex;align-items:center;justify-content:center;
    vertical-align:middle;}
.login-legal {line-height:1.9}}
@media(max-width:640px), (max-height:500px) and (orientation:landscape){.login-fld input {font-size:16px !important;}}
.portal-loading-overlay {position:fixed;inset:0;background:var(--onyx);z-index:var(--z-veil,500);flex-direction:column;align-items:center;justify-content:center;gap:16px}
.portal-loading-overlay {position:fixed;inset:0;background:var(--ch8-linen);z-index:var(--z-modal,700);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;}
.portal-loading-logo {font-family:'Montserrat',var(--sans);font-size:var(--text-xs);font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ch8-onyx);margin-right:-0.34em;}
.portal-loading-spinner {width:36px;height:36px;border:2px solid color-mix(in srgb, var(--ch8-onyx) 20%, transparent);
  border-top-color:var(--ch8-crimson);border-radius:50%;
  animation:btnspin 900ms linear infinite;}
.portal-loading-overlay.signed-in {inset:auto 24px 88px auto;
  flex-direction:row;gap:14px;padding:14px 20px;
  background:var(--ch8-linen);
  border:1px solid color-mix(in srgb, var(--ch8-onyx) 12%, transparent);
  box-shadow:0 10px 34px color-mix(in srgb, var(--ch8-onyx) 10%, transparent);
  pointer-events:none;}
.portal-loading-overlay.signed-in .portal-loading-spinner {width:18px;height:18px}
.portal-loading-slow {flex-direction:column;align-items:center;gap:12px;max-width:340px;text-align:center;
  pointer-events:auto;}
.portal-loading-overlay.signed-in .portal-loading-slow {flex-direction:row;text-align:left;max-width:320px}
@media(max-width:720px){.portal-loading-overlay.signed-in {inset:auto 12px 88px 12px;padding:12px 14px;gap:10px}
.portal-loading-overlay.signed-in .portal-loading-logo {display:none}
.portal-loading-overlay.signed-in .portal-loading-slow {max-width:none;width:100%;justify-content:space-between;gap:10px}
.portal-loading-overlay.signed-in .portal-loading-slow-say {min-width:0}
.portal-loading-overlay.signed-in .portal-loading-retry {padding:12px 16px}}
.portal-loading-slow-say {margin:0;font-family:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:var(--text-sm);line-height:1.6;color:var(--ch8-onyx-78);}
.portal-loading-retry {flex:0 0 auto;
  min-height:44px;min-width:44px;padding:12px 24px;cursor:pointer;
  background:var(--ch8-crimson);color:var(--ch8-linen);border:none;border-radius:2px;
  font-family:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:var(--text-xs);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;}
.portal-loading-retry:hover {opacity:.9}
.login-text-btn {background:none;border:none;padding:0;
  color:var(--sage);font-size:inherit;font-family:inherit;
  font-weight:inherit;letter-spacing:inherit;
  cursor:pointer;text-decoration:underline;
  transition:color .2s var(--ease);}
.login-text-btn:hover {color:var(--bloodstone)}
button.login-text-btn {min-height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;}
@media (hover:none) and (pointer:coarse),
       (max-width:640px),
       (max-height:500px) and (orientation:landscape){button.login-text-btn {min-height:44px;padding:0 6px}
.login-fld input {min-height:44px}}
.login-hint-note {font-size:var(--text-xs);color:var(--sage);line-height:1.7;font-style:italic}
@media(max-width:768px){.login-box {padding:32px 28px}}
@media(max-width:640px){.login-logo {font-size:var(--text-sm);letter-spacing:.28em;margin-right:-0.28em;margin-bottom:32px;max-width:100%}
.login-box {padding:28px 20px!important;max-width:100%!important}
.login-title {font-size:1.5rem}}
@media(max-width:480px){.login-box {padding:24px 16px!important}
.login-title {font-size:1.35rem}}
@media(max-width:380px){.login-box {padding:20px 14px!important}}
@media(max-width:900px){.login-btn {min-height:44px;}}
.login-fld label,
.login-hint,
.login-legal {color:var(--onyx)}
.login-btn:active:not(:disabled) {opacity:.85}
.login-title em {font-style:normal!important}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* from the old portal-v10.css */
body .login-title {font-family:var(--v10-display)!important;
  font-weight:300;
  letter-spacing:-.01em;
  line-height:1.08;}

/* from the old portal-v15.css */
body[data-active-tab] :is(.login-btn:hover, .login-screen, .portal-loading-overlay):not([style*="background"]) {--sage:           var(--ch8-onyx-34);
  --sage-dk:        var(--ch8-onyx-34);
  --sage-lt:        var(--ch8-onyx-34);
  --ash:            var(--ch8-onyx-34);
  
  --gold:           var(--ch8-amber-lift);
  --gold-ink:       var(--ch8-amber-lift);
  --ochre:          var(--ch8-amber-lift);
  --late:           var(--ch8-amber-lift);
  --warn:           var(--ch8-amber-lift);
  --forest:         var(--ch8-moss-lift);
  --done:           var(--ch8-moss-lift);
  --success:        var(--ch8-moss-lift);
  --bloodstone:     var(--ch8-crimson-lift);
  --action:         var(--ch8-crimson-lift);
  --brick:          var(--ch8-terracotta-lift);
  --bad:            var(--ch8-terracotta-lift);
  --broken:         var(--ch8-terracotta-lift);}
.login-screen .login-box {--sage:           var(--ch8-onyx-78);
  --sage-dk:        var(--ch8-onyx-78);
  --sage-lt:        var(--ch8-onyx-62);
  --ash:            var(--ch8-onyx-78);
  --gold:           var(--ch8-amber);
  --gold-ink:       var(--ch8-amber);
  --ochre:          var(--ch8-amber);
  --late:           var(--ch8-amber);
  --warn:           var(--ch8-amber);
  --forest:         var(--ch8-moss);
  --done:           var(--ch8-moss);
  --success:        var(--ch8-moss);
  --bloodstone:     var(--ch8-crimson);
  --action:         var(--ch8-crimson);
  --brick:          var(--ch8-terracotta);
  --bad:            var(--ch8-terracotta);
  --broken:         var(--ch8-terracotta);}
body[data-active-tab] .skip-link,
body[data-active-tab] .login-screen,
body[data-active-tab] .login-screen *:not(.login-logo):not(.login-logo *):not(.login-title):not(.login-title *) {font-family: var(--sans);}
body[data-active-tab] .skip-link,
body[data-active-tab] .login-screen label,
body[data-active-tab] .login-screen .login-btn {font-weight: 500;}
body[data-active-tab] .login-screen .login-logo,
body[data-active-tab] .login-screen .login-logo * {font-family: "Montserrat", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;}
body[data-active-tab] .login-screen button {font-family: var(--sans);}
body #activationScreen .login-box .activation-eyebrow {display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-family: var(--sans) !important;
  font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.4;
  color: var(--ch8-crimson);}
body #activationScreen .login-box .activation-eyebrow svg {flex: none;}
body #activationScreen .login-box h1.activation-title {font-size: 1.6rem !important; line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: var(--ch8-onyx) !important;
  margin: 0 0 22px !important;
  text-wrap: balance;}
body:has(#loginScreen:not(.hidden)) .evo-t-launcher {display: none;}
body[data-active-tab] .login-screen .login-title em {font-family: var(--serif);}

/* from the old portal-d6.css */
body.d6 .login-screen {background: var(--d6-ground);}
body.d6 .login-box {background: var(--d6-paper);
  border: 1px solid var(--d6-line);
  border-radius: var(--m-r-none, 0);}
body.d6 .login-title {font-family: var(--d6-serif);
  font-size: var(--d6-t-page);
  font-weight: 400;
  line-height: var(--d6-lh-title);
  color: var(--d6-ink);}
body.d6 .login-title em {color: var(--d6-mark); font-style: normal;}
body.d6 .login-sub {font-family: var(--d6-sans);
  font-size: var(--d6-t-sec);
  font-weight: 400;
  color: var(--d6-ink-3);
  max-width: 62ch;}
body.d6 .login-fld label {font-family: var(--d6-sans);
  font-size: var(--d6-t-sec);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--d6-ink-2);}
body.d6 .login-fld input,
body.d6 .login-pass-wrap input {min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--d6-line);
  border-radius: var(--m-r-input, 2px);
  background: var(--d6-paper);
  font-family: var(--d6-sans);
  font-size: var(--d6-t-base);
  font-weight: 400;
  color: var(--d6-ink);
  transition: none;}
body.d6 .login-fld input:focus-visible {outline: 2px solid var(--d6-hot); outline-offset: 2px;}
body.d6 .login-fld-hint,
body.d6 .login-hint,
body.d6 .login-recover-lead {font-family: var(--d6-sans);
  font-size: var(--d6-t-sec);
  color: var(--d6-ink-3);}
body.d6 .login-btn,
body.d6 .login-recover-btn {min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--m-r-input, 2px);
  font-family: var(--d6-sans);
  font-size: var(--d6-t-sec);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: none;}
body.d6 .login-btn {background: var(--d6-ink);
  border: 1px solid var(--d6-ink);
  color: var(--d6-paper);}
body.d6 .login-recover-btn {background: var(--d6-paper);
  border: 1px solid var(--d6-line);
  color: var(--d6-ink);
  text-decoration: none;}
body.d6 .login-text-btn {font-family: var(--d6-sans);
  font-size: var(--d6-t-sec);
  letter-spacing: 0;
  text-transform: none;
  color: var(--d6-mark);}
body.d6 .login-err {font-family: var(--d6-sans);
  font-size: var(--d6-t-base);
  line-height: var(--d6-lh);
  color: var(--d6-hot);
  max-width: 62ch;}
body.d6 .login-recover {border-top: 1px solid var(--d6-line-2);
  background: transparent;}
body.d6 .login-eye {color: var(--d6-ink-3); background: transparent; border: 0;}

/* from the old portal-fit.css */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) and (max-width: 960px){html body.d6 .login-screen {justify-content: flex-start !important;}}

/* step B 10-17: the live Stripe returns (scripts/portal-checkout-return.js). The confirmation screen's spinner, as the old portal.css had it,
   and the one line shown after an add-on or move-up payment comes back. */
.btn-spinner{display:inline-block;width:12px;height:12px;border:1.5px solid color-mix(in srgb, var(--ch8-linen) 25%, transparent);border-top-color:var(--ch8-linen);border-radius:50%;animation:btnspin 500ms linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.btn-spinner{animation:none}}
.checkout-return{position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;max-width:560px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:14px 16px;background:var(--ch8-onyx,#1d1a17);color:var(--ch8-linen,#F8F1E7);font:400 14px/1.45 var(--sans,system-ui);border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.18);}
.checkout-return button{flex:none;min-height:44px;min-width:44px;padding:0 14px;background:transparent;color:inherit;border:1px solid color-mix(in srgb, var(--ch8-linen) 45%, transparent);border-radius:3px;font:inherit;cursor:pointer;}
.checkout-return button:focus-visible{outline:2px solid var(--ch8-linen,#F8F1E7);outline-offset:2px;}