/* Component layer for static RecallHaven pages. Uses only the app's tokens from theme.css
   and mirrors the landing page / components/ui.tsx classes (header, PrimaryButton,
   SecondaryButton, .surface, inputs). */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--background); }
body {
  margin: 0; min-height: 100svh; background: var(--background); color: var(--foreground);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; color: var(--foreground); }
a { color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--muted); border-radius: 6px; padding: 1px 5px; }

/* Header: same as LandingHeader */
.rh-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 88%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.rh-header__row { margin: 0 auto; display: flex; height: 4rem; width: 100%; max-width: 80rem; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 1rem; }
@media (min-width: 768px) { .rh-header__row { padding: 0 2rem; } }
.rh-brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--foreground); }
.rh-brand img { width: 1.75rem; height: 1.75rem; border-radius: .5rem; display: block; }
.rh-brand span { font-size: .875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: -0.025em; }
.rh-nav { display: flex; align-items: center; gap: .5rem; }
.rh-icon-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; padding: 0; border-radius: .5rem; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.rh-icon-btn:hover { background: var(--secondary); color: var(--foreground); }
.rh-icon-btn .sun { display: none; } [data-mode="dark"] .rh-icon-btn .sun { display: block; } [data-mode="dark"] .rh-icon-btn .moon { display: none; }

/* Buttons: components/ui.tsx Button / PrimaryButton / SecondaryButton */
.btn, button.primary, button.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--control-height-sm); border-radius: var(--radius); border: 1px solid transparent;
  padding: .5rem 1rem; font: inherit; font-size: .875rem; line-height: 1.25rem; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: background-color .15s, filter .15s;
}
.btn:active, button:active { transform: scale(.98); }
.primary, .btn-primary { background: var(--primary); color: var(--primary-foreground); }
.primary:hover, .btn-primary:hover { filter: brightness(1.05); }
.ghost, .btn-secondary { border-color: var(--border); background: var(--secondary); color: var(--secondary-foreground); }
.ghost:hover, .btn-secondary:hover { background: var(--surface-hover); }
.rh-header .btn { height: 2.25rem; padding: 0 .75rem; }
@media (min-width: 640px) { .rh-header .btn { padding: 0 1rem; } }
.btn-lg { min-height: 2.75rem; padding: .5rem 1.5rem; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Layout */
.rh-main { margin: 0 auto; width: 100%; max-width: var(--content-width-reading); padding: 3rem 1rem 4rem; }
@media (min-width: 768px) { .rh-main { padding: 4rem 2rem 5rem; } }
.eyebrow { margin: 0; font-size: .75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-foreground); }
.rh-main h1 { margin: 1rem 0 .75rem; font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.035em; }
@media (min-width: 768px) { .rh-main h1 { font-size: 3rem; } }
.rh-main h2 { margin: 2.5rem 0 .75rem; font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.025em; }
.rh-main h3 { margin: 1.5rem 0 .5rem; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.015em; }
.lead, .rh-lead { color: var(--muted-foreground); font-size: 1.0625rem; line-height: 1.75rem; margin: 0 0 1.5rem; }
.note, .hint { color: var(--muted-foreground); }
.note { font-size: .875rem; }
.hint { font-weight: 400; font-size: .8125rem; }
.rh-prose p, .rh-prose li { color: color-mix(in oklab, var(--foreground) 88%, var(--muted-foreground)); }
.rh-prose a { color: var(--foreground); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--foreground) 35%, transparent); text-underline-offset: 3px; }
.rh-prose a:hover { text-decoration-color: var(--foreground); }
.rh-prose li { margin: .3rem 0; }
.rh-prose blockquote { margin: 1.25rem 0; padding: .25rem 1rem; border-left: 3px solid var(--border-strong, var(--border)); color: var(--muted-foreground); }
.rh-prose hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Surfaces: .surface from styles.css */
.card, .surface { position: relative; background: var(--card); color: var(--card-foreground); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card, 0 1px 2px color-mix(in oklab, var(--foreground) 4%, transparent)); padding: 1.5rem; margin: 1rem 0; }
@media (min-width: 768px) { .card, .surface { padding: 2rem; } }
.card > :first-child, .surface > :first-child { margin-top: 0; }
.card > :last-child, .surface > :last-child { margin-bottom: 0; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted-foreground); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.rh-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin: 1.25rem 0; }
.rh-table-wrap table { margin: 0; } .rh-table-wrap tr:last-child td { border-bottom: 0; }

/* Forms: auth page inputs */
label { display: block; font-size: .875rem; font-weight: 500; margin: 1rem 0 .375rem; }
input, textarea, select {
  width: 100%; min-height: var(--control-height); border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface-subtle, var(--muted)); color: var(--foreground); padding: 0 .75rem; font: inherit; font-size: .875rem;
}
textarea { padding: .625rem .75rem; min-height: 120px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted-foreground); }
input[type=radio], input[type=checkbox] { width: auto; min-height: 0; accent-color: var(--primary); }

/* CTA + footer */
.rh-cta { margin: 2.5rem 0 0; }
.rh-cta strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-weight: 600; display: block; letter-spacing: -0.02em; }
.rh-cta p { margin: .5rem 0 1rem; color: var(--muted-foreground); }
.rh-footer { border-top: 1px solid var(--border); }
.rh-footer__row { margin: 0 auto; max-width: 80rem; padding: 1.5rem 1rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8125rem; color: var(--muted-foreground); }
@media (min-width: 768px) { .rh-footer__row { padding: 1.5rem 2rem; } }
.rh-footer a { color: var(--muted-foreground); text-decoration: none; margin-left: 1rem; } .rh-footer a:hover { color: var(--foreground); }