/* Voice types and vocal range chart (layouts/_partials/charts/pages/voice-types.html, /charts/voice-types-vocal-range-chart).
   Loaded only by that page, 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.
   The drawings are inline SVG written by research/scripts/voice_range_build.py; their classes (vr-*) are styled here.
   Print sizes: nothing on a printed sheet is smaller than 7.5 pt (SVG text is 12 user units = 8 pt or more at A4 width). */

.mtp-ws.vr-sheet { max-width: 1000px; }

/* ---- the drawings --------------------------------------------------------- */
.vr-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vr-fig { min-width: 640px; }
.vr-fig-satb { min-width: 600px; }
.vr-svg { display: block; width: 100%; height: auto; font-family: "Source Sans 3", -apple-system, "Segoe UI", sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.vr-svg .vr-cell { fill: #fff; stroke: #888; stroke-width: .6; }
.vr-svg .vr-black { fill: #1c1c1c; }
.vr-svg .vr-oct { font-size: 13px; font-weight: 700; fill: #111; }
.vr-svg .vr-mid { font-size: 14px; text-decoration: underline; }
.vr-svg .vr-grid { stroke: #8c8c8c; stroke-width: .7; stroke-dasharray: 2 3; }
.vr-svg .vr-gridmid { stroke: #111; stroke-width: 1; stroke-dasharray: none; }
.vr-svg .vr-ext { fill: #d6d6d6; stroke: #333; stroke-width: .8; }
.vr-svg .vr-typ { fill: #1c1c1c; }
.vr-svg .vr-hv { fill: #111; }
.vr-svg .vr-gv { fill: #fff; stroke: #111; stroke-width: 1; }
.vr-svg .vr-real { fill: #9a5b00; }
.vr-svg .vr-real-w { fill: #9a5b00; opacity: .55; }
.vr-svg .vr-name { font-size: 16px; font-weight: 700; fill: #111; }
.vr-svg .vr-group { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; fill: #333; }
.vr-svg .vr-sub { font-size: 13px; fill: #333; }
.vr-svg .vr-end { font-size: 13px; font-weight: 600; fill: #111; }
.vr-svg .vr-in { fill: #fff; }
.vr-svg .vr-r { text-anchor: end; }
.vr-svg .vr-leg { font-size: 13px; fill: #111; }

/* ---- tables on the sheets -------------------------------------------------- */
.mtp-chart-page .vr-table, .mtp-chart-page .vr-find-table { display: table; overflow: visible; width: 100%; border-collapse: collapse; }
.vr-table { margin: 8px 0 4px; font-size: 14px; line-height: 1.3; }
.vr-table th, .vr-table td { padding: 4px 8px; border-bottom: 1px solid #bbb; text-align: left; vertical-align: middle; }
.vr-table thead th { border-bottom: 2px solid #111; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #333; vertical-align: bottom; }
.vr-table th[scope="row"] { font-weight: 700; }
.vr-table .num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vr-table thead th.num { white-space: normal; }
.vr-table .vr-sub { display: block; font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 400; color: #333; }
.vr-table th[scope="row"] .vr-sub { display: inline; font-size: 12px; }
.vr-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #222; }
.vr-bul { margin: 8px 0 0; padding-left: 1.2em; font-size: 13px; line-height: 1.45; color: #222; }
.vr-bul li { margin: 0 0 4px; }
.vr-sheet .vr-table-src { table-layout: fixed; }
.vr-sheet .vr-table-src th:first-child { width: 17%; }

/* ---- find-your-range worksheet ---------------------------------------------- */
.vr-steps { margin: 0 0 8px; padding-left: 1.4em; font-size: 13.5px; line-height: 1.4; }
.vr-steps li { margin: 0 0 3px; }
.vr-find-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-items: start; }
.vr-find-table { font-size: 14px; }
.vr-find-table th, .vr-find-table td { padding: 0 6px; height: 28px; border-bottom: 1px solid #888; text-align: left; }
.vr-find-table thead th { height: auto; padding-bottom: 3px; border-bottom: 2px solid #111; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #333; }
.vr-find-table .c { text-align: center; width: 18%; }
.vr-find-table td:last-child { font-size: 12px; color: #333; }
.vr-find-mid th { font-weight: 800; }
.vr-find-mid th, .vr-find-mid td { border-bottom: 2px solid #111; }
.vr-tick { display: inline-block; width: 15px; height: 15px; border: 1.5px solid #111; border-radius: 2px; vertical-align: middle; }
.vr-find-extra { margin: 8px 0 0; font-size: 13.5px; }
.vr-result { margin: 8px 0 0; padding: 8px 12px; border: 1.5px solid #111; border-radius: 3px; font-size: 13.5px; line-height: 1.5; }
.vr-result p { margin: 0 0 6px; }
.vr-result p:last-child { margin: 0; font-size: 12.5px; }

/* ---- screen-only parts ------------------------------------------------------- */
.vr-swipe { display: none; margin: 4px 0 0; }
.vr-tools { margin: 0 0 16px; }
.vr-tools[hidden] { display: none; }
.vr-hear, .vr-real, .vr-singers, .vr-fach, .vr-child, .vr-faq, .vr-next { margin: 34px 0 0; }
.vr-hear h2, .vr-real h2, .vr-singers h2, .vr-fach h2, .vr-child h2, .vr-faq h2, .vr-next h2 { margin: 0 0 10px; }
.vr-cards { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.markdown .vr-cards li, .vr-cards li { margin: 0; padding: 12px 14px; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px; }
.vr-cards li::marker { content: none; }
.vr-cards h3 { margin: 0 0 4px; font-size: 1.25rem; color: var(--mtp-brass-bright); }
.vr-card-range { margin: 0 0 4px; font-size: 18px; color: var(--mtp-paper); }
.vr-card-range span { color: var(--mtp-muted); font-size: 13px; margin-left: 6px; }
.vr-card-note { margin: 0 0 8px; color: var(--mtp-muted); font-size: 13px; line-height: 1.45; }
.vr-card-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.vr-card-btns .mtp-play { margin: 0; min-height: 36px; padding: 6px 12px; font-size: 13px; }
.vr-card-btns [hidden] { display: none; }
.vr-play.is-playing { background: var(--mtp-brass); color: #1a1209; }

.vr-paper { margin: 14px 0 12px; padding: 12px 14px 8px; background: #fff; color: #111; border-radius: 2px; }
.vr-table-real, .vr-table-fach { color: var(--mtp-paper); }
.vr-real .vr-table th, .vr-real .vr-table td, .vr-fach .vr-table th, .vr-fach .vr-table td { border-bottom-color: var(--mtp-line); }
.vr-real .vr-table thead th, .vr-fach .vr-table thead th { color: var(--mtp-muted); border-bottom-color: var(--mtp-brass); }
.vr-real .vr-table td, .vr-real .vr-table th, .vr-fach .vr-table td, .vr-fach .vr-table th { background: transparent; }
.vr-cap { caption-side: top; text-align: left; padding: 0 0 6px; color: var(--mtp-muted); font-size: 13px; }
.vr-table-fach { min-width: 760px; font-size: 13.5px; }

.vr-singer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0 10px; }
.vr-singer-card { padding: 12px 14px; background: var(--mtp-raised); border: 1px solid var(--mtp-line); border-radius: 2px; }
.vr-singer-card h3 { margin: 0 0 6px; font-size: 1.2rem; color: var(--mtp-brass-bright); }
.markdown .vr-singer-card ul, .vr-singer-card ul { margin: 0; padding: 0; list-style: none; }
.vr-singer-card li { margin: 0 0 5px; font-size: 14px; line-height: 1.35; }
.vr-singer-card li::marker { content: none; }
.vr-singer-card a { color: var(--mtp-paper); text-decoration-color: var(--mtp-brass); }
.vr-years { color: var(--mtp-muted); font-size: 12.5px; }
.vr-p412 { display: block; color: var(--mtp-muted); font-size: 12.5px; }

.vr-prose { max-width: 76ch; margin: 0; padding-left: 1.2em; line-height: 1.6; }
.vr-prose li { margin: 0 0 10px; }
.vr-faq details { max-width: 76ch; border-top: 1px solid var(--mtp-line); padding: 10px 0; }
.vr-faq details:last-of-type { border-bottom: 1px solid var(--mtp-line); }
.vr-faq summary { cursor: pointer; font-weight: 700; color: var(--mtp-paper); line-height: 1.4; }
.vr-faq details p { margin: 8px 0 0; color: var(--mtp-muted); line-height: 1.6; }

@media screen { .mtp-chart-page .vr-table { min-width: 560px; } }
/* ---- phones ---------------------------------------------------------------------- */
@media screen and (max-width: 700px) {
  .mtp-ws.vr-sheet { padding: 16px 14px 14px; }
  .vr-table { font-size: 13px; }
  .vr-table th, .vr-table td { padding: 4px 5px; }
  .vr-sheet .vr-table-src { table-layout: auto; }
  .vr-sheet .vr-scroll-t { overflow-x: auto; }
  .vr-find-cols { grid-template-columns: 1fr; gap: 16px; }
  .vr-cards { grid-template-columns: 1fr; }
  .vr-swipe { display: block; }
}
/* tables that are wider than a phone scroll inside their sheet */
.vr-sheet { overflow-x: auto; }

/* ---- print ------------------------------------------------------------------------- */
@media print {
  .vr-tools, .vr-hear, .vr-real, .vr-singers, .vr-fach, .vr-child, .vr-faq, .vr-next, .vr-play { display: none !important; }
  .vr-sheet { overflow: visible; }
  .vr-scroll { overflow: visible; }
  .vr-fig, .vr-fig-satb { min-width: 0; }
  .vr-svg * { shape-rendering: geometricPrecision; }
  .vr-ws, .mtp-ws.vr-sheet { font-size: 9pt; }
  .vr-table { font-size: 8.5pt; margin: 4pt 0 2pt; }
  .vr-table th, .vr-table td { padding: 1.4pt 4pt; border-bottom: .6pt solid #555 !important; }
  .vr-table thead th { font-size: 7.5pt; letter-spacing: .02em; border-bottom: 1.2pt solid #000 !important; }
  .vr-table .vr-sub { font-size: 7.5pt; }
  .vr-table th[scope="row"] .vr-sub { font-size: 7.5pt; }
  .vr-note, .vr-bul { font-size: 8.5pt; line-height: 1.35; margin-top: 4pt; }
  .vr-bul li { margin: 0 0 2pt; }
  .vr-steps { font-size: 9pt; line-height: 1.3; margin-bottom: 4pt; }
  .vr-find-table { font-size: 10pt; }
  .vr-find-table th, .vr-find-table td { height: 7.4mm; border-bottom: .6pt solid #333 !important; }
  .vr-find-table thead th { height: auto; font-size: 7.5pt; border-bottom: 1.2pt solid #000 !important; }
  .vr-find-table td:last-child { font-size: 8pt; }
  .vr-find-mid th, .vr-find-mid td { border-bottom: 1.2pt solid #000 !important; }
  .vr-tick { width: 4.2mm; height: 4.2mm; border: 1pt solid #000; }
  .vr-find-extra { font-size: 9.5pt; }
  .vr-result { font-size: 9pt; border: 1pt solid #000; padding: 4pt 8pt; }
  .vr-result p:last-child { font-size: 8.5pt; }
  .vr-find-cols { gap: 0 8mm; }
  .mtp-ws .mtp-box { min-width: 20mm; height: 5mm; border-bottom: 1pt solid #000; }
  .mtp-ws .mtp-box-wide { min-width: 40mm; }
}