/* Dino Discovery - kid-friendly podcast site styling */

:root {
  --dino-green: #2f7d34;
  --dino-green-dark: #163d1a;
  --dino-green-deep: #0c2410;
  --dino-accent: #3a7d2e;
  --dino-accent-dark: #285c21;
  --dino-mint: #86c455;
  --dino-mint-text: #163d1a;
  --cream: #2f6b28;
  --paper: #cdeab0;
  --ink: #12250f;
  --muted: #2f4a29;
  --border: #7fbb5e;
  --text-panel: rgba(238, 248, 227, 0.88);
  --radius: 14px;
  --shadow: 0 4px 14px rgba(10, 30, 10, 0.28);
}

* { box-sizing: border-box; }

/* NOTE: deliberately no overflow-x on html/body. This element has
   background-attachment: fixed, and clipping overflow at the root
   forces that fixed background into its own scrolling/paint context,
   which makes iOS Safari repaint the whole page on every transform -
   that showed up as a full-page flicker on every swipe. The swipe
   fly-out is clipped by .page-main instead (see below). */
html {
  min-height: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-family: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(28, 61, 24, 0.82), rgba(28, 61, 24, 0.82)),
    url('/content/images/fern-texture.jpg');
  background-repeat: repeat;
  background-size: auto, 420px 420px;
  background-attachment: fixed;
  color: var(--dino-mint);
  line-height: 1.55;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Default link color assumes text is sitting directly on the green body.
   Light "surface" elements (.card, .tile, .dino-name-card, .admin-table)
   override back to dark text/links below. */
a { color: var(--dino-mint); }
a:hover { color: #ffffff; }

.card, .tile, .dino-name-card, .admin-table { color: var(--ink); }
.card a, .tile a, .dino-name-card a, .admin-table a { color: var(--dino-green-dark); }
.card a:hover, .tile a:hover, .dino-name-card a:hover, .admin-table a:hover { color: var(--dino-accent-dark); }
.card .page-title {
  color: var(--dino-green-dark);
  background: var(--text-panel);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-block;
}
.card .page-intro { color: var(--muted); }

/* Header / nav bar - always dark green */
.site-header {
  flex-shrink: 0;
  background: var(--dino-green-deep);
  border-bottom: 4px solid var(--dino-accent);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 14px 20px;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-logo {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--dino-mint);
}
.brand-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-weight: 600;
}
.site-nav a { text-decoration: none; color: var(--dino-mint); }
.site-nav a.active, .site-nav a:hover { color: #ffffff; }
.admin-user { color: var(--dino-mint); font-size: 0.9rem; opacity: 0.85; }
.admin-version {
  color: var(--dino-mint);
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.6;
  letter-spacing: 0.03em;
}

/* Layout */
.page-main {
  flex: 1 0 auto;
  padding: 32px 20px 60px;
  /* Anchors the outgoing-card "ghost" during a swipe: nav.js clones the
     departing card, positions it absolutely at the coordinates it
     occupied, and lets it finish flying out on top while the new card
     slides in. Without a positioned ancestor the clone would anchor to
     the viewport instead. */
  position: relative;
  /* Clips the swipe fly-out. Swiping to the PREVIOUS dinosaur carries
     the outgoing card off to the right, and in LTR layout rightward
     overflow expands the document's scrollable width (leftward overflow
     does not) - which is why only that direction used to flicker.
     `clip` rather than `hidden`: it never becomes a scroll container,
     so overflow-y stays visible. It also does NOT clip the
     position:fixed nav arrows inside it, since their containing block
     is the viewport rather than this element. */
  overflow-x: clip;
}

/* Swipe (or edge-arrow) navigation between dinosaurs animates .page-main
   directly via inline styles in nav.js - transform/opacity are set and
   transitioned from JS rather than through a CSS class, so the starting
   state is always applied in the same tick as the content swap with no
   flash. overflow-x on body keeps the brief horizontal offset from
   flashing a scrollbar. */
.page-title {
  font-size: 2rem;
  color: #ffffff;
  margin: 0 0 8px;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.page-intro { color: var(--dino-mint); margin-top: 0; }

/* Hero */
.hero { text-align: center; margin-bottom: 28px; }
.hero-logo {
  max-width: 100%;
  width: 360px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 4px solid var(--dino-green);
}
.hero-tagline {
  font-size: 1.15rem;
  color: var(--dino-mint);
  font-weight: 600;
  margin-top: 14px;
}

/* Cards */
.card {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(205, 234, 176, 0.61), rgba(205, 234, 176, 0.61)),
    url('/content/images/scale-texture.png');
  background-repeat: repeat;
  background-size: auto, 220px 146px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
}
.card h2 {
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--dino-green-dark);
  background: var(--text-panel);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-block;
}

