/* ── CSS Custom Properties ───────────────────────────────────────────────────
   All theme-sensitive values live here. Each --coot-* variable delegates to a
   Pico variable where one exists, so light/dark mode is automatic.
──────────────────────────────────────────────────────────────────────────── */
:root {
  --coot-accent:         var(--pico-primary,              #1a73e8);
  --coot-border:         var(--pico-muted-border-color,   #d8dee4);
  --coot-muted:          var(--pico-muted-color,          #848d97);
  --coot-bg:             var(--pico-background-color,     #fff);
  --coot-hover-bg:       var(--pico-secondary-background, #f0f4ff);
  --coot-selected-bg:    color-mix(in srgb, var(--coot-accent) 12%, transparent);
  --coot-selected-color: var(--coot-accent);
  --coot-row-alt-bg:     rgba(0, 0, 0, 0.025);
  --coot-shadow:         0 4px 16px rgba(0, 0, 0, 0.10);
  --coot-radius:         var(--pico-border-radius, 0.375rem);
  --coot-t:              0.13s ease;
  /* Width consumed by a col drag handle + its gap — used to align data cells
     with header content so both start at the same x within each column. */
  --coot-handle-offset:  calc(1.5rem + 0.25rem);
}

:root[data-theme="dark"] {
  --coot-row-alt-bg:   rgba(255, 255, 255, 0.04);
  --coot-shadow:       0 4px 16px rgba(0, 0, 0, 0.45);
  --coot-hover-bg:     rgba(255, 255, 255, 0.07);
  --coot-selected-bg:  color-mix(in srgb, var(--coot-accent) 22%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --coot-row-alt-bg:   rgba(255, 255, 255, 0.04);
    --coot-shadow:       0 4px 16px rgba(0, 0, 0, 0.45);
    --coot-hover-bg:     rgba(255, 255, 255, 0.07);
    --coot-selected-bg:  color-mix(in srgb, var(--coot-accent) 22%, transparent);
  }
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.container { max-width: 95vw; }

.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;
}

/* ── Translation grid ────────────────────────────────────────────────────── */
/*
  Column slots:   [drag 1.5rem] [source 1.2fr] [target × N 1fr] [action 40px]
  cols-N class on #grid controls the count. cols-2 = source + 1 target.
*/

#col-headers,
.translation-row {
  display: grid;
  column-gap: 0.75rem;
  align-items: stretch; /* cells fill row height; each uses flex to centre content */
  padding-block: 0.375rem;
}

#grid.cols-2 :is(#col-headers, .translation-row) { grid-template-columns: 1.5rem 3rem 1.5rem 1fr 1fr 40px; }
#grid.cols-3 :is(#col-headers, .translation-row) { grid-template-columns: 1.5rem 3rem 1.5rem 1fr 1fr 1fr 40px; }
#grid.cols-4 :is(#col-headers, .translation-row) { grid-template-columns: 1.5rem 3rem 1.5rem 1fr 1fr 1fr 1fr 40px; }
#grid.cols-5 :is(#col-headers, .translation-row) { grid-template-columns: 1.5rem 3rem 1.5rem 1fr 1fr 1fr 1fr 1fr 40px; }

/* Separator only below the header row; no borders between data rows. */
#col-headers {
  border-bottom: 2px solid var(--coot-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.125rem;
}

/* Alternating row backgrounds instead of separating borders. */
.translation-row:nth-child(even) {
  background: var(--coot-row-alt-bg);
  border-radius: var(--coot-radius);
}

/*
  Horizontal alignment: the drag handle inside .col-header-inner consumes
  --coot-handle-offset (1.5rem + 0.25rem gap) before the lang input.
  Entry rows align their search inputs with the lang inputs above.
  Completed rows add the input's internal padding so plain text aligns with
  the text inside the lang inputs (not just the input's left border).
*/
.translation-row .cell {
  padding-inline-start: var(--coot-handle-offset);
}

.translation-row:not(.entry-row) .cell {
  padding-inline-start: calc(var(--coot-handle-offset) + var(--pico-form-element-spacing-horizontal, 0.75rem));
}

/* Shrink entry-row target inputs to match the lang-selector above (which shares width with sort + delete btns) */
.entry-row .target-cell {
  padding-inline-end: calc(2 * (1.25rem + 0.25rem)); /* (sort-btn + delete-btn) × (width + gap) */
}

/* Column header: stretch to row height, then flex-centre the inner content */
.col-header {
  display: flex;
  align-items: center;
}

/* Column header inner layout: grip + lang-selector [+ delete button] */
.col-header-inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

/* ── Drag handles ────────────────────────────────────────────────────────── */

.drag-handle {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--coot-radius);
  color: var(--coot-muted);
  cursor: grab;
  opacity: 0.35;
  transition: opacity var(--coot-t), background var(--coot-t);
  touch-action: none;
}

.drag-handle:hover,
.drag-handle:focus-visible {
  opacity: 1;
  background: var(--coot-hover-bg);
  outline: none;
}

.drag-handle:active { cursor: grabbing; }

.sortable-ghost {
  opacity: 0.25;
  background: var(--coot-selected-bg);
  border-radius: var(--coot-radius);
}

.sortable-drag { cursor: grabbing !important; }

/* ── Language selector (combobox) ────────────────────────────────────────── */

.lang-selector {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Specificity 0-1-1 matches Pico's input:not([type=checkbox],[type=radio]) rule */
.lang-selector input.lang-input {
  width: 100%;
  margin-bottom: 0;
  font-size: 0.875rem;
}


/* Match count badge overlaid on the right side of a species search input */
.search-count {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: var(--coot-muted);
  pointer-events: none;
  white-space: nowrap;
}

/* Spinner shown inside the search input while a fetch is in-flight */
.species-search-wrapper.is-searching .search-count { visibility: hidden; }
.species-search-wrapper.is-searching::after {
  content: '';
  position: absolute;
  right: 0.55rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--pico-muted-border-color);
  border-top-color: var(--coot-accent);
  border-radius: 50%;
  transform: translateY(-50%) rotate(0deg);
  animation: coot-spin 0.65s linear infinite;
  pointer-events: none;
}
@keyframes coot-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ── Shared dropdown chrome (lang list + species suggestions) ────────────── */
/*
  Both dropdowns are position:absolute, so display:block is safe as a permanent
  state — they never affect layout when invisible. We use opacity + visibility
  for transitions instead of toggling display, overriding the UA [hidden] rule.
*/

.lang-options,
.suggestions {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 200;
  max-height: 22rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--coot-bg);
  border: 1px solid var(--coot-border);
  border-radius: var(--coot-radius);
  box-shadow: var(--coot-shadow);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity var(--coot-t), visibility var(--coot-t), transform var(--coot-t);
}

.lang-options[hidden],
.suggestions[hidden] { display: block !important; }

.lang-options:not([hidden]),
.suggestions:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.lang-options li,
.suggestions li {
  padding: 0.3rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--coot-t), color var(--coot-t);
}

.lang-options li:hover,
.lang-options li[aria-selected="true"],
.suggestions li:hover,
.suggestions li[aria-selected="true"] {
  background: var(--coot-selected-bg);
  color: var(--coot-selected-color);
}

.lang-options li small {
  font-size: 0.75rem;
  opacity: 0.6;
}

/* ── Species search autocomplete ─────────────────────────────────────────── */

.species-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Specificity 0-1-1 matches Pico's input:not([type=checkbox],[type=radio]) rule */
.species-search-wrapper input.species-input {
  width: 100%;
  margin-bottom: 0;
}

.suggestion-latin {
  display: block;
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.6;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--coot-t);
}

.suggestions li:hover .suggestion-latin,
.suggestions li[aria-selected="true"] .suggestion-latin { opacity: 0.85; }

/* ── Photo header cell — row counter ─────────────────────────────────────── */

.photo-header-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.875rem;
  color: var(--pico-muted-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 0.25rem;
}

.photo-header-cell.row-limit-reached {
  color: var(--pico-del-color);
  font-weight: 600;
}

/* ── Photo cell ──────────────────────────────────────────────────────────── */

.photo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Search info icon + tooltip ──────────────────────────────────────────── */

.search-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: default;
  color: var(--pico-muted-color);
  border-radius: 50%;
  transition: color var(--coot-t);
}

