/* Stylesheet — no webfonts, no build step, works offline. */

:root {
  --ink:      #16242e;   /* deep petrol, near-black but cool */
  --ink-soft: #4a5b66;
  --paper:    #f6f7f5;   /* cool off-white, deliberately not cream */
  --card:     #ffffff;
  --rule:     #d9dfdc;

  --open:     #1f7a5a;   /* can take an animal now */
  --limited:  #a86a12;   /* some capacity */
  --full:     #6b7785;   /* full is a fact, not an error — grey, never red */
  --unknown:  #b3bcb8;
  --alert:    #9c2f2f;   /* urgent posts only */
  --accent:   #0f5c6b;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.55 var(--body);
}
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); }
h2 { font-size: 1.35rem; margin-top: 2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .9rem; }

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1rem 4rem; }

/* ---------- demo banner: this must never be mistaken for live data ---------- */
.demo {
  background: repeating-linear-gradient(135deg, #2a3a44, #2a3a44 12px, #22323c 12px, #22323c 24px);
  color: #eef2f0; font: 500 .78rem/1.4 var(--mono);
  padding: .5rem 1rem; text-align: center; letter-spacing: .02em;
}

/* ---------- masthead ---------- */
header.site { border-bottom: 1px solid var(--rule); background: var(--card); }
.masthead { max-width: 62rem; margin: 0 auto; padding: 1rem; display: flex;
  flex-wrap: wrap; gap: .75rem 1.25rem; align-items: baseline; }
.logo { font-family: var(--display); font-size: 1.3rem; font-weight: 600; text-decoration: none;
  color: var(--ink); display: inline-flex; align-items: center; gap: .5rem; }
.logo .mark { width: 1.7rem; height: 1.36rem; flex: none; fill: var(--accent); }
.logo:hover .mark { fill: var(--ink); }
nav.site { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1rem; }
nav.site a { font-size: .9rem; text-decoration: none; color: var(--ink-soft); padding-bottom: 2px; border-bottom: 2px solid transparent; }
nav.site a:hover, nav.site a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- section sub-nav ----------
   A second row of links, not a menu that opens: no script, nothing to tap
   twice, and it works the same on a phone as on a desktop. */
.subnav { background: var(--card); border-bottom: 1px solid var(--rule); }
.subnav .wrap { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1.1rem; padding-top: .55rem; padding-bottom: .55rem; }
.subnav-label { font: .7rem/1.6 var(--mono); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px; }
.subnav-label:hover { color: var(--ink); }
.subnav-label[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.subnav a { font-size: .9rem; text-decoration: none; color: var(--ink-soft);
  padding-bottom: 2px; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current] { color: var(--ink); font-weight: 600;
  border-bottom-color: var(--accent); }

/* ---------- signature element: the capacity strip ---------- */
.strip { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--unknown); margin: .6rem 0 .35rem; }
.strip i { flex: 1; }
.cap-open    { background: var(--open); }
.cap-limited { background: var(--limited); }
.cap-full    { background: var(--full); }
.cap-unknown { background: var(--unknown); }

.pill { display: inline-flex; align-items: center; gap: .4rem; font: 600 .72rem/1 var(--mono);
  text-transform: uppercase; letter-spacing: .06em; padding: .3rem .5rem; border-radius: 3px;
  color: #fff; white-space: nowrap; }
.pill.cap-unknown { color: var(--ink); }

/* staleness: the honest bit. It ages in public. */
.age { font: .74rem/1.3 var(--mono); color: var(--ink-soft); }
.age.stale { color: var(--limited); }
.age.rotten { color: var(--full); text-decoration: line-through solid 1px; text-decoration-color: var(--unknown); }

/* ---------- cards ---------- */
.grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .grid { grid-template-columns: 1fr 1fr; } }

.card { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: .9rem 1rem; }
.card h3 { margin-bottom: .1rem; }
.card h3 a { text-decoration: none; color: var(--ink); }
.card h3 a:hover { text-decoration: underline; }
.meta { font: .8rem/1.4 var(--mono); color: var(--ink-soft); }
.note { font-size: .9rem; color: var(--ink-soft); margin: .4rem 0 0; }

.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.tag-chip { font: .7rem/1 var(--mono); border: 1px solid var(--rule); border-radius: 99px;
  padding: .28rem .5rem; color: var(--ink-soft); }
.tag-chip.fb { border-color: #b6c4d6; color: #37527a; }
.tag-chip.pigeon { border-color: #a9cfc0; color: var(--open); }
.tag-chip.verified { border-color: #a9cfc0; color: var(--open); font-weight: 600; }

/* ---------- forms + controls ---------- */
form.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: 1rem 0; }
label { display: block; font: .74rem/1.6 var(--mono); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em; }
input, select, textarea, button {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--rule);
  border-radius: 4px; background: var(--card); color: var(--ink); max-width: 100%;
}
textarea { width: 100%; min-height: 6rem; }
input[type=text], input[type=email] { min-width: 12rem; }
button, .btn {
  background: var(--accent); color: #fff; border-color: var(--accent);
  cursor: pointer; text-decoration: none; display: inline-block; font-weight: 600;
}
button:hover, .btn:hover { filter: brightness(1.12); }
button.ghost { background: transparent; color: var(--accent); }
button.small, .btn.small { font-size: .82rem; padding: .35rem .55rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.field { margin-bottom: .9rem; }
.stack { max-width: 34rem; }

/* ---------- board ---------- */
.post { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--unknown);
  border-radius: 6px; padding: .9rem 1rem; margin-bottom: .75rem; }
.post.t-space-needed, .post.t-urgent { border-left-color: var(--alert); }
.post.t-space-available { border-left-color: var(--open); }
.post.t-equipment, .post.t-consumables, .post.t-transport { border-left-color: var(--limited); }
.post.t-skills, .post.t-volunteers, .post.t-funding { border-left-color: var(--accent); }
.post.resolved { opacity: .62; }
.post h3 { margin-bottom: .2rem; }

.counters { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 1.5rem;
  padding: .9rem 1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; }
.counters div { min-width: 5rem; }
.counters b { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.counters span { font: .72rem/1.4 var(--mono); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em; }

.prose { max-width: 42rem; }
.prose h2 { border-bottom: 1px solid var(--rule); padding-bottom: .3rem; }
.prose ul { padding-left: 1.1rem; }
.prose li { margin-bottom: .4rem; }
.callout { border-left: 3px solid var(--accent); background: var(--card);
  padding: .8rem 1rem; border-radius: 0 4px 4px 0; margin: 1rem 0; }
.src { font: .78rem/1.5 var(--mono); color: var(--ink-soft); }

.flash { background: #e7f2ec; border: 1px solid var(--open); color: #14503b;
  padding: .7rem 1rem; border-radius: 4px; margin: 1rem 0; }

footer.site { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 0 0 1.25rem;
  font: .8rem/1.6 var(--mono); color: var(--ink-soft); }
/* Decorative only. Sits above the footer text, never above the content. */
/* Height comes from the 1000x46 viewBox aspect, so the strip stays slim and the
   birds keep their proportions at every width. */
.ledge { display: block; width: 100%; max-width: 62rem; height: auto;
  margin: 0 auto 1.1rem; opacity: .9; }
/* Page ornament. Decorative, so it goes when there isn't room for it. */
.page-spot { display: none; }
.page-spot .spot { width: 6rem; height: 4.8rem; fill: var(--rule); }
@media (min-width: 46rem) {
  .page-spot { display: block; text-align: right; margin: -.5rem 0 -2.5rem; }
}


/* ---------- law comparison (F1/F2) ----------
   Deliberately monochrome. A red/green scale across four nations would rank them,
   and the site takes no position — status is distinguished by weight, not hue. */
.law-practice { margin: 0 0 2.25rem; }
.law-practice h2 { margin-top: 1.8rem; }
.law-practice h2 a { text-decoration: none; color: var(--ink); }
.law-practice h2 a:hover { text-decoration: underline; }

/* Explicit breakpoints, not auto-fit: four nations must never orphan onto a
   second row as 3 + 1, which reads as a broken comparison rather than a grid. */
.law-cols { display: grid; gap: .6rem; margin: .8rem 0 0; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .law-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .law-cols { grid-template-columns: repeat(4, 1fr); } }

.law-cell { background: var(--card); border: 1px solid var(--rule);
  border-radius: 6px; padding: .8rem .9rem; }
.law-cell h4 { font-family: var(--display); font-size: 1.02rem; font-weight: 600;
  margin: 0 0 .45rem; letter-spacing: -0.01em; }

.law-pill { display: inline-block; font: 600 .68rem/1.35 var(--mono);
  text-transform: uppercase; letter-spacing: .05em; padding: .26rem .5rem;
  border-radius: 3px; border: 1px solid var(--ink); color: var(--ink); }
.law-pill.st-banned { background: var(--ink); color: var(--paper); }
.law-pill.st-banned-with-exceptions { background: transparent; border-style: dashed; }
.law-pill.st-restricted { border-color: var(--ink-soft); color: var(--ink-soft); }
.law-pill.st-legal { border-color: var(--rule); color: var(--ink-soft); }
.law-pill.st-not-recorded { border-style: dotted; border-color: var(--unknown);
  color: var(--full); }

.law-facts { margin: .6rem 0 0; font-size: .88rem; }
.law-facts dt { font: .68rem/1.6 var(--mono); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em; }
.law-facts dd { margin: 0 0 .45rem; }

.law-pending { border-left: 3px solid var(--limited); padding: .1rem 0 .1rem .6rem;
  margin: .7rem 0 0; }
.law-pending .meta { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--limited); }

.law-cell .src { display: block; margin-top: .7rem; padding-top: .55rem;
  border-top: 1px solid var(--rule); }

.legal-note { max-width: 42rem; border: 1px solid var(--rule); border-left: 3px solid var(--ink);
  background: var(--card); border-radius: 0 4px 4px 0; padding: .7rem .9rem;
  font-size: .9rem; color: var(--ink-soft); }

.src-list { padding-left: 1.1rem; font-size: .9rem; }
.src-list li { margin-bottom: .35rem; word-break: break-word; }

/* ---------- humane alternatives (F3) ---------- */
.method { background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
  padding: 1rem 1.1rem; margin: 0 0 .75rem; max-width: 46rem; }
.method h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.method > p { font-size: .95rem; }
.method .tags { margin: 0 0 .6rem; }
.method .tag-chip { text-decoration: none; }
.method .tag-chip:hover { border-color: var(--accent); color: var(--accent); }

.method-facts { margin: .8rem 0 0; }
.method-facts dt { font: .68rem/1.6 var(--mono); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em; margin-top: .6rem; }
.method-facts dd { margin: 0; font-size: .92rem; }

.method .src { margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--rule); }

.provider .commitment { border-left: 3px solid var(--accent); padding-left: .6rem; }
.tag-chip.sector { border-style: dashed; }

/* ---------- legislation timeline (F42) ---------- */
.tl-decade { margin: 0 0 1.6rem; }
.tl-decade h2 { margin-top: 1.8rem; }

.tl { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--rule); }
.tl-row { position: relative; padding: 0 0 1.1rem 0; }
.tl-row::before { content: ""; position: absolute; left: -1.42rem; top: .45rem;
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--rule);
  border: 2px solid var(--paper); box-sizing: content-box; }
