/* Founder-approved Wave S structural shell. Tool logic and element IDs remain local. */
html.iot-wave-s-page .quarto-title-block,
html.iot-wave-s-page #title-block-header,
html.iot-wave-s-page h1.title,
html.iot-wave-s-page .quarto-title-meta,
html.iot-wave-s-page .quarto-categories,
html.iot-wave-s-page #interactive-game > h1,
html.iot-wave-s-page #interactive-game > h2 {
  display: none !important;
}

html.iot-wave-s-page .page-columns,
html.iot-wave-s-page main.content,
html.iot-wave-s-page #quarto-content,
html.iot-wave-s-page #quarto-document-content {
  display: block;
  width: 100%;
  max-width: none;
}

#actuatorGame,
#bleGame,
#dcgGame,
#lptGame {
  --ws-teal: #197f8d;
  --ws-blue: #3e68a6;
  --ws-green: #2f8d57;
  --ws-amber: #b96824;
  --ws-red: #b9484d;
  --ws-ink: #20343d;
  --ws-muted: #526a73;
  --ws-line: #d8e3e8;
  --ws-module-tint: color-mix(in srgb, var(--pc-main) 7%, white);
  --ws-module-tint-strong: color-mix(in srgb, var(--pc-main) 13%, white);
  --ws-module-border: color-mix(in srgb, var(--pc-main) 42%, white);
  --ws-module-ink: color-mix(in srgb, var(--pc-main) 72%, #20343d);
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: none !important;
  margin: 0 0 28px 50%;
  margin-left: 50% !important;
  padding: 16px;
  transform: translateX(-50%);
  color: var(--ws-ink);
  background: var(--ws-module-tint);
  border: 1px solid var(--ws-module-border);
  border-radius: 8px;
  box-shadow: none;
  font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#actuatorGame { --pc-main: #f06a35; }
#bleGame { --pc-main: #43a047; }
#dcgGame, #lptGame { --pc-main: #7ec850; }

#actuatorGame .game-header,
#bleGame .ble-hero,
#dcgGame .dcg-hero,
#lptGame .lpt-hero {
  padding: 24px;
  margin-bottom: 14px;
  color: var(--ws-ink) !important;
  text-align: left;
  background: var(--ws-module-tint-strong) !important;
  border: 1px solid var(--ws-module-border);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(32, 52, 61, 0.1);
}

#actuatorGame .game-header h2,
#bleGame .ble-hero h2,
#dcgGame .dcg-hero h2,
#lptGame .lpt-hero h2 {
  margin: 0 0 10px;
  color: var(--ws-ink) !important;
  font-size: clamp(32px, 4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

#actuatorGame .game-header p,
#bleGame .ble-hero p,
#dcgGame .dcg-hero p,
#lptGame .lpt-hero p {
  max-width: 850px;
  color: #38515b !important;
  font-size: 17px;
}

:where(#actuatorGame .game-pill, #bleGame .ble-pill, #dcgGame .dcg-pill, #lptGame .lpt-pill) {
  color: var(--ws-module-ink) !important;
  background: var(--ws-module-tint) !important;
  border: 1px solid var(--ws-module-border) !important;
  font-size: 12px;
  letter-spacing: 0.05em;
}

:where(#actuatorGame .game-metric, #bleGame .ble-metric, #dcgGame .dcg-metric, #lptGame .lpt-metric) {
  color: var(--ws-ink) !important;
  background: #fff !important;
  border: 1px solid var(--ws-module-border) !important;
  border-radius: 8px;
}

:where(#actuatorGame .game-metric, #bleGame .ble-metric, #dcgGame .dcg-metric, #lptGame .lpt-metric) :where(strong, span) {
  color: var(--ws-ink) !important;
}

.ws-ramp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.ws-ramp-card,
.ws-boundaries,
.ws-legend {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--ws-line);
  border-radius: 8px;
}

