/* "How it works?" in-page guide — self-contained (no Bootstrap JS). Adapted from
   BLUEPRINT_how_it_works.md for the LEX Blazor app. Brand blue #2586F3. */

/* trigger pill */
.hiw-btn { display:inline-flex; align-items:center; gap:.3rem; margin-left:.55rem; vertical-align:middle;
    font-size:.72rem; font-weight:700; color:#2586F3; background:#eef5ff; border:1px solid #cfe1fb;
    border-radius:999px; padding:.14rem .6rem; cursor:pointer; transition:background .15s, color .15s; }
.hiw-btn:hover, .hiw-btn:focus-visible { background:#2586F3; color:#fff; border-color:#2586F3; }

/* self-contained modal overlay + dialog (replaces Bootstrap modal) */
.hiw-modal-bg { position:fixed; inset:0; z-index:20000; display:none; align-items:flex-start; justify-content:center;
    background:rgba(15,23,42,.5); padding:4vh 16px; overflow:auto; }
.hiw-modal-bg.open { display:flex; }
.hiw-modal { width:100%; max-width:980px; background:#fff; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.28);
    display:flex; flex-direction:column; max-height:92vh; overflow:hidden;
    font-family:'Lato','Segoe UI',Arial,sans-serif; animation:hiwPop .18s ease; }
@keyframes hiwPop { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.hiw-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    padding:16px 20px 12px; border-bottom:1px solid #eef2f7; }
.hiw-modal-title { font-size:1.12rem; font-weight:800; color:#0b3a75; display:flex; align-items:center; gap:.4rem; margin:0; }
.hiw-lead { font-size:.8rem; color:#64748b; margin-top:.15rem; }
.hiw-x { border:0; background:transparent; font-size:1.3rem; line-height:1; color:#94a3b8; cursor:pointer; padding:2px 6px; }
.hiw-x:hover { color:#334155; }
.hiw-scroll { overflow:auto; padding:16px 20px; }
.hiw-modal-footer { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end;
    padding:12px 20px; border-top:1px solid #eef2f7; background:#fbfcfe; }

/* two-column body: step list + active step */
.hiw-body { display:grid; grid-template-columns:230px 1fr; gap:1.2rem; }
.hiw-nav { display:flex; flex-direction:column; gap:.2rem; border-right:1px solid #e2e8f0; padding-right:.9rem; }
.hiw-navgroup { font-size:.62rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#94a3b8; margin:.5rem 0 .2rem .35rem; }
.hiw-navgroup:first-child { margin-top:0; }
.hiw-navi { display:flex; align-items:center; gap:.55rem; text-align:left; border:0; background:transparent; color:#334155;
    font-size:.84rem; font-weight:600; padding:.45rem .5rem; border-radius:9px; cursor:pointer; }
.hiw-navi:hover { background:#f1f5f9; }
.hiw-navi.active { background:#e0efff; color:#0b3a75; }
.hiw-num { flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:800;
    background:#e2e8f0; color:#475569; }
.hiw-navi.active .hiw-num { background:#2586F3; color:#fff; }
.hiw-navi.done .hiw-num { background:#dcfce7; color:#15803d; }
.hiw-pane { display:none; }
.hiw-pane.active { display:block; animation:hiwIn .2s ease; }
@keyframes hiwIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.hiw-kicker { font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#2586F3; }
.hiw-pane h6 { font-size:1.08rem; font-weight:800; color:#0f172a; margin:.25rem 0 .6rem; }
.hiw-pane p, .hiw-list { font-size:.9rem; color:#334155; line-height:1.6; }
.hiw-list { padding-left:1.1rem; margin-bottom:.7rem; }
.hiw-list li { margin-bottom:.35rem; }
.hiw-ds { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:.4rem .8rem; margin:.3rem 0 .8rem; }
.hiw-ds span { font-size:.84rem; color:#334155; display:flex; align-items:center; gap:.5rem; }
.hiw-ds b { flex:none; min-width:40px; text-align:center; color:#fff; background:var(--c); font-size:.7rem; border-radius:6px; padding:.14rem .4rem; }
.hiw-tip { display:flex; gap:.5rem; align-items:flex-start; font-size:.84rem; color:#1e3a8a; background:#f0f7ff;
    border:1px solid #d6e6fb; border-radius:10px; padding:.55rem .75rem; margin:.4rem 0 .8rem; line-height:1.5; }
.hiw-tip i { margin-top:.15rem; color:#2586F3; }
.hiw kbd, .hiw-modal kbd { font-size:.72rem; background:#0f172a; color:#fff; border-radius:4px; padding:.05rem .3rem; }
.hiw-shows { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.hiw-show { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:700; color:#2586F3; background:#fff;
    border:1px solid #bcd3f0; border-radius:8px; padding:.35rem .7rem; cursor:pointer; }
.hiw-show:hover:not(:disabled) { background:#eef5ff; border-color:#2586F3; }
.hiw-show:disabled { color:#94a3b8; border-color:#e2e8f0; cursor:not-allowed; }
.hiw-need { font-size:.76rem; color:#94a3b8; }
.hiw-empower { margin-right:auto; display:flex; align-items:center; gap:.55rem; min-width:0; }
.hiw-empower-l { font-size:.434rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#94a3b8; white-space:nowrap; } /* 30% smaller */
.hiw-empower img { height:30px; width:auto; max-width:100%; display:block; }
.hiw-count { font-size:.8rem; color:#64748b; font-weight:600; margin-right:.25rem; }
.hiw-nav-btn { display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:700; border-radius:8px;
    padding:.35rem .8rem; cursor:pointer; border:1px solid #cbd5e1; background:#fff; color:#334155; }
.hiw-nav-btn.primary { background:#2586F3; border-color:#2586F3; color:#fff; }
.hiw-nav-btn:disabled { opacity:.5; cursor:not-allowed; }
.hiw-pulse { outline:3px solid #2586F3 !important; outline-offset:4px; border-radius:12px; animation:hiwPulse 1.3s ease-in-out 2; }
@keyframes hiwPulse { 0%,100% { box-shadow:0 0 0 0 rgba(37,134,243,.45); } 50% { box-shadow:0 0 0 12px rgba(37,134,243,0); } }
@media (prefers-reduced-motion: reduce) { .hiw-pane.active, .hiw-pulse, .hiw-modal { animation:none; } }
@media (max-width: 820px) {
    .hiw-body { grid-template-columns:1fr; }
    .hiw-nav { flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid #e2e8f0; padding:0 0 .5rem; }
    .hiw-navgroup { display:none; }
    .hiw-navi { white-space:nowrap; }
}
@media (max-width: 520px) { .hiw-empower { flex:1 0 100%; justify-content:center; margin:0 0 .3rem; } }

/* ── Guide / Ask-a-Question tabs ── */
.hiw-tabs { display:flex; gap:6px; margin:0 0 14px; border-bottom:1px solid #e2e8f0; }
.hiw-tab { display:inline-flex; align-items:center; gap:.4rem; border:0; background:transparent; cursor:pointer;
    font-size:.82rem; font-weight:700; color:#64748b; padding:.5rem .8rem; border-bottom:2px solid transparent; margin-bottom:-1px; }
.hiw-tab:hover { color:#2586F3; }
.hiw-tab.active { color:#0b3a75; border-bottom-color:#2586F3; }

/* ── Ask a Question form ── */
.hiw-ask { max-width:640px; }
.hiw-ask-intro { font-size:.86rem; color:#64748b; line-height:1.5; margin:0 0 12px; }
.hiw-ask-field { margin-bottom:12px; }
.hiw-ask-field > label { display:block; font-size:.75rem; font-weight:700; color:#334155; margin-bottom:4px; }
.hiw-ask-in, .hiw-ask-ta { width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:.5rem .7rem; font-size:.88rem;
    color:#0f172a; font-family:inherit; outline:none; }
.hiw-ask-in:focus, .hiw-ask-ta:focus { border-color:#2586F3; box-shadow:0 0 0 3px rgba(37,134,243,.12); }
.hiw-ask-ta { resize:vertical; }
.hiw-ask-field input[type=file] { font-size:.82rem; }
.hiw-ask-file { display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; color:#15803d; margin-top:4px; }
.hiw-ask-msg { font-size:.82rem; color:#15803d; margin:4px 0 8px; }
.hiw-ask-msg.err { color:#b91c1c; }
.hiw-ask-ok { display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; color:#14532d; background:#f0fdf4;
    border:1px solid #bbf7d0; border-radius:12px; padding:14px 16px; line-height:1.5; }
.hiw-ask-ok i { font-size:1.4rem; color:#16a34a; margin-top:2px; }

/* ── Flowchart tab (step-by-step) ── */
.hiw-flow-lead { font-size:.86rem; color:#64748b; margin:0 0 14px; }
.hiw-flow { display:flex; flex-direction:column; align-items:center; gap:0; padding:4px 0 10px; }
.hiw-flow-cap { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:800; letter-spacing:.03em;
    text-transform:uppercase; padding:.4rem 1.1rem; border-radius:999px; }
.hiw-flow-cap.start { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.hiw-flow-cap.done  { background:#e0efff; color:#0b3a75; border:1px solid #bcd3f0; }
.hiw-flow-arrow { color:#94a3b8; font-size:1.05rem; line-height:1; margin:4px 0; }
.hiw-flow-node { display:flex; align-items:center; gap:.7rem; width:100%; max-width:440px; background:#fff;
    border:1px solid #dbe4ef; border-left:4px solid #2586F3; border-radius:10px; padding:.6rem .85rem;
    font-size:.9rem; font-weight:600; color:#0f172a; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.hiw-flow-n { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
    background:#2586F3; color:#fff; font-size:.8rem; font-weight:800; }

/* Mermaid flowchart container */
.hiw-flow-mermaid { display:flex; justify-content:center; padding:8px 0 4px; overflow-x:auto; min-height:60px; }
.hiw-flow-mermaid svg { max-width:100%; height:auto; }