that holds the option rows */
.template-filters__group-body {
display: flex;
flex-direction: column;
gap: 0.3rem;
border: 0;
margin: 0;
min-width: 0;
padding: 0.6rem 0 0.15rem;
}
.template-filters__group-body .form-check {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin: 0;
min-height: 0;
font-size: 0.875rem;
}
.template-filters__group-body .form-check-input {
flex: 0 0 auto;
margin-left: 0;
float: none;
}
.template-filters__group-body .form-check-label {
flex: 1 1 auto;
min-width: 0;
cursor: pointer;
}
/* Per-option result count, e.g. Planning area > "A project" (23). Purely
supplementary -- the checkbox/radio's aria-describedby points at the same
span so the count reaches assistive tech too, not just sighted users. */
.template-filters__option-count {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.35rem;
padding: 0.05rem 0.4rem;
border-radius: 980px;
background: #eef1f4;
color: #5c6672;
font-size: 0.7rem;
font-weight: 600;
}
/* articles/_filter_sidebar.html's category -> subcategory pair defaults to
a side-by-side row (flex: 0 1 27rem) -- too wide for the tray. Stack. */
.template-filters .list-controls__filter-pair {
flex-direction: column;
flex: 1 1 auto;
gap: 0.4rem;
}
.template-filters .list-controls__filter-pair > *,
.template-filters .list-controls__filter-pair > .position-relative {
flex: 1 1 auto;
width: 100%;
}
/* checkbox-group facet in the shared Filters panel (list_controls.html) */
.list-controls__checkgroup {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.9rem;
border: 0;
padding: 0;
margin: 0;
}
/* Guided step framing + collapsible help (document_guide.html). */
.document-guide__question {
margin-bottom: 0.25rem;
}
.document-guide__help {
margin: 0.5rem 0 1rem;
color: var(--site-muted-text-color, #6c757d);
}
.document-guide__aside > summary {
cursor: pointer;
font-size: 0.875rem;
color: var(--site-link-color, #0067b8);
}
.document-guide__aside[open] > summary {
margin-bottom: 0.5rem;
}
/* ============================================================= *
* Catalogue quick-look modal (_template_quicklook.html) *
* ============================================================= */
/* .document-chip-list / .document-chip (the readable taxonomy/meta pill)
live up near .document-detail__title -- shared with _template_intro.html's
own meta line, not quick-look-specific. */
.document-quicklook__section-label {
margin: 1.25rem 0 0.5rem;
}
/* Published-template quicklook section headings ("Know what it's for" /
"Know who's involved" / "Know what to expect") -- bold + a colored
left-border accent so each reads as a real section break, not a quiet
caption (distinct from the muted, small .document-quicklook__section-label
above, which stays as-is for the draft/component branch's own "What's
in it" label). The accent color is the exact icon-circle color of the
.document-card__info-panel variant every panel in that section uses
(documents.css's --what/--who/--when rules), so the heading and its
panels read as one color-coded unit. */
.document-quicklook__section-heading {
margin: 1.75rem 0 0.85rem;
padding-left: 0.85rem;
border-left: 4px solid;
font-size: 1.375rem;
font-weight: 700;
line-height: 1.3;
color: #16233c;
}
.document-quicklook__section-heading:first-of-type {
margin-top: 0;
}
.document-quicklook__section-heading--what {
border-left-color: #7c5cc4;
}
.document-quicklook__section-heading--who {
border-left-color: #3f9d6e;
}
.document-quicklook__section-heading--when {
border-left-color: #3d7fc9;
}
/* Modal-header title (_template_quicklook_modal.html) -- moved here from
the scrollable body so it stays visible while it scrolls (Bootstrap's
.modal-dialog-scrollable already keeps .modal-header fixed above
.modal-body, so this needs no sticky positioning of its own).
template_quicklook.js fills it in per template; empty by default.
Same navy as .document-card--illustrated's own header (the card this
modal previews from), so the modal reads as a continuation of the card
rather than a plain generic dialog -- .modal-header's own
border-top-*-radius (Bootstrap) already clips this to the dialog's
rounded corners, so no extra radius/overflow rule is needed here. The
default border-bottom (a light gray tuned for a white header) is
dropped -- the navy/white boundary beneath already reads as a clear
section break on its own. */
.quicklook-modal-header {
align-items: flex-start;
background-color: var(--documents-card-header-bg, #163a66);
border-bottom: 0;
}
.quicklook-modal-header__eyebrow {
font-size: 0.75rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
}
.quicklook-modal-header__title {
color: #fff;
}
.quicklook-modal-header__title:empty {
display: none;
}
/* The disabled field preview -- framed + slightly recessed so it reads as
"a look at the form" rather than a form to fill in here. */
.document-quicklook__fields {
margin: 0;
padding: 1rem 1.1rem 0.25rem;
border: 1px solid #e3e7eb;
border-radius: 0.5rem;
background: #f8fafc;
}
/* Sticky to the bottom edge of the scrollable modal body so the primary
actions stay reachable however long the field preview runs. The negative
side margins bleed the bar + its top border to #templateQuicklookModalBody's
left/right edges. The bottom edge is deliberately NOT bled the same way
(a negative bottom margin here paired with position:sticky left a sliver
of the modal body's own padding -- and the page behind it -- visible
below the bar while scrolled mid-list, since the sticky bottom:0 anchor
resolves against the modal body's padding edge, not its visual one):
#templateQuicklookModalBody zeroes its own bottom padding instead, so
this bar's unchanged 0.9rem bottom padding is what actually reaches the
true bottom edge, in every scroll state, with no negative margin needed. */
.document-quicklook__actions {
position: sticky;
bottom: 0;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 1.5rem -1rem 0;
padding: 0.9rem 1rem;
background: #fff;
border-top: 1px solid #dce0e5;
}
#templateQuicklookModalBody {
padding-bottom: 0;
}
/* ============================================================= *
* Template builder (documents/builder/*.html) *
* Same visual language as the assessment builder *
* (agent_docs/assessment-builder-design.md): a tinted icon-badge *
* page head, a pale-blue-strip form card, a hero "intro" front *
* door for the create page. `.builder-form-card` / `.builder- *
* intro` are already generic (not `assessment-*`-prefixed) in *
* assessments.css -- duplicated here byte-for-byte as documents *
* is the 2nd app to use them; per *
* agent_docs/frontend-css-conventions.md they move to *
* static/shared/css/cards.css once a 3rd app needs them. *
* ============================================================= */
/* Darker borders throughout the builder, same reasoning as
assessments.css's own `.assessment-builder` rule: Bootstrap's default
hairlines all but vanish here. Scoped to `.document-builder` so
nothing else on the site changes. */
.document-builder {
--bs-border-color: #adb5bd;
}
.document-builder .card--bordered {
border-color: #adb5bd;
}
/* 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/
(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. Byte-for-byte copy of assessments.css's own site-wide
text-size floor (`.assessment-builder .btn-sm` etc.), which this had
never been given (reported directly: "Switch to advanced builder" read
two sizes smaller here than its assessments equivalent -- the gap was
this whole rule, not just that one button). [data-inline-editor-content]
is shared infrastructure both builders' row-level editor pages/modal
fragments (section_form.html/field_form.html here) extend, same as
assessments' own row_form.html/question_form.html/rule_form.html --
already covered by assessments.css's copy of this selector, so it's
deliberately left out of the list below to avoid declaring the same
rule twice. */
.document-builder .form-control-sm,
.document-builder .form-select-sm,
.document-builder .btn-sm,
.document-builder .col-form-label-sm,
.document-builder .small,
.document-builder small,
.document-builder .form-text,
.document-builder .card__meta {
font-size: 1rem;
}
/* Front door only (template_form.html, mode=create) -- a softer card
border, matching `[data-builder-new-form]` in assessments.css. Its
fields keep the site-wide field border (static/shared/css/fields.css;
the softer #d3d9df failed WCAG 1.4.11, accessibility audit 2026-10-16,
AX-07). */
[data-document-builder-new-form] .builder-form-card.card--bordered,
.document-finder .builder-form-card.card--bordered {
border-color: #dce0e5;
}
/* .cover-image-dropzone / .cover-image-preview / .image-focal-editor__*
(the create-with-a-photo control) live in static/shared/css/cards.css
-- this create page is the 3rd consumer, the "extract on the 3rd"
trigger (agent_docs/frontend-css-conventions.md). Only this form's own
per-instance override lives here: the template cover renders at 3:2 on
cards + the landing hero (matching .document-card__image's own
aspect-ratio), not the shared block's 1920/1080 default. */
#templateFormImageDropzone {
--cover-aspect-ratio: 3 / 2;
}
/* Rail + main -- shared by the front door (template_form.html, mode=create,
personal templates) and every builder shell step (_shell.html). Byte-
for-byte copy of assessments.css's `.assessment-builder__layout` grid
(single column below lg, a fixed rail column from lg up). The Finder
(finder.html) shares this and the rail and main rules below
(.document-finder__*). */
.document-builder__layout,
.document-finder__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
/* The assessment builder's rail panel (assessments.css's
`.assessment-builder__rail`, itself the take page's; product owner,
2026-10-20): no fill on the white page, the darker #adb5bd hairline and
Bootstrap's --bs-border-radius, 1.5rem in (1rem below lg). It was the
grey "Customize this document" panel (.document-rail-layout__rail). */
.document-builder__rail,
.document-finder__rail {
padding: 1.5rem;
border: 1px solid #adb5bd;
border-radius: var(--bs-border-radius, 0.375rem);
}
@media (max-width: 991.98px) {
.document-builder__rail,
.document-finder__rail {
padding: 1rem;
}
}
/* The Help tab's guide (content/_step_guide.html, shared
static/shared/css/builder_help.css) set straight on the rail, as in the
assessment builder (product owner, 2026-10-20; a copy of assessments.css's
`.assessment-builder__rail .builder-help*`, keep the two in step): 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, and each list
item as its bold name on a line of its own over a grey description,
beside the check disc. 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. */
.document-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;
}
.document-builder__rail .builder-help-heading {
gap: 1rem;
}
.document-builder__rail .builder-help-title,
.document-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;
}
.document-builder__rail .builder-help-intro {
font-size: inherit;
color: inherit;
}
/* The same grey as the intro (the site theme colours a bare ). */
.document-builder__rail .builder-help-text p {
margin-bottom: 1rem;
color: #495057;
}
.document-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;
}
.document-builder__rail .builder-help-text > :is(h1, h2, h3, h4, h5, h6):first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.document-builder__rail .builder-help-text ul {
margin-top: 1.25rem;
gap: 1.5rem;
}
.document-builder__rail .builder-help-text ul li {
padding-left: 3rem;
color: #5c6672;
font-size: 1rem;
}
.document-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. */
.document-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) {
.document-builder__rail .builder-help-text ul li {
padding-left: 2.6rem;
}
}
.document-builder__rail,
.document-builder__main,
.document-finder__rail,
.document-finder__main {
min-width: 0;
}
.document-builder__main,
.document-finder__main {
overflow-wrap: break-word;
}
@media (min-width: 992px) {
.document-builder__layout,
.document-finder__layout {
/* 360px, not the old 240px -- matches assessments'
`.assessment-builder__layout` rail column exactly (reported
directly). */
grid-template-columns: 360px minmax(0, 1fr);
align-items: start;
}
.document-builder__rail,
.document-finder__rail {
position: sticky;
/* Clears the sticky .document-builder__header too (its height is
published by document_builder_header_sticky.js; the Finder has no
such header, so it falls back to 0px there). */
top: calc(var(--lc-sticky-top, 4rem) + var(--document-builder-header-height, 0px) + 1rem);
}
}
/* Quick/Advanced mode choice (front door only). Byte-for-byte copy of
assessments.css's `.assessment-builder__mode-*` -- each wraps
its radio so the whole card is a click target with no JS;
:has(input:checked) styles the selected one. */
.document-builder__mode-choice {
display: grid;
gap: 0.6rem;
}
@media (min-width: 768px) {
.document-builder__mode-choice {
grid-template-columns: 1fr 1fr;
}
}
.document-builder__mode-legend {
float: none;
width: auto;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.6rem;
}
.document-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;
}
.document-builder__mode-option:has(input:focus-visible) {
outline: 2px solid #0067b8;
outline-offset: 2px;
}
.document-builder__mode-option:has(input:checked) {
border-color: #0067b8;
background-color: #eef5fd;
box-shadow: inset 0 0 0 1px #0067b8;
}
.document-builder__mode-option input {
margin-top: 0.35rem;
flex-shrink: 0;
}
.document-builder__mode-icon {
flex-shrink: 0;
font-size: 1.6rem;
line-height: 1.3;
}
.document-builder__mode-icon--simple {
color: #0067b8;
}
.document-builder__mode-icon--advanced {
color: #3f4b5e;
}
.document-builder__mode-body {
min-width: 0;
}
.document-builder__mode-body strong {
font-size: 1.0625rem;
color: #1d2b45;
}
.document-builder__mode-subtitle {
color: #495057;
font-size: 0.9rem;
margin-bottom: 0.3rem;
}
/* Simple / Advanced mode switch, under the progress and saved note
(_mode_toggle.html) -- byte-for-byte copy of assessments.css's own
`.assessment-builder__mode-toggle`/`-label`: set off by a light rule and
the take rail's spacing (product owner, 2026-10-20, as there). The rule
only separates parts, so it's decorative under WCAG 1.4.11. */
.document-builder__mode-toggle {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #dee2e6;
font-size: 1rem;
}
@media (max-width: 991.98px) {
.document-builder__mode-toggle {
margin-top: 1rem;
padding-top: 1rem;
}
}
.document-builder__mode-toggle-label {
font-size: 1rem;
font-weight: 600;
/* #6c757d was 4.44:1 on the rail's old #f8f9fa fill (AX-10); #5c6672
is 5.9:1 on the white rail now */
color: #5c6672;
margin-bottom: 0.15rem;
}
/* Same fix as assessments.css's .assessment-builder__mode-toggle .btn-link:
Bootstrap's #0d6efd was 4.26:1 on the rail's old #f8f9fa fill (AX-10). */
.document-builder__mode-toggle .btn-link {
--bs-btn-color: var(--site-link-color, #0067b8);
--bs-btn-hover-color: var(--site-link-hover-color, #005a9e);
}
/* Intro block: a decorative icon beside the eyebrow / heading / lede.
Byte-for-byte layout copy of assessments.css's `.builder-intro`; the
icon here is a Bootstrap Icons glyph rather than bespoke line art. */
.builder-intro {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 1.75rem;
}
.builder-intro__icon {
width: 8rem;
height: 8rem;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #1a6df0;
font-size: 4.5rem;
line-height: 1;
}
@media (max-width: 575.98px) {
.builder-intro__icon {
width: 4.5rem;
height: 4.5rem;
font-size: 2.5rem;
}
}
.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;
}
/* Shared page header for every other builder page (settings, the
section/field editor, the guided-journey step): a tinted icon badge
next to an optional eyebrow, a bold title and an optional lede.
Byte-for-byte copy of assessments.css's `.assessment-page-head`
(app-prefixed there since it names "assessment"; named after the
template builder here for the same reason). */
.document-page-head {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.document-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;
}
.document-page-head__eyebrow {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6c757d;
margin-bottom: 0.15rem;
}
.document-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;
}
/* 20px above the builder's step title (product owner, 2026-10-20; the
same as assessments.css's .assessment-builder__step-head rule). Only
the shell's step head: the section/field/sample editors carry an
eyebrow right above their title, and the fill page has its own. */
.document-builder__step-head .document-page-head__title {
margin-top: 1.25rem;
}
/* document_fill.html's own title reads larger than the builder's -- it's
the page's single most important piece of content (which document this
is), not just a step heading alongside a stepper rail. */
.document-fill__head .document-page-head__title {
font-size: clamp(1.75rem, 1.5rem + 1.3vw, 2.25rem);
}
/* :not([hidden]) rather than a bare class selector -- both have identical
(0,1,0) specificity, so a plain `display: flex` here would tie with (and,
by source order, beat) the browser's own `[hidden] { display: none }`
default the instant document_title_rename.js sets/clears the attribute. */
.document-page-head__title-form:not([hidden]) {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.document-page-head__title-form .form-control {
flex: 1 1 auto;
min-width: 0;
max-width: 64rem;
font-weight: 700;
}
/* Matches .document-page-head__title's enlarged size on this page so
swapping into edit mode doesn't shrink the heading back down. */
.document-page-head__title-input {
font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
padding-top: 0.35rem;
padding-bottom: 0.35rem;
}
.document-page-head__lede {
font-size: 1.0625rem;
line-height: 1.5;
color: #5c6672;
}
@media (max-width: 575.98px) {
.document-page-head__icon {
width: 2.75rem;
height: 2.75rem;
font-size: 1.25rem;
}
}
/* The one form card (.builder-form-card: a pale-blue header strip + a
plain body) lives in static/shared/css/cards.css since the project
workspace became its third user (2026-10-20); only this app's own sizes
are here. */
/* A page with several of these cards stacked down it (build.html,
field_form.html, guided_form.html) uses the tighter strip -- same
`.assessment-builder__main` treatment in assessments.css. */
.document-builder__main .builder-form-card__header,
.document-finder__main .builder-form-card__header {
padding: 0.85rem 1.35rem;
}
.document-builder__main .builder-form-card__title,
.document-finder__main .builder-form-card__title {
font-size: 1.15rem;
}
.document-builder__main .builder-form-card__subtitle,
.document-finder__main .builder-form-card__subtitle {
font-size: 0.9375rem;
}
/* Halved from the shared .builder-form-card rule (cards.css), scoped to the fill
page's own section cards only -- other builder-form-card users (the
template builder steps, etc.) keep the standard padding. */
.document-fill__section .card-body {
padding: 0.75rem 0.675rem;
}
/* Override .builder-form-card's own `overflow: hidden` (set purely to clip
its header strip to the card's rounded top corners -- Bootstrap's own
`.card-header:first-child` already carries that radius natively, so
nothing actually depends on the parent clip) for this one card only.
`overflow: hidden` on any ancestor stops a `position: sticky` descendant
from sticking to the viewport at all (its containing block becomes that
ancestor's own box instead) -- and a rich_text field's per-field toolbar
slot ([data-richtext-toolbar-slot], documents.css further down) lives
exactly one of these cards deep. Other .builder-form-card users (the
template builder steps, assessments' own copy) are untouched. */
.document-fill__section {
overflow: visible;
}
.builder-form-card__actions {
margin-top: 1.5rem;
}
.builder-form-card__counter {
color: #6c757d;
}
/* A collapsible .builder-form-card header -- native Bootstrap collapse
(data-bs-toggle, no custom JS), same visual mechanism as
document_fill.html's own .document-fill__section-toggle/-chevron pair,
just under a generic name since builder/review.html reuses it across
several different card kinds (readiness checklist / dependencies /
publishing) on one page. */
.builder-form-card__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
padding: 1.25rem 1.35rem;
background: none;
border: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.document-builder__main .builder-form-card__toggle {
padding: 0.85rem 1.35rem;
}
.builder-form-card__chevron {
flex-shrink: 0;
font-size: 1.1rem;
transition: transform 0.15s ease;
}
.builder-form-card__toggle.collapsed .builder-form-card__chevron {
transform: rotate(-90deg);
}
/* Section cards inside the build page -- a `.builder-form-card` header
strip (name + actions) over a plain body (fields, one sortable-ish list
of rows). */
.document-builder__section {
overflow: hidden;
}
/* Collapse chevron -- revealed by document_builder.js's
initSectionCollapse, byte-for-byte the same mechanism as assessments'
own .assessment-builder__section-toggle (Questions step), just folding
this page's existing .builder-form-card header/body instead of that
page's bespoke section-head/-body pair. With no JS the button stays
hidden and every section stays open. */
.document-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;
}
.document-builder__section-toggle:hover,
.document-builder__section-toggle:focus-visible {
background-color: #eef2f6;
color: #16233c;
}
.document-builder__section-toggle .bi {
transition: transform 0.15s ease;
}
.document-builder__section.is-collapsed .document-builder__section-toggle .bi {
transform: rotate(-90deg);
}
.document-builder__section.is-collapsed .builder-form-card__header {
border-bottom: 0;
}
.document-builder__section.is-collapsed .card-body {
display: none;
}
.document-builder__field {
border-bottom: 1px solid #e6e9ee;
}
.document-builder__field:last-child {
border-bottom: 0;
}
.document-builder__field-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0;
}
.document-builder__field-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
overflow-wrap: anywhere;
}
.document-builder__field-row .badge {
font-weight: 500;
}
.document-builder__field-actions {
display: flex;
align-items: center;
gap: 0.1rem;
flex-shrink: 0;
}
.document-builder__grid {
border-left: 2px solid #e6e9ee;
padding-left: 0.75rem;
margin: 0.35rem 0 0.75rem;
}
/* Add-a-field palette (ADR 0066/0068): one per container (a top-level
section, or a Data Grid/Edit Grid's own row template) since each has its
own scoped `field_add` form -- see _field_toolbar.html. A section's own
instance lives in the persistent left rail, stacked under the Simple/
Advanced mode toggle (`.document-builder__rail-palette`, build.html's
`builder_rail_extra` block) -- one per section, separated by the same
hairline the mode toggle itself uses above. A grid's own row-template
instance stays inline next to that grid instead (no rail placement --
see _field_toolbar.html's comment on why). */
.document-builder__rail-palette {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid #adb5bd;
}
.document-builder__rail-palette .document-builder__palette + .document-builder__palette {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px dashed #ced4da;
}
.document-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 above) -- bumped to line the search box's height up with
them instead of leaving it as the odd one out. */
.document-builder__palette-search .form-control,
.document-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) -- left mostly at
Bootstrap's own defaults, just compacted for a narrow sidebar column. */
.document-builder__palette .accordion-button {
padding: 0.6rem 0.85rem;
font-size: 0.875rem;
font-weight: 700;
color: #16233c;
}
.document-builder__palette .accordion-button:not(.collapsed) {
color: #1668c9;
background-color: #eef5fd;
box-shadow: inset 0 -1px 0 #cfe1f2;
}
.document-builder__palette .accordion-body {
padding: 0.55rem;
}
.document-builder__tiles {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.document-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: 0.875rem;
color: #1d1d1f;
background-color: #fff;
border: 1px solid #d6dbe1;
border-radius: 0.45rem;
cursor: pointer;
}
/* JS-only search (document_builder.js's initFieldSearch) 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). */
.document-builder__tile[hidden] {
display: none;
}
.document-builder__tile:hover,
.document-builder__tile:focus-visible {
border-color: #0067b8;
background-color: #f6faff;
color: #0b3d69;
}
.document-builder__tile .bi {
flex-shrink: 0;
font-size: 1rem;
color: #6c757d;
}
.document-builder__tile:hover .bi,
.document-builder__tile:focus-visible .bi {
color: #0067b8;
}
/* Drag affordances (revealed by document_builder.js). */
.document-builder__handle {
cursor: grab;
color: #adb5bd;
padding-right: 0.25rem;
}
.document-builder__handle:active {
cursor: grabbing;
}
.document-builder .sortable-ghost {
opacity: 0.5;
}
/* The field editor's live-preview panel (ADR 0067) -- stays in view while
scrolling a long editor, same --lc-sticky-top navbar-offset convention as
assessments.css's own sticky rail/toolbar (falls back to a plain 4rem when
nothing on the page publishes the measured navbar height); inside the edit
modal there's no sticky navbar to clear, so it sticks flush with the
modal's own scrolling body instead. */
.document-builder__preview {
position: sticky;
top: var(--lc-sticky-top, 4rem);
}
#documentBuilderEditModal .document-builder__preview {
top: 0;
}
/* Checkbox-choice "cards" for the guided-journey step's planning-taxonomy
fieldsets (planning_outcomes/planning_areas/intended_audiences) --
adapted from assessments.css's own .assessment-builder__check-cards/
__check-card (the Overview step's "Respondents" card). That one stays a
single column throughout (each card also carries a description line of
varying length); these choices are label-only, so two columns fit
comfortably at lg+ (reported directly: match image 1's look, max 2
columns on large screens, 1 on medium/small). */
.document-builder__check-cards {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
}
@media (min-width: 992px) {
.document-builder__check-cards {
grid-template-columns: repeat(2, 1fr);
}
}
.document-builder__check-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 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;
}
.document-builder__check-card:has(input:focus-visible) {
outline: 2px solid #0067b8;
outline-offset: 2px;
}
.document-builder__check-card:has(input:checked) {
border-color: #0067b8;
background-color: #eef5fd;
box-shadow: inset 0 0 0 1px #0067b8;
}
.document-builder__check-card input {
flex-shrink: 0;
}
.document-builder__check-card-label {
font-size: 1rem;
color: #1d2b45;
}
/* ==============================================================
* Builder shell (rail + step head + footer, used by every step
* page from Basics through Publish). The numbered rail + review
* checklist are byte-for-byte copies of assessments.css's own
* rules -- documents is the 2nd app to use them; per
* agent_docs/frontend-css-conventions.md they move to
* static/shared/css/cards.css once a 3rd app needs them.
* ============================================================= */
/* Persistent name + status bar above the rail/main layout. Byte-for-byte
copy of assessments.css's `.assessment-builder__header`/`__name`. */
.document-builder__header {
border-bottom: 1px solid #adb5bd;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
background-color: var(--site-bg-color, #fff);
}
@media (min-width: 992px) {
.document-builder__header {
position: sticky;
top: var(--lc-sticky-top, 4rem);
z-index: 6;
}
}
.document-builder__name {
color: #0067b8;
font-size: clamp(1.75rem, 1.5rem + 1.3vw, 2.25rem);
}
/* Rail "Step N of M" progress bar. Byte-for-byte copy of assessments.css's
own `.assessment-builder__progress*` (product owner, 2026-10-20): a
bigger, darker count (#16233c, 15:1) over a bar with rounded ends. */
.document-builder__progress-label,
.document-finder__progress-label {
margin-bottom: 0.75rem;
font-size: 1.125rem;
font-weight: 700;
color: #16233c;
}
.document-builder__progress .progress,
.document-finder__progress .progress {
height: 0.5rem;
background-color: #e9ecef;
}
.document-builder__progress .progress,
.document-builder__progress .progress-bar,
.document-finder__progress .progress,
.document-finder__progress .progress-bar {
border-radius: 980px;
}
.document-builder__progress .progress-bar,
.document-finder__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, a copy of assessments.css's
`.assessment-builder__autosave-status` (product owner, 2026-10-20; it
was bold blue text). Plain text + icon, not a pill/badge box and not a
-- no `cursor: pointer` and no hover/focus styling, since this
is status text, not a control. */
.document-builder__autosave-status {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: 1rem;
color: #495057;
font-size: 1rem;
font-weight: 400;
}
.document-builder__autosave-status .bi {
color: var(--site-btn-primary-bg-color, #0067b8);
font-size: 1.25rem;
}
/* "Steps" title above the progress bar/stepper -- same weight/colour as
assessments' `.assessment-builder__rail-title` and this app's own
`.document-rail-layout__rail-title` ("Customize this document" panel). */
.document-builder__rail-title,
.document-finder__rail-title {
font-weight: 700;
color: #16233c;
}
/* The live rail's own stepper list (_step_nav.html only -- the front
door's non-interactive preview has no mode toggle above it, so it
doesn't need this gap) -- byte-for-byte copy of assessments.css's own
`.assessment-builder__step-nav` (reported directly: the mode toggle and
the stepper list below it were touching, with no gap between them). */
.document-builder__step-nav {
margin-top: 1rem;
}
/* Numbered vertical stepper. Two users, one look:
- template_form.html (mode=create) -- 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 )
A copy of assessments.css's `.builder-stepper*` (product owner,
2026-10-20; that one is the take page's section list): 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. 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. Already generic-named (not `document-*`-prefixed), same as
`.builder-form-card` / `.builder-intro` above; keep it identical to the
assessments copy. */
.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). */
.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 (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. */
.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: 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. assessments.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. */
@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 Publish step's checklist.
Byte-for-byte copy of assessments.css's own `.assessment-builder__
step-checks*`. */
.document-builder__step-checks {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-bottom: 1.25rem;
}
.document-builder__step-checks-group {
border: 1px solid;
border-radius: 0.55rem;
}
.document-builder__step-checks-group.is-blocked {
background-color: #fdecea;
border-color: #f5c2c0;
}
.document-builder__step-checks-group.is-optional {
background-color: #fef7e8;
border-color: #e3ba6b;
}
.document-builder__step-checks-lead {
display: flex;
align-items: baseline;
gap: 0.4rem;
padding: 0.7rem 0.9rem;
margin: 0;
font-weight: 600;
font-size: 0.9375rem;
cursor: pointer;
list-style: none;
}
.document-builder__step-checks-lead::-webkit-details-marker { display: none; }
.document-builder__step-checks-lead > span:first-of-type {
flex: 1 1 auto;
}
.document-builder__step-checks-caret {
flex-shrink: 0;
color: inherit;
transition: transform 0.15s ease;
}
.document-builder__step-checks-group[open] .document-builder__step-checks-caret {
transform: rotate(180deg);
}
.document-builder__step-checks-lead:focus-visible {
outline: 2px solid currentColor;
outline-offset: -2px;
border-radius: 0.55rem;
}
.document-builder__step-checks-group.is-blocked .document-builder__step-checks-lead {
color: #a12b21;
}
.document-builder__step-checks-group.is-optional .document-builder__step-checks-lead {
color: #8a5a09;
}
.document-builder__step-checks-note {
font-weight: 400;
/* #6c757d was about 4.3:1 on the optional panel's #fef7e8 (WCAG 1.4.3;
found by documents.tests.test_axe_browser) */
color: #5c6672;
font-size: 0.8125rem;
}
.document-builder__step-checks-list {
margin: 0;
padding: 0 0.9rem 0.8rem 2rem;
font-size: 0.9375rem;
}
.document-builder__step-checks-list li + li {
margin-top: 0.2rem;
}
.document-builder__step-checks-hint {
display: block;
font-size: 0.8125rem;
color: #6c757d;
}
/* Publish step checklist. Byte-for-byte copy of assessments.css's own
`.assessment-builder__check*`. */
.document-builder__check {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.5rem 0;
border-bottom: 1px solid #adb5bd;
}
.document-builder__check:last-child {
border-bottom: 0;
}
/* A completed check reads as done, not as a still-open row -- drop its
divider so it doesn't visually group with the incomplete/optional ones
still below it. Documents-only divergence from assessments.css's
otherwise-identical `.assessment-builder__check*` copy above. */
.document-builder__check.is-ok {
border-bottom: 0;
}
.document-builder__check-icon {
flex-shrink: 0;
font-size: 1rem;
line-height: 1.5;
}
.document-builder__check.is-ok .document-builder__check-icon {
color: #198754;
}
.document-builder__check.is-blocking .document-builder__check-icon {
color: #dc3545;
}
.document-builder__check.is-optional .document-builder__check-icon {
color: #adb5bd;
}
.document-builder__check-body {
flex-grow: 1;
min-width: 0;
overflow-wrap: anywhere;
}
/* review.html's per-check label (not its badge) is a real link -- jumps
to the step page, focusing the relevant field there via ?focus=
(document_builder_focus_field.js). Keeps the default underline (only
color is reset to match the surrounding text) so it still reads as a
link; a bit bluer on hover/focus for the usual affordance. !important
beats the link's .text-reset utility (itself !important). */
.document-builder__check-link:hover,
.document-builder__check-link:focus-visible {
color: #0d6efd !important;
}
/* A typed-name Signature field (ADR 0064) reads as a signature, not a
plain text input -- a light cursive cue, nothing more (no canvas capture
yet, see the ADR). */
.document-fill__signature-input {
font-family: "Brush Script MT", cursive;
font-size: 1.25rem;
}
/* Rich text answer field (forms.QuillWidget, document_richtext.js). Quill's
own snow theme covers the toolbar/editable chrome -- these rules only
cover the parts Quill has no opinion on: our custom table embed and the
hand-added Undo/Redo/Insert table/Print/Zoom controls. */
.document-richtext__custom-button {
border: none;
background: transparent;
padding: 5px;
width: 28px;
height: 24px;
font-size: 1rem;
line-height: 1;
color: #444;
border-radius: 0.25rem;
}
.document-richtext__custom-button:hover,
.document-richtext__custom-button:focus-visible {
background: #f0f0f0;
}
/* The header picker's "Title" / "Subtitle" / "Clear formatting" values
(document_richtext.js's toolbarConfig()) have no built-in label in
quill.snow.css -- only Normal/Heading 1-6 ship with one -- so these
follow its own convention (a ::before rule keyed off the option's
data-value, same selector pair it uses for every other value). */
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="title"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="title"]::before {
content: "Title";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="subtitle"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="subtitle"]::before {
content: "Subtitle";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="clear"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="clear"]::before {
content: "Clear formatting";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="title"]::before {
font-size: 2.25em;
font-weight: 700;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="subtitle"]::before {
font-size: 1em;
color: #6c757d;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="clear"] {
border-top: 1px solid #dee2e6;
margin-top: 4px;
padding-top: 6px;
}
/* Actual in-editor look for a Title/Subtitle block (an / carrying
an extra class -- see document_richtext.js's Header.create patch) --
distinct from a plain heading of the same level, matching the picker
preview above. */
.document-richtext .ql-editor .ql-doc-title {
font-weight: 800;
font-size: 2.25em;
}
.document-richtext .ql-editor .ql-doc-subtitle {
font-weight: 400;
font-size: 1.15em;
color: #6c757d;
}
.document-richtext .ql-editor {
min-height: 8rem;
font-size: 1.1rem;
}
/* The table embed (document_richtext.js, ADR 0070): the shared table editor
(document_table.js, document_table.css) lives inside it; the table's own
look is static/shared/css/doc_table.css. Quill's `.ql-editor > * { cursor:
text }` would give the whole embed a text caret. */
.ql-document-table {
margin: 0.75rem 0 1rem;
cursor: default;
}
.ql-document-table .doc-table-wrap {
margin-bottom: 0;
}
/* The toolbar as a floating rounded "pill" -- same visual language as the
article body field's toolbar (rounded corners, transparent border, white background, soft
shadow, detached with a gap from the editable box below instead of
sharing one border with it, which is Quill's own default). Applies to
every rich_text field via the shared .document-richtext wrapper.
!important overrides quill.snow.css's own same-specificity
.ql-toolbar.ql-snow rule, loaded after this stylesheet (via form.media
in extra_head). */
.document-richtext .ql-toolbar.ql-snow {
border-radius: 2rem !important;
border-color: transparent !important;
background-color: #fff !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
padding: 0.4rem 0.75rem !important;
margin-bottom: 0.5rem;
/* .document-richtext-toolbar-slot (below) is a flex row -- without this
the toolbar only shrink-wraps its own buttons instead of spanning the
full column width. */
flex: 1 1 auto;
width: 100%;
}
/* Quill suppresses the editable box's own top border by default so it
sits flush under the toolbar (.ql-toolbar.ql-snow + .ql-container.ql-
snow { border-top: 0 }, quill.snow.css) -- restore a full border/radius
now that the toolbar floats separately above it. The colour is the
site-wide field border (static/shared/css/fields.css, WCAG 1.4.11);
Quill's own #ccc and the #dee2e6 used here before were both under 3:1. */
.document-richtext .ql-container.ql-snow {
border: 1px solid var(--site-input-border-color, #767676) !important;
border-radius: 0 !important;
}
/* The editor's focus indicator (WCAG 2.4.7; accessibility re-check
2026-10-16, AX-04): Quill's contenteditable has no outline of its own, so
the box takes the site's two-tone ring while anything inside it has
focus, the same look as static/shared/css/focus.css gives .form-control.
(The article form styles its own editor's focus in articles.css.) */
.document-richtext .ql-container.ql-snow:focus-within {
outline: 2px solid var(--site-focus-ring-color, #0067b8);
outline-offset: 2px;
box-shadow: 0 0 0 2px #fff;
}
.document-richtext .ql-toolbar.ql-snow .ql-formats {
margin-bottom: 0;
}
/* Where document_richtext.js relocates whichever rich_text field's toolbar
currently has focus (document_fill.html's own [data-richtext-toolbar-slot]
variant below, or the page-level #documentRichTextToolbarSlot that
document_guide.html/template_preview.html still use). Empty by default;
:empty collapses it back to zero height so an unfocused field (or a page
before anything's been clicked into) reserves no space for it. */
.document-richtext-toolbar-slot {
min-height: 2.75rem;
display: flex;
align-items: center;
}
.document-richtext-toolbar-slot:empty {
min-height: 0;
}
/* #documentRichTextToolbarSlot, pinned "under breadcrumbs" -- document_
guide.html/template_preview.html's single page-level slot, reused across
every rich_text field on those pages and left visible (not hidden on
blur, see document_richtext.js) once something has claimed it. */
.document-richtext-toolbar-slot[data-sticky-pin] {
position: sticky;
top: var(--lc-sticky-top, 4rem);
z-index: 5;
background-color: var(--site-bg-color, #fff);
padding-block: 0.5rem;
}
.document-richtext-toolbar-slot[data-sticky-pin]:empty {
padding-block: 0;
}
/* [data-richtext-toolbar-slot] -- document_fill.html's per-field variant
(_document_fill_groups.html), rendered right under that field's own
label. Hidden (via the :empty rule above) until the field is focused;
document_richtext.js both attaches the toolbar here on focus and
detaches it again on blur, so unlike the page-level slot above this one
only ever holds a toolbar while its field is actually in use. Sticky
only while it's holding something, so a long field's toolbar rides
along as you scroll through it instead of scrolling out of reach, but
an empty slot never pins an invisible 0-height box to the top of the
viewport. `top` stacks --document-fill-actions-height (document_
richtext.js) on top of --lc-sticky-top so this sits right below the
already-pinned .document-fill__bar instead of underneath it at
the same offset; z-index one below that bar's (5) for the same reason. */
.document-richtext-toolbar-slot[data-richtext-toolbar-slot]:not(:empty) {
position: sticky;
top: calc(var(--lc-sticky-top, 4rem) + var(--document-fill-actions-height, 4rem));
z-index: 4;
background-color: var(--site-bg-color, #fff);
padding-block: 0.5rem;
}
/* Inline document-structure editor (agent_docs/adr/0069, pending) -- the
"Customize this document" panel on document_fill.html. A responsive
rail+main grid, same single-column-below-992px shape as
.document-builder__layout above, but its own named pattern rather than a
literal reuse of that one: the builder's rail only ever holds a narrow
Add-a-field palette (240px is plenty), while this rail also holds the
full section/field management canvas (customize/_canvas.html), which
needs real reading width for a label + type + Edit/Delete actions on one
row -- hence the wider fixed column below. */
.document-rail-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
.document-rail-layout__rail,
.document-rail-layout__main {
min-width: 0;
}
/* The 2-column split only applies once the panel is actually open
(document_structure_panel.js toggles this class on openPanel()/
closePanel()) -- not merely whenever the user is allowed to open it.
Keying this off a static "can the user ever see a rail" class instead
(document-rail-layout--has-rail, since removed) left the grid's 360px
first track permanently reserved even while the sat `hidden`:
with no visible item in that track, .document-rail-layout__main (the
only remaining grid item) auto-placed into it instead of the second
(1fr) track, squeezing the whole fill form into a 360px-wide column by
default. */
@media (min-width: 992px) {
.document-rail-layout--open {
grid-template-columns: 360px minmax(0, 1fr);
align-items: start;
}
/* Sticky, same --lc-sticky-top navbar-offset convention as
.document-builder__rail above -- plus --document-fill-actions-height
(document_richtext.js), since this page (unlike the builder) also has
the pinned .document-fill__bar sitting above this grid. Without
this, opening Customize while scrolled partway down a long document
dropped the panel in at the grid's static top -- already scrolled out
of view above the viewport -- leaving a user who'd just clicked
Customize looking at an unchanged page (reported directly). max-height
+ its own scroll keeps a rail taller than the viewport from running
off the bottom edge once pinned. */
.document-rail-layout__rail {
position: sticky;
top: calc(var(--lc-sticky-top, 4rem) + var(--document-fill-actions-height, 4rem));
max-height: calc(100vh - var(--lc-sticky-top, 4rem) - var(--document-fill-actions-height, 4rem) - 1.5rem);
overflow-y: auto;
}
}
.document-rail-layout__rail {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 0.75rem;
padding: 1rem;
}
.document-rail-layout__rail[hidden] {
display: none;
}
.document-rail-layout__rail-header {
margin-bottom: 0.85rem;
}
.document-rail-layout__rail-title {
font-weight: 700;
color: #16233c;
}
.document-rail-layout__add-section {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.6rem;
font-weight: 600;
color: #1668c9;
background-color: #fff;
border: 1px dashed #9aa5b1;
border-radius: 0.5rem;
cursor: pointer;
}
.document-rail-layout__add-section:hover,
.document-rail-layout__add-section:focus-visible {
border-color: #1668c9;
background-color: #f6faff;
}
.document-rail-layout__divider {
margin: 1rem 0;
border: 0;
border-top: 1px solid #dee2e6;
opacity: 1;
}
/* The canvas's own section cards -- rendered in the main column (in place
of the fill form while customizing, not inside the narrow rail panel;
see document_fill.html's own comment) so there's no shortage of width
here. */
.document-rail-layout__section {
border: 1px solid #e6e9ee;
border-radius: 0.6rem;
margin-bottom: 0.75rem;
overflow: hidden;
}
.document-rail-layout__section:last-child {
margin-bottom: 0;
}
.document-rail-layout__fields {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.document-rail-layout__field {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0;
border-bottom: 1px solid #e6e9ee;
}
.document-rail-layout__field:last-child {
border-bottom: 0;
}
.document-rail-layout__field-icon {
flex-shrink: 0;
color: #6c757d;
}
.document-rail-layout__field-label {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
/* Drag affordances -- revealed by document_structure_panel.js, same
"hidden until JS reveals it" convention as .document-builder__handle. */
.document-rail-layout__handle {
cursor: grab;
color: #adb5bd;
padding-right: 0.25rem;
}
.document-rail-layout__handle:active {
cursor: grabbing;
}
.document-rail-layout .sortable-ghost {
opacity: 0.5;
}
/* The field editor when the field is a Table (ADR 0070): the designer needs the full
width, so the live-preview column is dropped (the designer is its own preview). */
.is-table-type .document-builder__preview-col {
display: none;
}
.is-table-type .document-builder__field-form-col {
flex: 0 0 100%;
max-width: 100%;
}
/* The Customize panel's field editor, while the field is a Table: wide enough for the table
designer's toolbar to sit on one line (about 1210px), within the window on smaller screens.
document_structure_panel.js adds the class from the Field type. */
.modal-dialog.document-customize-modal--wide {
--bs-modal-width: min(1400px, calc(100vw - 2rem));
}
/* Move, beside a document's place in My work (plan_tags.document_place, ADR
0085): a button, so it needs a 24px target (WCAG 2.5.8), not just its
text's height. */
.document-location__move {
min-width: 1.5rem;
min-height: 1.5rem;
padding: 0 0.25rem;
}
/* ============================================================= *
* "My templates" / "My components" card (.template-card, *
* _my_template_card_cols.html) *
* ============================================================= */
/* GitHub-style like My articles' card (product owner, 2026-10-21;
agent_docs/card-catalogue-metadata.yaml's management variant): no
border, fill, shadow or padding, 0.5rem corners on card and cover with
1.75rem under the cover, the status on its own line, the labels row, a
22px medium-weight title in the heading colour, the summary as a muted
teaser, the facts line, then text links. Sizes and spacing are copied
from articles.css's .article-card (these pages don't load it; same as
assessments.css's .assessment-card); keep the three in step. The
catalogue's own card (_template_card_cols.html) is the same .template-card
since 2026-10-21, in its reader form ("Preview" arrow + "Use template"). */
.template-card {
--bs-card-border-width: 0;
--bs-card-bg: transparent;
border-radius: 0.5rem;
}
.template-card .card-body {
padding: 0;
}
.template-card__image-wrap {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
margin-bottom: 1.75rem;
}
/* --focal-x/--focal-y/--zoom set inline per template
(DocumentTemplate.image_focal_style), as on the article card. */
.template-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%);
}
/* No cover image: the old navy catalogue card in miniature (product owner,
2026-10-21; that card's .document-card--illustrated is gone): the same
admin-editable navy and two soft, low-opacity circles clipped by the
rounded cover, which drift apart and brighten while the pointer is over
the card or focus is inside it. Decorative only (pseudo-elements, no
pointer events), the icon above them; the movement is skipped under
prefers-reduced-motion. The white icon is 11:1 on the default navy. */
.template-card__image--fallback {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 2;
background-color: var(--documents-card-header-bg, #163a66);
color: rgba(255, 255, 255, 0.85);
font-size: 4rem;
}
.template-card__image--fallback .bi {
position: relative;
z-index: 1;
}
/* Each Resource Library type has its own shade of the default cover, so the
three catalogues read apart at a glance (product owner, 2026-10-21):
templates keep the documents card colour above (navy unless an admin
changes it), components a deep teal, Planning Kits a deep indigo, all
about as dark, so the white icon and circles read the same on each. The
icon names the type as well (file / puzzle / files), so colour isn't the
only cue. Set on the card root: _component_card_cols.html,
_my_template_card_cols.html (a component), projects/_kit_card_cols.html. */
.template-card--component .template-card__image--fallback {
background-color: #155a65;
}
.template-card--kit .template-card__image--fallback {
background-color: #3b2a6f;
}
.template-card__image--fallback::before,
.template-card__image--fallback::after {
content: "";
position: absolute;
z-index: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
pointer-events: none;
}
.template-card__image--fallback::before {
width: 15rem;
height: 15rem;
top: -6rem;
right: -5rem;
}
.template-card__image--fallback::after {
width: 9rem;
height: 9rem;
bottom: -3.5rem;
left: -3rem;
background: rgba(255, 255, 255, 0.04);
}
@media (prefers-reduced-motion: no-preference) {
.template-card__image--fallback::before,
.template-card__image--fallback::after {
transition: transform 0.5s ease, background-color 0.5s ease;
}
.template-card:hover .template-card__image--fallback::before,
.template-card:focus-within .template-card__image--fallback::before {
transform: scale(1.2) translate(0.75rem, -0.75rem);
background-color: rgba(255, 255, 255, 0.1);
}
.template-card:hover .template-card__image--fallback::after,
.template-card:focus-within .template-card__image--fallback::after {
transform: scale(1.3) translate(-0.5rem, 0.75rem);
background-color: rgba(255, 255, 255, 0.07);
}
}
/* The lifecycle status on its own line above the category. With no
category after it, it takes the labels row's own gap. */
.template-card__status {
display: flex;
margin-bottom: 0.5rem;
}
.template-card__status:has(+ .template-card__labels:empty) {
margin-bottom: 1.25rem;
}
/* .card__token (static/shared/css/cards.css) with the fixed status
colours My articles and Authored assessments use: Draft grey, Published
green, Archived dark grey, and In review / Approved (the two states those
don't have) Pending's yellow. The word carries the meaning; the fill only
echoes it (WCAG 1.4.1). Text contrast: 4.7:1, 10.3:1, 10.3:1, 4.5:1,
8.2:1. */
.template-card__status-token--draft {
background-color: #6c757d;
color: #fff;
}
.template-card__status-token--in_review,
.template-card__status-token--approved {
background-color: #ffc107;
color: #1d1d1f;
}
.template-card__status-token--published {
background-color: #198754;
color: #fff;
}
.template-card__status-token--archived {
background-color: #495057;
color: #fff;
}
/* Category · Subcategory. Written on one line in the template, so it's
:empty (and takes no space) without a category. */
.template-card__labels {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.template-card__labels:empty {
display: none;
}
.template-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 title with the ⋮ options button at its right end (the catalogue's
reader card, _template_card_cols.html), like the article card's title
row. */
.template-card__title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
}
.template-card__title-row .template-card__title {
flex: 1 1 auto;
min-width: 0;
}
/* Opens the card's options menu (template_card_options.js). The same
values as articles.css's .article-card__more-btn (a ghost icon button,
24px square for WCAG 2.5.8), lifted above the title's stretched link so
a click opens the menu instead of the quick-look; the top margin lines
it up with the title's first line. */
.template-card__more-btn {
position: relative;
z-index: 2;
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
margin-top: 0.25rem;
padding: 0;
border: none;
border-radius: var(--bs-border-radius-sm, 0.25rem);
background-color: transparent;
color: inherit;
}
.template-card__more-btn:hover,
.template-card__more-btn[aria-expanded="true"] {
background-color: #f1f3f5;
}
/* The menu itself, appended to and placed in page coordinates by
template_card_options.js. Same values as articles.css's
.article-card__options-menu (z-index 1080 so it also shows above a
Bootstrap modal). */
.template-card__options-menu {
position: absolute;
z-index: 1080;
min-width: 200px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 0.5rem;
}
.template-card__options-menu button {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
text-align: left;
white-space: nowrap;
background: none;
border: none;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
color: #212529;
}
.template-card__options-menu button .bi {
flex: 0 0 auto;
}
.template-card__options-menu button:hover,
.template-card__options-menu button:focus-visible {
background-color: #f1f3f5;
}
/* The whole card is the link (the title's stretched link). */
.template-card__title a {
color: var(--site-heading-color, #1d1d1f);
}
/* DocumentTemplate.summary (at most 300 characters); left out when blank.
#5c6672 is 5.8:1 on white. */
.template-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;
}
/* Time and effort, in the article card's "3 min read" spot (.card__meta
colour from cards.css). */
.template-card__facts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.875rem;
line-height: 1.5;
}
.template-card__facts:empty {
display: none;
}
/* Each fact is its icon (the clock, or the effort bars, which the
catalogue pills draw as a block) beside its words. */
.template-card__facts > span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
/* Use, Edit and Duplicate on the left, Archive / Delete on the right. */
.template-card__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
}
.template-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 1.25rem;
}
/* Text links (and text-style s in the POST forms), lifted above
the title's .stretched-link overlay, or a click on one falls through to
the card's own destination. The vertical padding keeps each target at
least 24px tall (WCAG 2.5.8). Same as assessments.css's
.assessment-card__link. */
.template-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;
}
.template-card__link:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Bootstrap's danger-text-emphasis red, 6.5:1 on white. */
.template-card__link--danger {
color: #b02a37;
}
/* A secondary option that shouldn't compete with the card's main action
(the Favorites page's "Remove from favorites", discovery/
_favorite_remove.html): the card's grey meta colour, #5c6672 (5.8:1 on
white), at normal weight and a size down. Still at least 24px tall
(0.875rem on a 1.5 line plus the base padding: about 29px, WCAG 2.5.8);
hover darkens it as well as underlining it. */
.template-card__link--quiet {
color: #5c6672;
font-size: 0.875rem;
font-weight: 400;
}
.template-card__link--quiet:hover {
color: #212529;
}
/* The catalogue card's "Use template" arrow (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. */
.template-card__arrow {
flex-shrink: 0;
margin-inline-start: 0.25rem;
transition: transform 0.2s ease;
}
.template-card__arrow-stem {
stroke-dasharray: 10;
stroke-dashoffset: 10;
transition: stroke-dashoffset 0.2s ease;
}
.template-card:hover .template-card__arrow,
.template-card:focus-within .template-card__arrow {
transform: translateX(2px);
}
.template-card:hover .template-card__arrow-stem,
.template-card:focus-within .template-card__arrow-stem {
stroke-dashoffset: 20;
}
@media (prefers-reduced-motion: reduce) {
.template-card__arrow,
.template-card__arrow-stem {
transition: none;
}
}