/*
 * Responsive adaptation of the ledger system.
 *
 * The lane colours, the grey header band and the hairline rules are unchanged.
 * What changes is how much air the ledger gets: phone pages breathe and give
 * every row a thumb-sized target; desktop pages stop stretching a 300px table
 * across 1400px of white.
 *
 * Loaded after custom.css, so it may override that file's table rules directly.
 */

:root {
  --ledger-gutter: 16px;
  --ledger-header-ink: #3c3c3c; /* #808080 on gainsboro was 2.88:1; this is 8.04:1 */
  --ledger-tap: 44px;
  --ledger-rule: #d3d3d3;
  --ledger-header-bg: #dcdcdc;
}

/* ---------------------------------------------------------------- chrome -- */

.mdl-layout__header-row {
  gap: 8px;
  /* The drawer button occupies the first 48px at every width; the title must
     start after it. */
  padding: 0 var(--ledger-gutter) 0 72px;
}

.mdl-layout-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdl-layout__header .mdl-navigation__link {
  padding: 0 8px;
}

/* A visible focus ring on every interactive element, including the MDL
   buttons that ship with outline: none. */
a:focus-visible,
button:focus-visible,
.mdl-button:focus-visible,
.mdl-navigation__link:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}

/* The drawer button's attention pulse is a one-time cue, not a permanent
   animation. Respect the system setting. */
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none !important;
  }
}

/* ------------------------------------------------------------- navigation -- */

.mdl-layout__drawer nav a {
  color: #212121;
}

.mdl-layout__drawer .mdl-navigation__link {
  align-items: center;
  color: #212121;
  display: flex;
  min-height: 48px;
}

.mdl-layout__drawer .mdl-navigation__link.is-active {
  background: #eeeeee;
  font-weight: 700;
}

/* ------------------------------------------------------------------ pages -- */

.mdl-layout__tab-panel > .mdl-grid {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 var(--ledger-gutter) 32px;
  width: 100%;
}

/* ---------------------------------------------------------------- ledger -- */

.racelist th,
.race th,
.lapcounter th {
  color: var(--ledger-header-ink);
}

.racelist td,
.race td {
  padding-left: 8px;
  padding-right: 8px;
}

/* The results index is the page, not a 300px ribbon inside it. Each row is a
   pair: the start time, then the race title. The time column sizes to its own
   content -- a fixed width leaves a gap before the title on a narrow phone and
   steals the width the title needs to stay on one line. */
#results-table {
  width: 100%;
}

#results-table td {
  align-items: baseline;
  display: flex;
  gap: 10px;
  padding: 6px 8px;
}

#results-table td > div {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

#results-table td > a[href^="/race/"] {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

/* The framework pink as a button fill is 3.33:1 against white text. MDL sets
   the accent fill on its own selector chain, so this needs the extra weight. */
.mdl-button.mdl-button--raised.mdl-button--accent {
  background-color: #ad1457 !important;
  color: #ffffff;
}

/* The race page's status line is a status, not an error. */
.race-subtitle {
  color: #b01749;
  font-weight: 500;
  margin: 8px 0 12px;
  text-align: center;
}

/* On a race page the photo is its own row; without a photo the row is empty.
   Only the race page: on the results index the same placeholder sits inside
   the result row itself, and matching it there hides every result. */
.race tr:has(a.popup-link img[src$="1pixel.png"]) {
  display: none;
}

/* MDL's data-table rule drops the home links to 13px on desktop. */
#results-table td {
  font-size: 14px;
}

/* A photo-finish link only exists when there is a photo. The 1x1 placeholder
   is a dead tap zone on a phone, so it is not rendered at all. */
a.popup-link:has(img[src$="1pixel.png"]) {
  display: none;
}

/* Operator board links are rows, not a run of inline anchors. */
.ops-links a {
  align-items: center;
  border-bottom: 1px solid var(--ledger-rule);
  display: flex;
  font-size: 16px;
  min-height: 56px;
  padding: 0 4px;
}

.ops-links a:last-child {
  border-bottom: none;
}

/* ------------------------------------------------------------ phones -- */

