/* The Design System's own wrapper padding is more than these pages want —
   they carry their own spacing — but zero left the h1 touching the service
   navigation. 25px is what the live service leaves between the phase banner
   and the heading (T12). Pages that join the navigation to the hero override
   this with govuk-!-padding-0, so their flush edge is unaffected. */
.govuk-main-wrapper {
    display: block;
    padding: 25px 0 0;
}

.masthead {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 10px;
    background-color: var(--govuk-secondary-colour, #b5cd1e);
}

.masthead--combined {
    background-color: var(--govuk-brand-colour, rgb(29, 112, 184)) !important;
    border-bottom: 1px solid  var(--govuk-brand-colour, rgb(41, 131, 210));
    color: #fff !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* The white set on .masthead--combined is only inherited and loses
   to govuk classes. White has to be set on those elements themselves — including the
   description's descendants, since its text lives in child. */
.masthead--combined .hero__title,
.masthead--combined .hero__description,
.masthead--combined .hero__description * {
    color: #fff !important;
}
.govuk-width-container, .hero {
    max-width: var(--govuk-content-width, 950px);
    margin-right: 15px;
    margin-left: 15px;
}

.hero {
    margin-bottom: 0px;
    padding: 0px 0px 10px;
    font-family: "GDS Transport", arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hero {
    margin-bottom: 0;
    padding: 0 0 10px;
}

.hero__description { 
    font-family: GDS Transport, arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-size: 1.3125rem;
    line-height: 1.1904761905;
}

@media (max-width: 15rem) {
    * {
        font-size: 1rem !important;
    }
    .govuk-width-container, .hero {
        margin-left: 0.3rem;
        margin-right: 0.3rem;
    }
    .govuk-phase-banner__text {
        display: block;
        padding-top: 0.5em;
    }
    .section-cards {
        gap: 1rem !important;
        width: auto;
    }
    .section-card:not(.section-card--with-image),
    .section-card--with-image .section-card--content {
        padding: 0.5rem !important;
    }
    * {
        word-break: break-word;
    }
    .govuk-header__logotype {
        width: 90%;
        height: auto;
    }
    ul {
        padding-inline-start: 0.8rem;
    }
}


@media (min-width: 1030px) {
    .hero {
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .govuk-width-container {
        margin-right: auto !important;
        margin-left: auto !important;
    }
    @supports (margin:max(calc(0px))) {
        .govuk-width-container {
            margin-right: auto !important;
            margin-left: auto !important;
        }
    }
}

@media (max-width: 1030px) {
    .rich-text-content img {
        width: 100%;
        height: auto;
    }
}
img.full-width {
    width: 100%;
    height: auto;
}

@media (min-width: 40.0625em) {
    .hero__content {
        width: 66.6%;
    }
    .masthead {
        padding-top: 30px;
        padding-bottom: 30px;
        margin-top: 14px;
    }
    .govuk-width-container, .hero {
        margin-right: 30px;
        margin-left: 30px;
    }
    .hero__description {
        font-size: 1.5rem;
        line-height: 1.25;
    }
}

.section-card--with-image {
  padding: 0 !important;
  overflow: hidden;
}

.section-card--with-image .section-card--content {
  padding: 1.75rem;
}

.section-card--image {
  width: 100%;
  background: #f3f2f1;
}

.section-card--image img {
  display: block;
  width: 100%;
  max-height: 12rem;
  height: auto;
}

.section-card--image--cover img {
  object-fit: cover;
}

.section-card--image--contain img {
  object-fit: contain;
}

.section-cards-container {
    padding: 2em 0 0.2em 0;
    background-color: #f8f7f4;
}

main > :nth-last-child(1 of .section-cards-container) {
    padding-bottom: 2em;
}

.section-cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .section-cards { grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); } }
@media (min-width: 64rem) { .section-cards { grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); } }

.section-card {
  box-sizing: border-box;
  display: flex;          /* optional */
  flex-direction: column; /* optional */
  position: relative;
  background: white;
  padding: 1.75rem;
  border: 3px solid rgb(243, 242, 241);
}

.section-card:hover {
  border-color: var(--govuk-brand-colour, rgb(29, 112, 184));
}

.section-card:focus-within {
  border-color: var(--govuk-brand-colour, rgb(29, 112, 184));
}

.section-card__link--stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.section-card :is(a:not(.section-card__link--stretched), button, input, select, textarea, summary, [role="button"]) {
  position: relative;
  z-index: 2;
}

.govuk-header__logo--ukgov {
    width: 35px;
    height: 30px;
    fill: currentColor;
    margin-right: .4375rem;
    border-left: 0.2rem solid currentColor;
    padding-left: 0.5rem;
}

.app-site-search {
    margin-top: 12px;
    margin-bottom: 12px;
}

.app-site-search__form {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}

.app-site-search__input {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
}

.app-site-search__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    margin-left: 0;
    min-height: 40px;
    padding: 0 6px;
    white-space: nowrap;
    border: 0;
    border-left: 1px solid rgb(139, 139, 139);
    box-shadow: none;
    width: auto !important;
}

