/* ============================================================
   لوحة عربي — Shared Design System
   Tokens, layout primitives, and reusable components used
   across every route. Keep page-specific rules out of this file.
   ============================================================ */

:root{
  --bg:#EEF0EA;
  --surface:#FFFFFF;
  --surface-2:#E4E8DE;
  --ink:#1C2521;
  --ink-soft:#4B5750;
  --border:#D6DACE;
  --emerald:#1F6F53;
  --emerald-deep:#154C39;
  --gold:#B8873F;
  --gold-soft:#E8D9B9;
  --danger:#AE4A32;
  --shadow: 0 1px 2px rgba(28,37,33,0.06), 0 8px 24px -12px rgba(28,37,33,0.18);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --font-ar-display:'Aref Ruqaa', serif;
  --font-ar-body:'Tajawal', sans-serif;
  --font-ui:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
html[data-theme="dark"]{
  --bg:#0E1713;
  --surface:#16211C;
  --surface-2:#1D2A23;
  --ink:#EAF0EA;
  --ink-soft:#9FAFA6;
  --border:#2A3A31;
  --emerald:#3FA57F;
  --emerald-deep:#2A7A5D;
  --gold:#D9B26B;
  --gold-soft:#3A3220;
  --danger:#E27358;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -12px rgba(0,0,0,0.55);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ar-body);
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
}
.lang-en{font-family:var(--font-ui);}
h1,h2,h3{font-family:var(--font-ar-display); font-weight:700; margin:0;}
a{color:inherit;}
img{max-width:100%;}
button, input, textarea, select{font-family:inherit; color:inherit;}
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:6px; }

.skip-link{
  position:absolute; right:-999px; top:0; background:var(--emerald); color:#fff;
  padding:10px 16px; border-radius:0 0 0 10px; z-index:200;
}
.skip-link:focus{ right:0; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 20px; }

/* ---------------- HEADER / NAV ---------------- */
header.site{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-ar-display); font-size:22px; font-weight:700; text-decoration:none; }
.brand .mark{
  width:34px; height:34px; border-radius:9px; background:linear-gradient(155deg, var(--emerald), var(--emerald-deep));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; flex:none;
}
nav.primary{ display:flex; align-items:center; gap:2px; }
.nav-item{ position:relative; }
nav.primary > .nav-item > a, nav.primary > .nav-item > button{
  text-decoration:none; font-size:14.5px; padding:9px 12px; border-radius:8px; color:var(--ink-soft); font-weight:500;
  transition:background .15s, color .15s; background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:4px;
}
nav.primary a:hover, nav.primary button:hover{ background:var(--surface-2); color:var(--ink); }
nav.primary a[aria-current="page"]{ color:var(--emerald); font-weight:700; }
.dropdown{
  position:absolute; top:100%; inset-inline-start:0; min-width:220px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s, transform .15s, visibility .15s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:9px 12px; border-radius:7px; text-decoration:none; font-size:14px; color:var(--ink); }
.dropdown a:hover{ background:var(--surface-2); }
.head-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;
}
.icon-btn:hover{ border-color:var(--emerald); }
.lang-select{
  border:1px solid var(--border); background:var(--surface); border-radius:10px; padding:8px 10px; font-size:13px; cursor:pointer;
}
.hamburger{ display:none; }

/* Mobile nav drawer */
#mobileNav{
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:150; display:none;
}
#mobileNav.open{ display:block; }
.mobile-panel{
  position:absolute; top:0; inset-inline-end:0; width:min(320px,86vw); height:100%; background:var(--surface);
  padding:20px; overflow-y:auto; box-shadow:var(--shadow);
}
.mobile-panel .close-x{ display:flex; justify-content:flex-end; margin-bottom:14px; }
.mobile-panel a{ display:block; padding:12px 6px; text-decoration:none; font-size:15.5px; border-bottom:1px solid var(--border); color:var(--ink); }
.mobile-panel .grp-label{ font-family:var(--font-ui); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:16px 0 6px; }

