/* ==========================================================================
   Catch Signal: rules and outlook pages (public/css/pages-rules.css)

   Loaded after base.css and pages.css by /fishing-rules and /whats-biting
   (scripts/seo/pages/rules.mjs, whats-biting.mjs). Mobile first; no nesting,
   no container queries (Safari 15.4 floor, test/ui-compat.test.mjs). Wide
   tables scroll inside .table-wrap (pages.css), so the page never scrolls
   sideways at 375 px.

   Contents
     1. Size and possession table
     2. Closed-season calendar (text in every closed cell: never colour alone)
     3. Crab and species cards
     4. Green zone list, notes
     5. What's biting: how-to lines, keep-or-release rules, chips, area table
     6. Phones: sticky species column, sideways cards
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Size and possession table
   -------------------------------------------------------------------------- */
.prose table.rules-table { font-size: var(--fs-sm); }
.prose table.rules-table tbody th[scope="row"] { min-width: 9rem; font-weight: 600; }
.prose table.rules-table td:last-child { min-width: 18rem; color: var(--muted); }
.prose table.rules-table tbody tr:target > * { background: var(--band); }


/* --------------------------------------------------------------------------
   2. Closed-season calendar
   -------------------------------------------------------------------------- */
.prose table.cal { font-size: var(--fs-sm); }
.prose table.cal tbody th[scope="row"] { min-width: 9rem; }
.prose table.cal .cal-month { min-width: 2.75rem; padding-left: var(--space-1); padding-right: var(--space-1); text-align: center; white-space: nowrap; }
.prose table.cal td.cal-closed { background: var(--warn-bg); color: var(--ink); font-weight: 600; }
.prose table.cal td.cal-part { background: var(--caution-bg); color: var(--ink); font-family: var(--font-data); }


/* --------------------------------------------------------------------------
   3. Crab and species cards (pages.css .cards / .card)
   -------------------------------------------------------------------------- */
.prose .card p { margin: 0; font-size: var(--fs-sm); }
.prose .card .card-title { margin: 0; }
.prose .card .card-title a { color: inherit; }
.prose .card .card-title a:hover { color: var(--accent); }
.prose .card picture { display: block; }
.prose .card .card-meta a { color: var(--accent); }
.crab-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.photo-note { font-size: var(--fs-sm); color: var(--muted); }


/* --------------------------------------------------------------------------
   4. Green zone list, notes
   -------------------------------------------------------------------------- */
.zone-list { padding-left: 0; list-style: none; }
.zone-list .zone-id { display: inline-block; min-width: 3.4rem; font-family: var(--font-data); color: var(--muted); }
.checked-note { font-size: var(--fs-sm); color: var(--muted); }
.checked-note a { color: var(--accent); }


/* --------------------------------------------------------------------------
   5. What's biting
   -------------------------------------------------------------------------- */
.biting-cards { margin-top: var(--space-3); }
.prose .biting-cards .howto { color: var(--ink); }
.prose .biting-cards .card-meta { margin-top: auto; }
.prose .card-meta .key-rule { font-weight: 600; color: var(--ink); }
.prose .biting-cards .card-meta a { white-space: nowrap; }
.around-chips { margin-top: var(--space-3); }
.prose table.area-table { font-size: var(--fs-sm); }
.prose table.area-table tbody th[scope="row"] { min-width: 8rem; }
.prose table.area-table td { min-width: 7rem; }
.prose table.area-table a, .prose table.rules-table th a, .prose table.cal th a { overflow-wrap: normal; }
/* An area's spots pages, one per line under its name (first row of each area only) */
.prose table.area-table .area-hubs { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); font-weight: 400; }
.prose table.area-table .area-hubs a { display: block; color: var(--accent); }
.prose table.area-table .area-hubs a + a { margin-top: var(--space-1); }
.closure-list strong { font-weight: 600; }


/* --------------------------------------------------------------------------
   6. Phones
   -------------------------------------------------------------------------- */
@media (max-width: 37.5rem) {
  /* The size table and the calendar scroll sideways inside their box: the species names stay in view (opaque cells,
     so nothing shows through) and headers may wrap, so the name, minimum size, possession limit and maximum fit a
     412 px phone. Details is WIDER here than its 18rem floor: a narrower column only makes every row taller (at
     15rem the page grew past 16,000 px), and with the names pinned, scrolling sideways to read it is cheap. */
  .prose table.rules-table thead th:first-child,
  .prose table.rules-table tbody th[scope="row"],
  .prose table.cal thead th:first-child,
  .prose table.cal tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 7.5rem; min-width: 0; box-shadow: inset -1px 0 0 var(--line); }
  .prose table.rules-table tbody th[scope="row"],
  .prose table.cal tbody th[scope="row"] { background: var(--surface); }
  .prose table.rules-table thead th:first-child,
  .prose table.cal thead th:first-child { background: var(--sunken); }
  .prose table.rules-table tbody tr:target > th[scope="row"] { background: linear-gradient(var(--band), var(--band)), var(--surface); }
  .prose table.rules-table thead th { white-space: normal; }
  .prose table.rules-table td:last-child { min-width: 20rem; }
  .prose table.rules-table td:nth-child(5) { min-width: 7.5rem; }

  /* Species cards turn sideways (thumbnail left, text right) so 15-20 cards don't each fill a screen */
  .biting-cards { grid-template-columns: 1fr; }
  .biting-cards .card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); align-content: start; }
  .biting-cards .card > picture { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .biting-cards .card > :not(picture) { grid-column: 2; }
  .prose .biting-cards .card-meta { margin-top: 0; }
}

@media print {
  .prose table.cal td.cal-closed, .prose table.cal td.cal-part { background: none; }
}