/* Race record — S/Y Astarte: totals, legend, years, events, medals and fleet strips.
   Shared by the stand-alone page (with shell.css) and antidot.gr/astarte/racing.html (with the
   site's astarte.css), so it only relies on the shared tokens and adds its own below. */

:root {
  --gold: #b8892c;
  --silver: #8c969c;
  --bronze: #a2623a;
}

/* Labels in the race record use the text face, small and spaced, not a monospace. */
.race-record { --mono: var(--sans); }
.race-record .mono { font-family: var(--sans); font-size: 0.74em; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

.section-tight { padding-top: 0; }
.spec-grid dt .medal { width: 1.1rem; height: 1.1rem; vertical-align: -0.35em; margin-right: 0.3em; }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.2rem; color: var(--ink-soft); }
.legend li { display: flex; align-items: center; gap: 0.45rem; }

/* ---------- year ---------- */
.year { border-top: 1px solid var(--ink-faint); }
.year-head {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 4vw, 3rem); align-items: end;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.year-num { font-family: var(--serif); font-size: clamp(4rem, 14vw, 9rem); line-height: 0.85; letter-spacing: -0.02em; }
.rank-card { justify-self: end; text-align: right; max-width: 26rem; }
.rank-k { color: var(--ink-soft); }
.rank-v { font-family: var(--sans); line-height: 1; margin: 0 0 0.4rem; }
.rank-n { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 500; letter-spacing: -0.02em; color: var(--accent-deep); }
.rank-of { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--ink-soft); }
.rank-d { color: var(--ink-soft); margin-top: 0.2rem; }
.rank-none { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .year-head { grid-template-columns: 1fr; }
  .rank-card { justify-self: start; text-align: left; }
}

/* ---------- event rows ---------- */
.cols, .row {
  display: grid; align-items: baseline; column-gap: clamp(0.6rem, 2vw, 1.5rem);
  grid-template-columns: 4.6rem minmax(0, 1fr) 9rem 8rem 3.6rem;
}
.cols { color: var(--ink-soft); padding: 0 0 0.5rem; border-bottom: 1px solid var(--ink); }
.events, .legs { list-style: none; }
.event { border-bottom: 1px solid var(--ink-faint); }
.row { padding: 0.55rem 0; position: relative; }
.c-date { color: var(--ink-soft); white-space: nowrap; }
.c-main { min-width: 0; }
.ev-name { font-family: var(--sans); font-weight: 500; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.25; letter-spacing: -0.01em; display: block; }
.leg-name { font-size: 0.95rem; display: block; }
.meta { display: block; color: var(--ink-soft); margin-top: 0.1rem; font-size: 0.66rem; }
.note { display: block; font-style: italic; color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.2rem; }
.c-ovl, .c-div { white-space: nowrap; font-size: 0.9rem; }
.c-ovl b, .c-div b { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.c-ovl small { display: block; color: var(--ink-soft); font-size: 0.62rem; }
.of { color: var(--ink-soft); }
.leg-places b { font-size: 1.05rem; }
.divname { color: var(--sea); font-weight: 700; }
.dash { color: var(--ink-faint); }
.c-medals { display: flex; flex-wrap: wrap; gap: 0.2rem; justify-content: flex-end; align-items: center; align-self: center; }
.leg-medals { display: contents; }
/* Open event: the race medals cross-fade from the event row to their own rows; the series medal
   stays on top. Opacity only: nothing moves or reflows. */
.leg-medals .medal { opacity: 0.7; transition: opacity 0.5s ease, visibility 0s; }
.event details[open] .leg-medals .medal { opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s; }
.event details[open] .legs .medal { animation: medal-in 0.8s ease 0.1s backwards; }
@keyframes medal-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .leg-medals .medal { transition: none; }
  .event details[open] .legs .medal { animation: none; }
}

.tag {
  display: inline-block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
  padding: 0.05rem 0.35rem; border: 1px solid var(--ink-soft); color: var(--ink); vertical-align: 1px;
}
.tag-soft { border-color: var(--ink-faint); color: var(--ink-soft); text-transform: none; }
.counted { color: var(--accent); font-size: 0.8em; }
.not-counted { color: var(--ink-soft); opacity: 0.75; text-transform: none; font-style: italic; }
/* Race not in the ranking list yet: a red dot that pulses, to check again later. */
.pending-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c0392b;
  margin-right: 0.35em; vertical-align: 0.05em; animation: pending-pulse 1.6s ease-in-out infinite;
}
.not-counted:has(.pending-dot) { opacity: 1; }
@keyframes pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.55); }
  60% { box-shadow: 0 0 0 5px rgba(192, 57, 43, 0); }
}
@media (prefers-reduced-motion: reduce) { .pending-dot { animation: none; } }

