/* ============================================================
   WERHINO 2.0 - Guide / Helper
   A roadmap overlay: where to start, what each module does,
   how to use it, and a push to create the free account.
   Shared across all platform pages (injected by guide.js).
   ============================================================ */

/* floating button */
.guide-fab {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 130;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7em 1.1em .7em .85em; border-radius: 999px;
  background: rgba(20,18,15,.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--font-b); font-size: .76rem; font-weight: 600; letter-spacing: .08em;
  box-shadow: 0 12px 34px rgba(0,0,0,.4); cursor: pointer;
  transition: transform .35s var(--ease), border-color .3s, background .3s;
}
.guide-fab:hover { transform: translateY(-2px); border-color: var(--accent); }
.guide-fab__ic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #1a1409; font-family: var(--font-d); font-weight: 600; font-size: .9rem; }

/* overlay + right panel */
.guide { position: fixed; inset: 0; z-index: 380; display: none; }
.guide.is-open { display: block; }
.guide__backdrop { position: absolute; inset: 0; background: rgba(6,5,4,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s var(--ease); }
.guide.is-open .guide__backdrop { opacity: 1; }
.guide__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 100%);
  background: var(--bg-2); border-left: 1px solid var(--line);
  box-shadow: -30px 0 90px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .5s var(--ease);
  overflow-y: auto;
}
.guide.is-open .guide__panel { transform: none; }
.guide__head { position: sticky; top: 0; z-index: 2; background: var(--bg-2); padding: clamp(1.4rem,2.4vw,2rem) clamp(1.4rem,2.4vw,2rem) 1rem; border-bottom: 1px solid var(--line); }
.guide__eyebrow { font-size: .62rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.guide__title { font-family: var(--font-d); font-weight: 500; font-size: clamp(1.7rem,3vw,2.2rem); line-height: 1.05; margin-top: .5rem; }
.guide__close { position: absolute; top: 1.1rem; right: 1.1rem; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); transition: background .3s, color .3s, transform .3s var(--ease); }
.guide__close:hover { background: var(--accent); color: #1a1409; transform: rotate(90deg); }
.guide__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.guide__body { padding: 1.2rem clamp(1.4rem,2.4vw,2rem) clamp(1.6rem,3vw,2.4rem); display: flex; flex-direction: column; gap: 1.6rem; }

.guide__section-label { font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }

/* steps */
.guide__steps { display: flex; flex-direction: column; gap: .8rem; margin-top: .7rem; }
.guide__step { display: flex; gap: .9rem; align-items: flex-start; }
.guide__num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-d); font-size: .85rem; color: var(--accent); border: 1px solid var(--line-2); }
.guide__step b { font-weight: 600; font-size: .92rem; color: var(--text); }
.guide__step p { font-size: .85rem; color: var(--muted); line-height: 1.5; margin-top: .15rem; }

/* modules */
.guide__mods { display: flex; flex-direction: column; gap: .6rem; margin-top: .7rem; }
.guide__mod { display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); padding: .95rem 1rem; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.guide__mod:hover { border-color: var(--line-2); transform: translateX(3px); }
.guide__mod-top { display: flex; align-items: center; gap: .6rem; }
.guide__mod-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--accent-dim); color: var(--accent); }
.guide__mod-ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.guide__mod-name { font-family: var(--font-d); font-weight: 500; font-size: 1.15rem; color: var(--text); flex: 1; }
.guide__mod-free { font-size: .52rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ok); border: 1px solid rgba(121,176,122,.4); padding: .25em .55em; border-radius: 999px; }
.guide__mod-free.is-acct { color: var(--accent); border-color: var(--line-2); }
.guide__mod-what { font-size: .85rem; color: var(--muted); line-height: 1.5; margin: .5rem 0 .3rem; }
.guide__mod-how { font-size: .8rem; color: var(--faint); line-height: 1.45; }
.guide__mod-how b { color: var(--text); font-weight: 500; }

/* cta */
.guide__cta { border-top: 1px solid var(--line); padding-top: 1.4rem; text-align: center; display: flex; flex-direction: column; gap: .7rem; }
.guide__cta p { font-size: .82rem; color: var(--muted); }
.guide__cta .btn { width: 100%; }
.guide__signedin { font-size: .82rem; color: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .guide__panel, .guide__backdrop { transition: none; }
}