/* ==========================================================================
   Scuffers Tours — stylesheet
   ----------------------------------------------------------------------------
   Built on the same design system as play.scuffers.co.uk so the two sites
   read as a family. The design tokens (colours, fonts, radii, shadows) at
   the top of this file are the system; everything below them is either a
   shared component (.btn, .panel, .formrow, etc.) or a tours-specific
   screen style.

   If we ever want to share a single CSS file across both sites, the
   "DESIGN SYSTEM" section below is what to extract.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN SYSTEM — tokens, base, reusable components
   ========================================================================== */

:root {
  /* Brand blues (primary palette) */
  --primary:        #03a9f4;
  --primary-dark:   #0288c4;
  --primary-mid:    #0b76a8;
  --primary-deep:   #0b3c52;
  --primary-light:  #29b6f6;
  --primary-tint:   #d6eefb;
  --primary-soft:   #7fcdf3;

  /* Surfaces / neutrals */
  --surface:        #ffffff;
  --surface-2:      #eef1f4;
  --surface-3:      #f5f5f5;
  --border:         #d8dde3;
  --border-soft:    #dddddd;
  --banner-bg:      #e9edf1;
  --banner-bdr:     #9aa4af;

  /* Text */
  --ink:            #1b1f24;
  --ink-soft:       #5b6470;

  /* Status / semantic */
  --danger:         #c0392b;
  --success:        #1e8e5a;
  --success-bg:     #eaf3ee;
  --success-bdr:    #b8d4c1;
  --warning:        #8a6b00;
  --warning-bg:     #fff8e8;
  --warning-bdr:    #f0d99b;
  --error-bg:       #fbe8e8;
  --error-bdr:      #e0b3b3;

  /* Shadows */
  --shadow-sm:      0 1px 2px rgba(20, 30, 40, 0.08);
  --shadow-md:      0 4px 14px rgba(20, 30, 40, 0.10);
  --shadow-lg:      0 18px 40px -16px rgba(20, 30, 40, 0.25);

  /* Focus */
  --focus-ring:     rgba(3, 169, 244, 0.25);

  /* Radii */
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      16px;

  /* Type */
  --font-display:   'Fraunces', 'Georgia', serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface-3);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }


/* --- Topbar --- */
.topbar {
  background: var(--primary);
  color: var(--surface);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--banner-bdr);
  gap: 16px;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.brand__logo { display: block; height: 60px; width: auto; max-width: 100%; }
@media (max-width: 600px) {
  .brand__logo { height: 44px; }
}
.topbar__nav { display: flex; gap: 6px; align-items: center; }
.navlink {
  background: transparent;
  border: 1px solid transparent;
  color: var(--surface);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s;
}
.navlink:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.navlink.is-active { background: var(--border-soft); color: var(--primary-deep); }
.navlink__who {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  padding-left: 8px;
}


/* --- Layout --- */
#app {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.screen { animation: fadeUp 0.35s ease-out; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen__head { margin-bottom: 28px; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: var(--banner-bdr);
  font-weight: 700;
  margin: 0 0 8px;
}
.screen__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--primary-deep);
  letter-spacing: -0.01em;
}
.screen__lede {
  color: var(--ink-soft);
  margin: 0;
  max-width: 55ch;
}


