/* Source: baseline/assessment.html inline <style> blocks, verbatim, in document order. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tgn-parchment-50);color:var(--tgn-ink);font-family:var(--font-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,p,ul,li{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
a:hover{color:var(--tgn-brick)}
/* Screens, steps and the conditional Profile field are toggled with the
   hidden attribute, and several of them carry a class that sets display.
   Without this the class wins and a hidden element stays on screen. */
[hidden]{display:none !important}

/* ==========================================================================
   Assessment page
   Every value below is a design-system token or a design-system rule:
   20px card radius, 100px pill radius, 14px inset radius, no drop shadows
   (separation is borders and background change), brick section labels,
   parchment-200 borders, and CTA orange used as a button fill only.
   ========================================================================== */

.tgn-ax__narrow{max-width:980px;margin:0 auto;padding:0 clamp(24px,2.8vw,40px)}

/* ---------- cover: S02, two-column ---------- */
.tgn-ax__cover{background:var(--tgn-white);padding:clamp(64px,7vw,104px) 0 clamp(72px,8vw,120px)}
.tgn-ax__cover-in{max-width:1040px;margin:0 auto;padding:0 clamp(24px,2.8vw,40px)}
.tgn-ax__cover-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(40px,4.5vw,64px);align-items:start}
.tgn-ax__kicker{font-size:16px;font-weight:600;line-height:1.4;color:var(--tgn-brick-label)}
.tgn-ax__h1{margin-top:10px;font-family:var(--font-heading);font-size:clamp(34px,4.8vw,56px);font-weight:600;line-height:1.1;letter-spacing:-0.02em}
.tgn-ax__lede{margin-top:24px;max-width:56ch;font-size:19px;line-height:1.75;color:var(--tgn-parchment-400)}
.tgn-ax__cover-row{margin-top:clamp(28px,3.4vw,36px);display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.tgn-ax__chip{display:inline-flex;align-items:center;gap:7px;background:var(--tgn-parchment-100);border:1px solid var(--tgn-parchment-200);border-radius:var(--tgn-radius-pill);padding:8px 16px;font-size:14px;font-weight:600;color:var(--tgn-ink)}
.tgn-ax__disclosure{margin-top:16px;font-size:14px;line-height:1.6;color:var(--tgn-parchment-400)}
.tgn-ax__outcomes-card{background:var(--tgn-blue-tint);border:1px solid var(--tgn-parchment-200);border-radius:var(--tgn-radius-card);padding:28px}
.tgn-ax__outcomes-label{font-size:12px;font-weight:600;letter-spacing:0.02em;text-transform:uppercase;color:var(--tgn-parchment-400)}
.tgn-ax__outcomes{margin-top:14px}
.tgn-ax__outcome{display:flex;align-items:flex-start;gap:14px;padding:17px 0;border-bottom:1px solid rgba(163,139,117,0.28);font-size:16px;line-height:1.75}
.tgn-ax__outcome:last-child{border-bottom:0}
.tgn-ax__outcome-n{flex:none;font-family:var(--font-heading);font-size:20px;font-weight:600;line-height:1.5;color:var(--tgn-brick-label)}

/* ---------- buttons: three-tier system, light surfaces ---------- */
.tgn-ax__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1;padding:15px 30px;border:1.5px solid transparent;border-radius:var(--tgn-radius-pill);cursor:pointer;transition:background 150ms ease,border-color 150ms ease,color 150ms ease}
/* PROVISIONAL: brick-fill/white-text is Yon's fallback pick for the primary
   button pending his sign-off, not a locked decision. If reverted, revert to
   background:var(--tgn-cta);color:var(--tgn-ink) here — this is the only
   place .tgn-ax__btn--primary is defined, so every button using the class
   across the tool follows this one rule. */
.tgn-ax__btn--primary{background:var(--tgn-brick);color:var(--tgn-white)}
.tgn-ax__btn--primary:hover{background:var(--tgn-amber);color:var(--tgn-ink)}
.tgn-ax__btn--secondary{background:transparent;border-color:var(--tgn-parchment-300);color:var(--tgn-ink)}
.tgn-ax__btn--secondary:hover{border-color:var(--tgn-ink);color:var(--tgn-ink)}
.tgn-ax__btn:focus-visible{outline:2px solid var(--tgn-brick);outline-offset:3px}
.tgn-ax__btn[disabled]{opacity:0.45;cursor:default}
.tgn-ax__btn[disabled]:hover{background:var(--tgn-cta)}

