/* self-hosted Burushaski fonts (OFL — Noto Nastaliq derivative w/ Burushaski glyphs) */
@font-face{ font-family:'Nasiri Nastaliq'; src:url('BurushaskiNastaliq.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'Nasiri Naskh'; src:url('BurushaskiNaskh.woff2') format('woff2'); font-display:swap; }

/* Burushaski (Nasiri) Editor — Shan-E-Tajalli Linguistic Department
   Layer: presentation. No logic here. */

:root{
  --bg:#f7f9fc; --desk:#eef2f8; --paper:#ffffff; --ink:#202124; --muted:#5f6368;
  --accent:#1a73e8; --accent-ink:#1558b0; --accent-soft:#e8f0fe;
  --special:#8a4a10; --special-soft:#fdf2e2;
  --line:#e2e6ec; --shadow:0 1px 3px rgba(60,64,67,.16);
  --danger:#d93025;
  --key-tray:#dde2e9; --key-face:#ffffff; --key-fn:#c3c9d1;
  --bar:rgba(255,255,255,.86);
  --fscale:1;
}
body.dark{
  --bg:#1a1b1e; --desk:#141518; --paper:#26282c; --ink:#e8eaed; --muted:#9aa0a6;
  --accent:#8ab4f8; --accent-ink:#8ab4f8; --accent-soft:#1e2b3d;
  --special:#e0a35f; --special-soft:#33261442;
  --line:#3c4043; --shadow:0 1px 3px rgba(0,0,0,.5);
  --key-tray:#2c2c2e; --key-face:#5a5a5e; --key-fn:#3a3a3c;
  --bar:rgba(32,33,36,.86);
}
body.dark .tb.hl{ background:#7a6210; }
body.dark .key .lat{ color:#5c6b7d; }
body.dark ::selection{ background:#2b5d75; }
body.dark .page [style*="background-color"]:not([style*="transparent"]){ color:#1f2937; }
body.dark .key.dim{ color:#3b4756; }
body.dark .pal.sp, body.dark .key.special-out, body.dark .chip.idm{ border-color:#5c4322; }
body.dark .pal.hk{ border-color:#1d4759; }
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
/* ZOOM: kill accidental double-tap-to-zoom EVERYWHERE; two-finger pinch still works.
   Applied to every element because touch-action is not inherited and a double-tap on
   the page/editor/canvas (not just a button) was still zooming. */
*{ touch-action:manipulation; }
/* 16px form controls stop iOS from auto-zooming when a field/select is focused */
@media (max-width:680px){
  #docTitle,#findBar input,select.tb,.ps-row select,#controls select{ font-size:16px !important; }
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bg); color:var(--ink); min-height:100vh;
}

/* ---------- top bar ---------- */
#topbar{
  background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line);
  padding:9px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
#brand{ display:flex; flex-direction:column; line-height:1.25; }
#brand .t{ font-weight:600; color:var(--ink); font-size:1.02rem; letter-spacing:-.01em; }
#brand .t .ur{ font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif; margin-inline-start:6px; }
#brand .s{ font-size:.68rem; color:var(--muted); }
#docTitle{
  flex:1; min-width:130px; max-width:340px;
  border:1px solid transparent; border-radius:8px; padding:7px 10px;
  font-size:.95rem; direction:rtl; font-family:'Noto Naskh Arabic',system-ui,serif;
  background:transparent; color:var(--ink);
}
#docTitle:hover{ border-color:var(--line); }
#docTitle:focus{ outline:none; border-color:var(--accent); background:var(--paper); }
#saveState{ font-size:.72rem; color:var(--muted); white-space:nowrap; }
.tabs{ display:flex; gap:4px; margin-inline-start:auto; }
.tabnav{ text-decoration:none; font-size:.85rem; padding:7px 14px; border-radius:980px;
  color:var(--accent); border:1px solid transparent; white-space:nowrap; font-weight:500; }
.tabnav:hover{ background:var(--accent-soft); }
.tabnav.on{ background:var(--accent); color:#fff; }
@media (max-width:680px){ .tabnav{ padding:6px 9px; font-size:.78rem; } }
#saveState.saved{ color:#15803d; }

/* ---------- menu bar (Word / Docs style) ---------- */
#menubar{
  display:flex; align-items:center; gap:1px; padding:2px 12px;
  background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line); position:relative; z-index:60;
}
.menu{
  border:none; background:transparent; color:var(--ink);
  font-size:.85rem; padding:5px 11px; border-radius:7px; cursor:pointer; white-space:nowrap;
}
.menu:hover, .menu.on{ background:rgba(120,120,128,.16); }
.menu.on{ background:var(--accent-soft); color:var(--accent-ink); }
#menuBack{ position:fixed; inset:0; z-index:88; display:none; }
#menuBack.show{ display:block; }
#menuDD{
  position:fixed; z-index:89; display:none; min-width:250px; max-width:94vw;
  background:var(--paper); border:.5px solid var(--line); border-radius:12px;
  box-shadow:0 14px 40px rgba(15,23,32,.24); padding:6px;
}
#menuDD.show{ display:block; }
.dd-item{
  display:flex; align-items:center; gap:11px; width:100%;
  border:none; background:transparent; color:var(--ink);
  padding:8px 10px; border-radius:8px; cursor:pointer; font-size:.9rem; text-align:start;
}
.dd-item:hover{ background:var(--accent-soft); }
.dd-ic{ width:22px; text-align:center; opacity:.9; flex:none; font-size:.95rem; }
.dd-lb{ flex:1; }
.dd-ur{ font-family:'Noto Naskh Arabic',serif; font-size:.82rem; color:var(--muted); }
@media (max-width:680px){ .menu{ padding:5px 8px; font-size:.8rem; } }

/* ---------- toolbar ---------- */
#toolbar{
  position:sticky; top:0; z-index:50;
  background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line);
  padding:7px 12px; display:flex; align-items:center; gap:3px; flex-wrap:wrap;
}
.tb{
  border:none; background:transparent; color:var(--ink);
  border-radius:9px; min-width:34px; height:34px; padding:0 8px;
  font-size:.95rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s;
}
.tb:hover{ background:rgba(120,120,128,.14); }
.tb.on{ background:var(--accent); color:#fff; }
.tb.on:hover{ background:var(--accent); }
.tb b{ font-weight:800; } .tb i{ font-style:italic; } .tb u{ text-decoration:underline; }
.tb.hl{ background:#fde68a; }
.tb.hl:hover{ background:#fcd34d; }
select.tb{ padding:0 8px; height:34px; font-size:.84rem; max-width:150px; border-radius:9px;
  -webkit-appearance:none; appearance:none; background:rgba(120,120,128,.1); }
.sep{ width:1px; height:22px; background:var(--line); margin:0 5px; flex:none; }
.tb-spacer{ flex:1; }
#countChip{ font-size:.72rem; color:var(--muted); white-space:nowrap; padding:0 6px; }
/* unified line icons */
.tb svg{ width:19px; height:19px; display:block; }
.tb.on svg{ stroke:#fff; }
.tb-txt{ font-weight:600; font-size:.92rem; letter-spacing:-.01em; }
.tb-txt .az{ font-size:.72em; vertical-align:.05em; opacity:.8; margin-inline-start:1px; }
.tb:active{ transform:scale(.92); }

/* Format button (primary pill) */
.tb.primary{
  min-width:auto; padding:0 14px; height:34px; gap:5px; font-weight:600; font-size:.86rem;
  color:var(--accent); background:var(--accent-soft); border-radius:980px;
}
.tb.primary:hover{ background:var(--accent); color:#fff; }
.tb.primary.on{ background:var(--accent); color:#fff; }
.tb.primary .fmt-ic{ font-size:.82rem; }

/* ---------- Format panel (Pages-style slide-in) ---------- */
#fmtBack{
  position:fixed; inset:0; z-index:89; background:rgba(15,23,32,.28);
  opacity:0; visibility:hidden; transition:opacity .22s;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
#fmtBack.show{ opacity:1; visibility:visible; }
#formatPanel{
  position:fixed; top:0; right:0; z-index:90; height:100%;
  width:min(320px,86vw);
  background:var(--paper); border-inline-start:.5px solid var(--line);
  box-shadow:-14px 0 40px rgba(15,23,32,.16);
  transform:translateX(100%); transition:transform .26s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column;
}
#formatPanel.show{ transform:translateX(0); }
.fp-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px; border-bottom:.5px solid var(--line);
  font-size:1.02rem; font-weight:600; color:var(--ink);
  background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
}
.fp-head #fmtClose{ min-width:30px; height:30px; font-size:.9rem; color:var(--muted); }
.fp-body{ overflow-y:auto; padding:6px 16px 90px; flex:1; }
.fp-sec{ padding:14px 0; border-bottom:.5px solid var(--line); }
.fp-sec:last-child{ border-bottom:none; }
.fp-sec h4{
  margin:0 0 10px; font-size:.7rem; font-weight:600; letter-spacing:.02em;
  color:var(--muted); text-transform:uppercase; direction:rtl; text-align:start;
}
.fp-row{ display:flex; gap:6px; flex-wrap:wrap; }
.fp-row .tb{ min-width:40px; height:40px; border:.5px solid var(--line); background:var(--bg); }
.fp-row .tb:hover{ background:var(--accent-soft); }
.fp-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
#formatPanel select.tb{ height:40px; max-width:none; width:100%; font-size:.85rem;
  background:var(--bg); border:.5px solid var(--line); border-radius:10px; }
#formatPanel select.tb.wide{ width:100%; }
@media (max-width:680px){
  #formatPanel{ width:88vw; }
  .fp-row .tb{ min-width:44px; height:44px; }
}

/* ---------- find & replace bar ---------- */
#findBar{
  display:none; position:sticky; top:49px; z-index:49;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:8px 10px; gap:6px; align-items:center; flex-wrap:wrap;
  box-shadow:0 4px 10px rgba(15,42,66,.08);
}
#findBar.show{ display:flex; }
#findBar input{
  border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:.9rem;
  background:var(--paper); color:var(--ink); direction:rtl; unicode-bidi:plaintext;
  font-family:'Noto Naskh Arabic',system-ui,serif; min-width:130px; flex:1; max-width:230px;
}
#findBar input:focus{ outline:none; border-color:var(--accent); }
.fbtn{
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:8px; padding:7px 12px; font-size:.82rem; cursor:pointer; white-space:nowrap;
}
.fbtn:hover{ background:var(--accent-soft); }
.fbtn.close{ margin-inline-start:auto; }
#findCount{ font-size:.72rem; color:var(--muted); white-space:nowrap; }

/* ---------- named styles manager ---------- */
#styleBack{ display:none; position:fixed; inset:0; z-index:79; background:rgba(10,20,30,.35); }
#styleBack.show{ display:block; }
#stylePop{
  display:none; position:fixed; z-index:80; left:50%; top:12vh; transform:translateX(-50%);
  width:min(420px,94vw); max-height:78vh; overflow-y:auto;
  background:var(--paper); color:var(--ink); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.35); padding:16px 18px;
}
#stylePop.show{ display:block; }
#stylePop h3{ margin:0 0 12px; font-size:1rem; color:var(--accent-ink); }
.st-row{ display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line); }
.st-row:first-of-type{ border-top:none; }
.st-name{ flex:1; text-align:start; background:transparent; border:none; color:var(--ink);
  cursor:pointer; font-size:.95rem; padding:6px 4px; border-radius:7px; font-family:'Noto Naskh Arabic',system-ui,serif; }