/* --- Buttons --- */
.btn {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s;
  letter-spacing: 0.01em;
}
.btn--primary {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}
.btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn--ghost {
  background: transparent;
  color: var(--primary-mid);
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--primary); }
.btn--danger {
  background: #7e1a1a;
  color: #fff;
  border-color: #7e1a1a;
}
.btn--danger:hover { background: #5e1212; border-color: #5e1212; }
.btn--danger-ghost {
  background: transparent;
  color: var(--danger);
  border-color: rgba(192, 57, 43, 0.3);
}
.btn--danger-ghost:hover { background: rgba(192, 57, 43, 0.08); }
.btn--small {
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }


/* --- Panels --- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.panel__title {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 14px;
  color: var(--primary-deep);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel__title::before {
  content: "";
  display: block;
  width: 4px;
  height: 18px;
  background: var(--primary);
  border-radius: 2px;
}
.panel__hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin: -6px 0 14px;
}
.panel__head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.panel__head-row .panel__title { margin: 0; }


/* --- Form rows --- */
.formrow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.formrow label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ink-soft);
}
.formrow__req {
  color: var(--danger);
  margin-left: 2px;
}
.formrow input,
.formrow select,
.formrow textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
}
.formrow input:focus,
.formrow select:focus,
.formrow textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: white;
}
.formrow__inline {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.formrow__inline select,
.formrow__inline input { flex: 1; min-width: 0; }
.formrow__row {
  display: flex;
  gap: 12px;
}
.formrow__row .formrow { flex: 1; }


/* --- Card lists --- */
.cardlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.cardlist__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}
.cardlist__item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.cardlist__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--primary-deep);
  margin: 0 0 4px;
}
.cardlist__meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}


/* --- Status pills --- */
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 6px;
  vertical-align: middle;
}
.status-pill--draft     { background: #ecedf0; color: #4b4f57; border: 1px solid #c3c6cd; }
.status-pill--ready     { background: var(--primary-tint); color: var(--primary-mid); border: 1px solid var(--primary-soft); }
.status-pill--live      { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-bdr); }
.status-pill--published { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-bdr); }


/* --- Underlined tabs --- */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  margin-bottom: -1px;
}
.tab:hover { color: var(--primary-mid); }
.tab.is-active {
  color: var(--primary-deep);
  border-bottom-color: var(--primary-mid);
}


/* --- Modal --- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 30, 40, 0.55);
  backdrop-filter: blur(2px);
}
.modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: modalPop 0.2s ease-out;
}
.modal__panel--small { max-width: 420px; padding: 18px 22px 14px; }
@keyframes modalPop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.modal__head h2,
.modal__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--primary-deep);
  margin: 0;
}
.modal__close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 0 4px;
  border-radius: 4px;
}
.modal__close:hover { color: var(--ink); background: var(--surface-2); }
.modal__body { padding: 22px; }
.modal__panel--small .modal__body { padding: 6px 0 8px; }
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}


/* --- Toasts --- */
.toast-stack {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}
.toast {
  background: var(--primary-deep);
  color: var(--surface);
  padding: 12px 16px;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  font-size: 14px;
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  animation: toastIn 0.22s ease;
}
.toast--success { background: var(--success); }
.toast--error   { background: #7e1a1a; }
.toast--warning { background: var(--warning); color: white; }
.toast__icon { font-size: 16px; line-height: 1.4; }
.toast__msg { line-height: 1.4; word-wrap: break-word; }
.toast__close {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.85;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.toast__close:hover { opacity: 1; }
.toast--leaving { animation: toastOut 0.18s ease forwards; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}


/* --- Status / empty / loading text --- */
.status { font-size: 14px; color: var(--ink-soft); margin: 12px 0; }
.status--error { color: var(--danger); }
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-soft);
  font-style: italic;
}


/* --- Footer --- */
.footer {
  text-align: center;
  padding: 24px;
  color: var(--ink-soft);
  font-size: 12px;
  border-top: 1px solid var(--border-soft);
}


/* --- Footer bar (form action row) --- */
.footerbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}


/* ==========================================================================
   2. TOURS — screen-specific styles
   ========================================================================== */


/* --- Tour list cards --- */
.tour-card-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}


/* --- Tour detail page --- */
.tour-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}


/* --- Roster rows --- */
/* Original single-row layout for roster, teams, games — kept as it was */
.roster-row,
.team-row,
.game-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  gap: 10px;
}

/* Rounds use a stacked layout so the course headline + details stay readable
   on narrow viewports without the action buttons overflowing. */
