/* ─── Levirge canonical design tokens ─────────────────────────────────────────
   Single source of truth for all 5 UIs: app, admin, command, brain, agent-search.
   See design/STYLE-GUIDE.md for the name map, collisions, and adoption steps.

   Derived from app/assets/css/_ui-theme.css (the richest set — only one with a
   light mode, type scale, and dual shadows), with neutrals warmed to hue 48–60
   to match brain / command / agent-search. Values equal brain's hexes where the
   two families already agreed.

   Dark is default. Light via [data-theme="light"] on <html>.
   ponytail: no build step — repos copy this file and @import it. */

:root {
    /* ─── Neutrals — 3 required tiers + sidebar/hover/inset ───────────── */
    --bg-base: hsl(60 2% 12%); /* page canvas */
    --bg-sidebar: hsl(60 3% 10%); /* nav rail — below the canvas */
    --bg-surface: hsl(0 0% 15%); /* cards, panels */
    --bg-raised: hsl(60 3% 17%); /* selected rows, dropdowns */
    --bg-hover: hsl(60 3% 21%); /* one shade above resting */
    --bg-inset: hsl(60 3% 6%); /* tables, inputs, code blocks */

    /* ─── Borders — alpha overlays, so they work on any tier ──────────── */
    --line-1: hsl(0 0% 100% / 0.06); /* hairline, same-tier division */
    --line-2: hsl(0 0% 100% / 0.10); /* default border */
    --line-3: hsl(0 0% 100% / 0.18); /* emphasis / focus ring base */
    --top-highlight: hsl(0 0% 100% / 0.06); /* top edge of raised surfaces */

    /* ─── Foreground — 4 steps ────────────────────────────────────────── */
    --fg-0: hsl(48 12% 92%); /* headings */
    --fg-1: hsl(43 7% 70%); /* body */
    --fg-2: hsl(44 5% 52%); /* secondary / captions */
    --fg-3: hsl(44 4% 36%); /* disabled */

    /* ─── Brand accent — amber ────────────────────────────────────────── */
    --accent: oklch(0.731 0.132 73.9);
    --accent-hi: oklch(0.8 0.132 73.9); /* hover */
    --accent-soft: oklch(0.731 0.132 73.9 / 0.18); /* tinted fill */
    --accent-line: oklch(0.731 0.132 73.9 / 0.42); /* tinted border */
    /* Text/icon ON an accent fill. Tracks the canvas, so it stays readable in both
       modes: near-black on bright amber (dark), white on deep amber (light). */
    --accent-fg: var(--bg-base);
    --link: oklch(0.72 0.13 250);

    /* ─── Semantic status ─────────────────────────────────────────────── */
    --ok: oklch(0.74 0.13 150); /* was brain/command `--accent` */
    --warn: oklch(0.78 0.14 75);
    --error: oklch(0.7 0.18 18);
    --idle: hsl(44 4% 38%);
    --status-online: var(--ok);
    --status-degraded: var(--warn);
    --status-error: var(--error);
    --status-offline: var(--idle);
    --status-unknown: transparent;

    /* ─── Environment palette — 6 assignable hues ─────────────────────── */
    --env-slate: oklch(0.72 0.02 270);
    --env-cyan: oklch(0.72 0.13 220);
    --env-mint: oklch(0.78 0.14 160);
    --env-amber: oklch(0.8 0.14 78);
    --env-rose: oklch(0.7 0.18 18);
    --env-iris: oklch(0.74 0.13 290);

    --env-slate-soft: oklch(0.72 0.02 270 / 0.2);
    --env-cyan-soft: oklch(0.72 0.13 220 / 0.22);
    --env-mint-soft: oklch(0.78 0.14 160 / 0.22);
    --env-amber-soft: oklch(0.8 0.14 78 / 0.22);
    --env-rose-soft: oklch(0.7 0.18 18 / 0.22);
    --env-iris-soft: oklch(0.74 0.13 290 / 0.22);

    --env-slate-line: oklch(0.72 0.02 270 / 0.55);
    --env-cyan-line: oklch(0.72 0.13 220 / 0.6);
    --env-mint-line: oklch(0.78 0.14 160 / 0.6);
    --env-amber-line: oklch(0.8 0.14 78 / 0.6);
    --env-rose-line: oklch(0.7 0.18 18 / 0.6);
    --env-iris-line: oklch(0.74 0.13 290 / 0.6);

    /* ─── Syntax highlighting ─────────────────────────────────────────── */
    --syn-keyword: oklch(0.78 0.13 290);
    --syn-string: oklch(0.78 0.1 145);
    --syn-number: oklch(0.8 0.13 75);
    --syn-ident: var(--fg-0);
    --syn-comment: hsl(44 5% 44%);
    --syn-fn: oklch(0.82 0.1 290);

    /* ─── Shadows — always two layers: contact + ambient ──────────────── */
    --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4), 0 4px 12px hsl(0 0% 0% / 0.22);
    --shadow-md: 0 1px 3px hsl(0 0% 0% / 0.45), 0 8px 24px hsl(0 0% 0% / 0.28);
    --shadow-lg: 0 2px 4px hsl(0 0% 0% / 0.5), 0 16px 40px hsl(0 0% 0% / 0.34);
    --shadow-inset: inset 0 2px 4px hsl(0 0% 0% / 0.32), inset 0 -1px 1px hsl(0 0% 100% / 0.04);
    --shadow-selected: inset 0 1px 0 hsl(0 0% 100% / 0.06), inset 0 -1px 0 hsl(0 0% 0% / 0.18);

    /* ─── Typography ──────────────────────────────────────────────────── */
    /* system-ui + "Segoe UI" are load-bearing on Windows — brain and
       agent-search both had them; app's stack did not. Superset of all three. */
    --font-sans:
        ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
        Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Size scale — t-N = Npx / 16 rem */
    --t-11: 0.6875rem;
    --t-12: 0.75rem;
    --t-13: 0.8125rem;
    --t-14: 0.875rem; /* default body */
    --t-16: 1rem;
    --t-20: 1.25rem;
    --t-28: 1.75rem;

    /* ─── Radii ───────────────────────────────────────────────────────── */
    --r-2: 0.125rem;
    --r-4: 0.25rem;
    --r-6: 0.375rem;
    --r-8: 0.5rem;
    --r-12: 0.75rem; /* dialogs and large cards — .ui-dialog, onboarding panels */
    --r-pill: 624.9375rem;

    /* ─── Row heights — dense-UI rhythm ───────────────────────────────── */
    --row-tight: 1.5rem;
    --row: 1.75rem;
    --row-loose: 2rem;
}