/* Shared text panel: groups a block's heading/title/date/description into
   ONE readable background instead of separate little pills. */
.text-panel {
  background: var(--text-panel);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
}
.text-panel:last-child { margin-bottom: 0; }
.text-panel .page-title,
.text-panel h2 {
  background: none;
  padding: 0;
  border-radius: 0;
  display: block;
}

.episode-tag {
  display: inline-block;
  background: var(--dino-green-deep);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.episode-title-link {
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}
.episode-title-link:hover { color: var(--dino-accent-dark); }
.episode-desc {
  color: var(--muted);
}
.episode-date {
  color: var(--muted);
  font-size: 0.9rem;
}
.episode-tags { margin-top: 10px; }
.episode-tags-label {
  margin: 10px 0 4px;
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--text-panel);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-block;
}
.tag-pill,
.card a.tag-pill, .tile a.tag-pill, .dino-name-card a.tag-pill, .admin-table a.tag-pill {
  display: inline-block;
  background: var(--dino-green);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 2px 4px 2px 0;
  text-decoration: none;
}
.tag-pill:hover,
.card a.tag-pill:hover, .tile a.tag-pill:hover, .dino-name-card a.tag-pill:hover, .admin-table a.tag-pill:hover {
  background: var(--dino-green-deep);
  color: #fff;
}
/* "Appears in" list on the single dinosaur page - episode titles read
   small at the default tag-pill size, so bump them up just here. */
.dino-single .tag-pill {
  font-size: 1.1rem;
  padding: 6px 16px;
}

.audio-player {
  width: 100%;
  margin: 14px 0;
}

.episode-links { margin-top: 12px; }
.btn {
  display: inline-block;
  background: #458a3a;
  color: #fff;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.btn:hover,
.card a.btn:hover, .tile a.btn:hover, .dino-name-card a.btn:hover, .admin-table a.btn:hover {
  background: var(--dino-accent-dark);
  color: #fff;
}
.btn-secondary {
  background: var(--dino-mint);
  color: var(--dino-green-dark);
  border: 2px solid var(--dino-green);
}
.btn-secondary:hover,
.card a.btn-secondary:hover, .tile a.btn-secondary:hover, .dino-name-card a.btn-secondary:hover, .admin-table a.btn-secondary:hover {
  background: var(--dino-green);
  color: #fff;
}
.btn-danger {
  background: #8a1f1f;
  color: #fff;
}
.btn-danger:hover { background: #6e1414; color: #fff; }

/* Home tiles */
.home-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 8px;
}
.tile {
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(205, 234, 176, 0.61), rgba(205, 234, 176, 0.61)),
    url('/content/images/scale-texture.png');
  background-repeat: repeat;
  background-size: auto, 220px 146px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.tile:hover {
  transform: translateY(-3px);
  color: var(--ink);
  background-color: var(--dino-green);
  background-image:
    linear-gradient(rgba(12, 36, 16, 0), rgba(12, 36, 16, 0)),
    url('/content/images/scale-texture.png');
  background-repeat: repeat;
  background-size: auto, 220px 146px;
}
.tile .text-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.tile h3 {
  margin: 0 0 6px;
  color: var(--dino-green-dark);
}
.tile p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 620px) {
  .home-links { grid-template-columns: 1fr; }
}

/* Episode list */
.episode-list .card { padding: 20px; }
/* Two-column grid: column 1 is the cover art + Play button, column 2 is
   the info panel + Download button. The info panel sits directly beside
   the cover art (same row) and shares Download's left edge (same column),
   so there's no stray gap between the art and the text. An optional
   heading (only used by the homepage's "Latest Episode" card) gets its
   own row above the art, centered over column 1. */
