/* Nepean (CWS) file: _main.css */
/*
  Name: Nepean
  Description: Warm, modern, calm. Built on Riverlea core; only overrides what it needs to.

  Structure:
    1. Palette: Nepean's defaults (a jacaranda violet on warm neutrals)
    2. Riverlea variable overrides, in the same order as core/_variables.css
    3. Component refinements that variables can't reach

  Customising: use Administer > Customize Data and Screens > Theme Settings >
  "Copy and edit". Every rule in section 3 reads Riverlea's standard variables
  (--crm-primary-color, --crm-paper, --crm-text-color ...), and the tints below
  are derived from them, so the editor's colour pickers reach the whole layout.
  Extras the editor doesn't expose (--nepean-highlight, --nepean-brand, fonts)
  can be overridden in its custom CSS box or in a stream's `vars`.
*/

/* 1. PALETTE ------------------------------------------------------------- */
:root {
  /* Accent: main buttons and active states */
  --nepean-accent: #5b47c2;
  --nepean-accent-hover: #4a37a8;
  --nepean-accent-ink: #4a37a8;
  --nepean-accent-text: #ffffff;
  /* Derived from whatever primary colour is in force */
  --nepean-accent-soft: color-mix(in srgb, var(--crm-primary-color) 11%, var(--crm-paper));
  /* Decorative only (icons, focus rings, avatar ring); never carries text */
  --nepean-brand: var(--crm-primary-color);

  /* Highlight, used sparingly (count on the current tab) */
  --nepean-highlight: #f2c14e;
  --nepean-highlight-soft: #fdf3d8;
  --nepean-highlight-ink: #2b2833;
  /* Tags */
  --nepean-warm: #b85e33;
  --nepean-warm-soft: #fbeee6;

  /* Warm neutrals with a faint violet bias */
  --nepean-ground: #f5f3f0;
  --nepean-paper: #ffffff;
  --nepean-layer: #f0ede9;
  --nepean-layer-2: #e8e4de;
  --nepean-line: #e6e1da;
  --nepean-line-strong: color-mix(in srgb, var(--crm-border-color) 78%, var(--crm-text-color));
  --nepean-text: #2b2833;
  --nepean-muted: #6f6879;
  --nepean-menubar: #241d33;

  /* Fonts (self-hosted in fonts/, SIL Open Font Licence) */
  --nepean-font-display: "Montserrat", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --nepean-font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --nepean-radius: 8px;
  --nepean-radius-card: 12px;
  --nepean-shadow: 0 1px 2px rgba(36,29,51,.05), 0 4px 16px rgba(36,29,51,.05);
  --nepean-shadow-pop: 0 12px 40px rgba(36,29,51,.18);
}
/* 2. RIVERLEA VARIABLES -------------------------------------------------- */
:root {
/* Colour names */
  --crm-c-gray-025: #fbfaf8;
  --crm-c-gray-050: var(--nepean-layer);
  --crm-c-gray-100: var(--nepean-layer-2);
  --crm-c-gray-200: #ddd7cf;
  --crm-c-gray-300: var(--nepean-line-strong);
  --crm-c-gray-400: #b3aba1;
  --crm-c-gray-700: var(--nepean-muted);
  --crm-c-green-dark: #2f7d5b;
  --crm-c-red-dark: #b4374a;
  --crm-c-amber: #9a5410;
  --crm-c-blue-dark: #3c5db8;
  --crm-c-yellow-light: var(--nepean-accent-soft);

/* Practical colours */
  --crm-text-dark-color: var(--nepean-text);
  --crm-text-color: var(--nepean-text);
  --crm-link-color: var(--nepean-accent-ink);
  --crm-link-hover-color: var(--nepean-accent-hover);
  --crm-focus-color: var(--nepean-brand);
  --crm-paper: var(--nepean-paper);
  --crm-inactive-color: var(--nepean-muted);

/* Backgrounds */
  --crm-page-bg-color: var(--nepean-ground);
  --crm-container-bg-color: var(--nepean-ground);
  --crm-layer1-bg-color: var(--nepean-layer);
  --crm-layer2-bg-color: var(--nepean-layer-2);
  --crm-inverse-bg-color: var(--nepean-menubar);
  --crm-border-color: var(--nepean-line);

/* Emphasis */
  --crm-primary-color: var(--nepean-accent);
  --crm-primary-hover-color: var(--nepean-accent-hover);
  --crm-primary-ink-color: var(--nepean-accent-ink);
  --crm-primary-text-color: var(--nepean-accent-text);
  --crm-primary-hover-text-color: var(--nepean-accent-text);
  --crm-secondary-color: var(--nepean-paper);
  --crm-secondary-hover-color: var(--nepean-layer);
  --crm-secondary-text-color: var(--nepean-text);
  --crm-secondary-hover-text-color: var(--nepean-text);
  --crm-secondary-ink-color: var(--nepean-text);
  --crm-info-color: #3c5db8;
  /* Pale status tints. Riverlea derives these as hsl(from X h s calc(l + 60..67)),
     which overshoots 100% lightness for mid-tone colours and lands on plain
     white (danger, warning). Mixing into the paper colour always leaves a
     visible tint, and gives dark tints in dark mode. */
  --crm-success-light-color: color-mix(in srgb, var(--crm-success-color) 12%, var(--crm-paper));
  --crm-warning-light-color: color-mix(in srgb, var(--crm-warning-color) 14%, var(--crm-paper));
  --crm-danger-light-color: color-mix(in srgb, var(--crm-danger-color) 12%, var(--crm-paper));
  --crm-info-light-color: color-mix(in srgb, var(--crm-info-color) 11%, var(--crm-paper));

/* Shadows */
  --crm-shadow-block: var(--nepean-shadow);
  --crm-shadow-popup: var(--nepean-shadow-pop);
  --crm-shadow-bottom: 0 -1px 0 var(--nepean-line);

/* Lengths */
  --crm-l-radius: var(--nepean-radius);
  --crm-page-padding: var(--crm-l-large);
  --crm-flex-gap: var(--crm-l-medium-2);

/* Type */
  --crm-font: var(--nepean-font-body);
  --crm-font-size: 0.9375rem;
  --crm-font-small-size: 0.8125rem;
  --crm-font-line-height: 1.55;
  --crm-heading-bg-color: transparent;
  --crm-heading-color: var(--nepean-text);
  --crm-heading-padding: var(--crm-l-small) 0;
  --crm-heading-radius: 0;

/* Buttons: secondary is a quiet white button, primary carries the accent */
  --crm-btn-border: 1px solid var(--nepean-line);
  --crm-btn-radius: var(--nepean-radius);
  --crm-btn-height: 34px;
  --crm-btn-padding-block: var(--crm-l-small);
  --crm-btn-padding-inline: var(--crm-l-reg);
  --crm-btn-icon-spacing: var(--crm-l-medium);

/* Tables: no zebra stripes, soft accent on hover */
  --crm-table-outside-border: 1px solid var(--nepean-line);
  /* 10px sides: Find Contacts' 11 columns fit at 1440px with Gin's sidebar (16px overflowed) */
  --crm-table-padding: var(--crm-l-medium-1) var(--crm-l-medium-1);
  --crm-table-header-bg-color: var(--nepean-layer);
  --crm-table-header-color: var(--nepean-muted);
  --crm-table-header-border-bottom: 1px solid var(--nepean-line);
  --crm-table-row-alternate-mix: 0%;
  --crm-table-row-hover-color: var(--nepean-accent-soft);
  --crm-table-sort-active-color: var(--nepean-accent);

/* Panels */
  --crm-panel-shadow: var(--nepean-shadow);
  --crm-panel-border: 1px solid var(--nepean-line);

/* Accordions: light headers instead of dark bars */
  --crm-accordion-icon-color: var(--nepean-muted);
  --crm-accordion-radius: var(--nepean-radius-card);
  --crm-accordion-gap: var(--crm-l-medium) 0 0;
  --crm-accordion-header-bg-color: var(--nepean-paper);
  --crm-accordion-header-bg-active-color: var(--nepean-paper);
  --crm-accordion-header-color: var(--nepean-text);
  --crm-accordion-header-padding: var(--crm-l-medium-2) var(--crm-l-reg);
  --crm-accordion-header-weight: 600;
  --crm-accordion-header-border: 1px solid var(--nepean-line);
  --crm-accordion-border: 1px solid var(--nepean-line);
  --crm-accordion-body-bg-color: var(--nepean-paper);
  --crm-accordion-body-padding: var(--crm-l-reg) var(--crm-l-reg-2);

/* Alerts */
  --crm-alert-padding: var(--crm-l-medium-2) var(--crm-l-reg);
  --crm-alert-border-width: 0;

/* Forms */
  --crm-form-block-bg-color: var(--nepean-paper);
  --crm-form-block-padding: var(--crm-l-reg-2);
  --crm-form-block-border-radius: var(--nepean-radius-card);
  --crm-form-block-box-shadow: var(--nepean-shadow);
  --crm-form-fieldset-border-color: var(--nepean-line);
  --crm-form-checkbox-list-bg-color: var(--nepean-accent-soft);
  --crm-input-border-color: var(--nepean-line-strong);
  --crm-input-border-radius: var(--nepean-radius);
  --crm-input-box-shadow: none;
  --crm-input-padding: var(--crm-l-small) var(--crm-l-medium-2);
  --crm-input-height: 2.25rem;
  --crm-input-font-size: var(--crm-font-size);
  --crm-input-label-weight: 600;
  --crm-input-description: var(--nepean-muted);
  --crm-input-select-bg-color: var(--nepean-paper);
  --crm-input-inline-edit-bg-color: var(--nepean-accent-soft);
  --crm-input-toggle-enabled-bg: var(--nepean-accent);
  --crm-input-toggle-disabled-bg: var(--nepean-line-strong);

/* Tabs: underline style */
  --crm-tabs-bg-color: transparent;
  --crm-tabs-padding: 0;
  --crm-tabs-gap: var(--crm-l-small);
  --crm-tab-bg-color: transparent;
  --crm-tab-hover-bg-color: var(--nepean-layer);
  --crm-tab-bg-active: var(--nepean-paper);
  --crm-tab-color: var(--nepean-muted);
  --crm-tab-weight: 600;
  --crm-tab-padding: var(--crm-l-medium-1) var(--crm-l-medium-2);
  --crm-tab-count-bg-color: var(--nepean-accent-soft);
  --crm-tab-count-color: var(--nepean-accent-ink);
  --crm-tab-border: 1px solid transparent;
  --crm-tab-active-border: 1px solid var(--nepean-line);

/* Contact summary: left tab rail (Riverlea's side-tab mode, as Hackney Brook uses), section cards */
  --crm-contact-border: 0;
  --crm-contact-radius: var(--nepean-radius-card);
  --crm-contact-direction: grid;
  --crm-contact-side-tabs-width: 224px;
  --crm-contact-tabs-flow: column;
  --crm-contact-tabs-gap: 2px;
  --crm-contact-tabs-bg-color: transparent;
  --crm-contact-tabs-padding: 0;
  --crm-contact-tabs-radius: 0;
  --crm-contact-tab-bg-color: transparent;
  --crm-contact-tab-hover-bg-color: var(--nepean-layer);
  --crm-contact-tab-padding: var(--crm-l-medium-1) var(--crm-l-medium-2);
  --crm-contact-tab-border: 0 solid transparent;
  --crm-contact-tab-hover-border: 0 solid transparent;
  --crm-contact-tab-border-width: 0;
  --crm-contact-tab-width: 100%;
  --crm-contact-tab-align: left;
  --crm-contact-tab-hang: 0;
  --crm-contact-tab-radius: var(--nepean-radius);
  --crm-contact-tab-count-bg-color: var(--nepean-layer);
  --crm-contact-tab-count-color: var(--nepean-muted);
  --crm-contact-summary-row-bg-color: transparent;
  --crm-contact-label-bg-color: transparent;
  --crm-contact-heading-inset: 0;
  --crm-contact-panel-padding: 0;
  --crm-contact-panel-bg-color: transparent;
  --crm-contact-panel-border: 0;
  --crm-contact-panel-radius: 0;
  --crm-contact-box-shadow: none;
  --crm-contact-block-padding: 0;
  --crm-contact-block-bg-color: transparent;
  --crm-contact-header-bg-color: transparent;
  --crm-contact-header-size: 2rem;
  --crm-contact-header-padding: 0;
  --crm-contact-edit-border: 0;
  --crm-contact-image-size: 88px;
  --crm-contact-image-radius: 50%;

/* Dialogs */
  --crm-dialog-radius: var(--nepean-radius-card);
  --crm-dialog-padding: 0;
  --crm-dialog-header-bg-color: var(--nepean-paper);
  --crm-dialog-header-color: var(--nepean-text);
  --crm-dialog-header-size: 1.125rem;
  --crm-dialog-header-padding: var(--crm-l-reg) var(--crm-l-reg-2);
  --crm-dialog-body-bg-color: var(--nepean-paper);
  --crm-dialog-body-padding: var(--crm-l-reg-2);
  --crm-dialog-footer-border: 1px solid var(--nepean-line);

/* Dashlets */
  --crm-dashlet-border: 1px solid var(--nepean-line);
  --crm-dashlet-box-shadow: var(--nepean-shadow);
  --crm-dashlet-radius: var(--nepean-radius-card);
  --crm-dashlet-padding: var(--crm-l-medium) var(--crm-l-reg);
  --crm-dashlet-dashlets-bg-color: transparent;
  --crm-dashlet-header-bg-color: var(--nepean-paper);
  --crm-dashlet-header-color: var(--nepean-text);
  --crm-dashlet-header-border: 1px solid var(--nepean-line);
  --crm-dashlet-header-border-width: 0 0 1px 0;
  --crm-dashlet-header-padding: var(--crm-l-medium-2) var(--crm-l-reg);

/* Dropdowns */
  --crm-dropdown-bg-color: var(--nepean-paper);
  --crm-dropdown-color: var(--nepean-text);
  --crm-dropdown-hover-bg-color: var(--nepean-accent-soft);
  --crm-dropdown-hover-text-color: var(--nepean-accent-ink);
  --crm-dropdown-border: 1px solid var(--nepean-line);
  --crm-dropdown-radius: var(--nepean-radius);
  --crm-dropdown-width: 220px;

/* Notifications */
  --crm-notify-bg-color: #241d33f2;
  --crm-notify-radius: var(--nepean-radius-card);
  --crm-notify-padding: var(--crm-l-reg);

/* Wizard */
  --crm-wizard-active-bg-color: var(--nepean-accent);

/* Alpha filter */
  --crm-filter-bg-color: var(--nepean-layer);
  --crm-filter-item-bg-color: var(--nepean-paper);
  --crm-filter-item-shadow: none;
}

