/* The sign-in page, in Decipher's own look (its frontend's globals.css tokens and login card), as
   gitg's and sanctum's are: the board and a drawing of table cards beside the card, filled
   borderless fields, a slate-navy primary. Light or dark follows the system, as Decipher does.
   Fonts: the editor's build (frontend/src/fonts), so `npm run build` comes first. */

@font-face { font-family: Geist; font-weight: 100 900; font-display: swap; src: url(app/geist-variable.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 100 900; font-display: swap; src: url(app/montserrat-variable-latin.woff2) format('woff2'); }

:root {
  color-scheme: light dark;
  --background: hsl(210 15% 97%);
  --foreground: hsl(222 28% 11%);
  --card: hsl(0 0% 100%);
  --primary: hsl(222 28% 28%);
  --primary-foreground: hsl(210 20% 98%);
  --muted: hsl(215 12% 94%);
  --muted-foreground: hsl(220 10% 44%);
  --ring: hsl(222 47% 28%);
  --alert-border: #fecaca; --alert-bg: #fef2f2; --alert-fg: #7f1d1d;
  --card-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.15);
  --border: hsl(220 13% 86%);
  --box-top: hsl(0 0% 100%); --box-left: hsl(215 12% 94%); --box-right: hsl(219 12% 90%);
  --inset-field-shadow: inset 0 1px 1px 0 rgb(0 0 0 / 0.04);
  font-size: 14.5px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(220 6% 0%);
    --foreground: hsl(0 0% 95%);
    --card: hsl(220 0% 9%);
    --primary: hsl(222 38% 57%);
    --primary-foreground: hsl(0 0% 100%);
    --muted: hsl(220 5% 18%);
    --muted-foreground: hsl(220 5% 55%);
    --ring: hsl(222 57% 61%);
    --alert-border: #991b1b; --alert-bg: #450a0a; --alert-fg: #fee2e2;
    --card-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6);
    --border: hsl(220 5% 22%);
    --box-top: hsl(220 5% 20%); --box-left: hsl(220 0% 9%); --box-right: hsl(220 6% 13%);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--background); color: var(--foreground);
  font: 1rem/1.5 Geist, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: Montserrat, Geist, system-ui, sans-serif; }
svg { display: block; }

.auth { display: grid; place-items: center; min-height: 100vh; padding: 2rem 1rem; }
.auth-inner {
  width: 100%; max-width: 68rem; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 26rem); gap: clamp(2.5rem, 6vw, 6rem);
}

.logo { display: flex; align-items: center; gap: 0.5rem; }
.logo .symbol { width: 20px; fill: var(--primary); }
.logo .wordmark { fill: var(--muted-foreground); }

.cover h1 { margin: 2.25rem 0 0; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.cover h1 span { color: var(--primary); }
.cover .lede { margin: 1rem 0 0; max-width: 40ch; font-size: 1.05rem; color: var(--muted-foreground); }
/* The drawing: cards in the board's colours, the two lit ones in the primary. */
.schema-drawing { width: 100%; height: auto; margin-top: 2.5rem; overflow: visible; }
.schema-drawing .edge { fill: none; stroke: color-mix(in srgb, var(--primary) 45%, var(--border)); stroke-width: 1.1; }
.schema-drawing .end { fill: color-mix(in srgb, var(--primary) 60%, var(--border)); }
.schema-drawing .body { fill: var(--card); stroke: var(--border); stroke-width: 0.8; }
.schema-drawing .head { fill: var(--box-right); }
.schema-drawing .title { fill: var(--foreground); opacity: 0.7; }
.schema-drawing .row { fill: var(--muted-foreground); opacity: 0.45; }
.schema-drawing .row.k { fill: hsl(34 84% 40%); opacity: 0.9; }
.schema-drawing .type { fill: var(--muted-foreground); opacity: 0.22; }
.schema-drawing .hi .body { stroke: var(--primary); stroke-width: 1.4; }
.schema-drawing .hi .head { fill: var(--primary); }
.schema-drawing .hi .title { fill: var(--primary-foreground); opacity: 0.9; }
.schema-drawing .mid .head { fill: color-mix(in srgb, var(--primary) 18%, var(--box-top)); }

.card { background: var(--card); border-radius: 1rem; box-shadow: var(--card-shadow); padding: 1.5rem 2rem 2rem; }
.card h2 { margin: 0 0 0.75rem; font-size: 1.25rem; line-height: 1; font-weight: 600; letter-spacing: -0.025em; }
.card .desc { margin: 0 0 1.75rem; font-size: 0.875rem; color: var(--muted-foreground); }

form { display: flex; flex-direction: column; gap: 1.5rem; }
.item { display: flex; flex-direction: column; gap: 0.5rem; }
.item label { margin-left: 0.75rem; font-size: 0.875rem; font-weight: 500; line-height: 1; }
.control { position: relative; display: flex; align-items: center; }
.control svg { position: absolute; left: 0.75rem; width: 1rem; height: 1rem; fill: var(--muted-foreground); opacity: 0.7; pointer-events: none; }
.control input {
  width: 100%; height: 3rem; padding: 0 1rem 0 2.5rem; border: 0; border-radius: 0.75rem;
  background: var(--muted); box-shadow: var(--inset-field-shadow); color: var(--foreground);
  font: inherit; font-size: 0.875rem; transition: box-shadow 0.15s;
}
.control input:focus-visible { outline: none; box-shadow: var(--inset-field-shadow), inset 0 0 0 2px var(--ring); }
.control input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 1000px var(--muted); -webkit-text-fill-color: var(--foreground); }

.alert {
  display: flex; gap: 0.75rem; align-items: flex-start; margin: 0; padding: 1rem; border-radius: 0.75rem;
  border: 1px solid var(--alert-border); background: var(--alert-bg); color: var(--alert-fg); font-size: 0.875rem;
}
.alert svg { width: 18px; height: 18px; flex: none; fill: currentColor; margin-top: 1px; }

button {
  align-self: center; margin-top: 0.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  height: 3rem; padding: 0 2.5rem 0 2rem;
  border: 1px solid var(--primary); border-radius: 1rem; background: var(--primary); color: var(--primary-foreground);
  font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); transition: background-color 0.15s, transform 0.1s;
}
button svg { width: 1rem; height: 1rem; fill: currentColor; opacity: 0.6; }
button:hover { background: color-mix(in srgb, var(--primary) 90%, transparent); }
button:active { transform: scale(0.98); }
button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.note { margin: 0; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }

@media (max-width: 899px) {
  .auth { place-items: start center; }
  .auth-inner { grid-template-columns: minmax(0, 1fr); max-width: 28rem; gap: 2rem; }
  .cover h1 { margin-top: 1.5rem; }
  .schema-drawing { margin-top: 1.5rem; max-height: 9rem; }
  .card { padding: 1.25rem 1.25rem 1.5rem; }
  button { align-self: stretch; }
}