/* Office sign-in/setup: one working glass form on the house ambient field. Public fixed asset route stays unchanged.
   STANDARDS§1/2b/4–6/11: original forms, Passport, two-step/recovery and one-time setup controllers remain authoritative. */
@font-face { font-family: "Geist"; src: url("/vendor/fonts/geist-variable.woff2") format("woff2-variations"), url("/vendor/fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/vendor/fonts/geist-mono-variable.woff2") format("woff2-variations"), url("/vendor/fonts/geist-mono-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

html.nx-on {
  --pm-f: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pm-fm: "Geist Mono", ui-monospace, Menlo, monospace;
  --pm-acc: #81e59d; --pm-sage: color-mix(in srgb, var(--pm-acc) 38%, #c3d3ca); --pm-sage-d: color-mix(in srgb, var(--pm-acc) 30%, #33463c);
  --pm-bg: #e3e8e5; --pm-ink: #18201d; --pm-ink2: #3c4742; --pm-sub: #526159; --pm-line: rgba(24, 40, 32, .08);
  --pm-glass: rgba(255, 255, 255, .5); --pm-glass-hi: rgba(255, 255, 255, .82); --pm-edge: rgba(255, 255, 255, .9); --pm-wash: rgba(24, 40, 32, .035);
  --pm-gr: #1e2425; --pm-bad: #a33e26; --pm-ok: #3f8a58; --pm-ease: cubic-bezier(.22, .8, .24, 1);
  --pm-shg: inset 0 1px 0 var(--pm-edge), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 1px rgba(20, 36, 28, .03), 0 20px 44px -28px rgba(20, 40, 30, .34);
  --pm-sheen: none; --nd-well: rgba(255, 255, 255, .72); --nd-stop: var(--pm-ok);
  --nd-field: radial-gradient(55% 45% at 8% 0%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(50% 55% at 92% 18%, color-mix(in srgb, var(--pm-sage) 70%, transparent), transparent 72%), radial-gradient(70% 50% at 50% 110%, color-mix(in srgb, var(--pm-sage) 35%, #cfd6d3), transparent 70%), #e3e8e5;
}
@media (prefers-color-scheme: dark) { html.nx-on:not([data-theme="light"]) {
  --pm-bg: #0b0e0d; --pm-ink: #eef2ef; --pm-ink2: #c3cdc8; --pm-sub: #8d9a94; --pm-line: rgba(255, 255, 255, .07);
  --pm-glass: rgba(30, 37, 35, .56); --pm-glass-hi: rgba(40, 48, 45, .82); --pm-edge: rgba(255, 255, 255, .09); --pm-wash: rgba(255, 255, 255, .045);
  --pm-sage: color-mix(in srgb, var(--pm-acc) 26%, #25302b); --pm-bad: #ec9a85; --pm-ok: #6fc28d; --nd-well: rgba(255, 255, 255, .05); --nd-stop: var(--pm-acc);
  --pm-shg: inset 0 1px 0 rgba(255, 255, 255, .085), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 1px 0 rgba(0, 0, 0, .45), 0 26px 52px -26px rgba(0, 0, 0, .8);
  --pm-sheen: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 46%);
  --nd-field: radial-gradient(60% 50% at 6% -6%, rgba(205, 228, 214, .085), transparent 70%), radial-gradient(48% 52% at 96% 12%, color-mix(in srgb, var(--pm-acc) 15%, transparent), transparent 72%), radial-gradient(80% 60% at 50% 120%, rgba(30, 44, 38, .6), transparent 70%), #0b0e0d;
} }
html.nx-on[data-theme="dark"] {
  --pm-bg: #0b0e0d; --pm-ink: #eef2ef; --pm-ink2: #c3cdc8; --pm-sub: #8d9a94; --pm-line: rgba(255, 255, 255, .07);
  --pm-glass: rgba(30, 37, 35, .56); --pm-glass-hi: rgba(40, 48, 45, .82); --pm-edge: rgba(255, 255, 255, .09); --pm-wash: rgba(255, 255, 255, .045);
  --pm-sage: color-mix(in srgb, var(--pm-acc) 26%, #25302b); --pm-bad: #ec9a85; --pm-ok: #6fc28d; --nd-well: rgba(255, 255, 255, .05); --nd-stop: var(--pm-acc);
  --pm-shg: inset 0 1px 0 rgba(255, 255, 255, .085), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 1px 0 rgba(0, 0, 0, .45), 0 26px 52px -26px rgba(0, 0, 0, .8);
  --pm-sheen: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 46%);
  --nd-field: radial-gradient(60% 50% at 6% -6%, rgba(205, 228, 214, .085), transparent 70%), radial-gradient(48% 52% at 96% 12%, color-mix(in srgb, var(--pm-acc) 15%, transparent), transparent 72%), radial-gradient(80% 60% at 50% 120%, rgba(30, 44, 38, .6), transparent 70%), #0b0e0d;
}

/* the field */
html.nx-on, html.nx-on body { background: var(--nd-field) !important; background-attachment: fixed !important; color: var(--pm-ink) !important; font-family: var(--pm-f) !important; -webkit-font-smoothing: antialiased; min-height: 100%; }
html.nx-on body::before, html.nx-on body::after { content: none !important; }
html.nx-on .login-wrap .ember, html.nx-on .login-wrap .haze, html.nx-on .login-wrap canvas { display: none !important; }

/* the composition: the floating identity line on top; the sentence on the left; the form card on the right; its help under it */
html.nx-on body .login-wrap { box-sizing: border-box; min-height: 100vh; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(340px, 420px) minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto 1.25fr; grid-template-areas: "brand brand brand brand" ". . . ." ". head card ." ". lede card ." ". . help ." ". . . ."; column-gap: 56px; row-gap: 0; padding: 16px 20px 32px !important; background: none !important; }
html.nx-on body .login-wrap .login-card { display: contents !important; }

/* the floating identity: the company's mark and name, and what this is */
html.nx-on body .login-wrap #brand { grid-area: brand; align-self: start; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; min-height: 56px; margin: 0 !important; padding: 0 8px !important; background: transparent !important; box-shadow: none; color: var(--pm-ink) !important; animation: none !important; }
html.nx-on body .login-wrap #brand::before { content: "Command Center" !important; order: 3 !important; margin-left: auto; display: inline-flex !important; align-items: center; gap: 10px; font: 500 11px var(--pm-fm) !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--pm-sub) !important; flex-basis: auto !important; }
html.nx-on body .login-wrap #brand::after { content: none !important; }
html.nx-on body .login-wrap #brand img { height: 40px !important; width: auto; filter: none !important; }
html.nx-on body .login-wrap #brand > div { font: 700 14px/1.1 var(--pm-f) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--pm-ink) !important; text-align: left !important; }
html.nx-on body .login-wrap #brand > div span { color: var(--pm-ink) !important; } html.nx-on body .login-wrap #brand > div > span:not(#wm1) { color: var(--pm-sub) !important; font-weight: 600 !important; }

/* the sentence */
html.nx-on body .login-wrap .login-card h1 { grid-area: head; align-self: end; margin: 0 !important; padding: 8px 0 0 12px; text-align: left !important; font: 300 clamp(36px, 4.6vw, 56px)/1.05 var(--pm-f) !important; letter-spacing: -.045em !important; color: var(--pm-ink) !important; text-wrap: balance; }
html.nx-on body .login-wrap .login-card h1 em { font-style: normal !important; color: var(--pm-ink) !important; }
html.nx-on body .login-wrap .nd-lede { grid-area: lede; align-self: start; margin: 22px 0 0; padding-left: 12px; max-width: 34ch; font: 400 17px/1.45 var(--pm-f); color: var(--pm-ink2); }
html.nx-on body .login-wrap .nd-lede::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 12px 2px 0; border-radius: 50%; background: var(--nd-stop); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pm-acc) 22%, transparent); }
html.nx-on body.nd-setup .login-wrap .login-card h1 { font-size: clamp(36px, 4.6vw, 56px) !important; }

/* the form card: glass, the fields as wells, one graphite pill */
html.nx-on body .login-wrap .nd-card { grid-area: card; align-self: start; box-sizing: border-box; width: 100%; display: grid; gap: 14px; padding: 26px 24px 22px; border-radius: 20px; background: var(--pm-sheen), var(--pm-glass); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); box-shadow: var(--pm-shg); }
html.nx-on body .login-wrap .nd-card :is(#f, #pp) { gap: 16px !important; }
html.nx-on body .login-wrap .nd-card #who { margin: 0 !important; font: 500 14.5px/1.45 var(--pm-f) !important; color: var(--pm-ink2) !important; }
html.nx-on body .login-wrap .field { display: grid !important; gap: 8px !important; font: 500 13px/1.4 var(--pm-f) !important; letter-spacing: 0 !important; color: var(--pm-ink2) !important; }
html.nx-on body .login-wrap .field input { box-sizing: border-box; width: 100%; height: 48px !important; padding: 0 16px !important; border: 0 !important; border-radius: 12px !important; background: var(--nd-well) !important; box-shadow: inset 0 0 0 1px var(--pm-line) !important; font: 400 16px var(--pm-f) !important; letter-spacing: 0 !important; text-transform: none; color: var(--pm-ink) !important; }
html.nx-on body .login-wrap .field input:focus, html.nx-on body .login-wrap .field input:focus-visible { outline: none !important; box-shadow: inset 0 0 0 1.5px var(--pm-ok), 0 0 0 4px color-mix(in srgb, var(--pm-acc) 22%, transparent) !important; }
html.nx-on body .login-wrap :is(button.primary, .btn.primary) { all: unset; box-sizing: border-box; cursor: pointer; display: flex !important; align-items: center; justify-content: space-between; width: 100%; height: 52px; margin-top: 6px !important; padding: 0 8px 0 22px !important; border-radius: 999px !important; background: var(--pm-acc) !important; color: #0c1a12 !important; font: 600 14.5px var(--pm-f) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-acc) 30%, transparent), 0 12px 26px -14px rgba(0, 0, 0, .6) !important; transition: transform .25s var(--pm-ease); text-decoration: none !important; }
html.nx-on body .login-wrap :is(button.primary, .btn.primary)::after { content: ""; width: 36px; height: 36px; border-radius: 50%; background: rgba(12,26,18,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 10.5l5-5M6.5 5.5h4v4' fill='none' stroke='%230c1a12' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s var(--pm-ease); }
html.nx-on body .login-wrap :is(button.primary, .btn.primary):hover { transform: translateY(-1px); } html.nx-on body .login-wrap :is(button.primary, .btn.primary):hover::after { transform: rotate(45deg); }
html.nx-on body .login-wrap :is(button.primary, .btn.primary):focus-visible { outline: 2px solid var(--pm-ok) !important; outline-offset: 3px; }
html.nx-on body .login-wrap #pp .help { font: 400 13px/1.5 var(--pm-f) !important; color: var(--pm-sub) !important; }
html.nx-on body .login-wrap .sm.ghost { all: unset; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font: 500 13px var(--pm-f); color: var(--pm-ink2) !important; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pm-ok) 55%, transparent); text-underline-offset: 3px; }
html.nx-on body .login-wrap .err { font: 500 13.5px/1.45 var(--pm-f) !important; color: var(--pm-bad) !important; }
html.nx-on body .login-wrap .err:empty { display: none; }
html.nx-on body .login-wrap > .help { grid-area: help; align-self: start; width: auto !important; margin: 14px 8px 0 !important; text-align: left !important; font: 400 13px/1.5 var(--pm-f) !important; color: var(--pm-sub) !important; }

html.nx-on body .login-card.shake, html.nx-on body .login-card.shake * { animation-name: none !important; }
@media (prefers-reduced-motion: reduce) { html.nx-on body * { animation: none !important; transition: none !important; } }

/* night: the primary is the accent itself */
@media (prefers-color-scheme: dark) { html.nx-on:not([data-theme="light"]) body .login-wrap :is(button.primary, .btn.primary) { background: linear-gradient(180deg, color-mix(in srgb, var(--pm-acc) 92%, #fff), var(--pm-acc)) !important; color: #0c1a12 !important; } html.nx-on:not([data-theme="light"]) body .login-wrap :is(button.primary, .btn.primary)::after { background-color: rgba(12, 26, 18, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 10.5l5-5M6.5 5.5h4v4' fill='none' stroke='%230c1a12' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } }
html.nx-on[data-theme="dark"] body .login-wrap :is(button.primary, .btn.primary) { background: linear-gradient(180deg, color-mix(in srgb, var(--pm-acc) 92%, #fff), var(--pm-acc)) !important; color: #0c1a12 !important; }
html.nx-on[data-theme="dark"] body .login-wrap :is(button.primary, .btn.primary)::after { background-color: rgba(12, 26, 18, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 10.5l5-5M6.5 5.5h4v4' fill='none' stroke='%230c1a12' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* the phone (390): the bar, the sentence, the card, its help — one column, 44 px targets, the keyboard never hides the button */
@media (max-width: 860px) {
  html.nx-on body .login-wrap { grid-template-columns: minmax(0, 560px); grid-template-rows: auto auto auto auto auto 1fr; grid-template-areas: "brand" "head" "lede" "card" "help" "."; padding: 12px 12px 28px !important; column-gap: 0; }
  html.nx-on body .login-wrap .nd-lede { margin: 14px 0 22px; padding-left: 4px; font-size: 15.5px; }
  html.nx-on body .login-wrap #brand { min-height: 56px; padding: 0 4px !important; gap: 10px !important; flex-wrap: nowrap !important; }
  html.nx-on body .login-wrap #brand img { height: 32px !important; } html.nx-on body .login-wrap #brand > div { font-size: 12.5px !important; white-space: normal; overflow: visible; overflow-wrap: anywhere; min-width: 0; }
  html.nx-on body .login-wrap #brand::before { display: none !important; }
  html.nx-on body .login-wrap .login-card h1 { padding: 34px 4px 0; font-size: 36px !important; }
  html.nx-on body.nd-setup .login-wrap .login-card h1 { font-size: 36px !important; }
  html.nx-on body .login-wrap .nd-card { padding: 22px 18px 18px; }
}

/* Original two-step controls: no hidden recovery words, native checkbox and visible focus. */
html.nx-on body .login-wrap #f2 .field input { font-family: var(--pm-fm) !important; font-size: 20px !important; letter-spacing: .12em !important; }
html.nx-on body .login-wrap .ts-trust { display: flex; gap: 10px; align-items: center; min-height: 44px; font: 400 14px/1.4 var(--pm-f); color: var(--pm-ink); cursor: pointer; }
html.nx-on body .login-wrap .ts-trust input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--pm-ok); }
html.nx-on body .login-wrap .ts-trust input:focus-visible { outline: 2px solid var(--pm-ok); outline-offset: 3px; }
html.nx-on body .login-wrap .ts-help { font: 400 13px/1.5 var(--pm-f); color: var(--pm-sub); margin: 0; }
html.nx-on body .login-wrap .ts-again { display: inline-flex; align-items: center; min-height: 44px; font: 400 13px/1.5 var(--pm-f); color: var(--pm-ink2); text-decoration: underline; text-underline-offset: 3px; }