/* Din väg (js/vagen.js, admin docs/VAGEN.md) — lugnt: en spalt, nivån man står på öppen, resten som rader. */
.vag-view { position: fixed; inset: 0; z-index: 10070; display: flex; flex-direction: column; background: var(--bg-base, var(--bg-surface, #fff)); color: var(--text-primary, inherit); }
.vag-top { flex: none; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 18px; border-bottom: 1px solid var(--border-default, rgba(127,127,127,.2)); }
.vag-top h1 { margin: 0; font-size: 17px; font-weight: 600; }
.vag-top h1:focus { outline: none; }
.vag-fill { flex: 1; }
.vag-back, .vag-x { background: none; border: 0; font: inherit; color: var(--text-secondary, inherit); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.vag-x { font-size: 22px; line-height: 1; }
.vag-back:hover, .vag-x:hover, .vag-back:focus-visible, .vag-x:focus-visible { background: var(--bg-hover, rgba(127,127,127,.12)); }
.vag-main { flex: 1; overflow-y: auto; padding: 28px 18px 56px; }
.vag { max-width: 680px; margin: 0 auto; font-size: 15px; line-height: 1.55; }
.vag h2 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.vag-lead { margin: 0 0 18px; color: var(--text-secondary, inherit); }
.vag-ph { margin: 24px 0; color: var(--text-muted, #777); }
.vag-err { margin: 18px 0 10px; }
.vag-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Frågorna */
.vag-form { display: flex; flex-direction: column; gap: 18px; }
.vag-q { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vag-q legend, .vag-q > label, .vag-fix > label { font-weight: 600; padding: 0; margin-bottom: 8px; }
.vag-q textarea, .vag-fix textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-default, rgba(127,127,127,.3)); background: var(--bg-surface, transparent); color: inherit; resize: vertical; }
.vag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vag-chip { position: relative; display: inline-flex; }
.vag-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vag-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--border-default, rgba(127,127,127,.3)); font-size: 14px; }
.vag-chip input:checked + span { border-color: currentColor; background: var(--bg-hover, rgba(127,127,127,.12)); font-weight: 600; }
.vag-chip input:focus-visible + span { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.vag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.vag-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--border-default, rgba(127,127,127,.3)); background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.vag-btn.is-primary { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: var(--accent-contrast, var(--accent-ink, #fff)); }
.vag-btn:disabled { opacity: .6; cursor: default; }
.vag-link { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 14px; color: var(--text-secondary, inherit); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }

/* Spegeln */
.vag-mirror { margin: 0 0 28px; }
.vag-mirror-t { margin: 0 0 8px; font-size: 19px; line-height: 1.5; }
.vag-mirror-t:focus { outline: none; }
.vag-mirror-acts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 14px; color: var(--text-secondary, inherit); }
.vag-fix { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

/* Nivåerna */
.vag-levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vag-level { padding: 0; }
.vag-lh { margin: 0; font-size: 15px; font-weight: 500; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vag-ln { color: var(--text-muted, #777); font-weight: 500; }
.vag-level.is-done .vag-lh, .vag-level.is-later .vag-lh { color: var(--text-muted, #777); }
.vag-level.is-done .vag-lr { font-weight: 400; }
.vag-level.is-current { margin: 6px 0 8px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border-default, rgba(127,127,127,.25)); }
.vag-level.is-current .vag-lh { font-size: 17px; font-weight: 600; }
.vag-lres { margin: 4px 0 12px; color: var(--text-secondary, inherit); }
.vag-wait { margin: 0 0 12px; color: var(--text-muted, #777); }
.vag-check { color: var(--success, #3d7a4f); font-weight: 700; }
.vag-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vag-step { display: flex; flex-direction: column; gap: 8px; }
.vag-step.is-done { flex-direction: row; gap: 8px; color: var(--text-muted, #777); }
.vag-step.is-wait .vag-st { color: var(--text-secondary, inherit); }
.vag-sm { display: flex; flex-direction: column; gap: 2px; }
.vag-st { font-weight: 600; }
.vag-sw, .vag-sx { color: var(--text-secondary, inherit); font-size: 14px; }
.vag-sx { color: var(--text-muted, #777); }
.vag-sa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vag-foot { margin: 28px 0 0; color: var(--text-muted, #777); font-size: 14px; }

/* Raden i Nu */
.vag-nu { margin: 14px 0 0; }
.vag-nu-btn { background: none; border: 0; padding: 6px 0; font: inherit; font-size: 14px; color: var(--text-secondary, inherit); cursor: pointer; text-align: left; min-height: 32px; }
.vag-nu-btn:hover, .vag-nu-btn:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Mobilen: i panelen */
.vag-m { padding: 16px 16px 32px; max-width: none; }
.vag-m .vag-mirror-t { font-size: 17px; }
.vag-m .vag-btn { min-height: 44px; }
.vag-m .vag-link { min-height: 44px; }
/* L27: översikten, nivåernas läge och utfällda nivåer */
.vag-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.vag-prog { font-size: 13px; color: var(--text-muted, #777); font-weight: 500; white-space: nowrap; }
.vag-dots { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: middle; }
.vag-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-muted, #777); display: inline-block; box-sizing: border-box; }
.vag-dots i.on { background: var(--success, #3d7a4f); border-color: var(--success, #3d7a4f); }
.vag-level.is-current .vag-lh .vag-prog { margin-left: auto; font-size: 13px; font-weight: 500; }
.vag-lrow { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; border-top: 1px solid var(--border-default, rgba(127,127,127,.25)); padding: 10px 0; font: inherit; color: inherit; cursor: pointer; text-align: left; min-height: 44px; }
.vag-lrow:focus-visible { outline: 2px solid var(--accent, #2f5d4a); outline-offset: 2px; border-radius: 4px; }
.vag-lrow .vag-lt { font-weight: 600; color: var(--text-secondary, inherit); }
.vag-lrow .vag-prog { margin-left: auto; }
.vag-chev { color: var(--text-muted, #777); font-size: 12px; width: 14px; flex: none; }
.vag-lbody { margin: 0 0 8px 22px; }
.vag-lbody .vag-lres { margin: 0 0 8px; font-size: 14px; }
.vag-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vag-mi, .vag-step.is-done { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; font-size: 14px; color: inherit; }
.vag-ic { grid-row: span 2; font-weight: 700; line-height: 1.4; color: var(--text-muted, #777); }
.vag-ic.is-done { color: var(--success, #3d7a4f); }
.vag-mt { font-weight: 600; }
.vag-ms { grid-column: 2; color: var(--text-secondary, inherit); overflow-wrap: anywhere; }
.vag-step.is-done .vag-st { font-weight: 600; }
.vag-now { font-size: 13px; padding: 0 4px; min-height: 0; }
.vag-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 9px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.vag-tag.is-done { background: rgba(61,122,79,.12); color: #2f6640; }
.vag-tag.is-before { background: rgba(47,93,74,.09); color: #2f5d4a; }
.vag-tag.is-todo { background: rgba(127,127,127,.12); color: var(--text-secondary, inherit); }
.vag-tag.is-wait { background: rgba(127,127,127,.08); color: var(--text-muted, #777); }
.vag-legend { margin: 18px 0 0; font-size: 13px; color: var(--text-muted, #777); display: flex; gap: 6px 16px; flex-wrap: wrap; }
.vag-legend .vag-ic { font-weight: 700; }

@media (max-width: 640px) { .vag-lbody { margin-left: 4px; } .vag-lrow { flex-wrap: wrap; } .vag-lrow .vag-prog { margin-left: 22px; flex-basis: 100%; } .vag-level.is-current .vag-lh .vag-prog { margin-left: 0; flex-basis: 100%; } }
@media (max-width: 640px) { .vag-main { padding: 20px 16px 48px; } .vag-btn, .vag-link { min-height: 44px; } }
.vag-note { margin: 2px 0 0; font-size: 14px; color: var(--text-secondary, inherit); }
.vag-needs { color: var(--text-secondary, inherit); }
.vag-intro .vag-lead { max-width: 60ch; }
.vag-stale { margin: -12px 0 22px; font-size: 14px; color: var(--text-secondary, inherit); }