.app-site-search__button .gem-c-search__icon {
    display: block;
}

/* Free-text results turned off: no submit button. The magnifier is a
   decorative icon at the right-hand end of the input instead. It is pinned to
   the form container's right edge -- which the flex input, or the
   autocomplete's replacement input, fills -- and the input gains right padding
   so typed text clears it. pointer-events: none keeps clicks on the field. */
.app-site-search--icon .app-site-search__form {
    position: relative;
}

.app-site-search--icon .app-site-search__input {
    padding-right: 2.5rem;
}

.app-site-search__decoration {
    position: absolute;
    top: 50%;
    right: 0.625rem;
    display: block;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: #0b0c0c;
    pointer-events: none;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.tags-container .govuk-tag {
    max-width: 100%;
}

/* Search results use the same card grid as the rest of the site, which is the
   design the service ships today. */

.listing-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    align-items: flex-start;
}

.listing-filters__group {
    min-width: 220px;
}

.listing-filters__group .govuk-select {
    width: 100%;
}

.free-text-with-headings-layout .govuk-grid-column-one-third,
.free-text-with-headings-layout .govuk-grid-column-two-thirds {
    margin-top: 1.25em;
}

.free-text-heading-nav {
    padding: 0 0 0 15px;
}

.free-text-heading-nav__title {
    margin-bottom: 12px;
}

.free-text-heading-nav__list {
    margin-bottom: 0;
}

.free-text-heading-nav__item {
    margin-bottom: 8px;
}

.free-text-heading-nav__item:last-child {
    margin-bottom: 0;
}

.free-text-heading-nav__item--nested {
    padding-left: 14px;
}

.free-text-with-headings-layout .rich-text-content h2,
.free-text-with-headings-layout .rich-text-content h3,
.free-text-with-headings-layout .rich-text-content h4 {
    scroll-margin-top: 20px;
}

/* Sign in / out link sitting in the GOV.UK header rather than the service
   navigation. The header is dark blue, so the link keeps the white header ink
   rather than the navigation's dark ink. */
.app-header__sign-in {
    margin-top: 12px;
    margin-bottom: 12px;
}

.app-header__sign-in .govuk-service-navigation__link,
.app-header__sign-in .govuk-service-navigation__link:link,
.app-header__sign-in .govuk-service-navigation__link:visited {
    color: #fff;
}