/* ─── LIGHT MODE — white canvas, warm grey chrome ──────────────────────── */
[data-theme="light"] {
    --bg-base: hsl(0 0% 100%);
    --bg-sidebar: hsl(36 12% 95%);
    --bg-surface: hsl(36 12% 97%);
    --bg-raised: hsl(0 0% 100%);
    --bg-hover: hsl(36 16% 93%);
    --bg-inset: hsl(36 12% 91%);

    --line-1: hsl(30 18% 16% / 0.07);
    --line-2: hsl(30 18% 16% / 0.13);
    --line-3: hsl(30 18% 16% / 0.22);
    --top-highlight: hsl(0 0% 100% / 0.85);

    --fg-0: hsl(30 18% 10%);
    --fg-1: hsl(30 12% 24%);
    --fg-2: hsl(30 8% 40%);
    --fg-3: hsl(30 6% 56%);

    --accent: oklch(0.56 0.132 73.9);
    --accent-hi: oklch(0.48 0.14 73.9);
    --accent-soft: oklch(0.56 0.132 73.9 / 0.14);
    --accent-line: oklch(0.56 0.132 73.9 / 0.42);
    --link: oklch(0.52 0.15 250);

    --ok: oklch(0.55 0.15 150);
    --warn: oklch(0.62 0.15 68);
    --error: oklch(0.55 0.2 18);
    --idle: hsl(30 6% 60%);

    --env-slate: oklch(0.5 0.02 270);
    --env-cyan: oklch(0.55 0.14 220);
    --env-mint: oklch(0.55 0.15 155);
    --env-amber: oklch(0.62 0.16 72);
    --env-rose: oklch(0.55 0.2 18);
    --env-iris: oklch(0.5 0.16 290);

    --env-slate-soft: oklch(0.5 0.02 270 / 0.14);
    --env-cyan-soft: oklch(0.55 0.14 220 / 0.14);
    --env-mint-soft: oklch(0.55 0.15 155 / 0.14);
    --env-amber-soft: oklch(0.62 0.16 72 / 0.16);
    --env-rose-soft: oklch(0.55 0.2 18 / 0.14);
    --env-iris-soft: oklch(0.5 0.16 290 / 0.14);

    --env-slate-line: oklch(0.5 0.02 270 / 0.55);
    --env-cyan-line: oklch(0.55 0.14 220 / 0.55);
    --env-mint-line: oklch(0.55 0.15 155 / 0.55);
    --env-amber-line: oklch(0.62 0.16 72 / 0.6);
    --env-rose-line: oklch(0.55 0.2 18 / 0.55);
    --env-iris-line: oklch(0.5 0.16 290 / 0.55);

    --syn-keyword: oklch(0.5 0.16 290);
    --syn-string: oklch(0.45 0.13 150);
    --syn-number: oklch(0.55 0.14 60);
    --syn-comment: hsl(30 6% 56%);
    --syn-fn: oklch(0.42 0.18 290);

    --shadow-sm: 0 1px 2px hsl(30 18% 16% / 0.06), 0 6px 18px hsl(30 18% 16% / 0.06);
    --shadow-md: 0 1px 3px hsl(30 18% 16% / 0.08), 0 12px 32px hsl(30 18% 16% / 0.08);
    --shadow-lg: 0 2px 6px hsl(30 18% 16% / 0.1), 0 20px 48px hsl(30 18% 16% / 0.1);
    --shadow-inset: inset 0 2px 4px hsl(30 18% 16% / 0.1), inset 0 -1px 1px hsl(0 0% 100% / 0.5);
    --shadow-selected: inset 0 1px 0 hsl(0 0% 100% / 0.6), inset 0 -1px 0 hsl(30 18% 16% / 0.06);
}

