/* Shared appearance tokens and header control. */
:root {
  --accent-strong: #2b4df0;
  --on-accent: #ffffff;
  --pop: #d4ff3f;
  --on-pop: #14170b;
  --accent-soft: color-mix(in srgb, var(--lime) 22%, var(--paper));
  --accent-border: color-mix(in srgb, var(--lime) 65%, var(--accent-strong));
  --accent-hover: color-mix(in srgb, var(--accent-strong) 84%, var(--ink));
}
html[data-theme] { color: var(--ink); background: var(--paper); }
html[data-theme] body { color: var(--ink); }
jpeg-theme-switch { display: inline-flex; flex-shrink: 0; }
jpeg-theme-switch button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  padding: 7px;
  background: var(--paper);
  color: var(--ink);
  font: 12px 'DM Sans', Arial, sans-serif;
  cursor: pointer;
}
jpeg-theme-switch button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
@media (max-width: 480px) {
  .header-actions { gap: 6px; }
  jpeg-theme-switch button { width: 32px; }
  body[data-page] header { gap: 8px; }
  body[data-page] header .brand span { display: none; }
}
@media print { jpeg-theme-switch { display: none; } }

jpeg-theme-switch svg { width: 18px; height: 18px; }
jpeg-theme-switch button:hover { background: var(--surface); }
/* The ink brand mark matches both the app and docs header. */
.header .brand-mark, header .brand-mark { display: block; width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; margin-right: 6px; }
/* The ink mark inverts on dark surfaces. */
html[data-theme="dark"] header .brand-mark { filter: invert(1); }
body[data-page] header .brand { display: inline-flex; align-items: center; }
@media (max-width: 760px) { .header .brand-mark, header .brand-mark { width: 30px; height: 30px; } }
@media (max-width: 760px) { jpeg-theme-switch button { width: 44px; height: 44px; min-height: 44px; } }