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

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

  --brand-accent: #f58220;
  --brand-accent-dark: #c95f00;

  --page-bg: #08090b;
  --page-bg-2: #1d2024;

  --surface: #121518;
  --surface-raised: #1d2125;

  --placard: #ffffff;
  --placard-alt: #f4f4f4;

  --text-main: #ffffff;
  --text-dark: #15171a;
  --text-muted: #adb3b9;

  --border-soft: rgba(255, 255, 255, .12);

  --shadow:
    0 14px 34px rgba(0, 0, 0, .34);

  --radius-lg: 16px;

  /*
    Desktop board width.

    All major board components use this same width:
    - Header
    - Age-group headers
    - Record table
    - Legend/footer

    Narrower screens scroll horizontally rather than
    crushing the record placards.
  */

  --board-min-width: 1700px;
}


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

* {
  box-sizing: border-box;
}

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

  min-height: 100%;
}

body.record-board-page {
  font-family:
    Inter,
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

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

  color:
    var(--text-main);

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


/* =========================================================
   PAGE SHELL
   ========================================================= */

.record-page-shell {
  width:
    min(1800px, 100%);

  margin:
    0 auto;

  padding:
    18px
    12px
    32px;
}


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

.record-board-nav {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

  margin:
    0
    0
    18px;

  padding:
    0
    8px;
}

.record-board-nav a {
  display: inline-flex;

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

  min-height: 44px;

  padding:
    9px
    18px;

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

  border-radius:
    9px;

  background:
    var(--brand-primary);

  color:
    #ffffff;

  font-size:
    .9rem;

  font-weight:
    850;

  letter-spacing:
    .01em;

  text-decoration:
    none;

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

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

.record-board-nav a.active {
  background:
    var(--brand-accent);

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

  color:
    #ffffff;
}

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

  .record-board-nav a:hover {
    background:
      var(--brand-accent);

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

    transform:
      translateY(-1px);

    box-shadow:
      0 5px 12px rgba(0, 0, 0, .28);
  }
}

.record-board-nav a:focus-visible {
  outline:
    3px solid var(--brand-accent);

  outline-offset:
    3px;
}


/* =========================================================
   RECORD BOARD OUTER SHELL

   The WHOLE board scrolls together horizontally.
   ========================================================= */

.record-board {
  width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    hidden;

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

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

  background:
    var(--surface);

  box-shadow:
    var(--shadow);

  overscroll-behavior-x:
    contain;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-color:
    var(--brand-accent)
    var(--surface-raised);
}


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

.record-board-header {
  display: grid;

  grid-template-columns:
    minmax(300px, 1fr)
    minmax(460px, 1.2fr)
    minmax(300px, 1fr);

  gap:
    20px;

  align-items:
    center;

  width:
    100%;

  min-width:
    var(--board-min-width);

  min-height:
    150px;

  padding:
    20px
    28px;

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

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


/* =========================================================
   GIRLS / BOYS HEADINGS
   ========================================================= */

.record-gender-heading {
  display: flex;

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

  min-height:
    68px;

  padding:
    12px
    18px;

  border:
    1px solid rgba(255, 255, 255, .20);

  border-radius:
    10px;

  background:
    rgba(255, 255, 255, .065);

  color:
    #ffffff;

  font-size:
    clamp(1rem, 1.4vw, 1.35rem);

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .055em;

  text-align:
    center;

  text-transform:
    uppercase;
}

.record-gender-heading:first-child {
  border-left:
    6px solid var(--brand-accent);
}

.record-gender-heading:last-child {
  border-right:
    6px solid var(--brand-accent);
}


/* =========================================================
   CLUB TITLE / LOGO
   ========================================================= */

.record-board-title {
  min-width: 0;

  text-align:
    center;
}

.record-board-title img {
  display:
    none;

  width:
    auto;

  height:
    auto;

  max-width:
    300px;

  max-height:
    86px;

  margin:
    0 auto 8px;

  object-fit:
    contain;
}

.record-board-title img.ready {
  display:
    block;
}

.record-board-title h1 {
  margin:
    0;

  color:
    #ffffff;

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

  line-height:
    1.05;

  font-weight:
    950;

  letter-spacing:
    .035em;

  text-transform:
    uppercase;
}

.record-board-title .course-name {
  margin-top:
    8px;

  color:
    var(--brand-accent);

  font-size:
    .82rem;

  font-weight:
    900;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


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

.record-status {
  width:
    100%;

  min-width:
    var(--board-min-width);

  padding:
    22px;

  color:
    var(--text-muted);

  text-align:
    center;

  font-weight:
    700;
}


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

.record-table-wrap {
  width:
    100%;

  overflow:
    visible;

  background:
    var(--surface);
}


/* =========================================================
   RECORD TABLE
   ========================================================= */

.record-table {
  width:
    100%;

  min-width:
    var(--board-min-width);

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    fixed;

  background:
    var(--surface);
}


/* =========================================================
   TABLE GRID
   ========================================================= */

.record-table th,
.record-table td {
  border-right:
    1px solid #d8dadd;

  border-bottom:
    1px solid #d8dadd;
}


/* =========================================================
   AGE GROUP HEADERS
   ========================================================= */

.record-table thead th {
  height:
    60px;

  padding:
    11px
    6px;

  background:
    linear-gradient(
      180deg,
      #191919,
      #080808
    );

  color:
    #ffffff;

  font-size:
    .82rem;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .035em;

  text-align:
    center;

  vertical-align:
    middle;

  text-transform:
    uppercase;

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

.record-table thead th.event-head {
  width:
    140px;

  background:
    linear-gradient(
      180deg,
      var(--brand-accent),
      var(--brand-accent-dark)
    );

  color:
    #ffffff;

  letter-spacing:
    .07em;
}


/* =========================================================
   EVENT COLUMN
   ========================================================= */

.record-table tbody th.event-cell {
  width:
    140px;

  padding:
    8px
    6px;

  background:
    linear-gradient(
      180deg,
      #181818,
      #050505
    );

  color:
    #ffffff;

  font-size:
    .78rem;

  line-height:
    1.12;

  font-weight:
    900;

  letter-spacing:
    .025em;

  text-align:
    center;

  vertical-align:
    middle;

  text-transform:
    uppercase;

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

  border-right:
    3px solid var(--brand-accent);
}


/* =========================================================
   SECTION HEADERS
   ========================================================= */

.record-table tbody tr.section-row th {
  height:
    46px;

  padding:
    10px
    12px;

  background:
    var(--surface-raised);

  color:
    #ffffff;

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

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

  font-size:
    .8rem;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .13em;

  text-align:
    center;

  vertical-align:
    middle;

  text-transform:
    uppercase;
}


/* =========================================================
   RECORD PLACARDS
   ========================================================= */

.record-cell {
  height:
    82px;

  padding:
    8px
    7px;

  background:
    var(--placard);

  color:
    var(--text-dark);

  vertical-align:
    middle;

  transition:
    background .12s ease,
    box-shadow .12s ease;
}

.record-table tbody tr:nth-child(even)
.record-cell {
  background:
    var(--placard-alt);
}


/* =========================================================
   HOVER
   ========================================================= */

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

  .record-cell:hover {
    position:
      relative;

    z-index:
      2;

    background:
      #ffffff;

    box-shadow:
      inset 0 0 0 2px var(--brand-accent);
  }
}


/* =========================================================
   EMPTY CELLS
   ========================================================= */

.record-cell.empty {
  background:
    repeating-linear-gradient(
      -45deg,
      #101214,
      #101214 8px,
      #181b1e 8px,
      #181b1e 16px
    );
}


/* =========================================================
   RECORD CONTENT — DESKTOP
   ========================================================= */

.record {
  display:
    grid;

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

  grid-template-areas:
    "name time"
    "meta meta";

  column-gap:
    4px;

  row-gap:
    6px;

  align-items:
    start;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   ATHLETE NAME

   Names may wrap at spaces.

   Surnames are NOT allowed to break in the middle.
   ========================================================= */

.record-name {
  grid-area:
    name;

  min-width:
    0;

  color:
    #111418;

  font-size:
    .69rem;

  line-height:
    1.13;

  font-weight:
    900;

  letter-spacing:
    0;

  text-transform:
    uppercase;

  white-space:
    normal;

  word-break:
    normal;

  overflow-wrap:
    normal;

  word-wrap:
    normal;

  hyphens:
    none;

  overflow:
    visible;

  text-overflow:
    clip;
}


/* =========================================================
   TIME
   ========================================================= */

.record-time {
  grid-area:
    time;

  align-self:
    start;

  width:
    52px;

  color:
    #111111;

  font-size:
    .82rem;

  line-height:
    1.1;

  font-weight:
    950;

  text-align:
    right;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}


/* =========================================================
   YEAR / MEET
   ========================================================= */

.record-meta {
  grid-area:
    meta;

  display:
    block;

  min-width:
    0;

  overflow:
    hidden;

  color:
    #65707a;

  font-size:
    .62rem;

  line-height:
    1.15;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   RELAYS
   ========================================================= */

.record-cell.relay {
  height:
    auto;

  min-height:
    92px;
}

.record-cell.relay .record-name {
  font-size:
    .64rem;

  line-height:
    1.1;

  word-break:
    normal;

  overflow-wrap:
    normal;

  hyphens:
    none;
}


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

.record-legend {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    8px
    24px;

  width:
    100%;

  min-width:
    var(--board-min-width);

  padding:
    13px
    18px;

  background:
    #050505;

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

  color:
    var(--text-muted);

  font-size:
    .76rem;

  line-height:
    1.35;
}

.record-legend strong {
  color:
    #ffffff;
}


/* =========================================================
   TABLET
   <= 900px

   The board remains deliberately wide.
   Tablet users swipe horizontally.
   ========================================================= */

@media (max-width: 900px) {

  :root {
    --board-min-width:
      1320px;
  }

  .record-page-shell {
    width:
      100%;

    padding:
      10px
      6px
      24px;
  }


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

  .record-board-header {
    min-height:
      120px;

    grid-template-columns:
      minmax(250px, 1fr)
      minmax(400px, 1.15fr)
      minmax(250px, 1fr);

    padding:
      16px
      20px;
  }

  .record-gender-heading {
    min-height:
      56px;

    font-size:
      1rem;
  }

  .record-board-title img {
    max-width:
      240px;

    max-height:
      66px;
  }

  .record-board-title h1 {
    font-size:
      1.45rem;
  }


  /* ---------------------------------------------------------
     TABLET RECORD CELLS

     Name above time.
     Meet/year hidden.
     --------------------------------------------------------- */

  .record-cell {
    height:
      72px;

    padding:
      7px
      9px;
  }

  .record {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap:
      5px;

    width:
      100%;
  }

  .record-name {
    width:
      100%;

    font-size:
      .7rem;

    line-height:
      1.12;

    letter-spacing:
      0;

    white-space:
      normal;

    word-break:
      normal;

    overflow-wrap:
      normal;

    word-wrap:
      normal;

    hyphens:
      none;

    overflow:
      visible;
  }

  .record-time {
    width:
      auto;

    font-size:
      .85rem;

    text-align:
      left;
  }

  .record-meta {
    display:
      none;
  }

  .record-cell.relay {
    min-height:
      80px;
  }

  .record-cell.relay .record-name {
    font-size:
      .64rem;
  }
}


/* =========================================================
   MOBILE
   <= 550px

   Physical record-board layout is preserved.
   User swipes horizontally.
   ========================================================= */

@media (max-width: 550px) {

  :root {
    --board-min-width:
      1200px;
  }

  .record-page-shell {
    padding:
      8px
      0
      20px;
  }

  .record-board {
    border-radius:
      0;

    border-left:
      0;

    border-right:
      0;
  }


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

  .record-board-nav {
    gap:
      7px;

    padding:
      0
      8px;
  }

  .record-board-nav a {
    flex:
      1 1 120px;

    min-height:
      46px;

    padding:
      8px
      9px;

    font-size:
      .8rem;

    text-align:
      center;
  }


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

  .record-board-header {
    min-height:
      105px;

    grid-template-columns:
      240px
      360px
      240px;

    gap:
      14px;

    padding:
      13px
      16px;
  }

  .record-gender-heading {
    min-height:
      50px;

    font-size:
      .92rem;
  }

  .record-board-title img {
    max-width:
      205px;

    max-height:
      58px;
  }

  .record-board-title h1 {
    font-size:
      1.22rem;
  }

  .record-board-title .course-name {
    font-size:
      .7rem;
  }


  /* ---------------------------------------------------------
     TABLE
     --------------------------------------------------------- */

  .record-table thead th {
    height:
      50px;

    padding:
      8px
      4px;

    font-size:
      .7rem;
  }

  .record-table thead th.event-head,
  .record-table tbody th.event-cell {
    width:
      120px;
  }

  .record-table tbody th.event-cell {
    padding:
      6px
      4px;

    font-size:
      .67rem;
  }


  /* ---------------------------------------------------------
     MOBILE RECORD PLACARDS
     --------------------------------------------------------- */

  .record-cell {
    height:
      68px;

    padding:
      6px
      8px;
  }

  .record {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap:
      4px;

    width:
      100%;
  }

  .record-name {
    width:
      100%;

    font-size:
      .66rem;

    line-height:
      1.1;

    letter-spacing:
      0;

    white-space:
      normal;

    word-break:
      normal;

    overflow-wrap:
      normal;

    word-wrap:
      normal;

    hyphens:
      none;

    overflow:
      visible;
  }

  .record-time {
    width:
      auto;

    font-size:
      .81rem;

    line-height:
      1;

    text-align:
      left;
  }

  .record-meta {
    display:
      none;
  }

  .record-cell.relay {
    min-height:
      76px;
  }

  .record-cell.relay .record-name {
    font-size:
      .6rem;
  }

  .record-legend {
    justify-content:
      flex-start;

    font-size:
      .7rem;
  }
}


/* =========================================================
   VERY SMALL PHONES
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

  :root {
    --board-min-width:
      1160px;
  }

  .record-board-nav a {
    flex:
      1 1 100%;

    width:
      100%;
  }

  .record-name {
    font-size:
      .64rem;
  }

  .record-time {
    font-size:
      .79rem;
  }
}


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

@media print {

  @page {
    size:
      landscape;

    margin:
      .25in;
  }

  :root {
    --board-min-width:
      0px;
  }

  body.record-board-page {
    background:
      #ffffff;
  }

  .record-page-shell {
    width:
      100%;

    padding:
      0;
  }

  .record-board-nav {
    display:
      none;
  }

  .record-board {
    overflow:
      visible;

    border-radius:
      0;

    box-shadow:
      none;
  }

  .record-board-header,
  .record-table,
  .record-legend {
    width:
      100%;

    min-width:
      0;
  }

  .record {
    display:
      grid;

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

    grid-template-areas:
      "name time"
      "meta meta";

    column-gap:
      4px;

    row-gap:
      5px;
  }

  .record-name {
    white-space:
      normal;

    word-break:
      normal;

    overflow-wrap:
      normal;

    hyphens:
      none;
  }

  .record-time {
    width:
      52px;
  }

  .record-meta {
    display:
      block;
  }
}