/* The ruled practice rows of the ISRA calligraphy workbook (render.js), shared by the printed workbook
   and the app. Sizes are in millimetres so the app shows exactly what is printed. The letter heights
   below were measured from each font (alif, dal and the deepest tail, as parts of the letter size). */

@font-face { font-family: 'Calli School'; src: url('/calligraphy/fonts/NotoNaskhArabic.ttf') format('truetype'); font-weight: 400 700; font-display: block; }
@font-face { font-family: 'Calli Naskh'; src: url('/calligraphy/fonts/Amiri-Regular.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Calli Nastaliq'; src: url('/calligraphy/fonts/NotoNastaliqUrdu.ttf') format('truetype'); font-weight: 400 700; font-display: block; }

.rows { --ink: #0d0d0d; --trace: #cfc8bd; --pen: #1d3f7a; --rule: #b39f80; --rule-soft: #d6c9b2; --rule-faint: #ebe3d3; --grid: #e9dfce; direction: rtl; }
.s-school { --asc: .67; --mid: .40; --desc: .30; --hk: 1; --fk: 1; --bk: .60; --alif: .67; --dots: 5; font-family: 'Calli School', 'Noto Naskh Arabic', serif; font-weight: 450; }
.s-naskh { --asc: .72; --mid: .40; --desc: .53; --hk: 1; --fk: 1; --bk: .60; --alif: .72; --dots: 5; font-family: 'Calli Naskh', 'Amiri', serif; }
.s-nastaliq { --asc: .87; --mid: .46; --desc: .36; --hk: 1.25; --fk: .8; --bk: .62; --alif: .77; --dots: 3; font-family: 'Calli Nastaliq', 'Noto Nastaliq Urdu', serif; }

.row { position: relative; height: calc(var(--h) * var(--hk)); --f: calc(var(--fs) * var(--fk) * var(--fit, 1)); --base: calc(var(--h) * var(--hk) * var(--bk)); --nq: calc(var(--alif) * var(--f) / var(--dots)); break-inside: avoid; }
.sz-xl { --h: 36mm; --fs: 26mm; }
.sz-l { --h: 26mm; --fs: 17.5mm; }
.sz-m { --h: 19mm; --fs: 12mm; }
.sz-s { --h: 13.5mm; --fs: 8mm; }

/* The four guide lines: top (alif height), waist (small letters), base, drop (tails). */
/* Solid hairlines: dashed rules print as thousands of tiny segments and bloat the PDF. */
.g { position: absolute; left: 0; right: 0; height: 0; border-top: .2mm solid var(--rule-soft); }
.g.top { top: calc(var(--base) - var(--asc) * var(--f)); }
.g.waist { top: calc(var(--base) - var(--mid) * var(--f)); border-top-color: var(--rule-faint); }
.g.base { top: var(--base); border-top: .35mm solid var(--rule); }
.g.drop { top: calc(var(--base) + var(--desc) * var(--f)); }
.bare .g.top, .bare .g.waist, .bare .g.drop { display: none; }
.row.model .g.top, .row.model .g.waist, .row.model .g.drop { display: none; }
.row.model .g.base { border-top-color: var(--rule-soft); border-top-width: .22mm; }

/* The dot grid of the Naskh part: one square is one pen dot of the model. */
.gridbox { position: absolute; inset: 0; overflow: hidden; }
.gridbox svg { position: absolute; right: 0; top: calc(var(--base) - 20 * var(--nq)); width: calc(200 * var(--nq)); height: calc(40 * var(--nq)); }
.bare .gridbox { display: none; }

/* Everything written on a row shares the base line: the strut pins it. */
.ink { position: absolute; inset: 0; display: flex; align-items: baseline; gap: calc(var(--f) * .9); padding: 0 3mm; white-space: nowrap; overflow-x: clip; overflow-y: visible; font-size: var(--f); line-height: 0; }
.row.center .ink { justify-content: center; }
.strut { flex: none; width: 0; height: var(--base); margin-inline-end: calc(var(--f) * -.9); }
.ink span { flex: none; }
.ink bdi { display: inline-block; }
.ink bdi + bdi { margin-right: .7em; }
.bare .row + .row { border-top: 0 !important; }
.m { color: var(--ink); }
.tr { color: var(--trace); }
.ink-pen { color: var(--pen); }
.lab { position: absolute; left: 1.5mm; top: 1mm; direction: ltr; font: 500 2.6mm/1 'Work Sans', system-ui, sans-serif; letter-spacing: .02em; color: #6b6561; z-index: 1; }

/* The pen dot, a square standing on its corner; and the stack that measures an alif. */
.nq { flex: none; display: inline-block; width: calc(var(--nq) / 1.4142); height: calc(var(--nq) / 1.4142); transform: rotate(45deg); background: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.nq.tr { background: var(--trace); }
.nq.ink-pen { background: var(--pen); }
.row.nuqta .ink { gap: calc(var(--nq) * 1.6); }
.row.nuqta .nq { align-self: flex-start; margin-top: calc(var(--base) - var(--nq) * .85); }
.s-nastaliq .nq { transform: rotate(45deg) skew(-12deg, -12deg); }
/* Sits beside its letter: its foot at the letter's lowest point, one dot per pen dot of height. */
.mstack { flex: none; align-self: flex-start; display: flex; flex-direction: column; align-items: center; width: var(--nq); height: calc(var(--n) * var(--nq)); margin-top: calc(var(--base) + var(--down, 0) * var(--f) - var(--n) * var(--nq)); margin-inline-end: calc(var(--f) * -.66); }
.mstack .nq { flex: none; margin: calc(var(--nq) * .1464) 0; background: #800000; }