/* ==========================================================================
   Genomain auth surface — shared component classes (needs tokens.css).
   Used unchanged by: the WebOS shell login/sign-up overlays (adapter in
   beta-webos-page/src/css/login-auth-flows.css maps the shell's legacy
   .login-* / .su-* names onto these), the React auth pages (AuthShell,
   Button, Field) and Key Locker's hosted OAuth login + consent pages.

   Layout = the app: a black brand column (the shell sidebar, 236px) on the
   left, the FLAT ivory canvas on the right, one warm-white card on it. Below
   900px the column becomes the shell's 56px top bar. No glass, no gradients,
   no glow, no washes — teal is a signal only (eyebrow, link, focus outline).
   Mobile first: 44px controls, 16px inputs (no iOS zoom), the card never
   jumps because nothing is measured in JS.
   ========================================================================== */

/* ---- frame ---- */
.gv-auth {
  display: grid;
  grid-template-columns: var(--gv-side-w) minmax(0, 1fr);
  grid-template-rows: minmax(100%, auto);
  min-height: 100%;
  background: var(--gv-bg);
  color: var(--gv-tx);
  font-family: var(--gv-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.gv-auth * { box-sizing: border-box; }

.gv-auth-side {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 12px 12px 16px;
  background: var(--gv-chrome-bg);
  color: var(--gv-chrome-tx);
  border-right: 1px solid var(--gv-chrome-line);
  box-shadow: var(--gv-shadow-chrome);
}
.gv-auth-brand { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 7px 13px; text-decoration: none; color: inherit; }
.gv-auth-mark {
  flex: 0 0 auto;
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border-radius: var(--gv-radius-tile);
  background: var(--gv-chrome-tx);
  color: var(--gv-chrome-bg);
  font-family: var(--gv-font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}
.gv-auth-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.gv-auth-name strong { font-family: var(--gv-font-display); font-weight: 500; font-size: 18px; letter-spacing: -.15px; color: var(--gv-chrome-tx); }
.gv-auth-name small { font-size: 11px; letter-spacing: .2px; color: var(--gv-chrome-tx-2); }
.gv-auth-side-foot { margin-top: auto; font-size: 11.5px; line-height: 1.5; color: var(--gv-chrome-tx-2); }

.gv-auth-main {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(20px, 5vh, 56px) 20px;
  background: var(--gv-bg);   /* the shell's canvas is flat ivory - no wash */
}

/* ---- card ---- */
.gv-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--gv-line);
  border-radius: var(--gv-radius-card);
  background: var(--gv-surface);
  color: var(--gv-tx);
  box-shadow: var(--gv-shadow-card);
}
.gv-card-wide { max-width: 600px; }
.gv-card-xwide { max-width: 980px; }

/* ---- type ---- */
.gv-eyebrow { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gv-teal-deep); }   /* teal-deep: 5.6:1 on the card (teal is 3.4:1) */
.gv-title { margin: 0; font-family: var(--gv-font-display); font-weight: 400; font-size: 27px; line-height: 1.1; letter-spacing: -.02em; color: var(--gv-tx); }
.gv-title-sm { margin: 0; font-family: var(--gv-font-display); font-weight: 400; font-size: 19px; line-height: 1.2; letter-spacing: -.015em; color: var(--gv-tx); }
.gv-lede { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--gv-tx-2); }
.gv-muted { margin: 0; font-size: 12px; line-height: 1.5; color: var(--gv-tx-3); }
.gv-link { color: var(--gv-teal-deep); font-weight: 600; text-decoration: none; }   /* = .vh-link, on teal-deep for 4.5:1 */
.gv-link:hover { text-decoration: underline; }
.gv-code { font-family: var(--gv-font-mono); font-size: 12px; }

