/* Uit Intake prototype/intake_zeven_schuifjes.html, ongewijzigd behalve dat de
   prototypebalk, de aantekeningen en de demo eruit zijn. Portal-aanvullingen
   staan onderaan in een eigen blok. */
:root{color-scheme:light; padding-top:env(safe-area-inset-top, 0px);
      padding-bottom:env(safe-area-inset-bottom, 0px)}
body{margin:0; font:14px system-ui, sans-serif; background:#F4F1EC}
img{max-width:100%}
[hidden]{display:none !important}
/* Layout: one column of seven rows. Each row is question, scale anchors and a
   slider with its value riding above the thumb. Palette and faces are the ones
   the printed report already uses. */
:root{
  --bg:#F4F1EC; --surface:#FFFFFF; --surface-2:#EDE9E1;
  --fg:#1A1A18; --muted:#6B6B62; --line:#DEDAD2;
  --green:#1A5C40; --green-soft:#E8F5EE; --gold:#B8892A; --gold-soft:#F7EFDC;
  --over:#1A3A6A; --under:#A8431F; --onGreen:#FFFFFF;
  --serif:'Playfair Display', Georgia, 'DejaVu Serif', serif;
  --sans:'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101310; --surface:#171B16; --surface-2:#1E241C;
    --fg:#ECE8DF; --muted:#9C9C8E; --line:#2B322A;
    --green:#4ADE80; --green-soft:#17301F; --gold:#D9AE55; --gold-soft:#302713;
    --over:#7EA6E8; --under:#E8906B; --onGreen:#0C140E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101310; --surface:#171B16; --surface-2:#1E241C;
  --fg:#ECE8DF; --muted:#9C9C8E; --line:#2B322A;
  --green:#4ADE80; --green-soft:#17301F; --gold:#D9AE55; --gold-soft:#302713;
  --over:#7EA6E8; --under:#E8906B; --onGreen:#0C140E;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--bg); color:var(--fg); font-family:var(--sans);
     font-size:15px; line-height:1.55; margin:0;
     -webkit-font-smoothing:antialiased}
.wrap{max-width:660px; margin:0 auto; padding-block:22px 48px;
      padding-left:16px; padding-right:16px}

.pill{display:flex; border:1px solid var(--line); border-radius:999px;
      overflow:hidden; background:var(--surface); flex:0 0 auto}
.pill button{font:inherit; font-size:12px; font-weight:500; letter-spacing:.06em;
             padding:5px 12px; border:0; background:none; color:var(--muted);
             cursor:pointer}
.pill button[aria-pressed="true"]{background:var(--fg); color:var(--bg)}

.brand{font-size:12px; font-weight:500; letter-spacing:.22em; color:var(--green);
       margin:0}
h1{font-family:var(--serif); font-weight:400; font-size:clamp(28px,6.4vw,40px);
   line-height:1.15; margin:14px 0 0; text-wrap:balance}
.meter{display:flex; align-items:baseline; gap:10px; margin-top:22px;
       font-size:12.5px; color:var(--muted)}
.meter-bar{flex:1 1 auto; height:3px; background:var(--line); border-radius:2px;
           overflow:hidden; min-width:0}
.meter-bar i{display:block; height:100%; width:0; background:var(--green);
             transition:width .25s ease}
.meter b{font-weight:500; color:var(--fg); font-variant-numeric:tabular-nums}

/* ---------- rows ---------- */
.dims{margin-top:10px}
.dim{border-top:1px solid var(--line); padding:18px 0 20px}
.dim-name{font-family:var(--serif); font-size:18.5px; transition:color .2s ease;
          display:block}
.dim.todo .dim-name{color:var(--muted)}
.dim-q{color:var(--muted); font-size:13.5px; margin:3px 0 0; max-width:48ch}

.slide{position:relative; padding-top:30px}
/* De waarde hangt boven de knop en schuift mee, zodat je ziet waar je hem
   neerzet in plaats van achteraf te lezen wat eruit kwam. */
.bub{position:absolute; top:0; transform:translateX(-50%);
     left:calc(12px + (100% - 24px) * var(--p, 0) / 100);
     font-size:13px; font-weight:500; font-variant-numeric:tabular-nums;
     padding:2px 9px; border-radius:999px; background:var(--surface);
     border:1px solid var(--gold); color:var(--gold); white-space:nowrap;
     pointer-events:none; transition:left .06s linear}
/* De uiteinden van de schaal in de woorden van het Deep Report zelf, zodat
   de deelnemer weet wat er aan weerszijden gemeten wordt. */
.ends{display:flex; justify-content:space-between; gap:14px; margin:2px 2px 0;
      font-size:11.5px; color:var(--muted); line-height:1.35}
.ends span{max-width:46%}
.ends span:last-child{text-align:right}

input[type=range]{-webkit-appearance:none; appearance:none; width:100%;
  height:26px; background:none; cursor:grab; display:block; margin:0}
input[type=range]:active{cursor:grabbing}
input[type=range]:disabled{cursor:default}
input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:3px;
  background:linear-gradient(to right, var(--gold) var(--fillpct,0%), var(--line) var(--fillpct,0%))}
