/* The SDS Manager look: every CMS admin screen, white and dark.
 * ===========================================================================
 *
 * Build 121, Shafiq's decision of 4 Nov 2026, replacing D43 (build 107: "our screens only"). The approved design is
 * Shafiq's canvas "SDS Manager CMS admin theme", the page editor in light and dark; its values are written below
 * exactly. Dark mode is Stride's colours (the company's internal tool).
 *
 * HOW IT WORKS
 *
 * Wagtail puts the person's theme on <html> (w-theme-light, w-theme-dark, or w-theme-system, which follows the
 * computer), and every Wagtail screen reads its colours from custom properties there. So:
 *
 *   1. the palette is ten --sds-* properties, set for light on :root and for dark on .w-theme-dark (and on
 *      .w-theme-system when the computer is dark);
 *   2. Wagtail's own semantic tokens (--w-color-surface-*, -text-*, -border-*, -icon-*, -focus) read the palette;
 *   3. Wagtail's colour ramps (greys, primary, secondary) take the palette's hues, for the components that read a
 *      ramp step directly rather than a semantic token.
 *
 * Variables, not component classes, so a Wagtail upgrade keeps working. The few rules that need a Wagtail class
 * (the raised panel, the logo box, radii and touch targets, where no token exists) are marked INTERNAL and listed in
 * PR_NOTES.md. The "Dark mode" switch only changes Wagtail's class on <html> (theme-toggle.js), so every colour
 * here and the logo follow it at once.
 *
 * Contrast is tested: tests_build121.ThePaletteContrastTest checks every text and background pair below.
 * Off: CONTENTAGENT_ADMIN_THEME or CONTENTAGENT_SIDEBAR_THEME (both on by default) loads none of this.
 */

/* --- Inter, the brand's type (brand/, SIL Open Font License, fonts/Inter-LICENSE.txt) --------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- 1. the palette, light ------------------------------------------------------------------------------- */
:root {
  --sds-page: #f3f4f7; /* page background and sidebar */
  --sds-panel: #ffffff; /* main panel, cards, header */
  --sds-field: #f9fafc; /* fields */
  --sds-hover: #f3f4f7;
  --sds-line: #e3e6ee; /* lines and borders */
  --sds-text: #141b34;
  --sds-text-2: #5b6275; /* secondary text */
  --sds-text-3: #5b6275; /* tertiary text: light mode has two levels */
  --sds-link: #4f5ae0;
  --sds-link-hover: #2e37a8;
  --sds-accent: #5b67e8; /* tab underline, selected, focus */
  --sds-button: #5b67e8; /* white text, 4.62:1 */
  --sds-button-hover: #4f5ae0;
  --sds-selected-bg: rgba(110, 123, 242, 0.14);
  --sds-selected-fg: #2e37a8;
  --sds-draft-bg: #fff4d6;
  --sds-draft-fg: #6b4e00;
  --sds-agent-bg: #eef0ff;
  --sds-agent-fg: #2e37a8;
  --sds-positive-bg: #e3f6ec;
  --sds-positive-fg: #14663f;
  /* Build 122. The edge of a field, select, textarea, checkbox or radio: at least 3:1 against the panel (3.44:1 on
     white, 3.13:1 on the page), WCAG's rule for the edges of form controls. */
  --sds-field-edge: #848a9c;
  /* An error or a destructive note's tint (Wagtail's critical boxes, Evan's error note). */
  --sds-critical-bg: #fdecec;
  --sds-critical-fg: #b42318;
  /* Marked words (Evan's highlighted anchors): the accent 30% on the panel. */
  --sds-mark-bg: #cdd1f8;
  /* Build 124: a black-on-white picture someone else draws (CKEditor's icons and lists), left as it is in light. */
  --sds-invert: none;
  /* The brand: the logo's periwinkle and amber, for marks, never for text. */
  --sds-periwinkle: #626df9;
  --sds-amber: #ffc93c;
  --sds-radius-panel: 12px;
  --sds-radius: 10px;
  --sds-gap: 8px;
  --sds-target: 2.5rem; /* 40px */
  /* Build 122: the logo's width in the expanded sidebar; the login screen shows it 1.2 times as wide (144px). */
  --sds-logo-width: 120px;
  /* Build 122: one spacing scale for the gaps between a screen's header, filters, table and footer. */
  --sds-space-1: 4px;
  --sds-space-2: 8px;
  --sds-space-3: 12px;
  --sds-space-4: 16px;
  --sds-space-5: 24px;
  --sds-space-6: 32px;
}

/* --- the palette, dark: Stride's colours ------------------------------------------------------------------- */
.w-theme-dark {
  --sds-page: #101215;
  --sds-panel: #17181b;
  --sds-field: #1b1c1f; /* fields and hover */
  --sds-hover: #1b1c1f;
  --sds-line: #26292e;
  --sds-text: #e4e4e4;
  --sds-text-2: #9d9d9d;
  --sds-text-3: #bcbcbc;
  --sds-link: #8a93ff;
  --sds-link-hover: #c3c8fa;
  --sds-accent: #6e7bf2;
  --sds-button: #5b67e8;
  --sds-button-hover: #4f5ae0;
  --sds-selected-bg: rgba(110, 123, 242, 0.18);
  --sds-selected-fg: #e4e4e4;
  --sds-draft-bg: rgba(236, 132, 67, 0.16);
  --sds-draft-fg: #ec8443;
  --sds-agent-bg: rgba(110, 123, 242, 0.18);
  --sds-agent-fg: #c3c8fa;
  --sds-positive-bg: rgba(75, 196, 148, 0.15);
  --sds-positive-fg: #4bc494;
  --sds-field-edge: #666b7a;
  --sds-critical-bg: rgba(229, 72, 77, 0.16);
  --sds-critical-fg: #ff8f8a;
  --sds-mark-bg: #313665;
  --sds-invert: invert(0.91) hue-rotate(180deg); /* white to 9% (the panel), black to 91% (the text); hues kept */
}

@media (prefers-color-scheme: dark) {
  .w-theme-system {
    --sds-page: #101215;
    --sds-panel: #17181b;
    --sds-field: #1b1c1f;
    --sds-hover: #1b1c1f;
    --sds-line: #26292e;
    --sds-text: #e4e4e4;
    --sds-text-2: #9d9d9d;
    --sds-text-3: #bcbcbc;
    --sds-link: #8a93ff;
    --sds-link-hover: #c3c8fa;
    --sds-accent: #6e7bf2;
    --sds-button: #5b67e8;
    --sds-button-hover: #4f5ae0;
    --sds-selected-bg: rgba(110, 123, 242, 0.18);
    --sds-selected-fg: #e4e4e4;
    --sds-draft-bg: rgba(236, 132, 67, 0.16);
    --sds-draft-fg: #ec8443;
    --sds-agent-bg: rgba(110, 123, 242, 0.18);
    --sds-agent-fg: #c3c8fa;
    --sds-positive-bg: rgba(75, 196, 148, 0.15);
    --sds-positive-fg: #4bc494;
    --sds-field-edge: #666b7a;
    --sds-critical-bg: rgba(229, 72, 77, 0.16);
    --sds-critical-fg: #ff8f8a;
    --sds-mark-bg: #313665;
    --sds-invert: invert(0.91) hue-rotate(180deg);
  }
}