/* 3. REFINEMENTS --------------------------------------------------------- */

/* Page titles get the display face; everything else stays in the UI face.
   Notification titles are also <h1>s inside #crm-container, so exclude them. */
#crm-container h1:not(#crm-notification-container h1),
.crm-container h1.page-title,
.crm-page-title-wrapper h1 {
  font-family: var(--nepean-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
#crm-notification-container h1 {
  font-weight: 700;
  letter-spacing: 0;
}

/* Highlights: everything else that names or headlines something uses the
   display face too. Body text, labels, buttons and tabs stay in --crm-font. */
#crm-container h2,
#crm-container h3,
#crm-notification-container h1,
#crm-container .crm-dashlet-header h3,
#crm-container #customFields details.customFieldGroup > summary,
#crm-container #contact-summary .contactTopBar::before,
#crm-container #contact-summary .contact_details > .contact_panel::before,
.ui-dialog .ui-dialog-title {
  font-family: var(--nepean-font-display);
}
#crm-container h2,
#crm-container h3 {
  letter-spacing: -0.01em;
}

/* Drupal Gin: on CiviCRM pages, use Nepean's ground behind the whole page so
   Gin's cool background doesn't meet ours at a visible seam. */
body.path-civicrm {
  --gin-bg-app: var(--crm-page-bg-color);
  /* Gin's accent, link and focus colours would otherwise show as Drupal blue
     on CiviCRM buttons and links */
  --gin-color-primary: var(--crm-primary-color);
  --gin-color-primary-hover: var(--crm-primary-hover-color);
  --gin-color-primary-active: var(--crm-primary-hover-color);
  --gin-color-primary-light: var(--nepean-accent-soft);
  --gin-color-link: var(--crm-link-color);
  --gin-color-link-hover: var(--crm-primary-hover-color);
  --gin-color-focus: var(--nepean-brand);
  background-color: var(--crm-page-bg-color);
}
/* Links inside the contact summary, in case Gin's link rule still wins */
#crm-container #contact-summary .crm-label a,
#crm-container #contact-summary .crm-content a {
  color: var(--crm-link-color);
}
body.path-civicrm .page-wrapper,
body.path-civicrm .layout-container,
body.path-civicrm .region-content,
body.path-civicrm #crm-container {
  background-color: transparent;
}
/* Gin styles every jQuery UI dialog title white (its title bars are dark);
   Riverlea colours the bar but not the title span, so take it back */
.crm-container.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
  color: var(--crm-dialog-header-color);
  font-weight: 600;
}
/* Gin paints the dialog frame white (it showed as white corners under the
   rounded title bar in dark mode) and the overlay a pale blue-grey veil */
body.path-civicrm .crm-container.ui-dialog {
  background-color: var(--crm-dialog-body-bg-color);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--crm-dialog-radius);
}
.crm-container.ui-dialog .ui-dialog-titlebar {
  border-radius: var(--crm-dialog-radius) var(--crm-dialog-radius) 0 0;
}
/* The button bar was pinned over the bottom of the dialog with only 50px
   kept clear for it, but Nepean's buttons make it ~83px tall, so it covered
   the last field (e.g. "Change To" in Reassign Case Role). Let it sit in
   the flow under the content, as jQuery UI intends; jQuery UI already
   allows for its height when sizing fixed-height popups. */
.crm-container.ui-dialog > .ui-dialog-content {
  margin-bottom: 0;
}
.crm-container.ui-dialog > .ui-dialog-buttonpane {
  position: static;
}
body.path-civicrm .ui-widget-overlay {
  background-color: var(--crm-page-bg-color);
  opacity: 0.8;
}
/* Gin's tab styling rings any focused tab, so a mouse click leaves a ring
   behind; keep it for keyboard focus only */
#crm-container .ui-tabs-anchor:focus:not(:focus-visible) {
  outline: none;
}
/* Drupal admin themes (Claro, Gin) put the "Add to shortcuts" star in the
   page-title block. Some CiviCRM pages give Drupal no title (the contact
   summary shows the name in its own header card), which left the star alone
   on a line under the breadcrumb. There, sit it at the end of the
   breadcrumb row instead. (A shortcut made on a contact page links to
   civicrm/contact/view without the contact ID; that's Drupal's doing.)
   A title block with neither title nor star is hidden.
   (:has() can't nest, so "no title" is tested as "the star comes first".) */
body.path-civicrm .content-header .layout-container:has(.block-page-title-block > .shortcut-action:first-child) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--crm-l-medium-2);
  /* replaces the title block's bottom margin, zeroed below */
  padding-bottom: var(--crm-l-reg);
}
body.path-civicrm .content-header .layout-container:has(.block-page-title-block > .shortcut-action:first-child) > .region,
body.path-civicrm .content-header .layout-container:has(.block-page-title-block > .shortcut-action:first-child) .block-page-title-block {
  /* Claro gives the title block margin-block-end (space under a title),
     which pushed the star half its height above the breadcrumb's centre */
  margin: 0;
  padding: 0;
}
/* Optical nudge: the star measured 2px above the breadcrumb's centre, and a
   star's visual weight sits high, so it read as slightly raised */
body.path-civicrm .content-header .block-page-title-block > .shortcut-action:first-child {
  position: relative;
  top: 2px;
}
body.path-civicrm .block-page-title-block:not(:has(h1, .shortcut-action)) {
  display: none;
}
/* Gin draws the page title outside #crm-container */
body.path-civicrm .block-page-title-block h1.page-title {
  font-family: var(--nepean-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Table headers as quiet small caps (letter-spacing kept tight: wide
   uppercase headings were forcing extra wrapping in narrow tables) */
.crm-container table thead th,
.crm-container table.dataTable thead th,
.crm-container table tr.columnheader th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}
/* Data tables (SearchKit, legacy selectors, DataTables) one step smaller than
   body text, so dense lists wrap less and show more rows */
#crm-container table.table,
#crm-container table.selector,
#crm-container table.dataTable,
#crm-container table.display {
  font-size: 0.875rem;
}
/* Contact Activities tab: eight columns in the tab panel leave every column at
   its minimum, so the Subject (the one people read) was squeezed to a word per
   line by an unbreakable "Added by" name or email. Give Subject a floor and
   let "Added by" break long names; the link needs it too, because Gin sets
   overflow-wrap: break-word on links, which doesn't let a column shrink. */
#crm-container table.contact-activity-selector-activity th.crm-contact-activity_subject {
  min-width: 12em;
}
#crm-container table.contact-activity-selector-activity td:nth-child(3),
#crm-container table.contact-activity-selector-activity td:nth-child(3) a {
  overflow-wrap: anywhere;
}

/* Tabular figures wherever money and dates line up */
.crm-container td,
.crm-container .crm-contribution-amount {
  font-variant-numeric: tabular-nums;
}

/* Primary buttons: white text, subtle lift */
.crm-container .btn-primary,
.crm-container .crm-button.crm-button-type-submit,
.crm-container .crm-button.crm-button-type-upload {
  color: var(--crm-primary-text-color);
  border-color: var(--crm-primary-color);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Inputs: accent focus ring instead of the browser default */
.crm-container input:not([type=checkbox]):not([type=radio]):focus,
.crm-container select:focus,
.crm-container textarea:focus {
  border-color: var(--crm-focus-color);
  box-shadow: 0 0 0 3px var(--nepean-accent-soft);
  outline: none;
}
.crm-container input[type=checkbox],
.crm-container input[type=radio] {
  accent-color: var(--crm-focus-color);
}

@media (prefers-reduced-motion: no-preference) {
  .crm-container a,
  .crm-container .btn,
  .crm-container .crm-button,
  .crm-container table tbody tr {
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  }
}

/* Legacy search results ("Find Contacts" etc.): the Select Records / Actions
   table becomes one white card. Its first row has a single cell, so without
   a table background the empty second column showed the page colour (a notch). */
#crm-container .crm-search-tasks table.form-layout-compressed {
  width: 100%;
  background: var(--crm-paper);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--nepean-radius-card) var(--nepean-radius-card) 0 0;
  border-collapse: separate;
  box-shadow: none;
}
#crm-container .crm-search-tasks table.form-layout-compressed tr,
#crm-container .crm-search-tasks table.form-layout-compressed td {
  background: transparent;
}

/* Activity status chips (contact Activities tab, case activities). CiviCRM's
   activity selector tags every row with status-id-N and status-ontime /
   status-overdue, and the status sits in td.crmf-status_id > .crm-editable,
   so this is CSS only. Values are core's defaults:
   1 Scheduled, 2 Completed, 3 Cancelled, 4 Left Message, 5 Unreachable,
   6 Not Required, 7 Available, 8 No-show. A site that renumbers or adds
   statuses gets the neutral chip for anything not listed. */
/* The state rules below are less specific than this one, so the neutral
   default lives in var() fallbacks rather than as a declared value. */
#crm-container tr[class*="status-id-"] td.crmf-status_id > .crm-editable:not(.crm-editable-editing) {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nepean-status, var(--crm-inactive-color)) 28%, var(--crm-paper));
  background: color-mix(in srgb, var(--nepean-status, var(--crm-inactive-color)) 12%, var(--crm-paper));
  color: var(--nepean-status, var(--crm-inactive-color));
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
#crm-container tr.status-id-2 td.crmf-status_id > .crm-editable { --nepean-status: var(--crm-success-color); }
#crm-container tr.status-id-1 td.crmf-status_id > .crm-editable,
#crm-container tr.status-id-7 td.crmf-status_id > .crm-editable { --nepean-status: var(--crm-info-color); }
#crm-container tr.status-id-4 td.crmf-status_id > .crm-editable,
#crm-container tr.status-id-5 td.crmf-status_id > .crm-editable { --nepean-status: var(--crm-warning-color); }
#crm-container tr.status-id-8 td.crmf-status_id > .crm-editable { --nepean-status: var(--crm-danger-color); }
/* Overdue (open and past its date) outranks the status colour */
#crm-container tr.status-overdue td.crmf-status_id > .crm-editable { --nepean-status: var(--crm-danger-color); }

/* SearchKit row highlights. A display's conditional styles put Bootstrap
   bg-* classes on every cell of the row; Riverlea fills them solid
   (#bootstrap-theme .bg-danger { background: danger; color: white }) while
   links keep the link colour, which is unreadable on red. In table cells,
   use a pale tint, a coloured edge on the first cell, and normal text.
   Order matters: a row can carry several (e.g. bg-danger bg-warning), and
   the more serious one, declared later, wins. Badges elsewhere keep solid fills. */
#bootstrap-theme td.bg-info,
#bootstrap-theme td.bg-primary {
  background-color: var(--crm-info-light-color);
  color: var(--crm-text-color) !important;
}
#bootstrap-theme td.bg-success {
  background-color: var(--crm-success-light-color);
  color: var(--crm-text-color) !important;
}
#bootstrap-theme td.bg-warning {
  background-color: var(--crm-warning-light-color);
  color: var(--crm-text-color) !important;
}
#bootstrap-theme td.bg-danger {
  background-color: var(--crm-danger-light-color);
  color: var(--crm-text-color) !important;
}
#bootstrap-theme tr > td.bg-info:first-child,
#bootstrap-theme tr > td.bg-primary:first-child { box-shadow: inset 4px 0 0 var(--crm-info-color); }
#bootstrap-theme tr > td.bg-success:first-child { box-shadow: inset 4px 0 0 var(--crm-success-color); }
#bootstrap-theme tr > td.bg-warning:first-child { box-shadow: inset 4px 0 0 var(--crm-warning-color); }
#bootstrap-theme tr > td.bg-danger:first-child  { box-shadow: inset 4px 0 0 var(--crm-danger-color); }

/* SearchKit "buttons" columns put each button in its own inline span, so in a
   narrow column they stack one per line and triple the row height (e.g.
   CiviRules' Edit / Disable / Delete). Keep them side by side. */
#bootstrap-theme .crm-search-display-table td:has(> span > a.btn) {
  white-space: nowrap;
}

