/* Component rules copied from the platform frontend — index.css for the type
   scale, components/ui/{button,card,input}.tsx for the variants used here — so
   the signup pages read as the login page they lead to. Keep values in the
   source's shape so a diff stays readable.

   The canvas is the sign-in screen's navy and the card is light, in both OS
   themes. Following the OS instead put a near-black page in front of a sign-in
   page that is light either way, and sank the brand mark's navy ring into the
   background it was sitting on. */
:root {
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 0.625rem;

  /* Canvas: the platform sign-in navy (frontend AuthBackdrop). Everything outside the card sits
     on it, so it carries its own foreground pair. */
  --background: #13283f;
  --on-background: oklch(1 0 0);
  --on-background-muted: oklch(1 0 0 / 70%);

  --foreground: oklch(0.1288 0.0406 264.7);
  --card: oklch(1 0 0);
  --primary: oklch(0.6388 0.151862 242.0975);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.928 0.0105 253);
  --secondary-foreground: oklch(0.495 0.0407 257.42);
  --muted-foreground: oklch(0.4455 0.0374 257.28);
  --border: oklch(0.918 0 0);
  --input: oklch(0.895 0 0);
  --ring: oklch(0.5544 0.0407 257.42);
  --success-50: oklch(0.9819 0.0181 155.83);
  --success-600: oklch(0.5273 0.1371 150.07);
  --error-50: oklch(0.9705 0.0129 17.38);
  --error-600: oklch(0.5771 0.2152 27.33);
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

html { color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

b, strong { font-weight: 600; }

/* Type scale: the platform's presets. They carry no colour. */
.text-title { font-size: 1.25rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.text-ui    { font-size: 0.875rem; line-height: 1.45; font-weight: 400; }
.text-meta  { font-size: 0.75rem; line-height: 1.4; font-weight: 400; }

.muted { color: var(--muted-foreground); }
.error { color: var(--error-600); }

/* Layout: one card on the canvas, phone-first with a 16px gutter. */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
}

/* The brand lockup is one image — the wordmark is part of the artwork, not
   text beside it — so the height is what sizes it. 2.25rem puts the ring at
   the 28px it was drawn beside. */
.brand {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}
.brand img { display: block; height: 2.25rem; width: auto; }

/* Card: bg-card rounded-lg border, p-6, sm:px-8 — the login card. */
.card {
  width: 100%;
  max-width: 32rem;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
@media (min-width: 640px) { .card { padding-inline: 2rem; } }

.card h1 { margin: 0 0 0.375rem; }
.card > p { margin: 0; }

.stack { display: flex; flex-direction: column; gap: 1rem; }

/* Spacing utilities. `.card > p` above is one element more specific than a
   bare class, so a margin on the card's own paragraphs needs the same reach —
   without it the fine print under the provider buttons sat flush against
   them. */
.mt-6, .card > .mt-6 { margin-top: 1.5rem; }
.mt-4, .card > .mt-4 { margin-top: 1rem; }

.foot { margin: 0; max-width: 32rem; text-align: center; color: var(--on-background-muted); }

/* Button base: inline-flex border font-medium rounded-md transition-all 200ms
   ease-in, focus-visible ring-1 ring-offset-1. Size lg: text-base py-2.5 px-5. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: all 200ms ease-in;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--card), 0 0 0 2px var(--ring);
}
.btn img { width: 1.25rem; height: 1.25rem; }

/* variant=outline color=secondary: border bg-card text-foreground hover:bg-secondary/80 */
.btn-provider {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
}
.btn-provider:hover { background: color-mix(in oklch, var(--secondary) 80%, transparent); }

/* variant=solid color=primary: bg-primary border-primary text-primary-foreground hover:bg-primary/90 */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }

/* Input size=md: text-sm rounded-md py-2 px-2.5 border-input bg-card,
   hover/focus border-foreground with a foreground/10 ring, 300ms ease-in. */
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field label { font-size: 0.875rem; line-height: 1.45; font-weight: 500; }
.field input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.45;
  transition: color, background-color, border-color, box-shadow 300ms ease-in;
}
.field input:hover,
.field input:focus-visible {
  outline: none;
  border-color: var(--foreground);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
}
.field input[aria-invalid="true"] { border-color: var(--error-600); }

/* The signed-in chip: the one place a tint means state. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--success-50);
  color: var(--success-600);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 1rem;
}
.chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
}
.chip b { font-weight: 600; color: var(--foreground); }

/* Workspace chooser rows: an interactive card each (hover:border-foreground/40). */
.list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease-in, box-shadow 200ms ease-in;
}
.row:hover {
  border-color: color-mix(in oklch, var(--foreground) 40%, transparent);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.row:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ring); }
.row .name { font-weight: 600; font-size: 0.875rem; line-height: 1.45; }
.row .url { font-size: 0.75rem; line-height: 1.4; color: var(--muted-foreground); }
.row .go { color: var(--muted-foreground); flex: none; }

/* Notice: the tinted callout naming what was refused. */
.notice {
  padding: 0.75rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--error-50);
  color: var(--error-600);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Entrance, the platform's animate-message-in. */
@keyframes enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.enter { animation: enter 220ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .enter { animation: none; } }

/* Busy: the control that was pressed says so. Every one of them hands off to
   something that takes a moment — a provider's sign-in, the create, the
   workspace — and until the next page paints there is otherwise nothing on
   screen to show for the click. */
.spinner {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  animation: spin 700ms linear infinite;
}
.btn > .spinner, .row > .spinner { display: none; }
.is-busy > .spinner { display: block; }
/* The provider mark steps aside for the spinner rather than sitting beside it,
   so the button's contents keep their width and nothing shifts. */
.is-busy > img, .row.is-busy > .go { display: none; }
.btn.is-busy { pointer-events: none; opacity: 0.75; }
.btn[disabled] { cursor: default; }

@keyframes spin { to { transform: rotate(1turn); } }
/* Reduced motion still needs the spinner: it is the only thing saying the
   click landed. Slow it to something that does not pull the eye. */
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* The waiting page's heading carries the same spinner, at rest in front of the
   workspace's name rather than inside a control. */
.heading-busy { display: flex; align-items: center; gap: 0.625rem; }