/* PDF Notes Tool – Islamic Writing Helper
 * Sits on top of PDF Notes Tool's design tokens (--pnt-accent, --pnt-line …). */

/* ---------- Toolbar buttons ---------- */
.pnt-app .pnt-toolbar .pnt-ibtn.pnti-btn{width:auto;min-width:32px;padding:0 7px;white-space:nowrap}
.pnt-app .pnti-g{font-family:Amiri,"Noto Naskh Arabic","Segoe UI",serif;font-size:16px;line-height:1;color:inherit;pointer-events:none}
.pnt-app .pnti-btn.is-on{background:var(--pnt-accent);color:var(--pnt-on-accent)}
.pnt-app .pnti-btn.is-on .pnti-g{color:var(--pnt-on-accent)}
@media (max-width:820px){
  .pnt-app .pnt-toolbar .pnt-ibtn.pnti-btn{min-width:38px;padding:0 9px}
}

/* ---------- Dialog ---------- */
.pnt-app .pnti-overlay{position:absolute;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(43,33,24,.5)}
.pnt-app .pnti-dialog{
  display:flex;flex-direction:column;width:100%;max-width:640px;max-height:100%;
  background:var(--pnt-surface);color:var(--pnt-ink);border:1px solid var(--pnt-line);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden;text-align:start;
}
.pnt-app .pnti-head{display:flex;align-items:center;gap:6px;padding:8px 8px 0 10px;background:var(--pnt-bar);border-bottom:1px solid var(--pnt-line)}
.pnt-app .pnti-tabs{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto}
.pnt-app .pnti-tab{padding:9px 13px;font:600 14px/1 var(--pnt-ui);color:var(--pnt-muted);border-radius:8px 8px 0 0;border-bottom:3px solid transparent;white-space:nowrap}
.pnt-app .pnti-tab:hover{color:var(--pnt-ink)}
.pnt-app .pnti-tab.is-on{color:var(--pnt-accent);border-bottom-color:var(--pnt-accent);background:var(--pnt-surface)}
.pnt-app .pnti-x{width:34px;height:34px;margin-bottom:4px;border-radius:50%;font-size:24px;line-height:1;color:var(--pnt-muted)}
.pnt-app .pnti-x:hover{background:var(--pnt-accent-soft);color:var(--pnt-ink)}
.pnt-app .pnti-body{padding:14px 16px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pnt-app .pnti-pane{display:flex;flex-direction:column;gap:12px}

/* ---------- Form controls ---------- */
.pnt-app .pnti-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.pnt-app .pnti-lbl{font:600 12px/1.2 var(--pnt-ui);color:var(--pnt-muted);text-transform:none;letter-spacing:.02em}
.pnt-app .pnti-input,.pnt-app .pnti-select{
  width:100%;height:40px;padding:0 10px;font:15px var(--pnt-ui);color:var(--pnt-ink);
  background:var(--pnt-surface);border:1px solid var(--pnt-line);border-radius:8px;outline:none;
}
.pnt-app .pnti-select{
  width:100%;padding-inline-end:34px;background-repeat:no-repeat;background-position:right 12px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235f6c65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pnt-app .pnti-input:focus,.pnt-app .pnti-select:focus{border-color:var(--pnt-accent);box-shadow:0 0 0 3px var(--pnt-accent-soft)}
.pnt-app .pnti-row{display:flex;gap:10px;align-items:flex-start}
.pnt-app .pnti-row.pnti-end{align-items:flex-end}
.pnt-app .pnti-row.pnti-wrap{flex-wrap:wrap;gap:8px}
.pnt-app .pnti-grow{flex:1}
.pnt-app .pnti-small{width:96px;flex:none}
.pnt-app .pnti-checks{flex-wrap:wrap;gap:6px 16px}
.pnt-app .pnti-check,.pnt-app .pnti-switch{display:inline-flex;align-items:center;gap:7px;font:14px var(--pnt-ui);cursor:pointer}
.pnt-app .pnti-check input,.pnt-app .pnti-switch input{width:18px;height:18px;accent-color:var(--pnt-accent);margin:0}
.pnt-app .pnti-switch{font-weight:600}
.pnt-app .pnti-status{min-height:18px;font:13px var(--pnt-ui);color:var(--pnt-muted)}
.pnt-app .pnti-hint,.pnt-app .pnti-note,.pnt-app .pnti-credit{font:12.5px/1.45 var(--pnt-ui);color:var(--pnt-muted);margin:0}
.pnt-app .pnti-note{font-size:13.5px}
.pnt-app .pnti-box{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--pnt-accent-soft);border-radius:10px}
.pnt-app .pnti-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;bottom:-16px;padding:10px 0 0;background:linear-gradient(to top,var(--pnt-surface) 70%,transparent)}
.pnt-app .pnti-foot .pnti-credit{flex:1}
.pnt-app .pnti-insert{flex:none;height:42px;padding:0 20px}
.pnt-app .pnt-btn.is-small.is-quiet{border:1px solid var(--pnt-line)}

