/* SM-791 -- THE Sequence Family grid, ONE stylesheet, two hosts.
   Moved VERBATIM out of templates/exercise_viewer.html, where it lived in
   that page's own <style> element and could not be reached by the routine
   play page. Not one rule changed in the move. Theme tokens only.

   SM-785 HOTFIX, kept as history because it cost a deploy: this block once
   shipped AFTER the closing style tag, so every rule was page TEXT in no
   stylesheet at all and every tile rendered as a bare UA button. A file
   cannot make that mistake, which is one more reason it is a file. */
  /* ── SM-785: the Sequence Family strip ──────────────────────────────────
     Jason, 2026-09-20: a visual menu showing "the parent sequence, its inverse
     ... and all of its theme offsets ... shown together in a visual menu grid".
     Theme tokens only -- no hex literal is introduced by this block. */
  .ev-family { margin: 28px 0 0; }
  /* The [hidden] companion rule is NOT optional: an author `display:` on the
     same selector beats the UA rule and the element renders anyway (SM-583 /
     SM-585 shipped that defect twice in one night). */
  .ev-family[hidden] { display: none; }
  .ev-family-head { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em;
                    font-size: 22px; color: var(--text); margin: 0 0 4px; }
  .ev-family-sub { font-size: 12px; color: var(--text-dim); margin: 0 0 12px; }
  .ev-family-axis { margin: 0 0 14px; }
  .ev-family-axis-head { font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
                         color: var(--text-dim); margin: 0 0 6px; }
  /* A VISUAL MENU GRID. The first build gave every tile a real player -- 41 of
     them on one page, one per row, 16,667px of grid, deployed and reverted the
     same hour. The second drew a diagram per tile. A tile is now three short
     lines of TEXT (Jason, 2026-09-20), with no player, no diagram, no transport,
     no audio context and no tempo of its own.
     auto-fill so the row count follows the width instead of a breakpoint list,
     and every box is exactly as tall as its content. */
  .ev-family-grid { display: grid; gap: 10px;
                    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ev-family-tile { background: var(--card-bg); border: 1px solid var(--card-border);
                    border-radius: 8px; padding: 6px 6px 4px; cursor: pointer;
                    text-align: left; font: inherit; color: var(--text);
                    display: block; width: 100%; }
  .ev-family-tile:hover { border-color: var(--accent); }
  .ev-family-tile[aria-current="true"] { border-color: var(--accent); }
  /* SM-787. A collapsed group hides its overflow tiles with the `hidden`
     attribute, and a tile carries an author `display: block` above -- which
     BEATS the UA [hidden] rule and would render every "hidden" tile in plain
     sight (SM-583 / SM-585 shipped exactly that twice in one night). This
     companion rule is what makes `hidden` mean hidden here. */
  .ev-family-tile[hidden] { display: none; }
  /* "Show all 14". A group past a dozen tiles would cost more rows than it
     earns, and the strip must stay content-tight (Jason's screen-space law),
     so the overflow waits behind one line of text. Text, not a glyph: the
     2026-09-01 icon rule bans a raw character standing in for a control, and
     a written label is the honest alternative to inventing an icon. */
  .ev-family-more { display: block; margin: 8px 0 0; padding: 2px 0;
                    background: none; border: 0; color: var(--accent);
                    font: inherit; font-size: 11px; letter-spacing: .09em;
                    text-transform: uppercase; cursor: pointer; }
  .ev-family-more:hover { text-decoration: underline; }

  /* ── SM-799: the control row, at the TOP, always visible ───────────────
     Jason, 2026-09-21, on the live pop-over: "there needs to be a more
     conspicuous 'Practice These' button, and NOT have it buried at the bottom
     of the interface - it should be an ALWAYS VISIBLE BUTTON AT THE TOP of
     that interface". SM-792 put this row at the bottom; this is the answer.

     STICKY, not fixed: it stays inside its own section, so it pins to the top
     of the dialog's scroll box while the tiles scroll under it and goes away
     with the section rather than floating over the rest of the page. The
     dialog (`.sr-dialog`, max-height 82vh, overflow-y auto) is the scroll box
     it pins to inside the pop-over; on the exercise page's inline grid the
     page is, which is the same behaviour one level out.

     Every colour is a theme token. */
  .ev-family-bar { position: sticky; top: 0; z-index: 2;
                   display: flex; flex-wrap: wrap; align-items: center;
                   gap: 10px; margin: 0 0 10px; padding: 8px 0;
                   background: var(--card-bg);
                   border-bottom: 1px solid var(--card-border); }
  /* THE button. Primary weight, because it is the one thing this interface is
     for. Not a play control -- it loads -- so it carries no play glyph, which
     the site law reserves for controls that start audio. */
  .ev-family-practice { background: var(--accent); color: var(--card-bg);
                        border: 0; border-radius: 6px; padding: 7px 16px;
                        font: inherit; font-size: 13px; font-weight: 700;
                        letter-spacing: .03em; cursor: pointer; }
  .ev-family-practice:hover { filter: brightness(1.08); }
  /* DISABLED, NEVER HIDDEN: "always visible" is the requirement, so with
     nothing picked it dims and says why in its tooltip. */
  .ev-family-practice[disabled] { opacity: .45; cursor: default; }
  .ev-family-count { font-size: 11.5px; letter-spacing: .06em;
                     text-transform: uppercase; color: var(--text-dim); }
  /* The secondary action, in the same one row -- SM-792's chain save, reworded
     and moved. A text button, so it never competes with the primary. */
  .ev-family-save { margin-left: auto; background: none; border: 0;
                    padding: 2px 0; font: inherit; font-size: 11.5px;
                    letter-spacing: .06em; text-transform: uppercase;
                    color: var(--accent); cursor: pointer; }
  .ev-family-save:hover { text-decoration: underline; }
  .ev-family-save[disabled] { opacity: .45; cursor: default;
                              text-decoration: none; }
  .ev-family-made { color: var(--accent); font-size: 12px; }
  .ev-family-error { color: var(--text-dim); font-size: 12px; }
  /* `hidden` vs an author display rule (SM-583/SM-585 shipped that defect
     twice in one night): these are hidden by default and sit in a flex row, so
     the UA [hidden] rule needs this companion or they render in plain sight. */
  .ev-family-count[hidden], .ev-family-save[hidden],
  .ev-family-practice[hidden], .ev-family-made[hidden],
  .ev-family-error[hidden] { display: none; }

  /* ── the tick, and a picked tile ───────────────────────────────────────
     The tile's OTHER click target. An /icons/ checkmark, mask-painted so it
     takes the tile's own colour -- the no-raw-character-UI law bans a text
     tick, which iOS substitutes with its own emoji. A span, not a button,
     because a button inside a button is invalid markup; the tile's one
     listener tells the two apart by the event's target. */
  .ev-family-tile { position: relative; }
  .ev-family-tick { position: absolute; top: 5px; right: 5px;
                    width: 15px; height: 15px; border-radius: 4px;
                    border: 1px solid var(--card-border);
                    background-color: transparent; cursor: pointer; }
  .ev-family-tick:hover { border-color: var(--accent); }
  .ev-family-tick[aria-pressed="true"] { border-color: var(--accent);
                                         background-color: var(--accent); }
  /* The check itself rides on a pseudo-element rather than on the box, because
     a mask applied to the box would clip its own border away along with
     everything else. Empty content, so no character is involved at all. */
  .ev-family-tick[aria-pressed="true"]::before {
    content: ''; position: absolute; inset: 0;
    background-color: var(--card-bg);
    -webkit-mask: url("/app/static/icons/checkmark.svg") no-repeat center / 10px;
    mask: url("/app/static/icons/checkmark.svg") no-repeat center / 10px;
  }
  /* A PICKED tile. `aria-current` already means "this one is on the board", so
     picking gets its own mark rather than overloading that one. */
  .ev-family-tile.is-selected { border-color: var(--accent);
                                box-shadow: inset 0 0 0 1px var(--accent); }

  /* ── SM-801: a load that did not happen says so ────────────────────────
     The PM's browser pass through read-only "View as" ticked two forms,
     pressed the button and got nothing: the refusal was swallowed. The
     sentence now appears in .ev-family-error above, and the control that was
     pressed carries it in its tooltip and wears this.

     DIM, not red: nothing is broken and nothing was lost -- the load was
     refused, and the student is about to read why. A red alarm for "you are in
     read-only mode" would be the wrong temperature, and this stylesheet owns
     no error colour to reach for. Cleared by the next action. */
  .ev-family-practice.is-failed { opacity: .6; }
  .ev-family-tile.is-failed { border-color: var(--text-dim);
                              box-shadow: inset 0 0 0 1px var(--text-dim); }
  /* AMENDED (Jason, 2026-09-20): "diagrams may not really be the best visual
     for the family members in the grid. I think 'Mode {inline scale degree
     symbol}', 'Same String Set', 'Ascending' should be used." So a tile is
     three short lines, and the mode is named with the site's own scale-degree
     glyph -- the same symbol the fretboard markers use, cloned from the shared
     sprite. No diagram, no player, no raw character standing in for a glyph. */
  .ev-family-mode { display: flex; align-items: center; gap: 6px; }
  .ev-family-mode-word { font-family: 'Bebas Neue', sans-serif;
                         letter-spacing: .07em; font-size: 15px; color: var(--text); }
  .ev-family-glyph { display: inline-flex; }
  .ev-family-glyph svg { display: block; width: 19px; height: 19px; }
  .ev-family-glyph-text { font-size: 13px; color: var(--text); }
  .ev-family-nl { margin-left: auto; font-size: 10px; color: var(--text-dim);
                  letter-spacing: .04em; }
  .ev-family-line { display: block; font-size: 11px; color: var(--text-dim);
                    line-height: 1.5; }
  /* The rotated note order. Slightly stronger than the two label lines because
     it is CONTENT the student reads, not a category name, and letter-spaced so
     eight digits stay countable at tile size. */
  .ev-family-order { display: block; font-size: 11px; color: var(--text);
                     letter-spacing: .12em; line-height: 1.5; }
  .ev-family-tile[aria-current="true"] .ev-family-line { color: var(--accent); }
  @media (max-width: 560px) {
    .ev-family-grid { gap: 8px; grid-template-columns: repeat(2, 1fr); }
  }

/* ── SM-791: the grid inside the shared modal shell ──────────────────────
   The shell (.sr-backdrop/.sr-dialog in tools/shared/stretch-reminder.css) is
   what CENTERS this -- position: fixed, its own centering -- and it is used
   here exactly as it ships. These rules are only about what the GRID needs
   once it is in a dialog: room to scroll when a family has fifty forms, and a
   close control in the corner -- the shared /icons/close.svg, mask-painted so
   it takes a theme colour, which is the site's idiom (start-control.css does
   the same with play-button.svg) and is why no raw character stands in for it.

   The [hidden] companion is not optional: the backdrop carries an author
   `display:` rule, which beats the UA [hidden] rule, and an element that
   ignores `hidden` renders in plain sight (SM-583 / SM-585, twice in one
   night). */
.rv-family-pop[hidden] { display: none; }
.rv-family-pop .sr-dialog { max-height: 82vh; overflow-y: auto;
                            text-align: left; position: relative; }
.rv-family-close { position: absolute; top: 10px; right: 10px;
                   width: 22px; height: 22px; padding: 0; border: 0;
                   background: var(--text-dim); cursor: pointer;
                   -webkit-mask: url('../../icons/close.svg') no-repeat center / 18px 18px;
                   mask: url('../../icons/close.svg') no-repeat center / 18px 18px; }
.rv-family-close:hover { background: var(--accent); }
/* The caption line, as a control. It keeps the caption's own look -- this IS
   the caption -- and gains the site's link treatment on hover so it reads as
   something to press. */
.rv-item-form { background: none; border: 0; padding: 0; font: inherit;
                text-align: left; cursor: pointer; }
.rv-item-form:hover { text-decoration: underline; }