.st-name:hover{ background:var(--accent-soft); }
.st-mini{ border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:7px; padding:5px 9px; font-size:.78rem; cursor:pointer; }
.st-mini:hover{ background:var(--accent-soft); }
.st-mini.del:hover{ background:#fde3d8; color:var(--danger); }
#stAdd{ margin-top:12px; width:100%; border:1px dashed var(--line); background:transparent;
  color:var(--accent-ink); border-radius:9px; padding:9px; font-size:.85rem; cursor:pointer; }
#stAdd:hover{ background:var(--accent-soft); }
#stForm{ display:none; margin-top:10px; border-top:2px solid var(--line); padding-top:12px; }
#stForm.show{ display:block; }
#stForm label{ display:block; font-size:.72rem; color:var(--muted); margin:9px 0 3px; }
#stForm input[type=text], #stForm select{ width:100%; padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--paper); color:var(--ink); font-size:.9rem; }
#stForm .chks{ display:flex; gap:14px; margin:8px 0; flex-wrap:wrap; }
#stForm .chks label{ display:inline-flex; align-items:center; gap:5px; margin:0; font-size:.85rem; color:var(--ink); }
#stForm .frow{ display:flex; gap:10px; }
#stForm .frow>div{ flex:1; }
#stForm .acts{ display:flex; gap:8px; margin-top:14px; }
#stForm .acts button{ flex:1; border-radius:9px; padding:9px; font-size:.85rem; cursor:pointer; border:1px solid var(--line); }
#stForm .acts .save{ background:var(--accent); color:#fff; border-color:var(--accent); }
#stPreview{ margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:9px;
  direction:rtl; font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif; background:var(--bg); min-height:44px; }

