/* Shared with the Unity control palette in BaseUIController.Theme.cs. */
:root {
  --control-bg: #26313d;
  --control-text: #edf3fa;
  --control-border: #8094aa;
  --control-accent: #48f0b0;
  --control-ink: #1b2129;
  --control-selected: #263f3c;
  --control-focus: var(--control-accent);
  --control-disabled-bg: #29313a;
  --control-disabled-text: #7e8995;
  --control-disabled-border: #46515e;
  --control-shadow: 0 2px 0 #0005;
}
:root[data-theme="light"] {
  --control-bg: #ffffff;
  --control-text: #22313f;
  --control-border: #647589;
  --control-accent: #14735d;
  --control-ink: #ffffff;
  --control-selected: #e0efea;
  --control-focus: var(--control-accent);
  --control-disabled-bg: #e3e8ed;
  --control-disabled-text: #75808c;
  --control-disabled-border: #bac4ce;
  --control-shadow: 0 2px 0 #22313f26;
}

/* Enabled actions have a clear edge and a small raised surface. */
.button, .dialog-close, .typing-tabs button,
.language-control select, .keyboard-control select, .onboarding-language select,
#lesson-editor button, #lesson-editor select, #lesson-editor a[data-io-download],
#fullscreen-toggle, #player-retry {
  background: var(--control-bg);
  color: var(--control-text);
  border: 1px solid var(--control-border);
  box-shadow: var(--control-shadow);
  cursor: pointer;
}
.dialog-close { border-radius: 6px; }
#lesson-search-input::placeholder, #lesson-editor input[type="search"]::placeholder {
  color: var(--control-border);
  opacity: 1;
}
.button-primary, #lesson-editor .lesson-editor-primary, #lesson-editor a[data-io-download] {
  background: var(--control-accent);
  border-color: var(--control-accent);
  color: var(--control-ink);
}

/* Persistent selection normally uses a tinted surface plus an edge/mark. */
.typing-tabs button[aria-selected="true"],
#lesson-editor button[aria-pressed="true"], #lesson-editor select.is-selected,
.layout-choice:has(input:checked) {
  background: var(--control-selected);
  color: var(--control-text);
  border-color: var(--control-accent);
  box-shadow: inset 0 0 0 1px var(--control-accent);
  font-weight: 700;
}
.typing-tabs button { border-radius: 6px 6px 0 0; }
.typing-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px var(--control-accent); }
.lesson-manager-filters button[aria-pressed="true"]::before { content: '✓ '; }
.lesson-io-list > div:has(input:checked), #lesson-editor .lesson-io-list > label:has(input:checked) {
  background: var(--control-selected);
  box-shadow: inset 3px 0 var(--control-accent);
}
/* Hover/press are transient; keyboard focus uses the green accent with an outside gap. */
button:not(:disabled):not([data-set-theme]):hover, .button:not([aria-disabled="true"]):hover,
#lesson-editor button:not(:disabled):hover, #lesson-editor a[data-io-download]:not([aria-disabled="true"]):hover {
  filter: brightness(1.08);
  border-color: var(--control-accent);
}
button:not([data-set-theme]):not(:disabled):active, #lesson-editor button:not(:disabled):active { box-shadow: none; }
/* Inline switches, stars and drag handles do not gain a frame on pointer hover. */
#lesson-editor button:is(.lesson-manager-visibility, .lesson-manager-bookmark, .lesson-editor-drag):not(:disabled),
#lesson-editor button:is(.lesson-manager-visibility, .lesson-manager-bookmark, .lesson-editor-drag):not(:disabled):hover {
  border-color: transparent;
  box-shadow: none;
}
#lesson-editor .lesson-manager-visibility:not(:disabled) { background: transparent; }
#lesson-editor .lesson-manager-bookmark[aria-pressed="true"]:not(:disabled) {
  background: var(--control-accent);
  color: var(--control-ink);
}
button:not([data-set-theme]):focus-visible, a:focus-visible, select:focus-visible, input:focus-visible,
.typing-tabs button:focus-visible,
.keyboard-control select:focus-visible, .help-button:focus-visible,
#lesson-editor button:focus-visible, #lesson-editor input:focus-visible,
#lesson-editor select:focus-visible, #lesson-editor a[data-io-download]:focus-visible,
.lesson-import-questions:focus-visible, #fullscreen-toggle:focus-visible, #player-retry:focus-visible {
  outline: 3px solid var(--control-focus);
  outline-offset: 3px;
}

/* Unavailable controls are opaque, neutral and flat in either theme. */
button:disabled, select:disabled, .typing-tabs button:disabled,
.onboarding-actions .button:disabled, .keyboard-control select:disabled,
#lesson-editor button:disabled, #lesson-editor a[data-io-download][aria-disabled="true"],
#fullscreen-toggle:disabled {
  opacity: 1;
  background: var(--control-disabled-bg);
  color: var(--control-disabled-text);
  border: 1px solid var(--control-disabled-border);
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}