/* Date range pickers ("Choose Date Range" › From ▢ × To ▢ ×), e.g. the
   contact Activities filter, searches and reports: nothing kept a label
   with its date box, so in a narrow column "To" stayed on one line and its
   box wrapped to the next. Now one row per half: label on the left, date
   box (and its ×) pushed right, so the two boxes line up; the boxes get a
   little extra width where the column allows. */
/* Filter rows (e.g. a contact's Activities tab): keep every filter's label
   and dropdown level when a date range opens under one of them; the row
   grows downward instead of re-centring its neighbours. */
.crm-container .activity-search-options.crm-flex-box {
  align-items: flex-start;
}
.crm-container .crm-absolute-date-range {
  display: flex;
  flex-direction: column;
  gap: var(--crm-l-small);
  margin-top: var(--crm-l-small); /* same space below the dropdown as between From and To */
  width: 100%;
  max-width: 14rem; /* the "Choose Date Range" dropdown's width, so the
                       date boxes end at its right edge */
}
.crm-container .crm-absolute-date-range > :is(.crm-absolute-date-from, .crm-absolute-date-to) {
  display: flex;
  align-items: center;
  gap: var(--crm-l-small);
  white-space: nowrap;
}
.crm-container .crm-absolute-date-range > :is(.crm-absolute-date-from, .crm-absolute-date-to) > label {
  margin: 0;
}
/* With a time box too (search forms), date + time can't fit the dropdown's
   width: let the block size to its widest row so both rows still line up. */
.crm-container .crm-absolute-date-range:has(.crm-form-time) {
  width: fit-content;
  max-width: 100%;
}
/* Core's wrapper (date box + ×) stretched to fill the row and was allowed
   to wrap, which dropped the × under the box, doubled the row height and
   left the label sitting low. Keep box and × on one line, at the right. */
.crm-container .crm-absolute-date-range .crm-form-date-wrapper {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  margin-left: auto;
}
/* The × (clear) keeps its space even while hidden, which pushed the boxes
   past the dropdown's edge. Hang it just outside the box instead. */
.crm-container .crm-absolute-date-range .crm-form-date-wrapper > .crm-clear-link {
  position: absolute;
  top: 50%;
  left: calc(100% + 2px);
  transform: translateY(-50%);
}
.crm-container .crm-absolute-date-range input:not([type="hidden"]) {
  min-width: 0;
  width: calc(8.25rem + 16px);
  max-width: 100%;
}

/* Find Contribution Pages / Manage Events search: core puts a <br> between
   the Campaigns label and its dropdown (in a nested .search-field), so it
   sat a line lower than Title and Financial Type. Line them up. */
.crm-container .advanced-search-fields .search-field > .search-field br {
  display: none;
}
.crm-container .advanced-search-fields .search-field > .search-field {
  margin: 0;
  padding: 0;
}

/* 4. CONTACT SUMMARY ------------------------------------------------------
   Targets core's CRM/Contact/Page/View/Summary.tpl markup. Everything is
   scoped under #crm-container so it outranks Riverlea's class selectors
   without !important. Requires :has() (all current browsers).            */

/* Hero: name and actions share one card. The card is a ::before that spans
   the first grid row, so no markup changes are needed. */
#crm-container #crm-main-content-wrapper:has(> .crm-contact-page) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--crm-l-reg);
}
#crm-container #crm-main-content-wrapper:has(> .crm-contact-page)::before {
  content: "";
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: stretch;
  background: var(--crm-paper);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--nepean-radius-card);
  box-shadow: var(--crm-shadow-block);
}
#crm-container #crm-main-content-wrapper:has(> .crm-contact-page) > * {
  grid-column: 1 / -1;
  position: relative;
}
#crm-container #crm-main-content-wrapper:has(> .crm-contact-page) > .clear,
#crm-container #crm-main-content-wrapper:has(> .crm-contact-page) > div:has(> input[type=hidden]:only-child) {
  display: none;
}
/* Placement selectors repeat the wrapper's :has() so they outrank the
   "> *" full-width rule above (which otherwise stacks both in row 1). */
#crm-container #crm-main-content-wrapper:has(> .crm-contact-page) > .crm-summary-contactname-block {
  grid-row: 1;
  grid-column: 1 / 2;
  min-width: 0;
}
#crm-container #crm-main-content-wrapper:has(> .crm-contact-page) > .crm-actions-ribbon {
  grid-row: 1;
  grid-column: 2 / 3;
}
#crm-container .crm-summary-contactname-block {
  padding: var(--crm-l-reg-3) var(--crm-l-reg-4);
  background: transparent;
}
#crm-container #crm-contactname-content .crm-summary-display_name {
  display: flex;
  align-items: center;
  gap: var(--crm-l-reg-1);
  padding: 0;
  font-family: var(--nepean-font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
#crm-container .crm-summary-display_name > a.crm-summary-link {
  width: 60px;
  height: 60px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.375rem;
  background: var(--nepean-accent-soft);
  color: var(--crm-link-color);
  box-shadow: 0 0 0 4px var(--crm-paper), 0 0 0 5px var(--nepean-brand);
}
#crm-container .crm-summary-display_name > a.crm-summary-link:hover {
  background: var(--crm-primary-color);
  color: var(--crm-primary-text-color);
  text-decoration: none;
}
#crm-container .crm-actions-ribbon {
  padding: 0 var(--crm-l-reg-4) 0 0;
  background: transparent;
  border: 0;
}
#crm-container .crm-actions-ribbon ul#actions {
  display: flex;
  gap: var(--crm-l-medium);
  margin: 0;
  padding: 0;
}
#crm-container .crm-actions-ribbon ul#actions > li {
  list-style: none;
  margin: 0;
}
#crm-container .crm-actions-ribbon a.button {
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--crm-l-reg);
  border-radius: var(--nepean-radius);
  border: 1px solid var(--nepean-line-strong);
  background: var(--crm-paper);
  color: var(--crm-text-color);
  font-weight: 600;
  box-shadow: none;
  outline: 0;
}
/* The Actions menu: the buttons now sit at the right of the header card, so
   anchor the (wide, three-column) menu to the button's right edge instead of
   its left, or it runs off the screen. Core leaves it transparent: give it
   a panel. */
#crm-container .crm-actions-ribbon #crm-contact-actions-list {
  left: auto;
  right: 0;
  top: calc(100% + 6px);
  /* Core's 495px gives 151px columns, so long activity types wrap three
     times. Sites with many activity types (50+ is not unusual) get the list in
     columns below; very long lists scroll inside the panel. */
  width: 1040px;
  max-width: calc(100vw - 32px);
  max-height: min(72vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--crm-l-medium) var(--crm-l-reg);
  background: var(--crm-paper);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--nepean-radius-card);
  box-shadow: var(--crm-shadow-popup);
  z-index: 20;
}
/* Riverlea's grid gives three equal columns (plus an empty track for the
   .clear div). The second and third columns hold short fixed labels, so size
   them to their content and give the activity types the rest. */
#crm-container #crm-contact-actions-list .crm-contact-actions-list-inner {
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  column-gap: var(--crm-l-reg);
}
#crm-container #crm-contact-actions-list .crm-contact-actions-list-inner > .clear {
  display: none;
}
/* The activity list flows into as many 12rem columns as fit (three at
   1440px), with "Record Activity:" across the top */
#crm-container #crm-contact-actions-list .crm-contact_activities-list > ul {
  columns: 12rem;
  column-gap: var(--crm-l-reg);
}
#crm-container #crm-contact-actions-list .crm-contact_activities-list > ul > li {
  break-inside: avoid;
}
#crm-container #crm-contact-actions-list .crm-contact_activities-list > ul > li.crm-activity-tab {
  column-span: all;
}
/* The panel hangs left from the Actions button, so on smaller laptops keep it
   narrow enough (two columns) not to run off the left edge */
@media (max-width: 1360px) {
  #crm-container .crm-actions-ribbon #crm-contact-actions-list {
    width: 880px;
  }
}
/* The contact hover card (hovering the avatar). Core centres a 700px card
   under the icon, which suits icons at the right of a name; the avatar sits
   at the far left, so the card opened off-screen. Open it down and right,
   as a card, and let the profile table fit it. */
#crm-container .crm-summary-display_name > a.crm-summary-link .crm-tooltip-wrapper {
  left: 0;
  right: auto;
  top: calc(100% + 10px);
  width: min(640px, calc(100vw - 48px));
  padding: 0;
  background: var(--crm-paper);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--nepean-radius-card);
  box-shadow: var(--crm-shadow-popup);
  z-index: 30;
}
#crm-container .crm-summary-display_name > a.crm-summary-link .crm-tooltip {
  width: auto;
  padding: var(--crm-l-medium-2) var(--crm-l-reg);
  background: transparent;
  font-size: var(--crm-font-small-size);
}
#crm-container .crm-summary-display_name > a.crm-summary-link .crm-tooltip .crm-summary-group,
#crm-container .crm-summary-display_name > a.crm-summary-link .crm-tooltip table.crm-table-group-summary {
  width: 100%;
  padding: 0;
  background: transparent;
}
@media (max-width: 720px) {
  #crm-container #crm-contact-actions-list .crm-contact-actions-list-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--crm-l-medium);
  }
  #crm-container #crm-contact-actions-list .crm-contact-actions-list-inner > div {
    grid-area: auto;
  }
}
#crm-container .crm-actions-ribbon a.button:focus-visible {
  outline: 2px solid var(--nepean-brand);
  outline-offset: 2px;
}
#crm-container .crm-actions-ribbon a.button:hover {
  border-color: var(--crm-inactive-color);
  box-shadow: var(--crm-shadow-block);
  text-decoration: none;
}
#crm-container .crm-actions-ribbon a.button.edit {
  background: var(--crm-primary-color);
  border-color: var(--crm-primary-color);
  color: var(--crm-primary-text-color);
}
#crm-container .crm-actions-ribbon a.button.edit:hover {
  background: var(--crm-primary-hover-color);
  border-color: var(--crm-primary-hover-color);
}

