/* /css/chapters/interval.css: Ch 6 "The Interval" (C06). Scoped under [data-chapter="interval"]: the twin labs and
   their strip, the plates, and the widgets interval-cone-sorter (.iv-cs-*) and interval-sign-flip. Token colors only. */

/* flow spacing: base.css `p { margin: 0 }` beats the zero-specificity flow rule; restore 1em (docs/requests/interval.md) */
[data-chapter="interval"] :is(.beat, .callout, .reconcile, .recap, .deep-dive, .code-task, .ex-prompt, .ex-model, details.solution, details.hint, details.long-desc, .sidenote, .sagredo) > :is(p, ul, ol, pre):not(:first-child) { margin-top: var(--flow, 1em); }

/* ---------------------------------------------------------------- the twin lab (map + diagram) */
[data-chapter="interval"] .iv-twin { margin: var(--s-7) 0; clear: right; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
[data-chapter="interval"] .iv-twin > figure.lab.wide { width: auto; max-width: none; margin: 0; min-width: 0; }
@media (min-width: 900px) {
  [data-chapter="interval"] .iv-twin {
    width: calc(100% + var(--sn-gap) + var(--sn-w));
    max-width: 980px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "strip strip" "map diagram";
    align-items: start;
  }
  [data-chapter="interval"] .iv-twin > .iv-gesture { grid-area: strip; }
  [data-chapter="interval"] .iv-twin > #lab-interval-1 { grid-area: map; }
  [data-chapter="interval"] .iv-twin > #lab-interval-2 { grid-area: diagram; }
}
/* reserve room so the lazily mounted widgets do not push the page around */
[data-chapter="interval"] #lab-interval-1 .lab-stage { min-height: 420px; }
[data-chapter="interval"] #lab-interval-2 .lab-stage { min-height: 520px; }
[data-chapter="interval"] #lab-interval-3 .lab-stage { min-height: 560px; }
@media (max-width: 699px) {
  [data-chapter="interval"] #lab-interval-1 .lab-stage { min-height: 360px; }
  [data-chapter="interval"] #lab-interval-2 .lab-stage { min-height: 440px; }
}

/* the strip that shows the two linked controls and the two invariants side by side */
[data-chapter="interval"] .iv-gesture {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-l);
  font-family: var(--font-sans); font-size: .85rem; font-variant-numeric: tabular-nums;
}
[data-chapter="interval"] .iv-gesture > p { margin: 0; display: flex; align-items: baseline; gap: .45em; flex-wrap: wrap; }
[data-chapter="interval"] .iv-gesture > p[hidden] { display: none; }
[data-chapter="interval"] .iv-g-co { color: var(--ink); }
/* below 900px the labs stack; the strip rides along (sticky) */
@media (max-width: 899px) {
  [data-chapter="interval"] .iv-gesture { position: sticky; top: calc(var(--header-h) + var(--s-2)); z-index: 2; box-shadow: var(--shadow); gap: 0; padding: var(--s-1) var(--s-3); font-size: .8rem; }
  [data-chapter="interval"] .iv-g-co { display: none; }
}
[data-chapter="interval"] .iv-g-k { color: var(--ink-muted); }
[data-chapter="interval"] .iv-g-inv b { color: var(--c-inv); font-weight: 700; }
[data-chapter="interval"] .iv-g-inv .iv-eq { color: var(--c-inv); font-weight: 700; }

/* ---------------------------------------------------------------- plates */
[data-chapter="interval"] .iv-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4) var(--s-6); }
[data-chapter="interval"] .iv-pair > svg { flex: 1 1 260px; max-width: 320px; height: auto; overflow: visible; font-family: var(--font-sans); }
[data-chapter="interval"] .iv-notebooks .iv-pair > svg { flex-basis: 200px; max-width: 280px; }
[data-chapter="interval"] .p-label-bad { fill: var(--c-bad); }
[data-chapter="interval"] .p-head { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 11px; letter-spacing: .06em; font-weight: 700; }

