@import url('notifications.css');
@import url('field-tokens.css');
/* Match SF Pro's intermediate weights to Windows' available font faces. */
@font-face {
  font-family: "CoGenie Windows Fallback";
  src: local("Segoe UI");
  font-weight: 400 510;
  size-adjust: 107%;
  font-display: swap;
}
@font-face {
  font-family: "CoGenie Windows Fallback";
  src: local("Segoe UI Semibold");
  font-weight: 590 600;
  font-display: swap;
}

/* CoGenie account screen. All component rules are scoped for transplantation.
   SF Pro is the Figma font. Supply a licensed webfont at integration if needed;
   otherwise Apple platforms use their system face and Windows uses Segoe UI. */
.cogenie-page {
  --cg-font: "SF Pro", -apple-system, BlinkMacSystemFont, "CoGenie Windows Fallback", "Segoe UI", Arial, sans-serif;
  --cg-bg: #060819;
  --cg-text: #ebf0ff;
  --cg-heading: #f2f4ff;
  --cg-muted: var(--cg-field-placeholder);
  --cg-border: var(--cg-field-default-border);
  --cg-primary: #7c19ff;
  --cg-secondary: #4f7cff;
  --cg-control-bg: rgb(44 51 92 / 30%);
  --cg-control-height: 54px;
  --cg-radius: var(--cg-field-radius);
  --cg-card-radius: 24px;
  --cg-space-small: 12px;
  --cg-space-medium: 16px;
  --cg-space-large: 24px;
  margin: 0;
  background: var(--cg-bg);
  color: var(--cg-text);
  font-family: var(--cg-font);
  font-size: 14px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.cogenie-signin,
.cogenie-signin * { box-sizing: border-box; }
.cogenie-signin h1,
.cogenie-signin p { margin: 0; }
.cogenie-signin :where(button, input) { font: inherit; }
.cogenie-signin button { cursor: pointer; }
.cogenie-signin img { display: block; }
.cogenie-signin :focus-visible {
  outline: 2px solid var(--cg-secondary);
  outline-offset: 4px;
}

/* Centre one intrinsic logo/card/footer stack. Extra viewport space stays
   outside the stack; only bounded gaps tighten on short screens. */
.cogenie-signin {
  --cg-page-gutter: clamp(16px, 3vw, 32px);
  --cg-page-clearance: 24px;
  --cg-stack-gap: 24px;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cg-page-clearance) var(--cg-page-gutter);
}
.cogenie-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cg-stack-gap);
  width: 100%;
  flex: none;
}
.cogenie-brand {
  position: relative;
  flex: none;
  width: 163.2px;
  height: 48px;
  margin-inline-start: 15.2px;
}
.cogenie-brand__symbol {
  position: absolute;
  left: -0.36px;
  top: 9.24px;
  width: 43.91px;
  height: 29.52px;
  transform: scaleX(-1);
}
.cogenie-brand__wordmark {
  position: absolute;
  left: 31.19%;
  top: 30.73%;
  width: 66.75%;
  height: 34.14%;
}

