/* ClavierEnArabe — warm sand paper, deep teal ink, one ochre accent. The keyboard is the hero: full width, big Arabic
   glyphs (Noto Naskh Arabic, self-hosted), Latin hints in the key corner. Fonts are self-hosted (OFL, see fonts/LICENSES.txt). */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Naskh Arabic";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/naskh-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --bg:#f7f2e8;--paper:#fffdf8;--surface:#ffffff;--soft:#efe7d6;--soft2:#faf6ee;--line:#e3d8c2;
  --ink:#12312e;--muted:#5b6b66;--acc:#0d6b5f;--acc-dark:#08524a;--acc-ink:#ffffff;--acc-soft:#d8ece6;
  --ochre:#b5762a;--ochre-soft:#f6e6c9;--key:#ffffff;--key-edge:#d9ccb1;--key-hint:#8a7a5c;
  --foot:#0f2a27;--foot-ink:#eef3ef;--foot-muted:#a9bdb6;
  --shadow:0 1px 2px rgba(18,49,46,.06),0 10px 28px rgba(18,49,46,.08);--shadow-lg:0 2px 4px rgba(18,49,46,.06),0 22px 54px rgba(18,49,46,.13);
  --ui:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --arab:"Noto Naskh Arabic","Amiri","Geeza Pro","Segoe UI","Tahoma",serif;
  --pill:999px;--measure:70ch;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c1715;--paper:#111f1d;--surface:#14241f;--soft:#1c2f2a;--soft2:#12201d;--line:#28403a;
  --ink:#e8efe9;--muted:#a6b8b1;--acc:#4cc2ad;--acc-dark:#7ad6c4;--acc-ink:#062320;--acc-soft:#173d36;
  --ochre:#e0a75a;--ochre-soft:#3a2d18;--key:#1b2d29;--key-edge:#2f4842;--key-hint:#b9a985;
  --foot:#08110f;--foot-ink:#e8efe9;--foot-muted:#8fa69e;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.4);--shadow-lg:0 2px 4px rgba(0,0,0,.4),0 22px 54px rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1715;--paper:#111f1d;--surface:#14241f;--soft:#1c2f2a;--soft2:#12201d;--line:#28403a;
  --ink:#e8efe9;--muted:#a6b8b1;--acc:#4cc2ad;--acc-dark:#7ad6c4;--acc-ink:#062320;--acc-soft:#173d36;
  --ochre:#e0a75a;--ochre-soft:#3a2d18;--key:#1b2d29;--key-edge:#2f4842;--key-hint:#b9a985;
  --foot:#08110f;--foot-ink:#e8efe9;--foot-muted:#8fa69e;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--ui);-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em}
[lang=ar],bdi[lang=ar]{font-family:var(--arab);font-size:1.12em;line-height:1.5}
a{color:var(--acc-dark);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--ink)}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
a.skip:focus{inset-inline-start:16px;top:8px;width:auto;height:auto;margin:0;clip:auto;clip-path:none;white-space:normal;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:var(--pill);z-index:20}
:focus-visible{outline:3px solid var(--ochre);outline-offset:2px;border-radius:6px}
.muted{color:var(--muted)}.small{font-size:14px}
code{font-size:.92em;background:var(--soft);padding:1px 6px;border-radius:6px}

/* header */
header.site{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap;padding-block:8px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.logo b{color:var(--ochre);font-weight:800}
.logo svg{width:34px;height:34px;flex:none}
nav.main{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
nav.main::-webkit-scrollbar{display:none}
nav.main a{white-space:nowrap;text-decoration:none;font-weight:700;font-size:15px;padding:8px 14px;border-radius:10px;color:var(--ink)}
nav.main a:hover{background:var(--soft)}
nav.main a[aria-current]{background:var(--acc);color:var(--acc-ink)}
.lang select{font:inherit;font-size:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:8px 12px}
@media (max-width:760px){nav.main{order:3;flex-basis:100%}}

/* hero + tool */
.hero{background:linear-gradient(180deg,var(--paper),var(--bg));border-bottom:1px solid var(--line)}
.hero .wrap{padding-block:30px 36px}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
h1{font-size:clamp(30px,4.6vw,50px);line-height:1.08;margin:0 0 10px;font-weight:800;max-width:24ch}
.lead{font-size:clamp(16px,2vw,19px);line-height:1.55;color:var(--muted);max-width:62ch;margin:0 0 22px}
.btn{font:inherit;font-weight:700;border:0;border-radius:12px;padding:12px 22px;cursor:pointer;text-decoration:none;display:inline-flex}
.btn-pri{background:var(--acc);color:var(--acc-ink)}

.kb-tool{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:14px}
.kb-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;background:var(--soft);border-radius:12px;padding:3px;gap:2px}
.seg button,.tg,.kb-actions button{font:inherit;font-size:14px;font-weight:700;border:0;cursor:pointer;color:var(--ink);background:transparent;border-radius:10px;padding:9px 13px;min-height:40px;line-height:1.2}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--acc-dark);box-shadow:var(--shadow)}
.tg{display:inline-flex;align-items:center;gap:7px;background:var(--soft2);box-shadow:inset 0 0 0 1px var(--line)}
.tg[aria-pressed=true]{background:var(--acc-soft);color:var(--acc-dark);box-shadow:inset 0 0 0 1px var(--acc)}
.tg:disabled{opacity:.55;cursor:default}
.ic{width:18px;height:18px;flex:none}
.kb-tool textarea{width:100%;min-height:150px;resize:vertical;font:500 30px/1.7 var(--arab);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:14px 18px;text-align:right}
.kb-tool textarea:focus{outline:none;border-color:var(--acc)}
.kb-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kb-actions button{background:var(--soft2);box-shadow:inset 0 0 0 1px var(--line)}
.kb-actions button:hover{background:var(--soft)}
.kb-actions button.pri{background:var(--acc);color:var(--acc-ink);box-shadow:none;padding-inline:20px}
.kb-actions button.pri:hover{background:var(--acc-dark)}
.kb-actions .sep{flex:1}
.sz{display:inline-flex;gap:4px}
.kb-status{display:flex;justify-content:space-between;gap:10px;min-height:20px;font-size:14px;color:var(--muted)}
.kb-msg{margin:0;color:var(--acc-dark);font-weight:700}
.kb-pad{display:flex;flex-direction:column;gap:10px}
.kbd{display:flex;flex-direction:column;gap:6px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.kr{display:flex;gap:6px;flex-wrap:wrap}
.k{position:relative;flex:1 0 40px;min-width:40px;min-height:52px;display:flex;align-items:center;justify-content:center;background:var(--key);border:1px solid var(--key-edge);border-bottom-width:3px;border-radius:10px;cursor:pointer;color:var(--ink);font:inherit;padding:0}
.k:hover{background:var(--soft2)}
.k:active,.k.hit{transform:translateY(1px);border-bottom-width:2px;background:var(--acc-soft)}
.k .ar{font:500 26px/1 var(--arab)}
.k .lat{position:absolute;top:3px;left:6px;font:700 11px/1 var(--ui);color:var(--key-hint)}
.k.mark .ar{color:var(--ochre)}
.k.wide{flex:1.6 0 60px;font-size:18px;font-weight:700;background:var(--soft2)}
.k.shift[aria-pressed=true]{background:var(--ochre-soft);border-color:var(--ochre)}
.k.space{flex:1 1 100%;min-height:46px;font-weight:700;color:var(--muted)}
.signs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--soft2);border-radius:14px;padding:6px 10px}
.signs-l{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);min-width:96px}
.signs div{display:flex;flex-wrap:wrap;gap:5px}
.signs button{min-width:42px;min-height:42px;border:1px solid var(--key-edge);background:var(--key);border-radius:9px;cursor:pointer;color:var(--ink);font:500 24px/1 var(--arab)}
.signs button:hover{background:var(--acc-soft)}
.kb-tool[data-mode=harakat] .signs.harakat{order:-1;background:var(--ochre-soft);box-shadow:inset 0 0 0 2px var(--ochre)}
.kb-tool[data-mode=harakat] .signs.harakat button{color:var(--ochre)}
.only{font-size:14px;color:var(--muted);display:none;gap:8px;align-items:center}
@media (pointer:coarse){.only{display:flex}}
.trust{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:0;font-size:14px;font-weight:600;color:var(--muted)}
.trust li::before{content:"✓ ";color:var(--acc);font-weight:800}
@media (max-width:560px){.kb-tool{padding:10px;border-radius:16px}.kr{gap:4px}.k{min-height:46px}.k .ar{font-size:22px}.kb-tool textarea{font-size:26px}.signs-l{min-width:0;flex-basis:100%}}

