/* ============================================================
   tools.abutarfa.com — shared styles
   Edit this one file to restyle every page.
   ============================================================ */

/* ---- Fonts (self-hosted; no external requests) ---- */
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spectral-400.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/spectral-500.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/spectral-600.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/spectral-400i.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/publicsans-400.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/publicsans-500.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/publicsans-600.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/publicsans-700.woff2') format('woff2')}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plexar-400.woff2') format('woff2')}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/plexar-500.woff2') format('woff2')}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/plexar-600.woff2') format('woff2')}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/plexar-700.woff2') format('woff2')}

:root{
  --paper: oklch(97.5% 0.004 60);
  --paper-2: oklch(95% 0.005 60);
  --ink: oklch(26% 0.012 40);
  --ink-soft: oklch(44% 0.012 45);
  --ink-faint: oklch(58% 0.015 50);
  --line: oklch(88% 0.006 60);
  --line-strong: oklch(80% 0.008 55);
  --accent: oklch(52% 0.15 35);
  --accent-deep: oklch(45% 0.155 33);
  --accent-tint: oklch(94% 0.03 40);
  --field: oklch(99% 0.003 60);
  --r: 14px; --r-sm: 9px;
  --ease: cubic-bezier(.22,1,.36,1);
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", system-ui, -apple-system, sans-serif;
}
/* When Arabic is active, the Arabic face leads for both serif and sans roles
   (Spectral/Public Sans don't cover Arabic). */
[lang="ar"]{
  --serif: "Plex Arabic", "Spectral", Georgia, serif;
  --sans: "Plex Arabic", "Public Sans", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--ink); background:var(--paper);
  font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center; padding:48px 24px 64px;
}
@keyframes rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.wrap{width:100%; max-width:880px}

/* ---- top bar: back link + language toggle ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:36px; animation:rise .5s var(--ease) both}
.back{display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); text-decoration:none; font:500 14px/1 var(--sans); transition:color .25s var(--ease)}
.back:hover{color:var(--accent-deep)}
.back .arrow{font-size:16px; line-height:1}
[dir="rtl"] .back .arrow{transform:scaleX(-1)}
.langtoggle{display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden}
.langtoggle button{border:0; background:var(--field); color:var(--ink-soft); font:600 13px/1 var(--sans); padding:8px 15px; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease)}
.langtoggle button[aria-pressed=true]{background:var(--accent); color:var(--paper)}
.langtoggle button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---- header ---- */
header{margin-bottom:38px; animation:rise .5s .05s var(--ease) both}
h1{font:500 clamp(38px,6.5vw,58px)/1.04 var(--serif); margin:0; letter-spacing:-.015em; color:var(--ink)}
.lede{font:400 18px/1.6 var(--serif); color:var(--ink-soft); margin:16px 0 0; max-width:60ch; font-style:italic}
[lang="ar"] .lede{font-style:normal}
.meta{margin:18px 0 0; font:400 14px/1.6 var(--sans); color:var(--ink-faint); max-width:64ch}
.meta code{font:500 12.5px/1 var(--sans); color:var(--accent-deep); background:var(--accent-tint); padding:2px 7px; border-radius:5px; direction:ltr; display:inline-block; unicode-bidi:isolate}

/* ---- landing: tool cards as a flat list ---- */
.tool-index{list-style:none; margin:0; padding:0; border-top:1px solid var(--line); animation:rise .5s .12s var(--ease) both}
.tool-index li{border-bottom:1px solid var(--line)}
.tool-index a{
  display:flex; align-items:baseline; gap:18px; padding:24px 8px; text-decoration:none; color:inherit;
  transition:background .2s var(--ease), padding .25s var(--ease);
}
.tool-index a:hover{background:var(--paper-2)}
.tool-index a:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.ti-name{font:500 21px/1.2 var(--serif); color:var(--ink); flex:1; min-width:0}
.ti-desc{font:400 14px/1.5 var(--sans); color:var(--ink-faint); flex:2; min-width:0}
.ti-go{font:500 14px/1 var(--sans); color:var(--accent-deep); white-space:nowrap}
[dir="rtl"] .ti-go .chev{transform:scaleX(-1); display:inline-block}
@media (max-width:640px){
  .tool-index a{flex-direction:column; gap:6px}
  .ti-desc{flex:none}
}

/* ---- tool page header ---- */
.tool-head{margin:0 0 30px; max-width:64ch}
.tool-head h2{margin:0; font:500 30px/1.15 var(--serif); letter-spacing:-.01em; color:var(--ink)}
.tool-head p{margin:12px 0 0; color:var(--ink-soft); font-size:15.5px; line-height:1.65; max-width:62ch}