/* Tab rail */
#crm-container .crm-contact-page {
  margin-top: var(--crm-l-reg-3);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
#crm-container .crm-contact-page #mainTabContainer.ui-tabs {
  display: grid;
  grid-template-columns: var(--crm-contact-side-tabs-width) minmax(0, 1fr);
  gap: var(--crm-l-large);
  align-items: start;
  background: transparent;
  border: 0;
  padding: 0;
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  position: sticky;
  top: var(--crm-l-reg);
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li {
  float: none;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li > a {
  display: flex;
  align-items: center;
  gap: var(--crm-l-medium-2);
  width: 100%;
  padding: var(--crm-l-medium-1) var(--crm-l-medium-2);
  border-radius: var(--nepean-radius);
  color: var(--crm-inactive-color);
  font-weight: 600;
  text-decoration: none;
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li > a span {
  display: inline;
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li > a i {
  width: 1.125rem;
  text-align: center;
  color: color-mix(in srgb, var(--crm-inactive-color) 80%, transparent);
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li > a em {
  /* A count never breaks across lines ("1165 / 6"); the tab label wraps
     instead, and the chip keeps its full width */
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
  min-width: 1.4rem;
  padding: 1px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--crm-layer1-bg-color);
  color: var(--crm-inactive-color);
}
/* Same for every tab count across CiviCRM (sub-tabs, admin screens) */
.crm-container .ui-tabs-nav li a em {
  white-space: nowrap;
}
/* Labels wrap only between whole words. Drupal's admin themes (Claro, Gin)
   set body { hyphens: auto; overflow-wrap: break-word }, which CiviCRM
   inherits ("inter-ested"), and Riverlea's tab rail adds
   word-break: break-word. Values (.crm-content) still break very long
   unspaced strings such as emails, so they can't overflow their column. */
body.path-civicrm,
#crm-container,
.crm-container {
  hyphens: manual;
}
/* Drupal's page title sits outside #crm-container ("previous fi-nancial
   year" on a long SearchKit title) */
body.path-civicrm .block-page-title-block h1 {
  overflow-wrap: normal;
  word-break: normal;
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li > a span,
.crm-container .ui-tabs-nav li a,
.crm-container .crm-label,
.crm-container label {
  word-break: normal;
  overflow-wrap: normal;
}
/* Import "Match Fields" screens (core and CSV/API importer): plain
   dropdowns are as wide as their longest option, and one long custom
   field name made every mapping box ~2,000px, pushing the table far past
   the panel and squeezing the column names. Cap them; the closed box shows
   the start of a long name and the open list still shows it in full. */
form#MapField table.selector select {
  width: 100%;
  min-width: 14rem;
  max-width: 32rem;
}
/* Dropdown lists: select2 makes the list exactly as wide as its box, so a
   long single-word option ("MailingEventResubscribe") was split mid-word.
   Let the list grow to fit its longest option (never past the window's
   right edge, and never narrower than the box). Contact/entity pickers,
   whose rows carry wrapping descriptions, keep their usual width.
   Riverlea's _form.css sets min-width on the same three classes, so
   ours repeats them to win. */
.select2-drop.select2-drop-active.crm-container:not(:has(.crm-select2-row)) {
  min-width: fit-content;
}
.select2-drop .select2-result-label {
  word-break: normal;
  hyphens: manual;
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li:hover > a {
  background: color-mix(in srgb, var(--crm-paper) 70%, var(--crm-layer1-bg-color));
  color: var(--crm-text-color);
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li.crm-count-0 > a {
  color: color-mix(in srgb, var(--crm-inactive-color) 75%, var(--crm-page-bg-color));
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li.crm-count-0 > a em {
  background: transparent;
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li.ui-tabs-active > a {
  background: var(--crm-paper);
  color: var(--crm-text-color);
  box-shadow: var(--crm-shadow-block);
}
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li.ui-tabs-active > a i {
  color: var(--nepean-brand);
}
/* Highlight colour on the current tab's count */
#crm-container #mainTabContainer ul.crm-contact-tabs-list > li.ui-tabs-active > a em {
  background: var(--nepean-highlight);
  color: var(--nepean-highlight-ink);
}

/* Tab panels: other tabs get one card; Summary is a stack of cards */
#crm-container #mainTabContainer > .ui-tabs-panel {
  padding: 0;
  background: transparent;
  border: 0;
  min-width: 0;
}
#crm-container #mainTabContainer > .ui-tabs-panel:not(#contact-summary) {
  padding: var(--crm-l-reg) var(--crm-l-reg-4);
  background: var(--crm-paper);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--nepean-radius-card);
  box-shadow: var(--crm-shadow-block);
}
#crm-container #contact-summary {
  display: grid;
  gap: var(--crm-l-reg);
}
#crm-container #contact-summary .contactTopBar,
#crm-container #contact-summary .contact_details > .contact_panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  margin: 0;
  padding: var(--crm-l-small) var(--crm-l-reg-4) var(--crm-l-medium-3);
  background: var(--crm-paper);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--nepean-radius-card);
  box-shadow: var(--crm-shadow-block);
}
#crm-container #contact-summary .contact_details {
  display: grid;
  gap: var(--crm-l-reg);
}
#crm-container #contact-summary .contact_panel > .clear,
#crm-container #contact-summary .contact_panel > .separator {
  display: none;
}
#crm-container #contact-summary .contactCardLeft,
#crm-container #contact-summary .contactCardRight {
  width: auto;
  float: none;
  min-width: 0;
  padding: 0;
}

/* Section eyebrows (English only; remove if you run CiviCRM multilingual) */
#crm-container #contact-summary .contactTopBar::before,
#crm-container #contact-summary .contact_details > .contact_panel::before {
  grid-column: 1 / -1;
  padding: var(--crm-l-reg) 0 var(--crm-l-small-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crm-link-color);
}
#crm-container #contact-summary .contactTopBar::before { content: "Profile"; }
#crm-container #contact-summary .contact_details > .contact_panel:has(#email-block, #phone-block)::before { content: "Contact details"; }
#crm-container #contact-summary .contact_details > .contact_panel:has(.crm-address-block)::before { content: "Addresses"; }
#crm-container #contact-summary .contact_details > .contact_panel:has(#communication-pref-block, #demographic-block)::before { content: "Communication and demographics"; }

/* Rows: hairlines instead of grey cells */
#crm-container #contact-summary .crm-summary-row {
  display: grid;
  grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr);
  column-gap: var(--crm-l-medium-3);
  row-gap: 0;
  padding: var(--crm-l-medium-1) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--crm-border-color);
}
#crm-container #contact-summary .crm-summary-row .crm-label {
  min-width: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--crm-inactive-color);
}
#crm-container #contact-summary .crm-summary-row .crm-content {
  padding: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
#crm-container #contact-summary .crm-summary-row.primary .crm-label {
  font-weight: 600;
  color: var(--crm-text-color);
}
/* Riverlea gives labels/values their own padding and minimum heights; clear
   them so each row is exactly as tall as its text and label/value share a baseline. */
#crm-container #contact-summary .crm-summary-row {
  min-height: 0;
  height: auto;
  align-items: baseline;
}
/* Core's clearfix (::after { content: "."; clear: both }) becomes a second,
   empty grid row and doubles the row gap; grids don't need clearing. */
#crm-container #contact-summary .crm-summary-row::before,
#crm-container #contact-summary .crm-summary-row::after {
  content: none;
  display: none;
}
#crm-container #contact-summary .crm-summary-row > .crm-label,
#crm-container #contact-summary .crm-summary-row > .crm-content {
  margin: 0;
  min-height: 0;
  height: auto;
  padding-block: 0;
  line-height: 1.5;
  overflow: visible;
}
/* Blocks inside a card are not cards themselves: no shadow, border or fill */
#crm-container #contact-summary .crm-summary-block,
#crm-container #contact-summary .crm-inline-block-content,
#crm-container #contact-summary .crm-inline-edit,
#crm-container #contact-summary .contactCardLeft > div,
#crm-container #contact-summary .contactCardRight > div {
  box-shadow: none;
  border: 0;
  background-color: transparent;
  margin-block: 0;
}
#crm-container #contact-summary .crm-inline-edit:hover,
#crm-container #contact-summary .crm-inline-edit:focus-within {
  background-color: var(--nepean-accent-soft);
}
#crm-container #contact-summary .address.add-new:hover {
  background-color: transparent;
}

