/* 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');

/* ============================================
   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;

  /* 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 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-button: 9px;

  /* 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: 0;
  --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;
}

/* 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;

    /* 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;

  /* 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: 2px;
}

/* 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: 999px;
  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-panel[hidden],
.account-view[hidden] {
  display: none;
}

.account-user {
  display: flex;
  flex-direction: column;
  padding: 8px 10px 10px;
  margin-bottom: 6px;
  border-bottom: 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: 6px;
  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: 6px 6px 0 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: 6px;
  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: 999px;
  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: 50%;
  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);
}

/* 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);
}

/* 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: 999px;
  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;
  }

  .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;
  gap: 8px;
  margin-bottom: 12px;
}

.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;
}

/* 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: 6px;
  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: 999px;
  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);
}

.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: 14px;
  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: 6px;
  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: 9px;
  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: 999px;
  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: 50%;
  background: #16a34a;
}

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

.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: 999px;
  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);
}

/* Main area: the full page width, same side padding as before */
.admin-layout .admin-main {
  min-width: 0;
  padding: 0 var(--nav-pad-x) 48px; /* lines up with the bar's content */
}

/* 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: 0 calc(-1 * var(--nav-pad-x)) 16px;
  padding: 0 var(--nav-pad-x);
}

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

/* 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: 8px 12px;
  margin-bottom: 12px;
}

.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: 8px;
}

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

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

.admin-layout .admin-toolbar-end {
  display: flex;
  gap: 8px;
  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: 50%;
  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-active-filters[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 .member-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.admin-layout .member-active-chip,
.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: 999px;
  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: 50%;
  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: 999px;
  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);
}

/* Four equal columns, two on tablets, one on phones; every group starts at the same top edge */
.admin-layout .member-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
}

@media (max-width: 1024px) {
  .admin-layout .member-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-layout .member-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-layout .member-filter-field select {
  width: 100%;
  height: 38px;
  margin: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}

/* One label line per group, the same height everywhere (the any / all switch sits beside its label) */
.admin-layout .member-filter-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}

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

.admin-layout .member-tag-mode {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  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);
}

/* "Include archived": a switch on its own row along the bottom */
.admin-layout .member-filter-more {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.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: 999px;
  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: 50%;
  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: 4px;
  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);
}

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

@media (max-width: 640px) {
  .admin-layout .member-filter-grid {
    grid-template-columns: 1fr;
  }
}

.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: 2px;
}

@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;
}

.admin-layout .showcases-table {
  min-width: 900px;
}

/* 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-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);
}

@media (max-width: 700px) {
  .admin-layout .showcases-table td.col-select {
    padding-top: 8px;
  }
}

/* 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;
}

/* 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;
}

/* 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;
}

.admin-layout .flow-editor .flow-editor-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 12px;
}

.admin-layout .flow-editor .flow-back {
  padding: 2px 4px;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  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%;
}

/* Blocks */
.admin-layout .flow-editor .flow-block {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.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: 12px;
  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: 50%;
  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: 50%;
  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: 50%;
  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: 8px;
  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: 999px;
  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(--admin-nav-height) - 8px));
    border-left: none;
    border-top: 1px solid var(--color-border-strong);
    border-radius: 16px 16px 0 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 {
  --flow-card-w: 360px;
  --flow-card-h: 64px;
  --flow-gap: 40px;
  --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);
  height: var(--flow-card-h);
  align-items: center;
  border: 0;
  border-radius: 12px;
  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);
}

.admin-layout .flow-editor .flow-block-main {
  height: 100%;
  gap: 10px;
  padding: 0 12px;
  overflow: hidden;
}

.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;
  overflow: hidden;
}

.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: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-layout .flow-editor .flow-summary {
  font-size: 12px;
  line-height: 16px;
}

/* "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: 999px;
  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;
}

/* Members here / failed: small chips at the right of the card, inside its height */
.admin-layout .flow-editor .flow-block > .flow-counts-row {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-self: center;
  gap: 4px;
  padding: 0 10px 0 0;
}

.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: 999px;
  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: 4px;
}

.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;
}

/* Phones: a bottom sheet */
@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;
  }
}

/* The Actions menus (lists and step cards): never taller than the window */
.actions-menu {
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}

/* ----- 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 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: 50%;
  background: var(--flow-goto);
  transform: translateY(-50%);
  cursor: grab;
  touch-action: none;
}

.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: 50%;
  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);
}

/* ---------- 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 {
  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: 999px;
  background: var(--flow-pill);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.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 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::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);
  }
}

/* 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 {
    --flow-card-w: min(360px, 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: 820px;
}

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

.admin-layout .automations-table .auto-name-col,
.admin-layout .automations-table .auto-name-cell {
  min-width: 220px;
  width: 34%;
}

.admin-layout .automations-table .auto-th-note {
  font-weight: 400;
  color: var(--color-text-lighter);
}

.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;
}

/* Names wrap only between words */
.admin-layout .auto-name {
  display: block;
  font-weight: 600;
  text-align: left;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.admin-layout .auto-trigger {
  margin-top: 4px;
}

.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;
}

.admin-layout .automations-table .auto-actions-cell .admin-row-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.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: 6px;
  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);
}

@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-stats-cell {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .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;
}

/* 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: 999px;
  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: 50%;
  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;
}

.admin-layout .member-bulk-facts {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.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;
}

/* Automations list: one small chip per trigger, wrapping instead of widening the table */
.admin-layout .trigger-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 320px;
}

