/* The search/sort/filter toolbar for assessment_list.html and
   assessment_history.html now uses the shared .list-controls* component
   -- static/shared/css/list-controls.css, loaded from base.html,
   extracted there once a third app duplicated the pattern (see
   agent_docs/frontend-css-conventions.md). */

/* .card--lift lives in static/shared/css/cards.css (loaded from
   base.html) -- extracted there once a third app (documents) needed a
   byte-for-byte copy, per agent_docs/frontend-css-conventions.md's own
   "extract once a third app needs it" rule. */

/* .add-card / .add-card__icon (the "create new" ghost tile) moved to
   static/shared/css/cards.css -- documents' catalogue was the 3rd app to
   need it, per agent_docs/frontend-css-conventions.md's "extract on the
   3rd" rule. */

/* The assessment card: the public catalogue (_assessment_card_cols.html)
   and the Authored page (_authored_assessment_card_cols.html). GitHub-style
   like articles.css's .article-card since 2026-10-19: no border, fill,
   shadow or padding, 0.5rem corners on card and cover with 1.75rem under the
   cover, the labels row (a status line above it on Authored), a 22px
   medium-weight title in the heading colour, the purpose as a muted teaser,
   the facts line, then text links. Sizes and spacing are copied from
   articles.css (these pages don't load it); keep the two in step. */
.assessment-card {
  --bs-card-border-width: 0;
  --bs-card-bg: transparent;
  border-radius: 0.5rem;
}

.assessment-card .card-body {
  padding: 0;
}

.assessment-card__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  margin-bottom: 1.75rem;
}

/* --focal-x/--focal-y/--zoom set inline per-assessment (Assessment.
   image_focal_style) -- object-position centers the stored focal point in
   this box, then transform zooms in around that same point. Falls back to
   a plain centered, unzoomed crop wherever those custom properties aren't
   set (e.g. an admin-set image never touched by the crop/zoom editor).
   Same pattern as articles.css's own .article-card__image. */
.assessment-card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focal-x, 50%) var(--focal-y, 50%);
}

/* Same Planful Minds gradient + centered glyph articles.css's own
   .article-card__image--fallback/.article-detail__hero--fallback use --
   one shared "no image set" look across both apps' cards/heroes. */
.assessment-card__image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #0067b8, #00365e);
  color: rgba(255, 255, 255, 0.85);
  font-size: 2.5rem;
}

/* Authored only: the publishing status on its own line above the category,
   as on My articles (articles.css's .article-card__status). With no
   category or price after it, it takes the labels row's own gap. */
.assessment-card__status {
  display: flex;
  margin-bottom: 0.5rem;
}

.assessment-card__status:has(+ .assessment-card__labels:empty) {
  margin-bottom: 1.25rem;
}

/* .card__token (static/shared/css/cards.css) with fixed status colours,
   the same as My articles' (articles.css's .article-card__status-badge--*;
   Scheduled takes its Pending yellow). A status, not a taxonomy label, so
   not wired to branding.CardStyle. The word carries the meaning; the fill
   only echoes it (WCAG 1.4.1). Text contrast: 4.7:1, 10.3:1, 4.5:1, 8.2:1. */
.assessment-card__status-token--draft {
  background-color: #6c757d;
  color: #fff;
}

.assessment-card__status-token--scheduled {
  background-color: #ffc107;
  color: #1d1d1f;
}

.assessment-card__status-token--published {
  background-color: #198754;
  color: #fff;
}

.assessment-card__status-token--archived {
  background-color: #495057;
  color: #fff;
}

/* Category (and a paid assessment's price). Written on one line in the
   templates, so it's :empty (and takes no space) when neither applies. */
.assessment-card__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.assessment-card__labels:empty {
  display: none;
}

.assessment-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
}

/* The whole card is the link; its hover cue is the arrow, not the colour. */
.assessment-card__title a {
  color: var(--site-heading-color, #1d1d1f);
}

/* Assessment.purpose (at most 300 characters). The 4-line clamp is the
   safety net; max-height (4 x line-height) stops a sliver of a fifth line
   showing under the ellipsis in some browsers. #5c6672 is 5.8:1 on white. */
.assessment-card__summary {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 6em;
  margin-bottom: 0.75rem;
  color: #5c6672;
  font-size: 1rem;
  line-height: 1.5;
}

/* .fact-list -- labelled "at a glance" facts: the cards' Audience /
   Estimated time / Questions (since 2026-10-20 a meta line,
   .fact-list--meta below), and the detail page's Type / Audience /
   Estimated time (2026-10-19, stacked: .fact-list--stacked below). The base
   rules here are the plain grid both modifiers build on. A generic name since both use it
   (agent_docs/frontend-css-conventions.md). A <dl> with one row per fact,
   the label in a column of its own so the values line up and a long
   audience wraps inside its value cell (subgrid: every row shares the
   label column's width). Darker than .card__meta (product owner,
   2026-10-19; as one muted #5c6672 run of text the three facts read as a
   single block): labels #1f2328 semibold (16:1 on white), values #424a53
   (9:1). */
.fact-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.fact-list:empty {
  display: none;
}

.fact-list__item {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.fact-list__item dt {
  font-weight: 600;
  color: #1f2328;
}

.fact-list__item dd {
  margin: 0;
  color: #424a53;
}

/* The detail page's facts (assessment_detail.html, product owner,
   2026-10-19): one fact per row between hairlines (#adb5bd, the
   builder's darker hairline, like the page's sections below), the label bold
   above its value, no icons. The hairlines only separate rows (the labels
   carry the structure), so they're decorative under WCAG 1.4.11. Labels
   #1f2328 (16:1 on white), values #5c6672 (5.9:1). Sized with the
   description and Instructions (.assessment-detail__prose): labels
   1.125rem, values 1.0625rem. .fact-list:empty still wins (higher
   specificity), so an empty list draws no top rule. */
.fact-list--stacked {
  display: block;
  border-top: 1px solid #adb5bd;
  font-size: 1.0625rem;
}

.fact-list--stacked .fact-list__item {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid #adb5bd;
}

.fact-list--stacked .fact-list__item dt {
  margin-bottom: 0.2rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.fact-list--stacked .fact-list__item dd {
  color: #5c6672;
}

/* The cards' facts as a meta line (_assessment_card_cols.html and
   _authored_assessment_card_cols.html, product owner, 2026-10-20, mockup
   C): no rules. A --wide item (Audience)
   is one line of its own, its label inline and semibold before the value;
   the others (time, questions) share an icon line like the article card's
   "3 min read", their labels visually hidden. Icons #5c6672, values #424a53
   (9:1 on white). 0.5rem above (1.25rem below the summary's 0.75rem), and
   2.25rem below, before the footer's links. .fact-list:empty still wins
   (higher specificity), so a card with no facts keeps no gap for them. */
.fact-list--meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1.25rem;
  margin: 0.5rem 0 2.25rem;
  font-size: 1rem;
}

.fact-list--meta .fact-list__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
}

.fact-list--meta .fact-list__item dt {
  display: inline-flex;
  color: #5c6672;
}

.fact-list--meta .fact-list__item--wide {
  display: block;
  flex: 1 1 100%;
  font-size: 1rem;
}

.fact-list--meta .fact-list__item--wide dt {
  display: inline;
  margin-right: 0.375rem;
  color: #1f2328;
}

.fact-list--meta .fact-list__item--wide dd {
  display: inline;
}

/* Catalogue: Start assessment on the left, Edit on the right. Authored:
   Try and Edit on the left, Delete on the right. */
.assessment-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.assessment-card__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Every footer action is a text link (or a text-style <button> for the
   Authored card's Try and Delete forms), not a pill button: articles.css's
   .article-card__read-link / .article-card__edit-btn / __delete-btn.
   Lifted above the title's .stretched-link overlay, or a click on Edit or
   Delete falls through to the card's own destination (a real bug once,
   reported directly). The vertical padding keeps each target at least
   24px tall (WCAG 2.5.8). */
.assessment-card__link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--site-link-color, #0067b8);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}

.assessment-card__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Bootstrap's danger-text-emphasis red, 6.5:1 on white (articles.css's
   .article-card__delete-btn). */
.assessment-card__link--danger {
  color: #b02a37;
}

/* GitHub's expanding arrow, as on "Read article" (articles.css's
   .article-card__read-arrow): the chevron's stem draws in as it nudges
   2px right while the pointer is over the card or focus is inside it. */
.assessment-card__arrow {
  flex-shrink: 0;
  margin-inline-start: 0.25rem;
  transition: transform 0.2s ease;
}

.assessment-card__arrow-stem {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: stroke-dashoffset 0.2s ease;
}

.assessment-card:hover .assessment-card__arrow,
.assessment-card:focus-within .assessment-card__arrow {
  transform: translateX(2px);
}

.assessment-card:hover .assessment-card__arrow-stem,
.assessment-card:focus-within .assessment-card__arrow-stem {
  stroke-dashoffset: 20;
}

@media (prefers-reduced-motion: reduce) {
  .assessment-card__arrow,
  .assessment-card__arrow-stem {
    transition: none;
  }
}

/* The coloured category and price pills (.assessment-card__category-badge /
   __price-badge, coloured by branding.CardStyle's --assessments-card-*
   vars) are gone: the cards (2026-10-19) and then the assessment page
   (the same day) show both as neutral .card__token labels instead, as the
   articles did first. Nothing read the Assessments colours after that, so
   its Card Style Overrides row went too (branding migration 0023). */

/* The builder's own Save/Next footer buttons and header "Try assessment"
   button: the big pill-button treatment of articles.css's own
   .article-card__read-btn, duplicated under this app's own class name
   per agent_docs/frontend-css-conventions.md (assessments.css doesn't
   load articles.css). Not Bootstrap's .btn (reset to this shape from
   scratch). The catalogue card's old "Start" pill shared this ruleset
   until that card became GitHub-style (2026-10-19, text links). */
