/* ==========================================================================
   TekFidelity Design System — ASSESSMENT TOOL (dedicated page only)
   The full six-dimension diagnostic. Dark ground is deliberate: the light
   homepage teaser invites, the dark tool signals a deeper environment.
   Enqueued only on the assessment page. Markup hook: .tool
   ========================================================================== */

/* ============================================================
   FULL TOOL — dark executive ground
   ============================================================ */
.tool{background:var(--tf-black);color:var(--tf-on-dark);padding:clamp(3rem,6vw,5.5rem) 0}
.tool-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.tool-head h1{font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.05;color:var(--tf-on-dark)}
.tool-head p{margin:1.1rem 0 0;font-size:1.02rem;line-height:1.65;color:var(--tf-on-dark-soft)}

.tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}

/* --- Controls --- */
.dims{border-top:1px solid var(--tf-line-dark)}
.dim{padding:1.35rem 0;border-bottom:1px solid var(--tf-line-dark)}
.dim-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.dim-name{font-family:var(--tf-mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tf-red)}
.dim-val{font-family:var(--tf-mono);font-size:.68rem;color:var(--tf-on-dark-soft);font-variant-numeric:tabular-nums}
.dim-q{margin:.55rem 0 .9rem;font-family:var(--tf-serif);font-size:1.05rem;line-height:1.4;color:var(--tf-on-dark)}

/* Segmented 1-5 scale. Real radios underneath for keyboard + SR support. */
.scale{display:flex;gap:6px;border:0;padding:0;margin:0}
.scale legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scale label{flex:1 1 0;position:relative;display:block}
.scale input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.scale span{
  display:flex;align-items:center;justify-content:center;
  min-height:42px;
  border:1px solid var(--tf-line-dark);border-radius:3px;
  background:transparent;color:var(--tf-on-dark-soft);
  font-family:var(--tf-mono);font-size:.8rem;font-variant-numeric:tabular-nums;
  transition:background 140ms var(--tf-ease),border-color 140ms var(--tf-ease),color 140ms var(--tf-ease);
}
.scale label:hover span{border-color:var(--tf-on-dark-soft);color:var(--tf-on-dark)}
.scale input:checked + span{background:var(--tf-red);border-color:var(--tf-red);color:#fff}
.scale input:focus-visible + span{outline:3px solid var(--tf-red);outline-offset:2px}
.scale-ends{display:flex;justify-content:space-between;margin-top:.5rem;font-family:var(--tf-mono);font-size:.62rem;letter-spacing:.06em;color:#817a73}

/* --- Chart + result --- */
.panel{position:sticky;top:2rem}
.chart-wrap{position:relative}
svg.radar{display:block;width:100%;height:auto;overflow:visible}
.radar .ring{fill:none;stroke:rgba(255,255,255,.10)}
.radar .ring.outer{stroke:rgba(255,255,255,.20)}
.radar .spoke{stroke:rgba(255,255,255,.12)}
.radar .shape{fill:rgba(193,39,45,.30);stroke:var(--tf-red);stroke-width:1.75;stroke-linejoin:round;transition:d 320ms var(--tf-ease)}
.radar .pt{fill:var(--tf-red)}
.radar .axis-label{font-family:var(--tf-mono);font-size:8.2px;letter-spacing:.09em;fill:var(--tf-on-dark-soft);text-transform:uppercase}
.radar .axis-label.hot{fill:var(--tf-red)}

.result{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--tf-line-dark)}
.result-kicker{font-family:var(--tf-mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tf-on-dark-soft)}
.result-title{margin:.7rem 0 0;font-family:var(--tf-serif);font-size:1.65rem;line-height:1.15;color:var(--tf-on-dark)}
.result-body{margin:.85rem 0 0;font-size:.96rem;line-height:1.65;color:var(--tf-on-dark-soft);max-width:46ch}
.result-read[hidden]{display:none}
.result-read{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem 2rem;margin:1.35rem 0 0;padding-top:1.25rem;border-top:1px solid var(--tf-line-dark)}
.result-read dt{font-family:var(--tf-mono);font-size:.63rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#817a73}
.result-read dd{margin:.4rem 0 0;font-size:.95rem;line-height:1.35;color:var(--tf-on-dark)}
.result-read dd.is-con{color:var(--tf-red)}
@media (max-width:560px){.result-read{grid-template-columns:1fr}}

.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.6rem}
a.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:54px;padding:0 22px;border:1px solid transparent;border-radius:5px;font-size:.88rem;font-weight:600;text-decoration:none;transition:background 140ms var(--tf-ease),border-color 140ms var(--tf-ease)}
a.btn-primary{background:var(--tf-red);border-color:var(--tf-red);color:#fff}
a.btn-primary:hover{background:var(--tf-red-deep);border-color:var(--tf-red-deep)}
a.btn-ghost{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.5);color:#f7f4ef}
a.btn-ghost:hover{border-color:#fff}
/* Kit collision, round 11 (found by the accessibility pass, not by eye):
   the kit's link colour beat these literals and made the primary CTA
   invisible -- red text on the red button. Compounded to outrank it. */
.actions a.btn-primary{color:#fff}
.actions a.btn-primary:hover,.actions a.btn-primary:focus-visible{color:#fff}
.actions a.btn-ghost{color:#f7f4ef}
.actions a.btn-ghost:hover,.actions a.btn-ghost:focus-visible{color:#fff}
a.btn:focus-visible{outline:3px solid var(--tf-red);outline-offset:3px}
.disclaimer{margin-top:1.1rem;font-size:.76rem;line-height:1.6;color:#817a73;max-width:44ch}

/* Base rules the tool markup depends on.
   These lived in the prototype's GLOBAL block, outside the FULL TOOL section,
   so extracting only that section left them behind -- without .shell the tool
   would render edge-to-edge with no gutters. Scoped under .tool because
   ".shell" and ".eyebrow" are generic enough to collide with the theme. */
.tool *, .tool *::before, .tool *::after { box-sizing: border-box; }
.tool .shell { width: min(1280px, calc(100% - 80px)); margin-inline: auto; }
.tool .eyebrow { margin: 0 0 1rem; font-family: var(--tf-mono); font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--tf-red); }
.tool h1, .tool h2, .tool h3 { margin: 0; font-family: var(--tf-serif); font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }