/*
 * Sign-up, sign-in and verification pages: the split page (form left, still panel right), inputs, code boxes and
 * buttons.
 * Ported from the SimpleKPI trial pages (SimpleKPI.Server/wwwroot/css/access.css).
 * Colours come from the tokens in Styles/app.css (--c-*), so a restyle stays in that file;
 * this file only holds structure and sizes.
 */

/* Plain background (no halos): a flat top-edge fade only. */
.trial-shell {
  min-height: 100vh;
  color: rgb(var(--c-auth-ink));
  background-color: rgb(var(--c-auth-shell));
  background-image: linear-gradient(to bottom, rgb(var(--c-auth-shell-top)), rgb(var(--c-auth-shell)) 10%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Work email field. Selectors are scoped to .trial-shell so they outrank Tailwind's base styles, which load later. */
.trial-shell .trial-input {
  width: 100%;
  height: 44px;
  padding: 0 22px;
  font-size: 16px;
  font-weight: 400;
  color: rgb(var(--c-auth-ink));
  border: 1.5px solid rgb(var(--c-auth-input-line));
  border-radius: 8px;
  outline: none;
  --field: var(--c-auth-input);
}
.trial-shell .trial-input::placeholder { color: rgb(var(--c-auth-placeholder)); }

/* 6-digit code boxes */
.trial-shell .passcode-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.trial-shell .passcode-cell {
  width: 100%;
  height: 64px;
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  color: rgb(var(--c-auth-ink));
  border: 1.5px solid rgb(var(--c-auth-field-line));
  border-radius: 8px;
  outline: none;
  --field: var(--c-auth-field);
}
.trial-shell .passcode-cell.filled { border-color: rgb(var(--c-auth-field-filled)); }

/* Email field and code boxes: the gradient outline (purple, blue, cyan, as Stripe) fades in on focus.
   --glow is a registered number property, so it can animate the gradient's strength from 0 to 1 while the
   grey border fades out. At rest the gradient is fully transparent, so nothing shows through the border.
   :active starts it on mouse-down, so there's no lag before focus lands. */
@property --glow { syntax: '<number>'; inherits: false; initial-value: 0; }
.trial-shell .trial-input,
.trial-shell .passcode-cell {
  --glow: 0;
  background:
    linear-gradient(rgb(var(--field)), rgb(var(--field))) padding-box,
    linear-gradient(90deg, rgb(var(--c-search-glow-1) / var(--glow)), rgb(var(--c-search-glow-2) / var(--glow)), rgb(var(--c-search-glow-3) / var(--glow))) border-box;
  transition: border-color 250ms ease-out, --glow 250ms ease-out;
}
.trial-shell .trial-input:focus,
.trial-shell .trial-input:active,
.trial-shell .passcode-cell:focus,
.trial-shell .passcode-cell:active {
  --glow: 1;
  border-color: transparent;
  box-shadow: none;
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .trial-shell .trial-input,
  .trial-shell .passcode-cell { transition: none; }
}

/* Error state: same treatment in orange, shown with or without focus. */
.trial-shell .trial-input.is-error,
.trial-shell .passcode-cell.is-error {
  border-color: rgb(var(--c-auth-error));
  box-shadow: 0 0 0 4px rgb(var(--c-auth-error) / 0.20);
}

/* Main button: full-width pill in the button colour (Stripe purple). */
.trial-shell .trial-cta {
  width: 100%;
  height: 44px;
  border-radius: 9999px;
  background: rgb(var(--c-primary));
  color: rgb(var(--c-primary-ink));
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  border: 0;
  transition: background-color 200ms ease, transform 120ms ease;
}
.trial-shell .trial-cta:hover { background: rgb(var(--c-primary-hover)); }
.trial-shell .trial-cta:active { transform: translateY(1px); }
.trial-shell .trial-cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* Google / Microsoft buttons: outlined pills. */
.trial-shell .trial-oauth {
  width: 100%;
  height: 44px;
  border-radius: 9999px;
  background: rgb(var(--c-auth-input));
  color: rgb(var(--c-auth-ink));
  font-weight: 500;
  font-size: 15px;
  border: 1.5px solid rgb(var(--c-auth-input-line));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.trial-shell .trial-oauth:hover { border-color: rgb(var(--c-auth-field-filled)); background: rgb(var(--c-subtle)); }

/* Checkbox ("Trust this device"), matching the inputs. */
.trial-shell .trial-check {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background-color: rgb(var(--c-auth-input));
  border: 1.5px solid rgb(var(--c-auth-input-line));
  border-radius: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.trial-shell .trial-check:hover { border-color: rgb(var(--c-auth-field-filled)); }
.trial-shell .trial-check:focus-visible {
  outline: none;
  border-color: rgb(var(--c-brand-text));
  box-shadow: 0 0 0 4px rgb(var(--c-brand) / 0.25);
}
.trial-shell .trial-check:checked {
  background-color: rgb(var(--c-brand));
  border-color: rgb(var(--c-brand));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>");
}

/* Compact panel (sign-in): narrower, no illustration, tighter form chrome. */
.trial-shell .trial-compact .trial-form-col { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px) { .trial-shell .trial-compact .trial-form-col { padding-top: 50px; padding-bottom: 60px; } }
.trial-shell .trial-compact .trial-form-col > div { max-width: 300px; }
.trial-shell .trial-compact .trial-input { padding: 0 14px; border-radius: 6px; }
.trial-shell .trial-compact .trial-cta { font-size: 14px; }
.trial-shell .trial-compact .trial-oauth { font-size: 13px; }
.trial-shell .trial-compact .trial-check { width: 18px; height: 18px; background-size: 12px 12px; }
.trial-shell .trial-compact .brand-mark svg { width: 44px; height: 44px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE SPLIT PAGE (Components/Layout/AuthLayout.razor), as Cloudflare's sign-in: the form column on the left, with the
   logo top-left and one page link top-right; the still panel on the right from 1024px (Components/Auth/AuthAside).
   .trial-shell is the shared base; the split page sets its own background.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.auth-split { --auth-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.trial-shell.auth-split { background: rgb(var(--c-auth-page)); }
.auth-split { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .auth-split { grid-template-columns: minmax(0, 1fr) clamp(440px, 36vw, 620px); } }

.auth-main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 16px 16px 24px; }
@media (min-width: 640px) { .auth-main { padding: 22px 28px 28px; } }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }

/* The Saiela logo, top-left (Components/Layout/AuthLayout.razor). 32px high (101px wide) on phones, 36px (114px) from
   640px: above the brand's 96px smallest width. Its clear space (as wide as the shield's sparkle, half the logo's
   height) is the column's padding, the 40px header row and the space above the form; nothing else sits in that row.
   Never recoloured or stretched: the height is set and the width follows. One picture per theme, as the panel. */
/* 4px of padding (taken back by the margin) makes it a 44px target without moving it. */
.auth-logo { display: inline-flex; padding: 4px; margin: -4px; border-radius: 10px; text-decoration: none; }
.auth-logo picture, .auth-logo img { display: block; }
.auth-logo img { width: 36px; height: 36px; }
@media (min-width: 640px) { .auth-logo img { width: 40px; height: 40px; } }


/* The form sits a little above centre, which reads better than dead centre. */
.auth-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0 32px; }
@media (min-height: 760px) { .auth-center { padding-bottom: 8vh; } }
/* Where there's room, the form sits a further 100px higher (200px more below a centred block moves it up 100px). */
@media (min-height: 860px) { .auth-center { padding-bottom: calc(8vh + 200px); } }
/* A phone on its side: less space around the form, and the page's large picture (the code page's envelope, class
   auth-icon) gives way, so the code boxes and the button stay on screen. */
@media (max-height: 480px) {
  .auth-center { padding: 12px 0 16px; }
  .auth-icon { display: none; }
}
.auth-form { width: 100%; max-width: 380px; }

.auth-title {
  margin: 0; text-align: center; text-wrap: balance;
  font-size: 28px; line-height: 1.12; font-weight: 600; letter-spacing: -0.04rem;
  color: rgb(var(--c-auth-ink));
}
@media (min-width: 640px) { .auth-title { font-size: 34px; } }
/* "Saiela" in a heading as in the logo: a dotless i with the brand's AI sparkle above it (shape and colours from
   saiela-wordmark-light.svg), centred on the stem. Sized and placed in em, tuned for Inter at 28 to 120px. */
.brand-word { white-space: nowrap; }
.brand-i { position: relative; display: inline-block; }
.brand-spark { position: absolute; left: 50%; bottom: 0.75em; width: 0.34em; height: auto; transform: translateX(-50%); overflow: visible; }
.auth-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.auth-lede { margin: 14px 0 0; text-align: center; font-size: 15px; line-height: 1.45; color: rgb(var(--c-auth-ink-2)); overflow-wrap: anywhere; }
.auth-lede .auth-trial { font-weight: 500; color: rgb(var(--c-brand-text)); }

/* The email field: its placeholder names it (the label is for screen readers), so it takes the label's space above. */
.trial-shell .auth-field { margin-top: 32px; }

/* "Save email and login method on this device": the app's own checkbox (.trial-check), a little smaller. The whole row
   is the target, 44px high; its margins take the extra height back, so nothing moves. */
.auth-remember {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 8px 0 -12px;
  font-size: 14px; line-height: 1.4; color: rgb(var(--c-auth-ink-2)); cursor: pointer;
}
.trial-shell .auth-remember .trial-check { width: 18px; height: 18px; border-radius: 5px; background-size: 12px 12px; }

.auth-fine { margin: 28px 0 0; text-align: center; text-wrap: balance; font-size: 12.5px; line-height: 1.5; color: rgb(var(--c-auth-ink-3)); }
.auth-fine.auth-switch { margin-top: 24px; font-size: 14px; color: rgb(var(--c-auth-ink-2)); }
.auth-fine.auth-terms { margin-top: 10px; }
.auth-fine a { color: rgb(var(--c-auth-link)); text-decoration: underline; text-decoration-color: rgb(var(--c-auth-field-filled)); text-underline-offset: 4px; }
.auth-fine a:hover { color: rgb(var(--c-brand-text)); text-decoration-color: currentColor; }
.auth-fine a.auth-strong { font-weight: 600; color: rgb(var(--c-auth-ink)); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE PANEL (Components/Auth/AuthAside.razor). A still picture of soft glassy waves (no animation), the wording,
   the audit log under it as a frosted card, and the credit. A gradient in the picture's colours shows until it loads.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.auth-aside { display: none; }
@media (min-width: 1024px) {
  .auth-aside {
    --aside-px: clamp(32px, 2.8vw, 48px);
    --aside-waves:
      radial-gradient(120% 60% at 100% 45%, rgb(196 181 253 / 0.55), transparent 70%),
      radial-gradient(90% 50% at 0% 60%, rgb(191 219 254 / 0.6), transparent 70%),
      linear-gradient(165deg, #f5f3ff 0%, #ede9fe 45%, #e0e7ff 75%, #f5f3ff 100%);
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    padding: 32px var(--aside-px) 26px;
    background: url("/images/auth/trial-hero.avif") center / cover no-repeat, var(--aside-waves);
    border-left: 1px solid rgb(var(--c-auth-input-line));
    overflow: hidden; isolation: isolate;
  }
  /* Dark mode: its own picture (trial-hero-dark.avif), with a gradient in the dark panel's colours until it loads. */
  html.dark .auth-aside {
    background:
      url("/images/auth/trial-hero-dark.avif") center / cover no-repeat,
      radial-gradient(120% 60% at 100% 45%, rgb(83 58 253 / 0.25), transparent 70%),
      linear-gradient(165deg, rgb(var(--c-auth-aside)) 0%, #0b1020 100%);
  }
}

/* The wording and the log share one column, at most 470px wide, centred in the panel. */
.aside-body { flex: 1; min-height: 0; align-self: center; width: min(100%, 470px); display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 24px 0 8px; }

.aside-copy h2 {
  margin: 0; text-wrap: balance;
  font-size: clamp(24px, 2vw, 30px); line-height: 1.18; font-weight: 600; letter-spacing: -0.02em;
  color: rgb(var(--c-auth-ink));
}
.aside-detail { margin: 6px 0 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.35; color: rgb(var(--c-auth-ink-2)); }
.aside-ticks { list-style: none; margin: 20px 0 0; padding: 0; }
.aside-ticks li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgb(var(--c-auth-ink-2)); }
.aside-tick {
  flex: none; width: 24px; height: 24px; border-radius: 9999px; display: grid; place-items: center;
  background: rgb(var(--c-auth-hero-card) / 0.8); border: 1px solid rgb(var(--c-auth-aside-line));
  color: rgb(var(--c-brand-text));
}

/* A frosted pill, the same glass as the audit log card. */
.aside-credit {
  margin: 0; align-self: flex-end; font-size: 13px; color: rgb(var(--c-auth-ink-2));
  padding: 6px 14px; border-radius: 999px;
  background: rgb(var(--c-auth-hero-card) / 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgb(255 255 255 / 0.75);
  box-shadow: 0 10px 30px rgb(76 59 160 / 0.10), 0 1px 2px rgb(var(--c-auth-ink) / 0.04);
}
html.dark .aside-credit { border-color: rgb(var(--c-auth-aside-line)); box-shadow: none; }
.aside-credit a { color: rgb(var(--c-brand-text)); font-weight: 500; text-decoration: none; }
.aside-credit a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── The audit log: what the swaps leave behind (metadata only). Decorative; a frosted card over the picture. ── */
.aside-log {
  background: rgb(var(--c-auth-hero-card) / 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgb(255 255 255 / 0.75);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(76 59 160 / 0.10), 0 1px 2px rgb(var(--c-auth-ink) / 0.04);
  padding: 0 14px 6px;
}
html.dark .aside-log { border-color: rgb(var(--c-auth-aside-line)); box-shadow: none; }
.log-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 34px;
  border-bottom: 1px solid rgb(var(--c-auth-input-line));
  font: 600 10px/1 var(--auth-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--c-auth-ink-3));
}
html.dark .log-head { border-color: rgb(var(--c-auth-aside-line)); }
.log-rows { list-style: none; margin: 0; padding: 4px 0 0; }
.log-row {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 64px; align-items: center; column-gap: 10px;
  height: 27px; font-size: 12.5px; color: rgb(var(--c-auth-ink-2));
}
.log-row svg { fill: none; stroke: rgb(var(--c-brand-text)); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.log-row .ph { font: 600 11.5px/1 var(--auth-mono); color: rgb(var(--c-brand-text)); }
.log-row time { font: 500 11px/1 var(--auth-mono); text-align: right; color: rgb(var(--c-auth-ink-3)); }
.log-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Dark mode: the ticks and the placeholders in Saiela cyan (#0ED4FD, the logo's bright blue), so they stand out on
   the dark picture (the product owner's choice, 17 Oct 2026). */
html.dark .aside-tick,
html.dark .log-row .ph { color: #0ed4fd; }
html.dark .log-row svg { stroke: #0ed4fd; }

@media (prefers-reduced-motion: reduce) {
  .trial-shell .trial-input, .trial-shell .trial-cta, .trial-shell .trial-check { transition: none; }
}

/* Short screens: the log gives way first, so the wording never crowds the credit. */
@media (max-height: 560px) { .aside-log { display: none; } }