/*
 * Base theme + generic element styling for the upstream Ory dynamic form
 * markup (login/registration/recovery/verification/settings nodes). This
 * file does not know the exact DOM the untouched flow templates render, so
 * it themes broad element and well-known `data-testid` selectors rather
 * than assuming specific class names. See auth-ui/README.md.
 */

/* Manrope, self-hosted: the auth threshold is the first branded surface many
   accounts ever see, and it must not depend on a font CDN. Japanese text
   falls through to the system JP stack, mirroring the product's fallbacks. */
@font-face {
  font-family: Manrope;
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Saeru tokens, mirrored from frontend/src/app/globals.css (the identity source
   of truth is DESIGN.md). This app cannot import the product stylesheet, so the
   values are copied verbatim — update both together. */
:root {
  color-scheme: light dark;
  --bbai-ink: #0e1726;
  --bbai-paper: #f4f3ef;
  --bbai-panel: #fcfbf9;
  --bbai-line: #e4e2d9;
  --bbai-muted: #5a6478;
  --bbai-brand: #2e5be6;
  --bbai-brand-readable: #2450c7;
  --bbai-brand-bg: rgba(46, 91, 230, 0.1);
  --bbai-critical: #b91c1c;
  --bbai-critical-bg: rgba(185, 28, 28, 0.13);
  --bbai-verified: #15803d;
  --bbai-verified-bg: rgba(21, 128, 61, 0.13);
  --bbai-focus: #0e1726;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bbai-ink: #e8ebf1;
    --bbai-paper: #14181d;
    --bbai-panel: #1b2026;
    --bbai-line: #2a313a;
    --bbai-muted: #a8b1c0;
    --bbai-brand: #2e5be6;
    --bbai-brand-readable: #8fa8ff;
    --bbai-brand-bg: rgba(46, 91, 230, 0.16);
    --bbai-critical: #ff6b6b;
    --bbai-critical-bg: rgba(193, 18, 31, 0.16);
    --bbai-verified: #2f9e44;
    --bbai-verified-bg: rgba(47, 158, 68, 0.12);
    --bbai-focus: #e8ebf1;
  }
}

html[data-theme="light"] {
  --bbai-ink: #0e1726;
  --bbai-paper: #f4f3ef;
  --bbai-panel: #fcfbf9;
  --bbai-line: #e4e2d9;
  --bbai-muted: #5a6478;
  --bbai-brand: #2e5be6;
  --bbai-brand-readable: #2450c7;
  --bbai-brand-bg: rgba(46, 91, 230, 0.1);
  --bbai-critical: #b91c1c;
  --bbai-critical-bg: rgba(185, 28, 28, 0.13);
  --bbai-verified: #15803d;
  --bbai-verified-bg: rgba(21, 128, 61, 0.13);
  --bbai-focus: #0e1726;
}

html[data-theme="dark"] {
  --bbai-ink: #e8ebf1;
  --bbai-paper: #14181d;
  --bbai-panel: #1b2026;
  --bbai-line: #2a313a;
  --bbai-muted: #a8b1c0;
  --bbai-brand: #2e5be6;
  --bbai-brand-readable: #8fa8ff;
  --bbai-brand-bg: rgba(46, 91, 230, 0.16);
  --bbai-critical: #ff6b6b;
  --bbai-critical-bg: rgba(193, 18, 31, 0.16);
  --bbai-verified: #2f9e44;
  --bbai-verified-bg: rgba(47, 158, 68, 0.12);
  --bbai-focus: #e8ebf1;
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bbai-paper);
  color: var(--bbai-ink);
  font-family:
    Manrope, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: normal;
  overflow-x: hidden;
}

a {
  color: var(--bbai-brand);
}

/* Bilingual copy toggled by html[lang], not JS, to avoid flash. */
[data-i18n-en] {
  display: inline;
}
[data-i18n-ja] {
  display: none;
}
html[lang^="ja"] [data-i18n-en] {
  display: none;
}
html[lang^="ja"] [data-i18n-ja] {
  display: inline;
}

.bbai-skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 20;
  background: var(--bbai-panel);
  color: var(--bbai-ink);
  border: 1px solid var(--bbai-line);
  border-radius: 4px;
  padding: 8px 12px;
  font-weight: 700;
  transition: top 0.15s ease;
}

.bbai-skip-link:focus-visible {
  top: 8px;
}

