/* Results only styling. The site stylesheet (/styles.css) provides everything shared: layout, header, footer, cards, tags, colours and type. Generated from the former diary-theme.css on 30 September 2026. */

:root {
  --paper: #f5f3ee;
  --paper-soft: #ebe7de;
  --white: #ffffff;
  --ink: #111714;
  --muted-copy: #626b66;
  --heritage-green: #23322c;
  --heritage-green-soft: #31433a;
  --copper: #b8734a;
  --line: #dadeda;
  --background: #f5f3ee;
  --foreground: #111714;
  --card: #ffffff;
  --card-foreground: #111714;
  --popover: #ffffff;
  --popover-foreground: #111714;
  --primary: #23322c;
  --primary-foreground: #ffffff;
  --secondary: #ebe7de;
  --secondary-foreground: #23322c;
  --muted: #ebe7de;
  --muted-foreground: #626b66;
  --accent: #f2e7df;
  --accent-foreground: #6f3f27;
  --destructive: #a73a2c;
  --border: #dadeda;
  --input: #dadeda;
  --ring: #b8734a;
  --radius: 0.75rem;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

.eyebrow {
  margin: 0 0 12px;
  color: #e0a47e;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.resultsHeading > p {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-copy);
  font-size: 0.77rem;
  font-weight: 650;
}

.resultsHeading > p svg {
  width: 15px;
  color: var(--copper);
}

.detailsPanel summary {
  width: fit-content;
  color: #704a36;
  font-size: 0.77rem;
  font-weight: 800;
  cursor: pointer;
  list-style-position: outside;
}

.detailGrid {
  margin-top: 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 24px;
  border-radius: 12px;
  background: #f5f4f0;
}

.detailGrid div {
  display: grid;
  gap: 3px;
}

.detailGrid span {
  color: #7a837f;
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sourcesGrid > div:first-child > p:last-child {
  margin: 20px 0 0;
  color: #c7d1cc;
  font-size: 0.91rem;
}

footer {
  padding: 27px 0;
  background: #17211d;
  color: #d8dfdc;
}

@media (max-width: 620px) {
  .resultsHeading {
    margin-top: 34px;
  }
  .resultsHeading > p {
    display: none;
  }
  .eventEssentials,
  .detailGrid {
    grid-template-columns: 1fr;
  }
  .detailGrid {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

main {
  max-width: none;
  margin: 0;
  padding: 0;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.resultsNav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navBtn {
  position: relative;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #36423d;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
}

.navBtn::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  background: var(--copper);
  content: "";
  opacity: 0;
  transform: scaleX(0.5);
  transition: 180ms ease;
}

.navBtn:hover,
.navBtn:focus-visible,
.navBtn.active {
  background: transparent;
  color: var(--heritage-green);
  box-shadow: none;
}

.navBtn:hover::after,
.navBtn:focus-visible::after,
.navBtn.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.resultsSubpageHeader,
.resultsSubpageIntroContent {
  min-height: 292px;
}

.resultsSubpageIntroContent {
  padding-top: 54px;
  padding-bottom: 88px;
}

.resultsSubpageIntroCopy {
  max-width: 880px;
}

.resultsSubpageIntroCopy h1 {
  max-width: 880px;
  font-size: clamp(2.7rem, 5.2vw, 4.8rem);
  letter-spacing: -0.04em;
}

.resultsSubpageIntroCopy > p:last-child {
  max-width: 760px;
}

/* The noun after the hero count has its own span so it can be singular. It
   keeps the count's bold white text, not the small grey caption style that
   /styles.css gives every .coverageStamp span. */
.coverageStamp strong #heroCountNoun {
  color: inherit;
  font: inherit;
}

.summaryView {
  padding-bottom: 64px;
}

.summaryOverviewCard .summaryInfo {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.summaryOverviewCard .summaryInfo > div {
  padding: 10px 24px;
  border: 0;
  border-right: 1px solid #e3e5e2;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.summaryOverviewCard .summaryInfo > div:first-child {
  padding-left: 0;
}

.summaryOverviewCard .summaryInfo > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.summaryInfo span {
  margin-bottom: 6px;
  display: block;
  color: #8f5430;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.summaryInfo strong {
  color: var(--heritage-green);
  font-size: 0.86rem;
  line-height: 1.45;
}

.resultsCollectionSection {
  padding-top: 48px;
  padding-bottom: 90px;
}

.resultsFilterPanel {
  grid-template-columns: 160px repeat(4, minmax(130px, 1fr)) auto;
}

.filterInput {
  width: 100%;
  height: 41px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: #fbfbf9;
  color: var(--ink);
  font-size: 0.82rem;
}

.filterInput:focus,
.searchCard select:focus,
.scoreInputRow input:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(184, 115, 74, 0.13);
}

.resultsFilterPanel .clearButton {
  grid-column: auto;
  justify-self: end;
  min-height: 41px;
  padding: 0 12px;
  border: 1px solid #cfd4d0;
  border-radius: 9px;
  background: var(--white);
  color: #704a36;
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 750;
}

.resultsFilterPanel .clearButton:hover,
.resultsFilterPanel .clearButton:focus-visible {
  border-color: #aeb8b2;
  background: var(--paper-soft);
  color: var(--heritage-green);
}

.archerMatches {
  margin-top: 14px;
}

.matchStrip {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid #ead2bf;
  border-radius: 10px;
  background: #f2e7df;
}

.matchStrip > span {
  color: #8a4f31;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.archerPill {
  padding: 7px 10px;
  border: 1px solid #e0c9b6;
  border-radius: 999px;
  background: var(--white);
  color: #6f3f27;
  box-shadow: none;
  font-size: 0.75rem;
}

.eventCard.tournamentCard,
.eventCard.profileCard {
  min-width: 0;
  padding: 0;
}

.eventEssentials p strong {
  color: #3e4944;
  font-weight: 700;
}

.eventEssentials p span {
  min-width: 0;
}

.eventActions button {
  height: 38px;
  width: auto;
  margin: 0;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #cfd4d0;
  border-radius: 9px;
  background: var(--white);
  color: #405049;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 750;
}

.eventActions button:hover,
.eventActions button:focus-visible {
  border-color: #aeb8b2;
  background: var(--paper-soft);
  color: var(--heritage-green);
}

.archerRail {
  min-height: 100%;
  padding: 24px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--heritage-green);
  color: var(--white);
  text-align: center;
}

.archerRail span {
  color: #e3ad89;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.archerRail strong {
  margin: 10px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.archerRail small {
  color: #aebbb5;
  font-size: 0.55rem;
  font-weight: 750;
  letter-spacing: 0.09em;
}

.compactScoreTrend {
  margin: 17px 0 0;
  padding: 13px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfbf9;
  color: var(--copper);
}

.scoreTrendKey,
.scoreTrendAxis {
  display: grid;
  align-items: center;
  gap: 10px;
  color: var(--muted-copy);
  font-size: 0.62rem;
  font-weight: 750;
}

.scoreTrendKey {
  grid-template-columns: 1fr auto;
}

.scoreTrendKey span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.scoreTrendKey i {
  position: relative;
  width: 25px;
  height: 3px;
  display: inline-block;
  border-radius: 999px;
  background: var(--copper);
}

.scoreTrendKey i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid var(--copper);
  border-radius: 50%;
  background: var(--white);
  content: "";
  transform: translate(-50%, -50%);
}

.spark {
  width: 100%;
  height: 78px;
  margin-top: 8px;
  display: block;
  overflow: visible;
  color: var(--copper);
}

.spark circle {
  fill: var(--white);
  stroke: var(--copper);
  stroke-width: 3;
}

.scoreTrendAxis {
  grid-template-columns: 1fr auto 1fr;
  margin-top: 3px;
}

.scoreTrendAxis span:nth-child(2) {
  text-align: center;
}

.scoreTrendAxis span:last-child {
  text-align: right;
}

.scoreTrendEmpty {
  margin: 12px 0 4px !important;
  color: var(--muted-copy) !important;
  font-size: 0.75rem !important;
}

.standardPageBody {
  padding-top: 38px;
  padding-bottom: 72px;
}

.scoreSearchSection {
  margin-bottom: 72px;
}

.compareResultsBody {
  padding-top: 28px;
}

.searchCard.comparePicker,
.searchCard.scoreContext {
  padding: 27px 30px 30px;
  display: block;
}

.comparePickerControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 15px;
}

.comparePickerControls > span {
  padding-bottom: 13px;
  color: var(--muted-copy);
  font-weight: 850;
}

.searchCard select,
.scoreInputRow input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: #fbfbf9;
  color: var(--ink);
}