@media (max-width: 640px) {
  /* The deployed version is diagnostic chrome, not content. */
  .mdl-layout__header .mdl-navigation {
    display: none;
  }

  .mdl-layout__header .mdl-button--raised {
    font-size: 13px;
    height: var(--ledger-tap);
    min-width: 0;
    padding: 0 12px;
  }

  .mdl-layout-title {
    font-size: 18px;
  }

  /* Ledger text at reading size, rows at thumb size. */
  .racelist,
  .race,
  .manual-laps {
    font-size: 15px;
    line-height: 1.35;
  }

  .racelist th,
  .race th {
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 8px 4px;
  }

  .racelist td,
  .race td {
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .racelist td {
    height: var(--ledger-tap);
  }

  /* Results by race: the race link is the only action on the page, so it
     gets the full row. */
  #results-table td {
    padding-bottom: 14px;
    padding-top: 10px;
  }

  #results-table td > a[href^="/race/"] {
    display: block;
    font-size: 15px;
    padding: 11px 0;
  }

  /* The sticky race link is the row's action; give it the row. */
  .dataTables_wrapper table.dataTable td:last-child a {
    align-items: center;
    display: flex;
    min-height: var(--ledger-tap);
  }

  /* Previous / next / all-races controls on a race page. */
  .race .mdl-button {
    height: var(--ledger-tap);
    min-width: var(--ledger-tap);
  }

  /* Splits are empty for every race today and eat 43% of a phone row. */
  .splits-col {
    display: none;
  }

  /* The whip list is one card at a time; its 200px columns must not force a
     horizontal scroll. */
  .whip-list-class table {
    width: 100%;
  }

  .whip-list-class td,
  .whip-list-class th {
    min-width: 0 !important;
    padding: 8px 6px !important;
    width: auto !important;
  }

  /* Board links are the page, not inline text. */
  .ops-links a {
    font-size: 18px;
  }
}

/* ------------------------------------------------- small phones (320px) -- */

@media (max-width: 360px) {
  .racelist td,
  .race td {
    font-size: 14px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .race th,
  .racelist th {
    font-size: 13px;
  }

  #results-table td > a[href^="/race/"] {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------ tablets -- */

@media (min-width: 641px) and (max-width: 1023px) {
  .racelist td,
  .race td {
    padding-bottom: 6px;
    padding-top: 6px;
  }

  .splits-col {
    display: none;
  }
}

/* -------------------------------------------------------- filter results -- */

.table-scroll {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

.dataTables_wrapper {
  font-size: 15px;
}

/* Keep the column widths and let the wrapper scroll, rather than crushing
   every column into a wrapped stack. */
.dataTables_wrapper table.dataTable {
  min-width: 640px;
}

/* One line per row is the ledger's whole character; the wrapper scrolls. */
.dataTables_wrapper table.dataTable td,
.dataTables_wrapper table.dataTable th {
  white-space: nowrap;
}

/* Race links are the primary action; the framework pink is 3.33:1 on white. */
.racelist a,
.dataTables_wrapper a,
.ops-links a {
  color: #b01749;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Bootstrap's container is wider than the MDL shell on a phone. */
@media (max-width: 640px) {
  .container-fluid {
    padding-left: var(--ledger-gutter);
    padding-right: var(--ledger-gutter);
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info {
    text-align: left;
  }

  /* The phone row shows PLACE, TIME and NAME at full width; TITLE, FIRSTNAME
     and CLUB were pushing the name and time off-screen entirely. The race id
     scrolls in from the right and the whole row opens the race (see
     nav-state.js), so it never has to be pinned over the name. */
  .dataTables_wrapper table.dataTable th:nth-child(1),
  .dataTables_wrapper table.dataTable td:nth-child(1),
  .dataTables_wrapper table.dataTable th:nth-child(5),
  .dataTables_wrapper table.dataTable td:nth-child(5),
  .dataTables_wrapper table.dataTable th:nth-child(6),
  .dataTables_wrapper table.dataTable td:nth-child(6) {
    display: none;
  }

  .dataTables_wrapper table.dataTable th:nth-child(4),
  .dataTables_wrapper table.dataTable td:nth-child(4) {
    white-space: normal;
  }

  /* With three columns hidden the table no longer needs a desktop min-width. */
  .dataTables_wrapper table.dataTable {
    min-width: 0;
  }

  /* Trim the Bootstrap cell padding so the race id clears the edge. */
  .dataTables_wrapper table.dataTable td,
  .dataTables_wrapper table.dataTable th {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Signals that the table continues to the right. */
  .table-scroll {
    box-shadow: inset -14px 0 12px -14px rgba(0, 0, 0, 0.35);
  }

  .dataTables_wrapper tbody tr {
    cursor: pointer;
  }
}