/* Companion site styling.
   Three things: the landing page, the studies browser, and the hub/card layouts
   the chapter pages share. Everything else is left to the Quarto themes.
   The site ships light (cosmo) and dark (darkly); Quarto's toggle swaps themes
   and sets body.quarto-dark, so dark overrides use that class, not media queries. */

/* ---------- skip link ---------- */

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  border: 2px solid var(--bs-primary, #2780e3);
  border-radius: 6px;
  text-decoration: none;
}

/* ---------- landing page ---------- */

.home-hero {
  align-items: center;
  margin: 0.5rem 0 1.5rem;
}

.home-cover {
  max-width: 240px;
  width: 100%;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.home-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
}

.home-cta .btn {
  padding: 0.5rem 1.1rem;
}

.ch-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
}

.ch-pill {
  display: inline-block;
  min-width: 4.2rem;
  padding: 0.45rem 0.9rem;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  color: var(--bs-link-color, #2761e3);
  border: 1.5px solid var(--bs-link-color, #2761e3);
  border-radius: 999px;
}

.ch-pill:hover,
.ch-pill:focus-visible {
  color: var(--bs-body-bg, #fff);
  background: var(--bs-link-color, #2761e3);
  text-decoration: none;
}

.ch-pill:focus-visible {
  outline: 3px solid var(--bs-link-color, #2761e3);
  outline-offset: 2px;
}

/* ---------- shared card grid (chapter hubs, library index) ---------- */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.hub-card {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: var(--bs-body-bg, #fff);
}

.hub-card h3,
.hub-card h4 {
  margin-top: 0;
  margin-bottom: 0.35rem;
  font-size: 1.02rem;
  line-height: 1.3;
}

.hub-card p {
  margin-bottom: 0;
  font-size: 0.92rem;
  color: var(--bs-secondary-color, #5c6670);
}

.hub-card .hub-missing {
  font-style: italic;
  opacity: 0.75;
}

/* A chapter hub's "what this chapter asks of you" strip. */
.hub-lead {
  border-left: 3px solid #1f6feb;
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 1.25rem 0 1.75rem;
}

.hub-lead p:last-child {
  margin-bottom: 0;
}

/* ---------- studies browser ---------- */

.studies-count {
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--bs-secondary-color, #5c6670);
}

.studies-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.study-card {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-left: 3px solid #adb5bd;
  border-radius: 6px;
  padding: 0.9rem 1.05rem;
  background: var(--bs-body-bg, #fff);
}

.study-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.3rem;
}

.study-title a {
  text-decoration: none;
}

.study-title a:hover {
  text-decoration: underline;
}

.study-meta {
  font-size: 0.86rem;
  color: var(--bs-secondary-color, #5c6670);
  margin: 0 0 0.5rem;
}

.study-badges {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.badge {
  --accent: #6c757d;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.16rem 0.5rem;
  border-radius: 10px;
  color: #fff;
  background: var(--accent);
}

.badge-plain {
  background: transparent;
  color: var(--bs-secondary-color, #5c6670);
  border: 1px solid var(--bs-border-color, #dee2e6);
  font-weight: 500;
}

.badge-rec {
  background: transparent;
  color: #1a7f37;
  border: 1px solid #1a7f37;
}

.study-note {
  margin-top: 0.7rem;
  padding: 0.6rem 0.8rem;
  background: rgba(127, 127, 127, 0.07);
  border-radius: 5px;
}

.study-note-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color, #5c6670);
  margin-bottom: 0.2rem;
}

.study-note p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.study-more {
  margin-top: 0.6rem;
}

.study-more summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--bs-link-color, #0d6efd);
}

.study-kv {
  font-size: 0.88rem;
  margin: 0.5rem 0 0;
}

.study-abstract {
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0.6rem 0 0;
  color: var(--bs-secondary-color, #5c6670);
}

/* Observable input rows sit tighter than their defaults. */
form.oi-inputs-container,
.observablehq form {
  margin-bottom: 0.35rem;
}

/* Fixed-lens label on chapter hubs (replaces a disabled dropdown). */
.lens-static {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.95rem;
}

/* ---------- dark theme (body.quarto-dark, set by the Quarto toggle) ---------- */

body.quarto-dark .study-note {
  background: rgba(255, 255, 255, 0.07);
}

body.quarto-dark .home-cover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* The light-theme green reads at under 4.5:1 on darkly's background; this is
   the same hue lifted until it passes. The filled badges need no override:
   their white-on-accent text is theme-independent. */
body.quarto-dark .badge-rec {
  color: #4ade80;
  border-color: #4ade80;
}

body.quarto-dark .hub-lead {
  border-left-color: #4c8dff;
}