.assessment-builder__pill-btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 980px;
  background-color: var(--site-btn-primary-bg-color, #0067b8);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.assessment-builder__pill-btn--primary:hover,
.assessment-builder__pill-btn--primary:focus-visible {
  background-color: #00558f;
  color: #fff;
}

.assessment-builder__pill-btn--primary:focus-visible {
  outline: 3px solid #16233c;
  outline-offset: 2px;
}

/* The outlined twin of --primary above: the builder step footer's
   Exit/Previous buttons. The catalogue card's old "Edit" pill shared this
   ruleset until that card became GitHub-style. */
.assessment-builder__pill-btn--outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--site-btn-primary-bg-color, #0067b8);
  border-radius: 980px;
  background-color: transparent;
  color: var(--site-btn-primary-bg-color, #0067b8);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.assessment-builder__pill-btn--outline:hover,
.assessment-builder__pill-btn--outline:focus-visible {
  background-color: #e9f2fc;
  color: #00558f;
  border-color: #00558f;
}

.assessment-builder__pill-btn--outline:focus-visible {
  outline: 3px solid #16233c;
  outline-offset: 2px;
}

/* Red-outline variant of the shape above, for the footer's "Exit" button
   specifically (reported directly: match Exit to the site's red-outline
   Cancel buttons, specifically learning_paths/author_form.html's own
   "Remove image" -- a plain Bootstrap .btn-outline-danger .btn-pill
   .btn-check-action, #dc3545 border/text, solid #dc3545 fill + white text
   on hover/focus) -- .assessment-builder__pill-btn--outline itself stays
   blue since it's shared with the footer's "Previous" button, which isn't
   a cancel-style action. Same equal-specificity "modifier class layered
   on the base class" pattern as documents.css's own
   .document-card__pill-btn--danger, but matching Bootstrap's own
   .btn-outline-danger hover (solid fill, not a light tint) since that's
   the exact reference button this was asked to match. */
.assessment-builder__pill-btn--outline-danger {
  border-color: #dc3545;
  color: #dc3545;
}

.assessment-builder__pill-btn--outline-danger:hover,
.assessment-builder__pill-btn--outline-danger:focus-visible {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

/* Builder bump of the pill-button text size above (0.9375rem, the
   article card's old Read pill) to 1rem (reported directly: a
   builder-wide text floor). The builder footer's Save/Exit and the
   header's "Try assessment" are real <button> elements (overview.html/
   delivery.html/scoring.html's own builder_save block; builder/_header.html),
   so this also restores the pointer cursor and the surrounding body font
   Bootstrap's own .btn used to supply (the few UA button defaults the
   shared ruleset above doesn't already cover). */
.assessment-builder__pill-btn--primary,
.assessment-builder__pill-btn--outline {
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
}

/* The step footer packs up to 5 of these pills (Save / Try assessment /
   Exit / Previous / Next) into one row -- the shared 1.4rem side padding
   above is sized for a lone card button, not five in a row, and was just
   barely wide enough to force Previous/Next onto their own wrapped
   second line at common laptop widths (~992-1024px), with visible empty
   space left on the first line (reported directly: the footer should
   read as one line). A touch tighter here only, not changed site-wide,
   closes that gap. */
.assessment-builder__footer .assessment-builder__pill-btn--primary,
.assessment-builder__footer .assessment-builder__pill-btn--outline {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Generic reusable muted icon+text meta line (agent_docs/frontend-css-
   conventions.md) -- the detail page's attempt-policy line (the cards'
   and the detail page's facts were one too, until 2026-10-19: .fact-list
   above), so every
   small supporting fact reads at the same (smallest, most muted) tier
   of the hierarchy, distinct from the title/purpose/description. Bumped
   up from 0.75rem (reported directly: wanted this text bigger) --
   stays the smallest tier of the card's own hierarchy, just a less
   cramped size. Colour: static/shared/css/cards.css. */
.card__meta {
  font-size: 0.875rem;
}

/* The intro isn't a card any more (2026-10-19, product owner: no
   shadows): the cover gets the cards' 0.5rem corners itself, and clips
   the image / fallback to them (and the zoom's transform: scale()
   overflow), with the title and text flush with its edges below. */
.assessment-detail__hero-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}

/* Category · Subcategory and the price, as .card__token labels under the
   cover (2026-10-19, product owner; they were coloured pills over its
   top-left corner): the cards' labels row (.assessment-card__labels), with
   1rem above it instead of below (the title's mt-3 spaces it below). */
.assessment-detail__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.assessment-detail__labels:empty {
  display: none;
}

/* --focal-x/--focal-y/--zoom as on .assessment-card__image -- the
   enclosing .assessment-detail__hero-wrap clips the transform: scale()
   overflow. */
.assessment-detail__hero {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focal-x, 50%) var(--focal-y, 50%);
}

.assessment-detail__hero--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 6;
  background: linear-gradient(135deg, #0067b8, #00365e);
  color: rgba(255, 255, 255, 0.85);
  font-size: 4rem;
}

.assessment-detail__title {
  color: #0067b8;
}

/* .back-link moved to static/shared/css/cards.css (code-audit finding
   FE-05, 2026-09-17) -- a 3rd app (shop) needed the same rule. */

/* Smaller than Bootstrap's own .small (0.875em) -- a photo credit is a
   minor attribution line, not body-adjacent text competing for
   attention. Same sizing as articles.css's own .card__image-credit. */
.assessment-detail__image-credit {
  font-size: 0.75rem;
}

/* The detail page's reading text (product owner, 2026-10-19): the
   description and the Instructions section at 1.125rem, a step up from
   the body's 1rem and still under the purpose line's .lead (1.25rem).
   The Instructions title (an h2 styled .h5, 1.25rem) goes up with it so
   it still stands above its text. */
.assessment-detail__prose {
  font-size: 1.125rem;
}

.assessment-detail__prose .card-title {
  font-size: 1.375rem;
}

/* The detail page's bordered sections (Instructions, Get started,
   Before this, Related assessments): .card.card--bordered, no shadow, no
   tint, no accent (2026-10-19, product owner; Instructions was an amber
   callout with a 4px left accent). Their border is the builder's darker
   #adb5bd hairline (product owner, 2026-10-19), matching the facts list's
   lines, instead of .card--bordered's #dee2e6. The rich text's last
   paragraph keeps no bottom margin, so the padding is even all round. */
.assessment-detail__section.card--bordered {
  border-color: #adb5bd;
}

.assessment-detail__section .card-body > :last-child {
  margin-bottom: 0;
}

/* ===== Take wizard (ADR 0052) -- one question per screen ============== *
 * assessment_take.html: <h1> + overall progress bar, then a two-column
 * layout of a dimension rail beside the single-question step card.
 * Text sizes went up a step (product owner, 2026-10-19): the intro line
 * and the answers at 1.125rem (like the detail page's
 * .assessment-detail__prose), the question at 1.375rem, the rail /
 * eyebrow / count up 0.125rem each. */

/* The title has the standard page heading's space above it (base.html
   --page-heading-space-top, 2.5rem, as on /articles/; product owner,
   2026-10-19), here between the breadcrumb and the title. It collapses
   with the breadcrumb's own 1rem bottom margin, so the gap is 2.5rem.
   The builder header's name size (.assessment-builder__name), not the
   site's h1 size (product owner, 2026-10-20); keep the two in step. */
.assessment-take__title {
  margin-top: var(--page-heading-space-top, 2.5rem);
  font-size: clamp(1.75rem, 1.5rem + 1.3vw, 2.25rem);
}

.assessment-take__intro {
  font-size: 1.125rem;
}

/* The rail's overall progress uses the builder rail's own
   .assessment-builder__progress / __progress-label / __autosave-status
   (below; _take_body.html), like the template builder's (product owner,
   2026-10-19: it had been a 1.25rem rounded bar above the layout). */

/* Rail beside step from lg up; stacked (rail first) below. The same
   columns as the template builder (documents.css .document-builder__layout;
   product owner, 2026-10-19): a 360px rail, a 1.5rem gap and the step card
   in the rest of the full-width container. */
.assessment-take__layout {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 992px) {
  .assessment-take__layout {
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: start;
  }
  .assessment-take__rail {
    position: sticky;
    top: 4rem;
  }
}

/* The section rail (_take_body.html; product owner, 2026-10-19: it read
   as plain and unclear, then "a clean list with subtle dividers"). A white
   panel: the overall progress ("N of M questions answered" over the
   builder's bar, then "Auto-saved"), a light rule, a "Sections" heading,
   and an open list of sections with a light rule between rows, no box.
   Each row: a 2.25rem marker, the name over "N of M answered", and a
   chevron when the row is a link (a section you may go to; the current
   and not-yet-reached rows aren't links, so they carry none). The panel's
   border is the page's darker #adb5bd and its corners Bootstrap's
   --bs-border-radius, both like the question card beside it. */
.assessment-take__rail {
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid #adb5bd;
  border-radius: var(--bs-border-radius, 0.375rem);
}

/* The progress block and saved note are the builder rail's own
   (.assessment-builder__progress / __autosave-status, below), which took
   this rail's look (product owner, 2026-10-19). */

/* The Sections nav under the progress, set off by a light rule. The rules
   only separate parts (the headings and text carry the structure), so
   they're decorative under WCAG 1.4.11. */
.assessment-take__sections {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #dee2e6;
}

/* "Sections" and, below lg, its "All N sections" toggle on the right. */
.assessment-take__sections-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.25rem;
}

.assessment-take__rail-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: #16233c;
}

/* Hidden from lg up, where the list always shows in full, and without JS
   (the take-sections-js class is set by assessment_take.html's head
   script); see the max-width block below. */
.assessment-take__sections-toggle {
  display: none;
}

.assessment-take__rail-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.assessment-take__rail-item + .assessment-take__rail-item {
  border-top: 1px solid #dee2e6;
}

/* The whole row is the link (a bigger target than the name alone). */
.assessment-take__rail-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  border-radius: var(--bs-border-radius, 0.375rem);
  color: #16233c;
  text-decoration: none;
}

/* A section you can go to: its name underlines and turns blue on hover,
   with the chevron, so it reads as a link without colour alone. The focus
   ring is site-wide (focus.css). */
a.assessment-take__rail-link:hover {
  color: #0067b8;
}

a.assessment-take__rail-link:hover .assessment-take__rail-label {
  text-decoration: underline;
}

.assessment-take__rail-chevron {
  flex-shrink: 0;
  margin-left: auto;
  color: #5c6672;
  font-size: 1.125rem;
}

a.assessment-take__rail-link:hover .assessment-take__rail-chevron {
  color: #0067b8;
}

/* Upcoming: an outlined number. Finished: a solid green disc with a white
   tick. Current: a solid blue disc with its number. Three shapes, not
   only three colours (WCAG 1.4.1); the colours are .builder-stepper__marker's
   (white on #198754 4.5:1, on #0067b8 5.9:1; #495057 on white 8.6:1). */
.assessment-take__rail-marker {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid #adb5bd;
  border-radius: 50%;
  background-color: #fff;
  color: #495057;
  font-size: 1rem;
  font-weight: 600;
}

.assessment-take__rail-item.is-done .assessment-take__rail-marker {
  border-color: #198754;
  background-color: #198754;
  color: #fff;
}

.assessment-take__rail-item.is-done .assessment-take__rail-marker .bi {
  font-size: 1.25rem;
}

.assessment-take__rail-item.is-current .assessment-take__rail-marker {
  border-color: #0067b8;
  background-color: #0067b8;
  color: #fff;
}

/* Forced colours: the current step's filled marker is its only visual cue,
   and High Contrast repaints the fill, so it takes the system's selection
   colours. The take page's section rail. */
@media (forced-colors: active) {
  .assessment-take__rail-item.is-current .assessment-take__rail-marker {
    forced-color-adjust: none;
    border-color: Highlight;
    background-color: Highlight;
    color: HighlightText;
  }
}