/* Generic theming for the untouched upstream dynamic form. Both plain
   elements and the well-known `data-testid` hooks are covered so this keeps
   working across minor upstream markup changes; verify against the running
   container on any base-image bump (see README). */
form {
  display: grid;
  gap: 12px;
  width: 100%;
}

/* Ory emits empty node groups (hidden-only fields); in the grid each still
   costs a gap, which opens a hole above the first visible field. */
.bbai-auth-panel form > div:empty {
  display: none;
}

/* Ory Elements owns the form-node semantics, but its reference card adds a
   second rounded surface inside our account panel. Flatten only that generated
   presentation wrapper so the account page follows the product's surface
   economy rule without changing any form node or flow behavior. */
[data-testid$="-auth-card"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  color: var(--bbai-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-testid$="-auth-card"] > div {
  width: 100% !important;
  gap: 20px !important;
}

[data-testid$="-auth-card"] hr {
  width: 100% !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  margin: 0 !important;
  border: 0 !important;
  background: var(--bbai-line) !important;
}

.bbai-auth-panel [class*="typography"] {
  color: inherit;
  font-family: inherit;
}

.bbai-auth-panel a {
  color: var(--bbai-brand-readable) !important;
}

.bbai-auth-panel label > span[class*="input_field"] {
  color: var(--bbai-brand-readable) !important;
}

html[data-locale-pending="true"] body {
  visibility: hidden;
}

.bbai-auth-panel [data-bbai-password-toggle] {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
}

.bbai-auth-panel input[name="password"] {
  padding-right: 72px;
}

.bbai-auth-panel [data-bbai-password-toggle] svg path {
  fill: var(--bbai-ink) !important;
}

.bbai-error-state {
  display: grid;
  gap: 16px;
}

.bbai-error-state p {
  margin: 0;
  max-width: 42ch;
  color: var(--bbai-muted);
}

.bbai-error-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  padding: 10px 16px;
  color: #ffffff !important;
  background: var(--bbai-brand);
  border: 1px solid var(--bbai-brand);
  border-radius: 4px;
  font-weight: 800;
  text-decoration: none;
}

/* The error card renders inside the auth panel, whose link rule (`.bbai-auth-panel a`,
   one class plus one element) outranks this one-class rule and painted the label in the
   readable blue on the blue fill (1.23:1 light, 2.45:1 dark). The button keeps white text,
   5.0:1 on Saeru blue in both schemes. */
.bbai-auth-panel a.bbai-error-action {
  color: #ffffff !important;
}

label {
  display: block;
  color: var(--bbai-ink);
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 4px;
}

input:not([type="hidden"]),
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--bbai-line);
  border-radius: 4px;
  background: var(--bbai-panel);
  color: var(--bbai-ink);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--bbai-muted);
}

button,
[type="submit"],
[type="button"],
.btn,
[data-testid^="node/input/submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--bbai-brand);
  border-radius: 4px;
  background: var(--bbai-brand);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  padding: 10px 16px;
  cursor: pointer;
}

/* Ory's "Resend code" on the recovery and verification code steps is a second
   submit beside Continue; one primary action per step, so it is secondary. */
button[data-variant="secondary"],
button.link,
button[value="link"],
button[name="email"][formnovalidate] {
  background: transparent;
  color: var(--bbai-brand-readable);
  border-color: var(--bbai-line);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

a,
button,
input,
select,
textarea,
[tabindex] {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bbai-focus);
  outline-offset: 2px;
}

/* Ory messages: node-level and flow-level, plus generic alert conventions. */
.message,
.messages li,
[data-testid^="ui/message"] {
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--bbai-ink);
  background: var(--bbai-brand-bg);
  border: 1px solid var(--bbai-line);
}

[data-testid^="ui/message"][data-testid*="error"],
[data-testid^="ui/message"][class*="message_severity_error"],
.message.error,
.alert-danger {
  color: var(--bbai-critical);
  background: var(--bbai-critical-bg);
  border-color: var(--bbai-critical);
}

.message.success,
.alert-success {
  color: var(--bbai-verified);
  background: var(--bbai-verified-bg);
  border-color: var(--bbai-verified);
}

hr {
  border: none;
  border-top: 1px solid var(--bbai-line);
  margin: 12px 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  button,
  [type="submit"],
  .bbai-theme-toggle,
  .bbai-language-toggle {
    border: 2px solid ButtonText;
  }
}