/* ===================================================================
   Dark mode for the members-area tools (metronome, tuner, drone,
   recorder, study journal, rhythm exercises).

   Each of those pages runs inside a frame in the members area, so the
   members page's dark palette (body.page-members in styles.css) does not
   reach it: a frame is its own document. They also carry their own inline
   stylesheet with hardcoded white cards. This file repaints them with the
   same palette as the members area, and only when (a) the system is in dark
   mode and (b) the page is embedded (html.embedded, set by a small script in
   each page). Opened on their own — e.g. tuner.html from search — the pages
   keep their light look.
   =================================================================== */
@media (prefers-color-scheme: dark){
  html.embedded{ color-scheme:dark; }
  html.embedded body{
    --ink:#F5F0E8; --ink-deep:#FFFFFF; --muted:#ABB2CE;
    --cream:#141A34; --cream-2:#242C56;
    --line:rgba(255,255,255,.15);
    --shadow:0 18px 48px rgba(0,0,0,.55);
    --dk-surface:#1B2140; --dk-active:#3A4590;
  }
  /* journal test days (js/tests.js): turquoise stays, its pale fill turns translucent */
  html.embedded body{ --test-soft:rgba(37,179,175,.22); --test-deep:#5FD3CF; }
  html.embedded body .cal-cell.future.has-test{ background:var(--test-soft); }
  html.embedded body .note-btn.test-btn{ background:#25B3AF; color:#fff; }
  html.embedded body .note-btn.test-btn:hover{ background:#1B8F8B; }

  /* ---- white cards / panels / buttons -> the members-area surface ---- */
  html.embedded body .tuner-card,
  html.embedded body .drone-card,
  html.embedded body .metro-card,
  html.embedded body .panel,
  html.embedded body .rec-item,
  html.embedded body .string-btn,
  html.embedded body .note-btn,
  html.embedded body .note-tab,
  html.embedded body .mode-btn,
  html.embedded body .step-btn,
  html.embedded body .month-nav button,
  html.embedded body .cal-cell,
  html.embedded body .field-mini select,
  html.embedded body .points-pill,
  html.embedded body .level-card,
  html.embedded body .stage-card,
  html.embedded body .cell-btn,
  html.embedded body .rhy-wrap .btn:not(.primary){ background:var(--dk-surface); }
  html.embedded body .note-btn.accidental{ background:var(--cream); }
  /* journal heat-map legend: the empty swatch is an inline #fff */
  html.embedded body .sw[style*="#fff"]{ background:var(--dk-surface) !important; }

  /* ---- "pressed / selected" used the dark ink as a fill, which is now
     light: give those a deep-indigo (or coral) fill with white text ---- */
  html.embedded body .string-btn.near,
  html.embedded body .note-btn.active,
  html.embedded body .note-btn.accidental.active,
  html.embedded body .note-tab.active,
  html.embedded body .mode-btn.active{ background:var(--coral); border-color:var(--coral); color:#fff; }
  html.embedded body .listen-btn.listening,
  html.embedded body .play-btn.playing,
  html.embedded body .btn-record.is-recording,
  html.embedded body .note-btn.is-recording{ background:var(--dk-active); }
  html.embedded body .listen-btn.listening:hover,
  html.embedded body .play-btn.playing:hover,
  html.embedded body .btn-record.is-recording:hover,
  html.embedded body .note-btn.is-recording:hover{ background:#4A56A8; }

  /* ---- tinted status colours: pastel fills -> translucent ones ---- */
  html.embedded body .cal-cell.heat-1{ background:rgba(255,107,92,.18); }
  html.embedded body .cal-cell.heat-2{ background:rgba(255,107,92,.38); }
  html.embedded body .rec-quota.full{ background:rgba(255,107,92,.2); }
  html.embedded body .rec-badge.reviewed,
  html.embedded body .cell-btn.passed,
  html.embedded body .result-box.pass{ background:rgba(63,122,77,.3); color:#8FD9A0; }
  html.embedded body .rec-club-note{ background:rgba(255,194,75,.16); }
  html.embedded body .result-box.fail{ background:rgba(255,107,92,.2); }

  /* ---- tuner: keep the in-tune strip readable, needle stays dark on it ---- */
  html.embedded body .meter-track{ filter:brightness(.78); }
  html.embedded body .meter-center{ background:#241B2E; }

  /* ---- rhythm: the beat figures are dark engraved notation, so their
     tiles stay light (like a page of sheet music) and keep dark text ---- */
  html.embedded body .notation-strip .fig-beat,
  html.embedded body .drop-slot,
  html.embedded body .pal-item,
  html.embedded body .drag-ghost{
    --ink:#241B2E; --muted:#6E6478; --line:#ECE0CF; --cream:#FFF6EA;
    background:#fff; color:#241B2E;
  }
  html.embedded body .drop-slot.given{ background:#FFF6EA; }
  html.embedded body .drop-slot.over,
  html.embedded body .pal-item.picked{ background:#FFF3F1; }
  html.embedded body .drop-slot.right{ background:#E9F7EF; }
  html.embedded body .drop-slot.wrong{ background:#FDEADD; }
}