/* Pre-sale assessment — styling, on the Industry design system.
   Tokens, type and component grammar come from industry.css; this file maps the
   app's own class names onto them. Square corners, hairline frames, registration
   marks on card-like objects, one steel accent. Class names and the DOM app.js
   builds are unchanged. */

:root {
  --ink: var(--color-text);
  --muted: var(--color-neutral-700);
  --line: var(--color-divider);
  --accent: var(--color-accent-700);   /* deep step: body-size text on paper */
  --accent-ink: var(--color-bg);
  --banner: linear-gradient(180deg, #003C8CD9, #28211a);
  --mk: linear-gradient(var(--color-accent-600), var(--color-accent-600));

  /* Factor bands. Industry is a mono system, so the three bands are separated
     by tonal weight and wording rather than by a traffic light: weak is the
     heaviest rule, sound the lightest. */
  --weak: var(--color-accent-900);
  --mixed: var(--color-accent-500);
  --sound: var(--color-neutral-400);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  color: var(--ink);
  background: var(--color-bg);
  font: 16px/1.55 var(--font-body);
}

/* --- Shell: banner left, questions right --- */
.shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 100vh; }

.banner {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 44px 34px;
  background: var(--banner);
  color: var(--color-bg);
}
.banner-mark { width: 200px; height: auto; }
.banner-title { margin: 0; font-size: 1.9rem; line-height: 1.1; color: var(--color-bg); }

.wrap { max-width: 720px; margin: 0 auto; padding: 40px 34px 80px; }

h1 { font-size: 1.9rem; margin: 0 0 var(--space-3); }
h2 { font-size: 1.35rem; margin: var(--space-8) 0 var(--space-3); }
h3 { font-size: 1.1rem; margin: 0 0 var(--space-2); }
p  { margin: 0 0 var(--space-4); }

.ref {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
p.ref { margin: 0 0 var(--space-2); }

/* Registration marks, drawn in CSS because app.js emits no corner elements. */
.item:not(.single), .side, .copy-slot, .nothing-found { position: relative; }
.item:not(.single)::after, .side::after, .copy-slot::after, .nothing-found::after {
  content: '';
  position: absolute;
  inset: -4px;
  pointer-events: none;
  background-image: var(--mk), var(--mk), var(--mk), var(--mk), var(--mk), var(--mk), var(--mk), var(--mk);
  background-repeat: no-repeat;
  background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px;
  background-position:
    0 4px, 4px 0,
    100% 4px, calc(100% - 4px) 0,
    0 calc(100% - 4px), 4px 100%,
    100% calc(100% - 4px), calc(100% - 4px) 100%;
}

/* --- Focus: visible for keyboard, quiet for mouse --- */
button:focus-visible,
input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.option:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.option:has(input:focus-visible) input { outline: none; }
[tabindex="-1"]:focus { outline: none; }

/* --- Items --- */
.item {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-6);
  margin: 0 0 var(--space-6);
}

.part { border: 0; margin: 0; padding: 0; min-width: 0; }
.stem { display: block; padding: 0; margin: 0 0 var(--space-4); font-weight: 500; }

.options { display: grid; gap: var(--space-2); }
.option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
}
.option input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-accent-600); }
.option:hover { background: color-mix(in srgb, var(--color-accent-200) 55%, transparent); }
.option:active { background: var(--color-accent-200); }
.option.picked { background: var(--color-accent-100); border-color: var(--color-accent-600); }

.part-two {
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent-400);
}

.number-row { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
.number-row input {
  width: 130px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--color-neutral-100);
  border: 1px solid var(--line);
  border-radius: 0;
}
.number-row input:disabled { opacity: 0.45; }
.number-row input[aria-invalid="true"] { border-color: var(--color-accent-900); border-width: 2px; }
.unit { color: var(--muted); }

/* --- Default mode: one item per page --- */
.progress { margin: 0 0 var(--space-1); }
.progress-track { height: 6px; background: var(--color-neutral-300); border-radius: 0; overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-accent-600); border-radius: 0; transition: width 250ms ease; }
.progress-text {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 1.35em;
}

.item.single { border: none; background: transparent; padding: 7vh 0 0; margin: 0; }
.item.single > .part:first-of-type .stem {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 2rem;
  line-height: 1.12;
  margin-bottom: var(--space-8);
}

