/* ---------------------------------------------------------------------------------------------
   Shared stylesheet for the guide pages (/guide/*.html).

   Why this is a file and not inlined like index.html
   --------------------------------------------------
   index.html inlines everything because it is one page and first paint is the whole game there.
   The guides are a growing set that people read several of in a row, so one cached stylesheet
   beats the same 6 KB pasted into every page. It is same-origin — nginx already serves .css with
   `expires 30d; immutable` — so the no-external-hosts rule is untouched: nothing here reaches
   another host, which was always the actual point.

   Tokens are copied from index.src.html rather than shared, because there is nothing to share
   them through without a build step that does not exist. If the brand colours change, they change
   in two places.
   --------------------------------------------------------------------------------------------- */

@font-face{font-family:Vazirmatn;src:url(/assets/fonts/vazirmatn-33.0.3.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}


:root{
  --brand:#0d9dcf; --brand-lt:#25b2d9; --brand-dp:#075a86; --navy:#01123e;
  --ink:#0a1a33; --ink-2:#173a63; --muted:#5b6e85; --faint:#8a9bad;
  --bg:#ffffff; --soft:#f4f8fc; --line:#e4ecf4;
  --ok:#12a670; --warn:#d98324; --bad:#d64550;
  --r:18px; --wrap:820px;
  --shadow:0 1px 2px rgba(10,26,51,.04), 0 12px 32px -12px rgba(10,26,51,.10);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Vazirmatn,system-ui,"Segoe UI",Tahoma,sans-serif;
  line-height:1.9; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand-dp); text-decoration:none}
a:hover{color:var(--brand)}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:22px}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--line); background:var(--bg)}
.bar{display:flex; align-items:center; gap:12px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--ink)}
.brand img{width:34px; height:34px; display:block}
.bar .cta{margin-inline-start:auto}

/* ---------- breadcrumb ---------- */
.crumb{font-size:13px; color:var(--faint); padding-block:18px 0}
.crumb a{color:var(--muted)}
.crumb span{margin-inline:6px}

/* ---------- article ---------- */
article{padding-block:24px 72px}
h1{font-size:clamp(26px,4.6vw,40px); font-weight:700; line-height:1.3; margin:10px 0 0}
.lead{color:var(--muted); font-size:clamp(15px,2vw,18px); margin:14px 0 0}
h2{font-size:clamp(21px,3.2vw,27px); font-weight:700; line-height:1.35; margin:48px 0 0}
h3{font-size:17px; font-weight:700; margin:28px 0 0}
p{margin:14px 0 0}
.meta{font-size:13px; color:var(--faint); margin-top:14px}

/* ---------- steps ---------- */
ol.steps{list-style:none; counter-reset:s; padding:0; margin:26px 0 0}
ol.steps > li{
  counter-increment:s; position:relative; padding-inline-start:52px; padding-block:0 26px;
}
ol.steps > li::before{
  content:counter(s); position:absolute; inset-inline-start:0; top:2px;
  width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums;
}
/* The connecting rail. pointer-events:none because a full-bleed decoration that swallows clicks
   has already cost this project an afternoon once — see the site README. */
ol.steps > li:not(:last-child)::after{
  content:""; position:absolute; inset-inline-start:16px; top:40px; bottom:6px;
  width:2px; background:var(--line); pointer-events:none;
}
ol.steps > li > *:first-child{margin-top:0}
ol.steps b{display:block; font-size:17px; margin-bottom:2px}

/* ---------- screenshots ----------
   Phone screenshots are tall. Uncapped, one fills a desktop screen and pushes the next step out
   of sight, which defeats the point of a numbered walkthrough. 300px keeps a screen legible
   while the step text stays beside it in view.
   width/height attributes go on every <img> so the browser reserves the space before the file
   arrives — without them the page jumps as each shot loads, which Google measures as CLS. */
figure.shot{margin:16px 0 0}
figure.shot img{
  display:block; width:100%; max-width:300px; height:auto;
  border-radius:14px; border:1px solid var(--line); background:var(--soft);
}
figure.shot figcaption{font-size:13px; color:var(--muted); margin-top:8px; max-width:300px}

/* ---------- call-outs ---------- */
.note, .warnbox{
  border-radius:var(--r); padding:16px 20px; margin:26px 0 0; font-size:15px;
  border:1px solid var(--line); background:var(--soft);
}
.warnbox{border-color:#f3ddc4; background:#fdf6ec}
.note p:first-child, .warnbox p:first-child{margin-top:0}
.note b, .warnbox b{color:var(--ink)}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em;
  background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:1px 6px;
  direction:ltr; display:inline-block;
}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line); padding:6px 0}
summary{cursor:pointer; font-weight:700; padding:12px 0; list-style:none; position:relative; padding-inline-start:25px}
summary::-webkit-details-marker{display:none}
summary::before{
  content:""; position:absolute; inset-inline-start:2px; top:20px; width:8px; height:8px;
  border-inline-end:2px solid var(--brand); border-block-end:2px solid var(--brand);
  transform:rotate(45deg); transition:transform .18s;
}
details[open] summary::before{transform:rotate(-135deg); margin-block-start:3px}
details p{color:var(--muted); font-size:15px; margin:0 0 18px; padding-inline-start:25px}

/* ---------- cta ---------- */
.cta-band{
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:clamp(26px,5vw,40px); margin-top:56px; text-align:center;
}
.cta-band h2{margin:0}
.cta-band .lead{margin-inline:auto; max-width:52ch}
.row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
a.btn{
  display:inline-block; padding:13px 26px; border-radius:12px;
  font-weight:700; font-size:15px; transition:filter .15s, background .15s;
}
a.primary{background:var(--brand); color:#fff}
a.primary:hover{filter:brightness(1.08); color:#fff}
a.ghost{border:1px solid var(--line); color:var(--ink)}
a.ghost:hover{background:var(--soft); color:var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding-block:28px; color:var(--faint); font-size:14px}
footer .bar{height:auto; gap:20px; flex-wrap:wrap}
footer a{color:var(--muted)}