:root {
  /* =========================================================
     HANOVER AQUATICS BRAND
     ========================================================= */

  --brand-primary: #111111;
  --brand-primary-dark: #050505;

  --brand-accent: #ff5a00;
  --brand-accent-dark: #c94400;
  --brand-accent-soft: rgba(255, 90, 0, .14);

  --page-bg: #0b0d10;
  --page-bg-2: #1c2025;

  --surface: #15191e;
  --surface-raised: #1d2228;

  --card: #ffffff;
  --card-alt: #f6f7f8;

  --text-light: #ffffff;
  --text-dark: #15171a;
  --text-muted: #737b84;
  --text-muted-light: #b8bec5;

  --border-dark: rgba(255,255,255,.10);
  --border-light: #e1e4e7;

  --shadow-lg:
    0 16px 38px rgba(0,0,0,.30);

  --shadow-md:
    0 8px 22px rgba(0,0,0,.22);

  --radius-lg: 18px;
  --radius-md: 11px;
  --radius-sm: 8px;

  --content-width: 1500px;
}


/* =========================================================
   RESET / BASE
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;

  min-height: 100%;
}

html {
  background: var(--page-bg);
}

body {
  margin: 0;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

  background:
    radial-gradient(
      circle at top,
      var(--page-bg-2) 0%,
      var(--page-bg) 70%
    );

  color: var(--text-light);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrapper {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}


/* =========================================================
   HEADER
   ========================================================= */

.header {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 28px;

  width: 100%;

  padding:
    24px
    24px;

  background:
    linear-gradient(
      180deg,
      #17191c 0%,
      var(--brand-primary-dark) 100%
    );

  border-bottom:
    5px solid var(--brand-accent);

  box-shadow:
    0 7px 18px rgba(0,0,0,.24);
}

.club-logo {
  display: block !important;

  width: auto;
  height: auto;

  max-width: 270px;
  max-height: 115px;

  flex: 0 0 auto;

  object-fit: contain;
}

.header-copy {
  min-width: 0;
}

.club-eyebrow {
  margin:
    0
    0
    5px;

  color: var(--brand-accent);

  font-size: .82rem;
  font-weight: 900;

  letter-spacing: .18em;

  text-transform: uppercase;
}

.header h1 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(2rem, 3.4vw, 3.35rem);

  line-height: 1.02;

  font-weight: 950;

  letter-spacing: .025em;

  text-transform: uppercase;

  text-shadow:
    2px 3px 8px rgba(0,0,0,.45);
}


/* =========================================================
   PRIMARY NAVIGATION
   ========================================================= */

.record-links,
.site-nav {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

  width: 100%;

  margin:
    18px
    auto
    2px;

  padding:
    0
    14px;
}

.record-links a,
.site-nav a {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 46px;

  padding:
    10px
    20px;

  border:
    2px solid var(--brand-accent);

  border-radius:
    var(--radius-sm);

  background:
    #14171a;

  color:
    #ffffff;

  font-size:
    .92rem;

  font-weight:
    850;

  letter-spacing:
    .015em;

  text-decoration: none;

  box-shadow:
    0 4px 10px rgba(0,0,0,.22);

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.record-links a.active,
.site-nav a.active {
  background:
    var(--brand-accent);

  border-color:
    var(--brand-accent);

  color:
    #ffffff;
}

@media (hover: hover) and (pointer: fine) {

  .record-links a:hover,
  .site-nav a:hover {
    background:
      var(--brand-accent);

    border-color:
      var(--brand-accent);

    transform:
      translateY(-1px);

    box-shadow:
      0 6px 14px rgba(0,0,0,.28);
  }
}

.record-links a:focus-visible,
.site-nav a:focus-visible {
  outline:
    3px solid #ffffff;

  outline-offset:
    3px;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.content {
  flex: 1;

  width: 100%;

  padding:
    22px
    18px
    34px;
}

.content-inner {
  width:
    min(var(--content-width), 100%);

  margin:
    0 auto;
}


/* =========================================================
   FILTER PANEL
   ========================================================= */

.filter-panel {
  margin-bottom:
    26px;

  padding:
    24px;

  border:
    1px solid var(--border-dark);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    );

  box-shadow:
    var(--shadow-md);
}

.filter-panel-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom:
    20px;
}

.section-kicker {
  margin:
    0
    0
    4px;

  color:
    var(--brand-accent);

  font-size:
    .72rem;

  font-weight:
    900;

  letter-spacing:
    .16em;

  text-transform:
    uppercase;
}

.filter-title {
  margin: 0;

  color:
    #ffffff;

  font-size:
    clamp(1.35rem, 2vw, 1.8rem);

  line-height:
    1.1;

  font-weight:
    900;
}