/* --- Front sheet --- */
.front-sheet .muted { color: var(--muted); }
.field { margin: var(--space-6) 0; }
/* Field labels sit above their input. The consent label is an .option and keeps
   its own row layout, so it is left out rather than forced to display: block. */
.field > label:not(.option) {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}
.field input[type="email"] {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--color-neutral-100);
  border: 1px solid var(--line);
  border-radius: 0;
}
.field input[aria-invalid="true"] { border-color: var(--color-accent-900); border-width: 2px; }
.field .help { color: var(--muted); font-size: 0.86rem; margin: var(--space-2) 0 0; }
.field .error {
  color: var(--color-accent-900);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: var(--space-2) 0 0;
}
/* The notice above the consent box, and the link to the privacy page. */
.consent-notice { margin: var(--space-6) 0 var(--space-2); }
.privacy-link { color: var(--accent); }
.privacy-link:hover { color: var(--color-accent-800); }

/* Consent: box and label on one row, with a gap between them, and the box lined
   up with the first line of the label rather than with the top of the text
   block. Beats industry.css's own .field > label (0,2,1), which would otherwise
   turn the row into a 12px block and make the gap and nudge inert. */
.field > label.option {
  display: flex;
  font: 400 1rem/1.55 var(--font-body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin: 0;
  gap: 12px;
}
.field > label.option input { margin-top: calc((1.55em - 18px) / 2); }

/* The bot field: off screen for everyone who isn't a bot. Not display:none,
   which some bots skip. */
.bot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* --- Review mode --- */
.review-note { color: var(--muted); margin: 0 0 var(--space-3); }
.factor-name {
  margin: var(--space-8) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

/* --- Buttons --- */
.actions { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }
button {
  font: 500 15px/1 var(--font-body);
  letter-spacing: 0.02em;
  min-width: 6rem;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 0;
  border: 1px solid var(--color-accent-600);
  background: var(--color-accent-600);
  color: var(--accent-ink);
  cursor: pointer;
}
button:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
button:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }
button.secondary { background: transparent; color: var(--accent); }
button.secondary:hover { background: var(--color-accent-100); }
button:disabled { opacity: 0.45; cursor: default; }

/* --- Readout --- */
.review .readout { margin-top: 48px; padding-top: var(--space-8); border-top: 1px solid var(--line); }
.readout-part { margin: 0 0 var(--space-8); }

.lead { font-size: 1.15rem; line-height: 1.5; }
.summary { font-size: 1.08rem; line-height: 1.55; margin: 0 0 var(--space-8); }

/* Questions named by title with no answer: not answered, hasn't come up, and
   the Couldn't answer list. */
.title-list { margin: 0 0 var(--space-4); }
.title-list .label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}
.title-list ul { margin: 0; padding-left: 1.2rem; }
.title-list li { margin: 0 0 var(--space-1); }

/* What sits under a factor row. */
.under { margin: 0 0 var(--space-6) var(--space-6); }
/* One answer that scored 0 or 1: the question as asked, the answer given, then
   the line about it. Nothing separates them but the layout. */
.answer-block { margin: 0 0 var(--space-6); }
.answer-block .question { color: var(--muted); font-size: 0.88rem; margin: 0 0 var(--space-1); }
.answer-block .answer { font-family: var(--font-heading); font-size: 1.1rem; margin: 0 0 var(--space-2); }
.answer-block .line { margin: 0; }

/* What prints under an area for one answer that scored 0 or 1: the line about
   it and nothing else. */
.result-line { margin: 0 0 var(--space-4); }

/* A string the build expects and cannot find. Meant to be noticed. */
.todo {
  color: var(--color-accent-900);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  font-weight: 500;
}

.factor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding: 12px 14px;
  margin: 0 0 var(--space-2);
  background: transparent;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 0;
}
.factor-row .name { flex: 1 1 16rem; font-family: var(--font-heading); font-size: 1.05rem; }
.factor-row .score { color: var(--ink); font-variant-numeric: tabular-nums; }
/* Bands, not ranks: each factor is coloured by its own average. Mono system, so
   the band reads from the weight of the rule and the word, not from a hue. */
