@echomem/mcp 1.4.20 → 1.4.22

package/dist/setup-page/styles-extraction.js

@@ -139,6 +139,429 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       font-size: 12px;
       font-weight: 650;
     }
+    .localAuthStage {
+      display: grid;
+      place-items: center;
+      width: min(720px, 100%);
+      min-height: min(660px, calc(100vh - 120px));
+      margin: 0 auto;
+    }
+    .localAuthWelcomeStage {
+      width: min(760px, 100%);
+      min-height: calc(100vh - clamp(56px, 10vw, 116px));
+    }
+    body.readyMode:has(.localAuthWelcome) {
+      background: var(--echo-paper-canvas);
+      background-image: none;
+    }
+    .localAuthWelcome {
+      width: min(590px, 100%);
+      display: grid;
+      justify-items: center;
+      gap: 22px;
+      text-align: center;
+      color: var(--echo-ink-text);
+    }
+    .localAuthOrbScene {
+      position: relative;
+      display: grid;
+      justify-items: center;
+      width: 108px;
+      height: 142px;
+      margin-bottom: 2px;
+    }
+    .localAuthOrb {
+      position: relative;
+      display: block;
+      width: 66px;
+      height: 66px;
+      border-radius: 50%;
+      background:
+        radial-gradient(circle at 36% 30%, rgba(255,255,255,0.56) 0 4%, transparent 24%),
+        radial-gradient(circle at 54% 66%, #147fdc 0 22%, transparent 58%),
+        linear-gradient(145deg, #68d9ff 0%, #21a9f4 46%, #1172d3 100%);
+      box-shadow:
+        inset -9px -12px 18px rgba(0,74,177,0.18),
+        0 12px 24px rgba(17,114,211,0.16);
+      animation: localAuthOrbFloat 3.2s ease-in-out infinite;
+    }
+    .localAuthOrb::before,
+    .localAuthOrb::after {
+      content: "";
+      position: absolute;
+      top: 28px;
+      width: 5px;
+      height: 8px;
+      border-radius: 50%;
+      background: #11100f;
+    }
+    .localAuthOrb::before { left: 24px; }
+    .localAuthOrb::after { right: 24px; }
+    .localAuthOrbShadow {
+      position: absolute;
+      left: 50%;
+      bottom: 2px;
+      width: 90px;
+      height: 10px;
+      border-radius: 50%;
+      background: rgba(65,61,54,0.12);
+      filter: blur(7px);
+      transform: translateX(-50%);
+      animation: localAuthOrbShadow 3.2s ease-in-out infinite;
+    }
+    @keyframes localAuthOrbFloat {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
+    }
+    @keyframes localAuthOrbShadow {
+      0%, 100% { opacity: 0.78; transform: translateX(-50%) scaleX(1); }
+      50% { opacity: 0.42; transform: translateX(-50%) scaleX(0.72); }
+    }
+    .localAuthWelcomeCopy {
+      display: grid;
+      justify-items: center;
+      gap: 6px;
+    }
+    .localAuthWelcomeCopy h2 {
+      margin: 0;
+      color: var(--echo-ink-primary);
+      font-family: var(--echo-font-script, "Caveat", cursive);
+      font-size: clamp(44px, 6vw, 58px);
+      font-weight: 700;
+      line-height: 0.95;
+      letter-spacing: 0;
+    }
+    .localAuthWelcomeCopy p {
+      margin: 0;
+      color: #74736f;
+      font-size: clamp(14px, 1.7vw, 17px);
+      line-height: 1.45;
+      letter-spacing: 0.01em;
+    }
+    .localAuthWelcomeForm {
+      width: min(520px, 100%);
+      display: grid;
+      gap: 16px;
+    }
+    .localAuthEmailCapsule {
+      position: relative;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 58px;
+      align-items: center;
+      min-height: 64px;
+      border: 1px solid rgba(78,78,75,0.20);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.94);
+      padding: 5px 6px 5px 22px;
+      box-shadow: 0 3px 8px rgba(50,48,43,0.08);
+      transition: border-color 160ms ease, box-shadow 160ms ease;
+    }
+    .localAuthEmailCapsule .srOnly {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+    .localAuthEmailCapsule:focus-within {
+      border-color: rgba(26,58,143,0.48);
+      box-shadow: 0 0 0 3px rgba(26,58,143,0.10), 0 3px 8px rgba(50,48,43,0.08);
+    }
+    .localAuthEmailCapsule input {
+      min-width: 0;
+      border: 0;
+      background: transparent;
+      color: var(--echo-ink-text);
+      font: inherit;
+      font-size: 17px;
+      outline: none;
+    }
+    .localAuthEmailCapsule input::placeholder { color: #a7a7a3; }
+    .localAuthEmailCapsule button {
+      width: 52px;
+      height: 52px;
+      display: grid;
+      place-items: center;
+      border: 0;
+      border-radius: 50%;
+      background: var(--echo-ink-primary);
+      color: #fff;
+      cursor: pointer;
+      font: inherit;
+      font-size: 27px;
+      line-height: 1;
+      transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
+    }
+    .localAuthEmailCapsule button:hover:not(:disabled) {
+      transform: translateX(2px);
+      background: #234ba9;
+    }
+    .localAuthEmailCapsule button:focus-visible {
+      outline: 3px solid rgba(26,58,143,0.20);
+      outline-offset: 3px;
+    }
+    .localAuthEmailCapsule button:disabled {
+      background: #ccccca;
+      color: #fff;
+      cursor: not-allowed;
+      opacity: 1;
+    }
+    .localAuthConsent {
+      width: min(470px, calc(100% - 24px));
+      display: grid;
+      grid-template-columns: 19px minmax(0, 1fr);
+      gap: 10px;
+      align-items: start;
+      justify-self: center;
+      color: #969591;
+      font-size: 13px;
+      line-height: 1.55;
+      text-align: left;
+    }
+    .localAuthConsent input {
+      width: 18px;
+      height: 18px;
+      margin: 2px 0 0;
+      accent-color: var(--echo-ink-primary);
+    }
+    .localAuthConsent a {
+      color: #62615e;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    .localAuthWelcomeForm .localAuthStatus {
+      width: min(470px, calc(100% - 24px));
+      justify-self: center;
+      text-align: left;
+    }
+    .localAuthOtpWelcome {
+      width: min(620px, 100%);
+      gap: 18px;
+    }
+    .localAuthOtpWelcome .localAuthOrbScene {
+      margin-bottom: -4px;
+    }
+    .localAuthOtpWelcome .localAuthWelcomeCopy {
+      gap: 10px;
+    }
+    .localAuthOtpWelcome .localAuthWelcomeCopy p strong {
+      color: var(--echo-ink-text);
+      font-family: var(--echo-font-mono);
+      font-weight: 700;
+    }
+    .localAuthOtpForm {
+      width: min(540px, 100%);
+      gap: 14px;
+    }
+    .localAuthOtpCells {
+      display: grid;
+      grid-template-columns: repeat(6, minmax(42px, 1fr));
+      gap: 10px;
+      width: 100%;
+    }
+    .localAuthOtpCells input {
+      width: 100%;
+      aspect-ratio: 1 / 0.82;
+      min-height: 58px;
+      border: 1.5px solid rgba(78,78,75,0.18);
+      border-radius: 8px;
+      background: rgba(255,255,255,0.95);
+      box-shadow: 0 3px 8px rgba(50,48,43,0.10);
+      color: var(--echo-ink-text);
+      font-family: var(--echo-font-body);
+      font-size: clamp(26px, 4vw, 34px);
+      font-weight: 650;
+      line-height: 1;
+      text-align: center;
+      outline: none;
+      transition: border-color 160ms ease, box-shadow 160ms ease;
+    }
+    .localAuthOtpCells input:focus {
+      border-color: rgba(26,58,143,0.72);
+      box-shadow: 0 0 0 4px rgba(26,58,143,0.14), 0 3px 8px rgba(50,48,43,0.10);
+    }
+    .localAuthVerifyWide,
+    .localAuthBackWide {
+      width: 100%;
+      min-height: 56px;
+      border-radius: 999px;
+      justify-content: center;
+    }
+    .localAuthOtpForm .localAuthStatus {
+      width: min(390px, 100%);
+      justify-self: center;
+      color: var(--echo-ink-primary);
+      font-family: var(--echo-font-mono);
+      font-size: 14px;
+      line-height: 1.45;
+      text-align: center;
+    }
+    .localAuthOtpForm .localAuthStatus.is-error {
+      color: #c7372f;
+    }
+    .localAuthCard {
+      width: min(680px, 100%);
+      border: 1.5px solid rgba(26,58,143,0.16);
+      border-radius: 20px;
+      background: rgba(255,255,255,0.88);
+      padding: clamp(22px, 4vw, 34px);
+      box-shadow: 0 24px 60px -42px rgba(20,36,84,0.48);
+      text-align: left;
+    }
+    .localAuthLead {
+      display: grid;
+      justify-items: start;
+      gap: 10px;
+    }
+    .localAuthLead img {
+      width: 58px;
+      height: 58px;
+      object-fit: contain;
+      filter: drop-shadow(0 10px 16px rgba(26,58,143,0.18));
+    }
+    .localAuthLead h2 {
+      max-width: 610px;
+      font-size: clamp(30px, 4vw, 46px);
+      line-height: 1;
+    }
+    .localAuthLead p:not(.consentEyebrow) {
+      max-width: 590px;
+      margin: 0;
+      color: var(--echo-ink-mute);
+      font-size: 15px;
+      line-height: 1.55;
+    }
+    .localAuthForm {
+      display: grid;
+      gap: 14px;
+      margin-top: 22px;
+    }
+    .localAuthField {
+      display: grid;
+      gap: 7px;
+    }
+    .localAuthField > span {
+      font-family: var(--echo-font-mono);
+      color: var(--echo-ink-mute);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+    .localAuthField input {
+      width: 100%;
+      min-height: 50px;
+      border: 1px solid rgba(26,58,143,0.20);
+      border-radius: 10px;
+      background: #fff;
+      color: var(--echo-ink-text);
+      padding: 0 14px;
+      font: inherit;
+      font-size: 16px;
+      outline: none;
+    }
+    .localAuthField input:focus {
+      border-color: var(--echo-ink-primary);
+      box-shadow: 0 0 0 3px rgba(26,58,143,0.12);
+    }
+    .localAuthLegal {
+      display: grid;
+      gap: 10px;
+      border: 1px solid rgba(26,58,143,0.10);
+      border-radius: 14px;
+      background: rgba(240,239,233,0.56);
+      padding: 13px 14px;
+    }
+    .localAuthLegal label {
+      display: grid;
+      grid-template-columns: 18px minmax(0, 1fr);
+      gap: 10px;
+      align-items: start;
+      color: var(--echo-ink-mute);
+      font-size: 12px;
+      line-height: 1.45;
+    }
+    .localAuthLegal input {
+      width: 16px;
+      height: 16px;
+      margin: 2px 0 0;
+      accent-color: var(--echo-ink-primary);
+    }
+    .localAuthLegal a {
+      color: var(--echo-ink-primary);
+      font-weight: 750;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    .localAuthActions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      align-items: center;
+    }
+    .localAuthStatus {
+      min-height: 18px;
+      margin: 0;
+      color: var(--echo-ink-mute);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+    .localAuthStatus:empty { display: none; }
+    .localAuthStatus.is-error {
+      border: 1px solid rgba(139,44,38,0.22);
+      border-radius: 10px;
+      background: #fff4ee;
+      padding: 9px 11px;
+      color: #8b2c26;
+      font-weight: 650;
+    }
+    @media (max-width: 560px) {
+      .localAuthWelcomeStage {
+        min-height: calc(100vh - 56px);
+      }
+      .localAuthWelcome {
+        gap: 18px;
+      }
+      .localAuthOrbScene {
+        width: 88px;
+        height: 112px;
+      }
+      .localAuthOrb {
+        width: 58px;
+        height: 58px;
+      }
+      .localAuthOrb::before,
+      .localAuthOrb::after {
+        top: 25px;
+      }
+      .localAuthOrb::before { left: 21px; }
+      .localAuthOrb::after { right: 21px; }
+      .localAuthWelcomeCopy h2 {
+        font-size: 44px;
+      }
+      .localAuthEmailCapsule {
+        min-height: 58px;
+        grid-template-columns: minmax(0, 1fr) 50px;
+        padding-left: 18px;
+      }
+      .localAuthEmailCapsule button {
+        width: 46px;
+        height: 46px;
+      }
+      .localAuthConsent {
+        width: calc(100% - 16px);
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .localAuthOrb,
+      .localAuthOrbShadow {
+        animation: none;
+      }
+    }
     .track { height: 12px; overflow: hidden; border-radius: 999px; background: #e8e8e1; margin: 16px 0 10px; }
     .fill { height: 100%; width: 0%; background: var(--echo-ink-primary); transition: width 180ms ease; }
     /* indeterminate "we're working on it" bar for the prep phase (before job counts move) */
@@ -173,6 +596,8 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       .explainCta .promiseActions { width: 100%; }
       .explainCta .primary, .explainCta .secondary { width: 100%; }
       .consentActions .primary { width: 100%; }
+      .localAuthActions .primary,
+      .localAuthForm > .primary { width: 100%; }
       .cityHero { min-height: auto; }
       .cityShell {
         width: 100vw;
@@ -1664,6 +2089,36 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       max-width: 650px;
       margin: 14px 0 0;
     }
+    .planGateStage {
+      width: 100%;
+    }
+    .planGateDecision {
+      text-align: left;
+    }
+    .planGateHero {
+      display: grid;
+      grid-template-columns: 94px minmax(0, 1fr);
+      align-items: center;
+      gap: clamp(20px, 3vw, 34px);
+      border-bottom: 1px solid #d7d8d3;
+      padding: clamp(26px, 4vw, 42px) clamp(22px, 4vw, 34px);
+    }
+    .planGateHero h2 {
+      max-width: 760px;
+      margin: 0;
+      font-size: clamp(38px, 5vw, 60px);
+      line-height: 0.96;
+    }
+    .planGateHero p {
+      max-width: 680px;
+      margin: 14px 0 0;
+      color: var(--echo-ink-mute);
+      font-size: 16px;
+      line-height: 1.5;
+    }
+    .planGateAccount {
+      border-top: 1px solid #d7d8d3;
+    }
     .proofStrip {
       width: 100%;
       justify-content: flex-start;