.search-info:hover,
.search-info:focus,
.search-info:focus-visible {
  color: var(--pico-primary);
  outline: none;
}

.search-info-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 200;
  width: max-content;
  padding: 0.55rem 0.75rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--coot-shadow);
  font-size: 0.8rem;
  white-space: nowrap;
  /* two-column grid: code | description — both auto so width hugs content */
  grid-template-columns: auto auto;
  gap: 0.15rem 0.6rem;
}

.search-info-tooltip strong {
  display: block;
  grid-column: 1 / -1;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pico-muted-color);
}

.search-info-tooltip code {
  font-size: 0.8rem;
  padding: 0;
  background: none;
  color: var(--pico-primary);
}

.search-info-tooltip span {
  color: var(--pico-color);
}

.search-info:hover .search-info-tooltip,
.search-info:focus .search-info-tooltip,
.search-info:focus-within .search-info-tooltip {
  display: grid;
}

/* ── Audio cell ──────────────────────────────────────────────────────────── */

.audio-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--coot-muted);
  transition: color var(--coot-t), transform var(--coot-t);
  text-decoration: none;
}

.audio-link:hover { color: var(--coot-accent); transform: scale(1.2); }

/* ── Species photo thumbnail ─────────────────────────────────────────────── */

/* Keyboard-accessible wrapper for the thumbnail — replaces bare <img> click */
.species-thumb-btn {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
}
.species-thumb-btn:focus-visible {
  outline: 3px solid var(--pico-primary);
  outline-offset: 3px;
}