.episode-row-top {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 8px;
  margin-bottom: 10px;
}
.episode-row-top h2 {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  margin: 0;
}
.episode-row-top .episode-thumb {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  /* Same width it was back when it sat centered above the single
     Play Episode button. */
  width: 130px;
}
.episode-row-top .play-episode-btn {
  grid-column: 1;
  grid-row: 3;
  white-space: nowrap;
}
.episode-row-top .text-panel {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin-bottom: 0;
}
.episode-row-top .download-mp3-btn {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  white-space: nowrap;
}
.episode-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.episode-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--dino-green);
  background: var(--cream);
}
.episode-thumb-lg {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--dino-green);
  background: var(--cream);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  /* Not enough room for two columns - stack heading, art, info, and both
     buttons in a single centered column instead. */
  .episode-row-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .episode-row-top h2 { grid-column: 1; grid-row: 1; }
  .episode-row-top .episode-thumb { grid-column: 1; grid-row: 2; }
  .episode-row-top .text-panel { grid-column: 1; grid-row: 3; }
  .episode-row-top .play-episode-btn { grid-column: 1; grid-row: 4; }
  .episode-row-top .download-mp3-btn { grid-column: 1; grid-row: 5; justify-self: center; }
}

/* Episode single */
.episode-single .episode-tag { margin-bottom: 10px; }
.episode-single-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  .episode-single-top { flex-direction: column; align-items: center; text-align: center; }
}

/* Dinosaur list */
.dino-name-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
}
@media (max-width: 480px) {
  .dino-name-grid { gap: 10px; }
  .dino-name-card {
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    text-align: center;
  }
  .dino-name-card-text { text-align: center; }
}
.dino-name-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(205, 234, 176, 0.61), rgba(205, 234, 176, 0.61)),
    url('/content/images/scale-texture.png');
  background-repeat: repeat;
  background-size: auto, 220px 146px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px 12px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.dino-name-card:hover {
  transform: translateY(-3px);
  color: var(--ink);
  background-color: var(--dino-green);
  background-image:
    linear-gradient(rgba(12, 36, 16, 0), rgba(12, 36, 16, 0)),
    url('/content/images/scale-texture.png');
  background-repeat: repeat;
  background-size: auto, 220px 146px;
}
.dino-name-card-text {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.dino-thumb {
  width: clamp(92px, 7vw + 70px, 133px);
  aspect-ratio: 23 / 16;
  height: auto;
  min-width: 92px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid var(--dino-green);
  background: var(--cream);
}
.dino-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
}
.dino-name {
  display: inline-block;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dino-green-dark);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  background: var(--text-panel);
  border-radius: 8px;
  padding: 4px 10px;
  max-width: 100%;
}
.dino-description {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--muted);
}
.dino-appearances { display: block; margin: 0; }
.dino-appearances .tag-pill { font-size: 0.72rem; }

/* Single dinosaur page */
.dino-single-image {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto 18px;
  border-radius: var(--radius);
  border: 4px solid var(--dino-green);
  background: var(--cream);
}

/* Previous/next dinosaur navigation - fixed arrow buttons at the screen
   edges (click or tap), plus swipe support on touch devices. */