/* Inline editing: a soft accent wash and a floating pill */
#crm-container #contact-summary .crm-inline-edit {
  position: relative;
  margin: 0 calc(var(--crm-l-medium-1) * -1);
  padding: 0 var(--crm-l-medium-1);
  border: 0;
  border-radius: 10px;
  transition: background-color .15s ease;
}
#crm-container .crm-summary-contactname-block .crm-inline-edit {
  border: 0;
  border-radius: 10px;
}
.crm-edit-ready #crm-container .crm-inline-edit:hover,
#crm-container.crm-edit-ready .crm-inline-edit:hover,
.crm-edit-ready .crm-summary-block .crm-inline-edit:hover {
  background: var(--nepean-accent-soft);
  outline: 0;
  border-color: transparent;
}
#crm-container .crm-inline-edit:hover .crm-summary-row {
  border-top-color: transparent;
}
#crm-container .crm-inline-edit .crm-edit-help {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--crm-paper);
  color: var(--crm-link-color);
  box-shadow: var(--crm-shadow-block);
  opacity: 0;
  transition: opacity .15s ease;
}
/* Edit pills appear only for the block under the pointer or keyboard focus */
#crm-container .crm-inline-edit:hover > .crm-inline-block-content > .crm-edit-help,
#crm-container .crm-inline-edit:hover .crm-edit-help,
#crm-container .crm-inline-edit:focus-within .crm-edit-help {
  opacity: 1;
  color: var(--crm-link-color);
}

/* "Add address" as a dashed placeholder instead of an empty row */
#crm-container #contact-summary .address.add-new .crm-summary-row {
  display: none;
}
#crm-container #contact-summary .address.add-new .crm-edit-help {
  position: static;
  display: inline-flex;
  justify-content: flex-start;
  gap: var(--crm-l-small-2);
  width: fit-content;
  float: none;
  text-align: left;
  margin: var(--crm-l-medium-2) 0;
  padding: var(--crm-l-medium-1) var(--crm-l-reg);
  border: 1.5px dashed var(--nepean-line-strong);
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--crm-inactive-color);
  font-size: 0.8125rem;
  opacity: 1;
}
#crm-container #contact-summary .address.add-new:hover {
  background: transparent;
}
#crm-container #contact-summary .address.add-new:hover .crm-edit-help {
  border-color: var(--crm-primary-color);
  background: var(--nepean-accent-soft);
  color: var(--crm-link-color);
}

/* Custom field groups */
#crm-container #customFields .contact_panel {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
}
#crm-container #customFields .contactCardRight:not(:has(*)) {
  display: none;
}
#crm-container #customFields .contact_panel details.customFieldGroup {
  width: 100%;
  margin: 0 0 var(--crm-l-reg);
  padding: 0;
  line-height: inherit;
  background: var(--crm-paper);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--nepean-radius-card);
  box-shadow: var(--crm-shadow-block);
}
#crm-container #customFields details.customFieldGroup > summary {
  padding: var(--crm-l-reg) var(--crm-l-reg-4);
  font-size: 1rem;
  font-weight: 700;
  background: transparent;
  color: var(--crm-text-color);
  border: 0;
}
#crm-container #customFields details.customFieldGroup > .crm-summary-block {
  padding: 0 var(--crm-l-reg-4) var(--crm-l-medium-2);
}
#crm-container #customFields .crm-summary-row {
  grid-template-columns: minmax(7rem, 22%) minmax(0, 1fr);
}

/* Contact Layout Editor (org.civicrm.contactlayout) replaces core's summary
   with rows (.crm-contact-summary-layout-row, which reuse core's
   .contact_panel class) of columns, each holding untitled blocks; only
   collapsible groups have a title. Each column becomes a card. Rows are
   hairlines within a block; a stronger line separates blocks. Empty columns
   and rows are hidden. */
#crm-container #contact-summary > .crm-contact-summary-layout-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--crm-l-reg);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* Clearfix and eyebrow pseudo-elements would become extra grid columns */
#crm-container #contact-summary > .crm-contact-summary-layout-row::before,
#crm-container #contact-summary > .crm-contact-summary-layout-row::after {
  content: none;
  display: none;
}
#crm-container #contact-summary > .crm-contact-summary-layout-row:not(:has(.crm-summary-row)),
#crm-container #contact-summary .crm-contact-summary-layout-col:not(:has(.crm-summary-row)) {
  display: none;
}
#crm-container #contact-summary .crm-contact-summary-layout-col {
  width: auto;
  float: none;
  min-width: 0;
  margin: 0;
  padding: var(--crm-l-medium-2) var(--crm-l-reg-4) var(--crm-l-medium-3);
  background: var(--crm-paper);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--nepean-radius-card);
  box-shadow: var(--crm-shadow-block);
}
#crm-container #contact-summary .crm-contact-summary-layout-col .crm-summary-row {
  border-top: 0;
}
#crm-container #contact-summary .crm-contact-summary-layout-col .crm-summary-row + .crm-summary-row,
#crm-container #contact-summary .crm-contact-summary-layout-col .crm-address-block + .crm-address-block .crm-summary-row {
  border-top: 1px solid var(--crm-border-color);
}
#crm-container #contact-summary .crm-contact-summary-layout-col > * + * {
  margin-top: var(--crm-l-medium-2);
  padding-top: var(--crm-l-medium-2);
  border-top: 1px solid var(--nepean-line-strong);
}
/* Tag chips wrap as whole chips, never mid-chip past the card edge */
#crm-container #contact-summary .crm-tag-item {
  display: inline-block;
  max-width: 100%;
  margin: 1px 2px 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* Collapsible groups (e.g. "Misc"): the title reads as a section eyebrow */
#crm-container #contact-summary .crm-contact-summary-layout-col .crm-collapsible > .collapsible-title {
  padding: var(--crm-l-small-2) 0;
  background: transparent;
  border: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crm-link-color);
}
/* Core indents a collapsible's body 20px; the title already marks the group,
   so keep its rows aligned with the rest of the card */
#crm-container #contact-summary .crm-contact-summary-layout-col .crm-collapsible > .crm-summary-block {
  padding-left: 0;
}
@media (max-width: 980px) {
  #crm-container #contact-summary > .crm-contact-summary-layout-row {
    grid-auto-flow: row;
  }
}

/* Record log and footer */
#crm-container #crm-record-log {
  display: block;
  margin-top: var(--crm-l-reg-1);
  line-height: 1.7;
  font-size: 0.8125rem;
  color: var(--crm-inactive-color);
}
/* Footer "System Status" chip: a pale tint of its severity with the strong
   colour as text. Core colours the link for a solid background (near-white
   on error), which vanished on the old pale-amber-for-everything chip. */
#crm-container #civicrm-footer .status {
  --nepean-status: var(--crm-inactive-color);
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nepean-status) 14%, var(--crm-paper));
  font-weight: 600;
}
#crm-container #civicrm-footer .status.crm-error   { --nepean-status: var(--crm-danger-color); }
#crm-container #civicrm-footer .status.crm-warning { --nepean-status: var(--crm-warning-color); }
#crm-container #civicrm-footer .status.crm-info    { --nepean-status: var(--crm-info-color); }
#crm-container #civicrm-footer .status.crm-ok      { --nepean-status: var(--crm-success-color); }
#crm-container #civicrm-footer .status {
  color: color-mix(in srgb, var(--nepean-status) 85%, var(--crm-text-color));
}
#crm-container #civicrm-footer .status a {
  color: inherit;
}

/* Content other extensions add above the summary (hook_civicrm_summary) */
#crm-container #hook-content {
  background: transparent;
  border: 0;
  padding: 0;
}
/* Narrow screens: rail becomes a scrolling row, cards go single column */
@media (max-width: 980px) {
  #crm-container .crm-contact-page #mainTabContainer.ui-tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--crm-l-reg);
  }
  #crm-container #mainTabContainer ul.crm-contact-tabs-list {
    flex-direction: row;
    overflow-x: auto;
    position: static;
  }
  #crm-container #mainTabContainer ul.crm-contact-tabs-list > li {
    width: auto;
  }
  #crm-container #mainTabContainer ul.crm-contact-tabs-list > li > a {
    white-space: nowrap;
  }
  #crm-container #contact-summary .contactTopBar,
  #crm-container #contact-summary .contact_details > .contact_panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 5. PUBLIC PAGES ----------------------------------------------------------
   When Nepean is the frontend theme (.crm-container.crm-public): event
   pages, contribution and membership forms, profiles. Core draws each
   group as its own faint card on the page background, which reads as
   flat, loose boxes. Instead: one paper panel for the page, groups
   flattened inside it, and label/value rows like the staff summary.      */
