/* The headache-patterns page. A reading page, so it scrolls and sets its own
   measure; the app's own stylesheet supplies the tokens and the card chrome. */

.library-body {
  height: auto;
  min-height: 100dvh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.library { flex: 1; }
.library .disclaimer-strip { padding: 6px var(--space-5); }

.lib-intro, .lib-tier, .lib-redflags, .lib-rootcause {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.lib-intro { padding-top: var(--space-6); padding-bottom: var(--space-5); }
.lib-intro h2 { margin: 0 0 var(--space-3); font-size: 1.6rem; }
.lib-intro p { margin: 0 0 var(--space-3); max-width: 72ch; color: var(--text-secondary); line-height: 1.65; }
.lib-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.lib-redflags, .lib-rootcause { box-sizing: content-box; margin-bottom: var(--space-6); }

.lib-tier { margin-bottom: var(--space-6); }
.lib-tier-title { margin: 0 0 4px; font-size: 1.15rem; }
.lib-tier-blurb { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: 0.88rem; }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.lib-card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  scroll-margin-top: 90px;
}
.lib-card:target { border-color: var(--accent-bright); background: var(--accent-soft); }
.lib-card-head { display: flex; align-items: baseline; gap: var(--space-2); }
.lib-card-head h3 { margin: 0; font-size: 1rem; flex: 1; }
.lib-feels {
  margin: var(--space-3) 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.lib-facts { margin: 0 0 var(--space-3); font-size: 0.84rem; line-height: 1.6; }
.lib-facts dt {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: var(--space-3);
}
.lib-facts dd { margin: 3px 0 0; color: var(--text-secondary); }
.lib-facts dt.danger, .lib-facts dd.danger { color: var(--danger); }
.lib-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-3); }

@media (max-width: 620px) {
  .lib-grid { grid-template-columns: 1fr; }
  .lib-intro, .lib-tier, .lib-redflags, .lib-rootcause { padding-left: var(--space-3); padding-right: var(--space-3); }
}