.sign-out-bar {
  text-align: right;
  padding-top: 8px;
  padding-bottom: 8px;
}

.pupil-search {
  background: #f3f2f1;
  padding: 20px;
  margin-bottom: 20px;
}

.pupil-search .govuk-form-group {
  margin-bottom: 0;
}

.pupil-search__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pupil-search__row .govuk-input {
  flex: 1;
}

.pupil-search__row .govuk-button {
  margin-bottom: 0;
}

.dfe-card-container{
  .govuk-heading-m {
    color: #347CA9;
  }}

.school-details{
  border: 1px solid #b1b4b6;
  padding: 3px 12px;
  margin-bottom: 6px;
}

/* ==========================================================================
   Wiki Layout — collapsible sidebar + main content
   ========================================================================== */

.wiki-layout {
  display: flex;
  gap: 0;
  min-height: 400px;
}

.wiki-sidebar {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: width .25s ease, opacity .2s ease;
}

.wiki-sidebar--collapsed {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.wiki-main {
  flex: 1;
  min-width: 0;
  padding-left: 15px;
}

.wiki-sidebar--collapsed + .wiki-main {
  padding-left: 0;
}

/* Toolbar: toggle button + edit/view mode link */
.wiki-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.wiki-toolbar .wiki-mode-toggle {
  margin-left: auto;
  margin-bottom: 0;
  text-align: right;
}

.wiki-mode-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wiki-mode-seed-form {
  display: inline;
  margin: 0;
}

.wiki-mode-link--button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.wiki-mode-icon {
  flex-shrink: 0;
}

.wiki-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #b1b4b6;
  background: #fff;
  cursor: pointer;
  color: #505a5f;
  border-radius: 4px;
  transition: background .1s, color .1s, border-color .1s;
}

.wiki-sidebar-toggle:hover {
  background: #f3f2f1;
  color: #0b0c0c;
  border-color: #0b0c0c;
}

.wiki-sidebar-toggle:focus-visible {
  outline: 3px solid #ffdd00;
  box-shadow: 0 0 0 1px #0b0c0c;
}

.wiki-sidebar-toggle-icon {
  transition: transform .25s ease;
}

.wiki-sidebar-toggle[aria-expanded="false"] .wiki-sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   Treeview  (.tv)
   Bootstrap-style treeview with +/- circles and connector lines
   ========================================================================== */

.wiki-navigation {
  padding: 12px 16px 12px 0;
  min-height: 400px;
  border-right: 1px solid #b1b4b6;
  box-sizing: border-box;
  width: 100%;
}

.wiki-search-form {
  width: 100%;
  box-sizing: border-box;
}

.wiki-search-form .govuk-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.wiki-search-form .govuk-form-group {
  margin-bottom: 10px;
}

/* ---- List reset & tree lines -------------------------------------------- */
.tv {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 0 20px !important;
  position: relative;
}

.tv-root {
  padding-left: 0 !important;
}

/* Vertical line running down the left side of each nested list */
.tv-children {
  position: relative;
}

.tv-children::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 16px;
  width: 1px;
  background: #1d70b8;
}

/* ---- Each tree item ----------------------------------------------------- */
.tv-item {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Horizontal connector line from the vertical to the node */
.tv-children > .tv-item::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  width: 10px;
  height: 0;
  border-top: 1px solid #1d70b8;
}

/* For the last item, cut the vertical line short */
.tv-children > .tv-item-last::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -11px;
  bottom: 0;
  width: 3px;
  background: #fff;
}

/* ---- Row ---------------------------------------------------------------- */
.tv-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
  min-height: 32px;
}

/* ---- +/- Toggle icon ---------------------------------------------------- */
.tv-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-right: 6px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.tv-toggle:focus-visible {
  outline: 3px solid #ffdd00;
  border-radius: 50%;
}

/* The circle icon */
.tv-icon {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #1d70b8;
  position: relative;
}

/* Horizontal bar (always present for both + and -) */
.tv-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  right: 5px;
  height: 2px;
  margin-top: -1px;
  background: #fff;
}

/* Vertical bar (only on collapsed = plus icon) */
.tv-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  bottom: 5px;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  transition: transform .2s ease, opacity .2s ease;
}

/* When expanded, hide the vertical bar to show minus */
.tv-toggle[aria-expanded="true"] .tv-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* Connector for leaf nodes (horizontal stub line) */
.tv-connector {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-right: 6px;
}

/* ---- Collapsed children ------------------------------------------------- */
.tv-children.tv-collapsed {
  display: none;
}