.assessment-take__rail-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.assessment-take__rail-label {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

/* #5c6672: 5.9:1 on white (AX-10). */
.assessment-take__rail-count {
  font-size: 0.9375rem;
  color: #5c6672;
}

/* Below lg the rail sits above the question, the same stacked list as
   beside it, only tighter (product owner, 2026-10-19: it was a
   sideways-scrolling strip, which cut the next section off at the edge
   with no sign there was more). Names wrap instead of running off the
   screen.

   With JS the list then collapses to the current section, so a long
   assessment doesn't push the question down the page (product owner,
   2026-10-19). The toggle's aria-expanded is the one source of truth: the
   other rows are hidden while it's "false" (display: none, so their links
   leave the tab order too), and the chevron turns while it's "true".
   The toggle is a text button like the cards' links, at least 24px tall
   (WCAG 2.5.8); the focus ring is site-wide (focus.css). */
@media (max-width: 991.98px) {
  .assessment-take__rail {
    padding: 1rem;
  }
  .assessment-take__sections {
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .assessment-take__rail-title {
    font-size: 1.25rem;
  }
  .assessment-take__rail-link {
    gap: 0.75rem;
    padding: 0.75rem 0;
  }
  .take-sections-js .assessment-take__sections-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
    border: 0;
    background: none;
    color: var(--site-link-color, #0067b8);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
  }
  .take-sections-js .assessment-take__sections-toggle:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .assessment-take__sections-toggle .bi {
    transition: transform 0.2s ease;
  }
  .assessment-take__sections-toggle[aria-expanded="true"] .bi {
    transform: rotate(180deg);
  }
  .take-sections-js [data-sections-collapsible]:has([data-sections-toggle][aria-expanded="false"]) .assessment-take__rail-item:not(.is-current) {
    display: none;
  }
  .take-sections-js [data-sections-collapsible]:has([data-sections-toggle][aria-expanded="false"]) .assessment-take__rail-item.is-current {
    border-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assessment-take__sections-toggle .bi {
    transition: none;
  }
}

/* The single-question step card. */
.assessment-take__step-slot {
  min-width: 0;
}

/* The take page's borders are the darker #adb5bd hairline (product
   owner, 2026-10-19), as on the detail page (.assessment-detail__section):
   the step card, the resume / timer notices (Bootstrap's .border reads
   --bs-border-color), the line above Back / Next and the progress
   track. */
.assessment-take__step-slot.card--bordered {
  border-color: #adb5bd;
}

.assessment-take__notice {
  --bs-border-color: #adb5bd;
}

.assessment-take__optional {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.assessment-take__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.assessment-take__eyebrow-dim {
  color: #0067b8;
}

.assessment-take__eyebrow-count {
  color: #6c757d;
}

/* The answers (radio / checkbox labels, help text in em) at 1.125rem;
   text inputs and selects set their own 1rem, so they're told to follow. */
.assessment-take__control {
  font-size: 1.125rem;
}

.assessment-take__control .form-control,
.assessment-take__control .form-select {
  font-size: inherit;
}

/* The question itself -- the answer partials render it as the field's
   label / legend; make it the prominent thing on the card. */
.assessment-take__control .form-label,
.assessment-take__control legend {
  font-size: 1.375rem;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 0.85rem;
  float: none;
  width: auto;
}

.assessment-take__step-nav {
  display: flex;
  /* "Back" then "Next", both grouped at the left. "Next" moved off the
     far right -- the right edge read as out of reach (ADR 0052 follow-up);
     "Back" keeps its left-side position. */
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #adb5bd;
}

/* Back / Next / Continue / Finish, a step up with the answers. */
.assessment-take__step-nav .btn {
  font-size: 1.125rem;
}

/* Layout interstitial -- an informational / divider / page_break element
   shown on its own wizard screen with a Continue button (ADR 0052). */
.assessment-take__interstitial {
  padding: 1.5rem 0 0.5rem;
}

.assessment-take__interstitial-rule {
  width: 3rem;
  margin: 0 0 1.25rem;
  border: 0;
  border-top: 3px solid #cfe1f2;
  opacity: 1;
}

.assessment-take__interstitial-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #16233c;
  margin-bottom: 0.75rem;
}

.assessment-take__interstitial-title:focus-visible {
  outline: 2px solid #1668c9;
  outline-offset: 4px;
}

.assessment-take__interstitial-body {
  font-size: 1.1875rem;
  color: #3f4a57;
}

.assessment-take__interstitial-body p:last-child {
  margin-bottom: 0;
}

/* Ranking / ordering / top-N question (ADR 0047, _answer_ranking.html). */
.assessment-rank {
  margin: 0;
}

.assessment-rank__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #dee2e6;
  border-radius: 0.4rem;
  margin-bottom: 0.4rem;
  background-color: #fff;
}

.assessment-rank__grip {
  color: #adb5bd;
  cursor: grab;
}

/* Visible position badge -- populated by assessment_ranking.js (empty, and
   thus collapsed, when JS hasn't run and the <select> is the live control). */
.assessment-rank__ordinal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background-color: #0067b8;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.assessment-rank__ordinal:empty {
  display: none;
}

.assessment-rank__ordinal--unranked {
  background-color: #e9ecef;
  color: #6c757d;
}

.assessment-rank__label {
  flex-grow: 1;
}

.assessment-rank__up,
.assessment-rank__down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  line-height: 1;
  text-decoration: none;
}

.assessment-rank__pos {
  max-width: 4.5rem;
}

/* Matching / categorisation / allocation (ADR 0047 Phase 2). */
.assessment-map {
  margin: 0;
}

.assessment-map__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
}

.assessment-map__label {
  flex-grow: 1;
}

.assessment-map__num {
  max-width: 6rem;
}

.assessment-map__row .form-select {
  max-width: 14rem;
}

/* Paired comparison (ADR 0047 Phase 2). */
.assessment-paired__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.35rem 0;
  flex-wrap: wrap;
}

.assessment-paired__row label {
  margin: 0;
}

/* Fill in the blank (ADR 0047 Phase 2). */
.assessment-blank {
  line-height: 2.2;
}

.assessment-blank__input {
  width: auto;
  min-width: 7rem;
  margin: 0 0.15rem;
}

/* assessment_results.html's cards -- a medium-gray border instead of
   Bootstrap's shadow-sm elevation. #adb5bd matches the "darker hairline"
   already used for the same reason elsewhere in this file (the builder,
   .assessment-tool pages): Bootstrap's default #dee2e6 card border all
   but vanishes against this site's page background. No !important, so
   Bootstrap's own border-start/border-4/border-{success,danger,primary}
   utilities (always !important) still win the left edge on
   .assessment-results__overview's outcome-colored accent card. */
.assessment-results__card {
  border: 1px solid #adb5bd;
  box-shadow: none;
}

/* assessment_results.html's "Overall"/"How your areas rank"/"Recommended
   next steps" section headings -- same brand blue as every other
   section heading across the assessment flow (list/detail card titles,
   assessment_take.html's own section titles), instead of plain default
   heading color that let this results page read flatter than the rest
   of the flow leading up to it. */
.assessment-results__section-title {
  color: #0067b8;
  margin-bottom: 0.75rem;
}

/* The "Overall" card's score ring (reported directly, reference images
   attached) -- an SVG circular gauge replacing the old plain "72
   points" line, with the band badge/scale/delta beside it instead of
   below. Rotated -90deg so the filled arc starts at 12 o'clock and
   sweeps clockwise, matching the reference. */
.assessment-results__score-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.assessment-results__score-ring {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  flex-shrink: 0;
}

.assessment-results__score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.assessment-results__score-ring-track {
  fill: none;
  stroke: #e9ecef;
  stroke-width: 12;
}

.assessment-results__score-ring-fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}

.assessment-results__score-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}

.assessment-results__score-ring-number {
  font-size: 1.85rem;
  font-weight: 800;
  color: #1d1d1f;
}

.assessment-results__score-ring-denom {
  font-size: 1rem;
  color: #000;
}

.assessment-results__score-hero-body {
  min-width: 14rem;
  flex: 1 1 auto;
}

/* Bold, uppercase column headers -- distinguishes the header row from
   the data rows below it without relying on size or a muted color (the
   weight/case/letter-spacing/border already do that job; reported
   directly: this row used to be smaller and grayer than the rest of
   the results page's text, which the .assessment-results sweep below
   now rules out site-wide on this page). */
.assessment-results__table-card thead th {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
}

/* assessment_results.html (+ its quicklook modal fragment,
   _results_quicklook.html) -- per-request sweep: no muted/gray text
   anywhere on this page, and nothing smaller than its own completion-
   message paragraph (1rem/16px, the page's base body size) -- badges
   included (reported directly: match the rest of the page too).
   --bs-secondary-color is what Bootstrap's own .text-muted *and*
   .breadcrumb-item.active both read from, so overriding it here catches
   both in one rule instead of fighting each utility class individually;
   .text-success/.text-danger stay untouched -- those convey real state
   (a score delta, a correct answer), not de-emphasis, so they keep
   their color. */
.assessment-results {
  --bs-secondary-color: #000;
}

.assessment-results .small,
.assessment-results .btn-sm,
.assessment-results .badge {
  font-size: 1rem;
}

.assessment-results .card__meta {
  color: #000;
  font-size: 1rem;
}

/* Rubric scale bar (assessments/_score_scale.html, ADR 0053) -- the
   assessment's 0-100 score bands as a row of severity-coloured segments
   with a marker at the taker's score. Shown for the overall score
   (assessment_results.html "score" block) and, compact, per dimension
   in the "Rating" column. Same colour vocabulary as the builder Scoring
   step's .assessment-builder__band-strip. */
.score-scale {
  position: relative;
  width: 100%;
  margin: 0.75rem 0 0;
  padding: 2px 0;
}

.score-scale__track {
  display: flex;
  width: 100%;
  height: 1.25rem;
  border-radius: 0.35rem;
  overflow: hidden;
}

.score-scale--compact {
  margin: 0;
  min-width: 8rem;
}

.score-scale--compact .score-scale__track {
  height: 0.7rem;
}

.score-scale__seg {
  display: block;
  min-width: 2px;
}

/* An uncovered stretch of the 0-100 scale (the author left a hole in the
   band ranges) -- a flat neutral fill, no label. !important beats the
   segment's inline background-color (_score_scale.html). */
.score-scale__seg--gap {
  background-color: #e9ecef !important;
}

/* The marker sits over the track at left:<score>%; the translate centres
   the rule on that point. It's a sibling of __track (not a child) so the
   track's overflow:hidden corner-clip can't cut it off at 0 / 100. */
.score-scale__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background-color: #1d1d1f;
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
}

.assessment-results__rating-col {
  min-width: 12rem;
}

/* Each band row is its own rounded tile (still a plain <li>, not a
   collapsible per the earlier "remove the accordion" request -- this is
   a styling pass only, not a behavior one). Plain/no background by
   default -- reported directly: only the taker's own matching band
   (--current below) should carry a tinted background, not every row --
   so a simple neutral border is what gives a non-current row its own
   visible boundary now that it has no fill to read as one (also
   reported directly). */
.assessment-results__rubric-row {
  border: 1px solid #adb5bd;
  border-radius: 0.65rem;
  padding: 1rem;
}

/* The round icon badge leading each row -- a flat flag glyph rather
   than a different pictogram per band (a band's label/range is
   author-set free text on every assessment, so there's no reliable way
   to pick a *meaningful* icon per band; one consistent glyph, colored
   like the row's own badge, still gives every row the "milestone"
   framing the reference image's own bespoke icons were going for). */
.assessment-results__rubric-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.assessment-results__rubric-row-title {
  font-weight: 700;
  color: #1d1d1f;
}

/* "Strongest areas" / "Focus areas" pills -- plain weight, not
   Bootstrap's bold .badge default (reported directly). */
.assessment-results__area-badge {
  font-weight: 400;
}

/* "How your areas rank" table's own rating pill -- smaller than the
   page's general 1rem badge floor (reported directly; bold kept, also
   reported directly after an earlier "remove it" pass). Needs the
   .assessment-results ancestor repeated in the selector to match (and,
   by source order, beat) that floor's own two-class specificity -- a
   bare .assessment-results__rank-badge alone would lose to it. */
.assessment-results .assessment-results__rank-badge {
  font-size: 0.8rem;
  font-weight: 700;
}

/* The band matching the taker's own score (results view rubric_bands
   `is_current`, assessments/views.py) -- no tinted background (reported
   directly: remove it), just a thick outline (doubled from 2px to 4px,
   also reported directly) plus the "Your result" badge in the markup,
   so the distinction never relies on colour alone (WCAG 1.4.1). The
   outline color is --rubric-band-accent -- the band's own saturated
   color, the same literal color the horizontal scale bar's segments use
   (match the dark band color that corresponds to the result, not a
   fixed brand blue unrelated to it). */