/* --- 2. Wagtail's semantic tokens read the palette -------------------------------------------------------------
 * One block for both modes: each token names a palette property, and the palette is what the theme class changes.
 * :root and Wagtail's .w-theme-dark have the same specificity, and this file loads after Wagtail's, so these win in
 * both. Wagtail's more-contrast tokens are left alone, so Account → Preferences → Contrast still works. */
:root {
  --w-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --w-color-surface-page: var(--sds-panel);
  --w-color-surface-header: var(--sds-panel);
  --w-color-surface-dashboard-panel: var(--sds-panel);
  --w-color-surface-field: var(--sds-field);
  --w-color-surface-field-inactive: var(--sds-hover);
  --w-color-surface-menus: var(--sds-page);
  --w-color-surface-menu-item-active: var(--sds-selected-bg);
  --w-color-surface-button-default: var(--sds-button);
  --w-color-surface-button-hover: var(--sds-button-hover);
  --w-color-surface-button-outline-hover: var(--sds-selected-bg);
  /* Build 123: a red outline button (.button.no, .serious) on hover: the critical pair, 6.2:1 light, not Wagtail's
     ramp steps (4.17:1: "Stop this run…" opened). */
  --w-color-surface-button-critical-hover: var(--sds-critical-bg);
  --w-color-text-button-critical-outline-hover: var(--sds-critical-fg);
  --w-color-surface-status-label: var(--sds-agent-bg);
  --w-color-surface-tooltip: var(--sds-text);
  --w-color-text-context: var(--sds-text);
  --w-color-text-label: var(--sds-text);
  --w-color-text-meta: var(--sds-text-2);
  --w-color-text-placeholder: var(--sds-text-2);
  --w-color-text-label-menus-default: var(--sds-text-2);
  --w-color-text-label-menus-active: var(--sds-selected-fg);
  --w-color-text-link-default: var(--sds-link);
  --w-color-text-link-hover: var(--sds-link-hover);
  --w-color-text-link-info: var(--sds-link);
  /* Build 122: Wagtail's info panel ("Wagtail upgrade available", a workflow's status) is the indigo tint in both
     modes, never Wagtail's teal; its links are the palette's links (4.79:1 light, 5.15:1 dark). */
  --w-color-surface-info-panel: var(--sds-agent-bg);
  --w-color-text-button: #ffffff;
  --w-color-text-button-outline-default: var(--sds-link);
  --w-color-text-button-outline-hover: var(--sds-link-hover);
  --w-color-text-highlight: var(--sds-link);
  --w-color-text-status-label: var(--sds-agent-fg);
  --w-color-icon-primary: var(--sds-text-2);
  --w-color-icon-primary-hover: var(--sds-text);
  --w-color-icon-secondary: var(--sds-text-2);
  --w-color-icon-secondary-hover: var(--sds-text);
  --w-color-border-furniture: var(--sds-line);
  --w-color-border-field-default: var(--sds-field-edge);
  --w-color-border-field-inactive: var(--sds-line);
  --w-color-border-field-hover: var(--sds-text-2);
  --w-color-border-button-outline-default: var(--sds-link);
  --w-color-border-button-outline-hover: var(--sds-link-hover);
  --w-color-border-button-small-outline-default: var(--sds-line);
  --w-color-focus: var(--sds-accent);

  /* --- 3. the ramps take the palette's hues ----------------------------------------------------------------
   * Wagtail's nine greys keep their lightness (so every ratio Wagtail measured holds) and take the palette's cool
   * blue-grey: hue 225, saturation 10%, between the light page #F3F4F7 and Stride's #17181B. */
  --w-color-grey-50-hue: 225;
  --w-color-grey-50-saturation: 10%;
  --w-color-grey-100-hue: 225;
  --w-color-grey-100-saturation: 10%;
  --w-color-grey-150-hue: 225;
  --w-color-grey-150-saturation: 10%;
  --w-color-grey-200-hue: 225;
  --w-color-grey-200-saturation: 10%;
  --w-color-grey-400-hue: 225;
  --w-color-grey-400-saturation: 10%;
  --w-color-grey-500-hue: 225;
  --w-color-grey-500-saturation: 10%;
  --w-color-grey-600-hue: 225;
  --w-color-grey-600-saturation: 10%;
  --w-color-grey-700-hue: 225;
  --w-color-grey-700-saturation: 10%;
  --w-color-grey-800-hue: 225;
  --w-color-grey-800-saturation: 10%;
  /* secondary (Wagtail's buttons and links): the primary button, hsl(235 75% 63%) = #5B67E8. */
  --w-color-secondary-hue: 235;
  --w-color-secondary-saturation: 75%;
  --w-color-secondary-lightness: 63%;
  /* info (Wagtail's messages, "…is ready for review"): the selected-text indigo, hsl(235 57% 42%) = #2E37A8, white
     text 8.4:1, in place of Wagtail's teal. */
  --w-color-info-100-hue: 235;
  --w-color-info-100-saturation: 57%;
  --w-color-info-100-lightness: 42%;
  /* primary (Wagtail's labels and the old sidebar): the text navy, hsl(227 44% 14%) = #141B34. */
  --w-color-primary-hue: 227;
  --w-color-primary-saturation: 44%;
  --w-color-primary-lightness: 14%;
}

/* The error red, kept from build 104 at 46% lightness: red text on white 5.5:1, white on red (Wagtail's error banners,
   buttons and badges) 5.6:1. One value for both modes: Wagtail's dark error text is critical-100, derived 15.5% lighter
   (5.8:1 on Stride's panel). Build 104's dark 65% is gone: on every screen it would put white text on a light red. */
:root {
  --w-color-critical-200-hue: 5;
  --w-color-critical-200-saturation: 66%;
  --w-color-critical-200-lightness: 46%;
}

/* In dark, a tooltip is the light text on the page, as Stride draws it. */
.w-theme-dark {
  --w-color-surface-tooltip: var(--sds-line);
}

@media (prefers-color-scheme: dark) {
  .w-theme-system {
    --w-color-surface-tooltip: var(--sds-line);
  }
}

/* --- the layout: the sidebar on the page, the main area a raised panel -------------------------------------- */
html {
  background-color: var(--sds-page);
}

body {
  background-color: var(--sds-page);
}

/* INTERNAL: .content-wrapper is Wagtail's <main id="main">, the scrolling main area. An 8px gap, a 1px border and
   12px corners; it keeps its own scrolling, so sticky headers inside it still stick. */
.content-wrapper {
  box-sizing: border-box;
  margin: var(--sds-gap);
  width: calc(100% - 2 * var(--sds-gap));
  height: calc(100% - 2 * var(--sds-gap));
  border: 1px solid var(--sds-line);
  border-radius: var(--sds-radius-panel);
  background-color: var(--sds-panel);
}