/* ---- fields ---- */
.gv-field { display: flex; flex-direction: column; gap: 6px; }
.gv-label { font-size: 12px; font-weight: 500; color: var(--gv-tx-2); }
.gv-input {
  width: 100%;
  min-height: var(--gv-control-h);
  padding: 10px 13px;
  border: 1px solid var(--gv-line);
  border-radius: var(--gv-radius-control);
  background: var(--gv-surface);
  color: var(--gv-tx);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: var(--gv-shadow-input);
  outline: none;
  transition: border-color .15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.gv-input::placeholder { color: var(--gv-tx-3); opacity: 1; }
.gv-input:hover { border-color: var(--gv-line-strong); }
.gv-input:focus, .gv-input:focus-visible { outline: var(--gv-focus-outline); outline-offset: 0; }   /* = .set-inp:focus in the shell */
.gv-input[aria-invalid="true"] { border-color: var(--gv-danger); }
.gv-input[aria-invalid="true"]:focus { outline-color: var(--gv-danger); }
.gv-input:disabled { opacity: .55; cursor: not-allowed; }
textarea.gv-input { min-height: 84px; resize: vertical; }
select.gv-input { padding-right: 34px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2350565a' stroke-width='1.6' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 13px center; }
.gv-hint { font-size: 12px; line-height: 1.45; color: var(--gv-tx-3); }
.gv-error { font-size: 12px; line-height: 1.45; color: var(--gv-danger); }
.gv-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- buttons ---- */
.gv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--gv-control-h);
  min-width: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--gv-radius-control);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gv-btn:disabled, .gv-btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; transform: none !important; }
.gv-btn:focus-visible { outline: var(--gv-focus-outline); outline-offset: 0; }
.gv-btn-block { width: 100%; }
.gv-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.gv-btn-lg { min-height: 48px; padding: 0 20px; font-size: 15px; }

.gv-btn-primary { background: var(--gv-chrome-bg); color: var(--gv-chrome-tx); border-color: var(--gv-chrome-bg); box-shadow: var(--gv-shadow-btn); }
.gv-btn-primary:hover:not(:disabled) { background: var(--gv-chrome-bg-hover); border-color: var(--gv-chrome-bg-hover); color: #fff; box-shadow: var(--gv-shadow-btn-hover); transform: translateY(-1px); }
.gv-btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: var(--gv-shadow-btn); }

.gv-btn-secondary { background: transparent; color: var(--gv-tx-2); border-color: var(--gv-line-strong); }
.gv-btn-secondary:hover:not(:disabled) { background: var(--gv-bg-2); color: var(--gv-tx); border-color: var(--gv-line-hover); }

.gv-btn-ghost { background: transparent; color: var(--gv-tx-2); }
.gv-btn-ghost:hover:not(:disabled) { background: rgba(22, 25, 28, .06); color: var(--gv-tx); }

