/* ════════════════════════════════════════════════════════════════════
   Catbird Design Kit — single source of truth for the whole family.

   Used by: the private PWA (catbird.html), the lobby TV (lobby.html),
   the public marketing page (cloud/pages/public/index.html), and the
   kiosk. One palette, one type pairing, one set of components, so every
   surface reads as the same product at a glance.

   Canonical identity: the stone-white "field instrument / research
   notebook" palette (the amber/parchment variants were retired — see
   catbird/styles.css header). The RICHNESS patterns that made the lobby
   feel premium — Audubon plates, big Spectral species names, tier-colored
   card spines, area-heat bars — live here now and travel to every screen.

   This file is duplicated to cloud/pages/public/assets/catbird-kit.css for
   the Cloudflare Pages build. Edit THIS copy, then run:
     cp maggii/ui/vendor/catbird-kit/catbird-kit.css \
        cloud/pages/public/assets/catbird-kit.css
   (tools/sync-catbird-kit.sh does this.)
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Warm linen "field notebook" palette — neutral sand base, green accents */
  --cb-bg:       #F5F2EE;   /* warm linen */
  --cb-panel:    #EDE8E1;   /* aged paper */
  --cb-panel-2:  #E2DAD0;   /* parchment crease */
  --cb-fg:       #211E18;   /* warm near-black */
  --cb-muted:    #6B6358;   /* warm gray-brown */
  --cb-accent:   #3E6B57;   /* forest green (unchanged) */
  --cb-accent-2: #9E5A3E;   /* deep clay (unchanged) */
  --cb-danger:   #A6463A;
  --cb-warn:     #9E5A3E;
  --cb-border:   rgba(33, 30, 24, 0.14);
  --cb-sage:     #C4BEAF;   /* warm sage */
  --cb-hover:    rgba(33, 30, 24, 0.05);

  /* Tier signaling — one mapping everywhere (markers, cards, ribbons) */
  --cb-tier-rare:    #9E5A3E;   /* clay — the standout */
  --cb-tier-notable: #6B8E6E;   /* mid sage-green */
  --cb-tier-common:  #C4BEAF;   /* warm sage */

  /* Status signaling — nodes / sensors / liveness */
  --cb-status-online:  #3E6B57;
  --cb-status-stale:   #9E5A3E;
  --cb-status-offline: #6B6358;

  /* Type */
  --cb-hf: 'Spectral', Georgia, 'Times New Roman', serif;   /* display serif */
  --cb-bf: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cb-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Depth + rhythm */
  --cb-shadow:       0 1px 1px rgba(33,30,24,0.05), 0 2px 4px rgba(33,30,24,0.07);
  --cb-shadow-card:  0 2px 12px rgba(33,30,24,0.09);
  --cb-radius:       12px;
  --cb-radius-sm:    8px;

  /* Audubon-plate photo treatment — the family's signature image look */
  --cb-plate-filter: sepia(0.42) contrast(0.92) brightness(0.92) saturate(0.82);
}

/* Dark variant for the lobby/kiosk TV context (large-format, dim room).
   Same hues, inverted ground — keeps the family identity on a dark TV. */
[data-cb-theme="dark"] {
  --cb-bg:       #0F1512;
  --cb-panel:    #18211C;
  --cb-panel-2:  #1F2A24;
  --cb-fg:       #EAF0EB;
  --cb-muted:    #8B988E;
  --cb-accent:   #6FA888;
  --cb-accent-2: #C77E54;
  --cb-border:   rgba(234, 240, 235, 0.14);
  --cb-sage:     #4A5A4E;
  --cb-tier-rare:    #C77E54;
  --cb-tier-notable: #7FB089;
  --cb-tier-common:  #4A5A4E;
  --cb-status-online:  #6FA888;
  --cb-status-stale:   #C77E54;
  --cb-status-offline: #8B988E;
  --cb-shadow-card:  0 2px 16px rgba(0,0,0,0.4);
}

/* ── The family signature: sage→clay→forest gradient hairline ───────────
   Echoes the stripe under section dividers on steadyacre.co, so every
   Catbird surface reads as the same family even at a glance. Apply to any
   header/divider via class, or compose with ::after on your own element. */
.cb-hairline {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    var(--cb-sage) 0%, var(--cb-accent-2) 48%, var(--cb-accent) 100%);
  opacity: 0.6;
}
.cb-hairline-top { position: relative; }
.cb-hairline-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--cb-sage), var(--cb-accent-2), var(--cb-accent));
  opacity: 0.6;
}