.species-thumb {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 50%;
  transition: opacity var(--coot-t), transform var(--coot-t);
}

.species-thumb-btn:hover .species-thumb { opacity: 0.8; transform: scale(1.08); }

/* ── Photo overlay ───────────────────────────────────────────────────────── */

#photo-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#photo-overlay[hidden] { display: none; }

#overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 90vw;
}

#photo-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--coot-radius);
  box-shadow: var(--coot-shadow);
}

#overlay-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  transition: background var(--coot-t);
}
#overlay-close:hover  { background: rgba(255, 255, 255, 0.3); }
#overlay-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#overlay-source {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  word-break: break-all;
  text-align: center;
}
#overlay-source:hover       { color: #fff; text-decoration: underline; }
#overlay-source:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Photo placeholder (shown when no photo is available) ────────────────── */

.photo-placeholder {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  color: var(--coot-muted);
  opacity: 0.35;
}

/* ── Extinct / no-audio indicator ───────────────────────────────────────── */

.audio-extinct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--coot-muted);
  opacity: 0.4;
}

/* ── Translation cells ───────────────────────────────────────────────────── */

.cell {
  display: flex;
  align-items: center;
  padding-block: 0.4rem;
}

.target-cell {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.cell-link {
  color: inherit;
  text-decoration: none;
}

.cell-link:hover { text-decoration: underline; }

.target-cell:empty::after,
.source-cell:empty::after {
  content: "—";
  opacity: 0.25;
}

.cell-error {
  font-size: 0.8rem;
  color: var(--pico-del-color, #c0392b);
}

/* ── Copy-cell button ────────────────────────────────────────────────────── */

.copy-cell-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-inline-start: auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--coot-radius);
  color: var(--coot-muted);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--coot-t), color var(--coot-t), transform var(--coot-t);
}

.translation-row:hover .copy-cell-btn { opacity: 0.4; }
.copy-cell-btn:hover { opacity: 1 !important; color: var(--coot-accent); transform: scale(1); }

/* ── Sort buttons ────────────────────────────────────────────────────────── */

.sort-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--coot-muted);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--coot-t), color var(--coot-t), transform var(--coot-t);
}

.sort-btn:hover {
  opacity: 1;
  color: var(--coot-accent);
  transform: scale(1.2);
}

/* Active sort: always visible, accented */
.sort-btn--active {
  opacity: 1;
  color: var(--coot-accent);
}
.sort-btn--active:hover {
  transform: scale(1.2);
}