.assessment-results__rubric-row--current {
  outline: 4px solid var(--rubric-band-accent, #0067b8);
  outline-offset: -4px;
}

/* "Your result" badge -- colors set per-row inline (the band's own
   badge_bg/badge_text, same pastel-plus-darker-border-in-the-same-hue
   look as the severity badges), not a fixed blue -- reported directly:
   the badge's border should match the band it's sitting on, not a
   constant brand blue unrelated to that band's own color. This rule
   just supplies the border's width/style; the color itself comes from
   the inline border-color next to it. */
.assessment-results__rubric-current-badge {
  border-width: 1px;
  border-style: solid;
}

/* The "View results" quick-look modal on the Taken assessments list
   (_results_quicklook_modal.html). Rounder corners + a deeper, softer
   shadow than Bootstrap's modal default so it reads as a floating card;
   a tinted header strip + icon badge borrows .document-info-card__icon's
   pattern (#e9f2fc / #1668c9); the body gets a faint gray wash so the
   white result cards inside it (assessment_results.html's own
   border-0/shadow-sm cards) read as distinct surfaces instead of
   blending into a plain white modal. */
.assessment-results-quicklook-modal .modal-content {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.assessment-results-quicklook-modal .modal-header {
  background-color: #e9f2fc;
  border-bottom: 1px solid #cfe1f2;
  padding: 1.1rem 1.35rem;
}

.assessment-results-quicklook-modal .modal-title {
  color: #16233c;
  font-weight: 700;
}

.assessment-results-quicklook-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border-radius: 0.65rem;
  background-color: #fff;
  border: 1px solid #cfe1f2;
  color: #1668c9;
  font-size: 1rem;
}

.assessment-results-quicklook-modal .modal-body {
  background-color: #f6f8fa;
  padding: 1.5rem;
}

.assessment-results-quicklook-modal .modal-footer {
  background-color: #fff;
  border-top: 1px solid #eef1f4;
  padding: 0.85rem 1.35rem;
}

/* ======================================================================
   Assessment builder shell (assessments/builder/_shell.html + step
   templates). One persistent left-rail layout, one step per rail item.
   These classes are component-specific to the builder for now; if the
   `documents` builder later adopts the same shell they graduate to a
   shared stylesheet (agent_docs/frontend-css-conventions.md).
   ====================================================================== */

/* Darker borders throughout the builder. Bootstrap's default #dee2e6 /
   #e9ecef / #f1f3f5 hairlines all but vanish on the warm-cream builder
   background -- #adb5bd is the same "this form's own darker border" the
   article author form uses (articles.css .article-form-select etc.).
   Scoped to .assessment-builder so nothing else on the site changes. */
.assessment-builder {
  /* Bootstrap components (.form-control, .form-select, .input-group-text,
     .form-check-input, <hr>, tables) read this. */
  --bs-border-color: #adb5bd;
}

.assessment-builder .card--bordered,
.assessment-builder__mode-option,
.assessment-builder .image-focal-editor__frame {
  border-color: #adb5bd;
}

/* Flush border/background at every width; sticky only from lg up (rail/
   in-step sub-nav below share the same split). Below lg the rail+main
   layout is a single stacked column, where a sticky element pinned
   *above* a long scrolling column doesn't get its own carved-out lane --
   it just stays pinned the entire scroll range, covering most of a small
   viewport (reported directly -- this used to be sticky at every width;
   that read as fine on a phone when it was only this one bar, but
   compounded with the rail below also being sticky there, it covered too
   much of the screen). border-bottom/padding/background stay unconditional
   so the header still reads the same, just scrolls away normally below lg. */
.assessment-builder__header {
  /* The take page title's space above it (.assessment-take__title, the
     standard page heading's --page-heading-space-top; product owner,
     2026-10-19). On the header, not the <h1> inside it: a margin inside
     the sticky bar would pin a 2.5rem blank band under the navbar (and
     grow the --assessment-builder-header-height the rail clears). Less
     the 0.75rem padding-top below, so the name sits the same 2.5rem under
     the breadcrumb as the take title (it collapses with the breadcrumb's
     1rem bottom margin, as there). */
  margin-top: calc(var(--page-heading-space-top, 2.5rem) - 0.75rem);
  border-bottom: 1px solid #adb5bd;
  /* Matches padding-bottom -- without it, the name/status/Try-assessment
     row sat flush against the navbar's own bottom edge the instant this
     became sticky (reported directly: too close to the top). */
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: var(--site-bg-color, #fff);
}

@media (min-width: 992px) {
  .assessment-builder__header {
    position: sticky;
    top: var(--lc-sticky-top, 4rem);
    z-index: 6;
  }
}

/* The create-assessment front door's own title row (builder/new.html)
   isn't part of the sticky stack -- there's no slug yet for a long
   scroll to lose track of. Keeps the border/padding/background above,
   just not pinned (and no --assessment-builder-header-height is
   published for it -- see assessment_builder_header_sticky.js -- so the
   rail's own sticky offset isn't thrown off once this row scrolls away).
   Keeps the header's margin-top too, so the name sits the same 2.5rem
   under the breadcrumb as the take page's title (product owner,
   2026-10-20). */
.assessment-builder__header--static {
  position: static;
}

/* Font size matched to documents' own title at this same spot
   (reported directly): document_fill.html's .document-page-head__title,
   inside .document-fill__head -- its larger of two sizes (that page's
   own base .document-page-head__title is smaller; this is the override
   specific to the title row it's reached through). */
.assessment-builder__name {
  color: #0067b8;
  font-size: clamp(1.75rem, 1.5rem + 1.3vw, 2.25rem);
}

/* Rail + main. Single column below lg (rail is a wrapping row of step
   pills above the content); two columns from lg up. `min-width: 0` on
   both tracks is load-bearing -- without it a wide, non-shrinking child
   (a rich-text toolbar, a long question) blows the grid track past the
   viewport and the whole page scrolls sideways. */
.assessment-builder__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/* The take page's rail panel (.assessment-take__rail; product owner,
   2026-10-19): no fill on the white page, the darker #adb5bd hairline and
   Bootstrap's --bs-border-radius, 1.5rem in (1rem below lg, further
   down). It was documents' grey "Customize this document" panel. Visual
   only: the rail+main grid above still stacks to one column below 992px.
   Deliberately no max-height/overflow-y -- this rail's content varies a
   lot per step (the Questions step's "Add a question" palette can run
   considerably taller), and clipping it into an inner scroll area wasn't
   asked for. */
.assessment-builder__rail {
  padding: 1.5rem;
  border: 1px solid #adb5bd;
  border-radius: var(--bs-border-radius, 0.375rem);
}

@media (max-width: 991.98px) {
  .assessment-builder__rail {
    padding: 1rem;
  }
}

/* Sticky only from lg up (reported directly -- this used to be sticky at
   every width; below lg, rail and main stack in one normal-flow column,
   where a sticky rail pinned *above* a long scrolling column doesn't get
   its own carved-out lane the way a sticky sidebar *beside* one does: it
   stays pinned across the whole scroll range, legitimately covering most
   of a small viewport the entire time rather than just briefly at a
   handoff point. From lg up this sits beside a taller main column, so it
   never grows past the viewport and the problem doesn't apply -- same
   offset .assessment-builder__header uses, also lg-only now). */
@media (min-width: 992px) {
  .assessment-builder__rail {
    position: sticky;
    top: calc(var(--lc-sticky-top, 4rem) + var(--assessment-builder-header-height, 0px) + 1rem);
  }
}

/* The Help tab's guide (content/_step_guide.html, shared
   static/shared/css/builder_help.css) set straight on the rail (product
   owner, 2026-10-19): no pale-blue box, a bigger title, the intro as a
   paragraph like the body text, a light rule above each heading typed into
   the body ("What's on this step", "Tips"), and each list item as its bold
   name on a line of its own over a grey description, beside the check
   disc. documents.css copies it for the template builder's rail (keep the
   two in step). Colours: #16233c 15:1, #495057 8.6:1, #5c6672 5.9:1 on white; the
   rules only separate parts, so they're decorative under WCAG 1.4.11. */
/* 0.5rem on top of the tabs' own 1rem bottom margin. */
.assessment-builder__rail .builder-help {
  gap: 1.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #495057;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.assessment-builder__rail .builder-help-heading {
  gap: 1rem;
}

.assessment-builder__rail .builder-help-title,
.assessment-builder__rail .builder-help-text :is(h1, h2, h3, h4, h5, h6) {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #16233c;
}

.assessment-builder__rail .builder-help-intro {
  font-size: inherit;
  color: inherit;
}

/* The same grey as the intro (the site theme colours a bare <p>). */
.assessment-builder__rail .builder-help-text p {
  margin-bottom: 1rem;
  color: #495057;
}

.assessment-builder__rail .builder-help-text :is(h1, h2, h3, h4, h5, h6) {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid #dee2e6;
}

.assessment-builder__rail .builder-help-text > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.assessment-builder__rail .builder-help-text ul {
  margin-top: 1.25rem;
  gap: 1.5rem;
}

.assessment-builder__rail .builder-help-text ul li {
  padding-left: 3rem;
  color: #5c6672;
  font-size: 1rem;
}

.assessment-builder__rail .builder-help-text ul li > strong:first-child {
  display: block;
  margin-bottom: 0.25rem;
  color: #16233c;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}

/* The check disc, a little bigger, centred on the item's name. */
.assessment-builder__rail .builder-help-text ul li::before {
  top: -0.15rem;
  width: 1.85rem;
  height: 1.85rem;
  background-color: #e3eefb;
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .assessment-builder__rail .builder-help-text ul li {
    padding-left: 2.6rem;
  }
}

/* "Steps" title above the progress bar/stepper -- same weight/colour as
   documents' .document-rail-layout__rail-title, its own panel's title. */
.assessment-builder__rail-title {
  font-weight: 700;
  color: #16233c;
}

.assessment-builder__rail,
.assessment-builder__main {
  min-width: 0;
}

.assessment-builder__main {
  overflow-wrap: break-word;
}

@media (min-width: 992px) {
  /* 360px, not the old 240px -- matches documents' own
     .document-rail-layout rail column exactly (reported directly). */
  .assessment-builder__layout {
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: start;
  }
}

/* The rail's progress block, here and on the take page (_take_body.html):
   a bigger, darker count (#16233c, 15:1) over a bar with rounded ends
   (product owner, 2026-10-19: the builder rail took the take rail's
   look). */
.assessment-builder__progress-label {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #16233c;
}

.assessment-builder__progress .progress {
  height: 0.5rem;
  background-color: #e9ecef;
}

.assessment-builder__progress .progress,
.assessment-builder__progress .progress-bar {
  border-radius: 980px;
}

.assessment-builder__progress .progress-bar {
  background-color: #0067b8;
}

/* Autosave status, right under the progress bar above: plain grey text
   (#495057, 8.6:1) after a blue cloud, on both rails. It used to be a copy
   of documents.css's bold blue `.document-builder__autosave-status`.
   Plain text + icon, not a pill/badge box and not a <button> -- no
   `cursor: pointer` and no hover/focus styling, since this is status
   text, not a control. */
.assessment-builder__autosave-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  color: #495057;
  font-size: 1rem;
  font-weight: 400;
}

.assessment-builder__autosave-status .bi {
  color: var(--site-btn-primary-bg-color, #0067b8);
  font-size: 1.25rem;
}

/* The left-rail step nav is the numbered stepper -- see .builder-stepper
   further down (shared with builder/new.html's _stepper.html). Only the
   readiness bar above it is styled here. */
.assessment-builder__step-nav {
  margin-top: 1rem;
}

/* Step body --------------------------------------------------------- */
/* Step header -- the front-door .builder-intro treatment adapted for the
   shell steps (agent_docs/assessment-builder-design.md): a tinted icon
   badge + eyebrow + bold title + lede. */
/* Shared page header for every assessment page (builder steps + the
   standalone tool / manager / status pages): a tinted icon badge next to
   a bold title and an optional lede. Replaces the old bare
   `<h1 class="h4 mb-1">` + `<p class="text-muted">` pattern.
   agent_docs/assessment-builder-design.md. */
.assessment-page-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Header carrying an action (button / link group) on the right. */
.assessment-page-head--actions {
  flex-wrap: wrap;
  justify-content: space-between;
}

/* The builder shell's own "Collapse all"/"Expand all" button (reported
   directly) -- bottom-aligned against the title+lede group instead of
   this header's own align-items: center, so it sits level with the
   lede's text baseline rather than floating centred against the whole
   (often two-line) title+lede block. Scoped to the shell's step head
   specifically rather than the generic --actions modifier, which other
   pages (score_queue.html, etc.) still want vertically centred. */
.assessment-builder__step-head [data-collapse-all] {
  align-self: flex-end;
}

/* 20px above the step title (product owner, 2026-10-20), on every builder
   step (_shell.html). Scoped to the shell's step head: the tool and
   manager pages share .assessment-page-head__title and keep their spacing. */
.assessment-builder__step-head .assessment-page-head__title {
  margin-top: 1.25rem;
}

/* The Scoring step's "+ Add outcome" and "+ Add band" (scoring.html), one
   width (product owner, 2026-10-19): at least as wide as "+ Add outcome"
   is on its own (145px), so the shorter one matches it. A longer
   translation still widens its own button. */
.assessment-builder__scoring-add {
  min-width: 9.125rem;
}

/* That button as a small text link with an icon, like the catalogue's
   "+ New assessment" link (assessment_list.html; product owner,
   2026-10-19): 14px, the site link blue (#0067b8, 5.9:1 on white; not
   Bootstrap's --bs-link-color, which the site's links don't use),
   underlined on hover. 0.25rem above and below keeps it at least 24px
   tall (WCAG 2.5.8); the focus ring is site-wide (focus.css). */
.assessment-builder__collapse-all {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--site-link-color, #0067b8);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.assessment-builder__collapse-all:hover {
  color: var(--site-link-hover-color, #005a9e);
  text-decoration: underline;
}

.assessment-builder__collapse-all[hidden] {
  display: none;
}

.assessment-page-head__icon {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  background-color: #e9f2fc;
  border: 1px solid #cfe1f2;
  color: #1668c9;
  font-size: 1.5rem;
}

.assessment-page-head__title {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  color: #16233c;
  margin-bottom: 0.25rem;
}

.assessment-page-head__lede {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #5c6672;
}

@media (max-width: 575.98px) {
  .assessment-page-head__icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
  }
}

.assessment-builder__empty {
  border: 2px dashed #9aa5b1;
  border-radius: 1rem;
}

/* In-step sub-navigation (builder/_substep_nav.html + assessment_builder_
   substeps.js) -- one jump link per subsection of a long form step
   (Overview), each with the same readiness glyph the left rail uses.
   Sticky just below the site navbar, from lg up only (reported directly
   -- same single-column-overlap reasoning as .assessment-builder__rail
   above: a sticky bar pinned above a long single stacked column covers
   too much of a small screen for the whole scroll, not just briefly), so
   it stays reachable while scrolling a long step without crowding a
   narrow one; its own opaque background (the page background, cream on
   the builder pages) hides the content scrolling under it once pinned.

   top: --lc-sticky-top is the navbar's own measured height (published by
   shared/js/sticky_list_controls.js, loaded from _shell.html) -- a flat
   4rem sat lower than the real navbar's bottom edge, leaving a band that
   scrolled-past content showed through. The ::before ledge fills the
   residual breather above the bar's own box with the same page colour
   for the same reason (matches list-controls.css). position: relative unconditionally (not just
   sticky at lg+) so that ::before -- position: absolute -- still anchors
   to this element below lg instead of bubbling up to the next positioned
   ancestor. */
.assessment-builder__substeps {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0;
  background-color: var(--site-bg-color, #fff);
  border-bottom: 1px solid #e9ecef;
}

@media (min-width: 992px) {
  .assessment-builder__substeps {
    position: sticky;
    /* Same navbar-height-plus-sticky-header offset as
       .assessment-builder__rail above -- otherwise the sticky header
       covers this bar's own top edge the instant both are pinned. */
    top: calc(var(--lc-sticky-top, 4rem) + var(--assessment-builder-header-height, 0px));
    z-index: 5;
  }
}

.assessment-builder__substeps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.25rem;
  background-color: var(--site-bg-color, #fff);
}

/* Per-subsection readiness glyph in the sub-nav -- the filled
   complete / attention / empty trio review.html uses, in the left rail's
   own colour vocabulary. Sized a touch above the link text so the filled
   circles read as proper status dots rather than specks. */
.assessment-builder__substep-glyph {
  display: inline-flex;
  font-size: 0.9375rem;
}

.assessment-builder__substep-glyph--complete {
  color: #1a7f37;
}

.assessment-builder__substep-glyph--attention {
  color: #b54708;
}

.assessment-builder__substep-glyph--empty {
  color: #9aa5b1;
}

/* Collapsible .builder-form-card subsections on a long single-form step
   (Overview), folded from their header by the in-step sub-nav
   (assessment_builder_substeps.js). Named apart from the Questions step's
   .assessment-builder__section list cards (below), which are a different
   component. The chevron + pointer cursor only show once the JS has wired
   the toggles up -- with no JS every card stays open and its heading is
   plain, non-interactive text. */
.assessment-builder__substep-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}

.assessment-builder__substep-chevron {
  display: none;
  flex-shrink: 0;
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

[data-substeps-enhanced] .assessment-builder__substep-toggle {
  cursor: pointer;
}

[data-substeps-enhanced] .assessment-builder__substep-chevron {
  display: inline-block;
}

.assessment-builder__substep-section.is-collapsed .assessment-builder__substep-chevron {
  transform: rotate(-90deg);
}

.assessment-builder__substep-section.is-collapsed .builder-form-card__header {
  border-bottom: 0;
}

/* Land a jumped-to / errored card clear of the sticky navbar + sub-nav
   rather than up behind them. html's scroll-padding-top (shared/css/
   focus.css) already clears the navbar plus 0.5rem, so this only adds
   room for a two-row sub-nav: the card lands navbar + 4rem down, as
   before that padding existed. */
.assessment-builder__substep-section {
  scroll-margin-top: 3.5rem;
}

/* Collapsed: fold the body away with no leftover padded strip. The
   Delivery / Scoring / Review / Related steps flag the .card-body itself
   ([hidden] -> display:none); Overview wraps its body in an inner
   [data-substep-card-body], so zero .card-body's own padding there. */
.assessment-builder__substep-section.is-collapsed .card-body {
  padding-top: 0;
  padding-bottom: 0;
}

/* Readiness glyph shown in a Review per-step card heading (mirrors the
   left rail) -- lift it to sit with the heading text. */
.builder-form-card__title .assessment-builder__substep-glyph {
  font-size: 0.95em;
}

/* Respondent-role checkboxes on the Overview step's own "Respondents"
   card (builder/overview.html) -- selectable cards rather than a plain
   checkbox list, so each role's one-line description is legible without
   a separate tooltip lookup. Multi-select analog of
   .assessment-builder__mode-option (radio, front door only, below) --
   same :has(input:checked) state, but several cards can be checked at
   once. Always one per line (not a multi-column grid) -- each card's
   description varies in length, and a single column keeps every card
   the same width so none looks squeezed or mismatched against a
   neighbor. */
.assessment-builder__check-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.assessment-builder__check-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid #d3d9df;
  border-radius: 0.65rem;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
  margin-bottom: 0;
}

.assessment-builder__check-card:has(input:focus-visible) {
  outline: 2px solid #0067b8;
  outline-offset: 2px;
}

.assessment-builder__check-card:has(input:checked) {
  border-color: #0067b8;
  background-color: #eef5fd;
  box-shadow: inset 0 0 0 1px #0067b8;
}

.assessment-builder__check-card input {
  margin-top: 0.3rem;
  flex-shrink: 0;
}

.assessment-builder__check-card-body {
  min-width: 0;
}

.assessment-builder__check-card-body strong {
  display: block;
  font-size: 1rem;
  color: #1d2b45;
}

.assessment-builder__check-card-body span {
  display: block;
  font-size: 1rem;
  color: #5c6672;
  margin-top: 0.1rem;
}

/* Compact variant: the question bank modal's "Scores into" dimension
   checkboxes (_question_bank_picker.html) -- label-only, no description
   line, so a centered single-line card and a responsive 2-col/1-col grid
   suit them better than the Respondents cards' own always-single-column
   layout above (mirrors documents.css's own .document-builder__check-cards,
   reported directly: match how Planning needs looks on the Guided journey
   step). Reuses .assessment-builder__check-card's border/radius/background/
   focus/checked states as-is -- only alignment and column count differ. */
.assessment-builder__check-cards--compact {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 992px) {
  .assessment-builder__check-cards--compact {
    grid-template-columns: repeat(2, 1fr);
  }
}

.assessment-builder__check-card--compact {
  align-items: center;
  padding: 0.65rem 0.85rem;
}

.assessment-builder__check-card--compact input {
  margin-top: 0;
}

.assessment-builder__check-note .bi-info-circle {
  color: #6c757d;
}

/* Description / Instructions / Completion message (builder/overview.html's
   Details card) -- taller and larger-print than Quill's own 13px default
   (this page never loads documents.css, so none of that app's own
   .document-richtext sizing reaches here), scoped to the Overview form
   only so no other QuillWidget on the site is affected. */
#assessmentOverviewForm .document-richtext .ql-editor {
  min-height: 200px;
  font-size: 1.1rem;
}

/* Shared by the "Respondents" fieldset legend and the "Suggested setup"
   panel heading right below it (overview.html / _taxonomy_guidance.html)
   -- a secondary heading level under the card's own title, smaller than
   the default UA/Bootstrap <legend> size so it doesn't outweigh it. */
/* "Suggested setup" card title icon (builder/overview.html) -- the amber
   lightbulb accent the heading used to carry on its own
   .assessment-builder__section-heading wrapper, now scoped to just this
   card since the heading lives in the shared .builder-form-card__title. */
#builder-section-suggested .builder-form-card__title .bi-lightbulb {
  color: #e9a23b;
}

.assessment-builder__guidance-row {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.65rem 0;
}

.assessment-builder__guidance-icon {
  flex: none;
  font-size: 1.15rem;
  color: #1668c9;
  margin-top: 0.15rem;
}

.assessment-builder__guidance-body {
  min-width: 0;
}

.assessment-builder__guidance-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.assessment-builder__guidance-label {
  font-size: 1rem;
  font-weight: 700;
  color: #16233c;
  margin: 0;
}

.assessment-builder__guidance-meta {
  font-size: 1rem;
  color: #6c757d;
  margin: 0.15rem 0 0;
}

.assessment-builder__guidance-text {
  font-size: 1rem;
  color: #16233c;
  margin: 0.2rem 0 0;
}

.assessment-builder__guidance-suggestion {
  font-size: 1rem;
  color: #6c757d;
  margin: 0.35rem 0 0;
}

.assessment-builder__guidance-divider {
  border: none;
  border-top: 1px solid #dce0e5;
  opacity: 1;
  margin: 0;
}

.assessment-builder__guidance-disclaimer {
  font-size: 1rem;
  color: #6c757d;
  margin: 1rem 0 0;
}

/* Engine diagram --------------------------------------------------- */
.assessment-builder__engine .card-body {
  padding: 0.85rem 1.35rem;
}

.assessment-builder__engine-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.35rem;
  font-size: 1rem;
  color: #495057;
}