.ws-ramp-card strong,
.ws-ramp-card span { display: block; }
.ws-ramp-card strong {
  color: var(--ws-teal);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ws-ramp-card span,
.ws-boundaries,
.ws-legend { color: #38515b; font-size: 14px; }
.ws-ramp-card span { margin-top: 4px; }

.ws-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0;
}
.ws-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ws-legend i { width: 11px; height: 11px; border-radius: 3px; }
.ws-legend .identity { background: var(--ws-module-tint-strong); border: 1px solid var(--ws-module-border); }
.ws-legend .current { background: var(--ws-teal); }
.ws-legend .reference { background: var(--ws-blue); }
.ws-legend .success { background: var(--ws-green); }
.ws-legend .caution { background: var(--ws-amber); }
.ws-legend .error { background: var(--ws-red); }
.ws-boundaries { margin-top: 14px; }

:where(#actuatorGame, #bleGame, #dcgGame, #lptGame) :where(.stat-card, .scenario-card, .ble-progress-card, .ble-stat, .ble-scenario, .ble-config-shell, .ble-help-card, .ble-results, .dcg-progress-card, .dcg-stat, .dcg-scenario-card, .dcg-controls-panel, .dcg-meter-panel, .dcg-feedback, .lpt-progress-card, .lpt-stat, .lpt-scenario-card, .lpt-controls-panel, .lpt-meter-panel, .lpt-feedback) {
  background: #fff;
  border: 1px solid var(--ws-line);
  border-radius: 8px;
  box-shadow: none;
}

:where(#actuatorGame, #bleGame, #dcgGame, #lptGame) :where(button, select, input) {
  font-family: inherit;
}

:where(#actuatorGame, #bleGame, #dcgGame, #lptGame) :where(.difficulty-btn.active, .ble-btn:not(.secondary), .dcg-submit, .lpt-submit) {
  color: #fff !important;
  background: var(--ws-teal) !important;
  border-color: var(--ws-teal) !important;
}

@media (max-width: 640px) {
  :where(#actuatorGame, #bleGame, #dcgGame, #lptGame) {
    width: min(1180px, calc(100vw - 16px));
    padding: 8px;
  }
  .ws-ramp { grid-template-columns: 1fr; }
  :where(#actuatorGame .game-header, #bleGame .ble-hero, #dcgGame .dcg-hero, #lptGame .lpt-hero) { padding: 18px; }
  #dcgGame[data-iot-interactive-theme="flat"][data-iot-recolor-pilot="true"][data-iot-module="lorawan"] .dcg-hero {
    color: var(--ws-ink) !important;
    background: var(--ws-module-tint-strong) !important;
    border-color: var(--ws-module-border) !important;
  }
  #dcgGame[data-iot-interactive-theme="flat"][data-iot-recolor-pilot="true"][data-iot-module="lorawan"] .dcg-hero h2,
  #dcgGame[data-iot-interactive-theme="flat"][data-iot-recolor-pilot="true"][data-iot-module="lorawan"] .dcg-hero p,
  #dcgGame[data-iot-interactive-theme="flat"][data-iot-recolor-pilot="true"][data-iot-module="lorawan"] .dcg-metric strong,
  #dcgGame[data-iot-interactive-theme="flat"][data-iot-recolor-pilot="true"][data-iot-module="lorawan"] .dcg-metric span {
    color: var(--ws-ink) !important;
  }
  #dcgGame[data-iot-interactive-theme="flat"][data-iot-recolor-pilot="true"][data-iot-module="lorawan"] .dcg-metric {
    background: #fff !important;
    border-color: var(--ws-module-border) !important;
  }
}

/* Scientific/legacy workbenches retain their specialised plots but inherit the same shell contract. */
#spfWorkbench,
#kalmanLab {
  --ws-teal: #197f8d;
  --ws-blue: #3e68a6;
  --ws-green: #2f8d57;
  --ws-amber: #b96824;
  --ws-red: #b9484d;
  --ws-ink: #20343d;
  --ws-line: #d8e3e8;
  --ws-module-tint: color-mix(in srgb, var(--pc-main) 7%, white);
  --ws-module-tint-strong: color-mix(in srgb, var(--pc-main) 13%, white);
  --ws-module-border: color-mix(in srgb, var(--pc-main) 42%, white);
  --ws-module-ink: color-mix(in srgb, var(--pc-main) 72%, #20343d);
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: none !important;
  color: var(--ws-ink);
  background: var(--ws-module-tint);
  border-color: var(--ws-module-border);
  border-radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin-left: 50% !important;
}
#kalmanLab {
  margin-right: auto !important;
  margin-left: auto !important;
  transform: none !important;
}
#spfWorkbench { --pc-main: #43a047; }
#kalmanLab { --pc-main: #1976d2; }
#spfWorkbench .spf-hero,
#kalmanLab .kf-hero {
  color: var(--ws-ink);
  background: var(--ws-module-tint-strong);
  border: 1px solid var(--ws-module-border);
  box-shadow: 0 14px 34px rgba(32, 52, 61, 0.1);
}
#spfWorkbench .spf-hero :where(h2, p),
#kalmanLab .kf-hero :where(h2, p) { color: var(--ws-ink); }
#spfWorkbench .spf-pill,
#kalmanLab .kf-tag {
  color: var(--ws-module-ink);
  background: var(--ws-module-tint);
  border-color: var(--ws-module-border);
}
#spfWorkbench .spf-metric,
#kalmanLab .kf-metric {
  color: var(--ws-ink);
  background: #fff;
  border-color: var(--ws-module-border);
}
#spfWorkbench .spf-metric strong { color: var(--ws-ink); }
#spfWorkbench .spf-metric span { color: #526a73; }
#spfWorkbench .spf-panel,
#kalmanLab .kf-stage,
#kalmanLab .kf-panel,
#kalmanLab .kf-controls,
#kalmanLab .kf-learning,
#kalmanLab .kf-related {
  background: #fff;
  border: 1px solid var(--ws-line);
  border-radius: 8px;
  box-shadow: none;
}