:root{
    --char:#1A1A1C;
    --char-lift:#232326;
    --char-line:#33333a;
    --red:#C0312B;
    --gold:#C5A24E;
    --cream:#F5F2EC;
    --cream-line:#d9d3c7;
    --ink:#1A1A1C;
    --muted:#8b8b93;
    --muted-dark:#6a6558;
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html,body{height:100%;}

  body{
    background:var(--char);
    color:var(--cream);
    font-family:'Lato',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
  }

  .stage{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .panel{
    width:100%;
    max-width:640px;
    padding:0 22px;
  }

  /* ---------- shared type ---------- */
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .display{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.03em;
    line-height:1.02;
  }
  .rule{
    height:1px;
    background:var(--char-line);
    border:0;
  }
  .rule-gold{height:2px;background:var(--gold);border:0;width:52px;}

  button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
  button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

  /* ---------- screen 1 : intake ---------- */
  #intake{
    justify-content:center;
    padding:56px 0;
  }
  .mark{height:38px;width:auto;display:block;margin-bottom:32px;}
  .r-mark{height:46px;width:auto;display:block;}
  #intake h1{
    font-size:clamp(42px,12vw,66px);
    margin:14px 0 20px;
  }
  #intake h1 span{color:var(--gold);display:block;}
  .lede{
    font-size:16.5px;
    color:#cfcbc2;
    max-width:44ch;
    margin-bottom:12px;
  }
  .lede strong{color:var(--cream);font-weight:700;}
  .spec{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--muted);
    letter-spacing:.06em;
    margin:26px 0 30px;
    display:flex;
    gap:22px;
    flex-wrap:wrap;
  }
  .spec b{color:var(--cream);font-weight:500;}

  .btn{
    display:inline-block;
    background:var(--red);
    color:#fff;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:16px;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:17px 40px;
    transition:background .15s ease,transform .15s ease;
  }
  .btn:hover{background:#d0392f;}
  .btn:active{transform:translateY(1px);}

  /* ---------- screen 2 : assessment ---------- */
  #assess{display:none;padding:34px 0 60px;}
  .meta{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-bottom:10px;
  }
  .meta .code{color:var(--gold);}
  .meta .count{color:var(--muted);}
  .track{height:2px;background:var(--char-line);position:relative;margin-bottom:52px;}
  .fill{height:2px;background:var(--red);width:0;transition:width .35s cubic-bezier(.4,0,.2,1);}

  .q{
    font-family:'Lato',sans-serif;
    font-weight:400;
    font-size:clamp(23px,6vw,31px);
    line-height:1.34;
    margin-bottom:40px;
    min-height:3.2em;
  }
  .q em{font-style:italic;color:var(--gold);}

  .scale{display:flex;flex-direction:column;gap:1px;background:var(--char-line);border-top:1px solid var(--char-line);border-bottom:1px solid var(--char-line);}
  .opt{
    background:var(--char);
    display:flex;
    align-items:center;
    gap:18px;
    padding:16px 18px;
    text-align:left;
    width:100%;
    transition:background .12s ease,padding-left .12s ease;
  }
  .opt:hover{background:var(--char-lift);padding-left:24px;}
  .opt .n{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--muted);
    width:14px;
    flex:none;
  }
  .opt .l{
    font-family:'Oswald',sans-serif;
    font-weight:400;
    font-size:16px;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .opt:hover .n{color:var(--gold);}

  .back{
    margin-top:26px;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .back:hover{color:var(--cream);}

  #gate{display:none;padding:34px 0 60px;}
  .gfield{margin-bottom:16px;}
  .gfield-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  @media (max-width:420px){.gfield-row{grid-template-columns:1fr;gap:0;} .gfield-row>div{margin-bottom:16px;}}
  .gfield label{
    display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;
  }
  .gfield .opt-tag{color:#6f6f77;text-transform:none;letter-spacing:.03em;}
  .gfield input{
    width:100%;background:var(--char-lift);border:1px solid #33333a;color:var(--cream);
    font-family:'Lato',sans-serif;font-size:16px;padding:13px 14px;outline:none;
  }
  .gfield input:focus{border-color:var(--gold);}
  .gnote{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--red);margin-top:12px;min-height:14px;}

  #stake{display:none;padding:34px 0 60px;}
  #stake .hint{margin-top:22px;}
  .opt.on{background:var(--char-lift);}
  .opt.on .n{color:var(--gold);}
  .pattern{
    display:flex;align-items:center;gap:12px;margin-top:18px;
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted-dark);
  }
  .pattern .pk{border:1px solid var(--cream-line);padding:7px 11px;}
  .pattern .pk b{color:var(--ink);font-size:13px;font-weight:600;}
  .pattern .pk.low{border-color:var(--red);}
  .pattern .pk.low b{color:var(--red);}
  .pattern .px{color:#a8a294;}

  #confess{display:none;padding:34px 0 60px;}
  #confess textarea{
    width:100%;background:var(--char-lift);border:1px solid var(--char-line);
    color:var(--cream);font-family:'Lato',sans-serif;font-size:17px;line-height:1.5;
    padding:16px;resize:vertical;
  }
  #confess textarea::placeholder{color:#6b6b73;}
  #confess textarea:focus{border-color:var(--gold);}
  .hint{font-size:13.5px;color:#7c7c84;margin:14px 0 26px;max-width:44ch;}
  #confess .back{display:block;margin-top:18px;}

  .fade{animation:fade .3s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

  /* ---------- screen 3 : working ---------- */
  #working{display:none;justify-content:center;text-align:center;padding:60px 0;}
  #working .display{font-size:26px;margin:20px 0 10px;}
  #working p{color:var(--muted);font-size:14px;font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;}
  .pulse{width:52px;height:2px;background:var(--red);margin:0 auto;animation:pulse 1.1s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:.2;transform:scaleX(.4);}50%{opacity:1;transform:scaleX(1);}}

  /* ---------- screen 4 : report ---------- */
  #report{display:none;background:var(--cream);color:var(--ink);width:100%;padding:0 0 70px;}
  .r-head{background:var(--char);width:100%;padding:34px 0 30px;margin-bottom:34px;}
  .r-head-in{display:flex;align-items:center;justify-content:space-between;gap:18px;}
  .r-head-tag{
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--gold);white-space:nowrap;
  }
  #report .panel{max-width:640px;}
  .r-eyebrow{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted-dark);
  }
  #report h2{
    font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
    font-size:clamp(30px,8vw,42px);line-height:1.04;margin:10px 0 4px;letter-spacing:.02em;
  }
  .r-sub{font-size:14px;color:var(--muted-dark);margin-bottom:30px;}

  /* vitals readout : the signature */
  .vitals{border-top:1px solid var(--ink);padding-top:4px;}
  .vital{
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
    padding:13px 0;
    border-bottom:1px solid var(--cream-line);
  }
  .v-top{display:flex;justify-content:space-between;align-items:baseline;}
  .v-name{
    font-family:'Oswald',sans-serif;font-weight:500;font-size:14px;
    letter-spacing:.16em;text-transform:uppercase;
  }
  .v-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted-dark);}
  .v-num b{color:var(--ink);font-weight:600;font-size:14px;}
  .v-track{height:9px;background:#e6e1d6;position:relative;}
  .v-fill{height:9px;background:var(--ink);width:0;transition:width .7s cubic-bezier(.16,1,.3,1);}
  .vital.flag .v-fill{background:var(--red);}
  .vital.flag .v-name{color:var(--red);}
  .v-tag{
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
    color:var(--red);text-transform:uppercase;
  }

  .finding{
    background:var(--char);color:var(--cream);
    padding:26px 24px;margin:34px 0 30px;
  }
  .finding .r-eyebrow{color:var(--gold);}
  .finding p{
    font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
    font-size:clamp(21px,5.4vw,27px);line-height:1.16;margin-top:12px;letter-spacing:.02em;
  }

  .block{margin-bottom:34px;}
  .block h3{
    font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;
    letter-spacing:.2em;text-transform:uppercase;padding-bottom:8px;
    border-bottom:2px solid var(--ink);margin-bottom:16px;
  }
  .block p{font-size:16.5px;}

  .nn{border-bottom:1px solid var(--cream-line);padding:16px 0;display:flex;gap:16px;}
  .nn:first-of-type{border-top:1px solid var(--cream-line);}
  .nn .idx{
    font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
    color:var(--red);flex:none;padding-top:3px;
  }
  .nn .task{font-family:'Lato',sans-serif;font-weight:900;font-size:17.5px;line-height:1.35;}
  .nn .std{font-size:14.5px;color:#5c5850;margin-top:5px;}

  .move{background:#eceadf;padding:22px 22px;border-top:2px solid var(--red);}
  .move p{font-family:'Lato',sans-serif;font-weight:700;font-size:18px;line-height:1.4;margin-top:8px;}

  .cost{margin:30px 0 28px;}
  .cost h3, .act h3{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted-dark);margin-bottom:9px;font-weight:500;
  }
  .cost p{font-size:19px;line-height:1.42;font-weight:400;color:var(--ink);}
  .act{background:#eceadf;padding:18px 20px;margin-bottom:34px;border-left:4px solid var(--red);}
  .act p{font-family:'Lato',sans-serif;font-weight:900;font-size:18px;line-height:1.35;}

  .close{background:var(--char);color:var(--cream);padding:30px 24px 26px;margin:0 0 30px;}
  .close .r-eyebrow{color:var(--red);}
  .close h3{
    font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(22px,6vw,28px);
    text-transform:uppercase;letter-spacing:.02em;line-height:1.1;margin:10px 0 14px;color:var(--cream);
  }
  .close p{font-size:16.5px;line-height:1.55;color:#e2ded6;}
  .close .sig{
    font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.65;
    color:#8b8b93;letter-spacing:.04em;margin-top:16px;
    padding-top:14px;border-top:1px solid #33333a;
  }
  .close .sig b{color:var(--cream);font-weight:500;letter-spacing:.1em;}
  .cta-btn{
    display:block;text-align:center;background:var(--red);color:#fff;
    font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;
    letter-spacing:.12em;text-transform:uppercase;
    padding:19px 20px;margin-top:22px;text-decoration:none;
    transition:background .15s ease;
  }
  .cta-btn:hover{background:#d0392f;}
  .cta-sub{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;
    color:#8b8b93;margin-top:11px;text-align:center;
  }

  /* capture */
  .capture{border-top:1px solid var(--cream-line);padding-top:24px;}
  .skool-btn{
    display:block;text-align:center;font-family:'Oswald',sans-serif;font-weight:600;
    font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);
    background:var(--char);padding:15px 0;text-decoration:none;margin-top:14px;
  }
  .skool-sub{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:var(--muted-dark);margin-top:10px;text-align:center;}
  .capture h3{
    font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;
    letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;
  }
  .capture p{font-size:15px;color:#5c5850;margin-bottom:16px;}
  .field{display:flex;gap:0;flex-wrap:wrap;}
  .field input{
    flex:1 1 210px;border:1px solid var(--ink);background:transparent;
    padding:15px 14px;font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--ink);
  }
  .field input::placeholder{color:#9a958a;}
  .field button{
    background:var(--ink);color:var(--cream);font-family:'Oswald',sans-serif;
    font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;
  }
  .field button:hover{background:var(--red);}
  .sent{
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);
    border:1px solid var(--ink);padding:15px;display:none;
  }

  .foot{
    margin-top:34px;text-align:center;font-family:'IBM Plex Mono',monospace;
    font-size:11px;letter-spacing:.1em;color:var(--muted-dark);
  }
  .foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--red);}
  .restart{
    display:block;margin:22px auto 0;font-family:'IBM Plex Mono',monospace;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);
  }
  .restart:hover{color:var(--red);}

  .err{
    border:1px solid var(--red);padding:20px;margin-top:20px;
  }
  .err p{font-size:15px;color:#cfcbc2;margin-bottom:14px;}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;}
  }

/* ================= production additions (theme port) ================= */
/* The theme's fixed nav is suppressed on this page; body is the stage. */
body.rtd-diagnostic { background:var(--char); }
.rtd-diag-topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;pointer-events:none;}
.rtd-diag-topbar a{pointer-events:auto;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;}
.rtd-diag-topbar a:hover{color:var(--cream);}
#report .rtd-diag-topbar a{color:var(--muted);}