/* Plate 6.2 as a real table: reflows at 320px and reads as a table to screen readers */
[data-chapter="interval"] .iv-table-wrap { overflow-x: auto; }
[data-chapter="interval"] .iv-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: .92rem; font-variant-numeric: tabular-nums; }
[data-chapter="interval"] .iv-table th, [data-chapter="interval"] .iv-table td { padding: .45em .6em; text-align: center; white-space: nowrap; }
[data-chapter="interval"] .iv-table thead th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1.5px solid var(--rule); }
[data-chapter="interval"] .iv-table th[scope="row"], [data-chapter="interval"] .iv-table thead th:first-child { text-align: left; }
[data-chapter="interval"] .iv-table th[scope="row"] { font-weight: 700; }
[data-chapter="interval"] .iv-table tbody tr:nth-child(even) { background: var(--surface-2); }
[data-chapter="interval"] .iv-table td:last-child { text-align: left; }
[data-chapter="interval"] .iv-table .lab { color: var(--c-lab); }
[data-chapter="interval"] .iv-table .rkt { color: var(--c-rocket); }
[data-chapter="interval"] .iv-table .iv-inv { color: var(--c-inv); }
[data-chapter="interval"] .iv-ico { width: 1.5em; height: 1.5em; vertical-align: -.4em; margin-right: .25em; }
[data-chapter="interval"] .iv-ico-wide { width: 2.2em; height: 1.1em; vertical-align: -.15em; }
@media (max-width: 479px) {
  [data-chapter="interval"] .iv-table { font-size: .8rem; }
  [data-chapter="interval"] .iv-table th, [data-chapter="interval"] .iv-table td { padding: .4em .3em; }
  [data-chapter="interval"] .iv-ico { display: none; }
}

/* worked example and completion problem tidy-ups */
[data-chapter="interval"] .iv-steps { margin-left: 0; padding-left: 1.2em; }
[data-chapter="interval"] .iv-blank { display: inline-block; min-width: 2.6em; border-bottom: 2px solid var(--c-you); text-align: center; color: var(--c-you); font-family: var(--font-sans); font-weight: 700; }

