/* ===========================================
   CUSTODIA ADMIN LAYOUT (cx-*)
   New page skeleton for change forms, piloted on the Archive Item change page.
   Opt-in: add `cx-layout` to <body> (see templates/admin/core/archiveitem/change_form.html).

   Loaded after admin-custom.css. The markup uses its own cx-* classes, not
   Django's .aligned/.form-row, so the legacy label-column rules never match
   and almost nothing here needs !important (the widget section is the
   exception). Rules are scoped to body.cx-layout,
   with #content / #content-main where legacy ID selectors compete.
   Colours come from the existing admin tokens, so light/dark themes follow.
   =========================================== */

body.cx-layout {
  --cx-accent: var(--custodia-moss, #2a3d2a);
  --cx-card-radius: 8px;
  --cx-card-padding: 22px 24px;
  --cx-gap: 20px;
  --cx-rail-width: 340px;
  --cx-label-color: var(--body-fg, #333);
  --cx-muted: var(--body-quiet-color, #666);
  --cx-line: var(--hairline-color, #ddd5c0);
  /* Form widgets */
  --cx-input-bg: #ffffff;
  --cx-input-border: #d9cfbd;
  --cx-input-fg: #1f1c17;
  --cx-chip-bg: #fbf8f1;
  --cx-chip-border: #e3d9c7;
  --cx-chip-fg: #4a4336;
  --cx-disabled-bg: #f3eee4;
  --cx-delete-fg: #a43f3f;
  --cx-error-border: #b3261e;
  --cx-error-bg: #fff8f6;
  --cx-thumb-bg: #e9e0cf;
  --cx-thumb-border: #ddd2bf;
  --cx-dashed: #cbbfa9;
  --cx-file-icon-bg: #f1ebdf;
  --cx-switch-off: #978b75;
  --cx-switch-knob: #ffffff;
  /* Edited but not saved yet (list Save bar and its changed ticks). */
  --cx-unsaved: #c98a00;
  --cx-tick-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

html[data-theme="dark"] body.cx-layout {
  --cx-accent: color-mix(in srgb, var(--custodia-moss, #2a3d2a) 35%, white 65%);
  --cx-input-bg: var(--admin-form-input-bg, #2a2a2a);
  --cx-input-border: rgba(240, 234, 216, 0.22);
  --cx-input-fg: var(--body-fg, #eee);
  --cx-chip-bg: rgba(240, 234, 216, 0.06);
  --cx-chip-border: rgba(240, 234, 216, 0.22);
  --cx-chip-fg: #ece4cf;
  --cx-disabled-bg: rgba(240, 234, 216, 0.04);
  --cx-delete-fg: #e0a0a0;
  --cx-error-border: #e57373;
  --cx-error-bg: rgba(229, 115, 115, 0.08);
  --cx-thumb-bg: rgba(240, 234, 216, 0.08);
  --cx-thumb-border: rgba(240, 234, 216, 0.18);
  --cx-dashed: rgba(240, 234, 216, 0.32);
  --cx-file-icon-bg: rgba(240, 234, 216, 0.08);
  --cx-switch-off: rgba(240, 234, 216, 0.45);
  --cx-switch-knob: #1e1e1c;
  --cx-unsaved: #e0a526;
  --cx-tick-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1e1c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout {
    --cx-accent: color-mix(in srgb, var(--custodia-moss, #2a3d2a) 35%, white 65%);
    --cx-input-bg: var(--admin-form-input-bg, #2a2a2a);
    --cx-input-border: rgba(240, 234, 216, 0.22);
    --cx-input-fg: var(--body-fg, #eee);
    --cx-chip-bg: rgba(240, 234, 216, 0.06);
    --cx-chip-border: rgba(240, 234, 216, 0.22);
    --cx-chip-fg: #ece4cf;
    --cx-disabled-bg: rgba(240, 234, 216, 0.04);
    --cx-delete-fg: #e0a0a0;
    --cx-error-border: #e57373;
    --cx-error-bg: rgba(229, 115, 115, 0.08);
    --cx-thumb-bg: rgba(240, 234, 216, 0.08);
    --cx-thumb-border: rgba(240, 234, 216, 0.18);
    --cx-dashed: rgba(240, 234, 216, 0.32);
    --cx-file-icon-bg: rgba(240, 234, 216, 0.08);
    --cx-switch-off: rgba(240, 234, 216, 0.45);
    --cx-switch-knob: #1e1e1c;
    --cx-unsaved: #e0a526;
    --cx-tick-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1e1c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }
}

/* ===========================================
   SELECTS (all admin pages, not only cx-layout)
   Dropdowns stage 1: one look for every single-choice <select> (form fields, inline
   rows, list actions and rows per page, settings pages): no browser arrow, a quiet
   up/down chevron, room for it on the right, and the placeholder ("---------") muted.
   Multi-selects, the cx-picker "Add…" select and the date picker's month/year selects
   keep their own designs. Stage 2 (the cx-select listbox) builds on the native select.
   =========================================== */
body {
  --cx-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6255' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9.5l4-4 4 4M8 14.5l4 4 4-4'/%3E%3C/svg%3E");
}

html[data-theme="dark"] body {
  --cx-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c1ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9.5l4-4 4 4M8 14.5l4 4 4-4'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body {
    --cx-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c1ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9.5l4-4 4 4M8 14.5l4 4 4-4'/%3E%3C/svg%3E");
  }
}

body select:not([multiple]):not([size]:not([size="1"])):not(.cx-picker__add):not(.custodia-calendar-select) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 34px !important;
  background-image: var(--cx-select-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  background-size: 18px 18px !important;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Read-only (curator) and disabled selects can't open: no chevron. */
body select:not([multiple]):not([size]:not([size="1"])):disabled {
  background-image: none !important;
  cursor: not-allowed;
}

/* Nothing chosen yet: the empty option reads as a placeholder; the list stays dark. */
body select:not([multiple]):has(> option[value=""]:checked) {
  color: var(--cx-muted, var(--body-quiet-color, #6b6255)) !important;
}

body select:not([multiple]) option {
  color: var(--cx-input-fg, var(--body-fg, #1f1c17));
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) select:not([multiple]):not(:disabled):hover {
  border-color: color-mix(in srgb, var(--cx-accent) 45%, var(--cx-input-border));
}

body.cx-layout .cx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Object header ---- */
body.cx-layout #content .cx-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 4px 0 18px;
}

body.cx-layout #content .cx-header__thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background: var(--darkened-bg, #f4efe4);
  color: var(--cx-muted);
}

body.cx-layout #content .cx-header__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.cx-layout #content .cx-header__thumb svg {
  width: 26px;
  height: 26px;
}

body.cx-layout #content .cx-header__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

body.cx-layout #content .cx-header__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

body.cx-layout #content h1.cx-header__title {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body.cx-layout #content .cx-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Dot after each item (not before), so a wrapped line never starts with "·". */
body.cx-layout #content .cx-header__meta a {
  color: var(--cx-label-color);
  text-decoration: underline;
  text-decoration-color: var(--cx-line);
  text-underline-offset: 2px;
}

body.cx-layout #content .cx-header__meta a:hover {
  text-decoration-color: currentColor;
}

body.cx-layout #content .cx-header__meta > span:not(:last-child)::after {
  content: "\00b7";
  margin: 0 9px;
}

/* Phone: thumbnail + title on top, then meta and actions full width below. */
@media (max-width: 767px) {
  body.cx-layout #content .cx-header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
      "thumb eyebrow"
      "thumb title"
      "meta meta"
      "actions actions";
    align-items: center;
    gap: 0 12px;
  }

  body.cx-layout #content .cx-header__body {
    display: contents;
  }

  body.cx-layout #content .cx-header__thumb {
    grid-area: thumb;
    align-self: start;
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }

  body.cx-layout #content .cx-header__eyebrow {
    grid-area: eyebrow;
  }

  body.cx-layout #content .cx-header__title-row {
    grid-area: title;
    gap: 6px 10px;
  }

  /* Beats admin-custom.css `body.change-form #content h1` (1.6rem !important). */
  body.cx-layout #content h1.cx-header__title {
    font-size: 1.4rem !important;
  }

  /* Add page: no thumbnail column. */
  body.cx-layout #content .cx-header:not(:has(.cx-header__thumb)) {
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
  }

  body.cx-layout #content .cx-header__meta {
    grid-area: meta;
    margin-top: 10px;
  }

  body.cx-layout #content .cx-header__actions {
    grid-area: actions;
    margin-top: 12px;
  }
}

body.cx-layout #content .cx-header__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
}

body.cx-layout #content a.cx-btn,
body.cx-layout #content a.cx-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: var(--body-bg, #fff);
  color: var(--cx-label-color);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

body.cx-layout #content a.cx-btn:hover,
body.cx-layout #content a.cx-btn:focus-visible {
  background: var(--darkened-bg, #f2ece3);
  text-decoration: none;
}

body.cx-layout #content a.cx-btn:focus-visible {
  border-color: var(--cx-muted);
}

body.cx-layout #content .cx-btn svg {
  width: 16px;
  height: 16px;
}

/* The page's main action beside History (e.g. a document's Download): a soft accent tint. */
body.cx-layout #content a.cx-btn--accent,
body.cx-layout #content a.cx-btn--accent:visited {
  --cx-btn-accent: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  border-color: color-mix(in srgb, var(--cx-btn-accent) 35%, transparent);
  background: color-mix(in srgb, var(--cx-btn-accent) 8%, var(--body-bg, #fff));
  color: var(--cx-btn-accent);
  font-weight: 600;
}

body.cx-layout #content a.cx-btn--accent:hover,
body.cx-layout #content a.cx-btn--accent:focus-visible {
  border-color: color-mix(in srgb, var(--cx-btn-accent) 60%, transparent);
  background: color-mix(in srgb, var(--cx-btn-accent) 14%, var(--body-bg, #fff));
}

/* Header "⋯" menu (project change page): framed like the History button. */
body.cx-layout #content .cx-menu--header button.cx-menu__btn {
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid var(--cx-line);
  background: var(--body-bg, #fff);
  color: var(--cx-label-color);
}

body.cx-layout #content .cx-menu--header button.cx-menu__btn:hover,
body.cx-layout #content .cx-menu--header button.cx-menu__btn[aria-expanded="true"] {
  border-color: var(--cx-muted);
  background: var(--body-bg, #fff);
}

/* ---- Section tabs ---- */
/* .cx-tabs-bar is what pins; its background shows through the nav's faded edges. */
body.cx-layout #content .cx-tabs-bar {
  margin: 0 0 var(--cx-gap);
  background: var(--body-bg, #fff);
}

body.cx-layout #content .cx-tabs {
  display: flex;
  gap: 26px;
  margin: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--cx-line);
  background: var(--body-bg, #fff);
  scrollbar-width: none;
}

body.cx-layout #content .cx-tabs::-webkit-scrollbar {
  display: none;
}

/* More tabs off to the side (narrow screens): fade that edge (admin_cx_layout.js). */
body.cx-layout #content .cx-tabs.cx-tabs--overflow-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

body.cx-layout #content .cx-tabs.cx-tabs--overflow-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
  mask-image: linear-gradient(to right, transparent, #000 40px);
}

body.cx-layout #content .cx-tabs.cx-tabs--overflow-start.cx-tabs--overflow-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

body.cx-layout #content a.cx-tabs__link,
body.cx-layout #content a.cx-tabs__link:visited {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  padding: 10px 0 11px;
  border-bottom: 2px solid transparent;
  color: var(--cx-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

body.cx-layout #content a.cx-tabs__link:hover {
  color: var(--cx-label-color);
}

body.cx-layout #content a.cx-tabs__link[aria-current="true"] {
  border-bottom-color: var(--cx-accent);
  color: var(--cx-accent);
  font-weight: 600;
}

body.cx-layout #content .cx-count {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--darkened-bg, #ece5d7);
  color: var(--cx-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

/* Tab panels (change pages, admin_cx_layout.js initSectionPanels). */
body.cx-tabs--panels #content-main [data-cx-panel][hidden] {
  display: none !important;
}

body.cx-layout #content a.cx-tabs__link:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: -2px;
  border-radius: 4px;
}

body.cx-layout #content .cx-tabs__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

body.cx-layout #content .cx-tabs__dot--error {
  background: var(--cx-error-border);
}

body.cx-layout #content .cx-tabs__dot--dirty {
  background: var(--cx-unsaved);
}

/* The unsaved dot stays on every tab with edits, open or not, until the record
   is saved; an error dot on the same tab takes its place. */
body.cx-layout #content .cx-tabs__dot--error ~ .cx-tabs__dot--dirty {
  display: none;
}

@media (min-width: 1025px) {
  /* The tabs pin under the sticky top bar (--cx-shell-top, App shell). */
  body.cx-layout #content .cx-tabs-bar {
    position: sticky;
    top: var(--cx-shell-top, 0px);
    z-index: 20;
  }

  body.cx-layout #content-main [id^="section-"],
  body.cx-layout #content-main .inline-group[id$="-group"],
  body.cx-layout #content-main :is(#conservation-cycle, #conservation-history) {
    scroll-margin-top: calc(var(--cx-shell-top, 0px) + 64px);
  }
}

/* ---- Page grid: main column + right rail ---- */
body.cx-layout #content-main .cx-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cx-gap);
  align-items: start;
}

body.cx-layout #content-main .cx-page__main,
body.cx-layout #content-main .cx-page__rail {
  display: flex;
  flex-direction: column;
  gap: var(--cx-gap);
  min-width: 0;
}

@media (min-width: 1200px) {
  body.cx-layout #content-main .cx-page:not(.cx-page--single) {
    grid-template-columns: minmax(0, 1fr) var(--cx-rail-width);
  }

  body.cx-layout #content-main .cx-page__rail {
    position: sticky;
    top: calc(var(--cx-shell-top, 0px) + 64px);
  }
}

/* ---- Cards ---- */
body.cx-layout #content-main .cx-card,
body.cx-layout #content-main .cx-inline > .inline-related > fieldset.module {
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--custodia-card-border-color, var(--cx-line));
  border-radius: var(--cx-card-radius);
  background: var(--custodia-card-bg, var(--body-bg));
  box-shadow: var(--custodia-card-shadow, none);
}

body.cx-layout #content-main .cx-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--cx-card-padding);
}

body.cx-layout #content-main .cx-card--rail {
  gap: 14px;
  padding: 18px 20px;
}

body.cx-layout #content-main .cx-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--body-fg, #333);
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

body.cx-layout #content-main .cx-card--rail .cx-card__title {
  font-size: 1.05rem;
}

body.cx-layout #content-main .cx-card__description {
  margin: -8px 0 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ---- Field grid with stacked labels ---- */
body.cx-layout #content-main fieldset.cx-card__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body.cx-layout #content-main .cx-card--rail fieldset.cx-card__fields {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 767px) {
  body.cx-layout #content-main fieldset.cx-card__fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

body.cx-layout #content-main .cx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Long-form and readonly blocks take the full card width. */
body.cx-layout #content-main .cx-field:has(textarea),
body.cx-layout #content-main .cx-field:has(select[multiple]),
body.cx-layout #content-main .cx-field--readonly {
  grid-column: 1 / -1;
}

body.cx-layout #content-main .cx-field > label,
body.cx-layout #content-main .cx-field > .cx-visually-hidden > label {
  display: block;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cx-label-color);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}

body.cx-layout #content-main .cx-field > label.required::after {
  content: " *";
  color: var(--error-fg, #ba2121);
}

body.cx-layout #content-main .cx-field__control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body.cx-layout #content-main .cx-field__control > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
body.cx-layout #content-main .cx-field__control > .related-widget-wrapper {
  flex: 1 1 12rem;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

body.cx-layout #content-main .cx-field__control > .related-widget-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.cx-layout #content-main .cx-field__control > .related-widget-wrapper > select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}

body.cx-layout #content-main .cx-field__control :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select:not([multiple])) {
  min-height: 2.5rem;
}

body.cx-layout #content-main .cx-field__control textarea {
  flex-basis: 100%;
  min-height: 6.5rem;
  resize: vertical;
}

body.cx-layout #content-main .cx-field__control select:disabled {
  opacity: 0.85;
  cursor: not-allowed;
}

/* AdminDateWidget wraps the input in <p class="date">; DateTimeShortcuts
   appends its Today/calendar links inside that <p>. */
body.cx-layout #content-main .cx-field__control > p:is(.date, .time, .datetime) {
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

body.cx-layout #content-main .cx-field__control > p:is(.date, .time, .datetime) > input {
  flex: 1 1 8rem;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  min-height: 2.5rem;
  margin: 0;
}

body.cx-layout #content-main .cx-field__control .datetimeshortcuts {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* Help text: one quiet line under the input. */
body.cx-layout #content-main .cx-field > .help {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout #content-main .cx-field > .help > div {
  margin: 0;
}

/* Validation errors sit under the input. */
body.cx-layout #content-main .cx-field > ul.errorlist {
  order: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  color: var(--error-fg, #ba2121);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

body.cx-layout #content-main .cx-field > ul.errorlist li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

body.cx-layout #content-main .cx-field > .help {
  order: 4;
}

body.cx-layout #content-main .cx-field--error .cx-field__control :is(input, select, textarea) {
  border-width: 1.5px;
  border-color: var(--cx-error-border);
  background-color: var(--cx-error-bg);
}

/* ---- Widgets (inputs, selects, related-object and date buttons) ----
   Match the approved mock: 40px controls, 8px corners, warm hairline border,
   and square ghost buttons beside the control. The legacy widget-chip rules in
   admin-custom.css use !important, so the few properties they set are
   repeated here with !important; everything else is plain. */
body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px !important;
  background-color: var(--cx-input-bg);
  color: var(--cx-input-fg);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select:not([multiple])) {
  height: 2.5rem;
  min-height: 2.5rem;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) select {
  padding: 0 10px;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) :is(textarea, select[multiple]) {
  height: auto;
  padding: 10px 12px !important; /* the input rule above out-specifies this via its :not() chain */
  line-height: 1.5;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) :is(input, select, textarea):focus {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 18%, transparent) !important;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) :is(input, select, textarea):disabled {
  border-color: var(--cx-chip-border);
  background-color: var(--cx-disabled-bg);
  color: var(--cx-chip-fg);
  opacity: 1;
}

/* Related-object links (view / change / add / delete) as 40px square buttons. */
body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) a.related-widget-wrapper-link {
  display: inline-grid !important;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0 !important;
  border: 1px solid var(--cx-chip-border) !important;
  border-radius: 8px !important;
  background: var(--cx-chip-bg) !important;
  color: var(--cx-chip-fg) !important;
  box-shadow: none;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) a.related-widget-wrapper-link .custodia-widget-icon {
  font-size: 18px;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) a.delete-related {
  color: var(--cx-delete-fg) !important;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) :is(a.related-widget-wrapper-link, .datetimeshortcuts a):hover {
  border-color: color-mix(in srgb, var(--cx-accent) 55%, transparent) !important;
  background: color-mix(in srgb, var(--cx-accent) 8%, var(--cx-chip-bg)) !important;
  color: var(--cx-chip-fg) !important;
  box-shadow: none;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) :is(a.related-widget-wrapper-link, .datetimeshortcuts a):focus-visible {
  outline: 2px solid var(--cx-accent) !important;
  outline-offset: 2px;
}

/* Date shortcuts: a "Today" button and a square calendar button. Django puts
   "&nbsp;|&nbsp;" text between the links; font-size 0 hides it. */
body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) .datetimeshortcuts {
  font-size: 0;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) .datetimeshortcuts a {
  display: inline-grid !important;
  place-items: center;
  box-sizing: border-box;
  height: 2.5rem;
  padding: 0 12px !important;
  border: 1px solid var(--cx-chip-border) !important;
  border-radius: 8px !important;
  background: var(--cx-chip-bg) !important;
  color: var(--cx-chip-fg) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none !important;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) .datetimeshortcuts a:is([id^="calendarlink"], [id^="clocklink"]) {
  width: 2.5rem;
  padding: 0 !important;
}

body.cx-layout #content-main :is(.cx-field__control, .cx-inline td, .cx-subsection td) .datetimeshortcuts .custodia-widget-icon {
  font-size: 18px;
}

/* Inline table cells (condition log, images, files): control and its buttons
   share one wrapping row, as in the field cards. */
body.cx-layout #content-main :is(.cx-inline, .cx-subsection) td :is(.related-widget-wrapper, p.date, p.time, p.datetime) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: auto !important;
  margin: 0;
  padding: 0;
}

body.cx-layout #content-main :is(.cx-inline, .cx-subsection) td :is(.related-widget-wrapper, p.date, p.time, p.datetime) > :is(select, input) {
  flex: 1 1 10rem;
  width: auto !important;
  min-width: 0;
  margin: 0;
}

body.cx-layout #content-main :is(.cx-inline, .cx-subsection) td .datetimeshortcuts {
  display: inline-flex !important;
  flex: none;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}

/* Yes/no fields: label above like other fields, then an on/off switch with the
   help text beside it (cx_fieldset_fields.html; role="switch" from admin_cx_layout.js). */
body.cx-layout #content-main .cx-field__check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 2.5rem;
}

body.cx-layout #content-main .cx-field__check > input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cx-switch-off);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

body.cx-layout #content-main .cx-field__check > input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--cx-switch-knob);
  box-shadow: 0 1px 2px rgba(31, 28, 23, 0.25);
  transition: transform 0.15s ease;
}

body.cx-layout #content-main .cx-field__check > input[type="checkbox"]:checked {
  background: var(--cx-accent);
}

body.cx-layout #content-main .cx-field__check > input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}

body.cx-layout #content-main .cx-field__check > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

/* Beats admin-custom.css's !important grey for disabled (curator read-only) inputs. */
body.cx-layout #content-main .cx-field__check > input[type="checkbox"]:disabled {
  background: var(--cx-switch-off) !important;
  opacity: 0.55;
  cursor: default;
}

body.cx-layout #content-main .cx-field__check > input[type="checkbox"]:checked:disabled {
  background: var(--cx-accent) !important;
}

body.cx-layout #content-main .cx-field__check > .cx-field__check-text {
  color: var(--cx-label-color);
  font-size: 0.875rem;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  body.cx-layout #content-main .cx-field__check > input[type="checkbox"],
  body.cx-layout #content-main .cx-field__check > input[type="checkbox"]::before {
    transition: none;
  }
}

body.cx-layout #content-main .cx-field--readonly > .readonly {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

/* Links in read-only values (a related record): the brand's darker gold (light gold in
   dark mode) instead of Django's blue, underlined only on hover so it doesn't echo the
   field hairlines. */
body.cx-layout {
  --cx-readonly-link: #8a6d2b;
}

html[data-theme="dark"] body.cx-layout {
  --cx-readonly-link: #e6c98a;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout {
    --cx-readonly-link: #e6c98a;
  }
}

body.cx-layout #content-main .cx-field--readonly > .readonly a,
body.cx-layout #content-main .cx-field--readonly > .readonly a:visited {
  color: var(--cx-readonly-link);
  font-weight: 500;
  text-decoration: none;
}

body.cx-layout #content-main .cx-field--readonly > .readonly a:hover,
body.cx-layout #content-main .cx-field--readonly > .readonly a:focus-visible {
  color: var(--cx-readonly-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* View-only change pages (no change permission, so every field in the card is read-only):
   the edit form's two-column grid, a muted label, the value on a field-height line with a
   hairline under it, and the help text below. Rail cards keep their own layout. */
body.cx-layout #content-main .cx-card:not(.cx-card--rail) fieldset.cx-card__fields:not(:has(.cx-field__control, .cx-field__check:not(.cx-field__check--view))) {
  row-gap: 22px;
}

body.cx-layout #content-main .cx-card:not(.cx-card--rail) fieldset.cx-card__fields:not(:has(.cx-field__control, .cx-field__check:not(.cx-field__check--view))) > .cx-field--readonly {
  grid-column: auto;
  gap: 4px;
}

body.cx-layout #content-main .cx-card:not(.cx-card--rail) fieldset.cx-card__fields:not(:has(.cx-field__control, .cx-field__check:not(.cx-field__check--view))) > .cx-field--readonly:is([class*="notes"], [class*="description"], [class*="details"]) {
  grid-column: 1 / -1;
}

body.cx-layout #content-main .cx-card:not(.cx-card--rail) fieldset.cx-card__fields:not(:has(.cx-field__control, .cx-field__check:not(.cx-field__check--view))) > .cx-field--readonly > label {
  color: var(--cx-muted);
  font-weight: 500;
}

body.cx-layout #content-main .cx-card:not(.cx-card--rail) fieldset.cx-card__fields:not(:has(.cx-field__control, .cx-field__check:not(.cx-field__check--view))) > .cx-field--readonly > .readonly {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 2.25rem;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--cx-line);
  color: var(--body-fg, #333);
  font-size: 0.9375rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body.cx-layout #content-main .cx-card:not(.cx-card--rail) fieldset.cx-card__fields:not(:has(.cx-field__control, .cx-field__check:not(.cx-field__check--view))) > .cx-field--readonly > .help {
  padding-top: 2px;
  font-size: 0.78125rem;
}

/* ---- Inline cards (condition log, images, files) ---- */
body.cx-layout #content-main .cx-inline {
  margin: 0;
}

body.cx-layout #content-main .cx-inline > .inline-related > fieldset.module > .cx-inline__title {
  padding: 18px 24px 12px;
}

/* ---- Card subsection: Earlier condition checks (inside Conservation cycle) ---- */
body.cx-layout #content-main .cx-subsection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--cx-line);
}

body.cx-layout #content-main .cx-subsection__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

body.cx-layout #content-main h3.cx-subsection__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--body-fg, #1f1c17);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.cx-layout #content-main button.cx-subsection__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 34px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-chip-bg);
  color: var(--cx-chip-fg);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: none;
  cursor: pointer;
}

body.cx-layout #content-main button.cx-subsection__action[hidden] {
  display: none;
}

body.cx-layout #content-main button.cx-subsection__action:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

body.cx-layout #content-main button.cx-subsection__action:hover {
  border-color: color-mix(in srgb, var(--cx-accent) 55%, transparent);
  background: color-mix(in srgb, var(--cx-accent) 8%, var(--cx-chip-bg));
}

body.cx-layout #content-main button.cx-subsection__action:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout #content-main .cx-subsection > .inline-related > fieldset.module {
  margin: 0;
  padding: 0;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  overflow: hidden;
  background: none;
  box-shadow: none;
}

body.cx-layout #content-main .cx-subsection .cx-empty-note {
  padding: 18px;
  border-color: var(--cx-input-border);
  border-radius: 10px;
  background: var(--cx-chip-bg);
  font-size: 0.84375rem;
}

/* ---- Images & files card: gallery + file list ----
   cx_inline_gallery.html / cx_inline_files.html keep Django's table markup
   (inlines.js needs it); here the table becomes a tile grid / list. The
   legacy archive-item inline rules in admin-custom.css style the same
   #images-group / #files-group rows with !important (mobile card layout,
   label pseudo-elements; selectors up to (1,4,3)). Rules here go through the
   card id (#content-main #section-images-files) to out-rank them, and repeat !important where
   the legacy rule has it. */
body.cx-layout #content-main #section-images-files :is(.cx-gallery, .cx-files) {
  margin: 0 !important;
  overflow: visible !important;
}

body.cx-layout #content-main #section-images-files :is(.cx-gallery, .cx-files) > .inline-related,
body.cx-layout #content-main #section-images-files :is(.cx-gallery, .cx-files) > .inline-related > fieldset.module {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
}

body.cx-layout #content-main #section-images-files :is(.cx-gallery, .cx-files) table {
  display: block !important;
  width: 100% !important;
  margin: 0;
  border: 0 !important;
  background: none;
  overflow: visible !important; /* legacy inline tables force overflow-x: scroll */
}

body.cx-layout #content-main #section-images-files :is(.cx-gallery, .cx-files) :is(tr, td) {
  box-sizing: border-box;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body.cx-layout #content-main #section-images-files :is(.cx-gallery, .cx-files) td::before {
  content: none !important;
  display: none !important;
}

body.cx-layout #content-main #section-images-files :is(.cx-gallery, .cx-files) :is(tr.empty-form, td.original) {
  display: none !important;
}

/* Gallery grid */
body.cx-layout #content-main #section-images-files .cx-gallery tbody {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
}

body.cx-layout #content-main #section-images-files .cx-gallery tr.row-form-errors {
  display: block !important;
  grid-column: 1 / -1;
}

body.cx-layout #content-main #section-images-files .cx-gallery tr.cx-tile {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

/* The template row also carries cx-tile; keep it hidden (same specificity, so it must come after). */
body.cx-layout #content-main #section-images-files .cx-gallery tr.cx-tile.empty-form {
  display: none !important;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-caption {
  align-self: stretch;
  width: 100% !important;
  max-width: none !important;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-thumbnail {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 132px;
  overflow: hidden;
  border: 1px solid var(--cx-thumb-border) !important;
  border-radius: 10px;
  background: var(--cx-thumb-bg) !important;
  color: var(--cx-muted);
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-thumbnail > p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* No image yet: picture placeholder. */
body.cx-layout #content-main #section-images-files .cx-gallery td.field-thumbnail > p:not(:has(img))::before {
  content: "";
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-thumbnail img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  cursor: zoom-in;
}

body.cx-layout #content-main #section-images-files .cx-gallery .cx-tile__badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  color: #2a3d2a;
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none;
}

/* Image field: the file input stays in the form but is hidden; a pill label
   over the thumbnail opens it. */
body.cx-layout #content-main #section-images-files .cx-gallery td.field-image {
  position: absolute !important;
  top: 8px;
  left: 8px;
  z-index: 2;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-image:has(.errorlist) {
  position: static !important;
  order: 3;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-image :is(p.file-upload, input[type="file"]) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-image :is(.cx-tile__replace, .cx-tile__choose) {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  color: #3a342b;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-image .cx-tile__replace {
  opacity: 0;
  transition: opacity 0.12s ease;
}

body.cx-layout #content-main #section-images-files .cx-gallery tr.cx-tile:is(:hover, :focus-within) td.field-image .cx-tile__replace {
  opacity: 1;
}

@media (hover: none) {
  body.cx-layout #content-main #section-images-files .cx-gallery td.field-image .cx-tile__replace {
    opacity: 1;
  }
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-image input[type="file"]:focus-visible + :is(.cx-tile__replace, .cx-tile__choose),
body.cx-layout #content-main #section-images-files .cx-gallery td.field-image p.file-upload:focus-within + .cx-tile__replace {
  opacity: 1;
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-caption input {
  box-sizing: border-box;
  width: 100% !important;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 8px !important;
  background-color: var(--cx-input-bg);
  color: var(--cx-input-fg);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.field-caption input:focus {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 18%, transparent) !important;
}

/* Remove: saved images tick Django's DELETE box (styled as a round ✕);
   new images use inlines.js's "Remove" link. */
body.cx-layout #content-main #section-images-files .cx-gallery td.delete {
  position: absolute !important;
  top: 8px;
  right: 8px;
  z-index: 2;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.delete input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

body.cx-layout #content-main #section-images-files .cx-gallery td.delete :is(.cx-tile__remove, a.inline-deletelink) {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(31, 28, 23, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 14px no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -999px;
  cursor: pointer;
}

body.cx-layout #content-main #section-images-files .cx-gallery td.delete input:focus-visible + .cx-tile__remove,
body.cx-layout #content-main #section-images-files .cx-gallery td.delete a.inline-deletelink:focus-visible {
  outline: 2px solid var(--cx-accent) !important;
  outline-offset: 2px;
}

/* Marked for removal: dim the tile until Save (untick to keep it). */
body.cx-layout #content-main #section-images-files .cx-gallery td.delete input:checked + .cx-tile__remove {
  background-color: var(--cx-delete-fg) !important;
}

body.cx-layout #content-main #section-images-files .cx-gallery tr.cx-tile:has(td.delete input:checked) :is(td.field-thumbnail, td.field-caption) {
  opacity: 0.45;
  filter: grayscale(1);
}

body.cx-layout #content-main #section-images-files .cx-gallery tr.cx-tile:has(td.delete input:checked) .cx-tile__badge {
  display: none;
}

body.cx-layout #content-main #section-images-files .cx-gallery tr.cx-tile:has(td.delete input:checked)::after {
  content: "Removed when you save";
  position: absolute;
  bottom: 50px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cx-delete-fg);
  color: #fff;
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Add images tile (Django's add row, rebuilt by admin_cx_layout.js). */
body.cx-layout #content-main #section-images-files .cx-gallery tr.add-row {
  display: block !important;
}

body.cx-layout #content-main #section-images-files .cx-gallery tr.add-row > td {
  display: block !important;
  height: 100%;
}

body.cx-layout #content-main #section-images-files .cx-gallery tr.add-row a.addlink {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100% !important;
  height: 132px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1.5px dashed var(--cx-dashed) !important;
  border-radius: 10px !important;
  background: var(--cx-chip-bg) !important;
  color: var(--cx-chip-fg) !important;
  font-family: 'DM Sans', sans-serif;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.cx-layout #content-main #section-images-files .cx-gallery tr.add-row a.addlink:hover,
body.cx-layout #content-main #section-images-files .cx-gallery.cx-drop-target tr.add-row a.addlink {
  border-color: var(--cx-accent) !important;
  background: color-mix(in srgb, var(--cx-accent) 8%, var(--cx-chip-bg)) !important;
}

body.cx-layout #content-main #section-images-files .cx-gallery tr.add-row a.addlink:focus-visible {
  outline: 2px solid var(--cx-accent) !important;
  outline-offset: 2px;
}

body.cx-layout #content-main #section-images-files .cx-gallery .cx-tile__add-title {
  font-size: 0.84375rem;
  font-weight: 600;
}

body.cx-layout #content-main #section-images-files .cx-gallery .cx-tile__add-hint {
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

/* File list */
body.cx-layout #content-main #section-images-files .cx-files {
  gap: 0;
}

body.cx-layout #content-main #section-images-files .cx-files__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.cx-layout #content-main #section-images-files .cx-files__head > .cx-subsection__action {
  flex: none;
  white-space: nowrap;
}

body.cx-layout #content-main #section-images-files .cx-files__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--cx-file-icon-bg);
  color: var(--cx-muted);
}

body.cx-layout #content-main #section-images-files .cx-files__intro {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-layout #content-main #section-images-files .cx-files__empty {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Hide the empty note once a new file row has been added. */
body.cx-layout #content-main #section-images-files .cx-files:has(tr.form-row:not(.empty-form):not(.has_original)) .cx-files__empty {
  display: none;
}

body.cx-layout #content-main #section-images-files .cx-files tbody {
  display: block !important;
  margin-top: 12px;
}

body.cx-layout #content-main #section-images-files .cx-files tbody:not(:has(tr.form-row:not(.empty-form))) {
  margin-top: 0;
}

body.cx-layout #content-main #section-images-files .cx-files tr.add-row {
  display: none !important;
}

body.cx-layout #content-main #section-images-files .cx-files tr.form-row:not(.empty-form),
body.cx-layout #content-main #section-images-files .cx-files tr.row-form-errors {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0 !important;
  border-top: 1px solid var(--cx-line) !important;
}

body.cx-layout #content-main #section-images-files .cx-files td.field-file {
  display: flex !important;
  flex: 1 1 16rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

body.cx-layout #content-main #section-images-files .cx-files td.delete {
  display: flex !important;
  flex: none;
  width: auto !important; /* legacy inline CSS pins the delete column to 72px */
  max-width: none !important;
  min-width: 0 !important;
  align-items: center;
}

body.cx-layout #content-main #section-images-files .cx-files .cx-file-row__type {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 1px solid var(--cx-chip-border);
  border-radius: 6px;
  background: var(--cx-chip-bg);
  color: var(--cx-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Name above its size ("1.2 MB"). */
body.cx-layout #content-main #section-images-files .cx-files .cx-file-row__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

body.cx-layout #content-main #section-images-files .cx-files .cx-file-row__size {
  color: var(--cx-muted);
  font-size: 0.75rem;
}

body.cx-layout #content-main #section-images-files .cx-files a.cx-file-row__name,
body.cx-layout #content-main #section-images-files .cx-files a.cx-file-row__name:visited {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cx-accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Saved file with a replacement picked (admin_cx_layout.js). */
body.cx-layout #content-main #section-images-files .cx-files tr.cx-file-row--replaced a.cx-file-row__name {
  color: var(--cx-input-fg);
  cursor: default;
}

body.cx-layout #content-main #section-images-files .cx-files tr.cx-file-row--replaced a.cx-file-row__name::after {
  content: "Replaces on save";
  margin-left: 8px;
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

body.cx-layout #content-main #section-images-files .cx-files a.cx-file-row__name:hover,
body.cx-layout #content-main #section-images-files .cx-files a.cx-file-row__name:focus-visible {
  text-decoration: underline;
}

/* Saved files: Django's "Currently / Change" widget is hidden behind Replace. */
body.cx-layout #content-main #section-images-files .cx-files tr.has_original td.field-file :is(p.file-upload, input[type="file"]) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.cx-layout #content-main #section-images-files .cx-files :is(.cx-file-row__replace, .cx-file-row__remove, a.inline-deletelink) {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 30px;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--cx-chip-border) !important;
  border-radius: 8px !important;
  background: var(--cx-chip-bg) !important;
  color: var(--cx-chip-fg) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem !important;
  font-weight: 500;
  text-decoration: none !important;
  cursor: pointer;
}

body.cx-layout #content-main #section-images-files .cx-files a.inline-deletelink {
  width: auto !important;
  text-indent: 0 !important;
  background-image: none !important;
}

/* A new row waiting on the file picker (admin_cx_layout.js). */
body.cx-layout #content-main #section-images-files tr.cx-picking {
  display: none !important;
}

/* Remove: a trash icon button. On saved rows it wraps Django's delete checkbox
   (visually hidden, still focusable); pressed = the file goes on save. */
body.cx-layout #content-main #section-images-files .cx-files :is(.cx-file-row__remove, a.inline-deletelink) {
  position: relative;
  justify-content: center;
  width: 30px !important;
  padding: 0 !important;
  color: var(--cx-delete-fg) !important;
}

body.cx-layout #content-main #section-images-files .cx-files :is(.cx-file-row__remove, a.inline-deletelink):hover {
  border-color: var(--cx-delete-fg) !important;
}

body.cx-layout #content-main #section-images-files .cx-files .cx-file-row__remove:has(input:checked) {
  border-color: var(--cx-delete-fg) !important;
  background: var(--cx-delete-fg) !important;
  color: var(--cx-switch-knob) !important;
}

body.cx-layout #content-main #section-images-files .cx-files .cx-file-row__remove:has(input:focus-visible) {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout #content-main #section-images-files .cx-files .cx-file-row__remove input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

body.cx-layout #content-main #section-images-files .cx-files :is(.cx-file-row__remove, a.inline-deletelink) svg {
  flex: none;
  width: 16px;
  height: 16px;
}

body.cx-layout #content-main #section-images-files .cx-files tr:has(td.delete input:checked) a.cx-file-row__name {
  color: var(--cx-muted);
  text-decoration: line-through;
}

/* New file rows: the native picker, styled to match. */
body.cx-layout #content-main #section-images-files .cx-files td.field-file input[type="file"] {
  max-width: 100%;
  color: var(--cx-label-color);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
}

body.cx-layout #content-main #section-images-files .cx-files td.field-file input[type="file"]::file-selector-button {
  height: 30px;
  margin-right: 10px;
  padding: 0 10px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 8px;
  background: var(--cx-chip-bg);
  color: var(--cx-chip-fg);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

body.cx-layout #content-main #section-images-files .cx-files.cx-drop-target {
  outline: 2px dashed var(--cx-accent);
  outline-offset: 6px;
  border-radius: 4px;
}

body.cx-layout #content-main #section-images-files .cx-gallery.cx-drop-target {
  outline: 2px dashed var(--cx-accent);
  outline-offset: 6px;
  border-radius: 10px;
}

/* ---- Rail: summary list + restoration history ---- */
body.cx-layout #content-main .cx-dl {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

body.cx-layout #content-main .cx-dl > dt {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-weight: 400;
}

body.cx-layout #content-main .cx-dl > dd {
  margin: 0;
  padding: 0;
  color: var(--body-fg, #333);
  font-weight: 500;
  overflow-wrap: anywhere;
}

body.cx-layout #content-main .cx-dl__sub {
  display: block;
  color: var(--cx-muted);
  font-weight: 400;
}

body.cx-layout #content-main .cx-project-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-layout #content-main .cx-project-list > li.cx-project {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--cx-line);
  list-style: none;
}

body.cx-layout #content-main .cx-project-list > li.cx-project:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

body.cx-layout #content-main .cx-project__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

body.cx-layout #content-main a.cx-project__name,
body.cx-layout #content-main a.cx-project__name:visited {
  color: var(--cx-accent);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

body.cx-layout #content-main a.cx-project__name:hover,
body.cx-layout #content-main a.cx-project__name:focus-visible {
  text-decoration: underline;
}

/* Same moss CTA as the Save button. */
body.cx-layout #content-main .button.cx-project__action {
  align-self: stretch;
  box-sizing: border-box;
  min-height: 2.25rem;
  margin: 2px 0 0;
  padding: 8px 14px;
  border: 1px solid var(--admin-submit-primary-bg, #2a3d2a);
  background: var(--admin-submit-primary-bg, #2a3d2a);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
}

body.cx-layout #content-main .button.cx-project__action:hover,
body.cx-layout #content-main .button.cx-project__action:focus-visible {
  background: color-mix(in srgb, var(--admin-submit-primary-bg, #2a3d2a) 88%, black 12%);
  border-color: color-mix(in srgb, var(--admin-submit-primary-bg, #2a3d2a) 88%, black 12%);
}

body.cx-layout #content-main .cx-project-add {
  margin: 12px 0 0;
}

/* Plain text link: no Django + icon. */
body.cx-layout #content-main .cx-project-add a.addlink {
  padding-left: 0;
  background-image: none;
}

body.cx-layout #content-main .cx-empty-note {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed var(--cx-line);
  border-radius: 8px;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

body.cx-layout #content-main .cx-inline-message {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout #content-main .cx-inline-message--success { background: #eaf7ee; border-color: #b7dfc5; color: #155724; }
body.cx-layout #content-main .cx-inline-message--info { background: #e8f4fd; border-color: #b9dcf7; color: #0c5460; }
body.cx-layout #content-main .cx-inline-message--warning { background: #fff8e5; border-color: #ffe08a; color: #7a5a00; }
body.cx-layout #content-main .cx-inline-message--error { background: #fdecea; border-color: #f5c6cb; color: #842029; }

/* ---- Bottom action bar ---- */
body.cx-layout #content-main .cx-dirty-indicator {
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout #content-main .cx-dirty-indicator::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c98a00;
}

body.cx-layout.custodia-form-dirty #content-main .cx-dirty-indicator[hidden] {
  display: inline-flex;
}

/* The submit row sits at the end of the page. While there are unsaved changes
   and it is off screen, admin_quick_save.js slides up .custodia-quick-save-bar
   (Save only, no Delete). */
body.cx-layout #content-main .submit-row {
  margin-top: var(--cx-gap);
}

@media (min-width: 768px) {
  /* One flex row: "Unsaved changes" on the left, then Delete next to Save. */
  body.cx-layout #content-main .submit-row {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
  }

  body.cx-layout #content-main .custodia-submit-actions {
    display: contents;
  }

  body.cx-layout #content-main .submit-row > :is(a.deletelink, a.custodia-row-cancel) {
    order: 1;
    margin: 0 !important;
  }

  body.cx-layout #content-main .submit-row input[name="_save"] {
    order: 2;
  }
}

/* Delete: a quiet red text link, not a button. */
body.cx-layout #content-main .submit-row a.deletelink,
body.cx-layout #content-main .submit-row a.deletelink:visited {
  width: auto !important;
  height: auto !important;
  padding: 6px 2px !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--cx-delete-fg) !important;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4 !important;
  text-align: left !important;
}

body.cx-layout #content-main .submit-row a.deletelink:is(:hover, :focus-visible, :active) {
  background: none !important;
  box-shadow: none !important;
  color: var(--cx-delete-fg) !important;
  text-decoration: underline !important;
}

/* Phone width: Save is full width, so Delete becomes a matching outlined button. */
@media (max-width: 767px) {
  body.custodia-form-dirty.cx-layout #content-main .submit-row a.custodia-row-cancel {
    justify-content: center;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 8px 16px;
    border: 1px solid var(--cx-line);
    border-radius: 8px;
    text-decoration: none;
  }

  body.cx-layout #content-main .submit-row a.deletelink,
  body.cx-layout #content-main .submit-row a.deletelink:visited {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 40px;
    padding: 8px 16px !important;
    border: 1px solid color-mix(in srgb, var(--cx-delete-fg) 35%, transparent) !important;
    border-radius: 8px !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  body.cx-layout #content-main .submit-row a.deletelink:is(:hover, :focus-visible, :active) {
    background: color-mix(in srgb, var(--cx-delete-fg) 8%, transparent) !important;
    text-decoration: none !important;
  }
}

/* Floating save bar: solid, with an "Unsaved changes" cue on the left. */
body.cx-layout .custodia-quick-save-bar {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--body-bg, #fff);
  backdrop-filter: none;
}

/* Desktop app shell: the bar starts at the sidebar's edge, 232px open or 64px collapsed
   (--cx-side-w), instead of admin-custom.css's fixed 265px. */
@media (min-width: 1025px) {
  body.cx-shell:not(.popup):has(#nav-sidebar) .custodia-quick-save-bar {
    left: var(--cx-side-w);
  }
}

body.cx-layout .custodia-quick-save-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout .custodia-quick-save-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c98a00;
}

/* ===========================================
   HISTORY PAGE (templates/admin/core/archiveitem/object_history.html)
   Header, cards and rail reuse the change-page rules above.
   =========================================== */
body.cx-history {
  --cx-hist-changed-bg: #eef3f9;
  --cx-hist-changed-border: #d3e0ee;
  --cx-hist-changed-fg: #1d4a73;
  --cx-hist-added-bg: #eaf2e7;
  --cx-hist-added-border: #cfe0c9;
  --cx-hist-added-fg: #2a5a2a;
  --cx-hist-deleted-bg: #f9ebe8;
  --cx-hist-deleted-border: #ecccc6;
  --cx-hist-deleted-fg: #8a1f14;
  --cx-hist-day-bg: #f8f3ea;
  --cx-hist-row-line: #efe7d8;
}

html[data-theme="dark"] body.cx-history {
  --cx-hist-changed-bg: rgba(125, 170, 220, 0.12);
  --cx-hist-changed-border: rgba(125, 170, 220, 0.32);
  --cx-hist-changed-fg: #b9d3ee;
  --cx-hist-added-bg: rgba(130, 190, 130, 0.12);
  --cx-hist-added-border: rgba(130, 190, 130, 0.32);
  --cx-hist-added-fg: #b8dcb3;
  --cx-hist-deleted-bg: rgba(229, 115, 115, 0.12);
  --cx-hist-deleted-border: rgba(229, 115, 115, 0.32);
  --cx-hist-deleted-fg: #f0b4ac;
  --cx-hist-day-bg: rgba(240, 234, 216, 0.05);
  --cx-hist-row-line: rgba(240, 234, 216, 0.12);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-history {
    --cx-hist-changed-bg: rgba(125, 170, 220, 0.12);
    --cx-hist-changed-border: rgba(125, 170, 220, 0.32);
    --cx-hist-changed-fg: #b9d3ee;
    --cx-hist-added-bg: rgba(130, 190, 130, 0.12);
    --cx-hist-added-border: rgba(130, 190, 130, 0.32);
    --cx-hist-added-fg: #b8dcb3;
    --cx-hist-deleted-bg: rgba(229, 115, 115, 0.12);
    --cx-hist-deleted-border: rgba(229, 115, 115, 0.32);
    --cx-hist-deleted-fg: #f0b4ac;
    --cx-hist-day-bg: rgba(240, 234, 216, 0.05);
    --cx-hist-row-line: rgba(240, 234, 216, 0.12);
  }
}

/* Same title style as the change page (admin-custom.css only styles change-form h1s). */
body.cx-history #content h1.cx-header__title {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 700;
}

body.cx-history #content .cx-header__eyebrow,
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings, .model-automationsettings) #content .cx-header__eyebrow {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.cx-history #content-main .cx-card.cx-history-log {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

body.cx-history #content-main .cx-history-log__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 18px 20px 16px;
}

body.cx-history #content-main .cx-history-log__toolbar .cx-card__title {
  margin-right: auto;
}

body.cx-history #content-main .cx-segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: var(--cx-file-icon-bg);
}

body.cx-history #content-main button.cx-segmented__btn {
  min-height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--cx-chip-fg);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

body.cx-history #content-main button.cx-segmented__btn span {
  margin-left: 3px;
  color: var(--cx-muted);
}

body.cx-history #content-main button.cx-segmented__btn[aria-pressed="true"] {
  background: var(--cx-input-bg);
  box-shadow: 0 1px 2px rgba(42, 61, 42, 0.14);
  color: var(--body-fg, #1f1c17);
  font-weight: 600;
}

body.cx-history #content-main button.cx-segmented__btn:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 1px;
}

body.cx-history #content-main select.cx-history-log__person {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background-color: var(--cx-input-bg);
  color: var(--cx-input-fg);
}

body.cx-history #content-main .cx-history-day[hidden],
body.cx-history #content-main .cx-history-entry[hidden],
body.cx-history #content-main .cx-history-log__empty[hidden] {
  display: none;
}

body.cx-history #content-main h3.cx-history-day__label {
  margin: 0;
  padding: 9px 20px;
  border-top: 1px solid var(--cx-hist-row-line);
  border-bottom: 1px solid var(--cx-hist-row-line);
  background: var(--cx-hist-day-bg);
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.cx-history #content-main .cx-history-entry {
  display: flex;
  gap: 14px;
  padding: 15px 20px;
}

body.cx-history #content-main .cx-history-entry + .cx-history-entry {
  border-top: 1px solid var(--cx-hist-row-line);
}

body.cx-history #content-main .cx-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

body.cx-history #content-main .cx-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 0.72rem;
}

body.cx-history #content-main .cx-avatar--0 { background: #dfe8dc; color: #2a3d2a; }
body.cx-history #content-main .cx-avatar--1 { background: #f1e3cf; color: #7a4a12; }
body.cx-history #content-main .cx-avatar--2 { background: #e8e1f0; color: #4a3570; }
body.cx-history #content-main .cx-avatar--3 { background: #dde9ee; color: #1f4a5a; }

body.cx-history #content-main .cx-history-entry__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

body.cx-history #content-main p.cx-history-entry__line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: var(--body-fg, #3a342b);
  font-size: 0.9rem;
  line-height: 1.45;
}

body.cx-history #content-main p.cx-history-entry__line > span {
  flex: 1 1 auto;
  min-width: 0;
}

body.cx-history #content-main p.cx-history-entry__line time {
  flex: none;
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-history #content-main .cx-history-entry__quiet {
  color: var(--cx-muted);
}

body.cx-history #content-main .cx-history-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: 1px;
}

body.cx-history #content-main .cx-history-pill--added {
  background: var(--cx-hist-added-bg);
  color: var(--cx-hist-added-fg);
}

body.cx-history #content-main ul.cx-history-entry__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-history #content-main li.cx-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 26px;
  margin: 0;
  padding: 2px 10px;
  border: 1px solid var(--cx-hist-changed-border);
  border-radius: 6px;
  background: var(--cx-hist-changed-bg);
  color: var(--cx-hist-changed-fg);
  font-size: 0.8125rem;
  line-height: 1.35;
  list-style: none;
  overflow-wrap: anywhere;
}

body.cx-history #content-main li.cx-history-chip--added {
  border-color: var(--cx-hist-added-border);
  background: var(--cx-hist-added-bg);
  color: var(--cx-hist-added-fg);
}

body.cx-history #content-main li.cx-history-chip--deleted {
  border-color: var(--cx-hist-deleted-border);
  background: var(--cx-hist-deleted-bg);
  color: var(--cx-hist-deleted-fg);
}

body.cx-history #content-main li.cx-history-chip svg {
  flex: none;
  width: 13px;
  height: 13px;
}

body.cx-history #content-main .cx-history-log__empty {
  margin: 0;
  padding: 20px;
  color: var(--cx-muted);
}

body.cx-history #content-main p.cx-history-log__footer {
  margin: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--cx-hist-row-line);
  background: none;
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-history #content-main ul.cx-history-people {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-history #content-main ul.cx-history-people > li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  list-style: none;
}

body.cx-history #content-main .cx-history-people__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

body.cx-history #content-main .cx-history-people__count {
  color: var(--cx-muted);
}

body.cx-history #content-main p.cx-history-note {
  margin: 0;
  padding: 0 4px;
  color: var(--cx-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (max-width: 767px) {
  body.cx-history #content-main .cx-history-entry {
    gap: 10px;
    padding: 14px 16px;
  }

  body.cx-history #content-main h3.cx-history-day__label {
    padding: 9px 16px;
  }
}

/* ---- Condition log: remove a check (same ✕ as the image tiles) ---- */
body.cx-layout #content-main .cx-condition-log td.delete {
  width: 44px;
  text-align: center;
  vertical-align: top;
}

body.cx-layout #content-main .cx-condition-log td.delete input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

body.cx-layout #content-main .cx-condition-log .cx-log__remove {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(31, 28, 23, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 14px no-repeat;
  /* Centre on the first 40px control row. */
  margin-top: 6px;
  vertical-align: top;
  cursor: pointer;
}

body.cx-layout #content-main .cx-condition-log td.delete input:focus-visible + .cx-log__remove {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

/* Marked for removal: dim the row until Save (click ✕ again to keep it). */
body.cx-layout #content-main .cx-condition-log td.delete input:checked + .cx-log__remove {
  background-color: var(--cx-delete-fg);
}

body.cx-layout #content-main .cx-condition-log tr:has(td.delete input:checked) > td:not(.delete) {
  opacity: 0.45;
  filter: grayscale(1);
  text-decoration: line-through;
}

/* ---- Condition log: stacked rows when the card is narrow ----
   Switches on the log's own width (container query), so phone, tablet and a
   narrow main column beside the rail all get the same layout. Out-ranks the
   legacy archive-item inline rules in admin-custom.css (tablet overflow-x
   scroll at 601–1024px; phone "card rows" with Existing/Delete labels at
   ≤600px), repeating !important where they use it. */
body.cx-layout #content-main .cx-condition-log {
  container-type: inline-size;
}

@container (max-width: 720px) {
  body.cx-layout #content-main .cx-condition-log .inline-related > fieldset.module {
    overflow: visible !important;
    padding: 0 16px !important;
  }

  body.cx-layout #content-main .cx-condition-log table,
  body.cx-layout #content-main .cx-condition-log tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important; /* legacy inline tables force overflow-x: scroll */
  }

  body.cx-layout #content-main .cx-condition-log thead {
    display: none;
  }

  body.cx-layout #content-main .cx-condition-log tr.form-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px;
    grid-template-areas:
      "date remove"
      "cond cond"
      "who who";
    gap: 12px;
    width: auto !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--cx-line) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  body.cx-layout #content-main .cx-condition-log tr.form-row:first-child {
    border-top: 0 !important;
  }

  body.cx-layout #content-main .cx-condition-log tr.row-form-errors {
    display: block;
    padding-top: 12px;
  }

  body.cx-layout #content-main .cx-condition-log tr.form-row > td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.cx-layout #content-main .cx-condition-log tr.form-row > td.original,
  body.cx-layout #content-main .cx-condition-log tr.form-row > td.hidden {
    display: none !important;
  }

  body.cx-layout #content-main .cx-condition-log td.field-assessment_date { grid-area: date; }
  body.cx-layout #content-main .cx-condition-log td.field-item_condition { grid-area: cond; }
  body.cx-layout #content-main .cx-condition-log td.field-checked_by { grid-area: who; }

  body.cx-layout #content-main .cx-condition-log td.delete {
    grid-area: remove;
    /* Level the ✕ with the date input under its label. */
    padding-top: 20px !important;
  }

  /* Same stacked labels as the field cards. */
  body.cx-layout #content-main .cx-condition-log tr.form-row > td::before {
    display: block;
    margin: 0 0 6px;
    color: var(--cx-label-color);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  body.cx-layout #content-main .cx-condition-log td.field-assessment_date::before { content: "Checked on"; }
  body.cx-layout #content-main .cx-condition-log td.field-item_condition::before { content: "Condition"; }
  body.cx-layout #content-main .cx-condition-log td.field-checked_by::before { content: "Checked by"; }

  body.cx-layout #content-main .cx-condition-log td.delete::before {
    content: none !important;
  }

  /* Keep the date / checker on one row with their buttons. */
  body.cx-layout #content-main .cx-condition-log td :is(.related-widget-wrapper, p.date) > :is(select, input) {
    flex-basis: 7rem;
  }
}

/* ===========================================
   LIST PAGE (Archive Items changelist, body.cx-list)
   templates/admin/core/archiveitem/change_list.html. The table is Django's
   result_list; at ≤1024px the legacy card rows (admin-custom.css) still apply.
   =========================================== */
body.cx-list {
  --cx-list-head-bg: #f8f4ec;
  --cx-list-row-line: #efe7d8;
  --cx-list-selected: #f3ede1;
  --cx-bulk-bg: #1f2b1f;
  --cx-bulk-fg: #f0ead8;
  --cx-bulk-danger: #ffd9d3;
}

html[data-theme="dark"] body.cx-list {
  --cx-list-head-bg: rgba(240, 234, 216, 0.04);
  --cx-list-row-line: rgba(240, 234, 216, 0.1);
  --cx-list-selected: rgba(240, 234, 216, 0.07);
  --cx-bulk-bg: #2f3a2c;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-list {
    --cx-list-head-bg: rgba(240, 234, 216, 0.04);
    --cx-list-row-line: rgba(240, 234, 216, 0.1);
    --cx-list-selected: rgba(240, 234, 216, 0.07);
    --cx-bulk-bg: #2f3a2c;
  }
}

body.cx-list #content-main .cx-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 18px;
}

body.cx-list #content-main .cx-list__heading {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}

body.cx-list #content h1.cx-list__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Fraunces', serif;
  font-size: 1.75rem !important;
  font-weight: 600;
  line-height: 1.2;
}

body.cx-list #content-main .cx-list__count {
  color: var(--cx-muted);
  font-size: 0.875rem;
}

body.cx-layout #content a.cx-btn--primary,
body.cx-layout #content a.cx-btn--primary:visited {
  height: 40px;
  padding: 0 16px;
  border-color: transparent;
  background: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  color: #fff;
  font-weight: 600;
}

body.cx-layout #content a.cx-btn--primary:hover,
body.cx-layout #content a.cx-btn--primary:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--admin-submit-primary-bg, #2a3d2a) 88%, black 12%);
  color: #fff;
}

/* ---- Toolbar: search + filter chips ---- */
body.cx-list #content-main #changelist {
  display: block;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body.cx-list #content-main .cx-list__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

body.cx-list #content-main form.cx-search {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 320px;
  max-width: 100%;
  height: 38px;
  margin: 0 4px 0 0;
  padding: 0 12px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
  color: var(--cx-muted);
}

body.cx-list #content-main form.cx-search:focus-within {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 18%, transparent);
}

body.cx-list #content-main form.cx-search svg {
  flex: none;
  width: 16px;
  height: 16px;
}

body.cx-list #content-main form.cx-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cx-input-fg);
  font-size: 0.875rem;
  outline: none;
}

body.cx-list #content-main .cx-filter {
  position: relative;
}

body.cx-list #content-main .cx-filter__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px 0 12px;
  border: 1px dashed var(--cx-dashed);
  border-radius: 999px;
  background: var(--cx-chip-bg);
  color: var(--cx-chip-fg);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

body.cx-list #content-main .cx-filter__chip::-webkit-details-marker {
  display: none;
}

/* Segmented filter (a list filter with cx_segmented, e.g. Contributors' type): All plus each
   choice with its count; the selected one is raised. */
body.cx-list #content-main .cx-segmented {
  display: inline-flex;
  gap: 2px;
  height: 34px;
  box-sizing: border-box;
  padding: 2px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 8px;
  background: var(--cx-chip-bg);
}

body.cx-list #content-main .cx-segmented a,
body.cx-list #content-main .cx-segmented a:visited {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border-radius: 6px;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

body.cx-list #content-main .cx-segmented a:hover {
  color: var(--cx-label-color);
}

body.cx-list #content-main .cx-segmented a.is-selected {
  background: var(--cx-input-bg);
  box-shadow: 0 1px 2px rgba(31, 28, 23, 0.12);
  color: var(--cx-label-color);
  font-weight: 600;
}

body.cx-list #content-main .cx-segmented__count {
  color: var(--cx-muted);
  font-weight: 400;
  opacity: 0.85;
}

body.cx-list #content-main .cx-filter__chip svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}

body.cx-list #content-main .cx-filter[open] .cx-filter__chip svg {
  transform: rotate(180deg);
}

body.cx-list #content-main .cx-filter__chip:hover,
body.cx-list #content-main .cx-filter[open] .cx-filter__chip {
  border-color: var(--cx-muted);
}

body.cx-list #content-main .cx-filter__chip:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-list #content-main .cx-filter--active .cx-filter__chip {
  border-style: solid;
  border-color: color-mix(in srgb, var(--cx-accent) 55%, transparent);
  background: color-mix(in srgb, var(--cx-accent) 10%, var(--cx-chip-bg));
}

body.cx-list #content-main .cx-filter__chip strong {
  font-weight: 600;
}

body.cx-list #content-main .cx-filter__menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-height: min(400px, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--custodia-card-border-color, var(--cx-line));
  border-radius: 10px;
  background: var(--custodia-card-bg, var(--body-bg));
  box-shadow: 0 10px 28px rgba(31, 28, 23, 0.16);
  list-style: none;
}

body.cx-list #content-main .cx-filter__menu--end {
  right: 0;
  left: auto;
}

body.cx-list #content-main .cx-filter__menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-list #content-main .cx-filter__menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--cx-label-color);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

body.cx-list #content-main .cx-filter__menu a:hover,
body.cx-list #content-main .cx-filter__menu a:focus-visible {
  background: var(--cx-file-icon-bg);
}

body.cx-list #content-main .cx-filter__menu a.is-selected {
  color: var(--cx-accent);
  font-weight: 600;
}

/* A heading inside a filter menu (choices with a "group", e.g. Documents' Attached to). */
body.cx-list #content-main .cx-filter__menu li.cx-filter__group {
  padding: 10px 10px 4px;
  color: var(--cx-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.cx-list #content-main a.cx-list__clear {
  margin-left: 4px;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  text-decoration: underline;
}

/* ---- Results card ---- */
body.cx-list #content-main .cx-list__django-actions {
  display: none;
}

body.cx-list #content-main .cx-list__card {
  overflow: hidden;
  border: 1px solid var(--custodia-card-border-color, var(--cx-line));
  border-radius: 12px;
  background: var(--custodia-card-bg, var(--body-bg));
  box-shadow: var(--custodia-card-shadow, none);
}

/* The card is the surface; the legacy .results card inside it goes flat. */
body.cx-list #content-main #changelist .cx-list__card .results {
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body.cx-list #content-main .cx-list__empty {
  margin: 0;
  padding: 40px 20px;
  color: var(--cx-muted);
  text-align: center;
}

body.cx-list #content-main .cx-list__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 8px 16px;
  border-top: 1px solid var(--cx-list-row-line);
  color: var(--cx-muted);
  font-size: 0.84rem;
}

body.cx-list #content-main .cx-list__empty + .cx-list__footer {
  display: none;
}

body.cx-list #content-main .cx-list__range {
  flex: 1 1 auto;
}

body.cx-list #content-main .cx-list__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--cx-chip-border);
  border-radius: 7px;
  background: var(--cx-chip-bg);
  color: var(--cx-label-color);
}

body.cx-list #content-main a.cx-list__pager:hover,
body.cx-list #content-main a.cx-list__pager:focus-visible {
  border-color: var(--cx-muted);
}

body.cx-list #content-main .cx-list__pager.is-disabled {
  opacity: 0.4;
}

body.cx-list #content-main .cx-list__pager svg {
  width: 16px;
  height: 16px;
}

@media (min-width: 1025px) {
  body.cx-list #content-main #result_list thead th {
    height: 42px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid var(--custodia-card-border-color, var(--cx-line)) !important;
    background: var(--cx-list-head-bg) !important;
    color: var(--cx-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    vertical-align: middle;
  }

  body.cx-list #content-main #result_list thead th a {
    color: inherit !important;
  }

  /* Fit the card: long text columns wrap instead of scrolling sideways
     (until the user drags a column wider — then .changelist-columns-sized). */
  body.cx-list #content-main #changelist #result_list:not(.changelist-columns-sized) {
    min-width: 0 !important;
  }

  body.cx-list #content-main #result_list:not(.changelist-columns-sized) tbody :is(th.field-title_with_image, td.field-location_curr, td.field-category) {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body.cx-list #content-main #result_list .custodia-status-badge {
    white-space: nowrap;
  }

  body.cx-list #content-main #result_list tbody :is(th, td) {
    height: 62px;
    box-sizing: border-box;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--cx-list-row-line) !important;
    background: transparent !important;
    font-size: 0.875rem;
    vertical-align: middle !important;
  }

  /* No tick-box column (view-only lists): the first column gets the room the tick box
     would have given it, so its icon or picture doesn't sit against the card edge. */
  body.cx-list #content-main #result_list:not(:has(.action-checkbox-column)) > :is(thead, tbody) > tr > :first-child {
    padding-left: 20px !important;
  }

  body.cx-list #content-main #result_list tbody tr,
  body.cx-list #content-main #result_list tbody tr:nth-child(even) {
    background: transparent !important;
  }

  body.cx-list #content-main #result_list tbody tr:hover > :is(th, td) {
    background: color-mix(in srgb, var(--cx-list-selected) 60%, transparent) !important;
  }

  body.cx-list #content-main #result_list tbody tr.selected > :is(th, td) {
    background: var(--cx-list-selected) !important;
  }

  body.cx-list #content-main #result_list :is(th, td).action-checkbox input[type="checkbox"],
  body.cx-list #content-main #result_list #action-toggle {
    accent-color: var(--cx-accent);
  }

  body.cx-list #content-main #result_list th.field-title_with_image a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
  }

  body.cx-list #content-main #result_list .admin-changelist-thumb {
    flex: none;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    box-sizing: border-box;
    border: 1px solid var(--cx-thumb-border);
    border-radius: 8px !important;
    background: var(--cx-thumb-bg);
    object-fit: cover;
  }
}

/* ≤1024px: legacy card rows — drop the outer card so rows aren't cards in a card. */
@media (max-width: 1024px) {
  body.cx-list #content-main .cx-list__card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  body.cx-list #content-main .cx-list__footer {
    padding: 4px 0;
    border-top: 0;
  }
}

@media (max-width: 767px) {
  body.cx-list #content h1.cx-list__title {
    font-size: 1.4rem !important;
  }

  body.cx-list #content-main form.cx-search {
    width: 100%;
    margin-right: 0;
  }
}

/* ---- Floating bulk-action bar ---- */
body.cx-list #content-main :is(.cx-bulk, .cx-savebar) {
  position: sticky;
  z-index: 40;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  height: 52px;
  margin: 16px auto 0;
  padding: 0 8px 0 18px;
  border: 1px solid rgba(240, 234, 216, 0.12);
  border-radius: 12px;
  background: var(--cx-bulk-bg);
  box-shadow: 0 10px 30px rgba(31, 28, 23, 0.28);
  color: var(--cx-bulk-fg);
  font-size: 0.875rem;
}

body.cx-list #content-main :is(.cx-bulk, .cx-savebar)[hidden] {
  display: none;
}

body.cx-list #content-main .cx-bulk__count {
  font-weight: 600;
  white-space: nowrap;
}

body.cx-list #content-main .cx-bulk__sep {
  width: 1px;
  height: 22px;
  background: rgba(240, 234, 216, 0.25);
}

body.cx-list #content-main :is(.cx-bulk, .cx-savebar) button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(240, 234, 216, 0.1);
  box-shadow: none;
  color: var(--cx-bulk-fg);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}

body.cx-list #content-main :is(.cx-bulk, .cx-savebar) button:hover,
body.cx-list #content-main :is(.cx-bulk, .cx-savebar) button:focus-visible {
  background: rgba(240, 234, 216, 0.18);
}

body.cx-list #content-main :is(.cx-bulk, .cx-savebar) button:focus-visible {
  outline: 2px solid var(--cx-bulk-fg);
  outline-offset: 2px;
}

body.cx-list #content-main .cx-bulk .cx-bulk__action--danger {
  color: var(--cx-bulk-danger);
}

body.cx-list #content-main .cx-bulk button.cx-bulk__clear {
  width: 36px;
  justify-content: center;
  padding: 0;
  background: transparent;
}

body.cx-list #content-main .cx-bulk svg {
  width: 16px;
  height: 16px;
}

/* ---- List / Grid toggle and grid view ---- */
body.cx-list #content-main .cx-view-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 9px;
  background: var(--cx-chip-bg);
}

body.cx-list #content-main .cx-view-toggle[hidden] {
  display: none;
}

body.cx-list #content-main .cx-view-toggle button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--cx-muted);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

body.cx-list #content-main .cx-view-toggle button[aria-pressed="true"] {
  background: var(--cx-input-bg);
  box-shadow: 0 1px 2px rgba(42, 61, 42, 0.12);
  color: var(--cx-accent);
  font-weight: 600;
}

body.cx-list #content-main .cx-view-toggle button:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 1px;
}

body.cx-list #content-main .cx-view-toggle svg {
  width: 16px;
  height: 16px;
}

body.cx-list #content-main .cx-grid {
  display: none;
}

body.cx-list #content-main #changelist[data-cx-view="grid"] .cx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

/* Grid view: the table goes, the footer stays as a plain line under the cards. */
body.cx-list #content-main #changelist[data-cx-view="grid"] .cx-list__card .results {
  display: none;
}

body.cx-list #content-main #changelist[data-cx-view="grid"] .cx-list__card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.cx-list #content-main #changelist[data-cx-view="grid"] .cx-list__footer {
  padding: 4px 0;
  border-top: 0;
}

body.cx-list #content-main .cx-grid__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--custodia-card-border-color, var(--cx-line));
  border-radius: 12px;
  background: var(--custodia-card-bg, var(--body-bg));
  box-shadow: var(--custodia-card-shadow, none);
  list-style: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

body.cx-list #content-main .cx-grid__card:hover {
  border-color: color-mix(in srgb, var(--cx-muted) 45%, transparent);
}

body.cx-list #content-main .cx-grid__card:has(.cx-grid__select:checked) {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 1px var(--cx-accent);
}

body.cx-list #content-main .cx-grid__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 164px;
  background: var(--cx-thumb-bg);
  color: var(--cx-muted);
}

body.cx-list #content-main .cx-grid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.cx-list #content-main .cx-grid__media > svg {
  width: 30px;
  height: 30px;
}

body.cx-list #content-main .cx-grid__status {
  position: absolute;
  top: 10px;
  left: 10px;
}

body.cx-list #content-main .cx-grid__status {
  right: 40px;
  display: flex;
}

body.cx-list #content-main .cx-grid__status .custodia-status-badge {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(31, 28, 23, 0.12);
}

body.cx-list #content-main input.cx-grid__select {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--cx-accent);
  cursor: pointer;
}

body.cx-list #content-main .cx-grid__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}

body.cx-list #content-main a.cx-grid__title,
body.cx-list #content-main a.cx-grid__title:visited {
  color: var(--cx-label-color);
  font-family: 'Fraunces', serif;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* The whole card opens the item; the checkbox and restoration link sit above it. */
body.cx-list #content-main a.cx-grid__title::after {
  content: "";
  position: absolute;
  inset: 0;
}

body.cx-list #content-main a.cx-grid__title:hover,
body.cx-list #content-main a.cx-grid__title:focus-visible {
  text-decoration: underline;
}

/* Restoration link pill: same look as in the table (admin-custom.css scopes it to #result_list). */
body.cx-list #content-main .cx-grid__resto a.archive-project-link {
  position: relative;
  z-index: 1;
  display: inline-block;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
}

body.cx-list #content-main .cx-grid .custodia-status-badge {
  border-color: color-mix(in srgb, currentColor 25%, transparent);
}

body.cx-list #content-main .cx-grid__resto .custodia-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.cx-list #content-main .cx-grid__resto .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
  text-transform: none;
}

body.cx-list #content-main .cx-grid__resto a.archive-project-link:focus-visible {
  outline: 2px solid var(--link-fg);
  outline-offset: 3px;
}

body.cx-list #content-main :is(.cx-grid__meta, .cx-grid__location, .cx-grid__resto) {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

body.cx-list #content-main .cx-grid__meta span + span::before {
  content: " · ";
}

body.cx-list #content-main .cx-grid__location {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--cx-label-color);
}

body.cx-list #content-main .cx-grid__location svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}

body.cx-list #content-main .cx-grid__resto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

@media (max-width: 767px) {
  body.cx-list #content-main #changelist[data-cx-view="grid"] .cx-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  body.cx-list #content-main .cx-grid__media {
    height: 120px;
  }

  body.cx-list #content-main .cx-grid__body {
    padding: 10px 12px 12px;
  }
}

/* ---- "⋯" menus (list rows, grid cards, change-page header) ---- */
body.cx-layout #content .cx-menu {
  display: inline-flex;
}

body.cx-layout #content button.cx-menu__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--cx-muted);
  cursor: pointer;
}

body.cx-layout #content button.cx-menu__btn:hover,
body.cx-layout #content button.cx-menu__btn[aria-expanded="true"] {
  background: var(--cx-file-icon-bg);
  color: var(--cx-label-color);
}

body.cx-layout #content button.cx-menu__btn:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 1px;
}

body.cx-layout #content .cx-menu__btn svg {
  width: 18px;
  height: 18px;
}

body.cx-layout #content .cx-menu__list {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--custodia-card-border-color, var(--cx-line));
  border-radius: 10px;
  background: var(--custodia-card-bg, var(--body-bg));
  box-shadow: 0 10px 28px rgba(31, 28, 23, 0.18);
}

body.cx-layout #content .cx-menu__list[hidden] {
  display: none;
}

body.cx-layout #content .cx-menu__list a,
body.cx-layout #content .cx-menu__list a:visited,
body.cx-layout #content .cx-menu__list button.cx-menu__post {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px !important;
  border-radius: 6px;
  color: var(--cx-label-color) !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
}

body.cx-layout #content .cx-menu__list a:hover,
body.cx-layout #content .cx-menu__list a:focus-visible,
body.cx-layout #content .cx-menu__list button.cx-menu__post:hover,
body.cx-layout #content .cx-menu__list button.cx-menu__post:focus-visible {
  background: var(--cx-file-icon-bg);
  outline: none;
}

body.cx-layout #content .cx-menu__list a.cx-menu__danger {
  color: var(--cx-delete-fg) !important;
}

body.cx-layout #content .cx-menu__list svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Menu item with a second line (e.g. Delete: "12 items become uncategorised"). */
body.cx-layout #content .cx-menu__list :is(a, button.cx-menu__post):has(> .cx-menu__text) {
  align-items: flex-start;
}

body.cx-layout #content .cx-menu__list :is(a, button.cx-menu__post):has(> .cx-menu__text) svg {
  margin-top: 2px;
}

body.cx-layout #content .cx-menu__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

body.cx-layout #content .cx-menu__sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--cx-line);
}

body.cx-layout #content .cx-menu__text small {
  color: var(--cx-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

/* Menu item count, right-aligned (e.g. a client's Invoices / Users). */
body.cx-layout #content .cx-menu__count {
  margin-left: auto;
  padding-left: 12px;
  color: var(--cx-muted);
  font-size: 0.78rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* "Opens in a new tab" mark after the label (e.g. Open archive portal). */
body.cx-layout #content .cx-menu__list svg.cx-menu__newtab {
  width: 13px;
  height: 13px;
  color: var(--cx-muted);
}

/* POST menu items (card post_links, e.g. a user's Resend invite): drawn like the links. */
body.cx-layout #content .cx-menu__list button.cx-menu__post {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* Longer second lines (a user's Resend invite / Cancel invite) wrap instead of widening the menu. */
body.cx-layout #content .cx-menu__list :is(a, button.cx-menu__post) .cx-menu__text small {
  max-width: 220px;
  white-space: normal;
}

/* Delete that can't be used (card delete_blocked, e.g. a contributor who leads projects):
   greyed out, with the reason on the second line. */
body.cx-layout #content .cx-menu__list .cx-menu__disabled {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--cx-muted);
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.75;
  cursor: not-allowed;
}

body.cx-layout #content .cx-menu__list .cx-menu__disabled svg {
  margin-top: 2px;
}

body.cx-layout #content .cx-menu__list .cx-menu__disabled small {
  white-space: normal;
  max-width: 200px;
}

body.cx-layout #content .cx-menu__list .cx-menu__disabled:focus-visible {
  outline: 2px solid var(--cx-accent);
}

/* Resized columns (admin_changelist_resize.js) can total less than the card:
   the table still fills the card and the "⋯" column takes the spare width. */
@media (min-width: 1025px) {
  body.cx-list #content-main #changelist .cx-list__card .results:has(> .changelist-columns-sized) {
    width: auto;
  }

  body.cx-list #content-main #changelist #result_list.changelist-columns-sized {
    width: max(var(--changelist-table-width), 100%) !important;
  }

  body.cx-list #content-main #result_list.changelist-columns-sized > colgroup > col:last-child {
    width: auto !important;
  }
}

body.cx-list #content-main #result_list :is(th.cx-row-menu-col, td.cx-row-menu-cell) {
  width: 48px;
  padding-right: 8px !important;
  padding-left: 0 !important;
  text-align: right;
}

/* Grid: menu beside the title, above the card's full-size link. */
body.cx-list #content-main .cx-grid__title-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

body.cx-list #content-main .cx-grid__title-row .cx-grid__title {
  flex: 1 1 auto;
  min-width: 0;
}

body.cx-list #content-main .cx-grid__title-row .cx-menu {
  position: relative;
  z-index: 1;
  margin: -5px -8px 0 0;
}

/* An open menu sits above later cards' checkboxes and restoration pills. */
body.cx-list #content-main .cx-grid__title-row .cx-menu:has(.cx-menu__btn[aria-expanded="true"]) {
  z-index: 70;
}

/* ---- Rows per page ---- */
body.cx-list #content-main .cx-list__per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

body.cx-list #content-main .cx-list__per-page select {
  height: 32px !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 28px 0 9px !important;
  border: 1px solid var(--cx-input-border) !important;
  border-radius: 7px !important;
  background-position: right 6px center !important;
  background-size: 16px 16px !important;
  background-color: var(--cx-input-bg) !important;
  color: var(--cx-input-fg) !important;
  font-size: 0.84rem;
}

@media (max-width: 767px) {
  body.cx-list #content-main .cx-list__footer {
    flex-wrap: wrap;
  }

  body.cx-list #content-main .cx-list__range {
    flex-basis: 100%;
  }
}


/* ===========================================
   APP SHELL (cx-shell): desktop top bar + sidebar, on every admin page
   base_site.html adds body.cx-shell; admin_cx_shell.js adds the jump palette
   and the sidebar collapse button. Desktop (>= 1025px) here; the tablet/phone
   header and the slide-out drawer are restyled in the two blocks at the end.
   The product showcase embed (html.showcase-embed, 1280px wide) gets the same
   bar; its detail slides show the sidebar collapsed (base_site.html).
   =========================================== */

body.cx-shell {
  --cx-shell-top: 0px;
  --cx-side-w: 232px;
  --cx-side-bg: #fbf8f1;
  --cx-side-line: #e6dccb;
  --cx-side-fg: #3a342b;
  --cx-side-muted: #6b6255;
  --cx-side-hover: #f1ebdf;
  --cx-side-current-bg: #e9e1cf;
  --cx-side-current-fg: #2a3d2a;
  --cx-pal-bg: #fffdf8;
  --cx-pal-line: #e6dccb;
  --cx-pal-fg: #1f1c17;
  --cx-pal-muted: #6b6255;
  --cx-pal-active: #f1ebdf;
}

html.cx-sidebar-collapsed body.cx-shell {
  --cx-side-w: 64px;
}

html[data-theme="dark"] body.cx-shell {
  --cx-side-bg: #1f2022;
  --cx-side-line: #2e3033;
  --cx-side-fg: #d9d2c3;
  --cx-side-muted: #aa9f8a;
  --cx-side-hover: rgba(240, 234, 216, 0.06);
  --cx-side-current-bg: #353128;
  --cx-side-current-fg: #f2ead8;
  --cx-pal-bg: #232427;
  --cx-pal-line: rgba(240, 234, 216, 0.14);
  --cx-pal-fg: #eee8da;
  --cx-pal-muted: #aa9f8a;
  --cx-pal-active: rgba(240, 234, 216, 0.08);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-shell {
    --cx-side-bg: #1f2022;
    --cx-side-line: #2e3033;
    --cx-side-fg: #d9d2c3;
    --cx-side-muted: #aa9f8a;
    --cx-side-hover: rgba(240, 234, 216, 0.06);
    --cx-side-current-bg: #353128;
    --cx-side-current-fg: #f2ead8;
    --cx-pal-bg: #232427;
    --cx-pal-line: rgba(240, 234, 216, 0.14);
    --cx-pal-fg: #eee8da;
    --cx-pal-muted: #aa9f8a;
    --cx-pal-active: rgba(240, 234, 216, 0.08);
  }
}

/* Showcase embed: size its header variables (admin-custom.css) to the bar. */
html.showcase-embed {
  --showcase-header-height: 56px;
  --showcase-logo-size: 34px;
  --cu-brand-wordmark-size: 20px;
}

/* Desktop-only controls. */
.cx-jump-slot,
.cx-sidebar-collapse {
  display: none;
}

@media (min-width: 1025px) {
  /* ---- Top bar: 56px, sticky ---- */
  body.cx-shell {
    --cx-shell-top: 56px;
    --custodia-header-height-base: 56px;
    --custodia-chip-size: 34px;
    --custodia-chip-icon-size: 19px;
  }

  body.cx-shell:not(.login) #header.custodia-admin-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    gap: 16px;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 20px !important;
  }

  body.cx-shell:not(.login) #site-branding.custodia-header-identity {
    flex: 1 1 0 !important;
    gap: 12px !important;
  }

  body.cx-shell:not(.login) #site-branding.custodia-header-identity .org-logo {
    --cu-brand-logo-box: 34px;
    border-radius: 8px;
  }

  body.cx-shell:not(.login) .custodia-header-copy {
    gap: 0;
  }

  body.cx-shell:not(.login) #header #site-name.custodia-header-org,
  body.cx-shell:not(.login) #header #site-name.custodia-header-org:link,
  body.cx-shell:not(.login) #header #site-name.custodia-header-org:visited {
    font-size: 20px !important;
    line-height: 1.25;
  }

  /* The tagline under the site name; with no site name (site_name_in_logo,
     .custodia-header-copy--tag-only) it stands alone, centred on the logo. */
  body.cx-shell:not(.login) .custodia-header-subtitle {
    display: block;
    line-height: 1.3;
  }

  /* Alone, its capitals read high (the line box keeps room for descenders it has none of):
     drop it 1px onto the logo's centre line. */
  body.cx-shell:not(.login) .custodia-header-copy--tag-only .custodia-header-subtitle {
    position: relative;
    top: 1px;
  }

  body.cx-shell:not(.login) .custodia-header-actions {
    flex: 1 1 0;
    gap: 10px;
  }

  body.cx-shell .cx-jump-slot {
    display: flex;
    flex: 0 1 420px;
    justify-content: center;
    min-width: 0;
  }

  /* ---- Sidebar ---- */
  body.cx-shell #main #nav-sidebar {
    position: sticky !important;
    top: var(--cx-shell-top) !important;
    display: flex !important;
    flex-direction: column;
    gap: 22px;
    box-sizing: border-box;
    width: var(--cx-side-w) !important;
    min-width: 0;
    height: calc(100vh - var(--cx-shell-top)) !important;
    max-height: none !important;
    flex-basis: var(--cx-side-w) !important;
    padding: 20px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-right: 1px solid var(--cx-side-line) !important;
    border-inline-end: 1px solid var(--cx-side-line) !important;
    background: var(--cx-side-bg) !important;
    font-family: 'DM Sans', sans-serif;
  }

  body.cx-shell #main > #nav-sidebar + .content {
    max-width: calc(100% - var(--cx-side-w)) !important;
  }

  body.cx-shell #main #nav-sidebar .module {
    flex: none;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.cx-shell #main #nav-sidebar .module table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 2px;
  }

  body.cx-shell #main #nav-sidebar .module caption {
    overflow: hidden;
    padding: 0 10px 4px !important;
    color: var(--cx-side-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.3;
    white-space: nowrap;
  }

  body.cx-shell #main #nav-sidebar .module caption .section,
  body.cx-shell #main #nav-sidebar .module caption .section:link,
  body.cx-shell #main #nav-sidebar .module caption .section:visited {
    color: inherit !important;
  }

  body.cx-shell #main #nav-sidebar .module th a,
  body.cx-shell #main #nav-sidebar .module th a:link,
  body.cx-shell #main #nav-sidebar .module th a:visited {
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    height: 36px;
    overflow: hidden;
    padding: 0 10px !important;
    border-radius: 8px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cx-side-fg) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  body.cx-shell #main #nav-sidebar .module th a:hover,
  body.cx-shell #main #nav-sidebar .module th a:focus-visible {
    background: var(--cx-side-hover) !important;
  }

  body.cx-shell #main #nav-sidebar .module th a:focus-visible {
    outline: 2px solid var(--cx-side-current-fg);
    outline-offset: -2px;
  }

  body.cx-shell #main #nav-sidebar .module tr.current-model th a,
  body.cx-shell #main #nav-sidebar .module tr.current-model th a:link,
  body.cx-shell #main #nav-sidebar .module tr.current-model th a:visited {
    background: var(--cx-side-current-bg) !important;
    color: var(--cx-side-current-fg) !important;
    font-weight: 600 !important;
  }

  body.cx-shell #main #nav-sidebar .custodia-sidebar-label {
    min-width: 0;
    gap: 10px;
  }

  body.cx-shell #main #nav-sidebar .custodia-sidebar-label > span:not(.custodia-sidebar-icon) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Curator "Preview" chip (admin-custom.css, a::after): an auto-layout table grows to
     the label's full width plus the chip, past the 232px sidebar. Fix the table to the
     sidebar, keep the chip whole at the row's end and let a long label ("Restoration
     Projects") end in an ellipsis; the link's title attribute gives the full name. */
  body.cx-shell #main #nav-sidebar .module table {
    table-layout: fixed;
  }

  html:is(:not(.cx-sidebar-collapsed), .cx-sidebar-peek) body.custodia-plan-curator.cx-shell #main #nav-sidebar :is(tr.model-restorationproject, tr.model-projecttask, tr.model-appearancesettings) > th > a {
    gap: 8px;
  }

  html:is(:not(.cx-sidebar-collapsed), .cx-sidebar-peek) body.custodia-plan-curator.cx-shell #main #nav-sidebar :is(tr.model-restorationproject, tr.model-projecttask, tr.model-appearancesettings) > th > a::after {
    flex: none;
    margin-left: auto;
  }

  body.cx-shell #main #nav-sidebar button.cx-sidebar-collapse {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    margin: auto 0 0;
    overflow: hidden;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--cx-side-muted);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
  }

  body.cx-shell #main #nav-sidebar button.cx-sidebar-collapse:hover {
    background: var(--cx-side-hover);
    color: var(--cx-side-fg);
  }

  body.cx-shell #main #nav-sidebar button.cx-sidebar-collapse:focus-visible {
    outline: 2px solid var(--cx-side-current-fg);
    outline-offset: -2px;
  }

  body.cx-shell #main #nav-sidebar .cx-sidebar-collapse svg {
    flex: none;
    width: 18px;
    height: 18px;
  }

  /* Collapsed: an icon rail; links keep a title tooltip (admin_cx_shell.js). While
     peeking (hover or focus) it shows in full over the page instead. */
  html.cx-sidebar-collapsed:not(.cx-sidebar-peek) body.cx-shell #main #nav-sidebar {
    gap: 12px;
    padding: 20px 10px !important;
  }

  html.cx-sidebar-collapsed:not(.cx-sidebar-peek) body.cx-shell #main #nav-sidebar .module caption {
    height: 0;
    padding: 0 !important;
    font-size: 0 !important;
  }

  html.cx-sidebar-collapsed:not(.cx-sidebar-peek) body.cx-shell #main #nav-sidebar .module ~ .module caption {
    height: 1px;
    margin: 0 6px 8px !important;
    background: var(--cx-side-line) !important;
  }

  html.cx-sidebar-collapsed:not(.cx-sidebar-peek) body.cx-shell #main #nav-sidebar .module th a {
    justify-content: center;
    padding: 0 !important;
  }

  html.cx-sidebar-collapsed:not(.cx-sidebar-peek) body.cx-shell #main #nav-sidebar .custodia-sidebar-label > span:not(.custodia-sidebar-icon),
  html.cx-sidebar-collapsed:not(.cx-sidebar-peek) body.cx-shell #main #nav-sidebar .cx-sidebar-collapse__label {
    display: none;
  }

  html.cx-sidebar-collapsed:not(.cx-sidebar-peek) body.cx-shell #main #nav-sidebar .module th a::after {
    display: none !important;
  }

  html.cx-sidebar-collapsed:not(.cx-sidebar-peek) body.cx-shell #main #nav-sidebar button.cx-sidebar-collapse {
    justify-content: center;
    padding: 0;
  }

  html.cx-sidebar-collapsed body.cx-shell #main #nav-sidebar .cx-sidebar-collapse svg {
    transform: scaleX(-1);
  }

  /* Peek: the collapsed rail opens to full width over the content (the page keeps its 64px
     offset); admin_cx_shell.js adds html.cx-sidebar-peek on hover or keyboard focus. */
  html.cx-sidebar-collapsed body.cx-shell #main #nav-sidebar {
    transition: width 0.18s ease, flex-basis 0.18s ease, margin 0.18s ease, box-shadow 0.18s ease;
  }

  html.cx-sidebar-collapsed.cx-sidebar-peek body.cx-shell #main #nav-sidebar {
    z-index: 1030;
    width: 232px !important;
    flex-basis: 232px !important;
    margin-right: -168px !important;
    box-shadow: 8px 0 24px rgba(31, 28, 23, 0.12);
  }

  @media (prefers-reduced-motion: reduce) {
    html.cx-sidebar-collapsed body.cx-shell #main #nav-sidebar {
      transition: none;
    }
  }

  /* ---- Breadcrumbs: a quiet line at the top of the content column ---- */
  body.cx-shell:has(#nav-sidebar) #container > nav {
    position: relative;
    z-index: 5;
    height: 0;
  }

  body.cx-shell:has(#nav-sidebar) .breadcrumbs.custodia-desktop-breadcrumb {
    position: absolute;
    top: 0;
    right: 0;
    left: var(--cx-side-w);
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 40px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--cx-side-muted) !important;
    font-size: 13px !important;
    line-height: 18px;
    pointer-events: none;
  }

  body.cx-shell:has(#nav-sidebar) .breadcrumbs.custodia-desktop-breadcrumb a,
  body.cx-shell:has(#nav-sidebar) .breadcrumbs.custodia-desktop-breadcrumb a:link,
  body.cx-shell:has(#nav-sidebar) .breadcrumbs.custodia-desktop-breadcrumb a:visited {
    color: var(--cx-side-muted) !important;
    font-size: 13px !important;
    pointer-events: auto;
  }

  body.cx-shell:has(#nav-sidebar) .breadcrumbs.custodia-desktop-breadcrumb a:hover {
    color: var(--cx-side-current-fg) !important;
  }

  body.cx-shell:has(#nav-sidebar) #main > .content {
    padding-top: 40px;
  }

  /* The showcase hid the old full-width strip on detail slides; keep the quiet line. */
  html.showcase-embed body.cx-shell.change-form:has(#nav-sidebar) .breadcrumbs.custodia-desktop-breadcrumb {
    display: flex !important;
  }
}

/* ---- Jump palette trigger (top bar) ---- */
body.cx-shell #header button.cx-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 8px 0 12px;
  border: 1px solid rgba(240, 234, 216, 0.22);
  border-radius: 8px;
  background: rgba(240, 234, 216, 0.08);
  box-shadow: none;
  color: #e4ddc8;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

body.cx-shell #header button.cx-jump[hidden] {
  display: none;
}

body.cx-shell #header button.cx-jump:hover {
  border-color: rgba(240, 234, 216, 0.34);
  background: rgba(240, 234, 216, 0.14);
}

body.cx-shell #header button.cx-jump:focus-visible {
  outline: 2px solid rgba(240, 234, 216, 0.6);
  outline-offset: 1px;
}

body.cx-shell #header .cx-jump svg {
  flex: none;
  width: 17px;
  height: 17px;
}

body.cx-shell #header .cx-jump__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-shell #header .cx-jump__kbd {
  flex: none;
  padding: 2px 6px;
  border: 1px solid rgba(240, 234, 216, 0.3);
  border-radius: 5px;
  background: transparent;
  color: #e4ddc8;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.3;
}

/* ---- Jump palette dialog ---- */
body.cx-shell dialog.cx-palette {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: min(520px, 76vh);
  margin: 12vh auto auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--cx-pal-line);
  border-radius: 12px;
  background: var(--cx-pal-bg);
  box-shadow: 0 24px 60px rgba(20, 18, 14, 0.28);
  color: var(--cx-pal-fg);
  font-family: 'DM Sans', sans-serif;
}

body.cx-shell dialog.cx-palette[open] {
  display: flex;
  flex-direction: column;
}

body.cx-shell dialog.cx-palette::backdrop {
  background: rgba(20, 18, 14, 0.38);
}

body.cx-shell .cx-palette__field {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--cx-pal-line);
}

body.cx-shell .cx-palette__field svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cx-pal-muted);
}

body.cx-shell .cx-palette input.cx-palette__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-family: inherit;
  font-size: 16px !important;
}

body.cx-shell .cx-palette__esc {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--cx-pal-line);
  border-radius: 5px;
  background: transparent;
  color: var(--cx-pal-muted);
  font-family: inherit;
  font-size: 12px;
}

body.cx-shell .cx-palette__list {
  flex: 1 1 auto;
  margin: 0;
  overflow-y: auto;
  padding: 6px;
  list-style: none;
}

body.cx-shell .cx-palette__list > li {
  list-style: none;
}

body.cx-shell .cx-palette__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

body.cx-shell .cx-palette__item[aria-selected="true"] {
  background: var(--cx-pal-active);
}

body.cx-shell .cx-palette__icon {
  display: flex;
  flex: none;
  justify-content: center;
  width: 18px;
  color: var(--cx-pal-muted);
  font-size: 18px;
  line-height: 1;
}

body.cx-shell .cx-palette__icon svg {
  width: 18px;
  height: 18px;
}

body.cx-shell .cx-palette__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-shell .cx-palette__hint {
  flex: none;
  color: var(--cx-pal-muted);
  font-size: 12px;
}

body.cx-shell .cx-palette__empty {
  padding: 14px 10px;
  color: var(--cx-pal-muted);
  font-size: 14px;
}

/* ---- App shell: tablet + phone top bar (<= 1024px) ----
   Same 56px bar as desktop; the legacy hide-on-scroll "peek" behaviour
   (admin_sidebar_behavior.js) is unchanged; the drawer is restyled below.
   The jump palette trigger shrinks to a search icon beside the actions. */
@media (max-width: 1024px) {
  body.cx-shell {
    --custodia-header-height-base: 56px;
    --custodia-chip-size: 32px;
    --custodia-chip-icon-size: 19px;
  }

  body.cx-shell:not(.login) #header.custodia-admin-header {
    gap: 8px;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 14px 0 8px !important;
  }

  body.cx-shell #header .custodia-mobile-hamburger {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }

  body.cx-shell #header .custodia-mobile-hamburger svg {
    width: 22px;
    height: 22px;
  }

  body.cx-shell:not(.login) #site-branding.custodia-header-identity {
    gap: 10px !important;
  }

  body.cx-shell:not(.login) #site-branding.custodia-header-identity .org-logo {
    --cu-brand-logo-box: 32px;
    border-radius: 7px;
  }

  body.cx-shell:not(.login) .custodia-header-copy {
    gap: 0 !important;
  }

  body.cx-shell:not(.login) #header #site-name.custodia-header-org,
  body.cx-shell:not(.login) #header #site-name.custodia-header-org:link,
  body.cx-shell:not(.login) #header #site-name.custodia-header-org:visited {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  body.cx-shell:not(.login) .custodia-header-subtitle {
    display: none !important;
  }

  body.cx-shell:not(.login) .custodia-header-actions {
    gap: 6px !important;
  }

  body.cx-shell #header .cx-jump-slot {
    display: flex;
    flex: none;
    margin-left: auto;
  }

  body.cx-shell #header button.cx-jump {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: rgba(240, 234, 216, 0.86);
  }

  body.cx-shell #header button.cx-jump svg {
    width: 20px;
    height: 20px;
  }

  body.cx-shell #header :is(.cx-jump__label, .cx-jump__kbd) {
    display: none;
  }
}

@media (max-width: 700px) {
  body.cx-shell:not(.login) #header #site-name.custodia-header-org,
  body.cx-shell:not(.login) #header #site-name.custodia-header-org:link,
  body.cx-shell:not(.login) #header #site-name.custodia-header-org:visited {
    font-size: 18px !important;
  }
}

/* Alone (no tagline: phones and tablets), the title's line box is centred on the logo, which
   puts its lower case on the logo's centre line and its capitals 2px above; lift it 1px so the
   two balance about the centre. */
body.cx-shell:not(.login) #header #site-name.custodia-header-org {
  position: relative;
  top: -1px;
}

/* ---- App shell: navigation drawer (<= 1024px) ----
   The legacy slide-out drawer (admin-custom.css: position, slide, overlay) restyled
   to match the desktop sidebar. admin_sidebar_behavior.js builds the chrome:
   .custodia-drawer-header ("Custodia." wordmark + .cx-drawer-search, which opens
   the jump palette) and .cx-drawer-account (unfolds the user menu). */
.cx-drawer-search,
.cx-drawer-account {
  display: none;
}

@media (min-width: 1025px) {
  body.cx-shell #nav-sidebar .custodia-drawer-header {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  body.cx-shell #main #nav-sidebar {
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    width: min(86vw, 320px) !important;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    padding: 0 !important;
    border-right: 1px solid var(--cx-side-line) !important;
    border-inline-end: 1px solid var(--cx-side-line) !important;
    background: var(--cx-side-bg) !important;
    box-shadow: 0 16px 48px rgba(20, 20, 19, 0.28);
    font-family: 'DM Sans', sans-serif;
  }

  body.cx-shell .admin-nav-overlay {
    background: rgba(20, 20, 19, 0.5);
  }

  /* Header: the "Custodia." wordmark and a search icon button (jump palette;
     hidden when the palette is unavailable). */
  body.cx-shell #nav-sidebar .custodia-drawer-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    height: 72px;
    min-height: 72px;
    padding: 8px 10px 0 24px;
    border: 0;
    background: var(--cx-side-bg);
    color: var(--cx-pal-fg);
  }

  body.cx-shell #nav-sidebar .custodia-drawer-name {
    color: var(--cx-pal-fg);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* Gold dot; deepened on the light drawer so it stands off the cream. */
  body.cx-shell #nav-sidebar .custodia-drawer-name::after {
    content: '.';
    margin-left: var(--cu-brand-dot-gap, 0.6px);
    color: color-mix(in srgb, var(--custodia-gold, #c9a84c) 75%, #000 25%);
    font-size: var(--cu-brand-dot-size, 0.7em);
  }

  html[data-theme="dark"] body.cx-shell #nav-sidebar .custodia-drawer-name::after {
    color: var(--custodia-gold, #c9a84c);
  }

  body.cx-shell #nav-sidebar button.cx-drawer-search {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--cx-side-fg);
    cursor: pointer;
  }

  body.cx-shell:has(#cx-jump[hidden]) #nav-sidebar button.cx-drawer-search {
    display: none;
  }

  body.cx-shell #nav-sidebar button.cx-drawer-search:hover {
    background: var(--cx-side-hover);
  }

  body.cx-shell #nav-sidebar button.cx-drawer-search:focus-visible {
    outline: 2px solid var(--cx-side-current-fg);
    outline-offset: -2px;
  }

  body.cx-shell #nav-sidebar .cx-drawer-search svg {
    width: 24px;
    height: 24px;
  }

  /* Sections and links: the desktop sidebar at touch size (44px rows). */
  body.cx-shell #main #nav-sidebar .module {
    flex: none;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.cx-shell #main #nav-sidebar .module table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  body.cx-shell #main #nav-sidebar .module caption {
    padding: 18px 12px 4px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--cx-side-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.3;
    text-align: left;
  }

  body.cx-shell #main #nav-sidebar .module caption .section,
  body.cx-shell #main #nav-sidebar .module caption .section:link,
  body.cx-shell #main #nav-sidebar .module caption .section:visited {
    color: inherit !important;
  }

  body.cx-shell #main #nav-sidebar .module tr,
  body.cx-shell #main #nav-sidebar .module th {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.cx-shell #main #nav-sidebar .module td {
    display: none;
  }

  body.cx-shell #main #nav-sidebar .module th a,
  body.cx-shell #main #nav-sidebar .module th a:link,
  body.cx-shell #main #nav-sidebar .module th a:visited {
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    height: 44px;
    overflow: hidden;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 10px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cx-side-fg) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  body.cx-shell #main #nav-sidebar .module th a:hover,
  body.cx-shell #main #nav-sidebar .module th a:focus-visible {
    background: var(--cx-side-hover) !important;
  }

  body.cx-shell #main #nav-sidebar .module th a:focus-visible {
    outline: 2px solid var(--cx-side-current-fg);
    outline-offset: -2px;
  }

  body.cx-shell #main #nav-sidebar .module tr.current-model th a,
  body.cx-shell #main #nav-sidebar .module tr.current-model th a:link,
  body.cx-shell #main #nav-sidebar .module tr.current-model th a:visited {
    background: var(--cx-side-current-bg) !important;
    color: var(--cx-side-current-fg) !important;
    font-weight: 600 !important;
  }

  body.cx-shell #main #nav-sidebar .custodia-sidebar-label {
    min-width: 0;
    gap: 12px;
  }

  body.cx-shell #main #nav-sidebar .custodia-sidebar-icon {
    font-size: 20px !important;
  }

  body.cx-shell #main #nav-sidebar svg.custodia-sidebar-icon {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  body.cx-shell #main #nav-sidebar .custodia-sidebar-label > span:not(.custodia-sidebar-icon) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.cx-shell #main #nav-sidebar .module:last-of-type {
    padding-bottom: 16px !important;
  }

  /* Account row at the drawer's foot, painted like the top bar (moss, both themes);
     it unfolds the user menu card (moved in by admin_sidebar_behavior.js) upwards.
     The header avatar hides meanwhile. */
  html.cx-account-in-drawer body.cx-shell #header .custodia-avatar-button {
    display: none !important;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex: none;
    flex-direction: column;
    margin-top: auto;
    border-top: 0;
    background: var(--custodia-moss, #2a3d2a);
    color: #f0ead8;
  }

  /* Floats above the row as a raised card over the links (only the row has a
     background); scrolls if taller than the drawer allows. */
  body.cx-shell {
    --cx-acct-bg: #ffffff;
    --cx-acct-line: #e2d6c1;
  }

  html[data-theme="dark"] body.cx-shell {
    --cx-acct-bg: #2b2c30;
    --cx-acct-line: #3a3c40;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account__panel {
    position: absolute;
    right: 10px;
    bottom: calc(100% + 10px);
    left: 10px;
    box-sizing: border-box;
    max-height: calc(100dvh - 56px - 72px - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 4px 4px;
    border: 1px solid var(--cx-acct-line);
    border-radius: 12px;
    background: var(--cx-acct-bg);
    box-shadow: 0 12px 32px rgba(20, 20, 19, 0.18), 0 2px 6px rgba(20, 20, 19, 0.08);
  }

  body.cx-shell #nav-sidebar .cx-drawer-account.is-open button.cx-drawer-account__toggle {
    background: rgba(240, 234, 216, 0.12);
  }

  body.cx-shell #nav-sidebar .cx-drawer-account__panel[hidden] {
    display: none;
  }

  body.cx-shell #nav-sidebar button.cx-drawer-account__toggle {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 10px 20px 10px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(240, 234, 216, 0.72);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    cursor: pointer;
  }

  body.cx-shell #nav-sidebar button.cx-drawer-account__toggle:hover {
    background: rgba(240, 234, 216, 0.08);
  }

  body.cx-shell #nav-sidebar button.cx-drawer-account__toggle:focus-visible {
    outline: 2px solid rgba(240, 234, 216, 0.7);
    outline-offset: -2px;
  }

  /* Same disc as the header avatar (.custodia-avatar-image): white fill for
     transparent logos, light hairline. */
  body.cx-shell #nav-sidebar .cx-drawer-account__avatar {
    flex: none;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border: 1px solid #d0d7de;
    border-radius: 999px;
    background: #fff;
    object-fit: cover;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account__name {
    overflow: hidden;
    color: #f0ead8;
    font-size: 14.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account__hint {
    font-size: 12.5px;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account__toggle svg {
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform 0.15s ease;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account.is-open .cx-drawer-account__toggle svg {
    transform: rotate(180deg);
  }

  /* Profile summary (avatar upload, email change/verify) heads the panel. */
  body.cx-shell #nav-sidebar .cx-drawer-account .custodia-user-summary {
    gap: 12px;
    padding: 4px 12px 12px;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account .custodia-user-name {
    color: var(--cx-pal-fg);
    font-size: 14.5px;
    font-weight: 600;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account .custodia-user-email {
    color: var(--cx-side-muted);
    font-size: 12.5px;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account .custodia-user-summary + .custodia-user-menu-group {
    padding-top: 8px;
    border-top: 1px solid var(--cx-side-line);
  }

  body.cx-shell #nav-sidebar .cx-drawer-account .custodia-user-menu-card {
    width: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--cx-side-fg);
  }

  body.cx-shell #nav-sidebar .cx-drawer-account .custodia-user-menu-group {
    padding: 0;
    border-top: 0;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account .custodia-user-menu-group + .custodia-user-menu-group {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--cx-side-line);
  }

  body.cx-shell #main #nav-sidebar .cx-drawer-account .custodia-user-menu-item,
  body.cx-shell #main #nav-sidebar .cx-drawer-account .custodia-user-menu-item:link,
  body.cx-shell #main #nav-sidebar .cx-drawer-account .custodia-user-menu-item:visited {
    grid-template-columns: 20px minmax(0, 1fr);
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    background: transparent;
    color: var(--cx-side-fg) !important;
    font-size: 15px;
    font-weight: 400;
  }

  body.cx-shell #main #nav-sidebar .cx-drawer-account .custodia-user-menu-item:hover,
  body.cx-shell #main #nav-sidebar .cx-drawer-account .custodia-user-menu-item:focus-visible {
    background: var(--cx-side-hover);
  }

  body.cx-shell #main #nav-sidebar .cx-drawer-account .custodia-user-menu-item:focus-visible {
    outline: 2px solid var(--cx-side-current-fg);
    outline-offset: -2px;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account .custodia-client-switcher-label {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* The drawer scrolls as a whole: no inner scroll box for the client list. */
  body.cx-shell #nav-sidebar .cx-drawer-account .custodia-client-switcher form {
    max-height: none;
    overflow: visible;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account .custodia-client-switch-option {
    min-height: 44px;
    border-radius: 10px;
    font-size: 15px;
  }
}

@media (max-width: 1024px) and (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-shell {
    --cx-acct-bg: #2b2c30;
    --cx-acct-line: #3a3c40;
  }

  html[data-theme="auto"] body.cx-shell #nav-sidebar .custodia-drawer-name::after {
    color: var(--custodia-gold, #c9a84c);
  }
}

/* ---- App shell: header, breadcrumbs + section tabs (<= 1024px) ----
   Hide-on-scroll header: admin_sidebar_behavior.js still sets
   .custodia-header-scrolled (past the header) and .custodia-header-peek (scrolling
   up), but the header stays sticky, keeping its place in the flow, and only
   slides out of view. The legacy version switched it to fixed, so the page
   jumped 56px whenever it left or rejoined the flow near the top.
   Below it, the desktop quiet breadcrumb line, pinned so the way back stays in
   reach: a 40px bar on the page background (the legacy sticky #container > nav),
   under the header while it shows. Phones keep the short back link
   (.custodia-mobile-breadcrumb), tablets the full trail. The change page's section
   tabs pin under that. #container outranks the legacy dark-mode colours. */
@media (max-width: 1024px) {
  body.cx-shell {
    --cx-crumbs-h: 40px;
  }

  body.cx-shell:not(.login) #header.custodia-admin-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1041;
    transition: transform 0.22s ease;
  }

  body.cx-shell:not(.login) #header.custodia-admin-header.custodia-header-scrolled {
    position: sticky !important;
    transform: translateY(-110%);
  }

  body.cx-shell:not(.login) #header.custodia-admin-header.custodia-header-scrolled.custodia-header-peek {
    transform: none;
  }

  body.cx-shell #container > nav {
    top: var(--custodia-header-height, 56px) !important;
    transition: top 0.22s ease;
  }

  body.cx-shell:has(#header.custodia-header-scrolled:not(.custodia-header-peek)) #container > nav {
    top: 0 !important;
  }

  body.cx-shell:has(#nav-sidebar) #container .breadcrumbs {
    height: var(--cx-crumbs-h) !important;
    min-height: 0 !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    background: var(--body-bg, #fff) !important;
    box-shadow: none !important;
    color: var(--cx-side-muted) !important;
    font-size: 13px !important;
    line-height: 18px;
    transition: border-color 0.15s ease;
  }

  /* Pinned over the page (no tabs to close the stack): a hairline edge. */
  body.cx-shell:has(#nav-sidebar):has(#header.custodia-header-scrolled):not(:has(#content .cx-tabs)) #container .breadcrumbs {
    border-bottom-color: var(--cx-line, rgba(58, 52, 43, 0.12)) !important;
  }

  body.cx-shell:has(#nav-sidebar) #container .breadcrumbs a,
  body.cx-shell:has(#nav-sidebar) #container .breadcrumbs a:link,
  body.cx-shell:has(#nav-sidebar) #container .breadcrumbs a:visited {
    color: var(--cx-side-muted) !important;
    font-size: 13px !important;
    font-weight: 400;
  }

  body.cx-shell:has(#nav-sidebar) #container .breadcrumbs a:hover,
  body.cx-shell:has(#nav-sidebar) #container .breadcrumbs a:focus {
    color: var(--cx-side-current-fg) !important;
  }

  body.cx-shell:has(#nav-sidebar) #content {
    padding-top: 4px !important;
  }

  body.cx-shell.cx-layout #content .cx-tabs-bar {
    position: sticky;
    top: calc(var(--custodia-header-height, 56px) + var(--cx-crumbs-h));
    z-index: 20;
    transition: top 0.22s ease;
  }

  body.cx-shell.cx-layout:has(#header.custodia-header-scrolled:not(.custodia-header-peek)) #content .cx-tabs-bar {
    top: var(--cx-crumbs-h);
  }

  body.cx-shell.cx-layout #content-main [id^="section-"],
  body.cx-shell.cx-layout #content-main .inline-group[id$="-group"],
  body.cx-shell.cx-layout #content-main :is(#conservation-cycle, #conservation-history) {
    scroll-margin-top: calc(var(--cx-crumbs-h) + 56px);
  }
}

@media (max-width: 767px) {
  body.cx-shell:has(#nav-sidebar) #container .breadcrumbs {
    padding: 0 15px !important;
  }
}

/* Account panel scrollbar: hidden until it scrolls (admin_sidebar_behavior.js
   sets .is-scrolling, cleared after a pause). The drawer itself shows none: even
   a transparent classic scrollbar keeps its gutter, a shaded strip down the
   right edge (touch devices overlay scrollbars anyway). */
@media (max-width: 1024px) {
  body.cx-shell {
    --cx-scroll-thumb: rgba(58, 52, 43, 0.35);
  }

  html[data-theme="dark"] body.cx-shell {
    --cx-scroll-thumb: rgba(240, 234, 216, 0.3);
  }

  body.cx-shell #main #nav-sidebar {
    scrollbar-width: none;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account__panel {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  body.cx-shell #nav-sidebar .cx-drawer-account__panel.is-scrolling {
    scrollbar-color: var(--cx-scroll-thumb) transparent;
  }
}

@media (max-width: 1024px) and (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-shell {
    --cx-scroll-thumb: rgba(240, 234, 216, 0.3);
  }
}

/* ===========================================
   RESTORATION PROJECTS (cx-layout)
   List: templates/admin/core/restorationproject_change_list.html (cx_change_list.html).
   Change page: templates/admin/core/restorationproject_change_form.html.
   =========================================== */
body.cx-layout {
  --cx-overdue: #9b1c14;
  --cx-progress-track: #ece5d7;
  --cx-progress-fill: var(--cx-accent);
  --cx-done: #3f6b3f;
}

html[data-theme="dark"] body.cx-layout {
  --cx-overdue: #f0a39b;
  --cx-progress-track: rgba(240, 234, 216, 0.14);
  --cx-done: #a9c9a4;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout {
    --cx-overdue: #f0a39b;
    --cx-progress-track: rgba(240, 234, 216, 0.14);
    --cx-done: #a9c9a4;
  }
}

/* ---- Shared: overdue note, task progress bar ---- */
body.cx-layout #content-main .cx-overdue {
  color: var(--cx-overdue);
  font-weight: 600;
}

body.cx-layout #content-main .cx-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Native <progress> (value = done, max = total): no inline width, so no template
   tags inside style attributes. The engine pseudo-elements need separate rules. */
body.cx-layout #content-main progress.cx-progress__bar {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 64px;
  height: 6px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--cx-progress-track);
  color: var(--cx-progress-fill);
}

body.cx-layout #content-main progress.cx-progress__bar::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--cx-progress-track);
}

body.cx-layout #content-main progress.cx-progress__bar::-webkit-progress-value {
  border-radius: 999px;
  background: var(--cx-progress-fill);
}

body.cx-layout #content-main progress.cx-progress__bar::-moz-progress-bar {
  border-radius: 999px;
  background: var(--cx-progress-fill);
}

body.cx-layout #content-main progress.cx-progress__bar--block {
  width: auto;
  margin-top: 6px;
}

body.cx-layout #content-main .cx-progress__label {
  flex: none;
  color: var(--cx-label-color);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ---- List: name + linked item subline, due column, grid card footer ---- */
body.cx-list #content-main .cx-list__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.cx-list #content-main .cx-list__sub {
  color: var(--cx-muted);
  font-size: 0.8rem;
  font-weight: 400;
}

body.cx-list #content-main #result_list td.field-due_display .cx-overdue {
  display: block;
  font-size: 0.78rem;
}

@media (min-width: 1025px) {
  body.cx-list #content-main #result_list th.field-name_with_image a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
  }

  body.cx-list #content-main #result_list:not(.changelist-columns-sized) tbody th.field-name_with_image {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

body.cx-list #content-main .cx-grid__tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--body-bg, #fffdf8) 92%, transparent);
  color: var(--cx-label-color);
  font-size: 0.72rem;
  font-weight: 600;
}

body.cx-list.model-restorationproject #content-main .cx-grid__body {
  flex: 1 1 auto;
}

body.cx-list #content-main .cx-grid__foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

body.cx-list #content-main .cx-grid__foot .cx-progress {
  display: flex;
}

body.cx-list #content-main .cx-grid__due {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.8rem;
}

/* ---- Change page: multi-select chips (CheckboxSelectMultiple, class cx-chip-input) ---- */
body.cx-layout #content-main .cx-field:has(input.cx-chip-input) {
  grid-column: 1 / -1;
}

body.cx-layout #content-main .cx-field__control > div:has(input.cx-chip-input) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

body.cx-layout #content-main .cx-field__control > div:has(input.cx-chip-input) > div {
  margin: 0;
  padding: 0;
}

body.cx-layout #content-main .cx-field__control label:has(> input.cx-chip-input) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 32px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 999px;
  background: var(--cx-chip-bg);
  color: var(--cx-chip-fg);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  cursor: pointer;
}

body.cx-layout #content-main .cx-field__control label > input.cx-chip-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body.cx-layout #content-main .cx-field__control label:has(> input.cx-chip-input):hover {
  border-color: color-mix(in srgb, var(--cx-accent) 55%, transparent);
}

body.cx-layout #content-main .cx-field__control label:has(> input.cx-chip-input:checked) {
  border-color: var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 12%, var(--cx-chip-bg));
  color: var(--body-fg, #1f1c17);
  font-weight: 600;
}

body.cx-layout #content-main .cx-field__control label:has(> input.cx-chip-input:checked)::before {
  content: "";
  width: 9px;
  height: 5px;
  margin: -3px 1px 0 0;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
}

body.cx-layout #content-main .cx-field__control label:has(> input.cx-chip-input:focus-visible) {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout #content-main .cx-field__control label:has(> input.cx-chip-input:disabled) {
  opacity: 0.7;
  cursor: default;
}

/* With JS (initChipPickers): the checkboxes are hidden and a picker shows the
   ticked choices as removable chips plus an "Add…" select, in one input-sized box.
   The select repeats !important where the generic widget rules above out-specify it. */
body.cx-layout #content-main .cx-field__control > div.cx-chip-input[hidden] {
  display: none;
}

body.cx-layout #content-main .cx-picker {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 5px 6px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
}

body.cx-layout #content-main .cx-picker:focus-within {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 18%, transparent);
}

body.cx-layout #content-main .cx-picker:has(select:disabled) {
  border-color: var(--cx-chip-border);
  background: var(--cx-disabled-bg);
}

body.cx-layout #content-main .cx-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 28px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--cx-thumb-border);
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: var(--cx-input-fg);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

body.cx-layout #content-main .cx-picker:has(select:disabled) .cx-picker__chip {
  padding-right: 10px;
}

body.cx-layout #content-main button.cx-picker__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cx-muted);
  cursor: pointer;
}

body.cx-layout #content-main button.cx-picker__remove:hover {
  background: color-mix(in srgb, var(--cx-muted) 16%, transparent);
  color: var(--cx-input-fg);
}

body.cx-layout #content-main button.cx-picker__remove:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 1px;
}

body.cx-layout #content-main .cx-picker__empty {
  padding: 0 6px;
  color: var(--cx-muted);
}

body.cx-layout #content-main .cx-field__control .cx-picker select.cx-picker__add {
  width: auto;
  min-width: 0;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 6px !important;
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--cx-muted) !important;
  font-size: 0.84rem;
  cursor: pointer;
}

body.cx-layout #content-main .cx-field__control .cx-picker select.cx-picker__add[hidden] {
  display: none;
}

/* The "Add…" select as a cx-select: a compact button after the chips (the picker
   draws the field's border and focus ring). */
body.cx-layout #content-main .cx-picker select.cx-picker__add[hidden] + .cx-select {
  display: none;
}

body.cx-layout #content-main .cx-picker .cx-select {
  flex: 0 0 auto;
}

body.cx-layout #content-main .cx-picker .cx-select__trigger {
  width: auto;
  height: 28px;
  padding: 0 26px 0 6px;
  border: 0;
  background: transparent;
  color: var(--cx-muted);
  font-size: 0.84rem;
}

body.cx-layout #content-main .cx-picker .cx-select__trigger:hover:not(:disabled) {
  color: var(--cx-input-fg);
}

body.cx-layout #content-main .cx-picker .cx-select__trigger:focus-visible,
body.cx-layout #content-main .cx-picker .cx-select.is-open .cx-select__trigger {
  box-shadow: none;
}

body.cx-layout #content-main .cx-picker .cx-select__trigger:disabled {
  background: transparent;
}

body.cx-layout #content-main .cx-picker svg.cx-select__chevron {
  right: 4px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
}

body.cx-layout #content-main .cx-picker .cx-select__clear {
  display: none;
}

/* ---- Change page: Tasks card ---- */
body.cx-layout #content-main .cx-tasks__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

body.cx-layout #content-main .cx-tasks__head .cx-card__title {
  margin-right: auto;
}

body.cx-layout #content-main .cx-tasks__head .cx-progress__bar {
  width: 120px;
}

body.cx-layout #content-main .cx-task-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  list-style: none;
}

body.cx-layout #content-main .cx-task {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cx-line);
  list-style: none;
}

body.cx-layout #content-main .cx-task:last-child {
  border-bottom: 0;
}

body.cx-layout #content-main .cx-task__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 1.5px solid var(--cx-dashed);
  border-radius: 50%;
}

body.cx-layout #content-main .cx-task__icon svg {
  width: 14px;
  height: 14px;
}

body.cx-layout #content-main .cx-task--done .cx-task__icon {
  border-color: var(--cx-done);
  background: var(--cx-done);
  color: var(--body-bg, #fff);
}

body.cx-layout #content-main .cx-task--overdue .cx-task__icon {
  border-color: var(--cx-overdue);
  color: var(--cx-overdue);
}

body.cx-layout #content-main .cx-task__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-layout #content-main a.cx-task__title,
body.cx-layout #content-main a.cx-task__title:visited {
  color: var(--body-fg, #1f1c17);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

body.cx-layout #content-main .cx-task--done a.cx-task__title {
  color: var(--cx-muted);
}

body.cx-layout #content-main a.cx-task__title:hover,
body.cx-layout #content-main a.cx-task__title:focus-visible {
  text-decoration: underline;
}

body.cx-layout #content-main :is(.cx-task__person, .cx-task__when) {
  color: var(--cx-muted);
  font-size: 0.8rem;
}

body.cx-layout #content-main .cx-task__when {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

body.cx-layout #content-main a.cx-tasks__all {
  align-self: flex-start;
  color: var(--cx-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (max-width: 767px) {
  body.cx-layout #content-main .cx-task {
    flex-wrap: wrap;
  }

  body.cx-layout #content-main .cx-task__when {
    flex-basis: 100%;
    flex-direction: row;
    gap: 8px;
    padding-left: 34px;
    align-items: baseline;
    text-align: left;
  }
}

/* ---- Change page: Before / After groups in Images & files ---- */
body.cx-layout #content-main .cx-media__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.cx-layout #content-main .cx-media__group + .cx-media__group {
  padding-top: 18px;
  border-top: 1px solid var(--cx-line);
}

body.cx-layout #content-main .cx-media__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.cx-layout #content-main :is(.cx-media__note, .cx-media__empty) {
  margin: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

body.cx-layout #content-main .cx-media__empty {
  padding: 14px 16px;
  border: 1px dashed var(--cx-line);
  border-radius: 8px;
}

/* ---- Rail: linked archive item ---- */
body.cx-layout #content-main .cx-rail-item__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.cx-layout #content-main .cx-rail-item__thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--cx-thumb-border);
  border-radius: 8px;
  background: var(--cx-thumb-bg);
  color: var(--cx-muted);
}

body.cx-layout #content-main .cx-rail-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.cx-layout #content-main .cx-rail-item__thumb svg {
  width: 22px;
  height: 22px;
}

body.cx-layout #content-main .cx-rail-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 0.8125rem;
}

body.cx-layout #content-main a.cx-rail-item__title,
body.cx-layout #content-main a.cx-rail-item__title:visited {
  color: var(--cx-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

body.cx-layout #content-main a.cx-rail-item__title:hover,
body.cx-layout #content-main a.cx-rail-item__title:focus-visible {
  text-decoration: underline;
}

body.cx-layout #content-main .cx-rail-item .cx-card__description {
  margin: 0;
}

/* ===========================================
   PROJECT TASKS LIST (cx-layout)
   templates/admin/core/projecttask_change_list.html (cx_change_list.html; opens in List).
   The "completed" list_editable checkbox is moved into the Task cell as a round tick
   (inline script in that template); a floating bar saves or discards the ticks.
   =========================================== */
body.cx-list #content-main .cx-task-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.cx-list #content-main .cx-task-cell > a,
body.cx-list #content-main .cx-task-name__text {
  min-width: 0;
  font-weight: 500;
}

body.cx-list #content-main .cx-task-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Faint tick shown inside an unticked ring on hover / focus: what a click will do. */
body.cx-list {
  --cx-tick-preview: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7d68' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --cx-tick-preview-overdue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b1c14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

html[data-theme="dark"] body.cx-list {
  --cx-tick-preview: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39884' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --cx-tick-preview-overdue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0a39b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-list {
    --cx-tick-preview: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39884' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --cx-tick-preview-overdue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0a39b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }
}

/* Round done tick: the real checkbox once moved, else a plain marker. */
body.cx-list #content-main :is(.cx-task-state, input.cx-task-check) {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--cx-switch-off);
  border-radius: 999px;
  background: transparent center / 13px 13px no-repeat;
}

body.cx-list #content-main input.cx-task-check {
  cursor: pointer;
}

body.cx-list #content-main :is(.cx-task-name[data-state="done"] .cx-task-state, input.cx-task-check:checked) {
  border-color: var(--cx-accent);
  background-color: var(--cx-accent);
  background-image: var(--cx-tick-icon);
}

/* Overdue and not ticked: the same empty ring in red with a faint red fill (the
   Overdue badge and the "N days overdue" note carry the warning). */
body.cx-list #content-main :is(.cx-task-name[data-state="overdue"] .cx-task-state, input.cx-task-check[data-state="overdue"]:not(:checked)) {
  border-color: var(--cx-overdue);
  background-color: color-mix(in srgb, var(--cx-overdue) 9%, transparent);
}

body.cx-list #content-main input.cx-task-check:not(:checked):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--cx-accent) 70%, var(--cx-switch-off));
  background-image: var(--cx-tick-preview);
}

body.cx-list #content-main input.cx-task-check[data-state="overdue"]:not(:checked):is(:hover, :focus-visible) {
  border-color: var(--cx-overdue);
  background-image: var(--cx-tick-preview-overdue);
}

body.cx-list #content-main input.cx-task-check:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

/* Changed since the page loaded, not saved yet. */
body.cx-list #content-main input.cx-task-check.is-changed {
  outline: 2px dashed var(--cx-unsaved);
  outline-offset: 2px;
}

body.cx-list #content-main .cx-task-name[data-state="done"] .cx-task-name__text {
  color: var(--cx-muted);
  text-decoration: line-through;
  text-decoration-color: var(--cx-dashed);
}

body.cx-list #content-main #result_list td.field-project_link a {
  font-weight: 500;
}

/* ---- Grid cards: latest photo, tick beside the title, lines indented under it ---- */
body.cx-list #content-main .cx-grid__media:has(> .cx-grid__empty) {
  border-bottom: 1px solid var(--cx-line);
  background: color-mix(in srgb, var(--cx-thumb-bg) 40%, transparent);
}

body.cx-list #content-main .cx-grid__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--cx-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

body.cx-list #content-main .cx-grid__empty svg {
  width: 24px;
  height: 24px;
}

body.cx-list #content-main .cx-grid__tag--photos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.cx-list #content-main .cx-grid__tag--photos svg {
  width: 12px;
  height: 12px;
}

body.cx-list.model-projecttask #content-main .cx-grid__body {
  flex: 1 1 auto;
}

body.cx-list.model-projecttask #content-main .cx-grid__title-row {
  gap: 10px;
}

/* Above the card's full-size title link, like the checkbox and menu. */
body.cx-list #content-main .cx-grid__title-row :is(input.cx-task-check, .cx-task-name) {
  position: relative;
  z-index: 1;
  flex: none;
}

body.cx-list.model-projecttask #content-main .cx-grid__body > :not(.cx-grid__title-row) {
  padding-left: 32px;
}

body.cx-list #content-main .cx-grid__card:has(:is(input.cx-grid__done, .cx-task-name)[data-state="done"]) a.cx-grid__title {
  color: var(--cx-muted);
  text-decoration: line-through;
  text-decoration-color: var(--cx-dashed);
}

body.cx-list #content-main .cx-grid__project {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list #content-main .cx-grid__project a {
  position: relative;
  z-index: 1;
  font-weight: 500;
}

/* ---- Floating Save / Discard bar (shares the bulk bar look) ---- */
body.cx-list #content-main .cx-savebar__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cx-unsaved);
}

body.cx-list #content-main .cx-savebar__count {
  flex: 1 1 auto;
}

body.cx-list #content-main .cx-savebar button.cx-savebar__discard {
  background: transparent;
}

body.cx-list #content-main .cx-savebar button.cx-savebar__save {
  background: var(--cx-bulk-fg);
  color: var(--cx-bulk-bg);
  font-weight: 600;
}

body.cx-list #content-main .cx-savebar button.cx-savebar__save:hover,
body.cx-list #content-main .cx-savebar button.cx-savebar__save:focus-visible {
  background: #ffffff;
}

body.cx-list #content-main .cx-list__errornote {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--cx-error-border);
  border-radius: 8px;
  background: var(--cx-error-bg);
  color: var(--cx-error-border);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ===========================================
   CATEGORIES, CONTRIBUTOR ROLES AND LOCATIONS LISTS (cx-layout)
   cx_change_list.html via CategoryAdmin, RoleAdmin and LocationAdmin (list only, no grid):
   icon tile + name, description, and the archive item / contributor count linking to the
   filtered list. Role tiles are round, like the contributor avatars; Locations add a
   Display column.
   =========================================== */
/* The table is fixed-layout (admin-custom.css), so without widths every column gets an
   equal share and widening Description pushes it past the card. Name and Archive items
   get set widths and Description takes the rest; saved column widths still override. */
body.cx-list:is(.model-category, .model-role, .model-location) #content-main #result_list:not(.changelist-columns-sized) th.column-name_with_icon {
  width: 320px;
}

body.cx-list:is(.model-category, .model-role, .model-location) #content-main #result_list:not(.changelist-columns-sized) :is(th.column-item_count, th.column-contributor_count) {
  width: 150px;
}

body.cx-list.model-location #content-main #result_list:not(.changelist-columns-sized) th.column-name_with_icon {
  width: 300px;
}

body.cx-list.model-location #content-main #result_list:not(.changelist-columns-sized) th.column-display_status {
  width: 200px;
}

body.cx-list:is(.model-category, .model-role, .model-location) #content-main #result_list th.field-name_with_icon a {
  font-weight: 600;
}

body.cx-list:is(.model-category, .model-role, .model-location) #content-main .custodia-category-list-name {
  gap: 12px;
}

body.cx-list:is(.model-category, .model-role, .model-location) #content-main .custodia-category-list-name__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--cx-thumb-bg);
  color: var(--cx-accent);
}

body.cx-list.model-role #content-main .custodia-category-list-name__icon {
  border-radius: 999px;
}

body.cx-list:is(.model-category, .model-role, .model-location) #content-main .custodia-category-list-name__icon .material-symbols-outlined {
  font-size: 20px;
}

body.cx-list:is(.model-category, .model-role, .model-location) #content-main #result_list td.field-description_short {
  color: var(--cx-muted);
}

body.cx-list:is(.model-category, .model-role, .model-location) #content-main #result_list :is(th, td):is(.column-item_count, .column-contributor_count),
body.cx-list:is(.model-category, .model-role, .model-location) #content-main #result_list td:is(.field-item_count, .field-contributor_count) {
  text-align: right;
  white-space: nowrap;
}

body.cx-list:is(.model-category, .model-role, .model-location) #content-main a.cx-category-items {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

body.cx-list:is(.model-category, .model-role, .model-location) #content-main a.cx-category-items svg {
  width: 14px;
  height: 14px;
}

body.cx-list:is(.model-category, .model-role, .model-location) #content-main .cx-category-unused {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  background: var(--cx-file-icon-bg);
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Locations: Display column. Suitable is a green tag; not suitable stays plain text. */
body.cx-list.model-location #content-main #result_list td.field-display_status {
  white-space: nowrap;
}

body.model-location:is(.cx-list, .cx-layout) #content .cx-location-display {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px 0 8px;
  border: 1px solid color-mix(in srgb, var(--cx-done) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cx-done) 13%, transparent);
  color: var(--cx-done);
  font-size: 0.78125rem;
  font-weight: 600;
}

body.model-location:is(.cx-list, .cx-layout) #content .cx-location-display .material-symbols-outlined {
  font-size: 15px;
}

body.cx-list.model-location #content-main .cx-location-display--no {
  color: var(--cx-muted);
  font-size: 0.84375rem;
}

/* ===========================================
   CONTRIBUTORS LIST (cx-layout)
   cx_change_list.html via ContributorAdmin (list only, no grid): the role's icon on an avatar
   (round for people, square for organisations), name with a "User" tag when linked to a login, company
   underneath; role; email and phone; and "Involved in" counts linking to the filtered lists.
   =========================================== */
body.cx-list.model-contributor #content-main #result_list:not(.changelist-columns-sized) th.column-full_name {
  width: 300px;
}

body.cx-list.model-contributor #content-main #result_list:not(.changelist-columns-sized) th.column-role_name {
  width: 150px;
}

body.cx-list.model-contributor #content-main #result_list:not(.changelist-columns-sized) th.column-involvement {
  width: 230px;
}

body.cx-list.model-contributor #content-main .cx-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.cx-list.model-contributor #content-main .cx-person__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: var(--cx-accent);
}

body.cx-list.model-contributor #content-main .cx-person__avatar .material-symbols-outlined {
  font-size: 20px;
}

body.cx-list.model-contributor #content-main .cx-person__avatar--org {
  border-radius: 9px;
  background: color-mix(in srgb, #34495a 12%, var(--cx-chip-bg));
  color: color-mix(in srgb, #34495a 80%, var(--cx-label-color));
}

body.cx-list.model-contributor #content-main .cx-person__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-list.model-contributor #content-main .cx-person__name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--cx-label-color);
  font-weight: 600;
}

body.cx-list.model-contributor #content-main .cx-person__name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list.model-contributor #content-main .cx-person__user {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cx-accent) 12%, transparent);
  color: var(--cx-accent);
  font-size: 0.7rem;
  font-weight: 600;
}

body.cx-list.model-contributor #content-main .cx-person__sub {
  overflow: hidden;
  color: var(--cx-muted);
  font-size: 0.78rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list.model-contributor #content-main .cx-person__sub.is-muted,
body.cx-list.model-contributor #content-main .cx-person__none {
  color: var(--cx-muted);
  opacity: 0.75;
}

body.cx-list.model-contributor #content-main .cx-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-list.model-contributor #content-main .cx-contact a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list.model-contributor #content-main .cx-contact__phone {
  color: var(--cx-muted);
  font-size: 0.78rem;
}

body.cx-list.model-contributor #content-main td.field-involvement {
  white-space: nowrap;
}

body.cx-list.model-contributor #content-main a.cx-involved {
  font-weight: 500;
}

body.cx-list.model-contributor #content-main .cx-involved__sep {
  color: var(--cx-muted);
  opacity: 0.6;
}

/* ===========================================
   USERS LIST (cx-layout)
   cx_change_list.html via CustomUserAdmin (list only, no grid): photo or initials, name with a
   "You" tag and the email underneath; the linked contributor's role as a pill (opens the
   contributor); access (Admin or the first group, "+N" for more); status badge; last sign-in.
   =========================================== */
body.cx-list.model-user #content-main #result_list:not(.changelist-columns-sized) th.column-contributor_link {
  width: 170px;
}

body.cx-list.model-user #content-main #result_list:not(.changelist-columns-sized) th.column-get_client {
  width: 200px;
}

body.cx-list.model-user #content-main #result_list:not(.changelist-columns-sized) th.column-access {
  width: 260px;
}

body.cx-list.model-user #content-main #result_list:not(.changelist-columns-sized) th.column-status_badge {
  width: 140px;
}

body.cx-list.model-user #content-main #result_list:not(.changelist-columns-sized) th.column-last_signed_in {
  width: 160px;
}

body.cx-list.model-user #content-main .cx-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.cx-list.model-user #content-main .cx-person__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: color-mix(in srgb, var(--cx-accent) 70%, var(--cx-label-color));
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.cx-list.model-user #content-main .cx-person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.cx-list.model-user #content-main .cx-person__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-list.model-user #content-main .cx-person__name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--cx-label-color);
  font-weight: 600;
}

body.cx-list.model-user #content-main .cx-person__name > span:first-child,
body.cx-list.model-user #content-main .cx-person__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list.model-user #content-main .cx-person__sub {
  color: var(--cx-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

body.cx-list.model-user #content-main .cx-person.is-deactivated .cx-person__name {
  color: var(--cx-muted);
}

body.cx-list.model-user #content-main .cx-person.is-deactivated .cx-person__avatar {
  opacity: 0.6;
}

body.cx-layout.model-user #content .cx-person__you {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: var(--cx-label-color);
  font-size: 0.7rem;
  font-weight: 600;
}

body.cx-list.model-user #content-main .cx-person__none {
  color: var(--cx-muted);
  opacity: 0.75;
}

/* Contributor: the linked contributor's role, a neutral pill (not the green Active badge). */
body.cx-layout.model-user #content-main .cx-user-contributor,
body.cx-layout.model-user #content-main a.cx-user-contributor:visited {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  height: 24px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  background: var(--cx-file-icon-bg);
  color: var(--cx-label-color);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

body.cx-layout.model-user #content-main a.cx-user-contributor:hover,
body.cx-layout.model-user #content-main a.cx-user-contributor:focus-visible {
  border-color: var(--cx-accent);
  color: var(--cx-accent);
}

body.cx-layout.model-user #content-main .cx-user-contributor svg {
  flex: none;
  width: 12px;
  height: 12px;
}

body.cx-layout.model-user #content-main .cx-user-contributor span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Admin pill beside the name (same size as "You"); Access then reads "Everything", or the first
   group with "+N" (all groups on hover). */
body.cx-list.model-user #content-main .cx-user-access {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.cx-list.model-user #content-main .cx-user-admin {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--cx-accent);
  color: var(--body-bg);
  font-size: 0.7rem;
  font-weight: 600;
}

body.cx-list.model-user #content-main .cx-user-admin svg {
  width: 11px;
  height: 11px;
}

body.cx-list.model-user #content-main .cx-user-access__note {
  color: var(--cx-muted);
  white-space: nowrap;
}

body.cx-list.model-user #content-main .cx-user-access__group {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list.model-user #content-main .cx-user-access__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  background: var(--cx-file-icon-bg);
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: help;
}

body.cx-list.model-user #content-main .cx-user-last {
  white-space: nowrap;
}
/* ===========================================
   USER CHANGE PAGE (cx-layout)
   templates/admin/core/user_change_form.html via CustomUserAdmin: photo or initials in the
   header; Profile (photo, names, email with the verified badge, mobile); Access (Admin or
   Chosen areas as option cards, a level per area, Individual permissions as a table in a
   disclosure); Account switch rows with the password row; rail with the contributor record and
   sign-in details. Option cards, the involved list, the rail note and the contributor pill
   are shared with the contributor page and the users list above.
   =========================================== */
body.cx-layout #content .cx-header__thumb--user {
  border-color: var(--cx-chip-border);
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: color-mix(in srgb, var(--cx-accent) 70%, var(--cx-label-color));
}

body.cx-layout #content .cx-header__thumb--user .cx-user-initials {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.cx-layout.model-user #content-main :is(button.cx-btn, label.cx-btn, a.cx-btn--small) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  height: 34px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
  color: var(--cx-label-color);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

body.cx-layout.model-user #content-main :is(button.cx-btn, label.cx-btn, a.cx-btn--small):hover,
body.cx-layout.model-user #content-main :is(button.cx-btn, a.cx-btn--small):focus-visible {
  border-color: var(--cx-muted);
}

body.cx-layout.model-user #content-main :is(button.cx-btn, label.cx-btn) svg {
  width: 15px;
  height: 15px;
}

/* Profile: the photo row spans both columns. */
body.cx-layout.model-user #content-main .cx-field.field-photo {
  grid-column: 1 / -1;
}

body.cx-layout.model-user #content-main .cx-user-photo {
  display: flex;
  align-items: center;
  gap: 16px;
}

body.cx-layout.model-user #content-main .cx-user-photo__preview {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: color-mix(in srgb, var(--cx-accent) 70%, var(--cx-label-color));
}

body.cx-layout.model-user #content-main .cx-user-photo__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.cx-layout.model-user #content-main .cx-user-photo__preview svg {
  width: 26px;
  height: 26px;
}

body.cx-layout.model-user #content-main .cx-user-photo [hidden] {
  display: none !important;
}

body.cx-layout.model-user #content-main .cx-user-photo__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.cx-layout.model-user #content-main .cx-user-photo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Remove: a bin button like the project files' (ticked = filled red; removed on save). */
body.cx-layout.model-user #content-main label.cx-user-photo__clear {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cx-chip-border);
  border-radius: 8px;
  background: var(--cx-chip-bg);
  color: var(--cx-delete-fg);
  cursor: pointer;
}

body.cx-layout.model-user #content-main label.cx-user-photo__clear:hover,
body.cx-layout.model-user #content-main label.cx-user-photo__clear:has(input:checked) {
  border-color: var(--cx-delete-fg);
}

body.cx-layout.model-user #content-main label.cx-user-photo__clear:has(input:checked) {
  background: var(--cx-delete-fg);
  color: var(--cx-switch-knob);
}

body.cx-layout.model-user #content-main label.cx-user-photo__clear:has(input:focus-visible) {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout.model-user #content-main label.cx-user-photo__clear input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

body.cx-layout.model-user #content-main label.cx-user-photo__clear svg {
  width: 16px;
  height: 16px;
}

body.cx-layout.model-user #content-main .cx-user-photo__name {
  color: var(--cx-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

body.cx-layout.model-user #content-main .cx-user-photo__name:empty {
  display: none;
}

/* The file input stays focusable; its label is the visible button. */
body.cx-layout.model-user #content-main .cx-user-photo__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.cx-layout.model-user #content-main .cx-user-photo:has(.cx-user-photo__input:focus-visible) label.cx-btn {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

/* Email with the verified badge. */
body.cx-layout.model-user #content-main .cx-user-email {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

body.cx-layout.model-user #content-main .cx-user-email input {
  flex: 1 1 auto;
  min-width: 0;
}

body.cx-layout.model-user #content-main .cx-user-verified {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cx-accent) 12%, transparent);
  color: var(--cx-accent);
  font-size: 0.75rem;
  font-weight: 600;
}

body.cx-layout.model-user #content-main .cx-user-verified svg {
  width: 12px;
  height: 12px;
}

body.cx-layout.model-user #content-main .cx-user-verified.is-unverified {
  border: 1px solid var(--cx-chip-border);
  background: var(--cx-chip-bg);
  color: var(--cx-muted);
}

/* Access: Admin hides the areas and permissions (they don't apply). */
body.cx-layout.model-user #content-main .cx-user-access-type__admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.cx-layout.model-user #content-main .cx-user-access-type__admin svg {
  width: 14px;
  height: 14px;
}

body.cx-layout.model-user #content-main .cx-user-access__areas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.cx-layout.model-user #content-main .cx-user-access__admin-note {
  display: none;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--darkened-bg, #f8f4ec);
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.model-user #content-main .cx-user-access-card:has(.cx-user-access-type input[value="admin"]:checked) .cx-user-access__admin-note {
  display: block;
}

body.cx-layout.model-user #content-main .cx-user-access-card:has(.cx-user-access-type input[value="admin"]:checked) .cx-user-access__areas {
  display: none;
}

/* Areas: one row each with a No access / View / Edit / Full picker. */
body.cx-layout.model-user #content-main .cx-user-areas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.cx-layout.model-user #content-main .cx-user-areas__list {
  overflow: hidden;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
}

body.cx-layout.model-user #content-main .cx-user-area {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--cx-input-bg);
}

body.cx-layout.model-user #content-main .cx-user-area + .cx-user-area {
  border-top: 1px solid var(--cx-line);
}

body.cx-layout.model-user #content-main .cx-user-area:has(.cx-user-levels__input[value=""]:checked) {
  background: var(--cx-chip-bg);
}

body.cx-layout.model-user #content-main .cx-user-area__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-layout.model-user #content-main .cx-user-area__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--cx-label-color);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-layout.model-user #content-main .cx-user-area__note {
  color: var(--cx-muted);
  font-size: 0.78rem;
}

body.cx-layout.model-user #content-main .cx-user-area__extra {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cx-unsaved) 18%, transparent);
  color: color-mix(in srgb, var(--cx-unsaved) 55%, var(--cx-label-color));
  font-size: 0.72rem;
  font-weight: 600;
}

body.cx-layout.model-user #content-main .cx-user-area__extra[hidden] {
  display: none;
}

body.cx-layout.model-user #content-main .cx-user-levels {
  position: relative;
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 9px;
  background: var(--cx-file-icon-bg);
}

body.cx-layout.model-user #content-main .cx-user-levels__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

body.cx-layout.model-user #content-main label.cx-user-levels__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 64px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border-radius: 7px;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

body.cx-layout.model-user #content-main label.cx-user-levels__option:hover {
  color: var(--cx-label-color);
}

body.cx-layout.model-user #content-main .cx-user-levels__input:checked + label.cx-user-levels__option {
  background: var(--cx-accent);
  color: var(--body-bg, #fff);
  font-weight: 600;
}

body.cx-layout.model-user #content-main .cx-user-levels__input:checked + label.cx-user-levels__option.is-none {
  background: var(--cx-input-bg);
  color: var(--cx-label-color);
  box-shadow: 0 1px 2px rgba(31, 28, 23, 0.12);
}

/* All areas On: the "No access" option reads View (JS); chosen, it's a faint tint because
   the access comes from All areas, not from this row. */
body.cx-layout.model-user #content-main .cx-user-levels__input:checked + label.cx-user-levels__option.is-implied {
  background: color-mix(in srgb, var(--cx-accent) 14%, var(--cx-input-bg));
  color: color-mix(in srgb, var(--cx-accent) 75%, var(--cx-label-color));
  font-weight: 600;
  box-shadow: none;
}

body.cx-layout.model-user #content-main label.cx-user-levels__option[hidden] {
  display: none;
}

body.cx-layout.model-user #content-main .cx-user-area.is-all-view {
  background: var(--cx-input-bg);
}

body.cx-layout.model-user #content-main .cx-user-levels__input:focus-visible + label.cx-user-levels__option {
  outline: 2px solid var(--cx-accent);
  outline-offset: 1px;
}

body.cx-layout.model-user #content-main .cx-user-areas__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  color: var(--cx-muted);
  font-size: 0.78rem;
}

body.cx-layout.model-user #content-main .cx-user-areas__legend strong {
  color: var(--cx-label-color);
  font-weight: 600;
}

body.cx-layout.model-user #content-main fieldset.cx-user-other {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
}

body.cx-layout.model-user #content-main fieldset.cx-user-other legend {
  padding: 0 4px;
  font-size: 0.8125rem;
  font-weight: 600;
}

body.cx-layout.model-user #content-main fieldset.cx-user-other label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
}

@media (max-width: 767px) {
  body.cx-layout.model-user #content-main .cx-user-area {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body.cx-layout.model-user #content-main .cx-user-levels {
    display: flex;
  }

  body.cx-layout.model-user #content-main label.cx-user-levels__option {
    flex: 1;
    min-width: 0;
    padding: 0 6px;
  }
}

/* Individual permissions: a disclosure with a View / Add / Change / Delete table. Grey,
   locked ticks come from an area level (admin_user_change.js sets data-from-area). */
body.cx-layout.model-user #content-main details.cx-user-perms {
  border-top: 1px solid var(--cx-line);
}

body.cx-layout.model-user #content-main .cx-user-perms__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  list-style: none;
  cursor: pointer;
}

body.cx-layout.model-user #content-main .cx-user-perms__summary::-webkit-details-marker {
  display: none;
}

body.cx-layout.model-user #content-main .cx-user-perms__summary svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--cx-label-color);
  transition: transform 0.15s ease;
}

body.cx-layout.model-user #content-main details.cx-user-perms[open] .cx-user-perms__summary svg {
  transform: rotate(90deg);
}

body.cx-layout.model-user #content-main .cx-user-perms__title {
  flex: 1;
  color: var(--cx-label-color);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-layout.model-user #content-main .cx-user-perms__count {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout.model-user #content-main .cx-user-perms__count.is-added {
  color: color-mix(in srgb, var(--cx-unsaved) 55%, var(--cx-label-color));
  font-weight: 600;
}

body.cx-layout.model-user #content-main .cx-user-perms__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 4px;
}

body.cx-layout.model-user #content-main .cx-user-perms__help {
  margin: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.model-user #content-main .cx-user-perms__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

body.cx-layout.model-user #content-main .cx-user-perms__search {
  position: relative;
  flex: 1 1 240px;
}

body.cx-layout.model-user #content-main .cx-user-perms__search svg {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--cx-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

body.cx-layout.model-user #content-main .cx-user-perms__search input {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
  color: var(--cx-input-fg);
  font-size: 0.875rem;
}

body.cx-layout.model-user #content-main label.cx-user-perms__granted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--cx-label-color);
  font-size: 0.84rem;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}

body.cx-layout.model-user #content-main .cx-user-perms__granted .cx-field__check {
  min-height: 0;
}

body.cx-layout.model-user #content-main table.cx-user-perms__table {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--cx-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  background: var(--cx-input-bg);
}

body.cx-layout.model-user #content-main .cx-user-perms__table thead th {
  width: 88px;
  height: 40px;
  padding: 0 8px;
  border-bottom: 1px solid var(--cx-line);
  background: var(--darkened-bg, #f8f4ec);
  color: var(--cx-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  vertical-align: middle;
}

body.cx-layout.model-user #content-main .cx-user-perms__table thead th:first-child {
  width: auto;
  padding-left: 16px;
  text-align: left;
}

body.cx-layout.model-user #content-main .cx-user-perms__section th {
  padding: 14px 16px 6px;
  border-top: 1px solid var(--cx-line);
  background: var(--cx-chip-bg);
  color: var(--cx-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

body.cx-layout.model-user #content-main thead + tbody .cx-user-perms__section th {
  border-top: 0;
}

body.cx-layout.model-user #content-main .cx-user-perms__from {
  margin-left: 6px;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

body.cx-layout.model-user #content-main tr[data-perm-row] > * {
  height: 40px;
  padding: 0 8px;
  border-top: 1px solid var(--cx-line);
  text-align: center;
  vertical-align: middle;
}

body.cx-layout.model-user #content-main tr[data-perm-row] > th {
  padding-left: 16px;
  color: var(--cx-label-color);
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
}

body.cx-layout.model-user #content-main tr[data-perm-row].is-added {
  background: color-mix(in srgb, var(--cx-unsaved) 7%, transparent);
}

body.cx-layout.model-user #content-main .cx-user-perms__table [hidden] {
  display: none;
}

body.cx-layout.model-user #content-main input.cx-user-perm {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--cx-dashed);
  border-radius: 5px;
  background: var(--cx-input-bg);
  vertical-align: middle;
  cursor: pointer;
}

body.cx-layout.model-user #content-main input.cx-user-perm:checked {
  border-color: var(--cx-accent);
  background: var(--cx-accent) var(--cx-tick-icon) center / 14px no-repeat;
}

body.cx-layout.model-user #content-main input.cx-user-perm[data-from-area],
body.cx-layout.model-user #content-main .cx-user-perms__swatch.is-from {
  border-color: transparent;
  background: var(--cx-thumb-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7d68' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat !important;
  opacity: 1;
  cursor: not-allowed;
}

body.cx-layout.model-user #content-main input.cx-user-perm:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout.model-user #content-main .cx-user-perms__empty {
  margin: 0;
  padding: 8px 0;
  color: var(--cx-muted);
  font-size: 0.84rem;
  text-align: center;
}

body.cx-layout.model-user #content-main .cx-user-perms__empty[hidden] {
  display: none;
}

body.cx-layout.model-user #content-main .cx-user-perms__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  color: var(--cx-muted);
  font-size: 0.78rem;
}

body.cx-layout.model-user #content-main .cx-user-perms__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.cx-layout.model-user #content-main .cx-user-perms__swatch {
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

body.cx-layout.model-user #content-main .cx-user-perms__swatch.is-added {
  background: var(--cx-accent) var(--cx-tick-icon) center / 11px no-repeat;
}

body.cx-layout.model-user #content-main .cx-user-perms__swatch.is-from {
  background-size: 11px !important;
}

body.cx-layout.model-user #content-main button.cx-user-perms__clear {
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link-fg, var(--cx-accent));
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

body.cx-layout.model-user #content-main button.cx-user-perms__clear[hidden] {
  display: none;
}

@media (max-width: 767px) {
  body.cx-layout.model-user #content-main .cx-user-perms__table thead th {
    width: 52px;
    padding: 0 4px;
  }

  body.cx-layout.model-user #content-main tr[data-perm-row] > th {
    padding-left: 10px;
    font-size: 0.8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cx-layout.model-user #content-main .cx-user-perms__summary svg {
    transition: none;
  }
}

/* Account: switch rows (Can sign in, Password, Admin site access, Welcome tour). */
body.cx-layout.model-user #content-main ul.cx-user-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-layout.model-user #content-main li.cx-user-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}

body.cx-layout.model-user #content-main li.cx-user-row:first-child {
  padding-top: 2px;
}

body.cx-layout.model-user #content-main li.cx-user-row:last-child {
  padding-bottom: 0;
}

body.cx-layout.model-user #content-main li.cx-user-row + li.cx-user-row {
  border-top: 1px solid var(--cx-line);
}

body.cx-layout.model-user #content-main .cx-user-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.cx-layout.model-user #content-main .cx-user-row__name {
  margin: 0;
  color: var(--cx-label-color);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-layout.model-user #content-main .cx-user-row__help {
  color: var(--cx-muted);
  font-size: 0.78125rem;
  line-height: 1.4;
}

body.cx-layout.model-user #content-main .cx-user-row .cx-field__check {
  flex: none;
  min-height: 0;
}

body.cx-layout.model-user #content-main .cx-user-row__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Set password replaces their password, so it's red like the cancel plan modal's button. */
body.cx-layout.model-user #content a.cx-btn.cx-user-row__danger,
body.cx-layout.model-user #content a.cx-btn.cx-user-row__danger:visited {
  border-color: color-mix(in srgb, var(--cx-delete-fg) 40%, transparent);
  color: var(--cx-delete-fg);
}

body.cx-layout.model-user #content a.cx-btn.cx-user-row__danger:is(:hover, :focus-visible) {
  border-color: var(--cx-delete-fg);
  background: color-mix(in srgb, var(--cx-delete-fg) 7%, var(--cx-input-bg));
  color: var(--cx-delete-fg);
}

/* Organisation (global admin): the client picker with Open client beside it, then the
   Email verified switch row; "System admin only" by the title. */
body.cx-layout.model-user #content-main .cx-user-org__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

body.cx-layout.model-user #content-main .cx-user-org__head .cx-card__title {
  margin: 0;
}

body.cx-layout.model-user #content-main .cx-user-org__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: var(--cx-accent);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

body.cx-layout.model-user #content-main .cx-user-org__pill svg {
  width: 12px;
  height: 12px;
}

body.cx-layout.model-user #content-main .cx-user-org__picker {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.cx-layout.model-user #content-main .cx-user-org__picker > .cx-field__control {
  flex: 1;
  min-width: 0;
}

body.cx-layout.model-user #content-main .cx-user-org__picker {
  gap: 8px;
}

/* Open client: a square icon button as tall as the select. */
body.cx-layout.model-user #content-main a.cx-user-org__open {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
  color: var(--cx-accent);
  text-decoration: none;
}

body.cx-layout.model-user #content-main a.cx-user-org__open:is(:hover, :focus-visible) {
  border-color: var(--cx-accent);
}

body.cx-layout.model-user #content-main a.cx-user-org__open svg {
  width: 18px;
  height: 18px;
}

/* Unverified email: amber before the lockout date, red once they're locked out. */
body.cx-layout.model-user #content-main .cx-user-verify {
  --cx-verify-fg: #6e4a10;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #ecd9a8;
  border-radius: 10px;
  background: #fbf3e1;
}

body.cx-layout.model-user #content-main .cx-user-verify--locked {
  --cx-verify-fg: #8a2c1f;
  border-color: #e8c4bc;
  background: #f9e9e5;
}

body.cx-layout.model-user #content-main .cx-user-verify > svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--cx-verify-fg);
}

body.cx-layout.model-user #content-main .cx-user-verify__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: var(--cx-label-color);
  font-size: 0.78125rem;
  line-height: 1.45;
}

body.cx-layout.model-user #content-main .cx-user-verify__text strong {
  color: var(--cx-verify-fg);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-layout.model-user #content-main .cx-user-verify--locked button.cx-user-verify__btn {
  border-color: transparent;
  background: var(--admin-submit-primary-bg, #2a3d2a);
  color: #fff;
  font-weight: 600;
}

html[data-theme="dark"] body.cx-layout.model-user #content-main .cx-user-verify {
  --cx-verify-fg: #e8c77a;
  border-color: rgba(232, 199, 122, 0.3);
  background: rgba(232, 199, 122, 0.08);
}

html[data-theme="dark"] body.cx-layout.model-user #content-main .cx-user-verify--locked {
  --cx-verify-fg: #f0a597;
  border-color: rgba(240, 165, 151, 0.3);
  background: rgba(240, 165, 151, 0.08);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout.model-user #content-main .cx-user-verify {
    --cx-verify-fg: #e8c77a;
    border-color: rgba(232, 199, 122, 0.3);
    background: rgba(232, 199, 122, 0.08);
  }

  html[data-theme="auto"] body.cx-layout.model-user #content-main .cx-user-verify--locked {
    --cx-verify-fg: #f0a597;
    border-color: rgba(240, 165, 151, 0.3);
    background: rgba(240, 165, 151, 0.08);
  }
}

@media (max-width: 600px) {
  body.cx-layout.model-user #content-main .cx-user-verify {
    flex-wrap: wrap;
  }

  body.cx-layout.model-user #content-main .cx-user-verify__btn {
    margin-left: 30px;
  }
}

/* Header: their client as a pill leading the meta line (like the category pill). */
body.cx-layout #content .cx-header__meta a.cx-user-org-chip {
  margin-right: 10px;
  padding-left: 4px;
  color: var(--cx-label-color);
}

body.cx-layout #content .cx-user-org-chip__tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--cx-client-tile, var(--cx-accent));
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 0.6875rem;
  font-weight: 600;
}

body.cx-layout #content .cx-user-org-chip__tile.is-logo {
  border: 1px solid var(--cx-line);
  background: #fff;
}

body.cx-layout #content .cx-user-org-chip__tile.is-logo.is-dark {
  border-color: #2a3d2a;
  background: #2a3d2a;
}

body.cx-layout #content .cx-user-org-chip__tile img {
  width: 100%;
  height: 100%;
  padding: 1px;
  box-sizing: border-box;
  object-fit: contain;
}

/* Rail: the contributor record and sign-in details. */
body.cx-layout.model-user #content-main .cx-user-contributor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

body.cx-layout.model-user #content-main .cx-user-contributor-row__note {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout.model-user #content-main dl.cx-user-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}

body.cx-layout.model-user #content-main dl.cx-user-facts > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cx-line);
}

body.cx-layout.model-user #content-main dl.cx-user-facts > div:last-child {
  border-bottom: 0;
}

body.cx-layout.model-user #content-main dl.cx-user-facts dt {
  flex: 1;
  margin: 0;
  color: var(--cx-muted);
  font-size: 0.84rem;
  font-weight: 400;
}

body.cx-layout.model-user #content-main dl.cx-user-facts dd {
  margin: 0;
  color: var(--cx-label-color);
  font-size: 0.84rem;
  text-align: right;
  overflow-wrap: anywhere;
}


/* ===========================================
   DOCUMENT LIBRARY LIST (cx-layout)
   cx_change_list.html via DocumentLibraryAdmin (list only, no grid): a file-type tile, title
   and file name; type; the archive item or project an attachment belongs to; date added
   and by whom. The All / Library / Attachments toggle is the shared .cx-segmented.
   =========================================== */
body.cx-list.model-documentlibrary #content-main #result_list:not(.changelist-columns-sized) th.column-document_title {
  width: 400px;
}

body.cx-list.model-documentlibrary #content-main #result_list:not(.changelist-columns-sized) th.column-type_label {
  width: 170px;
}

body.cx-list.model-documentlibrary #content-main #result_list:not(.changelist-columns-sized) th.column-added {
  width: 160px;
}

body.cx-list.model-documentlibrary #content-main .cx-doc,
body.cx-list.model-documentlibrary #content-main .cx-doc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.cx-list.model-documentlibrary #content-main .cx-doc-link {
  gap: 10px;
}

body.cx-list.model-documentlibrary #content-main .cx-doc-link > .material-symbols-outlined {
  flex: none;
  color: var(--cx-muted);
  font-size: 18px;
}

body.cx-list.model-documentlibrary #content-main .cx-doc__tile {
  --cx-doc-tone: var(--cx-muted);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cx-doc-tone) 12%, var(--cx-chip-bg));
  color: color-mix(in srgb, var(--cx-doc-tone) 85%, var(--cx-label-color));
}

body.cx-list.model-documentlibrary #content-main .cx-doc__tile .material-symbols-outlined {
  font-size: 20px;
}

body.cx-list.model-documentlibrary #content-main .cx-doc__tile--pdf { --cx-doc-tone: #a8452a; }
body.cx-list.model-documentlibrary #content-main .cx-doc__tile--image { --cx-doc-tone: #1d4a73; }
body.cx-list.model-documentlibrary #content-main .cx-doc__tile--link { --cx-doc-tone: var(--cx-accent); }
body.cx-list.model-documentlibrary #content-main .cx-doc__tile--invoice { --cx-doc-tone: #8a6100; }

body.cx-list.model-documentlibrary #content-main .cx-doc__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-list.model-documentlibrary #content-main .cx-doc__title {
  overflow: hidden;
  color: var(--cx-label-color);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list.model-documentlibrary #content-main .cx-doc__text > a {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list.model-documentlibrary #content-main .cx-doc__sub {
  overflow: hidden;
  color: var(--cx-muted);
  font-size: 0.78rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list.model-documentlibrary #content-main .cx-doc__sub.is-muted,
body.cx-list.model-documentlibrary #content-main .cx-doc__none {
  color: var(--cx-muted);
  opacity: 0.75;
}

/* ===========================================
   CATEGORY PILL (cx-layout)
   includes/cx_category_pill.html: the category's icon + name, first in the archive item
   header's meta line (links to the Category page) and in the Category page's preview.
   =========================================== */
body.cx-layout #content .cx-category-pill,
body.cx-layout #content .cx-header__meta a.cx-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  box-sizing: border-box;
  padding: 0 11px 0 8px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: var(--cx-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* Hug the content inside column-flex cards (the Category page preview). */
body.cx-layout #content .cx-card > .cx-category-pill {
  align-self: flex-start;
  height: 28px;
}

body.cx-layout #content a.cx-category-pill:is(:hover, :focus-visible) {
  border-color: var(--cx-accent);
  text-decoration: none;
}

body.cx-layout #content .cx-category-pill .material-symbols-outlined {
  font-size: 17px;
}

/* The pill leads the meta line: centred with the text and no "·" after it. */
body.cx-layout #content .cx-header__meta:has(.cx-category-pill) {
  align-items: center;
}

/* The location: a pin and an underlined link mid-line (keeps its "·"), quieter than
   the category pill so the two don't read as the same kind of thing. */
body.cx-layout #content .cx-header__meta > span.cx-header__meta-place,
body.cx-layout #content .cx-header__meta-place > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.cx-layout #content .cx-header__meta-place > a {
  text-decoration: none;
}

body.cx-layout #content .cx-header__meta-place .material-symbols-outlined {
  color: var(--cx-accent);
  font-size: 17px;
}

body.cx-layout #content .cx-header__meta-place > a > .cx-header__meta-place-name {
  text-decoration: underline;
  text-decoration-color: var(--cx-line);
  text-underline-offset: 2px;
}

body.cx-layout #content .cx-header__meta-place > a:is(:hover, :focus-visible) > .cx-header__meta-place-name {
  text-decoration-color: currentColor;
}

body.cx-layout #content .cx-header__meta > span.cx-header__meta-pill {
  margin-right: 10px;
}

body.cx-layout #content .cx-header__meta > span.cx-header__meta-pill::after {
  content: none;
}

/* ===========================================
   CATEGORY AND CONTRIBUTOR ROLE CHANGE PAGES (cx-layout)
   (The Location change page shares the rail preview, items list, note and dropdown preview.)
   templates/admin/core/category_change_form.html and role_change_form.html: icon header
   tile, Category / Contributor role card (Name, Description, Icon grid), Preview rail,
   then Archive items or Contributors. Role tiles are round, like contributor avatars.
   =========================================== */
body.cx-layout #content .cx-header__thumb--category {
  border-color: var(--cx-chip-border);
  background: var(--cx-thumb-bg);
  color: var(--cx-accent);
}

body.cx-layout #content .cx-header__thumb--category .material-symbols-outlined {
  font-size: 32px;
}

/* New category: only the line icon until an icon is picked (Material Symbols CSS
   sets display on the glyph, which would override [hidden]). */
body.cx-layout #content .cx-header__thumb--category [data-category-glyph][hidden] {
  display: none !important;
}

body.cx-layout #content .cx-header__thumb--category svg.cx-header__model-icon {
  width: 30px;
  height: 30px;
}

/* One field per row: short name, long description, the icon grid. */
body.cx-layout:is(.model-category, .model-role) #content-main .cx-category-card .cx-field {
  grid-column: 1 / -1;
}

/* Icon field: label, then the chosen icon's name beside it, then the grid and help.
   The widget's wrappers use display: contents so their parts join the field's row. */
body.cx-layout:is(.model-category, .model-role) #content-main .cx-field.field-icon {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 8px;
}

body.cx-layout:is(.model-category, .model-role) #content-main .cx-field.field-icon > .cx-field__control,
body.cx-layout:is(.model-category, .model-role) #content-main .cx-icon-picker {
  display: contents;
}

body.cx-layout:is(.model-category, .model-role) #content-main .cx-field.field-icon > :not(label, .cx-field__control) {
  flex-basis: 100%;
}

body.cx-layout:is(.model-category, .model-role) #content-main .cx-icon-picker__current {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout:is(.model-category, .model-role) #content-main .cx-icon-picker__grid {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 6px;
}

body.cx-layout:is(.model-category, .model-role) #content-main .cx-icon-picker__grid > label.custodia-icon-choice {
  position: relative;
  display: flex;
  float: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cx-chip-border);
  border-radius: 9px;
  background: var(--cx-input-bg);
  color: var(--cx-chip-fg);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

body.cx-layout:is(.model-category, .model-role) #content-main .cx-icon-picker__grid > label.custodia-icon-choice::after {
  display: none;
}

body.cx-layout:is(.model-category, .model-role) #content-main .cx-icon-picker__grid > label.custodia-icon-choice:hover {
  border-color: var(--cx-accent);
  background: var(--cx-chip-bg);
}

body.cx-layout:is(.model-category, .model-role) #content-main .cx-icon-picker__grid > label.custodia-icon-choice:has(input:checked) {
  border: 2px solid var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 9%, var(--cx-input-bg));
  color: var(--cx-accent);
  box-shadow: none;
}

body.cx-layout:is(.model-category, .model-role) #content-main .cx-icon-picker__grid > label.custodia-icon-choice:focus-within {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout:is(.model-category, .model-role) #content-main .cx-icon-picker__grid .custodia-icon-choice__glyph {
  font-size: 22px;
}

/* Rail: preview of the categories list row. Every preview label is a small caps eyebrow,
   8px above its preview (the rail card's 14px gap, less 6px); groups are 22px apart. */
body.cx-layout:is(.model-category, .model-role, .model-location, .model-organisationsettings) #content-main .cx-category-preview__label {
  margin: 0 0 -6px;
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.cx-layout:is(.model-category, .model-role, .model-location, .model-organisationsettings) #content-main .cx-category-preview__label:not(:first-of-type) {
  margin-top: 8px;
}

body.cx-layout:is(.model-category, .model-role, .model-location) #content-main .cx-category-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--cx-input-bg);
}

body.cx-layout:is(.model-category, .model-role, .model-location) #content-main .cx-category-preview .custodia-category-list-name__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--cx-thumb-bg);
  color: var(--cx-accent);
}

body.cx-layout:is(.model-category, .model-role, .model-location) #content-main .cx-category-preview .material-symbols-outlined {
  font-size: 20px;
}

body.cx-layout:is(.model-category, .model-role, .model-location) #content-main .cx-category-preview__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-layout:is(.model-category, .model-role, .model-location) #content-main .cx-category-preview__name {
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

body.cx-layout:is(.model-category, .model-role, .model-location) #content-main .cx-category-preview__desc {
  overflow: hidden;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rail: newest archive items in the category. */
body.cx-layout:is(.model-category, .model-role, .model-location) #content-main .cx-category-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

body.cx-layout:is(.model-category, .model-role, .model-location) #content-main .cx-category-items-list .cx-rail-item__thumb {
  width: 40px;
  height: 40px;
}

body.cx-layout:is(.model-category, .model-role, .model-location) #content-main .cx-category-items-list a.cx-rail-item__title {
  font-size: 0.84375rem;
  font-weight: 500;
}

body.cx-layout:is(.model-category, .model-role, .model-location, .model-documentlibrary, .model-organisationsettings, .model-appearancesettings, .model-automationsettings, .model-user) #content-main .cx-category-note {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--darkened-bg, #f8f4ec);
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout:is(.model-category, .model-role, .model-location, .model-documentlibrary, .model-organisationsettings, .model-appearancesettings, .model-automationsettings, .model-user) #content-main .cx-category-note svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

body.cx-layout #content .cx-header__thumb--role,
body.cx-layout.model-role #content-main .cx-category-preview .custodia-category-list-name__icon {
  border-radius: 999px;
}

body.cx-layout.model-role #content-main .cx-category-preview__text {
  flex-grow: 1;
}

body.cx-layout.model-role #content-main .cx-role-preview__role {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  font-size: 0.84375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rail: the role dropdown as it appears on a contributor (icon inside the select). */
body.cx-layout:is(.model-role, .model-location) #content-main .cx-role-preview__select {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
  font-size: 0.875rem;
}

body.cx-layout:is(.model-role, .model-location) #content-main .cx-role-preview__select .material-symbols-outlined {
  color: var(--cx-accent);
  font-size: 20px;
}

body.cx-layout:is(.model-role, .model-location) #content-main .cx-role-preview__select-name {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-layout:is(.model-role, .model-location) #content-main .cx-role-preview__select svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--cx-muted);
}

/* Rail: contributors with this role (round for people, square for organisations). */
body.cx-layout.model-role #content-main .cx-role-people {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

body.cx-layout.model-role #content-main .cx-role-people li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.cx-layout.model-role #content-main .cx-role-people__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: var(--cx-accent);
}

body.cx-layout.model-role #content-main .cx-role-people__avatar.is-org {
  border-radius: 8px;
}

body.cx-layout.model-role #content-main .cx-role-people__avatar .material-symbols-outlined {
  font-size: 18px;
}

body.cx-layout.model-role #content-main .cx-role-people a.cx-rail-item__title {
  font-size: 0.84375rem;
  font-weight: 500;
}

/* ===========================================
   LOCATION CHANGE PAGE (cx-layout)
   templates/admin/core/location_change_form.html: pin header tile with the Suitable for
   display tag, Location card ending with the display switch (a panel, label beside the
   switch, a lock note while items here are On display), and a Preview / Archive items rail.
   =========================================== */
body.cx-layout.model-location #content-main .cx-location-card .cx-field {
  grid-column: 1 / -1;
}

/* The switch on the left, label then help text beside it. */
body.cx-layout.model-location #content-main .cx-field.field-is_display_appropriate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--darkened-bg, #fbf8f1);
}

body.cx-layout.model-location #content-main .field-is_display_appropriate > .cx-field__check {
  display: contents;
}

body.cx-layout.model-location #content-main .field-is_display_appropriate > label {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--body-fg);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-layout.model-location #content-main .field-is_display_appropriate .cx-field__check > input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: 1px;
}

body.cx-layout.model-location #content-main .field-is_display_appropriate .cx-field__check > .cx-field__check-text {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.model-location #content-main .field-is_display_appropriate > :is(.errorlist, ul.errorlist) {
  grid-column: 2;
}

/* Locked (items here are On display): full-strength "on" colour, plain cursor. */
body.cx-layout.model-location #content-main .field-is_display_appropriate .cx-field__check > input[type="checkbox"]:checked:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body.cx-layout.model-location #content-main .cx-location-lock {
  display: flex;
  gap: 8px;
  color: var(--cx-muted);
}

body.cx-layout.model-location #content-main .cx-location-lock .material-symbols-outlined {
  flex: none;
  margin-top: 1px;
  font-size: 16px;
}

body.cx-layout.model-location #content-main .cx-location-lock a {
  font-weight: 500;
}

/* Rail preview: display line under the name, item count on the right. */
body.cx-layout.model-location #content-main .cx-category-preview__text {
  flex-grow: 1;
}

body.cx-layout.model-location #content-main .cx-location-preview__display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cx-done);
  font-size: 0.78125rem;
}

body.cx-layout.model-location #content-main .cx-location-preview__display[hidden] {
  display: none;
}

body.cx-layout.model-location #content-main .cx-location-preview__display.is-no {
  color: var(--cx-muted);
}

body.cx-layout.model-location #content-main .cx-location-preview__display .material-symbols-outlined {
  font-size: 14px;
}

body.cx-layout.model-location #content-main .cx-location-preview__count {
  flex: none;
  color: var(--cx-accent);
  font-size: 0.84375rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Rail: archive items kept here, with their status (On display in green). */
body.cx-layout.model-location #content-main .cx-category-items-list .cx-rail-item__text {
  flex-grow: 1;
}

body.cx-layout.model-location #content-main .cx-location-item-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 999px;
  background: var(--cx-file-icon-bg);
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

body.cx-layout.model-location #content-main .cx-location-item-status.is-on-display {
  border-color: color-mix(in srgb, var(--cx-done) 30%, transparent);
  background: color-mix(in srgb, var(--cx-done) 13%, transparent);
  color: var(--cx-done);
}

/* ===========================================
   DOCUMENT CHANGE PAGE (cx-layout)
   templates/admin/core/documentlibrary_change_form.html: file-type tile in the header,
   Document card (Title; Type beside Category; Description), File card (Uploaded file /
   External link switch, current file or link row, drop zone around the file input), rail
   with the rendered first page, Details and a note. Preview window styles stay in
   core/css/admin_document_preview.css; admin_document_library.js drives the switch,
   drop zone and first page.
   =========================================== */
body.cx-layout.model-documentlibrary #content .cx-doc-tile {
  --cx-doc-tone: var(--cx-muted);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cx-doc-tone) 12%, var(--cx-chip-bg));
  color: color-mix(in srgb, var(--cx-doc-tone) 85%, var(--cx-label-color));
}

body.cx-layout.model-documentlibrary #content .cx-doc-tile .material-symbols-outlined {
  font-size: 22px;
}

body.cx-layout.model-documentlibrary #content .cx-doc-tile--pdf { --cx-doc-tone: #a8452a; }
body.cx-layout.model-documentlibrary #content .cx-doc-tile--image { --cx-doc-tone: #1d4a73; }
body.cx-layout.model-documentlibrary #content .cx-doc-tile--link,
body.cx-layout.model-documentlibrary #content .cx-doc-tile--new { --cx-doc-tone: var(--cx-accent); }
body.cx-layout.model-documentlibrary #content .cx-doc-tile--invoice { --cx-doc-tone: #8a6100; }

body.cx-layout.model-documentlibrary #content .cx-header__thumb.cx-doc-tile {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}

body.cx-layout.model-documentlibrary #content .cx-header__thumb.cx-doc-tile .material-symbols-outlined {
  font-size: 32px;
}

/* Administrative / Operational, before the type. */
body.cx-layout.model-documentlibrary #content .cx-header__meta > .cx-doc-group {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: var(--cx-label-color);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Document card: Title and Description span the card; Type and Category share a row. */
body.cx-layout.model-documentlibrary #content-main .cx-doc-card .cx-field.field-title {
  grid-column: 1 / -1;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-card .cx-field--readonly:is(.field-document_type, .field-document_group_label) {
  grid-column: auto;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-card .cx-field--readonly .readonly {
  display: flex;
  align-items: center;
  min-height: 40px;
}

/* ---- File card ---- */
body.cx-layout.model-documentlibrary #content-main .cx-doc-file-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-file-card__head > .cx-card__title {
  flex-grow: 1;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-source:not([hidden]) {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--cx-thumb-bg);
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-source__option {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-source__option > input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-source__option > span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--cx-muted);
  font-size: 0.84375rem;
  font-weight: 500;
  white-space: nowrap;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-source__option > input:checked + span {
  background: var(--cx-input-bg);
  box-shadow: 0 1px 2px rgba(31, 28, 23, 0.12);
  color: var(--cx-input-fg);
  font-weight: 600;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-source__option > input:focus-visible + span {
  outline: 2px solid var(--cx-accent);
  outline-offset: 1px;
}

/* Current file or link. */
body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--cx-input-bg);
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-file[hidden] {
  display: none;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-file__text {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-file__name {
  display: block;
  color: var(--cx-input-fg);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main button.cx-doc-file__name {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main :is(a, button).cx-doc-file__name:hover {
  text-decoration: underline;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main button.cx-doc-file__name:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-file__sub {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-file__url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main :is(button, a, label).cx-doc-file__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--cx-accent);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main :is(button, a, label).cx-doc-file__action:hover {
  background: var(--cx-chip-bg);
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-file__action--outline {
  border-color: var(--cx-input-border);
  background: var(--body-bg, #fff);
  color: var(--cx-label-color);
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-file__action .material-symbols-outlined {
  font-size: 18px;
}

/* The file input's drop zone; the input itself is visually hidden inside it. */
body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 64px;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px dashed var(--cx-dashed);
  border-radius: 10px;
  background: var(--cx-chip-bg);
  color: var(--cx-muted);
  font-size: 0.84375rem;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-drop:hover,
body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-drop.is-dragover {
  border-color: var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 6%, var(--cx-chip-bg));
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-drop:has(input:focus-visible) {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-drop > input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-drop > svg {
  flex: none;
  width: 18px;
  height: 18px;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-doc-drop__choose {
  color: var(--cx-accent);
  font-weight: 600;
  text-decoration: underline;
}

body.cx-layout:is(.model-documentlibrary, .model-organisationsettings) #content-main .cx-field--error .cx-doc-drop {
  border-color: var(--cx-error-border);
  background: var(--cx-error-bg);
}

/* The switch replaces the checkbox, and the mode not chosen (disabled by the script) hides. */
body.cx-layout.model-documentlibrary #content-main .cx-doc-file-card .cx-field.field-disabled,
body.cx-layout.model-documentlibrary #content-main .cx-doc-file-card .cx-field[hidden] {
  display: none;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-file-card .custodia-doc-staging-preview {
  margin-top: 0;
  border-color: var(--cx-dashed);
  border-radius: 10px;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-file-card__source {
  margin: 0;
}

/* ---- Rail: rendered first page ---- */
body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb-card {
  overflow: hidden;
  padding: 0;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb {
  position: relative;
  height: 236px;
  overflow: hidden;
  background: color-mix(in srgb, #8a7d68 17%, var(--body-bg, #fffdf8));
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb__page {
  position: absolute;
  inset: 0;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb__page .custodia-pdf-toolbar {
  display: none;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb__page .custodia-pdf-canvas-wrap {
  overflow: hidden;
  padding: 20px 64px 0;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb__page .custodia-preview-img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb__page .custodia-preview-text {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 0.6875rem;
}

body.cx-layout.model-documentlibrary #content-main button.cx-doc-thumb__open {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0 0 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(31, 28, 23, 0.88);
  color: #f6f1e7;
  font-size: 0.84375rem;
  font-weight: 500;
  white-space: nowrap;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb__pill .material-symbols-outlined {
  font-size: 17px;
}

body.cx-layout.model-documentlibrary #content-main button.cx-doc-thumb__open:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: -4px;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 180px;
  padding: 0 24px;
  text-align: center;
}

body.cx-layout.model-documentlibrary #content-main a.cx-doc-thumb--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

body.cx-layout.model-documentlibrary #content-main a.cx-doc-thumb--link .cx-doc-thumb__pill {
  margin-top: 10px;
}

body.cx-layout.model-documentlibrary #content-main a.cx-doc-thumb--link:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: -4px;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-thumb__note {
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.model-documentlibrary #content-main .cx-doc-details > dd.cx-doc-details__none {
  color: var(--cx-muted);
  font-weight: 400;
}

/* ===========================================
   CONTRIBUTOR CHANGE PAGE (cx-layout)
   templates/admin/core/contributor_change_form.html: role icon header tile (round for
   people, square for organisations), Contributor / Sign-in / Contact details / Bio cards,
   and an Involved in / Projects led / Open tasks rail.
   =========================================== */
body.cx-layout #content .cx-header__thumb--contributor {
  border-color: var(--cx-chip-border);
  border-radius: 999px;
  background: var(--cx-thumb-bg);
  color: var(--cx-accent);
}

body.cx-layout #content .cx-header__thumb--contributor.is-org {
  border-radius: 14px;
}

body.cx-layout #content .cx-header__thumb--contributor .material-symbols-outlined {
  font-size: 32px;
}

/* New contributor: only the line icon until a role is picked (Material Symbols CSS
   sets display on the glyph, which would override [hidden]). */
body.cx-layout #content .cx-header__thumb--contributor [data-role-glyph][hidden] {
  display: none !important;
}

body.cx-layout #content .cx-header__thumb--contributor svg.cx-header__model-icon {
  width: 30px;
  height: 30px;
}

body.cx-layout #content .cx-header__title-row .cx-person__user {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cx-accent) 12%, transparent);
  color: var(--cx-accent);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Full-width fields; first/last name and email/phone share a row. */
body.cx-layout.model-contributor #content-main .cx-contributor-card :is(.field-type, .field-role, .field-user, .field-notes, .field-organisation_name, .field-organization) {
  grid-column: 1 / -1;
}

body.cx-layout.model-contributor #content-main .cx-contributor-card > .cx-card__description {
  margin: -8px 0 16px;
}

/* Bio: the card title is the label. */
body.cx-layout.model-contributor #content-main .cx-field.field-notes > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Type: two option cards (ContributorAdminForm.TypeCards). */
body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-type-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

@media (max-width: 767px) {
  body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-type-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.cx-layout:is(.model-contributor, .model-user) #content-main label.cx-type-card {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 10px;
  background: var(--cx-input-bg);
  color: var(--cx-label-color);
  font-weight: 400;
  cursor: pointer;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main label.cx-type-card:hover {
  border-color: var(--cx-accent);
}

body.cx-layout:is(.model-contributor, .model-user) #content-main label.cx-type-card:has(input:checked) {
  padding: 11px 13px;
  border: 2px solid var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 9%, var(--cx-input-bg));
}

body.cx-layout:is(.model-contributor, .model-user) #content-main label.cx-type-card:focus-within {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main label.cx-type-card input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cx-accent);
}

body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-type-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-type-card__title {
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-type-card__desc {
  color: var(--cx-muted);
  font-size: 0.78rem;
}

/* Role: the chosen role's icon inside the select (admin_person.js). */
body.cx-layout.model-contributor #content-main .field-role .cx-field__control :is(.related-widget-wrapper, :has(> .cx-role-glyph)) {
  position: relative;
}

body.cx-layout.model-contributor #content-main .field-role .cx-role-glyph {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  color: var(--cx-accent);
  font-size: 20px;
  pointer-events: none;
  transform: translateY(-50%);
}

body.cx-layout.model-contributor #content-main .field-role .cx-role-glyph[hidden] {
  display: none !important;
}

body.cx-layout.model-contributor #content-main div.cx-field.field-role div.cx-field__control select.has-role-glyph {
  padding-left: 42px;
}

/* Contact details: the fields a linked user supplies are locked (admin_person.js sets
   readonly + disabled); a lock marks them and the note above says where they come from. */
body.cx-layout.model-contributor #content-main fieldset.contact-details-fieldset div.cx-field div.cx-field__control input:disabled {
  padding-right: 34px;
  border-color: var(--cx-line);
  background: var(--cx-disabled-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a8f7d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") no-repeat right 12px center / 14px 14px;
  color: var(--cx-label-color);
  opacity: 1;
  cursor: not-allowed;
}

body.cx-layout.model-contributor #content-main .cx-contributor-linked {
  display: flex;
  gap: 10px;
  margin: -4px 0 18px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--cx-accent) 18%, var(--cx-line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--cx-accent) 6%, var(--cx-input-bg));
  color: var(--cx-label-color);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.model-contributor #content-main .cx-contributor-linked[hidden] {
  display: none;
}

body.cx-layout.model-contributor #content-main .cx-contributor-linked svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

body.cx-layout.model-contributor #content-main .cx-contributor-linked a {
  font-weight: 500;
}

/* Rail: Involved in counts. */
body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-contributor-involved {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-contributor-involved li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cx-line);
  font-size: 0.875rem;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-contributor-involved li:last-child {
  border-bottom: 0;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-contributor-involved li > span:first-child {
  flex-grow: 1;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-contributor-involved a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  text-decoration: none;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-contributor-involved a svg {
  width: 14px;
  height: 14px;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-contributor-involved__count {
  font-weight: 600;
}

body.cx-layout:is(.model-contributor, .model-user) #content-main .cx-contributor-involved__count.is-zero {
  color: var(--cx-muted);
  font-weight: 400;
  opacity: 0.75;
}

/* Rail: projects led and open tasks. */
body.cx-layout.model-contributor #content-main .cx-contributor-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

body.cx-layout.model-contributor #content-main .cx-contributor-list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.cx-layout.model-contributor #content-main .cx-contributor-list__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.cx-layout.model-contributor #content-main a.cx-contributor-list__title {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--cx-label-color);
  font-size: 0.84375rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-layout.model-contributor #content-main .cx-contributor-list__row .custodia-status-badge {
  flex: none;
}

body.cx-layout.model-contributor #content-main .cx-contributor-list__meta {
  color: var(--cx-muted);
  font-size: 0.78rem;
}

body.cx-layout.model-contributor #content-main .cx-contributor-list__meta.cx-overdue {
  color: var(--cx-error-border);
  font-weight: 500;
}

body.cx-layout.model-contributor #content-main .cx-contributor-note {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--darkened-bg, #f8f4ec);
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.model-contributor #content-main .cx-contributor-note svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* ===========================================
   PROJECT TASK CHANGE PAGE (cx-layout)
   templates/admin/core/projecttask_change_form.html: header state ring, Task card
   (details + Schedule + Notes), Photos (gallery), Summary + Project rail.
   =========================================== */
/* Header: the task's state in place of a picture (same states as the list's tick):
   pending = clipboard + clock (amber), overdue = calendar with a cross (red),
   done = circled tick (green). */
body.cx-layout {
  --cx-pending: #8a6412;
}

html[data-theme="dark"] body.cx-layout {
  --cx-pending: #e3b862;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout {
    --cx-pending: #e3b862;
  }
}

body.cx-layout #content .cx-header__thumb--task {
  --cx-state: var(--cx-pending);
  border-color: color-mix(in srgb, var(--cx-state) 28%, transparent);
  background: color-mix(in srgb, var(--cx-state) 10%, transparent);
  color: var(--cx-state);
}

body.cx-layout #content .cx-header__thumb--task[data-state="overdue"] {
  --cx-state: var(--cx-overdue);
}

body.cx-layout #content .cx-header__thumb--task[data-state="done"] {
  --cx-state: var(--cx-done);
}

body.cx-layout #content .cx-header__thumb--task svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 767px) {
  body.cx-layout #content .cx-header__thumb--task svg {
    width: 24px;
    height: 24px;
  }
}

body.cx-layout #content .cx-header__meta .cx-overdue {
  color: var(--cx-overdue);
  font-weight: 600;
}

/* Task card: the task name takes the full width; Project and Person share a row. */
body.cx-layout #content-main .cx-task-card .cx-field.field-title {
  grid-column: 1 / -1;
}

/* ===========================================
   DATE PICKER (cx-layout)
   core/js/cx_datepicker.js replaces Django's Today link + calendar box on
   cx pages: one calendar button inside the field, a popup anchored under it
   (flips above near the bottom, right-aligns near the edge) and a bottom sheet
   on phones (<= 600px). Dates stay in the organisation's format.
   =========================================== */
body.cx-layout {
  --cx-on-accent: #ffffff;
  --cx-datepicker-shadow: 0 16px 40px rgba(31, 28, 23, 0.16), 0 2px 6px rgba(31, 28, 23, 0.06);
}

html[data-theme="dark"] body.cx-layout {
  --cx-on-accent: #1e1e1c;
  --cx-datepicker-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout {
    --cx-on-accent: #1e1e1c;
    --cx-datepicker-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  }
}

/* The field: input with the calendar button inside its right edge. */
body.cx-layout #content-main .cx-date {
  position: relative;
  display: flex;
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 100%;
}

body.cx-layout #content-main .cx-date > input {
  flex: 1 1 auto;
  width: 100% !important; /* beats the legacy 9.5rem condition-log width */
  min-width: 0;
  margin: 0;
  padding-right: 44px !important;
}

body.cx-layout #content-main .cx-date > input[aria-invalid="true"] {
  border-width: 1.5px;
  border-color: var(--cx-error-border);
}

body.cx-layout #content-main button.cx-date__button {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cx-chip-fg);
  box-shadow: none;
  cursor: pointer;
}

body.cx-layout #content-main button.cx-date__button svg {
  width: 17px;
  height: 17px;
}

body.cx-layout #content-main button.cx-date__button:hover,
body.cx-layout #content-main button.cx-date__button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--cx-accent) 12%, transparent);
  color: var(--cx-accent);
}

body.cx-layout #content-main button.cx-date__button:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 1px;
}

/* Read-only (curator plan): no button. */
body.cx-layout #content-main .cx-date:has(> input:disabled) .cx-date__button {
  display: none;
}

body.cx-layout #content-main .cx-date > input:disabled {
  padding-right: 12px !important;
}

body.cx-layout #content-main .cx-date__error {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: 6px;
  color: var(--error-fg, #ba2121);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

body.cx-layout #content-main .cx-date__error svg {
  flex: none;
}

/* The popup (appended to <body>, so outside #content-main). */
body.cx-layout .cx-datepicker {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 320px;
  padding: 14px;
  border: 1px solid var(--custodia-card-border-color, var(--cx-line));
  border-radius: 12px;
  background: var(--custodia-card-bg, var(--body-bg));
  color: var(--body-fg);
  box-shadow: var(--cx-datepicker-shadow);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
}

body.cx-layout .cx-datepicker[hidden],
body.cx-layout .cx-datepicker-backdrop[hidden] {
  display: none;
}

/* :where keeps this below the part rules below (e.g. the serif title). */
body.cx-layout .cx-datepicker :where(button) {
  margin: 0;
  font-family: inherit;
  box-shadow: none;
  cursor: pointer;
}

body.cx-layout .cx-datepicker button:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 1px;
}

body.cx-layout .cx-datepicker__head {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.cx-layout .cx-datepicker__spacer {
  flex: 1;
}

body.cx-layout .cx-datepicker__title,
body.cx-layout .cx-datepicker__range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--body-fg);
  font-family: Fraunces, Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
}

body.cx-layout .cx-datepicker__title:hover {
  background: var(--cx-chip-bg);
}

body.cx-layout .cx-datepicker__nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--cx-chip-border);
  border-radius: 8px;
  background: var(--cx-chip-bg);
  color: var(--cx-chip-fg);
}

body.cx-layout .cx-datepicker__nav:hover {
  border-color: color-mix(in srgb, var(--cx-accent) 55%, transparent);
  background: color-mix(in srgb, var(--cx-accent) 8%, var(--cx-chip-bg));
}

body.cx-layout .cx-datepicker__grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.cx-layout .cx-datepicker__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

body.cx-layout .cx-datepicker__weekday {
  padding: 2px 0 4px;
  color: var(--cx-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}

body.cx-layout .cx-datepicker__weekday abbr {
  border: 0;
  text-decoration: none;
  cursor: default;
}

body.cx-layout .cx-datepicker__cell {
  display: flex;
  height: 40px;
}

body.cx-layout .cx-datepicker__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body.cx-layout .cx-datepicker__day,
body.cx-layout .cx-datepicker__option {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--body-fg);
  font-size: 0.875rem;
  font-weight: 400;
}

body.cx-layout .cx-datepicker__option {
  height: 44px;
}

body.cx-layout .cx-datepicker__day:hover,
body.cx-layout .cx-datepicker__option:hover {
  background: color-mix(in srgb, var(--cx-accent) 10%, transparent);
}

body.cx-layout .cx-datepicker :is(.cx-datepicker__day, .cx-datepicker__option)[aria-current="date"] {
  box-shadow: inset 0 0 0 1.5px var(--cx-accent);
  color: var(--cx-accent);
  font-weight: 600;
}

body.cx-layout .cx-datepicker :is(.cx-datepicker__day, .cx-datepicker__option).is-selected {
  background: var(--cx-accent);
  box-shadow: none;
  color: var(--cx-on-accent);
  font-weight: 600;
}

body.cx-layout .cx-datepicker :is(.cx-datepicker__day, .cx-datepicker__option).is-selected:focus-visible {
  outline-offset: 2px;
}

body.cx-layout .cx-datepicker__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--cx-line);
}

body.cx-layout .cx-datepicker__chip {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--cx-input-border);
  border-radius: 999px;
  background: var(--cx-chip-bg);
  color: var(--cx-chip-fg);
  font-size: 0.8125rem;
  font-weight: 500;
}

body.cx-layout .cx-datepicker__chip:hover {
  border-color: color-mix(in srgb, var(--cx-accent) 55%, transparent);
  background: color-mix(in srgb, var(--cx-accent) 8%, var(--cx-chip-bg));
}

body.cx-layout .cx-datepicker button.cx-datepicker__clear {
  height: 32px;
  margin-left: auto;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

body.cx-layout .cx-datepicker button.cx-datepicker__clear:hover {
  background: var(--cx-chip-bg);
  color: var(--body-fg);
}

/* Screen-reader announcement of the month shown. */
body.cx-layout .cx-datepicker__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sheet header only shows on phones. */
body.cx-layout .cx-datepicker__sheet-head {
  display: none;
}

/* Phones: a bottom sheet with 44px targets. */
/* Phone sheets sit above the sticky top bar (z-index up to 1060) and below modals
   and toasts (1070+). While one is open, cx_datepicker.js and admin_cx_select.js block
   wheel / touch scrolling outside the sheet's scrolling part. */
body.cx-layout :is(.cx-datepicker-backdrop, .cx-select-backdrop) {
  touch-action: none;
}

body.cx-layout .cx-datepicker.is-sheet {
  overscroll-behavior: contain;
}

body.cx-layout .cx-datepicker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1066;
  background: rgba(31, 28, 23, 0.45);
}

body.cx-layout .cx-datepicker.is-sheet {
  z-index: 1067;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  gap: 12px;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  border-width: 1px 0 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 32px rgba(31, 28, 23, 0.2);
  transition: transform 0.18s ease;
}

/* cx_datepicker.js: drag the header down to close. */
body.cx-layout .cx-datepicker.is-sheet.is-dragging {
  transition: none;
}

body.cx-layout .cx-datepicker.is-sheet .cx-datepicker__sheet-head {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

body.cx-layout .cx-datepicker.is-sheet.is-dragging .cx-datepicker__sheet-head {
  cursor: grabbing;
}

body.cx-layout .cx-datepicker.is-sheet .cx-datepicker__sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

body.cx-layout .cx-datepicker__handle {
  grid-column: 1 / -1;
  justify-self: center;
  width: 40px;
  height: 4px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--cx-input-border);
}

body.cx-layout .cx-datepicker__sheet-title {
  margin: 0;
  color: var(--body-fg);
  font-family: Fraunces, Georgia, serif;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
}

body.cx-layout .cx-datepicker__sheet-sub {
  margin: 2px 0 0;
  color: var(--cx-muted);
  font-size: 0.84375rem;
}

body.cx-layout .cx-datepicker__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cx-chip-bg);
  color: var(--cx-chip-fg);
}

body.cx-layout .cx-datepicker.is-sheet :is(.cx-datepicker__title, .cx-datepicker__range) {
  height: 44px;
  font-size: 1.0625rem;
}

body.cx-layout .cx-datepicker.is-sheet .cx-datepicker__nav {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

body.cx-layout .cx-datepicker.is-sheet .cx-datepicker__cell {
  height: 44px;
}

body.cx-layout .cx-datepicker.is-sheet :is(.cx-datepicker__day, .cx-datepicker__option) {
  border-radius: 10px;
  font-size: 0.9375rem;
}

body.cx-layout .cx-datepicker.is-sheet :is(.cx-datepicker__chip, .cx-datepicker__clear) {
  height: 44px;
  padding: 0 16px;
  font-size: 0.875rem;
}

/* ===========================================
   CX-SELECT (dropdowns stage 2)
   core/js/admin_cx_select.js over <select data-cx-select> (core/admin_cx_select.py):
   a button showing the chosen option (tile icon, avatar or dot), a list on <body> with
   search, groups, counts and descriptions, and the related-field Add / Edit actions in
   its footer. The native select stays in the form, visually hidden.
   =========================================== */
body.cx-layout {
  --cx-dot-neutral: #a39783;
  --cx-dot-success: #3f8a3a;
  --cx-dot-good: #8aa64e;
  --cx-dot-warning: #c9951f;
  --cx-dot-poor: #d0692c;
  --cx-dot-danger: #b8402f;
  --cx-dot-info: #3d7cc0;
}

body.cx-layout #content-main select.cx-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

/* The related-object links live in the list's footer once enhanced. */
body.cx-layout #content-main .related-widget-wrapper:has(> .cx-select) {
  position: relative;
}

body.cx-layout #content-main .related-widget-wrapper:has(> .cx-select) > a.related-widget-wrapper-link {
  display: none !important;
}

body.cx-layout #content-main .cx-select {
  position: relative;
  flex: 1 1 12rem;
  min-width: 0;
}

body.cx-layout #content-main :is(.cx-inline, .cx-subsection) td .cx-select {
  width: 100%;
}

body.cx-layout #content-main .cx-select__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0 36px 0 12px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
  box-shadow: none;
  color: var(--cx-input-fg);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

body.cx-layout #content-main .cx-select.has-value .cx-select__trigger:has(.cx-select__tile) {
  padding-left: 7px;
}

body.cx-layout #content-main .cx-select.has-value:has(.cx-select__clear:not([hidden])) .cx-select__trigger {
  padding-right: 62px;
}

body.cx-layout #content-main .cx-select__trigger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cx-accent) 45%, var(--cx-input-border));
}

body.cx-layout #content-main .cx-select__trigger:focus-visible,
body.cx-layout #content-main .cx-select.is-open .cx-select__trigger {
  border-color: var(--cx-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 18%, transparent);
}

body.cx-layout #content-main .cx-select__trigger:disabled {
  border-color: var(--cx-chip-border);
  background: var(--cx-disabled-bg);
  color: var(--cx-chip-fg);
  cursor: not-allowed;
}

body.cx-layout #content-main .cx-field--error .cx-select__trigger {
  border-width: 1.5px;
  border-color: var(--cx-error-border);
  background-color: var(--cx-error-bg);
}

body.cx-layout #content-main .cx-select__value {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.cx-layout #content-main .cx-select__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-layout #content-main .cx-select__text--placeholder {
  color: var(--cx-muted);
}

body.cx-layout #content-main svg.cx-select__chevron {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--cx-muted);
  pointer-events: none;
}

body.cx-layout #content-main .cx-select.is-disabled svg.cx-select__chevron {
  display: none;
}

body.cx-layout #content-main .cx-select__clear {
  position: absolute;
  top: 50%;
  right: 32px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -13px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--cx-muted);
  cursor: pointer;
}

body.cx-layout #content-main .cx-select__clear[hidden] {
  display: none;
}

body.cx-layout #content-main .cx-select__clear:hover {
  background: var(--cx-chip-bg);
  color: var(--cx-label-color);
}

body.cx-layout #content-main .cx-select__clear:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 1px;
}

body.cx-layout #content-main .cx-select__clear svg {
  width: 15px;
  height: 15px;
}

/* Leading marks, shared by the button and the list. */
body.cx-layout .cx-select__tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--cx-thumb-bg);
  color: var(--cx-accent);
}

body.cx-layout .cx-select__tile--person {
  border-radius: 999px;
}

body.cx-layout .cx-select__tile .material-symbols-outlined {
  font-size: 17px;
}

/* Archive item thumbnails (data-image). */
body.cx-layout .cx-select__tile--image {
  overflow: hidden;
}

body.cx-layout img.cx-select__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Clients (the user page's Client): a letter on the client's colour, or the logo on white
   (moss when it's too light for white), as in the Clients list. */
body.cx-layout .cx-select__tile--initial {
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

body.cx-layout .cx-select__tile:is(.cx-select__tile--logo, .cx-select__tile--logo-dark) {
  box-sizing: border-box;
  border: 1px solid var(--cx-line);
  background: #fff;
}

body.cx-layout .cx-select__tile--logo-dark {
  border-color: #2a3d2a;
  background: #2a3d2a;
}

body.cx-layout .cx-select__tile:is(.cx-select__tile--logo, .cx-select__tile--logo-dark) img.cx-select__thumb {
  box-sizing: border-box;
  padding: 2px;
  object-fit: contain;
}

body.cx-layout .cx-select__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cx-dot-neutral);
}

body.cx-layout .cx-select__dot--success { background: var(--cx-dot-success); }
body.cx-layout .cx-select__dot--good { background: var(--cx-dot-good); }
body.cx-layout .cx-select__dot--warning { background: var(--cx-dot-warning); }
body.cx-layout .cx-select__dot--poor { background: var(--cx-dot-poor); }
body.cx-layout .cx-select__dot--danger { background: var(--cx-dot-danger); }
body.cx-layout .cx-select__dot--info { background: var(--cx-dot-info); }

/* The list (appended to <body>, so outside #content-main). */
body.cx-layout .cx-select-popup {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--custodia-card-border-color, var(--cx-line));
  border-radius: 12px;
  background: var(--custodia-card-bg, var(--body-bg));
  color: var(--body-fg);
  box-shadow: var(--cx-datepicker-shadow, 0 12px 32px rgba(31, 28, 23, 0.16));
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
}

body.cx-layout .cx-select-popup[hidden] {
  display: none;
}

body.cx-layout .cx-select-popup__search {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin: 8px 8px 2px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--darkened-bg, #f8f4ec);
  color: var(--cx-muted);
}

body.cx-layout .cx-select-popup__search .material-symbols-outlined {
  font-size: 18px;
}

body.cx-layout .cx-select-popup__search input {
  flex: 1;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--body-fg);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
}

/* admin-custom.css rings every focused text input (!important); the pill shows focus instead. */
body.cx-layout .cx-select-popup__search input:focus {
  box-shadow: none !important;
  outline: none !important;
}

body.cx-layout .cx-select-popup__search:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cx-accent) 45%, transparent);
}

body.cx-layout .cx-select-popup__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  outline: none;
}

body.cx-layout .cx-select-popup__group {
  margin: 0;
  padding: 8px 10px 4px;
  color: var(--cx-muted);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  list-style: none;
}

body.cx-layout .cx-select-popup__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  box-sizing: border-box;
  margin: 0;
  padding: 5px 10px;
  border-radius: 7px;
  color: var(--body-fg);
  list-style: none;
  cursor: pointer;
}

body.cx-layout .cx-select-popup__option:has(.cx-select-popup__desc) {
  align-items: flex-start;
  padding-top: 7px;
  padding-bottom: 7px;
}

body.cx-layout .cx-select-popup__option:has(.cx-select-popup__desc) .cx-select__dot {
  margin-top: 5px;
}

body.cx-layout .cx-select-popup__option.is-active {
  background: var(--darkened-bg, #f6f1e7);
}

body.cx-layout .cx-select-popup__option[aria-selected="true"] {
  background: color-mix(in srgb, var(--cx-accent) 10%, transparent);
  font-weight: 500;
}

body.cx-layout .cx-select-popup__option[aria-selected="true"].is-active {
  background: color-mix(in srgb, var(--cx-accent) 16%, transparent);
}

body.cx-layout .cx-select-popup__option[aria-disabled="true"] {
  color: var(--cx-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

body.cx-layout .cx-select-popup__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

body.cx-layout .cx-select-popup__name {
  overflow-wrap: anywhere;
}

body.cx-layout .cx-select-popup__desc {
  color: var(--cx-muted);
  font-size: 0.78125rem;
  font-weight: 400;
  line-height: 1.4;
}

body.cx-layout .cx-select-popup__count {
  flex: none;
  color: var(--cx-muted);
  font-size: 0.78125rem;
  font-weight: 400;
}

body.cx-layout svg.cx-select-popup__tick {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--cx-accent);
  visibility: hidden;
}

body.cx-layout .cx-select-popup__option[aria-selected="true"] svg.cx-select-popup__tick {
  visibility: visible;
}

body.cx-layout .cx-select-popup__empty {
  padding: 10px;
  color: var(--cx-muted);
  list-style: none;
}

body.cx-layout .cx-select-popup__footer {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  border-top: 1px solid var(--cx-line);
}

body.cx-layout .cx-select-popup__footer[hidden] {
  display: none;
}

body.cx-layout .cx-select-popup__action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--body-fg);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

body.cx-layout .cx-select-popup__action.is-primary {
  color: var(--cx-accent);
  font-weight: 500;
}

body.cx-layout .cx-select-popup__action:hover,
body.cx-layout .cx-select-popup__action:focus-visible {
  background: var(--darkened-bg, #f6f1e7);
  outline: none;
}

body.cx-layout .cx-select-popup__action .material-symbols-outlined {
  font-size: 18px;
}

/* ---- cx-select: phone bottom sheet (dropdowns stage 4) ----
   admin_cx_select.js adds .is-sheet up to 600px (the date picker's breakpoint) and
   shows .cx-select-backdrop behind it. */
body.cx-layout .cx-select-popup__head {
  display: none;
}

body.cx-layout .cx-select-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1066;
  background: rgba(31, 28, 23, 0.45);
}

body.cx-layout .cx-select-backdrop[hidden] {
  display: none;
}

body.cx-layout .cx-select-popup.is-sheet {
  z-index: 1067;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-height: 75dvh;
  transition: transform 0.18s ease, height 0.2s ease, max-height 0.2s ease;
  border-width: 1px 0 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 32px rgba(31, 28, 23, 0.2);
  font-size: 0.9375rem;
}

/* Dragged up to full height (admin_cx_select.js dragSheet); no transition mid-drag. */
body.cx-layout .cx-select-popup.is-sheet.is-expanded {
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
}

body.cx-layout .cx-select-popup.is-sheet.is-dragging {
  transition: none;
}

body.cx-layout .cx-select-popup.is-sheet .cx-select-popup__head {
  cursor: grab;
  user-select: none;
}

body.cx-layout .cx-select-popup.is-sheet.is-dragging .cx-select-popup__head {
  cursor: grabbing;
}

body.cx-layout .cx-select-popup.is-sheet .cx-select-popup__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 8px 12px 4px 20px;
}

body.cx-layout .cx-select-popup__handle {
  grid-column: 1 / -1;
  justify-self: center;
  width: 40px;
  height: 4px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--cx-input-border);
}

body.cx-layout .cx-select-popup__title {
  margin: 0;
  overflow: hidden;
  color: var(--body-fg);
  font-family: Fraunces, Georgia, serif;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-layout .cx-select-popup__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cx-chip-bg);
  box-shadow: none;
  color: var(--cx-chip-fg);
  cursor: pointer;
}

body.cx-layout .cx-select-popup__close svg {
  width: 20px;
  height: 20px;
}

body.cx-layout .cx-select-popup__close:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout .cx-select-popup.is-sheet .cx-select-popup__search {
  margin: 6px 12px 4px;
}

/* 16px stops iOS zooming into the search box. */
body.cx-layout .cx-select-popup.is-sheet .cx-select-popup__search input {
  height: 44px;
  font-size: 1rem;
}

body.cx-layout .cx-select-popup.is-sheet .cx-select-popup__list {
  padding: 4px 8px;
  overscroll-behavior: contain;
}

/* Swipes on the sheet's fixed parts don't pan the page behind it. */
body.cx-layout .cx-select-popup.is-sheet :is(.cx-select-popup__head, .cx-select-popup__search, .cx-select-popup__footer) {
  touch-action: none;
}

body.cx-layout .cx-select-popup.is-sheet .cx-select-popup__option {
  min-height: 48px;
  padding: 6px 12px;
  border-radius: 10px;
}

body.cx-layout .cx-select-popup.is-sheet .cx-select-popup__desc {
  font-size: 0.8125rem;
}

body.cx-layout .cx-select-popup.is-sheet .cx-select__tile {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

body.cx-layout .cx-select-popup.is-sheet .cx-select__tile--person {
  border-radius: 999px;
}

body.cx-layout .cx-select-popup.is-sheet .cx-select__tile .material-symbols-outlined {
  font-size: 19px;
}

body.cx-layout .cx-select-popup.is-sheet .cx-select-popup__footer {
  padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px));
}

body.cx-layout .cx-select-popup.is-sheet:has(> .cx-select-popup__footer[hidden]) .cx-select-popup__list {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

body.cx-layout .cx-select-popup.is-sheet .cx-select-popup__action {
  min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 0.9375rem;
}

/* ===========================================
   ORGANISATION SETTINGS PAGE (cx-layout)
   templates/admin/core/system/organisationsettings_change_form.html: logo header tile,
   plan pills, Organisation / Logo / Contact cards, and the rail's header previews. The
   logo file row and drop zone share the Document page's .cx-doc-file / .cx-doc-drop rules.
   The Archive portal settings page (.model-appearancesettings) shares the plan tag and
   the portal preview; its own rules are under ARCHIVE PORTAL SETTINGS PAGE.
   =========================================== */
body.cx-layout {
  --cx-plan-conservator-bg: #f5eddb;
  --cx-plan-conservator-line: #d4a94a;
  --cx-plan-conservator-fg: #7b6b45;
  --cx-plan-curator-bg: #eef1e8;
  --cx-plan-curator-line: #d5ddc9;
  --cx-plan-curator-fg: #2a3d2a;
}

html[data-theme="dark"] body.cx-layout {
  --cx-plan-conservator-bg: rgba(212, 169, 74, 0.16);
  --cx-plan-conservator-line: rgba(212, 169, 74, 0.55);
  --cx-plan-conservator-fg: #e6c98a;
  --cx-plan-curator-bg: rgba(168, 190, 150, 0.14);
  --cx-plan-curator-line: rgba(168, 190, 150, 0.4);
  --cx-plan-curator-fg: #c5d6b5;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout {
    --cx-plan-conservator-bg: rgba(212, 169, 74, 0.16);
    --cx-plan-conservator-line: rgba(212, 169, 74, 0.55);
    --cx-plan-conservator-fg: #e6c98a;
    --cx-plan-curator-bg: rgba(168, 190, 150, 0.14);
    --cx-plan-curator-line: rgba(168, 190, 150, 0.4);
    --cx-plan-curator-fg: #c5d6b5;
  }
}

/* Header: the logo sits whole on white, not cropped like a photo. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content .cx-header__thumb.cx-org-thumb {
  background: #fff;
  color: var(--cx-accent);
}

/* A see-through logo too light for white (OrganisationSettings.logo_too_light_for_white)
   sits on the admin header's moss instead, here and on the Logo card's thumbnail. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content .cx-header__thumb.cx-org-thumb.is-dark,
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-logo-tile.is-dark {
  border-color: #2a3d2a;
  background: #2a3d2a;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content .cx-org-thumb img {
  box-sizing: border-box;
  padding: 6px;
  object-fit: contain;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content .cx-org-thumb .material-symbols-outlined {
  font-size: 30px;
}

/* Plan pills (header meta and Details), and the small Conservator plan tag that links to
   the upgrade page (Curator clients). */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings, .model-client) #content .cx-plan-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--cx-plan-curator-line);
  border-radius: 999px;
  background: var(--cx-plan-curator-bg);
  color: var(--cx-plan-curator-fg);
  font-size: 0.78125rem;
  font-weight: 600;
  white-space: nowrap;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings, .model-client) #content .cx-plan-pill--conservator {
  border-color: var(--cx-plan-conservator-line);
  background: var(--cx-plan-conservator-bg);
  color: var(--cx-plan-conservator-fg);
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings, .model-automationsettings) #content .cx-plan-tag,
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings, .model-automationsettings) #content a.cx-plan-tag:visited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border: 1px solid var(--cx-plan-conservator-line);
  border-radius: 999px;
  background: var(--cx-plan-conservator-bg);
  color: var(--cx-plan-conservator-fg);
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings, .model-automationsettings) #content a.cx-plan-tag:hover {
  background: color-mix(in srgb, var(--cx-plan-conservator-line) 22%, var(--cx-plan-conservator-bg));
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings, .model-automationsettings) #content a.cx-plan-tag svg {
  width: 11px;
  height: 11px;
}

/* A Conservator-feature preview field for Curator-plan users (cx_fieldset_fields.html,
   e.g. the Archive item's Show in portal): the sidebar's Preview pill by the label. */
body.cx-layout #content-main .cx-field__label-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.cx-layout #content-main .cx-field__label-row > label {
  margin: 0;
  color: var(--cx-label-color);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

body.cx-layout #content .cx-preview-tag {
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--custodia-gold) 45%, #bbb 55%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--custodia-gold) 15%, var(--body-bg));
  color: color-mix(in srgb, var(--custodia-gold) 62%, #777 38%);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* In a card title (Curator previews): the dashboard's card-title pill. */
body.cx-layout #content .cx-card__title .cx-preview-tag {
  padding: 0 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
}

html[data-theme="dark"] body.cx-layout #content .cx-preview-tag {
  border-color: color-mix(in srgb, var(--custodia-gold) 50%, #555 50%);
  color: color-mix(in srgb, var(--custodia-gold) 75%, #aaa 25%);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout #content .cx-preview-tag {
    border-color: color-mix(in srgb, var(--custodia-gold) 50%, #555 50%);
    color: color-mix(in srgb, var(--custodia-gold) 75%, #aaa 25%);
  }
}

/* Confirm pages: Remove sample data (sample_data_remove.html) and single-record delete
   (admin/delete_confirmation.html). What goes, then one red button. */
body.cx-layout.cx-confirm-page #content h1.cx-header__title {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 700;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px 24px;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-group__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cx-label-color, var(--body-fg));
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-group__list {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--body-fg);
  font-size: 0.875rem;
  line-height: 1.6;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-group__list li {
  list-style: disc;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 14px;
  padding: 0;
  color: var(--cx-label-color, var(--body-fg));
  font-size: 0.8125rem;
  font-weight: 600;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-summary li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  list-style: none;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-tree,
body.cx-layout.cx-confirm-page #content-main .cx-confirm-tree ul {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--body-fg);
  font-size: 0.875rem;
  line-height: 1.6;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-tree li {
  padding: 0;
  list-style: disc;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-tree ul li {
  list-style: circle;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-blocked {
  margin: 0 0 var(--cx-gap);
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--cx-delete-fg) 35%, transparent);
  border-left: 3px solid var(--cx-delete-fg);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cx-delete-fg) 6%, var(--body-bg));
  font-size: 0.875rem;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-blocked p,
body.cx-layout.cx-confirm-page #content-main .cx-confirm-blocked ul {
  margin: 0;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-blocked ul {
  margin-top: 6px;
  padding-left: 18px;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-actions__submit {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--cx-delete-fg);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

body.cx-layout.cx-confirm-page #content-main .cx-confirm-actions__submit:hover,
body.cx-layout.cx-confirm-page #content-main .cx-confirm-actions__submit:focus-visible {
  background: color-mix(in srgb, var(--cx-delete-fg) 85%, black 15%);
}

html[data-theme="dark"] body.cx-layout.cx-confirm-page #content-main .cx-confirm-actions__submit {
  color: #2a1414;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout.cx-confirm-page #content-main .cx-confirm-actions__submit {
    color: #2a1414;
  }
}

body.cx-layout.cx-confirm-page #content-main a.cx-confirm-actions__cancel {
  color: var(--cx-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

body.cx-layout.cx-confirm-page #content-main a.cx-confirm-actions__cancel:hover {
  text-decoration: underline;
}

/* Curator plan: the preview strip under the header of project and task pages
   (includes/cx_curator_preview_strip.html). */
body.cx-layout #content .cx-preview-strip {
  --cx-strip-bg: #fbf3e2;
  --cx-strip-line: #ead9b4;
  --cx-strip-icon: #9a7d3f;
  --cx-strip-link: #8a6d2b;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--cx-gap);
  padding: 10px 16px;
  border: 1px solid var(--cx-strip-line);
  border-left: 3px solid var(--custodia-gold, #d4a94a);
  border-radius: 8px;
  background: var(--cx-strip-bg);
  color: var(--body-fg, #333);
  font-size: 0.8125rem;
  line-height: 1.45;
}

html[data-theme="dark"] body.cx-layout #content .cx-preview-strip {
  --cx-strip-bg: rgba(212, 169, 74, 0.08);
  --cx-strip-line: rgba(212, 169, 74, 0.24);
  --cx-strip-icon: #d4a94a;
  --cx-strip-link: #e6c98a;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout #content .cx-preview-strip {
    --cx-strip-bg: rgba(212, 169, 74, 0.08);
    --cx-strip-line: rgba(212, 169, 74, 0.24);
    --cx-strip-icon: #d4a94a;
    --cx-strip-link: #e6c98a;
  }
}

body.cx-layout #content .cx-preview-strip svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--cx-strip-icon);
}

body.cx-layout #content .cx-preview-strip > span {
  flex: 1 1 auto;
}

body.cx-layout #content .cx-preview-strip a,
body.cx-layout #content .cx-preview-strip a:visited {
  flex: none;
  color: var(--cx-strip-link);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

body.cx-layout #content .cx-preview-strip a:hover {
  text-decoration: underline;
}

/* Cards: Organisation stacks its fields; Contact uses a two-column grid. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-card-head .cx-card__description {
  margin: 0;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-name__label {
  color: var(--cx-label-color);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-name__value {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px dashed var(--cx-input-border);
  border-radius: 8px;
  background: var(--darkened-bg, #f8f4ec);
  color: var(--cx-label-color);
  font-size: 0.875rem;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-name__value svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--cx-muted);
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-grid__wide,
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-grid__rule {
  grid-column: 1 / -1;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-grid__rule {
  height: 1px;
  background: var(--cx-line);
}

@media (max-width: 767px) {
  body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-grid > div:empty {
    display: none;
  }
}

/* Logo card: the current file row, the "will be removed" note, the drop zone. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-logo-card {
  gap: 16px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-logo-tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 5px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: #fff;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-logo-tile img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main button.cx-org-logo-remove {
  color: var(--error-fg, #9b1c14);
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main button.cx-org-logo-remove:hover {
  background: color-mix(in srgb, var(--error-fg, #9b1c14) 8%, transparent);
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-logo-removed {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--cx-input-border);
  border-radius: 10px;
  color: var(--cx-muted);
  font-size: 0.84375rem;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-logo-removed[hidden] {
  display: none;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-logo-removed__undo {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cx-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* Rail: the admin header (Custodia moss) and the portal header (its chosen colours). */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview__label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 -6px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview__label-row .cx-category-preview__label {
  margin: 0;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  background: #2a3d2a;
  color: #f6f1e7;
}

/* The logo as the live header draws it (.org-logo--own / --tile in base_site.html): as wide
   as its shape needs up to 2.5 times the height, or fitted in a square white tile. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview__logo {
  display: flex;
  flex: none;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  max-width: 65px;
  overflow: hidden;
  border-radius: 6px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview__logo:is(.is-tile, .is-tile-dark) {
  justify-content: center;
  padding: 2px;
  background: #f6f1e7;
}

/* As the admin header: a thin, soft white ring, 2px off a backed or solid logo. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--admin .cx-org-preview__logo.is-own:is(.is-tile, .is-tile-dark, .is-solid) {
  box-shadow: 0 0 0 2px #2a3d2a, 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* As .org-logo--tile-dark. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--admin .cx-org-preview__logo.is-tile-dark {
  background: #1c1917;
}

/* Square tile, unless the logo is wider than 1.5:1 (.is-wide, as .org-logo--wide). */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--admin .cx-org-preview__logo:is(.is-tile, .is-tile-dark):not(.is-wide) {
  width: 26px;
}

/* As .org-logo--wide: up to 4.5 times the height; unbacked, hugging the logo. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--admin .cx-org-preview__logo.is-own.is-wide {
  max-width: 117px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--admin .cx-org-preview__logo.is-own.is-wide:not(.is-tile, .is-tile-dark) {
  height: auto;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--admin .cx-org-preview__logo.is-own.is-wide:not(.is-tile, .is-tile-dark) img {
  height: auto;
  max-height: 26px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--admin .cx-org-preview__logo:is(.is-tile, .is-tile-dark).is-wide {
  max-width: calc(117px + 10px);
  padding-inline: 5px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview__logo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview__logo:not(.is-own) img {
  width: 26px;
}

/* The portal header (.header-logo, base.css): the logo on the tinted header, about 2.4 times
   the name's size, as on the portal (72px beside a 30px name). */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal {
  --portal-logo-size: 36px;
  height: 52px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo {
  justify-content: center;
  width: var(--portal-logo-size);
  height: var(--portal-logo-size);
  max-width: none;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__name {
  font-weight: 500;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo img {
  width: 100%;
  height: 100%;
}

/* As .header-logo--fallback: the Custodia mark in the link colour while no logo is chosen. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo {
  position: relative;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo:not(.is-own) img {
  opacity: 0;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo:not(.is-own)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--org-portal-mark, #2a3d2a);
  -webkit-mask: var(--fallback-logo) center / contain no-repeat;
  mask: var(--fallback-logo) center / contain no-repeat;
}

/* As .header-logo--solid: an opaque logo or solid badge takes its own width, with softened
   corners (4px on the portal, at about half the size here) and a faint outline. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo.is-own.is-solid {
  width: auto;
  max-width: calc(var(--portal-logo-size) * 3.5);
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--portal-page-ink, #1c1917) 10%, transparent);
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo.is-own.is-solid img {
  width: auto;
}

/* As .header-logo--dark: a dark rounded tile for a logo too pale for the near-white tinted
   header (portal_logo_backing). */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo:is(.is-tile, .is-tile-dark) {
  padding: calc(var(--portal-logo-size) * 0.12);
  border-radius: calc(var(--portal-logo-size) * 0.18);
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo.is-tile-dark {
  background: #1c1917;
}

/* As .header-logo--wide: a wide logo takes its own width, at the lower height that makes it
   cover the square box's area (--logo-scale). */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo.is-own.is-wide {
  width: auto;
  height: calc(var(--portal-logo-size) * var(--logo-scale, 1));
  max-width: calc(var(--portal-logo-size) * 3.5);
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal .cx-org-preview__logo.is-own.is-wide img {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview__name {
  min-width: 0;
  overflow: hidden;
  font-family: Fraunces, Georgia, serif;
  font-size: 0.90625rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-portal {
  overflow: hidden;
  padding: 6px 6px 0;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--org-portal-bg, #f3eee6);
}

/* As .site-top (base.css): the header in a soft tint of the brand colour (12% over the page tone),
   fading in from the page tone at the top and full at its foot. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal {
  border-radius: 8px;
  background: linear-gradient(
    var(--org-portal-bg, #f3eee6),
    color-mix(in srgb, var(--org-portal-panel, #2a3d2a) 12%, var(--org-portal-bg, #f3eee6))
  );
  box-shadow: none;
  color: var(--portal-page-ink, #1c1917);
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-portal__link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  color: #5c554b;
  font-size: 0.78125rem;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-portal__link .material-symbols-outlined {
  font-size: 16px;
}

/* Details: plan pill beside Manage plan. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-dl {
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-dl__plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-dl__plan a {
  white-space: nowrap;
}

/* The portal address reads as a value (body text, quiet underline, external icon), so it
   doesn't look like the Manage plan action above it. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main a.cx-org-dl__url,
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main a.cx-org-dl__url:visited {
  color: var(--body-fg, #333);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--cx-line);
  text-underline-offset: 2px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main a.cx-org-dl__url:hover {
  text-decoration-color: currentColor;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-dl__url .material-symbols-outlined {
  margin-left: 3px;
  color: var(--cx-muted);
  font-size: 14px;
  vertical-align: -2px;
}

/* The organisation's own logo in the moss admin header: as wide as its shape needs (up to
   2.5 times the height) rather than squeezed into a square, and, when it is see-through
   (OrganisationSettings.logo_transparent) and dark, on a square white tile with the logo
   fitted inside so dark marks stay visible.
   Opaque logos fill the box edge to edge. The default Custodia mark keeps neither. */
body:not(.login) #site-branding .org-logo.org-logo--own {
  width: auto;
  max-width: calc(var(--cu-brand-logo-box) * 2.5);
}

/* No logo of its own: the grey Custodia fallback mark turns a soft off-white (white at 86%,
   so a touch of moss shows through) to stand out on moss without glaring (the portal
   paints it in its ink shade instead: .header-logo--fallback, base.css). */
body:not(.login) #site-branding .org-logo:not(.org-logo--own),
body.cx-layout.model-organisationsettings #content-main .cx-org-preview--admin .cx-org-preview__logo:not(.is-own) img {
  filter: brightness(0) invert(1) opacity(0.86);
}

/* A backed logo (white or dark tile) or an opaque logo or solid badge
   (OrganisationSettings.logo_is_solid), which can match the moss header at its edges: a thin
   white ring, set 2px off it by a band of the header's moss so it reads against a pale tile. */
body:not(.login) #site-branding .org-logo:is(.org-logo--tile, .org-logo--solid) {
  box-shadow: 0 0 0 2px #2a3d2a, 0 0 0 3px rgba(255, 255, 255, 0.55);
}

body:not(.login) #site-branding .org-logo.org-logo--tile {
  box-sizing: border-box;
  width: var(--cu-brand-logo-box);
  padding: 3px;
  background: #f6f1e7; /* off-white, as the header's text: softer than pure white on moss */
  object-fit: contain;
}

/* A mid-tone logo that white barely helps (OrganisationSettings.logo_needs_dark_backing)
   gets a dark tile instead. */
body:not(.login) #site-branding .org-logo.org-logo--tile.org-logo--tile-dark {
  background: #1c1917;
}

/* A logo wider than 1.5:1 (OrganisationSettings.logo_is_wide) may run to 4.5 times the
   height (3.5 on phones), so a banner stays readable instead of shrinking to a strip. */
body:not(.login) #site-branding .org-logo.org-logo--own.org-logo--wide {
  --cu-wide-logo-max: calc(var(--cu-brand-logo-box) * 4.5);
  max-width: var(--cu-wide-logo-max);
}

@media (max-width: 720px) {
  body:not(.login) #site-branding .org-logo.org-logo--own.org-logo--wide {
    --cu-wide-logo-max: calc(var(--cu-brand-logo-box) * 3.5);
  }
}

/* Unbacked, the box hugs the logo: one capped by its width is drawn lower rather than
   letterboxed, so the solid logo's ring and corners follow its edge, not an empty box. */
body:not(.login) #site-branding .org-logo.org-logo--own.org-logo--wide:not(.org-logo--tile) {
  height: auto;
  max-height: var(--cu-brand-logo-box);
}

/* A backed wide logo would shrink to a sliver in a square tile: the tile widens with it,
   with the side padding on top of the logo's cap (so it does not shrink the logo). */
body:not(.login) #site-branding .org-logo.org-logo--tile.org-logo--wide {
  width: auto;
  max-width: calc(var(--cu-wide-logo-max) + 14px);
  padding-inline: 7px;
}

/* ===========================================
   ARCHIVE PORTAL SETTINGS PAGE (cx-layout)
   templates/admin/core/appearancesettings_change_form.html: Address (the prefix between
   the scheme and the domain, Copy), Colours (swatches beside the colour inputs, contrast
   line), Home page welcome (intro count), and the rail's small portal home page. The plan
   tag and the portal header's logo come from ORGANISATION SETTINGS PAGE.
   =========================================== */
body.cx-layout.model-appearancesettings #content .cx-header__thumb.cx-portal-thumb {
  background: #fff;
  color: var(--cx-accent);
}

body.cx-layout.model-appearancesettings #content .cx-portal-thumb svg {
  width: 34px;
  height: 34px;
}

body.cx-layout.model-appearancesettings #content .cx-header__meta > a.cx-plan-tag {
  margin-right: 10px;
}

body.cx-layout.model-appearancesettings #content .cx-header__actions .cx-btn .material-symbols-outlined {
  font-size: 17px;
}

/* Live: the portal is open (a client whose portal is shut can't reach the admin). */
body.cx-layout.model-appearancesettings #content .cx-portal-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--cx-plan-curator-line);
  border-radius: 999px;
  background: var(--cx-plan-curator-bg);
  color: var(--cx-plan-curator-fg);
  font-size: 0.78125rem;
  font-weight: 600;
  white-space: nowrap;
}

body.cx-layout.model-appearancesettings #content .cx-portal-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2f7a4a;
}

/* Card heads: a title with an action (Reset to defaults) or a caption on the right, or
   stacked over a description. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-card-head--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-card-head .cx-card__title,
body.cx-layout.model-appearancesettings #content-main .cx-portal-card-head .cx-card__description {
  margin: 0;
}

body.cx-layout.model-appearancesettings #content-main button.cx-portal-reset {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cx-accent);
  font: inherit;
  font-size: 0.84375rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-preview__caption {
  color: var(--cx-muted);
  font-size: 0.78125rem;
}

/* Address: https:// [prefix] .custodiacms.org [copy], one bordered control. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-address {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  min-height: 2.5rem;
  overflow: hidden;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-address:focus-within {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 18%, transparent);
}

body.cx-layout.model-appearancesettings #content-main .cx-field--error .cx-portal-address {
  border-width: 1.5px;
  border-color: var(--cx-error-border);
  background: var(--cx-error-bg);
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-address__part {
  display: flex;
  flex: none;
  align-items: center;
  padding-left: 12px;
  color: var(--cx-muted);
  font-size: 0.875rem;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-address__suffix {
  padding: 0 12px;
  border-left: 1px solid var(--cx-line);
  background: var(--cx-chip-bg);
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-address input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--cx-input-fg);
  font-size: 0.875rem;
}

body.cx-layout.model-appearancesettings #content-main button.cx-portal-address__copy {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--cx-line);
  border-radius: 0;
  background: var(--cx-chip-bg);
  color: var(--cx-accent);
  cursor: pointer;
}

body.cx-layout.model-appearancesettings #content-main button.cx-portal-address__copy:hover {
  background: color-mix(in srgb, var(--cx-accent) 8%, var(--cx-chip-bg));
}

body.cx-layout.model-appearancesettings #content-main button.cx-portal-address__copy .material-symbols-outlined {
  font-size: 18px;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: var(--darkened-bg, #f8f4ec);
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-note .material-symbols-outlined {
  flex: none;
  color: var(--cx-accent);
  font-size: 18px;
}

/* Colours: round brand colour swatches, then the colour input itself (any colour) with its
   hex; named page tone chips. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-colour {
  gap: 10px;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-colour__label {
  color: var(--cx-label-color);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-colour__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Page tone chips never wrap unevenly: one row when all six fit, else three and three, else
   two by two (phone), equal widths when stacked. Sized by the field, since the preview rail
   beside the form narrows it at some window widths. */
body.cx-layout.model-appearancesettings #content-main .field-public_site_page_tone {
  container-type: inline-size;
}

body.cx-layout.model-appearancesettings #content-main .field-public_site_page_tone .cx-portal-colour__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.cx-layout.model-appearancesettings #content-main .field-public_site_page_tone .cx-portal-chip {
  width: 100%;
  min-width: 0;
}

@container (min-width: 420px) {
  body.cx-layout.model-appearancesettings #content-main .field-public_site_page_tone .cx-portal-colour__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (min-width: 650px) {
  body.cx-layout.model-appearancesettings #content-main .field-public_site_page_tone .cx-portal-colour__row {
    grid-template-columns: repeat(6, auto);
    justify-content: start;
  }
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-colour__rule {
  width: 1px;
  height: 28px;
  margin: 0 4px;
  background: var(--cx-line);
}

/* Brand colour swatches (constants.PORTAL_BRAND_PRESETS), each inside a ring of the soft tint
   the portal makes from it. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.cx-layout.model-appearancesettings #content-main button.cx-portal-swatch {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

body.cx-layout.model-appearancesettings #content-main button.cx-portal-swatch::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--swatch) 18%, #ffffff), inset 0 0 0 6px rgba(0, 0, 0, 0.08);
}

body.cx-layout.model-appearancesettings #content-main button.cx-portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  padding: 0 12px 0 8px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
  color: var(--cx-input-fg);
  font: inherit;
  font-size: 0.84375rem;
  cursor: pointer;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-chip__swatch {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(31, 28, 23, 0.18);
  border-radius: 6px;
  background: var(--swatch);
}

body.cx-layout.model-appearancesettings #content-main button.cx-portal-swatch[aria-checked="true"],
body.cx-layout.model-appearancesettings #content-main button.cx-portal-chip[aria-checked="true"] {
  border: 2px solid var(--cx-input-fg);
}

body.cx-layout.model-appearancesettings #content-main button.cx-portal-chip[aria-checked="true"] {
  padding-left: 7px;
  font-weight: 600;
}

body.cx-layout.model-appearancesettings #content-main :is(button.cx-portal-swatch, button.cx-portal-chip):focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout.model-appearancesettings #content-main :is(button.cx-portal-swatch, button.cx-portal-chip):disabled {
  cursor: not-allowed;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
  color: var(--cx-input-fg);
  font-size: 0.875rem;
  cursor: pointer;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-custom input[type="color"] {
  width: 28px;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-custom input[type="color"]:disabled {
  cursor: not-allowed;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-custom__hex {
  font-variant-numeric: tabular-nums;
}

/* Intro paragraph: help on the left, the count on the right. */
body.cx-layout.model-appearancesettings #content-main .cx-field > .help.cx-portal-count-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-count {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* Rail: a small portal home page (base.css): one top block in a soft tint of the accent over
   the background (.site-top) with the header, the nav, the welcome (white search box, category
   pills in a stronger tint) and the figures row at its foot; archive cards on the background,
   and the footer in the same tint, all edge to edge. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-home {
  padding: 0;
}

/* As the home page's .site-top: the tint fades in from the page tone at the top and is full by
   the figures row. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-home__top {
  --portal-top-line: color-mix(in srgb, var(--portal-page-ink, #1c1917), transparent 88%);
  background: linear-gradient(
    var(--org-portal-bg, #f3eee6),
    color-mix(in srgb, var(--org-portal-panel, #2a3d2a) 12%, var(--org-portal-bg, #f3eee6)) calc(100% - 26px)
  );
  color: var(--portal-page-ink, #1c1917);
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home .cx-org-preview--portal.cx-portal-home__header {
  height: 52px;
  padding: 0 12px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home .cx-org-preview--portal.cx-portal-home__header.is-tag-only:has(.cx-org-preview__logo.is-wide) {
  padding: 8px 12px;
}

/* As .header-org and .header-tagline: the name over the tagline. With no site name
   (site_name_in_logo; admin_organisation_settings.js while typing) the logo carries the name
   and the tagline stands alone. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .is-tag-only .cx-portal-home__names .cx-org-preview__name {
  display: none;
}

/* As .header-brand--stacked: on the portal a wide logo is the title, with the tagline tucked
   under it (the Archive portal preview keeps its nav markers on the logo's row); a compact
   logo keeps the tagline to its right. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal.is-tag-only:has(.cx-org-preview__logo.is-wide) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  row-gap: max(5px, calc(var(--portal-logo-size) * var(--logo-scale, 1) * 0.2));
  height: auto !important;
  padding-block: 8px;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal.is-tag-only:has(.cx-org-preview__logo.is-wide) .cx-org-preview__logo.is-own {
  height: auto;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal.is-tag-only:has(.cx-org-preview__logo.is-wide) .cx-org-preview__logo.is-own img {
  height: auto;
  max-height: calc(var(--portal-logo-size) * var(--logo-scale, 1));
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal.is-tag-only:has(.cx-org-preview__logo.is-wide) .cx-portal-home__names {
  grid-row: 2;
  grid-column: 1 / -1;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal.is-tag-only:has(.cx-org-preview__logo.is-wide) .cx-portal-home__nav {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
}

/* As .custodia-header-subtitle on the moss admin header. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--admin .cx-portal-home__tagline {
  color: rgba(240, 234, 216, 0.6);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* As .header-org and .header-tagline: the name over the tagline. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-portal-home__names {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-portal-home__names .cx-org-preview__name {
  line-height: 1.2;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-portal-home__tagline {
  overflow: hidden;
  color: color-mix(in srgb, var(--portal-page-ink, #1c1917), transparent 25%);
  font-size: 0.65625rem;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

/* As .header-titles--tag-only: the lone tagline as an uppercase label, after a hairline beside
   a compact logo. */
body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal.is-tag-only .cx-portal-home__tagline {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.cx-layout:is(.model-organisationsettings, .model-appearancesettings) #content-main .cx-org-preview--portal.is-tag-only:not(:has(.cx-org-preview__logo.is-wide)) .cx-portal-home__tagline {
  padding: 5px 0 5px 9px;
  border-left: 1px solid color-mix(in srgb, var(--portal-page-ink, #1c1917) 22%, transparent);
}

/* As .header-nav, in the header row to the right of the name: three link markers, as the
   figures row draws its figures; the current one in the page text, underlined. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-home__nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home__nav > span {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--portal-page-ink, #1c1917), transparent 70%);
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home__nav > .is-current {
  background: var(--portal-page-ink, #1c1917);
  box-shadow: 0 5px 0 -1px var(--portal-page-ink, #1c1917);
}

/* As .home-hero: left-aligned, in the page's text colour. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-home__welcome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 12px 0;
}

body.cx-layout.model-appearancesettings #content-main p.cx-portal-home__title {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body.cx-layout.model-appearancesettings #content-main p.cx-portal-home__intro {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--portal-page-ink, #1c1917), transparent 20%);
  font-size: 0.6875rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* As .home-search: white with a hairline and a soft shadow, the Search button in the accent. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-home__search {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 26px;
  margin-top: 4px;
  padding: 3px;
  border: 1px solid rgba(28, 25, 23, 0.14);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(28, 25, 23, 0.07);
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home__search > span:first-child {
  flex: 1;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home__search > span:last-child {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--org-portal-panel, #2a3d2a);
  color: var(--org-portal-panel-ink, #ffffff);
  font-size: 0.625rem;
  font-weight: 600;
}

/* As .home-category: pills in a stronger tint (22%) with an accent hairline. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-home__pills {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home__pills > span {
  width: 38px;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--org-portal-panel, #2a3d2a), transparent 78%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--org-portal-panel, #2a3d2a) 22%, var(--org-portal-bg, #f3eee6));
}

/* As .collection-metrics: four figures in a row at the foot of the block, under a hairline. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-home__figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 26px;
  margin: 14px 12px 0;
  border-top: 1px solid var(--portal-top-line);
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home__figures > span {
  margin: 6px 0;
  border-left: 1px solid var(--portal-top-line);
  background: linear-gradient(var(--portal-page-ink, #1c1917) 0 0) 6px 2px / 14px 4px no-repeat, linear-gradient(var(--portal-top-line) 0 0) 6px 9px / 22px 3px no-repeat;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home__figures > span:first-child {
  border-left: 0;
  background-position: 0 2px, 0 9px;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home__body {
  padding: 12px;
  color: var(--portal-page-ink, #1a1a1a);
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Two archive cards: a photo area over a white caption strip. */
body.cx-layout.model-appearancesettings #content-main .cx-portal-home__cards > span {
  height: 76px;
  border: 1px solid #e2ddd7;
  border-radius: 6px;
  background: linear-gradient(#e9e3d8 0 54px, #fff 54px);
}

body.cx-layout.model-appearancesettings #content-main p.cx-portal-home__footer {
  margin: 0;
  padding: 9px 12px;
  border-top: 1px solid color-mix(in srgb, var(--portal-page-ink, #1c1917), transparent 88%);
  background: color-mix(in srgb, var(--org-portal-panel, #2a3d2a) 12%, var(--org-portal-bg, #f3eee6));
  color: color-mix(in srgb, var(--portal-page-ink, #1c1917), transparent 22%);
  font-size: 0.6875rem;
}

body.cx-layout.model-appearancesettings #content-main .cx-portal-home__footer span {
  color: var(--portal-page-ink, #1c1917);
  font-weight: 500;
}

@media (max-width: 767px) {
  body.cx-layout.model-appearancesettings #content-main .cx-portal-colour__rule {
    display: none;
  }
}

/* ===========================================
   AUTOMATION SETTINGS PAGE (cx-layout)
   templates/admin/core/system/automationsettings_change_form.html: Condition reviews (quick
   interval choices beside the days box), Email notifications (switch rows in two groups),
   and the rail (items due for review, who gets the emails). The plan tag, eyebrow and
   rail note are shared above (ORGANISATION SETTINGS PAGE, .cx-category-note); the
   switches are the yes/no field switches (.cx-field__check).
   =========================================== */
body.cx-layout.model-automationsettings #content .cx-header__thumb.cx-auto-thumb {
  border-color: var(--cx-chip-border);
  background: var(--cx-thumb-bg);
  color: var(--cx-accent);
}

body.cx-layout.model-automationsettings #content .cx-auto-thumb svg {
  width: 32px;
  height: 32px;
}

body.cx-layout.model-automationsettings #content .cx-auto-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--cx-plan-curator-line);
  border-radius: 999px;
  background: var(--cx-plan-curator-bg);
  color: var(--cx-plan-curator-fg);
  font-size: 0.78125rem;
  font-weight: 600;
  white-space: nowrap;
}

body.cx-layout.model-automationsettings #content .cx-auto-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2f7a4a;
}

/* Card heads: the title (and the plan tag) over a description. */
body.cx-layout.model-automationsettings #content-main .cx-auto-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-card-head__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-card-head :is(.cx-card__title, .cx-card__description) {
  margin: 0;
}

/* Review interval: [6 months | 1 year | 2 years] or [365 | days]. */
body.cx-layout.model-automationsettings #content-main .cx-auto-interval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-presets {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cx-input-border);
  border-radius: 9px;
  background: var(--cx-chip-bg);
}

body.cx-layout.model-automationsettings #content-main button.cx-auto-preset {
  height: 32px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cx-label-color);
  font: inherit;
  font-size: 0.84375rem;
  font-weight: 600;
  cursor: pointer;
}

body.cx-layout.model-automationsettings #content-main button.cx-auto-preset:hover {
  background: color-mix(in srgb, var(--cx-accent) 8%, transparent);
}

body.cx-layout.model-automationsettings #content-main button.cx-auto-preset[aria-pressed="true"] {
  background: var(--cx-accent);
  color: #fff;
}

body.cx-layout.model-automationsettings #content-main button.cx-auto-preset:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-or {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-days {
  display: inline-flex;
  align-items: stretch;
  box-sizing: border-box;
  height: 2.5rem;
  overflow: hidden;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
}

body.cx-layout.model-automationsettings #content-main .cx-auto-days:focus-within {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 18%, transparent);
}

body.cx-layout.model-automationsettings #content-main .cx-field--error .cx-auto-days {
  border-width: 1.5px;
  border-color: var(--cx-error-border);
  background: var(--cx-error-bg);
}

body.cx-layout.model-automationsettings #content-main .cx-auto-days > input {
  width: 6.5em;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0 10px 0 12px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cx-input-fg);
  font-size: 0.875rem;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-days > input:focus {
  outline: none;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-days__unit {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-left: 1px solid var(--cx-line);
  background: var(--cx-chip-bg);
  color: var(--cx-muted);
  font-size: 0.84375rem;
}

/* Curator: the notifications are a read-only preview. */
body.cx-layout.model-automationsettings #content-main .cx-auto-locked {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cx-plan-conservator-line) 55%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--cx-plan-conservator-bg) 70%, transparent);
  color: var(--cx-plan-conservator-fg);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-locked svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-locked a {
  color: inherit;
  font-weight: 600;
}

/* Notification groups: a small heading over one bordered list of switch rows. */
body.cx-layout.model-automationsettings #content-main .cx-auto-group__title {
  margin: 0 0 8px;
  padding: 4px 0 0;
  background: none;
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.cx-layout.model-automationsettings #content-main ul.cx-auto-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--cx-input-bg);
  list-style: none;
}

body.cx-layout.model-automationsettings #content-main li.cx-auto-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 14px 16px;
  list-style: none;
}

body.cx-layout.model-automationsettings #content-main li.cx-auto-row + li.cx-auto-row {
  border-top: 1px solid var(--cx-line);
}

body.cx-layout.model-automationsettings #content-main .cx-auto-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-row__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-row__name label {
  margin: 0;
  padding: 0;
  color: var(--cx-label-color);
  font-size: 0.9rem;
  font-weight: 600;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-row.is-disabled .cx-auto-row__name label {
  cursor: default;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-row__help {
  color: var(--cx-muted);
  font-size: 0.78125rem;
  line-height: 1.4;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 999px;
  background: var(--cx-chip-bg);
  color: var(--cx-chip-fg);
  font-size: 0.71875rem;
  font-weight: 600;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-row .cx-field__check {
  flex: none;
  min-height: 0;
}

/* Rail: items due for review at this interval. */
body.cx-layout.model-automationsettings #content-main .cx-auto-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.cx-layout.model-automationsettings #content-main a.cx-auto-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--darkened-bg, #f8f4ec);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The cards open the matching Archive items. */
body.cx-layout.model-automationsettings #content-main a.cx-auto-stat:hover {
  border-color: var(--link-fg, #417690);
  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}

body.cx-layout.model-automationsettings #content-main a.cx-auto-stat:focus-visible {
  outline: 2px solid var(--link-fg, #417690);
  outline-offset: 2px;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-stat__value {
  color: var(--cx-label-color);
  font-family: Fraunces, Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-stat__label,
body.cx-layout.model-automationsettings #content-main :is(p.cx-auto-pending, p.cx-auto-empty) {
  margin: 0;
  color: var(--cx-muted);
  font-size: 0.78125rem;
  line-height: 1.4;
}

body.cx-layout.model-automationsettings #content-main a.cx-auto-link {
  align-self: flex-start;
  font-size: 0.84375rem;
  font-weight: 500;
}

/* Rail: who gets the emails. */
body.cx-layout.model-automationsettings #content-main ul.cx-auto-people {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-layout.model-automationsettings #content-main ul.cx-auto-people li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-layout.model-automationsettings #content-main .cx-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

body.cx-layout.model-automationsettings #content-main .cx-avatar--0 { background: #dfe8dc; color: #2a3d2a; }
body.cx-layout.model-automationsettings #content-main .cx-avatar--1 { background: #f1e3cf; color: #7a4a12; }
body.cx-layout.model-automationsettings #content-main .cx-avatar--2 { background: #e8e1f0; color: #4a3570; }
body.cx-layout.model-automationsettings #content-main .cx-avatar--3 { background: #dde9ee; color: #1f4a5a; }

body.cx-layout.model-automationsettings #content-main .cx-auto-people__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-people__name {
  color: var(--cx-label-color);
  font-size: 0.84375rem;
  font-weight: 600;
}

body.cx-layout.model-automationsettings #content-main .cx-auto-people__email {
  overflow: hidden;
  color: var(--cx-muted);
  font-size: 0.78125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  body.cx-layout.model-automationsettings #content-main .cx-auto-or {
    display: none;
  }
}

/* ===========================================
   CURATOR READ-ONLY PREVIEWS
   Restoration projects, tasks and the Archive portal / Automation settings are a
   read-only preview on the Curator plan: their disabled fields keep the plain arrow
   instead of the "not allowed" cursor, since nothing on the page is editable.
   =========================================== */
body.cx-layout.custodia-plan-curator:is(.model-restorationproject, .model-projecttask, .model-appearancesettings, .model-automationsettings) #content-main :is(input, select, textarea, button):disabled,
body.cx-layout.custodia-plan-curator:is(.model-restorationproject, .model-projecttask, .model-appearancesettings, .model-automationsettings) #content-main label:has(> input:disabled),
body.cx-layout.custodia-plan-curator.model-appearancesettings #content-main .cx-portal-custom input[type="color"]:disabled {
  cursor: default;
}

/* ===========================================
   ACCESS AREAS (global admin, Security › Access areas; body.cx-access)
   templates/admin/core/group_access_areas.html: read-only reference of what each
   area level grants. Reuses the list page head, toolbar and search (body.cx-list).
   =========================================== */
body.cx-access {
  --cx-access-pill-bg: #eef1e8;
  --cx-access-pill-fg: #2a3d2a;
  --cx-access-warn-bg: #f8ecd4;
  --cx-access-warn-fg: #6e4a10;
  --cx-access-faint: #a99d88;
  --cx-access-code: #8a7d68;
}

html[data-theme="dark"] body.cx-access {
  --cx-access-pill-bg: rgba(170, 196, 160, 0.16);
  --cx-access-pill-fg: #cfe0c6;
  --cx-access-warn-bg: rgba(224, 165, 38, 0.18);
  --cx-access-warn-fg: #f0c878;
  --cx-access-faint: rgba(240, 234, 216, 0.4);
  --cx-access-code: rgba(240, 234, 216, 0.55);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-access {
    --cx-access-pill-bg: rgba(170, 196, 160, 0.16);
    --cx-access-pill-fg: #cfe0c6;
    --cx-access-warn-bg: rgba(224, 165, 38, 0.18);
    --cx-access-warn-fg: #f0c878;
    --cx-access-faint: rgba(240, 234, 216, 0.4);
    --cx-access-code: rgba(240, 234, 216, 0.55);
  }
}

body.cx-access #content-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1180px;
}

body.cx-access #content-main .cx-list__head,
body.cx-access #content-main .cx-list__toolbar {
  margin-bottom: 0;
}

body.cx-access #content-main .cx-list__head {
  align-items: flex-start;
}

body.cx-access #content-main .cx-access__intro {
  display: flex;
  flex: 1 1 420px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

body.cx-access #content-main .cx-access__lede {
  max-width: 760px;
  margin: 0;
  padding: 0;
  color: var(--cx-label-color);
  font-size: 0.875rem;
  line-height: 1.5;
}

body.cx-access #content-main .cx-access__locked {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 999px;
  background: var(--cx-chip-bg);
  color: var(--cx-chip-fg);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

body.cx-access #content-main .cx-access__locked svg {
  width: 14px;
  height: 14px;
}

body.cx-access #content-main .cx-access__jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.cx-access #content-main .cx-access__jumps a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 999px;
  background: var(--cx-chip-bg);
  color: var(--cx-chip-fg);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

body.cx-access #content-main .cx-access__jumps a:hover,
body.cx-access #content-main .cx-access__jumps a:focus-visible {
  border-color: var(--cx-accent);
  color: var(--cx-accent);
}

body.cx-access #content-main .cx-access__card {
  overflow: hidden;
  scroll-margin-top: 80px;
  border: 1px solid var(--custodia-card-border-color, var(--cx-line));
  border-radius: 12px;
  background: var(--custodia-card-bg, var(--body-bg));
  box-shadow: var(--custodia-card-shadow, none);
}

body.cx-access #content-main .cx-access__card[hidden],
body.cx-access #content-main [data-access-row][hidden] {
  display: none;
}

body.cx-access #content-main .cx-access__card h2 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--body-fg);
  font-family: 'Fraunces', serif;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}

body.cx-access #content-main .cx-access__note {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.84375rem;
}

body.cx-access #content-main .cx-access__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 24px;
}

/* All areas: what On means, and its user count. */
body.cx-access #content-main .cx-access__all {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
}

body.cx-access #content-main .cx-access__all-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.cx-access #content-main .cx-access__all-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.cx-access #content-main .cx-access__all-body {
  margin: 4px 0 0;
  padding: 0;
  color: var(--body-fg);
  font-size: 0.875rem;
}

body.cx-access #content-main .cx-access__all-meta {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 0.8125rem;
}

body.cx-access #content-main .cx-access__all-meta a,
body.cx-access #content-main .cx-access__table thead a,
body.cx-access #content-main .cx-access__other a {
  color: var(--cx-accent);
  font-weight: 600;
  text-decoration: none;
}

body.cx-access #content-main .cx-access__all-meta a:hover,
body.cx-access #content-main .cx-access__table thead a:hover,
body.cx-access #content-main .cx-access__other a:hover {
  text-decoration: underline;
}

body.cx-access #content-main .cx-access__all-meta code {
  background: none;
  color: var(--cx-access-code);
  font-size: 0.75rem;
}

body.cx-access #content-main .cx-access__tag,
body.cx-access #content-main .cx-access__pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--cx-access-pill-bg);
  color: var(--cx-access-pill-fg);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

body.cx-access #content-main .cx-access__tag {
  border-radius: 999px;
}

body.cx-access #content-main .cx-access__pill.is-warn {
  background: var(--cx-access-warn-bg);
  color: var(--cx-access-warn-fg);
}

/* Area table: record type, then View / Edit / Full. */
body.cx-access #content-main .cx-access__table {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--cx-list-row-line);
  border-collapse: collapse;
  table-layout: fixed;
}

/* Plain rows: no legacy zebra stripes or hover fill. */
body.cx-access #content-main .cx-access__table tr,
body.cx-access #content-main .cx-access__table tr:hover {
  background: none;
}

body.cx-access #content-main .cx-access__table th,
body.cx-access #content-main .cx-access__table td {
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--cx-list-row-line);
  background: none;
  color: var(--body-fg);
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

body.cx-access #content-main .cx-access__table tr > :first-child {
  width: 260px;
  padding-left: 24px;
}

body.cx-access #content-main .cx-access__table tr > :last-child {
  padding-right: 24px;
}

body.cx-access #content-main .cx-access__table tbody tr:last-child > * {
  border-bottom: 0;
}

body.cx-access #content-main .cx-access__table tbody tr > * {
  height: 44px;
  box-sizing: border-box;
}

body.cx-access #content-main .cx-access__table thead th {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom-color: var(--custodia-card-border-color, var(--cx-line));
  background: var(--cx-list-head-bg);
  color: var(--cx-muted);
  font-size: 0.78125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

body.cx-access #content-main .cx-access__table thead a {
  margin-left: 8px;
  font-size: 0.78125rem;
  font-weight: 500;
}

body.cx-access #content-main .cx-access__level {
  color: var(--body-fg);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-access #content-main .cx-access__table thead th.is-missing .cx-access__level {
  color: var(--cx-access-faint);
}

body.cx-access #content-main .cx-access__table td {
  white-space: normal;
}

body.cx-access #content-main .cx-access__table td > .cx-access__pill {
  margin: 2px 4px 2px 0;
}

body.cx-access #content-main .cx-access__none {
  color: var(--cx-access-faint);
  font-size: 0.8125rem;
}

body.cx-access #content-main .cx-access__other {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cx-list-row-line);
  list-style: none;
}

body.cx-access #content-main .cx-access__other li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 24px;
  border-bottom: 1px solid var(--cx-list-row-line);
  font-size: 0.875rem;
  list-style: none;
}

body.cx-access #content-main .cx-access__other li:last-child {
  border-bottom: 0;
}

body.cx-access #content-main .cx-access__empty {
  margin: 0;
  padding: 24px;
  color: var(--cx-muted);
  text-align: center;
}

body.cx-access #content-main .cx-access__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  color: var(--cx-muted);
  font-size: 0.78125rem;
}

body.cx-access #content-main .cx-access__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.cx-access #content-main .cx-access__howto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border: 1px solid var(--custodia-card-border-color, var(--cx-line));
  border-radius: 12px;
  background: var(--cx-list-head-bg);
  color: var(--cx-label-color);
  font-size: 0.84375rem;
  line-height: 1.5;
}

body.cx-access #content-main .cx-access__howto h2 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--body-fg);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

body.cx-access #content-main .cx-access__howto p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

body.cx-access #content-main .cx-access__howto strong {
  font-weight: 600;
}

body.cx-access #content-main .cx-access__cmd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

body.cx-access #content-main .cx-access__cmd code {
  background: none;
  color: var(--body-fg);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.78125rem;
}

body.cx-access #content-main .cx-access__cmd span {
  color: var(--cx-muted);
}

@media (max-width: 767px) {
  body.cx-access #content-main .cx-access__all {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  body.cx-access #content-main .cx-access__all-meta {
    align-items: flex-start;
  }

  body.cx-access #content-main .cx-access__head {
    padding: 12px 16px;
  }

  /* Four columns don't fit a phone: the table scrolls inside its card. */
  body.cx-access #content-main .cx-access__card:has(.cx-access__table) {
    overflow-x: auto;
  }

  body.cx-access #content-main .cx-access__table {
    min-width: 620px;
  }

  body.cx-access #content-main .cx-access__table tr > :first-child {
    width: 170px;
    padding-left: 16px;
  }
}

/* ===========================================
   CLIENTS LIST (global admin, body.cx-list.model-client)
   ClientAdmin on cx_change_list.html: organisation tile, name and web address; plan with
   billing underneath; status badge with a note; the next date that matters and what
   happens then (red within a week for data deletion); users; sign-up date.
   =========================================== */
body.cx-list.model-client #content-main #result_list:not(.changelist-columns-sized) th.column-plan_billing {
  width: 160px;
}

body.cx-list.model-client #content-main #result_list:not(.changelist-columns-sized) th.column-client_status {
  width: 180px;
}

body.cx-list.model-client #content-main #result_list:not(.changelist-columns-sized) th.column-next_date {
  width: 170px;
}

body.cx-list.model-client #content-main #result_list:not(.changelist-columns-sized) th.column-user_count {
  width: 80px;
}

body.cx-list.model-client #content-main #result_list:not(.changelist-columns-sized) th.column-signed_up {
  width: 120px;
}

body.cx-list.model-client #content-main #result_list :is(th, td).column-user_count,
body.cx-list.model-client #content-main #result_list td.field-user_count {
  text-align: right;
  padding-right: 24px;
}

body.cx-list.model-client #content-main .cx-client {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.cx-list.model-client #content-main .cx-client__tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #ffffff;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 600;
}

body.cx-list.model-client #content-main .cx-client__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-list.model-client #content-main .cx-client__name {
  overflow: hidden;
  color: var(--cx-label-color);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list.model-client #content-main .cx-client__sub {
  overflow: hidden;
  color: var(--cx-muted);
  font-size: 0.78rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cx-list.model-client #content-main .cx-client.is-gone .cx-client__name {
  color: var(--cx-muted);
}

body.cx-list.model-client #content-main .cx-client.is-gone .cx-client__tile {
  background: var(--cx-thumb-bg) !important;
  color: var(--cx-muted);
}

/* Their own logo (Organisation settings), whole on white; a see-through logo too light for
   white sits on the admin header's moss, as on the Organisation settings page. */
body.cx-list.model-client #content-main .cx-client__tile--logo,
body.cx-list.model-client #content-main .cx-client.is-gone .cx-client__tile--logo {
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--cx-line);
  background: #fff !important;
}

body.cx-list.model-client #content-main .cx-client__tile--logo.is-dark,
body.cx-list.model-client #content-main .cx-client.is-gone .cx-client__tile--logo.is-dark {
  border-color: #2a3d2a;
  background: #2a3d2a !important;
}

body.cx-list.model-client #content-main .cx-client__tile--logo img {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
}

body.cx-list.model-client #content-main .cx-client.is-gone .cx-client__tile--logo img {
  filter: grayscale(1);
  opacity: 0.55;
}

body.cx-list.model-client #content-main .cx-client-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  white-space: nowrap;
}

body.cx-list.model-client #content-main .cx-client-cell small {
  color: var(--cx-muted);
  font-size: 0.78rem;
}

body.cx-list.model-client #content-main .cx-client-cell.is-soon > span {
  color: var(--cx-delete-fg);
  font-weight: 600;
}

body.cx-list.model-client #content-main .cx-client__none {
  color: var(--cx-muted);
}

/* ===========================================
   CLIENT CHANGE PAGE (global admin, body.cx-layout.model-client; sys_change_form.html)
   Initial tile in the list's colour, lifecycle banner, plan cards with read-only billing
   facts, invoices table with a pager, and the rail's timeline, usage and billing details.
   =========================================== */
body.cx-layout.model-client #content .cx-client-tile {
  border: 0;
  background: var(--cx-client-tile);
  color: #ffffff;
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 600;
}

body.cx-layout.model-client #content .cx-client-tile.is-gone {
  background: var(--cx-thumb-bg);
  color: var(--cx-muted);
}

body.cx-layout.model-client #content .cx-client-tile--logo,
body.cx-layout.model-client #content .cx-client-tile--logo.is-gone {
  border: 1px solid var(--cx-line);
  background: #fff;
}

body.cx-layout.model-client #content .cx-client-tile--logo.is-dark {
  border-color: #2a3d2a;
  background: #2a3d2a;
}

body.cx-layout.model-client #content .cx-client-tile--logo img {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
}

body.cx-layout.model-client #content .cx-client-tile--logo.is-gone img {
  filter: grayscale(1);
  opacity: 0.55;
}

body.cx-layout.model-client #content-main .cx-client-banner {
  --cx-banner: var(--cx-unsaved);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 var(--cx-gap);
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--cx-banner) 40%, transparent);
  border-radius: var(--cx-card-radius);
  background: color-mix(in srgb, var(--cx-banner) 9%, var(--body-bg, #fff));
}

body.cx-layout.model-client #content-main .cx-client-banner.is-danger {
  --cx-banner: var(--cx-delete-fg);
}

body.cx-layout.model-client #content-main .cx-client-banner > svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: color-mix(in srgb, var(--cx-banner) 80%, var(--body-fg, #333));
}

body.cx-layout.model-client #content-main .cx-client-banner__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.model-client #content-main .cx-client-banner__text strong {
  color: var(--body-fg, #333);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-layout.model-client #content-main button.cx-client-banner__btn {
  flex: none;
  height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--cx-banner) 55%, transparent);
  border-radius: 8px;
  background: var(--body-bg, #fff);
  color: var(--body-fg, #333);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
}

body.cx-layout.model-client #content-main button.cx-client-banner__btn:hover {
  border-color: var(--cx-banner);
}

@media (max-width: 767px) {
  body.cx-layout.model-client #content-main .cx-client-banner {
    flex-wrap: wrap;
  }

  body.cx-layout.model-client #content-main button.cx-client-banner__btn {
    margin-left: 34px;
  }
}

/* Web address: the input then the domain, as one box. */
body.cx-layout.model-client #content-main .cx-client-slug {
  flex-wrap: nowrap;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
}

body.cx-layout.model-client #content-main .cx-client-slug:focus-within {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 18%, transparent);
}

body.cx-layout.model-client #content-main .cx-client-slug > input {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
}

body.cx-layout.model-client #content-main .cx-client-slug__suffix {
  display: flex;
  flex: none;
  align-items: center;
  align-self: stretch;
  padding: 0 12px;
  border-left: 1px solid var(--cx-line);
  background: var(--cx-chip-bg);
  color: var(--cx-muted);
  font-size: 0.875rem;
}

/* Plan cards. */
body.cx-layout.model-client #content-main .cx-client-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.cx-layout.model-client #content-main label.cx-client-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 10px;
  background: var(--cx-input-bg);
  cursor: pointer;
}

body.cx-layout.model-client #content-main label.cx-client-plan:hover {
  border-color: var(--cx-muted);
}

body.cx-layout.model-client #content-main label.cx-client-plan:has(input:checked) {
  border-color: var(--cx-accent);
  box-shadow: inset 0 0 0 1px var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 7%, var(--cx-input-bg));
}

body.cx-layout.model-client #content-main label.cx-client-plan:focus-within {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-layout.model-client #content-main label.cx-client-plan input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cx-accent);
}

body.cx-layout.model-client #content-main .cx-client-plan__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-layout.model-client #content-main .cx-client-plan__text strong {
  color: var(--body-fg, #333);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-layout.model-client #content-main .cx-client-plan__text small {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout.model-client #content-main .cx-client-plan__price {
  flex: none;
  color: var(--cx-label-color);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Read-only facts (status, billing, dates): label, a quiet box, then the note. */
body.cx-layout.model-client #content-main .cx-client-static-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

body.cx-layout.model-client #content-main .cx-client-static {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

body.cx-layout.model-client #content-main .cx-client-static__label {
  color: var(--cx-label-color);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

body.cx-layout.model-client #content-main .cx-client-static__value {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0 12px;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: var(--cx-disabled-bg);
  color: var(--body-fg, #333);
  font-size: 0.875rem;
}

body.cx-layout.model-client #content-main .cx-client-static__value.is-empty {
  color: var(--cx-muted);
}

body.cx-layout.model-client #content-main .cx-client-static__help {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

@media (max-width: 767px) {
  body.cx-layout.model-client #content-main :is(.cx-client-plans, .cx-client-static-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Invoices: header, table edge to edge, pager. */
body.cx-layout.model-client #content-main .cx-client-invoices {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

body.cx-layout.model-client #content-main .cx-client-invoices__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 20px 24px 14px;
}

body.cx-layout.model-client #content-main .cx-client-invoices__summary,
body.cx-layout.model-client #content-main .cx-client-invoices__empty {
  margin: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout.model-client #content-main .cx-client-invoices__empty {
  padding: 0 24px 22px;
}

body.cx-layout.model-client #content-main .cx-client-invoices__wrap {
  position: relative;
  overflow-x: auto;
}

body.cx-layout.model-client #content-main table.cx-client-invoices__table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: 0.875rem;
}

body.cx-layout.model-client #content-main .cx-client-invoices__table :is(th, td) {
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--cx-line);
  background: none;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

body.cx-layout.model-client #content-main .cx-client-invoices__table :is(th, td):first-child {
  padding-left: 24px;
}

body.cx-layout.model-client #content-main .cx-client-invoices__table :is(th, td):last-child {
  width: 30px;
  padding-right: 16px;
}

body.cx-layout.model-client #content-main .cx-client-invoices__table th {
  height: 38px;
  border-top: 1px solid var(--cx-line);
  background: var(--cx-chip-bg);
  color: var(--cx-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.cx-layout.model-client #content-main .cx-client-invoices__table td {
  height: 48px;
  color: var(--body-fg, #333);
}

body.cx-layout.model-client #content-main .cx-client-invoices__table tbody tr:last-child td {
  border-bottom: 0;
}

/* Invoice number: the mock's link colour, moss deepening on hover, no underline. */
body.cx-layout.model-client {
  --cx-invoice-link: #2a3d2a;
  --cx-invoice-link-hover: #1b2a1b;
}

html[data-theme="dark"] body.cx-layout.model-client {
  --cx-invoice-link: #b9cdb0;
  --cx-invoice-link-hover: #d9e5d3;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout.model-client {
    --cx-invoice-link: #b9cdb0;
    --cx-invoice-link-hover: #d9e5d3;
  }
}

body.cx-layout.model-client #content-main .cx-client-invoices__table td:first-child a,
body.cx-layout.model-client #content-main .cx-client-invoices__table td:first-child a:visited {
  color: var(--cx-invoice-link);
  font-weight: 600;
  text-decoration: none;
}

body.cx-layout.model-client #content-main .cx-client-invoices__table td:first-child a:is(:hover, :focus-visible) {
  color: var(--cx-invoice-link-hover);
  text-decoration: none;
}

body.cx-layout.model-client #content-main .cx-client-invoices__table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.cx-layout.model-client #content-main a.cx-client-invoices__pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: var(--cx-muted);
}

body.cx-layout.model-client #content-main a.cx-client-invoices__pdf:hover {
  background: var(--cx-chip-bg);
  color: var(--cx-label-color);
}

body.cx-layout.model-client #content-main .cx-client-invoices__pdf svg {
  width: 16px;
  height: 16px;
}

body.cx-layout.model-client #content-main .cx-client-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 24px;
  border-top: 1px solid var(--cx-line);
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout.model-client #content-main .cx-client-pager__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.cx-layout.model-client #content-main .cx-client-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid var(--cx-input-border);
  border-radius: 7px;
  background: var(--cx-input-bg);
  color: var(--cx-label-color);
}

body.cx-layout.model-client #content-main .cx-client-pager__btn.is-disabled {
  border-color: var(--cx-line);
  background: var(--cx-disabled-bg);
  color: var(--cx-dashed);
}

body.cx-layout.model-client #content-main .cx-client-pager__btn svg {
  width: 14px;
  height: 14px;
}

/* Rail: timeline. Done steps are filled, the current one amber, the rest hollow;
   data deletion in red. */
body.cx-layout.model-client #content-main .cx-client-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-layout.model-client #content-main .cx-client-timeline li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0 0 14px 24px;
  font-size: 0.8125rem;
  line-height: 1.4;
  list-style: none;
}

body.cx-layout.model-client #content-main .cx-client-timeline li:last-child {
  padding-bottom: 0;
}

/* The line down to the next step. */
body.cx-layout.model-client #content-main .cx-client-timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 2px;
  left: 4px;
  width: 2px;
  background: var(--cx-line);
}

body.cx-layout.model-client #content-main .cx-client-timeline li.is-done:not(:last-child)::before {
  background: color-mix(in srgb, var(--cx-accent) 30%, var(--cx-line));
}

body.cx-layout.model-client #content-main .cx-client-timeline__dot {
  position: absolute;
  top: 4px;
  left: 0;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid var(--cx-muted);
  border-radius: 999px;
  background: var(--body-bg, #fff);
}

body.cx-layout.model-client #content-main .cx-client-timeline li.is-done .cx-client-timeline__dot {
  border-color: var(--cx-accent);
  background: var(--cx-accent);
}

body.cx-layout.model-client #content-main .cx-client-timeline li.is-now .cx-client-timeline__dot {
  border-color: var(--cx-unsaved);
  background: var(--cx-unsaved);
}

body.cx-layout.model-client #content-main .cx-client-timeline li.is-warn .cx-client-timeline__dot {
  border-color: var(--cx-delete-fg);
}

body.cx-layout.model-client #content-main .cx-client-timeline__label {
  color: var(--cx-label-color);
}

body.cx-layout.model-client #content-main .cx-client-timeline li.is-next .cx-client-timeline__label {
  font-weight: 600;
}

body.cx-layout.model-client #content-main .cx-client-timeline__date {
  flex: none;
  color: var(--cx-muted);
  white-space: nowrap;
}

body.cx-layout.model-client #content-main .cx-client-timeline li.is-warn :is(.cx-client-timeline__label, .cx-client-timeline__date) {
  color: var(--cx-delete-fg);
  font-weight: 600;
}

/* Rail: counts, billing address, notes. */
body.cx-layout.model-client #content-main .cx-client-usage {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-layout.model-client #content-main .cx-client-usage li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--cx-line);
  font-size: 0.875rem;
  list-style: none;
}

body.cx-layout.model-client #content-main .cx-client-usage li:last-child {
  border-bottom: 0;
}

body.cx-layout.model-client #content-main .cx-client-usage li > span {
  color: var(--cx-label-color);
}

body.cx-layout.model-client #content-main .cx-client-usage :is(a, strong) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--body-fg, #333);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

body.cx-layout.model-client #content-main .cx-client-usage a {
  color: var(--link-fg, var(--cx-accent));
}

body.cx-layout.model-client #content-main .cx-client-usage a svg {
  width: 14px;
  height: 14px;
}

body.cx-layout.model-client #content a.cx-btn.cx-client-download {
  align-self: flex-start;
  height: 34px;
  padding: 0 12px;
}

body.cx-layout.model-client #content-main .cx-client-address {
  margin: 0;
  color: var(--body-fg, #333);
  font-size: 0.875rem;
  line-height: 1.5;
}

body.cx-layout.model-client #content-main .cx-client-address.is-empty,
body.cx-layout.model-client #content-main .cx-client-rail-note {
  margin: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.model-client #content-main .cx-client-emails {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.cx-layout.model-client #content-main .cx-client-emails > dd {
  text-align: right;
}

/* ===========================================
   MANAGE PLAN PAGE (tenant, body.cx-layout.cx-manage-plan; client/manage_plan.html)
   A client admin's own plan: header with Change / Activate plan, the cancelling or trial
   banner, Your plan (features, annual nudge), Billing (renewal with Cancel renewal, Invoice
   to), Invoices; rail of key dates, data export, paying and support. Shares the CLIENT
   CHANGE PAGE banner, invoices table, pager and timeline (body.model-client).
   =========================================== */
body.cx-layout.cx-manage-plan {
  --cx-mp-info: #2f6a9e;
  --cx-mp-gold: #d4a94a;
}

html[data-theme="dark"] body.cx-layout.cx-manage-plan {
  --cx-mp-info: #7fb0dd;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout.cx-manage-plan {
    --cx-mp-info: #7fb0dd;
  }
}

/* Buttons: plain (framed), outline (accent), primary (solid moss), small, danger. */
body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn,
body.cx-layout.cx-manage-plan #content a.cx-mp-btn:visited,
body.cx-layout .plan-modal button.cx-mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--cx-input-border);
  border-radius: 8px;
  background: var(--cx-input-bg);
  color: var(--cx-label-color);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}

body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn:hover,
body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn:focus-visible,
body.cx-layout .plan-modal button.cx-mp-btn:is(:hover, :focus-visible) {
  border-color: var(--cx-muted);
  text-decoration: none;
}

body.cx-layout.cx-manage-plan #content .cx-mp-btn svg {
  flex: none;
  width: 16px;
  height: 16px;
}

body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn--small {
  height: 34px;
  padding: 0 12px;
  font-size: 0.8125rem;
}

body.cx-layout.cx-manage-plan #content .cx-mp-btn--small svg {
  width: 15px;
  height: 15px;
}

body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn--outline {
  border-color: var(--cx-accent);
  color: var(--cx-accent);
}

body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn--outline:hover,
body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn--outline:focus-visible {
  border-color: var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 8%, var(--cx-input-bg));
}

body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn--primary,
body.cx-layout.cx-manage-plan #content a.cx-mp-btn--primary:visited {
  --cx-mp-primary: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  border-color: var(--cx-mp-primary);
  background: var(--cx-mp-primary);
  color: #ffffff;
}

body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn--primary:hover,
body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn--primary:focus-visible {
  border-color: color-mix(in srgb, var(--cx-mp-primary) 85%, black);
  background: color-mix(in srgb, var(--cx-mp-primary) 85%, black);
  color: #ffffff;
}

body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn--danger,
body.cx-layout .plan-modal button.cx-mp-btn--danger {
  border-color: color-mix(in srgb, var(--cx-delete-fg) 40%, transparent);
  color: var(--cx-delete-fg);
}

body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn--danger:hover,
body.cx-layout.cx-manage-plan #content :is(a, button).cx-mp-btn--danger:focus-visible,
body.cx-layout .plan-modal button.cx-mp-btn--danger:is(:hover, :focus-visible) {
  border-color: var(--cx-delete-fg);
  background: color-mix(in srgb, var(--cx-delete-fg) 7%, var(--cx-input-bg));
}

/* Cancel modal: SVG header icon, sized like the icon-font glyph it replaced. */
body.cx-layout .plan-modal .plan-action-header__icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

/* Cancel modal: the lone confirm button gets a little more width. */
body.cx-layout .plan-modal button.cx-mp-btn {
  min-width: 160px;
  padding: 0 24px;
}

body.cx-layout.cx-manage-plan #content .cx-header__eyebrow {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Trial banner (the cancelling one is the CLIENT CHANGE PAGE amber). */
body.cx-layout.model-client #content-main .cx-client-banner.is-info {
  --cx-banner: var(--cx-mp-info);
}

/* Your plan: tile, features, annual nudge, footer. */
body.cx-layout.cx-manage-plan #content-main .cx-mp-plan {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--cx-mp-gold) 40%, var(--cx-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--cx-mp-gold) 9%, var(--body-bg, #fff));
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-plan__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--custodia-moss, #2a3d2a);
  color: #f0ead8;
  font-size: 24px;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-plan__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-plan__text strong {
  color: var(--body-fg, #333);
  font-family: 'Fraunces', serif;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-plan__text span {
  color: var(--cx-muted);
  font-size: 0.84rem;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 0;
  color: var(--cx-label-color);
  font-size: 0.875rem;
  line-height: 1.4;
  list-style: none;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-features svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--cx-accent);
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-features li.is-base span {
  color: var(--body-fg, #333);
  font-weight: 600;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-nudge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cx-accent) 22%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--cx-accent) 7%, var(--body-bg, #fff));
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-nudge > svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cx-accent);
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-nudge > span {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cx-label-color);
  font-size: 0.84rem;
  line-height: 1.45;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-nudge strong {
  font-weight: 600;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-plan-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--cx-line);
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-plan-foot > span {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Billing: two facts side by side (each with its note, Renews on with Cancel renewal),
   then Invoice to across the card with Edit details on the right. */
body.cx-layout.cx-manage-plan #content-main dl.cx-mp-billing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--cx-line);
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing dt {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing dd {
  margin: 0;
  padding: 0;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing__value {
  color: var(--body-fg, #333);
  font-size: 0.906rem;
  font-weight: 500;
  line-height: 1.4;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing__note,
body.cx-layout.cx-manage-plan #content-main .cx-mp-billing__action > span {
  color: var(--cx-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing dd.cx-mp-billing__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 6px;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing__row--invoice-to {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label edit"
    "address edit";
  gap: 4px 16px;
  padding: 14px 0 0;
  border-bottom: 0;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing__row--invoice-to > dt {
  grid-area: label;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing__address {
  grid-area: address;
  color: var(--body-fg, #333);
  font-size: 0.906rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing__address.is-empty {
  color: var(--cx-muted);
  font-size: 0.84rem;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-billing__edit {
  grid-area: edit;
  align-self: start;
}

/* Invoices: what's due in the heading line, the due date beside a pending badge,
   adjustment lines (proration) under the period. */
body.cx-layout.cx-manage-plan #content-main .cx-client-invoices__summary.is-due {
  color: color-mix(in srgb, var(--cx-unsaved) 70%, var(--body-fg, #333));
  font-weight: 600;
}

body.cx-layout.cx-manage-plan #content-main .cx-client-invoices__summary.is-overdue {
  color: var(--cx-delete-fg);
  font-weight: 600;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-invoice-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-invoice-status small {
  color: color-mix(in srgb, var(--cx-unsaved) 70%, var(--body-fg, #333));
  font-size: 0.78rem;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-invoice-status small.is-overdue {
  color: var(--cx-delete-fg);
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-invoice-item {
  display: block;
  padding-bottom: 2px;
  color: var(--cx-muted);
  font-size: 0.75rem;
  white-space: normal;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-invoice-item:first-of-type {
  padding-top: 2px;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 24px 24px;
  padding: 28px 20px;
  border: 1px dashed var(--cx-dashed);
  border-radius: 10px;
  background: var(--cx-chip-bg);
  text-align: center;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-empty svg {
  width: 26px;
  height: 26px;
  color: var(--cx-muted);
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-empty strong {
  color: var(--cx-label-color);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-empty span {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

/* Rail. */
body.cx-layout.cx-manage-plan #content-main .cx-mp-rail-text {
  margin: 0;
  padding: 0;
  color: var(--cx-label-color);
  font-size: 0.84rem;
  line-height: 1.45;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-help {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--cx-chip-bg);
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-layout.cx-manage-plan #content-main .cx-mp-help > svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

body.cx-layout.cx-manage-plan #content-main button.cx-mp-link {
  display: inline;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link-fg, var(--cx-accent));
  font: inherit;
  text-decoration: underline;
  text-transform: none;
  text-underline-offset: 2px;
  cursor: pointer;
}

@media (max-width: 767px) {
  body.cx-layout.cx-manage-plan #content-main :is(.cx-mp-features, dl.cx-mp-billing) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cx-layout.cx-manage-plan #content-main .cx-mp-billing__row:not(.cx-mp-billing__row--invoice-to) + .cx-mp-billing__row:not(.cx-mp-billing__row--invoice-to) {
    padding-top: 14px;
  }

  body.cx-layout.cx-manage-plan #content-main :is(.cx-mp-nudge, .cx-mp-plan-foot) {
    flex-wrap: wrap;
  }

  body.cx-layout.cx-manage-plan #content-main .cx-mp-nudge > button {
    margin-left: 32px;
  }
}

/* ===========================================
   INVOICE PAGE (tenant, body.cx-layout.cx-invoice-page; core/invoice/client_invoice.html)
   A client admin's read-only invoice: header with Download PDF, a banner per status, the
   Breakdown table and Your agreement; rail of amount, How to pay, Invoiced to and Related
   invoices. Also carries model-client and cx-manage-plan for the shared banner, buttons and
   rail styles.
   =========================================== */
body.cx-layout.cx-invoice-page {
  --cx-inv-success: #3f7a3f;
  --cx-inv-neutral: #8a7d68;
}

html[data-theme="dark"] body.cx-layout.cx-invoice-page {
  --cx-inv-success: #8fbf8a;
  --cx-inv-neutral: #b3a793;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-layout.cx-invoice-page {
    --cx-inv-success: #8fbf8a;
    --cx-inv-neutral: #b3a793;
  }
}

body.cx-layout.cx-invoice-page #content .cx-inv-tile {
  background: var(--body-bg, #fff);
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-layout.cx-invoice-page #content .cx-inv-tile svg {
  width: 30px;
  height: 30px;
}

body.cx-layout.cx-invoice-page #content-main .cx-client-banner.is-success {
  --cx-banner: var(--cx-inv-success);
}

body.cx-layout.cx-invoice-page #content-main .cx-client-banner.is-neutral {
  --cx-banner: var(--cx-inv-neutral);
}

/* Breakdown: a quiet head (small muted labels and a hairline) so the title flows into it. */
body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 6px;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table tr,
body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table tr:nth-child(even) {
  background: none;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table th,
body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table td {
  padding: 10px 12px;
  border: 0;
  background: none;
  text-align: left;
  vertical-align: top;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table th:first-child,
body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table td:first-child {
  padding-left: 0;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table th:last-child,
body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table td:last-child {
  padding-right: 0;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table thead th {
  padding-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cx-line);
  color: var(--cx-muted);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table tbody td {
  border-bottom: 1px solid color-mix(in srgb, var(--cx-line) 70%, transparent);
  color: var(--body-fg, #333);
  white-space: nowrap;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table tbody td:first-child {
  white-space: normal;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table tbody td strong {
  display: block;
  font-weight: 500;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table tbody td small {
  display: block;
  margin-top: 2px;
  color: var(--cx-muted);
  font-size: 0.78125rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table tfoot th,
body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table tfoot td {
  padding-top: 14px;
  padding-bottom: 0;
  color: var(--body-fg, #333);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-breakdown__table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Your agreement. */
body.cx-layout.cx-invoice-page #content-main .cx-inv-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-card-head .cx-card__title {
  margin: 0;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-card-head p {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.84375rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-facts > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-facts dt {
  color: var(--cx-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-facts dd {
  margin: 0;
  color: var(--body-fg, #333);
  font-size: 0.90625rem;
  overflow-wrap: anywhere;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-wording {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--cx-line) 70%, transparent);
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-wording summary {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-size: 0.84375rem;
  font-weight: 600;
  cursor: pointer;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-wording p {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--darkened-bg, #f8f4ec);
  color: var(--body-fg, #333);
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* Rail: amount, how to pay, related invoices. */
body.cx-layout.cx-invoice-page #content-main .cx-inv-amount {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-amount__label {
  color: var(--cx-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-amount__value {
  color: var(--body-fg, #333);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-amount__note {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-amount__note.is-due {
  color: color-mix(in srgb, var(--cx-unsaved) 70%, var(--body-fg, #333));
  font-weight: 600;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-amount__note.is-overdue {
  color: var(--cx-delete-fg);
  font-weight: 600;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-pay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
  font-size: 0.84375rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-pay dt {
  color: var(--cx-muted);
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-pay dd {
  margin: 0;
  color: var(--body-fg, #333);
  font-variant-numeric: tabular-nums;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-related {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-related li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 0.84375rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-related li > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-related small {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-related a,
body.cx-layout.cx-invoice-page #content-main .cx-inv-related a:visited {
  color: var(--cx-invoice-link);
  font-weight: 600;
  text-decoration: none;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-related a:is(:hover, :focus-visible) {
  color: var(--cx-invoice-link-hover);
}

/* Sysadmin version (core/invoice/sysadmin_invoice.html): client links, the Payment form, the
   no-agreement note and Delete invoice. */
body.cx-layout.cx-invoice-page #content a.cx-inv-client-link,
body.cx-layout.cx-invoice-page #content a.cx-inv-client-link:visited {
  color: var(--cx-invoice-link);
  font-weight: 600;
  text-decoration: none;
}

body.cx-layout.cx-invoice-page #content a.cx-inv-client-link:is(:hover, :focus-visible) {
  color: var(--cx-invoice-link-hover);
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-facts dd small {
  display: block;
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-form {
  padding-bottom: 0;
  overflow: hidden;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-form__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  margin-bottom: 20px;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-form__fields .cx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  min-width: 0;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-form__fields label {
  color: var(--body-fg, #333);
  font-size: 0.8125rem;
  font-weight: 600;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-form__fields .cx-field__control :is(input, select) {
  width: 100%;
}

body.cx-layout.cx-invoice-page #content-main :is(.cx-inv-form__error, .cx-inv-form__errors) {
  color: var(--cx-delete-fg);
  font-size: 0.8125rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-form__errors {
  margin-bottom: 12px;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-form__errors ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -24px;
  padding: 14px 24px;
  border-top: 1px solid color-mix(in srgb, var(--cx-line) 70%, transparent);
  background: var(--darkened-bg, #fbf8f1);
  color: var(--cx-muted);
  font-size: 0.78125rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-form__buttons {
  display: flex;
  gap: 10px;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-empty {
  margin: 0;
  padding: 14px 18px;
  border: 1px dashed var(--cx-input-border);
  border-radius: 12px;
  color: var(--cx-muted);
  font-size: 0.84375rem;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-delete {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 4px 0;
  color: var(--cx-muted);
  font-size: 0.78125rem;
  line-height: 1.4;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-delete a,
body.cx-layout.cx-invoice-page #content-main .cx-inv-delete a:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cx-delete-fg);
  font-size: 0.84375rem;
  font-weight: 600;
  text-decoration: none;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-delete a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

body.cx-layout.cx-invoice-page #content-main .cx-inv-delete svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) {
  body.cx-layout.cx-invoice-page #content-main :is(.cx-inv-facts, .cx-inv-form__fields) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===========================================
   LEGAL VERSIONS LIST (global, body.cx-legal.cx-legal-list; core/legal_version_change_list.html)
   Terms of Service and Privacy Policy versions: the shared cx list with a cx-header, a
   read-only note, a Live pill and short hash in the rows, and a rail (client admin banner,
   service update email).
   =========================================== */
body.cx-legal #content .cx-legal-tile {
  background: var(--body-bg, #fff);
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-legal #content .cx-legal-tile .material-symbols-outlined {
  font-size: 30px;
}

body.cx-legal #content-main .cx-legal-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 var(--cx-gap);
  padding: 14px 18px;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-card-radius);
  background: var(--darkened-bg, #f4f0e8);
  color: var(--cx-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.cx-legal #content-main .cx-legal-note > svg {
  flex: none;
  width: 20px;
  height: 20px;
}

body.cx-legal #content-main .cx-legal-note > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.cx-legal #content-main .cx-legal-note strong {
  color: var(--body-fg, #333);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-legal #content-main .cx-legal-state {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cx-muted) 14%, var(--body-bg, #fff));
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

body.cx-legal #content-main .cx-legal-state.is-on {
  background: color-mix(in srgb, var(--admin-submit-primary-bg, #2a3d2a) 12%, var(--body-bg, #fff));
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-legal #content-main .cx-legal-live {
  margin-left: 10px;
}

body.cx-legal #content-main #result_list td.field-version_label,
body.cx-legal #content-main #result_list th.field-version_label {
  white-space: nowrap;
}

body.cx-legal #content-main .cx-legal-hash {
  color: var(--cx-muted);
  font-size: 0.78125rem;
}

body.cx-legal #content-main .cx-legal-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.cx-legal #content-main .cx-legal-banner-text {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--darkened-bg, #f8f4ec);
  color: var(--body-fg, #333);
  font-size: 0.8125rem;
  line-height: 1.5;
}

body.cx-legal #content-main .cx-legal-rail-note {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.78125rem;
  line-height: 1.45;
}

body.cx-legal #content-main :is(.cx-legal-rail-note a, a.cx-legal-rail-link),
body.cx-legal #content-main :is(.cx-legal-rail-note a, a.cx-legal-rail-link):visited {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
  text-decoration: none;
}

body.cx-legal #content-main a.cx-legal-rail-link {
  font-size: 0.84375rem;
}

body.cx-legal #content-main :is(.cx-legal-rail-note a, a.cx-legal-rail-link):is(:hover, :focus-visible) {
  color: color-mix(in srgb, var(--admin-submit-primary-bg, #2a3d2a) 75%, #000);
}
/* Closer to the mock: uppercase eyebrow, a "Versions" title in the card, a quiet table head
   (muted uppercase labels over a hairline, as on the invoice breakdown), bold moss versions,
   and no empty toolbar, column resizers or one-page footer. */
body.cx-legal #content .cx-header__eyebrow {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.cx-legal #content-main .cx-legal-note {
  border-color: color-mix(in srgb, var(--cx-muted) 30%, transparent);
  background: color-mix(in srgb, var(--cx-muted) 9%, var(--body-bg, #fff));
}

body.cx-legal #content-main .cx-list__toolbar:empty,
body.cx-legal #content-main .cx-list__toolbar:not(:has(*)) {
  display: none;
}

body.cx-legal #content-main h2.cx-legal-card-title {
  padding: 20px 24px 6px;
}

body.cx-legal #content-main .cx-list__footer:not(:has(.cx-list__pager)) {
  display: none;
}

body.cx-legal #content-main #result_list .changelist-column-resizer {
  display: none;
}

@media (min-width: 1025px) {
  body.cx-legal #content-main #result_list thead th {
    height: 34px;
    border-bottom: 1px solid var(--cx-line) !important;
    background: none !important;
    font-size: 0.71875rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  body.cx-legal #content-main #result_list :is(thead th, tbody :is(th, td)):first-child {
    padding-left: 24px !important;
  }

  body.cx-legal #content-main #result_list tbody :is(th, td) {
    height: 56px;
  }

  body.cx-legal #content-main #result_list tbody tr:last-child > :is(th, td) {
    border-bottom: 0 !important;
  }
}

body.cx-legal #content-main #result_list .field-version_label a,
body.cx-legal #content-main #result_list .field-version_label a:visited {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
  text-decoration: none;
}

body.cx-legal #content-main #result_list .field-version_label a:is(:hover, :focus-visible) {
  color: color-mix(in srgb, var(--admin-submit-primary-bg, #2a3d2a) 75%, #000);
}
/* Header labels: no inner padding, so each label lines up with its column's text (Version with
   the card title), and quieter than the cell text, like the mock (#8a7d68). */
body.cx-legal #content-main #result_list thead th .text :is(a, span) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 1025px) {
  body.cx-legal #content-main #result_list thead th {
    color: color-mix(in srgb, var(--cx-muted) 78%, var(--body-bg, #fff)) !important;
  }
}
/* The head row's own fill covered the card's light gradient, which read as a band. */
body.cx-legal #content-main #result_list thead tr {
  background: transparent !important;
}
/* ===========================================
   LEGAL VERSION PAGE (global, body.cx-legal.cx-legal-version; core/legal_version_change_form.html)
   One read-only Terms of Service / Privacy Policy version: the shared legal header tile and
   note (green when live), the content snapshot in a scrolling box with Jump to section, and
   a rail of version facts, acceptances, the banner's dismissals and all versions.
   =========================================== */
body.cx-legal-version #content-main .cx-legal-note.is-live {
  border-color: color-mix(in srgb, var(--cx-inv-success, #3f7a3f) 35%, transparent);
  background: color-mix(in srgb, var(--cx-inv-success, #3f7a3f) 9%, var(--body-bg, #fff));
}

body.cx-legal-version #content-main .cx-legal-snapshot__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

body.cx-legal-version #content-main .cx-legal-snapshot__head p {
  margin: 4px 0 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.84375rem;
}

body.cx-legal-version #content-main .cx-legal-jump {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, 300px);
  margin: 0;
  padding: 0;
}

body.cx-legal-version #content-main .cx-legal-jump label {
  color: var(--body-fg, #333);
  font-size: 0.8125rem;
  font-weight: 600;
}

body.cx-legal-version #content-main .cx-legal-snapshot__body {
  position: relative;
  max-height: 780px;
  overflow: auto;
  padding: 4px 24px 8px 2px;
  border-top: 1px solid color-mix(in srgb, var(--cx-line) 70%, transparent);
  color: var(--body-fg, #333);
  font-size: 0.875rem;
  line-height: 1.65;
}

body.cx-legal-version #content-main .cx-legal-snapshot__body h2 {
  margin: 22px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--body-fg, #333);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.cx-legal-version #content-main .cx-legal-snapshot__body :is(p, ul, ol) {
  max-width: 44rem;
  margin: 0 0 10px;
  padding-top: 0;
  padding-bottom: 0;
}

body.cx-legal-version #content-main .cx-legal-snapshot__body li {
  margin: 0 0 4px;
}

body.cx-legal-version #content-main .cx-legal-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
  font-size: 0.84375rem;
}

body.cx-legal-version #content-main .cx-legal-facts dt {
  color: var(--cx-muted);
}

body.cx-legal-version #content-main .cx-legal-facts dd {
  margin: 0;
  color: var(--body-fg, #333);
  overflow-wrap: anywhere;
}

body.cx-legal-version #content-main :is(.cx-legal-facts a, .cx-legal-list-rows a, .cx-legal-versions a),
body.cx-legal-version #content-main :is(.cx-legal-facts a, .cx-legal-list-rows a, .cx-legal-versions a):visited {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
  text-decoration: none;
}

body.cx-legal-version #content-main :is(.cx-legal-facts a, .cx-legal-list-rows a, .cx-legal-versions a):is(:hover, :focus-visible) {
  color: color-mix(in srgb, var(--admin-submit-primary-bg, #2a3d2a) 75%, #000);
}

body.cx-legal-version #content-main .cx-legal-hash-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.cx-legal-version #content-main button.cx-legal-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cx-line);
  border-radius: 6px;
  background: var(--body-bg, #fff);
  color: var(--cx-label-color);
  cursor: pointer;
}

body.cx-legal-version #content-main button.cx-legal-copy:is(:hover, :focus-visible) {
  border-color: var(--cx-muted);
}

body.cx-legal-version #content-main button.cx-legal-copy.is-copied {
  border-color: var(--admin-submit-primary-bg, #2a3d2a);
  color: var(--admin-submit-primary-bg, #2a3d2a);
}

body.cx-legal-version #content-main button.cx-legal-copy svg {
  width: 14px;
  height: 14px;
}

body.cx-legal-version #content-main .cx-legal-rail-count {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-legal-version #content-main :is(.cx-legal-list-rows, .cx-legal-versions) {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-legal-version #content-main .cx-legal-list-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--cx-line) 70%, transparent);
  font-size: 0.84375rem;
}

body.cx-legal-version #content-main .cx-legal-list-rows li + li {
  margin-top: 10px;
}

body.cx-legal-version #content-main .cx-legal-list-rows li > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-legal-version #content-main .cx-legal-list-rows strong {
  font-weight: 500;
}

body.cx-legal-version #content-main .cx-legal-list-rows small {
  color: var(--cx-muted);
  font-size: 0.78125rem;
}

body.cx-legal-version #content-main .cx-legal-dismissed {
  margin: 0;
  padding: 0;
  font-size: 0.84375rem;
}

body.cx-legal-version #content-main .cx-legal-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cx-line) 70%, transparent);
}

body.cx-legal-version #content-main .cx-legal-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-legal-version #content-main .cx-legal-versions {
  gap: 10px;
}

body.cx-legal-version #content-main .cx-legal-versions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 0.84375rem;
}

body.cx-legal-version #content-main .cx-legal-versions .is-current {
  color: var(--body-fg, #333);
  font-weight: 600;
}
body.cx-legal-version #content-main .cx-legal-list-rows li > :last-child {
  flex: none;
  white-space: nowrap;
}
/* An acceptance whose account (and invoice) was deleted: the number, unlinked and muted. */
body.cx-legal-version #content-main .cx-legal-list-rows .cx-legal-gone {
  color: var(--cx-muted);
}/* "N in total · See all" in the version page's Accepted at checkout card. */
body.cx-legal-version #content-main .cx-legal-rail-count {
  white-space: nowrap;
}

body.cx-legal-version #content-main .cx-legal-rail-count a,
body.cx-legal-version #content-main .cx-legal-rail-count a:visited {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
  text-decoration: none;
}

/* ===========================================
   PLAN ACCEPTANCES LIST (global, body.cx-legal.cx-legal-acceptances;
   core/paid_plan_acceptance_change_list.html). Shares the legal list look above; cells are
   two lines (main text over a muted line), an account that was deleted gets a pill, and an
   invoice that went with it is unlinked and muted.
   =========================================== */
body.cx-legal-acceptances #content-main .cx-acc-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-legal-acceptances #content-main .cx-acc-cell small {
  color: var(--cx-muted);
  font-size: 0.78125rem;
}

body.cx-legal-acceptances #content-main .cx-acc-cell small.cx-acc-gone {
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #b4532a 14%, var(--body-bg, #fff));
  color: color-mix(in srgb, #b4532a 75%, var(--body-fg, #333));
  font-size: 0.71875rem;
  font-weight: 600;
}

body.cx-legal-acceptances #content-main .cx-acc-muted {
  color: var(--cx-muted);
}

body.cx-legal-acceptances #content-main #result_list :is(td, th).field-accepted,
body.cx-legal-acceptances #content-main #result_list :is(td, th).field-terms,
body.cx-legal-acceptances #content-main #result_list :is(td, th).field-invoice_cell,
body.cx-legal-acceptances #content-main #result_list :is(td, th).field-kept_until {
  white-space: nowrap;
}

body.cx-legal-acceptances #content-main #result_list .field-accepted a,
body.cx-legal-acceptances #content-main #result_list .field-accepted a:visited,
body.cx-legal-acceptances #content-main #result_list .field-invoice_cell a,
body.cx-legal-acceptances #content-main #result_list .field-invoice_cell a:visited {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
  text-decoration: none;
}

body.cx-legal-acceptances #content-main #result_list tbody :is(th, td) {
  height: 62px;
}

/* ===========================================
   PLAN ACCEPTANCE PAGE (global, body.cx-legal-version.cx-acceptance;
   core/paid_plan_acceptance_change_form.html). Built on the legal version page: a warm banner
   for a deleted account, the accepted wording as a quote, the button they pressed, and a
   three-column checkout snapshot.
   =========================================== */
body.cx-acceptance #content-main .cx-legal-note.is-gone {
  border-color: color-mix(in srgb, #b4532a 30%, transparent);
  background: color-mix(in srgb, #b4532a 8%, var(--body-bg, #fff));
}

body.cx-acceptance #content .custodia-status-badge.cx-acc-gone-badge {
  background: color-mix(in srgb, #b4532a 14%, var(--body-bg, #fff));
  color: color-mix(in srgb, #b4532a 75%, var(--body-fg, #333));
}

body.cx-acceptance #content .cx-header__meta a,
body.cx-acceptance #content .cx-header__meta a:visited {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
  text-decoration: none;
}

body.cx-acceptance #content-main .cx-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--cx-gap);
}

body.cx-acceptance #content-main .cx-acc-wording {
  margin: 16px 0 0;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--cx-line) 70%, transparent);
  border-radius: 10px;
  background: var(--darkened-bg, #f8f4ec);
  color: var(--body-fg, #333);
  font-size: 0.9375rem;
  line-height: 1.65;
}

body.cx-acceptance #content-main .cx-acc-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-acceptance #content-main .cx-acc-button {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  color: var(--admin-submit-primary-fg, #fff);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-acceptance #content-main .cx-acc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 14px 0 0;
}

body.cx-acceptance #content-main .cx-acc-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.cx-acceptance #content-main .cx-acc-grid dt {
  color: color-mix(in srgb, var(--cx-muted) 78%, var(--body-bg, #fff));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.cx-acceptance #content-main .cx-acc-grid dd {
  margin: 0;
  color: var(--body-fg, #333);
  font-size: 0.9375rem;
}

body.cx-acceptance #content-main :is(.cx-acc-grid a, .cx-acc-invoice-number a),
body.cx-acceptance #content-main :is(.cx-acc-grid a, .cx-acc-invoice-number a):visited {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
  text-decoration: none;
}

body.cx-acceptance #content-main .cx-acc-muted {
  color: var(--cx-muted);
}

body.cx-acceptance #content-main :is(.cx-acc-invoice-number, .cx-acc-kept) {
  margin: 0;
  padding: 0;
  color: var(--body-fg, #333);
  font-size: 0.9375rem;
  font-weight: 600;
}

@media (max-width: 767px) {
  body.cx-acceptance #content-main .cx-acc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Narrow screens: the head cells had no side padding, so labels ran together ("CAPTUREDACCEPTANCES")
   and sat 8px left of their column; give them the cells' padding, and keep short values on one
   line so the card scrolls sideways instead of wrapping dates. */
body.cx-legal #content-main #result_list thead th {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

body.cx-legal #content-main #result_list thead th:first-child {
  padding-left: 24px !important;
}

body.cx-legal #content-main #result_list :is(td, th):is(.field-captured, .field-acceptances, .field-dismissed, .field-hash_short, .field-plan_cell) {
  white-space: nowrap;
}

/* Legal versions list: with the rail beside it from 1200px the versions table is too narrow for
   its columns and scrolls sideways (row menu cut off), so the rail stays below it until 1400px. */
@media (min-width: 1200px) and (max-width: 1399px) {
  body.cx-legal-list #content-main .cx-page:not(.cx-page--single) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cx-legal-list #content-main .cx-page__rail {
    position: static;
  }
}

/* ===========================================
   LIST TABLES AT NARROW WIDTHS (all cx lists). Between the phone layout and wide screens the
   sidebar leaves the tables tight: dates broke over three lines ("Sep / 29, / 2026") and wide
   tables scrolled sideways, hiding the row menu. Dates and short labels stay on one line; long
   text (document titles, attached to, client and admin on Plan acceptances) wraps instead of
   widening the table; and the row menu is pinned to the right edge so it stays reachable when a
   table does scroll.
   =========================================== */
body.cx-list #content-main #result_list :is(td, th):is(.field-due_display, .field-completed_on, .field-start_date, .field-end_date, .field-added, .field-signed_up, .field-last_signed_in, .field-access, .field-status, .field-status_badge, .field-terms, .field-kept_until, .field-accepted, .field-invoice_cell, .field-type_label) {
  white-space: nowrap;
}

body.cx-list #content-main #result_list .cx-user-access__note {
  white-space: nowrap;
}

/* The table's overflow: hidden made it the sticky cell's scroll container, so the pin never
   moved; clip keeps the clipping without being one. */
body.cx-list #content-main #result_list {
  overflow: clip !important; /* admin-custom.css sets hidden !important */
}

body.cx-list #content-main #result_list :is(th.cx-row-menu-col, td.cx-row-menu-cell) {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--custodia-card-bg, var(--body-bg, #fff)) !important;
}

/* The pinned header cell matches the rest of the head row (the card colour under it read as
   a faded patch); the head colour is layered on the page colour so it stays opaque in dark mode. */
body.cx-list:not(.cx-legal) #content-main #result_list thead th.cx-row-menu-col {
  background: linear-gradient(var(--cx-list-head-bg), var(--cx-list-head-bg)), var(--body-bg, #fff) !important;
}

body.cx-list #content-main #result_list tbody tr:hover > td.cx-row-menu-cell {
  background:
    linear-gradient(color-mix(in srgb, var(--cx-list-selected) 60%, transparent), color-mix(in srgb, var(--cx-list-selected) 60%, transparent)),
    var(--custodia-card-bg, var(--body-bg, #fff)) !important;
}

body.cx-list #content-main #result_list tbody tr.selected > td.cx-row-menu-cell {
  background:
    linear-gradient(var(--cx-list-selected), var(--cx-list-selected)),
    var(--custodia-card-bg, var(--body-bg, #fff)) !important;
}

body.cx-legal-acceptances #content-main #result_list :is(td, th):is(.field-client_cell, .field-accepted_by_cell) {
  min-width: 150px;
}

body.cx-legal-acceptances #content-main #result_list :is(td, th):is(.field-client_cell, .field-accepted_by_cell) .cx-acc-cell > * {
  white-space: normal;
}

/* Emails may break anywhere; names wrap at spaces; the Account deleted pill never wraps. */
body.cx-legal-acceptances #content-main #result_list .field-accepted_by_cell .cx-acc-cell > small {
  overflow-wrap: anywhere;
}

body.cx-list #content-main #result_list :is(.custodia-status-badge, small.cx-acc-gone) {
  white-space: nowrap !important;
}

@media (max-width: 1499px) {
  body.cx-list.model-documentlibrary #content-main #result_list:not(.changelist-columns-sized) :is(th.column-document_title, th.column-type_label, th.column-added) {
    width: auto;
  }

  body.cx-list.model-documentlibrary #content-main #result_list :is(td, th):is(.field-document_title, .field-attached_to) :is(.cx-doc__title, .cx-doc__text > a, .cx-doc__sub) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Keep the main text column readable when the dates stay on one line. */
body.cx-list.model-projecttask #content-main #result_list :is(td, th).field-task_name,
body.cx-list.model-restorationproject #content-main #result_list :is(td, th).field-name_with_image,
body.cx-list.model-documentlibrary #content-main #result_list :is(td, th):is(.field-document_title, .field-attached_to) {
  min-width: 180px;
}

/* Head row line: the resizable head cells are position: relative (and the row menu cells sticky),
   so Chrome painted their fill over the table's collapsed borders and the head line went missing
   on a fresh load (drawing it as an inset shadow instead blurred it over two pixels). With
   separate borders each cell paints its own line, crisp and on top of its own fill. The cells
   have no side or top borders, so nothing doubles up and the layout is unchanged. */
body.cx-list #content-main #result_list {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ===========================================
   ADMIN SETTINGS PAGE (global, body.cx-admin-settings; core/system/adminsettings_change_form.html,
   mock "Admin settings"). Reuses the legal version page's rail pieces (cx-legal-state,
   cx-legal-bar, cx-legal-list-rows, cx-legal-rail-note).
   =========================================== */
body.cx-admin-settings #content-main .cx-as-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.cx-admin-settings #content-main .cx-as-card-head .cx-card__description {
  margin: 0;
}

body.cx-admin-settings #content-main .cx-as-card-head--action {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body.cx-admin-settings #content-main .cx-as-card-head--action > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Outlined button, as .cx-btn (which only styles links), for buttons and file labels. */
body.cx-admin-settings #content-main .cx-as-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: var(--body-bg, #fff);
  color: var(--cx-label-color);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

body.cx-admin-settings #content-main .cx-as-btn:is(:hover, :focus-visible) {
  border-color: var(--cx-muted);
}

body.cx-admin-settings #content-main .cx-as-btn svg {
  width: 16px;
  height: 16px;
}

body.cx-admin-settings #content-main .cx-as-btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 0.8125rem;
}

/* ---- Default branding ---- */
body.cx-admin-settings #content-main .cx-as-assets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1099px) {
  body.cx-admin-settings #content-main .cx-as-assets {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.cx-admin-settings #content-main .cx-as-asset {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--cx-line) 70%, transparent);
  border-radius: 10px;
  background: var(--body-bg, #fff);
}

body.cx-admin-settings #content-main .cx-as-asset__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  border-radius: 8px;
  background: var(--darkened-bg, #f4f0e8);
}

body.cx-admin-settings #content-main .cx-as-asset__stage--plain {
  border: 1px dashed var(--cx-line);
  background: #fff;
}

body.cx-admin-settings #content-main .cx-as-asset__stage--dark {
  background: #23201b;
}

body.cx-admin-settings #content-main .cx-as-asset__stage img {
  max-width: 70%;
  max-height: 64px;
  object-fit: contain;
}

body.cx-admin-settings #content-main .cx-as-asset__stage:is(.cx-as-asset__stage--plain, .cx-as-asset__stage--dark) img {
  width: 32px;
  height: 32px;
}

body.cx-admin-settings #content-main .cx-as-asset__empty {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-admin-settings #content-main .cx-as-asset__stage--dark .cx-as-asset__empty {
  color: #cfc6b5;
}

body.cx-admin-settings #content-main .cx-as-asset__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-admin-settings #content-main .cx-as-asset__label {
  color: var(--body-fg, #333);
  font-size: 0.875rem;
  font-weight: 600;
}

body.cx-admin-settings #content-main .cx-as-asset__file {
  color: var(--cx-muted);
  font-size: 0.78125rem;
  overflow-wrap: anywhere;
}

body.cx-admin-settings #content-main .cx-as-asset__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The file input stays focusable for keyboard users but is drawn by its label. */
body.cx-admin-settings #content-main input.cx-as-asset__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.cx-admin-settings #content-main .cx-as-asset__actions:has(input.cx-as-asset__input:focus-visible) label.cx-as-btn {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-admin-settings #content-main :is(.cx-as-asset__remove, .cx-as-asset__removed button) {
  margin: 0;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--cx-delete-fg);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

body.cx-admin-settings #content-main .cx-as-asset__remove[hidden] {
  display: none;
}

body.cx-admin-settings #content-main .cx-as-asset__removed button {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-admin-settings #content-main .cx-as-asset__removed {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: var(--cx-delete-fg);
  font-size: 0.8125rem;
}

body.cx-admin-settings #content-main .cx-as-asset__removed[hidden] {
  display: none;
}

body.cx-admin-settings #content-main .cx-as-asset__note {
  margin: 0;
  padding: 0;
  color: var(--cx-muted);
  font-size: 0.78125rem;
  line-height: 1.4;
}

/* ---- Composer and banner HTML ---- */
body.cx-admin-settings #content-main textarea.cx-code-input {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, Menlo, Consolas, monospace !important; /* field fonts are !important */
  font-size: 0.78125rem !important;
  line-height: 1.6 !important;
  resize: vertical;
}

body.cx-admin-settings #content-main .cx-as-send {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--cx-line) 70%, transparent);
  border-radius: 10px;
  background: var(--darkened-bg, #f8f4ec);
}

body.cx-admin-settings #content-main .cx-as-send > svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--cx-muted);
}

body.cx-admin-settings #content-main .cx-as-send__text {
  flex: 1;
  color: var(--body-fg, #333);
  font-size: 0.84375rem;
  line-height: 1.45;
}

body.cx-admin-settings #content-main .cx-as-send__text strong {
  font-weight: 600;
}

body.cx-admin-settings #content-main button.cx-as-send__button {
  flex: none;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

body.cx-admin-settings #content-main button.cx-as-send__button:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 767px) {
  body.cx-admin-settings #content-main :is(.cx-as-send, .cx-as-card-head--action) {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- Legal banners ---- */
body.cx-admin-settings #content-main .cx-as-banner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--cx-line) 70%, transparent);
  border-radius: 10px;
  background: var(--body-bg, #fff);
}

body.cx-admin-settings #content-main .cx-as-banner__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.cx-admin-settings #content-main .cx-as-banner__title {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-admin-settings #content-main .cx-as-banner__name {
  color: var(--body-fg, #333);
  font-size: 0.9375rem;
  font-weight: 600;
}

body.cx-admin-settings #content-main .cx-as-banner__meta {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-admin-settings #content-main .cx-as-banner__meta a,
body.cx-admin-settings #content-main .cx-as-banner__meta a:visited {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
  text-decoration: none;
}

body.cx-admin-settings #content-main .cx-as-banner__head .cx-field__check {
  min-height: 0;
}

body.cx-admin-settings #content-main .cx-as-label {
  display: block;
  margin-bottom: 6px;
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.cx-admin-settings #content-main .cx-as-banner__preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cx-muted) 30%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--cx-muted) 9%, var(--body-bg, #fff));
  transition: opacity 0.15s ease;
}

body.cx-admin-settings #content-main .cx-as-banner__preview.is-off {
  opacity: 0.55;
}

body.cx-admin-settings #content-main .cx-as-banner__preview > svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cx-muted);
}

body.cx-admin-settings #content-main .cx-as-banner__preview-text {
  flex: 1;
  color: var(--body-fg, #333);
  font-size: 0.84375rem;
  line-height: 1.45;
}

body.cx-admin-settings #content-main .cx-as-banner__preview-text a {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
}

body.cx-admin-settings #content-main .cx-as-banner__dismiss {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--cx-line);
  border-radius: 6px;
  background: var(--body-bg, #fff);
  color: var(--cx-label-color);
  font-size: 0.78125rem;
  font-weight: 600;
}

/* ---- Rail ---- */
body.cx-admin-settings #content-main .cx-as-reach {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.cx-admin-settings #content-main .cx-as-reach__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.84375rem;
}

body.cx-admin-settings #content-main .cx-as-reach__row > span:last-child {
  color: var(--cx-muted);
}

body.cx-admin-settings #content-main :is(.cx-as-rail-empty, .cx-as-steps) {
  margin: 0;
  color: var(--body-fg, #333);
  font-size: 0.84375rem;
  line-height: 1.45;
}

body.cx-admin-settings #content-main .cx-as-rail-empty {
  padding: 0;
}

body.cx-admin-settings #content-main .cx-as-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
}

body.cx-admin-settings #content-main .cx-as-steps li {
  list-style: decimal;
}

body.cx-admin-settings #content-main .cx-legal-list-rows a,
body.cx-admin-settings #content-main .cx-legal-list-rows a:visited {
  font-weight: 600;
  white-space: nowrap;
}

/* Rich text (Quill 2, snow theme; admin_settings_page.js) for the service notice and the banner
   texts: the cx field look, a quiet toolbar, theme colours for icons, and Edit HTML below. */
body.cx-admin-settings #content-main .cx-field__control:has(> .cx-rich) {
  flex-direction: column;
  align-items: stretch;
}

body.cx-admin-settings #content-main .cx-rich {
  min-width: 0;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: var(--body-bg, #fff);
}

body.cx-admin-settings #content-main :is(.cx-rich[hidden], textarea[data-rich-text][hidden]) {
  display: none !important;
}

body.cx-admin-settings #content-main .cx-rich:focus-within {
  border-color: var(--cx-muted);
}

body.cx-admin-settings #content-main .cx-rich .ql-toolbar.ql-snow {
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--cx-line);
  border-radius: 8px 8px 0 0;
  background: var(--darkened-bg, #f8f4ec);
  font-family: inherit;
}

body.cx-admin-settings #content-main .cx-rich .ql-toolbar.ql-snow button {
  width: 30px;
  height: 28px;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
}

body.cx-admin-settings #content-main .cx-rich .ql-toolbar.ql-snow button:is(:hover, :focus-visible, .ql-active) {
  background: color-mix(in srgb, var(--cx-muted) 14%, transparent);
}

body.cx-admin-settings #content-main .cx-rich .ql-snow .ql-stroke {
  stroke: var(--cx-label-color);
}

body.cx-admin-settings #content-main .cx-rich .ql-snow .ql-fill {
  fill: var(--cx-label-color);
}

body.cx-admin-settings #content-main .cx-rich .ql-snow :is(button:hover, button:focus-visible, button.ql-active) .ql-stroke {
  stroke: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-admin-settings #content-main .cx-rich .ql-snow :is(button:hover, button:focus-visible, button.ql-active) .ql-fill {
  fill: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-admin-settings #content-main .cx-rich .ql-container.ql-snow {
  border: 0;
  color: var(--body-fg, #333);
  font-family: inherit;
  font-size: 0.875rem;
}

body.cx-admin-settings #content-main .cx-rich .ql-editor {
  min-height: 180px;
  padding: 12px 14px;
  line-height: 1.6;
}

body.cx-admin-settings #content-main .cx-rich--inline .ql-editor {
  min-height: 0;
  padding: 10px 12px;
}

body.cx-admin-settings #content-main .cx-rich .ql-editor p {
  margin: 0 0 0.75em;
}

body.cx-admin-settings #content-main .cx-rich .ql-editor p:last-child {
  margin-bottom: 0;
}

body.cx-admin-settings #content-main .cx-rich .ql-editor a {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
}

/* Link box: the theme's grey tooltip in the page's colours. */
body.cx-admin-settings #content-main .cx-rich .ql-snow .ql-tooltip {
  z-index: 5;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: var(--body-bg, #fff);
  box-shadow: 0 4px 16px rgba(31, 28, 23, 0.12);
  color: var(--body-fg, #333);
  font-family: inherit;
  font-size: 0.8125rem;
}

body.cx-admin-settings #content-main .cx-rich .ql-snow .ql-tooltip input[type="text"] {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--cx-line);
  border-radius: 6px;
  font-size: 0.8125rem;
}

body.cx-admin-settings #content-main .cx-rich .ql-snow .ql-tooltip a {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-admin-settings #content-main .cx-rich__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

body.cx-admin-settings #content-main button.cx-rich__toggle {
  margin: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font: inherit;
  font-size: 0.78125rem;
  font-weight: 600;
  cursor: pointer;
}

body.cx-admin-settings #content-main button.cx-rich__toggle:is(:hover, :focus-visible) {
  text-decoration: underline;
}

/* On pills (Admin settings banners, the legal list rail): the same green as the Live and
   success badges, so an active banner reads at a glance. */
body.cx-legal #content-main .cx-legal-state.is-on {
  background: #d4edda;
  color: #155724;
}

/* An open row menu sits in a pinned (sticky, z-index 1) cell, so the pinned cells of the rows
   below painted over its list; lift the open one above them. */
body.cx-list #content-main #result_list td.cx-row-menu-cell:has(.cx-menu__btn[aria-expanded="true"]) {
  z-index: 3;
}

/* No What's changed entry for the live version (core/legal_changes.py): a quiet amber hint on
   the legal versions rail and on each Admin settings banner. */
body.cx-legal #content-main :is(.cx-legal-rail-warn, .cx-as-banner__warn) {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cx-unsaved) 12%, var(--body-bg, #fff));
  color: color-mix(in srgb, var(--cx-unsaved) 55%, var(--body-fg, #333));
  font-size: 0.78125rem;
  line-height: 1.45;
}

/* After a legal change: file names and the legal_changes.py link in the steps. */
body.cx-admin-settings #content-main .cx-as-steps code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

body.cx-admin-settings #content-main .cx-as-steps a,
body.cx-admin-settings #content-main .cx-as-steps a:visited {
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  font-weight: 600;
}

/* Banner reach bar: a <progress> (no inline width style), drawn like .cx-legal-bar. */
body.cx-admin-settings #content-main progress.cx-as-meter {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cx-line) 70%, transparent);
  color: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  -webkit-appearance: none;
  appearance: none;
}

body.cx-admin-settings #content-main progress.cx-as-meter::-webkit-progress-bar {
  background: transparent;
}

body.cx-admin-settings #content-main progress.cx-as-meter::-webkit-progress-value {
  border-radius: 999px;
  background: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-admin-settings #content-main progress.cx-as-meter::-moz-progress-bar {
  border-radius: 999px;
  background: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}


/* ===========================================
   CLIENT DASHBOARD (tenant home, body.cx-dashboard)
   templates/admin/core/includes/client_dashboard.html, data core/dashboard.py.
   Tiles, task / project / item rows, the condition bar and the rail cards.
   =========================================== */

body.cx-dashboard {
  --cx-dash-red-bg: #f8e1dc;
  --cx-dash-red-fg: #8f2a19;
  --cx-dash-amber-bg: #f8ecd4;
  --cx-dash-amber-fg: #6e4a10;
  --cx-dash-orange-bg: #fbe3d0;
  --cx-dash-orange-fg: #8a3f12;
  --cx-dash-grey-bg: #eeeae2;
  --cx-dash-grey-fg: #5c5446;
  --cx-dash-green-bg: #e7eee4;
  --cx-dash-green-fg: #2a3d2a;
  --cx-dash-blue-bg: #dbe8f6;
  --cx-dash-blue-fg: #1f4f80;
  --cx-dash-excellent: #2a3d2a;
  --cx-dash-good: #6f8f5e;
  --cx-dash-fair: #c9a24a;
  --cx-dash-poor: #c9772b;
  --cx-dash-critical: #a3321f;
  --cx-dash-pending: #b8ad99;
  --cx-dash-restore: #7a6a52;
  --cx-dash-waiting-bg: #fbf3e2;
  --cx-dash-waiting-line: #ead9b4;
  --cx-dash-waiting-edge: #d4a94a;
  --cx-dash-note-link: #b8402f;
  --cx-dash-avatar-sage: #e2e9dc;
  --cx-dash-avatar-sand: #efe3cf;
  --cx-dash-avatar-lilac: #e5e1ee;
  --cx-dash-avatar-sky: #dde7ee;
  --cx-dash-avatar-fg: #2a3d2a;
}

html[data-theme="dark"] body.cx-dashboard {
  --cx-dash-red-bg: rgba(229, 115, 115, 0.16);
  --cx-dash-red-fg: #f0a8a0;
  --cx-dash-amber-bg: rgba(224, 165, 38, 0.16);
  --cx-dash-amber-fg: #f0c870;
  --cx-dash-orange-bg: rgba(201, 119, 43, 0.18);
  --cx-dash-orange-fg: #f0b07a;
  --cx-dash-grey-bg: rgba(240, 234, 216, 0.08);
  --cx-dash-grey-fg: #cfc6b2;
  --cx-dash-green-bg: rgba(143, 176, 127, 0.18);
  --cx-dash-green-fg: #b5d3a8;
  --cx-dash-blue-bg: rgba(110, 160, 215, 0.18);
  --cx-dash-blue-fg: #a9c9ec;
  --cx-dash-excellent: #8fb07f;
  --cx-dash-critical: #e07060;
  --cx-dash-pending: #8a8170;
  --cx-dash-restore: #b9a684;
  --cx-dash-waiting-bg: rgba(212, 169, 74, 0.08);
  --cx-dash-waiting-line: rgba(212, 169, 74, 0.24);
  --cx-dash-note-link: #f0a8a0;
  --cx-dash-avatar-sage: rgba(143, 176, 127, 0.22);
  --cx-dash-avatar-sand: rgba(224, 190, 130, 0.2);
  --cx-dash-avatar-lilac: rgba(170, 155, 210, 0.22);
  --cx-dash-avatar-sky: rgba(140, 180, 210, 0.2);
  --cx-dash-avatar-fg: #ece4cf;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-dashboard {
    --cx-dash-red-bg: rgba(229, 115, 115, 0.16);
    --cx-dash-red-fg: #f0a8a0;
    --cx-dash-amber-bg: rgba(224, 165, 38, 0.16);
    --cx-dash-amber-fg: #f0c870;
    --cx-dash-orange-bg: rgba(201, 119, 43, 0.18);
    --cx-dash-orange-fg: #f0b07a;
    --cx-dash-grey-bg: rgba(240, 234, 216, 0.08);
    --cx-dash-grey-fg: #cfc6b2;
    --cx-dash-green-bg: rgba(143, 176, 127, 0.18);
    --cx-dash-green-fg: #b5d3a8;
    --cx-dash-blue-bg: rgba(110, 160, 215, 0.18);
    --cx-dash-blue-fg: #a9c9ec;
    --cx-dash-excellent: #8fb07f;
    --cx-dash-critical: #e07060;
    --cx-dash-pending: #8a8170;
    --cx-dash-restore: #b9a684;
    --cx-dash-waiting-bg: rgba(212, 169, 74, 0.08);
    --cx-dash-waiting-line: rgba(212, 169, 74, 0.24);
    --cx-dash-note-link: #f0a8a0;
    --cx-dash-avatar-sage: rgba(143, 176, 127, 0.22);
    --cx-dash-avatar-sand: rgba(224, 190, 130, 0.2);
    --cx-dash-avatar-lilac: rgba(170, 155, 210, 0.22);
    --cx-dash-avatar-sky: rgba(140, 180, 210, 0.2);
    --cx-dash-avatar-fg: #ece4cf;
  }
}

/* Greeting: the cx header without a thumbnail, a larger title. */
body.cx-dashboard #content .cx-dash-head {
  align-items: flex-end;
  margin-bottom: 28px;
}

body.cx-dashboard #content .cx-dash-head .cx-header__eyebrow {
  margin: 0;
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.cx-dashboard #content .cx-dash-head h1.cx-header__title {
  font-family: 'Fraunces', serif;
  font-size: 2rem !important;
  font-weight: 600;
}

body.cx-dashboard #content .cx-dash-head .cx-header__meta {
  font-size: 0.9375rem;
}

/* Links inside cards: plain text links, underlined on hover. */
body.cx-dashboard #content-main :is(.cx-dash-rows, .cx-dash-people, .cx-dash-org-row, .cx-dash-review) a,
body.cx-dashboard #content-main a.cx-dash-more,
body.cx-dashboard #content-main .cx-dash-org-head a {
  color: var(--cx-accent);
  font-weight: 600;
  text-decoration: none;
}

body.cx-dashboard #content-main :is(.cx-dash-rows, .cx-dash-people, .cx-dash-org-row, .cx-dash-review) a:hover,
body.cx-dashboard #content-main a.cx-dash-more:hover,
body.cx-dashboard #content-main .cx-dash-org-head a:hover {
  text-decoration: underline;
}

/* ---- Tiles ---- */
body.cx-dashboard #content-main .cx-dash-tiles {
  display: grid;
  grid-template-columns: repeat(var(--cx-dash-cols, 5), minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 var(--cx-gap);
}

body.cx-dashboard #content-main .cx-dash-tiles--1 { --cx-dash-cols: 1; }
body.cx-dashboard #content-main .cx-dash-tiles--2 { --cx-dash-cols: 2; }
body.cx-dashboard #content-main .cx-dash-tiles--3 { --cx-dash-cols: 3; }
body.cx-dashboard #content-main .cx-dash-tiles--4 { --cx-dash-cols: 4; }

@media (max-width: 1199px) {
  body.cx-dashboard #content-main .cx-dash-tiles {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}

@media (max-width: 767px) {
  body.cx-dashboard #content-main .cx-dash-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.cx-dashboard #content-main :is(a.cx-dash-tile, div.cx-dash-tile--split) {
    min-height: 0;
    padding: 14px;
  }

  body.cx-dashboard #content-main .cx-dash-tile__count {
    font-size: 1.75rem;
  }
}

body.cx-dashboard #content-main a.cx-dash-tile,
body.cx-dashboard #content-main a.cx-dash-tile:visited,
body.cx-dashboard #content-main div.cx-dash-tile--split {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  min-height: 124px;
  padding: 16px;
  border: 1px solid var(--custodia-card-border-color, var(--cx-line));
  border-radius: var(--cx-card-radius);
  background: var(--custodia-card-bg, var(--body-bg));
  box-shadow: var(--custodia-card-shadow, none);
  color: var(--body-fg);
  text-decoration: none;
}

body.cx-dashboard #content-main a.cx-dash-tile:hover,
body.cx-dashboard #content-main a.cx-dash-tile:focus-visible,
body.cx-dashboard #content-main div.cx-dash-tile--split:is(:hover, :focus-within) {
  border-color: var(--cx-muted);
}

/* Split tile (Needs restoration): the tile link is stretched over the whole tile and the note
   is its own link on top, to a narrower list. */
body.cx-dashboard #content-main div.cx-dash-tile--split {
  position: relative;
}

body.cx-dashboard #content-main a.cx-dash-tile__link,
body.cx-dashboard #content-main a.cx-dash-tile__link:visited {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

body.cx-dashboard #content-main a.cx-dash-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

body.cx-dashboard #content-main a.cx-dash-tile__link:focus-visible {
  outline: none;
}

body.cx-dashboard #content-main a.cx-dash-tile__link:focus-visible::after {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-dashboard #content-main a.cx-dash-tile__note-link,
body.cx-dashboard #content-main a.cx-dash-tile__note-link:visited {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  color: var(--cx-dash-note-link);
  font-weight: 600;
  text-decoration: none;
}

body.cx-dashboard #content-main a.cx-dash-tile__note-link:hover {
  text-decoration: underline;
}

body.cx-dashboard #content-main .cx-dash-tile__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cx-label-color);
  font-size: 0.8125rem;
  font-weight: 600;
}

body.cx-dashboard #content-main .cx-dash-tile__count {
  font-family: 'Fraunces', serif;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
}

body.cx-dashboard #content-main .cx-dash-tile--red .cx-dash-tile__count { color: var(--cx-dash-red-fg); }
body.cx-dashboard #content-main .cx-dash-tile--amber .cx-dash-tile__count { color: var(--cx-dash-amber-fg); }
body.cx-dashboard #content-main .cx-dash-tile--calm .cx-dash-tile__count { color: var(--cx-dash-green-fg); }

body.cx-dashboard #content-main .cx-dash-tile__note {
  color: var(--cx-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Colour dots and bar fills, one per condition (and the other tiles). */
body.cx-dashboard #content-main .cx-dash-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--cx-dash-pending);
}

body.cx-dashboard #content-main .cx-dash-legend .cx-dash-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

body.cx-dashboard #content-main .cx-dash-dot--excellent { background: var(--cx-dash-excellent); }
body.cx-dashboard #content-main .cx-dash-dot--good,
body.cx-dashboard #content-main .cx-dash-dot--task { background: var(--cx-dash-good); }
body.cx-dashboard #content-main .cx-dash-dot--fair,
body.cx-dashboard #content-main .cx-dash-dot--pending { background: var(--cx-dash-fair); }
body.cx-dashboard #content-main .cx-dash-dot--poor { background: var(--cx-dash-poor); }
body.cx-dashboard #content-main .cx-dash-dot--critical { background: var(--cx-dash-critical); }
body.cx-dashboard #content-main .cx-dash-dot--pending_review { background: var(--cx-dash-pending); }
body.cx-dashboard #content-main .cx-dash-dot--restore { background: var(--cx-dash-restore); }
body.cx-dashboard #content-main .cx-dash-dot--project { background: var(--cx-dash-excellent); }

/* ---- Cards ---- */
body.cx-dashboard #content-main .cx-dash-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

body.cx-dashboard #content-main .cx-dash-card-note,
body.cx-dashboard #content-main .cx-dash-rail-head small {
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

body.cx-dashboard #content-main .cx-dash-rail-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.cx-dashboard #content-main .cx-dash-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 9px;
  background: var(--cx-chip-bg);
}

body.cx-dashboard #content-main .cx-dash-switch :is(a, span) {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  color: var(--cx-chip-fg);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

body.cx-dashboard #content-main .cx-dash-switch a[aria-current="true"] {
  background: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  color: #fff;
  font-weight: 600;
}

body.cx-dashboard #content-main .cx-dash-rows,
body.cx-dashboard #content-main .cx-dash-people,
body.cx-dashboard #content-main .cx-dash-legend {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-dashboard #content-main .cx-dash-rows > li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--cx-line);
  list-style: none;
}

body.cx-dashboard #content-main .cx-dash-row__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.cx-dashboard #content-main .cx-dash-rows .cx-dash-row__text > a {
  color: var(--body-fg);
  font-size: 0.9rem;
}

body.cx-dashboard #content-main .cx-dash-row__text small,
body.cx-dashboard #content-main .cx-dash-project__progress small,
body.cx-dashboard #content-main .cx-dash-project__due small {
  color: var(--cx-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

body.cx-dashboard #content-main a.cx-dash-more {
  align-self: flex-start;
  font-size: 0.8125rem;
}

body.cx-dashboard #content-main .cx-dash-clear {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--cx-dash-green-bg);
  color: var(--cx-dash-green-fg);
  font-size: 0.875rem;
}

body.cx-dashboard #content-main .cx-dash-clear svg {
  flex: none;
  width: 20px;
  height: 20px;
}

body.cx-dashboard #content-main .cx-dash-quiet {
  margin: 0;
  color: var(--cx-muted);
  font-size: 0.8125rem;
}

/* Chips: due dates, statuses, conditions. */
body.cx-dashboard #content-main .cx-dash-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--cx-dash-grey-bg);
  color: var(--cx-dash-grey-fg);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

body.cx-dashboard #content-main .cx-dash-chip--small {
  height: 22px;
  padding: 0 8px;
  font-size: 0.75rem;
}

body.cx-dashboard #content-main .cx-dash-chip--red { background: var(--cx-dash-red-bg); color: var(--cx-dash-red-fg); }
body.cx-dashboard #content-main .cx-dash-chip--amber { background: var(--cx-dash-amber-bg); color: var(--cx-dash-amber-fg); }
/* Poor condition: orange, as its dot and bar, so it doesn't read as Fair's amber. */
body.cx-dashboard #content-main .cx-dash-chip--orange { background: var(--cx-dash-orange-bg); color: var(--cx-dash-orange-fg); }
body.cx-dashboard #content-main .cx-dash-chip--green { background: var(--cx-dash-green-bg); color: var(--cx-dash-green-fg); }
body.cx-dashboard #content-main .cx-dash-chip--blue { background: var(--cx-dash-blue-bg); color: var(--cx-dash-blue-fg); }

/* Task tick box: the cx checkbox look. */
body.cx-dashboard #content-main .cx-dash-task__done {
  display: flex;
  flex: none;
  margin: 0;
}

/* The round done tick of the Project Tasks list (PROJECT TASKS LIST): an empty ring, red
   when overdue, with a faint tick on hover / focus. */
body.cx-dashboard {
  --cx-tick-preview: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7d68' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --cx-tick-preview-overdue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b1c14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

html[data-theme="dark"] body.cx-dashboard {
  --cx-tick-preview: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39884' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --cx-tick-preview-overdue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0a39b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-dashboard {
    --cx-tick-preview: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39884' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --cx-tick-preview-overdue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0a39b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }
}

body.cx-dashboard #content-main .cx-dash-task__done input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--cx-switch-off);
  border-radius: 999px;
  background: transparent center / 13px 13px no-repeat;
  cursor: pointer;
}

body.cx-dashboard #content-main .cx-dash-task__done input[type="checkbox"]:checked {
  border-color: var(--cx-accent);
  background-color: var(--cx-accent);
  background-image: var(--cx-tick-icon);
}

body.cx-dashboard #content-main .cx-dash-task__done input[data-state="overdue"]:not(:checked) {
  border-color: var(--cx-dash-red-fg);
  background-color: color-mix(in srgb, var(--cx-dash-red-fg) 9%, transparent);
}

body.cx-dashboard #content-main .cx-dash-task__done input:not(:checked):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--cx-accent) 70%, var(--cx-switch-off));
  background-image: var(--cx-tick-preview);
}

body.cx-dashboard #content-main .cx-dash-task__done input[data-state="overdue"]:not(:checked):is(:hover, :focus-visible) {
  border-color: var(--cx-dash-red-fg);
  background-image: var(--cx-tick-preview-overdue);
}

/* Project rows: name and status, task progress, due date. */
body.cx-dashboard #content-main .cx-dash-rows > li.cx-dash-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 140px;
  gap: 18px;
}

body.cx-dashboard #content-main .cx-dash-project__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 2px;
  color: var(--cx-muted);
  font-size: 0.78rem;
}

body.cx-dashboard #content-main .cx-dash-project__progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.cx-dashboard #content-main progress.cx-dash-meter {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cx-line) 70%, transparent);
  -webkit-appearance: none;
  appearance: none;
}

body.cx-dashboard #content-main progress.cx-dash-meter::-webkit-progress-bar {
  background: transparent;
}

body.cx-dashboard #content-main progress.cx-dash-meter::-webkit-progress-value {
  border-radius: 999px;
  background: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-dashboard #content-main progress.cx-dash-meter::-moz-progress-bar {
  border-radius: 999px;
  background: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
}

body.cx-dashboard #content-main .cx-dash-project__due {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

body.cx-dashboard #content-main .cx-dash-project__due strong {
  font-size: 0.85rem;
  font-weight: 600;
}

body.cx-dashboard #content-main .cx-dash-project__due.is-overdue strong {
  color: var(--cx-dash-red-fg);
}

@media (max-width: 767px) {
  body.cx-dashboard #content-main .cx-dash-rows > li.cx-dash-project {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
  }

  body.cx-dashboard #content-main .cx-dash-project__progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Urgent items: thumbnail and title on top, the condition chip and next step under the title. */
  body.cx-dashboard #content-main .cx-dash-rows > li.cx-dash-item {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  body.cx-dashboard #content-main li.cx-dash-item .cx-dash-row__text {
    flex-basis: calc(100% - 58px);
  }

  body.cx-dashboard #content-main li.cx-dash-item .cx-dash-chip {
    margin-left: 58px;
  }

  body.cx-dashboard #content-main li.cx-dash-item .cx-dash-item__next {
    width: auto;
    text-align: left;
  }
}

/* ---- Condition of the collection ---- */
body.cx-dashboard #content-main svg.cx-dash-bar {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 999px;
}

body.cx-dashboard #content-main .cx-dash-fill--excellent { fill: var(--cx-dash-excellent); }
body.cx-dashboard #content-main .cx-dash-fill--good { fill: var(--cx-dash-good); }
body.cx-dashboard #content-main .cx-dash-fill--fair { fill: var(--cx-dash-fair); }
body.cx-dashboard #content-main .cx-dash-fill--poor { fill: var(--cx-dash-poor); }
body.cx-dashboard #content-main .cx-dash-fill--critical { fill: var(--cx-dash-critical); }
body.cx-dashboard #content-main .cx-dash-fill--pending_review { fill: var(--cx-dash-pending); }

body.cx-dashboard #content-main .cx-dash-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.cx-dashboard #content-main .cx-dash-legend li {
  margin: 0;
  list-style: none;
}

body.cx-dashboard #content-main .cx-dash-legend a,
body.cx-dashboard #content-main .cx-dash-legend a:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--cx-chip-border);
  border-radius: 999px;
  background: var(--body-bg, #fff);
  color: var(--cx-chip-fg);
  font-size: 0.8125rem;
  text-decoration: none;
}

body.cx-dashboard #content-main .cx-dash-legend a:hover {
  border-color: var(--cx-muted);
}

body.cx-dashboard #content-main .cx-dash-legend strong {
  color: var(--body-fg);
  font-weight: 600;
}

body.cx-dashboard #content-main .cx-dash-subhead {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cx-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.cx-dashboard #content-main .cx-dash-rows > li.cx-dash-item {
  padding: 10px 0;
}

body.cx-dashboard #content-main .cx-dash-item__thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--cx-thumb-border);
  border-radius: 8px;
  background: var(--cx-thumb-bg);
  color: var(--cx-muted);
}

body.cx-dashboard #content-main .cx-dash-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.cx-dashboard #content-main .cx-dash-item__thumb svg {
  width: 20px;
  height: 20px;
}

body.cx-dashboard #content-main .cx-dash-item__next {
  flex: none;
  width: 120px;
  color: var(--cx-muted);
  font-size: 0.78rem;
  text-align: right;
}

body.cx-dashboard #content-main .cx-dash-review {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--cx-chip-bg);
  font-size: 0.85rem;
}

body.cx-dashboard #content-main .cx-dash-review svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cx-muted);
}

body.cx-dashboard #content-main .cx-dash-review > span {
  flex: 1 1 auto;
}

body.cx-dashboard #content-main .cx-dash-review strong {
  font-weight: 600;
}

body.cx-dashboard #content-main .cx-dash-review a {
  white-space: nowrap;
}

/* Items waiting for a project, on the Restoration projects card: a gold-edged panel. */
body.cx-dashboard #content-main .cx-dash-waiting {
  padding: 12px 14px 2px;
  border: 1px solid var(--cx-dash-waiting-line);
  border-left: 3px solid var(--cx-dash-waiting-edge);
  border-radius: 10px;
  background: var(--cx-dash-waiting-bg);
}

body.cx-dashboard #content-main .cx-dash-waiting__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body.cx-dashboard #content-main .cx-dash-waiting .cx-dash-rows > li {
  border-top-color: var(--cx-dash-waiting-line);
}

/* ---- Rail ---- */
body.cx-dashboard #content-main .cx-dash-org-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.cx-dashboard #content-main .cx-dash-org-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
}

body.cx-dashboard #content-main .cx-dash-org-head strong {
  font-weight: 600;
}

body.cx-dashboard #content-main .cx-dash-people > li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  font-size: 0.85rem;
}

body.cx-dashboard #content-main .cx-dash-people form {
  margin: 0;
}

body.cx-dashboard #content-main .cx-dash-activity > li {
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--cx-line);
}

body.cx-dashboard #content-main .cx-dash-activity .cx-dash-row__text > span {
  line-height: 1.4;
}

body.cx-dashboard #content-main .cx-dash-activity strong {
  font-weight: 600;
}

body.cx-dashboard #content-main .cx-dash-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--cx-dash-avatar-sand);
  color: var(--cx-dash-avatar-fg);
  font-size: 0.72rem;
  font-weight: 600;
}

body.cx-dashboard #content-main .cx-dash-activity .cx-dash-avatar {
  width: 28px;
  height: 28px;
}

body.cx-dashboard #content-main .cx-dash-avatar--sage { background: var(--cx-dash-avatar-sage); }
body.cx-dashboard #content-main .cx-dash-avatar--lilac { background: var(--cx-dash-avatar-lilac); }
body.cx-dashboard #content-main .cx-dash-avatar--sky { background: var(--cx-dash-avatar-sky); }

body.cx-dashboard #content-main button.cx-dash-small-btn {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--cx-line);
  border-radius: 7px;
  background: var(--body-bg, #fff);
  color: var(--cx-label-color);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

body.cx-dashboard #content-main button.cx-dash-small-btn:hover {
  border-color: var(--cx-muted);
}

body.cx-dashboard #content-main .cx-dash-org-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cx-line);
  font-size: 0.85rem;
}

body.cx-dashboard #content-main .cx-dash-org-row > a {
  flex: none;
  white-space: nowrap;
}

body.cx-dashboard #content-main .cx-dash-org-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

body.cx-dashboard #content-main .cx-dash-month {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

/* The count above its label (dd after dt in the markup); top-aligned when a label wraps. */
body.cx-dashboard #content-main .cx-dash-month > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2px;
}

body.cx-dashboard #content-main .cx-dash-month dt {
  margin: 0;
  color: var(--cx-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

body.cx-dashboard #content-main .cx-dash-month dd {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Curator plan: projects and tasks as a read-only Conservator preview. The pill matches the
   sidebar's Preview badge (admin-custom.css); Hide turns the user's previews off. */
body.cx-dashboard #content-main .cx-dash-preview {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--custodia-gold) 45%, #bbb 55%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--custodia-gold) 15%, var(--body-bg));
  color: color-mix(in srgb, var(--custodia-gold) 62%, #777 38%);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-transform: uppercase;
}

html[data-theme="dark"] body.cx-dashboard #content-main .cx-dash-preview {
  border-color: color-mix(in srgb, var(--custodia-gold) 50%, #555 50%);
  color: color-mix(in srgb, var(--custodia-gold) 75%, #aaa 25%);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.cx-dashboard #content-main .cx-dash-preview {
    border-color: color-mix(in srgb, var(--custodia-gold) 50%, #555 50%);
    color: color-mix(in srgb, var(--custodia-gold) 75%, #aaa 25%);
  }
}

body.cx-dashboard #content-main .cx-dash-card-head .cx-card__title {
  flex: 1 1 auto;
}

body.cx-dashboard #content-main form.cx-dash-hide-preview {
  order: 3;
  margin: 0;
}

body.cx-dashboard #content-main form.cx-dash-hide-preview button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cx-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

body.cx-dashboard #content-main form.cx-dash-hide-preview button:hover,
body.cx-dashboard #content-main form.cx-dash-hide-preview button:focus-visible {
  background: var(--cx-chip-bg);
  color: var(--cx-label-color);
}

body.cx-dashboard #content-main form.cx-dash-hide-preview svg {
  width: 16px;
  height: 16px;
}

body.cx-dashboard #content-main .cx-dash-tile__count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Assigned to you with no open tasks in the user's name: inactive, the reason in its tooltip. */
body.cx-dashboard #content-main .cx-dash-switch span.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The tasks card's toggle and tick links come back to #tasks: clear the sticky top bar. */
body.cx-dashboard #content-main #tasks {
  scroll-margin-top: calc(var(--cx-shell-top, 56px) + 16px);
}

/* Restoration projects band: the project status dot colours (cx-select, PROJECT_STATUS_DOTS):
   planned info, in progress warning, paused neutral, overdue danger. */
body.cx-dashboard #content-main .cx-dash-dot--planned { background: var(--cx-dot-info); }
body.cx-dashboard #content-main .cx-dash-dot--in_progress { background: var(--cx-dot-warning); }
body.cx-dashboard #content-main .cx-dash-dot--paused { background: var(--cx-dot-neutral); }
body.cx-dashboard #content-main .cx-dash-dot--overdue { background: var(--cx-dot-danger); }
body.cx-dashboard #content-main .cx-dash-fill--planned { fill: var(--cx-dot-info); }
body.cx-dashboard #content-main .cx-dash-fill--in_progress { fill: var(--cx-dot-warning); }
body.cx-dashboard #content-main .cx-dash-fill--paused { fill: var(--cx-dot-neutral); }
body.cx-dashboard #content-main .cx-dash-fill--overdue { fill: var(--cx-dot-danger); }

/* Password change pages (registration/password_change_form.html for your own,
   admin/auth/user/change_password.html for another user's): the current password on
   its own row, then the new password and its confirmation side by side. */
body.cx-layout.cx-password-page #content h1.cx-header__title {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 700;
}

body.cx-layout.cx-password-page #content-main .cx-field:is(.field-old_password, .field-new_password1, .field-password1) {
  grid-column: 1;
}

body.cx-layout.cx-password-page #content-main fieldset.cx-card__fields {
  align-items: start;
}

body.cx-layout.cx-password-page #content-main .cx-field .help ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

body.cx-layout.cx-password-page #content-main .cx-field .help li {
  font-size: inherit;
  list-style: disc;
}

/* The submit buttons say more than Save, so they size to their label. */
body.cx-layout.cx-password-page {
  --admin-submit-action-width: auto;
}


/* ===========================================
   SYSADMIN DASHBOARD (global admin home, body.cx-sys-dashboard)
   templates/admin/core/includes/sysadmin_dashboard.html, data core/sysadmin_dashboard.py.
   Builds on CLIENT DASHBOARD: the rows with actions (invoices, trials, coming up, clients to
   check on), last night's run and the platform gauges.
   =========================================== */

/* Header buttons: outlined buttons as tall as the cx-btn--primary beside them (Clients /
   Send service update here, Open portal / Add archive item on the tenant dashboard), with
   the sidebar's Material Symbols icon. */
body.cx-dashboard #content .cx-header__actions a.cx-btn {
  height: 40px;
}

/* Phones: each button takes half the row (less the 8px gap); when one needs more than
   half, both wrap and grow to the full width, so they always match. */
@media (max-width: 767px) {
  body.cx-dashboard #content .cx-header__actions {
    width: 100%;
  }

  body.cx-dashboard #content .cx-header__actions a.cx-btn {
    flex: 1 0 calc(50% - 4px);
    justify-content: center;
  }
}

body.cx-sys-dashboard #content .cx-header__actions .cx-btn .material-symbols-outlined {
  font-size: 17px;
}

body.cx-sys-dashboard #content-main .cx-sys-actions {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

body.cx-sys-dashboard #content-main .cx-sys-actions form {
  display: contents;
}

body.cx-sys-dashboard #content-main :is(a, button).cx-sys-btn,
body.cx-sys-dashboard #content-main a.cx-sys-btn:visited {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 30px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--cx-line);
  border-radius: 7px;
  background: var(--body-bg, #fff);
  color: var(--cx-label-color);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}

body.cx-sys-dashboard #content-main :is(a, button).cx-sys-btn:hover {
  border-color: var(--cx-muted);
  text-decoration: none;
}

body.cx-sys-dashboard #content-main button.cx-sys-btn--primary {
  border-color: transparent;
  background: var(--admin-submit-primary-bg, var(--custodia-moss, #2a3d2a));
  color: #fff;
}

body.cx-sys-dashboard #content-main button.cx-sys-btn--primary:hover {
  border-color: transparent;
  filter: brightness(1.12);
}

/* Invoices: client and number, amount, due chip, actions. */
body.cx-sys-dashboard #content-main .cx-dash-rows > li.cx-sys-invoice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 128px 196px;
  gap: 16px;
}

body.cx-sys-dashboard #content-main a.cx-sys-amount {
  color: var(--body-fg);
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Coming up: date, what happens, kind, next step. */
body.cx-sys-dashboard #content-main .cx-dash-rows > li.cx-sys-event {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 96px 200px;
  gap: 16px;
}

body.cx-sys-dashboard #content-main .cx-sys-when {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.cx-sys-dashboard #content-main .cx-sys-when strong {
  font-size: 0.85rem;
  font-weight: 600;
}

body.cx-sys-dashboard #content-main .cx-sys-when small {
  color: var(--cx-muted);
  font-size: 0.75rem;
}

/* Trials: day of 30 as a short meter. */
body.cx-sys-dashboard #content-main .cx-dash-rows > li.cx-sys-trial {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 130px 128px 210px;
  gap: 14px;
}

body.cx-sys-dashboard #content-main .cx-sys-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.cx-sys-dashboard #content-main .cx-sys-day small {
  color: var(--cx-muted);
  font-size: 0.75rem;
}

body.cx-sys-dashboard #content-main .cx-sys-day.is-late small {
  color: var(--cx-dash-red-fg);
  font-weight: 600;
}

/* Paying clients to check on. */
body.cx-sys-dashboard #content-main .cx-dash-rows > li.cx-sys-health {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  gap: 14px;
}

body.cx-sys-dashboard #content-main :is(.cx-sys-invoice, .cx-sys-event, .cx-sys-trial, .cx-sys-health) .cx-dash-chip {
  justify-self: start;
}

/* Tile dots and the trial band. */
body.cx-sys-dashboard #content-main .cx-dash-fill--early { fill: var(--cx-dash-good); }
body.cx-sys-dashboard #content-main .cx-dash-fill--late { fill: var(--cx-dash-fair); }
body.cx-sys-dashboard #content-main .cx-dash-fill--grace { fill: var(--cx-dash-critical); }
body.cx-sys-dashboard #content-main .cx-dash-dot--early { background: var(--cx-dash-good); }
body.cx-sys-dashboard #content-main .cx-dash-dot--late { background: var(--cx-dash-fair); }
body.cx-sys-dashboard #content-main :is(.cx-dash-dot--grace, .cx-dash-dot--money) { background: var(--cx-dash-critical); }
body.cx-sys-dashboard #content-main .cx-dash-dot--renew { background: var(--cx-dash-blue-fg); }
body.cx-sys-dashboard #content-main .cx-dash-dot--revenue { background: var(--cx-dash-excellent); }

/* Five tiles: one row down to tablet width rather than one left alone. */
@media (min-width: 768px) and (max-width: 1199px) {
  body.cx-sys-dashboard #content-main .cx-dash-tiles {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }
}

/* Last night's run: one line per step, a tick or a cross. */
body.cx-sys-dashboard #content-main .cx-sys-run {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.cx-sys-dashboard #content-main .cx-sys-run > li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 0;
  font-size: 0.85rem;
  list-style: none;
}

body.cx-sys-dashboard #content-main .cx-sys-run > li + li {
  border-top: 1px solid var(--cx-line);
}

body.cx-sys-dashboard #content-main .cx-sys-run__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--cx-dash-green-bg);
  color: var(--cx-dash-green-fg);
}

body.cx-sys-dashboard #content-main .cx-sys-run__icon.is-failed {
  background: var(--cx-dash-red-bg);
  color: var(--cx-dash-red-fg);
}

body.cx-sys-dashboard #content-main .cx-sys-run__icon svg {
  width: 12px;
  height: 12px;
}

body.cx-sys-dashboard #content-main .cx-sys-run__step {
  flex: none;
}

body.cx-sys-dashboard #content-main .cx-sys-run small {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--cx-muted);
  font-size: 0.78rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Platform: a status line and label / value rows. */
body.cx-sys-dashboard #content-main .cx-sys-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cx-dash-green-bg);
  color: var(--cx-dash-green-fg);
  font-size: 0.8125rem;
}

body.cx-sys-dashboard #content-main .cx-sys-status--warn {
  background: var(--cx-dash-amber-bg);
  color: var(--cx-dash-amber-fg);
}

body.cx-sys-dashboard #content-main .cx-sys-status svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Maintenance switches: label and note, then an on/off switch that submits its form. */
body.cx-sys-dashboard #content-main .cx-sys-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

body.cx-sys-dashboard #content-main .cx-sys-switch__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 0.85rem;
}

body.cx-sys-dashboard #content-main .cx-sys-switch__text small {
  color: var(--cx-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

body.cx-sys-dashboard #content-main .cx-sys-switch__btn {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cx-switch-off);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

body.cx-sys-dashboard #content-main .cx-sys-switch__btn::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--cx-switch-knob);
  box-shadow: 0 1px 2px rgba(31, 28, 23, 0.25);
  transition: transform 0.15s ease;
}

body.cx-sys-dashboard #content-main .cx-sys-switch__btn[aria-checked="true"] {
  background: var(--cx-accent);
}

body.cx-sys-dashboard #content-main .cx-sys-switch__btn[aria-checked="true"]::before {
  transform: translateX(18px);
}

body.cx-sys-dashboard #content-main .cx-sys-switch__btn:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

body.cx-sys-dashboard #content-main .cx-sys-switch__btn:disabled {
  opacity: 0.55;
  cursor: default;
}

body.cx-sys-dashboard #content-main .cx-sys-gauge {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
}

body.cx-sys-dashboard #content-main .cx-sys-gauge__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

body.cx-sys-dashboard #content-main .cx-sys-gauge__row small {
  color: var(--cx-muted);
  font-size: 0.78rem;
  text-align: right;
}

body.cx-sys-dashboard #content-main .cx-sys-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Narrow: the rows wrap, actions to the right. */
@media (max-width: 1100px) {
  body.cx-sys-dashboard #content-main .cx-dash-rows > li:is(.cx-sys-invoice, .cx-sys-event, .cx-sys-trial, .cx-sys-health) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  body.cx-sys-dashboard #content-main li:is(.cx-sys-invoice, .cx-sys-event, .cx-sys-trial) .cx-dash-row__text {
    flex: 1 1 60%;
  }

  body.cx-sys-dashboard #content-main li .cx-sys-actions {
    margin-left: auto;
  }
}