/* ============================================================================
   Shared layout — one type scale, three content widths, uniform cards and tables.

   Loaded LAST in <head> on every page except the live map (which has its own
   full-screen layout), so these rules adjust each page's own CSS without it
   needing to be rewritten. Before this, nine different content widths were in
   use (440, 480, 560, 700, 900 px ...), grids used a different minimum card
   size per page, and there was no step between "phone" and "everything else".

   The ideas:
   1. TYPE scales smoothly with the screen: condensed on a phone, larger and
      easier to read on a desktop. Every font size in the app is already in rem,
      so changing the root size scales the whole page together.
   2. WIDTHS: the whole site uses just two, both in rem so they grow with the type:
        wide     pages built from grids and galleries (home, Hall of Fame, Vote, photos)
        reading  everything else: text pages, forms, tables
      A page uses ONE of them for everything on it — every card, box and heading
      shares the same left and right edges, so nothing sits at its own width.
      A page picks one for its <main> with data-width="reading" (wide is the default).
   3. CARDS are the same width within a grid, in 1 column on a phone, 2 on a
      tablet and 3 on a desktop, with a short last row centered instead of
      stranded on the left. Small tiles (logos, thumbnails) run one more.
   4. TABLES use the .data-table style below, so every table looks and scales
      the same way.
   ========================================================================== */

:root {
  --w-wide: 64rem;
  --w-reading: 46rem;

  --gutter: clamp(0.9rem, 0.4rem + 2vw, 2rem);   /* space at the page edges */
  --gap: clamp(0.7rem, 0.5rem + 0.6vw, 1.1rem);  /* space between cards */
  --card-pad: clamp(1rem, 0.7rem + 1vw, 1.5rem); /* space inside cards */

  --cols: 1;        /* cards per row */
  --tile-cols: 2;   /* small tiles per row */
}
@media (min-width: 601px) { :root { --cols: 2; --tile-cols: 3; } }
@media (min-width: 960px) { :root { --cols: 3; --tile-cols: 4; } }

/* 1. Type scale. 93.75% = 15px (phones) up to 112.5% = 18px (large desktops),
      rising smoothly in between. Percentages (not px) so a visitor's own browser
      text-size setting is still respected. */
html { font-size: clamp(93.75%, 90.6% + 0.18vw, 112.5%); }

header h1 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); }

