/* Inter, self-hosted.
   It was named as the first font in every stylesheet but only ever
   fetched on the public landing page, so the whole signed-in app has
   been falling back to Segoe UI or San Francisco depending on the
   machine. One variable file covers every weight, and serving it from
   here rather than Google means no visitor IP leaves for a typeface. */

/* The same face as the app, the portal and the public site. These are
   the sign-in and sign-up pages, which is the first thing a new
   customer sees after the marketing page, so it is the worst place for
   the type to change. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* vaOS
   Colours live in custom properties so the client portal can be
   re-skinned per tenant later by overriding --accent and --ink on
   :root, without a second stylesheet. */

:root {
  --ink:      #23241f;
  --ink-soft: #3a3b34;
  --muted:    #6c6d63;
  --paper:    #fbf9f5;
  --surface:  #ffffff;
  --field:    #f2efe7;
  --edge:     #e5dfd2;
  --accent:   #1f6f5c;
  --accent-d: #185848;
  --warn:     #a93226;
  --radius:   6px;
  --shadow:   0 1px 2px rgba(23, 33, 43, .06), 0 8px 24px rgba(23, 33, 43, .06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font: 400 15px/1.55 "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* --- Wordmark --------------------------------------------------- */

.wordmark {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.wordmark .va { color: var(--accent); }

/* --- Split auth layout ------------------------------------------ */

.auth {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

.auth-aside {
  background: var(--ink);
  color: #fff;
  padding: 28px 24px;
}
.auth-aside .wordmark { color: #fff; }
.auth-aside .va { color: #6fd0b4; }
.auth-aside p {
  color: #9fb0bd;
  margin: 10px 0 0;
  max-width: 30ch;
}

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.auth-card { width: 100%; max-width: 360px; }

.auth-card h1 {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.02em;
  margin: 0 0 4px;
}
.auth-card .sub {
  color: var(--muted);
  margin: 0 0 26px;
}

@media (min-width: 860px) {
  .auth { grid-template-columns: 42% 1fr; }
  .auth-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 44px 40px;
  }
  .auth-aside p { font-size: 17px; }
}

/* --- Forms ------------------------------------------------------- */

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 550;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}

.field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--surface);
}

.btn {
  display: inline-block;
  width: 100%;
  padding: 11px 16px;
  font: inherit;
  font-weight: 550;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  /* So the class also works on an <a>, which the reset pages use. */
  text-align: center;
  text-decoration: none;
}
.btn:hover { background: var(--accent-d); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.alert {
  padding: 10px 12px;
  margin-bottom: 18px;
  font-size: 14px;
  border-radius: var(--radius);
  background: #fdeceb;
  border: 1px solid #f3c9c5;
  color: var(--warn);
}

.alert-ok {
  background: #e9f5f1;
  border-color: #bfe3d8;
  color: var(--accent-d);
}

/* --- Signup interstitial -------------------------------------------- */

.setup-wait { padding: 8px 0 4px; }
.setup-wait h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 18px 0 6px;
}

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--field, #eceff1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

.tiny {
  font-size: 13px;
  color: var(--muted);
  margin-top: 18px;
}

/* --- App shell --------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--edge);
}

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  margin-left: 18px;
}
.topbar nav a:hover { color: var(--ink); }

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.wrap h1 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}

.card {
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.card h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 10px;
}

.stat {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -.02em;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}