/* 小赵识字 — automatic dark theme.
   Loaded last. Light mode is untouched; this file only takes over when the
   device asks for a dark appearance (prefers-color-scheme: dark). */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* ---------------------------------------------------------- surfaces */
    --bg: #14100C;
    --paper: #2A221A;
    --control: #2A231C;
    --folder: #332A20;
    --line: #463B2E;
    --line2: #5B4B39;
    --seg: #332B22;
    --bartrack: #3A3128;
    --hover: #2E261F;
    --active: #3D2722;

    /* ------------------------------------------------------------- text */
    --ink: #F4EADB;
    --muted: #B3A18C;
    --muted-2: #8F7E69;

    /* ----------------------------------------------------------- accents */
    --red: #EF7D70;
    --red-edge: #C9655A;
    --red-tint: #3B231F;
    --on-red: #14100C;
    --orange: #EF7D70;
    --danger: #FFAB9F;
    --on-danger: #14100C;
    --on-orange: #14100C;
    --green: #6FCF97;
    --green-ink: #B9EDD0;
    --green-tint: #1F3528;
    --on-green: #14100C;
    --amber: #C8863A;
    --amber-ink: #F4D8A0;
    --amber-tint: #3B2C16;
    --on-amber: #14100C;
    --stamp-again: #F4C04E;
    --gold: #F4C04E;
    --blue: #8CC3EF;
    --blue-ink: #C7E3FA;
    --blue-tint: #182B3A;
    --blue-line: #33546D;

    /* ------------------------------------------------------- elevation */
    --overlay: rgba(0, 0, 0, 0.62);
    --shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    --shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.6);
    --toast-bg: #F4EADB;
    --toast-ink: #14100C;
    --inverse-bg: #F4EADB;
    --inverse-ink: #14100C;
    --inverse-muted: #5B4B39;
    --focus: #EF7D70;
    --grid-line: #B36A63;

    /* -------------------------------------------------------- level hues
       Keep the light theme's warm-to-cool hue ladder, but use deep tints
       with pale ink so badges and level bars read on a dark page. */
    --l0s: #8C8376; --l0t: #2B2620; --l0k: #E5DCCD;
    --l1s: #F08A63; --l1t: #46261B; --l1k: #F8C6B2;
    --l2s: #F0B552; --l2t: #443216; --l2k: #F8DDA8;
    --l3s: #93CE5D; --l3t: #2C3D1D; --l3k: #D2EDB2;
    --l4s: #71B5F0; --l4t: #1D3147; --l4k: #C3E2FA;
    --l5s: #AAA2F2; --l5t: #2E2A4B; --l5k: #DEDAFD;

    /* Legacy level tokens (app.css) and the contrast audit read these. */
    --level-0-bg: #2B2620; --level-0-ink: #E5DCCD;
    --level-1-bg: #46261B; --level-1-ink: #F8C6B2;
    --level-2-bg: #443216; --level-2-ink: #F8DDA8;
    --level-3-bg: #2C3D1D; --level-3-ink: #D2EDB2;
    --level-4-bg: #1D3147; --level-4-ink: #C3E2FA;
    --level-5-bg: #2E2A4B; --level-5-ink: #DEDAFD;
    --level-outline: #8C8376;

    /* Grade stamps. */
    --grade-not-yet-bg: #463420;
    --grade-not-yet-border: #C8863A;
    --grade-not-yet-ink: #F4EADB;
    --grade-not-yet-press: #533C22;
    --grade-got-it-bg: #364130;
    --grade-got-it-border: #6FCF97;
    --grade-got-it-ink: #F4EADB;
    --grade-got-it-press: #3C4F3A;
    --slow-bg: #3E4449;
    --slow-border: #7FB0DD;
    --slow-ink: #F4EADB;
    --slow-press: #4A5662;

    /* Shared component tokens (components.css). */
    --character-grid-bg: var(--paper);
    --character-grid-outside-bg: var(--folder);
    --character-grid-outside-line: var(--line2);
    --story-ink: #F4EADB;
    --story-focus-fill: #3B2C16;
    --story-focus-line: #C8863A;
  }

  /* ------------------------------------------------------------- base */
  html,
  body { background: var(--bg); }
  body { color: var(--ink); }
  input,
  textarea,
  select { color-scheme: dark; }
  input::placeholder,
  textarea::placeholder,
  .new-field input::placeholder,
  .field input::placeholder { color: var(--muted); opacity: 1; }
  ::selection { background: rgba(239, 125, 112, 0.35); color: var(--ink); }
  .add-sheet-overlay { background: rgba(0, 0, 0, 0.62); }

  .hf-badge { box-shadow: 0 0 0 4px rgba(239, 125, 112, 0.18); }

  /* --------------------------------------------------- inverted surfaces
     These components intentionally use the ink colour as a fill in light
     mode; in dark mode they become warm paper chips with dark type. */
  .char-toast,
  .hot-toast,
  .hot-offer,
  .smart-chip.active,
  .lesson-lock-chip,
  .lesson-lock-toggle.on,
  .lesson-lock-pill.on {
    background: var(--inverse-bg);
    border-color: var(--inverse-bg);
    color: var(--inverse-ink);
  }
  .toast { background: var(--toast-bg); color: var(--toast-ink); }
  .toast.error { background: var(--red); color: var(--on-red); }

  .hot-toast-change { color: #8A5A16; }
  .hot-toast-change:active { background: rgba(20, 16, 12, 0.08); }
  .hot-offer-flame { color: #A65A12; }
  .hot-offer-other { color: var(--inverse-muted); }
  .hot-offer-countdown { background: rgba(20, 16, 12, 0.14); color: var(--inverse-ink); }
  .hot-offer-countdown i { background: #B57A16; }
  .hot-offer-add,
  .hotlist-new-row button,
  .hotlist-done {
    background: var(--red);
    border-color: var(--red);
    color: var(--on-red);
  }
  .hotlist-item.ticked .hotlist-check {
    background: var(--green);
    border-color: var(--green);
    color: var(--on-green);
  }
  .lesson-lock-chip button {
    background: rgba(20, 16, 12, 0.14);
    color: var(--inverse-ink);
  }
  .picture-style-check,
  .picture-version-check {
    background: var(--red);
    color: var(--on-red);
  }

  /* Solid accent buttons and badges: dark type on the lighter accent. */
  .round-btn[aria-pressed="true"],
  .round-btn.active,
  .play-all,
  .play-badge,
  .hf-badge,
  .btn-main,
  .new-save,
  .btn-primary,
  .btn-delete,
  .history-label-row .btn.active,
  .character-grid-card .grid-tick,
  .story-tile .grid-tick,
  .picture-chip-btn.primary {
    color: var(--on-red);
  }
  .btn-delete { background: var(--red); border-color: var(--red-edge); }
  .review-chip.active { color: var(--on-amber); }
  .rule-choice.on .rule-choice-mark {
    background: var(--blue);
    border-color: var(--blue);
  }
  .rule-choice.on .rule-choice-mark:not(.multi)::after { background: var(--on-red); }
  .rule-choice.on .rule-choice-mark.multi::after {
    border-right-color: var(--on-red);
    border-bottom-color: var(--on-red);
  }

  /* ---------------------------------------------------- status tints */
  .result-chip.got-it {
    background: var(--green-tint);
    border-color: var(--green);
    color: var(--green-ink);
  }
  .result-chip.slow {
    background: var(--seg);
    border-color: var(--line2);
    color: var(--ink);
  }
  .result-chip.not-yet {
    background: var(--amber-tint);
    border-color: var(--amber);
    color: var(--amber-ink);
  }
  .history-pill.review {
    background: var(--amber-tint);
    border-color: var(--amber);
    color: var(--amber-ink);
  }
  .history-pill.reviewed {
    background: var(--green-tint);
    border-color: var(--green);
    color: var(--green-ink);
  }
  .study-flame.filled {
    background: var(--red-tint);
    border-color: var(--red);
    box-shadow: 0 2px 0 var(--red-edge);
    color: var(--red);
  }
  .flame-btn { color: var(--muted-2); }
  .flame-btn.filled { color: var(--red); }
  .flame-btn.filled .flame-disc { background: var(--red-tint); }

  .lesson-problem {
    background: var(--amber-tint);
    color: var(--amber-ink);
  }
  .lesson-problem.blocking { border-color: var(--red-edge); }
  .lesson-checks-bar.ok {
    background: var(--green-tint);
    color: var(--green-ink);
  }
  .lesson-checks-bar.warn {
    background: var(--amber-tint);
    color: var(--amber-ink);
  }
  .lesson-chip-char,
  .lesson-preview-story .story-char.focus {
    background: var(--amber-tint);
    box-shadow: inset 0 -3px 0 var(--amber);
  }
  .lesson-skipped-note {
    background: var(--amber-tint);
    color: var(--amber-ink);
  }
  .lesson-lock-tile {
    background:
      repeating-linear-gradient(to bottom, rgba(239, 125, 112, 0.35) 0 3px, transparent 3px 7px) center / 1.5px 100% no-repeat,
      repeating-linear-gradient(to right, rgba(239, 125, 112, 0.35) 0 3px, transparent 3px 7px) center / 100% 1.5px no-repeat,
      var(--paper);
  }
  .lesson-lock-tile.off { background: var(--bg); }
  .lesson-known-note { background: var(--folder); }

  .picture-checks {
    background: var(--green-tint);
    color: var(--green-ink);
  }
  .picture-checks.warn {
    background: var(--amber-tint);
    color: var(--amber-ink);
  }
  .picture-failed {
    border-color: var(--red-edge);
    background: var(--red-tint);
    color: var(--red);
  }
  .picture-flag { background: var(--amber-tint); }
  .picture-flag-text { color: var(--amber-ink); }
  .edit-new-tag {
    background: var(--green-tint);
    color: var(--green-ink);
  }

  .list-tag.hot {
    background: var(--red-tint);
    color: var(--red);
  }
  .list-tag.smart {
    background: var(--blue-tint);
    border-color: rgba(139, 180, 230, .45);
    color: var(--blue-ink);
  }
  .smart-tag,
  .smart-banner,
  .smart-token-field,
  .smart-token-static {
    background: var(--blue-tint);
    border-color: var(--blue-line);
    color: var(--blue-ink);
  }
  .smart-reason { color: var(--amber-ink); }
  .smart-token { background: var(--folder); }

  /* --------------------------------------------------- hover / selected */
  .deck-row2:active,
  .settings-row-button:active,
  .settings-row-link:active,
  .history-cascade,
  .hotlist-item:active,
  .rule-sheet-row:active,
  .rule-choice:active,
  .hotlists-row:active,
  .story-row:active,
  .all-stories-row:active,
  .story-source-row:active {
    background: var(--hover);
  }
  .story-tile.selected,
  .character-grid-card.selected,
  .lesson-lock-row.selected {
    background: var(--active);
  }
  .history-cascade { background: var(--hover); }

  /* ---------------------------------------------------- small details */
  .legend-row { color: var(--muted); }
  .deck-drag-handle { color: var(--muted-2); }
  .story-tab { color: var(--muted); }
  .story-tab.selected { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
  .segmented button { color: var(--muted); }
  .segmented button.selected { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
  .ui-switch .knob,
  .hf-capsule .knob {
    background: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .hotlist-grab { background: var(--line); }
  .hotlist-head p { color: var(--muted); }
  .hotlist-icon {
    background: var(--folder);
    color: var(--muted);
  }
  .hotlist-item.ticked .hotlist-icon {
    background: var(--red-tint);
    color: var(--red);
  }
  .hotlist-count { color: var(--muted); }
  .hotlist-tag {
    background: var(--amber-tint);
    color: var(--amber-ink);
  }
  .hotlist-check { border-color: var(--line2); }
  .hotlist-new {
    background: var(--folder);
    color: var(--muted);
  }
  .hotlist-new-icon {
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
  }
  .hotlist-error { color: var(--red); }
  .hotlist-hint { background: var(--folder); }
  .hotlist-empty { color: var(--muted); }
  .smart-join { color: var(--muted); }
  .smart-preview { background: var(--folder); }
  .rule-sheet-icon {
    background: var(--blue-tint);
    color: var(--blue-ink);
  }
  .rule-choice-mark { border-color: var(--line2); }
  .story-source-name.smart,
  .story-source-row-name.smart { color: var(--blue); }
  .story-link-danger,
  .story-chip.selected { color: var(--red); }
  .story-char-card-bar { background: var(--line2); }
  .story-row-cover-tile { color: var(--ink); }
  .lesson-story-cover { color: var(--muted); }
  .character-row-reason { color: var(--amber-ink); }
  .done-hotlist-btn { border-color: var(--red); color: var(--red); }

  /* Dashed character grids and session stars. */
  .deck-row-char::before,
  .deck-row-char::after,
  .tianzige::before,
  .tianzige::after { border-color: var(--grid-line); }
  .star .star-shape { stroke: var(--line2); }
  .star.done .star-shape {
    fill: var(--lc, var(--line2));
    stroke: var(--lc, var(--line2));
  }
  .star.missed .star-shape { stroke: var(--red); }
  .star.missed::after { background: var(--red); }
  .star.current::before { border-color: var(--amber); }
  .star.current .star-shape { stroke: var(--line2); }
  .hero-halo { fill: var(--amber-tint); }
  .hero-star-shape { fill: var(--gold); stroke: var(--amber); }
  .hero-sparkles { stroke: var(--amber); }
  .deck-page .deck-row { border-bottom-color: var(--line); }

  /* ------------------------------------------------------- pictures */
  .picture-round {
    border-color: var(--line2);
    background: var(--paper);
    color: var(--ink);
  }
  .picture-style-thumb { background: var(--folder); }
  .picture-preview-card,
  .picture-density-card,
  .picture-style-row,
  .picture-sections,
  .picture-style-card,
  .picture-caption-after,
  .picture-edit-btn,
  .edit-hint,
  .edit-chip,
  .edit-sections,
  .compare-use,
  .story-sheet-x,
  .story-char-card {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink);
  }
  .picture-hint,
  .picture-density-value small,
  .picture-density-note,
  .picture-style-kicker,
  .picture-box-kicker,
  .picture-box-pencil,
  .picture-sheet-lead,
  .picture-sheet-empty,
  .picture-sheet-hint,
  .picture-details-sub,
  .edit-text-pencil,
  .edit-checks,
  .edit-density-count,
  .compare-meta,
  .settings-value-button,
  .story-char-card-count,
  .picture-save-without {
    color: var(--muted);
  }
  .picture-box {
    border-color: var(--line2);
    background: var(--folder);
  }
  .picture-box-icon {
    background: var(--folder);
    color: var(--muted);
  }
  .picture-chip-btn {
    border-color: var(--line2);
    background: var(--paper);
    color: var(--ink);
  }
  .picture-chip-btn.primary {
    background: var(--red);
    border-color: var(--red);
  }
  .picture-style-card.selected { border-color: var(--ink); }
  .picture-style-sample { background: var(--folder); }
  .picture-caption-label,
  .picture-sheet-label { color: var(--ink); }
  .picture-caption-input,
  .picture-version.in-use { border-color: var(--ink); }
  .picture-sheet-remove { color: var(--red); }
  .picture-sheet-caption,
  .picture-change-input,
  .edit-textarea {
    border-color: var(--line);
    background: var(--paper);
    color: var(--ink);
  }
  .picture-caption-input:focus,
  .picture-sheet-caption:focus,
  .picture-change-input:focus,
  .edit-textarea:focus { outline-color: var(--amber); }
  .picture-sheet-main,
  .picture-version,
  .picture-details-img,
  .picture-details-thumb,
  .reader-picture,
  .story-row-cover,
  .story-row-cover-tile,
  .lesson-story-cover,
  .compare-card img { background: var(--folder); }
  .reader-picture-waiting {
    background: repeating-linear-gradient(
      135deg,
      var(--folder) 0 14px,
      var(--paper) 14px 28px
    );
  }
  .reader-picture-empty { color: var(--muted); }
  .picture-spinner {
    border-color: rgba(244, 234, 219, 0.16);
    color: var(--muted);
  }
  .picture-details-thumb { color: var(--muted); }
  .picture-details-thumb.failed {
    background: var(--red-tint);
    border-color: var(--red-edge);
    color: var(--red);
  }
  .picture-edit-btn { color: var(--ink); }
  .edit-hint { color: var(--ink); }
  .edit-chip { color: var(--ink); }
  .edit-text {
    border-color: var(--line2);
    background: var(--paper);
  }
  .edit-text.edited {
    border-color: var(--amber);
    background: var(--amber-tint);
  }
  .edit-tag {
    background: var(--folder);
    color: var(--muted);
  }
  .edit-density-row { border-bottom-color: var(--line); }
  .compare-row { border-top-color: var(--line); }
  .story-char-card.outside {
    border-color: var(--line2);
    background: var(--folder);
    color: var(--muted);
  }
  .story-char-card-bar.pinyin { color: var(--muted); }
  .lesson-drawing-chip {
    background: var(--paper);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    color: var(--ink);
  }
}

/* Desktop panel framing sits outside the phone viewport, so its backdrop
   needs a deeper shadow than the light theme. */
@media (prefers-color-scheme: dark) and (min-width: 720px) {
  .page-shell {
    box-shadow:
      0 0 0 100vmax rgba(0, 0, 0, 0.62),
      0 20px 60px rgba(0, 0, 0, 0.55);
  }
}