/* Build 122: below 800px (Wagtail's phone and tablet layout, the sidebar behind its menu button) the main area is
   the whole screen: the gap and the frame cost 18px a phone's tables need (page titles wrapped a word a line). */
@media (max-width: 49.9375em) {
  .content-wrapper {
    margin: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
}

/* 10px corners on fields and buttons, and touch targets of at least 40px (the approved design). INTERNAL: .button
   is Wagtail's button class; fields are read by element. A small button (.button-small) keeps its size. */
#main :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea),
#main .Draftail-Editor {
  border-radius: var(--sds-radius);
}

.button {
  border-radius: var(--sds-radius);
}

.button:not(.button-small, .button--icon) {
  min-height: var(--sds-target);
  line-height: calc(var(--sds-target) - 2px);
}

/* The focus ring: Wagtail draws it from --w-color-focus (the accent above) in both modes. */

/* --- the logo (contentagent/_brand.html) --------------------------------------------------------------------- *
 * Both files are in the markup; the one that matches the mode on screen shows. Collapsed, the box shrinks to a
 * square and shows the left third of the same file: the symbol (both files are 3:1 with the symbol at the left). */
.ca-brand {
  display: block;
  /* Build 122: the padding scaled with the logo (150px → 120px, 0.8), so it does not float in empty space. */
  padding: 0.75rem 0.6rem 0.4rem;
}

.ca-logo {
  display: block;
  width: var(--sds-logo-width);
  max-width: 100%;
  height: auto;
}

.ca-logo--negative {
  display: none;
}

.w-theme-dark .ca-logo--positive {
  display: none;
}

.w-theme-dark .ca-logo--negative {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .w-theme-system .ca-logo--positive {
    display: none;
  }

  .w-theme-system .ca-logo--negative {
    display: block;
  }
}

/* INTERNAL: Wagtail's sidebar classes when it is collapsed (slim). */
.sidebar--slim .ca-brand {
  padding: 0.9rem 0 0.5rem;
}

.sidebar--slim .ca-logo {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  object-fit: cover;
  object-position: left center;
}

/* The login screen: the logo centred. INTERNAL: Wagtail's .login-logo is an 8rem (128px) box, which held build 121's
   logo to 104px whatever its width said; ours sizes itself, so the logo is the 144px set below. */
.login-logo.ca-login-logo {
  width: auto;
  max-width: 100%;
}

.ca-login-logo .ca-brand {
  display: flex;
  justify-content: center;
}

.ca-login-logo .ca-logo {
  width: calc(var(--sds-logo-width) * 1.2); /* 144px */
}

/* The switch's quiet message when a save fails (theme-toggle.js). */
.ca-theme-status:not(:empty) {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  z-index: 100;
  max-width: 22rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--sds-line);
  border-radius: var(--sds-radius);
  background: var(--sds-panel);
  color: var(--sds-text-2);
  font-size: 0.8125rem;
}

/* ===========================================================================================================
 * Build 122: Wagtail's own screens, opened, at every width (Shafiq's findings of 5 Nov and the screen check).
 * =========================================================================================================== */

/* --- floating panels are solid ----------------------------------------------------------------------------------
 * Wagtail paints the sidebar's submenu panel and the page explorer (Pages) with --w-color-surface-menu-item-active,
 * which this palette keeps translucent so a selected row is a tint of whatever it sits on. A full-height panel in
 * that colour showed the dashboard through it ("Content Categories" printed over "34 unpublished drafts"). The
 * token stays translucent for rows; the panels get the raised panel's colour, framed by the line. INTERNAL: Wagtail
 * 6.3's .sidebar-sub-menu-panel, .c-page-explorer and .c-page-explorer__header (no token of their own). */
.sidebar-sub-menu-panel,
.c-page-explorer,
.c-page-explorer__header {
  background-color: var(--sds-panel);
}

.sidebar-sub-menu-panel,
.c-page-explorer {
  border-inline-end: 1px solid var(--sds-line);
  box-shadow: 6px 0 24px rgb(20 27 52 / 0.12);
}

/* --- the page title stays bare ----------------------------------------------------------------------------------
 * Wagtail draws the editor's big title with no box: its field colour is the page's. Ours is a step off the panel, so
 * the title got a filled, rounded box; it takes the panel's colour and Wagtail's own 5px corners (the outline it
 * shows on hover and focus is Wagtail's). INTERNAL: Wagtail 6.3's .w-panel.title, the editor's first panels. */
#main .w-panel.title:nth-child(-n + 2) :is(input, textarea) {
  background-color: transparent;
  border-radius: 5px;
}

/* --- Wagtail's info, warning and critical boxes take the palette's tints -------------------------------------------
 * Their backgrounds are ramp steps (info-50, warning-50, critical-50) and their text a fixed dark grey, so in dark
 * mode they were light boxes with dark text on the dark panel (Pages → Root's "The root level is where…"). The same
 * tints as the content agent's badges, in both modes. INTERNAL: Wagtail 6.3's .help-info/.help-warning/
 * .help-critical (help blocks), .w-dialog__message--* (messages in a dialog), .comment__notice,
 * .w-a11y-result__row__notice. */
.help-block.help-info,
.help-info,
.w-dialog__message--info {
  background-color: var(--sds-agent-bg);
  color: var(--sds-text);
}

.help-block.help-warning,
.help-warning,
.w-dialog__message--warning,
.comment__notice,
.w-a11y-result__row__notice {
  background-color: var(--sds-draft-bg);
  color: var(--sds-text);
}

.help-block.help-critical,
.help-critical,
.w-dialog__message--critical {
  background-color: var(--sds-critical-bg);
  color: var(--sds-text);
}

.w-dialog__message--success {
  background-color: var(--sds-positive-bg);
  color: var(--sds-text);
}

.help-block :is(a, a:visited) {
  color: var(--sds-link);
}

.help-info .icon,
.w-dialog__message--info .icon {
  color: var(--sds-link);
}

.help-warning .icon,
.w-dialog__message--warning .icon {
  color: var(--sds-draft-fg);
}

.help-critical .icon,
.w-dialog__message--critical .icon {
  color: var(--sds-critical-fg);
}

.w-dialog__message--success .icon {
  color: var(--sds-positive-fg);
}

/* --- checkboxes and radios: a 3:1 edge (the field-edge token above), and checked in the accent --------------------
 * Wagtail draws them appearance: none, filled with the field colour and edged with --w-color-border-field-default;
 * in dark mode that was a dark square on dark. Checked, a checkbox fills with the accent and its check is white; a
 * radio keeps its fill and takes the accent's ring and dot. Wagtail's switches (.switch) draw their own. */
input[type="checkbox"]:checked:not(:disabled, .switch input, .w-switch input) {
  background-color: var(--sds-button);
  border-color: var(--sds-button);
}

input[type="checkbox"]:checked:not(:disabled, .switch input, .w-switch input)::before {
  background: #ffffff;
}

input[type="radio"]:checked:not(:disabled) {
  border-color: var(--sds-accent);
}

input[type="radio"]:checked:not(:disabled)::before {
  background: var(--sds-accent);
}

/* --- ModelAdmin listings: the filters beside the results, never over them ------------------------------------------
 * /admin/article/… and /admin/sds_cms/… (wagtail_modeladmin). It floats .changelist-filter (col3) right beside the
 * results (col9) in percentages, so a table with more columns than fit ran under the Filter column (Content Library
 * Post: Status and Score), the columns were crushed (Webinars: a 68px Title, one-letter row buttons), and Content
 * Library's own bulk bar was squeezed to 0px between the floats and printed over the filters. Here the row is a
 * grid: the results, and whatever comes with them, in the first column; the filters in a column of their own with
 * a solid background; a table too wide for its column scrolls sideways inside it, with no text column under about
 * 120px. Below 800px (where modeladmin stops floating) everything stacks, as Wagtail has it. INTERNAL:
 * wagtail_modeladmin's .modeladmin, .changelist-filter, .result-list, .pagination and the legacy .col3/.col9. */
@media (min-width: 50em) {
  .modeladmin .main-content > .row:has(> .changelist-filter) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
    grid-template-rows: auto 1fr;
    column-gap: var(--sds-space-5);
    align-items: start;
  }

  .modeladmin .main-content > .row > .changelist-filter {
    grid-column: 2;
    grid-row: 1 / span 2;
    float: none;
    width: auto;
    padding: 0 var(--sds-space-5) var(--sds-space-5) 0;
  }

  .modeladmin .main-content > .row:has(> .changelist-filter) > :not(.changelist-filter) {
    grid-column: 1;
    min-width: 0;
  }
}

.modeladmin .changelist-filter {
  background-color: var(--sds-panel);
}

.modeladmin .result-list,
.modeladmin .pagination {
  float: none;
  width: auto;
}

.modeladmin .result-list {
  /* Wagtail leaves it display: inline without filters, where overflow does nothing and a wide table ran past the
     main area (Panelist applications: 889px in 806). */
  display: block;
  min-width: 0;
  overflow-x: auto;
}

/* Build 123: Wagtail pulls the table up under the pagination with a negative bottom margin (-2.4em); in this scroll box
   that margin cut the table's last 39px off (Panelist applications' only row vanished at 1,920). */
.modeladmin .result-list > table.listing {
  margin-bottom: 0;
}

/* Build 123: in the scrolling result list a cell breaks a word only when the word alone is wider than the column
   (Wagtail breaks anywhere, and its .title cells break-word), so a column keeps its longest word and the list scrolls. */
.modeladmin .result-list table.listing > tbody > tr > td {
  overflow-wrap: break-word;
  word-break: normal;
}

/* :where() keeps these below a listing's own minimums (Content Library's template sets wider ones). */
.modeladmin .result-list :where(table.listing :is(th, td):not(:has(input[type="checkbox"]))) {
  min-width: 10rem; /* build 123: 7.5rem left a job title a word a line, and the last column (Wagtail pads it) 57px */
}

.modeladmin .result-list :where(table.listing :is(th.column-title, td.field-title)) {
  min-width: 12rem;
}

/* The row buttons (Edit, Copy, Unpublish, Delete) wrap as whole buttons, never a letter a line, and only the row's
   first action is filled: the others are outlined (Delete keeps Wagtail's red outline). */
.modeladmin .listing ul.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sds-space-1);
  padding: 0;
}

.modeladmin .listing ul.actions li {
  margin: 0;
}

.modeladmin .listing ul.actions .button {
  white-space: nowrap;
}

.modeladmin .listing ul.actions .button:not(.button-secondary, .no) {
  background-color: transparent;
  border: 1px solid var(--w-color-border-button-outline-default);
  color: var(--w-color-text-button-outline-default);
}

.modeladmin .listing ul.actions .button:not(.button-secondary, .no):hover {
  background-color: var(--w-color-surface-button-outline-hover);
  color: var(--w-color-text-button-outline-hover);
}

/* Content Library's bulk bar ("Select all on this page", "Delete selected", article/templates/…/contentlibrarypost/
   _results.html) sits above its table, not beside it. */
.modeladmin form:has(> .cl-bulk-actions) {
  display: flex;
  flex-direction: column;
}

.modeladmin form:has(> .cl-bulk-actions) > .cl-bulk-actions {
  order: -1;
  margin-block-end: var(--sds-space-3);
}

/* Its note ("Applies only to items ticked on this page…") is the article app's 0.85em (11.6px); 13px at the least. */
.modeladmin .cl-bulk-actions__note {
  font-size: 0.8125rem;
}

/* --- Evan's link suggestions panel follows the mode (D153: we change it, not Evan) ---------------------------------
 * wagtail_link_suggestions/static/wagtail_link_suggestions/panel.css draws a few things in fixed colours, which
 * stayed light boxes in dark mode, and its "Ranked high" badge read 4.15:1 in light. Each override names his file's
 * line, so a later change of his is easy to spot; none of his files is touched. :root raises each one above his
 * rule whichever stylesheet loads last. */
:root .seohub__note {
  /* panel.css line 10: #faecd5 / #262626 */
  background: var(--sds-draft-bg);
  color: var(--sds-text);
}

:root .seohub__note--done {
  /* panel.css line 24: --w-color-positive-50 / -100 (fixed ramp steps) */
  background: var(--sds-positive-bg);
  color: var(--sds-positive-fg);
}

:root .seohub__note--error {
  /* panel.css line 27: --w-color-critical-50 / -200 (fixed ramp steps) */
  background: var(--sds-critical-bg);
  color: var(--sds-critical-fg);
}

:root .seohub-card__quote mark {
  /* panel.css line 55: #c8eeee / #1a1a1a */
  background: var(--sds-mark-bg);
  color: var(--sds-text);
}

:root .seohub-card__caution {
  /* panel.css line 59: #faecd5 / #262626 */
  background: var(--sds-draft-bg);
  color: var(--sds-text);
}

:root .seohub-badge--high {
  /* panel.css line 84: #e0fbf4 / #1b8666 (4.15:1) */
  background: var(--sds-positive-bg);
  color: var(--sds-positive-fg);
}

:root .seohub-badge--caution {
  /* panel.css line 85: #faecd5 / #6b4500 */
  background: var(--sds-draft-bg);
  color: var(--sds-draft-fg);
}

:root *::highlight(seohub-anchor) {
  /* panel.css line 89: #8ee0dd / #1a1a1a */
  background-color: var(--sds-mark-bg);
  color: var(--sds-text);
}

/* --- the content agent's screens: body text 14px, helper text 13px (pills may stay small) ----------------------------
 * contentagent.css sizes everything with six tokens on .contentagent-ui; most of the review screen was at the two
 * smallest (12 and 13px). With the look on they step up one: helper and muted text 13px, body text 14px. The layout
 * is the same; :root lifts this above contentagent.css whichever loads last. */
:root .contentagent-ui {
  --ca-text-xs: 0.8125rem;
  --ca-text-sm: 0.875rem;
  /* Text with no size of its own inherited Wagtail's body size, 85% (13.6px): most of the review screen. */
  font-size: 0.875rem;
}