.contextForm {
  max-width: none;
}

.scoreSetup {
  margin-top: 0;
}

.analyseMultiScore {
  min-height: 48px;
  border: 0;
  border-radius: 11px;
  background: var(--copper);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(184, 115, 74, 0.23);
}

.analyseMultiScore:hover,
.analyseMultiScore:focus-visible {
  background: #a9623e;
}

.profileBack {
  margin: 0 0 14px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: #704a36;
  box-shadow: none;
  font-weight: 800;
}

.profilePage,
.compareHeadline,
.visualCompareBoard,
.performanceCompare,
.matchedCompare,
.profileHistory,
.profileTrendPanel,
.comparisonExplainer {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 7px 26px rgba(18, 31, 25, 0.055);
}

.profilePage {
  padding: 28px;
}

.profilePlainSummary,
.contextBox,
.multiScoreResult {
  border-radius: 14px;
  background: #f2e7df;
  color: var(--ink);
}

.profilePlainSummary {
  padding: 16px 18px;
}

.profileHistoryCaveat {
  margin-top: 8px;
  display: block;
}

.profileStatsIntro h2,
.profileHistoryHead h2,
.profileTrendHead h2,
.compareHeadline h3,
.performanceCompare h3,
.matchedCompare h3 {
  color: var(--heritage-green);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.profilePageStats > div,
.miniStats > div,
.confidence,
.combinedScore,
.roundEdge,
.contextMiniStats > div,
.resultTotalsGrid > div,
.resultBreakdownGrid > div {
  background: var(--paper-soft);
}

.profilePageStats > div {
  border-radius: 10px;
}

.profileScoreKey > span,
.chip {
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: #56615b;
}

.profileTrendPanel {
  margin-top: 20px;
  padding: 18px;
  border-radius: 14px;
  box-shadow: none;
}

.profileTrendPanel .scoreTrend {
  margin: 14px 0 0;
}

.scoreTrend {
  padding: 13px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfbf9;
}

.profileHistory {
  box-shadow: none;
}

.profileResult {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfbf9;
}

.profileResult summary {
  background: #f7f5f0;
  color: var(--heritage-green);
}

.profileResult[open] summary {
  background: var(--paper-soft);
}

.profileResultBody {
  border-color: var(--line);
  background: var(--white);
}

.profileTournamentName,
.profilePageStats strong,
.resultTotalsGrid strong,
.resultBreakdownGrid strong {
  color: var(--heritage-green);
}

.profileScoreLine,
.mobileResultPos,
.roundCheckCard em {
  color: #8a4f31;
}

.compareHeadline,
.visualCompareBoard,
.performanceCompare,
.matchedCompare {
  margin-top: 14px;
  padding: 18px;
  border-radius: 16px;
  box-shadow: none;
}

.sideBySideCharts > article,
.matchedRoundCard,
.roundCheckCard {
  border-color: var(--line);
  background: #fbfbf9;
}

.comparisonExplainer {
  margin-top: 14px;
  padding: 15px;
  border-radius: 12px;
  background: #f2e7df;
  box-shadow: none;
}

.compareBar span,
.chartBarTrack i,
.rankBar span {
  background: var(--copper);
}

.dialogInner h2 {
  color: var(--heritage-green);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.025em;
}

dialog {
  border: 0;
  background: var(--white);
  color: var(--ink);
}

.dialogClose {
  background: var(--paper-soft);
  color: var(--heritage-green);
}

.tournamentResultGroup {
  border-color: var(--line);
  background: var(--white);
}

.tournamentResultGroupHead {
  border-color: var(--line);
  background: #f2e7df;
}

.attendanceNote {
  border-left: 3px solid var(--copper);
  background: #f2e7df;
}

.sourceLink,
.inlineTournamentBtn,
.archerNameBtn {
  color: #8a4f31;
}

.siteFooter {
  margin-top: 0;
}

.footerInner > p span {
  margin-top: 4px;
  display: block;
}

@media (max-width: 1040px) {
  .resultsFilterPanel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .resultsFilterPanel .filterTitle {
    grid-column: 1 / -1;
  }
  .resultsFilterPanel .clearButton {
    grid-column: 3;
  }
}

@media (max-width: 900px) {
  .summaryOverviewCard .summaryInfo {
    grid-template-columns: 1fr;
  }
  .summaryOverviewCard .summaryInfo > div,
  .summaryOverviewCard .summaryInfo > div:first-child,
  .summaryOverviewCard .summaryInfo > div:last-child {
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid #e3e5e2;
  }
  .summaryOverviewCard .summaryInfo > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 820px) {
  .resultsFilterPanel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .resultsFilterPanel .filterTitle {
    grid-column: 1 / -1;
  }
  .resultsFilterPanel .clearButton {
    grid-column: 2;
  }
}

@media (max-width: 620px) {
  .resultsSubpageHeader,
  .resultsSubpageIntroContent {
    min-height: 330px;
  }
  .resultsSubpageIntroContent {
    padding-top: 42px;
    padding-bottom: 98px;
  }
  .resultsSubpageIntroCopy h1 {
    font-size: clamp(2.4rem, 12.5vw, 3.25rem);
  }
  .resultsSubpageIntroCopy > p:last-child {
    margin-top: 17px;
    font-size: 0.91rem;
  }
  .resultsFilterPanel {
    grid-template-columns: 1fr;
  }
  .resultsFilterPanel .filterTitle,
  .resultsFilterPanel .clearButton {
    grid-column: 1;
  }
  .resultsFilterPanel .clearButton {
    justify-self: start;
  }
  .resultsHeading {
    align-items: flex-start;
    flex-direction: column;
  }
  .eventCard.profileCard {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .archerRail {
    padding: 19px 7px;
  }
  .archerRail strong {
    font-size: 1.25rem;
  }
  .eventActions button {
    width: 100%;
  }
  .comparePickerControls {
    grid-template-columns: 1fr;
  }
  .comparePickerControls > span {
    padding: 0;
    text-align: center;
  }
  .searchCard.comparePicker,
  .searchCard.scoreContext {
    padding: 21px 17px;
  }
  .profilePage {
    padding: 20px 15px;
  }
}

@media (max-width: 520px) {
  .scoreTrendAxis span:nth-child(2) {
    display: none;
  }
  .scoreTrendAxis {
    grid-template-columns: 1fr 1fr;
  }
}

:root {
  --bg: #f5f3ee;
  --panel: #ffffff;
  --text: #111714;
  --muted: #111714;
  --accent: #b8734a;
  --accentSoft: #f2e7df;
  --dark: #23322c;
}

.profileStatsIntro p,
.profilePageStats span,
.profilePageStats small,
.profileHistoryHead p,
.profileTrendHead p,
.profileResultMeta,
.resultTotalsGrid span,
.resultBreakdownGrid span,
.resultBreakdownLabel,
.historyYear,
.profileScoreKey > span,
.profileResultsBody .meta,
.dialogInner > p:not(.eyebrow),
.dialogInner .meta,
.detailGrid span,
.tournamentResultGroupHead span,
.detailTable th,
.mobileResultArcher .meta,
.mobileResultScore span,
.clickHint,
.attendanceNote,
.scoreSearchSection .multiScoreHead p,
.scoreSearchSection .scoreInputRow label,
.scoreSearchSection .combinedScore span,
.scoreSearchSection .contextLabel,
.scoreSearchSection .contextBox p,
.scoreSearchSection .contextMiniStats span,
.scoreSearchSection .multiScoreResult p,
.scoreSearchSection .roundCheckCard > span,
.scoreSearchSection .roundCheckCard p,
.scoreSearchSection .roundCheckCard small,
.scoreSearchSection .roundCheckCard em,
.scoreSearchSection .combinedCheck p,
.scoreSearchSection .combinedCheck small,
.scoreSearchSection .combinedCheck em,
.scoreSearchSection .meta,
.compareResultsBody .compareHeadline p,
.compareResultsBody .confidence span,
.compareResultsBody .archerCompareHead small,
.compareResultsBody .versusBadge,
.compareResultsBody .metricCentre small,
.compareResultsBody .metricCentre em,
.compareResultsBody .quickFactRow strong,
.compareResultsBody .quickFactRow span,
.compareResultsBody .performanceCompareHead p,
.compareResultsBody .chartScale,
.compareResultsBody .chartValue,
.compareResultsBody .chartColumn small,
.compareResultsBody .matchedRoundTitle span,
.compareResultsBody .matchedRoundValues small,
.compareResultsBody .matchedRoundValues span,
.compareResultsBody .comparisonExplainer p,
.compareResultsBody .compareNote,
.compareResultsBody .meta {
  color: #111714 !important;
}

.dialogInner .detailGrid > div {
  background: #ebe7de !important;
  color: #111714 !important;
}

.compareResultsBody .quickCompareFacts {
  margin-top: 16px;
  padding: 5px 14px;
  border: 1px solid #dadeda;
  border-radius: 12px;
  background: #f5f3ee;
}

.compareResultsBody .quickFactRow {
  border-bottom: 1px solid #dadeda;
  background: transparent !important;
  color: #111714 !important;
}

.compareResultsBody .quickFactRow:last-child {
  border-bottom: 0;
}

.compareResultsBody .quickFactRow span {
  font-weight: 750;
}

.empty {
  border-color: #dadeda !important;
  background: #ffffff !important;
  color: #111714 !important;
}

#archerGrid .eventContent,
#tournamentGrid .eventContent,
#archerProfilePage .profilePage,
#detailDialog .dialogInner,
#scorecheckView .scorePageCard,
#compareResult {
  color: #111714 !important;
}

#archerGrid .eventContent :where(h1, h2, h3, h4, p, span, strong, small, b, em, label, button, a, th, td),
#tournamentGrid .eventContent :where(h1, h2, h3, h4, p, span, strong, small, b, em, label, button, a, th, td),
#archerProfilePage .profilePage :where(h1, h2, h3, h4, p, span, strong, small, b, em, label, button, a, th, td),
#detailDialog .dialogInner :where(h1, h2, h3, h4, p, span, strong, small, b, em, label, button, a, th, td),
#scorecheckView .scorePageCard :where(h1, h2, h3, h4, p, span, strong, small, b, em, label, button, a, th, td),
#compareResult :where(h1, h2, h3, h4, p, span, strong, small, b, em, label, button, a, th, td) {
  color: #111714 !important;
  -webkit-text-fill-color: #111714 !important;
  opacity: 1 !important;
}