/* ---------------------------------------------------------------- the cone sorter widget (.iv-cs) */
[data-chapter="interval"] .iv-cs-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@container (min-width: 640px) {
  [data-chapter="interval"] .iv-cs-main { grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); align-items: start; }
}
[data-chapter="interval"] .iv-cs-plotcol { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
[data-chapter="interval"] .iv-cs-plotcol > .iv-cs-legend { margin: 0; }
[data-chapter="interval"] .iv-cs-plot { position: relative; max-width: 520px; width: 100%; margin: 0 auto; }
[data-chapter="interval"] .iv-cs-svg { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--surface); user-select: none; -webkit-user-select: none; }
[data-chapter="interval"] .iv-cs-badge {
  position: absolute; left: 10px; top: 10px; padding: 2px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--c-lab);
  background: var(--surface); border: 1.5px solid var(--c-lab); pointer-events: none;
}
[data-chapter="interval"] .iv-cs-badge.is-rkt { color: var(--c-rocket); border-color: var(--c-rocket); border-style: dashed; }
[data-chapter="interval"] .iv-cs-tint { opacity: 0; transition: opacity var(--t-morph) var(--ease); }
[data-chapter="interval"] .iv-cs-tint.is-on { opacity: 1; }
[data-chapter="interval"] .iv-cs-region { font-size: 11px; letter-spacing: .08em; font-weight: 700; }
[data-chapter="interval"] .iv-cs-cone { transition: opacity var(--t-ui) var(--ease); }
[data-chapter="interval"] .iv-cs-cone.is-hidden { opacity: 0; }
[data-chapter="interval"] .iv-cs-dot { cursor: pointer; }
[data-chapter="interval"] .iv-cs-ring { fill: none; stroke: transparent; stroke-width: 2; }
[data-chapter="interval"] .iv-cs-dot.is-hot .iv-cs-ring, [data-chapter="interval"] .iv-cs-dot.is-picked .iv-cs-ring { stroke: var(--c-lab); }
[data-chapter="interval"] .iv-cs-dot.is-flip .iv-cs-ring { stroke: var(--c-rocket); stroke-dasharray: 3 2; }
/* off the map: an edge arrowhead, not a hollow dot */
[data-chapter="interval"] .iv-cs-dot.is-off .iv-cs-dotc { display: none; }
[data-chapter="interval"] .iv-cs-offarrow { stroke: var(--surface); stroke-width: 1; stroke-linejoin: round; }
[data-chapter="interval"] .iv-cs-dot.is-off .iv-cs-dotlab { fill: var(--ink-muted); }
[data-chapter="interval"] .iv-cs-tag { font-size: 11px; fill: var(--c-rocket); font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
[data-chapter="interval"] .iv-cs-dot.is-off .iv-cs-tag { fill: var(--ink-muted); font-weight: 400; }
[data-chapter="interval"] .iv-cs-ghost { opacity: .7; }
[data-chapter="interval"] .iv-cs-svg .p-inv, [data-chapter="interval"] .iv-cs-svg .p-inv-core { opacity: .55; }

[data-chapter="interval"] .iv-cs-side { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
[data-chapter="interval"] .iv-cs-traynote { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
[data-chapter="interval"] .iv-cs-tray { display: flex; flex-wrap: wrap; gap: var(--s-2); min-height: 44px; }
[data-chapter="interval"] .iv-cs-card {
  display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: 4px 10px 4px 8px;
  border: 1.5px solid var(--rule); border-radius: var(--r-m); background: var(--surface); color: var(--ink);
  font: inherit; font-size: .85rem; font-variant-numeric: tabular-nums; cursor: grab; touch-action: none;
  box-shadow: 0 1px 0 var(--rule); transition: transform var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
[data-chapter="interval"] .iv-cs-card:hover, [data-chapter="interval"] .iv-cs-card.is-hot { border-color: var(--c-lab); }
[data-chapter="interval"] .iv-cs-card[aria-pressed="true"] { border-color: var(--c-lab); background: var(--tint-lab); box-shadow: 0 0 0 2px var(--c-lab); }
[data-chapter="interval"] .iv-cs-card.is-dragging { cursor: grabbing; position: relative; z-index: 5; transition: none; box-shadow: var(--shadow); background: var(--surface); }
[data-chapter="interval"] .iv-cs-card.is-placed { cursor: default; border-color: var(--c-ok); box-shadow: none; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
[data-chapter="interval"] .iv-cs-card.is-placed.is-flip { border-color: var(--c-rocket); border-style: dashed; }
[data-chapter="interval"] .iv-cs-card.is-wrong { animation: iv-shake 360ms var(--ease); border-color: var(--c-bad); }
@keyframes iv-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
[data-chapter="interval"] .iv-cs-letter { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 1.05rem; }
[data-chapter="interval"] .iv-cs-coords { color: var(--c-lab); }
[data-chapter="interval"] .iv-cs-extra { display: flex; flex-wrap: wrap; gap: 0 .6em; color: var(--c-rocket); font-size: .76rem; flex-basis: 100%; padding-left: 1.5em; text-align: left; }
[data-chapter="interval"] .iv-cs-extra > span { white-space: nowrap; }
[data-chapter="interval"] .iv-cs-flipnote { font-weight: 700; }
[data-chapter="interval"] .iv-cs-extra > .iv-cs-recalc { color: var(--c-inv); font-weight: 700; }
[data-chapter="interval"] .iv-cs-tau { margin-left: auto; color: var(--c-inv); font-size: .76rem; font-weight: 700; white-space: nowrap; }
[data-chapter="interval"] .iv-cs-tau:empty { display: none; }
[data-chapter="interval"] .iv-cs-extra:empty { display: none; }
[data-chapter="interval"] .iv-cs-mark { display: inline-flex; color: var(--c-ok); }
[data-chapter="interval"] .iv-cs-mark:empty { display: none; }
[data-chapter="interval"] .iv-cs-mark .icon { width: 1em; height: 1em; }

[data-chapter="interval"] .iv-cs-bins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
[data-chapter="interval"] .iv-cs-bin {
  display: flex; flex-direction: column; gap: var(--s-2); min-height: 96px; padding: var(--s-2);
  border: 1.5px dashed var(--rule); border-radius: var(--r-m); background: var(--surface-2);
  transition: border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
[data-chapter="interval"] .iv-cs-bin[data-bin="future"], [data-chapter="interval"] .iv-cs-bin[data-bin="past"] { background: linear-gradient(var(--c-timelike), var(--c-timelike)), var(--surface-2); }
[data-chapter="interval"] .iv-cs-bin.is-over { border-color: var(--c-lab); border-style: solid; background: var(--tint-lab); }
[data-chapter="interval"] .iv-cs.is-picking .iv-cs-bin { border-color: var(--c-lab); cursor: pointer; }
[data-chapter="interval"] .iv-cs-binbtn {
  display: grid; grid-template-columns: auto 1fr; column-gap: .45em; align-items: baseline; text-align: left;
  padding: 4px 6px; margin: 0; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink);
  font: inherit; cursor: pointer; min-height: 40px;
}
[data-chapter="interval"] .iv-cs-binbtn:hover { background: var(--surface); }
[data-chapter="interval"] .iv-cs-binbtn kbd { grid-row: span 2; align-self: center; font-size: .72rem; }
[data-chapter="interval"] .iv-cs-binname { font-weight: 700; font-size: .82rem; line-height: 1.25; }
[data-chapter="interval"] .iv-cs-binrule { grid-column: 2; font-size: .72rem; color: var(--ink-muted); }
[data-chapter="interval"] .iv-cs-binlist { display: flex; flex-direction: column; gap: 4px; }
[data-chapter="interval"] .iv-cs-binlist .iv-cs-card { min-height: 32px; padding: 2px 8px; font-size: .8rem; }

[data-chapter="interval"] .iv-cs-msg { min-height: 1.6em; margin: 0; font-size: .85rem; color: var(--ink); }
[data-chapter="interval"] .iv-cs-msg.is-bad { color: var(--c-bad); }
[data-chapter="interval"] .iv-cs-msg.is-good { color: var(--c-ok); }
[data-chapter="interval"] .iv-cs-locknote, [data-chapter="interval"] .iv-cs-boosthead { display: flex; align-items: center; gap: .5em; margin: 0; font-size: .85rem; color: var(--ink-muted); }
[data-chapter="interval"] .iv-cs-locknote .icon, [data-chapter="interval"] .iv-cs-boosthead .icon { width: 1.1em; height: 1.1em; flex: none; }
[data-chapter="interval"] .iv-cs-boosthead { color: var(--c-ok); font-weight: 700; }
[data-chapter="interval"] .iv-cs-boost { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1.5px solid var(--rule); border-radius: var(--r-m); background: var(--surface-2); }
[data-chapter="interval"] .iv-cs-boost[hidden] { display: none; }
[data-chapter="interval"] .iv-cs-boost .ui-slider { flex: none; }
[data-chapter="interval"] .iv-cs-boost.is-new { animation: iv-unlock 900ms var(--ease); }
@keyframes iv-unlock { 0% { box-shadow: 0 0 0 0 var(--c-ok); } 40% { box-shadow: 0 0 0 6px var(--tint-inv); } 100% { box-shadow: 0 0 0 0 transparent; } }
[data-chapter="interval"] .iv-cs-stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: .85rem; font-variant-numeric: tabular-nums; }
[data-chapter="interval"] .iv-cs-stat { display: inline-flex; gap: .4em; align-items: baseline; }
[data-chapter="interval"] .iv-cs-stat-l { color: var(--ink-muted); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
[data-chapter="interval"] .iv-cs-stat.inv { color: var(--c-inv); font-weight: 700; }
[data-chapter="interval"] .iv-cs-stat.rkt.is-flip { color: var(--c-rocket); font-weight: 700; }
[data-chapter="interval"] .iv-cs-tools { align-items: center; }
[data-chapter="interval"] .iv-cs-progress { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
[data-chapter="interval"] .iv-cs-check { display: inline-flex; align-items: center; gap: .4em; font-size: .85rem; min-height: 32px; }
[data-chapter="interval"] .iv-cs-keys { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-chapter="interval"] .iv-cs-card, [data-chapter="interval"] .iv-cs-tint, [data-chapter="interval"] .iv-cs-bin { transition: none; }
  [data-chapter="interval"] .iv-cs-card.is-wrong, [data-chapter="interval"] .iv-cs-boost.is-new { animation: none; }
}
html[data-motion="reduced"] [data-chapter="interval"] .iv-cs-card,
html[data-motion="reduced"] [data-chapter="interval"] .iv-cs-tint { transition: none; }
html[data-motion="reduced"] [data-chapter="interval"] .iv-cs-card.is-wrong,
html[data-motion="reduced"] [data-chapter="interval"] .iv-cs-boost.is-new { animation: none; }

/* ---------------------------------------------------------------- redesign 2026-10-06 (docs/redesign/interval.md) */
[data-chapter="interval"] .iv-orient { margin: var(--s-6) 0; max-width: 40rem; }
[data-chapter="interval"] .iv-orient ol { margin: var(--s-3) 0 0; padding-left: 1.5em; }
[data-chapter="interval"] .iv-orient li + li { margin-top: var(--s-2); }
[data-chapter="interval"] .iv-sign { font-weight: 800; font-size: 1.2em; }
[data-chapter="interval"] .iv-twin > .callout { margin: 0; min-width: 0; }
@media (min-width: 900px) {
  /* the boost Try it sits beside the diagram */
  [data-chapter="interval"] .iv-twin { grid-template-areas: "strip strip" "map diagram" "trymap diagram" "tryboost diagram" ". diagram"; grid-template-rows: auto auto auto auto 1fr; }
  [data-chapter="interval"] .iv-try-map { grid-area: trymap; }
  [data-chapter="interval"] .iv-try-boost { grid-area: tryboost; }
}
[data-chapter="interval"] .iv-gesture { flex-direction: column; align-items: flex-start; }
[data-chapter="interval"] .iv-g-ctl { color: var(--c-rocket); font-weight: 700; }
[data-chapter="interval"] .iv-g-shape { color: var(--c-inv); font-style: italic; }
[data-chapter="interval"] .iv-g-inv .iv-sign { color: var(--ink); }
[data-chapter="interval"] .iv-labkey { padding: 0 var(--s-5); font: .85rem/1.45 var(--font-sans); color: var(--ink-muted); }
[data-chapter="interval"] .iv-labkey > p + p { margin-top: var(--s-2); }
[data-chapter="interval"] .iv-labkey b { color: var(--ink); }
[data-chapter="interval"] .iv-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
[data-chapter="interval"] .iv-presets .btn { padding-inline: .75em; font-variant-numeric: tabular-nums; }
[data-chapter="interval"] #lab-interval-2 .stx-inv-outer { opacity: .3; }
[data-chapter="interval"] .iv-own .p-inv { stroke-width: 4.5; }
[data-chapter="interval"] .iv-own-label { font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
[data-chapter="interval"] .iv-cs-legend { margin: var(--s-2) 0 0; font-size: .76rem; color: var(--ink-muted); }

/* revision 2 (docs/redesign/interval.md) */
[data-chapter="interval"] details.iv-gloss { margin-top: var(--s-2); }
[data-chapter="interval"] details.iv-gloss > summary { cursor: pointer; color: var(--ink); font-weight: 600; }
[data-chapter="interval"] details.iv-gloss > p { margin-top: var(--s-2); }
[data-chapter="interval"] #lab-interval-2 .stx-checks label[hidden] { display: none; }
/* phones: the sticky bar is one short line */
@media (max-width: 599px) {
  [data-chapter="interval"] .iv-gesture { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--s-3); padding: 4px var(--s-3); font-size: .72rem; white-space: nowrap; }
  [data-chapter="interval"] .iv-gesture > p { flex-wrap: nowrap; gap: .3em; min-width: 0; }
  [data-chapter="interval"] .iv-gesture .iv-g-k, [data-chapter="interval"] .iv-gesture .iv-g-shape { display: none; }
  [data-chapter="interval"] .iv-gesture .iv-sign { font-size: 1em; }
}