@media (min-width: 48.0625em) {
    .govuk-header__container {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .app-site-search {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
    }
    .app-header__sign-in {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
    }
    /* When the search is present it already pushes right, so the sign in link
       only needs a gap after it rather than its own auto margin. */
    .app-site-search + .app-header__sign-in {
        margin-left: 15px;
    }
}

@media (min-width: 40.0625em) {
    .free-text-heading-nav {
        border-left: 4px solid var(--govuk-brand-colour, #1d70b8);
    }

    .app-service-navigation__item--featured {
        text-align: right;
        flex: 1 0 auto;
    }
}
/* Search sitting in the service navigation bar rather than the GOV.UK header.
   The header version is on a blue background and uses the inverse button; here
   the background is light, so the input and button need ordinary GOV.UK ink. */
.govuk-service-navigation .app-site-search__form {
    border: 2px solid #0b0c0c;
    background-color: #fff;
}

.govuk-service-navigation .app-site-search__input {
    background-color: #fff;
    color: #0b0c0c;
}

.govuk-service-navigation .app-site-search__button,
.govuk-service-navigation .app-site-search__button:link,
.govuk-service-navigation .app-site-search__button:visited {
    background-color: #fff;
    color: #0b0c0c;
    border-left: 0;
}

.govuk-service-navigation .app-site-search__button:hover {
    background-color: #f3f2f1;
}

.govuk-service-navigation .app-site-search__button:focus {
    background-color: #fd0;
}

/* Below 40.0625em the nav container is a flex column aligned to the start, so
   the search would otherwise shrink to its content width. Stretch it to fill
   the width, matching the header search's full-width behaviour on narrow
   screens. Above this width the row-mode rule below overrides align-self. */
.govuk-service-navigation .app-site-search {
    align-self: stretch;
}

/* Once the nav container is a flex row (40.0625em up) it aligns children to
   the top, and the search still carries the header's own top/bottom margin.
   The row height is set by the taller nav links, so centre the search and drop
   that margin. Below this width the container is a column, where the margin
   gives useful spacing between stacked items. */
@media (min-width: 40.0625em) {
    .govuk-service-navigation .app-site-search {
        align-self: center;
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (min-width: 48.0625em) {
    /* The bar holds three things on one row: the service name, the navigation
       links, then the search box against the right edge. Frontend lets the
       links wrapper grow into whatever space is left, which pushed the search
       box down onto a second row; the free space belongs to the search box.
       Only when the box is actually on the row: on a bar without it the
       wrapper must keep growing, or the featured sign-in link that aligns
       right inside it ends up at the bar's left edge. */
    .govuk-service-navigation .govuk-service-navigation__container:has(.app-site-search) .govuk-service-navigation__wrapper {
        flex-grow: 0;
    }

    /* Flex wraps on flex-basis before it shrinks, so a box asking for 20rem
       drops to a row of its own rather than taking the 18rem that are going.
       A smaller basis that grows into what is left keeps it on the row, and
       the cap stops it stretching across the bar when it does wrap. */
    .govuk-service-navigation .app-site-search {
        flex: 1 1 16rem;
        min-width: 16rem;
        max-width: 20rem;
        /* The box is shorter than the service name beside it and the bar aligns
           its contents to the top, so without these it hangs off the bar's top
           border. They also keep it clear of the bar's edges on the narrower
           widths where it still wraps to a row of its own. */
        margin-top: 7px;
        margin-bottom: 7px;
    }

    /* The search box is pushed right by `margin-left: auto`, which collapses to
       nothing once the row is full — leaving it touching "Sign in". A column
       gap holds the two apart whatever the auto margin does. */
    .govuk-service-navigation__container {
        column-gap: 20px;
    }
}

/* On a narrow screen the box has a row to itself, but the bar aligns its
   contents to the start, so it takes only the width of its content and stops
   short of the margin the rest of the page lines up with. A hair below the
   breakpoint above, because a max-width query includes the width it names and
   both would otherwise apply at exactly 48.0625em. */
@media (max-width: 48.0525em) {
    .govuk-service-navigation .app-site-search {
        width: 100%;
    }
}

/* Role page side navigation.
   The DDaT Capability Framework borrows the MoJ Frontend side navigation for
   this, but every colour in it is stock GOV.UK, so it is cheaper to keep the
   twenty lines here than to take on another design system. */
.role-nav {
    display: none;
    font-family: "GDS Transport", arial, sans-serif;
    font-weight: normal;
    /* 1rem is what the live service and the Design System's own sub-navigation
       both use for the items at desktop. Live's 14px, which an earlier version
       of this comment cited, is its mobile value below 641px, where this
       navigation is hidden altogether. */
    font-size: 1rem;
    line-height: 1.25;
}

/* Space each group from the next so the family headings read as separate
   sections rather than one run of links. The last group needs no trailing gap. */
.role-nav__group {
    margin-bottom: 20px;
}

.role-nav__group:last-child {
    margin-bottom: 0;
}

.role-nav__title {
    /* The group headings ("Architecture roles", "Data roles") are a size up
       from the items, as they are on the live service and in the Design
       System's sub-navigation: 1.1875rem against 1rem. Review round 2 (T24)
       asked for exactly this. */
    font-size: 1.1875rem;
    line-height: 1.25;
    color: #505a5f;
    font-weight: normal;
    margin: 0;
    padding: 10px 10px 10px 14px;
}

.role-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.role-nav__item {
    display: flex;
}

.role-nav__item a,
.role-nav__item a:link,
.role-nav__item a:visited {
    background-color: inherit;
    color: var(--govuk-link-colour, #1d70b8);
    display: block;
    /* Fill the row so the link -- with its background, hover and active
       states -- spans the whole width of the navigation column rather than
       just its text. */
    flex: 1 1 auto;
    box-sizing: border-box;
    text-decoration: none;
    border-left: 4px solid transparent;
    padding: 10px;
}

.role-nav__item a:hover {
    color: var(--govuk-link-hover-colour, #003078);
    border-color: #5694ca;
}

.role-nav__item a:focus {
    /* The Design System's link focus, asked for in review round 1 (T20/T24):
       yellow behind, black text, and the black line along the bottom edge
       that the yellow alone does not give. */
    outline: 3px solid transparent;
    color: #0b0c0c;
    background-color: #fd0;
    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
    border-color: #0b0c0c;
    border-left-color: #fd0;
    text-decoration: none;
    position: relative;
}

.role-nav__item--active a:link,
.role-nav__item--active a:visited {
    background-color: #f3f2f1;
    border-color: var(--govuk-link-colour, #1d70b8);
    color: var(--govuk-link-colour, #1d70b8);
    font-weight: bold;
}

.role-nav__item--active a:hover {
    color: var(--govuk-link-hover-colour, #003078);
    border-color: var(--govuk-link-hover-colour, #003078);
}

.role-nav__item--active a:focus {
    color: #0b0c0c;
    background-color: #fd0;
    /* The black bar along the bottom edge comes from the box-shadow every
       item's focus state carries. The current item also has a 4px left
       border, and painting that black too put a second black edge on the
       left (review round 2, T24.4). It sits on the yellow instead, as it
       does for every other item. */
    border-left-color: #fd0;
}

/* Welcome page role lists, which stand in for the side navigation on a narrow
   screen and are hidden once the navigation appears. */
.mobile-homepage {
    font-size: 1rem;
    margin: 20px 0 15px 0;
}

.mobile-homepage h2 {
    margin-top: 20px;
}

.mobile-homepage-roles li {
    font-size: 1rem;
    margin: 0 0 12px 0;
}

.mobile-homepage-roles a:link {
    text-decoration: underline;
}

/* Skill level definitions on the welcome page: four bars, filled up to the
   level being described. Hidden from assistive technology, which is given the
   wording instead. */
.skill-definitions__container > .progress-bar__container {
    width: 50%;
    height: 11px;
}

.skill-definitions__container > .progress-bar__container > .progress-bar__divider {
    width: 5%;
}

/* The bar is an indicator, not a measure, so it takes a share of the column
   rather than filling it. The percentages step up as the column narrows,
   which is how the framework sizes them. */
.progress-bar__container {
    display: table;
    table-layout: fixed;
    width: 50%;
    height: 10px;
    border-spacing: 10px;
    margin-top: -9px;
    margin-bottom: 10px;
}

.progress-bar__grey,
.progress-bar__white {
    display: table-cell;
    border: 1.5px solid #4f4f4f;
}

.progress-bar__grey {
    background-color: #4f4f4f;
}

.progress-bar__white {
    background-color: #efefef;
}

.progress-bar__divider {
    display: table-cell;
    width: 5%;
    background-color: #fff;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Role page contents list and changelog. */
.contents-list-links {
    text-decoration-line: none;
    list-style: none;
    padding-left: 0;
    margin-left: 5px;
    margin-bottom: 8px;
}

.contents-list-links > li {
    margin-bottom: 10px;
}

.contents-list-links.indented-list {
    margin-left: 15px;
}

.role-level-header {
    font-size: 1.2rem;
}

.publish-dates {
    margin-bottom: 4px;
}

.changelog-content {
    max-width: 38em;
}

/* "Back to top", revealed by main.js once the page has been scrolled. It stays
   hidden without JavaScript, where the browser's own controls do the job. */
#back-to-top {
    display: none;
    position: fixed;
    bottom: 30px;
    left: 15px;
    z-index: 99;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: #fff;
    color: var(--govuk-link-colour, #1d70b8);
    font-family: "GDS Transport", arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.25;
    text-decoration: underline;
    cursor: pointer;
}

#back-to-top:hover {
    color: var(--govuk-link-hover-colour, #003078);
    text-decoration-thickness: 3px;
}

#back-to-top:focus {
    background-color: #fd0;
    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
    color: #0b0c0c;
    outline: 3px solid transparent;
    text-decoration: none;
}

#back-to-top.back-to-top--visible {
    display: block;
}

#back-to-top.back-to-top--docked {
    position: absolute;
    bottom: 20px;
}

/* Below the Design System's tablet width there is no gutter beside the text,
   so a button fixed at the left edge sits on the content at every scroll
   position -- CS32-3560 reports it over the last line of a page, and measured
   at 320px it was over a line at any depth, on seven of eight pages. The live
   service answers this by hiding the button under 641px, but the ticket asks
   for both "user can read all content on page" and "user can still use the
   back to top link", so here it leaves the fixed layer instead and takes its
   place in the flow at the end of the content, as GOV.UK's own guidance pages
   do on a small screen. Nothing can then be underneath it.

   main.js still sets `bottom` on the element, which a statically positioned
   box ignores, and still only reveals it once the page has been scrolled by a
   screen -- by which point the end of the document is well below the fold, so
   nothing visible moves when it appears. */
@media (max-width: 40.0525em) {
    #back-to-top.back-to-top--visible {
        position: static;
        margin: 10px 15px 20px;
    }
}

.back-to-top__icon {
    float: left;
    width: 0.8em;
    height: 0.968em;
    margin-right: 0.3em;
}

/* The breadcrumb stands in for the side navigation once that is hidden, so it
   only shows at the widths where the navigation does not. The class is ours
   rather than a GOV.UK Frontend modifier, which ships only
   govuk-breadcrumbs--collapse-on-mobile and govuk-breadcrumbs--inverse, so it
   carries the app prefix the Design System asks bespoke classes to use. */
@media (min-width: 40.0625em) {
    .app-breadcrumbs--mobile-only {
        display: none;
    }
}

@media (max-width: 68.75em) {
    .progress-bar__container {
        width: 80%;
    }

    .skill-definitions__container > .progress-bar__container {
        width: 60%;
    }
}

@media (max-width: 48em) {
    .progress-bar__container,
    .skill-definitions__container > .progress-bar__container {
        width: 100%;
    }
}

@media (min-width: 40.0625em) {
    .role-nav {
        display: block;
        float: left;
        /* Float shrink-wraps to the widest link; the navigation should take the
           full width of its column so the links fill it. */
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-homepage {
        display: none;
    }

    .role-level-header {
        font-size: 1.7rem;
    }
}

/* A long unbroken string, such as the support email address in the welcome
   content, otherwise pushes a horizontal scrollbar onto the page at 320px,
   which fails WCAG 1.4.10 Reflow. Only a word that cannot fit is broken, so
   ordinary copy is unaffected. */
.govuk-body,
.govuk-body-l,
.govuk-body-m,
.govuk-body-s,
.govuk-heading-xl,
.govuk-heading-l,
.govuk-heading-m,
.govuk-heading-s,
.govuk-list,
.govuk-table__cell,
.govuk-link {
    overflow-wrap: break-word;
}

/* GOV.UK Frontend 6 sets .govuk-table at 19px on every screen. The live
   service runs Frontend 5, where a table drops to 16px below 40.0625em, and
   that is what lets its two-column skill tables fit a 320px screen without
   breaking a word. At 19px ours did not fit, and the hyphenation that made
   it fit split a word on most lines -- 370 of them on one role page at 320px
   (Antony, 18 September 2026, "text should reflow to keep complete words").

   Frontend 6 keeps live's sizing as an opt-in modifier, so the framework's
   tables carry govuk-table--small-text-until-tablet and the size itself is
   the Design System's: same breakpoint, same declarations, and a print
   variant we would not have thought to write. Other sites on this image are
   unaffected unless they ask for it.

   What the modifier cannot reach is left here. It sets a size on the table
   and the cells inherit it, but a .govuk-body or a .govuk-list item inside a
   cell sets its own size and so does not. This hangs off the modifier rather
   than off the framework because the gap is the modifier's, not ours: a
   table that asks for small text until tablet means the paragraphs in it
   too. */
@media (max-width: 40.0525em) {
    .govuk-table--small-text-until-tablet .govuk-body,
    .govuk-table--small-text-until-tablet li {
        font-size: 1rem;
        line-height: 1.25;
    }
}

/* A skill table is one link per row, so the rows read as a list and the
   underlines stack up into noise — which is why the live service leaves them
   off (T31.2). The column heading and the link colour carry the meaning at
   rest; hover and focus put the underline back, so a pointer or the keyboard
   still marks out what is clickable.

   Both rules set text-decoration-line rather than the text-decoration
   shorthand. The shorthand also resets text-decoration-thickness, and these
   selectors outweigh govuk-link's, so writing it that way threw away the
   Design System's thicker hover underline — max(3px, 0.1875rem, 0.12em) —
   and left a hairline where the live service has a heavy one (T31.3). The
   longhand leaves the thickness to govuk-link, which is where it belongs. */
.govuk-table a.skill-name {
    text-decoration-line: none;
}

.govuk-table a.skill-name:hover,
.govuk-table a.skill-name:focus {
    text-decoration-line: underline;
}

/* Rich text has no table feature in Wagtail, so a table reaches a content
   page as a raw HTML embed, and an editor pasting one from a document rarely
   brings the Design System's classes with it. Style a bare table to match
   govuk-table so both routes look the same (T56).

   Every rule below excludes tables that already carry govuk-table. Matching
   on the element makes these selectors heavier than the Design System's own
   single-class ones, so without the guard they would quietly outrank the
   modifiers an editor did remember to use - govuk-table__cell--numeric would
   lose its right alignment to the text-align below. */
.rich-text-content table:not(.govuk-table) {
    width: 100%;
    margin-bottom: 20px;
    border-spacing: 0;
    border-collapse: collapse;
}

.rich-text-content table:not(.govuk-table) caption {
    margin-bottom: 15px;
    font-weight: 700;
    text-align: left;
}

.rich-text-content table:not(.govuk-table) th,
.rich-text-content table:not(.govuk-table) td {
    padding: 10px 20px 10px 0;
    border-bottom: 1px solid var(--govuk-border-colour, #cecece);
    text-align: left;
    vertical-align: top;
}

.rich-text-content table:not(.govuk-table) th {
    font-weight: 700;
}

/* That guard only reaches a table carrying govuk-table. One without it whose
   cells still carry the modifiers - hand-written markup, or a paste that kept
   the classes on the cells but lost the one on the table - would hand its
   right alignment to the rule above, which the element in its selector makes
   the heavier of the two. Name the modifiers to give it back. */
.rich-text-content table:not(.govuk-table) th.govuk-table__header--numeric,
.rich-text-content table:not(.govuk-table) td.govuk-table__cell--numeric {
    text-align: right;
}

.rich-text-content table:not(.govuk-table) th:last-child,
.rich-text-content table:not(.govuk-table) td:last-child {
    padding-right: 0;
}

@media (min-width: 40.0625em) {
    .rich-text-content table:not(.govuk-table) {
        margin-bottom: 30px;
    }
}

/* Hyphenation above lowers a two-column table's intrinsic minimum enough to
   fit 320px. A table of four columns of full sentences — the contextual
   challenge levels — cannot be made to fit, and left alone it drags the whole
   document sideways, which fails WCAG 1.4.10. The criterion exempts content
   that genuinely needs two dimensions, so the table keeps its shape and
   scrolls inside this region while the page itself stops overflowing.

   The region is given tabindex="0" and a name from the table's caption where
   it is written, so a keyboard can reach and scroll it. */
.table-scroll {
    overflow-x: auto;
    max-width: 100%;
    /* Momentum scrolling on iOS, and a focus ring that is not clipped. */
    -webkit-overflow-scrolling: touch;
}

.table-scroll:focus-visible {
    outline: 3px solid var(--govuk-focus-colour, #fd0);
    outline-offset: 0;
}

/* The scrolled table should not also try to shrink to the viewport, or the
   columns collapse into unreadable slivers instead of scrolling. */
.table-scroll > table {
    min-width: 100%;
    width: auto;
}

/* The GOV.UK attachment component, for the framework's CSV downloads
   (CS32-3313). Rules follow govuk_publishing_components' gem-c-attachment so
   the card looks like the ones on GOV.UK, which is the point of the AC: a
   reader who has downloaded a spreadsheet from a department before should
   recognise this one without reading it.

   The gem is not a dependency here -- it belongs to the Rails publishing
   stack -- so the handful of rules the component needs are written out. The
   font sizes and the thumbnail geometry are the gem's, and the colours come
   from the Design System's own custom properties, which govuk-frontend 6
   defines. */
.gem-c-attachment {
    position: relative;
}

/* The thumbnail floats, so the section has to contain it or the next
   paragraph rides up alongside the spreadsheet icon. */
.gem-c-attachment::after {
    content: "";
    display: block;
    clear: both;
}

.gem-c-attachment__thumbnail {
    position: relative;
    float: left;
    width: auto;
    padding: 5px;
}

.gem-c-attachment__thumbnail-image {
    display: block;
    width: auto;
    max-width: 66px;
    height: 93px;
    background: #fff;
    box-shadow: 0 2px 2px #858686, 0 0 0 5px var(--govuk-border-colour, #cecece);
    fill: #858686;
    stroke: #858686;
}

.gem-c-attachment__details {
    padding-left: 89px;
}

@media (min-width: 40.0625em) {
    .gem-c-attachment__thumbnail-image {
        max-width: 99px;
        height: 140px;
    }

    .gem-c-attachment__details {
        padding-left: 134px;
    }
}

/* The title is a heading, so it inherits the heading font weight from the
   Design System; the gem sets it back to normal weight and sizes it between
   govuk-heading-s and govuk-heading-m. */
.gem-c-attachment__title {
    margin: 0 0 15px;
    font-size: 1.3125rem;
    font-weight: 400;
    line-height: 1.1904761905;
}

@media (min-width: 40.0625em) {
    .gem-c-attachment__title {
        font-size: 1.6875rem;
        line-height: 1.1111111111;
    }
}

.gem-c-attachment__metadata {
    margin: 0;
    color: var(--govuk-secondary-text-colour, #484949);
    font-size: 1.1875rem;
    line-height: 1.3157894737;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* "CSV" is an abbreviation with a title, so the pointer says so rather than
   underlining it as if it were a link. */
.gem-c-attachment__abbr {
    cursor: help;
    text-decoration: none;
}

/* A download title is a filename-ish phrase and can be long, so it wraps
   rather than pushing the card past the viewport at 320px. */
.gem-c-attachment__link.govuk-link {
    word-break: break-word;
}

/* "Is this page useful?" -- GOV.UK's feedback prompt, at the foot of every
   page as the live service shows it (CS32-3543). The rules are the
   component's own from govuk_publishing_components, cut down to the parts
   this markup uses, so the question, the two bordered buttons and the
   thank-you match the live page.

   The band itself runs the full width of the page, as the footer below it
   does, with the content held to the page column by the width container
   inside it. Live boxes the band to its 1100px column instead; inside our
   narrower column that left it sitting as an island on wide screens. */
.gem-c-feedback {
    background-color: #f4f8fb;
    color: #0b0c0c;
    border-top: 1px solid #b1b4b6;
    margin-top: 20px;
}

/* On live the gap above the prompt is the main wrapper's own bottom padding,
   40px at tablet and up. Ours has none (see .govuk-main-wrapper at the top of
   this file), so the same gap is carried here. */
@media (min-width: 40.0625em) {
    .gem-c-feedback {
        margin-top: 40px;
    }
}

.gem-c-feedback [hidden] {
    display: none !important;
}

.gem-c-feedback__prompt {
    outline: 0;
}

.gem-c-feedback__prompt-content {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
}

@media (min-width: 40.0625em) {
    .gem-c-feedback__prompt-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.gem-c-feedback__prompt-questions {
    text-align: left;
    padding: 20px 0;
    margin: 0;
}

@media (min-width: 40.0625em) {
    .gem-c-feedback__prompt-questions {
        margin: 0 15px;
    }
}

.gem-c-feedback__prompt-question-answer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.gem-c-feedback__prompt-question,
.gem-c-feedback__prompt-success-heading {
    font-family: "GDS Transport", arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    margin: 0;
}

@media (min-width: 40.0625em) {
    .gem-c-feedback__prompt-question,
    .gem-c-feedback__prompt-success-heading {
        font-size: 1.1875rem;
        line-height: 1.3157894737;
    }
}

.gem-c-feedback__prompt-question {
    padding-bottom: 10px;
    /* Never let the question touch the first button when the row does not
       wrap: on a 375px screen the two fit on one line with 9px to spare. */
    margin-right: 10px;
}

@media (min-width: 40.0625em) {
    .gem-c-feedback__prompt-question {
        padding-bottom: 0;
        margin-right: 20px;
    }
}

.gem-c-feedback__prompt-success:focus {
    outline: 0;
}

.gem-c-feedback__prompt-success .govuk-body-m {
    margin: 10px 0 0;
}

.gem-c-feedback__option-list {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.gem-c-feedback__option-list-item:last-child {
    margin-left: 10px;
}

@media (min-width: 48.0625em) {
    .gem-c-feedback__option-list-item:last-child {
        margin-left: 20px;
    }
}

/* The buttons are govuk-button for its focus and press behaviour, restyled
   as the component's bordered light buttons. */
.gem-c-feedback__prompt-link {
    font-family: "GDS Transport", arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25;
    background: transparent;
    color: #0b0c0c;
    box-shadow: 0 3px 0 #0b0c0c;
    border: 1px #0b0c0c solid;
    margin-bottom: 0;
    width: 100%;
    min-width: 80px;
}

@media (min-width: 48.0625em) {
    .gem-c-feedback__prompt-link {
        min-width: 100px;
    }
}

.gem-c-feedback__prompt-link:hover {
    background: #b1b4b6;
    color: #0b0c0c;
}

.gem-c-feedback__prompt-link:focus,
.gem-c-feedback__prompt-link:focus:not(:active):not(:hover) {
    background: #fd0;
    border-color: #0b0c0c;
    box-shadow: 0 5px 0 #0b0c0c;
    color: #0b0c0c;
}

.gem-c-feedback__prompt-link:active {
    color: #0b0c0c;
}

/* Suggestions under the header search box. accessible-autocomplete 3.0.1
   (MIT, Crown Copyright) is vendored as accessible-autocomplete-3.0.1.min.js
   and mounted with cssNamespace "app-site-search", so its default stylesheet
   does not apply and these rules are the whole of its styling. The look
   follows the Design System site's own search: name in link blue, kind in
   smaller grey beneath it, colours reversed on the focused or hovered option
   (CS32-3458's spec). */
.app-site-search__autocomplete {
    flex: 1 1 auto;
    min-width: 0;
}
.app-site-search__wrapper {
    position: relative;
}
.app-site-search__autocomplete .app-site-search__input {
    width: 100%;
}
.app-site-search__hint {
    display: none;
}
.app-site-search__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
    max-height: 342px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 2px solid #0b0c0c;
    border-top: 0;
    background-color: #ffffff;
    color: #0b0c0c;
    list-style: none;
    text-align: left;
}
.app-site-search__menu--hidden {
    display: none;
}
.app-site-search__option {
    display: block;
    position: relative;
    margin: 0;
    padding: 10px 15px;
    border-bottom: 1px solid #b1b4b6;
    cursor: pointer;
    font-family: "GDS Transport", arial, sans-serif;
    font-size: 1.1875rem;
    line-height: 1.3;
}
.app-site-search__option:last-child {
    border-bottom: 0;
}
/* Suggestion text is not underlined: an option in the list is understood to
   be somewhere to go, and other autocompletes leave it plain. Underlining it
   was picked up in review (CS32-3458, 11 September 2026). */
.app-site-search__option-text {
    color: #1d70b8;
}
.app-site-search__option-type {
    display: block;
    margin-top: 2px;
    color: #505a5f;
    font-size: 1rem;
}
.app-site-search__option--focused,
.app-site-search__option:hover {
    background-color: #1d70b8;
    color: #ffffff;
    outline: none;
}
.app-site-search__option--focused .app-site-search__option-text,
.app-site-search__option:hover .app-site-search__option-text,
.app-site-search__option--focused .app-site-search__option-type,
.app-site-search__option:hover .app-site-search__option-type {
    color: #ffffff;
}
.app-site-search__option--no-results {
    color: #505a5f;
    cursor: not-allowed;
}
.app-site-search__option--no-results:hover {
    background-color: transparent;
    color: #505a5f;
}
.app-site-search__status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}