/* imp-mode.css — P34: the light/dark switch (views/partials/theme-toggle.ejs, js/theme.js).
   The dark palette itself lives in brand.css; this file only draws the button. Colours come
   from brand.css tokens only. */
.imp-theme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); flex: none;
  min-height: 40px; min-width: 40px; padding: 0 var(--sp-4); margin: 0; cursor: pointer;
  border: 1px solid var(--imp-rule-strong); border-radius: var(--imp-radius-badge);
  background: var(--imp-surface); box-shadow: var(--imp-shadow);
  color: var(--imp-secondary); font: inherit; font-size: var(--fs-2); font-weight: 700; white-space: nowrap;
  transition: transform var(--imp-ease), box-shadow var(--imp-ease), background var(--imp-ease);
}
.imp-theme:hover { transform: translateY(-1px); box-shadow: var(--imp-shadow-md); color: var(--imp-ink); }
.imp-theme[aria-pressed="true"] { background: var(--imp-primary-wash-2); border-color: var(--imp-primary-strong); color: var(--imp-primary-strong); }
.imp-theme__icon { display: block; flex: none; }
.imp-theme__sun { display: none; }
.imp-theme[aria-pressed="true"] .imp-theme__sun { display: block; }
.imp-theme[aria-pressed="true"] .imp-theme__moon { display: none; }

/* Without js/theme.js the button could do nothing: keep it out of the way. */
html:not([data-theme-js]) .imp-theme { display: none; }

/* Pages with no top bar (sign-in, errors) get the floating one, top right. */
.imp-theme--float { position: fixed; top: 12px; right: 12px; z-index: 70; }
body:has(.imp-topbar) .imp-theme--float { display: none; }

@media (max-width: 1100px) {
  .imp-topbar .imp-theme { width: 40px; padding: 0; }
  .imp-topbar .imp-theme__label { display: none; }
}
@media (max-width: 640px) {
  .imp-theme--float { width: 40px; padding: 0; }
  .imp-theme--float .imp-theme__label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .imp-theme, .imp-theme:hover { transition: none; transform: none; } }