/* ============================================================
 *  SHARED BASE for all standalone onboarding pages (/skills, /futures,
 *  /scan, /kompas, /dag2030, /hold, /tvivl, /stige, /orakel).
 *  Pages override .hero-wrap max-width / .hero copy inline as needed —
 *  everything here is deliberately reusable boilerplate, not per-page content.
 * ============================================================ */
:root{
  --bg:#050914;--surface:rgba(255,255,255,.05);--border:rgba(255,255,255,.1);
  --text:#e2e8f0;--muted:#94a3b8;--accent:#6366f1;--radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;line-height:1.5}
.wrap{max-width:1400px;margin:0 auto;padding:3rem 1.25rem 5rem}
.hero-wrap{max-width:720px;margin:0 auto}
.brand{font-size:.8rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:2rem;text-align:center}
.hero{text-align:center;margin-bottom:2.25rem}
.hero h1{font-size:clamp(1.7rem,4.5vw,2.4rem);font-weight:800;line-height:1.2;margin-bottom:.8rem}
.hero p{color:var(--muted);font-size:.98rem;max-width:560px;margin:0 auto}
.hero .cite{display:block;margin-top:.6rem;font-size:.76rem;color:rgba(255,255,255,.35)}
.explore{display:block;text-align:center;color:var(--muted);font-size:.8rem;margin-top:2rem}
.explore a{color:var(--muted)}
.state{text-align:center;color:var(--muted);padding:2rem 1rem}
.wefm-dot{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px}
.lp-spin{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.25);border-top-color:#a5b4fc;border-radius:50%;animation:lp-spin .7s linear infinite;vertical-align:-1px}
@keyframes lp-spin{to{transform:rotate(360deg)}}

/* WEF matrix panel (built by skills-matrix.js, shared with index.html) */
#wef-matrix-panel{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;backdrop-filter:blur(12px)}
.wefm-head{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;cursor:pointer;font-size:.85rem;font-weight:700;color:#a5b4fc}
.wefm-head:hover{color:#e2e8f0}
.wefm-toggle{transition:transform .3s;font-size:.75rem}
.wefm-body{padding:0 1rem 1rem;overflow:hidden;max-height:1400px;opacity:1;transition:max-height .5s ease,opacity .4s ease,padding .5s ease}
.wefm-body.collapsed{max-height:0;opacity:0;padding-top:0;padding-bottom:0;pointer-events:none}
.wefm-sub{font-size:.76rem;color:var(--muted);line-height:1.5;margin-bottom:.75rem}
.wefm-scroll{overflow-x:auto;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(2,5,9,.35)}
.wefm-legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:.72rem;color:var(--muted);margin-top:.6rem}
.wefm-hint{font-size:.75rem;color:#a5b4fc;margin-top:.5rem}
#wefm-tooltip{display:none;position:absolute;z-index:30;background:rgba(5,9,20,.96);border:1px solid rgba(99,102,241,.4);border-radius:8px;padding:.5rem .7rem;font-size:.75rem;line-height:1.5;color:var(--text);pointer-events:none;max-width:230px;box-shadow:0 8px 24px rgba(0,0,0,.5)}

/* On these standalone pages the explanation chat sits inline (not a floating
   corner panel like on index.html's results screen) — see #wefm-chat-anchor
   in each page's body and _watchWefmChatRelocation() in onboarding-shared.js. */
#wefm-chat-anchor{width:100%;max-width:640px;margin:1.25rem auto 0}
#wefm-chat{display:none;position:relative;right:auto;bottom:auto;z-index:1;width:100%;max-height:460px;flex-direction:column;background:rgba(5,9,20,.97);border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;backdrop-filter:blur(18px);box-shadow:0 16px 50px rgba(0,0,0,.45)}
.wefc-bar{height:4px;flex-shrink:0}
.wefc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;padding:.7rem .9rem .5rem;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
.wefc-skill{font-size:.9rem;font-weight:700;color:#e2e8f0}
.wefc-meta{font-size:.7rem;color:var(--muted);margin-top:.15rem}
.wefc-x{background:none;border:1px solid rgba(255,255,255,.15);color:var(--muted);cursor:pointer;border-radius:7px;padding:.15rem .5rem;font-size:.78rem}
.wefc-x:hover{color:#e2e8f0;border-color:rgba(255,255,255,.35)}
.wefc-msgs{flex:1;overflow-y:auto;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.6rem;min-height:120px}
.wefc-msg{font-size:.8rem;line-height:1.55;border-radius:10px;padding:.55rem .75rem;max-width:95%}
.wefc-msg h1,.wefc-msg h2,.wefc-msg h3,.wefc-msg h4,.wefc-msg h5,.wefc-msg h6{font-size:.95em;font-weight:700;margin:.6em 0 .3em;color:#e2e8f0}
.wefc-msg h1:first-child,.wefc-msg h2:first-child,.wefc-msg h3:first-child,.wefc-msg h4:first-child{margin-top:0}
.wefc-ai{background:rgba(99,102,241,.10);border:1px solid rgba(99,102,241,.2);align-self:flex-start}
.wefc-user{background:rgba(255,255,255,.07);align-self:flex-end}
.wefc-srcs{margin-top:.5rem;font-size:.7rem;color:var(--muted)}
.wefc-srcs a{color:#818cf8;text-decoration:none;margin-right:.4rem}
.wefc-srcs a:hover{text-decoration:underline}
.wefc-input{display:flex;gap:.4rem;padding:.6rem .9rem;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.wefc-input input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;padding:.5rem .7rem;color:var(--text);font-size:.8rem;outline:none}
.wefc-input input:focus{border-color:var(--accent)}
.wefc-send{background:var(--accent);border:none;color:#fff;border-radius:8px;padding:.5rem .9rem;font-size:.8rem;font-weight:600;cursor:pointer}

/* PDF library (shared with index.html) */
#pdf-library-section{width:100%;max-width:560px;margin:2.5rem auto 0}
.pdf-lib-title{font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none}
.pdf-lib-title:hover{color:#a5b4fc}
.pdf-lib-toggle{font-size:.7rem;transition:transform .25s ease;display:inline-block}
.pdf-lib-grid{overflow:hidden;transition:max-height .35s ease,opacity .3s ease;max-height:600px;opacity:1;display:flex;flex-direction:column;gap:.5rem}
.pdf-lib-grid.collapsed{max-height:0;opacity:0;pointer-events:none}
.pdf-lib-item{display:flex;align-items:center;gap:.75rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:.65rem 1rem;text-decoration:none;transition:all .2s}
.pdf-lib-item:hover{background:rgba(255,255,255,.08);border-color:rgba(99,102,241,.4)}
.pdf-lib-icon{font-size:1.4rem;flex-shrink:0}
.pdf-lib-name{font-size:.88rem;font-weight:600;color:var(--text)}
.pdf-lib-meta{font-size:.72rem;color:var(--muted);margin-top:.1rem}
.pdf-lib-actions{margin-left:auto;display:flex;gap:.4rem;flex-shrink:0}
.pdf-lib-btn{padding:.3rem .65rem;border-radius:7px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;font-size:.75rem;text-decoration:none;transition:all .15s}
.pdf-lib-btn:hover{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.4);color:#a5b4fc}

#pdf-viewer-modal{position:fixed;inset:0;z-index:150;background:rgba(5,9,20,.92);backdrop-filter:blur(10px);display:none;flex-direction:column;padding:1rem}
#pdf-viewer-modal.active{display:flex}
.pdf-viewer-header{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;flex-shrink:0}
.pdf-viewer-title{font-weight:600;font-size:.95rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-viewer-close{background:rgba(255,255,255,.08);border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:8px;padding:.4rem .9rem;font-size:.85rem;transition:all .2s;white-space:nowrap}
.pdf-viewer-close:hover{background:rgba(255,255,255,.15);color:var(--text)}
#pdf-viewer-frame{flex:1;border:none;border-radius:12px;background:#222}