/* * arabic-tools.com — flashcards-and-games * * BUILT FILE. Do not edit here. * Source: .claude/arabic-tools/port/, rebuild with build.sh flashcards-and-games */ /* ========================================================== browser-tools.css ========================================================== */ /* ──────────────────────────────────────────────────────────────── ARABIC TOOLS — BROWSER TOOL CHROME The ported tools carry their own `ac-` class names. Two kinds: - The printed sheet itself (.ac-sheet and everything under it). That is the tool's real output and it is styled by sheets.css and print.css, which are copied from Araboo unchanged so a fix on either site copies straight across. - The chrome around the sheet — the two-column split, the preview stage, the button rows. On Araboo that came from a 950-line stylesheet built around a different palette. Rebuilding that slice here, against this site's own tokens, is what makes a ported tool look like it belongs rather than like a graft. The `--ac-*` bridge at the top is the whole trick: sheets.css asks for --ac-line, the ported markup asks for --ac-ar-font, and each is answered with this site's equivalent. Nothing in sheets.css needed editing. Loaded only on a browser tool's page. Version log 1.0.0 2026-08-08 Initial. ──────────────────────────────────────────────────────────────── */ /* ── the bridge ───────────────────────────────────────────────── On :root rather than scoped, because printSheets() clones the sheets to a root of its own directly on , outside any component wrapper. Scoping these would strip the printed page. */ :root { --ac-line: var( --at-line, #E9E5F1 ); --ac-ink: var( --at-ink, #4A4661 ); --ac-ink-soft: var( --at-ink-soft, #6E698A ); --ac-bg-soft: var( --at-paper, #FBF9F6 ); --ac-radius: var( --at-radius, 16px ); --ac-ui-font: var( --at-font, 'Inter', system-ui, sans-serif ); /* Araboo asks for a Naskh serif here and ships 'AC Naskh' to serve it. That font does not exist on this site, and an unresolved stack falls through to a random system serif, so this points at the Arabic face the site already loads. */ --ac-ar-font: var( --at-font-ar, 'Noto Sans Arabic', sans-serif ); --ac-blue-deep: var( --at-primary-deep, #5A4FB0 ); } /* ── the checkbox the shim builds ─────────────────────────────── Every other control the shim makes reuses a class this site already had; the checkbox is the one it did not. */ .at-tool .at-check { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; cursor: pointer; font-size: .95rem; color: var( --at-ink, #4A4661 ); line-height: 1.4; } .at-tool .at-check input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var( --at-primary, #6F63C9 ); cursor: pointer; } /* ── layout ───────────────────────────────────────────────────── Controls on the left, live preview on the right. Below 900px the preview drops under the controls, which is the only order that works when a sheet is wider than the screen. */ .at-tool--browser .ac-split { display: grid; grid-template-columns: 360px minmax( 0, 1fr ); gap: 30px; align-items: start; } @media ( max-width: 900px ) { .at-tool--browser .ac-split { grid-template-columns: 1fr; gap: 22px; } } .at-tool--browser .ac-card { border: 1px solid var( --at-line, #E9E5F1 ); border-radius: var( --at-radius, 16px ); background: var( --at-surface, #fff ) !important; padding: 22px 24px; margin-bottom: 20px; } .at-tool--browser .ac-card > :last-child { margin-bottom: 0; } .at-tool--browser .ac-lede { font-size: 1.02rem; color: var( --at-ink-soft, #6E698A ); max-width: 68ch; margin-bottom: 1.3em; } .at-tool--browser .ac-btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .at-tool--browser .ac-btn-row select { flex: 0 1 200px; } /* ── the preview stage ────────────────────────────────────────── scrollbar-gutter is load-bearing, not tidiness. Without it a sheet that fits by a hair toggles the scrollbar, which changes the width the fit zoom measures against, which resizes the sheet — and the preview shakes. This cost a debugging session on Araboo; keep it. */ .at-tool--browser .ac-stage { --ac-zoom: 1; background: var( --at-lilac, #F5F3FC ); border: 1px solid var( --at-line, #E9E5F1 ); border-radius: var( --at-radius, 16px ); padding: 20px; overflow: auto; scrollbar-gutter: stable; max-height: 84vh; } @media ( max-width: 900px ) { .at-tool--browser .ac-stage { padding: 12px; max-height: none; } } /* zoom rather than transform, so the scaled sheet still takes up the right amount of layout height. Browsers without it show it at 100%. */ .at-tool--browser .ac-stage > .ac-sheets { zoom: var( --ac-zoom ); } .at-tool--browser .ac-empty { border: 1px dashed var( --at-line-strong, #D6D0E4 ); border-radius: var( --at-radius, 16px ); padding: 52px 24px; text-align: center; color: var( --at-ink-soft, #6E698A ); background: var( --at-surface, #fff ); } /* ── Arabic entry ─────────────────────────────────────────────── The shim adds .at-input--ar to these as well; this adds the line height that vocalised Arabic needs and the site's base rule does not, since harakat sit above and below the letters. */ .at-tool--browser textarea.ac-ar-input, .at-tool--browser .at-input--ar { font-family: var( --at-font-ar, 'Noto Sans Arabic', sans-serif ) !important; font-size: 1.3rem; line-height: 2.05; direction: rtl; text-align: right; } /* ── sheet furniture ──────────────────────────────────────────── Printed, so these are in millimetres and black — deliberately not themed. A worksheet is going through a school photocopier. */ .ac-sheet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 1.5pt solid #000; padding-bottom: 5mm; margin-bottom: 7mm; } .ac-sheet-head h2 { font-size: 15pt; margin: 0 0 2mm; color: #000 !important; text-transform: none !important; } .ac-sheet-head .ac-sheet-meta { font-size: 9.5pt; white-space: nowrap; text-align: right; } .ac-sheet-head .ac-sheet-meta span { display: block; margin-bottom: 2mm; } .ac-sheet-logo { max-height: 18mm; max-width: 45mm; } /* Certificates print landscape; a bleed sheet has its background running to the paper edge, so it cannot carry the usual padding. */ .ac-sheet--landscape { width: 297mm; min-height: 210mm; } .ac-sheet--bleed { padding: 0; overflow: hidden; } /* Worksheet exercise headings. Printed, so points rather than rems. */ .ac-ex-title { font-size: 11.5pt; font-weight: 700; margin: 0 0 1mm; } .ac-ex-instr { font-size: 9.5pt; font-style: italic; margin: 0 0 3mm; color: #333; } /* ── controls the tools build themselves ──────────────────────── The shim hands back this site's classes, but several tools also assemble their own field markup directly. These give that markup the same treatment rather than leaving it unstyled. */ .at-tool--browser .ac-field { margin-bottom: 20px; } .at-tool--browser .ac-field:last-child { margin-bottom: 0; } .at-tool--browser .ac-field > label, .at-tool--browser .ac-legend { display: block; font-size: .95rem; font-weight: 700; color: var( --at-ink, #4A4661 ); margin-bottom: 7px; } .at-tool--browser .ac-legend { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase !important; color: var( --at-ink-soft, #6E698A ); margin-bottom: 14px; } .at-tool--browser .ac-hint { font-size: .875rem; line-height: 1.5; color: var( --at-ink-soft, #6E698A ); margin: 6px 0 0; } .at-tool--browser .ac-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; } .at-tool--browser .ac-row > * { flex: 1 1 130px; min-width: 0; } .at-tool--browser .ac-btn--small { font-size: .85rem; padding: 8px 13px; } .at-tool--browser .ac-card--soft { background: var( --at-paper, #FBF9F6 ) !important; } /* The transliteration tool's output panel — a reading surface, so it gets the Arabic face and the line height harakat need. */ .at-tool--browser .ac-textout { font-family: var( --at-font-ar, 'Noto Sans Arabic', sans-serif ) !important; font-size: 1.3rem; line-height: 2.1; white-space: pre-wrap; word-break: break-word; border: 1px solid var( --at-line, #E9E5F1 ); border-radius: var( --at-radius-sm, 10px ); background: var( --at-surface, #fff ) !important; padding: 20px 22px; min-height: 300px; max-height: 62vh; overflow: auto; } .at-tool--browser .ac-textout[dir="rtl"] { text-align: right; } /* The worksheet builder's exercise list is drag-ordered. */ .at-tool--browser .ac-exrow { cursor: grab; } .at-tool--browser .ac-exrow.is-dragging { opacity: .5; } /* Certificates want a wider control column — more fields, and a preview that is landscape rather than portrait. */ .at-tool--browser .ac-split--wide { grid-template-columns: 400px minmax( 0, 1fr ); } @media ( max-width: 900px ) { .at-tool--browser .ac-split--wide { grid-template-columns: 1fr; } } /* ========================================================== sheets.css ========================================================== */ /* * sheets.css — the printed surface. Everything inside .ac-sheet. * Loaded on all media so the on-screen preview is what prints. * * Version log * 1.0.0 2026-08-05 Initial. */ .ac-sheet { --ar: 'AC Naskh', 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', 'Geeza Pro', serif; } .ac-sheet .ac-ar-run, .ac-sheet .ac-ar-cell, .ac-sheet .ac-passage, .ac-sheet [dir='rtl'] { font-family: var(--ar); } .ac-sheet .ac-ar-run { font-size: 15pt; line-height: 2; } .ac-sheet [dir='rtl'] { text-align: right; } .ac-sheet .ac-empty-ex { font-size: 9.5pt; color: #777; font-style: italic; } /* ---------- blanks ---------- */ /* A run of underscores behaves unpredictably at a bidi boundary, so every blank is a fixed-width bordered span instead. */ .ac-sheet .ac-blank, .ac-sheet .ac-blank-inline { display: inline-block; border-bottom: 1pt solid #000; height: 1em; vertical-align: -0.2em; margin: 0 2mm; } .ac-sheet .ac-blank-inline { min-width: 16mm; } .ac-sheet .ac-writeline { display: block; border-bottom: 0.6pt solid #999; height: 8mm; margin: 0 0 1mm; } .ac-sheet .ac-lines { display: block; margin-top: 2mm; } /* ---------- numbered lists ---------- */ /* RTL numbering is the browser's job — faking it with manual numbers puts the digit on the wrong side. */ .ac-sheet .ac-numbered { margin: 0; padding-inline-start: 8mm; padding-inline-end: 0; } .ac-sheet .ac-numbered > li { margin-bottom: 3.5mm; list-style: decimal; page-break-inside: avoid; break-inside: avoid; } .ac-sheet .ac-numbered[dir='rtl'] > li { list-style-position: outside; } /* ---------- matching ---------- */ .ac-sheet .ac-match { width: 100%; border-collapse: collapse; } .ac-sheet .ac-match td { padding: 1.5mm 2mm; vertical-align: middle; } .ac-sheet .ac-match .ac-num { width: 8mm; font-weight: 700; font-size: 10pt; } .ac-sheet .ac-match .ac-ar-cell { width: 38%; text-align: right; } .ac-sheet .ac-match .ac-gap { width: 14mm; } .ac-sheet .ac-answer-row { margin-top: 4mm; font-size: 10.5pt; letter-spacing: .02em; } /* ---------- word search ---------- */ .ac-sheet .ac-wsgrid { border-collapse: collapse; margin: 0 auto 4mm; table-layout: fixed; } .ac-sheet .ac-wsgrid td { width: 9mm; height: 9mm; border: 0.4pt solid #bbb; text-align: center; vertical-align: middle; font-family: var(--ar); font-size: 13pt; line-height: 1; padding: 0; } .ac-sheet .ac-wsgrid td.is-answer { background: #d8eef7; font-weight: 700; } .ac-sheet .ac-wordbank { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2mm 5mm; justify-content: center; font-family: var(--ar); font-size: 13pt; } .ac-sheet .ac-wordbank li { border: 0.5pt solid #999; border-radius: 2mm; padding: 0.5mm 3mm; } /* ---------- unscramble tiles ---------- */ .ac-sheet .ac-tiles { display: inline-flex; gap: 1.5mm; vertical-align: middle; } .ac-sheet .ac-tile { display: inline-block; min-width: 8mm; text-align: center; border: 0.6pt solid #666; border-radius: 1.5mm; font-family: var(--ar); font-size: 13pt; line-height: 1.5; padding: 0 1mm; } .ac-sheet .ac-en-hint { font-size: 9pt; color: #555; } /* ---------- multiple choice ---------- */ .ac-sheet .ac-opts { display: block; margin-top: 1.5mm; font-size: 10pt; } .ac-sheet .ac-opt { display: inline-block; min-width: 42mm; margin: 0 4mm 1mm 0; } /* ---------- tables ---------- */ .ac-sheet .ac-transtable { width: 100%; border-collapse: collapse; } .ac-sheet .ac-transtable th, .ac-sheet .ac-transtable td { border: 0.5pt solid #666; padding: 2mm 3mm; height: 9mm; font-size: 10.5pt; } .ac-sheet .ac-transtable .ac-ar-cell { text-align: right; font-family: var(--ar); font-size: 14pt; width: 50%; } /* ---------- odd one out ---------- */ .ac-sheet .ac-group { display: inline-flex; gap: 6mm; flex-wrap: wrap; } .ac-sheet .ac-group-item { font-family: var(--ar); font-size: 14pt; } /* ---------- passage exercises ---------- */ .ac-sheet .ac-passage { font-size: 14pt; line-height: 2.4; text-align: justify; border: 0.5pt solid #ccc; border-radius: 2mm; padding: 4mm 5mm; margin-bottom: 4mm; } .ac-sheet .ac-bank { border: 0.6pt dashed #666; border-radius: 2mm; padding: 3mm 4mm; font-family: var(--ar); font-size: 13pt; line-height: 2; } .ac-sheet .ac-bank strong { font-size: 11pt; margin-inline-end: 3mm; } .ac-sheet .ac-bank-word { display: inline-block; margin: 0 3mm; } .ac-sheet .ac-tf { display: inline-block; margin-inline-start: 6mm; font-size: 10pt; white-space: nowrap; } .ac-sheet .ac-orderbox { display: inline-block; width: 8mm; height: 8mm; border: 0.6pt solid #000; vertical-align: middle; margin-inline-end: 3mm; } .ac-sheet .ac-reorder > li { list-style: none; } /* ---------- handwriting ---------- */ .ac-sheet .ac-hw-row { position: relative; margin-bottom: 3mm; page-break-inside: avoid; break-inside: avoid; } .ac-sheet .ac-hw-row svg { display: block; width: 100%; height: auto; } .ac-hw-guide { stroke: #cfd9de; stroke-width: 0.8; } .ac-hw-base { stroke: #8fa6b0; stroke-width: 1.1; } .ac-hw-x { stroke: #dbe4e8; stroke-width: 0.8; stroke-dasharray: 3 3; } /* Dotted outline letters: SVG text is shaped by the browser, so the joining is correct with no glyph-path extraction at all. */ .ac-hw-solid { fill: #9aa7ad; stroke: none; } .ac-hw-trace { fill: none; stroke: #9aa7ad; stroke-width: 1.4; stroke-dasharray: 4 4; paint-order: stroke; } .ac-hw-label { fill: #55666f; font-size: 9px; font-family: sans-serif; } /* ---------- flashcards, dominoes, loop cards ---------- */ .ac-sheet .ac-cardgrid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; height: 267mm; } .ac-sheet .ac-card-cut { border: 0.5pt dashed #999; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4mm; overflow: hidden; } .ac-sheet .ac-card-cut .ac-card-ar { font-family: var(--ar); font-size: 26pt; line-height: 1.6; direction: rtl; } .ac-sheet .ac-card-cut .ac-card-en { font-size: 16pt; } .ac-sheet .ac-card-cut .ac-card-sub { font-size: 9pt; color: #666; margin-top: 2mm; } .ac-sheet .ac-bingo { width: 100%; border-collapse: collapse; margin-bottom: 4mm; } .ac-sheet .ac-bingo td { border: 0.8pt solid #000; text-align: center; vertical-align: middle; font-family: var(--ar); font-size: 15pt; height: 22mm; padding: 1mm; } .ac-sheet .ac-bingo-title { font-size: 11pt; font-weight: 700; margin: 0 0 2mm; } .ac-sheet .ac-domino { display: flex; border: 0.8pt solid #000; height: 24mm; margin-bottom: -0.8pt; } .ac-sheet .ac-domino > div { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2mm; text-align: center; } .ac-sheet .ac-domino > div + div { border-inline-start: 0.8pt dashed #666; } .ac-sheet .ac-domino .ac-d-ar { font-family: var(--ar); font-size: 16pt; direction: rtl; } .ac-sheet .ac-loopcard { border: 0.8pt solid #000; padding: 3mm 4mm; margin-bottom: -0.8pt; min-height: 20mm; } .ac-sheet .ac-loopcard .ac-l-have { font-size: 11pt; } .ac-sheet .ac-loopcard .ac-l-who { font-size: 11pt; font-weight: 700; margin-top: 1.5mm; } .ac-sheet .ac-loopcard .ac-ar-run { font-size: 15pt; } .ac-sheet .ac-tarsia { display: block; width: 100%; height: auto; } .ac-tarsia text { font-size: 5px; fill: #000; } .ac-tarsia .ac-t-ar { font-family: 'AC Naskh', 'Noto Naskh Arabic', serif; font-size: 6px; } .ac-tarsia polygon { fill: none; stroke: #000; stroke-width: 0.5; } /* ---------- certificates ---------- */ .ac-cert { position: relative; width: 297mm; height: 210mm; background-size: cover; background-position: center; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ac-cert-field { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: pre-wrap; max-width: 90%; line-height: 1.3; } .ac-cert-field.is-arabic { font-family: var(--ar); direction: rtl; } .ac-cert-field.is-selected { outline: 1px dashed #12688c; } .ac-cert-logo { position: absolute; transform: translate(-50%, -50%); height: auto; max-width: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ac-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ac-logo-row .ac-check { margin-bottom: 0; } .ac-logo-thumb { flex: none; width: 68px; height: 68px; object-fit: contain; border: 1px solid var(--ac-line, #d5e2e8); border-radius: 8px; background: #fff; padding: 5px; } /* ========================================================== print.css ========================================================== */ /* * print.css — shared print stylesheet for every Arabic Companion tool. * Loaded with media="print". Hides all site and tool chrome, leaves the * .ac-sheet elements alone on the page. * * Version log * 1.0.0 2026-08-05 Initial. */ @page { size: A4 portrait; margin: 12mm; } body.ac-printing-landscape { } @page ac-landscape { size: A4 landscape; margin: 0; } @media print { /* Kill the whole site around the sheets. */ body.ac-printing > *:not(.ac-print-root) { display: none !important; } body.ac-printing #page, body.ac-printing #wrapper, body.ac-printing header, body.ac-printing footer, body.ac-printing .site-header, body.ac-printing .site-footer, body.ac-printing #kad-banner, body.ac-printing #topbar, body.ac-printing .kad-header, body.ac-printing .cli-bar-container, body.ac-printing #cookie-law-info-bar { display: none !important; } body.ac-printing { margin: 0 !important; padding: 0 !important; background: #fff !important; } .ac-print-root { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; background: #fff !important; } .ac-print-root .ac-sheet, .ac-sheet { width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; page-break-after: always; break-after: page; background: #fff !important; } .ac-print-root .ac-sheet:last-child { page-break-after: auto; break-after: auto; } /* Certificates carry a background image; browsers strip those unless told. */ .ac-sheet, .ac-sheet * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .ac-answer-key { page-break-before: always; break-before: page; } .ac-no-print { display: none !important; } /* Nothing inside a sheet may be split awkwardly. */ .ac-ex, .ac-card-cut, .ac-ws-row, .ac-domino, .ac-loopcard { page-break-inside: avoid; break-inside: avoid; } a[href]::after { content: none !important; } }