/*
 * Whale watching season calendar (PRD F4, design surface #s5) — app/views/whale_watching/
 * season_calendar.html.erb. Propshaft auto-bundles every file in this directory alongside
 * application.css and basalt_components.css, so the shared tokens (--spark, --well, --border,
 * --font-mono...) are already in scope here.
 */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- Resident/passage/rare tag --- */
.tag {
  display: inline-block; font: 500 9px/1 var(--font-mono); letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 4px; padding: 2px 5px; margin-left: 6px;
}
.tag--resident { color: var(--spark); border: 1px solid var(--spark-border); }
.tag--passage { color: #8a5f14; border: 1px solid oklch(0.82 0.09 80 / 0.55); }
.tag--rare { color: var(--muted-2); border: 1px solid var(--border-input); }

/* -------------------------------------------------------------------- Desktop matrix --- */
.whale-matrix { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.whale-matrix th, .whale-matrix td { border-left: 1px solid var(--ink); }
.whale-matrix thead th {
  background: var(--surface); font: 600 9.5px/1 var(--font-mono); color: var(--muted-2);
  text-align: center; padding: 10px 6px; white-space: nowrap; border-bottom: 1px solid var(--border);
}
.whale-matrix thead th:first-child { text-align: left; padding-left: 15px; text-transform: uppercase; letter-spacing: 0.1em; }
.whale-matrix thead th.is-current { background: var(--well); color: var(--bone-bright); }

.whale-matrix tbody th {
  text-align: left; font-weight: 400; padding: 11px 15px; white-space: nowrap;
  border-bottom: 1px solid var(--border-soft); background: var(--card);
}
.whale-matrix tbody th span:first-child { font: 600 12.5px var(--font-sans); color: var(--bone-bright); }

.whale-matrix tbody td {
  text-align: center; font: 600 11px var(--font-mono); padding: 11px 4px;
  border-bottom: 1px solid var(--border-soft); min-width: 42px;
}
.whale-matrix tbody td.is-current { box-shadow: inset 0 0 0 2px var(--bone-bright); }

/* Text color follows the tint depth so the number stays legible at every level — this, not the
   colour alone, is what makes the table readable colour-blind and legible in print. */
.whale-matrix tbody td[data-level="0"] { color: var(--muted-2); }
.whale-matrix tbody td[data-level="1"],
.whale-matrix tbody td[data-level="2"] { color: var(--bone); }
.whale-matrix tbody td[data-level="3"],
.whale-matrix tbody td[data-level="4"] { color: #0e2a1c; }
.whale-matrix tbody td[data-level="5"],
.whale-matrix tbody td[data-level="6"] { color: #eaf7f0; }

/* ------------------------------------------------------------------- Mobile ranked list --- */
.month-chip-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.month-chip {
  flex: none; font: 600 11px var(--font-mono); border: 1px solid var(--border-input);
  border-radius: 999px; padding: 8px 12px; color: var(--muted);
}
.month-chip.is-current { background: var(--bone-bright); color: var(--ink); border-color: var(--bone-bright); }

.whale-rank-row { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-bottom: 1px solid var(--border); }
.whale-rank-row:last-child { border-bottom: 0; }
.whale-rank-badge {
  flex: none; width: 44px; height: 26px; border-radius: 4px; text-align: center;
  font: 600 11px/26px var(--font-mono);
}
.whale-rank-badge[data-level="0"] { color: var(--muted-2); }
.whale-rank-badge[data-level="1"], .whale-rank-badge[data-level="2"] { color: var(--bone); }
.whale-rank-badge[data-level="3"], .whale-rank-badge[data-level="4"] { color: #0e2a1c; }
.whale-rank-badge[data-level="5"], .whale-rank-badge[data-level="6"] { color: #eaf7f0; }

@media (max-width: 640px) {
  .month-chip-row { margin-inline: -20px; padding-inline: 20px; }
  .whale-rank-row { padding: 12px; }
}

/* ---------------------------------------------------------- Desktop/mobile CSS swap --- */
/* Static per page load either way (no JS): the mobile view always renders the CURRENT month's
   ranked list, since there's nothing client-side to re-render a different one. */
.matrix-mobile { display: block; }
.matrix-desktop { display: none; }
@media (min-width: 860px) {
  .matrix-desktop { display: block; }
  .matrix-mobile { display: none; }
}