label{display:block; font:600 12px/1 var(--sans); letter-spacing:.02em; color:var(--ink-soft); margin:0 0 10px}
textarea, input[type=text]{
  width:100%; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:14px 15px;
  font:15px/1.65 var(--sans); color:var(--ink); background:var(--field); resize:vertical; min-height:150px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
textarea::placeholder{color:var(--ink-faint)}
textarea:focus, input:focus, select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint)}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---- QR ---- */
.qr-wrap{display:grid; grid-template-columns:1fr 300px; gap:44px}
@media (max-width:780px){ .qr-wrap{grid-template-columns:1fr; gap:32px} }
.qr-controls .field{margin-bottom:28px}
.qr-controls .field:last-child{margin-bottom:0}
#qr-content{min-height:84px}
.styles{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.style-btn{border:0; border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--field); padding:13px 15px; cursor:pointer; text-align:start; transition:background .25s var(--ease)}
.styles .style-btn:nth-child(2n){border-inline-end:0}
.styles .style-btn:nth-last-child(-n+2){border-bottom:0}
.style-btn:hover{background:var(--paper-2)}
.style-btn[aria-pressed=true]{background:var(--accent-tint)}
.style-btn .name{font:600 13.5px/1 var(--sans); color:var(--ink); display:block}
.style-btn[aria-pressed=true] .name{color:var(--accent-deep)}
.style-btn .desc{font:400 12px/1.35 var(--sans); color:var(--ink-faint); margin-top:4px; display:block}
.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden}
.seg button{border:0; background:var(--field); color:var(--ink-soft); font:500 13.5px/1 var(--sans); padding:11px 18px; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease)}
.seg button + button{border-inline-start:1px solid var(--line-strong)}
.seg button:hover{background:var(--paper-2)}
.seg button[aria-pressed=true]{background:var(--accent); color:var(--paper)}
.row{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.swatch{display:flex; align-items:center; gap:9px; font:400 13.5px/1 var(--sans); color:var(--ink-soft)}
.swatch input[type=color]{width:32px; height:32px; border:1px solid var(--line-strong); border-radius:7px; padding:0; background:none; cursor:pointer}
select{border:1px solid var(--line-strong); border-radius:7px; padding:9px 11px; font:13.5px/1 var(--sans); background:var(--field); color:var(--ink); cursor:pointer}
.preview{display:flex; flex-direction:column; align-items:center; gap:18px; position:sticky; top:24px}
#qr{width:280px; height:280px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line-strong); border-radius:var(--r); padding:18px}
#qr svg{width:100%; height:100%; display:block}
.empty{color:var(--ink-faint); font:14px/1.6 var(--sans); text-align:center}
.count{font:12px/1 var(--sans); color:var(--ink-faint); margin-top:8px; text-align:end}

/* ---- cleaner ---- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:4px}
@media (max-width:720px){ .grid{grid-template-columns:1fr} }
.opts{margin-top:30px; border-top:1px solid var(--line)}
.opts-title{font:600 13px/1 var(--sans); color:var(--ink); padding:16px 0 2px}
.opt{display:flex; align-items:flex-start; gap:13px; padding:13px 0; border-bottom:1px solid var(--line)}
.opt:last-child{border-bottom:0}
.opt input{margin-top:2px; accent-color:var(--accent); width:16px; height:16px; cursor:pointer}
.opt .lbl{font-size:14.5px; color:var(--ink)}
.opt .hint{display:block; font:400 12.5px/1.5 var(--sans); color:var(--ink-faint); margin-top:3px}
.stats{display:flex; gap:24px; flex-wrap:wrap; margin-top:20px; font:400 13.5px/1 var(--sans); color:var(--ink-soft)}
.stats b{color:var(--ink); font-weight:600}
.stats .pill{background:var(--accent-tint); color:var(--accent-deep); border-radius:999px; padding:4px 13px; font-weight:500; font-size:13px}
.stats .pill.zero{background:var(--paper-2); color:var(--ink-faint)}
.note{margin-top:28px; padding-inline-start:18px; border-inline-start:2px solid var(--accent); font:400 14px/1.65 var(--sans); color:var(--ink-soft); max-width:70ch}
.note b{color:var(--ink); font-weight:600}

/* ---- PDF + shrink shared ---- */
.dropzone{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1.5px dashed var(--line-strong); border-radius:var(--r); padding:34px 24px; background:var(--field); cursor:pointer; text-align:center; transition:border-color .25s var(--ease), background .25s var(--ease)}
.dropzone:hover, .dropzone:focus-visible{border-color:var(--accent); background:var(--paper-2); outline:none}
.dropzone.over{border-color:var(--accent); background:var(--accent-tint)}
.dz-main{font:500 15px/1.4 var(--sans); color:var(--ink)}
.dz-link{color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px}
.dz-sub{font:400 12.5px/1 var(--sans); color:var(--ink-faint)}

.pdf-ops{display:flex; gap:0; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; flex-wrap:wrap; width:fit-content; max-width:100%}
.pdf-op{border:0; border-inline-end:1px solid var(--line-strong); background:var(--field); color:var(--ink-soft); font:500 14px/1 var(--sans); padding:12px 18px; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease)}
.pdf-op:last-child{border-inline-end:0}
.pdf-op:hover{background:var(--paper-2)}
.pdf-op[aria-pressed=true]{background:var(--accent); color:var(--paper)}
.pdf-desc{margin:18px 0 22px; color:var(--ink-soft); font-size:14.5px; max-width:64ch}