.assessment-builder__engine-term {
  font-weight: 600;
  color: #16233c;
}

.assessment-builder__engine-arrow {
  color: #6c757d;
}

/* Simple / Advanced mode (ADR 0048) --------------------------------- */
/* Set off from the progress above by the take rail's light rule and
   spacing (.assessment-take__sections; product owner, 2026-10-19). The
   rule only separates parts, so it's decorative under WCAG 1.4.11. */
.assessment-builder__mode-toggle {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #dee2e6;
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .assessment-builder__mode-toggle {
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

.assessment-builder__mode-toggle-label {
  font-size: 1rem;
  font-weight: 600;
  /* #6c757d was 4.44:1 on the rail's #f8f9fa (AX-10) */
  color: #5c6672;
  margin-bottom: 0.15rem;
}

/* The "Switch to ... builder" link button: Bootstrap's default link blue
   (#0d6efd) is 4.26:1 on the rail's #f8f9fa; the site link colour clears
   4.5:1 (AX-10). */
.assessment-builder__mode-toggle .btn-link {
  --bs-btn-color: var(--site-link-color, #0067b8);
  --bs-btn-hover-color: var(--site-link-hover-color, #005a9e);
}

.assessment-builder__mode-toggle-blocked summary {
  cursor: pointer;
  color: #0067b8;
}

/* Quick / Advanced setup choice on the Create-assessment front door
   (builder/new.html). Two selectable cards -- stacked on small screens,
   side by side from md up. Each <label> wraps its radio so the whole card
   is clickable with no JS; :has(input:checked) styles the selected one. */
.assessment-builder__mode-choice {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 768px) {
  .assessment-builder__mode-choice {
    grid-template-columns: 1fr 1fr;
  }
}

.assessment-builder__mode-legend {
  float: none;
  width: auto;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.assessment-builder__mode-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid #d3d9df;
  border-radius: 0.65rem;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.assessment-builder__mode-option:has(input:focus-visible) {
  outline: 2px solid #0067b8;
  outline-offset: 2px;
}

.assessment-builder__mode-option:has(input:checked) {
  border-color: #0067b8;
  background-color: #eef5fd;
  box-shadow: inset 0 0 0 1px #0067b8;
}

.assessment-builder__mode-option input {
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.assessment-builder__mode-icon {
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1.3;
}

.assessment-builder__mode-icon--simple {
  color: #0067b8;
}

.assessment-builder__mode-icon--advanced {
  color: #3f4b5e;
}

.assessment-builder__mode-body {
  min-width: 0;
}

.assessment-builder__mode-body strong {
  font-size: 1.0625rem;
  color: #1d2b45;
}

.assessment-builder__mode-subtitle {
  color: #495057;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

/* ------------------------------------------------------------------
   Create-assessment front door (builder/new.html + _stepper.html) --
   Option B redesign. Standalone from the builder shell (no draft/slug
   yet); the live rail + readiness take over once the draft is saved.
   ------------------------------------------------------------------ */

/* Intro block: the eyebrow / heading / lede. */
.builder-intro {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.builder-intro__eyebrow {
  font-size: 0.9rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.builder-intro__title {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: #16233c;
  margin-bottom: 0.4rem;
}

.builder-intro__lede {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: #5c6672;
}

/* The one form card (.builder-form-card, its header strip, title,
   subtitle and body) lives in static/shared/css/cards.css since the project
   workspace became its third user (2026-10-20); only this builder's own
   sizes are here. */

/* Shell steps run several of these cards down a page -- a tighter strip
   than the front door's single hero card. */
.assessment-builder__main .builder-form-card__header {
  padding: 0.85rem 1.35rem;
}

/* On a shell step the sections are a rung down from the step's own <h1>,
   so their card titles are a shade smaller than the front door's. */
.assessment-builder__main .builder-form-card__title {
  font-size: 1.15rem;
}

.assessment-builder__main .builder-form-card__subtitle {
  font-size: 1rem;
}

/* Continue / Cancel row, inside the card body below the mode choice. */
.builder-form-card__actions {
  margin-top: 1.5rem;
}

.builder-form-card__counter {
  color: #6c757d;
}

/* A field label paired with an accessible "more info" trigger. The trigger
   is a real <button> -- focusable, keyboard-operable, aria-labelled --
   wrapping a decorative bi-info-circle, never a bare <i> (which keyboard
   and screen-reader users cannot reach). The Bootstrap tooltip it opens is
   dismissible with Escape (assessment_builder.js initTooltips). */
.builder-field-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.builder-field-label .form-label,
.builder-field-label legend {
  margin-bottom: 0;
}

.builder-field-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6c757d;
  font-size: 0.9375rem;
  line-height: 1;
  border-radius: 50%;
}

.builder-field-info:hover,
.builder-field-info:focus-visible {
  color: #1668c9;
}

.builder-field-info:focus-visible {
  outline: 2px solid #1668c9;
  outline-offset: 2px;
}

/* The front door softens its card border below the builder's default
   #adb5bd (approved for that page only -- the shell steps keep the darker
   hairline the user asked for). Its fields keep the site-wide field border
   (static/shared/css/fields.css): the softer #d3d9df they had was about
   1.4:1 on white, under WCAG 1.4.11's 3:1 (accessibility audit
   2026-10-16, AX-07). */
[data-builder-new-form] .builder-form-card.card--bordered {
  border-color: #dce0e5;
}

/* "Start from a template" strip above the blank-create card. */
.builder-template-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid #d3d9df;
  border-radius: 0.6rem;
  background-color: #fff;
}

.builder-template-cta > div {
  min-width: 0;
  flex: 1 1 16rem;
}

/* Numbered vertical stepper. Two users, one look:
   - _stepper.html   -- the front door's non-interactive preview
   - _step_nav.html  -- the builder shell's live rail (adds .builder-stepper--nav:
                        real links + per-step readiness state on the <li>)
   The take page's section list (.assessment-take__rail-list; product
   owner, 2026-10-19): an open list with a light rule between rows, no
   box, a 2.25rem marker beside the name in dark semibold, and a chevron
   on a row that links to another step. It was a boxed white list with a
   tinted current row. documents.css's .builder-stepper is a copy; keep the
   two identical. The readiness marker (number/check, ringed by
   builder_status.Step.rail_status) stays: these rows carry real per-step
   state with no other place to show it (also read by screen readers via
   the visually hidden text beside it). The rules between rows only
   separate them, so they're decorative under WCAG 1.4.11. */
.builder-stepper {
  display: flex;
  flex-direction: column;
}

.builder-stepper__step {
  position: relative;
}

.builder-stepper__step + .builder-stepper__step {
  border-top: 1px solid #dee2e6;
}

.builder-stepper__row {
  display: flex;
}

/* The whole row is the link (a bigger target than the name alone). */
.builder-stepper__link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 1.1rem 0;
  border-radius: var(--bs-border-radius, 0.375rem);
  color: #16233c;
  text-decoration: none;
}

/* A step you can go to: its name underlines and turns blue on hover, with
   the chevron, so it reads as a link without colour alone. The focus ring
   is site-wide (focus.css). */
.builder-stepper--nav .builder-stepper__link:hover {
  color: #0067b8;
}

.builder-stepper--nav .builder-stepper__link:hover .builder-stepper__label {
  text-decoration: underline;
}

.builder-stepper__label {
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Only on the rows that link to another step (_step_nav.html), as on the
   take rail. */
.builder-stepper__chevron {
  flex-shrink: 0;
  margin-left: auto;
  color: #5c6672;
  font-size: 1.125rem;
}

.builder-stepper--nav .builder-stepper__link:hover .builder-stepper__chevron {
  color: #0067b8;
}

/* #495057 on white 8.6:1. */
.builder-stepper__marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid #adb5bd;
  background-color: #fff;
  color: #495057;
  font-size: 1rem;
  font-weight: 600;
}

/* Rail readiness state on the <li> (builder_status.Step.rail_status):
   red = a required check still fails, amber = only optional checks left,
   green = ready. A ready step is a solid green disc with a white check
   (white on #198754 4.5:1). */
.builder-stepper__step.is-complete .builder-stepper__marker {
  border-color: #198754;
  background-color: #198754;
  color: #fff;
}

.builder-stepper__step.is-complete .builder-stepper__marker .bi {
  font-size: 1.25rem;
}

.builder-stepper__step.is-optional .builder-stepper__marker {
  border-color: #f0ad4e;
  /* #b0730f was about 4:1 on white for the 13px number this used to be
     (WCAG 1.4.3) */
  color: #8a5c00;
}

.builder-stepper__step.is-blocked .builder-stepper__marker {
  border-color: #dc3545;
  color: #dc3545;
}

/* A blocked step also carries a small "!" badge on its marker, so the
   three states differ by shape, not only ring colour (WCAG 1.4.1,
   accessibility audit 2026-10-16, AX-13): a check (ready), a "!" badge
   (required items left) and a plain number (only optional items left).
   Shown on the current step too. Kept identical in assessments.css and
   documents.css, like the rest of .builder-stepper (documents.css copied
   this look on 2026-10-20). */
.builder-stepper__alert {
  position: absolute;
  top: -0.35rem;
  right: -0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #dc3545;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
}

/* Current step -- filled blue, wins over the readiness state (white on
   #0067b8 5.9:1). Its name stays the other rows' colour, as on the take
   rail: the filled disc is what marks it. */
.builder-stepper__step.is-current .builder-stepper__marker {
  border-color: #0067b8;
  background-color: #0067b8;
  color: #fff;
}

/* Forced colours: the current step's filled marker is its only visual cue,
   and High Contrast repaints the fill, so it takes the system's selection
   colours. documents.css carries the same rule (keep the two in step). */
@media (forced-colors: active) {
  .builder-stepper__step.is-current .builder-stepper__marker {
    forced-color-adjust: none;
    border-color: Highlight;
    background-color: Highlight;
    color: HighlightText;
  }
}

/* Below lg the rail sits above the form, full page width: the same
   vertical one-step-per-row list, only tighter, like the take rail. */
@media (max-width: 991.98px) {
  .builder-stepper__link {
    gap: 0.75rem;
    padding: 0.75rem 0;
  }
}

/* Per-step "what's outstanding" callout (below the step head, _shell.html).
   Same data as the rail marker colour + the Review checklist. */
.assessment-builder__step-checks {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.assessment-builder__step-checks-group {
  border: 1px solid;
  border-radius: 0.55rem;
}

.assessment-builder__step-checks-group.is-blocked {
  background-color: #fdecea;
  border-color: #f5c2c0;
}

.assessment-builder__step-checks-group.is-optional {
  background-color: #fef7e8;
  border-color: #e3ba6b;
}

.assessment-builder__step-checks-lead {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  margin: 0;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}

.assessment-builder__step-checks-lead::-webkit-details-marker { display: none; }

.assessment-builder__step-checks-lead > span:first-of-type {
  flex: 1 1 auto;
}

.assessment-builder__step-checks-caret {
  flex-shrink: 0;
  color: inherit;
  transition: transform 0.15s ease;
}

.assessment-builder__step-checks-group[open] .assessment-builder__step-checks-caret {
  transform: rotate(180deg);
}

.assessment-builder__step-checks-lead:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  border-radius: 0.55rem;
}

.assessment-builder__step-checks-group.is-blocked .assessment-builder__step-checks-lead {
  color: #a12b21;
}

.assessment-builder__step-checks-group.is-optional .assessment-builder__step-checks-lead {
  color: #8a5a09;
}

.assessment-builder__step-checks-note {
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
}

.assessment-builder__step-checks-list {
  margin: 0;
  padding: 0 0.9rem 0.8rem 2rem;
  font-size: 1.0625rem;
}

.assessment-builder__step-checks-list li {
  padding: 0.6rem 0;
}

.assessment-builder__step-checks-list li:first-child {
  padding-top: 0;
}

.assessment-builder__step-checks-list li:last-child {
  padding-bottom: 0;
}

.assessment-builder__step-checks-list li + li {
  margin-top: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.assessment-builder__step-checks-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.35);
  text-underline-offset: 2px;
}

.assessment-builder__step-checks-link:hover,
.assessment-builder__step-checks-link:focus-visible {
  text-decoration-color: currentColor;
}

.assessment-builder__step-checks-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.2rem;
}

.assessment-builder__step-checks-hint {
  display: block;
  font-size: 1rem;
  color: #16233c;
}

/* Add-a-question card ----------------------------------------------- */
/* (The pale-header corner clip now lives on the shared .builder-form-card
   rule -- this card is one.) */

/* "Add to <section>" destination row -- top of the Add-a-question card body
   and of the bank-modal add form. Shared so both entry points match. */
.assessment-builder__destination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid #e3e7ec;
}

.assessment-builder__addto {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #16233c;
}

.assessment-builder__addto .form-select {
  width: auto;
  min-width: 11rem;
  max-width: 18rem;
  font-weight: 400;
}

/* Shown in place of the picker when the assessment has no sections yet. */
.assessment-builder__addto-empty {
  font-weight: 400;
  color: #495862;
}

/* Add-a-question palette (moved into the persistent left rail -- mirrors
   documents.css's `.document-builder__rail-palette` et al, ADR 0068). Sits
   under the Simple/Advanced mode toggle, separated by the same hairline
   that toggle uses above it. */
.assessment-builder__rail-palette {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #adb5bd;
}

.assessment-builder__section-quick-add {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #ced4da;
}

.assessment-builder__section-quick-add .assessment-builder__tile {
  font-weight: 600;
}

/* Groups "Reuse from question bank" + "Question Type Guide" above the
   search box/accordion -- both open something else (a modal) rather than
   acting in place like the search and type tiles below (reported
   directly). Same dashed-divider treatment as .assessment-builder__
   section-quick-add above, for the same reason (separating one block of
   rail content from the next). */
.assessment-builder__palette-actions {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #ced4da;
}

.assessment-builder__palette-search {
  margin-bottom: 0.6rem;
}

/* Bootstrap's own .input-group-sm padding (0.25rem vertical) renders
   noticeably shorter than the accordion-button rows below it (0.6rem
   vertical, set below) -- bumped to line the search box's height up with
   them instead of leaving it as the odd one out. */
.assessment-builder__palette-search .form-control,
.assessment-builder__palette-search .input-group-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* The palette itself is a standard Bootstrap accordion (agent_docs/
   django-admin-conventions.md's pattern: independent open/close, no
   `data-bs-parent`, every item collapsed by default) -- every question-type
   family, including the Advanced-only Priority / Knowledge / Matrix ones
   (question_type_groups already excludes them in Simple mode). */
.assessment-builder__palette .accordion-button {
  padding: 0.6rem 0.85rem;
  font-size: 1rem;
  font-weight: 700;
  color: #16233c;
  gap: 0.5rem;
}

.assessment-builder__palette .accordion-button > .bi {
  color: #6c757d;
}

.assessment-builder__palette .accordion-button:not(.collapsed) {
  color: #1668c9;
  background-color: #eef5fd;
  box-shadow: inset 0 -1px 0 #cfe1f2;
}

.assessment-builder__palette .accordion-button:not(.collapsed) > .bi {
  color: #1668c9;
}

.assessment-builder__palette .accordion-body {
  padding: 0.55rem;
}

/* The "Question type guide" modal's own group accordion (questions.html)
   isn't scoped under .assessment-builder__palette, so it doesn't inherit
   that rule's `gap` -- its icon and label were touching with no space
   between them (reported directly). */
#questionTypeGuideAccordion .accordion-button > .bi {
  margin-right: 0.5rem;
}

.assessment-builder__tiles {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.assessment-builder__tile {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  text-align: left;
  line-height: 1.2;
  font-size: 1rem;
  color: #1d1d1f;
  background-color: #fff;
  border: 1px solid #d6dbe1;
  border-radius: 0.45rem;
  cursor: pointer;
}

/* JS-only search (assessment_builder.js's initQuestionTypeSearch) hides
   non-matching tiles via the plain `hidden` attribute -- restated here
   since the `display: flex` above would otherwise win over the browser's
   own `[hidden]` default (same-origin author CSS beats the UA stylesheet
   regardless of specificity). */
.assessment-builder__tile[hidden] {
  display: none;
}

.assessment-builder__tile:hover,
.assessment-builder__tile:focus-visible {
  border-color: #0067b8;
  background-color: #f6faff;
  color: #0b3d69;
}

.assessment-builder__tile .bi {
  flex-shrink: 0;
  font-size: 1rem;
  color: #6c757d;
}

.assessment-builder__tile:hover .bi,
.assessment-builder__tile:focus-visible .bi {
  color: #0067b8;
}

/* Question-bank picker (modal / no-JS page) --------------------------- */
.assessment-builder__bank-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  background-color: #f4f7fb;
  border: 1px solid #dce4ee;
  border-radius: 0.6rem;
}

.assessment-builder__bank-filter label {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
}

/* The bank modal's destination row also carries the "Scores into" checks
   -- flex-basis: 100% drops this onto its own line below "Add to"
   (.assessment-builder__destination is flex-wrap: wrap already), rather
   than squeezing a card grid in beside that dropdown. */
.assessment-builder__bank-dims {
  flex-basis: 100%;
}

.assessment-builder__bank-dims-label {
  display: block;
  margin-bottom: 0.4rem;
}

.assessment-builder__bank-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* One selectable bank question. The whole card is the <label>. */
.assessment-builder__bank-item {
  border: 1px solid #cfd6dd;
  border-radius: 0.6rem;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.assessment-builder__bank-item > label {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
}

.assessment-builder__bank-item:hover {
  border-color: #0067b8;
  background-color: #f7fbff;
}

.assessment-builder__bank-item:has(input:checked) {
  border-color: #0067b8;
  background-color: #eef5fd;
}

.assessment-builder__bank-item:has(input:focus-visible) {
  outline: 2px solid #0067b8;
  outline-offset: 2px;
}

.assessment-builder__bank-item.is-added {
  opacity: 0.6;
}

.assessment-builder__bank-item.is-added > label {
  cursor: not-allowed;
}

.assessment-builder__bank-item input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.assessment-builder__bank-text {
  display: block;
  font-weight: 600;
  color: #16233c;
  margin-bottom: 0.35rem;
}

.assessment-builder__bank-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  font-size: 1rem;
  color: #6c757d;
}

.assessment-builder__bank-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.assessment-builder__bank-option {
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  color: #3f4a57;
  background-color: #eef1f5;
  border-radius: 999px;
}

.assessment-builder__bank-item:has(input:checked) .assessment-builder__bank-option {
  background-color: #dceafa;
}

.assessment-builder__bank-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  background-color: #f4f7fb;
  border: 1px solid #dce4ee;
  border-radius: 0.6rem;
}

.assessment-builder__bank-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #6c757d;
}