/* ── Brand lockup ───────────────────────────────────────────────────── */
.cb-brand { display: inline-flex; align-items: baseline; gap: 5px; text-decoration: none; }
.cb-brand-sa  { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; color: var(--cb-accent); font-style: italic; }
.cb-brand-sep { color: var(--cb-muted); font-size: 0.7rem; }
.cb-brand-cb  { font-family: var(--cb-hf); font-size: 0.9rem; font-weight: 600; color: var(--cb-fg); }

/* ── Section label ──────────────────────────────────────────────────── */
.cb-section-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cb-muted);
}

/* ── Stat cell ──────────────────────────────────────────────────────── */
.cb-stat { display: flex; flex-direction: column; gap: 2px; }
.cb-stat-val { font-family: var(--cb-mono); font-weight: 700; color: var(--cb-accent); line-height: 1; }
.cb-stat-lbl { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cb-muted); }

/* ── Live header (pulsing dot + label) ──────────────────────────────── */
.cb-live { display: inline-flex; align-items: center; gap: 0.5rem; }
.cb-live-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--cb-status-online);
  animation: cb-live-pulse 2.2s ease-in-out infinite;
}
@keyframes cb-live-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(62,107,87,0.55); }
  50%     { box-shadow: 0 0 0 7px rgba(62,107,87,0); }
}

/* ════════════════════════════════════════════════════════════════════
   COMPONENT: Species card — the family's hero unit.
   Audubon plate left, Spectral species name + meta right, tier-colored
   left spine. Used at three sizes via modifier classes.
   ════════════════════════════════════════════════════════════════════ */
.cb-species-card {
  display: flex; overflow: hidden;
  background: var(--cb-panel);
  border: 1px solid var(--cb-border);
  border-left: 5px solid var(--cb-tier-common);
  border-radius: var(--cb-radius-sm);
  box-shadow: var(--cb-shadow);
}
.cb-species-card[data-tier="notable"] { border-left-color: var(--cb-tier-notable); }
.cb-species-card[data-tier="rare"]    { border-left-color: var(--cb-tier-rare); }

.cb-species-img-wrap {
  flex: 0 0 auto; position: relative; overflow: hidden;
  background: var(--cb-panel-2);
}
.cb-species-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: var(--cb-plate-filter);
  transition: opacity 0.5s ease;
}
.cb-species-img[data-loaded="false"] { opacity: 0; }
.cb-species-img-ph {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; opacity: 0.22;
}

.cb-species-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 4px; padding: 0.7rem 0.9rem;
}
.cb-species-name {
  font-family: var(--cb-hf); font-weight: 700; color: var(--cb-fg);
  line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-species-sci { font-family: var(--cb-hf); font-style: italic; color: var(--cb-muted); }
.cb-species-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cb-species-loc  { color: var(--cb-accent); font-weight: 600; }
.cb-species-time { font-family: var(--cb-mono); color: var(--cb-muted); margin-left: auto; }

/* Tier ribbon */
.cb-tier-ribbon {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--cb-tier-notable); color: var(--cb-tier-notable);
}
.cb-tier-ribbon[data-tier="rare"] { border-color: var(--cb-tier-rare); color: var(--cb-tier-rare); }

/* Size: SMALL (gallery tile / phone feed row) */
.cb-species-card.cb-sm .cb-species-img-wrap { width: 84px; }
.cb-species-card.cb-sm .cb-species-name { font-size: 1.05rem; }
.cb-species-card.cb-sm .cb-species-sci  { font-size: 0.72rem; }
.cb-species-card.cb-sm .cb-species-meta { font-size: 0.72rem; }

/* Size: MEDIUM (PWA Now feed, default) */
.cb-species-card .cb-species-img-wrap { width: 104px; }
.cb-species-card .cb-species-name { font-size: 1.5rem; }
.cb-species-card .cb-species-sci  { font-size: 0.8rem; }
.cb-species-card .cb-species-meta { font-size: 0.85rem; }

/* Size: LARGE (lobby TV live feed — readable across a room) */
.cb-species-card.cb-lg .cb-species-img-wrap { width: 132px; }
.cb-species-card.cb-lg .cb-species-name { font-size: 2.4rem; }
.cb-species-card.cb-lg .cb-species-sci  { font-size: 1rem; }
.cb-species-card.cb-lg .cb-species-meta { font-size: 1rem; }

/* ════════════════════════════════════════════════════════════════════
   COMPONENT: Notable-sighting feature card (vertical plate + story).
   The "wow" unit for the public page hero and lobby rare carousel.
   ════════════════════════════════════════════════════════════════════ */