/* ---------------- BREADCRUMBS ---------------- */
.breadcrumbs{ font-family:var(--font-ui); font-size:13px; color:var(--ink-soft); padding:10px 0; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.breadcrumbs a{ text-decoration:none; color:var(--ink-soft); }
.breadcrumbs a:hover{ color:var(--emerald); }
.breadcrumbs .sep{ opacity:.5; }
.breadcrumbs .current{ color:var(--ink); font-weight:600; }

/* ---------------- HERO / PAGE HEAD ---------------- */
.hero{ padding:44px 0 28px; text-align:center; }
.hero.compact{ padding:10px 0 10px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:12.5px; font-weight:600;
  letter-spacing:.04em; color:var(--emerald); background:color-mix(in srgb, var(--emerald) 12%, transparent);
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.hero h1{ font-size:clamp(32px,6vw,58px); line-height:1.15; margin-bottom:14px; }
.hero.compact h1{ font-size:clamp(24px,4vw,34px); margin-bottom:5px; }
.hero.compact .eyebrow{ margin-bottom:6px; }
.hero p.lead{ font-size:16.5px; color:var(--ink-soft); max-width:640px; margin:0 auto; line-height:1.8; }
.hero.compact p.lead{ font-size:14px; line-height:1.4; }

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface);
  color:var(--ink); padding:11px 18px; border-radius:10px; font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none;
  transition:background .15s, border-color .15s, transform .1s;
}
.btn:hover{ border-color:var(--emerald); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--emerald); border-color:var(--emerald); color:#fff; }
.btn.primary:hover{ background:var(--emerald-deep); border-color:var(--emerald-deep); }
.btn.ghost{ background:transparent; }
.btn.sm{ padding:8px 12px; font-size:13px; }

/* ---------------- TOOL CARD / TOOLBAR / EDITOR ---------------- */
.tool-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); margin:6px 0 16px; overflow:hidden;
}
.toolbar{
  display:flex; align-items:center; gap:4px; padding:6px 12px; border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
.toolbar::-webkit-scrollbar{ display:none; }
.tb-btn{
  display:flex; align-items:center; gap:6px; white-space:nowrap; border:none; background:transparent; cursor:pointer;
  padding:7px 10px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--ink-soft);
}
.tb-btn:hover{ background:var(--surface-2); color:var(--ink); }
.tb-btn.primary{ background:var(--emerald); color:#fff; }
.tb-btn.primary:hover{ background:var(--emerald-deep); }
.tb-sep{ width:1px; height:20px; background:var(--border); margin:0 4px; flex:none; }
.tb-group{ display:flex; align-items:center; }

/* Workspace: editor + keyboard as one shared two-panel tool.
   Stacked by default (mobile/tablet); becomes a side-by-side desktop
   layout at the --workspace-bp breakpoint below, so the full keyboard
   and the editor are visible together without scrolling between them. */
.workspace{ display:flex; flex-direction:column; }

.editor-area{ padding:12px; }
.editor{
  width:100%; min-height:110px; resize:vertical; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg); padding:16px; font-size:21px; line-height:1.8; font-family:var(--font-ar-body);
  color:var(--ink); outline:none;
}
.editor:focus{ border-color:var(--emerald); box-shadow:0 0 0 3px color-mix(in srgb, var(--emerald) 18%, transparent); }
.editor[dir="ltr"]{ font-family:var(--font-ui); }
.editor-meta{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-soft); margin-top:4px; font-family:var(--font-ui); }
#dirIndicator{ font-weight:600; }

