/* analysis.css — Roman numerals and the functional overlay lanes.

   Cut from the single style.css on 2026-08-02. The <link> order in
   index.html IS the cascade order these were split at; reordering the
   tags changes which rule wins. */

/* ================= harmonic analysis: numerals + overlay lanes (spec §4) */

/* Spelling switch (C / C⁄ii / ii) in the chords panel tools row: text pills
   sharing the scan-toggle chrome, sized by their label. */
.panel .scan-toggle.spell-btn {
  width: auto;
  min-width: 2.1rem;
  padding: 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Hybrid spelling: the numeral in a small line under the printed chord,
   left-aligned with it so the beat anchoring still reads. */
.chstack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  vertical-align: top;
}
.deg-sub {
  font-size: 0.8em;
  line-height: 1.15;
  color: var(--accent-ink);
  white-space: nowrap;
  margin-top: 0.1em;
}
.deg-sub .deg-line { display: block; }
/* Roman-only spelling: the numeral replaces the chord, near the comparison
   view's degree size but scaled down for stacked pivot readings. */
.chord.numeral { font-weight: 400; letter-spacing: 0.02em; font-size: 1.7em; }
.chord.numeral .deg-line { display: block; line-height: 1.1; }
/* Pivot chords stack the outgoing key's reading (muted) over the new one. */
.pivot-old { color: var(--muted); font-size: 0.82em; }

/* Overlay lanes: one thin band per feature class under each row of bars,
   aligned to the bars via a beat-resolution column grid. */
.lane {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
  font-size: 1.0em;
  line-height: 1.1;
  margin-top: 0.12em;
  pointer-events: none;
}

/* Key-region band: a dashed extent line with the "F:" prefix at its start
   (lowercase for minor keys, like the book's colon notation). The dashes are
   a gradient, not a dashed border, so the dash/gap sizes stay legible. */
.lane.lane-regions { margin-top: 0.05em; }
.lane-region {
  padding-top: 0.2em;
  min-width: 0;
  background: repeating-linear-gradient(to right,
      var(--muted) 0 0.5em, transparent 0.5em 0.95em)
    left top / 100% 0.14em no-repeat;
}
.lane-region.rg-section {
  background-image: linear-gradient(var(--muted), var(--muted));
}
.lane-region .lane-label {
  color: var(--accent-ink);
  font-weight: 700;
  padding-left: 0.15em;
  white-space: nowrap;
}

/* ii–V brackets: the book's under-bracket |____| ; dotted for ii–subV /
   subii–V pairs. Row-crossing pieces drop the open side's tick. */
.lane-bracket {
  height: 0.55em;
  margin: 0 0.3em;
  border: 0.13em solid var(--fg);
  border-top: none;
  opacity: 0.75;
}
.lane-bracket.dotted {
  /* wide-gap dashes on the horizontal (gradient — border dashes are too
     fine to tell from solid at lane size); the short ticks stay solid */
  border-bottom: none;
  background: repeating-linear-gradient(to right,
      var(--fg) 0 0.5em, transparent 0.5em 0.95em)
    left bottom / 100% 0.13em no-repeat;
}
.lane-bracket.cont-right { border-right: none; }
.lane-bracket.cont-left { border-left: none; }

/* Resolution arrows: a line with a right-pointing head — solid for the
   down-a-fifth resolution, dashed for the half-step (subV) one, headless
   for the to-minor move. Drawn just below the bracket band. */
.lane-arrow {
  position: relative;
  height: 0.5em; /* also the stacking pitch when arrows overlap in a row */
  min-width: 0;
}
.lane-arrow::before {
  content: "";
  position: absolute;
  left: 0.35em;
  right: 0.5em;
  top: 45%;
  border-top: 0.14em solid var(--fg);
  opacity: 0.75;
}
.lane-arrow.half::before {
  border-top: none;
  height: 0.14em;
  background: repeating-linear-gradient(to right,
      var(--fg) 0 0.5em, transparent 0.5em 0.95em);
}
.lane-arrow::after {
  content: "";
  position: absolute;
  right: 0.15em;
  top: 45%;
  transform: translateY(-50%);
  border-left: 0.45em solid var(--fg);
  border-top: 0.28em solid transparent;
  border-bottom: 0.28em solid transparent;
  opacity: 0.8;
}
.lane-arrow.to_minor::after,
.lane-arrow.cont-right::after { border-left-color: transparent; }

/* Building blocks: a labelled tinted span. Bottom margin keeps the pill
   clear of the next row of bars. */
.lane.lane-blocks { margin-bottom: 0.3em; }
.lane-block {
  margin-top: 0.1em;
  min-width: 0;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 0.5em;
  padding: 0.08em 0.4em;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.lane-block.cont-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lane-block.cont-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* Blocks are tappable (the lane itself is click-through) to reveal the full,
   possibly-truncated, name in the popover below. */
.lane-block[data-full] { pointer-events: auto; cursor: pointer; }

/* Tap-to-reveal popover for a truncated building-block label. Viewport-fixed
   and positioned in JS; dismissed on the next tap, scroll or resize. */
.block-popover {
  position: fixed;
  z-index: 70;
  max-width: min(80vw, 22rem);
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.32rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.block-popover[hidden] { display: none; }

/* Legend for the overlay symbols, at the bottom of the chords panel while
   the overlay is on. Sample glyphs reuse the lane classes above. */
.lane-legend {
  margin-top: 1.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.6rem;
  font-size: 1.0rem;
  color: var(--muted);
}
.lane-legend .lg-item { display: flex; align-items: center; gap: 0.55em; min-width: 0; }
/* The ii–V bracket entries each occupy a full row of their own. */
.lane-legend .lg-item.lg-break { flex-basis: 100%; }
.lane-legend .lg-sample { width: 3em; flex: none; font-size: 1.2em; }
.lane-legend .lg-sample > div { margin: 0; }
.lane-legend .lane-region { padding-top: 0.05em; }
.panel.chords.show-scan .lane-legend { display: none; }