/* ── Delete buttons ──────────────────────────────────────────────────────── */

.delete-col-btn,
.delete-row-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--pico-del-color, #c0392b);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--coot-t), background var(--coot-t), color var(--coot-t);
}

/* Reveal on row/header hover; the button itself gets full opacity on its own hover. */
.col-header:hover .delete-col-btn,
.translation-row:hover .delete-row-btn { opacity: 0.5; }

.delete-col-btn:hover,
.delete-row-btn:hover {
  opacity: 1 !important;
  background: var(--pico-del-color, #c0392b);
  color: #fff;
}

/* ── Action cell ─────────────────────────────────────────────────────────── */

.action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

#add-col-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--coot-radius);
}

#add-col-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Grid toolbar (Copy / Share buttons) ────────────────────────────────── */

#grid-toolbar {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  /* Align with input fields: drag + gap + photo + gap + audio + gap + col-drag-handle-offset */
  padding-inline-start: calc(1.5rem + 0.75rem + 3rem + 0.75rem + 1.5rem + 0.75rem + var(--coot-handle-offset));
  margin-top: 0.75rem;
}

#clear-btn {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
  transition: background var(--coot-t), border-color var(--coot-t);
}

#clear-btn:hover { background: #a93226; border-color: #a93226; }

#random-btn {
  background: #27693c;   /* darkened for 6.1:1 contrast with white — was #2d8a4e (4.1:1, WCAG fail) */
  border-color: #27693c;
  color: #fff;
  transition: background var(--coot-t), border-color var(--coot-t);
}

#random-btn:hover { background: #1f5230; border-color: #1f5230; }

#share-btn {
  background: #b35508;   /* darkened for 4.8:1 contrast with white — was #d4660a (3.8:1, WCAG fail) */
  border-color: #b35508;
  color: #fff;
  transition: background var(--coot-t), border-color var(--coot-t);
}

#share-btn:hover { background: #904506; border-color: #904506; }

#grid-toolbar button {
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
}

/* ── Header / Footer ─────────────────────────────────────────────────────── */

header hgroup p { opacity: 0.65; }

.site-name {
  font-weight: 600;
  text-decoration: none;
}

footer {
  margin-top: 3rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--coot-border);
  font-size: 0.8rem;
  opacity: 0.6;
}

.footer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
}

.footer-nav a {
  text-decoration: none;
  color: inherit;
}

.footer-nav a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  main > .container { overflow-x: auto; }

  #grid.cols-2 :is(#col-headers, .translation-row) { grid-template-columns: 1.5rem 2.5rem 1.5rem minmax(130px, 1fr) minmax(130px, 1fr) 40px; }
  #grid.cols-3 :is(#col-headers, .translation-row) { grid-template-columns: 1.5rem 2.5rem 1.5rem minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 40px; }

  /* Collapse wider grids to source + 2 targets, hiding overflow columns */
  #grid.cols-4 :is(#col-headers, .translation-row),
  #grid.cols-5 :is(#col-headers, .translation-row) {
    grid-template-columns: 1.5rem 2.5rem 1.5rem minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 40px;
  }

  /* photo=2, audio=3, source=4, targets from 5 — hide from 7th onward */
  #grid.cols-4 #col-headers > :nth-child(n+7):not(.action-cell),
  #grid.cols-5 #col-headers > :nth-child(n+7):not(.action-cell) { display: none; }

  #grid.cols-4 .translation-row > :nth-child(n+7):not(.action-cell),
  #grid.cols-5 .translation-row > :nth-child(n+7):not(.action-cell) { display: none; }

  #col-headers,
  .translation-row { column-gap: 0.5rem; }

  .species-thumb { width: 2rem; height: 2rem; }
}

