/* Shared presentation for race equivalence, training paces and field comparison. */
.performance-card .tool-detail-hero { padding: 0; margin: 0 0 16px; }
.performance-card .tool-detail-hero h1 { margin: 0; font-size: clamp(27px, 4.5vw, 36px); font-weight: 500; line-height: 1.2; }
.performance-card .tool-deck { margin: 10px 0 0; font-size: 17px; }
.performance-form { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; align-items: start; }
.performance-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.performance-field > label, .performance-field > legend { display: block; margin: 0 0 6px; padding: 0; color: #344147; font-size: 15px; font-weight: 650; line-height: 1.3; }
.performance-form input, .performance-form select { width: 100%; min-width: 0; height: 50px; padding: 8px 10px; border: 1px solid #8c9fa6; border-radius: 6px; color: #26343a; background: white; color-scheme: light; font-size: 19px; }
.performance-form input:focus, .performance-form select:focus { outline: 3px solid #9ce6ed; outline-offset: 2px; border-color: #087781; }
.performance-form input[aria-invalid=true] { border-color: #b52c22; }
.performance-time { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 5px; }
.performance-time label { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.performance-time input { text-align: center; font-variant-numeric: tabular-nums; }
.performance-time small { color: #55666c; font-size: 12px; }
.performance-time .colon { align-self: start; line-height: 50px; color: #607077; }
.performance-options { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.performance-options p { margin: 5px 0 0; font-size: 13px; color: #52676d; }
.performance-error { color: #92271d; margin: 8px 0; font-size: 14px; }
.performance-results { margin-top: 14px; }
.performance-results[aria-busy=true] { opacity: .7; }
.performance-result-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 10px; }
.performance-result-head h2 { font-size: 20px; line-height: 1.3; margin: 0; }
.performance-result-head p { font-size: 14px; color: #586c72; margin: 0; }
.performance-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.performance-result-tile { padding: 16px; background: #edf9fa; border: 1px solid #c1e3e7; border-radius: 8px; min-width: 0; }
.performance-result-tile.featured { background: #073f47; color: white; }
.performance-result-tile h3 { margin: 0 0 5px; font-size: 16px; font-weight: 600; }
.performance-result-tile .result-time { display: block; font-size: clamp(26px, 5vw, 37px); font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.2; }
.performance-result-tile p { margin: 7px 0 0; font-size: 14px; }
.performance-card a { color: #006d79; }
.performance-result-tile.featured a { color: #a4f4ff; }
.performance-result-tile .plan-link { display: inline-block; margin-top: 12px; font-size: 14px; }
.performance-note { margin: 14px 0; padding: 12px 15px; background: #fff8e4; border-left: 3px solid #c09624; font-size: 14px; }
.performance-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 15px 0; }
.performance-actions button { min-height: 44px; padding: 9px 14px; border: 1px solid #7cb8c0; border-radius: 6px; color: #07515a; background: #e8f9fb; cursor: pointer; }
.performance-actions [role=status] { font-size: 14px; color: #45626a; }
.performance-method { padding: 15px 0; border-top: 1px solid #d3dfe3; }
.performance-method summary { cursor: pointer; font-weight: 600; }
.performance-method p, .performance-method li { font-size: 15px; }
.training-list { display: grid; gap: 10px; }
.training-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: start; gap: 10px; padding: 15px; border: 1px solid #cddfe2; border-radius: 8px; background: #f8fbfb; }
.training-badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #07515a; background: #d6f3f5; font-size: 22px; font-weight: 700; }
.training-row h3 { margin: 0; font-size: 17px; }
.training-row p { margin: 5px 0 0; font-size: 14px; color: #52666c; }
.training-pace { font-size: 22px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.training-pace small { font-size: 13px; font-weight: 400; }
.training-track { grid-column: 2 / -1; font-size: 14px; }
.percentile-hero { padding: 18px; border-radius: 8px; background: #073f47; color: white; }
.percentile-hero strong { font-size: clamp(35px,6vw,52px); font-variant-numeric: tabular-nums; line-height: 1.2; }
.percentile-hero p { margin: 4px 0; }
.percentile-meter { height: 10px; background: #bdd2d5; border-radius: 5px; margin-top: 15px; overflow: hidden; }
.percentile-meter span { display: block; background: #4eebee; height: 100%; }
.field-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.field-stats div { padding: 10px; background: #f0f6f7; border-radius: 6px; text-align: center; }
.field-stats strong { display: block; font-size: 22px; }
.field-stats span { font-size: 13px; }
.percentile-targets { width: 100%; border-collapse: collapse; margin: 12px 0; font-variant-numeric: tabular-nums; }
.percentile-targets th, .percentile-targets td { text-align: left; padding: 10px 7px; border-bottom: 1px solid #d8e4e7; }
.percentile-targets th { font-size: 14px; }
.percentile-targets td a { white-space: nowrap; }
.performance-noscript { background: #fff3cc; padding: 12px; }
@media(max-width:600px) {
  html[lang=en] .performance-form > .performance-field > label,
  html[lang=en] .performance-form > .performance-field > legend { min-height: 42px; }
  .performance-form { grid-template-columns: .9fr 1.3fr; gap: 10px; }
  .performance-form input, .performance-form select { height: 46px; font-size: 17px; padding: 7px; }
  .performance-time .colon { line-height: 46px; }
  .performance-options { grid-template-columns: 1fr; }
  [data-performance-form="race-percentile"] .performance-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .performance-result-tile { padding: 12px; }
  .training-row { grid-template-columns: 34px minmax(0,1fr); padding: 12px; gap: 8px; }
  .training-badge { width: 32px; height: 32px; font-size: 19px; }
  .training-pace { grid-column: 2; font-size: 24px; }
  .training-track { grid-column: 2; }
  .percentile-targets { font-size: 14px; }
  .percentile-targets th, .percentile-targets td { padding: 9px 4px; }
}
@media(prefers-reduced-motion:reduce) { .performance-results { transition: none; } }