/* UI_VERSION: required_nav_force_20260520_v2 */
:root { --bg:#f6f7fb; --card:#ffffff; --text:#172033; --muted:#5b6475; --line:#d9deea; --accent:#2357c6; --accent-soft:#eef3ff; --danger:#b42318; --ok:#0f7a43; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); line-height:1.45; }
.container { max-width: 980px; margin: 0 auto; padding: 32px 18px 64px; }
.card { background: var(--card); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:0 16px 36px rgba(30,42,72,.08); }
.card.narrow { max-width:720px; margin: 0 auto; }
h1 { font-size: 1.7rem; margin:0 0 18px; }
h2 { font-size:1.15rem; margin:24px 0 8px; }
p { margin:0 0 14px; }
.muted, .help { color: var(--muted); font-size: .95rem; }
.error { background:#ffe9e7; color:var(--danger); border:1px solid #f3aaa4; padding:12px; border-radius:10px; margin-bottom:16px; }
.scenario { background:#eef3ff; border-left:4px solid var(--accent); padding:14px 16px; border-radius:12px; margin-bottom:22px; }
label { display:block; font-weight:600; margin-bottom:7px; }
input[type=text], textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 13px; font:inherit; background:#fff; }
textarea { min-height: 78px; resize: vertical; }
button, .button { display:inline-block; border:0; border-radius:12px; padding:12px 18px; background:var(--accent); color:white; font-weight:700; text-decoration:none; cursor:pointer; }
button:hover, .button:hover { filter: brightness(.95); }
.question { border-top:1px solid var(--line); padding-top:20px; margin-top:22px; }
.qtext { font-size:1.04rem; }
.options { display:grid; gap:10px; margin-top:10px; }
.choice { font-weight:500; display:flex; align-items:flex-start; gap:12px; margin:0; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; transition: border-color .12s ease, background .12s ease, box-shadow .12s ease; }
.choice:hover { border-color:#9fb1dc; background:#f8fbff; }
.choice:has(input:checked), .scale-choice:has(input:checked), .matrix td:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input { margin-top:3px; flex:0 0 auto; width:18px; height:18px; cursor:pointer; }
.choice-label { display:block; }
.sub { margin-top:12px; font-weight:500; color:var(--muted); }
.scale-wrap { max-width:760px; }
.scale-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.9rem; margin-bottom:8px; gap:12px; }
.scale { display:flex; gap:10px; flex-wrap:wrap; }
.scale-choice { display:flex; flex-direction:column; align-items:center; gap:5px; border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-weight:700; min-width:52px; cursor:pointer; transition: border-color .12s ease, background .12s ease; }
.scale-choice:hover { border-color:#9fb1dc; background:#f8fbff; }
.scale-choice input { width:18px; height:18px; cursor:pointer; }
.matrix-wrap { overflow-x:auto; margin-top:10px; }
table.matrix { width:100%; border-collapse:separate; border-spacing:0; min-width:680px; }
.matrix th, .matrix td { border:1px solid var(--line); padding:0; text-align:center; vertical-align:middle; }
.matrix th { padding:10px; }
.matrix th:first-child { text-align:left; width:35%; font-weight:600; }
.matrix thead th { background:#f0f3fa; }
.matrix-choice { display:flex; align-items:center; justify-content:center; margin:0; padding:14px 10px; min-height:48px; width:100%; height:100%; cursor:pointer; }
.matrix-choice input { width:18px; height:18px; cursor:pointer; }
.matrix td:hover { background:#f8fbff; }
.completion { display:grid; gap:14px; margin-top:10px; }
.completion label { color:var(--text); }
.actions { margin-top:28px; display:flex; justify-content:flex-end; }
.progress { display:flex; justify-content:space-between; gap:14px; color:var(--muted); font-size:.92rem; margin-bottom:8px; }
.bar { height:8px; background:#e8ecf5; border-radius:999px; overflow:hidden; margin-bottom:22px; }
.bar div { height:100%; background:var(--accent); }
.consent-form fieldset { border:1px solid var(--line); border-radius:12px; padding:14px; margin:22px 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 640px) { .card { padding:20px; } .progress { flex-direction:column; } .scale-labels { flex-direction:column; } }
.required-mark { color: var(--danger); font-weight: 800; margin-left: 4px; }
.required-note { margin-top: 18px; color: var(--muted); font-size: .92rem; }
.field-error { color: var(--danger); font-weight: 650; margin: 6px 0 10px; }
.question-error { border-top-color: #f3aaa4; }
.question-error .qtext { color: var(--danger); }
.matrix.matrix-error { outline: 2px solid #f3aaa4; border-radius: 12px; }
.sub-error { color: var(--danger); }
/* Make selection targets comfortably clickable. */
.choice { min-height: 48px; }
.scale-choice { min-height: 56px; min-width: 58px; }
.matrix td { min-width: 96px; }
.matrix-choice { min-height: 56px; padding: 18px 12px; }
.matrix td, .matrix-choice, .choice, .scale-choice { -webkit-tap-highlight-color: rgba(35,87,198,.12); }

/* Navigation and back button */
.page-nav { border:1px solid var(--line); border-radius:14px; background:#fbfcff; padding:12px 14px; margin:0 0 20px; }
.page-nav summary { cursor:pointer; font-weight:750; color:var(--accent); }
.page-nav-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin-top:12px; }
.page-nav-item { display:flex; align-items:center; gap:8px; min-height:42px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--text); background:#fff; }
.page-nav-item:hover { border-color:#9fb1dc; background:#f8fbff; }
.page-nav-item.current { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.page-nav-item.disabled { opacity:.45; cursor:not-allowed; background:#f2f4f8; }
.page-nav-number { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; background:#e8ecf5; font-weight:800; font-size:.85rem; flex:0 0 auto; }
.page-nav-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
.nav-help { margin:10px 0 0; }
.actions-split { justify-content:space-between; align-items:center; }
.button.secondary, button.secondary { background:#e8ecf5; color:var(--text); }
.button.secondary:hover, button.secondary:hover { background:#dfe6f4; filter:none; }

/* Admin invite management */
.admin-wide { max-width: 1180px; margin: 0 auto; }
.success { background:#e8f7ef; color:var(--ok); border:1px solid #a8dec0; padding:12px; border-radius:10px; margin-bottom:16px; }
.admin-kpis { display:grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap:12px; margin:18px 0 26px; }
.admin-kpis div { border:1px solid var(--line); border-radius:14px; background:#fbfcff; padding:14px; }
.admin-kpis strong { display:block; font-size:1.45rem; }
.admin-kpis span { color:var(--muted); font-size:.9rem; }
.admin-form { border:1px solid var(--line); background:#fbfcff; border-radius:14px; padding:16px; margin:12px 0 22px; }
.form-grid { display:grid; grid-template-columns: 1fr 150px; gap:14px; margin-bottom:14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
input[type=number] { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 13px; font:inherit; background:#fff; }
.code-output { min-height: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.table-wrap { width:100%; overflow-x:auto; margin:12px 0 24px; }
.admin-table { width:100%; border-collapse:collapse; font-size:.92rem; background:#fff; }
.admin-table th, .admin-table td { border:1px solid var(--line); padding:9px 10px; text-align:left; vertical-align:top; }
.admin-table th { background:#f0f3fa; font-weight:800; }
.admin-table.small { font-size:.82rem; }
.badge { display:inline-block; border-radius:999px; padding:3px 8px; font-weight:750; font-size:.78rem; }
.badge.ok { background:#e8f7ef; color:var(--ok); }
.badge.off { background:#f0f3fa; color:var(--muted); }
.inline-form { margin:0; }
.smallbtn { border-radius:9px; padding:7px 10px; font-size:.8rem; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }