/* Shared host-side polish for the Caller, sheet builder, and Random Wheel.
   Every rule stays on screen UI so printed cards and patron displays retain
   their own type, color, and scale. */
@media screen {
  /* Caller host controls */
  body:not(.display-mode) #hostPanel,
  body:not(.display-mode) .caller-header,
  body:not(.display-mode) .session-launcher-modal {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  }

  body:not(.display-mode) #hostPanel .panel-section,
  body:not(.display-mode) #hostPanel .caller-board-wrap {
    border-width: 1px;
    border-color: rgba(148, 163, 184, 0.24);
    border-radius: 10px;
  }

  body:not(.display-mode) #hostPanel .call-controls {
    border-color: rgba(148, 163, 184, 0.34);
  }

  body:not(.display-mode) #hostPanel .game-options {
    border-color: rgba(148, 163, 184, 0.2);
    border-radius: 8px;
  }

  body:not(.display-mode) #hostPanel .panel-section > h2,
  body:not(.display-mode) #hostPanel .section-heading h2,
  body:not(.display-mode) #hostPanel .round-setup > summary {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
    font-weight: 700;
  }

  body:not(.display-mode) #hostPanel .section-heading h2,
  body:not(.display-mode) #hostPanel .round-setup .pattern-preview-wrap h3 {
    font-size: 1rem;
    line-height: 1.2;
  }

  body:not(.display-mode) #hostPanel .control-column label,
  body:not(.display-mode) #hostPanel .session-column label {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
    font-weight: 700;
  }

  body:not(.display-mode) #hostPanel .current-round-copy h2 {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
    font-weight: 700;
  }

  body:not(.display-mode) #hostPanel .current-round-copy p {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
    font-weight: 400;
  }

  body:not(.display-mode) #hostPanel .control-column button:not(.primary):not(.danger):not(.bingo-action):not([aria-pressed="true"]),
  body:not(.display-mode) #hostPanel .session-column button:not(.primary):not(.danger):not([aria-pressed="true"]),
  body:not(.display-mode) .session-launcher-modal button:not(.primary):not(.danger):not(.icon-close) {
    min-height: 2.4rem;
    padding: 0.5rem 0.78rem;
    border-radius: 8px;
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(148, 163, 184, 0.1);
    color: inherit;
    box-shadow: none;
  }

  body:not(.display-mode) #hostPanel .control-column button:not(.primary):not(.danger):not(.bingo-action):not([aria-pressed="true"]):hover:not(:disabled),
  body:not(.display-mode) #hostPanel .session-column button:not(.primary):not(.danger):not([aria-pressed="true"]):hover:not(:disabled),
  body:not(.display-mode) .session-launcher-modal button:not(.primary):not(.danger):not(.icon-close):hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.18);
  }

  body:not(.display-mode) #hostPanel .control-column input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body:not(.display-mode) #hostPanel .control-column select,
  body:not(.display-mode) #hostPanel .session-column input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body:not(.display-mode) #hostPanel .session-column select,
  body:not(.display-mode) .session-launcher-modal input:not([type="checkbox"]):not([type="radio"]),
  body:not(.display-mode) .session-launcher-modal select {
    min-height: 2.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
  }

  /* Builder editing controls. The sheet preview, editor cells, and export
     preview are intentionally excluded from these host-facing rules. */
  .app-header,
  .sidebar,
  .preview-toolbar {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  }

  .sidebar-section {
    border-color: rgba(148, 163, 184, 0.3);
  }

  body.dark-mode .sidebar-section {
    border-color: rgba(148, 163, 184, 0.18);
  }

  .sidebar-section h2 {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.025em;
    font-weight: 700;
  }

  .sidebar button:not(.section-toggle):not(.icon-button),
  .app-header button:not(.header-icon-button):not(.section-toggle):not(.icon-button),
  .app-header a,
  .preview-toolbar button {
    min-height: 2.4rem;
    padding: 0.5rem 0.78rem;
    border-radius: 8px;
  }

  .sidebar-section label {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
    font-weight: 700;
  }

  .sidebar input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .sidebar select,
  .sidebar textarea {
    min-height: 2.4rem;
    padding: 0.5rem 0.68rem;
    border-radius: 8px;
  }

  .sidebar button:not(.primary):not(.danger):not(.section-toggle):not(.icon-button),
  .app-header button:not(.primary):not(.danger):not(.header-icon-button):not(.section-toggle):not(.icon-button),
  .app-header a {
    box-shadow: none;
  }

  /* Random Wheel host: calm utility controls, with Spin and primary actions
     preserving their existing color and visual weight. */
  body.host-mode .control-panel,
  body.host-mode .history-panel,
  body.host-mode .entries-panel {
    border-color: rgba(148, 163, 184, 0.2);
    border-radius: 10px;
  }

  body.host-mode .control-panel,
  body.host-mode .history-panel,
  body.host-mode .entries-panel,
  body.host-mode .wheel-navigation,
  body.host-mode .header-actions {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  }

  body.host-mode .field,
  body.host-mode .toggle-row,
  body.host-mode .range-row {
    font-weight: 700;
  }

  body.host-mode .panel-heading h2 {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  body.host-mode .control-panel button:not(.primary):not(.danger):not(.spin-button),
  body.host-mode .history-panel button:not(.primary):not(.danger),
  body.host-mode .entries-panel button:not(.primary):not(.danger),
  body.host-mode .header-actions button:not(.primary):not(.danger),
  body.host-mode .wheel-navigation button:not(.primary):not(.danger) {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text);
    box-shadow: none;
  }

  body.host-mode .control-panel button:not(.primary):not(.danger):not(.spin-button):hover:not(:disabled),
  body.host-mode .history-panel button:not(.primary):not(.danger):hover:not(:disabled),
  body.host-mode .entries-panel button:not(.primary):not(.danger):hover:not(:disabled),
  body.host-mode .header-actions button:not(.primary):not(.danger):hover:not(:disabled),
  body.host-mode .wheel-navigation button:not(.primary):not(.danger):hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.18);
  }

  body.host-mode .control-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body.host-mode .control-panel select,
  body.host-mode .control-panel textarea {
    border-radius: 8px;
  }

  /* Shared feedback stays within each control's existing footprint. */
  body:not(.display-mode) :is(.caller-header, #hostPanel, .session-launcher-modal, .settings-modal, .end-session-confirm-modal, .session-complete-modal) button,
  body.host-mode :is(.control-panel, .entries-panel, .history-panel, .wheel-navigation) button {
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }

  body:not(.display-mode) :is(.caller-header, #hostPanel, .session-launcher-modal, .settings-modal, .end-session-confirm-modal, .session-complete-modal) button:active,
  body.host-mode :is(.control-panel, .entries-panel, .history-panel, .wheel-navigation) button:active {
    transform: none;
  }

  body:not(.display-mode) :is(.settings-modal, .end-session-confirm-modal, .session-complete-modal),
  body.host-mode :is(.import-modal, .result-area, .wheel-undo-toast) {
    font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  }

  body:not(.display-mode) :is(#hostPanel, .caller-header, .session-launcher-modal, .settings-modal, .end-session-confirm-modal, .session-complete-modal) :is(button, input, select, textarea):focus-visible,
  body.host-mode :is(.control-panel, .entries-panel, .history-panel, .wheel-navigation) :is(button, input, select, textarea):focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 2px;
  }

  body:not(.display-mode) :is(#hostPanel, .session-launcher-modal, .settings-modal, .end-session-confirm-modal, .session-complete-modal) p,
  body.host-mode :is(.control-panel, .entries-panel, .history-panel) p {
    text-wrap: pretty;
  }

  body:not(.display-mode) :is(.settings-modal, .end-session-confirm-modal, .session-complete-modal) label {
    font-weight: 700;
    line-height: 1.25;
  }
}