/* ---- Page link ---------------------------------------------------------- */
.tv {
  font-family: "GDS Transport", arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tv-link {
  color: #1d70b8;
  text-decoration: none;
  font-family: "GDS Transport", arial, sans-serif;
  font-size: 1rem;
  line-height: 1.25;
  padding: 2px 4px;
  border-radius: 2px;
}

.tv-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tv-link:focus-visible {
  outline: 3px solid #ffdd00;
  background: #ffdd00;
  box-shadow: 0 2px 0 #0b0c0c;
  text-decoration: none;
  color: #0b0c0c;
}

/* POST nav action rendered as a link-styled button (e.g. Seed sample pages) */
.tv-link-form {
  display: inline;
  margin: 0;
}

.tv-link-button {
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

/* Parent nodes: bold */
.tv-link-parent {
  font-weight: 700;
}

/* Active page */
.tv-link-active {
  color: #0b0c0c;
  font-weight: 700;
  background: #dce9f5;
  padding: 2px 8px;
  border-radius: 3px;
}

/* ---- In-page "Edit" shortcut for CMS editors --------------------------- */

/* Small floating pencil pinned to the top-right of the viewport. Only rendered when
   the user has the CMS editor or admin role, so guests never see it. */
.cpb-inpage-edit {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #ffffff;
  color: #1d70b8;
  border: 1px solid #b1b4b6;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  font-family: "GDS Transport", arial, sans-serif;
  font-size: 14px;
  line-height: 1;
}
.cpb-inpage-edit svg { display: block; }
.cpb-inpage-edit:hover {
  background: #f2f4f7;
  color: #0b0c0c;
  border-color: #0b0c0c;
  text-decoration: none;
}
.cpb-inpage-edit:focus-visible {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
  background: #ffdd00;
  color: #0b0c0c;
}

/* ---- Page tree drag & drop --------------------------------------------- */

/* Ghost the source row while it's being dragged so the placeholder-driven layout
   is what the eye follows. pointer-events on the source row are LEFT ALONE — some
   browsers cancel the whole drag if the originating element becomes untouchable
   partway through. */
.cpb-tree-dragging {
  opacity: 0.35;
}

/* Placeholder <li>: a real slot that pushes siblings out of the way. Filled bar
   instead of an above/below line so it's unambiguous where the page will land. */
.cpb-tree-placeholder {
  list-style: none;
  transition: min-height 120ms ease-out;
}
.cpb-tree-placeholder > .tv-row {
  align-items: center;
  padding: 2px 0;
}
.cpb-tree-placeholder__slot {
  display: block;
  flex: 1;
  height: 26px;
  min-width: 60px;
  border-radius: 4px;
  background: #d6ecdb;
  border: 2px dashed #00703c;
}

/* ---- Delete button (edit mode) ------------------------------------------ */
.tv-del-form {
  display: inline-flex;
  margin: 0 0 0 8px;
  padding: 0;
}

.tv-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #aaa;
  font-size: 16px;
  line-height: 1;
  border-radius: 3px;
  opacity: 0;
  transition: opacity .15s, color .1s, background .1s;
}

.tv-row:hover .tv-del {
  opacity: 1;
}

.tv-del:hover {
  color: #d4351c;
  background: #fce5e1;
}

.tv-del:focus-visible {
  opacity: 1;
  outline: 3px solid #ffdd00;
  color: #d4351c;
}

/* ==========================================================================
   Drag & Drop
   ========================================================================== */

.tv-row.tv-dragging {
  opacity: .3;
}

.tv-row.tv-drop-into {
  background: #cce2f5;
  outline: 2px dashed #1d70b8;
  outline-offset: -2px;
  border-radius: 4px;
}

.tv-drop-line {
  height: 2px;
  background: #1d70b8;
  margin: 0;
  border-radius: 1px;
  pointer-events: none;
}

/* ---- Add page section --------------------------------------------------- */
.wiki-add-page-details {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #d5d8da;
}

/* ==========================================================================
   Wiki Content Area
   ========================================================================== */

.wiki-mode-toggle {
  margin-bottom: 20px;
  text-align: right;
}

.wiki-content h1 { font-size: 2rem; font-weight: 700; margin-bottom: 20px; }
.wiki-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 30px; margin-bottom: 15px; }
.wiki-content h3 { font-size: 1.25rem; font-weight: 700; margin-top: 20px; margin-bottom: 10px; }
.wiki-content p { margin-bottom: 15px; }
.wiki-content ul, .wiki-content ol { margin-bottom: 15px; padding-left: 20px; }
.wiki-content code { background: #f3f2f1; padding: 2px 4px; font-size: 0.9em; }
.wiki-content pre { background: #f3f2f1; padding: 15px; overflow-x: auto; margin-bottom: 15px; }
.wiki-content pre code { background: none; padding: 0; }
.wiki-content blockquote {
  border-left: 4px solid #b1b4b6;
  padding: 10px 15px;
  margin: 0 0 15px 0;
  color: #505a5f;
}
.wiki-content table { border-collapse: collapse; margin-bottom: 15px; }
.wiki-content th, .wiki-content td { border: 1px solid #b1b4b6; padding: 8px 12px; }
.wiki-content th { background: #f3f2f1; font-weight: 700; }

/* ==========================================================================
   Content Blocks — inline editable sections
   ========================================================================== */

.content-block {
  position: relative;
  padding-right: 32px;
}

.content-block__edit-link {
  position: absolute;
  top: 2px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: #505a5f;
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s ease, background-color .15s ease;
}

.content-block:hover .content-block__edit-link,
.content-block__edit-link:focus {
  opacity: 1;
}

.content-block__edit-link:hover {
  color: #1d70b8;
  background-color: #f3f2f1;
}

.content-block__edit-link:focus {
  outline: 3px solid #fd0;
  outline-offset: 0;
  color: #0b0c0c;
  background-color: #fd0;
}

.content-block__edit-icon {
  flex-shrink: 0;
}

/* ==========================================================================
   Version History — row selection + preview panel
   ========================================================================== */

.version-row--selected {
  background: #dce9f5;
}

.version-row--selected td {
  border-bottom-color: #1d70b8;
}

#version-preview-container {
  margin-top: 40px;
}

.version-preview-placeholder {
  border: 1px dashed #b1b4b6;
  border-radius: 4px;
  padding: 30px 20px;
  text-align: center;
}

.version-preview-panel {
  border: 1px solid #b1b4b6;
  border-radius: 4px;
  padding: 20px;
}

.version-preview-content {
  border-top: 1px solid #d5d8da;
  padding-top: 15px;
}

/* ==========================================================================
   GOV.UK confirm modal — destructive-action dialog (govuk-modal-dialogue)

   Structure (rendered by GovukConfirmModalTagHelper, see /docs/govuk-confirm-modal.md):

       dialog.govuk-modal-dialogue__box     — native <dialog>, opened via .showModal()
         .govuk-modal-dialogue__header      — black band + right-aligned X close
         .govuk-modal-dialogue__content     — heading + form + warning + buttons

   Dimming is provided by the dialog's ::backdrop pseudo, not a sibling element:
   .showModal() makes everything outside the dialog inert, so a sibling backdrop
   would be unclickable. Backdrop click-to-dismiss is handled in confirm-modal.js
   via `e.target === dialog` (children intercept their own clicks).

   Colour and spacing match the GDS modal-dialogue pattern (Modal.md): black 3px
   border, black header band, focus-yellow outline, 80% black backdrop.
   ========================================================================== */

/* No `display` rule — the UA defaults a <dialog> to display:none until [open]
   is set (by .showModal() / .show()), then display:block. Forcing display:block
   unconditionally renders the in-DOM modal markup on page load. */
dialog.govuk-modal-dialogue__box {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 102;
  width: 90%;
  max-width: calc(100vw - 30px);
  max-height: calc(100vh - 60px);
  margin: auto;
  padding: 0;
  overflow-y: auto;
  border: 3px solid #0b0c0c;
  background: #ffffff;
  color: #0b0c0c;
}

dialog.govuk-modal-dialogue__box:focus {
  outline: 3px solid #fd0;
}

dialog.govuk-modal-dialogue__box::backdrop {
  background-color: rgba(11, 12, 12, 0.8);
}

@media (min-width: 641px) {
  dialog.govuk-modal-dialogue__box {
    width: 66.66%;
  }
}

@media (min-width: 769px) {
  dialog.govuk-modal-dialogue__box {
    width: 640px;
  }
}

.govuk-modal-dialogue__header {
  margin-bottom: 0;
  padding: 5px 10px 3px;
  color: #ffffff;
  background-color: #0b0c0c;
  text-align: right;
}

.govuk-modal-dialogue__close {
  display: inline-block;
  width: auto;
  min-width: 44px;
  margin: 0;
  padding: 2px 8px;
  color: #ffffff;
  background-color: #0b0c0c;
  box-shadow: none !important;
  border: 0;
  font-size: 1.6875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.govuk-modal-dialogue__close:hover {
  color: #0b0c0c;
  background-color: #fd0;
}

.govuk-modal-dialogue__close:focus {
  outline: 3px solid #fd0;
  outline-offset: 0;
  color: #0b0c0c;
  background-color: #fd0;
}

.govuk-modal-dialogue__content {
  padding: 30px;
  padding-top: 30px;
  font-size: 1rem;
}

.govuk-modal-dialogue__heading {
  margin-top: 0;
  margin-bottom: 20px;
}

.govuk-modal-dialogue__description {
  margin-bottom: 20px;
}

.govuk-modal-dialogue__description:last-child,
.govuk-modal-dialogue__description > :last-child,
.govuk-modal-dialogue__content > :last-child {
  margin-bottom: 0;
}

/* The Cancel link is autofocused on .showModal() so a reflex Enter dismisses
   safely (destructive-confirm-first convention). The default GDS :focus state
   paints a yellow background, which is jarring on open before the user has
   interacted. We strip it for programmatic focus and restore the standard
   GDS focus indicator via :focus-visible — keyboard Tab to Cancel still gets
   the yellow ring; opening the modal does not. */
.govuk-modal-dialogue__content [data-confirm-cancel]:focus {
  outline: 0;
  background-color: transparent;
  color: #1d70b8;
  box-shadow: none;
  text-decoration: underline;
}

.govuk-modal-dialogue__content [data-confirm-cancel]:focus-visible {
  outline: 3px solid transparent;
  background-color: #fd0;
  color: #0b0c0c;
  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
  text-decoration: none;
}

/* Animation guard — explicit none so future @layer additions cannot accidentally
   destabilise snapshot tests. */
dialog.govuk-modal-dialogue__box,
dialog.govuk-modal-dialogue__box::backdrop {
  animation: none !important;
  transition: none !important;
}

/* Push the Sign in / Sign out cluster to the far right of the service nav row.
   Selector specificity matches govuk-frontend's own .govuk-service-navigation__item
   rule so margin-left:auto isn't overridden. */
.govuk-service-navigation__list .govuk-service-navigation__item.sign-in-nav-item {
  margin-left: auto;
  position: relative;
}

/* When the Admin link is present it sits immediately to the left of the
   sign-out cluster. Pushing the Admin item right with margin-left:auto absorbs
   the free flex space so both items end up flush to the right edge with default
   inter-item spacing between them. */
.govuk-service-navigation__list .govuk-service-navigation__item.admin-link-nav-item {
  margin-left: auto;
}
.govuk-service-navigation__list .govuk-service-navigation__item.admin-link-nav-item + .govuk-service-navigation__item.sign-in-nav-item {
  margin-left: 0;
}

/* Caret button sits inline next to the Sign in link, styled as a flat affordance
   that mirrors the link colour. Non-prod only — the markup isn't rendered in prod. */
.sign-in-nav-item__toggle {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 6px 8px;
  cursor: pointer;
  color: inherit;
  vertical-align: baseline;
  line-height: 1;
}

.sign-in-nav-item__toggle:hover .sign-in-nav-item__caret {
  color: #1d70b8;
}

.sign-in-nav-item__toggle:focus {
  outline: 3px solid #fd0;
  outline-offset: 0;
  background-color: #fd0;
  color: #0b0c0c;
}

.sign-in-nav-item__toggle[aria-expanded="true"] .sign-in-nav-item__caret {
  transform: rotate(180deg);
}

.sign-in-nav-item__caret {
  display: inline-block;
  transition: transform 120ms ease;
}

/* Dropdown panel anchored to the right edge of the sign-in cluster. */
.sign-in-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 0;
  padding: 4px 0;
  min-width: 180px;
  list-style: none;
  background: #ffffff;
  border: 1px solid #b1b4b6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.sign-in-dropdown-menu[hidden] {
  display: none;
}

.sign-in-dropdown-menu__item {
  display: block;
  padding: 8px 16px;
  color: #1d70b8;
  text-decoration: none;
  font-family: "GDS Transport", arial, sans-serif;
  font-size: 1rem;
  white-space: nowrap;
}

.sign-in-dropdown-menu__item:hover {
  background-color: #f3f2f1;
  text-decoration: underline;
}

.sign-in-dropdown-menu__item:focus {
  outline: 3px solid #fd0;
  outline-offset: 0;
  background-color: #fd0;
  color: #0b0c0c;
  text-decoration: underline;
}

/* ==========================================================================
   Admin chrome — black-banded GDS header for the /admin area
   ========================================================================== */

/* GDS Black token = #0b0c0c. The same token is already used for the modal
   header band above; keep this in lock-step so the admin chrome looks like
   the rest of the destructive / authoritative GDS surfaces. */
.admin-chrome .govuk-header {
  background-color: #0b0c0c;
  border-bottom: 0;
}

.admin-chrome .govuk-header__container {
  border-bottom-color: #ffdd00;
}

.admin-chrome .govuk-service-navigation.admin-service-navigation {
  background-color: #1d1d1d;
  border-bottom: 1px solid #0b0c0c;
}

.admin-chrome .admin-service-navigation .govuk-service-navigation__service-name .govuk-service-navigation__link {
  color: #ffffff;
  font-weight: 700;
}

.admin-chrome .admin-service-navigation .govuk-service-navigation__service-name .govuk-service-navigation__link:hover {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.1em;
}

.admin-chrome .admin-service-navigation .govuk-service-navigation__service-name .govuk-service-navigation__link:focus {
  color: #0b0c0c;
  background-color: #ffdd00;
  box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
  outline: 3px solid transparent;
  text-decoration: none;
}

.admin-chrome .admin-service-navigation .sign-in-nav-item .govuk-service-navigation__link,
.admin-chrome .admin-service-navigation .admin-link-nav-item .govuk-service-navigation__link {
  color: #ffffff;
}

.admin-chrome .admin-service-navigation .sign-in-nav-item .govuk-service-navigation__link:hover,
.admin-chrome .admin-service-navigation .admin-link-nav-item .govuk-service-navigation__link:hover {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.1em;
}

.admin-chrome .admin-service-navigation .sign-in-nav-item .govuk-service-navigation__link:focus,
.admin-chrome .admin-service-navigation .admin-link-nav-item .govuk-service-navigation__link:focus {
  color: #0b0c0c;
  background-color: #ffdd00;
  box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
  outline: 3px solid transparent;
  text-decoration: none;
}

.admin-chrome .admin-service-navigation .sign-in-nav-item__toggle {
  color: #ffffff;
}

/* ==========================================================================
   Admin landing — Coming soon list
   ========================================================================== */

.admin-nav-list__item {
  padding: 15px 0;
  border-bottom: 1px solid #b1b4b6;
}

.admin-nav-list__item:last-child {
  border-bottom: 0;
}

.admin-nav-list__tag {
  margin-left: 10px;
  vertical-align: middle;
}

.admin-nav-list__title--muted {
  color: #505a5f;
}

.admin-nav-list__description--muted {
  color: #505a5f;
}

/* Nested sub-group (e.g. Rules Engine): indented with a left rule, lighter rows. */
.admin-nav-list--nested {
  margin-top: 10px;
  padding-left: 20px;
  border-left: 4px solid #b1b4b6;
}

.admin-nav-list--nested .admin-nav-list__item {
  padding: 10px 0;
  border-bottom: 0;
}

/* ==========================================================================
   Admin two-column layout
   ========================================================================== */

.admin-layout {
  display: flex;
  gap: 24px;
  min-height: 400px;
  padding-top: 20px;
}

.admin-rail {
  flex: 0 0 280px;
  max-width: 280px;
  box-sizing: border-box;
}

.admin-main {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 640px) {
  .admin-layout { flex-direction: column; gap: 16px; }
  .admin-rail { flex: 0 0 auto; max-width: none; }
}

/* ---- Full-width collapsible-nav admin pages (Pipeline dashboard, Debug pipeline) ----
   These two pages bend the GDS max-width: the grid runs edge-to-edge so the wide boards
   and control panels get the full viewport. A chevron toggle between the rail and the
   content slides the rail away and lets the content fill the row. */
/* The GDS page template wraps every page body in a centred, max-width
   .govuk-width-container > .govuk-main-wrapper. For the two wide admin pages we break
   out of it: :has() neutralises ONLY the container/wrapper that actually contains a wide
   layout, so every other admin and public page keeps its standard GDS width. */
.govuk-width-container:has(.admin-layout--wide) {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.govuk-main-wrapper:has(.admin-layout--wide) {
  padding-left: 0;
  padding-right: 0;
}

.admin-layout--wide {
  width: 100%;
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 12px;
  box-sizing: border-box;
  align-items: stretch;
  gap: 12px;
}

.admin-nav-collapse {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #b1b4b6;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.admin-nav-collapse:hover {
  background: #f3f2f1;
}

.admin-nav-collapse:focus-visible {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
  box-shadow: 0 2px 0 #0b0c0c;
}

/* Chevron drawn with a rotated border square; points left (collapse) by default. */
.admin-nav-collapse__chevron {
  width: 8px;
  height: 8px;
  border-left: 2px solid #0b0c0c;
  border-bottom: 2px solid #0b0c0c;
  transform: rotate(45deg);
  transition: transform .15s ease;
}

/* Collapsed: hide the rail, point the chevron the other way (expand). */
.admin-layout--nav-collapsed .admin-rail {
  display: none;
}

.admin-layout--nav-collapsed .admin-nav-collapse__chevron {
  transform: rotate(-135deg);
}

/* Tighten the vertical rhythm on the two wide pages so more fits above the fold on a
   1920x1080 viewport, without reflowing the content itself. */
.admin-layout--wide .admin-main > h1 {
  margin-top: 0;
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  .admin-layout--wide { flex-direction: column; padding-left: 16px; padding-right: 16px; }
  /* Below 640px, the layout stacks and the rail follows main — a collapse toggle would be
     more nuisance than help, so hide it and force the rail visible regardless of the
     collapsed class. Applies to both wide and default admin layouts. */
  .admin-nav-collapse { display: none; }
  .admin-layout--nav-collapsed .admin-rail { display: block; }
}

/* Collapse toggle is available on every admin page (not only the wide dashboards). Give
   it a subtle background when the rail is collapsed on the default-width layout so the
   tiny button doesn't feel like it's floating alone in whitespace. */
.admin-layout:not(.admin-layout--wide) .admin-nav-collapse {
  margin-left: -12px;
}

.admin-nav-tree {
  font-family: "GDS Transport", arial, sans-serif;
}

/* The top "Administration" heading sits visually above the group/sub-group labels:
   bolder and larger than the bold parent labels (.tv-link-parent) beneath it. */
.admin-nav-tree__heading {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.2;
}

/* The "leave admin" link sits below the tree, set off by a divider. */
.admin-nav-tree__leave {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #b1b4b6;
}

.admin-nav-group + .admin-nav-group {
  border-top: 1px solid #b1b4b6;
  padding-top: 20px;
}

.admin-tile-form { margin: 0; padding: 0; display: inline; }
.admin-tile-form__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #1d70b8;
  text-decoration: underline;
  text-underline-offset: 0.1em;
  text-decoration-thickness: 1px;
}
.admin-tile-form__link:hover { text-decoration-thickness: 3px; }
.admin-tile-form__link:focus-visible {
  outline: 3px solid #ffdd00;
  background: #ffdd00;
  color: #0b0c0c;
  text-decoration: none;
  box-shadow: 0 2px 0 #0b0c0c;
}

/* ==========================================================================
   Page tree grid — action icon buttons + inline search
   ========================================================================== */

/* Icon link/button for GET actions (Edit, Versions, Add child, View) */
.app-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d70b8;
  text-decoration: none;
  padding: 3px;
  border-radius: 2px;
  margin-right: 2px;
  vertical-align: middle;
  flex-shrink: 0;
}
.app-action-icon:hover {
  color: #003078;
  background: #f3f2f1;
}
.app-action-icon:focus-visible {
  outline: 3px solid #ffdd00;
  box-shadow: 0 2px 0 #0b0c0c;
  color: #0b0c0c;
}
.app-action-icon--delete {
  color: #d4351c;
}
.app-action-icon--delete:hover {
  color: #942514;
  background: #fce5e1;
}

/* Wrapper form for POST icon actions (Move up / Move down) */
.app-action-icon-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

/* Button inside the form that renders like an icon link */
.app-action-icon-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d70b8;
  vertical-align: middle;
  border-radius: 2px;
  margin-right: 2px;
  font: inherit;
}
.app-action-icon-btn:hover {
  color: #003078;
  background: #f3f2f1;
}
.app-action-icon-btn:focus-visible {
  outline: 3px solid #ffdd00;
  box-shadow: 0 2px 0 #0b0c0c;
  color: #0b0c0c;
}

/* H1 stacked above the icon toolbar. */
.app-page-header { margin-bottom: 20px; }
.app-page-header__title { margin: 0 0 10px 0; }
.app-page-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Inline search: input + Search button + Clear link on one row */
.app-page-search-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.app-page-search-row .govuk-button {
  margin-bottom: 0;
}

/* ==========================================================================
   Rules engine configuration — landing cards
   ========================================================================== */

/* The two rules-config cards sit in half-width grid columns, so the GOV.UK
   default summary-list key column (30%) is too narrow and short labels like
   "Outcomes", "Countries" and "Last saved" wrap onto a second line. Widen the
   key column within these cards and keep each label on a single line. */
.rules-config-card__summary .govuk-summary-list__key {
  width: 40%;
  white-space: nowrap;
}

/* ==========================================================================
   Rules branch editor — condition cards
   ========================================================================== */

/* Each leaf condition is a self-contained card so a branch with several
   conditions reads as a tidy vertical stack with consistently aligned,
   label-above controls — rather than the previous single ragged flex row. */
.rules-condition {
  position: relative; /* positioning context for the top-right remove icon */
  border: 1px solid #b1b4b6;
  padding: 15px;
  margin-bottom: 15px;
  background: #ffffff;
}

/* Stack the field / operator / value controls with even vertical rhythm. */
.rules-condition__controls .govuk-form-group + .govuk-form-group {
  margin-top: 15px;
}

/* Leave room so a full-width value input never slides under the remove icon. */
.rules-condition__controls {
  padding-right: 36px;
}

/* Keep the field and operator menus to a sensible, consistent width so the
   cards line up; the long field list otherwise stretches to its widest option. */
.rules-condition__field .govuk-select,
.rules-condition__operator .govuk-select {
  max-width: 22em;
}

/* Icon-only "remove condition" control: a white cross on a GOV.UK-red circle, pinned to the
   top-right corner of the condition card. Stays a submit button (same remove transform), so the
   accessible name lives on aria-label and the SVG is decorative. */
.rules-condition__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  border-radius: 50%;
  cursor: pointer;
}

.rules-condition__remove-icon {
  display: block;
}

/* Darken the circle on hover/focus for affordance (GOV.UK warning-hover red). */
.rules-condition__remove:hover .rules-condition__remove-icon circle,
.rules-condition__remove:focus-visible .rules-condition__remove-icon circle {
  fill: #aa2a16;
}

/* GOV.UK focus style, matching the rest of the app. */
.rules-condition__remove:focus-visible {
  outline: 3px solid #ffdd00;
  box-shadow: 0 0 0 1px #0b0c0c;
}

/* One row per value in the "is one of" list editor: input beside its Remove. */
.rules-condition__value-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

/* Progressive enhancement: with JS, the field change auto-submits (admin-rules.js),
   so the manual "Update field" fallback button is hidden. GovUkFrontendJsEnabledScript()
   adds the js-enabled class to <body>. Without JS the button stays visible and works. */
body.js-enabled .rules-condition__apply {
  display: none;
}

/* ==========================================================================
   Rules lookups — icon row actions (Edit / Remove)
   ========================================================================== */

/* The actions cell lays its icon controls in a row. Each control is a link (Edit) or a submit
   button (Remove) reduced to a tooltipped icon: the accessible name lives on aria-label (and is
   row-specific, e.g. "Edit France"), the tooltip on title, and the SVG is decorative. The 32px box
   keeps a comfortable WCAG 2.2 target size around the smaller glyph. */