.round-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.round-row__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.round-row__name {
  font-weight: 600;
  color: var(--primary-deep);
}
.round-row__actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.round-row__course {
  font-size: 14px;
  font-weight: 500;
}
.round-row__details {
  font-size: 13px;
  color: var(--ink-soft);
}
.round-row__details .badge {
  margin-right: 2px;
}
.roster-row:hover,
.team-row:hover,
.game-row:hover { border-color: var(--primary-soft); }
.roster-row__name,
.team-row__name,
.game-row__name { font-weight: 500; }
.roster-row__meta,
.team-row__meta,
.game-row__meta {
  font-size: 13px;
  color: var(--ink-soft);
}
.roster-row__remove,
.team-row__remove,
.game-row__remove {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
}
.roster-row__remove:hover,
.team-row__remove:hover,
.game-row__remove:hover { color: var(--danger); background: rgba(192, 57, 43, 0.08); }


/* --- Ghost badge --- */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  vertical-align: middle;
}
.badge--ghost { background: var(--surface-2); color: var(--ink-soft); }
.badge--committee { background: var(--primary-tint); color: var(--primary-mid); border-color: var(--primary-soft); }


/* --- Inline player picker --- */
.picker {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 12px;
}
.picker-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.picker-search {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
}
.picker-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.picker-count {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.picker-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.picker-row {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--ink);
}
.picker-row:last-child { border-bottom: 0; }
.picker-row:hover:not(:disabled) { background: var(--primary-tint); }
.picker-row:disabled { opacity: 0.6; cursor: default; }
.picker-name {
  display: flex;
  gap: 6px;
  align-items: center;
}
.picker-hcap {
  font-size: 12px;
  color: var(--ink-soft);
}


/* --- Layout helpers --- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.spread { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }


/* ==========================================================================
   3. STEP 8 ADDITIONS — setup-flow specific
   ========================================================================== */

/* Section anchor nav at top of detail page */
.section-anchors {
  display: flex;
  gap: 4px;
  margin: -6px 0 24px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  overflow-x: auto;
}
.section-anchors a {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
}
.section-anchors a:hover { color: var(--primary-mid); }

/* Roster drag-and-drop */
.roster-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.roster-block { position: relative; }
.roster-block[draggable="true"] .roster-row {
  cursor: grab;
}
.roster-block.is-dragging {
  opacity: 0.45;
}
.roster-block.drop-marker > .roster-row {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.drag-handle {
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  padding-right: 4px;
}
.drag-handle:active { cursor: grabbing; }

/* Attendance panel (per-player expand) */
.attendance-slot:empty { display: none; }
.attendance-panel {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 6px;
}
.attendance-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.att-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
}
.att-radio input { margin: 0; }

/* Team block: row + inline editor */
.team-block { margin-bottom: 6px; }
.team-edit-slot:empty { display: none; }
.team-edit {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 6px;
}
.team-members-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  max-height: 240px;
  overflow-y: auto;
}
.team-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
}
.team-member-row:hover:not(.is-disabled) { background: var(--primary-tint); }
.team-member-row.is-disabled {
  color: var(--ink-soft);
  cursor: not-allowed;
}
.team-member-row input { margin: 0; }

/* Game block + config */
.game-block { margin-bottom: 6px; }
.game-edit-slot:empty { display: none; }
.game-config {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 6px;
}

/* Captain's Cup sessions inside game config */
.cc-session {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}

/* Round block (per-round course assignment) */
.round-block { margin-bottom: 8px; }

/* Picker slot is hidden when empty so it doesn't reserve vertical space */
.picker-slot:empty { display: none; }

/* When jumping to a section via anchor link, leave a little breathing
   room above so the section title isn't flush with the top of the viewport. */
[id^="sec-"] { scroll-margin-top: 16px; }


/* ==========================================================================
   4. STEP 8b ADDITIONS — pair model + Captain's Cup page
   ========================================================================== */

