/* Chord and fill examples, to hear (chords-and-fills.html): the Rhythm
   guitar reference page's look (css/rhythm-reference.css, linked before
   this), and what this page has of its own — a style's forms one under
   the other, full width as the printout sets them, and its fills as many
   to a line as fit, one column on a phone. */
/* the chord book's terracotta on the rule over each style, as the book has it (js/printouts.js BOOK_COLOR: the
   owner's w2-a, 2026-10-05, "Section headings set as the books set them": Accept; css/rhythm-reference.css) */
:root{ --book:#c9553e; }
.cf-forms{ display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; margin:0 0 16px; }
/* "Fills", a heading a step under the style's, as the printout sets it (the owner's xb-d, 2026-10-04,
   "'Fills' a step under the style heading": Accept): bold and in the ink, over the cards' names — not the
   reference page's small grey capitals (.sub); its swing marking after it, where every fill of the style is swung.
   In the books' serif at 600 as the book sets it (.cfp-sub) since the owner's w2-a, 2026-10-05, "Section headings
   set as the books set them": Accept) */
.cf-sub{ margin:8px 0 10px; display:flex; align-items:center; gap:8px; font:600 1.35rem/1.25 var(--serif); color:var(--ink); letter-spacing:-.01em; text-transform:none; }
/* (a head's tempo never broken, as the printout keeps it on one line: the owner's xb-a, 2026-10-04,
   "Each tempo on one line, here too": Accept) */
.cf-sec .rr-head .rr-tempo{ white-space:nowrap; }
.cf-fills{ display:grid; align-items:start; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:12px; }
/* (a drawing scaled to the card where it is wider; never scrolled sideways) */
.cf-sec .tab{ overflow-x:visible; }
.cf-sec .rr-card:not(.drawn) .tab{ min-height:var(--est, 110px); }
/* (a head's ♯ and ♭ upright, as the printout sets them) */
.cfp-acc{ font-style:normal; }
/* (a form's chord numbers in the printout's bold serif, its colour the page's own:
   the owner's cf1-d2, 2026-10-04 — js/printouts.js CF_NUMERAL_FACE) */
.cf-sec .tab-numeral{ font-family:'Source Serif 4','Times New Roman',Times,system-ui,serif; font-weight:600; font-size:14.5px; letter-spacing:.01em; }
/* (the books' serif, b1-a, on the screen since the owner's st-b, 2026-10-05: css/tab.css — at the books' 14.5 px, as the printout sets these forms' numerals and as the Rhythm guitar page's charts take them, css/rhythm-reference.css) */
/* (a form's grips as the printout draws them, in the page's colours: each root
   solid at full strength, every other note a plain grey dot with no ring — the
   owner's cf1-b4, 2026-10-04, "Grip roots black, other dots darker grey":
   Accept; js/printouts.js CF_GRIP_DOT) */
.cf-sec .tab-grip circle{ fill:var(--muted); stroke:none; }
.cf-sec .tab-grip circle.mark-o{ fill:none; stroke:var(--muted); }
.cf-sec .tab-grip circle.root{ fill:var(--ink); }
/* (a row of fills: each card's name, drawing and controls on the row's three lines — CSS subgrid — so
   the drawings start level, where js/chord-fill-page.js sets their staves level too, and the Play
   buttons line up: the owner's xc-b, 2026-10-04, "Fill rows: names and staves level": Accept) */
.cf-fill{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; align-content:start; }
/* (its controls as tall as they are, not stretched to the row's tallest, so their first line — Play — starts where its neighbours' do) */
.cf-fill > .rr-ctl{ align-self:start; }
/* (a fill's name its card's title, in the ink as a form's name is, a weight under it — in the muted grey it read as
   a caption, and the chord names in the drawing under it were the card's loudest words: the owner's design review
   w2-k, 2026-10-05, "Fill names as the cards' titles": Accept) */
.cf-fill-name{ margin:0 0 6px; color:var(--ink); font-size:14px; font-weight:500; line-height:1.35; text-wrap:pretty; }
.cf-fill .rr-ctl{ column-gap:10px; }
.cf-fill .tempo input{ width:110px; }
@media (max-width:640px){
  .cf-fill .tempo input{ width:44px; }
}
/* (a line's bar number: left of the printout's crop, which a sliver of it only peeks into) */
.cf-sec .tab-barnum{ display:none; }
/* the Degrees switch (js/chord-fill-page.js degrees; the owner's mf-i2): each note's degree under it in the
   page's colours, as the book's pages set them in black and greys (js/printouts-making.js; the owner's design
   review fe, 2026-10-06, fe-H1, fe-H2, fe-H3, fe-D6) — a chord tone bold in the ink, the next chord's tone
   played early bold after an arrow, a blue note boxed, a scale note grey, a chromatic one grey italic, the
   landing note ringed in the ink */
#cf .mf-deg{ font:500 14px Inter,system-ui,sans-serif; fill:var(--muted); }
#cf .mf-deg.ct, #cf .mf-deg.nx, #cf .mf-deg.land{ fill:var(--ink); font-weight:700; }
#cf .mf-deg.bl{ fill:var(--ink); font-weight:600; }
#cf .mf-deg .mf-deg-arrow{ fill:var(--muted); font-weight:500; }
#cf .mf-deg.ch{ font-style:italic; }
#cf .mf-deg-box, #cf .mf-deg-ring{ fill:none; stroke:var(--ink); stroke-width:1; }
/* (with the Degrees switch, on a tablet held upright the bar keeps to one line with the picker 180 px or more —
   the owner's w3-j, "Tablet's bar on one line", css/rhythm-reference.css: its gaps a little closer, and the
   picker's word "Style" left to a screen reader, as on a phone; the picker names the style it is on) */
@media (min-width:641px) and (max-width:999px){
  #rrBar{ column-gap:10px; }
  #rrBar .jump > .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* the contents in the book's groups, side by side where the screen is wide (the Rhythm page's grid is a narrow Basics and a wide Styles) */
@media (min-width:641px){
  .toc.toc-book.by-group{ grid-template-columns:repeat(var(--groups, 3), minmax(0, 1fr)); }
  .toc.toc-book.by-group .toc-group ol, .toc.toc-book.by-group .toc-group + .toc-group ol{ columns:1; }
}
/* the bar on one line at 1200 px: the Style picker no wider than 240 px (the book's longest style names are 40 letters; the contents above hold them whole) */
@media (min-width:1000px){ #rrBar .jump select{ max-width:min(240px, 60vw); } }