.rules-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rules-actions__form {
  display: inline-flex;
  margin: 0;
}

.rules-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  border-radius: 4px;
  cursor: pointer;
}

.rules-action:focus-visible {
  outline: 3px solid #ffdd00;
  box-shadow: 0 0 0 1px #0b0c0c;
}

.rules-action__icon {
  display: block;
}

/* Edit: a pencil in GOV.UK link blue, darkening to the GOV.UK link-hover blue on hover/focus. */
.rules-action--edit {
  color: #1d70b8;
}

.rules-action--edit:hover,
.rules-action--edit:focus-visible {
  color: #003078;
}

/* Remove: a white cross on a GOV.UK-red circle (matching the branch editor's remove icon),
   darkening the circle on hover/focus for affordance. */
.rules-action--remove:hover .rules-action__icon circle,
.rules-action--remove:focus-visible .rules-action__icon circle {
  fill: #aa2a16;
}

/* Move (Up/Down): directional arrow in GOV.UK link blue, darkening to the link-hover blue on
   hover/focus like Edit. :not(:disabled) so the end-of-list disabled state isn't overridden. */
.rules-action--move {
  color: #1d70b8;
}

.rules-action--move:not(:disabled):hover,
.rules-action--move:not(:disabled):focus-visible {
  color: #003078;
}

