/* Workspace controls, shared by the three tools. */
.app { box-shadow: 0 18px 60px #242c4510; scroll-margin-top: 16px; }
.app-top { background: linear-gradient(115deg, var(--soft), var(--paper) 70%); }
.app-top h2 { font-size: 1.05rem; }
.app-top button { font-size: .78rem; padding: 9px 14px; }
.workspace-intro { padding: 12px 26px; border-bottom: 1px solid var(--line); font-size: .75rem; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
#tool-feedback { color: var(--accent); margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.control-card { background: var(--soft); padding: 18px; border-radius: 16px; }
.control-card .small { margin-bottom: 0; }
.control-card input { width: 76px; }
.result-panel { margin: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--soft); }
.result-panel h3 { margin-top: 0; }
.winner-grid { list-style-position: inside; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.winner-grid li { border-radius: 12px; background: var(--paper); padding: 18px; font-weight: 700; overflow-wrap: anywhere; }
.winner-grid li::marker { color: var(--accent); }
.practice-tools { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.passage-progress { flex: 1; }
.passage-progress label, .tournament-toolbar > label { display: flex; justify-content: space-between; gap: 12px; }
progress { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 8px; overflow: hidden; background: var(--soft); }
progress::-webkit-progress-bar { background: var(--soft); }
progress::-webkit-progress-value { background: var(--accent); border-radius: 8px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 8px; }
.passage { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); scroll-behavior: auto; overflow-anchor: none; }
.passage[data-size="large"] { font-size: 2rem; max-height: 210px; }
.passage[data-size="extra"] { font-size: 2.5rem; max-height: 260px; }
#original-passage { margin-top: 18px; }
.tournament-toolbar { padding: 20px 24px; background: var(--paper); border-bottom: 1px solid var(--line); }
.toggle { display: flex; align-items: center; gap: 8px; margin: 0; }
#all-done { margin: 20px 24px; }
.match { transition: border-color .15s; }
.match:focus-within { border-color: var(--accent); }
.match[data-complete="true"] .match-top { background: var(--soft); color: var(--accent); }
.metrics .metric { flex: 1; }
.metric b { font-variant-numeric: tabular-nums; }
.focus-mode .hero, .focus-mode .promo-top, .focus-mode .promo-bottom, .focus-mode .promo-rail, .focus-mode .tool-shortcut, .focus-mode .subsection, .focus-mode .site-footer { display: none; }
.focus-mode .banner-layout { display: block; max-width: 1340px; padding: 24px; }
.focus-mode .container { padding: 0; max-width: none; }
.focus-mode .app { border-color: var(--accent); }
@media(max-width:800px) {
  .workspace-intro { padding: 12px 20px; }
  .app-top > .row { width: 100%; justify-content: space-between; }
  .practice-tools { gap: 14px; }
  .practice-tools select { max-width: 140px; }
  .result-panel { margin: 16px; padding: 18px; }
  .tournament-toolbar { padding: 18px; }
  .focus-mode .banner-layout { padding: 12px; }
  .metrics { gap: 12px; }
  .metric b { font-size: 1.5rem; }
  .passage { padding: 12px; }
  .board { padding: 18px; scroll-snap-type: x proximity; }
  .round { scroll-snap-align: start; min-width: min(265px, 78vw); }
  .actions button { flex-basis: 28%; }
}
@media print {
  .workspace-intro, .tournament-toolbar, .practice-tools, #focus-mode, #all-done { display: none !important; }
  .result-panel { break-inside: avoid; }
  .match[hidden], .round[hidden] { display: block !important; }
}

@media(min-width:801px) {
  .board.single-round .round { min-width: 0; }
  .board.single-round .matches { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; height: auto; }
  .spin .workspace { grid-template-columns: 1.1fr 1fr; }
  .spin .editor { gap: 12px; }
  .spin .wheel-wrap { max-width: 420px; }
}
@media print { .board.single-round .matches { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } }

.catalog-search { width:100%; max-width:560px; }
.vocabulary-list { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; }
.vocabulary-list li { padding:9px 14px; border-radius:12px; background:var(--soft); }

.discovery { margin-block: 2rem; padding: clamp(16px,3vw,32px); border: 1px solid #d9ded6; border-radius: 18px; }
.discovery-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; margin-block:20px 28px; }
.discovery-links a { display:block; padding:16px; border:1px solid #d9ded6; border-radius:12px; text-decoration:none; font-weight:600; }
.discovery-links a:hover { background:#e7efe7; }
.discovery-links a:focus-visible,.discovery summary:focus-visible { outline:3px solid #216d58; outline-offset:4px; }
.discovery details { padding:16px 0; border-top:1px solid #d9ded6; }
.discovery summary { cursor:pointer; font-weight:600; }
.discovery p { line-height:1.8; max-width:75ch; }