/* ArabicKeyboard.io uses the shared keyboard shell and a clear blue accent. */
:root[data-theme="arabic"] { --accent:#30A1FF; --accent-hover:#1479ce; --accent-readable:#176caf; --accent-soft:#edf7ff; --accent-rgb:48,161,255; }
:root { background:#fbfcfe; }
.container { width:min(1120px,calc(100% - 64px)); }
.header-inner { max-width:1248px; height:84px; }
.brand-logo { width:258px; height:auto; }
.header-editor-link { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:550; color:var(--muted); padding:10px; border-radius:10px; }
.header-editor-link .icon { width:19px; color:var(--accent-readable); }
.header-editor-link:hover { background:var(--canvas); }
.language-trigger { background:var(--surface); }
.workspace-section { max-width:740px; padding-top:30px; scroll-margin-top:20px; }
#workspace:focus { outline:none; }
.workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 3px 12px; font-size:13px; font-weight:600; }
.workspace-heading>span { display:flex; align-items:center; gap:8px; }
.workspace-heading .icon { color:var(--accent-readable); width:18px; }
.workspace-heading>.workspace-local { color:var(--muted); font-size:10px; font-weight:400; }
.workspace-local i { width:5px; height:5px; border-radius:50%; background:#34a37b; }
#keyboardApp { --keyboard-accent:var(--accent-hover); --keyboard-focus:var(--accent); --keyboard-soft:var(--accent-soft); --keyboard-active-ink:var(--accent-readable); --keyboard-hover:#e1f2ff; --keyboard-border:#d9e3ee; --keyboard-tray:#edf2f8; --keyboard-key-edge:#c7d4e3; --keyboard-key-base:#b7c6d8; --keyboard-toolbar:#f7f9fc; --keyboard-modifier:#e0e9f3; width:100%; margin:0; border-color:var(--line); border-radius:16px; padding:16px; box-shadow:0 10px 28px #2532460d; }
#keyboardApp .keyboard-action-primary:hover { border-color:#0969ba; background:#0969ba; }
#keyboardApp .keyboard-workbench { border-radius:12px; }
#keyboardApp .keyboard-editor-tools { padding:8px 10px; }
#keyboardApp .keyboard-text-area { height:245px; min-height:max(185px,var(--keyboard-text-height,0px)); }
#keyboardApp #preview { padding:14px 16px; font-size:30px; }
#keyboardApp #preview::placeholder { font-size:18px; }
#keyboardApp .keyboard-action { min-height:36px; border-radius:8px; }
#keyboardApp .keyboard-editor-buttons .keyboard-action { width:36px; height:36px; }
#keyboardApp .keyboard-format-bar .keyboard-style-trigger { width:36px; height:36px; }
#keyboardApp .keyboard-board { max-width:none; }
#keyboardApp .keyboard-footer { padding-top:14px; justify-content:flex-end; }
#keyboardApp .keyboard-search { gap:8px; }
#keyboardApp .keyboard-method-bar { display:none; }
.arabic-mode-tabs { display:flex; gap:5px; padding:4px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:12px; background:var(--canvas); margin:0 auto; }
#keyboardApp .arabic-mode-tabs button { min-height:40px; border:1px solid transparent; padding:9px 20px; border-radius:9px; font-size:13px; font-weight:550; color:var(--keyboard-muted); }
#keyboardApp .arabic-mode-tabs button[aria-pressed="true"],#keyboardApp .arabic-mode-tabs button[aria-selected="true"] { border-color:color-mix(in srgb,var(--accent) 27%,var(--line)); background:var(--keyboard-paper); box-shadow:0 1px 4px #173b6610; color:var(--accent-readable); }
#keyboardApp .arabic-mode-tabs button:hover { color:var(--accent-readable); }
.arabic-mode-description { margin:10px 0 16px; text-align:center; font-size:11px; color:var(--keyboard-muted); min-height:16px; }
.arabic-smart-entry { padding:12px; border-top:1px solid var(--keyboard-border); background:var(--keyboard-soft); }
.arabic-smart-field { display:flex; align-items:center; gap:10px; }
.arabic-smart-field label { flex:none; font-size:12px; font-weight:600; }
#keyboardApp #smart-input { width:100%; min-width:0; height:40px; border:1px solid var(--keyboard-border); border-radius:8px; padding:7px 12px; font-size:16px; background:var(--keyboard-paper); color:var(--keyboard-ink); }
.arabic-smart-controls { display:flex; align-items:center; gap:6px; }
#keyboardApp #smart-convert,#keyboardApp #smart-options { min-height:40px; padding:7px 12px; white-space:nowrap; border:1px solid var(--keyboard-border); border-radius:8px; font-size:12px; background:var(--keyboard-paper); }
#keyboardApp #smart-convert { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }
#smart-help,#smart-status { font-size:11px; line-height:1.5; color:var(--keyboard-muted); margin:7px 0 0; }
#keyboardApp .arabic-smart-picker { position:fixed; inset:auto; margin:0; padding:0; border:1px solid var(--keyboard-border); border-radius:12px; background:var(--keyboard-paper); color:var(--keyboard-ink); box-shadow:0 12px 35px #17365326; overflow:auto; min-width:0; box-sizing:border-box; }
.arabic-smart-picker>header,.arabic-smart-picker-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 12px; font-size:12px; border-bottom:1px solid var(--keyboard-border); }
#smart-picker-close { width:30px; height:30px; font-size:20px; border-radius:7px; }
#smart-picker-close:hover { background:var(--keyboard-soft); }
#smart-picker-list { display:flex; flex-wrap:wrap; gap:6px; padding:10px; }
#keyboardApp .arabic-smart-candidate { min-height:42px; padding:5px 12px; border:1px solid var(--keyboard-border); border-radius:8px; background:var(--keyboard-paper); color:var(--keyboard-ink); font:23px/1.4 Tahoma,Arial,sans-serif; }
#keyboardApp .arabic-smart-candidate:hover,#keyboardApp .arabic-smart-candidate:focus-visible,#keyboardApp .arabic-smart-candidate[aria-selected="true"] { background:var(--keyboard-soft); border-color:var(--accent); }
.workspace-note { margin:12px 8px 0; text-align:center; font-size:11px; color:var(--muted); line-height:1.6; }
.simple-page { max-width:800px; padding-block:65px; min-height:400px; }
.simple-page h1 { font-size:38px; margin:20px 0; letter-spacing:-1px; }
.simple-page p { color:var(--muted); font-size:16px; line-height:1.9; }
.simple-page p a,.information-back { color:var(--accent-readable); text-decoration:underline; text-underline-offset:3px; }
.information-back { font-size:13px; }
:root[data-appearance="dark"] #keyboardApp { --keyboard-accent:#30A1FF; --keyboard-soft:#17364e; --keyboard-hover:#214b68; --keyboard-active-ink:#83c8ff; --keyboard-border:#35485c; --keyboard-tray:#172433; --keyboard-toolbar:#1a2b3d; --keyboard-key:#24384d; --keyboard-key-edge:#405973; --keyboard-key-base:#102030; --keyboard-modifier:#2b4159; }
@media(max-width:900px) { .hero-inner { gap:45px; } .header-inner { padding-inline:24px; gap:18px; } .header-editor-link { display:none; } .hero-art { padding:24px 20px; } .art-line { font-size:34px; } }
@media(max-width:680px) { .container { width:calc(100% - 32px); } .header-inner { height:72px; padding-inline:16px; gap:12px; } .brand-logo { width:218px; } .header-actions { gap:6px; } .language-trigger { width:36px; height:36px; padding:0; justify-content:center; } .language-trigger>span,.language-trigger>.small-icon { display:none; } .hero-inner { grid-template-columns:1fr; min-height:0; padding-block:28px; gap:20px; } .hero-copy { text-align:center; } .hero-copy h1 { font-size:42px; } .hero-copy h1 br { display:none; } .hero-copy h1>span::before { content:' '; } .hero-copy>p { font-size:14px; max-width:420px; margin-inline:auto; } .hero-eyebrow { font-size:9px; } .hero-actions { justify-content:center; margin-top:18px; gap:14px; } .hero-art { display:none; } .workspace-section { padding-top:22px; } .workspace-heading { font-size:12px; } .workspace-heading>.workspace-local { font-size:9px; } #keyboardApp { padding:10px; border-radius:14px; } #keyboardApp .arabic-mode-tabs { width:100%; gap:3px; } #keyboardApp .arabic-mode-tabs button { flex:1; min-width:0; padding:9px 6px; font-size:12px; } .arabic-mode-description { font-size:10px; margin-bottom:12px; } .arabic-smart-field { flex-wrap:wrap; gap:7px; } .arabic-smart-field label { width:100%; } #keyboardApp #smart-input { flex:1; width:0; } .arabic-smart-controls { flex-shrink:0; } #keyboardApp #smart-convert,#keyboardApp #smart-options { padding-inline:9px; font-size:11px; } #keyboardApp .keyboard-search { flex-wrap:wrap; justify-content:center; } #keyboardApp .keyboard-text-area { height:230px; } .workspace-note { font-size:10px; margin-inline:0; }  .simple-page { padding-block:30px; } }
@media(max-width:360px) { .container { width:calc(100% - 20px); } .header-inner { padding-inline:10px; gap:8px; } .brand-logo { width:202px; } .header-actions { gap:4px; } .workspace-heading>.workspace-local { display:none; } #keyboardApp { padding:8px; } .hero-actions>span { font-size:10px; } .hero-copy h1 { font-size:37px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

#keyboardApp .arabic-mode-tabs button { display:flex; align-items:center; justify-content:center; }
.arabic-smart-entry>label { display:block; font-size:11px; font-weight:550; margin-bottom:7px; }


#keyboardApp .arabic-smart-picker { z-index:1100; }

/* Keep the brand palette readable when appearance switches independently. */
:root[data-theme="arabic"][data-appearance="dark"] { --accent-soft:#17364e; --accent-readable:#8acbff; --accent-hover:#248ee5; }

/* Match the shared keyboard's 680px deck; regular keys retain square faces.
   Modifier and Space keys fill the remaining row width as on a physical board. */
#keyboardApp .keyboard-board { max-width:var(--keyboard-board-width); }
@supports (container-type:inline-size) {
    #keyboardApp .keyboard-board { container-type:inline-size; --keyboard-key-size:calc((100cqw - 52px) / 14.7); }
    #keyboardApp .keyboard-key { min-height:0; height:var(--keyboard-key-size); }
    #keyboardApp .keyboard-key:not(.is-modifier):not(.key-space) { flex:0 0 var(--keyboard-key-size); aspect-ratio:1; padding:8px 2px 3px; }
    @media(max-width:760px) {
        #keyboardApp .keyboard-board { --keyboard-key-size:calc((100cqw - 39px) / 14.4); }
        #keyboardApp .keyboard-key:not(.is-modifier):not(.key-space) { padding:3px 0 0; font-size:clamp(10px,3.6cqw,19px); }
        #keyboardApp .keyboard-key.is-modifier { padding:0; font-size:clamp(6px,2.3cqw,8px); }
        #keyboardApp .keyboard-key .key-hint { font-size:5px; top:1px; left:2px; }
        #keyboardApp .keyboard-key.is-modifier .key-value::after { font-size:clamp(10px,4.5cqw,17px); }
    }
    @media(max-width:360px) {
        #keyboardApp .keyboard-key .key-hint { display:none; }
        #keyboardApp .keyboard-key:not(.is-modifier):not(.key-space) { padding:0; }
    }
}
/* Search feedback follows the i2Speak/i2Type language-dialog pattern. */
.language-dialog .language-search-empty { margin:18px 0 4px; text-align:center; color:var(--muted); }
.language-dialog [data-language][hidden], .language-dialog .language-search-empty[hidden] { display:none!important; }
.language-dialog .language-name { min-width:0; overflow-wrap:anywhere; }
/* The shared caret popup presents the character, typed sequence and shortcut. */
#keyboardApp .candidate-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; }
.candidate-heading>strong { grid-column:1; grid-row:1; font-size:12px; }
.candidate-heading>.candidate-help { grid-column:1; grid-row:2; min-width:0; color:var(--keyboard-muted); font-size:10px; line-height:1.4; }
#candidate-close { grid-column:2; grid-row:1 / span 2; width:30px; height:30px; padding:0; border-radius:7px; font-size:20px; }
#candidate-close:hover { background:var(--keyboard-soft); }
#candidate-list { display:flex; flex-wrap:wrap; gap:7px; padding:10px; }
#keyboardApp .candidate-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:58px; max-width:100%; min-height:60px; padding:7px 10px; }
.candidate-symbol { max-width:100%; overflow-wrap:anywhere; font:25px/1.25 Tahoma,Arial,sans-serif; }
.candidate-trigger,.candidate-shortcut { font-family:var(--font-body); font-size:9px; line-height:1.3; direction:ltr; white-space:nowrap; }
.candidate-trigger { color:var(--keyboard-ink); }
.candidate-shortcut { color:var(--keyboard-muted); }
#keyboardApp .candidate-option[aria-selected="true"] { background:var(--keyboard-soft); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
@media(max-width:360px) {
    #keyboardApp .candidate-option { min-width:50px; padding-inline:7px; }
}

/* Shared keyboard landing heroes, matching the i2Bopomo keyboard hero geometry. */
.type-keyboard-hero-band {
    font-family: var(--font-body);
    line-height: 1.55;
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
}
.type-keyboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    min-height: 396px;
    padding-block: 28px;
}
.type-keyboard-hero > div { min-width: 0; }
.type-keyboard-hero-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--accent-readable, var(--accent-hover));
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.type-keyboard-hero #tool-title {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: normal;
}
.type-keyboard-hero-copy > p {
    max-width: 540px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
}
.type-keyboard-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 25px;
    margin-top: 20px;
}
.type-keyboard-hero-start { min-height: 46px; padding: 11px 21px; gap: 17px; border-radius: 12px; background: var(--accent-hover); }
.type-keyboard-hero-start:hover { background: color-mix(in srgb, var(--accent-hover) 90%, black); }
.type-keyboard-hero-start .icon { width: 24px; height: 24px; padding: 4px; background: #ffffff25; border-radius: 50%; }
.type-keyboard-hero-guide {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--accent-readable, var(--accent-hover));
    font-size: 14px;
    font-weight: 600;
}
.type-keyboard-hero-guide .icon { width: 16px; height: 16px; }
.type-keyboard-hero-guide:hover { text-decoration: underline; text-underline-offset: 4px; }
.type-keyboard-hero-actions > a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
.type-keyboard-hero-assurance {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 11px;
}
.type-keyboard-hero-assurance span + span::before { content: "·"; margin-right: 12px; }
.type-keyboard-hero-art { display: flex; justify-content: center; align-items: center; }
.type-keyboard-hero-art img { display: block; width: min(100%, 340px); height: auto; }
.type-keyboard-hero-band + .keyboard-workspace-anchor { margin-top: 28px; scroll-margin-top: 20px; }
/* Anchor navigation focuses this wrapper; actual controls keep their focus rings. */
.keyboard-workspace-anchor[tabindex="-1"]:focus { outline:none; }
@media (max-width: 1000px) {
    .type-keyboard-hero { gap: 20px; }
}
@media (max-width: 680px) {
    .type-keyboard-hero { grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; padding-block: 24px 16px; }
    .type-keyboard-hero-eyebrow { font-size: 10px; letter-spacing: 1.2px; margin-bottom: 8px; }
    .type-keyboard-hero #tool-title { font-size: clamp(28px, 7.9vw, 34px); margin-bottom: 10px; }
    .type-keyboard-hero-copy > p { font-size: 14px; line-height: 1.65; }
    .type-keyboard-hero-actions { gap: 8px 18px; margin-top: 15px; }
    .type-keyboard-hero-start { min-height: 44px; font-size: 13px; padding: 10px 17px; }
    .type-keyboard-hero-guide { font-size: 13px; gap: 6px; }
    .type-keyboard-hero-assurance { font-size: 10px; gap: 5px 9px; margin-top: 10px; }
    .type-keyboard-hero-assurance span + span::before { margin-right: 9px; }
    .type-keyboard-hero-art img { width: min(100%, 210px); }
    .type-keyboard-hero-band + .keyboard-workspace-anchor { margin-top: 20px; }
}
@media print { .type-keyboard-hero-band { display: none; } }

