/* The sign-in page. White, the mark, three fields at most.
 *
 * Henrik, 2026-09-22: "Den ska vara helt vit sida med Airectings logo in",
 * and about what was there before - a hero photograph of a desk, a glass
 * overlay, a headline and a call to action above the form: "Alla gamla
 * bilder på datorer etc när man loggar in eller det grafiska gränssnittet
 * som var förut dem sidorna måste bort."
 *
 * So there is no image on this page at all. Someone arriving here has already
 * decided; a picture of a desk is in the way of a password field.
 *
 * "Do it once." sits under the mark and is never translated, here or
 * anywhere. The one place it is replaced is the mail that carries the MCP,
 * where it becomes "Never twice." - see house_lines.py.
 */

:root {
  --ink: #101418;
  --muted: #5b6672;
  --line: #e4e7ea;
  --accent: #112b45;
  --error: #9d2235;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute; left: -9999px;
}
.skip-link:focus {
  left: 1rem; top: 1rem; background: #fff; padding: .6rem 1rem; z-index: 2;
  border: 1px solid var(--line); border-radius: 8px;
}

/* The same header as the site: same height, same gutter, same 26px logo, so
 * the mark does not move between the page somebody left and the page they
 * arrived at. */
.site-header {
  min-height: 96px;
  padding: 0 max(24px, calc((100vw - 1600px) / 2));
  display: flex;
  align-items: center;
  background: #fff;
}

@media (max-width: 850px) {
  .site-header { min-height: 76px; }
}

main {
  min-height: calc(100dvh - 96px);
  display: grid;
  place-items: center;
  padding: 2rem 1rem 4rem;
}

.card {
  width: 100%;
  max-width: 24rem;
}

/* The mark and the line under it. Centred, and the only thing above the form. */
.wordmark {
  display: flex;
  justify-content: center;
  margin-bottom: 1.1rem;
}


h1 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
}

label {
  display: block;
  font-size: .85rem;
  color: var(--muted);
  margin: 0 0 .35rem;
}
label small { font-weight: 400; }

input {
  width: 100%;
  padding: .7rem .8rem;
  margin-bottom: 1rem;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

button {
  width: 100%;
  padding: .75rem 1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
button:disabled { opacity: .55; cursor: default; }

.text-button {
  width: auto;
  display: inline;
  padding: 0;
  background: none;
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aside {
  margin: 1.1rem 0 0;
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
}

.status {
  min-height: 1.3rem;
  margin: 0 0 .75rem;
  font-size: .9rem;
  color: var(--error);
}
.status.is-ok { color: var(--muted); }

.sent-to { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

@media (prefers-color-scheme: dark) {
  /* Deliberately unchanged: the page stays white. A sign-in page that looks
   * different from one visitor to the next is a page people hesitate at. */
}

/* One logo, one size, one place - the same file and the same 26px on
   every page Henrik can reach. "alla andra sidor maste ju ha exakt samma
   logga samt exakt samma storlek samt exakt samma stalle" (2026-09-22). */
.wordmark img,.shell-brand img{height:26px;width:auto;display:block}
.wordmark,.shell-brand{display:inline-flex;align-items:center;gap:0}

/* The welcome, and the one word in it that has to stick.
 *
 * Henrik, 2026-09-22: "det är ett helt nytt ord som ska präntas in." Nobody
 * has heard "Airector" before today, so the sentence that introduces it gives
 * it the weight - the mark's own colour, a size above the text around it -
 * and every other place it appears uses the same spelling from house_lines.
 * A word met once in bold and then never again is a word nobody keeps. */
.welcome-word {
  margin: 0 0 .4rem;
  font: 400 1.1rem/1.4 inherit;
  color: var(--muted);
  text-align: center;
}

.welcome-word strong {
  font-weight: 600;
  color: #D85840;
}

[data-state="welcome"] h1 {
  text-align: center;
  font-size: 1.4rem;
}

[data-state="welcome"] button {
  margin-top: 1.6rem;
}