#compareResult .quickCompareFacts {
  overflow: hidden !important;
  border: 1px solid #c9cec9 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

#compareResult .quickFactRow {
  border-bottom: 1px solid #c9cec9 !important;
  background: #ffffff !important;
}

#compareResult .quickFactRow:last-child {
  border-bottom: 0 !important;
}

#compareResult .quickFactRow > * {
  color: #111714 !important;
  -webkit-text-fill-color: #111714 !important;
  opacity: 1 !important;
}

#compareResult .quickFactRow span {
  margin: -9px 0 !important;
  padding: 9px 6px !important;
  background: #ebe7de !important;
  font-weight: 800 !important;
}

.resultBreakdownGrid strong { overflow-wrap:anywhere; min-width:0; }

.resultBreakdownGrid strong:has(.resultNestedRow) { font-size:.875rem; line-height:1.45; font-weight:500; }

.resultBreakdownGrid .resultNestedRow { display:block; margin:0 0 .45rem; }

.resultBreakdownGrid .resultNestedRow > span:first-child { font-size:.72rem; font-weight:600; text-transform:capitalize; }

.resultBreakdownGrid .resultNestedRow > span:last-child { font-size:inherit; font-weight:inherit; text-transform:none; color:inherit; }

.resultBreakdownGrid .resultNestedRow a { overflow-wrap:anywhere; font-size:.8rem; }