/* ─── Icon filters — theme-aware tint for <img>-based SVG icons ────────── */
:root {
    --icon-filter-0: brightness(0) invert(1);
    --icon-filter-1: brightness(0) invert(1) opacity(0.74);
    --icon-filter-2: brightness(0) invert(1) opacity(0.51);
    --icon-filter-3: brightness(0) invert(1) opacity(0.34);
}
[data-theme="light"] {
    --icon-filter-0: brightness(0);
    --icon-filter-1: brightness(0) opacity(0.7);
    --icon-filter-2: brightness(0) opacity(0.48);
    --icon-filter-3: brightness(0) opacity(0.28);
}

/* ─── LEGACY ALIASES ──────────────────────────────────────────────────────
   Compatibility shims so an existing UI can adopt this file without a
   rewrite. MUST NOT be used in new code. Delete a block once its repo's CSS
   has been sed'd to canonical names.

   Two names could NOT be aliased — they mean different things in the two
   families and must be renamed at the call site on adoption:
     • `--accent`  — amber in app/admin, GREEN in brain/command/agent-search.
                     Green is now `--ok`.
     • `--line-2`  — mid border in app, STRONG border in brain/command/
                     agent-search. Their `--line-2` is now `--line-3`. */
:root {
    /* app */
    --bg-0: var(--bg-base);
    --bg-1: var(--bg-surface);
    --bg-2: var(--bg-raised);
    --bg-3: var(--bg-hover);
    --font-size-xs: var(--t-11);
    --font-size-sm: var(--t-12);
    --font-size-md: var(--t-14);
    --font-size-base: var(--t-16);
    --font-size-lg: var(--t-16);
    --font-size-xl: var(--t-20);
    --font-size-2xl: var(--t-28);
    --radius-xs: var(--r-2);
    --radius-sm: var(--r-4);
    --radius-md: var(--r-6);
    --radius-lg: var(--r-8);
    --radius-pill: var(--r-pill);
    --row-height-tight: var(--row-tight);
    --row-height: var(--row);
    --row-height-loose: var(--row-loose);
    --border-color: var(--line-2);
    --border-width: 0.0625rem;
    --border-radius: var(--r-8);
    --button-border-radius: var(--r-8);
    --icon-filter-primary: var(--icon-filter-0);
    --icon-filter-secondary: var(--icon-filter-1);
    --icon-filter-muted: var(--icon-filter-2);
    --icon-filter-disabled: var(--icon-filter-3);

    /* brain / command / agent-search */
    --bg: var(--bg-base);
    --sidebar: var(--bg-sidebar);
    --panel: var(--bg-surface);
    --panel-2: var(--bg-raised);
    --raised: var(--bg-raised);
    --code-bg: var(--bg-inset);
    --line: var(--line-2);
    --text: var(--fg-0);
    --muted: var(--fg-1);
    --faint: var(--fg-2);
    --brand: var(--accent);
    --clay: var(--accent-hi);
    --clay-soft: var(--accent-soft);
    --stuck: var(--error);
    --question: var(--link);

    /* agent-search — already aliased onto canonical semantics */
    --text-primary: var(--fg-0);
    --text-muted: var(--fg-1);
    --border: var(--line-2);
    --highlight: var(--accent);
}

