/* ═══════════════════════════════════════════════════════════════════════════
   BIRDBRAIN DESIGN TOKENS — the single place colour and spacing are defined.

   The same rule as Nabble's style.css: nothing else contains a raw hex value.
   If a stylesheet or a map layer needs a colour, it gets a token here first
   (map.js reads the --map-* ones at runtime).

   The olive is the logo's own green. Light theme only for now.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --brand-olive:       #415103;   /* header, selected tab, links           */
  --brand-olive-deep:  #2C3702;   /* pressed                                */
  --brand-olive-lt:    #DDE5BE;   /* selected segment, hero fallback        */
  --brand-paper:       #F6F4EC;   /* the page                               */
  --brand-white:       #FFFFFF;   /* cards and rows                         */
  --brand-ink:         #1E2413;   /* text                                   */
  --brand-grey:        #6B7061;   /* secondary text                         */
  --brand-line:        #E1DED2;   /* dividers                               */
  --brand-amber:       #B35C00;   /* rarity — 5.1:1 on white                */
  --brand-red:         #A3261B;   /* threatened, errors                     */

  --surface:           var(--brand-paper);
  --surface-raised:    var(--brand-white);
  --surface-header:    var(--brand-olive);
  --text-primary:      var(--brand-ink);
  --text-muted:        var(--brand-grey);
  --text-on-brand:     var(--brand-white);

  --map-point:         var(--brand-olive);
  --map-point-edge:    var(--brand-white);
  --map-area:          var(--brand-amber);

  --uni_margin:        16px;
  --radius:            12px;
  --topbar-h:          52px;
  --navbot-h:          64px;
  --tap:               48px;      /* NFR-11: targets at least 48dp          */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

#main {
  padding: calc(var(--topbar-h) + env(safe-area-inset-top)) 0
           calc(var(--navbot-h) + env(safe-area-inset-bottom) + var(--uni_margin));
  max-width: 720px;
  margin: 0 auto;
}

h1, h2 { margin: 0; line-height: 1.2; }

a { color: var(--brand-olive); }

.page { padding: var(--uni_margin); }
.page h1 { margin-bottom: 12px; }
.page h2 { margin: 20px 0 8px; font-size: 18px; }
.small { font-size: 13px; color: var(--text-muted); }

.section-title {
  font-size: 18px;
  margin: 24px var(--uni_margin) 8px;
}

.text-link {
  display: block;
  margin: 24px var(--uni_margin);
}

.notice {
  margin: 12px var(--uni_margin);
  color: var(--text-muted);
}
.notice--error { color: var(--brand-red); }

.search {
  display: block;
  width: calc(100% - 2 * var(--uni_margin));
  margin: 12px var(--uni_margin) 0;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  font: inherit;
  color: inherit;
}

.segmented {
  display: flex;
  margin: 12px var(--uni_margin);
  padding: 3px;
  border-radius: var(--radius);
  background: var(--brand-line);
}
.segment {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: calc(var(--radius) - 3px);
  background: transparent;
  font: inherit;
  color: var(--text-primary);
}
.segment.selected {
  background: var(--surface-raised);
  font-weight: 600;
}

.button {
  min-height: var(--tap);
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand-olive);
  color: var(--text-on-brand);
  font: inherit;
  font-weight: 600;
}
.button--quiet {
  background: var(--surface-raised);
  color: var(--brand-olive);
  border: 1px solid var(--brand-line);
}

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
  color: var(--text-on-brand);
}
.badge--rarity { background: var(--brand-amber); }
.badge--threat { background: var(--brand-red); }

.filters {
  display: flex;
  gap: 8px;
  margin: 0 var(--uni_margin) 8px;
}
.picker { flex: 1; min-width: 0; }
.picker-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.picker select {
  width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  font: inherit;
  color: inherit;
}