:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: #f6f8f7;
  color: #17231f;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 20rem;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% -10%, rgba(54, 169, 132, 0.1), transparent 30rem),
    #f6f8f7;
}

a, button, input { -webkit-tap-highlight-color: transparent; }

.app-shell {
  width: min(100% - 2rem, 70rem);
  margin: 0 auto;
  padding-bottom: 4rem;
}

.site-header {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #17231f;
  font-size: 0.94rem;
  font-weight: 760;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.65rem;
  background: #176f59;
  color: #fff;
  font-weight: 800;
}

.button {
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.button--primary {
  background: #176f59;
  color: #fff;
  box-shadow: 0 0.3rem 0.8rem rgba(23, 111, 89, 0.16);
}

.button--primary:hover {
  background: #105d4a;
  box-shadow: 0 0.45rem 1rem rgba(23, 111, 89, 0.22);
  transform: translateY(-1px);
}

.button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 0.2rem solid rgba(25, 122, 98, 0.2);
  outline-offset: 0.15rem;
}

.quiet-link, .source-link {
  color: #176f59;
  font-size: 0.9rem;
  font-weight: 680;
  text-decoration: none;
}

.quiet-link:hover, .source-link:hover { text-decoration: underline; }

.registry-intro {
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid #dfe7e4;
}

.registry-intro > div { max-width: 45rem; }

.eyebrow {
  margin: 0 0 0.7rem;
  color: #278168;
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

h1, h2, h3, p { overflow-wrap: anywhere; }

h1 {
  margin: 0;
  font-size: clamp(2.15rem, 5vw, 3.8rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.lead {
  max-width: 40rem;
  margin: 1.25rem 0 0;
  color: #5a6b65;
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.65;
}

.lead--compact {
  margin-top: 0.8rem;
  font-size: 1rem;
}

.empty-state {
  display: flex;
  max-width: 36rem;
  margin: clamp(3rem, 8vw, 6rem) auto 0;
  align-items: center;
  flex-direction: column;
  padding: 0 1rem;
  text-align: center;
}

.empty-icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  margin-bottom: 1.15rem;
  border: 1px solid #d9e7e2;
  border-radius: 1rem;
  background: #edf5f2;
  color: #176f59;
  font-size: 1.4rem;
}

.empty-state h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  letter-spacing: -0.025em;
}

.empty-state p {
  margin: 0.7rem 0 1.4rem;
  color: #63736e;
  line-height: 1.55;
}

.form-card, .result-card {
  border: 1px solid #dfe7e4;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.8rem 2.5rem rgba(30, 72, 62, 0.055);
}

.form-card {
  max-width: 56rem;
  margin: clamp(1.5rem, 5vw, 3.5rem) auto 0;
  padding: clamp(1.35rem, 4vw, 2.5rem);
}

.form-intro { max-width: 42rem; }
.form-card h1 { font-size: clamp(1.75rem, 4vw, 2.55rem); }

.result-form {
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e3eae7;
}

.result-form label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.88rem;
  font-weight: 720;
}

.form-row { display: flex; gap: 0.65rem; }

input {
  min-width: 0;
  min-height: 3rem;
  flex: 1;
  padding: 0.75rem 0.9rem;
  border: 1px solid #b9c8c3;
  border-radius: 0.75rem;
  background: #fff;
  color: #17231f;
  font: inherit;
  font-size: 0.94rem;
}

