/* ─────────────────────────────────────────────────────────────────
   LongevityGraph App Components
   Built on ailabs.css tokens. App-specific (consumer + EMR) only.
   See docs/APP_DESIGN.md for the full system.
   ────────────────────────────────────────────────────────────────
   STATUS: Phase 0 scaffolding. Component sections are placeholders;
   real selectors land in subsequent phases per docs/APP_DESIGN.md.
   ─────────────────────────────────────────────────────────────── */

/* ── Self-hosted IBM Plex (Sans 400/500 · Mono 400/500) ── */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-500.woff2') format('woff2');
}

/* ─────────────────────────────────────────────────────────────────
   Shell (.app-shell, .app-topbar, .app-sidebar) — Phase 2
   ─────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   Drawers (.app-drawer) — Phase 3
   ─────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   Modals (.app-modal) — Phase 1+
   ─────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   Auth pages (.auth-page) — Phase 1
   Standalone pages (login, forgot-password, reset). Don't use the
   app shell — just a centered card on paper.
   ─────────────────────────────────────────────────────────────── */

.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  padding: var(--gutter);
  font-family: var(--sans);
  color: var(--ink);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 40px 36px 28px;
}

@media (max-width: 480px) {
  .auth-card { padding: 28px 22px 22px; }
}

.auth-brand {
  text-align: center;
  margin-bottom: 28px;
}
.auth-brand .auth-logo {
  width: 200px;
  margin: 0 auto 16px;
  display: block;
}
.auth-brand .auth-wordmark {
  font-family: var(--sans);
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.auth-brand .eyebrow {
  margin-bottom: 10px;
}
.auth-brand h1 {
  font-family: var(--sans);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.auth-tagline {
  font-family: var(--mono);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-form .field input {
  padding: 11px 14px;
  font-size: 0.95rem;
}
.auth-form .btn {
  width: 100%;
  justify-content: center;
  padding: 13px 22px;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
}
.auth-remember input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--ink);
  cursor: pointer;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.auth-google-wrapper {
  display: flex;
  justify-content: center;
}

.auth-msg {
  font-family: var(--mono);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border: 1px solid;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  text-align: center;
}
.auth-msg.success {
  color: var(--green-deep);
  border-color: var(--green-soft);
  background: var(--green-soft);
}
.auth-msg.error {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 25%, transparent);
  background: color-mix(in srgb, var(--red) 6%, var(--paper));
}
.auth-msg[hidden] { display: none; }

.auth-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.auth-link:hover { color: var(--ink); }

.auth-hint {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.auth-field-error {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.auth-field-error[hidden] { display: none; }

.auth-text {
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-body-sm);
  line-height: 1.55;
  margin-bottom: 20px;
}

.auth-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-footer a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.auth-footer a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────
   Dense tables (.hair-table.dense) — Phase 4
   ─────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   Forms (.field-group, .flow-step, .inline-edit) — Phase 3+
   ─────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   Density variant (.dense) — Phase 4 (EMR only)
   ─────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   Page head (.page-head) — Phase 2c+
   Header strip used by feature pages (dashboard, biomarkers, etc.):
   left = page meta (date, count); right = action group + sync states.
   ─────────────────────────────────────────────────────────────── */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.page-head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.page-head-date {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.page-head-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--green-soft);
  background: var(--green-soft);
  color: var(--green-deep);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-head-spinner {
  font-family: var(--mono);
  font-size: var(--t-caption);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-head-spinner.htmx-indicator { display: none; }
.page-head-spinner.htmx-request { display: inline; }

/* ─────────────────────────────────────────────────────────────────
   Action plan dashboard zone (.action-item, .action-chip) — Phase 3a
   ─────────────────────────────────────────────────────────────── */

.action-item {
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--panel);
}
.action-item-safety { border-left-color: var(--red); }
.action-item-high { border-left-color: var(--amber); }
.action-item-medium { border-left-color: var(--ink-soft); }

.action-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.action-chip-safety {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 25%, transparent);
  background: color-mix(in srgb, var(--red) 6%, var(--paper));
}
.action-chip-goal {
  color: var(--green-deep);
  border-color: var(--green-soft);
  background: var(--green-soft);
}
.action-chip-high {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 25%, transparent);
  background: color-mix(in srgb, var(--amber) 6%, var(--paper));
}
.action-chip-neutral {
  color: var(--ink-soft);
  border-color: var(--hairline-strong);
  background: var(--paper);
}

.action-plan-link {
  font-family: var(--mono);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s;
}
.action-plan-link:hover { color: var(--ink); }

.action-plan-inline-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.action-plan-inline-link:hover { text-decoration-color: var(--ink); }

/* Safety "I've addressed this" acknowledge link.
   Visually the same 12px underlined muted link, but with a 44×44 tap
   area on mobile so it's actually tappable. The padding is balanced
   so the text position barely shifts. */
.safety-acknowledge-link {
  text-decoration: underline;
  margin-top: 4px;
  display: inline-block;
}
@media (max-width: 768px) {
  .safety-acknowledge-link { padding: 15px 4px; min-width: 44px; }
}