.dino-nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--dino-green-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--shadow);
  border: 2px solid var(--dino-mint);
  z-index: 100;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.dino-nav-arrow-glyph {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  /* Nudge up slightly - "<"/">" sit a little low relative to their own
     line box, this centers them visually inside the circle. */
  transform: translateY(-1px);
}
.dino-nav-arrow:hover {
  opacity: 1;
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.dino-nav-prev { left: 12px; }
.dino-nav-next { right: 12px; }
@media (max-width: 700px) {
  .dino-nav-arrow { width: 38px; height: 38px; }
  .dino-nav-arrow-glyph { font-size: 1.5rem; }
  .dino-nav-prev { left: 6px; }
  .dino-nav-next { right: 6px; }
}

/* Subscribe buttons - footer only, sitting on the dark green bar. */
.subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(134, 196, 85, 0.3);
}
.subscribe-label {
  color: var(--dino-mint);
  font-weight: 700;
  font-size: 0.9rem;
}
.subscribe-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.subscribe-btn {
  display: inline-block;
  background: transparent;
  border: 2px solid var(--dino-mint);
  border-radius: 999px;
  color: var(--dino-mint);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 5px 12px;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
/* .site-footer a is underlined white by default - override for buttons. */
.site-footer a.subscribe-btn {
  color: var(--dino-mint);
  text-decoration: none;
}
.subscribe-btn:hover,
.site-footer a.subscribe-btn:hover {
  background: var(--dino-mint);
  color: var(--dino-green-deep);
}

/* Footer */
.site-footer {
  flex-shrink: 0;
  background: var(--dino-green-deep);
  color: var(--dino-mint);
  margin-top: 40px;
}
.site-footer-inner {
  padding: 20px;
  text-align: center;
  font-size: 0.9rem;
}
.site-footer a { color: #fff; text-decoration: underline; }

/* Persistent podcast player bar - fixed to the bottom of the viewport,
   present on every public page so playback survives navigating around
   the site. See assets/js/player.js. */
.global-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: var(--dino-green-deep);
  border-top: 3px solid var(--dino-accent);
  box-shadow: 0 -4px 14px rgba(10, 30, 10, 0.35);
}
.global-player[hidden] { display: none; }
.global-player-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 20px;
}
.global-player-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 0;
}
.global-player-tag {
  display: inline-block;
  background: var(--dino-mint);
  color: var(--dino-mint-text);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.global-player-title {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.global-player-audio {
  flex: 1;
  min-width: 180px;
  height: 34px;
}
.global-player-close {
  background: none;
  border: none;
  color: var(--dino-mint);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}
.global-player-close:hover { color: #fff; }

/* Reserve space at the bottom of the page while the player bar is showing,
   so it never covers the real footer or page content. Matches the player
   bar's actual rendered height exactly: 3px top border + 10px top padding
   + 34px audio element + 10px bottom padding = 57px. A mismatch here left
   a sliver of the page's own background exposed above the player bar. */
body.has-global-player {
  padding-bottom: 57px;
}

@media (max-width: 620px) {
  .global-player-title { max-width: 130px; }
  .global-player-audio { min-width: 140px; }
}

/* Admin */
/* .admin-body intentionally has no background override, so it inherits the
   same textured background as the rest of the site from the body rule. */
.admin-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}
.admin-login-card { max-width: 380px; width: 100%; text-align: center; }
.admin-login-logo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--dino-green);
  margin-bottom: 10px;
}
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dino-green-dark);
}
.admin-form input[type=text],
.admin-form input[type=password],
.admin-form input[type=number],
.admin-form input[type=file],
.admin-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}
.duration-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.duration-inputs input[type=number] { width: 80px; }
.duration-sep { font-weight: 700; color: var(--dino-green-dark); }
.checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
}
/* Episode edit form: give every field the same light green panel used
   behind the tagged-dinosaurs section, so all editable fields match. */
.episode-form label {
  background: var(--text-panel);
  border-radius: 8px;
  padding: 10px 12px;
}
/* Episode edit form: flat light green, no scale texture (matches
   .dino-edit-form) - too busy behind this many fields. */
.episode-form {
  background-color: rgb(238, 248, 227);
  background-image: none;
}

/* Dinosaur edit form: flat light green, no scale texture - the form has a
   lot of text/labels and reads better without the busy background here. */