.factor-row .band {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.factor-row.band-weak { border-left-color: var(--weak); border-left-width: 5px; background: var(--color-accent-100); }
.factor-row.band-weak .band { color: var(--weak); }
.factor-row.band-mixed { border-left-color: var(--mixed); }
.factor-row.band-mixed .band { color: var(--accent); }
.factor-row.band-sound { border-left-color: var(--sound); }
.factor-row.band-tooFew .band { color: var(--muted); }
.factor-row .answered {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* One shared line under the factors, where any of them came out sound. */
.sound-line { color: var(--muted); margin: var(--space-3) 0 0; }

/* Nothing weak and no pattern. A real result, so it reads as one. */
.nothing-found {
  background: transparent;
  border: 1px solid var(--line);
  border-left: 3px solid var(--color-accent-600);
  border-radius: 0;
  padding: var(--space-6);
  margin: 0;
}

/* Holds the weak-area paragraph. It only ever renders with something in it, so
   it carries no minimum height. A hairline frame with marks, like any card. */
.copy-slot {
  margin: 0 0 var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--line);
  border-radius: 0;
}
.copy-slot p { margin: 0; }

.visibility-note { color: var(--muted); font-size: 0.9rem; margin: 0 0 var(--space-4); }

.pattern { margin: 0 0 var(--space-6); }
.pattern:last-child { margin-bottom: 0; }

/* One contradiction: the pair of answers, then the line about the pair. */
.contradiction { margin: 0 0 var(--space-8); }
.contradiction .line { margin: var(--space-3) 0 0; }

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}
.side {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-4) var(--space-6);
}
.side .question { color: var(--muted); font-size: 0.88rem; margin: 0 0 var(--space-2); }
.side .answer { font-family: var(--font-heading); font-size: 1.15rem; margin: 0; }
.side .line { margin: var(--space-2) 0 0; }

/* The next step, on every page, after the last section. A framed object with
   an accent rule, holding the page's one solid action. */
.next-step {
  position: relative;
  background: transparent;
  border: 1px solid var(--line);
  border-left: 3px solid var(--color-accent-600);
  border-radius: 0;
  padding: var(--space-6);
  margin: var(--space-8) 0 var(--space-6);
}
.next-step::after {
  content: '';
  position: absolute;
  inset: -4px;
  pointer-events: none;
  background-image: var(--mk), var(--mk), var(--mk), var(--mk), var(--mk), var(--mk), var(--mk), var(--mk);
  background-repeat: no-repeat;
  background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px;
  background-position:
    0 4px, 4px 0,
    100% 4px, calc(100% - 4px) 0,
    0 calc(100% - 4px), 4px 100%,
    100% calc(100% - 4px), calc(100% - 4px) 100%;
}
.next-step p:last-of-type { margin-bottom: 0; }

.book {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 22px;
  font: 500 15px/1 var(--font-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid var(--color-accent-600);
  background: var(--color-accent-600);
  color: var(--accent-ink);
}
.book:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--accent-ink); }
.book:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.book:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.closing { color: var(--muted); font-size: 0.92rem; border-top: 1px solid var(--line); padding-top: var(--space-6); }

/* --- Narrow: banner becomes a top strip --- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; min-height: 0; }
  .banner {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    padding: 20px 22px;
    background: linear-gradient(135deg, #003C8CD9, #28211a);
  }
  .banner-mark { width: 130px; }
  .banner-title { font-size: 1.15rem; }
  .wrap { padding: 28px 22px 64px; }
}

@media (max-width: 560px) {
  .banner { flex-wrap: wrap; }
  .wrap { padding: 20px 16px 64px; }
  .pair { grid-template-columns: 1fr; }
  .item.single { padding-top: 3vh; }
  .item.single > .part:first-of-type .stem { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Kept from the build rather than the design pass: the consent box and its
   label sit on one row, with the box on the first line of the label. The
   design stylesheet has no rule for it, and without this the two collapse
   back together. */
/* The notice above the box, and the link to the privacy page. */
.consent-notice { margin: 20px 0 8px; }
.privacy-link { color: var(--accent); }

.option.consent { font-weight: 400; gap: 12px; }
.option.consent input { margin-top: calc((1.5em - 18px) / 2); }

/* The wordmark links home. */
.banner-home { display: inline-block; line-height: 0; }
.banner-home:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 4px; }