@media (max-width: 480px) {
  /* Hide all drag handles on small screens.
     Touch drag-to-reorder conflicts with page scroll and is impractical.
     Hiding the row-drag column (1.5rem) reclaims enough horizontal space
     for the 2-column grid to fit without horizontal scroll on a 375px phone. */
  .corner-cell,
  .row-drag { display: none; }

  .col-header .drag-handle { display: none; }

  /* Without col drag handles, data cells no longer need to indent to align. */
  #grid { --coot-handle-offset: 0; }

  #col-headers,
  .translation-row { column-gap: 0.4rem; }

  /* Templates with first (row-drag) column removed; minmax reduced to 110px.
     2 cols: fits ~350px on a 375px phone without horizontal scroll.
     3+ cols: still scrolls, which is acceptable. */
  #grid.cols-2 :is(#col-headers, .translation-row) {
    grid-template-columns: 2.5rem 1.5rem minmax(110px, 1fr) minmax(110px, 1fr) 40px;
  }
  #grid.cols-3 :is(#col-headers, .translation-row) {
    grid-template-columns: 2.5rem 1.5rem minmax(110px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr) 40px;
  }
  #grid.cols-4 :is(#col-headers, .translation-row),
  #grid.cols-5 :is(#col-headers, .translation-row) {
    grid-template-columns: 2.5rem 1.5rem minmax(110px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr) 40px;
  }
}

/* ── Coverage details disclosure (about page) ────────────────────────────── */
.coverage-details {
  margin-top: 0.75rem;
}
.coverage-details > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--pico-primary) !important;
  user-select: none;
  list-style: none;
  margin-bottom: 0;
}
.coverage-details > summary::-webkit-details-marker { display: none; }
.coverage-details > summary::marker { content: ''; }
.coverage-details[open] > summary {
  margin-bottom: 0.75rem;
}

