/* Shared platform identity; historical path retained. Load after page styles.
   Source: docs/APPROVED_INTERFACE.md. */
@font-face { font-family: Manrope; src: url('./fonts/manrope-500.ttf') format('truetype'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: Manrope; src: url('./fonts/manrope-700.ttf') format('truetype'); font-weight: 650 900; font-display: swap; }
:root {
  --platform-ground: #f1f7f6; --platform-ink: #193633; --platform-muted: #506763;
  --platform-accent: #81d8d0; --platform-action: #146d63; --platform-soft: #e0f2ee;
  --platform-line: #d2e3df; --platform-depth: #bad6d0; --platform-radius: 22px;
  --platform-font: Manrope, system-ui, sans-serif;
  --green: var(--platform-action); --soft: var(--platform-soft); --muted: var(--platform-muted); --line: var(--platform-line);
  --sans: var(--platform-font); --radius: var(--platform-radius);
  --tour-green: var(--platform-action); --tour-pale: var(--platform-soft); --tour-ink: var(--platform-ink); --tour-muted: var(--platform-muted); --tour-line: var(--platform-line); --tour-soft-line: var(--platform-line); --tour-ground: var(--platform-ground); --tour-white: #fff;
  --tour-tiffany: var(--platform-accent); --tour-deep-green: var(--platform-action); --tour-deep-green-hover: #105d55;
  --players-green: var(--platform-action); --players-ink: var(--platform-ink); --players-muted: var(--platform-muted); --players-soft: var(--platform-soft); --players-line: var(--platform-line); --players-ground: var(--platform-ground); --players-lime: var(--platform-accent);
  --club-paper: var(--platform-ground); --club-ink: var(--platform-ink); --club-muted: var(--platform-muted); --club-line: var(--platform-line); --club-tiffany: var(--platform-accent); --club-display: var(--platform-font); --club-ui: var(--platform-font);
  font-family: var(--platform-font); color: var(--platform-ink); background: var(--platform-ground);
  scrollbar-color: #83a9a2 var(--platform-ground);
}
body, .club-page { background: var(--platform-ground); color: var(--platform-ink); font: 500 15px/1.55 var(--platform-font); }
::selection { background: #b5e9e2; color: var(--platform-ink); }
button, input, select, textarea { font-family: var(--platform-font); caret-color: var(--platform-action); }
a { text-underline-offset: 4px; }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--platform-action); outline-offset: 3px; }
h1, h2, h3, .club-page .club-title { color: inherit; font-family: var(--platform-font); font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
.club-page .club-title { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; }
.tour-main h1, .account-intro h1, .form-wrap h1 { font-size: clamp(27px, 3vw, 36px); font-weight: 700; line-height: 1.2; }
.tour-main h2 { font-size: 19px; font-weight: 700; }
.tour-main h3 { font-size: 16px; font-weight: 700; }
.logo, .account-top .logo, .players-logo { color: var(--platform-ink); font-weight: 700; }
.logo svg, .players-logo svg { color: var(--platform-action); }
.sidebar, .topbar, .account-top, .players-top, .tour-ribbon { background: #fff; color: var(--platform-ink); border-color: var(--platform-line); }
.account-top nav { display: flex; gap: 24px; }
.tour-ribbon nav a, .ribbon-user, .players-top nav a, .players-account { color: var(--platform-muted); }
.tour-ribbon nav a[aria-current=page], .players-top nav a[aria-current=page] { color: var(--platform-action); border-color: var(--platform-action); }
.nav a { border-radius: 12px; color: var(--platform-muted); }
.nav a.active { background: var(--platform-soft); color: var(--platform-action); }
.tour-main, .players-main { max-width: 1200px; padding: 36px 28px 28px; }
.account-main { padding-top: 40px; }
.panel, .catalog-panel { border-color: var(--platform-line); border-radius: var(--platform-radius); padding: 24px; background: #fff; }
.stack, .layout { gap: 20px; }
.btn, .btn:is(.club-primary, .club-secondary), .players-button {
  min-height: 44px; border-radius: 13px; padding: 11px 17px; border: 1px solid var(--platform-line);
  background: #fff; color: var(--platform-ink); font: 700 14px/1.4 var(--platform-font); white-space: normal; text-align: center;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.btn.primary, .btn.club-primary, .primary, .players-button { background: var(--platform-accent); border-color: transparent; color: #173e39; }
.text-btn, .back { color: var(--platform-action); }
.btn:disabled, button:disabled { opacity: 1; background: #e7edeb; border-color: #d2ddda; color: #63746f; cursor: not-allowed; }
.btn.danger, .text-btn.danger { color: #a23131; }
.text-btn, .close { border-radius: 10px; }
input, select, textarea,
.toolbar input, .toolbar select, .form-grid input, .form-grid select, .form-grid textarea,
.wizard-panel input, .wizard-panel select, .wizard-panel textarea, .panel input, .panel select, .panel textarea,
.entry-dialog input, .entry-dialog select, .rank-filter-row select, .rank-controls select {
  min-height: 44px; border-radius: 11px; border-color: #a9c4bd; color: var(--platform-ink); background: #fff; font-family: var(--platform-font);
}
input::placeholder, textarea::placeholder { color: #607a73; }
input[type=checkbox], input[type=radio] { accent-color: var(--platform-action); min-height: 0; }
.role-card, .login-players button { border-radius: var(--platform-radius); border-color: var(--platform-line); color: var(--platform-ink); box-shadow: 0 4px 0 var(--platform-depth); padding: 24px; }
.role-choice { gap: 20px; }
.status-note, .demo-box, .next-step, .login-court { background: var(--platform-soft); border-radius: 13px; color: var(--platform-ink); }
.player-option { border-radius: 10px; color: var(--platform-ink); }
.player-option.selected, .your-row { background: var(--platform-soft); }
.rank-switch, .rank-view-switch, .rank-division-switch { background: var(--platform-soft); border-radius: 12px; }
.rank-switch button, .rank-view-switch button, .rank-division-switch button { font-family: var(--platform-font); min-height: 44px; border-radius: 9px; color: var(--platform-muted); }
.rank-table-wrap, .rank-empty { border-color: var(--platform-line); border-radius: var(--platform-radius); box-shadow: none; }
.rank-table thead th { background: #fff; color: var(--platform-muted); }
.rank-table tbody tr:hover { background: var(--platform-soft); }
.players-hero, .ranking-masthead { background: var(--platform-soft); color: var(--platform-ink); border-radius: var(--platform-radius); }
.players-hero p, .ranking-masthead p { color: var(--platform-muted); }
.ranking-masthead h1 { font-size: clamp(30px, 4vw, 44px); }
.ranking-court-graphic { color: var(--platform-action); opacity: .3; }
.ranking-court-graphic .court-ball { stroke: var(--platform-action); }
.search-box { background: #fff; border-color: var(--platform-line); border-radius: 13px; }
.wizard-steps button { font-family: var(--platform-font); min-height: 44px; border-radius: 10px; }
.wizard-steps button:disabled { background: transparent; }
.wizard-steps button.current span, .wizard-steps button:not([disabled]):has(~.current) span { background: var(--platform-soft); border-color: #8ebfb6; color: var(--platform-action); }
.cabinet-tabs a span { background: var(--platform-soft); color: var(--platform-action); }
[data-motion-tabs] .kinetics-marker { background: var(--platform-action); }
:is(dialog.entry-dialog, dialog#dialog, .modal-backdrop > .modal) { --dialog-ink: var(--platform-ink); --dialog-tint: var(--platform-soft); --dialog-line: var(--platform-line); background: #fff; border-radius: var(--platform-radius); }
.notice { background: var(--platform-ink); color: #fff; border-radius: 13px; }
.error, .status-note { border-radius: 11px; }
@media (hover:hover) and (pointer:fine) {
  .btn:hover:not(:disabled), .players-button:hover { background: var(--platform-soft); filter: none; }
  .btn.primary:hover:not(:disabled), .btn.club-primary:hover:not(:disabled), .players-button:hover { background: #9be3da; border-color: transparent; }
  .role-card:hover { background: #f9fdfc; border-color: #9dc8bf; }
}
@media (max-width:700px) {
  .tour-main, .players-main, .account-main { padding: 24px 16px; }
  .panel, .catalog-panel { padding: 20px; }
  .account-top { height: auto; min-height: 68px; flex-wrap: wrap; gap: 10px 16px; padding: 14px 16px; }
  .account-top nav { gap: 16px; }
  .account-top > span { flex-basis: 100%; max-width: none; text-align: left; font-size: 11px; }
  .role-card { padding: 20px; }
  .ranking-masthead { padding: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .btn, .players-button, .tour-ribbon nav a { transition: none; }
}
/* The catalogue is a canvas, so each raised event keeps its own silhouette. */
.catalog-panel { padding: 0; border: 0; border-radius: 0; background: transparent; }
.catalog-panel .toolbar { padding: 20px; background: #fff; border-radius: 16px; margin-bottom: 24px; }
.tour-ribbon nav a:focus-visible, .logo:focus-visible { outline: 3px solid var(--platform-action); outline-offset: 3px; }
/* Compact operational views share the same tokens without changing data colours. */
.sp-schedule { --sp-line: var(--platform-line); --sp-muted: var(--platform-muted); --sp-ink: var(--platform-ink); --sp-green: var(--platform-action); }
.sp-switch { background: var(--platform-soft); border-color: transparent; border-radius: 12px; }
.sp-switch button { min-height: 44px; border-radius: 9px; color: var(--platform-muted); }
.sp-switch button[aria-pressed=true] { background: #fff; color: var(--platform-action); }
.score-mode [aria-pressed=true] { background: var(--platform-soft); color: var(--platform-action); border-color: #9dc8bf; }
.sp-court, .sp-list, .sp-card { border-radius: 16px; }
.sp-court .sp-card, .sp-court .sp-list { border-radius: 0; }
.form-strip { border-radius: var(--platform-radius); background: var(--platform-soft); color: var(--platform-ink); }
.form-content > span { color: var(--platform-ink); }
.form-court-graphic rect, .form-court-graphic path { stroke: var(--platform-action); }
.gd-toolbar { border-radius: 13px; background: var(--platform-ground); border-color: var(--platform-line); }