.admin-layout .trigger-chips .badge {
  overflow-wrap: anywhere;
}

.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;
}

.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: 999px;
  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);
}

.admin-layout .cm-progress {
  position: relative;
  width: 120px;
  max-width: 100%;
  height: 8px;
  border-radius: 999px;
  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);
}

.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;
}

.admin-layout .sms-contact-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-layout .sms-contact-time {
  flex: none;
  font-size: 12px;
}

.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;
}

.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: 14px;
  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;
}

.admin-layout .live-switch .switch-label {
  font-size: 13px;
}

.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;
}

.admin-layout .step-choices legend {
  width: 100%;
  padding: 0;
}

.admin-layout .step-choice {
  margin: 0;
}

.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: 4px;
}

.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: 999px;
  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;
}

.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;
}

.admin-layout .cs-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}

.admin-layout .cs-toggle:hover {
  color: var(--color-text);
}

.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;
}

/* 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: 2px;
}

.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: 50%;
  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: 999px;
  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;
}

.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;
}

.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: 4px;
}

.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;
}

.notify-close {
  flex: none;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  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;
}

/* The same bar again under the lesson's content (same column, width and buttons as the top one) */
.lesson-complete-bar.lesson-complete-bar-bottom {
  margin-top: 28px;
}

/* "← 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: 4px;
  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: 6px;
  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: 4px 0 0 4px;
}

.progress-line .pbar:not(.is-continuous) > .pbar-slice:last-child {
  border-radius: 0 4px 4px 0;
}

.progress-line .pbar:not(.is-continuous) > .pbar-slice:only-child {
  border-radius: 4px;
}

/* 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: 999px;
  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);
}

.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%;
  }
}

.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 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: var(--btn-radius, 8px);
  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;
}

.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: 2px;
  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: 50%;
  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 */
}

.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 {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pb-block .pb-link-button.btn {
  display: inline-block;
  width: auto;
  height: auto;
  min-height: 38px;
  white-space: normal;
}

.pb-block .pb-image {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.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;
}

/* ----- 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;
}

.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;
}

.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);
}

.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-tabs {
  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);
}

.admin-layout .pb-settings > .pb-tabs {
  background: var(--color-surface);
}

/* 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;
}

.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: 50%;
  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: 999px;
  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: 2px;
}

.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: 6px;
  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: 6px;
}

.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: 6px;
  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: 6px;
  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);
  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;
}

.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: 50%;
  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;
}

.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);
}

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

/* 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;
}

.admin-layout .pb-link-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-brand);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.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: 4px;
}

/* 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: 50%;
  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: 2px;
}

/* 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;
}

.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: 8px;
}

.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: 6px;
  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: 6px;
  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: 6px;
  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: 6px;
  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: 6px;
}

.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: 8px;
}

.email-tab {
  padding: 4px 14px;
  border: 0;
  border-radius: 6px;
  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;
}

.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;
}

.email-merge-list {
  display: grid;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.email-merge-list li {
  display: grid;
  gap: 4px;
}

.email-merge-insert {
  justify-self: start;
}

.email-merge-insert code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.email-merge-meaning {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
}

.email-plain-note {
  margin-top: 20px;
}

/* "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: 10px 10px 0 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;
}

.email-tool {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  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: 50%;
  cursor: pointer;
}

.email-color-input {
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  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 0 10px 10px;
  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 0 10px 10px;
  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: 2px;
  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: 10px;
  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: 4px;
  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: 10px;
  background: var(--color-surface);
}

.email-preview-subject {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.email-preview-pre {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.email-preview-pre:empty {
  display: none;
}

.email-preview-wrap {
  margin: 0 auto;
  max-width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  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: 14px 14px 0 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));
  border-radius: var(--pbf-box-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: var(--pbf-input-radius, var(--radius-sm));
  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: var(--pbf-btn-radius, var(--btn-radius));
  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;
  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);
  }
}

/* ---------- 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;
}

/* ---------- Feature requests (admin-requests.js) ---------- */
.admin-layout .fr-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}

.admin-layout .fr-form[hidden] {
  display: none;
}

.admin-layout .fr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}

.admin-layout .fr-toolbar .member-search {
  flex: 1 1 220px;
  max-width: 360px;
}

.admin-layout .fr-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-layout .fr-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.admin-layout .fr-item.is-done .fr-title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.admin-layout .fr-main {
  flex: 1 1 320px;
  min-width: 0;
}

.admin-layout .fr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .fr-title {
  overflow-wrap: anywhere;
}

/* Plain text with its line breaks */
.admin-layout .fr-details {
  margin: 6px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  color: var(--color-text-muted);
}

.admin-layout .fr-meta {
  margin: 6px 0 0;
}

.admin-layout .fr-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-layout .fr-side .btn {
  width: auto;
}

.admin-layout .fr-priority {
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
}

.admin-layout .fr-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.admin-layout .fr-done {
  margin-top: 16px;
}

.admin-layout .fr-done > summary {
  padding: 8px 0;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- 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%;
}

.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: 6px;
  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;
}

/* The canvas */
.map-canvas {
  position: relative;
  height: min(70vh, 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: 3px;
  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: 999px;
  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;
}

@media (max-width: 600px) {
  .card.map-card {
    padding: 20px 16px;
  }

  .map-legend {
    display: none;
  }

  .btn.map-continue {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   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: 50%;
  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: 10px;
  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: 10px;
  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: 6px;
  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: 8px;
}

.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: 4px;
  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: 1px;
  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: 6px;
  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;
}