.kb-panel{ border-top:1px solid var(--border); background:var(--surface-2); padding:8px 10px; }
.kb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; flex-wrap:wrap; gap:8px; }
.mode-toggle{ display:inline-flex; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:3px; }
.mode-toggle button{
  border:none; background:transparent; padding:5px 11px; border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-soft);
}
.mode-toggle button.active{ background:var(--emerald); color:#fff; }

.kb-group{ margin-bottom:6px; }
.kb-group:last-child{ margin-bottom:0; }
.kb-row-divider{ margin-top:4px; padding-top:5px; border-top:1px dashed var(--border); }
.kb-group-numerals .key, .kb-group-punct .key{ max-width:52px; }
.kb-row{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-bottom:4px; row-gap:5px; }
.key{
  position:relative; flex:1; max-width:60px; min-width:30px; height:42px; border:1px solid var(--border);
  background:var(--surface); border-radius:8px; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  justify-content:center; font-family:var(--font-ar-body); font-size:17px; font-weight:500; color:var(--ink);
  box-shadow:0 1px 0 var(--border); transition:transform .06s, background .15s;
}
.key:hover{ border-color:var(--emerald); }
.key:active, .key.pressed{ transform:translateY(2px); background:var(--gold-soft); box-shadow:none; }
.key:focus-visible{ outline:2px solid var(--emerald); outline-offset:1px; }
.key .hint{ font-family:var(--font-ui); font-size:8.5px; color:var(--ink-soft); margin-top:1px; }
.key.wide{ max-width:120px; flex:1.6; font-size:13px; font-family:var(--font-ui); height:44px; }
.key.space{ max-width:none; flex:6; font-size:12px; font-family:var(--font-ui); color:var(--ink-soft); height:44px; }
.key .dot{ position:absolute; top:4px; inset-inline-end:6px; width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:0; }
.key.has-alt .dot{ opacity:1; }
.key-diacritic{ max-width:52px; }
.key-diacritic .diacritic-preview{ font-size:19px; line-height:1; color:var(--emerald); }
.key-diacritic .hint{ font-size:8px; white-space:nowrap; }
.translit-note{ font-size:13px; color:var(--ink-soft); text-align:center; padding:10px 0; font-family:var(--font-ui); }

/* ---------------- SECTIONS / CARDS ---------------- */
.section{ padding:48px 0; }
.section-head{ text-align:center; max-width:660px; margin:0 auto 34px; }
.section-head.left{ text-align:start; margin:0 0 24px; }
.section-head .kicker{ font-family:var(--font-ui); font-size:12.5px; font-weight:700; color:var(--gold); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; display:block; }
.section-head h2{ font-size:clamp(24px,4vw,34px); margin-bottom:10px; }
.section-head p{ color:var(--ink-soft); font-size:15.5px; line-height:1.8; }

.grid-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px;
  text-decoration:none; display:block; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--emerald); }
.card .ic{ width:42px; height:42px; border-radius:11px; background:color-mix(in srgb, var(--emerald) 14%, transparent); color:var(--emerald); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:14px; }
.card h3{ font-size:18px; margin-bottom:6px; font-family:var(--font-ar-body); font-weight:700; }
.card p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.7; }

.content-block{ font-size:15.5px; line-height:1.95; color:var(--ink-soft); }
.content-block h2{ color:var(--ink); font-size:24px; margin:34px 0 12px; }
.content-block h3{ color:var(--ink); font-size:19px; margin:24px 0 8px; }
.content-block ul{ padding-inline-start:22px; }
.content-block li{ margin-bottom:6px; }

/* ---------------- TABLE ---------------- */
.map-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.map-table th, .map-table td{ padding:11px 14px; text-align:center; border-bottom:1px solid var(--border); font-size:14px; }
.map-table th{ background:var(--surface-2); font-family:var(--font-ui); font-weight:600; font-size:12.5px; color:var(--ink-soft); }
.map-table tr:last-child td{ border-bottom:none; }
.map-table .lat{ font-family:var(--font-mono); color:var(--gold); font-weight:600; }
.map-wrap{ overflow-x:auto; border-radius:var(--radius-md); }

/* ---------------- DEMO / NOTICE ---------------- */
.demo-box{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow); }
.demo-in, .demo-out{ width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; font-size:20px; min-height:90px; background:var(--bg); }
.demo-out{ margin-top:14px; color:var(--emerald-deep); }
html[data-theme="dark"] .demo-out{ color:var(--emerald); }
.notice{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-soft); background:var(--gold-soft); border-radius:var(--radius-sm); padding:12px 14px; margin-top:14px; font-family:var(--font-ui); }
.notice.info{ background:color-mix(in srgb, var(--emerald) 12%, transparent); }
.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-ui); font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; }
.badge.live{ background:color-mix(in srgb, var(--emerald) 16%, transparent); color:var(--emerald); }
.badge.preview{ background:var(--gold-soft); color:var(--gold); }
.badge.planned{ background:var(--surface-2); color:var(--ink-soft); }

