/* CHPL × Nativity co-brand chrome for the reading-lists Datasette (spec §4).
   Chrome only — table/row rendering stays on Datasette defaults (spec non-goal).
   Palette extracted from CHPL_Brandmark_Primary.svg (verified 2026-06-10):
   navy #16243a (primary), blue #3291c2 / green #41bb89 (accents), plus the
   multi-color brandmark set #7d49a9 / #ea4f49 / #f9ae12 for small accents.
   Datasette version assumption: 0.65.x default templates/app.css (pinned <1.0). */
:root {
  --chpl-navy:   #16243a;
  --chpl-blue:   #3291c2;
  --chpl-green:  #41bb89;
  --chpl-purple: #7d49a9;
  --chpl-red:    #ea4f49;
  --chpl-gold:   #f9ae12;
}

/* --- Co-brand bar (injected by templates/base.html) --- */
.cobrand-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  background: #fff;
  padding: 0.6rem 1rem;
  border-bottom: 4px solid var(--chpl-blue);
  /* warm five-color brand stripe under the bar */
  border-image: linear-gradient(90deg,
      var(--chpl-blue), var(--chpl-green), var(--chpl-gold),
      var(--chpl-red), var(--chpl-purple)) 1;
}
.cobrand-bar .cobrand-chpl {
  height: 48px;
  width: auto;
  display: block;
}
.cobrand-bar .cobrand-x {
  color: var(--chpl-navy);
  font-size: 1.3rem;
  font-weight: 600;
}
.cobrand-bar .cobrand-nativity {
  height: 44px;
  width: auto;
  display: block;
}
.cobrand-bar .cobrand-title {
  margin-left: auto;
  color: var(--chpl-navy);
  font-weight: 700;
  font-size: 1.15rem;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --- Re-key Datasette chrome to the palette (chrome only) --- */
header nav {
  background-color: var(--chpl-navy);
}
header nav a {
  color: #fff;
}
footer.ft {
  background-color: var(--chpl-navy);
}
.not-footer h1, .not-footer h2 {
  color: var(--chpl-navy);
}
.not-footer a {
  color: #20739f; /* chpl blue darkened for AA contrast on white */
}

/* --- Curated views: jacket + status are the catalog click-through --- */
/* catalog_url rides along in the row (so the cover + status can link to it) but is
   never shown as its own column — the separate "Find at CHPL" link is gone. */
.col-catalog_url { display: none; }

/* the owned-status link reads as a clear, AA-contrast call to action */
td.col-status_label a.catalog-link {
  font-weight: 600;
  color: #2f8f68; /* chpl green darkened for contrast on white */
  text-decoration: underline;
}
/* the jacket link has no underline/box — the cover image is the affordance */
td.col-cover_isbn a.catalog-link { text-decoration: none; }
td.col-cover_isbn a.catalog-link img { display: block; }

/* --- Splash / landing page (templates/index.html) --- */
.splash {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* --- Chalkboard hero: chimpy mascot + CHIMPY-READER chalk wordmark --- */
.chalkboard {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 1.4rem;
  padding: 1.4rem 1.6rem;
  border-radius: 10px;
  /* deep navy "board" with a faint chalk-dust vignette + a wood-tone chalk tray */
  background:
    radial-gradient(120% 130% at 80% 0%, #1e3050 0%, var(--chpl-navy) 70%);
  border-bottom: 6px solid #b08a5a;            /* chalk tray */
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35);
}
.chalkboard .mascot {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  image-rendering: pixelated;                  /* keep the pixel-art crisp */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.chalkboard-text { flex: 1 1 260px; }

.chimpy-wordmark {
  font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
/* the chalk texture: roughen edges + a faint dust glow */
.chimpy-wordmark .chalk {
  filter: url(#chalk) drop-shadow(0 0 1px rgba(255, 255, 255, 0.18));
}
/* muted CHPL rainbow chalk pastels, warm -> cool across C H I M P Y */
.chimpy-wordmark .ch-c { color: #e89b8f; }   /* muted red   */
.chimpy-wordmark .ch-h { color: #f0c98a; }   /* muted amber */
.chimpy-wordmark .ch-i { color: #e8d98f; }   /* muted gold  */
.chimpy-wordmark .ch-m { color: #8fcfae; }   /* muted green */
.chimpy-wordmark .ch-p { color: #8fbfdc; }   /* muted blue  */
.chimpy-wordmark .ch-y { color: #b89fd0; }   /* muted purple */
.chimpy-wordmark .ch-dash { color: #d8d2c4; padding: 0 0.06em; }
.chimpy-wordmark .ch-reader { color: #f2efe6; }  /* chalk-white */

.chimpy-tagline {
  margin-top: 0.5rem;
  font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", system-ui, sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #eef0e8;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.15));
}
@media (max-width: 480px) {
  .chalkboard { justify-content: center; text-align: center; }
  .chalkboard .mascot { width: 96px; height: 96px; }
}

.splash-intro h1 {
  color: var(--chpl-navy);
  font-size: 2rem;
  margin-bottom: 0.3rem;
}
.splash-intro { margin-top: 0.6rem; }
.splash-intro p {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #2a2a2a;
  max-width: 46rem;
}
.splash h2 {
  color: var(--chpl-navy);
  border-bottom: 2px solid var(--chpl-green);
  padding-bottom: 0.25rem;
  margin: 1.8rem 0 0.9rem;
}
.splash .section-lede {
  color: #555;
  margin-top: -0.5rem;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
}
.list-card, .teacher-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid #d8dde3;
  border-left: 5px solid var(--chpl-blue);
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  color: inherit;
}
a.list-card:hover {
  border-left-color: var(--chpl-green);
  box-shadow: 0 2px 8px rgba(22, 36, 58, 0.12);
  transform: translateY(-1px);
  transition: all 0.12s ease;
}
.list-card-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--chpl-navy);
}
.list-card-stats { color: #20739f; font-size: 0.95rem; }
.list-card-note { color: #555; font-size: 0.92rem; }
/* coming-soon stubs read as muted + non-clickable */
.list-card.stub, .teacher-card.stub {
  border-left-color: #c2c8d0;
  background: #f7f8fa;
  opacity: 0.85;
}
.badge {
  align-self: flex-start;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6a7280;
  background: #e7eaee;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
}
.splash-advanced {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: #666;
}