.design-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 24px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: .85rem;
}
.design-picker label { font-weight: bold; }
.page-controls { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.page-controls .design-picker { margin-bottom: 0; }
.design-picker select { width: auto; min-height: 44px; }
#designDescription { color: var(--accent); }
#resultsCard { display: none; }
.metric-label { color: var(--accent); font: .8rem 'Trebuchet MS', sans-serif; }
.metric-value { font: bold 2.8rem 'Trebuchet MS', sans-serif; color: var(--deep); line-height: 1.1; }
.result-panel { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; }
.result-panel + .result-panel { border-top: 1px solid var(--line); }
.triangle-control { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.triangle-control input { width: 20px; height: 20px; flex-shrink: 0; }
.shot-link { background: none; color: var(--deep); padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
.treb-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.highlighted-shot { background: var(--paper); }
:root:not([data-design="classic"]) .wrap { max-width: 1240px; }
:root:not([data-design="classic"]) body { padding-top: 28px; }
:root:not([data-design="classic"]) h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
:root:not([data-design="classic"]) .card { border-radius: 12px; margin-bottom: 0; padding: 22px; }
:root:not([data-design="classic"]) .card h2 { font-family: 'Trebuchet MS', sans-serif; font-size: 1.15rem; }
:root:not([data-design="classic"]) #trackerSection { display: flex !important; flex-direction: column; gap: 18px; }
:root:not([data-design="classic"]) #trackerSection[style*="display: none"],
:root:not([data-design="classic"]) #trackerSection[style*="display:none"] { display: none !important; }
:root:not([data-design="classic"]) #resultsCard { display: block; }
:root:not([data-design="classic"]) input,
:root:not([data-design="classic"]) select { min-height: 48px; font-size: 16px; border-radius: 6px; }
:root:not([data-design="classic"]) button { min-height: 44px; border-radius: 6px; }
:root:not([data-design="classic"]) button.angle-help { min-width: 44px; width: 44px; height: 44px; border-radius: 50%; }
:root:not([data-design="classic"]) #shotEntryCard .row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
:root:not([data-design="classic"]) #shotEntryCard .field { min-width: 0; }
:root:not([data-design="classic"]) #shotEntryCard .field label { font-size: .9rem; }
:root:not([data-design="classic"]) #angA,
:root:not([data-design="classic"]) #angB { font: bold 1.6rem 'Trebuchet MS', sans-serif; padding: 14px 10px; }
:root:not([data-design="classic"]) .submit-shot { grid-column: 1 / -1; min-height: 54px; font-size: 1.05rem; }
:root:not([data-design="classic"]) #visualizerCard { overflow: hidden; }
:root:not([data-design="classic"]) #mapContainer { height: 460px; border-radius: 8px; }
:root:not([data-design="classic"]) .share-bar { margin: 0; border-style: solid; border-radius: 8px; }
:root:not([data-design="classic"]) #liveStatus { order: -10; margin: 0; }
:root:not([data-design="classic"]) #eventSummaryCard { order: -9; }
:root:not([data-design="classic"]) #unlockCard { order: -8; }
:root:not([data-design="classic"]) #shotEntryCard { order: -7; }
:root:not([data-design="classic"]) #resultsCard { order: -5; }
:root:not([data-design="classic"]) #visualizerCard { order: -6; }
:root:not([data-design="classic"]) #shotLogCard { order: -4; }
:root:not([data-design="classic"]) #trebCard { order: -3; }
:root:not([data-design="classic"]) #setupCard { order: -2; }
:root:not([data-design="classic"]) #accessCard { order: -1; }
:root[data-spectator="true"]:not([data-design="classic"]) #visualizerCard { order: -11; }

/* The same data and controls are rearranged, not duplicated, for the three prototypes. */
@media (min-width: 1000px) {
  :root:not([data-design="classic"]) #trackerSection { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  :root:not([data-design="classic"]) #trackerSection > * { min-width: 0; order: initial; }
  :root:not([data-design="classic"]) #trackerSection {
    grid-template-areas: "status status" "event event" "unlock unlock" "map entry" "map results" "log log" "trebs setup" "share access";
  }
  :root[data-spectator="true"]:not([data-design="classic"]) #trackerSection {
    grid-template-areas: "map results" "status status" "event event" "log log" "trebs trebs" "share share";
  }
  #visualizerCard { grid-area: map; }
  #shotEntryCard { grid-area: entry; }
  #resultsCard { grid-area: results; }
  #eventSummaryCard { grid-area: event; }
  #liveStatus { grid-area: status; }
  #unlockCard { grid-area: unlock; }
  #shotLogCard { grid-area: log; }
  #trebCard { grid-area: trebs; }
  #setupCard { grid-area: setup; }
  #accessCard { grid-area: access; }
  #shareBar { grid-area: share; }
  :root:not([data-design="classic"]) #mapContainer { height: 560px; }
  :root[data-design="scoreboard"] #trackerSection,
  :root[data-design="scoreboard"][data-spectator="true"] #trackerSection {
    grid-template-areas: "status status" "event event" "unlock unlock" "results results" "map entry" "log log" "trebs setup" "share access";
  }
  :root[data-design="scoreboard"][data-spectator="true"] #trackerSection {
    grid-template-areas: "map results" "status status" "event event" "log log" "trebs trebs" "share share";
  }
  :root[data-design="scoreboard"]:not([data-spectator="true"]) #resultsCard { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
  :root[data-design="scoreboard"]:not([data-spectator="true"]) .result-panel + .result-panel { border-top: none; border-left: 1px solid var(--line); padding-left: 24px; }
}
:root[data-design="field"] .card { box-shadow: 0 4px 18px rgba(15,36,54,.05); }
:root[data-design="field"] #shotEntryCard { border-top: 4px solid var(--accent); }
:root[data-design="field"] #resultsCard { border-top: 4px solid var(--amber); }
:root[data-design="scoreboard"] {
  --ink: #f2f6fa; --paper: #101924; --card: #192838; --line: #40536a;
  --deep: #f2f6fa; --accent: #9ddadd; --accent2: #70bdc8; --amber: #ffd173; --danger: #ffad90;
}
:root[data-design="scoreboard"] .card { border-radius: 4px; }
:root[data-design="scoreboard"] h1 { text-transform: uppercase; letter-spacing: .04em; }
:root[data-design="scoreboard"] .metric-value { font-size: clamp(2.8rem, 4vw, 4rem); color: var(--amber); }
:root[data-design="scoreboard"] #shotEntryCard button.submit-shot { background: var(--amber); color: var(--paper); }
:root[data-design="notebook"] {
  --ink: #21352e; --paper: #eeeee5; --card: #fafaf3; --line: #bcc9bd;
  --deep: #2b4c3d; --accent: #35614e; --accent2: #56806b; --amber: #865020; --danger: #a3401f;
}
:root[data-design="notebook"] .card { border-radius: 2px; border-top: 3px solid var(--deep); }
:root[data-design="notebook"] .metric-value { font-family: 'Courier New', monospace; font-size: 2.5rem; }
:root[data-design="notebook"] #diagram { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; }
:root[data-design="notebook"] .card h2 { text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; }
@media (prefers-color-scheme: dark) {
  :root[data-design="notebook"]:not([data-theme="light"]) {
    --ink: #e3eade; --paper: #17251e; --card: #203329; --line: #496454;
    --deep: #c5dfc2; --accent: #b0d5bd; --accent2: #8dbb9b; --amber: #e1b274; --danger: #ffad90;
  }
}
@media (max-width: 599px) {
  :root:not([data-design="classic"]) body { padding: 16px 12px 40px; }
  :root:not([data-design="classic"]) .card { padding: 16px; }
  :root:not([data-design="classic"]) #mapContainer { height: 340px; }
  :root:not([data-design="classic"]) .triangle-control { width: 100%; }
  :root:not([data-design="classic"]) .triangle-control input { min-height: 20px; }
  :root:not([data-design="classic"]) .share-bar input { min-width: 0; flex-basis: 100%; }
  :root:not([data-design="classic"]) #trebTable { font-size: .8rem; }
  .design-picker select { width: 100%; }
}