/* خطّ — old letters. Four skins chosen by the writer: data-skin="t1..t4" on <html>.
   Each skin is a deliberate single look (paper world), so no dark-mode variant. */
:root,[data-skin="t1"]{ /* ورق عتيق */
  --bg:#EFE3CC; --sheet:#F7EEDC; --ink:#3B2618; --muted:#7A5F48; --line:#D9C6A6; --soft:#E5D4B4;
  --btn:#3B2618; --btn-ink:#F4EAD6; --seal:#8A2A22; --seal-hi:#B9473C; --on-seal:#F3D9C4;
  --env:#E3CFAA; --flap:#D8C095; --env-ink:#3B2618; --paper:#F5EAD3; --letter-ink:#3B2618;
  --band:#8A2A22; --edge:0;
  --tex:radial-gradient(ellipse at 20% 0%,rgb(255 255 255/.35),transparent 60%),radial-gradient(ellipse at 100% 100%,rgb(120 80 30/.18),transparent 55%);
  --paper-tex:radial-gradient(ellipse at 0 0,rgb(140 100 40/.18),transparent 45%),radial-gradient(ellipse at 100% 100%,rgb(140 100 40/.2),transparent 50%);
  --overlay:rgb(40 25 15/.55);
  color-scheme:light;
}
[data-skin="t2"]{ /* حبر وشمعة */
  --bg:#2A1D16; --sheet:#35261D; --ink:#E9D3A8; --muted:#B79B76; --line:#4A382B; --soft:#3E2D22;
  --btn:#C9A35A; --btn-ink:#2A1D16; --seal:#9E2B25; --seal-hi:#D4574B; --on-seal:#F6D9B5;
  --env:#3A2A20; --flap:#47342A; --env-ink:#E9D3A8; --paper:#F1E2C2; --letter-ink:#2E2015;
  --band:#C9A35A; --edge:.8;
  --tex:radial-gradient(circle at 80% 0%,rgb(255 190 90/.14),transparent 45%);
  --paper-tex:radial-gradient(ellipse at 100% 0,rgb(130 80 20/.22),transparent 50%);
  --overlay:rgb(15 8 4/.7);
  color-scheme:dark;
}
[data-skin="t3"]{ /* ورد مجفف */
  --bg:#F2E1DD; --sheet:#FBF1EE; --ink:#4E2537; --muted:#8C6070; --line:#E2C3C0; --soft:#EBD0CC;
  --btn:#6E3048; --btn-ink:#FBEFEC; --seal:#7A2E4A; --seal-hi:#A85574; --on-seal:#FBE3EA;
  --env:#EBCFCB; --flap:#E2BDB8; --env-ink:#4E2537; --paper:#FBF1EC; --letter-ink:#4E2537;
  --band:#B9707F; --edge:0;
  --tex:radial-gradient(ellipse at 0 0,rgb(255 255 255/.45),transparent 55%);
  --paper-tex:radial-gradient(circle at 90% 8%,rgb(185 112 127/.18),transparent 30%);
  --overlay:rgb(60 25 40/.5);
  color-scheme:light;
}
[data-skin="t4"]{ /* سدو */
  --bg:#EADBC2; --sheet:#F3E7D2; --ink:#2A1B14; --muted:#6E5644; --line:#D3BE9C; --soft:#E0CDAD;
  --btn:#7E1F1A; --btn-ink:#F6E9D6; --seal:#7E1F1A; --seal-hi:#A8382F; --on-seal:#F6E9D6;
  --env:#E2CDA9; --flap:#D6BD93; --env-ink:#2A1B14; --paper:#F3E7D2; --letter-ink:#2A1B14;
  --band:linear-gradient(135deg,transparent 33%,#7E1F1A 33% 50%,transparent 50% 83%,#7E1F1A 83%) 0 0/14px 100%,#2A1B14; --edge:1;
  --tex:linear-gradient(transparent 94%,rgb(126 31 26/.06) 94%) 0 0/100% 28px;
  --paper-tex:radial-gradient(ellipse at 0 100%,rgb(120 80 30/.2),transparent 50%);
  --overlay:rgb(30 18 12/.55);
  color-scheme:light;
}
:root{
  --display:"Aref Ruqaa","Traditional Arabic",serif;
  --serif:"Amiri","Traditional Arabic",serif;
  --body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--bg)}