/* NOT here, deliberately — product-specific semantic palettes stay in their own
   repo, because canonical cannot know how many values must stay mutually
   distinguishable:
     • command `--st-*` (issue statuses) — these render as ADJACENT kanban column
       borders and status buttons, so `planning` and `in_review` must not collapse
       to one hue. Canonical has a single violet (`--env-iris`); command needs two.
     • command `--agent`, brain `--km-*` (knowledge-map hues), admin `--topbar-h` /
       `--nav-w` (layout constants).
   Each lives in its own repo's CSS and may reference canonical tokens. */



/* Reset + shared non-token basics. Split out of _ui-theme.css when that file became
   a verbatim copy of the canonical design/tokens.css — keeping it verbatim is what
   lets it be diffed against canonical to prove it has not drifted.

   Layout is NOT here: each page entry owns its own body grid (see main.css).
   Every entry that imports _ui-theme.css must also import this. */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

.logo-wordart {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}



/* ─── Auth shell — shared base ───────────────────────────────────────────────
   Shared auth chrome. Imported by login.css and select-workspace.css.
   Used by login.eta, totp.eta, invitation.eta, signup*.eta, select-account.eta */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;

  background: var(--bg-base);
  padding: 0.5rem;
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 1rem;
}

body > main {
  display: grid;

  padding: 2rem;
  overflow: auto;
  align-items: center;
  justify-items: center;
}

/* Pages that use .auth-content (select-account, signup) instead of <main> get
   the same centered layout. */
.auth-content {
  display: grid;
  padding: 2rem;
  overflow: auto;
  align-items: center;
  justify-items: center;
}

/* signup.eta wraps everything in a single .auth-shell (sole body child). Make it
   span the body grid and lay out the centered content above a bottom footer. */
body > .auth-shell {
  grid-row: 1 / -1;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  overflow: hidden;
}

.auth-shell > .auth-dotfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.auth-shell > .auth-content,
.auth-shell > footer {
  position: relative;
  z-index: 1;
}

.auth-card {
  background: linear-gradient(to bottom, var(--bg-raised), var(--bg-surface));
  border: 1px solid var(--line-2);
  border-top-color: var(--top-highlight);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-lg);
  width: min(32rem, 100%);
}

