@import "./tokens.css";

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.55;
}

a {
  color: var(--accent-strong);
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-4);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--divider);
  padding: var(--space-3) 0;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--fg);
}

.site-brand img {
  width: 28px;
  height: 28px;
}

.btn {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--fg);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.hero {
  padding: var(--space-8) 0 var(--space-6);
}

.hero h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.lede {
  font-size: 1.125rem;
  color: var(--muted);
  margin: 0 0 var(--space-5);
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
}

.status-band {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: var(--space-4) 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.site-footer {
  padding: var(--space-5) 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.not-found {
  padding: var(--space-8) 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}

h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.125rem;
  margin: 0 0 var(--space-2);
}

.section-lede {
  color: var(--muted);
  max-width: 40rem;
  margin: 0 0 var(--space-4);
}

.section-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: var(--space-4) 0 0;
}

.format-demo-section,
.cook-mode-section,
.formats-detail-section,
.capture-section {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--divider);
}

/* The switcher itself: real radio inputs drive which panel shows, so it
   works with no JS. Inputs are visually hidden but stay in the tab order
   and keep native radio-group keyboard behavior (arrow keys, Enter/Space
   on the label). */
.format-demo-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.format-demo-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.format-demo-tab {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Radios and their labels aren't adjacent siblings (the labels sit inside
   the fieldset), so the active state is matched by id from the radio
   through the shared ancestor rather than with `+`. */
#format-demo-traditional:checked ~ .format-demo-tabs label[for="format-demo-traditional"],
#format-demo-notecard:checked ~ .format-demo-tabs label[for="format-demo-notecard"],
#format-demo-flowchart:checked ~ .format-demo-tabs label[for="format-demo-flowchart"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

#format-demo-traditional:focus-visible ~ .format-demo-tabs label[for="format-demo-traditional"],
#format-demo-notecard:focus-visible ~ .format-demo-tabs label[for="format-demo-notecard"],
#format-demo-flowchart:focus-visible ~ .format-demo-tabs label[for="format-demo-flowchart"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Only the active panel is ever in the layout (and the accessibility tree):
   a screen reader visitor gets one recipe, not the same one read three
   times over. */
.format-demo-panel {
  display: none;
}

#format-demo-traditional:checked ~ .format-demo-panels .format-demo-panel-traditional,
#format-demo-notecard:checked ~ .format-demo-panels .format-demo-panel-notecard,
#format-demo-flowchart:checked ~ .format-demo-panels .format-demo-panel-flowchart {
  display: block;
}

.format-demo-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  overflow-x: auto;
}

/* The demo is a static snapshot: the flowchart's expand buttons and the
   "edit graph" hint both describe in-app behavior that isn't wired up
   here, so they're hidden rather than left to look broken when clicked. */
.format-demo-panel-flowchart .no-print {
  display: none;
}

.format-demo-panel .flowchart-step-toggle {
  cursor: default;
}

.formats-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-5);
}

.formats-detail-grid p {
  color: var(--muted);
  margin: 0;
}

.capture-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.capture-list li {
  color: var(--muted);
}

.capture-list strong {
  color: var(--fg);
}