/* "How this page works" guide (partials/guide.html). Client palette tokens only,
   so light and dark themes follow automatically. */
.gd{border:1px solid rgb(var(--z700));border-radius:var(--radius);background:linear-gradient(135deg,rgb(var(--acc-soft)/.08),rgb(var(--z900)) 55%);margin:0 0 22px;box-shadow:var(--shadow-card)}
.gd summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;cursor:pointer;list-style:none;border-radius:var(--radius)}
.gd summary::-webkit-details-marker{display:none}
.gd summary:focus-visible{outline:2px solid rgb(var(--acc));outline-offset:2px}
.gd-badge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:rgb(var(--acc-text));background:rgb(var(--acc-soft)/.14);border:1px solid rgb(var(--acc-soft)/.35);padding:5px 10px;border-radius:999px;white-space:nowrap}
.gd-badge svg,.gd-toggle svg,.gd-foot svg{width:15px;height:15px}
.gd-purpose{flex:1 1 280px;font-size:.92rem;font-weight:600;color:rgb(var(--z100));line-height:1.45}
.gd-toggle{margin-left:auto;color:rgb(var(--z400));transition:transform .2s ease}
.gd[open] .gd-toggle{transform:rotate(180deg)}
.gd-flow{list-style:none;margin:0;padding:4px 18px 6px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;counter-reset:none}
.gd-step{position:relative;border:1px solid rgb(var(--z700));border-radius:14px;background:rgb(var(--z950));padding:14px 14px 12px;min-width:0}
.gd-step:not(:last-child)::after{content:"";position:absolute;top:26px;right:-13px;width:12px;height:2px;background:rgb(var(--acc-soft)/.6)}
.gd-step:not(:last-child)::before{content:"";position:absolute;top:22px;right:-15px;border:5px solid transparent;border-left-color:rgb(var(--acc-soft)/.8)}
.gd-num{position:absolute;top:10px;right:12px;font-size:.75rem;font-weight:700;color:rgb(var(--z500));font-variant-numeric:tabular-nums}
.gd-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgb(var(--acc-soft)/.14);color:rgb(var(--acc-text));margin-bottom:10px}
.gd-ic svg{width:18px;height:18px}
.gd-step strong{display:block;font-size:.86rem;font-weight:650;color:rgb(var(--z100));margin-bottom:4px}
.gd-step p{margin:0;font-size:.78rem;line-height:1.55;color:rgb(var(--z400))}
.gd-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;align-items:center;margin:0;padding:10px 18px 14px;font-size:.78rem;color:rgb(var(--z400))}
.gd-foot a{display:inline-flex;align-items:center;gap:6px;color:rgb(var(--acc-text));font-weight:600;text-decoration:none}
.gd-foot a:hover,.gd-foot a:focus-visible{text-decoration:underline}
@media (max-width:640px){
  .gd-flow{grid-template-columns:minmax(0,1fr)}
  .gd-step:not(:last-child)::after{top:auto;bottom:-13px;right:auto;left:30px;width:2px;height:12px}
  .gd-step:not(:last-child)::before{top:auto;bottom:-15px;right:auto;left:26px;border-left-color:transparent;border-top-color:rgb(var(--acc-soft)/.8)}
}
@media (prefers-reduced-motion:reduce){.gd-toggle{transition:none}}
@media print{.gd{display:none}}