.resultsPagination {
  padding: 24px;
  text-align: center;
}

.resultsPagination p {
  margin: 0 0 12px;
  color: #6f7873;
  font-size: .75rem;
  font-weight: 650;
}

.resultsPagination button {
  min-height: 44px;
  cursor: pointer;
}

.resultsPagination [hidden] {
  display: none;
}

.dateBlockRange strong {
  font-size: 2rem;
  letter-spacing: -.04em;
}

.dateBlockRange span {
  letter-spacing: .08em;
}

.compareArcherLink {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a4f31;
  font: inherit;
  font-weight: 850;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
  /* A long name wraps on a phone rather than being cut short. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.compareArcherLink:hover {
  text-decoration: underline;
}

.compareArcherLink:focus-visible {
  border-radius: 3px;
  outline: 3px solid rgba(184, 115, 74, .35);
  outline-offset: 3px;
}

/* Recent performance: up to 900px wide the bars are too narrow for a date
   under each, so only the first and last dates show, at the chart's ends.
   The middle dates are clipped from view, not hidden, so screen readers
   still read every date. */
@media (max-width: 900px) {
  .chartColumn {
    grid-template-columns: minmax(0, 1fr);
  }
  .chartColumn small {
    clip-path: inset(50%);
  }
  .chartColumn:first-child small,
  .chartColumn:last-child small {
    width: max-content;
    overflow: visible;
    clip-path: none;
  }
  .chartColumn:first-child small {
    justify-self: start;
  }
  .chartColumn:last-child small {
    justify-self: end;
  }
  .chartColumn:only-child small {
    justify-self: center;
  }
}

@media (max-width: 620px) {
  .dateBlockRange strong {
    font-size: 1.5rem;
  }
  .dateBlockRange span {
    font-size: .54rem;
  }
}

/* Site look reasserted where the Results app stylesheet, injected after the site stylesheet, would otherwise win. */
.eyebrow.darkEyebrow { color: #8f5430; }
.tag { color: #637069; }
.tagGreen { color: #355344; }

/* ===================== AUTO DARK COUNTERS ===================== */
/* Dark counters for the light-locks above (generated), then hand overrides. */
html[data-theme="dark"] .profileStatsIntro p,
html[data-theme="dark"] .profilePageStats span,
html[data-theme="dark"] .profilePageStats small,
html[data-theme="dark"] .profileHistoryHead p,
html[data-theme="dark"] .profileTrendHead p,
html[data-theme="dark"] .profileResultMeta,
html[data-theme="dark"] .resultTotalsGrid span,
html[data-theme="dark"] .resultBreakdownGrid span,
html[data-theme="dark"] .resultBreakdownLabel,
html[data-theme="dark"] .historyYear,
html[data-theme="dark"] .profileScoreKey > span,
html[data-theme="dark"] .profileResultsBody .meta,
html[data-theme="dark"] .dialogInner > p:not(.eyebrow),
html[data-theme="dark"] .dialogInner .meta,
html[data-theme="dark"] .detailGrid span,
html[data-theme="dark"] .tournamentResultGroupHead span,
html[data-theme="dark"] .detailTable th,
html[data-theme="dark"] .mobileResultArcher .meta,
html[data-theme="dark"] .mobileResultScore span,
html[data-theme="dark"] .clickHint,
html[data-theme="dark"] .attendanceNote,
html[data-theme="dark"] .scoreSearchSection .multiScoreHead p,
html[data-theme="dark"] .scoreSearchSection .scoreInputRow label,
html[data-theme="dark"] .scoreSearchSection .combinedScore span,
html[data-theme="dark"] .scoreSearchSection .contextLabel,
html[data-theme="dark"] .scoreSearchSection .contextBox p,
html[data-theme="dark"] .scoreSearchSection .contextMiniStats span,
html[data-theme="dark"] .scoreSearchSection .multiScoreResult p,
html[data-theme="dark"] .scoreSearchSection .roundCheckCard > span,
html[data-theme="dark"] .scoreSearchSection .roundCheckCard p,
html[data-theme="dark"] .scoreSearchSection .roundCheckCard small,
html[data-theme="dark"] .scoreSearchSection .roundCheckCard em,
html[data-theme="dark"] .scoreSearchSection .combinedCheck p,
html[data-theme="dark"] .scoreSearchSection .combinedCheck small,
html[data-theme="dark"] .scoreSearchSection .combinedCheck em,
html[data-theme="dark"] .scoreSearchSection .meta,
html[data-theme="dark"] .compareResultsBody .compareHeadline p,
html[data-theme="dark"] .compareResultsBody .confidence span,
html[data-theme="dark"] .compareResultsBody .archerCompareHead small,
html[data-theme="dark"] .compareResultsBody .versusBadge,
html[data-theme="dark"] .compareResultsBody .metricCentre small,
html[data-theme="dark"] .compareResultsBody .metricCentre em,
html[data-theme="dark"] .compareResultsBody .quickFactRow strong,
html[data-theme="dark"] .compareResultsBody .quickFactRow span,
html[data-theme="dark"] .compareResultsBody .performanceCompareHead p,
html[data-theme="dark"] .compareResultsBody .chartScale,
html[data-theme="dark"] .compareResultsBody .chartValue,
html[data-theme="dark"] .compareResultsBody .chartColumn small,
html[data-theme="dark"] .compareResultsBody .matchedRoundTitle span,
html[data-theme="dark"] .compareResultsBody .matchedRoundValues small,
html[data-theme="dark"] .compareResultsBody .matchedRoundValues span,
html[data-theme="dark"] .compareResultsBody .comparisonExplainer p,
html[data-theme="dark"] .compareResultsBody .compareNote,
html[data-theme="dark"] .compareResultsBody .meta {
  color: #e8ece6 !important;
}
html[data-theme="dark"] .dialogInner .detailGrid > div {
  background: #222a26 !important;
  color: #e8ece6 !important;
}
html[data-theme="dark"] .compareResultsBody .quickFactRow {
  background: transparent !important;
  color: #e8ece6 !important;
}
html[data-theme="dark"] .empty {
  border-color: #2b332f !important;
  background: #1a201d !important;
  color: #e8ece6 !important;
}
html[data-theme="dark"] #archerGrid .eventContent,
html[data-theme="dark"] #tournamentGrid .eventContent,
html[data-theme="dark"] #archerProfilePage .profilePage,
html[data-theme="dark"] #detailDialog .dialogInner,
html[data-theme="dark"] #scorecheckView .scorePageCard,
html[data-theme="dark"] #compareResult {
  color: #e8ece6 !important;
}
html[data-theme="dark"] #archerGrid .eventContent :where(h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] strong,
html[data-theme="dark"] small,
html[data-theme="dark"] b,
html[data-theme="dark"] em,
html[data-theme="dark"] label,
html[data-theme="dark"] button,
html[data-theme="dark"] a,
html[data-theme="dark"] th,
html[data-theme="dark"] td),
html[data-theme="dark"] #tournamentGrid .eventContent :where(h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] strong,
html[data-theme="dark"] small,
html[data-theme="dark"] b,
html[data-theme="dark"] em,
html[data-theme="dark"] label,
html[data-theme="dark"] button,
html[data-theme="dark"] a,
html[data-theme="dark"] th,
html[data-theme="dark"] td),
html[data-theme="dark"] #archerProfilePage .profilePage :where(h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] strong,
html[data-theme="dark"] small,
html[data-theme="dark"] b,
html[data-theme="dark"] em,
html[data-theme="dark"] label,
html[data-theme="dark"] button,
html[data-theme="dark"] a,
html[data-theme="dark"] th,
html[data-theme="dark"] td),
html[data-theme="dark"] #detailDialog .dialogInner :where(h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] strong,
html[data-theme="dark"] small,
html[data-theme="dark"] b,
html[data-theme="dark"] em,
html[data-theme="dark"] label,
html[data-theme="dark"] button,
html[data-theme="dark"] a,
html[data-theme="dark"] th,
html[data-theme="dark"] td),
html[data-theme="dark"] #scorecheckView .scorePageCard :where(h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] strong,
html[data-theme="dark"] small,
html[data-theme="dark"] b,
html[data-theme="dark"] em,
html[data-theme="dark"] label,
html[data-theme="dark"] button,
html[data-theme="dark"] a,
html[data-theme="dark"] th,
html[data-theme="dark"] td),
html[data-theme="dark"] #compareResult :where(h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] strong,
html[data-theme="dark"] small,
html[data-theme="dark"] b,
html[data-theme="dark"] em,
html[data-theme="dark"] label,
html[data-theme="dark"] button,
html[data-theme="dark"] a,
html[data-theme="dark"] th,
html[data-theme="dark"] td) {
  color: #e8ece6 !important;
  -webkit-text-fill-color: #e8ece6 !important;
}
html[data-theme="dark"] #compareResult .quickCompareFacts {
  background: #1a201d !important;
}
html[data-theme="dark"] #compareResult .quickFactRow {
  background: #1a201d !important;
}
html[data-theme="dark"] #compareResult .quickFactRow > * {
  color: #e8ece6 !important;
  -webkit-text-fill-color: #e8ece6 !important;
}
html[data-theme="dark"] #compareResult .quickFactRow span {
  background: #222a26 !important;
}