/* ─── Card header ─────────────────────────────────────────────────────────── */

.auth-card-header {
  padding: 2.75rem 2.25rem 2rem;
  border-bottom: 1px solid var(--line-1);
  display: grid;
  justify-items: center;
  gap: 1.125rem;
  text-align: center;
}

.auth-mark {
  display: block;
  width: 7rem;
  height: auto;
}

.auth-card-title {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg-0);
  margin: 0;
}

.auth-card-sub {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--fg-2);
  line-height: 1.5;
}

/* ─── Card footer (shared: login + select-account + signup) ───────────────── */

.auth-card-footer {
  padding: 0 2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--fg-3);
}

.auth-footer-link {
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
}

.auth-footer-link:hover {
  color: var(--fg-0);
}

.auth-footer-link--accent {
  color: var(--accent-hi);
}

.auth-footer-link--accent:hover {
  filter: brightness(1.15);
}

/* ─── Lockup: mark + wordmark ─────────────────────────────────────────────── */

.auth-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.auth-lockup-text {
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--fg-0);
  line-height: 1;
}

.auth-lockup-text span {
  color: var(--fg-1);
}

/* ─── Back affordance ─────────────────────────────────────────────────────── */

.auth-back {
  padding: 1.25rem 1.5rem 0;
  display: grid;
}

.auth-back-btn {
  height: 1.875rem;
  padding: 0 0.5rem 0 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: none;
  color: var(--fg-2);
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;
}

.auth-back-btn:hover {
  color: var(--fg-0);
}

.auth-back-chev {
  display: inline-flex;
  transform: rotate(180deg);
}

/* ─── Error ───────────────────────────────────────────────────────────────── */

.auth-error {
  color: var(--env-rose);
  font-size: 0.875rem;
  padding: 0.375rem 1.75rem 1rem;
  &:empty {
    display: none;
  }
}




/* Operational status badge: dot + label, state driven by the `state` attribute.
   Mirrors the ui-ws-status pattern — CSS owns both the dot colour and the label
   text; the .ts only sets `state`. */

ui-system-status {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.375rem;
  color: var(--fg-3);

  /* Dot */
  &::before {
    content: "";
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--status-online);
    box-shadow: 0 0 0 0.125rem color-mix(in oklab, var(--status-online) 20%, transparent);
  }

  /* Label */
  &::after {
    content: "Operational";
    white-space: nowrap;
  }

  &[state="degraded"] {
    &::before {
      background: var(--status-degraded);
      box-shadow: 0 0 0 0.125rem color-mix(in oklab, var(--status-degraded) 20%, transparent);
    }

    &::after {
      content: "Degraded";
    }
  }

  &[state="offline"] {
    &::before {
      background: var(--env-rose);
      box-shadow: 0 0 0 0.125rem color-mix(in oklab, var(--env-rose) 20%, transparent);
    }

    &::after {
      content: "Outage";
    }
  }
}



/* ─── Page footer ─────────────────────────────────────────────────────────── */

body > footer {
  padding: 0 0.5rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--fg-3);

  & > section {
    white-space: nowrap;
  }

  a {
    color: var(--fg-2);
    text-decoration: none;

    &:hover {
      color: var(--accent-hi);
    }
  }
}

.auth-page-footer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--fg-3);
}

.auth-page-footer-sep {
  color: var(--fg-3);
  opacity: 0.5;
}

.auth-page-footer-exticon {
  opacity: 0.5;
  flex: 0 0 auto;
  margin-left: 0.25rem;
}



/* ─── Provider stack ──────────────────────────────────────────────────────── */

.auth-providers {
  padding: 1.75rem 2rem 1.5rem;
  display: grid;
  gap: 0.625rem;
}

.auth-provider-btn {
  width: 100%;
  height: 3.25rem;
  padding: 0 1.125rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg-0);
  cursor: pointer;
  text-align: left;
  text-decoration: none; /* provider buttons may be <a>; suppress default underline */
}