/* Keep native script fonts and readable RTL controls in translated editions. */
.type-keyboard-hero-band[dir="rtl"] .type-keyboard-hero-eyebrow { letter-spacing: normal; }
.type-keyboard-hero-band[dir="rtl"] .type-keyboard-hero-assurance span + span::before { margin-right: 0; margin-inline-end: 12px; }
.type-keyboard-hero-band[dir="rtl"] .icon { transform: rotate(180deg); }

/* The Arabic tool keeps the same family hero geometry and unframed artwork. */
.type-keyboard-hero-start { background:var(--accent-hover); color:#fff; }
.type-keyboard-hero-start:hover { color:#fff; }
.type-keyboard-hero-art img { aspect-ratio:1; object-fit:contain; }
.type-keyboard-hero-band + .workspace-section { padding-top:28px; }
@media(max-width:680px) { .type-keyboard-hero-band + .workspace-section { padding-top:20px; } }

/* The original final harakat row shares the regular square key geometry. */
#keyboardApp .keyboard-row-diacritics { justify-content:center; margin-top:5px; padding-top:8px; border-top:1px solid var(--keyboard-border); }
#keyboardApp .keyboard-diacritic-key { aspect-ratio:1; flex:0 0 var(--keyboard-key-size,42px); height:var(--keyboard-key-size,42px); min-height:0; }
#keyboardApp .keyboard-diacritic-key .key-value { font-family:"Noto Naskh Arabic",Tahoma,Arial,sans-serif; font-size:1.15em; line-height:1; }
#keyboardApp .keyboard-diacritic-key .key-hint { max-width:calc(100% - 4px); overflow:hidden; font-size:7px; }
@media(max-width:760px) { #keyboardApp .keyboard-row-diacritics { padding-top:6px; margin-top:3px; } #keyboardApp .keyboard-diacritic-key .key-hint { display:none; } }

/* Arabic key letters use the same Naskh face as word suggestions. */
#keyboardApp:is([data-typing-mode="smart"],[data-typing-mode="simple"]) .keyboard-key:not(.is-modifier):not(.key-space) .key-value { font-family:"Noto Naskh Arabic",Tahoma,Arial,sans-serif; font-weight:500; }

/* Lift the Smart key glyphs optically without moving the key or its hint. */
#keyboardApp[data-typing-mode="smart"] .keyboard-key:not(.is-modifier):not(.key-space):not(.keyboard-diacritic-key) .key-value { transform:translateY(-.1em); }
@media(max-width:680px) { #keyboardApp[data-typing-mode="smart"] .keyboard-key:not(.is-modifier):not(.key-space):not(.keyboard-diacritic-key) .key-value { transform:translateY(-3px); } }


/* Smart word choices stay compact; letter alternatives keep larger glyphs. */
#keyboardApp #candidate-popup .candidate-symbol { font-size:20px; line-height:1.3; }
#keyboardApp #candidate-popup[data-origin="word"] #candidate-list { gap:6px; padding:8px; }
#keyboardApp #candidate-popup[data-origin="word"] .candidate-option { flex-direction:column; gap:2px; min-width:0; min-height:40px; padding:4px 10px; }
#keyboardApp #candidate-popup[data-origin="word"] .candidate-symbol { font-family:"Noto Naskh Arabic",Tahoma,Arial,sans-serif; font-weight:500; font-size:14px; line-height:1.5; }
#keyboardApp #candidate-popup[data-origin="word"] .candidate-shortcut { font-size:9px; }
@media(max-width:680px) { #keyboardApp #candidate-popup[data-origin="word"] .candidate-option { min-height:44px; padding:5px 10px; } }