/* Saara guide — shared stylesheet for all help topic pages */
:root{
  --bg:#faf5ef;--surface:#fffdfb;--surface-2:#f2e9e1;--border:#e6d8cd;
  --text:#231913;--muted:#6d5c52;--faint:#9a8879;
  --accent:#c23d2a;--accent-2:#e2664a;--accent-soft:rgba(194,61,42,.09);
  --keep:#2f8f63;--gold:#b9862f;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --maxw:48rem;
}
@media (prefers-color-scheme:dark){:root{--bg:#140e0c;--surface:#1e1613;--surface-2:#291d18;--border:#392a23;--text:#f0e7e0;--muted:#b6a49a;--faint:#7c6a60;--accent:#e2543f;--accent-2:#f47a5f;--accent-soft:rgba(226,84,63,.12);--keep:#5fbf8f;--gold:#d9a441;}}
:root[data-theme="light"]{--bg:#faf5ef;--surface:#fffdfb;--surface-2:#f2e9e1;--border:#e6d8cd;--text:#231913;--muted:#6d5c52;--faint:#9a8879;--accent:#c23d2a;--accent-2:#e2664a;--accent-soft:rgba(194,61,42,.09);--keep:#2f8f63;--gold:#b9862f;}
:root[data-theme="dark"]{--bg:#140e0c;--surface:#1e1613;--surface-2:#291d18;--border:#392a23;--text:#f0e7e0;--muted:#b6a49a;--faint:#7c6a60;--accent:#e2543f;--accent-2:#f47a5f;--accent-soft:rgba(226,84,63,.12);--keep:#5fbf8f;--gold:#d9a441;}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}

nav.top{border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.navrow{display:flex;align-items:center;justify-content:space-between;height:58px;max-width:56rem;margin:0 auto;padding:0 clamp(1.1rem,4vw,1.6rem)}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.1rem;color:var(--text);text-decoration:none}
.mark{width:24px;height:24px;border-radius:7px;background:linear-gradient(145deg,var(--accent-2),var(--accent));display:grid;place-items:center;color:#fff}
.mark svg{width:14px;height:14px}
.navlinks{display:flex;gap:1.3rem;font-size:.9rem}
.navlinks a{color:var(--muted);text-decoration:none}.navlinks a:hover{color:var(--text)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,1.6rem) 4rem}
.crumb{display:inline-block;margin:1.4rem 0 .2rem;font-size:.9rem;color:var(--muted);text-decoration:none;font-family:var(--font-mono)}
.crumb:hover{color:var(--accent)}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
h1{font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.05;letter-spacing:-.02em;font-weight:850;margin:.5rem 0 0}
.lead{color:var(--muted);font-size:1.1rem;margin:.9rem 0 1.4rem}
h2{font-size:1.4rem;letter-spacing:-.015em;font-weight:800;margin:2.2rem 0 .3rem;padding-top:1.6rem;border-top:1px solid var(--border)}
h2:first-of-type{border-top:none;padding-top:.4rem;margin-top:1.4rem}
h3{font-size:1.06rem;font-weight:700;margin:1.4rem 0 .3rem;letter-spacing:-.01em}
p{margin:.6rem 0}
ul,ol{margin:.5rem 0;padding-left:1.2rem}
li{margin:.32rem 0}
strong{font-weight:700}
code,.lbl{font-family:var(--font-mono);font-size:.86em;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:.06em .38em;color:var(--text)}

.tip,.note,.warn{border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:10px;background:var(--surface);padding:.9rem 1.1rem;margin:1.1rem 0;font-size:.95rem}
.tip{border-left-color:var(--keep)}
.warn{border-left-color:var(--gold)}
.tip b,.note b,.warn b{font-weight:700}

table{width:100%;border-collapse:collapse;margin:1.1rem 0;font-size:.92rem;display:block;overflow-x:auto}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--border);vertical-align:top}
th{font-weight:700;color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}

figure{margin:1.3rem 0}
.shot{width:100%;max-width:420px;display:block;margin:0 auto;border-radius:12px;border:1px solid var(--border);box-shadow:0 20px 44px -30px rgba(0,0,0,.5)}
.shot.wide{max-width:100%}
figcaption{text-align:center;color:var(--faint);font-size:.84rem;margin-top:.6rem}

.pill{display:inline-block;font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;background:var(--accent-soft);color:var(--accent);margin-bottom:.5rem}

/* hub */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:1.6rem}
.hub-card{display:block;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:1.1rem 1.2rem;text-decoration:none;color:var(--text);transition:border-color .15s ease,transform .1s ease}
.hub-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.hub-card .num{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);font-weight:700}
.hub-card h3{margin:.2rem 0 .3rem;font-size:1.05rem}
.hub-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}

/* recipes */
.recipes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.2rem}
.recipe{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:1.1rem 1.2rem}
.recipe h3{margin:.1rem 0 .4rem;font-size:1.02rem}
.recipe ol{font-size:.9rem;margin:.5rem 0 0}

/* prev / next pager */
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:2.4rem;border-top:1px solid var(--border);padding-top:1.4rem}
.pager a{flex:1;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:.8rem 1rem;text-decoration:none;color:var(--text);font-size:.92rem}
.pager a:hover{border-color:var(--accent)}
.pager a.next{text-align:right}
.pager .k{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.pager a b{font-weight:700}
@media(max-width:520px){.pager{flex-direction:column}}

footer{border-top:1px solid var(--border);background:var(--surface);padding:2.2rem 0;margin-top:2rem}
.foot{display:flex;flex-wrap:wrap;gap:1rem 1.3rem;justify-content:space-between;align-items:center;max-width:56rem;margin:0 auto;padding:0 clamp(1.1rem,4vw,1.6rem)}
.footlinks{display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.86rem}
.footlinks a{color:var(--muted);text-decoration:none}.footlinks a:hover{color:var(--text)}
.byline{font-size:.82rem;color:var(--faint)}.byline b{color:var(--muted)}