.crm-container.crm-public #crm-main-content-wrapper {
  max-width: 56rem;
  margin: var(--crm-l-reg-2) auto var(--crm-l-reg-4);
  padding: var(--crm-l-reg-2) var(--crm-l-reg-4) var(--crm-l-reg-3);
  background: var(--crm-paper);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--nepean-radius-card);
  box-shadow: var(--crm-shadow-block);
}
/* Groups inside the panel are not cards themselves */
.crm-container.crm-public #crm-main-content-wrapper .crm-block,
.crm-container.crm-public #crm-main-content-wrapper .event-info,
.crm-container.crm-public #crm-main-content-wrapper fieldset,
.crm-container.crm-public #crm-main-content-wrapper .crm-group {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.crm-container.crm-public #crm-main-content-wrapper fieldset + fieldset,
.crm-container.crm-public #crm-main-content-wrapper .crm-group + .crm-group {
  margin-top: var(--crm-l-reg);
  padding-top: var(--crm-l-reg);
  border-top: 1px solid var(--nepean-line-strong);
}
/* Label/value rows (event When and Location, and form fields): labels on
   the left, quiet, left-aligned; fine lines between read-only rows */
.crm-container.crm-public .crm-section:has(> .label),
.civicrm-user-profile .crm-section:has(> .label) {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  column-gap: var(--crm-l-reg-2);
  align-items: baseline;
  margin: 0;
  padding: var(--crm-l-medium-2) 0;
  /* Core's float-clearing overflow isn't needed in a grid, and it turned
     focus rings and highlighted cards into stray scrollbars */
  overflow: visible;
}
.crm-container.crm-public .crm-section:has(> .label):not(:has(input, select, textarea)) + .crm-section:has(> .label):not(:has(input, select, textarea)),
.civicrm-user-profile .crm-section:has(> .label) + .crm-section:has(> .label) {
  border-top: 1px solid var(--crm-border-color);
}
.crm-container.crm-public .crm-section > .label,
.civicrm-user-profile .crm-section > .label {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--crm-inactive-color);
}
.crm-container.crm-public .crm-section > .content,
.civicrm-user-profile .crm-section > .content {
  float: none;
  margin: 0;
  padding: 0;
  line-height: 1.55;
}
.crm-container.crm-public .crm-section > .clear,
.civicrm-user-profile .crm-section > .clear {
  display: none;
}
/* Form fields get the darker label (easier to read on a form people fill
   in); read-only rows such as an event's When and Location keep the quiet
   grey above. Profile fields already looked like this via the site's
   Drupal theme; price fields didn't, so the two halves of a form differed. */
.crm-container.crm-public .crm-section:has(input, select, textarea) > .label,
.crm-container.crm-public .crm-section:has(input, select, textarea) > .label label {
  color: var(--crm-text-color);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Contact Dashboard (civicrm/user): its tables (contributions, recurring,
   memberships, relationships) need far more than the form panel's 56rem
   and spilled out of it. Give the panel the full content width there, and
   keep each section's table inside it: shrink to fit, scroll if it can't. */
.crm-container.crm-public #crm-main-content-wrapper:has(table.dashboard-elements) {
  /* Website themes hold page content in a narrow central column (1160px
     on CWS's). Break the dashboard panel out of it: up to 100rem, centred
     on the window, never wider than the window less a margin. */
  --nepean-dashboard-width: min(100vw - 4rem, 100rem);
  width: var(--nepean-dashboard-width);
  max-width: none;
  margin-left: calc(50% - var(--nepean-dashboard-width) / 2);
  padding-inline: var(--crm-l-reg-2);
}
.crm-container.crm-public table.dashboard-elements {
  width: 100%;
  table-layout: fixed;
}
.crm-container.crm-public table.dashboard-elements > tbody > tr > td {
  overflow-x: auto;
}

/* Drupal's user page (/user/N) shows each CiviCRM profile in its own
   container, which arrived at least a full screen tall and filled with the
   page colour: three profiles made three huge, mostly empty grey boxes.
   Make each one a paper card sized to its content, like the panel above. */
.civicrm-user-profile > #crm-container,
.civicrm-user-profile > .crm-container {
  min-height: 0;
  max-width: 56rem;
  margin: 0 0 var(--crm-l-reg-2);
  padding: var(--crm-l-reg) var(--crm-l-reg-3);
  background: var(--crm-paper);
  border: 1px solid var(--crm-border-color);
  border-radius: var(--nepean-radius-card);
  box-shadow: var(--crm-shadow-block);
}

/* Contribution amounts as tappable cards ($5 · $20 · $100 · Other Amount),
   the chosen one in the primary colour. The real radio sits invisibly over
   each card, so clicks, keyboard (tab, arrows) and CiviCRM's own price
   calculation all work unchanged. Only the standard contribution amount
   field: membership price sets keep their list. */
/* An even grid of three (two on phones): six options, a common set, sit as
   two tidy rows rather than wrapping raggedly */
.crm-container.crm-public .contribution_amount-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--crm-l-medium-2);
  max-width: 30rem;
}
@media (max-width: 480px) {
  .crm-container.crm-public .contribution_amount-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.crm-container.crm-public .contribution_amount-content > .price-set-row {
  margin: 0;
}
/* The focus ring sits just outside a card; in a scrolling section it
   produced a scrollbar beside the cards. Nothing here needs to scroll. */
.crm-container.crm-public .contribution_amount-section,
.crm-container.crm-public .contribution_amount-content {
  overflow: visible;
}
.crm-container.crm-public .contribution_amount-content .crm-option-label-pair {
  position: relative;
  display: block;
}
.crm-container.crm-public .contribution_amount-content .crm-option-label-pair > input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.crm-container.crm-public .contribution_amount-content .crm-option-label-pair > label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: var(--crm-l-medium-2) var(--crm-l-reg);
  border: 1.5px solid var(--nepean-line-strong);
  border-radius: var(--nepean-radius-card);
  background: var(--crm-paper);
  color: var(--crm-text-color);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
/* Impact lines: an amount's "help after" text (PriceFieldValue.help_post,
   e.g. "Will provide one complementary therapy…") sits under the amount.
   Core renders it as amount, ": " separator, help span; drop the separator
   and stack. Cards with impact lines get a wider grid and equal heights,
   with amounts aligned along the top of each row. */
.crm-container.crm-public .contribution_amount-content:has(.crm-price-amount-help-post) {
  max-width: 42rem;
}
.crm-container.crm-public .contribution_amount-content > .price-set-row,
.crm-container.crm-public .contribution_amount-content .price-set-option-content,
.crm-container.crm-public .contribution_amount-content .crm-option-label-pair {
  height: 100%;
}
.crm-container.crm-public .contribution_amount-content .price-set-option-content {
  display: block;
}
.crm-container.crm-public .contribution_amount-content .crm-option-label-pair > label:has(.crm-price-amount-help-post) {
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--crm-l-small);
  height: 100%;
  white-space: normal;
  text-align: center;
}
.crm-container.crm-public .contribution_amount-content .crm-price-amount-help-post-separator {
  display: none;
}
.crm-container.crm-public .contribution_amount-content label:has(.crm-price-amount-help-post) .crm-price-amount-amount {
  font-size: 1.25rem;
  white-space: nowrap;
}
.crm-container.crm-public .contribution_amount-content .crm-price-amount-help-post {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--crm-text-color);
  text-wrap: balance;
}
.crm-container.crm-public .contribution_amount-content .crm-option-label-pair:not(:has(.crm-price-amount-help-post)) > label {
  height: 100%;
}
.crm-container.crm-public .contribution_amount-content .crm-option-label-pair:hover > label {
  border-color: var(--crm-primary-color);
}
.crm-container.crm-public .contribution_amount-content .crm-option-label-pair:has(input:checked) > label {
  border-color: var(--crm-primary-color);
  background: var(--nepean-accent-soft);
  color: var(--crm-link-color);
  box-shadow: inset 0 0 0 1px var(--crm-primary-color);
}
.crm-container.crm-public .contribution_amount-content .crm-option-label-pair:has(input:focus-visible) > label {
  outline: 2px solid var(--crm-focus-color);
  outline-offset: 2px;
}

/* Monthly giving ("I want to contribute this amount every month") as an
   option card like the amounts, highlighted when ticked. "for [ ]
   installments" appears only once it's ticked (core disables it until
   then anyway), with a box sized for a number on the same line. */