body{background:var(--bg);background-image:var(--tex);background-attachment:fixed;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75;direction:rtl;
  -webkit-tap-highlight-color:transparent;min-height:100vh;transition:background-color .3s,color .3s;
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:22px;padding-top:18px}
h1,h2,.ruqaa{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance}
h2{font-size:1.8rem;line-height:1.5}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.center{text-align:center}
.band{height:8px;border-radius:2px;background:var(--band)}

/* brand */
.brand{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--display);font-weight:700;font-size:2rem;line-height:1.5;color:var(--ink);text-decoration:none}

/* buttons & fields */
button,.btn{font:inherit;font-weight:600;cursor:pointer;border-radius:12px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);padding:13px 18px;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px}
.primary{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.ghost{background:transparent;border-color:transparent;color:var(--muted);min-height:40px;padding:8px 10px}
.wide{width:100%}
button:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
button:disabled{opacity:.5;cursor:default}
label{display:block;font-weight:600;font-size:.9rem;color:var(--muted);margin-bottom:6px}
input,textarea{width:100%;font:inherit;color:var(--ink);background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
textarea.letter{min-height:46vh;font-family:var(--serif);font-size:1.15rem;line-height:2.1;resize:vertical;border-radius:3px;color:var(--letter-ink);
  background:var(--paper);background-image:linear-gradient(transparent calc(2.1em - 1px),rgb(120 80 40/.18) calc(2.1em - 1px)),var(--paper-tex);background-size:100% 2.1em,auto;background-attachment:local;padding-top:2px}
textarea.letter::placeholder{color:rgb(120 90 60/.6)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px}
.row>*{flex:1 1 0;min-width:0}
.err{color:var(--seal);font-size:.9rem;font-weight:600}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:8px 14px;border-radius:999px;font-weight:500;font-size:.95rem}
.chip[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--soft);padding:5px;border-radius:14px}
.seg button{border:none;background:transparent;min-height:42px}
.seg button[aria-pressed="true"]{background:var(--sheet);box-shadow:0 1px 3px rgb(0 0 0/.15)}

/* skin picker */
.skins{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.skin{flex-direction:column;gap:6px;padding:8px 4px 6px;min-height:0;border-radius:12px;font-weight:500;font-size:.8rem;line-height:1.3}
.skin[aria-pressed="true"]{border:2px solid var(--ink)}
.skin .sw{width:100%;aspect-ratio:1.4;border-radius:4px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgb(0 0 0/.2)}
.skin .sw::before{content:"";position:absolute;inset:0 0 auto;height:55%;clip-path:polygon(0 0,100% 0,50% 100%);background:var(--f)}
.skin .sw i{position:absolute;top:55%;left:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:var(--s)}

/* steps */
.steps{display:flex;gap:6px}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.steps i.on{background:var(--ink)}

/* landing */
.hero{display:flex;flex-direction:column;gap:12px;padding-block:20px 4px}
.hero h1{font-size:clamp(4.5rem,24vw,6.5rem);line-height:1.55;padding-top:.15em}
.hero .tag{font-family:var(--serif);font-size:1.35rem;line-height:1.8}
.how{display:flex;flex-direction:column;gap:10px;counter-reset:s;padding:0;margin:0}
.how li{list-style:none;display:flex;gap:12px;align-items:center}
.how li::before{counter-increment:s;content:counter(s,arabic-indic);font-family:var(--serif);font-weight:700;width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--seal)}