.cb-feature {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--cb-panel); border: 1px solid var(--cb-border);
  border-left: 5px solid var(--cb-tier-rare);
  border-radius: var(--cb-radius); padding: 1rem;
  box-shadow: var(--cb-shadow-card);
}
.cb-feature-img-wrap {
  flex: 0 0 auto; width: 140px; border-radius: var(--cb-radius-sm);
  overflow: hidden; background: var(--cb-panel-2); position: relative;
}
.cb-feature-img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  filter: var(--cb-plate-filter); transition: opacity 0.5s ease;
}
.cb-feature-img[data-loaded="false"] { opacity: 0; }
.cb-feature-img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.18; }
.cb-feature-body { flex: 1; min-width: 0; }
.cb-feature-name { font-family: var(--cb-hf); font-size: 1.6rem; font-weight: 700; color: var(--cb-fg); line-height: 1.1; }
.cb-feature-sci  { font-family: var(--cb-hf); font-style: italic; font-size: 0.85rem; color: var(--cb-muted); margin: 2px 0 0.6rem; }
.cb-feature-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.cb-feature-note { font-size: 0.92rem; color: var(--cb-muted); line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════
   COMPONENT: Area-heat row — where activity is concentrated.
   Vertical heat bar + icon + name/recent + count. One look on every screen.
   ════════════════════════════════════════════════════════════════════ */
.cb-area-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--cb-border);
}
.cb-area-row:last-child { border-bottom: none; }
.cb-area-heat {
  width: 5px; align-self: stretch; min-height: 34px; border-radius: 3px;
  flex: 0 0 auto; background: var(--cb-sage); opacity: 0.3;
  transition: background 1s ease, opacity 0.5s, box-shadow 1s;
}
.cb-area-heat.hot  { background: var(--cb-accent); opacity: 1; box-shadow: 0 0 8px var(--cb-accent); }
.cb-area-heat.warm { background: var(--cb-accent-2); opacity: 0.85; }
.cb-area-heat.cool { background: var(--cb-sage); opacity: 0.28; }
.cb-area-icon { font-size: 1.2rem; flex: 0 0 auto; }
.cb-area-info { flex: 1; min-width: 0; }
.cb-area-name { font-weight: 600; color: var(--cb-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-area-sub  { font-size: 0.72rem; color: var(--cb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-area-count { font-family: var(--cb-mono); font-weight: 700; color: var(--cb-accent); flex: 0 0 auto; }

/* ════════════════════════════════════════════════════════════════════
   COMPONENT: Node/sensor status row.
   ════════════════════════════════════════════════════════════════════ */
.cb-node-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; }
.cb-node-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.cb-node-dot.online  { background: var(--cb-status-online); box-shadow: 0 0 0 3px rgba(62,107,87,0.2); }
.cb-node-dot.stale   { background: var(--cb-status-stale); }
.cb-node-dot.offline { background: var(--cb-status-offline); }
.cb-node-name { font-weight: 600; color: var(--cb-fg); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-node-det  { font-size: 0.75rem; color: var(--cb-muted); white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════
   COMPONENT: Quest / community-science teaser with progress bar.
   ════════════════════════════════════════════════════════════════════ */
.cb-quest {
  background: var(--cb-panel-2); border: 1px solid var(--cb-border);
  border-left: 4px solid var(--cb-accent); border-radius: var(--cb-radius-sm);
  padding: 0.7rem 0.9rem;
}
.cb-quest-lbl { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-accent); margin-bottom: 0.25rem; }
.cb-quest-title { font-family: var(--cb-hf); font-size: 1.05rem; font-weight: 600; color: var(--cb-fg); line-height: 1.3; margin-bottom: 0.4rem; }
.cb-quest-bar-wrap { height: 5px; background: var(--cb-border); border-radius: 3px; overflow: hidden; margin-bottom: 0.25rem; }
.cb-quest-bar { height: 100%; background: var(--cb-accent); border-radius: 3px; transition: width 0.7s; }
.cb-quest-meta { font-size: 0.7rem; color: var(--cb-muted); }

/* ── Animations shared across surfaces ──────────────────────────────── */
@keyframes cb-slide-in-top { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes cb-fade-in      { from { opacity: 0; transform: scale(0.98); }       to { opacity: 1; transform: scale(1); } }
.cb-anim-slide { animation: cb-slide-in-top 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.cb-anim-fade  { animation: cb-fade-in 0.5s ease both; }