/* steps band */
.steps-band{border-bottom:1px solid var(--line);background:var(--paper)}
.steps-band .wrap{padding-block:34px 38px}
.steps-band h2{font-size:clamp(23px,3vw,30px);margin:0 0 18px;line-height:1.2}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
ol.steps li{counter-increment:s;display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
ol.steps li::before{content:counter(s);width:34px;height:34px;border-radius:10px;background:var(--acc);color:var(--acc-ink);font:800 16px/34px var(--ui);text-align:center}
ol.steps span{color:var(--muted);font-size:15px}
.content ol.steps{display:block;counter-reset:s}
.content ol.steps li{display:block;position:relative;padding:12px 14px 12px 56px;margin:8px 0;max-width:none}
.content ol.steps li::before{position:absolute;left:12px;top:10px}

/* reading layout */
main{padding-block:24px 64px}
.layout{display:grid;gap:28px}
@media (min-width:1100px){.layout.has-toc{grid-template-columns:250px minmax(0,1fr);gap:52px;align-items:start}}
.toc-side{min-width:0}
@media (min-width:1100px){.toc-side{position:sticky;top:88px;max-height:calc(100vh - 100px);overflow:auto}}
details.toc{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:2px 16px}
details.toc summary{cursor:pointer;font:800 13px/1 var(--ui);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:14px 0}
details.toc ol{list-style:none;margin:0 0 12px;padding:0;font-size:14.5px;line-height:1.4}
details.toc a{display:block;padding:5px 0;color:var(--muted);text-decoration:none}
details.toc a:hover{color:var(--acc-dark)}
.content{min-width:0;max-width:780px}
.layout:not(.has-toc) .content{margin-inline:auto}
.content h2{font-size:clamp(24px,3vw,31px);line-height:1.2;margin:48px 0 12px;font-weight:800}
.content > section:first-child > h2{margin-top:4px}
.content h3{font-size:19px;margin:26px 0 8px;line-height:1.3}
.content p,.content li{max-width:var(--measure)}
.content ul,.content ol{padding-inline-start:22px}
.content li{margin:6px 0}
.content li::marker{color:var(--ochre)}
.ar-big{font:500 34px/1.7 var(--arab);text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:12px 16px;margin:18px 0}
.table-wrap{overflow-x:auto;margin:18px 0;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:start;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--paper);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
tr:last-child td{border-bottom:0}
caption{caption-side:bottom;padding:8px 14px;text-align:start;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
table.kbt td{font-size:16px}
figure{margin:24px 0}
figure img{border-radius:16px;display:block;width:100%;height:auto;border:1px solid var(--line);background:#f7f2e8}
figcaption{font-size:14px;color:var(--muted);margin-top:8px}
blockquote{margin:24px 0;padding:16px 20px;background:var(--ochre-soft);border-inline-start:4px solid var(--ochre);border-radius:0 14px 14px 0}
blockquote p{margin:0 0 6px;font-size:17px}
blockquote footer{font-size:14px;color:var(--muted)}
.note{background:var(--acc-soft);border-radius:14px;padding:12px 16px}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;list-style:none;padding:14px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
details.faq summary h3{margin:0;font-size:17px;font-weight:700;letter-spacing:0}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:8px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:700}
details.faq[open] summary::after{content:"−";background:var(--acc-soft)}
details.faq p{margin:0 0 16px;color:var(--muted)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:18px 0}
.cards a{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.cards a:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cic{width:38px;height:38px;padding:8px;border-radius:10px;background:var(--acc-soft);color:var(--acc-dark)}
.cards a:nth-child(2n) .cic{background:var(--ochre-soft);color:var(--ochre)}
.cards strong{font-size:17px}
.cards span{color:var(--muted);font-size:15px;line-height:1.5}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0 !important}
.chip-list li{margin:0}
.chip-list a{display:inline-block;padding:7px 13px;border-radius:10px;background:var(--soft);text-decoration:none;font-weight:600;font-size:15px;color:var(--ink)}
.chip-list a:hover{background:var(--acc-soft)}
.sources{font-size:15px}

/* footer */
footer.site{background:var(--foot);color:var(--foot-ink);font-size:15px}
footer.site .wrap{padding-block:44px 26px}
.foot-brand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid color-mix(in srgb,var(--foot-ink) 14%,transparent)}
.foot-brand .logo{color:var(--foot-ink)}
.foot-brand p{margin:0;color:var(--foot-muted);max-width:60ch}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px}
footer.site strong{font:800 13px/1 var(--ui);text-transform:uppercase;letter-spacing:.08em;color:var(--foot-muted)}
footer.site ul{list-style:none;padding:0;margin:12px 0 0}
footer.site li{margin:7px 0}
footer.site a{text-decoration:none;color:var(--foot-ink);opacity:.88}
footer.site a:hover{opacity:1;text-decoration:underline}
footer .disc{font-size:14px;color:var(--foot-muted);margin-top:28px;border-top:1px solid color-mix(in srgb,var(--foot-ink) 14%,transparent);padding-top:18px;max-width:90ch}
footer .disc a{color:var(--foot-ink)}
footer .small{color:var(--foot-muted)}

