/* Target Run Paces (Plan > Paces). Only the app's theme tokens, so it follows the light and dark themes. A table on a wide screen, cards on a phone. */
#rpcard{margin-top:12px}
#p-paces #rpcard{margin-top:0}
#rpcard .rp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
#rpcard .rp-head .h{margin:0}
#rpcard .rp-seg{display:inline-flex}
#rpcard .rp-seg button{min-height:40px;min-width:48px;padding:0 14px}
#rpcard .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#rpcard .rp-up{margin:6px 0;font-size:14px;color:var(--muted)}
#rpcard .rp-badge{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--yellow);color:var(--yellow);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
#rpcard .rp-per{margin:6px 0 10px;font-size:14px;color:var(--muted)}
#rpcard .rp-per b{color:var(--ink)}
#rpcard .rp-mix{display:flex;height:22px;border-radius:8px;overflow:hidden;margin-top:6px;gap:2px}
#rpcard .rp-mix i{display:grid;place-items:center;background:var(--c);color:#111;font:700 11px/1 system-ui,sans-serif;font-style:normal;white-space:nowrap;overflow:hidden}

/* the table */
#rpcard table.rp{width:100%;border-collapse:collapse;margin:6px 0 10px}
#rpcard table.rp thead th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--line)}
#rpcard table.rp .rp-g th{text-align:left;padding:14px 10px 6px;font:800 italic 17px/1 "Barlow Condensed",system-ui,sans-serif;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line)}
#rpcard table.rp td,#rpcard table.rp tbody th[scope=row]{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;font-weight:400}
#rpcard table.rp b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
#rpcard table.rp small{display:block;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
#rpcard .rp-r.on{background:rgba(0,133,202,.08)}
#rpcard .rp-z{display:inline-block;padding:1px 10px;border-radius:999px;background:var(--c);color:#111;font-size:12px;font-weight:800;margin-right:6px}
#rpcard .rp-f{font-size:13px;color:var(--muted)}
#rpcard .rp-focus{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--link,#0085ca)}
#rpcard .rp-d.up{color:var(--green)}#rpcard .rp-d.dn{color:var(--red)}

/* a phone: every row is a card with the three values under each other */
@media (max-width:640px){
  #rpcard table.rp:not(.rp3),#rpcard table.rp:not(.rp3) tbody,#rpcard table.rp:not(.rp3) tr,#rpcard table.rp:not(.rp3) th,#rpcard table.rp:not(.rp3) td{display:block}
  #rpcard table.rp:not(.rp3) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #rpcard table.rp:not(.rp3) .rp-g th{padding:16px 2px 6px}
  #rpcard table.rp:not(.rp3) .rp-r{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:10px 12px;margin:0 0 8px;border:1px solid var(--line);border-radius:12px}
  #rpcard table.rp:not(.rp3) .rp-r>*{padding:0;border:0}
  #rpcard table.rp:not(.rp3) tbody .rp-r th[scope=row]{grid-column:1 / -1;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 0 6px;border:0;border-bottom:1px solid var(--line)}
  #rpcard table.rp:not(.rp3) .rp-r th[scope=row] small{margin:0}
  #rpcard table.rp:not(.rp3) .rp-r td[data-l=Zone]{grid-column:1 / -1;margin-top:4px}
}

/* loading: a skeleton, still on a slow phone */
#rpcard .rp-sk{display:grid;gap:8px;margin:8px 0}
#rpcard .rp-sk i{display:block;height:46px;border-radius:12px;background:linear-gradient(90deg,var(--s2,#1c2631) 25%,var(--line) 50%,var(--s2,#1c2631) 75%);background-size:200% 100%;animation:rpsk 1.3s linear infinite}
@keyframes rpsk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){#rpcard .rp-sk i{animation:none}}

/* the main table: distances down the side, the three zones across the top. A real table at every width, no cards. */
#rpcard table.rp3{table-layout:fixed;border:1px solid var(--line);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden}
#rpcard table.rp3 thead th{vertical-align:bottom;padding:10px 10px 8px;border-top:4px solid var(--c,var(--line));border-bottom:2px solid var(--line);background:var(--s2,transparent);white-space:normal;line-height:1.2}
#rpcard table.rp3 thead th:first-child{border-top-color:var(--line);width:22%}
#rpcard table.rp3 thead th .rp-z{display:block;width:max-content;margin:0 0 5px}
#rpcard table.rp3 thead th .rp-zn{display:block;font-size:12px;letter-spacing:.04em;color:var(--ink)}
#rpcard table.rp3 td,#rpcard table.rp3 tbody th[scope=row]{padding:11px 10px;border-bottom:1px solid var(--line)}
#rpcard table.rp3 td{border-left:1px solid var(--line)}
#rpcard table.rp3 tbody tr:last-child td,#rpcard table.rp3 tbody tr:last-child th{border-bottom:0}
#rpcard table.rp3 tbody tr:nth-child(even){background:rgba(127,127,127,.07)}
#rpcard table.rp3 tbody tr:hover{background:rgba(0,133,202,.10)}
#rpcard table.rp3 tbody th[scope=row] b{font-size:17px}
#rpcard table.rp3 td .rp-v{display:block}
#rpcard table.rp3 td b{font-size:16px;line-height:1.2}
#rpcard table.rp3 td small{margin-top:3px;font-size:13px;font-weight:600;color:var(--ink);opacity:.8}
#rpcard table.rp3 td.rp-na{color:var(--muted);text-align:center}
#rpcard details.rp-all{margin:14px 0 6px;border-top:1px solid var(--line);padding-top:6px}
#rpcard details.rp-all>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--ink);list-style:none}
#rpcard details.rp-all>summary::-webkit-details-marker{display:none}
#rpcard details.rp-all>summary::after{content:"+";margin-left:auto;font-size:22px;line-height:1;color:var(--muted)}
#rpcard details.rp-all[open]>summary::after{content:"‘2"}
/* a phone: the same table, tighter, so all four columns fit without scrolling */
@media (max-width:640px){
  #rpcard table.rp3 thead th{padding:8px 5px 6px}
  #rpcard table.rp3 thead th:first-child{width:19%;font-size:9.5px;letter-spacing:0;padding-right:3px}
  #rpcard table.rp3 thead th .rp-z{font-size:11px;padding:1px 7px;margin-right:0}
  #rpcard table.rp3 thead th .rp-zn{font-size:10.5px;letter-spacing:0}
  #rpcard table.rp3 td,#rpcard table.rp3 tbody th[scope=row]{padding:9px 5px}
  #rpcard table.rp3 tbody th[scope=row] b{font-size:14px}
  #rpcard table.rp3 tbody th[scope=row] small{font-size:10.5px}
  #rpcard table.rp3 td b{font-size:11.5px;line-height:1.25}
  #rpcard table.rp3 td small{font-size:10px}
  #rpcard table.rp3 td,#rpcard table.rp3 tbody th[scope=row]{padding:8px 3px}
  #rpcard table.rp3 thead th{padding:8px 3px 6px}
  #rpcard table.rp3 thead th:first-child{width:17%}
}