/* ---------- Preview (same look as the notes) ---------- */
.pnt-app .pnti-preview{max-height:240px;overflow:auto;padding:12px 14px;background:var(--pnt-surface);border:1px dashed var(--pnt-line);border-radius:10px}
.pnt-app .pnti-preview:empty{display:none}

/* ---------- Hadith picker ---------- */
.pnt-app .pnti-segs{display:flex;gap:0;border:1px solid var(--pnt-line);border-radius:8px;overflow:hidden}
.pnt-app .pnti-seg{flex:1;height:36px;border-radius:0;font:600 13.5px var(--pnt-ui);color:var(--pnt-muted);background:var(--pnt-surface)}
.pnt-app .pnti-seg.is-on{background:var(--pnt-accent);color:var(--pnt-on-accent)}
.pnt-app .pnti-sub{display:flex;flex-direction:column;gap:10px}
.pnt-app .pnti-list{display:flex;flex-direction:column;max-height:210px;overflow-y:auto;border:1px solid var(--pnt-line);border-radius:8px}
.pnt-app .pnti-list:empty{display:none}
.pnt-app .pnti-item{display:block;width:100%;padding:8px 10px;text-align:start;font:13.5px/1.4 var(--pnt-ui);color:var(--pnt-ink);border-radius:0;border-bottom:1px solid var(--pnt-line)}
.pnt-app .pnti-item:last-child{border-bottom:0}
.pnt-app .pnti-item:hover{background:var(--pnt-bar)}
.pnt-app .pnti-item.is-on{background:var(--pnt-accent-soft)}
.pnt-app .pnti-empty{padding:10px;font:13px var(--pnt-ui);color:var(--pnt-muted)}

/* ---------- On-screen Arabic keyboard ---------- */
.pnt-app .pnti-kb{display:flex;flex-direction:column;gap:5px;padding:8px;background:var(--pnt-bar);border:1px solid var(--pnt-line);border-radius:10px;user-select:none;-webkit-user-select:none}
.pnt-app .pnti-krow{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.pnt-app .pnti-key{position:relative;min-width:34px;height:40px;padding:0 6px;background:var(--pnt-surface);border:1px solid var(--pnt-line);border-bottom-width:2px;border-radius:7px;font:600 13px var(--pnt-ui);color:var(--pnt-ink)}
.pnt-app .pnti-key:hover{background:var(--pnt-accent-soft)}
.pnt-app .pnti-key:active{transform:translateY(1px)}
.pnt-app .pnti-key.is-on{background:var(--pnt-accent);color:var(--pnt-on-accent)}
.pnt-app .pnti-key.is-wide{min-width:58px}
.pnt-app .pnti-key.is-space{flex:1;max-width:260px}
.pnt-app .pnti-key-ar{font-family:Amiri,"Noto Naskh Arabic",serif;font-size:21px;line-height:1}
.pnt-app .pnti-key-lat{position:absolute;top:1px;inset-inline-start:3px;font:9px/1 var(--pnt-ui);color:var(--pnt-muted)}
@media (max-width:480px){
  .pnt-app .pnti-key{min-width:27px;height:38px;padding:0 3px}
  .pnt-app .pnti-key.is-wide{min-width:46px}
}

/* ---------- Shortcut list ---------- */
.pnt-app .pnti-sc{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pnt-app .pnti-sci{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 11px;text-align:start;background:var(--pnt-surface);border:1px solid var(--pnt-line);border-radius:9px}
.pnt-app .pnti-sci:hover{background:var(--pnt-accent-soft);border-color:var(--pnt-accent)}
.pnt-app .pnti-sci-ar{align-self:stretch;font-family:Amiri,"Noto Naskh Arabic",serif;font-size:20px;line-height:1.6;color:var(--pnt-ink);overflow-wrap:anywhere}
.pnt-app .pnti-sci-k{font:600 12.5px ui-monospace,Menlo,Consolas,monospace;color:var(--pnt-accent)}
.pnt-app .pnti-sci-l{font:12px/1.3 var(--pnt-ui);color:var(--pnt-muted)}
.pnt-app .pnti-acts{grid-column:1/-1;display:flex;flex-direction:column;gap:3px;padding:8px 2px 0;font:13px var(--pnt-ui);color:var(--pnt-muted)}
@media (max-width:560px){.pnt-app .pnti-sc{grid-template-columns:1fr}}

/* ---------- Phones: bottom sheet ---------- */
@media (max-width:820px){
  .pnt-app .pnti-overlay{align-items:flex-end;padding:0}
  .pnt-app .pnti-dialog{max-width:none;max-height:92%;border-radius:16px 16px 0 0;border-bottom:0}
  .pnt-app .pnti-input,.pnt-app .pnti-select{height:44px;font-size:16px} /* 16px stops iOS zooming */
}

/* ---------- Arabic text in the notes and the downloaded sheet ---------- */
/* Arabic needs more line height than Latin text so vowel marks never collide. */
.pnt-rich [dir="rtl"][style*="Amiri"],.pnt-rich [style*="Amiri"][dir="rtl"]{line-height:2.15}
.pnt-rich blockquote[dir="rtl"]{padding-inline-start:14px}
@media (prefers-reduced-motion:reduce){.pnt-app .pnti-key:active{transform:none}}