/* THE FORGE: The Sabr Fort (free resource). Shares tokens with ../styles.css. */
.sf { max-width: 820px; margin: 0 auto; padding: 56px 20px 120px; }
.back { display:inline-block; margin-bottom:26px; color:var(--muted); font-size:13px; font-weight:700;
        letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; }
.back:hover { color: var(--gold); }
.kicker { font-size:11px; font-weight:800; letter-spacing:3.5px; text-transform:uppercase; color:var(--gold); }
.sf h1 { font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(38px,8.5vw,68px); line-height:1.02;
         letter-spacing:-1.5px; text-transform:uppercase; margin:14px 0 18px; text-wrap:balance; }
.sf h2 { font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(28px,5.5vw,40px); line-height:1.05;
         text-transform:uppercase; letter-spacing:-.5px; margin:0 0 14px; text-wrap:balance; }
.lede { color:#D1D5DB; font-size:17.5px; line-height:1.75; max-width:64ch; text-wrap:pretty; }
.lede b, .body b { color:#fff; }
.body { color:#C9CDD3; font-size:16px; line-height:1.75; text-wrap:pretty; }
.body + .body { margin-top:12px; }
section.blk { margin-top:56px; }

/* ── Arabic + citations ─────────────────────────────────────── */
.ar { font-family:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif; direction:rtl; text-align:right;
      font-size:23px; line-height:2.05; color:#F5F1E3; }
.ar.lg { font-size:26px; }
.ref { display:block; margin-top:6px; font-size:12.5px; font-style:italic; color:var(--faint); line-height:1.5; }
.ref[dir="rtl"] { text-align:right; }
.tr { color:#D9DCE1; font-size:15.5px; line-height:1.7; margin-top:10px; text-wrap:pretty; }
/* Verse-end numbers (Arabic) and verse numbers in the English */
.an { color:var(--gold); font-size:.78em; white-space:nowrap; margin:0 .1em; }
.vn { color:var(--gold); font-weight:800; font-size:.72em; margin:0 3px 0 2px; }
.ar b { color:#fff; font-weight:700; }
.answer { color:var(--faint); font-style:italic; font-size:15px; line-height:1.6; padding:10px 14px;
          border-left:3px solid var(--line-2); margin-top:4px; }
.tr .lbl { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
           color:var(--gold); margin-right:6px; }
.quote { border-left:3px solid var(--gold); background:linear-gradient(90deg, rgba(250,204,21,.06), transparent 70%);
         padding:16px 18px; margin:18px 0; border-radius:0 10px 10px 0; }
.ev { border:1px solid var(--line); background:var(--panel); padding:16px 18px; border-radius:12px; margin:12px 0; }
.hsrc { display:inline-block; margin-top:8px; font-size:12.5px; font-weight:700; color:var(--gold); text-decoration:none;
        padding:6px 0; min-height:32px; }
.hsrc:hover, .hsrc:focus-visible { text-decoration:underline; }
.ev .tag { font-size:10.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--blue); }

/* ── Panic panel + nav ──────────────────────────────────────── */
.panic { margin-top:34px; border:2px solid var(--gold); border-radius:16px; padding:22px; background:
         radial-gradient(120% 140% at 0% 0%, rgba(250,204,21,.12), transparent 60%), var(--panel); }
.panic h3 { font-family:'Anton',sans-serif; font-weight:400; font-size:26px; text-transform:uppercase; letter-spacing:.3px; text-wrap:balance; }
.panic ol { margin:12px 0 16px 20px; color:#E5E7EB; line-height:1.8; font-size:15.5px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.sbtn { font:800 13px/1 'Inter',sans-serif; letter-spacing:1.6px; text-transform:uppercase; padding:14px 18px;
        border-radius:10px; border:1.5px solid var(--line-2); background:transparent; color:#fff; cursor:pointer;
        min-height:44px; touch-action:manipulation; transition:transform .15s ease, border-color .15s ease, background .15s ease; }
.sbtn:hover { border-color:var(--gold); }
.sbtn:active { transform:scale(.97); }
.sbtn.gold { background:var(--gold); color:#000; border-color:var(--gold); }
.sbtn:focus-visible, .chips a:focus-visible, .fld:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.chips a { min-width:44px; min-height:44px; display:grid; place-items:center; padding:0 12px; border-radius:10px;
           border:1px solid var(--line-2); color:#fff; text-decoration:none; font-weight:800; font-size:14px; }
.chips a:hover { border-color:var(--gold); color:var(--gold); }

/* ── Sin name ───────────────────────────────────────────────── */
.name { margin-top:28px; padding:20px; border:1px dashed var(--line-2); border-radius:14px; }
.name label { display:block; font-size:11px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.name small { display:block; color:var(--faint); font-size:12.5px; margin-top:8px; line-height:1.5; }
.sin { color:var(--gold); font-weight:700; }

/* ── Sabr types ─────────────────────────────────────────────── */
.types { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
/* Same order as the Arabic above it, which reads right to left: the first one
   named (away from sin) sits on the right. Stacked on phones, it comes first. */
@media (min-width:641px) { .types { direction:rtl; } .types > div { direction:ltr; } }
.types div { border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:16px; }
.types .ar { font-size:21px; line-height:1.7; }
.types p { color:#D1D5DB; font-size:14.5px; line-height:1.55; margin-top:6px; }
.types div.on { border-color:var(--gold); }
@media (max-width:640px) { .types { grid-template-columns:1fr; } }

/* ── Walls ──────────────────────────────────────────────────── */
.wall { margin-top:40px; border:1px solid var(--line-2); border-radius:18px; background:var(--bg-soft); overflow:hidden;
        scroll-margin-top:16px; transition:box-shadow .4s ease, border-color .4s ease; }
.wall.flash { border-color:var(--gold); box-shadow:0 0 0 3px rgba(250,204,21,.25); }
.whead { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:22px 22px 18px;
         border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.03), transparent); }
.wnum { font-family:'Anton',sans-serif; font-size:58px; line-height:.9; color:transparent; -webkit-text-stroke:1.5px var(--gold); }
.whead h2 { margin:0; font-size:clamp(24px,4.6vw,32px); }
.whead .ar { font-size:20px; line-height:1.6; text-align:left; direction:rtl; color:var(--gold); margin-top:2px; }
.wbody { padding:20px 22px 24px; }
.drill { margin-top:22px; border-radius:14px; padding:18px; background:rgba(250,204,21,.05); border:1px solid rgba(250,204,21,.28); }
.drill h3 { font-size:11.5px; font-weight:900; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.drill .how { color:#D1D5DB; font-size:14.5px; line-height:1.6; margin-bottom:12px; }
.lines { list-style:none; counter-reset:l; display:grid; gap:8px; }
.lines li { counter-increment:l; display:grid; grid-template-columns:26px 1fr; gap:8px; align-items:start; }
.lines li::before { content:counter(l); font-weight:800; color:var(--faint); font-size:13px; padding-top:12px; text-align:right; }
.fld { width:100%; background:#0B0B0B; border:1.5px solid var(--line-2); color:#fff; border-radius:9px;
       font:500 16px/1.5 'Inter',sans-serif; padding:10px 12px; resize:vertical; min-height:44px; }
.fld:focus { outline:none; border-color:var(--gold); }
textarea.fld { min-height:72px; }
.pv { display:none; }
.say { display:grid; gap:8px; margin-top:8px; }
.say p { border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:#F3F4F6; font-size:15.5px; line-height:1.55; background:var(--panel); }
.ticks { display:grid; gap:8px; }
.ticks label { display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; padding:10px 12px; border:1px solid var(--line);
               border-radius:10px; background:var(--panel); cursor:pointer; min-height:44px; }
.ticks input { width:20px; height:20px; accent-color:var(--gold); margin-top:2px; }
.ticks .ar { font-size:18px; line-height:1.6; display:block; }
.ticks span small { display:block; color:#D1D5DB; font-size:14px; }
.scenes { display:grid; gap:10px; }
.scenes .ev { margin:0; }
.names { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.names .ev { margin:0; }
.names .ar { font-size:24px; line-height:1.4; text-align:right; }
.timer { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:6px 0 14px; }
.timer output { font:400 34px/1 'Anton',sans-serif; color:var(--gold); min-width:84px; font-variant-numeric:tabular-nums; }
.excess { display:grid; gap:10px; }
.excess > div { display:grid; grid-template-columns:120px 1fr 1fr; gap:8px; align-items:start; }
.excess b { padding-top:12px; font-size:14px; }
@media (max-width:640px) { .excess > div { grid-template-columns:1fr; } .excess b { padding-top:4px; } }

/* ── Habits vs sins ─────────────────────────────────────────── */
.venn { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.venn div { border-radius:12px; padding:16px; border:1px solid var(--line); background:var(--panel); }
.venn div:first-child { border-color:rgba(226,75,74,.5); }
.venn h4 { font-size:12px; letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; }
.venn p { color:#D1D5DB; font-size:14.5px; line-height:1.6; }
@media (max-width:640px) { .venn { grid-template-columns:1fr; } }

/* ── Save bar + CTA ─────────────────────────────────────────── */
.savebar { margin-top:48px; padding:20px; border:1px solid var(--line-2); border-radius:16px; background:var(--panel); }
.savebar p { color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:10px; }
.cta { margin-top:56px; border:2px solid var(--gold); border-radius:18px; padding:26px 22px;
       background:radial-gradient(120% 120% at 100% 0%, rgba(250,204,21,.12), transparent 60%), var(--panel); }
.cta h2 { margin-bottom:10px; }
.cta p.body { margin-bottom:16px; }
.cta form { display:grid; grid-template-columns:1fr auto; gap:10px; }
.cta input[type=email] { background:var(--bg); border:2px solid var(--line-2); color:#fff; font:600 16px 'Inter',sans-serif;
                         padding:13px 14px; border-radius:10px; min-height:48px; width:100%; }
.cta input[type=email]:focus { outline:none; border-color:var(--gold); }
@media (max-width:560px) { .cta form { grid-template-columns:1fr; } }
.wl-note { font-size:13.5px; font-weight:700; margin-top:12px; min-height:1em; }
.wl-note.ok { color:var(--green); } .wl-note.err { color:var(--red); }
.fine { font-size:12px; color:var(--faint); margin-top:12px; line-height:1.55; }
.srcnote { margin-top:40px; font-size:12.5px; color:var(--faint); line-height:1.65; }

@media (prefers-reduced-motion: reduce) { .wall, .sbtn { transition:none; } html { scroll-behavior:auto; } }

/* ── Print / Save as PDF ────────────────────────────────────── */
@media print {
  @page { margin: 0; size: A4; }
  html, body { background:#0A0A0A !important; color:#fff !important;
               -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .sf { padding:14mm; max-width:none; }
  .back, .panic, .chips, .savebar, .cta, .timer, nav, footer, .noprint { display:none !important; }
  .wall { break-inside:auto; margin-top:16px; }
  .whead { break-after:avoid; page-break-after:avoid; }
  .ev, .lines li, .ticks label { break-inside:avoid; }
  .quote, .drill { break-inside:auto; }
  .fld { display:none !important; }
  .pv { display:block; white-space:pre-wrap; border-bottom:1px solid #444; min-height:1.6em; padding:4px 2px;
        font:14px/1.5 'Inter',sans-serif; color:#fff; }
}