.auth-provider-btn--primary {
  background: var(--bg-raised);
  border: 1px solid var(--line-3);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 var(--top-highlight);
  justify-content: center;
}

.auth-provider-btn--secondary {
  background: var(--bg-surface);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 var(--top-highlight);
}

.auth-provider-btn:hover {
  background: var(--bg-hover);
}

.auth-provider-mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 0.25rem;
  background: var(--bg-inset);
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.auth-provider-mark--ms {
  color: var(--env-cyan);
}

.auth-provider-name {
  flex: 1;
}

.auth-provider-chev {
  color: var(--fg-3);
  display: inline-flex;
}

/* ─── Google Sign-In — official branding ─────────────────────────────────── */
/* Hex colors REQUIRED by Google Identity branding guidelines.                */
/* Do not convert to hsl/oklch — Google mandates exact values.                */

.auth-google-btn {
  background: #4285f4;
  border: 1px solid #3367d6;
  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.28), inset 0 1px 0 hsl(0 0% 100% / 0.12);
  color: #fff;
  font-weight: 500;
  padding: 0 1.5rem 0 0;
}

.auth-google-btn:hover {
  background: #3b78e7;
  filter: none;
}

.auth-google-icon {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 0.25rem 0 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
}

/* ─── Divider ─────────────────────────────────────────────────────────────── */

.auth-divider {
  padding: 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-1);
}

.auth-divider-line {
  height: 1px;
  background: var(--line-1);
}

/* ─── TOTP fallback ───────────────────────────────────────────────────────── */

.auth-fallback {
  padding: 1.375rem 2rem 2.25rem;
}

.auth-totp-btn {
  width: 100%;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: transparent;
  border: 1px dashed var(--line-2);
  border-radius: 0.375rem;
  color: var(--fg-1);
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration: none;
}

.auth-totp-btn:hover {
  background: var(--bg-surface);
}

.auth-totp-hint {
  margin-top: 1.125rem;
  font-size: 0.875rem;
  color: var(--fg-2);
  line-height: 1.6;
  text-align: center;
}

/* ─── TOTP 6-cell entry ───────────────────────────────────────────────────── */

.auth-totp-grid-wrap {
  padding: 2rem 2rem 1.25rem;
}

.auth-totp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.625rem;
  font-family: var(--font-mono);
}

.auth-totp-cell {
  height: 4rem;
  display: grid;
  place-items: center;
  background: var(--bg-inset);
  border: 1px solid var(--line-2);
  border-radius: 0.375rem;
  box-shadow: var(--shadow-inset);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--fg-3);
  font-family: var(--font-mono);
}

.auth-totp-cell input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--fg-0);
  caret-color: var(--accent);
  padding: 0;
}

.auth-totp-cell:has(input:focus) {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset);
}

.auth-totp-cell input::placeholder {
  color: var(--fg-3);
}

.auth-totp-verify {
  margin-top: 1.25rem;
  width: 100%;
  height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 0.375rem;
  color: var(--accent-hi);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.auth-totp-verify:hover {
  filter: brightness(1.1);
}

.auth-totp-verify:disabled,
form:invalid .auth-totp-verify {
  background: transparent;
  border-color: var(--fg-3);
  color: var(--fg-3);
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── TOTP card footer ────────────────────────────────────────────────────── */

/* .auth-card-footer / .auth-footer-link moved to auth/_shell.css (shared base). */

/* ─── Stub login form (dev / no-SSO mode) ────────────────────────────────── */

.auth-stub-form {
  display: grid;
  gap: 0.5rem;
}

.auth-stub-label {
  font-size: 0.75rem;
  color: var(--fg-2);
}

.auth-stub-input {
  height: 2.375rem;
  padding: 0 0.75rem;
  background: var(--bg-inset);
  border: 1px solid var(--line-2);
  border-radius: 0.375rem;
  color: var(--fg-0);
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}

/* ─── Misc ────────────────────────────────────────────────────────────────── */

.auth-mono-hint {
  font-family: var(--font-mono);
  color: var(--fg-1);
}

.auth-kbd {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.1875rem;
  background: var(--bg-base);
  color: var(--fg-1);
  border: 1px solid var(--line-1);
  border-bottom-width: 2px;
  box-shadow: inset 0 1px 0 var(--top-highlight);
}

/* ─── Invitation meta strip ───────────────────────────────────────────────── */

.auth-inv-meta {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1.75rem;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line-1);
}

.auth-inv-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.auth-inv-email {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--fg-0);
}

