/* Quick reference sheets: styling only. The wording lives in js/data/private/quickref-source.html (private build).
   The same markup is shown in the app and printed to A4 by tools/build-quickref.js (the .print class). */
.qr { --ink: #1c2226; color: var(--ink); color-scheme: light; font: 400 16.4px/1.17 'PT Sans Narrow', 'Arial Narrow', sans-serif; }
.qr *, .qr *::before, .qr *::after { box-sizing: border-box; }
.qr b { font-weight: 700; }
.qr .page { background: #fff; border-radius: 12.8px; padding: 15.4px; margin: 0 auto 23px; max-width: 1400px; display: flex; flex-direction: column; gap: 10.2px; box-shadow: 0 1px 7.7px rgba(0, 0, 0, .18); }
.qr .qr-head { background: #1d2414; color: #f1f3ea; border-bottom: 6.4px solid #556b2f; border-radius: 7.7px; padding: 9px 17.9px 10.2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5.1px 20.5px; }
.qr .qr-head h1 { font: 400 46.1px/1 'League Gothic', sans-serif; letter-spacing: .03em; text-transform: uppercase; margin: 0; }
.qr .qr-head h2 { font: 600 16.6px/1 Oswald, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #b9c49c; margin: 0; }
.qr .qr-head .r { margin-left: auto; font-size: 14.1px; line-height: 1.2; color: #b9c49c; text-align: right; }
.qr .flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 7.7px; }
.qr .flow div { position: relative; color: #fff; border-radius: 6.4px; padding: 6.4px 10.2px 6.4px 38.4px; font: 600 14.1px/1.1 Oswald, sans-serif; letter-spacing: .05em; text-transform: uppercase; min-height: 35.8px; display: flex; align-items: center; }
.qr .flow div i { position: absolute; left: 7.7px; top: 50%; transform: translateY(-50%); width: 21.8px; height: 21.8px; border-radius: 50%; background: #fff; color: var(--c); font: 600 14.1px/21.8px Oswald, sans-serif; text-align: center; font-style: normal; letter-spacing: 0; }
.qr .flow small { display: block; font: 400 12.8px/1.1 'PT Sans Narrow', sans-serif; letter-spacing: 0; text-transform: none; opacity: .95; }
.qr .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 10.2px; align-items: start; }
.qr .col { display: flex; flex-direction: column; gap: 10.2px; min-width: 0; }
.qr .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 10.2px; align-items: start; }
.qr .two > .col { min-width: 0; }
.qr section { flex: none; --c: #444; --t: #f3f3f3; border: 1.3px solid var(--c); border-radius: 7.7px; background: var(--t); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.qr section > h3 { background: var(--c); color: #fff; font: 600 16px/1 Oswald, sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 5.1px 10.2px; margin: 0; display: flex; align-items: center; gap: 7.7px; }
.qr section > h3 i { background: #fff; color: var(--c); font: 600 14.1px/21.8px Oswald, sans-serif; width: 21.8px; height: 21.8px; border-radius: 50%; text-align: center; font-style: normal; letter-spacing: 0; flex: none; }
.qr section > h3 span { white-space: nowrap; margin-left: auto; font: 400 12.8px/1 'PT Sans Narrow', sans-serif; letter-spacing: 0; text-transform: none; opacity: .9; }
.qr .bd { padding: 6.4px 10.2px 7.7px; }
.qr .bd p { margin: 3.8px 0 0; max-width: none; }
.qr .bd p:first-child { margin-top: 0; }
.qr ol, .qr ul { list-style: none; margin: 0; padding: 0; }
.qr ol.n { counter-reset: n; }
.qr ol.n li { counter-increment: n; position: relative; padding-left: 20.5px; margin-top: 3.8px; }
.qr ol.n li:first-child { margin-top: 0; }
.qr ol.n li::before { content: counter(n); position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--c); color: #fff; font: 600 11.5px/16px Oswald, sans-serif; text-align: center; }
.qr ul.d li { position: relative; padding-left: 15.4px; margin-top: 3.8px; }
.qr ul.d li:first-child { margin-top: 0; }
.qr ul.d li::before { content: ''; position: absolute; left: 1px; top: 6.4px; border-left: 7.7px solid var(--c); border-top: 5.1px solid transparent; border-bottom: 5.1px solid transparent; }
.qr table { width: 100%; border-collapse: collapse; background: transparent; }
.qr td, .qr th { padding: 2.6px 6.4px; vertical-align: top; text-align: left; border: 0; }
.qr tr:nth-child(odd) td { background: rgba(255, 255, 255, .75); }
.qr tr:nth-child(even) td { background: rgba(255, 255, 255, .3); }
.qr td:first-child { font-weight: 700; white-space: nowrap; color: var(--c); }
.qr td + td { border-left: 1px solid rgba(0, 0, 0, .12); }
.qr .chip { display: inline-block; font: 600 13.4px/1 Oswald, sans-serif; padding: 2.6px 7.7px; border-radius: 5.1px; color: #fff; letter-spacing: .03em; vertical-align: 1px; white-space: nowrap; }
.qr .res { display: grid; grid-template-columns: auto 1fr; gap: 3.8px 10.2px; align-items: center; margin-top: 5.1px; }
.qr .res .chip { text-align: center; min-width: 43.5px; }
.qr .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 5.1px; }
.qr .kv div { background: #fff; border: 1px solid rgba(0, 0, 0, .18); border-radius: 6.4px; padding: 5.1px 7.7px; text-align: center; }
.qr .kv b { display: block; font: 400 21.8px/1 'League Gothic', sans-serif; color: var(--c); letter-spacing: .03em; }
.qr .note { font-size: 14.1px; color: #47525a; margin-top: 3.8px; }
.qr .qr-foot { font-size: 12.8px; line-height: 1.2; color: #5a656d; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2.6px 30.7px; }
.qr tr.hd td { background: var(--c); color: #fff; font-weight: 600; font-family: Oswald, sans-serif; font-size: .92em; letter-spacing: .04em; text-transform: uppercase; }
.qr tr.hd td + td { border-left-color: rgba(255, 255, 255, .25); }
.qr .nw td { white-space: nowrap; }
.qr .num td:not(:first-child) { text-align: center; }
.qr .num td.l { text-align: left; }
.qr .tw { overflow-x: auto; }
.qr .tw table { min-width: 716.8px; }
.qr .s1 { --c: #4f6b2a; --t: #eff4e4; } .qr .s2 { --c: #3b4ba0; --t: #eaecf8; } .qr .s3 { --c: #2a6fb5; --t: #e7f0fa; } .qr .s4 { --c: #178079; --t: #e3f3f1; }
.qr .s5 { --c: #a66a00; --t: #fbf1dc; } .qr .s6 { --c: #4a5560; --t: #eceff1; } .qr .s7 { --c: #b3261e; --t: #fbe9e7; } .qr .s8 { --c: #c0510e; --t: #fcece0; }
.qr .s9 { --c: #6b3fa0; --t: #f0e9f8; } .qr .s10 { --c: #3d5a50; --t: #e6efec; } .qr .s11 { --c: #2f6b2a; --t: #e8f3e4; }

/* ---------- A4 print (tools/build-quickref.js adds .print) ---------- */
.qr.print { font-size: 9.6pt; line-height: 1.17; }
.qr.print .page { width: 210mm; height: 297mm; max-width: none; margin: 0; border-radius: 0; box-shadow: none; padding: 5mm 6mm 4mm; gap: 2mm; overflow: hidden; break-after: page; page-break-after: always; }
.qr.print .page:last-child { break-after: auto; page-break-after: auto; }
.qr.print .qr-head { border-bottom-width: 1.6mm; border-radius: 1.6mm; padding: 1.6mm 4mm 1.8mm; gap: 4mm; flex-wrap: nowrap; }
.qr.print .qr-head h1 { font-size: 27pt; }
.qr.print .qr-head h2 { font-size: 10pt; }
.qr.print .qr-head .r { font-size: 8pt; }
.qr.print .flow { grid-template-columns: repeat(5, 1fr); gap: 1.6mm; }
.qr.print .flow div { padding: 1.3mm 2mm 1.3mm 7mm; font-size: 8.2pt; border-radius: 1.4mm; min-height: 7mm; }
.qr.print .flow div i { left: 1.6mm; width: 4.2mm; height: 4.2mm; font-size: 8pt; line-height: 4.2mm; }
.qr.print .flow small { font-size: 7.4pt; }
.qr.print .cols { flex: 1; grid-template-columns: repeat(3, 1fr); gap: 2.4mm; min-height: 0; align-items: stretch; }
.qr.print .col { gap: 2mm; min-height: 0; }
.qr.print .col section:last-child { flex: 1; }
.qr.print section { border-width: .35mm; border-radius: 1.6mm; }
.qr.print section > h3 { font-size: 9.4pt; padding: 1mm 2.2mm; gap: 1.8mm; }
.qr.print section > h3 i { width: 4.4mm; height: 4.4mm; font-size: 8.2pt; line-height: 4.4mm; }
.qr.print section > h3 span { font-size: 7.6pt; }
.qr.print .bd { padding: 1.4mm 2.2mm 1.5mm; }
.qr.print .bd p { margin-top: .9mm; }
.qr.print ol.n li { padding-left: 4.2mm; margin-top: .9mm; }
.qr.print ol.n li::before { top: .2mm; width: 3.3mm; height: 3.3mm; font-size: 7pt; line-height: 3.3mm; }
.qr.print ul.d li { padding-left: 3.2mm; margin-top: .8mm; }
.qr.print ul.d li::before { left: .4mm; top: 1.5mm; border-left-width: 1.6mm; border-top-width: 1mm; border-bottom-width: 1mm; }
.qr.print td, .qr.print th { padding: .45mm 1.3mm; }
.qr.print .chip { font-size: 8pt; padding: .5mm 1.5mm; border-radius: 1mm; }
.qr.print .res { gap: .9mm 2mm; margin-top: 1.2mm; }
.qr.print .res .chip { min-width: 9mm; }
.qr.print .kv { gap: 1mm; }
.qr.print .kv div { padding: 1mm 1.6mm; border-radius: 1.2mm; }
.qr.print .kv b { font-size: 13pt; }
.qr.print .note { font-size: 8.4pt; margin-top: .9mm; }
.qr.print .qr-foot { font-size: 7.2pt; flex-wrap: nowrap; }
.qr.print .p2 { flex: 1; display: flex; flex-direction: column; gap: 2mm; min-height: 0; }
.qr.print .two { grid-template-columns: 1fr 1fr; gap: 2.4mm; align-items: stretch; }
.qr.print .two > .col { gap: 2mm; }
.qr.print .two > .col > section:last-child { flex: 1; }
.qr.print .p2 { font-size: 9.8pt; }
.qr.print .p2 section > h3 { font-size: 10pt; }
.qr.print .p2 .bd { padding: 1.6mm 2.4mm 1.8mm; }
.qr.print .p2 td { padding: .7mm 1.5mm; }
.qr.print .tw table { min-width: 0; }
.qr.print .tw { overflow: visible; }