/* Setup guide — leans on styles.css for tokens, buttons and the top bar. */

.bar .pill{ text-decoration:none }

.intro h1{ margin:0 0 8px; font-size:22px; letter-spacing:-.02em }
.intro p{ margin:0; color:var(--ink-dim); font-size:15px }
.intro b{ color:var(--ink) }

/* The one thing people get wrong: trying to install on the phone. */
.callout{
  display:flex; gap:12px; align-items:flex-start;
  background:#1a1608; border:1px solid #4a3c10; border-radius:var(--r); padding:14px 16px;
}
.callout-icon{ font-size:20px; line-height:1.3; flex:none }
.callout-title{ font-weight:700; font-size:15px; color:#fde68a; margin-bottom:4px }
.callout-body{ font-size:14px; color:#d6c690; line-height:1.5 }

.step{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:16px;
}
.step p{ margin:0 0 12px; font-size:15px; color:var(--ink-dim); line-height:1.55 }
.step p b{ color:var(--ink) }
.step p.muted{ font-size:13.5px; color:var(--ink-faint) }
.step .btn-lg{ display:block; text-align:center; text-decoration:none; margin-bottom:12px }
.step > a.btn-lg:last-child{ margin-bottom:0 }

.step-head{ display:flex; align-items:center; gap:11px; margin-bottom:12px }
.step-head h2{ margin:0; font-size:17px; letter-spacing:-.01em; line-height:1.3 }
.step-num{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  font-size:14px; font-weight:700;
}
.step-num-done{ background:var(--ok); color:#052e16 }
.step-num-q{ background:var(--card-2); color:var(--ink-dim); border:1px solid var(--line) }

/* chrome://extensions can't be a link — it gets copied instead. */
.copyrow{ display:flex; gap:8px; align-items:stretch; margin-bottom:10px }
.copyrow code{
  flex:1; min-width:0; background:var(--card-2); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; color:var(--accent);
  font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:flex; align-items:center; overflow-x:auto; white-space:nowrap;
}
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; color:var(--accent) }

/* ---- the drawings ---- */
.shot{ margin:0 0 12px }
.shot svg{
  display:block; width:100%; height:auto;
  background:var(--card-2); border:1px solid var(--line); border-radius:11px;
}
.shot figcaption{
  margin-top:7px; font-size:12.5px; color:var(--ink-faint);
  text-align:center; line-height:1.45;
}
.s-win{ fill:#0e141b; stroke:#2b3746 }
.s-phone{ fill:#0e141b; stroke:#37475a; stroke-width:1.5 }
.s-screen,.s-panel{ fill:#161e28; stroke:#2b3746 }
.s-head{ fill:#131b24 }
.s-bar{ fill:#1c2632; stroke:#2b3746 }
.s-ghost{ fill:#1c2632; stroke:#33404f }
.s-dot{ fill:#33404f }
.s-sel{ fill:#123043; stroke:#38bdf8 }
.s-on{ fill:#0e7490 }
.s-knob{ fill:#e8eef6 }
.s-btn-hi,.s-accent{ fill:#38bdf8 }
.s-red{ fill:#c81e1e }
.s-green,.s-ok{ fill:#22c55e }
.s-underline{ fill:#ef4444 }
.s-arrow{ stroke:#38bdf8; stroke-width:1.6; fill:none; stroke-linecap:round }
.s-url{ fill:#93a3b6; font:9px ui-monospace,Menlo,monospace }
.s-h1{ fill:#e8eef6; font:bold 11px system-ui,sans-serif }
.s-brand{ fill:#ef4444; font:bold 12px system-ui,sans-serif }
.s-small{ fill:#93a3b6; font:8.5px system-ui,sans-serif }
.s-folder{ fill:#e8eef6; font:9px system-ui,sans-serif }
.s-btn-tx{ fill:#04212f; font:bold 9px system-ui,sans-serif }
.s-red + .s-btn-tx,text.s-btn-tx{ }
.s-btn-dark{ fill:#04212f; font:bold 9.5px system-ui,sans-serif }
.s-tab-on{ fill:#ef4444; font:bold 8.5px system-ui,sans-serif }
.s-code{ fill:#22c55e; font:bold 20px ui-monospace,Menlo,monospace; letter-spacing:2px }
.s-code-sm{ fill:#38bdf8; font:bold 15px ui-monospace,Menlo,monospace; letter-spacing:2px }
.s-ok{ font:bold 9px system-ui,sans-serif }

/* ---- collapsible extras ---- */
.aside{
  background:var(--card-2); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; margin-bottom:9px;
}
.aside:last-child{ margin-bottom:0 }
.aside summary{
  cursor:pointer; font-size:14.5px; font-weight:600; color:var(--ink);
  list-style:none; display:flex; align-items:center; gap:8px;
}
.aside summary::-webkit-details-marker{ display:none }
.aside summary::before{ content:'+'; color:var(--accent); font-weight:700; width:12px }
.aside[open] summary::before{ content:'–' }
.aside p{ margin:10px 0 0; font-size:14px; color:var(--ink-dim); line-height:1.55 }
.aside p b{ color:var(--ink) }

.link{ color:var(--accent); font-size:14px; text-decoration:none; font-weight:600 }
.link:hover{ text-decoration:underline }
.aside .link{ display:inline-block; margin-top:10px }
.foot a.link{ font-size:13px }