/* ── Coverage table (about page) ─────────────────────────────────────────── */
.coverage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.coverage-table th,
.coverage-table td {
  padding: 0.3rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--pico-table-border-color, #e0e0e0);
}
.coverage-table th {
  font-weight: 600;
  white-space: nowrap;
}
.coverage-bar-cell {
  width: 100%;
  min-width: 80px;
  padding-right: 0.5rem;
}
.coverage-bar {
  height: 0.6rem;
  background: var(--pico-primary, #1a73e8);
  border-radius: 2px;
  min-width: 2px;
}
.coverage-pct {
  white-space: nowrap;
  text-align: right;
  color: var(--pico-muted-color, #666);
  font-variant-numeric: tabular-nums;
}

/* ── Font size steps ─────────────────────────────────────────────────────── */
/*
  Pico sets --pico-font-size responsively on :root (specificity 0,1,0) and
  applies it via :where(:root){ font-size:var(--pico-font-size) } (specificity
  0,0,0).  We mirror Pico's breakpoints as --coot-fs-base, then override
  --pico-font-size for non-default steps.  html[attr] specificity (0,1,1)
  beats :root (0,1,0), so our variable always wins.
  data-font-size="1" = default — no override.
*/
html { --coot-fs-base: 106.25%; }
@media (min-width: 768px)  { html { --coot-fs-base: 112.5%;  } }
@media (min-width: 1024px) { html { --coot-fs-base: 118.75%; } }
@media (min-width: 1280px) { html { --coot-fs-base: 125%;    } }
@media (min-width: 1536px) { html { --coot-fs-base: 131.25%; } }

html[data-font-size="0"] { --pico-font-size: calc(var(--coot-fs-base) * 0.875); }
html[data-font-size="2"] { --pico-font-size: calc(var(--coot-fs-base) * 1.125); }
html[data-font-size="3"] { --pico-font-size: calc(var(--coot-fs-base) * 1.25);  }

/* ── Theme controls (header) ─────────────────────────────────────────────── */
.header-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.header-main {
  align-self: flex-start;
  width: 100%;
  min-width: 0;
}

.theme-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Compact selects — no dropdown arrow, symmetric padding */
.theme-select {
  font-size: 0.75rem;
  padding: 0.2rem 0.45rem !important;
  height: auto;
  min-width: 0;
  margin-bottom: 0;
  border-radius: var(--coot-radius);
  background-color: var(--pico-form-element-background-color);
  background-image: none !important;
  color: var(--pico-form-element-color);
  border-color: var(--pico-form-element-border-color);
  cursor: pointer;
  transition: background-color var(--coot-t), color var(--coot-t), border-color var(--coot-t);
}

/* Icon wrapper: positions a small SVG over the left edge of a select */
.ctrl-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ctrl-icon-wrap > svg {
  position: absolute;
  left: 0.45rem;
  width: 0.85rem;
  height: 0.85rem;
  pointer-events: none;
  opacity: 0.65;
  flex-shrink: 0;
}
.ctrl-icon-wrap > .ctrl-with-icon {
  padding-left: 1.75rem !important;
}

/* Font-size and other small icon buttons in the control row */
.ctrl-btn {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.22rem 0.5rem;
  height: auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  border-radius: var(--coot-radius);
  background-color: var(--pico-form-element-background-color);
  color: var(--pico-form-element-color);
  border: 1px solid var(--pico-form-element-border-color);
  cursor: pointer;
  transition: background-color var(--coot-t), color var(--coot-t), border-color var(--coot-t);
}
.ctrl-btn:hover:not(:disabled) {
  background-color: var(--pico-primary-background, var(--pico-primary));
  color: var(--pico-primary-inverse, #fff);
  border-color: var(--pico-primary-background, var(--pico-primary));
}
.ctrl-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Skip navigation (WCAG 2.4.1) ───────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--pico-primary);
  color: var(--pico-primary-inverse, #fff);
  border-radius: 0 0 var(--coot-radius) var(--coot-radius);
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
  transition: none;
}
.skip-link:focus { top: 0; }

/* ── Focus visibility (WCAG 2.4.7) ─────────────────────────────────────── */
/* Pico handles form elements; reinforce for custom interactive elements */
.copy-cell-btn:focus-visible,
.delete-row-btn:focus-visible,
.delete-col-btn:focus-visible,
.audio-link:focus-visible,
.drag-handle:focus-visible {
  outline: 3px solid var(--pico-primary);
  outline-offset: 2px;
}

/* ── Hall of Fame table ──────────────────────────────────────────────────── */
.hof-table-wrap {
  overflow-x: auto;
}

.hof-table {
  width: 100%;
  border-collapse: collapse;
}

.hof-table th,
.hof-table td {
  padding: 0.4rem 0.75rem;
  vertical-align: middle;
}

.hof-table th.hof-rank,
.hof-table td.hof-rank {
  width: 3rem;
  text-align: right;
  color: var(--coot-muted);
  font-variant-numeric: tabular-nums;
}

.hof-table th.hof-views,
.hof-table td.hof-views {
  width: 6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--coot-muted);
}

.hof-table th.hof-latin,
.hof-table td.hof-latin {
  color: var(--coot-muted);
}

@media (max-width: 600px) {
  .hof-table th.hof-latin,
  .hof-table td.hof-latin {
    display: none;
  }
}

/* ── Contact form ────────────────────────────────────────────────────────── */

.contact-honeypot { display: none; }

.contact-form { max-width: 36rem; }
.contact-form label { display: block; margin-block-start: 1.25rem; font-weight: 500; }
.contact-form label:first-of-type { margin-block-start: 0; }
.contact-optional  { font-weight: 400; color: var(--coot-muted); font-size: 0.875em; }
.contact-required  { color: var(--coot-accent); }

.contact-submit-wrap { margin-block-start: 1.5rem; }
.contact-submit-hint {
  margin-block-start: 0.6rem;
  font-size: 0.875rem;
  color: var(--coot-muted);
}

.contact-thanks {
  font-size: 1.1rem;
  color: var(--coot-accent);
}

/* ── News ────────────────────────────────────────────────────────────────── */

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--coot-border);
}

.news-list li:last-child { border-bottom: none; }

.news-list-title { flex: 1; }

.news-list-date {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--coot-muted);
  font-variant-numeric: tabular-nums;
}

.news-article { max-width: 42rem; margin: 0 auto; }

.news-article-date {
  font-size: 0.9rem;
  color: var(--coot-muted);
}

.news-article-body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
}

.news-article-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--coot-border);
  font-size: 0.9rem;
}

/* ── Reduced motion (WCAG 2.3.3) ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --coot-t: 0s; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}