/* THE IDENTITY DEBT AUDIT (2026-09-28). Layered on site.css; every rule is scoped to .audit.
   The look: the site's luxury base with the tree behind, and one designed object, the statement, a filed ledger
   slip in cream paper with the state rubber-stamped across the unpaid lines (spec 3.4, F4 FILED). Color jobs follow
   site.css: acid green is what is real (the number), pink is your move (the buttons), orange is the stamp.
   No step pre-hides its words in CSS for no-JS readers: html.js is set before first paint, so only a scripted page
   hides the steps it is not on. */

.audit .adoor .find{cursor:pointer; border:0}
.audit .resume, .audit .lost{margin-top:16px}
.audit .lost{color:var(--a-orange)}
.audit .lnk{background:none; border:0; padding:0; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; cursor:pointer}

/* ---------------------------------------------------------------- the questions */
html.js .audit [data-step="quiz"]:not(.on){display:none}
html.js .audit .aq-q:not(.on){display:none}
.audit .aq{min-height:100svh; padding-top:calc(var(--feather) + 36px)}
.audit .aq-top{display:flex; align-items:center; gap:16px; margin-bottom:22px}
.audit .aq-top .prog{color:var(--a); white-space:nowrap}
.audit .aq-rail{display:grid; grid-template-columns:repeat(12, 1fr); gap:4px; list-style:none; margin:0; padding:0; flex:1; max-width:360px}
.audit .aq-rail li{height:3px; border-radius:2px; background:color-mix(in srgb, var(--text) 22%, transparent); transition:background var(--d-tap) var(--ease)}
.audit .aq-rail li.done{background:var(--a)}
.audit .aq-q{border:0; margin:0 0 8px; padding:0; min-width:0}
.audit .aq-q legend{padding:0; margin:0 0 24px; max-width:11em; font-size:clamp(34px, 8.4vw, 72px); outline:none}
html:not(.js) .audit .aq-q{margin-bottom:64px}
.audit .opts{display:grid; gap:10px; max-width:620px}
.audit .opts.lanes{grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:760px}
@media (min-width:900px){ .audit .opts.lanes{grid-template-columns:repeat(3, minmax(0, 1fr))} }
.audit .opts.lanes .opt{font-size:14px; padding:11px 12px 11px 10px}
.audit .opt{background:color-mix(in srgb, var(--g) 55%, transparent); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.audit .opt:hover{border-color:var(--text)}
.audit .opt:focus-visible{outline:2px solid var(--a); outline-offset:3px}
.audit .aq-other, .audit .aq-words{display:grid; gap:8px; max-width:620px; margin:18px 0 0}
.audit .aq-other[hidden]{display:none}
.audit .aq-q label{font:500 15px/1.4 var(--f-body)}
.audit input[type="text"], .audit input[type="email"]{width:100%; font:500 17px/1.3 var(--f-body); color:var(--ink); background:var(--cream); border:1px solid transparent; border-radius:12px; padding:14px 14px}
.audit input:focus-visible{outline:2px solid var(--a); outline-offset:2px}
.audit [data-finish], .audit [data-other-go]{margin-top:18px; justify-self:start; border:0; cursor:pointer}
.audit [data-finish][disabled]{opacity:.45; cursor:not-allowed}
.audit .aq-nav{margin-top:26px}
.audit .aq-back{color:var(--sub); font-size:14px}
.audit .aq-back[hidden]{display:none}

/* ---------------------------------------------------------------- the gate */
.audit .agate{padding-top:calc(var(--feather) + 36px)}
.audit .aud-num{font-family:var(--f-disp); font-weight:900; line-height:.8; letter-spacing:-.03em; margin:10px 0 0; display:flex; align-items:flex-end; gap:14px; color:var(--a-green)}
.audit .aud-num [data-score]{font-size:clamp(150px, 44vw, 320px)}
.audit .aud-num .of{font:600 12px/1.2 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sub); padding-bottom:18px}
.audit .aud-state{margin:18px 0 0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.audit .aud-state .nm{font-family:var(--f-disp); font-weight:900; text-transform:uppercase; font-size:clamp(34px, 9vw, 64px); line-height:.9; letter-spacing:-.02em}
.audit .aud-scale{margin-top:10px; letter-spacing:.1em}
.audit .aud-preview{font:400 var(--t-voice-s)/1.25 var(--f-voice); margin:26px 0 0; max-width:26ch; min-height:2.5em; text-wrap:pretty}
.audit .aud-form{margin-top:30px; display:grid; gap:14px; max-width:460px}
.audit .aud-field{display:grid; gap:6px}
.audit .aud-field label{font:600 10.5px/1.4 var(--f-mono); letter-spacing:.16em; text-transform:uppercase}
.audit .aud-field .opt-l{letter-spacing:.08em; opacity:.7}
.audit .aud-form .act{justify-self:start; border:0; cursor:pointer}
.audit .aud-form .act[aria-busy="true"]{opacity:.6}
.audit .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.audit .aud-err{color:var(--a-orange); font:500 14px/1.4 var(--f-body); min-height:1.4em}

/* ---------------------------------------------------------------- the statement (F4 FILED) */
.audit .aresult{padding-top:calc(var(--feather) + 36px)}
.audit .ledger{position:relative; margin:18px 0 0; max-width:560px; background:var(--cream); color:#16130E; padding:26px 22px 24px; clip-path:var(--rip); isolation:isolate}
.audit .ledger::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.5; mix-blend-mode:multiply; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 33px, rgba(22,19,14,.08) 33px 34px)}
.audit .lg-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; border-bottom:1px solid rgba(22,19,14,.35); padding-bottom:10px}
.audit .lg-head .label{color:#16130E; font-size:9.5px}
.audit .lg-num{font-family:var(--f-disp); font-weight:900; line-height:.8; letter-spacing:-.03em; margin:16px 0 0; display:flex; align-items:flex-end; gap:10px}
.audit .lg-num [data-score]{font-size:clamp(110px, 30vw, 200px)}
.audit .lg-num .of{font:600 11px/1.2 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; padding-bottom:12px; opacity:.7}
.audit .lg-stamp{position:absolute; right:14px; top:128px; z-index:2; margin:0; transform:rotate(-9deg); transform-origin:center;
  font:900 clamp(24px, 6.6vw, 40px)/.9 var(--f-disp); text-transform:uppercase; letter-spacing:.02em; color:var(--a-orange);
  border:3px solid var(--a-orange); border-radius:6px; padding:8px 12px 6px; mix-blend-mode:multiply; opacity:.92; max-width:62%; text-align:center}
.audit .lg-rows{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px}
.audit .lg-row{display:grid; grid-template-columns:78px 1fr 34px; grid-template-rows:auto auto; column-gap:12px; align-items:center}
.audit .lg-nm{font:900 22px/1 var(--f-disp); text-transform:uppercase; letter-spacing:-.01em}
.audit .lg-what{grid-column:1 / 3; grid-row:2; font:500 12.5px/1.3 var(--f-body); opacity:.72}
.audit .lg-bar{height:10px; background:rgba(22,19,14,.12); border-radius:5px; overflow:hidden}
.audit .lg-bar i{display:block; height:100%; width:calc(var(--v, 0) * 1%); background:#16130E; border-radius:5px; transition:width 900ms var(--ease)}
.audit .lg-row.top .lg-bar i{background:var(--a-orange)}
.audit .lg-row.top .lg-nm::after{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--a-orange); margin-left:6px; vertical-align:.3em}
.audit .lg-v{font:600 13px/1 var(--f-mono); text-align:right}
.audit .lg-note{margin:20px 0 0; font:500 12.5px/1.45 var(--f-body); opacity:.75; max-width:40ch}
html.rm .audit .lg-bar i{transition:none}

.audit .st-text, .audit .st-heard, .audit .st-gap, .audit .st-acts, .audit .st-seam, .audit .st-keep{margin-top:clamp(48px, 9vw, 88px); max-width:620px}
.audit .st-name{margin:0 0 16px}
.audit .st-state p + p{margin-top:12px}
.audit .st-seen{font:500 var(--t-lead)/1.45 var(--f-body)}
.audit .st-comfort{color:var(--sub); max-width:46ch}
.audit .st-power{font:600 var(--t-lead)/1.4 var(--f-body); color:var(--a-green); max-width:36ch}
.audit .st-heard .voice{margin-top:10px; max-width:24ch}
.audit .st-gapline{margin-top:12px; font:500 var(--t-lead)/1.45 var(--f-body); max-width:40ch}
.audit .st-gap .label [data-gap-name]{color:var(--a-orange)}
.audit .st-acts .disp{margin:0}
.audit .acts{margin:26px 0 0; padding:0; list-style:none; counter-reset:act; display:grid; gap:20px}
.audit .acts li{counter-increment:act; display:grid; grid-template-columns:52px 1fr; gap:14px; align-items:start; font:500 17px/1.5 var(--f-body)}
.audit .acts li::before{content:"0" counter(act); font:900 38px/.9 var(--f-disp); color:var(--a-green)}
.audit .st-cardline{font:400 var(--t-voice-s)/1.25 var(--f-voice); max-width:28ch; margin-bottom:22px}
/* Jules's words at the seam: the house bubble, small, between the Card line and its button */
.audit .st-seam .bubble-w{margin:0 0 26px}
.audit .st-seam .bubble-w figcaption{margin:10px 0 0 16px; color:var(--sub); font-size:10px; line-height:1.5}
.audit .st-keep .lnk{font:600 14px/1.4 var(--f-body)}
.audit .st-keep .plain{margin-top:10px}

@media (min-width:1000px){
  .audit .ledger{padding:34px 34px 30px}
  .audit .lg-row{grid-template-columns:96px 1fr 40px}
}

/* buttons with no state line: one row, arrow after the words (site.css .act is a two-row grid) */
.audit .aud-form .act, .audit [data-finish], .audit [data-other-go]{display:inline-flex; align-items:center; gap:14px}
/* the stamp crosses the unpaid lines, clear of the number */
.audit .lg-stamp{top:auto; bottom:118px; right:10px}
@media (min-width:1000px){ .audit .lg-stamp{bottom:130px; right:24px} }