.pdf-list{list-style:none; margin:18px 0 0; padding:0}
.pdf-list li{display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line)}
.pdf-list li:first-child{border-top:1px solid var(--line)}
.pdf-list .fname{flex:1; min-width:0; font:500 14px/1.3 var(--sans); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pdf-list .fmeta{font:400 12.5px/1 var(--sans); color:var(--ink-faint); white-space:nowrap}
.fbtn{border:0; background:transparent; color:var(--ink-faint); cursor:pointer; font:500 13px/1 var(--sans); padding:6px 8px; border-radius:6px; transition:color .2s var(--ease), background .2s var(--ease)}
.fbtn:hover{color:var(--accent-deep); background:var(--paper-2)}
.fbtn:disabled{opacity:.3; cursor:not-allowed}

.pdf-controls{margin-top:24px}
.pdf-ctl label{display:block; font:600 12px/1 var(--sans); letter-spacing:.02em; color:var(--ink-soft); margin:0 0 10px}
.pdf-ctl input[type=text]{min-height:auto; padding:12px 14px}
.ctl-hint{display:block; font:400 12.5px/1.5 var(--sans); color:var(--ink-faint); margin-top:8px}
.pdf-status{margin-top:16px; font:500 14px/1.5 var(--sans); color:var(--ink-soft); min-height:1px}
.pdf-status.ok{color:var(--accent-deep)}
.pdf-status.err{color:oklch(50% 0.17 25)}

.sk-file-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:18px}
.sk-fname{flex:1; min-width:0; font:500 14px/1.3 var(--sans); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sk-controls{margin-top:24px; display:flex; flex-direction:column; gap:24px}
.sk-ctl label{display:block; font:600 12px/1 var(--sans); letter-spacing:.02em; color:var(--ink-soft); margin:0 0 12px}
.sk-qval{color:var(--accent-deep); font-weight:700}
.sk-ctl input[type=range]{width:100%; accent-color:var(--accent); cursor:pointer}
.sk-result{margin-top:28px; padding-top:24px; border-top:1px solid var(--line)}
.sk-bars{display:flex; flex-direction:column; gap:12px}
.sk-bar{display:grid; grid-template-columns:84px 1fr auto; align-items:center; gap:14px}
.sk-bar-label{font:500 13px/1 var(--sans); color:var(--ink-soft)}
.sk-bar-track{height:14px; background:var(--paper-2); border-radius:999px; overflow:hidden}
.sk-bar-fill{display:block; height:100%; border-radius:999px; transition:width .5s var(--ease)}
.sk-bar-fill.orig{background:var(--line-strong)}
.sk-bar-fill.new{background:var(--accent)}
.sk-bar-val{font:600 13px/1 var(--sans); color:var(--ink); white-space:nowrap; min-width:64px; text-align:end}
.sk-savings{margin:18px 0 0; font:600 16px/1.4 var(--sans); color:var(--accent-deep)}
.sk-savings.none{color:var(--ink-soft); font-weight:500}

/* ---- shared buttons / toast / footer ---- */
.actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
button.cta{border:0; background:var(--accent); color:var(--paper); font:600 14.5px/1 var(--sans); padding:14px 22px; border-radius:var(--r-sm); cursor:pointer; transition:background .25s var(--ease), transform .12s var(--ease)}
button.cta:hover{background:var(--accent-deep)}
button.cta:active{transform:translateY(1px)}
button.ghost{border:1px solid var(--line-strong); background:transparent; color:var(--ink); font:500 14.5px/1 var(--sans); padding:14px 22px; border-radius:var(--r-sm); cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), transform .12s var(--ease)}
button.ghost:hover{background:var(--paper-2); border-color:var(--ink-faint)}
button.ghost:active{transform:translateY(1px)}
button.cta:disabled, button.ghost:disabled{opacity:.42; cursor:not-allowed; transform:none}
.toast{position:fixed; bottom:28px; inset-inline-start:50%; transform:translateX(-50%) translateY(14px); background:var(--ink); color:var(--paper); border-radius:var(--r-sm); padding:12px 20px; font:500 13.5px/1 var(--sans); opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); z-index:30}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
footer{margin-top:56px; padding-top:24px; border-top:1px solid var(--line); font:400 13px/1.6 var(--sans); color:var(--ink-faint); width:100%; max-width:880px}
footer .sep{opacity:.5; margin:0 9px}

[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* ---- small layout helpers (replaces inline style attrs for strict CSP) ---- */
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.m-0{margin:0}
.preview-actions{width:100%; margin-top:0}
.flex-1{flex:1}