input::placeholder { color: #83918c; }
input:focus { border-color: #278168; }

.field-hint {
  margin: 0.65rem 0 0;
  color: #71807b;
  font-size: 0.78rem;
  line-height: 1.45;
}

.field-hint span { overflow-wrap: anywhere; }

.error-message {
  display: grid;
  gap: 0.25rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #f0d2cb;
  border-radius: 0.8rem;
  background: #fff7f5;
  color: #8a392b;
  font-size: 0.9rem;
  line-height: 1.45;
}

.loading-button__busy {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.is-loading .loading-button__label { display: none; }
.is-loading .loading-button__busy { display: inline-flex; }

.loading-button:disabled {
  cursor: wait;
  opacity: 0.88;
  transform: none;
}

.spinner {
  width: 1rem;
  height: 1rem;
  border: 0.13rem solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.result-card {
  max-width: 56rem;
  margin: 1.25rem auto 0;
  padding: clamp(1.35rem, 4vw, 2.5rem);
}

.review-notice, .success-message {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 2rem;
  padding: 0.9rem 1rem;
  border: 1px solid #cde5dc;
  border-radius: 0.8rem;
  background: #eff8f5;
  color: #1a5e4c;
  font-size: 0.9rem;
}

.success-message {
  border-color: #b9decf;
  background: #e9f7f1;
  color: #145843;
}

.success-message--compact {
  align-items: center;
  margin: 1rem 0 0;
}

.success-message p {
  margin: 0.2rem 0 0;
}

.success-message a {
  color: #176f59;
  font-weight: 680;
}

.review-icon {
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #278168;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

.review-notice p {
  margin: 0.15rem 0 0;
  color: #52766c;
  line-height: 1.45;
}

.result-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.result-heading-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
}

.result-heading h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4.5vw, 2.7rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.event-name {
  margin: 0.55rem 0 0;
  color: #5f706a;
  line-height: 1.5;
}

.source-link { flex: 0 0 auto; }

.result-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin: 2rem 0 2.5rem;
}

.result-facts div {
  padding: 1rem;
  border: 1px solid #e1e9e6;
  border-radius: 0.85rem;
  background: #f8faf9;
}

.result-facts dt {
  margin-bottom: 0.4rem;
  color: #71807b;
  font-size: 0.75rem;
}

.result-facts dd {
  margin: 0;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 760;
  letter-spacing: -0.02em;
}

.result-facts dd span, .unit {
  color: #71807b;
  font-size: 0.75em;
  font-weight: 560;
}

.target-time-fact {
  position: relative;
}

.target-time-input {
  width: 5.8rem;
  min-height: 0;
  padding: 0.15rem 0.35rem;
  border: 1px solid #b9c8c3;
  border-radius: 0.4rem;
  background: #fff;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.target-time-input:disabled {
  border-color: transparent;
  background: transparent;
  color: #17231f;
  opacity: 1;
}

.target-time-fact p,
.expected-pace-fact p {
  margin: 0.45rem 0 0;
  color: #71807b;
  font-size: 0.68rem;
  line-height: 1.35;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.section-heading h3 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.section-heading > span {
  display: grid;
  min-width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 999px;
  background: #edf3f1;
  color: #60706b;
  font-size: 0.75rem;
  font-weight: 720;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid #e1e9e6;
  border-radius: 0.85rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th, td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e5ece9;
  text-align: left;
  white-space: nowrap;
}

th {
  background: #f7f9f8;
  color: #71807b;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfc; }

.save-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.save-actions p {
  margin: 0;
  color: #71807b;
  font-size: 0.78rem;
}

@media (max-width: 42rem) {
  .app-shell {
    width: min(100% - 1.25rem, 70rem);
    padding-bottom: 2.5rem;
  }

  .site-header { min-height: 4.25rem; }

  .site-header > .button {
    min-height: 2.55rem;
    padding-inline: 0.8rem;
    font-size: 0.82rem;
  }

  .site-header > .button span, .brand-mark { display: none; }
  .brand { font-size: 0.84rem; }
  .quiet-link { font-size: 0.82rem; }
  .registry-intro { padding-top: 2.5rem; }
  .empty-state { margin-top: 3rem; }
  .form-card, .result-card { border-radius: 1rem; }
  .form-card { margin-top: 1rem; }

  .result-form {
    margin-top: 1.5rem;
    padding-top: 1.35rem;
  }

  .form-row, .result-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .form-row .button { width: 100%; }

  .result-heading-actions {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 0.75rem;
  }

  .result-heading-actions .button { width: 100%; }

  .save-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .save-actions .button { width: 100%; }

  .result-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1.5rem 0 2rem;
  }

  .table-wrap {
    overflow: visible;
    border: 0;
  }

  table, tbody, tr, td {
    display: block;
    width: 100%;
  }

  thead { display: none; }

  tbody {
    display: grid;
    gap: 0.6rem;
  }

  tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #e1e9e6;
    border-radius: 0.75rem;
    background: #fff;
  }

  td {
    padding: 0.75rem;
    border: 0;
    white-space: normal;
  }

  td::before {
    display: block;
    margin-bottom: 0.25rem;
    color: #7b8985;
    content: attr(data-label);
    font-size: 0.65rem;
    text-transform: uppercase;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}

.app-shell--registry {
  width: min(100% - 2rem, 82rem);
}

.registry-heading {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2rem;
  padding: 1.25rem 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.registry-stats {
  display: flex;
  gap: 0.6rem;
  margin: 0;
}

.registry-stats div {
  min-width: 6.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #dfe7e4;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.78);
}

.registry-stats dt {
  color: #71807b;
  font-size: 0.68rem;
}

.registry-stats dd {
  margin: 0.2rem 0 0;
  font-size: 1.15rem;
  font-weight: 780;
}

.registry-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.registry-filter {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.registry-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.registry-filter-field label {
  color: #71807b;
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.registry-filter-field--count input { width: 12rem; height: 2.85rem; min-height: 0; flex: none; padding: .65rem .85rem; border: 1px solid #cfdcd7; border-radius: .75rem; font: inherit; background: #fff; }
.filter-label-hint { position: relative; width: fit-content; }
.filter-label-hint label { cursor: help; text-decoration: underline dotted #a8b8b0; text-underline-offset: .25em; }
.filter-label-hint label:focus-visible { outline: 2px solid #176f59; outline-offset: 4px; border-radius: 2px; }
.filter-hint { position: absolute; z-index: 5; left: 0; bottom: calc(100% + .55rem); width: max-content; max-width: min(18rem, 85vw); padding: .6rem .8rem; border-radius: .6rem; background: #263b32; color: #fff; font-size: .8rem; line-height: 1.4; box-shadow: 0 4px 16px #17231f20; visibility: hidden; opacity: 0; pointer-events: none; }
.filter-label-hint:hover .filter-hint,
.registry-filter-field--count:focus-within .filter-hint { visibility: visible; opacity: 1; }
.pacemaker-event-count { display: block; font-size: .72rem; color: #71807b; margin-top: .2rem; }

.registry-filter-select {
  position: relative;
  display: block;
}

.registry-filter-field--event .registry-filter-select {
  width: min(27rem, 48vw);
}

.registry-filter-select::after {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid #42524c;
  border-bottom: 2px solid #42524c;
  content: "";
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.registry-filter select {
  width: 100%;
  height: 2.85rem;
  padding: 0.65rem 3rem 0.65rem 0.85rem;
  border: 1px solid #cfdcd7;
  border-radius: 0.75rem;
  background: #fff;
  color: #17231f;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 680;
  appearance: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.registry-filter select:focus-visible {
  outline: 0.2rem solid rgba(25, 122, 98, 0.2);
  outline-offset: 0.15rem;
}

.registry-filter-submit {
  border-color: #cfdcd7;
  background: #fff;
  color: #176f59;
}

.registry-filter-submit:hover {
  background: #edf5f2;
}

.registry-filter-reset {
  padding: 0.65rem 0;
}

.registry-list {
  overflow: hidden;
  border: 1px solid #dfe7e4;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0.8rem 2.5rem rgba(30, 72, 62, 0.055);
}

.registry-columns,
.pacemaker-row {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 1.25rem;
}

.registry-columns {
  padding: 0.8rem 1.15rem;
  border-bottom: 1px solid #e3eae7;
  background: #f7f9f8;
  color: #71807b;
  font-size: 0.68rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pacemaker-row {
  align-items: stretch;
  padding: 1.15rem;
  border-bottom: 1px solid #e3eae7;
}

.pacemaker-row:last-child {
  border-bottom: 0;
}

.pacemaker-profile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.pacemaker-avatar {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.85rem;
  background: #e5f2ed;
  color: #176f59;
  font-size: 0.85rem;
  font-weight: 800;
}

.pacemaker-profile h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.pacemaker-rating {
  --rating-color: #ad6a2b;
  display: grid;
  grid-template-columns: auto auto minmax(3.5rem, 1fr);
  align-items: center;
  gap: 0.18rem;
  max-width: 8.5rem;
  margin-top: 0.35rem;
  color: var(--rating-color);
  font-variant-numeric: tabular-nums;
}


.pacemaker-rating-value {
  font-size: 0.82rem;
  font-weight: 800;
}

.pacemaker-rating-max {
  color: #83908c;
  font-size: 0.62rem;
  font-weight: 650;
}

.rating-meter {
  display: block;
  position: relative;
  height: 0.38rem;
  overflow: hidden;
  border-radius: 999px;
  background: #dce5e2;
}

.rating-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rating-color);
}

.results-strip {
  display: grid;
  min-width: 0;
  grid-auto-columns: 18rem;
  grid-auto-flow: column;
  justify-content: start;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.1rem 0 0.35rem;
  scrollbar-color: #bdcbc6 transparent;
  scrollbar-width: thin;
}

.result-summary {
  --result-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr);
  --result-cell-padding: .375rem;
  position: relative;
  text-decoration: none;
  display: block;
  height: 7.2rem;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid #dce6e2;
  border-radius: 0.9rem;
  background: #fff;
  color: #17231f;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.result-summary:hover,
.result-summary:focus-visible {
  border-color: #8ebdad;
  box-shadow: 0 0.55rem 1.3rem rgba(30, 72, 62, 0.1);
  outline: none;
  transform: translateY(-2px);
}

.result-summary-data {
  display: grid;
  height: 100%;
  grid-template-rows: 1.2rem 1.8rem 1.85rem;
  align-content: space-between;
  gap: 0.25rem;
}

.result-summary-head,
.result-summary-times,
.result-summary-ratings {
  display: flex;
  align-items: center;
  min-width: 0;
}

.result-summary-head {
  justify-content: space-between;
  gap: 0.6rem;
}

.result-event-name {
  overflow: hidden;
  font-size: 0.74rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-distance {
  flex: 0 0 auto;
  color: #4d615a;
}

.result-summary-times,
.result-summary-ratings {
  display: grid;
  grid-template-columns: var(--result-columns);
  gap: 0.35rem;
}

.result-summary-times { white-space: nowrap; }
.result-time { display: flex; align-items: center; gap: .25rem; padding-inline: var(--result-cell-padding); }
.result-time--target { color: #52655d; justify-content: space-between; }
.result-time--actual { grid-column: 2 / -1; padding-inline-end: 0; }
.result-icon { width: .875rem; height: .875rem; flex: 0 0 .875rem; }
.result-chip-time { white-space: nowrap; }
.result-deviation { position: relative; top: -.45em; margin-left: .15rem; vertical-align: baseline; line-height: 0; color: #64756d; font-size: .58rem; font-weight: 500; font-variant-numeric: tabular-nums; }

.result-summary-ratings > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.3rem var(--result-cell-padding);
  border-radius: 0.48rem;
  background: var(--rating-bg, #f1f4f3);
  color: var(--rating-color, #687970);
}

.result-score--total { box-shadow: inset 0 0 0 1px currentColor; }
.result-summary-ratings small { color: inherit !important; font-size: .65rem; }
.result-score--missing { --rating-color: #758179; --rating-bg: #f1f4f3; }

.result-summary-data small {
  color: #71807b;
  font-size: 0.58rem;
  line-height: 1.2;
}

.result-summary-data strong {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.popover-rating {
  background: var(--rating-bg, #fff7e2);
  color: var(--rating-color, #94680f);
}

.result-popover {
  display: none;
  position: fixed;
  inset: unset;
  width: min(25rem, calc(100vw - 1.5rem));
  max-height: min(35rem, calc(100vh - 1.5rem));
  margin: 0;
  padding: 1.15rem;
  overflow: auto;
  border: 1px solid #cfdcd7;
  border-radius: 1rem;
  background: #fff;
  color: #17231f;
  box-shadow: 0 1.25rem 3.5rem rgba(20, 48, 40, 0.2);
  pointer-events: none;
}

.result-popover:popover-open {
  display: block;
}

.result-popover::backdrop {
  background: transparent;
}

.result-popover--fallback-open {
  display: block;
  z-index: 100;
}

.popover-heading h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.popover-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 1rem 0 0;
}

.popover-facts div {
  padding: 0.65rem 0.7rem;
  border-radius: 0.65rem;
  background: #f5f8f7;
}

.popover-facts dt {
  color: #71807b;
  font-size: 0.64rem;
}

.popover-facts dd {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
}

.popover-splits {
  margin-top: 1rem;
}

.popover-splits h4 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
}

.popover-table-wrap {
  overflow-x: auto;
  border: 1px solid #e1e9e6;
  border-radius: 0.7rem;
}

.result-popover th,
.result-popover td {
  padding: 0.55rem 0.6rem;
  font-size: 0.67rem;
}

.registry-load-error {
  max-width: 42rem;
  margin: 2rem auto 0;
}

.rating-methodology {
  scroll-margin-top: 1rem;
  margin-top: 1rem;
  border: 1px solid #dfe7e4;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.78);
}

.rating-methodology summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 760;
  cursor: pointer;
  list-style: none;
}

.rating-methodology summary::-webkit-details-marker { display: none; }

.rating-methodology summary::after {
  color: #278168;
  content: "+";
  font-size: 1.2rem;
  line-height: 1;
}

.rating-methodology[open] summary::after { content: "−"; }

.rating-methodology-hint {
  margin-left: auto;
  color: #71807b;
  font-size: 0.72rem;
  font-weight: 500;
}

.rating-methodology-content {
  padding: 0 1.15rem 1.2rem;
  border-top: 1px solid #e3eae7;
  color: #52635d;
  font-size: 0.86rem;
  line-height: 1.55;
}

.rating-methodology-content > p { margin: 1rem 0; }

.rating-composition {
  display: grid;
  gap: 0.85rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #cfe1db;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, #f8fcfa, #fff);
}

.rating-composition-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.rating-composition-heading h3 {
  margin: 0.12rem 0 0;
  color: #213b33;
  font-size: 1.05rem;
}

.rating-composition-state {
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: #e4f2ed;
  color: #176f59;
  font-size: 0.65rem;
  font-weight: 750;
  white-space: nowrap;
}

.rating-composition-bar {
  display: grid;
  grid-template-columns: 3fr 2fr;
  min-height: 3.15rem;
  overflow: hidden;
  border-radius: 0.72rem;
  color: #fff;
}

.rating-composition-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.rating-composition-bar strong { font-size: 1rem; }
.rating-composition-finish { background: #176f59; }
.rating-composition-splits { background: #4e9d87; }

.rating-composition-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
}

.rating-composition-flow span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 3.2rem;
  padding: 0.6rem;
  border-radius: 0.65rem;
  background: #edf5f2;
  color: #42564f;
  font-size: 0.72rem;
  line-height: 1.35;
}

.rating-composition-flow span strong {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #176f59;
}

.rating-composition-flow > b { color: #8da09a; }

.splits-score-scale {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.45fr;
  overflow: hidden;
  border: 1px solid #d8e4e0;
  border-radius: 0.7rem;
}

.splits-score-scale span {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 0.2rem;
  padding: 0.55rem 0.65rem;
  border-right: 1px solid #d8e4e0;
  background: #fff;
}

.splits-score-scale span:last-child { border-right: 0; }
.splits-score-scale strong { color: #314740; font-variant-numeric: tabular-nums; }
.splits-score-scale small { align-self: center; font-size: 0.58rem; }
.splits-score-scale b { grid-column: 1 / -1; color: #176f59; font-size: 0.72rem; }
.splits-score-scale-fade { background: linear-gradient(90deg, #fff, #f7e9e6) !important; }
.rating-composition > p { margin: 0; font-size: 0.74rem; }


@media (max-width: 48rem) {
  .app-shell--registry {
    width: min(100% - 1.25rem, 82rem);
  }

  .registry-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 1.25rem;
  }

  .registry-stats {
    width: 100%;
  }

  .registry-stats div {
    min-width: 0;
    flex: 1;
    padding: 0.65rem;
  }

  .registry-toolbar,
  .registry-filter,
  .registry-filter-field,
  .registry-filter-select,
  .registry-filter-field--event .registry-filter-select {
    width: 100%;
  }

  .registry-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.25rem;
  }

  .registry-filter-select {
    min-width: 0;
    flex: 1 1 0;
  }

  .registry-filter-submit {
    flex: 0 0 auto;
  }

  .registry-filter-reset {
    align-self: flex-start;
  }

  .registry-columns {
    display: none;
  }

  .pacemaker-row {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding: 1rem;
  }

  .results-strip {
    grid-auto-columns: min(18rem, calc(100vw - 3.5rem));
    margin-right: -1rem;
    padding-right: 1rem;
  }

  .result-popover table {
    display: table;
  }

  .result-popover thead {
    display: table-header-group;
  }

  .result-popover tbody {
    display: table-row-group;
  }

  .result-popover tr {
    display: table-row;
  }

  .result-popover th,
  .result-popover td {
    display: table-cell;
    width: auto;
    padding: 0.5rem;
    white-space: nowrap;
  }

  .result-popover td::before {
    display: none;
  }

  .rating-methodology-hint { display: none; }

  .rating-composition-heading,
  .rating-composition-flow {
    grid-template-columns: 1fr;
  }

  .rating-composition-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .rating-composition-flow > b { display: none; }

  .splits-score-scale {
    grid-template-columns: repeat(2, 1fr);
  }

  .splits-score-scale span:nth-child(2n) { border-right: 0; }

  .splits-score-scale-fade { grid-column: 1 / -1; }


}

@media (prefers-reduced-motion: reduce) {
  .result-summary, .button { transition: none; }
  .spinner { animation: none; }
}

/* Event-owned finish rating */
.splits-toggle { display: flex; align-items: center; align-self: flex-end; min-height: 2.85rem; gap: .6rem; margin: 0; font-size: .9rem; cursor: pointer; }
.splits-toggle input { width: 1.2rem; height: 1.2rem; min-height: 0; flex: 0 0 1.2rem; margin: 0; padding: 0; accent-color: #176f59; }
.site-menu { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.site-menu .button:not(.button--primary) { color: #176f59; background: #e9f5ef; border: 1px solid #cadfd5; }
.event-heading .eyebrow a { color: #176f59; }
.site-header { flex-wrap: wrap; gap: 1rem; }
.events-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.event-preview { min-width: 0; padding: 1.3rem; background: #fff; border: 1px solid #d4e1da; border-radius: 16px; }
.event-preview h2 { font-size: 1.2rem; margin: 0; }
.event-preview h2 a { color: #176f59; text-decoration: none; }
.event-preview .event-chart-wrap { margin: 1rem 0; }
.event-preview .event-chart-readout { font-size: .85rem; }
.event-preview .event-chart text { font-size: 20px; }
.event-zone label { margin-top: .8rem; }
.event-shell { max-width: 1160px; }
.event-heading { margin: 2rem 0; }
.event-heading h1 { font-size: clamp(1.4rem, 4vw, 2.2rem); line-height: 1.25; }
.event-heading p { color: #52635c; }
.event-editor { border: 1px solid #d4e1da; border-radius: 20px; background: #fff; padding: 1.5rem; }
.event-editor-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.event-editor h2 { margin: 0; font-size: 1.2rem; }
.event-editor-heading p, .event-note, .event-tail-settings p { color: #64756d; font-size: .85rem; line-height: 1.55; }
.event-editor-heading .button { flex-shrink: 0; }
.event-chart-wrap { margin: 1.5rem 0; }
.event-chart { width: 100%; display: block; overflow: visible; }
.event-chart text { fill: #617469; font-size: 12px; }
.event-chart-grid line { stroke: #c9d4cd; stroke-width: 1; }
.event-chart-readout { display: block; text-align: center; min-height: 1.6em; color: #176f59; font-variant-numeric: tabular-nums; }
.event-handle { cursor: grab; stroke: white; stroke-width: 2; touch-action: none; }
.event-handle:active { cursor: grabbing; }
.event-chart [data-hover] { pointer-events: none; }
.event-chart [data-hover][hidden] { display: none; }
.event-chart [data-hover] line { stroke: #3e4e46; stroke-dasharray: 3 3; }
.event-chart [data-hover] circle { fill: #176f59; stroke: white; stroke-width: 2; }
.result-chart-marker { cursor: pointer; outline: none; }
.result-marker-leader { fill: none; stroke: #315b87; stroke-width: 1; opacity: .25; pointer-events: none; }
.result-marker-dot { fill: #315b87; stroke: #fff; stroke-width: 2; }
.result-marker-label { fill: #eef4fa; stroke: #c5d4e4; stroke-width: 1; }
.event-chart .result-chart-marker text { fill: #264d75; font-weight: 600; }
.result-marker-leader.is-selected { opacity: 1; stroke-width: 2; }
.result-chart-marker.is-selected .result-marker-label,
.result-chart-marker:focus-visible .result-marker-label { stroke: #264d75; stroke-width: 2; fill: #dceaf7; }
.result-chart-marker.is-selected .result-marker-dot { fill: #123e70; stroke-width: 3; }
.event-zones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.event-zone { padding: .85rem; border-radius: 12px; border-top: 4px solid; }
.event-zone h3 { margin: 0 0 .6rem; font-size: .9rem; }
.event-zone p { font-size: .8rem; line-height: 1.5; margin: 0 0 .8rem; }
.event-zone output { font-size: .85rem; font-weight: 650; }
.event-zone--bad { background: #fbefec; border-color: #bc4c43; }
.event-zone--normal { background: #fff7e2; border-color: #b98216; }
.event-zone--excellent { background: #e9f5ef; border-color: #176f59; }
.event-editor label { display: grid; gap: .4rem; font-size: .82rem; }
.event-editor input[type="number"] { min-width: 0; width: 100%; border: 1px solid #b9c9c0; border-radius: 8px; padding: .55rem; font: inherit; background: #fff; color: #1c3026; box-sizing: border-box; }
.event-editor input:focus-visible { outline: 2px solid #176f59; outline-offset: 2px; }
.event-input-pair { display: grid; gap: .5rem; }
.event-tail-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.2rem; }
.event-tail-settings fieldset { min-width: 0; padding: 1rem; border: 1px solid #d4e1da; border-radius: 12px; }
.event-tail-settings legend { padding: 0 .5rem; font-size: .95rem; font-weight: 650; }
.event-tail-settings input[type="range"] { width: 100%; accent-color: #176f59; margin: 1rem 0 0; }
.event-editor-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
.event-editor-actions span { font-size: .85rem; color: #64756d; }
.event-success { color: #176f59; background: #e9f5ef; border-radius: 10px; padding: 1rem; }
.pace-editor { margin-top: 1.5rem; scroll-margin-top: 1rem; }
.pace-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.result-detail > .event-editor { margin-bottom: 1.25rem; }
.result-detail h2 { font-size: 1.15rem; line-height: 1.4; }
.result-detail a:not(.button) { color: #176f59; }
.result-back { margin: .5rem 0; background: #e9f5ef; color: #176f59; }
.result-links { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; font-size: .9rem; }
.result-detail .result-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin: 0 0 1.5rem; }
.result-detail .result-facts dt { color: #64756d; font-size: .8rem; margin-bottom: .35rem; }
.result-detail .result-facts dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.result-scorecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.result-scorecards > div { background: var(--rating-bg, #f4f6f5); color: var(--rating-color, #52635c); padding: 1rem; border-radius: 12px; }
.result-scorecards span, .result-scorecards strong { display: block; }
.result-scorecards span { font-size: .85rem; }
.result-scorecards strong { margin-top: .5rem; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.result-scorecards small { font-size: .8rem; font-weight: 400; }
.result-splits-wrap { overflow-x: auto; margin-top: 1rem; }
.result-splits-table { display: table; width: 100%; }
.result-splits-table thead { display: table-header-group; }
.result-splits-table tbody { display: table-row-group; }
.result-splits-table tr { display: table-row; }
.result-splits-table th, .result-splits-table td { display: table-cell; width: auto; padding: .65rem; border-bottom: 1px solid #e5ece9; white-space: nowrap; }
.result-splits-table td::before { display: none; }
@media (max-width: 760px) {
  .events-list { grid-template-columns: 1fr; }
  .site-menu { width: 100%; gap: .5rem; }
  .site-menu .button { flex: 1; font-size: .8rem; padding: .7rem .6rem; }
  .event-editor { padding: 1rem; }
  .event-editor-heading { flex-direction: column; }
  .event-editor-heading .button { width: 100%; }
  .event-zones { grid-template-columns: 1fr; }
  .event-input-pair { grid-template-columns: 1fr 1fr; }
  .event-tail-settings { grid-template-columns: 1fr; }
  .event-chart text { font-size: 16px; }
  .pace-editor .event-chart text { font-size: 28px; }
  .result-rating-preview .event-chart text { font-size: 28px; }
  .result-detail .result-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .result-scorecards > div { padding: .65rem; }
  .result-scorecards span { font-size: .75rem; }
  .result-scorecards strong { font-size: 1.3rem; }
  .result-scorecards small { font-size: .65rem; }
  .result-splits-table th, .result-splits-table td { padding: .6rem .35rem; font-size: .75rem; }
  .result-splits-table th { font-size: .6rem; letter-spacing: 0; }
  .event-preview .event-chart text { font-size: 24px; }
  .event-shell .site-header { flex-wrap: wrap; gap: 1rem; }
}