/* ---------- symbols popover ---------- */
#symPop{
  display:none; position:fixed; z-index:70; background:var(--paper);
  border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  width:min(360px, 94vw); max-height:70vh; overflow-y:auto;
}
#symPop.show{ display:block; }
#symPop .sg-label{ font-size:.68rem; color:var(--muted); margin:8px 2px 5px; direction:rtl; }
#symPop .sg-label:first-child{ margin-top:0; }
#symPop .sg-row{ display:flex; gap:6px; flex-wrap:wrap; direction:rtl; }
#symPop .sym{
  min-width:38px; min-height:38px; padding:5px 8px; border-radius:9px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  cursor:pointer; box-shadow:var(--shadow);
  font-family:'Noto Naskh Arabic',serif; font-size:20px; line-height:1.2;
  display:inline-flex; align-items:center; justify-content:center;
}
#symPop .sym.wide{ font-size:15px; }
#symPop .sym:active{ filter:brightness(.93); }
body.dark #symPop .sym{ border-color:var(--line); }

/* ---------- colour popover ---------- */
#colorPop{
  display:none; position:fixed; z-index:70; background:var(--paper);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  box-shadow:0 12px 34px rgba(0,0,0,.25); width:296px;
}
#colorPop.show{ display:block; }
.cp-label{ font-size:.68rem; color:var(--muted); margin:6px 0 6px; font-weight:600; }
.cp-row{ display:grid; grid-template-columns:repeat(10,1fr); gap:5px; margin-bottom:6px; }
.cp-sw{
  width:22px; height:22px; border-radius:5px; cursor:pointer;
  border:1px solid rgba(0,0,0,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.cp-sw:hover{ transform:scale(1.18); box-shadow:0 2px 6px rgba(0,0,0,.25); }
.cp-sw.none{ background:transparent; position:relative; }
.cp-sw.none::after{ content:'✕'; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:.7rem; color:var(--muted); }
.cp-custom{
  width:22px; height:22px; border-radius:5px; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted);
  border:1px dashed var(--line); overflow:hidden;
}
.cp-custom:hover{ background:var(--accent-soft); color:var(--accent); }
.cp-custom input{ position:absolute; inset:0; opacity:0; cursor:pointer; }

/* ---------- palettes ---------- */
#palettes{
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:6px 10px; display:none; gap:6px; flex-wrap:wrap; direction:rtl;
}
#palettes.show{ display:flex; }
#palettes .pal-label{
  font-size:.68rem; color:var(--muted); align-self:center;
  text-transform:uppercase; letter-spacing:.5px; margin-inline-start:4px; direction:ltr;
}
.pal{
  font-family:'Noto Naskh Arabic',serif; font-size:22px; line-height:1;
  min-width:42px; padding:7px 5px 9px; border-radius:9px;
  border:1px solid var(--line); cursor:pointer; box-shadow:var(--shadow); background:var(--paper);
}
.pal:active{ filter:brightness(.92); }
.pal.sp{ background:var(--special-soft); color:var(--special); border-color:#ecd9bd; }
.pal.hk{ background:var(--accent-soft); color:var(--accent-ink); border-color:#c6dfe9; }
.pal.pn{ background:var(--bg); }

/* ---------- Latin (roman) diacritics bar — pinned & prominent in Roman mode ---------- */
#latinBar{
  background:var(--accent-soft); border-bottom:1px solid var(--line);
  padding:8px 12px; display:none; gap:6px; flex-wrap:wrap; align-items:center; direction:ltr;
  position:sticky; top:0; z-index:55;
}
#latinBar.show{ display:flex; }
#latinBar .pal-label{ font-weight:700; color:var(--accent-ink); }
#latinBar .pal{ font-family:-apple-system,system-ui,serif; min-width:40px; font-size:20px; background:var(--paper); }
#latinBar .pal.hk{ font-weight:600; }
#latinBar .lb-hint{ font-size:.7rem; color:var(--accent-ink); margin-inline-start:6px; }

/* colour / highlight toolbar icons (monochrome, professional) */
.ic-color{ font-weight:700; border-bottom:3px solid #e64a3b; line-height:1; padding-bottom:1px; }
.ic-hl{ font-weight:700; background:#fde68a; color:#1d1d1f; border-radius:3px; padding:0 3px; }

/* ---------- page setup dialog ---------- */
.ps-back{ position:fixed; inset:0; z-index:120; background:rgba(15,23,32,.32);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.ps-box{ position:fixed; z-index:121; left:50%; top:16vh; transform:translateX(-50%);
  width:min(360px,92vw); background:var(--paper); border:.5px solid var(--line);
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); padding:20px 22px; }
.ps-box h3{ margin:0 0 14px; font-size:1.05rem; color:var(--ink); font-weight:600; }
.ps-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:11px 0; font-size:.9rem; color:var(--ink); }
.ps-row select{ flex:none; min-width:150px; padding:8px 10px; border:1px solid var(--line);
  border-radius:9px; background:var(--bg); color:var(--ink); font-size:.88rem; }
.ps-acts{ margin-top:18px; text-align:end; }
.ps-done{ border:none; background:var(--accent); color:#fff; border-radius:10px;
  padding:9px 20px; font-size:.9rem; cursor:pointer; font-weight:500; }
#latinBtn{ font-weight:600; letter-spacing:-.02em; }
#latinBtn span{ font-size:.9em; opacity:.85; margin-inline-start:1px; }

/* ---------- credits line (founder + director) ---------- */
#brand .cred{ font-size:.62rem; color:var(--muted); margin-top:1px; line-height:1.3; }
#brand .cred .cr-ur{ font-family:'Noto Naskh Arabic',serif; }
@media (max-width:680px){ #brand .cred{ font-size:.56rem; } }

/* ---------- page canvas ---------- */
#canvas{ padding:32px 14px 120px; display:flex; justify-content:center; overflow-x:hidden; background:var(--desk); }
.page{
  width:100%; max-width:820px; min-height:66vh;
  background:var(--paper); border:0.5px solid var(--line); border-radius:8px;
  box-shadow:0 1px 3px rgba(60,64,67,.18), 0 6px 20px rgba(60,64,67,.10);
  padding:52px 60px; outline:none;
  direction:rtl; unicode-bidi:plaintext;
  font-family:'Nasiri Nastaliq','Noto Nastaliq Urdu','Noto Naskh Arabic',serif;
  font-size:calc(26px * var(--fscale)); line-height:2.25; color:var(--ink);
  overflow-wrap:break-word; word-break:break-word; max-width:100%;
}
.page.naskh{ font-family:'Noto Naskh Arabic',serif; line-height:2; }
.page:empty::before{
  content:attr(data-placeholder); color:#9ca3af; cursor:text;
}
.page hr{ border:none; border-top:1.5px solid var(--line); margin:14px 0; }
.page h1{ font-size:1.5em; margin:.35em 0; }
.page h2{ font-size:1.22em; margin:.3em 0; }
#docSel{ max-width:170px; }
textarea.page{ resize:vertical; border:none; display:block; height:62vh; }
textarea.page:focus{ outline:none; }

/* ---------- desktop click keyboard ---------- */
#deskKbd{ display:none; background:var(--key-tray); border-top:.5px solid var(--line); padding:8px 6px 12px; user-select:none; }
#deskKbd.show{
  display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
  box-shadow:0 -8px 24px rgba(15,42,66,.18);
  max-height:46vh; overflow-y:auto;
}
body.kbd-open #canvas{ padding-bottom:calc(46vh + 40px); }
#deskKbd .inner{ max-width:840px; margin:0 auto; }
.layerbar{ display:flex; gap:8px; margin:4px 0 8px; align-items:center; }
.layerbar .toggle{ border:1px solid var(--line); background:var(--paper); border-radius:8px; padding:6px 13px; font-size:.8rem; cursor:pointer; }
.layerbar .toggle.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.layerbar .layername{ font-size:.72rem; color:var(--muted); margin-inline-start:auto; }
.kbd{ display:flex; flex-direction:column; gap:5px; }
.krow{ display:flex; gap:5px; justify-content:center; }
@media (max-width:680px){ .key{ height:42px; max-width:none; font-size:19px; } }
.key{
  position:relative; flex:1 1 0; max-width:60px; height:50px;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-family:'Noto Naskh Arabic',serif; font-size:21px;
}
.key:active{ background:var(--accent-soft); }
.key .lat{ position:absolute; left:4px; top:2px; font-family:system-ui; font-size:.55rem; color:#9aa7b5; text-transform:uppercase; }
.key.dim{ color:#c9d1da; cursor:default; background:var(--key-fn); }
.key.wide{ max-width:none; flex:2 1 0; font-family:-apple-system,system-ui,sans-serif; font-size:.85rem; color:var(--ink); background:var(--key-fn); }
.key.space{ flex:5 1 0; max-width:none; }
.key.special-out{ color:var(--special); background:var(--special-soft); border-color:#ecd9bd; }

/* ---------- custom mobile keyboard ---------- */
body.mobkbd #deskKbd{ padding:6px 4px calc(8px + env(safe-area-inset-bottom)); }
body.mobkbd #deskKbd .krow{ gap:6px; }
body.mobkbd #deskKbd .key{
  height:44px; max-width:none; border-radius:7px; font-size:22px;
  box-shadow:0 1px 0 rgba(0,0,0,.3);
}
body.mobkbd #deskKbd .key.wide{ flex:1.3 1 0; font-size:1rem; background:var(--key-fn); }
body.mobkbd #deskKbd .key.space{ flex:4 1 0; }
body.mobkbd #deskKbd .key.on{ background:var(--accent); color:#fff; }
body.mobkbd #deskKbd .key.haspop::after{
  content:''; position:absolute; top:3px; right:5px; width:4px; height:4px;
  border-radius:50%; background:var(--muted); opacity:.5;
}
.kpop{
  position:fixed; z-index:90; display:flex; gap:5px; padding:7px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.32);
  animation:kpop-in .13s cubic-bezier(.3,.85,.35,1);
}
@keyframes kpop-in{ from{ opacity:0; transform:translateY(7px) scale(.94); } to{ opacity:1; transform:none; } }
.kpop-k{
  min-width:46px; height:52px; display:flex; align-items:center; justify-content:center;
  font-family:'Nasiri Nastaliq','Noto Naskh Arabic',serif; font-size:26px; color:var(--ink);
  background:var(--key-face); border-radius:10px; box-shadow:0 1px 0 rgba(0,0,0,.25);
  border:1px solid var(--line); transition:transform .07s, background .07s;
}
.kpop-k:active, .kpop-k.sel{ background:var(--accent); color:#fff; transform:scale(1.1); border-color:var(--accent); }

/* ---------- tactile feedback: key preview bubble + pressed pop ---------- */
.kprev{
  position:fixed; z-index:200; transform:translate(-50%,-112%);
  min-width:48px; padding:8px 12px 12px; border-radius:14px;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.3); pointer-events:none;
  font-family:'Nasiri Nastaliq','Noto Naskh Arabic',serif; font-size:34px; line-height:1; text-align:center; color:var(--ink);
}
body.dark .kprev{ background:var(--key-face); }
body.mobkbd #deskKbd .key.pressed{ background:var(--accent-soft); transform:scale(.94); }
body.mobkbd #deskKbd .key.space.sliding{ background:var(--accent); color:#fff; transform:none; }
body.mobkbd #deskKbd .key.marks{ background:var(--special-soft); color:var(--special); font-size:1.25rem; flex:1 1 0; }

/* prominent special-letters strip on top of the keyboard */
body.mobkbd #deskKbd .kspecial{
  display:flex; gap:3px; padding:1px 2px 7px; margin-bottom:3px;
  border-bottom:.5px solid var(--line);
}
body.mobkbd #deskKbd .kspecial .key{
  flex:1 1 0; min-width:0; height:46px; font-size:22px; padding:0;
  background:var(--special-soft); color:var(--special); border-color:#ecd9bd; font-weight:600;
}
.kpop.hrkpop{ flex-wrap:wrap; max-width:94vw; justify-content:center; }
.kpop.hrkpop .kpop-k{ min-width:44px; height:48px; font-size:24px; }

