/* Note values chart and time signatures chart (layouts/_partials/charts/pages/note-values.html, time-signatures.html).
   Loaded only by those two pages, next to extras.css and chart-print.css (which are not changed).
   The printable sheets reuse the white-page classes .mtp-ws / .mtp-ws-head / .mtp-ws-credit from chart-print.css.
   Print sizes: nothing on a printed sheet is smaller than 7.5 pt. */

/* the white sheets are a little wider than the default so the tables do not need to scroll */
.mtp-ws.mtp-nv, .mtp-ws.mtp-ts { max-width: 1000px; }

/* ---- tempo control and quick answer ------------------------------------ */
.mtp-nv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; font-size: 14px; color: var(--mtp-muted); }
.mtp-nv-tools[hidden] { display: none; }
.mtp-nv-tools label { color: var(--mtp-paper); font-weight: 600; }
.mtp-nv-tools select { margin-left: 8px; padding: 6px 8px; background: var(--mtp-raised); color: var(--mtp-paper); border: 1px solid var(--mtp-brass); border-radius: 2px; font: inherit; }
.mtp-nv-tools .mtp-chart-small { flex: 1 1 280px; min-width: 0; }

/* ---- play buttons on the white sheets ------------------------------------ */
.mtp-ws .mtp-play { margin: 0 6px 4px 0; padding: 3px 9px; color: #111; border-color: #111; background: #fff; }
.mtp-ws .mtp-play:hover { background: #eee; color: #111; }
.mtp-play.is-playing { background: var(--mtp-brass); color: #1a1209; }
.mtp-ws .mtp-play.is-playing { background: #111; color: #fff; }
[data-rhythm], [data-pulses] { display: inline-block; }

/* ---- note values chart --------------------------------------------------- */
.mtp-nv-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mtp-chart-page .mtp-nv-table, .mtp-chart-page .mtp-ts-table{ display: table; overflow: visible; width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; line-height: 1.3; }
.mtp-chart-page .mtp-nv-table{ min-width: 700px; }
.mtp-chart-page .mtp-nv-table th, .mtp-chart-page .mtp-nv-table td, .mtp-chart-page .mtp-ts-table th, .mtp-chart-page .mtp-ts-table td{ padding: 4px 8px; border-bottom: 1px solid #bbb; text-align: left; vertical-align: middle; }
.mtp-chart-page .mtp-nv-table thead th, .mtp-chart-page .mtp-ts-table thead th, .mtp-chart-page .mtp-mod-table thead th{ border-bottom: 2px solid #111; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #333; vertical-align: bottom; }
.mtp-chart-page .mtp-nv-table th[scope="row"]{ font-weight: 700; }
.mtp-chart-page .mtp-nv-table .num, .mtp-chart-page .mtp-mod-table .num{ text-align: center; font-variant-numeric: tabular-nums; }
.mtp-chart-page .mtp-nv-table td.num strong{ font-size: 16px; }
.mtp-nv-sub { display: block; font-size: 11.5px; font-weight: 400; color: #333; letter-spacing: 0; text-transform: none; }
.mtp-chart-page .mtp-nv-table th .mtp-nv-sub{ display: inline; }
.mtp-chart-page .mtp-nv-rare th, .mtp-chart-page .mtp-nv-rare td{ color: #222; }
.nv-pic { width: 60px; padding: 0 4px !important; text-align: center; }
.nv-pic .mtp-vex { line-height: 0; }
.nv-pic svg { width: 48px !important; height: auto !important; max-width: none; display: block; margin: 0 auto; }
.mtp-nv-hear { white-space: nowrap; }

.mtp-nv-h3 { margin: 16px 0 4px; font-size: 19px; font-weight: 700; }
.mtp-nv-tree { margin: 4px 0 2px; }
.mtp-nv-tree-row { display: flex; align-items: center; gap: 10px; margin: 0 0 3px; }
.mtp-nv-tree-name { flex: 0 0 11.5em; font-size: 13px; line-height: 1.2; }
.mtp-nv-tree-bar { display: flex; flex: 1 1 auto; min-width: 0; height: 22px; border: 1.5px solid #111; border-left: 0; box-sizing: border-box; }
.mtp-nv-tree-bar i { flex: 1 1 0; min-width: 0; border-left: 1.5px solid #111; box-sizing: border-box; font: normal 600 10.5px/19px "Source Sans 3", sans-serif; text-align: center; overflow: hidden; white-space: nowrap; color: #111; }
.mtp-nv-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: #222; }

/* ---- dots, ties, triplets sheet --------------------------------------------- */
.mtp-mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
.mtp-mod-grid-b { margin-top: 4px; grid-template-columns: 1fr 1.15fr; }
.mtp-chart-page .mtp-mod-table{ display: table; overflow: visible; width: 100%; border-collapse: collapse; margin: 2px 0 6px; font-size: 13.5px; line-height: 1.3; }
.mtp-chart-page .mtp-mod-table th, .mtp-chart-page .mtp-mod-table td{ padding: 2px 6px; border-bottom: 1px solid #bbb; text-align: left; vertical-align: middle; }
.mtp-chart-page .mtp-mod-table th[scope="row"]{ font-weight: 600; }
.mtp-chart-page .mtp-mod-table .nv-pic{ width: 110px; --k: .62; }
.mtp-chart-page .mtp-mod-table .nv-pic svg{ width: calc(var(--w, 150) * 1px * var(--k)) !important; max-width: 100%; }
.mtp-chart-page .mtp-mod-text th[scope="row"]{ white-space: nowrap; }
.mtp-chart-page .mtp-mod-beats th, .mtp-chart-page .mtp-mod-beats td{ padding: 3px 5px; font-size: 13px; }
.mtp-chart-page .mtp-mod-beats thead th{ font-size: 10.5px; letter-spacing: 0; text-transform: none; line-height: 1.25; }
.mtp-chart-page .mtp-mod-beats thead th b{ display: block; font-size: 12.5px; }

/* ---- hear the difference (screen) ----------------------------------------------- */
.mtp-nv-hearbox { margin: 30px 0; }
.mtp-nv-cards, .mtp-ts-cmp-cards { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.markdown .mtp-nv-cards, .markdown .mtp-ts-cmp-cards { padding: 0; }
.mtp-nv-cards li, .mtp-ts-cmp-cards li { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px 12px; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px; }
.mtp-nv-cards li::marker, .mtp-ts-cmp-cards li::marker { content: none; }
.mtp-nv-cards h3, .mtp-ts-cmp-cards h3 { margin: 4px 0 2px; font-size: 1.1rem; color: var(--mtp-brass-bright); }
.mtp-nv-cards p, .mtp-ts-cmp-cards p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--mtp-muted); flex: 1 1 auto; }
.mtp-nv-card-pic { overflow-x: auto; line-height: 0; }
.mtp-nv-hearbox .mtp-vex, .mtp-ts-compare .mtp-vex { max-width: 100%; }
.mtp-nv-hearbox .mtp-vex svg, .mtp-ts-compare .mtp-vex svg { max-width: 100%; height: auto; }

/* ---- time signatures chart -------------------------------------------------------- */
.mtp-chart-page .mtp-ts-table{ min-width: 720px; font-size: 13.5px; }
.mtp-chart-page .mtp-ts-table thead th{ white-space: normal; }
.mtp-chart-page .mtp-ts-group th{ padding: 6px 8px 3px; background: transparent; border-bottom: 1.5px solid #111; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #111; }
.ts-pic { padding: 2px 6px !important; --k: .9; }
.mtp-ts-table col.c-pic { width: 33%; } .mtp-ts-table col.c-type { width: 21%; } .mtp-ts-table col.c-count { width: 12%; } .mtp-ts-table col.c-pat { width: 14%; } .mtp-ts-table col.c-use { width: 12%; } .mtp-ts-table col.c-hear { width: 8%; }
.ts-pic .mtp-vex { line-height: 0; }
.ts-pic svg { width: calc(var(--w, 250) * 1px * var(--k)) !important; max-width: 100%; height: auto !important; display: block; }
.ts-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mtp-chart-page .mtp-ts-table th[scope="row"]{ font-weight: 400; }
.ts-name { display: inline; font: 700 22px/1.05 "Cormorant Garamond", serif; }
.ts-alt { font: 600 13px "Source Sans 3", sans-serif; }
.ts-type { font-weight: 700; font-size: 13px; margin-left: 6px; }
.ts-head { display: block; }
.ts-beats { display: block; font-size: 12.5px; color: #222; }
.ts-count2 { display: block; font-size: 12px; color: #333; }
.mtp-ts-hear { white-space: nowrap; }
.mtp-ts-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; margin-top: 6px; }
.mtp-ts-lower h3 { margin: 6px 0 2px; font-size: 17px; font-weight: 700; }
.mtp-ts-special-item { display: flex; align-items: center; gap: 10px; }
.mtp-ts-special-item .mtp-vex { flex: 0 0 150px; line-height: 0; }
.mtp-ts-special-item .mtp-vex svg { width: 150px !important; height: auto !important; }
.mtp-ts-special-item p { margin: 0; font-size: 13.5px; }
.mtp-ts-rule ol { margin: 2px 0 0; padding-left: 1.3em; font-size: 13px; line-height: 1.35; }
.mtp-ts-rule li { margin: 0 0 2px; }

/* ---- real data blocks (screen) ----------------------------------------------------- */
.mtp-ts-compare, .mtp-ts-real, .mtp-ts-uses { margin: 34px 0; }
.mtp-ts-real { padding: 22px 20px 12px; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px; --ts-a: var(--mtp-brass); --ts-b: var(--mtp-copper); --ts-c: var(--mtp-muted); }
.mtp-ts-real > h2 { margin: 0 0 6px; }
.mtp-ts-block { margin: 0 0 30px; }
.mtp-ts-block h3 { margin: 18px 0 6px; font-size: 1.15rem; color: var(--mtp-brass-bright); }
.mtp-ts-lead { max-width: 72ch; margin: 0 0 12px; font-size: 1.02rem; line-height: 1.55; }
.markdown .mtp-ts-bars, .mtp-ts-bars { list-style: none; margin: 8px 0; padding: 0; max-width: 780px; }
.mtp-ts-bars li { display: grid; grid-template-columns: minmax(130px, 15em) 1fr; align-items: center; gap: 4px 12px; padding: 5px 0; border-bottom: 1px solid var(--mtp-line); }
.mtp-ts-bars li::marker { content: none; }
.mtp-ts-bars-label { font-size: 14.5px; line-height: 1.3; color: var(--mtp-paper); }
.mtp-ts-bars-label strong { color: var(--mtp-brass-bright); font-size: 1.05em; }
.mtp-ts-bars-pair { display: grid; gap: 3px; min-width: 0; }
.mtp-ts-bar { position: relative; display: flex; align-items: center; height: 17px; min-width: 0; }
.mtp-ts-bar i { display: block; height: 100%; min-width: 2px; max-width: calc(100% - 9.5em); flex: none; border: 1px solid var(--mtp-line); box-sizing: border-box; }
.mtp-ts-bar b { margin-left: 8px; min-width: 0; font-weight: 400; font-size: 12.5px; color: var(--mtp-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mtp-ts-real .k-a { background: var(--ts-a); }
.mtp-ts-real .k-b { background: var(--ts-b); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.35) 0 2px, transparent 2px 5px); }
.mtp-ts-real .k-c { background: var(--ts-a); }
li.mtp-ts-bars-key { grid-template-columns: minmax(130px, 15em) auto auto; justify-content: start; font-size: 12.5px; color: var(--mtp-muted); border-bottom: 0; }
.mtp-ts-bars-key i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--mtp-line); }
.mtp-ts-bars-single li { grid-template-columns: minmax(130px, 16em) 1fr; }
.mtp-chart-page .mtp-ts-tempo th[scope="row"]{ color: var(--mtp-brass-bright); }
.mtp-chart-page .mtp-ts-tempo td.num, .mtp-chart-page .mtp-ts-tempo th.num{ text-align: right; font-variant-numeric: tabular-nums; }
table.mtp-ts-tempo { min-width: 520px; }
.mtp-ts-uses-list { max-width: 80ch; margin: 8px 0 8px; }
.mtp-ts-uses-list div { display: grid; grid-template-columns: 4.2em 1fr; gap: 0 14px; padding: 8px 0; border-bottom: 1px solid var(--mtp-line); }
.mtp-ts-uses-list dt { margin: 0; font: 700 1.5rem/1.1 "Cormorant Garamond", serif; color: var(--mtp-brass-bright); }
.mtp-ts-uses-list dd { margin: 0; min-width: 0; font-size: 15px; line-height: 1.5; }
.mtp-ts-uses-list dd p { margin: 0; }

/* ---- narrow screens ------------------------------------------------------------------ */
@media screen and (max-width: 720px) {
  .mtp-mod-grid, .mtp-ts-lower { grid-template-columns: minmax(0, 1fr); }
  .mtp-nv-tree-name { flex-basis: 8em; font-size: 12px; }
  .mtp-ts-bars li, .mtp-ts-bars-single li { grid-template-columns: minmax(0, 1fr); }
  li.mtp-ts-bars-key { grid-template-columns: auto auto auto; gap: 4px 12px; }
  .mtp-ts-bars-key > span:first-child { display: none; }
  .mtp-ts-uses-list div { grid-template-columns: minmax(0, 1fr); }
  .mtp-ts-real { padding: 16px 12px 8px; }
  .mtp-chart-page .mtp-mod-table .nv-pic{ width: 92px; --k: .5; }
  .mtp-ws .mtp-mod-table, .mtp-ws .mtp-mod-beats { display: block; max-width: 100%; overflow-x: auto; }
  .mtp-nv-cards, .mtp-ts-cmp-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---- print: A4 and Letter ---------------------------------------------------------------- */
@media print {
  .mtp-nv-tools, .mtp-nv-hearbox, .mtp-ts-compare, .mtp-ts-real, .mtp-ts-uses, .mtp-answerbox, .mtp-nv-hear, .mtp-ts-hear { display: none !important; }
  .mtp-nv-scroll { overflow: visible; }
  .mtp-chart-page .mtp-nv-table, .mtp-chart-page .mtp-ts-table{ min-width: 0; font-size: 9pt; }
  .mtp-chart-page .mtp-ts-table{ table-layout: fixed; }
  .mtp-ts-table col.c-pic{ width: 31%; } .mtp-ts-table col.c-type{ width: 23%; } .mtp-ts-table col.c-count{ width: 14%; } .mtp-ts-table col.c-pat{ width: 17%; } .mtp-ts-table col.c-use{ width: 15%; }
  .mtp-chart-page .mtp-nv-table th, .mtp-chart-page .mtp-nv-table td{ padding: 1pt 4pt; border-bottom: .6pt solid #555 !important; }
  .mtp-chart-page .mtp-nv-table thead th, .mtp-chart-page .mtp-ts-table thead th, .mtp-chart-page .mtp-mod-table thead th{ font-size: 7.5pt; letter-spacing: .02em; }
  .mtp-nv-sub { font-size: 7.5pt; }
  .nv-pic { width: 15mm; padding: 0 !important; }
  .nv-pic svg { width: 12mm !important; }
  .mtp-chart-page .mtp-nv-table td.num strong{ font-size: 10pt; }
  .mtp-nv-h3 { margin: 6pt 0 2pt; font-size: 12pt; }
  .mtp-nv-tree-name { flex-basis: 9.5em; font-size: 8.5pt; }
  .mtp-nv-tree-bar { height: 5mm; }
  .mtp-nv-tree-bar i { font-size: 7.5pt; line-height: 4.4mm; }
  .mtp-nv-tree-row { margin-bottom: 1.5pt; }
  .mtp-nv-note { font-size: 8pt; margin-top: 4pt; }
  .mtp-ws .mtp-vex svg *, .mtp-ws .mtp-vex svg { shape-rendering: geometricPrecision; }

  .mtp-mod-grid { gap: 0 8mm; }
  .mtp-chart-page .mtp-mod-table{ font-size: 8.5pt; margin-bottom: 3pt; }
  .mtp-chart-page .mtp-mod-table th, .mtp-chart-page .mtp-mod-table td{ padding: .6pt 3pt; border-bottom: .6pt solid #555 !important; }
  .mtp-chart-page .mtp-mod-table .nv-pic{ width: 24mm; --k: .46; }
  .mtp-chart-page .mtp-mod-beats{ font-size: 8pt; }
  .mtp-chart-page .mtp-mod-beats th, .mtp-chart-page .mtp-mod-beats td{ padding: 1.5pt 3pt; font-size: 8.5pt; }
  .mtp-chart-page .mtp-mod-beats thead th{ font-size: 7.5pt; }
  .mtp-chart-page .mtp-mod-beats thead th b{ font-size: 8.5pt; }
  .mtp-ws .mtp-ws-tip { font-size: 8.5pt; margin-bottom: 2pt; }

  .ts-pic { --k: .5; }
  .ts-name { font-size: 14pt; }
  .ts-alt { font-size: 8.5pt; }
  .ts-type, .ts-beats, .ts-count2 { font-size: 8pt; }
  .mtp-chart-page .mtp-ts-table th, .mtp-chart-page .mtp-ts-table td{ padding: .6pt 4pt; border-bottom: .6pt solid #555 !important; }
  .mtp-chart-page .mtp-ts-group th{ font-size: 8pt; padding: 3pt 4pt 1pt; }
  .mtp-ts-lower { gap: 0 8mm; margin-top: 3pt; }
  .mtp-ts-lower h3 { font-size: 11pt; margin: 3pt 0 1pt; }
  .mtp-ts-special-item { margin-bottom: 1pt; }
  .mtp-ts-special-item .mtp-vex { flex-basis: 34mm; }
  .mtp-ts-special-item .mtp-vex svg { width: 34mm !important; }
  .mtp-ts-special-item p, .mtp-ts-rule ol { font-size: 8.5pt; }
  .mtp-nv .mtp-ws-credit, .mtp-ts .mtp-ws-credit { font-size: 7.5pt; margin-top: 4pt; padding-top: 3pt; }
}