/* Captain's Cup inline summary (on the games section of tour detail) */
.cc-summary {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.cc-summary__title {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--primary-deep);
}
.cc-summary__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
}
.cc-summary__warn {
  color: var(--warning);
}

/* Pair selection list (in Team Stableford config) */
.pair-select-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  max-height: 240px;
  overflow-y: auto;
}
.pair-select-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
}
.pair-select-row:hover { background: var(--primary-tint); }
.pair-select-row input { margin: 0; }

/* Captain's Cup page: pair assignment list */
.cc-pair-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.cc-pair-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cc-pair-row__info {
  flex: 1;
  min-width: 0;
}
.cc-pair-row__side {
  flex-shrink: 0;
}
.cc-pair-row__side select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
}

/* Captain's Cup page: balance card grid */
.cc-balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.cc-balance-card {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.cc-balance-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--primary-deep);
  margin: 6px 0;
  line-height: 1;
}

/* Captain's Cup page: validation list */
.cc-validation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-validation-list li {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  border: 1px solid transparent;
}
.cc-validation-ok {
  background: var(--success-bg);
  border-color: var(--success-bdr);
  color: var(--success);
}
.cc-validation-warn {
  background: var(--warning-bg);
  border-color: var(--warning-bdr);
  color: var(--warning);
}
.cc-validation-info {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--ink-soft);
}


/* ==========================================================================
   5. STEP 10 — cascading course picker
   ========================================================================== */

.course-picker { padding: 12px; }

.cp-step {
  margin-top: 10px;
}
.cp-step:empty { display: none; }

.cp-step__body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.cp-step__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.cp-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
}
.cp-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cp-count {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 6px 0;
}

.cp-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cp-list:empty { display: none; }
.cp-list .picker-row {
  border-bottom: 1px solid var(--border);
}
.cp-list .picker-row:last-child { border-bottom: 0; }

.cp-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
}
.cp-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cp-status {
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Pick chip: shows a confirmed selection with a Change button */
.cp-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--primary-tint);
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-sm);
}
.cp-pick__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--primary-mid);
}
.cp-pick__value {
  flex: 1;
  font-weight: 500;
}
.cp-pick__change {
  background: transparent;
  border: 1px solid var(--primary-mid);
  color: var(--primary-mid);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.cp-pick__change:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}


/* ==========================================================================
   6. SCORECARD — two layouts, viewport switches
   ==========================================================================
   Desktop (≥600px): front 9 + back 9 stacked horizontal tables, grand total below.
   Mobile  (<600px): single vertical table (rows = holes, cols = hole/par/SI/yards).
   ========================================================================== */

.scorecard-details {
  margin: 8px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.scorecard-details > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--primary-deep);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.scorecard-details > summary::-webkit-details-marker { display: none; }
.scorecard-details > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s;
  color: var(--primary-mid);
  font-size: 10px;
}
.scorecard-details[open] > summary::before { transform: rotate(90deg); }

/* ---- viewport switch ---- */
.scorecard-desktop { display: block; }
.scorecard-mobile  { display: none; }
@media (max-width: 600px) {
  .scorecard-desktop { display: none; }
  .scorecard-mobile  { display: block; }
}

/* ---- desktop layout ---- */
.scorecard-nine {
  border-top: 1px solid var(--border);
}
.scorecard-nine__label {
  padding: 8px 12px 4px;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.scorecard-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  table-layout: auto;
}
.scorecard-table th,
.scorecard-table td {
  padding: 5px 6px;
  text-align: center;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.scorecard-table tr:last-child td { border-bottom: none; }
.scorecard-table th:last-child,
.scorecard-table td:last-child { border-right: none; }
.scorecard-table thead th {
  background: var(--surface-3);
  font-weight: 600;
  color: var(--primary-deep);
}
.scorecard-table .sc-rowlabel {
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-3);
  padding-left: 12px;
}
.scorecard-table .sc-total {
  background: var(--surface-2);
  font-weight: 600;
}