/* Retake: prior score as a hairline marker on each bar */
.v-track{overflow:visible;}
.v-prior{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--gold);}
/* label sits under the bar so it never collides with the score numbers */
.v-prior::after{content:attr(data-label);position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;color:var(--muted-dark);white-space:nowrap;}
.vital.has-prior{padding-bottom:26px;}
.v-delta{font-family:'IBM Plex Mono',monospace;font-size:11px;margin-left:8px;color:var(--muted-dark);}
.v-delta.up{color:#2e7d32;} .v-delta.down{color:var(--red);}
.retake-note{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--gold);margin:-20px 0 26px;}

/* Honeypot */
.hp{position:absolute;left:-9999px;height:0;overflow:hidden;}

/* Gate: submit disabled state */
.btn[disabled]{opacity:.55;cursor:wait;transform:none;}

/* Desktop: readout as a two-column document, vitals + verdict on the left,
   the rest flowing on the right. Mobile stays the single column. */
@media (min-width: 980px){
  .panel{max-width:680px;}
  #report .panel.r-body{max-width:1040px;display:grid;grid-template-columns:400px 1fr;column-gap:56px;align-items:start;}
  #report .r-col-a{grid-column:1;position:sticky;top:24px;}
  #report .r-col-b{grid-column:2;}
  #report .r-head .panel{max-width:1040px;}
  #report h2{font-size:38px;}
  .finding{margin-top:26px;}
  .foot, .restart{grid-column:1 / -1;}
}