/* Mobile LIVE cards. Keep the existing cells, row identity and refresh handlers.
   Relative type and intrinsic position/time columns also accommodate enlarged text. */
.live-mobile-medal,.live-mobile-heading{display:none}
@media(max-width:1024px){
  #mobileLiveResults{
    --live-row:#111a14;--live-row-alt:#152019;--live-ink:#f4f8f5;
    --live-muted:#a5b2aa;--live-line:#2d3d32;--live-green:#32d66b;
    background:#070a08!important;
  }
  html.light #mobileLiveResults{
    --live-row:#fff;--live-row-alt:#f5f8f6;--live-ink:#101a13;
    --live-muted:#637068;--live-line:#dde6e0;--live-green:#117a39;
    background:#f2f6f3!important;
  }
  #mobileLiveResults #metaResultsCard,
  #mobileLiveResults #leadersCard{
    border:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;
  }
  #mobileLiveResults :is(#metaResultsCard,#leadersCard) .table-wrap{border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table){
    display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
    border:0!important;table-layout:auto!important;background:transparent!important;
  }
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>:is(thead,tbody){display:block;width:100%}
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>thead>tr,
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>tbody>tr:not(.details-row){
    display:grid!important;grid-template-columns:minmax(36px,max-content) minmax(0,1fr) minmax(88px,max-content);
    grid-template-rows:auto auto;align-items:center;gap:3px 8px;
    width:100%;box-sizing:border-box;padding:12px 9px!important;
  }
  #mobileLiveResults .meta-table>thead>tr,
  #mobileLiveResults .meta-table>tbody>tr:not(.details-row){grid-template-columns:minmax(36px,max-content) 18px minmax(0,1fr) minmax(88px,max-content);column-gap:6px}
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>tbody>tr:not(.details-row){
    min-height:76px;margin-bottom:7px;border:1px solid var(--live-line);border-radius:16px;
    background:var(--live-row)!important;color:var(--live-ink);
  }
  #mobileLiveResults .leaders-table>tbody>tr:nth-child(even),
  #mobileLiveResults .cl-root .cl-table>tbody>tr:nth-child(even),
  #mobileLiveResults .meta-table>tbody>tr:nth-child(4n+3){background:var(--live-row-alt)!important}
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>thead>tr{min-height:38px;grid-template-rows:auto;background:transparent!important}
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>thead>tr>th,
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>tbody>tr:not(.details-row)>td{
    display:block!important;width:auto!important;min-width:0!important;max-width:100%!important;
    margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;
    background:transparent!important;position:static!important;line-height:1.3!important;
    overflow:visible!important;text-overflow:clip!important;white-space:normal!important;color:inherit;
  }
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>thead>tr>th{
    color:var(--live-muted)!important;font-size:.625rem!important;font-weight:800;letter-spacing:.04em!important;
  }
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>thead>tr>th:nth-child(n){font-size:.625rem!important}
  #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>tbody>tr>:nth-child(1),
  #mobileLiveResults .meta-table>tbody>tr:not(.details-row)>:nth-child(2){font-size:.9375rem!important;white-space:nowrap!important}
  /* Three primary columns: position, identity and time. Secondary data stays below. */
  #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>:is(thead,tbody)>tr>:nth-child(1),
  #mobileLiveResults .meta-table>:is(thead,tbody)>tr:not(.details-row)>:nth-child(2){
    grid-column:1;grid-row:1/3;text-align:center!important;font-weight:800;
  }
  #mobileLiveResults .meta-table>:is(thead,tbody)>tr:not(.details-row)>:nth-child(1){grid-column:2;grid-row:1/3;text-align:center}
  #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>:is(thead,tbody)>tr>:nth-child(3){grid-column:2;grid-row:1}
  #mobileLiveResults .meta-table>:is(thead,tbody)>tr:not(.details-row)>:nth-child(4){grid-column:3;grid-row:1}
  #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>tbody>tr>:nth-child(2){grid-column:2;grid-row:2}
  #mobileLiveResults .meta-table>tbody>tr:not(.details-row)>:nth-child(3){grid-column:3;grid-row:2}
  #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>tbody>tr>:nth-child(2),
  #mobileLiveResults .meta-table>tbody>tr:not(.details-row)>:nth-child(3){
    font-size:.6875rem!important;font-weight:650;color:var(--live-muted)!important;overflow-wrap:anywhere;
  }
  #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>tbody>tr>:nth-child(2)::before,
  #mobileLiveResults .meta-table>tbody>tr:not(.details-row)>:nth-child(3)::before{content:'DORSAL ';font-size:.625rem;letter-spacing:.03em}
  #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>:is(thead,tbody)>tr>:nth-child(6){grid-column:3;grid-row:1;text-align:right!important}
  #mobileLiveResults .meta-table>:is(thead,tbody)>tr:not(.details-row)>:nth-child(6){grid-column:4;grid-row:1/3;text-align:right!important}
  #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>tbody>tr:not(.details-row)>:nth-child(6){
    font-size:1.125rem!important;font-weight:800;color:var(--live-green)!important;
    font-variant-numeric:tabular-nums;white-space:nowrap!important;letter-spacing:-.4px;
  }
  #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>tbody>tr>:nth-child(5){
    grid-column:3;grid-row:2;text-align:right!important;color:var(--live-muted)!important;
    font-size:.625rem!important;font-weight:600;overflow-wrap:anywhere;max-width:88px!important;justify-self:end;
  }
  #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>thead>tr>:is(:nth-child(2),:nth-child(4),:nth-child(5),:nth-child(7)),
  #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>tbody>tr>:is(:nth-child(4),:nth-child(7)),
  #mobileLiveResults .meta-table>thead>tr>:is(:nth-child(3),:nth-child(5)),
  #mobileLiveResults .meta-table>tbody>tr:not(.details-row)>:nth-child(5){display:none!important}
  #mobileLiveResults .live-mobile-table .medalwrap{display:block;min-width:0}
  #mobileLiveResults .live-mobile-table .medal-slot{display:none}
  #mobileLiveResults .live-mobile-table .runner-name,
  #mobileLiveResults .cl-root .cl-runner{
    display:block;font-size:1rem!important;font-weight:800;line-height:1.25!important;color:var(--live-ink);
    white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere;text-overflow:clip!important;
  }
  #mobileLiveResults .live-mobile-medal{display:block}
  #mobileLiveResults .live-mobile-medal:empty{display:none}
  #mobileLiveResults .live-mobile-medal .medal svg{width:24px;height:24px;margin:auto}
  #mobileLiveResults .live-mobile-medal:not(:empty)+span{font-size:.6875rem;color:var(--live-muted)}
  #mobileLiveResults .meta-table .caret{
    width:18px!important;height:44px!important;padding:0;border:0;background:transparent;
    color:var(--live-green);font-size:0;display:grid;place-items:center;transform:none!important;
  }
  #mobileLiveResults .meta-table .caret::before{content:'';width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  #mobileLiveResults .meta-table .caret.open::before{transform:rotate(225deg) translate(-2px,-2px)}
  #mobileLiveResults .meta-table .caret:focus-visible{outline:2px solid var(--live-green);outline-offset:2px;border-radius:5px}
  #mobileLiveResults .live-desktop-heading{display:none}
  #mobileLiveResults .live-mobile-heading{display:inline}
  #mobileLiveResults .meta-table .details-row:not([style*="none"]){display:block!important;margin:-2px 0 8px;background:var(--live-row)!important;border:1px solid var(--live-line);border-radius:14px}
  #mobileLiveResults .meta-table .details-row>td{display:block;width:100%;padding:10px!important;box-sizing:border-box;border:0}
  #mobileLiveResults #metaPagination{font-size:.75rem;color:var(--live-muted)}
  #mobileLiveResults #metaPagination button{min-height:44px}
  #mobileLiveResults .cl-root .cl-table-wrap{overflow:visible}
  #mobileLiveResults :is(.table-wrap,.cl-root .cl-table-wrap){container-type:inline-size;container-name:livecards}
  /* With enlarged text (or an extra narrow screen), give the name the full line. */
  @container livecards (max-width:20rem){
    #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>:is(thead,tbody)>tr>:nth-child(3){grid-column:2/4}
    #mobileLiveResults .meta-table>:is(thead,tbody)>tr:not(.details-row)>:nth-child(4){grid-column:3/5}
    #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>tbody>tr>:nth-child(6),
    #mobileLiveResults .meta-table>tbody>tr:not(.details-row)>:nth-child(6){grid-row:2}
    #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>tbody>tr>:nth-child(5){grid-row:3}
    #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>thead>tr>th:nth-child(6){display:none!important}
  }
  /* Give club its own column when the phone is wide enough. */
  @media(min-width:600px){
    #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>:is(thead,tbody)>tr{grid-template-columns:minmax(36px,max-content) minmax(0,1.5fr) minmax(100px,1fr) minmax(106px,max-content);column-gap:12px}
    #mobileLiveResults .meta-table>:is(thead,tbody)>tr:not(.details-row){grid-template-columns:minmax(36px,max-content) 20px minmax(0,1.5fr) minmax(100px,1fr) minmax(106px,max-content);column-gap:10px}
    #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>:is(thead,tbody)>tr>:nth-child(4){display:block!important;grid-column:3;grid-row:1/3}
    #mobileLiveResults .meta-table>:is(thead,tbody)>tr:not(.details-row)>:nth-child(5){display:block!important;grid-column:4;grid-row:1/3}
    #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>:is(thead,tbody)>tr>:nth-child(6),
    #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>tbody>tr>:nth-child(5){grid-column:4}
    #mobileLiveResults .meta-table>:is(thead,tbody)>tr:not(.details-row)>:nth-child(6){grid-column:5}
    #mobileLiveResults :is(.leaders-table,.cl-root .cl-table)>tbody>tr>:nth-child(4),
    #mobileLiveResults .meta-table>tbody>tr:not(.details-row)>:nth-child(5){font-size:.75rem!important;overflow-wrap:anywhere;color:var(--live-muted)!important}
    #mobileLiveResults :where(.live-mobile-table,.cl-root .cl-table)>tbody>tr:not(.details-row)>:nth-child(6){font-size:1.25rem!important}
  }
}