/* Club Champs: James's tables and race results widgets, styled as he had them (white cards, black
   headings, red and black hoops) and scoped under .cc so they sit inside the app. */
.cc {
  --red: var(--head-ink); --black: #111;
  --card: var(--surface); --th: #fafafa; --hover: #fff0f0; --chip: #fff; --chip-b: #ddd; --chip-t: #333;
  --gold: #fff4cc; --silver: #f0f0f0; --bronze: #fbe6da; --field: #fff; --field-b: #bbb;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc {
  --th: #221f1f; --hover: #2a1416; --chip: #1f1c1c; --chip-b: #3a3535; --chip-t: #eee;
  --gold: #3a2f0d; --silver: #2a2a2d; --bronze: #33200f; --field: #1a1818; --field-b: #4a4444 } }
:root[data-theme="dark"] .cc {
  --th: #221f1f; --hover: #2a1416; --chip: #1f1c1c; --chip-b: #3a3535; --chip-t: #eee;
  --gold: #3a2f0d; --silver: #2a2a2d; --bronze: #33200f; --field: #1a1818; --field-b: #4a4444 }

/* Results / Tables switch at the top of the page */
.cc-switch { display: grid; grid-template-columns: 1fr 1fr; background: var(--head); border-radius: 999px; padding: 5px; max-width: 420px; width: 100% }
.cc-switch button { border: 0; border-radius: 999px; padding: 10px 12px; background: none; color: #fff; cursor: pointer;
  font: 700 1.15rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase }
.cc-switch button[aria-selected="true"] { background: var(--head-ink); color: var(--on-red) }
.cc-switch button:focus-visible { outline: 2px solid var(--head-ink); outline-offset: 2px }

.cc .hoops-thin { background: repeating-linear-gradient(180deg, var(--red) 0 7px, var(--black) 7px 14px) }
.cc .note { color: var(--muted); font-size: .9rem; margin: 0 0 14px }
.cc .note a { color: var(--red) }
.cc .controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px }
.cc .toggle, .cc .stepper { display: inline-flex; border: 3px solid var(--black); border-radius: 6px; overflow: hidden }
.cc .toggle button { font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 9px 20px; border: 0; background: #fff; color: var(--black); cursor: pointer }
.cc .toggle button[aria-pressed="true"] { background: var(--red); color: #fff }
.cc .toggle button + button, .cc .stepper button + button { border-left: 3px solid var(--black) }
.cc .stepper button { font: inherit; font-weight: 800; padding: 8px 14px; border: 0; background: #fff; color: var(--black); cursor: pointer }
.cc .stepper button:hover:not(:disabled) { background: var(--red); color: #fff }
.cc .stepper button:disabled { color: #bbb; cursor: default }
.cc .picker { flex: 1 1 260px; max-width: 420px; font: inherit; font-weight: 800; padding: 9px 12px; border: 3px solid var(--black); border-radius: 6px; background: #fff; color: var(--black); cursor: pointer; min-width: 0 }
.cc .search { flex: 1 1 220px; max-width: 320px; font: inherit; padding: 10px 12px; border: 2px solid var(--field-b); border-radius: 6px; background: var(--field); color: var(--ink); min-width: 0 }
.cc .search:focus, .cc .picker:focus { outline: none; border-color: var(--red) }
.cc .jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px }
.cc .jump a { text-decoration: none; color: var(--black); background: #fff; border: 2px solid var(--black); padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: .9rem }
.cc .jump a:hover { background: var(--black); color: #fff }

.cc .card { background: var(--card); color: var(--ink); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-bottom: 26px; scroll-margin-top: 110px; padding: 0 }
.cc .card-head { height: 14px }
.cc .card h2 { margin: 0; background: var(--black); color: #fff; padding: 10px 16px; font: 700 1.3rem/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .05em; display: flex; justify-content: space-between; gap: 12px }
.cc .card h2 small { font: 600 .85rem var(--font-body); color: #ccc; text-transform: none; letter-spacing: 0; align-self: center }
.cc .scroll { overflow-x: auto }
.cc table { border-collapse: collapse; width: 100%; font-size: .95rem }
.cc th, .cc td { padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left }
.cc th { background: var(--th); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); cursor: pointer; user-select: none; position: sticky; top: 0 }
.cc th:hover { color: var(--red) }
.cc th .arrow { font-size: .7rem; margin-left: 4px; color: var(--red) }
.cc td.num, .cc th.num { text-align: right; font-variant-numeric: tabular-nums }
.cc tbody tr:hover { background: var(--hover) }
.cc tr.p1 { background: var(--gold) } .cc tr.p2 { background: var(--silver) } .cc tr.p3 { background: var(--bronze) }
.cc tr.p1 td:first-child, .cc tr.p2 td:first-child, .cc tr.p3 td:first-child { font-weight: 800 }
.cc tr.hidden { display: none }
.cc td.total, .cc td.pts { font-weight: 800 }
.cc mark { background: var(--red); color: #fff; padding: 0 2px; border-radius: 2px }
.cc .msg { padding: 16px; color: var(--muted) }
.cc .msg.err { color: var(--red) }
.cc .msg.box { background: var(--card); border-left: 6px solid var(--red); border-radius: 4px }
.cc .updated { text-align: center; color: var(--muted); font-size: .85rem; margin: 0 }
.cc tr.runner { cursor: pointer }
.cc tr.runner:focus-visible { outline: 2px solid var(--red); outline-offset: -2px }
.cc .chev { display: inline-block; width: 1em; color: var(--red); transition: transform .15s }
.cc tr.runner[aria-expanded="true"] .chev { transform: rotate(90deg) }
.cc tr.detail td { white-space: normal; background: var(--th); padding: 10px 12px 14px }
.cc tr.detail:hover { background: none }
.cc .chips { display: flex; flex-wrap: wrap; gap: 6px }
.cc .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--chip-b); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: .85rem; background: var(--chip); color: var(--muted) }
.cc .chip b { background: var(--chip-b); color: var(--chip-t); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums }
.cc .chip.counts { border-color: var(--red); color: var(--ink) }
.cc .chip.counts b { background: var(--red); color: #fff }
.cc .key { margin-top: 8px; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 6px }
.cc .key .chip { padding: 0; border: 0; background: none }
@media (max-width: 520px) {
  .cc .hide-sm { display: none } .cc th, .cc td { padding: 8px 6px } .cc td.name { white-space: normal }
  .cc .card h2 { flex-direction: column; align-items: flex-start; gap: 2px } .cc .card h2 small { align-self: flex-start }
  .cc .search { max-width: none }
}