/* multi-race events open to their races */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
summary.row:hover .ev-name { color: var(--accent-deep); }
summary.row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chev {
  position: absolute; left: -1.1rem; top: 0.95rem; width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(-45deg); transition: transform 0.25s;
}
.event details[open] .chev { transform: rotate(45deg); }
.legs { margin: -0.3rem 0 0.8rem; border-left: 1px solid var(--accent); }
.legs .row { padding: 0.3rem 0; grid-template-columns: 4.6rem minmax(0, 1fr) 9rem 8rem 3.6rem; }
.legs .c-date { padding-left: 0.6rem; }
.legs .c-ovl b, .legs .c-div b { font-size: 0.95rem; font-weight: 500; }

/* ---------- medals ---------- */
.medal { display: inline-block; width: 1.3rem; height: 1.3rem; flex: none; }
.medal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.medal .ribbon { fill: var(--sea); opacity: 0.85; }
.medal text { font-family: var(--mono); font-size: 8px; font-weight: 700; }
.medal .disc { stroke: none; }
.medal .ring { fill: var(--paper); stroke-width: 2; }
.medal-gold .disc { fill: var(--gold); } .medal-gold .ring { stroke: var(--gold); }
.medal-silver .disc { fill: var(--silver); } .medal-silver .ring { stroke: var(--silver); }
.medal-bronze .disc { fill: var(--bronze); } .medal-bronze .ring { stroke: var(--bronze); }
.medal-overall text { fill: var(--paper); }
.medal-gold.medal-div text { fill: var(--gold); }
.medal-silver.medal-div text { fill: var(--silver); }
.medal-bronze.medal-div text { fill: var(--bronze); }

/* ---------- phones: stack the numbers under the name ---------- */
@media (max-width: 640px) {
  .cols { display: none; }
  .row, .legs .row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date medals" "main main" "ovl div";
    row-gap: 0.25rem;
  }
  .c-date { grid-area: date; } .c-main { grid-area: main; } .c-ovl { grid-area: ovl; }
  .c-div { grid-area: div; text-align: right; } .c-medals { grid-area: medals; }
  .chev { left: auto; right: 0; top: auto; bottom: 1.4rem; }
  .legs { padding-left: 0.6rem; }
}

/* ---------- fleet strip: every boat that sailed as a dot, the winner at the right edge of the
   column; long fleets run on to the left and fade towards the last finisher. ---------- */
.fleet { display: block; direction: rtl; white-space: nowrap; margin-top: 0.3rem; height: 7px; line-height: 7px; }
.fleet i { display: inline-block; vertical-align: middle; width: 3px; height: 3px; margin-left: 2px; border-radius: 50%; background: var(--ink-soft); }
.fleet i.me { width: 7px; height: 7px; margin: 0 1px 0 3px; opacity: 1 !important; }
.fleet i.podium { background: var(--gold); box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--gold); }
.fleet i.top { background: var(--sea); }
.fleet i.mid { background: var(--accent); }
.fleet i.low { background: #a24b3a; }
.legend .fleet { margin-top: 0; display: inline-block; }
.c-ovl small { margin-top: 0.15rem; }
/* Places line up on the right, where each strip's winner sits. */
.c-ovl, .c-div, .cols span:nth-child(3), .cols span:nth-child(4) { text-align: right; }

/* ---------- years as accordions ---------- */
details.year > summary { list-style: none; cursor: pointer; }
details.year > summary::-webkit-details-marker { display: none; }
details.year > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
details.year:not([open]) .year-head { margin-bottom: 0; }
details.year:not([open]) { padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.year-toggle {
  order: 3; width: 0.6rem; height: 0.6rem; margin: 0 0.2rem 0.2rem 0;
  border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform 0.25s;
}
.section-label::after { order: 2; }
details.year[open] .year-toggle { transform: rotate(-135deg); margin-bottom: -0.2rem; }
details.year > summary:hover .year-num { color: var(--accent-deep); }
details.year { padding-top: clamp(1.5rem, 4vh, 2.5rem); }
/* Year heading: the year's figures and the arrow on the right, no small year label, no rule. */
.year .section-label::after { display: none; }
.year .section-label > span:first-child { order: 2; margin-left: auto; }

/* Spacing that holds under either shell (antidot.gr's sections are roomier than shell.css's). */
details.year.section[open] { padding-bottom: clamp(2.5rem, 7vh, 5rem); }
.race-record > .section-tight { padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.race-sources p + p { margin-top: 0.3rem; }