/* envelope */
.envs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.env{position:relative;width:100%;aspect-ratio:1.15;max-width:100%;padding:0;border:none;border-radius:4px;background:var(--env);background-image:var(--paper-tex);color:var(--env-ink);overflow:hidden;
  box-shadow:0 2px 8px rgb(0 0 0/.18);display:block;text-align:center;transition:transform .18s}
.env .flap{position:absolute;inset:0 0 auto 0;height:44%;background:var(--flap);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 2px rgb(0 0 0/.15))}
.env .edge{position:absolute;inset:auto 0 0;height:8px;background:var(--band);opacity:var(--edge)}
.seal{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);width:46px;height:46px;border-radius:46% 54% 50% 50%/52% 48% 52% 48%;
  background:radial-gradient(circle at 35% 30%,var(--seal-hi),var(--seal) 60%);color:var(--on-seal);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.25rem;
  box-shadow:0 2px 4px rgb(0 0 0/.3),inset 0 0 0 4px rgb(0 0 0/.12)}
.env .cap{position:absolute;inset:auto 8px 16px;font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.4}
.env .cap small{display:block;font-family:var(--body);font-weight:500;font-size:.72rem;opacity:.75}
.env:active{transform:scale(.98)}
.env.locked .seal{filter:grayscale(.7) brightness(.9)}
.env.opened{opacity:.8}
.env.opened .flap{height:0}
.env.opened .seal{background:transparent;color:var(--seal);border:1.5px dashed var(--seal);box-shadow:none;top:38%}

/* writer list items */
.item{display:flex;gap:12px;align-items:center;background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:right;width:100%;justify-content:flex-start;min-height:64px}
.item .mini{width:44px;height:32px;flex:none;border-radius:3px;background:var(--env);position:relative;overflow:hidden;box-shadow:0 1px 2px rgb(0 0 0/.2)}
.item .mini::before{content:"";position:absolute;inset:0 0 auto;height:55%;background:var(--flap);clip-path:polygon(0 0,100% 0,50% 100%)}
.item .mini::after{content:"";position:absolute;top:55%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:var(--seal)}
.item .txt{min-width:0;display:flex;flex-direction:column}
.item .txt b{font-family:var(--display);font-size:1.15rem;font-weight:700;line-height:1.5}
.item .txt span{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}

/* opened letter */
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:var(--overlay);backdrop-filter:blur(4px);
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.paper{width:100%;max-width:470px;max-height:86vh;overflow:auto;background:var(--paper);background-image:var(--paper-tex);color:var(--letter-ink);border-radius:3px;padding:28px 22px 22px;
  display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 40px rgb(0 0 0/.35);animation:unfold .6s cubic-bezier(.2,.8,.2,1);transform:rotate(.6deg)}
.paper .body{white-space:pre-wrap;font-family:var(--serif);font-size:1.2rem;line-height:2.1}
.paper .sign{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--seal);text-align:left;line-height:1.5}
.paper .q{font-family:var(--display);font-weight:700;font-size:1.9rem;text-align:center;line-height:1.6}
.paper .muted{color:rgb(90 65 45/.75)}
.paper button{background:transparent;color:var(--letter-ink);border-color:rgb(90 60 30/.3)}
.paper button.primary{background:var(--seal);color:var(--on-seal);border-color:var(--seal)}
.label{font-size:.82rem;font-weight:600;color:var(--seal)}
@keyframes unfold{from{opacity:0;transform:translateY(30px) rotate(-2deg) scale(.96)}to{opacity:1;transform:rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.paper{animation:none}.env,body{transition:none}}

.linkbig{direction:ltr;font-size:1.3rem;font-weight:600;text-align:center;background:var(--sheet);border:1px dashed var(--line);border-radius:12px;padding:14px;word-break:break-all;user-select:all}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--btn);color:var(--btn-ink);padding:10px 18px;border-radius:999px;font-weight:600;z-index:40}