input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:var(--line)}
input[type=range]::-moz-range-progress{height:6px; border-radius:3px; background:var(--gold)}
input[type=range].untouched::-moz-range-progress{background:transparent}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  width:24px; height:24px; margin-top:-9px; border-radius:50%;
  background:var(--surface); border:2px solid var(--gold);
  box-shadow:0 1px 3px rgba(0,0,0,.22)}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%;
  background:var(--surface); border:2px solid var(--gold);
  box-shadow:0 1px 3px rgba(0,0,0,.22)}
input[type=range].untouched::-webkit-slider-thumb{border-color:var(--muted);
  background:var(--surface-2); box-shadow:none}
input[type=range].untouched::-moz-range-thumb{border-color:var(--muted);
  background:var(--surface-2); box-shadow:none}
input[type=range]:focus-visible{outline:2px solid var(--green); outline-offset:6px;
  border-radius:4px}

/* ---------- the one open question ---------- */
.why{border:1px solid var(--gold); border-radius:12px; background:var(--surface);
     padding:20px; margin-top:28px}
.why h2{font-family:var(--serif); font-weight:400; font-size:21px; margin:0;
        text-wrap:balance}
.why p{font-size:13.5px; color:var(--muted); margin:8px 0 0; max-width:52ch}
.why-pick{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.why-pick button{font:inherit; font-size:13px; padding:5px 11px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--muted); cursor:pointer}
.why-pick button[aria-pressed="true"]{border-color:var(--gold); color:var(--gold);
  background:var(--gold-soft); font-weight:500}
.why textarea{display:block; width:100%; margin-top:13px; min-height:92px;
  font:inherit; font-size:14.5px; color:var(--fg); background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:11px 12px;
  resize:vertical}
.why textarea:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.why-foot{display:flex; justify-content:space-between; gap:12px; margin-top:7px;
          font-size:12px; color:var(--muted)}
.q-lbl{font-size:14.5px; margin:22px 0 0 !important; color:var(--fg) !important;
       padding-top:18px; border-top:1px solid var(--line); max-width:52ch}
.how{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px}
.how button{font:inherit; font-size:13.5px; padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--fg);
  cursor:pointer; text-align:left}
.how button[aria-pressed="true"]{border-color:var(--gold); color:var(--gold);
  background:var(--gold-soft); font-weight:500}
.how button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ---------- lock and submit ---------- */
.act{margin-top:26px}
.consent{display:flex; gap:11px; align-items:flex-start; margin:0 0 16px;
         border:1px solid var(--line); border-radius:10px; padding:14px 15px;
         background:var(--surface); cursor:pointer}
.consent input{appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:20px; height:20px; margin:1px 0 0; border:1.5px solid var(--muted);
  border-radius:4px; background:var(--surface); cursor:pointer;
  display:grid; place-content:center}
.consent input:checked{border-color:var(--green); background:var(--green)}
.consent input:checked::after{content:""; width:10px; height:6px;
  border-left:2px solid var(--onGreen); border-bottom:2px solid var(--onGreen);
  transform:rotate(-45deg) translate(1px,-1px)}
.consent input:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.consent span{font-size:13.5px; color:var(--muted); max-width:52ch}
.consent[data-done="1"]{opacity:.6; cursor:default}

.go{font:inherit; font-size:15.5px; font-weight:500; width:100%;
    padding:15px 20px; border-radius:10px; border:0; cursor:pointer;
    background:var(--green); color:var(--onGreen); letter-spacing:.02em}
.go[disabled]{background:var(--surface-2); color:var(--muted); cursor:not-allowed}
.go:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ---------- what they get back, in the report's own layout ---------- */
.done{margin-top:26px; border:1px solid var(--green); border-radius:12px;
      background:var(--surface); padding:24px 22px}
.done .eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase;
               color:var(--green); font-weight:500; margin:0}
.done h2{font-family:var(--serif); font-weight:400; font-size:24px;
         margin:10px 0 0; text-wrap:balance}
