/* Self-hosted fonts (SIL OFL 1.1, see fonts/LICENSE-OFL.txt). Latin subset. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/barlow-condensed-800-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/barlow-condensed-900-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-var-latin.woff2) format('woff2'); }
:root {
  --navy: #344563; --navy-dark: #1E2D45; --navy-light: #4A6080;
  --red: #E8473A; --red-dark: #C93A2E;
  --yellow: #F2C200; --blue: #2F88C8; --green: #27AE60;
  --white: #fff; --off-white: #F4F5F7; --gray-100: #EAECF0; --gray-200: #D0D5DD; --gray-600: #475467; --gray-800: #1D2939;
  --bg: #ECEEF2;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 100px;
  --tap: 44px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--gray-800); font: 15px/1.4 var(--font-body); min-height: 100vh; }
[hidden] { display: none !important; }

.app-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 10px 20px; background: var(--navy-dark); color: var(--white); }
.brand { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.mark { height: 24px; align-self: center; }
.brand-name { font: 800 22px var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.title { margin: 0; font: 900 22px var(--font-display); text-transform: uppercase; color: var(--white); }
.tagline { color: rgba(255,255,255,.7); font-size: 13px; }
.header-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.mode-switch { display: inline-flex; background: rgba(255,255,255,.1); border-radius: var(--radius-pill); padding: 3px; }
.seg { min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: transparent; color: rgba(255,255,255,.8); font: 700 14px var(--font-body); cursor: pointer; }
.seg[aria-pressed="true"] { background: var(--red); color: var(--white); }

.btn { min-height: var(--tap); padding: 0 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white); color: var(--navy); font: 600 14px var(--font-body); cursor: pointer; touch-action: manipulation; }
.btn:hover:not(:disabled) { border-color: var(--navy); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary, .btn.play { background: var(--red); border-color: var(--red); color: var(--white); }
.btn.primary:hover:not(:disabled), .btn.play:hover:not(:disabled) { background: var(--red-dark); border-color: var(--red-dark); }
.speed { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 14px var(--font-body); color: var(--navy); }
.speed select { flex: 1; }
.btn.ghost { background: transparent; }
.app-header .btn { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.app-header .btn:hover:not(:disabled) { border-color: var(--white); }
.toggle[aria-checked="true"] { background: rgba(232,71,58,.08); border-color: var(--red); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.app-header :focus-visible { outline-color: var(--yellow); }

.layout { display: grid; grid-template-columns: 200px minmax(0, 1fr) 210px; gap: 16px; padding: 16px 20px 24px; align-items: start; max-width: 1600px; margin: 0 auto; }
.layout.no-steps { grid-template-columns: 200px minmax(0, 1fr); }
.panel { background: var(--white); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.panel > div { display: flex; flex-direction: column; gap: 10px; }
.panel h2 { margin: 6px 0 0; font: 800 15px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.panel h2:first-child, .panel > div > h2:first-child { margin-top: 0; }
.count { color: var(--navy); font-family: var(--font-body); letter-spacing: 0; font-weight: 700; margin-left: 4px; }
.note { margin: 0; font-size: 13px; color: var(--gray-600); }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: var(--tap); height: var(--tap); border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--gray-200); cursor: pointer; padding: 0; touch-action: manipulation; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--navy-dark); }

.step-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: var(--tap); }
.step-chip { min-width: var(--tap); height: var(--tap); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--off-white); font: 800 18px var(--font-display); color: var(--navy); cursor: pointer; touch-action: manipulation; }
.step-chip[aria-current="step"] { border: 2px solid var(--red); background: rgba(232,71,58,.08); }
.step-chip:disabled { cursor: not-allowed; }
.step-empty { margin: 0; font-size: 13px; color: var(--gray-600); }

.stage { min-width: 0; }
#court { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--navy-dark); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: 0 4px 16px rgba(30,45,69,.25); }
#court.drawing { cursor: crosshair; }
#court [data-item]:focus-visible { outline: none; }
#court [data-item]:focus-visible circle:last-of-type { stroke: var(--yellow); }
.hint { margin: 10px 4px 0; color: var(--gray-600); }
.toast { margin: 4px 4px 0; min-height: 1.4em; font-weight: 600; color: var(--navy); }
.toast.error { color: var(--red-dark); }

dialog { border: 0; border-radius: var(--radius-lg); padding: 20px; max-width: 360px; box-shadow: 0 10px 40px rgba(10,14,24,.35); }
dialog::backdrop { background: rgba(30,45,69,.55); }
dialog p { margin: 0 0 16px; font-size: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 960px) {
  .layout, .layout.no-steps { grid-template-columns: 1fr; padding: 12px 16px 20px; }
  .layout > .stage { order: 1; }
  .layout > #tools { order: 2; }
  .layout > #steps-panel { order: 3; }
  .panel > div { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .panel h2 { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

[data-item] { cursor: grab; }
[data-item]:active { cursor: grabbing; }