/* The only absolutely positioned elements are contained decorative artwork. */
.cogenie-card {
  position: relative;
  isolation: isolate;
  width: min(100%, 420px);
  min-width: 0;
  container: signin-card / inline-size;
  flex: none;
  padding: 24px;
  overflow: hidden;
  border: 0;
  border-radius: var(--cg-card-radius);
  background: rgb(113 112 147 / 2%);
}
.cogenie-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -123px;
  bottom: -144px;
  width: calc(100% + 247px);
  height: 348px;
  background: url("assets/card-glow.svg") center / 100% 100% no-repeat;
  /* Login-only richness calibration: deepen colour without lifting the base. */
  filter: brightness(1.06) saturate(1.12);
}
.cogenie-card::after,
.cogenie-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--cg-edge);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.cogenie-card { --cg-edge: linear-gradient(180deg, #212435 52.6196%, #7d1aff 100%); }
.cogenie-card__header { text-align: center; margin-bottom: 28px; }
.cogenie-card__header h1 {
  font-size: 28px;
  line-height: 33px;
  font-weight: 590;
  color: var(--cg-heading);
}
.cogenie-card__header p {
  margin-top: var(--cg-space-small);
  font-size: 14px;
  line-height: 17px;
  color: rgb(242 244 255 / 70%);
}
.cogenie-button {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--cg-control-height);
  padding: 0 var(--cg-space-small);
  overflow: hidden;
  border: 0;
  border-radius: var(--cg-radius);
  background: var(--cg-control-bg);
  color: var(--cg-text);
  font-size: 16px;
  font-weight: 510;
  line-height: 1.2;
  --cg-edge: linear-gradient(180deg, #7c19ff, #a25bff);
}
.cogenie-button__art { position: absolute; inset: 1px; pointer-events: none; }
.cogenie-button__label { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--cg-space-small); }
.cogenie-button__label img { flex: none; width: 20px; height: 20px; }
.cogenie-button--microsoft {
  border-color: transparent;
  color: #fff;
  --cg-edge: linear-gradient(258deg, #f419ff, #7c19ff 24.0844%, #a25bff 80.0646%, #f2dbff);
}
.cogenie-button--microsoft .cogenie-button__label { text-shadow: 0 0 10px rgb(255 255 255 / 40%); }
.cogenie-button__pattern { position: absolute; width: 100%; height: 60px; left: 1px; top: -6px; }
.cogenie-button__flare { position: absolute; height: 204px; mix-blend-mode: plus-lighter; }
/* Calibrated against the Figma export: browsers composite the blurred SVG
   layers differently from Figma's linear-dodge effect. Original assets retained. */
.cogenie-button__flare--left { width: 247px; right: calc(100% - 130px); top: -101px; filter: brightness(1.22) saturate(1.14); }
.cogenie-button__flare--right { width: 322px; right: -73px; top: -31px; filter: brightness(1.08) saturate(1.14); }
.cogenie-button--signin .cogenie-button__art { filter: saturate(1.12) brightness(.97); }
.cogenie-divider { display: flex; align-items: center; gap: 8px; height: 19px; margin: 16px 0; color: var(--cg-muted); font-weight: 510; line-height: 20px; }
.cogenie-divider::before,
.cogenie-divider::after { content: ""; flex: 1; height: 1px; background: url("assets/divider.svg") center / 100% 1px no-repeat; }
.cogenie-form__fields { display: grid; gap: 20px; }
.cogenie-field { display: grid; min-width: 0; gap: var(--cg-space-small); }
.cogenie-field label { font-weight: 510; line-height: 20px; }
.cogenie-field input {
  width: 100%;
  min-width: 0;
  height: var(--cg-control-height);
  padding: 0 20px;
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  background: var(--cg-field-surface);
  backdrop-filter: var(--cg-field-backdrop);
  color: var(--cg-text);
  font-family: var(--cg-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}
.cogenie-field input::placeholder { color: var(--cg-muted); opacity: 1; }
.cogenie-password { display: grid; grid-template-columns: minmax(0, 1fr) 54px; align-items: center; }
.cogenie-password input { grid-area: 1 / 1 / 2 / 3; padding-right: 58px; }
.cogenie-password__toggle {
  grid-area: 1 / 2;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
}
.cogenie-password__toggle img { width: 19.84px; height: 18.28px; }
.cogenie-password__toggle[aria-pressed="true"] img { width: 19.32px; height: 14.71px; }
.cogenie-text-button { padding: 0; border: 0; background: none; color: var(--cg-text); font-weight: 510; }
.cogenie-form__reset { display: block; margin-top: var(--cg-space-small); color: var(--cg-secondary); line-height: 17px; text-align: left; }
.cogenie-button--signin { margin-top: var(--cg-space-large); backdrop-filter: blur(12px); }
.cogenie-button__glow { position: absolute; left: -20px; width: calc(100% + 42px); height: 96px; }
.cogenie-button__glow--purple { top: 4px; }
.cogenie-button__glow--pink { top: 13px; }
.cogenie-button__glow--overlay { top: 15px; mix-blend-mode: overlay; }
.cogenie-card .cogenie-card__access { margin-top: var(--cg-space-medium); color: var(--cg-muted); line-height: 20px; text-align: center; text-wrap: balance; }
.cogenie-footer { color: var(--cg-muted); line-height: 17px; text-align: center; }

/* A modest desktop reduction uses real dimensions, preserving the type scale
   and generous controls. Mobile retains its existing touch dimensions. */
@media (min-width: 601px) {
  .cogenie-signin {
    --cg-control-height: 50px;
    --cg-space-small: 11px;
    --cg-space-medium: 15px;
    --cg-space-large: 22px;
  }
  .cogenie-card { padding: 22px; }
  .cogenie-card__header { margin-bottom: 26px; }
}

/* Narrow layouts keep the same type scale, artwork and 54px controls.
   Only the surrounding space and text flow change; the card never scales. */
@media (max-width: 600px) {
  .cogenie-signin {
    --cg-page-gutter: clamp(16px, 4vw, 24px);
  }
  .cogenie-card { padding-inline: clamp(20px, 4vw, 24px); }

  /* Expand these text actions into actual touch targets while reusing the
     space between controls. No invisible hit areas overlap neighboring fields. */
  .cogenie-form__reset {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0;
    line-height: 20px;
  }
  .cogenie-button--signin { margin-top: 9px; }
}

/* Wrapping depends on the card's available content width, including when this
   section is transplanted into a narrower ASP.NET host layout. */
@container signin-card (max-width: 380px) {
  .cogenie-card__header p { line-height: 20px; text-wrap: balance; }
}

/* Short windows: compact whitespace progressively between 800px and 640px.
   The step is a spacing unit, not a scale factor. Below 640px spacing stops shrinking and the
   document grows naturally, including any validation or status content. */
@media (max-height: 800px) {
  .cogenie-signin {
    --cg-height-step: clamp(0px, calc((100dvh - 640px) / 20), 8px);
    --cg-page-clearance: calc(16px + var(--cg-height-step));
    --cg-stack-gap: calc(16px + var(--cg-height-step));
  }
  .cogenie-card { padding-block: calc(16px + var(--cg-height-step)); }
  .cogenie-card__header { margin-bottom: calc(16px + var(--cg-height-step) * 1.5); }
  .cogenie-card__header p { margin-top: calc(8px + var(--cg-height-step) * .5); }
  .cogenie-field { gap: calc(8px + var(--cg-height-step) * .5); }
  .cogenie-form__fields { gap: calc(12px + var(--cg-height-step)); }
  .cogenie-divider { margin-block: calc(10px + var(--cg-height-step) * .75); }
}

/* Narrow layouts retain their expanded text-action touch targets. */
@media (max-height: 800px) and (min-width: 601px) {
  .cogenie-form__reset { margin-top: calc(8px + var(--cg-height-step) * .5); }
  .cogenie-button--signin { margin-top: calc(16px + var(--cg-height-step)); }
  .cogenie-card .cogenie-card__access {
    margin-top: calc(12px + var(--cg-height-step) * .5);
  }
}
@media (forced-colors: active) {
  .cogenie-button__art, .cogenie-card::before,
  .cogenie-card::after, .cogenie-button::after { display: none; }
  .cogenie-card, .cogenie-button, .cogenie-field input { border: 1px solid ButtonText; }
}

/* V1 authentication states. The approved default and responsive rules above
   remain unchanged; these selectors apply only during interaction/new views. */
.cogenie-page {
  /* Approved Figma error accent, scoped to Login rather than shared controls. */
  --cg-error: #fe0094;
  --cg-success: #05d18a;
  --cg-success-border: #16856b;
  --cg-typing: var(--cg-field-focus-border);
}
.cogenie-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cogenie-field input.is-complete { color: var(--cg-text); }
/* Saved credentials use the same type metrics as manual entry. This selector
   remains active on hover/focus; the normal state rules still own the border.
   Chromium's protected autofill background cannot be overridden by an author
   background declaration. Delay that colour switch, retaining the existing
   translucent fill instead of painting an opaque inset shadow over the glow. */
.cogenie-field input:is(:autofill, :-webkit-autofill) {
  font-family: var(--cg-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--cg-text);
  -webkit-text-fill-color: var(--cg-text);
  caret-color: var(--cg-text);
  transition: background-color 0s 86400s;
}
/* Keep text metrics stable before, during and after autofill. Chrome may
   display a suggested value before the input matches :autofill. */
.cogenie-field input::first-line,
.cogenie-field input::placeholder,
.cogenie-field input:is(:autofill, :-webkit-autofill)::first-line {
  font-family: var(--cg-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}
.cogenie-field input:focus:not([aria-invalid="true"]):not(.is-success) {
  border-color: var(--cg-typing);
  box-shadow: var(--cg-field-focus-shadow);
}
.cogenie-field input:focus:not([aria-invalid="true"]):not(.is-success)::placeholder { color: var(--cg-muted); }
.cogenie-field input[aria-invalid="true"] {
  border-color: var(--cg-error);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cg-error) 35%, transparent);
}
.cogenie-field input.is-success {
  border-color: var(--cg-success-border);
  box-shadow: 0 0 8px rgb(5 209 138 / 22%);
}
/* These inputs already have the designed focus border/glow. Keep the base
   keyboard outline on buttons and links, without stacking it on inputs. */
.cogenie-signin .cogenie-field input:focus,
.cogenie-signin .cogenie-code input:focus {
  outline: none;
}
.cogenie-signin .cogenie-field-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--cg-error);
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 17px;
}
.cogenie-field-error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: 0 0 12px;
  height: 12px;
  margin-top: 2px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
}
.cogenie-field:has(> .cogenie-field-error:not([hidden])) { row-gap: 8px; }
.cogenie-field:has(> .cogenie-field-error:not([hidden])) > label { margin-bottom: 4px; }
/* Each family retains its approved artwork and colour balance. Only a small
   edge glow eases in; removing hover immediately restores the baseline. */