/* 2. Content widths ------------------------------------------------------- */
main {
  max-width: var(--w-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
main[data-width="reading"] { max-width: var(--w-reading); }

/* Boxes inside a page fill that page's width — they used to each pick their own narrower one,
   which is what made the home page and Hall of Fame look scattered on a desktop */
.info-section, .backfill-section, #winner-splash { max-width: none; }
.info-section, .backfill-section { padding: var(--card-pad); }

/* Home page: the countdown and the sign-up ticker share a row; the four info boxes share a 2 x 2 grid.
   Both stack to one column on a phone. A lone box (say the ticker hasn't loaded) centers instead. */
.hero-row { display: flex; flex-wrap: wrap; justify-content: center; gap: max(var(--gap), 0.9rem); margin: 0 0 1.75rem 0; }
.hero-row > * { flex: 1 1 20rem; max-width: 34rem; margin: 0 !important; }
.info-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 2.5rem; }
.info-grid > * { max-width: none; margin: 0 !important; }
@media (min-width: 960px) { .info-grid { grid-template-columns: 1fr 1fr; } }

/* Pages that put their content outside <main> (the Vote page) */
.gallery, h2.category-header {
  width: min(calc(var(--w-wide) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* The form pages: Enter Contest, Upload Dock Photo, Upload Sponsor Logo, Report an Issue */
.page-body > .card { max-width: calc(var(--w-reading) - 2 * var(--gutter)); padding: var(--card-pad); }   /* same content width as <main> on the other reading pages */

/* Home page cards on a phone: icon beside the text rather than stacked above it, so seven cards
   don't take seven screens of scrolling */
@media (max-width: 600px) {
  .card-grid .card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.85rem; align-items: start; padding: 0.9rem 1rem; }
  .card-grid .card .icon { grid-row: 1 / span 2; margin: 0; font-size: 1.6rem; line-height: 1.2; }
  .card-grid .card h2 { margin: 0 0 0.2rem 0; font-size: 1rem; }
}

/* If the last home card would sit alone on its row, it becomes a full-width banner (icon beside the text)
   instead of a stranded card. Tablet shows 2 across, desktop 3 across; a phone is one column already. */
@media (min-width: 601px) and (max-width: 959px) { .card-grid > .card:last-child:nth-child(2n + 1) { flex-basis: 100%; } }
@media (min-width: 960px) { .card-grid > .card:last-child:nth-child(3n + 1) { flex-basis: 100%; } }
@media (min-width: 601px) and (max-width: 959px) {
  .card-grid > .card:last-child:nth-child(2n + 1) { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
  .card-grid > .card:last-child:nth-child(2n + 1) .icon { grid-row: 1 / span 2; margin: 0; }
}
@media (min-width: 960px) {
  .card-grid > .card:last-child:nth-child(3n + 1) { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
  .card-grid > .card:last-child:nth-child(3n + 1) .icon { grid-row: 1 / span 2; margin: 0; }
}

/* The About / FAQ buttons under the home page cards: same width and gap as the grid above them */
.learn-more-row { max-width: none; padding-left: 0; padding-right: 0; gap: var(--gap); margin-top: var(--gap); }   /* it sits inside <main>, which already provides the margins */
.learn-more-card { padding: calc(var(--card-pad) * 0.8); }

/* 3. Cards: same width within a grid; a short last row stays centered ----- */
.card-grid, .winner-grid, .experiences-grid, .winner-splash-grid, .gallery,
.sponsor-grid, .tile-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* galleries and lists sit under left-aligned headings, so they start at the left */
  gap: var(--gap);
}
/* ...but the home page's cards sit under centered headings, so a short last row is centered too */
.card-grid, .winner-splash-grid { justify-content: center; }
.card-grid > *, .winner-grid > *, .experiences-grid > *, .winner-splash-grid > *, .gallery > * {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
}
.sponsor-grid > *, .tile-grid > * {
  flex: 0 0 calc((100% - (var(--tile-cols) - 1) * var(--gap)) / var(--tile-cols));
  min-width: 0;
}

/* 4. Tables ---------------------------------------------------------------
   <table class="data-table"> — first column is the label, the rest are numbers.
   Numbers are right-aligned and tabular so columns line up and scan quickly. */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: 0.7em 0.9em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--input-bg);
  border-bottom: 1px solid var(--input-border);
}
.data-table tbody td { border-top: 1px solid var(--input-border); }
.data-table tbody tr:first-child td { border-top: 0; }
.data-table tbody tr:nth-child(even) td { background: var(--input-bg); }
.data-table .num-col { width: 4.6rem; }   /* rem, not em: header and body cells use different font sizes */
@media (max-width: 600px) {
  .data-table th, .data-table td { padding: 0.5em 0.35em; }
  .data-table th:first-child, .data-table td:first-child { padding-left: 0.6em; }
  .data-table th:last-child, .data-table td:last-child { padding-right: 0.6em; }
  .data-table .num-col { width: 2.7rem; }
  .zone-cell .zone-name { font-size: 0.9rem; }
}

/* The numbered zone badge — same look as the numbered circles on the zone map */
.zone-num {
  flex-shrink: 0;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--pumpkin);
  color: #1a1a1a;
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #1a1a1a;
  box-sizing: content-box;
}
/* Each badge takes the color of its numbered circle on the zone map (assets/zone-map.png),
   so a boater can match a zone in the list to its colored area. Set with data-n="<map number>". */
.zone-num[data-n="1"], .zone-num[data-n="7"], .zone-num[data-n="8"], .zone-num[data-n="14"] { background: #98d8a0; }  /* green */
.zone-num[data-n="2"], .zone-num[data-n="9"], .zone-num[data-n="13"] { background: #f8f098; }                      /* yellow */
.zone-num[data-n="3"], .zone-num[data-n="10"] { background: #f08890; }                                            /* red/salmon */
.zone-num[data-n="4"], .zone-num[data-n="5"], .zone-num[data-n="11"] { background: #78d0f0; }                      /* blue */
.zone-num[data-n="6"], .zone-num[data-n="12"] { background: #f078c0; }                                            /* pink */

/* Page-specific adjustments that follow the same scale ---------------------- */

/* Spooker sign-up: the 14 zone checkboxes sit 2 across on a phone, 3 across on a desktop */
@media (min-width: 960px) { .zone-grid { grid-template-columns: repeat(3, 1fr); } }

/* Admin ------------------------------------------------------------------- */
#entries { max-width: var(--w-wide); }

/* A list of self-contained cards (docks, sign-ups, entries...) flows into columns on a wide screen
   and stays a single column on a phone, instead of one mostly-empty full-width card per row.
   Mark a list container with data-layout="cards" to opt in. */
[data-layout="cards"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--gap);
}
[data-layout="cards"] > * { margin: 0 !important; min-width: 0; }   /* the grid's gap does the spacing now */
.entry-card { align-items: flex-start; }   /* keeps a Remove button its own size instead of stretching to the card's height */

/* Hall of Fame: room between the discussion box and the first year's winners */
#winners-container { margin-top: 2.5rem; }

/* ---- Theme-aware text accents and native-control theming ------------------------
   The brand orange (#d9622b) is only 3-3.9:1 against either page background, so
   orange TEXT uses --pumpkin-text instead (darker in light mode, lighter in dark
   mode). Same idea for status colors. Set on body so the manual light/dark toggle
   (body.force-light / body.force-dark) wins over the system setting either way. */
body { --pumpkin-text: #ff8a4c; --ok: #81c784; --bad: #ef9a9a; --warn: #ffb27a; color-scheme: dark; }
@media (prefers-color-scheme: light) {
  body { --pumpkin-text: #a8430f; --ok: #1b6b2a; --bad: #b3261e; --warn: #9a4200; color-scheme: light; }
}
body.force-light { --pumpkin-text: #a8430f; --ok: #1b6b2a; --bad: #b3261e; --warn: #9a4200; color-scheme: light; }
body.force-dark  { --pumpkin-text: #ff8a4c; --ok: #81c784; --bad: #ef9a9a; --warn: #ffb27a; color-scheme: dark; }

/* Dropdown (<select>) menus: the open list takes the page's panel/text colors in both
   themes, instead of whatever the browser picks for a see-through select. */
select { background-color: var(--panel); color: var(--text); border: 1px solid var(--input-border); border-radius: 8px; }
select option, select optgroup { background-color: var(--panel); color: var(--text); }