/* Disabled move control at the list ends (Up on the first branch, Down on the last): greyed and
   non-interactive, with no pointer affordance. */
.rules-action:disabled {
  color: #b1b4b6;
  cursor: default;
}

/* ==========================================================================
   Rules branch editor — collapsible groups
   ========================================================================== */

/* Box each group like a condition card so nested structure is easy to follow: a full border
   plus white background, keeping the heavier left edge as the depth-coloured spine (the
   .rules-group--shade-* rules below colour it). The group's own padding keeps a clear gap
   between this box and the condition/child-group boxes nested inside it. */
.rules-group {
  border: 1px solid #b1b4b6;
  border-left-width: 10px;
  background: #ffffff;
}

/* Header row of a group: the combinator control (or collapsed tag) on the left,
   the Collapse/Expand toggle on the right — so the toggle is always top-right of the
   group, VS-region style. */
.rules-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}

/* Put the "Match" label inline with its combinator dropdown rather than stacked. */
.rules-group__match {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Colour the whole group box by nesting depth so each group's area is clearly defined: even
   depths are a mid-grey box, odd depths a GOV.UK-blue box. (Two classes beat the single
   .govuk-inset-text selector on specificity; the base .rules-group rule supplies the widths,
   keeping the heavier left spine.) */
.rules-group--shade-a.govuk-inset-text {
  border-color: #b1b4b6; /* govuk mid-grey */
}

.rules-group--shade-b.govuk-inset-text {
  border-color: #1d70b8; /* govuk link blue (matches the admin nav links) */
}

/* Disclosure-chevron toggle, pinned top-right of the group header: a down-chevron when expanded
   (click to collapse) and a right-chevron when collapsed (click to expand). Stays a submit button
   (same collapse/expand transform); the accessible name lives on aria-label, the SVG is decorative. */
.rules-group__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid #b1b4b6;
  border-radius: 4px;
  background: #ffffff;
  color: #0b0c0c;
  cursor: pointer;
}

