/* The eight-question form. Card 39. Role tokens only. */

.ct-page__h {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-bold);
  font-size: var(--ct-size-hook);
  margin: 0 0 9px;
}
.ct-lede { max-width: 62ch; margin: 0 0 22px; }

.ct-promise {
  border-left: 4px solid var(--ct-accent-positive);
  background: var(--ct-surface);
  padding: 13px 18px;
  margin: 0 0 22px;
  max-width: 66ch;
}
.ct-promise p { margin: 0 0 7px; font-size: var(--ct-size-body-sm); line-height: 1.5; }
.ct-promise p:last-child { margin-bottom: 0; }

/* Card 35's fit fields join this group. It is visibly separate from the eight
 * because the one-pager sells "eight questions" and these are not among them. */
.ct-context {
  border: 1px solid var(--ct-border);
  padding: 14px 16px 16px;
  margin: 0 0 26px;
  max-width: 66ch;
}
.ct-context__h {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  font-size: var(--ct-size-ui);
  color: var(--ct-text-strong);
  margin: 0 0 4px;
}
.ct-context__note {
  font-size: var(--ct-size-meta);
  color: var(--ct-text-muted);
  margin: 0 0 12px;
}
.ct-context__field label {
  display: block;
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-medium);
  font-size: var(--ct-size-meta);
  color: var(--ct-text-strong);
  margin-bottom: 3px;
}
.ct-context__field input {
  font-family: var(--ct-font-text);
  font-size: var(--ct-size-body-sm);
  color: var(--ct-text);
  background: var(--ct-surface-raised);
  border: 1px solid var(--ct-border);
  padding: 7px 9px;
  width: 100%;
  max-width: 30ch;
}

.ct-q__item {
  border: 0;
  border-top: 1px solid var(--ct-border);
  padding: 16px 0 6px;
  margin: 0;
  max-width: 66ch;
}
.ct-q__legend {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  font-size: var(--ct-size-body);
  color: var(--ct-text-strong);
  padding: 0;
  margin-bottom: 10px;
}
.ct-q__choice { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 7px; }
.ct-q__choice input { margin-top: 4px; flex: 0 0 auto; }
.ct-q__choice label { font-size: var(--ct-size-body-sm); line-height: 1.45; cursor: pointer; }

.ct-q__status {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-medium);
  font-size: var(--ct-size-meta);
  color: var(--ct-text-muted);
  margin: 20px 0 10px;
}
.ct-q__submit {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  font-size: var(--ct-size-ui);
  color: var(--ct-text-inverse);
  background: var(--ct-accent-primary);
  border: 0;
  padding: 11px 18px;
  cursor: pointer;
}
.ct-q__submit[disabled] { background: var(--ct-text-muted); cursor: default; }

.ct-q__submit:focus-visible,
.ct-q__choice input:focus-visible,
.ct-context__field input:focus-visible {
  outline: var(--ct-focus-ring-width) solid var(--ct-focus-ring);
  outline-offset: var(--ct-focus-ring-offset);
}

/* ---- The results view. Card 20. ----------------------------------------- */

.ct-r {
  border-top: 3px solid var(--ct-border);
  margin-top: 34px;
  padding-top: 22px;
  max-width: 66ch;
}
.ct-r:focus-visible {
  outline: var(--ct-focus-ring-width) solid var(--ct-focus-ring);
  outline-offset: var(--ct-focus-ring-offset);
}
.ct-r__h {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-bold);
  font-size: var(--ct-size-lead);
  color: var(--ct-text-strong);
  margin: 26px 0 10px;
}
.ct-r__h:first-child { margin-top: 0; }

.ct-r__lead {
  font-size: var(--ct-size-body-sm);
  color: var(--ct-text-muted);
  margin-bottom: 2px;
}

/* The band label is the headline and the number is secondary to it, in the type
 * scale as well as in markup order. ADR 0005 rule 2: the number is not the most
 * prominent element on the view. A blend of eight single questions does not
 * carry the precision a large decimal implies, and the band is the honest
 * resolution of what this instrument can actually tell someone. */
.ct-r__band {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-bold);
  font-size: var(--ct-size-hook);
  line-height: 1.05;
}
.ct-r__num {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-medium);
  font-size: var(--ct-size-body);
  color: var(--ct-text-muted);
  margin-top: 4px;
}

.ct-r__basis,
.ct-r__coverage {
  font-size: var(--ct-size-body-sm);
  line-height: 1.5;
  color: var(--ct-text);
  margin-top: 12px;
}
.ct-r__coverage { color: var(--ct-text-muted); }

