/* 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;
}

/* Calidad's own logo, not the product's name. Same reasoning as .auth-logo: the
   people reading this bar all day work for Angela, and the tool's name tells them
   nothing. Height rather than width, so the 56px bar stays put whatever the
   source image measures. */
.nav-logo {
  display: block;
  height: 36px;
  width: auto;
}

.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; }

.app-foot {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 14px 20px 24px;
  border-top: 1px solid var(--grid);
  color: var(--ink-3);
  font-size: 12px;
}

.update-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 320px;
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 13px;
  border: 1px solid var(--s3);
  background: color-mix(in srgb, var(--s3) 12%, var(--surface-1));
  color: var(--ink-1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.update-banner .link { margin-left: 8px; }

@media (max-width: 620px) {
  .nav-inner { gap: 16px; padding: 0 14px; }
  .nav-sections { gap: 14px; }
  .nav-email { display: none; }
  /* The logo is the whole brand now, so it shrinks rather than disappearing the
     way the old text wordmark did. */
  .nav-logo { height: 28px; }
}

/* Getting the authenticator app, step one of enrollment. The people signing in
   here are not technical, and "install an authenticator app" as a sentence left
   them to find one themselves. Two buttons, named after the phone rather than
   after the app store, because that is the question they can answer. */
.getapp {
  display: flex;
  gap: 10px;
  margin: 12px 0 10px;
  flex-wrap: wrap;
}

.getapp-btn {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--s1);
  border-radius: 8px;
  background: var(--surface-1);
  text-decoration: none;
  line-height: 1.25;
}

.getapp-btn:hover { background: var(--s1); }
.getapp-btn:hover .getapp-kind,
.getapp-btn:hover .getapp-where { color: #fff; }
.getapp-btn:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }

.getapp-kind {
  font-weight: 650;
  font-size: 15px;
  color: var(--s1);
}

.getapp-where {
  font-size: 12px;
  color: var(--ink-2);
}

/* Language switch. Angela's two new viewers read Spanish. Both options are named
   on the control itself rather than hidden behind a dropdown, and each half is an
   ordinary link so it works with JavaScript turned off. */
.lang {
  display: inline-flex;
  margin-bottom: 18px;
  border: 1px solid var(--rule, #d8d6d0);
  border-radius: 999px;
  padding: 2px;
  background: var(--surface-2, #f1f0ec);
}

.lang-opt {
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.6;
}

.lang-opt:hover { color: var(--ink-1); }

.lang-opt.is-on {
  background: var(--surface-1, #fff);
  color: var(--s1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.lang-opt:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }

/* Calidad's own wordmark in place of the Mirador text brand. These are Angela's
   people signing in; their own logo says more to them than the name of the tool.
   Height rather than width so the card's padding stays even whatever the source
   image measures.

   46px, not 62: the source file used to carry 13% whitespace on every side and
   was cropped to its content when it gained an alpha channel. 62 x 220/294 is
   what the mark actually measured on screen before, so these five cards look
   the same as they did. */
.auth-logo {
  display: block;
  margin-bottom: 4px;
  height: 46px;
  width: auto;
  max-width: 100%;
}