/* =========================================================
   FILTER GRID — DESKTOP
   ========================================================= */

#filter-form {
  width: 100%;
  margin: 0;
}

#filter-form .form-row {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 16px;

  align-items: end;

  width: 100%;
}

#filter-form .form-group {
  display: flex;

  flex-direction: column;

  min-width: 0;
}

#filter-form .form-group label {
  margin-bottom:
    7px;

  color:
    #ffffff;

  font-size:
    .9rem;

  font-weight:
    800;

  letter-spacing:
    .02em;
}

#filter-form select {
  display: block;

  width: 100%;
  min-width: 0;

  height: 52px;

  padding:
    0
    42px
    0
    14px;

  border:
    2px solid transparent;

  border-radius:
    var(--radius-sm);

  background:
    #ffffff;

  color:
    #17191c;

  font-family:
    inherit;

  font-size:
    1rem;

  font-weight:
    650;

  cursor:
    pointer;

  box-shadow:
    0 3px 9px rgba(0,0,0,.16);

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

#filter-form select:hover {
  border-color:
    var(--brand-accent);
}

#filter-form select:focus {
  outline:
    none;

  border-color:
    var(--brand-accent);

  box-shadow:
    0 0 0 3px var(--brand-accent-soft);
}


/* =========================================================
   RESULTS SECTION
   ========================================================= */

.results-section {
  overflow: hidden;

  border:
    1px solid var(--border-dark);

  border-radius:
    var(--radius-lg);

  background:
    var(--surface);

  box-shadow:
    var(--shadow-lg);
}

.results-heading {
  padding:
    20px
    22px
    18px;

  text-align:
    center;

  background:
    linear-gradient(
      180deg,
      #181b1f,
      #111316
    );

  border-bottom:
    4px solid var(--brand-accent);
}

.results-heading .section-kicker {
  margin-bottom:
    5px;
}

#results-title,
.results-heading h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(1.55rem, 2.3vw, 2.15rem);

  line-height:
    1;

  font-weight:
    950;

  letter-spacing:
    .025em;
}

#results-subtitle {
  min-height:
    1.35em;

  margin:
    8px
    0
    0;

  color:
    var(--text-muted-light);

  font-size:
    .9rem;

  font-weight:
    700;

  letter-spacing:
    .02em;
}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.table-wrap {
  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   DESKTOP RESULTS TABLE
   ========================================================= */

.results-table,
table {
  width: 100%;

  border-collapse: collapse;

  background:
    var(--card);

  color:
    var(--text-dark);
}

.results-table thead,
table thead {
  background:
    #0f1113;
}

.results-table thead th,
table thead th {
  padding:
    15px
    15px;

  background:
    #111315;

  color:
    #ffffff;

  border-bottom:
    4px solid var(--brand-accent);

  font-size:
    .82rem;

  font-weight:
    900;

  letter-spacing:
    .055em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}

.rank-column {
  width: 85px;
}

.time-column {
  width: 145px;
}

.date-column {
  width: 145px;
}

.meet-column {
  width: 34%;
}

.results-table tbody td,
table tbody td {
  padding:
    15px
    15px;

  border-bottom:
    1px solid var(--border-light);

  vertical-align:
    middle;

  font-size:
    .96rem;
}

.results-table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
  background:
    var(--card-alt);
}

.results-table tbody tr:last-child td,
table tbody tr:last-child td {
  border-bottom:
    0;
}

.results-table tbody td:first-child,
table tbody td:first-child {
  color:
    var(--brand-accent-dark);

  font-weight:
    900;
}

.results-table tbody td:nth-child(2),
table tbody td:nth-child(2) {
  font-weight:
    800;
}

.results-table tbody td:nth-child(3),
table tbody td:nth-child(3) {
  color:
    #111111;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}

.results-table tbody td:nth-child(4),
table tbody td:nth-child(4) {
  color:
    #59616a;

  white-space:
    nowrap;
}

.results-table tbody td:nth-child(5),
table tbody td:nth-child(5) {
  color:
    #40474e;
}

@media (hover: hover) and (pointer: fine) {

  .results-table tbody tr:hover,
  table tbody tr:hover {
    background:
      #fff4ed;
  }
}


/* =========================================================
   ROW REVEAL
   ========================================================= */

#results-table tr {
  opacity:
    0;

  transform:
    translateY(5px);

  transition:
    opacity .16s ease,
    transform .16s ease;
}

#results-table tr.show {
  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================================
   STATUS
   ========================================================= */

.table-status,
.status-message {
  padding:
    28px
    16px;

  color:
    var(--text-muted);

  font-weight:
    700;

  text-align:
    center;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  margin-top:
    auto;

  padding:
    17px
    18px;

  background:
    var(--brand-primary-dark);

  border-top:
    4px solid var(--brand-accent);

  color:
    #ffffff;
}

