/* Phones: purple highlights, following the phone's light/dark setting.
   Dark is near-black (in the style of the Obsidian app); light is quiet
   greys on white, like the laptop look in desktop.css. Laptops keep each
   page's own light and dark colours. Loaded after each page's <style>, so
   these win on narrow screens. */
@media (max-width: 959px) {
  :root {
    color-scheme: light;
    --bg: #f7f7f8; --card: #ffffff; --text: #171717; --muted: #6b6b73;
    --line: #e4e4e7; --accent: #7048e8; --accent-text: #ffffff; --error: #c92a2a;
    --chip: #efeafd; --ok: #2f9e44;
  }
  ::selection { background: color-mix(in srgb, #7048e8 25%, transparent); }
  input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
  }
}
@media (max-width: 959px) and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0a0a0c; --card: #17151c; --text: #e6e4ec; --muted: #9d99a8;
    --line: #2b2833; --accent: #8b6cf6; --accent-text: #ffffff; --error: #ff8787;
    --chip: #241d38; --ok: #69db7c;
  }
  ::selection { background: #8b6cf6; color: #ffffff; }
  /* The drawer shadows are tuned for a light page; on black they need to be
     darker to show at all. */
  body[data-drawer] .drawer-backdrop { background: rgba(0, 0, 0, .6); }
}