.scorecard-grand {
  padding: 10px 12px;
  background: var(--primary-tint);
  color: var(--primary-deep);
  border-top: 1px solid var(--border);
  font-size: 13px;
}

/* ---- mobile layout ---- */
.scorecard-vertical {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--border);
}
.scorecard-vertical th,
.scorecard-vertical td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.scorecard-vertical thead th {
  background: var(--surface-3);
  font-weight: 600;
  color: var(--primary-deep);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.scorecard-vertical tr.sc-vert-summary td {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}
.scorecard-vertical tr.sc-vert-grand td {
  background: var(--primary-tint);
  color: var(--primary-deep);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}

/* ---- correction link (used in picker and round block) ---- */
.correction-link {
  color: var(--primary-mid);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.correction-link:hover { text-decoration: underline; }
.correction-link-wrap {
  margin: 8px 0;
  padding-left: 6px;
}


/* ==========================================================================
   7. SCORES — scores table on the dedicated tour-scores view
   ========================================================================== */

.scores-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.scores-table th,
.scores-table td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.scores-table thead th {
  background: var(--surface-3);
  font-weight: 600;
  color: var(--primary-deep);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
}
.scores-table th.scores-table__name,
.scores-table td.scores-table__name {
  text-align: left;
}
.scores-table tr:last-child td {
  border-bottom: 0;
}

.scores-table__missing td {
  color: var(--ink-soft);
  font-style: italic;
  opacity: 0.55;
}

.scores-flag-row {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-soft);
}
.scores-flag {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 4px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--warning, #b06800);
  font-size: 11px;
  letter-spacing: 0.02em;
  cursor: help;
}


/* ==========================================================================
   8. DAY CONTROL — live tour operations
   ========================================================================== */

.dc-rounds {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.dc-round {
  display: grid;
  grid-template-columns: 1fr 2fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
}
.dc-round:hover {
  background: var(--surface-2);
  border-color: var(--primary-soft);
}
.dc-round__name {
  font-weight: 600;
  color: var(--primary-deep);
}
.dc-round__course {
  color: var(--ink-soft);
  font-size: 13px;
}
.dc-round__count {
  color: var(--ink-soft);
  font-size: 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dc-round__chev {
  color: var(--primary);
  font-size: 20px;
}

@media (max-width: 640px) {
  .dc-round {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name chev"
      "course chev"
      "count chev";
    gap: 4px 12px;
  }
  .dc-round__name { grid-area: name; }
  .dc-round__course { grid-area: course; }
  .dc-round__count { grid-area: count; text-align: left; }
  .dc-round__chev { grid-area: chev; align-self: center; }
}

/* ---- Round detail ---- */

.dc-player {
  border-top: 1px solid var(--border);
  padding: 10px 0;
}
.dc-player:first-child { border-top: 0; }

.dc-player__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dc-player__name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.dc-player__totals {
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dc-player--missing .dc-player__name { color: var(--ink-soft); }

.dc-player__edit {
  margin-top: 10px;
}

/* ---- Editor grid ---- */

.dc-editor {
  background: var(--surface-2);
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.dc-editor__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
@media (min-width: 640px) {
  .dc-editor__grid { grid-template-columns: repeat(9, 1fr); }
}
@media (min-width: 1000px) {
  .dc-editor__grid { grid-template-columns: repeat(18, 1fr); }
}

.dc-editor__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.dc-editor__cell-label {
  font-size: 10px;
  color: var(--ink-soft);
  font-weight: 600;
}
.dc-editor__input {
  width: 100%;
  padding: 8px 4px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  -moz-appearance: textfield;
}
.dc-editor__input::-webkit-outer-spin-button,
.dc-editor__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dc-editor__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.dc-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.badge--accent {
  background: var(--primary);
  color: white;
}
.badge--muted {
  background: var(--surface-3);
  color: var(--ink-soft);
}


/* Calendar-day selector in the rounds setup section */
.round-row__cd {
  font-size: 13px;
  color: var(--ink-soft);
  margin-right: 12px;
}
.round-row__cd select {
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-left: 4px;
}


/* ==========================================================================
   9. CAPTAIN'S CUP LIVE — running totals, sessions, matches
   ========================================================================== */

.cc-overall {
  text-align: center;
}
.cc-overall__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.cc-overall__side {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cc-overall__points {
  font-size: 36px;
  font-weight: 600;
  color: var(--primary-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cc-overall__vs {
  font-size: 16px;
  color: var(--ink-soft);
  font-style: italic;
}

.cc-matches {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.cc-match {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.cc-match__sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.cc-match__slot {
  display: flex;
  align-items: center;
  min-height: 28px;
}
.cc-match__slot--a { justify-content: flex-start; }
.cc-match__slot--b { justify-content: flex-end; }
.cc-match__slot--drop {
  background: var(--primary-tint);
  outline: 2px dashed var(--primary);
  outline-offset: 1px;
  border-radius: 3px;
}
.cc-match__side {
  font-size: 14px;
}
.cc-match__side--a {
  text-align: left;
}
.cc-match__side--b {
  text-align: right;
}
.cc-match__picker {
  font-size: 13px;
  max-width: 100%;
}
.cc-match__vs {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 12px;
  justify-self: center;
}
.cc-match__result {
  font-size: 14px;
}

@media (max-width: 600px) {
  .cc-match {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "sides delete"
      "result delete";
  }
  .cc-match__sides  { grid-area: sides; }
  .cc-match__result { grid-area: result; }
  .cc-match button[data-delete] { grid-area: delete; align-self: center; }
}

.cc-add-match {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
  margin-top: 8px;
}


/* ==========================================================================
   10. CC PAIR ASSIGNMENT — 3-column drag-and-drop board
   ========================================================================== */

.cc-assign-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 700px) {
  .cc-assign-board { grid-template-columns: 1fr; }
}

.cc-assign-col {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  min-height: 80px;
}
.cc-assign-col--a { border-color: var(--primary-soft); }
.cc-assign-col--b { border-color: var(--primary-soft); }
.cc-assign-col--drop {
  background: var(--primary-tint);
  border-color: var(--primary);
  border-style: dashed;
}
.cc-assign-col__title {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-deep);
}
.cc-assign-col__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 40px;
}
.cc-pair-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: grab;
  user-select: none;
}
.cc-pair-card:active { cursor: grabbing; }
.cc-pair-card--dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.cc-pair-card__head { font-size: 14px; }
.cc-pair-card__members {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.cc-pair-card__quick {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.cc-pair-card__quick .btn { font-size: 11px; padding: 2px 6px; }

/* CC live match swap drag/drop affordance */
.cc-match__side[draggable="true"] {
  cursor: grab;
  user-select: none;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background 0.15s;
}
.cc-match__side[draggable="true"]:hover { background: var(--surface-3); }
.cc-match__side--dragging { opacity: 0.5; cursor: grabbing; }
/* (drop highlight is now on .cc-match__slot--drop — see above) */


/* CC Side details — two side panels with name + captain */
.cc-sides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .cc-sides-grid { grid-template-columns: 1fr; }
}
.cc-sides-grid__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-sides-grid__side select { width: 100%; }


/* Click-to-edit handicap cell in the roster row */
.handicap-cell {
  display: inline-block;
  min-width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.handicap-cell--editable {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px dashed transparent;
  transition: background 0.15s, border-color 0.15s;
}
.handicap-cell--editable:hover {
  background: var(--surface-2);
  border-color: var(--border);
}
.handicap-cell--na {
  color: var(--ink-soft);
  font-style: italic;
}
.handicap-input {
  width: 70px;
  padding: 2px 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}