@media (hover: hover) and (pointer: fine) {
  .cogenie-button:not(:disabled):not(.is-loading):hover { transition: box-shadow 200ms cubic-bezier(.2, .8, .2, 1); }
  .cogenie-button--signin:not(:disabled):not(.is-loading):hover { box-shadow: inset 0 0 0 1px rgb(162 91 255 / 16%), 0 2px 8px rgb(124 25 255 / 18%); }
  .cogenie-button--microsoft:not(:disabled):not(.is-loading):hover { box-shadow: inset 0 0 0 1px rgb(242 219 255 / 12%), 0 3px 10px rgb(124 25 255 / 22%); }
}
.cogenie-button:disabled:not(.is-loading) { opacity: .45; cursor: default; }
.cogenie-button.is-loading { cursor: wait; }
.cogenie-button.is-loading .cogenie-button__label { visibility: hidden; }
.cogenie-spinner { display: none; }
.cogenie-button.is-loading > .cogenie-spinner {
  display: block;
  position: absolute;
  width: 28px;
  height: 28px;
  background: repeating-conic-gradient(from -5deg, var(--cg-text) 0deg 10deg, transparent 10deg 45deg);
  mask: radial-gradient(transparent 0 7px, #000 8px 13px, transparent 14px);
  animation: cogenie-spin 1s linear infinite;
}
@keyframes cogenie-spin { to { transform: rotate(360deg); } }

/* Recovery cards share the original card, glow, controls and height compaction. */
.cogenie-card--recovery .cogenie-card__header { margin-bottom: 32px; }
.cogenie-signin h1:focus { outline: none; }
.cogenie-card__header strong { font-weight: 510; color: var(--cg-text); overflow-wrap: anywhere; }
.cogenie-signin .cogenie-back { margin-top: 16px; text-align: center; line-height: 20px; }
.cogenie-back .cogenie-text-button { color: var(--cg-muted); line-height: 20px; }
.cogenie-back span { color: var(--cg-text); }
.cogenie-code {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  max-width: 384px;
  padding: 0;
  margin: 0 auto;
  min-width: 0;
  border: 0;
}
.cogenie-code input {
  width: 100%;
  min-width: 0;
  height: var(--cg-control-height);
  padding: 0;
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  background: var(--cg-field-surface);
  color: var(--cg-text);
  text-align: center;
  font-size: 20px;
  font-weight: 510;
  caret-color: var(--cg-text);
}
.cogenie-code:not(.is-error):not(.is-success) input:focus { border-color: var(--cg-typing); box-shadow: var(--cg-field-focus-shadow); }
.cogenie-code input.is-complete { border-color: #535767; }
.cogenie-code:not(.is-error):not(.is-success) input.is-complete:focus { border-color: var(--cg-typing); }
.cogenie-code.is-error input { border-color: var(--cg-error); box-shadow: 0 0 8px color-mix(in srgb, var(--cg-error) 30%, transparent); }
.cogenie-code.is-error input:focus-visible { box-shadow: inset 0 0 0 1px var(--cg-error), 0 0 8px color-mix(in srgb, var(--cg-error) 30%, transparent); }
.cogenie-code.is-success input { border-color: var(--cg-success-border); box-shadow: 0 0 8px rgb(5 209 138 / 32%); opacity: 1; -webkit-text-fill-color: var(--cg-text); }
.cogenie-code.is-success input::selection { background: transparent; color: var(--cg-text); }
.cogenie-form:has(.cogenie-code.is-success) .cogenie-button:disabled { opacity: 1; }
.cogenie-signin .cogenie-code-feedback,
.cogenie-signin #code-error { margin-top: 16px; line-height: 20px; }
.cogenie-code-feedback { color: var(--cg-muted); }
.cogenie-code-feedback button { color: var(--cg-secondary); }

/* Microsoft-owned visual shown as a local, inert provider demonstration. */
.cogenie-provider {
  width: min(100%, 546px);
  padding: 54px;
  background: #fff;
  color: #1b1b1b;
  font-family: "Segoe UI", Arial, sans-serif;
  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
  color-scheme: light;
}
.cogenie-provider__brand { display: flex; align-items: center; gap: 6px; color: #737373; font-size: 26px; line-height: 30px; font-weight: 600; }
.cogenie-provider__brand img { width: 30px; height: 30px; }
.cogenie-provider h1 { margin: 24px 0 12px; font-size: 28px; line-height: 34px; font-weight: 600; }
.cogenie-provider input { width: 100%; height: 44px; padding: 6px 0; background: #fff; color: #1b1b1b; border: 0; border-bottom: 1px solid #666; border-radius: 0; font-size: 15px; }
.cogenie-provider form p { margin-top: 20px; font-size: 16px; line-height: 24px; }
.cogenie-provider__link { color: #0067b8; }
.cogenie-provider__actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 32px; }
.cogenie-provider__actions button { min-width: min(135px, 48%); min-height: 44px; border: 0; padding: 8px 12px; background: #ccc; color: #1b1b1b; font-size: 16px; }
.cogenie-provider__actions button[type="submit"] { color: #fff; background: #0067b8; }
.cogenie-provider__actions button:disabled { opacity: .65; cursor: wait; }
.cogenie-app-preview { max-width: 452px; text-align: center; }
.cogenie-app-preview h1 { font-size: 28px; line-height: 1.2; }
.cogenie-app-preview p { margin: 16px 0; color: var(--cg-muted); }
.cogenie-app-preview button { min-height: 44px; }

/* Notification Alert: detached from the form composition and safe-area aware. */
.cogenie-page .cogenie-toast[data-kind="error"] .cogenie-toast__check { background: var(--cg-error); }
.cogenie-signin [hidden] { display: none; }
@media (max-height: 800px) {
  .cogenie-card--recovery .cogenie-card__header { margin-bottom: calc(20px + var(--cg-height-step) * 1.5); }
  .cogenie-signin .cogenie-back { margin-top: calc(12px + var(--cg-height-step) * .5); }
}
@media (max-width: 600px) {
  .cogenie-card--recovery .cogenie-button--signin { margin-top: 24px; }
  .cogenie-back .cogenie-text-button { min-height: 44px; }
  .cogenie-signin .cogenie-back { margin-top: 4px; }
  .cogenie-code { gap: clamp(6px, 2vw, 12px); }
  .cogenie-code-feedback button { min-height: 44px; }
  .cogenie-signin .cogenie-code-feedback { margin-top: 4px; }
  .cogenie-provider { padding: clamp(24px, 6vw, 44px); }
}
@media (max-width: 1240px) {
  /* The centered card and 360px toast need separate horizontal space.
     Flow after the composition so feedback cannot obscure fields or actions. */
  .cogenie-toast {
    position: relative;
    inset: auto;
    margin: 0 auto max(24px, env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .cogenie-button:not(:disabled):not(.is-loading):hover { transition: none; }
  .cogenie-button.is-loading > .cogenie-spinner { animation: none; }
}

/* Card width is capped at 420px at every desktop width, then shrinks with
   available space. Wide typography and height-aware spacing remain unchanged. */
@media (min-width: 1800px) {
  .cogenie-card__header h1 { font-size: 26px; line-height: 31px; }
}

/* Taller wide canvases also use the approved denser vertical composition. */
@media (min-width: 1800px) and (min-height: 801px) {
  .cogenie-signin {
    --cg-control-height: 50px;
    --cg-space-small: 10px;
    --cg-space-medium: 14px;
    --cg-space-large: 20px;
  }
  .cogenie-card { padding: 20px; }
  .cogenie-card__header { margin-bottom: 20px; }
  .cogenie-form__fields { gap: 16px; }
  .cogenie-divider { margin-block: 12px; }
  .cogenie-card--recovery .cogenie-card__header { margin-bottom: 28px; }
}
@media (forced-colors: active) {
  .cogenie-code input, .cogenie-toast { border: 1px solid CanvasText; }
  .cogenie-toast__check { border: 1px solid CanvasText; }
  .cogenie-field-error { color: CanvasText; }
  .cogenie-signin .cogenie-field input:focus-visible,
  .cogenie-signin .cogenie-code input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}