:root .contentagent-ui .button-small {
  font-size: 0.8125rem;
}

/* What contentagent.css dimmed with opacity read under 4.5:1 (2.5-3.9:1): a run's stages not reached yet, the
   calendar's weekend and other-month days, unused keywords on a topic, the plan's measured notes. They keep their
   meaning in the secondary text colour (6.4:1 light, 6.6:1 dark) instead. */
:root .contentagent-ui :is(.ca-stage--todo .ca-stage__label, .ca-day--outside .ca-day__num, .ca-day--weekend .ca-day__num, .ca-kw--unused td, .ca-shape__measured) {
  opacity: 1;
}

:root .contentagent-ui :is(.ca-stage--todo .ca-stage__label, .ca-day--outside .ca-day__num, .ca-day--weekend .ca-day__num, .ca-kw--unused td) {
  color: var(--sds-text-2);
}

/* A field on the "Stop this run" panel's red tint takes the secondary text colour as its edge (3:1 on the tint). */
:root .contentagent-ui .ca-stop__form :is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
  border-color: var(--sds-text-2);
}

/* No squeezing: the numbers column's two-line header ("Searches / a month") keeps room, the New piece radios'
   labels stay on one line, and the queue's quick-action buttons keep their width. */
:root .contentagent-ui th.ca-col-num {
  min-width: 5.5rem;
}

:root .contentagent-ui .ca-newpiece__radio > span {
  white-space: nowrap;
}

:root .contentagent-ui .ca-quick > * {
  flex-shrink: 0;
}

/* The event tables (a run's "What happened", a topic's timeline): Wagtail's cells break text anywhere, so the table
   crushed the reason to a letter a line and cut it off at the panel's edge. The actor ("system:contentagent") stays
   on one line and the reason keeps 16rem; the table scrolls sideways in its panel, which already scrolls. */
:root .contentagent-ui td.ca-col-reason {
  min-width: 16rem;
}

/* --- Wagtail's menus that still assumed a dark menu colour ------------------------------------------------------
 * Wagtail paints its dropdown menus (a row's "…", the header's actions) with the tooltip colour and their items with
 * the menu label colour, and its sticky footers (the bulk-action bar, the editor's save bar) with the menu colour and
 * white text. This palette's menus are the light page (the sidebar), so "2 pages selected" was white on light grey
 * (1.10:1) and the dropdown items grey on navy (2.79:1). A dropdown is a raised panel, framed by the line, in both
 * modes; a footer's own text is the page's text colour. Plain tooltips keep the tooltip colour. INTERNAL: Wagtail
 * 6.3's .tippy-box[data-theme="dropdown"] and .footer__container. */
.tippy-box[data-theme="dropdown"] {
  border: 1px solid var(--sds-line);
  background-color: var(--sds-panel);
  box-shadow: 0 8px 24px rgb(20 27 52 / 0.14);
}

.tippy-box[data-theme="dropdown"][data-placement^="bottom"] > .tippy-arrow::before {
  border-bottom-color: var(--sds-panel);
}

.tippy-box[data-theme="dropdown"][data-placement^="top"] > .tippy-arrow::before {
  border-top-color: var(--sds-panel);
}

/* Build 123 (the by-eye pass): in dark the panel colour is the page's, so a row's "…" menu had no visible edge and its
   items read as printed beside the row. Dark menus are raised: the field surface, the field edge (3.3:1), a shadow. */
.w-theme-dark .tippy-box[data-theme="dropdown"] {
  border-color: var(--sds-field-edge);
  background-color: var(--sds-field);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.55);
}

.w-theme-dark .tippy-box[data-theme="dropdown"][data-placement^="bottom"] > .tippy-arrow::before {
  border-bottom-color: var(--sds-field);
}

.w-theme-dark .tippy-box[data-theme="dropdown"][data-placement^="top"] > .tippy-arrow::before {
  border-top-color: var(--sds-field);
}

@media (prefers-color-scheme: dark) {
  .w-theme-system .tippy-box[data-theme="dropdown"] {
    border-color: var(--sds-field-edge);
    background-color: var(--sds-field);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.55);
  }

  .w-theme-system .tippy-box[data-theme="dropdown"][data-placement^="bottom"] > .tippy-arrow::before {
    border-bottom-color: var(--sds-field);
  }

  .w-theme-system .tippy-box[data-theme="dropdown"][data-placement^="top"] > .tippy-arrow::before {
    border-top-color: var(--sds-field);
  }
}

/* Build 123 (the by-eye pass): a chooser's close button is Wagtail's button text colour, white, made for its dark
   modal header; on ours it was white on light grey. It takes the label colour. INTERNAL: Wagtail 6.3's
   .modal .close.button. */
.modal .close.button,
.modal .close.button:hover {
  color: var(--w-color-text-label);
}

.footer__container {
  color: var(--w-color-text-context);
}

/* Build 123 (the by-eye pass): the bulk-action bar and a form's save box float over the listing or the form, as in
   Wagtail's own look; Wagtail's are dark, ours the page grey, which read as part of the page. A line and a soft shadow
   show they float. */
.footer__container {
  border: 1px solid var(--sds-line);
  box-shadow: 0 -4px 16px rgb(20 27 52 / 0.1);
}

/* The editor's save bar: "You have unsaved edits" is Wagtail's warning orange, made for a dark bar (1.83:1 on ours);
   it takes the palette's draft colour (7.1:1 light, 5.9:1 dark on the page colour). INTERNAL: Wagtail 6.3's
   .footer__emphasise-span-tags. */
.footer__emphasise-span-tags span {
  color: var(--sds-draft-fg);
}

/* Tooltips and dropdown menus: Wagtail's 12px, 13px at the least. INTERNAL: tippy's .tippy-box. */
.tippy-box {
  font-size: 0.8125rem;
}

/* The date picker (Wagtail's jQuery datetimepicker): the chosen day and time are the button's colour with white text
   (Wagtail's highlight colour under the text colour read 2.15:1 in dark); other months' days, which Wagtail dims to
   50%, take the secondary text colour at full strength; its 12px text 13px. INTERNAL: .xdsoft_datetimepicker. */
.xdsoft_datetimepicker .xdsoft_calendar :is(td, th) {
  font-size: 0.8125rem;
}

.xdsoft_datetimepicker .xdsoft_calendar td:is(.xdsoft_current, .xdsoft_default),
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: var(--sds-button);
  color: #ffffff;
}

.xdsoft_datetimepicker .xdsoft_calendar td:is(.xdsoft_other_month, .xdsoft_disabled) {
  opacity: 1;
  color: var(--sds-text-2);
}

/* The StreamField block picker ("Insert a block"): in dark Wagtail paints it the tooltip colour, on which a field's
   3:1 edge was 2.74:1; it is the raised panel too. INTERNAL: Wagtail 6.3's .w-combobox. */
:root .w-combobox {
  background-color: var(--sds-panel);
}

