/* swimstats — brand charcoal theme (see BRAND.md, the design source of
   truth). Palette: charcoal bg, panel surfaces, cyan→pink gradient
   accent, chart series order cyan/pink/purple/lime. A stroke always
   maps to the same hue across every page (--stroke-* + app.js). */
:root {
  --bg:        #1B1D21;   /* --charcoal */
  --surface:   #22252B;   /* --panel */
  --surface-2: #2B2F36;
  --line:      #34383F;
  --text:      #E8EAED;
  --text-dim:  #8A8F98;   /* --dim */
  --accent:    #21E6FF;   /* --cyan */
  --accent-2:  #FF3EA5;   /* --pink */
  --purple:    #9D4DFF;
  --lime:      #C6FF4D;

  /* brand chart series (cyan, pink, purple, lime) assigned per stroke
     for cross-page consistency; IM gets the neutral text tone as the
     fifth series */
  --stroke-freestyle:    #21E6FF;
  --stroke-backstroke:   #FF3EA5;
  --stroke-breaststroke: #9D4DFF;
  --stroke-butterfly:    #C6FF4D;
  --stroke-im:           #E8EAED;
  --stroke-other:        #8A8F98;

  --radius: 10px;
  --maxw: 960px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  /* wide content scrolls inside its own container (tables, split
     bars); the page itself must never scroll sideways on mobile */
  overflow-x: clip;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* header / footer */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;                 /* nav drops under the brand on
                                      narrow screens instead of
                                      widening the page */
  gap: .5rem 1rem; padding: .85rem 1.25rem;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
/* wordmark (BRAND.md): monospace face; "swim" in text colour, "stats"
   in the cyan→pink gradient */
.brand, .hero h1 {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  color: var(--text);
}
.brand { font-weight: 700; font-size: 1.15rem;
         display: inline-flex; align-items: center; gap: .5rem; }
.brand-mark { width: 26px; height: 26px; display: block;
              border-radius: 6px; }
.brand span, .hero h1 span {
  background: linear-gradient(90deg, #21E6FF, #FF3EA5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-header nav a { color: var(--text-dim); margin-left: 1rem; }
.header-nav { display: flex; align-items: center; gap: .25rem; }
.header-search input, .search-input {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .35rem .6rem; font-size: .9rem; min-width: 170px;
}
.search-input {
  width: 100%; max-width: 440px; font-size: 1.05rem;
  padding: .55rem .8rem; margin: .25rem 0 1rem;
}
.header-search input:focus, .search-input:focus {
  outline: 2px solid var(--accent); border-color: transparent;
}
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results li { padding: .4rem .1rem;
                     border-bottom: 1px solid var(--line); }
.search-results .subtle { font-size: .82rem; margin-left: .4rem; }
.search-notice { padding: .5rem 0; }

/* rankings */
.rankings-controls { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem;
                     margin: 0 0 1.2rem; }
.rankings-controls label { display: flex; flex-direction: column;
                           gap: .25rem; font-size: .8rem;
                           color: var(--text-dim); }
.rankings-controls select {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .35rem .5rem; font-size: .92rem; min-width: 110px;
}
.rankings-table td, .rankings-table th { white-space: nowrap; }
.rankings-table { display: block; overflow-x: auto; }

/* browse (lsc / team / meet) */
.browse-list { list-style: none; padding: 0; margin: 0;
               columns: 2; column-gap: 2rem; }
.browse-list li { break-inside: avoid; margin-bottom: .45rem; }
.browse-list .subtle { display: block; font-size: .78rem; }
.event-block { margin: 1.4rem 0; }
.event-block h3 { font-size: .98rem; margin: 0 0 .4rem;
                  color: var(--text); }
.dq-row td { color: var(--text-dim); }
.dq-tag { color: var(--lime); font-size: .72rem; font-weight: 700;
          letter-spacing: .04em; }
.dq-reason { display: block; font-size: .75rem;
             color: var(--text-dim); }

/* venue pool-speed tags */
.pool-tag { display: inline-block; padding: .05rem .45rem;
            margin-left: .35rem; border-radius: 999px;
            font-size: .7rem; font-weight: 700; letter-spacing: .03em;
            border: 1px solid var(--line); text-decoration: none; }
.pool-fast { background: rgba(33, 230, 255, .14); color: var(--accent); }
.pool-slow { background: rgba(157, 77, 255, .16); color: var(--purple); }
a.venue-link:not(.pool-tag) { font-size: .72rem; margin-left: .35rem;
                              color: var(--text-dim); }

/* zone map + cards */
.zone-map-wrap { max-width: 560px; }
.zone-map { width: 100%; height: auto; display: block; }
.zone-map a rect { transition: fill-opacity .12s ease; }
.zone-map a:hover rect, .zone-map a:focus rect { fill-opacity: .45; }
.zone-cards { display: grid; gap: 1rem; margin: 1.2rem 0 1.4rem;
              grid-template-columns:
                  repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.zone-card { display: block; padding: .8rem 1rem;
             background: var(--surface); border: 1px solid var(--zc);
             border-radius: var(--radius); color: var(--text);
             text-decoration: none; }
.zone-card:hover { background: var(--surface-2); text-decoration: none; }
.zone-card b { color: var(--zc); display: block; margin-bottom: .15rem; }
.zone-section summary { cursor: pointer; list-style: none; }
.zone-section summary h2 { display: inline-block; }
.zone-section summary::before { content: "▸ "; color: var(--text-dim); }
.zone-section[open] summary::before { content: "▾ "; }

/* venue location */
.venue-map iframe { width: 100%; max-width: 640px; height: 300px;
                    border: 1px solid var(--line);
                    border-radius: var(--radius); display: block; }
.venue-address { max-width: 640px; }
.state-jump { margin-bottom: .5rem; }

/* reaction chart card spans the content column */
.reaction-card { max-width: 760px; }
.reaction-card canvas { width: 100%; height: auto; display: block; }
.reaction .chip b { font-weight: 700; margin-left: .25rem; }

/* motivational-cut chips: brightness ramps with the level */
.cut-chip { display: inline-block; padding: .05rem .45rem;
            margin-right: .35rem; border-radius: 999px;
            font-size: .72rem; font-weight: 700;
            border: 1px solid var(--line); color: #1b1e23; }
.cut-B    { background: #6d7683; }
.cut-BB   { background: #8A8F98; }
.cut-A    { background: #21E6FF; }
.cut-AA   { background: #9D4DFF; color: #E8EAED; }
.cut-AAA  { background: #C6FF4D; }
.cut-AAAA { background: #FF3EA5; color: #E8EAED; }

/* IMX cards */
.imx-grid { display: grid; gap: 1rem;
            grid-template-columns:
                repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.imx-card { background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius); padding: .8rem 1rem; }
.imx-card h3 { margin: 0 0 .3rem; font-size: 1rem; }
.imx-total { margin: .2rem 0 .6rem; }
.imx-total b { font-size: 1.4rem; }

/* PR split bars — a 1650's ~66 bars are far wider than any phone, so
   the strip scrolls inside itself */
.split-block { margin: 1.2rem 0; }
.split-block h3 { font-size: .98rem; margin: 0 0 .5rem; }
.split-bars { display: flex; align-items: flex-end; gap: 6px;
              padding: .4rem 0 .2rem;
              overflow-x: auto; max-width: 100%;
              -webkit-overflow-scrolling: touch; }
.split-bar { flex: 0 0 auto; }
.split-bar { display: flex; flex-direction: column;
             align-items: center; gap: .25rem; }
.split-fill { width: 34px; background: var(--accent);
              border-radius: 4px 4px 0 0; opacity: .85; }
.split-val { font-size: .7rem; color: var(--text-dim); }
@media (max-width: 560px) { .browse-list { columns: 1; } }
.site-footer { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1.25rem;
               color: var(--text-dim); font-size: .82rem; }

/* generic */
h1 { font-size: 1.8rem; letter-spacing: -.02em; margin: .2rem 0 .5rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem;
     border-bottom: 1px solid var(--line); padding-bottom: .35rem; }
.subtle { color: var(--text-dim); }
.num { text-align: right; }
.time { font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum"; }
.hint { font-size: .85rem; margin-top: -.4rem; }

.chip {
  display: inline-block; padding: .1rem .5rem; margin: 0 .3rem .3rem 0;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; font-size: .78rem; color: var(--text);
}
.chip.subtle { color: var(--text-dim); }
.chip-active { border-color: var(--accent); color: var(--accent); }
.chip-live { border-color: var(--lime); color: var(--lime); }
a.chip { text-decoration: none; }

/* meets browse: date-first rows, single column (rows carry a date +
   name + meta line — two columns get cramped well above the 560px
   browse-list breakpoint) */
.meet-list { columns: 1; }
.meet-date { display: inline-block; min-width: 7.5rem;
             color: var(--text-dim); font-size: .85rem;
             font-variant-numeric: tabular-nums; }
/* the meta line indents under the name, clear of the date column;
   its links inherit the dim colour (they'd otherwise match
   .browse-list .subtle's display:block and stack one word per line) */
.meet-meta { margin-left: 7.9rem; }
.meet-meta a { color: var(--text-dim); display: inline; }
@media (max-width: 560px) { .meet-meta { margin-left: 0; } }

/* swimmer header */
.swimmer-head .meta { margin: .35rem 0; }

/* PR table (also meet-event + IMX tables). display:block turns the
   table into its own horizontal scroller so long meet names never
   widen the page on mobile. */
.pr-table { width: 100%; border-collapse: collapse; font-size: .92rem;
            display: block; overflow-x: auto; max-width: 100%;
            -webkit-overflow-scrolling: touch; }
.pr-table th, .pr-table td {
  padding: .4rem .5rem; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.pr-table th { color: var(--text-dim); font-weight: 600;
               font-size: .8rem; text-transform: uppercase;
               letter-spacing: .03em; }
.pr-table td.time { font-weight: 600; }
.pr-table tbody tr:hover { background: var(--surface); }

/* progression charts */
.chart-grid {
  display: grid; gap: 1rem;
  /* min(320px,100%) so viewports narrower than the card floor don't
     overflow the page */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.chart-card {
  margin: 0; padding: .75rem .85rem 1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.chart-card figcaption {
  display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem;
}
.ev-label { font-weight: 600; }
.ev-pr { color: var(--accent-2); font-weight: 600; }
.ev-n { margin-left: auto; font-size: .8rem; }
.progression-chart { width: 100%; height: auto; display: block; }

/* home */
.hero { padding: 1.5rem 0 1rem; }
.hero h1 { font-size: 2.4rem; }
.tagline { color: var(--text-dim); font-size: 1.05rem; }
.stats { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 2rem; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem 1.1rem; min-width: 120px;
}
.stat b { display: block; font-size: 1.5rem; letter-spacing: -.01em; }
.stat span { color: var(--text-dim); font-size: .82rem; }
.swimmer-list { list-style: none; padding: 0; margin: 0;
                columns: 2; column-gap: 2rem; }
.swimmer-list li { break-inside: avoid; margin-bottom: .5rem; }
.swimmer-list .subtle { display: block; font-size: .78rem; }

@media (max-width: 560px) {
  .swimmer-list { columns: 1; }
  /* the Search nav link is adjacent — the inline box doesn't fit
     beside four nav links on a phone */
  .header-search { display: none; }
  .header-nav { flex-wrap: wrap; justify-content: flex-end; }
  .site-header nav a { margin-left: .6rem; font-size: .92rem; }
  .wrap { padding: 1rem .9rem 2.5rem; }
}