.dino-edit-form {
  background-color: rgb(238, 248, 227);
  background-image: none;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-error {
  background: #f6c9c9;
  color: #6e1414;
  border: 1px solid #d98a8a;
  padding: 10px 14px;
  border-radius: 8px;
}
.form-actions { display: flex; gap: 10px; }
.admin-back { text-align: center; margin-top: 6px; }
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background-color: rgb(238, 248, 227);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.admin-thumb {
  display: block;
  width: 36px;
  height: 26px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--dino-green);
  background: var(--cream);
}
.admin-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}
.admin-table th { background: var(--dino-green); color: #fff; }
.admin-row-actions a { margin-right: 12px; font-weight: 600; }
a.admin-delete-link { color: #8a1f1f; }
.badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  font-weight: 700;
}
.badge-warn { background: #e8b84a; color: #4a3400; }
.badge-error { background: #c0392b; color: #fff; cursor: help; }
.badge-info { background: var(--dino-mint); color: var(--dino-mint-text); margin: 2px 4px 2px 0; }

/* Dashboard banner for episodes whose audio no longer matches the size
   published in the feed - see audio_file_status() in includes/functions.php. */
.admin-alert {
  background: #fdf1ef;
  border: 2px solid #c0392b;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 20px;
  color: #4a1610;
  font-size: 0.95rem;
  line-height: 1.5;
}
.admin-alert strong { display: block; margin-bottom: 4px; font-size: 1rem; }
.admin-alert-list { margin: 10px 0 0; padding-left: 20px; }
.admin-alert-list li { margin-bottom: 4px; }
.admin-alert-list a { color: #8c2418; font-weight: 700; }
.admin-muted { color: var(--muted); font-size: 0.85rem; }
.dino-edit-preview {
  width: 115px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--dino-green);
  margin-top: 6px;
}
.episode-cover-preview {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--dino-green);
  margin-top: 6px;
  background: var(--cream);
}
.current-file {
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--text-panel);
  border-radius: 8px;
  padding: 6px 10px;
  display: inline-block;
}
.dino-fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.dino-fieldset legend {
  font-weight: 700;
  color: var(--dino-green-dark);
  padding: 0 6px;
  margin-bottom: 4px;
}
.dino-fieldset-inner {
  background: var(--text-panel);
  border-radius: 8px;
  padding: 10px 12px;
}
.dino-fieldset .page-intro { font-size: 0.85rem; margin: 0 0 10px; }
.dino-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
}
/* Episode checklist on the dinosaur edit page: one column, scrollable,
   newest episode first (same box size as the dinosaur checkbox grid). */
.episode-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
}
/* "Browse existing files" audio picker on the episode edit page */
.audio-file-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
}
.audio-file-choice.selected { background: var(--dino-mint); }
.audio-file-choice-name {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  color: var(--ink);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
  word-break: break-all;
}
.audio-file-choice-name:hover { color: var(--dino-accent-dark); }
.audio-file-choice-preview {
  height: 30px;
  max-width: 220px;
}
.dino-checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  font-size: 0.9rem !important;
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

.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;
}

/* Hidden-flag toggle checkbox on the admin dinosaurs overview table */
.hidden-toggle-form { margin: 0; }
.hidden-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.hidden-toggle input[type=checkbox] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--dino-green);
}

/* Site-styled confirmation modal (replaces the browser's confirm() box) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 36, 16, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(205, 234, 176, 0.61), rgba(205, 234, 176, 0.61)),
    url('/content/images/scale-texture.png');
  background-repeat: repeat;
  background-size: auto, 220px 146px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  color: var(--ink);
}
.modal-box h2 {
  margin-top: 0;
  color: var(--dino-green-dark);
  background: var(--text-panel);
  border-radius: 8px;
  padding: 6px 12px;
  display: inline-block;
}
.modal-box p {
  background: var(--text-panel);
  border-radius: 8px;
  padding: 8px 12px;
  display: inline-block;
  color: var(--muted);
  margin: 12px 0 20px;
}
.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Dinosaur edit form: existing-image gallery picker + "new image" preview */
.dino-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
  margin: 4px 0 14px;
}
.dino-image-gallery[hidden] { display: none; }
.dino-image-choice {
  display: block;
  width: 100%;
  border: 3px solid transparent;
  border-radius: 8px;
  padding: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.dino-image-choice img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
.dino-image-choice:hover { border-color: var(--dino-mint); }
.dino-image-choice.selected { border-color: var(--dino-green); }
.dino-image-item { position: relative; }
.dino-image-delete {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  line-height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(138, 31, 31, 0.9);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.dino-image-delete:hover { background: #6e1414; }
#toggleImageBrowser { margin: 4px 0 12px; }
.new-image-preview-wrap { margin-top: 12px; }
.form-notice {
  background: var(--dino-mint);
  color: var(--dino-green-dark);
  border: 1px solid var(--dino-green);
  padding: 10px 14px;
  border-radius: 8px;
}