/* --- the last breadcrumb ends in "…" ------------------------------------------------------------------------------
 * The content agent's screens show Wagtail's breadcrumbs expanded (contentagent/_slim_header.html); on a phone the
 * last crumb, a piece's title, ran 65px past the screen's edge, cut mid-word. Build 123: every flex box on the way
 * may shrink, and the last crumb ends in an ellipsis. INTERNAL: Wagtail 6.3's .w-breadcrumbs. */
.w-breadcrumbs,
.w-breadcrumbs :is(div, nav, ol, li) {
  min-width: 0;
}

.w-breadcrumbs li:last-child > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- a panel's heading wraps -------------------------------------------------------------------------------------
 * Wagtail sets a panel heading nowrap with an ellipsis it never reaches (the heading cannot shrink in its flex row),
 * so on a phone a long one ("Assign your workflow to snippets", in Inter) pushed the "#" link and the divider 7px
 * past the screen's edge. Build 123: it wraps, whole. INTERNAL: Wagtail 6.3's .w-panel__header, .w-panel__heading. */
.w-panel__header > .w-panel__heading {
  min-width: 0;
  white-space: normal;
}

/* --- a listing on a phone scrolls in its own box ------------------------------------------------------------------
 * Below 800px Wagtail lets a listing squeeze its columns to fit the screen: a group's permissions broke the model's
 * name to "Webinar regis|tration", the Users list printed names a letter a line (in Wagtail's own look too), and a
 * page chooser opened from the editor (a modal) gave its Type column 30px. Build 123: such a table scrolls sideways in
 * its own box, its title keeps 10rem and every other cell 8rem (a tick box keeps its own). From 800px nothing here
 * applies. INTERNAL: Wagtail 6.3's .listing, td.title and .modal (its choosers). */
@media (max-width: 49.9375em) {
  :is(#main, .modal) :has(> table.listing) {
    overflow-x: auto;
  }

  /* In a box that scrolls, a cell breaks a word only when the word alone is wider than the column (Wagtail breaks
     anywhere: a username or a file name broke over three lines in a narrow cell). */
  :is(#main, .modal) table.listing > tbody > tr > td {
    overflow-wrap: break-word;
    word-break: normal;
  }

  :is(#main, .modal) table.listing > tbody > tr > td.title {
    min-width: 10rem;
  }

  :is(#main, .modal) table.listing > tbody > tr > td:not(.title, .bulk-action-checkbox-cell, :has(input[type="checkbox"])) {
    min-width: 8rem;
  }
}

/* --- the Article and News listings' titles ------------------------------------------------------------------------
 * The article app's own listing (sds_cms/templates/article/article_page_list.html, not ours to edit) paints its
 * .title-link white: in light mode every title was white on the white panel, in Wagtail's own look too. Build 123:
 * with the look on they take the text colour, as Wagtail's own listing titles do (dark mode reads as before). */
:root .title-link {
  color: var(--w-color-text-label);
}

/* --- narrow columns in listings --------------------------------------------------------------------------------------
 * Wagtail gives a page listing's updated, type and status columns 12% each (the explorer and Search pages): 97px at a
 * 1,024px window, where Inter, a little wider than the system font, stacked "Content Library Post" a word a line.
 * From 800px they keep 120px and the title gives the room (285px at 1,024). A page listing is the one whose rows
 * carry Wagtail's children cell. And Wagtail's cells break text anywhere, so an auto-sized table can shrink a column
 * to one character: a two-digit ID in the Article and News listings broke a digit a line at 1,280. From 800px no
 * listing cell is narrower than 52px. INTERNAL: Wagtail 6.3's .listing, td.title, td.no-children/.children and
 * td.bulk-action-checkbox-cell. */
@media (min-width: 50em) {
  .listing > tbody > tr:has(> td.no-children, > td.children) > td:not(.title, .bulk-action-checkbox-cell, .no-children, .children) {
    min-width: 7.5rem;
  }

  :where(.listing > tbody > tr > td) {
    min-width: 3.25rem;
  }

  /* Build 123: the same 120px for the type, status and updated columns of every listing (a report's too: Aging
     pages stacked "Article and News Page" a word a line at 1,024), read from the header's own class. */
  .listing > thead > tr > th:is(.type, .status, .updated) {
    min-width: 7.5rem;
  }
}

/* --- tables: rows that answer the pointer ----------------------------------------------------------------------------
 * Only Wagtail's choosers marked the row under the pointer; every listing's rows now take the palette's hover colour
 * (choosers keep Wagtail's own). A sticky header row was tried and taken out: Wagtail 6.3 already keeps its own
 * header bar (title, search, filters) stuck to the top of a listing, and a second sticky row needs that bar's
 * height, which changes when the bar wraps on a narrow screen; at top: 0 the row only hid behind the bar.
 * INTERNAL: Wagtail's .listing. */
.listing:not(.chooser) > tbody > tr:hover {
  background-color: var(--sds-hover);
}

/* --- the admin's 404 (contentagent/templates/wagtailadmin/404.html) --------------------------------------------- */
/* The whole window, as Wagtail's own 404 (.page404__bg) is: its skeleton keeps a sidebar's width of space. */
.ca-404 {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: var(--sds-space-5) var(--sds-space-4);
  background-color: var(--sds-page);
  color: var(--sds-text);
  font-family: var(--w-font-sans);
}

.ca-404__card {
  box-sizing: border-box;
  width: min(100%, 28rem);
  padding: var(--sds-space-6);
  border: 1px solid var(--sds-line);
  border-radius: var(--sds-radius-panel);
  background-color: var(--sds-panel);
  text-align: center;
}

.ca-404__logo .ca-brand {
  display: flex;
  justify-content: center;
  padding: 0 0 var(--sds-space-5);
}

.ca-404__title {
  margin: 0 0 var(--sds-space-2);
  color: var(--sds-text);
  font-size: 1.875rem;
  font-weight: 700;
}

.ca-404__text {
  margin: 0 0 var(--sds-space-5);
  color: var(--sds-text-2);
  font-size: 1rem;
}

/* --- Mail templates' editor (CKEditor 4) ------------------------------------------------------------------------
 * Build 124. The message field of Mail templates is django-ckeditor 6.7.3 (CKEditor 4.22.1, skin moono-lisa), white
 * in dark mode. CKEditor 4 has no custom properties, so its skin classes read the palette here, in both modes (light
 * stays close to the skin's own greys). Each selector starts with html: CKEditor adds its skin after this file.
 * NOT themed, on purpose: the writing area, an iframe with CKEditor's own contents.css, stays white with the email's
 * own colours in both modes, because an email is read on white and its inline colours (black text) would not read on
 * dark. Its Source view stays white with it, and so do the colour pickers, so a swatch shows its real colour.
 * Simplification: CKEditor 4 draws its icons black (one sprite) and its Format and Styles lists and right-click menu
 * inside iframes this file cannot reach, and ships no dark skin; in dark those are inverted with --sds-invert, which
 * maps its white and black to the panel and the text. A real dark skin would mean a file in the package or an editor
 * setting in base.py (CKEDITOR_CONFIGS), both outside contentagent/. INTERNAL: CKEditor 4's skin classes. */
