/* HUMID app styles. Only uses variables from theme.css. No hardcoded colors,
   fonts or sizes here: to restyle, edit theme.css. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}

/* A full-height column, centered, with room for the iPhone notch and home bar */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: calc(var(--safe-top) + var(--s6)) var(--gutter) calc(var(--safe-bottom) + var(--s6));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s5);
}
.screen[hidden] { display: none; }
.screen-top { justify-content: flex-start; gap: var(--s3); }

.wordmark {
  margin: 0;
  font-size: var(--fs-wordmark);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
}
.wordmark .dot { color: var(--warn); }

.title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.tagline {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-body);
}

.meta {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  overflow-wrap: anywhere;
}

/* Main button */
.btn-primary {
  width: 100%;
  min-height: var(--button-h-primary);
  border: 0;
  border-radius: var(--r-field);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: transform var(--t-tap), opacity var(--t-state);
}
.btn-primary:active { transform: scale(var(--tap-scale)); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

/* Text-style button (sign out). Padded so the tap area is at least --tap. */
.link-btn {
  align-self: flex-start;
  min-height: var(--tap);
  padding: 0 var(--s2);
  margin-left: calc(var(--s2) * -1);
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  text-decoration: underline;
  cursor: pointer;
}

button:focus-visible {
  outline: calc(var(--hairline) * 2) solid var(--ink);
  outline-offset: calc(var(--hairline) * 2);
}

/* Error message: icon + words, never color alone */
.error {
  margin: 0;
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3) var(--s4);
  background: var(--urgent-bg);
  border: var(--hairline) solid var(--urgent-line);
  border-radius: var(--r-field);
  color: var(--urgent-text);
  font-size: var(--fs-body-sm);
}
.error[hidden] { display: none; }
.error-icon {
  flex: none;
  width: var(--s5);
  height: var(--s5);
  display: grid;
  place-items: center;
  border: var(--hairline) solid currentColor;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-weight: var(--fw-bold);
}