.assessment-builder__bank-empty .bi {
  display: block;
  font-size: 2.25rem;
  color: #c2ccd6;
  margin-bottom: 0.5rem;
}

/* Drag affordances (revealed by assessment_builder.js) -------------- */
.assessment-builder__handle {
  cursor: grab;
  color: #adb5bd;
  padding-right: 0.25rem;
}

.assessment-builder__handle:active {
  cursor: grabbing;
}

/* .cover-image-dropzone / .cover-image-preview (the create-with-a-photo
   control's generic shape) now live in static/shared/css/cards.css --
   documents becoming a 3rd byte-for-byte consumer was the "extract on
   the 3rd" trigger (agent_docs/frontend-css-conventions.md). Only this
   step's own per-instance override stays here: the assessment cover
   renders at 3:2 on cards + the landing hero (not the shared block's
   1920/1080 default), and the modal's crop frame is 3:2 -- keep the
   dropzone preview the same shape. */
#assessmentFormImageDropzone {
  --cover-aspect-ratio: 3 / 2;
}

.assessment-builder__dropzone {
  min-height: 2.5rem;
  border-radius: 0.5rem;
}

.assessment-builder__dropzone.sortable-drag,
.assessment-builder .sortable-ghost {
  opacity: 0.5;
}

.assessment-builder__question {
  border-bottom: 1px solid #e6e9ee;
}

