/* Optional sign-bank color by taught lesson (drag_fill.html "Advanced options"). Tints are
   background-only so glyph color, border, size and the hover/focus/selected states are the
   exercise's own; every tint keeps >= 7:1 against --ink and >= 3:1 against the tile border (test_bank_color.py). */
:root {
  --lesson-tint-0: #fdeded; --lesson-tint-1: #fef2e3; --lesson-tint-2: #fbf8de; --lesson-tint-3: #eaf6e5;
  --lesson-tint-4: #e4f5f4; --lesson-tint-5: #ecf1fd; --lesson-tint-6: #f4edfc; --lesson-tint-7: #fcecf5;
}
:root[data-theme="midnight"] {
  --lesson-tint-0: #47272f; --lesson-tint-1: #45351f; --lesson-tint-2: #3c3b1f; --lesson-tint-3: #263f2a;
  --lesson-tint-4: #213e3e; --lesson-tint-5: #25355a; --lesson-tint-6: #382b5a; --lesson-tint-7: #4d2b44;
}
/* Same disclosure treatment as the other pages' Advanced options (interlinear reading). */
#advanced-options { border: 1px solid var(--control-line); padding: 0.3em 0.75em; background: var(--surface-raised); margin: 0.5em 0; }
/* Instructions on the left, panel on the right (saves vertical space); open, the panel wraps to its own full-width line below, as on interlinear reading. */
#instructions-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5em 1em; }
#instructions-row #instructions { margin: 0.5em 0; flex: 1 1 20em; }
#instructions-row #advanced-options { flex: 0 0 auto; margin: 0.25em 0; box-sizing: border-box; }
#instructions-row #advanced-options[open] { flex: 1 0 100%; }
#advanced-options summary { font-weight: bold; cursor: pointer; }
#advanced-options[open] summary { margin-bottom: 0.5em; }
.advanced-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 1.5em; }
.advanced-row label { display: inline-flex; align-items: center; gap: 0.3em; }
#tray[data-color-by-lesson] .tile[data-bucket="0"]:not(:hover) { background: var(--lesson-tint-0); }
#tray[data-color-by-lesson] .tile[data-bucket="1"]:not(:hover) { background: var(--lesson-tint-1); }
#tray[data-color-by-lesson] .tile[data-bucket="2"]:not(:hover) { background: var(--lesson-tint-2); }
#tray[data-color-by-lesson] .tile[data-bucket="3"]:not(:hover) { background: var(--lesson-tint-3); }
#tray[data-color-by-lesson] .tile[data-bucket="4"]:not(:hover) { background: var(--lesson-tint-4); }
#tray[data-color-by-lesson] .tile[data-bucket="5"]:not(:hover) { background: var(--lesson-tint-5); }
#tray[data-color-by-lesson] .tile[data-bucket="6"]:not(:hover) { background: var(--lesson-tint-6); }
#tray[data-color-by-lesson] .tile[data-bucket="7"]:not(:hover) { background: var(--lesson-tint-7); }
/* Tints skip :hover so the global button:hover background swap still shows, unchanged. */
@media (forced-colors: active) {
  #tray[data-color-by-lesson] .tile[data-bucket]:not(:hover) { background: ButtonFace; }
}