
:root{
  --ease-in-cubic: cubic-bezier(0.55,0.055,0.675,0.19);
  --radius-sm: 6px; --radius-md: 10px; --header-h: 56px;
  --fg:#111; --muted:#6b7280; --border:#d1d5db;
  --bg:#ffffff; --card-bg:#ffffff; --chip-bg:#f9fafb;
  --grid-line: rgba(0,0,0,0.05);
  --header-bg:#000; --header-fg:#ffffff;
  --focus-ring:#b45309;
}

/* Green inventories palette — applied to inventory runner pages, which are
   tagged data-palette="inventories" when served. Greens the interactive
   touch-points (focus ring, selected answers, active controls). */
html[data-subsite="inventories"]{ --accent:#15803d; --focus-ring:#15803d; --header-bg:#15803d; }
html[data-subsite="inventories"] .choice input{ accent-color:#15803d; }
html[data-subsite="inventories"] .button.is-active{ background:#15803d; color:#fff; border-color:#15803d; }

[data-theme="dark"]{
    --fg: #f5f5f5;
    --muted: #a3a3a3;
    --border: #404040;
    --bg: #0a0a0a;
    --card-bg: #1a1a1a;
    --chip-bg: #262626;
    --grid-line: rgba(255,255,255,0.05);
    --header-bg: #171717;
    --header-fg: #f5f5f5;
    --focus-ring: #f5f5f5;
    --card: #1a1a1a;
    --ink: #f5f5f5;
    --line: #404040;
    --accent: #f5f5f5;
    --about-link-bg: #262626;
}

*,*::before,*::after{box-sizing:border-box;}
*{font-family:"Inter",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}
html,body{margin:0;padding:0;width:100%;min-height:100%;}
body{color:var(--fg);background-color:var(--bg);background-image:linear-gradient(var(--grid-line) 1px, transparent 1px),linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);background-size:8px 8px;transition:background-color .2s ease,color .2s ease;}
a{color:inherit;text-decoration:none;}
.topbar{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--header-bg);color:var(--header-fg);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(.75rem,3vw,2rem);}
.topbar .brand{font-weight:700;font-size:.95rem;}
.theme-toggle{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:var(--header-fg);padding:.25rem .55rem .25rem .3rem;border-radius:999px;cursor:pointer;font-size:.8rem;}
.theme-toggle:hover{background:rgba(255,255,255,.16);}
.theme-toggle .knob{width:22px;height:22px;border-radius:999px;background:#fff;color:#111;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;transition:transform .3s var(--ease-in-cubic);}
[data-theme="dark"] .theme-toggle .knob{background:#111;color:#fff;transform:rotate(180deg);}
.topbar-back{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:var(--header-fg);border-radius:var(--radius-sm);padding:.35rem .65rem;cursor:pointer;font:inherit;font-size:.86rem;margin-left:auto;margin-right:.75rem;}
.topbar-back:hover{background:rgba(255,255,255,.16);}
.topbar-back[hidden]{display:none!important;}
.survey-main{max-width:760px;margin:0 auto;padding:clamp(1.5rem,5vw,3rem) clamp(1rem,4vw,2rem) 7rem;}
.survey-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:clamp(1rem,3vw,2rem);display:flex;flex-direction:column;gap:1.25rem;box-shadow:0 12px 30px rgba(0,0,0,.06);}
.survey-head h1{margin:0 0 .85rem 0;font-size:clamp(1.4rem,3.5vw,2rem);}
.survey-desc{color:var(--muted);margin:.35rem 0 .75rem;line-height:1.5;}

.page-marker{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px dashed var(--border);padding-bottom:.4rem; margin:2rem 0rem;}
.survey-page{display:flex;flex-direction:column;gap:1.1rem;}
.survey-page[hidden]{display:none !important;}

.q-field{display:flex;flex-direction:column;gap:.4rem;border:none;padding:0;margin:0.475rem 0;}
.q-label{font-size:.95rem;font-weight:600;color:var(--fg); margin:1.5rem 0;}
.q-label .req{color:#dc2626;margin-left:.15rem;}
.q-hint{display:block;font-weight:400;font-style:italic;font-size:.82rem;color:var(--muted);margin:.1rem 0 .15rem;}
.q-header{margin:1.4rem 0 .4rem;line-height:1.25;}
h6.q-header{font-size:.95rem;}
.q-header.h7{font-size:.82rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}

.q-section{background:var(--chip-bg);border-left:4px solid var(--fg);padding:.75rem .9rem;border-radius:var(--radius-sm); margin:0.5rem 0;}
.q-section h3{margin:0 0 .25rem 0;font-size:1.05rem;}
.q-section p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5;}
.choices{display:flex;flex-direction:column;gap:.35rem;}
.choices-inline{flex-direction:row;flex-wrap:wrap;align-items:center;}
.choices-inline .choice{min-width:7rem;justify-content:center;}
.choice{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .65rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);cursor:pointer;font-size:.92rem;}
.choice:hover{border-color:var(--fg);}
.choice input{accent-color:var(--fg);}
.choice-none{margin-top:.35rem;border-style:dashed;color:var(--muted);font-style:italic;}
.survey-nav{display:flex;gap:.5rem;padding-top:1.25rem;margin-top:1rem;border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;}
.survey-nav [data-nav="next"],.survey-nav button[type="submit"]{position:fixed;right:clamp(1rem,4vw,2.5rem);bottom:clamp(1rem,3vw,2rem);z-index:45;box-shadow:0 8px 24px rgba(0,0,0,.2);}
.survey-nav .nav-back{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;}
.survey-nav .nav-back svg{display:block;}
.button{border:solid 2px black;border-radius:var(--radius-sm);cursor:pointer;background:#fff;color:#000;padding:.5rem 1rem;font-size:.9rem;font-family:inherit;transition:transform .15s ease,filter .15s ease;}
.button:hover{filter:invert(1);transform:scale(1.03);}
.survey-nav .button:hover,.survey-nav [data-nav="next"]:hover,.survey-nav button[type="submit"]:hover{background:#000;color:#fff;filter:none;}
.button.is-active{background:#000;color:#fff;}
[data-theme="dark"] .button{border-color: #f5f5f5; background-color: #1a1a1a; color: #f5f5f5;}
[data-theme="dark"] .button.is-active{background-color: #f5f5f5; color: #111;}
.survey-thanks{padding:1.5rem 0;text-align:center;}
.survey-thanks h2{margin:0 0 .35rem 0;}
.survey-thanks p{margin:0;color:var(--muted);}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
@media (max-width:520px){.choice{font-size:.88rem;}}

/* === Injected scoring styles === */

.result-summary{margin:.25rem 0 1rem 0;color:var(--muted);font-size:.95rem;}
.result-summary strong{color:var(--fg);}
.result-grid{display:flex;flex-direction:column;gap:1.15rem;text-align:left;margin:1.25rem 0;}
.result-card{border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:.85rem 1rem;background:var(--chip-bg);}
.result-card-head{display:flex;align-items:center;justify-content:space-between;
    gap:.75rem;margin-bottom:.4rem;flex-wrap:wrap;}
.result-card-head h3{margin:0;font-size:1rem;}
.result-meter{height:8px;background:var(--bg);border:1px solid var(--border);margin:.75rem 0 .65rem;
    border-radius:999px;overflow:hidden;}
.result-meter-fill{height:100%;background:var(--fg);transition:width .4s ease;}
.result-detail{margin:.4rem 0 0 0;font-size:.85rem;color:var(--muted);}
.result-finding{margin:.65rem 0 0 0;font-size:.9rem;line-height:1.45;color:var(--fg);}
.tier{font-size:.75rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;
    text-transform:uppercase;letter-spacing:.05em;border:1px solid;}
.tier-minimal{color:#404040;border-color:#737373;background:rgba(0,0,0,.04);}
.tier-mild{color:#262626;border-color:#525252;background:rgba(0,0,0,.06);}
.tier-moderate{color:#171717;border-color:#404040;background:rgba(0,0,0,.08);}
.tier-severe{color:#7f1d1d;border-color:#7f1d1d;background:rgba(127,29,29,.10);}
.result-disclaimer{margin-top:1rem;text-align:left;font-size:.85rem;
    border:1px dashed var(--border);border-radius:var(--radius-sm);
    padding:.65rem .85rem;color:var(--muted);}
.result-disclaimer summary{cursor:pointer;font-weight:600;color:var(--fg);}
.result-disclaimer p{margin:.5rem 0 0 0;line-height:1.5;}
[data-theme="dark"] .tier-minimal{color:#d4d4d4;border-color:#737373;
    background:rgba(255,255,255,.08);}
[data-theme="dark"] .tier-mild{color:#e5e5e5;border-color:#a3a3a3;
    background:rgba(255,255,255,.10);}
[data-theme="dark"] .tier-moderate{color:#f5f5f5;border-color:#d4d4d4;
    background:rgba(255,255,255,.12);}
[data-theme="dark"] .tier-severe{color:#fca5a5;border-color:#fca5a5;
    background:rgba(252,165,165,.10);}
.survey-thanks{text-align:left !important;}
.survey-thanks h2{text-align:left;}

/* Validation flash for an unanswered required question */
.q-error{outline:2px solid #dc2626;outline-offset:4px;border-radius:var(--radius-sm);}
.q-error .q-label,.q-error legend{color:#dc2626;}

/* Results + plot two-column layout (plot in the aside) */
.result-layout{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:flex-start;}
.result-main{flex:1 1 320px;min-width:0;}
.result-aside{flex:1 1 280px;min-width:240px;max-width:420px;}
.result-plot{position:relative;width:100%;height:320px;max-width:400px;margin:0 auto;}
@media(max-width:640px){.result-aside{max-width:none;width:100%;}.result-plot{height:280px;}}

/* 2-second loading screen at survey start — keep the body checkerboard/grid visible */
.survey-loading{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:transparent;backdrop-filter:saturate(140%) blur(1px);transition:opacity .4s ease;}
.survey-loading-inner{background:color-mix(in srgb, var(--card-bg) 78%, transparent);
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:1.1rem 1.4rem;box-shadow:0 12px 30px rgba(0,0,0,.10);}
.survey-loading.is-gone{opacity:0;pointer-events:none;}
.survey-loading-inner{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--muted);font-size:.95rem;}
.survey-spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--border);border-top-color:var(--fg);
  animation:survey-spin .8s linear infinite;}
@keyframes survey-spin{to{transform:rotate(360deg);}}

/* Three-page results wizard */
.result-step>h2{margin:0 0 .9rem;}
.result-step>*+*{margin-top:1rem;}
.result-nav{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding-top:1.25rem;margin-top:2rem;border-top:1px solid var(--border);}
.result-plot-lg{position:relative;width:100%;height:360px;max-width:520px;margin:1rem auto;}

/* "You vs everyone" overlay — per-construct percentile bars */
.result-percentiles{margin:2rem 0;display:flex;flex-direction:column;gap:.8rem;}
.result-sub{font-size:1rem;margin:1rem 0 .6rem;}
.pctl-row{display:grid;grid-template-columns:minmax(80px,32%) 1fr auto;align-items:center;gap:.6rem;}
.pctl-label{font-size:.85rem;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pctl-track{position:relative;height:14px;background:rgba(127,127,127,.18);border-radius:999px;overflow:visible;}
.pctl-fill{height:100%;background:var(--fg);border-radius:999px;}
.pctl-pop{position:absolute;top:-3px;width:2px;height:20px;background:var(--muted);}
.pctl-val{font-weight:700;font-size:.85rem;color:var(--fg);min-width:46px;text-align:right;}
.pctl-ord{font-weight:400;font-size:.7rem;color:var(--muted);}
@media(max-width:480px){.pctl-row{grid-template-columns:1fr auto;}.pctl-label{grid-column:1 / -1;}}
.record-wrap{margin-top:1.25rem;padding-top:1.25rem;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:.4rem;}
.record-fields{display:flex;flex-direction:column;gap:.55rem;margin-top:.5rem;}
.record-fields[hidden]{display:none!important;}
.record-fields input,.record-fields select{padding:.5rem .65rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;background:var(--bg);color:var(--fg);}
.record-fields .row-2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.rec-msg{font-size:.8rem;color:var(--fg);min-height:1em;}
.record-signin{text-decoration:underline;text-underline-offset:3px;font-weight:700;}
@media(max-width:520px){.record-fields .row-2{grid-template-columns:1fr;}}

/* Out-of-five star rating on the results page */
.rate-wrap{margin:1.5rem auto 2rem;padding-top:1.5rem;border-top:1px dashed var(--border);display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;}
.rate-stars{display:flex;justify-content:center;gap:.1rem;}
.rate-star{font-size:1.7rem;line-height:1;background:none;border:none;cursor:pointer;color:var(--muted);padding:0 .05rem;transition:color .12s ease;}
.rate-star.on{color:var(--fg);}
.rate-msg{font-size:.8rem;color:var(--fg);min-height:1em;}
.report-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.5rem;border-top:1px dashed var(--border);}
/* On-screen PDF render surface. html2canvas returns blank pages for elements
   positioned far outside the viewport, so the export temporarily covers the UI. */
.pdf-report{position:absolute;left:0;top:0;width:760px;min-height:100vh;background:#fff;color:#111;padding:24px;z-index:2147483647;
  --fg:#111;--muted:#555;--border:#d1d5db;--bg:#ffffff;--card-bg:#ffffff;--chip-bg:#f6f7f9;
  --grid-line:rgba(0,0,0,0.05);--header-bg:#000;--header-fg:#fff;--focus-ring:#b45309;}
body.pdf-exporting{overflow:hidden;}
body.pdf-exporting .pdf-report{display:block!important;visibility:visible!important;opacity:1!important;}
.pdf-report,.pdf-report *{color:#111 !important;background-image:none !important;}
.pdf-report .result-step{display:block!important;page-break-before:always;padding:18px 0;}
.pdf-report .result-step:first-of-type{page-break-before:auto;}
.pdf-report-head{padding-bottom:18px;border-bottom:2px solid #111;margin-bottom:12px;}
.pdf-report-head h1{margin:0 0 8px;font-size:26px;line-height:1.2;}
.pdf-report-head .pdf-meta{margin:0;color:#555;font-size:12px;line-height:1.5;}
.pdf-report-head .pdf-meta dt{display:inline;font-weight:700;color:#222;}
.pdf-report-head .pdf-meta dd{display:inline;margin:0 14px 0 4px;color:#333;}
.pdf-report-head .pdf-meta div{margin:2px 0;}
.pdf-chart{display:block;max-width:100%;height:auto;margin:18px auto;}
.pdf-report .result-card{break-inside:avoid;}

/* Forced-choice type indicator results (this project only) */
.type-banner{display:flex;justify-content:center;margin:.5rem 0 1.25rem;}
.type-code{font-size:clamp(2.4rem,9vw,3.6rem);font-weight:800;letter-spacing:.12em;
    color:var(--fg);border:2px solid var(--fg);border-radius:var(--radius-md);
    padding:.35rem 1.1rem;background:var(--chip-bg);}
.type-letter{font-size:1.05rem;font-weight:800;color:var(--fg);
    border:1px solid var(--fg);border-radius:999px;min-width:1.9rem;height:1.9rem;
    display:inline-flex;align-items:center;justify-content:center;}
.type-bar{position:relative;height:12px;background:var(--chip-bg);border:1px solid var(--border);
    border-radius:999px;overflow:hidden;margin:.2rem 0 .1rem;}
.type-bar-fill{height:100%;background:var(--fg);border-radius:999px;min-width:2px;transition:width .4s ease;}
.type-bar-mid{position:absolute;top:-2px;bottom:-2px;left:50%;width:2px;background:var(--muted);opacity:.7;}