.assessment-builder__question:last-child {
  border-bottom: 0;
}

/* Section card --------------------------------------------------------- */
.assessment-builder__sections {
  /* the drop container -- give a dragged section room to land */
  min-height: 1rem;
}

/* Breathing room between one section card and the next (and before the
   trailing Unsectioned card). Also the scroll-into-view landing spot for
   any in-page jump to this card -- without this, scrollIntoView's default
   top-aligns the card flush against the viewport top, which tucks its
   header behind the sticky .assessment-builder__header (reported
   directly: the jump scrolled too far, landing mid-card instead of at its
   heading). Same clearance value as .assessment-builder__substep-section's
   own identical fix below (on top of html's scroll-padding-top, which
   already clears the navbar). */
.assessment-builder__section {
  margin-bottom: 0.75rem;
  scroll-margin-top: 3.5rem;
}

.assessment-builder__section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #e6e9ee;
  font-weight: 600;
  color: #16233c;
}

/* Collapse chevron -- revealed by assessment_builder.js. */
.assessment-builder__section-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: #6c757d;
}

.assessment-builder__section-toggle:hover,
.assessment-builder__section-toggle:focus-visible {
  background-color: #eef2f6;
  color: #16233c;
}

.assessment-builder__section-toggle .bi {
  transition: transform 0.15s ease;
}

.assessment-builder__section.is-collapsed .assessment-builder__section-toggle .bi {
  transform: rotate(-90deg);
}

.assessment-builder__section.is-collapsed .assessment-builder__section-head {
  border-bottom: 0;
}

.assessment-builder__section.is-collapsed .assessment-builder__section-body {
  display: none;
}

.assessment-builder__section-name {
  flex: 1 1 auto;
  min-width: 0;
}

.assessment-builder__section-name .card__meta {
  margin-left: 0.5rem;
  font-weight: 400;
}

.assessment-builder__section-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.assessment-builder__section-body {
  padding: 0.35rem 0.9rem 0.6rem;
}

/* One question row -------------------------------------------------- */
.assessment-builder__question-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  min-width: 0;
}

.assessment-builder__q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #eef2f6;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 600;
}

.assessment-builder__q-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.assessment-builder__q-text {
  font-weight: 600;
  color: #16233c;
  overflow-wrap: anywhere;
}

.assessment-builder__q-text.is-structural {
  font-weight: 500;
  color: #6c757d;
}

.assessment-builder__q-help {
  flex-basis: 100%;
  font-size: 1rem;
  color: #6c757d;
}

.assessment-builder__q-dims {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex-shrink: 0;
}

.assessment-builder__q-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}

/* "Need help?" panel under the step head (content.StepGuide, rendered by
   content_tags.step_guide) -- now in static/shared/css/builder_help.css
   as .builder-help* (promoted to generic once the template builder became
   this panel's second consumer, agent_docs/frontend-css-conventions.md),
   loaded via _shell.html's extra_head. ---------------------------------- */

/* Row layout for question / band / rule list items -- let the label side
   shrink and wrap so a long question can't push the action buttons (or
   the page) off-screen. */
[data-row-display] {
  min-width: 0;
}

[data-row-display] > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-row-display] > :last-child {
  flex-shrink: 0;
}

/* Score-band colour strip ------------------------------------------- */
.assessment-builder__band-strip {
  display: flex;
  height: 10px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.assessment-builder__band-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 0.25rem;
}

/* An uncovered stretch of the 0–100 scale -- a muted hatched fill so it
   reads as "nothing here", distinct from a real band. */
.assessment-builder__band-seg--gap {
  background-image: repeating-linear-gradient(
    45deg,
    #e9ecef,
    #e9ecef 4px,
    #dee2e6 4px,
    #dee2e6 8px
  );
}

/* Legend row directly under the strip -- one label per band, aligned to
   the same flex-grow span as its colour segment above (a "gap" segment
   renders an empty item so the labels either side stay aligned). */
.assessment-builder__band-legend {
  display: flex;
}

.assessment-builder__band-legend-item {
  min-width: 0;
  padding: 0 0.25rem;
  text-align: center;
}

.assessment-builder__band-legend-label {
  display: block;
  font-size: 1rem;
  color: #16233c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-builder__band-legend-range {
  display: block;
  font-size: 1rem;
  color: #6c757d;
}

/* The Score bands card (intro copy, table, note) used to read a size
   smaller than the rest of the builder (reported directly -- fixed to
   match the builder-wide 1rem floor below). The few pieces with their
   own explicit rem size (the badge) are matched here too, since rem is
   relative to the root font size, not this container's, and wouldn't
   otherwise track a change to the rule below. */