/* Results app extra tokens used by results-app.css. */
html[data-theme="dark"] { --bg:#13181a; --panel:#1a201d; --text:#e8ece6; --muted:#9aa49d; --accentSoft:#2a231d; --dark:#243a31; }

/* Surfaces in results-theme.css (not !important). */
html[data-theme="dark"] .archerRail { background: var(--surface-green, #243a31); }
html[data-theme="dark"] .detailGrid { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .filterInput,
html[data-theme="dark"] .searchCard select,
html[data-theme="dark"] .scoreInputRow input,
html[data-theme="dark"] .compactScoreTrend,
html[data-theme="dark"] .scoreTrend,
html[data-theme="dark"] .profileResult,
html[data-theme="dark"] .sideBySideCharts > article,
html[data-theme="dark"] .matchedRoundCard,
html[data-theme="dark"] .roundCheckCard { background: #111814; }
html[data-theme="dark"] .resultsFilterPanel .clearButton { background: #1a201d; border-color: #2b332f; color: #e0a77f; }
html[data-theme="dark"] .resultsFilterPanel .clearButton:hover,
html[data-theme="dark"] .resultsFilterPanel .clearButton:focus-visible { background: #222a26; border-color: #3a443e; color: #e8ece6; }
html[data-theme="dark"] .matchStrip,
html[data-theme="dark"] .profilePlainSummary,
html[data-theme="dark"] .contextBox,
html[data-theme="dark"] .multiScoreResult,
html[data-theme="dark"] .comparisonExplainer,
html[data-theme="dark"] .tournamentResultGroupHead,
html[data-theme="dark"] .attendanceNote,
html[data-theme="dark"] .compareResultsBody .quickCompareFacts { background: rgba(205,138,96,.12); border-color: #7a4e36; }
html[data-theme="dark"] .matchStrip > span,
html[data-theme="dark"] .summaryInfo span,
html[data-theme="dark"] .profileScoreLine,
html[data-theme="dark"] .mobileResultPos,
html[data-theme="dark"] .sourceLink,
html[data-theme="dark"] .inlineTournamentBtn,
html[data-theme="dark"] .archerNameBtn,
html[data-theme="dark"] .profileBack,
html[data-theme="dark"] .compareArcherLink { color: #e0a77f; }
html[data-theme="dark"] .archerPill,
html[data-theme="dark"] .eventActions button,
html[data-theme="dark"] .profileResult summary { background: #1a201d; border-color: #2b332f; color: #cfe0d8; }
html[data-theme="dark"] .profileResult[open] summary,
html[data-theme="dark"] .dialogClose { background: #222a26; color: #e8ece6; }
html[data-theme="dark"] .profileScoreKey > span,
html[data-theme="dark"] .chip { background: rgba(255,255,255,.05); border-color: #2b332f; color: #c6cdc7; }
html[data-theme="dark"] .navBtn { color: #c6cdc7; }
html[data-theme="dark"] .summaryOverviewCard .summaryInfo > div { border-right-color: #2b332f; border-bottom-color: #2b332f; }
html[data-theme="dark"] .resultsPagination p { color: #9aa49d; }
html[data-theme="dark"] .profileResultBody,
html[data-theme="dark"] dialog { background: #1a201d; }

/* ===== AUTO DARK: every light card/panel background -> dark ===== */
html[data-theme="dark"] .empty{background:var(--card)!important}
html[data-theme="dark"] #compareResult .quickCompareFacts{background:var(--card)!important}
html[data-theme="dark"] #compareResult .quickFactRow{background:var(--card)!important}
html[data-theme="dark"] input,
html[data-theme="dark"] select{background:var(--card)!important}
html[data-theme="dark"] .resultCard{background:var(--card)!important}
html[data-theme="dark"] .profileCard,
html[data-theme="dark"] .tournamentCard{background:var(--card)!important}
html[data-theme="dark"] .comparePicker{background:var(--card)!important}
html[data-theme="dark"] .comparePanel{background:var(--card)!important}
html[data-theme="dark"] .scoreContext{background:var(--card)!important}
html[data-theme="dark"] .empty{background:var(--card)!important}
html[data-theme="dark"] .compareHeadline{background:var(--card)!important}
html[data-theme="dark"] .matchedCompare{background:var(--card)!important}
html[data-theme="dark"] .archerPill{background:var(--card)!important}
html[data-theme="dark"] .profileResultBody{background:var(--card)!important}
html[data-theme="dark"] .profilePage{background:var(--card)!important}
html[data-theme="dark"] .multiScoreResult{background:var(--card)!important}
html[data-theme="dark"] .visualCompareBoard,
html[data-theme="dark"] .performanceCompare{background:var(--card)!important}
html[data-theme="dark"] .summaryInfo>div{background:var(--card)!important}

/* ===== Dark: fixes for borders, the detail dialog groups, and the archer suggestions list ===== */
html[data-theme="dark"]{--border:#2b332f;--shadow:0 12px 34px rgba(0,0,0,.4)}
html[data-theme="dark"] .tournamentResultGroup{background:#1a201d!important}
html[data-theme="dark"] .tournamentResultGroupHead{background:rgba(205,138,96,.12)!important}
html[data-theme="dark"] .compareArcherList{background:#1a201d!important;border-color:#2b332f;box-shadow:0 16px 40px rgba(0,0,0,.55)}
html[data-theme="dark"] .compareArcherList li:hover,
html[data-theme="dark"] .compareArcherList li[aria-selected="true"]{background:rgba(205,138,96,.18);color:#e0a77f}
html[data-theme="dark"] .compareArcherList li.compareArcherEmpty{color:#9aa49d}