/* ---------- start screen (Google-Docs-style home) ---------- */
#homeScreen{ position:fixed; inset:0; z-index:150; background:var(--bg);
  overflow-y:auto; -webkit-overflow-scrolling:touch; display:none; padding-bottom:40px; }
#homeScreen.show{ display:block; }
.home-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 20px; background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line); position:sticky; top:0; z-index:2; }
.home-brand{ font-size:1.1rem; font-weight:600; color:var(--ink); }
.home-brand .home-ur{ font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif; margin-inline-start:8px; font-weight:500; }
.home-cred{ font-family:'Noto Naskh Arabic',serif; font-size:.6rem; color:var(--muted); font-weight:400; margin-top:3px; }
.home-ref{ font-size:.85rem; color:var(--accent); text-decoration:none; padding:7px 15px; border-radius:980px;
  border:1px solid var(--line); white-space:nowrap; font-weight:500; }
.home-band{ background:var(--desk); padding:18px 20px 22px; border-bottom:.5px solid var(--line); }
.home-sec{ font-size:.78rem; color:var(--muted); margin:0 2px 12px; font-weight:600; }
.home-tpls{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
.home-tpl{ flex:0 0 auto; width:104px; cursor:pointer; border:none; background:transparent; padding:0; }
.home-tpl .thumb{ width:104px; height:130px; background:var(--paper); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; font-size:32px; color:var(--muted); }
.home-tpl .thumb.blank{ color:var(--accent); }
.home-tpl:active .thumb{ border-color:var(--accent); transform:scale(.97); }
.home-tpl .tname{ font-size:.72rem; color:var(--ink); margin-top:7px; text-align:center;
  font-family:'Noto Naskh Arabic',system-ui,serif; }
.home-recent{ padding:18px 20px; }
.home-docs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.home-doc{ cursor:pointer; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--paper); box-shadow:var(--shadow); text-align:start; padding:0; }
.home-doc:active{ border-color:var(--accent); transform:scale(.99); }
.home-doc .dprev{ height:116px; padding:12px; overflow:hidden; direction:rtl;
  font-family:'Nasiri Nastaliq','Noto Nastaliq Urdu',serif; font-size:15px; line-height:1.9; color:var(--ink);
  border-bottom:1px solid var(--line); }