.gv-btn-danger { background: #fff7f6; color: #7f2530; border-color: rgba(127, 37, 48, .28); }
.gv-btn-danger:hover:not(:disabled) { background: #7f2530; border-color: #7f2530; color: #fff; }

.gv-btn-link { background: transparent; color: var(--gv-teal); padding: 0; min-height: 0; min-width: 0; }
.gv-btn-link:hover:not(:disabled) { text-decoration: underline; }

/* ---- segmented tabs (sign-up new / join) ---- */
.gv-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--gv-line); border-radius: var(--gv-radius-panel); background: var(--gv-bg-2); }
.gv-tab { flex: 1; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--gv-radius-control); background: transparent; color: var(--gv-tx-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.gv-tab:hover { color: var(--gv-tx); }
.gv-tab[aria-selected="true"], .gv-tab.is-on { background: var(--gv-chrome-bg); color: var(--gv-chrome-tx); box-shadow: 0 4px 10px rgba(10, 12, 15, .16); }

/* ---- selectable option cards (plan picker, account type) ---- */
.gv-option { display: flex; flex-direction: column; gap: 6px; padding: 14px; text-align: left; border: 1.5px solid var(--gv-line); border-radius: var(--gv-radius-panel); background: var(--gv-surface); color: var(--gv-tx); font: inherit; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.gv-option:hover { border-color: var(--gv-line-strong); box-shadow: var(--gv-shadow-card-hover); transform: translateY(-1px); }
.gv-option.is-sel, .gv-option[aria-checked="true"], .gv-option[aria-pressed="true"] { border-color: var(--gv-teal); background: var(--gv-teal-wash); box-shadow: 0 0 0 1px var(--gv-teal-line); }
.gv-option.is-soon { cursor: not-allowed; border-style: dashed; border-color: var(--gv-warn-line); background: rgba(255, 197, 61, .06); transform: none; box-shadow: none; }

/* ---- alerts ---- */
.gv-alert { margin: 0; padding: 9px 12px; border: 1px solid; border-radius: var(--gv-radius-control); font-size: 12.5px; line-height: 1.45; }
.gv-alert-danger { color: var(--gv-danger); background: var(--gv-danger-bg); border-color: var(--gv-danger-line); }
.gv-alert-ok { color: var(--gv-ok); background: var(--gv-ok-bg); border-color: var(--gv-ok-line); }
.gv-alert-info { color: var(--gv-teal-deep); background: var(--gv-teal-wash); border-color: var(--gv-teal-line); }
.gv-alert-warn { color: var(--gv-warn); background: var(--gv-warn-bg); border-color: var(--gv-warn-line); }

/* ---- pills, panels, lists (consent page, plan badges) ---- */
.gv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--gv-line-strong); border-radius: var(--gv-radius-pill); background: transparent; color: var(--gv-tx-2); font-size: 12px; font-weight: 500; line-height: 1.4; max-width: 100%; overflow-wrap: anywhere; }   /* = .set-pill */
.gv-pill-teal { color: var(--gv-teal); background: var(--gv-teal-wash); border-color: var(--gv-teal-line); }
.gv-pill-warn { color: var(--gv-warn); background: var(--gv-warn-bg); border-color: var(--gv-warn-line); }
.gv-panel { padding: 14px; border: 1px solid var(--gv-line); border-radius: var(--gv-radius-panel); background: var(--gv-bg-2); box-shadow: inset 0 1px rgba(255, 255, 255, .88); }
.gv-panel-title { margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gv-tx-3); }
.gv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gv-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--gv-tx-2); }
.gv-list li b { color: var(--gv-tx); font-weight: 600; }
.gv-tick { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; border-radius: 5px; background: var(--gv-chrome-bg); color: var(--gv-chrome-tx); font-size: 11px; font-weight: 700; }
.gv-actions { display: flex; gap: 10px; }
.gv-actions > .gv-btn { flex: 1; }
.gv-divider { height: 1px; margin: 4px 0; background: var(--gv-line); }
.gv-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--gv-line); border-top-color: var(--gv-teal); animation: gv-spin .8s linear infinite; }
@keyframes gv-spin { to { transform: rotate(360deg); } }

/* ---- phones + short viewports: brand bar on top, canvas below ---- */
@media (max-width: 899px) {
  .gv-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .gv-auth-side { position: sticky; z-index: 2; flex-direction: row; align-items: center; min-height: var(--gv-topbar-h); padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--gv-chrome-line); box-shadow: 0 6px 18px rgba(10, 12, 15, .18); }
  .gv-auth-side-foot { display: none; }
  .gv-auth-main { padding: 16px 12px max(16px, env(safe-area-inset-bottom)); align-items: start; }
  .gv-card { padding: 22px 18px; }
  .gv-input { min-height: 48px; font-size: 16px; }
  .gv-btn { min-height: 48px; }
  .gv-row-2 { grid-template-columns: 1fr; }
  .gv-actions { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .gv-btn, .gv-option, .gv-input, .gv-tab { transition: none; }
  .gv-btn-primary:hover:not(:disabled), .gv-option:hover { transform: none; }
  .gv-spin { animation-duration: 1.6s; }
}

/* ==========================================================================
   Design 2027 (owner approved 2026-09-11, mockup 01-logga-in) — ADDITIVE.
   The auth surface becomes ONE frosted-glass card floating over the soft
   scene (tokens.css 2027 block): no black column, the brand row rides on
   the scene above the card, Large Title, 56px glass fields, a 60px accent
   pill as the ONE primary action, secondary = glass pill. Every class above
   keeps its name; the three consumers (shell overlay, React auth pages,
   Key Locker OAuth pages) get the look through these overrides alone.
   Dark = html[data-theme="dark"] (the shell sets it; the others stay light).
   ========================================================================== */