.auth-inv-noprovider {
  font-size: 0.875rem;
  color: var(--fg-3);
  text-align: center;
  padding: 1rem 0;
}

/* ─── Email signup / login form fields ───────────────────────────────────── */

.auth-form {
  padding: 1.5rem 2rem 2rem;
  display: grid;
  gap: 1.125rem;
}

.auth-form-error {
  background: oklch(0.35 0.12 18 / 0.15);
  border: 1px solid oklch(0.55 0.18 18 / 0.4);
  border-radius: 0.375rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--env-rose);
  line-height: 1.4;
}

.auth-field {
  display: grid;
  gap: 0.375rem;
}

.auth-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: 0.01em;
}

.auth-input {
  height: 2.625rem;
  padding: 0 0.875rem;
  background: var(--bg-inset);
  border: 1px solid var(--line-2);
  border-radius: 0.375rem;
  color: var(--fg-0);
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  outline: none;
  box-sizing: border-box;
  width: 100%;
}

.auth-input:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.auth-input::placeholder {
  color: var(--fg-3);
}

.auth-field-hint {
  font-size: 0.75rem;
  color: var(--fg-3);
  font-family: var(--font-mono);
  min-height: 1em;
}

.auth-field--checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.625rem;
}

.auth-checkbox {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.auth-label--checkbox {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--fg-2);
  line-height: 1.5;
}

.auth-label--checkbox a {
  color: var(--accent-hi);
  text-decoration: none;
}

.auth-label--checkbox a:hover {
  text-decoration: underline;
}

.auth-submit-btn {
  height: 2.875rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 0.375rem;
  color: var(--accent-hi);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.auth-submit-btn:hover {
  filter: brightness(1.12);
}

.auth-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Check email confirmation ────────────────────────────────────────────── */

.auth-check-email-body {
  padding: 1.25rem 2rem 1.75rem;
  font-size: 0.9375rem;
  color: var(--fg-2);
  line-height: 1.6;
  margin: 0;
}

/* ─── Platform sign-in card (mirrors Levirge Brain/Search login) ──────────── */

.login-card {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  width: 24rem;
  max-width: 92vw;
  padding: 2.5rem 2rem 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--line-2);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-lg); /* contact + ambient layers */
}

.login-brand {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.login-brand-mark {
  height: 2.5rem;
  width: auto;
}

.login-brand-word {
  height: 1.9rem;
  width: auto;
  margin-top: 0.25rem;
}

.login-brand-sub {
  color: var(--fg-1);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.7;
}

.login-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--fg-0);
}

.login-providers {
  display: grid;
  gap: 0.6rem;
  width: 100%;
}

.login-provider {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--line-3);
  border-radius: 0.45rem;
  background: var(--bg-raised);
  color: var(--fg-0);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.login-provider:hover {
  border-color: var(--accent);
  background: var(--bg-surface);
}

.login-provider-logo {
  height: 1.15rem;
  width: 1.15rem;
}

.login-error {
  margin: 0;
  font-size: 0.85rem;
  color: var(--status-error);
  text-align: center;
}

.login-foot {
  margin: 0;
  font-size: 0.85rem;
  color: var(--fg-1);
}

.login-foot a {
  color: var(--accent);
  text-decoration: underline dotted;
}

.login-foot a:hover {
  text-decoration: underline;
}