.tl-row.k-act::before { background: var(--accent); }

.tl-when { font: .72rem/1.5 var(--mono); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em; }
.tl-when time { font-weight: 600; color: var(--ink); }
.tl-kind { margin-left: .4rem; }
.tl-row.k-commencement .tl-kind { color: var(--limited); }
.tl-row.k-licence .tl-kind { color: var(--ink-soft); }
.tl-row.k-licence::before { background: var(--paper); border-color: var(--ink-soft);
  border-width: 2px; border-style: solid; }

.tl-what h3 { font-size: 1.02rem; margin: .15rem 0 .2rem; }
.tl-what .src { margin-top: .35rem; }

.tl-long { margin: .5rem 0 0; }
.tl-long summary { font: .72rem/1.5 var(--mono); color: var(--accent);
  cursor: pointer; text-transform: uppercase; letter-spacing: .05em; }
.tl-long summary:hover { text-decoration: underline; }
.tl-long p { margin: .4rem 0 0; padding-left: .7rem; border-left: 2px solid var(--rule);
  font-style: italic; }

@media (min-width: 44rem) {
  .tl-row { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; }
  .tl-when { text-align: right; padding-top: .1rem; }
  .tl-kind { display: block; margin-left: 0; }
}

/* ---------- glossary (F41) ---------- */
.az { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0 1.5rem;
  padding: .6rem .7rem; background: var(--card); border: 1px solid var(--rule);
  border-radius: 6px; }