/* language suggestion bar */
.langbar{position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:8px;max-width:440px;margin-inline:auto;background:var(--ink);color:var(--bg);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px 6px 6px 18px;font-weight:700}
.langbar a{flex:1;color:var(--bg);text-decoration:none;padding:9px 0}
.langbar button{flex:none;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--bg) 16%,transparent);color:var(--bg);border:0;font-size:22px;cursor:pointer}
/* phones: the keyboard comes right under the text box, the action buttons after it */
@media (max-width:700px){.kb-tool textarea{min-height:110px}.kb-status{order:1}.kb-pad{order:2}.kb-actions{order:3}.only{order:4}.trust{order:5}
.kb-tool[data-mode=harakat] .signs.harakat{order:0}.kb-actions button{padding:8px 11px}}

/* typing test (assets/typing.js): target text with per-character state, input line, read-only keyboard that shows the next key */
.tt-tool{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:14px;min-width:0}
.tt-tool [hidden]{display:none!important}
.tt-bar,.tt-opts,.tt-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.tt-tool .seg button,.tt-acts button{font:inherit;font-size:14px;font-weight:700;border:0;cursor:pointer;color:var(--ink);background:transparent;border-radius:10px;padding:9px 13px;min-height:40px;line-height:1.2}
.tt-acts>button{background:var(--soft2);box-shadow:inset 0 0 0 1px var(--line)}
.tt-acts>button.pri{background:var(--acc);color:var(--acc-ink);box-shadow:none;padding-inline:20px}
.tt-acts>button.pri:hover{background:var(--acc-dark)}
.tt-acts .sep{flex:1}
.tt-lab{font-size:13px;font-weight:700;color:var(--muted)}
.tt-lesson-l{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;max-width:100%}
.tt-lesson{font:inherit;font-size:15px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:8px 10px;max-width:100%;min-width:0}
.tt-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tt-stats div{background:var(--soft2);border:1px solid var(--line);border-radius:12px;padding:6px 8px;text-align:center;min-width:0}
.tt-stats span{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-stats b{display:block;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums}
.tt-text{position:relative;height:calc(3 * 1.9em);overflow:hidden;font:500 28px/1.9 var(--arab);color:var(--muted);background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:0 16px;white-space:pre-wrap;word-wrap:break-word;text-align:right;cursor:text}
.tt-text .tt-ok{color:var(--acc-dark)}
.tt-text .tt-bad{color:#b3261e;background:#fbe0dc;border-radius:3px}
.tt-text .tt-cur{color:var(--ink);background:var(--ochre-soft);box-shadow:inset 0 -3px 0 var(--ochre);border-radius:3px}
.tt-in{width:100%;resize:none;font:500 24px/1.6 var(--arab);color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:8px 14px;text-align:right;overflow:hidden;white-space:nowrap;height:58px}
.tt-in:focus{outline:none;border-color:var(--acc)}
.tt-in[readonly]{background:var(--soft2)}
.tt-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-size:14px;min-height:22px}
.tt-line p{margin:0}
.tt-next{font-weight:700;color:var(--acc-dark)}
.tt-src{color:var(--muted)}
.tt-res{background:var(--acc-soft);border-radius:16px;padding:14px 16px}
.tt-res p{margin:0 0 8px}
.tt-res-t{font-weight:800}
.tt-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:0 0 10px}
.tt-res-c{background:var(--surface);border-radius:12px;padding:10px;text-align:center}
.tt-res-c strong{display:block;font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.tt-res-c span{font-size:13px;color:var(--muted)}
.tt-top{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 8px}
.tt-top li{background:var(--surface);border-radius:10px;padding:4px 10px;font-size:14px;font-weight:600}
.tt-top .ar{font:500 22px/1 var(--arab);color:#b3261e}
.tt-res-n{font-size:13px;color:var(--muted)}
.tt-kbd{display:flex;flex-direction:column;gap:5px;user-select:none;-webkit-user-select:none;min-width:0}
.tt-kr{display:flex;gap:5px;min-width:0}
.tt-k{position:relative;flex:1 1 0;min-width:0;height:46px;display:flex;align-items:center;justify-content:center;background:var(--key);border:1px solid var(--key-edge);border-bottom:3px solid var(--key-edge);border-radius:9px;color:var(--ink)}
.tt-k .ar{font:500 22px/1 var(--arab)}
.tt-k .lat{position:absolute;top:3px;left:5px;font:700 10px/1 var(--ui);color:var(--key-hint)}
.tt-k[data-f="0"],.tt-k[data-f="7"]{border-bottom-color:#c9a6d9}
.tt-k[data-f="1"],.tt-k[data-f="6"]{border-bottom-color:#9fc3e6}
.tt-k[data-f="2"],.tt-k[data-f="5"]{border-bottom-color:#a8d5a2}
.tt-k[data-f="3"],.tt-k[data-f="4"]{border-bottom-color:#e8c27d}
.tt-k.tt-bump::after{content:"";position:absolute;bottom:5px;left:50%;width:12px;height:2px;margin-left:-6px;border-radius:2px;background:var(--muted)}
.tt-k.tt-wide{flex:1.6 1 0;font-weight:700;background:var(--soft2)}
.tt-k.tt-space{flex:1 1 100%;font-size:14px;font-weight:700;color:var(--muted)}
.tt-k.tt-hint{background:var(--ochre-soft);border-color:var(--ochre);box-shadow:0 0 0 2px var(--ochre)}
.tt-k.tt-hit{background:var(--acc-soft)}
@media (max-width:560px){.tt-tool{padding:10px;border-radius:16px}.tt-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.tt-stats b{font-size:18px}
.tt-text{font-size:23px}.tt-kr{gap:3px}.tt-kbd{gap:3px}.tt-k{height:38px;border-radius:7px}.tt-k .ar{font-size:17px}.tt-k .lat{font-size:9px;left:3px}
.tt-acts .sep{flex-basis:100%;height:0}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tt-text .tt-bad{color:#ffb4ab;background:#5c1c16}:root:not([data-theme="light"]) .tt-top .ar{color:#ffb4ab}}
:root[data-theme="dark"] .tt-text .tt-bad{color:#ffb4ab;background:#5c1c16}

/* keyboard fit (owner 10-28: «clavier katban kamla» on phone and desktop):
   rows never wrap, keys share the row width, and the keyboard sits right under the text box everywhere */
.kr{flex-wrap:nowrap}
.k{flex:1 1 0;min-width:0;min-height:46px}
.k.wide{flex:1.5 1 0;min-width:0}
.k.space{flex:6 1 0}
.kb-tool textarea{min-height:110px;height:120px}
@media (max-width:700px){
  .kb-tool{padding:8px;gap:8px}
  .kbd,.kr{gap:3px}
  .k{min-height:44px;border-radius:7px;border-bottom-width:2px}
  .k .ar{font-size:clamp(15px,5vw,22px)}
  .k .lat{font-size:8px;top:2px;left:3px}
  .k.wide{font-size:14px}
  .kb-tool textarea{min-height:88px;height:96px;font-size:24px;padding:10px 12px}
  .signs{gap:6px;padding:6px}
  .signs-l{min-width:0;width:100%}
  .signs div{gap:4px}
  .signs button{min-width:34px;min-height:38px;font-size:20px}
}
/* desktop: whole keyboard visible on load (tool pages: tighter hero, no empty status gap, one row of actions) */
@media (min-width:701px){
  .hero-tool .wrap{padding-block:16px 18px}
  .hero-tool h1{font-size:clamp(28px,3.2vw,40px);margin-bottom:6px;max-width:none}
  .hero-tool .lead{font-size:16px;margin-bottom:12px;max-width:90ch}
  .kb-tool{gap:8px}
  .kb-status{min-height:0}
  .kb-status:has(.kb-msg:empty):has(.kb-count:empty){display:none}
  .kb-actions{gap:5px}
  .kb-actions button{padding:6px 10px;font-size:14px}
  .k{min-height:44px}
}
@media (max-width:700px){
  .hero-tool .wrap{padding-block:12px 12px}
  .hero-tool h1{font-size:26px;margin-bottom:4px}
  .hero-tool .lead{font-size:15px;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (min-width:701px) and (max-height:800px){
  .hero-tool .lead{display:none}
  .k{min-height:40px}
}
@media (max-width:700px){
  .hero-tool .lead{display:none}
  .k{min-height:40px}
  .kb-tool textarea,.lk-tool textarea{min-height:76px;height:80px}
}
@media (min-width:701px) and (max-height:800px){
  .kb-tool[data-mode=harakat] .signs.harakat{order:0}
}
/* short screens (small phones, 720p laptops): a little less key height so the last row stays on screen */
@media (max-height:760px){.k{min-height:36px}.kb-tool textarea,.lk-tool textarea{height:72px;min-height:64px}.hero-tool h1{font-size:24px}}
/* named sign buttons (harakat, hamza): glyph on top, its name below */
.signs.named div{gap:6px}
.signs.named button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:64px;min-height:56px;padding:6px 6px 5px}
.signs.named button .sn{font:700 10.5px/1.15 var(--ui);color:var(--muted);text-align:center;max-width:72px;white-space:normal}
.kb-tool[data-mode=harakat] .signs.harakat button .sn{color:var(--ochre)}
@media (max-width:700px){
  .signs.named div{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%}
  .signs.hamza.named div{grid-template-columns:repeat(4,1fr)}
  .signs.named button{min-width:0;min-height:52px;padding:4px 2px}
  .signs.named button .sn{font-size:9.5px;max-width:none}
}

/* action buttons (owner 10-29): icon + label, three groups: edit · use · send */
.kb-actions,.lk-tool .kb-actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.kb-actions .ag{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kb-actions .ag + .ag{padding-inline-start:14px;border-inline-start:1px solid var(--line)}
.kb-actions .ag-send{margin-inline-start:auto}
.kb-actions button{display:inline-flex;align-items:center;gap:7px}
.kb-actions button .ic{width:18px;height:18px;flex:none}
.kb-actions .sz button{min-width:40px;justify-content:center}
.kb-actions button[hidden]{display:none}
@media (max-width:700px){
  .kb-actions{gap:8px}
  .kb-actions .ag{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
  .kb-actions .ag + .ag{padding-inline-start:0;border-inline-start:0;padding-top:8px;border-top:1px solid var(--line)}
  .kb-actions .ag-send{margin-inline-start:0}
  .kb-actions .ag button{flex-direction:column;gap:4px;padding:8px 4px;min-height:58px;font-size:12px;justify-content:center;text-align:center}
  .kb-actions .ag button .ic{width:20px;height:20px}
  .kb-actions .ag button.pri{padding-inline:4px}
  .kb-actions .ag-out .sz{display:flex;gap:6px}
  .kb-actions .ag-out .sz button{min-height:58px;flex:1}
}
.kb-actions .ag-send{border-inline-start:0!important;padding-inline-start:0!important}
@media (max-width:700px){.kb-actions .ag{align-items:stretch}.kb-actions .ag button{min-height:62px}.kb-actions .ag-out .sz button{min-height:62px}}

/* one keyboard (owner 10-29): harakat / hamza / punctuation / dialect letters are a second layer of the keyboard */
.kb-pad > .signs{display:none}
.kb-layer{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.kb-layer[hidden]{display:none}
.kb-layer .signs{display:contents}
.kb-layer .signs-l{display:none}
.kb-layer .signs div{display:contents}
.kb-layer .signs button,.kb-layer .signs.named button{min-width:0;min-height:46px;width:100%;padding:3px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:10px}
.kb-layer .signs button .sn{font-size:9.5px;max-width:none}
.kb-layer .signs.harakat button{background:var(--ochre-soft)}
.k.lay{flex:1.6 1 0;font:500 18px/1 var(--arab);background:var(--ochre-soft);color:var(--ink)}
.k.lay[aria-pressed=true]{background:var(--acc);color:var(--acc-ink)}
.kb-tool[data-mode=harakat] .k.lay{box-shadow:inset 0 0 0 2px var(--ochre)}
.kb-actions .more{display:none}
@media (max-width:700px){
  .kb-layer{grid-template-columns:repeat(8,1fr);gap:4px}
  .kb-layer .signs button,.kb-layer .signs.named button{min-height:42px;font-size:18px}
  .kb-layer .signs button .sn{font-size:8px;line-height:1.05}
  /* toolbar right under the text box: Copier · Écouter · Annuler · Effacer · Plus; the rest opens with Plus */
  .kb-tool .kb-actions{order:0;display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
  .kb-tool .kb-status{order:1}.kb-tool .kb-pad{order:2}
  .kb-actions .ag{display:contents}
  .kb-actions .ag + .ag{border:0;padding:0}
  .kb-actions .ag button,.kb-actions .more{display:none;flex-direction:column;gap:3px;min-height:50px;padding:6px 2px;font-size:11px;justify-content:center;align-items:center;text-align:center}
  .kb-actions [data-act=copy]{display:flex;order:1}
  .kb-actions [data-act=speak]{display:flex;order:2}
  .kb-actions [data-act=undo]{display:flex;order:3}
  .kb-actions [data-act=clear]{display:flex;order:4}
  .kb-actions .more{display:flex;order:5}
  .kb-actions [data-act=speak][hidden]{display:none}
  .kb-actions .sz{display:none}
  .kb-actions.open .ag button{display:flex}
  .kb-actions.open .sz{display:flex;order:20;grid-column:span 2;gap:5px}
  .kb-actions.open .sz button{flex:1;min-height:50px}
  .kb-actions .ag button,.kb-actions .more{order:10}
  .kb-actions [data-act=copy]{order:1}.kb-actions [data-act=speak]{order:2}.kb-actions [data-act=undo]{order:3}.kb-actions [data-act=clear]{order:4}.kb-actions .more{order:5}
  .kb-actions .more[aria-expanded=true]{background:var(--acc-soft)}
}
@media (max-width:700px){
  .kb-actions .ag [data-act=copy],.kb-actions .ag [data-act=speak],.kb-actions .ag [data-act=undo],.kb-actions .ag [data-act=clear]{display:flex}
  .kb-actions .ag [data-act=copy]{order:1}.kb-actions .ag [data-act=speak]{order:2}.kb-actions .ag [data-act=undo]{order:3}.kb-actions .ag [data-act=clear]{order:4}
  .kb-actions .ag [data-act=speak][hidden]{display:none}
}
.kbd .kr[hidden]{display:none}
@media (max-width:700px){
  .kb-actions .ag-out .sz{display:none}
  .kb-actions.open .ag-out .sz{display:flex;order:20;grid-column:span 2;gap:5px}
  /* mode bar on one line: the physical-keyboard toggle is useless on a touch screen */
  .kb-bar{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .kb-bar::-webkit-scrollbar{display:none}
  .kb-bar .seg button{padding:8px 9px;font-size:13px}
  .kb-bar .tg{padding:8px 9px;font-size:13px;white-space:nowrap;flex:none}
}
@media (pointer:coarse) and (max-width:700px){.kb-bar .tg[data-act=capture]{display:none}}
@media (max-width:700px){
  .kb-tool .kb-status:has(.kb-msg:empty):has(.kb-count:empty){display:none}
  /* language keyboards (lk-tool) keep their own full toolbar: the Arabic compact rules must not hide it */
  .lk-tool .kb-actions{display:flex;flex-direction:column;gap:8px}
  .lk-tool .kb-actions .ag{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
  .lk-tool .kb-actions .ag button{display:flex;order:0}
  .lk-tool .kb-actions .ag-out .sz{display:flex;gap:6px}
}