.done .sub{font-size:13.5px; color:var(--muted); margin:9px 0 0; max-width:52ch}
.sheet{margin-top:20px}
.srow{display:flex; align-items:center; gap:12px; padding:7px 0}
.srow .n{flex:0 0 40%; font-size:13.5px; min-width:0}
.srow .t{flex:1 1 auto; height:8px; border-radius:4px; background:var(--line);
         min-width:0; overflow:hidden}
.srow .t i{display:block; height:100%; border-radius:4px; background:var(--gold)}
.srow .v{flex:0 0 auto; width:3ch; text-align:right; font-size:14px;
         font-weight:500; font-variant-numeric:tabular-nums; color:var(--gold)}
.srow.low .n{font-weight:500}
.srow.low .t i{background:var(--green)}
.srow.low .v{color:var(--green)}
.why #whyPrivacy{font-size:12.5px; margin-top:6px}
.done .legend{font-size:12.5px; color:var(--muted); margin:14px 0 0;
              padding-top:13px; border-top:1px solid var(--line); max-width:54ch}
.done .lock{display:flex; align-items:center; gap:8px; margin-top:14px;
            font-size:12.5px; color:var(--muted)}
.done .lock svg{flex:0 0 auto}

@media (max-width:460px){
  .srow .n{flex-basis:50%}
  .ends{font-size:11px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- portal: alles hieronder is nieuw ten opzichte van het prototype ---------- */
.bar{display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center;
     justify-content:space-between; margin-bottom:26px}
.bar .tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pill form{display:contents}
.linkbtn{font:inherit; font-size:12.5px; color:var(--muted); background:none; border:0;
         padding:4px 2px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
a{color:var(--green)}
.lede{color:var(--muted); font-size:14.5px; margin:10px 0 0; max-width:52ch}
.card{border:1px solid var(--line); border-radius:12px; background:var(--surface);
      padding:20px; margin-top:24px}
.field{display:block; margin-top:16px}
.field > span{display:block; font-size:13.5px; margin-bottom:6px}
.field small{color:var(--muted); font-weight:400}
.field input, .field select{display:block; width:100%; font:inherit; font-size:15px;
  color:var(--fg); background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; min-width:0}
.field input:focus-visible, .field select:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.field input[readonly]{color:var(--muted)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
@media (max-width:460px){ .row2{grid-template-columns:1fr} }
.err{border:1px solid var(--under); color:var(--under); border-radius:10px;
     padding:12px 14px; margin-top:18px; font-size:13.5px}
.ok{border:1px solid var(--green); color:var(--green); border-radius:10px;
    padding:12px 14px; margin-top:18px; font-size:13.5px}
.status{display:inline-flex; align-items:center; gap:8px; font-size:12px;
        letter-spacing:.14em; text-transform:uppercase; font-weight:500;
        color:var(--green); background:var(--green-soft); border-radius:999px;
        padding:6px 12px; margin-top:16px}
/* Keuzeknoppen op scherm C zijn radio's, zodat ze ook zonder script werken;
   ze zien eruit als de knoppen uit het prototype. */
.why-pick label, .how label{display:inline-flex}
.why-pick input, .how input{position:absolute; opacity:0; width:1px; height:1px}
.why-pick span{font-size:13px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--muted); cursor:pointer}
.why-pick input:checked + span{border-color:var(--gold); color:var(--gold);
  background:var(--gold-soft); font-weight:500}
.how span{font-size:13.5px; padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--fg); cursor:pointer}
.how input:checked + span{border-color:var(--gold); color:var(--gold);
  background:var(--gold-soft); font-weight:500}
.why-pick input:focus-visible + span, .how input:focus-visible + span{outline:2px solid var(--gold); outline-offset:2px}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:12px}
.tbl th{text-align:left; font-weight:500; color:var(--muted); font-size:12px;
        letter-spacing:.06em; padding:6px 8px 6px 0; border-bottom:1px solid var(--line)}
.tbl td{padding:9px 8px 9px 0; border-bottom:1px solid var(--line); vertical-align:top;
        overflow-wrap:anywhere}
.tbl-wrap{overflow-x:auto}
.inline{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.inline select{font:inherit; font-size:13px; max-width:100%; padding:4px 6px;
  background:var(--surface-2); color:var(--fg); border:1px solid var(--line); border-radius:6px}
.small{font:inherit; font-size:13px; padding:5px 11px; border-radius:8px; border:1px solid var(--line);
       background:var(--surface-2); color:var(--fg); cursor:pointer}
.quote{white-space:pre-wrap; font-size:14.5px; margin:6px 0 0}
h2.sec{font-family:var(--serif); font-weight:400; font-size:21px; margin:34px 0 0}