.gv-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: var(--gv-scene); background-attachment: fixed; color: var(--gv-tx); }
.gv-auth-side { position: static; flex-direction: row; align-items: center; gap: 0; min-height: 0; padding: 20px 24px 0; background: transparent; color: var(--gv-tx); border: 0; box-shadow: none; }
.gv-auth-brand { min-height: 44px; padding: 0; gap: 12px; }
.gv-auth-mark { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(145deg, var(--gv-teal), var(--gv-teal-deep)); color: #f4f3ef; font-family: var(--gv-font-ui); font-weight: 800; font-size: 18px; box-shadow: 0 8px 20px rgba(47, 154, 140, .28); }
.gv-auth-name strong { font-family: var(--gv-font-ui); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--gv-tx); }
.gv-auth-name small { font-size: 13px; letter-spacing: 0; color: var(--gv-tx-3); }
.gv-auth-side-foot { color: var(--gv-tx-3); font-size: 13px; }
.gv-auth-main { background: transparent; padding: clamp(16px, 4vh, 48px) 20px; }
.gv-card {
  max-width: 540px; gap: 14px; padding: 44px 48px 40px;
  border: 1px solid var(--gv-glass-panel-edge); border-radius: var(--gv-radius-28);
  background: var(--gv-glass-panel); color: var(--gv-tx);
  backdrop-filter: var(--gv-blur-panel); -webkit-backdrop-filter: var(--gv-blur-panel);
  box-shadow: var(--gv-elev-3);
}
.gv-card-wide { max-width: 640px; }
.gv-card-xwide { max-width: 1020px; }
.gv-eyebrow { font-size: 11px; color: var(--gv-teal-deep); }
.gv-title { font: var(--gv-type-large-title); font-weight: 700; letter-spacing: var(--gv-tracking-title); color: var(--gv-tx); }
.gv-title-sm { font: var(--gv-type-title-2); color: var(--gv-tx); }
.gv-lede { font: var(--gv-type-body); color: var(--gv-tx-2); }
.gv-muted, .gv-hint { font-size: 14px; line-height: 1.45; color: var(--gv-tx-3); }
.gv-error { font-size: 14px; }
.gv-link { color: var(--gv-teal-deep); font-weight: 600; }
.gv-label { font-size: 15px; font-weight: 600; color: var(--gv-tx-2); }
.gv-input {
  min-height: 56px; padding: 12px 18px; font-size: 17px;
  border: 1px solid var(--gv-glass-field-edge); border-radius: var(--gv-radius-16);
  background: var(--gv-glass-field); color: var(--gv-tx); box-shadow: inset 0 1px var(--gv-glass-card-hi);
  transition: border-color var(--gv-motion-fast) var(--gv-ease), box-shadow var(--gv-motion-fast) var(--gv-ease);
}
.gv-input:hover { border-color: var(--gv-line-strong); }
.gv-input:focus, .gv-input:focus-visible { outline: 2px solid var(--gv-teal); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(47, 154, 140, .22); }
select.gv-input { background-position: right 18px center; }
.gv-btn {
  min-height: 52px; padding: 0 24px; border-radius: 999px; font-size: 17px; font-weight: 600;
  transition: background-color var(--gv-motion-fast) var(--gv-ease), color var(--gv-motion-fast) var(--gv-ease), border-color var(--gv-motion-fast) var(--gv-ease), box-shadow var(--gv-motion-fast) var(--gv-ease), transform var(--gv-motion-fast) var(--gv-ease-spring);
}
.gv-btn:focus-visible { outline: 2px solid var(--gv-teal); outline-offset: 2px; }
.gv-btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.gv-btn-lg { min-height: 60px; padding: 0 32px; font-size: 19px; }
.gv-btn-primary { background: linear-gradient(145deg, var(--gv-teal), var(--gv-teal-deep)); border-color: transparent; color: #f4f3ef; box-shadow: 0 10px 24px rgba(47, 154, 140, .28), inset 0 1px rgba(255, 255, 255, .35); }
.gv-btn-primary:hover:not(:disabled) { background: linear-gradient(145deg, var(--gv-teal), var(--gv-teal-deep)); border-color: transparent; color: #fff; box-shadow: 0 14px 28px rgba(47, 154, 140, .34), inset 0 1px rgba(255, 255, 255, .35); transform: translateY(-1px); }
.gv-btn-primary:active:not(:disabled) { transform: scale(.97); box-shadow: 0 6px 16px rgba(47, 154, 140, .24); }
.gv-btn-secondary { background: var(--gv-glass-card); border-color: var(--gv-glass-card-edge); color: var(--gv-tx); box-shadow: inset 0 1px var(--gv-glass-card-hi); }
.gv-btn-secondary:hover:not(:disabled) { background: var(--gv-glass-card-hi); border-color: var(--gv-glass-card-edge); color: var(--gv-tx); transform: translateY(-1px); }
.gv-btn-secondary:active:not(:disabled), .gv-btn-ghost:active:not(:disabled) { transform: scale(.97); }
.gv-btn-ghost { font-weight: 500; }
.gv-btn-danger { background: rgba(185, 28, 28, .10); border-color: transparent; color: var(--gv-danger); }
.gv-btn-danger:hover:not(:disabled) { background: var(--gv-danger); border-color: var(--gv-danger); color: #fff; }
.gv-btn-link { min-height: 0; padding: 0; font-size: 15px; color: var(--gv-teal-deep); }
.gv-tabs { gap: 2px; padding: 4px; border: 1px solid var(--gv-glass-field-edge); border-radius: 999px; background: var(--gv-glass-field); }
.gv-tab { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500; transition: background-color var(--gv-motion-base) var(--gv-ease), color var(--gv-motion-base) var(--gv-ease); }
.gv-tab[aria-selected="true"], .gv-tab.is-on { background: linear-gradient(145deg, var(--gv-teal), var(--gv-teal-deep)); color: #f4f3ef; font-weight: 600; box-shadow: none; }
.gv-option { padding: 16px 18px; border: 1px solid var(--gv-glass-card-edge); border-radius: var(--gv-radius-16); background: var(--gv-glass-card); box-shadow: inset 0 1px var(--gv-glass-card-hi); }
.gv-option:hover { border-color: var(--gv-glass-card-edge); background: var(--gv-glass-card-hi); box-shadow: var(--gv-elev-1); }
.gv-option.is-sel, .gv-option[aria-checked="true"], .gv-option[aria-pressed="true"] { border-color: var(--gv-teal-line); background: var(--gv-teal-wash); box-shadow: 0 0 0 1px var(--gv-teal-line); }
.gv-alert { padding: 12px 16px; border-radius: var(--gv-radius-12); font-size: 15px; }
.gv-pill { min-height: 32px; padding: 0 14px; font-size: 14px; border-color: var(--gv-glass-card-edge); background: var(--gv-glass-card); }
.gv-panel { border: 1px solid var(--gv-glass-card-edge); border-radius: var(--gv-radius-16); background: var(--gv-glass-card); box-shadow: inset 0 1px var(--gv-glass-card-hi); padding: 16px 18px; }
.gv-panel-title { font-size: 11px; }
.gv-list li { font-size: 15px; }
.gv-tick { border-radius: 6px; background: var(--gv-teal); color: #f4f3ef; }
.gv-divider { margin: 8px 0; }
html[data-theme="dark"] :is(.gv-auth-mark, .gv-btn-primary, .gv-btn-primary:hover:not(:disabled), .gv-tab[aria-selected="true"], .gv-tab.is-on, .gv-tick) { color: #0e1114; }   /* the accent is light on dark glass */
@media (max-width: 899px) {
  .gv-auth-side { min-height: 0; padding: 16px 16px 0; border: 0; box-shadow: none; background: transparent; }
  .gv-auth-main { padding: 12px 12px max(16px, env(safe-area-inset-bottom)); }
  .gv-card { padding: 28px 22px 24px; border-radius: var(--gv-radius-24); }
  .gv-title { font-size: 30px; }
  .gv-input { min-height: 56px; font-size: 17px; }
  .gv-btn { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-btn-primary:active:not(:disabled), .gv-btn-secondary:active:not(:disabled), .gv-btn-ghost:active:not(:disabled), .gv-btn-secondary:hover:not(:disabled) { transform: none; }
}