/* ---------- the tool ---------- */
.tgn-ax__tool{padding:clamp(44px,5vw,72px) 0 clamp(72px,8vw,112px)}
.tgn-ax__progress-wrap{margin-bottom:clamp(32px,4vw,48px)}
.tgn-ax__progress{display:flex;gap:6px}
.tgn-ax__seg{flex:1;height:6px;border-radius:var(--tgn-radius-pill);background:var(--tgn-parchment-200)}
.tgn-ax__seg--done{background:var(--tgn-amber)}
.tgn-ax__progress-meta{margin-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.tgn-ax__seclabel{font-size:16px;font-weight:600;line-height:1.4;color:var(--tgn-brick-label)}
.tgn-ax__count{flex:none;font-size:12px;font-weight:600;letter-spacing:0.06em;color:var(--tgn-parchment-400);font-variant-numeric:tabular-nums}
.tgn-ax__step .tgn-ax__seclabel{margin-bottom:10px}
.tgn-ax__h2{font-family:var(--font-heading);font-size:clamp(28px,3vw,42px);font-weight:600;line-height:1.15;letter-spacing:-0.02em}
/* The step heading is focused programmatically when the step changes, so it
   takes no focus ring; keyboard focus rings elsewhere are untouched. */
.tgn-ax__h2:focus{outline:none}
.tgn-ax__h3{margin:12px 0 0;font-family:var(--font-heading);font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-0.01em}
.tgn-ax__note{margin-top:24px;max-width:68ch;background:var(--tgn-amber-tint);border-left:3px solid var(--tgn-amber);border-radius:0 10px 10px 0;padding:14px 18px;font-size:14px;line-height:1.7}

/* ---------- form fields: bottom-rule inputs, the pattern the newsletter
     field and the Get Involved forms already use on this site ---------- */
.tgn-ax__fields{margin-top:clamp(28px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.tgn-ax__field{display:flex;flex-direction:column;gap:8px;min-width:0}
.tgn-ax__field--wide{grid-column:1 / -1}
.tgn-ax__label{font-size:15px;font-weight:600;color:var(--tgn-ink)}
.tgn-ax__qlabel{font-size:17px;font-weight:500;line-height:1.6;max-width:64ch}
.tgn-ax__req{color:var(--tgn-brick-label)}
.tgn-ax__input,.tgn-ax__select{width:100%;background:var(--tgn-white);border:1.5px solid var(--tgn-parchment-300);border-radius:var(--tgn-radius-inset);padding:14px 16px;font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--tgn-ink)}
.tgn-ax__input:focus,.tgn-ax__select:focus{outline:none;border-color:var(--tgn-brick)}
.tgn-ax__selectwrap{position:relative}
.tgn-ax__select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer}
.tgn-ax__caret{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:10px;line-height:1;color:var(--tgn-parchment-400);pointer-events:none}
.tgn-ax__textarea{width:100%;min-height:140px;resize:vertical;background:var(--tgn-white);border:1.5px solid var(--tgn-parchment-300);border-radius:var(--tgn-radius-inset);padding:16px 18px;font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--tgn-ink)}
.tgn-ax__textarea:focus{outline:none;border-color:var(--tgn-brick)}
.tgn-ax__input[aria-invalid="true"],.tgn-ax__select[aria-invalid="true"],.tgn-ax__textarea[aria-invalid="true"]{border-color:var(--tgn-accent-minor)}
.tgn-ax__err{font-size:13.5px;line-height:1.5;color:var(--tgn-accent-minor)}

/* ---------- scale question: originated for this build ---------- */
.tgn-ax__qs{margin-top:clamp(28px,3vw,36px);display:flex;flex-direction:column;gap:20px}
.tgn-ax__q{background:var(--tgn-white);border:1px solid var(--tgn-parchment-200);border-radius:var(--tgn-radius-card);padding:clamp(22px,2.6vw,32px)}
.tgn-ax__q-legend{display:flex;align-items:baseline;gap:12px;margin:0}
.tgn-ax__q-n{display:inline-block;flex:none;margin-right:0;font-family:var(--font-heading);font-size:22px;font-weight:600;line-height:1;color:var(--tgn-brick)}
.tgn-ax__q-t{font-size:17px;font-weight:500;line-height:1.6}
.tgn-ax__scale{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.tgn-ax__opt{position:relative;flex:1 1 118px;min-width:0}
.tgn-ax__opt input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0}
.tgn-ax__opt label{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;height:100%;padding:8px 12px;border:1.5px solid var(--tgn-parchment-300);border-radius:var(--tgn-radius-pill);font-size:14px;font-weight:600;line-height:1.25;text-align:center;cursor:pointer;transition:background 150ms ease,border-color 150ms ease,color 150ms ease}
.tgn-ax__opt label:hover{border-color:var(--tgn-ink)}
/* Selected state is an ink fill, not CTA orange: orange is a fill reserved for
   one primary button per section and one chip per page, and the page already
   spends both. Ink on parchment-50 text measures 17.18:1. */
.tgn-ax__opt input:checked + label{background:var(--tgn-ink);border-color:var(--tgn-ink);color:var(--tgn-parchment-50)}
.tgn-ax__opt input:focus-visible + label{outline:2px solid var(--tgn-brick);outline-offset:3px}
.tgn-ax__opt-n{font-size:17px;font-weight:600;line-height:1;color:var(--tgn-brick)}
/* Brick would sit at roughly 4.3:1 on the ink fill; amber is the design
   system's tertiary colour on dark surfaces and is used here for the same
   reason. */
.tgn-ax__opt input:checked + label .tgn-ax__opt-n{color:var(--tgn-amber)}