html .cke_chrome,
html .cke_panel {
  border-color: var(--sds-line);
}

/* The editor is 1000px wide (CKEDITOR_CONFIGS); narrower than that, it fits its column and its toolbar wraps. */
html .cke_chrome {
  box-sizing: border-box;
  max-width: 100%;
}

html .cke_inner,
html .cke_top,
html .cke_bottom,
html .cke_panel {
  background: var(--sds-panel);
}

html .cke_top,
html .cke_bottom {
  border-color: var(--sds-line);
}

html .cke_reset_all,
html .cke_reset_all * {
  color: var(--sds-text);
}

html a.cke_path_item,
html .cke_path_empty {
  color: var(--sds-text-2);
}

html .cke_button_arrow,
html .cke_combo_arrow {
  border-top-color: var(--sds-text-2);
}

html .cke_resizer_ltr {
  border-right-color: var(--sds-field-edge);
}

html .cke_toolbar_separator {
  background-color: var(--sds-line);
}

html .cke_toolgroup a.cke_button:last-child::after {
  border-right-color: var(--sds-line);
}

html a.cke_button_off:is(:hover, :focus, :active),
html .cke_combo_off a.cke_combo_button:is(:hover, :focus, :active),
html a.cke_path_item:is(:hover, :focus),
html a.cke_toolbox_collapser:hover {
  background: var(--sds-hover);
  border-color: var(--sds-field-edge);
}

html a.cke_button_on,
html .cke_combo_on a.cke_combo_button {
  background: var(--sds-selected-bg);
  border-color: var(--sds-accent);
}

html .cke_button_icon,
html a.cke_dialog_close_button,
html .cke_combopanel .cke_panel_frame,
html .cke_menu_panel .cke_panel_frame {
  filter: var(--sds-invert);
}

/* Dialogs (Link, Table, Anchor, Special character...). The page behind one is dimmed with the page's colour, not
   white: CKEditor sets the cover's colour in an inline style, so only !important can reach it. */
html .cke_dialog_background_cover {
  background-color: var(--sds-page) !important;
}

html a.cke_dialog_tab {
  background: var(--sds-field);
  border-color: var(--sds-line);
  color: var(--sds-text-2);
}

html a.cke_dialog_tab:hover {
  background: var(--sds-hover);
}

html .cke_dialog_body,
html .cke_dialog_title,
html .cke_dialog_contents,
html .cke_dialog_footer,
html a.cke_dialog_tab_selected {
  background: var(--sds-panel);
  border-color: var(--sds-line);
}

/* The open tab: the text colour and the accent underline, as Wagtail's tabs. */
html a.cke_dialog_tab_selected,
html a.cke_dialog_tab_selected:is(:hover, :focus) {
  border-bottom-color: var(--sds-panel);
  color: var(--sds-text);
  box-shadow: inset 0 -2px var(--sds-accent);
}

html .cke_dialog fieldset {
  border-color: var(--sds-line);
}

html :is(input.cke_dialog_ui_input_text, input.cke_dialog_ui_input_password, input.cke_dialog_ui_input_tel,
  textarea.cke_dialog_ui_input_textarea, select.cke_dialog_ui_input_select) {
  background-color: var(--sds-field);
  border-color: var(--sds-field-edge);
  color: var(--sds-text);
}

html a.cke_dialog_ui_button {
  background: var(--sds-field);
  border-color: var(--sds-field-edge);
  color: var(--sds-text);
}

html a.cke_dialog_ui_button:hover {
  background: var(--sds-hover);
}

html a.cke_dialog_ui_button_ok {
  background: var(--sds-button);
  border-color: var(--sds-button);
  color: #fff;
}

html a.cke_dialog_ui_button_ok:hover {
  background: var(--sds-button-hover);
  border-color: var(--sds-button-hover);
}

/* Build 104's dashboard counts read the palette's positive and draft text. */
:root {
  --ca-sum-live: var(--sds-positive-fg);
  --ca-sum-draft: var(--sds-draft-fg);
}

/* ===========================================================================
 * The dashboard's own furniture.
 *
 * These live here rather than in contentagent.css because every one of them
 * renders only when this flag is on: the summary items and the workbench panel
 * are registered by hooks that return early when it is off, and the greeting
 * falls back to Wagtail's heading. Styling them in the always-on stylesheet
 * would leave rules for markup that does not exist.
 * =========================================================================== */

/* --- the greeting --------------------------------------------------------- */
.contentagent-screen .ca-welcome__sub {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--w-color-text-meta);
}

/* --- the four counts ------------------------------------------------------ */
.contentagent-screen .w-summary__list .ca-sum a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  text-decoration: none;
}

.contentagent-screen .ca-sum__count {
  font-weight: 700;
}

.contentagent-screen .ca-sum__label {
  color: var(--w-color-text-context);
}

/* Only the two a person acts on carry a colour. A count that is merely a fact
   stays neutral, which is what keeps the coloured ones meaning anything. */
.contentagent-screen .ca-sum--live .ca-sum__count {
  color: var(--ca-sum-live);
}

.contentagent-screen .ca-sum--draft .ca-sum__count {
  color: var(--ca-sum-draft);
}

.contentagent-screen .ca-sum--neutral .ca-sum__count {
  color: var(--w-color-text-label);
}

/* --- the workbench panel -------------------------------------------------- */
.contentagent-screen .ca-bench__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 60rem) {
  .contentagent-screen .ca-bench__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contentagent-screen .ca-bench__month {
  /* Fallback: the selector cannot show it sits inside .contentagent-ui. */
  margin-top: var(--ca-space-4, 2rem);
}

.contentagent-screen .contentagent-ui .ca-edits,
.contentagent-screen .contentagent-ui .ca-starts {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.contentagent-screen .contentagent-ui .ca-edit {
  display: grid;
  gap: 0.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--w-color-border-furniture);
}

.contentagent-screen .contentagent-ui .ca-edit__title {
  font-size: 0.9375rem;
  text-decoration: none;
}

.contentagent-screen .contentagent-ui .ca-edit__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--w-color-text-meta);
}

.contentagent-screen .contentagent-ui .ca-start {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--w-color-border-furniture);
  border-radius: 7px;
  text-decoration: none;
}

/* Build 128, item 11: every "Start something" card, "Write a new piece" included, shows its border on hover and
   keyboard focus only; the primary one no longer looks selected all the time. */
.contentagent-screen .contentagent-ui .ca-start:hover,
.contentagent-screen .contentagent-ui .ca-start:focus-visible {
  border-color: var(--sds-accent, var(--w-color-text-meta));
}

.contentagent-screen .contentagent-ui .ca-start__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--w-color-text-label);
}

.contentagent-screen .contentagent-ui .ca-start__note {
  font-size: 0.75rem;
  color: var(--w-color-text-meta);
}



/* ===========================================================================
 * Dashboard spacing, measured.
 * =========================================================================== */

