/* Shared controls: explicit foregrounds prevent theme and link styles from
   putting dark text on a filled blue button. */
:root {
  --control-fill: #0971a5;
  --control-fill-hover: #075d88;
  --control-on-fill: #fff;
  --control-soft: #eaf6fa;
  --control-soft-hover: #dceef6;
  --control-on-soft: #23556c;
  --control-border: #c9e1eb;
  --control-selected: #cee8f4;
  --control-selected-border: #6097b0;
  --control-disabled: #e3ebef;
  --control-on-disabled: #50616a;
  --control-focus: #0875aa;
}
:root[data-theme='dark'],
.demo-section {
  --control-soft: #173747;
  --control-soft-hover: #214b60;
  --control-on-soft: #d6edf7;
  --control-border: #3c6275;
  --control-selected: #24566e;
  --control-selected-border: #7bc8ed;
  --control-disabled: #243c48;
  --control-on-disabled: #afc3cd;
  --control-focus: #7bc8ed;
}
:root :is(button, .button),
:root .status-actions a {
  background: var(--control-fill);
  color: var(--control-on-fill);
  border: 1px solid var(--control-fill);
  border-radius: 12px;
  font:
    600 14px/1.4 system-ui,
    sans-serif;
  min-height: 42px;
  padding: 10px 16px;
  box-shadow: 0 3px 9px #064e751c;
  text-decoration: none;
  cursor: pointer;
  gap: 8px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
:root :is(button, .button):hover:not(:disabled) {
  background: var(--control-fill-hover);
  color: var(--control-on-fill);
  border-color: var(--control-fill-hover);
  transform: none;
}
:root
  :is(
    .secondary,
    .control-soft,
    .button.outline,
    .button.light,
    .demo-choice,
    .voice-review-row,
    .usage-periods button
  ),
:root .status-actions a,
:root #organization-switcher summary {
  background: var(--control-soft);
  color: var(--control-on-soft);
  border: 1px solid var(--control-border);
  border-radius: 12px;
  box-shadow: 0 3px 9px #064e7514;
}
:root
  :is(
    .secondary,
    .control-soft,
    .button.outline,
    .button.light,
    .demo-choice,
    .voice-review-row,
    .usage-periods button
  ):hover:not(:disabled),
:root .status-actions a:hover,
:root #organization-switcher summary:hover {
  background: var(--control-soft-hover);
  color: var(--control-on-soft);
  border-color: var(--control-selected-border);
}
:root
  :is(
    .demo-choice.selected,
    .usage-periods button.selected,
    .voice-review-row[aria-pressed='true']
  ) {
  background: var(--control-selected);
  color: var(--control-on-soft);
  border-color: var(--control-selected-border);
  box-shadow: inset 0 0 0 1px var(--control-selected-border);
}
:root .demo-choice {
  text-align: left;
}
:root .demo-choice small,
:root .voice-review-row small {
  color: inherit;
}
:root :is(button:disabled, .button[aria-disabled='true']) {
  background: var(--control-disabled);
  color: var(--control-on-disabled);
  border-color: var(--control-border);
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
}
:root :is(button, a, summary):focus-visible {
  outline: 3px solid var(--control-focus);
  outline-offset: 3px;
}
:root #theme-toggle,
:root .status-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.status-header {
  flex-wrap: wrap;
  gap: 14px;
}
.status-header .status-actions {
  flex-wrap: wrap;
  max-width: 100%;
  margin-left: auto;
}
.ui-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: inherit;
  vertical-align: -0.2em;
}
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
:root .theme-icon {
  margin: 0;
  line-height: 1;
}
.service-icon .ui-icon,
.server-icon .ui-icon,
.home-stat-icon .ui-icon {
  width: 24px;
  height: 24px;
}
@media (max-width: 600px) {
  :root header :is(button, .button),
  :root .status-actions a {
    min-height: 42px;
    padding: 9px 11px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root :is(button, .button),
  :root .status-actions a {
    transition: none;
  }
}