/* The roster page (/admin-category-team-list-view and its public twin /tournament-entry-order). */

/* The unit code in the heading. <code> inherits the h1's size, which made the chip compete
   with the event name it is labelling instead of tagging it; em keeps it proportional to the
   heading at every breakpoint rather than pinning a px size the h1 will outgrow. */
.sd-teamlist .page-title code {
  font-size: 0.72em;
  vertical-align: 0.12em;
  padding: 0.15em 0.45em;
  margin-right: 0.15em;
}

/* The contingent's own two names, shared by both layouts: code and Chinese on one line, the
   English underneath as supporting text. */
.sd-teamlist .tl-cont-code {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-right: 6px;
}

.sd-teamlist .tl-cont-en {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-muted);
  overflow-wrap: break-word;
}

/* ==========================================================================
   PHONE — the row stops being a row of columns and becomes a record.

   THE SHARED stack-table CARD COULD NOT DO THIS SHAPE. It lays a cell out as a
   label/value pair, one cell per line, so the running number was just another line of text
   in a stack. What this list needs is the number set to one side as an index, with
   everything about that entry — school, English name, team, people — stacked beside it.

   GRID, NOT FLEX, because the cells are SIBLINGS. Flex would put all four on one axis;
   there is no wrapper around cells 2..n to make a column out of, and adding one would mean
   emitting different markup for the two layouts. A two-column grid places the first cell in
   column one and pins every other cell to column two, which stacks them without touching
   the markup the desktop table needs.
   ========================================================================== */

@media (max-width: 768px) {
  .sd-teamlist .data-table.stack-table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  /* Everything except the number stacks in column two. */
  .sd-teamlist .data-table.stack-table td {
    grid-column: 2;
    display: block;
    text-align: left;
    padding: 0 !important;
    border: none !important;
    font-size: 13px;
    line-height: 1.5;
    min-width: 0;
  }

  /* The index, centred against the whole block rather than pinned to its first line — that is
     what makes the row read as one record with an index, instead of a number followed by some
     text that happens to be beside it.
     `span 3`, not `1 / -1`: -1 counts back from the end of the EXPLICIT grid, and this grid
     has no explicit rows, so it silently collapsed to a single row and the chip sat at the top.
     Three is the most content rows a roster row can have (school, team no, participants); a
     solo event has two and the spare implicit row collapses to nothing. */
  .sd-teamlist .data-table.stack-table td:first-child {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .sd-teamlist .data-table.stack-table td:first-child code {
    font-size: 1.4rem !important;
    line-height: 1.15;
    padding: 0.1em 0.4em;
  }

  /* The school is the line the reader is scanning for. */
  .sd-teamlist .data-table.stack-table td:nth-child(2) {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
  }

  /* No contingent code on the card. It is an internal reference the office uses to tell two
     similarly-named schools apart in a long table; on a card the school already has two full
     names above the entry, so the code was a line of noise before the thing being read. It
     stays in the desktop table, where the column exists and the officer wants it. */
  .sd-teamlist .tl-cont-code {
    display: none;
  }

  /* Team number and participants: supporting detail, set back from the school above them. */
  .sd-teamlist .data-table.stack-table td:nth-child(n + 3) {
    font-size: 13px;
    color: var(--text-sub, #cbd5e1);
  }

  .sd-teamlist .data-table.stack-table td:last-child {
    padding-top: 4px !important;
  }

  /* ==========================================================================
     RESULT WINNERS CARD — ROW-BASED ON PHONE
     ========================================================================== */
  .sd-teamlist.sd-result-list .data-table.stack-table tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
  }

  .sd-teamlist.sd-result-list .data-table.stack-table td {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0 !important;
    border: none !important;
    font-size: 13.5px;
    line-height: 1.5;
    min-width: 0;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .sd-teamlist.sd-result-list .data-table.stack-table td:first-child {
    display: flex;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 2px;
  }

  .sd-teamlist.sd-result-list .data-table.stack-table td:nth-child(2) {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
  }

  .sd-teamlist.sd-result-list .tl-cont-cn {
    display: block;
    color: var(--text-main, #f1f5f9);
    font-size: 14.5px;
  }

  .sd-teamlist.sd-result-list .tl-cont-en {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
    margin-top: 2px;
  }

  .sd-teamlist.sd-result-list .data-table.stack-table td:last-child {
    padding-top: 6px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
    margin-top: 2px;
  }

  .sd-teamlist.sd-result-list .tl-part-cn {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text-main, #f8fafc);
  }

  .sd-teamlist.sd-result-list .tl-part-en {
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
    margin-top: 1px;
  }
}