/* ============================================================================
   How-to SEO pages — /<slug> (bridge 2026-10-21-160928)
   Loaded ONLY by Views/howto/show.php (HowtoController passes it in $styles), so
   nothing here can touch another page. Every colour is a site.css theme token, which
   is what makes dark mode automatic — never a literal that only works on white.
   ========================================================================= */

.hw-hero{
  position:relative; overflow:hidden;
  padding:48px 0 44px;
  background:
    radial-gradient(900px 420px at 15% -10%, var(--bg-glow), var(--bg-glow-0)),
    linear-gradient(180deg, var(--bg-a), transparent 70%);
  border-bottom:1px solid var(--line);
}
.hw-crumb{font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.hw-crumb a{color:var(--muted); text-decoration:none}
.hw-crumb a:hover{color:var(--purple); text-decoration:underline}
.hw-h1{margin:14px 0 10px; font-size:clamp(28px,4.4vw,44px); line-height:1.12; letter-spacing:-.02em}
.hw-sub{max-width:760px; margin:0 0 28px}

/* --- the wide 3-step banner ------------------------------------------------
   One row on desktop with "→" between the steps; at ≤860px the arrows rotate and
   the steps stack. Nothing is wider than its column, so 375px never scrolls. */
.hw-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:14px;
}
.hw-step{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:20px 18px 18px; box-shadow:var(--shadow-sm); min-width:0;
}
.hw-arrow{align-self:center; color:var(--purple); font-size:26px; line-height:1; font-weight:700}
.hw-step-t{margin:14px 0 6px; font-size:18px; font-weight:800; line-height:1.25}
.hw-step-b{margin:0; color:var(--muted); font-size:15px; line-height:1.55; overflow-wrap:anywhere}

.hw-art{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:52px}
.hw-badge{
  width:52px; height:52px; flex:0 0 52px; border-radius:16px;
  display:grid; place-items:center; background:var(--card-2); border:1px solid var(--line-2);
  overflow:hidden;
}
.hw-badge img{width:40px; height:40px; object-fit:contain; border-radius:8px}
.hw-mono{font-weight:800; font-size:22px; color:var(--purple)}
.hw-badge-mx{background:transparent; border:0}
.hw-logo{width:44px; height:44px; display:block}
.hw-glass{font-size:22px; filter:saturate(.9)}
.hw-badge-alert{font-size:24px; background:var(--purple-soft); border-color:var(--line-3)}

/* channel chips — this page's channel is the lit one */
.hw-chans{display:flex; flex-wrap:wrap; gap:6px; min-width:0}
.hw-chan{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 9px; border-radius:999px; font-size:12px; font-weight:700;
  background:var(--card-2); border:1px solid var(--line-2); color:var(--muted);
}
.hw-chan.on{background:var(--purple-soft); border-color:var(--purple); color:var(--ink)}
.hw-chan .hw-ci{width:16px; height:16px; flex:0 0 16px}
.hw-chan-l{white-space:nowrap}

/* the "an alert arrived" sliver next to the bell */
.hw-note{display:inline-grid; gap:5px; flex:1 1 90px; min-width:70px}
.hw-note-t,.hw-note-b{height:8px; border-radius:999px; background:var(--track)}
.hw-note-t{width:85%}
.hw-note-b{width:55%}

.hw-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* --- body / FAQ / cross-links --------------------------------------------- */
.hw-body .guide-block + .guide-block{margin-top:18px}
.hw-chan-links{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.hw-chan-links a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:700; font-size:14px;
  background:var(--card); border:1px solid var(--line-2); color:var(--ink); box-shadow:var(--shadow-sm);
}
.hw-chan-links a:hover{border-color:var(--purple); color:var(--purple)}
.hw-chan-links .hw-ci{width:18px; height:18px; flex:0 0 18px}
.hw-links .usecase .e{display:flex; align-items:center; justify-content:flex-start}
.hw-links .usecase .e .hw-ci{width:26px; height:26px}
.hw-src-link{margin-top:16px}
.hw-src-link a{font-weight:700}

@media (max-width:860px){
  .hw-steps{grid-template-columns:1fr; gap:10px}
  .hw-arrow{justify-self:center; transform:rotate(90deg); font-size:22px}
  .hw-hero{padding:34px 0 34px}
  .hw-cta .btn{width:100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .hw-hero *{animation:none!important; transition:none!important}
}