/* Cohoda brand, cream-ground variant: flat, hairline rules, no radii/shadows. */

:root {
  --cream:        #FBF8F5;
  --deep-green:   #1D2F2C;   /* primary dark ground */
  --green-raised: #26403C;   /* panels sitting on deep green */
  --cream-ink:    #EDDDD4;   /* body/headings on green */
  --sage:         #9DB0AA;   /* secondary text on green */
  --slate-green:  #46605B;   /* secondary text on cream */
  --terracotta:   #C2442E;   /* cream-ground variant, 4.5:1 on #FBF8F5 */
  --terracotta-g: #D9553D;   /* the variant used on green grounds */
  --hairline:     rgba(29, 47, 44, 0.14);
  --hairline-g:   rgba(237, 221, 212, 0.12);   /* hairline on green */
  --mono: ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--deep-green);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

body > .wrap { padding-bottom: 96px; }

/* --- masthead: deep green ground, the one dark panel on the page ------- */

.masthead {
  background: var(--deep-green);
  color: var(--cream-ink);
  border-bottom: 3px solid var(--terracotta-g);
}

.masthead-inner {
  padding-top: 56px;
  padding-bottom: 44px;
}

.rule-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--terracotta-g);
}

.rule-label .rule {
  display: block;
  width: 36px;
  height: 3px;
  background: var(--terracotta-g);
}

h1 {
  margin: 0;
  font-family: Figtree, Montserrat, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  color: var(--cream-ink);
}

/* the brand's signature device: a terracotta block closing the headline */
.cursor {
  display: inline-block;
  width: 0.36em;
  height: 0.74em;
  margin-left: 0.14em;
  background: var(--terracotta-g);
  vertical-align: baseline;
}

/* --- masthead stats ---------------------------------------------------- */

.masthead-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 34px 0 0;
}

.masthead-stats > div {
  padding: 0 28px;
  border-left: 1px solid var(--hairline-g);
}

.masthead-stats > div:first-child { padding-left: 0; border-left: 0; }

.masthead-stats dt {
  margin: 0 0 5px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sage);
}

.masthead-stats dd {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--cream-ink);
}

/* --- filters ----------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 24px;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--hairline);
}

.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-green);
}

.field select,
.field input[type="text"] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 180px;
  max-width: 320px;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: #fff;
  color: var(--deep-green);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.field select {
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate-green) 50%),
                    linear-gradient(135deg, var(--slate-green) 50%, transparent 50%);
  background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field-search input { min-width: 220px; }

.field select:focus,
.field input[type="text"]:focus {
  outline: 2px solid var(--terracotta);
  outline-offset: -1px;
}

.field-actions { flex-direction: row; align-items: center; gap: 16px; }

.filters button {
  padding: 10px 22px;
  border: 0;
  border-radius: 0;
  background: var(--terracotta);
  color: var(--cream);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.filters button:hover { background: #a83724; }

.reset {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-green);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}

.reset:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }

/* --- summary line ------------------------------------------------------ */

.summary {
  margin: 24px 0 20px;
  color: var(--slate-green);
  font-size: 14px;
}

.sort-active { color: var(--terracotta); font-weight: 600; }

/* --- results table ----------------------------------------------------- */

.table-scroll { overflow-x: auto; }

table.results {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.results th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--deep-green);
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--deep-green);
}

table.results td {
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

table.results tr:hover td { background: rgba(29, 47, 44, 0.035); }

.col-name { min-width: 240px; }
.col-sports { min-width: 160px; color: var(--slate-green); }

.v-name { display: block; font-weight: 500; }

.v-local {
  display: block;
  margin-top: 2px;
  color: var(--slate-green);
  font-size: 12.5px;
}

.mono-cell {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--slate-green);
  white-space: nowrap;
}

td.num, th.num { text-align: right; padding-right: 0; white-space: nowrap; }
th.num { padding-right: 0; }

.approx { color: var(--slate-green); }
.muted { color: var(--slate-green); opacity: 0.55; }

/* --- pagination -------------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 32px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pager a { color: var(--terracotta); text-decoration: none; }
.pager a:hover { text-decoration: underline; }
.pager .disabled { color: var(--slate-green); opacity: 0.4; }
.pager-pos { color: var(--slate-green); font-weight: 400; letter-spacing: 0.08em; }

@media (max-width: 700px) {
  .wrap { padding: 0 18px; }
  body > .wrap { padding-bottom: 64px; }
  .masthead-inner { padding-top: 36px; padding-bottom: 30px; }
  .masthead-stats { gap: 20px 0; margin-top: 26px; }
  .masthead-stats > div:nth-child(1) { padding-left: 0; border-left: 0; }
  .field select, .field input[type="text"] { min-width: 0; width: 100%; }
  .field { width: 100%; }
}

.summary-note {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-green);
}