.tgn-ax__actions{margin-top:clamp(32px,4vw,44px);display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* ---------- results ---------- */
.tgn-ax__results{padding:clamp(44px,5vw,72px) 0 clamp(72px,8vw,112px)}
.tgn-ax__res-name{font-size:16px;font-weight:600;line-height:1.4;color:var(--tgn-brick)}
.tgn-ax__cards{margin-top:clamp(30px,3.5vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tgn-ax__card{border:1px solid var(--tgn-parchment-200);border-radius:var(--tgn-radius-card);padding:clamp(24px,2.8vw,32px)}
.tgn-ax__card--focus{background:var(--tgn-amber-tint)}
.tgn-ax__card--strong{background:var(--tgn-white)}
.tgn-ax__card-l{font-size:12px;font-weight:600;letter-spacing:0.02em;text-transform:uppercase;color:var(--tgn-parchment-400)}
.tgn-ax__card-t{margin-top:12px;font-family:var(--font-heading);font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-0.01em}
.tgn-ax__card-v{margin-top:18px;display:flex;align-items:center;gap:12px}
.tgn-ax__score{font-family:var(--font-heading);font-size:22px;font-weight:600;line-height:1}
.tgn-ax__badge{display:inline-flex;align-items:center;background:var(--tgn-parchment-100);color:var(--tgn-ink);border-radius:var(--tgn-radius-badge);padding:7px 13px;font-size:12.5px;font-weight:700;line-height:1}
.tgn-ax__section{margin-top:clamp(44px,5vw,64px)}
.tgn-ax__rows{margin-top:24px;display:flex;flex-direction:column;gap:22px}
.tgn-ax__row-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.tgn-ax__row-t{font-size:17px;font-weight:500;line-height:1.5}
.tgn-ax__row-v{flex:none;display:flex;align-items:center;gap:12px}
.tgn-ax__bar{height:10px;border-radius:var(--tgn-radius-pill);background:var(--tgn-parchment-100);overflow:hidden}
.tgn-ax__bar span{display:block;height:100%;background:var(--tgn-amber);border-radius:var(--tgn-radius-pill)}
.tgn-ax__rgrid{margin-top:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tgn-ax__rcard{display:flex;flex-direction:column;gap:12px;background:var(--tgn-white);border:1px solid var(--tgn-parchment-200);border-radius:var(--tgn-radius-inset);padding:20px}
.tgn-ax__rcard-d{font-size:12px;font-weight:600;letter-spacing:0.02em;text-transform:uppercase;color:var(--tgn-parchment-400)}
.tgn-ax__stepcard{margin-top:24px;background:var(--tgn-white);border:1px solid var(--tgn-parchment-200);border-radius:var(--tgn-radius-card);padding:clamp(24px,2.8vw,36px)}
.tgn-ax__stepcard-t{font-family:var(--font-heading);font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-0.01em}
.tgn-ax__stepcard-b{margin-top:16px;max-width:68ch}
.tgn-ax__stepcard-link{margin-top:20px}
.tgn-ax__inset{margin-top:24px;background:var(--tgn-parchment-100);border-radius:var(--tgn-radius-inset);padding:20px 24px}
.tgn-ax__inset-l{font-size:12px;font-weight:600;letter-spacing:0.02em;text-transform:uppercase;color:var(--tgn-parchment-400)}
.tgn-ax__prompt{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(163,139,117,0.28);line-height:1.75}
.tgn-ax__prompt:last-child{border-bottom:0}
.tgn-ax__prompt-n{flex:none;min-width:24px;font-family:var(--font-heading);font-size:20px;font-weight:600;line-height:1.4;color:var(--tgn-brick)}
.tgn-ax__quote{margin-top:16px;font-family:var(--font-heading);font-size:20px;font-weight:400;font-style:italic;line-height:1.5}
.tgn-ax__handoff{margin-top:clamp(44px,5vw,64px);background:var(--tgn-amber-tint);border-left:3px solid var(--tgn-amber);border-radius:0 10px 10px 0;padding:18px 22px;max-width:68ch}
.tgn-ax__grounding{margin-top:24px;max-width:68ch;font-size:14px;line-height:1.7;color:var(--tgn-parchment-400)}

@media(max-width:920px){
.tgn-ax__cover-grid{grid-template-columns:1fr}
.tgn-ax__fields{grid-template-columns:1fr}
.tgn-ax__cards{grid-template-columns:1fr}
.tgn-ax__rgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
.tgn-ax__opt{flex:1 1 calc(33.333% - 7px)}
}
@media(max-width:620px){
.tgn-ax__opt{flex:1 1 calc(50% - 5px)}
.tgn-ax__row-top{flex-direction:column;align-items:flex-start;gap:8px}
.tgn-ax__progress-meta{flex-direction:column;align-items:flex-start;gap:6px}
}
@media(max-width:480px){
.tgn-ax__rgrid{grid-template-columns:1fr}
.tgn-ax__actions{flex-direction:column;align-items:stretch}
.tgn-ax__btn{width:100%}
}