/* Freeport Meadow Birds — field-notebook restraint.
   Reference register: bird.onethreenine.net (cream ground, serif display,
   letterspaced small controls). Light-only on purpose: this is paper. */

:root {
  --paper: #f6f4ed;
  --card: #fdfcf7;
  --ink: #26221a;
  --ink-70: rgba(38, 34, 26, 0.72);
  --ink-55: rgba(38, 34, 26, 0.55);
  --line: #e2dcc9;
  --line-soft: #ece7d7;
  --umber: #6b4a2f;      /* links, accents */
  --daylight: #f2e4bf;   /* the lit part of the daylight bar */
  --sun: #e0ab33;        /* the disc at sunrise */
  --dusk: #98928a;       /* and the one going down at sunset */
  --bar: #6b573b;        /* chart marks, one hue, one series */
  --alert-bg: #f4e3d3;
  --alert-ink: #6e3a17;
  --alert-line: #d9b48f;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0 auto;
  padding: 1.25rem 1.1rem 3rem;
  max-width: 680px;
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--umber); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* ---------- small letterspaced labels (the "control" voice) ---------- */

.label, .pill, .tab, summary.numbers, .section-head h2, details.box > summary {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- masthead ---------- */

/* The day being reported is the headline; the standfirst under it says what the
   page is. Both are titles — same serif, both display-weight — separated by size
   and colour rather than by dropping the second into the small monospace
   "control" voice, which read as a caption rather than a title. The date is
   short enough to carry uppercase and wide letterspacing; the longer phrase
   stays mixed case, since caps and an apostrophe read badly together. */
.masthead { text-align: center; margin: 1.6rem 0 1.9rem; }
.masthead h1 {
  margin: 0;
  font-size: clamp(1.55rem, 5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  line-height: 1.2;
}
.masthead .standfirst {
  margin: 0.55rem 0 0;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  font-weight: 500;
  color: var(--ink-70);
  line-height: 1.35;
  text-wrap: balance;
}

.status {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-55); margin: 0 0 0.7rem;
}
.dot {
  display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%;
  margin-right: 0.35em; vertical-align: 6%;
}
.dot.ok { background: #5a6b46; }
.dot.night { background: #3f5573; }
.dot.warn { background: #a15420; }

/* ---------- banners ---------- */

.banner {
  background: var(--alert-bg);
  color: var(--alert-ink);
  border: 1px solid var(--alert-line);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
}

/* ---------- cards & sections ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}

section { margin: 2.4rem 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem;
}
.section-head h2 { margin: 0; color: var(--ink-55); font-weight: 500; }

/* ---------- the report ---------- */

/* Conditions sit above the bar and the day length below it, so the graphic is
   framed by its two lines rather than stacked on top of them. */
.report.card { padding-top: 1.35rem; }
.weather {
  font-style: italic; color: var(--ink-70);
  margin: 0 0 0.7rem; font-size: 0.95rem;
  text-align: center;
}
.weather.gap { color: var(--ink-55); text-align: left; margin-bottom: 0; }

.ai-note {
  font-size: 0.9rem;
  color: var(--ink-70);
  border-left: 3px solid var(--line);
  padding-left: 0.75rem;
  margin: 0.8rem 0 1.1rem;
}

.report h3 {
  font-size: 1.02rem; font-weight: 600; font-style: italic;
  margin: 1.1rem 0 0.25rem;
}
.report .prose p { margin: 0.25rem 0 0; }

.caveat {
  font-style: italic;
  color: var(--alert-ink);
  background: var(--alert-bg);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
}

.report-gap {
  font-style: italic;
  color: var(--ink-70);
}

.factline { margin: 1.2rem 0 0; font-size: 1rem; }
.factline strong { font-weight: 600; }

/* ---------- pop-open numbers ---------- */

details.day-numbers { margin-top: 1rem; border-top: 1px dotted var(--line); padding-top: 0.8rem; }
summary.numbers {
  cursor: pointer; color: var(--ink-55); list-style: none;
}
summary.numbers::before { content: "▸ "; }
details[open] summary.numbers::before { content: "▾ "; }
summary.numbers::-webkit-details-marker { display: none; }

.kv {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 0.2rem 1.2rem; margin: 0.9rem 0 0; font-size: 0.98rem;
}
.kv dt { color: var(--ink-55); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

.mini-note { font-size: 0.85rem; color: var(--ink-55); margin-top: 0.8rem; }

/* ---------- pop-open boxes (depth, kept out of the way) ---------- */

details.box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  margin: 1.8rem 0;
}
details.box > summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink-55);
}
details.box > summary::before { content: "▸ "; }
details.box[open] > summary::before { content: "▾ "; }
details.box > summary::-webkit-details-marker { display: none; }
details.box > summary:hover { color: var(--umber); }
details.box[open] > summary { margin-bottom: 0.9rem; }
details.box .controls { margin-bottom: 0.6rem; }

/* ---------- the daylight bar ---------- */

/* The one graphic in the report: yesterday, midnight to midnight, dark → light
   → dark. Day length is the weather fact that explains birdsong, so it gets the
   visual weight and the rest of the conditions stay a line of text. The edges
   fade across civil twilight — the birds are already singing before sunrise, so
   a hard edge would be the wrong shape. */
.daylight { margin: 0; }
.daylight svg { width: 100%; height: auto; display: block; overflow: visible; }
.daylight rect.night { fill: rgba(63, 85, 115, 0.22); }
.daylight rect.day { fill: var(--daylight); }
/* The wedges take their colour here and their shape from the gradient's opacity
   stops, so the lit hue stays defined in exactly one place. */
.daylight stop { stop-color: var(--daylight); }
/* Sun up and sun down, as discs rather than tick marks. The paper-coloured rim
   keeps them legible where they straddle the lit edge and the twilight fade. */
.daylight circle.sun-up { fill: var(--sun); stroke: var(--card); stroke-width: 1.25; }
.daylight circle.sun-down { fill: var(--dusk); stroke: var(--card); stroke-width: 1.25; }
/* An ink-drawn moon: the rim is always there, the wash is however much of it
   was lit. Empty outline at new moon is right, not a failed render. */
.daylight .moon-rim { fill: none; stroke: var(--ink-55); stroke-width: 1; }
.daylight .moon-lit { fill: var(--sun); opacity: 0.55; }
.daylight figcaption {
  font-size: 0.8rem; color: var(--ink-55); margin-top: 0.25rem;
  text-align: center;
}

/* ---------- controls ---------- */

.pills { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; background: #efecdf; border-radius: 999px; padding: 0.2rem; }
.pill {
  border: 0; background: transparent; color: var(--ink-55);
  border-radius: 999px; padding: 0.35rem 0.7rem; cursor: pointer;
}
.pill[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

.controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* ---------- species list ---------- */

ul.species, ul.plain { list-style: none; margin: 0; padding: 0; }

ul.species li a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.42rem 0.2rem;
  border-bottom: 1px dotted var(--line);
  color: inherit; text-decoration: none;
}
ul.species li:last-child a { border-bottom: 0; }
ul.species li a:hover { background: rgba(107, 74, 47, 0.05); }

.sp-name .sci { font-style: italic; color: var(--ink-55); font-size: 0.88rem; margin-left: 0.45rem; }
.sp-metric { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-70); }
.sp-metric.zero { color: var(--ink-55); opacity: 0.6; }

.badge {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--alert-line); color: var(--alert-ink);
  border-radius: 999px; padding: 0.05rem 0.45rem; margin-left: 0.5rem;
  white-space: nowrap;
}

/* ---------- recent list (species detail page only) ---------- */

ul.recent li {
  display: flex; gap: 0.9rem; align-items: baseline;
  padding: 0.32rem 0.2rem; border-bottom: 1px dotted var(--line-soft);
  font-size: 0.98rem;
}
ul.recent li:last-child { border-bottom: 0; }
.rc-time { font-variant-numeric: tabular-nums; color: var(--ink-55); font-size: 0.85rem; white-space: nowrap; min-width: 4.4ch; }
.rc-count { color: var(--ink-55); font-size: 0.88rem; }
.rc-conf { margin-left: auto; color: var(--ink-55); font-size: 0.82rem; font-variant-numeric: tabular-nums; }

/* ---------- charts ---------- */

.chart { margin-top: 1.2rem; }
.chart figure { margin: 0; position: relative; }
.chart figcaption { font-size: 0.85rem; color: var(--ink-55); margin-top: 0.35rem; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis-label { font: 0.62rem ui-monospace, Menlo, monospace; fill: var(--ink-55); letter-spacing: 0.06em; }
.chart rect.mark { fill: var(--bar); }
.chart rect.mark:hover { fill: var(--umber); }
.chart rect.partial { fill: none; stroke: var(--bar); stroke-dasharray: 3 2; }

.tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--ink); color: var(--paper);
  font: 0.78rem ui-monospace, Menlo, monospace;
  padding: 0.25rem 0.5rem; border-radius: 5px;
  transform: translate(-50%, -130%);
  white-space: nowrap; display: none;
}

