/* Authentication screens. Built on the design tokens dashboard.css already
   defines, so sign-in and the dashboard read as one product in both themes.
   No inline style attributes anywhere: the Content Security Policy strips them,
   which is how the flash messages ended up invisible. */

.auth {
  /* body already carries 20px of padding from the shared base styles, so a flat
     100vh here overflows and forces a scrollbar on a page that has nothing to
     scroll. */
  min-height: calc(100vh - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface-1);
  border: 1px solid var(--grid);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 1px 2px var(--ring), 0 12px 32px -12px var(--ring);
}

.auth-brand {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s1);
  margin-bottom: 18px;
}

.auth-card h1 {
  font-size: 20px;
  font-weight: 650;
  margin-bottom: 6px;
}

.auth-lede {
  color: var(--ink-2);
  font-size: 13px;
  margin-bottom: 22px;
}

.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  width: 100%;
  background: var(--page);
  color: var(--ink-1);
  border: 1px solid var(--axis);
  border-radius: 9px;
  padding: 10px 12px;
  font: 14px system-ui, -apple-system, "Segoe UI", sans-serif;
}

.field input:focus {
  outline: none;
  border-color: var(--s1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s1) 22%, transparent);
}

.field input::placeholder { color: var(--ink-3); }

/* One-time codes read as digit groups, not prose. */
.field input.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px;
  letter-spacing: 0.3em;
  text-align: center;
}

.btn {
  width: 100%;
  background: var(--s1);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 11px 16px;
  font: 600 14px system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}

.btn:hover { filter: brightness(1.06); }
.btn:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }

.auth-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--grid);
  font-size: 13px;
  text-align: center;
}

.auth-foot a, .link { color: var(--s1); text-decoration: none; }
.auth-foot a:hover, .link:hover { text-decoration: underline; }

/* Flash messages. Previously inline styles, which CSP dropped. */
.flash {
  border-radius: 9px;
  padding: 10px 13px;
  margin-bottom: 16px;
  font-size: 13px;
  border: 1px solid;
}

.flash-alert {
  background: color-mix(in srgb, var(--s2) 12%, var(--surface-1));
  border-color: var(--s2);
  color: var(--ink-1);
}

.flash-notice {
  background: color-mix(in srgb, var(--s3) 12%, var(--surface-1));
  border-color: var(--s3);
  color: var(--ink-1);
}

/* Enrollment: QR, secret, recovery codes */
.qr {
  display: flex;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--grid);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}
/* Large enough for a phone camera to resolve each module. The symbol is 53
   modules across plus its quiet zone, so at 176px each module was barely three
   pixels. Scales cleanly now that the SVG carries a viewBox. */
.qr svg { width: 100%; max-width: 260px; height: auto; }

.secret {
  display: block;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  background: var(--page);
  border: 1px solid var(--grid);
  border-radius: 8px;
  padding: 9px;
  margin-bottom: 18px;
  word-break: break-all;
}

.codes {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}

.codes li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  text-align: center;
  background: var(--page);
  border: 1px solid var(--grid);
  border-radius: 8px;
  padding: 8px 4px;
}

.auth-card .warn {
  background: var(--warnbg);
  border: 1px solid var(--warnbd);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* A link that has to read as the primary action. */
a.btn-link {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

/* Numbered setup instructions, for a first-time enrollment. */
.steps {
  margin: 0 0 18px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.steps li { margin-bottom: 7px; }
.steps strong { color: var(--ink-1); }

/* Guidance under a field: password advice, why a code was refused. */
.field-hint {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* A secondary action that must not compete with the primary button. button_to
   renders a real <button>, which arrives unstyled and reads as a browser
   default control next to the styled submit. */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--s1);
  cursor: pointer;
  text-decoration: none;
}
.linkish:hover { text-decoration: underline; }
.linkish:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }

/* The flash lives in the layout so every page shows its messages. Constrained to
   the auth card's width so it reads as part of the card rather than a bar bolted
   to the top of the window. */
.flash-region {
  max-width: 400px;
  margin: 20px auto 0;
  padding: 0 24px;
}
.flash-region .flash:last-child { margin-bottom: 0; }

/* Persistent navigation, shaped after Timezappy so the two products read as the
   same hand: white bar, circular mark beside a lowercase wordmark, quiet grey
   section links with the current one in the accent colour, and the account on the
   right behind a chevron. Hand-written rather than ported, because Timezappy is
   Tailwind and Mirador is not, and bringing a CSS framework in for one bar would
   be a large dependency paying for a small view. */
.nav {
  background: var(--surface-1);
  border-bottom: 1px solid var(--grid);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 56px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}

/* Stands in for Timezappy's logo image. A circle with the product's initials
   costs no asset, no request, and no second file to keep in step. */
.nav-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--s1);
  color: #fff;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
}

.nav-wordmark {
  font: 700 17px system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}

.nav-sections {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.nav-link {
  font: 400 14px system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink-1); }

/* The section you are in. Weight as well as colour, so it does not rely on being
   able to tell two shades apart. */
.nav-link-current {
  color: var(--s1);
  font-weight: 500;
}

.nav-account { position: relative; }

.nav-account-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 4px;
  font: 400 14px system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-2);
  cursor: pointer;
}
.nav-account-button:hover { color: var(--ink-1); }
.nav-account-button:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; border-radius: 6px; }

.nav-avatar { width: 24px; height: 24px; color: var(--ink-3); flex: none; }
.nav-chevron { width: 16px; height: 16px; flex: none; }

.nav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: var(--surface-1);
  border: 1px solid var(--grid);
  border-radius: 10px;
  box-shadow: 0 10px 24px -8px var(--ring), 0 2px 6px -2px var(--ring);
  padding: 4px;
  z-index: 50;
}
/* The hidden attribute does the hiding, so the menu means the same thing to a
   screen reader as it does to the eye. */
.nav-menu[hidden] { display: none; }

.nav-menu form { margin: 0; }

.nav-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 9px 12px;
  font: 400 14px system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-1);
  text-decoration: none;
  cursor: pointer;
}
.nav-menu-item:hover { background: var(--page); }
.nav-menu-item:focus-visible { outline: 2px solid var(--s1); outline-offset: -2px; }

.nav + .flash-region { margin-top: 16px; }

@media (max-width: 620px) {
  .nav-inner { gap: 16px; padding: 0 14px; }
  .nav-sections { gap: 14px; }
  .nav-email { display: none; }
  .nav-wordmark { display: none; }
}