/* ---------------- STATS / TYPING TEST ---------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; text-align:center; }
.stat .num{ font-family:var(--font-mono); font-size:28px; font-weight:600; color:var(--emerald); }
.stat .lbl{ font-family:var(--font-ui); font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top:4px; }
.prompt-text{ font-size:22px; line-height:2; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; }
.prompt-text span.correct{ color:var(--emerald); }
.prompt-text span.wrong{ color:var(--danger); text-decoration:underline; }
.prompt-text span.pending{ color:var(--ink-soft); }
.result-panel{ display:none; text-align:center; padding:30px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.result-panel.show{ display:block; }
.duration-select{ display:flex; gap:8px; justify-content:center; margin-bottom:16px; flex-wrap:wrap; }
.duration-select button{ border:1px solid var(--border); background:var(--surface); padding:8px 16px; border-radius:999px; cursor:pointer; font-family:var(--font-ui); font-size:13px; }
.duration-select button.active{ background:var(--emerald); color:#fff; border-color:var(--emerald); }

/* ---------------- ALPHABET ---------------- */
.alpha-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; }
.letter-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 8px; text-align:center; cursor:pointer; }
.letter-card:hover{ border-color:var(--emerald); }
.letter-card.selected{ border-color:var(--emerald); box-shadow:0 0 0 2px color-mix(in srgb, var(--emerald) 25%, transparent); }
.speak-status{ font-size:12.5px; color:var(--ink-soft); flex-basis:100%; }
.speak-status:empty{ display:none; }
.speak-status.is-error{ color:var(--danger); }
.letter-card .big{ font-size:28px; font-family:var(--font-ar-display); }
.letter-card .translit{ font-family:var(--font-ui); font-size:11px; color:var(--ink-soft); margin-top:4px; }
.letter-detail{ display:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; margin-top:20px; }
.letter-detail.show{ display:block; }
.form-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.form-item{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; text-align:center; }
.form-item .glyph{ font-size:30px; font-family:var(--font-ar-display); }
.form-item .lbl{ font-family:var(--font-ui); font-size:11px; color:var(--ink-soft); margin-top:6px; }

/* ---------------- FAQ ---------------- */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ width:100%; text-align:start; background:none; border:none; padding:18px 4px; font-size:16px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--ink-soft); font-size:14.5px; line-height:1.8; }
.faq-item.open .faq-a{ max-height:320px; padding-bottom:18px; }
.faq-item.open .chev{ transform:rotate(180deg); }
.chev{ transition:transform .2s; flex:none; }

/* ---------------- FORMS ---------------- */
.form-field{ margin-bottom:16px; }
.form-field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 14px; font-size:14.5px; background:var(--surface);
}
.form-field input:focus, .form-field textarea:focus{ border-color:var(--emerald); }
.form-hint{ font-size:12px; color:var(--ink-soft); margin-top:5px; }
.form-error{ font-size:12px; color:var(--danger); margin-top:5px; display:none; }
.form-field.invalid input, .form-field.invalid textarea{ border-color:var(--danger); }
.form-field.invalid .form-error{ display:block; }

/* ---------------- EMPTY / LOADING / ERROR STATES ---------------- */
.state-panel{ text-align:center; padding:44px 20px; color:var(--ink-soft); }
.state-panel .icon{ font-size:34px; margin-bottom:12px; }
.state-panel h3{ font-family:var(--font-ui); font-size:16px; color:var(--ink); margin-bottom:6px; }
.spinner{ width:22px; height:22px; border:3px solid var(--border); border-top-color:var(--emerald); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------- MODAL ---------------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:250; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--surface); border-radius:var(--radius-md); padding:26px; max-width:420px; width:100%; box-shadow:var(--shadow); }
.modal h3{ margin-bottom:10px; }
.modal p{ color:var(--ink-soft); font-size:14px; line-height:1.7; }
.modal .actions{ display:flex; gap:10px; margin-top:18px; justify-content:flex-end; }

/* ---------------- FOOTER ---------------- */
footer.site{ border-top:1px solid var(--border); padding:44px 0 26px; margin-top:40px; background:var(--surface); }
.foot-grid{ display:grid; grid-template-columns:2fr repeat(4,1fr); gap:28px; margin-bottom:30px; }
.foot-grid h4{ font-family:var(--font-ui); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:12px; }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.foot-grid a{ text-decoration:none; font-size:14px; color:var(--ink); }
.foot-grid a:hover{ color:var(--emerald); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:20px; border-top:1px solid var(--border); font-size:12.5px; color:var(--ink-soft); font-family:var(--font-ui); flex-wrap:wrap; gap:10px; }