/* ---------- species detail ---------- */

.back { display: inline-block; margin-bottom: 1.2rem; font-size: 0.92rem; }

.sp-head { display: flex; gap: 1.3rem; align-items: center; margin-bottom: 1.4rem; }
.illo {
  width: 108px; height: 108px; flex: none;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.illo img { width: 100%; height: 100%; object-fit: contain; }
.illo .initials {
  font-size: 2rem; font-style: italic; color: var(--card);
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.sp-title h2 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.sp-title .sci { font-style: italic; color: var(--ink-55); margin: 0.15rem 0 0; }
.outlinks { margin-top: 0.5rem; font-size: 0.9rem; display: flex; gap: 0.9rem; }

.gap-note {
  font-style: italic; color: var(--ink-55); font-size: 0.92rem;
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 0.6rem 0.9rem; margin: 0.8rem 0;
}

/* ---------- footer ---------- */

footer {
  margin-top: 3.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--ink-55);
}
footer p { margin: 0.35rem 0; }

.loading, .noscript { text-align: center; font-style: italic; color: var(--ink-55); }

.error-card {
  background: var(--alert-bg); border: 1px solid var(--alert-line);
  color: var(--alert-ink); border-radius: 10px; padding: 1rem 1.2rem;
}

@media (max-width: 480px) {
  body { font-size: 1rem; padding-inline: 0.9rem; }
  .sp-head { gap: 0.9rem; }
  .illo { width: 84px; height: 84px; }
  .rc-conf { display: none; }
}