.footer-inner {
  display: flex;

  flex-wrap: wrap;

  align-items: center;
  justify-content: center;

  gap: 8px;

  font-size:
    .88rem;
}

.footer-inner strong {
  font-weight:
    900;
}

.footer-divider {
  color:
    var(--brand-accent);
}


/* =========================================================
   TABLET
   701px – 1000px
   ========================================================= */

@media (max-width: 1000px) {

  .header {
    gap:
      20px;

    padding:
      20px
      18px;
  }

  .club-logo {
    max-width:
      220px;

    max-height:
      92px;
  }

  .header h1 {
    font-size:
      clamp(1.7rem, 4.3vw, 2.65rem);
  }

  .content {
    padding:
      18px
      12px
      28px;
  }

  .filter-panel {
    padding:
      20px;
  }

  #filter-form .form-row {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      14px;
  }

  .results-table thead th,
  table thead th {
    padding:
      13px
      10px;

    font-size:
      .76rem;
  }

  .results-table tbody td,
  table tbody td {
    padding:
      13px
      10px;

    font-size:
      .9rem;
  }

  .rank-column {
    width:
      68px;
  }

  .time-column {
    width:
      120px;
  }

  .date-column {
    width:
      125px;
  }
}


/* =========================================================
   SMALL TABLET / LARGE PHONE
   <= 700px

   TOP 10 SWITCHES FROM TABLE TO CARDS
   ========================================================= */

@media (max-width: 700px) {

  body {
    background:
      var(--page-bg);
  }


  /* ---------------------------------------------------------
     HEADER
     --------------------------------------------------------- */

  .header {
    flex-direction:
      column;

    gap:
      12px;

    padding:
      18px
      14px
      16px;

    text-align:
      center;
  }

  .club-logo {
    max-width:
      230px;

    max-height:
      86px;
  }

  .club-eyebrow {
    font-size:
      .68rem;

    letter-spacing:
      .15em;
  }

  .header h1 {
    font-size:
      clamp(1.55rem, 7vw, 2.1rem);

    line-height:
      1.05;
  }


  /* ---------------------------------------------------------
     NAVIGATION
     --------------------------------------------------------- */

  .record-links,
  .site-nav {
    display:
      grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      7px;

    margin:
      12px
      0
      0;

    padding:
      0
      8px;
  }

  .record-links a,
  .site-nav a {
    min-width:
      0;

    min-height:
      44px;

    padding:
      8px
      5px;

    font-size:
      .75rem;

    text-align:
      center;
  }


  /* ---------------------------------------------------------
     CONTENT
     --------------------------------------------------------- */

  .content {
    padding:
      14px
      8px
      24px;
  }


  /* ---------------------------------------------------------
     FILTER PANEL
     --------------------------------------------------------- */

  .filter-panel {
    margin-bottom:
      16px;

    padding:
      17px
      14px;

    border-radius:
      13px;
  }

  .filter-panel-heading {
    margin-bottom:
      15px;
  }

  .filter-title {
    font-size:
      1.3rem;
  }

  #filter-form .form-row {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }

  #filter-form .form-group label {
    font-size:
      .86rem;
  }

  #filter-form select {
    height:
      50px;

    font-size:
      16px;
  }


  /* ---------------------------------------------------------
     RESULTS SHELL
     --------------------------------------------------------- */

  .results-section {
    overflow:
      visible;

    border:
      0;

    border-radius:
      0;

    background:
      transparent;

    box-shadow:
      none;
  }

  .results-heading {
    margin-bottom:
      12px;

    padding:
      17px
      12px;

    border:
      1px solid var(--border-dark);

    border-bottom:
      4px solid var(--brand-accent);

    border-radius:
      13px;

    background:
      linear-gradient(
        180deg,
        #191c20,
        #111315
      );
  }

  #results-title,
  .results-heading h2 {
    font-size:
      1.55rem;
  }

  #results-subtitle {
    font-size:
      .82rem;

    line-height:
      1.35;
  }


  /* ---------------------------------------------------------
     MOBILE CARD CONVERSION

     The desktop table remains semantic HTML,
     but rows display as cards.
     --------------------------------------------------------- */

  .table-wrap {
    overflow:
      visible;
  }

  .results-table,
  .results-table tbody,
  .results-table tr,
  .results-table td,
  table,
  table tbody,
  table tr,
  table td {
    width:
      100%;
  }

  .results-table,
  table {
    display:
      block;

    background:
      transparent;
  }

  .results-table thead,
  table thead {
    display:
      none;
  }

  .results-table tbody,
  table tbody {
    display:
      flex;

    flex-direction:
      column;

    gap:
      10px;
  }

  #results-table tr {
    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    grid-template-areas:
      "rank time"
      "name name"
      "date date"
      "meet meet";

    gap:
      5px
      12px;

    width:
      100%;

    padding:
      14px
      15px;

    border:
      1px solid var(--border-light);

    border-left:
      5px solid var(--brand-accent);

    border-radius:
      12px;

    background:
      #ffffff;

    box-shadow:
      0 5px 14px rgba(0,0,0,.20);
  }

  #results-table tr:nth-child(even) {
    background:
      #f8f8f8;
  }

  #results-table td {
    display:
      block;

    width:
      auto;

    padding:
      0;

    border:
      0;

    background:
      transparent;

    text-align:
      left;
  }


  /* Rank */

  #results-table td:nth-child(1) {
    grid-area:
      rank;

    align-self:
      center;

    color:
      var(--brand-accent-dark);

    font-size:
      .8rem;

    font-weight:
      900;

    letter-spacing:
      .055em;

    text-transform:
      uppercase;
  }

  #results-table td:nth-child(1)::before {
    content:
      "#";
  }


  /* Name */

  #results-table td:nth-child(2) {
    grid-area:
      name;

    margin-top:
      2px;

    color:
      #15171a;

    font-size:
      1.05rem;

    line-height:
      1.15;

    font-weight:
      900;
  }


  /* Time */

  #results-table td:nth-child(3) {
    grid-area:
      time;

    align-self:
      center;

    color:
      #111111;

    font-size:
      1.25rem;

    line-height:
      1;

    font-weight:
      950;

    text-align:
      right;

    font-variant-numeric:
      tabular-nums;
  }


  /* Date */

  #results-table td:nth-child(4) {
    grid-area:
      date;

    margin-top:
      4px;

    color:
      #6a7178;

    font-size:
      .79rem;

    font-weight:
      700;
  }


  /* Meet */

  #results-table td:nth-child(5) {
    grid-area:
      meet;

    color:
      #444a50;

    font-size:
      .84rem;

    line-height:
      1.3;

    font-weight:
      650;
  }


  /* Loading / status row */

  #results-table tr.loading-row {
    display:
      block;

    padding:
      22px
      14px;

    border-left:
      5px solid var(--brand-accent);
  }

  #results-table tr.loading-row td {
    width:
      100%;

    text-align:
      center;
  }

  #results-table tr.loading-row td::before {
    content:
      none;
  }
}