.home-doc .dmeta{ padding:9px 12px; }
.home-doc .dtitle{ font-size:.85rem; color:var(--ink); font-family:'Noto Naskh Arabic',system-ui,serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-doc .ddate{ font-size:.66rem; color:var(--muted); margin-top:2px; }
.home-empty{ color:var(--muted); font-size:.85rem; padding:16px 2px; }
/* toast */
#toast{ position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(18px); background:#202124; color:#fff;
  padding:11px 20px; border-radius:10px; font-size:.85rem; z-index:300; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; max-width:90vw; box-shadow:0 6px 20px rgba(0,0,0,.3); }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- markers panel (one key opens all special marks) ---------- */
#markPanel{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  background:var(--key-tray); border-top:.5px solid var(--line);
  max-height:48vh; display:flex; flex-direction:column;
  box-shadow:0 -8px 24px rgba(15,42,66,.2);
  padding-bottom:env(safe-area-inset-bottom);
  animation:kpop-in .16s ease-out;
}
.mp-head{ display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; border-bottom:.5px solid var(--line); background:var(--bar);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-size:.92rem; font-weight:600; color:var(--ink); }
.mp-abc{ border:1px solid var(--line); background:var(--paper); color:var(--accent);
  border-radius:9px; padding:7px 13px; font-size:.82rem; cursor:pointer; font-weight:600; }
