/* Printable page styles. All sizes are in mm so the screen preview matches paper. */
@font-face {
    font-family: 'Amiri';
    src: url('../fonts/Amiri-Regular.ttf') format('truetype');
    font-display: block;
}
@font-face {
    font-family: 'KoutabDotted';
    src: url('../fonts/arfonts-abo-slman-alomar-1-munaqat.ttf') format('truetype');
    font-display: block;
}

.page {
    position: relative;
    flex: none;
    background: #fff;
    color: var(--c-text);
    font-family: var(--font-ar);
    overflow: hidden;
    box-sizing: border-box;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.page *, .page *::before, .page *::after { box-sizing: border-box; }
.page svg { overflow: visible; }
.page-border { position: absolute; inset: 0; pointer-events: none; }
.page-inner { position: absolute; display: flex; flex-direction: column; }
.latin, .page small, .pf { font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ---------- header / footer ---------- */
.ph { flex: none; display: flex; flex-direction: column; }
.ph-title {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    background: var(--c-primary-soft); border-radius: 3.5mm; padding: 0 3mm;
}
.ph-art { width: 12mm; display: flex; justify-content: center; }
.ph-titles { flex: 1; text-align: center; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.ph-ar { font-size: 6.4mm; line-height: 1.45; font-weight: 700; color: var(--c-primary); white-space: nowrap; }
.ph-en { font: 600 3mm/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--c-text); opacity: 0.7; letter-spacing: 0.03em; }
.ph-name { flex: none; display: flex; gap: 8mm; align-items: flex-end; padding: 0 1mm 1mm; font-size: 4.2mm; direction: rtl; }
.ph-name > span { display: flex; align-items: flex-end; gap: 2mm; flex: 2; white-space: nowrap; }
.ph-name > span.date { flex: 1; }
.ph-name i { flex: 1; border-bottom: 0.3mm dotted var(--c-text); margin-bottom: 1.4mm; }
.ph-name small { font-size: 2.6mm; opacity: 0.65; margin-bottom: 0.8mm; }
.ph-instr {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 4mm;
    direction: rtl; border-inline-start: 1.2mm solid var(--c-secondary); padding: 0 3mm; margin-top: 0.5mm;
    background: linear-gradient(to left, var(--c-secondary-soft), transparent 70%);
    border-radius: 1mm;
}
.ph-instr .ar { font-size: 4.6mm; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-instr .en { font: 2.9mm system-ui, -apple-system, 'Segoe UI', sans-serif; opacity: 0.7; direction: ltr; text-align: left; }
.pb { flex: none; position: relative; overflow: hidden; }
.pf { flex: none; display: flex; justify-content: space-between; align-items: flex-end; font-size: 2.6mm; color: var(--c-text); opacity: 0.5; }
.empty { display: flex; height: 100%; align-items: center; justify-content: center; font: 5mm system-ui, sans-serif; color: #888; text-align: center; padding: 20mm; }

/* ---------- shared bits ---------- */
.row, .hollow { display: block; }
.pic { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pic > svg, .pic > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.emo { line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }

/* tracing */
.tr-group { display: flex; align-items: center; direction: rtl; }
.tr-pic { flex: none; display: flex; justify-content: center; margin-inline-end: 3mm; }
.tr-rows { flex: 1; }

/* letter study */
.ls-top { display: flex; direction: rtl; gap: 5mm; align-items: center; margin-bottom: 4mm; }
.ls-tile { flex: none; background: var(--c-primary-soft); border: 0.7mm solid var(--c-primary); border-radius: 6mm; overflow: hidden; }
.ls-info { flex: 1; }
.ls-name { font-size: 12mm; color: var(--c-primary); font-weight: 700; line-height: 1.3; }
.ls-tr { font: 4.2mm system-ui, -apple-system, sans-serif; direction: ltr; text-align: right; opacity: 0.8; margin-top: 3mm; }
.ls-tr b { color: var(--c-accent); }
.ls-note { font-size: 4.2mm; color: var(--c-accent); margin-top: 2mm; }
.ls-word { flex: none; display: flex; flex-direction: column; align-items: center; background: var(--c-soft); border-radius: 5mm; padding: 1.5mm 4mm; height: 100%; justify-content: center; }
.ls-w { font-size: 7mm; line-height: 1.2; }
.ls-word small { font-size: 3mm; opacity: 0.7; }
.ls-forms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-bottom: 4mm; }
.ls-form { border: 0.4mm solid var(--c-line); border-radius: 3mm; background: var(--c-soft); display: flex; flex-direction: column; align-items: center; padding-top: 1mm; overflow: hidden; }
.ls-form .lbl { font-size: 3.5mm; color: var(--c-primary); text-align: center; line-height: 1.2; }
.ls-form .lbl small { display: block; font-size: 2.4mm; color: var(--c-text); opacity: 0.6; }

/* alphabet chart */
.ab-grid { display: grid; justify-content: center; align-content: center; height: 100%; }
.ab-tile { border: 0.6mm solid; border-radius: 4mm; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; overflow: hidden; padding-bottom: 1mm; }
.ab-tile .hollow { max-width: 100%; height: auto; flex: none; }
.ab-word { line-height: 1.2; }
.ab-name { line-height: 1.1; opacity: 0.75; }

/* tables (forms, harakat) */
table.grid-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; direction: rtl; }
.grid-table th { background: var(--c-primary); color: #fff; font-size: 4mm; font-weight: 700; line-height: 1.15; border: 0.3mm solid var(--c-primary); }
.grid-table th small { display: block; font-size: 2.5mm; font-weight: 400; opacity: 0.85; }
.grid-table th:first-child { border-start-start-radius: 3mm; }
.grid-table th:last-child { border-start-end-radius: 3mm; }
.grid-table td { border: 0.3mm solid var(--c-line); padding: 0; text-align: center; vertical-align: middle; overflow: hidden; }
.grid-table td:first-child { background: var(--c-soft); }
.grid-table td svg { margin: 0 auto; max-width: 100%; }

/* matching */
.mt { display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; }
.mt-row { display: flex; align-items: center; }
.mt-word { width: 38%; text-align: center; font-weight: 700; background: var(--c-soft); border: 0.4mm solid var(--c-primary-soft); border-radius: 4mm; line-height: 1.5; }
.mt .dot { width: 3.2mm; height: 3.2mm; border-radius: 50%; background: var(--c-primary); margin: 0 2mm; flex: none; }
.mt-space { flex: 1; }
.mt-pic { width: 30%; display: flex; justify-content: center; }
.mt-en { font: 600 6mm system-ui, sans-serif; direction: ltr; }

/* picture cards */
.card-grid { display: grid; height: 100%; }
.card { border: 0.5mm dashed var(--c-line); border-radius: 4mm; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; overflow: hidden; padding: 1.5mm; }
.card-word { font-size: 6mm; }
.choices { display: flex; gap: 3mm; justify-content: center; }
.choice { border: 0.5mm solid var(--c-primary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; line-height: 1; background: #fff; }
.choices.small .choice { width: 1.7em; height: 1.7em; }
.mw { font-weight: 700; line-height: 1.7; white-space: nowrap; }
.hole { display: inline-block; width: 0.95em; height: 1.15em; border: 0.5mm dashed var(--c-accent); border-radius: 1.5mm; vertical-align: -0.3em; margin: 0 0.3mm; background: var(--c-accent-soft); }

/* build words */
.bw-row { display: flex; align-items: center; gap: 2mm; border-bottom: 0.3mm dashed var(--c-line); }
.bw-pic { flex: none; margin-inline-end: 3mm; }
.bw-letters b { font-weight: 400; color: var(--c-primary); }
.op { color: var(--c-accent); margin: 0 2.5mm; font-family: system-ui, sans-serif; font-size: 0.7em; }
.bw-line { flex: 1; align-self: stretch; margin: 5mm 0; border-bottom: 0.4mm solid var(--c-text); }
.bw-box { width: 1.3em; height: 1.4em; border: 0.4mm solid var(--c-primary); border-radius: 2mm; display: inline-block; background: #fff; }
.bw-word { font-weight: 700; }

/* numbers */
.nb-row { display: flex; gap: 4mm; align-items: center; direction: rtl; margin-bottom: 3mm; }
.nb-tile { flex: none; background: var(--c-primary); color: #fff; border-radius: 4mm; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.nb-tile small { font: 700 4mm system-ui, sans-serif; opacity: 0.85; }
.nb-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nb-top { display: flex; align-items: center; gap: 4mm; }
.nb-word { min-width: 32mm; color: var(--c-primary); font-weight: 700; }
.nb-objs { display: flex; flex-wrap: wrap; gap: 1mm; flex: 1; align-items: center; }
.nb-zero { font: 8mm system-ui, sans-serif; opacity: 0.4; }

/* find the letter */
.fl-legend { display: flex; gap: 10mm; align-items: center; justify-content: center; margin-bottom: 2mm; }
.fl-key { display: flex; align-items: center; gap: 2.5mm; font-size: 10mm; }
.fl-sw { width: 7mm; height: 7mm; border-radius: 50%; }
.fl-count { font: 3mm system-ui, sans-serif; display: flex; align-items: center; gap: 1.5mm; }
.fl-count i { width: 11mm; height: 8mm; border: 0.4mm solid var(--c-line); border-radius: 2mm; display: inline-block; }

/* word search */
table.ws { border-collapse: collapse; margin: 0 auto 4mm; border: 0.8mm solid var(--c-primary); }
.ws td { border: 0.3mm solid var(--c-line); text-align: center; vertical-align: middle; padding: 0; line-height: 1; }
.ws-list { display: grid; gap: 2mm; }
.ws-chip { border: 0.4mm solid var(--c-primary-soft); background: var(--c-soft); border-radius: 3mm; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 5mm; line-height: 1.3; }
.answer-tag { text-align: center; font-size: 6mm; color: var(--c-accent); margin-bottom: 3mm; }

/* colouring */
.co-block { display: flex; flex-direction: column; justify-content: space-between; }
.co-top { display: flex; align-items: center; justify-content: space-around; }
.co-pic { flex: 1; display: flex; justify-content: center; }

/* flashcards */
.fc-grid { display: grid; height: 100%; justify-content: center; }
.fc { border: 0.25mm dashed #9a9a9a; padding: 2.5mm; }
.fc-in { height: 100%; border: 0.8mm solid; border-radius: 4mm; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; overflow: hidden; padding: 1mm; }
.fc-t { line-height: 1.35; font-weight: 700; white-space: nowrap; }
.fc small { font-size: 3.4mm; opacity: 0.75; }
.fc-en { font-family: system-ui, sans-serif; font-weight: 700; }

/* ink saver: drop the tinted backgrounds */
.page.ink .ph-title, .page.ink .ph-instr { background: none; border: 0.3mm solid #999; }
.page.ink .ls-tile, .page.ink .ls-word, .page.ink .ls-form, .page.ink .mt-word, .page.ink .ws-chip { background: #fff; }
.page.ink .nb-tile { background: #fff; color: #111; border: 0.6mm solid #111; }
.page.ink .grid-table th { background: #fff; color: #111; }