/* ============================================================
   Bargain Bird — "Field Guide"
   Aged paper, ink linework, sage and rust. Layered over style.css.
   ============================================================ */

:root {
  --paper: #f4efe2;
  --paper-deep: #eae1cd;
  --paper-edge: #ded2b8;
  --nink: #2c2a24;
  --nink-soft: #5c5648;
  --sage: #6f7d55;
  --forest: #46543a;
  --teal: #3f5a55;
  --rust: #b5563a;
  --ochre: #d29a3e;

  --cream: var(--paper);
  --ink: var(--nink);
  --ink-soft: var(--nink-soft);
  --muted: #6a6354;
  --muted-light: #8a8271;
  --warm-fill: var(--paper-deep);
  --warm-line: var(--paper-edge);
  --warm-border: #cbbfa4;
  --accent: var(--rust);
  --coral: var(--ochre);
  --green: var(--forest);
  --card-shadow: 0 2px 0 rgba(44, 42, 36, 0.13);
  --card-shadow-big: 0 3px 0 rgba(44, 42, 36, 0.15);
  --soft-shadow: 0 1px 3px rgba(44, 42, 36, 0.14);
}

body { font-family: 'Karla', 'Helvetica Neue', Arial, sans-serif; background-color: var(--paper); }

/* laid paper: faint horizontal fibres plus grain */
.screen, body {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(44,42,36,0.022) 0 1px, transparent 1px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.16'/%3E%3C/svg%3E");
}
@media (min-width: 561px) {
  body { background-color: #d9cfb6; }
  .screen { box-shadow: 0 0 50px rgba(44, 42, 36, 0.22); }
}

/* ---------- field-guide typography ---------- */

h1, h2,
.choice-text strong,
.peek-text strong,
.empty-card strong,
.detail-body h1 {
  font-family: 'Young Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.2px;
  color: var(--nink);
}
h1 { line-height: 1.18; }
.welcome-hero h1 { font-size: 38px; }
.tagline { font-family: 'Young Serif', Georgia, serif; font-style: normal; font-size: 15px; color: var(--nink-soft); }

.hint, .body-text, .field-label { color: #5c5648; }
.accent-text { font-family: 'Karla', sans-serif; font-weight: 800; color: #9e4630; letter-spacing: 0; }
.field-label {
  font-family: 'Karla', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #7a7263;
}
.section-label { color: #7a7263; letter-spacing: 1.1px; }

/* ---------- specimen cards: thin ink rules, no hard shadows ---------- */

.choice-card, .peek-card, .stop-card, .empty-card, .listing-card,
.calendar, .alert-card, .match-card, .alert-form, .time-card,
.suggest-list, .search-field, .field, .hours-card, .post-map,
.thumb-row button, .detail-photo {
  border-radius: 6px;
  border: 1.5px solid var(--paper-edge);
  background: #fbf8f0;
}
.choice-card, .peek-card, .listing-card { border-color: #cbbfa4; }
.peek-card { border-radius: 8px; }

.choice-icon { border-radius: 8px; background: var(--paper-deep); border: 1.5px solid var(--paper-edge); }

/* ---------- buttons ---------- */

.btn {
  border-radius: 6px;
  font-family: 'Karla', sans-serif;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: 1.5px solid transparent;
}
.btn.primary { background: var(--rust); color: #fbf8f0; border-color: #96432b; }
.btn.primary.added { background: #fbf8f0; color: var(--forest); border-color: var(--forest); }
.btn.white { background: #fbf8f0; border-color: var(--paper-edge); color: var(--nink); }
.btn.ghost { background: var(--paper-deep); border-color: var(--paper-edge); color: var(--nink-soft); }
.round-btn { border-radius: 6px; background: #fbf8f0; border: 1.5px solid var(--paper-edge); }

.chip {
  border-radius: 4px;
  border: 1.5px solid var(--paper-edge);
  background: #fbf8f0;
  color: var(--nink-soft);
  font-weight: 700;
}
.chip.on { background: var(--forest); border-color: var(--forest); color: #fbf8f0; }
.chip.static { background: var(--paper-deep); }
.chip.static.live { background: var(--forest); border-color: var(--forest); color: #fbf8f0; }
.chip.static.paused { background: var(--paper-deep); color: var(--muted); }

.segmented { border-radius: 6px; border: 1.5px solid var(--paper-edge); background: #fbf8f0; }
.seg-btn { border-radius: 4px; font-family: 'Karla', sans-serif; font-weight: 800; color: var(--nink-soft); }
.seg-btn.on { background: var(--forest); color: #fbf8f0; }

/* ---------- the bird on the map ---------- */

.map-area { border-radius: 6px 6px 0 0; border: 1.5px solid var(--paper-edge); border-bottom: none; }
.maplibregl-map { filter: sepia(0.2) saturate(0.94) brightness(1.01); }

.pin {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fbf8f0;
  border: 2px solid var(--nink);
  box-shadow: 0 2px 5px rgba(44, 42, 36, 0.3);
}
.pin::before { content: none; }
.pin::after {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 52'%3E%3Cg fill='%232c2a24'%3E%3Cpath d='M20 14 C 34 8, 46 16, 44 27 C 42 37, 28 41, 20 34 C 13 28, 13 18, 20 14 Z'/%3E%3Ccircle cx='19' cy='15' r='8.5'/%3E%3Cpath d='M11 12 L2 15 L11 19 Z'/%3E%3Cpath d='M38 25 L62 40 L58 30 L44 21 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.pin.selected {
  width: 50px;
  height: 50px;
  background: var(--rust);
  border-color: var(--nink);
  box-shadow: 0 3px 8px rgba(44,42,36,0.35), 0 0 0 4px rgba(181, 86, 58, 0.22);
}
.pin.selected::after {
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 52'%3E%3Cg fill='%23fbf8f0'%3E%3Cpath d='M20 14 C 34 8, 46 16, 44 27 C 42 37, 28 41, 20 34 C 13 28, 13 18, 20 14 Z'/%3E%3Ccircle cx='19' cy='15' r='8.5'/%3E%3Cpath d='M11 12 L2 15 L11 19 Z'/%3E%3Cpath d='M38 25 L62 40 L58 30 L44 21 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- forms ---------- */

.add-photo { border-radius: 6px; border: 1.5px dashed #b6a887; background: #fbf8f0; }
.photo-row .tile { border-radius: 6px; border: 1.5px solid var(--paper-edge); }
.time-select { font-family: 'Karla', sans-serif; font-weight: 800; color: var(--nink); }
.cal-nav { border-radius: 6px; border: 1.5px solid var(--paper-edge); background: var(--paper-deep); color: var(--nink-soft); }
.cal-day { border-radius: 6px; font-weight: 700; }
.cal-day.on { background: var(--rust); color: #fbf8f0; font-weight: 800; }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--sage); }
.cal-day.weekend { color: #9e4630; }
.cal-day.past { color: #b8ae98; }
.cal-weekdays span { color: #8a8271; font-weight: 800; letter-spacing: 0.6px; }

.stop-num { border-radius: 50%; background: var(--forest); color: #fbf8f0; font-family: 'Karla', sans-serif; font-weight: 800; }
.stop-controls button { border-radius: 6px; background: var(--paper-deep); border: 1.5px solid var(--paper-edge); }
.alert-card button { border-radius: 6px; background: var(--paper-deep); border: 1.5px solid var(--paper-edge); }

.toggle-row { background: var(--paper-deep); border: 1.5px solid var(--paper-edge); border-radius: 6px; }
.switch { border-radius: 15px; background: #c3b89e; }
.switch[aria-checked="true"] { background: var(--forest); }
.switch .knob { border-radius: 50%; background: #fbf8f0; }

.hours-card { background: var(--paper-deep); }
.photo-chip { border-radius: 4px; background: #fbf8f0; border: 1.5px solid var(--paper-edge); color: var(--nink-soft); }

/* ---------- bars ---------- */

.bottom-bar, .tabbar { background: #fbf8f0; border-top: 1.5px solid var(--paper-edge); }
.tab { color: #8a8271; font-weight: 700; }
.tab.active { color: var(--rust); font-weight: 800; }
.tab-dot { background: var(--rust); border-color: #fbf8f0; }
.tab-badge { background: var(--forest); border-color: #fbf8f0; color: #fbf8f0; }
.share-card { background: #fbf8f0; border: 1.5px solid var(--paper-edge); border-radius: 6px; }
.sale-row { background: #fbf8f0; border: 1.5px solid var(--paper-edge); border-radius: 6px; }
.btn.danger { color: #9e4630; border-color: transparent; }
.btn.danger.armed { background: #9e4630; color: #fbf8f0; border-color: #7d3524; }
.mono { color: #7a7263; }

.detail-photo { border-radius: 6px; background: var(--paper-deep); }
.lightbox { background: rgba(30, 28, 22, 0.985); }
.lb-btn { border-radius: 6px; background: rgba(244, 239, 226, 0.16); }
.lb-count { border-radius: 4px; background: rgba(244, 239, 226, 0.16); font-family: 'Karla', sans-serif; }