/* Smart Arabic Keyboard (public/js/smart-keyboard.js) — /arabic-keyboard */

.sk{--sk-key-h:46px;--sk-gap:6px;--sk-panel:#e9e4da;--sk-fn:#d6cec1;--sk-key:#fff;margin-top:12px;background:var(--sk-panel);border:1px solid var(--border);border-radius:16px;padding:8px 6px 10px;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}

.sk-bar{display:flex;align-items:center;gap:4px;padding:0 2px 8px;margin-bottom:8px;border-bottom:1px solid rgba(28,25,23,.08)}
.sk-tool{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:600 .85rem/1 system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.sk-tool:hover{background:rgba(28,25,23,.07)}
.sk-tool.is-active{background:var(--brand-1);color:#fff}
.sk-mic.is-listening{background:#dc2626;color:#fff;animation:sk-pulse 1.4s ease-out infinite}
@keyframes sk-pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}100%{box-shadow:0 0 0 12px rgba(220,38,38,0)}}
.sk-bar-spacer{flex:1}
.sk-voice-lang{flex:0 1 auto;width:auto;height:34px;min-width:0;padding:0 6px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--ink);font-size:.8rem}

.sk-status{margin:0 2px 8px;padding:8px 12px;border-radius:10px;background:#fff;color:var(--ink-soft);font-size:.85rem;line-height:1.5}
.sk-status.is-error{color:#b91c1c}
.sk-status.is-live strong{color:#dc2626}
.sk-interim{display:block;color:var(--ink);font-family:"Amiri",serif;font-size:1.1rem}

.sk-keys{display:flex;flex-direction:column;gap:var(--sk-gap)}
.sk-row{display:flex;gap:var(--sk-gap)}
.sk-key{position:relative;flex:1 1 0;min-width:0;height:var(--sk-key-h);display:flex;align-items:center;justify-content:center;gap:2px;padding:0;border:0;border-radius:8px;background:var(--sk-key);color:var(--ink);box-shadow:0 1px 0 rgba(28,25,23,.2);font:600 1.15rem/1 "Cairo",system-ui,sans-serif;cursor:pointer}
.sk-key:hover{background:#faf8f4}
.sk-key.is-pressed,.sk-key:active{background:#d7e9e6}
/* Amiri draws Harakat small relative to its letters, so mark labels are
   scaled up (more in the Harakat row; shift-layer keys can stack two marks). */
.sk-mark{--sk-mark-scale:1.25}
.sk-row-harakat .sk-mark{--sk-mark-scale:1.6}
.sk-mark .sk-label{display:inline-block;font-family:"Amiri",serif;font-size:2rem;font-weight:700;line-height:1;color:#111;-webkit-text-stroke:.4px #111;transform:scale(var(--sk-mark-scale))}
.sk-mark-above .sk-label{transform:translateY(calc(.42em * var(--sk-mark-scale))) scale(var(--sk-mark-scale))}
.sk-mark-below .sk-label{transform:translateY(calc(-.32em * var(--sk-mark-scale))) scale(var(--sk-mark-scale))}
/* Harakat row: slimmer, like a phone keyboard's number row */
.sk-row-harakat .sk-key{height:calc(var(--sk-key-h) - 8px);background:#f6f2ea}
.sk-row-harakat .sk-key:hover{background:#fff}
@media (max-width:600px){.sk-mark .sk-label{-webkit-text-stroke:.5px #111}}
.sk-fn{background:var(--sk-fn);font-size:.85rem;white-space:nowrap}
.sk-fn:hover{background:#cdc4b6}
.sk-fn.is-on{background:#fff;color:var(--brand-1)}
.sk-fn.is-locked{background:var(--brand-1);color:#fff}
.sk-enter,.sk-enter:hover{background:var(--brand-1);color:#fff}
.sk-space{background:var(--sk-key);color:var(--ink-soft);font-size:.8rem}
.sk-lang-code{font-size:.68rem}
.sk-spacer{flex:.5 1 0}
.sk-hint{position:absolute;top:4px;left:5px;font:500 .62rem/1 system-ui,sans-serif;color:#a8a29e;text-transform:uppercase;pointer-events:none}
.sk-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk-key:focus-visible,.sk-tool:focus-visible,.sk-emoji:focus-visible,.sk-tab:focus-visible{outline:2px solid var(--brand-1);outline-offset:1px}

/* Phone-style key preview bubble */
.sk.is-touch .sk-char.is-pressed::after{content:attr(data-preview);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);min-width:calc(100% + 8px);padding:8px 6px;border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(28,25,23,.25);font-size:1.6rem;line-height:1.2;text-align:center;pointer-events:none;z-index:2}

.sk-emoji-grid{height:calc(var(--sk-key-h) * 3 + var(--sk-gap) * 2);overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:2px;align-content:start}
.sk-emoji,.sk-tab{border:0;background:transparent;border-radius:8px;cursor:pointer;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.sk-emoji{height:44px;font-size:1.55rem}
.sk-emoji:hover{background:rgba(28,25,23,.07)}
.sk-emoji-empty{grid-column:1/-1;margin:0;padding:28px 8px;text-align:center;color:var(--ink-soft);font-size:.9rem}
.sk-emoji-tabs .sk-key{flex-basis:64px}
.sk-tabs{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.sk-tabs::-webkit-scrollbar{display:none}
.sk-tab{flex:1 0 36px;height:var(--sk-key-h);font-size:1.2rem;opacity:.55}
.sk-tab.is-active{opacity:1;background:#fff}

.sk-settings{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 4px 0;color:var(--ink-soft);font-size:.85rem}
.sk-settings:empty{display:none}
.sk-settings label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}

.sk-target{min-height:170px}

@media (max-width:600px){
  .sk{--sk-key-h:44px;--sk-gap:4px;padding:6px 3px 8px;border-radius:12px}
  .sk-key{border-radius:6px;font-size:1.05rem}
  .sk-fn{font-size:.78rem}
  .sk-tool{padding:0 10px}
  .sk-tool-text{display:none}
  .sk-voice-lang{font-size:.75rem}
  .sk-emoji-tabs .sk-key{flex-basis:48px}
  .sk-emoji-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}
  /* Short text box on phones so the keyboard sits on screen with it */
  .sk-target{min-height:0;height:140px;font-size:20px;padding:12px}
}
@media (max-width:400px){
  .sk{--sk-gap:3px;padding:5px 2px 7px}
  .sk-key{font-size:1rem}
  .sk-lang-code{display:none}
  .sk-tool{padding:0 8px}
}
@media (prefers-reduced-motion:reduce){.sk-mic.is-listening{animation:none}}

/* Article tables and app CTA on /arabic-keyboard */
.kb-table{min-width:0}
.kb-table .ar-cell{font-family:"Amiri",serif;font-size:1.5rem;line-height:1.2;color:var(--ink);white-space:nowrap}
.kb-digits td{text-align:center;font-size:1.05rem;color:var(--ink)}
.kb-digits td[lang="ar"]{font-family:"Amiri",serif;font-size:1.3rem}
.content kbd{display:inline-block;min-width:1.7em;padding:1px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;background:#fff;font:600 .8rem/1.5 system-ui,sans-serif;color:var(--ink);text-align:center;white-space:nowrap}
.app-cta-box{margin-top:var(--space-7);padding:var(--space-6) var(--space-5);border-radius:var(--radius);background:var(--brand-1);color:#fff;text-align:center}
.app-cta-box h2{margin:0 0 var(--space-3);color:#fff}
.content .app-cta-box p{color:rgba(255,255,255,.88);max-width:56ch;margin:0 auto var(--space-3)}
.app-cta-btn{margin-top:var(--space-3);padding:12px 22px;background:#fff;color:var(--brand-1);font-size:.88rem;gap:8px}
.app-cta-btn:hover{background:#f2f2f2;text-decoration:none}
@media (max-width:600px){
  .app-cta-box{padding:var(--space-5) var(--space-4)}
  .app-cta-btn{width:100%;padding:12px 12px;font-size:.86rem}
}
@media (max-width:600px){
  .kb-table{font-size:.84rem}
  .kb-table th,.kb-table td{padding:8px 9px}
  .kb-table tbody th{white-space:normal;min-width:6.5em}
  .kb-table .ar-cell{font-size:1.3rem}
  .kb-digits th,.kb-digits td{padding:8px 4px}
  .kb-digits tbody th{min-width:0;font-size:.75rem}
}
.kb-table .ar-mark{font-size:1.9rem;line-height:1}
.kb-table td span[lang="ar"]{font-family:"Amiri",serif;font-size:1.25rem;color:var(--ink)}
.kb-table td:has(kbd){white-space:nowrap}
@media (max-width:600px){.kb-harakat th:first-child,.kb-harakat td:first-child{display:none}}
.app-cta-features{list-style:none;margin:0 auto var(--space-4);padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-5);max-width:60ch}
.content .app-cta-features li{color:#fff;font-size:.95rem}
.app-cta-features li::before{content:"\2713";margin-right:6px;font-weight:700}
.app-cta-features strong{color:#fff}
@media (max-width:600px){.app-cta-features{flex-direction:column;align-items:flex-start;text-align:left;width:max-content;max-width:100%}}
.app-btn-icon{width:32px;height:32px;flex:none;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.app-download-cta,.app-cta-btn{padding:7px 20px 7px 7px;gap:10px}

/* Download buttons start drawing attention a few seconds after load
   (class added by the page script): a pop, a pulsing ring and a shine. */
.app-download-cta,.app-cta-btn{position:relative;overflow:hidden}
.app-download-cta::after,.app-cta-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none;opacity:0}
.app-download-cta.is-attention{animation:app-cta-pop 4s ease-in-out infinite,app-cta-ring 4s ease-out infinite}
.app-cta-btn.is-attention{animation:app-cta-pop 4s ease-in-out infinite,app-cta-ring-light 4s ease-out infinite}
.is-attention::after{animation:app-cta-shine 4s ease-in-out infinite}
@keyframes app-cta-pop{0%,40%,100%{transform:scale(1)}8%{transform:scale(1.08)}16%{transform:scale(.97)}24%{transform:scale(1.04)}32%{transform:scale(1)}}
@keyframes app-cta-ring{0%{box-shadow:0 0 0 0 rgba(15,118,110,.6)}35%{box-shadow:0 0 0 16px rgba(15,118,110,0)}100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}}
@keyframes app-cta-ring-light{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}35%{box-shadow:0 0 0 16px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes app-cta-shine{0%{left:-60%;opacity:0}5%{opacity:1}30%{left:130%;opacity:1}31%,100%{left:130%;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .app-download-cta.is-attention,.app-cta-btn.is-attention{animation:app-cta-ring 4s ease-out infinite}
  .is-attention::after{animation:none}
}

/* ==========================================================================
   Clean light minimal design for /arabic-keyboard (body.kb-modern)
   ========================================================================== */
.kb-modern{--kb-line:#ecebe8;--kb-soft:#fafaf9;--kb-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 64px -28px rgba(16,24,40,.22);background:#fff}
.kb-modern .breadcrumbs{background:transparent;border-bottom:0}

/* Hero: centered, airy */
.kb-modern .page-hero{padding:56px 0 32px;text-align:center;background:radial-gradient(ellipse 55% 70% at 50% 0%,rgba(15,118,110,.09),transparent 70%)}
.kb-modern .page-hero-row{flex-direction:column;align-items:center;gap:26px}
.kb-modern .page-hero-text{flex:none}
.kb-eyebrow{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:#f0f7f6;border:1px solid rgba(15,118,110,.16);color:var(--brand-1);font-size:.78rem;font-weight:700;letter-spacing:.01em}
.kb-modern .page-hero h1{margin:16px 0 12px;font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:800;letter-spacing:-.025em;line-height:1.08;color:var(--ink-dark)}
.kb-modern .page-hero p.lead{max-width:58ch;margin:0 auto;font-size:1.08rem;line-height:1.7;color:var(--ink-soft)}
.kb-modern .app-download-cta{width:auto;border-radius:999px;box-shadow:0 10px 30px -10px rgba(15,118,110,.55)}

/* Tool card */
.kb-tool{padding:8px 0 56px}
.kb-card{max-width:920px;margin:0 auto;padding:20px;background:#fff;border:1px solid var(--kb-line);border-radius:28px;box-shadow:var(--kb-shadow)}
.kb-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.kb-card-head .writing-toolbar{margin:0}
.kb-card-head .writing-counts{margin:0;font-size:.8rem;color:#a8a29e}
.kb-modern .kb-card .btn-sm{border-radius:999px;padding:7px 16px;font-size:.78rem}
.kb-modern .kb-card .btn-outline{background:#f5f5f4;border-color:transparent}
.kb-modern .kb-card .btn-outline:hover{background:#ecebe8}
.kb-modern .writing-textarea{border:1px solid var(--kb-line);background:var(--kb-soft);border-radius:18px;transition:border-color .15s,box-shadow .15s}
.kb-modern .writing-textarea:focus{outline:none;border-color:rgba(15,118,110,.45);box-shadow:0 0 0 4px rgba(15,118,110,.1)}
.kb-modern .writing-handoff{justify-content:center;margin-top:18px}

/* Keyboard: neutral greys instead of beige */
.kb-modern .sk{--sk-panel:#f3f3f2;--sk-fn:#e3e3e0;margin-top:14px;border:0;border-radius:22px;padding:10px 8px 12px}
.kb-modern .sk-bar{border-bottom-color:rgba(16,24,40,.06)}
.kb-modern .sk-key{border-radius:10px;box-shadow:0 1px 0 rgba(16,24,40,.12),0 1px 3px rgba(16,24,40,.06)}
.kb-modern .sk-key:hover{background:#fbfbfa}
.kb-modern .sk-fn:hover{background:#d9d9d5}
.kb-modern .sk-enter,.kb-modern .sk-enter:hover{background:var(--brand-1)}
.kb-modern .sk-row-harakat .sk-key{background:#fbfbfa}
.kb-modern .sk-voice-lang{border-color:var(--kb-line)}
.kb-modern .sk-status{border:1px solid var(--kb-line)}

/* Feature pills under the card */
.kb-features{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:920px;margin:28px auto 0;padding:0;list-style:none}
.kb-features li{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--kb-line);border-radius:999px;background:#fff;color:var(--ink-soft);font-size:.86rem;font-weight:600}
.kb-features svg{width:16px;height:16px;fill:none;stroke:var(--brand-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kb-feature-ar{font-family:"Amiri",serif;font-size:1.15rem;line-height:1;color:var(--brand-1)}

/* Article: narrow reading column */
.kb-modern .kb-article{padding-top:16px;border-top:1px solid var(--kb-line)}
.kb-modern .kb-article .container{max-width:780px}
.kb-modern .kb-article h2{margin-top:2.4em;font-size:1.65rem;font-weight:800;letter-spacing:-.015em;color:var(--ink-dark)}
.kb-modern .kb-article h3{margin-top:1.8em;font-size:1.15rem;color:var(--ink-dark)}
.kb-modern .kb-article p,.kb-modern .kb-article li{line-height:1.75}
.kb-modern .kb-article ol,.kb-modern .kb-article ul{padding-inline-start:22px}
.kb-modern .kb-article li{margin-bottom:6px}
.kb-modern .table-scroll{border:1px solid var(--kb-line);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.kb-modern .style-picker-table th,.kb-modern .style-picker-table td{border-bottom-color:var(--kb-line)}
.kb-modern .style-picker-table thead th{background:var(--kb-soft);color:#78716c}

/* FAQ as soft cards */
.kb-modern .faq{padding:var(--space-5) 0 0}
.kb-modern .faq-item{border:1px solid var(--kb-line);border-radius:16px;padding:16px 20px;margin-bottom:10px;background:#fff}
.kb-modern .faq-item[open]{background:var(--kb-soft)}

/* App CTA: light card, teal button */
.kb-modern .app-cta-box{background:linear-gradient(180deg,#f0f7f6,#fff);border:1px solid rgba(15,118,110,.16);color:var(--ink);box-shadow:var(--kb-shadow)}
.kb-modern .app-cta-box h2{color:var(--ink-dark)}
.kb-modern .content .app-cta-box p{color:var(--ink-soft)}
.kb-modern .content .app-cta-features li,.kb-modern .app-cta-features strong{color:var(--ink)}
.kb-modern .app-cta-features li::before{color:var(--brand-1)}
.kb-modern .app-cta-btn{border-radius:999px;background:var(--brand-1);color:#fff;box-shadow:0 10px 30px -10px rgba(15,118,110,.55)}
.kb-modern .app-cta-btn:hover{background:#0c5f58}
.kb-modern .app-cta-btn.is-attention{animation:app-cta-pop 4s ease-in-out infinite,app-cta-ring 4s ease-out infinite}

@media (max-width:760px){
  .kb-modern .page-hero{padding:36px 0 24px}
  .kb-modern .app-download-cta{width:auto}
}
@media (max-width:600px){
  .kb-card{padding:10px;border-radius:22px}
  .kb-modern .sk{padding:6px 3px 8px;border-radius:16px}
  .kb-features{gap:8px}
  .kb-features li{padding:6px 12px;font-size:.8rem}
  .kb-modern .kb-article h2{font-size:1.4rem}
  .kb-modern .app-cta-btn{width:auto}
}
.kb-modern .kb-article .app-cta-box h2{margin-top:0}