.ct-r__scorecard { list-style: none; margin: 0; padding: 0; }
.ct-r__row {
  display: grid;
  grid-template-columns: minmax(14ch, 1fr) auto auto;
  align-items: baseline;
  gap: 4px 10px;
  border-top: 1px solid var(--ct-border);
  padding: 9px 0 10px;
}
.ct-r__row-name {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  font-size: var(--ct-size-body-sm);
  color: var(--ct-text-strong);
}
.ct-r__row-score {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-medium);
  font-size: var(--ct-size-body-sm);
  color: var(--ct-text-muted);
  font-variant-numeric: tabular-nums;
}

/* The band word, in text, in the same visual unit as the colour it names.
 * Not a legend elsewhere on the page: Strong against Watch measures 1.12:1, both
 * are pre-existing brand colours, and a legend asks the reader who cannot
 * separate the swatches to hold four of them in memory and match them back.
 *
 * THE WORD IS NOT DRAWN IN THE BAND COLOUR. It was, and that was a defect (#42).
 * tokens.css measured the four when card 4 chose them and annotated them for the
 * use they were chosen for — `clears 3:1 non-text` on Attention, and `safe as
 * text` on Priority alone. Three of the four fail AA for normal text on white:
 * Strong 2.76:1, which fails AA large as well, Watch 3.10:1, Attention 3.75:1.
 * This is 11.5px semibold, which is normal text by every definition.
 *
 * So the BAR carries the colour and the WORD carries the meaning. That is not a
 * concession — card 4's rule was always that colour is reinforcement and the
 * label is the carrier, and drawing the label in a colour that fails as text was
 * the one arrangement that put the carrier at risk to reinforce itself.
 *
 * check-assets.py now fails the build on any --ct-band-* token used as a `color`
 * value, so the annotation in tokens.css is enforced rather than advisory. */
.ct-r__row-band {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  font-size: var(--ct-size-meta);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ct-text-strong);
  justify-self: end;
}

/* NO RAIL. There is deliberately no background, border or end mark on the wrap:
 * with nothing drawn behind it a bar has no visible end to fall short of. The
 * best score this tool can produce is 9.0, and ADR 0005 rule 2 is that a reader
 * seeing a score sit short of the end of a drawn track reads the gap as marks
 * withheld from them. Length still compares domains against each other, which is
 * the whole job of the bars. Do not add a track here. */
.ct-r__bar-wrap {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  margin-top: 3px;
}
.ct-r__bar { display: block; height: 100%; min-width: 2px; }
.ct-r__bar--strong    { background: var(--ct-band-strong); }
.ct-r__bar--watch     { background: var(--ct-band-watch); }
.ct-r__bar--attention { background: var(--ct-band-attention); }
.ct-r__bar--priority  { background: var(--ct-band-priority); }

/* The not-applicable row. No number, no bar, and no grey-out: a dimmed row reads
 * as a row that failed, which is card 20's second prohibition. It reads as
 * ordinary text because it is an ordinary fact about the reader's business. */
.ct-r__row--na { grid-template-columns: minmax(14ch, 1fr) auto; }
.ct-r__row-state {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  font-size: var(--ct-size-meta);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ct-text-muted);
  justify-self: end;
}
.ct-r__row-note {
  grid-column: 1 / -1;
  font-size: var(--ct-size-body-sm);
  line-height: 1.45;
  color: var(--ct-text);
  margin-top: 3px;
}

.ct-r__note {
  font-size: var(--ct-size-body-sm);
  color: var(--ct-text-muted);
  margin-bottom: 10px;
}
.ct-r__weak { list-style: none; margin: 0; padding: 0; }
.ct-r__weak-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-left: 3px solid var(--ct-accent-primary);
  background: var(--ct-surface);
  padding: 9px 12px;
  margin-bottom: 6px;
}
.ct-r__weak-name {
  font-family: var(--ct-font-display);
  font-weight: var(--ct-weight-semibold);
  font-size: var(--ct-size-body-sm);
  color: var(--ct-text-strong);
}
.ct-r__weak-score {
  margin-left: auto;
  font-family: var(--ct-font-display);
  font-size: var(--ct-size-meta);
  color: var(--ct-text-muted);
  font-variant-numeric: tabular-nums;
}
.ct-r__na-note {
  font-size: var(--ct-size-body-sm);
  line-height: 1.5;
  color: var(--ct-text);
  margin-top: 12px;
}