.mp-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 12px 16px; direction:rtl; }
.mp-lab{ font-size:.68rem; color:var(--muted); margin:11px 3px 6px; direction:rtl; font-weight:600; }
.mp-row{ display:flex; flex-wrap:wrap; gap:6px; direction:rtl; }
.mp-k{ min-width:46px; height:48px; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); border-radius:10px; font-family:'Nasiri Naskh','Noto Naskh Arabic',serif; font-size:23px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); }
.mp-k:active{ background:var(--accent-soft); transform:scale(.94); }
.mp-k.wide{ font-size:15px; padding:0 10px; min-width:auto; }
body.mobkbd #deskKbd .key{ transition:transform .05s ease, background .09s ease; -webkit-touch-callout:none;
  font-family:'Nasiri Naskh','Nasiri Nastaliq','Noto Naskh Arabic',serif; }

/* ---------- footer ---------- */
footer{
  text-align:center; font-size:.72rem; color:var(--muted);
  padding:14px 12px calc(20px + env(safe-area-inset-bottom)); line-height:1.7;
}
footer a{ color:var(--accent-ink); }

/* ---------- document outline pane ---------- */
#outlineBack{ position:fixed; inset:0; z-index:44; background:rgba(15,23,32,.28);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); display:none; }
#outlineBack.show{ display:block; }
#outline{
  position:fixed; top:0; inset-inline-start:0; z-index:45; height:100%;
  width:min(280px,84vw); background:var(--paper); border-inline-end:.5px solid var(--line);
  box-shadow:14px 0 40px rgba(15,23,32,.14);
  transform:translateX(-102%); transition:transform .26s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column;
}
[dir]#outline{ }
#outline.show{ transform:translateX(0); }
.ol-head{ display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px; border-bottom:.5px solid var(--line); font-weight:600; font-size:.95rem;
  color:var(--ink); background:var(--bar);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.ol-x{ border:none; background:transparent; color:var(--muted); font-size:.9rem; cursor:pointer;
  width:28px; height:28px; border-radius:7px; }
.ol-x:hover{ background:var(--accent-soft); color:var(--accent); }
.ol-list{ overflow-y:auto; padding:8px 10px 40px; flex:1; }
.ol-item{ display:block; width:100%; text-align:start; border:none; background:transparent;
  color:var(--ink); padding:8px 10px; border-radius:8px; cursor:pointer; font-size:.9rem;
  direction:rtl; font-family:'Noto Naskh Arabic',system-ui,serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ol-item:hover{ background:var(--accent-soft); color:var(--accent-ink); }
.ol-item.lvl2{ padding-inline-start:24px; font-size:.84rem; color:var(--muted); }
.ol-item.lvl3{ padding-inline-start:38px; font-size:.82rem; color:var(--muted); }
.ol-empty{ color:var(--muted); font-size:.82rem; padding:14px 10px; line-height:1.6; }

/* ---------- onboarding / welcome tips ---------- */
#coachBack{ position:fixed; inset:0; z-index:160; background:rgba(15,23,32,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:20px; }
#coachBack.show{ display:flex; }
#coachCard{ width:min(400px,94vw); background:var(--paper); color:var(--ink);
  border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,.4); padding:26px 24px 20px;
  animation:coach-in .22s cubic-bezier(.3,.85,.35,1); }