/* ---------------- TOAST ---------------- */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg);
  padding:12px 20px; border-radius:10px; font-size:13.5px; font-family:var(--font-ui); opacity:0; pointer-events:none; transition:all .25s ease; z-index:300;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------------- RESPONSIVE ---------------- */

/* Desktop: editor + keyboard side by side so both are visible together,
   without scrolling between them. */
@media (min-width:900px){
  .workspace{ flex-direction:row; align-items:stretch; }
  .editor-area{ flex:0 0 38%; max-width:38%; border-inline-end:1px solid var(--border); }
  .kb-panel{ flex:1 1 62%; border-top:none; max-height:calc(100vh - 230px); overflow-y:auto; }
}

@media (max-width:860px){
  nav.primary{ display:none; }
  .hamburger{ display:flex; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------------- MOBILE KEYBOARD (<=899px) ----------------
   Editor stacks above the keyboard (DOM order already puts .editor-area
   before .kb-panel, and .workspace is column-direction by default), the
   keyboard uses the full viewport width, and every logical row stays a
   single row. Vertical rhythm is tightened throughout so the whole
   keyboard, down to Enter/Space/Delete, is reachable with minimal
   scrolling.

   THE CORE FIX: each .kb-row is CSS Grid, not flexbox. Grid has no
   wrapping mechanism at all — there is no flex-wrap equivalent that
   could ever let an individual key spill onto a second line. The row's
   own key count (data-defined in keyboard-tool.js, e.g. 12/12/10 for
   the three Arabic letter rows) sets grid-template-columns inline per
   row, and every key simply shrinks to fill its column. CSS only
   controls how each row's fixed columns scale to the available width —
   it never decides how many keys land on a row. */
@media (max-width:899px){
  .wrap, .wrap-narrow{ padding:0 10px; }
  .tool-card{ border-radius:16px; margin:6px 0 14px; }

  .editor-area{ padding:10px; }
  .editor{ height:180px; min-height:110px; font-size:19px; padding:14px; }
  .editor-meta{ font-size:11.5px; }

  .kb-panel{ width:100%; max-width:none; padding:8px 8px 10px; overflow-x:hidden; }
  .kb-head{ margin-bottom:4px; gap:6px; }
  .mode-toggle button{ padding:5px 9px; font-size:11.5px; }
  .translit-note{ font-size:11px; padding:5px 0; }

  .kb-group{ margin-bottom:5px; }
  .kb-row-divider{ margin-top:3px; padding-top:4px; }

  /* grid-template-columns is set per row inline (see addRow() in
     keyboard-tool.js); this just turns on grid and removes anything
     that could cause a second line. */
  .kb-row{
    display:grid; grid-auto-flow:column; gap:3px; margin-bottom:3px; width:100%;
    justify-content:stretch;
  }
  /* The hamza-forms row uses a capped column width (set inline) instead
     of stretching to the full keyboard width, so it reads as a small,
     deliberately centered group rather than 3 oversized keys. */
  .kb-row-compact{ justify-content:center; }

  .key{
    min-width:0; max-width:none; width:100%;
    height:44px; padding:0 1px; font-size:16px;
  }
  .key .hint{ font-size:7.5px; }
  .key.wide{ font-size:11px; height:44px; }
  .key.space{ font-size:11px; height:44px; }
  .key-diacritic .diacritic-preview{ font-size:16px; }
  .key-diacritic .hint{ font-size:7px; }
}

/* Smaller phones: keys stay tappable and legible, just slightly more
   compact — width is spent on the Arabic glyph, not on padding. */
@media (max-width:400px){
  .key{ height:42px; font-size:14.5px; padding:0; }
  .key .hint{ font-size:7px; }
  .key.wide{ font-size:10.5px; height:42px; }
  .key.space{ font-size:10.5px; height:42px; }
  .key-diacritic .diacritic-preview{ font-size:15px; }
}

@media (max-width:340px){
  .key{ height:40px; font-size:13.5px; }
  .key.wide, .key.space{ height:40px; }
}

@media (max-width:520px){
  .foot-grid{ grid-template-columns:1fr; }
}