/* ==========================================================================
   Catch Signal: generated content pages (public/css/pages.css)

   Loaded after base.css by every page scripts/build-pages.mjs writes (species,
   tides, spots, rules, about ...). Page types may add ONE stylesheet of their
   own (pages-<type>.css). Mobile first; no nesting, no container queries
   (Safari 15.4 floor, test/ui-compat.test.mjs).

   Page skeleton (scripts/seo/layout.mjs):
     <main id="main" class="frame site-main">
       <nav class="breadcrumb" aria-label="Breadcrumb"><ol><li><a>…</a></li>…</ol></nav>
       <article class="prose doc [wide]">
         <header class="page-head"><h1>…</h1><p class="lead">…</p><p class="updated">…</p></header>
         …sections…
       </article>
     </main>

   Contents
     1. Breadcrumb, page head, "Updated" line
     2. Wide pages
     3. Tables (captions, key facts, numbers, today's row)
     4. Figures and image cards
     5. Link lists, chips and notes
     6. Live islands (reserved height)
     7. Print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Breadcrumb, page head, "Updated" line
   -------------------------------------------------------------------------- */
.breadcrumb { margin-bottom: var(--space-4); font-size: var(--fs-sm); color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { min-width: 0; }
.breadcrumb li + li::before { content: "\203A"; margin: 0 var(--space-2); color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

.doc .page-head { gap: var(--space-2); margin-bottom: var(--space-6); }
.doc .page-head h1 { margin-bottom: var(--space-1); }
.subline { color: var(--muted); font-size: var(--fs-sm); }
.updated { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .02em; }
.updated time { font-family: var(--font-data); }

/* Section headings in long pages: a little more air than legal pages */
.doc > section > h2 + p, .doc > section > h2 + .table-wrap { margin-top: var(--space-3); }
.doc h2 { scroll-margin-top: calc(var(--header-h) + var(--space-3)); }


/* --------------------------------------------------------------------------
   2. Wide pages (big tables): the article spans the frame, text keeps its measure
   -------------------------------------------------------------------------- */
.prose.wide { max-width: none; }
.prose.wide > :is(p, ul, ol, dl, blockquote, .callout),
.prose.wide section > :is(p, ul, ol, dl, blockquote, h2, h3, .callout),
.prose.wide .page-head { max-width: var(--measure); }


/* --------------------------------------------------------------------------
   3. Tables. base.css styles .prose th/td and the scrolling .table-wrap.
   scripts/seo/html.mjs table() writes
     <p class="table-title" id="…" aria-hidden="true">Title</p>
     <div class="table-wrap titled" tabindex="0" role="region" aria-labelledby="…"><table><caption>Title</caption>…
   The visible title sits above the box, so on a phone it wraps to the screen instead of running as wide as the
   table (a caption is as wide as its table, and clipped with it). The caption stays for screen readers, hidden
   in place (no position change, so it is still the table's caption box). The box is focusable so keyboard users
   can scroll it; hand-built boxes use html.scrollRegionAttrs() and keep a visible caption (no .titled).
   -------------------------------------------------------------------------- */
.table-wrap { -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 2px; }
.prose caption {
  padding: var(--space-3) var(--space-3) var(--space-2);
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: var(--ink);
}
.prose .table-title { font-weight: 600; color: var(--ink); }
.prose .table-title + .table-wrap { margin-top: var(--space-2); }
.table-wrap.titled > table > caption { height: 1px; margin-bottom: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.prose thead th { white-space: nowrap; }
.prose tbody th[scope="row"] { background: transparent; }
.prose td.num, .prose th.num { text-align: right; white-space: nowrap; }
.prose td.num { font-family: var(--font-data); }
.prose .nowrap { white-space: nowrap; }

/* Key facts: label column, value column */
.prose table.facts tbody th[scope="row"] { width: 36%; min-width: 8rem; background: var(--sunken); }

/* A highlighted row (today, the current month): set by an island or baked */
.prose tr.is-today > * { background: var(--band); }
.prose tr.is-today > :first-child { box-shadow: inset 3px 0 0 var(--marker); }

.table-note { font-size: var(--fs-sm); color: var(--muted); }

/* Phones: a table wider than the screen scrolls sideways inside its box, and its row names (the first column) stay
   in view, opaque so nothing shows through. Page stylesheets may size the column (pages-rules.css, pages-species.css). */
@media (max-width: 37.5rem) {
  .table-wrap > table > tbody > tr > th[scope="row"],
  .table-wrap > table > thead > tr > th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--line); }
  .table-wrap > table > tbody > tr > th[scope="row"] { background: var(--surface); }
  .table-wrap > table > thead > tr > th:first-child { background: var(--sunken); }
  .table-wrap > table > tbody > tr.is-today > th[scope="row"] {
    background: linear-gradient(var(--band), var(--band)), var(--surface);
    box-shadow: inset 3px 0 0 var(--marker), inset -1px 0 0 var(--line);
  }
}


/* --------------------------------------------------------------------------
   4. Figures and image cards
   -------------------------------------------------------------------------- */
.doc figure { margin: 0; }
.doc figure img,
.doc picture img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--sunken); }
.doc figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--muted); }

/* A grid of cards, e.g. species thumbnails or areas; each card is one link */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.prose .cards li + li { margin-top: 0; }
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
a.card:hover { border-color: var(--accent); }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); background: var(--sunken); }
.card-title { font: 700 var(--fs-md)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.card-meta { font-size: var(--fs-sm); color: var(--muted); }

/* Dark theme: species photos shot on white would glare as bright rectangles on the dark cards; dim them a little.
   Twice, like base.css's tokens: once for the system setting, once for an explicit data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .doc picture img,
  :root:not([data-theme="light"]) .card img,
  :root:not([data-theme="light"]) .species-thumb img { filter: brightness(.88); }
}
:root[data-theme="dark"] .doc picture img,
:root[data-theme="dark"] .card img,
:root[data-theme="dark"] .species-thumb img { filter: brightness(.88); }


/* --------------------------------------------------------------------------
   5. Link lists, chips and notes
   -------------------------------------------------------------------------- */
.link-list { columns: 2 13rem; column-gap: var(--space-6); }
.link-list li { break-inside: avoid; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.prose .chips li + li { margin-top: 0; }
.chip {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-sm);
}

.sources { font-size: var(--fs-sm); color: var(--muted); }
.sources a { color: var(--accent); }


/* --------------------------------------------------------------------------
   6. Live islands: the box is in the HTML with a no-JS fallback (usually a link
   into the app) and keeps its height when the script fills it, so nothing below
   it moves (CLS). Islands are data-nosnippet; see scripts/seo/html.mjs island().
   -------------------------------------------------------------------------- */
.live {
  min-height: 5.5rem;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}
.live > * + * { margin-top: var(--space-2); }
.live[data-size="lg"] { min-height: 12rem; }
.live .attribution { font-size: var(--fs-xs); color: var(--muted); }
.live .attribution a { color: inherit; }


/* --------------------------------------------------------------------------
   7. Print: content only, tables unclipped
   -------------------------------------------------------------------------- */
@media print {
  .breadcrumb, .live { display: none; }
  .table-wrap { overflow: visible; border: 0; }
  .prose.wide { max-width: none; }
  .card { break-inside: avoid; }
  .prose tr.is-today > * { background: none; }
  :root:not([data-theme="light"]) .doc picture img, :root:not([data-theme="light"]) .card img, :root:not([data-theme="light"]) .species-thumb img,
  :root[data-theme="dark"] .doc picture img, :root[data-theme="dark"] .card img, :root[data-theme="dark"] .species-thumb img { filter: none; }
}