.crm-container.crm-public .is_recur-section > .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--crm-l-small) var(--crm-l-medium-2);
  max-width: 30rem;
  padding: var(--crm-l-medium-2) var(--crm-l-reg);
  border: 1.5px solid var(--nepean-line-strong);
  border-radius: var(--nepean-radius-card);
  background: var(--crm-paper);
}
/* Match the amount grid's width when it widens for impact lines */
.crm-container.crm-public .contribution_amount-section:has(.crm-price-amount-help-post) ~ .is_recur-section > .content {
  max-width: 42rem;
}
.crm-container.crm-public .is_recur-section > .content:has(#is_recur:checked) {
  border-color: var(--crm-primary-color);
  background: var(--nepean-accent-soft);
  box-shadow: inset 0 0 0 1px var(--crm-primary-color);
}
.crm-container.crm-public .is_recur-section #is_recur {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--crm-primary-color);
  cursor: pointer;
}
.crm-container.crm-public .is_recur-section > .content > label[for="is_recur"] {
  margin: 0;
  font-weight: 600;
  color: var(--crm-text-color);
  cursor: pointer;
}
.crm-container.crm-public .is_recur-section > .content:not(:has(#is_recur:checked)) #recur_installments_num {
  display: none;
}
.crm-container.crm-public .is_recur-section #recur_installments_num {
  display: inline-flex;
  align-items: center;
  gap: var(--crm-l-small);
  flex-basis: 100%;
  padding-left: 1.9rem; /* under the label, past the checkbox */
  color: var(--crm-text-color);
}
.crm-container.crm-public .is_recur-section :is(#installments, #frequency_interval) {
  width: 4.5rem;
  min-width: 0;
  height: 2.5rem;
  min-height: 0;
  padding: 0.25rem 0.6rem;
  text-align: center;
}
.crm-container.crm-public .is_recur-section #recurHelp {
  flex-basis: 100%;
  margin: 0;
  padding-left: 1.9rem;
}

/* Billing block: core places the "same as above" checkbox loose, directly
   above the Billing Name and Address fieldset, with no spacing of its own */
.crm-container.crm-public #crm-main-content-wrapper :is(#billingcheckbox, label[for="billingcheckbox"]) {
  margin-top: var(--crm-l-reg-2);
}
.crm-container.crm-public #crm-main-content-wrapper .billing_name_address-group {
  margin-top: var(--crm-l-reg-2);
}

/* "Other Amount" box appears only once its card is chosen: hidden while a
   fixed amount (any row but the last, which is core's Other option) is
   selected. Nothing about how the form works changes. */
.crm-container.crm-public .contribution_amount-section:has(.price-set-row:not(:last-child) input:checked) ~ .other_amount-section {
  display: none;
}

/* The contribute button as the page's clear finish: full-width, in the
   highlight colour with its ink (gold with dark teal in the CWS palette),
   on the main and confirm pages of a contribution */
.crm-container.crm-public :is(.crm-contribution-main-form-block, .crm-contribution-confirm-form-block) .crm-submit-buttons {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0 1rem;
  padding: 0;
  border: 0;
}
.crm-container.crm-public :is(.crm-contribution-main-form-block, .crm-contribution-confirm-form-block) .crm-submit-buttons .crm-button.crm-button-type-upload,
.crm-container.crm-public :is(.crm-contribution-main-form-block, .crm-contribution-confirm-form-block) .crm-submit-buttons .crm-button.crm-button-type-next {
  justify-content: center;
  width: 100%;
  max-width: 30rem;
  min-height: 4.25rem;
  padding: var(--crm-l-medium-2) var(--crm-l-reg-2);
  border: 0;
  border-radius: var(--nepean-radius-card);
  background: var(--nepean-highlight);
  color: var(--nepean-highlight-ink);
  font-size: 1.1875rem;
  font-weight: 700;
  box-shadow: var(--crm-shadow-block);
}
.crm-container.crm-public :is(.crm-contribution-main-form-block, .crm-contribution-confirm-form-block) .crm-submit-buttons .crm-button:is(.crm-button-type-upload, .crm-button-type-next):hover {
  background: color-mix(in srgb, var(--nepean-highlight) 88%, #000);
}
.crm-container.crm-public :is(.crm-contribution-main-form-block, .crm-contribution-confirm-form-block) .crm-submit-buttons .crm-button .crm-i {
  color: inherit;
}

/* Contribution "Other Amount": core sizes it for four characters, which
   beside a tall public-theme input read as tall and narrow. Keep the
   height, give it the width of an amount. */
.crm-container.crm-public .other_amount-section input[type="text"],
.crm-container.crm-public .other_amount-section input.four {
  /* min-width, not width: something (the `four` size class or a public
     Drupal theme) forces a narrow width more strongly, and a minimum wins
     over any width without resorting to !important */
  min-width: 10rem;
  max-width: 100%;
}
@media (max-width: 600px) {
  .crm-container.crm-public #crm-main-content-wrapper {
    padding: var(--crm-l-reg) var(--crm-l-reg);
  }
  .crm-container.crm-public .crm-section:has(> .label) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--crm-l-small);
  }
}
/* "Help spread the word": a soft panel with rounded share buttons in the
   palette (core draws it as a green success alert with black buttons) */
.crm-container.crm-public .crm-socialnetwork {
  margin: var(--crm-l-reg-2) 0 0;
  padding: var(--crm-l-reg) var(--crm-l-reg-2);
  background: var(--crm-layer1-bg-color);
  border: 0;
  border-radius: var(--nepean-radius-card);
  color: var(--crm-text-color);
}
.crm-container.crm-public .crm-socialnetwork h2 {
  margin: 0 0 var(--crm-l-small);
  font-family: var(--nepean-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--crm-heading-color);
}
.crm-container.crm-public .crm-socialnetwork p {
  color: var(--crm-text-color);
  font-size: 0.9375rem;
}
.crm-container.crm-public .crm-socialnetwork .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px 6px 0;
  padding: 5px 14px;
  border: 1px solid var(--crm-border-color);
  border-radius: 999px;
  background: var(--crm-paper);
  color: var(--crm-text-color);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: none;
}
.crm-container.crm-public .crm-socialnetwork .btn:hover,
.crm-container.crm-public .crm-socialnetwork .btn:focus-visible {
  border-color: var(--crm-primary-color);
  color: var(--crm-link-color);
}
.crm-container.crm-public .crm-socialnetwork .btn .crm-i {
  color: var(--crm-link-color);
}

/* Mailing pages the public reach from emails (unsubscribe, opt out,
   subscribe, confirm): a narrower panel for a single decision, the
   question as its headline, and the mailing list as a chip. Core draws the
   question as a status box and the list as a small bordered table. */
body.page-civicrm-mailing .crm-container.crm-public #crm-main-content-wrapper {
  max-width: 40rem;
}
body.page-civicrm-mailing .crm-container.crm-public #crm-main-content-wrapper .messages.status {
  margin: 0 0 var(--crm-l-medium-2);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: var(--nepean-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--crm-heading-color);
}
body.page-civicrm-mailing .crm-container.crm-public #crm-main-content-wrapper .messages.status::before {
  display: none;
}
body.page-civicrm-mailing .crm-container.crm-public .messages + table.selector {
  width: auto;
  margin: 0 0 var(--crm-l-reg) !important; /* beats core's inline margin-top */
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.page-civicrm-mailing .crm-container.crm-public .messages + table.selector :is(tr, td) {
  padding: 0;
  background: transparent;
  border: 0;
}
body.page-civicrm-mailing .crm-container.crm-public .messages + table.selector td strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--nepean-accent-soft);
  color: var(--crm-link-color);
  font-weight: 600;
}
body.page-civicrm-mailing .crm-container.crm-public .messages + table.selector td strong::before {
  content: "\2709"; /* envelope */
  font-weight: 400;
}
body.page-civicrm-mailing .crm-container.crm-public #crm-main-content-wrapper .crm-form-block p {
  color: var(--crm-text-color);
  line-height: 1.6;
}
body.page-civicrm-mailing .crm-container.crm-public #crm-main-content-wrapper .crm-form-block > br {
  display: none;
}
body.page-civicrm-mailing .crm-container.crm-public #crm-main-content-wrapper .crm-submit-buttons {
  margin-top: var(--crm-l-reg);
  padding-top: var(--crm-l-reg);
  border-top: 1px solid var(--crm-border-color);
}

/* Nepean (CWS) vars */
:root {
--nepean-accent: #095172;
--nepean-accent-hover: #003c58;
--nepean-accent-soft: #e2f1f3;
--nepean-accent-ink: #1a6f7b;
--nepean-accent-text: #ffffff;
--nepean-brand: #40a0ad;
--nepean-highlight: #ffc31f;
--nepean-highlight-soft: #fff3cc;
--nepean-highlight-ink: #003c58;
--nepean-warm: #cc0066;
--nepean-warm-soft: #fbe6f0;
--nepean-ground: #f3f2ee;
--nepean-paper: #ffffff;
--nepean-layer: #edece6;
--nepean-layer-2: #e4e2da;
--nepean-line: #e2e0d8;
--nepean-line-strong: #c9c6bb;
--nepean-text: #003c58;
--nepean-muted: #56707d;
--nepean-menubar: #003c58;
--nepean-shadow: 0 1px 2px rgba(0,60,88,.05), 0 4px 16px rgba(0,60,88,.05);
--nepean-shadow-pop: 0 12px 40px rgba(0,60,88,.18);
--crm-c-blue-dark: #095172;
--crm-info-color: #095172;
--crm-notify-bg-color: #003c58f2;
--nepean-font-display: "TT Norms Pro", "Montserrat", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}
:root { color-scheme: light; }