/* =========================================================
   PHONE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

  .header {
    padding-top:
      15px;
  }

  .club-logo {
    max-width:
      205px;

    max-height:
      76px;
  }

  .header h1 {
    font-size:
      1.5rem;
  }

  .record-links a,
  .site-nav a {
    padding:
      8px
      3px;

    font-size:
      .7rem;
  }

  .content {
    padding-left:
      6px;

    padding-right:
      6px;
  }

  .filter-panel {
    padding:
      15px
      11px;
  }

  .results-heading {
    padding:
      15px
      10px;
  }

  #results-table tr {
    padding:
      13px
      13px;

    gap:
      5px
      10px;
  }

  #results-table td:nth-child(2) {
    font-size:
      .98rem;
  }

  #results-table td:nth-child(3) {
    font-size:
      1.18rem;
  }

  #results-table td:nth-child(4) {
    font-size:
      .76rem;
  }

  #results-table td:nth-child(5) {
    font-size:
      .8rem;
  }
}


/* =========================================================
   VERY SMALL PHONE
   <= 360px
   ========================================================= */

@media (max-width: 360px) {

  .record-links,
  .site-nav {
    grid-template-columns:
      1fr;
  }

  .record-links a,
  .site-nav a {
    width:
      100%;

    font-size:
      .8rem;
  }

  .club-logo {
    max-width:
      185px;
  }

  .header h1 {
    font-size:
      1.35rem;
  }

  #results-table tr {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    padding:
      12px;
  }

  #results-table td:nth-child(3) {
    font-size:
      1.1rem;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

  body {
    background:
      #ffffff;

    color:
      #000000;
  }

  .record-links,
  .site-nav {
    display:
      none;
  }

  .header {
    background:
      #ffffff;

    border-bottom:
      2px solid #000000;

    box-shadow:
      none;
  }

  .club-eyebrow {
    color:
      #000000;
  }

  .header h1 {
    color:
      #000000;

    text-shadow:
      none;
  }

  .filter-panel {
    background:
      #ffffff;

    border:
      1px solid #cccccc;

    box-shadow:
      none;
  }

  .filter-panel label,
  .filter-title {
    color:
      #000000 !important;
  }

  .results-section {
    box-shadow:
      none;
  }

  footer {
    display:
      none;
  }
}