.rules-group__toggle:hover {
  background: #f3f2f1;
}

.rules-group__toggle:focus-visible {
  outline: 3px solid #ffdd00;
  box-shadow: 0 0 0 1px #0b0c0c;
}

.rules-group__toggle-icon {
  display: block;
}

/* The combinator label ("All of these" etc.) shown in place of the dropdown
   while the group is collapsed. */
.rules-group__combinator {
  margin: 0;
}

/* Read-only summary of a collapsed group's conditions — mirrors the outcome
   detail page's bulleted predicate description. */
.rules-group__summary {
  margin-bottom: 0;
}

/* ==========================================================================
   Rules branch editor — "Saved" toast
   ========================================================================== */

/* Live-region wrapper. Empty until a save; the toast inside is fixed-positioned so the
   wrapper itself needs no box. */
.rules-toast-region {
  position: static;
}

/* A small, non-modal confirmation shown after an async save. GOV.UK success green,
   pinned near the TOP OF THE VIEWPORT (position: fixed) so it's visible no matter how far
   the user has scrolled when they press Save. Announces "Saved" politely (role="status")
   and is removed by admin-rules.js once it has faded. */
.rules-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin: 0;
  padding: 12px 40px;
  min-width: 260px;
  text-align: center;
  background: #00703c; /* govuk-colour("green") */
  color: #ffffff;
  font-size: 1.1875rem;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Hold briefly, then fade out over the back end of a ~3s lifetime. Motion is opt-in
   so users who prefer reduced motion get a static toast that the JS timeout removes. */
@media (prefers-reduced-motion: no-preference) {
  .rules-toast {
    animation: rules-toast-fade 3s ease-in forwards;
  }
}

