/* The site font: Montserrat (the 300-800 range: every Page Builder weight, and the 450 the site uses
   for body text), loaded once here for every page that uses this stylesheet; the member and admin pages
   also preconnect to Google Fonts in their <head> */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

/* The admin's ONE list look, the Automations look (Ben 2026-11-06: "make every page look as good as the
   automations"). In plain words: the page on light grey, the list on white with no frame and square
   corners; the page title 22px; headings 13px bold in capitals, the sorted one blue with a small arrow
   (a heading is a button: public/admin-table-sort.js, the one sort helper); rows 38px, cells 13px
   semibold in black, 16px at the sides, one thin #f2f2f2 line under each row, a pale hover, no
   stripes; the same small buttons and inputs as everywhere; a plain grey line when empty; on a phone
   each row becomes a short card with its labels. The values are the --olist-* tokens in ONE place
   ("Ontraport's list look", further down; dark mode there too). A page takes it with .list-op-page on
   its panel and "members-table list-style list-op" on its table; nothing is copied per page. */

/* ============================================
   Theme — change the look of the whole site here
   Values measured from supabase.com (light theme)
   ============================================ */
:root {
  /* Native controls (selects, checkboxes, date pickers, scrollbars) follow the theme */
  color-scheme: light;

  /* Colors */
  --color-bg: #FDFDFD;
  --color-surface: #FFFFFF;
  --color-surface-alt: rgba(3, 3, 3, 0.027);
  --color-text: #030303;
  --color-text-muted: #464646;
  --color-text-lighter: #696969;
  --color-border: rgba(3, 3, 3, 0.081);
  --color-border-strong: rgba(3, 3, 3, 0.146);
  --color-input-bg: rgba(0, 0, 0, 0.015);

  --color-brand: #3ECF8E;
  --color-primary: #0E7E4E;
  --color-primary-hover: #0B6B42;
  --color-primary-text: #FAFCFB;
  --color-secondary: #FFFFFF;
  --color-secondary-hover: #F3F3F3;
  --color-secondary-text: #030303;
  --color-danger: #E54D2E;
  --color-danger-soft: rgba(229, 77, 46, 0.08);

  /* Text in colour, set once for both themes (contrast at least 4.5:1 on the page and cards):
     links (and their hover / visited / focus), the green accent used as text, and red text */
  --color-link: #0E7E4E;
  --color-link-hover: #0B6B42;
  --color-link-visited: #0A6440;
  --color-link-focus: #0E7E4E;
  --color-accent-text: #0E7E4E;
  --color-danger-text: #C4391C;
  --color-warning-text: #B45309;
  --color-info-text: #1D5FD1;

  /* Button edges (Supabase uses inset rings instead of borders) */
  --shadow-button: 0 1px 3px 0 rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(0, 0, 0, 0.027), inset 0 0 0 1px rgba(0, 0, 0, 0.067);
  --shadow-button-secondary: 0 1px 3px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.067), inset 0 -1px 0 0 rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand);

  /* Fonts */
  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;

  /* Shape: ONE token, square corners everywhere (member area, public pages, admin, the automation
     canvas). Every other corner value follows it; only true circles (radio buttons, status dots,
     spinners, avatars) are round. Checkout and the legal pages keep their own (below). */
  --radius: 0;
  --radius-sm: var(--radius);
  --radius-button: var(--radius);

  /* Layout — width of the main box on every page */
  --card-width: 768px;

  /* Buttons: one very light blue look for every .btn (text contrast well above 4.5:1).
     No border; a solid fill. --btn-radius sets the corners of every button in one place. */
  --btn-radius: var(--radius);
  --btn-bg: #eaf3fd;
  --btn-bg-hover: #dcecfc;
  --btn-bg-active: #cfe4fa;
  --btn-text: #0f3a63;
  --btn-focus: #2f7fd1;
  --btn-disabled-bg: #f4f8fd;
  --btn-disabled-text: #7d93ab;
  /* Destructive buttons (Delete, Remove...): a very light red */
  --btn-danger-bg: #fdeeee;
  --btn-danger-bg-hover: #fbe2e2;
  --btn-danger-bg-active: #f8d4d4;
  --btn-danger-text: #8a1c1c;

  /* Admin top bar: its own deep navy, distinct from the page (all text at least 4.5:1) */
  --nav-bg: #0f3a63;
  --nav-text: #e8f1fb;
  --nav-text-hover: #ffffff;
  --nav-active-bg: #1d5a99;
  --nav-active-text: #ffffff;
  --nav-hover-bg: rgba(255, 255, 255, 0.10);
  --nav-focus: #a9d1fb;
  --nav-pad-x: 40px;

  /* Breadcrumb band (every page that has one) */
  --crumb-bg: #eaf3fd;
  --crumb-text: #0f3a63;
  --crumb-link-hover: #1d5a99;
  --crumb-height: 44px;

  /* Height of the admin top bar (kept in step with the real bar by admin.js) */
  --admin-nav-height: 56px;

  /* Course progress bar slices */
  --progress-done: #2e9e5b;
  --progress-open: #cfe4fa;
  --progress-locked: #e9eef4;
  --progress-locked-stripe: #d3dce7;
  /* Time zone picker groups (timezones.js): US & Canada, Europe, Other */
  --tz-us-bg: #eaf3fd;
  --tz-us-head: #d4e6fb;
  --tz-eu-bg: #e8f6ed;
  --tz-eu-head: #d1eedb;
  --tz-other-bg: #f1f2f4;
  --tz-other-head: #e2e5e9;
}

/* Checkout and the legal pages (Privacy, Terms, Text updates) are left exactly as they were */
body.checkout-page,
body.legal-body {
  --radius-sm: 8px;
  --radius: 12px;
  --radius-button: 9px;
}

/* Dark theme: follows the device setting unless the member chose a theme (theme.js sets
   data-theme on <html>). data-theme="light" keeps the light values above even on a dark device;
   data-theme="dark" uses the same dark values below on any device. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #131413;
    --color-surface: #181A19;
    --color-surface-alt: rgba(237, 239, 238, 0.033);
    --color-text: #EDEFEE;
    --color-text-muted: #BCBDBC;
    --color-text-lighter: #989A99;
    --color-border: rgba(237, 239, 238, 0.075);
    --color-border-strong: rgba(237, 239, 238, 0.135);
    --color-input-bg: rgba(237, 239, 238, 0.049);
    --tz-us-bg: #15243a;
    --tz-us-head: #1d3352;
    --tz-eu-bg: #14281c;
    --tz-eu-head: #1b3826;
    --tz-other-bg: #202322;
    --tz-other-head: #2b2f2d;

    --shadow-button: 0 1px 3px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    --shadow-button-secondary: 0 1px 3px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 -1px 0 0 rgba(0, 0, 0, 0.06);
    --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    --color-danger-soft: rgba(229, 77, 46, 0.12);

    /* Links and coloured text on dark: the light brand green (about 8.8:1 on the cards) and a light red */
    --color-link: #3ECF8E;
    --color-link-hover: #74DDAD;
    --color-link-visited: #5CC79A;
    --color-link-focus: #74DDAD;
    --color-accent-text: #3ECF8E;
    --color-danger-text: #FF8A70;
    --color-warning-text: #F5B65A;
    --color-info-text: #8AB4FF;

    /* Buttons on dark backgrounds: a deep blue tint with light text (contrast about 11:1) */
    --btn-bg: #1b2b3c;
    --btn-bg-hover: #223750;
    --btn-bg-active: #294461;
    --btn-text: #d8e9fb;
    --btn-focus: #7db8f2;
    --btn-disabled-bg: #172230;
    --btn-disabled-text: #7c90a6;
    --btn-danger-bg: #3a1e21;
    --btn-danger-bg-hover: #4a252a;
    --btn-danger-bg-active: #592c32;
    --btn-danger-text: #ffd9d6;

    /* A bluer navy that stays clearly apart from the dark page */
    --nav-bg: #17395c;
    --nav-text: #e8f1fb;
    --nav-text-hover: #ffffff;
    --nav-active-bg: #2a66a6;
    --nav-active-text: #ffffff;
    --nav-hover-bg: rgba(255, 255, 255, 0.12);
    --nav-focus: #b8dafc;

    --crumb-bg: #15293f;
    --crumb-text: #dcebfb;
    --crumb-link-hover: #a9d1fb;

    --progress-done: #3fbf74;
    --progress-open: #2c4f75;
    --progress-locked: #1d2630;
    --progress-locked-stripe: #2b3846;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #131413;
  --color-surface: #181A19;
  --color-surface-alt: rgba(237, 239, 238, 0.033);
  --color-text: #EDEFEE;
  --color-text-muted: #BCBDBC;
  --color-text-lighter: #989A99;
  --color-border: rgba(237, 239, 238, 0.075);
  --color-border-strong: rgba(237, 239, 238, 0.135);
  --color-input-bg: rgba(237, 239, 238, 0.049);
  --tz-us-bg: #15243a;
  --tz-us-head: #1d3352;
  --tz-eu-bg: #14281c;
  --tz-eu-head: #1b3826;
  --tz-other-bg: #202322;
  --tz-other-head: #2b2f2d;

  --shadow-button: 0 1px 3px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --shadow-button-secondary: 0 1px 3px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 -1px 0 0 rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  --color-danger-soft: rgba(229, 77, 46, 0.12);

  /* Links and coloured text on dark: the light brand green (about 8.8:1 on the cards) and a light red */
  --color-link: #3ECF8E;
  --color-link-hover: #74DDAD;
  --color-link-visited: #5CC79A;
  --color-link-focus: #74DDAD;
  --color-accent-text: #3ECF8E;
  --color-danger-text: #FF8A70;
  --color-warning-text: #F5B65A;
  --color-info-text: #8AB4FF;

  /* Buttons on dark backgrounds: a deep blue tint with light text (contrast about 11:1) */
  --btn-bg: #1b2b3c;
  --btn-bg-hover: #223750;
  --btn-bg-active: #294461;
  --btn-text: #d8e9fb;
  --btn-focus: #7db8f2;
  --btn-disabled-bg: #172230;
  --btn-disabled-text: #7c90a6;
  --btn-danger-bg: #3a1e21;
  --btn-danger-bg-hover: #4a252a;
  --btn-danger-bg-active: #592c32;
  --btn-danger-text: #ffd9d6;

  /* A bluer navy that stays clearly apart from the dark page */
  --nav-bg: #17395c;
  --nav-text: #e8f1fb;
  --nav-text-hover: #ffffff;
  --nav-active-bg: #2a66a6;
  --nav-active-text: #ffffff;
  --nav-hover-bg: rgba(255, 255, 255, 0.12);
  --nav-focus: #b8dafc;

  --crumb-bg: #15293f;
  --crumb-text: #dcebfb;
  --crumb-link-hover: #a9d1fb;

  --progress-done: #3fbf74;
  --progress-open: #2c4f75;
  --progress-locked: #1d2630;
  --progress-locked-stripe: #2b3846;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Every link without a colour of its own: the theme's link colour, never the browser's blue or
   purple, always underlined (not colour alone). :where() has no weight, so any link with a
   deliberate colour (buttons, the nav, the admin header, cards) keeps it. */
:where(a) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(a):visited {
  color: var(--color-link-visited);
}

:where(a):hover {
  color: var(--color-link-hover);
}

:where(a):focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 2px;
  border-radius: 0;
}

/* Buttons and form fields use the page's font (browsers otherwise give them their own) */
button,
input,
select,
textarea {
  font-family: inherit;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  background-color: var(--color-bg);
  color: var(--color-text);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 0 16px;
  -webkit-font-smoothing: antialiased;
}

/* Card Container Top Positioned */
.card {
  background: var(--color-surface);
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: var(--card-width);
  margin-top: 64px;
  margin-bottom: 64px;
}

.card-wide {
  max-width: var(--card-width);
}

h2 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  color: var(--color-text);
  margin-bottom: 24px;
}

h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text);
  margin-bottom: 12px;
}

/* Intro text under a heading */
.lead {
  color: var(--color-text-lighter);
  font-size: 14px;
  line-height: 20px;
  margin-top: -12px;
  margin-bottom: 24px;
}

.lead a {
  color: var(--color-text);
}

/* Form Inputs */
.input-field {
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-input-bg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-field::placeholder {
  color: var(--color-text-lighter);
}

.input-field:focus {
  border-color: var(--color-text-lighter);
  box-shadow: 0 0 0 2px var(--color-border);
}

/* Reusable Buttons */
.btn-group {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Every button (.btn with any variant, on every page) shares one light blue look: a solid fill with
   no border and square corners (--btn-radius), the same sizes as before, hover, active, a visible
   focus outline and a paler disabled state. Primary and secondary look the same; destructive ones
   are light red. */
.btn,
.btn-primary,
.btn-secondary {
  display: inline-block;
  width: 100%;
  height: 38px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--btn-radius);
  background-color: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--btn-bg-hover);
  color: var(--btn-text);
}

.btn:active:not(:disabled) {
  background-color: var(--btn-bg-active);
}

.btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn:disabled:hover {
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  opacity: 1;
  cursor: not-allowed;
}

/* Destructive buttons: a very light red so they aren't mistaken for the others */
.btn.btn-danger-text,
.btn.btn-danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-text);
}

.btn.btn-danger-text:hover:not(:disabled),
.btn.btn-danger:hover:not(:disabled) {
  background-color: var(--btn-danger-bg-hover);
  color: var(--btn-danger-text);
}

.btn.btn-danger-text:active:not(:disabled),
.btn.btn-danger:active:not(:disabled) {
  background-color: var(--btn-danger-bg-active);
}

.btn.btn-danger-text:disabled,
.btn.btn-danger:disabled {
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-text-lighter);
  font-family: inherit;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  margin-top: 16px;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.btn-link:hover {
  color: var(--color-text);
}


/* User Badge & Dynamic Course Container */
.user-badge {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 0;
  margin-top: -12px;
  margin-bottom: 24px;
  display: inline-block;
  font-weight: 500;
}

.user-badge[hidden],
.account-email[hidden] {
  display: none;
}

.courses-box {
  background: var(--color-surface-alt);
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.course-list {
  list-style-type: none;
}

.course-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: border-color 0.2s ease;
}

.course-item:last-child {
  margin-bottom: 0;
}

.course-item:hover {
  border-color: var(--color-border-strong);
}

.course-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  color: var(--color-text);
}

.course-link::after {
  content: "\2192";
  flex-shrink: 0;
  color: var(--color-text-lighter);
  transition: color 0.2s ease, transform 0.2s ease;
}

.course-item:hover .course-link::after {
  color: var(--color-brand);
  transform: translateX(2px);
}

/* Page Header: breadcrumb on the left, account menu on the right */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.page-header [data-account-menu] {
  margin-left: auto;
  flex-shrink: 0;
}

/* Account Menu */
.account-menu {
  position: relative;
}

.btn.account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 26px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 16px;
  border-radius: var(--btn-radius);
}

.account-chevron {
  color: var(--color-text-lighter);
  transition: transform 0.2s ease;
}

.account-toggle[aria-expanded="true"] .account-chevron {
  transform: rotate(180deg);
}

.account-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 280px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.16), 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  /* account-menu.js caps the height to the room under the button; the rest scrolls inside */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.account-panel[hidden],
.account-view[hidden] {
  display: none;
}

.account-user {
  display: flex;
  flex-direction: column;
  padding: 8px 10px 10px;
}

/* The menu's groups (My learning, Help, My account): a thin line above each, a small quiet label
   (not focusable). A group with no shown item (admin, or items hidden for this member) is not shown,
   label and line included. */
.account-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.account-group:not(:has(> .account-item:not([hidden]))) {
  display: none;
}

.account-group-label {
  display: block;
  padding: 4px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-lighter);
  cursor: default;
  user-select: none;
}

/* Log out: last, set apart from the items above it */
.account-group .account-item-danger {
  margin-top: 6px;
  border-top: 1px solid var(--color-border);
}

.account-label {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-lighter);
}

.account-email {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.account-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}

.account-item:is(a) {
  text-decoration: none;
}

.account-item:hover,
.account-item:focus-visible {
  background: var(--color-surface-alt);
  outline: none;
}

.account-item-danger {
  color: var(--color-danger-text);
}

.account-form {
  padding: 8px 10px 10px;
}

.account-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 12px;
}

.account-field-label {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.account-form .input-field {
  margin-bottom: 10px;
}

.account-hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-lighter);
}

.account-message {
  font-size: 12px;
  line-height: 16px;
  min-height: 16px;
  margin: 8px 0;
  color: var(--color-text-muted);
}

.account-message.is-error {
  color: var(--color-danger-text);
}

.account-message.is-success {
  color: var(--color-accent-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .account-message.is-success {
    color: var(--color-brand);
  }
}

:root[data-theme="dark"] .account-message.is-success {
  color: var(--color-brand);
}

.account-form-actions {
  display: flex;
  gap: 8px;
}

.account-form-actions .btn {
  height: 32px;
  padding: 6px 12px;
}

/* Admin: tabs */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
}

@media (max-width: 420px) {
  .tabs {
    gap: 0;
  }

  .tab {
    padding: 8px;
  }
}

.tab {
  padding: 8px 12px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text-lighter);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tab:hover {
  color: var(--color-text);
}

.tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 0;
}

.tab-panel[hidden],
.admin-form[hidden],
.playlist-row .badge[hidden],
#admin-page[hidden],
.admin-toast[hidden] {
  display: none;
}

/* Admin: forms and fields */
.field-label {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.field-hint {
  font-weight: 450;
  color: var(--color-text-lighter);
}

select.input-field {
  appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23898989' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

textarea.input-field {
  height: auto;
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
}

.input-narrow {
  max-width: 140px;
}

.admin-add-form {
  margin-bottom: 28px;
}

.admin-inline-row {
  display: flex;
  gap: 8px;
}

.admin-inline-row .input-field {
  margin-bottom: 0;
}

.admin-form {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.admin-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* Admin: lists */
.admin-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

.admin-list-header h3 {
  margin-bottom: 0;
}

.admin-list {
  list-style: none;
}

.admin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  margin-bottom: 8px;
}

.admin-row-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.admin-row-editing .input-field {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.admin-order {
  flex-shrink: 0;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.admin-empty {
  padding: 16px 12px;
  font-size: 14px;
  color: var(--color-text-lighter);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  text-align: center;
}

/* Admin: lesson enabled/disabled switch */
.status-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px 0 4px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}

.status-switch:hover {
  background: var(--color-surface-alt);
}

.status-switch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.status-switch:disabled {
  opacity: 0.5;
  cursor: progress;
}

.switch-track {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 16px;
  border-radius: 0;
  background: var(--color-border-strong);
  transition: background-color 0.2s ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.status-switch[aria-checked="true"] .switch-track {
  background: var(--color-primary);
}

.status-switch[aria-checked="true"] .switch-track::after {
  transform: translateX(12px);
}

.status-switch[aria-checked="false"] .switch-label {
  color: var(--color-text-lighter);
}

.switch-label {
  min-width: 56px;
  text-align: left;
}

/* Disabled lessons are dimmed, but their controls stay fully usable */
.admin-row.is-disabled {
  background: var(--color-surface-alt);
}

.admin-row.is-disabled .admin-order,
.admin-row.is-disabled .admin-row-title {
  opacity: 0.5;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.checkbox-field input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Admin: course add/edit "Enabled" checkbox */
.admin-add-active {
  margin: 10px 0 0;
}

.admin-row-editing .checkbox-field {
  margin: 0;
  flex-shrink: 0;
}

.admin-disable-note {
  flex-basis: 100%;
  order: 10;
  font-size: 12px;
}

.admin-row-editing {
  flex-wrap: wrap;
}

.admin-row-editing > .input-field {
  flex: 1 1 200px;
  width: auto;
}

.admin-disable-note[hidden] {
  display: none;
}

.unavailable-message {
  margin-bottom: 16px;
}

/* Admin: members */
.member-add-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.8fr;
  gap: 0 12px;
}

.member-add-grid .field-hint {
  display: block;
  font-size: 12px;
  margin: -6px 0 10px;
}

.member-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  border: none;
  margin: 0 0 12px;
  padding: 0;
}

.member-mode .checkbox-field {
  margin: 0;
}

.member-add-grid > [hidden] {
  display: none;
}

.member-add-hint {
  font-size: 12px;
  line-height: 16px;
  margin: -2px 0 12px;
}

.member-search {
  max-width: 260px;
  margin-bottom: 0;
}

.table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.members-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-lighter);
  background: var(--color-surface-alt);
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.members-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.members-table th:first-child,
.members-table td:first-child {
  padding-left: 12px;
}

.members-table th:last-child,
.members-table td:last-child {
  padding-right: 12px;
}

.members-table tbody tr:last-child td {
  border-bottom: none;
}

.members-table tr.is-disabled td {
  background: var(--color-surface-alt);
}

.members-table tr.is-disabled td:not(.member-actions):not([data-label="Status"]) {
  opacity: 0.5;
}

.member-email {
  font-weight: 500;
  overflow-wrap: break-word;
}

/* Members list: "First Last", the email as a smaller line under it */
.member-name-cell .member-name-email {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.member-phone {
  white-space: nowrap;
  color: var(--color-text-muted);
}

/* Members list: the row number (#) and the Member ID (cut short, all of it in the tooltip, Copy) */
#panel-members .members-table .col-num {
  width: 1%;
  padding-right: 4px;
  text-align: right;
  white-space: nowrap;
  color: var(--color-text-lighter);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

#panel-members .member-id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

#panel-members .member-id-text {
  display: inline-block;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  background: none;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  color: var(--color-text-muted);
}

#panel-members .member-id-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

#panel-members .member-id-copy:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

#panel-members .member-id-copy:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

#panel-members .member-id-copy svg {
  width: 14px;
  height: 14px;
}

#panel-members .member-id-note {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* A column turned off with "Columns" (admin.js MEMBER_COLUMN_DEFS; Name and Email never both) */
#panel-members .members-table.hide-col-num [data-col="num"],
#panel-members .members-table.hide-col-name [data-col="name"],
#panel-members .members-table.hide-col-email [data-col="email"],
#panel-members .members-table.hide-col-id [data-col="id"],
#panel-members .members-table.hide-col-phone [data-col="phone"],
#panel-members .members-table.hide-col-phone2 [data-col="phone2"],
#panel-members .members-table.hide-col-automations [data-col="automations"],
#panel-members .members-table.hide-col-spent [data-col="spent"],
#panel-members .members-table.hide-col-products [data-col="products"],
#panel-members .members-table.hide-col-sms [data-col="sms"],
#panel-members .members-table.hide-col-lessons [data-col="lessons"],
#panel-members .members-table.hide-col-subscription [data-col="subscription"],
#panel-members .members-table.hide-col-added [data-col="added"],
#panel-members .members-table.hide-col-status [data-col="status"] {
  display: none;
}

/* Automations / Spent (numbers, right-aligned, tabular), Products (chips: the first 2 and "+N"), SMS */
#panel-members .members-table .col-num-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#panel-members .member-product-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 260px;
}

#panel-members .member-product-chip,
#panel-members .member-product-more {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  padding: 0 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-members .member-product-more {
  color: var(--color-text-muted);
}

#panel-members .member-sms {
  font-size: 12px;
  white-space: nowrap;
}

#panel-members .member-sms.is-conversation {
  color: var(--color-accent-text);
  font-weight: 600;
}

#panel-members .member-sms.is-sent_only,
#panel-members .member-sms.is-none {
  color: var(--color-text-muted);
}

#panel-members .member-columns-sql-note[hidden] {
  display: none;
}

/* "Columns": at the end of the bar above the table; its popup opens under it, inside the screen */
.admin-layout .member-columns {
  position: relative;
  margin-left: auto;
}

.admin-layout .member-columns-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 240px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.admin-layout .member-columns-pop[hidden] {
  display: none;
}

.admin-layout .member-columns-title {
  margin: 0 0 4px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-lighter);
}

.admin-layout .member-columns-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 6px;
  font-size: 14px;
  cursor: pointer;
}

.admin-layout .member-columns-item:hover {
  background: var(--color-surface-alt);
}

.admin-layout .member-columns-item.is-locked {
  cursor: default;
  color: var(--color-text-muted);
}

.admin-layout .member-columns-note {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-lighter);
}

.admin-layout .member-columns-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

/* Course, automation and step member lists: the email under the member's name */
.cm-member .cm-sub-email {
  display: block;
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-date {
  white-space: nowrap;
  color: var(--color-text-muted);
}

/* Member badges ("$97 SYR" yellow; a subscriber: the 🥇 below; admin.js memberBadgesNode, supabase/member-badges.sql):
   small square chips, 12px, a soft tint and a 1px edge in the badge's colour (readable in light and
   dark), in a row after the name that wraps on a phone */
.admin-layout .member-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 6px;
  vertical-align: 1px;
}

.admin-layout .member-badges:empty {
  display: none;
}

/* A subscriber's 🥇 (admin.js memberMedal; Ben 2026-11-03): the emoji right after the name, the old
   badge's words as its tooltip (hover, focus, a tap or a long press) */
.admin-layout .member-medal {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 18px;
  cursor: help;
}

.admin-layout .member-medal:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

.admin-layout .member-medal.is-open::after,
.admin-layout .member-medal:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  width: max-content;
  max-width: 260px;
  padding: 4px 8px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: pre-line;
  text-transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.admin-layout .member-badge {
  --badge-c: var(--color-text-muted);
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--badge-c);
  border-radius: 0;
  background: color-mix(in srgb, var(--badge-c) 14%, var(--color-surface));
  color: var(--badge-c);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  cursor: default;
}

/* (yellow: the warning colour with a little of the text colour, so 12px words read in light and dark) */
.admin-layout .member-badge.is-yellow { --badge-c: color-mix(in srgb, var(--color-warning-text) 80%, var(--color-text)); }
.admin-layout .member-badge.is-blue { --badge-c: var(--color-info-text); }
.admin-layout .member-badge.is-green { --badge-c: var(--color-accent-text); }
.admin-layout .member-badge.is-red { --badge-c: var(--color-danger); }

/* (in the member pop-up: beside the heading) */
.admin-layout #member-view-badges {
  margin: 4px 0 0;
}

/* A member's own "Lesson order" (Force linear / Force free) on their row and profile */
.admin-layout .badge.lesson-order-badge {
  margin-left: 6px;
  font-size: 11px;
  line-height: 16px;
  padding: 0 6px;
  vertical-align: 1px;
  color: var(--color-warning-text);
  border: 1px solid currentColor;
  background: transparent;
}

.admin-layout .mv-lesson-order {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-layout .mv-lesson-order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-layout .mv-lesson-order-badge:empty {
  display: none;
}

.admin-layout .mv-lesson-order-badge .lesson-order-badge {
  margin-left: 0;
}

.you-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 0;
  border: 1px solid var(--color-border-strong);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-text-muted);
  vertical-align: 1px;
}

.member-actions .admin-row-actions {
  flex-wrap: nowrap;
}

.member-edit-row td {
  background: var(--color-surface-alt);
}

.admin-empty-cell {
  text-align: center;
  color: var(--color-text-lighter);
  padding: 20px 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* On narrow screens each member becomes a stacked card */
@media (max-width: 700px) {
  .member-add-grid {
    grid-template-columns: 1fr;
  }

  .admin-list-header:has(.member-search) {
    flex-wrap: wrap;
  }

  .member-search {
    max-width: none;
  }

  .members-table thead {
    display: none;
  }

  /* The Members list keeps its sortable headings: a wrapping row of buttons above the cards */
  #panel-members .members-table thead {
    display: block;
    border-bottom: 1px solid var(--color-border);
  }

  #panel-members .members-table thead tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
  }

  #panel-members .members-table thead th {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
  }

  #panel-members .members-table thead th.col-select {
    padding: 0 8px;
  }

  #panel-members .members-table thead th.col-actions,
  #panel-members .members-table thead th.col-num,
  #panel-members .members-table thead th.col-member-id {
    display: none;
  }

  /* The cards: "#" and the Member ID as label rows like the others */
  #panel-members .members-table td.col-num {
    width: 100%;
    padding-right: 12px;
    text-align: left;
  }

  #panel-members .th-sort {
    width: auto;
    min-height: 44px;
    padding: 8px 10px;
  }

  /* The name links: at least 44px high to tap */
  #panel-members .member-page-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .members-table,
  .members-table tbody,
  .members-table tr,
  .members-table td {
    display: block;
    width: 100%;
  }

  .members-table tr {
    border-bottom: 1px solid var(--color-border);
    padding: 8px 0;
  }

  .members-table tbody tr:last-child {
    border-bottom: none;
  }

  .members-table td {
    border-bottom: none;
    padding: 4px 12px;
  }

  .members-table td[data-label] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .members-table td[data-label]::before {
    content: attr(data-label);
    font-size: 12px;
    color: var(--color-text-lighter);
    flex-shrink: 0;
  }

  .members-table td.member-email {
    display: block;
    font-size: 15px;
    padding-top: 6px;
  }

  .members-table td.member-email::before {
    content: none;
  }

  .member-actions .admin-row-actions {
    justify-content: flex-start;
    padding-top: 4px;
  }
}

/* Admin: videos */
.video-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Videos page: All videos / Not in any course (N) / In a course (N), and "Show all videos" */
.admin-layout .video-usage-chips {
  flex: 1 1 100%;
  margin: 0;
}

.admin-layout .video-usage-clear[hidden] {
  display: none;
}

.admin-layout .video-unused-badge {
  align-self: flex-start;
  color: var(--color-text-muted);
}

.video-toolbar .input-field {
  margin-bottom: 0;
}

.video-toolbar input[type="search"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.video-toolbar select {
  flex: 0 1 220px;
  width: auto;
  min-width: 0;
}

.video-toolbar .btn {
  height: 36px;
}

.video-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.video-bulk-bar .checkbox-field {
  margin: 0;
}

/* A long button label ("Hide & embed only on benbakercoaching.com, …") wraps inside its button
   instead of making a phone page scroll sideways */
.video-bulk-bar .btn,
.admin-layout .video-bulk-bar .btn,
.admin-layout .video-bulk-bar .btn.has-icon {
  max-width: 100%;
  height: auto;
  white-space: normal;
  text-align: left;
}

/* Videos: "Select all N videos", and the Unlisted run (progress, summary) */
.video-bulk-wrap {
  margin-bottom: 12px;
}

.video-bulk-wrap .video-bulk-bar {
  margin-bottom: 6px;
}

.video-select-line {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.video-select-line:empty {
  display: none;
}

.video-unlisted-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.video-unlisted-box[hidden] {
  display: none;
}

.video-unlisted-progress {
  width: 100%;
  height: 10px;
  accent-color: var(--color-primary);
}

.video-unlisted-text,
.video-unlisted-summary {
  margin: 0;
  font-size: 14px;
}

.video-unlisted-failures {
  margin: 0;
  padding-left: 18px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.video-bulk-bar .btn.btn-sm {
  height: auto;
  min-height: 30px;
  white-space: normal;
}

.video-bulk-bar .field-hint {
  font-size: 12px;
}

.video-list {
  list-style: none;
}

.video-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  margin-bottom: 8px;
}

.video-select {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.video-thumb {
  display: block;
  flex-shrink: 0;
  width: 96px;
  height: 54px;
  border-radius: 0;
  object-fit: cover;
  background: var(--color-surface-alt);
}

.video-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.video-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.video-meta {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-lighter);
}

.video-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.badge {
  padding: 0 8px;
  border-radius: 0;
  border: 1px solid var(--color-border-strong);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.badge-warn {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-text);
}

.badge-ok {
  border-color: rgba(62, 207, 142, 0.55);
  background: rgba(62, 207, 142, 0.12);
  color: var(--color-text);
}

/* Admin, Showcases: a playlist's own password, edited in a row under the playlist */
.admin-layout .playlist-password-edit td {
  background: var(--color-surface-alt);
}

.admin-layout .playlist-password-form {
  display: grid;
  gap: 6px;
  max-width: 560px;
}

.admin-layout .playlist-password-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .playlist-password-fields {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-layout .playlist-password-fields .input-field {
  flex: 1;
  min-width: 0;
  height: 30px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.admin-layout .playlist-password-fields .input-field:focus-visible {
  border-color: var(--btn-focus);
  box-shadow: 0 0 0 2px var(--btn-focus);
}

@media (max-width: 560px) {
  .admin-layout .playlist-password-fields {
    flex-wrap: wrap;
  }

  .admin-layout .playlist-password-fields .input-field {
    flex-basis: 100%;
  }
}

.video-edit {
  display: grid;
  gap: 16px;
  padding: 16px;
  margin: -4px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.video-edit-section + .video-edit-section {
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.video-edit .admin-inline-row .input-field {
  margin-bottom: 0;
}

.video-hide {
  margin: 4px 0 2px;
}

.video-hint {
  font-size: 12px;
  line-height: 16px;
  margin: 2px 0 12px;
}

.video-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.video-page-info {
  font-size: 13px;
  color: var(--color-text-lighter);
  text-align: center;
}

.input-with-button {
  margin-bottom: 12px;
}

.input-with-button .btn {
  height: 36px;
  flex-shrink: 0;
}

/* Admin: showcases (read-only) */
.showcases-section {
  margin-top: 32px;
}

.showcase-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.showcase-tools .btn {
  height: 36px;
}

.showcase-name {
  font-weight: 500;
  overflow-wrap: break-word;
}

.showcase-name a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}

.showcase-name a:hover {
  text-decoration-color: currentColor;
}

@media (max-width: 700px) {
  .showcase-tools {
    width: 100%;
  }

  .showcase-tools .member-search {
    flex: 1;
  }

  .members-table td.showcase-name {
    display: block;
    font-size: 15px;
    padding-top: 6px;
  }

  .members-table td.showcase-name::before {
    content: none;
  }
}

/* Admin: reset all showcase passwords */
.showcase-reset-hint {
  font-size: 12px;
  line-height: 16px;
  margin: -6px 0 0;
}

.reset-progress {
  margin-top: 16px;
}

.reset-progress progress {
  width: 100%;
  height: 8px;
  accent-color: var(--color-primary);
}

.reset-status {
  font-size: 13px;
  line-height: 18px;
  margin: 6px 0 10px;
  color: var(--color-text-muted);
}

.reset-actions {
  justify-content: flex-start;
  margin: 0 0 10px;
}

.reset-actions .btn[hidden] {
  display: none;
}

.reset-results {
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.reset-results:empty {
  display: none;
}

.reset-item {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 18px;
  border-bottom: 1px solid var(--color-border);
}

.reset-item:last-child {
  border-bottom: none;
}

.reset-item-status {
  flex: 0 0 76px;
  font-weight: 500;
  color: var(--color-text-lighter);
}

.reset-item.is-ok .reset-item-status {
  color: var(--color-accent-text);
}

.reset-item.is-failed .reset-item-status,
.reset-item-error {
  color: var(--color-danger-text);
}

.reset-item-error {
  flex-basis: 100%;
  padding-left: 86px;
  font-size: 12px;
}

.showcase-test {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* TEMPORARY Vimeo diagnostic */
.video-diagnostic {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-border-strong);
}

.diagnostic-output {
  margin-top: 12px;
  padding: 12px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diagnostic-output[hidden] {
  display: none;
}

/* "Pick from Vimeo" pop-up */
.picker-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  margin: auto;
  padding: 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.35);
}

.picker-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.picker-header h3 {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .video-toolbar {
    flex-wrap: wrap;
  }

  .video-toolbar select {
    flex-basis: 100%;
  }

  .video-row {
    flex-wrap: wrap;
  }

  .video-thumb {
    width: 80px;
    height: 45px;
  }

  .video-info {
    flex-basis: calc(100% - 140px);
  }

  .video-row .admin-row-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .input-with-button {
    flex-wrap: wrap;
  }

  .picker-dialog {
    padding: 16px;
  }
}

/* Set / update password page */
#password-form[hidden] {
  display: none;
}

.password-hint {
  font-size: 12px;
  line-height: 16px;
  margin: -4px 0 4px;
}

.form-message {
  font-size: 13px;
  line-height: 18px;
  min-height: 18px;
  margin: 8px 0 12px;
}

.form-message.is-error {
  color: var(--color-danger-text);
}

.form-message.is-success {
  color: var(--color-accent-text);
}

/* Notices */
.notice {
  font-size: 13px;
  line-height: 20px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.notice[hidden] {
  display: none;
}

.notice-warning {
  color: var(--color-text);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* Small buttons */
.btn.btn-sm {
  width: auto;
  height: 30px;
  padding: 5px 12px;
  font-size: 12.5px; /* Montserrat is a little wider than the old font */
  line-height: 20px;
  border-radius: var(--btn-radius);
}

.btn.btn-icon {
  width: 30px;
  padding: 5px 0;
}

.btn-danger-text {
  color: var(--color-danger-text);
}

/* Admin: message toast */
.admin-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 80; /* above the full-screen panels (70), so a panel's messages are never hidden behind it */
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 14px 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.admin-toast.is-error {
  border-left-color: var(--color-danger);
}

/* Messages never cover a button. On a phone an open panel's Save bar is fixed at the bottom of the
   screen (.drawer-header-actions, about 64px): while one shows, every message that floats at the
   bottom sits just above it (--toast-lift). The pop-up notices (notify.js) sit under the top bar on a
   wide screen and at the bottom on a phone, above a Save bar too. Fixed: the page never moves. */
@media (max-width: 700px) {
  body.admin-layout:has(.admin-drawer:not([hidden]) .drawer-header-actions),
  body.admin-layout:has(.member-edit-row .drawer-header-actions),
  body.admin-layout:has(#video-browser .video-edit .drawer-header-actions) {
    --toast-lift: calc(68px + env(safe-area-inset-bottom));
  }

  body.admin-layout .admin-toast {
    bottom: calc(16px + var(--toast-lift, 0px));
  }

  body.admin-layout .live-notice,
  body.admin-layout .inbox-toast {
    bottom: calc(16px + var(--toast-lift, 0px));
  }

  body.admin-layout .notify-stack,
  html.has-alert-bar body.admin-layout .notify-stack {
    top: auto;
    /* (above the message bar too while it shows: --toast-stack, admin.js watchSaveBars) */
    bottom: calc(16px + var(--toast-lift, 0px) + var(--toast-stack, 0px));
  }
}

@media (min-width: 701px) {
  /* (under the admin's top bar, never over its buttons; also with the alert bar showing) */
  html body.admin-layout .notify-stack,
  html.has-alert-bar body.admin-layout .notify-stack {
    top: calc(var(--admin-nav-height, 56px) + 8px + var(--alert-bar-h, 0px));
  }
}

/* A hint with a long address in it (e.g. Email footer's unsubscribe link) breaks inside the address
   instead of making the page wider than a phone */
.admin-layout .field-hint {
  overflow-wrap: anywhere;
}

/* Lessons page on a phone: Course and Sort by each a full-width line (label above), the buttons wrapping */
@media (max-width: 600px) {
  .admin-layout #panel-lessons > .admin-toolbar .admin-toolbar-filters {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .admin-layout #panel-lessons > .admin-toolbar .admin-toolbar-filters .input-field {
    width: 100%;
    max-width: none;
  }

  .admin-layout #panel-lessons > .admin-toolbar .admin-toolbar-end {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.admin-toast-close {
  border: none;
  background: none;
  font-size: 18px;
  line-height: 20px;
  color: var(--color-text-lighter);
  cursor: pointer;
}

.admin-toast-close:hover {
  color: var(--color-text);
}

@media (max-width: 520px) {
  .admin-row {
    flex-wrap: wrap;
  }

  .admin-row-title {
    flex-basis: calc(100% - 40px);
  }

  .admin-row-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-row-editing .input-field {
    flex-basis: 100%;
  }
}

/* Breadcrumb band: the same full-width strip on every page that has a breadcrumb (course, lesson,
   admin). Crumbs are separated by "/", the current page is bold and not a link, and long crumbs are
   cut off with an ellipsis (the pages put the full text in the tooltip). */
.breadcrumb-bar {
  align-self: stretch;
  display: flex;
  align-items: center;
  min-height: var(--crumb-height);
  margin: 0;
  background: var(--crumb-bg);
  color: var(--crumb-text);
  font-size: 13px;
  line-height: 18px;
}

/* Member pages: the content lines up with the card's content below */
.breadcrumb-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--card-width);
  min-height: var(--crumb-height);
  margin: 0 auto;
  padding: 0 32px;
}

.breadcrumb-bar-inner [data-account-menu] {
  margin-left: auto;
  flex-shrink: 0;
}

.breadcrumb-bar + .card {
  margin-top: 32px;
}

.breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* One line, never wrapping; every crumb is cut with "…" when there isn't room. The current page
   keeps the most room (the others shrink first). */
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.breadcrumb li {
  display: block;
  flex: 0 4 auto;
  min-width: 0;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--crumb-text);
  font-weight: 500;
}

.breadcrumb li[aria-current] {
  flex: 0 1 auto;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--crumb-text);
  opacity: 0.55;
  font-weight: 400;
}

.breadcrumb li > a {
  display: inline;
  white-space: nowrap;
}

/* "‹ Back" (site-bar.js): phones only */
.breadcrumb-back {
  display: none;
}

.breadcrumb li[aria-current] {
  font-weight: 700;
}

.breadcrumb a {
  color: var(--crumb-text);
  font-weight: 450;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--crumb-link-hover);
  text-decoration-color: currentColor;
}

.breadcrumb a:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .breadcrumb-bar-inner {
    padding: 0 20px; /* the card's phone padding */
  }
}

/* Phones: a compact trail, "‹ Back" (to the parent) and the current page, on one line; the other
   crumbs and the separators are hidden. The Account menu is in the top bar there (site-bar.js). */
@media (max-width: 600px) {
  .breadcrumb-bar-inner {
    gap: 10px;
    overflow: hidden;
  }

  .breadcrumb-back {
    display: inline-flex;
    flex: none;
    align-items: center;
    color: var(--crumb-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .breadcrumb-back[hidden] {
    display: none;
  }

  .breadcrumb-back:focus-visible {
    outline: 2px solid var(--btn-focus);
    outline-offset: 2px;
  }

  .breadcrumb li:not([aria-current]) {
    display: none;
  }

  .breadcrumb li[aria-current] {
    flex: 1 1 auto;
    max-width: none;
  }

  .breadcrumb li + li::before {
    content: none;
  }
}

.nav-back {
  display: inline-block;
  width: auto;
  height: 26px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}

.lesson-display { margin-top: 20px; }
.lesson-body { line-height: 24px; color: var(--color-text-muted); margin-top: 16px; }
.lesson-body p { margin-bottom: 16px; }
.lesson-body a:not(.btn) { color: var(--color-link); }
.text-muted { color: var(--color-text-lighter); }

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: var(--radius-sm);
  background: #000;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile */
@media (max-width: 520px) {
  .card {
    padding: 24px 20px;
    margin-top: 32px;
    margin-bottom: 32px;
  }

  h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .btn-group {
    flex-direction: column;
  }

  .courses-box {
    padding: 12px;
  }
}

/* ======================================================================
   Public checkout (buy.html, thank-you.html)
   ====================================================================== */

.checkout-page .checkout-shell {
  width: 100%;
  max-width: 1040px;
  margin: 48px auto 64px;
}

.checkout-page .checkout-shell-narrow {
  max-width: 560px;
}

.checkout-page [hidden] {
  display: none !important;
}

.checkout-page .checkout-loading {
  text-align: center;
  color: var(--color-text-lighter);
}

.checkout-page .checkout-unavailable {
  margin: 0 auto;
  max-width: 560px;
}

.checkout-page .checkout-unavailable .btn {
  margin-top: 16px;
}

.checkout-page .checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.checkout-page .checkout-eyebrow {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.checkout-page .checkout-title {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 500;
  line-height: 44px;
  margin-bottom: 12px;
}

.checkout-page .checkout-subtitle {
  font-size: 17px;
  line-height: 26px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.checkout-page .checkout-price {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 600;
  line-height: 36px;
  margin-bottom: 20px;
}

.checkout-page .checkout-description {
  white-space: pre-line;
  line-height: 25px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}

.checkout-page .checkout-bullets {
  list-style: none;
  display: grid;
  gap: 10px;
}

.checkout-page .checkout-bullets li {
  position: relative;
  padding-left: 28px;
  line-height: 22px;
}

.checkout-page .checkout-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* white check mark on the green dot */

.checkout-page .checkout-bullets li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 6px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkout-page .checkout-pay {
  margin: 0;
  max-width: none;
  position: sticky;
  top: 24px;
}

.checkout-page .checkout-pay-title {
  font-size: 22px;
  line-height: 28px;
  margin-bottom: 16px;
}

.checkout-page .field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.checkout-page .field-hint {
  font-weight: 450;
  color: var(--color-text-lighter);
}

.checkout-page .hp-field,
.sms-optin .hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.checkout-page .form-message {
  min-height: 18px;
  margin: 4px 0 12px;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-danger-text);
}

.checkout-page .checkout-legal {
  margin-top: 14px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-lighter);
}

.checkout-page .checkout-legal a {
  color: var(--color-text-muted);
}

.checkout-page .checkout-status {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: 14px;
  color: var(--color-text-muted);
}

.checkout-page .thank-you-card {
  margin: 0;
  max-width: none;
  text-align: center;
}

.checkout-page .checkout-product {
  font-weight: 600;
  color: var(--color-text-muted);
  margin: -12px 0 12px;
}

.checkout-page .thank-you-message {
  white-space: pre-line;
  line-height: 24px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

/* Checkout pages: the offer card with one large button */
.checkout-page .checkout-shell-offer {
  max-width: 680px;
}

.checkout-page .checkout-offer {
  margin: 0;
  max-width: none;
}

.checkout-page .checkout-buy-button {
  width: 100%;
  min-height: 54px;
  margin-top: 8px;
  font-size: 18px;
}

/* Checkout pages: the details / payment popup */
body.checkout-modal-open {
  overflow: hidden;
}

.checkout-page .checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.checkout-page .checkout-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.checkout-page .checkout-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.checkout-page .checkout-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.checkout-page .checkout-modal-step {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-lighter);
  margin-bottom: 4px;
}

.checkout-page .checkout-modal-title {
  font-size: 22px;
  line-height: 28px;
}

.checkout-page .checkout-modal-close {
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.checkout-page .checkout-modal-close:disabled,
.checkout-page .checkout-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.checkout-page .checkout-modal-submit {
  width: 100%;
}

.checkout-page .checkout-back {
  border: none;
  background: none;
  padding: 0;
  margin-bottom: 12px;
  color: var(--color-accent-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.checkout-page .checkout-summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.checkout-page .checkout-summary span:last-child {
  white-space: nowrap;
}

/* Phones: the popup is a full-width sheet from the bottom */
@media (max-width: 560px) {
  .checkout-page .checkout-modal {
    align-items: flex-end;
    padding: 0;
  }

  .checkout-page .checkout-modal-dialog {
    max-width: none;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }
}

/* Checkout pages (checkout.html): products on the page and their total */
.checkout-page .checkout-items-title {
  font-size: 15px;
  font-weight: 600;
  margin: 8px 0 10px;
}

.checkout-page .checkout-items {
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.checkout-page .checkout-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.checkout-page .checkout-items li > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkout-page .checkout-item-sub {
  font-size: 14px;
  color: var(--color-text-muted);
}

.checkout-page .checkout-item-price {
  white-space: nowrap;
  font-weight: 500;
}

.checkout-page .checkout-total {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
}

.checkout-page .checkout-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 420px) {
  .checkout-page .checkout-name-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 860px) {
  .checkout-page .checkout-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .checkout-page .checkout-pay {
    position: static;
  }
}

@media (max-width: 520px) {
  .checkout-page .checkout-shell {
    margin: 24px auto 40px;
  }

  .checkout-page .checkout-title {
    font-size: 30px;
    line-height: 36px;
  }
}

/* Sign-in card: invitation-only note */
.invite-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

/* ======================================================================
   Member dashboard Library (index.html): tiles and list views
   ====================================================================== */

.library h3 {
  margin-bottom: 16px;
}

.library-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.library-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.library-tile:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.18);
}

.library-tile:focus-visible,
.library-row:focus-visible,
.library-back:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.library-tile-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.library-tile-icon svg {
  width: 26px;
  height: 26px;
}

.library-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.library-tile-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-lighter);
}

.library-tile-value {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.library-back {
  display: inline-block;
  margin-bottom: 12px;
  border-radius: 0;
  font-size: 14px;
  color: var(--color-text-lighter);
  text-decoration: none;
}

.library-back:hover {
  color: var(--color-text);
}

.library-view h3:focus {
  outline: none;
}

.library-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.library-row:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
}

.library-row-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.library-row-icon svg {
  width: 18px;
  height: 18px;
}

.library-row-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.library-row-chevron {
  flex-shrink: 0;
  display: grid;
  color: var(--color-text-lighter);
}

.library-row-chevron svg {
  width: 16px;
  height: 16px;
}

.library-empty {
  padding: 16px 12px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-text-lighter);
  text-align: center;
}

@media (max-width: 520px) {
  .library-tiles {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-tile {
    transition: none;
  }

  .library-tile:hover {
    transform: none;
  }
}

/* ======================================================================
   Admin dashboard layout: admin.html only (<body class="admin-layout">).
   Everything below is scoped to .admin-layout, so member pages are unaffected.
   ====================================================================== */

body.admin-layout {
  display: block;
  padding: 0;
  min-height: 100vh;
}

.admin-layout .admin-shell {
  min-height: 100vh;
}

/* Top bar: brand, section tabs, member site link and account menu (sticky). The tabs stay on one row
   and scroll sideways inside the bar when they don't fit. */
.site-bar {
  position: sticky;
  top: 0;
  z-index: 90; /* above every panel and drawer; notifications and dialogs stay above it */
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 var(--nav-pad-x);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: var(--nav-bg);
  color: var(--nav-text);
}

.site-brand {
  flex: none;
  color: var(--nav-text-hover);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.site-nav-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

/* Faded edges where more tabs are hidden */
.site-nav-wrap.fade-start .admin-nav {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
  mask-image: linear-gradient(to right, transparent 0, #000 32px);
}

.site-nav-wrap.fade-end .admin-nav {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px);
  mask-image: linear-gradient(to left, transparent 0, #000 32px);
}

.site-nav-wrap.fade-start.fade-end .admin-nav {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.site-nav .tab {
  flex: none;
  width: auto;
  margin: 0;
  padding: 0 12px;
  border: none;
  border-radius: 0;
  background: none;
  white-space: nowrap;
  color: var(--nav-text);
  box-shadow: inset 0 -2px 0 transparent;
}

.site-nav .tab:hover {
  color: var(--nav-text-hover);
  background: var(--nav-hover-bg);
}

/* Member pages: the tabs are links */
.site-nav a.tab {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* The active tab: a lighter navy fill with a light underline */
.site-nav .tab[aria-selected="true"],
.site-nav .tab[aria-current] {
  color: var(--nav-active-text);
  font-weight: 600;
  background: var(--nav-active-bg);
  box-shadow: inset 0 -3px 0 var(--nav-focus);
}

/* A light outline that stays visible on the dark bar */
.site-nav .tab:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: -3px;
}

/* ‹ › buttons at an edge that has more tabs (pointer users; the keyboard uses the arrow keys) */
.site-nav-scroll {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 24px;
  height: 32px;
  transform: translateY(-50%);
  border: none;
  background: var(--nav-bg);
  color: var(--nav-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.site-nav-scroll.is-start { left: 0; }
.site-nav-scroll.is-end { right: 0; }

.site-nav-scroll:hover {
  color: var(--nav-text-hover);
  background: var(--nav-active-bg);
}

.site-nav-scroll[hidden] {
  display: none;
}

.site-bar-end {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Live updates (live-updates.js): the small "Live" indicator (click: on/off) and the
   "New updates, click to refresh" notice shown while someone is typing or something is open */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
}

.live-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: #16a34a;
}

.live-pill.is-off .live-pill-dot {
  background: var(--color-text-lighter);
}

/* Not connected (a channel keeps failing): amber, never shown as "Live" */
.live-pill.is-down {
  border-color: #d97706;
  color: #92400e;
  background: #fffbeb;
}

.live-pill.is-down .live-pill-dot {
  background: #d97706;
}

:root[data-theme="dark"] .live-pill.is-down,
.site-bar .live-pill.is-down {
  border-color: #f59e0b;
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .live-pill.is-down {
    border-color: #f59e0b;
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.12);
  }
}

.live-pill:focus-visible,
.live-notice:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* On the dark member top bar */
.site-bar .live-pill {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.live-notice {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 60;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 8px 16px;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font: inherit;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.live-notice[hidden] {
  display: none;
}

/* Phones: the dot alone in the member top bar, so the bar never overflows (the label stays for
   screen readers through the button's tooltip and pressed state) */
@media (max-width: 600px) {
  .site-bar .live-pill {
    padding: 6px;
  }

  .site-bar .live-pill-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Member site link and the Account button: square, no border, a fill that suits the dark bar */
.site-bar-link {
  padding: 6px 10px;
  border-radius: var(--btn-radius);
  background: var(--nav-hover-bg);
  font-size: 13px;
  white-space: nowrap;
  color: var(--nav-text);
  text-decoration: none;
}

.site-bar-link:hover {
  background: var(--nav-active-bg);
  color: var(--nav-text-hover);
}

.site-bar-link:focus-visible,
.site-bar .btn.account-toggle:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: 2px;
}

.site-bar .btn.account-toggle {
  border: none;
  border-radius: var(--btn-radius);
  background: var(--nav-hover-bg);
  color: var(--nav-text);
}

.site-bar .btn.account-toggle:hover,
.site-bar .btn.account-toggle[aria-expanded="true"],
.site-bar .btn.account-toggle:active:not(:disabled) {
  background: var(--nav-active-bg);
  color: var(--nav-text-hover);
}

.site-bar .account-chevron {
  color: currentColor;
}

/* The Account dropdown keeps its normal light look, under the bar */
.site-bar .account-panel {
  top: calc(100% + 10px);
  color: var(--color-text);
}

/* The admin's one spacing (Ben 2026-11-03: "I asked you to create global padding and margins etc"):
   every page, title, toolbar, list and button uses these, never its own numbers, so nothing touches
   the edge of the screen or the blue bar.
     --page-pad-x         the page's left and right room (24px; 16px on a phone)
     --page-pad-top       the room under the blue bar, above the page's title (24px; 16px on a phone)
     --title-gap          between the title row and what comes under it (16px)
     --section-gap        between a page's sections (24px; 16px on a phone)
     --toolbar-gap        between the buttons of a toolbar (8px)
     --list-first-col-pad a list's first column (its tick boxes) from the list's left edge (16px; 12px
                          on a phone) */
.admin-layout {
  --page-pad-x: 24px;
  --page-pad-top: 24px;
  --title-gap: 16px;
  --section-gap: 24px;
  --toolbar-gap: 8px;
  --list-first-col-pad: 16px;
}

@media (max-width: 700px) {
  .admin-layout {
    --page-pad-x: 16px;
    --page-pad-top: 16px;
    --section-gap: 16px;
    --list-first-col-pad: 12px;
  }
}

/* Main area: the full page width, the page's room on every side */
.admin-layout .admin-main {
  min-width: 0;
  padding: var(--page-pad-top) var(--page-pad-x) 48px;
}

/* Every page: its first block right at --page-pad-top (no extra margin of its own), the title row one
   tidy row with --title-gap under it */
.admin-layout .admin-main .tab-panel > :first-child {
  margin-top: 0;
}

.admin-layout .admin-main .tab-panel > .admin-toolbar:first-child {
  align-items: center;
  min-height: 34px;
  margin-bottom: var(--title-gap);
}

.admin-layout .admin-main .tab-panel > .admin-toolbar:first-child .admin-title {
  margin: 0;
  line-height: 34px;
}

/* Under the bar: breadcrumb (left) and the live updates switch (right) */
.admin-layout .admin-topbar.breadcrumb-bar {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: calc(-1 * var(--page-pad-top)) calc(-1 * var(--page-pad-x)) var(--page-pad-top);
  padding: 0 var(--page-pad-x);
}

.admin-layout .admin-topbar .breadcrumb {
  margin: 0;
}

/* Columns in the list's heading row, at its right end (list-columns.js toHeader; Ben 2026-11-03): the
   heading's small upper-case text never applies to the button or its popup; a column's checkbox shows
   even while that column is hidden (the popup sits inside the table now) */
.admin-layout th .is-in-header {
  display: inline-block;
  position: relative;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 450;
  font-size: 13px;
}

.admin-layout th.col-actions:has(.is-in-header) {
  text-align: right;
}

.admin-layout .is-in-header .btn {
  min-height: 28px;
  font-weight: 500;
}

.admin-layout .member-columns-pop input[data-col] {
  display: inline-block !important;
}

/* Members: the selection bar takes no room while nothing is ticked (Columns is in the heading there) */
@media (min-width: 701px) {
  .admin-layout #member-tag-bulk.is-empty {
    display: none;
  }
}

/* The heading row stays at the top of the screen, under the main bar, while the list scrolls (the list's
   box no longer scrolls on its own on a wide screen). Only there: in a box that scrolls by itself (Sites,
   a list too wide to fit) the heading stays at the box's top and never slides down over the first row */
@media (min-width: 1000px) {
  .admin-layout .table-wrap.list-wrap.is-fitting,
  .admin-layout .table-wrap.automations-wrap.is-fitting {
    overflow: visible;
  }

  .admin-layout .table-wrap.is-fitting:is(.list-wrap, .automations-wrap) > .members-table.list-style th {
    top: calc(var(--admin-nav-height, 56px) + var(--alert-bar-h, 0px));
    z-index: 5;
  }
}

/* Members: "Lessons completed"'s course picker, in Columns under its tick (admin.js initMemberColumns;
   Ben 2026-11-03: the heading never gets taller) */
.admin-layout .member-columns-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px 26px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .member-columns-sub[hidden] {
  display: none;
}

.admin-layout .member-columns-sub .member-lessons-course {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 180px;
  min-height: 28px;
  padding: 2px 24px 2px 6px;
  font-size: 12px;
}

/* Its cell ("70 of 790"): plain text, the number in the cell's colour and " of 790" muted, a thin
   progress line under it; no box (Ben 2026-11-03: "look how ugly lessons complete button actually is") */
.admin-layout .member-lessons {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.admin-layout .member-lessons-of {
  color: var(--color-text-muted);
}

.admin-layout .member-lessons-bar {
  display: block;
  width: 100%;
  min-width: 56px;
  height: 3px;
  background: var(--olist-line, var(--color-border));
}

.admin-layout .member-lessons-bar > span {
  display: block;
  height: 100%;
  background: var(--olist-sorted, var(--color-link));
}

/* Sales & Pages → Subscriptions (admin-subscriptions.js): the totals, then Columns at the right */
.admin-layout .subscriptions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 10px;
}

.admin-layout .subscriptions-bar .list-columns {
  margin-left: auto;
}

.admin-layout .subscriptions-totals {
  margin: 0;
}

.admin-layout .member-sub-declined-word,
.admin-layout .op-sub-declined {
  color: var(--color-danger-text);
  font-weight: 600;
}

.admin-layout .op-sub {
  margin-top: 16px;
}

/* "Search & filters" on Members (admin.js initMemberSearchFold): the search box folded away; "N filters"
   on the button while some are on */
.admin-layout #member-filter-bar[hidden] {
  display: none !important;
}

.admin-layout .search-fold-btn.is-open {
  background: var(--color-surface-alt);
}

.admin-layout .search-fold-badge {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 11px;
  line-height: 18px;
}

.admin-layout .search-fold-badge[hidden] {
  display: none;
}

/* A hidden button stays hidden, whatever its own display (the lists' Actions show only once something is
   ticked: Ben 2026-11-03, "Remove the action buttons and only show if a checkbox is selected") */
.admin-layout .btn[hidden] {
  display: none !important;
}

/* (Ben 2026-11-03: "Remove the light blue bg row that says admin"): the row is gone; it shows only while
   the live updates have something to say ("Offline, retrying…", the paused banner with Resume) */
.admin-layout .admin-topbar.breadcrumb-bar .breadcrumb {
  display: none;
}

.admin-layout .admin-topbar.breadcrumb-bar:not(:has(#live-offline:not([hidden]), #live-banner:not([hidden]))) {
  display: none;
}

/* Toolbar above each table: title + count, search and filters, primary action on the right */
.admin-layout .admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--toolbar-gap) 12px;
  margin-bottom: var(--title-gap);
}

.admin-layout .admin-title {
  margin: 0 8px 0 0;
  font-size: 22px;
  line-height: 30px;
}

.admin-layout .admin-count {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 450;
  color: var(--color-text-lighter);
}

.admin-layout .admin-toolbar .input-field {
  height: 34px;
  margin: 0;
}

.admin-layout .admin-search {
  width: 280px;
  max-width: 100%;
}

.admin-layout .admin-toolbar-filters {
  display: flex;
  align-items: center;
  gap: var(--toolbar-gap);
}

.admin-layout .admin-toolbar-filters .field-label {
  margin: 0;
}

.admin-layout .admin-toolbar-filters select {
  width: auto;
  min-width: 220px;
}

/* (the buttons wrap when they don't fit: on a phone the Lessons page's five buttons made the whole page
   938px wide, and every box opened on it as wide) */
.admin-layout .admin-toolbar-end {
  display: flex;
  flex-wrap: wrap;
  gap: var(--toolbar-gap);
  margin-left: auto;
}

/* Members: the search and filters in one separate bar (its own surface, border, rounded corners):
   the search row, the collapsible filters panel and the applied-filter chips. No gap of its own, so a
   closed panel leaves no empty space (the panel's card and the chips bring their own top margin). */
.admin-layout .member-filter-bar {
  display: grid;
  gap: 0;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

.admin-layout .member-search-row {
  position: relative;
}

.admin-layout .member-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--color-text-lighter);
  pointer-events: none;
}

.admin-layout .admin-search.member-search {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 38px;
  background-color: var(--color-surface);
}

.admin-layout .member-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.admin-layout .member-filter-row .admin-toolbar-filters select {
  min-width: 160px;
  background-color: var(--color-surface);
}

/* The search's clear button, the applied filters, the "Filter members" card and its pickers */
.admin-layout .member-search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .member-search-clear:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.admin-layout .member-search-clear:focus-visible,
.admin-layout .chip-picker-remove:focus-visible,
.admin-layout .member-tag-mode-btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .member-search-clear[hidden],
.admin-layout .member-filter-legacy[hidden],
.admin-layout .chip-picker-list[hidden] {
  display: none;
}

.admin-layout .member-search::-webkit-search-cancel-button {
  display: none;
}

.admin-layout .chip-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-layout .chip-picker-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .chip-picker-remove:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* The always-visible row: search (grows), Filters, Sort, Clear all, and the count at the right */
.admin-layout .member-filter-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.admin-layout .member-filter-top .member-search-row {
  flex: 1 1 280px;
  min-width: 0;
}

.admin-layout .member-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
}

.admin-layout .member-filters-toggle[aria-expanded="true"] {
  border-color: var(--color-primary);
}

.admin-layout .member-filters-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 0;
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.admin-layout .member-filters-badge[hidden],
.admin-layout .member-filter-clear[hidden] {
  display: none;
}

.admin-layout .member-sort-select {
  width: auto;
  height: 38px;
  margin: 0;
  background-color: var(--color-surface);
}

.admin-layout .member-filter-top .member-filter-clear {
  font-size: 13px;
}

.admin-layout .member-result-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* The panel slides open and closed (its height animates from 0); no motion when reduced */
.admin-layout .member-filter-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.2s ease, opacity 0.2s ease;
}

.admin-layout .member-filter-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.admin-layout .member-filter-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.admin-layout .member-filter-panel.is-settled .member-filter-panel-inner {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .member-filter-panel {
    transition: none;
  }
}

.admin-layout .member-filter-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

/* The condition builder: each condition one row in four columns (field | operator | value | ×), the
   AND / OR switch between rows, a group bracketed by a bar on its left; at phone width the value goes
   under the field and operator. Colour tokens only. */
.admin-layout .mfb-items {
  display: grid;
  gap: 8px;
}

.admin-layout .mfb-items:empty {
  display: none;
}

.admin-layout .mfb-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(140px, 180px) minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: start;
}

.admin-layout .mfb-row select,
.admin-layout .mfb-number {
  width: 100%;
  height: 38px;
  min-width: 0;
  margin: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}

.admin-layout .mfb-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-layout .mfb-chips {
  flex: 1 1 220px;
  min-width: 0;
}

/* Long lists of chips scroll inside the box (the search field stays under them) */
.admin-layout .mfb-chips .chip-picker-chips:not(:empty) {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  max-height: 96px;
  overflow-y: auto;
}

.admin-layout .mfb-number {
  flex: 0 1 140px;
}

.admin-layout .mfb-row .mfb-choice {
  flex: 1 1 180px;
}

.admin-layout .mfb-and {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .mfb-mode {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
}

.admin-layout .mfb-remove {
  width: 32px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .mfb-remove:hover {
  border-color: var(--color-border);
  color: var(--color-text);
}

/* AND / OR between two rows: small, on its own line, lined up with the field column */
.admin-layout .mfb-join {
  display: inline-flex;
  justify-self: start;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  overflow: hidden;
}

.admin-layout .mfb-join-btn {
  min-width: 44px;
  padding: 2px 10px;
  border: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 20px;
  cursor: pointer;
}

.admin-layout .mfb-join-btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.admin-layout .mfb-join-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-layout .mfb-group {
  display: grid;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .mfb-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-layout .mfb-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .mfb .mfb-group .link-button {
  justify-self: start;
  font-size: 13px;
}

.admin-layout .mfb-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-layout .mfb-items:empty + .mfb-add {
  margin-top: 0;
}

.admin-layout .mfb-note {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .mfb-note[hidden],
.admin-layout .mfb-summary[hidden],
.admin-layout .mfb-sentence[hidden],
.admin-layout .mfb-footer-end .link-button[hidden] {
  display: none;
}

/* The filters in plain words: in the panel, and under the search bar while the panel is closed */
.admin-layout .mfb-summary,
.admin-layout .mfb-sentence {
  margin: 10px 0 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-layout .mfb-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .mfb-footer-end {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  font-size: 13px;
}

.admin-layout .mfb-footer-end .member-result-count {
  margin-left: 0;
}

.admin-layout .mfb-join-btn:focus-visible,
.admin-layout .mfb-remove:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .member-tag-mode {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
}

.admin-layout .member-tag-mode-btn {
  padding: 1px 9px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
  line-height: 18px;
  cursor: pointer;
}

.admin-layout .member-tag-mode-btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

.admin-layout .member-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-size: 14px;
  cursor: pointer;
}

.admin-layout .member-switch input {
  position: absolute;
  width: 34px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.admin-layout .member-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border-radius: 0;
  background: var(--color-border-strong);
  transition: background 0.15s ease;
}

.admin-layout .member-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.admin-layout .member-switch input:checked + .member-switch-track {
  background: var(--color-primary);
}

.admin-layout .member-switch input:checked + .member-switch-track::after {
  transform: translateX(14px);
}

.admin-layout .member-switch input:focus-visible + .member-switch-track {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .member-switch-track,
  .admin-layout .member-switch-track::after {
    transition: none;
  }
}

.admin-layout .chip-picker {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 3px 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .chip-picker:focus-within {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

.admin-layout .chip-picker-chips {
  display: contents;
}

.admin-layout .chip-picker-input {
  flex: 1 1 100px;
  min-width: 80px;
  height: 28px;
  padding: 0 4px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
}

.admin-layout .chip-picker-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 240px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.admin-layout .chip-picker-option,
.admin-layout .chip-picker-empty {
  padding: 6px 8px;
  border-radius: 0;
  color: var(--color-text);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.admin-layout .chip-picker-option {
  cursor: pointer;
}

.admin-layout .chip-picker-option:hover,
.admin-layout .chip-picker-option.is-active {
  background: var(--color-surface-alt);
}

.admin-layout .chip-picker-empty {
  color: var(--color-text-muted);
}

/* The searchable tag picker (admin.js tagCombo): steps, If / Else; the list opens under the field */
.admin-layout .tag-combo {
  position: relative;
  min-width: 0;
}

.admin-layout .tag-combo[hidden],
.admin-layout .tag-combo-list[hidden] {
  display: none;
}

.admin-layout .tag-combo-input {
  width: 100%;
  margin-bottom: 0;
}

.admin-layout .tag-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 260px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.admin-layout .tag-combo-option,
.admin-layout .tag-combo-empty {
  padding: 8px 10px;
  border-radius: 0;
  color: var(--color-text);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.admin-layout .tag-combo-option {
  cursor: pointer;
}

.admin-layout .tag-combo-option:hover,
.admin-layout .tag-combo-option.is-active {
  background: var(--color-surface-alt);
}

.admin-layout .tag-combo-option[aria-selected="true"] {
  font-weight: 600;
}

/* "+ Create tag" at the bottom of the list (the tag picker and the members' tag filters) */
.admin-layout .tag-combo-option.is-create,
.admin-layout .chip-picker-option.is-create {
  color: var(--color-primary);
  font-weight: 600;
  border-top: 1px solid var(--color-border);
}

.admin-layout .chip-picker-note {
  margin: 4px 0 0;
}

.admin-layout .chip-picker-note:empty {
  display: none;
}

.admin-layout .chip-picker-note.is-error {
  color: var(--color-danger-text);
}

.admin-layout .tag-combo-empty {
  color: var(--color-text-muted);
}

.admin-layout .tag-combo-note {
  margin: 4px 0 0;
}

.admin-layout .tag-combo-note:empty {
  display: none;
}

.admin-layout .tag-combo-note.is-error {
  color: var(--color-danger-text);
}

.admin-layout .cond-row .tag-combo {
  flex: 1 1 200px;
}

.admin-layout .trigger-tag-search {
  margin-bottom: 6px;
}

.admin-layout .trigger-tag-create[hidden] {
  display: none;
}

/* Touch screens: each choice at least 44px to tap */
@media (pointer: coarse) {
  .admin-layout .tag-combo-option {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

.admin-layout mark.member-match {
  padding: 0 1px;
  border-radius: 0;
  background: rgba(250, 204, 21, 0.45);
  color: inherit;
}

/* Phones: field and operator side by side, the value under them, × at the end of the first line */
@media (max-width: 640px) {
  .admin-layout .mfb-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
  }

  .admin-layout .mfb-value {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .admin-layout .mfb-remove {
    grid-column: 3;
    grid-row: 1;
  }
}

.admin-layout .member-load-note,
.admin-layout .email-list-note {
  margin: 0 0 12px;
}

/* The member's name opens their edit view: a link look, keyboard focus ring, no button frame */
.admin-layout .member-name-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.admin-layout .member-name-link:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-layout .member-name-link:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
  border-radius: 0;
}

/* Members list: the first and last name (or the email, for a member with no name) are links to the
   member's page: clearly clickable (underline on hover), the whole name is the target */
.admin-layout .member-page-link {
  display: inline-block;
  padding: 2px 0;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.admin-layout .member-page-link:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-layout .member-page-link:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
  border-radius: 0;
}

.admin-layout .member-email-cell .member-email-text {
  color: var(--color-text-muted);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.admin-layout .member-name-empty {
  color: var(--color-text-lighter);
}

/* Sortable headings: a button the size of the heading, an arrow on the sorted one */
.admin-layout #panel-members th.th-sortable {
  padding: 0;
}

.admin-layout .th-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.admin-layout .th-sort:hover {
  background: var(--color-surface-alt);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-layout .th-sort:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

.admin-layout th.is-sorted .th-sort {
  color: var(--color-accent-text);
}

.admin-layout .th-sort-arrow {
  font-size: 15px;
  line-height: 1;
}

.admin-layout .member-sort-note {
  flex-basis: 100%;
}

.admin-layout .member-sort-note[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .admin-layout .member-filter-bar {
    padding: 12px;
  }

  .admin-layout .member-filter-row .admin-toolbar-filters {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .admin-layout .member-filter-row .admin-toolbar-filters select {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.admin-layout .admin-toolbar .btn-sm {
  height: 34px;
}

.admin-layout .sync-reason {
  align-self: center;
  max-width: 320px;
  font-size: 12px;
  line-height: 16px;
  text-align: right;
}

.admin-layout .sync-reason[hidden] {
  display: none;
}

/* Course and lesson lists styled as table rows */
.admin-layout .admin-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}

.admin-layout .admin-list > li {
  margin: 0;
}

.admin-layout .admin-row {
  margin: 0;
  padding: 7px 12px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.admin-layout .admin-list > li:last-child,
.admin-layout .admin-list > li:last-child .admin-row {
  border-bottom: none;
}

.admin-layout .admin-list > li:nth-child(even) {
  background: var(--color-surface-alt);
}

.admin-layout .admin-list > li:hover {
  background: var(--color-border);
}

.admin-layout .admin-row.is-disabled {
  background: transparent;
}

.admin-layout .admin-list .admin-empty {
  border: none;
  border-radius: 0;
}

/* Tables: full width, sticky header, compact rows, zebra + hover, scroll inside their own box */
.admin-layout .table-wrap {
  overflow: auto;
  max-height: calc(100vh - 170px);
  background: var(--color-surface);
}

.admin-layout .members-table {
  min-width: 820px;
  font-size: 13.5px;
}

/* One clean row per showcase, fixed column widths so rows line up (admin.js showcaseRow) */
.admin-layout .showcases-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

/* (doubled class: these widths win over the general table rules, e.g. .col-actions' 1%) */
.admin-layout .members-table.showcases-table th.col-select,
.admin-layout .members-table.showcases-table td.col-select {
  width: 44px;
  min-width: 44px;
  padding-right: 0;
  position: static;
}

.admin-layout .members-table.showcases-table th.showcase-col-view {
  width: 190px;
}

.admin-layout .members-table.showcases-table th.showcase-col-library {
  width: 260px;
}

.admin-layout .members-table.showcases-table th.showcase-col-actions {
  width: 130px;
}

.admin-layout .members-table.showcases-table td.showcase-actions-cell {
  position: static;
  white-space: nowrap;
}

@media (min-width: 701px) {
  .admin-layout .members-table.showcases-table td.showcase-actions-cell {
    width: 130px;
  }
}

.admin-layout .showcases-table td {
  vertical-align: middle;
}

.admin-layout .showcases-table td.showcase-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-layout .showcase-video-count {
  font-weight: 400;
  color: var(--color-text-lighter);
}

.admin-layout .showcases-table td.showcase-actions-cell {
  text-align: right;
}

/* The Actions bar stays reachable while the list scrolls (as the Lessons bar) */
.admin-layout .showcase-bulk-bar {
  position: sticky;
  top: calc(var(--admin-nav-height, 56px) + 8px);
  z-index: 25;
  background: var(--color-surface);
}

/* Edit video: "Who can watch", the warning for videos used in courses, and "Share the link" */
.admin-layout .video-watch {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
}

.admin-layout .video-watch-choice {
  align-items: flex-start;
}

.admin-layout .video-watch-choice > span {
  display: grid;
  gap: 2px;
}

.admin-layout .video-link-warning[hidden] {
  display: none;
}

.admin-layout .video-link-warning ul {
  margin: 6px 0;
  padding-left: 18px;
}

.admin-layout .video-share .admin-inline-row .input-field {
  flex: 1 1 260px;
  min-width: 0;
}

.admin-layout .video-share-text {
  width: 100%;
  min-height: 72px;
  resize: vertical;
}

.admin-layout .btn.is-copied {
  color: var(--color-accent-text);
}

/* Showcase visibility: the state with its Change link, the bar for several, the panel */
.admin-layout .showcase-visibility {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.admin-layout .showcase-view.is-anybody {
  border-color: var(--color-warning-text);
  color: var(--color-warning-text);
}

.admin-layout .showcase-view.is-embed_only,
.admin-layout .showcase-view.is-password,
.admin-layout .showcase-view.is-nobody {
  color: var(--color-accent-text);
}

.admin-layout .showcase-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0 8px;
}

.admin-layout .showcase-reset-form {
  display: grid;
  gap: 12px;
}

.admin-layout .showcase-visibility-form {
  display: grid;
  gap: 12px;
}

.admin-layout .showcase-visibility-choice {
  align-items: flex-start;
}

.admin-layout .showcase-visibility-choice > span {
  display: grid;
  gap: 2px;
}

.admin-layout .showcase-visibility-password[hidden] {
  display: none;
}

.admin-layout .showcase-visibility-results .is-ok {
  color: var(--color-accent-text);
}

.admin-layout .showcase-visibility-results .is-failed {
  color: var(--color-danger-text);
}

/* A phone: each showcase a compact card: tick and name with its count, then visibility and the
   library state, then the Actions button the full width */
@media (max-width: 700px) {
  .admin-layout .showcases-table td.col-select {
    padding-top: 8px;
  }

  .admin-layout .showcases-table,
  .admin-layout .showcases-table tbody,
  .admin-layout .showcases-table tr,
  .admin-layout .showcases-table td {
    display: block;
    width: 100%;
  }

  .admin-layout .showcases-table thead {
    display: none;
  }

  .admin-layout .showcases-table tr.showcase-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    padding: 10px 12px;
  }

  .admin-layout .showcases-table tr.showcase-row td {
    padding: 2px 0;
  }

  .admin-layout .showcases-table tr.showcase-row td.col-select {
    grid-row: 1;
    width: auto;
    padding-top: 2px;
  }

  .admin-layout .showcases-table tr.showcase-row td.showcase-name {
    grid-column: 2;
    white-space: normal;
  }

  .admin-layout .showcases-table tr.showcase-row td.showcase-view-cell,
  .admin-layout .showcases-table tr.showcase-row td.showcase-library,
  .admin-layout .showcases-table tr.showcase-row td.showcase-actions-cell {
    grid-column: 1 / -1;
  }

  .admin-layout .showcases-table tr.showcase-row td.showcase-view-cell,
  .admin-layout .showcases-table tr.showcase-row td.showcase-library {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  .admin-layout .showcases-table tr.showcase-row td.showcase-actions-cell {
    padding-top: 8px;
    text-align: left;
  }

  .admin-layout .showcases-table tr.showcase-row td.showcase-actions-cell .actions-menu-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

/* Members: email panel and "Sent emails" list */
.admin-layout .field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.admin-layout .char-count {
  font-size: 12px;
  color: var(--color-text-lighter);
  font-variant-numeric: tabular-nums;
}

.admin-layout #email-to {
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
}

.admin-layout .email-message {
  height: auto;
  min-height: 220px;
  resize: vertical;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
}

.admin-layout .email-hint {
  font-size: 12px;
  line-height: 16px;
  margin: -6px 0 10px;
}

.admin-layout #email-force-field[hidden] {
  display: none;
}

.admin-layout .email-log {
  margin-top: 28px;
}

.admin-layout .admin-subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

.admin-layout .table-wrap-short {
  max-height: 320px;
}

.admin-layout .email-log-table {
  min-width: 640px;
}

.admin-layout .email-log-subject {
  overflow-wrap: anywhere;
}

/* "Reason: ..." under an email's subject (Sent emails, member Activity); an automation reason is a link */
.admin-layout .email-reason {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--color-text-muted);
  text-align: left;
  overflow-wrap: anywhere;
}

.admin-layout .email-reason.is-link {
  padding: 0;
  font-size: 12.5px;
  color: var(--color-accent-text);
}

.admin-layout .email-reason.is-unknown {
  font-style: italic;
}

.admin-layout .activity-reason {
  margin: 2px 0 0;
}

.admin-layout .email-log-error {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-danger-text);
  overflow-wrap: anywhere;
}

/* Page Builder → Image → Crop (page-builder.js openCropDialog) */
.admin-layout .pb-crop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

.admin-layout .pb-crop-dialog {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(820px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
}

.admin-layout .pb-crop-dialog .pb-dialog-title {
  margin: 0;
  font-size: 16px;
}

.admin-layout .pb-crop-stage {
  position: relative;
  align-self: center;
  max-width: 100%;
  touch-action: none;
  user-select: none;
  line-height: 0;
}

.admin-layout .pb-crop-img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
}

.admin-layout .pb-crop-rect {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  outline: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  cursor: move;
}

.admin-layout .pb-crop-rect:focus-visible {
  outline: 3px solid var(--btn-focus);
}

.admin-layout .pb-crop-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid #111111;
  border-radius: 0;
  background: #ffffff;
}

.admin-layout .pb-crop-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; }
.admin-layout .pb-crop-handle.is-n { left: 50%; top: 0; cursor: ns-resize; }
.admin-layout .pb-crop-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
.admin-layout .pb-crop-handle.is-e { left: 100%; top: 50%; cursor: ew-resize; }
.admin-layout .pb-crop-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }
.admin-layout .pb-crop-handle.is-s { left: 50%; top: 100%; cursor: ns-resize; }
.admin-layout .pb-crop-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; }
.admin-layout .pb-crop-handle.is-w { left: 0; top: 50%; cursor: ew-resize; }

.admin-layout .pb-crop-actions {
  justify-content: flex-end;
}

.admin-layout .pb-image-size .pb-range-number {
  width: 110px;
}

/* "Link to a page" (page-links.js): the page list, inside the email editor or over the page */
.page-pick-backdrop {
  position: fixed;
  z-index: 120;
}

.page-pick.email-subdialog {
  width: min(560px, 100%);
  border-radius: 0;
}

.page-pick .input-field {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.page-pick-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(50vh, 420px);
  overflow-y: auto;
  border: 1px solid var(--color-border);
}

.page-pick-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.page-pick-item:hover {
  background: var(--color-surface-alt);
}

.page-pick-item:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

.page-pick-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.page-pick-address {
  grid-column: 1;
  font-size: 12.5px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.page-pick-status {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 1px 8px;
  border: 1px solid var(--color-border-strong);
  font-size: 12px;
}

.page-pick-status.is-published {
  border-color: color-mix(in srgb, #16a34a 50%, transparent);
}

.page-pick-status.is-draft,
.page-pick-status.is-unpublished {
  border-color: color-mix(in srgb, var(--color-warning-text) 60%, transparent);
  color: var(--color-warning-text);
}

.page-pick-warn {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--color-warning-text) 50%, transparent);
  background: color-mix(in srgb, var(--color-warning-text) 8%, var(--color-surface));
}

.page-pick-warn[hidden] {
  display: none;
}

/* The lesson Description's Link box (rich-text.js openLinkBox): "Pick a page" above the web address,
   over the Edit lesson panel */
.rich-link-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.rich-link-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.rich-link-title {
  margin: 0 0 4px;
  font-size: 17px;
}

.rich-link-box .input-field {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.rich-link-box .field-label {
  margin: 4px 0 0;
}

.rich-link-status {
  margin: 0;
}

.rich-link-status[hidden],
.rich-link-list[hidden] {
  display: none;
}

.rich-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(40vh, 300px);
  overflow-y: auto;
  border: 1px solid var(--color-border);
}

.rich-link-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.rich-link-option:last-child {
  border-bottom: 0;
}

.rich-link-option:hover {
  background: var(--color-surface-alt);
}

.rich-link-option.is-active {
  background: var(--color-surface-alt);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.rich-link-option-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rich-link-option-state {
  font-weight: 400;
  color: var(--color-warning-text);
}

.rich-link-option-url {
  font-size: 12.5px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.rich-link-error:empty {
  display: none;
}

.rich-link-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.rich-link-actions .btn {
  border-radius: 0;
}

.rich-link-actions .btn[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .rich-link-box {
    padding: 16px;
  }

  .rich-link-actions .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }
}

.page-pick-warn p {
  margin: 0 0 8px;
}

/* Page settings → Link colour: the low-contrast warning */
.admin-layout .pb-contrast-warning {
  color: var(--color-warning-text);
  font-weight: 600;
}

.admin-layout .pb-contrast-warning[hidden] {
  display: none;
}

/* Pages list: the address link, views, Publish settings and Stats (page-builder.js) */
.admin-layout .pb-address-link {
  overflow-wrap: anywhere;
}

.admin-layout .pb-views-week {
  display: block;
  font-size: 12px;
}

.admin-layout .pb-pub-full {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .pb-stats-sub {
  margin: 8px 0 0;
  font-size: 14px;
}

.admin-layout .pb-stats-chart {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--color-border-strong);
}

.admin-layout .pb-stats-chart rect {
  fill: var(--btn-focus);
}

.admin-layout .pb-stats-table {
  margin-top: 6px;
}

.admin-layout .pb-stats-refs {
  margin: 0;
  padding-left: 18px;
}

/* Automations: "Who was here" (admin.js openPeople) */
.admin-layout .email-pop-panel.people-panel {
  width: min(720px, 100%);
}

.admin-layout .people-view,
.admin-layout .people-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.admin-layout .people-view[hidden] {
  display: none;
}

.admin-layout .people-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .people-tools .input-field {
  flex: 1 1 200px;
  width: auto;
  margin: 0;
  border-radius: 0;
}

.admin-layout .people-tools .btn,
.admin-layout .people-detail .btn {
  width: auto;
  align-self: flex-start;
  border-radius: 0;
}

.admin-layout .people-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* tick | name | times (or details) | now | Run log, Remove */
.admin-layout .people-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) auto minmax(0, 1.6fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

/* A list of runs: the details column may wrap */
.admin-layout .people-row.is-list .people-times {
  white-space: normal;
  color: var(--color-text-muted);
}

.admin-layout .people-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.admin-layout .people-bar[hidden],
.admin-layout .people-note:empty {
  display: none;
}

.admin-layout .people-note {
  margin: 8px 0 0;
}

.admin-layout .people-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .people-name {
  text-align: left;
}

.admin-layout .people-times {
  white-space: nowrap;
  font-size: 13px;
}

.admin-layout .people-times.is-repeat {
  font-weight: 700;
}

.admin-layout .people-now {
  font-size: 13px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.admin-layout .people-removed {
  display: inline-block;
  margin: 0 6px 2px 0;
  border-radius: 0;
}

@media (max-width: 600px) {
  /* tick | name | times; then now and the buttons under them */
  .admin-layout .people-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .admin-layout .people-now {
    grid-column: 2 / -1;
  }

  .admin-layout .people-actions {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

.admin-layout .people-detail-name {
  margin: 0;
}

.admin-layout .people-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-layout .people-tab {
  padding: 4px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.admin-layout .people-tab[aria-selected="true"] {
  background: var(--btn-focus);
  border-color: var(--btn-focus);
  color: #ffffff;
}

.admin-layout .people-tab:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .people-chain {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--color-border);
}

.admin-layout .people-chain-item {
  position: relative;
  margin: 0;
  padding: 4px 8px 4px calc(14px + var(--depth, 0) * 16px);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-layout .people-chain-item::before {
  content: "";
  position: absolute;
  left: calc(-6px + var(--depth, 0) * 16px);
  top: 9px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
}

.admin-layout .people-chain-item.is-passed::before {
  border-color: var(--btn-focus);
  background: var(--btn-focus);
}

.admin-layout .people-chain-item.is-here {
  font-weight: 700;
}

.admin-layout .people-chain-item.is-here::before {
  border-color: #16a34a;
  background: #16a34a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 30%, transparent);
}

.admin-layout .people-chain-item.is-never {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.admin-layout .people-chain-item.is-removed {
  font-style: italic;
}

.admin-layout .people-chain-lane {
  color: var(--color-text-muted);
}

.admin-layout .people-here {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  background: #16a34a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

/* Videos → "Transcript" (admin.js openVideoTranscript): the text, its buttons, the "no transcript" note */
.admin-layout .transcript-text {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.admin-layout .transcript-actions {
  flex-wrap: wrap;
}

.admin-layout #transcript-status:empty {
  display: none;
}

.admin-layout .transcript-none {
  margin: 0;
  border-radius: 0;
}

/* Videos → "Add as lessons" (admin.js openAddAsLessons): one row per video (tick, title, note) and the
   rows' "In N lessons" */
.admin-layout .video-lesson-list,
.admin-layout .video-uses-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .video-lesson-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .video-lesson-row > input[type="checkbox"] {
  margin-top: 10px;
}

.admin-layout .video-lesson-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .video-lesson-note {
  margin: 0;
}

.admin-layout .video-lesson-note[hidden] {
  display: none;
}

.admin-layout .video-in-lessons {
  align-self: flex-start;
  font-size: 12.5px;
}

.admin-layout .video-uses-list li {
  padding: 4px 0;
  overflow-wrap: anywhere;
}

/* Lessons page: the Tools menu (admin.js setupLessonTools), each item with a line saying what it does */
.admin-layout .lesson-tools {
  position: relative;
}

.admin-layout .lesson-tools-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.admin-layout .lesson-tools-menu[hidden] {
  display: none;
}

/* Phones: the Tools button wraps to the left, so the menu opens from its left edge (on the screen) */
@media (max-width: 760px) {
  .admin-layout .lesson-tools-menu {
    right: auto;
    left: 0;
  }
}

.admin-layout .lesson-tools-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-layout .lesson-tools-item + .lesson-tools-item {
  border-top: 1px solid var(--color-border);
}

.admin-layout .lesson-tools-item:hover,
.admin-layout .lesson-tools-item:focus-visible {
  background: var(--color-surface-alt);
  outline: none;
}

.admin-layout .lesson-tools-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.admin-layout .lesson-tools-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-layout .lesson-tools-label {
  font-size: 14px;
  font-weight: 600;
}

.admin-layout .lesson-tools-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.admin-layout .lesson-tools-desc:empty {
  display: none;
}

.admin-layout .lesson-tools-status:has(.video-length-status:empty):has(#video-length-stop[hidden]) {
  display: none;
}

.admin-layout .lesson-tools-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
}

.admin-layout .lesson-tools-status .video-length-status {
  margin: 0;
}

/* Lessons page: the modules as blocks, each with a header bar and its lessons inside (renderLessons) */
.admin-layout .lesson-list-bar {
  flex-wrap: wrap;
  gap: 8px 12px;
}

.admin-layout .lesson-expand-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout .lesson-expand-tools[hidden] {
  display: none;
}

/* (while there is a search the course's list and its bar are hidden: their layout must not win) */
.admin-layout #lesson-admin-list[hidden],
.admin-layout .lesson-list-bar[hidden] {
  display: none;
}

.admin-layout #lesson-admin-list:not([hidden]):has(> .lesson-module) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 0;
  background: none;
}

.admin-layout .lesson-module,
.admin-layout #lesson-admin-list > .lesson-module:last-child {
  display: block;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
}

.admin-layout .lesson-module-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 16px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border-strong);
}

.admin-layout .lesson-module-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 260px;
  min-width: 0;
}

.admin-layout .lesson-module .admin-group-title {
  margin: 0;
  font-size: 16px;
}

.admin-layout .lesson-module-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.admin-layout .lesson-module-toggle:focus-visible {
  outline: 2px solid var(--btn-focus, var(--color-primary));
  outline-offset: 2px;
}

.admin-layout .lesson-module-name {
  overflow-wrap: anywhere;
}

.admin-layout .lesson-module-caret {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.admin-layout .lesson-module-toggle[aria-expanded="true"] .lesson-module-caret {
  transform: translateY(-2px) rotate(45deg);
}

.admin-layout .lesson-module-meta {
  padding-left: 18px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .lesson-module-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  max-width: 100%;
}

.admin-layout .lesson-module-tools .admin-row-actions {
  flex-wrap: wrap;
}

.admin-layout .lesson-module-tools .lesson-select-all {
  margin: 0;
  font-size: 13px;
}

.admin-layout .lesson-module.is-disabled .lesson-module-name {
  color: var(--color-text-muted);
}

.admin-layout .lesson-module-lessons {
  margin: 0;
  border: 0;
}

.admin-layout .lesson-module-lessons[hidden] {
  display: none;
}

.admin-layout .lesson-module-lessons > .admin-row {
  padding-left: 16px;
  padding-right: 16px;
}

.admin-layout .lesson-module-lessons > .admin-group-empty {
  padding: 12px 16px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .lesson-module-caret {
    transition: none;
  }
}

/* Lessons → "Search lessons" (admin.js drawLessonSearch): its own card. A label above a full-width
   field (a search icon inside on the left, a clear × on the right), then "Search in" and "In" side
   by side (stacked on a phone), the note, the count line, "Select all", the results and Show more.
   At least 16px inside the card, 12px between its parts. */
.admin-layout .lesson-search {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
}

.admin-layout .lesson-search > .field-label {
  margin: 0 0 -6px;
  font-weight: 600;
}

.admin-layout .lesson-search-input {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.admin-layout .lesson-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.admin-layout .lesson-search .input-field {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border-radius: 0;
}

.admin-layout .lesson-search-input .input-field {
  min-height: 44px;
  padding-left: 40px;
  padding-right: 44px;
  font-size: 16px;
}

/* (the field's own cancel button is replaced by the × below) */
.admin-layout #lesson-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.admin-layout .lesson-search-x {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.admin-layout .lesson-search-x[hidden] {
  display: none;
}

.admin-layout .lesson-search-x:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.admin-layout .lesson-search-x:focus-visible {
  outline: 2px solid var(--btn-focus, var(--color-primary));
  outline-offset: 0;
}

.admin-layout .lesson-search-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.admin-layout .lesson-search-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-layout .lesson-search-option .field-label {
  margin: 0;
  font-size: 13px;
}

/* The two choices: each option as wide as its words, a border around the group */
.admin-layout .lesson-search .segmented {
  max-width: none;
  gap: 0;
  border: 1px solid var(--color-border-strong);
}

.admin-layout .lesson-search .segmented-option {
  flex: 0 0 auto;
}

.admin-layout .lesson-search .segmented-option + .segmented-option .segmented-text {
  border-left: 1px solid var(--color-border-strong);
}

.admin-layout .lesson-search .segmented-text {
  padding: 8px 14px;
}

.admin-layout .lesson-search .segmented-input:disabled + .segmented-text {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .admin-layout .lesson-search {
    padding: 16px;
  }

  .admin-layout .lesson-search-option,
  .admin-layout .lesson-search-scope,
  .admin-layout .lesson-search-where {
    width: 100%;
    max-width: none;
  }

  /* (phones: the options share the width and their words wrap) */
  .admin-layout .lesson-search .segmented {
    flex-direction: row;
  }

  .admin-layout .lesson-search .segmented-option {
    flex: 1 1 0;
  }

  .admin-layout .lesson-search .segmented-text {
    height: 100%;
    white-space: normal;
  }
}

.admin-layout .lesson-search-count,
.admin-layout .lesson-search-note {
  margin: 0;
}

.admin-layout .lesson-search-count {
  font-size: 14px;
  font-weight: 600;
}

.admin-layout .lesson-search-all {
  margin: 0;
  font-size: 14px;
}

.admin-layout .lesson-search-all[hidden],
.admin-layout .lesson-search-more[hidden] {
  display: none;
}

.admin-layout .lesson-search-more {
  align-self: flex-start;
}

.admin-layout .lesson-search-count.is-error {
  color: var(--color-danger-text);
}

.admin-layout .lesson-search-count:empty,
.admin-layout .lesson-search-note[hidden],
.admin-layout .lesson-search-results[hidden] {
  display: none;
}

.admin-layout .lesson-search-results {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
}

.admin-layout .lesson-search-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .lesson-search-tick {
  flex: 0 0 auto;
  margin: 0;
}

.admin-layout .lesson-search-matched {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 6px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .lesson-search-item:last-child {
  border-bottom: 0;
}

.admin-layout .lesson-search-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 220px;
  min-width: 0;
}

.admin-layout .lesson-search-title {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.admin-layout .lesson-search-module {
  font-size: 13px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.admin-layout .lesson-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.admin-layout .lesson-search-actions .btn {
  border-radius: 0;
}

.admin-layout .lesson-search-item.is-disabled .lesson-search-title {
  color: var(--color-text-muted);
}

/* Members → Search members (admin-member-search.js): the same box as Search lessons, the results as
   the Members table (cards on a phone) */
.admin-layout .ms-box {
  max-width: 720px;
}

/* (the field's own cancel button is replaced by the × in the box) */
.admin-layout #ms-query::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.admin-layout .ms-status {
  margin: 0 0 12px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.admin-layout .ms-status.is-error {
  color: var(--color-danger);
  font-weight: 600;
}

.admin-layout .ms-status:empty {
  display: none;
}

.admin-layout .ms-table td {
  vertical-align: middle;
}

.admin-layout .ms-table .ms-email {
  overflow-wrap: anywhere;
}

.admin-layout .ms-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .ms-row.is-archived strong {
  color: var(--color-text-muted);
}

.admin-layout .ms-open,
.admin-layout .ms-more {
  border-radius: 0;
}

.admin-layout .ms-more {
  margin-top: 12px;
}

@media (max-width: 700px) {
  .admin-layout .members-table.ms-table td.col-actions {
    width: 100%;
    padding-top: 8px;
  }

  .admin-layout .ms-table td.col-actions .ms-open {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

/* "Send to a member" (admin.js openSendToMember): the member search, then the check before sending */
.admin-layout .send-item-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.admin-layout .send-item-step[hidden] {
  display: none;
}

.admin-layout .send-item-status {
  margin: 0;
}

.admin-layout .send-item-results {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .send-item-results:empty {
  display: none;
}

.admin-layout .send-item-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.admin-layout .send-item-pick:hover,
.admin-layout .send-item-pick:focus-visible {
  background: var(--color-border);
}

.admin-layout .send-item-email {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .send-item-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
}

.admin-layout .send-item-facts dt {
  font-weight: 600;
}

.admin-layout .send-item-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-layout .send-item-actions {
  justify-content: flex-end;
}

/* Several members: each pick as a small chip with × (admin.js openSendItems) */
.admin-layout .send-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .send-item-chips:empty {
  display: none;
}

.admin-layout .send-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 2px 2px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-alt);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-layout .send-item-chip-x {
  min-width: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .send-item-chip-x:hover,
.admin-layout .send-item-chip-x:focus-visible {
  background: var(--color-border);
}

.admin-layout .send-item-summary {
  margin: 0;
  font-weight: 700;
}

/* "Send to members" (Ben 2026-11-06: "plz style this ... clean it up"): the admin's small, tidy popup look:
   14px text, 13px semibold labels, a 17px title, quiet groups, Back and Send always in view */
.admin-layout .email-pop-panel.is-send-items {
  width: min(540px, 100%);
  font-size: 14px;
  line-height: 1.45;
}

.admin-layout .email-pop-panel.is-send-items .visits-title {
  font-size: 17px;
}

.admin-layout .is-send-items .field-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.admin-layout .is-send-items .field-hint {
  margin: 0;
  font-size: 12px;
}

.admin-layout .is-send-items .input-field {
  margin: 0;
  font-size: 14px;
}

.admin-layout .is-send-items .send-item-step.is-tidy {
  gap: 12px;
  width: 100%;
}

.admin-layout .is-send-items .item-send {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.admin-layout .item-send-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.admin-layout .item-send-group-title {
  margin: 0 0 2px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-layout .is-send-items .send-item-summary {
  font-weight: 600;
}

.admin-layout .is-send-items .item-send-message {
  min-height: 0;
  resize: vertical;
}

.admin-layout .item-send-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .item-send-chip {
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  cursor: pointer;
}

.admin-layout .item-send-chip:hover,
.admin-layout .item-send-chip:focus-visible {
  border-color: var(--color-primary);
}

.admin-layout .is-send-items .item-send-preview-btn {
  align-self: flex-start;
}

.admin-layout .item-send-previews {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-layout .item-send-previews[hidden] {
  display: none;
}

.admin-layout .is-send-items .item-send-counts {
  margin: 0;
  font-size: 13px;
}

/* (Back and Send stay at the bottom of the box while it scrolls) */
.admin-layout .is-send-items .send-item-footer {
  position: sticky;
  bottom: -16px;
  z-index: 1;
  width: 100%;
  justify-content: flex-end;
  margin: 0;
  padding: 10px 0 2px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* Courses → "Send link to members…" (admin.js openCourseLinkSend) */
.admin-layout .course-link-send .form-ed-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-layout .course-link-count {
  margin: 0;
  font-weight: 600;
}

.admin-layout .course-link-count.is-error {
  color: var(--color-danger, #b91c1c);
}

.admin-layout .course-link-access p {
  margin: 0;
}

.admin-layout .course-link-access {
  display: grid;
  gap: 6px;
}

.admin-layout .course-link-channel-count,
.admin-layout .course-link-counter {
  margin: 0;
}

.admin-layout .course-link-send textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
}

.admin-layout .course-link-preview-box {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-alt);
}

.admin-layout .course-link-preview-box p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-layout .course-link-preview-subject {
  font-weight: 600;
}

.admin-layout .course-link-result,
.admin-layout .course-link-live-part {
  display: grid;
  gap: 4px;
}

.admin-layout .course-link-result p,
.admin-layout .course-link-live-part p {
  margin: 0;
}

.admin-layout .course-link-reasons {
  margin: 0;
  padding-left: 18px;
}

.admin-layout .send-item-list,
.admin-layout .send-item-failures,
.admin-layout .send-item-skipped ul,
.admin-layout .send-item-warning ul {
  margin: 0;
  padding-left: 18px;
  overflow-wrap: anywhere;
}

.admin-layout .send-item-list {
  max-height: 180px;
  overflow-y: auto;
}

.admin-layout .send-item-skipped p,
.admin-layout .send-item-warning p {
  margin: 4px 0 0;
}

/* "Also give them full access …" in the no-access box (send box and link box): the tick on its own line,
   then what will happen in plain words */
.admin-layout .send-item-warning .send-item-grant,
.admin-layout .course-link-access .checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  font-weight: 600;
}

.admin-layout .send-item-grant-will {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

.admin-layout .send-item-pick:disabled {
  color: var(--color-text-lighter);
  cursor: default;
}

.admin-layout .send-item .btn,
.admin-layout .video-send-btn,
.admin-layout .playlist-send-btn {
  border-radius: 0;
}

/* Videos → Transcripts (admin-transcripts.js): save Vimeo's captions, search them */
.admin-layout .transcripts-tool {
  margin: 0 0 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
}

.admin-layout .transcripts-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 14px 20px;
  font-weight: 600;
  cursor: pointer;
}

.admin-layout .transcripts-summary .field-hint {
  font-weight: 400;
}

.admin-layout .transcripts-tool > .notice {
  margin: 0 20px 12px;
}

.admin-layout .transcripts-part {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
  min-width: 0;
}

.admin-layout .transcripts-heading {
  margin: 0;
  font-size: 16px;
}

.admin-layout .transcripts-which {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-layout .transcripts-tool .admin-row-actions.transcripts-actions {
  justify-content: flex-start;
}

.admin-layout .transcripts-tool .btn {
  border-radius: 0;
}

.admin-layout .transcripts-progress {
  margin: 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.admin-layout .transcripts-progress:empty {
  display: none;
}

.admin-layout .transcripts-progress.is-error {
  color: var(--color-danger);
  font-weight: 600;
}

.admin-layout .transcripts-failures {
  margin: 6px 0 0;
  padding-left: 18px;
  font-weight: 400;
}

.admin-layout .transcripts-results {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .transcripts-results:empty {
  display: none;
}

.admin-layout .transcripts-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .transcripts-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.admin-layout .transcripts-result-head .transcript-refresh {
  margin-left: auto;
}

.admin-layout .transcript-time {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.admin-layout .transcript-snippet mark {
  padding: 0 1px;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-warning-text) 22%, transparent);
  color: inherit;
  font-weight: 600;
}

.admin-layout .transcripts-lessons {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .transcript-badge {
  display: block;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.admin-layout .transcript-badge:empty {
  display: none;
}

/* (the field's own cancel button is replaced by the × in the box) */
.admin-layout #tr-query::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Edit lesson: which provider each video plays from, and the SproutVideo picker */
.admin-layout .lesson-video-provider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 2px 0 8px;
  font-size: 12.5px;
}

.admin-layout .lesson-video-provider-label {
  color: var(--color-text-muted);
}

.admin-layout .lesson-video-provider-label.is-sprout,
.admin-layout .lesson-video-provider-label.is-youtube {
  color: var(--color-text);
  font-weight: 600;
}

.admin-layout .lesson-video-provider-hint {
  flex-basis: 100%;
  margin: 0;
}

.admin-layout .sprout-pick-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .sprout-pick-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .sprout-pick-title {
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .sprout-pick-item .btn,
.admin-layout .sprout-pick-form .btn {
  width: auto;
  border-radius: 0;
}

.admin-layout .sprout-pick-form {
  width: 100%;
}

/* Videos: the SproutVideo copy (a test; admin.js sproutBadgeFor / openSproutPreview) */
.admin-layout .sprout-import-btn[hidden] {
  display: none;
}

.admin-layout .sprout-badge-holder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 4px;
}

.admin-layout .sprout-badge-holder:empty {
  display: none;
}

.admin-layout .sprout-badge {
  --sprout: #6b7280;
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--sprout) 45%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--sprout) 12%, var(--color-surface));
  color: var(--color-text);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .sprout-badge.is-ready { --sprout: #16a34a; }
.admin-layout .sprout-badge.is-processing,
.admin-layout .sprout-badge.is-copying { --sprout: #2563eb; }
.admin-layout .sprout-badge.is-failed,
.admin-layout .sprout-badge.is-error { --sprout: #dc2626; }

/* "Check status" and "Preview": the same small buttons as the row's others, square */
.admin-layout .btn.sprout-link {
  border-radius: 0;
}

.admin-layout .sprout-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.admin-layout .sprout-preview iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sent emails: the Delivery filter above the list */
.admin-layout .email-log-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

/* Sent emails: search by member (a box with a clear ×, and Search) */
.admin-layout .email-log-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  margin: 0 0 8px;
}

.admin-layout .email-log-search-box {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .email-log-search-box .input-field {
  width: 100%;
  margin: 0;
  padding-right: 36px;
  border-radius: 0;
}

.admin-layout .email-log-search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .email-log-search-clear[hidden] {
  display: none;
}

.admin-layout .email-log-search-clear:hover {
  color: var(--color-text);
}

.admin-layout .email-log-search-clear:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 0;
}

.admin-layout .email-log-search .btn {
  flex: none;
  width: auto;
  border-radius: 0;
}

.admin-layout .email-log-count {
  margin: 0 0 8px;
}

.admin-layout .email-log-count[hidden] {
  display: none;
}

/* The Delivery badge (a button: opens the timeline). Calm colours; red only for Bounced, Complained
   and Failed. A tint of the colour on the surface, so it reads in light and dark mode. */
.admin-layout .delivery-badge {
  --delivery: #6b7280;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--delivery) 45%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--delivery) 12%, var(--color-surface));
  color: var(--color-text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.admin-layout .delivery-badge:hover {
  background: color-mix(in srgb, var(--delivery) 20%, var(--color-surface));
}

.admin-layout .delivery-badge:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .delivery-badge.is-delivered { --delivery: #2563eb; }
.admin-layout .delivery-badge.is-opened { --delivery: #0d9488; }
.admin-layout .delivery-badge.is-clicked { --delivery: #16a34a; }
.admin-layout .delivery-badge.is-unsubscribed { --delivery: #ca8a04; }
.admin-layout .delivery-badge.is-bounced,
.admin-layout .delivery-badge.is-complained,
.admin-layout .delivery-badge.is-failed { --delivery: #dc2626; }

/* The Reason / Delivery popup (admin.js emailPopup, on the .visits-dialog look) */
.admin-layout .email-pop-panel {
  width: min(560px, 100%);
  border-radius: 0;
}
.admin-layout .email-pop-close {
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .email-pop-close:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .email-pop-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .email-pop-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  width: 100%;
  margin: 0;
}

.admin-layout .email-pop-row {
  display: contents;
}

.admin-layout .email-pop-row dt {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .email-pop-row dd {
  margin: 0;
  font-size: 14px;
  white-space: pre-wrap;
}

.admin-layout .email-pop-sub {
  margin: 4px 0 0;
  font-size: 14px;
}

.admin-layout .email-pop-links {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

/* Phones: a full-width sheet from the bottom; the labels go above their values */
@media (max-width: 600px) {
  .admin-layout .email-pop-dialog {
    place-items: end stretch;
    padding: 0;
  }

  .admin-layout .email-pop-panel {
    width: 100%;
    max-height: 85vh;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .admin-layout .email-pop-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .admin-layout .email-pop-row dd {
    margin-bottom: 8px;
  }
}

/* Merge fields: hint, insert button and live preview */
.admin-layout .merge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 2px 0 10px;
}

.admin-layout .merge-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* "Insert variable" with the emoji button beside it (admin.js variableMenu / emojiMenu) */
.insert-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.insert-tools .actions-menu-btn.emoji-menu {
  min-width: 44px;
  font-size: 15px;
}

/* Under a text box while it is Unicode: which characters, and "Replace curly quotes and dashes" */
.sms-unicode-hint {
  margin: 4px 0 0;
  color: var(--color-warning-text, var(--color-text-muted));
  overflow-wrap: anywhere;
}

.sms-unicode-hint[hidden],
.sms-unicode-fix[hidden] {
  display: none;
}

/* Automation step editor: one row of insert buttons per field (Subject, then Message) */
.admin-layout .merge-button-rows {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.admin-layout .merge-hint {
  flex: 1 1 220px;
  font-size: 12px;
  line-height: 16px;
}

.admin-layout .merge-preview {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .merge-preview-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-lighter);
}

.admin-layout .merge-preview-subject {
  font-weight: 600;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.admin-layout .merge-preview-message {
  font-size: 13.5px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow-y: auto;
}

/* Members: import first names */
.admin-layout .import-text {
  height: auto;
  min-height: 160px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 19px;
}

.admin-layout .import-actions {
  justify-content: flex-start;
}

.admin-layout .import-actions .btn[hidden],
.admin-layout #import-table-wrap[hidden] {
  display: none;
}

.admin-layout .import-table {
  min-width: 560px;
}

.admin-layout .import-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-lighter);
}

/* Products and orders */
.admin-layout .products-table {
  min-width: 860px;
}

.admin-layout .orders-table {
  min-width: 920px;
}

.admin-layout .product-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.admin-layout .product-hidden-badge {
  margin-left: 6px;
}

.admin-layout .slug-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-layout .slug-row .input-field {
  flex: 1;
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.admin-layout .slug-row .input-field[readonly] {
  color: var(--color-text-lighter);
  background: var(--color-surface-alt);
}

.admin-layout .slug-prefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--color-text-lighter);
}

.admin-layout .product-hint {
  font-size: 12px;
  line-height: 16px;
  margin: 4px 0 12px;
}

.admin-layout .product-hint.is-warning,
.admin-layout .tag-step-effect.is-warning {
  color: var(--color-warning-text);
}

.admin-layout .product-textarea {
  height: auto;
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
}

/* Videos: playlists panel */
.admin-layout .playlist-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 0;
}

.admin-layout .playlist-list {
  max-height: calc(100vh - 360px);
}

/* "In N playlists" number on a video row's Playlists button */
.admin-layout .playlist-count-badge {
  margin-left: 6px;
  min-width: 18px;
  justify-content: center;
  padding: 0 6px;
}

.admin-layout .playlist-row {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.admin-layout .playlist-name {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .playlist-count {
  font-size: 12px;
  color: var(--color-text-lighter);
  white-space: nowrap;
}

.admin-layout .playlist-tool-buttons {
  display: flex;
  gap: 6px;
}

.admin-layout .playlist-checking {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 16px;
}

.admin-layout .playlist-unknown {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px 24px;
}

.admin-layout .playlist-reason {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-lighter);
}

.admin-layout .playlist-unknown .btn.btn-sm {
  height: 24px;
  padding: 2px 10px;
  font-size: 12px;
}

.admin-layout .playlist-unknown-note {
  margin-top: 10px;
}

.admin-layout .playlist-error {
  display: block;
  margin: 2px 0 0 24px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-danger-text);
  overflow-wrap: anywhere;
}

/* Orders: Slash webhook card */
.admin-layout .webhook-card {
  margin-bottom: 20px;
}

.admin-layout .webhook-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.admin-layout .webhook-card-header h3 {
  margin: 0;
}

.admin-layout .webhook-reason {
  margin: 6px 0 10px;
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.admin-layout .webhook-list {
  list-style: none;
  display: grid;
  gap: 6px;
}

.admin-layout .webhook-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .webhook-item.is-ours {
  border-color: rgba(14, 126, 78, 0.35);
}

.admin-layout .webhook-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-layout .webhook-name {
  font-size: 14px;
  font-weight: 500;
}

.admin-layout .webhook-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--color-text-lighter);
  overflow-wrap: anywhere;
}

.admin-layout .webhook-empty {
  font-size: 13px;
  color: var(--color-text-lighter);
}

.admin-layout .orders-total {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
}

.admin-layout .orders-note {
  margin-top: 8px;
  font-size: 12px;
}

/* Automations: flow editor (everything scoped to .flow-editor) */
.admin-layout .flow-editor[hidden] {
  display: none;
}

/* ONE slim row (Ben 2026-11-04: "make this much thinner and smaller"): back, the title and its "i";
   on the right Create sticker, Duplicate and Stats (its pop-up holds the counts). About 40px high;
   on a phone at most two short lines. */
.admin-layout .flow-editor .flow-editor-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-height: 40px;
  margin-bottom: 8px;
}

.admin-layout .flow-editor .flow-editor-header .admin-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.admin-layout .flow-editor .flow-header-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Undo / Redo (admin.js paintFlowUndo): two small quiet icon buttons, greyed when there is nothing to do */
.admin-layout .flow-editor .flow-undo-group {
  display: inline-flex;
  gap: 2px;
}

.admin-layout .flow-editor .flow-undo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-layout .flow-editor .flow-undo-btn .btn-icon-svg {
  margin: 0;
}

.admin-layout .flow-editor .flow-undo-btn.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.admin-layout .flow-editor .flow-stats {
  position: relative;
}

.admin-layout .flow-editor .flow-stats-key {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* The pop-up under "Stats": everything of the old counts row, wrapped in a panel */
.admin-layout .flow-editor .flow-stats-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: max-content;
  min-width: 280px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.12);
}

.admin-layout .flow-editor .flow-stats-pop[hidden] {
  display: none;
}

/* On a phone: the pop-up opens under the whole row, as wide as it */
@media (max-width: 600px) {
  .admin-layout .flow-editor .flow-editor-header {
    position: relative;
  }

  .admin-layout .flow-editor .flow-stats {
    position: static;
  }

  /* (the three buttons on one short line under the title: smaller, no icons) */
  .admin-layout .flow-editor .flow-header-end {
    flex-wrap: nowrap;
    gap: 4px;
    margin-left: 0;
  }

  .admin-layout .flow-editor .flow-header-end .btn {
    padding: 0 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  .admin-layout .flow-editor .flow-header-end .btn svg {
    display: none;
  }

  /* (Undo / Redo are icons only: theirs stay) */
  .admin-layout .flow-editor .flow-header-end .flow-undo-btn {
    width: 28px;
    padding: 0;
  }

  .admin-layout .flow-editor .flow-header-end .flow-undo-btn svg {
    display: block;
  }

  .admin-layout .flow-editor .flow-stats-pop {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

.admin-layout .flow-editor .flow-back {
  padding: 2px 4px;
  border: none;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-lighter);
  cursor: pointer;
}

.admin-layout .flow-editor .flow-back:hover {
  color: var(--color-text);
}

.admin-layout .flow-editor .flow-canvas {
  padding: 32px 16px 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  background-image: radial-gradient(var(--color-border-strong) 1px, transparent 1.2px);
  background-size: 18px 18px;
}

.admin-layout .flow-editor .flow {
  list-style: none;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* If / Else: see "If / Else branches" further down (after the flow canvas look) */

/* The "+" menu: a step type that can't be added here yet */
.admin-layout .flow-editor .flow-menu-item.is-blocked {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-layout .flow-menu-note {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* If / Else conditions and Update contact fields: one row each */
.admin-layout .cond-list {
  display: grid;
  gap: 8px;
  margin: 6px 0;
  padding: 0;
  list-style: none;
}

.admin-layout .cond-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.admin-layout .cond-row .input-field {
  flex: 1 1 160px;
  min-width: 0;
  margin: 0;
}

.admin-layout .cond-row .input-auto,
.admin-layout .cond-row .input-narrow {
  flex: 0 0 auto;
}

.admin-layout .cond-row [hidden] {
  display: none;
}

.admin-layout .cond-percent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-layout .cond-hint {
  flex-basis: 100%;
}

/* If / Else rules: "Go the Yes way if ALL of these are true:", numbered rows, groups one level deep,
   the sentence it reads as, and the first problem on its row */
.admin-layout .cond-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 4px 0 2px;
  font-size: 14px;
}

.admin-layout .cond-head .cond-match,
.admin-layout .cond-group-head .cond-match {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  font-weight: 700;
}

.admin-layout .cond-number {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 4px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--color-text-muted);
}

.admin-layout .cond-group {
  padding: 8px;
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-primary);
  border-radius: 0;
  background: var(--color-surface-alt);
}

.admin-layout .cond-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 13px;
}

.admin-layout .cond-group-head .cond-remove {
  margin-left: auto;
}

.admin-layout .cond-sublist {
  margin: 8px 0;
}

.admin-layout .cond-sublist .cond-row {
  background: var(--color-surface);
}

.admin-layout .cond-group-tools {
  display: flex;
  gap: 8px;
}

.admin-layout .cond-row,
.admin-layout .cond-group {
  border-radius: 0;
}

.admin-layout .cond-row.is-invalid,
.admin-layout .cond-group.is-invalid {
  outline: 2px solid var(--color-danger);
  outline-offset: -1px;
}

.admin-layout .cond-days {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-layout .cond-days .input-field {
  margin: 0;
}

.admin-layout .cond-deleted {
  flex-basis: 100%;
  color: var(--color-danger-text);
}

.admin-layout .cond-deleted[hidden],
.admin-layout .cond-days[hidden] {
  display: none;
}

.admin-layout .cond-tools {
  flex-wrap: wrap;
}

/* If / Else: the one short note under the conditions (a light tint, no border) */
.admin-layout .cond-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  color: var(--color-text-muted);
  font-size: 12.5px;
  line-height: normal;
  overflow-wrap: anywhere;
}

.admin-layout .cond-sentence {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-alt);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-layout .cond-problem {
  margin: 6px 0 0;
}

/* The canvas: an If / Else rule in full, wrapped */
.admin-layout .flow-editor .flow-summary.is-rule {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
  white-space: normal;
}

/* Blocks */
.admin-layout .flow-editor .flow-block {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Dragging a step (admin.js startStepDrag): the six-dot grip at the card's top left (on hover, on keyboard
   focus, always on touch), the card faded while lifted, a copy following the pointer, the "+" places it
   can land on lit (the one under the pointer most), the others faded */
.admin-layout .flow-editor .flow-drag-grip {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 20px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-lighter);
  cursor: grab;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.admin-layout .flow-editor .flow-block:hover > .flow-drag-grip,
.admin-layout .flow-editor .flow-drag-grip:focus-visible {
  opacity: 1;
}

.admin-layout .flow-editor .flow-drag-grip:hover {
  color: var(--color-text);
}

.admin-layout .flow-editor .flow-drag-grip:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

@media (hover: none) {
  .admin-layout .flow-editor .flow-drag-grip {
    opacity: 0.8;
  }
}

.admin-layout .flow-editor .flow-block.is-drag-source {
  opacity: 0.35;
}

.admin-layout .flow-editor .flow-drag-ghost {
  position: fixed;
  z-index: 1300;
  margin: 0;
  opacity: 0.9;
  pointer-events: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  transform: rotate(-1deg);
}

body.flow-step-dragging,
body.flow-step-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.admin-layout .flow-editor .flow-connector.is-drop-no {
  opacity: 0.25;
}

.admin-layout .flow-editor .flow-connector.is-drop-ok .flow-plus {
  border-color: var(--btn-focus);
  color: var(--btn-focus);
  box-shadow: 0 0 0 3px rgba(14, 126, 78, 0.18);
}

.admin-layout .flow-editor .flow-connector.is-drop-ok .flow-line {
  background: var(--btn-focus);
}

.admin-layout .flow-editor .flow-connector.is-drop-hover .flow-plus {
  background: var(--btn-focus);
  color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(14, 126, 78, 0.28);
  transform: scale(1.15);
}

.admin-layout .flow-editor .flow-tint-blue {
  background: linear-gradient(rgba(59, 130, 246, 0.09), rgba(59, 130, 246, 0.09)), var(--color-surface);
  border-color: rgba(59, 130, 246, 0.35);
}

.admin-layout .flow-editor .flow-tint-yellow {
  background: linear-gradient(rgba(245, 190, 11, 0.16), rgba(245, 190, 11, 0.16)), var(--color-surface);
  border-color: rgba(245, 170, 11, 0.45);
}

.admin-layout .flow-editor .flow-block.has-problem {
  border-color: rgba(245, 158, 11, 0.7);
}

.admin-layout .flow-editor .flow-block.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14, 126, 78, 0.22);
}

.admin-layout .flow-editor .flow-block-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  border-radius: 0;
  background: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
}

.admin-layout .flow-editor button.flow-block-main {
  cursor: pointer;
}

.admin-layout .flow-editor .flow-block-main:focus-visible,
.admin-layout .flow-editor .flow-plus:focus-visible,
.admin-layout .flow-editor .flow-action:focus-visible,
.admin-layout .flow-editor .flow-back:focus-visible,
.admin-layout .flow-editor .flow-menu-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-layout .flow-editor .flow-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.admin-layout .flow-editor .flow-icon svg {
  width: 18px;
  height: 18px;
}

.admin-layout .flow-editor .flow-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-layout .flow-editor .flow-step-label {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-lighter);
}

.admin-layout .flow-editor .flow-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.admin-layout .flow-editor .flow-summary {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-layout .flow-editor .flow-problem {
  margin-left: auto;
  flex-shrink: 0;
}

/* Move / delete: shown on hover or keyboard focus, always on touch screens */
.admin-layout .flow-editor .flow-actions {
  position: absolute;
  top: -13px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.admin-layout .flow-editor .flow-block:hover .flow-actions,
.admin-layout .flow-editor .flow-block:focus-within .flow-actions {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .admin-layout .flow-editor .flow-actions {
    position: static;
    align-self: center;
    padding-right: 10px;
    opacity: 1;
    pointer-events: auto;
  }
}

.admin-layout .flow-editor .flow-action {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}

.admin-layout .flow-editor .flow-action svg {
  width: 14px;
  height: 14px;
}

.admin-layout .flow-editor .flow-action:hover:not(:disabled) {
  color: var(--color-text);
  border-color: var(--color-text-lighter);
}

.admin-layout .flow-editor .flow-action-danger:hover:not(:disabled) {
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}

.admin-layout .flow-editor .flow-action:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Connectors: line, "+" button, line with an arrowhead */
.admin-layout .flow-editor .flow-connector {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 68px;
}

.admin-layout .flow-editor .flow-line {
  flex: 1;
  width: 2px;
  background: var(--flow-line-color, var(--color-border-strong));
}

.admin-layout .flow-editor .flow-line-arrow {
  position: relative;
  margin-bottom: 6px;
}

.admin-layout .flow-editor .flow-line-arrow::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--flow-line-color, var(--color-border-strong));
}

.admin-layout .flow-editor .flow-plus {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.admin-layout .flow-editor .flow-plus svg {
  width: 16px;
  height: 16px;
}

.admin-layout .flow-editor .flow-plus:hover,
.admin-layout .flow-editor .flow-plus[aria-expanded="true"] {
  color: var(--color-accent-text);
  border-color: var(--color-primary);
}

/* "+" menu */
.admin-layout .flow-editor .flow-menu {
  position: absolute;
  top: 50%;
  left: calc(50% + 22px);
  transform: translateY(-50%);
  z-index: 20;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.25);
}

.admin-layout .flow-editor .flow-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.admin-layout .flow-editor .flow-menu-item:hover,
.admin-layout .flow-editor .flow-menu-item:focus {
  background: var(--color-surface-alt);
}

.admin-layout .flow-editor .flow-menu-item .flow-icon {
  width: 28px;
  height: 28px;
}

.admin-layout .flow-editor .flow-menu-item .flow-icon svg {
  width: 15px;
  height: 15px;
}

/* End of the flow */
.admin-layout .flow-editor .flow-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-lighter);
  text-align: center;
}

.admin-layout .flow-editor .flow-end {
  display: flex;
  justify-content: center;
}

.admin-layout .flow-editor .flow-end-pill {
  padding: 4px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Edit panel: a side panel on desktop, a bottom sheet on phones */
.admin-layout .flow-editor .flow-panel {
  position: fixed;
  top: var(--admin-nav-height);
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(560px, 100vw);
  padding: 20px;
  overflow-y: auto;
  border-left: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: -16px 0 40px -12px rgba(0, 0, 0, 0.25);
}

.admin-layout .flow-editor .flow-panel[hidden] {
  display: none;
}

.admin-layout .flow-editor .flow-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.admin-layout .flow-editor .flow-panel-header h3 {
  margin: 0;
}

.admin-layout .flow-editor .flow-panel-actions {
  position: sticky;
  bottom: -20px;
  margin: 8px -20px -20px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

@media (max-width: 700px) {
  .admin-layout .flow-editor .flow-canvas {
    padding: 20px 8px 32px;
  }

  .admin-layout .flow-editor .flow-menu {
    top: calc(100% - 14px);
    left: 50%;
    transform: translateX(-50%);
  }

  .admin-layout .flow-editor .flow-panel {
    top: auto;
    left: 0;
    width: 100%;
    max-height: min(80vh, calc(100dvh - var(--flow-pop-top, var(--admin-nav-height)) - 8px));
    border-left: none;
    border-top: 1px solid var(--color-border-strong);
    border-radius: 0;
    box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .flow-editor .flow-actions,
  .admin-layout .flow-editor .flow-block,
  .admin-layout .flow-editor .flow-plus {
    transition: none;
  }
}

/* ---------- Flow canvas look: one card size, even spacing, soft tints, no borders ----------
   Every card (trigger and steps, at the top or in a Yes / No lane) is --flow-card-w x --flow-card-h;
   every gap between cards is one connector of --flow-gap. Colours are the theme's own, mixed down,
   so light and dark mode both work. (These rules take over from the ones above.) */
.admin-layout .flow-editor {
  /* The two card widths (everything on the canvas follows --flow-card-w): the main column, and the
     cards inside If / Else and Fork lanes (set on .flow-lanes-row) */
  --flow-main-w: 440px;
  --flow-lane-w: 340px;
  --flow-card-w: var(--flow-main-w);
  --flow-card-h: 64px;
  /* The line between one box and the next (the "+" sits in its middle, the arrowhead at its end);
     "Compact spacing" (admin.js, remembered in this browser) makes it shorter */
  --flow-gap: 100px;
  --flow-line-w: 1.5px;
  --flow-line: color-mix(in srgb, var(--color-text) 20%, transparent);
  --flow-yes-line: color-mix(in srgb, var(--color-accent-text) 55%, transparent);
  --flow-no-line: color-mix(in srgb, var(--color-warning-text) 55%, transparent);
  --flow-hairline: 0 0 0 1px color-mix(in srgb, var(--color-text) 6%, transparent);
}

.admin-layout .flow-editor .flow-canvas {
  overflow-x: auto;
}

/* Each list is as wide as its widest card or lane pair, centred, never clipped on the left */
.admin-layout .flow-editor .flow,
.admin-layout .flow-editor .flow-lane-list {
  width: max-content;
  min-width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  align-items: center;
}

.admin-layout .flow-editor .flow-item {
  display: flex;
  justify-content: center;
}

/* The cards */
.admin-layout .flow-editor .flow-block,
.admin-layout .flow-editor .flow-tint-blue,
.admin-layout .flow-editor .flow-tint-yellow,
.admin-layout .flow-editor .flow-block.has-problem {
  box-sizing: border-box;
  width: var(--flow-card-w);
  max-width: calc(100vw - 48px);
  /* As tall as its content (title row, summary, count chips), never shorter than before */
  min-height: var(--flow-card-h);
  height: auto;
  flex-direction: column;
  align-items: stretch;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
  box-shadow: var(--flow-hairline), 0 1px 2px rgba(0, 0, 0, 0.03);
}

.admin-layout .flow-editor .flow-block.flow-kind-trigger {
  background: color-mix(in srgb, var(--btn-focus) 9%, var(--color-surface));
}

.admin-layout .flow-editor .flow-block.flow-kind-action {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.admin-layout .flow-editor .flow-block.flow-kind-wait {
  background: color-mix(in srgb, var(--color-text) 5%, var(--color-surface));
}

.admin-layout .flow-editor .flow-block.flow-kind-branch {
  background: color-mix(in srgb, #f5c518 14%, var(--color-surface));
}

.admin-layout .flow-editor .flow-block.is-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* Row 1: icon | "STEP 6" + title | badges; row 2: the summary under the title, across the card */
.admin-layout .flow-editor .flow-block-main {
  flex: 0 0 auto;
  height: auto;
  min-height: var(--flow-card-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'icon text badges'
    '. summary summary';
  align-items: center;
  align-content: center;
  gap: 4px 10px;
  padding: 10px 12px;
  overflow: visible;
}

.admin-layout .flow-editor .flow-block-main > .flow-icon {
  grid-area: icon;
}

.admin-layout .flow-editor .flow-block-main > .flow-text {
  grid-area: text;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}

.admin-layout .flow-editor .flow-badges {
  grid-area: badges;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.admin-layout .flow-editor .flow-badges:empty {
  display: none;
}

.admin-layout .flow-editor .flow-block-main > .flow-summary {
  grid-area: summary;
}

.admin-layout .flow-editor .flow-icon {
  width: 30px;
  height: 30px;
  border: 0;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.admin-layout .flow-editor .flow-icon svg {
  width: 16px;
  height: 16px;
}

.admin-layout .flow-editor .flow-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.admin-layout .flow-editor .flow-step-label {
  font-size: 10px;
  line-height: 12px;
}

.admin-layout .flow-editor .flow-title {
  font-size: 13.5px;
  line-height: 18px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The whole summary, up to 3 lines (then "…"; all of it in the tooltip and while the card has focus) */
.admin-layout .flow-editor .flow-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.admin-layout .flow-editor .flow-block-main:focus-visible > .flow-summary {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}

/* "Needs attention": a small soft chip at the right of the card */
.admin-layout .flow-editor .flow-problem {
  padding: 1px 7px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-warning-text) 14%, transparent);
  color: var(--color-warning-text);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

/* Row 3: the count chips under the text (wrapping), never beside the title */
.admin-layout .flow-editor .flow-block > .flow-counts-row {
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-self: stretch;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0 12px 10px 52px;
}

/* A count of 0: lighter */
.admin-layout .flow-editor .flow-count.is-static,
.admin-layout .flow-editor .flow-count.is-zero {
  opacity: 0.65;
}

@media (max-width: 760px) {
  .admin-layout .flow-editor .flow-block > .flow-counts-row {
    padding-left: 12px;
  }
}

/* Touch screens: the move / delete buttons under the card's content */
@media (hover: none) {
  .admin-layout .flow-editor .flow-block > .flow-actions {
    align-self: flex-end;
    padding: 0 10px 8px;
  }
}

.admin-layout .flow-editor .flow-count {
  padding: 1px 7px;
  border: 0;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.admin-layout .flow-editor .flow-count svg {
  width: 12px;
  height: 12px;
}

.admin-layout .flow-editor button.flow-count:hover,
.admin-layout .flow-editor button.flow-count:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

/* Modules and lessons: "Synced with <showcase> · Last synced <time>" on a module that follows one */
.cs-showcase-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-self: flex-start;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-primary, #0e7e4e) 12%, transparent);
  color: var(--color-text);
  font-size: 12px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.cs-showcase-chip-time {
  color: var(--color-text-muted);
}

/* "1 not in showcase": a small warning (light and dark) */
.showcase-not-in {
  color: var(--color-warning-text, var(--color-text));
  font-weight: 600;
}

/* Modules and lessons: "1 hidden lesson" at the bottom of a module, opening to the dimmed rows */
.cs-hidden-group {
  list-style: none;
  padding: 4px 0 0;
}

.cs-hidden-toggle {
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.cs-hidden-toggle:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
  border-radius: 0;
}

.cs-hidden-lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0.6;
}

.cs-hidden-lessons[hidden] {
  display: none;
}

/* "· 1 disabled" after the lesson count of a module */
.cs-disabled-count {
  color: var(--color-text-muted);
}

/* "Add module from Vimeo": the panel (smallDialog) */
.vm-panel {
  width: min(620px, 100%);
}

.vm-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vm-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vm-picker .input-field {
  flex: 1 1 220px;
  min-width: 0;
}

.vm-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* "Show all showcases (N hidden …)" under the search box */
.vm-show-all {
  align-self: flex-start;
  font-size: 13px;
  text-align: left;
}

.vm-show-all[hidden] {
  display: none;
}

.vm-picker-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.vm-video-list {
  max-height: 40vh;
  overflow-y: auto;
}

.vm-options[hidden] {
  display: none;
}

/* Courses page: the module sync status (muted line, collapsed lists) */
.showcase-module-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.showcase-module-status .field-hint {
  margin: 0;
}

.showcase-details > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted);
}

.showcase-details .table-scroll {
  overflow-x: auto;
  margin-top: 6px;
}

.showcase-status-table {
  font-size: 13px;
}

/* Courses page: "Link courses to their showcases automatically" and the courses it couldn't match */
.showcase-autolink {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
}

.showcase-autolink[hidden],
.showcase-unmatched[hidden] {
  display: none;
}

.showcase-unmatched-list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.showcase-unmatched-list li {
  margin: 2px 0;
  overflow-wrap: anywhere;
}

/* ----- The "+" step menu: on the page itself (admin.js placePopup), above the canvas, cards and
   sticky bars, never cut off; about 280px wide; scrolls by itself when taller than the window ----- */
.admin-layout .flow-editor.flow-menu-portal .flow-menu {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: 280px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  transform: none;
  color: var(--color-text);
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu-item {
  white-space: normal;
}

/* Its groups: a small muted uppercase heading over a thin divider (Steps.groupedList) */
.admin-layout .flow-editor .flow-menu-group + .flow-menu-group {
  margin-top: 6px;
}

.admin-layout .flow-editor .flow-menu-heading {
  margin: 0 0 4px;
  padding: 6px 8px 4px;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Wide screens: one fixed-width column per group, side by side (admin.js sets --menu-cols to what
   fits, at most 5; more groups wrap to a second row); descriptions wrap inside their column */
.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-columns {
  width: auto;
  display: grid;
  grid-template-columns: repeat(var(--menu-cols, 1), 232px);
  gap: 10px 12px;
  align-items: start;
  padding: 8px;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-columns .flow-menu-group {
  min-width: 0;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-columns .flow-menu-group + .flow-menu-group {
  margin-top: 0;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-columns .flow-menu-item {
  align-items: flex-start;
}

/* Phones: a bottom sheet with a row of group tabs (scrolls sideways); only the chosen tab's steps */
@media (max-width: 760px) {
  .admin-layout .flow-editor.flow-menu-portal .flow-menu {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 70vh;
    transform: none;
  }
}

.admin-layout .flow-editor .flow-menu-tabs {
  position: sticky;
  top: -6px;
  z-index: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: -6px -6px 6px;
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  -webkit-overflow-scrolling: touch;
}

.admin-layout .flow-editor .flow-menu-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.admin-layout .flow-editor .flow-menu-tab[aria-pressed="true"] {
  border-color: var(--step-hue, var(--color-primary));
  background: color-mix(in srgb, var(--step-hue, var(--color-primary)) var(--hue-chip, 16%), var(--color-surface));
  font-weight: 600;
}

.admin-layout .flow-editor .flow-menu-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-layout .flow-editor .flow-menu.is-tabbed .flow-menu-heading {
  display: none;
}

.admin-layout .flow-editor .flow-menu.is-tabbed .flow-menu-group[hidden] {
  display: none;
}

/* The Actions menus (lists and step cards): never taller than the window */
.actions-menu {
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}

/* ----- Zoom: the bar in the canvas's top-right corner (stays in view while the page scrolls) ----- */
.admin-layout .flow-editor .flow-canvas-wrap {
  position: relative;
}

.admin-layout .flow-editor .flow-zoom-dock {
  position: sticky;
  top: calc(var(--admin-nav-height, 56px) + 8px);
  z-index: 6;
  display: flex;
  justify-content: flex-end;
  height: 0;
  pointer-events: none;
}

.admin-layout .flow-editor .flow-zoom-bar {
  display: flex;
  align-items: stretch;
  height: max-content;
  margin: 8px 8px 0 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
}

.admin-layout .flow-editor .flow-zoom-btn {
  min-width: 38px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.admin-layout .flow-editor .flow-zoom-btn:last-child {
  border-right: 0;
}

.admin-layout .flow-editor .flow-zoom-level,
.admin-layout .flow-editor .flow-zoom-fit {
  min-width: 56px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.admin-layout .flow-editor .flow-zoom-btn:hover:not(:disabled) {
  background: var(--color-surface-alt);
}

.admin-layout .flow-editor .flow-zoom-btn:disabled {
  color: var(--color-text-lighter);
  cursor: default;
}

.admin-layout .flow-editor .flow-zoom-btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

/* The canvas: focusable for the zoom keys; two-finger pinch is the canvas's, not the page's */
.admin-layout .flow-editor .flow-canvas {
  touch-action: pan-x pan-y;
}

.admin-layout .flow-editor .flow-canvas:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

/* Grab and drag (the member Map's hand cursors): an open hand on the background only; cards, buttons
   and links keep their own cursor; a closed hand everywhere while dragging */
.admin-layout .flow-editor .flow-canvas,
.admin-layout .flow-editor .flow-canvas.is-pan-ready {
  cursor: grab;
}

.admin-layout .flow-editor .flow-canvas :is(.flow-block, .flow-slot, button, a, input, select, textarea, label, summary, .flow-goto-handle) {
  cursor: pointer;
}

.admin-layout .flow-editor .flow-canvas :is(input[type="text"], input[type="search"], textarea) {
  cursor: text;
}

.admin-layout .flow-editor .flow-canvas.is-panning,
.admin-layout .flow-editor .flow-canvas.is-panning * {
  cursor: grabbing !important;
  user-select: none;
}

@media (max-width: 600px) {
  .admin-layout .flow-editor .flow-zoom-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Room above the first card for the bar (it would cover the trigger card on a narrow canvas) */
  .admin-layout .flow-editor .flow-canvas {
    padding-top: 68px;
  }
}

/* ----- Go to: arrows, the drag handle and the target dots ----- */
.admin-layout .flow-editor .flow-canvas {
  position: relative;
  --flow-goto: #8b5cf6;
}

.admin-layout .flow-editor .flow-goto-layer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}

.admin-layout .flow-editor .flow-goto-line {
  fill: none;
  stroke: var(--flow-goto);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
}

.admin-layout .flow-editor .flow-goto-head {
  fill: var(--flow-goto);
}

/* A loop (Go to back to an earlier step, in any lane): solid, a little heavier, with its label */
.admin-layout .flow-editor .flow-goto-arrow.is-back .flow-goto-line {
  stroke-width: 2.5;
  stroke-dasharray: none;
}

.admin-layout .flow-editor .flow-goto-label {
  fill: var(--flow-goto);
  font-size: 11px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 3px;
}

/* A wide invisible line, so the arrow is easy to point at */
.admin-layout .flow-editor .flow-goto-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}

.admin-layout .flow-editor .flow-goto-arrow:hover .flow-goto-line,
.admin-layout .flow-editor .flow-goto-arrow.is-selected .flow-goto-line {
  stroke-width: 3;
  stroke-dasharray: none;
}

.admin-layout .flow-editor .flow-goto-remove {
  position: absolute;
  z-index: 5;
  white-space: nowrap;
}

.admin-layout .flow-editor .flow-goto-handle {
  position: absolute;
  top: 50%;
  right: -8px;
  z-index: 3;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid var(--color-surface);
  border-radius: 0;
  background: var(--flow-goto);
  transform: translateY(-50%);
  cursor: grab;
  touch-action: none;
}

/* A Go to left of the main column (e.g. in a "No" lane): its handle and arrow on the left side */
.admin-layout .flow-editor .flow-goto.is-goto-left .flow-goto-handle {
  right: auto;
  left: -8px;
}

/* Room on the canvas's left for those arrows (they pass outside the left-most card) */
.admin-layout .flow-editor .flow-canvas.has-goto-left {
  padding-left: 84px;
}

.admin-layout .flow-editor .flow-goto-handle:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

/* While dragging: a dot on the left of every step card; the one under the pointer lights up */
.admin-layout .flow-editor .flow-canvas.is-goto-dragging .flow-block:not(.flow-kind-trigger)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: color-mix(in srgb, var(--flow-goto) 55%, var(--color-surface));
  transform: translateY(-50%);
}

.admin-layout .flow-editor .flow-block.is-goto-target {
  box-shadow: 0 0 0 2px var(--flow-goto);
}

.admin-layout .flow-editor .flow-loop-note {
  margin-left: 4px;
}

/* "12 were here": muted, never wraps (the step text truncates instead) */
.admin-layout .flow-editor .flow-count {
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-layout .flow-editor .flow-visits {
  color: var(--color-text-muted);
}

/* "Was here" list: a small dialog over the canvas */
.visits-dialog {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.visits-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.visits-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.visits-title {
  margin: 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.visits-sub {
  margin: -6px 0 0;
}

.visits-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
}

.visits-tab {
  padding: 8px 10px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.visits-tab[aria-selected="true"] {
  border-bottom-color: var(--btn-focus);
  color: var(--color-text);
}

.visits-tab:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

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

.visits-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.visits-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.visits-name {
  text-align: left;
  overflow-wrap: anywhere;
}

.visits-email {
  overflow-wrap: anywhere;
}

.visits-when {
  flex: none;
  font-size: 13px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.visits-empty {
  padding: 12px 0;
  color: var(--color-text-muted);
}

.visits-more {
  align-self: flex-start;
}

.visits-more[hidden] {
  display: none;
}

.admin-layout .flow-editor .flow-count.is-failed {
  border: 0;
  background: color-mix(in srgb, var(--color-danger-text) 12%, transparent);
}

.admin-layout .flow-editor .flow-count.is-late {
  border: 0;
  background: color-mix(in srgb, var(--color-warning-text) 14%, transparent);
  color: var(--color-warning-text);
}

/* Connectors: one gap size, thin light lines, small arrowheads, a small "+" */
.admin-layout .flow-editor .flow-connector {
  height: var(--flow-gap);
}

.admin-layout .flow-editor .flow-line {
  width: var(--flow-line-w);
  background: var(--flow-line-color, var(--flow-line));
}

.admin-layout .flow-editor .flow-line-arrow {
  margin-bottom: 4px;
}

.admin-layout .flow-editor .flow-line-arrow::after {
  bottom: -4px;
  border-left-width: 3.5px;
  border-right-width: 3.5px;
  border-top: 4px solid var(--flow-line-color, var(--flow-line));
}

.admin-layout .flow-editor .flow-plus {
  width: 22px;
  height: 22px;
  border: 0;
  background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
  color: var(--color-text-lighter);
  box-shadow: var(--flow-hairline);
}

.admin-layout .flow-editor .flow-plus svg {
  width: 13px;
  height: 13px;
}

.admin-layout .flow-editor .flow-plus:hover,
.admin-layout .flow-editor .flow-plus[aria-expanded="true"] {
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-accent-text);
}

/* After an If / Else or Fork whose lanes continue only by their dashed "Continues" arrows (or all
   end), or after a Go to: no line and no "+", only the space a connector would take (the dashed
   arrows land on the next card) */
.admin-layout .flow-editor .flow-connector-gap {
  height: var(--flow-gap);
  list-style: none;
}

/* ---------- If / Else branches (admin.js branchLanes) ----------
   Like a condition in a flow chart: from the card a short grey stem, then the line splits left and
   right with rounded corners; a Yes / No pill sits on each horizontal run; the line goes down with an
   arrow into the lane's first "+" (green / orange) and the lane's steps, which sit straight on the
   canvas. Under the lanes both lines come back (rounded) into one grey line to the next "+".
   Each column is exactly one card wide, 40px apart; a nested block makes its column wider (the
   canvas then scrolls sideways) and both columns stay equal so the split stays centred. */
.admin-layout .flow-editor .flow-lanes {
  --flow-lane-gap: 40px;
  --flow-corner: 10px;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: none;
  margin: 0;
}

.admin-layout .flow-editor .flow-lanes-row {
  /* Cards in lanes: narrower than the main column (two lanes side by side) */
  --flow-card-w: var(--flow-lane-w);
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--flow-card-w), 1fr));
  column-gap: var(--flow-lane-gap);
  width: max-content;
}

.admin-layout .flow-editor .flow-split-stem,
.admin-layout .flow-editor .flow-merge-stem {
  flex: 0 0 12px;
  height: 12px;
}

.admin-layout .flow-editor .flow-lane-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

/* Branch colours: the soft lines, and pills a little stronger so white text reads in both modes */
.admin-layout .flow-editor .flow-lane-col.is-yes {
  --flow-branch: var(--flow-yes-line);
  --flow-pill: #15803d;
  --flow-branch-text: var(--color-accent-text);
}

.admin-layout .flow-editor .flow-lane-col.is-no {
  --flow-branch: var(--flow-no-line);
  --flow-pill: #c2410c;
  --flow-branch-text: var(--color-warning-text);
}

/* No box around a lane: its steps sit on the canvas */
.admin-layout .flow-editor .flow-lane {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* In: the corner and horizontal run at the top, then the coloured line down with its arrow */
.admin-layout .flow-editor .flow-branch-in {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 34px;
  padding-top: var(--flow-corner);
}

.admin-layout .flow-editor .flow-branch-in > .flow-line {
  --flow-line-color: var(--flow-branch);
}

.admin-layout .flow-editor .flow-branch-in::before,
.admin-layout .flow-editor .flow-branch-out::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border: 0 solid var(--flow-branch);
}

.admin-layout .flow-editor .flow-branch-in::before {
  top: 0;
  height: var(--flow-corner);
  border-top-width: var(--flow-line-w);
}

.admin-layout .flow-editor .is-yes > .flow-branch-in::before {
  left: calc(50% - var(--flow-line-w) / 2);
  right: calc(var(--flow-lane-gap) / -2);
  border-left-width: var(--flow-line-w);
  border-top-left-radius: var(--flow-corner);
}

.admin-layout .flow-editor .is-no > .flow-branch-in::before {
  left: calc(var(--flow-lane-gap) / -2);
  right: calc(50% - var(--flow-line-w) / 2);
  border-right-width: var(--flow-line-w);
  border-top-right-radius: var(--flow-corner);
}

/* The one label: a pill on the middle of the horizontal run */
.admin-layout .flow-editor .flow-branch-pill {
  position: absolute;
  top: 0;
  z-index: 1;
  transform: translate(-50%, -50%);
  padding: 1px 9px;
  border-radius: 0;
  background: var(--flow-pill);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* A lane pill with its count is a button: opens who went that way */
.admin-layout .flow-editor .flow-branch-pill.is-button {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.admin-layout .flow-editor .flow-branch-pill.is-button:hover {
  filter: brightness(1.1);
}

.admin-layout .flow-editor .flow-branch-pill.is-button:focus-visible,
.admin-layout .flow-counts-status:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .flow-editor .is-yes > .flow-branch-in > .flow-branch-pill {
  left: calc(75% + var(--flow-lane-gap) / 4);
}

.admin-layout .flow-editor .is-no > .flow-branch-in > .flow-branch-pill {
  left: calc(25% - var(--flow-lane-gap) / 4);
}

/* The lane's first "+": the branch line already arrives with its arrow, so no line above it; green
   for Yes, orange for No */
.admin-layout .flow-editor .flow-lane-col > .flow-lane > .flow-lane-list > .flow-connector:first-child > .flow-line:first-child {
  display: none;
}

.admin-layout .flow-editor .flow-lane-col > .flow-lane > .flow-lane-list > .flow-connector:first-child > .flow-plus {
  background: color-mix(in srgb, var(--flow-pill) 16%, var(--color-surface));
  color: var(--flow-branch-text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--flow-pill) 30%, transparent);
}

/* Out: down from the lane (growing, so the shorter lane reaches the join), then a rounded corner
   into the horizontal run to the middle */
.admin-layout .flow-editor .flow-branch-out {
  position: relative;
  flex: 1 0 20px;
}

.admin-layout .flow-editor .flow-branch-out::after {
  top: 0;
  bottom: 0;
  border-color: var(--flow-line);
  border-bottom-width: var(--flow-line-w);
}

.admin-layout .flow-editor .is-yes > .flow-branch-out::after {
  left: calc(50% - var(--flow-line-w) / 2);
  right: calc(var(--flow-lane-gap) / -2);
  border-left-width: var(--flow-line-w);
  border-bottom-left-radius: var(--flow-corner);
}

.admin-layout .flow-editor .is-no > .flow-branch-out::after {
  left: calc(var(--flow-lane-gap) / -2);
  right: calc(50% - var(--flow-line-w) / 2);
  border-right-width: var(--flow-line-w);
  border-bottom-right-radius: var(--flow-corner);
}

/* A Condition (If / Else): No in red, Yes in green; a Fork's two paths in grey */
.admin-layout .flow-editor .flow-lanes.is-condition .flow-lane-col.is-no {
  --flow-branch: color-mix(in srgb, var(--color-danger-text) 55%, transparent);
  --flow-pill: #b91c1c;
  --flow-branch-text: var(--color-danger-text);
}

.admin-layout .flow-editor .flow-lane-col.is-fork {
  --flow-branch: var(--flow-line);
  --flow-pill: #4b5563;
  --flow-branch-text: var(--color-text);
}

/* Wide screens: a Condition shows No on the LEFT and Yes on the RIGHT (the DOM order is No, Yes):
   the corners and pills of the two lanes are swapped */
@media (min-width: 761px) {
  .admin-layout .flow-editor .flow-lanes.is-condition .is-no > .flow-branch-in::before {
    left: calc(50% - var(--flow-line-w) / 2);
    right: calc(var(--flow-lane-gap) / -2);
    border-left-width: var(--flow-line-w);
    border-right-width: 0;
    border-top-left-radius: var(--flow-corner);
    border-top-right-radius: 0;
  }

  .admin-layout .flow-editor .flow-lanes.is-condition .is-yes > .flow-branch-in::before {
    left: calc(var(--flow-lane-gap) / -2);
    right: calc(50% - var(--flow-line-w) / 2);
    border-right-width: var(--flow-line-w);
    border-left-width: 0;
    border-top-right-radius: var(--flow-corner);
    border-top-left-radius: 0;
  }

  .admin-layout .flow-editor .flow-lanes.is-condition .is-no > .flow-branch-in > .flow-branch-pill {
    left: calc(75% + var(--flow-lane-gap) / 4);
  }

  .admin-layout .flow-editor .flow-lanes.is-condition .is-yes > .flow-branch-in > .flow-branch-pill {
    left: calc(25% - var(--flow-lane-gap) / 4);
  }

  .admin-layout .flow-editor .flow-lanes.is-condition .is-no > .flow-branch-out::after {
    left: calc(50% - var(--flow-line-w) / 2);
    right: calc(var(--flow-lane-gap) / -2);
    border-left-width: var(--flow-line-w);
    border-right-width: 0;
    border-bottom-left-radius: var(--flow-corner);
    border-bottom-right-radius: 0;
  }

  .admin-layout .flow-editor .flow-lanes.is-condition .is-yes > .flow-branch-out::after {
    left: calc(var(--flow-lane-gap) / -2);
    right: calc(50% - var(--flow-line-w) / 2);
    border-right-width: var(--flow-line-w);
    border-left-width: 0;
    border-bottom-right-radius: var(--flow-corner);
    border-bottom-left-radius: 0;
  }
}

/* Phones: lanes stay one under the other, Yes first (its rail drawing needs that order) */
@media (max-width: 760px) {
  .admin-layout .flow-editor .flow-lanes.is-condition .flow-lane-col.is-yes {
    order: -1;
  }
}

/* An open slot at the end of a branch: "What happens next?", Needs attention, three choices */
.admin-layout .flow-editor .flow-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: var(--flow-card-w);
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--flow-pill, var(--color-warning-text)) 60%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--flow-pill, var(--color-warning-text)) 6%, var(--color-surface));
  list-style: none;
  text-align: center;
}

.admin-layout .flow-editor .flow-slot.is-joined {
  flex-direction: row;
  justify-content: center;
  border-style: solid;
  border-color: var(--color-border);
  background: transparent;
}

/* ----- Every canvas card centred (Trigger, steps, Go to, the join card) -----
   Top to bottom, each row centred: the icon badge; "STEP 1" and the title (one line when it fits,
   else the label above the title); the badges ("Needs attention"...); the summary (3 lines, then …);
   the count chips. The left colour edge, widths, heights, toolbar and Go to handles are as before. */
.admin-layout .flow-editor .flow-block-main {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'icon'
    'text'
    'badges'
    'summary';
  justify-items: center;
  text-align: center;
  row-gap: 4px;
}

.admin-layout .flow-editor .flow-block-main > .flow-text {
  justify-content: center;
  align-items: baseline;
  max-width: 100%;
}

.admin-layout .flow-editor .flow-badges {
  justify-content: center;
}

.admin-layout .flow-editor .flow-block-main > .flow-summary {
  max-width: 100%;
  text-align: center;
}

.admin-layout .flow-editor .flow-block > .flow-counts-row {
  justify-content: center;
  padding: 0 12px 10px;
}

/* ----- The "Continues" join card at the end of a lane (admin.js joinedItem) -----
   The cards' own look: the lane's colour on the left edge (green Yes, red No, grey Fork), a round
   icon badge, "CONTINUES" and "Step 8 · Wait" on one line (cut with … , the whole text as the
   tooltip), "Change" under it. Its dashed arrow into the step is drawn with the Go to arrows. */
.admin-layout .flow-editor .flow-block.flow-join {
  border-left: 3px solid var(--flow-pill, var(--color-text-lighter));
  background: var(--color-surface);
}

.admin-layout .flow-editor .flow-join .flow-block-main {
  min-height: 0;
  padding-bottom: 2px;
}

.admin-layout .flow-editor .flow-join .flow-text {
  flex-wrap: nowrap;
  min-width: 0;
}

.admin-layout .flow-editor .flow-join .flow-step-label {
  flex: 0 0 auto;
}

.admin-layout .flow-editor .flow-join-title {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-layout .flow-editor .flow-join .flow-icon {
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--flow-pill, var(--color-text-lighter)) 16%, var(--color-surface));
  color: var(--flow-pill, var(--color-text-muted));
}

.admin-layout .flow-editor .flow-join-row {
  display: flex;
  justify-content: center;
  padding: 0 12px 8px;
}

.admin-layout .flow-editor .flow-join-change {
  font-size: 12px;
}

/* Its target, after a press: a short outline pulse (removed when the animation ends) */
.admin-layout .flow-editor .is-join-target {
  animation: flow-join-pulse 1.5s ease-out 1;
}

@keyframes flow-join-pulse {
  0%, 30% { box-shadow: 0 0 0 3px var(--flow-goto, #8b5cf6); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

/* A lane with a join card: its dashed arrow replaces the solid line out and the merge stem */
.admin-layout .flow-editor .flow-lane-col.is-joined > .flow-branch-out::after,
.admin-layout .flow-editor .flow-lanes.is-joins > .flow-merge .flow-merge-stem {
  visibility: hidden;
}

/* ----- Lane pills, "+" buttons and arrowheads: the same look everywhere ----- */
.admin-layout .flow-editor .flow-branch-pill {
  padding: 2px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 16px;
}

.admin-layout .flow-editor .flow-plus,
.admin-layout .flow-editor .flow-lane-col > .flow-lane > .flow-lane-list > .flow-connector:first-child > .flow-plus {
  width: 24px;
  height: 24px;
  border-radius: var(--radius);
  background: var(--flow-pill, #6b7280);
  color: #ffffff;
  box-shadow: none;
  transition: box-shadow 0.15s ease;
}

.admin-layout .flow-editor .flow-plus:hover,
.admin-layout .flow-editor .flow-plus[aria-expanded="true"],
.admin-layout .flow-editor .flow-lane-col > .flow-lane > .flow-lane-list > .flow-connector:first-child > .flow-plus:hover {
  background: var(--flow-pill, #6b7280);
  color: #ffffff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--flow-pill, #6b7280) 25%, transparent);
}

.admin-layout .flow-editor .flow-plus svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.admin-layout .flow-editor .flow-line-arrow {
  margin-bottom: 6px;
}

.admin-layout .flow-editor .flow-line-arrow::after {
  bottom: -6px;
  border-left-width: 5px;
  border-right-width: 5px;
  border-top-width: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .flow-editor .flow-plus {
    transition: none;
  }
}

.admin-layout .flow-editor .flow-slot-title {
  margin: 0;
  font-weight: 600;
}

.admin-layout .flow-editor .flow-slot-waiting {
  margin: 0;
}

.admin-layout .flow-editor .flow-slot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.admin-layout .flow-editor .flow-slot-actions .btn {
  width: auto;
  border-radius: 0;
}

.admin-layout .flow-editor .flow-old-style {
  margin: 4px 0 0;
  text-align: center;
}

.admin-layout .flow-open-note {
  color: var(--color-warning-text);
  font-weight: 600;
}

.admin-layout .flow-connect-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .flow-connect-list .btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-radius: 0;
  white-space: normal;
}

/* "Connect to an existing step…" of an If / Else branch ([connect-to-any-step]): the groups, each choice
   with what it does under it; the ones that can't be chosen greyed with why */
.admin-layout .flow-connect-group {
  margin-top: 12px;
}

.admin-layout .flow-connect-group .move-to-group {
  margin: 0 0 4px;
}

.admin-layout .flow-connect-warn {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 18px;
}

.admin-layout .flow-connect-warn.is-warning {
  color: var(--color-warning-text);
}

.admin-layout .flow-connect-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-layout .flow-connect-detail {
  padding-left: 2px;
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}

.admin-layout .flow-connect-choice.is-none .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* A lane whose last step ends the automation: no line out of it (both: no line on either) */
.admin-layout .flow-editor .flow-lane-col.is-ended > .flow-branch-out,
.admin-layout .flow-editor .flow-lane-col.is-ended > .flow-branch-out::after,
.admin-layout .flow-editor .flow-lanes.is-ended > .flow-merge .flow-merge-stem {
  visibility: hidden;
}

.admin-layout .flow-editor .flow-merge {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Phones: Yes, then No, one under the other, each with its pill and line from the card. The No line
   runs down a rail on the left of the Yes lane; the join comes after the No lane. */
@media (max-width: 760px) {
  .admin-layout .flow-editor .flow-lanes,
  .admin-layout .flow-editor .flow-lanes-row {
    width: 100%;
  }

  .admin-layout .flow-editor .flow-lanes-row {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    padding: 0 16px;
  }

  .admin-layout .flow-editor .flow-branch-in {
    height: 44px;
  }

  /* Yes: straight down from the card (no horizontal run) */
  .admin-layout .flow-editor .is-yes > .flow-branch-in::before {
    display: none;
  }

  /* The No rail: from the top of the Yes lane, round to the left, down beside it to the No lane */
  .admin-layout .flow-editor .flow-lane-col.is-yes::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: -14px;
    left: -12px;
    right: calc(50% - var(--flow-line-w) / 2);
    box-sizing: border-box;
    border: 0 solid var(--flow-no-line);
    border-top-width: var(--flow-line-w);
    border-left-width: var(--flow-line-w);
    border-top-left-radius: var(--flow-corner);
    pointer-events: none;
  }

  .admin-layout .flow-editor .is-no > .flow-branch-in::before {
    left: -12px;
  }

  /* Pills sit on the line down into each lane */
  .admin-layout .flow-editor .is-yes > .flow-branch-in > .flow-branch-pill,
  .admin-layout .flow-editor .is-no > .flow-branch-in > .flow-branch-pill {
    top: 24px;
    left: 50%;
  }

  /* Yes joins after the No lane: only the No lane's line goes on, straight down */
  .admin-layout .flow-editor .flow-lane-col.is-yes > .flow-branch-out {
    display: none;
  }

  .admin-layout .flow-editor .is-no > .flow-branch-out {
    flex-basis: 12px;
  }

  .admin-layout .flow-editor .is-no > .flow-branch-out::after {
    right: auto;
    width: 0;
    border-bottom-width: 0;
    border-right-width: 0;
    border-left-width: var(--flow-line-w);
    border-radius: 0;
    left: calc(50% - var(--flow-line-w) / 2);
  }
}

/* A Fork with 3 or 4 paths (Ben 2026-11-04): the lanes side by side, Path A first. The first lane's
   lines are Path A's, the last lane's are like Path B's of a two-path Fork, and a middle lane gets a
   straight line across the top (and the bottom) with its own line down. Phones: one under the other,
   each lane's rail going on to the next. */
.admin-layout .flow-editor .flow-lanes-row.is-many {
  grid-template-columns: repeat(var(--flow-lanes-n, 3), minmax(var(--flow-card-w), 1fr));
}

.admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-middle > .flow-branch-in::before {
  left: calc(var(--flow-lane-gap) / -2);
  right: calc(var(--flow-lane-gap) / -2);
  border-left-width: 0;
  border-right-width: 0;
  border-radius: 0;
}

.admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-middle > .flow-branch-in > .flow-branch-pill {
  left: 50%;
}

.admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-middle > .flow-branch-out::after {
  left: calc(var(--flow-lane-gap) / -2);
  right: calc(var(--flow-lane-gap) / -2);
  border-left-width: 0;
  border-right-width: 0;
  border-radius: 0;
}

.admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-middle > .flow-branch-out::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--flow-line-w) / 2);
  border-left: var(--flow-line-w) solid var(--flow-line);
}

.admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-joined > .flow-branch-out::before {
  display: none;
}

.admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-last > .flow-branch-in::before {
  left: calc(var(--flow-lane-gap) / -2);
  right: calc(50% - var(--flow-line-w) / 2);
  border-left-width: 0;
  border-right-width: var(--flow-line-w);
  border-radius: 0 var(--flow-corner) 0 0;
}

.admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-last > .flow-branch-in > .flow-branch-pill {
  left: calc(25% - var(--flow-lane-gap) / 4);
}

.admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-last > .flow-branch-out::after {
  left: calc(var(--flow-lane-gap) / -2);
  right: calc(50% - var(--flow-line-w) / 2);
  border-left-width: 0;
  border-right-width: var(--flow-line-w);
  border-radius: 0 0 var(--flow-corner) 0;
}

@media (max-width: 760px) {
  .admin-layout .flow-editor .flow-lanes-row.is-many {
    grid-template-columns: minmax(0, 1fr);
  }

  /* (each lane but the last: the rail down to the next lane, as Path A's to Path B) */
  .admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-middle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: -14px;
    left: -12px;
    right: calc(50% - var(--flow-line-w) / 2);
    box-sizing: border-box;
    border: 0 solid var(--flow-no-line);
    border-left-width: var(--flow-line-w);
    pointer-events: none;
  }

  .admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col:is(.is-middle, .is-last) > .flow-branch-in::before {
    left: -12px;
    right: calc(50% - var(--flow-line-w) / 2);
    border-left-width: 0;
    border-right-width: var(--flow-line-w);
    border-radius: 0 var(--flow-corner) 0 0;
  }

  .admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col:is(.is-middle, .is-last) > .flow-branch-in > .flow-branch-pill {
    top: 24px;
    left: 50%;
  }

  /* (only the last lane's line goes on below, straight down) */
  .admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col:not(.is-last) > .flow-branch-out {
    display: none;
  }

  .admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-last > .flow-branch-out {
    flex-basis: 12px;
  }

  .admin-layout .flow-editor .flow-lanes-row.is-many > .flow-lane-col.is-last > .flow-branch-out::after {
    right: auto;
    width: 0;
    border-bottom-width: 0;
    border-right-width: 0;
    border-left-width: var(--flow-line-w);
    border-radius: 0;
    left: calc(50% - var(--flow-line-w) / 2);
  }
}

/* The "Links" panel (admin-flow-links.js; Ben 2026-11-03: "A NICE SIMPLE ELEGANT DESIGN"): a slim
   panel at the canvas's right (340px), white with a soft 1px border and a gentle shadow, small muted
   labels and normal text for the links; a bottom sheet on a phone. The canvas itself is not changed. */
.admin-layout .flow-editor .flow-links-panel {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 340px;
  max-width: calc(100% - 16px);
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  color: var(--color-text);
  font-size: 13px;
}

.admin-layout .flow-editor .flow-links-panel[hidden] {
  display: none;
}

.admin-layout .flow-links-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-layout .flow-links-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.admin-layout .flow-links-count {
  margin: -4px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

.admin-layout .flow-links-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-layout .flow-links-search {
  width: 100%;
  min-height: 32px;
  font-size: 13px;
}

.admin-layout .flow-links-tools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-layout .flow-links-filters {
  display: inline-flex;
  gap: 2px;
}

.admin-layout .flow-links-filter {
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.admin-layout .flow-links-filter.is-on {
  border-color: var(--color-border-strong);
  color: var(--color-text);
  font-weight: 600;
}

.admin-layout .flow-links-copy-all {
  font-size: 12px;
}

.admin-layout .flow-links-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -16px;
  padding: 0 16px 8px;
  overflow-y: auto;
}

.admin-layout .flow-links-step {
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
}

.admin-layout .flow-links-step-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-layout .flow-links-step-name:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.admin-layout .flow-links-items {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.admin-layout .flow-links-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  padding: 4px 0;
}

.admin-layout .flow-links-url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-layout .flow-links-meta {
  grid-column: 1;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 11px;
}

.admin-layout .flow-links-copy {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.admin-layout .flow-links-copy:hover {
  color: var(--color-text);
}

.admin-layout .flow-links-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-lighter);
}

.admin-layout .flow-links-check {
  color: var(--color-warning-text);
  font-weight: 600;
}

.admin-layout .flow-links-more {
  padding: 10px 0 0;
  border-top: 1px solid var(--color-border);
}

.admin-layout .flow-links-more > summary {
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
}

.admin-layout .flow-links-empty {
  padding: 16px 0;
  text-align: center;
}

/* (the same size of words as Fit, Notes and Full screen) */
.admin-layout .flow-editor .flow-zoom-btn.flow-links-btn,
.admin-layout .flow-editor .flow-zoom-btn.flow-details-toggle {
  font-size: 13px;
}

.admin-layout .flow-editor .flow-links-btn.is-on {
  background: var(--color-surface-alt);
  font-weight: 700;
}

@media (max-width: 760px) {
  .admin-layout .flow-editor .flow-links-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 70vh;
    border-width: 1px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.14);
  }
}

/* A Fork path's title (Ben 2026-11-04: "WITHOUT MAKING THE DESIGN UGLY"): a small muted label in
   capitals beside the line down into its lane, "A · CONTENT"; one line, cut with "…" (the whole title
   on hover); no box, no colour, the lane header no taller */
.admin-layout .flow-editor .flow-branch-in > .flow-branch-title {
  position: absolute;
  top: calc(var(--flow-corner) + 3px);
  left: calc(50% + 8px);
  display: flex;
  flex-direction: column;
  max-width: calc(50% - 12px);
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 14px;
  pointer-events: auto;
}

/* Its first line: the letter and the title, cut with "…" when it must (the whole on hover) */
.admin-layout .flow-editor .flow-branch-name {
  overflow: hidden;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Its own line under it: how long the path takes, NEVER cut (Ben 2026-11-05: "N..." could not be read):
   it wraps, or takes its short form ("~2 d", admin.js fitPathTimes); calm, as the title, no bold */
.admin-layout .flow-editor .flow-branch-time {
  font-weight: 500;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* (room for that second line, so it never runs into the lane's first "+"; every lane of the Fork
   alike, so their first "+" stay level) */
@media (min-width: 761px) {
  .admin-layout .flow-editor .flow-lanes-row:has(> .flow-lane-col > .flow-branch-in > .flow-branch-title .flow-branch-time) > .flow-lane-col > .flow-branch-in {
    height: 48px;
  }
}

/* (phones: the pill sits on the line lower down; the title goes above it) */
@media (max-width: 760px) {
  .admin-layout .flow-editor .flow-branch-in > .flow-branch-title {
    top: 4px;
  }

  /* (with the time under the title, the pill moves down below both lines; lanes are stacked here,
     so a lane without a time keeps its height) */
  .admin-layout .flow-editor .flow-lanes-row > .flow-lane-col > .flow-branch-in:has(> .flow-branch-title .flow-branch-time) {
    height: 62px;
  }

  .admin-layout .flow-editor .flow-lanes-row > .flow-lane-col > .flow-branch-in:has(> .flow-branch-title .flow-branch-time) > .flow-branch-pill {
    top: 44px;
  }
}

/* The step window's title boxes, one per path */
.admin-layout .step-path-titles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
}

/* (under each title: "How long this path takes (optional)", a number, a unit, "Use automatic") */
.admin-layout .step-path-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-layout .step-path-time-row .field-hint {
  display: block;
  margin: 0 0 2px;
}

.admin-layout .step-path-time-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-layout .step-path-time-inputs .step-path-time {
  width: 80px;
}

.admin-layout .step-path-time-inputs .step-path-auto {
  font-size: 13px;
}

.admin-layout .step-path-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-layout .step-path-title .field-label {
  margin: 0;
  font-size: 12px;
}

/* Members → Unlinked contacts (admin-unlinked-contacts.js): the name, then its email and number small */
.admin-layout .unlinked-section {
  margin-top: var(--section-gap, 24px);
}

.admin-layout .unlinked-section > .admin-subtitle {
  margin: 0 0 8px;
}

.admin-layout .unlinked-who {
  display: inline-flex;
  flex-direction: column;
  line-height: 16px;
}

.admin-layout .unlinked-sub {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
}

/* Members → Text broadcasts (admin.js openTextBroadcasts): one quiet card per text to many members */
.admin-layout .text-bc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.admin-layout .text-bc {
  padding: 12px 14px;
  border: 1px solid var(--olist-line, var(--color-border));
  border-radius: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .text-bc.is-current {
  border-color: var(--color-primary);
}

.admin-layout .text-bc p {
  margin: 0 0 6px;
}

.admin-layout .text-bc .text-bc-progress {
  width: 100%;
  margin: 4px 0 6px;
}

.admin-layout .text-bc .text-bc-buttons {
  margin-top: 8px;
}

/* A step's connection (admin.js openConnectTo): "→ Step 12" at the card's bottom right, small and
   quiet; its arrow is drawn with the Go to arrows (a connection's line in the accent colour) */
.admin-layout .flow-editor .flow-connect-tag {
  position: absolute;
  right: 6px;
  bottom: -9px;
  z-index: 2;
  padding: 0 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
}

.admin-layout .flow-editor .flow-connect-tag:hover {
  color: var(--color-text);
}

.admin-layout .flow-goto-arrow.is-connection .flow-goto-line {
  stroke: var(--color-accent-text, var(--color-link));
}

.move-to-dialog .move-to-option.is-on {
  background: var(--color-surface-alt);
  font-weight: 700;
}

.move-to-dialog .connect-to-passes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.move-to-dialog .connect-to-passes[hidden] {
  display: none;
}

/* "Move to…" (admin.js openMoveTo): the places in a scrolling list, grouped by line and lane */
.admin-layout .move-to-dialog,
.move-to-dialog {
  width: min(520px, calc(100vw - 32px));
}

.move-to-dialog .move-to-filter {
  width: 100%;
  margin: 8px 0;
}

.move-to-dialog .move-to-list {
  max-height: min(55vh, 460px);
  overflow-y: auto;
  border: 1px solid var(--color-border);
}

.move-to-dialog .move-to-group {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 6px 10px;
  background: var(--color-surface-alt, var(--color-surface));
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.move-to-dialog .move-to-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.move-to-dialog .move-to-option:hover,
.move-to-dialog .move-to-option:focus-visible {
  background: var(--color-surface-alt);
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

.move-to-dialog .move-to-why {
  margin-top: 8px;
}

.admin-toast .admin-toast-undo {
  margin-left: 8px;
  font-weight: 700;
}

/* Notes in the flow wrap at the card width (they never widen the canvas) */
.admin-layout .flow-editor .flow-note {
  max-width: var(--flow-card-w);
}

.admin-layout .flow-editor .flow-end-pill {
  border: 0;
  background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
  box-shadow: var(--flow-hairline);
}

/* Phones: the same cards scaled to the screen; lanes one under the other; the same gaps */
@media (max-width: 760px) {
  .admin-layout .flow-editor,
  .admin-layout .flow-editor .flow-lanes-row {
    --flow-card-w: min(var(--flow-main-w), calc(100vw - 72px));
  }

}

/* Automations: the list reads left to right (name and trigger, Steps, Members chips, the switch,
   the buttons); the name column never gets crushed (the table scrolls sideways instead) */
.admin-layout .automations-table {
  min-width: 960px;
}

.admin-layout .automations-table td {
  vertical-align: middle;
}

/* Name and Trigger: real widths, each on one line (Ben 2026-11-02); what doesn't fit ends in "…",
   the whole of it on hover */
.admin-layout .automations-table .auto-name-col,
.admin-layout .automations-table .auto-name-cell {
  min-width: 220px;
  width: 30%;
}

.admin-layout .automations-table .auto-trigger-col,
.admin-layout .automations-table .auto-trigger-cell {
  min-width: 160px;
  width: 22%;
}

.admin-layout .automations-table .auto-steps-col,
.admin-layout .automations-table .auto-steps-cell {
  width: 64px;
  text-align: center;
}

.admin-layout .auto-name-cell {
  display: table-cell;
}

/* The name, its "i", "Night N" and the notes count on one line */
.admin-layout .auto-name-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.admin-layout .auto-name-line > * {
  flex: 0 0 auto;
}

.admin-layout .automations-table .auto-name-line .auto-length-tip,
.admin-layout .automations-table .auto-name-line .auto-night-badge {
  margin-left: 0;
}

.admin-layout .auto-name {
  display: block;
  max-width: 340px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A switched-off automation: its name's pieces faded, not the whole cell (a faded cell held the "i" box
   under the next cells, and faded it too, Ben 2026-11-09: "When mouse over the i icon the box is broken") */
.admin-layout .members-table tr.auto-row.is-disabled td.auto-name-cell {
  opacity: 1;
}

.admin-layout .members-table tr.auto-row.is-disabled td.auto-name-cell .auto-name-line > :not(.auto-length-tip),
.admin-layout .members-table tr.auto-row.is-disabled td.auto-name-cell .auto-length-tip .info-tip-btn {
  opacity: 0.5;
}

/* (the link to its steps: the name, cut with "…" when long, then its step count, always whole) */
.admin-layout .auto-name-line > .auto-name-link {
  display: flex;
  align-items: baseline;
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.admin-layout .auto-name-link > .auto-name {
  flex: 0 1 auto;
  min-width: 0;
}

.admin-layout .auto-name-link > .auto-name-count {
  flex: 0 0 auto;
  white-space: pre;
}

.admin-layout .auto-trigger {
  display: block;
  max-width: 300px;
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-layout .auto-trigger.is-problem {
  color: var(--color-warning-text);
}

.admin-layout .automations-table .auto-stats {
  max-width: none;
  gap: 6px;
}

/* The Members chips: one size, one spacing */
.admin-layout .automations-table .auto-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  height: 26px;
  padding: 0 10px;
}

.admin-layout .automations-table .auto-status-cell .status-switch {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* "Draft" next to Disabled ([automation-picker-popup-and-new-draft]) */
.admin-layout .automations-table .auto-status-cell .auto-draft-badge {
  margin-left: 8px;
  vertical-align: middle;
}

/* "+ New automation" under a step's Automations checklist: one name box, Create draft, Cancel */
.admin-layout .step-draft-open {
  display: inline-block;
  margin: 10px 0 12px;
}

.admin-layout .step-draft-form {
  margin-top: 8px;
}

.admin-layout .step-draft-form[hidden],
.admin-layout .step-draft-note[hidden],
.admin-layout .step-draft-error[hidden] {
  display: none;
}

.admin-layout .step-draft-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-layout .step-draft-row .step-draft-name {
  flex: 1 1 200px;
  min-width: 0;
}

.admin-layout .automations-table .auto-actions-cell .admin-row-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* Steps (n), Members (n), Actions: never squashed (they wrap to a second line on phones) */
.admin-layout .automations-table .auto-actions-cell .admin-row-actions > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-layout .automations-table tbody tr.auto-row:hover td {
  background: var(--color-surface-alt);
}

/* A row's Actions menu: drawn on the page, over everything (admin.js rowActionsMenu) */
.actions-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.actions-menu-btn .actions-menu-chevron {
  order: 2;
  transition: transform 0.15s ease;
}

.actions-menu-btn[aria-expanded="true"] .actions-menu-chevron {
  transform: rotate(180deg);
}

.actions-menu {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.actions-menu-item {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.actions-menu-item:hover,
.actions-menu-item:focus-visible {
  background: var(--color-surface-alt);
  outline: none;
}

.actions-menu-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.actions-menu-item.is-danger {
  color: var(--color-danger-text);
}

.actions-menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--color-border);
}

/* A group label in a menu ("Share", "Visibility"…), after a thin line except the first */
.actions-menu-group {
  padding: 8px 12px 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-lighter);
}

.actions-menu-group:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
}

/* A phone: the menu is the full width of the screen and scrolls inside (admin.js openRowMenu) */
.actions-menu.is-phone {
  width: auto;
  min-width: 0;
  max-width: none;
  overflow-y: auto;
  border-radius: 0;
}

.actions-menu.is-phone .actions-menu-item {
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .actions-menu-btn .actions-menu-chevron {
    transition: none;
  }
}

.actions-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.actions-menu-item:disabled:hover {
  background: none;
}

/* Rows with an Actions menu stay on one line next to it */
.admin-row-actions > .actions-menu-btn {
  flex-shrink: 0;
}

/* Touch screens: menu items big enough to tap */
@media (pointer: coarse) {
  .actions-menu-item {
    min-height: 44px;
  }
}

/* Pages list (page-builder.js): compact rows, everything on one line, one Actions menu */
.admin-layout .members-table tr.pb-page-row td {
  vertical-align: middle;
}

@media (min-width: 701px) {
  .admin-layout .members-table tr.pb-page-row td.pb-actions-cell {
    width: 1%;
    white-space: nowrap;
    text-align: right;
  }
}

/* Phones (each page a card): the Actions button under the details, on the left */
@media (max-width: 700px) {
  .admin-layout .members-table tr.pb-page-row td.pb-actions-cell {
    padding-top: 6px;
    text-align: left;
  }
}

/* Phones: each automation as a card (name and trigger, chips, then the switch and the buttons) */
@media (max-width: 700px) {
  .admin-layout .automations-table {
    min-width: 0;
  }

  .admin-layout .automations-table tr.auto-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 10px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .admin-layout .automations-table tr.auto-row td {
    padding: 0;
    background: none;
  }

  .admin-layout .automations-table tr.auto-row td.auto-name-cell,
  .admin-layout .automations-table tr.auto-row td.auto-trigger-cell,
  .admin-layout .automations-table tr.auto-row td.auto-stats-cell {
    display: block;
    width: 100%;
    min-width: 0;
  }

  /* (the trigger under the name; the name's line keeps its marks, the name ends in "…") */
  .admin-layout .automations-table tr.auto-row td.auto-trigger-cell {
    margin-top: -4px;
  }

  .admin-layout .automations-table .auto-name,
  .admin-layout .automations-table .auto-trigger {
    max-width: 100%;
  }

  .admin-layout .automations-table tr.auto-row td.auto-trigger-cell::before,
  .admin-layout .automations-table tr.auto-row td.auto-stats-cell::before,
  .admin-layout .automations-table tr.auto-row td.auto-status-cell::before {
    content: none;
  }

  .admin-layout .automations-table tr.auto-row td.auto-steps-cell {
    display: inline-flex;
    width: auto;
    text-align: left;
    gap: 6px;
  }

  .admin-layout .automations-table tr.auto-row td.auto-status-cell {
    display: block;
    width: auto;
  }

  .admin-layout .automations-table tr.auto-row td.auto-actions-cell {
    display: block;
    width: 100%;
  }

  .admin-layout .automations-table .auto-actions-cell .admin-row-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 0;
  }

  .admin-layout .automations-table .auto-stat {
    min-width: 0;
  }
}

.admin-layout .automation-runs-table {
  min-width: 980px;
}

.admin-layout .members-table tr.is-disabled td[data-label="Status"] {
  opacity: 1;
}

/* The Automations area's two views: Automations | Runs (same look as the member panel's tabs) */
.admin-layout .auto-views {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-layout .auto-view-tab {
  flex: none;
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.admin-layout .auto-view-tab[aria-selected="true"] {
  border-bottom-color: var(--color-primary);
  color: var(--color-text);
}

.admin-layout .auto-view-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.admin-layout .auto-view-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.admin-layout #automation-list-section[hidden],
.admin-layout .automation-runs[hidden] {
  display: none;
}

.admin-layout .automation-run-filters {
  flex-wrap: wrap;
  align-items: center;
}

.admin-layout .automation-run-filters .input-field {
  width: auto;
}

.admin-layout #automation-run-search {
  min-width: 200px;
}

.admin-layout .run-member-name {
  display: block;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .run-member-email {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .admin-layout .automation-run-filters .input-field,
  .admin-layout #automation-run-search {
    width: 100%;
    min-width: 0;
  }
}

.admin-layout .run-error {
  max-width: 260px;
  font-size: 12.5px;
  color: var(--color-danger-text);
  overflow-wrap: anywhere;
}

.admin-layout .automation-hint {
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 12px;
}


.admin-layout .step-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.admin-layout .step-card {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .step-card.has-problem {
  border-color: rgba(245, 158, 11, 0.5);
}

.admin-layout .step-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-layout .step-card-header .admin-row-actions {
  margin-left: auto;
}

/* "Step 1", "Step 2": a plain text label, not a box */
.admin-layout .step-position {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-lighter);
  white-space: nowrap;
}

.admin-layout .step-type {
  font-weight: 600;
  font-size: 14px;
}

.admin-layout .step-textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
}

.admin-layout .step-hint {
  font-size: 12px;
  line-height: 16px;
  margin: -6px 0 8px;
}

.admin-layout .step-add {
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .step-add .admin-inline-row .input-field {
  margin: 0;
}

.admin-layout .pick-list {
  list-style: none;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  margin-top: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.admin-layout .pick-list > li {
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .pick-list > li:last-child {
  border-bottom: none;
}

/* Automations → Add members: the number found with "Select all N that match"; each row the name
   (bold) with the email under it */
.admin-layout .pick-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 8px;
}

.admin-layout .pick-search-bar[hidden],
.admin-layout #automation-member-all[hidden],
.admin-layout #automation-member-clear[hidden] {
  display: none;
}

.admin-layout .pick-member {
  align-items: flex-start;
}

.admin-layout .pick-member-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-layout .pick-member-name,
.admin-layout .pick-member-email {
  overflow-wrap: anywhere;
}

.admin-layout .pick-member-email {
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .pick-list > li.pick-more {
  padding: 8px 10px;
  text-align: center;
}

/* Checkout pages: the products on a page, in order */
.admin-layout .page-product-list {
  max-height: none;
  margin-top: 0;
}

.admin-layout .page-product-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-layout .page-product-row .admin-row-actions {
  margin-left: auto;
}

.admin-layout .page-product-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.admin-layout .page-product-add .input-field {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Tags: coloured chips (the colour comes from --tag-color, set per chip) */
.admin-layout .tag-chip {
  --tag-color: #6b7280;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--tag-color) 45%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--tag-color) 14%, transparent);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-layout .tag-chip::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 0;
  background: var(--tag-color);
}

.admin-layout .tag-chip-more::before {
  display: none;
}

.admin-layout .tag-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 260px;
}

.admin-layout .tags-table td .badge + .badge {
  margin-left: 4px;
}

.admin-layout .tag-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-layout .tag-color-row .input-field {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.admin-layout .members-table .col-select {
  width: 36px;
}

.admin-layout .member-tag-bulk select {
  width: auto;
  min-width: 160px;
  height: 32px;
  margin: 0;
}

/* Members: the Actions bar, "Select all N members", the pages, and the bulk action panel */
.admin-layout .member-bulk-legacy[hidden],
.admin-layout .member-select-all-line[hidden],
.admin-layout .member-pager[hidden] {
  display: none;
}

/* Wait step: "Wait forever" hides the time controls (they keep their own state for later) */
.admin-layout .is-wait-forever > :not(.wait-forever):not(legend) {
  display: none !important;
}

.admin-layout .wait-forever {
  margin-bottom: 8px;
}

/* "Clear selection": a small link the same size and weight as "N selected" */
.admin-layout #member-tag-bulk #member-bulk-clear {
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: inherit;
  min-height: 0;
  height: auto;
}

.admin-layout .member-select-all-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: -4px 0 12px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 14px;
}

.admin-layout .member-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 12px 0;
}

.admin-layout .member-bulk-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  min-width: 0;
}

.admin-layout .member-bulk-body .pick-list {
  max-height: 320px;
  overflow-y: auto;
}

/* Text members: "Show / clear the others" (the ticked members not on this page), a small link under its choice */
.admin-layout #member-bulk-text-show-others {
  justify-self: start;
  margin: -4px 0 0 28px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
}

.admin-layout .member-bulk-text-others {
  margin: 6px 0 0 28px;
  font-size: 13px;
}

.admin-layout .member-bulk-text-others[hidden] {
  display: none;
}

.admin-layout .member-bulk-text-others ul {
  margin: 0 0 8px;
}

.admin-layout .member-bulk-facts {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* "Change text consent…": each choice's explanation on its own line under its name */
.admin-layout .member-bulk-choice-hint {
  display: block;
  margin: 2px 0 0;
}

.admin-layout .member-bulk-sms-given[hidden] {
  display: none;
}

.admin-layout .member-bulk-buttons {
  flex-wrap: wrap;
}

.admin-layout .member-tag-list,
.admin-layout .trigger-tag-list {
  max-height: 320px;
  margin-bottom: 8px;
}

.admin-layout .trigger-tags[hidden],
.admin-layout .trigger-tags .field-hint[hidden] {
  display: none;
}

.admin-layout .trigger-tag-list .checkbox-field {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.admin-layout .trigger-warning[hidden] {
  display: none;
}

/* Several triggers: one bordered row each (type, Remove, its tags or courses), then "Add trigger" */
.admin-layout .trigger-row {
  min-width: 0;
  margin: 0 0 12px;
  padding: 10px 12px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .trigger-row legend {
  padding: 0 4px;
}

.admin-layout .trigger-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-layout .trigger-row-head .input-field {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
}

.admin-layout .trigger-add {
  margin-bottom: 12px;
}

.admin-layout .trigger-backfill {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .trigger-backfill[hidden],
.admin-layout .trigger-backfill .btn[hidden],
.admin-layout .trigger-backfill .field-hint[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .admin-layout .tag-chips {
    max-width: none;
    justify-content: flex-end;
  }
}

/* Members: one member's courses and lesson schedule */
.admin-layout .member-course-enroll {
  margin-bottom: 8px;
}

.admin-layout .member-course-list {
  display: grid;
  gap: 12px;
}

.admin-layout .member-course-card {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .member-course-card.is-paused {
  background: var(--color-surface-alt);
}

.admin-layout .member-course-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.admin-layout .member-course-title {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.admin-layout .member-course-meta {
  margin: 2px 0 8px;
}

/* Open / closed course cards: the caret, the whole header row, and the one-line summary */
.admin-layout .member-course-head {
  cursor: pointer;
}

.admin-layout .member-course-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.admin-layout .member-course-caret:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.admin-layout .member-course-caret:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-layout .member-course-caret svg {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}

.admin-layout .member-course-card.is-collapsed .member-course-caret svg {
  transform: none;
}

.admin-layout .member-course-card.is-collapsed .member-course-meta {
  margin-bottom: 0;
}

.admin-layout .member-course-summary {
  margin: 0 0 8px;
  font-weight: 500;
}

.admin-layout .member-course-card.is-collapsed .member-course-summary {
  margin-bottom: 0;
}

.admin-layout .member-course-body[hidden] {
  display: none;
}

.admin-layout .member-course-tools {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

/* Lesson order for this course */
.admin-layout .member-course-order {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .member-course-order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.admin-layout .member-course-order-row .field-label {
  margin: 0;
}

.admin-layout .member-course-order-note,
.admin-layout .member-course-order-effect {
  margin: 6px 0 0;
}

/* Each lesson's state: locked rows muted with a lock, completed rows with a check */
.admin-layout .member-course-lesson-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.admin-layout .member-course-lesson-name svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.admin-layout .member-course-lessons li.is-locked {
  color: var(--color-text-lighter);
}

.admin-layout .member-course-lessons li.is-completed .member-course-lesson-name svg {
  color: var(--color-accent-text);
}

.admin-layout .member-course-state {
  margin-left: 6px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.admin-layout .member-course-weeks {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.admin-layout .member-course-week > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.admin-layout .member-course-week > .member-course-lessons {
  margin-top: 6px;
}

.admin-layout .member-course-sql-note {
  margin: 0 0 10px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .member-course-caret svg {
    transition: none;
  }
}

.admin-layout .member-course-actions {
  justify-content: flex-start;
  margin-bottom: 8px;
}

.admin-layout .member-course-date {
  margin-bottom: 8px;
}

.admin-layout .member-course-date[hidden] {
  display: none;
}

.admin-layout .member-course-block {
  margin-top: 10px;
}

.admin-layout .member-course-subtitle {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
}

.admin-layout .member-course-lessons {
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 21px;
  overflow-wrap: anywhere;
}

.admin-layout .member-course-schedule {
  margin-top: 10px;
  font-size: 13.5px;
}

.admin-layout .member-course-schedule summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.admin-layout .member-course-schedule li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.admin-layout .member-course-schedule li.is-disabled > span:first-child {
  opacity: 0.6;
}

.admin-layout .member-course-schedule .badge {
  flex: none;
}

.admin-layout .member-course-seen li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.admin-layout .member-course-seen .badge,
.admin-layout .member-course-badges {
  flex: none;
}

.admin-layout .member-course-badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

/* Courses: one course's members and progress */

.admin-layout .cm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-layout .cm-toolbar .input-field {
  height: 34px;
  margin: 0;
}

.admin-layout .cm-toolbar input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-layout .cm-toolbar select {
  width: auto;
}

.admin-layout .cm-sort-label {
  margin: 0;
}

.admin-layout .cm-toolbar-end {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.admin-layout .cm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.admin-layout .cm-chip {
  padding: 4px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* Automations list, Members column: compact status chips that wrap instead of widening the table */
.admin-layout .auto-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 280px;
}

.admin-layout .auto-stat {
  padding: 2px 8px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.admin-layout .auto-stat:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.admin-layout .auto-stat:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.admin-layout .cm-chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.admin-layout .cm-add {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .cm-add[hidden] {
  display: none;
}

.admin-layout .cm-add-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.admin-layout .cm-add-head h4 {
  margin: 0;
  font-size: 14px;
}

.admin-layout .cm-add-list {
  max-height: 260px;
  background: var(--color-surface);
}

.admin-layout .cm-add-list .checkbox-field {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.admin-layout .cm-add-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.admin-layout .cm-add-actions .field-hint {
  margin-right: auto;
}

.admin-layout .cm-member {
  display: grid;
  gap: 2px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-layout .cm-member .cm-email {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.admin-layout .cm-member[aria-expanded="true"] .cm-email,
.admin-layout .cm-member:hover .cm-email {
  color: var(--color-accent-text);
}

/* ONE member link everywhere (admin.js memberLink): the link colour, underline on hover, a visible
   keyboard focus ring, square corners; readable in light and dark (the theme's accent text colour) */
.admin-layout a.member-link {
  color: var(--color-accent-text);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.admin-layout a.member-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-layout a.member-link:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
  border-radius: 0;
}

/* (the Members list keeps its own darker name links: .member-page-link) */
.admin-layout a.member-link.member-page-link {
  color: var(--color-text);
}

.admin-layout a.member-link.member-page-link:hover {
  color: var(--color-accent-text);
}

/* The member cell of a list where the row has its own action: the name (a link), the email under
   it, and the small button that does what the row did (Log, Lessons) */
.admin-layout .cm-member.cm-member-text {
  display: grid;
  gap: 2px;
  cursor: default;
}

.admin-layout .cm-member-text a.member-link.cm-email {
  color: var(--color-accent-text);
  font-weight: 600;
}

.admin-layout .cm-log-btn {
  margin-top: 6px;
  margin-right: 6px;
}

.admin-layout .cm-progress {
  position: relative;
  width: 120px;
  max-width: 100%;
  height: 8px;
  border-radius: 0;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.admin-layout .cm-progress-available,
.admin-layout .cm-progress-viewed,
.admin-layout .cm-progress-seen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.admin-layout .cm-progress-available {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.admin-layout .cm-progress-viewed {
  background: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.admin-layout .cm-progress-seen {
  background: var(--color-primary);
}

.admin-layout .cm-detail-row td {
  background: var(--color-surface-alt);
}

.admin-layout .cm-lessons {
  margin: 0;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 21px;
}

.admin-layout .cm-lesson {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  overflow-wrap: anywhere;
}

.admin-layout .cm-lesson .badge {
  flex: none;
}

.admin-layout .cm-lesson.is-disabled > span:first-child {
  opacity: 0.6;
}

@media (max-width: 700px) {
  .admin-layout .cm-toolbar-end {
    width: 100%;
    margin-left: 0;
  }

  .admin-layout .cm-progress {
    width: 140px;
  }

  .admin-layout .cm-detail-row td {
    display: block;
  }
}

/* Automations: "Members in <automation>" panel */
.admin-layout .link-button {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.admin-layout .link-button:hover,
.admin-layout .link-button:focus-visible {
  color: var(--color-accent-text);
  text-decoration: underline;
}

.admin-layout .am-row {
  cursor: pointer;
}

.admin-layout .am-bulk .checkbox-field {
  margin: 0;
}

.admin-layout .am-note {
  margin-top: 12px;
}

/* Messages (SMS) */
.admin-layout .sms-setup {
  margin-bottom: 12px;
}

.admin-layout .sms-setup summary {
  cursor: pointer;
  font-weight: 600;
}

.admin-layout .sms-vars,
.admin-layout .sms-hooks {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding: 0;
}

.admin-layout .sms-vars li,
.admin-layout .sms-hooks li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
}

.admin-layout .sms-hook-url {
  overflow-wrap: anywhere;
}

.admin-layout .sms-layout {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 16px;
  min-height: 480px;
}

.admin-layout .sms-list-pane,
.admin-layout .sms-thread-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .sms-list-tools {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
}
/* The search on its own line; the filter (with its counts) and the order under it */
.admin-layout .sms-list-tools {
  flex-wrap: wrap;
}

/* "Unread (N)": pressed while only the unread conversations show */
.admin-layout .sms-unread-btn {
  flex: none;
  margin: 0;
}

.admin-layout .sms-unread-btn.is-on {
  box-shadow: inset 0 0 0 2px var(--color-primary);
  font-weight: 600;
}
.admin-layout .sms-list-tools #sms-search {
  flex: 1 1 100%;
  min-width: 0;
}
.admin-layout .sms-list-tools #sms-filter {
  flex: 1 1 0;
  min-width: 0;
}
.admin-layout .sms-list-tools #sms-sort {
  flex: 0 0 auto;
  width: auto;
}

.admin-layout .sms-list-tools .input-field {
  height: 34px;
  margin: 0;
}

.admin-layout .sms-list-tools input {
  flex: 1;
  min-width: 0;
}

.admin-layout .sms-list-tools select {
  width: auto;
}

.admin-layout .sms-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 70vh;
}

.admin-layout .sms-contact {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-layout .sms-contact:hover,
.admin-layout .sms-contact.is-selected {
  background: var(--color-surface-alt);
}

.admin-layout .sms-contact .badge {
  justify-self: start;
}

/* Route (US / Serbia / Not supported) and consent badges side by side, wrapping on narrow screens */
.admin-layout .sms-contact-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.admin-layout .sms-route-badge {
  border-color: var(--btn-focus);
  color: var(--color-text);
}

.admin-layout .sms-route-note {
  margin: 6px 0 0;
}

.admin-layout .sms-route-note[hidden] {
  display: none;
}

/* Public page: unsubscribe from SMS (Serbian numbers) */
.sms-unsubscribe .sms-unsubscribe-en {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
}

.sms-unsubscribe .btn {
  margin-top: 8px;
}

.admin-layout .sms-contact-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* The name sits on the conversation button (one grid cell), as its own element: a link to the member
   can't be inside a button. Clicks on a plain-text name go through to the button. */
.admin-layout .sms-contact-item {
  display: grid;
}

.admin-layout .sms-contact-item > .sms-contact-top,
.admin-layout .sms-contact-item > .sms-contact {
  grid-area: 1 / 1;
}

.admin-layout .sms-contact-item > .sms-contact-top {
  position: relative;
  z-index: 1;
  align-self: start;
  padding: 10px 110px 0 12px;
  pointer-events: none;
}

.admin-layout .sms-contact-item > .sms-contact-top a {
  pointer-events: auto;
}

.admin-layout .sms-contact-item > .sms-contact {
  padding-top: 32px;
}

.admin-layout .sms-contact-item > .sms-contact .sms-contact-time {
  position: absolute;
  top: 10px;
  right: 12px;
}

.admin-layout .sms-contact-item > .sms-contact {
  position: relative;
}

/* A member's Texts tab and the Send text pop-up (admin.js smsConversation) */
.admin-layout .sms-convo {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
}

.admin-layout .sms-convo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .sms-convo-sub {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-layout .sms-convo-sub[hidden],
.admin-layout .sms-convo-optout[hidden] {
  display: none;
}

.admin-layout .sms-convo-nophone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .sms-convo-nophone p {
  margin: 0;
}

.admin-layout .sms-convo-thread {
  min-height: 120px;
  max-height: 50vh;
}

.admin-layout .sms-convo-composer textarea {
  width: 100%;
}

.admin-layout .email-pop-body.sms-pop {
  align-items: stretch;
}

.admin-layout .email-pop-body.sms-pop .sms-convo-thread {
  max-height: 40vh;
}

/* The conversations list: the name 14px semibold in the text colour (bold when unread), the phone
   12px and the date 11px, muted */
.admin-layout .sms-contact-name,
.admin-layout #panel-messages .sms-contact-item a.sms-contact-name,
.admin-layout #panel-messages .sms-contact-item .sms-contact-name a {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.admin-layout #panel-messages .sms-contact-item a.sms-contact-name:hover {
  text-decoration: underline;
}

.admin-layout .sms-contact-item.is-unread .sms-contact-name,
.admin-layout .sms-contact-item.is-unread .sms-contact-name a {
  font-weight: 800;
}

.admin-layout .sms-contact-phone {
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .sms-contact-time {
  flex: none;
  font-size: 11px;
}

/* The search and the two choices: smaller (the search on its line, the two choices under it) */
.admin-layout .sms-list-tools .input-field {
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 13px;
}

/* The chat header: the name (it opens the details), the info icon, the consent pill; icon buttons */
.admin-layout .sms-thread-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-layout .sms-person-name {
  font: inherit;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
}

.admin-layout .sms-person-info {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font: italic 700 12px/1 Georgia, serif;
  cursor: pointer;
}

.admin-layout .sms-consent-pill {
  padding: 1px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.admin-layout .sms-consent-pill.is-in {
  border-color: var(--color-success-text, #1a7f37);
  color: var(--color-success-text, #1a7f37);
}

.admin-layout .sms-consent-pill.is-out {
  border-color: var(--color-danger-text);
  color: var(--color-danger-text);
}

.admin-layout .sms-person-info[hidden],
.admin-layout .sms-consent-pill[hidden],
.admin-layout .sms-consent-detail[hidden],
.admin-layout .sms-thread-actions .btn[hidden] {
  display: none;
}

.admin-layout .sms-consent-detail {
  margin: 2px 0 0;
}

/* Edit contact, Mark as opted out, Refresh: the icon only (their words on hover and for screen readers) */
.admin-layout .sms-thread-actions .sms-icon-btn {
  min-width: 36px;
  padding: 0 9px;
  font-size: 0;
  gap: 0;
}

.admin-layout .sms-thread-actions .sms-icon-btn .btn-icon-svg {
  margin: 0;
}

/* Messages → the person's details (a drawer; full screen on a phone like the other drawers) */
.admin-layout .sms-person-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 16px;
}

.admin-layout .sms-person-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .sms-person-section.is-who {
  padding-top: 0;
  border-top: 0;
}

.admin-layout .sms-person-h {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .sms-person-section p {
  margin: 0;
}

.admin-layout .sms-person-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 12px;
  margin: 0;
  font-size: 13px;
}

.admin-layout .sms-person-facts dt {
  color: var(--color-text-muted);
}

.admin-layout .sms-person-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-layout .sms-person-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .sms-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--color-border-strong);
  font-size: 13px;
}

.admin-layout .sms-person-chip-x {
  min-width: 24px;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 16px;
  cursor: pointer;
}

.admin-layout .sms-person-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .sms-person-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
}

.admin-layout .sms-person-row-main {
  flex: 1 1 140px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .sms-person-pick {
  max-width: 320px;
}

.admin-layout .sms-person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout .sms-person-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-layout .sms-person-skeleton .skeleton-line {
  display: block;
  height: 14px;
  background: var(--color-surface-alt);
  animation: sms-person-pulse 1.2s ease-in-out infinite;
}

@keyframes sms-person-pulse {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .sms-person-skeleton .skeleton-line { animation: none; }
}

.admin-layout .sms-contact-preview {
  font-size: 13px;
  color: var(--color-text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-layout .sms-thread-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .sms-thread-who {
  flex: 1;
  min-width: 0;
}

.admin-layout .sms-thread-who h3 {
  margin: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* A contact with no member: "Not a member" and "Create member" (admin.js renderSmsHeader) */
.admin-layout .sms-not-member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}

.admin-layout .sms-not-member[hidden] {
  display: none;
}

/* (on a phone the two buttons may wrap their words; never wider than the screen) */
.admin-layout .sms-not-member .btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

/* (room for the name and the number on a phone: the buttons go under them rather than squeeze them) */
.admin-layout .sms-thread-who {
  flex: 1 1 180px;
}

.admin-layout .sms-create-member .field-label {
  margin-top: 8px;
}

.admin-layout .sms-also-member[hidden] {
  display: none;
}

.admin-layout .sms-thread-who .field-hint {
  margin: 0;
}

.admin-layout .sms-thread-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .sms-back {
  display: none;
}

.admin-layout .sms-thread {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 12px;
  overflow-y: auto;
  max-height: 60vh;
  min-height: 200px;
}

.admin-layout .sms-bubble {
  max-width: min(78%, 520px);
  padding: 8px 12px;
  border-radius: 0;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}

.admin-layout .sms-bubble.is-out {
  align-self: flex-end;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.admin-layout .sms-bubble.is-in {
  align-self: flex-start;
}

.admin-layout .sms-bubble.is-failed {
  border-color: rgba(229, 77, 46, 0.5);
}

.admin-layout .sms-bubble-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 20px;
}

.admin-layout .sms-bubble-meta {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--color-text-lighter);
}

.admin-layout .sms-bubble-error {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-danger-text);
  overflow-wrap: anywhere;
}

.admin-layout .sms-composer {
  padding: 10px 12px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .sms-composer[hidden] {
  display: none;
}

.admin-layout .sms-composer textarea {
  margin-bottom: 6px;
  resize: vertical;
}

.admin-layout .sms-composer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-layout .sms-reason {
  margin: 6px 0 0;
  color: #B45309;
}

.admin-layout .sms-reason:empty {
  display: none;
}

/* Phones: the list, then the thread with a back button */
@media (max-width: 760px) {
  .admin-layout .sms-layout {
    grid-template-columns: 1fr;
  }

  .admin-layout .sms-layout.has-thread .sms-list-pane,
  .admin-layout .sms-layout:not(.has-thread) .sms-thread-pane {
    display: none;
  }

  .admin-layout .sms-back {
    display: inline-flex;
  }

  .admin-layout .sms-bubble {
    max-width: 88%;
  }
}

/* Live updates: the switch under the top bar, status labels, change highlights */
.admin-layout .live-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
}

/* Messages: the header is the title, "Updated…" and one Menu (its Refresh is in the menu); the
   Infobip setup only as a red line when texting isn't ready */
.admin-layout #panel-messages .admin-toolbar .live-refresh,
.admin-layout #panel-messages .sms-old-actions {
  display: none;
}

/* "Updated…" on the right, just before the Menu */
.admin-layout #panel-messages .admin-toolbar > .live-status {
  order: 1;
  margin-left: auto;
}

.admin-layout #panel-messages .admin-toolbar > .admin-toolbar-end {
  order: 2;
  margin-left: 0;
}

@media (max-width: 600px) {
  .admin-layout #panel-messages .admin-toolbar > .admin-toolbar-end {
    margin-left: auto;
  }
}

.admin-layout .sms-setup-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-danger-text);
}

.admin-layout .sms-setup-line[hidden] {
  display: none;
}

/* The Infobip credit (admin-infobip-credit.js): a compact chip in the top bar and the Messages header,
   amber / red below the limits; the change since the last read as a small arrow */
.admin-layout .ib-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  min-height: 28px;
  padding: 2px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.admin-layout .ib-chip:hover {
  background: var(--color-surface-alt);
}

.admin-layout .ib-chip:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .ib-chip-name {
  color: var(--color-text-muted);
}

.admin-layout .ib-chip-amount {
  font-weight: 600;
}

.admin-layout .ib-chip-delta {
  color: var(--color-accent-text);
  font-size: 11px;
}

.admin-layout .ib-chip-delta.is-down {
  color: var(--color-text-muted);
}

.admin-layout .ib-chip-delta[hidden] {
  display: none;
}

.admin-layout .ib-chip.is-amber {
  border-color: var(--color-warning-text);
  background: color-mix(in srgb, var(--color-warning-text) 10%, var(--color-surface));
  color: var(--color-warning-text);
}

.admin-layout .ib-chip.is-red {
  border-color: var(--color-danger-text);
  background: color-mix(in srgb, var(--color-danger-text) 10%, var(--color-surface));
  color: var(--color-danger-text);
}

.admin-layout .ib-chip.is-amber .ib-chip-name,
.admin-layout .ib-chip.is-red .ib-chip-name {
  color: inherit;
}

.admin-layout .ib-chip.is-error .ib-chip-amount {
  color: var(--color-text-muted);
}

.admin-layout .ib-chip.is-loading {
  opacity: 0.75;
}

/* In the main blue bar, next to the bell (Ben 2026-11-03): light text that fits the bar, the bell's height */
.admin-layout .admin-bar-end .ib-chip {
  min-height: 32px;
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #FFFFFF;
}

.admin-layout .admin-bar-end .ib-chip:hover {
  background: rgba(255, 255, 255, 0.12);
}

.admin-layout .admin-bar-end .ib-chip .ib-chip-name,
.admin-layout .admin-bar-end .ib-chip .ib-chip-delta.is-down {
  color: rgba(255, 255, 255, 0.75);
}

.admin-layout .admin-bar-end .ib-chip .ib-chip-delta {
  color: #B9F3C8;
}

.admin-layout .admin-bar-end .ib-chip.is-amber {
  border-color: #FFD58A;
  background: rgba(255, 213, 138, 0.16);
  color: #FFD58A;
}

.admin-layout .admin-bar-end .ib-chip.is-red {
  border-color: #FF9B9B;
  background: rgba(255, 155, 155, 0.16);
  color: #FF9B9B;
}

.admin-layout .admin-bar-end .ib-chip:focus-visible {
  outline-color: #FFFFFF;
}

/* The top bar's chip: not while Messages shows (its header has one), not on a phone */
.admin-layout:has(#panel-messages:not([hidden])) #ib-chip-top {
  display: none;
}

@media (max-width: 600px) {
  .admin-layout #ib-chip-top {
    display: none;
  }
}

/* Low credit on Messages */
.admin-layout .sms-credit-banner {
  margin: 0 0 10px;
  padding: 6px 10px;
  border: 1px solid var(--color-warning-text);
  background: color-mix(in srgb, var(--color-warning-text) 10%, var(--color-surface));
  color: var(--color-warning-text);
  font-size: 13px;
}

.admin-layout .sms-credit-banner.is-red {
  border-color: var(--color-danger-text);
  background: color-mix(in srgb, var(--color-danger-text) 10%, var(--color-surface));
  color: var(--color-danger-text);
}

.admin-layout .sms-credit-banner a {
  color: inherit;
  font-weight: 600;
}

.admin-layout .sms-credit-banner[hidden],
.admin-layout .sms-credit-note[hidden],
.admin-layout .course-link-credit[hidden] {
  display: none;
}

.admin-layout .sms-credit-note {
  margin: 4px 0 0;
  font-size: 13px;
}

.admin-layout .course-link-credit.is-error {
  color: var(--color-danger-text);
}

/* The pop-up */
.admin-layout .ib-pop {
  max-width: 420px;
}

.admin-layout .ib-pop p {
  margin: 0 0 6px;
}

/* "Texts are sent from +1 516-927-3538": the first line of the pop-up */
.admin-layout .ib-pop-from {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .ib-pop-from-label {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .ib-pop-from-number {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.admin-layout .ib-pop-balance {
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.admin-layout .ib-pop-balance.is-amber {
  color: var(--color-warning-text);
}

.admin-layout .ib-pop-balance.is-red {
  color: var(--color-danger-text);
}

.admin-layout .ib-pop-error {
  color: var(--color-danger-text);
}

.admin-layout .ib-pop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.admin-layout .ib-pop-actions .btn {
  width: auto;
}

.admin-layout .ib-pop-usage {
  margin: 10px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .ib-pop-h {
  margin: 0 0 6px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-layout .ib-pop .ib-pop-used {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  margin: 0 0 4px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.admin-layout .ib-pop-used-label {
  color: var(--color-text-muted);
}

.admin-layout .ib-spark-wrap {
  margin-top: 6px;
  color: var(--color-accent-text);
}

.admin-layout .ib-spark {
  display: block;
  max-width: 100%;
  height: auto;
}

.admin-layout .ib-pop .ib-spark-range {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

.admin-layout .ib-pop-settings summary {
  cursor: pointer;
  font-size: 13px;
}

.admin-layout .ib-pop-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

/* (live updates are always on: only this note, after a minute without a connection) */
.admin-layout .live-offline {
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .live-offline[hidden] {
  display: none;
}

.admin-layout .live-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.admin-layout .live-banner[hidden],
.admin-layout #live-resume[hidden] {
  display: none;
}

.admin-layout .live-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-lighter);
}

.admin-layout .admin-drawer-header:has(.live-status) {
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout .admin-drawer-header .live-status {
  margin: 0 0 0 auto;
}

.admin-layout .live-note {
  color: var(--color-accent-text);
  font-weight: 500;
}

.admin-layout .live-error {
  color: var(--color-danger-text);
}

.admin-layout .live-note:empty,
.admin-layout .live-error:empty {
  display: none;
}

@keyframes live-glow {
  from { background-color: color-mix(in srgb, var(--color-primary) 18%, transparent); }
  to { background-color: transparent; }
}

@keyframes live-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

.admin-layout .live-new,
.admin-layout .live-changed > *,
.admin-layout .live-flash {
  animation: live-glow 2.5s ease-out;
}

.admin-layout .live-removed {
  animation: live-fade 1.5s ease-out forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* A static highlight instead of an animation */
  .admin-layout .live-new,
  .admin-layout .live-changed > *,
  .admin-layout .live-flash {
    animation: none;
    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  }

  .admin-layout .live-removed {
    animation: none;
    opacity: 0.4;
    text-decoration: line-through;
  }
}

/* Step form: choice (radio buttons) and course checklist */
.admin-layout .step-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 12px;
  padding: 0;
  border: none;
}

/* The short Notify admin dialog (Ben 2026-11-05: "clean all of this"): one heading line, and Channel's two
   small boxes side by side */
.admin-layout .step-form-heading {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .step-channel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.admin-layout .step-channel-row .checkbox-field {
  margin: 0;
}

/* A choice shown only for another field's value (showWhen, e.g. "Remove access to" for Remove) */
.admin-layout .step-choices[hidden] {
  display: none;
}

.admin-layout .step-choices legend {
  width: 100%;
  padding: 0;
}

.admin-layout .step-choice {
  margin: 0;
}

/* Two or three short choices: one segmented control across the panel */
.admin-layout .step-choices.is-segmented {
  display: block;
}

.admin-layout .step-choices.is-segmented .segmented {
  max-width: none;
  margin-top: 4px;
}

.admin-layout .step-choices.is-segmented .segmented-text {
  white-space: normal;
}

/* A legend with its "i" (tidyStepHints) */
.admin-layout .step-choices legend .info-tip {
  margin-left: 6px;
  vertical-align: middle;
}

.admin-layout .step-course-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 6px;
}

.admin-layout .step-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent-text);
}

.admin-layout .step-course-list {
  max-height: 260px;
}

.admin-layout .step-checkbox {
  margin: 4px 0 10px;
}

.admin-layout .step-checkbox[hidden] {
  display: none;
}

/* A dropdown in a step's settings (e.g. "Lesson order for this course"), hidden when it doesn't apply */
.admin-layout .step-select-field {
  margin: 10px 0 4px;
}

.admin-layout .step-select-field[hidden] {
  display: none;
}

/* "Lesson order for these courses" in the Members page bulk Add course access */
.admin-layout .member-bulk-course-order {
  margin: 12px 0 8px;
}

/* "Remove all access" (step panel and Members page bulk action): the folded keep-lists */
.admin-layout .remove-all-options .notice {
  margin-bottom: 10px;
}

.admin-layout .remove-all-keep {
  margin: -4px 0 12px 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: var(--color-surface-alt);
}

.admin-layout .remove-all-keep[hidden] {
  display: none;
}

.admin-layout .remove-all-keep > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}

.admin-layout .remove-all-keep > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 0;
}

.admin-layout .remove-all-keep .pick-list {
  margin-top: 8px;
}

@media (max-width: 600px) {
  .admin-layout .remove-all-keep {
    margin-left: 0;
  }
}

/* Flow editor: members at each step */
.admin-layout .flow-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 12px;
}

.admin-layout .flow-counts-summary {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
}

.admin-layout .flow-counts-summary.is-error {
  color: var(--color-danger-text);
}

.admin-layout .flow-counts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
}

.admin-layout .flow-end .flow-counts-row {
  justify-content: center;
  padding: 6px 0 0;
}

.admin-layout .flow-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  cursor: pointer;
}

.admin-layout .flow-count svg {
  width: 14px;
  height: 14px;
}

.admin-layout button.flow-count:hover,
.admin-layout button.flow-count:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-accent-text);
}

.admin-layout .flow-count.is-static {
  cursor: default;
  color: var(--color-text-lighter);
}

.admin-layout .flow-count.is-failed {
  border-color: rgba(229, 77, 46, 0.5);
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

/* "Waiting to begin" for longer than expected: amber (light and dark use their own warning colour) */
.admin-layout .flow-count.is-late {
  border-color: color-mix(in srgb, var(--color-warning-text) 50%, transparent);
  background: color-mix(in srgb, var(--color-warning-text) 14%, transparent);
  color: var(--color-warning-text);
}

.admin-layout .fs-progress {
  display: block;
  margin-top: 4px;
}

.admin-layout .fs-error {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
}

/* The run log and Add members open over this panel, which stays open underneath */
.admin-layout #automation-log-drawer,
.admin-layout #automation-members-drawer {
  z-index: 71; /* above the full-screen panel it opens from */
}

/* Members: the "View" panel (full width on phones, like every side panel) */

.admin-layout .mv-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-layout .mv-tab {
  flex: none;
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.admin-layout .mv-tab[aria-selected="true"] {
  border-bottom-color: var(--color-primary);
  color: var(--color-text);
}

.admin-layout .mv-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.admin-layout .mv-panel[hidden] {
  display: none;
}

.admin-layout .mv-panel:focus-visible {
  outline: none;
}

.admin-layout .mv-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0 0 12px;
  font-size: 14px;
}

.admin-layout .mv-facts dt {
  color: var(--color-text-lighter);
}

.admin-layout .mv-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-layout .mv-overview-error {
  grid-column: 1 / -1;
}

.admin-layout .mv-actions {
  justify-content: flex-end;
  margin-top: 12px;
}

.admin-layout .mv-run-line {
  margin: 0 0 4px;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.admin-layout #mv-auto-add-note[hidden] {
  display: none;
}

@media (max-width: 420px) {
  .admin-layout .mv-facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .admin-layout .mv-facts dd {
    margin-bottom: 8px;
  }
}

.admin-layout .activity-toolbar input[type="date"] {
  flex: 0 1 150px;
  width: auto;
}

.admin-layout .activity-list {
  display: grid;
  gap: 16px;
}

.admin-layout .activity-day-heading {
  position: sticky;
  top: -20px;
  z-index: 1;
  margin: 0 0 6px;
  padding: 6px 0;
  background: var(--color-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .activity-items {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.admin-layout .activity-item {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.admin-layout .activity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 2px;
}

.admin-layout .activity-time {
  font-size: 13px;
  font-weight: 500;
}

.admin-layout .activity-relative {
  font-size: 12px;
}

.admin-layout .activity-chip {
  margin-left: auto;
}

.admin-layout .activity-event {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Form submissions: the page the form was on */
.admin-layout .activity-page {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-lighter);
  overflow-wrap: anywhere;
}

.admin-layout .activity-description {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-layout .activity-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 560px) {
  .admin-layout .activity-chip {
    margin-left: 0;
  }

  .admin-layout .activity-toolbar input[type="date"] {
    flex: 1 1 130px;
  }
}

/* Lessons: sort control (display only) */
.admin-layout .admin-toolbar-filters select#lesson-sort {
  min-width: 150px;
}

.admin-layout .lesson-sort-note {
  margin: 0 0 8px;
}

/* Lessons: recent release emails */
.admin-layout .release-log {
  margin-top: 32px;
}

/* Lessons: drip schedule */
.admin-row-title .lesson-release-line {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-text-lighter);
}

/* Lessons tab: the Modules section and the "Lessons" heading above the grouped list */
.admin-layout .admin-subbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 20px 0 10px;
}

/* Lessons tab: "Recheck all", "Check video lengths", Stop */
.admin-layout .video-length-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.admin-layout .video-length-tools .checkbox-field {
  margin: 0;
  font-size: 13px;
}

.admin-layout .video-length-status:empty {
  display: none;
}

/* The end summary: one line per lesson that couldn't be read, with its reason */
.admin-layout .video-length-failures {
  margin: 6px 0 0;
  padding-left: 20px;
  overflow-wrap: anywhere;
}

.admin-layout .video-length-failures li + li {
  margin-top: 2px;
}

.admin-layout .video-length-scope {
  margin: 8px 0 0;
  font-weight: 600;
}

.admin-layout .module-admin {
  margin-bottom: 8px;
}

/* A module heading in the lessons list (lessons are grouped under their module) */
.admin-layout .admin-group-heading {
  list-style: none;
  margin: 18px 0 8px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--color-border-strong);
}

.admin-layout .admin-group-heading:first-child {
  margin-top: 0;
}

/* Lessons: tick boxes, "Select all" per group, the "N selected · Move to… · Clear" bar and the
   Move popup (admin.js lessonSel / openMoveLessons) */
.admin-layout .lesson-select-box {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 0;
  accent-color: var(--btn-focus);
  cursor: pointer;
}

.admin-layout .lesson-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
}

.admin-layout .lesson-select-all-row {
  border-bottom: none;
}

.admin-layout .lesson-select-bar {
  position: sticky;
  top: calc(var(--admin-nav-height, 56px) + 8px);
  z-index: 25;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  /* (solid: the lessons scroll underneath it) */
  background: var(--color-surface);
  color: var(--color-text);
}

.admin-layout .lesson-select-bar[hidden] {
  display: none;
}

/* (the same as the Courses bar's "N selected": a plain hint after the Actions button) */
.admin-layout .lesson-select-count {
  font-weight: 400;
}

.admin-layout .lesson-select-count:focus-visible {
  outline: 2px solid var(--btn-focus, var(--color-primary));
  outline-offset: 2px;
}

.admin-layout .lesson-select-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout .lesson-list-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.admin-layout .lesson-select-course[hidden] {
  display: none;
}

.admin-layout .lesson-select-course {
  margin: 0;
  font-size: 14px;
}

.admin-layout .lesson-select-bar .btn,
.admin-layout .lesson-move-actions .btn {
  width: auto;
  border-radius: 0;
}

.admin-layout .email-pop-body .input-field {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.admin-layout .lesson-move-summary {
  margin: 4px 0 0;
}

.admin-layout .lesson-move-warning {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.admin-layout .lesson-move-warning p {
  margin: 0 0 8px;
}

.admin-layout .lesson-move-warning[hidden] {
  display: none;
}

/* "+ Add new module…" (newModulePicker): the name field and its button under the module dropdown */
.admin-layout .new-module-box {
  width: 100%;
}

.admin-layout .new-module-box[hidden] {
  display: none;
}

.admin-layout .new-module-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.admin-layout .new-module-row .input-field,
.admin-layout .email-pop-body .new-module-row .input-field {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}

.admin-layout .new-module-row .btn {
  flex: none;
  width: auto;
  border-radius: 0;
}

.admin-layout .new-module-note:empty {
  display: none;
}

.admin-layout .lesson-move-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

.admin-layout .admin-group-heading.is-disabled .admin-group-title {
  color: var(--color-text-muted);
}

.admin-layout .admin-group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.admin-layout .admin-group-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-lighter);
}

.admin-layout .admin-group-empty {
  margin-bottom: 8px;
  padding: 10px 12px;
}

/* "Library display" box (Lessons tab and the "Modules and lessons" panel) */
.admin-layout .library-display {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
}

.admin-layout .library-display[hidden] {
  display: none;
}

.admin-layout .library-display-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .library-display-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.admin-layout .library-display-field {
  flex: 1 1 180px;
  max-width: 260px;
  min-width: 0;
}

.admin-layout .library-display-field[hidden] {
  display: none;
}

.admin-layout .library-display-field .input-field {
  margin-bottom: 0;
}

.admin-layout .library-display-preview {
  margin: 10px 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.admin-layout .library-display-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.admin-layout .library-display-actions .form-message {
  margin: 0;
}

/* "Modules and lessons" panel: module blocks with their lessons; drag handles; drop line */
.admin-layout .cs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.admin-layout .cs-hint {
  flex: 1 1 260px;
  margin: 0;
}

.admin-layout .cs-status {
  margin: 0;
  min-height: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.admin-layout .cs-status.is-saved {
  color: var(--progress-done);
}

.admin-layout .cs-modules {
  display: grid;
  gap: 14px;
}

.admin-layout .cs-module {
  padding: 12px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  transition: outline-color 0.15s ease, background-color 0.15s ease;
  outline: 2px dashed transparent;
  outline-offset: 2px;
}

.admin-layout .cs-module.is-disabled .cs-module-text {
  opacity: 0.65;
}

.admin-layout .cs-module.is-drop-target {
  outline-color: var(--btn-focus);
  background: var(--color-surface-alt);
}

.admin-layout .cs-module-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.admin-layout .cs-module-text {
  flex: 1 1 200px;
  min-width: 0;
}

.admin-layout .cs-module-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.admin-layout .cs-module-text .lesson-release-line {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-lighter);
}

.admin-layout .cs-lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 44px; /* an empty module is still a place to drop a lesson */
}

/* Collapse / expand modules (admin.js csToggleCollapse) */
.admin-layout .cs-collapse-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.admin-layout .cs-collapse-tools .btn {
  width: auto;
}

.admin-layout .cs-lessons[hidden] {
  display: none;
}

.admin-layout .cs-module.is-collapsed .cs-module-head {
  margin-bottom: 0;
}

/* "Show 11 lessons" / "Hide lessons": a labelled button with its arrow (right when closed, down when open) */
.admin-layout .cs-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-strong, var(--color-border));
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.admin-layout .cs-toggle:hover {
  background: var(--color-surface-alt);
}

.admin-layout .cs-expand-note {
  margin: 0 0 0 4px;
}

.admin-layout .cs-expand-note[hidden] {
  display: none;
}

.admin-layout .cs-toggle:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .cs-toggle-chevron {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.admin-layout .cs-module.is-collapsed .cs-toggle-chevron {
  transform: rotate(-90deg);
}

.admin-layout .cs-module:not(.cs-ungrouped) .cs-module-text {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .cs-toggle-chevron {
    transition: none;
  }
}

.admin-layout .cs-lesson {
  flex-wrap: wrap;
}

.admin-layout .cs-lesson .admin-row-title {
  flex: 1 1 200px;
}

.admin-layout .cs-move-select {
  width: auto;
  max-width: 190px;
  height: 30px;
  margin: 0;
  padding: 4px 8px;
  font-size: 13px;
}

.admin-layout .cs-empty {
  padding: 12px;
  border: 1px dashed var(--color-border-strong);
  font-size: 13px;
  color: var(--color-text-lighter);
  text-align: center;
}

/* Page Builder: while an element row is dragged, no frame (a video, a form) takes the pointer, so a
   release over the preview still ends the drag (page-builder.js startDrag) */
body.pb-row-dragging iframe {
  pointer-events: none;
}

/* The handle: grab it to drag (touch-action: none keeps touch from scrolling the page instead) */
.admin-layout .cs-handle {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 32px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-lighter);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.admin-layout .cs-handle:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.admin-layout .cs-handle-dots {
  width: 8px;
  height: 14px;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.6px);
  background-size: 4px 4.67px;
}

.admin-layout .is-dragging {
  opacity: 0.35;
}

.admin-layout .cs-drop-line {
  list-style: none;
  height: 3px;
  margin: 2px 0 6px;
  background: var(--btn-focus);
}

/* The copy that follows the pointer */
.cs-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  margin: 0;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  list-style: none;
}

body.cs-dragging,
body.cs-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

@media (max-width: 640px) {
  .admin-layout .cs-module {
    padding: 10px 8px;
  }

  .admin-layout .cs-lesson .admin-row-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .admin-layout .cs-module-head .admin-row-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .admin-layout .cs-move-select {
    max-width: none;
    flex: 1 1 160px;
  }

  .admin-layout .library-display-field {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .cs-module {
    transition: none;
  }
}

/* Course page: a collapsible section per module */
.course-module + .course-module {
  margin-top: 12px;
}

.course-module-heading {
  margin: 0 0 8px;
}

.course-module-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.course-module-toggle:hover {
  background: var(--color-surface-alt);
}

.course-module-toggle:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.course-module-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.course-module-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.course-module-meta {
  font-size: 12.5px;
  font-weight: 450;
  line-height: 18px;
  color: var(--color-text-lighter);
}

/* A module that hasn't opened yet: greyed, closed, one "opens on" line instead of its lessons */
.course-module.is-waiting .course-module-name,
.course-module.is-waiting .course-module-meta {
  opacity: 0.6;
}

.course-module-waiting {
  margin: 8px 16px 14px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.course-module-locked {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 450;
  color: var(--color-text-lighter);
}

.course-module-locked svg {
  flex: none;
}

/* A chevron that points down when open */
.course-module-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 4px;
  border-right: 2px solid var(--color-text-lighter);
  border-bottom: 2px solid var(--color-text-lighter);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.course-module-toggle[aria-expanded="false"] .course-module-chevron {
  margin-bottom: 0;
  transform: rotate(-45deg);
}

.course-module .course-list[hidden] {
  display: none;
}

.course-module .course-list {
  margin-bottom: 4px;
  padding-left: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .course-module-toggle,
  .course-module-chevron {
    transition: none;
  }
}

@media (max-width: 520px) {
  .course-module-toggle {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .course-module-text {
    flex-basis: calc(100% - 28px);
  }

  .course-module-locked {
    order: 2;
    flex-basis: 100%;
  }

  .course-module .course-list {
    padding-left: 0;
  }
}

.admin-layout .bulk-schedule-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.admin-layout .bulk-schedule-table tr.bulk-changed td {
  font-weight: 600;
}

.admin-layout .order-items {
  display: block;
  font-size: 12px;
}

.admin-layout .pick-list .checkbox-field {
  margin: 0;
  font-weight: 450;
}

.admin-layout .pick-list > li.is-blocked {
  color: var(--color-text-lighter);
}

.admin-layout .admin-drawer-actions .field-hint {
  margin-right: auto;
  align-self: center;
}

.admin-layout .run-log {
  list-style: none;
  display: grid;
  gap: 8px;
}

/* Run statuses: one colour each, the same on the Members chips, the status badges (Runs table,
   members in an automation, member panel) and the legend. The word is always written too. */
.admin-layout .run-status.is-active {
  border-color: color-mix(in srgb, var(--btn-focus) 55%, transparent);
  background: color-mix(in srgb, var(--btn-focus) 14%, var(--color-surface));
  color: var(--color-text);
}

.admin-layout .run-status.is-done {
  border-color: color-mix(in srgb, var(--progress-done) 55%, transparent);
  background: color-mix(in srgb, var(--progress-done) 16%, var(--color-surface));
  color: var(--color-text);
}

.admin-layout .run-status.is-stopped {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.admin-layout .run-status.is-failed {
  border-color: color-mix(in srgb, var(--color-danger) 55%, transparent);
  background: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
  color: var(--color-text);
}

.admin-layout .run-status.is-removed {
  border-color: var(--color-border);
  border-style: dashed;
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.admin-layout .badge.run-status {
  border-width: 1px;
  border-style: solid;
}

.admin-layout .badge.run-status.is-removed {
  border-style: dashed;
}

/* "Status guide": a small, quiet text link next to the Automations heading (not a button look) */
.admin-layout .automation-legend-toggle {
  align-self: center;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.admin-layout .automation-legend-toggle:hover,
.admin-layout .automation-legend-toggle[aria-expanded="true"] {
  color: var(--color-text);
  text-decoration-color: currentColor;
}

.admin-layout .automation-legend-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 0;
}

.admin-layout .automation-legend {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .automation-legend[hidden] {
  display: none;
}

.admin-layout .automation-legend-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .automation-legend-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.admin-layout .automation-legend-list .badge {
  flex: none;
  min-width: 72px;
  text-align: center;
}

.admin-layout .automation-legend-text {
  flex: 1 1 220px;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Run log: "Where they are". The automation's steps as small cards joined by a line; each card's
   state is written in it (Done / <name> is here / Failed / Stopped here / Not reached yet) and shown
   by colour too: done green and muted, current blue, failed red, not reached dim */
.admin-layout .run-flow-wrap {
  margin: 4px 0 16px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .run-flow-heading {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
}

/* Member → Automations: each run's diagram, collapsible (open for the run they are in now) */
.admin-layout .mv-run-flow {
  margin: 10px 0 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .mv-run-flow-summary {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.admin-layout .mv-run-flow-summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.admin-layout .mv-run-flow-list {
  padding: 4px 12px 12px;
}

.admin-layout .run-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-layout .run-flow-item {
  position: relative;
}

/* The line between two cards */
.admin-layout .run-flow-item + .run-flow-item::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 22px;
  width: 2px;
  height: 14px;
  background: var(--color-border-strong);
}

.admin-layout .run-flow-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
}

.admin-layout button.run-flow-card {
  cursor: pointer;
}

.admin-layout button.run-flow-card:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .run-flow-icon {
  flex: none;
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.admin-layout .run-flow-icon svg {
  width: 16px;
  height: 16px;
}

.admin-layout .run-flow-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .run-flow-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .run-flow-title {
  font-size: 14px;
  font-weight: 600;
}

.admin-layout .run-flow-summary,
.admin-layout .run-flow-state {
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .run-flow-state {
  font-weight: 600;
}

/* Done: green check, muted card */
.admin-layout .run-flow-item.is-done .run-flow-card {
  opacity: 0.8;
}

.admin-layout .run-flow-item.is-done .run-flow-icon {
  background: var(--progress-done);
  color: #fff;
}

.admin-layout .run-flow-item.is-done .run-flow-state {
  color: var(--progress-done);
}

/* Here now: blue border and a marker above it */
.admin-layout .run-flow-item.is-current .run-flow-card {
  border: 2px solid var(--btn-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-focus) 20%, transparent);
}

.admin-layout .run-flow-item.is-current .run-flow-icon {
  background: var(--btn-focus);
  color: #fff;
}

.admin-layout .run-flow-item.is-current .run-flow-state {
  color: var(--btn-focus);
}

.admin-layout .run-flow-marker {
  display: inline-block;
  margin: 0 0 4px 36px;
  padding: 2px 8px;
  border-radius: 0;
  background: var(--btn-focus);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* Failed: red */
.admin-layout .run-flow-item.is-failed .run-flow-card {
  border: 2px solid var(--color-danger);
}

.admin-layout .run-flow-item.is-failed .run-flow-icon {
  background: var(--color-danger);
  color: #fff;
}

.admin-layout .run-flow-item.is-failed .run-flow-state {
  color: var(--color-danger-text);
}

/* Stopped or removed here: a dashed outline, the reason in the text */
.admin-layout .run-flow-item.is-stopped .run-flow-card {
  border: 2px dashed var(--color-border-strong);
}

/* Not reached yet: dim and plain */
.admin-layout .run-flow-item.is-todo .run-flow-card {
  opacity: 0.55;
}

/* The step whose log lines are shown */
.admin-layout .run-flow-item.is-filtered .run-flow-card {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.admin-layout .run-flow-retry {
  margin: 6px 0 0 36px;
}

.admin-layout .run-flow-runs {
  margin-top: 12px;
}

.admin-layout .run-flow-runs-list {
  margin: 4px 0 0;
  padding-left: 18px;
}

.admin-layout .run-flow-runs-list li + li {
  margin-top: 4px;
}

.admin-layout .run-log-filter {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .run-log-filter[hidden],
.admin-layout .run-flow-runs[hidden] {
  display: none;
}

.admin-layout .run-log-item {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.admin-layout .run-log-item.is-next {
  border-style: dashed;
}

.admin-layout .run-log-item.has-error {
  border-color: rgba(229, 77, 46, 0.4);
}

.admin-layout .run-log-time {
  font-size: 12px;
  color: var(--color-text-lighter);
}

.admin-layout .run-log-error {
  color: var(--color-danger-text);
  overflow-wrap: anywhere;
}

/* Member library column: keep the switch and order buttons readable on dimmed (disabled) rows */
.admin-layout .members-table tr.is-disabled td.showcase-library {
  opacity: 1;
}

.admin-layout .showcase-library-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-layout .members-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 12px;
  background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), var(--color-surface);
  box-shadow: inset 0 -1px 0 var(--color-border);
  border-bottom: none;
}

.admin-layout .members-table td {
  padding: 6px 12px;
}

.admin-layout .members-table tbody tr:nth-child(even) td {
  background: var(--color-surface-alt);
}

.admin-layout .members-table tbody tr:hover td {
  background: var(--color-border);
}

.admin-layout .members-table .col-actions,
.admin-layout .members-table td.member-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.admin-layout .member-actions .admin-row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.admin-layout .badge-admin {
  border-color: rgba(14, 126, 78, 0.35);
  background: rgba(14, 126, 78, 0.1);
  color: var(--color-accent-text);
}

/* Videos: the list reads as one table */
.admin-layout #video-browser .video-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}

.admin-layout #video-browser .video-row {
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

/* Videos: the Actions bar stays reachable while the list scrolls (as the Lessons bar); each row's one
   Actions menu at its right edge, the full width on a phone */
.admin-layout .video-bulk-wrap .video-select-bar {
  position: sticky;
  top: calc(var(--admin-nav-height, 56px) + 8px);
  z-index: 25;
  background: var(--color-surface);
  border-radius: 0;
}

.admin-layout #video-browser .video-row > .admin-row-actions {
  flex: none;
  margin-left: auto;
}

.admin-layout .video-playlist-count {
  display: block;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.admin-layout .video-playlist-count:empty {
  display: none;
}

@media (max-width: 600px) {
  .admin-layout #video-browser .video-row > .admin-row-actions {
    margin-left: 0;
  }

  .admin-layout #video-browser .video-row > .admin-row-actions .actions-menu-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

.admin-layout #video-browser .video-row:nth-of-type(even) {
  background: var(--color-surface-alt);
}

.admin-layout #video-browser .video-row:hover {
  background: var(--color-border);
}

.admin-layout #video-browser .video-thumb {
  width: 72px;
  height: 40px;
}

.admin-layout #video-browser .video-pager {
  margin-top: 12px;
}

/* Showcases: reset box as a card above the table */
.admin-layout .admin-card {
  margin-bottom: 16px;
  background: var(--color-surface);
}

.admin-layout .showcase-reset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.admin-layout .showcase-reset-grid .showcase-test {
  margin: 0;
  padding: 0;
  border: none;
}

/* Panels open full screen below the admin top bar (which stays usable): an opaque page with a sticky
   header (Back, title, the panel's Save / Cancel actions, Close) and content centred at up to 1100px.
   The member edit row and the video edit panel use the same full-screen frame. */
.admin-layout {
  --panel-gutter: max(20px, calc((100vw - 1100px) / 2));
}

body.drawer-open {
  overflow: hidden;
}

.admin-layout .admin-drawer,
.admin-layout .member-edit-row,
.admin-layout #video-browser .video-edit {
  position: fixed;
  inset: var(--admin-nav-height) 0 0 0; /* below the top bar, which stays visible */
  z-index: 70;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 var(--panel-gutter) 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: none;
  border-radius: 0;
  background: var(--color-bg);
  box-shadow: none;
}

.admin-layout .admin-drawer-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 calc(-1 * var(--panel-gutter)) 20px;
  padding: 12px var(--panel-gutter);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.admin-layout .admin-drawer-header > h3,
.admin-layout .admin-drawer-header > div:has(h3) {
  flex: 1 1 220px;
  min-width: 0;
}

/* "Send…" in a course's, module's or lesson's header ([send-to-member-everywhere]); none for a new one */
.admin-layout .admin-drawer-header > .drawer-header-share:empty {
  display: none;
}

.admin-layout .admin-drawer-header h3 {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  overflow-wrap: anywhere;
}

.admin-layout .admin-drawer-header h3:focus {
  outline: none;
}

.admin-layout .admin-drawer-header h3:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 4px;
  border-radius: 0;
}

.admin-layout .drawer-back {
  flex: none;
}

/* The panel's own actions (Cancel / Save ...) sit in the header */
.admin-layout .admin-drawer-actions,
.admin-layout .drawer-header-actions {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.admin-layout .drawer-header-actions .field-hint {
  align-self: center;
}

/* Two columns for the paired fields on wide screens, one on phones */
.admin-layout .admin-drawer .member-add-grid,
.admin-layout .member-edit-row .member-add-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Wide tables inside a panel use the full width and scroll inside their own box */
.admin-layout .admin-drawer .table-wrap {
  width: 100%;
  overflow-x: auto;
}

@media (max-width: 700px) {
  .admin-layout .admin-drawer,
  .admin-layout .member-edit-row,
  .admin-layout #video-browser .video-edit {
    padding-bottom: 96px; /* room for the action bar */
  }

  .admin-layout .admin-drawer .member-add-grid,
  .admin-layout .member-edit-row .member-add-grid {
    grid-template-columns: 1fr;
  }

  /* Phones: the actions become a bar at the bottom of the screen */
  .admin-layout .drawer-header-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    justify-content: flex-end;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }
}

.admin-layout .admin-drawer .admin-add-form {
  margin: 0;
}

/* The member edit row becomes a panel (it is a table row, so reset the table display) */
.admin-layout .member-edit-row,
.admin-layout .member-edit-row td {
  display: block;
}

.admin-layout .member-edit-row td,
.admin-layout .members-table tbody tr.member-edit-row:hover td,
.admin-layout .members-table tbody tr.member-edit-row:nth-child(even) td {
  padding: 0;
  background: transparent;
}

.admin-layout .member-edit-row td::before,
.admin-layout #video-browser .video-edit::before {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 16px;
}

.admin-layout .member-edit-row td::before {
  content: "Edit member";
}

.admin-layout #video-browser .video-edit::before {
  content: "Edit video";
}

/* Phones and small tablets: the same bar, a little tighter (below 520px the member site link is just an arrow) */
@media (max-width: 800px) {
  .site-bar {
    gap: 8px;
    height: 48px;
  }

  .site-brand {
    font-size: 16px;
  }

  .site-nav .tab {
    padding: 0 10px;
    font-size: 14px;
  }

  .admin-layout .admin-main {
    padding-bottom: 40px;
  }

  .admin-layout .admin-search {
    order: 3;
    width: 100%;
  }

  .admin-layout .showcase-reset-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  /* Tables turn into stacked cards on phones (see the members table rules); no inner scrolling */
  .admin-layout .table-wrap {
    max-height: none;
  }

  .admin-layout .members-table,
  .admin-layout .showcases-table {
    min-width: 0;
  }

  .admin-layout .members-table tbody tr:nth-child(even) td,
  .admin-layout .members-table tbody tr:hover td {
    background: transparent;
  }

  .admin-layout .members-table td.member-actions {
    width: auto;
    text-align: left;
  }

  .admin-layout .member-actions .admin-row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ======================================================================
   On-page notifications and dialogs (public/notify.js), on every page
   ====================================================================== */

.notify-stack {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: grid;
  gap: 8px;
  width: min(480px, calc(100vw - 32px));
  pointer-events: none;
}

.notify-toast {
  --notify-color: #2563eb;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--notify-color) 35%, transparent);
  border-left: 4px solid var(--notify-color);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  line-height: 20px;
  pointer-events: auto;
  animation: notify-in 0.18s ease-out;
}

.notify-toast.is-success { --notify-color: #0e7e4e; }
.notify-toast.is-error { --notify-color: #c53030; }
.notify-toast.is-warning { --notify-color: #b45309; }
.notify-toast.is-info { --notify-color: #2563eb; }

.notify-toast.is-leaving {
  opacity: 0;
  transition: opacity 0.18s ease-in;
}

.notify-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--notify-color);
}

.notify-icon svg {
  width: 20px;
  height: 20px;
}

.notify-text {
  flex: 1;
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* A toast's link ("Details") */
.notify-action {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.notify-close {
  flex: none;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.notify-close:hover,
.notify-close:focus-visible {
  background: var(--color-surface-alt);
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

@keyframes notify-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

body.notify-open {
  overflow: hidden;
}

.notify-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.notify-dialog {
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  animation: notify-in 0.15s ease-out;
}

.notify-dialog-title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 26px;
  overflow-wrap: anywhere;
}

.notify-dialog-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.notify-dialog-input {
  margin: 4px 0 12px;
}

.notify-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .notify-toast,
  .notify-dialog {
    animation: none;
  }

  .notify-toast.is-leaving {
    transition: none;
  }
}

/* Very narrow phones (360px): only an arrow for the member site link */
@media (max-width: 520px) {
  .site-bar-label {
    display: none;
  }

  .site-bar-link {
    padding: 6px;
    font-size: 16px;
  }

  .site-brand {
    font-size: 15px;
  }
}

/* Narrow screens: less side padding so the tabs still fit */
@media (max-width: 599px) {
  :root {
    --nav-pad-x: 16px;
  }
}

/* Lesson page, area 2: the button bar (Mark complete, Previous / Next) as its own panel: a subtle
   theme-aware fill, 1px border, rounded corners, 12px padding and 12px between the buttons */
.lesson-complete-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.lesson-complete-bar[hidden],
.lesson-complete-bar [hidden] {
  display: none;
}

/* "← Back to Modules" above the lesson title */
.btn.lesson-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  margin: 0 0 12px;
  white-space: normal;
  text-align: left;
}

.btn.lesson-back[hidden] {
  display: none;
}

.lesson-complete-bar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
}

/* "Mark complete" (.mark-complete-btn, lesson page and admin): YELLOW until completed, then GREEN.
   The same colours on the light and dark theme. Amber with near-black text (about 11:1). */
.mark-complete-btn:not(.is-complete),
.mark-complete-btn:not(.is-complete):hover:not(:disabled):not([aria-disabled="true"]),
.mark-complete-btn:not(.is-complete):active:not(:disabled) {
  background-color: #f5b301;
  color: #1f1600;
}

.mark-complete-btn:not(.is-complete):hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: #e0a300;
}

.mark-complete-btn:not(.is-complete):active:not(:disabled) {
  background-color: #c98f00;
}

/* Completed: a deeper shade of the progress green with white text (about 4.6:1) */
.lesson-complete-btn.is-complete,
.lesson-complete-btn.is-complete:hover:not(:disabled):not([aria-disabled="true"]),
.lesson-complete-btn.is-complete:active:not(:disabled) {
  background-color: #23824a;
  color: #ffffff;
}

.lesson-complete-btn.is-complete:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: #1d6e3f;
}

.lesson-complete-btn.is-complete:active:not(:disabled) {
  background-color: #185c35;
}

/* Phones: "Mark complete" on the first row, Previous / Next sharing the second (12px apart) */
@media (max-width: 600px) {
  .lesson-complete-bar .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    width: auto;
  }

  .lesson-complete-bar .mark-complete-btn {
    flex-basis: 100%;
  }
}

.lesson-check {
  color: var(--color-accent-text);
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lesson-check {
    color: var(--color-brand);
  }
}

:root[data-theme="dark"] .lesson-check {
  color: var(--color-brand);
}

/* ======================================================================
   Course progress bar (progress-bar.js): course page and library tiles
   ====================================================================== */

.course-progress-block {
  margin: 0 0 20px;
}

.course-progress-block[hidden] {
  display: none;
}

.course-progress-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.course-progress-done {
  align-self: center;
  display: inline-flex;
  color: var(--progress-done);
}

.course-progress-done[hidden] {
  display: none;
}

.course-progress-pct {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-lighter);
}

/* Always one row, 8px high: every slice gets an equal share of the width (never wraps) */
.pbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  height: 8px;
}

.pbar-slice {
  flex: 1 1 0;
  min-width: 0;
  height: 8px;
  border: none;
  border-radius: 0;
  background: var(--progress-open);
}

/* Many lessons (or slices too thin): one rounded bar, completed, then available, then locked */
.pbar.is-continuous {
  gap: 0;
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(to right,
    var(--progress-done) 0 var(--pbar-done, 0%),
    var(--progress-open) var(--pbar-done, 0%) var(--pbar-open, 0%),
    var(--progress-locked) var(--pbar-open, 0%) 100%);
}

.pbar.is-continuous.is-all-done {
  background: var(--progress-done);
}

.pbar.is-continuous > .pbar-slice {
  display: none;
}

.pbar-slice.is-done,
.pbar.is-all-done .pbar-slice {
  background: var(--progress-done);
}

/* Not released yet: paler with diagonal stripes */
.pbar-slice.is-locked {
  background: repeating-linear-gradient(135deg, var(--progress-locked) 0 3px, var(--progress-locked-stripe) 3px 6px);
}

.pbar-slice[tabindex] {
  cursor: pointer;
}

.pbar-slice:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.pbar-slice[tabindex]:hover {
  filter: brightness(0.92);
}

.pbar-tip {
  position: absolute;
  z-index: 1000;
  display: grid;
  gap: 2px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: 0;
  background: #0f172a;
  color: #f8fafc;
  font-size: 12.5px;
  line-height: 17px;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  overflow-wrap: anywhere;
}

.pbar-tip[hidden] {
  display: none;
}

/* Compact (library rows): the same one-row, 8px bar */
.pbar-compact .pbar-slice {
  height: 8px;
}

/* ----- One-line progress: [text] [bar filling the rest] [percent] (course page, library rows) ----- */
.progress-line,
.course-progress-head.progress-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.progress-line-text,
.progress-line-pct {
  flex: none;
  white-space: nowrap;
}

.progress-line-pct {
  min-width: 36px;
  text-align: right;
}

.course-progress-head .progress-line-pct {
  color: var(--color-text-muted);
}

.progress-line-bar {
  flex: 1 1 auto;
  min-width: 60px;
}

.progress-line .course-progress-done svg {
  display: block;
}

/* The bar: 8px, rounded ends, same colours */
.progress-line .pbar:not(.is-continuous) > .pbar-slice:first-child {
  border-radius: 0;
}

.progress-line .pbar:not(.is-continuous) > .pbar-slice:last-child {
  border-radius: 0;
}

.progress-line .pbar:not(.is-continuous) > .pbar-slice:only-child {
  border-radius: 0;
}

/* Slices that open a lesson (course page) keep a taller touch area around the thin line */
.progress-line .pbar:has(.pbar-slice[tabindex]):not(.is-continuous) {
  height: 20px;
}

.progress-line .pbar-slice[tabindex] {
  height: 20px;
  padding: 6px 0;
  background-clip: content-box;
}

.progress-short {
  display: none;
}

/* Phones: still one line, with "5/12" in place of "5 of 12 complete" */
@media (max-width: 480px) {
  .progress-line .progress-long {
    display: none;
  }

  .progress-line .progress-short {
    display: inline;
  }
}

/* Library playlists: the row looks like a course row, but only the name area is the link (the arrow
   moves into it), so the playlist's own password and its Copy button can sit beside it */
.library-playlist-row::after {
  content: none;
}

.library-playlist-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.library-playlist-link::after {
  content: "\2192";
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-text-lighter);
  transition: color 0.2s ease, transform 0.2s ease;
}

.library-playlist-link:hover::after,
.library-playlist-link:focus-visible::after {
  color: var(--color-brand);
  transform: translateX(2px);
}

.library-playlist-link:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 4px;
}

.library-playlist-password {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 50%;
  padding-left: 12px;
  border-left: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 450;
  color: var(--color-text-muted);
}

.library-playlist-password-value {
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--color-text);
  overflow-wrap: anywhere;
  user-select: all;
}

.library-playlist-copy.btn.btn-sm {
  flex: none;
  height: 26px;
  padding: 3px 10px;
}

@media (prefers-reduced-motion: reduce) {
  .library-playlist-link::after {
    transition: none;
  }
}

/* Playlists: "3 of 25 playlists viewed" and the filter (All / Bookmarked / Not viewed) */
.library-playlist-row {
  flex-wrap: wrap;
  row-gap: 8px;
}

.library-playlist-link {
  min-width: 180px;
}

.library-playlist-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.library-playlist-tools[hidden] {
  display: none;
}

.library-playlist-summary {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.library-playlist-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Pressed filter and "Bookmarked": an inset ring in the focus blue, so the chosen one stands out */
.library-playlist-filters .btn[aria-pressed="true"],
.library-playlist-bookmark.is-on,
.lesson-bookmark.is-on {
  box-shadow: inset 0 0 0 2px var(--btn-focus);
  font-weight: 600;
}

/* Viewed / Bookmark buttons, on the right of the row */
.library-playlist-actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.library-playlist-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.library-playlist-bookmark svg,
.lesson-bookmark svg {
  fill: none;
}

.library-playlist-bookmark.is-on svg,
.lesson-bookmark.is-on svg {
  fill: currentColor;
}

/* Viewed: the same green as the lesson page's "Completed" button (.lesson-complete-btn.is-complete) */
.library-playlist-viewed.is-complete:focus-visible {
  outline: 2px solid var(--progress-done);
}

/* Phones: the password and Copy go on their own line under the name */
@media (max-width: 640px) {
  .library-playlist-password {
    order: 2;
    flex: 1 1 100%;
    max-width: none;
    padding: 8px 0 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  .library-playlist-password-value {
    flex: 1;
  }

  .library-playlist-actions {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .library-playlist-actions .btn.btn-sm {
    flex: 1 1 auto;
  }

  .library-playlist-tools {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Library course rows: the lesson-row look from course.html (.course-item / .course-link), with a
   line of counts under the title and the compact bar with its percentage before the arrow */
.course-link:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.library-course-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.library-course-title {
  overflow-wrap: anywhere;
}

.library-course-meta {
  font-size: 12.5px;
  font-weight: 450;
  line-height: 18px;
  color: var(--color-text-lighter);
  min-width: 0;
  max-width: 100%;
}

/* Programs (supabase/programs.sql): one card per program, opening to its courses in order; a course
   that hasn't opened yet is greyed with "Opens in N days" and isn't a link */
.library-program {
  display: block;
  padding: 0;
}

.library-program-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.library-program-toggle:hover {
  background: var(--color-surface-alt);
}

.library-program-toggle:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.library-program-toggle::after {
  content: '▸';
  flex: 0 0 auto;
  color: var(--color-text-lighter);
  transition: transform 0.15s ease;
}

.library-program-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .library-program-toggle::after {
    transition: none;
  }
}

.library-program-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.library-program-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--color-text-lighter);
  white-space: nowrap;
}

.library-program-about {
  margin: -6px 16px 10px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.library-program-courses {
  margin: 0 0 8px;
  padding: 0 8px 0 16px;
}

.library-program-courses[hidden] {
  display: none;
}

.library-course-row.is-locked {
  opacity: 0.6;
  cursor: default;
}

.library-course-lock {
  flex: 0 0 auto;
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* A lesson's category label (lessons.category_label): small, under its title, everywhere */
.lesson-category-label {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-lighter);
  overflow-wrap: anywhere;
}

.lesson-category-label-page {
  margin: -4px 0 10px;
}

.lesson-category-label[hidden] {
  display: none;
}

/* Admin → Courses → Import course structure */
.admin-layout .course-import {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

.admin-layout .course-import[hidden] {
  display: none;
}

.admin-layout .course-import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-layout .course-import-head .admin-subtitle {
  margin: 0;
}

.admin-layout #course-import-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.admin-layout .course-import-headline {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .course-import-details summary {
  cursor: pointer;
  font-weight: 600;
}

.admin-layout .course-import-table th[scope="row"] {
  text-align: left;
}

/* Lesson page tabs and the course page's "opens in" note */
.course-opens-note {
  margin: 0 0 12px;
}

/* Admin: the Programs page and a member's programs */
.admin-layout .program-course-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.admin-layout .program-course-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .program-course-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .program-course-days {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-layout .program-course-note {
  grid-column: 2 / -1;
  font-size: 13px;
}

.admin-layout .program-course-actions {
  grid-column: 2 / -1;
}

.admin-layout .program-add-row {
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout .member-programs {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.admin-layout .member-programs[hidden] {
  display: none;
}

.admin-layout .member-program-list {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.admin-layout .member-program-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 0;
}

.admin-layout .member-program-name {
  font-weight: 600;
}

@media (max-width: 640px) {
  .admin-layout .program-course-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-layout .program-course-days {
    grid-column: 2 / -1;
  }
}

/* "7 modules · 42 lessons · 10 available · 4 completed": each count stays whole, so a narrow
   screen wraps the line before a "·" (the separator starts the next line) and nothing overflows */
.library-course-count {
  white-space: nowrap;
}

.library-course-progress {
  flex: 0 1 340px;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.library-course-percent {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 40px;
  justify-content: flex-end;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.library-course-percent.is-done {
  color: var(--progress-done);
}

.library-course-percent svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* Library course rows: "Watch" on the right in place of the arrow (it is part of the row's link) */
.library-course-row::after {
  content: none;
}

.library-watch.btn.btn-sm {
  order: 2;
  flex: none;
  width: auto;
  pointer-events: none; /* the click goes to the row's link, exactly like the old arrow */
}

.library-course-item:hover .library-watch.btn {
  background-color: var(--btn-bg-hover);
}

/* Phones: the counts, bar and percentage wrap under the title; the arrow (or Watch) stays on the first line */
@media (max-width: 640px) {
  .library-course-link {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .library-course-main {
    flex-basis: calc(100% - 32px);
  }

  .library-course-link::after {
    order: 1;
  }

  .library-course-progress {
    order: 2;
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Course rows: title and Watch on the first line, the counts under the title, the bar below */
  .library-course-row .library-course-main {
    flex: 1 1 0;
  }

  .library-watch.btn.btn-sm {
    order: 1;
  }
}

/* Profile page */
.profile-form {
  max-width: 480px;
}

.profile-field {
  margin: 0 0 20px;
  padding: 0;
  border: none;
  min-width: 0;
}

.profile-field .input-field {
  margin-bottom: 4px;
}

.profile-field legend {
  padding: 0;
}

.profile-hint {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-lighter);
}

/* A link inside a hint (e.g. the email address under Email): the site's link colours */
.profile-hint a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.profile-hint a:hover {
  color: var(--color-link-hover);
}

.profile-hint a:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 2px;
}

.profile-field .input-field[readonly] {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: default;
}

.profile-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}

/* Profile: Notifications (release emails) */
.profile-notify {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.profile-notify[hidden] {
  display: none;
}

.profile-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}

.profile-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--btn-focus);
  cursor: pointer;
}

.profile-check input:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.profile-radio input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--btn-focus);
  cursor: pointer;
}

.profile-radio input:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.profile-theme:disabled .profile-radio {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 640px) {
  .profile-form .btn-group .btn {
    width: 100%;
  }
}

/* "Picked for you" (picked.html, [picked-for-you]): a centred card at most 760px wide; the picks as cards,
   phone first, the site's own colours (light and dark through its variables) */
body.has-site-bar > .card.picked-card {
  max-width: 760px;
  margin: 20px auto 32px;
  padding: 24px 20px;
}

.picked-card h2 {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 32px;
}

.picked-intro,
.picked-status {
  margin: 0 0 16px;
  color: var(--color-text-muted);
}

.picked-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.picked-item {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
}

.picked-item.is-new {
  border-color: var(--color-primary);
  box-shadow: inset 4px 0 0 var(--color-primary);
}

.picked-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.picked-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
}

.picked-play svg {
  width: 20px;
  height: 20px;
}

.picked-text {
  min-width: 0;
}

.picked-kind {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 2px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.picked-new {
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.picked-title {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.picked-where {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.picked-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.picked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 14px;
}

.picked-when {
  color: var(--color-text-muted);
  font-size: 14px;
}

.picked-actions .picked-open {
  order: -1;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 48px;
  font-size: 16px;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: center;
}

.picked-no-access {
  order: -1;
  flex: 1 1 100%;
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
  color: var(--color-text-muted);
  text-align: center;
}

.picked-actions .picked-hide {
  width: auto;
  margin: 0 0 0 auto;
  padding: 4px 0;
  text-decoration: underline;
}

/* The Profile page's own layout (profile.html .profile-card): a centred card at most 880px wide;
   inside it two columns (First | Last name, Timezone | Email, Notifications | Theme), Save under
   them; one column under 900px. Compact spacing: 13px labels 4px above 40px fields, hints 4px under
   them, 16px between rows. */
body.has-site-bar > .card.profile-card {
  max-width: 880px;
  margin: 20px auto 32px;
  padding: 24px 28px;
}

.profile-card h2 {
  font-size: 26px;
  line-height: 32px;
  margin-bottom: 16px;
}

.profile-card .profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  align-items: start;
  max-width: none;
}

.profile-card .profile-field {
  margin: 0;
}

.profile-card .profile-field .field-label,
.profile-card .profile-field legend.field-label {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 18px;
}

.profile-card .profile-field .input-field {
  height: 40px;
  margin-bottom: 0;
}

.profile-card .profile-hint {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 17px;
}

/* The timezone picker fills its column */
.profile-card .tzp {
  display: block;
  width: 100%;
}

.profile-card .tzp-button {
  width: 100%;
  height: 40px;
}

/* Notifications: the checkbox line, its hint under it */
.profile-card .profile-check {
  min-height: 40px;
}

.profile-card .profile-check + .profile-hint {
  margin-top: 0;
}

/* Theme: Light / Dark / Use my device setting in one row (wrapping when narrow) */
.profile-card .profile-theme {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.profile-card .profile-theme > legend {
  float: left;
  width: 100%;
}

.profile-card .profile-radio {
  min-height: 40px;
  gap: 8px;
}

.profile-card .profile-form .btn-group {
  grid-column: 1 / -1;
  justify-content: flex-start;
  margin: 0;
}

@media (max-width: 899px) {
  .profile-card .profile-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body.has-site-bar > .card.profile-card {
    padding: 20px 16px;
  }

  /* Tap targets: at least 44px */
  .profile-card .profile-field .input-field,
  .profile-card .tzp-button,
  .profile-card .profile-check,
  .profile-card .profile-radio {
    min-height: 44px;
  }

  .profile-card .profile-field .input-field,
  .profile-card .tzp-button {
    height: 44px;
  }
}

.library-progress-bar {
  flex: 1;
  min-width: 0;
}

.library-progress-count {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-lighter);
}

/* Course page: report line, and locked lessons (not links, no hover, not focusable) */
.course-report {
  margin: -8px 0 16px;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-muted);
}

.course-report[hidden] {
  display: none;
}

/* The course name in bold; each number in bold with a plain underline (same colour as the text,
   not a link and not clickable) */
.course-report-name,
.course-report-key {
  font-weight: 700;
  color: inherit;
}

.course-report-key {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}

.course-item.is-locked,
.course-item.is-locked:hover {
  border-color: var(--color-border);
  opacity: 0.6;
  cursor: default;
}

.course-locked {
  justify-content: flex-start;
  color: var(--color-text-muted);
  cursor: default;
}

.course-locked::after {
  content: none;
}

.course-locked svg {
  flex: none;
}

.course-locked-title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.course-locked-when {
  flex: none;
  font-size: 12.5px;
  font-weight: 450;
  color: var(--color-text-lighter);
}

/* A locked row is a button that explains why (lock-messages.js): the same look as before */
button.course-locked {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.course-locked:hover .course-locked-title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

button.course-locked:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* A module waiting for its date: the header and a small "Why?" beside it */
.course-module-heading.has-why {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.course-module-heading.has-why .course-module-toggle {
  flex: 1 1 auto;
  min-width: 0;
}

.btn.course-module-why {
  flex: none;
  width: auto;
  align-self: center;
}

/* "Why are some lessons locked?": a calm info box near the top of the module list */
.lock-explainer {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.lock-explainer[hidden] {
  display: none;
}

.lock-explainer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.lock-explainer-icon {
  display: inline-flex;
  color: var(--color-text-muted);
}

.lock-explainer-title {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
}

.lock-explainer-text,
.lock-explainer-next {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-muted);
}

.lock-explainer-next a {
  font-weight: 600;
}

.lock-explainer-list {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text);
}

/* The "why it's locked" dialog (course page) */
.lock-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.lock-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.lock-dialog-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.lock-dialog-icon {
  display: inline-flex;
  color: var(--color-text-muted);
}

.lock-dialog-title {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  overflow-wrap: anywhere;
}

.lock-dialog-text {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.lock-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.lock-dialog-actions .btn {
  width: auto;
}

@media (max-width: 640px) {
  .lock-dialog-actions .btn {
    flex: 1 1 100%;
  }
}

/* Course page rows: a fixed-width slot on the left (check, lock or empty) so every title lines up;
   the right side has only the arrow (open rows) or the unlock message (locked rows) */
.lesson-row-slot {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-height: 18px;
}

.course-link .course-row-title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A lesson's video length (release.js lengthBadge): small clock and "12:34" at the right of the row.
   It never shrinks or wraps itself, so on phones the title keeps the rest of the width. */
.video-length {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 12.5px;
  font-weight: 450;
  line-height: 18px;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.video-length svg {
  flex: none;
}

/* Lesson page: under the title */
.lesson-length {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.lesson-length[hidden] {
  display: none;
}

.lesson-length .video-length {
  font-size: 13px;
}

.lesson-length-each {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .course-locked {
    flex-wrap: wrap;
  }

  /* Under the title: indented past the slot (18px) and the row gap (12px) */
  .course-locked-when {
    flex-basis: 100%;
    padding-left: 30px;
  }
}

/* ======================================================================
   Member pages with the top bar (index when signed in, course, lesson)
   ====================================================================== */

/* The old narrow-card layout centred everything (the body is a flex box with justify-content:
   center and min-height: 100vh), which pushed the bar down to the middle of short pages. These
   pages are a plain column instead: the bar at the very top, the band under it, then the content. */
body.has-site-bar {
  display: block;
  margin: 0;
  padding: 0;
}

body.has-site-bar > .site-bar,
body.has-site-bar > .breadcrumb-bar {
  width: 100%;
  margin: 0;
}

body > .site-bar[hidden] {
  display: none;
}

/* The band's content lines up with the bar's */
body.has-site-bar .breadcrumb-bar-inner {
  max-width: none;
  padding: 0 var(--nav-pad-x);
}

/* A wider content box: up to 1400px, centred */
body.has-site-bar > .card {
  width: calc(100% - 2 * var(--nav-pad-x));
  max-width: 1400px;
  margin: 24px auto 48px;
}

/* The lesson video keeps 16:9 and a sensible width, centred */
body.has-site-bar .video-container {
  max-width: 1100px;
  height: auto;
  padding-bottom: 0;
  margin: 0 auto 20px;
  aspect-ratio: 16 / 9;
}

/* Library: tiles as a responsive grid (3 / 2 / 1 columns) */
body.has-site-bar .library-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Two tiles (Playlists hidden from members): two columns, no empty third one */
body.has-site-bar .library-tiles.library-tiles-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.library-tile[hidden] {
  display: none;
}

@media (max-width: 640px) {
  body.has-site-bar .library-tiles.library-tiles-two {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1024px) {
  body.has-site-bar .library-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.has-site-bar .library-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The brand keeps the bar on one line on phones */
.site-brand {
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.site-brand:hover {
  color: var(--nav-text-hover);
}

a.site-brand:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  body.has-site-bar .site-brand {
    max-width: 38vw;
    font-size: 14px;
  }
}

/* ======================================================================
   Legal footer (public pages), Privacy / Terms pages, SMS consent checkbox
   ====================================================================== */

/* Most pages centre one card in a flex row; the footer takes its own full-width line under it */
body:has(> .site-footer) {
  flex-wrap: wrap;
  align-content: flex-start;
}

.site-footer {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  padding: 20px 16px 28px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-lighter);
  text-align: center;
  overflow-wrap: anywhere;
}

.site-footer p {
  margin: 6px 0 0;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}

.site-footer a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer a:hover {
  color: var(--color-text);
}

.site-footer a:focus-visible,
.legal-page a:focus-visible,
.sms-consent-field a:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

/* Privacy Policy and Terms of Service: plain readable text */
.legal-page {
  margin-top: 40px;
  margin-bottom: 40px;
  line-height: 26px;
}

.legal-page h1 {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 36px;
}

.legal-page h2 {
  margin: 28px 0 8px;
  font-size: 18px;
  line-height: 26px;
}

.legal-page p,
.legal-page ul {
  margin: 0 0 12px;
  color: var(--color-text);
}

.legal-page ul {
  padding-left: 22px;
}

.legal-page li + li {
  margin-top: 6px;
}

.legal-page a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.legal-updated {
  font-size: 14px;
  color: var(--color-text-lighter) !important;
}

.legal-back {
  margin: 0 0 16px !important;
  font-size: 14px;
}

.legal-sms {
  margin-top: 24px;
  padding: 4px 20px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .legal-page a {
    color: var(--color-brand);
  }
}

:root[data-theme="dark"] .legal-page a {
  color: var(--color-brand);
}

@media (max-width: 520px) {
  .legal-page {
    margin-top: 16px;
    padding: 20px 16px;
  }

  .legal-page h1 {
    font-size: 24px;
    line-height: 32px;
  }

  .legal-sms {
    padding: 2px 14px 6px;
  }
}

/* SMS consent on the checkout form: long text, so the box sits at its first line */
.sms-consent-field {
  align-items: flex-start;
  font-size: 13px;
  font-weight: 450;
  line-height: 19px;
  color: var(--color-text-muted);
}

.sms-consent-field input {
  flex: none;
  margin-top: 2px;
}

.sms-consent-field a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* SMS opt-in page: the sign-up form under the explanation */
.sms-optin-form {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.sms-optin-form h2 {
  margin-top: 0;
}

.sms-optin-form .input-field {
  max-width: 360px;
}

.sms-optin-form .btn {
  width: auto;
}

.sms-optin-form .form-message:empty {
  display: none;
}

@media (max-width: 520px) {
  .sms-optin-form {
    padding: 16px 12px;
  }

  .sms-optin-form .input-field,
  .sms-optin-form .btn {
    max-width: none;
    width: 100%;
  }
}

/* Icons left of a label (icons.js withIcon / data-btn-icon): one set, 16px, currentColor */
.has-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.has-icon > .btn-icon-svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Text links with an icon (Back to Library) keep their place in the line */
a.has-icon:not(.btn):not(.tab) {
  justify-content: flex-start;
}

/* Course page: Start / Review on the right of the title and summary; full width under them on phones */
.course-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}

.course-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.course-start.btn {
  flex: none;
  width: auto;
  margin-top: 4px;
}

.course-start[hidden] {
  display: none;
}

.course-start[aria-disabled="true"] {
  pointer-events: none;
}

@media (max-width: 640px) {
  .course-head {
    flex-direction: column;
    align-items: stretch;
  }

  .course-start.btn {
    width: 100%;
    margin: 0 0 16px;
  }
}

/* Account menu rows with an icon keep their full-width, left-aligned look */
.account-item.has-icon {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.account-toggle.has-icon .account-chevron {
  flex: none;
}

/* Centered text links with an icon (Back to Sign In): the icon sits on the text line */
.btn-link.has-icon > .btn-icon-svg {
  margin-right: 6px;
  vertical-align: -3px;
}

/* Admin, Email member: When (Send now / Schedule) with date, time and timezone */
.admin-layout .email-when,
.admin-layout .email-tz {
  margin: 12px 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.admin-layout .email-when legend,
.admin-layout .email-tz legend {
  padding: 0;
}

.admin-layout .email-schedule {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .email-schedule[hidden] {
  display: none;
}

.admin-layout .email-schedule-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: 12px;
}

.admin-layout .email-schedule-row .input-field {
  margin-bottom: 0;
}

.admin-layout .email-tz strong {
  overflow-wrap: anywhere;
}

.admin-layout .email-schedule-summary {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

.admin-layout .email-scheduled {
  margin-top: 24px;
}

/* The schedule summary: one line per timezone group */
.admin-layout .email-schedule-line {
  display: block;
}

.admin-layout .email-schedule-line + .email-schedule-line {
  margin-top: 2px;
}

/* Scheduled list: the mode under the time, and each recipient's own time when "Times" is open */
.admin-layout .scheduled-mode {
  display: block;
  font-size: 12.5px;
}

.admin-layout .scheduled-detail td {
  padding-top: 0;
  background: var(--color-surface-alt);
}

.admin-layout .scheduled-times {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.admin-layout .scheduled-times li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 14px;
}

.admin-layout .scheduled-who {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .scheduled-when {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* "My timezone: Europe/Belgrade · Change" (Members → Scheduled, Automations) */
.admin-layout .my-tz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .my-tz:empty {
  display: none;
}

/* ---------- Time zone picker (timezones.js): a button and a grouped, coloured list ---------- */
.tzp {
  position: relative;
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.tzp[hidden] {
  display: none;
}

.tzp-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: auto;
  min-width: 220px;
  max-width: 100%;
  min-height: 38px;
  text-align: left;
  cursor: pointer;
}

.tzp-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tzp-button-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tzp-chevron {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.tzp-popup {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  width: max(100%, 340px);
  max-width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.tzp-popup[hidden] {
  display: none;
}

.tzp-list {
  max-height: min(360px, 60vh);
  overflow-y: auto;
  padding: 4px 0;
  outline: none;
}

.tzp-list:focus-visible {
  box-shadow: inset 0 0 0 2px var(--btn-focus);
}

.tzp-heading {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text);
}

.tzp-option {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-text);
  cursor: pointer;
}

.tzp-option.is-selected {
  font-weight: 700;
}

.tzp-option.is-active {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

.tzp-group-us { background: var(--tz-us-bg); }
.tzp-group-us .tzp-heading { background: var(--tz-us-head); }
.tzp-group-eu { background: var(--tz-eu-bg); }
.tzp-group-eu .tzp-heading { background: var(--tz-eu-head); }
.tzp-group-other { background: var(--tz-other-bg); }
.tzp-group-other .tzp-heading { background: var(--tz-other-head); color: var(--color-text-muted); }

.tzp-other-row {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.tzp-all-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
}

.tzp-search {
  flex: 1;
  min-width: 0;
}

.tzp-empty {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-text-muted);
}

@media (pointer: coarse) {
  .tzp-option {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 520px) {
  .tzp,
  .tzp-button {
    width: 100%;
    min-width: 0;
  }

  .tzp-popup {
    width: 100%;
    max-width: calc(100vw - 32px);
  }
}

.admin-layout .my-tz .tz-select {
  width: auto;
  max-width: 100%;
  margin: 0;
}

.admin-layout .my-tz-link {
  font-size: 13px;
}

/* Step form: "When" (right away or at a set time of day) */
.admin-layout .timing-field {
  margin: 14px 0 4px;
  padding: 0;
  border: none;
  min-width: 0;
}

.admin-layout .timing-field legend {
  padding: 0;
}

.admin-layout .timing-details {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .timing-details[hidden] {
  display: none;
}

.admin-layout .timing-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.admin-layout .timing-row .field-label {
  margin: 0;
}

.admin-layout .timing-row .input-field {
  width: auto;
  max-width: 100%;
  margin: 0;
}

.admin-layout .timing-row .tz-select {
  flex: 1 1 200px;
  min-width: 0;
}

.admin-layout .timing-day {
  gap: 4px;
  margin: 0;
}

.admin-layout .timing-preview {
  margin: 0;
}

/* "Wait 2 days" / "Wait 1 day, then until 4:00 PM Eastern Time" under the controls */
.admin-layout .timing-summary {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .timing-summary:empty {
  display: none;
}

.admin-layout .wait-fixed {
  margin: 4px 0 8px;
}

/* Member overview: timezone with Change */
.admin-layout .mv-timezone {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.admin-layout .mv-timezone .tz-select {
  width: auto;
  max-width: 100%;
  margin: 0;
}

@media (max-width: 520px) {
  .admin-layout .email-schedule-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-layout .my-tz .tz-select,
  .admin-layout .timing-row .tz-select,
  .admin-layout .mv-timezone .tz-select {
    width: 100%;
  }
}

/* Admin Courses: "7 modules · 42 lessons (3 unpublished)" under the course title */
.admin-row-title .course-counts-line {
  overflow-wrap: anywhere;
}

.admin-row-title .course-counts-note {
  font-size: 11px;
  color: var(--color-text-lighter);
}

/* Days (optional layer inside a module/week) */
.admin-layout .cs-days {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--color-border-strong);
}

.admin-layout .cs-day {
  padding: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  outline: 2px dashed transparent;
  outline-offset: 2px;
}

.admin-layout .cs-day.is-drop-target {
  outline-color: var(--btn-focus);
}

.admin-layout .cs-day-name {
  font-size: 14px;
}

.admin-layout .cs-day-actions {
  justify-content: flex-start;
  margin: -4px 0 10px;
}

.admin-layout .cs-list-label {
  margin: 0 0 6px;
}

.admin-layout .choice-dialog-actions {
  flex-wrap: wrap;
}

.admin-layout .course-label-field {
  gap: 6px;
}

.admin-layout .course-label-select {
  width: auto;
  height: 30px;
  margin: 0;
  padding: 4px 8px;
}

/* Course page: a day inside a module/week */
.course-days {
  display: grid;
  gap: 8px;
  padding-left: 12px;
}

.course-day .course-module-toggle {
  padding: 8px 12px;
  background: var(--color-surface-alt);
}

.course-day .course-module-name {
  font-size: 14px;
}

@media (max-width: 640px) {
  .admin-layout .cs-days {
    padding-left: 8px;
  }

  .course-days {
    padding-left: 0;
  }
}

/* A panel opened over another one (it has its own "Back to ..."): always on top */
.admin-layout .admin-drawer[data-back-to] {
  z-index: 71;
}

/* An element with an icon that is hidden stays hidden (.has-icon sets display: inline-flex) */
.has-icon[hidden] {
  display: none !important;
}

/* Admin buttons with an icon keep their own width rules; the icon never squeezes the label */
.admin-layout .btn.has-icon {
  white-space: nowrap;
}

/* "Modules and lessons": the Ungrouped lessons area (lessons directly under the course) */
.admin-layout .cs-ungrouped {
  border-style: dashed;
}

/* The lesson form's own message, next to its Save button (in the panel header) */
.admin-layout .lesson-form-message {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
}

.admin-layout .lesson-form-message:empty {
  display: none;
}

/* Library display: the read-only Structure line (all layers, as members see them) */
.admin-layout .library-display-structure {
  margin: -4px 0 10px;
  overflow-wrap: anywhere;
}

/* ----- Lesson bookmarks (lesson-bookmarks.js): the playlist Bookmark look ----- */
.lesson-bookmark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Lesson page: the button beside the title; 12px under the title (the warning's own 24px takes over
   when it shows) */
.lesson-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lesson-title-row #lesson-title {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

/* The back button's short label ("Modules" / "Course") only on narrow phones */
.lesson-back-short {
  display: none;
}

/* Tablet and desktop: the title keeps at least 60% of the card beside the Bookmark button */
@media (min-width: 601px) {
  .lesson-title-row #lesson-title {
    flex: 1 1 60%;
    min-width: 60%;
  }

  .lesson-title-row .lesson-title-actions {
    flex: 0 1 auto;
  }
}

/* Phones: one left-aligned column, 16px at both sides; Back and Bookmark side by side (the same
   40px height, half the row each when both are there), the title full width under them, then the
   length, the note and Mark complete */
@media (max-width: 600px) {
  body.lesson-page.has-site-bar > .card {
    width: 100%;
    max-width: none;
    margin: 0 0 32px;
    padding: 16px;
  }

  .lesson-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
  }

  .lesson-head .lesson-title-row {
    display: contents;
  }

  .lesson-head .btn.lesson-back {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    width: 100%;
    height: 40px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
  }

  .lesson-head .btn.lesson-back > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lesson-head .lesson-title-actions {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .lesson-head .lesson-title-actions .btn {
    width: 100%;
    height: 40px;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
  }

  /* No Bookmark (still loading, locked): Back alone, its natural width */
  .lesson-head:has(.lesson-title-actions:empty) .btn.lesson-back {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
  }

  /* Back hidden (not loaded yet): Bookmark alone at the left */
  .lesson-head:has(.btn.lesson-back[hidden]) .lesson-title-actions {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .lesson-head #lesson-title {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 4px 0 0;
    font-size: 25px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-align: left;
  }

  .lesson-head .lesson-length {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: -4px 0 0;
  }

  /* The top bar: "‹ Course" (or the module) only, never the cut-off lesson title */
  body.lesson-page .breadcrumb li[aria-current] {
    display: none;
  }

  body.lesson-page .breadcrumb-back {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Very narrow phones: the short labels ("Modules" / "Course"), icons kept */
@media (max-width: 400px) {
  .lesson-head .lesson-back-long {
    display: none;
  }

  .lesson-head .lesson-back-short {
    display: inline;
  }
}

/* The status line under the button bar only takes space when it says something */
.lesson-complete-message:empty {
  display: none;
}

/* Lesson page, area 3: videos then the description, 32px below the button bar, with a subtle
   full-width divider on top; 24px between the videos and the text (each video already has 10px
   under it) */
.lesson-content {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.lesson-content .lesson-body {
  margin-top: 14px;
}

.lesson-content #lesson-video:empty + .lesson-resources[hidden] + .lesson-body {
  margin-top: 0;
}

/* Resources: a row of link buttons under the videos (wraps on phones, 10px apart), 24px above the
   description */
/* The row lines up with the video: the same centred box (max 1100px on the member pages, see
   body.has-site-bar .video-container), so the first button starts exactly where the video starts.
   24px between the video and the row (the last video keeps its own 10px; 14px more here). */
.lesson-resources {
  display: flex;
  flex-direction: column; /* one button per row, stacked, the full width of the video */
  gap: 12px;
  width: 100%;
  margin-top: 14px;
}

body.has-site-bar .lesson-resources {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.lesson-resources[hidden] {
  display: none;
}

.lesson-content #lesson-video:empty + .lesson-resources {
  margin-top: 0;
}

.lesson-resources:not([hidden]) + .lesson-body {
  margin-top: 24px;
}

/* The same button as Previous / Next (.btn.btn-secondary: height, padding, font, corners, colours,
   hover and focus come from .btn), full width, icon and text centred like theirs */
.lesson-resources .lesson-resource-btn.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* A long button text is cut with "…" rather than widening the page */
.lesson-resources .lesson-resource-btn > span:not(.visually-hidden) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Admin lesson form: resource rows (type + text, link, ↑ ↓ ×) */
.admin-layout .lesson-resources-field {
  margin: 8px 0 16px;
  padding: 0;
  border: none;
}

.admin-layout .lesson-resource-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-layout .lesson-resource-row {
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .lesson-resource-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.admin-layout .lesson-resource-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.admin-layout .lesson-resource-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .lesson-resource-line .lesson-resource-type {
  flex: 0 0 150px;
}

.admin-layout .lesson-resource-line .lesson-resource-label {
  flex: 1 1 180px;
  min-width: 0;
}

.admin-layout .lesson-resource-row .input-field {
  margin-bottom: 6px;
}

@media (max-width: 520px) {
  .admin-layout .lesson-resource-line .lesson-resource-type {
    flex-basis: 100%;
  }
}

/* Plain-text descriptions: lines starting with "* " or "- " shown as a list (rich-text.js) */
.rich-text-plain-block {
  white-space: pre-line;
  margin-bottom: 16px;
}

/* Lesson page: a worksheet address in a plain-text description, shown as a button-style link */
.rich-text a.rich-text-worksheet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 4px 0;
  padding: 7px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.rich-text a.rich-text-worksheet:hover {
  background: var(--color-surface-alt);
}

.rich-text a.rich-text-worksheet:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.rich-text a.rich-text-worksheet svg {
  flex-shrink: 0;
}

.rich-text-plain-block:last-child,
.rich-text-list:last-child {
  margin-bottom: 0;
}

.rich-text .rich-text-list {
  margin: 0 0 16px;
  padding-left: 24px;
  list-style: disc;
}

.lesson-title-actions:empty {
  display: none;
}

/* Library Bookmarks: lessons grouped by course */
.library-bookmark-group + .library-bookmark-group {
  margin-top: 20px;
}

/* A bookmark row: the lesson's link (title, module, length, Watch), then Remove in the same box, the
   same size as Watch. Phones: Remove goes under the link when it doesn't fit. */
.library-bookmark-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 0;
}

.library-bookmark-item > .library-bookmark-row {
  flex: 1 1 auto;
  min-width: 0;
}

.library-bookmark-item > .bookmark-remove-btn.btn.btn-sm {
  flex: none;
  width: auto;
  margin-right: 16px;
  border-radius: 0;
}

@media (max-width: 640px) {
  .library-bookmark-item {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .library-bookmark-item > .library-bookmark-row {
    flex-basis: 100%;
  }

  .library-bookmark-item > .bookmark-remove-btn.btn.btn-sm {
    margin: 0 16px 12px auto;
  }
}

/* "Removed from your bookmarks. Undo": a short bar at the bottom of the page */
.bookmark-undo-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px;
  transform: translateX(-50%);
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.bookmark-undo-bar[hidden] {
  display: none;
}

.bookmark-undo-bar .btn {
  flex: none;
  width: auto;
  border-radius: 0;
}

.library-bookmark-course {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

/* ----- Lesson descriptions (rich-text.js): light rich text, the site's colours ----- */
.rich-text-plain {
  white-space: pre-line; /* older plain-text descriptions keep their line breaks */
}

.rich-text p {
  margin: 0 0 16px;
}

.rich-text p:last-child,
.rich-text ul:last-child,
.rich-text ol:last-child {
  margin-bottom: 0;
}

.rich-text ul,
.rich-text ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.rich-text ul {
  list-style: disc;
}

.rich-text ol {
  list-style: decimal;
}

.rich-text li {
  margin-bottom: 4px;
}

.rich-text li > ul,
.rich-text li > ol {
  margin: 4px 0 0;
}

.rich-text strong,
.rich-text b {
  font-weight: 600;
  color: var(--color-text);
}

.rich-text u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rich-text a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

/* Admin editor: the form's input look with a toolbar on top */
.rich-editor {
  margin-bottom: 16px;
}

.rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-surface);
}

.rich-editor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.rich-editor-btn:hover {
  color: var(--color-text);
  border-color: var(--color-border);
}

.rich-editor-btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

.rich-editor-btn.is-active {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  box-shadow: inset 0 0 0 1px var(--btn-focus);
}

.rich-editor .rich-editor-box {
  display: block;
  height: auto;
  min-height: 180px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  line-height: 1.5;
  white-space: normal;
  cursor: text;
}

.rich-editor .rich-editor-box:focus {
  outline: none;
  border-color: var(--btn-focus);
}

@media (max-width: 520px) {
  .rich-editor-btn {
    width: 40px;
    height: 40px;
  }

  .rich-editor .rich-editor-box {
    min-height: 140px;
  }
}

/* Page Builder format toolbar (Text and Headline): one compact row of groups split by thin lines,
   sticky under the element's tabs; it wraps rather than hide a button on a narrow screen */
.rich-editor-toolbar.is-format {
  position: sticky;
  top: calc(var(--admin-nav-height, 56px) + var(--pb-top-h, 100px) + 38px);
  z-index: 15;
  align-items: center;
  gap: 4px 0;
}

.rich-editor-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  border-left: 1px solid var(--color-border);
}

.rich-editor-group:first-child {
  padding-left: 0;
  border-left: none;
}

.rich-editor-toolbar.is-format .rich-editor-btn {
  width: 32px;
  height: 32px;
}

/* The chosen alignment: a filled dark button */
.rich-editor-btn.rich-editor-align.is-active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
  box-shadow: none;
}

.rich-editor-color {
  position: relative;
}

.rich-editor-color-btn {
  position: relative;
}

/* The colour bar under the "A" (and the highlight square): the colour used last */
.rich-editor-color-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 3px;
  height: 3px;
  border-radius: 0;
  background: currentColor;
}

.rich-editor-color-btn.is-highlight .rich-editor-color-bar {
  background: transparent;
}

.rich-editor-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 224px;
  padding: 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.rich-editor-pop[hidden] {
  display: none;
}

.rich-editor-pop-none {
  align-self: flex-start;
  padding: 4px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.rich-editor-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rich-editor-swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  cursor: pointer;
}

.rich-editor-swatch:focus-visible,
.rich-editor-pop-none:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.rich-editor-pop-hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

.rich-editor-pop-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.rich-editor-pop-custom input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-input-bg);
}

/* A headline: one line of text (it grows when a line break is added) */
.rich-editor .rich-editor-box.is-inline {
  min-height: 44px;
  max-height: 30vh;
  font-size: 17px;
  font-weight: 600;
}

/* Lesson page: the "Mark complete" reminder under the title (only while not completed). Plain text:
   no border, box or background; the normal text colour, a little smaller, small gaps. */
/* Lesson page, area 1: the warning (24px above and below; gone with no gap once completed) */
.lesson-complete-notice {
  margin: 24px 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: break-word;
}

.lesson-complete-notice[hidden] {
  display: none;
}

.lesson-complete-notice strong {
  font-weight: 700;
}

/* ======================================================================
   Page Builder pages (page-blocks.js): the public page and the admin preview use the same rules.
   Widths: each element is --pb-w wide (minus its side margins); narrower ones sit side by side when
   they fit. Below 640px of content width every element is full width (a container query, so the
   admin's mobile preview behaves like a phone too).
   ====================================================================== */
.pb-page {
  width: 100%;
  color: var(--color-text);
  container-type: inline-size; /* sections read the page width (phone layout under 640px) */
  overflow-x: clip; /* nothing on the page can make it wider than the screen */
}

/* A page with its own background (Page settings → background; page-blocks.js) is its own colour
   scope: the site's text, link, border and button tokens are set again on the page itself for THAT
   background, so a light page stays readable on a dark-mode device (and a dark page on a light one).
   Pages without their own background follow the site's light / dark theme as before. */
.pb-page.pb-scheme-light {
  color-scheme: light;
  --color-bg: #FDFDFD;
  --color-surface: #FFFFFF;
  --color-surface-alt: rgba(3, 3, 3, 0.027);
  --color-text: #030303;
  --color-text-muted: #464646;
  --color-text-lighter: #696969;
  --color-border: rgba(3, 3, 3, 0.081);
  --color-border-strong: rgba(3, 3, 3, 0.146);
  --color-input-bg: rgba(0, 0, 0, 0.015);
  --color-link: #0E7E4E;
  --color-link-hover: #0B6B42;
  --color-link-visited: #0A6440;
  --color-link-focus: #0E7E4E;
  --color-accent-text: #0E7E4E;
  --color-danger-text: #C4391C;
  --color-warning-text: #B45309;
  --btn-bg: #eaf3fd;
  --btn-bg-hover: #dcecfc;
  --btn-bg-active: #cfe4fa;
  --btn-text: #0f3a63;
  --btn-focus: #2f7fd1;
  --btn-disabled-bg: #f4f8fd;
  --btn-disabled-text: #7d93ab;
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
}

.pb-page.pb-scheme-dark {
  color-scheme: dark;
  --color-bg: #131413;
  --color-surface: #181A19;
  --color-surface-alt: rgba(237, 239, 238, 0.033);
  --color-text: #EDEFEE;
  --color-text-muted: #BCBDBC;
  --color-text-lighter: #989A99;
  --color-border: rgba(237, 239, 238, 0.075);
  --color-border-strong: rgba(237, 239, 238, 0.135);
  --color-input-bg: rgba(237, 239, 238, 0.049);
  --color-link: #3ECF8E;
  --color-link-hover: #74DDAD;
  --color-link-visited: #5CC79A;
  --color-link-focus: #74DDAD;
  --color-accent-text: #3ECF8E;
  --color-danger-text: #FF8A70;
  --color-warning-text: #F5B65A;
  --btn-bg: #1b2b3c;
  --btn-bg-hover: #223750;
  --btn-bg-active: #294461;
  --btn-text: #d8e9fb;
  --btn-focus: #7db8f2;
  --btn-disabled-bg: #172230;
  --btn-disabled-text: #7c90a6;
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}

/* Bold and italic on a page take the colour of their own element (its colour, else the page's),
   never a site-wide text colour of their own */
.pb-page .rich-text strong,
.pb-page .rich-text b,
.pb-page .rich-text em,
.pb-page .rich-text i {
  color: inherit;
}

.pb-content {
  container-type: inline-size;
  width: 100%;
  margin: 0 auto;
  padding: 24px 16px;
}

.pb-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.pb-block {
  flex: 0 0 auto;
  width: calc(var(--pb-w, 100%) - var(--pb-mx, 0px));
  min-width: 0;
  overflow-wrap: break-word;
}

@container (max-width: 639px) {
  .pb-block {
    width: calc(100% - var(--pb-mx, 0px));
  }
}

.pb-block .pb-headline {
  margin: 0;
  line-height: 1.2;
  color: inherit;
}

.pb-block .pb-text {
  line-height: 1.6;
  color: inherit;
}

.pb-block .pb-text a,
.pb-block .pb-link-text,
.pb-block .pb-list-inline-link {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pb-block .pb-list-inline-link:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

/* The page's own link colour (Page settings → Link colour): every link in text, list items and
   link-styled text, with the underline on hover / focus in the same colour. A colour set on the
   element itself (inline) or on text inside the link still wins. */
.pb-page.has-link-color .pb-text a,
.pb-page.has-link-color .pb-headline a,
.pb-page.has-link-color .pb-link-text,
.pb-page.has-link-color .pb-list-link,
.pb-page.has-link-color .pb-list-inline-link {
  color: var(--pb-link-shown, var(--pb-link-color));
  text-decoration: underline;
  text-decoration-color: var(--pb-link-shown, var(--pb-link-color));
  text-underline-offset: 2px;
}

.pb-page.has-link-color .pb-text a:hover,
.pb-page.has-link-color .pb-text a:focus-visible,
.pb-page.has-link-color .pb-headline a:hover,
.pb-page.has-link-color .pb-link-text:hover,
.pb-page.has-link-color .pb-link-text:focus-visible,
.pb-page.has-link-color .pb-list-link:hover,
.pb-page.has-link-color .pb-list-link:focus-visible,
.pb-page.has-link-color .pb-list-inline-link:hover,
.pb-page.has-link-color .pb-list-inline-link:focus-visible {
  color: var(--pb-link-shown, var(--pb-link-color));
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--pb-link-shown, var(--pb-link-color));
  outline-color: var(--pb-link-shown, var(--pb-link-color));
}

/* Dark mode, on a page WITHOUT its own background (it then shows the dark site background): the
   link colour lightened so it stays readable. A page with its own background (like the user
   manual's light one) keeps the chosen colour in both modes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pb-page.has-link-color:not(.has-own-bg) {
    --pb-link-shown: color-mix(in srgb, var(--pb-link-color) 35%, #ffffff);
  }
}

:root[data-theme="dark"] .pb-page.has-link-color:not(.has-own-bg) {
  --pb-link-shown: color-mix(in srgb, var(--pb-link-color) 35%, #ffffff);
}

/* ----- The floating bar (Page settings → Floating bar; page-blocks.js renderFloatBar) -----
   Fixed to the top once the title has scrolled away; slides in (no motion with reduced motion).
   Colours: the site's surface and text (dark mode follows); a page with its own background (light,
   like the user manual) gets a white bar in both modes. Chips in the page's link colour. */
.pb-floatbar {
  --pb-fb-bg: var(--color-surface);
  --pb-fb-text: var(--color-text);
  --pb-fb-line: var(--color-border);
  --pb-fb-link: var(--pb-link-shown, var(--pb-link-color, var(--color-link)));
  --pb-fb-chip-bg: #f1f5fd;
  --pb-fb-chip-hover: #e3ebfa;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--pb-fb-bg);
  color: var(--pb-fb-text);
  border-bottom: 1px solid var(--pb-fb-line);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.pb-floatbar.is-shown {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.2s ease, visibility 0s linear 0s;
}

.pb-page.has-own-bg .pb-floatbar {
  --pb-fb-bg: #ffffff;
  --pb-fb-text: #14213d;
  --pb-fb-line: #e3e8f0;
  --pb-fb-link: var(--pb-link-color, #1e3a8a);
}

.pb-floatbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
}

/* One row of chips; on narrow screens it scrolls sideways inside the bar (never the page) */
.pb-floatbar-chips {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.pb-floatbar-item {
  flex: 0 0 auto;
}

/* Chips and Back to top: the same look as the contents buttons (a very light blue fill, no
   border, 13px semibold, about 36px tall); the section on screen in the dark link colour */
.pb-floatbar-chip,
.pb-floatbar-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--pb-fb-chip-bg);
  color: var(--pb-fb-link);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.pb-floatbar-chip:hover,
.pb-floatbar-top:hover {
  background: var(--pb-fb-chip-hover);
}

.pb-floatbar-chip.is-active,
.pb-floatbar-chip.is-active:hover {
  background: var(--pb-fb-link);
  color: var(--pb-fb-bg);
}

.pb-floatbar-chip:focus-visible,
.pb-floatbar-top:focus-visible {
  outline: 2px solid var(--pb-fb-link);
  outline-offset: 2px;
}

.pb-floatbar-top {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Dark mode on a page without its own background: the chips a soft tint of the link colour */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pb-page:not(.has-own-bg) .pb-floatbar {
    --pb-fb-chip-bg: color-mix(in srgb, var(--pb-fb-link) 14%, var(--pb-fb-bg));
    --pb-fb-chip-hover: color-mix(in srgb, var(--pb-fb-link) 24%, var(--pb-fb-bg));
  }
}

:root[data-theme="dark"] .pb-page:not(.has-own-bg) .pb-floatbar {
  --pb-fb-chip-bg: color-mix(in srgb, var(--pb-fb-link) 14%, var(--pb-fb-bg));
  --pb-fb-chip-hover: color-mix(in srgb, var(--pb-fb-link) 24%, var(--pb-fb-bg));
}

.pb-floatbar.is-top-only .pb-floatbar-inner {
  justify-content: flex-end;
}

/* With the bar, a jump never puts its heading under it */
.pb-page.has-floatbar .pb-block,
.pb-page.has-floatbar .pb-section {
  scroll-margin-top: 84px;
}

@media (max-width: 640px) {
  .pb-floatbar-inner {
    padding: 6px 10px;
  }

  /* Phones: the arrow only for Back to top (its text stays for screen readers) */
  .pb-floatbar-top-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pb-floatbar-chip,
  .pb-floatbar-top {
    min-height: 44px;
  }

  .pb-floatbar-top {
    min-width: 44px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pb-floatbar,
  .pb-floatbar.is-shown {
    transition: none;
  }
}

/* ----- A list shown as buttons (list display "Buttons"; page-blocks.js) -----
   A grid of button-style links: 2 columns, 1 on phones (under 640px of content, like the rest). */
.pb-block .pb-list.pb-list-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Phones: one column, and 44px tap targets */
@container (max-width: 639px) {
  .pb-block .pb-list.pb-list-buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  .pb-block .pb-list-buttons .pb-list-button {
    min-height: 44px;
  }
}

.pb-list-button-item {
  display: flex;
  min-width: 0;
}

.pb-block .pb-list-button,
.pb-page.has-link-color .pb-list-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius);
  background: #f1f5fd;
  color: var(--pb-link-color, #1e3a8a);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pb-block a.pb-list-button:hover,
.pb-page.has-link-color a.pb-list-button:hover {
  background: #e3ebfa;
  text-decoration: none;
}

.pb-block a.pb-list-button:focus-visible {
  outline: 2px solid var(--pb-link-color, #1e3a8a);
  outline-offset: 2px;
}

/* Dark mode on a page without its own background: the same buttons, darker */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pb-page:not(.has-own-bg) .pb-list-button {
    background: color-mix(in srgb, var(--color-link) 14%, var(--color-surface));
    color: var(--pb-link-shown, var(--color-link));
  }

  :root:not([data-theme="light"]) .pb-page:not(.has-own-bg) a.pb-list-button:hover {
    background: color-mix(in srgb, var(--color-link) 24%, var(--color-surface));
  }
}

:root[data-theme="dark"] .pb-page:not(.has-own-bg) .pb-list-button {
  background: color-mix(in srgb, var(--color-link) 14%, var(--color-surface));
  color: var(--pb-link-shown, var(--color-link));
}

:root[data-theme="dark"] .pb-page:not(.has-own-bg) a.pb-list-button:hover {
  background: color-mix(in srgb, var(--color-link) 24%, var(--color-surface));
}

/* ----- A headline in the "label" style (e.g. "SECTION 1" above a section's title) ----- */
.pb-block .pb-headline.pb-headline-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.pb-block .pb-link-button.btn {
  display: inline-block;
  width: auto;
  height: auto;
  min-height: 38px;
  white-space: normal;
}

/* The Button element (page-blocks.js 'button'): a main line and an optional smaller second line;
   its colours, hover colours, border, corners and padding from the element (variables below; unset:
   the site's button colours). Each line's size and weight are set on the line itself. */
.pb-block .pb-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--pb-cta-py, 14px) var(--pb-cta-px, 32px);
  border: var(--pb-cta-bw, 0px) solid var(--pb-cta-border, transparent);
  border-radius: var(--pb-cta-radius, 4px);
  background: var(--pb-cta-bg, var(--color-primary, #0e7e4e));
  color: var(--pb-cta-color, var(--color-primary-text, #fafcfb));
  font-family: inherit;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pb-block .pb-cta:hover,
.pb-block .pb-cta:focus-visible {
  background: var(--pb-cta-hover-bg, var(--color-primary-hover, #0b6b42));
  color: var(--pb-cta-hover-color, var(--pb-cta-color, var(--color-primary-text, #fafcfb)));
  text-decoration: none;
}

.pb-block .pb-cta:focus-visible {
  outline: 2px solid var(--btn-focus, var(--color-primary, #0e7e4e));
  outline-offset: 3px;
}

.pb-block .pb-cta.is-full {
  display: flex;
  width: 100%;
}

.pb-block .pb-cta-main,
.pb-block .pb-cta-sub {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pb-block .pb-cta-sub {
  line-height: 1.35;
  opacity: 0.92;
}

.pb-block .pb-image {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* An image with a frame (the element's "border"): thin, square, the section cards' border colour */
.pb-block .pb-image.pb-image-framed {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e3e8f0;
  border-radius: 0;
}

/* A cropped image (the element's "crop", CSS only): a box with the crop's shape (aspect-ratio set by
   page-blocks.js), the whole image scaled and moved inside it, only the chosen part visible */
.pb-block .pb-image.pb-image-crop {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.pb-block .pb-image-crop .pb-image-crop-img {
  position: absolute;
  max-width: none;
  display: block;
}

/* An image with a max width (e.g. a phone screenshot): centred on its own line */
.pb-block .pb-image.pb-image-narrow {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* An image with a caption: a small line above the picture (with a max width, both centred together) */
.pb-block .pb-image-figure {
  display: block;
}

.pb-block .pb-image-figure.pb-image-figure-narrow {
  margin-left: auto;
  margin-right: auto;
}

.pb-block .pb-image-caption {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
  opacity: 0.75;
}

.pb-block .pb-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.pb-block .pb-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pb-placeholder {
  width: 100%;
  padding: 16px;
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 14px;
  text-align: center;
}

/* The public page shell (netlify/functions/page.js) */
body.builder-public {
  display: block;
  min-height: 100vh;
}

.builder-main {
  width: 100%;
  min-height: 60vh;
}

.builder-loading,
.builder-notfound {
  max-width: 640px;
  margin: 48px auto;
  padding: 0 16px;
}

.builder-notfound h1 {
  margin-bottom: 8px;
}

.builder-notfound .btn {
  width: auto;
  margin-top: 16px;
}

.builder-draft-note {
  max-width: 900px;
  margin: 16px auto 0;
}

/* The admin's preview (page-preview.html): one slim line on top, saying it is a preview */
.pb-preview-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

/* ----- Admin → Pages: the builder ----- */
.admin-layout .pb-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-layout .pb-editor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.admin-layout .pb-editor-heading {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-layout .pb-editor-actions {
  display: flex;
  gap: 6px;
}

/* "Open live page": a small link beside Preview and Save, on their middle line */
.admin-layout .pb-editor-actions .pb-open-live {
  align-self: center;
  width: auto;
  margin: 0 6px 0 0;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-layout .pb-status {
  margin: 0;
  min-height: 20px;
}

.admin-layout .pb-restore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .pb-restore[hidden] {
  display: none;
}

.admin-layout .pb-card {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .pb-card > summary {
  cursor: pointer;
  font-weight: 600;
}

.admin-layout .pb-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-layout .pb-card-head h4 {
  margin: 0;
}

.admin-layout .pb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px;
  margin-top: 8px;
}

.admin-layout .pb-field {
  min-width: 0;
}

.admin-layout .pb-field .input-field {
  margin-bottom: 8px;
}

.admin-layout .pb-inline-error:empty {
  display: none;
}

.admin-layout .pb-slug {
  display: flex;
  align-items: stretch;
}

.admin-layout .pb-slug-prefix {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--color-border-strong);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 13px;
  white-space: nowrap;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-layout .pb-slug .pb-slug-input {
  min-width: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.admin-layout .pb-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.admin-layout .pb-color-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 44px;
}

.admin-layout .pb-color-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-layout .pb-color {
  width: 44px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-input-bg);
  cursor: pointer;
}

.admin-layout .pb-color:disabled {
  opacity: 0.4;
  cursor: default;
}

.admin-layout .pb-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.admin-layout .pb-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.admin-layout .pb-add {
  position: relative;
}

.admin-layout .pb-add-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 4px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.admin-layout .pb-add-menu[hidden] {
  display: none;
}

/* Dragging an element in from an Add element menu (page-builder.js startAddDrag): the items can be
   grabbed; while one is dragged the menu steps aside (faded, the page shows through and takes the
   pointer) and a small card with its icon and name follows the pointer */
.admin-layout .pb-add-item[data-type] {
  cursor: grab;
  /* (a finger held on an item lifts it instead of scrolling; a tap still adds it) */
  touch-action: none;
}

.admin-layout .pb-add-menu.is-stepped-aside {
  opacity: 0.15;
  pointer-events: none;
}

body.pb-add-dragging,
body.pb-add-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.pb-add-drag-card {
  position: fixed;
  z-index: 1400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--color-border-strong, #ccc);
  border-radius: 6px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #222);
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.pb-add-drag-card svg {
  width: 16px;
  height: 16px;
}

.admin-layout .pb-add-item {
  padding: 8px 10px;
  border: none;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.admin-layout .pb-add-item:hover,
.admin-layout .pb-add-item:focus-visible {
  background: var(--color-surface-alt);
  outline: none;
}

.admin-layout .pb-elements {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-layout .pb-element {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .pb-element.is-selected {
  border-color: var(--btn-focus);
  box-shadow: inset 0 0 0 1px var(--btn-focus);
}

.admin-layout .pb-element-select {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2px 4px;
  border: none;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-layout .pb-element-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.admin-layout .pb-element-summary {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.admin-layout .pb-empty {
  color: var(--color-text-muted);
  font-size: 14px;
}

.admin-layout .pb-seg,
.admin-layout .pb-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.admin-layout .pb-seg-btn {
  min-width: 40px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.admin-layout .pb-seg-btn[aria-pressed="true"] {
  border-color: var(--btn-focus);
  box-shadow: inset 0 0 0 1px var(--btn-focus);
  font-weight: 600;
}

.admin-layout .pb-seg-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.admin-layout .pb-seg-btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

.admin-layout .pb-style-title {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.admin-layout .pb-sides {
  margin: 8px 0;
  padding: 0;
  border: none;
}

.admin-layout .pb-sides-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.admin-layout .pb-side {
  display: flex;
  flex-direction: column;
}

.admin-layout .pb-side .input-field {
  margin-bottom: 4px;
}

.admin-layout .pb-width {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-layout .pb-width input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .pb-width .input-field {
  width: 80px;
  margin-bottom: 0;
}

.admin-layout .pb-image-controls {
  grid-column: 1 / -1;
}

.admin-layout .pb-thumb {
  display: block;
  max-width: 100%;
  max-height: 180px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
  object-fit: contain;
}

.admin-layout .pb-thumb-empty {
  display: grid;
  place-items: center;
  height: 100px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .pb-image-actions {
  justify-content: flex-start;
  margin-bottom: 4px;
}

.admin-layout .pb-preview-wrap {
  min-width: 0;
  position: sticky;
  top: 72px;
}

.admin-layout .pb-preview {
  width: 100%;
  min-height: 300px;
  max-height: calc(100vh - 140px);
  overflow: auto;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: width 0.2s ease;
}

.admin-layout .pb-preview.is-mobile {
  width: 390px;
  max-width: 100%;
}

.admin-layout .pb-preview .pb-editable {
  cursor: pointer;
  outline: 1px dashed transparent;
  outline-offset: 2px;
}

.admin-layout .pb-preview .pb-editable:hover {
  outline-color: var(--color-border-strong);
}

.admin-layout .pb-preview .pb-editable.is-selected {
  outline: 2px solid var(--btn-focus);
}

/* The preview's own move tools (page-builder.js decoratePreview; never on the published page): a small
   bar at the element's top right (a section's at its top left, with its name), shown on hover, on
   keyboard focus and on the selected element */
.admin-layout .pb-preview .has-pv-tools {
  position: relative;
}

.admin-layout .pb-preview .pb-pv-tools {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 6;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border-strong, var(--color-border));
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 12px/1 var(--font-body, system-ui, sans-serif);
  text-align: left;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.admin-layout .pb-preview .pb-pv-tools.is-section {
  right: auto;
  left: 4px;
}

.admin-layout .pb-preview .has-pv-tools:hover > .pb-pv-tools,
.admin-layout .pb-preview .has-pv-tools:focus-within > .pb-pv-tools,
.admin-layout .pb-preview .has-pv-tools.is-selected > .pb-pv-tools {
  display: inline-flex;
}

.admin-layout .pb-preview.is-pv-drag .pb-pv-tools {
  display: none;
}

.admin-layout .pb-preview .pb-pv-name {
  max-width: 140px;
  padding: 0 6px;
  overflow: hidden;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-layout .pb-preview .pb-pv-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.admin-layout .pb-preview .pb-pv-btn:hover:not(:disabled) {
  background: var(--color-border);
}

.admin-layout .pb-preview .pb-pv-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.admin-layout .pb-preview .pb-pv-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-layout .pb-preview .pb-pv-handle {
  cursor: grab;
  touch-action: none;
}

.admin-layout .pb-preview .pb-pv-handle .cs-handle-dots {
  margin: 0;
}

.admin-layout .pb-preview .is-pv-dragging {
  opacity: 0.4;
}

/* Where a dragged element lands (on the page, over the preview) */
.pb-pv-drop {
  position: fixed;
  z-index: 1000;
  height: 4px;
  background: var(--btn-focus, #0E7E4E);
  pointer-events: none;
}

.admin-layout .pb-address {
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Pages list: the domain a page is published on ("Publish on"), under its address */
.admin-layout .pb-domain-badge {
  display: table;
  margin-top: 4px;
  font-size: 11px;
  white-space: normal;
}

/* Media picker */
.pb-media {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
}

.pb-media-panel {
  width: min(860px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.pb-media .pb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.pb-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.pb-media-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pb-media-pick {
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  overflow: hidden;
  cursor: pointer;
}

.pb-media-pick:hover,
.pb-media-pick:focus-visible {
  border-color: var(--btn-focus);
  outline: 2px solid var(--btn-focus);
}

.pb-media-pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pb-media-item .btn {
  width: 100%;
}

/* Narrow screens: one column (elements and settings, then the preview) */
@media (max-width: 900px) {
  .admin-layout .pb-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-layout .pb-preview-wrap {
    position: static;
  }

  .admin-layout .pb-preview {
    max-height: none;
  }
}

/* ---------- Page Builder editor: tabs, one centred settings column, calm element rows ---------- */
/* The bar (Back, title, Open page, Save) and the main tabs stay under the admin bar while scrolling;
   --pb-top-h is their height (page-builder.js), so the sub-tabs and the preview stick under them */
.admin-layout .pb-editor-top {
  position: sticky;
  top: var(--admin-nav-height, 56px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.admin-layout .pb-tabs {
  position: relative;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.admin-layout .pb-tab {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.admin-layout .pb-tab:hover {
  color: var(--color-text);
}

.admin-layout .pb-tab[aria-selected="true"] {
  border-bottom-color: var(--btn-focus);
  color: var(--color-text);
}

.admin-layout .pb-tab:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

.admin-layout .pb-tabs-small {
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .pb-tabs-small .pb-tab {
  padding: 8px 10px;
  font-size: 13px;
}

.admin-layout .pb-tabpanel[hidden] {
  display: none;
}

/* Sub-tabs (Page settings) and an element's tabs: sticky under the bar */
.admin-layout .pb-page-settings > .pb-tabs,
.admin-layout .pb-settings > .pb-settings-top {
  position: sticky;
  top: calc(var(--admin-nav-height, 56px) + var(--pb-top-h, 100px));
  z-index: 20;
}

.admin-layout .pb-page-settings > .pb-tabs {
  background: var(--color-bg);
}

/* An open element: its tabs and the X (close) on one line, "Done" under its settings (Ben 2026-11-02) */
.admin-layout .pb-settings > .pb-settings-top {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--color-surface);
}

.admin-layout .pb-settings-top > .pb-tabs {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .pb-settings-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .pb-settings-close:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
}

.admin-layout .pb-settings-close:focus-visible,
.admin-layout .pb-settings-done:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 1px;
}

.admin-layout .pb-settings-foot {
  display: flex;
  justify-content: flex-end;
  padding: 14px 0 4px;
}

/* The Add element menus open above everything (not under an open element's sticky tabs, not cut
   by a panel): placed by page-builder.js beside their button, scrolling inside when the window is short */
.admin-layout .pb-add-menu.is-floating {
  position: fixed;
  z-index: 1200;
  transform: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Page settings: one centred column (about 640px), one field per line, help under each field */
.admin-layout .pb-page-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 640px;
  margin: 24px auto 32px;
}

.admin-layout .pb-page-col .pb-field .input-field,
.admin-layout .pb-page-col .input-narrow {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
}

.admin-layout .pb-page-col .field-label {
  display: block;
  margin-bottom: 6px;
}

.admin-layout .pb-page-col .field-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .pb-page-col .pb-toggles {
  gap: 16px;
  padding-top: 0;
}

/* Page settings as cards (Ben 2026-11-03: "smaller text and a box around the text ... very gentle modern
   light background and possibly shadows"): a small muted heading, one help line, the fields; the shared
   surface, border and card tokens (light and dark) */
.admin-layout .pb-page-col {
  gap: 16px;
}

.admin-layout .pb-set-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.admin-layout .pb-set-card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .pb-set-card-help {
  margin: -10px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .pb-set-card .field-label,
.admin-layout .pb-set-card .pb-check > label,
.admin-layout .pb-set-card .checkbox-field {
  font-size: 13px;
  font-weight: 500;
}

.admin-layout .pb-set-card .field-label {
  margin-bottom: 4px;
}

.admin-layout .pb-set-card .field-hint {
  margin-top: 4px;
  font-size: 12px;
}

.admin-layout .pb-set-card .input-field,
.admin-layout .pb-set-card .pb-slug-prefix {
  min-height: 36px;
  font-size: 14px;
}

.admin-layout .pb-set-card .pb-seo-input {
  font-size: 14px;
}

/* Short fields side by side; one under the other when there is no room (phones) */
.admin-layout .pb-set-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 16px;
  min-width: 0;
}

.admin-layout .pb-set-pair > * {
  min-width: 0;
}

/* The inner tabs (Publish, Design, …): compact */
.admin-layout .pb-page-settings > .pb-tabs-small .pb-tab {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
}

/* (dark: the surface is already a touch lighter than the page; a softer shadow) */
:root[data-theme="dark"] .admin-layout .pb-set-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-layout .pb-set-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
}

.admin-layout .pb-check .field-hint {
  margin: 4px 0 0 26px;
}

.admin-layout .pb-seo-input {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.admin-layout .pb-counter.is-over {
  color: var(--color-warning-text, var(--color-text-muted));
}

/* Page background colour: checkbox, swatch, saved colours, + Save color, Manage colors in one row */
.admin-layout .pb-page-col .pb-color-field {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-height: 0;
}

.admin-layout .pb-page-col .pb-color-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

/* Address: the full address (no longer cut off) with the address part editable */
.admin-layout .pb-page-col .pb-slug {
  flex-wrap: nowrap;
}

.admin-layout .pb-page-col .pb-slug-prefix {
  flex: 0 1 auto;
  max-width: 60%;
  height: auto;
  min-height: 36px;
  padding: 6px 8px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-layout .pb-page-col .pb-slug .pb-slug-input {
  flex: 1 1 120px;
  min-width: 100px;
}

.admin-layout .pb-url-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .pb-url-text {
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  color: var(--color-text);
}

.admin-layout .pb-url-actions {
  display: flex;
  gap: 6px;
}

/* Workspace: the list (and settings) beside the preview; the preview sticks under the bar */
.admin-layout .pb-workspace {
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
  gap: 24px;
}

.admin-layout #pb-editor .pb-preview-wrap {
  top: calc(var(--admin-nav-height, 56px) + var(--pb-top-h, 100px) + 12px);
  padding-top: 12px;
}

.admin-layout #pb-editor .pb-preview {
  max-height: calc(100vh - var(--admin-nav-height, 56px) - var(--pb-top-h, 100px) - 80px);
}

/* Small muted section labels */
.admin-layout .pb-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .pb-elements-panel {
  padding-top: 16px;
}

.admin-layout .pb-elements-panel > .pb-elements-head {
  margin-bottom: 12px;
}

/* Element rows: one border, the name, Go to and Actions; the open one's settings under it */
.admin-layout .pb-elements {
  gap: 0;
}

.admin-layout .pb-element {
  display: block;
  padding: 0;
  scroll-margin-top: calc(var(--admin-nav-height, 56px) + var(--pb-top-h, 100px) + 12px);
}

.admin-layout .pb-section-row {
  border-width: 1px;
  scroll-margin-top: calc(var(--admin-nav-height, 56px) + var(--pb-top-h, 100px) + 12px);
}

.admin-layout .pb-row-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}

.admin-layout .pb-row-icon {
  flex: none;
  color: var(--color-text-muted);
}

.admin-layout .pb-goto {
  flex: none;
  font-size: 12px;
}

.admin-layout .pb-row-line .actions-menu-btn,
.admin-layout .pb-section-head .actions-menu-btn {
  flex: none;
}

.admin-layout .pb-row-settings {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .pb-section-row > .pb-row-settings {
  background: var(--color-surface);
}

.admin-layout .pb-settings {
  padding: 0;
  border: none;
  background: none;
}

.admin-layout .pb-tab-body {
  padding-top: 14px;
}

.admin-layout .pb-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-layout .pb-tab-body > .pb-style-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* The + between rows: shown on hover / keyboard focus (always, a little, on touch screens) */
.admin-layout .pb-insert {
  position: relative;
  display: flex;
  justify-content: center;
  height: 14px;
  list-style: none;
}

.admin-layout .pb-insert-btn {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  margin-top: -4px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.admin-layout .pb-insert:hover .pb-insert-btn,
.admin-layout .pb-insert-btn:focus-visible,
.admin-layout .pb-insert-btn[aria-expanded="true"] {
  opacity: 1;
}

.admin-layout .pb-insert-btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

@media (hover: none) {
  .admin-layout .pb-insert-btn {
    opacity: 0.6;
  }
}

.admin-layout .pb-insert .pb-add-menu {
  top: 20px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.admin-layout .pb-elements.is-dragging .pb-insert {
  visibility: hidden;
}

/* "Go to": the element outlined for a moment in the preview */
.admin-layout .pb-preview .pb-flash {
  outline: 3px solid var(--btn-focus);
  outline-offset: 2px;
  animation: pb-flash 1.6s ease-out;
}

@keyframes pb-flash {
  0% { background-color: color-mix(in srgb, var(--btn-focus) 18%, transparent); }
  100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .pb-preview .pb-flash {
    animation: none;
  }
}

@media (max-width: 900px) {
  .admin-layout .pb-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-layout #pb-editor .pb-preview-wrap {
    position: static;
  }

  .admin-layout #pb-editor .pb-preview {
    max-height: none;
  }

  .admin-layout .pb-page-col {
    margin-top: 16px;
  }
}

/* Lesson page: several videos stacked, each full content width, 10px apart (also under the last) */
#lesson-video .lesson-video-item {
  margin-bottom: 10px;
}

#lesson-video[hidden] {
  display: none;
}

/* Several parts: "Part 1 · Part 2 …" tabs over one player, then "Next: Part 2" */
.lesson-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.lesson-part-tab {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.lesson-part-tab[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

.lesson-part-tab:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.lesson-part-next[hidden] {
  display: none;
}

#lesson-video .lesson-part-next {
  margin: 0 0 10px;
}

/* Lesson page with its own content order (lesson-layout.js): videos, images, resources and the
   description in the admin's order, 20px apart, the same centred width as the video */
.lesson-flow > * {
  margin-top: 0;
  margin-bottom: 20px;
}

.lesson-flow > *:last-child {
  margin-bottom: 0;
}

.lesson-content .lesson-flow > .lesson-body,
.lesson-flow > .lesson-resources {
  margin-top: 0;
}

/* The figure is the content column itself: the full width the description text uses, with no
   centred max-width of its own (that used to push a left-aligned image ~150px in on wide screens).
   Its size and alignment come from .lesson-image-box below. */
.lesson-image,
body.has-site-bar .lesson-image {
  width: 100%;
  max-width: none;
  margin: 0 0 20px;
  padding: 0;
}

.lesson-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Its size (max-width: N% set on the page) and alignment within the content column; the caption and
   link sit inside, so they match the image's width */
.lesson-image-box {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Left: flush with the column's left edge (the text's edge); right: flush with its right edge; the
   caption follows the same side */
.lesson-image-box.align-left {
  margin-left: 0;
  margin-right: auto;
}

.lesson-image-box.align-right {
  margin-left: auto;
  margin-right: 0;
}

.lesson-image-box.align-left figcaption {
  text-align: left;
}

.lesson-image-box.align-right figcaption {
  text-align: right;
}

/* Phones: an image set under 50% is shown at 70% so it stays readable */
@media (max-width: 640px) {
  .lesson-image-box.is-narrow {
    max-width: 70% !important;
  }
}

.lesson-image-link {
  display: block;
  border-radius: var(--radius-sm);
}

.lesson-image-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.lesson-image figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Admin lesson form: "Content order" as its own panel (a tinted box with a border), each item a card
   (drag handle on the left, ↑ ↓ on the right), and the image drop zone */
.admin-layout .lesson-layout {
  margin: 12px 0 20px;
  padding: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface-alt));
}

.admin-layout .lesson-layout-heading {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.admin-layout .lesson-layout-help {
  margin: 0 0 12px;
}

.admin-layout .lesson-layout-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.admin-layout .lesson-layout-item {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.admin-layout .lesson-layout-item.is-dragging {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent), 0 6px 16px rgba(0, 0, 0, 0.12);
  opacity: 0.85;
}

.admin-layout .lesson-layout-drop {
  height: 0;
  margin: -5px 0;
  border-top: 3px solid var(--color-primary);
  border-radius: 0;
}

.admin-layout .lesson-layout-actions {
  margin-left: auto;
}

/* The image preview: a frame standing for the lesson's content column, the image at its size */
.admin-layout .lesson-layout-frame {
  flex: 1 1 100%;
  padding: 8px;
  border: 1px dashed var(--color-border);
  border-radius: 0;
  background: var(--color-surface-alt);
}

.admin-layout .lesson-layout-frame-inner {
  position: relative;
  min-width: 40px;
}

.admin-layout .lesson-layout-frame .lesson-layout-preview {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  border-radius: 0;
}

.admin-layout .lesson-layout-size {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 4px;
}

.admin-layout .lesson-layout-size .lesson-layout-field:first-child {
  flex: 1 1 220px;
}

.admin-layout .lesson-layout-size-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-layout .lesson-layout-range {
  flex: 1 1 auto;
  min-width: 100px;
  accent-color: var(--color-primary);
}

.admin-layout .lesson-layout-number {
  width: 72px;
  margin: 0;
}

.admin-layout .lesson-layout-unit {
  color: var(--color-text-muted);
}

.admin-layout .lesson-layout-align {
  width: auto;
  min-width: 110px;
  margin: 0;
}

.admin-layout .lesson-layout-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.admin-layout .lesson-layout-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: grab;
  touch-action: none; /* dragging on touch screens moves the item, not the page */
}

.admin-layout .lesson-layout-handle:active {
  cursor: grabbing;
}

.admin-layout .lesson-layout-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
}

.admin-layout .lesson-layout-title svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.admin-layout .lesson-layout-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .lesson-layout-summary {
  margin: 4px 0 0 40px;
  overflow-wrap: anywhere;
}

.admin-layout .lesson-layout-image {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.admin-layout .lesson-layout-preview {
  display: block;
  width: 140px;
  height: 96px;
  object-fit: cover;
  border-radius: 0;
  background: var(--color-surface-alt);
}

.admin-layout .lesson-layout-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-top-color: var(--color-primary);
  /* Exception: a spinner stays round */
  border-radius: 50%;
  animation: lesson-layout-spin 0.9s linear infinite;
}

@keyframes lesson-layout-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .lesson-layout-spinner {
    animation: none;
  }
}

.admin-layout .lesson-layout-fields {
  flex: 1 1 240px;
  min-width: 0;
}

.admin-layout .lesson-layout-field .input-field {
  margin-bottom: 4px;
}

.admin-layout .lesson-layout-status.is-error {
  color: var(--color-danger-text);
}

.admin-layout .lesson-image-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding: 14px;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 14px;
  text-align: center;
}

.admin-layout .lesson-image-drop.is-over,
.admin-layout .lesson-image-drop:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}

/* Admin lesson form: "Video 2", "Video 3"... with a × at the end; "Add video" under the last box */
.admin-layout .lesson-video-row .field-label {
  margin-top: 4px;
}

.admin-layout .lesson-video-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-layout .lesson-video-line .input-field {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.admin-layout .lesson-video-error {
  margin: 4px 0 0;
}

.admin-layout .lesson-video-error:empty {
  display: none;
}

.admin-layout .lesson-video-add.btn {
  margin: 8px 0 16px;
}

/* ======================================================================
   Admin top bar: 5 dropdown menus (admin.js setupMenus). The section tabs stay in the page as the
   source of truth but are hidden; the menus use the tabs' look (same colours, active fill and
   underline). The open list is position: fixed, placed under its button by admin.js.
   ====================================================================== */
.admin-nav-wrap.has-menus .admin-nav,
.admin-nav-wrap.has-menus .admin-nav-scroll {
  display: none !important;
}

.admin-menus {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.admin-menus::-webkit-scrollbar {
  display: none;
}

.admin-menu {
  flex: none;
  display: flex;
}

.admin-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 12px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--nav-text);
  font: inherit;
  font-size: 13px; /* Montserrat is wider: the five menus still fit */
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
}

.admin-menu-btn:hover,
.admin-menu.is-open .admin-menu-btn {
  color: var(--nav-text-hover);
  background: var(--nav-hover-bg);
}

/* The menu that holds the current section: the active tab's fill and underline */
.admin-menu.is-active .admin-menu-btn {
  color: var(--nav-active-text);
  font-weight: 600;
  background: var(--nav-active-bg);
  box-shadow: inset 0 -3px 0 var(--nav-focus);
}

.admin-menu-btn:focus-visible {
  outline: 2px solid var(--nav-focus);
  outline-offset: -3px;
}

.admin-menu-current {
  font-weight: 450;
  opacity: 0.85;
}

.admin-menu-current:empty {
  display: none;
}

.admin-menu-chevron {
  flex: none;
  transition: transform 0.15s ease;
}

/* Members: the arrow is its own target (the word opens the list): a wider hit area */
.admin-menu-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 28px;
  margin: -6px -8px -6px 0;
  padding: 0 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.admin-menu-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
}

.admin-menu.is-open .admin-menu-arrow .admin-menu-chevron {
  transform: rotate(180deg);
}

.admin-menu.is-open .admin-menu-chevron {
  transform: rotate(180deg);
}

/* A section inside has a badge or count */
.admin-menu-dot {
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--nav-focus);
}

.admin-menu-dot[hidden] {
  display: none;
}

.admin-menu-list {
  position: fixed;
  z-index: 95;
  min-width: 200px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.admin-menu-list[hidden] {
  display: none;
}

/* A long menu (e.g. Messages with Emails open inline on a phone) scrolls inside the screen */
@media (max-width: 600px) {
  .admin-menu-list {
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.admin-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.admin-menu-item:hover {
  background: var(--color-surface-alt);
}

/* A small heading inside a menu (e.g. Courses → "Add & import"), over a thin line */
.admin-menu-heading {
  margin: 6px 0 2px;
  padding: 8px 12px 4px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-menu-item:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

/* The first heading of a menu sits at its top: no line above it */
.admin-menu-list > .admin-menu-heading:first-child,
.admin-submenu > .admin-menu-heading:first-child {
  margin-top: 0;
  border-top: 0;
}

/* An item with a second level (Messages → Emails ›) and the second level itself: a flyout with the
   menu's own look beside the menu (admin.js placeSub), or indented under its item on a phone */
.admin-menu-sub-arrow {
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-muted);
}

.admin-menu-sub.is-open > .admin-menu-item {
  background: var(--color-surface-alt);
}

.admin-submenu {
  position: fixed;
  z-index: 96;
  min-width: 230px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.admin-submenu[hidden] {
  display: none;
}

.admin-submenu.is-inline {
  position: static;
  min-width: 0;
  max-height: none;
  margin: 0 0 4px 12px;
  padding: 0 0 0 4px;
  border: 0;
  border-left: 2px solid var(--color-border-strong);
  box-shadow: none;
}

.admin-submenu .admin-menu-item {
  min-height: 36px;
  font-size: 13.5px;
}

.admin-submenu .admin-menu-item.is-current {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--btn-focus);
}

/* The current section inside the open menu */
.admin-menu-item.is-current {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--btn-focus);
}

.admin-menu-item-badge {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-menu-item-badge[hidden] {
  display: none;
}

/* Narrower screens: the current section's name only shows when there's room */
@media (max-width: 1100px) {
  .admin-menu-current {
    display: none;
  }
}

/* Phones: the 5 menus in one row that scrolls sideways, a bit tighter */
@media (max-width: 760px) {
  .admin-menu-btn {
    padding: 0 10px;
    font-size: 12px;
    gap: 4px;
  }
}

/* ----- Page Builder: text sizes per Desktop / Mobile (page-blocks.js sets the variables) -----
   Desktop: --pb-fs / --pb-lh. Mobile (the page content under 640px wide, which also matches the
   builder's Mobile preview): --pb-fs-m / --pb-lh-m when set, else the desktop values. */
.pb-block .pb-sized {
  font-size: var(--pb-fs, 16px);
  line-height: var(--pb-lh, 1.5);
}

@container (max-width: 639px) {
  .pb-block .pb-sized {
    font-size: var(--pb-fs-m, var(--pb-fs, 16px));
    line-height: var(--pb-lh-m, var(--pb-lh, 1.5));
  }
}

/* Divider: a line the width of its element (thickness, style and colour from the element) */
.pb-block .pb-divider {
  width: 100%;
  height: 0;
  border: 0 solid var(--color-border-strong);
  border-top-width: 1px;
}

/* Builder: icons in "Add element", the size fields, text-style buttons */
.admin-layout .pb-add-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-layout .pb-add-icon {
  flex: none;
  color: var(--color-text-muted);
}

.admin-layout .pb-sizes {
  margin: 8px 0 0;
  padding: 0;
  border: none;
}

.admin-layout .pb-size-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-layout .pb-size-field {
  display: flex;
  flex-direction: column;
}

.admin-layout .pb-size-field .input-field {
  width: 110px;
  margin-bottom: 4px;
}

/* (Ben 2026-11-02: "No green link text anywhere in the builder: use buttons") A small button in the
   admin's normal colours */
.admin-layout .pb-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

.admin-layout .pb-link-btn:hover {
  background: var(--color-surface-alt);
}

.admin-layout .pb-link-btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

/* ----- Page Builder sliders: label, slider, live value, exact number ----- */
.admin-layout .pb-slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}

.admin-layout .pb-slider-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.admin-layout .pb-slider-label {
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .pb-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-layout .pb-range {
  flex: 1 1 auto;
  min-width: 60px;
  height: 28px; /* a comfortable touch target */
  margin: 0;
  accent-color: var(--btn-focus);
  cursor: pointer;
  background: transparent;
}

.admin-layout .pb-range:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .pb-range-value {
  flex: none;
  min-width: 48px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  text-align: right;
}

.admin-layout .pb-slider .pb-range-number {
  flex: none;
  width: 64px;
  height: 30px;
  margin: 0;
  padding: 4px 6px;
  font-size: 13px;
}

.admin-layout .pb-sides-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-layout .pb-field-wide {
  grid-column: 1 / -1;
}

/* Narrow settings panel (phones): the live value is also in the number box, so it steps aside */
@media (max-width: 420px) {
  .admin-layout .pb-range-value {
    display: none;
  }

  .admin-layout .pb-slider-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }
}

/* While a spacing slider is held: the selected element's margin (amber) and padding (green),
   faintly, in the preview (page-blocks.js sets the --pb-m-* / --pb-p-* values) */
.pb-block.pb-show-spacing {
  position: relative;
  isolation: isolate;
}

.pb-block.pb-show-spacing::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--pb-m-t, 0px));
  right: calc(-1 * var(--pb-m-r, 0px));
  bottom: calc(-1 * var(--pb-m-b, 0px));
  left: calc(-1 * var(--pb-m-l, 0px));
  z-index: -1;
  background: rgba(245, 158, 11, 0.2);
  pointer-events: none;
}

.pb-block.pb-show-spacing::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-style: solid;
  border-color: rgba(34, 197, 94, 0.3);
  border-width: var(--pb-p-t, 0px) var(--pb-p-r, 0px) var(--pb-p-b, 0px) var(--pb-p-l, 0px);
  pointer-events: none;
}

/* Course page: "Modules" heading with Collapse all / Expand all on the right */
.course-modules-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.course-modules-head h3 {
  margin-bottom: 0;
}

.course-modules-head h3[hidden] + .course-toggle-group {
  margin-left: auto;
}

/* No modules: no heading and no buttons, so the row takes no space */
.course-modules-head:has(> h3[hidden]):has(> .course-toggle-group[hidden]) {
  display: none;
}

/* Expand all / Collapse all: small text buttons */
.course-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.course-toggle-group[hidden] {
  display: none !important;
}

.course-toggle-all {
  min-height: 32px;
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--color-primary, var(--color-text));
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.course-toggle-all:hover:not(:disabled) {
  text-decoration-thickness: 2px;
}

.course-toggle-all:disabled {
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: default;
}

.course-toggle-all:focus-visible {
  outline: 2px solid var(--btn-focus, currentColor);
  outline-offset: 2px;
  border-radius: 0;
}

/* A module's lessons slide in when opened */
.course-module-body.is-opening {
  animation: course-module-open 0.22s ease-out;
}

@keyframes course-module-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .course-module-body.is-opening {
    animation: none;
  }
}

/* ----- Page Builder: saved colors (swatches, + Save color, Manage colors) ----- */
.admin-layout .pb-color-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.admin-layout .pb-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .pb-swatch-note {
  margin: 0;
}

/* 24px round swatches with a visible ring on keyboard focus (light and dark) */
.admin-layout .pb-swatch,
.pb-media .pb-swatch {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.admin-layout .pb-swatch:hover {
  transform: scale(1.08);
}

.admin-layout .pb-swatch:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.pb-media .pb-swatch-static {
  cursor: default;
}

.pb-color-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
}

.pb-color-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pb-color-hex {
  min-width: 64px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.pb-color-item .pb-color-name {
  flex: 1 1 160px;
  min-width: 0;
  height: 32px;
  margin: 0;
}

.pb-colors-panel {
  width: min(560px, 100%);
}

.pb-media .btn.btn-sm {
  width: auto;
}

/* ----- Page Builder: jump targets, divider with text, lists, links ----- */
/* A jump link scrolls the element to the top with some room (sticky bars never cover it); the
   element gets focus without an outline unless it came from the keyboard */
.pb-block {
  scroll-margin-top: 80px;
}

.pb-block:focus {
  outline: none;
}

.pb-block:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 4px;
}

/* "—— Table Of Content ——": the lines take the rest of the row and shrink first; a long text wraps
   and stays centred; nothing overflows on phones */
.pb-block .pb-divider-labeled {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.pb-block .pb-divider-line {
  flex: 1 1 24px;
  min-width: 16px;
  height: 0;
  border: 0 solid var(--color-border-strong);
  border-top-width: 1px;
}

.pb-block .pb-divider-text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 40px);
  text-align: center;
  overflow-wrap: anywhere;
}

.pb-block .pb-divider-labeled.is-left .pb-divider-text {
  text-align: left;
}

.pb-block .pb-divider-labeled.is-right .pb-divider-text {
  text-align: right;
}

@container (max-width: 639px) {
  .pb-block .pb-divider-labeled .pb-divider-text {
    text-align: center;
  }
}

/* List: no browser bullets, our icon (decoration) then the text; space between items from the
   element (--pb-list-gap) */
.pb-block .pb-list {
  display: flex;
  flex-direction: column;
  gap: var(--pb-list-gap, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pb-block .pb-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

/* The icon sits in a box one text line tall, so it lines up with the first line */
.pb-block .pb-list-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5em;
  height: 1lh;
  color: var(--color-brand);
}

.pb-block .pb-list-number {
  min-width: 1.6em;
  justify-content: flex-end;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pb-block .pb-list-text,
.pb-block .pb-list-link {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Linked items and headlines: underline on hover, a clear focus ring for the keyboard */
.pb-block .pb-list-link {
  color: var(--color-brand);
  text-decoration: none;
}

.pb-block .pb-heading-link,
.pb-block .pb-block-link {
  color: inherit;
  text-decoration: none;
}

.pb-block .pb-block-link {
  display: block;
}

.pb-block .pb-list-link:hover,
.pb-block .pb-heading-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pb-block .pb-list-link:focus-visible,
.pb-block .pb-heading-link:focus-visible,
.pb-block .pb-block-link:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
  border-radius: 0;
}

/* Builder: list items, the icon preview, warnings */
.admin-layout .pb-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-layout .pb-list-item-row {
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .pb-list-item-row.has-warning {
  border-left: 3px solid var(--color-danger);
}

.admin-layout .pb-item-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* A list item's one-line rich box (Bold, Italic, Link, Clear) fills the row before ↑ ↓ × */
.admin-layout .pb-item-line > .rich-editor {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .pb-item-line > .rich-editor .rich-editor-box {
  border-radius: 0;
}

.admin-layout .pb-item-line .pb-item-text {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.admin-layout .pb-item-more {
  margin-top: 6px;
}

.admin-layout .pb-item-more > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .pb-icon-select {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-layout .pb-icon-select .input-field {
  margin-bottom: 0;
}

.admin-layout .pb-icon-preview {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-brand);
  font-weight: 600;
}

.admin-layout .pb-element-warning {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-danger-text);
}

.admin-layout .field-hint.is-error {
  color: var(--color-danger-text);
}

.admin-layout .pb-divider-text-settings {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ----- Page Builder: Section (a band holding other elements; page-blocks.js renderSection) -----
   The band is as wide as the page ("Full width") or as the content ("Boxed"); the content sits in a
   centred (or left) inner box; spacing per desktop / phone (under 640px) from the --pb-sec-* values */
.pb-section {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  margin-top: var(--pb-sec-mt, 0px);
  margin-bottom: var(--pb-sec-mb, 0px);
  padding: var(--pb-sec-pt, 48px) var(--pb-sec-pr, 24px) var(--pb-sec-pb, 48px) var(--pb-sec-pl, 24px);
  background-repeat: no-repeat;
  overflow: hidden; /* the rounded corners clip the background and the overlay */
  scroll-margin-top: 80px;
}

.pb-section.pb-section-boxed {
  max-width: var(--pb-sec-max, 900px);
  margin-left: auto;
  margin-right: auto;
}

.pb-section-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.pb-section-inner {
  position: relative;
  z-index: 1;
  max-width: var(--pb-sec-max, 900px);
  margin: 0 auto;
  container-type: inline-size; /* the children use the phone layout when the box is narrow */
}

.pb-section.is-left .pb-section-inner {
  margin-left: 0;
}

.pb-section-flow {
  row-gap: var(--pb-sec-gap, 16px);
}

/* Section columns: its elements side by side; one column on phones */
.pb-section-flow.has-columns {
  display: grid;
  grid-template-columns: repeat(var(--pb-sec-cols, 2), minmax(0, 1fr));
  column-gap: var(--pb-sec-gap, 16px);
  align-items: start;
}

.pb-section-flow.has-columns > .pb-block {
  width: calc(var(--pb-w, 100%) - var(--pb-mx, 0px));
}

@container (max-width: 639px) {
  .pb-section-flow.has-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Link list (inline or stacked), social icons, spacer, legal links (footers; page-blocks.js) */
.pb-linklist,
.pb-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-list-gap, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pb-ta-center .pb-linklist,
.pb-ta-center .pb-social,
.pb-ta-center .pb-legal-links {
  justify-content: center;
}

.pb-ta-right .pb-linklist,
.pb-ta-right .pb-social,
.pb-ta-right .pb-legal-links {
  justify-content: flex-end;
}

.pb-linklist.is-stacked {
  flex-direction: column;
  gap: calc(var(--pb-list-gap, 12px) / 2);
}

.pb-ta-center .pb-linklist.is-stacked,
.pb-ta-center .pb-legal-links.is-stacked {
  align-items: center;
}

.pb-ta-right .pb-linklist.is-stacked,
.pb-ta-right .pb-legal-links.is-stacked {
  align-items: flex-end;
}

.pb-linklist-link,
.pb-legal-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pb-linklist-link:hover,
.pb-legal-link:hover {
  opacity: 0.8;
}

.pb-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  color: inherit;
  border-radius: 0;
}

.pb-social-link:hover {
  background: var(--color-surface-alt);
}

.pb-linklist-link:focus-visible,
.pb-legal-link:focus-visible,
.pb-social-link:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.pb-spacer {
  height: var(--pb-space, 32px);
}

.pb-spacer.is-editing {
  outline: 1px dashed var(--color-border-strong);
  outline-offset: -1px;
}

@container (max-width: 639px) {
  .pb-spacer {
    height: var(--pb-space-m, var(--pb-space, 32px));
  }
}

.pb-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.pb-legal-links.is-stacked {
  flex-direction: column;
}

.pb-legal-company {
  margin: 6px 0 0;
}

/* A custom footer (footer.js): its own full-width line, like the current footer */
body:has(> .site-footer-custom) {
  flex-wrap: wrap;
  align-content: flex-start;
}

.site-footer-custom {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text-muted);
}

.site-footer-custom .pb-content {
  padding-top: 20px;
  padding-bottom: 24px;
}

.pb-section:focus {
  outline: none;
}

.pb-section:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

@container (max-width: 639px) {
  .pb-section {
    margin-top: var(--pb-sec-mt-m, var(--pb-sec-mt, 0px));
    margin-bottom: var(--pb-sec-mb-m, var(--pb-sec-mb, 0px));
    padding: var(--pb-sec-pt-m, var(--pb-sec-pt, 48px)) var(--pb-sec-pr-m, var(--pb-sec-pr, 24px)) var(--pb-sec-pb-m, var(--pb-sec-pb, 48px)) var(--pb-sec-pl-m, var(--pb-sec-pl, 24px));
  }

  .pb-section.pb-hide-mobile {
    display: none;
  }

  /* The builder shows it faded so it can still be edited */
  .pb-section.pb-preview-hidden-mobile {
    opacity: 0.4;
    outline: 2px dashed var(--color-border-strong);
    outline-offset: -2px;
  }
}

@container (min-width: 640px) {
  .pb-section.pb-hide-desktop {
    display: none;
  }

  .pb-section.pb-preview-hidden-desktop {
    opacity: 0.4;
    outline: 2px dashed var(--color-border-strong);
    outline-offset: -2px;
  }
}

/* Courses → Import from Vimeo showcase: the list of my showcases to pick from */
.admin-layout .vimeo-import-picker {
  margin: 8px 0 16px;
}

.admin-layout .vimeo-import-picker[hidden] {
  display: none;
}

.admin-layout .vimeo-import-picker-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.admin-layout .vimeo-import-picker-head h4 {
  margin: 0;
  font-size: 15px;
}

.admin-layout .vimeo-import-picker-head .input-field {
  flex: 1 1 180px;
  width: auto;
  margin: 0;
}

.admin-layout .vimeo-import-showcases {
  display: grid;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  margin: 0;
  padding: 2px;
  list-style: none;
}

.admin-layout .vimeo-import-showcases:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.admin-layout .vimeo-import-showcase {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}

.admin-layout .vimeo-import-showcase:hover {
  border-color: var(--color-border-strong);
}

/* Several showcases at once: the ticks, the bar (count, Select all, Clear, Load), the sections */
.admin-layout .vimeo-import-tick {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.admin-layout .vimeo-import-multi-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0;
}

.admin-layout .vimeo-import-multi-bar #vimeo-import-load-many {
  margin-left: auto;
}

.admin-layout .vimeo-multi-section {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .vimeo-multi-section > summary {
  cursor: pointer;
  padding: 2px 0 6px;
}

.admin-layout .vimeo-multi-section > * + * {
  margin-top: 8px;
}

.admin-layout .vimeo-multi-section.is-skipped > :not(summary):not(.checkbox-field) {
  opacity: 0.45;
}

.admin-layout .vimeo-multi-section.has-problem {
  border-color: var(--color-danger-text);
}

.admin-layout .vimeo-multi-section .vimeo-import-inline .input-field:not(.input-narrow):not(.input-auto) {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-layout .vimeo-multi-dup[hidden] {
  display: none;
}

.admin-layout .vimeo-multi-results {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.admin-layout .vimeo-multi-result {
  overflow-wrap: anywhere;
}

.admin-layout .vimeo-multi-result.is-failed {
  color: var(--color-danger-text);
}

@media (max-width: 640px) {
  .admin-layout .vimeo-import-multi-bar #vimeo-import-load-many {
    margin-left: 0;
    width: 100%;
  }
}

.admin-layout .vimeo-import-showcase.is-selected {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background: var(--color-surface-alt);
}

.admin-layout .vimeo-import-showcase-thumb {
  flex: none;
  width: 80px;
  height: 45px;
  object-fit: cover;
  border-radius: 0;
  background: var(--color-surface-alt);
}

.admin-layout .vimeo-import-showcase-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-layout .vimeo-import-showcase-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .vimeo-import-showcase-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .vimeo-import-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-layout .vimeo-import-lock svg {
  width: 14px;
  height: 14px;
}

/* After the import: the result, "Open the course" and "Import another showcase" on one wrapping line */
.admin-layout .vimeo-import-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

/* Courses → Import from Vimeo showcase */
.admin-layout .vimeo-import-choices {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.admin-layout .vimeo-import-choices .btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  height: auto;
}

.admin-layout .vimeo-import-group {
  margin: 12px 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.admin-layout .vimeo-import-group .profile-radio {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-layout .vimeo-import-group .input-narrow {
  width: 80px;
}

.admin-layout .vimeo-import-indent {
  margin: 4px 0 10px 26px;
}

.admin-layout .vimeo-import-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 12px;
}

.admin-layout .vimeo-import-list {
  display: grid;
  gap: 6px;
  max-height: 55vh;
  overflow-y: auto;
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}

.admin-layout .vimeo-import-row {
  display: grid;
  grid-template-columns: auto 28px 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

/* Keep lessons in sync with Vimeo: the course setting, the preview and the log */
.admin-layout .vimeo-sync-setting {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

/* Hidden for a course with modules (each module follows its own showcase) */
.admin-layout .vimeo-sync-setting[hidden] {
  display: none;
}

.admin-layout .vimeo-sync-fields {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.admin-layout .vimeo-sync-fields[hidden] {
  display: none;
}

.admin-layout .vimeo-sync-last:empty {
  display: none;
}

.admin-layout .vimeo-sync-list {
  display: grid;
  gap: 10px;
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}

.admin-layout .vimeo-sync-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .vimeo-sync-item .form-message {
  margin: 0;
}

.admin-layout .vimeo-sync-change {
  align-items: flex-start;
  overflow-wrap: anywhere;
}

.admin-layout .vimeo-sync-change.is-conflict {
  color: var(--color-text-muted);
}

.admin-layout .vimeo-sync-log-box {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .vimeo-sync-log-box summary {
  cursor: pointer;
  font-weight: 600;
}

.admin-layout .vimeo-sync-log {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.admin-layout .vimeo-sync-log-row {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.admin-layout .vimeo-sync-log-row:last-child {
  border-bottom: 0;
}

.admin-layout .vimeo-sync-error {
  color: var(--color-danger-text);
}

/* Linked showcase: its part of the sync preview, and the link panel's options */
.admin-layout .vimeo-sync-showcase {
  margin-bottom: 12px;
}

.admin-layout .vimeo-sync-heading {
  margin: 8px 0 4px;
  font-size: 15px;
}

.admin-layout .vimeo-link-form {
  display: grid;
  gap: 10px;
}

.admin-layout .vimeo-link-options {
  display: grid;
  gap: 10px;
}

.admin-layout .vimeo-link-options[hidden] {
  display: none;
}

.admin-layout .vimeo-link-form .vimeo-import-inline .input-field {
  flex: 1 1 200px;
  min-width: 0;
}

/* Courses: the order members see. A row: the handle and the position on the left, the course
   name and its info (taking the room it needs, wrapping only between words), the row's buttons,
   then Move up / Move down. When it doesn't fit, the buttons wrap to a line of their own. */
.admin-layout .course-order-row {
  flex-wrap: wrap;
  row-gap: 8px;
}

.admin-layout .course-order-row .course-row-title {
  flex: 1 1 240px;
  min-width: 180px;
  overflow-wrap: break-word;
}

.admin-layout .course-order-row .course-row-actions {
  flex: 0 1 auto;
  align-items: center;
}

.admin-layout .course-move-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.admin-layout .course-order-status.is-error {
  color: var(--color-danger-text);
}

.admin-layout .course-order {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.admin-layout .course-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-text-lighter);
  cursor: grab;
  touch-action: none;
}

.admin-layout .course-drag-handle svg {
  width: 18px;
  height: 18px;
}

.admin-layout .course-drag-handle:hover,
.admin-layout .course-move:hover:not(:disabled) {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.admin-layout .course-drag-handle:focus-visible,
.admin-layout .course-move:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 1px;
}

.admin-layout .course-position {
  min-width: 22px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-muted);
}

.admin-layout .course-move {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .course-move:disabled {
  opacity: 0.35;
  cursor: default;
}

.admin-layout .course-order-row.is-dragging {
  border-color: var(--color-link);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  cursor: grabbing;
}

.admin-layout .course-order-status {
  min-height: 18px;
  margin: 0 0 6px;
}

.admin-layout .course-order-status.is-success {
  color: var(--color-accent-text);
}

/* Phones: handle, position and name on the first line; the buttons and Move up / down below */
@media (max-width: 520px) {
  .admin-layout .course-order-row .course-row-title {
    flex: 1 1 0;
    flex-basis: calc(100% - 80px);
    min-width: 0;
  }

  .admin-layout .course-order-row .course-row-actions {
    flex: 1 1 auto;
    width: auto;
    justify-content: flex-start;
  }
}

/* Showcases tab: "Updating…" / "Showing the last loaded list" + Retry next to Refresh */
.admin-layout .showcase-list-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .showcase-list-status:empty {
  display: none;
}

/* Videos (and the lesson video picker): the same status next to Refresh */
.admin-layout .video-list-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .video-list-status:empty {
  display: none;
}

/* "Where should the lessons go?": a field and its small link / number fields on one wrapping line */
.admin-layout .vimeo-import-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .vimeo-import-inline .input-field {
  margin: 0;
}

.admin-layout .vimeo-import-inline #vimeo-import-module-name {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-layout .vimeo-import-place-hint {
  color: var(--color-danger-text);
}

.admin-layout .vimeo-import-row.is-unreadable {
  opacity: 0.75;
  background: var(--color-surface-alt);
}

.admin-layout .vimeo-import-num {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: right;
}

.admin-layout .vimeo-import-thumb {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 0;
  background: var(--color-surface-alt);
}

.admin-layout .vimeo-import-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-layout .vimeo-import-title {
  margin: 0;
}

.admin-layout .vimeo-import-reason {
  font-size: 12.5px;
  color: var(--color-danger-text);
}

.admin-layout .vimeo-import-length {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .admin-layout .vimeo-import-row {
    grid-template-columns: auto 64px minmax(0, 1fr);
  }

  .admin-layout .vimeo-import-num {
    display: none;
  }

  .admin-layout .vimeo-import-thumb {
    width: 64px;
    height: 36px;
  }

  .admin-layout .vimeo-import-length {
    grid-column: 3;
  }
}

/* Links in descriptions -> resource buttons: under each import video, and in the Lessons tab tool
   "Convert links in descriptions to buttons" */
.admin-layout .link-buttons-edit {
  grid-column: 1 / -1;
  padding-left: 38px;
}

.admin-layout .link-buttons-block {
  display: grid;
  gap: 6px;
}

.admin-layout .link-buttons-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .link-buttons-item {
  display: grid;
  grid-template-columns: minmax(140px, 240px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.admin-layout .link-buttons-item .input-field {
  margin: 0;
}

.admin-layout .link-buttons-url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .link-buttons-item.is-removed .link-buttons-url,
.admin-layout .link-buttons-item.is-removed .input-field {
  text-decoration: line-through;
  opacity: 0.6;
}

.admin-layout .link-buttons-dropped {
  color: var(--color-danger-text);
}

.admin-layout .link-convert-scan {
  display: grid;
  gap: 6px;
}

.admin-layout .link-convert-list {
  display: grid;
  gap: 12px;
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}

.admin-layout .link-convert-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .link-convert-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.admin-layout .link-convert-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .link-convert-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-layout .link-convert-text {
  margin: 4px 0 0;
  padding: 8px;
  max-height: 180px;
  overflow: auto;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-surface-alt);
  border-radius: 0;
}

.admin-layout .link-convert-text > :last-child {
  margin-bottom: 0;
}

.admin-layout .link-convert-nolinks {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .link-convert-nolinks summary {
  cursor: pointer;
  font-weight: 600;
}

.admin-layout .link-convert-nolinks-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.admin-layout .link-convert-snippet {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .admin-layout .link-buttons-edit {
    padding-left: 0;
  }

  .admin-layout .link-buttons-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-layout .link-buttons-url {
    grid-column: 1;
    grid-row: 2;
  }

  .admin-layout .link-convert-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Admin → Footers: the list, "Where footers appear", and the Footer dropdowns */
.admin-layout .footer-name {
  display: block;
  font-weight: 600;
}

.admin-layout .footer-note {
  display: block;
  font-size: 12.5px;
}

.admin-layout .footer-note.is-warning {
  color: var(--color-danger-text);
}

.admin-layout .footer-sites {
  margin-top: 28px;
}

.admin-layout .pb-footer-select {
  width: auto;
  max-width: 100%;
  min-width: 200px;
  margin: 0;
}

/* Link list / Social icons items in the element settings */
.admin-layout .pb-item-url {
  margin-top: 6px;
}

.admin-layout .pb-item-note:empty {
  display: none;
}

@media (max-width: 640px) {
  .admin-layout .pb-footer-select {
    width: 100%;
    min-width: 0;
  }
}

/* Builder: sections in the Elements list (an outlined box with a header bar and its children) */
.admin-layout .pb-section-row {
  display: block;
  padding: 0;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  list-style: none;
}

.admin-layout .pb-section-row.is-selected {
  border-color: var(--btn-focus);
}

.admin-layout .pb-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.admin-layout .pb-section-head .pb-element-select {
  flex: 1 1 120px;
}

/* The whole title bar opens the section's settings */
.admin-layout .pb-section-head {
  cursor: pointer;
}

.admin-layout .pb-section-row.is-selected .pb-section-head {
  background: color-mix(in srgb, var(--btn-focus) 10%, var(--color-surface-alt));
}

.admin-layout .pb-section-children {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 48px;
  margin: 0;
  padding: 8px;
}

.admin-layout .pb-section-row.is-collapsed .pb-section-children,
.admin-layout .pb-section-row.is-collapsed .pb-section-foot {
  display: none;
}

.admin-layout .pb-drop-hint {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .pb-section-foot {
  position: relative;
  padding: 0 8px 8px;
}

.admin-layout .pb-section-foot .pb-add-menu {
  left: 8px;
  right: auto;
}

.admin-layout .pb-element .pb-move-extra {
  font-size: 12px;
  padding: 0 8px;
}

.admin-layout .pb-collapse-btn[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.admin-layout .pb-section-settings-group {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 0;
  border: none;
}

/* ----- Automations: the two re-entry settings (trigger panel) and the run history filter ----- */
.admin-layout .automation-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .automation-setting {
  margin: 0;
  padding: 0;
  border: none;
}

.admin-layout .automation-setting-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
}

.admin-layout .automation-setting-option input {
  flex: none;
  margin-top: 3px;
}

.admin-layout .automation-setting-option > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-layout .automation-setting-label {
  font-weight: 600;
}

.admin-layout .mv-run-chips {
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ----- "Actions" dropdown (admin.js actionsMenu): the button and the menu over the page ----- */
.admin-layout .actions-btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.admin-layout .actions-btn[aria-expanded="true"] .admin-menu-chevron {
  transform: rotate(180deg);
}

.actions-menu {
  position: fixed;
  z-index: 96;
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 16px);
  padding: 4px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.actions-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.actions-menu-item:hover {
  background: var(--color-surface-alt);
}

.actions-menu-item:focus-visible,
.actions-menu-item:focus {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

.actions-menu-item.is-danger {
  color: var(--color-danger-text);
}

.actions-menu-icon {
  flex: none;
  margin-top: 2px;
}

.actions-menu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.actions-menu-hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
}

.actions-menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--color-border);
}

/* ----- "Members in <automation>": columns with room; the table scrolls sideways in its own box
   instead of squashing; text wraps normally; the email stays on one line ----- */
@media (min-width: 701px) {
  .admin-layout .am-table {
    table-layout: fixed;
    width: max(100%, 1330px);
  }

  .admin-layout .am-table th:nth-child(1) { width: 44px; }
  .admin-layout .am-table th:nth-child(2) { width: 220px; }
  .admin-layout .am-table th:nth-child(3) { width: 110px; }
  .admin-layout .am-table th:nth-child(4) { width: 170px; }
  .admin-layout .am-table th:nth-child(5) { width: 240px; }
  .admin-layout .am-table th:nth-child(6) { width: 220px; }
  .admin-layout .am-table th:nth-child(7) { width: 200px; }
  .admin-layout .am-table th:nth-child(8) { width: 126px; }

  .admin-layout .am-table td {
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: top;
  }

  .admin-layout .am-table .am-actions-cell {
    white-space: nowrap;
    text-align: right;
  }

  .admin-layout .am-status-inline {
    display: none;
  }
}

.admin-layout .am-member-cell .cm-member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  min-width: 0;
}

.admin-layout .am-email {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phones: each row is a card (email, name and status on top; label / value lines; Actions full
   width at the bottom); no sideways scrolling */
@media (max-width: 700px) {
  .admin-layout .am-table .am-status-cell {
    display: none;
  }

  .admin-layout .am-table td.am-member-cell {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .admin-layout .am-member-cell .cm-member {
    flex: 1 1 auto;
  }

  .admin-layout .am-status-inline {
    flex: none;
  }

  .admin-layout .am-table td.am-actions-cell {
    padding-top: 8px;
  }

  .admin-layout .actions-btn.is-block {
    width: 100%;
  }

  /* The bulk buttons wrap onto more lines instead of running off the screen */
  .admin-layout .am-bulk .btn.btn-sm {
    flex: 1 1 auto;
    white-space: normal;
    height: auto;
    min-height: 30px;
  }
}

/* ===================== Email editor (email-editor.js): full screen, formatted emails ===================== */

body.email-editor-open {
  overflow: hidden;
}

/* The whole window, whatever is around it: no max-width / max-height from any dialog or card rule.
   Above the admin header (90); under the toasts (1100) and confirmation boxes (1200). */
:root {
  --email-canvas: #eceff3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --email-canvas: #232625;
  }
}

:root[data-theme="dark"] {
  --email-canvas: #232625;
}

.email-editor {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
}

.email-editor-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.email-editor-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 200px;
}

.email-editor-title {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.email-editor-subject-line {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-side-toggle {
  display: none;
}

.email-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
}

.email-tab {
  padding: 4px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.email-tab[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.email-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* The editor's "Email style" dropdown (Plain / Branded / Use my default) */
.email-style-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.email-style-pick .field-label {
  margin: 0;
  white-space: nowrap;
}

.email-style-pick .email-style-select {
  width: auto;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
}

/* Admin → Sent emails: Email design */
.admin-layout .email-design {
  margin: 0 0 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .email-design-summary {
  padding: 12px 16px;
  cursor: pointer;
}

/* Sent emails: the line pointing to the Email footer tab */
.admin-layout .email-design-moved {
  margin: 0;
  padding: 10px 16px;
}

/* The Email footer tab: the editor in a framed box, then "Used by" */
.admin-layout #panel-email-footer #email-design-body {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-top: 16px;
}

.admin-layout .email-footer-intro {
  margin: 0 0 14px;
}

.admin-layout .email-footer-used {
  margin-top: 24px;
}

.admin-layout .email-footer-used h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.admin-layout .email-used-group {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.admin-layout .email-used-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.admin-layout .email-used-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
}

.admin-layout .email-used-item + .email-used-item {
  border-top: 1px solid var(--color-border);
}

.admin-layout .email-used-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 14px;
  font-weight: 600;
}

.admin-layout .email-used-when,
.admin-layout .email-used-reason {
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .email-used-reason {
  font-style: italic;
}

.admin-layout .email-design-title {
  font-weight: 600;
}

.admin-layout .email-design-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  padding: 0 16px 16px;
}

.admin-layout .email-design-settings {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.admin-layout .email-style-choice,
.admin-layout .email-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.admin-layout .email-brand {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .email-brand[hidden] {
  display: none;
}

.admin-layout .email-brand-color {
  width: 56px;
  height: 36px;
  padding: 2px;
}

.admin-layout .email-design-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* The email itself is light (as it arrives in most inboxes), in light and dark mode */
.admin-layout .email-design-frame {
  width: 100%;
  height: 360px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #ffffff;
}

@media (max-width: 760px) {
  .admin-layout .email-design-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.email-editor-status {
  margin: 0;
  padding: 0 16px;
  font-size: 14px;
  line-height: 20px;
}

.email-editor-status:not(:empty) {
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
}

.email-editor-status.is-error {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

.email-editor-status.is-success {
  color: var(--color-accent-text);
}

/* The message on a light grey canvas (left, scrolls), the side panel on the right (scrolls on its own) */
.email-editor-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
}

.email-editor-main {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--email-canvas);
}

.email-editor-pane {
  max-width: none;
  margin: 0;
  padding: 24px 16px 48px;
}

.email-editor-column {
  max-width: 700px;
  margin: 0 auto;
}

.email-editor-side {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
}

.email-side-section + .email-side-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.email-side-title {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 22px;
}

/* "Help: personalise" (email-editor.js, from MergeFields.CATALOG): groups Name / Course / Links /
   This email / Only in some emails, each with its own light tint and a matching chip accent. Chips:
   compact monospace, tinted, no border, square. */
.email-editor-side {
  --merge-name-bg: #eef4fd;
  --merge-name-chip: #dbe8fb;
  --merge-name-chip-hover: #c7dbf8;
  --merge-name-ink: #1d4f8a;
  --merge-course-bg: #edf8f2;
  --merge-course-chip: #d6f0e2;
  --merge-course-chip-hover: #bfe6d1;
  --merge-course-ink: #0b6b42;
  --merge-links-bg: #fbf3e8;
  --merge-links-chip: #f6e3c6;
  --merge-links-chip-hover: #f0d3a8;
  --merge-links-ink: #8a4b0b;
  --merge-this-bg: #f4f0fb;
  --merge-this-chip: #e6ddf6;
  --merge-this-chip-hover: #d7c9f0;
  --merge-this-ink: #5b3a99;
  --merge-other-bg: var(--color-surface-alt);
  --merge-other-chip: rgba(3, 3, 3, 0.06);
  --merge-other-chip-hover: rgba(3, 3, 3, 0.11);
  --merge-other-ink: var(--color-text-muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .email-editor-side {
    --merge-name-bg: rgba(96, 150, 230, 0.09);
    --merge-name-chip: rgba(96, 150, 230, 0.2);
    --merge-name-chip-hover: rgba(96, 150, 230, 0.32);
    --merge-name-ink: #a9c8f2;
    --merge-course-bg: rgba(62, 207, 142, 0.08);
    --merge-course-chip: rgba(62, 207, 142, 0.18);
    --merge-course-chip-hover: rgba(62, 207, 142, 0.3);
    --merge-course-ink: #8fe3bb;
    --merge-links-bg: rgba(230, 160, 70, 0.08);
    --merge-links-chip: rgba(230, 160, 70, 0.2);
    --merge-links-chip-hover: rgba(230, 160, 70, 0.32);
    --merge-links-ink: #f0c58c;
    --merge-this-bg: rgba(160, 120, 230, 0.09);
    --merge-this-chip: rgba(160, 120, 230, 0.2);
    --merge-this-chip-hover: rgba(160, 120, 230, 0.32);
    --merge-this-ink: #cdb6f3;
    --merge-other-chip: rgba(237, 239, 238, 0.08);
    --merge-other-chip-hover: rgba(237, 239, 238, 0.15);
  }
}

:root[data-theme="dark"] .email-editor-side {
  --merge-name-bg: rgba(96, 150, 230, 0.09);
  --merge-name-chip: rgba(96, 150, 230, 0.2);
  --merge-name-chip-hover: rgba(96, 150, 230, 0.32);
  --merge-name-ink: #a9c8f2;
  --merge-course-bg: rgba(62, 207, 142, 0.08);
  --merge-course-chip: rgba(62, 207, 142, 0.18);
  --merge-course-chip-hover: rgba(62, 207, 142, 0.3);
  --merge-course-ink: #8fe3bb;
  --merge-links-bg: rgba(230, 160, 70, 0.08);
  --merge-links-chip: rgba(230, 160, 70, 0.2);
  --merge-links-chip-hover: rgba(230, 160, 70, 0.32);
  --merge-links-ink: #f0c58c;
  --merge-this-bg: rgba(160, 120, 230, 0.09);
  --merge-this-chip: rgba(160, 120, 230, 0.2);
  --merge-this-chip-hover: rgba(160, 120, 230, 0.32);
  --merge-this-ink: #cdb6f3;
  --merge-other-chip: rgba(237, 239, 238, 0.08);
  --merge-other-chip-hover: rgba(237, 239, 238, 0.15);
}

.email-merge-intro,
.email-plain-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-lighter);
}

.email-plain-note {
  margin: 20px 0 0;
}

.email-merge-group {
  --merge-bg: var(--merge-other-bg);
  --merge-chip: var(--merge-other-chip);
  --merge-chip-hover: var(--merge-other-chip-hover);
  --merge-ink: var(--merge-other-ink);
  margin: 0 0 10px;
  padding: 10px 10px 12px;
  border-radius: var(--radius);
  background: var(--merge-bg);
}

.email-merge-group.is-name { --merge-bg: var(--merge-name-bg); --merge-chip: var(--merge-name-chip); --merge-chip-hover: var(--merge-name-chip-hover); --merge-ink: var(--merge-name-ink); }
.email-merge-group.is-course { --merge-bg: var(--merge-course-bg); --merge-chip: var(--merge-course-chip); --merge-chip-hover: var(--merge-course-chip-hover); --merge-ink: var(--merge-course-ink); }
.email-merge-group.is-links { --merge-bg: var(--merge-links-bg); --merge-chip: var(--merge-links-chip); --merge-chip-hover: var(--merge-links-chip-hover); --merge-ink: var(--merge-links-ink); }
.email-merge-group.is-this { --merge-bg: var(--merge-this-bg); --merge-chip: var(--merge-this-chip); --merge-chip-hover: var(--merge-this-chip-hover); --merge-ink: var(--merge-this-ink); }

.email-merge-group-title {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--merge-ink);
}

.email-merge-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.email-merge-list li {
  display: grid;
  gap: 3px;
}

.email-merge-insert {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 2px 7px;
  border: 0;
  border-radius: var(--radius);
  background: var(--merge-chip);
  color: var(--merge-ink);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.email-merge-insert:hover {
  background: var(--merge-chip-hover);
}

.email-merge-insert:active {
  transform: translateY(1px);
}

.email-merge-insert:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.email-merge-insert code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: inherit;
  background: none;
  padding: 0;
}

.email-merge-meaning {
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-muted);
}

.email-merge-alt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 15px;
  color: var(--color-text-lighter);
}

/* A date field's value today ("Today: October 2026") */
.email-merge-example {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--color-text);
}

/* A field this email can't fill in: listed, with where it works */
.email-merge-note {
  justify-self: start;
  font-size: 11px;
  line-height: 15px;
  font-weight: 600;
  color: var(--merge-ink);
}

.email-merge-list li.is-not-filled .email-merge-insert {
  opacity: 0.75;
}

/* "Which email is this?" / "Tip": the same tinted look as the field list */
.email-side-section.is-help .email-help-text {
  margin: 0;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--merge-name-bg);
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-muted);
}

/* "When to send" inside the side panel: the step form's styles, stacked */
.email-editor-side .timing-field {
  margin: 0;
}

.email-editor-side .timing-details {
  padding: 10px;
}

.email-editor-fields .input-field {
  margin-bottom: 4px;
}

.email-subject-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.email-subject-row .input-field:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.email-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--color-border-strong);
  border-bottom: 0;
  border-radius: 0;
  background: var(--color-surface);
}

.email-tool-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
  border-right: 1px solid var(--color-border);
}

.email-tool-group:last-child {
  border-right: 0;
}

/* The email editor's emoji button and its two-item menu (email-editor.js) */
.email-emoji {
  position: relative;
}

/* The emoji suggestions under the cursor (emoji-shortcuts.js: ":" and two letters) */
.emoji-suggest {
  position: fixed;
  z-index: 1200;
  min-width: 140px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  font-size: 13px;
}

.emoji-suggest-item {
  padding: 4px 8px;
  white-space: nowrap;
  cursor: pointer;
}

.emoji-suggest-item.is-active,
.emoji-suggest-item:hover {
  background: var(--color-surface-alt);
  outline: 1px solid var(--btn-focus);
  outline-offset: -1px;
}

.email-emoji-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.email-emoji-menu[hidden] {
  display: none;
}

.email-emoji-item {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.email-emoji-item:hover,
.email-emoji-item:focus-visible {
  border-color: var(--color-primary);
}

.email-tool {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.email-tool:hover,
.email-tool:focus-visible {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
}

.email-tool.is-bold { font-weight: 700; }
.email-tool.is-italic { font-style: italic; }
.email-tool.is-underline { text-decoration: underline; }

.email-tool-select.input-field {
  width: auto;
  height: 34px;
  padding: 0 8px;
  font-size: 14px;
}

.email-swatches {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-right: 4px;
}

.email-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  cursor: pointer;
}

.email-color-input {
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

/* The message looks like the email: a white card with dark text, in light and dark mode, the full
   width of the ~700px column */
.email-editor-paper {
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-top: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.email-editor-content {
  max-width: none;
  min-height: 420px;
  margin: 0;
  padding: 32px;
  border-radius: 0;
  background: #ffffff;
  color: #1a1a1a;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
  outline: none;
  overflow-wrap: anywhere;
}

.email-editor-content:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary);
}

.email-editor-content.is-dropping {
  box-shadow: 0 0 0 3px var(--color-primary);
}

.email-editor-content p { margin: 0 0 16px; }
.email-editor-content h2 { margin: 0 0 12px; font-size: 22px; line-height: 30px; }
.email-editor-content h3 { margin: 0 0 10px; font-size: 18px; line-height: 26px; }
.email-editor-content ul,
.email-editor-content ol { margin: 0 0 16px; padding-left: 24px; }
.email-editor-content a { color: #0E7E4E; text-decoration: underline; }

.email-editor-content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 8px;
  border-radius: 0;
  cursor: pointer;
}

.email-editor-content img.is-selected {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.email-editor-content img.needs-alt {
  outline: 2px dashed var(--color-danger);
}

.email-editor-content img[data-uploading] {
  opacity: 0.5;
}

.email-editor-hint {
  margin-top: 8px;
}

.email-image-panel {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 16px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}

.email-image-panel[hidden] {
  display: none;
}

.email-image-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.email-image-width {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-image-width input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--color-primary);
}

.email-image-width .input-field {
  width: 72px;
}

.email-image-align,
.email-image-actions,
.email-crop-ratios,
.email-preview-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.email-image-align .btn[aria-pressed="true"],
.email-crop-ratios .btn[aria-pressed="true"],
.email-preview-sizes .btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  color: var(--color-accent-text);
  font-weight: 600;
}

.email-image-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.email-image-error {
  color: var(--color-danger-text);
}

/* Link and crop dialogs, over the editor */
.email-subdialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.email-subdialog {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(460px, 100%);
  max-height: calc(100% - 32px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.email-subdialog .form-message:empty {
  display: none;
}

.email-subdialog-title {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
}

.email-crop-dialog {
  width: min(760px, 100%);
}

.email-crop-stage {
  position: relative;
  align-self: center;
  max-width: 100%;
  line-height: 0;
  touch-action: none;
  user-select: none;
}

.email-crop-image {
  display: block;
  max-width: 100%;
  max-height: 60vh;
}

.email-crop-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  cursor: move;
}

.email-crop-stage {
  overflow: hidden;
}

.email-crop-handle {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #ffffff;
  border-radius: 0;
  background: var(--color-primary);
}

/* Inside the corners, so the stage's clipping (for the dimmed area) never hides them */
.email-crop-handle.is-nw { left: -2px; top: -2px; cursor: nwse-resize; }
.email-crop-handle.is-ne { right: -2px; top: -2px; cursor: nesw-resize; }
.email-crop-handle.is-sw { left: -2px; bottom: -2px; cursor: nesw-resize; }
.email-crop-handle.is-se { right: -2px; bottom: -2px; cursor: nwse-resize; }

.email-crop-message {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Preview */
.email-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.email-preview-head {
  margin-bottom: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
}

.email-preview-subject {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}


.email-preview-wrap {
  margin: 0 auto;
  max-width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  overflow: hidden;
  transition: max-width 0.2s ease;
}

.email-preview-wrap.is-mobile {
  max-width: 375px;
}

.email-preview-frame {
  display: block;
  width: 100%;
  height: calc(100dvh - 220px);
  min-height: 420px;
  border: 0;
  background: #f4f6f8;
}

.email-preview-frame[hidden] {
  display: none;
}

/* A plain email (the access emails): written in the reader's normal system font, like a personal email */
.email-editor-paper.is-plain .email-editor-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Courses → Access emails */
.admin-layout .access-email-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.admin-layout .access-email-card {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .access-email-card p {
  margin: 0;
}

.admin-layout .access-email-card-title {
  margin: 0;
  font-size: 16px;
}

.admin-layout .access-email-subject {
  overflow-wrap: anywhere;
}

.admin-layout .access-email-card .admin-row-actions {
  margin-top: 6px;
  flex-wrap: wrap;
}

.admin-layout .access-email-choice {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout .access-email-choice .field-label {
  margin: 0;
}

.admin-layout .access-email-choice select {
  width: auto;
  max-width: 100%;
}

.admin-layout .access-email-edit-own[hidden] {
  display: none;
}

.email-preview-error {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
}

/* Tablets: the side panel slides over from the right ("Help & when to send" in the top bar) */
@media (max-width: 1100px) {
  .email-editor-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-side-toggle {
    display: inline-flex;
  }

  .email-editor-side {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: min(360px, 92vw);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s;
  }

  .email-editor.is-side-open .email-editor-side {
    transform: none;
    visibility: visible;
  }
}

/* Phones: a full-screen sheet with the actions on their own row; the side panel is a bottom sheet */
@media (max-width: 640px) {
  .email-editor-header {
    padding: 8px 12px;
  }

  .email-editor-actions {
    width: 100%;
    margin-left: 0;
  }

  .email-editor-actions .btn {
    flex: 1 1 auto;
  }

  .email-tabs {
    width: 100%;
  }

  .email-tab {
    flex: 1 1 0;
    padding: 4px 6px;
  }

  .email-editor-pane {
    padding: 12px 8px 32px;
  }

  .email-editor-content {
    padding: 16px;
  }

  .email-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .email-tool-group {
    flex-wrap: nowrap;
  }

  .email-image-panel {
    grid-template-columns: 1fr;
  }

  .email-editor-side {
    top: auto;
    left: 0;
    width: auto;
    max-height: 75dvh;
    border-left: 0;
    border-top: 1px solid var(--color-border-strong);
    border-radius: 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
  }

  .email-editor-main {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .email-preview-wrap,
  .email-editor-side {
    transition: none;
  }
}

/* ---------- Forms on pages (page-forms.js; the Page Builder's Form element) ----------
   Every value comes from the element's checked settings as a --pbf-* custom property; without one
   ("Match my site") the site's own colours and buttons are used, in light and dark mode. */
.pb-form {
  width: 100%;
}

.pb-form-loading,
.pb-form-note {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.pbf {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pbf-max, 520px);
  padding: var(--pbf-box-pad, 0);
  border: var(--pbf-box-bw, 0) solid var(--pbf-box-border, var(--color-border));
  /* Square everywhere: a form's own radius settings are not used */
  border-radius: 0;
  background: var(--pbf-box-bg, transparent);
  color: var(--pbf-label, var(--color-text));
  text-align: left;
}

.pbf.pbf-align-center {
  margin-left: auto;
  margin-right: auto;
}

.pbf.pbf-align-right {
  margin-left: auto;
}

.pbf.pbf-shadow-soft {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.pbf.pbf-shadow-medium {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.pbf.pbf-shadow-strong {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.pbf-form {
  display: flex;
  flex-direction: column;
  gap: var(--pbf-gap, 14px);
  margin: 0;
}

.pbf-form[hidden],
.pbf-thanks[hidden],
.pbf-summary[hidden],
.pbf-error[hidden],
.pbf-spinner[hidden] {
  display: none;
}

.pbf-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pbf-gap, 14px);
}

.pbf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pbf-label {
  color: var(--pbf-label, var(--color-text));
  font-size: var(--pbf-label-fs, 14px);
  font-weight: var(--pbf-label-fw, 600);
  line-height: 1.3;
}

.pbf-star {
  color: var(--pbf-star, var(--color-danger-text));
}

.pbf-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--pbf-input-h, 44px);
  margin: 0;
  padding: 0 var(--pbf-input-px, 12px);
  border: var(--pbf-input-bw, 1px) solid var(--pbf-input-border, var(--color-border-strong));
  border-radius: 0;
  background: var(--pbf-input-bg, var(--color-input-bg));
  color: var(--pbf-input-color, var(--color-text));
  font: inherit;
  /* at least 16px on phones so the page doesn't zoom in */
  font-size: max(16px, var(--pbf-input-fs, 16px));
  line-height: 1.3;
}

@media (min-width: 641px) {
  .pbf-input {
    font-size: var(--pbf-input-fs, 15px);
  }
}

.pbf-input::placeholder {
  color: var(--pbf-ph, var(--color-text-lighter));
  opacity: 1;
}

.pbf-input:focus {
  outline: none;
  border-color: var(--pbf-focus, var(--btn-focus));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pbf-focus, var(--btn-focus)) 30%, transparent);
}

.pbf-input[aria-invalid="true"] {
  border-color: var(--pbf-error, var(--color-danger-text));
}

.pbf-note {
  margin: 0;
  font-size: 13px;
  color: var(--pbf-label, var(--color-text-muted));
  opacity: 0.85;
}

.pbf-error,
.pbf-summary {
  margin: 0;
  color: var(--pbf-error, var(--color-danger-text));
  font-size: 13px;
  font-weight: 500;
}

.pbf-summary {
  font-size: 14px;
}

.pbf-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pbf-label, var(--color-text));
}

.pbf-consent .pbf-error {
  flex-basis: 100%;
}

.pbf-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--pbf-focus, var(--color-primary));
}

.pbf-consent-label {
  flex: 1 1 200px;
  min-width: 0;
}

.pbf-check:focus-visible {
  outline: 2px solid var(--pbf-focus, var(--btn-focus));
  outline-offset: 2px;
}

.pbf-privacy {
  color: inherit;
  text-decoration: underline;
}

/* The honeypot: off screen, never shown or announced */
.pbf-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pbf-actions {
  display: flex;
  justify-content: flex-start;
}

.pbf-btn-align-center .pbf-actions {
  justify-content: center;
}

.pbf-btn-align-right .pbf-actions {
  justify-content: flex-end;
}

.pbf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: var(--pbf-btn-py, 10px) var(--pbf-btn-px, 22px);
  border: var(--pbf-btn-bw, 0) solid var(--pbf-btn-border, transparent);
  border-radius: 0;
  background: var(--pbf-btn-bg, var(--btn-bg));
  color: var(--pbf-btn-color, var(--btn-text));
  font: inherit;
  font-size: var(--pbf-btn-fs, 15px);
  font-weight: var(--pbf-btn-fw, 600);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pbf-btn-full .pbf-button {
  width: 100%;
}

.pbf-button:hover:not(:disabled) {
  background: var(--pbf-btn-hover, var(--pbf-btn-bg, var(--btn-bg-hover)));
}

.pbf-button:focus-visible {
  outline: 2px solid var(--pbf-focus, var(--btn-focus));
  outline-offset: 2px;
}

.pbf-button:disabled {
  opacity: 0.75;
  cursor: progress;
}

.pbf-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  /* Exception: a spinner stays round */
  border-radius: 50%;
  animation: pbf-spin 0.8s linear infinite;
}

@keyframes pbf-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pbf-spinner {
    animation-duration: 2.4s;
  }

  .pbf-button {
    transition: none;
  }
}

.pbf-thanks {
  color: var(--pbf-thanks, var(--color-text));
  font-size: var(--pbf-thanks-fs, 17px);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

.pbf-thanks:focus {
  outline: none;
}

.pbf-continue-line {
  margin: 10px 0 0;
  font-size: 15px;
}

.pbf-continue {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.pbf-thanks-center .pbf-thanks {
  text-align: center;
}

.pbf-thanks-right .pbf-thanks {
  text-align: right;
}

.pbf-labels-inside .pbf-field,
.pbf-labels-hidden .pbf-field {
  gap: 4px;
}

/* Builder preview: not clickable (a click selects the element) */
.pbf.is-builder .pbf-form {
  pointer-events: none;
}

.pbf-off-note {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--color-warning-text);
}

/* Phones (and narrow columns): first and last name one under the other */
@container (max-width: 420px) {
  .pbf-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .pbf-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The divider and the note under the button (both styles) */
.pbf-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-lighter);
}

.pbf-divider::before,
.pbf-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}

.pbf-divider .pbf-icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.pbf-divider.is-plain {
  gap: 0;
}

.pbf-button.has-sub {
  flex-direction: column;
  gap: 4px;
}

.pbf-button-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pbf-button-sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.92;
}

.pbf-button-sub[hidden] {
  display: none;
}

.pbf-button-note {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  color: var(--pbf-label, var(--color-text-muted));
}

/* ======================================================================
   Form style "New (flat grey)" (page-blocks.js variant 'flat'): flat grey fields, labels above,
   a full-width square button. The look comes from five variables, filled from the element's own
   values when set (the builder's colours and sizes), so a form can change them without code.
   ====================================================================== */
/* Like the checkout form: square flat grey fields, a clear label above each, one big green
   full-width button (the site's --color-primary); a form's own settings still win */
.pbf.pbf-flat {
  --form-field-bg: var(--pbf-input-bg, #f1f3f2);
  --form-label: var(--pbf-label, var(--color-text, #1c1f1e));
  --form-accent: var(--pbf-focus, var(--pbf-btn-bg, var(--color-primary, #0e7e4e)));
  --form-button-bg: var(--pbf-btn-bg, var(--color-primary, #0e7e4e));
  --form-button-hover: var(--pbf-btn-hover, var(--color-primary-hover, #0b6b42));
  --form-radius: var(--radius);
  --form-error: var(--pbf-error, #c62828);
  --form-seam: var(--pbf-box-bg, var(--color-surface, #ffffff));
  max-width: var(--pbf-max, 640px);
  margin-left: auto;
  margin-right: auto;
  color: var(--form-label);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pbf.pbf-flat {
    --form-field-bg: var(--pbf-input-bg, #2b2f2e);
    --form-label: var(--pbf-label, #eef0ef);
  }
}

:root[data-theme="dark"] .pbf.pbf-flat {
  --form-field-bg: var(--pbf-input-bg, #2b2f2e);
  --form-label: var(--pbf-label, #eef0ef);
}

.pbf-flat .pbf-form {
  gap: var(--pbf-gap, 16px);
}

.pbf-flat .pbf-field {
  gap: 6px;
}

.pbf-flat .pbf-label {
  color: var(--form-label);
  font-size: var(--pbf-label-fs, 14px);
  font-weight: var(--pbf-label-fw, 600);
  line-height: 1.3;
}

.pbf-flat .pbf-star {
  color: var(--pbf-star, var(--form-error));
}

.pbf-flat .pbf-control {
  position: relative;
}

.pbf-flat .pbf-input,
.pbf-flat .pbf-input:focus {
  height: var(--pbf-input-h, 48px);
  margin: 0;
  padding: 0 var(--pbf-input-px, 14px);
  border: 0;
  border-radius: var(--form-radius);
  background: var(--form-field-bg);
  color: var(--pbf-input-color, var(--color-text));
  /* 16px or more always, so phones don't zoom in */
  font-size: max(16px, var(--pbf-input-fs, 16px));
}

.pbf-flat .pbf-input::placeholder {
  color: var(--pbf-ph, #8a8f8d);
}

/* Focus: a clear 2px accent ring (the outline stays for high-contrast modes) */
.pbf-flat .pbf-input:focus {
  outline: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--form-accent);
}

/* Invalid: a red underline and a red "!" inside the field, plus the message under it */
.pbf-flat .pbf-input[aria-invalid="true"] {
  padding-right: 52px;
  box-shadow: inset 0 -2px 0 var(--form-error);
}

.pbf-flat .pbf-input[aria-invalid="true"]:focus {
  box-shadow: inset 0 0 0 2px var(--form-accent), inset 0 -4px 0 var(--form-error);
}

.pbf-flat .pbf-error-mark {
  position: absolute;
  top: 50%;
  right: 16px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 0;
  background: var(--form-error);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.pbf-flat .pbf-input[aria-invalid="true"] + .pbf-error-mark {
  display: grid;
}

.pbf-flat .pbf-error,
.pbf-flat .pbf-summary {
  color: var(--form-error);
  font-size: 14px;
}

/* Two fields in one row: two rounded fields with an even gap */
.pbf-flat .pbf-row {
  column-gap: 12px;
  row-gap: var(--pbf-gap, 16px);
}

/* The consent box: a flat grey tile, the whole tile clickable, the label to the right */
.pbf-flat .pbf-consent {
  position: relative;
  gap: 4px 14px;
  padding: 14px 16px;
  border-radius: var(--form-radius);
  background: var(--form-field-bg);
  color: var(--form-label);
  font-size: 15px;
}

.pbf-flat .pbf-check {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--color-text-lighter);
  border-radius: 0;
  background: var(--color-surface, #ffffff);
  cursor: pointer;
}

.pbf-flat .pbf-check:checked {
  border-color: var(--form-accent);
  background: var(--form-accent);
}

.pbf-flat .pbf-check:checked::after {
  content: "";
  width: 6px;
  height: 11px;
  margin-top: -2px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.pbf-flat .pbf-check:focus-visible {
  outline: 2px solid var(--form-accent);
  outline-offset: 2px;
}

.pbf-flat .pbf-check[aria-invalid="true"] {
  border-color: var(--form-error);
}

.pbf-flat .pbf-consent-label {
  cursor: pointer;
}

/* The button: one big green full-width button with a bold label (like the checkout's Buy now) and
   an optional smaller line; a subtle darker green on hover */
.pbf-flat .pbf-actions {
  justify-content: stretch;
  margin-top: 4px;
}

.pbf-flat .pbf-button {
  width: 100%;
  min-height: 54px;
  padding: var(--pbf-btn-py, 14px) var(--pbf-btn-px, 20px);
  border: var(--pbf-btn-bw, 0) solid var(--pbf-btn-border, transparent);
  border-radius: 0;
  background: var(--form-button-bg);
  color: var(--pbf-btn-color, #ffffff);
  font-size: var(--pbf-btn-fs, 18px);
  font-weight: var(--pbf-btn-fw, 700);
  text-align: center;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pbf-flat .pbf-button:hover:not(:disabled) {
  background: var(--form-button-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .pbf-flat .pbf-button {
    transition: none;
  }
}

.pbf-flat .pbf-button:focus-visible {
  outline: 2px solid var(--form-accent);
  outline-offset: 3px;
}

/* Disabled (not while sending): clearly greyed */
.pbf-flat .pbf-button:disabled {
  opacity: 1;
  background: #9aa19f;
  color: #f4f4f4;
  cursor: not-allowed;
}

.pbf-flat .pbf-button[aria-busy="true"] {
  background: var(--form-button-bg);
  color: var(--pbf-btn-color, #ffffff);
  opacity: 0.85;
  cursor: progress;
}

.pbf-flat .pbf-button .pbf-spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.pbf-flat .pbf-button-sub {
  font-size: 13px;
  font-weight: 500;
}

.pbf-flat .pbf-button-note {
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
}

.pbf-flat .pbf-divider .pbf-icon {
  color: var(--form-label);
  opacity: 0.6;
}

/* Phones: two-field rows stack (each field full width, see .pbf-row); a slightly taller button */
@media (max-width: 480px) {
  .pbf-flat .pbf-button {
    min-height: 56px;
  }
}

/* ---------- The admin site's own sign-in and set-password pages (admin-login.html,
   admin-update-password.html) and, on the member site, the note for an admin account ---------- */
.admin-login-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
}

.admin-login-kicker {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 8px;
  border-radius: 0;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-login-card h1 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.25;
}

.admin-login-card .btn.btn-primary {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.admin-login-card .form-message[hidden],
.admin-login-card section[hidden],
.admin-login-card form[hidden] {
  display: none;
}

.admin-login-links {
  margin: 16px 0 0;
  text-align: center;
}

.admin-site-note {
  box-sizing: border-box;
  max-width: var(--card-width, 768px);
  margin: 12px auto 0;
  padding: 8px 12px;
  border-radius: 0;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 13px;
}

@media (max-width: 600px) {
  .admin-site-note {
    margin: 8px 16px 0;
  }
}

/* ---------- Admin sign-in (admin.js showAdminSignIn) ---------- */
.admin-signin {
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 56px 16px;
}

.admin-signin-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.admin-signin-card h1 {
  margin: 0;
  font-size: 24px;
}

.admin-signin-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-signin-links {
  margin: 0;
  font-size: 14px;
}

/* ---------- Broadcasts (admin-broadcasts.js) ---------- */
.admin-layout .bc-table {
  min-width: 900px;
}

.admin-layout .bc-table td {
  vertical-align: middle;
}

.admin-layout .bc-name {
  font-weight: 600;
  text-align: left;
}

.admin-layout .bc-subject {
  display: block;
  margin-top: 2px;
}

.admin-layout .bc-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
}

.admin-layout .bc-cap .field-label {
  margin: 0;
}

.admin-layout .bc-editor {
  max-width: 960px;
}

.admin-layout .bc-rules {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.admin-layout .bc-rules .cond-list {
  width: 100%;
}

.admin-layout .bc-rules .btn {
  width: auto;
}

.admin-layout .bc-sub {
  margin: 8px 0 0;
  font-size: 14px;
}

.admin-layout .bc-count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .bc-count {
  margin: 0;
  font-weight: 700;
}

.admin-layout .bc-preview-list,
.admin-layout .bc-problem-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
}

.admin-layout .bc-preview-list:empty {
  display: none;
}

.admin-layout .bc-email-summary p {
  margin: 0 0 4px;
}

.admin-layout .bc-later {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .bc-later[hidden],
.admin-layout .bc-fallback[hidden] {
  display: none;
}

.admin-layout .bc-when-words {
  margin: 0;
  font-weight: 600;
}

.admin-layout .bc-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0 0 16px;
}

.admin-layout .bc-facts dt {
  font-weight: 600;
}

.admin-layout .bc-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-layout .bc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.admin-layout .bc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .bc-stat-value {
  font-size: 22px;
  font-weight: 700;
}

.admin-layout .bc-stat-label {
  font-size: 13px;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .admin-layout .bc-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-layout .bc-table {
    min-width: 0;
  }
}

/* The unsubscribe page (unsubscribe.html) */
.unsub-page {
  background: var(--color-bg);
}

.unsub-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 16px;
}

.unsub-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.unsub-card h1 {
  margin: 0;
  font-size: 24px;
}

.unsub-card p {
  margin: 0;
}

.unsub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.unsub-actions .btn {
  width: auto;
}

.unsub-actions .btn[hidden] {
  display: none;
}

.unsub-home {
  font-size: 14px;
}

/* ---------- Contact fields (admin.js renderContactFields, memberFieldsFact) ---------- */
.admin-layout .cf-table td {
  vertical-align: middle;
}

.admin-layout .cf-table code {
  font-size: 13px;
}

.admin-layout .cf-form {
  margin: 0 0 16px;
}

.admin-layout .cf-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.admin-layout .cond-inline-label {
  align-self: center;
}

.admin-layout .mv-field-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .mv-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.admin-layout .mv-field .input-field {
  width: auto;
  min-width: 140px;
  max-width: 100%;
}

.admin-layout .mv-field-name {
  font-weight: 600;
}

@media (max-width: 640px) {
  .admin-layout .cf-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Admin → Forms (admin-forms.js) ---------- */
.admin-layout .forms-table {
  min-width: 760px;
}

.admin-layout .forms-table td {
  vertical-align: middle;
}

.admin-layout .forms-name {
  font-weight: 600;
  text-align: left;
}

.admin-layout .forms-action-line {
  display: block;
  margin-top: 2px;
}

.admin-layout .form-ed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 24px;
  align-items: start;
}

.admin-layout .form-ed-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.admin-layout .form-ed-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  min-width: 0;
}

.admin-layout .form-ed-section > legend {
  padding: 0 6px;
}

.admin-layout .form-ed-section [hidden] {
  display: none;
}

.admin-layout .form-ed-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-layout .form-ed-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .form-ed-field.is-off .form-ed-field-texts {
  opacity: 0.55;
}

.admin-layout .form-ed-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.admin-layout .form-ed-field-head strong {
  min-width: 110px;
}

.admin-layout .form-ed-move {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.admin-layout .form-ed-field-texts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-layout .form-ed-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .form-ed-actions .input-field {
  width: auto;
  min-width: 200px;
  max-width: 100%;
}

/* The form's tag: the shared tag picker (its list opens under the field) */
.admin-layout .form-ed-tag-pick {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 420px;
}

.admin-layout .form-ed-tag-pick .tag-combo-input {
  width: 100%;
}

.admin-layout .form-ed-radios {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-layout .form-ed-go {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-layout .form-ed-go[hidden] {
  display: none;
}

.admin-layout .form-ed-after-note {
  margin: 0;
}

.admin-layout .form-ed-sentence {
  margin: 0;
  font-weight: 600;
}

.admin-layout .form-ed-sentence.is-error,
.admin-layout .form-ed-status.is-error {
  color: var(--color-danger-text);
}

.admin-layout .form-ed-side {
  position: sticky;
  top: calc(var(--admin-nav-height, 64px) + 16px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.admin-layout .form-ed-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-layout .form-ed-side-head .admin-subtitle {
  margin: 0;
}

.admin-layout .form-ed-preview {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  transition: max-width 0.2s ease;
}

.admin-layout .form-ed-preview.is-mobile {
  max-width: 360px;
}

.admin-layout .mv-form-source .field-hint {
  display: inline;
}

/* Page Builder: the Form element's settings */
.admin-layout .pb-form-style {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-layout .pb-form-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.admin-layout .pb-form-presets .btn {
  width: auto;
}

.admin-layout .pb-form-group,
.admin-layout .pb-form-subgroup {
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.admin-layout .pb-form-group > summary,
.admin-layout .pb-form-subgroup > summary {
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
}

.admin-layout .pb-form-group > .pb-grid,
.admin-layout .pb-form-subgroup > .pb-grid {
  padding: 4px 12px 12px;
}

.admin-layout .pb-form-subgroup {
  grid-column: 1 / -1;
  background: var(--color-surface);
}

.admin-layout .pb-form-color {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-layout .pb-theme-quick {
  flex-wrap: wrap;
}

.admin-layout .pb-form-warnings p {
  margin: 0;
}

@media (max-width: 960px) {
  .admin-layout .form-ed-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-layout .form-ed-side {
    position: static;
  }
}

@media (max-width: 560px) {
  .admin-layout .form-ed-field-texts {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-layout .forms-table {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .form-ed-preview {
    transition: none;
  }
}

/* ============================================
   My Map (map.html, map.js): the member's courses as a map. Each state has a colour AND a shape:
   done = filled + check, next up = thick ring + play + "Next up", open = outline + play,
   locked = grey + dashed + lock, opens later = grey + dashed + clock.
   ============================================ */
:root {
  --map-node-bg: var(--color-surface);
  --map-line: rgba(3, 3, 3, 0.22);
  --map-done: #1f7a45;
  --map-done-text: #ffffff;
  --map-next: #0E7E4E;
  --map-next-soft: rgba(14, 126, 78, 0.1);
  --map-ring-track: rgba(3, 3, 3, 0.1);
  --map-locked-bg: #eef1f4;
  --map-locked-line: #9aa6b2;
  --map-locked-text: #5b6570;
  --map-me-bg: #0E7E4E;
  --map-me-text: #ffffff;
  --map-canvas-bg: rgba(3, 3, 3, 0.02);
  --map-dot: rgba(3, 3, 3, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --map-line: rgba(237, 239, 238, 0.25);
    --map-done: #3fbf74;
    --map-done-text: #0b1f13;
    --map-next: #3ECF8E;
    --map-next-soft: rgba(62, 207, 142, 0.14);
    --map-ring-track: rgba(237, 239, 238, 0.12);
    --map-locked-bg: #1d2329;
    --map-locked-line: #5d6b79;
    --map-locked-text: #a9b4bf;
    --map-me-bg: #3ECF8E;
    --map-me-text: #0b1f13;
    --map-canvas-bg: rgba(237, 239, 238, 0.02);
    --map-dot: rgba(237, 239, 238, 0.07);
  }
}

:root[data-theme="dark"] {
  --map-line: rgba(237, 239, 238, 0.25);
  --map-done: #3fbf74;
  --map-done-text: #0b1f13;
  --map-next: #3ECF8E;
  --map-next-soft: rgba(62, 207, 142, 0.14);
  --map-ring-track: rgba(237, 239, 238, 0.12);
  --map-locked-bg: #1d2329;
  --map-locked-line: #5d6b79;
  --map-locked-text: #a9b4bf;
  --map-me-bg: #3ECF8E;
  --map-me-text: #0b1f13;
  --map-canvas-bg: rgba(237, 239, 238, 0.02);
  --map-dot: rgba(237, 239, 238, 0.07);
}

.card.map-card {
  max-width: min(1200px, calc(100vw - 32px));
}

.map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.map-head h2 {
  margin-bottom: 4px;
}

/* Live refresh (realtime-refresh.js): "Updated" for a moment, new items fade in, changed ones glow
   once, removed ones fade out; all still with reduced motion */
.map-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.map-updated {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-text);
  opacity: 0;
}

.map-updated[hidden] {
  display: none;
}

.map-updated.is-on {
  animation: map-updated 1.8s ease-out forwards;
}

@keyframes map-updated {
  0% { opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

.map-node.is-new,
.map-tree li.is-new {
  animation: map-fade-in 0.45s ease-out;
}

.map-node.is-changed .map-shape,
.map-tree li.is-changed > .map-tree-toggle,
.map-tree li.is-changed > .map-tree-lesson {
  animation: map-changed 0.9s ease-out;
}

.map-node.is-leaving,
.map-tree li.is-leaving {
  opacity: 0;
  transition: opacity 0.28s ease-in;
}

@keyframes map-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes map-changed {
  0% { opacity: 0.35; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .map-updated.is-on {
    animation: none;
    opacity: 1;
  }

  .map-node.is-new,
  .map-tree li.is-new,
  .map-node.is-changed .map-shape,
  .map-tree li.is-changed > .map-tree-toggle,
  .map-tree li.is-changed > .map-tree-lesson {
    animation: none;
  }

  .map-node.is-leaving,
  .map-tree li.is-leaving {
    transition: none;
  }
}

.map-intro {
  margin-bottom: 16px;
}

.btn.map-continue {
  width: auto;
  flex: none;
}

.map-continue[hidden],
.map-toolbar[hidden],
.map-zoom[hidden],
.map-status[hidden],
.map-detail[hidden],
.map-canvas[hidden],
.map-list[hidden],
#map-list-toggle[hidden],
#map-retry[hidden] {
  display: none;
}

.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.map-controls,
.map-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-controls {
  gap: 12px;
}

.map-zoom .btn.btn-sm {
  min-width: 36px;
  justify-content: center;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.map-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-key::before {
  content: "";
  width: 18px;
  height: 10px;
  border-radius: 0;
  border: 1.5px solid var(--color-border-strong);
  background: var(--map-node-bg);
}

.map-key-done::before {
  background: var(--map-done);
  border-color: var(--map-done);
}

.map-key-next::before {
  background: var(--map-next-soft);
  border: 2.5px solid var(--map-next);
}

.map-key-locked::before {
  background: var(--map-locked-bg);
  border: 1.5px dashed var(--map-locked-line);
}

.map-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 16px;
  text-align: center;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
}

.map-status-text {
  margin: 0;
}

.map-detail {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-muted);
  margin: 0 0 10px;
  min-height: 20px;
}

/* Full screen (map.js setupFullscreen): the map card fills the screen, the canvas takes the room
   left under the title and controls; the overlay (no Fullscreen API) sits above everything */
.map-card.is-fullscreen {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--color-surface);
  color: var(--color-text);
  overflow: auto;
}

.map-card.is-fullscreen.is-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  height: 100vh;
  height: 100dvh;
}

.map-card.is-fullscreen .map-canvas {
  flex: 1 1 auto;
  height: auto;
  min-height: 240px;
}

.map-card.is-fullscreen .map-intro {
  margin-bottom: 8px;
}

.map-card:fullscreen::backdrop {
  background: var(--color-surface);
}

body.map-fullscreen-lock {
  overflow: hidden;
}

/* The canvas (dvh: the visible height on phones while the browser bars show; vh where unsupported) */
.map-canvas {
  position: relative;
  height: min(70vh, 640px);
  height: min(70dvh, 640px);
  min-height: 360px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--map-canvas-bg);
  background-image: radial-gradient(var(--map-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  overflow: hidden;
}

.map-svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  font-family: var(--font-body);
}

.map-svg.is-panning {
  cursor: grabbing;
}

.map-link {
  fill: none;
  stroke: var(--map-line);
  stroke-width: 2;
}

.map-link.is-quiet {
  stroke-dasharray: 5 5;
}

.map-link-timeline {
  stroke-width: 2.5;
}

.map-node {
  cursor: pointer;
  outline: none;
}

.map-shape {
  fill: var(--map-node-bg);
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
}

.map-node:hover .map-shape {
  stroke: var(--color-text-lighter);
}

.map-node:focus-visible .map-shape,
.map-node:focus-visible .map-me-shape {
  stroke: var(--color-link-focus);
  stroke-width: 3;
}

.map-title {
  fill: var(--color-text);
  font-size: 14px;
  font-weight: 600;
}

.map-sub {
  fill: var(--color-text-muted);
  font-size: 12px;
}

.map-chevron,
.map-mark,
.map-icon,
.map-ring-icon {
  color: var(--color-text-muted);
  pointer-events: none;
}

.map-ring-track {
  fill: none;
  stroke: var(--map-ring-track);
  stroke-width: 5;
}

.map-ring-fill {
  fill: none;
  stroke: var(--map-done);
  stroke-width: 5;
  stroke-linecap: round;
}

.map-course.is-open .map-ring-fill,
.map-course.is-waiting .map-ring-fill,
.map-course.is-locked .map-ring-fill,
.map-course.is-empty .map-ring-fill {
  stroke-linecap: butt;
}

.map-ring-text {
  fill: var(--color-text);
  font-size: 11px;
  font-weight: 600;
}

.map-bar-track {
  fill: var(--map-ring-track);
}

.map-bar-fill {
  fill: var(--map-done);
}

/* Completed: a solid edge and a check */
.map-course.is-completed .map-shape,
.map-module.is-completed .map-shape {
  stroke: var(--map-done);
  stroke-width: 2;
}

.map-course.is-completed .map-ring-icon,
.map-module.is-completed .map-mark {
  color: var(--map-done);
}

/* Opens later / locked: grey, dashed */
.map-course.is-waiting .map-shape,
.map-course.is-locked .map-shape,
.map-module.is-waiting .map-shape,
.map-module.is-locked .map-shape {
  fill: var(--map-locked-bg);
  stroke: var(--map-locked-line);
  stroke-dasharray: 6 4;
}

.map-course.is-waiting .map-title,
.map-course.is-locked .map-title,
.map-module.is-waiting .map-title,
.map-module.is-locked .map-title,
.map-course.is-waiting .map-sub,
.map-course.is-locked .map-sub,
.map-module.is-waiting .map-sub,
.map-module.is-locked .map-sub {
  fill: var(--map-locked-text);
}

/* Lesson pills */
.map-lesson-title {
  fill: var(--color-text);
  font-size: 12.5px;
  font-weight: 500;
}

.map-lesson.is-done .map-shape {
  fill: var(--map-done);
  stroke: var(--map-done);
}

.map-lesson.is-done .map-lesson-title,
.map-lesson.is-done .map-icon {
  fill: var(--map-done-text);
  color: var(--map-done-text);
}

.map-lesson.is-next .map-shape {
  fill: var(--map-next-soft);
  stroke: var(--map-next);
  stroke-width: 3;
}

.map-lesson.is-next .map-icon {
  color: var(--map-next);
}

.map-lesson.is-next .map-lesson-title {
  font-weight: 700;
}

.map-next-tag {
  fill: var(--color-accent-text);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.map-lesson.is-locked {
  cursor: help;
}

.map-lesson.is-locked .map-shape {
  fill: var(--map-locked-bg);
  stroke: var(--map-locked-line);
  stroke-dasharray: 4 3;
}

.map-lesson.is-locked .map-lesson-title,
.map-lesson.is-locked .map-icon {
  fill: var(--map-locked-text);
  color: var(--map-locked-text);
}

/* You, in the middle */
.map-me-shape {
  fill: var(--map-me-bg);
  stroke: var(--map-me-bg);
  stroke-width: 2;
}

.map-me-initials {
  fill: var(--map-me-text);
  font-size: 18px;
  font-weight: 700;
}

.map-me-name {
  fill: var(--color-text);
  font-size: 13px;
  font-weight: 600;
}

/* "Continue": a ring that pulses around the next lesson (still with reduced motion) */
.map-pulse {
  fill: none;
  stroke: var(--map-next);
  stroke-width: 2.5;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-pulse 1.8s ease-out infinite;
}

@keyframes map-pulse {
  0% { opacity: 0.9; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .map-pulse {
    animation: none;
    opacity: 0.9;
    stroke-dasharray: 6 4;
  }
}

/* The list: phones, "List view" and screen readers */
.map-list.is-shown {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
}

.map-tree,
.map-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.map-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-tree-modules,
.map-tree-lessons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 2px 14px !important;
  padding-left: 12px !important;
  border-left: 2px solid var(--map-line);
}

.map-tree-toggle,
.map-tree-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--color-text);
  background: var(--map-node-bg);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  text-decoration: none;
}

.map-tree-toggle:focus-visible,
.map-tree-lesson:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.map-tree-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.map-tree-title {
  font-weight: 600;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.map-tree-sub {
  font-size: 12px;
  color: var(--color-text-muted);
}

.map-tree-icon {
  flex: none;
  color: var(--color-text-muted);
}

.map-tree-pct {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.map-tree-bar {
  flex: none;
  width: 56px;
  height: 6px;
  border-radius: 0;
  background: var(--map-ring-track);
  overflow: hidden;
}

.map-tree-bar-fill {
  display: block;
  height: 100%;
  background: var(--map-done);
}

.map-tree-toggle.is-completed {
  border-color: var(--map-done);
}

.map-tree-toggle.is-completed .map-tree-icon {
  color: var(--map-done);
}

.map-tree-toggle.is-waiting,
.map-tree-toggle.is-locked,
.map-tree-lesson.is-locked {
  background: var(--map-locked-bg);
  border-style: dashed;
  border-color: var(--map-locked-line);
  color: var(--map-locked-text);
}

.map-tree-lesson {
  border-radius: 0;
  padding: 7px 14px;
}

.map-tree-lesson .map-tree-title {
  font-weight: 500;
  font-size: 13px;
}

.map-tree-lesson.is-done {
  background: var(--map-done);
  border-color: var(--map-done);
  color: var(--map-done-text);
}

.map-tree-lesson.is-done .map-tree-sub,
.map-tree-lesson.is-done .map-tree-icon {
  color: var(--map-done-text);
}

.map-tree-lesson.is-next {
  background: var(--map-next-soft);
  border: 3px solid var(--map-next);
}

.map-tree-lesson.is-next .map-tree-title {
  font-weight: 700;
}

.map-tree-lesson.is-next .map-tree-icon {
  color: var(--map-next);
}

.map-tree-lesson.is-locked {
  cursor: default;
}

.map-tree-lesson.is-locked .map-tree-sub,
.map-tree-lesson.is-locked .map-tree-icon {
  color: var(--map-locked-text);
}

.map-tree-empty {
  margin: 6px 0 0 26px;
  font-size: 13px;
}

/* Library: the "View map" link beside "Your Library" */
.library-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.library-title-row h3 {
  margin-bottom: 0;
}

.btn.library-map-link {
  width: auto;
}

/* The courses view (the member's start page): "Map view" and "Bookmarks" in one small row that
   wraps on phones (each keeps its full width, never squashed) */
.library-courses-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.library-courses-tools .btn {
  width: auto;
  flex: 0 0 auto;
  border-radius: 0;
}

@media (max-width: 600px) {
  .library-courses-tools .btn {
    min-height: 44px;
  }
}

/* ----- Phones (700px and narrower), member site: My Map leaves the top bar and appears in the
   Account menu and as a card at the top of the Library; the map's controls become a tidy grid.
   Wider screens are unchanged (the two new items stay hidden there). ----- */
.account-item.account-item-map,
.account-item.account-item-library,
.library-tile.library-map-card {
  display: none;
}

/* Member top bar on EVERY screen (the phone's navigation; site-bar.js): no tabs, only the search
   and Account (right), 44px to tap; Library, My Map, Bookmarks and Message Ben are items in the
   Account dropdown */
.site-nav .tab[data-site-tab="map"],
.site-nav .tab[data-site-tab="library"] {
  display: none;
}

.site-bar-end {
  gap: 8px;
}

.site-bar-end .btn.account-toggle {
  min-width: 44px;
  min-height: 44px;
}

.account-item.account-item-map:not([hidden]),
.account-item.account-item-library:not([hidden]) {
  display: flex;
}

.account-item.account-item-map[aria-current="page"],
.account-item.account-item-library[aria-current="page"] {
  font-weight: 600;
  background: var(--color-surface-alt);
}

/* Wide screens: the bar and the breadcrumb band span the window, their content lines up with the
   page content (the 1400px card, centred); the Account dropdown opens under its button */
body.has-site-bar > .site-bar,
body.has-site-bar .breadcrumb-bar-inner {
  padding-left: max(var(--nav-pad-x), calc((100% - 1400px) / 2));
  padding-right: max(var(--nav-pad-x), calc((100% - 1400px) / 2));
}

@media (max-width: 700px) {

  /* Library: My Map as a full-width card under the title (the small "View map" button goes) */
  .library-tile.library-map-card {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
  }

  .btn.library-map-link {
    display: none;
  }

  /* My Map on phones: ONE compact 40px toolbar row right under the title: "Continue here" (map.js
     moves it into the toolbar) and icon-only square buttons − + Fit, List view, Full screen; 6px
     gaps, one flat colour with a thin border. The sentence under the title is hidden. */
  .map-intro {
    display: none;
  }

  .map-head {
    gap: 6px;
  }

  .map-head h2 {
    margin-bottom: 0;
  }

  .map-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    margin: 8px 0;
  }

  .map-toolbar .map-legend {
    display: none;
  }

  .map-toolbar .btn.map-continue {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .map-toolbar .map-controls {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: auto;
    margin-left: auto;
  }

  .map-toolbar .map-controls .map-zoom {
    display: flex;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
  }

  .map-toolbar .map-controls .map-zoom[hidden] {
    display: none;
  }

  .map-toolbar .map-controls .btn.btn-sm {
    flex: none;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 0;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
  }

  .map-toolbar .map-controls #map-fit {
    font-size: 13px;
  }

  /* List view and Full screen: the icon only (the name is their aria-label and tooltip) */
  .map-toolbar .map-controls #map-list-toggle,
  .map-toolbar .map-controls #map-fullscreen {
    font-size: 0;
  }

  .map-toolbar .map-controls #map-list-toggle .btn-icon-svg,
  .map-toolbar .map-controls #map-fullscreen .btn-icon-svg {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .map-detail {
    margin-bottom: 6px;
  }

  /* The map fills the rest of the screen (the visible height on phones; vh where dvh isn't known) */
  .map-canvas {
    height: calc(100vh - 200px);
    height: calc(100dvh - 200px);
    min-height: 320px;
  }

  /* Room under the map for the message button (48px, bottom right), so it never covers the
     toolbar or node text */
  body[data-site-tab="map"] .card.map-card {
    padding-bottom: 68px;
  }

  body[data-site-tab="map"] .card.map-card.is-fullscreen {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  body[data-site-tab="map"] .mmsg-fab {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
  }

  body[data-site-tab="map"] .mmsg-fab .mmsg-label {
    display: none;
  }
}

/* Very narrow phones: "Continue here" on its own full-width row, the icon buttons together below */
@media (max-width: 360px) {
  .map-toolbar {
    flex-wrap: wrap;
  }

  .map-toolbar .btn.map-continue {
    flex: 1 0 100%;
  }

  .map-toolbar .map-controls {
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  .card.map-card {
    padding: 12px 12px;
  }

  .map-legend {
    display: none;
  }
}

/* Touch screens wider than the phone layout: every map control at least 44px to tap (phones use
   the compact 40px toolbar above) */
@media (pointer: coarse) and (min-width: 701px) {
  .map-controls .btn.btn-sm,
  .map-zoom .btn.btn-sm {
    min-height: 44px;
    min-width: 44px;
  }
}

@media (pointer: coarse) {

  .map-tree-toggle,
  .map-tree-lesson {
    min-height: 44px;
  }
}

/* "Drag to move · pinch to zoom": first use on a touch screen, gone at the first touch */
.map-touch-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 12px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
}

/* Full screen on a phone (iPhone Safari: the full-window overlay): clear of the notch and the home
   bar; the title and controls stay at the top while the map fills the rest */
.map-card.is-fullscreen.is-overlay {
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  overscroll-behavior: contain;
}

.map-card.is-fullscreen .map-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-bottom: 8px;
  padding: 4px 0;
  background: var(--color-surface);
}

@media (max-width: 600px) {
  .map-card.is-fullscreen .map-intro,
  .map-card.is-fullscreen .map-head .map-continue {
    display: none;
  }
}

body.map-fullscreen-lock {
  overscroll-behavior: none;
}

/* ============================================
   Admin "To do" widget (admin-todo.js): floating on every admin page, above the page itself but
   under the side panels (40), drawers (70), the top bar (90) and every dialog (1000+). The box is
   only as big as what shows, so the page around it keeps every click.
   ============================================ */
.todo-w {
  position: fixed;
  left: auto;
  top: auto;
  right: 16px;
  bottom: 16px;
  z-index: 25;
  font-family: var(--font-body);
  color: var(--color-text);
}

.todo-w[style*="left"] {
  right: auto;
  bottom: auto;
}

.todo-w.is-moving,
.todo-w.is-moving * {
  user-select: none;
  -webkit-user-select: none;
}

.todo-fab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 0;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  touch-action: none;
}

.todo-fab:hover {
  background: var(--color-secondary-hover);
}

.todo-fab:focus-visible,
.todo-w button:focus-visible,
.todo-w .todo-text:focus-visible,
.todo-w input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.todo-fab[hidden],
.todo-card[hidden],
.todo-badge[hidden],
.todo-note[hidden],
.todo-empty[hidden],
.todo-done-part[hidden],
.todo-list[hidden],
.todo-clear[hidden] {
  display: none;
}

.todo-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 0;
  background: var(--color-danger);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.todo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 320px;
  min-width: 260px;
  max-width: min(480px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.todo-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  cursor: ew-resize;
  touch-action: none;
  z-index: 1;
}

.todo-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  cursor: move;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.todo-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.todo-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 0;
  background: var(--color-border);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: var(--color-text-muted);
}

.todo-head-space {
  flex: 1;
}

.todo-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.todo-icon-btn:hover:not(:disabled) {
  background: var(--color-border);
  color: var(--color-text);
}

.todo-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.todo-add {
  display: flex;
  gap: 6px;
  padding: 10px 10px 6px;
}

.todo-input,
.todo-edit {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 13.5px;
}

.todo-edit {
  height: 28px;
  padding: 2px 8px;
}

.todo-where {
  flex: none;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}

.todo-where:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.todo-note {
  margin: 0 10px 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-warning-text);
}

.todo-scroll {
  flex: 1;
  min-height: 0;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 6px 10px;
}

.todo-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.todo-empty {
  margin: 6px 8px;
  font-size: 12.5px;
  color: var(--color-text-lighter);
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 3px 4px;
  border-radius: 0;
}

.todo-item:hover,
.todo-item:focus-within {
  background: var(--color-surface-alt);
}

.todo-item.is-dragging {
  opacity: 0.45;
}

.todo-grip {
  display: inline-flex;
  flex: none;
  padding: 4px 1px;
  color: var(--color-text-lighter);
  cursor: grab;
  touch-action: none;
}

.todo-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.todo-text {
  flex: 1;
  min-width: 0;
  padding: 3px 4px;
  border-radius: 0;
  font-size: 13.5px;
  line-height: 19px;
  overflow-wrap: anywhere;
  cursor: text;
}

.todo-item.is-done .todo-text {
  text-decoration: line-through;
  color: var(--color-text-lighter);
}

.todo-tools {
  display: inline-flex;
  flex: none;
  gap: 1px;
  opacity: 0;
}

.todo-item:hover .todo-tools,
.todo-item:focus-within .todo-tools {
  opacity: 1;
}

.todo-delete:hover:not(:disabled) {
  color: var(--color-danger-text);
}

/* Touch screens have no hover: the tools always show */
@media (hover: none) {
  .todo-tools {
    opacity: 1;
  }
}

.todo-drop-line {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  border-radius: 0;
  background: var(--color-link-focus);
  pointer-events: none;
  opacity: 0;
}

.todo-drop-line.is-shown {
  opacity: 1;
}

.todo-done-part {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.todo-done-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.todo-done-toggle svg {
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}

.todo-done-part.is-folded .todo-done-toggle svg {
  transform: none;
}

.todo-clear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 0;
  font-size: 12px;
}

.todo-clear-ask {
  color: var(--color-text-muted);
}

.todo-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.todo-link-danger {
  color: var(--color-danger-text);
}

@media (prefers-reduced-motion: reduce) {
  .todo-done-toggle svg {
    transition: none;
  }
}

/* Phones: the button in the corner, the list as a bottom sheet (no dragging) */
.todo-w.is-sheet {
  left: auto !important;
  top: auto !important;
  right: 16px;
  bottom: 16px;
}

.todo-w.is-sheet .todo-card {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: 80vh;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.todo-w.is-sheet .todo-head {
  cursor: default;
}

.todo-w.is-sheet .todo-resize {
  display: none;
}

.todo-w.is-sheet .todo-scroll {
  max-height: none;
}

/* ============================================
   Admin boxes: flat and light. The large container boxes of the admin (forms, cards, panels'
   sections, list items that are boxes) have no border, square corners and no shadow, only a barely
   visible tint. A box inside another box is flat (no tint), so tints never stack. This set of rules
   comes last, so it wins over each box's own rule without changing it. Admin only (.admin-layout).
   Not changed on purpose: buttons, inputs, selects, checkboxes, tags, pills and badges, tabs,
   tables, dropdown menus, dialogs, side panels and drawers, notices, the automation canvas (step
   cards, nodes, run diagrams), the page builder canvas, email previews and the SMS bubbles.
   ============================================ */
/* The box look for the whole product (admin and member pages), set once:
     --box-bg        a box on the page (about 3% darker in light mode, 4-5% lighter in dark mode)
     --box-bg-inner  a box inside a tinted box: one step lighter, never a second darker tint
     --box-bg-hover  a box under the pointer
     --box-accent    the accent colour (the 3px "Next up" bar, done checks)
     --box-done-bg / --box-next-bg  soft accent tints for done and next-up rows */
:root {
  --box-bg: rgba(3, 3, 3, 0.03);
  --box-bg-inner: rgba(255, 255, 255, 0.8);
  --box-bg-hover: rgba(3, 3, 3, 0.055);
  --box-accent: #0E7E4E;
  --box-done-bg: rgba(14, 126, 78, 0.08);
  --box-next-bg: rgba(14, 126, 78, 0.15);
  --admin-card-bg: var(--box-bg);
  --admin-card-bg-alt: rgba(3, 3, 3, 0.05);
  --admin-card-gap: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --box-bg: rgba(237, 239, 238, 0.045);
    --box-bg-inner: rgba(237, 239, 238, 0.06);
    --box-bg-hover: rgba(237, 239, 238, 0.1);
    --box-accent: #3ECF8E;
    --box-done-bg: rgba(62, 207, 142, 0.1);
    --box-next-bg: rgba(62, 207, 142, 0.18);
    --admin-card-bg-alt: rgba(237, 239, 238, 0.065);
  }
}

:root[data-theme="dark"] {
  --box-bg: rgba(237, 239, 238, 0.045);
  --box-bg-inner: rgba(237, 239, 238, 0.06);
  --box-bg-hover: rgba(237, 239, 238, 0.1);
  --box-accent: #3ECF8E;
  --box-done-bg: rgba(62, 207, 142, 0.1);
  --box-next-bg: rgba(62, 207, 142, 0.18);
  --admin-card-bg-alt: rgba(237, 239, 238, 0.065);
}

.admin-layout :is(
  .admin-form, .admin-card, .member-filter-bar, .member-filter-card,
  .member-course-card, .member-course-order, .member-programs, .cm-add,
  .activity-item, .mv-run-flow, .run-flow-wrap, .run-log-item,
  .webhook-item, .trigger-row, .remove-all-keep, .timing-details, .email-schedule,
  .course-import, .lesson-resource-row, .access-email-card, .form-ed-section,
  .pb-card, .pb-list-item-row,
  .vimeo-import-showcase, .vimeo-multi-section, .vimeo-import-row, .vimeo-sync-item, .vimeo-sync-log-box,
  .link-convert-item, .link-convert-nolinks
) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  background: var(--admin-card-bg);
}

/* A box inside a box: flat, so the tints never stack */
.admin-layout :is(
  .admin-form, .admin-card, .member-filter-bar, .member-filter-card,
  .member-course-card, .member-programs, .cm-add, .mv-run-flow, .run-flow-wrap,
  .trigger-row, .timing-details, .email-schedule, .course-import, .access-email-card, .form-ed-section,
  .pb-card, .vimeo-import-showcase, .vimeo-multi-section, .vimeo-sync-log-box
) :is(
  .admin-form, .admin-card, .member-filter-card, .member-course-order, .member-programs, .cm-add,
  .activity-item, .mv-run-flow, .run-flow-wrap, .run-log-item, .webhook-item, .trigger-row,
  .remove-all-keep, .timing-details, .email-schedule, .lesson-resource-row, .access-email-card,
  .form-ed-section, .pb-card, .pb-list-item-row, .vimeo-import-row, .vimeo-sync-item,
  .vimeo-sync-log-box, .link-convert-item, .link-convert-nolinks
) {
  background: transparent;
}

/* States that used a border to stand out: a slightly different tint, or a square 3px bar on the
   left edge (the same language as "Next up") */
.admin-layout .member-course-card.is-paused,
.admin-layout .webhook-item.is-ours {
  background: var(--admin-card-bg-alt);
}

.admin-layout .run-log-item.is-next {
  border-left: 3px solid var(--box-accent);
  background: var(--box-next-bg);
}

.admin-layout .run-log-item.has-error,
.admin-layout .vimeo-multi-section.has-problem {
  border-left: 3px solid var(--color-danger);
  background: var(--color-danger-soft);
}

.admin-layout .pb-list-item-row.has-warning {
  border-left: 3px solid var(--color-danger);
}

.admin-layout .vimeo-import-showcase:hover {
  background: var(--box-bg-hover);
}

.admin-layout .vimeo-import-showcase.is-selected {
  border-left: 3px solid var(--box-accent);
  box-shadow: none;
  background: var(--box-next-bg);
}

/* Lighter: less padding where it was generous, smaller gaps between boxes */
.admin-layout .admin-form {
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* A form that is itself a full-window panel (the Edit lesson screen, #lesson-form): the card look
   above (a see-through tint, less padding) must not replace the panel's own solid page background
   and gutters, or the Lessons list shows through. Same as every other .admin-drawer. */
.admin-layout .admin-form.admin-drawer {
  margin: 0;
  padding: 0 var(--panel-gutter) 40px;
  background: var(--color-bg);
}

@media (max-width: 700px) {
  .admin-layout .admin-form.admin-drawer {
    padding-bottom: 96px; /* room for the action bar */
  }
}

.admin-layout .member-course-list,
.admin-layout .access-email-cards {
  gap: var(--admin-card-gap);
}

.admin-layout .member-course-order {
  padding: 0;
  margin-bottom: 8px;
}

/* A fieldset box's legend no longer sits on a border line */
.admin-layout .form-ed-section > legend {
  padding: 0;
}

/* The To do widget floats on the page: square and borderless too, but opaque with its soft shadow */
.todo-card {
  border: 0;
  border-radius: 0;
}

/* ============================================
   Member pages: the same flat look. body[data-site-tab] = Library, course, lesson, profile and My Map
   only; checkout, Privacy, Terms, sms-optin and the other pages don't have it and stay as they are.
   The page box is tinted; boxes inside it are one step lighter; middle layers are flat.
   ============================================ */
body[data-site-tab] .card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--box-bg);
  padding: 24px;
}

/* Middle layers inside the page box: flat (no tint, no border), so tints never stack */
body[data-site-tab] :is(.courses-box, .map-list.is-shown, .map-status, .map-canvas) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}

body[data-site-tab] :is(.courses-box, .map-list.is-shown) {
  padding: 0;
}

body[data-site-tab] .map-status {
  background-color: var(--box-bg-inner);
}

/* Rows and blocks: flat, square, one step lighter than the page box; hover a little stronger */
body[data-site-tab] :is(
  .course-item, .library-tile, .library-row, .library-empty, .course-module-toggle,
  .lesson-complete-bar, .lock-explainer, .map-tree-toggle, .map-tree-lesson
) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--box-bg-inner);
}

body[data-site-tab] :is(.course-item, .library-tile, .library-row, .course-module-toggle, .map-tree-toggle, a.map-tree-lesson):hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
  background: var(--box-bg-hover);
}

body[data-site-tab] .course-item {
  margin-bottom: 6px;
}

/* The lock explanation keeps its accent edge, now a square 3px bar */
body[data-site-tab] .lock-explainer {
  border-left: 3px solid var(--box-accent);
}

/* Admin → a course's Edit: "Show in the Library to members without access" and its card text */
.admin-layout .locked-library-setting {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 100%;
  min-width: 0;
}

.admin-layout .locked-library-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-layout .locked-library-text[hidden] {
  display: none;
}

.admin-layout .locked-library-text textarea {
  width: 100%;
  max-width: 560px;
  border-radius: 0;
  resize: vertical;
}

/* Library → More courses: the courses a member doesn't have (index.html moreCourseCard). No frame:
   the same flat section as "List of courses" above it (the same h3 heading, the same rows at the same
   left edge and width), with the intro line in the page's muted text under the heading. */
body[data-site-tab] .library-more {
  margin-top: 24px;
}

.library-more[hidden] {
  display: none;
}

.library-more-title {
  margin-bottom: 4px;
}

.library-more-intro {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* The locked courses: one row each, exactly like the member's own course rows (.course-item /
   .course-link / .library-course-row, reused); only what differs is here. The list is the same
   single column as theirs. */
.library-more-list {
  margin: 0;
  padding: 0;
}

/* Not a link: no hover change (only the button is clickable) */
body[data-site-tab] .library-more-item:hover {
  background: var(--box-bg-inner);
}

/* The title on one line, "…" when it is very long (the full title on hover); on phones up to two lines */
.library-more-row .library-more-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}

/* Right: the "Locked" tag and "Write to me", the same on every row so they line up in a column */
.library-more-side {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.library-more-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 18px;
  white-space: nowrap;
}

.library-more-lock .btn-icon-svg,
.library-more-lock svg {
  width: 13px;
  height: 13px;
}

.btn.btn-sm.library-more-contact {
  flex: none;
  width: auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Phones: the title on top (up to two lines), the tag and the button under it */
  .library-more-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .library-course-row.library-more-row .library-course-main {
    flex: 1 1 100%;
  }

  .library-more-row .library-more-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .library-more-side {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

/* ----- My Map, list view: states shown by tint, accent bar and icon (no borders) ----- */
body[data-site-tab] :is(.map-tree-modules, .map-tree-lessons) {
  border-left: 1px solid var(--color-border);
}

body[data-site-tab] .map-tree-toggle.is-completed,
body[data-site-tab] .map-tree-lesson.is-done {
  background: var(--box-done-bg);
  color: var(--color-text);
}

body[data-site-tab] .map-tree-lesson.is-done .map-tree-sub {
  color: var(--color-text-muted);
}

body[data-site-tab] .map-tree-toggle.is-completed .map-tree-icon,
body[data-site-tab] .map-tree-lesson.is-done .map-tree-icon {
  color: var(--box-accent);
}

body[data-site-tab] .map-tree-lesson.is-next {
  border: 0;
  border-left: 3px solid var(--box-accent);
  background: var(--box-next-bg);
}

body[data-site-tab] .map-tree-lesson.is-next .map-tree-icon {
  color: var(--box-accent);
}

body[data-site-tab] :is(.map-tree-toggle.is-waiting, .map-tree-toggle.is-locked, .map-tree-lesson.is-locked) {
  background: transparent;
  color: var(--map-locked-text);
}

body[data-site-tab] a.map-tree-lesson.is-done:hover {
  background: var(--box-done-bg);
}

body[data-site-tab] a.map-tree-lesson.is-next:hover {
  background: var(--box-next-bg);
}

/* ----- My Map, map view: the same for the nodes (connectors, the avatar, rings and bars stay) ----- */
body[data-site-tab] .map-shape {
  stroke: none;
  fill: var(--box-bg-inner);
}

body[data-site-tab] .map-node:hover .map-shape {
  stroke: none;
  fill: var(--box-bg-hover);
}

body[data-site-tab] :is(.map-course, .map-module).is-completed .map-shape,
body[data-site-tab] .map-lesson.is-done .map-shape {
  stroke: none;
  fill: var(--box-done-bg);
}

body[data-site-tab] .map-lesson.is-done .map-lesson-title {
  fill: var(--color-text);
}

body[data-site-tab] .map-lesson.is-done .map-icon {
  color: var(--box-accent);
}

body[data-site-tab] .map-lesson.is-next .map-shape {
  stroke: none;
  fill: var(--box-next-bg);
}

body[data-site-tab] .map-next-bar {
  fill: var(--box-accent);
}

body[data-site-tab] :is(.map-course, .map-module).is-waiting .map-shape,
body[data-site-tab] :is(.map-course, .map-module).is-locked .map-shape,
body[data-site-tab] .map-lesson.is-locked .map-shape {
  stroke: none;
  stroke-dasharray: none;
  fill: transparent;
}

/* Keyboard focus: the one outline allowed, a clear 2px ring (also on a done or locked node) */
body[data-site-tab] .map-node.map-node:focus-visible .map-shape {
  stroke: var(--color-link-focus);
  stroke-width: 2;
  stroke-dasharray: none;
}

/* "Continue": a soft pulsing tint behind the next lesson instead of a glowing outline */
body[data-site-tab] .map-pulse {
  stroke: none;
  fill: var(--box-next-bg);
}

/* The legend: the same language as the rows */
body[data-site-tab] .map-key::before {
  border: 0;
  border-radius: 0;
  background: var(--box-bg-inner);
}

body[data-site-tab] .map-key-done::before {
  border: 0;
  background: var(--box-done-bg);
}

body[data-site-tab] .map-key-next::before {
  border: 0;
  border-left: 3px solid var(--box-accent);
  background: var(--box-next-bg);
}

body[data-site-tab] .map-key-locked::before {
  border: 0;
  background: repeating-linear-gradient(45deg, var(--color-border-strong) 0 1px, transparent 1px 4px);
}

@media (max-width: 600px) {
  body[data-site-tab] .card {
    padding: 20px 16px;
  }
}

/* ----- Courses: select several and "Edit settings…" (admin.js openCourseBulk) ----- */
.admin-layout .course-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 8px;
}

.admin-layout .course-bulk-bar[hidden] {
  display: none;
}

.admin-layout .course-select-all-field {
  margin: 0;
}

.admin-layout .course-select-cell {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: 4px;
}

.admin-layout .course-select-cell input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* The current settings next to the title: small, quiet words (no boxes) */
.admin-layout .course-setting-labels {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-left: 8px;
  vertical-align: 1px;
}

.admin-layout .course-setting-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-lighter);
}

.admin-layout .course-setting-label.is-off {
  color: var(--color-warning-text);
}

.admin-layout .course-bulk-setting {
  margin: 10px 0 0;
}

.admin-layout .course-bulk-names {
  margin: 6px 0 4px 18px;
  padding: 0;
  font-size: 13.5px;
}

.admin-layout .course-bulk-names-box > summary {
  cursor: pointer;
  font-size: 13.5px;
}

.admin-layout .course-bulk-summary {
  margin: 14px 0 6px;
  font-weight: 500;
}

/* ----- Members page: View + a "More" menu per row (admin.js memberRow, rowActionsMenu) ----- */
/* Three dots instead of "More ▾" on phones; the label stays for screen readers */
.actions-menu-btn .actions-menu-dots {
  display: none;
}

@media (max-width: 600px) {
  .actions-menu-btn.is-compact .actions-menu-word,
  .actions-menu-btn.is-compact .actions-menu-chevron {
    display: none;
  }

  .actions-menu-btn.is-compact .actions-menu-dots {
    display: inline-block;
  }
}

/* View and More always stay on one line */
.admin-layout .member-actions .member-row-actions {
  flex-wrap: nowrap;
}

/* An item that can't be used: readable (not faded out), with the reason under it */
.actions-menu {
  max-width: min(320px, calc(100vw - 16px));
}

.actions-menu-item:disabled {
  opacity: 1;
  color: var(--color-text-lighter);
}

.actions-menu-item.is-danger:disabled {
  color: var(--color-text-lighter);
}

.actions-menu-hint {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  white-space: normal;
  color: var(--color-text-lighter);
}

/* ============================================
   Member profile → Courses: each course card in separate blocks, top to bottom: the header, the
   summary stats, the lesson order, the actions, the lesson lists. Separated by fill and spacing only
   (no borders, no shadows), with the flat box tokens. A closed card keeps its two summary lines.
   ============================================ */
:root {
  --box-stats-bg: rgba(3, 3, 3, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --box-stats-bg: rgba(237, 239, 238, 0.05);
  }
}

:root[data-theme="dark"] {
  --box-stats-bg: rgba(237, 239, 238, 0.05);
}

.admin-layout .member-course-card {
  padding: 14px 16px 16px;
}

/* The two summary lines: only on a closed card (an open one shows the stats block instead) */
.admin-layout .member-course-card:not(.is-collapsed) > .member-course-meta,
.admin-layout .member-course-card:not(.is-collapsed) > .member-course-summary {
  display: none;
}

.admin-layout .member-course-card.is-collapsed > .member-course-meta {
  margin: 4px 0 0;
}

/* b. Summary: one calm block, a stats row (small label above, value below) */
.admin-layout .member-course-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin: 10px 0 0;
  padding: 12px 0;
  background: var(--box-stats-bg);
}

.admin-layout .member-course-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0 16px;
}

.admin-layout .member-course-stat + .member-course-stat {
  border-left: 1px solid var(--color-border);
}

.admin-layout .member-course-stat-label {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.admin-layout .member-course-stat-value {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.admin-layout .member-course-stat.is-emphasis .member-course-stat-value {
  font-size: 15px;
  color: var(--color-accent-text);
}

/* c. Lesson order: its own block, a different light fill */
.admin-layout .member-course-card .member-course-order {
  margin: 12px 0;
  padding: 14px 16px;
  background: var(--box-bg-inner);
}

.admin-layout .member-course-order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.admin-layout .member-course-order-row .field-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .member-course-order-row select.input-field {
  width: 100%;
  max-width: 300px;
  margin: 0;
}

.admin-layout .member-course-order-effect,
.admin-layout .member-course-order-note,
.admin-layout .member-course-full-hint {
  margin: 8px 0 0;
  color: var(--color-text-muted);
}

.admin-layout .member-course-full {
  margin: 12px 0 0;
}

/* d. Actions: a thin tinted line above */
.admin-layout .member-course-actions-block {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--box-bg-hover);
}

.admin-layout .member-course-actions-block .member-course-actions {
  flex-wrap: wrap;
  margin-bottom: 0;
}

.admin-layout .member-course-actions-block .member-course-date {
  margin-top: 10px;
}

/* e. Lesson lists: a divider above, clear headings, comfortable rows, the state chips on the right */
.admin-layout .member-course-lists {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--box-bg-hover);
}

.admin-layout .member-course-lists .member-course-lessons li + li {
  border-top: 1px solid var(--box-bg-hover);
}

/* ----- The card's always-visible part (admin.js courseCard): progress bar and stat blocks ----- */
.admin-layout .member-course-card.mcs-card {
  margin-bottom: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
}

.admin-layout #member-courses-list.member-course-list {
  gap: 8px;
}

.admin-layout .mcs-card .member-course-head {
  flex-wrap: wrap;
  gap: 6px 10px;
}

.admin-layout .mcs-card .member-course-title {
  font-weight: 700;
}

.admin-layout .mcs-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
}

.admin-layout .mcs-progress-track {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  min-width: 0;
  overflow: hidden;
  background: var(--box-bg-hover);
}

.admin-layout .mcs-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--box-accent);
}

.admin-layout .mcs-progress-label {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* The stat blocks: 6 per row on desktop, 3 on tablets, 2 on phones; no dots, no borders */
.admin-layout .mcs-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
}

.admin-layout .mcs-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  background: var(--box-bg-inner);
}

.admin-layout .mcs-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .mcs-label[title] {
  cursor: help;
}

.admin-layout .mcs-value {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.admin-layout .mcs-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.admin-layout .mcs-stat.is-muted .mcs-value {
  color: var(--color-text-muted);
}

/* Locked / paused: an amber tint and a "!" mark; errors: a red tint (never colour alone) */
.admin-layout .mcs-stat.is-warn {
  background: rgba(183, 121, 31, 0.1);
}

.admin-layout .mcs-stat.is-error {
  background: var(--color-danger-soft);
}

.admin-layout .mcs-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  background: #b7791f;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.admin-layout .mcs-stat.is-error .mcs-mark {
  background: var(--color-danger);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-layout .mcs-stat.is-warn {
    background: rgba(236, 179, 77, 0.12);
  }

  :root:not([data-theme="light"]) .admin-layout .mcs-stat.is-warn .mcs-mark {
    background: #ecb34d;
    color: #1c1f1e;
  }
}

:root[data-theme="dark"] .admin-layout .mcs-stat.is-warn {
  background: rgba(236, 179, 77, 0.12);
}

:root[data-theme="dark"] .admin-layout .mcs-stat.is-warn .mcs-mark {
  background: #ecb34d;
  color: #1c1f1e;
}

@media (max-width: 1000px) {
  .admin-layout .mcs-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .admin-layout .mcs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-layout .member-course-lists .member-course-block {
  margin-top: 0;
}

.admin-layout .member-course-lists .member-course-block + .member-course-block,
.admin-layout .member-course-lists .member-course-schedule {
  margin-top: 14px;
}

.admin-layout .member-course-lists .member-course-subtitle {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .member-course-lists .member-course-lessons li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.admin-layout .member-course-lists .member-course-lessons li > .badge,
.admin-layout .member-course-lists .member-course-lessons li > .member-course-state,
.admin-layout .member-course-lists .member-course-badges {
  flex: none;
  margin-left: auto;
  text-align: right;
}

/* Square corners everywhere in the member profile (all its tabs); round things that are not boxes
   (radio buttons, the on/off switches, spinners) stay round */
#member-view-drawer {
  --radius: 0;
  --radius-sm: 0;
  --radius-button: 0;
}

#member-view-drawer,
#member-view-drawer *:not(input[type="radio"]):not(.status-switch):not(.status-switch *):not([class*="spinner"]):not(.mv-avatar):not(.mv-tab-count) {
  border-radius: 0 !important;
}

/* Phones: blocks stack, stats two per row, the select full width, buttons wrap */
@media (max-width: 600px) {
  .admin-layout .member-course-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
  }

  .admin-layout .member-course-stat + .member-course-stat {
    border-left: 0;
  }

  .admin-layout .member-course-order-row {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-layout .member-course-order-row select.input-field {
    max-width: none;
  }

  .admin-layout .member-course-lists .member-course-lessons li {
    flex-wrap: wrap;
  }
}

/* ============================================
   Courses → Actions → "Edit settings…" (admin.js openCourseBulk): a centred column of flat tinted
   blocks, each setting with a segmented "Don't change | On | Off" (radio inputs underneath), a live
   summary and a sticky action bar. Square corners, no borders, no shadows.
   ============================================ */
.admin-layout #course-bulk-drawer .member-bulk-body {
  padding: 0;
}

.admin-layout .course-bulk-page {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 4px 0 24px;
}

.admin-layout .course-bulk-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.admin-layout .course-bulk-intro {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text);
}

/* "Show the 7 courses": a caret and a tidy scrollable list */
.admin-layout .course-bulk-names-box {
  background: var(--box-bg);
}

.admin-layout .course-bulk-names-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .course-bulk-names-toggle::-webkit-details-marker {
  display: none;
}

.admin-layout .course-bulk-names-toggle svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.15s ease;
}

.admin-layout .course-bulk-names-box[open] > .course-bulk-names-toggle svg {
  transform: rotate(90deg);
}

.admin-layout .course-bulk-names-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-layout .course-bulk-names {
  max-height: 200px; /* about 8 rows */
  overflow-y: auto;
  margin: 0;
  padding: 2px 16px 12px 36px;
  font-size: 13.5px;
  line-height: 24px;
  color: var(--color-text);
}

.admin-layout .course-bulk-names-box.is-open .course-bulk-names {
  padding-top: 12px;
}

/* The settings: flat blocks, 12px apart */
.admin-layout .course-bulk-settings {
  gap: 12px;
}

.admin-layout .course-bulk-setting {
  margin: 0;
  padding: 16px 18px;
  background: var(--box-bg);
  min-width: 0;
}

.admin-layout .course-bulk-setting-title {
  margin: 0;
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .course-bulk-setting-about {
  margin: 2px 0 12px;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
}

/* The segmented control: three equal parts; the radio stays a real (invisible) input on top */
.segmented {
  display: flex;
  gap: 2px;
  max-width: 420px;
}

.segmented-option {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.segmented-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented-text {
  display: block;
  padding: 8px 10px;
  border-radius: 0;
  background: var(--box-bg-inner);
  font-size: 13.5px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  color: var(--color-text);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented-option:hover .segmented-input:not(:checked) + .segmented-text {
  background: var(--box-bg-hover);
}

.segmented-input:checked + .segmented-text {
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 600;
}

/* "Don't change" selected: a neutral look, not the accent */
.segmented-option.is-neutral .segmented-input:checked + .segmented-text {
  background: var(--box-bg-hover);
  color: var(--color-text);
}

.segmented-input:focus-visible + .segmented-text {
  position: relative;
  z-index: 1;
  box-shadow: var(--focus-ring);
}

/* The live summary */
.admin-layout .course-bulk-summary {
  padding: 16px 18px;
  background: var(--box-bg);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text);
}

.admin-layout .course-bulk-summary p {
  margin: 0;
}

.admin-layout .course-bulk-summary-none {
  color: var(--color-text-muted);
}

.admin-layout .course-bulk-summary-list {
  margin: 0;
  padding-left: 18px;
  font-weight: 600;
}

.admin-layout .course-bulk-summary-count {
  margin-top: 4px !important;
  color: var(--color-text-muted);
}

.admin-layout .course-bulk-summary-warning {
  margin-top: 10px !important;
  padding: 6px 10px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning-text);
  font-weight: 500;
}

/* The sticky action bar at the bottom of the page */
.admin-layout .course-bulk-actions {
  position: sticky;
  bottom: -40px; /* the panel's own bottom padding */
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 calc(-1 * var(--panel-gutter)) -40px;
  padding: 12px var(--panel-gutter) 52px;
  background: linear-gradient(var(--box-bg), var(--box-bg)), var(--color-bg);
}

.admin-layout .course-bulk-actions .btn {
  width: auto;
}

/* ----- The Members page bulk dialogs: their radio groups and blocks as flat tinted blocks (Set lesson
   order, Set course access mode, Add course access, Remove all access) ----- */
.admin-layout .member-bulk-body fieldset.form-ed-radios {
  margin: 0;
  padding: 14px 16px;
  border: 0;
  background: var(--box-bg);
  min-width: 0;
  gap: 4px;
}

.admin-layout .member-bulk-body fieldset.form-ed-radios > legend {
  float: left;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .member-bulk-body fieldset.form-ed-radios > legend + * {
  clear: both;
}

.admin-layout .member-bulk-body fieldset.form-ed-radios .checkbox-field {
  margin: 0;
  padding: 4px 0;
}

.admin-layout .member-bulk-body .member-bulk-course-order,
.admin-layout .member-bulk-body .remove-all-options {
  padding: 14px 16px;
  background: var(--box-bg);
}

.admin-layout .member-bulk-body .member-bulk-course-order .field-label {
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .member-bulk-body > .field-hint:first-child {
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .course-bulk-names-toggle svg,
  .segmented-text {
    transition: none;
  }
}

/* Phones: one column, the segmented control on one row when it fits, buttons full width */
@media (max-width: 600px) {
  .admin-layout .course-bulk-actions .btn {
    flex: 1 1 0;
  }
}

@media (max-width: 360px) {
  .segmented {
    flex-direction: column;
  }
}

/* ----- Courses list: each row's "In order" / "Sends email" indicators (admin.js courseFlags) -----
   Small, square, flat; ON filled with a soft accent and the accent text, OFF muted with its own
   word ("Any order", "No email") and a line through the icon, so it never depends on colour alone. */
.admin-layout .course-flags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.admin-layout .course-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: var(--box-bg);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.admin-layout .course-flag svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.admin-layout .course-flag:not(.is-on) svg {
  opacity: 0.7;
}

.admin-layout .course-flag:not(.is-on) .course-flag-text {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.admin-layout .course-flag.is-on {
  background: var(--box-next-bg);
  color: var(--color-accent-text);
  font-weight: 600;
}

.admin-layout .course-flag:hover:not(:disabled) {
  background: var(--box-bg-hover);
}

.admin-layout .course-flag.is-on:hover:not(:disabled) {
  background: var(--box-next-bg);
  filter: brightness(0.97);
}

.admin-layout .course-flag:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-layout .course-flag:disabled {
  cursor: default;
}

.admin-layout .course-flag.is-static {
  opacity: 0.75;
}

/* Phones: the indicators on their own line under the course name, above the buttons */
@media (max-width: 600px) {
  .admin-layout .course-order-row .course-flags {
    flex-basis: 100%;
    order: -1;
  }

  .admin-layout .course-order-row .course-row-actions {
    flex-wrap: wrap;
  }
}

/* ============================================
   "Message Ben" (member-message.js): a floating button bottom-right on the member pages and its card.
   Flat and square; under the top bar (90) and the "new updates" notice (60); a bottom sheet on phones.
   ============================================ */
.mmsg {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--font-body);
}

.mmsg-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 0;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mmsg-fab:hover {
  background: var(--color-primary-hover);
}

.mmsg-fab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Icon only: phones, and the lesson page (keeps its bottom free) */
.mmsg.is-compact .mmsg-label {
  display: none;
}

.mmsg.is-compact .mmsg-fab {
  width: 48px;
  padding: 0;
  justify-content: center;
}

.mmsg.is-open .mmsg-fab {
  display: none;
}

.mmsg-card {
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 16px;
  background: linear-gradient(var(--box-bg), var(--box-bg)), var(--color-surface);
  color: var(--color-text);
}

.mmsg-card[hidden] {
  display: none;
}

.mmsg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mmsg-title {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}

.mmsg-min {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.mmsg-min:hover {
  background: var(--box-bg-hover);
  color: var(--color-text);
}

.mmsg-min:focus-visible,
.mmsg-text:focus-visible,
.mmsg-more:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mmsg-help {
  margin: 4px 0 10px;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--color-text-muted);
}

.mmsg-text {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: var(--box-bg-inner);
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  resize: vertical;
}

.mmsg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.mmsg-count {
  font-size: 12px;
  color: var(--color-text-muted);
}

.mmsg-send.btn {
  width: auto;
}

.mmsg-status {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.mmsg-status[hidden] {
  display: none;
}

.mmsg-status.is-done {
  color: var(--color-accent-text);
  font-weight: 500;
}

.mmsg-status.is-error {
  color: var(--color-danger-text);
}

.mmsg-history-title {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.mmsg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.mmsg-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--box-bg-inner);
}

.mmsg-when {
  font-size: 12px;
  color: var(--color-text-muted);
}

.mmsg-body {
  font-size: 13.5px;
  line-height: 19px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mmsg-more {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* The conversation (message-replies.sql): you right, Ben left, newest at the bottom. The bubbles are
   the shared chat look (.msgr-msg / .msgr-bubble, below); no box of their own behind them, and the
   thread scrolls in the chat pane (.msgr-messages), not in a box of its own */
.mmsg-msg.is-you {
  align-self: flex-end;
}

.mmsg-msg.is-ben {
  align-self: flex-start;
}

/* A reply not read yet: a red dot on the button */
.mmsg-fab {
  position: relative;
}

.mmsg-dot {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--color-primary);
  border-radius: 0;
  background: var(--color-danger);
}

.mmsg-dot[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .mmsg .mmsg-label {
    display: none;
  }

  .mmsg .mmsg-fab {
    width: 48px;
    padding: 0;
    justify-content: center;
  }

  .mmsg.is-open {
    left: 0;
    right: 0;
    bottom: 0;
  }

  .mmsg .mmsg-card {
    width: 100%;
    max-height: 80vh;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================
   Admin → Inbox (admin-inbox.js), and the unread badge on a tab
   ============================================ */
.admin-layout .tab .tab-badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  background: var(--color-danger);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: 1px;
}

/* Unread texts (admin.js paintSmsUnread): the same badge on a member's Texts tab and a conversation,
   unread conversations in bold */
.admin-layout .mv-tab .tab-badge,
.admin-layout .sms-unread-badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 0;
  background: var(--color-danger);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: 1px;
}

.admin-layout .mv-tab.is-unread {
  font-weight: 700;
}

.admin-layout .sms-contact-item.is-unread .sms-contact-name,
.admin-layout .sms-contact-item.is-unread .sms-contact-preview {
  font-weight: 700;
  color: var(--color-text);
}

.admin-layout .sms-contact-item > .sms-contact .sms-unread-badge {
  position: absolute;
  top: 30px;
  right: 12px;
  margin: 0;
}

/* A small square "i" next to a label, and its text floating above the page (admin.js infoTip) */
.admin-layout .field-label-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.admin-layout .field-label-info .field-label {
  margin-bottom: 0;
}

.admin-layout .info-tip {
  display: inline-flex;
}

.admin-layout .info-tip-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: italic 700 12px/18px Georgia, serif;
  text-align: center;
  cursor: help;
}

.admin-layout .info-tip-btn:hover,
.admin-layout .info-tip-btn[aria-expanded="true"] {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.admin-layout .info-tip-btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .info-tip-pop {
  position: fixed;
  z-index: 1300;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  overflow-wrap: anywhere;
  /* (its words wrap inside the box wherever it sits: in an Automations row the line's "nowrap" ran them
     out of the box across the next columns, Ben 2026-11-09) */
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
  white-space: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}

.admin-layout .info-tip-pop[hidden] {
  display: none;
}

/* "Send text (SMS)" step: its counter under the text box (red past 1600) */
.admin-layout .step-sms-counter {
  margin: 4px 0 0;
}

.admin-layout .step-sms-counter.is-over {
  color: var(--color-danger-text);
}

.admin-layout .sms-unread-note {
  margin: 0 0 12px;
}

.admin-layout .sms-unread-note[hidden],
.admin-layout #sms-notify-btn[hidden] {
  display: none;
}

/* Messages → Phone notifications (only inside the Android app; admin.js setupPhonePush) */
.admin-layout .phone-push {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 0;
}
.admin-layout .phone-push[hidden] {
  display: none;
}
.admin-layout .phone-push-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 260px;
}
.admin-layout .phone-push-status {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
/* One row per kind: its name, Play, Change sound */
.admin-layout .phone-push-kinds {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-layout .phone-push-kind {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-layout .phone-push-kind-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}
.admin-layout .phone-push-kind .btn,
.admin-layout .phone-push-fix {
  border-radius: 0;
}
.admin-layout .phone-push-fix[hidden],
.admin-layout .phone-push-remove[hidden] {
  display: none;
}
.admin-layout .phone-push-remove {
  color: var(--color-danger-text);
}

.admin-layout .inbox-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 12px;
}

.admin-layout .inbox-filter {
  flex: 0 1 320px;
}

.admin-layout .inbox-email-pref {
  margin: 0;
}

.admin-layout .inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.admin-layout .inbox-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 16px;
  background: var(--box-bg);
}

.admin-layout .inbox-item.is-unread {
  background: var(--box-next-bg);
}

.admin-layout .inbox-item.is-done {
  opacity: 0.8;
}

.admin-layout .inbox-main {
  flex: 1 1 360px;
  min-width: 0;
}

.admin-layout .inbox-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.admin-layout .inbox-name {
  font-weight: 500;
}

.admin-layout .inbox-item.is-unread .inbox-name,
.admin-layout .inbox-item.is-unread .inbox-body {
  font-weight: 700;
}

.admin-layout .inbox-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.admin-layout .inbox-status.is-unread {
  color: var(--color-accent-text);
}

.admin-layout .inbox-body {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 21px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-text);
}

.admin-layout .inbox-page {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

.admin-layout .inbox-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-layout .inbox-member-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.admin-layout .inbox-member-list li {
  display: flex;
  flex-direction: column;
}

.admin-layout .inbox-member-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ----- Inbox as conversations (message-replies.sql): member left, you right; reply box below ----- */
.admin-layout .inbox-prefs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}

.admin-layout .inbox-conversation .inbox-earlier {
  margin-top: 6px;
}

.admin-layout .inbox-thread {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  margin: 8px 0 0;
  padding: 0;
}

.admin-layout .inbox-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(78%, 560px);
  padding: 8px 12px;
  border-radius: 0;
}

.admin-layout .inbox-msg.is-member {
  align-self: flex-start;
  background: var(--box-bg-inner);
}

.admin-layout .inbox-msg.is-member.is-unread {
  border-left: 3px solid var(--box-accent);
}

.admin-layout .inbox-msg.is-admin {
  align-self: flex-end;
  background: var(--box-done-bg);
}

.admin-layout .inbox-msg-body {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-layout .inbox-msg-when {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.admin-layout .inbox-msg.is-admin .inbox-msg-when {
  text-align: right;
}

.admin-layout .inbox-reply {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.admin-layout .inbox-reply-text {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  border-radius: 0;
  resize: vertical;
}

/* ===================== The chat look (admin Inbox and the member's "Message Ben" page) =====================
   One design for both sides: a framed card; a header; the messages in a softly tinted panel that
   scrolls inside (newest at the bottom); their messages left in a neutral bubble with an initial
   chip, mine right in the brand green tint; a small time line under each; a centred date line
   between days; the reply box at the bottom (grows to 4 lines) with a Send icon button. */
:root {
  --chat-panel-bg: color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
  --chat-theirs-bg: var(--color-surface);
  --chat-mine-bg: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface));
  --chat-mine-border: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface));
}

.chat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
}

.chat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}

.chat-head-main {
  flex: 1 1 260px;
  min-width: 0;
}

.chat-panel {
  max-height: 420px;
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--chat-panel-bg);
  border-bottom: 1px solid var(--color-border);
  -webkit-overflow-scrolling: touch;
}

.chat-earlier {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 13px;
}

.chat-card > .chat-earlier {
  margin: 8px 14px;
}

.chat-thread {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.chat-day {
  align-self: center;
  margin: 4px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.chat-day span {
  padding: 2px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 70%;
}

.chat-msg.is-theirs {
  align-self: flex-start;
}

.chat-msg.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 600;
}

.chat-bubble {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--chat-theirs-bg);
}

.chat-msg.is-mine .chat-bubble {
  background: var(--chat-mine-bg);
  border-color: var(--chat-mine-border);
}

.chat-body {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-meta {
  font-size: 11.5px;
  line-height: 16px;
  color: var(--color-text-muted);
}

.chat-msg.is-mine .chat-meta {
  text-align: right;
}

.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
}

.chat-compose .chat-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  max-height: 98px;
  margin: 0;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  resize: none;
  overflow-y: auto;
}

.chat-compose .chat-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
}

@media (max-width: 600px) {
  .chat-msg {
    max-width: 88%;
  }

  .chat-compose .chat-send-label {
    display: none;
  }

  .chat-compose .chat-send {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }
}

/* ===================== The messenger (admin Inbox, two panes; the member's "Message Ben" page, one) =====================
   Panels and buttons keep the admin's square corners; the bubbles, avatars, search field and send
   button are round, like a messaging app. Mine: the brand green with white text; theirs: a soft tint. */
:root {
  --msgr-theirs-bg: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  --msgr-mine-bg: var(--color-primary);
  --msgr-mine-text: var(--color-primary-text);
  --msgr-pane-bg: color-mix(in srgb, var(--color-text) 2%, var(--color-surface));
}

.msgr {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  max-width: 1180px;
  height: calc(100vh - 220px);
  min-height: 520px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}

.msgr-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.msgr-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 8px;
}

.msgr-side-title {
  font-size: 15px;
  font-weight: 600;
}

.msgr-side-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.msgr-settings {
  position: relative;
}

.msgr-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
}

.msgr-settings-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 280px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.3);
}

.msgr-settings-menu[hidden] {
  display: none;
}

.msgr-settings-menu .checkbox-field {
  align-items: flex-start;
  margin: 0;
  font-size: 13px;
  font-weight: 450;
}

.msgr-search {
  margin: 0 14px 8px;
  height: 36px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-text) 5%, var(--color-surface));
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
}

.admin-layout .msgr-search {
  border-radius: var(--radius) !important;
  border-color: transparent !important;
  background-color: color-mix(in srgb, var(--color-text) 5%, var(--color-surface)) !important;
}

.msgr-search:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.msgr-side .inbox-filter {
  margin: 0 14px 8px;
}

.msgr-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0 6px 8px;
  list-style: none;
}

.admin-layout .msgr-list {
  display: block;
}

.msgr-list-empty {
  padding: 16px 10px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.msgr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.msgr-row:hover {
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.msgr-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.msgr-row-item.is-selected .msgr-row {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}

.msgr-row-item.is-done {
  opacity: 0.6;
}

.msgr-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.msgr-row-top,
.msgr-row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.msgr-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

.msgr-row-when {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--color-text-muted);
}

.msgr-row-preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-text-muted);
}

.msgr-row-item.is-unread .msgr-row-name {
  font-weight: 700;
}

.msgr-row-item.is-unread .msgr-row-preview {
  color: var(--color-text);
  font-weight: 600;
}

.msgr-row-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.msgr-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 600;
}

.msgr-avatar.is-small {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.msgr-avatar.is-large {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.msgr-avatar-space {
  flex: 0 0 auto;
  width: 28px;
}

/* The chat (right pane) */
.msgr-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--msgr-pane-bg);
}

.msgr-chat-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.msgr-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.msgr-back {
  display: none;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.msgr-chat-who {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .msgr-chat-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

/* A member's name that opens their profile in a new tab (admin.js memberProfileLink): the link
   colour, underlined on hover, the focus ring */
.admin-layout .member-profile-link,
.admin-layout .member-profile-link.msgr-chat-name {
  color: var(--color-link);
  text-decoration: none;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.admin-layout .people-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.admin-layout .member-profile-link:hover {
  text-decoration: underline;
}

.admin-layout .member-profile-link:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.msgr-chat-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.msgr-chat-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.msgr-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.msgr-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  -webkit-overflow-scrolling: touch;
}

.msgr-earlier {
  display: block;
  margin: 0 auto 14px;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.msgr-thread {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.admin-layout .msgr-thread {
  max-height: none;
  overflow: visible;
  gap: 0;
}

.msgr-day {
  align-self: center;
  margin: 14px 0 6px;
}

.msgr-day span {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-text) 7%, var(--color-surface));
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.msgr-msg,
.admin-layout .msgr-msg.inbox-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 65%;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: 0;
}

.msgr-msg.is-grouped,
.admin-layout .msgr-msg.inbox-msg.is-grouped {
  margin-top: 4px;
}

.msgr-msg.is-theirs {
  align-self: flex-start;
}

.msgr-msg.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.msgr-bubble {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 12px 6px;
  border-radius: var(--radius);
  background: var(--msgr-theirs-bg);
  color: var(--color-text);
}

.msgr-msg.is-theirs.is-first .msgr-bubble {
  border-bottom-left-radius: var(--radius);
}

.msgr-msg.is-mine .msgr-bubble {
  background: var(--msgr-mine-bg);
  color: var(--msgr-mine-text);
}

.msgr-msg.is-mine.is-first .msgr-bubble {
  border-bottom-right-radius: var(--radius);
}

.msgr-bubble-name {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
}

.msgr-bubble-text,
.admin-layout .msgr-bubble-text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: inherit;
}

.msgr-bubble-time,
.admin-layout .msgr-bubble-time {
  align-self: flex-end;
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.msgr-msg.is-mine .msgr-bubble-time,
.admin-layout .msgr-msg.is-mine .msgr-bubble-time {
  color: color-mix(in srgb, var(--msgr-mine-text) 80%, transparent);
  text-align: right;
}

.admin-layout .msgr-msg.is-member.is-unread .msgr-bubble-text {
  font-weight: 600;
}

.admin-layout .msgr-msg.inbox-msg.is-member.is-unread,
.admin-layout .msgr-msg.inbox-msg.is-member,
.admin-layout .msgr-msg.inbox-msg.is-admin {
  border-left: 0;
  background: none;
}

/* The reply bar (pinned at the bottom of the chat) */
.msgr-compose {
  padding: 10px 18px 12px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.admin-layout .msgr-compose.inbox-reply {
  display: block;
  margin: 0;
}

.msgr-compose-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 4px 4px 4px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.msgr-compose-bar:focus-within {
  border-color: var(--color-primary);
}

.msgr-input,
.admin-layout .msgr-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  max-height: 98px;
  margin: 0;
  padding: 8px 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  resize: none;
  outline: none;
  box-shadow: none !important;
}

.msgr-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-primary-text);
  cursor: pointer;
}

.msgr-send:disabled {
  opacity: 0.45;
  cursor: default;
}

.msgr-send:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.msgr-compose-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 4px 0;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.msgr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px;
  text-align: center;
}

.msgr-empty-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.msgr-empty-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.msgr-chat > .msgr-empty {
  height: 100%;
}

/* Phones: one column; the list, then the chosen chat full screen with a Back arrow */
@media (max-width: 760px) {
  .msgr {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100dvh - 170px);
    min-height: 460px;
  }

  .msgr .msgr-chat {
    display: none;
  }

  .msgr.is-chat-open .msgr-side {
    display: none;
  }

  .msgr.is-chat-open .msgr-chat {
    display: flex;
  }

  .msgr-back {
    display: inline-block;
  }

  .msgr-chat-head {
    padding: 8px 10px;
    gap: 8px;
  }

  .msgr-icon-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .msgr-messages {
    padding: 14px;
  }

  .msgr-msg,
  .admin-layout .msgr-msg.inbox-msg {
    max-width: 86%;
  }

  .msgr-compose {
    padding: 8px 10px 10px;
  }
}

/* The member's "Message Ben" page (index.html#messages): the title, a short muted line and the
   chat card, centred, at most 760px wide */
.mpage {
  max-width: 760px;
  margin: 0 auto;
}

.mpage-title {
  margin: 0 0 4px;
}

.mpage-intro {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* The member's chat: one pane, centred, at most 760px, the same height rules as the admin Inbox */
.msgr.msgr-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
  height: calc(100vh - 260px);
  min-height: 480px;
}

.msgr.msgr-single .msgr-chat {
  display: flex;
}

.msgr-chat-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.mmsg-page-card .mmsg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 0;
}

@media (max-width: 760px) {
  .msgr.msgr-single {
    height: calc(100dvh - 210px);
    min-height: 420px;
  }
}

.mmsg-page-card .mmsg-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-muted);
}

.mmsg-page-card .mmsg-status {
  margin: 0;
}

.mmsg-empty {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* The member's chat bubbles: a little larger than the shared look (the admin Inbox keeps its own
   sizes); the name and time keep the shared 12px / 11px */
.mmsg-page-card .msgr-msg {
  max-width: 75%;
  margin-top: 14px;
}

.mmsg-page-card .msgr-msg.is-grouped {
  margin-top: 8px;
}

.mmsg-page-card .msgr-bubble {
  padding: 8px 12px;
}

.mmsg-page-card .msgr-bubble-text {
  font-size: 15px;
  line-height: 1.45;
}

@media (max-width: 600px) {
  .mmsg-page-card .msgr-msg {
    max-width: 85%;
  }
}

/* "Message Ben" in the Account menu: a red dot for an unread reply (on the item and the toggle) */
.account-item-messages {
  position: relative;
}

.account-item-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--color-danger);
  vertical-align: middle;
}

.account-item-dot[hidden] {
  display: none;
}

/* "Picked for you" ([picked-for-you]): a small number for the New picks on the item, a dot on the toggle */
.account-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--color-danger);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.account-item-badge[hidden] {
  display: none;
}

.account-toggle.has-unread-dot,
.account-toggle.has-picked-dot {
  position: relative;
}

.account-toggle.has-picked-dot::after,
.account-toggle.has-unread-dot::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
}

/* The admin Inbox: each conversation is a chat card; unread ones a green left edge; done ones
   lighter and collapsed to their last message */
.admin-layout .inbox-list {
  gap: 14px;
}

.admin-layout .inbox-item.chat-card {
  display: flex;
  padding: 0;
  background: var(--color-surface);
}

.admin-layout .inbox-item.chat-card.is-unread {
  background: var(--color-surface);
  border-left: 4px solid var(--color-primary);
}

.admin-layout .inbox-item.chat-card.is-done {
  opacity: 0.72;
}

.admin-layout .inbox-item.chat-card.is-done:hover,
.admin-layout .inbox-item.chat-card.is-done:focus-within {
  opacity: 1;
}

.admin-layout .chat-card .inbox-thread {
  max-height: none;
  overflow: visible;
  margin: 0;
}

.admin-layout .chat-card .inbox-msg.chat-msg {
  max-width: 70%;
  padding: 0;
  background: none;
  border-left: 0;
}

.admin-layout .chat-card .inbox-msg.is-member.is-unread .chat-bubble {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-surface));
}

.admin-layout .chat-card .inbox-msg.is-member.is-unread .chat-body {
  font-weight: 600;
}

.admin-layout .chat-card .inbox-reply {
  margin: 0;
}

.admin-layout .chat-card .inbox-reply-text {
  resize: none;
}

.admin-layout .chat-card .inbox-page {
  margin: 4px 0 0;
  font-size: 12.5px;
}

.admin-layout .chat-card .inbox-status.badge {
  font-size: 11px;
}

/* The Inbox toolbar: the filter and the three settings on one tidy row (wrapping on phones) */
.admin-layout .inbox-bar {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  background: var(--box-bg);
}

.admin-layout .inbox-prefs {
  gap: 4px 14px;
  font-size: 13px;
}

.admin-layout .inbox-prefs .checkbox-field {
  margin: 0;
  font-size: 13px;
}

@media (max-width: 600px) {
  .admin-layout .chat-card .inbox-msg.chat-msg {
    max-width: 88%;
  }

  .admin-layout .chat-card .inbox-side {
    width: 100%;
  }
}

/* The Inbox entry inside a menu: its count in red, like the tab's badge */
.admin-layout .admin-menu-item[data-tab="tab-inbox"] .admin-menu-item-badge {
  color: var(--color-danger);
  font-weight: 700;
}

/* "New message from …": bottom-right, never focused */
.inbox-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1090;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 10px 12px 10px 14px;
  border-left: 3px solid var(--color-danger);
  border-radius: 0;
  background: linear-gradient(var(--box-bg), var(--box-bg)), var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.inbox-toast[hidden] {
  display: none;
}

.inbox-toast-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.inbox-toast-close {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.inbox-toast-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 600px) {
  .admin-layout .inbox-msg {
    max-width: 92%;
  }

  .admin-layout .inbox-reply {
    flex-direction: column;
    align-items: stretch;
  }

  .inbox-toast {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

/* ============================================
   Courses → a course → Members: the header, the course setting line, the bulk bar and the two access
   rule cells (admin.js cmRuleCell). Flat, square, no borders or shadows.
   ============================================ */
/* The title reads as a heading; focus never draws a box over the "1 member · 220 lessons" line */
.admin-layout #course-members-drawer #cm-title {
  margin: 0 0 4px;
}

.admin-layout #course-members-drawer #cm-title:focus,
.admin-layout #course-members-drawer #cm-title:focus-visible {
  outline: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 4px;
}

.admin-layout #course-members-drawer #cm-summary {
  margin: 0;
  line-height: 18px;
}

.admin-layout .cm-course-rules {
  margin: 4px 0 12px;
  padding: 10px 14px;
  background: var(--box-bg);
  font-size: 13.5px;
  color: var(--color-text);
}

.admin-layout .cm-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 8px;
  padding: 8px 12px;
  background: var(--box-bg);
}

.admin-layout .cm-select-all-field {
  margin: 0;
}

.admin-layout .cm-table .col-select,
.admin-layout .cm-table td.col-select {
  width: 1%;
}

.admin-layout .cm-select {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* A rule cell: icon, ON / OFF in words, and where it comes from */
.admin-layout .cm-rule {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 5px;
  row-gap: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background: var(--box-bg);
  color: var(--color-text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-layout .cm-rule svg {
  width: 14px;
  height: 14px;
}

.admin-layout .cm-rule-state {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.admin-layout .cm-rule-source {
  grid-column: 1 / -1;
  font-size: 11.5px;
  line-height: 15px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.admin-layout .cm-rule.is-on {
  background: var(--box-next-bg);
  color: var(--color-accent-text);
}

.admin-layout .cm-rule:hover:not(:disabled):not(.is-readonly) {
  background: var(--box-bg-hover);
}

.admin-layout .cm-rule.is-on:hover:not(:disabled):not(.is-readonly) {
  background: var(--box-next-bg);
  filter: brightness(0.97);
}

.admin-layout .cm-rule:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-layout .cm-rule.is-readonly {
  cursor: help;
}

/* Phones: the bulk bar wraps, the cells stack (the table's own phone layout), the rule cells fit */
@media (max-width: 600px) {
  .admin-layout .cm-bulk {
    gap: 6px 10px;
  }

  .admin-layout .cm-rule-source {
    white-space: normal;
  }
}

/* "Show stats as columns" off (the default): the six numbers live in each row's "Stats" menu */
.admin-layout .cm-stats-toggle {
  display: inline-flex;
  margin: 0 0 8px;
}

.admin-layout .cm-table.is-compact .cm-stat-col {
  display: none;
}

.admin-layout .cm-table:not(.is-compact) .cm-stats-btn {
  display: none;
}

.admin-layout .cm-table .member-actions .admin-row-actions {
  flex-wrap: nowrap;
}

/* The Stats menu: two columns, label left, value right; read-only, flat and square */
.actions-menu-item.actions-menu-stat {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: 16px;
  border-radius: 0;
  cursor: default;
}

.actions-menu-stat .actions-menu-value {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.actions-menu-stat:hover {
  background: var(--box-bg-hover);
}

/* Phones: Stats and Remove access sit on the member-name line, no sideways scroll */
@media (max-width: 700px) {
  .admin-layout .cm-table tbody tr:not(.cm-detail-row) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .admin-layout .cm-table tbody tr:not(.cm-detail-row) > td {
    order: 3;
    width: 100%;
    min-width: 0;
  }

  .admin-layout .cm-table tbody tr:not(.cm-detail-row) > td.col-select {
    order: 0;
    width: auto;
  }

  .admin-layout .cm-table tbody tr:not(.cm-detail-row) > td.member-email {
    order: 1;
    flex: 1 1 120px;
    width: auto;
    overflow-wrap: anywhere;
  }

  .admin-layout .cm-table tbody tr:not(.cm-detail-row) > td.member-actions {
    order: 2;
    width: auto;
    margin-left: auto;
  }

  .admin-layout .cm-table .member-actions .admin-row-actions {
    padding-top: 0;
  }
}

/* Modules and lessons: tick modules, then move or copy them to another course; tick lessons (each
   block's "Select all" on top), then move or copy them into a module (the bar stays in view) */
.admin-layout .cs-lesson-select,
.admin-layout .cs-select-all,
.admin-layout .cs-module-select {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.admin-layout .cs-module-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 0;
  background: var(--box-next-bg);
}

.admin-layout .cs-lesson-bulk {
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 1px 0 var(--color-border);
}

.admin-layout .cs-lesson-bulk .btn {
  width: auto;
  border-radius: 0;
}

.admin-layout .cs-select-all-row {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

.admin-layout .cs-select-all-row .checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.admin-layout .cs-module-bulk[hidden],
.admin-layout .cs-move-result[hidden] {
  display: none;
}

.admin-layout .cs-module-bulk-count {
  font-weight: 600;
  margin-right: auto;
}

.admin-layout .cs-move-result {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 0;
  background: var(--box-done-bg);
  overflow-wrap: anywhere;
}

/* The move / copy dialog: flat tinted blocks, square corners */
.mm-panel {
  width: min(620px, 100%);
  border: 0;
  border-radius: 0;
  background: var(--box-bg-inner, var(--color-surface));
}

.mm-panel .mm-names {
  margin: 0;
  padding: 8px 12px;
  background: var(--box-bg);
  font-weight: 600;
  list-style: none;
}

.mm-panel ul.mm-names li + li {
  margin-top: 4px;
}

.mm-panel .mm-mode {
  align-self: flex-start;
}

.mm-panel .mm-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--box-stats-bg, var(--box-bg));
}

.mm-panel .mm-summary p {
  margin: 0;
}

.mm-panel .mm-warnings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-panel .mm-warnings:empty {
  display: none;
}

.mm-panel .mm-warnings li {
  padding: 8px 12px;
  border-left: 3px solid var(--color-warning, #b7791f);
  background: var(--box-bg);
}

.mm-panel select.input-field {
  width: 100%;
  min-width: 0;
}

@media (max-width: 600px) {
  .mm-panel {
    padding: 12px;
  }

  .mm-panel .admin-form-actions .btn {
    flex: 1 1 auto;
  }
}

/* ======================================================================
   Import from Vimeo showcase (and "Add from Vimeo" choices): flat tinted sections,
   option cards, a sticky action bar (admin.js viSection / viCard)
   ====================================================================== */
/* Framed sections like the Courses page: a thin frame, a small heading over a divider, tight padding */
.admin-layout #vimeo-import-drawer .vi-section,
.admin-layout #vimeo-import-preview .vi-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--box-bg);
  font-size: 13px;
}

.admin-layout #vimeo-import-drawer .vi-section[hidden],
.admin-layout #vimeo-import-drawer .vi-card-field[hidden],
.admin-layout #vimeo-import-drawer .vi-status-bar:empty {
  display: none;
}

/* Lists of tinted rows: the frame stays, the section itself is clear, so the tints never stack */
.admin-layout #vimeo-import-drawer .vi-section.vi-section-list {
  padding: 12px;
  background: transparent;
}

.admin-layout #vimeo-import-drawer .vi-section-title {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

/* The showcases list's heading row keeps its filter and Refresh on the same line */
.admin-layout #vimeo-import-drawer .vimeo-import-picker-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.admin-layout #vimeo-import-drawer .vi-section-about {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.admin-layout #vimeo-import-drawer .vi-card-field .vi-section-about,
.admin-layout #vimeo-import-drawer .vi-option .vi-section-about {
  margin: 0;
}

.admin-layout #vimeo-import-drawer .vi-hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout #vimeo-import-drawer .vi-load-row {
  display: flex;
  gap: 8px;
}

.admin-layout #vimeo-import-drawer .vi-load-row .input-field {
  flex: 1 1 auto;
  min-width: 0;
}

/* "Loaded 6 of 6 showcases.": a small tinted status bar */
.admin-layout #vimeo-import-drawer .vi-status-bar {
  margin: -6px 0 14px;
  padding: 6px 10px;
  border-radius: 0;
  background: var(--box-done-bg);
  font-size: 12px;
}

.admin-layout #vimeo-import-drawer .vi-status-bar.is-error {
  background: var(--color-danger-soft);
}

/* Option cards: real radios, the chosen card filled with the accent and ticked */
.admin-layout #vimeo-import-drawer .vi-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-layout #vimeo-import-drawer .vi-card {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: var(--box-bg-inner);
  cursor: pointer;
}

.admin-layout #vimeo-import-drawer .vi-card:hover {
  background: var(--box-bg-hover);
}

/* The radio itself: kept for the keyboard and screen readers, drawn as the tick box */
.admin-layout #vimeo-import-drawer .vi-card-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.admin-layout #vimeo-import-drawer .vi-card-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-strong);
  border-radius: 0;
  color: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.admin-layout #vimeo-import-drawer .vi-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-layout #vimeo-import-drawer .vi-card-title {
  font-size: 13px;
  font-weight: 700;
}

.admin-layout #vimeo-import-drawer .vi-card-about {
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout #vimeo-import-drawer .vi-card:has(.vi-card-input:checked) {
  border-left-color: var(--box-accent);
  background: var(--box-next-bg);
}

.admin-layout #vimeo-import-drawer .vi-card:has(.vi-card-input:checked) .vi-card-check {
  border-color: var(--box-accent);
  background: var(--box-accent);
  color: var(--color-bg, #fff);
}

.admin-layout #vimeo-import-drawer .vi-card:has(.vi-card-input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.admin-layout #vimeo-import-drawer .vi-card:has(.vi-card-input:disabled) {
  cursor: default;
  opacity: 0.6;
}

/* The chosen card's own field, in the same block */
.admin-layout #vimeo-import-drawer .vi-card-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--box-bg-inner);
}

.admin-layout #vimeo-import-drawer .vi-card-field .vimeo-import-indent {
  margin: 4px 0 0;
}

.admin-layout #vimeo-import-drawer .vi-option {
  align-items: flex-start;
}

.admin-layout #vimeo-import-drawer .vi-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Showcases to import: count and Select all / Clear, then flat tinted rows */
.admin-layout #vimeo-import-drawer .vi-section-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.admin-layout #vimeo-import-drawer .vi-section-count {
  margin-right: auto;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout #vimeo-import-drawer .vimeo-multi-section.vi-row {
  margin: 0;
  padding: 8px 10px;
  background: var(--box-bg);
}

.admin-layout #vimeo-import-drawer .vi-row-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 2px 0;
}

.admin-layout #vimeo-import-drawer .vi-row-summary::-webkit-details-marker {
  display: none;
}

.admin-layout #vimeo-import-drawer .vi-row-include {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--box-accent);
}

.admin-layout #vimeo-import-drawer .vi-row-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout #vimeo-import-drawer .vi-row-count {
  flex: none;
  font-size: 13px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.admin-layout #vimeo-import-drawer .vi-row-caret {
  flex: none;
  transition: transform 0.15s ease;
}

.admin-layout #vimeo-import-drawer .vi-row:not([open]) .vi-row-caret {
  transform: rotate(-90deg);
}

.admin-layout #vimeo-import-drawer .vi-row-summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The action box on top: a framed block with its heading, the button, Cancel and what will happen */
.admin-layout #vimeo-import-drawer .admin-drawer-actions.vi-actionbar {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--box-accent);
  background: var(--box-next-bg);
  box-shadow: none;
}

.admin-layout #vimeo-import-drawer .vi-actionbar + .form-message:empty {
  display: none;
}

.admin-layout #vimeo-import-drawer .vi-actionbar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout #vimeo-import-drawer .vi-actionbar-summary,
.admin-layout #vimeo-import-drawer .vi-actionbar .vimeo-import-place-hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout #vimeo-import-drawer .vi-actionbar-summary:empty {
  display: none;
}

/* "Add module from Vimeo" (smallDialog .vm-panel): the same flat sections */
.vm-panel .vi-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: var(--box-bg);
}

.vm-panel .vi-section[hidden] {
  display: none;
}

.vm-panel .vi-section-title {
  float: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
}

.vm-panel .vi-section-about {
  font-size: 13px;
  color: var(--color-text-muted);
}

.vm-panel .vi-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Phones: cards and the load row stack */
@media (max-width: 600px) {
  .admin-layout #vimeo-import-drawer .vi-section,
  .admin-layout #vimeo-import-preview .vi-section,
  .admin-layout #vimeo-import-drawer .vi-section.vi-section-list,
  .admin-layout #vimeo-import-drawer .admin-drawer-actions.vi-actionbar {
    padding: 10px;
  }

  .admin-layout #vimeo-import-drawer .vi-cards {
    grid-template-columns: 1fr;
  }

  .admin-layout #vimeo-import-drawer .vi-load-row {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-layout #vimeo-import-drawer .vi-actionbar-buttons .btn {
    flex: 1 1 auto;
  }
}

/* ======================================================================
   Courses page: the Vimeo status (admin.js drawModuleSyncStatus). Flat tinted blocks, square, no
   borders; every state has an icon AND words (never colour alone).
   ====================================================================== */
.admin-layout .showcase-module-status {
  align-self: stretch;
  gap: 16px;
  width: 100%;
}

.admin-layout .vsync-line {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 16px;
  border-radius: 0;
  background: var(--box-bg);
}

.admin-layout .vsync-line.is-good {
  background: var(--box-done-bg);
}

.admin-layout .vsync-line.is-partial {
  background: var(--box-bg);
}

.admin-layout .vsync-line.is-bad {
  background: var(--color-danger-soft);
}

/* The icon: a small square with ✓ or ! (its meaning is also in the words next to it) */
.admin-layout .vsync-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: var(--box-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.admin-layout .vsync-line.is-partial .vsync-mark {
  background: #b7791f;
}

.admin-layout .vsync-line.is-bad .vsync-mark {
  background: var(--color-danger);
}

.admin-layout .vsync-text {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .vsync-main {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .vsync-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .vsync-check {
  flex: none;
}

/* Modules not connected: an amber-tinted block (not an error) */
.admin-layout .vsync-attention {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-left: 3px solid #b7791f;
  border-radius: 0;
  background: rgba(183, 121, 31, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-layout .vsync-attention {
    background: rgba(236, 179, 77, 0.12);
    border-left-color: #ecb34d;
  }

  :root:not([data-theme="light"]) .admin-layout .vsync-line.is-partial .vsync-mark {
    background: #ecb34d;
    color: #1c1f1e;
  }
}

:root[data-theme="dark"] .admin-layout .vsync-attention {
  background: rgba(236, 179, 77, 0.12);
  border-left-color: #ecb34d;
}

:root[data-theme="dark"] .admin-layout .vsync-line.is-partial .vsync-mark {
  background: #ecb34d;
  color: #1c1f1e;
}

.admin-layout .vsync-attention-title {
  margin: 0;
  font-size: 15px;
}

.admin-layout .vsync-attention-about {
  margin: -6px 0 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.admin-layout .vsync-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .vsync-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  border-radius: 0;
  background: var(--box-bg-inner);
}

.admin-layout .vsync-row-text {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-layout .vsync-row-name {
  overflow-wrap: anywhere;
}

.admin-layout .vsync-row-meta {
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .vsync-why-btn {
  font-size: 13px;
}

.admin-layout .vsync-why {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.admin-layout .vsync-why[hidden] {
  display: none;
}

.admin-layout .vsync-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* "2 are managed by hand": a small link in the top line, and the plain list it opens (no warning) */
.admin-layout .vsync-hand-toggle {
  font-weight: 500;
}

.admin-layout .vsync-hand-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .vsync-hand-list[hidden] {
  display: none;
}

.admin-layout .vsync-hand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 14px;
  border-radius: 0;
  background: var(--box-bg);
  font-size: 14px;
}

.admin-layout .vsync-hand-name {
  flex: 1 1 260px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The warning's heading: the "!" mark and the words */
.admin-layout .vsync-attention-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-layout .vsync-mark-warn {
  background: #b7791f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-layout .vsync-mark-warn {
    background: #ecb34d;
    color: #1c1f1e;
  }
}

:root[data-theme="dark"] .admin-layout .vsync-mark-warn {
  background: #ecb34d;
  color: #1c1f1e;
}

@media (max-width: 600px) {
  .admin-layout .vsync-hand-row .btn {
    width: 100%;
  }
}

/* Not synced on purpose: a small collapsed line */
.admin-layout .vsync-aside > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .vsync-aside-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.admin-layout .vsync-aside-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

/* Phones: the buttons go under the text */
@media (max-width: 600px) {
  .admin-layout .vsync-line {
    flex-wrap: wrap;
  }

  .admin-layout .vsync-check {
    width: 100%;
  }

  .admin-layout .vsync-row-actions {
    width: 100%;
  }

  .admin-layout .vsync-row-actions .btn {
    flex: 1 1 auto;
  }
}

/* ======================================================================
   My Map: courses without access (map.js kind 'locked'), in their own group below, no lines.
   Muted: light grey, dashed outline, a lock and "No access" (never colour alone).
   ====================================================================== */
.map-locked-label {
  fill: var(--color-text-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.map-node.map-locked .map-shape {
  fill: var(--map-locked-bg);
  stroke: var(--map-locked-line);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.map-node.map-locked .map-title,
.map-node.map-locked .map-sub {
  fill: var(--map-locked-text);
}

.map-node.map-locked .map-icon {
  color: var(--map-locked-text);
}

.map-node.map-locked:focus-visible .map-shape {
  stroke: var(--color-link-focus);
  stroke-width: 3;
  stroke-dasharray: none;
}

/* The list (phones, List view) */
.map-tree-locked {
  margin-top: 20px;
  list-style: none;
}

.map-tree-locked-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.map-tree-locked-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.map-tree-toggle.is-noaccess {
  min-height: 48px;
  border: 1px dashed var(--map-locked-line) !important;
  background: var(--map-locked-bg) !important;
  color: var(--map-locked-text);
}

.map-tree-toggle.is-noaccess .map-tree-title,
.map-tree-toggle.is-noaccess .map-tree-sub {
  color: var(--map-locked-text);
}

/* The card: flat, square; next to the node, or a bottom sheet on phones */
.map-locked-card {
  position: fixed;
  z-index: 60;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--box-bg, transparent), var(--box-bg, transparent)), var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.map-locked-card.is-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 80vh;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.map-locked-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-locked-card-icon {
  flex: none;
  color: var(--map-locked-text);
}

.map-locked-card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.map-locked-card-close {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  margin: -10px -10px -10px 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 22px;
  cursor: pointer;
}

.map-locked-card-close:focus-visible,
.map-locked-card-contact:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.map-locked-card-chip {
  align-self: flex-start;
  margin: 0;
  padding: 2px 8px;
  background: var(--map-locked-bg);
  color: var(--map-locked-text);
  font-size: 12px;
  font-weight: 700;
}

.map-locked-card-about,
.map-locked-card-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.map-locked-card-about {
  color: var(--color-text-muted);
  white-space: pre-line;
}

.map-locked-card-contact {
  min-height: 44px;
  align-self: stretch;
  justify-content: center;
}

/* Members → a member → Courses: tick courses, then the bar at the bottom (admin.js mcBulk*) */
.admin-layout .mc-select-all {
  margin: 0 0 8px;
}

.admin-layout .mc-select-all[hidden],
.admin-layout .mc-bulk[hidden] {
  display: none;
}

.admin-layout .mc-select {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.admin-layout .mc-select:focus-visible,
.admin-layout #mc-select-all:focus-visible {
  outline: 2px solid var(--color-link-focus, var(--color-primary));
  outline-offset: 2px;
}

/* Select all (left) and Expand all / Collapse all (right) in one row above the course cards */
.admin-layout .member-course-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 6px;
}

.admin-layout .member-course-toolbar .mc-select-all {
  margin: 0;
}

.admin-layout .member-course-tools-slot {
  margin-left: auto;
}

/* "Updated 10:00 PM": when this member's course data was last received */
.admin-layout .member-courses-updated {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-lighter);
  white-space: nowrap;
}

.admin-layout .member-courses-updated:empty {
  display: none;
}

/* The Courses page's bulk bar (.video-bulk-bar .course-bulk-bar), sticky at the top of the tab
   (admin.js sets "top" to the panel header's height) */
.admin-layout .mc-bulk {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--box-next-bg), var(--box-next-bg)), var(--color-surface);
}

.admin-layout .mc-bulk-count {
  font-weight: 700;
}

.admin-layout .mc-bulk-clear[hidden] {
  display: none;
}

.admin-layout .mc-bulk .mc-bulk-clear {
  font-size: 13px;
}

.admin-layout .mc-bulk-result {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.admin-layout .mc-bulk-result:empty {
  display: none;
}

.admin-layout .mc-bulk-result.is-success {
  color: var(--color-success-text, var(--color-text));
}

.admin-layout .mc-bulk-result.is-error {
  color: var(--color-danger-text);
}

@media (max-width: 600px) {
  .admin-layout .mc-bulk {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-layout .mc-bulk .btn {
    width: 100%;
  }
}

/* Members → a member → Courses: the first view while the lesson numbers load (admin.js
   drawMemberCoursesSummary): the course names at once, small grey bars where numbers come */
.admin-layout .member-course-skeleton {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border-radius: 0;
  background: var(--box-bg);
}

.admin-layout .member-course-skeleton-title {
  margin: 0;
  font-size: 15px;
}

.admin-layout .member-course-skeleton .field-hint {
  margin: 0;
}

.admin-layout .skeleton-bar {
  display: block;
  width: 40%;
  height: 10px;
  border-radius: 0;
  background: var(--box-bg-hover);
  animation: skeleton-fade 1.2s ease-in-out infinite alternate;
}

.admin-layout .skeleton-bar.is-wide {
  width: 70%;
}

@keyframes skeleton-fade {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .skeleton-bar {
    animation: none;
  }
}

/* ======================================================================
   Members → a member → Courses: "Add a course" (admin.html .enroll-strip). One compact toolbar row
   in the Courses list's look: a flat tinted strip, small flat grey dropdowns, the list's small
   .course-flag chips as toggles (around real checkboxes), a small primary Enroll button.
   ====================================================================== */
.admin-layout .enroll-strip {
  --enroll-field-bg: #f4f4f4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: var(--box-bg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-layout .enroll-strip {
    --enroll-field-bg: #2b2f2e;
  }
}

:root[data-theme="dark"] .admin-layout .enroll-strip {
  --enroll-field-bg: #2b2f2e;
}

.admin-layout .enroll-strip-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.admin-layout .enroll-card-info {
  cursor: help;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.admin-layout .enroll-card-info:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-layout .enroll-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Dropdowns: 38px, 15px text, flat grey fill, no border, a simple chevron, a clear focus ring */
.admin-layout .enroll-strip .enroll-select {
  height: 38px;
  min-width: 0;
  margin: 0;
  padding: 0 34px 0 10px;
  border: 0;
  border-radius: 0;
  background-color: var(--enroll-field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808a87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: var(--color-text);
  font-size: 15px;
  appearance: none;
  -webkit-appearance: none;
}

.admin-layout .enroll-strip .enroll-course {
  flex: 1 1 220px;
  width: auto;
}

.admin-layout .enroll-strip .enroll-order {
  flex: 0 1 230px;
  width: auto;
}

.admin-layout .enroll-strip .enroll-select:focus,
.admin-layout .enroll-strip .enroll-select:focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--box-accent);
}

.admin-layout .enroll-strip .enroll-btn {
  flex: none;
  min-height: 38px;
}

/* The toggles: the Courses list's chip; ticked = its "on" look AND a check mark (not colour alone) */
.admin-layout .enroll-chip {
  position: relative;
  height: 38px;
  margin: 0;
}

.admin-layout .enroll-chip[hidden] {
  display: none;
}

.admin-layout .enroll-chip .enroll-chip-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.admin-layout .enroll-chip .enroll-chip-check {
  display: none;
  font-weight: 800;
}

.admin-layout .enroll-chip:has(.enroll-chip-input:checked) {
  background: var(--box-next-bg);
  color: var(--color-accent-text);
  font-weight: 600;
}

.admin-layout .enroll-chip:has(.enroll-chip-input:checked) .enroll-chip-check {
  display: inline;
}

.admin-layout .enroll-chip:has(.enroll-chip-input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.admin-layout .enroll-chip:has(.enroll-chip-input:disabled) {
  cursor: default;
  opacity: 0.6;
}

@media (max-width: 600px) {
  .admin-layout .enroll-strip .enroll-select,
  .admin-layout .enroll-strip .enroll-btn,
  .admin-layout .enroll-chip {
    min-height: 44px;
  }

  .admin-layout .enroll-strip .enroll-course {
    flex-basis: 100%;
  }

  .admin-layout .enroll-strip .enroll-order {
    flex: 1 1 100%;
  }

  .admin-layout .enroll-strip .enroll-btn {
    margin-left: auto;
  }

  .admin-layout .mc-bulk .btn,
  .admin-layout .mc-bulk .mc-bulk-clear {
    min-height: 44px;
  }
}

/* Automation step "Send access email": the email as a summary card in the side panel (admin.js
   access_email_editor); the card and "Edit email" open the full-page editor */
.admin-layout .step-email-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: var(--box-bg);
  cursor: pointer;
}

.admin-layout .step-email-card:hover {
  background: var(--box-bg-hover);
}

.admin-layout .step-email-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.admin-layout .step-email-card .field-label {
  margin: 0;
}

.admin-layout .step-email-card-subject {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .step-email-card-preview,
.admin-layout .step-email-card-new {
  font-size: 13px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.admin-layout .step-email-card-new[hidden] {
  display: none;
}

.admin-layout .step-email-card-actions {
  display: flex;
  margin-top: 6px;
}

/* ======================================================================
   Members → a member → Courses: ONE compact scale for the whole tab (scoped to the profile panel
   so nothing else can make it bigger). Visible sizes are small; on phones the buttons and the
   checkboxes keep a 44px tap area.
   ====================================================================== */
#member-view-drawer .member-course-card.mcs-card {
  padding: 9px 12px;
}

#member-view-drawer .mcs-card .member-course-head {
  gap: 4px 8px;
}

#member-view-drawer .mcs-card .member-course-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

#member-view-drawer .mcs-card .member-course-head .badge {
  font-size: 11px;
  line-height: 1.3;
  padding: 2px 6px;
}

#member-view-drawer .mcs-progress {
  gap: 10px;
  margin: 8px 0 0;
}

#member-view-drawer .mcs-progress-track {
  height: 4px;
}

#member-view-drawer .mcs-progress-label {
  font-size: 13px;
}

/* Six in a row on desktop and tablets (they shrink), 3 under 700px, 2 under 420px */
#member-view-drawer .mcs-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 0;
}

#member-view-drawer .mcs-stat {
  gap: 1px;
  min-height: 0;
  padding: 6px 10px;
}

#member-view-drawer .mcs-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

#member-view-drawer .mcs-value {
  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
}

#member-view-drawer .mcs-sub {
  font-size: 12px;
  line-height: 1.25;
}

#member-view-drawer .mcs-mark {
  width: 14px;
  height: 14px;
  font-size: 10px;
}

@media (max-width: 1000px) {
  #member-view-drawer .mcs-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #member-view-drawer .mcs-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #member-view-drawer .mcs-stat {
    padding: 4px 8px;
  }
}

@media (max-width: 420px) {
  #member-view-drawer .mcs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Select all, Expand all / Collapse all, the bulk bar */
#member-view-drawer .member-course-toolbar .mc-select-all {
  font-size: 14px;
}

#member-view-drawer .member-course-tools .link-button {
  font-size: 13px;
}

#member-view-drawer .mc-bulk {
  padding: 7px 10px;
  font-size: 14px;
}

#member-view-drawer .mc-bulk .btn {
  font-size: 14px;
}

/* The checkbox on each card: a small box inside a larger tap area */
#member-view-drawer .mc-select-hit {
  display: inline-grid;
  flex: none;
  place-items: center;
  cursor: pointer;
}

/* The lesson lists inside an open card */
#member-view-drawer .member-course-lists .member-course-lessons li {
  padding: 6px 0;
  font-size: 13.5px;
  line-height: 1.35;
}

#member-view-drawer .member-course-lists .member-course-subtitle {
  font-size: 13px;
}

/* Phones: the visible controls stay small, the tap areas are 44px */
@media (max-width: 600px) {
  #member-view-drawer .mc-select-hit {
    min-width: 44px;
    min-height: 44px;
    margin: -12px -6px -12px -12px;
  }

  #member-view-drawer .member-course-caret,
  #member-view-drawer .member-course-tools .link-button,
  #member-view-drawer .mc-bulk .btn,
  #member-view-drawer .mc-bulk .mc-bulk-clear {
    min-height: 44px;
  }

  #member-view-drawer .member-course-toolbar .mc-select-all {
    min-height: 44px;
    align-items: center;
  }
}

/* ======================================================================
   Members → Add member (admin.html .ma-*): one centred column, one flat tinted card, two option
   tiles, the fields in an aligned 2-column grid, the password revealed for "a password I choose"
   ====================================================================== */
/* The page is wider than other panels: content up to 1240px (16px sides on phones) */
.admin-layout #member-add-drawer {
  --panel-gutter: max(16px, calc((100vw - 1240px) / 2));
}

/* The header's small "×" is a second Close (the Close button is there): hidden on this page */
#member-add-drawer .admin-drawer-header > .admin-toast-close {
  display: none;
}

#member-add-drawer .ma-form {
  --ma-field-bg: #f4f4f4;
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #member-add-drawer .ma-form {
    --ma-field-bg: #2b2f2e;
  }
}

:root[data-theme="dark"] #member-add-drawer .ma-form {
  --ma-field-bg: #2b2f2e;
}

#member-add-drawer .ma-success {
  margin: 0 0 8px;
}

#member-add-drawer .ma-success[hidden] {
  display: none;
}

#member-add-drawer .ma-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: var(--box-bg);
}

#member-add-drawer .ma-modes {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

#member-add-drawer .ma-title {
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
}

/* The three ways in: one row of equal cards (stacked on narrow screens) */
#member-add-drawer .ma-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}

/* "A member with this email already exists" and its link */
#member-add-drawer .ma-exists {
  margin: 0;
  color: var(--color-danger-text);
}

#member-add-drawer .ma-exists-link {
  font-weight: 600;
  text-decoration: underline;
}

/* "Not invited yet" (added silently): a plain label in the list's Status and the member header */
.member-access-badge,
.mv-access-badge {
  display: inline-block;
  margin-left: 8px;
  border-radius: 0;
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  font-weight: 500;
  white-space: nowrap;
}

.mv-access-badge {
  margin: 4px 0 0;
}

.mv-access-badge[hidden] {
  display: none;
}

/* A tile: a real radio underneath; chosen = accent tint, a left bar and a check (not colour alone) */
#member-add-drawer .ma-tile {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: 0;
  background: var(--box-bg-inner);
  cursor: pointer;
  transition: background-color 120ms ease;
}

#member-add-drawer .ma-tile:hover {
  background: var(--box-bg-hover);
}

#member-add-drawer .ma-tile-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#member-add-drawer .ma-tile-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-strong);
  color: transparent;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

#member-add-drawer .ma-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#member-add-drawer .ma-tile-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}

#member-add-drawer .ma-tile-about {
  font-size: 13px;
  color: var(--color-text-muted);
}

#member-add-drawer .ma-chip {
  display: inline-block;
  padding: 1px 6px;
  background: var(--box-next-bg);
  color: var(--color-accent-text);
  font-size: 11px;
  font-weight: 700;
}

/* The chosen card: a stronger border all round (thicker on the left) and the accent tint */
#member-add-drawer .ma-tile:has(.ma-tile-input:checked) {
  border-color: var(--box-accent);
  box-shadow: inset 0 0 0 1px var(--box-accent);
  background: var(--box-next-bg);
}

#member-add-drawer .ma-tile:has(.ma-tile-input:checked) .ma-tile-check {
  border-color: var(--box-accent);
  background: var(--box-accent);
  color: #ffffff;
}

#member-add-drawer .ma-tile:has(.ma-tile-input:focus-visible) {
  box-shadow: var(--focus-ring);
}

/* The fields: equal columns, labels on one line directly above their field */
#member-add-drawer .ma-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: start;
}

#member-add-drawer .ma-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#member-add-drawer .ma-span {
  grid-column: 1 / -1;
}

#member-add-drawer .ma-field[hidden] {
  display: none;
}

#member-add-drawer .ma-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

#member-add-drawer .ma-optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

#member-add-drawer .ma-req {
  color: var(--color-danger-text);
}

#member-add-drawer .ma-field .input-field {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background-color: var(--ma-field-bg);
  color: var(--color-text);
  font-size: 15px;
  transition: box-shadow 120ms ease;
}

#member-add-drawer .ma-field select.input-field {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808a87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  -webkit-appearance: none;
}

#member-add-drawer .ma-field .input-field:focus,
#member-add-drawer .ma-field .input-field:focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--box-accent);
}

#member-add-drawer .ma-field .input-field[aria-invalid="true"] {
  box-shadow: inset 0 -2px 0 var(--color-danger);
}

/* An inline message: a small red mark and words */
#member-add-drawer .ma-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 0;
  font-size: 13px;
  color: var(--color-danger-text);
}

#member-add-drawer .ma-error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--color-danger);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

#member-add-drawer .ma-error[hidden] {
  display: none;
}

#member-add-drawer .ma-hint {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

#member-add-drawer .ma-password {
  display: flex;
  gap: 4px;
}

#member-add-drawer .ma-password .input-field {
  flex: 1 1 auto;
  min-width: 0;
}

#member-add-drawer .ma-eye {
  flex: none;
  width: 44px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: var(--ma-field-bg);
  color: var(--color-text-muted);
  font-size: 16px;
  cursor: pointer;
}

#member-add-drawer .ma-eye[aria-pressed="true"] {
  color: var(--color-text);
  background: var(--box-next-bg);
}

#member-add-drawer .ma-eye:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The password appears with a short fade and slide (none with reduced motion) */
#member-add-drawer .ma-reveal:not([hidden]) {
  animation: ma-reveal 150ms ease-out;
}

@keyframes ma-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #member-add-drawer .ma-reveal:not([hidden]) {
    animation: none;
  }

  #member-add-drawer .ma-tile,
  #member-add-drawer .ma-field .input-field {
    transition: none;
  }
}

/* The note under the fields (what the chosen way in does): clearly visible */
#member-add-drawer .member-add-hint {
  padding: 12px 14px;
  border-left: 4px solid var(--box-accent);
  background: var(--box-bg-inner);
  color: var(--color-text);
  font-size: 14px;
}

@media (max-width: 860px) {
  #member-add-drawer .ma-tiles {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}

@media (max-width: 600px) {
  #member-add-drawer .ma-card {
    padding: 16px;
    gap: 16px;
  }

  /* Back, Close, Save and add another, the main button: 44px to tap */
  #member-add-drawer .admin-drawer-header .btn {
    min-height: 44px;
  }

  #member-add-drawer .ma-tiles,
  #member-add-drawer .ma-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #member-add-drawer .ma-field .input-field {
    height: 44px;
    font-size: 16px;
  }

  #member-add-drawer .ma-eye {
    height: 44px;
  }
}

/* Members → Email member: the email's summary card ("Edit email" opens the full-page editor) */
#member-email-drawer .me-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 16px;
  background: var(--box-bg);
}

#member-email-drawer .me-card .merge-preview {
  margin: 0;
}

#member-email-drawer .me-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#member-email-drawer .me-card-actions .btn,
#member-email-drawer .me-card-actions .link-button {
  min-height: 44px;
}

#member-email-drawer .me-card .field-hint {
  margin: 0;
}

/* A [field] the email doesn't fill in (panel and editor): a mark and words, not colour alone */
#member-email-drawer .me-warn,
.email-editor-warn {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--color-danger-text);
}

.email-editor-warn {
  padding: 6px 16px;
}

#member-email-drawer .me-warn::before,
.email-editor-warn::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: var(--color-danger);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

#member-email-drawer .me-warn[hidden],
.email-editor-warn[hidden] {
  display: none;
}

/* The full-page editor's "Existing members / New members" switch (email-editor.js versions) */
.email-version-tabs .email-version-tab {
  font-size: 13px;
}

/* ======================================================================
   Admin form fields: every text field, select and textarea in the admin (forms, drawers, panels,
   filters, search boxes, the email editor) is a white field with a soft border, so it stands out
   from the grey panel it sits in. One rule for the whole admin (body.admin-layout), from these
   variables (light and dark). Not used: published pages and the Page Builder's own form look
   (.pbf, "flat grey"), checkout, the member site.
   ====================================================================== */
:root {
  --field-bg: #ffffff;
  --field-border: #d0d5dd;
  --field-border-hover: #98a2b3;
  --field-border-focus: var(--color-primary);
  --field-text: #101828;
  --field-placeholder: #667085;
  --field-disabled-bg: #f2f4f7;
  --field-disabled-text: #667085;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --field-bg: #0c0e0d;
    --field-border: rgba(237, 239, 238, 0.24);
    --field-border-hover: rgba(237, 239, 238, 0.4);
    --field-border-focus: #3ecf8e;
    --field-text: #edefee;
    --field-placeholder: #8a8f8d;
    --field-disabled-bg: #222524;
    --field-disabled-text: #8a8f8d;
  }
}

:root[data-theme="dark"] {
  --field-bg: #0c0e0d;
  --field-border: rgba(237, 239, 238, 0.24);
  --field-border-hover: rgba(237, 239, 238, 0.4);
  --field-border-focus: #3ecf8e;
  --field-text: #edefee;
  --field-placeholder: #8a8f8d;
  --field-disabled-bg: #222524;
  --field-disabled-text: #8a8f8d;
}

/* Members at a step / Were here: the ticked members' bar (sticky at the top), the tick column and
   the per-row Remove */
.admin-layout .fs-bulk-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  background: var(--box-next-bg, var(--color-surface-alt));
}

.admin-layout .fs-bulk-bar[hidden] {
  display: none;
}

.admin-layout .fs-bulk-count {
  font-weight: 600;
  margin-right: auto;
}

.admin-layout .fs-table .fs-check-col {
  width: 44px;
  text-align: center;
}

.admin-layout .fs-table .fs-check-col input,
.admin-layout .visits-select {
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 0;
  accent-color: var(--color-primary);
}

.admin-layout .fs-table .fs-actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.visits-row .visits-who {
  flex: 1 1 auto;
  min-width: 0;
}

.visits-row .visits-select {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
}

.visits-row .visits-remove {
  flex: none;
}

.visits-panel .fs-bulk-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  background: var(--box-next-bg, var(--color-surface-alt));
}

.visits-panel .fs-bulk-bar[hidden] {
  display: none;
}

.visits-panel .fs-bulk-count {
  font-weight: 600;
  margin-right: auto;
}

@media (max-width: 600px) {
  .admin-layout .fs-table .fs-actions-col {
    text-align: left;
  }

  .visits-row {
    flex-wrap: wrap;
  }
}

/* Member profile → Automations: the status chips and "Remove from all automations" on one row */
.admin-layout .mv-auto-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.admin-layout .mv-auto-tools .mv-run-chips {
  margin: 0;
}

/* The automation checklists (admin.js automationChecklist): Members → Add to / Remove from
   automation, the member profile's "Remove from automations". 44px rows, a square box, the name and
   a muted count; the "All …" row first, set apart. */
.admin-layout .auto-check {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
}

.admin-layout .auto-check .step-course-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.admin-layout .auto-check-list {
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .auto-check-row .auto-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 8px;
  cursor: pointer;
}

.admin-layout .auto-check-row .auto-check-label:hover {
  background: var(--color-surface-alt);
}

.admin-layout .auto-check-box {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 0;
  accent-color: var(--color-primary);
}

.admin-layout .auto-check-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .auto-check-count {
  flex: none;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .auto-check-row.is-all {
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}

.admin-layout .auto-check-row input:disabled + .auto-check-name {
  color: var(--color-text-muted);
}

/* Member profile → Automations: Add and Remove, one tidy block of two matching rows (a label; the
   control and its button on one line, the same sizes; one short muted line under it) */
.admin-layout .mv-auto-pair {
  display: grid;
  gap: 16px;
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
  background: var(--box-bg);
}

.admin-layout .mv-auto-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-layout .mv-auto-row > .field-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.admin-layout .mv-auto-line {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 560px;
}

.admin-layout .mv-auto-line > select.input-field,
.admin-layout .mv-auto-line > .auto-dropdown {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .mv-auto-line select.input-field,
.admin-layout .auto-dropdown-control {
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
}

.admin-layout .mv-auto-btn {
  flex: 0 0 120px;
  min-height: 40px;
  justify-content: center;
}

.admin-layout .mv-auto-hint {
  margin: 0;
  font-size: 13px;
}

.admin-layout .mv-auto-hint[hidden] {
  display: none;
}

.admin-layout .mv-auto-more {
  font-size: 13px;
}

.admin-layout .mv-auto-more > summary {
  width: max-content;
  color: var(--color-accent-text);
  cursor: pointer;
}

.admin-layout .mv-auto-more > summary:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .mv-auto-more > p {
  margin: 6px 0 0;
}

/* The dropdown (admin.js automationDropdown): looks like the select next to it; its menu opens under
   it with the compact checklist */
.admin-layout .auto-dropdown {
  position: relative;
}

.admin-layout .auto-dropdown-control {
  display: flex;
  align-items: center;
  padding: 0 34px 0 12px;
  border-radius: 0;
  color: var(--color-text);
  font-family: inherit;
  /* (the same text size as the select beside it: .input-field) */
  font-size: 14px;
  font-weight: 450;
  text-align: left;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808a87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

.admin-layout .auto-dropdown-control:disabled {
  cursor: default;
}

.admin-layout .auto-dropdown-control:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

.admin-layout .auto-dropdown-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-layout .auto-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 20;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.admin-layout .auto-dropdown-menu[hidden] {
  display: none;
}

.admin-layout .auto-check.is-compact {
  margin: 0;
}

.admin-layout .auto-check.is-compact .auto-check-list {
  max-height: 300px;
}

/* The status chips and the runs under the block: the same spacing and sizes */
.admin-layout #mv-panel-automations .mv-run-chips .cm-chip {
  min-height: 36px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .admin-layout .mv-auto-pair {
    padding: 12px;
  }

  /* The button under the control, full width, the same order in both rows */
  .admin-layout .mv-auto-line {
    flex-direction: column;
  }

  .admin-layout .mv-auto-btn {
    flex: 0 0 auto;
    width: 100%;
    min-height: 44px;
  }

  .admin-layout .mv-auto-line select.input-field,
  .admin-layout .auto-dropdown-control {
    height: 44px;
    min-height: 44px;
  }

  .admin-layout #mv-panel-automations .mv-run-chips .cm-chip {
    min-height: 44px;
  }
}

/* The screens with their own flat grey fields use the same field colours */
.admin-layout {
  --ma-field-bg: var(--field-bg);
  --enroll-field-bg: var(--field-bg);
}

/* (a sticky note's text is the note itself: its colour, no field look; Ben 2026-11-03. In the same :not()
   as the chip picker's input, so this rule is no stronger than before: a phone search field's own rule
   still wins) */
.admin-layout :is(.input-field, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"]):not(.pbf *):not(.chip-picker-input, .flow-sticky-text),
.admin-layout .chip-picker {
  background-color: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 0 !important;
  color: var(--field-text);
}

.admin-layout :is(.input-field, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"]):not(.pbf *)::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

.admin-layout :is(.input-field, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"]):not(.pbf *):not(.chip-picker-input, .flow-sticky-text):hover:not(:disabled):not(:focus),
.admin-layout .chip-picker:hover:not(:focus-within) {
  border-color: var(--field-border-hover) !important;
}

/* Focus: a clear green border (the inner line makes it 2px wide), no glow */
.admin-layout :is(.input-field, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"]):not(.pbf *):not(.chip-picker-input):focus,
.admin-layout .chip-picker:focus-within {
  border-color: var(--field-border-focus) !important;
  box-shadow: inset 0 0 0 1px var(--field-border-focus) !important;
  outline: 2px solid transparent;
}

.admin-layout :is(.input-field, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"]):not(.pbf *)[aria-invalid="true"] {
  border-color: var(--color-danger) !important;
}

.admin-layout :is(.input-field, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"]):not(.pbf *):is(:disabled, [readonly]) {
  background-color: var(--field-disabled-bg) !important;
  color: var(--field-disabled-text);
}

/* Add member: the password's show / hide button sits flush with the field, in the same frame */
#member-add-drawer .ma-eye {
  border: 1px solid var(--field-border);
  border-left: 0;
  background: var(--field-bg);
}

#member-add-drawer .ma-password {
  gap: 0;
}

/* ===================== Automation steps: one colour per step group ===================== */
/* The ONE place the hues are set (automation-steps.js hueOf / groupHue picks the name). Used for the
   card's light tint, its left edge and the icon chip on the canvas, the swatch beside each group
   in the "+" menu, and the step panel / "Members at Step N" headers. Text keeps the normal text
   colour; the icons and labels stay, so nothing relies on colour alone. */
:root {
  --hue-messages: #2563eb;
  --hue-contacts: #7c3aed;
  --hue-course: #16a34a;
  --hue-timing: #d97706;
  --hue-conditions: #0d9488;
  --hue-flow: #e11d48;
  --hue-notify: #ea580c;
  --hue-other: #6b7280;
  --hue-tint: 7%;
  --hue-chip: 16%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hue-messages: #60a5fa;
    --hue-contacts: #a78bfa;
    --hue-course: #4ade80;
    --hue-timing: #fbbf24;
    --hue-conditions: #2dd4bf;
    --hue-flow: #fb7185;
    --hue-notify: #fb923c;
    --hue-other: #9ca3af;
    --hue-tint: 10%;
    --hue-chip: 22%;
  }
}

:root[data-theme="dark"] {
  --hue-messages: #60a5fa;
  --hue-contacts: #a78bfa;
  --hue-course: #4ade80;
  --hue-timing: #fbbf24;
  --hue-conditions: #2dd4bf;
  --hue-flow: #fb7185;
  --hue-notify: #fb923c;
  --hue-other: #9ca3af;
  --hue-tint: 10%;
  --hue-chip: 22%;
}

.flow-hue-messages { --step-hue: var(--hue-messages); }
.flow-hue-contacts { --step-hue: var(--hue-contacts); }
.flow-hue-course { --step-hue: var(--hue-course); }
.flow-hue-timing { --step-hue: var(--hue-timing); }
.flow-hue-conditions { --step-hue: var(--hue-conditions); }
.flow-hue-flow { --step-hue: var(--hue-flow); }
.flow-hue-notify { --step-hue: var(--hue-notify); }
.flow-hue-other { --step-hue: var(--hue-other); }

/* The card: a light tint of its colour and a 3px left edge; selected / problem / count looks are
   drawn on top as before (box-shadow and badges) */
.admin-layout .flow-editor .flow-block.flow-hued {
  background: color-mix(in srgb, var(--step-hue) var(--hue-tint), var(--color-surface));
  border-left: 3px solid var(--step-hue);
}

/* Members in this step right now (admin.js decorateFlowCounts): a soft glow in the card's own colour
   that breathes every 3s. Drawn on a pseudo-element that only fades (opacity), so the card, its text,
   badges, "+" buttons and lines never move and clicks go through it. Reduced motion: a still glow. */
.admin-layout .flow-editor .flow-block.is-has-members::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0;
  pointer-events: none;
  box-shadow:
    0 0 10px 1px color-mix(in srgb, var(--step-hue, var(--btn-focus)) 38%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--step-hue, var(--btn-focus)) 45%, transparent);
  opacity: 0.2;
  animation: flow-has-members 3s ease-in-out infinite;
}

@keyframes flow-has-members {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .flow-editor .flow-block.is-has-members::after {
    animation: none;
    opacity: 0.7;
  }
}

/* The icon chip (card and "+" menu): the colour, stronger; the icon itself in the text colour */
.admin-layout .flow-editor .flow-block.flow-hued .flow-icon,
.admin-layout .flow-editor .flow-icon.flow-hue-chip {
  background: color-mix(in srgb, var(--step-hue) var(--hue-chip), var(--color-surface));
  color: var(--color-text);
  border: 0;
}

/* The "+" menu: a small square swatch before each group name */
.admin-layout .flow-editor .flow-menu-heading {
  display: flex;
  align-items: center;
  gap: 6px;
}

.flow-hue-swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: var(--step-hue);
}

/* Panel headers: the step panel's title bar and "Members at Step N" */
.admin-layout .flow-hue-head {
  background: color-mix(in srgb, var(--step-hue) var(--hue-tint), var(--color-surface));
  box-shadow: inset 4px 0 0 var(--step-hue);
}

.admin-layout .flow-editor .flow-panel-header.flow-hue-head {
  padding: 10px 12px 10px 16px;
}

/* ===================== Members → Import from CSV (admin-member-import.js) ===================== */
/* The full page is the email editor's frame (.email-editor); its content scrolls */
.member-csv-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* One centred column; each block is a flat tinted section (as the Members bulk dialogs) */
.member-csv-body {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.member-csv-section {
  padding: 18px 20px;
  background: var(--box-bg);
  border: 1px solid var(--color-border);
  border-radius: 0;
  min-width: 0;
}

.member-csv-section > * + * {
  margin-top: 12px;
}

.member-csv-section > .member-csv-h + * {
  margin-top: 10px;
}

.member-csv-h {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.member-csv-h:focus {
  outline: none;
}

.member-csv-section p {
  margin-bottom: 0;
}

.member-csv-after {
  margin-top: 6px !important;
}

/* Stat blocks (counts) */
.member-csv-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-csv-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.member-csv-stat-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-text);
}

.member-csv-stat-label {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--color-text-muted);
}

.member-csv-stat.is-warn {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.08);
}

.member-csv-stat.is-warn .member-csv-stat-value {
  color: var(--color-warning-text);
}

.member-csv-summary-note {
  margin-top: 6px !important;
}

/* Radio choices: the radio and its label aligned, a short muted description under each */
.member-csv-choices {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-csv-legend {
  float: left;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.member-csv-legend + * {
  clear: both;
}

.member-csv-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}

.member-csv-choice input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.member-csv-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.member-csv-choice-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text);
}

.member-csv-choice-desc {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
}

/* "Import silently": its own block, red while it is off */
.member-csv-switch {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

.member-csv-switch.is-off {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.member-csv-sends {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.member-csv-sends > p {
  margin: 0;
}

.member-csv-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.member-csv-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-csv-progress progress {
  width: 100%;
  height: 12px;
}

.member-csv-progress p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.member-csv-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 180px;
  padding: 24px 16px;
  border: 2px dashed var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  text-align: center;
  cursor: pointer;
}

.member-csv-drop.is-over,
.member-csv-drop:hover,
#member-csv-file:focus-visible + .member-csv-drop {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
}

.member-csv-drop-title {
  font-weight: 600;
}

/* Tables: the members table's look, thin row dividers, scrolls inside its own space. One container
   only: the section is the box, the table has no frame of its own */
.member-csv-table-wrap,
.admin-layout .member-csv-section .table-wrap.member-csv-table-wrap {
  overflow-x: auto;
  border: 0;
  background: transparent;
}

/* Match columns: name, samples and the dropdown centred on one line; rows as tall as their content */
.admin-layout .member-csv-map td {
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: middle;
}

.admin-layout .member-csv-table tbody tr:hover td {
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
}

.admin-layout .member-csv-table th:last-child,
.admin-layout .member-csv-table td:last-child {
  padding-right: 14px;
}

.admin-layout .member-csv-table th {
  position: static;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.admin-layout .member-csv-table td {
  padding: 12px 14px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .member-csv-table tbody tr:nth-child(even) td {
  background: transparent;
}

.admin-layout .member-csv-table tbody tr:last-child td {
  border-bottom: 0;
}

.member-csv-preview {
  min-width: 720px;
}

/* Compact fields everywhere in the import (as the small selects in the admin tables): 36px, 14px
   text, no bottom margin; a select keeps room on its right for its arrow */
.admin-layout .member-csv .input-field {
  height: 36px;
  margin: 0;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 22px;
}

.admin-layout .member-csv select.input-field {
  padding-right: 34px;
  background-position: right 10px center;
}

.member-csv-map-select {
  width: 1%;
  white-space: nowrap;
}

.admin-layout .member-csv-map-select select.input-field {
  width: 240px;
  max-width: 100%;
  min-width: 0;
}

.admin-layout .member-csv #member-csv-source {
  max-width: 420px;
}

.member-csv-col,
.member-csv-email {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.member-csv-line {
  white-space: nowrap;
  color: var(--color-text-muted);
}

.member-csv-phone-cell {
  white-space: nowrap;
}

.member-csv-status .badge {
  margin: 1px 0;
}

.member-csv-notes {
  min-width: 180px;
  font-size: 13px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.member-csv-samples {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.member-csv-counts {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-muted);
}

.member-csv-counts:empty {
  display: none;
}

.member-csv-field {
  margin: 0;
}

.member-csv-field + .member-csv-field {
  margin-top: 16px;
}

.member-csv-field .field-label {
  display: block;
  margin-bottom: 4px;
}

.member-csv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.member-csv-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 0 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  font-size: 13px;
}

.member-csv-tag .link-button {
  min-width: 32px;
  min-height: 32px;
  font-size: 16px;
}

/* Create a new tag from the import screen */
.member-csv-new-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.member-csv-new-tag .input-field {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
  border-radius: 0;
}

.member-csv-new-tag-msg:empty {
  display: none;
}

.member-csv-new-tag-msg {
  margin: 6px 0 0;
}

.member-csv-silent-label {
  font-weight: 600;
}

/* The green "Silent import" notice */
.member-csv-silent-line {
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-accent-text);
  background: rgba(62, 207, 142, 0.1);
  border: 1px solid rgba(62, 207, 142, 0.5);
  border-radius: 0;
}

.member-csv-silent-line[hidden],
.member-csv-sends[hidden] {
  display: none;
}

.member-csv-warning,
.member-csv-red:not(:empty) {
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 20px;
  border: 1px solid var(--color-danger);
  border-radius: 0;
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

.member-csv-warning {
  font-weight: 600;
}

.member-csv-red:empty {
  display: none;
}

.member-csv-red-title {
  margin: 0 0 4px;
  font-weight: 600;
}

.member-csv-red ul {
  margin: 0;
  padding-left: 20px;
}

/* The step's action row: Back / Cancel, then the main action on the right */
.member-csv-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.member-csv-actions .btn-primary {
  order: 2;
}

@media (max-width: 600px) {
  .member-csv-body {
    padding: 16px 16px 40px;
    gap: 20px;
  }

  .member-csv-section {
    padding: 14px 14px;
  }

  .member-csv-actions .btn,
  .member-csv-tools .btn {
    min-height: 44px;
  }

  .member-csv-actions .btn {
    flex: 1 1 auto;
  }

  /* Match columns: each column stacks (name, samples, then the dropdown) */
  .member-csv-map thead {
    display: none;
  }

  .member-csv-map,
  .member-csv-map tbody,
  .member-csv-map tr,
  .member-csv-map td {
    display: block;
    width: 100%;
  }

  .admin-layout .member-csv-map-select select.input-field {
    width: 100%;
  }

  .member-csv-map td.member-csv-map-select {
    white-space: normal;
  }

  .admin-layout .member-csv-map td {
    padding: 4px 14px;
    border-bottom: 0;
  }

  .admin-layout .member-csv-map tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .admin-layout .member-csv-map tr:last-child {
    border-bottom: 0;
  }

  .member-csv-map td[data-label="Sample values"]::before,
  .member-csv-map td[data-label="Import as"]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
  }
}

/* ===================== Page not found (public/404.html, not-found.js) ===================== */
.notfound-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.notfound-logo {
  display: block;
  margin: 0 auto 12px;
  border-radius: 0;
}

.notfound-card .btn {
  margin-top: 8px;
  border-radius: 0;
}

.notfound-card [hidden] {
  display: none;
}

/* ----- The "+" step picker (admin.js openFlowMenu): one clean panel -----
   A 1px neutral border, a soft shadow, square corners, the theme's surface; at most 980px wide and
   the window's height less 140px (it scrolls by itself). The step groups as equal columns (5 wide,
   2 on tablets, 1 on phones), each with its colour square and an uppercase label over a thin line.
   Each step: one button row with a fixed 32px square badge, the name and one line about it. */
.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 24px;
  align-items: start;
  box-sizing: border-box;
  width: min(980px, calc(100vw - 32px));
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 140px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.28);
  outline: none;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-group,
.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-group + .flow-menu-group {
  min-width: 0;
  margin: 0;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-hue-swatch {
  width: 10px;
  height: 10px;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0 0 2px;
  padding: 10px 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-item:hover,
.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-item:focus {
  background: color-mix(in srgb, var(--step-hue, var(--color-primary)) 10%, var(--color-surface));
  box-shadow: none;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-item:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: -2px;
  box-shadow: none;
}

/* The badge: a fixed square, never stretched by the row */
.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-badge {
  flex: none;
  align-self: center;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-badge svg {
  width: 16px;
  height: 16px;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-note {
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Can't be added here: dimmed, the reason as its tooltip (it still answers a click, as before) */
.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-item.is-blocked {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tablets: two columns */
@media (max-width: 1099px) {
  .admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(640px, calc(100vw - 32px));
  }
}

/* Phones: one column, a sheet at the bottom of the screen */
@media (max-width: 760px) {
  .admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid {
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    max-height: calc(100vh - 140px);
  }

  .admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-item {
    min-height: 44px;
  }
}

/* ----- The step picker as one centred dialog (admin.js openFlowMenu) -----
   A full-window layer: a light backdrop (closes it when clicked) and the panel centred in the
   window on every screen (a sheet at the bottom on phones). Nothing is positioned from the "+". */
.admin-layout .flow-editor.flow-menu-portal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-layout .flow-editor.flow-menu-portal .flow-menu-backdrop {
    background: rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] .admin-layout .flow-editor.flow-menu-portal .flow-menu-backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu-dialog {
  position: relative;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  margin: auto;
  transform: none;
}

/* Names and descriptions: up to 2 lines each (the whole text stays in the tooltip) */
.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-name,
.admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid .flow-menu-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .admin-layout .flow-editor.flow-menu-portal {
    align-items: flex-end;
    padding: 8px;
  }

  .admin-layout .flow-editor.flow-menu-portal .flow-menu-dialog {
    width: 100%;
  }

  .admin-layout .flow-editor.flow-menu-portal .flow-menu.is-grid {
    width: 100%;
    margin: 0;
  }
}

/* ----- Automation editor: compact spacing, the counts line and the status chips ----- */
.admin-layout .flow-editor.is-compact {
  --flow-gap: 56px;
}

.admin-layout .flow-editor .flow-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.admin-layout .flow-editor .flow-counts-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
}

/* "Counts as of 6:02 PM": small and muted like the chips' "N runs", right-aligned in the same row,
   centred with the chips, never broken over two lines (under the chips, left-aligned, on phones) */
.admin-layout .flow-editor #flow-counts-time {
  order: 1;
  margin: 0 0 0 auto;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
  color: var(--color-text-lighter);
}

.admin-layout .flow-editor .flow-counts-summary {
  order: 0;
}

.admin-layout .flow-editor #flow-counts-refresh,
.admin-layout .flow-editor .flow-compact-toggle {
  order: 2;
}

/* The "i" after the chips (members in more than one status) and its note */
.status-info {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.status-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.status-info-btn:hover,
.status-info-btn[aria-expanded="true"] {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.status-info-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.status-info-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 18px;
  white-space: normal;
  text-align: left;
}

.status-info-pop[hidden] {
  display: none;
}

.admin-layout .flow-editor #flow-counts-refresh {
  width: auto;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius);
  font-size: 13px;
}

.admin-layout .flow-editor .flow-compact-toggle {
  font-size: 13px;
}

.admin-layout .flow-editor .flow-counts-note {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* One square chip per status: a soft tint, a 3px coloured left edge, the label and the number */
.admin-layout .flow-editor .flow-status-chip {
  --chip-bg: #eef0f3;
  --chip-text: #4b5563;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-left: 3px solid var(--chip-text);
  border-radius: var(--radius);
  background: var(--chip-bg);
  color: var(--chip-text);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
}

.admin-layout .flow-editor button.flow-status-chip {
  cursor: pointer;
}

.admin-layout .flow-editor button.flow-status-chip:hover {
  background: color-mix(in srgb, var(--chip-text) 12%, var(--chip-bg));
}

.admin-layout .flow-editor button.flow-status-chip:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .flow-editor .flow-status-count {
  font-weight: 700;
}

.admin-layout .flow-editor .flow-status-chip.is-zero {
  opacity: 0.6;
}

.admin-layout .flow-editor .flow-status-chip.is-active { --chip-bg: #e8f5ec; --chip-text: #1f7a3d; }
.admin-layout .flow-editor .flow-status-chip.is-done { --chip-bg: #e8f0fd; --chip-text: #1e3a8a; }
.admin-layout .flow-editor .flow-status-chip.is-stopped { --chip-bg: #eef0f3; --chip-text: #4b5563; }
.admin-layout .flow-editor .flow-status-chip.is-failed { --chip-bg: #fdecec; --chip-text: #b91c1c; }
.admin-layout .flow-editor .flow-status-chip.is-removed { --chip-bg: #f3efe9; --chip-text: #6b5b4b; }

/* Dark mode: the same colours as deep tints with light text */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-layout .flow-editor .flow-status-chip.is-active { --chip-bg: #15291c; --chip-text: #7fd39a; }
  :root:not([data-theme="light"]) .admin-layout .flow-editor .flow-status-chip.is-done { --chip-bg: #16223a; --chip-text: #9db8f5; }
  :root:not([data-theme="light"]) .admin-layout .flow-editor .flow-status-chip.is-stopped { --chip-bg: #222528; --chip-text: #b4bac2; }
  :root:not([data-theme="light"]) .admin-layout .flow-editor .flow-status-chip.is-failed { --chip-bg: #351a1a; --chip-text: #ff9b8f; }
  :root:not([data-theme="light"]) .admin-layout .flow-editor .flow-status-chip.is-removed { --chip-bg: #2b2620; --chip-text: #cbb9a4; }
}

:root[data-theme="dark"] .admin-layout .flow-editor .flow-status-chip.is-active { --chip-bg: #15291c; --chip-text: #7fd39a; }
:root[data-theme="dark"] .admin-layout .flow-editor .flow-status-chip.is-done { --chip-bg: #16223a; --chip-text: #9db8f5; }
:root[data-theme="dark"] .admin-layout .flow-editor .flow-status-chip.is-stopped { --chip-bg: #222528; --chip-text: #b4bac2; }
:root[data-theme="dark"] .admin-layout .flow-editor .flow-status-chip.is-failed { --chip-bg: #351a1a; --chip-text: #ff9b8f; }
:root[data-theme="dark"] .admin-layout .flow-editor .flow-status-chip.is-removed { --chip-bg: #2b2620; --chip-text: #cbb9a4; }

/* Total (each member once): neutral, not a button */
.admin-layout .flow-editor .flow-status-chip.is-total { --chip-bg: transparent; --chip-text: var(--color-text); border-left-color: var(--color-border-strong); }

/* People counted once: the second number ("26 runs", "26 times", "40 views"), small and muted,
   only when it differs from the people count. It never wraps inside narrow chips and cards. */
.count-times {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text-lighter);
  opacity: 0.9;
}

.flow-count .count-times,
.flow-status-chip .count-times,
.auto-stat .count-times {
  color: inherit;
  opacity: 0.7;
}

.admin-layout .flow-editor .flow-count {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .admin-layout .flow-editor #flow-counts-time {
    flex-basis: 100%;
    order: 1;
    margin-left: 0;
  }

  /* On a phone the note opens under the whole row of chips, as wide as it */
  .admin-layout .flow-editor .flow-counts-summary,
  .admin-layout .auto-stats {
    position: relative;
  }

  .status-info {
    position: static;
  }

  .status-info-pop {
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* ======================================================================
   The public "What's inside" page (map-preview.html, map-preview.js): the My Map look, read-only.
   A slim fixed bar (the site's name, Log in), the courses as cards; inside each, its modules / weeks
   side by side as a timeline (wrapping), each with its lessons as pills and when they open. Phones:
   everything one under the other. Square corners; the map's own colours (light and dark).
   ====================================================================== */
/* Always dark (html data-theme="dark" on this page only). Everything else is the member map's own
   look (body.has-site-bar > .card.map-card, .map-head, .map-legend, .map-toolbar, .map-canvas...);
   only the top is more compact and the canvas fills the rest of the window. */
body.map-preview-page {
  background: var(--color-bg);
}

/* No top bar or breadcrumb above it: a small gap only */
body.has-site-bar.map-preview-page > .card.map-card.mpv-map-card {
  margin-top: 12px;
  padding-top: 20px;
  padding-bottom: 16px;
}

.map-preview-page .mpv-map-card #map-title {
  margin: 0;
  font-size: 28px;
  line-height: 34px;
}

.map-preview-page .mpv-map-card .map-intro {
  margin: 2px 0 0;
}

/* The canvas: the rest of the window under the title block and the toolbar (at least 480px) */
.map-preview-page .mpv-map-card .map-canvas {
  height: calc(100vh - 190px);
  height: calc(100dvh - 190px);
  min-height: 480px;
}

/* "Log in" where "Continue here" sits on the member map: the same button */
.map-preview-page .btn.mpv-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Phones (the member map's compact layout): the sentence hidden as there, Log in kept visible */
@media (max-width: 700px) {
  .map-preview-page .mpv-map-card .map-canvas {
    height: calc(100vh - 150px);
    height: calc(100dvh - 150px);
    min-height: 420px;
  }
}

/* The SVG fills the canvas exactly (its own "height: 100%" has no definite height to resolve
   against in a stretching box, and would fall back to the browser's 150px) */
.map-preview-page .mpv-map-card .map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* List view: scrolls inside the card */
.map-preview-page .mpv-map-card .map-list.is-shown {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}


.map-preview-page .mpv-card {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 1200px;
  margin: 24px auto 40px;
}

.mpv-title {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 34px;
}

.mpv-status {
  padding: 16px 0;
}

.mpv-status[hidden] {
  display: none;
}

.mpv-status-text {
  margin: 0;
  color: var(--color-text-muted);
}

/* The skeleton while it loads (still blocks, no animation) */
.mpv-skeleton {
  display: grid;
  gap: 12px;
}

.mpv-skeleton span {
  display: block;
  height: 72px;
  background: var(--map-locked-bg);
}

.mpv-courses,
.mpv-modules,
.mpv-lessons {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpv-courses[hidden] {
  display: none;
}

.mpv-courses {
  display: grid;
  gap: 20px;
}

.mpv-course {
  padding: 16px;
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--map-next);
  border-radius: var(--radius);
  background: var(--map-node-bg);
}

/* Every item: a button, the map's card look, no link */
.mpv-course-head,
.mpv-module-head,
.mpv-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mpv-course-head:hover,
.mpv-module-head:hover,
.mpv-lesson:hover {
  background: var(--map-next-soft);
}

.mpv-course-head:focus-visible,
.mpv-module-head:focus-visible,
.mpv-lesson:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.mpv-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mpv-course-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.mpv-item-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.mpv-item-sub {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--color-text-muted);
}

.mpv-course-desc {
  margin: 0 10px 8px;
  font-size: 14px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.mpv-empty {
  margin: 4px 10px;
  font-size: 13px;
}

/* The modules / weeks: a timeline left to right (as many per row as fit), wrapping */
.mpv-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.mpv-module {
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--map-line);
  border-radius: var(--radius);
  background: var(--map-canvas-bg);
}

.mpv-module-head {
  padding: 6px 8px;
}

.mpv-lessons {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

/* A lesson: a pill in the map's "open" look, its release timing under the title */
.mpv-lesson {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--map-line);
  background: var(--map-node-bg);
}

.mpv-lesson-mark {
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--map-next);
  border-radius: var(--radius);
}

@media (max-width: 600px) {
  .map-preview-page .mpv-card {
    width: calc(100% - 16px);
    margin: 12px auto 24px;
    padding: 16px 12px;
  }

  .mpv-modules {
    grid-template-columns: minmax(0, 1fr);
  }

  .mpv-course {
    padding: 10px;
  }
}

/* ======================================================================
   Automations "Who was here" popup (admin.js openPeople): a compact table, 13px throughout.
   tick | member (name, email) | started | status badge + details | actions, as grid columns that
   never overlap; a sticky header row; zebra rows; ticked rows tinted with a blue left edge.
   ====================================================================== */
.admin-layout .email-pop-panel.people-panel {
  width: min(900px, 100%);
  padding: 20px;
  font-size: 13px;
}

.admin-layout .email-pop-panel.people-panel:focus {
  outline: none;
}

.admin-layout .email-pop-panel.people-panel:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

.admin-layout .people-panel .visits-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.admin-layout .people-panel .visits-title:focus {
  outline: none;
}

.admin-layout .people-panel .email-pop-body {
  overflow-wrap: normal;
}

.admin-layout .people-panel .people-view {
  gap: 8px;
}

.admin-layout .people-panel .people-tools {
  flex-wrap: nowrap;
}

.admin-layout .people-panel .people-tools .input-field,
.admin-layout .people-panel .people-tools .btn {
  height: 36px;
  min-height: 36px;
  font-size: 13px;
}

.admin-layout .people-panel .people-tools .btn {
  flex: none;
  padding: 0 12px;
}

.admin-layout .people-panel .people-sub,
.admin-layout .people-panel .people-count,
.admin-layout .people-panel .people-hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .people-panel .people-hint[hidden] {
  display: none;
}

/* The table */
.admin-layout .people-panel .people-table {
  width: 100%;
  border-top: 1px solid var(--color-border);
}

.admin-layout .people-panel .people-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .people-panel .people-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1.5fr) 118px minmax(0, 1.6fr) auto;
  gap: 0 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  background: transparent;
}

.admin-layout .people-panel .people-list > .people-row:nth-child(even) {
  background: #f7f9fc;
}

.admin-layout .people-panel .people-list > .people-row:hover {
  background: #eef3fa;
}

.admin-layout .people-panel .people-list > .people-row.is-selected {
  border-left-color: #2563eb;
  background: #e8f0fd;
}

/* The header row: stays at the top while the list scrolls */
.admin-layout .people-panel .people-head {
  position: sticky;
  top: -20px;
  z-index: 1;
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--color-surface);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .people-panel .people-cell {
  min-width: 0;
}

.admin-layout .people-panel .people-check {
  display: flex;
  align-items: center;
}

.admin-layout .people-panel .people-who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.admin-layout .people-panel .people-name,
.admin-layout .people-panel .people-email,
.admin-layout .people-panel .people-started {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}

.admin-layout .people-panel .people-name {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: left;
}

.admin-layout .people-panel .people-email {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
}

.admin-layout .people-panel .people-started {
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .people-panel .people-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

/* The status badge: the same tints as the canvas's status chips */
.admin-layout .people-panel .people-badge {
  --chip-bg: #eef0f3;
  --chip-text: #4b5563;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 8px;
  border-left: 3px solid var(--chip-text);
  border-radius: var(--radius);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-layout .people-panel .people-badge.is-active { --chip-bg: #e8f5ec; --chip-text: #1f7a3d; }
.admin-layout .people-panel .people-badge.is-done { --chip-bg: #e8f0fd; --chip-text: #1e3a8a; }
.admin-layout .people-panel .people-badge.is-stopped { --chip-bg: #eef0f3; --chip-text: #4b5563; }
.admin-layout .people-panel .people-badge.is-failed { --chip-bg: #fdecec; --chip-text: #b91c1c; }
.admin-layout .people-panel .people-badge.is-removed { --chip-bg: #f3efe9; --chip-text: #6b5b4b; }

.admin-layout .people-panel .people-details {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* Actions: their own column, right-aligned, never on top of the status */
.admin-layout .people-panel .people-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
}

.admin-layout .people-panel .people-actions .btn {
  width: auto;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: 12px;
  white-space: nowrap;
}

/* Dark mode: zebra and selection as soft light tints; the badges darker */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-layout .people-panel .people-list > .people-row:nth-child(even) { background: rgba(255, 255, 255, 0.04); }
  :root:not([data-theme="light"]) .admin-layout .people-panel .people-list > .people-row:hover { background: rgba(255, 255, 255, 0.07); }
  :root:not([data-theme="light"]) .admin-layout .people-panel .people-list > .people-row.is-selected { background: rgba(96, 165, 250, 0.14); border-left-color: #60a5fa; }
  :root:not([data-theme="light"]) .admin-layout .people-panel .people-badge.is-active { --chip-bg: #15291c; --chip-text: #7fd39a; }
  :root:not([data-theme="light"]) .admin-layout .people-panel .people-badge.is-done { --chip-bg: #16223a; --chip-text: #9db8f5; }
  :root:not([data-theme="light"]) .admin-layout .people-panel .people-badge.is-stopped { --chip-bg: #222528; --chip-text: #b4bac2; }
  :root:not([data-theme="light"]) .admin-layout .people-panel .people-badge.is-failed { --chip-bg: #351a1a; --chip-text: #ff9b8f; }
  :root:not([data-theme="light"]) .admin-layout .people-panel .people-badge.is-removed { --chip-bg: #2b2620; --chip-text: #cbb9a4; }
}

:root[data-theme="dark"] .admin-layout .people-panel .people-list > .people-row:nth-child(even) { background: rgba(255, 255, 255, 0.04); }
:root[data-theme="dark"] .admin-layout .people-panel .people-list > .people-row:hover { background: rgba(255, 255, 255, 0.07); }
:root[data-theme="dark"] .admin-layout .people-panel .people-list > .people-row.is-selected { background: rgba(96, 165, 250, 0.14); border-left-color: #60a5fa; }
:root[data-theme="dark"] .admin-layout .people-panel .people-badge.is-active { --chip-bg: #15291c; --chip-text: #7fd39a; }
:root[data-theme="dark"] .admin-layout .people-panel .people-badge.is-done { --chip-bg: #16223a; --chip-text: #9db8f5; }
:root[data-theme="dark"] .admin-layout .people-panel .people-badge.is-stopped { --chip-bg: #222528; --chip-text: #b4bac2; }
:root[data-theme="dark"] .admin-layout .people-panel .people-badge.is-failed { --chip-bg: #351a1a; --chip-text: #ff9b8f; }
:root[data-theme="dark"] .admin-layout .people-panel .people-badge.is-removed { --chip-bg: #2b2620; --chip-text: #cbb9a4; }

/* Phones: each row a small card: name + status, then email and date, then the actions */
@media (max-width: 640px) {
  .admin-layout .email-pop-panel.people-panel {
    padding: 14px;
  }

  .admin-layout .people-panel .people-tools {
    flex-wrap: wrap;
  }

  .admin-layout .people-panel .people-head {
    display: none;
  }

  .admin-layout .people-panel .people-row {
    grid-template-columns: 24px minmax(0, 1fr) minmax(0, auto);
    grid-template-areas:
      'check who status'
      '. started started'
      '. actions actions';
    gap: 4px 8px;
    align-items: start;
  }

  .admin-layout .people-panel .people-check { grid-area: check; }
  .admin-layout .people-panel .people-who { grid-area: who; }
  .admin-layout .people-panel .people-status { grid-area: status; align-items: flex-end; text-align: right; }
  .admin-layout .people-panel .people-started { grid-area: started; }
  .admin-layout .people-panel .people-actions { grid-area: actions; justify-content: flex-start; flex-wrap: wrap; }
}

/* Member's Courses tab: "Access email: sent Oct 25, 6:54 PM" / "not sent (...)" and "Send access
   email now" under each course's title (admin.js accessEmailLine) */
.admin-layout .member-course-email-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 2px 0 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .member-course-email-line.is-skipped,
.admin-layout .member-course-email-line.is-failed,
.admin-layout .member-course-email-line.is-none {
  color: var(--color-warning-text);
}

.admin-layout .member-course-email-line .btn {
  width: auto;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: 12px;
}

/* ---------- Members → View: "Reset access password" (admin.js openResetPassword) ---------- */
#mv-reset-password {
  width: auto;
  margin-left: auto;
  white-space: nowrap;
}

#mv-reset-password.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pw-dialog {
  /* Centred over the page (some global dialog rules set a margin) */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.pw-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.pw-title {
  margin: 0 0 2px;
  font-size: 18px;
  line-height: 26px;
}

.pw-who {
  display: grid;
  gap: 1px;
  margin-top: 6px;
  padding: 8px 10px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-alt);
}

.pw-who-name {
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.pw-who-email {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.pw-self {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 17px;
  color: var(--color-warning-text);
}

/* Members list: "Reset password" next to View and More; the same height, never wrapping; the key
   alone (with its tooltip and label for screen readers) on narrower screens */
.admin-layout .member-row-actions .member-reset-pw {
  width: auto;
  white-space: nowrap;
}

.admin-layout .member-row-actions .member-reset-pw.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Members page on a phone: its toolbar buttons (Import names, Import from CSV, Add member) wrap
   instead of making the page wider than the screen */
@media (max-width: 600px) {
  .admin-layout #panel-members .admin-toolbar-end {
    flex-wrap: wrap;
    min-width: 0;
  }
}

@media (max-width: 1100px) {
  .admin-layout .member-row-actions .member-reset-pw .member-reset-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-layout .member-row-actions .member-reset-pw .btn-icon-svg {
    margin: 0;
  }
}

.pw-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.pw-input-row {
  display: flex;
  gap: 8px;
}

.pw-input-row .input-field {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pw-eye,
.pw-generate {
  width: auto;
  border-radius: var(--radius);
}

.pw-generate {
  justify-self: start;
}

.pw-rules {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-muted);
}

.pw-email-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: -6px 0 0 26px;
  font-size: 13px;
}

.pw-email-tools[hidden] {
  display: none;
}

.pw-confirm-line {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--color-warning-text);
  background: var(--color-surface-alt);
  font-size: 13px;
  line-height: 19px;
}

.pw-dialog .form-message:empty {
  display: none;
}

.pw-dialog .form-message {
  margin: 12px 0 0;
}

.pw-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.pw-actions .btn {
  width: auto;
  border-radius: var(--radius);
}

/* ---------- Messages → Emails (admin.js renderEmailsPage) ---------- */
.emails-intro {
  margin: 0 0 16px;
}

.emails-group {
  margin: 0 0 24px;
}

.emails-group-title {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-lighter);
}

.emails-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.emails-row + .emails-row {
  border-top: 0;
}

.emails-row-title {
  margin: 0;
  font-size: 15px;
  line-height: 21px;
}

.emails-row-meta,
.emails-row-when {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
}

.emails-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  text-align: right;
}

.emails-row-status {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-lighter);
  max-width: 220px;
}

.emails-row-side .btn {
  width: auto;
  border-radius: var(--radius);
}

@media (max-width: 600px) {
  .emails-row {
    flex-direction: column;
    align-items: stretch;
  }

  .emails-row-side {
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------- The To do widget's tabs and Reminders (admin-todo.js) ---------- */
.todo-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.todo-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.todo-tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.todo-tab-badge {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 0;
  background: #d97706;
  color: #ffffff;
  font-size: 11px;
  line-height: 17px;
}

.todo-tab-badge[hidden],
.todo-part[hidden],
.rem-part[hidden],
.rem-days[hidden],
.rem-interval[hidden],
.rem-until-row[hidden],
.rem-snooze-menu[hidden] {
  display: none;
}

.todo-part,
.rem-part {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rem-form {
  display: grid;
  gap: 6px;
  padding: 10px 10px 6px;
}

.rem-form input,
.rem-form select {
  min-width: 0;
  height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
}

.rem-form .rem-title {
  height: 32px;
  font-size: 13.5px;
}

/* The note: several lines (about 3, growing to about 8, then it scrolls: admin-todo.js fitNote) */
.rem-form .rem-note-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: calc(3 * 18px + 10px);
  max-height: calc(8 * 18px + 10px);
  padding: 4px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  resize: none;
  overflow-y: hidden;
}

.rem-form .rem-add-link {
  justify-self: start;
  margin-top: -2px;
}

/* Under the note: "• List" and "Add link" */
.rem-note-tools {
  display: flex;
  gap: 14px;
  margin-top: -2px;
}

/* Save: a small button (off, with a plain word beside it, while there is no title); Cancel a link */
.rem-form .rem-save {
  padding: 3px 12px;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  background: var(--color-primary);
  color: var(--color-primary-text, #fff);
  font-weight: 600;
  text-decoration: none;
}

.rem-form .rem-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rem-form-actions {
  align-items: center;
}

.rem-save-hint {
  margin-right: auto;
  font-size: 12px;
  color: var(--color-text-muted);
}

.todo-note.is-saved {
  color: var(--color-success-text, var(--color-text));
}

/* A bulleted list in a reminder's note (lines starting with "• ", note-links.js) */
.note-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.rem-item-note .note-list .note-item,
.alert-bar-detail .note-list .note-item {
  display: list-item;
}

/* A reminder's note shown (the list and the red bar, note-links.js): one line each, every link on its
   own line with its full address, cut with an ellipsis when it doesn't fit (the whole one in its title) */
.rem-item-note .note-line,
.alert-bar-detail .note-line {
  display: block;
  min-width: 0;
}

.note-link-row {
  display: flex;
  min-width: 0;
  max-width: 100%;
}

.note-link-after {
  flex: none;
}

.note-link {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0;
  color: var(--color-link, var(--color-primary));
  text-decoration: underline;
}

.alert-bar-detail .note-link {
  color: inherit;
}

.rem-when {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 6px;
}

.rem-when .rem-repeat {
  grid-column: 1 / -1;
}

.rem-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rem-day {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  font-size: 12px;
  cursor: pointer;
}

.rem-day input {
  height: auto;
  margin: 0;
}

.rem-interval,
.rem-until-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.rem-every {
  width: 64px;
}

.rem-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.rem-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 8px 8px;
  border-bottom: 1px solid var(--color-border);
}

.rem-item-title {
  font-size: 13.5px;
  line-height: 19px;
  overflow-wrap: anywhere;
}

.rem-item-note {
  min-width: 0;
  font-size: 12.5px;
  line-height: 17px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.rem-item-meta {
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-lighter);
}

.rem-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 4px;
}

/* Due or missed: a calm amber edge at the top of the list */
.rem-item.is-due {
  border-left: 3px solid #d97706;
  background: rgba(217, 119, 6, 0.07);
}

.rem-item.is-due .rem-item-meta {
  color: #b45309;
  font-weight: 600;
}

.rem-btn {
  padding: 3px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 12.5px;
  line-height: 18px;
  cursor: pointer;
}

.rem-btn:hover {
  background: var(--color-secondary-hover);
}

.rem-btn.is-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.rem-snooze {
  position: relative;
  display: inline-block;
}

.rem-snooze-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  gap: 4px;
  min-width: 190px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.rem-snooze-menu .todo-link {
  justify-self: start;
}

.rem-pick-row {
  display: grid;
  gap: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.rem-pick {
  height: 28px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 12.5px;
}

.rem-settings {
  display: grid;
  gap: 4px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--color-border);
}

.rem-setting {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rem-item.is-due .rem-item-meta {
    color: #fbbf24;
  }
}

:root[data-theme="dark"] .rem-item.is-due .rem-item-meta {
  color: #fbbf24;
}

/* ---------- The red alert bar (public/admin-alert-bar.js): due reminders and unread notifications ----------
   Fixed at the very top, above everything (a manual popover, so also above a modal dialog). While it
   shows, html.has-alert-bar and --alert-bar-h (its height) push the page down: the body, the sticky
   top bar, and the full-page and fixed panels that start at the top. White on red: 6.5:1 (light),
   8.3:1 (dark). Square corners; wraps on phones. */
:root {
  --alert-bar-bg: #b91c1c;
  --alert-bar-text: #ffffff;
  --alert-bar-btn-text: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --alert-bar-bg: #991b1b;
    --alert-bar-btn-text: #991b1b;
  }
}

:root[data-theme="dark"] {
  --alert-bar-bg: #991b1b;
  --alert-bar-btn-text: #991b1b;
}

.alert-bar,
.alert-bar[popover] {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2147483000;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: 50vh;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.35);
  border-radius: 0;
  background: var(--alert-bar-bg);
  color: var(--alert-bar-text);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.alert-bar[hidden] {
  display: none;
}

.alert-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 16px;
}

.alert-bar-text {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 21px;
  overflow-wrap: anywhere;
}

.alert-bar-what {
  margin-right: 8px;
  font-weight: 800;
}

.alert-bar-detail {
  margin-right: 8px;
  font-weight: 600;
}

.alert-bar-when,
.alert-bar-when .time-both,
.alert-bar-when .time-both-main,
.alert-bar-when .time-both-member,
.alert-bar-when .time-both-relative {
  color: var(--alert-bar-text);
  font-weight: 600;
}

.alert-bar-when .time-both-member {
  margin-left: 6px;
}

.alert-bar-when .time-both-member::before {
  content: "· ";
}

.alert-bar-error {
  display: block;
  margin-top: 2px;
  font-weight: 700;
  text-decoration: underline;
}

.alert-bar-error[hidden] {
  display: none;
}

.alert-bar-actions,
.alert-bar-queue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.alert-bar-count {
  font-size: 14px;
  white-space: nowrap;
}

.alert-bar-btn {
  min-height: 36px;
  padding: 6px 12px;
  border: 2px solid var(--alert-bar-text);
  border-radius: 0;
  background: transparent;
  color: var(--alert-bar-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
}

.alert-bar-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.alert-bar-btn.is-primary {
  background: var(--alert-bar-text);
  color: var(--alert-bar-btn-text);
}

.alert-bar-btn.is-primary:hover {
  background: #fee2e2;
}

.alert-bar-btn:focus-visible {
  outline: 3px solid var(--alert-bar-text);
  outline-offset: 2px;
}

.alert-bar-btn[hidden] {
  display: none;
}

/* The page under the bar */
html.has-alert-bar body {
  padding-top: var(--alert-bar-h, 0px);
}

html.has-alert-bar .site-bar {
  top: var(--alert-bar-h, 0px);
}

html.has-alert-bar .email-editor,
html.has-alert-bar .visits-dialog,
html.has-alert-bar .notify-backdrop,
html.has-alert-bar .pw-dialog,
html.has-alert-bar .pb-media,
html.has-alert-bar .admin-layout .pb-crop-backdrop,
html.has-alert-bar .map-card.is-fullscreen.is-overlay {
  top: var(--alert-bar-h, 0px);
}

html.has-alert-bar .notify-stack {
  top: calc(16px + var(--alert-bar-h, 0px));
}

@media (max-width: 600px) {
  .alert-bar-inner {
    padding: 8px 16px;
    gap: 8px;
  }

  .alert-bar-text {
    flex-basis: 100%;
    font-size: 14px;
    line-height: 20px;
  }

  .alert-bar-btn {
    min-height: 40px;
  }
}

/* ---------- Lesson page: the video in a frame, with its control bar (lesson.html .lesson-frame) ----------
   A framed panel (centred, at most 1000px): a strip with the lesson's small label and its length, the
   video on a 16:9 black stage (at most 900px wide), the "IMPORTANT" note as a callout, then one control
   bar: Previous / Next on the left, Mark complete (yellow, green when done) and Bookmark on the right.
   Square corners; the member pages' box tones (light and dark). Phones: full width, the bar stacked. */
.lesson-frame {
  max-width: 1000px;
  margin: 4px auto 24px;
  padding: 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--box-bg-inner, var(--color-surface));
}

.lesson-frame[hidden] {
  display: none;
}

.lesson-frame-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin: -4px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--color-text-muted);
}

.lesson-frame-label {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lesson-frame-label:empty {
  display: none;
}

.lesson-frame .lesson-length {
  margin: 0;
  font-size: 12.5px;
}

/* The stage: the video (or the Part tabs and their player), centred, never cropped */
.lesson-stage {
  max-width: 900px;
  margin: 0 auto;
}

.lesson-stage:has(#lesson-video:empty),
.lesson-stage:has(#lesson-video[hidden]) {
  display: none;
}

body.has-site-bar .lesson-stage .video-container {
  max-width: 100%;
  margin: 0 0 10px;
  border-radius: 0;
  background: #000;
}

.lesson-stage #lesson-video > :last-child {
  margin-bottom: 0;
}

/* The note above the bar: a callout with a thin amber edge (gone once the lesson is complete) */
.lesson-frame .lesson-complete-notice {
  max-width: 900px;
  margin: 16px auto 0;
  padding: 10px 14px;
  border-left: 3px solid #f5b301;
  background: var(--color-surface-alt);
  font-size: 13.5px;
  line-height: 20px;
}

/* The control bar: in the frame it is part of the panel (no box of its own) */
.lesson-control-bar {
  gap: 10px;
}

/* (body[data-site-tab] .lesson-complete-bar gives the bar a box tone on member pages: not inside
   the frame, where the frame is the box) */
.lesson-frame .lesson-control-bar,
body[data-site-tab] .lesson-frame .lesson-complete-bar.lesson-control-bar {
  max-width: 900px;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  background: none;
}

.lesson-control-bar .btn,
.lesson-control-bar .lesson-bar-bookmark .btn {
  min-height: 40px;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 0;
}

/* Mark complete goes to the right of Previous / Next, Bookmark at the far right */
.lesson-control-bar .mark-complete-btn {
  margin-left: auto;
}

.lesson-control-bar .lesson-bar-bookmark {
  display: inline-flex;
}

.lesson-control-bar .lesson-bar-bookmark:empty {
  display: none;
}

.lesson-control-bar .btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.lesson-frame .lesson-complete-message:empty {
  display: none;
}

.lesson-frame .lesson-complete-message {
  max-width: 900px;
  margin: 10px auto 0;
}

/* The resources and the description: inside the frame for an open lesson (below); a locked or
   unavailable lesson's message under the hidden frame, in the same panel style */
.lesson-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--box-bg-inner, var(--color-surface));
}

.lesson-content:not(:has(.lesson-flow)):has(> .lesson-resources[hidden]):has(> .lesson-body:empty) {
  display: none;
}

.lesson-content > .lesson-resources:first-child {
  margin-top: 0;
}

.lesson-content > .lesson-resources[hidden] + .lesson-body {
  margin-top: 0;
}

/* In the frame (an open lesson): no box of its own, the video's centred column, 16px under the
   video, directly under the label strip when there is no video. A lesson with only a video hides it
   (the rule above), so that lesson looks exactly as before. */
.lesson-frame .lesson-content {
  max-width: 900px;
  margin: 16px auto 0;
  padding: 0;
  border: 0;
  background: none;
}

.lesson-frame .lesson-stage:has(#lesson-video:empty) + .lesson-content,
.lesson-frame .lesson-stage:has(#lesson-video[hidden]) + .lesson-content {
  margin-top: 0;
}

.lesson-frame .lesson-body > :last-child {
  margin-bottom: 0;
}

.lesson-page .lesson-head .lesson-title-row {
  margin-bottom: 8px;
}

/* The title, Back and the admin notes line up with the frame (the same centred column) */
.lesson-page .lesson-head,
.lesson-page #course-admin-banner,
.lesson-page #lesson-admin-banner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Tablet: a little less padding */
@media (max-width: 900px) {
  .lesson-frame,
  .lesson-content {
    padding: 14px;
  }
}

/* Phones: full width, small padding; Mark complete full width on top, then Previous and Next side
   by side, then Bookmark; 44px touch targets */
@media (max-width: 600px) {
  .lesson-frame,
  .lesson-content {
    padding: 12px;
  }

  .lesson-control-bar .btn,
  .lesson-control-bar .lesson-bar-bookmark .btn {
    min-height: 44px;
  }

  .lesson-control-bar .mark-complete-btn {
    order: -1;
    flex-basis: 100%;
    margin-left: 0;
  }

  .lesson-control-bar .lesson-pager {
    flex: 1 1 calc(50% - 5px);
  }

  .lesson-control-bar .lesson-bar-bookmark {
    flex-basis: 100%;
  }

  .lesson-control-bar .lesson-bar-bookmark .btn {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ===== Admin: the notification bell (admin-logins.js), square like the other top bar buttons ===== */
.admin-bell-wrap {
  position: relative;
  display: inline-flex;
}

.admin-bell-wrap[hidden] {
  display: none;
}

.admin-bell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  line-height: 18px;
}

.admin-bell-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 0;
  background: var(--color-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.admin-bell-count[hidden] {
  display: none;
}

.admin-bell-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  text-align: left;
}

.admin-bell-panel[hidden] {
  display: none;
}

.admin-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

.admin-bell-panel .form-message:empty {
  display: none;
}

.admin-bell-panel .form-message {
  margin: 0;
  padding: 6px 12px;
}

.admin-bell-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-bell-list > li + li {
  border-top: 1px solid var(--color-border);
}

.admin-bell-empty {
  padding: 14px 12px;
}

.admin-bell-row {
  display: flex;
  align-items: stretch;
}

.admin-bell-row .admin-bell-item {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-bell-delete {
  flex: none;
  min-width: 56px;
  padding: 0 10px;
  border-radius: 0;
  font-size: 13px;
}

/* (each row: its kind's colour as a strip on the left, admin-alert-rules.js COLORS) */
.admin-bell-item.has-kind-color {
  box-shadow: inset 4px 0 0 var(--kind-color);
}

.admin-bell-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-bell-item:hover {
  background: var(--color-surface-alt);
}

.admin-bell-item:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

.admin-bell-dot {
  flex: 0 0 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 0;
}

.admin-bell-item.is-unread .admin-bell-dot {
  background: var(--color-primary);
}

.admin-bell-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-bell-item.is-unread .admin-bell-title {
  font-weight: 700;
}

.admin-bell-meta {
  color: var(--color-text-muted);
  font-size: 12px;
}

.admin-bell-setting {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px 4px;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
}

.admin-bell-hint {
  margin: 0;
  padding: 0 12px 10px 34px;
}

/* ===== Members → Login report, and a member's "Membership site login report" tab ===== */
.lr-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.lr-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
}

.lr-tile-label {
  color: var(--color-text-muted);
  font-size: 12px;
}

.lr-tile-value {
  font-size: 15px;
}

.lr-filters,
.mlr-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.lr-filters .field-label,
.mlr-filters .field-label {
  margin: 0;
}

.lr-filters .input-field,
.mlr-filters .input-field {
  width: auto;
  flex: 0 1 auto;
}

.lr-filters input[type="search"],
.mlr-filters input[type="search"] {
  flex: 1 1 200px;
  min-width: 160px;
}

.lr-filters .cm-toolbar-end,
.mlr-filters .cm-toolbar-end {
  margin-left: auto;
}

.lr-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.lr-table td,
.mlr-table td {
  vertical-align: top;
}

.lr-ip {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lr-table tr.is-imported td,
.mlr-table tr.is-imported td {
  color: var(--color-text-muted);
}

.login-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-alt);
  font-size: 12px;
  white-space: nowrap;
}

.lr-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
}

.lr-pager .field-hint {
  margin-right: auto;
}

.mlr-summary {
  margin-bottom: 12px;
}

.mlr-combine {
  margin: 4px 0 12px;
}

.mlr-section + .mlr-section {
  margin-top: 20px;
}

.mlr-heading {
  margin: 0 0 8px;
  font-size: 15px;
}

.mlr-done {
  color: var(--color-accent-text);
}

.mlr-day {
  margin: 16px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border-strong);
  font-size: 13px;
}

.mlr-day-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mlr-day-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}

.mlr-day-list time {
  min-width: 150px;
  color: var(--color-text-muted);
}

/* A login starts a visit session: a filled band */
.mlr-day-list > li.mlr-tl-login {
  padding: 6px 8px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-alt);
}

#mv-tab-logins {
  white-space: nowrap;
}

@media (max-width: 600px) {
  /* The bell's list: the screen's width (16px each side), under the top bar */
  .admin-bell-panel {
    position: fixed;
    top: calc(var(--admin-nav-height) + 4px);
    right: 16px;
    left: 16px;
    width: auto;
  }

  .lr-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lr-filters .input-field,
  .mlr-filters .input-field {
    flex: 1 1 140px;
  }

  .lr-table-wrap,
  #mv-panel-logins .table-wrap {
    overflow-x: auto;
  }

  .mlr-day-list time {
    min-width: 0;
    flex-basis: 100%;
  }
}

/* ===== Member page: tabs, sections and blocks from the layout (admin.js; member-layout.js) ===== */
.admin-layout .mv-tab-panel[hidden] {
  display: none;
}

.admin-layout .mv-tab-panel:focus-visible {
  outline: none;
}

.admin-layout .mv-section + .mv-section {
  margin-top: 20px;
}

/* Ontraport on the member page (admin-ontraport.js): read only; its heading looks like the section
   headings, Refresh on its right; tags as the usual square chips */
.admin-layout .op-head {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .op-head .op-title {
  flex: 1 1 auto;
  margin: 0;
  border-bottom: 0;
}

.admin-layout .op-head .op-refresh {
  margin-bottom: 4px;
}

.admin-layout .op-note p,
.admin-layout .op-matches {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.admin-layout .op-note-problem p {
  color: var(--color-text);
}

.admin-layout .op-tags,
.admin-layout .op-purchases {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .op-purchases {
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.admin-layout .op-purchases li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.admin-layout .op-purchase-meta {
  color: var(--color-text-lighter);
}

/* The member's purchases from the Ontraport webhook (admin-ontraport-products.js), under the panel */
.admin-layout .mv-purchases-box {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .mv-purchases-box:empty {
  display: none;
}

.admin-layout .mv-purchases {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .mv-purchases li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  overflow-wrap: anywhere;
}

.admin-layout .mv-purchase-meta {
  color: var(--color-text-lighter);
}

/* Sales & Pages → Ontraport products (admin-ontraport-products.js): products and names not set up
   on the left, the call log on the right (one column on a phone); cards like the Labels box */
.admin-layout .opp-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 1100px) {
  .admin-layout .opp-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.admin-layout .opp-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.admin-layout .opp-card,
.admin-layout .opp-form-box {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
}

.admin-layout .opp-form-box {
  margin: 0 0 20px;
}

.admin-layout .opp-form-box[hidden] {
  display: none;
}

.admin-layout .opp-section-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}

.admin-layout .opp-missing {
  margin: 0 0 20px;
}

.admin-layout .opp-list {
  margin: 10px 0 0;
}

.admin-layout .opp-unknown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 12px;
}

.admin-layout .opp-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 220px;
  min-width: 0;
}

.admin-layout .opp-row-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .opp-row-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.admin-layout .opp-status {
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .opp-status.is-on {
  color: var(--color-success-text, var(--color-text));
}

.admin-layout .opp-product.is-disabled .opp-row-title {
  color: var(--color-text-muted);
}

/* Subscribe to sales: the steps, a tick per imported product, the answers, Ontraport's webhooks */
.admin-layout .opp-steps {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.admin-layout .opp-steps li {
  margin: 0 0 4px;
}

.admin-layout .opp-sub-choices,
.admin-layout .opp-sub-results,
.admin-layout .opp-sales {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .opp-sub-choices {
  max-height: 280px;
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
}

.admin-layout .opp-sub-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
}

.admin-layout .opp-sub-choice .checkbox-field span {
  overflow-wrap: anywhere;
}

.admin-layout .opp-sub-actions {
  margin: 12px 0 0;
}

.admin-layout .opp-subscribe .form-message:empty {
  display: none;
}

.admin-layout .opp-sub-results {
  margin: 6px 0 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-layout .opp-sub-results li {
  padding: 2px 0;
}

.admin-layout .opp-sub-results li.is-failed {
  color: var(--color-danger-text);
}

.admin-layout .opp-sub,
.admin-layout .opp-sale {
  min-width: 0;
}

.admin-layout .opp-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 12px;
}

.admin-layout .opp-sub.is-flagged .opp-row-meta {
  color: var(--color-danger-text);
}

.admin-layout .opp-older {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
}

.admin-layout .opp-older summary {
  cursor: pointer;
  font-weight: 600;
}

.admin-layout .opp-older .field-hint {
  margin: 6px 0 8px;
}

/* Sales feed: one sale per row */
.admin-layout .opp-sales {
  margin-top: 10px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .opp-sale {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.admin-layout .opp-sale-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 13px;
}

.admin-layout .opp-sale-result {
  color: var(--color-danger-text);
}

.admin-layout .opp-sale-result.is-ok {
  color: var(--color-success-text, var(--color-text));
}

.admin-layout p.opp-sale-buyer {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  margin: 4px 0 2px;
}

.admin-layout .opp-sale-name {
  font-weight: 600;
}

.admin-layout .opp-sale p.opp-row-meta {
  margin: 0;
}

.admin-layout .opp-address-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout .opp-address {
  flex: 1 1 260px;
  min-width: 0;
  border-radius: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
}

.admin-layout .opp-copied:empty {
  display: none;
}

.admin-layout .opp-copied {
  margin: 8px 0 0;
}

.admin-layout .opp-log {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.admin-layout .opp-log-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.admin-layout .opp-log-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
}

.admin-layout .opp-log-time {
  font-weight: 600;
}

.admin-layout .opp-log-key {
  color: var(--color-danger-text);
}

.admin-layout .opp-log-key.is-ok {
  color: var(--color-text-muted);
}

.admin-layout .opp-log-status,
.admin-layout .opp-log-product {
  color: var(--color-text-muted);
}

.admin-layout .opp-log-outcome,
.admin-layout .opp-log-error {
  margin: 4px 0 0;
  font-size: 13px;
}

.admin-layout .opp-log-error {
  color: var(--color-danger-text);
}

.admin-layout .opp-log-fields {
  margin-top: 6px;
  font-size: 13px;
}

.admin-layout .opp-log-fields dl {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 2px 12px;
  margin: 6px 0 0;
}

.admin-layout .opp-log-fields dt {
  color: var(--color-text-muted);
}

.admin-layout .opp-log-fields dd {
  margin: 0;
}

.admin-layout .opp-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 640px;
}

.admin-layout .opp-form .input-field {
  border-radius: 0;
}

.admin-layout .opp-tags {
  margin: 6px 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.admin-layout .opp-tag-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 12px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--color-border);
}

.admin-layout .opp-tag-choice span {
  overflow-wrap: anywhere;
}

.admin-layout .opp-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Import products from Ontraport: the preview, one group per kind */
.admin-layout .opp-import-group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.admin-layout .opp-import-list {
  display: flex;
  flex-direction: column;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.admin-layout .opp-import-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
}

.admin-layout .opp-import-name,
.admin-layout .opp-import-item .opp-row-meta {
  overflow-wrap: anywhere;
}

.admin-layout .opp-import-item .opp-row-meta {
  padding-left: 28px;
}

.admin-layout .opp-card .btn,
.admin-layout .opp-form .btn {
  border-radius: 0;
}

/* The tabs: one at a time, the active one underlined; they scroll sideways on a phone */
.admin-layout .opp-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-layout .opp-tab {
  flex: none;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}

.admin-layout .opp-tab:hover {
  color: var(--color-text);
}

.admin-layout .opp-tab.is-active {
  border-bottom-color: var(--color-primary);
  color: var(--color-text);
  font-weight: 600;
}

.admin-layout .opp-tab:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

.admin-layout .opp-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* A light header line, then thin separators between the sections */
.admin-layout .opp-pane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .opp-pane-intro {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 14px;
}

.admin-layout .opp-pane-intro p {
  margin: 0 0 4px;
}

.admin-layout .opp-section {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .opp-pane > .opp-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.admin-layout .opp-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
}

.admin-layout .opp-search {
  max-width: 360px;
  margin: 0;
}

.admin-layout .opp-pane-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout .opp-pane-actions .btn,
.admin-layout .opp-bulk .btn,
.admin-layout .opp-pager .btn {
  width: auto;
  border-radius: 0;
}

/* Ticked products: the bar with the count and what to do */
.admin-layout .opp-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  background: var(--box-next-bg);
}

.admin-layout .opp-bulk[hidden] {
  display: none;
}

.admin-layout .opp-bulk-count {
  font-weight: 600;
}

.admin-layout .opp-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.admin-layout #opp-bulk-status:empty {
  display: none;
}

/* The tables (cards on a phone: members-table) */
.admin-layout .opp-table {
  width: 100%;
}

.admin-layout .opp-table td {
  vertical-align: top;
}

.admin-layout .opp-pick-cell {
  width: 32px;
}

.admin-layout .opp-pick-cell input,
.admin-layout #opp-pick-all {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
}

.admin-layout .opp-name-cell {
  min-width: 160px;
}

.admin-layout .opp-name-cell .opp-row-title,
.admin-layout .opp-name-cell .opp-row-meta,
.admin-layout .opp-sale-buyer .opp-sale-name,
.admin-layout .opp-sale-buyer .opp-row-meta {
  display: block;
}

.admin-layout .opp-actions-cell {
  text-align: right;
  white-space: nowrap;
}

.admin-layout tr.opp-product.is-disabled td {
  color: var(--color-text-muted);
}

/* Failures marked: a call that failed (a sale says it with its pills) */
.admin-layout tr.opp-log-item.is-error td:first-child {
  box-shadow: inset 3px 0 0 var(--color-danger);
}

.admin-layout .opp-result {
  font-size: 13px;
  font-weight: 600;
}

.admin-layout .opp-result.is-ok {
  color: var(--color-success-text, var(--color-text));
}

.admin-layout .opp-result.is-error {
  color: var(--color-danger-text);
}

.admin-layout .opp-result.is-ignored {
  color: var(--color-text-muted);
}

.admin-layout .opp-log-why {
  overflow-wrap: anywhere;
}

.admin-layout .opp-log-more {
  text-align: right;
  white-space: nowrap;
}

.admin-layout .opp-log-details td {
  background: var(--color-surface-alt);
}

.admin-layout .opp-log-details dl {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: 2px 12px;
  margin: 6px 0 0;
  font-size: 13px;
}

.admin-layout .opp-log-details dt {
  color: var(--color-text-muted);
}

.admin-layout .opp-log-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Sales feed: the filters, then "Showing 1–25 of N" with Previous / Next */
.admin-layout .opp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

.admin-layout .opp-filter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.admin-layout .opp-filter .input-field {
  margin: 0;
}

.admin-layout .opp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .opp-pager-text {
  margin-right: auto;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Sales → Products: the four steps, each done or not */
.admin-layout .opp-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .opp-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-surface-alt);
}

.admin-layout .opp-step-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border-strong);
  font-size: 12px;
  font-weight: 700;
}

.admin-layout .opp-step.is-done .opp-step-mark {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.admin-layout .opp-step-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 13.5px;
}

.admin-layout .opp-source.is-store {
  border-color: var(--btn-focus);
}

/* Transactions: the automatic sync's line ("Last synced… · Sync now"), its alert, Needs attention */
.admin-layout .opp-sync {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-layout .opp-sync .notice {
  margin: 0;
}

.admin-layout .opp-sync-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.admin-layout .opp-sync-line .btn {
  width: auto;
  border-radius: 0;
}

.admin-layout .opp-sync-attention {
  color: var(--color-danger-text);
}

.admin-layout .opp-source.is-sync {
  margin-left: 6px;
  border-color: var(--color-success-text, var(--color-border-strong));
}

.admin-layout .mv-purchase-details {
  font-size: 12px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* Transactions: an imported sale's badge, and the "Import from Ontraport…" box above the filters */
.admin-layout .opp-source.is-import {
  margin-left: 6px;
  border-color: var(--color-primary);
}

.admin-layout .opp-ti {
  max-width: none;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
}

.admin-layout .opp-ti .notice {
  margin: 0;
}

.admin-layout .opp-ti .btn {
  width: auto;
  border-radius: 0;
}

.admin-layout .opp-ti .opp-form-actions {
  justify-content: flex-start;
}

.admin-layout .opp-ti-state {
  margin: 6px 0 0;
  font-weight: 600;
}

.admin-layout .opp-ti-progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
}

.admin-layout .opp-ti-progress::-webkit-progress-bar {
  border-radius: 0;
  background: var(--color-surface);
}

.admin-layout .opp-ti-progress::-webkit-progress-value {
  border-radius: 0;
  background: var(--color-primary);
}

.admin-layout .opp-ti-progress::-moz-progress-bar {
  background: var(--color-primary);
}

.admin-layout .opp-ti-counts,
.admin-layout .opp-ti-failures {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.admin-layout .opp-ti-failures {
  color: var(--color-danger-text);
}

.admin-layout .opp-ti-sample-wrap .field-label {
  margin: 6px 0 4px;
}

.admin-layout .opp-ti-raw summary {
  cursor: pointer;
  font-size: 13.5px;
}

.admin-layout .opp-ti-raw .field-hint {
  overflow-wrap: anywhere;
}

.admin-layout .opp-select-line {
  margin: 0;
  font-size: 14px;
}

.admin-layout .opp-select-line[hidden] {
  display: none;
}

.admin-layout .opp-connection {
  margin: 0;
  font-weight: 600;
}

.admin-layout .opp-connection.is-on {
  color: var(--color-success-text, var(--color-text));
}

.admin-layout .opp-connection.is-error {
  color: var(--color-danger-text);
}

/* ======================================================================
   Sales: the tables and Transactions' tools in the Messages page's type scale (admin.js Messages
   list and chat): 13px text and inputs, 12px muted secondary text, 11px muted headers, pills and
   tags; the admin's text weight (500) and 600 only for a customer's name and an amount; --color-text,
   --color-text-muted, --color-text-lighter and --color-border. Products, Setup's call log and the
   import's sample share the table look; Transactions adds its columns, pills and phone cards.
   ====================================================================== */
.admin-layout #panel-ontraport-products .opp-pane {
  gap: 10px;
}

.admin-layout #panel-ontraport-products .opp-table,
.admin-layout .opp-ti .opp-table {
  min-width: 0;
  font-size: 13px;
  line-height: 16px;
  border-collapse: collapse;
}

.admin-layout #panel-ontraport-products .opp-table th,
.admin-layout .opp-ti .opp-table th {
  padding: 8px 10px;
  background: var(--color-surface);
  box-shadow: inset 0 -1px 0 var(--color-border);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-layout #panel-ontraport-products .opp-table td,
.admin-layout .opp-ti .opp-table td {
  padding: 6px 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

/* No stripes; a soft hover */
.admin-layout #panel-ontraport-products .opp-table tbody tr:nth-child(even) td,
.admin-layout .opp-ti .opp-table tbody tr:nth-child(even) td {
  background: transparent;
}

.admin-layout #panel-ontraport-products .opp-table tbody tr:hover td,
.admin-layout .opp-ti .opp-table tbody tr:hover td {
  background: var(--color-surface-alt);
}

.admin-layout #panel-ontraport-products .opp-table .opp-row-meta,
.admin-layout .opp-ti .opp-table .opp-row-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* The page's controls at the Messages size (13px, 32px high) */
.admin-layout #panel-ontraport-products .opp-filters .input-field,
.admin-layout #panel-ontraport-products .opp-search,
.admin-layout #panel-ontraport-products .opp-pager .input-field {
  width: auto;
  min-height: 32px;
  margin: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 13px;
}

.admin-layout #panel-ontraport-products .opp-search {
  width: 100%;
  max-width: 320px;
}

.admin-layout #panel-ontraport-products .opp-filters {
  align-items: center;
  gap: 6px 8px;
}

.admin-layout #panel-ontraport-products .opp-filter {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.admin-layout .opp-filter-word {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-layout #panel-ontraport-products .opp-filter-clear {
  font-size: 12px;
}

.admin-layout #panel-ontraport-products .opp-pager-text {
  font-size: 12px;
}

.admin-layout .opp-pager-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Transactions: the short line and its ⓘ popover */
.admin-layout .opp-intro {
  position: relative;
}

.admin-layout #panel-ontraport-products .opp-intro-short {
  padding: 0;
  border: 0;
  font-size: 13px;
}

.admin-layout .opp-info {
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .opp-info:hover {
  color: var(--color-text);
}

.admin-layout .opp-info:focus-visible,
.admin-layout .opp-sale-more:focus-visible,
.admin-layout .opp-chip:focus-visible,
.admin-layout .opp-sync-attention:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .opp-info-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 6;
  max-width: min(440px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-text-muted);
  font-size: 12px;
}

.admin-layout .opp-info-pop[hidden] {
  display: none;
}

.admin-layout .opp-info-pop p {
  margin: 0 0 6px;
}

.admin-layout .opp-info-pop p:last-child {
  margin: 0;
}

/* The toolbar: search on the left; "Last synced…", Needs attention and Actions on the right */
.admin-layout .opp-sales-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.admin-layout .opp-sales-tools-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
  min-width: 0;
  margin-left: auto;
}

.admin-layout #panel-ontraport-products .opp-sync-line {
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

.admin-layout .opp-sync-text {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Small pills: the status, No member, Needs attention (square, as every corner here) */
.admin-layout .opp-pill {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.admin-layout .opp-pill.is-green { color: var(--color-accent-text); }
.admin-layout .opp-pill.is-red { color: var(--color-danger-text); }
.admin-layout .opp-pill.is-amber { color: var(--color-warning-text); }
.admin-layout .opp-pill.is-blue { color: var(--color-info-text); }
.admin-layout .opp-pill.is-gray { color: var(--color-text-muted); }

.admin-layout button.opp-sync-attention {
  flex: none;
  font-family: inherit;
  cursor: pointer;
}

.admin-layout button.opp-sync-attention.is-on,
.admin-layout button.opp-sync-attention:hover {
  background: color-mix(in srgb, currentColor 18%, transparent);
}

/* The totals as chips; a pressed one is the filter in use */
.admin-layout .opp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .opp-chip {
  padding: 3px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.admin-layout .opp-chip:hover {
  background: var(--color-surface-alt);
}

.admin-layout .opp-chip.is-on {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

/* The Filters button is for phones only */
.admin-layout #panel-ontraport-products .opp-filters-btn {
  display: none;
  align-self: flex-start;
  width: auto;
}

.admin-layout .opp-ti-running {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* The table: fixed columns, one line each (cut with "…", whole on hover), a sticky header */
.admin-layout .opp-table-wrap {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--color-border);
}

.admin-layout #panel-ontraport-products .opp-sales-table {
  width: 100%;
  table-layout: fixed;
}

.admin-layout #panel-ontraport-products .opp-sales-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.admin-layout .opp-sales-table .col-date { width: 148px; }
.admin-layout .opp-sales-table .col-customer { width: 24%; }
.admin-layout .opp-sales-table .col-amount { width: 104px; text-align: right; }
.admin-layout .opp-sales-table .col-status { width: 116px; }
.admin-layout .opp-sales-table .col-member { width: 160px; }
.admin-layout .opp-sales-table .col-source { width: 76px; }
.admin-layout .opp-sales-table .col-more { width: 44px; }

.admin-layout #panel-ontraport-products .opp-sales-table tr.opp-sale > td {
  height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-layout tr.opp-sale {
  cursor: pointer;
}

.admin-layout tr.opp-sale:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: -2px;
}

.admin-layout tr.opp-sale.is-open > td {
  background: var(--color-surface-alt);
  border-bottom-color: transparent;
}

.admin-layout .opp-sale-date {
  color: var(--color-text-muted);
  font-size: 12px;
}

.admin-layout .opp-sales-table .opp-sale-name,
.admin-layout .opp-sales-table .opp-sale-buyer .opp-row-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-layout .opp-sales-table .opp-sale-name {
  color: var(--color-text);
  font-weight: 600;
}

.admin-layout .opp-warn {
  margin-right: 4px;
  color: var(--color-warning-text);
}

.admin-layout .opp-sales-table .opp-sale-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-layout .opp-amount {
  font-weight: 600;
}

.admin-layout .opp-amount.is-not-counted {
  color: var(--color-text-lighter);
  font-weight: inherit;
  text-decoration: line-through;
}

.admin-layout a.opp-member-yes,
.admin-layout span.opp-member-yes {
  color: var(--color-accent-text);
  font-size: 12px;
  text-decoration: none;
}

.admin-layout a.opp-member-yes:hover {
  text-decoration: underline;
}

.admin-layout .opp-member-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-layout .opp-member-create {
  font-size: 12px;
}

.admin-layout .opp-source-tag {
  color: var(--color-text-muted);
  font-size: 11px;
}

.admin-layout .opp-sale-more {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .opp-sale-more:hover,
.admin-layout .opp-sale-more[aria-expanded="true"] {
  background: var(--color-border);
  color: var(--color-text);
}

.admin-layout #panel-ontraport-products .opp-sales-table .opp-sale-more-cell {
  padding: 0 6px;
  text-align: center;
}

.admin-layout #panel-ontraport-products .opp-sales-table .opp-sale-details td {
  white-space: normal;
  background: var(--color-surface-alt);
}

.admin-layout #panel-ontraport-products .opp-sales-table .opp-sale-details dl {
  margin: 0;
  font-size: 12px;
}

/* The import in its pop-up: no box of its own inside it */
.admin-layout .opp-ti-pop .opp-ti {
  padding: 0;
  border: 0;
}

.admin-layout .email-pop-body.opp-ti-pop {
  max-width: 720px;
}

/* Phones: the filters behind "Filters (N)"; each sale a compact card (date and amount; name and
   product; status and member), nothing wider than the screen */
@media (max-width: 700px) {
  .admin-layout #panel-ontraport-products .opp-filters-btn {
    display: inline-flex;
  }

  .admin-layout #panel-ontraport-products .opp-sales-filters {
    display: none;
  }

  .admin-layout #panel-ontraport-products .opp-sales-filters.is-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .admin-layout #panel-ontraport-products .opp-sales-filters .input-field {
    width: 100%;
    min-width: 0;
  }

  .admin-layout #panel-ontraport-products .opp-sales-filters .opp-filter .input-field {
    flex: 1;
  }

  .admin-layout .opp-sales-tools-end {
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }

  .admin-layout .opp-search-wrap {
    flex-basis: 100%;
  }

  .admin-layout #panel-ontraport-products .opp-search {
    max-width: none;
  }

  .admin-layout .opp-table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
  }

  .admin-layout #panel-ontraport-products .opp-sales-table,
  .admin-layout #panel-ontraport-products .opp-sales-table tbody {
    display: block;
    width: 100%;
  }

  .admin-layout #panel-ontraport-products .opp-sales-table thead {
    display: none;
  }

  .admin-layout #panel-ontraport-products .opp-sales-table tr.opp-sale {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "date amount more"
      "buyer product product"
      "status member source";
    align-items: center;
    gap: 6px 8px;
    padding: 12px 16px; /* (the card's padding: its cells sit in it) */
    border-bottom: 1px solid var(--color-border);
  }

  .admin-layout #panel-ontraport-products .opp-sales-table tr.opp-sale > td {
    display: block;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .admin-layout #panel-ontraport-products .opp-sales-table tr.opp-sale > td::before {
    content: none;
  }

  .admin-layout .opp-sales-table .opp-sale-date { grid-area: date; }
  .admin-layout .opp-sales-table .opp-sale-amount { grid-area: amount; }
  .admin-layout .opp-sales-table .opp-sale-more-cell { grid-area: more; }
  .admin-layout .opp-sales-table .opp-sale-buyer { grid-area: buyer; }
  .admin-layout .opp-sales-table .opp-sale-product { grid-area: product; text-align: right; color: var(--color-text-muted); }
  .admin-layout .opp-sales-table .opp-sale-status { grid-area: status; }
  .admin-layout .opp-sales-table .opp-sale-matched { grid-area: member; }
  .admin-layout .opp-sales-table .opp-sale-source { grid-area: source; text-align: right; }

  .admin-layout .opp-sales-table .opp-sale-buyer .opp-row-meta {
    display: none;
  }

  .admin-layout #panel-ontraport-products .opp-sales-table .opp-sale-details {
    display: block;
  }

  .admin-layout #panel-ontraport-products .opp-sales-table .opp-sale-details td {
    display: block;
    padding: 8px 4px;
  }

  .admin-layout #panel-ontraport-products .opp-sales-table .opp-sale-details td::before {
    content: none;
  }
}

@media (max-width: 760px) {
  .admin-layout .opp-progress {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Subscribe to sales: on or off said in a word */
.admin-layout .opp-sub-state {
  margin: 0 0 8px;
  font-weight: 600;
}

.admin-layout .opp-sub-state.is-on {
  color: var(--color-success-text, var(--color-text));
}

.admin-layout .opp-sub-state.is-error {
  color: var(--color-danger-text);
}

.admin-layout .opp-advanced {
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .opp-advanced > summary {
  cursor: pointer;
  font-weight: 600;
}

@media (max-width: 760px) {
  .admin-layout .opp-search {
    max-width: none;
  }

  .admin-layout .opp-bulk-actions {
    margin-left: 0;
  }

  .admin-layout .opp-name-cell {
    min-width: 0;
  }

  .admin-layout .opp-table thead {
    display: none;
  }

  .admin-layout .opp-actions-cell,
  .admin-layout .opp-log-more {
    text-align: left;
  }

  .admin-layout .opp-filter {
    flex: 1 1 140px;
  }
}

.admin-layout .op-open:focus-visible,
.admin-layout .op-refresh:focus-visible,
.admin-layout .op-retry:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

.admin-layout .mv-section-title {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* One row per field: the same label column in every block, so they line up */
.admin-layout .mv-block-facts,
.admin-layout .op-facts {
  grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
  margin: 0;
}

.admin-layout .op-facts {
  margin-bottom: 12px;
}

.admin-layout .mv-block + .mv-block {
  margin-top: 8px;
}

.admin-layout .mv-block-panel + .mv-block,
.admin-layout .mv-block + .mv-block-panel {
  margin-top: 16px;
}

.admin-layout .mv-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.admin-layout .mv-action-row .field-hint,
.admin-layout .mv-action-block > .field-hint {
  margin: 0;
  font-size: 13px;
}

/* Danger zone: clearly apart, a red rule and a light red fill, square */
.admin-layout .mv-section-danger {
  margin-top: 28px;
  padding: 12px 14px;
  border: 1px solid var(--btn-danger-text);
  border-radius: 0;
  background: var(--color-danger-soft);
}

.admin-layout .mv-section + .mv-section-danger {
  margin-top: 28px;
}

.admin-layout .mv-section-danger .mv-section-title {
  border-bottom-color: var(--btn-danger-text);
  color: var(--color-danger-text);
}

.admin-layout .mv-empty-tab {
  margin: 8px 0;
}

.admin-layout .mv-new-badge,
.admin-layout .mv-hidden-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}

.admin-layout .mv-new-badge {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.admin-layout .mv-hidden-badge {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.admin-layout .mv-block > .mv-new-badge {
  margin-bottom: 4px;
}

/* ----- Edit layout ----- */
.admin-layout .mv-layout-bar {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-alt);
}

.admin-layout .mv-layout-bar[hidden] {
  display: none;
}

.admin-layout .mv-layout-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.admin-layout .mv-layout-bar-end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.admin-layout .mv-layout-saved {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .mv-layout-bar .field-hint {
  margin: 8px 0 0;
}

.admin-layout .mv-layout-hidden:not(:empty) {
  margin-top: 8px;
  font-size: 13px;
}

.admin-layout .mv-hidden-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.admin-layout .mv-hidden-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#mv-layout-message:empty {
  display: none;
}

.admin-layout .mv-tab-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -8px 0 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border-strong);
}

.admin-layout .mv-tab-settings .field-label {
  margin: 0;
}

.admin-layout .mv-tab-settings .input-field {
  width: auto;
  flex: 0 1 260px;
}

.admin-layout .is-editing-layout .mv-tab[draggable="true"] {
  cursor: grab;
}

.admin-layout .is-editing-layout .mv-section {
  padding: 8px;
  border: 1px dashed var(--color-border-strong);
}

.admin-layout .mv-section-head.is-editing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-layout .mv-section-head .input-field {
  width: auto;
  flex: 1 1 200px;
}

.admin-layout .is-editing-layout .mv-block {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.admin-layout .is-editing-layout .mv-block-body {
  padding: 8px 10px;
}

/* A panel's full contents in edit mode: shortened, so items are easy to move */
.admin-layout .is-editing-layout .mv-block-panel .mv-block-body {
  max-height: 160px;
  overflow: hidden;
  opacity: 0.75;
  pointer-events: none;
}

.admin-layout .mv-block.is-hidden .mv-block-body {
  opacity: 0.45;
}

.admin-layout .mv-block-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: 13px;
}

.admin-layout .mv-block-name {
  font-weight: 600;
}

.admin-layout .mv-block-tools-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.admin-layout .mv-block-tools .input-field {
  width: auto;
  min-height: 30px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 13px;
}

.admin-layout .mv-drag-handle {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 26px;
  cursor: grab;
}

.admin-layout .mv-drag-handle:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

.admin-layout .mv-drop-end {
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}

/* Where a drop lands */
.admin-layout .mv-block.is-dragging,
.admin-layout .mv-tab.is-dragging {
  opacity: 0.4;
}

.admin-layout .mv-block.drop-before {
  box-shadow: 0 -3px 0 0 var(--color-primary);
}

.admin-layout .mv-block.drop-after {
  box-shadow: 0 3px 0 0 var(--color-primary);
}

.admin-layout .mv-tab.drop-before {
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}

.admin-layout .mv-tab.drop-after {
  box-shadow: inset -3px 0 0 0 var(--color-primary);
}

.admin-layout .mv-tab.drop-target {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.admin-layout .mv-section.drop-into {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

@media (max-width: 600px) {
  .admin-layout .mv-block-facts,
  .admin-layout .op-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .admin-layout .op-facts dd {
    margin-bottom: 8px;
  }

  .admin-layout .mv-layout-bar-end {
    margin-left: 0;
  }

  .admin-layout .mv-block-tools-end {
    margin-left: 0;
    width: 100%;
  }

  .admin-layout .mv-block-tools .mv-move-to {
    flex: 1 1 auto;
  }
}

/* ===== Email deliverability: the Activity status line and the Deliverability report ===== */
.admin-layout .activity-delivery {
  display: inline-block;
  margin: 4px 0 0;
  padding: 2px 8px;
  border-left: 3px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-alt);
  font-size: 13px;
}

.admin-layout .activity-delivery-label {
  color: var(--color-text-muted);
}

.admin-layout .activity-delivery.is-good {
  border-left-color: var(--color-primary);
}

.admin-layout .activity-delivery.is-warn {
  border-left-color: var(--color-warning-text);
}

.admin-layout .activity-delivery.is-bad {
  border-left-color: var(--color-danger);
  color: var(--color-danger-text);
}

.admin-layout .activity-delivery.is-muted {
  color: var(--color-text-muted);
}

.admin-layout .dr-tile.is-bounced .lr-tile-value,
.admin-layout .dr-tile.is-complained .lr-tile-value,
.admin-layout .dr-tile.is-failed .lr-tile-value {
  color: var(--color-danger-text);
}

.admin-layout .dr-heading {
  margin: 20px 0 8px;
  font-size: 16px;
}

.admin-layout .dr-address {
  overflow-wrap: anywhere;
}

.admin-layout .mv-email-problem .badge {
  margin-right: 4px;
}

/* A member's time in both zones (time-both.js): mine, then theirs muted; theirs wraps under mine
   when there is no room (always on phones) */
.time-both {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  max-width: 100%;
}

.time-both-member {
  color: var(--color-text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.time-both-member.is-unset {
  font-style: italic;
}

.time-both-relative {
  font-size: 12px;
}

.admin-layout .activity-meta .time-both-main {
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 600px) {
  .time-both-member {
    flex-basis: 100%;
  }
}

/* ===== Sent emails: "Why sent" and Preview (email-why.js; admin.js openEmailPreview) ===== */
.admin-layout .email-why {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  max-width: 100%;
}

.admin-layout .email-why-prefix {
  color: var(--color-text-muted);
}

.admin-layout .email-why.is-unknown .email-why-label {
  color: var(--color-text-muted);
}

.admin-layout .email-why-details {
  flex-basis: 100%;
  font-size: 12.5px;
}

.admin-layout .email-why-details summary {
  width: max-content;
  color: var(--color-link);
  cursor: pointer;
}

.admin-layout .email-why-details summary:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

.admin-layout .email-why-list {
  margin: 4px 0 0;
  padding-left: 18px;
  overflow-wrap: anywhere;
}

.admin-layout .email-log-subject .email-preview-btn {
  display: flex;
  margin-top: 6px;
}

.admin-layout .activity-preview {
  margin: 6px 0 0;
}

.admin-layout .email-preview-panel {
  width: min(900px, 100%);
  max-height: calc(100vh - 32px);
}

.admin-layout .email-preview-area {
  align-self: stretch;
  width: 100%;
  margin-top: 12px;
}

.admin-layout .email-preview-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 8px;
}

.admin-layout .email-preview-tabs .cm-chip[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.admin-layout .email-preview-frame {
  display: block;
  width: 100%;
  height: min(60vh, 640px);
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: #fff;
}

.admin-layout .email-preview-frame[hidden],
.admin-layout .email-preview-text[hidden] {
  display: none;
}

.admin-layout .email-preview-text {
  max-height: min(60vh, 640px);
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-alt);
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-layout .email-preview-redacted,
.admin-layout .email-preview-none {
  margin: 0 0 8px;
}

@media (max-width: 600px) {
  .admin-layout .email-preview-frame,
  .admin-layout .email-preview-text {
    height: 55vh;
    max-height: 55vh;
  }
}

/* Every delivery step on one line (Activity and Sent emails): the bad ones in red */
.admin-layout .delivery-step.is-bad {
  color: var(--color-danger-text);
}

.admin-layout .delivery-step.is-warn {
  color: var(--color-warning-text);
}

.admin-layout .delivery-step.is-muted {
  color: var(--color-text-muted);
}

.admin-layout .activity-delivery.is-bad .delivery-step:not(.is-bad) {
  color: var(--color-text);
}

.admin-layout .delivery-steps {
  margin-top: 4px;
  font-size: 12.5px;
}

.admin-layout .delivery-steps summary {
  width: max-content;
  color: var(--color-link);
  cursor: pointer;
}

.admin-layout .delivery-steps summary:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

.admin-layout .delivery-steps-line {
  margin: 4px 0 0;
  padding: 2px 8px;
  border-left: 3px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-alt);
  line-height: 18px;
}

.admin-layout .delivery-steps-line.is-good {
  border-left-color: var(--color-primary);
}

.admin-layout .delivery-steps-line.is-warn {
  border-left-color: var(--color-warning-text);
}

.admin-layout .delivery-steps-line.is-bad {
  border-left-color: var(--color-danger);
}

/* ======================================================================
   Automation canvas: COMPACT CARDS (last in the file: they take over from the older canvas rules)
   One width for every card (232px, the main column and the lanes alike), everything centred: the
   icon tile, "STEP 9", the title on one line (cut with …, the whole title in the tooltip and the
   card's label), one short summary line (2 lines at most; the whole of it in the tooltip and the
   editor), the count chips wrapping in a tidy row. Shorter gaps, lanes closer together. The step
   colours, the left edge and the tints stay. Square corners.
   ====================================================================== */
.admin-layout .flow-editor {
  --flow-main-w: 232px;
  --flow-lane-w: 232px;
  --flow-card-h: 0px;
  --flow-gap: 64px;
}

.admin-layout .flow-editor.is-compact {
  --flow-gap: 44px;
}

.admin-layout .flow-editor .flow-lanes {
  --flow-lane-gap: 28px;
}

.admin-layout .flow-editor .flow-block-main {
  min-height: 0;
  row-gap: 2px;
  padding: 10px 10px 6px;
}

.admin-layout .flow-editor .flow-block-main > .flow-text {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.admin-layout .flow-editor .flow-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
}

.admin-layout .flow-editor .flow-step-label {
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .flow-editor .flow-block-main .flow-title {
  display: block;
  max-width: 100%;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-layout .flow-editor .flow-block-main > .flow-summary,
.admin-layout .flow-editor .flow-block-main > .flow-summary.is-rule {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
}

.admin-layout .flow-editor .flow-block-main:focus-visible > .flow-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.admin-layout .flow-editor .flow-badges {
  gap: 3px;
}

.admin-layout .flow-editor .flow-problem {
  font-size: 10px;
  line-height: 15px;
  padding: 0 6px;
}

.admin-layout .flow-editor .flow-block > .flow-counts-row {
  gap: 3px;
  padding: 0 8px 8px;
}

.admin-layout .flow-editor .flow-block .flow-count {
  padding: 0 6px;
  font-size: 10.5px;
  line-height: 18px;
}

/* The "Continues" card and the open slot: the same width */
.admin-layout .flow-editor .flow-join .flow-block-main {
  padding-bottom: 4px;
}

.admin-layout .flow-editor .flow-slot {
  padding: 8px 10px;
}

/* Phones: the "+" has a 44px hit area (the visible square stays small) */
@media (max-width: 600px) {
  .admin-layout .flow-editor .flow-plus {
    position: relative;
    width: 44px;
    height: 44px;
    background: transparent;
    box-shadow: none;
  }

  .admin-layout .flow-editor .flow-plus::before {
    content: "";
    position: absolute;
    inset: 11px;
    background: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
    box-shadow: var(--flow-hairline);
  }

  .admin-layout .flow-editor .flow-plus svg {
    position: relative;
  }

  .admin-layout .flow-editor.is-compact {
    --flow-gap: 56px;
  }
}

/* The Run log's "Where they are": the same compact, centred cards in one column */
.admin-layout .run-flow {
  align-items: center;
  gap: 18px;
}

.admin-layout .run-flow-item {
  width: 100%;
  max-width: 260px;
}

.admin-layout .run-flow-item + .run-flow-item::before {
  top: -18px;
  left: 50%;
  height: 18px;
  transform: translateX(-1px);
}

.admin-layout .run-flow-card {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  border-radius: 0;
}

.admin-layout .run-flow-text {
  align-items: center;
  max-width: 100%;
}

/* A Fork in "Where they are" (admin.js pairFlowItems): Path A | Path B side by side, like the canvas;
   each column its own cards and status line; on a phone one above the other */
.admin-layout .run-flow-item.run-flow-fork-lanes {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(var(--run-lanes-n, 2), minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* A Fork inside a Fork path (Ben 2026-11-04): its paths inside the outer path's column, a little
   indented, with a lighter line on top; no extra frame */
.admin-layout .run-flow-item.run-flow-fork-lanes.is-inner {
  gap: 8px;
  margin-left: 6px;
}

.admin-layout .run-flow-lane.is-inner {
  padding: 6px 0 0;
  border-top-width: 1px;
  border-top-color: var(--color-border);
}

.admin-layout .run-flow-lane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-top: 2px solid var(--color-border-strong);
}

.admin-layout .run-flow-lane-title {
  margin: 0;
  font-size: 12px;
  text-align: center;
}

.admin-layout .run-flow-lane-list {
  width: 100%;
}

.admin-layout .run-flow-empty-lane p {
  margin: 0;
  text-align: center;
}

.admin-layout .run-log-lane {
  margin-right: 6px;
  border-radius: 0;
  font-size: 11px;
}

@media (max-width: 600px) {
  .admin-layout .run-flow-item.run-flow-fork-lanes {
    grid-template-columns: 1fr;
  }
}

/* ----- Zoom and navigation: the panel at the canvas's bottom left (stays in view) ----- */
.admin-layout .flow-editor .flow-zoom-dock {
  top: auto;
  bottom: 12px;
  justify-content: flex-start;
}

.admin-layout .flow-editor .flow-zoom-bar {
  margin: 0 0 0 12px;
  transform: translateY(calc(-100% - 12px));
}

.admin-layout .flow-editor .flow-zoom-title {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-layout .flow-editor .flow-zoom-full {
  min-width: 96px;
  font-size: 13px;
}

/* Room under the last card for the panel */
.admin-layout .flow-editor .flow-canvas {
  padding-bottom: 72px;
}

/* ----- The title bar never leaves the screen (Ben 2026-11-09: "When I ZOOM in I dont want the bar to
   disappear"): it is pinned under the admin's top bar (--admin-nav-height includes the alert bar when it
   shows); the canvas fills the window under it (--flow-canvas-h, admin.js sizeFlowCanvas) and is the only
   thing that scrolls, so zooming never moves the page. The navigation panel sits at its bottom left. ----- */
.admin-layout #automation-editor-view > .flow-editor-header {
  position: sticky;
  top: var(--admin-nav-height, 56px);
  z-index: 20;
  background: var(--lv-body, var(--color-bg));
}

.admin-layout #automation-editor-view .flow-canvas-wrap {
  position: relative;
  height: var(--flow-canvas-h, calc(100vh - 160px));
}

.admin-layout #automation-editor-view .flow-canvas {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}

.admin-layout #automation-editor-view .flow-zoom-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
}

@media (max-width: 600px) {
  .admin-layout .flow-editor .flow-canvas {
    padding-top: 32px;
    padding-bottom: 80px;
  }

  .admin-layout .flow-editor .flow-zoom-title {
    display: none;
  }

  .admin-layout .flow-editor .flow-zoom-full {
    min-width: 0;
  }
}

/* ----- Full screen: the canvas fills the screen; the admin's top bar and the page around it are
   hidden. The page itself is what goes full screen (so the "+" menu, the step panel, the drawers,
   the "here" popups, confirm boxes and the red bar all still show above it). Phones without the
   Fullscreen API: the same, filling the window. ----- */
html.flow-fullscreen .admin-bar,
html.flow-fullscreen .admin-subbar,
html.flow-fullscreen #automation-editor-view > .flow-counts {
  display: none !important;
}

/* (the title bar stays, pinned at the top of the screen, the canvas under it: Ben 2026-11-09) */
html.flow-fullscreen #automation-editor-view > .flow-editor-header {
  position: fixed;
  top: var(--alert-bar-h, 0px);
  left: 0;
  right: 0;
  z-index: 61;
  margin: 0;
  padding: 4px 16px;
}

html.flow-fullscreen #automation-editor-view .flow-canvas-wrap {
  position: fixed;
  inset: calc(var(--alert-bar-h, 0px) + var(--flow-header-h, 48px)) 0 0 0;
  height: auto;
  z-index: 60;
  background: var(--color-surface);
}

html.flow-fullscreen #automation-editor-view .flow-canvas {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  border: 0;
}

html.flow-fullscreen #automation-editor-view .flow-zoom-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
}

/* The step's edit panel opens over the full-screen canvas */
html.flow-fullscreen #automation-editor-view .flow-panel {
  z-index: 65;
}

/* ======================================================================
   ADMIN FONT AND TEXT COLOURS (the admin page only: body.admin-layout; this stylesheet is shared with
   the member area, checkout, Privacy, Terms and sms-optin, which keep Montserrat and their colours)
   Font: Open Sans (SIL Open Font License), self-hosted in public/fonts (Latin and Latin Extended,
   weights 400 to 700 in one variable file each), font-display: swap. ONE variable, --admin-font; the
   shared --font-body / --font-heading point at it inside the admin, so every piece that already uses
   them (buttons, fields, tables, drawers, popups, the alert bar, the email editor's chrome) follows.
   Monospace stays where code and [merge_fields] are shown.
   Colours (contrast on the page background): light main text #111 (18.9:1), muted #3d3d3d (10.9:1),
   hints #505050 (8.1:1; 7.3:1 on grey panels), placeholders #6b6b6b (5.3:1), disabled #767676
   (4.1:1), link text #0B6E44; dark main #F3F5F4 (16:1), muted #D0D3D1 (11.6:1), hints #B9BCBA
   (9.1:1), placeholders #A3A7A5 (8:1), disabled #8F9391 (5.1:1). Borders a little darker. The
   green brand fill, the status colours and the red alert bar are unchanged.
   ====================================================================== */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.admin-layout {
  --admin-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: var(--admin-font);
  --font-heading: var(--admin-font);
  --color-text: #111111;
  --color-text-muted: #3d3d3d;
  --color-text-lighter: #505050;
  --color-border: rgba(0, 0, 0, 0.13);
  --color-accent-text: #0B6E44;
  --field-text: #111111;
  --field-placeholder: #6b6b6b;
  --field-disabled-text: #767676;
  /* disabled buttons: still readable (4.3:1), clearly lighter than active ones */
  --btn-disabled-text: #66788c;
  font-family: var(--admin-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.admin-layout {
    --color-text: #F3F5F4;
    --color-text-muted: #D0D3D1;
    --color-text-lighter: #B9BCBA;
    --color-border: rgba(237, 239, 238, 0.13);
    --color-accent-text: #3ECF8E;
    --field-text: #F3F5F4;
    --field-placeholder: #A3A7A5;
    --field-disabled-text: #8F9391;
    --btn-disabled-text: #7c90a6;
  }
}

:root[data-theme="dark"] body.admin-layout {
  --color-text: #F3F5F4;
  --color-text-muted: #D0D3D1;
  --color-text-lighter: #B9BCBA;
  --color-border: rgba(237, 239, 238, 0.13);
  --color-accent-text: #3ECF8E;
  --field-text: #F3F5F4;
  --field-placeholder: #A3A7A5;
  --field-disabled-text: #8F9391;
  --btn-disabled-text: #7c90a6;
}

/* Buttons and fields take the admin font instead of the browser's own; zero specificity (:where), so
   anything with its own font (monospace code and [merge_fields]) keeps it */
:where(body.admin-layout) :where(button, input, select, textarea) {
  font-family: var(--admin-font);
}

/* Tables: data at least 14px, the headings in small bold capitals, dark */
body.admin-layout .members-table td {
  font-size: max(14px, 1em);
}

body.admin-layout .members-table th,
body.admin-layout .members-table th .th-sort {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Labels and hints: never under 13px, readable */
body.admin-layout .field-label {
  font-size: max(13.5px, 1em);
  color: var(--color-text-muted);
}

/* What the members see stays as they see it: the page builder's preview of a member page (the
   member site's Montserrat and colours) and the email editor's paper (the email's own font) */
body.admin-layout .pb-preview {
  --font-body: "Montserrat", system-ui, sans-serif;
  --font-heading: "Montserrat", system-ui, sans-serif;
  --color-text: #030303;
  --color-text-muted: #464646;
  --color-text-lighter: #696969;
  --color-border: rgba(3, 3, 3, 0.081);
  --color-accent-text: #0E7E4E;
  font-family: var(--font-body);
  font-weight: 450;
  line-height: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.admin-layout .pb-preview {
    --color-text: #EDEFEE;
    --color-text-muted: #BCBDBC;
    --color-text-lighter: #989A99;
    --color-border: rgba(237, 239, 238, 0.075);
    --color-accent-text: #3ECF8E;
  }
}

:root[data-theme="dark"] body.admin-layout .pb-preview {
  --color-text: #EDEFEE;
  --color-text-muted: #BCBDBC;
  --color-text-lighter: #989A99;
  --color-border: rgba(237, 239, 238, 0.075);
  --color-accent-text: #3ECF8E;
}

:where(body.admin-layout .pb-preview) :where(button, input, select, textarea) {
  font-family: var(--font-body);
}

/* ===== "Edit details": one editor for a member (Name, Contact, Account) ===== */
.member-edit-dialog.pw-dialog { width: min(560px, calc(100vw - 32px)); }
.ed-form { display: grid; gap: 16px; margin-top: 12px; }
.ed-section { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--color-border); border-radius: 0; min-width: 0; display: grid; gap: 10px; }
.ed-legend { padding: 0 6px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text); }
.ed-field { display: grid; gap: 4px; min-width: 0; }
.ed-field .input-field { width: 100%; box-sizing: border-box; }
.ed-field .input-narrow { max-width: 220px; }
.ed-consent-details { display: grid; gap: 10px; }
.ed-consent-details[hidden] { display: none; }
.ed-form .checkbox-field { min-height: 44px; align-items: center; }
.ed-form .admin-form-actions { justify-content: flex-end; }
.mv-block-plain { padding: 4px 0; }
@media (max-width: 600px) {
  .ed-form .btn, .mv-edit-details { min-height: 44px; }
  .ed-form .input-field { min-height: 44px; }
}

/* ======================================================================
   Automation canvas: STEP CARDS: ONE SIZE (they take over from the compact cards above)
   Every card (the trigger, every step, the "Continues" cards) is exactly --flow-card-w by
   --flow-card-h, whatever its type or text: nothing grows it. Centred, top to bottom: the icon tile,
   "STEP 3" (or "Trigger"), ONE bold name and ONE value line, each on one line and cut with "…" (the
   whole text is in the tooltip and the Details popup). Two small square buttons in the bottom
   corners: Traffic (left; its two badges: waiting / stuck, failed) and Details (right). An amber "!"
   corner mark and a stronger outline when the step needs attention. The step colours stay.
   ====================================================================== */
.admin-layout .flow-editor,
.admin-layout .run-flow {
  --flow-card-w: 232px;
  --flow-card-h: 104px;
}
.admin-layout .flow-editor .flow-block {
  box-sizing: border-box;
  width: var(--flow-card-w);
  min-width: var(--flow-card-w);
  max-width: var(--flow-card-w);
  height: var(--flow-card-h);
  min-height: var(--flow-card-h);
  max-height: var(--flow-card-h);
  flex: none;
}
.admin-layout .flow-editor .flow-block > .flow-block-main {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: 0;
  /* (the lines centred in the space above the corner buttons, whether there are 3 or 4) */
  justify-content: center;
  padding: 4px 10px 22px;
  overflow: hidden;
  text-align: center;
}
.admin-layout .flow-editor .flow-block-main > .flow-icon {
  width: 26px;
  height: 26px;
  margin: 0 0 3px;
}
.admin-layout .flow-editor .flow-block-main > .flow-icon svg {
  width: 16px;
  height: 16px;
}
.admin-layout .flow-editor .flow-block-main > .flow-step-label,
.admin-layout .flow-editor .flow-block-main > .flow-title,
.admin-layout .flow-editor .flow-block-main > .flow-value {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-layout .flow-editor .flow-block-main > .flow-step-label {
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.admin-layout .flow-editor .flow-block-main > .flow-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 18px;
  color: var(--color-text);
}
/* (the value line stays clear of the two corner buttons) */
.admin-layout .flow-editor .flow-block-main > .flow-value {
  max-width: calc(100% - 52px);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
}
/* "Show details" (admin.js flowDetails): every card the same, a little taller, so the lanes, arrows and
   connectors stay aligned; under the name ONE short muted line, 2 lines at most, then "…" */
.admin-layout .flow-editor.shows-details {
  --flow-card-h: 140px;
}
.admin-layout .flow-editor .flow-block-main > .flow-detail-line {
  display: -webkit-box;
  max-width: 100%;
  margin: 4px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* (on: the short value line would say the same in fewer words; the detail line says it in full) */
.admin-layout .flow-editor.shows-details .flow-block-main > .flow-value {
  display: none;
}
.admin-layout .flow-editor .flow-details-toggle[aria-pressed="true"] {
  background: var(--color-surface-alt);
  font-weight: 700;
}
/* The step panel: the same line, in full, under its title */
.admin-layout .flow-panel-detail {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}
/* Needs attention: the "!" corner mark and a stronger outline (inside: the size never changes) */
.admin-layout .flow-editor .flow-block.has-problem {
  border-color: var(--color-warning-text);
  box-shadow: inset 0 0 0 1px var(--color-warning-text), var(--shadow-card);
}
.admin-layout .flow-editor .flow-block-main > .flow-problem-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--color-warning-text);
  color: var(--color-surface);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
/* The corner buttons: Traffic (bottom left) and Details (bottom right), the same for every card */
.admin-layout .flow-editor .flow-card-tools {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 0;
  pointer-events: none;
}
.admin-layout .flow-card-btn {
  position: absolute;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  pointer-events: auto;
}
.admin-layout .flow-card-btn svg {
  width: 15px;
  height: 15px;
}
.admin-layout .flow-card-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.admin-layout .flow-card-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.admin-layout .flow-editor .flow-card-tools > .flow-traffic {
  left: 0;
}
.admin-layout .flow-editor .flow-card-tools > .flow-details {
  right: 0;
}
/* No traffic yet: greyed (it still opens: "Nobody has reached this step yet") */
.admin-layout .flow-card-btn.flow-traffic.is-empty {
  opacity: 0.5;
}
/* The two numbers allowed on the card: waiting / stuck (amber) and failed (red), only above 0, in a
   small row just right of the Traffic button (inside the card) */
.admin-layout .flow-traffic .flow-badge-row {
  position: absolute;
  left: calc(100% + 4px);
  top: 4px;
  display: flex;
  gap: 3px;
  pointer-events: none;
}
/* (each number takes the mouse itself: its own tooltip, and a click opens its members) */
.admin-layout .flow-traffic .flow-badge {
  pointer-events: auto;
  cursor: pointer;
}
.admin-layout .flow-traffic .flow-badge {
  min-width: 16px;
  height: 15px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  color: #fff;
}
.admin-layout .flow-traffic .flow-badge[hidden] {
  display: none;
}
.admin-layout .flow-traffic .flow-badge.is-wait {
  background: var(--color-warning-text);
  color: var(--color-surface);
}
.admin-layout .flow-traffic .flow-badge.is-failed {
  background: var(--color-danger);
}
/* "7": the members in this step now (a calm blue-grey, not an alarm; a plain number, no icon) */
.admin-layout .flow-traffic .flow-badge.is-next {
  background: color-mix(in srgb, var(--color-text) 62%, var(--color-surface));
  color: var(--color-surface);
  font-weight: 600;
}
/* "All 42 accounted for" (green) or the difference (amber) in the counts line above the canvas */
.admin-layout .flow-accounted {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 600;
}
.admin-layout .flow-accounted.is-ok {
  color: var(--color-success-text, var(--color-primary));
}
.admin-layout .flow-accounted.is-warn {
  color: var(--color-warning-text);
}
/* The hover toolbar (up, down, copy, delete) floats above the card everywhere, touch screens too */
@media (hover: none) {
  .admin-layout .flow-editor .flow-block > .flow-actions {
    position: absolute;
    top: -13px;
    right: 10px;
    padding: 0;
  }
}
/* The "Continues" card: the same size; its "Change" link at the bottom */
.admin-layout .flow-editor .flow-join > .flow-join-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  display: flex;
  justify-content: center;
  padding: 0;
}
.admin-layout .flow-editor .flow-join > .flow-block-main > .flow-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.admin-layout .flow-editor .flow-join .flow-join-title {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The End pill keeps its size and look; its Traffic button sits right beside it */
.admin-layout .flow-editor .flow-end {
  position: relative;
}
.admin-layout .flow-editor .flow-end > .flow-traffic {
  position: absolute;
  left: calc(50% + 40px);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
/* The Traffic and Details popups: small, next to their button (on phones: centred, as others) */
.visits-dialog.is-anchored {
  display: block;
  padding: 0;
  background: transparent;
}
.visits-dialog.is-anchored > .flow-card-pop {
  position: fixed;
  width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.admin-layout .flow-card-pop .flow-pop-problem {
  margin: 0;
  padding: 6px 8px;
  border-left: 3px solid var(--color-warning-text);
  color: var(--color-warning-text);
  font-size: 13px;
}
.admin-layout .flow-card-pop .flow-pop-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.admin-layout .flow-card-pop .flow-pop-actions {
  display: flex;
  justify-content: flex-end;
}
.admin-layout .flow-traffic-rows {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--color-border);
}
.admin-layout .flow-traffic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  border-bottom: 1px solid var(--color-border);
}
.admin-layout .flow-traffic-row > dt {
  font-size: 13.5px;
  color: var(--color-text);
}
.admin-layout .flow-traffic-row > dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}
.admin-layout .flow-traffic-row .flow-traffic-open,
.admin-layout .flow-traffic-row .flow-traffic-count {
  min-width: 32px;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}
.admin-layout .flow-traffic-row .flow-traffic-count {
  color: var(--color-text-muted);
}
.admin-layout .flow-traffic-row .flow-traffic-note {
  font-size: 12px;
  color: var(--color-text-muted);
}
.admin-layout .flow-traffic-row.is-late > dt,
.admin-layout .flow-traffic-row.is-late .flow-traffic-open {
  color: var(--color-warning-text);
}
.admin-layout .flow-traffic-row.is-failed > dt,
.admin-layout .flow-traffic-row.is-failed .flow-traffic-open {
  color: var(--color-danger-text);
}
/* Phones: 44px touch targets for the two corner buttons (the visible square stays small) */
@media (max-width: 600px) {
  .admin-layout .flow-card-btn::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
  .admin-layout .flow-traffic-row {
    min-height: 44px;
  }
  .admin-layout .flow-traffic-row .flow-traffic-open {
    min-height: 44px;
  }
}
/* The Run log's "Where they are" (and the member's Automations tab): the same card, the same size;
   its state line ("Done 3:40 PM", "Waiting until …") where the canvas card has its buttons */
.admin-layout .run-flow-item {
  max-width: var(--flow-card-w);
}
.admin-layout .run-flow-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: var(--flow-card-w);
  height: var(--flow-card-h);
  padding: 7px 10px 0;
  overflow: hidden;
  text-align: center;
}
.admin-layout .run-flow-card > .run-flow-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
}
.admin-layout .run-flow-card > .run-flow-label,
.admin-layout .run-flow-card > .run-flow-title,
.admin-layout .run-flow-card > .run-flow-summary,
.admin-layout .run-flow-card > .run-flow-state {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-layout .run-flow-card > .run-flow-label {
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.admin-layout .run-flow-card > .run-flow-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 18px;
}
.admin-layout .run-flow-card > .run-flow-summary {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
}
.admin-layout .run-flow-card > .run-flow-state {
  margin-top: auto;
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

/* ======================================================================
   Sticky notes on the automation canvas (admin-flow-notes.js): their own layer inside #flow (so they
   scroll and zoom with the canvas), above the cards but under the "+" buttons, never part of the flow.
   ====================================================================== */
:root {
  --sticky-yellow: #FFF3B0;
  --sticky-blue: #D6E8FF;
  --sticky-green: #D7F2DA;
  --sticky-pink: #FFDCE8;
  --sticky-grey: #E7E9EA;
  --sticky-text: #1F2421;
  --sticky-edge: rgba(0, 0, 0, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sticky-yellow: #4A4320;
    --sticky-blue: #22344D;
    --sticky-green: #233F2A;
    --sticky-pink: #4A2635;
    --sticky-grey: #34383A;
    --sticky-text: #EDEFEE;
    --sticky-edge: rgba(255, 255, 255, 0.2);
  }
}
:root[data-theme="dark"] {
  --sticky-yellow: #4A4320;
  --sticky-blue: #22344D;
  --sticky-green: #233F2A;
  --sticky-pink: #4A2635;
  --sticky-grey: #34383A;
  --sticky-text: #EDEFEE;
  --sticky-edge: rgba(255, 255, 255, 0.2);
}

.admin-layout .flow-editor .flow {
  position: relative;
}

.admin-layout .flow-editor .flow-stickies {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .flow-editor .flow-stickies[hidden] {
  display: none;
}

/* the "+" buttons stay above any note */
.admin-layout .flow-editor .flow-plus {
  z-index: 5;
}

.admin-layout .flow-sticky {
  position: absolute;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid var(--sticky-edge);
  border-radius: 0;
  background: var(--sticky-yellow);
  color: var(--sticky-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.admin-layout .flow-sticky.is-blue { background: var(--sticky-blue); }
.admin-layout .flow-sticky.is-green { background: var(--sticky-green); }
.admin-layout .flow-sticky.is-pink { background: var(--sticky-pink); }
.admin-layout .flow-sticky.is-grey { background: var(--sticky-grey); }
.admin-layout .flow-sticky:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.admin-layout .flow-sticky.is-moving { opacity: 0.9; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }

.admin-layout .flow-sticky-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 4px;
  border-bottom: 1px solid var(--sticky-edge);
  cursor: grab;
  touch-action: none;
  font-size: 11px;
}

.admin-layout .flow-sticky button {
  border-radius: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.admin-layout .flow-sticky-dot {
  flex: 0 0 14px;
  width: 14px;
  min-width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid var(--sticky-text);
  border-radius: 50% !important;
  background: currentColor;
  opacity: 0.55;
}

.admin-layout .flow-sticky-attach,
.admin-layout .flow-sticky-delete,
.admin-layout .flow-sticky-btn {
  padding: 1px 5px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 11px;
}

.admin-layout .flow-sticky-attach { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; }
.admin-layout .flow-sticky-delete { flex: none; margin-left: auto; font-size: 15px; line-height: 1; }
.admin-layout .flow-sticky-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; white-space: nowrap; }
.admin-layout .flow-sticky-state.is-error { color: var(--color-danger-text); opacity: 1; }

.admin-layout .flow-sticky-text {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  resize: none;
  overflow-y: auto;
  white-space: pre-wrap;
}

.admin-layout .flow-sticky-text:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-primary); }
.admin-layout .flow-sticky-limit { margin: 0; padding: 0 8px 4px; font-size: 11px; color: var(--color-danger-text); }

.admin-layout .flow-sticky-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--sticky-edge) 50%);
}

.admin-layout .flow-sticky-menu {
  position: absolute;
  top: 28px;
  left: 4px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 260px;
  padding: 6px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.admin-layout .flow-sticky-menu[hidden],
.admin-layout .flow-sticky-confirm[hidden] { display: none; }

.admin-layout .flow-sticky-steps { flex-direction: column; flex-wrap: nowrap; max-height: 220px; overflow-y: auto; }
.admin-layout .flow-sticky-steps button { padding: 4px 6px; border: 0; background: transparent; text-align: left; font-size: 12px; }
.admin-layout .flow-sticky-steps button:hover,
.admin-layout .flow-sticky-steps button:focus-visible { background: var(--color-surface-alt); }

.admin-layout .flow-sticky-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid var(--sticky-edge) !important;
  border-radius: 50% !important;
}
.admin-layout .flow-sticky-swatch.is-yellow { background: var(--sticky-yellow); }
.admin-layout .flow-sticky-swatch.is-blue { background: var(--sticky-blue); }
.admin-layout .flow-sticky-swatch.is-green { background: var(--sticky-green); }
.admin-layout .flow-sticky-swatch.is-pink { background: var(--sticky-pink); }
.admin-layout .flow-sticky-swatch.is-grey { background: var(--sticky-grey); }
.admin-layout .flow-sticky-swatch[aria-checked="true"] { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.admin-layout .flow-sticky-confirm {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-top: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 12px;
}
.admin-layout .flow-sticky-btn { border-color: var(--color-border-strong); }
.admin-layout .flow-sticky-btn.is-danger { border-color: var(--color-danger-text); color: var(--color-danger-text); }

.admin-layout .flow-sticky-undo {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.admin-layout .flow-sticky-undo-btn { padding: 0; border: 0; background: none; color: var(--color-link); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

.admin-layout .flow-editor .flow-notes-toggle.is-off { opacity: 0.6; }

/* Phones: room for "+ Note" and "Notes" in the navigation bar (its "Navigation" label goes; it wraps
   rather than being wider than the screen) */
@media (max-width: 600px) {
  .admin-layout .flow-editor .flow-zoom-title { display: none; }
  .admin-layout .flow-editor .flow-zoom-bar { flex-wrap: wrap; max-width: calc(100vw - 24px); }
}
.admin-layout .flow-editor .flow-note-add,
.admin-layout .flow-editor .flow-notes-toggle { font-size: 13px; white-space: nowrap; }

/* The status line next to the automation's name, and both on the automations list */
.admin-layout .flow-status-note {
  min-width: 0;
  width: min(360px, 100%);
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
}
.admin-layout .flow-status-state { font-size: 12px; color: var(--color-text-muted); }
.admin-layout .flow-status-state.is-error { color: var(--color-danger-text); }
.admin-layout .auto-notes-badge { padding: 0 6px; font-size: 12px; white-space: nowrap; border: 1px solid var(--sticky-edge); background: var(--sticky-yellow); color: var(--sticky-text); }

/* ======================================================================
   The shared admin bar and tables (Ben, 2026-10-30): one light look for every list.
   Tables (.members-table, the admin's one table class): a faint tint, a soft 1px border, 8px rounded
   corners on the table only (cells square), a thin line between rows and none between columns, 12px
   by 16px cells, a slightly tinted header in small muted capitals, a soft row hover; 13px text (the
   Messages scale); no boxes in cells (one status pill stays; other badges plain muted text).
   The bar (.afb, admin-filterbar.js): one light rounded bar with a thin border: the search wide with
   its icon and ×, the filters as compact "Label: value" buttons, More filters with a count, Clear,
   the actions at the right end (the main one the only filled button). Everything 36px high, 13px.
   Rounded 8px corners here are Ben's choice for these two containers; everything else stays square.
   ====================================================================== */
.admin-layout {
  --list-tint: color-mix(in srgb, var(--color-text) 2.5%, var(--color-surface));
  --list-head: color-mix(in srgb, var(--color-text) 5%, var(--color-surface));
  --list-hover: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
  --list-line: var(--color-border);
  --list-radius: 8px;
  --bar-control-h: 36px;
}

.admin-layout .members-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--list-line);
  border-radius: var(--list-radius);
  background: var(--list-tint);
  font-size: 13px;
}

.admin-layout .members-table th,
body.admin-layout .members-table th {
  padding: 12px 16px;
  background: var(--list-head);
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--list-line);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-layout .members-table td,
body.admin-layout .members-table td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--list-line);
  background: transparent;
  font-size: 13px;
}

.admin-layout .members-table tr > :first-child { padding-left: var(--list-first-col-pad); }
.admin-layout .members-table tr > :last-child { padding-right: 16px; }

.admin-layout .members-table thead tr:first-child > :first-child { border-top-left-radius: var(--list-radius); }
.admin-layout .members-table thead tr:first-child > :last-child { border-top-right-radius: var(--list-radius); }
.admin-layout .members-table tbody tr:last-child > td { border-bottom: 0; }
.admin-layout .members-table tbody tr:last-child > td:first-child { border-bottom-left-radius: var(--list-radius); }
.admin-layout .members-table tbody tr:last-child > td:last-child { border-bottom-right-radius: var(--list-radius); }

/* A sortable header's button carries the header's padding (Members: the whole cell is the button) */
.admin-layout .members-table th .th-sort {
  min-height: 0;
  padding: 12px 16px;
}

.admin-layout .members-table th.th-sortable {
  padding: 0;
}

/* No stripes; a soft hover */
.admin-layout .members-table tbody tr:nth-child(even) td { background: transparent; }
.admin-layout .members-table tbody tr:hover td { background: var(--list-hover); }

/* Numbers right-aligned in tabular figures */
.admin-layout .members-table .is-num,
.admin-layout .members-table td.opp-sale-amount,
.admin-layout .members-table th.col-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* No boxes in cells: a badge reads as plain muted text (the status pills keep their tint) */
.admin-layout .members-table td .badge:not(.opp-pill):not([class*="is-"]):not([class*="status"]) {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: inherit;
}

/* Sales: the shared look wins over the page's earlier table rules */
.admin-layout #panel-ontraport-products .opp-table th,
.admin-layout #panel-ontraport-products .opp-table td {
  padding: 12px 16px;
}

.admin-layout .opp-table-wrap {
  border: 0;
  border-radius: var(--list-radius);
}

.admin-layout #panel-ontraport-products .opp-sales-table tr.opp-sale > td {
  height: auto;
}

/* Transactions in the Automations list look ([admin-pages-match-automations]): the headings and the
   thin lines from the one set of --olist-* values (its rows keep two lines: the name, the email) */
.admin-layout #panel-ontraport-products .opp-table.list-op th {
  border-bottom: 1px solid var(--olist-line);
  background: var(--olist-bg);
  box-shadow: none;
  color: var(--olist-head-color);
  font-size: var(--olist-size);
  font-weight: var(--olist-head-weight);
  letter-spacing: 0;
}

.admin-layout #panel-ontraport-products .opp-table.list-op td {
  border-bottom: 1px solid var(--olist-line);
}

.admin-layout #panel-ontraport-products .opp-pane {
  gap: 16px;
}

.admin-layout .opp-chips {
  gap: 12px;
}

/* ----- The bar ----- */
.admin-layout .afb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px;
  border: 1px solid var(--list-line);
  border-radius: var(--list-radius);
  background: var(--list-tint);
}

#panel-ontraport-products .afb {
  margin: 0;
}

.admin-layout .afb .input-field,
.admin-layout .afb .btn,
.admin-layout .afb select {
  height: var(--bar-control-h);
  min-height: var(--bar-control-h);
  margin: 0;
  font-size: 13px;
}

/* The search: first and wide, the magnifier inside, × while it has text */
.admin-layout .afb-search,
.admin-layout .afb .member-search-row,
.admin-layout .afb .lesson-search-input {
  order: -1; /* (the search first, wherever the page put it) */
  position: relative;
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  min-width: 200px;
  max-width: 460px;
}

.admin-layout .afb-search-icon,
.admin-layout .afb .member-search-icon,
.admin-layout .afb .lesson-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.admin-layout .afb-search .input-field,
.admin-layout .afb-search .afb-search-input,
.admin-layout .afb .member-search-row .input-field,
.admin-layout .afb .lesson-search-input .input-field {
  height: var(--bar-control-h);
  min-height: var(--bar-control-h);
  margin: 0;
  font-size: 13px;
  width: 100%;
  max-width: none;
  padding: 0 34px;
  border-radius: 6px !important;
}

.admin-layout .afb-search-clear,
.admin-layout .afb .member-search-clear,
.admin-layout .afb .lesson-search-x {
  position: absolute;
  right: 4px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.admin-layout .afb-search-clear:hover { background: var(--list-hover); color: var(--color-text); }
.admin-layout .afb-search-clear[hidden],
.admin-layout .afb .member-search-clear[hidden],
.admin-layout .afb .lesson-search-x[hidden] { display: none; }

.admin-layout .afb-search-clear:focus-visible,
.admin-layout .afb-select:focus-within,
.admin-layout .afb-more-btn:focus-visible,
.admin-layout .afb-filters-btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 1px;
}

/* The filters: one compact button each ("Status: Any"), a thin line before them */
.admin-layout .afb-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-layout .afb-divider {
  align-self: stretch;
  width: 1px;
  margin: 4px 2px;
  background: var(--list-line);
}

.admin-layout .afb-select,
.admin-layout .afb-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--bar-control-h);
  padding: 0 0 0 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface);
  font-size: 13px;
  white-space: nowrap;
}

.admin-layout .afb-select.is-set {
  border-color: var(--color-primary);
}

/* (a Members-like bar inside its own card: one container, not a card in a card) */
.admin-layout .member-filter-bar:has(> .afb) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-layout .afb .member-filters-badge[hidden] {
  display: none;
}

.admin-layout .afb-select-word {
  color: var(--color-text-muted);
}

.admin-layout .afb-select select,
.admin-layout .afb-date input {
  width: auto;
  min-width: 0;
  height: calc(var(--bar-control-h) - 2px);
  min-height: 0;
  padding: 0 28px 0 2px;
  box-shadow: none;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
}

/* (the admin's field colours are set with !important and a long selector for every field; this one
   weighs more, with two :not() of classes nothing has, so the dropdown inside the button has no box) */
.admin-layout .afb :is(.afb-select, .afb-date) :is(select, input):not(.afb-none):not(.afb-none-2) {
  border: 0 !important;
  background-color: transparent !important;
}

.admin-layout .afb-select select {
  /* (the dropdown arrow stays: the field rule above only took its box) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23898989' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.admin-layout .afb-date input {
  padding-right: 8px;
}

.admin-layout .afb-select select:focus,
.admin-layout .afb-date input:focus {
  outline: none;
}

/* More filters: a count while some are in use, a small panel */
.admin-layout .afb-more {
  position: relative;
}

.admin-layout .afb-more-btn,
.admin-layout .afb-filters-btn,
.admin-layout .afb .member-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--bar-control-h);
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.admin-layout .afb-count,
.admin-layout .afb .member-filters-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-primary);
  color: var(--color-primary-text, #fff);
  font-size: 11px;
  font-weight: 700;
}

.admin-layout .afb-count[hidden] { display: none; }

.admin-layout .afb-more-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 240px;
  padding: 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--list-radius);
  background: var(--color-surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.admin-layout .afb-more-panel[hidden] { display: none; }

.admin-layout .afb-more-panel.is-end {
  left: auto;
  right: 0;
}

.admin-layout .afb-clear {
  font-size: 13px;
}

/* The actions at the right end: the main one filled, the others quiet outlines */
.admin-layout .afb-actions,
.admin-layout .afb .cm-toolbar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.admin-layout .afb-actions .btn {
  width: auto;
  border-radius: 6px;
}

.admin-layout .afb-actions .btn-secondary {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

/* The Filters button is for phones only */
.admin-layout .afb-filters-btn {
  display: none;
}

/* Phones: the search on its row; Filters (with a count) beside the actions; nothing wider */
@media (max-width: 700px) {
  .admin-layout .afb-search,
  .admin-layout .afb .member-search-row {
    flex-basis: 100%;
    max-width: none;
  }

  .admin-layout .afb-filters-btn {
    display: inline-flex;
  }

  .admin-layout .afb .afb-filters {
    display: none;
  }

  .admin-layout .afb.is-open .afb-filters {
    display: flex;
    flex-basis: 100%;
  }

  .admin-layout .afb-divider {
    display: none;
  }

  .admin-layout .afb-select,
  .admin-layout .afb-date {
    max-width: 100%;
  }

  .admin-layout .afb-select select {
    max-width: 60vw;
  }

  .admin-layout .afb-more-panel {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .admin-layout .members-table {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  /* (a phone's table headers, e.g. Members' sort buttons: plain words, no boxes) */
  .admin-layout .members-table th,
  body.admin-layout .members-table th {
    background: transparent;
  }

  .admin-layout .members-table th .th-sort {
    padding: 6px 10px;
  }
}

/* The rest of the pages in the shared bar (admin.html admin-filter-bar): Orders and Showcases (the
   heading on its own row above the bar), Search lessons and Search members (the box's top row is the
   bar; its note, count and results below, no card around them), the Inbox, Playlists, Vimeo import
   and a member's Tags. "Search in" and "In" stay the same radio choices, as compact "Label:" groups. */
.admin-layout .lesson-search:has(> .afb) {
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-layout .lesson-search > .afb,
.admin-layout .admin-drawer .afb,
.admin-layout .vimeo-import-picker-head .afb {
  margin: 0;
}

.admin-layout .admin-drawer .afb {
  margin-bottom: 12px;
}

.admin-layout .afb .lesson-search-input {
  flex: 1 1 280px;
}

.admin-layout .afb .lesson-search-icon {
  width: 16px;
  height: 16px;
}

.admin-layout .afb .lesson-search-x {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

.admin-layout .afb .lesson-search-x svg {
  width: 14px;
  height: 14px;
}

.admin-layout .afb .lesson-search-options {
  align-items: center;
  gap: 8px;
}

.admin-layout .afb .lesson-search-option {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.admin-layout .afb .lesson-search-option .field-label {
  color: var(--color-text-muted);
  font-weight: 400;
}

.admin-layout .afb .lesson-search-option .field-label::after {
  content: ":";
}

/* (the choices: one rounded group, 36px high, each choice as wide as its words) */
.admin-layout .afb .segmented {
  height: var(--bar-control-h);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface);
}

.admin-layout .afb .segmented-text {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  font-size: 13px;
}

/* The Inbox's narrow column: the bar inset like the list, the search and All / Unread / Done in it */
.admin-layout .msgr-side .inbox-bar {
  margin: 0 14px 8px;
}

.admin-layout .msgr-side .inbox-bar .afb-search {
  min-width: 0;
}

.admin-layout .msgr-side .inbox-bar .inbox-filter {
  margin: 0;
}

/* Vimeo import: the bar takes the rest of the head's row beside "Your showcases" */
.admin-layout .vimeo-import-picker-head .vimeo-import-bar {
  flex: 1 1 320px;
}

.admin-layout .vimeo-import-picker-head .afb-search .input-field {
  flex: 1 1 auto;
}

@media (max-width: 700px) {
  .admin-layout .afb .lesson-search-input {
    flex-basis: 100%;
    max-width: none;
  }

  .admin-layout .afb .lesson-search-option {
    flex-wrap: wrap;
  }

  /* (a long choice may take two lines on a phone: the group grows with it, nothing cut off) */
  .admin-layout .afb .segmented {
    height: auto;
    min-height: var(--bar-control-h);
  }

  .admin-layout .afb .segmented-text {
    min-height: calc(var(--bar-control-h) - 2px);
    padding: 6px 12px;
  }
}

/* Courses → List / Tree (admin.js courseTree*): the switch, then the tree in the shared table look
   (an 8px rounded container, thin lines between rows, a soft hover); each level indented 24px */
.admin-layout .course-view-switch {
  margin: 0 0 16px;
}

/* (in the title row since 2026-11-04: right after Refresh, the row's height) */
.admin-layout .admin-toolbar-end > .course-view-switch {
  order: 99;
  width: auto;
  margin: 0;
}

.admin-layout .admin-toolbar-end > .course-view-switch .segmented-option {
  min-width: 64px;
}

.admin-layout .course-tree {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--list-line);
  border-radius: var(--list-radius);
  background: var(--list-tint);
  overflow: hidden;
}

.admin-layout .course-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .course-tree-item {
  outline: none;
}

.admin-layout .course-tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--list-line);
  font-size: 13px;
}

.admin-layout .course-tree-item[aria-level="2"] > .course-tree-row { padding-left: 40px; }
.admin-layout .course-tree-item[aria-level="3"] > .course-tree-row { padding-left: 64px; }

.admin-layout .course-tree-item[aria-expanded] > .course-tree-row {
  cursor: pointer;
}

.admin-layout .course-tree-row:hover {
  background: var(--list-hover);
}

.admin-layout .course-tree-item:focus-visible > .course-tree-row {
  outline: 2px solid var(--btn-focus, var(--color-primary));
  outline-offset: -2px;
}

.admin-layout .course-tree-item.is-course > .course-tree-row {
  background: var(--list-head);
  font-weight: 600;
}

.admin-layout .course-tree-item.is-course > .course-tree-row:hover {
  background: var(--list-hover);
}

.admin-layout .course-tree-item.is-off > .course-tree-row .course-tree-name {
  color: var(--color-text-muted);
}

.admin-layout .course-tree-chevron {
  flex: none;
  width: 14px;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-muted);
  text-align: center;
}

.admin-layout .course-tree-label {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.admin-layout .course-tree-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-layout .course-tree-meta {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
}

.admin-layout .course-tree-controls {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.admin-layout .course-tree-note {
  padding: 12px 16px 12px 40px;
  border-bottom: 1px solid var(--list-line);
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .course-tree-note.is-error {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--color-danger, #b42318);
}

.admin-layout .course-tree > :last-child > .course-tree-row,
.admin-layout .course-tree > .course-tree-note:last-child {
  border-bottom: 0;
}

.admin-layout .course-tree-status:empty {
  display: none;
}

/* Stage 2: a tick on every course, module and lesson; the bar above the tree */
.admin-layout .course-tree-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
}

.admin-layout .course-tree-item[aria-selected="true"] > .course-tree-row {
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
}

.admin-layout .course-tree-select-bar {
  margin: 0 0 12px;
}

/* Stage 3: dragging a lesson or module (the grip, the row being dragged, the target, the label
   following the pointer) */
.admin-layout .course-tree-grip {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: grab;
  touch-action: none;
}

.admin-layout .course-tree-grip:hover {
  color: var(--color-text);
}

.admin-layout .course-tree-grip svg {
  width: 16px;
  height: 16px;
}

.admin-layout .course-tree-item.is-dragging > .course-tree-row {
  opacity: 0.45;
}

.admin-layout .course-tree-item.is-drop-target > .course-tree-row {
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.course-tree-ghost {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Phones: a smaller indent, the switch and menu under the name when they don't fit */
@media (max-width: 700px) {
  .admin-layout .course-tree-row {
    flex-wrap: wrap;
    padding: 8px 12px;
  }

  .admin-layout .course-tree-item[aria-level="2"] > .course-tree-row { padding-left: 24px; }
  .admin-layout .course-tree-item[aria-level="3"] > .course-tree-row { padding-left: 36px; }

  /* (the tick, the ▸ and the name on the first line; the switch and menu under the name) */
  .admin-layout .course-tree-label {
    flex: 1 1 calc(100% - 70px);
  }

  .admin-layout .course-tree-controls {
    flex-basis: 100%;
    padding-left: 50px;
  }
}

/* ---------- More → Custom code (admin-custom-code.js) ---------- */
.admin-layout .cc-warning {
  margin: 0 0 16px;
  line-height: 1.5;
}

.admin-layout .cc-heading {
  margin: 24px 0 4px;
  font-size: 16px;
}

.admin-layout .cc-websites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.admin-layout .cc-website {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 16px;
}

.admin-layout .cc-website.is-off {
  border-color: var(--color-warning-text);
}

.admin-layout .cc-website-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-layout .cc-website-name {
  margin: 0;
  font-size: 15px;
}

.admin-layout .cc-website-address {
  overflow-wrap: anywhere;
}

.admin-layout .cc-website .field-hint {
  font-size: 13px;
  line-height: 1.4;
}

.admin-layout .cc-switch-row .status-switch {
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-layout .cc-ids {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  align-items: start;
}

.admin-layout .cc-id-field {
  min-width: 0;
}

.admin-layout .cc-id {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
}

.admin-layout .cc-id-note {
  margin: 4px 0 0;
}

.admin-layout .cc-id-note:empty {
  display: none;
}

.admin-layout .cc-id-note.is-error,
.admin-layout .cc-consent-warning {
  color: var(--color-danger-text);
}

.admin-layout .cc-id-save {
  grid-column: 1 / -1;
}

.admin-layout .cc-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-layout .cc-switch-text {
  color: var(--color-text);
  font-size: 13px;
}

.admin-layout .cc-consent-warning,
.admin-layout .cc-off-note {
  margin: 0;
}

.admin-layout .cc-off-note {
  color: var(--color-warning-text);
}

.admin-layout .cc-table td {
  vertical-align: top;
}

.admin-layout .cc-name {
  font-weight: 600;
  text-align: left;
}

.admin-layout .cc-notes-line {
  display: block;
  margin-top: 2px;
  max-width: 40ch;
}

.admin-layout .cc-runs-on {
  max-width: 28ch;
  overflow-wrap: anywhere;
}

.admin-layout .cc-changed {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .cc-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  padding: 16px;
}

.admin-layout .cc-field {
  margin: 0;
}

.admin-layout .cc-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.admin-layout .cc-sites {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-layout .cc-code,
.admin-layout .cc-version-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.admin-layout .cc-code {
  width: 100%;
  min-height: 240px;
  resize: vertical;
  white-space: pre;
  overflow: auto;
}

.admin-layout .cc-ed-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .cc-ed-status {
  margin: 0;
}

.admin-layout .cc-versions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.admin-layout .cc-version {
  margin: 0;
  padding: 12px 16px;
  min-width: 0;
}

.admin-layout .cc-version-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.admin-layout .cc-restore {
  margin-left: auto;
}

.admin-layout .cc-version-code {
  max-height: 160px;
  margin: 8px 0 0;
  padding: 8px;
  overflow: auto;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: pre;
}

@media (max-width: 600px) {
  .admin-layout .cc-ids,
  .admin-layout .cc-two {
    grid-template-columns: 1fr;
  }

  .admin-layout .cc-websites {
    grid-template-columns: 1fr;
  }
}

/* ---------- More → Reminders (admin-reminders-page.js) ---------- */
/* "+ Add reminder" opens the add form in a centered popup, the automation step dialog's look (Ben
   2026-11-01, TASKS.md 7m): 600px, full width with a 16px gutter on a phone, square corners */
.admin-layout .rp-dialog {
  position: fixed;
  top: max(24px, 6vh);
  right: 0;
  left: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100dvh - max(24px, 6vh) - 24px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.45);
}

.admin-layout .rp-dialog-header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .rp-dialog-title {
  margin: 0;
  font-size: 18px;
}

.admin-layout .rp-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
}

.admin-layout .rp-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: rgba(0, 0, 0, 0.45);
}

/* The list (Ben 2026-11-02): no frame; every reminder ONE small line in fixed columns: the drag
   handle, done, the title, when, the Edit and Delete icons. Nothing wraps: a long title or time is cut
   with "…" (all of it on hover and in Edit). */
.admin-layout .rp-list {
  border: 0;
  background: transparent;
}

.admin-layout .rp-head,
.admin-layout .rp-row {
  display: grid;
  grid-template-columns: 28px 36px minmax(0, 1fr) minmax(0, 260px) 76px;
  align-items: center;
  gap: 0 8px;
  min-height: 44px;
  padding: 0 4px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .rp-head {
  min-height: 32px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-layout .rp-row {
  background: var(--color-surface);
}

.admin-layout .rp-row.is-dragging {
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0.95;
}

.admin-layout .rp-handle,
.admin-layout .rp-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.admin-layout .rp-handle {
  width: 28px;
  cursor: grab;
  touch-action: none;
}

.admin-layout .rp-row.is-dragging .rp-handle {
  cursor: grabbing;
}

/* (while a reminder is dragged: no text selection, the grabbing hand everywhere) */
body.rp-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.admin-layout .rp-handle svg,
.admin-layout .rp-icon svg {
  width: 16px;
  height: 16px;
}

.admin-layout .rp-handle:hover,
.admin-layout .rp-icon:hover {
  color: var(--color-text);
  background: var(--color-surface-alt, rgba(127, 127, 127, 0.1));
}

.admin-layout .rp-delete:hover {
  color: var(--color-danger-text);
}

.admin-layout .rp-handle:focus-visible,
.admin-layout .rp-icon:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: -2px;
}

.admin-layout .rp-empty {
  padding: 16px 4px;
}

.admin-layout .rp-dialog-facts {
  margin: 0 0 12px;
}

.admin-layout .rp-form-note:empty {
  display: none;
}

.admin-layout .rp-bar {
  margin-bottom: 12px;
}

.admin-layout .rp-check-hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
}

.admin-layout .rp-check {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.admin-layout .rp-check:disabled {
  cursor: default;
}

.admin-layout .rp-check:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 2px;
}

.admin-layout .rp-title,
.admin-layout .rp-when {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-layout .rp-title {
  font-weight: 600;
  color: var(--color-text);
}

.admin-layout .rp-row.is-done .rp-title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.admin-layout .rp-when {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .rp-when.rp-due {
  color: var(--color-danger-text);
  font-weight: 600;
}

.admin-layout .rp-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .admin-layout .rp-head,
  .admin-layout .rp-row {
    grid-template-columns: 28px 40px minmax(0, 1fr) minmax(0, 96px) 84px;
    gap: 0 4px;
    padding: 0;
  }

  /* (bigger touch targets; the row stays one line) */
  .admin-layout .rp-icon,
  .admin-layout .rp-check-hit {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .admin-layout .rp-handle {
    height: 40px;
  }

  .admin-layout .rp-dialog-header {
    padding: 12px 16px;
  }

  .admin-layout .rp-dialog-body {
    padding: 16px;
  }
}

/* ---------- Automation editor (Ben 2026-11-01, TASKS.md 7e) ---------- */
/* A step is edited in a centered dialog (the Triggers stay the panel on the right).
   [automation-picker-popup-and-new-draft] (Ben 2026-11-07: "this box should not be attached to the top"):
   ONE rule for every step popup and the side panel: they start below the admin's top bar (and the red
   bar when it shows), the dialog 24px under it and 24px above the bottom; its body scrolls inside, the
   header and the Save row stay in view. Full screen hides the top bar, so there only the 24px. */
.admin-layout .flow-editor {
  --flow-pop-top: calc(var(--admin-nav-height, 56px) + var(--alert-bar-h, 0px));
}

html.flow-fullscreen .admin-layout .flow-editor {
  --flow-pop-top: var(--alert-bar-h, 0px);
}

/* (phones: the side panel is a bottom sheet, its own rule above) */
@media (min-width: 701px) {
  .admin-layout .flow-editor .flow-panel:not(.is-step-dialog) {
    top: var(--flow-pop-top);
  }
}

.admin-layout .flow-editor .flow-panel.is-step-dialog {
  top: calc(var(--flow-pop-top) + 24px);
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--flow-pop-top) - 48px);
  /* (centered with auto margins, not a transform: a transform would move the pop-ups inside it,
     which place themselves on the screen) */
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.45);
}

.admin-layout .flow-editor .flow-panel.is-step-dialog[hidden] {
  display: none;
}

.admin-layout .flow-editor .flow-panel.is-step-dialog .flow-panel-header {
  flex: none;
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .flow-editor .flow-panel.is-step-dialog #flow-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 20px 0;
  overflow-y: auto;
}

/* (the footer with Duplicate, Cancel, Save stays in view at the bottom of the scrolling body) */
.admin-layout .flow-editor .flow-panel.is-step-dialog .flow-panel-actions {
  /* (wraps on a phone: Move to… was cut off on the left at 400px) */
  flex-wrap: wrap;
  bottom: 0;
  margin: 8px -20px 0;
  z-index: 1;
}

.admin-layout .flow-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: rgba(0, 0, 0, 0.45);
}

.admin-layout .flow-panel:not(.is-step-dialog) + .flow-dialog-backdrop,
.admin-layout .flow-panel[hidden] + .flow-dialog-backdrop {
  display: none;
}

html.flow-fullscreen #automation-editor-view .flow-panel.is-step-dialog {
  z-index: 75;
}

html.flow-fullscreen .admin-layout .flow-dialog-backdrop {
  z-index: 74;
}

/* "If a member is added again while still in this automation": a light blue box, smaller text */
.admin-layout .automation-readd-box {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--color-info-text) 22%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--color-info-text) 22%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--color-info-text) 9%, var(--color-surface));
  font-size: 13px;
}

.admin-layout .automation-readd-box .field-label,
.admin-layout .automation-readd-box legend {
  font-size: 13px;
}

.admin-layout .automation-readd-box .automation-setting-option {
  padding: 4px 0;
}

/* The step's timing: a box headed "When", the same tint family, lighter */
.admin-layout .timing-box {
  margin: 12px 0;
  padding: 12px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--color-info-text) 14%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--color-info-text) 4%, var(--color-surface));
}

.admin-layout .timing-box-heading {
  float: left;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
}

.admin-layout .timing-box-heading + * {
  clear: both;
}

/* Messages → Text queue (admin-text-queue.js): the count on top, one table */
.admin-layout .tq-summary {
  margin: 0 0 6px;
  font-weight: 600;
}

.admin-layout .tq-sub {
  display: block;
}

.admin-layout .tq-text {
  max-width: 420px;
  overflow-wrap: anywhere;
}

/* (Ben 2026-11-06: tidier, the Automations look: 13-14px, one line where possible, the words at most 2
   lines with "more"; a long link never stretches the row) */
.admin-layout .tq-table {
  font-size: 14px;
}

.admin-layout .tq-table td {
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: top;
}

.admin-layout .tq-words {
  display: -webkit-box;
  overflow: hidden;
  word-break: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: pre-line;
}

.admin-layout .tq-words.is-open {
  display: block;
  -webkit-line-clamp: unset;
}

.admin-layout .tq-more,
.admin-layout .tq-group-open {
  font-size: 12px;
}

.admin-layout .tq-sub {
  font-size: 12px;
}

.admin-layout .tq-open {
  color: var(--color-text-muted);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.admin-layout .tq-open:hover,
.admin-layout .tq-open:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

.admin-layout .tq-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.admin-layout .tq-filters .input-field {
  width: auto;
  margin: 0;
  font-size: 14px;
}

.admin-layout .tq-filters .tq-search {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-layout .tq-group-toggle {
  margin: 0;
  font-size: 13px;
}

.admin-layout .tq-showing {
  margin: 0;
}

/* Messages → Sent texts (admin-sms-history.js; [sms-history]) */
.admin-layout .sh-honest,
.admin-layout #sent-texts-showing {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 18px;
}

.admin-layout #sent-texts-showing {
  margin: 0;
}

/* The words get the room; the short columns stay short (on a computer: phones show cards) */
@media (min-width: 641px) {
  .admin-layout .sh-table td.tq-text {
    min-width: 240px;
    width: 28%;
  }

  .admin-layout .sh-table td[data-label="From"] {
    min-width: 200px;
  }

  .admin-layout .sh-table .sh-row td:not(.tq-text):not([data-label="Status"]):not([data-label="From"]) {
    white-space: nowrap;
  }
}

.admin-layout .sh-table .sh-status {
  white-space: normal;
  text-align: left;
}

.admin-layout .sh-table td[data-label="From"],
body.admin-layout .members-table.list-style.list-op.sh-table td[data-label="From"] {
  max-width: 220px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The filters ([sms-history-by-bulk], Ben 2026-11-07: "clean that page"): one white box, every control the
   same height, a small label above each, aligned at the bottom; Clear filters and the count at the end */
.admin-layout .sh-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--olist-line);
  border-radius: 6px;
  background: var(--olist-bg);
}

.admin-layout .sh-filter-body {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  min-width: 0;
}

.admin-layout .sh-filters .input-field {
  width: auto;
  min-width: 0;
  height: 36px;
  font-size: 13px;
}

.admin-layout .sh-filters .sh-search {
  flex: 1 1 260px;
  min-width: 220px;
}

.admin-layout .sh-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-layout .sh-field-label {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
}

.admin-layout .sh-second {
  display: contents;
}

.admin-layout .sh-filters .sh-pick {
  width: 340px;
  max-width: 100%;
}

.admin-layout .sh-dates {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-layout .sh-dates .input-field {
  width: 140px;
}

.admin-layout .sh-dash {
  color: var(--color-text-muted);
}

.admin-layout .sh-filters .sh-direction {
  flex: 0 0 auto;
  height: 36px;
}

.admin-layout .sh-direction .segmented-option {
  min-width: max-content;
}

.admin-layout .sh-group-toggle {
  height: 36px;
  align-items: center;
}

.admin-layout .sh-filter-end {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.admin-layout .sh-showing {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .sh-showing.is-filtered {
  padding: 4px 10px;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-text);
  font-weight: 600;
}

.admin-layout .sh-filters-btn {
  display: none;
}

/* One bulk or automation picked: its summary */
.admin-layout .sh-picked {
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--olist-line);
  border-radius: 6px;
  background: var(--olist-bg);
}

.admin-layout .sh-picked-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

@media (max-width: 640px) {
  .admin-layout .sh-filters-btn {
    display: inline-flex;
  }

  .admin-layout .sh-filters:not(.is-open) .sh-filter-body {
    display: none;
  }

  .admin-layout .sh-filter-body > *,
  .admin-layout .sh-field,
  .admin-layout .sh-filters .sh-pick,
  .admin-layout .sh-filters .sh-search {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .admin-layout .sh-dates .input-field {
    flex: 1 1 0;
    width: auto;
  }

  .admin-layout .sh-filter-end {
    justify-content: flex-start;
  }
}

.admin-layout .sh-row {
  cursor: pointer;
}

.admin-layout .sh-row.is-open td,
.admin-layout .sh-detail-row td {
  background: var(--olist-hover);
}

.admin-layout .sh-status.is-failed {
  color: var(--color-error, #b42318);
}

.admin-layout .sh-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 4px 0 8px;
  font-size: 13px;
}

.admin-layout .sh-facts dt {
  color: var(--color-text-muted);
}

.admin-layout .sh-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.admin-layout .sh-events {
  margin: 0;
  padding-left: 18px;
}

.admin-layout .sh-summary {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .admin-layout .sh-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Next texts for this member" (the Text queue, a member's Texts tab; [text-no-clash]) */
.admin-layout .tq-next-for {
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.admin-layout .tq-next-for-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-layout .tq-next-list {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
}

.admin-layout .tq-next-list li + li {
  margin-top: 6px;
}

.admin-layout .tq-next-list .tq-sub {
  display: block;
}

.admin-layout .mv-next-texts {
  margin: 0 0 12px;
}

.admin-layout .mv-next-texts > summary {
  cursor: pointer;
  font-weight: 600;
}

/* A filter on: a highlighted line (the warning notice's colours) with "Clear filters" */
.admin-layout .tq-filtered {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--color-text);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-weight: 600;
}

.admin-layout .tq-member-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

/* 🔗 Quick links (admin-quick-links.js): the icon in the bar, and its small popup under it */
.admin-layout .admin-quick-links {
  position: relative;
  margin-right: 10px;
}

.admin-layout .admin-quick-links-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
  font-size: 16px;
  cursor: pointer;
}

.admin-layout .admin-quick-links-btn:hover,
.admin-layout .admin-quick-links-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.24);
}

.admin-layout .admin-quick-links-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.admin-layout .ql-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* (Ben 2026-11-06: "make this font smaller and nicer": narrower, the admin's own sizes) */
  width: min(316px, calc(100vw - 24px));
  max-height: 70vh;
  padding: 12px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.admin-layout .ql-pop[hidden] {
  display: none;
}

/* (phones: across the screen under the bar, never off its edge) */
@media (max-width: 600px) {
  .admin-layout .ql-pop {
    position: fixed;
    top: 52px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

.admin-layout .ql-head,
.admin-layout .ql-form-title {
  margin: 0;
  font-weight: 600;
}

.admin-layout .ql-head {
  font-size: 15px;
}

.admin-layout .ql-form-title {
  font-size: 13px;
}

.admin-layout .ql-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* (a row: about 36px, one line, a thin divider) */
.admin-layout .ql-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 2px 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .ql-row.is-editing {
  padding: 8px 0;
}

/* (the title: one line, "…" when long, the whole title on hover; underlined only on hover / focus) */
.admin-layout .ql-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: 14px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-layout .ql-title:hover,
.admin-layout .ql-title:focus-visible {
  text-decoration: underline;
}

.admin-layout .ql-title:focus-visible,
.admin-layout .ql-copy:focus-visible,
.admin-layout .ql-tool:focus-visible {
  outline: 2px solid var(--btn-focus, var(--color-primary));
  outline-offset: 1px;
}

/* (the copy button: the site's copy icon, small and quiet) */
.admin-layout .ql-copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
}

.admin-layout .ql-copy:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.admin-layout .ql-copy.is-copied {
  color: var(--color-text);
  font-size: 12px;
  font-weight: 600;
}

.admin-layout .ql-tools {
  display: inline-flex;
  flex: none;
  gap: 0;
}

.admin-layout .ql-tool {
  padding: 2px 5px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.admin-layout .ql-tool:hover:not(:disabled),
.admin-layout .ql-tool:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

.admin-layout .ql-delete:hover:not(:disabled) {
  color: var(--color-danger-text);
}

.admin-layout .ql-tool:disabled {
  opacity: 0.35;
  cursor: default;
}

.admin-layout .ql-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.admin-layout .ql-form .input-field {
  height: 32px;
  margin: 0;
  padding: 4px 8px;
  font-size: 13px;
}

.admin-layout .ql-form-actions {
  display: flex;
  gap: 6px;
}

.admin-layout .ql-problem:empty {
  display: none;
}

.admin-layout .ql-pop .form-message,
.admin-layout .ql-pop .field-hint {
  margin: 0;
  font-size: 12px;
}

/* The page (Ben 2026-11-02): three plain lists, no frame, no table, no coloured rows; big headings
   with a count, one readable line per item, the date small on the right in Built */
.admin-layout #changelog-root {
  max-width: none;
}

.admin-layout .clg-updated {
  margin: 0 0 8px;
}

.admin-layout .clg-section {
  margin: 32px 0 0;
}

.admin-layout .clg-heading {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
}

.admin-layout .clg-count {
  color: var(--color-text-muted);
  font-weight: 400;
}

.admin-layout .clg-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .clg-queue {
  counter-reset: clg;
}

.admin-layout .clg-row {
  display: flex;
  align-items: baseline;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-layout .clg-queue .clg-row::before {
  counter-increment: clg;
  content: counter(clg) ".";
  flex: none;
  min-width: 1.6em;
  color: var(--color-text-muted);
}

.admin-layout .clg-text {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .clg-now {
  flex: none;
  border-radius: 0;
}

/* A queue item (QUEUE.md) with its status, Ben's words and its report (admin-changelog.js itemRow) */
.admin-layout .clg-item-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .clg-item-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .clg-status {
  border-radius: 0;
  font-weight: 600;
}

.admin-layout .clg-status.is-now { background: var(--color-primary); color: var(--color-surface); }
.admin-layout .clg-status.is-live { background: var(--color-success-text, #1a7f37); color: var(--color-surface); }
.admin-layout .clg-status.is-db { background: var(--color-warning-text); color: var(--color-surface); }
.admin-layout .clg-status.is-blocked { background: var(--color-danger); color: #fff; }

.admin-layout .clg-words {
  flex: 1 0 100%;
  margin: 0;
  font-size: 13px;
}

.admin-layout .clg-details {
  flex: 1 0 100%;
  font-size: 13px;
}

.admin-layout .clg-details summary {
  cursor: pointer;
  color: var(--color-text-muted);
}

.admin-layout .clg-part-label {
  margin: 8px 0 2px;
  font-weight: 600;
}

.admin-layout .clg-part-text {
  margin: 0;
  white-space: pre-line;
}

.admin-layout .clg-part ul {
  margin: 0;
  padding-left: 18px;
}

.admin-layout .clg-date {
  flex: none;
  color: var(--color-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.admin-layout .clg-month-title {
  margin: 20px 0 4px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-layout .clg-search {
  width: 100%;
  max-width: 420px;
  border-radius: 0;
}

.admin-layout .clg-empty {
  margin: 0;
  color: var(--color-text-muted);
}


/* ---------- Automations list: no frame (Ben 2026-11-01, TASKS.md 7j: "remove this border from around
   the box"). This list only (.automations-wrap / .automations-table): the shared frame on every other
   list stays. No border, ring or rounding; the rows sit on the page; the lines between rows and the
   header row as before. No height limit either: table-wrap-short (320px, scrolling inside) cut the
   last row off at the box's edge. ---------- */
.admin-layout .table-wrap.automations-wrap {
  max-height: none;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}

.admin-layout .members-table.automations-table {
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* ---------- Ontraport products: off, the product page (Ben 2026-11-01, TASKS.md 7q) ---------- */
/* "Product off" on a sale, "Has sales but is off" on a product: the warning badge's colours */
.admin-layout .opp-off-tag,
.admin-layout .opp-warn-text {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 0;
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-text);
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}

.admin-layout .opp-enabled .opp-warn-text {
  display: block;
  width: max-content;
  margin: 4px 0 0;
}

.admin-layout .opp-off-line,
.admin-layout .opp-sale-enable {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 8px 12px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 0;
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-text);
}

.admin-layout .opp-open-product {
  text-align: left;
  font-weight: 600;
}

.admin-layout .opp-th-sort {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.admin-layout .trigger-product-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-layout .trigger-product-enable {
  flex: none;
  font-size: 12px;
}

/* The product page: a panel on the right, the whole width on a phone */
.admin-layout .opp-page-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.45);
}

.admin-layout .opp-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  display: flex;
  flex-direction: column;
  width: min(720px, 100vw);
  border-left: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: -16px 0 48px -16px rgba(0, 0, 0, 0.45);
}

.admin-layout .opp-page-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .opp-page-title {
  margin: 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.admin-layout .opp-page-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px 24px;
  overflow-y: auto;
}

.admin-layout .opp-page-sub {
  margin: 20px 0 8px;
  font-size: 15px;
}

.admin-layout .opp-page-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}

.admin-layout .opp-page-facts dt,
.admin-layout .opp-total dt {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .opp-page-facts dd {
  margin: 0;
}

.admin-layout .opp-page-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-layout .opp-page-totals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-layout .opp-total {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 0;
}

.admin-layout .opp-total dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 600;
}

.admin-layout .opp-hist {
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}

.admin-layout .opp-hist-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .opp-hist-when {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .opp-hist-what > span,
.admin-layout .opp-hist-member {
  display: block;
  overflow-wrap: anywhere;
}

.admin-layout .opp-hist-title {
  font-weight: 600;
}

.admin-layout .opp-hist-meta,
.admin-layout .opp-hist-member.is-none,
.admin-layout .opp-hist-member.is-gone {
  color: var(--color-text-muted);
  font-size: 13px;
}

.admin-layout .opp-hist-row.is-not-counted .opp-hist-title {
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .admin-layout .opp-page-head {
    padding: 12px 16px;
  }

  .admin-layout .opp-page-body {
    padding: 12px 16px 20px;
  }

  .admin-layout .opp-hist-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .admin-layout .trigger-product-enable {
    min-height: 44px;
  }
}

/* ---------- Sending a course, module or lesson: the email, the text, the preview (TASKS.md 7t) ---------- */
.admin-layout .item-send {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}

.admin-layout .item-send .field-label {
  margin-top: 6px;
}

.admin-layout .item-send-message,
.admin-layout .item-send-text {
  width: 100%;
  min-height: 0;
  resize: vertical;
  border-radius: 0;
  font: inherit;
}

.admin-layout .item-send-text-on {
  margin-top: 8px;
}

.admin-layout .item-send-textbox {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 0;
}

/* (unticked "Also send a text message": its fields really go) */
.admin-layout .item-send-textbox[hidden] {
  display: none;
}

.admin-layout .item-send-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .item-send-save-row .input-field {
  flex: 1 1 180px;
  min-width: 0;
}

.admin-layout .item-send-preview {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.admin-layout .item-send-preview-head {
  margin: 0 0 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-layout .item-send-preview-subject {
  margin: 0 0 6px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .item-send-preview-body {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.admin-layout .item-send-counts {
  margin: 6px 0 0;
  font-weight: 600;
}

.admin-layout .item-send-details {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ---------- An automation's length: in the list (a line under the name) and above the canvas (TASKS.md 7r) ---------- */
.admin-layout .automation-sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.admin-layout .automation-sort-bar .field-label {
  margin: 0;
}

.admin-layout .automation-sort-bar .input-field {
  width: auto;
  min-width: 200px;
  border-radius: 0;
}

/* The length as an "i" beside the automation's name (list) and title (canvas) */
.admin-layout .auto-length-tip,
.admin-layout .flow-length {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}

.admin-layout .flow-length[hidden] {
  display: none;
}

.admin-layout .flow-editor .flow-editor-header .flow-length {
  align-self: center;
  margin-left: -8px;
}

@media (max-width: 600px) {
  .admin-layout .automation-sort-bar .input-field {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ---------- Messages that can go out at night (9 pm to 9 am, member's time; TASKS.md 7s): the bar above
   the canvas, the cards' and the list's "Night" marks, the step dialog's note. The "Off" badges' amber
   (.badge-warn); square corners ---------- */
.admin-layout .automation-sort-bar {
  flex-wrap: wrap;
}

.admin-layout .automation-night-filter {
  margin: 0 0 0 8px;
}

/* The Night check (Ben 2026-11-02): one slim bar (amber while any item is not resolved, green when
   all are), the checklist under it when shown; square corners, the admin's own type and spacing */
.admin-layout .flow-night {
  margin: 0 0 8px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-left-width: 3px;
  border-radius: 0;
  background: var(--color-surface);
}

.admin-layout .flow-night.is-ok {
  border-color: rgba(34, 197, 94, 0.45);
}

.admin-layout .flow-night-bar {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  min-height: 36px;
  padding: 4px 8px 4px 12px;
}

.admin-layout .flow-night-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-warning-text);
}

.admin-layout .flow-night.is-ok .flow-night-title {
  color: var(--color-success-text);
}

.admin-layout .flow-night-toggle {
  flex-shrink: 0;
  border-radius: 0;
}

.admin-layout .flow-night-body {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--color-border);
}

.admin-layout .flow-night-body[hidden],
.admin-layout .flow-night-undo[hidden],
.admin-layout .flow-night-sql[hidden],
.admin-layout .flow-night-toggle[hidden] {
  display: none;
}

.admin-layout .flow-night-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-layout .flow-night-filters,
.admin-layout .flow-night-all {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .flow-night-filter.is-active {
  border-color: var(--color-text);
  color: var(--color-text);
  font-weight: 600;
}

.admin-layout .flow-night .btn {
  border-radius: 0;
}

.admin-layout .flow-night-undo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
}

.admin-layout .flow-night-sql {
  margin: 0 0 8px;
  color: var(--color-warning-text);
}

.admin-layout .flow-night-table {
  width: 100%;
  font-size: 13px;
}

.admin-layout .flow-night-table td {
  vertical-align: middle;
}

.admin-layout .flow-night-tick-col {
  width: 72px;
  text-align: center;
}

.admin-layout .flow-night-chip {
  padding: 2px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.admin-layout .flow-night-chip:hover {
  border-color: var(--color-text);
}

.admin-layout .flow-night-chip:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 1px;
}

.admin-layout .flow-night-type,
.admin-layout .flow-night-why {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-layout .flow-night-type svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.admin-layout .flow-night-status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.admin-layout .flow-night-status {
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.admin-layout .flow-night-status.is-open {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning-text);
}

.admin-layout .flow-night-status.is-resolved,
.admin-layout .flow-night-status.is-fixed {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success-text);
}

.admin-layout .flow-night-status.is-allowed {
  border-color: rgba(100, 116, 139, 0.45);
  background: rgba(100, 116, 139, 0.12);
  color: var(--color-info-text);
}

.admin-layout .flow-night-changed,
.admin-layout .flow-night-why-note {
  margin: 0;
  font-size: 12px;
}

.admin-layout .flow-night-actions {
  justify-content: flex-end;
}

.admin-layout .flow-night-why-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.admin-layout .flow-night-why-input {
  flex: 1 1 220px;
  min-width: 0;
  border-radius: 0;
}

.admin-layout .flow-night-window .field-label {
  margin: 0;
}

.admin-layout .flow-any-time {
  border: 1px solid rgba(100, 116, 139, 0.45);
  background: rgba(100, 116, 139, 0.12);
  color: var(--color-info-text);
}

.admin-layout .flow-night-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Phone width: each row as a small card, its labels from data-label */
@media (max-width: 700px) {
  .admin-layout .flow-night-table thead {
    display: none;
  }

  .admin-layout .flow-night-table,
  .admin-layout .flow-night-table tbody,
  .admin-layout .flow-night-table tr,
  .admin-layout .flow-night-table td {
    display: block;
    width: 100%;
  }

  .admin-layout .flow-night-table tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .admin-layout .flow-night-table td {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    border: 0;
    text-align: left;
  }

  .admin-layout .flow-night-table td::before {
    content: attr(data-label);
    flex: 0 0 76px;
    color: var(--color-text-muted);
    font-size: 12px;
  }

  .admin-layout .flow-night-tick-col {
    width: 100%;
  }

  .admin-layout .flow-night-actions {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .admin-layout .flow-night-why-row td::before {
    content: none;
  }
}

.admin-layout .flow-night-mark,
.admin-layout .auto-night-badge,
.admin-layout .night-step-mark {
  border-radius: 0;
}

.admin-layout .auto-night-badge {
  margin-left: 6px;
  vertical-align: middle;
}

.admin-layout .night-step-note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 8px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.12);
}

.admin-layout .night-step-note[hidden],
.admin-layout .flow-night[hidden],
.admin-layout .flow-night-note[hidden] {
  display: none;
}

.admin-layout .night-step-lines {
  flex: 1 1 200px;
  min-width: 0;
}

.admin-layout .night-step-lines p {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-layout .night-step-held {
  margin: 6px 0 0;
}

.admin-layout .night-step-held:empty {
  display: none;
}


/* ---------- Contacts with more than one phone number, and Merge (TASKS.md 7p; admin.js smsNumbers,
   openContactNumbers, openContactMerge; supabase/contact-phones.sql). Square corners, the existing
   colours; every row wraps at 400px. ---------- */
.admin-layout .sms-contact-phone2,
.admin-layout .phone2-number {
  font-size: 12px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.admin-layout .phone2-number {
  font-size: inherit;
  color: inherit;
}

.admin-layout .phone2-more {
  margin-left: 6px;
  border-radius: 0;
  vertical-align: middle;
}

/* The member page's "Phone numbers": their numbers, then Edit numbers and Merge another contact… */
.admin-layout .mv-phone-numbers-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-layout .mv-phone-list {
  overflow-wrap: anywhere;
}

.admin-layout .mv-phone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout .contact-merge-badge {
  margin-left: 6px;
  border-radius: 0;
  font-weight: 400;
}

.admin-layout .sms-to-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 6px;
}

.admin-layout .sms-to-row[hidden] {
  display: none;
}

.admin-layout .sms-to-row .field-label {
  margin: 0;
}

.admin-layout .sms-to-row select {
  flex: 0 1 380px;
  min-width: 0;
  max-width: 100%;
  border-radius: 0;
}

.admin-layout .sms-bubble-number {
  margin: 0 0 2px;
  font-size: 11px;
  opacity: 0.8;
  overflow-wrap: anywhere;
}

.admin-layout .sms-person-number-actions,
.admin-layout .contact-numbers-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.admin-layout .sms-person-note {
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.admin-layout .contact-numbers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.admin-layout .contact-number {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px;
  border: 1px solid var(--color-border);
}

.admin-layout .contact-number.is-main {
  border-color: var(--color-border-strong);
}

.admin-layout .contact-number-phone {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .contact-number .badge {
  border-radius: 0;
}

.admin-layout .contact-number-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  flex-basis: 100%;
}

.admin-layout .contact-number .cn-edit-input {
  flex: 1 1 180px;
  min-width: 0;
  border-radius: 0;
}

.admin-layout .contact-numbers-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout .contact-numbers-add-row .input-field {
  flex: 1 1 180px;
  min-width: 0;
  border-radius: 0;
}

.admin-layout .contact-numbers-add[hidden],
.admin-layout .contact-numbers-foot [hidden] {
  display: none;
}

.admin-layout .contact-merge input[type="search"] {
  width: 100%;
  border-radius: 0;
}

.admin-layout .contact-merge-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.admin-layout .contact-merge-hit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-layout .contact-merge-hit:hover {
  border-color: var(--color-border-strong);
}

.admin-layout .contact-merge-hit:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 1px;
}

.admin-layout .contact-merge-hit-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .contact-merge-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .admin-layout .contact-merge-sides {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-layout .contact-merge-side {
  padding: 8px;
  border: 1px solid var(--color-border);
  min-width: 0;
}

.admin-layout .contact-merge-side h4 {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}

.admin-layout .contact-merge-lines {
  margin: 10px 0;
  padding-left: 18px;
  font-size: 13px;
}

.admin-layout .contact-merge-lines li {
  overflow-wrap: anywhere;
}

.admin-layout .contact-merge-choice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid var(--color-border);
  min-width: 0;
}

.admin-layout .contact-merge-main {
  display: flex;
  align-items: flex-start;
  gap: 4px 8px;
  overflow-wrap: anywhere;
}

.admin-layout .contact-merge-main input {
  flex: none;
  margin-top: 3px;
}

.admin-layout .contact-merge-main span:not(.badge) {
  flex: 1 1 0;
  min-width: 0;
}

.admin-layout .contact-merge-main .badge {
  border-radius: 0;
}

/* ---------- One text later, in the member's own time zone (Ben 2026-11-02; admin.js smsWhen,
   scheduledBubble). The course-link box's "When" look; a scheduled text is a grey bubble. ---------- */
.admin-layout .sms-when {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}

.admin-layout .sms-when-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.admin-layout .sms-when-later {
  flex-direction: column;
  align-items: stretch;
}

.admin-layout .sms-when-fields,
.admin-layout .sms-when-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-layout .sms-when-fields .input-field {
  border-radius: 0;
}

/* The one quick choice, "Send next time it is 8 AM for them": the quiet button, outlined while the date
   and time hold it; its short words on a phone */
.admin-layout .sms-when-shortcut.is-chosen {
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.admin-layout .sms-when-shortcut-short {
  display: none;
}

@media (max-width: 600px) {
  .admin-layout .sms-when-shortcut-long {
    display: none;
  }

  .admin-layout .sms-when-shortcut-short {
    display: inline;
  }
}

.admin-layout .sms-when-words {
  font-weight: 400;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-layout .sms-when-night {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-layout .sms-when-night[hidden] {
  display: none;
}

.admin-layout .sms-when-night .badge {
  border-radius: 0;
}

/* (Ben 2026-11-02) Night for them, and a time zone not known: in amber */
.admin-layout .sms-when-night,
.admin-layout .sms-when-unknown-text {
  color: var(--color-warning-text);
}

.admin-layout .sms-when-now {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.admin-layout .sms-when-unknown {
  margin: 0 0 8px;
}

.admin-layout .sms-when-unknown[hidden] {
  display: none;
}

.admin-layout .sms-when-unknown-text {
  margin: 0 0 6px;
  font-size: 13px;
}

.admin-layout .sms-when-zone-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.admin-layout .sms-when-zone-row .tz-select {
  width: auto;
  max-width: 100%;
}

.admin-layout .sms-bubble.is-scheduled,
html:not(.phone-app) .admin-layout #panel-messages .sms-bubble.is-scheduled {
  background: color-mix(in srgb, var(--color-text) 7%, var(--color-surface));
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text);
}

.admin-layout .sms-bubble.is-scheduled.is-failed,
html:not(.phone-app) .admin-layout #panel-messages .sms-bubble.is-scheduled.is-failed {
  border-color: var(--color-danger);
}

.admin-layout .sms-bubble.is-scheduled.is-cancelled .sms-bubble-body {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.admin-layout .sms-scheduled-when {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.admin-layout .sms-bubble.is-failed .sms-scheduled-when {
  color: var(--color-danger-text);
}

.admin-layout .sms-scheduled-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 6px 0 0;
  font-size: 13px;
}

.admin-layout .sms-scheduled-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
}

.admin-layout .sms-scheduled-body {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-layout .sms-consent-switch {
  overflow-wrap: anywhere;
}

/* "Email sent. Text NOT sent: …" at the top of the course-link results (Ben 2026-11-02) */
.admin-layout .course-link-headline {
  margin: 8px 0;
  overflow-wrap: anywhere;
}

.admin-layout .course-link-headline.is-error {
  color: var(--color-danger-text);
}

/* Notifications (admin-notify-texts.js; Ben 2026-11-05: "MY GOD. clean this page"): the bell and Telegram
   only. A Telegram card on top, ONE table of every notification in the Members list look (groups as thin
   headings, a switch and one small dropdown per row, Last fired muted), "Test and history" closed */
.admin-layout #notify-texts-root {
  max-width: 1080px;
}

.admin-layout .nt-intro {
  margin: 0 0 16px;
}

.admin-layout .nt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.admin-layout .nt-actions .btn {
  width: auto;
}

/* The strip of cards (one: Telegram) */
.admin-layout .nt-cards {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  gap: 12px;
  margin: 0 0 20px;
}

.admin-layout .nt-card {
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

/* "Every automation step (Telegram)" ([telegram-every-automation-step]): the switch, then its filters */
.admin-layout .nt-steps-card .nt-sa-filters {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
}

.admin-layout .nt-steps-card .nt-sa-filters[disabled] {
  opacity: 0.55;
}

.admin-layout .nt-steps-card .nt-sa-which {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 4px 0;
}

.admin-layout .nt-steps-card .nt-sa-list {
  max-height: 200px;
  margin: 4px 0 8px;
  overflow-y: auto;
}

.admin-layout .nt-steps-card .nt-sa-tick {
  display: flex;
  margin: 4px 0;
}

.admin-layout .nt-steps-card .nt-save-status {
  margin-left: auto;
}

.admin-layout .nt-steps-card .field-hint {
  margin: 6px 0;
  font-size: 13px;
  line-height: 18px;
}

.admin-layout .nt-card-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-layout .nt-card-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 14px;
}

.admin-layout .nt-card-state {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-layout .nt-card-row .btn {
  width: auto;
  margin-left: auto;
}

.admin-layout .nt-card-link {
  flex: none;
  margin-left: auto;
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .nt-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  opacity: 0.5;
}

.admin-layout .nt-dot.is-on {
  background: var(--color-success, #2e7d32);
  opacity: 1;
}

.admin-layout .nt-card .form-message:empty {
  display: none;
}

.admin-layout .nt-tg-code {
  margin: 6px 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* The table's own heading line: "All notifications" and "Saved" */
.admin-layout .nt-table-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.admin-layout .nt-table-title {
  margin: 0;
  font-size: 16px;
}

.admin-layout .nt-save-status {
  font-size: 13px;
  color: var(--color-text-muted);
}

.admin-layout .nt-save-status.is-saved::before {
  content: "✓ ";
  color: var(--color-success, #2e7d32);
}

.admin-layout .nt-save-status.is-unsaved {
  color: var(--color-warning-text);
}

.admin-layout .nt-save-status.is-error {
  color: var(--color-danger-text);
}

.admin-layout .nt-table-hint {
  margin: 2px 0 10px;
}

/* More → Course nudges (admin-course-nudges.js): the summary, the switches and numbers, the message table
   (a row opens its editor under it), the preview and one member; the shared list look throughout */
.admin-layout .cn-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-layout .cn-page > .form-message:empty {
  display: none;
}

.admin-layout .cn-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.admin-layout .cn-card .admin-subtitle {
  margin: 0;
}

.admin-layout .cn-card-head,
.admin-layout .cn-inline,
.admin-layout .cn-editor-foot,
.admin-layout .cn-order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .cn-card-head,
.admin-layout .cn-editor-foot {
  justify-content: space-between;
}

.admin-layout .cn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
}

.admin-layout .cn-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-layout .cn-field .input-field,
.admin-layout .cn-inline .input-field {
  margin: 0;
}

.admin-layout .cn-switch .field-hint {
  margin: 2px 0 0 28px;
}

.admin-layout .cn-summary {
  font-size: 14px;
}

.admin-layout .cn-grip {
  color: var(--color-text-muted);
  cursor: grab;
  letter-spacing: -2px;
}

.admin-layout .cn-rule.is-dragging {
  opacity: 0.5;
}

.admin-layout .cn-draft {
  margin-left: 8px;
}

.admin-layout .cn-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}

.admin-layout .cn-sub {
  display: block;
}

.admin-layout .cn-msg {
  max-width: 360px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* (Pause all: the banner; Undo after a change; the ticked-members bar; Add members) */
.admin-layout .cn-pause,
.admin-layout .cn-undo,
.admin-layout .cn-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.admin-layout .cn-pause.is-paused {
  padding: 10px 14px;
  border: 1px solid rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-text);
}

.admin-layout .cn-undo,
.admin-layout .cn-bulk {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.admin-layout .cn-bulk-count {
  font-weight: 600;
}

.admin-layout .cn-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
}

.admin-layout .cn-pick-list {
  max-height: 320px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.admin-layout .cn-pick-list li {
  padding: 4px 0;
}

.admin-layout .cn-person.is-paused .cn-status,
.admin-layout .cn-person.is-removed .cn-status,
.admin-layout .cn-person.is-done .cn-status {
  color: var(--color-text-muted);
}

.cn-ask {
  width: min(420px, 92vw);
}

.cn-ask-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-layout .cn-found {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

/* More → Ontraport triggers (admin-ontraport-triggers.js): the list in the shared list look; a rule's setup
   row (the address and 4 steps); the New / Edit dialog with its live Ontraport list and the THEN choices */
.admin-layout .ot-intro {
  margin: 0 0 var(--toolbar-gap, 12px);
}

.admin-layout .ot-actions {
  white-space: nowrap;
}

.admin-layout .ot-actions .link-button {
  margin-right: 12px;
}

.admin-layout .ot-paused {
  display: block;
  max-width: 260px;
  white-space: normal;
}

.admin-layout .ot-setup-row td {
  padding: 12px 16px 16px;
  background: var(--color-surface-alt);
}

.admin-layout .ot-url-line {
  display: flex;
  gap: 8px;
  max-width: 720px;
}

.admin-layout .ot-steps {
  margin: 10px 0 6px;
  padding-left: 20px;
  font-size: 13px;
}

/* The list (Ben 2026-11-05: "the right columns ... 1 button that opens pops the records"): When | Then | On |
   Ran | Failed | Last fired | Records | …; long names cut with …, the whole in the tooltip */
.admin-layout .ot-table {
  table-layout: fixed;
  width: 100%;
}

.admin-layout .ot-table .ot-col-0 { width: 22%; }
.admin-layout .ot-table .ot-col-1 { width: 24%; }
.admin-layout .ot-table .ot-col-2 { width: 60px; }
.admin-layout .ot-table .ot-col-3 { width: 120px; }
.admin-layout .ot-table .ot-col-4 { width: 70px; }
.admin-layout .ot-table .ot-col-5 { width: 140px; }
.admin-layout .ot-table .ot-col-6 { width: 124px; }
.admin-layout .ot-table .ot-col-7 { width: 112px; }

.admin-layout .ot-table .ot-when-cell,
.admin-layout .ot-table .ot-then {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-layout .ot-table .ot-when {
  font-weight: 600;
}

.admin-layout .ot-table .ot-then,
.admin-layout .ot-table .ot-last,
.admin-layout .ot-table .ot-week {
  color: var(--color-text-muted);
}

.admin-layout .ot-table .ot-last,
.admin-layout .ot-table .ot-ran {
  white-space: nowrap;
}

.admin-layout .ot-table .ot-week {
  font-size: 12px;
}

.admin-layout .ot-table .ot-failed.is-some {
  font-weight: 600;
  color: var(--color-danger-text);
}

.admin-layout .ot-table .ot-records {
  width: auto;
}

.admin-layout .ot-total {
  margin: -6px 0 12px;
}

/* Records (the pop-up of every run) */
.ot-dialog.ot-records-dialog {
  width: min(960px, 96vw);
  max-width: 96vw;
}

.ot-records-dialog .ot-rec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 6px;
}

.ot-records-dialog .ot-rec-chip {
  padding: 4px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}

.ot-records-dialog .ot-rec-chip.is-on {
  border-color: var(--btn-text);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600;
}

.ot-records-dialog .ot-rec-left-hint {
  margin: 0 0 8px;
}

.ot-records-dialog .ot-rec-body {
  max-height: min(60vh, 520px);
  overflow: auto;
}

.ot-records-dialog .ot-rec-table {
  width: 100%;
  table-layout: fixed;
}

.ot-records-dialog .ot-rec-detail,
.ot-records-dialog .ot-rec-person {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-records-dialog .ot-rec-result {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--box-bg-hover);
  font-size: 12px;
  font-weight: 600;
}

.ot-records-dialog .ot-rec-result.is-fired {
  background: var(--color-success-bg, rgba(46, 125, 50, 0.14));
}

.ot-records-dialog .ot-rec-result.is-failed {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

.ot-records-dialog #ot-rec-more {
  width: auto;
  margin-top: 10px;
}

.ot-records-dialog .ot-rec-foot {
  margin-top: 12px;
}

/* New / Edit trigger (Ben 2026-11-04: "please style it on a wider pop up. its very ugly and confusing"): about
   880px wide (96% on a phone), never taller than the screen; a fixed header and footer, only the middle
   scrolls; two numbered cards like Page settings */
.ot-dialog {
  width: min(560px, calc(100vw - 32px));
}

.ot-dialog.ot-form {
  width: min(880px, 96vw);
  /* (the browser's own dialog limit, 100% - 38px, would make it narrower than 96% on a phone) */
  max-width: 96vw;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}

.ot-dialog.ot-form[open] {
  display: flex;
  flex-direction: column;
}

.ot-form .ot-form-head {
  flex: none;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--color-border);
}

.ot-form .ot-form-head .field-hint {
  margin: 2px 0 0;
}

.ot-form .ot-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 24px;
  background: var(--box-bg);
}

.ot-form .ot-form-foot {
  flex: none;
  padding: 12px 24px 16px;
  border-top: 1px solid var(--color-border);
}

.ot-form .ot-form-foot .pw-actions {
  margin-top: 12px;
}

.ot-form .ot-summary {
  margin: 0;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--color-text);
}

.ot-form .ot-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ot-form .ot-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.ot-form .ot-step-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--box-bg-hover);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.ot-form .ot-step-help {
  margin: -6px 0 0 34px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.ot-form .ot-kind-switch {
  max-width: 440px;
}

/* Step 1: one combobox; its list drops down under the box, never taller than 260px */
.ot-form .ot-combo {
  position: relative;
  max-width: 560px;
}

.ot-form .ot-combo-input {
  width: 100%;
}

.ot-form .ot-combo-list {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ot-form .ot-combo-list[hidden] {
  display: none;
}

.ot-form .ot-option {
  overflow: hidden;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.ot-form .ot-option:hover,
.ot-form .ot-option.is-active {
  background: var(--box-bg-hover);
}

.ot-form .ot-option[aria-selected="true"] {
  font-weight: 600;
}

.ot-form .ot-combo-note {
  margin: 0;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.ot-form .ot-chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--box-bg);
}

.ot-form .ot-chosen[hidden] {
  display: none;
}

.ot-form .ot-chosen-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ot-form .ot-chosen-change {
  flex: none;
  font-size: 13px;
}

/* Step 2: four quiet rows with a count; each opens a small list in two columns with its own scroll */
.ot-form .ot-secs {
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.ot-form .ot-sec + .ot-sec {
  border-top: 1px solid var(--color-border);
}

.ot-form .ot-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}

.ot-form .ot-sec-head:hover {
  background: var(--box-bg);
}

.ot-form .ot-sec-head:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-brand);
}

.ot-form .ot-sec-arrow {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.ot-form .ot-sec-head[aria-expanded="true"] .ot-sec-arrow {
  transform: rotate(45deg);
}

.ot-form .ot-sec-label {
  flex: 1 1 auto;
}

.ot-form .ot-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--box-bg-hover);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-muted);
}

.ot-form .ot-count.is-some {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.ot-form .ot-sec-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 12px 32px;
}

.ot-form .ot-sec-body[hidden] {
  display: none;
}

.ot-form .ot-sec-filter {
  max-width: 280px;
}

.ot-form .ot-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  max-height: 200px;
  overflow-y: auto;
}

.ot-form .ot-check-grid .checkbox-field {
  min-width: 0;
  margin: 0;
  padding: 5px 0;
  font-size: 13.5px;
}

.ot-form .ot-check-grid .checkbox-field[hidden] {
  display: none;
}

.ot-form .ot-check-grid .checkbox-field span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ot-form .ot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ot-form .ot-chips:empty {
  display: none;
}

.ot-form .ot-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 260px;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: var(--box-bg-hover);
  font-size: 12.5px;
}

.ot-form .ot-chip-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ot-form .ot-chip-x {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.ot-form .ot-chip-x:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.ot-form .ot-sec-tell {
  padding: 11px 14px;
}

.ot-form .ot-sec-tell .checkbox-field {
  margin: 0;
  font-size: 14px;
}

.ot-form .ot-sec-tell .ot-sec-label {
  flex: none;
}

.ot-form .ot-sec-note {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.ot-form .ot-just-record {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.ot-form .ot-just-record[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .admin-layout .ot-actions {
    white-space: normal;
  }

  /* (a phone: each trigger a small card with the same fields; the fixed column widths do not apply) */
  .admin-layout .ot-table {
    table-layout: auto;
  }

  .admin-layout .ot-table .ot-when-cell,
  .admin-layout .ot-table .ot-then {
    white-space: normal;
  }

  .ot-form .ot-form-head,
  .ot-form .ot-form-foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ot-form .ot-form-body {
    padding: 12px;
  }

  .ot-form .ot-step {
    padding: 14px;
  }

  .ot-form .ot-step-help {
    margin-left: 0;
  }

  .ot-form .ot-kind-switch .segmented-text {
    height: 100%;
    padding: 8px 6px;
    font-size: 13px;
    white-space: normal;
  }

  .ot-form .ot-check-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ot-form .ot-sec-tell .checkbox-field {
    flex-wrap: wrap;
  }
}

/* Notifications → the table (admin-notify-texts.js drawTable): one row per notification, 38px rows, the
   column heads stay on screen while it scrolls; on a phone each row is a small card, Bell and Telegram on
   one line */
.admin-layout .nt-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.admin-layout .nt-table {
  width: 100%;
  table-layout: fixed;
}

.admin-layout .nt-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
}

.admin-layout .nt-table .nt-col-ch {
  width: 172px;
}

.admin-layout .nt-table .nt-col-ch:nth-child(2) {
  width: 72px;
}

.admin-layout .nt-table .nt-col-last {
  width: 210px;
}

.admin-layout .nt-table td,
body.admin-layout .members-table.list-style.list-op.nt-table td {
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
}

/* (Ben 2026-11-05: "make the headers have different bg color for example light blue": the quiet buttons'
   light blue across the row, their dark blue text, a little more room; dark mode: their calm dark blue) */
.admin-layout .nt-table .nt-group-row th,
body.admin-layout .members-table.list-style.list-op.nt-table .nt-group-row th {
  height: auto;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--btn-bg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--btn-text);
}

.admin-layout .nt-kind {
  min-width: 0;
}

.admin-layout .nt-kind-name {
  display: block;
  font-weight: 600;
}

.admin-layout .nt-kind-when {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text-muted);
}

.admin-layout .nt-kind-step {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* [notifications-page-text-overlap] (Ben 2026-11-07: the sentence was printed on top of "Last fired"):
   the list tables never wrap a cell, so this row's sentence (it has no switch and no menu) ran over the
   last column. It wraps inside its own two columns instead. */
body.admin-layout .members-table.list-style.list-op.nt-table td.nt-kind-step {
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 15px;
}

.admin-layout .nt-kind-stats {
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.admin-layout .nt-ch-select {
  width: 100%;
  max-width: 156px;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 13px;
}

.admin-layout .nt-switch {
  display: inline-flex;
}

/* "Test and history": closed until opened; each message one line, its status as a small chip */
.admin-layout .nt-history {
  margin: 24px 0 0;
  border-top: 1px solid var(--color-border);
}

.admin-layout .nt-history-title {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.admin-layout .nt-history-test {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
}

.admin-layout .nt-history-test .btn {
  width: auto;
}

.admin-layout .nt-history-test .form-message {
  margin: 0;
  font-size: 13px;
}

.admin-layout .nt-history-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .nt-hist {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}

.admin-layout .nt-hist-when {
  flex: none;
  width: 120px;
  color: var(--color-text-muted);
}

.admin-layout .nt-chip {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--box-bg-hover);
  font-size: 12px;
  font-weight: 600;
}

.admin-layout .nt-chip.is-sent {
  background: var(--color-success-bg, rgba(46, 125, 50, 0.14));
  color: var(--color-success-text, var(--color-text));
}

.admin-layout .nt-chip.is-failed {
  background: var(--color-danger-bg, rgba(229, 77, 46, 0.14));
  color: var(--color-danger-text);
}

.admin-layout .nt-hist-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .admin-layout .nt-table,
  .admin-layout .nt-table tbody {
    display: block;
  }

  .admin-layout .nt-table thead {
    display: none;
  }

  .admin-layout .nt-table .nt-group-row {
    display: block;
  }

  .admin-layout .nt-table .nt-group-row th {
    display: block;
  }

  .admin-layout .nt-table .nt-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
  }

  .admin-layout .nt-table .nt-row td,
  body.admin-layout .members-table.list-style.list-op.nt-table .nt-row td {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
  }

  .admin-layout .nt-table .nt-row td.nt-kind,
  body.admin-layout .members-table.list-style.list-op.nt-table .nt-row td.nt-kind {
    display: block;
  }

  .admin-layout .nt-table .nt-row td[data-label]::before {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .admin-layout .nt-table .nt-kind,
  .admin-layout .nt-table .nt-kind-step,
  .admin-layout .nt-table .nt-kind-stats {
    grid-column: 1 / -1;
  }

  .admin-layout .nt-kind-when {
    white-space: normal;
  }

  .admin-layout .nt-table .nt-ch-select {
    max-width: 200px;
  }

  .admin-layout .nt-hist-when {
    width: auto;
  }
}

/* ---------- Sticky notes on the automation canvas: a new look and easier dragging (Ben 2026-11-02) ----------
   Paper that floats over the canvas: a soft two-layer shadow, a darker strip on top with a grip to
   drag by (the whole strip moves it), the page lifts while it moves. Square corners, as the admin. */
.admin-layout .flow-sticky {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(0, 0, 0, 0.14);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-layout .flow-sticky.is-moving {
  z-index: 6;
  opacity: 1;
  transform: rotate(-1deg) scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 18px 36px rgba(0, 0, 0, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .admin-layout .flow-sticky,
  .admin-layout .flow-sticky.is-moving {
    transition: none;
    transform: none;
  }
}

.admin-layout .flow-sticky-bar {
  min-height: 30px;
  padding: 3px 6px 3px 4px;
  background: rgba(0, 0, 0, 0.06);
}

.admin-layout .flow-sticky.is-moving .flow-sticky-bar,
body.flow-sticky-dragging,
body.flow-sticky-dragging * {
  cursor: grabbing !important;
}

body.flow-sticky-dragging {
  user-select: none;
}

/* The grip: six dots, the place to take it by */
.admin-layout .flow-sticky-grip {
  flex: 0 0 10px;
  width: 10px;
  height: 16px;
  margin-right: 2px;
  opacity: 0.45;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.3px);
  background-size: 5px 5px;
  background-position: 0 1px;
}

.admin-layout .flow-sticky-text {
  padding: 8px 10px;
  font-size: 13.5px;
  line-height: 19px;
}

.admin-layout .flow-sticky-resize {
  width: 16px;
  height: 16px;
}

/* ---------- The automation's notes (the edit page, under its name; admin-flow-notes.js) ---------- */
/* The sticker (Ben 2026-11-02): dark by default, or one of the sticky note colours; sized to its text,
   about 6 lines then "Show more"; a folded corner; the tools only while editing */
.admin-layout .flow-notes-sticker,
.flow-notes-float {
  --note-bg: #26292B;
  --note-text: #F1F3F2;
  --note-edge: rgba(255, 255, 255, 0.16);
  --note-muted: rgba(241, 243, 242, 0.72);
  --note-link: #9CC8FF;
}

.admin-layout .flow-notes-sticker.is-yellow, .flow-notes-float.is-yellow { --note-bg: var(--sticky-yellow); }
.admin-layout .flow-notes-sticker.is-blue, .flow-notes-float.is-blue { --note-bg: var(--sticky-blue); }
.admin-layout .flow-notes-sticker.is-green, .flow-notes-float.is-green { --note-bg: var(--sticky-green); }
.admin-layout .flow-notes-sticker.is-pink, .flow-notes-float.is-pink { --note-bg: var(--sticky-pink); }

.admin-layout .flow-notes-sticker:not(.is-dark),
.flow-notes-float:not(.is-dark) {
  --note-text: var(--sticky-text);
  --note-edge: var(--sticky-edge);
  --note-muted: color-mix(in srgb, var(--sticky-text) 70%, transparent);
  --note-link: var(--color-link, var(--color-primary));
}

.admin-layout .flow-notes-panel {
  position: relative;
  width: fit-content;
  min-width: min(320px, 100%);
  max-width: min(760px, 100%);
  margin: 4px 0 12px;
  padding: 10px 14px 8px;
  border: 1px solid var(--note-edge);
  border-radius: 8px 0 8px 8px;
  background: var(--note-bg);
  color: var(--note-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.14);
}

/* The folded corner */
.admin-layout .flow-notes-panel::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  background: linear-gradient(225deg, var(--color-bg, #fff) 50%, rgba(0, 0, 0, 0.22) 50%);
}

.admin-layout .flow-notes-panel.is-editing {
  width: auto;
  max-width: 100%;
}

.admin-layout .flow-notes-panel.is-empty {
  min-width: 0;
  padding: 4px 6px;
}

/* "Create sticker" (admin-flow-notes.js): on the title's row, small and quiet like the row's other
   buttons (Ben 2026-11-04: "make create sticker smaller and on the same line") */
.admin-layout .flow-notes-create.btn {
  margin: 0;
}

.admin-layout .flow-notes-add {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--note-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.admin-layout .flow-notes-add[hidden],
.admin-layout .flow-notes-area[hidden],
.admin-layout .flow-notes-toolbar[hidden],
.admin-layout .flow-notes-more[hidden],
.admin-layout .flow-notes-note[hidden] {
  display: none;
}

.admin-layout .flow-notes-btn {
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid var(--note-edge);
  border-radius: 0;
  background: transparent;
  color: var(--note-text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.admin-layout .flow-notes-btn:hover,
.flow-notes-float .flow-notes-btn:hover {
  background: rgba(127, 127, 127, 0.16);
}

.admin-layout .flow-notes-btn:focus-visible,
.admin-layout .flow-notes-add:focus-visible,
.admin-layout .flow-notes-dot:focus-visible,
.flow-notes-float .flow-notes-btn:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 1px;
}

.admin-layout .flow-notes-dot {
  width: 18px;
  height: 18px;
  border: 2px solid var(--note-text);
  border-radius: 50%;
  background: var(--note-bg);
  cursor: pointer;
}

.admin-layout .flow-notes-colors {
  position: absolute;
  left: 8px;
  bottom: 36px;
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
}

.admin-layout .flow-notes-colors[hidden] {
  display: none;
}

.admin-layout .flow-notes-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  cursor: pointer;
}

.admin-layout .flow-notes-swatch.is-dark { background: #26292B; }
.admin-layout .flow-notes-swatch.is-yellow { background: var(--sticky-yellow); }
.admin-layout .flow-notes-swatch.is-blue { background: var(--sticky-blue); }
.admin-layout .flow-notes-swatch.is-green { background: var(--sticky-green); }
.admin-layout .flow-notes-swatch.is-pink { background: var(--sticky-pink); }
.admin-layout .flow-notes-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-text); }

.admin-layout .flow-notes-note {
  margin: 6px 0 0;
  color: var(--note-muted);
  font-size: 12px;
}

.admin-layout .flow-notes-sticker .flow-status-state {
  color: var(--note-muted);
  font-size: 12px;
}

/* The pinned canvas note: read only, edited in the sticker */
.admin-layout .flow-sticky.is-pinned .flow-sticky-text {
  cursor: default;
}

/* "Pop out": the floating copy, on top of the page, fixed on screen */
.flow-notes-float {
  position: fixed;
  z-index: 1200;
  width: 300px;
  max-width: calc(100vw - 16px);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--note-edge);
  border-radius: 8px 0 8px 8px;
  background: var(--note-bg);
  color: var(--note-text);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18), 0 18px 36px rgba(0, 0, 0, 0.22);
}

.flow-notes-float-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-bottom: 1px solid var(--note-edge);
  cursor: grab;
  touch-action: none;
}

.flow-notes-float-title {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
}

.flow-notes-float .flow-notes-btn {
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid var(--note-edge);
  border-radius: 0;
  background: transparent;
  color: var(--note-text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.flow-notes-float-text {
  padding: 8px 12px 12px;
  overflow: auto;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.flow-notes-float-text a { color: var(--note-link); }
.flow-notes-float-text h2 { margin: 6px 0 4px; color: inherit; font-size: 17px; }
.flow-notes-float-text h3 { margin: 6px 0 4px; color: inherit; font-size: 15px; }
.flow-notes-float-text ul[data-list="check"] { padding-left: 0; list-style: none; }
.flow-notes-float-text ul[data-list="check"] > li { position: relative; padding-left: 22px; }
.flow-notes-float-text ul[data-list="check"] > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
}
.flow-notes-float-text ul[data-list="check"] > li[data-checked="true"] { color: var(--note-muted); text-decoration: line-through; }
.flow-notes-float-text ul[data-list="check"] > li[data-checked="true"]::before { background: currentColor; }
.flow-notes-float-text p { margin: 0 0 6px; }
.flow-notes-float-text ul,
.flow-notes-float-text ol { margin: 0 0 6px; padding-left: 20px; }

.admin-layout .flow-notes-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--note-edge, var(--color-border));
}

.admin-layout .flow-notes-tool {
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--note-edge, var(--color-border));
  border-radius: 0;
  background: transparent;
  color: var(--note-text, var(--color-text));
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.admin-layout .flow-notes-tool:hover {
  background: rgba(127, 127, 127, 0.16);
}

.admin-layout .flow-notes-tool:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 1px;
}

.admin-layout .flow-notes-tool.is-h2 { font-weight: 700; font-size: 15px; }
.admin-layout .flow-notes-tool.is-h3 { font-weight: 700; }
.admin-layout .flow-notes-tool.is-bold { font-weight: 700; }
.admin-layout .flow-notes-tool.is-italic { font-style: italic; }

.admin-layout .flow-notes-area {
  max-height: calc(6 * 1.55em);
  padding: 2px;
  overflow: hidden;
  color: var(--note-text, var(--color-text));
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  cursor: text;
}

.admin-layout .flow-notes-panel.is-expanded .flow-notes-area {
  max-height: none;
}

.admin-layout .flow-notes-panel.is-editing .flow-notes-area {
  min-height: 160px;
  max-height: 60vh;
  padding: 8px 2px;
  overflow-y: auto;
  resize: vertical;
}

.admin-layout .flow-notes-area:focus {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 2px;
}

.admin-layout .flow-notes-area:empty::before {
  content: attr(data-placeholder);
  color: var(--note-muted, var(--color-text-muted));
}

.admin-layout .flow-notes-area h2 { margin: 4px 0 6px; color: inherit; font-size: 20px; }
.admin-layout .flow-notes-area h3 { margin: 6px 0 4px; color: inherit; font-size: 17px; }
.admin-layout .flow-notes-area p { margin: 0 0 8px; }
.admin-layout .flow-notes-area ul,
.admin-layout .flow-notes-area ol { margin: 0 0 8px; padding-left: 24px; }
.admin-layout .flow-notes-area a { color: var(--note-link, var(--color-link, var(--color-primary))); text-decoration: underline; }

/* A checklist: each line with a box; a click on the box ticks it */
.admin-layout .flow-notes-area ul[data-list="check"] {
  padding-left: 0;
  list-style: none;
}

.admin-layout .flow-notes-area ul[data-list="check"] > li {
  position: relative;
  padding-left: 26px;
}

.admin-layout .flow-notes-area ul[data-list="check"] > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.3em;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  background: transparent;
  cursor: pointer;
}

.admin-layout .flow-notes-area ul[data-list="check"] > li[data-checked="true"] {
  color: var(--note-muted, var(--color-text-muted));
  text-decoration: line-through;
}

.admin-layout .flow-notes-area ul[data-list="check"] > li[data-checked="true"]::before {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 2px var(--color-surface);
}

.admin-layout .flow-notes-foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding-top: 6px;
}

.admin-layout .flow-notes-foot .flow-status-state {
  margin-right: auto;
}

.admin-layout .flow-notes-panel.is-empty .flow-notes-foot {
  display: none;
}

/* ---------- The page builder's one colour picker (color-picker.js; Ben 2026-11-02) ---------- */
/* The colour field: its name, then a button with the colour and its code (or "No colour") */
.admin-layout .pb-color-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.admin-layout .pb-color-btn:hover { background: var(--color-surface-alt); }
.admin-layout .pb-color-btn:focus-visible { outline: 2px solid var(--color-link-focus); outline-offset: 1px; }

.admin-layout .pb-color-chip,
.cp-preview {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border-strong);
}

.admin-layout .pb-color-chip.is-none,
.cp-preview.is-none {
  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 10px 10px;
}

.admin-layout .pb-color-words { font-family: var(--font-mono, ui-monospace, monospace); }

/* The picker: on the page, above everything, beside its field */
.cp-panel {
  position: fixed;
  z-index: 1300;
  width: 292px;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  font-family: inherit;
  font-size: 13px;
}

.cp-title { margin: 0 0 8px; font-weight: 600; }

.cp-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
}

.cp-col { display: grid; gap: 2px; }

.cp-greys {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
  margin-top: 6px;
}

.cp-swatch,
.cp-fav {
  width: 100%;
  min-width: 0;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  cursor: pointer;
}

.cp-swatch[aria-pressed="true"],
.cp-fav[aria-pressed="true"] {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}

.cp-swatch:focus-visible,
.cp-fav:focus-visible { outline: 2px solid var(--color-link-focus); outline-offset: 1px; }

.cp-hex-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.cp-hex {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.cp-hex.is-bad {
  border-color: var(--color-danger-text);
  box-shadow: 0 0 0 1px var(--color-danger-text);
}

.cp-small,
.cp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.cp-small[aria-pressed="true"],
.cp-icon[aria-pressed="true"] { background: var(--color-surface-alt); }
.cp-icon:disabled { opacity: 0.45; cursor: default; }
.cp-small:focus-visible,
.cp-icon:focus-visible { outline: 2px solid var(--color-link-focus); outline-offset: 1px; }

.cp-rgb { display: flex; gap: 6px; margin-top: 6px; }
.cp-rgb[hidden] { display: none; }
.cp-rgb-field { display: flex; align-items: center; gap: 4px; flex: 1 1 0; }
.cp-rgb-input { width: 100%; min-width: 0; height: 30px; }

.cp-favs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.cp-favs-title { font-weight: 600; }
.cp-fav-edit[hidden] { display: none; }

.cp-favs {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 3px;
  margin-top: 6px;
}

.cp-fav.is-editing { position: relative; opacity: 0.85; }
.cp-fav.is-editing::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 2px #000;
}

.cp-empty { grid-column: 1 / -1; color: var(--color-text-muted); }
.cp-note { margin: 6px 0 0; color: var(--color-text-muted); font-size: 12px; }
.cp-note[hidden] { display: none; }

.cp-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.cp-foot .cp-done { margin-left: auto; }

/* Page builder: the pen ("Edit") on every list row; the open row's pen is a close X */
.pb-pen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pb-pen[aria-expanded="true"] {
  font-size: 18px;
  line-height: 1;
}

.pb-page-row-actions {
  flex-wrap: nowrap;
  align-items: center;
}

/* A code box with line numbers (code-box.js): the Sites screen and the page builder */
.code-box {
  display: flex;
  min-width: 0;
  max-height: 420px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-input-bg, var(--color-surface));
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  line-height: 20px;
}

.code-box:focus-within {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 1px;
}

.code-box-lines {
  flex: 0 0 auto;
  min-width: 36px;
  margin: 0;
  padding: 8px 6px;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font: inherit;
  text-align: right;
  user-select: none;
}

.code-box-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 120px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  white-space: pre;
  overflow: auto;
  resize: vertical;
  tab-size: 2;
}

.code-box-input:focus {
  outline: none;
}

/* The Custom code element (page-blocks.js codeContent): in the builder a grey label and the sealed
   preview; on the page only the code's own result */
.pb-code-el {
  border: 1px dashed var(--color-border-strong);
  background: var(--color-surface-alt);
}

.pb-code-label {
  padding: 6px 10px;
  color: var(--color-text-muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-code-frame {
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: #fff;
}

.pb-code-live {
  min-width: 0;
}

.pb-code-box {
  margin-top: 4px;
}

/* Pages → Site map (admin-site-map.js): boxes on a scrollable canvas, links as arrows; square corners */
.pb-sitemap-view[hidden] {
  display: none;
}

.pb-sitemap-view .admin-toolbar-end .field-label {
  margin: 0;
}

.pb-sitemap-site {
  width: auto;
  max-width: 100%;
}

.pb-sitemap-canvas {
  position: relative;
  max-width: 100%;
  max-height: 72vh;
  overflow: auto;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
  background-size: 18px 18px;
}

.pb-sitemap-svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.pb-sitemap-nodes {
  position: relative;
}

.pb-sitemap-line {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
}

.pb-sitemap-line.is-back {
  stroke-dasharray: 5 4;
}

.pb-sitemap-arrowhead {
  fill: var(--color-text-muted);
}

.pb-sitemap-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--color-success-text, #2e7d32);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.pb-sitemap-node.is-draft,
.pb-sitemap-node.is-unpublished {
  border-left-color: var(--color-text-muted);
}

.pb-sitemap-node.is-hidden {
  border-left-color: var(--color-warning-text);
}

.pb-sitemap-node:hover {
  background: var(--color-surface-alt);
}

.pb-sitemap-node:focus-visible,
.pb-sitemap-list-page:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 2px;
}

.pb-sitemap-title {
  overflow: hidden;
  font-weight: 600;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-sitemap-slug,
.pb-sitemap-meta {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-sitemap-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  white-space: normal;
  line-height: 1.35;
}

.pb-sitemap-status {
  font-weight: 600;
}

.pb-sitemap-legend {
  margin-top: 6px;
}

.pb-sitemap-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pb-sitemap-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.pb-sitemap-list li .field-hint {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.pb-sitemap-list-page {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Pages: the site filter, the ticked pages' bar and Columns in one row; "Move to a site…" in a pop-up
   (page-builder.js drawSiteTools, paintSelection, openMoveDialog; Ben 2026-11-03) */
.pb-list-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 10px;
}

.pb-list-tools .list-columns {
  margin-left: auto;
}

.pb-site-tools,
.pb-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.pb-site-tools[hidden],
.pb-bulk-bar[hidden],
.pb-site-col[hidden] {
  display: none;
}

.pb-selected-count {
  font-size: 13px;
  font-weight: 600;
}

.pb-site-tools .field-label {
  margin: 0;
}

.pb-site-filter {
  width: auto;
  max-width: 100%;
}

.admin-layout .pb-pages-table .col-check {
  width: 36px;
}

.pb-move-dialog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}

.pb-move-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.pb-move-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

.pb-move-name {
  font-weight: 600;
}

.pb-move-address {
  font-size: 12.5px;
  color: var(--color-text-lighter);
  overflow-wrap: anywhere;
}

.pb-move-item.is-held .pb-move-address {
  text-decoration: line-through;
}

.pb-move-clash {
  margin: 0;
  font-size: 12.5px;
}

.pb-move-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pb-move-foot .field-label {
  margin: 0;
}

.pb-move-foot .input-field {
  width: auto;
  max-width: 100%;
}

/* Sales & Pages → Sites (admin-sites.js) */
/* (Ben 2026-11-03: the intro small and quiet, 8px under the title and 16px above the list) */
.admin-layout .sites-intro {
  margin: 8px 0 16px;
}

.admin-layout .sites-pages-link {
  color: var(--color-link, var(--color-primary));
  text-decoration: underline;
}

.sites-name {
  display: block;
  font-weight: 600;
}

.sites-domain {
  display: block;
  margin: 0;
}

.sites-default {
  border-radius: 0;
}

.sites-row.is-off .sites-code {
  color: var(--color-warning-text);
}

.sites-pen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sites-back {
  margin-bottom: 8px;
}

.sites-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
}

.sites-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
}

.sites-code-heading {
  margin: 12px 0 0;
}

.sites-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 0;
}

.sites-box-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.sites-box-title {
  margin: 0;
  font-size: 15px;
}

.sites-box-on {
  margin-left: auto;
}

.sites-history[hidden] {
  display: none;
}

.sites-history-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.sites-history-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}

/* ======================================================================
   The one list style (Ben 2026-11-03: "I want all of our pages that have any list to look like this
   style. Exact same font, same size, same colour" and "every row to have the same height"; "The
   Courses page that we have has nice font and height of rows"). A table with .list-style: 13 px text,
   small grey upper-case headings, light dividers, a hover colour, every row 48 px high (the Courses
   page's), each cell on one line ("…" when too long), square corners. Phones keep each list's cards.
   ====================================================================== */
@media (min-width: 701px) {
  .admin-layout .members-table.list-style {
    font-size: 13px;
    line-height: 18px;
  }

  .admin-layout .members-table.list-style th {
    height: 36px;
    padding: 0 10px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .admin-layout .members-table.list-style tbody tr {
    height: 48px;
  }

  .admin-layout .members-table.list-style td {
    height: 48px;
    padding: 0 10px;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    vertical-align: middle;
  }

  .admin-layout .members-table.list-style th:first-child,
  .admin-layout .members-table.list-style td:first-child {
    padding-left: var(--list-first-col-pad);
  }

  .admin-layout .members-table.list-style th:last-child,
  .admin-layout .members-table.list-style td:last-child {
    padding-right: 16px;
  }

  .admin-layout .members-table.list-style tbody tr:hover td {
    background: var(--color-surface-alt);
  }

  /* (the row's buttons: one small size on every row) */
  .admin-layout .members-table.list-style td .btn.btn-sm {
    height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .admin-layout .members-table.list-style td .admin-row-actions {
    flex-wrap: nowrap;
  }
}

/* (every screen size) No grey: no striped rows, the page's own background behind the heading row; the
   hover colour only. The list's frame: none (.list-wrap, like the Automations list: Ben 2026-11-03
   "Members has an ugly border and an ugly background") */
.admin-layout .members-table.list-style tbody tr td,
.admin-layout .members-table.list-style tbody tr:nth-child(even) td {
  background: transparent;
}

.admin-layout .members-table.list-style tbody tr:hover td {
  background: var(--color-surface-alt);
}

.admin-layout .members-table.list-style th {
  background: var(--color-bg, var(--color-surface));
}

.admin-layout .members-table.list-style th .th-sort {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

body.admin-layout .members-table.list-style {
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* (the selection bar above a list in this style: plain, like the Automations list's Sort bar) */
.admin-layout #panel-members .video-bulk-bar.member-tag-bulk,
.admin-layout .video-bulk-bar.course-bulk-bar {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-layout .table-wrap.list-wrap {
  max-height: none;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* A list of rows (not a table) in the same style: the Courses list (.list-rows). No frame, no grey,
   every row 48 px on one line: the name, then its counts and lines after it ("…", all of it on hover),
   the switch, the chips as small same-size boxes, Members and Actions one small size */
.admin-layout .admin-list.list-rows {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.admin-layout .admin-list.list-rows > li.admin-row {
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  font-size: 13px;
}

.admin-layout .admin-list.list-rows > li.admin-row:hover {
  background: var(--color-surface-alt);
}

.admin-layout .admin-list.list-rows > li:last-child,
.admin-layout .admin-list.list-rows > li:last-child.admin-row {
  border-bottom: 1px solid var(--color-border);
}

.admin-layout .admin-list.list-rows .course-flag {
  justify-content: center;
  min-width: 96px;
  height: 24px;
  padding: 0 8px;
  font-size: 11.5px;
}

.admin-layout .admin-list.list-rows .course-flag svg {
  width: 13px;
  height: 13px;
}

.admin-layout .admin-list.list-rows .course-row-actions .btn.btn-sm {
  height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0;
  font-size: 12.5px;
}

@media (min-width: 701px) {
  .admin-layout .admin-list.list-rows > li.admin-row {
    height: 48px;
    flex-wrap: nowrap;
  }

  .admin-layout .admin-list.list-rows .course-row-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .admin-layout .admin-list.list-rows .course-row-title .lesson-release-line,
  .admin-layout .admin-list.list-rows .course-row-title .course-setting-labels {
    display: inline;
    margin-left: 0;
  }

  .admin-layout .admin-list.list-rows .course-row-title .lesson-release-line:not(:empty)::before {
    content: " · ";
  }

  .admin-layout .admin-list.list-rows .course-row-title .lesson-release-line:empty {
    display: none;
  }

  .admin-layout .admin-list.list-rows .course-row-actions,
  .admin-layout .admin-list.list-rows .course-flags {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}

/* The Automations list in it: name and trigger cut with "…"; the Members boxes in one line */
@media (min-width: 701px) {
  .admin-layout .automations-table.list-style {
    min-width: 860px;
  }
}

.admin-layout .automations-table.list-style .auto-name-line,
.admin-layout .automations-table.list-style .auto-stat-boxes {
  flex-wrap: nowrap;
}

.admin-layout .automations-table.list-style .auto-name {
  font-size: 13px;
}

.admin-layout .automations-table.list-style .auto-trigger {
  font-size: 13px;
}

.admin-layout .automations-table.list-style .auto-stats-col,
.admin-layout .automations-table.list-style .auto-stats-cell {
  width: 150px;
}

/* The Members boxes: one small square per status, a number only (like the step boxes on the canvas) */
.admin-layout .auto-stat-boxes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-layout .auto-stat-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

.admin-layout .auto-stat-box.is-active {
  background: color-mix(in srgb, var(--color-text) 62%, var(--color-surface));
  color: var(--color-surface);
}

.admin-layout .auto-stat-box.is-done {
  background: var(--color-success-text, #1a7f37);
  color: var(--color-surface);
}

.admin-layout .auto-stat-box.is-stopped {
  background: var(--color-warning-text);
  color: var(--color-surface);
}

.admin-layout .auto-stat-box.is-failed {
  background: var(--color-danger);
}

.admin-layout .auto-stat-box.is-removed {
  background: color-mix(in srgb, var(--color-text) 35%, var(--color-surface));
  color: var(--color-surface);
}

/* (a zero: greyed, still there, so every row's boxes line up) */
.admin-layout .auto-stat-box.is-zero {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-lighter);
  font-weight: 500;
}

.admin-layout .auto-stat-box:focus-visible {
  outline: 2px solid var(--color-link-focus);
  outline-offset: 1px;
}

/* Phones: no lines inside an automation's card (every card the same height; the card has its own frame) */
@media (max-width: 700px) {
  .admin-layout .automations-table.list-style tr.auto-row td {
    border-bottom: 0;
  }
}

/* "Columns" beside Sort on the Automations list */
.admin-layout .automation-sort-bar .list-columns {
  margin-left: auto;
}

/* ======================================================================
   Ontraport's list look (Ben 2026-11-03: "it needs to look like the ontraport style i showed you"),
   measured from Ontraport's Contacts list: Open Sans 13px; cells 600 in black; headings 13px 700 in
   capitals, the sorted one blue with its arrow; rows 38px with a thin #f2f2f2 line under each, no
   stripes, no frame; the list on white on a #f2f2f2 page. The tokens are shared: a list takes the look
   with .list-op on its table and .list-op-page on its page (Members first; the other lists one at a
   time). Square corners; badges keep our own colours. Dark: the same structure with dark tokens.
   ====================================================================== */
.admin-layout {
  --olist-font: "Open Sans", sans-serif;
  --olist-size: 13px;
  --olist-cell-weight: 600;
  --olist-cell-color: #000;
  --olist-head-weight: 700;
  --olist-head-color: #000;
  --olist-sorted: #1285ff;
  --olist-accent: #3d83f7;
  --olist-row-h: 38px;
  --olist-cell-pad-y: 7.8px;
  --olist-cell-pad-x: 30px;
  --olist-line: #f2f2f2;
  --olist-bg: #fff;
  --olist-page-bg: #f2f2f2;
  --olist-hover: #f7f9fc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-layout {
    --olist-cell-color: var(--color-text);
    --olist-head-color: var(--color-text);
    --olist-sorted: #5aa9ff;
    --olist-accent: #6aa3ff;
    --olist-line: rgba(237, 239, 238, 0.08);
    --olist-bg: var(--color-surface);
    --olist-page-bg: var(--color-bg);
    --olist-hover: rgba(237, 239, 238, 0.045);
  }
}

:root[data-theme="dark"] .admin-layout {
  --olist-cell-color: var(--color-text);
  --olist-head-color: var(--color-text);
  --olist-sorted: #5aa9ff;
  --olist-accent: #6aa3ff;
  --olist-line: rgba(237, 239, 238, 0.08);
  --olist-bg: var(--color-surface);
  --olist-page-bg: var(--color-bg);
  --olist-hover: rgba(237, 239, 238, 0.045);
}

/* The page: the grey background (its room: the admin's one spacing, --page-pad-x and the others) */
body.admin-layout:has(.list-op-page:not([hidden])) {
  background: var(--olist-page-bg);
}

/* The list on white, no frame, square */
.admin-layout .list-op-page .table-wrap:has(> .list-op) {
  background: var(--olist-bg);
}

/* The two-pane conversation pages (Inbox, Messages: [admin-pages-match-automations]) on the same grey
   page: the box white, lined up with the page title (not floating in the middle), the list's thin line */
.admin-layout .list-op-page .msgr {
  max-width: none;
  margin: 0;
  border-color: var(--olist-line, var(--color-border));
  background: var(--olist-bg);
}

.admin-layout .list-op-page .sms-list-pane {
  background: var(--olist-bg);
}

/* A list of rows (not a table) in the same look: Courses (.admin-list.list-rows.list-op), its heading
   row the bar above it (.list-op-head: Select all, Actions, Columns at the right end). Members wins:
   the same heading type and height, row height, lines, hover, first-column room and empty look. */
.admin-layout .list-op-page .list-op-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--toolbar-gap);
  min-height: var(--olist-row-h);
  margin: 0;
  padding: 0 16px 0 var(--list-first-col-pad);
  border: 0;
  border-bottom: 1px solid var(--olist-line);
  background: var(--olist-bg);
  color: var(--olist-head-color);
  font-family: var(--olist-font);
  font-size: var(--olist-size);
}

.admin-layout .list-op-page .list-op-head .course-select-all-field span {
  font-weight: var(--olist-head-weight);
  text-transform: uppercase;
}

.admin-layout .list-op-page .list-op-head .field-hint {
  font-size: var(--olist-size);
}

.admin-layout .list-op-page .list-op-head .list-columns {
  margin-left: auto;
}

.admin-layout .admin-list.list-rows.list-op {
  background: var(--olist-bg);
  font-family: var(--olist-font);
}

.admin-layout .admin-list.list-rows.list-op > li.admin-row {
  padding: 0 16px 0 var(--list-first-col-pad);
  border-bottom: 1px solid var(--olist-line);
  background: var(--olist-bg);
  color: var(--olist-cell-color);
  font-size: var(--olist-size);
  font-weight: var(--olist-cell-weight);
}

.admin-layout .admin-list.list-rows.list-op > li.admin-row:hover {
  background: var(--olist-hover);
}

.admin-layout .admin-list.list-rows.list-op > li.admin-row :is(.course-row-title, .course-row-title a, .admin-row-title) {
  color: var(--olist-cell-color);
  font-size: var(--olist-size);
  font-weight: var(--olist-cell-weight);
}

@media (min-width: 701px) {
  .admin-layout .admin-list.list-rows.list-op > li.admin-row {
    box-sizing: border-box;
    height: var(--olist-row-h);
    min-height: 0;
  }

  .admin-layout .list-op-page .list-op-head {
    height: var(--olist-row-h);
  }
}

/* Courses' heading row and columns (Ben 2026-11-04: real column headings like Members): the heading
   and every row share one set of column widths, so each heading sits over its column; the name takes
   the rest. A column turned off in Columns hides in both (data-col). */
.admin-layout .list-op-page .course-list-head {
  gap: 12px;
  padding: 0 16px 0 var(--list-first-col-pad);
  font-weight: var(--olist-head-weight);
  text-transform: uppercase;
}

.admin-layout .course-list-head .th-sort {
  width: auto;
  min-height: 0;
  padding: 0;
  font: inherit;
  font-weight: var(--olist-head-weight);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--olist-head-color);
}

.admin-layout .course-list-head .th-sort:hover {
  background: transparent;
  color: var(--olist-sorted);
  text-decoration: none;
}

.admin-layout .course-list-head .is-sorted > .th-sort {
  color: var(--olist-sorted);
}

.admin-layout .course-list-head .th-sort-arrow {
  font-size: 13px;
}

/* (the selection bar: only while a course is ticked, like Members') */
.admin-layout .list-op-page .course-bulk-bar:has(#course-bulk-clear[hidden]) {
  display: none;
}

@media (min-width: 701px) {
  .admin-layout .admin-list.list-rows.list-op > li.admin-row,
  .admin-layout .list-op-page .course-list-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
  }

  .admin-layout .admin-list.list-rows.list-op > li.admin-row .course-row-actions {
    display: contents;
  }

  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) > .course-select-cell { flex: 0 0 20px; }
  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) > .course-order { flex: 0 0 56px; display: inline-flex; align-items: center; gap: 6px; }
  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) > :is(.course-head-name, .course-row-title) { flex: 1 1 0; min-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) [data-col="modules"],
  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) [data-col="lessons"] { flex: 0 0 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) [data-col="enrolled"] { flex: 0 0 76px; white-space: nowrap; }
  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) [data-col="enabled"] { flex: 0 0 112px; }
  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) [data-col="chips"] { flex: 0 0 300px; }
  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) [data-col="members"] { flex: 0 0 124px; }
  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) [data-col="actions"] { flex: 0 0 92px; }
  .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) > :is(.course-cell-end, .course-move-group) { flex: 0 0 104px; display: inline-flex; justify-content: flex-end; }

  /* (a list narrower than all its columns: the settings chips go first, then Modules and Lessons) */
  @media (max-width: 1279px) {
    .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) [data-col="modules"],
    .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) [data-col="lessons"] { flex-basis: 72px; }
    .admin-layout :is(.course-list-head, .admin-list.list-op > li.admin-row) [data-col="chips"] { flex: 0 1 300px; min-width: 0; overflow: hidden; }
  }
}

/* Phones: the rows stay cards; the heading row wraps (select all, the sort headings, Columns) and the
   headings that only label a card's buttons are left out; a card's counts say what they are */
@media (max-width: 700px) {
  .admin-layout .list-op-page .course-list-head {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .admin-layout .list-op-page .course-list-head > :is([data-col="chips"], [data-col="members"], [data-col="actions"]) {
    display: none;
  }

  .admin-layout .list-op-page .course-list-head > .course-cell-end {
    margin-left: auto;
  }

  .admin-layout .admin-list.list-op > li.admin-row > :is([data-col="modules"], [data-col="lessons"], [data-col="enrolled"])::before {
    content: attr(data-label) ": ";
    color: var(--color-text-muted);
    font-weight: 400;
  }

  .admin-layout .admin-list.list-op > li.admin-row > :is([data-col="modules"], [data-col="lessons"], [data-col="enrolled"]) {
    margin-right: 12px;
    font-size: 12px;
  }
}

/* While sorted by a heading (a view only): no drag handle and no Move up / Move down */
.admin-layout .admin-list.is-view-sorted :is(.course-drag-handle, .course-move-group > .course-move) {
  visibility: hidden;
}

/* The Vimeo check under the list: one small quiet line (Check now and its details kept) */
.admin-layout .list-op-page .showcase-autolink {
  margin-top: 12px;
}

.admin-layout .list-op-page .showcase-autolink > .form-message:empty {
  display: none;
}

.admin-layout .list-op-page .showcase-autolink > .showcase-module-status {
  margin-top: 0;
}

.admin-layout .list-op-page .showcase-autolink .vsync-line {
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  font-size: 12px;
}

.admin-layout .list-op-page .showcase-autolink .vsync-line :is(.vsync-main, .vsync-sub) {
  display: inline;
  margin: 0 6px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.admin-layout .list-op-page .showcase-autolink .vsync-mark {
  width: 16px;
  height: 16px;
  font-size: 11px;
  line-height: 16px;
}

.admin-layout .list-op-page .showcase-autolink .showcase-details > summary {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Automations (Ben 2026-11-04): the Sort box is gone (the headings sort); its bar only holds Columns
   on a phone, and shows nothing once Columns has moved into the heading row. "My timezone" is one
   small line under the list. */
.admin-layout .list-op-page .automation-sort-bar:not(:has(*)),
.admin-layout .list-op-page .list-look-bar:not(:has(*)) {
  display: none;
}

/* Columns always in sight: its heading cell stays at the right edge of the list's box, also when the table
   is wider than the screen (Members: the button was off to the right, Ben 2026-11-09: "EVEN #members PAGE
   DOESNT HAVE THE COLUMNS BUTTON") */
.admin-layout .list-op th.col-actions:has(.is-in-header) {
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--olist-bg, var(--color-surface));
}

/* The one list page built in code (admin-list-look.js): the Automations page's bar under the header (only
   Columns, on a phone), one small hint line, and a group's heading row like the Automations Tree's */
.admin-layout .list-look-bar {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.admin-layout .list-look-bar .list-columns {
  margin-left: auto;
}

.admin-layout .list-look-hint {
  margin: -4px 0 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.admin-layout .list-look-controls .input-field {
  width: auto;
  min-width: 180px;
  border-radius: 0;
}

.admin-layout .list-look-table tr.list-look-group > th {
  height: 38px;
  padding: 0 16px 0 var(--list-first-col-pad);
  border-bottom: 1px solid var(--olist-line, var(--color-border));
  background: var(--olist-bg, var(--color-surface));
  color: var(--olist-head-color, var(--color-text));
  font-weight: 700;
  text-align: left;
  text-transform: none;
}

.admin-layout .list-look-group-count {
  color: var(--color-text-muted);
  font-weight: 400;
}

@media (max-width: 700px) {
  .admin-layout .list-look-controls {
    flex-wrap: wrap;
  }

  .admin-layout .list-look-controls .input-field {
    flex: 1 1 100%;
    min-width: 0;
  }

  .admin-layout .list-look-table tr.list-look-group {
    display: block;
  }

  .admin-layout .list-look-table tr.list-look-group > th {
    display: block;
    padding: 8px 0;
  }
}

.admin-layout .list-op-page .my-tz[data-my-tz="automations"] {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Automations' Tree (Ben 2026-11-03: "the same tree view as courses and modules, but no border around
   it and main bg white"): the same table and rows; a group's heading row (its handle, the chevron, the
   name, the count, its Actions) on white with a thin line, no frame; its automations indented */
.admin-layout .automations-table.is-tree tr.auto-group-row > td,
body.admin-layout .automations-table.list-op.is-tree tr.auto-group-row > td {
  padding: 0 16px 0 var(--list-first-col-pad);
  border-bottom: 1px solid var(--olist-line, var(--color-border));
  background: var(--olist-bg, var(--color-surface));
}

.admin-layout .auto-group-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.admin-layout .auto-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--olist-head-color, var(--color-text));
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.admin-layout .auto-group-toggle svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.admin-layout .auto-group-row.is-closed .auto-group-toggle svg {
  transform: rotate(-90deg);
}

.admin-layout .auto-group-row .actions-menu-btn {
  margin-left: auto;
}

.admin-layout .auto-group-handle-space {
  display: inline-block;
  width: 24px;
}

.admin-layout .automations-table.is-tree tr.auto-row > td.auto-name-cell .auto-name-line {
  padding-left: 18px;
}

.admin-layout .automations-table.is-tree tr.auto-row .auto-drag-handle {
  margin-left: -18px;
}

.admin-layout .automations-table.is-tree tr.is-dragging > td {
  opacity: 0.6;
}

.admin-layout .automations-table.is-tree tr.is-drop-target > td {
  box-shadow: inset 0 -2px 0 var(--olist-sorted, var(--color-link));
}

.admin-layout .automation-tree-sql[hidden],
.admin-layout .automation-group-filter[hidden] {
  display: none;
}

.admin-layout .automation-group-filter select {
  min-height: 32px;
  width: auto;
}

/* (Automations: every name line as tall as the "i" button, so every row and card is one height) */
.admin-layout .automations-table.list-op .auto-name-line {
  min-height: 20px;
}

/* Empty and loading: one plain line, as on Members */
.admin-layout .admin-list.list-op > li.admin-empty,
.admin-layout .members-table.list-op td.admin-empty-cell,
body.admin-layout .members-table.list-style.list-op td.admin-empty-cell {
  padding: 12px var(--list-first-col-pad);
  border: 0;
  background: var(--olist-bg);
  color: var(--color-text-muted);
  font-size: var(--olist-size);
  font-weight: 400;
  text-align: center;
}

.admin-layout .members-table.list-style.list-op,
body.admin-layout .members-table.list-style.list-op {
  font-family: var(--olist-font);
  font-size: var(--olist-size);
  background: var(--olist-bg);
}

.admin-layout .members-table.list-style.list-op th,
body.admin-layout .members-table.list-style.list-op th {
  border-bottom: 1px solid var(--olist-line);
  background: var(--olist-bg);
  color: var(--olist-head-color);
  font-size: var(--olist-size);
  font-weight: var(--olist-head-weight);
  letter-spacing: 0;
  line-height: 18px;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-layout .members-table.list-style.list-op th .th-sort {
  font-weight: var(--olist-head-weight);
  color: var(--olist-head-color);
}

.admin-layout .members-table.list-style.list-op th .th-sort:hover {
  background: transparent;
  color: var(--olist-sorted);
  text-decoration: none;
}

.admin-layout .members-table.list-style.list-op th.col-num-right .th-sort {
  justify-content: flex-end;
}

.admin-layout .members-table.list-style.list-op th.is-sorted .th-sort,
.admin-layout .members-table.list-style.list-op th:is([aria-sort="ascending"], [aria-sort="descending"]) .th-sort {
  color: var(--olist-sorted);
}

.admin-layout .members-table.list-style.list-op th .th-sort-arrow {
  font-size: 13px;
}

.admin-layout .members-table.list-style.list-op td,
body.admin-layout .members-table.list-style.list-op td {
  border-bottom: 1px solid var(--olist-line);
  color: var(--olist-cell-color);
  font-size: var(--olist-size);
  font-weight: var(--olist-cell-weight);
  line-height: 18px;
  vertical-align: middle;
}

.admin-layout .members-table.list-style.list-op tbody tr:hover td {
  background: var(--olist-hover);
}

/* Transactions in the list look keeps its own emphasis: only the name and the amount bold */
.admin-layout .members-table.list-style.list-op.opp-sales-table td,
body.admin-layout .members-table.list-style.list-op.opp-sales-table td {
  font-weight: 500;
}

/* The sizes, on a computer (phones keep each list's cards): every heading and row 38px; a sortable
   heading's button the heading's own size, never taller; the first column off the list's left edge */
@media (min-width: 701px) {
  .admin-layout .members-table.list-style.list-op th,
  body.admin-layout .members-table.list-style.list-op th {
    height: var(--olist-row-h);
    padding: 0 var(--olist-cell-pad-x) 0 0;
  }

  .admin-layout .members-table.list-style.list-op th.th-sortable,
  body.admin-layout .members-table.list-style.list-op th.th-sortable {
    padding: 0;
  }

  .admin-layout .members-table.list-style.list-op th .th-sort {
    min-height: 0;
    height: calc(var(--olist-row-h) - 1px);
    padding: 0 var(--olist-cell-pad-x) 0 0;
  }

  .admin-layout .members-table.list-style.list-op :is(th, td),
  body.admin-layout .members-table.list-style.list-op :is(th, td) {
    box-sizing: border-box;
  }

  .admin-layout .members-table.list-style.list-op td,
  body.admin-layout .members-table.list-style.list-op td {
    height: var(--olist-row-h);
    padding: var(--olist-cell-pad-y) var(--olist-cell-pad-x) var(--olist-cell-pad-y) 0;
  }

  /* (a cell with a switch, a button, a tick or the progress line: no padding above and below, so the
     row stays 38px with the control centred) */
  .admin-layout .members-table.list-style.list-op td:has(button, input, .member-lessons-bar),
  body.admin-layout .members-table.list-style.list-op td:has(button, input, .member-lessons-bar) {
    padding-top: 0;
    padding-bottom: 0;
  }

  .admin-layout .members-table.list-style.list-op td .status-switch {
    max-height: 28px;
  }

  .admin-layout .members-table.list-style.list-op tbody tr {
    height: var(--olist-row-h);
  }

  .admin-layout .members-table.list-style.list-op tr > :first-child,
  .admin-layout .members-table.list-style.list-op tr > th:first-child .th-sort {
    padding-left: var(--list-first-col-pad);
  }

  .admin-layout .members-table.list-style.list-op tr > :last-child {
    padding-right: 16px;
  }

  /* (the row number and the tick: a little room between them, both narrow) */
  #panel-members .members-table.list-op .col-num {
    padding-right: 12px;
  }

  .admin-layout .members-table.list-style.list-op .col-select {
    padding-right: 16px;
  }

  /* (the tick column first on screen, e.g. # turned off in Columns: the first column's room from the
     list's edge; Ben 2026-11-03 "they are connected to the side") */
  .admin-layout .members-table.list-style.list-op tr > .col-select:first-child,
  .admin-layout .members-table.list-style.list-op.hide-col-num tr > .col-select {
    width: calc(36px + var(--list-first-col-pad));
    padding-left: var(--list-first-col-pad);
  }

  /* (the row's buttons and the name link fit the 38px row) */
  .admin-layout .members-table.list-style.list-op td .btn.btn-sm {
    height: 26px;
  }

  .admin-layout .members-table.list-style.list-op td .member-page-link {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 18px;
  }
}

/* (text in the cells: one weight and colour, as Ontraport's; links keep the accent on hover only) */
.admin-layout .members-table.list-op td :is(.member-page-link, .member-email-text, .member-lessons-n) {
  color: var(--olist-cell-color);
  font-weight: var(--olist-cell-weight);
}

.admin-layout .members-table.list-op td .member-page-link:hover {
  color: var(--olist-accent);
}

.admin-layout .members-table.list-op td .member-lessons-of {
  color: var(--color-text-muted);
  font-weight: var(--olist-cell-weight);
}

/* ======================================================================
   AUTOMATION EDITOR: the "Lively" look ([automation-editor-lively-look], Ben 2026-11-07: "number 3 is
   really good"; the mockup "Automations editor ideas", board "3 · Lively"). ONLY the flow editor
   (#automation-editor-view), LOOK ONLY: colours, borders, corners, shadows, fonts' weight and colour.
   No size or position the lanes, arrows and connectors depend on changes: the card keeps its size (its
   1px edge is an outside ring, the old 3px left edge stays as transparent room), the "+" buttons stay
   24px and the lines stay centred. Every colour is a variable here, light and dark.
   ====================================================================== */
#automation-editor-view {
  --lv-page: #f3f1ea;
  --lv-canvas: #fbfaf6;
  --lv-dot: #ddd9cc;
  --lv-canvas-border: #d6dded;
  --lv-body: #ffffff;
  --lv-text: #1c2330;
  --lv-muted: #55607a;
  --lv-line: #c9c5b6;
  --lv-plain-plus: #8a8574;
  --lv-no: #c2453d;
  --lv-yes: #2f8f6a;
  --lv-ui-border: #cdd7e8;
  --lv-ui-divider: #e3e8f2;
  --lv-ui-text: #24406f;
  --lv-ui-fill: #24406f;
  --lv-ui-fill-text: #ffffff;
  --lv-shadow: rgba(28, 35, 48, 0.45);
  --lv-canvas-shadow: rgba(36, 64, 111, 0.35);
  /* The step families: colour and its light tint (the card's footer strip) */
  --lv-trigger: #d9663d;   --lv-trigger-tint: #fdeee8;
  --lv-condition: #2f8f6a; --lv-condition-tint: #e6f4ee;
  --lv-message: #3b6fd4;   --lv-message-tint: #e8effc;
  --lv-end: #c2453d;       --lv-end-tint: #fbe9e7;
  --lv-timing: #1f8a9a;    --lv-timing-tint: #e2f2f4;
  --lv-contacts: #7a5cc4;  --lv-contacts-tint: #efeafa;
  --lv-course: #c98a1b;    --lv-course-tint: #fbf1dc;
  --lv-notify: #55607a;    --lv-notify-tint: #eceef3;
  --lv-flow: #a2457f;      --lv-flow-tint: #f8e8f1;
  --lv-other: #6b7280;     --lv-other-tint: #eef0f2;
  /* (the lines: the editor's own variables, so every line follows) */
  --flow-line-w: 2px;
  --flow-line: var(--lv-line);
  --flow-yes-line: var(--lv-yes);
  --flow-no-line: var(--lv-no);
  --lv-plus: var(--lv-plain-plus);
}

/* Dark: the same idea on a dark canvas; the colours kept, the tints dark, the text light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #automation-editor-view {
    --lv-page: #15171b;
    --lv-canvas: #1b1e23;
    --lv-dot: #31353d;
    --lv-canvas-border: #2e3440;
    --lv-body: #23272e;
    --lv-text: #e8ebf0;
    --lv-muted: #aab2c3;
    --lv-line: #5c5a52;
    --lv-plain-plus: #7d7969;
    --lv-no: #d4564d;
    --lv-yes: #349d75;
    --lv-ui-border: #3a4558;
    --lv-ui-divider: #2f3746;
    --lv-ui-text: #c9d6ee;
    --lv-ui-fill: #3b5b94;
    --lv-shadow: rgba(0, 0, 0, 0.7);
    --lv-canvas-shadow: rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] #automation-editor-view {
  --lv-page: #15171b;
  --lv-canvas: #1b1e23;
  --lv-dot: #31353d;
  --lv-canvas-border: #2e3440;
  --lv-body: #23272e;
  --lv-text: #e8ebf0;
  --lv-muted: #aab2c3;
  --lv-line: #5c5a52;
  --lv-plain-plus: #7d7969;
  --lv-no: #d4564d;
  --lv-yes: #349d75;
  --lv-ui-border: #3a4558;
  --lv-ui-divider: #2f3746;
  --lv-ui-text: #c9d6ee;
  --lv-ui-fill: #3b5b94;
  --lv-shadow: rgba(0, 0, 0, 0.7);
  --lv-canvas-shadow: rgba(0, 0, 0, 0.6);
}

/* The page behind the canvas (only while the editor is open) */
body.admin-layout:has(#panel-automations:not([hidden]) #automation-editor-view:not([hidden])) {
  background: #f3f1ea;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.admin-layout:has(#panel-automations:not([hidden]) #automation-editor-view:not([hidden])) {
    background: #15171b;
  }
}

:root[data-theme="dark"] body.admin-layout:has(#panel-automations:not([hidden]) #automation-editor-view:not([hidden])) {
  background: #15171b;
}

/* The canvas: warm off-white, fainter dots on a 22px grid, a thin border, a soft shadow */
.admin-layout #automation-editor-view .flow-canvas {
  border: 1px solid var(--lv-canvas-border);
  border-radius: 3px;
  background-color: var(--lv-canvas);
  background-image: radial-gradient(var(--lv-dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
  box-shadow: 0 8px 20px -14px var(--lv-canvas-shadow);
}

/* ----- The step boxes ----- */
/* Each family's colour (--lv-c) and tint (--lv-t); dark: the tint is the colour mixed into the dark box */
#automation-editor-view .flow-block { --lv-c: var(--lv-other); --lv-t: var(--lv-other-tint); }
#automation-editor-view .flow-block.flow-kind-trigger { --lv-c: var(--lv-trigger); --lv-t: var(--lv-trigger-tint); }
#automation-editor-view .flow-block.flow-hue-conditions { --lv-c: var(--lv-condition); --lv-t: var(--lv-condition-tint); }
#automation-editor-view .flow-block.flow-hue-messages { --lv-c: var(--lv-message); --lv-t: var(--lv-message-tint); }
#automation-editor-view .flow-block.flow-hue-timing { --lv-c: var(--lv-timing); --lv-t: var(--lv-timing-tint); }
#automation-editor-view .flow-block.flow-hue-contacts { --lv-c: var(--lv-contacts); --lv-t: var(--lv-contacts-tint); }
#automation-editor-view .flow-block.flow-hue-course { --lv-c: var(--lv-course); --lv-t: var(--lv-course-tint); }
#automation-editor-view .flow-block.flow-hue-notify { --lv-c: var(--lv-notify); --lv-t: var(--lv-notify-tint); }
#automation-editor-view .flow-block.flow-hue-flow { --lv-c: var(--lv-flow); --lv-t: var(--lv-flow-tint); }
#automation-editor-view .flow-block.flow-type-end_automation,
#automation-editor-view .flow-block.flow-type-remove_from_automation,
#automation-editor-view .flow-block.flow-join { --lv-c: var(--lv-end); --lv-t: var(--lv-end-tint); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #automation-editor-view .flow-block {
    --lv-t: color-mix(in srgb, var(--lv-c) 22%, var(--lv-body));
    --lv-ink: color-mix(in srgb, var(--lv-c) 62%, #ffffff);
  }
}

:root[data-theme="dark"] #automation-editor-view .flow-block {
  --lv-t: color-mix(in srgb, var(--lv-c) 22%, var(--lv-body));
  --lv-ink: color-mix(in srgb, var(--lv-c) 62%, #ffffff);
}

/* White body, a 1px edge in the family colour (an outside ring: the size never changes), 3px corners,
   a soft shadow; a thin footer strip in the family tint behind the chart and info buttons. The old 3px
   left edge stays as transparent room, so the text keeps its width. */
.admin-layout #automation-editor-view .flow-block,
.admin-layout #automation-editor-view .flow-block.flow-hued,
.admin-layout #automation-editor-view .flow-block.flow-join {
  border-left-color: transparent;
  border-radius: 3px;
  /* (24px: the chart and info icons fit in it, the text above stays on white with details off) */
  background: linear-gradient(to top, var(--lv-t) 0, var(--lv-t) 24px, var(--lv-body) 24px);
  box-shadow: 0 0 0 1px var(--lv-c), 0 6px 14px -10px var(--lv-shadow);
  color: var(--lv-text);
}

/* (a box without the chart and info buttons: no footer strip) */
.admin-layout #automation-editor-view .flow-block.flow-join {
  background: var(--lv-body);
}

.admin-layout #automation-editor-view .flow-block.is-selected {
  box-shadow: 0 0 0 2px var(--lv-c), 0 0 0 5px color-mix(in srgb, var(--lv-c) 22%, transparent), 0 6px 14px -10px var(--lv-shadow);
}

.admin-layout #automation-editor-view .flow-block.has-problem {
  box-shadow: 0 0 0 1px var(--lv-c), inset 0 0 0 2px var(--color-warning-text), 0 6px 14px -10px var(--lv-shadow);
}

.admin-layout #automation-editor-view .flow-block.is-goto-target {
  box-shadow: 0 0 0 3px var(--flow-goto), 0 6px 14px -10px var(--lv-shadow);
}

/* The icon tile: filled with the family colour, the icon white */
.admin-layout #automation-editor-view .flow-block .flow-icon,
.admin-layout #automation-editor-view .flow-block.flow-hued .flow-icon {
  border-radius: 3px;
  background: var(--lv-c);
  color: #ffffff;
}

/* "STEP 6": small bold capitals in the family colour; the title bold 14px; the lines under it grey-blue */
.admin-layout #automation-editor-view .flow-block .flow-step-label {
  color: var(--lv-ink, var(--lv-c));
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.admin-layout #automation-editor-view .flow-block .flow-title {
  color: var(--lv-text);
  font-size: 14px;
  font-weight: 700;
}

.admin-layout #automation-editor-view .flow-block .flow-value,
.admin-layout #automation-editor-view .flow-block .flow-summary,
.admin-layout #automation-editor-view .flow-block .flow-detail-line {
  color: var(--lv-muted);
}

/* The chart and info buttons sit on the strip: no box of their own, the family colour on hover */
.admin-layout #automation-editor-view .flow-block .flow-card-btn {
  border-color: transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--lv-muted);
}

.admin-layout #automation-editor-view .flow-block .flow-card-btn:hover,
.admin-layout #automation-editor-view .flow-block .flow-card-btn:focus-visible {
  border-color: var(--lv-c);
  background: var(--lv-body);
  color: var(--lv-ink, var(--lv-c));
}

/* ----- Lines, Yes / No labels and "+" buttons ----- */
/* Inside an If / Else lane every line, arrow and "+" takes the lane's colour (red No, green Yes); a
   Fork's paths and the main line stay warm grey. (Variables: a lane inside a lane takes its own.) */
/* (the widths: --flow-line-w above, 2px; the split over the lanes is --flow-branch, red | green) */
#automation-editor-view .flow-lane-col.is-no:not(.is-fork) { --flow-line: var(--lv-no); --flow-branch: var(--lv-no); --lv-plus: var(--lv-no); }
#automation-editor-view .flow-lane-col.is-yes:not(.is-fork) { --flow-line: var(--lv-yes); --flow-branch: var(--lv-yes); --lv-plus: var(--lv-yes); }
#automation-editor-view .flow-lane-col.is-fork { --flow-line: var(--lv-line); --flow-branch: var(--lv-line); --flow-no-line: var(--lv-line); --lv-plus: var(--lv-plain-plus); }

/* Yes / No: filled rectangles, 3px corners, white bold 11px */
.admin-layout #automation-editor-view .flow-branch-pill {
  border: 0;
  border-radius: 3px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.admin-layout #automation-editor-view .flow-lane-col.is-no:not(.is-fork) > .flow-branch-in > .flow-branch-pill {
  background: var(--lv-no);
}

.admin-layout #automation-editor-view .flow-lane-col.is-yes:not(.is-fork) > .flow-branch-in > .flow-branch-pill {
  background: var(--lv-yes);
}

/* "+": filled, 3px corners, white: red on a No lane, green on a Yes lane, warm grey on a plain line
   (it stays 24px: the connectors are measured around it) */
#automation-editor-view .flow-plus {
  --flow-pill: var(--lv-plus);
}

.admin-layout #automation-editor-view .flow-plus {
  border-radius: 3px;
}

/* (phones: the button is a 44px hit area and its visible square is ::before, 22px: that one is filled) */
@media (max-width: 600px) {
  .admin-layout #automation-editor-view .flow-plus::before {
    border-radius: 3px;
    background: var(--lv-plus);
    box-shadow: none;
  }
}

/* ----- The top row and the bottom toolbar ----- */
.admin-layout #automation-editor-view #flow-title {
  color: var(--lv-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* (phones: the title keeps its old size, so the header stays two short lines) */
@media (max-width: 600px) {
  .admin-layout #automation-editor-view #flow-title {
    font-size: 18px;
  }
}

.admin-layout #automation-editor-view .flow-editor-header .flow-back {
  color: var(--lv-muted);
}

.admin-layout #automation-editor-view .flow-editor-header .btn.btn-secondary {
  border: 1px solid var(--lv-ui-border);
  border-radius: 3px;
  background: var(--lv-body);
  color: var(--lv-ui-text);
  font-weight: 500;
}

.admin-layout #automation-editor-view .flow-editor-header .btn.btn-secondary:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--lv-ui-text);
  background: var(--lv-body);
}

.admin-layout #automation-editor-view .flow-zoom-bar {
  border: 1px solid var(--lv-ui-border);
  border-radius: 3px;
  background: var(--lv-body);
  box-shadow: 0 6px 14px -10px var(--lv-shadow);
}

.admin-layout #automation-editor-view .flow-zoom-bar .flow-zoom-btn,
.admin-layout #automation-editor-view .flow-zoom-bar .flow-zoom-title {
  border-color: var(--lv-ui-divider);
  color: var(--lv-ui-text);
  font-weight: 500;
}

/* The last button ("Show details" / "Hide details"): filled */
.admin-layout #automation-editor-view .flow-zoom-bar #flow-details-toggle {
  background: var(--lv-ui-fill);
  color: var(--lv-ui-fill-text);
}

.admin-layout #automation-editor-view .flow-zoom-bar #flow-details-toggle:hover,
.admin-layout #automation-editor-view .flow-zoom-bar #flow-details-toggle:focus-visible {
  background: color-mix(in srgb, var(--lv-ui-fill) 85%, #000000);
  color: var(--lv-ui-fill-text);
}

/* ----- A dropped step: "Move it here" / "Copy it here" / "Cancel" next to the spot
   ([step-drop-ask-move-or-copy], Ben 2026-11-07) ----- */
.admin-layout #automation-editor-view .flow-drop-choice {
  position: fixed;
  /* (above the messages, 80: the question is what matters now) */
  z-index: 85;
  box-sizing: border-box;
  width: max-content;
  max-width: min(360px, calc(100vw - 16px));
  padding: 12px 14px;
  border: 1px solid var(--lv-ui-border);
  border-radius: 3px;
  background: var(--lv-body);
  box-shadow: 0 12px 28px -12px var(--lv-shadow);
  color: var(--lv-text);
}

.admin-layout #automation-editor-view .flow-drop-choice-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.admin-layout #automation-editor-view .flow-drop-choice-what {
  margin: 2px 0 10px;
  color: var(--lv-muted);
  font-size: 12px;
}

.admin-layout #automation-editor-view .flow-drop-choice-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-layout #automation-editor-view .flow-drop-choice-buttons .btn {
  border-radius: 3px;
}

/* (the spot stays lit while the choice is open) */
.admin-layout #automation-editor-view .flow-connector.is-drop-chosen .flow-plus {
  background: var(--btn-focus);
  color: #ffffff;
  box-shadow: 0 0 0 6px rgba(14, 126, 78, 0.28);
}

/* ===== "Links & people" of an automation and one step's people ([automation-links-and-people]) ===== */
.lp-dialog {
  width: min(1100px, calc(100vw - 32px));
}

.sp-dialog {
  width: min(960px, calc(100vw - 32px));
}

.lp-dialog .lp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.lp-dialog .lp-head h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

.lp-dialog .lp-section {
  margin-top: 18px;
}

.lp-dialog .lp-section h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

.lp-dialog .lp-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* (its own plain table: the words wrap; on a phone it scrolls sideways inside the panel) */
.lp-dialog .lp-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.lp-dialog .lp-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.lp-dialog .lp-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* (one step's people: 7 columns, roomier; sideways on a phone) */
.lp-dialog .sp-table {
  min-width: 920px;
}

.lp-dialog #lp-links th:nth-child(1) { width: 46%; }
.lp-dialog #lp-links th:nth-child(3) { width: 90px; }
.lp-dialog #lp-steps th:nth-child(1) { width: 20%; }
.lp-dialog #lp-steps th:nth-child(2) { width: 24%; }
.lp-dialog #lp-steps th:nth-child(4),
.lp-dialog #lp-steps th:nth-child(5) { width: 84px; text-align: right; }
.lp-dialog #lp-steps th:nth-child(6) { width: 130px; }

.lp-dialog .lp-table .th-sort {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.lp-dialog .lp-statuses .flow-status-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 13px;
}

.lp-dialog .lp-statuses .flow-status-chip.is-zero {
  opacity: 0.6;
}

.lp-dialog .lp-what {
  max-width: 280px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.lp-dialog .lp-num {
  text-align: right;
  white-space: nowrap;
}

.lp-dialog .lp-actions {
  text-align: right;
  white-space: nowrap;
}

.lp-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 1px 0;
}

.lp-link .lp-link-text {
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.lp-link .lp-link-warn {
  font-size: 11px;
  white-space: normal;
}

.lp-dialog .lp-statuses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lp-dialog .lp-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.lp-dialog .lp-tools input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
}

/* (phones: the editor's "Links & people" button is its icon only, so the top row keeps its width; its icon
   shows there, like Undo / Redo, although the other buttons of that row hide theirs) */
@media (max-width: 600px) {
  .admin-layout #flow-links-people .flow-lp-text {
    display: none;
  }

  .admin-layout .flow-editor .flow-header-end #flow-links-people {
    width: 28px;
    padding: 0;
  }

  .admin-layout .flow-editor .flow-header-end #flow-links-people svg {
    display: block;
    margin: 0 auto;
  }
}

/* The step panel's own section */
.admin-layout .lp-step-section {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.admin-layout .lp-step-section summary {
  cursor: pointer;
  font-weight: 600;
}

.admin-layout .lp-step-section .lp-step-links {
  margin: 8px 0 4px;
}

/* ----- More → Rules (admin-rules.js): the one list look (admin-list-look.js), its sentences wrap ----- */
.admin-layout .rules-claude-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.admin-layout .rules-table {
  table-layout: fixed;
  width: 100%;
}

/* (the list look keeps a cell to one line; here the sentences wrap, at the top of their row) */
body.admin-layout .members-table.list-op.rules-table td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.admin-layout .rules-table .rules-col-name { width: 18%; }
.admin-layout .rules-table .rules-col-what { width: 26%; }
.admin-layout .rules-table .rules-col-setting { width: 11%; }
.admin-layout .rules-table .rules-col-why { width: 19%; }
.admin-layout .rules-table .rules-col-where { width: 15%; }
.admin-layout .rules-table .rules-col-change { width: 11%; }
/* (room for Columns at the right end of the heading row) */
.admin-layout .rules-table thead th.col-actions { width: 112px; }

.admin-layout .rules-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.admin-layout .rules-what {
  color: var(--color-text-muted);
  font-weight: 400;
}

.admin-layout .rules-name .badge.rules-new {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.admin-layout .rules-claude {
  font-weight: 400;
}

.admin-layout .rules-row.is-new td {
  background: var(--color-surface-alt);
}

/* Each category its own calm tint (Ben 2026-11-09: "make the background of the rules category different
   color so its easy to check"): one token pair per category (the tint, and its dot), light and dark; the
   band and every row of the category take the tint, the band a dot of the stronger colour */
.admin-layout {
  --rules-cat-texts: #e8f1fc;
  --rules-cat-texts-dot: #2f6fd0;
  --rules-cat-emails: #e5f5ea;
  --rules-cat-emails-dot: #23874a;
  --rules-cat-automations: #fcf1d8;
  --rules-cat-automations-dot: #b7780a;
  --rules-cat-members: #f0e9fb;
  --rules-cat-members-dot: #7a4fc8;
  --rules-cat-alerts: #fce9ed;
  --rules-cat-alerts-dot: #c73e5d;
  --rules-cat-other: #eef0f2;
  --rules-cat-other-dot: #6b7280;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-layout {
    --rules-cat-texts: #172a42;
    --rules-cat-texts-dot: #7fb0ff;
    --rules-cat-emails: #14301f;
    --rules-cat-emails-dot: #6fd394;
    --rules-cat-automations: #35290d;
    --rules-cat-automations-dot: #f0bd55;
    --rules-cat-members: #281e3d;
    --rules-cat-members-dot: #b796f2;
    --rules-cat-alerts: #3a1a23;
    --rules-cat-alerts-dot: #f08aa2;
    --rules-cat-other: #24272c;
    --rules-cat-other-dot: #a3a9b3;
  }
}

:root[data-theme="dark"] .admin-layout {
  --rules-cat-texts: #172a42;
  --rules-cat-texts-dot: #7fb0ff;
  --rules-cat-emails: #14301f;
  --rules-cat-emails-dot: #6fd394;
  --rules-cat-automations: #35290d;
  --rules-cat-automations-dot: #f0bd55;
  --rules-cat-members: #281e3d;
  --rules-cat-members-dot: #b796f2;
  --rules-cat-alerts: #3a1a23;
  --rules-cat-alerts-dot: #f08aa2;
  --rules-cat-other: #24272c;
  --rules-cat-other-dot: #a3a9b3;
}

body.admin-layout .members-table.list-op.rules-table tr[data-cat="texts"] > :is(td, th) { background: var(--rules-cat-texts); }
body.admin-layout .members-table.list-op.rules-table tr[data-cat="emails"] > :is(td, th) { background: var(--rules-cat-emails); }
body.admin-layout .members-table.list-op.rules-table tr[data-cat="automations"] > :is(td, th) { background: var(--rules-cat-automations); }
body.admin-layout .members-table.list-op.rules-table tr[data-cat="members-and-courses"] > :is(td, th) { background: var(--rules-cat-members); }
body.admin-layout .members-table.list-op.rules-table tr[data-cat="alerts"] > :is(td, th) { background: var(--rules-cat-alerts); }
body.admin-layout .members-table.list-op.rules-table tr[data-cat="other"] > :is(td, th) { background: var(--rules-cat-other); }

/* ----- More → Change log (admin-progress.js): the summary, its thin bar, the status chips, the new dot ----- */
.admin-layout .progress-summary {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.admin-layout .progress-bar {
  display: flex;
  height: 6px;
  margin: 0 0 10px;
  overflow: hidden;
  background: var(--olist-line, var(--color-border));
}

.admin-layout .progress-bar-part.is-checked { background: var(--color-accent-text, #1f8a4c); }
.admin-layout .progress-bar-part.is-built { background: var(--color-info-text, #2f6fd0); }
.admin-layout .progress-bar-part.is-waiting { background: var(--color-text-lighter, #9aa0a6); }
.admin-layout .progress-bar-part.is-needs-ben { background: var(--color-warning-text, #b7780a); }

/* (small chips on one line, like a segmented switch) */
.admin-layout .progress-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-layout .progress-filter {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.admin-layout .progress-filter.is-on {
  border-color: var(--olist-accent, var(--color-text));
  background: var(--olist-accent, var(--color-text));
  color: #fff;
}

.admin-layout .progress-pill {
  white-space: normal;
}

.admin-layout .progress-table {
  table-layout: fixed;
  width: 100%;
}

body.admin-layout .members-table.list-op.progress-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.admin-layout .progress-table .progress-col-item { width: 30%; }
.admin-layout .progress-table .progress-col-area { width: 10%; }
.admin-layout .progress-table .progress-col-status { width: 16%; }
.admin-layout .progress-table .progress-col-meaning { width: 20%; }
.admin-layout .progress-table .progress-col-built { width: 12%; }
.admin-layout .progress-table .progress-col-checked { width: 8%; }
.admin-layout .progress-table thead th.col-actions { width: 112px; }

.admin-layout .progress-meaning {
  color: var(--color-text-muted);
  font-weight: 400;
}

.admin-layout .progress-commit {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 400;
}

.admin-layout .progress-new-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--olist-accent, #3d83f7);
}

.admin-layout .rules-cat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 0;
}

.admin-layout tr[data-cat="texts"] .rules-cat-dot { background: var(--rules-cat-texts-dot); }
.admin-layout tr[data-cat="emails"] .rules-cat-dot { background: var(--rules-cat-emails-dot); }
.admin-layout tr[data-cat="automations"] .rules-cat-dot { background: var(--rules-cat-automations-dot); }
.admin-layout tr[data-cat="members-and-courses"] .rules-cat-dot { background: var(--rules-cat-members-dot); }
.admin-layout tr[data-cat="alerts"] .rules-cat-dot { background: var(--rules-cat-alerts-dot); }
.admin-layout tr[data-cat="other"] .rules-cat-dot { background: var(--rules-cat-other-dot); }

/* (the band a little stronger than its rows: the same tint under a thin line in its colour) */
body.admin-layout .members-table.list-op.rules-table tr.list-look-group > th {
  box-shadow: inset 4px 0 0 0 currentColor;
}

body.admin-layout .members-table.list-op.rules-table tr.list-look-group[data-cat="texts"] > th { box-shadow: inset 4px 0 0 0 var(--rules-cat-texts-dot); }
body.admin-layout .members-table.list-op.rules-table tr.list-look-group[data-cat="emails"] > th { box-shadow: inset 4px 0 0 0 var(--rules-cat-emails-dot); }
body.admin-layout .members-table.list-op.rules-table tr.list-look-group[data-cat="automations"] > th { box-shadow: inset 4px 0 0 0 var(--rules-cat-automations-dot); }
body.admin-layout .members-table.list-op.rules-table tr.list-look-group[data-cat="members-and-courses"] > th { box-shadow: inset 4px 0 0 0 var(--rules-cat-members-dot); }
body.admin-layout .members-table.list-op.rules-table tr.list-look-group[data-cat="alerts"] > th { box-shadow: inset 4px 0 0 0 var(--rules-cat-alerts-dot); }
body.admin-layout .members-table.list-op.rules-table tr.list-look-group[data-cat="other"] > th { box-shadow: inset 4px 0 0 0 var(--rules-cat-other-dot); }

@media (max-width: 700px) {
  .admin-layout .rules-table {
    table-layout: auto;
  }

  .admin-layout .rules-table thead {
    display: none;
  }

  /* (a card: each part under its label, the sentences full width) */
  .admin-layout .rules-table td[data-label] {
    display: block;
    width: auto;
  }

  .admin-layout .rules-table td[data-label]::before {
    display: block;
    margin-bottom: 2px;
  }

  .admin-layout .rules-table td.rules-name-cell::before {
    content: none;
  }
}

/* ----- The member page's header ([member-page-redesign] step 1; admin.js paintMemberHead): one slim row, the
   back link small, the avatar and the name (a page title, wrapping, never clipped) with its chips, the email
   under it; Send text, Email and Actions at the right. About 80px on a computer; it stays at the top. ----- */
#member-view-drawer .admin-drawer-header {
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#member-view-drawer .admin-drawer-header .drawer-back {
  align-self: flex-start;
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

#member-view-drawer .admin-drawer-header .drawer-back:hover {
  color: var(--color-text);
  text-decoration: underline;
}

#member-view-drawer .mv-head-who {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#member-view-drawer .mv-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--olist-accent, #3d83f7);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

#member-view-drawer .mv-head-names {
  min-width: 0;
}

#member-view-drawer .mv-head-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

#member-view-drawer #member-view-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#member-view-drawer #member-view-name {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

#member-view-drawer .mv-head-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

#member-view-drawer .mv-in-actions {
  display: none !important;
}

#member-view-drawer .mv-head-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 2px 0 0;
}

#member-view-drawer .mv-head-contact:empty {
  display: none;
}

#member-view-drawer .mv-copy {
  color: var(--color-text-muted);
  font-size: 14px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

#member-view-drawer .mv-copy:hover {
  color: var(--color-text);
  text-decoration: underline;
}

#member-view-drawer .mv-dot {
  color: var(--color-text-lighter);
}

#member-view-drawer .mv-medal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* The tab bar ([member-page-redesign] step 2): the admin's tab look, a quiet count after a name
   ("Courses 13"), the open tab underlined; on a phone it scrolls sideways (no scroll bar drawn) */
#member-view-drawer .mv-tabs {
  gap: 0;
  margin-bottom: 20px;
  scrollbar-width: none;
}

#member-view-drawer .mv-tabs::-webkit-scrollbar {
  display: none;
}

#member-view-drawer .mv-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  white-space: nowrap;
}

#member-view-drawer .mv-tab:hover {
  color: var(--color-text);
}

#member-view-drawer .mv-tab[aria-selected="true"] {
  font-weight: 600;
}

#member-view-drawer .mv-tab-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

#member-view-drawer .mv-tab[aria-selected="true"] .mv-tab-count {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  color: var(--color-text);
}

/* "Updated 11:14 AM" and a small Refresh icon, in the right-hand group before the × */
#member-view-drawer .mv-head-end > .live-status {
  margin: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

#member-view-drawer .mv-head-end .live-refresh {
  gap: 0;
  padding-left: 7px;
  padding-right: 7px;
  font-size: 0;
}

#member-view-drawer .mv-head-end .live-refresh > .btn-icon-svg {
  margin: 0;
}

/* A phone: the back link, then the name, its chips and the email, then the buttons */
@media (max-width: 700px) {
  #member-view-drawer .admin-drawer-header {
    flex-wrap: wrap;
  }

  #member-view-drawer .mv-head-who {
    flex: 1 1 100%;
    order: 1;
  }

  #member-view-drawer .mv-head-end {
    flex: 1 1 100%;
    order: 2;
    flex-wrap: wrap;
  }

  #member-view-drawer .mv-head-end > [data-drawer-close] {
    position: absolute;
    top: 8px;
    right: var(--panel-gutter);
  }

  #member-view-drawer #member-view-title {
    font-size: 20px;
  }
}

/* ----- The member page's panels ([member-page-redesign] step 3): every section of every tab is one card
   (the page's surface, a 1px border, square like the admin's cards, 16-20px inside, 16px apart) with a
   title row; the page at most 1100px wide, centred. In Edit layout the cards are what is dragged. ----- */
#member-view-drawer .mv-tabs,
#member-view-drawer #mv-tab-panels {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

#member-view-drawer .mv-section.mv-card {
  margin: 0 0 16px;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

#member-view-drawer .mv-section.mv-card + .mv-section.mv-card {
  margin-top: 0;
}

#member-view-drawer .mv-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: -2px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

#member-view-drawer .mv-card-head .mv-section-title,
#member-view-drawer .mv-card-title {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#member-view-drawer .mv-card-count[hidden] {
  display: none;
}

/* Ontraport's card: its own heading row (with Refresh) is the title row; the webhook's purchases
   under it get the same title look */
#member-view-drawer .mv-card .op-head {
  align-items: center;
  justify-content: space-between;
  margin: -2px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

#member-view-drawer .mv-card .op-head .mv-section-title,
#member-view-drawer .mv-card .mv-purchases-box .mv-section-title {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#member-view-drawer .mv-card .op-head .mv-section-title {
  margin: 0;
  padding: 0;
  border: 0;
}

#member-view-drawer .mv-card .mv-purchases-box .mv-section-title {
  margin: 8px 0 14px;
  padding-bottom: 10px;
}

/* Danger zone: the same card with its red rule and light red fill */
#member-view-drawer .mv-section-danger.mv-card {
  margin-top: 28px;
  border-color: var(--btn-danger-text);
  background: var(--color-danger-soft);
}

#member-view-drawer .mv-section-danger .mv-card-head {
  border-bottom-color: var(--btn-danger-text);
}

#member-view-drawer .mv-section-danger .mv-card-head .mv-section-title {
  color: var(--color-danger-text);
}

#member-view-drawer.is-editing-layout .mv-section.mv-card {
  border-style: dashed;
  border-color: var(--color-border-strong);
}

/* Courses: one slim card per course inside the Courses panel: tick box, name, chips and its Actions
   menu on one row; the progress bar; the key numbers on ONE line; the access email as a small grey
   line with its link; the arrow still opens the lesson details */
#member-view-drawer .member-course-card.mcs-card {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

#member-view-drawer .mc-card-actions {
  margin-left: auto;
}

#member-view-drawer .mcs-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  margin: 6px 0 0;
}

#member-view-drawer .mcs-stat {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  padding: 0;
  background: none;
}

#member-view-drawer .mcs-stat + .mcs-stat::before {
  content: "·";
  margin: 0 8px;
  color: var(--color-text-lighter);
}

#member-view-drawer .mcs-stats dd {
  margin: 0;
}

#member-view-drawer .mcs-label {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

#member-view-drawer .mcs-value {
  font-size: 13px;
  font-weight: 600;
}

#member-view-drawer .mcs-sub {
  color: var(--color-text-muted);
  font-size: 12px;
}

#member-view-drawer .mcs-sub::before {
  content: "(";
}

#member-view-drawer .mcs-sub::after {
  content: ")";
}

#member-view-drawer .member-course-email-line {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

#member-view-drawer .member-course-email-line .member-course-email-now {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font-size: 12px;
  text-decoration: underline;
}

#member-view-drawer .member-course-email-line .member-course-email-now > .btn-icon-svg {
  display: none;
}

/* Edit completed lessons: in the course's Actions menu now (the button stays for the menu to press) */
#member-view-drawer .mc-completed-edit {
  display: none;
}

#member-view-drawer .mc-completed-tools:has(.mc-completed-history:empty) {
  display: none;
}

@media (max-width: 700px) {
  #member-view-drawer .mv-section.mv-card {
    padding: 12px 14px;
  }

  #member-view-drawer .mcs-stats {
    display: flex;
    gap: 2px 16px;
  }

  /* (wrapped lines would start with a dot: plain spacing on a phone) */
  #member-view-drawer .mcs-stat + .mcs-stat::before {
    content: none;
  }
}

/* ----- Sales (Transactions | Products | Setup): the Automations list's slim header
   ([sales-header-and-lessons-page], admin-ontraport-products.js drawHead). One line: the tab's name and
   count, its ⓘ, the small tabs; the filter row right under it; the totals one small line. ----- */
#panel-ontraport-products .admin-toolbar.opp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

#panel-ontraport-products .opp-head-info:empty,
#panel-ontraport-products .opp-head-tabs:empty {
  display: none;
}

#panel-ontraport-products .opp-head-tabs .opp-tabs {
  gap: 0;
  margin: 0;
  border-bottom: 0;
}

#panel-ontraport-products .opp-head-tabs .opp-tab {
  min-height: 32px;
  padding: 4px 10px;
  border-bottom-width: 2px;
  font-size: 13px;
}

#panel-ontraport-products .opp-info-pop p {
  margin: 0 0 6px;
}

#panel-ontraport-products .opp-info-pop p:last-child {
  margin-bottom: 0;
}

/* The totals: one small line above the table (each still filters the list when clicked) */
#panel-ontraport-products .opp-chips {
  gap: 0 16px;
  margin: 8px 0;
}

#panel-ontraport-products .opp-chip {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
}

#panel-ontraport-products .opp-chip:hover,
#panel-ontraport-products .opp-chip.is-on {
  color: var(--color-text);
  text-decoration: underline;
}

@media (max-width: 700px) {
  #panel-ontraport-products .opp-head-tabs {
    flex: 1 1 100%;
    overflow-x: auto;
  }
}

/* Videos: the same slim header ([sales-header-and-lessons-page]): "Videos (N)", the Transcripts tool as
   one small closed line, then ONE control row (search, source, the All / Not in any course / In a course
   chips, Refresh), the Actions bar, the list. Only on the Videos page (the lesson form's picker keeps its
   own look). */
#panel-videos .transcripts-tool {
  margin: 0 0 8px;
  border: 0;
  background: none;
}

#panel-videos .transcripts-summary {
  padding: 2px 0;
  font-size: 13px;
}

#panel-videos .video-toolbar {
  margin-bottom: 8px;
}

#panel-videos .video-toolbar > .input-field[type="search"] {
  flex: 1 1 240px;
  max-width: 360px;
  height: var(--bar-control-h);
  min-height: var(--bar-control-h);
  font-size: 13px;
}

#panel-videos .video-toolbar > select.input-field {
  flex: 0 1 200px;
  height: var(--bar-control-h);
  min-height: var(--bar-control-h);
  font-size: 13px;
}

#panel-videos .video-usage-chips {
  flex: 0 1 auto;
}

#panel-videos .video-bulk-wrap {
  margin: 0 0 4px;
}

@media (max-width: 700px) {
  #panel-videos .video-toolbar > .input-field[type="search"] {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* Modules and lessons: one slim search row (the search, then "Search in" and "In" as two small
   dropdowns, admin.js lessonSearchScopeSelects); the list right under it; "Recent release emails" closed
   below the list ([sales-header-and-lessons-page]) */
#panel-lessons .lesson-search-selects {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

#panel-lessons .lesson-search-select {
  width: auto;
  height: var(--bar-control-h);
  min-height: var(--bar-control-h);
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
}

#panel-lessons .lesson-search {
  margin-bottom: 8px;
}

#panel-lessons .lesson-list-bar {
  min-height: 0;
  margin: 0 0 6px;
}

#panel-lessons .release-log-fold {
  margin-top: 24px;
}

#panel-lessons .release-log-summary {
  padding: 6px 0;
  cursor: pointer;
}

#panel-lessons .release-log-summary .admin-subtitle {
  display: inline;
  margin: 0;
  font-size: 15px;
}

#panel-lessons .release-log-fold > .admin-toolbar {
  margin: 4px 0 8px;
}

@media (max-width: 700px) {
  #panel-lessons .lesson-search-selects {
    flex: 1 1 100%;
  }
}