@keyframes coach-in{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
#coachCard h3{ margin:0 0 4px; font-size:1.15rem; font-weight:700; }
#coachCard .c-ur{ font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif; color:var(--muted);
  font-size:.9rem; margin-bottom:14px; }
.c-tip{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-top:.5px solid var(--line); }
.c-tip:first-of-type{ border-top:none; }
.c-tip .c-ic{ flex:none; width:34px; height:34px; border-radius:9px; background:var(--accent-soft);
  color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
  font-family:'Nasiri Naskh','Noto Naskh Arabic',serif; font-size:19px; font-weight:600; }
.c-tip .c-tx{ font-size:.86rem; line-height:1.4; color:var(--ink); }
.c-tip .c-tx .ar{ font-family:'Nasiri Naskh','Noto Naskh Arabic',serif; }
.c-tip .c-tx b{ font-weight:600; }
#coachCard .c-acts{ margin-top:16px; display:flex; gap:8px; }
#coachGo{ flex:1; border:none; background:var(--accent); color:#fff; border-radius:11px;
  padding:11px; font-size:.92rem; font-weight:600; cursor:pointer; }
#coachGo:active{ transform:scale(.98); }

/* ---------- polish: smoother interactions ---------- */
.menu, .tb, .dd-item, .tabnav, .home-tpl .thumb{ transition:background .13s ease, color .13s ease, transform .08s ease; }
#menuDD.show{ animation:coach-in .14s ease-out; }
.page{ transition:box-shadow .2s ease; }

/* ---------- device visibility ---------- */
body.touch .deskonly{ display:none !important; }
body.desktop .touchonly{ display:none !important; }

/* ---------- mobile ---------- */
@media (max-width:680px){
  #topbar{ padding:6px 8px; gap:6px; }
  #brand .t{ font-size:.9rem; }
  #brand .s{ display:none; }
  #docTitle{ max-width:150px; font-size:.85rem; }
  #toolbar{ padding:4px 4px; gap:2px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  #toolbar::-webkit-scrollbar{ display:none; }
  .tb{ min-width:34px; height:34px; flex:none; }
  select.tb{ max-width:96px; }
  #canvas{ padding:10px 6px 260px; }
  .page{ padding:20px 18px; font-size:calc(24px * var(--fscale)); min-height:48vh; }
  .pal{ min-width:38px; font-size:20px; }
}

/* ---------- print: only the document ---------- */
@media print{
  body{ background:#fff; }
  #topbar,#menubar,#toolbar,#palettes,#deskKbd,#outline,#outlineBack,#coachBack,footer{ display:none !important; }
  #canvas{ padding:0; margin:0 !important; }
  .page{ box-shadow:none; border-radius:0; max-width:none; min-height:auto; padding:0; }
}