#builder-section-bands-body {
  font-size: 1rem;
}

.assessment-builder__band-table {
  --bs-table-padding-y: 1rem;
  --bs-table-padding-x: 1.5rem;
}

/* Bootstrap's own `.table > :not(caption) > * > *` rule (background,
   padding, border) carries a :not() pseudo-class, whose specificity
   counts as a type selector -- (0,1,1) beats a plain `thead th` or a
   single class alone (0,1,0/2), silently winning the cascade over a
   bare override here. Scoping every rule below under the table's own
   class keeps them winning. */
.assessment-builder__band-table thead th {
  background-color: #eef1f6;
  border-bottom: 1px solid #dee2e6;
  color: #16233c;
}

.assessment-builder__band-table-handle-col {
  width: 1.75rem;
}

.assessment-builder__band-table-badge {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.assessment-builder__band-table-range {
  color: #495057;
  white-space: nowrap;
}

.assessment-builder__band-table-description {
  color: #495057;
  min-width: 16rem;
}

/* Small screens: .table-responsive (band-table's wrapper) would let this
   scroll horizontally rather than break, but at typical phone widths
   tightening every column's gutter and letting the badge/description
   shrink keeps Band / Range / Description / Actions on one line without
   ever needing to. The Edit button's own label is hidden below this
   breakpoint too (scoring.html's d-none/d-sm-inline span) so its column
   doesn't cost more than an icon's width. */
@media (max-width: 575.98px) {
  .assessment-builder__band-table {
    --bs-table-padding-x: 0.5rem;
  }

  .assessment-builder__band-table-badge {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
  }

  .assessment-builder__band-table-range {
    font-size: 1rem;
  }

  .assessment-builder__band-table-description {
    min-width: 0;
    font-size: 1rem;
  }
}

/* Static reminder beneath the table (distinct from band_issues' amber
   alerts, which only appear when ranges actually overlap or leave a
   gap) -- same pale-blue tint as .builder-form-card__header so it reads
   as "helpful note", not a warning. */
.assessment-builder__band-note {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: #e9f2fc;
  border-radius: 0.5rem;
  color: #475569;
  font-size: 1rem;
}

.assessment-builder__band-note .bi {
  color: #1668c9;
  font-size: 1rem;
}

/* Review checklist ------------------------------------------------- */
.assessment-builder__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #adb5bd;
}

.assessment-builder__check:last-child {
  border-bottom: 0;
}

.assessment-builder__check-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.assessment-builder__check.is-ok .assessment-builder__check-icon {
  color: #198754;
}

.assessment-builder__check.is-blocking .assessment-builder__check-icon {
  color: #dc3545;
}

.assessment-builder__check.is-optional .assessment-builder__check-icon {
  color: #adb5bd;
}

/* "pending" -- a check that only passes because the content it validates
   isn't in play yet (builder_status.Check.pending). Rendered as "not
   applicable": muted, like optional, so an empty draft never shows a green
   tick it hasn't earned, but it doesn't read as an outstanding task either
   (that would contradict a green rail glyph for the same step). */
.assessment-builder__check.is-pending .assessment-builder__check-icon {
  color: #adb5bd;
}

.assessment-builder__check-body {
  flex-grow: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The checklist item's label text itself is the link (its icon and
   "complete"/"incomplete" badge sit outside the <a>, per row) -- an
   explicit underline regardless of any inherited link-reset, since this
   is the only cue besides colour that the label is clickable. */
.assessment-builder__check-link {
  text-decoration: underline;
}

/* .image-focal-editor__frame/__frame img/__marker (the crop/zoom editor's
   generic shape) now live in static/shared/css/cards.css -- documents
   becoming a 3rd byte-for-byte consumer was the "extract on the 3rd"
   trigger (agent_docs/frontend-css-conventions.md). This step's own
   .assessment-builder .image-focal-editor__frame border-color override
   lives above with the rest of the builder's #adb5bd hairline overrides. */

/* Report / analytics charts moved to content/static/content/css/charts.css
   (ADR 0087), linked by each page that draws a chart. */

/* The attempt-count pill in the "Taken assessments" accordion header
   (_taken_assessments_section.html). Sized + colored explicitly (fixed
   rem, not Bootstrap's relative .75em) so it reads as a standout chip
   rather than shrinking further inside the row's own .small/.text-muted
   context -- brand-blue pill, matching .list-controls__filter-group-count's
   accent-pill treatment. */
.assessment-history__attempts-badge {
  font-size: 0.8125rem;
  padding: 0.35em 0.7em;
  background-color: #e9f2fc;
  color: #1668c9;
}

/* Review step -- "Schedule for later" row: the date field beside its
   button, wrapping the button below the field on a narrow card. */
.assessment-builder__schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.assessment-builder__schedule .form-control {
  max-width: 14rem;
}

/* Bootstrap's .form-text shrinks to .875em by default -- bumped back to
   the page's normal body size here (reported directly). */
.assessment-builder__schedule-hint {
  font-size: 1rem;
}

/* "Caution" outline button -- a reversible but consequential lifecycle
   move (Archive, on the Review step). Bootstrap's own .btn-outline-warning
   is a bright #ffc107 that fails text-contrast on white; this is a burnt
   amber-orange (#d98324 rule / #92400e text, the colours the detail
   page's Instructions callout used until 2026-10-19) that reads as
   "caution" and clears WCAG AA. Driven through Bootstrap 5.3's --bs-btn-* props. */
.btn-outline-caution {
  --bs-btn-color: #92400e;
  --bs-btn-border-color: #d98324;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b45309;
  --bs-btn-hover-border-color: #b45309;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #92400e;
  --bs-btn-active-border-color: #92400e;
  --bs-btn-focus-shadow-rgb: 217, 131, 36;
  --bs-btn-disabled-color: #92400e;
  --bs-btn-disabled-border-color: #d98324;
}

/* Standalone assessment tool / manager pages (the share page, and any
   other that opts in) borrow the builder's darker #adb5bd hairline --
   Bootstrap's default #dee2e6 all but vanishes on the warm-cream ground.
   Mirrors the .assessment-builder border block earlier in this file;
   scoped to the wrapper so nothing else on the site changes. */
.assessment-tool {
  --bs-border-color: #adb5bd;
}

.assessment-tool .card,
.assessment-tool .card--bordered {
  border-color: #adb5bd;
}

/* Share page -- the "Copy" button beside each link flashes green for ~2s
   after a successful copy (assessment_share.js toggles .is-copied). */
.assessment-share__copy.is-copied {
  color: #198754;
  border-color: #198754;
}

/* Builder-wide text-size floor (reported directly, matched to
   .assessment-builder__schedule-hint's own 1rem: nothing under /build/
   should read smaller than the page's normal 1rem body text). Every
   builder step is wrapped in .assessment-builder (the step shell,
   _shell.html); the row-level editor pages/modal fragments (row_form.html
   /question_form.html/rule_form.html -- dimension, score band, question,
   recommendation-rule editors) extend base.html directly instead and
   share [data-inline-editor-content] as their own common wrapper
   (assessment_builder.js splices that same fragment into the shared edit
   modal, which itself sits outside .assessment-builder on purpose -- see
   _shell.html's own comment -- so neither selector alone reaches both
   places).

   Normalizes every Bootstrap small-text utility this whole template tree
   uses -- .form-control-sm/.form-select-sm/.btn-sm/.col-form-label-sm
   (0.875em), .small/<small> (0.875em), .form-text (0.875em) -- plus
   .card__meta (0.875rem, shared with the public catalogue card, which
   stays as it is -- this is a builder-only floor, not a site-wide one)
   -- in one place, rather than stripping each one from dozens of
   individual template lines across every step. Only font-size; the
   smaller padding/control-height a -sm class otherwise gives a row (and
   .form-text's own top margin) is unaffected. */
.assessment-builder .form-control-sm,
.assessment-builder .form-select-sm,
.assessment-builder .btn-sm,
.assessment-builder .col-form-label-sm,
.assessment-builder .small,
.assessment-builder small,
.assessment-builder .form-text,
.assessment-builder .card__meta,
[data-inline-editor-content] .form-control-sm,
[data-inline-editor-content] .form-select-sm,
[data-inline-editor-content] .btn-sm,
[data-inline-editor-content] .col-form-label-sm,
[data-inline-editor-content] .small,
[data-inline-editor-content] small,
[data-inline-editor-content] .form-text,
[data-inline-editor-content] .card__meta {
  font-size: 1rem;
}

/* Badges, counters and other small round/pill markers (the "optional"/
   "required"/"fallback" tags, .assessment-builder__q-num,
   .builder-stepper__marker, .assessment-builder__band-table-badge, the
   question-bank option chips, ...) are deliberately left out of the text
   floor above (reported directly: leave badges as they are) -- each of
   those keeps its own original size. Bootstrap's own .badge is `.75em`
   of its *parent's* font-size though, so without this it would have
   quietly grown anywhere its surrounding text just got bumped to 1rem
   above; pinned to an absolute rem here (not em) so it renders the same
   regardless of which parent it's sitting in. */
.assessment-builder .badge,
[data-inline-editor-content] .badge {
  font-size: 0.75rem;
}

/* Brand mark in the shared row-edit modal's header (#assessmentBuilderEditModal,
   _shell.html), sitting across from the close button -- .btn-close's own
   Bootstrap rule (margin-left: auto) is what pushes the close button to the
   far right, so this just needs to come first in source order. */
.assessment-builder-modal__brand {
  display: inline-flex;
  align-items: center;
}

.assessment-builder-modal__brand .navbar-brand-logo {
  height: 1.5rem;
}

/* "Score bands, for reference" box on the recommendation-rule editor
   (rule_form.html) -- lists the assessment's own Scoring-step bands next
   to the From/To score fields they're meant to help fill in. Border
   follows --bs-border-color so it picks up the builder's darker #adb5bd
   hairline when spliced into the shell/modal, and Bootstrap's default
   #dee2e6 on rule_form.html's own standalone-page (no-JS) fallback,
   which renders outside .assessment-builder. */
.assessment-builder__score-band-box {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  padding: 0.65rem 0.9rem;
}

.assessment-builder__score-band-box li + li {
  margin-top: 0.15rem;
}

/* -- the condition-rule editor (ADR 0054, builder/_condition_builder.html) --
   Display logic, recommendation targeting and eligibility share it: a match mode,
   then one row per condition (what to check / comparison / value / remove). Rows sit
   side by side from 576px, and stack (the remove button beside the first box) on a
   phone. */
.condition-builder {
  min-width: 0;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
}

.condition-builder__legend {
  float: none;
  width: auto;
  margin-bottom: 0.15rem;
  padding: 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.condition-builder__mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.condition-builder__mode .form-select {
  width: auto;
  max-width: 100%;
}

.condition-builder__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.25fr) minmax(0, 2fr) auto;
  gap: 0.5rem;
  align-items: start;
  padding: 0.5rem 0;
  border-top: 1px solid #e9ecef;
}

.condition-builder__row:first-child {
  border-top: 0;
}

.condition-builder__field[hidden] {
  display: none;
}

.condition-builder__remove {
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.condition-builder__errors {
  grid-column: 1 / -1;
}

.condition-builder__json {
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
}

@media (max-width: 575.98px) {
  .condition-builder__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .condition-builder__field {
    grid-column: 1;
  }

  .condition-builder__remove {
    grid-column: 2;
    grid-row: 1;
  }
}

/* The question editor's stacked ▲▼ on each answer option (question_form.html).
   They stay visible with JS now (shared/js/builder_reorder_buttons.js), so
   each gets the 24px minimum target (WCAG 2.5.8) instead of the icon's own
   size. */
.assessment-builder__reorder--stacked .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  line-height: 1;
}