/* PANELS ARE CARDS (measured before: background rgba(0,0,0,0), border 0px,
   radius 0px, padding 0px top and bottom).
 *
 * `nice-padding` was doing something, just not what the templates assumed: in
 * Wagtail 6.3 it is `padding-inline-start/end` only — 1.25rem, 5rem at wide
 * breakpoints — and supplies no vertical padding at all. So it stays for the
 * horizontal gutter and the vertical spacing is owned here.
 *
 * THE BOARD SAYS --w-color-grey-500 AND THAT IS WRONG, measured both ways.
 * The reasoning behind it was that a variable would let light mode take care
 * of itself, but grey-500 is not theme-relative: its lightness is
 * `calc(11.4% + 8.6%)` = 20% in *both* themes, because only the semantic
 * tokens flip which end of the ramp they read. Using it turned the light
 * dashboard into the two dark slabs the brief warned about — measured
 * rgb(56, 49, 46) on a white page.
 *
 * --w-color-surface-field-inactive is the token that actually does the job:
 * #F8F7F6 in light and #38312E in dark, a surface raised a step from the page
 * in each. It is also what the table headers already use, so cards and table
 * headers agree. In dark it resolves to the same value grey-500 gave, which
 * is why the dark screenshot looked right and hid the bug.
 */
.contentagent-screen .contentagent-ui.ca-dashpanel,
.contentagent-screen .contentagent-ui.ca-bench {
  /* Build 121: a card is the panel's own white (Stride's #17181B in dark), framed by its line. */
  background-color: var(--sds-panel);
  border: 1px solid var(--w-color-border-furniture);
  border-radius: 10px;
  padding-top: var(--ca-space-3);
  padding-bottom: var(--ca-space-3);
  /* Build 128, item 10: Wagtail's nice-padding put 5rem inside these two cards at wide widths, so their text
     started about 80px in; the card's own padding, as every other card. */
  padding-inline: var(--ca-space-3);
  margin-bottom: var(--ca-space-3);
}

/* The one panel asking for something keeps an amber edge. */
.contentagent-screen .contentagent-ui.ca-dashpanel {
  border-inline-start: 3px solid var(--sds-amber);
}

/* CAPTIONS BIND DOWNWARD.
 *
 * "THIS MONTH" read as a caption for the Upload images card above it rather
 * than a heading for the three numbers below. The cause was specificity, not
 * the value: `.ca-bench__month { margin-top: 1.5rem }` is (0,1,0) and lost to
 * `.contentagent-ui .ca-panel__title { margin: 0 }` at (0,2,0), so the
 * measured margin-top was 0px. Matching the winning specificity is the fix.
 *
 * A large gap above and a small one below is what makes a caption belong to
 * its own content. The pairs that measured 2px apart — a number and its
 * label, a card title and its note — are left alone: tightness is how those
 * read as one object.
 */
.contentagent-screen .contentagent-ui .ca-bench__main > .ca-panel__title,
.contentagent-screen .contentagent-ui .ca-bench__side > .ca-panel__title {
  margin-top: 0;
  margin-bottom: var(--ca-space-1);
}

.contentagent-screen .contentagent-ui .ca-bench__side > .ca-panel__title.ca-bench__month {
  margin-top: var(--ca-space-4);
}

/* Build 128, item 15: the "This month" figures as one even grid, two equal columns, every tile the same size. */
.contentagent-screen .contentagent-ui .ca-bench__side .ca-tiles--row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contentagent-screen .contentagent-ui .ca-bench__side .ca-tiles--row .ca-tile {
  min-width: 0;
  height: 100%;
}

/* THE FOUR COUNTS: a deliberate 2x2, not an accidental 3+1.
 *
 * The first attempt at this did nothing, and the measurement said why:
 * `display` computed to `flex`, while `grid-template-columns` computed to the
 * value below. Wagtail's rule is `.w-summary .w-summary__list` at (0,2,0) and
 * ours was `.w-summary__list` at (0,1,0) — so the columns applied to a flex
 * container, where they mean nothing, and the items kept flex-wrapping 3 + 1.
 * Matching the selector is the fix; the values were never the problem.
 *
 * THE BREAKPOINT WAS ALSO WRONG, and for a reason a viewport query cannot see:
 * the list shares the header row with the account panel, so what constrains it
 * is the width left over, not the window. Measured left-column widths were
 * 628px at a 1280 window, 765px at 1470, 992px at 1700, while four items plus
 * three 2rem gaps need 695px. So 1470 (91.9rem) sat 10px short and fell back
 * to 3 + 1 despite being past the old 90rem breakpoint.
 *
 * Two changes: the column gap drops to --ca-space-3, which brings the four
 * across down to 659px, and the breakpoint moves to 88rem (1408px), where the
 * leftover width is about 700px. Verified at 1280, 1470 and 1700.
 *
 * NEITHER OF THOSE TOOK EFFECT AS WRITTEN (2026-09-23). The --ca-space-*
 * tokens are defined on .contentagent-ui, and this list is in Wagtail's own
 * header, outside every .contentagent-ui element. So the gap resolved to
 * nothing and the four tiles sat with a 0px gap between them. The fallbacks
 * below are the token values themselves.
 *
 * The breakpoint is now a CONTAINER query on .w-summary, so it measures the
 * width the list actually has rather than the window. Measured in headless
 * Chrome: the four tiles are 95 + 148 + 165 + 194 = 602px at max-content,
 * plus three 20px gaps, which makes 662px. 41.5rem is 664px. Past that, four
 * across never squeezes. Below it the list stays 2×2, however wide the
 * account panel grows. The one number left is the tiles' own content width.
 * It moves only if their labels or the width of their figures change.
 * A browser without container queries (all of the ones Wagtail 6.3 supports
 * have them) keeps the 2×2 layout.
 */
.contentagent-screen .w-summary {
  container-type: inline-size;
}

.contentagent-screen .w-summary .w-summary__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: var(--ca-space-1, 0.5rem) var(--ca-space-3, 1.25rem);
  justify-content: start;
}

@container (min-width: 41.5rem) {
  /* Where the width genuinely exists, four across as the board draws it. */
  .contentagent-screen .w-summary .w-summary__list {
    grid-template-columns: repeat(4, minmax(0, auto));
  }
}

/* The agent activity list, replacing the recent-edits list. */
.contentagent-screen .contentagent-ui .ca-acts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ca-space-1);
}

.contentagent-screen .contentagent-ui .ca-act {
  display: grid;
  gap: 0.1rem;
  padding-bottom: var(--ca-space-1);
  border-bottom: 1px solid var(--w-color-border-furniture);
}

/* Build 128, item 12: one layout for every item. The title on one line (cut with an ellipsis, the whole title in
   its tooltip), then one meta line that wraps like a sentence: each part (stage, time, "waiting on you", "open the
   page") stays whole, so a link never drops to a line of its own while its neighbours stay up. */
.contentagent-screen .contentagent-ui .ca-act__title {
  font-size: 0.9375rem;
  text-decoration: none;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.contentagent-screen .contentagent-ui .ca-act__meta {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--w-color-text-meta);
}

.contentagent-screen .contentagent-ui .ca-act__part {
  white-space: nowrap;
}