@keyframes rules-toast-fade {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ------------------------------------------------------------------ *
   Guidance pages — in-page contents navigation + sections
 * ------------------------------------------------------------------ */
/* The contents nav uses the canonical MoJ side-navigation component for all its
   styling — link colour, spacing, active state and keyboard focus. The only thing
   layered on here is sticky positioning, scoped to the guidance column so the
   component's default behaviour is untouched anywhere else it's used. */
/* Theme the component to the site's govuk link colour. The MoJ component reads
   var(--govuk-link-colour, …) and otherwise falls back to its own older #1a65a6,
   which is inconsistent with every other link on the page (govuk #1d70b8). */
.guidance-side-nav .moj-side-navigation {
  --govuk-link-colour: #1d70b8;
  --govuk-link-hover-colour: #003078;
}
/* Nested H3 sub-sections: indent under their parent H2 so the contents nav mirrors
   the page's heading hierarchy (H2s listed, H3s nested beneath their H2). */
.guidance-side-nav .guidance-nav__sub {
  margin-left: 8px;
  padding-left: 12px;
  border-left: 2px solid #b1b4b6;
}
@media (min-width: 40.0625em) {
  .guidance-side-nav .moj-side-navigation {
    position: sticky;
    top: 20px;
  }
}
.guidance-section {
  scroll-margin-top: 20px;
  margin-bottom: 40px;
}
.guidance-section__top { margin-top: 10px; }

/* ------------------------------------------------------------------ *
   CYPMD custom content-block components (also offered in the WYSIWYG
   style menu so editors can apply them — see EditableContent config)
 * ------------------------------------------------------------------ */

/* Blue "Published / last reviewed" callout (blue left border + light-blue fill). */
.cypmd-published {
  background: #e8f1f8;
  border-left: 5px solid #1d70b8;
  padding: 20px 20px 5px;
  margin-bottom: 30px;
}
.cypmd-published__heading {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

/* Information callout (no border) — a darker blue than the published callout,
   per the design — e.g. "the next exercise opens…". */
.cypmd-notice {
  background: #d2e2f1;
  padding: 20px 20px 5px;
  margin-bottom: 30px;
}

/* Guidance cards use the canonical dfe-card component (whole-card link, hover/focus
   states) from dfefrontend — no bespoke card CSS here. */

/* GDS "Dos and don'ts": colour-coded top rule + tick/cross icon, no background fill.
   Colour is never the only signal — the "Do"/"Do not" heading text and the icon carry
   the meaning too (WCAG 2.2 SC 1.4.1, use of colour). */
.cypmd-do,
.cypmd-dont { border-top: 4px solid; padding-top: 15px; }
.cypmd-do { border-top-color: #00703c; }
.cypmd-dont { border-top-color: #d4351c; }
.cypmd-do__title,
.cypmd-dont__title { display: flex; gap: 8px; align-items: baseline; }
.cypmd-do__icon { color: #00703c; }
.cypmd-dont__icon { color: #d4351c; }

/* The guidance-page lede sits a little tighter to the editable heading blocks. */
.guidance-section .content-block--title { margin-bottom: 5px; }
.guidance-section .content-block--title h2,
.guidance-section .content-block--title h3 { margin-bottom: 0; }

/* Landing-page search box (input + button on one row). The input runs at the section's
   natural two-thirds-ish width and the button sits with a real gap per the Figma design —
   flex `gap` beats margin-left because margins can be overridden by later rules. */
.cypmd-search { margin: 20px 0 30px; }
.cypmd-search__row { display: flex; gap: 20px; max-width: 45em; }
.cypmd-search__input { flex: 1 1 auto; margin-bottom: 0; }
.cypmd-search__button { flex: 0 0 auto; margin: 0; }

/* On narrow viewports the button's intrinsic width (padding + "Search" text) is
   large enough that flex-shrink can't leave the input more than one character
   wide, so it looks and behaves like a broken field. Stack the row instead:
   input on one line at full width, button on the line below. */
@media (max-width: 40.0625em) {
  .cypmd-search__row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cypmd-search__button {
    align-self: flex-start;
  }
}

/* Content-page breadcrumbs sit tight against the phase banner. main-wrapper padding-top is
   pinned near-zero because the govuk-frontend default reserves 40px above the breadcrumb — no
   amount of breadcrumb margin can undo a parent's padding. Uses :has() (Chrome 105+, Firefox
   121+, Safari 15.4+) so only pages that carry the .cpb-breadcrumbs marker are affected. */
main.govuk-main-wrapper:has(.cpb-breadcrumbs) { padding-top: 0 !important; }
.cpb-breadcrumbs {
    margin: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
/* Phase banner default margin-bottom is fat; tighten it right above the breadcrumb so the
   two read as one continuous strip, matching the Figma design. */
.govuk-phase-banner { margin-bottom: 0 !important; padding-bottom: 10px !important; }

/* Design has a real gap between breadcrumb and subtitle — the caption sits well down the
   page. govuk-caption-l ships with margin-top: 0 by default, so add it here. */
.cpb-subtitle { margin-top: 30px; }

/* Extra breathing room between the H1 lockup and the first body element. govuk-heading-xl's
   own margin-bottom is 48px which reads tight on this template; the Figma design has more. */
.cpb-page-h1 { margin-bottom: 60px !important; }

/* Pages that author their own H1 as a widget (KS4 split pages: caption richtext + H1 heading
   inside the right column of a top region) drop straight from the breadcrumb into the grid
   row. Give that transition enough room to breathe — otherwise the side-nav crowds the
   breadcrumb. Matches the space above the title in the Figma design. */
.cpb-breadcrumbs + .govuk-grid-row { margin-top: 30px; }

/* The caption widget is a richtext with a single govuk-caption-l inside. Its wrapping
   .govuk-body's default 20px margin-bottom pushes the following H1 too far down. When the
   only child is the caption, zero the wrapper's margin and hand a small gap to the caption
   itself so "Guidance" sits tight above the H1 (matching the design's lock-up). */
.govuk-body:has(> .govuk-caption-l:only-child) { margin-bottom: 0; }
.govuk-body > .govuk-caption-l:only-child { margin-bottom: 5px; }

/* Vertically align the caption text with the first item's text in the side nav.
   moj-side-navigation ships with padding-top: 20px, and its links carry padding-top: 10px,
   so the first link text sits 30px below the nav container's top. Pad the caption widget
   the same amount when it's the first thing in the two-thirds column of a top region, so
   both columns start their visible text on the same baseline. */
.cpb-breadcrumbs + .govuk-grid-row
  > .govuk-grid-column-two-thirds
  > .govuk-body:first-child:has(> .govuk-caption-l:only-child) {
    padding-top: 30px;
}

/* Landing-page data-check sections: visible rule directly under the heading. */
.cypmd-landing-section { margin-bottom: 40px; }
.cypmd-landing-section__rule { margin-top: 5px; margin-bottom: 20px; }
.cypmd-landing-section .content-block--title { margin-bottom: 0; }

/* Equal-height cards: make each card row a flex row so every column — and the
   dfe-card inside it — stretches to the height of the tallest card in the row,
   instead of each card sizing to its own (variable) amount of text. Also applied
   to any grid row whose direct grandchild is a dfe-card (via :has()) so
   widget-editor-authored card rows in the rendered view line up too. The :has()
   variant deliberately targets only the direct .row > .col > .dfe-card chain,
   so the editor's deeper .cpb-node > .cpb-preview wrapping is not matched and
   the toolbar chrome does not get stretched. */
.cypmd-landing-section .govuk-grid-row,
.govuk-grid-row:has(> [class*="govuk-grid-column"] > .dfe-card) {
  display: flex;
  flex-wrap: wrap;
}
.cypmd-landing-section .govuk-grid-row > [class*="govuk-grid-column"],
.govuk-grid-row:has(> [class*="govuk-grid-column"] > .dfe-card) > [class*="govuk-grid-column"] {
  display: flex;
}
.cypmd-landing-section .dfe-card,
.govuk-grid-row > [class*="govuk-grid-column"] > .dfe-card {
  width: 100%;
}

/* ---- CMS Page Tree Context Menu ----------------------------------------- */
.cms-context-menu {
  position: absolute;
  z-index: 1000;
  background: #fff;
  border: 1px solid #b1b4b6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 4px 0;
  margin: 0;
  list-style: none;
  min-width: 180px;
}
.cms-context-menu[hidden] { display: none !important; }
.cms-context-menu__item button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  color: #0b0c0c;
  white-space: nowrap;
}
.cms-context-menu__item svg {
  flex: 0 0 18px;
  color: #505a5f;
}
.cms-context-menu__item--danger svg { color: #d4351c; }
.cms-context-menu__item button:hover,
.cms-context-menu__item button:focus {
  background-color: #f3f2f1;
  outline: 3px solid #ffdd00;
  outline-offset: 0;
}
.cms-context-menu__item--danger button {
  color: #d4351c;
}

/* Rich-text widget images. Inserted via the TinyMCE image dialog as inline base64 data
   URIs — the sanitiser strips inline `style` attributes, so image sizing has to come
   from a class instead. Applied automatically to every <img> inside a rich-text widget
   so authors don't need to remember to add the class themselves. */
.govuk-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
  border: 1px solid #b1b4b6;
}
.govuk-body figure {
  margin: 1.5em 0;
}
.govuk-body figure img {
  margin: 0;
}
.govuk-body figcaption,
.govuk-body figure em {
  color: #505a5f;
  font-size: 1rem;
}

/* Back-to-top link, GDS design-guidance pattern (design-system.service.gov.uk). Sticky
   positioning tracks the viewport bottom while the container is in its parent flow and
   RELEASES at the natural end of the parent (so it stops just above the footer instead
   of overlapping it). The link renders as an opaque white pill on every viewport — the
   original vanilla-GDS chromeless treatment assumed the link sat in an empty gutter,
   which turned out not to be true on layouts with a left sidebar (wiki pages, admin
   pages) or on any narrow viewport. Pill everywhere means the button reads as a button
   and the text underneath doesn't bleed through, regardless of what's behind it.

   Reveal-on-scroll is done by a tiny JS enhancement (back-to-top.js): once the module
   has run, it flips data-back-to-top-init on <html>, which activates the hidden-by-
   default state below. Until the reader scrolls past ~100 px, the link is opacity: 0 +
   visibility: hidden. Past that threshold the module adds .is-visible on the container
   and CSS transitions it in. Without JS neither the marker nor the .is-visible class
   is ever set, so the link stays visible as a graceful accessibility fallback. */
.app-back-to-top {
  position: sticky;
  bottom: 50px;
  margin: 30px 0 0;
  z-index: 20;
  pointer-events: auto;
}
.app-back-to-top__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Opaque pill so the link stays readable when its sticky container is over article
     body, sidebar navigation, or dense admin content. See the section header for the
     rationale. Border matches the GDS default link colour so the pill reads as an
     actionable control, not chrome. */
  background: #ffffff;
  padding: 8px 15px;
  border: 1px solid #b1b4b6;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(11, 12, 12, 0.15);
}
.app-back-to-top__icon {
  flex: 0 0 auto;
}

[data-back-to-top-init="true"] .app-back-to-top {
  opacity: 0;
  visibility: hidden;
  /* Collapse layout while hidden so the 30px margin-top doesn't leave a phantom gap
     above the footer on short pages where sticky positioning never engages.
     Careful: position: sticky (on the base class above) is only well-defined for a
     non-zero-height element. Here sticky never engages while the container is
     collapsed, because scroll-past-the-fold immediately flips .is-visible which
     restores height: auto. If a future edit changes .is-visible to a transform or
     opacity-only reveal without restoring height, Safari's sticky layout invariants
     may keep sticky disengaged — restore the height in that path first. */
  margin: 0;
  height: 0;
  overflow: hidden;
  /* Fade-out: hold visibility on until after the opacity animation completes so the link
     doesn't pop out of the tab order mid-fade. */
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}
[data-back-to-top-init="true"] .app-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  /* Restore the natural spacing when the link is revealed. */
  margin: 30px 0 0;
  height: auto;
  /* Fade-in: flip visibility on immediately so the fade shows from the start. */
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
}

/* Respect the user's motion preference — instant reveal, no fade. */
@media (prefers-reduced-motion: reduce) {
  [data-back-to-top-init="true"] .app-back-to-top,
  [data-back-to-top-init="true"] .app-back-to-top.is-visible {
    transition: none;
  }
}

/* Mobile-only right-align. On tablet+ the link's natural inline-flex position sits
   flush left inside its full-width block container, matching the GDS example and
   the DfE service patterns. On mobile the article body is the whole viewport and
   prose paragraphs typically wrap short of the right edge — a right-aligned pill
   there obscures less of the body copy than a bottom-left one would. */
@media (max-width: 40.0625em) {
  .app-back-to-top {
    text-align: right;
  }
}

/* Admin surfaces always right-align the pill inside the main content column.
   The admin layout is a flex row (admin-rail | admin-main), so a left-aligned
   pill inside .admin-main visually sits in the MIDDLE of the page — right at
   the seam between the nav rail and the content column. Right-aligning inside
   .admin-main puts the pill flush to the right edge of the content column,
   which reads as a corner rather than a mid-page floater. Stays stable
   regardless of whether the admin-nav-collapse button is expanded or collapsed. */
.admin-main .app-back-to-top {
  text-align: right;
}

@media print {
  .app-back-to-top {
    display: none;
  }
}