/* 44px minimum: this gets tapped with a thumb, often one-handed. */
.az a { font: 600 .85rem/1 var(--mono); text-decoration: none; color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; border-radius: 3px; }
.az a:hover { background: var(--paper); color: var(--ink); }

.az-group { margin: 0 0 1.5rem; }
.az-group > h2 { margin-top: 1.6rem; border-bottom: 1px solid var(--rule);
  padding-bottom: .25rem; scroll-margin-top: 1rem; }

.term { max-width: 46rem; padding: .9rem 0; border-bottom: 1px solid var(--rule);
  scroll-margin-top: 1rem; }
.term:last-child { border-bottom: 0; }
.term h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.term > p { font-size: .95rem; margin-bottom: .5rem; }
.term .src { margin-top: .3rem; }

/* The anchor is there for deep links; it should not shout. */
.term .anchor { text-decoration: none; color: var(--rule); font-weight: 400;
  margin-left: -1rem; padding-right: .3rem; }
.term:hover .anchor, .term .anchor:focus-visible { color: var(--accent); }

.term-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin-bottom: .55rem; }
.term-badge { font: 600 .66rem/1.3 var(--mono); text-transform: uppercase;
  letter-spacing: .05em; padding: .24rem .45rem; border-radius: 3px; border: 1px solid; }
.term-badge.statutory { border-color: var(--ink); color: var(--ink); }
.term-badge.sector { border-color: var(--rule); color: var(--ink-soft);
  border-style: dashed; }
.term .aka { font: .8rem/1.4 var(--mono); color: var(--ink-soft); }

/* ---------- species table (schema v2) ---------- */
.species-table { width: 100%; border-collapse: collapse; margin: .3rem 0 .5rem;
  font-size: .92rem; }
.species-table th { text-align: left; font: .68rem/1.6 var(--mono); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--rule);
  padding: .2rem .5rem .2rem 0; }
.species-table td { padding: .35rem .5rem .35rem 0; border-bottom: 1px solid var(--rule);
  vertical-align: top; }
.species-table tr:last-child td { border-bottom: 0; }
/* An unknown must never read like a no. */
.accepts { font: 600 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.accepts.a-yes { color: var(--open); }
.accepts.a-no { color: var(--ink-soft); }
.accepts.a-unknown { color: var(--full); font-weight: 400; }

@media (prefers-reduced-motion: no-preference) {
  .card, .post, .law-cell, .method { transition: border-color .12s ease; }
  .card:hover, .law-cell:hover, .method:hover { border-color: var(--ink-soft); }
}